:root {
    --bg: #f8f9fa;
    --bg2: #ffffff;
    --bg3: #f1f3f5;
    --bg4: #e9ecef;
    --border: #dee2e6;
    --border2: #ced4da;
    --text: #212529;
    --text2: #495057;
    --text3: #6c757d;
    --accent: #2563eb;
    --accent2: #1d4ed8;
    --accent-glow: rgba(37,99,235,0.1);
    --success: #16a34a;
    --success-bg: rgba(22,163,74,0.1);
    --warn: #d97706;
    --warn-bg: rgba(217,119,6,0.1);
    --danger: #dc2626;
    --danger-bg: rgba(220,38,38,0.1);
    --info: #0284c7;
    --info-bg: rgba(2,132,199,0.1);
    --radius: 8px;
    --radius-lg: 12px;
    --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --mono: 'Consolas', 'Courier New', monospace;
    --sidebar: 260px;
    --topbar: 56px;
  }

  /* Admin > Staff Documents */
  .eda-reminder-types{display:flex;gap:10px;flex-wrap:wrap}.eda-type-option{display:flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid var(--border);background:var(--bg3);border-radius:10px;font-size:13px;font-weight:650;cursor:pointer}.eda-type-option input{width:auto}.eda-toolbar{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}.eda-muted{font-size:11px;color:var(--text3);margin-top:3px}.eda-badges{display:flex;gap:5px;flex-wrap:wrap}.eda-history-row td{background:var(--bg3);padding:0!important}.eda-history{padding:16px 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:14px}.eda-history-group{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:14px}.eda-history-group h4{margin:0 0 10px;display:flex;align-items:center;justify-content:space-between;gap:10px}.eda-history-count{font-size:11px;color:var(--text3);font-weight:600}.eda-version{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--border)}.eda-version:first-of-type{border-top:0}.eda-version strong,.eda-version small{display:block}.eda-version small{font-size:11px;color:var(--text3);margin-top:3px}.eda-version-actions{display:flex;gap:6px;flex:0 0 auto}.eda-empty-history{grid-column:1/-1;text-align:center;padding:22px;color:var(--text3)}
  @media(max-width:700px){.eda-toolbar{display:block}.eda-toolbar .form-group{margin-bottom:12px!important}.eda-history{grid-template-columns:1fr}.eda-version{align-items:flex-start;flex-direction:column}.eda-version-actions{width:100%}}

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html, body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    height: 100%;
    overflow: hidden;
  }

  #app {
    display: flex;
    /* 100vh is the LARGE viewport on mobile: it keeps counting the space under
       an expanded browser toolbar, so the bottom of the shell sits off-screen.
       100dvh tracks what is actually visible. The 100vh line stays first as the
       fallback for browsers without dvh. */
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    overflow: hidden;
  }

  #sidebar {
    width: var(--sidebar);
    min-width: var(--sidebar);
    background: var(--bg2);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
    height: 100%;
  }

  #main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow: hidden;
  }

  /* Three real columns rather than an absolutely-positioned centre. The old
     centre block was out of flow, so the title and the action cluster grew
     underneath it and collided on anything narrower than a desktop. Each
     region now owns its track and shrinks instead of overlapping. */
  #topbar {
    height: var(--topbar);
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    display: grid;
    /* Equal side tracks, so the company block lands on the bar's true midpoint
       instead of being pushed along by whichever side has more in it. Plain
       1fr is minmax(auto, 1fr): the tracks share the slack, but neither can be
       squeezed below its own content, so the controls stay intact. */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 24px;
    gap: 24px;
    flex-shrink: 0;
    z-index: 99;
  }

  /* min-width:0 overrides the automatic minimum, which is what lets the side
     tracks shrink to match each other; without it the title's own width sets a
     floor and the centre drifts off the midpoint again. */
  #topbar-left {
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 18px;
  }

  #topbar-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 0;
    line-height: 1.25;
    gap: 2px;
  }
  #topbar-center > * { max-width: 100%; min-width: 0; }
  #page-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }
  .toolbar-company-meta { display: flex; align-items: center; gap: 10px; white-space: nowrap; }

  #topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
  }
  #topbar-actions > * { flex-shrink: 0; }

  /* Compact pill controls for the bar. Sized against the 56px bar rather than
     inheriting the full-size form control, which was far too tall here. */
  .topbar-select,
  .toolbar-company-selector,
  .toolbar-company-meta select {
    width: auto;
    height: 30px;
    padding: 0 30px 0 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text2);
    background-color: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 100px;
    cursor: pointer;
    line-height: normal;
  }
  /* The centre block stacks two lines inside 56px, so its control is smaller
     again — at the single-line size the stack filled the bar edge to edge with
     no breathing room. */
  .toolbar-company-meta select {
    height: 22px;
    line-height: normal;
    font-size: 11.5px;
    padding: 0 24px 0 10px;
    /* Capped so the centre track can shrink. The longest option
       ("Current: 2026-2027 (Edit)") is otherwise a hard floor on the track
       width, and the grid resolves that by letting the columns overlap. */
    max-width: 150px;
  }
  .topbar-select:hover,
  .toolbar-company-selector:hover,
  .toolbar-company-meta select:hover {
    border-color: var(--border2);
    background-color: var(--bg3);
    color: var(--text);
  }

  #user-info {
    display: none;               /* toggled to flex once a user is known */
    align-items: center;
    gap: 10px;
    padding-left: 16px;
    border-left: 1px solid var(--border);
    min-width: 0;
  }
  /* A display name can be as long as the company's own name; cap it rather
     than letting it push the buttons off the bar. */
  #user-name {
    font-weight: 600;
    color: var(--text2);
    font-size: 13px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* The role is the part that actually varies between sessions, so it stays
     visible after the (often redundant) display name is dropped. */
  #user-role-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--accent);
    background: var(--accent-glow);
    border: 1px solid var(--accent);
    border-radius: 100px;
    padding: 3px 10px;
    white-space: nowrap;
  }

  /* Progressive disclosure. A 1366px laptop cannot fit the page title, the
     company block and five controls at full width, so labels drop before
     anything is allowed to collide. Every control keeps its title/aria-label,
     so an icon-only button is still identifiable and still clickable. */
  @media (max-width: 1500px) {
    #topbar { padding: 0 16px; gap: 12px; }
    #user-name { max-width: 150px; }
  }

  @media (max-width: 1400px) {
    /* Below this the centre cannot sit on the midpoint while the name is also
       shown — there is not enough width for equal side tracks, and the shortfall
       comes out as an overlap. The name is the part that gives way: it repeats
       the company name above it, and the role badge plus the tooltip on the
       identity block still say who is signed in. */
    #user-name { display: none; }
  }

  @media (max-width: 1280px) {
    /* Button labels go first — an action is still identifiable from its icon
       plus title/aria-label. The status chip keeps its text, because an
       icon-only chip reads as an empty box rather than a state. */
    #topbar-actions .btn .btn-label { display: none; }
    #topbar-actions .btn { padding: 6px 10px; }
    .toolbar-company-name { font-size: 16px; }
    #user-name { display: none; }
  }

  @media (max-width: 1200px) {
    /* Hidden outright rather than clipped to "Dash…". The sidebar already
       highlights the active page, so nothing is actually lost. */
    #page-title { display: none; }
  }

  @media (max-width: 1150px) {
    /* The centre block itself has to give way now, or equal side tracks leave
       it wider than the space between them. The "FY: 2026-2027" caption is the
       redundant half — the selector beside it already names the year. */
    .toolbar-company-fy { display: none; }
    .toolbar-company-meta select { max-width: 150px; }
  }

  @media (max-width: 1000px) {
    .toolbar-company-meta select { max-width: 130px; }
  }

  @media (max-width: 1100px) {
    /* Below this the action cluster no longer fits an equal side track, and
       the overflow pushes back into the company block. The role badge is the
       next thing that can go: the tooltip on the identity block still carries
       the name and role. */
    #user-role-badge { display: none; }
    #user-info { padding-left: 0; border-left: none; }
  }

  @media (max-width: 900px) {
    #topbar-actions { gap: 6px; }
  }

  #content {
    flex: 1;
    padding: 24px;
    background: var(--bg);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .page {
    display: none !important;
    width: 100%;
    height: 100%;
  }

  .page.active {
    display: block !important;
    animation: fadeIn 0.3s ease;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .sidebar-logo { padding: 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
  .logo-icon { width: 40px; height: 40px; flex-shrink: 0; overflow: hidden; }
  .logo-icon img { width: 100%; height: 100%; object-fit: contain; }
  .logo-text { font-size: 18px; font-weight: 700; color: var(--text); }
  .logo-sub { font-size: 11px; color: var(--text3); }
  .sidebar-section { padding: 2px 0; border-radius: 8px; margin: 2px 8px; transition: background 0.25s ease; }
  .sidebar-section.expanded { background: var(--bg3); }
  .sidebar-section.no-toggle { background: none; }
  .sidebar-label { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--text3); text-transform: uppercase; padding: 10px 14px 6px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; transition: color 0.2s; }
  .sidebar-label:hover { color: var(--accent); }
  .sidebar-label::after { content: '▸'; font-size: 11px; transition: transform 0.25s ease; }
  .sidebar-section.expanded .sidebar-label::after { transform: rotate(90deg); }
  .sidebar-section.expanded .sidebar-label { color: var(--accent); }
  .sidebar-section.no-toggle .sidebar-label { cursor: default; }
  .sidebar-section.no-toggle .sidebar-label::after { display: none; }
  .sidebar-section .sidebar-items { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
  .sidebar-section.expanded .sidebar-items { max-height: 600px; }
  .sidebar-section.no-toggle .sidebar-items { max-height: none; overflow: visible; }
  .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; cursor: pointer; color: var(--text2); font-size: 14px; transition: all 0.2s; border-left: 3px solid transparent; text-decoration: none; }
  .nav-item:hover { background: var(--bg3); color: var(--text); }
  .nav-item.active { background: var(--accent-glow); color: var(--accent); border-left-color: var(--accent); }
  .nav-icon { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }
  .sidebar-footer { padding: 16px; border-top: 1px solid var(--border); margin-top: auto; }

  .admin-tab-bar { display: none; padding: 0 24px; background: var(--bg2); border-bottom: 1px solid var(--border); gap: 0; overflow-x: auto; white-space: nowrap; flex-shrink: 0; }
  .admin-tab-bar.visible { display: flex; }
  .admin-tab { padding: 12px 18px; font-size: 13px; font-weight: 600; color: var(--text3); cursor: pointer; border: none; background: none; border-bottom: 3px solid transparent; transition: all 0.2s; white-space: nowrap; }
  .admin-tab:hover { color: var(--text); background: var(--bg3); }
  .admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--accent-glow); }

  #page-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text2);
    letter-spacing: 0.2px;
  }

  .toolbar-company {
    display: flex;
    flex-direction: column;
    align-items: center;
    white-space: nowrap;
  }

  .toolbar-company-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .toolbar-company-fy {
    font-size: 12px;
    color: var(--text3);
    white-space: nowrap;
  }

  .card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 20px;
  }
  .card:last-child { margin-bottom: 0; }
  .card-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }

  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

  @media (max-width: 1200px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    #sidebar { position: fixed; transform: translateX(-100%); transition: transform 0.3s; }
    #sidebar.open { transform: translateX(0); }
    #main { margin-left: 0; }
    /* On tablets the working-company control remains the leading item. The
       repeated company heading gives way, while the fiscal-year control and
       action cluster remain available. */
    #topbar { grid-template-columns: minmax(150px, 1fr) auto auto; padding: 0 12px; gap: 8px; }
    #topbar-left { display: flex; }
    #topbar-center { align-items: flex-start; text-align: left; }
    #topbar-center .toolbar-company-name { display: none; }
    .toolbar-company { white-space: normal; }
    .toolbar-company-name {
      font-size: 15px;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  @media (max-width: 560px) {
    #topbar { grid-template-columns: minmax(140px, 1fr) auto; }
    #topbar-center { display: none; }
  }

  .stat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
  .stat-label { font-size: 12px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
  .stat-value { font-size: 28px; font-weight: 800; color: var(--text); line-height: 1.2; }
  .stat-accent { color: var(--accent); }
  .stat-success { color: var(--success); }
  .stat-warn { color: var(--warn); }
  .stat-danger { color: var(--danger); }
  .dashboard-kpi-card { min-width: 0; }
  .dashboard-kpi-card .stat-value { font-size: clamp(21px, 1.7vw, 28px); }
  .stat-value-caption { font-size: 11px; color: var(--text3); margin-top: 2px; }
  .dashboard-kpi-breakdown { display: grid; gap: 5px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
  .dashboard-kpi-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; font-size: 11px; color: var(--text3); }
  .dashboard-kpi-breakdown b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
  .dashboard-kpi-breakdown strong { color: var(--text); font-size: 12px; white-space: nowrap; }
  .dashboard-alert-breakdown span:first-child strong { color: var(--danger); }

  .form-group { margin-bottom: 16px; }
  .form-row { display: grid; gap: 16px; }
  .form-row.cols-2 { grid-template-columns: 1fr 1fr; }
  .form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
  .form-row.cols-4 { grid-template-columns: repeat(4, 1fr); }

  @media (max-width: 968px) {
    .form-row.cols-4 { grid-template-columns: repeat(2, 1fr); }
    .form-row.cols-3 { grid-template-columns: 1fr; }
  }

  @media (max-width: 576px) {
    .form-row.cols-2, .form-row.cols-3, .form-row.cols-4 { grid-template-columns: 1fr; }
  }

  label { display: block; font-size: 13px; font-weight: 600; color: var(--text2); margin-bottom: 6px; }
  input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="password"], input[type="time"], input[type="file"],
  #attendance-correction-modal input[type="datetime-local"], input[type="month"],
  select, textarea {
    width: 100%;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    color: var(--text);
    font-size: 14px;
    font-family: var(--font);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
    border-color: var(--border2);
  }
  input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
    background: var(--bg2);
  }
  input:disabled, select:disabled, textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  input::placeholder, textarea::placeholder { color: var(--text3); }

  /* iOS Safari zooms the whole page when a focused control computes below 16px
     and does not zoom back out, which is what made the login form jump. The
     base rule above stays at 14px, so DESKTOP TYPOGRAPHY IS UNCHANGED; this
     raises only the controls a touch phone actually puts a keyboard under.
     `select` is deliberately NOT here: iOS opens a native picker for it rather
     than zooming, and .toolbar-company-selector is a 30px-tall topbar pill
     that 16px text would break. `file` has no text entry either. */
  @media (max-width: 600px) and (pointer: coarse) {
    input[type="text"], input[type="number"], input[type="email"], input[type="password"],
    input[type="tel"], input[type="search"], input[type="url"],
    input[type="date"], input[type="time"],
    #attendance-correction-modal input[type="datetime-local"], input[type="month"],
    textarea {
      font-size: 16px;
    }
  }

  /* Every select carries the same chevron. The native control renders a
     different arrow on each platform, so one drawn mark keeps the forms
     looking like a single system. The glyph is inlined as a data URI: the
     page blocks external stylesheet assets, and an <img> cannot live inside
     a <select> anyway. */
  select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236c757d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    cursor: pointer;
  }
  /* Arabic flips the layout, so the chevron moves with it. */
  body.rtl select {
    padding-right: 14px;
    padding-left: 38px;
    background-position: left 14px center;
  }
  select:disabled { cursor: not-allowed; }
  /* The compact bar controls sit tighter than a form field. */
  .topbar-select { background-position: right 11px center; }
  .toolbar-company-meta select { background-position: right 9px center; background-size: 10px 7px; }
  body.rtl .topbar-select,
  body.rtl .toolbar-company-meta select {
    padding-right: 12px;
    padding-left: 30px;
    background-position: left 11px center;
  }
  /* A multiple/size select is a list, not a dropdown: no chevron, no pointer. */
  select[multiple], select[size]:not([size="1"]) {
    background-image: none;
    padding-right: 14px;
    cursor: default;
  }
  textarea { resize: vertical; min-height: 80px; }
  .checkbox-group { display: flex; align-items: center; gap: 8px; }
  .checkbox-group input[type="checkbox"] { width: auto; margin: 0; }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font);
    white-space: nowrap;
    background: var(--bg3);
    color: var(--text);
  }
  .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
  .btn-primary { background: var(--accent); color: white; border-color: var(--accent); }
  .btn-primary:hover { background: var(--accent2); }
  .btn-secondary { background: var(--bg3); color: var(--text); border-color: var(--border); }
  .btn-secondary:hover { background: var(--bg4); border-color: var(--border2); }
  .btn-success { background: var(--success); color: white; border-color: var(--success); }
  .btn-danger { background: var(--danger); color: white; border-color: var(--danger); }
  .btn-warn { background: var(--warn); color: white; border-color: var(--warn); }
  .btn-sm { padding: 6px 12px; font-size: 12px; }
  .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

  .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg2); }
  table { width: 100%; border-collapse: collapse; font-size: 13px; }
  th { text-align: left; padding: 12px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text3); background: var(--bg3); border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; z-index: 10; }
  td { padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text2); }
  tr:last-child td { border-bottom: none; }
  tr:hover td { background: var(--bg3); }
  .td-num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
  .td-actions { text-align: right; white-space: nowrap; }
  /* A heading must sit directly over its own data. Marking a th .td-num gives
     it the same right alignment as the numbers below it, but headings keep the
     interface font rather than inheriting the tabular mono face. */
  th.td-num { font-family: inherit; font-variant-numeric: normal; }

  .payroll-review-wrap {
    max-height: calc(100vh - 330px);
    min-height: 280px;
  }

  .payroll-top-scroll {
    position: sticky;
    top: 0;
    z-index: 16;
    height: 22px;
    overflow-x: scroll;
    overflow-y: hidden;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 6px 6px 0 0;
  }
  #payroll-scroll-spacer { height: 1px; }
  .payroll-review-table th .payroll-heading-label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 118px;
    line-height: 1.25;
    margin-left: auto;
  }

  .payroll-review-table {
    width: max-content;
    min-width: 100%;
  }

  .payroll-review-table th,
  .payroll-review-table td {
    padding: 10px 12px;
    min-width: 126px;
    white-space: nowrap;
  }

  .payroll-review-table .payroll-group-headings th {
    top: 0;
    text-align: center;
    z-index: 12;
  }

  .payroll-review-table .payroll-item-headings th {
    top: 38px;
    z-index: 11;
  }

  .payroll-review-table .payroll-select-column {
    min-width: 44px;
    width: 44px;
    text-align: center;
    position: sticky;
    left: 0;
    z-index: 13;
    background: var(--bg2);
  }

  .payroll-review-table th.payroll-select-column {
    background: var(--bg3);
    z-index: 15;
  }

  .payroll-review-table .payroll-employee-column {
    min-width: 220px;
    position: sticky;
    left: 44px;
    z-index: 12;
    background: var(--bg2);
  }

  .payroll-review-table th.payroll-employee-column {
    background: var(--bg3);
    z-index: 15;
  }

  .payroll-review-table tr:hover .payroll-select-column,
  .payroll-review-table tr:hover .payroll-employee-column {
    background: var(--bg3);
  }

  .payroll-taxable-heading { color: var(--success); }
  .payroll-exempt-heading { color: var(--accent); }
  .payroll-deduction-heading { color: var(--danger); }

  .payroll-employee-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
  }

  .payroll-employee-meta {
    color: var(--text3);
    font-size: 11px;
    margin-top: 3px;
  }

  .payroll-zero-value { color: var(--text3); }
  .payroll-row-actions { min-width: 260px; }

  /* Daily Attendance dense table: 11 columns need tighter cells */
  .attendance-summary-row {
    display: flex;
    gap: 16px;
    align-items: stretch;
    flex-wrap: wrap;
  }
  .attendance-date-column {
    margin: 0;
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }
  .attendance-date-column #att-date { width: 100%; }
  .attendance-day-off-action {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 10px;
  }
  .attendance-day-off-action .btn {
    width: 100%;
    min-height: 36px;
    justify-content: center;
    white-space: normal;
    line-height: 1.25;
  }
  .attendance-day-off-status {
    color: var(--warn);
    font-size: 12px;
    font-weight: 700;
  }
  .attendance-summary-cards {
    display: flex;
    gap: 16px;
    flex: 1 1 620px;
    flex-wrap: wrap;
  }
  .attendance-holiday-banner:not(:empty) { margin-top: 12px; }
  .attendance-holiday-banner .card { margin: 0; }

  .att-daily-table th,
  .att-daily-table td { padding: 10px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .att-daily-table td:last-child { white-space: normal; }
  .att-daily-table .badge { padding: 3px 8px; font-size: 10px; }

  /* Leave Management: 8 columns, one of which is free-text notes. Without a
     cap the notes column stretches and squeezes Balance and Actions out of
     line with their headings. */
  .lv-table th,
  .lv-table td { padding: 10px 12px; }
  .lv-table td:nth-child(7) {
    max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .lv-table th:nth-child(6),
  .lv-table td:nth-child(6) { width: 1%; white-space: nowrap; }

  .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 100px; font-size: 11px; font-weight: 700; }
  .badge-success { background: var(--success-bg); color: var(--success); }
  .badge-warn { background: var(--warn-bg); color: var(--warn); }
  .badge-danger { background: var(--danger-bg); color: var(--danger); }
  .badge-info { background: var(--info-bg); color: var(--info); }
  .badge-default { background: var(--bg4); color: var(--text2); }

  .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(4px); overflow-y: auto; }
  .modal-overlay.open { display: flex; }
  .modal { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 900px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); margin: auto; }
  .modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
  .modal-title { font-size: 18px; font-weight: 700; color: var(--text); }
  .modal-body { padding: 24px; overflow-y: auto; flex: 1; }
  .modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0; background: var(--bg3); }
  .modal-close { background: none; border: none; cursor: pointer; color: var(--text3); font-size: 24px; padding: 4px; border-radius: var(--radius); line-height: 1; }
  .modal-close:hover { background: var(--bg4); color: var(--text); }

  .form-section-title { font-size: 14px; font-weight: 700; margin: 24px 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--border); color: var(--text); }
  .form-section-title:first-of-type { margin-top: 0; }

  .attachment-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
  .attachment-item { background: var(--bg3); padding: 8px 12px; border-radius: var(--radius); border: 1px solid var(--border); font-size: 12px; display: flex; align-items: center; gap: 8px; }
  /* The uploaded-documents list stacks full width so a long file name has
     room to truncate rather than squashing the View/Delete buttons. */
  #emp-docs-existing .attachment-item { width: 100%; margin-bottom: 6px; }

  .expiry-warning {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    background: var(--danger-bg);
    color: var(--danger);
    margin-left: 4px;
  }

  #toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
  /* Background notices (reminder sweeps, scheduled jobs) live in their own
     stack BELOW .modal-overlay (z-index 1000), so one that is already on
     screen when a modal opens ends up behind it instead of over the form.
     toast() also holds these back while a modal is open; this is the layer
     that covers the race where a notice was already visible. The interactive
     container keeps 9999 on purpose — a validation message inside a modal has
     to render above it. */
  #toast-container-system { position: fixed; bottom: 24px; right: 24px; z-index: 900; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }

  /* Turnstile status line. The container reserves min-height:65px in the
     markup, so this occupies space that was previously a zero-height gap
     whenever the widget failed to render. Styled through classes only: the
     container keeps its own inline layout. */
  .cf-ts-status { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text3); text-align: center; line-height: 1.4; }
  .cf-ts-retry { border: 1px solid var(--accent); background: transparent; color: var(--accent); font: inherit; font-weight: 700; padding: 4px 12px; border-radius: 999px; cursor: pointer; }
  .cf-ts-retry:hover { background: var(--accent); color: #fff; }
  .cf-ts-retry:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .toast { background: var(--text); color: white; padding: 14px 24px; border-radius: var(--radius); font-size: 14px; font-weight: 500; box-shadow: 0 10px 40px rgba(0,0,0,0.2); animation: slideIn 0.3s ease; pointer-events: auto; max-width: 400px; word-wrap: break-word; }
  .toast-success { background: var(--success); }
  .toast-error { background: var(--danger); }
  .toast-warn { background: var(--warn); color: var(--text); }
  @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

  .loading { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 16px; color: var(--text3); }
  .loading::after { content: ''; width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin-left: 10px; }

  .dashboard-live-card { padding: 10px 16px; transition: padding .16s ease; }
  .dashboard-live-card.has-items { padding: 16px; }
  .dashboard-live-head { display:flex; align-items:center; gap:12px; margin:0 !important; min-height:32px; }
  .dashboard-live-head > :first-child { flex:0 0 auto; }
  .dashboard-inline-status { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text3); font-size:12px; font-weight:500; }
  .dashboard-live-card.has-items .dashboard-inline-status { display:none; }
  .dashboard-live-content:empty { display:none; }
  .dashboard-live-card.has-items .dashboard-live-content { display:block; margin-top:12px; }
  @media (max-width: 760px) {
    .dashboard-live-head { flex-wrap:wrap; }
    .dashboard-inline-status { order:3; flex-basis:100%; white-space:normal; }
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  .empty-state { text-align: center; padding: 60px 20px; color: var(--text3); }
  .empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }

  .section-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
  .section-head h2 { font-size: 24px; font-weight: 700; color: var(--text); margin: 0 0 4px 0; }
  .section-head p { font-size: 14px; color: var(--text2); margin: 0; }

  .filter-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
  .tax-report-filter-row { display: grid; grid-template-columns: minmax(240px, 1.4fr) minmax(180px, .8fr) minmax(180px, .8fr) auto; gap: 12px; align-items: end; margin-bottom: 20px; }
  .tax-report-filter-row .form-group { min-width: 0; margin: 0; }
  .tax-report-filter-row select, .tax-report-filter-row input { width: 100%; }
  .tax-report-generate { min-height: 42px; }
  @media (max-width: 900px) {
    .tax-report-filter-row { grid-template-columns: 1fr 1fr; }
    .tax-report-filter-row .form-group:first-child { grid-column: 1 / -1; }
  }
  @media (max-width: 576px) {
    .tax-report-filter-row { grid-template-columns: 1fr; }
    .tax-report-filter-row .form-group:first-child { grid-column: auto; }
    .tax-report-generate { width: 100%; }
  }

  /* Ambient status, not a control: no chrome, just a coloured glyph. The SVG
     inherits currentColor, so the state is carried by one colour change. */
  .file-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text3);
    line-height: 0;
    padding: 0;
    background: none;
    border: none;
  }
  .file-status.active  { color: var(--success); }
  .file-status.warning { color: var(--warn); }
  /* The tick only makes sense once a connection is established. */
  .file-status .fs-tick { opacity: 0; }
  .file-status.active .fs-tick { opacity: 1; }

  /* Announced to screen readers and shown on hover, without taking up space. */
  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .dept-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 4px;
    font-size: 13px;
  }

  .dept-tag button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--danger);
    font-size: 16px;
    line-height: 1;
    padding: 0;
    margin-left: 4px;
  }

  .payslip-editor {
    background: white;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
  }

  .payslip-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .payslip-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .payslip-col-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--text);
    border-bottom: 2px solid var(--border);
    padding-bottom: 8px;
  }

  .payslip-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px 34px;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
  }

  .payslip-line.deduction-line {
    grid-template-columns: minmax(0, 1fr) 110px 34px;
  }

  .payslip-group + .payslip-group {
    margin-top: 18px;
  }

  .payslip-group-title {
    color: var(--text2);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 7px 9px;
    text-transform: uppercase;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .payslip-add-line {
    width: 100%;
    margin-top: 8px;
  }

  .payslip-section-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg3);
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
  }

  .payslip-section-total strong {
    font-size: 15px;
    white-space: nowrap;
  }

  .payslip-additions-total { border-left: 4px solid var(--success); }
  .payslip-deductions-total { border-left: 4px solid var(--danger); }

  .payslip-remove-line {
    padding: 4px 8px;
    height: 32px;
  }

  .payslip-line-lock {
    text-align: center;
    cursor: help;
  }

  .payslip-line input[type="text"],
  .payslip-line input[type="number"] {
    min-width: 0;
    width: 100%;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 10px;
    font-size: 13px;
    color: var(--text);
    box-sizing: border-box;
    outline: none;
  }

  .payslip-line input[readonly] {
    background: var(--bg4);
    cursor: default;
  }

  .payslip-line input[type="number"] { text-align: right; }

  .payslip-line label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text2);
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
    white-space: nowrap;
  }

  .payslip-line label input[type="checkbox"] {
    width: auto;
    margin: 0;
  }

  .payslip-netbox {
    margin-top: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: var(--radius);
    text-align: center;
    color: white;
  }

  .email-guide {
    background: var(--bg3);
    padding: 16px;
    border-radius: var(--radius);
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.6;
  }

  .email-guide code {
    background: var(--bg4);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 12px;
  }

  /* The fiscal-year selector is styled entirely with the other bar controls,
     in .toolbar-company-meta select. An ID rule used to sit here restating its
     font, padding and width; being more specific it silently won, and the 4px
     vertical padding it forced left a 12px content box for 14px text, clipping
     the glyphs along the bottom. Its max-width outranked the responsive cap in
     the same way. Nothing about this control is specific enough to need an ID
     rule, so there is none — see the [9] check in tests/validate.js. */

  /* RTL Support for Arabic */
  body.rtl { direction: rtl; text-align: right; }
  body.rtl #sidebar { left: auto; right: 0; border-right: none; border-left: 1px solid var(--border); }
  body.rtl #main { margin-left: 0; margin-right: 240px; }
  body.rtl .nav-icon { margin-right: 0; margin-left: 8px; }
  body.rtl .modal-close { right: auto; left: 16px; }
  body.rtl .td-actions { text-align: left; }
  body.rtl .td-num { text-align: left; }
  body.rtl .toast-container { right: auto; left: 20px; }
  body.rtl .badge { margin-left: 0; margin-right: 4px; }

  /* Offline indicator — now drawn by .ui-net-banner in the USER STATES
     section, which also announces the recovery. The ::after rule that used to
     live here was removed rather than left in place: with both present the app
     showed two offline messages at once, one at each edge of the screen. */

  /* ================================================================
     TOP NAVIGATION — replaces the former left sidebar
     ================================================================ */
  #app { flex-direction: column; }

  #sidebar {
    width: 100%;
    min-width: 0;
    height: 58px;
    min-height: 58px;
    overflow: visible;
    flex-direction: row;
    align-items: stretch;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
    z-index: 250;
  }

  #main { width: 100%; height: auto; flex: 1; margin: 0; }

  .sidebar-logo {
    height: 58px;
    padding: 7px 16px;
    border-bottom: 0;
    border-right: 1px solid var(--border);
    gap: 10px;
    flex: 0 0 auto;
  }
  .sidebar-logo .logo-icon { width: 36px; height: 36px; }
  .sidebar-logo .logo-text { font-size: 16px; line-height: 1.15; }
  .sidebar-logo .logo-sub { font-size: 10px; }

  .top-nav-toggle-button {
    display: none;
    margin: 9px 12px 9px auto;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text2);
    background: var(--bg2);
    font: 600 13px var(--font);
    cursor: pointer;
  }

  .top-nav-menu {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-width: 0;
  }

  .top-nav-menu .sidebar-section {
    position: relative;
    padding: 0;
    margin: 0;
    border-radius: 0;
    background: none;
  }

  .top-nav-menu .sidebar-label,
  .top-nav-direct {
    height: 57px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: 0 14px;
    background: transparent;
    color: var(--text2);
    font: 600 13px var(--font);
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
  }

  .top-nav-menu .sidebar-label::after {
    content: '⌄';
    position: static;
    font-size: 12px;
    line-height: 1;
    transform: none;
    margin-left: 2px;
  }
  .top-nav-menu .sidebar-section.expanded .sidebar-label::after { transform: rotate(180deg); }
  .top-nav-menu .sidebar-label:hover,
  .top-nav-direct:hover,
  .top-nav-menu .sidebar-section.active-group > .sidebar-label {
    color: var(--accent);
    background: var(--accent-glow);
    border-bottom-color: var(--accent);
  }

  .top-nav-menu .sidebar-items {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: 7px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
    z-index: 500;
  }
  .top-nav-menu .sidebar-section.expanded > .sidebar-items,
  .top-nav-menu .sidebar-section:hover > .sidebar-items { display: block; }

  .top-nav-menu .sidebar-items .nav-item {
    min-height: 40px;
    padding: 8px 12px;
    border: 0;
    border-radius: 7px;
    gap: 9px;
    font-size: 13px;
  }
  .top-nav-menu .sidebar-items .nav-item.active {
    background: var(--accent-glow);
    color: var(--accent);
  }
  .top-nav-menu .nav-icon { width: 20px; font-size: 16px; }
  .top-nav-direct.active { color: var(--accent); background: var(--accent-glow); border-bottom-color: var(--accent); }
  .top-nav-admin { margin-left: auto; border-left: 1px solid var(--border); }

  .top-report-favorites:not(:empty) {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
  }
  .top-report-favorites::before {
    content: 'FAVORITES';
    display: block;
    padding: 3px 12px 5px;
    color: var(--text3);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .8px;
  }
  .top-report-favorites:empty::before { display: none; }

  .topbar-logout {
    height: 30px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--border);
    border-radius: 100px;
    background: var(--bg2);
    color: var(--text2);
    font: 600 12px var(--font);
    cursor: pointer;
  }
  .topbar-logout:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }

  .hr-report-favorite-summary {
    display: none;
    margin-bottom: 16px;
    padding: 11px 14px;
    border: 1px solid #fde68a;
    border-radius: var(--radius);
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
  }
  .hr-report-favorite-summary.visible { display: block; }
  .hr-report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
  .hr-report-card { margin: 0; padding: 18px; display: flex; flex-direction: column; min-height: 168px; }
  .hr-report-card-head { display: flex; align-items: flex-start; gap: 12px; }
  .hr-report-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-glow); display: grid; place-items: center; font-size: 21px; flex: 0 0 auto; }
  .hr-report-card h3 { font-size: 15px; margin: 1px 0 4px; }
  .hr-report-card p { color: var(--text3); font-size: 12px; line-height: 1.45; }
  .hr-report-card-actions { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; }
  .hr-report-star { margin-left: auto; width: 34px; height: 32px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg2); color: #94a3b8; cursor: pointer; font-size: 19px; line-height: 1; }
  .hr-report-star.active { color: #f59e0b; border-color: #fbbf24; background: #fffbeb; }

  /* Deductions Rate center */
  .deductions-rate-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
    scrollbar-width: thin;
  }
  .deductions-rate-tab {
    min-height: 46px;
    padding: 0 16px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--text2);
    font: 700 13px var(--font);
    white-space: nowrap;
    cursor: pointer;
  }
  .deductions-rate-tab:hover { color: var(--accent); background: var(--accent-glow); }
  .deductions-rate-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--accent-glow); }
  .deductions-rate-panel { width: 100%; }
  .deductions-rate-panel[hidden] { display: none !important; }
  .deductions-rate-intro { margin-bottom: 16px; }

  /* Employee benefits */
  .benefits-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
  }
  .benefits-tab {
    min-height: 46px;
    padding: 0 16px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--text2);
    font: 700 13px var(--font);
    white-space: nowrap;
    cursor: pointer;
  }
  .benefits-tab:hover { color: var(--accent); background: var(--accent-glow); }
  .benefits-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--accent-glow); }
  .benefits-panel[hidden] { display: none !important; }
  .benefits-panel-head { margin-bottom: 12px; }
  .benefits-panel-head h3 { margin: 0 0 4px; font-size: 17px; }
  .benefits-panel-head p { margin: 0; color: var(--text3); font-size: 12px; }
  .benefits-panel .table-subtext { margin-top: 3px; color: var(--text3); font-size: 10px; line-height: 1.35; }
  .benefits-filter-row input { min-width: min(360px, 100%); }
  .benefits-empty-cell { padding: 36px !important; color: var(--text3); text-align: center !important; }
  .benefits-check-row { display: inline-flex; align-items: center; gap: 8px; color: var(--text2); font-size: 13px; font-weight: 700; cursor: pointer; }
  .benefits-check-row input { width: 17px; height: 17px; margin: 0; }
  .benefits-tax-box { margin: 4px 0 16px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg3); }
  .benefits-tax-box p { margin: 7px 0 0 25px; color: var(--text3); font-size: 11px; line-height: 1.45; }
  .form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .benefit-tax-badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; }
  .benefit-tax-badge.taxable { background: #fff4e5; color: #a15c00; }
  .benefit-tax-badge.exempt { background: #e8f8ef; color: #08783e; }
  .deductions-rate-intro h3 { margin: 0 0 5px; font-size: 18px; }
  .deductions-rate-intro p { margin: 0; color: var(--text3); font-size: 13px; }

  /* Documentation center */
  .documentation-tabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
  .documentation-tab { min-height: 42px; padding: 0 16px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--text2); font: 700 13px var(--font); cursor: pointer; }
  .documentation-tab:hover { color: var(--accent); background: var(--accent-glow); }
  .documentation-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--accent-glow); }
  .documentation-tab-panel { width: 100%; }
  .documentation-recipient {
    margin-bottom: 16px;
    display: flex;
    align-items: flex-end;
    gap: 18px;
  }
  .documentation-recipient .form-group { margin: 0; flex: 0 0 min(360px, 100%); }
  .documentation-recipient-note { flex: 1; color: var(--text3); font-size: 12px; line-height: 1.5; }
  .documentation-layout { display: grid; grid-template-columns: minmax(270px, 330px) minmax(0, 1fr); gap: 16px; align-items: start; }
  .documentation-library { margin: 0; padding: 16px; position: sticky; top: 126px; max-height: calc(100vh - 150px); overflow-y: auto; }
  .documentation-library > input { width: 100%; margin-bottom: 13px; }
  .documentation-library-group + .documentation-library-group { margin-top: 14px; }
  .documentation-library-heading { margin-bottom: 5px; color: var(--text3); font-size: 10px; font-weight: 800; letter-spacing: .65px; text-transform: uppercase; }
  .documentation-template-list { display: flex; flex-direction: column; gap: 5px; }
  .documentation-template-button {
    width: 100%; min-height: 58px; display: grid; grid-template-columns: 32px minmax(0, 1fr) 10px;
    align-items: center; gap: 9px; padding: 8px; border: 1px solid transparent; border-radius: 8px;
    background: transparent; color: var(--text); text-align: left; cursor: pointer; font-family: var(--font);
  }
  .documentation-template-button:hover { background: var(--bg3); border-color: var(--border); }
  .documentation-template-button.active { background: var(--accent-glow); border-color: var(--accent); color: var(--accent); }
  .documentation-template-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: var(--bg3); font-size: 17px; }
  .documentation-template-button strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .documentation-template-button small { display: -webkit-box; margin-top: 2px; overflow: hidden; color: var(--text3); font-size: 10px; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .documentation-custom-dot { color: var(--accent); font-size: 9px; }
  .documentation-workspace { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
  .documentation-editor { margin: 0; }
  .documentation-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
  .documentation-editor-head h3 { margin: 3px 0 4px; font-size: 18px; }
  .documentation-editor-head p { color: var(--text3); font-size: 12px; line-height: 1.45; }
  .documentation-category { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .65px; text-transform: uppercase; }
  .documentation-editor textarea { min-height: 360px; resize: vertical; font-family: var(--font); line-height: 1.55; }
  .documentation-token-help { margin: 4px 0 16px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg3); }
  .documentation-token-help summary { cursor: pointer; color: var(--text2); font-size: 12px; font-weight: 700; }
  .documentation-token-list { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
  .documentation-token { padding: 4px 7px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg2); color: var(--accent); font: 600 10px var(--mono); cursor: pointer; }
  .documentation-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .documentation-preview { margin: 0; overflow-x: auto; }
  .documentation-paper { width: min(100%, 820px); min-height: 720px; margin: 0 auto; padding: 44px 54px; background: white; color: #1e293b; border: 1px solid #e2e8f0; box-shadow: 0 8px 25px rgba(15,23,42,.08); }
  .documentation-letterhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 16px; border-bottom: 2px solid #2563eb; }
  .documentation-letterhead img { max-width: 120px; max-height: 65px; object-fit: contain; }
  .documentation-letterhead-copy { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; color: #64748b; font-size: 11px; line-height: 1.45; text-align: right; }
  .documentation-letterhead strong { color: #0f172a; font-size: 16px; }
  .documentation-paper-meta { display: flex; justify-content: space-between; gap: 20px; margin-top: 18px; color: #64748b; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
  .documentation-paper > h3 { margin: 24px 0 22px; color: #0f172a; font-size: 17px; text-align: center; }
  .documentation-paper-body { font-size: 13px; line-height: 1.7; }
  .documentation-paper-body p { margin: 0 0 16px; white-space: normal; }
  .documentation-issue-warning { margin: 0 0 16px; padding: 10px 12px; border: 1px solid #f6c453; border-radius: 8px; background: #fff8df; color: #7a4a00; font-size: 12px; line-height: 1.45; }
  .documentation-history-toolbar { margin-bottom: 12px; padding: 0; overflow: hidden; }
  .documentation-history-toolbar-head { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; background: linear-gradient(135deg, var(--accent-glow), var(--bg2) 66%); border-bottom: 1px solid var(--border); }
  .documentation-history-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .documentation-history-heading-icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border: 1px solid rgba(37,99,235,.2); border-radius: 12px; background: var(--bg2); box-shadow: 0 5px 14px rgba(37,99,235,.1); font-size: 21px; }
  .documentation-history-heading h3 { margin: 0 0 2px; font-size: 15px; }
  .documentation-history-heading p { margin: 0; color: var(--text3); font-size: 11px; line-height: 1.4; }
  .documentation-history-count { flex: 0 0 auto; padding: 6px 10px; border: 1px solid rgba(37,99,235,.2); border-radius: 999px; background: var(--bg2); color: var(--accent); font-size: 11px; font-weight: 800; }
  .documentation-history-filter-grid { display: grid; grid-template-columns: minmax(220px, 320px) minmax(320px, 1fr) auto; align-items: end; gap: 14px; padding: 16px 20px 18px; }
  .documentation-history-filter-grid .form-group { min-width: 0; margin: 0; }
  .documentation-history-filter-grid select,
  .documentation-history-filter-grid input { width: 100%; height: 44px; border-radius: 10px; background: var(--bg3); }
  .documentation-history-filter-grid select:focus,
  .documentation-history-filter-grid input:focus { background: var(--bg2); box-shadow: 0 0 0 3px var(--accent-glow); }
  .documentation-history-search-field { position: relative; }
  .documentation-history-search-icon { position: absolute; top: 50%; left: 13px; z-index: 1; transform: translateY(-50%); color: var(--text3); font-size: 20px; line-height: 1; pointer-events: none; }
  .documentation-history-search-field input { padding-left: 40px; }
  .documentation-history-refresh { height: 44px; min-width: 108px; justify-content: center; border-radius: 10px; }
  .documentation-history-summary { min-height: 30px; display: flex; align-items: center; margin-bottom: 12px; padding: 6px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg2); color: var(--text3); font-size: 11px; }
  .documentation-history-folders { display: flex; flex-direction: column; gap: 14px; }
  .documentation-history-folders > .empty-state { min-height: 270px; margin: 0; padding: 48px 24px; border-style: dashed; background: linear-gradient(180deg, var(--bg2), var(--bg3)); }
  .documentation-history-folders > .empty-state .empty-icon { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 16px; background: var(--accent-glow); font-size: 30px; }
  .documentation-history-folder { margin: 0; padding: 0; overflow: hidden; }
  .documentation-history-folder-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--bg3); border-bottom: 1px solid var(--border); }
  .documentation-history-folder-head strong { display: block; font-size: 14px; }
  .documentation-history-folder-meta { color: var(--text3); font-size: 11px; }
  .documentation-history-list { display: flex; flex-direction: column; }
  .documentation-history-row { display: grid; grid-template-columns: minmax(210px, 1.4fr) minmax(170px, 1fr) 135px minmax(180px, auto); align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
  .documentation-history-row:last-child { border-bottom: 0; }
  .documentation-history-row-title strong { display: block; font-size: 12px; }
  .documentation-history-row-subject, .documentation-history-meta { color: var(--text3); font-size: 10px; line-height: 1.4; }
  .documentation-history-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
  .documentation-history-method { justify-self: start; }

  @media (max-width: 1100px) {
    .top-nav-menu .sidebar-label, .top-nav-direct { padding: 0 10px; font-size: 12px; }
    .top-nav-brand-copy .logo-sub { display: none; }
  }

  @media (max-width: 900px) {
    #sidebar {
      position: relative;
      transform: none;
      left: auto;
      right: auto;
      height: 56px;
      min-height: 56px;
      overflow: visible;
    }
    .sidebar-logo { height: 55px; border-right: 0; }
    .top-nav-toggle-button { display: block; }
    .top-nav-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      max-height: calc(100vh - 110px);
      overflow-y: auto;
      flex-direction: column;
      align-items: stretch;
      padding: 8px;
      background: var(--bg2);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      box-shadow: 0 16px 30px rgba(15,23,42,.16);
      z-index: 600;
    }
    #sidebar.open .top-nav-menu { display: flex; }
    .top-nav-menu .sidebar-section { width: 100%; }
    .top-nav-menu .sidebar-label, .top-nav-direct {
      width: 100%; height: 44px; min-height: 44px; justify-content: flex-start;
      padding: 0 12px; border: 0; border-radius: 8px;
    }
    .top-nav-menu .sidebar-label::after { margin-left: auto; }
    .top-nav-menu .sidebar-items,
    .top-nav-menu .sidebar-section:hover > .sidebar-items {
      display: none;
      position: static;
      min-width: 0;
      max-height: none;
      overflow: visible;
      margin: 2px 0 7px 14px;
      padding: 4px;
      border: 0;
      border-left: 2px solid var(--border);
      border-radius: 0;
      box-shadow: none;
    }
    .top-nav-menu .sidebar-section.expanded > .sidebar-items { display: block; }
    .top-nav-admin { margin-left: 0; border: 0; border-top: 1px solid var(--border); padding-top: 6px; }
    .top-nav-menu .sidebar-section.active-group > .sidebar-label,
    .top-nav-direct.active { border: 0; }
    .documentation-layout { grid-template-columns: 1fr; }
    .documentation-library { position: static; max-height: none; }
    .documentation-template-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .documentation-history-filter-grid { grid-template-columns: 1fr 1fr; }
    .documentation-history-refresh { grid-column: 1 / -1; justify-self: start; }
    .documentation-history-row { grid-template-columns: 1fr 1fr; }
    .documentation-history-actions { justify-content: flex-start; }
  }

  @media (max-width: 560px) {
    .top-nav-brand-copy .logo-sub { display: none; }
    .topbar-logout span { display: none; }
    .topbar-logout { width: 30px; justify-content: center; padding: 0; }
    .hr-report-grid { grid-template-columns: 1fr; }
    .form-grid-2 { grid-template-columns: 1fr; }
    .attendance-date-column { flex-basis: 100%; width: 100%; }
    .documentation-recipient { align-items: stretch; flex-direction: column; }
    .documentation-recipient .form-group { flex-basis: auto; width: 100%; }
    .documentation-template-list { grid-template-columns: 1fr; }
    .documentation-paper { min-width: 0; min-height: 0; padding: 28px 22px; }
    .documentation-paper-meta { flex-direction: column; gap: 4px; }
    .documentation-actions .btn { flex: 1 1 145px; }
    .documentation-tabs { overflow-x: auto; }
    .documentation-tab { flex: 1 0 auto; }
    .documentation-history-toolbar-head { align-items: flex-start; flex-direction: column; gap: 12px; }
    .documentation-history-filter-grid { grid-template-columns: 1fr; padding: 14px; }
    .documentation-history-refresh { grid-column: auto; width: 100%; }
    .documentation-history-row { grid-template-columns: 1fr; }
  }
/* ── Admin · Biometric Devices ─────────────────────────────────────────── */
.biometric-page-head { align-items: flex-end; }
.biometric-subtabs {
  display:flex; gap:6px; padding:6px; margin-bottom:18px; overflow-x:auto;
  background:var(--bg3); border:1px solid var(--border); border-radius:12px;
}
.biometric-subtab {
  appearance:none; border:0; background:transparent; color:var(--text2);
  padding:11px 16px; border-radius:9px; white-space:nowrap; cursor:pointer;
  font:inherit; font-size:13px; font-weight:700; transition:.18s ease;
}
.biometric-subtab:hover { background:var(--bg2); color:var(--text); }
.biometric-subtab.active { background:var(--bg2); color:var(--accent); box-shadow:0 1px 4px rgba(15,23,42,.09); }
.biometric-panel[hidden] { display:none !important; }
.biometric-health-alert,.attendance-biometric-health { display:none; }
.biometric-health-alert.visible,.attendance-biometric-health.visible {
  display:flex; align-items:flex-start; gap:10px; margin:0 0 16px; padding:12px 14px;
  border:1px solid #f6c453; border-left:4px solid var(--warn); border-radius:10px;
  background:#fff8df; color:#76530b; font-size:12px; line-height:1.5;
}
.attendance-biometric-health.visible { margin:14px 0 0; }
.biometric-health-alert strong,.attendance-biometric-health strong { color:#5d4008; }
.biometric-health-alert small,.attendance-biometric-health small { display:block; margin-top:2px; color:#76530b; }
.biometric-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:16px; }
.biometric-summary-card { padding:18px 20px; display:flex; flex-direction:column; gap:3px; }
.biometric-summary-label { color:var(--text3); text-transform:uppercase; letter-spacing:.05em; font-size:11px; font-weight:800; }
.biometric-summary-card strong { color:var(--text); font-size:28px; line-height:1.15; }
.biometric-summary-card strong.metric-1 { color:var(--success); }
.biometric-summary-card strong.metric-2 { color:var(--danger); }
.biometric-summary-card small { color:var(--text3); font-size:11px; }
.biometric-card-head,.biometric-catalog-head,.biometric-device-card-top,.biometric-card-footer,.biometric-instruction-title {
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
}
.biometric-card-head { align-items:center; margin-bottom:16px; }
.biometric-card-head .card-title,.biometric-catalog-head .card-title { margin-bottom:4px; }
.biometric-card-head p,.biometric-catalog-head p { margin:0; color:var(--text3); font-size:13px; }
.biometric-configured-table td { vertical-align:middle; }
.biometric-configured-table td strong,.biometric-configured-table td code,.biometric-configured-table td small { display:block; }
.biometric-configured-table td code { margin-top:4px; color:var(--text3); font-size:11px; }
.biometric-configured-table td small { margin-top:4px; color:var(--text3); font-size:10px; }
.biometric-loading-cell { padding:34px !important; text-align:center; color:var(--text3); }
.biometric-loading-cell strong { color:var(--text); }
.biometric-error { color:var(--danger); }
.biometric-token-button { border:0; background:var(--bg3); color:var(--text2); padding:6px 8px; border-radius:6px; font:11px/1.2 monospace; cursor:pointer; }
.biometric-token-button:hover { color:var(--accent); background:var(--accent-light); }
.biometric-catalog-note,.biometric-warning,.biometric-modal-note {
  padding:11px 13px; margin:16px 0; border-radius:9px; border:1px solid var(--border);
  background:var(--bg3); color:var(--text2); font-size:12px; line-height:1.55;
}
.biometric-device-catalog { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:16px; }
.biometric-device-card { border:1px solid var(--border); border-radius:12px; padding:17px; background:var(--bg2); display:flex; min-height:245px; flex-direction:column; }
.biometric-device-card h3,.biometric-instruction-title h3 { margin:3px 0 0; color:var(--text); font-size:18px; }
.biometric-vendor { color:var(--text3); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.biometric-connection-tag { display:inline-flex; padding:5px 8px; border-radius:999px; font-size:10px; font-weight:800; text-align:center; }
.biometric-connection-tag.direct { color:#08783e; background:#dcfce7; }
.biometric-connection-tag.bridge { color:#805400; background:#fef3c7; }
.biometric-type { color:var(--text2); font-size:13px; margin:14px 0 10px; }
.biometric-feature-list { display:flex; flex-direction:column; gap:6px; color:var(--text3); font-size:12px; flex:1; }
.biometric-feature-list span::first-letter { color:var(--success); }
.biometric-card-footer { align-items:center; justify-content:flex-end; margin-top:16px; padding-top:13px; border-top:1px solid var(--border); }
.biometric-instruction-layout { display:grid; grid-template-columns:300px minmax(0,1fr); gap:16px; }
.biometric-instruction-aside { align-self:start; }
.biometric-instruction-aside label { display:block; font-size:12px; font-weight:700; margin-bottom:6px; }
.biometric-instruction-actions { display:grid; gap:8px; margin-top:14px; }
.biometric-instruction-title { align-items:center; padding-bottom:15px; border-bottom:1px solid var(--border); }
.biometric-warning { border-color:#f6c453; background:#fff8df; color:#76530b; }
.biometric-step-list { margin:20px 0; padding-left:25px; display:grid; gap:12px; color:var(--text2); }
.biometric-step-list li { padding-left:4px; line-height:1.5; }
.biometric-endpoint-box { display:grid; gap:7px; padding:15px; background:#0f172a; color:#fff; border-radius:10px; }
.biometric-endpoint-box code { color:#93c5fd; overflow-wrap:anywhere; }
.biometric-endpoint-meta { color:#94a3b8; font-size:11px; }
.biometric-help-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:16px; }
.biometric-help-item { padding:13px; background:var(--bg3); border-radius:9px; }
.biometric-help-grid strong { font-size:12px; }
.biometric-help-grid p { margin:5px 0 0; color:var(--text3); font-size:11px; line-height:1.5; }
.biometric-modal-note { margin-top:0; }
.biometric-modal-note.direct { border-color:#a7e8c3; background:#ecfdf3; color:#126b3d; }
.biometric-modal-note.bridge { border-color:#f6d48a; background:#fff9e9; color:#76530b; }
.dashboard-biometric-card { margin-bottom:12px; border-left:4px solid var(--border); padding:16px; }
.dashboard-biometric-card.connected { border-left-color:var(--success); }
.dashboard-biometric-card.attention { border-left-color:var(--warn); }
.dashboard-biometric-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.dashboard-biometric-head .card-title { margin-bottom:4px; }
.dashboard-biometric-head p { margin:0; color:var(--text3); font-size:12px; }
.dashboard-biometric-devices { display:grid; gap:8px; margin-top:13px; }
.dashboard-biometric-device { display:grid; grid-template-columns:minmax(180px,1fr) auto auto; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:9px; background:var(--bg2); }
.dashboard-biometric-device-info { min-width:0; }
.dashboard-biometric-device-info strong { display:block; color:var(--text); font-size:13px; }
.dashboard-biometric-device-info small { display:block; margin-top:2px; color:var(--text3); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.biometric-reconnect-subtitle { margin-top:3px; color:var(--text3); font-size:12px; }
.biometric-reconnect-status { display:flex; align-items:flex-start; gap:10px; padding:13px 14px; border:1px solid var(--border); border-left:4px solid var(--text3); border-radius:10px; background:var(--bg3); color:var(--text2); font-size:12px; line-height:1.5; }
.biometric-reconnect-status strong,.biometric-reconnect-status small { display:block; }
.biometric-reconnect-status small { margin-top:2px; color:inherit; opacity:.82; }
.biometric-reconnect-status.connected { border-color:#a7e8c3; border-left-color:var(--success); background:#ecfdf3; color:#126b3d; }
.biometric-reconnect-status.waiting { border-color:#f6d48a; border-left-color:var(--warn); background:#fff9e9; color:#76530b; }
.biometric-reconnect-status.error { border-color:#fecaca; border-left-color:var(--danger); background:#fff1f2; color:#9f1239; }
.biometric-reconnect-explanation { margin:14px 0; padding:12px 14px; border-radius:9px; background:var(--accent-light); color:var(--text2); font-size:12px; line-height:1.55; }
.biometric-reconnect-explanation strong { color:var(--text); }
.biometric-reconnect-explanation p { margin:4px 0 0; }
.biometric-reconnect-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.biometric-reconnect-wide { grid-column:1 / -1; }
.biometric-reconnect-grid input { background:var(--bg3); font-family:monospace; font-size:12px; }
.biometric-reconnect-steps { margin:14px 0; padding-left:24px; display:grid; gap:7px; color:var(--text2); font-size:12px; line-height:1.5; }
.biometric-reconnect-actions { display:flex; flex-wrap:wrap; gap:10px; }
.form-hint { margin-top:5px; color:var(--text3); font-size:11px; }
.mfa-required-grid { display:grid; grid-template-columns:minmax(180px,220px) minmax(0,1fr); gap:20px; align-items:center; }
.field-tracking-setting { display:flex; align-items:flex-start; gap:10px; padding:13px; margin-bottom:12px; border:1px solid var(--border); border-radius:10px; cursor:pointer; background:var(--bg2); }
.field-tracking-setting input { width:auto; margin:3px 0 0; }
.field-tracking-setting small { display:block; margin-top:4px; color:var(--text3); font-weight:400; line-height:1.45; }
.field-tracking-header,.field-tracking-disabled { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:14px; }
.field-tracking-header h3 { margin:0 0 3px; font-size:20px; }.field-tracking-header p,.field-tracking-disabled p { margin:0; color:var(--text3); font-size:12px; }
.field-privacy-banner { padding:12px 14px; margin-bottom:14px; border:1px solid #bcd5ff; border-left:4px solid var(--accent); border-radius:10px; background:var(--accent-light); color:var(--text2); font-size:12px; line-height:1.5; }
.field-live-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:14px; margin-bottom:16px; }
.field-live-card { padding:16px; border:1px solid var(--border); border-left:4px solid var(--success); border-radius:12px; background:var(--bg2); }
.field-live-card.stale { border-left-color:var(--warn); }.field-live-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.field-live-head strong,.field-live-head small { display:block; }.field-live-head small { margin-top:4px; color:var(--text3); font-size:11px; }
.field-live-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:14px 0; }.field-live-stat { padding:9px; border-radius:8px; background:var(--bg3); color:var(--text3); font-size:10px; }
.field-live-stats b { display:block; margin-bottom:3px; color:var(--text); font-size:12px; }.field-live-actions,.field-route-links { display:flex; gap:8px; flex-wrap:wrap; }
.field-tracking-empty { padding:30px; text-align:center; color:var(--text3); }.field-tracking-loading { padding:26px; text-align:center; color:var(--text3); }
.field-tracking-error { padding:16px; border:1px solid #fecaca; border-radius:10px; background:#fff1f2; color:#9f1239; }.field-tracking-error p { margin:6px 0 0; }
.field-route-summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }.field-route-summary-item { padding:12px; border-radius:10px; background:var(--bg3); }
.field-route-summary-grid small,.field-route-summary-grid strong { display:block; }.field-route-summary-grid small { color:var(--text3); font-size:10px; }.field-route-summary-grid strong { margin-top:4px; text-transform:capitalize; }
.field-route-map { overflow:hidden; border:1px solid var(--border); border-radius:12px; background:#f8fbff; }.field-route-map svg { display:block; width:100%; height:auto; min-height:240px; }
.field-route-legend { display:flex; align-items:center; gap:16px; padding:9px 12px; border-top:1px solid var(--border); color:var(--text2); font-size:11px; }.field-route-legend small { margin-left:auto; color:var(--text3); }
.field-route-legend i { display:inline-block; width:9px; height:9px; margin-right:4px; border-radius:50%; }.field-route-legend .start { background:#16a364; }.field-route-legend .end { background:#e34b4b; }
.field-route-details { margin-top:14px; color:var(--text2); font-size:12px; }.field-route-details p { margin:6px 0; }.field-route-warning { padding:9px; border-radius:8px; background:#fff4dd; color:#8a5500; }
@media (max-width:1100px) {
  .biometric-device-catalog { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .biometric-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .biometric-help-grid { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  .field-route-summary-grid { grid-template-columns:repeat(2,1fr); }.field-route-legend { flex-wrap:wrap; }.field-route-legend small { width:100%; margin-left:0; }
  .biometric-device-catalog,.biometric-summary-grid,.biometric-instruction-layout { grid-template-columns:1fr; }
  .biometric-card-head,.biometric-catalog-head { align-items:stretch; flex-direction:column; }
  .dashboard-biometric-head { align-items:stretch; flex-direction:column; }
  .dashboard-biometric-device { grid-template-columns:1fr auto; }
  .dashboard-biometric-device .badge { justify-self:start; }
  .dashboard-biometric-device .btn { grid-column:2; grid-row:1 / span 2; }
  .biometric-reconnect-grid { grid-template-columns:1fr; }
  .biometric-reconnect-wide { grid-column:auto; }
  .mfa-required-grid { grid-template-columns:1fr; }
}

  /* ================================================================
     USER STATES
     Empty · Loading · Error · Offline · Slow · No results ·
     Permission denied · Session expired · Validation · Success

     Additive only. Every selector here is a NEW class, so nothing
     above is overridden and no existing screen changes until a call
     site opts in. Styled through classes, never #id, so later edits
     to these rules are not silently outranked (see CSS Specificity
     in CLAUDE.md).
     ================================================================ */

  /* ---- the shared state block -------------------------------------
     One layout for all of them. Only the accent and the icon change,
     so an empty list and a failed load are recognisably the same
     component rather than two unrelated designs. */
  .ui-state {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-align: center;
    padding: 48px 24px; gap: 4px;
  }
  .ui-state-compact { padding: 28px 20px; }
  .ui-state-icon {
    width: 48px; height: 48px; margin-bottom: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; line-height: 1;
    border-radius: 50%;
    background: var(--bg3); color: var(--text3);
  }
  .ui-state-title {
    font-size: 15px; font-weight: 600; color: var(--text);
    margin: 0; line-height: 1.4;
  }
  .ui-state-body {
    font-size: 13px; color: var(--text3); margin: 0;
    max-width: 420px; line-height: 1.6;
  }
  .ui-state-actions {
    display: flex; gap: 8px; flex-wrap: wrap;
    justify-content: center; margin-top: 16px;
  }
  /* The technical detail behind a failure. Present for whoever needs
     it, quiet enough not to alarm whoever does not. */
  .ui-state-detail {
    margin-top: 14px; max-width: 520px;
    font-family: var(--mono); font-size: 11px; line-height: 1.5;
    color: var(--text3); background: var(--bg3);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 8px 10px; text-align: left; word-break: break-word;
  }

  /* ---- per-state accents ---- */
  .ui-state-error   .ui-state-icon { background: var(--danger-bg);  color: var(--danger); }
  .ui-state-denied  .ui-state-icon { background: var(--warn-bg);    color: var(--warn); }
  .ui-state-search  .ui-state-icon { background: var(--info-bg);    color: var(--info); }
  .ui-state-success .ui-state-icon { background: var(--success-bg); color: var(--success); }

  /* ---- inside a table ---------------------------------------------
     A state cell must not inherit the row padding and hover that make
     it look like a record you could click. */
  td.ui-state-cell {
    padding: 0 !important; background: var(--bg2);
  }
  tr.ui-state-row:hover td { background: var(--bg2); }

  /* ---- loading: skeleton ------------------------------------------
     Shows the SHAPE of what is coming, so the page does not jump when
     it arrives. Preferred over a spinner wherever the result is a
     table or a set of cards. */
  .ui-skeleton {
    display: block; height: 12px; border-radius: 4px;
    background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 37%, var(--bg3) 63%);
    background-size: 400% 100%;
    animation: ui-shimmer 1.4s ease-in-out infinite;
  }
  .ui-skeleton-sm { width: 40%; }
  .ui-skeleton-md { width: 65%; }
  .ui-skeleton-lg { width: 90%; }
  @keyframes ui-shimmer {
    from { background-position: 100% 50%; }
    to   { background-position: 0 50%; }
  }
  /* Respect a reduced-motion preference: hold a still placeholder
     rather than animating. */
  @media (prefers-reduced-motion: reduce) {
    .ui-skeleton { animation: none; background: var(--bg3); }
  }

  /* ---- loading: inline spinner for buttons and small areas ---- */
  .ui-spinner {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid var(--border); border-top-color: var(--accent);
    border-radius: 50%; animation: spin 0.8s linear infinite;
    vertical-align: -2px;
  }
  .ui-spinner-light { border-color: rgba(255,255,255,.4); border-top-color: #fff; }
  @media (prefers-reduced-motion: reduce) { .ui-spinner { animation-duration: 2.4s; } }

  /* A button that is working: keeps its width so the layout does not
     shift, and stops accepting a second click. */
  .btn.is-busy { position: relative; pointer-events: none; opacity: .75; }

  /* The spinner is appended, not substituted: several handlers set
     their own label while they run ("Saving…", "Sending…") and
     replacing the contents would fight them and restore the wrong
     text. A trailing ring leaves whatever the handler wrote intact. */
  .btn.is-busy::after {
    content: ''; display: inline-block;
    width: 12px; height: 12px; margin-left: 7px;
    border: 2px solid currentColor; border-top-color: transparent;
    border-radius: 50%; vertical-align: -2px;
    animation: spin .8s linear infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .btn.is-busy::after { animation-duration: 2.4s; }
  }

  /* ---- slow network notice ----------------------------------------
     Appears only after a wait long enough to feel broken. Says the
     request is still running, which is different from saying it
     failed. */
  .ui-slow-notice {
    display: flex; align-items: center; gap: 8px;
    justify-content: center; margin-top: 14px;
    font-size: 12px; color: var(--warn);
  }

  /* ---- offline banner ---------------------------------------------
     body.app-offline is already set by initOfflineHandler() in
     security.js; this only gives it a considered appearance. Top of
     the viewport, because the bottom edge is where toasts and sticky
     table footers already compete. */
  .ui-net-banner {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 9998;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 7px 16px; font-size: 12.5px; font-weight: 600;
    color: #fff; background: var(--warn);
    box-shadow: 0 -2px 8px rgba(0,0,0,.14);
    transform: translateY(100%); transition: transform .22s ease;
  }
  body.app-offline .ui-net-banner { transform: translateY(0); }
  .ui-net-banner-restored { background: var(--success); }

  /* ---- session expired overlay ------------------------------------
     A blocking panel, not a toast. A three-second message is the wrong
     shape for "nothing you do from here will save". */
  .ui-blocker {
    position: fixed; inset: 0; z-index: 10050;
    display: none; align-items: center; justify-content: center;
    padding: 24px; background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
  }
  .ui-blocker.is-open { display: flex; }
  .ui-blocker-panel {
    width: 100%; max-width: 420px;
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(15,23,42,.28);
    animation: fadeIn .18s ease;
  }

  /* ---- confirmation dialog ----------------------------------------
     Replaces the browser's own confirm(), which cannot be styled, sits
     outside the app's visual language and names the site in its
     heading. Same panel as the session blocker so the two read as one
     family. Backdrop clicks are deliberately inert: the only answers
     are the two buttons and Esc, matching the modal rule above. */
  .ui-confirm { max-width: 440px; }
  .ui-confirm-body { padding: 22px 22px 4px; }
  .ui-confirm-title {
    margin: 0 0 7px; font-size: 15px; font-weight: 700;
    color: var(--text); line-height: 1.4;
  }
  .ui-confirm-message {
    margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text2);
    white-space: pre-line; word-break: break-word;
  }
  /* The consequence, spelled out where it cannot be missed. */
  .ui-confirm-detail {
    margin: 12px 0 0; padding: 9px 11px;
    border: 1px solid var(--border); border-left: 3px solid var(--warn);
    border-radius: var(--radius);
    background: var(--bg3); color: var(--text3);
    font-size: 12px; line-height: 1.55; word-break: break-word;
  }
  .ui-confirm-actions {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 18px 22px 20px;
  }
  .ui-confirm-actions .btn { min-width: 96px; justify-content: center; }

  /* ---- the prompt variant -----------------------------------------
     Replaces window.prompt(), which is a bare one-line box with no
     label, no default worth the name and no way to say WHY an answer
     was refused. */
  .ui-prompt .ui-confirm-body { padding-bottom: 2px; }
  .ui-prompt-field { margin-top: 14px; }
  .ui-prompt-label {
    display: block; margin-bottom: 6px;
    font-size: 12px; font-weight: 600; color: var(--text2); line-height: 1.45;
  }
  .ui-prompt-input {
    width: 100%; box-sizing: border-box;
    padding: 9px 11px; font: inherit; font-size: 13.5px;
    color: var(--text); background: var(--bg);
    border: 1px solid var(--border); border-radius: var(--radius);
  }
  .ui-prompt-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
  .ui-prompt-textarea { resize: vertical; min-height: 68px; line-height: 1.55; }
  /* Empty until there is something to say, so the dialog does not jump
     when the reason appears. */
  .ui-prompt-hint {
    margin: 6px 0 0; min-height: 15px;
    font-size: 11.5px; line-height: 1.3; color: var(--text3);
  }
  .ui-prompt-hint.is-error { color: var(--danger); }
  .ui-confirm-actions .btn[disabled] { opacity: .5; pointer-events: none; }
  @media (max-width: 520px) {
    .ui-confirm-actions { flex-direction: column-reverse; }
    .ui-confirm-actions .btn { width: 100%; }
  }

  /* ---- field validation -------------------------------------------
     The message sits with the field. A toast names a problem the eye
     then has to go hunting for. */
  .ui-invalid { border-color: var(--danger) !important; }
  .ui-invalid:focus { outline-color: var(--danger); }
  .ui-field-error {
    display: flex; align-items: flex-start; gap: 5px;
    margin-top: 5px; font-size: 11.5px; line-height: 1.45;
    color: var(--danger);
  }
  .ui-field-error::before { content: '!'; font-weight: 700; }
  /* A summary at the top of a long form, so a problem below the fold
     is still discoverable. */
  .ui-form-errors {
    margin: 0 0 16px; padding: 11px 13px;
    border: 1px solid var(--danger); border-left-width: 3px;
    border-radius: var(--radius);
    background: var(--danger-bg); color: var(--text);
    font-size: 12.5px; line-height: 1.55;
  }
  .ui-form-errors-title { font-weight: 700; color: var(--danger); }
  .ui-form-errors ul { margin: 6px 0 0; padding-left: 18px; }

  /* ---- success ----------------------------------------------------
     For an outcome that should stay on screen and be read, rather than
     a toast that leaves after three seconds. */
  .ui-success-panel {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: var(--radius);
    border: 1px solid var(--success); border-left-width: 3px;
    background: var(--success-bg);
    font-size: 13px; line-height: 1.55; color: var(--text);
  }
  .ui-success-panel-icon { color: var(--success); font-weight: 700; }

  @media (max-width: 720px) {
    .ui-state { padding: 34px 16px; }
    .ui-state-body { font-size: 12.5px; }
  }