/* ===============================
   GLOBAL SETTINGS
================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", Arial, sans-serif;
}


body {
    background: #f5f5f5;
    color: #424242;
}


a {
    text-decoration: none;
    color: inherit;
}


button,
input,
select {
    font-family: inherit;
}





/* ===============================
   LOGIN PAGE
================================ */


.login-page {

    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    background:
        linear-gradient(
            135deg,
            #eeeeee,
            #ffffff
        );

}



.login-container {

    width: 100%;
    max-width: 420px;
    padding: 20px;

}



.login-card {

    background: white;
    padding: 40px;
    border-radius: 20px;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.08);

    text-align: center;

    animation: fadeIn 0.6s ease;

}



.logo-circle {

    width: 65px;
    height: 65px;

    border-radius: 50%;

    background: #2e7d32;

    color:white;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:22px;
    font-weight:bold;

    margin:auto;

}



.login-card h1 {

    margin-top:20px;
    font-size:26px;

}



.subtitle {

    color:#777;
    margin:10px 0 30px;

}





/* ===============================
   INPUTS
================================ */


.input-group {

    display:flex;
    flex-direction:column;

    margin-bottom:20px;

    text-align:left;

}



.input-group label {

    font-weight:600;
    margin-bottom:8px;

}



.input-group input,
.input-group select {

    padding:12px 15px;

    border:1px solid #ddd;

    border-radius:10px;

    outline:none;

    transition:0.3s;

}



.input-group input:focus,
.input-group select:focus {

    border-color:#2e7d32;

    box-shadow:
    0 0 0 3px rgba(46,125,50,.15);

}







/* ===============================
   BUTTONS
================================ */


.btn-primary {

    display:inline-block;

    width:100%;

    background:#2e7d32;

    color:white;

    border:none;

    padding:13px 20px;

    border-radius:12px;

    cursor:pointer;

    font-weight:bold;

    transition:.3s;

}



.btn-primary:hover {

    background:#1b5e20;

    transform:translateY(-2px);

}



.btn-primary.small {

    width:auto;

}



.btn-secondary {

    display:inline-block;

    padding:13px 20px;

    border-radius:12px;

    background:#ddd;

}






/* ===============================
   APPLICATION LAYOUT
================================ */


.app-container {

    display:flex;

    min-height:100vh;

}



/* ======================
   TOP NAVIGATION
====================== */

.navbar{

    min-height:90px;

    height:auto;

    background:white;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 40px;

    box-shadow:0 2px 15px rgba(0,0,0,.08);

    position:sticky;

    top:0;

    z-index:999;

}



.nav-logo{

    display:flex;

    align-items:center;

    gap:15px;

}



.nav-logo h2{

    color:#2E7D32;

    font-size:24px;

}



.navbar nav{

    display:flex;

    gap:15px;

}



.navbar nav a{

    padding:12px 20px;

    border-radius:10px;

    transition:.3s;

    font-weight:600;

}



.navbar nav a:hover{

    background:#E8F5E9;

    color:#2E7D32;

}



.navbar nav a.active{

    background:#2E7D32;

    color:white;

}






.main-content{

    max-width:1400px;

    margin:auto;

    padding:40px;

}





.top-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}



.top-header p {

    color:#777;

}




.profile-small span {

    background:#2e7d32;

    color:white;

    width:45px;

    height:45px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

}





/* ===============================
   DASHBOARD CARDS
================================ */


.dashboard-section {

    background:white;

    padding:25px;

    border-radius:20px;

    margin-bottom:25px;

    animation:fadeIn .5s ease;

}



.balance-container {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 20px;
    margin-top: 20px;
}





.balance-card {

    text-align:center;

}



.circle {

    width:120px;

    height:120px;

    margin:auto;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:25px;

}



.vacation .circle {

    background:#43a047;

}



.sick .circle {

    background:#1976d2;

}



.personal .circle {

    background:#fb8c00;

}



.wellness .circle {

    background:#8e24aa;

}




.balance-card h3 {

    margin-top:15px;

}






/* ===============================
   TABLE
================================ */


