:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}#root{text-align:center;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:1126px;max-width:100%;min-height:100svh;margin:0 auto;display:flex}body{margin:0}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}*{box-sizing:border-box}:root{--bg:#f5f6f8;--surface:#fff;--surface-soft:#f8fafc;--surface-dark:#0b101a;--surface-dark-2:#121a27;--surface-dark-3:#1d2635;--text:#151922;--muted:#737b8c;--muted-light:#a3adbd;--border:#e6e9ef;--border-strong:#d2d8e3;--primary:#111827;--primary-soft:#202938;--success:#166534;--danger:#991b1b;--shadow:0 14px 34px #0f172a12;--shadow-soft:0 8px 22px #0f172a0b;--sidebar-width:270px}html,body,#root{width:100%;min-height:100%}body{background:var(--bg);color:var(--text);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Arial,Helvetica,sans-serif;font-size:13px;overflow-x:hidden}button,input,select,textarea{font-family:inherit;font-size:13px}button{transition:transform .18s,background .18s,border-color .18s,box-shadow .18s,opacity .18s}button:not(:disabled):hover{transform:translateY(-1px)}button:disabled{opacity:.6;cursor:not-allowed}input,select,textarea{border:1px solid var(--border);width:100%;min-height:39px;color:var(--text);background:#fff;border-radius:10px;outline:none;padding:9px 12px;transition:border-color .18s,box-shadow .18s,background .18s}input:focus,select:focus,textarea:focus{border-color:#aeb5c2;box-shadow:0 0 0 3px #1118270f}label{color:#4b5563;gap:6px;font-size:12px;font-weight:750;display:grid}form{gap:13px;display:grid}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInLeft{0%{transform:translate(-105%)}to{transform:translate(0)}}@keyframes loginFloat{0%{opacity:0;transform:translateY(18px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.login-page{background:radial-gradient(circle at 12% 12%,#ffffff29,#0000 24%),radial-gradient(circle at 88% 18%,#6366f129,#0000 28%),linear-gradient(135deg,#080d17 0%,#111827 45%,#eef2f7 45%,#f8fafc 100%);justify-content:center;align-items:center;min-height:100vh;padding:22px;display:flex}.login-card{background:#fffffff5;border:1px solid #ffffffbf;border-radius:26px;width:100%;max-width:410px;padding:30px;animation:.36s both loginFloat;position:relative;overflow:hidden;box-shadow:0 24px 60px #0206172e}.login-card:before{content:"◆";color:#fff;background:#111827;border-radius:16px;place-items:center;width:48px;height:48px;margin-bottom:18px;font-size:18px;display:grid;box-shadow:0 14px 26px #11182738}.login-card:after{content:"";background:#1118270e;border-radius:999px;width:130px;height:130px;position:absolute;top:-42px;right:-42px}.login-card h1{letter-spacing:-.06em;color:#111827;margin:0 0 7px;font-size:27px;font-weight:950;position:relative}.login-card p{color:var(--muted);margin:0 0 22px;font-size:13px;line-height:1.45;position:relative}.login-card button{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:13px;min-height:43px;margin-top:6px;padding:10px 14px;font-weight:900}.login-card button:hover{background:var(--primary-soft);box-shadow:0 14px 26px #11182729}.message{color:#374151;border:1px solid var(--border);box-shadow:var(--shadow-soft);background:#fff;border-radius:12px;margin:14px 0;padding:11px 13px;animation:.2s both fadeUp}.admin-layout{grid-template-columns:var(--sidebar-width) minmax(0, 1fr);background:var(--bg);width:100%;min-height:100vh;display:grid}.mobile-menu-button{z-index:70;color:#fff;cursor:pointer;background:#111827;border:none;border-radius:14px;width:42px;height:42px;font-size:21px;display:none;position:fixed;top:14px;left:14px;box-shadow:0 14px 28px #02061747}.mobile-menu-backdrop,.mobile-close-button{display:none}.sidebar{width:var(--sidebar-width);color:#fff;z-index:60;background:radial-gradient(circle at 20% 0,#ffffff14,#0000 24%),linear-gradient(#0c111b 0%,#080d16 100%);flex-direction:column;align-self:start;min-height:100vh;padding:22px 18px;display:flex;position:sticky;top:0;box-shadow:18px 0 42px #0f172a1c}.sidebar-top{justify-content:space-between;align-items:center;display:flex}.sidebar h2{color:#fff;letter-spacing:-.06em;text-shadow:0 1px 12px #ffffff1f;align-items:center;margin:0 0 28px;font-size:23px;font-weight:950;display:flex}.sidebar h2:before{content:"◆";color:#0c111b;background:#fff;border-radius:11px;place-items:center;width:31px;height:31px;margin-right:9px;font-size:13px;display:inline-grid;box-shadow:0 8px 20px #ffffff1f}.sidebar nav{gap:6px;display:grid}.menu-section-title{color:#697386;text-transform:uppercase;letter-spacing:.09em;margin:18px 4px 7px;font-size:10px;font-weight:950}.nav-item{text-align:left;color:#a0aabc;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:12px;width:100%;min-height:40px;padding:10px 35px 10px 14px;font-size:12.5px;font-weight:820;position:relative}.nav-item:hover{color:#fff;background:#fff1}.nav-item.active{color:#fff;background:linear-gradient(#2b3342,#1b2331);border-color:#ffffff1a;box-shadow:inset 0 1px #ffffff14,0 12px 22px #00000038}.nav-item.active:after{content:"›";font-size:19px;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.sidebar-user-card{background:#ffffff0b;border:1px solid #ffffff14;border-radius:16px;margin-top:auto;padding:14px}.sidebar-user-card span{color:#a0aabc;margin-bottom:6px;font-size:10px;font-weight:950;display:block}.sidebar-user-card strong{color:#fff;word-break:break-all;font-size:12px;display:block}.admin-content{background:var(--bg);flex-direction:column;width:100%;min-width:0;display:flex}.admin-header{border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:20;background:#fffffff0;justify-content:space-between;align-items:center;gap:18px;width:100%;min-height:68px;padding:16px clamp(20px,2vw,34px);display:flex;position:sticky;top:0}.admin-header h1{letter-spacing:-.05em;margin:0 0 3px;font-size:20px;font-weight:950}.admin-header p{color:var(--muted);margin:0;font-size:12px}.admin-user-box{align-items:center;gap:10px;display:flex}.admin-user-box span{background:var(--surface-soft);color:#3f4654;border:1px solid var(--border);white-space:nowrap;border-radius:999px;padding:7px 11px;font-size:10.5px;font-weight:900}.admin-user-box button{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:11px;padding:8px 12px;font-size:12px;font-weight:850}.admin-content>div,.page-body{width:100%;padding:clamp(18px,2vw,30px);animation:.22s both fadeUp}.page-header{justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;display:flex}.page-header h1{letter-spacing:-.06em;margin:0 0 5px;font-size:24px;font-weight:950}.page-header p{color:var(--muted);margin:0;font-size:12.5px}.dashboard-grid{grid-template-columns:repeat(5,minmax(150px,1fr));gap:14px;width:100%;margin-bottom:20px;display:grid}.dashboard-card,.panel,.employee-card{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-soft);border-radius:20px;animation:.2s both fadeUp}.dashboard-card{min-height:112px;padding:18px}.dashboard-card span{color:var(--muted);margin-bottom:13px;font-size:12px;font-weight:850;display:block}.dashboard-card strong{letter-spacing:-.07em;font-size:32px;line-height:1;display:block}.panel{padding:20px}.panel h2{letter-spacing:-.04em;margin:0 0 13px;font-size:17px;font-weight:950}.panel h3{margin:18px 0 10px;font-size:14px}.panel p{color:var(--muted);font-size:12.5px;line-height:1.45}.primary-button,.secondary-button,.danger-button,.employee-form button{cursor:pointer;white-space:nowrap;border-radius:11px;min-height:38px;padding:9px 12px;font-size:12px;font-weight:900}.primary-button,.employee-form button{background:var(--primary);color:#fff;border:none}.primary-button:hover,.employee-form button:hover{background:var(--primary-soft);box-shadow:0 10px 20px #1118271a}.secondary-button{border:1px solid var(--border);color:#394150;background:#fff}.secondary-button:hover{border-color:var(--border-strong);background:var(--surface-soft)}.danger-button{background:var(--danger);color:#fff;border:none}.small-approve-button,.small-danger-button{color:#fff;cursor:pointer;white-space:nowrap;border:none;border-radius:9px;min-height:31px;padding:7px 9px;font-size:11.5px;font-weight:900}.small-approve-button{background:var(--success)}.small-danger-button{background:var(--danger)}.action-buttons{align-items:center;gap:7px;display:flex}.content-grid{grid-template-columns:minmax(320px,400px) minmax(0,1fr);align-items:start;gap:18px;width:100%;display:grid}.employee-form{gap:12px;display:grid}.attendance-form{gap:15px;display:grid}.form-row{grid-template-columns:repeat(4,minmax(140px,1fr));gap:13px;display:grid}.attendance-filter-panel{flex-wrap:wrap;align-items:end;gap:13px;margin-bottom:18px;display:flex}.attendance-filter-panel label{min-width:160px}.work-entry-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.work-entry-header h2{margin:0}.work-entry-card{border:1px solid var(--border);background:var(--surface-soft);border-radius:16px;grid-template-columns:repeat(6,minmax(125px,1fr));align-items:end;gap:12px;padding:15px;display:grid}.table-wrap{border:1px solid var(--border);background:#fff;border-radius:16px;width:100%;overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:12px}th,td{text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;vertical-align:middle;padding:10px 11px}tr:last-child td{border-bottom:none}th{background:var(--surface-soft);color:#667085;text-transform:uppercase;letter-spacing:.04em;font-size:10.5px;font-weight:950}tbody tr:hover{background:#fafafa}.work-entry-details{background:var(--surface-soft);border:1px solid var(--border);border-radius:16px;padding:15px}.work-entry-details h3{margin-top:0}.employee-page{background:var(--bg);width:100%;min-height:100vh;padding:clamp(18px,2vw,28px)}.employee-card{width:100%;max-width:none;margin:0;padding:clamp(18px,2vw,26px)}.leave-panel{margin-top:24px}.report-list{gap:7px;margin-top:10px;display:grid}.report-list p{background:var(--surface-soft);border:1px solid var(--border);color:#4b5563;border-radius:11px;margin:0;padding:10px 12px;font-weight:750}.table-wrap::-webkit-scrollbar{width:9px;height:9px}body::-webkit-scrollbar{width:9px;height:9px}.sidebar::-webkit-scrollbar{width:9px;height:9px}.table-wrap::-webkit-scrollbar-track{background:#eef1f6}body::-webkit-scrollbar-track{background:#eef1f6}.sidebar::-webkit-scrollbar-track{background:#eef1f6}.table-wrap::-webkit-scrollbar-thumb{background:#c4cad5;border-radius:999px}body::-webkit-scrollbar-thumb{background:#c4cad5;border-radius:999px}.sidebar::-webkit-scrollbar-thumb{background:#c4cad5;border-radius:999px}@media (width<=1280px){.dashboard-grid{grid-template-columns:repeat(3,minmax(150px,1fr))}.content-grid{grid-template-columns:1fr}.work-entry-card{grid-template-columns:repeat(3,minmax(140px,1fr))}}@media (width<=900px){.admin-layout,.mobile-menu-button{display:block}.mobile-menu-backdrop{z-index:75;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#02061785;border:none;display:block;position:fixed;inset:0}.mobile-close-button{color:#fff;cursor:pointer;background:#ffffff17;border:none;border-radius:10px;place-items:center;width:34px;height:34px;font-size:22px;display:inline-grid}.sidebar{z-index:90;width:min(84vw,300px);height:100vh;min-height:100vh;transition:transform .24s;position:fixed;top:0;left:0;overflow-y:auto;transform:translate(-105%)}.sidebar.mobile-open{animation:.24s both slideInLeft;transform:translate(0)}.sidebar h2{margin-bottom:20px}.admin-header{min-height:68px;padding:15px 18px 15px 68px}.admin-user-box{gap:8px}.admin-content>div,.page-body{padding:18px}.dashboard-grid,.form-row,.work-entry-card{grid-template-columns:repeat(2,minmax(0,1fr))}.page-header{flex-direction:column;align-items:flex-start}.attendance-filter-panel{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.attendance-filter-panel label{min-width:0}}@media (width<=560px){body{font-size:12px}.login-page{background:radial-gradient(circle at 10% 10%,#ffffff24,#0000 24%),linear-gradient(#080d17 0%,#111827 40%,#f4f6fa 40%,#f8fafc 100%);padding:18px}.login-card{border-radius:22px;padding:23px}.admin-header{flex-direction:column;align-items:flex-start;padding-left:68px}.admin-user-box{justify-content:space-between;width:100%}.dashboard-grid,.form-row,.work-entry-card,.attendance-filter-panel{grid-template-columns:1fr}.content-grid{gap:15px}.panel,.employee-card,.dashboard-card{border-radius:17px}.page-header h1{font-size:22px}.dashboard-card strong{font-size:29px}.action-buttons{flex-direction:column;align-items:stretch}.primary-button,.secondary-button,.danger-button{width:100%}}.employee-attendance-layout{grid-template-columns:310px minmax(0,1fr);align-items:start;gap:18px;display:grid}.employee-calendar-panel{position:sticky;top:18px}.calendar-header strong{color:#111827;font-size:14px;font-weight:950}.calendar-day{border:1px solid var(--border);color:#111827;cursor:pointer;background:#fff;border-radius:11px;min-height:36px;font-size:12px;font-weight:850;position:relative}.shortcut-panel{justify-content:space-between;align-items:center;gap:16px;display:flex}.shortcut-panel p{margin:0}@media (width<=1100px){.employee-attendance-layout{grid-template-columns:1fr}.employee-calendar-panel{position:static}}@media (width<=560px){.shortcut-panel{flex-direction:column;align-items:stretch}.shortcut-buttons{grid-template-columns:1fr 1fr;display:grid}.calendar-day{border-radius:10px;min-height:34px}}.employee-page{background:var(--bg);width:100%;min-height:100vh;padding:clamp(12px,2vw,28px);overflow-x:hidden}.employee-card{width:100%;max-width:100%;margin:0;padding:clamp(14px,2vw,26px);overflow:hidden}.employee-card>.page-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;display:flex}.employee-card>.page-header h1{font-size:clamp(20px,3vw,28px)}.employee-card>.page-header p{font-size:12px}.employee-attendance-layout{grid-template-columns:minmax(260px,320px) minmax(0,1fr);align-items:start;gap:18px;width:100%;display:grid}.employee-attendance-layout>form{min-width:0}.employee-calendar-panel{width:100%;position:sticky;top:18px}.calendar-header{justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px;display:flex}.calendar-header strong{color:#111827;text-align:center;font-size:13px;font-weight:950}.calendar-header button{border:1px solid var(--border);color:#111827;cursor:pointer;background:#fff;border-radius:10px;width:31px;height:31px;font-size:18px;font-weight:900}.calendar-weekdays,.attendance-calendar{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;display:grid}.calendar-weekdays{margin-bottom:8px}.calendar-weekdays span{text-align:center;color:#7b8190;text-transform:uppercase;font-size:9px;font-weight:950}.calendar-empty{min-height:32px}.calendar-day{border:1px solid var(--border);color:#111827;cursor:pointer;background:#fff;border-radius:10px;width:100%;min-width:0;min-height:34px;padding:0;font-size:11px;font-weight:850;position:relative}.calendar-day:hover{background:var(--surface-soft);border-color:var(--border-strong)}.calendar-day.today{border-color:#111827}.calendar-day.selected{color:#fff;background:#111827;border-color:#111827}.calendar-day.submitted{color:#166534;background:#ecfdf5;border-color:#bbf7d0}.calendar-day.submitted.selected{color:#fff;background:#166534;border-color:#166534}.calendar-day b{color:#fff;background:#16a34a;border-radius:999px;place-items:center;width:13px;height:13px;font-size:8px;line-height:1;display:grid;position:absolute;top:3px;right:3px}.calendar-legend{color:#6b7280;flex-wrap:wrap;gap:9px;margin-top:13px;font-size:10.5px;font-weight:750;display:flex}.calendar-legend span{align-items:center;gap:6px;display:inline-flex}.legend-dot{border-radius:999px;width:8px;height:8px}.submitted-dot{background:#16a34a}.selected-dot{background:#111827}.shortcut-panel{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.shortcut-panel>div{flex:1;min-width:220px}.shortcut-panel h2{margin-bottom:5px}.shortcut-panel p{max-width:720px;margin:0}.shortcut-buttons{flex-wrap:wrap;gap:10px;display:flex}.inline-toggle{white-space:nowrap;cursor:pointer;color:#374151;align-items:center;gap:8px;display:inline-flex}.inline-toggle input{width:auto;min-height:auto}.employee-page .attendance-form{width:100%;min-width:0}.employee-page .form-row{grid-template-columns:repeat(4,minmax(130px,1fr));gap:13px;width:100%;display:grid}.employee-page .work-entry-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.employee-page .work-entry-header>div{flex:1;min-width:220px}.employee-page .work-entry-card{grid-template-columns:repeat(6,minmax(120px,1fr));align-items:end;gap:12px;width:100%;display:grid}.employee-page .table-wrap{-webkit-overflow-scrolling:touch;width:100%;max-width:100%;overflow-x:auto}.employee-page table{min-width:760px}@media (width<=1100px){.employee-attendance-layout{grid-template-columns:1fr}.employee-calendar-panel{position:static}.employee-page .form-row,.employee-page .work-entry-card{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=700px){.employee-page{padding:10px}.employee-card{border-radius:16px;padding:13px}.employee-card>.page-header{flex-direction:column;align-items:stretch}.employee-card>.page-header .secondary-button{width:100%}.employee-attendance-layout{gap:14px}.employee-calendar-panel{padding:14px}.calendar-header strong{font-size:12px}.calendar-weekdays,.attendance-calendar{gap:4px}.calendar-weekdays span{font-size:8px}.calendar-empty{min-height:29px}.calendar-day{border-radius:9px;min-height:31px;font-size:10px}.calendar-day b{width:11px;height:11px;font-size:7px}.shortcut-panel{flex-direction:column;align-items:stretch}.shortcut-buttons{grid-template-columns:1fr 1fr;display:grid}.shortcut-buttons button{width:100%}.employee-page .form-row{grid-template-columns:1fr}.employee-page .work-entry-header{flex-direction:column;align-items:stretch}.employee-page .work-entry-header h2{font-size:15px}.employee-page .work-entry-card{grid-template-columns:1fr}.inline-toggle{border:1px solid var(--border);background:var(--surface-soft);border-radius:12px;justify-content:space-between;width:100%;padding:10px 12px}.employee-page .primary-button,.employee-page .secondary-button,.employee-page .danger-button{width:100%}}@media (width<=390px){.employee-page{padding:8px}.employee-card{padding:10px}.employee-card>.page-header h1{font-size:19px}.calendar-header button{width:28px;height:28px}.calendar-day{min-height:28px;font-size:9.5px}.calendar-day b{top:2px;right:2px}.panel{padding:14px}input,select,textarea{min-height:37px;font-size:12px}}