:root{--bg:#080b0a;--panel:#101512;--panel2:#151c18;--line:#223029;--green:#18c77b;--green2:#0fa866;--text:#fff;--muted:#9ba7a0;--danger:#ff6b6b}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}body{min-height:100vh}.att-shell{width:min(100%,460px);min-height:100vh;margin:0 auto;padding:24px 18px 34px;display:flex;flex-direction:column}.brand-row{display:flex;align-items:center;gap:12px;margin:8px 0 28px}.brand-row img{width:44px;height:44px}.brand-name{font-size:13px;font-weight:900;letter-spacing:.16em;color:var(--green)}.hero{margin:auto 0}.eyebrow{color:var(--green);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.title{font-size:36px;line-height:1.04;margin:8px 0 10px;font-weight:900}.subtitle{color:var(--muted);font-size:15px;line-height:1.55;margin:0 0 24px}.card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:0 24px 60px rgba(0,0,0,.24)}.pin-input{width:100%;height:60px;border-radius:15px;border:1px solid #2a3831;background:#090d0b;color:#fff;font-size:26px;letter-spacing:.30em;text-align:center;font-weight:800;outline:none;padding:0 14px}.pin-input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(24,199,123,.12)}.btn-main{width:100%;border:0;border-radius:15px;padding:16px;margin-top:12px;background:var(--green);color:#06110c;font-size:15px;font-weight:900;cursor:pointer}.btn-main:active{transform:translateY(1px)}.user-card{display:flex;flex-direction:column;gap:14px}.hello{font-size:30px;font-weight:900;margin:0}.meta{color:var(--muted);font-size:14px}.action-placeholder{border:1px dashed #31503f;background:#0c1711;border-radius:18px;padding:18px;text-align:center;color:#b8c6bf}.small-link{display:inline-block;color:#c9d5cf;text-decoration:none;font-size:13px;margin-top:16px}.small-link:hover{color:#fff}.footer-note{margin-top:26px;color:#66746c;font-size:12px;text-align:center}.admin-shell{max-width:1100px;margin:0 auto;padding:28px 18px}.admin-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px}.admin-title{font-size:28px;font-weight:900}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.stat{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px}.stat b{display:block;font-size:30px;color:var(--green)}.stat span{color:var(--muted);font-size:13px}.btn-ghost{display:inline-block;text-decoration:none;color:#fff;border:1px solid var(--line);padding:10px 14px;border-radius:12px;background:#0c100e}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(100%,390px);background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:24px}.field{margin:12px 0}.field input{width:100%;background:#090d0b;border:1px solid #29352f;color:#fff;border-radius:14px;padding:15px;font-size:16px}.error{background:#351616;color:#ffd7d7;padding:12px;border-radius:12px;margin-bottom:14px}.success{background:#123522;color:#c8ffe0;padding:12px;border-radius:12px;margin-bottom:14px}@media(max-width:700px){.stat-grid{grid-template-columns:1fr}.att-shell{padding-top:18px}.title{font-size:32px}}
.session-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:19px 18px;margin-top:8px}.session-open{border-color:#235b3d;background:#0d1b14}.session-label{font-size:11px;letter-spacing:.14em;font-weight:900;color:var(--green)}.session-time{font-size:19px;line-height:1.3;font-weight:900;margin:7px 0 4px}.btn-out{background:#f1f4f2;color:#07100b}.device-lock-note{color:#74827a;font-size:12px;line-height:1.5;text-align:center;padding:4px 14px 0}

.helper-small{display:block;color:#7f8e86;font-size:11px;line-height:1.5;margin:-14px 2px 20px}.action-small{margin:0 4px -4px;text-align:center}.device-lock-note{display:block;color:#74827a;font-size:11px;line-height:1.5;text-align:center;padding:4px 14px 0}
.session-warning{display:block;margin-top:8px;color:#ffd58a;font-size:11px;line-height:1.45}.history-trigger{border:0;background:transparent;color:#d8e2dc;text-decoration:underline;text-underline-offset:3px;font-size:13px;padding:7px 4px}.history-modal{background:var(--bg);color:var(--text);border:1px solid var(--line)}.history-modal .modal-header{border-bottom:1px solid var(--line);padding:16px 18px}.history-modal .modal-title{font-size:22px;font-weight:900;margin:2px 0 0}.history-modal .modal-body{padding:14px}.history-filter{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:sticky;top:-14px;z-index:3;background:var(--bg);padding:4px 0 10px}.history-filter label{display:block;color:var(--muted);margin-bottom:5px}.history-filter input{width:100%;height:44px;border:1px solid var(--line);border-radius:12px;background:#0b100d;color:#fff;padding:0 10px;font-size:14px}.history-filter button{grid-column:1/-1;border:0;border-radius:12px;background:var(--green);color:#06110c;font-size:13px;font-weight:900;height:44px}.history-help{display:block;color:#728078;line-height:1.45;margin:1px 2px 12px}.history-list{display:flex;flex-direction:column;gap:9px}.history-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:13px}.history-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.history-head b{display:block;font-size:14px}.history-head small{display:block;color:var(--muted);font-size:11px;margin-top:2px}.history-badges{display:flex;gap:4px;justify-content:flex-end;flex-wrap:wrap}.history-badge{font-size:9px;font-weight:900;letter-spacing:.04em;padding:4px 6px;border-radius:999px;background:#27332d;color:#cbd6d0}.history-badge.normal{background:#103322;color:#8ef0bb}.history-badge.no_attendance{background:#292d2b;color:#aab4ae}.history-badge.multi_session,.history-badge.open_session{background:#3b3019;color:#ffd98a}.history-badge.exception{background:#3b1d1d;color:#ffb4b4}.history-session{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:11px;padding-top:10px;border-top:1px solid #1f2b25}.history-session>div span{display:block;color:var(--muted);font-size:10px}.history-session>div b{font-size:13px}.history-session-no{grid-column:1/-1!important;color:#8fa097;font-size:10px;font-weight:800}.history-exception{grid-column:1/-1;color:#ffb4b4;font-size:10px}.history-none,.history-loading,.history-error,.history-empty{color:var(--muted);font-size:12px;padding:12px 0}.history-error{color:#ffb4b4}@media(max-width:380px){.att-shell{padding-left:13px;padding-right:13px}.hello{font-size:26px}.history-filter{grid-template-columns:1fr}.history-filter button{grid-column:1}.history-session{grid-template-columns:1fr 1fr}.history-session>div:last-of-type{grid-column:1/-1}}

/* Admin Patch 09-12 */
.admin-body{background:var(--bg);min-height:100vh}.admin-header{position:sticky;top:0;z-index:30;background:rgba(8,11,10,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}.admin-header-inner{max-width:1180px;margin:0 auto;min-height:68px;padding:10px 18px;display:flex;align-items:center;gap:20px}.admin-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;min-width:185px}.admin-brand img{width:34px;height:34px}.admin-brand span{display:flex;flex-direction:column}.admin-brand b{font-size:11px;letter-spacing:.13em;color:var(--green)}.admin-brand small{font-size:12px;font-weight:800}.admin-menu-btn{display:none;margin-left:auto;background:#101612;border:1px solid var(--line);color:#fff;border-radius:10px;padding:7px 11px}.admin-nav-collapse{display:flex!important;align-items:center;flex:1}.admin-nav{display:flex;gap:4px;flex:1}.admin-nav a{color:#aab6af;text-decoration:none;font-size:13px;font-weight:800;padding:9px 11px;border-radius:10px}.admin-nav a:hover,.admin-nav a.active{background:#132019;color:#fff}.admin-nav a.active{color:var(--green)}.admin-user{display:flex;align-items:center;gap:9px}.admin-user small{color:var(--muted)}.admin-user a{color:#fff;text-decoration:none;border:1px solid var(--line);border-radius:9px;padding:7px 10px;font-size:12px}.admin-page{max-width:1180px;margin:0 auto;padding:24px 18px 48px}.admin-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px}.admin-page-head h1{font-size:28px;font-weight:900;margin:4px 0 3px}.admin-page-head small{color:var(--muted)}.admin-primary{border:0;border-radius:12px;background:var(--green);color:#06110c;padding:11px 15px;font-weight:900;font-size:13px}.admin-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.admin-stat{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px}.admin-stat span{display:block;color:var(--muted);font-size:11px}.admin-stat b{font-size:28px;display:block;margin-top:5px}.admin-stat.warn b{color:#ffd98a}.admin-panel{margin-top:16px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px}.admin-panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.admin-panel-head b{display:block}.admin-panel-head small{display:block;color:var(--muted)}.admin-panel-head a{font-size:12px;color:var(--green)}.compact-list{display:flex;flex-direction:column}.compact-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid #1d2822}.compact-item:first-child{border-top:0}.compact-item b,.compact-item small{display:block}.compact-item small{color:var(--muted);font-size:11px;margin-top:2px}.admin-empty{color:var(--muted);padding:14px 0;font-size:12px}.status-pill{display:inline-block;padding:4px 7px;border-radius:999px;font-size:9px;font-weight:900;letter-spacing:.04em;background:#26312b;color:#d6dfda}.status-pill.open{background:#173524;color:#91edb8}.status-pill.closed{background:#1d3027;color:#b8e8cd}.status-pill.warn{background:#3b3019;color:#ffd98a}.status-pill.muted{background:#2c302e;color:#b7bdb9}.admin-filter-grid{display:grid;grid-template-columns:160px 160px minmax(200px,1fr) 150px auto;gap:9px;align-items:end;margin-bottom:14px}.admin-filter-grid label{display:block;color:var(--muted);font-size:10px;margin-bottom:4px}.admin-filter-grid input,.admin-filter-grid select,.admin-filter-row select{height:42px;width:100%;border:1px solid var(--line);border-radius:10px;background:#0b100d;color:#fff;padding:0 10px}.admin-filter-row{max-width:220px;margin-bottom:13px}.filter-action .admin-primary{height:42px}.table-dark{--bs-table-bg:transparent;--bs-table-striped-bg:transparent;--bs-table-hover-bg:#151d19;--bs-table-border-color:#223029;color:#fff}.table>:not(caption)>*>*{padding:.72rem .55rem;font-size:12px}.cell-small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.action-row{display:flex;gap:4px;flex-wrap:wrap}.action-row button{border:1px solid var(--line);background:#0c100e;color:#fff;border-radius:8px;padding:5px 7px;font-size:10px}.pin-result{font-size:30px;font-weight:900;letter-spacing:.13em;margin:12px 0;color:#18c77b}.dt-container .dt-search input,.dt-container .dt-length select{background:#0b100d!important;color:#fff!important;border:1px solid var(--line)!important}.dt-container,.dt-container .dt-info,.dt-container .dt-length,.dt-container .dt-search{color:var(--muted)!important;font-size:11px}.dt-container .dt-paging .dt-paging-button{color:#fff!important;font-size:11px}.ts-control,.ts-dropdown,.ts-control input{background:#0b100d!important;color:#fff!important;border-color:var(--line)!important}.ts-dropdown .option{color:#fff}.ts-dropdown .active{background:#17221c!important;color:#fff!important}
@media(max-width:800px){.admin-menu-btn{display:block}.admin-nav-collapse{display:none!important;width:100%;flex-basis:100%}.admin-nav-collapse.show{display:block!important}.admin-header-inner{flex-wrap:wrap}.admin-nav{flex-direction:column;padding:7px 0}.admin-user{padding:4px 0 8px;justify-content:space-between}.admin-page{padding:18px 12px 36px}.admin-page-head{align-items:flex-start}.admin-stat-grid{grid-template-columns:1fr 1fr}.admin-filter-grid{grid-template-columns:1fr 1fr}.admin-filter-grid>div:nth-child(3){grid-column:1/-1}.filter-action{grid-column:1/-1}.filter-action .admin-primary{width:100%}.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}.table{min-width:760px}.admin-page-head h1{font-size:24px}}
@media(max-width:380px){.admin-stat-grid{grid-template-columns:1fr 1fr;gap:8px}.admin-stat{padding:12px}.admin-stat b{font-size:23px}.admin-filter-grid{grid-template-columns:1fr}.admin-filter-grid>div:nth-child(3),.filter-action{grid-column:1}.admin-brand{min-width:auto}}

/* Patch 13-16: Division & Payroll */
.admin-mini-btn{border:1px solid var(--line);background:#0c100e;color:#fff;border-radius:8px;padding:6px 10px;font-size:10px}.employee-filter{grid-template-columns:180px minmax(220px,360px)}.payroll-filter{grid-template-columns:150px 150px minmax(170px,1fr) minmax(190px,1.2fr) 170px auto}.payroll-filter-panel{overflow:visible}.payroll-error{color:#ffb4b4;font-size:13px}.payroll-legend{padding:11px 14px}.payroll-legend small{color:var(--muted)}.payroll-wrap{padding:0;overflow:hidden}.payroll-scroll{overflow:auto;-webkit-overflow-scrolling:touch;max-height:72vh}.payroll-matrix{border-collapse:separate;border-spacing:0;min-width:max-content;width:100%;font-size:11px}.payroll-matrix th,.payroll-matrix td{border-right:1px solid #1d2923;border-bottom:1px solid #1d2923;background:#0f1512;padding:7px 6px;text-align:center;min-width:55px}.payroll-matrix thead th{position:sticky;top:0;z-index:6;background:#151e19;color:#cfd8d3;font-weight:900}.payroll-matrix tfoot th{position:sticky;bottom:0;z-index:6;background:#151e19}.payroll-matrix .sticky-name{position:sticky;left:0;z-index:8;text-align:left;min-width:160px;max-width:160px}.payroll-matrix .sticky-division{position:sticky;left:160px;z-index:7;text-align:left;min-width:125px;max-width:125px}.payroll-matrix tbody .sticky-name,.payroll-matrix tbody .sticky-division{background:#101713}.payroll-matrix tfoot .sticky-name,.payroll-matrix tfoot .sticky-division,.payroll-matrix thead .sticky-name,.payroll-matrix thead .sticky-division{background:#17211c}.payroll-matrix td small,.payroll-matrix th small{display:block;color:#77877e;font-size:9px;white-space:nowrap;margin-top:2px}.payroll-matrix td em{display:block;color:#87968e;font-size:8px;font-style:normal;margin-top:2px}.day-col span{font-size:12px}.pay-cell b{font-size:14px}.status-pass{background:#10281b!important;color:#8ef0bb}.status-under{background:#302814!important;color:#ffd98a}.status-open{background:#312818!important;color:#ffd58a}.status-exception{background:#351919!important;color:#ffaaaa}.status-no_attendance{color:#68766e}.status-not_required{color:#89938e}.sum-cell{font-size:12px!important;background:#121a16!important}.pass-text{color:#8ef0bb}.under-text{color:#ffd98a}.pay-total-day b{font-size:9px}.pay-total-day small{font-size:8px!important}@media(max-width:900px){.payroll-filter{grid-template-columns:1fr 1fr}.payroll-filter>div:nth-child(3),.payroll-filter>div:nth-child(4),.payroll-filter>div:nth-child(5){grid-column:auto}.payroll-filter .filter-action{grid-column:1/-1}.payroll-matrix .sticky-name{min-width:130px;max-width:130px}.payroll-matrix .sticky-division{left:130px;min-width:105px;max-width:105px}}@media(max-width:520px){.employee-filter,.payroll-filter{grid-template-columns:1fr}.payroll-filter>div,.payroll-filter>div:nth-child(3),.payroll-filter>div:nth-child(4),.payroll-filter>div:nth-child(5),.payroll-filter .filter-action{grid-column:1}.payroll-scroll{max-height:68vh}.payroll-matrix .sticky-name{min-width:112px;max-width:112px}.payroll-matrix .sticky-division{left:112px;min-width:94px;max-width:94px}.payroll-matrix th,.payroll-matrix td{padding:6px 5px;min-width:49px;font-size:10px}}

/* Patch 17-19: Payroll UI + server-side exports */
.payroll-page-head{align-items:center}.payroll-actions{display:flex;gap:8px;flex-wrap:wrap}.payroll-actions .admin-mini-btn{text-decoration:none;font-weight:900;padding:9px 13px}.payroll-actions .admin-mini-btn:first-child{border-color:#2b7d54;color:#8ef0bb}.payroll-actions .admin-mini-btn:last-child{border-color:#7a5f2c;color:#ffd98a}.payroll-matrix tbody tr:hover td{filter:brightness(1.08)}.payroll-matrix thead .day-col{min-width:58px}.payroll-matrix td.pay-cell{height:48px}.payroll-matrix td.pay-cell small{font-weight:700}.payroll-legend b{display:inline-block;min-width:12px;text-align:center}.payroll-scroll{scrollbar-width:thin;scrollbar-color:#314139 #0b100d}@media(max-width:800px){.payroll-page-head{align-items:flex-start;flex-direction:column}.payroll-actions{width:100%}.payroll-actions .admin-mini-btn{flex:1;text-align:center;min-width:120px}}@media(max-width:520px){.payroll-actions{display:grid;grid-template-columns:1fr 1fr}.payroll-actions .admin-mini-btn{min-width:0}.payroll-legend{line-height:1.8}}