@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Rafiki Telematics HRMS — design system
   Tokens → base → layout → components → pages → responsive
   ========================================================================== */

:root {
    --brand-navy: #0E2344;
    --brand-navy-2: #132D57;
    --brand-teal: #14B8A6;
    --primary: #2451D6;
    --primary-hover: #1C43B5;
    --primary-soft: #EBF0FD;
    --canvas: #F4F6FA;
    --surface: #FFFFFF;
    --surface-2: #F8FAFC;
    --border: #E3E8EF;
    --border-strong: #CBD3DF;
    --text: #0F172A;
    --text-2: #334155;
    --muted: #64748B;
    --subtle: #94A3B8;
    --success: #15803D;
    --success-soft: #E8F7EE;
    --warning: #B45309;
    --warning-soft: #FEF4E2;
    --danger: #C62828;
    --danger-soft: #FDECEC;
    --info: #0369A1;
    --info-soft: #E6F3FB;
    --purple: #6D28D9;
    --purple-soft: #F1ECFD;
    --chart-1: #2451D6;
    --chart-2: #14B8A6;
    --chart-3: #F59E0B;
    --chart-4: #8B5CF6;
    --chart-5: #EF4444;
    --chart-6: #64748B;
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .04);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, .14);
    --sidebar-width: 264px;
    --topbar-height: 64px;
    --focus: 0 0 0 3px rgba(36, 81, 214, .22);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 14px; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; background: var(--canvas); color: var(--text); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
svg.icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
:focus-visible { outline: none; box-shadow: var(--focus); }

/* ---------- App shell ---------- */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar-width); display: flex; flex-direction: column; background: linear-gradient(180deg, var(--brand-navy), var(--brand-navy-2)); color: #C9D5E8; overflow-y: auto; transition: transform .25s ease; }
.app-main { flex: 1; min-width: 0; margin-left: var(--sidebar-width); display: flex; flex-direction: column; }
.app-content { flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: 28px 32px 48px; }
.sidebar-backdrop { display: none; }

