:root{--ink:#1c2433;--ink-soft:#5b6477;--line:#e2e5ec;--bg:#f7f8fa;--panel:#fff;--accent:#2f5d8a;--accent-soft:#eaf1f8;--amber:#b5780a;--amber-bg:#fdf3e1;--red:#b3322a;--green:#2f7a4f;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);margin:0}.center-screen{justify-content:center;align-items:center;height:100vh;display:flex}.muted{color:var(--ink-soft);font-size:.9rem}.login-screen{background:linear-gradient(180deg, var(--bg) 0%, #eef1f6 100%);justify-content:center;align-items:center;height:100vh;display:flex}.login-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;flex-direction:column;gap:.9rem;width:320px;padding:2.5rem;display:flex;box-shadow:0 1px 3px #141e320f}.login-card h1{margin:0;font-size:1.25rem}.login-card label{color:var(--ink-soft);flex-direction:column;gap:.3rem;font-size:.85rem;display:flex}.login-card input{border:1px solid var(--line);border-radius:6px;padding:.55rem .7rem;font-size:.95rem}.login-card button{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:6px;margin-top:.4rem;padding:.6rem;font-size:.95rem}.login-card button:disabled{opacity:.6;cursor:default}.error-text{color:var(--red);margin:0;font-size:.85rem}.app-shell{min-height:100vh}.app-header{background:var(--panel);border-bottom:1px solid var(--line);align-items:center;gap:1.5rem;height:56px;padding:0 1.5rem;display:flex}.brand{letter-spacing:-.01em;font-weight:600}.app-header nav{flex:1;gap:1rem;display:flex}.app-header nav a{color:var(--ink-soft);border-bottom:2px solid #0000;padding:.4rem 0;font-size:.9rem;text-decoration:none}.app-header nav a.active{color:var(--ink);border-color:var(--accent);font-weight:500}.header-right{align-items:center;gap:.8rem;display:flex}.role-pill{text-transform:uppercase;letter-spacing:.04em;background:var(--accent-soft);color:var(--accent);border-radius:100px;padding:.2rem .55rem;font-size:.75rem}.link-btn{color:var(--ink-soft);cursor:pointer;background:0 0;border:none;font-size:.85rem}main{max-width:1400px;margin:0 auto;padding:1.5rem}.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:1.25rem 1.5rem}.panel h2{margin:0 0 .2rem;font-size:1.1rem}.notice{background:var(--amber-bg);color:var(--amber);border-radius:6px;padding:.5rem .8rem;font-size:.85rem}.data-grid{border-collapse:collapse;width:100%;margin-top:.75rem;font-size:.85rem}.data-grid th,.data-grid td{border-bottom:1px solid var(--line);text-align:left;padding:.5rem .6rem}.data-grid th{color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;font-size:.78rem;font-weight:500}.mono{font-variant-numeric:tabular-nums;font-family:SF Mono,Menlo,monospace}.badge{text-transform:capitalize;border-radius:100px;padding:.15rem .5rem;font-size:.72rem}.badge-active{color:var(--green);background:#e7f4ec}.badge-on_leave{background:var(--amber-bg);color:var(--amber)}.badge-terminated,.badge-deceased{color:var(--red);background:#fbe9e8}.badge-pending{background:var(--amber-bg);color:var(--amber);margin-left:.3rem}.grid-header{justify-content:space-between;align-items:center;display:flex}.mode-toggle{border:1px solid var(--line);border-radius:8px;display:flex;overflow:hidden}.mode-toggle button{background:var(--panel);cursor:pointer;color:var(--ink-soft);border:none;padding:.4rem .9rem;font-size:.85rem}.mode-toggle button.active{background:var(--accent);color:#fff}.grid-scroll{margin-top:.5rem;overflow-x:auto}.register-grid{white-space:nowrap}.register-grid th,.register-grid td{padding:.35rem .4rem}.sticky-col{background:var(--panel);z-index:1;min-width:160px;position:sticky;left:0}.lock-icon{margin-left:.2rem;font-size:.7rem}.locked-cell{background:#f4f4f6}.register-grid select,.register-grid input{border:1px solid var(--line);border-radius:4px;width:64px;padding:.25rem;font-size:.82rem}.register-grid select:disabled,.register-grid input:disabled{color:var(--ink-soft);background:#f0f1f3}.grid-header{flex-direction:column;align-items:stretch;gap:.75rem;padding-right:3rem;display:flex}.header-left{flex-direction:column;gap:.4rem;display:flex}.header-right-controls{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.month-nav{align-items:center;gap:.5rem;display:flex}.month-nav button{background:var(--panel);border:1px solid var(--line);cursor:pointer;color:var(--ink-soft);border-radius:6px;padding:.2rem .6rem;font-size:1.1rem}.month-nav button:hover{background:var(--bg)}.month-label{text-align:center;min-width:90px;font-size:.95rem;font-weight:600}.emp-filter{border:1px solid var(--line);background:var(--panel);border-radius:6px;min-width:140px;padding:.35rem .5rem;font-size:.85rem}.date-col{text-align:center;min-width:48px}.date-hdr{flex-direction:column;align-items:center;gap:1px;font-size:.75rem;display:flex}.dow{color:var(--ink-soft);font-size:.68rem}.weekend-col{background:#f9f9fb}.locked-col{color:var(--ink-soft)}.lock-icon{font-size:.62rem}.agent-name{font-size:.85rem}.agent-code{font-size:.72rem}.att-cell,.ot-cell{text-align:center;padding:.25rem .2rem}.att-cell select,.ot-cell input{border:1px solid var(--line);text-align:center;background:0 0;border-radius:4px;width:46px;padding:.2rem .1rem;font-size:.78rem}.id-col{text-overflow:ellipsis;max-width:150px;font-size:.8rem;overflow:hidden}.id-col-code{width:72px;min-width:72px;left:0}.id-col-name{min-width:170px;left:72px}.muted-cell{color:var(--ink-soft)}.mono{font-family:ui-monospace,Cascadia Code,Consolas,monospace;font-size:.78rem}.view-controls{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.date-slicer{border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:.25rem .4rem;font-family:inherit;font-size:.85rem}.today-btn{padding:.25rem .6rem!important;font-size:.78rem!important}.daily-grid .date-col{min-width:170px}.today-col{background:#eef6ff}.daily-cell{padding:.35rem .4rem}.daily-cell-row{justify-content:center;align-items:center;gap:.35rem;display:flex}.daily-cell-row select{width:72px}.hours-input{width:58px!important}.hours-short{border-color:var(--amber)!important;background:var(--amber-bg)!important}.hours-unpaid{color:var(--red);font-weight:600;background:#fbe9e8!important;border-color:#e3aaa6!important}.comment-flag{cursor:help;font-size:.7rem}.total-col{text-align:right;border-left:1px solid var(--line);background:#f7f8fa;min-width:52px;font-size:.8rem;padding:.35rem .55rem!important}th.total-col{text-align:right;font-weight:600}.total-negative{color:var(--red);font-weight:600}.total-strong{font-weight:600}.display-toggle{align-items:center;gap:.4rem;display:flex}.display-toggle-label{color:var(--ink-soft);font-size:.78rem}.display-toggle button{border:1px solid var(--line);background:var(--panel);cursor:pointer;color:var(--ink-soft);border-radius:999px;padding:.28rem .8rem;font-size:.8rem}.display-toggle button.active{background:var(--green);border-color:var(--green);color:#fff}.panel,.export-menu-wrap{position:relative}.export-corner{z-index:20;position:absolute;top:1.1rem;right:1.25rem}.export-icon-btn{align-items:center;padding:.4rem .55rem;display:flex}.export-menu{z-index:50;background:var(--panel);border:1px solid var(--line);border-radius:8px;min-width:170px;position:absolute;top:calc(100% + 4px);right:0;overflow:hidden;box-shadow:0 6px 20px #141e321f}.export-menu button{text-align:left;cursor:pointer;width:100%;color:var(--ink);background:0 0;border:none;padding:.55rem .9rem;font-size:.85rem;display:block}.export-menu button:hover{background:var(--bg)}.comment-input{box-sizing:border-box;border:1px solid var(--line);resize:vertical;border-radius:6px;width:100%;padding:.5rem;font-family:inherit;font-size:.88rem}.btn-primary:disabled{opacity:.45;cursor:not-allowed}.ot-pending{background:var(--amber-bg)}.input-pending{color:var(--amber);border-color:var(--amber)!important}.notice{cursor:pointer;border-radius:6px;justify-content:space-between;align-items:center;padding:.5rem .9rem;font-size:.85rem;display:flex}.notice-error{color:var(--red);background:#fbe9e8}.notice-info{background:var(--amber-bg);color:var(--amber)}.dismiss{opacity:.6;font-size:.8rem}.modal-overlay{z-index:100;background:#141e3259;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--panel);border-radius:10px;width:90%;max-width:420px;padding:1.75rem;box-shadow:0 8px 32px #141e322e}.modal h3{margin:0 0 .75rem;font-size:1rem}.modal p{color:var(--ink-soft);margin:0 0 .6rem;font-size:.9rem}.modal p strong{color:var(--ink)}.modal-actions{justify-content:flex-end;gap:.6rem;margin-top:1.25rem;display:flex}.btn-primary{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:6px;padding:.5rem 1.1rem;font-size:.9rem}.btn-secondary{background:var(--panel);color:var(--ink-soft);border:1px solid var(--line);cursor:pointer;border-radius:6px;padding:.5rem 1.1rem;font-size:.9rem}.legend{flex-wrap:wrap;gap:.4rem;margin-top:.9rem;display:flex}.legend-item{border:1px solid #00000012;border-radius:4px;padding:.2rem .5rem;font-size:.72rem}.dashboard,.approvals-page,.terminations-page{flex-direction:column;gap:1.25rem;display:flex}.dash-heading{justify-content:space-between;align-items:flex-start;display:flex}.dash-heading h2{margin:0 0 .2rem}.dash-grid{grid-template-columns:1fr 1fr;gap:1.25rem;display:grid}@media (width<=900px){.dash-grid{grid-template-columns:1fr}}.panel h3{margin:0 0 .75rem;font-size:.95rem;font-weight:600}.stat-cards{grid-template-columns:repeat(4,1fr);gap:.75rem;display:grid}@media (width<=700px){.stat-cards{grid-template-columns:repeat(2,1fr)}}.stat-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:1.1rem 1.25rem}.stat-value{margin-bottom:.25rem;font-size:2rem;font-weight:700;line-height:1}.stat-label{color:var(--ink-soft);font-size:.8rem}.stat-green .stat-value{color:var(--green)}.stat-red .stat-value{color:var(--red)}.stat-amber .stat-value{color:var(--amber)}.breakdown-list{flex-direction:column;gap:.45rem;margin-top:.5rem;display:flex}.breakdown-row{grid-template-columns:40px 1fr 1fr 36px;align-items:center;gap:.5rem;display:grid}.bdr-code{font-variant-numeric:tabular-nums;font-size:.8rem;font-weight:700}.bdr-desc{font-size:.78rem}.bdr-bar-track{background:var(--line);border-radius:100px;height:8px;overflow:hidden}.bdr-bar-fill{border-radius:100px;height:100%;transition:width .4s}.bdr-count{text-align:right;color:var(--ink-soft);font-size:.8rem}.att-pct{font-size:.85rem;font-weight:600}.pct-green{color:var(--green)}.pct-amber{color:var(--amber)}.pct-red{color:var(--red)}.nav-badge{background:var(--red);color:#fff;vertical-align:middle;border-radius:100px;justify-content:center;align-items:center;min-width:16px;height:16px;margin-left:.35rem;padding:0 4px;font-size:.65rem;font-weight:700;display:inline-flex}.approval-row:hover{background:var(--bg)}.count-badge{background:var(--amber-bg);color:var(--amber);border-radius:100px;justify-content:center;align-items:center;margin-left:.4rem;padding:.1rem .45rem;font-size:.72rem;font-weight:700;display:inline-flex}.action-btns{gap:.35rem;display:flex}.btn-approve{color:var(--green);cursor:pointer;white-space:nowrap;background:#e7f4ec;border:1px solid #b2d9c0;border-radius:5px;padding:.3rem .65rem;font-size:.8rem}.btn-approve:hover{background:#d0edda}.btn-reject{color:var(--red);cursor:pointer;white-space:nowrap;background:#fbe9e8;border:1px solid #e8b0ad;border-radius:5px;padding:.3rem .65rem;font-size:.8rem}.btn-reject:hover{background:#f5d3d1}.btn-approve:disabled,.btn-reject:disabled{opacity:.5;cursor:default}.badge-ottype{text-transform:capitalize}.badge-kind{color:#5b4a8a;background:#efeafc;font-weight:600}.badge-normal{color:var(--ink-soft);background:#f4f4f6}.badge-sunday{background:var(--amber-bg);color:var(--amber)}.badge-public_holiday{color:var(--accent);background:#eaf1f8}.term-month-header{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.term-month-header h3{margin:0}.sp-list td{vertical-align:top}.sp-row:hover{background:#f7f9fc}.sp-row:hover .edit-hint{opacity:1}.editable-cell{cursor:pointer;align-items:center;gap:.3rem;display:inline-flex}.editable-cell:hover{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.edit-hint{color:var(--ink-soft);opacity:0;font-size:.7rem;transition:opacity .15s}.form-grid{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.form-grid label{color:var(--ink-soft);flex-direction:column;gap:.3rem;font-size:.85rem;display:flex}.form-grid label select,.form-grid label input,.form-grid label textarea{border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:.45rem .6rem;font-size:.9rem}.req{color:var(--red)}.admin-page{flex-direction:column;gap:1rem;display:flex}.admin-tabs{border-bottom:2px solid var(--line);gap:0;display:flex}.admin-tabs button{cursor:pointer;color:var(--ink-soft);background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-2px;padding:.55rem 1.1rem;font-size:.9rem}.admin-tabs button.active{color:var(--accent);border-color:var(--accent);font-weight:500}.admin-panel{padding:1.25rem 1.5rem}.tab-header{justify-content:space-between;align-items:center;margin-bottom:.75rem;display:flex}.codes-grid td,.codes-grid th{padding:.4rem .55rem}.num{text-align:center;font-variant-numeric:tabular-nums;font-size:.82rem}.badge-codetype{text-transform:capitalize;font-size:.72rem}.badge-attendance{color:var(--green);background:#e7f4ec}.badge-scheduling{background:var(--accent-soft);color:var(--accent)}.badge-lifecycle{color:var(--red);background:#fbe9e8}.toggle{width:36px;height:20px;display:inline-block;position:relative}.toggle input{opacity:0;width:0;height:0}.toggle span{background:var(--line);cursor:pointer;border-radius:100px;transition:all .2s;position:absolute;inset:0}.toggle input:checked+span{background:var(--accent)}.toggle span:before{content:"";background:#fff;border-radius:50%;width:14px;height:14px;transition:all .2s;position:absolute;bottom:3px;left:3px}.toggle input:checked+span:before{transform:translate(16px)}.add-form{background:var(--bg);border:1px dashed var(--line);margin-bottom:1rem}.code-form-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.6rem;margin:.75rem 0;display:grid}.code-form-grid label{color:var(--ink-soft);flex-direction:column;gap:.25rem;font-size:.8rem;display:flex}.code-form-grid input,.code-form-grid select{border:1px solid var(--line);border-radius:5px;padding:.35rem .5rem;font-size:.85rem}.code-form-grid .check-label{flex-direction:row;align-items:center;gap:.4rem}.code-form-grid .check-label input{width:auto}.role-select{border:1px solid var(--line);border-radius:5px;padding:.3rem .5rem;font-size:.85rem}.policy-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;max-width:780px;margin-top:.5rem;display:grid}.policy-grid label{flex-direction:column;gap:.35rem;display:flex}.policy-grid label>span{font-size:.85rem;font-weight:500}.policy-grid input{border:1px solid var(--line);border-radius:6px;max-width:140px;padding:.45rem .6rem;font-size:.95rem}.policy-grid small{font-size:.75rem;line-height:1.3}.rate-input{border:1px solid var(--line);text-align:right;border-radius:5px;width:90px;padding:.35rem .5rem;font-size:.85rem}.holiday-add{flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;display:flex}.holiday-add input{border:1px solid var(--line);border-radius:6px;padding:.4rem .6rem;font-size:.88rem}.holiday-add .btn-reject,.data-grid .btn-reject{padding:.3rem .7rem;font-size:.8rem}.pw-set-row{flex-wrap:wrap;align-items:center;gap:.4rem;display:flex}.pw-set-row input{border:1px solid var(--line);border-radius:5px;min-width:180px;padding:.35rem .5rem;font-size:.85rem}.pw-set-row .btn-primary,.pw-set-row .btn-secondary{padding:.35rem .7rem;font-size:.8rem}