/* ==========================================================================
   MNS HR Pro  —  Kamaran Motors
   Visual direction: a payroll ledger. Deep petrol ink chrome, cool paper
   field, brass rules where a figure is authoritative. Kurdish script leads
   the typography; numbers are set in a tabular mono so columns line up.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;600;700&family=Noto+Sans+Arabic:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --ink:        #12202B;
  --ink-2:      #1B2E3D;
  --ink-3:      #27485F;
  --ink-soft:   #47606F;

  --paper:      #F1F4F2;
  --surface:    #FFFFFF;
  --surface-2:  #F8FAF8;

  --brass:      #B8862B;
  --brass-lit:  #D9A94A;
  --brass-soft: #F5EAD2;

  --credit:     #1B6B57;
  --credit-soft:#E3F0EB;
  --debit:      #A6402C;
  --debit-soft: #F8E7E2;
  --info:       #2A5F86;
  --info-soft:  #E3EDF5;
  --warn:       #8A6414;
  --warn-soft:  #FBEFD5;

  --line:       #DCE2DD;
  --line-2:     #EDF0EE;
  --muted:      #667972;

  --r:    6px;
  --r-lg: 10px;
  --shadow:    0 1px 2px rgba(18,32,43,.06), 0 4px 14px rgba(18,32,43,.05);
  --shadow-lg: 0 10px 40px rgba(18,32,43,.16);

  --sans:    'Noto Sans Arabic', 'Speda', 'NRT', 'Rabar', 'Ali_K_Samik', 'Segoe UI', system-ui, sans-serif;
  --display: 'Noto Kufi Arabic', 'Speda', 'NRT', var(--sans);
  --mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --sidebar: 246px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4 { font-family: var(--display); font-weight: 600; margin: 0 0 .5rem; line-height: 1.35; }
h1 { font-size: 1.45rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.02rem; }

a { color: var(--ink-3); text-decoration: none; }
a:hover { color: var(--brass); }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ------------------------------------------------------------ app shell */

.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar); flex: 0 0 var(--sidebar);
  background: var(--ink); color: #C9D6DC;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

