:root{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#0f172a;background:#f6f8fb;color-scheme:light;
  --navy:#0f172a;--navy-2:#1e293b;--blue:#2563eb;--blue-soft:#eff6ff;--green:#15803d;--green-soft:#ecfdf5;
  --red:#b91c1c;--red-soft:#fef2f2;--amber:#b45309;--amber-soft:#fffbeb;--border:#e2e8f0;--muted:#64748b;--card:#fff;
}
*{box-sizing:border-box}html{background:#f6f8fb}body{margin:0;background:linear-gradient(180deg,#eef2f7 0,#f8fafc 230px,#f6f8fb 100%);min-height:100%}
button,input,select,textarea{font:inherit}.hidden{display:none!important}.app-shell{width:min(1180px,100%);margin:0 auto;padding:22px 18px 56px}
.app-header,.userbar,.section-head,.button-row,.date-actions,.table-head,.brand-block{display:flex;align-items:center}.app-header,.userbar,.section-head,.table-head{justify-content:space-between;gap:18px}.app-header{padding:8px 2px 20px}.brand-block{gap:12px}.brand-mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--navy);color:#fff;font-weight:900;font-size:20px;box-shadow:0 8px 24px rgba(15,23,42,.14)}
.eyebrow,.section-label{font-size:11px;letter-spacing:.16em;font-weight:850;color:#64748b}.eyebrow{margin-bottom:2px}h1,h2,h3,p{margin:0}h1{font-size:27px;line-height:1.1}h2{font-size:22px;line-height:1.2}h3{font-size:17px}.muted{color:var(--muted)}.small{font-size:13px}.section-subtitle{margin-top:7px;max-width:760px;line-height:1.55}
.auth-card{max-width:540px;margin:52px auto 0;background:#fff;border:1px solid rgba(226,232,240,.95);border-radius:26px;padding:28px;box-shadow:0 24px 70px rgba(15,23,42,.09)}.auth-copy{margin-bottom:22px}.auth-copy h2{font-size:27px;margin:9px 0 8px}.auth-copy p{color:var(--muted);line-height:1.55}.pill,.file-tag{display:inline-flex;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:850;letter-spacing:.08em;background:#eef2ff;color:#3730a3}
.userbar{background:#fff;border:1px solid var(--border);border-radius:18px;padding:13px 15px;margin-bottom:12px}.user-name{font-size:17px;font-weight:850}.tabs{display:flex;gap:8px;overflow:auto;padding:4px 0 10px;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{display:flex;align-items:center;gap:7px;white-space:nowrap;border:1px solid var(--border);background:#fff;color:#334155;border-radius:12px;min-height:44px;padding:9px 13px;font-weight:750;cursor:pointer}.tab.active{background:var(--navy);border-color:var(--navy);color:#fff}.tab span{opacity:.75}
.panel{background:#fff;border:1px solid var(--border);border-radius:22px;padding:20px;box-shadow:0 12px 36px rgba(15,23,42,.045)}.hero-card{display:grid;grid-template-columns:1fr auto;gap:18px;background:linear-gradient(135deg,#0f172a,#1e3a8a);color:#fff;border-radius:20px;padding:24px}.hero-card .section-label{color:#bfdbfe}.hero-card .muted{color:#cbd5e1}.hero-value{font-size:29px;font-weight:900;margin:6px 0 4px}.schedule-box{min-width:190px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:14px 16px;display:grid;align-content:center;gap:3px}.schedule-label{font-size:12px;color:#bfdbfe}.schedule-box strong{font-size:20px}.content-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px}.panel>.content-card{margin-top:14px}.card-title{font-size:16px;font-weight:850;margin-bottom:13px}.top-space{margin-top:16px}
.form-grid{display:grid;gap:13px}.form-grid.compact{gap:11px}label{display:grid;gap:7px;color:#334155;font-size:13px;font-weight:760}.label-note{font-weight:500;color:#94a3b8}input,textarea,select{width:100%;min-height:46px;border:1px solid #cbd5e1;border-radius:12px;padding:10px 12px;background:#fff;color:#0f172a;outline:none;transition:border .15s,box-shadow .15s}textarea{resize:vertical;min-height:76px}input:focus,textarea:focus,select:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(59,130,246,.12)}input:disabled{background:#f8fafc;color:#94a3b8}.field-pair{display:grid;grid-template-columns:1fr 1.35fr;gap:10px}
.button{border:1px solid transparent;border-radius:12px;min-height:44px;padding:10px 14px;font-weight:800;cursor:pointer;transition:transform .08s,opacity .15s,background .15s}.button:active{transform:translateY(1px)}.button:disabled{opacity:.45;cursor:not-allowed}.button-primary{background:var(--navy);color:#fff}.button-primary:hover{background:#1e293b}.button-ghost{background:#fff;color:#334155;border-color:var(--border)}.button-success{background:#15803d;color:#fff}.button-danger{background:#b91c1c;color:#fff}.button-large{min-height:58px;font-size:17px}.text-button{border:0;background:transparent;color:#475569;padding:12px 0 0;font-weight:750;cursor:pointer}.clock-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.inline-message{min-height:24px;margin-top:11px;font-size:14px;font-weight:700}.button-row{gap:9px;flex-wrap:wrap}
.section-head{margin-bottom:16px}.date-actions{gap:8px;flex-wrap:wrap}.date-control{width:auto;min-width:160px}.metric-strip{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:14px}.metric-chip{border:1px solid var(--border);background:#f8fafc;border-radius:12px;padding:9px 12px;font-size:13px;font-weight:750}.stack-list{display:grid;gap:9px}.list-card{border:1px solid var(--border);border-radius:15px;padding:13px 14px;background:#fff}.list-card-title{font-weight:850}.list-meta{font-size:13px;color:#64748b;margin-top:4px;line-height:1.5}.badge{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:850}.badge.admin{background:#ede9fe;color:#6d28d9}.badge.employee{background:#e0f2fe;color:#0369a1}.badge.active{background:#dcfce7;color:#166534}.badge.inactive{background:#fee2e2;color:#991b1b}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}.kpi{border:1px solid var(--border);border-radius:15px;padding:13px 14px;background:#f8fafc}.kpi span{display:block;font-size:12px;color:#64748b;font-weight:700;margin-bottom:5px}.kpi strong{font-size:22px}.status-text{font-size:15px!important}.legend-bar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid #dbeafe;background:#eff6ff;border-radius:14px;margin-bottom:12px;font-size:13px}.attendance-list{display:grid;gap:10px}.attendance-row{border:1px solid var(--border);border-radius:17px;padding:14px;background:#fff;transition:border .15s,background .15s}.attendance-row.absent{background:#fffafa;border-color:#fecaca}.attendance-main{display:grid;grid-template-columns:minmax(190px,1fr) minmax(330px,1.3fr) minmax(180px,.7fr);gap:14px;align-items:center}.employee-check{display:flex;align-items:flex-start;gap:11px}.employee-check input{width:22px;height:22px;min-height:auto;margin-top:1px;accent-color:#0f172a}.employee-name{font-weight:850}.employee-code{font-size:12px;color:#64748b;margin-top:2px}.punch-ref{font-size:12px;color:#64748b;margin-top:6px;line-height:1.45}.ot-block{display:grid;gap:7px}.ot-label{font-size:12px;font-weight:800;color:#475569}.ot-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.ot-chip{border:1px solid #cbd5e1;background:#fff;border-radius:10px;min-height:38px;padding:7px 10px;font-size:12px;font-weight:800;cursor:pointer}.ot-chip.active{background:#0f172a;color:#fff;border-color:#0f172a}.ot-custom-wrap{display:flex;align-items:center;gap:6px}.ot-custom{width:88px;min-height:38px;padding:6px 8px}.attendance-note{min-height:42px}.sticky-actions{position:sticky;bottom:10px;margin-top:14px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:15px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 12px 30px rgba(15,23,42,.08)}
.two-column{display:grid;grid-template-columns:minmax(300px,.75fr) minmax(0,1.25fr);gap:16px}.settings-layout{align-items:start}.payroll-item-row{display:grid;grid-template-columns:minmax(180px,1.3fr) minmax(150px,.9fr) minmax(120px,.7fr) auto;gap:12px;align-items:center;border:1px solid var(--border);border-radius:14px;padding:12px}.payroll-item-name{font-weight:850}.payroll-item-detail{font-size:12px;color:#64748b;margin-top:3px}.money{font-variant-numeric:tabular-nums;font-weight:800}.item-actions{display:flex;gap:7px}
.payroll-kpis{grid-template-columns:repeat(2,minmax(0,180px));justify-content:start}.export-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.export-card{border:1px solid var(--border);border-radius:18px;padding:16px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(180deg,#fff,#f8fafc)}.export-card h3{margin:7px 0 5px}.export-card p{font-size:13px;color:#64748b;line-height:1.5}.table-scroll{overflow:auto;border:1px solid var(--border);border-radius:14px;margin-top:12px}.data-table{border-collapse:separate;border-spacing:0;width:100%;min-width:840px;font-size:13px}.data-table th,.data-table td{padding:10px 11px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);vertical-align:middle}.data-table th:last-child,.data-table td:last-child{border-right:0}.data-table tr:last-child td{border-bottom:0}.data-table th{position:sticky;top:0;background:#0f172a;color:#fff;font-size:12px;text-align:left;z-index:1}.data-table td.numeric,.data-table th.numeric{text-align:right}.data-table .manual-cell{background:#fffbeb}.data-table input.manual-input{min-height:38px;border-radius:9px;padding:6px 8px;text-align:right;min-width:105px}.data-table .total-cell{font-weight:900;background:#ecfdf5}.empty{border:1px dashed #cbd5e1;border-radius:14px;padding:22px;text-align:center;color:#64748b;background:#f8fafc}.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:50;background:#0f172a;color:#fff;border-radius:12px;padding:12px 16px;box-shadow:0 16px 40px rgba(15,23,42,.22);font-weight:750;max-width:min(92vw,520px);text-align:center}
@media(max-width:900px){.attendance-main{grid-template-columns:1fr}.two-column{grid-template-columns:1fr}.export-cards{grid-template-columns:1fr}.payroll-item-row{grid-template-columns:1fr 1fr}.item-actions{grid-column:1/-1}.hero-card{grid-template-columns:1fr}.schedule-box{min-width:0}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){body{background:#f6f8fb}.app-shell{padding:12px 10px 36px}.app-header{padding:4px 2px 12px}.brand-mark{width:40px;height:40px;border-radius:12px}h1{font-size:23px}.panel{padding:14px;border-radius:17px}.auth-card{margin-top:24px;padding:20px;border-radius:20px}.auth-copy h2{font-size:23px}.userbar{border-radius:15px}.section-head{align-items:flex-start;flex-direction:column}.date-actions{width:100%}.date-actions .date-control{flex:1}.date-control{width:100%}.field-pair{grid-template-columns:1fr}.clock-actions{grid-template-columns:1fr}.hero-card{padding:18px}.hero-value{font-size:25px}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi strong{font-size:19px}.legend-bar{display:grid}.sticky-actions{position:static;display:grid}.sticky-actions .button{width:100%}.payroll-item-row{grid-template-columns:1fr}.item-actions{grid-column:auto}.export-card{align-items:flex-start;flex-direction:column}.export-card .button{width:100%}.payroll-kpis{grid-template-columns:1fr 1fr}.table-head{align-items:flex-start;flex-direction:column}.table-head .button{width:100%}}
@media(hover:hover) and (pointer:fine){.tab:hover,.button-ghost:hover,.ot-chip:hover{background:#f1f5f9}.tab.active:hover{background:#0f172a}.ot-chip.active:hover{background:#0f172a;color:#fff}}

/* v3 internal-admin attendance */
.attendance-main{grid-template-columns:minmax(210px,1.05fr) minmax(145px,.55fr) minmax(330px,1.35fr) minmax(180px,.75fr);align-items:center}
.schedule-inline{display:inline-flex;margin-top:7px;padding:4px 8px;border-radius:8px;background:#eff6ff;color:#1e3a8a;font-size:12px;font-weight:800}
.work-hours-block{display:grid;gap:7px}.hours-input-wrap{display:flex;align-items:center;gap:7px}.actual-hours{width:95px;min-height:40px;padding:7px 9px;font-weight:800;text-align:right}.hours-input-wrap span,.ot-custom-wrap span{font-size:12px;color:#64748b;font-weight:700}
.button-danger-soft{background:#fff1f2;color:#be123c;border-color:#fecdd3}.button-danger-soft:hover{background:#ffe4e6}
.list-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0}.permission-grid{display:grid;gap:8px;margin:4px 0}.permission-row{display:grid;grid-template-columns:minmax(110px,1fr) repeat(3,auto);gap:12px;align-items:center;border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:#f8fafc}.check-inline{display:flex;grid-auto-flow:column;align-items:center;gap:6px;font-size:12px;font-weight:750}.check-inline input{width:18px;height:18px;min-height:auto;accent-color:#0f172a}.permission-summary{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.permission-summary span{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:999px;padding:4px 8px;font-size:11px;color:#475569}.permissions-layout{align-items:start}
@media(max-width:1100px){.attendance-main{grid-template-columns:1fr 1fr}.attendance-main>label{grid-column:1/-1}}
@media(max-width:700px){.attendance-main{grid-template-columns:1fr}.attendance-main>label{grid-column:auto}.permission-row{grid-template-columns:1fr 1fr}.permission-row strong{grid-column:1/-1}.list-card-head{align-items:flex-start;flex-direction:column}.item-actions{width:100%;flex-wrap:wrap}.item-actions .button{flex:1}}