/* ---------- Sidebar ---------- */
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 22px 20px 18px; color: #fff; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--brand-teal), #0D9488); color: #fff; font-weight: 700; font-size: 18px; box-shadow: 0 4px 12px rgba(20, 184, 166, .35); }
.brand-copy strong { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.2px; }
.brand-copy small { display: block; color: #8FA6C8; font-size: 11px; font-weight: 500; letter-spacing: .3px; }
.sidebar-nav { flex: 1; padding: 6px 12px 16px; }
.nav-section { margin-top: 14px; }
.nav-section-title { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 10px; border: 0; background: none; color: #7F95B8; font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; border-radius: var(--radius-sm); }
.nav-section-title:hover { color: #C9D5E8; }
.nav-section-title .chevron { width: 14px; height: 14px; transition: transform .2s; }
.nav-section.is-collapsed .chevron { transform: rotate(-90deg); }
.nav-section.is-collapsed .nav-links { display: none; }
.nav-links { display: grid; gap: 2px; margin-top: 2px; }
.nav-link { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 8px; color: #C9D5E8; font-weight: 500; font-size: 13.5px; transition: background .15s, color .15s; }
.nav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-link.active { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 3px 0 0 var(--brand-teal); }
.nav-link .icon { width: 17px; height: 17px; opacity: .9; }
.nav-link.is-soon { color: #6F84A6; cursor: default; }
.nav-link.is-soon:hover { background: none; color: #6F84A6; }
.nav-soon { margin-left: auto; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #8FA6C8; font-size: 10px; font-weight: 600; letter-spacing: .3px; }
.sidebar-footer { padding: 14px 16px 18px; border-top: 1px solid rgba(255, 255, 255, .08); }
.sidebar-footer-card { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius); background: rgba(255, 255, 255, .06); color: #fff; }
.sidebar-footer-card small { display: block; color: #8FA6C8; font-size: 11.5px; }
.sidebar-footer-card strong { font-size: 13px; font-weight: 600; }

/* ---------- Topbar ---------- */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px; height: var(--topbar-height); padding: 0 32px; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--border); }
.sidebar-toggle { display: none; place-items: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-2); }
.topbar-chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: 13px; font-weight: 500; white-space: nowrap; }
.topbar-chip .icon { width: 16px; height: 16px; color: var(--muted); }
.topbar-user { display: flex; align-items: center; gap: 10px; padding-left: 4px; }
.topbar-user small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.2; }
.topbar-user strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.2; }

/* ---------- Avatars ---------- */
.avatar { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: 13px; font-weight: 600; object-fit: cover; overflow: hidden; }
.avatar-sm { width: 30px; height: 30px; font-size: 12px; }
.avatar-lg { width: 88px; height: 88px; font-size: 30px; }
.avatar-square { border-radius: var(--radius-sm); }
.avatar-teal { background: #E0F7F4; color: #0F766E; }
.avatar-brand { background: var(--brand-teal); color: #fff; }

/* ---------- Page header ---------- */
.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.page-eyebrow { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.page-eyebrow a { color: var(--muted); }
.page-eyebrow a:hover { color: var(--primary); }
.page-title { font-size: 24px; font-weight: 700; letter-spacing: -.4px; line-height: 1.25; }
.page-subtitle { margin-top: 4px; color: var(--muted); font-size: 14px; }
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 8px; font-size: 13.5px; font-weight: 600; line-height: 1; white-space: nowrap; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
.btn .icon { width: 16px; height: 16px; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 1px 2px rgba(36, 81, 214, .3); }
.btn-primary:hover { background: var(--primary-hover); color: #fff; }
.btn-secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text-2); }
.btn-secondary:hover { background: var(--surface-2); color: var(--text); border-color: var(--subtle); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-sm { height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: 7px; }
.btn[disabled], .btn.is-loading { opacity: .7; pointer-events: none; }
.btn.is-loading::before { content: ''; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.btn.is-loading .icon { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.icon-link { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 7px; color: var(--muted); }
.icon-link:hover { background: var(--primary-soft); color: var(--primary); }
.icon-link .icon { width: 16px; height: 16px; }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 0; }
.card-title { font-size: 15px; font-weight: 600; letter-spacing: -.1px; }
.card-subtitle { margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.card-body { padding: 18px 20px 20px; }
.card-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.card-link .icon { width: 14px; height: 14px; }

/* ---------- KPI cards ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi { display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.kpi-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 11px; }
.kpi-icon .icon { width: 20px; height: 20px; }
.kpi-label { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.kpi-value { display: block; margin-top: 2px; font-size: 24px; font-weight: 700; letter-spacing: -.5px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi-meta { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.tone-blue { background: var(--primary-soft); color: var(--primary); }
.tone-green { background: var(--success-soft); color: var(--success); }
.tone-amber { background: var(--warning-soft); color: var(--warning); }
.tone-red { background: var(--danger-soft); color: var(--danger); }
.tone-purple { background: var(--purple-soft); color: var(--purple); }
.tone-teal { background: #E0F7F4; color: #0F766E; }

/* ---------- Dashboard layout ---------- */
.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

/* ---------- Charts ---------- */
.donut-wrap { display: flex; align-items: center; gap: 24px; }
.donut { position: relative; flex: none; width: 150px; height: 150px; border-radius: 50%; }
.donut::after { content: ''; position: absolute; inset: 22px; border-radius: 50%; background: var(--surface); }
.donut-center { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; text-align: center; }
.donut-center strong { font-size: 24px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.donut-center small { color: var(--muted); font-size: 11.5px; }
.legend { display: grid; gap: 9px; flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; }
.legend li { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.legend li span { flex: 1; min-width: 0; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legend li strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.legend-dot { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.c1 { background: var(--chart-1); } .c2 { background: var(--chart-2); } .c3 { background: var(--chart-3); }
.c4 { background: var(--chart-4); } .c5 { background: var(--chart-5); } .c6 { background: var(--chart-6); }
.bar-list { display: grid; gap: 14px; }
.bar-row-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 13px; }
.bar-row-head span { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row-head strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.bar-track { height: 8px; border-radius: 999px; background: #EEF1F6; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--chart-1); }
.readiness-list { display: grid; gap: 10px; }
.readiness-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); }
.readiness-item .kpi-icon { width: 34px; height: 34px; border-radius: 9px; }
.readiness-item .kpi-icon .icon { width: 16px; height: 16px; }
.readiness-item div { flex: 1; min-width: 0; }
.readiness-item strong { display: block; font-size: 13.5px; font-weight: 600; }
.readiness-item small { color: var(--muted); font-size: 12px; }
.readiness-item b { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Quick actions & lists ---------- */
.quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quick-action { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-weight: 500; font-size: 13px; transition: border-color .15s, background .15s; }
.quick-action:hover { border-color: #BFCDF3; background: #F7F9FE; color: var(--text); }
.quick-action .kpi-icon { width: 34px; height: 34px; border-radius: 9px; }
.quick-action .kpi-icon .icon { width: 16px; height: 16px; }
.person-list { display: grid; }
.person-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); color: var(--text); }
.person-row:last-child { border-bottom: 0; }
.person-row:hover strong { color: var(--primary); }
.person-row div { flex: 1; min-width: 0; }
.person-row strong { display: block; font-size: 13.5px; font-weight: 600; }
.person-row small { color: var(--muted); font-size: 12px; }
.admin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.admin-card { display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text); box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s, transform .15s; }
a.admin-card:hover { border-color: #BFCDF3; box-shadow: var(--shadow); transform: translateY(-1px); color: var(--text); }
.admin-card div { flex: 1; min-width: 0; }
.admin-card strong { display: block; font-size: 14.5px; font-weight: 600; }
.admin-card small { color: var(--muted); font-size: 12.5px; }
.admin-card > .icon { color: var(--subtle); }
.admin-card.is-soon { opacity: .65; }

/* ---------- Toolbar / filters ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.toolbar .search-field { position: relative; flex: 1 1 260px; }
.toolbar .search-field .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--subtle); }
.toolbar .search-field .input { padding-left: 34px; }
.toolbar .select { width: auto; min-width: 150px; flex: 0 1 190px; }
.toolbar-meta { margin-left: auto; color: var(--muted); font-size: 12.5px; }

/* ---------- Tables ---------- */
.table-wrap { position: relative; width: 100%; overflow-x: auto; } /* positioned so visually-hidden labels stay inside the scroll area */
.table th { padding: 11px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .4px; text-align: left; text-transform: uppercase; white-space: nowrap; }
.table td { padding: 13px 16px; border-bottom: 1px solid var(--border); color: var(--text-2); font-size: 13.5px; vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: #FAFBFD; }
.table .col-actions { width: 1%; text-align: right; white-space: nowrap; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.cell-identity { display: flex; align-items: center; gap: 12px; min-width: 200px; }
.cell-identity strong { display: block; color: var(--text); font-weight: 600; }
.cell-identity small { display: block; color: var(--muted); font-size: 12px; }
.cell-identity a strong:hover { color: var(--primary); }
.table-footer { padding: 12px 20px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12.5px; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-muted { background: #EEF1F5; color: var(--muted); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-plain::before { display: none; }

/* ---------- Empty states & alerts ---------- */
.empty-state { display: grid; justify-items: center; gap: 8px; padding: 48px 24px; text-align: center; }
.empty-state .kpi-icon { width: 52px; height: 52px; border-radius: 14px; margin-bottom: 6px; }
.empty-state .kpi-icon .icon { width: 24px; height: 24px; }
.empty-state h3 { font-size: 16px; font-weight: 600; }
.empty-state p { max-width: 440px; color: var(--muted); }
.empty-state .btn { margin-top: 10px; }
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid; border-radius: var(--radius); font-size: 13.5px; margin-bottom: 20px; }
.alert .icon { margin-top: 1px; }
.alert strong { display: block; font-weight: 600; }
.alert p { color: inherit; opacity: .9; }
.alert a { font-weight: 600; text-decoration: underline; color: inherit; }
.alert-warning { background: var(--warning-soft); border-color: #F6D9A8; color: #7C3A06; }
.alert-danger { background: var(--danger-soft); border-color: #F5C2C2; color: #8E1B1B; }
.alert-info { background: var(--info-soft); border-color: #B9DDF2; color: #0B4A6F; }

/* ---------- Forms ---------- */
.form-card { margin-bottom: 20px; }
.form-section + .form-section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.form-section-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; }
.form-section-head .kpi-icon { width: 36px; height: 36px; border-radius: 10px; }
.form-section-head .kpi-icon .icon { width: 17px; height: 17px; }
.form-section-head h2 { font-size: 15.5px; font-weight: 600; }
.form-section-head p { color: var(--muted); font-size: 13px; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px; }
.form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-full { grid-column: 1 / -1; }
.field-label { color: var(--text-2); font-size: 13px; font-weight: 600; }
.req { color: var(--danger); margin-left: 2px; }
.field-hint { color: var(--muted); font-size: 12px; }
.input, .select, .textarea { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 13.5px; transition: border-color .15s, box-shadow .15s; }
.textarea { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; }
.select { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.input::placeholder, .textarea::placeholder { color: var(--subtle); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--subtle); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); outline: none; box-shadow: var(--focus); }
.input:disabled, .select:disabled { background: var(--surface-2); color: var(--muted); }
.input-validation-error, .input-validation-error:hover { border-color: var(--danger) !important; background-color: #FFFBFB; }
.input-validation-error:focus { box-shadow: 0 0 0 3px rgba(198, 40, 40, .15) !important; }
.field-validation-error { display: flex; align-items: center; gap: 5px; color: var(--danger); font-size: 12.5px; font-weight: 500; }
.field-validation-valid { display: none; }
.error-summary { margin-bottom: 20px; padding: 14px 16px; border: 1px solid #F5C2C2; border-radius: var(--radius); background: var(--danger-soft); color: #8E1B1B; font-size: 13.5px; }
.error-summary.validation-summary-valid { display: none; }
.error-summary ul { margin: 6px 0 0; padding-left: 18px; }
.error-summary strong { font-weight: 600; }
.switch { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--text-2); }
.switch input { appearance: none; position: relative; flex: none; width: 36px; height: 20px; margin: 0; border-radius: 999px; background: var(--border-strong); cursor: pointer; transition: background .15s; }
.switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s; }
.switch input:checked { background: var(--primary); }
.switch input:checked::after { transform: translateX(16px); }
.switch small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.form-actions { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 20px; margin-top: 4px; background: rgba(255, 255, 255, .96); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 -4px 16px rgba(15, 23, 42, .05); }
.form-actions .form-actions-note { margin-right: auto; color: var(--muted); font-size: 12.5px; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 14px 12px; border: 0; background: none; color: var(--muted); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.tab .icon { width: 16px; height: 16px; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--primary); }
.tab.active::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--primary); }
.tab-error-count { display: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.tab.has-errors { color: var(--danger); }
.tab.has-errors .tab-error-count { display: inline-block; }
.tab-panel[hidden] { display: none; }
.employee-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.photo-card { position: sticky; top: calc(var(--topbar-height) + 20px); }
.photo-preview { display: grid; place-items: center; aspect-ratio: 1; margin-bottom: 14px; border: 2px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-2); overflow: hidden; color: var(--muted); text-align: center; }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-preview .icon { width: 36px; height: 36px; margin: 0 auto 8px; color: var(--subtle); }
.photo-preview small { display: block; font-size: 12px; }
.photo-actions { display: grid; gap: 8px; }

/* ---------- Toasts ---------- */
.toast-stack { position: fixed; top: 18px; right: 18px; z-index: 100; display: grid; gap: 10px; width: min(400px, calc(100vw - 36px)); }
.toast { display: flex; gap: 12px; align-items: flex-start; padding: 14px 14px 14px 16px; border: 1px solid var(--border); border-left: 4px solid; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-lg); animation: toast-in .25s ease-out; }
.toast.is-leaving { animation: toast-out .2s ease-in forwards; }
.toast-icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; }
.toast-icon .icon { width: 16px; height: 16px; stroke-width: 2.4; }
.toast-body { flex: 1; min-width: 0; }
.toast-body strong { display: block; font-size: 13.5px; font-weight: 600; }
.toast-body p { color: var(--text-2); font-size: 13px; }
.toast-close { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--subtle); }
.toast-close:hover { background: var(--surface-2); color: var(--text); }
.toast-close .icon { width: 14px; height: 14px; }
.toast-success { border-left-color: var(--success); }
.toast-success .toast-icon { background: var(--success-soft); color: var(--success); }
.toast-error { border-left-color: var(--danger); }
.toast-error .toast-icon { background: var(--danger-soft); color: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(16px); } }

/* ---------- Profile ---------- */
.profile-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 24px; }
.profile-hero-main { flex: 1; min-width: 220px; }
.profile-hero h2 { font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
.profile-hero-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; color: var(--muted); font-size: 13px; }
.profile-hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.profile-hero-meta .icon { width: 15px; height: 15px; }
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; margin: 0; }
.detail-grid div { min-width: 0; }
.detail-grid dt { color: var(--muted); font-size: 12px; font-weight: 500; }
.detail-grid dd { margin: 3px 0 0; color: var(--text); font-size: 13.5px; font-weight: 500; overflow-wrap: anywhere; }
.detail-grid dd.is-empty { color: var(--subtle); font-weight: 400; }
.profile-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }

/* ---------- Error page ---------- */
.error-page { max-width: 560px; margin: 40px auto; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .col-4, .col-5, .col-7 { grid-column: span 6; }
    .col-8 { grid-column: span 12; }
    .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
    .app-sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
    .app-main { margin-left: 0; }
    body.sidebar-open .app-sidebar { transform: none; }
    body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(15, 23, 42, .45); }
    .sidebar-toggle { display: grid; }
    .topbar { padding: 0 20px; }
    .app-content { padding: 22px 20px 40px; }
    .employee-layout { grid-template-columns: 1fr; }
    .photo-card { position: static; }
    .photo-card .card-body { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: center; }
    .photo-card .photo-preview { margin: 0; }
    .admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-sections { grid-template-columns: 1fr; }
    .topbar-date { display: none; }
}

@media (max-width: 720px) {
    html { font-size: 14px; }
    .topbar { gap: 10px; padding: 0 16px; }
    .topbar-user div { display: none; }
    .app-content { padding: 18px 16px 32px; }
    .page-title { font-size: 21px; }
    .page-header { align-items: stretch; }
    .page-actions, .page-actions .btn { width: 100%; }
    .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .kpi { flex-direction: column; gap: 10px; padding: 14px; }
    .kpi-value { font-size: 20px; }
    .dash-grid { grid-template-columns: 1fr; }
    .dash-grid > * { grid-column: 1 / -1; }
    .form-grid, .form-grid.cols-2, .detail-grid { grid-template-columns: 1fr; }
    .donut-wrap { flex-direction: column; align-items: stretch; }
    .donut { margin: 0 auto; }
    .quick-grid, .admin-grid { grid-template-columns: 1fr; }
    .toolbar .select { flex: 1 1 140px; }
    .toolbar .btn { flex: 1; }
    .card-header, .card-body { padding-left: 16px; padding-right: 16px; }
    .photo-card .card-body { grid-template-columns: 110px 1fr; }
    .form-actions { justify-content: stretch; }
    .form-actions .btn { flex: 1; }
    .form-actions .form-actions-note { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Additions ---------- */
a.readiness-item { color: var(--text); transition: border-color .15s, background .15s; }
a.readiness-item:hover { border-color: #BFCDF3; background: #F7F9FE; color: var(--text); }
.avatar.tone-purple, .avatar.tone-green, .avatar.tone-teal, .avatar.tone-amber { display: inline-grid; }
.avatar .icon { width: 16px; height: 16px; }
.avatar-lg .icon { width: 36px; height: 36px; }
.employee-layout > * { min-width: 0; }
.photo-preview > div { display: grid; justify-items: center; gap: 2px; padding: 8px; }
.photo-preview strong { display: block; color: var(--text-2); font-size: 13px; }

/* ---------- Sign-in ---------- */
.btn-block { width: 100%; height: 44px; font-size: 14.5px; }
.topbar-logout { margin: 0 0 0 4px; }
.topbar-logout .btn { color: var(--muted); }
.topbar-logout .btn:hover { color: var(--danger); background: var(--danger-soft); }
.topbar-user .avatar-brand { font-size: 12px; font-weight: 700; letter-spacing: .3px; }
.auth-body { background: var(--surface); }
.auth-shell { display: grid; grid-template-columns: minmax(380px, 5fr) 7fr; min-height: 100vh; }
.auth-brand { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 40px 48px; overflow: hidden; background: radial-gradient(circle at 85% 12%, rgba(20, 184, 166, .28), transparent 42%), radial-gradient(circle at 10% 95%, rgba(36, 81, 214, .35), transparent 45%), linear-gradient(160deg, var(--brand-navy), var(--brand-navy-2)); color: #C9D5E8; }
.auth-brand::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(180deg, transparent, #000 40%, transparent); pointer-events: none; }
.auth-brand > * { position: relative; z-index: 1; }
.auth-brand-top { display: flex; align-items: center; gap: 12px; color: #fff; }
.auth-brand-copy h2 { max-width: 420px; color: #fff; font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -.6px; }
.auth-points { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.auth-points li { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.auth-points .icon { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: var(--brand-teal); }
.auth-brand-foot { color: #8FA6C8; font-size: 12px; }
.auth-main { display: grid; place-items: center; padding: 48px 24px; background: var(--canvas); }
.auth-card { width: 100%; max-width: 420px; padding: 40px 36px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-lg); }
.auth-mobile-brand { display: none; align-items: center; gap: 10px; margin-bottom: 28px; font-size: 15px; }
.auth-mobile-brand .brand-mark { width: 34px; height: 34px; font-size: 16px; }
.auth-title { font-size: 24px; font-weight: 700; letter-spacing: -.4px; }
.auth-subtitle { margin-top: 4px; color: var(--muted); font-size: 14px; }
.auth-form { display: grid; gap: 18px; margin-top: 28px; }
.input-icon { position: relative; }
.input-icon > .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--subtle); pointer-events: none; }
.input-icon .input { height: 44px; padding-left: 38px; font-size: 14px; }
.input-icon .input[type="password"], .input-icon .input[data-password] { padding-right: 44px; }
.password-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); }
.password-toggle:hover { background: var(--surface-2); color: var(--text); }
.password-toggle .when-shown, .password-toggle[aria-pressed="true"] .when-hidden { display: none; }
.password-toggle[aria-pressed="true"] .when-shown { display: block; }
.auth-check { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13.5px; cursor: pointer; }
.auth-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
.auth-alert { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; padding: 12px 14px; border-radius: var(--radius); font-size: 13.5px; font-weight: 500; }
.auth-alert .icon { margin-top: 1px; }
.auth-alert-error { border: 1px solid #F5C2C2; background: var(--danger-soft); color: #8E1B1B; }
.auth-alert-info { border: 1px solid #BDE5CB; background: var(--success-soft); color: var(--success); }
.auth-help { display: flex; align-items: flex-start; gap: 8px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12.5px; }
.auth-help .icon { width: 16px; height: 16px; margin-top: 1px; }

@media (max-width: 900px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-brand { display: none; }
    .auth-mobile-brand { display: flex; }
    .auth-main { align-items: start; padding: 32px 16px; }
    .auth-card { padding: 28px 22px; box-shadow: var(--shadow); }
}
@media (max-width: 720px) {
    .topbar-logout .btn span { display: none; }
}

/* ---------- Multi-company ---------- */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.small { font-size: 12px; }
.inline-form { display: inline; margin: 0; }
.link-button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--primary); font-size: inherit; font-weight: 500; }
.link-button:hover { color: var(--primary-hover); text-decoration: underline; }
.auth-help a { display: inline-flex; align-items: center; gap: 6px; }
.chip { display: inline-flex; align-items: center; margin: 2px 4px 2px 0; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
.cell-error { display: block; max-width: 340px; margin-top: 4px; color: var(--danger); font-size: 12px; line-height: 1.35; }
.col-actions .muted .icon { width: 14px; height: 14px; vertical-align: -2px; }
.topbar-spacer { margin-left: auto; }
.topbar-company { position: relative; display: flex; align-items: center; margin: 0; }
.topbar-company > .icon { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.topbar-company-select { height: 38px; max-width: 240px; padding: 0 32px 0 34px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 14px; font-size: 13px; font-weight: 600; color: var(--text); appearance: none; cursor: pointer; text-overflow: ellipsis; }
.topbar-company-select:focus { border-color: var(--primary); outline: none; box-shadow: var(--focus); }
.topbar-icon-button { width: 32px; padding: 0; color: var(--muted); }
.company-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 6px; }
.company-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: border-color .15s, background .15s; }
.company-option.is-selected { border-color: #BFCDF3; background: var(--primary-soft); }
.company-option-main { display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; }
.company-option-main strong { display: block; font-size: 13.5px; }
.company-option-main small { display: block; color: var(--muted); font-size: 12px; }
.company-option input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--primary); }
.company-option-default { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; cursor: pointer; }
.company-option-default:has(input:disabled) { opacity: .45; cursor: default; }
button.admin-card { width: 100%; border: 1px solid var(--border); font: inherit; text-align: left; }
.company-card.is-current { border-color: var(--primary); box-shadow: var(--focus); }
.page-actions form { display: inline-flex; }
@media (max-width: 1100px) { .topbar-company-select { max-width: 170px; } }
@media (max-width: 720px) { .topbar-company-select { max-width: 130px; } .topbar-icon-button { display: none; } }
/* Components that set display (grid, flex) must still honour the hidden attribute. */
[hidden] { display: none !important; }

/* ---------- Attendance module ---------- */
.field-span-2 { grid-column: span 2; }
.mono-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-transform: uppercase; }
.block { display: block; }
.table tfoot th { padding: 12px 16px; border-top: 1px solid var(--border-strong); background: var(--surface-2); font-size: 13px; }

/* Register: setup bar */
.register-setup { margin-bottom: 16px; }
.register-filters { display: grid; grid-template-columns: 180px minmax(220px, 1fr) auto; gap: 16px; align-items: end; padding: 16px 20px; }
.segmented { margin: 0; padding: 0; border: 0; min-width: 0; }
.segmented legend { padding: 0; margin-bottom: 6px; }
.segmented-options { display: inline-flex; padding: 3px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-2); }
.segmented-options label { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 7px; color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.segmented-options label .icon { width: 16px; height: 16px; }
.segmented-options input { position: absolute; opacity: 0; pointer-events: none; }
.segmented-options label.is-active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }
.segmented-options label:has(input:focus-visible) { box-shadow: var(--focus); }

/* Register: summary strip (also used by reports) */
.register-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.register-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.register-stats span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.register-stats span .icon { width: 15px; height: 15px; }
.register-stats strong { font-size: 22px; font-weight: 700; letter-spacing: -.4px; }
.register-stats .is-good span .icon { color: var(--success); }
.register-stats .is-warn span .icon { color: var(--warning); }
.register-stats .is-bad span .icon { color: var(--danger); }

/* Register: grid */
.register-card { overflow: visible; }
.register-toolbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 20px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.register-toolbar .search-field { flex: 1 1 260px; max-width: 420px; }
.register-bulk { display: flex; flex-direction: column; gap: 4px; }
.register-bulk .field-label { font-size: 12px; color: var(--muted); }
.register-bulk-row { display: flex; gap: 8px; }
.register-bulk-row .input { width: 130px; }
.register-grid { display: grid; }
.register-head, .register-row { display: grid; grid-template-columns: 56px minmax(200px, 2fr) minmax(160px, 1.4fr) 140px minmax(130px, 1fr); align-items: center; gap: 0 12px; padding: 0 20px 0 8px; }
.register-head { position: sticky; top: var(--topbar-height); z-index: 4; min-height: 42px; border-bottom: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; }
.register-row { min-height: 58px; border-bottom: 1px solid var(--border); transition: background .12s; }
.register-row:last-of-type { border-bottom: 0; }
.register-row:hover { background: #FAFBFD; }
.register-row.is-selected { background: #F2F6FE; }
.register-row.is-selected:hover { background: #EBF0FD; }
.register-row.is-locked { opacity: .62; }
.register-row.is-removing { background: var(--danger-soft); }
.register-check { display: grid; place-items: center; align-self: stretch; cursor: pointer; }
.register-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.register-check input:disabled { cursor: not-allowed; }
.register-person { display: flex; flex-direction: column; min-width: 0; padding: 8px 0; cursor: pointer; }
.register-person strong { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.register-person small, .register-col-dept small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.register-col-dept { display: flex; flex-direction: column; min-width: 0; font-size: 13px; color: var(--text-2); }
.register-col-dept > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.register-time .input { height: 38px; width: 100%; max-width: 132px; font-variant-numeric: tabular-nums; }
.register-col-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.register-col-status .badge .icon { width: 13px; height: 13px; }
.register-remove-note { color: var(--danger); font-size: 12px; font-weight: 600; }
.register-empty { padding: 28px; color: var(--muted); text-align: center; }
.register-savebar { position: sticky; bottom: 12px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 12px 16px 12px 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .97); box-shadow: 0 8px 24px rgba(15, 23, 42, .12); }
.register-savebar-info { color: var(--text-2); font-size: 13.5px; }
.register-savebar-info strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.register-dirty { color: var(--warning); font-weight: 600; }
.register-savebar-actions { display: flex; gap: 8px; }
.register-savebar-actions .btn-primary { min-width: 170px; height: 44px; }
.alert ul { margin: 6px 0 0; padding-left: 18px; }

/* Dashboard */
.hero-figure strong { display: block; font-size: 52px; font-weight: 700; letter-spacing: -1.5px; line-height: 1; }
.hero-figure strong span { font-size: 26px; margin-left: 2px; color: var(--muted); }
.hero-figure small { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
.status-bar { display: flex; gap: 2px; height: 12px; margin: 18px 0 12px; border-radius: 6px; background: var(--border); overflow: hidden; }
.status-seg { min-width: 4px; height: 100%; }
.seg-good { background: #15803D; }
.seg-warn { background: #D97706; }
.seg-bad { background: #C62828; }
.status-legend { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.status-legend li { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; }
.status-legend li i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.status-legend li .icon { width: 14px; height: 14px; color: var(--muted); }
.status-legend li strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.mini-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini-metrics > * { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); }
.mini-metrics span { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.mini-metrics strong { font-size: 18px; font-weight: 700; }
.mini-metrics a.is-alert { border-color: #F5C2C2; background: var(--danger-soft); }
.mini-metrics a.is-alert strong { color: var(--danger); }
.svg-chart { margin: 0; }
.svg-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-axis { stroke: var(--border-strong); stroke-width: 1; }
.chart-tick { fill: var(--muted); font-size: 11px; font-family: inherit; }
.chart-value { fill: var(--text); font-size: 12px; font-weight: 600; font-family: inherit; }
.chart-bar { fill: var(--primary); }
.chart-line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-area { fill: var(--primary); opacity: .1; }
.chart-dot { fill: var(--primary); stroke: var(--surface); stroke-width: 2; }
.chart-hit { fill: transparent; cursor: default; outline: none; }
.chart-hit:hover, .chart-hit:focus-visible { fill: rgba(36, 81, 214, .06); }
.chart-table { margin-top: 8px; font-size: 12.5px; }
.chart-table summary { color: var(--muted); cursor: pointer; }
.chart-table table { margin-top: 8px; }
.chart-tooltip { position: fixed; z-index: 100; max-width: 260px; padding: 7px 10px; border-radius: 7px; background: var(--brand-navy); color: #fff; font-size: 12.5px; font-weight: 500; pointer-events: none; box-shadow: var(--shadow-lg); }
.meter-list { display: grid; gap: 14px; }
.meter-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 13px; }
.meter-head span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meter-head strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.meter-track { height: 8px; border-radius: 4px; background: var(--primary-soft); overflow: hidden; }
.meter-fill { height: 100%; border-radius: 4px; background: var(--primary); }
.people-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.people-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.people-list li:last-child { border-bottom: 0; }
.people-list li > div { min-width: 0; flex: 1; }
.people-list strong { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-list small { display: block; color: var(--muted); font-size: 12px; }
.card-body > .muted .icon { width: 16px; height: 16px; vertical-align: -3px; color: var(--success); }

/* Reports */
.report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.report-filters { align-items: end; }
.filter-field { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.filter-field > span { color: var(--muted); font-size: 12px; font-weight: 600; }
.filter-wide { min-width: 260px; flex: 1; }
.report-note { display: flex; gap: 8px; align-items: flex-start; margin: -4px 0 14px; color: var(--muted); font-size: 12.5px; }
.report-note .icon { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.report-table td .block { font-size: 12px; }

@media (max-width: 1100px) {
    .register-head, .register-row { grid-template-columns: 52px minmax(180px, 2fr) 132px minmax(110px, 1fr); }
    .register-col-dept { display: none; }
}
@media (max-width: 720px) {
    .register-filters { grid-template-columns: 1fr; padding: 14px 16px; }
    .segmented-options { display: flex; }
    .segmented-options label { flex: 1; justify-content: center; padding: 0 8px; font-size: 12.5px; }
    .register-toolbar { padding: 12px 16px; }
    .register-bulk-row .input { width: auto; flex: 1; }
    .register-head { display: none; }
    .register-row { grid-template-columns: 44px 1fr 112px; grid-template-areas: "check person time" "check status status"; padding: 8px 12px 8px 4px; gap: 2px 8px; }
    .register-row > .register-check { grid-area: check; }
    .register-row > .register-person { grid-area: person; padding: 0; }
    .register-row > .register-time { grid-area: time; }
    .register-row > .register-col-status { grid-area: status; }
    .register-time .input { max-width: none; }
    .register-savebar { bottom: 8px; padding: 10px 12px; }
    .register-savebar-actions { width: 100%; }
    .register-savebar-actions .btn-primary { flex: 1; min-width: 0; }
    .hero-figure strong { font-size: 44px; }
    .report-grid { grid-template-columns: 1fr; }
    .filter-field, .filter-wide { min-width: 0; flex: 1 1 100%; }
    .field-span-2 { grid-column: auto; }
}
@media print {
    .app-sidebar, .topbar, .no-print, .toast-stack, .sidebar-backdrop { display: none !important; }
    .app-main { margin-left: 0; }
    .app-content { padding: 0; max-width: none; }
    body { background: #fff; }
    .card, .register-stats > div { box-shadow: none; }
    .table th, .table td { padding: 6px 8px; font-size: 11px; }
    .badge { border: 1px solid currentColor; }
}
/* Grid items must be allowed to shrink below their content (wide tables and charts scroll inside their card). */
.dash-grid > * { min-width: 0; }
@media (max-width: 720px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }
/* Report filters: labelled fields in a toolbar; controls keep their normal height. */
.report-filters .filter-field > .select, .report-filters .filter-field > .input { flex: none; width: 100%; height: 40px; }
.report-filters .btn { flex: none; }

/* ---------- Work calendar, periods, change log ---------- */
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #A61F1F; color: #fff; }
.calendar-settings { display: grid; gap: 18px; }
.calendar-settings fieldset { margin: 0; padding: 0; border: 0; }
.calendar-settings legend { margin-bottom: 8px; padding: 0; }
.day-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.day-chip input { position: absolute; opacity: 0; pointer-events: none; }
.day-chip span { display: inline-grid; place-items: center; min-width: 48px; height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text-2); font-size: 13px; font-weight: 600; cursor: pointer; }
.day-chip input:checked + span { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.day-chip input:focus-visible + span { box-shadow: var(--focus); }
.day-chip input:disabled + span { cursor: default; opacity: .8; }
.calendar-rules { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); color: var(--text-2); font-size: 12.5px; }
.calendar-rules .icon { width: 14px; height: 14px; vertical-align: -2px; color: var(--muted); }
.year-nav { display: inline-flex; align-items: center; gap: 4px; }
.holiday-add { align-items: end; }
tr.is-past td { color: var(--muted); }
.reopen { display: inline-block; position: relative; }
.reopen summary { list-style: none; }
.reopen summary::-webkit-details-marker { display: none; }
.reopen-form { position: absolute; right: 0; z-index: 10; display: grid; gap: 8px; width: 300px; margin-top: 6px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-lg); }
.register-reason { margin-bottom: 12px; padding: 14px 20px; border-color: #F6D9A8; background: #FFFBF2; }
.col-5 { grid-column: span 5; }
.col-7 { grid-column: span 7; }
@media (max-width: 1100px) { .col-5, .col-7 { grid-column: 1 / -1; } }
.restore-help summary { cursor: pointer; padding-bottom: 18px; }
pre.code { overflow-x: auto; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--brand-navy); color: #E2E8F0; font-size: 12px; line-height: 1.6; }

/* ---------- Employee import ---------- */
.toast-warning { border-left-color: var(--warning); }
.toast-warning .toast-icon { background: var(--warning-soft); color: var(--warning); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.import-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.import-main, .import-side { display: grid; gap: 20px; min-width: 0; }
.dropzone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 20px; border: 2px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-2); text-align: center; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.dropzone:hover, .dropzone.is-dragover { border-color: var(--primary); background: var(--primary-soft); }
.dropzone.is-dragover { box-shadow: var(--focus); }
.dropzone:focus-within { border-color: var(--primary); box-shadow: var(--focus); }
.dropzone-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dropzone-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 16px; background: var(--surface); color: var(--primary); box-shadow: var(--shadow); }
.dropzone-icon .icon { width: 26px; height: 26px; }
.dropzone-title { font-size: 15px; font-weight: 600; color: var(--text); }
.dropzone-text { color: var(--muted); font-size: 13px; }
.dropzone-browse { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.dropzone-types { display: flex; gap: 6px; margin-top: 6px; }
.file-chip { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.file-chip[hidden], .upload-progress[hidden] { display: none; }
.file-chip-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 9px; background: var(--success-soft); color: var(--success); }
.file-chip-body { flex: 1; min-width: 0; display: grid; }
.file-chip-body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.file-chip-body small { color: var(--muted); font-size: 12px; }
.upload-progress { margin-top: 14px; }
.upload-progress-meta { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.upload-progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: #E6EBF2; }
.upload-progress-bar { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--brand-teal)); transition: width .2s ease; }
.upload-progress.is-processing .upload-progress-bar { width: 35% !important; animation: import-indeterminate 1.2s ease-in-out infinite; }
@keyframes import-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.import-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.import-hint { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.import-hint .icon { width: 15px; height: 15px; color: var(--success); }
.import-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.import-stat { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.import-ratio { height: 6px; margin: 14px 0 4px; overflow: hidden; border-radius: 999px; background: var(--danger-soft); }
.import-ratio-ok { display: block; height: 100%; background: var(--success); }
.import-result .alert { margin: 14px 0 0; }
.import-result .card-subtitle { display: flex; align-items: center; gap: 4px; }
.import-result .card-subtitle .icon { width: 13px; height: 13px; }
.import-errors-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 10px; }
.import-errors-head h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.import-errors { max-height: 420px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.import-errors thead th { position: sticky; top: 0; z-index: 1; }
.import-result-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.import-steps { display: grid; gap: 16px; padding: 0; list-style: none; }
.import-steps li { display: flex; gap: 12px; }
.import-steps strong { display: block; font-size: 13.5px; }
.import-steps p { color: var(--muted); font-size: 12.5px; }
.import-step-no { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: 12.5px; font-weight: 700; }
.column-list { display: grid; max-height: 520px; overflow: auto; padding: 0; margin: 0 -4px; list-style: none; }
.column-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.column-list li:last-child { border-bottom: 0; }
.column-list li > span { display: grid; min-width: 0; }
.column-list code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; color: var(--text); }
.column-list small { overflow: hidden; color: var(--muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) { .import-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .import-stats { grid-template-columns: minmax(0, 1fr); } .dropzone { padding: 28px 16px; } }

/* ==========================================================================
   Workforce analytics dashboard (2026-10-02): clickable KPIs, drill-down drawer, attendance matrix, releases, health
   ========================================================================== */
:root {
    --mx-present: #DCFCE7; --mx-present-ink: #166534;
    --mx-absent: #FEE2E2;  --mx-absent-ink: #B91C1C;
    --mx-late: #FFEDD5;    --mx-late-ink: #C2410C;
    --mx-leave: #DBEAFE;   --mx-leave-ink: #1D4ED8;
    --mx-off: #E5E7EB;     --mx-off-ink: #4B5563;
    --mx-holiday: #EDE9FE; --mx-holiday-ink: #6D28D9;
    --ease-out: cubic-bezier(.2, .8, .2, 1);
}
.text-warning { color: var(--warning); }

/* KPI cards that open a drill-down */
.kpi-action { position: relative; width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: border-color .18s, box-shadow .18s, transform .18s var(--ease-out); animation: kpi-in .4s var(--ease-out) both; }
.kpi-action:nth-child(2) { animation-delay: .04s; } .kpi-action:nth-child(3) { animation-delay: .08s; } .kpi-action:nth-child(4) { animation-delay: .12s; }
.kpi-action::after { content: ''; position: absolute; inset: auto 0 0 0; height: 3px; background: currentColor; opacity: 0; transition: opacity .18s; }
.kpi-action:hover { border-color: #BFCDF3; box-shadow: var(--shadow); transform: translateY(-2px); }
.kpi-action:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.kpi-action:focus-visible { box-shadow: var(--focus), var(--shadow); }
.kpi-text { display: flex; flex-direction: column; min-width: 0; }
.kpi-more { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-size: 12px; font-weight: 600; opacity: 0; transform: translateX(-4px); transition: opacity .18s, transform .18s var(--ease-out); }
.kpi-more .icon { width: 13px; height: 13px; }
.kpi-action:hover .kpi-more, .kpi-action:focus-visible .kpi-more { opacity: 1; transform: none; }
@keyframes kpi-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (hover: none) { .kpi-more { opacity: 1; transform: none; } }

/* Drill-down drawer */
body.drawer-open { overflow: hidden; }
.drawer { position: fixed; inset: 0; z-index: 90; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .42); opacity: 0; transition: opacity .22s; }
.drawer-panel { position: absolute; inset: 0 0 0 auto; display: flex; flex-direction: column; width: min(1040px, 100vw); background: var(--surface); box-shadow: -12px 0 40px rgba(15, 23, 42, .18); transform: translateX(100%); transition: transform .26s var(--ease-out); outline: none; }
.drawer.is-open .drawer-backdrop { opacity: 1; }
.drawer.is-open .drawer-panel { transform: none; }
.drawer-header { display: flex; align-items: flex-start; gap: 14px; padding: 20px 24px 16px; border-bottom: 1px solid var(--border); }
.drawer-header > div { flex: 1; min-width: 0; }
.drawer-header .page-eyebrow { margin-bottom: 2px; }
.drawer-title { font-size: 19px; font-weight: 700; letter-spacing: -.3px; }
.drawer-close { width: 36px; padding: 0; }
.drawer-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 24px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.drawer-toolbar .search-field { position: relative; flex: 1 1 260px; }
.drawer-toolbar .search-field .icon, .matrix-toolbar .search-field .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--subtle); }
.drawer-toolbar .search-field .input, .matrix-toolbar .search-field .input { padding-left: 34px; }
.drawer-toolbar .select { width: auto; flex: 0 1 180px; min-width: 140px; }
.drawer-exports, .matrix-exports { display: flex; gap: 8px; margin-left: auto; }
.drawer-body { position: relative; flex: 1; overflow: auto; }
.drawer-table thead th { position: sticky; top: 0; z-index: 2; }
.drawer.is-loading .drawer-body::after { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .55); }
.drawer.is-loading .drawer-body::before { content: ''; position: absolute; top: 80px; left: 50%; z-index: 3; width: 26px; height: 26px; margin-left: -13px; border: 3px solid var(--primary); border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.drawer-table tbody tr { animation: row-in .2s ease-out both; }
@keyframes row-in { from { opacity: 0; } to { opacity: 1; } }
.drawer-empty { display: grid; justify-items: center; gap: 10px; padding: 56px 24px; color: var(--text-2); text-align: center; }
.drawer-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 12px 24px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12.5px; }
.drawer-size { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.drawer-size .select { width: 76px; height: 32px; }
.sort-button { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.sort-button:hover, .sort-button.is-active { color: var(--text); }
.sort-arrow { font-size: 9px; opacity: .55; }
.sort-button.is-active .sort-arrow { opacity: 1; color: var(--primary); }
th.num .sort-button { flex-direction: row-reverse; }
.pager { display: flex; gap: 4px; }
.pager-btn { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.pager-btn:hover:not([disabled]) { border-color: var(--subtle); color: var(--text); }
.pager-btn.is-current { border-color: var(--primary); background: var(--primary); color: #fff; }
.pager-btn[disabled] { opacity: .4; cursor: default; }
.pager-gap { align-self: center; padding: 0 2px; }

/* Attendance matrix */
.matrix-card { margin-top: 4px; overflow: hidden; animation: kpi-in .45s var(--ease-out) .1s both; }
.matrix-header { flex-wrap: wrap; padding-bottom: 14px; }
.matrix-toolbar { align-items: end; background: var(--surface-2); border-top: 1px solid var(--border); }
.matrix-toolbar .filter-field > .select { width: 100%; }
.matrix-toolbar .search-field { position: relative; display: block; flex: none; }
.matrix-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 12px 20px; border-bottom: 1px solid var(--border); }
.matrix-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; color: var(--text-2); font-size: 12.5px; }
.matrix-legend li { display: inline-flex; align-items: center; gap: 6px; }
.matrix-legend i { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 3px; border-radius: 5px; font-size: 10.5px; font-style: normal; font-weight: 700; }
.matrix-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: 12.5px; }
.matrix-stats strong { color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; }
.matrix-scroll { position: relative; max-height: min(68vh, 760px); overflow: auto; overscroll-behavior: contain; }
.matrix-scroll:focus-visible { box-shadow: inset var(--focus); }
.matrix { --mx-days: 31; --mx-name: 230px; --mx-cell: 30px; min-width: max-content; font-size: 12px; }
.mx-row { display: grid; grid-template-columns: var(--mx-name) repeat(var(--mx-days), var(--mx-cell)) 44px 44px 44px 58px; height: 36px; align-items: stretch; border-bottom: 1px solid var(--border); }
.mx-row:not(.mx-head):hover > * { background-color: #F4F7FD; }
.mx-row:not(.mx-head):hover > .mx-c { filter: saturate(1.25); }
.mx-head { position: sticky; top: 0; z-index: 4; height: 44px; background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 600; }
.mx-head > * { background: var(--surface-2); }
.mx-name { position: sticky; left: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 0 12px 0 16px; background: var(--surface); border-right: 1px solid var(--border); box-shadow: 4px 0 8px -6px rgba(15, 23, 42, .18); }
.mx-name a { overflow: hidden; color: var(--text); font-size: 12.5px; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.mx-name a:hover { color: var(--primary); text-decoration: underline; }
.mx-name small { overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.mx-head .mx-name { z-index: 5; flex-direction: row; align-items: center; justify-content: flex-start; gap: 4px; border: 0; border-right: 1px solid var(--border); font: inherit; text-transform: uppercase; letter-spacing: .4px; cursor: pointer; }
.mx-day { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mx-day small { font-size: 9.5px; font-weight: 500; opacity: .75; }
.mx-day.is-weekend { color: var(--subtle); }
.mx-day.is-holiday { color: var(--mx-holiday-ink); }
.mx-day.is-holiday::after { content: ''; width: 4px; height: 4px; margin-top: 2px; border-radius: 50%; background: currentColor; }
.mx-day.is-today { background: var(--primary-soft); color: var(--primary); }
.mx-c { display: grid; place-items: center; margin: 4px 2px; border-radius: 5px; font-size: 10.5px; font-weight: 700; cursor: default; transition: transform .12s, box-shadow .12s; }
.mx-c:hover { transform: scale(1.12); box-shadow: 0 2px 6px rgba(15, 23, 42, .18); position: relative; z-index: 1; }
.mx-c.is-today { outline: 2px solid var(--primary); outline-offset: 1px; }
.mx-P { background: var(--mx-present); color: var(--mx-present-ink); }
.mx-A { background: var(--mx-absent); color: var(--mx-absent-ink); }
.mx-L { background: var(--mx-late); color: var(--mx-late-ink); }
.mx-V { background: var(--mx-leave); color: var(--mx-leave-ink); }
.mx-O { background: var(--mx-off); color: var(--mx-off-ink); }
.mx-H { background: var(--mx-holiday); color: var(--mx-holiday-ink); }
.mx-T { background: transparent; color: var(--subtle); box-shadow: inset 0 0 0 1px var(--border-strong); }
.mx-F { background: transparent; }
.mx-N { background: transparent; color: var(--border-strong); }
.matrix-legend .mx-T { box-shadow: inset 0 0 0 1px var(--border-strong); }
.mx-total { display: grid; place-items: center; border-left: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.mx-head .mx-total { border-top: 0; border-right: 0; border-bottom: 0; font: inherit; color: inherit; cursor: pointer; }
.mx-sort span { margin-left: 2px; color: var(--primary); font-size: 8px; }
.mx-sort.is-active { color: var(--text); }
.mx-t2.has-absence { color: var(--mx-absent-ink); }
.mx-t4.is-good { color: var(--success); }
.mx-t4.is-warn { color: var(--warning); }
.mx-t4.is-bad { color: var(--danger); }
.mx-spacer { pointer-events: none; }
.matrix-state { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 180px; padding: 32px; color: var(--text-2); text-align: center; }
.matrix-state[hidden] { display: none; }
.matrix-spinner { width: 20px; height: 20px; border: 3px solid var(--primary); border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.matrix-footer { font-size: 12px; }
.matrix-tooltip { max-width: 340px; }
@media (min-width: 1025px) {
    /* Totals stay visible at the right edge while days scroll underneath. */
    .mx-total { position: sticky; z-index: 2; }
    .mx-t4 { right: 0; } .mx-t3 { right: 58px; } .mx-t2 { right: 102px; } .mx-t1 { right: 146px; box-shadow: -4px 0 8px -6px rgba(15, 23, 42, .18); }
    .mx-head .mx-total { z-index: 5; }
}
@media (max-width: 720px) {
    .matrix { --mx-name: 150px; --mx-cell: 28px; }
    .mx-name { padding-left: 12px; }
    .matrix-exports, .drawer-exports { margin-left: 0; width: 100%; }
    .matrix-exports .btn, .drawer-exports .btn { flex: 1; }
    .drawer-header, .drawer-toolbar, .drawer-footer { padding-left: 16px; padding-right: 16px; }
    .drawer-toolbar .select { flex: 1 1 45%; }
    .drawer-size { margin-left: 0; }
}

/* New-version banner (open tab older than the deployed build) and "What's new" dialog */
.update-banner { position: fixed; left: 50%; bottom: 20px; z-index: 120; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; width: min(720px, calc(100vw - 32px)); padding: 14px 16px 14px 18px; border-radius: var(--radius-lg); background: var(--brand-navy); color: #E2E8F0; box-shadow: var(--shadow-lg); transform: translateX(-50%); animation: banner-in .35s var(--ease-out); }
.update-banner .icon { color: var(--brand-teal); }
.update-banner-text { flex: 1; min-width: 220px; font-size: 13px; }
.update-banner-text strong { display: block; color: #fff; font-size: 14px; }
.update-banner-versions { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; color: #A9BAD3; font-size: 12.5px; }
.update-banner-versions b { color: #fff; font-weight: 600; }
.update-banner .btn-ghost { color: #C9D5E8; }
.update-banner .btn-ghost:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.update-banner.is-mandatory::before { content: ''; position: fixed; inset: -100vh -100vw; z-index: -1; background: rgba(15, 23, 42, .5); }
@keyframes banner-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.whats-new { width: min(560px, calc(100vw - 32px)); max-height: min(80vh, 720px); padding: 0; border: 0; border-radius: 18px; box-shadow: var(--shadow-lg); color: var(--text); }
.whats-new::backdrop { background: rgba(15, 23, 42, .5); }
.whats-new[open] { animation: kpi-in .3s var(--ease-out); }
.whats-new-head { padding: 24px 24px 18px; background: radial-gradient(circle at 90% 0, rgba(20, 184, 166, .3), transparent 50%), linear-gradient(160deg, var(--brand-navy), var(--brand-navy-2)); color: #C9D5E8; }
.whats-new-head h2 { margin-top: 6px; color: #fff; font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
.whats-new-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(20, 184, 166, .18); color: #5EEAD4; font-size: 11.5px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; }
.version-compare { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 14px; font-size: 13px; }
.version-compare b { color: #fff; font-size: 15px; }
.whats-new-body { max-height: 46vh; overflow: auto; padding: 8px 24px 4px; }
.whats-new-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 16px 24px 20px; border-top: 1px solid var(--border); }
.whats-new-actions a { margin-right: auto; align-self: center; font-size: 13px; font-weight: 600; }
.release { padding: 16px 0; border-bottom: 1px solid var(--border); }
.release:last-child { border-bottom: 0; }
.release-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 8px; }
.release-head h3 { font-size: 15px; font-weight: 600; }
.release-head time { color: var(--muted); font-size: 12.5px; }
.release-notes { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--text-2); }
.release-notes li { display: flex; align-items: flex-start; gap: 10px; }
.note-kind { flex: none; min-width: 74px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; text-align: center; }
.note-new { background: var(--success-soft); color: var(--success); }
.note-improved { background: var(--primary-soft); color: var(--primary); }
.note-fixed { background: var(--warning-soft); color: var(--warning); }
.note-security { background: var(--purple-soft); color: var(--purple); }
.sidebar-version { display: inline-flex; align-items: center; gap: 4px; margin-top: 1px; color: #8FA6C8; font-size: 11.5px; }
.sidebar-version:hover { color: #fff; }
.release-list .release { padding: 20px; }
.release-list .release + .release { border-top: 1px solid var(--border); }

/* System health */
.health-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.health-list { display: grid; gap: 0; margin: 0; }
.health-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.health-list > div:last-child { border-bottom: 0; }
.health-list dt { color: var(--muted); }
.health-list dd { margin: 0; color: var(--text); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.status-dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.status-dot.is-down { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
@media (max-width: 1100px) { .health-grid { grid-template-columns: minmax(0, 1fr); } }
@media print { .update-banner, .whats-new { display: none !important; } }
.drawer-table td { white-space: nowrap; }

/* ==========================================================================
   Navigation identity & branding (2026-10-02, v1.1.0 update)
   ========================================================================== */
/* Brand: "Rafiki Telematics" with a product mark, no tagline */
.sidebar-brand { gap: 12px; padding: 22px 20px 20px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.brand-mark { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(140deg, #2DD4BF 0%, #0D9488 55%, #0F766E 100%); font-size: 19px; font-weight: 800; letter-spacing: -.5px; box-shadow: 0 6px 16px rgba(13, 148, 136, .35), inset 0 1px 0 rgba(255, 255, 255, .25); }
.brand-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1.1; }
.brand-copy strong { font-size: 16.5px; font-weight: 800; letter-spacing: -.3px; color: #fff; }
.brand-product { display: inline-block; padding: 2px 7px; border-radius: 5px; background: rgba(45, 212, 191, .14); color: #5EEAD4; font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; }

/* Section identities: one accent per major area, used only for the title, its icon, the rail and the active item.
   Attendance teal · Masters slate blue · HR violet · Payroll amber · Administration neutral. */
.nav-section { --accent: #94A3B8; --accent-soft: rgba(148, 163, 184, .14); --accent-rail: rgba(148, 163, 184, .22); }
.nav-section[data-nav-section="attendance"] { --accent: #2DD4BF; --accent-soft: rgba(45, 212, 191, .13); --accent-rail: rgba(45, 212, 191, .28); }
.nav-section[data-nav-section="masters"] { --accent: #93C5FD; --accent-soft: rgba(147, 197, 253, .13); --accent-rail: rgba(147, 197, 253, .26); }
.nav-section[data-nav-section="hr"] { --accent: #C4B5FD; --accent-soft: rgba(196, 181, 253, .13); --accent-rail: rgba(196, 181, 253, .26); }
.nav-section[data-nav-section="payroll"] { --accent: #FCD34D; --accent-soft: rgba(252, 211, 77, .12); --accent-rail: rgba(252, 211, 77, .24); }
.nav-section-title { justify-content: flex-start; gap: 9px; color: #8FA6C8; transition: color .15s, background .15s; }
.nav-section-title .chevron { margin-left: auto; }
.nav-section-title:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.nav-section-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); }
.nav-section-icon .icon { width: 13px; height: 13px; stroke-width: 2.1; }
.nav-section:not(.is-collapsed) > .nav-section-title { color: #DCE6F5; }
/* Expanded: a thin rail in the section colour ties its links together. */
.nav-section .nav-links { margin-left: 20px; padding-left: 8px; border-left: 1px solid var(--accent-rail); }
.nav-link { padding: 8px 10px; }
.nav-link:hover { background: rgba(255, 255, 255, .06); }
.nav-link:hover .icon { color: var(--accent); opacity: 1; }
.nav-link.active { background: var(--accent-soft); color: #fff; box-shadow: inset 2px 0 0 var(--accent); }
.nav-link.active .icon { color: var(--accent); opacity: 1; }
.nav-link:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.sidebar-footer-card strong { display: block; }
.sidebar-footer-card .sidebar-version .icon { width: 12px; height: 12px; }

/* Header: product name and running version (always visible) instead of the breadcrumb */
.topbar-product { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); white-space: nowrap; }
.topbar-product strong { overflow: hidden; font-size: 14.5px; font-weight: 700; letter-spacing: -.2px; text-overflow: ellipsis; }
.topbar-product:hover { color: var(--text); }
.topbar-version { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid #BFE9E3; border-radius: 999px; background: #EFFCF9; color: #0F766E; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .2px; transition: background .15s, border-color .15s; }
.topbar-product:hover .topbar-version { background: #DDF7F2; border-color: #8FDCCF; }
@media (max-width: 720px) {
    .topbar-product strong { display: none; }
}
.nav-link { white-space: nowrap; }
.nav-link.is-soon { gap: 11px; }
.nav-link.is-soon .nav-soon { flex: none; }

/* ==========================================================================
   HR module: leave, contracts, disciplinary (2026-10-02, v1.3.0)
   ========================================================================== */
.section-label { margin: 4px 0 12px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; }
.kpi-grid-wide .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); }
.kpi-grid-wide .kpi-action:nth-child(5) { animation-delay: .16s; }
a.kpi.kpi-action { color: var(--text); }
a.kpi.kpi-action:hover { color: var(--text); }
.hr-subnav { margin-bottom: 16px; padding: 0 8px; border-radius: var(--radius-lg); }
.hr-subnav .tab { text-decoration: none; }
.tabs a.tab { text-decoration: none; }
.tab-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 700; }
.tab.active .tab-count { background: var(--primary-soft); color: var(--primary); }
.tab-count.is-alert { background: var(--danger-soft); color: var(--danger); }
.select-filter { height: 34px; margin-bottom: 6px; font-size: 12.5px; }
.leave-preview { display: flex; flex-direction: column; justify-content: center; min-height: 40px; padding: 6px 12px; border: 1px dashed var(--border-strong); border-radius: 8px; background: var(--surface-2); }
.leave-preview strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.leave-preview small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.leave-preview.is-ok { border-style: solid; border-color: #BDE5CB; background: var(--success-soft); }
.leave-preview.is-ok strong { color: var(--success); }
.leave-preview.is-error { border-style: solid; border-color: #F5C2C2; background: var(--danger-soft); }
.leave-preview.is-error small { color: #8E1B1B; }
.decision-form { display: grid; gap: 12px; }
.decision-actions { display: flex; justify-content: flex-end; gap: 10px; }
.mini-metrics > div.is-alert { border-color: #F5C2C2; background: var(--danger-soft); }
.mini-metrics > div.is-alert strong { color: var(--danger); }
.balance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.balance-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.balance-tile span { color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.balance-tile strong { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.balance-tile small { color: var(--muted); font-size: 11.5px; }
.profile-tabs-card { margin: 16px 0; }
.profile-tabs-card .tabs { border-bottom: 0; }
.prewrap { white-space: pre-wrap; }
.level-tag { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.level-verbal { background: var(--info-soft); color: var(--info); }
.level-first { background: var(--warning-soft); color: var(--warning); }
.level-final { background: var(--danger-soft); color: var(--danger); }

/* Printable letters (A4, browser print / Save as PDF) */
.letter-body { background: #E9EDF3; }
.letter-toolbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; background: var(--surface); border-bottom: 1px solid var(--border); }
.letter { width: 210mm; min-height: 297mm; margin: 24px auto; padding: 20mm 20mm 16mm; background: #fff; box-shadow: var(--shadow-lg); color: #111827; font-size: 11pt; line-height: 1.55; }
.letter p { margin: 0 0 10px; }
.letterhead { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; margin-bottom: 18px; border-bottom: 3px solid var(--brand-navy); }
.letterhead strong { display: block; color: var(--brand-navy); font-size: 17pt; font-weight: 800; letter-spacing: -.3px; }
.letterhead span { color: #4B5563; font-size: 9.5pt; }
.letter-logo { width: 56px; height: 56px; object-fit: contain; }
.letterhead .letter-logo-text { display: grid; place-items: center; border-radius: 12px; background: var(--brand-navy); color: #fff; font-size: 24pt; font-weight: 800; }
.letter-meta { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 10pt; }
.letter-meta span { color: #6B7280; }
.letter-confidential { font-size: 9.5pt; font-weight: 700; letter-spacing: 1.5px; color: var(--danger); }
.letter-to { display: flex; flex-direction: column; margin-bottom: 16px; }
.letter-to span { color: #374151; font-size: 10pt; }
.letter-subject { margin: 6px 0 14px; font-size: 11.5pt; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.letter-quote { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid var(--brand-teal); background: #F8FAFC; white-space: pre-wrap; }
.letter-signature { display: flex; flex-direction: column; margin: 34px 0 26px; }
.letter-signature span { color: #4B5563; font-size: 10pt; }
.sign-line { display: block; width: 220px; height: 0; margin-bottom: 6px; border-bottom: 1px solid #111827; }
.letter-ack { padding-top: 14px; border-top: 1px dashed #9CA3AF; }
.letter-ack h2 { margin-bottom: 6px; font-size: 10.5pt; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; }
.ack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 30px 0 12px; font-size: 9.5pt; color: #4B5563; }
.letter-cc { font-size: 9pt; color: #6B7280; }
.letter-footer { margin-top: 18px; padding-top: 8px; border-top: 1px solid #E5E7EB; color: #9CA3AF; font-size: 8pt; text-align: center; }
@media print {
    @page { size: A4; margin: 0; }
    .letter-body { background: #fff; }
    .letter { margin: 0; box-shadow: none; }
}
@media (max-width: 900px) { .letter { width: auto; min-height: 0; margin: 12px; padding: 20px; } }

/* ==========================================================================
   Payroll processing and payslips (v1.4.0)
   ========================================================================== */
.payroll-period .toolbar { border-bottom: 1px solid var(--border); }
.payroll-period-status { display: flex; align-items: center; min-height: 40px; color: var(--text-2); font-size: 13.5px; }
.payroll-period-actions, .payroll-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.payroll-period-actions form, .payroll-actions form { margin: 0; }
.payroll-audit { margin-left: auto; color: var(--muted); font-size: 12px; }
.payroll-actions-card { margin-bottom: 4px; }
.stepper { display: flex; gap: 0; margin: 0 0 16px; padding: 0; list-style: none; }
.stepper li { position: relative; display: flex; flex: 1; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 600; }
.stepper li:not(:last-child)::after { content: ''; flex: 1; height: 2px; margin: 0 12px; border-radius: 2px; background: var(--border); }
.stepper li span { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); font-size: 12px; }
.stepper li.is-done { color: var(--success); }
.stepper li.is-done span { border-color: var(--success); background: var(--success); color: #fff; }
.stepper li.is-done::after { background: var(--success); }
.stepper li.is-current { color: var(--primary); }
.stepper li.is-current span { border-color: var(--primary); background: var(--primary); color: #fff; box-shadow: var(--focus); }
.payroll-table tr.is-error td { background: var(--danger-soft); }
.payroll-warning { display: flex !important; align-items: center; gap: 4px; margin-top: 2px; color: var(--warning) !important; font-size: 11.5px !important; }
.payroll-warning .icon { width: 12px; height: 12px; }
.payroll-detail td { background: var(--surface-2); }
.payroll-breakdown { display: grid; grid-template-columns: 1fr 1fr minmax(260px, 1fr); gap: 20px; padding: 6px 0; }
.payroll-breakdown dl { display: grid; gap: 4px; margin: 0; }
.payroll-breakdown dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 13px; border-bottom: 1px dashed var(--border); }
.payroll-breakdown dt { color: var(--text-2); }
.payroll-breakdown dt small { color: var(--muted); }
.payroll-breakdown dd { margin: 0; font-variant-numeric: tabular-nums; }
.payroll-breakdown .is-total { border-bottom: 0; font-weight: 700; }
.payroll-adjust { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.payroll-adjust .input { height: 34px; }
.band-table td { padding: 6px 8px; }
.band-table .input { height: 34px; }
.settings-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.latest-payroll { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-bottom: 20px; padding: 16px 20px; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.latest-payroll:hover { border-color: #BFCDF3; box-shadow: var(--shadow); color: var(--text); }
.latest-payroll > div { display: flex; flex-direction: column; }
.latest-payroll strong { font-size: 16px; }
.latest-payroll .card-link { margin-left: auto; }
.letter-toolbar-actions { display: flex; gap: 8px; }
@media (max-width: 1100px) { .payroll-breakdown { grid-template-columns: 1fr; } .stepper li { font-size: 0; } .stepper li span { font-size: 12px; } }

/* Payslip (A4, print) */
.payslip { padding: 14mm 16mm; font-size: 10.5pt; }
.payslip-head { display: flex; justify-content: space-between; gap: 20px; margin: -14mm -16mm 18px; padding: 14mm 16mm 16px; background: var(--brand-navy); color: #C9D5E8; border-bottom: 3px solid var(--brand-teal); }
.payslip-company { display: flex; align-items: center; gap: 12px; }
.payslip-company strong { display: block; color: #fff; font-size: 16pt; font-weight: 800; }
.payslip-company span { font-size: 8.5pt; }
.payslip-company .letter-logo { background: #fff; border-radius: 8px; padding: 4px; }
.payslip-title { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.payslip-title strong { color: var(--brand-teal); font-size: 20pt; letter-spacing: 1px; }
.payslip-title span { color: #fff; }
.payslip-title em { margin-top: 4px; color: #FCD34D; font-size: 8pt; font-style: normal; font-weight: 700; text-transform: uppercase; }
.payslip-employee { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 16px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.payslip-employee span { display: block; color: var(--muted); font-size: 7.5pt; text-transform: uppercase; letter-spacing: .4px; }
.payslip-employee strong { font-size: 10pt; }
.payslip-employee div:first-child { grid-column: span 2; }
.payslip-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.payslip-table th, .payslip-table td { padding: 6px 8px; text-align: left; font-size: 10pt; }
.payslip-table th:last-child, .payslip-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.payslip-table thead th { background: #F1F4F9; color: var(--muted); font-size: 8pt; letter-spacing: .5px; text-transform: uppercase; }
.payslip-table tbody td { border-bottom: 1px solid var(--border); }
.payslip-table tfoot th { border-top: 2px solid var(--text); font-size: 10.5pt; }
.payslip-table .is-negative { color: var(--warning); }
.payslip-net { display: flex; justify-content: space-between; align-items: center; margin: 18px 0; padding: 14px 16px; border-radius: 8px; background: #E0F7F4; color: #0F766E; }
.payslip-net span { font-weight: 800; letter-spacing: .6px; }
.payslip-net strong { font-size: 18pt; }
.payslip-tax { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 16px; font-size: 9pt; }
.payslip-tax span { display: block; color: var(--muted); }
.payslip-remarks { margin-top: 12px; color: var(--muted); font-size: 9pt; }

/* Payroll dashboard (v1.5.0) */
.payroll-grid-card .card-header { padding-bottom: 14px; }
.payroll-grid-wrap { max-height: 70vh; }
.payroll-grid th, .payroll-grid td { white-space: nowrap; }
.payroll-grid thead th { position: sticky; top: 0; z-index: 2; }
.payroll-grid .sticky-col { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 4px 0 8px -6px rgba(15, 23, 42, .18); }
.payroll-grid thead .sticky-col, .payroll-grid tfoot .sticky-col { z-index: 3; background: var(--surface-2); }
.payroll-grid tfoot th { position: sticky; bottom: 0; z-index: 2; background: var(--surface-2); }
.pager-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
/* A search box inside a labelled filter field keeps its normal height (any report filter bar). */
.report-filters .filter-field .search-field { position: relative; display: block; flex: none; }
.report-filters .filter-field .search-field .input { width: 100%; height: 40px; padding-left: 34px; }
.report-filters .filter-field .search-field .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--subtle); }

/* ---------- Employee form: Earnings & Deductions ---------- */
.comp { display: grid; gap: 16px; }
.comp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.comp-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.comp-card-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.comp-card-head h3 { font-size: 14.5px; font-weight: 600; }
.comp-card-head p { color: var(--muted); font-size: 12.5px; }
.comp-badge { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; }
.comp-badge .icon { width: 16px; height: 16px; }
.comp-badge.is-earning { background: var(--success-soft); color: var(--success); }
.comp-badge.is-deduction { background: var(--danger-soft); color: var(--danger); }
.comp-rows { display: flex; flex-direction: column; padding: 6px 18px; }
.comp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 190px); align-items: center; gap: 4px 14px; padding: 9px 0; border-bottom: 1px dashed var(--border); }
.comp-row:last-child { border-bottom: 0; }
.comp-label { color: var(--text-2); font-size: 13px; font-weight: 600; }
.comp-label small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 400; }
.comp-row.is-calculated strong { justify-self: end; padding-right: 12px; color: var(--text-2); font-size: 13.5px; font-weight: 600; }
.comp-error { grid-column: 1 / -1; justify-self: end; font-size: 12px; }
.comp-error.field-validation-valid:empty { display: none; }
.money-input { position: relative; }
.money-input span { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); color: var(--muted); font-size: 12px; font-weight: 600; pointer-events: none; }
.money-input .input { padding-left: 44px; text-align: right; }
.comp-card-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding: 14px 18px; border-top: 1px solid var(--border); background: var(--surface-2); }
.comp-card-total span { color: var(--text-2); font-size: 13px; font-weight: 600; }
.comp-card-total strong { font-size: 15px; font-weight: 700; }
.comp-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 18px 20px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--brand-navy), var(--brand-navy-2)); color: #fff; box-shadow: var(--shadow); }
.comp-summary-item span { display: block; color: #A9BBD9; font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; }
.comp-summary-item strong { display: block; margin-top: 2px; font-size: 20px; font-weight: 700; letter-spacing: -.3px; white-space: nowrap; }
.comp-summary-item.is-net strong { color: #5EEAD4; font-size: 24px; }
.comp-summary-item.is-net.is-negative strong { color: #FCA5A5; }
.comp-summary-op { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #CBD5E1; font-weight: 700; }
.comp-summary-op .icon { width: 14px; height: 14px; }
.comp-note { margin-top: -6px; }
.comp + .form-section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
@media (max-width: 1280px) { .comp-cards { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
    .comp-summary { grid-template-columns: 1fr; gap: 10px; }
    .comp-summary-op { display: none; }
    .comp-row { grid-template-columns: 1fr; }
    .comp-row.is-calculated strong, .comp-error { justify-self: start; padding-right: 0; }
}