:root{--bg:#08101d;--panel:#111b2d;--panel2:#17243a;--line:#263854;--text:#edf4ff;--muted:#8fa2bd;--orange:#ff7a00;--orange2:#ff9a25;--green:#2fd67e;--red:#ff5d69;--yellow:#ffbf4a;--blue:#4aa3ff;--purple:#a98bff;--shadow:0 18px 50px rgba(0,0,0,.22)}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 90% 0,#14233e 0,transparent 32%),var(--bg);color:var(--text);min-height:100vh}a{color:#ff9c3d;text-decoration:none}button,input,select,textarea{font:inherit}.app-shell{display:flex;min-height:100vh}.sidebar{width:255px;background:rgba(7,13,24,.96);border-right:1px solid var(--line);padding:24px 18px;position:fixed;inset:0 auto 0 0;z-index:20;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:10px;padding:0 6px 22px;border-bottom:1px solid var(--line);margin-bottom:18px}.brand img{width:145px;height:auto}.brand span{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);writing-mode:vertical-rl}.sidebar nav{display:grid;gap:7px}.sidebar nav a{color:#b9c8db;padding:12px 13px;border-radius:11px;display:flex;gap:11px;align-items:center;font-weight:600;font-size:14px}.sidebar nav a:hover,.sidebar nav a.active{background:linear-gradient(135deg,rgba(255,122,0,.18),rgba(255,154,37,.06));color:#fff}.sidebar nav a.active{box-shadow:inset 3px 0 var(--orange)}.sidebar-foot{margin-top:auto;border-top:1px solid var(--line);padding:18px 7px 0;display:grid;gap:5px}.sidebar-foot a{margin-top:8px}.small{font-size:12px;color:var(--muted)}.main{margin-left:255px;padding:24px 30px 50px;width:calc(100% - 255px)}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.topbar h1{font-size:25px;margin:0 0 4px}.sub{color:var(--muted);font-size:13px}.clock{text-align:right;display:grid;gap:3px}.clock span{font-size:12px;color:var(--muted)}.clock strong{font-size:18px;letter-spacing:.04em}.menu-btn{display:none}.alert{border-radius:12px;padding:13px 16px;margin:0 0 18px;border:1px solid}.alert.success{background:rgba(47,214,126,.1);border-color:rgba(47,214,126,.35);color:#a9f5cb}.alert.danger{background:rgba(255,93,105,.1);border-color:rgba(255,93,105,.35);color:#ffc1c6}.alert.warning{background:rgba(255,191,74,.1);border-color:rgba(255,191,74,.35)}
.hero-card{background:linear-gradient(120deg,#18253c,#121d31 58%,rgba(255,122,0,.18));border:1px solid var(--line);border-radius:20px;padding:28px 30px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden;position:relative}.hero-card:after{content:"";position:absolute;width:180px;height:180px;border:25px solid rgba(255,122,0,.06);border-radius:50%;right:-60px;top:-70px}.eyebrow{font-size:11px;color:var(--orange2);font-weight:800;letter-spacing:.16em}.hero-card h2{font-size:30px;margin:6px 0}.hero-card p{color:var(--muted);margin:0}.today-state{min-width:165px;border-radius:16px;padding:16px 18px;background:#0b1322;display:grid;gap:5px;position:relative;z-index:1}.today-state span{font-size:12px;color:var(--muted)}.today-state strong{font-size:18px}.today-state.success{border:1px solid rgba(47,214,126,.35)}.today-state.danger{border:1px solid rgba(255,93,105,.35)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:18px 0}.stats-grid.three{grid-template-columns:repeat(3,1fr)}.stat{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 20px;display:grid;gap:5px}.stat span{font-size:13px;color:var(--muted)}.stat strong{font-size:29px}.stat small{color:var(--muted)}.content-grid{display:grid;gap:18px;margin:18px 0}.content-grid.two{grid-template-columns:1fr 1fr}.panel{background:rgba(17,27,45,.95);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow);margin-bottom:18px}.panel.narrow{max-width:900px}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px}.panel-head h3{margin:0 0 4px;font-size:18px}.panel-head p{margin:0;color:var(--muted);font-size:13px}.btn{border:1px solid #344966;background:#17253a;color:#eef6ff;border-radius:10px;padding:10px 14px;cursor:pointer;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:6px}.btn:hover{filter:brightness(1.08)}.btn.primary{background:linear-gradient(135deg,var(--orange),var(--orange2));border-color:transparent;color:#131313}.btn.success{background:rgba(47,214,126,.15);border-color:rgba(47,214,126,.35);color:#baf7d5}.btn.danger{background:rgba(255,93,105,.14);border-color:rgba(255,93,105,.35);color:#ffc4c8}.btn.small{padding:7px 10px;font-size:12px}.btn.giant{width:100%;padding:18px;font-size:18px;margin-top:16px}.btn.full{width:100%}.empty{min-height:155px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:var(--muted);gap:5px}.empty strong{color:var(--text)}.attendance-mini{display:grid;grid-template-columns:1fr 1fr;gap:12px}.attendance-mini>div,.punch-times>div{background:#0c1525;border:1px solid var(--line);border-radius:13px;padding:14px;display:grid;gap:5px}.attendance-mini span,.punch-times span{font-size:12px;color:var(--muted)}.holiday-list{display:grid;gap:10px}.holiday-item{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;background:#0c1525;border:1px solid #20334e}.holiday-item>div:last-child{display:grid;gap:3px}.holiday-item span{color:var(--muted);font-size:12px}.date-box{width:48px;height:48px;border-radius:11px;background:rgba(255,122,0,.13);display:grid;place-items:center;line-height:1}.date-box strong{font-size:19px;color:#ffa24d}.date-box span{font-size:10px!important;color:#ffc38b!important}.live-pill{border:1px solid var(--line);background:#0b1424;border-radius:999px;padding:8px 12px;display:flex;gap:8px;align-items:center}.pulse{width:8px;height:8px;background:var(--green);border-radius:50%;box-shadow:0 0 0 5px rgba(47,214,126,.12)}.punch-status{padding:22px;border-radius:15px;border:1px solid var(--line);background:#0c1525;display:grid;gap:4px;margin-bottom:14px}.punch-status strong{font-size:28px}.punch-status.success{border-color:rgba(47,214,126,.45);background:rgba(47,214,126,.08)}.punch-status.danger{border-color:rgba(255,93,105,.5);background:rgba(255,93,105,.08)}.punch-status small{color:var(--muted)}.punch-times{display:grid;grid-template-columns:1fr 1fr;gap:12px}.geo-note{text-align:center;color:var(--muted);font-size:12px}.complete-box{text-align:center;padding:22px;border:1px solid rgba(47,214,126,.3);background:rgba(47,214,126,.08);border-radius:14px;margin-top:15px}.holiday-banner{padding:18px;background:rgba(169,139,255,.1);border:1px solid rgba(169,139,255,.35);border-radius:14px}.policy-list{display:grid;gap:0}.policy-list>div{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid #223551}.policy-list>div:last-child{border:0}.policy-list span{color:var(--muted)}
.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:760px}th,td{text-align:left;padding:13px 12px;border-bottom:1px solid #22334d;vertical-align:middle}th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#8fa2bd}td{font-size:13px}.block{display:block;color:var(--muted);margin-top:3px}.badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800;border:1px solid}.badge.success{background:rgba(47,214,126,.1);border-color:rgba(47,214,126,.35);color:#8bf0b8}.badge.danger{background:rgba(255,93,105,.1);border-color:rgba(255,93,105,.4);color:#ff9aa2}.badge.warning{background:rgba(255,191,74,.1);border-color:rgba(255,191,74,.35);color:#ffd27a}.badge.info{background:rgba(74,163,255,.1);border-color:rgba(74,163,255,.35);color:#9bc8ff}.badge.purple{background:rgba(169,139,255,.1);border-color:rgba(169,139,255,.35);color:#c7b6ff}.badge.neutral{background:#152237;border-color:#304461;color:#b9c8db}.success-text{color:var(--green)!important}.danger-text{color:var(--red)!important}.warning-text{color:var(--yellow)!important}.muted{color:var(--muted)!important}.center{text-align:center!important}.grow{flex:1}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-grid label,.filter-bar label{display:grid;gap:7px;color:#b6c6da;font-size:12px;font-weight:700}.span-2{grid-column:1/-1}.form-grid input,.form-grid select,.form-grid textarea,.inline-form input,.inline-form select,.filter-bar input,.filter-bar select,.search,.review-form input,.pop-form input{width:100%;background:#0a1424;border:1px solid #2a3e5c;color:#edf4ff;border-radius:10px;padding:11px 12px;outline:none}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.search:focus{border-color:#ff8a1d;box-shadow:0 0 0 3px rgba(255,122,0,.08)}fieldset{border:1px solid #2a3e5c;border-radius:12px;padding:14px}legend{color:var(--muted);font-size:12px}.check-row{display:flex;flex-wrap:wrap;gap:14px}.check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:6px!important}.inline-form{display:grid;grid-template-columns:170px 1fr 150px auto;gap:10px}.filter-bar{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.filter-bar label{min-width:140px;flex:1}.approval-list{display:grid;gap:12px}.approval-card{background:#0b1424;border:1px solid #263956;border-radius:13px;padding:14px}.approval-card p{margin:4px 0;color:var(--muted);font-size:12px}.approval-card .reason{color:#cdd9e8}.review-form{display:grid;grid-template-columns:1fr auto auto;gap:7px;margin-top:10px}.holiday-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.holiday-tile{display:flex;align-items:center;gap:13px;background:#0b1424;border:1px solid #263956;border-radius:14px;padding:14px}.holiday-tile.past{opacity:.5}.date-big{width:60px;min-width:60px;height:60px;border-radius:13px;background:rgba(255,122,0,.12);display:grid;place-items:center;align-content:center}.date-big strong{font-size:24px;color:#ff9f44;line-height:1}.date-big span{font-size:10px;letter-spacing:.14em;color:#ffc38a}.holiday-tile h4{margin:0 0 4px}.holiday-tile p{margin:0 0 6px;color:var(--muted);font-size:12px}.icon-btn{background:#172339;border:1px solid #324864;color:#c6d4e5;width:30px;height:30px;border-radius:9px;cursor:pointer}.details-summary{cursor:pointer;font-weight:800;color:#ff9a3e}.employee-form{margin-top:18px}.actions{display:flex;gap:7px;align-items:center}.reset-details{position:relative}.reset-details summary{list-style:none}.reset-details summary::-webkit-details-marker{display:none}.pop-form{position:absolute;right:0;top:35px;z-index:5;background:#101c30;border:1px solid #334b6c;padding:10px;border-radius:12px;display:flex;gap:7px;min-width:290px;box-shadow:var(--shadow)}.search{max-width:250px}.toast{position:fixed;right:22px;bottom:22px;z-index:99;padding:13px 16px;border-radius:12px;transform:translateY(20px);opacity:0;pointer-events:none;transition:.25s;max-width:360px;box-shadow:var(--shadow)}.toast.show{transform:none;opacity:1}.toast.good{background:#123623;border:1px solid #2b8e56;color:#bff7d6}.toast.bad{background:#3b171c;border:1px solid #a9414b;color:#ffd0d3}
.login-page{display:grid;place-items:center;padding:24px}.login-wrap{width:min(920px,96vw);display:grid;grid-template-columns:1.15fr .85fr;overflow:hidden;border-radius:24px;border:1px solid #243754;box-shadow:0 35px 90px rgba(0,0,0,.45);background:#101a2b}.login-brand{padding:55px;background:radial-gradient(circle at 20% 20%,rgba(255,122,0,.17),transparent 35%),#0a1322;display:flex;flex-direction:column;justify-content:center}.login-brand img{max-width:300px}.login-brand h1{font-size:35px;margin:30px 0 8px}.login-brand p{color:var(--muted)}.login-card{padding:50px 42px}.login-card h2{font-size:28px;margin:0 0 7px}.login-card>p{color:var(--muted);margin:0 0 25px}.login-card form{display:grid;gap:16px}.login-card label{display:grid;gap:7px;color:#c5d2e2;font-size:13px;font-weight:700}.login-card input{background:#0a1424;border:1px solid #2d4261;border-radius:11px;padding:13px;color:#fff}.login-help{margin-top:18px;color:var(--muted);font-size:12px;text-align:center}
@media(max-width:1050px){.stats-grid{grid-template-columns:repeat(2,1fr)}.content-grid.two{grid-template-columns:1fr}.holiday-grid{grid-template-columns:1fr}.inline-form{grid-template-columns:1fr 1fr}.inline-form .btn{grid-column:1/-1}.attendance-layout{grid-template-columns:1fr!important}}
@media(max-width:760px){.sidebar{transform:translateX(-105%);transition:.25s;box-shadow:var(--shadow)}.sidebar.open{transform:none}.main{margin-left:0;width:100%;padding:18px 14px 40px}.menu-btn{display:block;background:#111d31;border:1px solid #2c4262;color:#fff;border-radius:9px;padding:8px 10px}.topbar{gap:10px}.topbar>div:nth-child(2){flex:1}.clock span{display:none}.hero-card{padding:22px;align-items:flex-start;gap:18px;flex-direction:column}.today-state{width:100%}.stats-grid,.stats-grid.three{grid-template-columns:1fr 1fr}.panel{padding:16px}.form-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.filter-bar{display:grid;grid-template-columns:1fr 1fr}.login-wrap{grid-template-columns:1fr}.login-brand{padding:35px}.login-brand img{max-width:230px}.login-brand h1{font-size:27px}.login-card{padding:32px 26px}.inline-form{grid-template-columns:1fr}.inline-form .btn{grid-column:auto}.review-form{grid-template-columns:1fr 1fr}.review-form input{grid-column:1/-1}.holiday-grid{grid-template-columns:1fr}}
@media(max-width:480px){.stats-grid,.stats-grid.three{grid-template-columns:1fr}.filter-bar{grid-template-columns:1fr}.topbar h1{font-size:20px}.clock strong{font-size:14px}.attendance-mini,.punch-times{grid-template-columns:1fr}}

/* ===== TechSprite v1.2: reliable user-selectable Light / Dark theme ===== */
.theme-toggle{display:inline-flex;align-items:center;gap:7px;min-height:39px;padding:8px 11px;border-radius:11px;border:1px solid var(--line);background:#132036;color:var(--text);cursor:pointer;font-weight:800;font-size:12px;white-space:nowrap;transition:.2s ease}.theme-toggle:hover{transform:translateY(-1px);filter:brightness(1.08)}.theme-icon{font-size:16px;line-height:1}.topbar-actions{display:flex;align-items:center;gap:14px}.topbar-title{flex:1}.login-theme-toggle{position:fixed;right:22px;top:22px;z-index:20}

/* Location UI */
.geo-status{margin-top:11px;padding:11px 12px;border-radius:11px;border:1px solid var(--line);background:#0c1525;color:var(--muted);font-size:12px;line-height:1.45;text-align:center}.geo-status.working{border-color:rgba(74,163,255,.35);color:#a8d2ff;background:rgba(74,163,255,.08)}.geo-status.good{border-color:rgba(47,214,126,.35);color:#aaf0c9;background:rgba(47,214,126,.08)}.geo-status.bad{border-color:rgba(255,93,105,.4);color:#ffc4c8;background:rgba(255,93,105,.08)}
.saved-location-card{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:13px;background:#0c1525}.saved-location-card.compact{margin-top:9px}.location-pin{font-size:20px;line-height:1.2}.location-copy{display:grid;gap:5px;min-width:0}.location-copy>span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800}.location-copy>strong{font-size:13px;line-height:1.45;overflow-wrap:anywhere}.location-copy>a{font-size:12px;width:max-content;max-width:100%}.table-location{display:grid;gap:4px;min-width:220px;max-width:360px}.table-location span{font-size:12px;line-height:1.4;color:var(--text);white-space:normal}.table-location a{font-size:11px;font-weight:800}.dashboard-location{margin-top:12px;padding:12px 13px;border-radius:12px;border:1px solid var(--line);background:#0c1525;display:grid;gap:5px}.dashboard-location span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800}.dashboard-location strong{font-size:12px;line-height:1.45;overflow-wrap:anywhere}.dashboard-location a{font-size:11px;width:max-content}.location-help{margin-top:16px;padding:14px;border:1px dashed var(--line);border-radius:12px;background:rgba(74,163,255,.05)}.location-help strong{font-size:13px}.location-help p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.5}

html[data-theme="light"]{--bg:#f4f7fb;--panel:#ffffff;--panel2:#f7f9fc;--line:#d9e2ec;--text:#172033;--muted:#68778c;--orange:#f47a10;--orange2:#ff982f;--green:#169b59;--red:#d83e4c;--yellow:#b5790e;--blue:#277ed4;--purple:#7756d7;--shadow:0 14px 36px rgba(40,55,78,.09)}
html[data-theme="light"]{background:var(--bg)}
html[data-theme="light"] body{background:radial-gradient(circle at 90% 0,#fff1e4 0,transparent 30%),var(--bg);color:var(--text)}
html[data-theme="light"] a{color:#d86600}
html[data-theme="light"] .sidebar{background:rgba(255,255,255,.98);border-right-color:var(--line);box-shadow:4px 0 22px rgba(38,52,72,.05)}
html[data-theme="light"] .brand{border-bottom-color:var(--line)}
html[data-theme="light"] .sidebar nav a{color:#4c5d72}
html[data-theme="light"] .sidebar nav a:hover,html[data-theme="light"] .sidebar nav a.active{background:linear-gradient(135deg,rgba(244,122,16,.14),rgba(255,152,47,.05));color:#172033}
html[data-theme="light"] .sidebar-foot{border-top-color:var(--line)}
html[data-theme="light"] .hero-card{background:linear-gradient(120deg,#ffffff,#f8fafc 58%,rgba(244,122,16,.13));border-color:var(--line)}
html[data-theme="light"] .today-state,html[data-theme="light"] .attendance-mini>div,html[data-theme="light"] .punch-times>div,html[data-theme="light"] .holiday-item,html[data-theme="light"] .punch-status,html[data-theme="light"] .live-pill,html[data-theme="light"] .approval-card,html[data-theme="light"] .holiday-tile,html[data-theme="light"] .saved-location-card,html[data-theme="light"] .dashboard-location,html[data-theme="light"] .geo-status{background:#f8fafc;border-color:var(--line)}
html[data-theme="light"] .panel{background:rgba(255,255,255,.98);border-color:var(--line)}
html[data-theme="light"] .btn{background:#f4f7fb;border-color:#d2dce8;color:#263449}
html[data-theme="light"] .btn.primary{background:linear-gradient(135deg,var(--orange),var(--orange2));color:#fff;border-color:transparent}
html[data-theme="light"] .btn.success{background:#eaf8f0;border-color:#b8e4cb;color:#137544}
html[data-theme="light"] .btn.danger{background:#fff0f1;border-color:#f0c4c8;color:#bd3440}
html[data-theme="light"] .menu-btn,html[data-theme="light"] .theme-toggle,html[data-theme="light"] .icon-btn{background:#fff;border-color:#d3dde9;color:#233146}
html[data-theme="light"] .stat{background:#fff;border-color:var(--line)}
html[data-theme="light"] th,html[data-theme="light"] td{border-bottom-color:#e4eaf1}
html[data-theme="light"] th{color:#718096}
html[data-theme="light"] .badge.neutral{background:#eef2f7;border-color:#d5deea;color:#526176}
html[data-theme="light"] .form-grid label,html[data-theme="light"] .filter-bar label,html[data-theme="light"] .login-card label{color:#526176}
html[data-theme="light"] .form-grid input,html[data-theme="light"] .form-grid select,html[data-theme="light"] .form-grid textarea,html[data-theme="light"] .inline-form input,html[data-theme="light"] .inline-form select,html[data-theme="light"] .filter-bar input,html[data-theme="light"] .filter-bar select,html[data-theme="light"] .search,html[data-theme="light"] .review-form input,html[data-theme="light"] .pop-form input,html[data-theme="light"] .login-card input{background:#fff;border-color:#d3dde8;color:#1f2b3d}
html[data-theme="light"] fieldset{border-color:#d3dde8}
html[data-theme="light"] .pop-form{background:#fff;border-color:#d3dde8}
html[data-theme="light"] .holiday-tile{border-color:var(--line)}
html[data-theme="light"] .policy-list>div{border-bottom-color:#e5eaf0}
html[data-theme="light"] .toast.good{background:#e9f8ef;border-color:#a9ddbE;color:#12683c}
html[data-theme="light"] .toast.bad{background:#fff0f1;border-color:#efb4ba;color:#a92d38}
html[data-theme="light"] .login-wrap{background:#fff;border-color:#d8e1eb;box-shadow:0 28px 70px rgba(40,55,78,.14)}
html[data-theme="light"] .login-brand{background:radial-gradient(circle at 20% 20%,rgba(244,122,16,.15),transparent 35%),#f7f9fc}
html[data-theme="light"] .login-card{background:#fff}
html[data-theme="light"] .login-card input::placeholder{color:#9aa7b7}
html[data-theme="light"] .complete-box{background:#edf9f2;border-color:#b8e4cb;color:#165f3d}
html[data-theme="light"] .holiday-banner{background:#f3efff;border-color:#d7cdf8;color:#4e3d85}
html[data-theme="light"] .location-help{background:#f6faff}
html[data-theme="light"] .punch-status.success{background:#edf9f2;border-color:#b8e4cb}
html[data-theme="light"] .punch-status.danger{background:#fff1f2;border-color:#efc2c7}
html[data-theme="light"] .geo-status.working{background:#eef6ff;color:#2b65a2;border-color:#c6ddf4}
html[data-theme="light"] .geo-status.good{background:#edf9f2;color:#176b41;border-color:#b8e4cb}
html[data-theme="light"] .geo-status.bad{background:#fff1f2;color:#a92f3b;border-color:#efc2c7}

@media(max-width:760px){.topbar-actions{gap:8px}.theme-toggle{padding:8px 9px}.theme-label{display:none}.login-theme-toggle .theme-label{display:inline}.login-theme-toggle{right:14px;top:14px}.topbar-title{min-width:0}.clock{min-width:max-content}}

/* ===== TechSprite v1.3: Monthly attendance calendar + leave approval UX ===== */
.nav-badge{margin-left:auto;min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;background:var(--red);color:#fff;font-size:11px;line-height:1;box-shadow:0 0 0 3px rgba(255,93,105,.10)}

.attendance-calendar-panel{margin-top:18px}.calendar-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}.calendar-topbar h3{margin:0 0 5px}.calendar-topbar p{margin:0;color:var(--muted);font-size:13px}.calendar-filter{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.calendar-filter select,.calendar-filter input{background:#0c1525;border:1px solid var(--line);color:var(--text);padding:9px 10px;border-radius:10px;min-height:39px}.calendar-filter select{min-width:220px}
.calendar-summary{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:0 0 16px}.calendar-stat{border:1px solid var(--line);background:var(--panel2);border-radius:13px;padding:12px 13px;display:grid;gap:4px}.calendar-stat span{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800}.calendar-stat strong{font-size:22px}.calendar-stat.ontime{border-color:rgba(47,214,126,.30)}.calendar-stat.late{border-color:rgba(255,93,105,.34)}.calendar-stat.leave{border-color:rgba(74,163,255,.34)}.calendar-stat.weekoff{border-color:rgba(143,162,189,.30)}.calendar-stat.absent{border-style:dashed}
.calendar-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 12px}.calendar-nav>strong{font-size:15px}
.attendance-calendar-wrap{overflow-x:auto;padding-bottom:4px}.attendance-calendar{min-width:820px;display:grid;grid-template-columns:repeat(7,minmax(105px,1fr));gap:7px}.calendar-weekday{padding:8px 10px;text-align:center;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.calendar-weekday.weekend{color:#a9b7ca}.calendar-day{min-height:112px;border:1px solid var(--line);border-radius:13px;background:#0d1728;padding:10px;display:flex;flex-direction:column;gap:5px;position:relative;overflow:hidden}.calendar-day.blank{background:transparent;border-color:transparent;box-shadow:none}.calendar-day.is-today{box-shadow:inset 0 0 0 2px var(--orange)}.calendar-date{display:flex;align-items:center;justify-content:space-between;gap:8px}.calendar-date strong{font-size:17px}.calendar-date span{font-size:10px;color:var(--muted);text-transform:uppercase}.calendar-status{margin-top:auto;font-size:12px;font-weight:900;letter-spacing:.01em}.calendar-time{font-size:11px;font-weight:800}.calendar-detail{font-size:10px;line-height:1.25;color:var(--muted);white-space:normal;overflow-wrap:anywhere}
.calendar-day.present{background:linear-gradient(145deg,rgba(47,214,126,.18),rgba(47,214,126,.07));border-color:rgba(47,214,126,.42)}.calendar-day.present .calendar-status,.calendar-day.present .calendar-time{color:#77efad}.calendar-day.late{background:linear-gradient(145deg,rgba(255,93,105,.22),rgba(255,93,105,.08));border-color:rgba(255,93,105,.52)}.calendar-day.late .calendar-status,.calendar-day.late .calendar-time{color:#ff9da4}.calendar-day.leave{background:linear-gradient(145deg,rgba(74,163,255,.20),rgba(74,163,255,.07));border-color:rgba(74,163,255,.42)}.calendar-day.leave .calendar-status{color:#8fc3ff}.calendar-day.leave_pending{background:linear-gradient(145deg,rgba(255,191,74,.18),rgba(255,191,74,.06));border-color:rgba(255,191,74,.40)}.calendar-day.leave_pending .calendar-status{color:#ffd27d}.calendar-day.week_off{background:rgba(143,162,189,.08);border-color:rgba(143,162,189,.20)}.calendar-day.week_off .calendar-status{color:#b6c3d4}.calendar-day.holiday{background:linear-gradient(145deg,rgba(169,139,255,.18),rgba(169,139,255,.06));border-color:rgba(169,139,255,.38)}.calendar-day.holiday .calendar-status{color:#c9b6ff}.calendar-day.absent{background:rgba(143,162,189,.055);border-style:dashed}.calendar-day.absent .calendar-status{color:#a9b6c8}.calendar-day.today,.calendar-day.future{background:rgba(143,162,189,.035)}
.calendar-legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;color:var(--muted);font-size:11px}.calendar-legend span{display:inline-flex;align-items:center;gap:6px}.calendar-legend .dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--muted)}.calendar-legend .dot.present{background:var(--green)}.calendar-legend .dot.late{background:var(--red)}.calendar-legend .dot.leave{background:var(--blue)}.calendar-legend .dot.pending{background:var(--yellow)}.calendar-legend .dot.weekoff{background:var(--muted)}.calendar-legend .dot.holiday{background:var(--purple)}.calendar-legend .dot.absent{background:#65758b}

.leave-flow-banner{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:18px;border:1px solid rgba(74,163,255,.30);border-radius:14px;background:rgba(74,163,255,.07)}.leave-flow-icon{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:50%;background:rgba(47,214,126,.14);color:#7cedae;font-weight:900}.leave-flow-banner>div:last-child{display:grid;gap:3px}.leave-flow-banner strong{font-size:13px}.leave-flow-banner span{font-size:12px;color:var(--muted);line-height:1.4}.approval-count{min-width:34px;height:34px;border-radius:999px;display:grid;place-items:center;background:rgba(255,191,74,.14);border:1px solid rgba(255,191,74,.35);color:#ffd27d;font-weight:900}.approval-main{display:grid;gap:9px}.approval-person{display:grid;gap:3px}.approval-person>span{font-size:11px;color:var(--muted)}.approval-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.approval-meta>strong{font-size:12px}.approval-meta>span:not(.badge){font-size:11px;color:var(--muted)}
.approval-alert{display:flex;align-items:center;gap:13px;padding:14px 16px;margin:-4px 0 18px;border:1px solid rgba(255,191,74,.36);border-radius:14px;background:linear-gradient(100deg,rgba(255,191,74,.12),rgba(255,122,0,.06));color:var(--text)}.approval-alert:hover{border-color:rgba(255,191,74,.62);transform:translateY(-1px)}.approval-alert-icon{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:50%;background:rgba(255,191,74,.18);color:#ffd27d;font-weight:1000;font-size:20px}.approval-alert>div:nth-child(2){display:grid;gap:3px;flex:1}.approval-alert span{color:var(--muted);font-size:12px}.approval-alert>b{font-size:12px;color:var(--orange2);white-space:nowrap}

html[data-theme="light"] .calendar-filter select,html[data-theme="light"] .calendar-filter input{background:#fff;border-color:#d3dde8;color:#1f2b3d}html[data-theme="light"] .calendar-stat{background:#f8fafc}html[data-theme="light"] .calendar-day{background:#fff;border-color:#dde5ee}html[data-theme="light"] .calendar-day.present{background:#edf9f2;border-color:#a9ddbf}html[data-theme="light"] .calendar-day.present .calendar-status,html[data-theme="light"] .calendar-day.present .calendar-time{color:#147544}html[data-theme="light"] .calendar-day.late{background:#fff0f1;border-color:#edb7bd}html[data-theme="light"] .calendar-day.late .calendar-status,html[data-theme="light"] .calendar-day.late .calendar-time{color:#b92f3b}html[data-theme="light"] .calendar-day.leave{background:#eef6ff;border-color:#bed9f4}html[data-theme="light"] .calendar-day.leave .calendar-status{color:#276bb0}html[data-theme="light"] .calendar-day.leave_pending{background:#fff8e8;border-color:#ecd39c}html[data-theme="light"] .calendar-day.leave_pending .calendar-status{color:#9b680b}html[data-theme="light"] .calendar-day.week_off{background:#f4f6f9;border-color:#dde3eb}html[data-theme="light"] .calendar-day.week_off .calendar-status{color:#647386}html[data-theme="light"] .calendar-day.holiday{background:#f5f1ff;border-color:#d8cff4}html[data-theme="light"] .calendar-day.holiday .calendar-status{color:#6549bd}html[data-theme="light"] .calendar-day.absent{background:#fafbfc;border-color:#d7dfe8}html[data-theme="light"] .calendar-day.today,html[data-theme="light"] .calendar-day.future{background:#fbfcfd}html[data-theme="light"] .leave-flow-banner{background:#f2f8ff;border-color:#c5dcf3}html[data-theme="light"] .leave-flow-icon{background:#e8f7ee;color:#147544}html[data-theme="light"] .approval-alert{background:linear-gradient(100deg,#fff8e8,#fff4e8);border-color:#ead09b;color:#172033}html[data-theme="light"] .approval-alert-icon{background:#fff0c9;color:#9b680b}

@media(max-width:1100px){.calendar-summary{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.calendar-topbar{flex-direction:column}.calendar-filter{width:100%}.calendar-filter select,.calendar-filter input{flex:1;min-width:0}.calendar-summary{grid-template-columns:repeat(2,1fr)}.calendar-nav{align-items:stretch}.calendar-nav>strong{display:none}.calendar-nav .btn{flex:1;text-align:center}.approval-alert{align-items:flex-start}.approval-alert>b{display:none}}
@media(max-width:480px){.calendar-summary{grid-template-columns:1fr 1fr}.calendar-filter{display:grid;grid-template-columns:1fr}.attendance-calendar{min-width:760px}.calendar-day{min-height:102px}.leave-flow-banner{align-items:flex-start}}
.calendar-day.not_joined{background:rgba(143,162,189,.025);border-style:dotted;opacity:.72}.calendar-day.not_joined .calendar-status{color:var(--muted)}
html[data-theme="light"] .calendar-day.not_joined{background:#fbfcfd;border-color:#dce3eb}