.table-container {

    overflow-x:auto;

}



table {

    width:100%;

    border-collapse:collapse;

}



th,
td {

    padding:15px;

    text-align:left;

    border-bottom:1px solid #eee;

}



tr:hover {

    background:#fafafa;

}



.status {

    padding:6px 12px;

    border-radius:20px;

    font-size:13px;

}



.pending {

    background:#fff3cd;

    color:#856404;

}



.approved {

    background:#d4edda;

    color:#155724;

}



.reminder-btn {

    border:none;

    background:#e8f5e9;

    padding:8px 12px;

    border-radius:8px;

    cursor:pointer;

}





/* ===============================
   FORMS
================================ */


.form-card,
.profile-card,
.calendar-card,
.legend-card {

    background:white;

    padding:30px;

    border-radius:20px;

    margin-bottom:25px;

    animation:fadeIn .5s ease;

}



.form-grid {

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:20px;

}



.form-actions {

    display:flex;

    gap:15px;

}







/* ===============================
   SUCCESS PAGE
================================ */


.success-page {

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

}



.success-card {

    background:white;

    padding:50px;

    border-radius:20px;

    text-align:center;

    max-width:450px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.1);

}



.success-icon {

    width:90px;

    height:90px;

    border-radius:50%;

    background:#2e7d32;

    color:white;

    font-size:50px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

}






/* ===============================
   CALENDAR
================================ */


.calendar-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.calendar-weekdays,
.calendar-days {

    display:grid;

    grid-template-columns:
    repeat(7,1fr);

    gap:10px;

    margin-top:20px;

}



.calendar-weekdays div {

    font-weight:bold;

    text-align:center;

}



.calendar-days div {

    background:#fafafa;

    padding:20px;

    min-height:70px;

    border-radius:10px;

    cursor:pointer;

}



.calendar-days div:hover {

    background:#e8f5e9;

}




.legend {

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}



.legend-color {

    display:inline-block;

    width:15px;

    height:15px;

    border-radius:50%;

}





/* ===============================
   PROFILE
================================ */


.profile-header {

    display:flex;

    align-items:center;

    gap:20px;

}



.profile-avatar {

    width:70px;

    height:70px;

    border-radius:50%;

    background:#2e7d32;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:25px;

}





/* ===============================
   ANIMATION
================================ */


@keyframes fadeIn {

    from {

        opacity:0;
        transform:translateY(15px);

    }


    to {

        opacity:1;
        transform:translateY(0);

    }

}






/* ===============================
   MOBILE RESPONSIVE
================================ */


@media(max-width:900px){

.navbar{

    flex-direction:column;

    height:auto;

    padding:20px;

}

.navbar nav{

    flex-wrap:wrap;

    justify-content:center;

    margin-top:20px;

}

.main-content{

    max-width: 1600px;
    margin: auto;
    padding: 40px;

}

.balance-container {

    grid-template-columns:
    repeat(2,1fr);

}

}






.form-grid {

    grid-template-columns:1fr;

}







@media(max-width:600px){


.app-container {

    flex-direction:column;

}



.sidebar {

    width:100%;

}



.sidebar nav a {

    font-size:14px;

    display:inline-block;

}



.balance-container {

    grid-template-columns:1fr;

}


.top-header {

    flex-direction:column;

    align-items:flex-start;

    gap:15px;

}


}

.calendar-day {

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    gap:5px;

}


.calendar-day small {

    font-size:11px;

    font-weight:bold;

}



.calendar-day.vacation {

    background:#43a047;
    color:white;

}



.calendar-day.sick {

    background:#1976d2;
    color:white;

}



.calendar-day.personal {

    background:#fb8c00;
    color:white;

}



.calendar-day.wellness {

    background:#8e24aa;
    color:white;

}


.btn-danger {

    width:100%;

    background:#d32f2f;

    color:white;

    border:none;

    padding:13px 20px;

    border-radius:12px;

    cursor:pointer;

    font-weight:bold;

    transition:0.3s;

}



.btn-danger:hover {

    background:#b71c1c;

    transform:translateY(-2px);

}