.brand {
  padding: 1.1rem 1.15rem .95rem;
  border-bottom: 1px solid rgba(255,255,255,.09);
  display: flex; align-items: center; gap: .7rem;
}
.brand__mark {
  width: 34px; height: 34px; flex: none; border-radius: 7px;
  background: linear-gradient(150deg, var(--brass-lit), var(--brass));
  color: var(--ink); font-family: var(--display); font-weight: 700;
  display: grid; place-items: center; font-size: .82rem; letter-spacing: -.02em;
}
.brand__name { font-family: var(--display); font-weight: 600; color: #fff; font-size: .95rem; }
.brand__sub  { font-size: .72rem; color: #7E96A2; margin-top: -2px; }

.nav { padding: .6rem .55rem 1.5rem; flex: 1; }
.nav__label {
  font-size: .68rem; letter-spacing: .06em; color: #6C8593;
  padding: .95rem .65rem .3rem; font-weight: 600;
}
.nav a {
  display: flex; align-items: center; gap: .6rem;
  padding: .52rem .65rem; margin-bottom: 1px;
  border-radius: var(--r); color: #C1D0D7; font-size: .875rem;
  transition: background .13s, color .13s;
}
.nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav a.is-active {
  background: var(--ink-3); color: #fff; font-weight: 500;
  box-shadow: inset 2px 0 0 var(--brass);
}
[dir="rtl"] .nav a.is-active { box-shadow: inset -2px 0 0 var(--brass); }
.nav .ic { width: 17px; height: 17px; flex: none; opacity: .82; }

.sidebar__foot {
  padding: .8rem 1rem; border-top: 1px solid rgba(255,255,255,.09);
  font-size: .72rem; color: #6C8593;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: .7rem 1.4rem; display: flex; align-items: center; gap: 1rem;
  position: sticky; top: 0; z-index: 30;
}
.topbar__title { font-family: var(--display); font-weight: 600; font-size: 1.02rem; }
.topbar__crumb { font-size: .76rem; color: var(--muted); }
.topbar__spacer { flex: 1; }

.userchip {
  display: flex; align-items: center; gap: .55rem;
  padding: .3rem .6rem; border-radius: 40px; background: var(--surface-2);
  border: 1px solid var(--line); font-size: .8rem;
}
.userchip__av {
  width: 26px; height: 26px; border-radius: 50%; background: var(--ink-3);
  color: #fff; display: grid; place-items: center; font-size: .72rem; font-weight: 600;
}
.userchip__role { color: var(--muted); font-size: .72rem; }

.content { padding: 1.4rem; flex: 1; }
.page-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.page-head__text { flex: 1; min-width: 220px; }
.page-head p { margin: .15rem 0 0; color: var(--muted); font-size: .85rem; }
.page-head__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ------------------------------------------------------------- controls */

.btn {
  display: inline-flex; align-items: center; gap: .42rem;
  padding: .48rem .95rem; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font-family: var(--sans); font-size: .855rem; font-weight: 500;
  cursor: pointer; transition: .14s; white-space: nowrap; line-height: 1.4;
}
.btn:hover { border-color: var(--ink-soft); background: var(--surface-2); }
.btn--primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--primary:hover { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.btn--brass { background: var(--brass); border-color: var(--brass); color: #21170A; }
.btn--brass:hover { background: var(--brass-lit); border-color: var(--brass-lit); color: #21170A; }
.btn--danger { color: var(--debit); border-color: #E9CDC6; }
.btn--danger:hover { background: var(--debit-soft); border-color: var(--debit); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--sm { padding: .3rem .6rem; font-size: .78rem; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.field { margin-bottom: .85rem; }
.field label {
  display: block; font-size: .79rem; font-weight: 500;
  color: var(--ink-soft); margin-bottom: .28rem;
}
.field .hint { font-size: .72rem; color: var(--muted); margin-top: .25rem; }

input[type=text], input[type=number], input[type=date], input[type=password],
input[type=email], select, textarea {
  width: 100%; padding: .48rem .65rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--ink);
  font-family: var(--sans); font-size: .875rem; transition: .14s;
}
input[type=number] { font-family: var(--mono); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--ink-3);
  box-shadow: 0 0 0 3px rgba(39,72,95,.11);
}
input:disabled, select:disabled { background: var(--surface-2); color: var(--muted); }
textarea { min-height: 76px; resize: vertical; }

.grid   { display: grid; gap: .85rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.switch { display: flex; align-items: center; gap: .5rem; }
.switch input { width: 16px; height: 16px; accent-color: var(--ink-3); }

/* ---------------------------------------------------------------- cards */

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow); margin-bottom: 1.1rem;
}
.card__head {
  padding: .8rem 1.05rem; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.card__head h3 { margin: 0; }
.card__head .spacer { flex: 1; }
.card__body { padding: 1.05rem; }
.card__body--flush { padding: 0; }
.card__foot {
  padding: .7rem 1.05rem; border-top: 1px solid var(--line-2);
  background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg);
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
}

/* ------------------------------------------------------- stat / KPI row */

.stats { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(178px,1fr)); margin-bottom: 1.1rem; }
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: .85rem 1rem; box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.stat::after {
  content: ''; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 3px; height: 100%; background: var(--line);
}
.stat--credit::after { background: var(--credit); }
.stat--debit::after  { background: var(--debit); }
.stat--brass::after  { background: var(--brass); }
.stat--info::after   { background: var(--info); }
.stat__label { font-size: .755rem; color: var(--muted); font-weight: 500; }
.stat__value { font-family: var(--mono); font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; margin-top: .1rem; }
.stat__sub   { font-size: .73rem; color: var(--muted); margin-top: .1rem; }

/* ------------------------------ SIGNATURE: the payroll flow ledger strip */

.flow {
  background: var(--ink); border-radius: var(--r-lg); padding: 1rem 1.15rem 1.1rem;
  color: #D6E2E7; margin-bottom: 1.1rem; box-shadow: var(--shadow);
}
.flow__title {
  font-family: var(--display); font-size: .8rem; color: #83A0AD;
  margin-bottom: .75rem; display: flex; align-items: center; gap: .55rem;
}
.flow__title::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.11); }
.flow__bar { display: flex; height: 30px; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,.06); }
.flow__seg { position: relative; min-width: 2px; transition: filter .15s; }
.flow__seg:hover { filter: brightness(1.18); }
.flow__seg--gross     { background: #35637F; }
.flow__seg--additions { background: var(--credit); }
.flow__seg--tax       { background: #8E6A1F; }
.flow__seg--sc        { background: #6B4A8A; }
.flow__seg--ded       { background: var(--debit); }
.flow__seg--net       { background: var(--brass); }
.flow__legend { display: flex; flex-wrap: wrap; gap: .35rem 1.3rem; margin-top: .75rem; }
.flow__item { display: flex; align-items: center; gap: .42rem; font-size: .77rem; }
.flow__dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.flow__amt { font-family: var(--mono); font-weight: 500; color: #fff; }
.flow__key { color: #8FA9B5; }

/* --------------------------------------------------------------- tables */

.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: .845rem; }
table.tbl th {
  background: var(--surface-2); text-align: start; font-weight: 600;
  color: var(--ink-soft); font-size: .755rem; padding: .55rem .7rem;
  border-bottom: 2px solid var(--brass-soft); white-space: nowrap; position: sticky; top: 0; z-index: 5;
}
table.tbl td { padding: .5rem .7rem; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl tbody tr.is-locked { background: #FCFAF3; }
table.tbl .n { font-family: var(--mono); text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tbl .n--credit { color: var(--credit); }
table.tbl .n--debit  { color: var(--debit); }
table.tbl .n--strong { font-weight: 600; }
table.tbl tfoot td {
  background: var(--ink); color: #fff; font-weight: 600;
  border-top: 2px solid var(--brass); padding: .6rem .7rem;
}
table.tbl tfoot td.n { font-family: var(--mono); }
table.tbl .col-narrow { width: 1%; white-space: nowrap; }
.tbl--compact td, .tbl--compact th { padding: .38rem .55rem; font-size: .8rem; }

.row-actions { display: flex; gap: .25rem; }

/* --------------------------------------------------------------- badges */

.badge {
  display: inline-block; padding: .13rem .5rem; border-radius: 20px;
  font-size: .72rem; font-weight: 500; white-space: nowrap;
}
.badge--ok    { background: var(--credit-soft); color: var(--credit); }
.badge--bad   { background: var(--debit-soft);  color: var(--debit); }
.badge--warn  { background: var(--warn-soft);   color: var(--warn); }
.badge--info  { background: var(--info-soft);   color: var(--info); }
.badge--muted { background: var(--line-2);      color: var(--muted); }
.badge--brass { background: var(--brass-soft);  color: #7A5A14; }

/* --------------------------------------------------------------- alerts */

.alert {
  padding: .7rem .95rem; border-radius: var(--r); margin-bottom: 1rem;
  font-size: .85rem; border: 1px solid; display: flex; gap: .6rem; align-items: flex-start;
}
.alert--ok   { background: var(--credit-soft); border-color: #BDDCD2; color: #12503F; }
.alert--bad  { background: var(--debit-soft);  border-color: #EFC9C0; color: #7C2E1F; }
.alert--warn { background: var(--warn-soft);   border-color: #E8D3A2; color: #6B4E10; }
.alert--info { background: var(--info-soft);   border-color: #C3D8E7; color: #1D4763; }
.alert ul { margin: .3rem 0 0; padding-inline-start: 1.1rem; }

.empty { padding: 2.6rem 1rem; text-align: center; color: var(--muted); }
.empty__title { font-family: var(--display); font-size: 1rem; color: var(--ink-soft); margin-bottom: .3rem; }

/* --------------------------------------------------------------- filter */

.filterbar {
  display: flex; gap: .55rem; align-items: flex-end; flex-wrap: wrap;
  padding: .8rem 1.05rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 1.05rem;
}
.filterbar .field { margin: 0; min-width: 140px; }

.tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--line); margin-bottom: 1.05rem; flex-wrap: wrap; }
.tabs a {
  padding: .48rem .85rem; font-size: .855rem; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500;
}
.tabs a:hover { color: var(--ink); }
.tabs a.is-active { color: var(--ink); border-bottom-color: var(--brass); }

/* ----------------------------------------------------- login / installer */

.auth-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background: radial-gradient(1200px 620px at 70% -10%, #1D3646 0%, var(--ink) 55%);
}
.auth-card {
  width: 100%; max-width: 384px; background: var(--surface);
  border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden;
}
.auth-card__head { padding: 1.7rem 1.7rem 1.1rem; text-align: center; }
.auth-card__head .brand__mark { width: 46px; height: 46px; font-size: 1rem; margin: 0 auto .8rem; }
.auth-card__body { padding: 0 1.7rem 1.7rem; }
.auth-card__foot {
  padding: .85rem 1.7rem; background: var(--surface-2);
  border-top: 1px solid var(--line-2); font-size: .75rem; color: var(--muted); text-align: center;
}
.install-wrap { max-width: 720px; margin: 2rem auto; padding: 0 1rem; }
.step-list { counter-reset: s; list-style: none; padding: 0; margin: 0; }
.step-list li {
  counter-increment: s; padding: .55rem 0 .55rem 0;
  border-bottom: 1px solid var(--line-2); display: flex; gap: .7rem; align-items: flex-start; font-size: .87rem;
}
.step-list li::before {
  content: counter(s); flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: #fff; font-family: var(--mono); font-size: .72rem;
  display: grid; place-items: center;
}
.step-list li.done::before { content: '✓'; background: var(--credit); }
.step-list li.fail::before { content: '×'; background: var(--debit); }

/* ------------------------------------------------------- payslip layout */

.slip {
  background: #fff; width: 190mm; margin: 0 auto 8mm; padding: 10mm 11mm;
  border: 1px solid var(--line); box-shadow: var(--shadow); page-break-after: always;
}
.slip:last-child { page-break-after: auto; }
.slip__head { display: flex; align-items: flex-start; gap: 1rem; padding-bottom: .7rem; border-bottom: 2px solid var(--brass); }
.slip__co   { flex: 1; }
.slip__co-ku { font-family: var(--display); font-size: 1.12rem; font-weight: 700; }
.slip__co-en { font-size: .8rem; color: var(--muted); letter-spacing: .02em; }
.slip__title { text-align: end; }
.slip__title strong { font-family: var(--display); font-size: 1rem; display: block; }
.slip__title span { font-size: .78rem; color: var(--muted); }

.slip__meta { display: grid; grid-template-columns: repeat(2,1fr); gap: 0; margin: .8rem 0; border: 1px solid var(--line); }
.slip__meta div { padding: .34rem .6rem; border-bottom: 1px solid var(--line-2); font-size: .82rem; display: flex; gap: .4rem; }
.slip__meta div:nth-child(odd) { border-inline-end: 1px solid var(--line-2); }
.slip__meta b { color: var(--muted); font-weight: 500; min-width: 92px; }

.slip__cols { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-bottom: .8rem; }
.slip__box { border: 1px solid var(--line); }
.slip__box h4 {
  margin: 0; padding: .38rem .6rem; background: var(--surface-2);
  border-bottom: 1px solid var(--line); font-size: .82rem;
}
.slip__box--credit h4 { background: var(--credit-soft); color: var(--credit); }
.slip__box--debit  h4 { background: var(--debit-soft);  color: var(--debit); }
.slip__line { display: flex; justify-content: space-between; padding: .28rem .6rem; font-size: .81rem; border-bottom: 1px solid var(--line-2); }
.slip__line:last-child { border-bottom: 0; }
.slip__line span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.slip__line--sum { background: var(--surface-2); font-weight: 600; border-top: 1px solid var(--line); }

.slip__net {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--ink); color: #fff; padding: .6rem .9rem; border-radius: 4px; margin-bottom: .8rem;
}
.slip__net b { font-family: var(--display); font-size: .95rem; }
.slip__net .amt { font-family: var(--mono); font-size: 1.25rem; font-weight: 600; color: var(--brass-lit); }

.slip__leave { display: flex; gap: 1.4rem; font-size: .8rem; padding: .4rem .6rem; border: 1px solid var(--line); margin-bottom: .8rem; }
.slip__notes { font-size: .74rem; color: var(--muted); line-height: 1.55; }
.slip__sign { display: flex; justify-content: space-between; margin-top: 1.6rem; font-size: .8rem; }
.slip__sign div { text-align: center; min-width: 160px; }
.slip__sign .rule { border-top: 1px solid var(--ink); margin-top: 1.8rem; padding-top: .2rem; color: var(--muted); font-size: .74rem; }

/* --------------------------------------------------------------- print */

.print-only { display: none; }

@media print {
  @page { size: A4; margin: 8mm; }
  body { background: #fff; }
  .sidebar, .topbar, .no-print, .page-head__actions, .filterbar { display: none !important; }
  .print-only { display: block; }
  .content { padding: 0; }
  .card { border: 0; box-shadow: none; margin: 0; }
  .card__head { border-bottom: 2px solid var(--brass); }
  .slip { width: auto; margin: 0; padding: 0; border: 0; box-shadow: none; }
  table.tbl { font-size: 9.5pt; }
  table.tbl th { background: #EEF1EE !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* A tfoot repeats at the bottom of every printed page by default, so a
     two-page table showed its total twice — and a total that appears twice
     reads as two different totals. Rendered as an ordinary row group it
     prints once, at the end, where a total belongs. */
  tfoot { display: table-row-group !important; }
  table.tbl tfoot td { background: #12202B !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .slip__net { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .flow { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* -------------------------------------------------------------- mobile */

.menu-toggle { display: none; }

@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 60;
    transform: translateX(-105%); transition: transform .2s;
  }
  [dir="rtl"] .sidebar { transform: translateX(105%); }
  .sidebar.is-open, [dir="rtl"] .sidebar.is-open { transform: translateX(0); }
  .menu-toggle { display: inline-flex; }
  .content { padding: .9rem; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .slip { width: auto; padding: 5mm; }
  .slip__cols { grid-template-columns: 1fr; }
  .topbar { padding: .6rem .9rem; }
  .userchip__name, .userchip__role { display: none; }
}

/* --------------------------------------------------- a11y & motion */

:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* pending-approval badge in the sidebar */
.nav__count {
  margin-inline-start: auto;
  min-width: 20px; padding: 0 .38rem;
  background: var(--brass); color: #12202B;
  border-radius: 999px; font-size: .74rem; font-weight: 700;
  text-align: center; line-height: 18px;
}

/* ---------------------------------------------- month-end step tracker */
.steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .5rem; }
.step {
  display: flex; gap: .55rem; align-items: flex-start;
  padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px;
  color: inherit; background: var(--card);
}
.step:hover { border-color: var(--brass); }
.step__mark {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: .72rem; font-weight: 700;
  background: var(--line); color: var(--muted);
}
.step--done .step__mark { background: var(--credit); color: #fff; }
.step--todo .step__mark { background: var(--brass);  color: #12202B; }
.step--skip { opacity: .55; }
.step__body   { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.step__title  { font-size: .84rem; font-weight: 600; }
.step__detail { font-size: .73rem; color: var(--muted); line-height: 1.45; }

/* ------------------------------------------------------- alert dots */
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot--bad  { background: var(--debit); }
.dot--warn { background: var(--brass); }
.dot--info { background: var(--info, #2E6E8E); }

/* ------------------------------------------------------------- chips */
.chip { display:inline-block; padding:.24rem .6rem; margin:.12rem .18rem .12rem 0;
        border:1px solid var(--line); border-radius:999px; font-size:.8rem;
        background:var(--card); color:var(--ink); }
.chip:hover { border-color: var(--brass); }
.chip span { font-size:.72rem; margin-inline-start:.3rem; }

/* ------------------------------------------------------ topbar search */
.topbar__search input {
  width: 190px; padding: .34rem .7rem; font-size: .84rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
}
.topbar__search input:focus { border-color: var(--brass); outline: none; width: 240px; }
@media (max-width: 780px) { .topbar__search { display: none; } }

/* ══════════════════════════════════════════════════════════════════════
   Refresh — layered over the base so nothing above needs unpicking.
   The palette stays: this is about rhythm, depth and legibility.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --r:    9px;
  --r-lg: 14px;
  --shadow:    0 1px 2px rgba(18,32,43,.04), 0 2px 8px rgba(18,32,43,.045);
  --shadow-lg: 0 18px 48px rgba(18,32,43,.14);
  --ring:      0 0 0 3px rgba(184,134,43,.22);
  --pad:       1.05rem;
  --sidebar:   258px;
}

body { font-size: 14.5px; letter-spacing: -.002em; }

/* ---------------------------------------------------------- sidebar */

.sidebar {
  background: linear-gradient(178deg, var(--ink) 0%, #0E1B24 100%);
  border-inline-end: 1px solid rgba(255,255,255,.05);
}
.sidebar nav { padding-block: .5rem; }

.nav__label {
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.32); font-weight: 700;
  padding: 1.1rem 1.05rem .38rem;
}
.sidebar nav a {
  position: relative;
  display: flex; align-items: center; gap: .62rem;
  margin: 1px .5rem; padding: .5rem .62rem;
  border-radius: var(--r);
  color: rgba(255,255,255,.72); font-size: .875rem; font-weight: 500;
  transition: background .13s ease, color .13s ease;
}
.sidebar nav a svg { width: 17px; height: 17px; opacity: .68; flex: none; }
.sidebar nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar nav a:hover svg { opacity: .95; }
.sidebar nav a.is-active {
  background: rgba(184,134,43,.15);
  color: #fff; font-weight: 600;
}
.sidebar nav a.is-active svg { opacity: 1; color: var(--brass-lit); }
.sidebar nav a.is-active::before {
  content: ''; position: absolute; inset-inline-start: -.5rem; top: 20%; bottom: 20%;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--brass-lit);
}

/* ----------------------------------------------------------- topbar */

.topbar {
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line-2);
  position: sticky; top: 0; z-index: 20;
}
.topbar__title { font-size: 1.06rem; letter-spacing: -.01em; }

/* ------------------------------------------------------------ cards */

.card {
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card__head {
  padding: .8rem var(--pad);
  border-bottom: 1px solid var(--line-2);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}
.card__head h3 { font-size: .92rem; font-weight: 650; letter-spacing: -.005em; }
.card__body { padding: var(--pad); }
.card__foot {
  padding: .72rem var(--pad);
  border-top: 1px solid var(--line-2);
  background: var(--surface-2);
}

/* ------------------------------------------------------------ stats */

.stats { gap: .6rem; }
.stat {
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: .78rem .9rem;
  box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.stat::after {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 3px; background: var(--line);
}
.stat--credit::after { background: var(--credit); }
.stat--debit::after  { background: var(--debit); }
.stat--brass::after  { background: var(--brass); }
.stat--info::after   { background: var(--info); }
.stat--warn::after   { background: var(--warn); }
.stat__label {
  font-size: .72rem; color: var(--muted); font-weight: 600;
  letter-spacing: .01em; margin-bottom: .12rem;
}
.stat__value {
  font-family: var(--mono); font-size: 1.16rem; font-weight: 600;
  letter-spacing: -.02em; line-height: 1.25;
}

/* ----------------------------------------------------------- tables */

.tbl thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2);
  font-size: .74rem; font-weight: 700; letter-spacing: .01em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.tbl tbody tr { transition: background .1s ease; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl tfoot td {
  background: var(--surface-2); font-weight: 650;
  border-top: 2px solid var(--line);
}
.tbl td, .tbl th { border-bottom: 1px solid var(--line-2); }
.table-wrap { border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* --------------------------------------------------------- controls */

.btn {
  border-radius: var(--r);
  font-weight: 550; letter-spacing: -.003em;
  transition: background .13s ease, border-color .13s ease, transform .06s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn--primary { box-shadow: 0 1px 2px rgba(18,32,43,.18); }

input, select, textarea {
  border-radius: var(--r) !important;
  transition: border-color .13s ease, box-shadow .13s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brass) !important;
  box-shadow: var(--ring);
}
.field label {
  font-size: .76rem; font-weight: 620; color: var(--ink-soft);
  letter-spacing: .005em;
}
.hint { font-size: .74rem; color: var(--muted); line-height: 1.55; }

/* ---------------------------------------------------------- badges */

.badge {
  border-radius: 999px; font-size: .71rem; font-weight: 650;
  padding: .16rem .55rem; letter-spacing: .005em;
}

/* ---------------------------------------------------------- alerts */

.alert {
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  border-inline-start-width: 3px;
  padding: .78rem var(--pad);
  font-size: .86rem;
}

/* ------------------------------------------------------- page head */

.page-head { margin-bottom: 1.05rem; }
.page-head h1 {
  font-family: var(--display);
  font-size: 1.42rem; font-weight: 650; letter-spacing: -.018em;
  margin: 0 0 .12rem;
}
.page-head__text p { font-size: .86rem; color: var(--muted); margin: 0; }

/* -------------------------------------------------------- filterbar */

.filterbar {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: .68rem .8rem;
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
}

/* -------------------------------------------------------------- misc */

.tabs { gap: .1rem; border-bottom: 1px solid var(--line-2); }
.tabs a { border-radius: var(--r) var(--r) 0 0; }
.tabs a.is-active { background: var(--surface); border-bottom-color: var(--brass); }

.empty { color: var(--muted); text-align: center; font-size: .88rem; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #C7D0C9; border-radius: 99px; border: 3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: #AEB9B0; }

@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .page-head h1 { font-size: 1.22rem; }
}

@media print {
  .sidebar, .topbar, .no-print, .filterbar { display: none !important; }
  .card { box-shadow: none; border-color: #CCC; break-inside: avoid; }
  .tbl thead th { position: static; }
}

/* the user chip is now a link */
a.userchip { color: inherit; transition: border-color .13s ease, background .13s ease; }
a.userchip:hover { border-color: var(--brass); background: var(--surface-2); }

/* ------------------------------------------- document preview in-app */
.docprev { font-size: .9rem; line-height: 1.85; color: var(--ink); }
.docprev h1 { font-size: 1.16rem; text-align: center; margin: .3rem 0 .7rem; }
.docprev h2 { font-size: .98rem; margin: 1rem 0 .4rem; padding-bottom: .25rem;
              border-bottom: 1px solid var(--line-2); }
.docprev p  { margin: 0 0 .5rem; text-align: justify; }
.docprev .meta { text-align: center; color: var(--muted); font-size: .82rem; }
.docprev .note { background: var(--brass-soft); border-inline-start: 3px solid var(--brass);
                 padding: .5rem .7rem; border-radius: 0 var(--r) var(--r) 0; }
.docprev table { width: 100%; border-collapse: collapse; margin: .4rem 0 .7rem; font-size: .85rem; }
.docprev table.kv th { width: 32%; text-align: start; font-weight: 600; color: var(--ink-soft);
                       padding: .3rem .5rem; background: var(--surface-2); border: 1px solid var(--line-2); }
.docprev table.kv td { padding: .3rem .5rem; border: 1px solid var(--line-2); }
.docprev table.grid th, .docprev table.grid td { border: 1px solid var(--line); padding: .4rem .5rem; }
.docprev table.grid th { background: var(--surface-2); text-align: start; }
.docprev table.grid td { height: 1.6rem; }
.docprev .sign { display: flex; gap: 2.2rem; margin-top: 2rem; }
.docprev .sign > div { flex: 1; font-size: .84rem; }
.docprev .sign__line { border-top: 1px solid var(--ink); margin-bottom: .4rem; }

/* ══════════════════════════════════════════════════════════════════════
   Polish — the parts the first pass did not reach.
   ══════════════════════════════════════════════════════════════════ */

/* ------------------------------------------------------- sign-in page */

.auth-wrap {
  position: relative;
  background:
    radial-gradient(1100px 620px at 82% -12%, rgba(184,134,43,.20), transparent 62%),
    radial-gradient(760px 520px at 8% 108%, rgba(46,110,142,.16), transparent 60%),
    linear-gradient(168deg, #12202B 0%, #0C1720 100%);
}
/* a faint grid, so the field is not a flat wash of colour */
.auth-wrap::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 72%);
}
.auth-card {
  position: relative;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0,0,0,.42), 0 2px 0 rgba(255,255,255,.05) inset;
  overflow: hidden;
}
.auth-card__head { padding: 2rem 1.9rem 1.15rem; text-align: center; }
.auth-card__body { padding: 0 1.9rem 1.6rem; }
.auth-card .brand__mark {
  width: 54px; height: 54px; border-radius: 15px; margin: 0 auto .9rem;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 1.12rem;
  color: #12202B;
  background: linear-gradient(150deg, var(--brass-lit), var(--brass));
  box-shadow: 0 8px 22px rgba(184,134,43,.34);
}
.auth-card h2 { font-size: 1.2rem; margin: 0 0 .18rem; letter-spacing: -.015em; }
.auth-card__head div:last-child { font-size: .84rem; color: var(--muted); margin: 0; }
.auth-card .btn { width: 100%; padding: .62rem; font-size: .95rem; }
.auth-card__foot {
  padding: .8rem; text-align: center; font-size: .78rem;
  color: var(--muted); background: var(--surface-2);
  border-top: 1px solid var(--line-2);
}

/* --------------------------------------------------------- empty state */

.empty {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 2.2rem 1rem; color: var(--muted); font-size: .88rem; text-align: center;
}
.empty::before {
  content: ''; width: 42px; height: 42px; border-radius: 12px;
  background: var(--surface-2); border: 1px dashed var(--line);
}
td.empty, th.empty { display: table-cell; }
td.empty::before { content: none; }

/* ------------------------------------------------------------ mobile */

@media (max-width: 820px) {
  /* rows built as one flex line must become stacked blocks, or the text
     is squeezed into a column two words wide */
  .row-flex,
  .card__body > a[href] > span:not(.badge):not(.dot) { min-width: 0; }

  .alert-row {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: 'dot title badge' '. detail .';
    gap: .35rem .6rem;
    align-items: start;
  }
  .alert-row .dot   { grid-area: dot; margin-top: .42rem; }
  .alert-row .t     { grid-area: title; white-space: normal !important; }
  .alert-row .d     { grid-area: detail; }
  .alert-row .b     { grid-area: badge; }
  .alert-row .sp    { display: none; }

  .page-head { flex-direction: column; align-items: stretch; gap: .6rem; }
  .page-head__actions { flex-wrap: wrap; }
  .page-head__actions .btn { flex: 1 1 auto; text-align: center; }

  .filterbar { flex-direction: column; align-items: stretch; }
  .filterbar .field { width: 100%; }
  .filterbar select, .filterbar input { width: 100%; }

  .stats { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: .45rem; }
  .stat__value { font-size: 1.02rem; }

  .steps { grid-template-columns: 1fr 1fr; }

  .grid-2, .grid-3 { grid-template-columns: 1fr; }

  .card__head { flex-wrap: wrap; gap: .4rem; }

  /* tables scroll rather than crush — including those sitting straight
     inside a flush card body with no wrapper of their own */
  .table-wrap,
  .card__body--flush { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl { min-width: 560px; }
}

@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .page-head h1 { font-size: 1.14rem; }
  .auth-card__head, .auth-card__body { padding-inline: 1.3rem; }
}

/* --------------------------------------------------- small refinements */

.badge--ok    { background: rgba(27,107,87,.12);  color: var(--credit); }
.badge--bad   { background: rgba(159,58,58,.12);  color: var(--debit); }
.badge--warn  { background: rgba(184,134,43,.15); color: #8A6420; }
.badge--info  { background: rgba(46,110,142,.12); color: var(--info); }
.badge--muted { background: var(--surface-2);     color: var(--muted); }

.n--credit { color: var(--credit); }
.n--debit  { color: var(--debit); }
.n--strong { font-weight: 650; }

/* a table that is scrolled sideways should hint that there is more */
.table-wrap { position: relative; }

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: '▸ '; color: var(--brass); }
details[open] > summary::before { content: '▾ '; }


/* --------------------------------------------- sidebar on a small screen */

.menu-toggle {
  display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); cursor: pointer; flex: none;
}
.menu-toggle svg { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; }
  .sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 60;
    width: var(--sidebar);
    transform: translateX(-105%);
    transition: transform .22s ease;
    box-shadow: var(--shadow-lg);
  }
  [dir="rtl"] .sidebar { transform: translateX(105%); }
  .sidebar.is-open, [dir="rtl"] .sidebar.is-open { transform: translateX(0); }
}

/* a stronger field behind the sign-in card */
.auth-wrap {
  background:
    radial-gradient(920px 560px at 84% -8%,  rgba(217,169,74,.30), transparent 60%),
    radial-gradient(680px 480px at 6% 104%,  rgba(46,110,142,.26), transparent 58%),
    linear-gradient(168deg, #162834 0%, #0A141C 100%);
}
.auth-wrap::before { opacity: .9; }

/* A grid or flex item refuses to shrink below its content unless told
   otherwise. Without this a wide table stretches its card, its column and
   finally the page — the scroll bar lands on the whole document instead of
   the table. */
.grid > *, .grid-2 > *, .grid-3 > *, .grid-4 > *,
.card, .card__body, .main, .content { min-width: 0; }

/* ══════════════════════════════════════════════════════════════════════
   Command palette — Ctrl+K from anywhere
   ══════════════════════════════════════════════════════════════════ */

.pal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(12,23,32,.46);
  backdrop-filter: blur(3px);
  display: none;
}
.pal-backdrop.is-open { display: block; }

.pal {
  position: absolute; inset-inline: 0; top: 9vh;
  width: min(620px, calc(100% - 2rem)); margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.pal__input {
  width: 100%; border: none !important; outline: none;
  padding: 1rem 1.15rem; font-size: 1rem; font-family: inherit;
  background: transparent; box-shadow: none !important;
  border-bottom: 1px solid var(--line-2) !important; border-radius: 0 !important;
}
.pal__list { max-height: 56vh; overflow-y: auto; padding: .35rem; }
.pal__item {
  display: flex; align-items: center; gap: .7rem;
  padding: .56rem .7rem; border-radius: 9px;
  cursor: pointer; color: inherit;
}
.pal__item.is-sel { background: rgba(184,134,43,.14); }
.pal__item:hover  { background: var(--surface-2); }
.pal__icon {
  width: 24px; height: 24px; border-radius: 7px; flex: none;
  display: grid; place-items: center; font-size: .8rem;
  background: var(--surface-2); color: var(--muted);
}
.pal__item.is-sel .pal__icon { background: var(--brass); color: #12202B; }
.pal__label { font-size: .9rem; font-weight: 550; }
.pal__sub   { font-size: .76rem; color: var(--muted); }
.pal__kind  { margin-inline-start: auto; font-size: .68rem; color: var(--muted); }
.pal__empty { padding: 1.6rem; text-align: center; color: var(--muted); font-size: .86rem; }
.pal__foot {
  padding: .5rem .9rem; border-top: 1px solid var(--line-2);
  background: var(--surface-2); font-size: .72rem; color: var(--muted);
  display: flex; gap: .9rem; flex-wrap: wrap;
}
.pal__foot kbd {
  font-family: var(--mono); font-size: .7rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 5px; padding: .04rem .3rem;
}

/* the palette trigger where the search box used to be */
button.topbar__search {
  display: flex; align-items: center; gap: .5rem;
  padding: .34rem .7rem .34rem .55rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--muted);
  font-family: inherit; font-size: .82rem; cursor: pointer;
  transition: border-color .13s ease, color .13s ease;
}
button.topbar__search:hover { border-color: var(--brass); color: var(--ink); }
button.topbar__search kbd {
  font-family: var(--mono); font-size: .68rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 5px; padding: .02rem .28rem; color: var(--muted);
}
@media (max-width: 780px) { button.topbar__search span { display: none; } }


/* The topbar is a single row of things that must never add up to more than
   the screen: the title truncates, the trigger shrinks to its icon. */
.topbar { gap: .5rem; }
.topbar__title {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.topbar > div { min-width: 0; }

@media (max-width: 780px) {
  button.topbar__search { padding: .34rem .5rem; }
  button.topbar__search kbd { display: none; }
  button.topbar__search::before { content: '⌕'; font-size: 1rem; }
  .userchip__name, .userchip__role { display: none; }
  .userchip { padding: .2rem; border: none; background: transparent; }
}
@media (max-width: 520px) {
  .topbar { padding-inline: .6rem; }
  .topbar__title { font-size: .95rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   The payroll month
   ══════════════════════════════════════════════════════════════════ */

.prun {
  background: linear-gradient(168deg, var(--ink) 0%, #14232F 100%);
  color: #E9EFF3;
  border-radius: var(--r-lg);
  padding: 1.15rem 1.25rem 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
.prun__head {
  display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.prun__title { flex: 1; min-width: 0; }
.prun__title h1 {
  font-family: var(--display); font-size: 1.5rem; font-weight: 650;
  letter-spacing: -.02em; margin: 0 0 .22rem; color: #fff;
}
.prun__meta { font-size: .82rem; color: rgba(233,239,243,.62); line-height: 1.7; }
.prun__meta b { color: rgba(233,239,243,.9); font-weight: 600; }
.prun__act { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.prun__act .btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #E9EFF3; }
.prun__act .btn:hover:not(:disabled) { background: rgba(255,255,255,.14); }
.prun__act .btn--primary {
  background: linear-gradient(150deg, var(--brass-lit), var(--brass));
  border-color: transparent; color: #12202B; font-weight: 650;
}
.prun__act .btn--primary:hover { filter: brightness(1.06); }
.prun__act .btn:disabled { opacity: .42; cursor: not-allowed; }
.btn--lg { padding: .58rem 1.15rem; font-size: .95rem; }
.prun .alert { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.13); color: #E9EFF3; }

/* the five states as a rail */
.rail { display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.rail__step {
  flex: 1 1 130px; display: flex; align-items: center; gap: .5rem;
  padding: .5rem .6rem; border-radius: 9px;
  background: rgba(255,255,255,.045);
  border: 1px solid transparent;
}
.rail__step.is-done { background: rgba(27,107,87,.20); }
.rail__step.is-now  { background: rgba(184,134,43,.22); border-color: rgba(217,169,74,.42); }
.rail__dot {
  width: 19px; height: 19px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: .62rem; font-weight: 700;
  background: rgba(255,255,255,.10); color: rgba(233,239,243,.55);
}
.rail__step.is-done .rail__dot { background: var(--credit); color: #fff; }
.rail__step.is-now  .rail__dot { background: var(--brass-lit); color: #12202B; }
.rail__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.rail__text b { font-size: .8rem; color: #E9EFF3; }
.rail__text span { font-size: .68rem; color: rgba(233,239,243,.5); }

/* the money, in order of importance */
.figs {
  display: grid; gap: .6rem; margin-bottom: 1rem;
  /* Five fixed columns pushed the strip off the side of any window under
     about 1100px, taking the page's scrollbar with it. auto-fit keeps the
     lead figure wider than the rest and wraps instead of overflowing. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.figs > .fig:first-child { grid-column: span 2; }
@media (max-width: 560px) { .figs > .fig:first-child { grid-column: auto; } }
.fig {
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); padding: .8rem .95rem;
  display: flex; flex-direction: column; gap: .1rem;
  box-shadow: var(--shadow); min-width: 0;
}
.fig__k { font-size: .74rem; color: var(--muted); font-weight: 600; }
.fig__v { font-family: var(--mono); font-size: 1.14rem; font-weight: 650; letter-spacing: -.02em; }
.fig__s { font-size: .7rem; color: var(--muted); }
.fig--lead { background: linear-gradient(160deg, var(--brass-soft), var(--surface)); border-color: rgba(184,134,43,.32); }
.fig--lead .fig__v { font-size: 1.5rem; color: #7A5714; }
.fig--cost { border-color: rgba(46,110,142,.3); }

/* one line per thing to look at */
.issue {
  display: flex; gap: .65rem; align-items: baseline;
  padding: .58rem 1.05rem; border-bottom: 1px solid var(--line-2);
}
.issue:last-child { border-bottom: none; }
.issue__who  { font-weight: 600; font-size: .86rem; white-space: nowrap; }
.issue__what { font-size: .83rem; color: var(--muted); }

/* columns that are usually noise */
#prTable .x { display: none; }
#prTable.show-x .x { display: table-cell; }
.tbl .sub { font-size: .72rem; color: var(--muted); }

@media (max-width: 900px) {
  .figs { grid-template-columns: 1fr 1fr; }
  .fig--lead { grid-column: 1 / -1; }
  .rail__step { flex: 1 1 100%; }
  .prun__act { width: 100%; }
  .prun__act .btn { flex: 1; justify-content: center; }
  .issue { flex-direction: column; gap: .15rem; }
  .issue__who { white-space: normal; }
}

/* ---- payslip delivery: two routes, side by side ---------------------- */
.sendbox {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--card-2, transparent);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sendbox__head {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: .6rem;
}
.sendbox__title { font-weight: 700; font-size: 1.05rem; }
.sendbox__body  { margin: 0 0 .8rem; color: var(--muted); line-height: 1.75; font-size: .9rem; }
.sendbox__stat  { margin: 0 0 1rem; font-size: .95rem; }
.sendbox__stat b { font-size: 1.35rem; }
.sendbox form   { margin-top: auto; }
@media (max-width: 760px) {
  .sendbox { padding: 1rem; }
}

/* ====================================================================
   REPORTS — letterhead, framed data, print
   ==================================================================== */

.letterhead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.4rem; flex-wrap: wrap;
  padding: 1rem 1.2rem 1.1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  border-top: 3px solid var(--brass);
  background: var(--card);
}
.letterhead__brand { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.letterhead__logo {
  max-height: 62px; max-width: 190px; object-fit: contain; flex: none;
}
.letterhead__name    { font-weight: 700; font-size: 1.12rem; line-height: 1.35; }
.letterhead__name-en { font-size: .84rem; color: var(--muted); letter-spacing: .02em; }
.letterhead__meta    { font-size: .76rem; color: var(--muted); line-height: 1.7; }
.letterhead__doc     { text-align: end; min-width: 0; }
.letterhead__title   { font-weight: 700; font-size: 1.05rem; }
.letterhead__range   { font-size: .9rem; color: var(--brass); font-weight: 600; }
.letterhead__note {
  font-size: .8rem; color: var(--muted);
  margin: -.4rem 0 1rem; padding-inline-start: .2rem;
}

/* ---- framed data tables ---- */
.tbl--framed { border: 1px solid var(--line); border-collapse: collapse; width: 100%; }
.tbl--framed th,
.tbl--framed td { border: 1px solid var(--line); padding: .48rem .6rem; }
.tbl--framed thead th {
  background: var(--line-2);
  color: var(--ink);
  font-weight: 700; text-align: start;
  border-bottom: 1px solid var(--line);
}
.tbl--framed tbody tr:nth-child(even) td { background: rgba(127,127,127,.035); }
.tbl--framed tfoot td {
  font-weight: 700;
  color: var(--ink);
  border-top: 2px solid var(--ink-3);
  background: var(--brass-soft);
}
.tbl--framed caption {
  caption-side: top; text-align: start;
  font-weight: 700; padding: .1rem .2rem .55rem; color: var(--ink-2);
}

/* ---- signatures ---- */
.signrow {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2rem; margin-top: 2.4rem; text-align: center;
  break-inside: avoid;
}
.signrow__cell  { padding-top: 1.6rem; }
.signrow__line  { border-top: 1px solid #999; margin-bottom: .4rem; }
.signrow__role  { font-size: .82rem; font-weight: 600; }
.signrow__name  { font-size: .76rem; color: var(--muted); }

.print-only { display: none; }

/* ==================================== print ==================================== */
@media print {
  @page { size: A4; margin: 12mm 10mm 14mm; }

  .print-only { display: block !important; }
  .signrow    { display: grid !important; }

  /* the title lives in the letterhead now, so the screen head goes away */
  .page-head { display: none !important; }

  /* the letterhead repeats nothing, but must never be split */
  .letterhead {
    break-inside: avoid; break-after: avoid;
    border: 0; border-bottom: 2px solid #333; border-radius: 0;
    padding: 0 0 .5rem; margin-bottom: .8rem;
    background: transparent !important;
  }
  .letterhead__logo  { max-height: 54px; }
  .letterhead__title { font-size: 12pt; }
  .letterhead__range { color: #333 !important; }

  /* a long table must carry its headings onto every page */
  table.tbl thead { display: table-header-group; }
  table.tbl tfoot { display: table-footer-group; }
  table.tbl tr    { break-inside: avoid; }

  .tbl--framed th, .tbl--framed td { border: .6pt solid #999 !important; }
  .tbl--framed thead th {
    background: #E8ECE8 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .tbl--framed tbody tr:nth-child(even) td { background: #F7F7F5 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* charts and stat tiles are screen furniture, not evidence */
  .chart-wrap, .chartcard, .stats { break-inside: avoid; }

  .card { break-inside: auto; }
  .card__head h1, .card__head h2, .card__head h3 { font-size: 11pt; }
}

@media (max-width: 760px) {
  .letterhead { flex-direction: column; gap: .8rem; }
  .letterhead__doc { text-align: start; }
  .signrow { grid-template-columns: 1fr; gap: 1rem; }
}

/* ---- richer filters -------------------------------------------------- */
.filterbar--rich { flex-wrap: wrap; align-items: flex-end; }
.filterbar--rich > .advfilter { flex-basis: 100%; }

.advfilter {
  margin-top: .9rem; padding-top: .9rem;
  border-top: 1px dashed var(--line);
}
.advfilter__grid {
  display: grid; gap: .7rem 1rem;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
}
.advfilter__grid .field { margin: 0; min-width: 0; }
.advfilter__foot {
  display: flex; gap: .6rem; margin-top: .9rem; flex-wrap: wrap;
}

.resultbar {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .55rem .9rem; margin-bottom: .9rem;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2);
  font-size: .85rem;
}
.resultbar .spacer { flex: 1; }
.field--inline { display: flex; align-items: center; gap: .45rem; margin: 0; }
.field--inline label { margin: 0; font-size: .78rem; color: var(--muted); white-space: nowrap; }
.field--inline select { padding: .25rem .5rem; font-size: .82rem; }

@media (max-width: 760px) {
  .advfilter__grid { grid-template-columns: 1fr 1fr; }
  .resultbar { font-size: .8rem; }
  .resultbar .spacer { flex-basis: 100%; height: 0; }
}
@media print { .resultbar, .advfilter { display: none !important; } }

/* the chips that say what is currently narrowing a list */
.resultbar__count b { font-size: 1.02rem; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .18rem .55rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card);
  font-size: .78rem; max-width: 280px;
}
.chip__k { color: var(--muted); }
.chip__v { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filterbar--rich > .advfilter { flex-basis: 100%; }
@media (max-width: 760px) {
  .advfilter__grid { grid-template-columns: 1fr 1fr; }
  .resultbar { font-size: .8rem; }
}

/* ---- removable filter chips ---- */
.resultbar--chips {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  margin-bottom: .5rem;
}
a.chip { display: inline-flex; align-items: center; gap: .35rem; transition: border-color .12s ease; }
a.chip:hover { border-color: var(--debit); }
a.chip:hover .chip__x { color: var(--debit); }
.chip__x { color: var(--muted); font-weight: 700; line-height: 1; }

/* ====================================================================
   TRAINING
   ==================================================================== */

.matbox {
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 1rem;
  overflow: hidden;
  background: var(--card);
}
.matbox__head {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--line);
  background: var(--line-2);
}
.matbox__head .spacer { flex: 1; }
.matbox__head .muted  { font-size: .78rem; }
.matbox__body { padding: .9rem; }
.matbox__foot { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }

.matbox__pdf   { width: 100%; height: 640px; border: 1px solid var(--line); border-radius: 8px; }
.matbox__video { width: 100%; max-height: 640px; border-radius: 8px; background: #000; display: block; }
.matbox__embed { position: relative; padding-top: 56.25%; border-radius: 8px; overflow: hidden; }
.matbox__embed iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* type switcher on the upload form */
.tabrow { display: flex; gap: .4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tabrow__b {
  padding: .45rem 1.1rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink); cursor: pointer; font: inherit;
  font-size: .88rem;
}
.tabrow__b:hover  { border-color: var(--brass); }
.tabrow__b.is-on  { background: var(--ink-3); color: #fff; border-color: var(--ink-3); }

/* pick a handful of people without a page of checkboxes */
.picklist {
  max-height: 260px; overflow-y: auto; margin-top: .6rem;
  border: 1px solid var(--line); border-radius: 8px; padding: .5rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .2rem;
}
.picklist__i { display: flex; align-items: center; gap: .5rem; padding: .25rem .35rem; border-radius: 6px; }
.picklist__i:hover { background: var(--line-2); }
.picklist__i span  { font-size: .85rem; }

/* completion bar */
.bar {
  height: 7px; border-radius: 999px; background: var(--line-2); overflow: hidden;
  min-width: 90px;
}
.bar__fill { display: block; height: 100%; background: var(--brass); border-radius: 999px; }

@media (max-width: 760px) {
  .matbox__pdf { height: 420px; }
  .picklist    { grid-template-columns: 1fr; }
}

@media print {
  .matbox__pdf, .matbox__video, .matbox__embed, .tabrow, .picklist { display: none !important; }
}

/* ====================================================================
   LEAVE BALANCES
   ==================================================================== */
.lv-formula {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.lv-formula__box {
  padding: .5rem .9rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--line-2); font-size: .86rem; font-weight: 600; color: var(--ink);
}
.lv-formula__box--result { background: var(--ink-3); color: #fff; border-color: var(--ink-3); }
.lv-formula__op { font-size: 1.1rem; color: var(--muted); font-weight: 700; }

.lv-modal[hidden] { display: none; }
.lv-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(24,22,18,.5);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.lv-modal__box {
  background: var(--card); border-radius: 14px; padding: 1.6rem;
  width: 100%; max-width: 420px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
}

@media (max-width: 760px) {
  .lv-formula { justify-content: center; }
  .lv-formula__box { padding: .4rem .6rem; font-size: .78rem; }
}

/* radio with a description underneath, for format choices */
.radio-row {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 10px;
  margin-bottom: .5rem; cursor: pointer;
}
.radio-row:hover { border-color: var(--brass); }
.radio-row input { margin-top: .25rem; }

/* individual leave grants, listed under the total on the balances table */
.adj-list { margin-top: .25rem; }
.adj-list__i {
  display: flex; align-items: center; gap: .35rem; justify-content: flex-end;
  font-size: .76rem; color: var(--muted); line-height: 1.7;
}
.adj-list__x {
  border: 0; background: none; cursor: pointer; color: var(--muted);
  font-size: .85rem; line-height: 1; padding: 0 .15rem;
}
.adj-list__x:hover { color: var(--debit); }

/* a value with its unit beside it, as on the leave form */
/* A class that sets `display` beats the browser's own rule for [hidden],
   so anything hidden by script would still be drawn. This puts that back. */
[hidden] { display: none !important; }

.unit-row { display: flex; gap: .4rem; }
.unit-row input { flex: 1 1 auto; min-width: 0; }
.unit-row__u { flex: 0 0 auto; width: auto; }

/* ==========================================================================
   Refinement pass — v3.56
   --------------------------------------------------------------------------
   The direction at the top of this file was right and only half-built: the
   comment says "a payroll ledger", the screen said "another admin panel".
   Everything sat on one plane, the brass appeared only on focus rings, and
   nothing on the page knew the difference between a working figure and a
   final one.

   The signature is the one thing bookkeeping does that no other craft does:
   it CLOSES A COLUMN WITH A DOUBLE RULE. A totalled figure is ruled twice
   and nothing goes below it. That device is not decoration here — it says
   "this number is finished", which is exactly what a tfoot means. It is the
   one loud thing; everything else in this pass gets quieter, not louder.
   ========================================================================== */

/* ------------------------------------------------------------ the field */

/* Ruled paper, at the threshold of visible. Two things keep it honest: the
   rules sit at the body's own rhythm rather than an arbitrary pitch, and
   they stop at the card edge — a card is a sheet laid ON the ledger, so
   the ruling must not show through it. */
body {
  background-color: #EFF2F0;
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(18, 32, 43, .028) 0,
      rgba(18, 32, 43, .028) 1px,
      transparent 1px,
      transparent 28px
    ),
    radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.85), transparent 60%);
  background-attachment: fixed;
}

/* --------------------------------------------------------------- cards */

/* A sheet on the ledger: crisp edge, shadow tight enough to sit rather
   than hover, and an opaque back so the ruling stops here. */
.card {
  background: var(--surface);
  border: 1px solid #D8DFDA;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 1px 2px rgba(18,32,43,.05),
    0 6px 18px -8px rgba(18,32,43,.14);
}

.card__head {
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F8F6 100%);
  border-bottom-color: #E3E8E4;
}

.card__head h3,
.card__head h2 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.01em;
}

/* ------------------------------------------------ the signature: closing */

/* Double-ruled in brass, the way a ledger closes a column. The figure above
   the rules is the answer; nothing goes below it. */
.tbl tfoot td,
table.tbl tfoot td {
  background: linear-gradient(180deg, #FBF7EE 0%, #F7F1E3 100%);
  color: #4A3608;
  font-weight: 700;
  border-top: 1px solid var(--brass);
  box-shadow: inset 0 3px 0 -2px var(--brass);
  border-bottom: none;
}

.tbl tfoot tr:last-child td {
  border-bottom: 3px double var(--brass);
}

/* the closing figure itself, set apart from its label */
.tbl tfoot td.n,
.tbl tfoot td.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* -------------------------------------------------------------- tables */

.tbl thead th {
  background: #F4F7F5;
  color: #3B5566;
  font-size: .73rem;
  letter-spacing: .015em;
  text-transform: none;
  border-bottom: 1px solid #CBD5CE;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.8);
}

/* Rows read as ruled lines, not as stripes. The hover is a tint of the
   field rather than grey, so the page stays one material. */
.tbl tbody tr:hover { background: #F6F9F7; }
.tbl tbody tr:focus-within { background: var(--brass-soft); }
.tbl td, .tbl th { border-bottom: 1px solid #E9EDEA; }

/* Every number in the system lines up under every other number. */
.tbl td.n, .tbl td.num, .tbl th.n, .tbl th.num,
.fig__v, .stat__v {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* A figure that is owed and a figure that is owing should be legible at a
   glance from across a desk, without reading the sign. */
.n--debit  { color: var(--debit);  font-weight: 600; }
.n--credit { color: var(--credit); font-weight: 600; }

/* ---------------------------------------------------------- the sidebar */

/* Ten groups now, so the group labels have to actually separate them.
   A brass hairline leads each one — the same brass that closes a column,
   used here to open a section. */
.nav__label {
  position: relative;
  color: rgba(240,232,214,.5);
  font-size: .64rem;
  letter-spacing: .13em;
  padding-top: 1.25rem;
  margin-top: .25rem;
}

.nav__label::before {
  content: "";
  position: absolute;
  inset-inline: 1.05rem;
  top: .58rem;
  height: 1px;
  background: linear-gradient(
    to left,
    rgba(184,134,43,.55),
    rgba(255,255,255,.06) 70%,
    transparent
  );
}

/* The active item already had a good mark — a brass edge drawn with
   ::before. My first pass added a second one on top of it, which is how
   the sidebar came to show two brackets on one link. One mark is the
   right number, so this only deepens the one that was already there. */
.sidebar nav a.is-active {
  background: linear-gradient(
    to left,
    rgba(184,134,43,.20),
    rgba(184,134,43,.07) 65%,
    transparent
  );
}
[dir="ltr"] .sidebar nav a.is-active {
  background: linear-gradient(
    to right,
    rgba(184,134,43,.20),
    rgba(184,134,43,.07) 65%,
    transparent
  );
}
.sidebar nav a.is-active::before { width: 3px; box-shadow: 0 0 8px rgba(217,169,74,.5); }

.sidebar nav a:hover { background: rgba(255,255,255,.055); }

/* ------------------------------------------------------- figure strips */

/* These head most screens, so they carry the reading. The lead figure is
   the one the page is about; the rest support it and are set to say so. */
.fig {
  background: var(--surface);
  border: 1px solid #DDE3DE;
  box-shadow: 0 1px 2px rgba(18,32,43,.04);
}

.fig__k {
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #7A8B84;
}

.fig__v { letter-spacing: -.025em; }

.fig--lead {
  background: linear-gradient(158deg, #FCF6E7 0%, #FFFFFF 72%);
  border-color: rgba(184,134,43,.38);
  box-shadow:
    0 1px 2px rgba(18,32,43,.05),
    inset 0 0 0 1px rgba(255,255,255,.6);
}
.fig--lead .fig__k { color: #8A7332; }

/* -------------------------------------------------------- page heading */

.page-head h1 {
  font-family: var(--display);
  letter-spacing: -.02em;
  line-height: 1.25;
}

.page-head__text p {
  color: var(--muted);
  margin-top: .15rem;
}

/* ------------------------------------------------------------ controls */

.btn {
  box-shadow: 0 1px 1px rgba(18,32,43,.04);
}
.btn:active { transform: translateY(.5px); }

/* the brass button is for the act that finishes something — posting,
   approving, closing a month */
.btn--brass {
  background: linear-gradient(180deg, var(--brass-lit) 0%, var(--brass) 100%);
  border-color: #9E7222;
  color: #241903;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.btn--brass:hover {
  background: linear-gradient(180deg, #E3B65C 0%, #C08F2F 100%);
}

input, select, textarea {
  background: #FCFDFC;
  border-color: #D3DBD6;
}
input:hover, select:hover, textarea:hover { border-color: #BAC5BE; }
input:focus, select:focus, textarea:focus {
  background: #fff;
  border-color: var(--brass);
  box-shadow: var(--ring);
  outline: none;
}

/* a field carrying money should look like it does */
input[inputmode="decimal"], input[type="number"] {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- print */

/* Paper has no ruling, no shadows and no brass wash — but the double rule
   survives, because on paper it is the whole point. */
@media print {
  body {
    background: #fff !important;
    background-image: none !important;
  }
  .card {
    box-shadow: none !important;
    border-color: #999 !important;
  }
  .tbl tfoot td {
    background: #fff !important;
    color: #000 !important;
    border-top: 1px solid #000 !important;
    box-shadow: none !important;
  }
  .tbl tfoot tr:last-child td {
    border-bottom: 3px double #000 !important;
  }
}

/* ---------------------------------------------------------- the floor */

@media (max-width: 720px) {
  body { background-image: none; }           /* ruling reads as noise small */
  .card { border-radius: 8px; }
  .fig__v { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
  .tbl tbody tr { transition: none; }
}

/* tiles on the ledger menu carry the system's own icons, at the weight
   the rest of the interface uses — an emoji is somebody else's typeface */
.tile__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; flex: 0 0 auto;
  border-radius: 7px;
  background: var(--brass-soft);
  color: #8A6414;
  border: 1px solid rgba(184,134,43,.28);
}
.tile__icon svg { width: 17px; height: 17px; }
a:hover > .card__body > .tile__icon,
a:hover .tile__icon {
  background: linear-gradient(180deg, var(--brass-lit), var(--brass));
  color: #241903; border-color: #9E7222;
}

/* The active marker's rounded end was drawn for a left-to-right sidebar;
   in Kurdish it sits on the right, where the same radius reads as a
   bracket rather than a tab. Mirror it. */
[dir="rtl"] .sidebar nav a.is-active::before { border-radius: 3px 0 0 3px; }


/* ---- collapsible nav groups (v3.70) ---------------------------------- */
/* The header is now a button but wears the same .nav__label clothes, so
   the sidebar looks unchanged until somebody clicks. */
.nav__label--btn {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  font: inherit; color: inherit; text-align: inherit; padding-inline-end: .9rem;
}
.nav__label--btn:hover { color: #fff; }
.nav__chev { transition: transform .15s ease; opacity: .65; font-size: .82em; }
.nav__group--closed .nav__chev { transform: rotate(90deg); }
[dir="ltr"] .nav__group--closed .nav__chev { transform: rotate(-90deg); }
.nav__group--closed .nav__items { display: none; }

/* ==========================================================================
   Readability 2026 — the grid page's lesson, applied to every table.
   Kurdish script needs a size Latin gets away without; nothing the user
   must READ sits below .74rem, secondary text holds .76+, and long
   tables keep their header row in sight while the page scrolls.
   ========================================================================== */

.tbl--compact td, .tbl--compact th { padding: .42rem .6rem; font-size: .84rem; }
.hint { font-size: .8rem; }
.topbar__crumb { font-size: .78rem; }

/* the header row travels with the reader (under the sticky topbar) */
:root { --topbar-h: 44px; }
.tbl thead th {
  position: sticky; top: var(--topbar-h); z-index: 5;
  background: var(--surface);
}
/* inside a scrolling card the container is the ceiling, not the topbar */
.card__body--flush .tbl thead th,
div[style*="overflow"] .tbl thead th { top: 0; }

@media print { .tbl thead th { position: static; } }

/* ------------------------------------------------- the two sidebar areas */

/* The list is two systems now — HR, and the dealership ledger. These
   headings are the only thing above group level, so they have to read as a
   different order of heading, not a louder group label: brass, wider, and
   with a rule that spans the whole width rather than the hairline a group
   gets. */
.nav__sec {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: 1.6rem 1.05rem .1rem;
  border-top: 1px solid rgba(184,134,43,.28);
  margin-top: 1.1rem;
}
.nav__sec:first-child { border-top: 0; margin-top: 0; padding-top: .5rem; }
.nav__sec__t {
  font-family: var(--display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--brass-lit);
  text-transform: uppercase;
}
.nav__sec__s {
  font-size: .66rem;
  color: #7E96A2;
  letter-spacing: 0;
}

/* A group opening an area needs no hairline of its own — the area's rule is
   right above it, and two lines a few pixels apart look like a mistake. */
.nav__sec + .nav__group .nav__label { padding-top: .55rem; margin-top: 0; }
.nav__sec + .nav__group .nav__label::before { content: none; }

/* ==========================================================================
   Autoline program chrome — theme-agnostic base.
   The al_mode frame (caption, program bar, status foot) is drawn around
   every ordinary page while the operator works in the Autoline session.
   These rules lived only in theme-autoline.css, so any other theme left
   the frame unstyled and its inline SVGs exploded to full width. Now the
   geometry lives here for every theme, in house tokens; theme-autoline.css
   loads after this file and still wins with the classic look.
   ========================================================================== */

.al-cap {
  display: flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 0 0 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex: none;
  position: sticky; top: 0; z-index: 30;
  direction: ltr;
}
.al-cap__ic { width: 18px; height: 18px; flex: none; }
.al-cap__ic svg { width: 18px; height: 18px; display: block; }
.al-cap__t {
  font-size: 12px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  direction: ltr;
}
.al-cap__sp { flex: 1; }
.al-cap__b {
  width: 44px; height: 30px;
  display: grid; place-items: center;
  color: var(--ink);
}
.al-cap__b:hover { background: var(--surface-2); }
.al-cap__b--x:hover { background: #C42B1C; color: #FFFFFF; }
.al-cap__b svg { width: 10px; height: 10px; }

.al-bar {
  display: flex; align-items: center; gap: .6rem;
  padding: .3rem .6rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  direction: ltr;
}
.al-bar__l { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; }
.al-bar__r { display: flex; gap: .35rem; flex: none; }
.al-bar__k { font-size: .74rem; color: var(--muted); }
.al-bar__v { font-size: .8rem; font-weight: 700; color: var(--ink); }
.al-bar__q {
  font: inherit; font-size: .74rem;
  padding: .16rem .6rem; cursor: pointer;
  background: var(--surface); color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.al-bar__q:hover { color: var(--ink); border-color: var(--brass); }
.al-bar__r .btn { min-width: 72px; }

.al-foot {
  display: flex; gap: 4px; align-items: stretch;
  height: 24px; padding: 2px 4px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  flex: none; font-size: 11px; direction: ltr;
  color: var(--muted);
}
.al-foot__c {
  display: flex; align-items: center; padding: 0 8px;
  border: 1px solid var(--line-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.al-foot__c--grow { flex: 1; min-width: 0; }