*{box-sizing:border-box}body{margin:0;background:#f4f7fc;color:#172944;font-family:'DM Sans',sans-serif;min-height:100vh;display:flex;flex-direction:column}main{flex:1}.topbar{height:76px;background:#fff;border-bottom:1px solid #e7edf5;display:flex;align-items:center}.brand{display:flex;align-items:center;gap:10px;color:#112e55;font:800 19px 'Manrope';text-decoration:none;letter-spacing:-.5px}.brand:hover{color:#112e55}.brand small{display:block;font:700 8px 'DM Sans';letter-spacing:1.8px;color:#8291a7}.brand-symbol{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#1769e0,#24b7d3);display:grid;place-items:center;color:#fff;font-size:23px}.top-link{font-size:12px;color:#536681;text-decoration:none;font-weight:700}.footer{padding:20px 0;background:#102747;color:#a9bad0;font-size:11px}.page-wrap{padding:44px 0 65px}.eyebrow{font-size:10px;letter-spacing:2px;color:#1769e0;font-weight:800}.page-title{font:800 clamp(27px,4vw,38px) 'Manrope';letter-spacing:-1.3px;color:#132c50;margin:9px 0}.muted{color:#77879d;font-size:13px;line-height:1.7}.panel,.login-card,.form-card{background:#fff;border:1px solid #e7edf5;border-radius:17px;box-shadow:0 12px 35px rgba(24,55,95,.055)}.login-card{max-width:460px;margin:55px auto;padding:35px}.login-card h1{font:800 25px 'Manrope';margin:23px 0 7px}.form-label{font-size:11px;font-weight:700;color:#52647d}.form-control,.form-select{font-size:13px;padding:12px;border-radius:9px;border-color:#dce5f0}.form-control:focus,.form-select:focus{border-color:#80b4f0;box-shadow:0 0 0 .2rem rgba(23,105,224,.1)}.btn-main{background:#1769e0;color:white;border:0;border-radius:9px;padding:12px 18px;font-size:12px;font-weight:800}.btn-main:hover{background:#1054b8;color:#fff}.btn-soft{background:#edf4ff;color:#1769e0;border:0;border-radius:9px;padding:10px 14px;font-size:11px;font-weight:800}.btn-danger-soft{background:#fff0f0;color:#c43d49}.profile-head{padding:25px;display:flex;align-items:center;gap:17px}.avatar{width:76px;height:76px;border-radius:22px;background:linear-gradient(135deg,#dcecff,#bceaf5);display:grid;place-items:center;color:#1769e0;font:800 26px 'Manrope';overflow:hidden;flex-shrink:0}.avatar img{width:100%;height:100%;object-fit:cover}.profile-head h2{font:800 20px 'Manrope';margin:0 0 5px}.profile-head p{font-size:11px;color:#8291a6;margin:0}.stat{padding:20px;height:100%}.stat small{display:block;color:#8291a6;font-size:11px}.stat strong{display:block;font:800 27px 'Manrope';margin-top:8px}.stat-icon{float:right;width:38px;height:38px;border-radius:11px;background:#edf5ff;color:#1769e0;display:grid;place-items:center}.section-title{font:800 15px 'Manrope';margin:0 0 17px}.table{font-size:11px;vertical-align:middle}.table th{font-size:9px;letter-spacing:.7px;text-transform:uppercase;color:#8795a8;border-bottom-color:#e8eef5}.table td{color:#52647d}.pill{display:inline-block;border-radius:30px;padding:5px 9px;font-size:9px;font-weight:800;text-transform:capitalize}.pill-present,.pill-approved{background:#e6f8f0;color:#16895e}.pill-pending{background:#fff4df;color:#a96b08}.pill-rejected,.pill-absent{background:#ffeded;color:#c13e4a}.pill-contacted{background:#eaf3ff;color:#1769e0}.action-card{padding:23px}.time-display{font:800 30px 'Manrope';color:#173b69;letter-spacing:-1px}.time-note{font-size:11px;color:#8190a5}.leave-banner{background:linear-gradient(110deg,#102d56,#1769c9);border-radius:17px;padding:25px;color:#fff}.leave-banner h3{font:800 18px 'Manrope'}.leave-banner p{font-size:12px;color:#d0def0;margin:0}.admin-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}.admin-nav a{padding:9px 13px;border-radius:8px;background:#fff;border:1px solid #e6edf5;color:#5a6b83;text-decoration:none;font-size:11px;font-weight:700}.admin-nav a.active{background:#1769e0;color:#fff;border-color:#1769e0}.photo-small{width:36px;height:36px;border-radius:10px;object-fit:cover;background:#eaf2fc}.empty{padding:30px;text-align:center;color:#8291a5;font-size:12px}.alert{font-size:12px}.form-card{padding:28px}.day-badge{font-size:10px;color:#52647d;background:#f1f5fa;padding:6px 9px;border-radius:7px}
@media(max-width:767px){.page-wrap{padding:28px 0 45px}.login-card{margin:30px auto;padding:26px}.profile-head{align-items:flex-start;padding:19px}.avatar{width:62px;height:62px;border-radius:18px}.profile-head h2{font-size:17px}.time-display{font-size:25px}.form-card{padding:21px}.table{min-width:600px}.leave-banner{padding:21px}}

/* SVAPPS Phase 1 employee dashboard */
.employee-home{max-width:1240px}
.employee-welcome{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:30px 34px;border-radius:20px;background:linear-gradient(115deg,#102d56 0%,#155eb4 62%,#1b8fc0 100%);color:#fff;box-shadow:0 16px 38px rgba(20,72,130,.15)}
.employee-welcome:after{content:"";position:absolute;width:270px;height:270px;border:1px solid rgba(255,255,255,.12);border-radius:50%;right:90px;top:-145px;box-shadow:0 0 0 28px rgba(255,255,255,.035),0 0 0 58px rgba(255,255,255,.025)}
.employee-welcome-copy{position:relative;z-index:1}.employee-welcome .eyebrow{color:#a9d5ff}.employee-welcome h1{font:800 clamp(25px,3.4vw,34px) 'Manrope';letter-spacing:-1.2px;margin:8px 0}.employee-welcome p{font-size:13px;color:#d5e5f7;margin:0 0 17px}
.employee-schedule{display:flex;flex-wrap:wrap;gap:9px 18px}.employee-schedule span{font-size:10px;color:#e5f0fc}.employee-schedule i{margin-right:5px;color:#9fd5ff}.employee-schedule strong{color:#fff}
.employee-welcome-date{position:relative;z-index:1;flex:0 0 88px;width:88px;height:96px;border:1px solid rgba(255,255,255,.25);border-radius:16px;background:rgba(255,255,255,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#e6f2ff;font-size:11px;font-weight:700}.welcome-date-day{font:800 34px 'Manrope';line-height:1.1;color:#fff}.employee-welcome-date small{font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:#c6def5}
.employee-profile{padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:15px}.employee-profile-main{display:flex;align-items:center;gap:15px;min-width:0}.employee-avatar{width:62px;height:62px;border-radius:17px;font-size:23px}.employee-profile-text{min-width:0}.employee-profile-text .eyebrow{font-size:9px}.employee-profile-text h2{font:800 18px 'Manrope';margin:3px 0 4px;color:#153357}.employee-profile-text p{font-size:11px;color:#7e8da2;margin:0;overflow-wrap:anywhere}.employee-profile-text p span{padding:0 4px;color:#c0cad7}.employee-profile-status{white-space:nowrap;font-size:10px;font-weight:700;color:#19865d;background:#e9f8f1;border-radius:30px;padding:8px 11px}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#21ad76;margin-right:6px}
.employee-section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin:0 0 15px}.employee-section-heading h2{font:800 25px 'Manrope';letter-spacing:-.7px;color:#173456;margin:4px 0 0}.live-clock-chip{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid #e4ebf4;background:#fff;border-radius:10px;color:#1b4c82;font:800 12px 'Manrope'}.live-clock-chip i{color:#1d79cf}.live-clock-chip small{font:700 8px 'DM Sans';letter-spacing:1px;color:#8494a8}
.employee-stat-card{height:100%;padding:17px 18px;border:1px solid #e7edf5;border-radius:15px;background:#fff;box-shadow:0 8px 25px rgba(24,55,95,.04)}.employee-stat-top{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:12px}.employee-stat-icon{width:37px;height:37px;border-radius:11px;display:grid;place-items:center;font-size:14px}.stat-blue{background:#eaf2ff;color:#1769e0}.stat-cyan{background:#e6f8fb;color:#149bb4}.stat-green{background:#e8f8f0;color:#199466}.stat-amber{background:#fff5e5;color:#bf831b}.employee-stat-caption{font-size:9px;color:#8b99aa;text-align:right}.employee-stat-card>strong{display:block;font:800 27px 'Manrope';letter-spacing:-.8px;color:#18385f;line-height:1.15}.employee-stat-card>strong small{font:700 12px 'DM Sans';color:#8190a4}.employee-stat-label{display:block;margin-top:5px;font-size:10px;color:#7c8ca1}
.employee-attendance-card{padding:22px;border-radius:17px;background:#fff;border:1px solid #e5edf6;box-shadow:0 10px 28px rgba(24,55,95,.05)}.employee-card-heading,.employee-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.employee-card-heading h3,.employee-panel-heading h3{font:800 16px 'Manrope';color:#19385e;margin:4px 0 0}.today-icon{width:38px;height:38px;border-radius:12px;background:#edf5ff;color:#1769e0;display:grid;place-items:center}.attendance-state{display:flex;align-items:center;gap:11px;margin:20px 0 17px;padding:13px;border-radius:12px}.attendance-state>i{width:35px;height:35px;border-radius:10px;display:grid;place-items:center;font-size:15px;flex-shrink:0}.attendance-state strong,.attendance-state span{display:block}.attendance-state strong{font:800 12px 'Manrope';margin-bottom:3px}.attendance-state span{font-size:10px;line-height:1.5}.state-in{background:#eaf8f1;color:#16845a}.state-in>i{background:#d6f2e4}.state-done{background:#edf4ff;color:#1b65bb}.state-done>i{background:#dceaff}.state-off{background:#f2f5f9;color:#687a91}.state-off>i{background:#e5ebf2}.state-wait{background:#fff6e8;color:#a36a13}.state-wait>i{background:#ffedcc}
.today-time-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:13px 0;border-top:1px solid #edf1f6;border-bottom:1px solid #edf1f6}.today-time-grid>div{min-width:0}.today-time-grid span{display:block;font-size:8px;letter-spacing:.6px;color:#8b99aa;font-weight:800;margin-bottom:6px}.today-time-grid strong{font:800 13px 'Manrope';color:#24476f}.employee-checkout-btn{width:100%;display:flex;justify-content:center;align-items:center;gap:8px;padding:12px;background:#fff0f0;color:#bd3c4a}.employee-checkout-btn:hover{background:#ffe3e5;color:#a82e3b}.attendance-complete-note{margin-top:13px;color:#1b8a60;font-size:10px;font-weight:700}.attendance-complete-note i{margin-right:5px}.attendance-footnote{font-size:9px;line-height:1.6;color:#8b99aa;margin:14px 0 0}
.employee-panel{padding:21px;background:#fff;border:1px solid #e5edf6;border-radius:17px;box-shadow:0 10px 28px rgba(24,55,95,.045)}.employee-panel-heading{margin-bottom:14px}.month-picker-form input{width:142px;padding:7px 9px;border:1px solid #e1e9f2;border-radius:8px;color:#4c6079;font-size:10px;background:#fff}.calendar-month-navigation{display:flex;align-items:center;justify-content:space-between;margin:2px 0 12px}.calendar-month-navigation strong{font:800 11px 'Manrope';color:#3a5577}.calendar-month-navigation a,.calendar-nav-disabled{width:25px;height:25px;display:grid;place-items:center;border-radius:7px;background:#f1f6fc;color:#4775a9;text-decoration:none;font-size:9px}.calendar-nav-disabled{opacity:.35}.attendance-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.calendar-weekday{text-align:center;font-size:8px;font-weight:800;color:#8c9aad;padding:4px 0}.calendar-day{min-height:43px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid transparent}.calendar-day strong{font:800 10px 'Manrope'}.calendar-day small{font-size:7px;font-weight:700;line-height:1}.calendar-empty{min-height:43px}.calendar-present{background:#e7f7ef;color:#16845a;border-color:#d7f0e3}.calendar-leave{background:#eaf2ff;color:#1769c5;border-color:#dce9fc}.calendar-pending{background:#fff5e3;color:#a66c12;border-color:#ffebc7}.calendar-weekoff{background:#f3f5f8;color:#a0aaba}.calendar-neutral{background:#fafbfd;border-color:#eef2f6;color:#7d8ba0}.calendar-future{background:#fff;border:1px dashed #e3eaf2;color:#b0bac7}.calendar-today{outline:2px solid #1769e0;outline-offset:1px}.calendar-legend{display:flex;flex-wrap:wrap;gap:8px 13px;margin-top:13px}.calendar-legend span{display:flex;align-items:center;gap:5px;font-size:8px;color:#7e8da1}.legend-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.legend-present{background:#25a874}.legend-leave{background:#4387d8}.legend-pending{background:#e0a33d}.legend-weekoff{background:#aeb8c5}
.panel-period{font-size:9px;color:#8796a9;background:#f3f6fa;border-radius:7px;padding:6px 8px}.employee-table-wrap{overflow-x:auto}.employee-table{min-width:560px}.employee-table th{font-size:8px;letter-spacing:.6px}.employee-table td{font-size:10px;padding-top:11px;padding-bottom:11px}.employee-table td strong{font-weight:800;color:#425c7c}.table-in-progress{color:#c18422;font-size:9px;font-weight:700}.record-status{display:inline-block;padding:4px 7px;border-radius:30px;font-size:8px;font-weight:800}.record-complete{background:#e8f8f0;color:#16865b}.record-open{background:#fff5e4;color:#a87318}.employee-table-note{font-size:9px;color:#8a98aa;margin:12px 0 0}.employee-apply-btn{padding:8px 10px;font-size:9px;text-decoration:none;white-space:nowrap}.employee-apply-btn i{margin-right:4px}.employee-empty-state{padding:28px 10px;text-align:center}.employee-empty-state>span{display:grid;place-items:center;width:43px;height:43px;margin:0 auto 10px;border-radius:13px;background:#f0f5fb;color:#7891ad;font-size:17px}.employee-empty-state strong{display:block;color:#415b7b;font:800 12px 'Manrope'}.employee-empty-state p{font-size:10px;color:#8b99aa;margin:5px 0}.employee-empty-state a{font-size:10px;font-weight:800;color:#1769e0;text-decoration:none}
.recent-leave-list{display:flex;flex-direction:column}.recent-leave-item{display:flex;align-items:flex-start;gap:9px;padding:12px 0;border-bottom:1px solid #eef2f6}.recent-leave-icon{width:31px;height:31px;display:grid;place-items:center;flex-shrink:0;border-radius:9px;background:#f0f5fc;color:#6081a8;font-size:11px}.recent-leave-info{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}.recent-leave-info strong{font:800 10px 'Manrope';color:#405a7a}.recent-leave-info span,.recent-leave-info small{font-size:9px;color:#8492a5;line-height:1.5;overflow-wrap:anywhere}.recent-leave-info small{color:#55779d}.leave-status{font-size:8px;font-weight:800;border-radius:30px;padding:5px 7px;white-space:nowrap}.leave-pending{background:#fff5e2;color:#a36d15}.leave-approved{background:#e7f7ef;color:#16845a}.leave-rejected{background:#ffeded;color:#bd3d49}.employee-all-leaves{display:flex;justify-content:space-between;align-items:center;margin-top:13px;padding-top:11px;border-top:1px solid #eef2f6;color:#1769d3;text-decoration:none;font-size:9px;font-weight:800}.employee-all-leaves i{font-size:9px}
@media(max-width:767px){.employee-welcome{padding:23px 20px;border-radius:16px;align-items:flex-start}.employee-welcome-date{flex-basis:67px;width:67px;height:79px}.welcome-date-day{font-size:27px}.employee-welcome p{font-size:11px;max-width:440px}.employee-schedule{gap:7px 12px}.employee-schedule span{font-size:9px}.employee-profile{padding:15px;align-items:flex-start}.employee-profile-status{font-size:8px;padding:6px 8px}.employee-profile-text h2{font-size:15px}.employee-profile-text p{font-size:9px}.employee-section-heading h2{font-size:22px}.employee-stat-card{padding:13px}.employee-stat-card>strong{font-size:23px}.employee-stat-caption{font-size:8px}.employee-panel,.employee-attendance-card{padding:16px}.calendar-day{min-height:39px}.calendar-empty{min-height:39px}.calendar-day small{font-size:6px}}
@media(max-width:420px){.employee-welcome{padding:20px 16px}.employee-welcome-date{flex-basis:56px;width:56px;height:69px}.welcome-date-day{font-size:23px}.employee-schedule{display:grid;gap:6px}.employee-profile-main{gap:10px}.employee-avatar{width:49px;height:49px;border-radius:14px;font-size:19px}.employee-profile-status{font-size:0}.employee-profile-status .status-dot{margin:0}.today-time-grid strong{font-size:11px}.month-picker-form input{width:125px}}


/* Phase 2 - advanced attendance reporting */
.attendance-today-stat{padding:13px 15px;border:1px solid #e7edf5;background:#f9fbfe;border-radius:12px}
.attendance-today-stat small{display:block;color:#8492a5;font-size:10px;margin-bottom:5px}
.attendance-today-stat strong{font:800 23px 'Manrope';color:#193b64}
.attendance-filter-form .form-label{font-weight:700;color:#62748b}
.attendance-admin-table{min-width:920px}
.attendance-admin-table th{white-space:nowrap;font-size:10px;color:#71839a}
.attendance-admin-table td{font-size:11px;vertical-align:middle}
.attendance-labels{display:flex;flex-wrap:wrap;gap:4px;min-width:105px}
.attendance-tag{display:inline-flex;align-items:center;padding:4px 7px;border-radius:30px;font-size:8px;font-weight:800;white-space:nowrap}
.tag-present{background:#e8f7ef;color:#16845a}
.tag-late{background:#fff3df;color:#a76d11}
.tag-early{background:#fff0f0;color:#b23b48}
.tag-half{background:#f0eaff;color:#7050a7}
.attendance-edit-details summary{display:inline-block;cursor:pointer}
.attendance-edit-form{min-width:220px;padding:12px;border:1px solid #e6edf5;border-radius:10px;background:#fbfcfe}
.attendance-edit-form .form-label{font-size:9px;color:#71839a;margin-bottom:3px}
@media(max-width:767px){.attendance-today-stat{padding:10px}.attendance-today-stat small{font-size:9px}.attendance-today-stat strong{font-size:19px}}


/* Phase 3 - leave management */
.leave-admin-table{min-width:900px}
.leave-admin-table th{white-space:nowrap;font-size:10px;color:#71839a}
.leave-admin-table td{font-size:11px;vertical-align:middle}
.leave-reason-cell{min-width:150px;max-width:260px;white-space:normal;line-height:1.55}
.leave-review-form{min-width:210px;padding:12px;border:1px solid #e6edf5;border-radius:10px;background:#fbfcfe}
.leave-review-form textarea{resize:vertical}
@media(max-width:767px){.leave-admin-table{min-width:780px}}

/* Phase 4 - admin reports and analytics */
.report-chart-wrap{position:relative;height:290px;width:100%}
.report-leave-stat{padding:14px;border:1px solid #e7edf5;background:#f9fbfe;border-radius:11px}
.report-leave-stat small{display:block;color:#71839a;font-size:10px;margin-bottom:5px}
.report-leave-stat strong{font:800 22px 'Manrope';color:#193b64}
@media(max-width:767px){.report-chart-wrap{height:230px}.report-leave-stat{padding:10px}}

/* Manual employee attendance controls and profile photo */
.employee-avatar{overflow:hidden;flex:0 0 76px;width:76px;height:76px;border-radius:50%;background:#eaf2ff;color:#1769d2;display:grid;place-items:center;font-size:25px;font-weight:800}
.employee-avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.employee-avatar-fallback{width:100%;height:100%;place-items:center;font:800 25px 'Manrope';color:#1769d2;background:#eaf2ff}
.employee-checkin-btn{width:100%;display:flex;justify-content:center;align-items:center;gap:8px;padding:12px;background:#e8f8f0;color:#16845a;border:1px solid #cdeedd}
.employee-checkin-btn:hover{background:#d8f2e5;color:#106d49}

/* Sunday working attendance highlight */
.sunday-working-tag{display:inline-flex;align-items:center;padding:4px 8px;border-radius:5px;background:#ffe8e8;color:#c62828;font-size:10px;font-weight:900;letter-spacing:.35px}
.sunday-working-row{background:#fff7f7!important}
.sunday-working-row td{border-color:#f5d0d0!important}
.sunday-working-stat .employee-stat-label,.sunday-working-stat strong{color:#c62828}
.state-sunday-work{background:#fff0f0;color:#b4232d;border:1px solid #ffd1d1}





/* SVAPPS Header Logo */
.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.brand-logo {
    display: block;
    width: 145px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

@media (max-width: 576px) {
    .brand-logo {
        width: 175px;
    }
}

.login-card .brand-logo {
    width: 220px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}