: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)}}body{margin:0}#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}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%}:root{color:#173126;background:#f4f7f5;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}button,input{font:inherit}button{cursor:pointer}.auth-shell{grid-template-columns:minmax(320px,.9fr) minmax(440px,1.1fr);min-height:100vh;display:grid}.brand{color:#fff;background:linear-gradient(145deg,#063d2b,#126044);flex-direction:column;align-items:flex-start;padding:clamp(36px,7vw,96px);display:flex}.logo,.brand-mini{color:#073d2c;background:#c8ef69;border-radius:13px;place-items:center;width:48px;height:48px;font-weight:900;display:grid}.eyebrow{color:#8ba99a;letter-spacing:.12em;margin:18px 0 6px;font-size:.72rem;font-weight:800}.brand .eyebrow{color:#c8ef69}.brand h1{margin:0;font-size:1.3rem}.brand-copy{max-width:540px;margin-top:auto}.brand-copy h2{letter-spacing:-.06em;margin:0 0 18px;font-size:clamp(2.2rem,4vw,4rem);line-height:1.02}.brand-copy p{color:#d2e6dc;line-height:1.7}.brand>small{color:#b4d0c0;margin-top:50px}.auth{background:#fff;place-items:center;padding:36px;display:grid}.card{width:min(100%,450px)}.card h2{letter-spacing:-.04em;margin:30px 0 8px;font-size:2rem}.muted{color:#70857a;margin:0 0 26px}.tabs{border-bottom:1px solid #dce6df;gap:24px;display:flex}.tabs button{color:#72877b;background:0 0;border:0;border-bottom:2px solid #0000;padding:12px 0;font-weight:800}.tabs button.active{color:#087047;border-color:#087047}label{color:#314e40;gap:7px;margin:15px 0;font-size:.86rem;font-weight:750;display:grid}input{border:1px solid #cfddd5;border-radius:9px;outline:none;width:100%;padding:13px 14px}input:focus{border-color:#087047;box-shadow:0 0 0 3px #dff3e6}.primary{color:#fff;background:#087047;border:0;border-radius:9px;padding:12px 16px;font-weight:800}.primary:hover{background:#075c3b}.primary:disabled{opacity:.55;cursor:not-allowed}.card .primary{width:100%;margin-top:10px}.secondary{color:#456257;background:#fff;border:1px solid #d3e1d9;border-radius:8px;padding:9px 12px}.error{color:#9b2222;background:#fff1f1;border:1px solid #f1caca;border-radius:8px;padding:11px}.dashboard{background:#f4f7f5;grid-template-columns:240px 1fr;min-height:100vh;display:grid}.dashboard aside{color:#c6ddcf;background:#063d2b;flex-direction:column;padding:24px 16px;display:flex}.side-brand{color:#fff;align-items:center;gap:11px;padding:0 8px 32px;display:flex}.brand-mini{border-radius:9px;width:34px;height:34px;font-size:.8rem}nav{gap:4px;display:grid}nav b,nav span{border-radius:8px;padding:11px 12px;font-size:.92rem}nav b{color:#fff;background:#185e43}nav span{color:#bad2c4}.dashboard aside>small{color:#82a694;margin-top:auto;padding:16px 8px 4px}.workspace header{background:#fff;border-bottom:1px solid #dfe8e2;justify-content:space-between;align-items:center;padding:20px clamp(24px,4vw,54px);display:flex}.workspace header .eyebrow{margin:0 0 6px}.workspace header h1{letter-spacing:-.04em;margin:0;font-size:1.55rem}.content{max-width:1300px;padding:clamp(24px,4vw,54px)}.banner{background:linear-gradient(110deg,#e6f7d9,#f5fbed);border-radius:14px;padding:28px}.banner .eyebrow{color:#4b8066;margin:0 0 7px}.banner h2{letter-spacing:-.05em;margin:0 0 9px;font-size:clamp(1.6rem,2.5vw,2.35rem)}.banner p{color:#557064;margin:0}.metrics{grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0;display:grid}.metrics article,.table-card{background:#fff;border:1px solid #e0e9e3;border-radius:12px}.metrics article{padding:20px}.metrics small{color:#748a7e;display:block}.metrics strong{letter-spacing:-.05em;margin:9px 0 5px;font-size:2rem;display:block}.table-card{overflow:hidden}.table-heading{justify-content:space-between;align-items:center;padding:22px;display:flex}.table-heading h2{margin:0 0 4px}.table-heading p,.empty{color:#758a7f}.empty{padding:0 22px 26px}table{border-collapse:collapse;text-align:left;width:100%}th,td{border-top:1px solid #e7eee9;padding:15px 22px}th{color:#698075;letter-spacing:.08em;text-transform:uppercase;background:#f6f9f7;font-size:.72rem}td{text-transform:capitalize;font-size:.91rem}td small{margin-top:3px}td em{color:#18703f;background:#e2f5e7;border-radius:99px;padding:5px 9px;font-size:.76rem;font-style:normal;font-weight:800}@media (width<=820px){.auth-shell,.dashboard{grid-template-columns:1fr}.brand{min-height:auto}.brand-copy{margin-top:36px}.dashboard aside{display:none}.metrics{grid-template-columns:1fr}.table-card{overflow-x:auto}table{min-width:600px}}.modal-head,.modal-actions{justify-content:space-between;align-items:center;gap:16px;display:flex}.modal-head h2{margin:0}.modal-head .eyebrow{margin:0 0 6px}.employee-grid{grid-template-columns:repeat(2,1fr);gap:0 16px;margin-top:18px;display:grid}.employee-grid select{background:#fff;border:1px solid #cfddd5;border-radius:9px;width:100%;padding:13px 14px}@media (width<=620px){.employee-grid{grid-template-columns:1fr}.modal-head,.modal-actions{flex-direction:column;align-items:flex-start}.modal-actions,.modal-actions button{width:100%}}.modal-backdrop{z-index:20;background:#08181194;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.employee-modal{background:#fff;border-radius:18px;width:min(760px,100%);max-height:calc(100vh - 48px);padding:28px;overflow:auto;box-shadow:0 24px 70px #0000004d}.modal-heading,.modal-actions{justify-content:space-between;align-items:center;gap:16px;display:flex}.modal-heading h2{margin:4px 0 20px}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.form-grid label{color:#355247;gap:7px;font-size:.9rem;font-weight:650;display:grid}.form-grid input,.form-grid select{background:#fff;border:1px solid #cddbd3;border-radius:9px;width:100%;padding:11px 12px}.modal-actions{justify-content:flex-end;margin-top:24px}.secondary,.icon-button{color:#173126;background:#fff;border:1px solid #cddbd3}.secondary{border-radius:9px;padding:10px 16px}.icon-button{border-radius:50%;width:36px;height:36px;font-size:1.5rem;line-height:1}@media (width<=620px){.form-grid{grid-template-columns:1fr}}.attendance-card{margin-top:24px}.table-scroll{overflow-x:auto}.sidebar-attendance-action{text-align:center;width:100%;margin-top:16px}.sidebar-attendance-link{width:100%;color:inherit;text-align:left;cursor:pointer;font:inherit;background:0 0;border:0}@media (width<=700px){.attendance-page-header{flex-direction:column}}.attendance-page{background:#f4f7f5;min-height:100vh;padding:clamp(24px,5vw,64px)}.attendance-page-header{justify-content:space-between;align-items:flex-start;gap:24px;max-width:1180px;margin:0 auto 28px;display:flex}.attendance-page-header h1{color:#173126;margin:4px 0 8px}.attendance-page-actions{color:#355247;align-items:center;gap:14px;display:flex}.attendance-page>.table-card{max-width:1180px;margin:0 auto}@media (width<=700px){.attendance-page-header{flex-direction:column}}.dashboard aside nav .attendance-menu-button,.dashboard aside nav .employee-menu-button{text-align:center;width:100%;margin-top:14px;display:block}.home-hidden,.employees-page .banner,.employees-page .metrics{display:none}.employees-page .employee-directory-card{margin-top:28px}.dashboard-back-button{margin-right:10px}.dashboard aside nav .department-menu-button,.dashboard aside nav .leave-menu-button{text-align:center;width:100%;margin-top:14px;display:block}.leave-types-card{margin-bottom:24px}td em.status-pending{color:#8a6d1a;background:#fdf2d0}td em.status-approved{color:#18703f;background:#e2f5e7}td em.status-rejected{color:#9b2222;background:#fde3e3}td em.status-cancelled{color:#5b6b63;background:#eef2ef}.row-actions{gap:8px;display:flex}.row-actions button{border-radius:6px;padding:6px 10px;font-size:.78rem}.leave-balances-card{margin-bottom:24px}.dashboard aside nav .overtime-menu-button{text-align:center;width:100%;margin-top:14px;display:block}.dashboard aside nav .piece-rate-tasks-menu-button,.dashboard aside nav .piece-rate-entries-menu-button{text-align:center;background:#0a5a3f;width:100%;margin-top:6px;display:block}.dashboard aside nav .piece-rate-tasks-menu-button:hover,.dashboard aside nav .piece-rate-entries-menu-button:hover{background:#075c3b}.dashboard aside nav .piece-rate-tasks-menu-button,.dashboard aside nav .piece-rate-entries-menu-button{margin-top:4px}.btn-small{border-radius:4px;padding:4px 10px;font-size:11px}.attendance-table td .btn-small{white-space:nowrap}.attendance-cell.overtime{color:#e65100;background:linear-gradient(45deg,#fff3e0 0%,#ffe0b2 100%);position:relative}.overtime-badge{color:#fff;background:#e65100;border-radius:10px;padding:1px 5px;font-size:7px;font-weight:700;position:absolute;top:-6px;right:-6px}.legend-color.overtime{background:linear-gradient(45deg,#fff3e0 0%,#ffe0b2 100%)}.shift-menu-button{text-align:center;width:100%;margin-top:14px;display:block}.form-grid .clock-summary{background:#f6f9f7;border-radius:8px;grid-column:1/-1;padding:12px}.clock-summary .label{color:#64748b;margin-bottom:4px;font-size:12px;display:block}.clock-summary .value{font-size:16px;font-weight:600}.clock-summary .overtime-warning{color:#dc3545;margin-left:8px;font-size:13px}.help-text{color:#94a3b8;margin-top:4px;font-size:11px}.attendance-table-wrapper{background:#fff;border:1px solid #e8edf2;border-radius:16px;overflow:auto;box-shadow:0 1px 3px #00000014}.attendance-table.professional{border-collapse:collapse;width:100%;min-width:900px;font-size:13px}.attendance-table.professional thead th{color:#1e293b;text-transform:uppercase;letter-spacing:.4px;text-align:center;z-index:20;background:linear-gradient(#f8fafc 0%,#eef2f6 100%);border-bottom:2px solid #e2e8f0;padding:14px 10px;font-size:11px;font-weight:600;position:sticky;top:0}.attendance-table.professional thead th.sunday-header{color:#6a1b9a;background:linear-gradient(#f3e5f5 0%,#e8d5ea 100%)}.attendance-table.professional .day-header{flex-direction:column;align-items:center;gap:2px;display:flex}.attendance-table.professional .day-name{text-transform:uppercase;color:#64748b;font-size:10px;font-weight:600}.attendance-table.professional .day-number{color:#1e293b;font-size:16px;font-weight:700}.attendance-table.professional .sunday-header .day-number{color:#6a1b9a}.attendance-table.professional tbody tr{transition:background .15s}.attendance-table.professional tbody tr:hover{background:#f8fafc}.attendance-table.professional tbody td{text-align:center;vertical-align:middle;border-bottom:1px solid #f1f4f8;padding:10px 8px}.attendance-table.professional .row-number{color:#94a3b8;font-size:12px;font-weight:600}.attendance-table.professional .employee-name{text-align:left;min-width:160px;padding:10px 12px}.attendance-table.professional .employee-name strong{color:#0f172a;font-size:14px;display:block}.attendance-table.professional .employee-name small{color:#64748b;font-size:11px}.attendance-table.professional .shift-cell{min-width:60px}.shift-badge{color:#475569;background:#e8edf2;border-radius:12px;padding:3px 10px;font-size:11px;font-weight:600;display:inline-block}.attendance-cell{cursor:pointer;border-radius:6px;min-width:40px;height:42px;transition:all .2s;position:relative}.attendance-cell:hover{z-index:5;transform:scale(1.08);box-shadow:0 4px 12px #00000026}.attendance-cell .status-icon{font-size:16px;line-height:42px;display:block}.attendance-cell .shift-indicator{font-size:9px;position:absolute;top:2px;right:4px}.attendance-cell.present{color:#065f46;background:#ecfdf5}.attendance-cell.present:hover{background:#d1fae5}.attendance-cell.absent{color:#991b1b;background:#fef2f2}.attendance-cell.absent:hover{background:#fee2e2}.attendance-cell.late{color:#92400e;background:#fffbeb}.attendance-cell.late:hover{background:#fef3c7}.attendance-cell.half-day{color:#6b4c3b;background:#f5f0eb}.attendance-cell.half-day:hover{background:#ede8e3}.attendance-cell.on-leave{color:#1e40af;background:#eff6ff}.attendance-cell.on-leave:hover{background:#dbeafe}.attendance-cell.sunday{color:#6a1b9a;opacity:.7;cursor:not-allowed;background:#f5f0f8}.attendance-cell.sunday:hover{box-shadow:none;transform:none}.attendance-cell.night-shift-cell{color:#a8d8ea!important;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%)!important}.attendance-cell.night-shift-cell.present{color:#a8d8ea!important;background:linear-gradient(135deg,#0f2b3d 0%,#1a3a4a 50%,#2a4a5a 100%)!important}.attendance-cell.night-shift-cell .status-icon{color:#a8d8ea}.attendance-cell.night-shift-cell .shift-indicator{color:#fbbf24}.attendance-cell.day-shift-cell{background:linear-gradient(135deg,#fef9f2 0%,#fef3e8 50%,#fde8d8 100%)!important}.attendance-cell.overtime{position:relative;border:2px solid #f59e0b!important}.attendance-cell.overtime:after{content:"";opacity:.15;z-index:-1;background:linear-gradient(135deg,#f59e0b,#f97316);border-radius:6px;position:absolute;inset:-2px}.weekend-badge{color:#fff;background:#6a1b9a;border-radius:10px;padding:1px 5px;font-size:7px;font-weight:700;position:absolute;top:-4px;right:-4px}.overtime-badge{color:#fff;background:#f59e0b;border-radius:10px;padding:1px 5px;font-size:7px;font-weight:700;animation:2s infinite pulse-badge;position:absolute;bottom:-4px;right:-4px}@keyframes pulse-badge{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.summary{min-width:40px;font-size:14px;font-weight:700}.summary.present{color:#065f46}.summary.absent{color:#991b1b}.summary.overtime{color:#e65100}.summary.night-overtime{color:#6a1b9a}.percentage{font-size:13px;font-weight:600}.percentage-high{color:#065f46}.percentage-medium{color:#92400e}.percentage-low{color:#991b1b}.totals-row{background:linear-gradient(#f1f5f9 0%,#e2e8f0 100%);border-top:2px solid #cbd5e1;font-weight:700}.totals-row td{text-align:center;padding:12px 8px;font-size:13px}.totals-row .day-total{font-size:12px}.totals-row .present-count{color:#065f46}.totals-row .total-sep{color:#94a3b8;margin:0 2px}.totals-row .total-count{color:#475569}.total-summary{font-size:14px;font-weight:700}.total-summary.present{color:#065f46}.total-summary.absent{color:#991b1b}.total-summary.overtime{color:#e65100}.total-summary.night-overtime{color:#6a1b9a}.legend-color.present{background:#ecfdf5}.legend-color.absent{background:#fef2f2}.legend-color.late{background:#fffbeb}.legend-color.half-day{background:#f5f0eb}.legend-color.on-leave{background:#eff6ff}.legend-color.overtime{background:linear-gradient(45deg,#fff3e0 0%,#ffe0b2 100%);border-color:#f59e0b}.legend-color.night-shift{background:linear-gradient(135deg,#1a1a2e 0%,#0f3460 100%)}.legend-color.day-shift{background:linear-gradient(135deg,#fef9f2 0%,#fde8d8 100%)}.legend-color.sunday{background:#f5f0f8}@media (width<=768px){.attendance-table.professional{min-width:700px;font-size:11px}.attendance-cell{min-width:30px;height:32px}.attendance-cell .status-icon{font-size:13px;line-height:32px}.attendance-table.professional .employee-name{min-width:100px}}.view-toggle-container{justify-content:center;width:100%;padding:4px 0;display:flex}.view-toggle{background:#eef2f6;border-radius:50px;gap:2px;min-width:200px;padding:4px;display:inline-flex;position:relative;box-shadow:inset 0 2px 4px #0000000f}.toggle-btn{color:#64748b;cursor:pointer;z-index:2;background:0 0;border:none;border-radius:50px;justify-content:center;align-items:center;gap:8px;min-width:100px;padding:10px 28px;font-size:14px;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative}.toggle-btn .toggle-icon{font-size:16px;transition:transform .3s}.toggle-btn .toggle-label{transition:all .3s}.toggle-btn:hover{color:#1e293b}.toggle-btn:hover .toggle-icon{transform:scale(1.15)}.toggle-btn.active{color:#fff;background:0 0}.toggle-btn.active .toggle-icon{transform:scale(1.1)}.toggle-slider{z-index:1;background:linear-gradient(135deg,#0b3d91 0%,#1a5bbf 100%);border-radius:50px;width:calc(50% - 4px);height:calc(100% - 8px);transition:transform .4s cubic-bezier(.4,0,.2,1);position:absolute;top:4px;left:4px;box-shadow:0 4px 12px #0b3d914d}.view-toggle .toggle-btn:first-child.active~.toggle-slider{transform:translate(0)}.view-toggle .toggle-btn:last-child.active~.toggle-slider{transform:translate(calc(100% + 4px))}.view-toggle:hover .toggle-slider{box-shadow:0 4px 20px #0b3d9166}.toggle-btn.active .toggle-label{animation:2s ease-in-out infinite togglePulse}@keyframes togglePulse{0%,to{opacity:1}50%{opacity:.85}}@media (width<=768px){.view-toggle{min-width:160px}.toggle-btn{min-width:70px;padding:8px 16px;font-size:12px}.toggle-btn .toggle-icon{font-size:14px}}@media (width<=480px){.toggle-btn .toggle-label{font-size:11px}.toggle-btn{min-width:60px;padding:6px 12px}.toggle-btn .toggle-icon{font-size:12px}}@media (width<=1024px){.control-group{gap:16px}.control-item{min-width:150px}.view-toggle-item{min-width:200px}}@media (width<=768px){.attendance-controls{padding:16px}.control-group{flex-direction:column;align-items:stretch;gap:12px}.control-item{min-width:100%;max-width:100%}.view-toggle-item{min-width:100%}.filter-select-wrapper select{padding:8px 32px 8px 12px;font-size:13px}}@media (width<=480px){.attendance-controls{padding:12px}.control-item label{font-size:11px}.filter-select-wrapper select{padding:7px 28px 7px 10px;font-size:12px}}.attendance-controls{background:#fff;border:1px solid #e8edf2;border-radius:16px;margin-bottom:20px;padding:20px 24px;box-shadow:0 1px 3px #00000014}.control-group{flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:20px;display:flex}.control-item{flex:1;min-width:180px;max-width:320px}.control-item label{color:#475569;text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px;font-size:12px;font-weight:700;display:block}.view-toggle-item{text-align:center;flex:0 auto;min-width:240px;max-width:340px}.view-toggle-item label{text-align:center}.filter-item{flex:1;min-width:160px;max-width:260px}.filter-select-wrapper{width:100%;position:relative}.filter-select-wrapper select{color:#1e293b;appearance:none;cursor:pointer;background:#f8fafc;border:2px solid #e2e8f0;border-radius:12px;width:100%;padding:10px 36px 10px 14px;font-size:14px;font-weight:500;transition:all .3s}.filter-select-wrapper select:hover{background:#f1f5f9;border-color:#94a3b8}.filter-select-wrapper select:focus{background:#fff;border-color:#0b3d91;outline:none;box-shadow:0 0 0 4px #0b3d911a}.filter-select-wrapper .select-arrow{color:#94a3b8;pointer-events:none;font-size:12px;transition:transform .3s;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.filter-select-wrapper:hover .select-arrow{color:#475569}.filter-select-wrapper select:focus+.select-arrow{color:#0b3d91;transform:translateY(-50%)rotate(180deg)}@media (width<=1024px){.control-group{gap:16px}.control-item{min-width:150px}.view-toggle-item{min-width:200px}}@media (width<=768px){.attendance-controls{padding:16px}.control-group{flex-direction:column;align-items:stretch;gap:12px}.control-item{min-width:100%;max-width:100%}.view-toggle-item{min-width:100%}.filter-select-wrapper select{padding:8px 32px 8px 12px;font-size:13px}}@media (width<=480px){.attendance-controls{padding:12px}.control-item label{font-size:11px}.filter-select-wrapper select{padding:7px 28px 7px 10px;font-size:12px}}.overtime-page .header-actions{align-items:center;gap:12px;display:flex}.save-status{text-align:center;border-radius:6px;min-width:100px;padding:4px 12px;font-size:13px;font-weight:600}.save-status.success{color:#16a34a;background:#dcfce7}.save-status.error{color:#dc2626;background:#fee2e2}.stats-bar{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-bottom:20px;display:grid}.stat-box{text-align:center;background:#fff;border:1px solid #e8edf2;border-left:4px solid #0b3d91;border-radius:12px;padding:14px 20px;box-shadow:0 1px 3px #00000014}.stat-box .stat-label{text-transform:uppercase;color:#64748b;letter-spacing:.5px;font-size:11px}.stat-box .stat-value{color:#0b3d91;margin-top:4px;font-size:22px;font-weight:700}.overtime-table-wrapper{background:#fff;border:1px solid #e8edf2;border-radius:16px;overflow:auto;box-shadow:0 1px 3px #00000014}.overtime-table{border-collapse:collapse;width:100%;min-width:900px;font-size:13px}.overtime-table thead th{color:#1e293b;text-transform:uppercase;letter-spacing:.4px;text-align:center;z-index:20;background:linear-gradient(#f1f5f9 0%,#e2e8f0 100%);border:1px solid #e2e8f0;padding:10px 6px;font-size:11px;font-weight:600;position:sticky;top:0}.overtime-table .sticky-serial,.overtime-table .sticky-name,.overtime-table .sticky-id,.overtime-table .sticky-position{z-index:10;background:#fff;position:sticky}.overtime-table .sticky-serial{width:40px;min-width:40px;left:0;box-shadow:2px 0 5px -2px #0000001a}.overtime-table .sticky-name{text-align:left;width:160px;min-width:160px;left:40px;box-shadow:2px 0 5px -2px #0000000d}.overtime-table .sticky-id{width:80px;min-width:80px;left:200px}.overtime-table .sticky-position{border-right:3px solid #cbd5e1;width:120px;min-width:120px;left:280px;box-shadow:4px 0 8px -4px #0000001a}.overtime-table .day-group{color:#0b3d91;background:linear-gradient(#e8edf2 0%,#d5dce4 100%);min-width:80px;font-weight:700}.overtime-table .day-group.first-day{border-left:8px solid #f8fafc}.overtime-table .day-group.day-separator{border-left:3px solid #0b3d91}.overtime-table .day-group.sunday-header{color:#6a1b9a;background:linear-gradient(#f3e5f5 0%,#e8d5ea 100%)}.overtime-table .sunday-badge{color:#fff;background:#6a1b9a;border-radius:10px;margin-left:4px;padding:1px 6px;font-size:8px;display:inline-block}.overtime-table .ot-header{background:#f8fafc;width:35px;min-width:35px;padding:6px 2px;font-size:10px;font-weight:600}.overtime-table .ot-header.D{color:#2e7d32;background:#e8f5e9}.overtime-table .ot-header.N{color:#e65100;background:#fff3e0}.overtime-table .ot-header.S{color:#0d47a1;background:#e3f2fd}.overtime-table .ot-header.H{color:#c62828;background:#fce4ec}.overtime-table .ot-header.first-day{border-left:8px solid #f8fafc}.overtime-table .monthly-summary{color:#065f46;background:#ecfdf5;border-left:2px solid #10b981;min-width:50px}.overtime-table .monthly-summary.total{color:#fff;background:#0f766e;min-width:60px}.overtime-table tbody td{text-align:center;vertical-align:middle;border:1px solid #e2e8f0;padding:4px 2px}.overtime-table .employee-row:hover{background:#f8fafc}.overtime-table .employee-name-cell{text-align:left;padding:8px 10px}.overtime-table .employee-name-cell strong{color:#0f172a;font-size:13px;display:block}.overtime-table .employee-name-cell small{color:#64748b;font-size:11px}.overtime-table .position-cell{text-align:left;color:#475569;font-size:12px}.overtime-table .row-number{color:#94a3b8;font-weight:600}.ot-cell{padding:2px!important}.ot-cell.first-day{border-left:8px solid #f8fafc!important}.ot-cell.day-separator{border-left:3px solid #0b3d91!important}.ot-cell.sunday-cell{opacity:.7;background:#f5f0f8!important}.ot-input{text-align:center;background:#fff;border:1px solid #e2e8f0;border-radius:4px;width:100%;max-width:42px;padding:4px 2px;font-size:12px;font-weight:600;transition:all .2s}.ot-input:focus{background:#f8fafc;border-color:#0b3d91;outline:none;box-shadow:0 0 0 3px #0b3d911a}.ot-input.D{border-left:3px solid #4caf50}.ot-input.N{border-left:3px solid #ff9800}.ot-input.S{border-left:3px solid #2196f3}.ot-input.H{border-left:3px solid #f44336}.ot-input:disabled{cursor:not-allowed;opacity:.6;background:#f5f0f8}.ot-input:hover:not(:disabled){background:#f8fafc}.summary-cell{font-size:13px;font-weight:700;padding:8px 4px!important}.summary-cell.D{color:#2e7d32}.summary-cell.N{color:#e65100}.summary-cell.S{color:#0d47a1}.summary-cell.H{color:#c62828}.summary-cell.total{color:#0f766e;font-size:14px}.grand-total-row td{background:linear-gradient(90deg,#fef3c7 0%,#fde68a 100%);border-top:2px solid #f59e0b;font-weight:700;padding:10px 4px!important}.grand-total-label{text-align:right;color:#1e293b;font-size:14px}.grand-total-cell{color:#1e293b;font-size:12px}.grand-total-cell.first-day{border-left:8px solid #f8fafc!important}.grand-total-cell.day-separator{border-left:3px solid #0b3d91!important}.grand-total-cell.sunday-cell{background:#f5f0f8!important}.grand-total-summary{font-size:14px;font-weight:700;padding:8px 4px!important}.grand-total-summary.D{color:#2e7d32}.grand-total-summary.N{color:#e65100}.grand-total-summary.S{color:#0d47a1}.grand-total-summary.H{color:#c62828}.grand-total-summary.total{color:#fff;background:#0f766e;border-radius:4px;font-size:15px}.overtime-legend{background:#fff;border:1px solid #e8edf2;border-radius:12px;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:20px;padding:16px 24px;display:flex;box-shadow:0 1px 3px #00000014}.legend-color{border:1px solid #e2e8f0;border-radius:4px;width:20px;height:20px}.legend-color.D{background:#e8f5e9;border-color:#4caf50}.legend-color.N{background:#fff3e0;border-color:#ff9800}.legend-color.S{background:#e3f2fd;border-color:#2196f3}.legend-color.H{background:#fce4ec;border-color:#f44336}.legend-color.auto-save{background:#dcfce7;border-color:#22c55e;animation:2s infinite pulse-dot}.legend-color.sunday-legend{background:#f5f0f8;border-color:#6a1b9a}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.5}}@media (width<=1024px){.overtime-table .sticky-name{width:120px;min-width:120px;left:40px}.overtime-table .sticky-id{width:60px;min-width:60px;left:160px}.overtime-table .sticky-position{width:90px;min-width:90px;left:220px}}@media (width<=768px){.stats-bar{grid-template-columns:repeat(2,1fr);gap:10px}.stat-box .stat-value{font-size:18px}.overtime-table{min-width:700px;font-size:11px}.ot-input{max-width:34px;padding:2px 1px;font-size:10px}.overtime-table .sticky-name{width:100px;min-width:100px;left:35px}.overtime-table .sticky-id{width:50px;min-width:50px;left:135px}.overtime-table .sticky-position{width:70px;min-width:70px;left:185px}.overtime-table .sticky-serial{width:35px;min-width:35px}.overtime-legend{flex-direction:column;align-items:center;gap:8px}.overtime-page .header-actions{flex-wrap:wrap;justify-content:flex-end}}@media (width<=480px){.stats-bar{grid-template-columns:1fr}}