/* ============================================================================
   OFFIIO GST — APPLICATION STYLESHEET
   ----------------------------------------------------------------------------
   Style direction : Minimalism & Swiss  (grid-led, hairline rules, high
                     contrast, zero ornament — the data is the design)
   Density         : 9/10  (financial registers must show ~25 rows per screen)
   Rule            : never hard-code a colour/size here. Use var(--token).
   ========================================================================== */

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

/* ==========================================================================
   1. RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;   /* every ₹ column aligns, everywhere */
}

/* Light text on a dark ground looks thin with greyscale smoothing on macOS — let the OS render it fuller. */
[data-theme="dark"] body { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }

h1, h2, h3, h4, h5, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

/* Base size for every icon() SVG. Declared here, before the component rules,
   so .nav-item__icon / .btn svg / .icon-btn svg still win on source order. */
.ico { width: 15px; height: 15px; flex-shrink: 0; display: inline-block; vertical-align: -2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection { background: var(--brand-soft); color: var(--brand-soft-text); }
html { accent-color: var(--brand); }   /* every radio, checkbox, range and date picker in the brand's colour */

/* Scrollbars — thin, unobtrusive, theme-aware */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 3px solid var(--canvas);
  border-radius: var(--r-full);
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   2. APP SHELL  —  sidebar + topbar + page
   ========================================================================== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  transition: grid-template-columns var(--dur-base) var(--ease-inout);
}
.app[data-nav="collapsed"] { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

/* ---- Sidebar ---------------------------------------------------------- */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--nav-bg);
  border-right: 1px solid var(--nav-border);
  z-index: var(--z-sidebar);
  overflow: hidden;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  height: var(--topbar-h);
  padding: 0 var(--sp-6);
  border-bottom: 1px solid var(--nav-border);
  flex-shrink: 0;
}
.sidebar__logo {
  width: 28px; height: 28px;
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--brand-on);
  display: grid; place-items: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-tight);
  flex-shrink: 0;
}
.sidebar__name {
  display: flex; flex-direction: column; min-width: 0;
}
.sidebar__name b {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--nav-text-active);
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
  white-space: nowrap;
}
.sidebar__name span {
  font-size: var(--fs-micro);
  color: var(--nav-text-muted);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.sidebar__scroll { flex: 1; overflow-y: auto; padding: var(--sp-5) 0 var(--sp-9); }
.sidebar__scroll::-webkit-scrollbar-thumb { border-color: var(--nav-bg); background: var(--nav-bg-hover); }

.nav-group { margin-bottom: var(--sp-2); }
.nav-group__label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--nav-group-label);
  padding: var(--sp-6) var(--sp-7) var(--sp-3);
  white-space: nowrap;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
  padding: var(--sp-4) var(--sp-7);
  color: var(--nav-text);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  border-left: 2px solid transparent;
  transition: background var(--dur-fast) var(--ease-inout),
              color var(--dur-fast) var(--ease-inout);
  text-decoration: none;
  position: relative;
}
.nav-item:hover { background: var(--nav-bg-hover); color: var(--nav-text-active); text-decoration: none; }
.nav-item__icon { width: 16px; height: 16px; flex-shrink: 0; stroke-width: 1.75; }
.nav-item__text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.nav-item__chev {
  width: 12px; height: 12px; flex-shrink: 0;
  color: var(--nav-text-muted);
  transition: transform var(--dur-base) var(--ease-inout);
}
.nav-item[aria-expanded="true"] .nav-item__chev { transform: rotate(90deg); }
.nav-item[aria-expanded="true"] { color: var(--nav-text-active); }

.nav-item__badge {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  background: var(--danger-solid);
  color: var(--on-solid);
  padding: 1px var(--sp-3);
  border-radius: var(--r-full);
  flex-shrink: 0;
}

/* sub-menu */
.nav-sub { overflow: hidden; }
.nav-sub[hidden] { display: none; }
.nav-sub .nav-item {
  padding: var(--sp-3) var(--sp-7) var(--sp-3) 41px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--nav-text);
}
.nav-sub .nav-item::before {
  content: "";
  position: absolute;
  left: 22px; top: 0; bottom: 0;
  width: 1px;
  background: var(--nav-border);
}
.nav-sub .nav-item:hover { background: var(--nav-bg-hover); }

.nav-item.is-active {
  background: var(--nav-bg-active);
  color: var(--nav-text-active);
  font-weight: var(--fw-semibold);
  border-left-color: var(--nav-text-active);
}
.nav-item.is-active::before { background: transparent; }
.nav-sub .nav-item.is-active { background: var(--nav-bg-active); }

/* collapsed sidebar */
.app[data-nav="collapsed"] .sidebar__name,
.app[data-nav="collapsed"] .nav-item__text,
.app[data-nav="collapsed"] .nav-item__chev,
.app[data-nav="collapsed"] .nav-group__label,
.app[data-nav="collapsed"] .nav-item__badge,
.app[data-nav="collapsed"] .nav-sub,
.app[data-nav="collapsed"] .sidebar__foot-text { display: none; }
.app[data-nav="collapsed"] .nav-item { justify-content: center; padding-inline: 0; }
.app[data-nav="collapsed"] .sidebar__brand { justify-content: center; padding-inline: 0; }

.sidebar__foot {
  border-top: 1px solid var(--nav-border);
  padding: var(--sp-5) var(--sp-7);
  flex-shrink: 0;
}
.sidebar__fy {
  display: flex; align-items: center; gap: var(--sp-4);
  color: var(--nav-text-muted);
  font-size: var(--fs-xs);
}
.sidebar__fy b { color: var(--nav-text); font-family: var(--font-mono); font-weight: var(--fw-medium); }

/* ---- Topbar ------------------------------------------------------------ */
.topbar {
  position: sticky; top: 0;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  height: var(--topbar-h);
  padding: 0 var(--sp-8);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.icon-btn {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--r-md);
  color: var(--text-secondary);
  transition: background var(--dur-fast), color var(--dur-fast);
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--surface-hover); color: var(--text); }
.icon-btn svg { width: 17px; height: 17px; stroke-width: 1.75; }
.icon-btn--rel { position: relative; }
.icon-btn__dot {
  position: absolute; top: 5px; right: 5px;
  width: 7px; height: 7px; border-radius: var(--r-full);
  background: var(--danger-solid);
  border: 1.5px solid var(--surface);
}

.topbar__search {
  position: relative;
  flex: 1;
  max-width: 420px;
}
.topbar__search svg {
  position: absolute; left: var(--sp-5); top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  color: var(--text-faint);
  pointer-events: none;
}
.topbar__search input {
  width: 100%;
  height: var(--control-h);
  padding: 0 var(--sp-7) 0 32px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  color: var(--text);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.topbar__search input::placeholder { color: var(--text-faint); }
.topbar__search input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: var(--shadow-focus);
}
.topbar__search kbd {
  position: absolute; right: var(--sp-4); top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  color: var(--text-faint);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xs);
  padding: 1px var(--sp-3);
  pointer-events: none;
}

.topbar__spacer { flex: 1; }

/* company / FY switcher pills */
.switcher {
  display: flex; align-items: center; gap: var(--sp-4);
  height: var(--control-h);
  padding: 0 var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text);
  transition: border-color var(--dur-fast), background var(--dur-fast);
  white-space: nowrap;
}
.switcher:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.switcher svg { width: 13px; height: 13px; color: var(--text-muted); flex-shrink: 0; }
.switcher__sub { color: var(--text-muted); font-weight: var(--fw-regular); }

.topbar__user {
  display: flex; align-items: center; gap: var(--sp-5);
  padding-left: var(--sp-6);
  border-left: 1px solid var(--border);
  margin-left: var(--sp-2);
}
.avatar {
  width: 30px; height: 30px; border-radius: var(--r-full);
  background: var(--brand); color: var(--brand-on);
  display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  flex-shrink: 0;
}
.topbar__user-meta { display: flex; flex-direction: column; line-height: 1.25; }
.topbar__user-meta b { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.topbar__user-meta span { font-size: var(--fs-micro); color: var(--text-muted); }

/* ---- Page -------------------------------------------------------------- */
.main { display: flex; flex-direction: column; min-width: 0; }
.page { padding: var(--sp-9) var(--sp-9) calc(var(--footbar-h) + var(--sp-9)); flex: 1; }
.page--flush { padding: 0; }

.page-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-7);
  margin-bottom: var(--sp-8);
  flex-wrap: wrap;
}
.page-head__main { min-width: 0; flex: 1; }
.breadcrumb {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb svg { width: 11px; height: 11px; opacity: .6; }

.page-title {
  display: flex; align-items: center; gap: var(--sp-6);
  flex-wrap: wrap;
}
.page-title h1 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}
.page-sub { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-3); }
.page-actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-4);
  height: var(--control-h);
  padding: 0 var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-inout),
              border-color var(--dur-fast) var(--ease-inout),
              color var(--dur-fast) var(--ease-inout);
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn svg { width: 15px; height: 15px; stroke-width: 2; flex-shrink: 0; }
.btn--sm { height: var(--control-h-sm); padding: 0 var(--sp-5); font-size: var(--fs-sm); }
.btn--sm svg { width: 13px; height: 13px; }
.btn--icon { width: var(--control-h); padding: 0; }
.btn--block { width: 100%; }

.btn--primary   { background: var(--brand); color: var(--brand-on); }
.btn--primary:hover { background: var(--brand-hover); }

.btn--default   { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn--default:hover { background: var(--surface-hover); border-color: var(--text-faint); }

.btn--ghost     { color: var(--text-secondary); }
.btn--ghost:hover { background: var(--surface-hover); color: var(--text); }

.btn--danger    { background: var(--danger-solid); color: var(--on-solid); }
.btn--danger:hover { filter: brightness(0.92); }

.btn--success   { background: var(--success-solid); color: var(--on-solid); }
.btn--success:hover { filter: brightness(0.92); }

.btn--soft      { background: var(--brand-soft); color: var(--brand-soft-text); }
.btn--soft:hover { filter: brightness(0.97); }

.btn--warn-soft { background: var(--warning-soft); color: var(--warning-text); }
.btn--warn-soft:hover { filter: brightness(0.97); }

.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); margin-left: 0; }
.btn-group .btn:last-child  { border-radius: 0 var(--r-md) var(--r-md) 0; }

/* ==========================================================================
   4. STATUS BADGES
   Solid fills, uppercase, wide tracking. Deliberately loud — a clerk must
   read PAID / UNPAID across a 90-row register without stopping to focus.
   ========================================================================== */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-3);
  min-width: 68px;
  padding: 3px var(--sp-5);
  border-radius: var(--r-sm);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
}
.badge--lg { font-size: var(--fs-xs); padding: var(--sp-3) var(--sp-7); min-width: 92px; border-radius: var(--r-md); }

.badge--paid      { background: var(--st-paid-bg);      color: var(--st-paid-fg); }
.badge--unpaid    { background: var(--st-unpaid-bg);    color: var(--st-unpaid-fg); }
.badge--partial   { background: var(--st-partial-bg);   color: var(--st-partial-fg); }
.badge--overdue   { background: var(--st-overdue-bg);   color: var(--st-overdue-fg); }
.badge--draft     { background: var(--st-draft-bg);     color: var(--st-draft-fg); }
.badge--sent      { background: var(--st-sent-bg);      color: var(--st-sent-fg); }
.badge--cancelled { background: var(--st-cancelled-bg); color: var(--st-cancelled-fg); }
.badge--rcm       { background: var(--st-rcm-bg);       color: var(--st-rcm-fg); }

/* Quiet chips — metadata, not status. Never use for paid/unpaid. */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: 1px var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.chip--cgst { background: var(--tax-cgst-soft); color: var(--tax-cgst); border-color: transparent; }
.chip--sgst { background: var(--tax-sgst-soft); color: var(--tax-sgst); border-color: transparent; }
.chip--igst { background: var(--tax-igst-soft); color: var(--tax-igst); border-color: transparent; }
.chip--info { background: var(--info-soft);     color: var(--info-text); border-color: transparent; }
.chip--warn { background: var(--warning-soft);  color: var(--warning-text); border-color: transparent; }
.chip--ok   { background: var(--success-soft);  color: var(--success-text); border-color: transparent; }
.chip--danger{background: var(--danger-soft);   color: var(--danger-text); border-color: transparent; }
.chip--brand{ background: var(--brand-soft);    color: var(--brand-soft-text); border-color: transparent; }
.chip--plain{ text-transform: none; letter-spacing: 0; font-weight: var(--fw-medium); font-size: var(--fs-xs); }

/* tag pills (as used on purchase line items: "cloud server", "ashish25") */
.tag {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: 1px var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.tag button { color: var(--text-faint); display: grid; place-items: center; }
.tag button:hover { color: var(--danger); }
.tag svg { width: 10px; height: 10px; stroke-width: 2.5; }

/* ==========================================================================
   5. CARD / PANEL
   ========================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}
.card__head {
  display: flex; align-items: center; gap: var(--sp-6);
  padding: var(--sp-7) var(--sp-8);
  border-bottom: 1px solid var(--border);
  min-height: 54px;
}
.card__head h2, .card__head h3 {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  flex: 1 0 auto;   /* the title keeps its width; a long sub-line wraps instead of running under it */
}
.card__head-sub { font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--fw-regular); }
.card__body { padding: var(--sp-8); }
.card__body--flush { padding: 0; }
.card__foot {
  padding: var(--sp-6) var(--sp-7);
  border-top: 1px solid var(--border);
  background: var(--surface-sunken);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.section-label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ==========================================================================
   6. DATA TABLE  —  the core of the whole product
   ========================================================================== */
.table-wrap { overflow-x: auto; }

.table { font-size: var(--fs-sm); }

.table thead th {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--surface-sunken);
  padding: var(--sp-6) var(--sp-7);
  text-align: left;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  border-bottom: 1px solid var(--border-strong);
  user-select: none;
}
.table thead th.is-sortable { cursor: pointer; }
.table thead th.is-sortable:hover { color: var(--text); }
.th-inner { display: inline-flex; align-items: center; gap: var(--sp-3); }
.th-inner svg { width: 11px; height: 11px; opacity: .45; }
.is-sortable:hover .th-inner svg { opacity: .9; }

.table tbody td {
  padding: var(--cell-py) var(--sp-7);
  border-bottom: 1px solid var(--divider);
  vertical-align: middle;
  height: var(--row-h);
}
.table tbody tr { transition: background var(--dur-fast); }
.table tbody tr:hover { background: var(--surface-hover); }
.table tbody tr.is-clickable { cursor: pointer; }
.table tbody tr:last-child td { border-bottom: none; }

/* totals footer — mirrors the client's existing register */
.table tfoot td {
  padding: var(--sp-6) var(--sp-7);   /* the same sides as the body, so a total sits under its column (critique P1-5) */
  background: var(--surface-sunken);
  border-top: 2px solid var(--border-strong);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

/* alignment + emphasis helpers */
.num       { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.num--b    { font-weight: var(--fw-semibold); }
.center    { text-align: center; }
.mono      { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* document id — invoice no, bill no, GSTIN, HSN */
.doc-id {
  font-family: var(--font-mono);
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  color: var(--text);
}
a.doc-id { color: var(--text-link); }
a.doc-id:hover { text-decoration: underline; }

/* the money cell: ₹ figure + optional foreign-currency original beneath */
.money { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.money__inr { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.money__fx {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-muted);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-tight);
  margin-top: 1px;
}
.money--in  .money__inr { color: var(--money-in); }
.money--out .money__inr { color: var(--money-out); }
.money--zero { color: var(--money-zero); font-weight: var(--fw-regular); }

/* party cell: name + secondary line (GSTIN / state) */
.party { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.party b {
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  color: var(--text);
  /* up to two lines, then an ellipsis — a long name wraps rather than widening its table (critique P0) */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.party span {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: var(--ls-tight);
}

.stack-2 { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.stack-2 .sub { font-size: var(--fs-micro); color: var(--text-muted); }

.flag { font-size: var(--fs-sm); }

/* row overdue accent — a red hairline on the left, not a red row (which
   would destroy scannability of the status column) */
/* an overdue row: its due text says so in red (critique P1-6: no stripe) */
.table tbody tr.row--in  td { background: var(--row-in-bg); }
.table tbody tr.row--out td { background: var(--row-out-bg); }

/* ==========================================================================
   7. FILTER BAR
   ========================================================================== */
.filters {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-7);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  background: var(--surface);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.filters__spacer { flex: 1; min-width: var(--sp-7); }

.field { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.field__label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.field__label .req { color: var(--danger); margin-left: 2px; }
.field__hint { font-size: var(--fs-xs); color: var(--text-muted); }
.field--grow { flex: 1; }

.input, .select, .textarea {
  caret-color: var(--brand);
  height: var(--control-h);
  padding: 0 var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border-input);
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  color: var(--text);
  width: 100%;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--shadow-focus);
}
.input:read-only, .input[readonly] { background: var(--surface-sunken); color: var(--text-secondary); }
.input--num { text-align: right; font-variant-numeric: tabular-nums; }
.input--mono { font-family: var(--font-mono); }
.input--sm { height: var(--control-h-sm); font-size: var(--fs-sm); padding-inline: var(--sp-4); }

.textarea { height: auto; min-height: 66px; padding: var(--sp-4) var(--sp-5); resize: vertical; line-height: var(--lh-snug); }

.select {
  appearance: none;
  padding-right: var(--sp-9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7A90' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-5) center;
  cursor: pointer;
}
[data-theme="dark"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237D8CA3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.search-inline { position: relative; }
.search-inline svg {
  position: absolute; left: var(--sp-5); top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--text-faint); pointer-events: none;
}
.search-inline .input { padding-left: 30px; }

/* result / pagination strip */
.table-foot {
  display: flex; align-items: center; gap: var(--sp-7);
  padding: var(--sp-6) var(--sp-7);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  flex-wrap: wrap;
}
.pager { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.pager--top { margin-left: auto; align-self: flex-end; gap: var(--sp-4); }   /* in the filters row, at its right (ADR-079) */
.pager__size { display: inline-flex; }
.select--sm { height: var(--control-h-sm); font-size: var(--fs-sm); }
.pager button {
  min-width: 28px; height: 28px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  display: grid; place-items: center;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.pager button:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--border-strong); }
.pager button[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: var(--brand-on); }
.pager button:disabled { opacity: .4; cursor: not-allowed; }
.pager svg { width: 13px; height: 13px; }

/* ==========================================================================
   8. KPI / STAT TILES
   ========================================================================== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-7);
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
}
/* The accent lives in the label's icon, not a stripe down the card's side (Impeccable craft floor) */
.kpi__label svg { color: var(--kpi-accent, currentColor); }
.kpi--brand   { --kpi-accent: var(--brand); }
.kpi--danger  { --kpi-accent: var(--danger-solid); }
.kpi--success { --kpi-accent: var(--success-solid); }
.kpi--warning { --kpi-accent: var(--warning-solid); }
.kpi--info    { --kpi-accent: var(--info-solid); }

.kpi__label {
  display: flex; align-items: center; gap: var(--sp-4);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-5);
}
.kpi__label svg { width: 13px; height: 13px; }
.kpi__value {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.kpi__meta {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  flex-wrap: wrap;
}
.delta { display: inline-flex; align-items: center; gap: 2px; font-weight: var(--fw-semibold); }
.delta svg { width: 12px; height: 12px; }
.delta--up   { color: var(--success-text); }
.delta--down { color: var(--danger-text); }

/* mini bar meter used inside KPI tiles */
.meter { height: 4px; border-radius: var(--r-full); background: var(--surface-sunken); overflow: hidden; margin-top: var(--sp-5); display: flex; }
.meter span { display: block; height: 100%; }

/* ==========================================================================
   9. LAYOUT GRIDS
   ========================================================================== */
.grid { display: grid; gap: var(--sp-6); }
.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)); }
.grid--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grid--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.grid--3-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }

.stack   { display: flex; flex-direction: column; gap: var(--sp-6); }
.row     { display: flex; align-items: center; gap: var(--sp-5); }
.row--top{ align-items: flex-start; }
.row--wrap { flex-wrap: wrap; }
.spacer  { flex: 1; }

@media (max-width: 1280px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--2-1, .grid--1-2, .grid--3-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   10. DOCUMENT VIEW  (single invoice / single purchase)
   ========================================================================== */
.doc-head {
  display: flex; align-items: flex-start; gap: var(--sp-7);
  padding: var(--sp-7) var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
  box-shadow: var(--shadow-xs);
}
.doc-head__id { display: flex; flex-direction: column; gap: var(--sp-3); }
.doc-head__id h1 {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
}
.doc-head__kind {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* meta strip: Date / Due / Terms / PO ... */
.meta-strip {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-8) var(--sp-10);
  padding: var(--sp-7) var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}
.meta { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.meta dt {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.meta dd {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--text);
}
.meta dd.mono { font-family: var(--font-mono); font-size: var(--fs-sm); }

/* billing party blocks */
.party-block { padding: var(--sp-7); }
.party-block + .party-block { border-left: 1px solid var(--border); }
.party-block__role {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-5);
}
.party-block__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-3);
}
.party-block__addr {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-5);
}
.kv-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.kv { display: flex; gap: var(--sp-5); font-size: var(--fs-sm); }
.kv dt { color: var(--text-muted); min-width: 88px; flex-shrink: 0; }
.kv dd { margin: 0; font-family: var(--font-mono); font-weight: var(--fw-medium); letter-spacing: var(--ls-tight); }
.kv dd.plain { font-family: var(--font-sans); letter-spacing: 0; }

/* line-item description block inside the items table */
.li-name { font-weight: var(--fw-medium); font-size: var(--fs-sm); margin-bottom: 2px; }
.li-desc { font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-snug); }
.li-tags { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); }
.li-meta { display: flex; gap: var(--sp-5); flex-wrap: wrap; margin-top: var(--sp-3); font-size: var(--fs-micro); color: var(--text-faint); }

/* totals panel */
.totals { width: 100%; font-size: var(--fs-base); }
.totals tr td { padding: var(--sp-4) 0; }
.totals tr td:first-child { color: var(--text-secondary); }
.totals tr td:last-child  { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); white-space: nowrap; }
.totals tr.totals__rule td { border-top: 1px solid var(--border); padding-top: var(--sp-6); }
.totals tr.totals__grand td {
  border-top: 2px solid var(--text);
  padding-top: var(--sp-6);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text);
  letter-spacing: var(--ls-tight);
}
.totals tr.totals__due td {
  padding-top: var(--sp-5);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--danger-text);
}
.totals tr.totals__due td:first-child { color: var(--danger-text); }
.totals .fx-note { font-size: var(--fs-micro); color: var(--text-muted); font-family: var(--font-mono); font-weight: var(--fw-regular); display: block; }

.amount-words {
  padding: var(--sp-6) var(--sp-7);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.amount-words b { font-weight: var(--fw-semibold); }

/* ==========================================================================
   11. ACCOUNTING IMPACT  (auto-contra / double-entry proof)
   ========================================================================== */
.je {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.je thead th {
  font-family: var(--font-sans);
  position: static;
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding: var(--sp-3) var(--sp-5);
}
.je tbody td { padding: var(--sp-4) var(--sp-5); border-bottom: 1px dashed var(--divider); }
.je tbody tr:hover { background: transparent; }
.je__acc { color: var(--text); }
.je__acc--cr { padding-left: var(--sp-9); color: var(--text-secondary); }
.je__acc-sub { font-family: var(--font-sans); font-size: var(--fs-micro); color: var(--text-faint); display: block; }
.je tfoot td {
  background: transparent;
  border-top: 2px solid var(--border-strong);
  padding: var(--sp-5);
  font-weight: var(--fw-semibold);
}
.je__balanced {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--success-text);
}
.je__balanced svg { width: 13px; height: 13px; stroke-width: 2.5; }

/* ==========================================================================
   12. TIMELINE / ACTIVITY LOG
   ========================================================================== */
.timeline { display: flex; flex-direction: column; }
.tl {
  display: grid;
  grid-template-columns: 128px 16px 1fr;
  gap: var(--sp-5);
  padding-bottom: var(--sp-7);
  position: relative;
}
.tl:last-child { padding-bottom: 0; }
.tl__when {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-muted);
  padding-top: 2px;
  text-align: right;
  white-space: nowrap;
}
.tl__rail { position: relative; display: flex; justify-content: center; }
.tl__dot {
  width: 9px; height: 9px; border-radius: var(--r-full);
  background: var(--surface);
  border: 2px solid var(--border-strong);
  margin-top: 4px;
  z-index: 1;
  flex-shrink: 0;
}
.tl__dot--brand   { border-color: var(--brand); }
.tl__dot--success { border-color: var(--success-solid); }
.tl__dot--danger  { border-color: var(--danger-solid); }
.tl__dot--warning { border-color: var(--warning-solid); }
.tl:not(:last-child) .tl__rail::after {
  content: ""; position: absolute; top: 13px; bottom: -8px;
  width: 1px; background: var(--border);
}
.tl__body { font-size: var(--fs-sm); line-height: var(--lh-snug); padding-top: 1px; min-width: 0; }
.tl__body b { font-weight: var(--fw-semibold); }
.tl__by { font-size: var(--fs-micro); color: var(--text-muted); margin-top: 2px; }

/* ==========================================================================
   13. MISC
   ========================================================================== */
.empty {
  padding: var(--sp-11) var(--sp-7);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.empty > svg { width: 26px; height: 26px; margin: 0 auto var(--sp-5); opacity: .4; }
.empty__act { margin-top: var(--sp-6); }

.note {
  display: flex; gap: var(--sp-5);
  padding: var(--sp-6);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  border: 1px solid transparent;
}
.note svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.note--info  { background: var(--info-soft);    color: var(--info-text); }
.note--warn  { background: var(--warning-soft); color: var(--warning-text); }
.note--ok    { background: var(--success-soft); color: var(--success-text); }
.note--danger{ background: var(--danger-soft);  color: var(--danger-text); }
.note b { font-weight: var(--fw-semibold); }

.divider { height: 1px; background: var(--border); border: 0; margin: var(--sp-7) 0; }

.progress-lines { display: flex; flex-direction: column; gap: var(--sp-5); }
.pline__top { display: flex; align-items: baseline; gap: var(--sp-5); font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.pline__top b { flex: 1; font-weight: var(--fw-medium); }
.pline__val { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.pline__bar { height: 6px; border-radius: var(--r-full); background: var(--surface-sunken); overflow: hidden; }
.pline__bar span { display: block; height: 100%; border-radius: var(--r-full); }

.tabs { display: flex; gap: var(--sp-2); border-bottom: 1px solid var(--border); }
.tab {
  padding: var(--sp-5) var(--sp-6);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
  white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--brand); border-bottom-color: var(--brand); }

/* text utilities */
.t-muted { color: var(--text-muted); }
.t-faint { color: var(--text-faint); }
.t-sec   { color: var(--text-secondary); }
.t-in    { color: var(--money-in); }
.t-out   { color: var(--money-out); }
.t-danger{ color: var(--danger-text); }
.t-ok    { color: var(--success-text); }
.t-warn  { color: var(--warning-text); }
.t-xs    { font-size: var(--fs-xs); }
.t-sm    { font-size: var(--fs-sm); }
.t-md    { font-size: var(--fs-md); }
.t-b     { font-weight: var(--fw-semibold); }
.t-bold  { font-weight: var(--fw-bold); }
.t-up    { text-transform: uppercase; letter-spacing: var(--ls-wide); }
.nowrap  { white-space: nowrap; }
.mt-0{margin-top:0}.mt-4{margin-top:var(--sp-4)}.mt-6{margin-top:var(--sp-6)}.mt-7{margin-top:var(--sp-7)}.mt-8{margin-top:var(--sp-8)}
.mb-4{margin-bottom:var(--sp-4)}.mb-6{margin-bottom:var(--sp-6)}.mb-7{margin-bottom:var(--sp-7)}.mb-8{margin-bottom:var(--sp-8)}
.w-full{width:100%}

/* ==========================================================================
   14. CHARTS  (hand-rolled SVG — zero dependencies, theme-aware)
   ========================================================================== */
.chart { width: 100%; overflow: visible; }
.chart__grid line { stroke: var(--chart-grid); stroke-width: 1; }
.chart__axis text { fill: var(--chart-axis); font-size: var(--fs-nano); font-family: var(--font-sans); }
.chart__bar { transition: opacity var(--dur-fast); }
.chart__bar:hover { opacity: .78; }
.chart-legend { display: flex; gap: var(--sp-7); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-secondary); }
.chart-legend span { display: inline-flex; align-items: center; gap: var(--sp-3); }
.chart-legend i { width: 9px; height: 9px; border-radius: 2px; display: block; }

.donut-wrap { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.donut-center { font-variant-numeric: tabular-nums; }
.donut-legend { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: var(--sp-5); }
.dleg { display: flex; align-items: center; gap: var(--sp-5); font-size: var(--fs-sm); }
.dleg i { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.dleg b { flex: 1; font-weight: var(--fw-regular); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dleg span { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   15. TOPBAR: CONTEXT LABEL AND USER MENU (the responsive rules are last in the file)
   ========================================================================== */
/* Where these books are: the branch and the financial year, one quiet label in the topbar */
.ctx { display: inline-flex; align-items: center; gap: var(--sp-3); height: var(--control-h-sm); padding: 0 var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-full);
  font-size: var(--fs-xs); color: var(--text-secondary); white-space: nowrap; }
.ctx svg { width: 13px; height: 13px; color: var(--text-muted); }
.ctx b { color: var(--text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.ctx__sep { width: 1px; height: 12px; background: var(--border-strong); margin-inline: var(--sp-2); }
.ctx__k { color: var(--text-secondary); }

/* The signed-in person's menu: name, row density, password, sign out */
.usermenu { margin-left: var(--sp-2); padding-left: var(--sp-5); border-left: 1px solid var(--border); }
.usermenu__btn { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); cursor: pointer; color: var(--text-muted); }
.usermenu__btn:hover { background: var(--surface-hover); }
.usermenu__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.usermenu__btn .topbar__user-meta { color: var(--text); }
.usermenu__list { min-width: 15rem; }
.usermenu__list a { display: flex; align-items: center; gap: var(--sp-3); }
.usermenu__list a svg { width: 14px; height: 14px; }
.usermenu__who { display: grid; gap: var(--sp-1); padding: var(--sp-4) var(--sp-5) var(--sp-5); margin-bottom: var(--sp-2); border-bottom: 1px solid var(--divider); font-size: var(--fs-sm); }
.usermenu__who span { font-size: var(--fs-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   16. ADDENDA
   ========================================================================== */

/* Nav items whose page is not designed yet (the remaining ~100 of 107).
   Visible — so the full product scope reads at a glance — but inert. */
.nav-item.is-wip { opacity: .48; cursor: default; }
.nav-item.is-wip:hover { background: transparent; color: var(--nav-text); }
.app[data-nav="collapsed"] .nav-branch > .nav-item { position: relative; }

/* Two-up party block inside a bordered card */
.party-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .party-grid { grid-template-columns: minmax(0, 1fr); }
  .party-block + .party-block { border-left: 0; border-top: 1px solid var(--border); }
}

/* Line-item table needs roomier cells than a register */
.table--items tbody td { padding-top: var(--sp-6); padding-bottom: var(--sp-6); height: auto; vertical-align: top; }
.table--items tbody td.num { vertical-align: top; }
.table--items tbody tr:hover { background: transparent; }

/* Totals column wrapper on document pages */
.totals-panel { max-width: 380px; margin-left: auto; width: 100%; }

/* Small stat list used in side panels */
.ministat { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-6); padding: var(--sp-4) 0; }
.ministat + .ministat { border-top: 1px dashed var(--divider); }
.ministat__k { font-size: var(--fs-sm); color: var(--text-secondary); }
.ministat__v { font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Dashboard list rows (renewals, compliance, recent docs) */
.listrow {
  display: flex; align-items: center; gap: var(--sp-6);
  padding: var(--sp-5) var(--sp-7);
  border-bottom: 1px solid var(--divider);
  transition: background var(--dur-fast);
}
.listrow:last-child { border-bottom: 0; }
.listrow:hover { background: var(--surface-hover); }
.listrow__main { flex: 1; min-width: 0; }
.listrow__title { font-size: var(--fs-sm); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listrow__sub { font-size: var(--fs-micro); color: var(--text-muted); margin-top: 1px; }
.listrow__date {
  width: 42px; flex-shrink: 0; text-align: center;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: var(--sp-2) 0; line-height: 1.1;
}
.listrow__date b { display: block; font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.listrow__date span { display: block; font-size: var(--fs-nano); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted); }

/* Exchange-rate strip on foreign-currency purchases */
.fx-strip {
  display: flex; align-items: center; gap: var(--sp-6);
  padding: var(--sp-5) var(--sp-7);
  background: var(--brand-soft);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--brand-soft-text);
  flex-wrap: wrap;
}
.fx-strip b { font-family: var(--font-mono); font-weight: var(--fw-semibold); }
.fx-strip svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Sticky action bar at the foot of a document page */
.docbar {
  position: sticky; bottom: var(--footbar-h);
  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-8);
  background: var(--surface);
  border-top: 1px solid var(--border);
  margin: var(--sp-8) calc(var(--sp-9) * -1) calc(var(--footbar-h) * -1);
  box-shadow: 0 -4px 12px -6px rgba(0,0,0,.14);
  flex-wrap: wrap;
  z-index: var(--z-sticky);
}

/* Status must never scroll out of view. In a wide register the whole point of
   the page is answering "what is paid and what is not" at a glance, so the
   status column is pinned to the right edge while the rest scrolls under it. */
.table--sticky-end th:last-child,
.table--sticky-end td:last-child {
  position: sticky;
  right: 0;
  z-index: 3;
  background: var(--surface);
  box-shadow: -1px 0 0 var(--border);
}
.table--sticky-end thead th:last-child { background: var(--surface-sunken); z-index: 4; }
.table--sticky-end tfoot td:last-child { background: var(--surface-sunken); }
.table--sticky-end tbody tr:hover td:last-child { background: var(--surface-hover); }

.flag { margin-right: 3px; }

/* ==========================================================================
   17. FLOATING FOOTER — universal search
   Fixed to the bottom of the viewport, above everything. Typing a #tag here
   is the fastest route to the Tags Report, which is the product's headline
   feature; burying that in a menu would waste it.
   ========================================================================== */
.footbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--footbar-h);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--sp-7);
  padding: 0 var(--sp-7) 0 0;
  background: var(--nav-bg);
  border-top: 1px solid var(--nav-border);
  box-shadow: var(--footbar-shadow);
}
/* Offiio's mark and release, centred in the sidebar's width (4 Oct) */
.footbar__brand {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-5);
  width: var(--sidebar-w); height: 100%;
  flex-shrink: 0;
  color: var(--nav-text-active); text-decoration: none;
  border-right: 1px solid var(--nav-border);
}
.footbar__brand:focus-visible { outline: none; box-shadow: inset var(--shadow-focus); }
.footbar__logo { display: block; height: var(--brand-foot-h); width: auto; }
.footbar__icon { display: none; width: var(--brand-icon-s); height: var(--brand-icon-s); }
.footbar__ver { padding: var(--sp-1) var(--sp-4); border: 1px solid var(--nav-field-border); border-radius: var(--r-full);
  font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--nav-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.app[data-nav="collapsed"] ~ .footbar .footbar__brand { width: var(--sidebar-w-collapsed); }
.app[data-nav="collapsed"] ~ .footbar :is(.footbar__logo, .footbar__ver) { display: none; }
.app[data-nav="collapsed"] ~ .footbar .footbar__icon { display: block; }

/* The universal search: a real field on the ink — its own fill and edge, the icon and the #tag hint in the brand's
   lifted indigo, the shortcut shown; focus lifts the edge to the brand */
.footbar__search { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.footbar__search > svg {
  position: absolute; left: var(--sp-6); top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--nav-accent); pointer-events: none;
}
.footbar__search input {
  width: 100%; height: var(--footbar-search-h);
  padding: 0 calc(var(--sp-12) * 4) 0 calc(var(--sp-6) + 16px + var(--sp-5));
  background: var(--nav-field-bg);
  border: 1px solid var(--nav-field-border);
  border-radius: var(--r-md);
  color: var(--nav-text-active);
  font-size: var(--fs-base);
  caret-color: var(--nav-accent);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.footbar__search input::placeholder { color: var(--nav-text); opacity: 1; }
.footbar__search input:hover { border-color: var(--nav-field-hover); }
.footbar__search input:focus { outline: none; border-color: var(--nav-accent); box-shadow: var(--nav-focus-ring); }
.footbar__search input::-webkit-search-cancel-button { filter: invert(1) opacity(.6); }
.footbar__hints { position: absolute; right: var(--sp-4); display: flex; align-items: center; gap: var(--sp-5); pointer-events: none;
  font-size: var(--fs-xs); color: var(--nav-text); }
.footbar__hints > span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.footbar__hints kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 var(--sp-3); border: 1px solid var(--nav-field-border);
  border-radius: var(--r-sm); background: var(--nav-bg); font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--nav-accent); }
.footbar__search:focus-within .footbar__hints { display: none; }   /* out of the way once typing starts */
.footbar__links { display: flex; align-items: center; gap: var(--sp-8); flex-shrink: 0; }
.footbar__links a { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--nav-text); font-size: var(--fs-sm); text-decoration: none; }
.footbar__links a svg { width: 15px; height: 15px; }
.footbar__links a:hover { color: var(--nav-text-active); text-decoration: none; }

/* tag suggestions popping up out of the footer bar */
.tagsuggest {
  position: absolute; bottom: calc(100% + 8px); left: 0;
  min-width: 320px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  padding: var(--sp-3);
}
.tagsuggest[hidden] { display: none; }
.tagsuggest__hint {
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.tagsuggest button {
  display: flex; align-items: center; gap: var(--sp-5);
  width: 100%;
  padding: var(--sp-5) var(--sp-5);
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  color: var(--text);
  text-align: left;
}
.tagsuggest button:hover, .tagsuggest button.is-active { background: var(--surface-hover); }
.tagsuggest button b { flex: 1; font-weight: var(--fw-medium); }
.tagsuggest button span { font-size: var(--fs-xs); color: var(--text-muted); }
.tagsuggest__new {
  color: var(--brand) !important;
  margin-top: var(--sp-2);
  border-top: 1px solid var(--divider);
  border-radius: 0 0 var(--r-md) var(--r-md);
}

/* ==========================================================================
   18. TAGS  —  internal attribution on a document LINE
   Never printed, never visible on a client login. Styled as an internal
   annotation so it reads differently from customer-facing data.
   ========================================================================== */
.tagline { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); }
.tagline__k {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}
.htag {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 1px var(--sp-4);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  background: var(--brand-soft);
  color: var(--brand-soft-text);
  border: 1px dashed var(--indigo-300);
  white-space: nowrap;
  text-decoration: none;
}
a.htag:hover { background: var(--brand); color: var(--brand-on); border-style: solid; text-decoration: none; }
.htag--muted { background: var(--surface-sunken); color: var(--text-muted); border-color: var(--border-strong); }
.htag button { color: inherit; opacity: .55; display: grid; place-items: center; }
.htag button:hover { opacity: 1; }
.htag svg { width: 10px; height: 10px; stroke-width: 2.5; }

.tag-input {
  min-width: 96px;
  height: 22px;
  padding: 0 var(--sp-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text);
}
.tag-input:focus { outline: none; border-color: var(--brand); border-style: solid; }

/* Marks any block that must not appear on a printed / exported document. */
.internal-only { position: relative; }
@media print { .internal-only { display: none !important; } }

/* ==========================================================================
   19. TAGS REPORT
   ========================================================================== */
.pnl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-6);
}
.pnl {
  padding: var(--sp-7);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.pnl__k {
  display: flex; align-items: center; gap: var(--sp-4);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-5);
}
.pnl__v { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); line-height: 1.1; }
.pnl__sub { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--text-muted); }
.pnl--income  { --pnl-accent: var(--success-solid); }
.pnl--expense { --pnl-accent: var(--danger-solid); }
.pnl--unpaid  { --pnl-accent: var(--warning-solid); }
.pnl--profit  { --pnl-accent: var(--brand); background: var(--brand-soft); }
/* a small dot of the box's colour before its label — the colour marks the kind, without a stripe */
.pnl__k::before, .stat__k::before { content: ""; display: inline-block; width: var(--sp-3); height: var(--sp-3); margin-right: var(--sp-3); border-radius: var(--r-full);
  background: var(--pnl-accent, var(--stat-accent, var(--border-strong))); vertical-align: middle; }
.pnl--profit .pnl__k { color: var(--brand-soft-text); }
.pnl--profit .pnl__v { color: var(--brand-soft-text); }
.pnl--loss { --pnl-accent: var(--danger-solid); background: var(--danger-soft); }
.pnl--loss .pnl__k, .pnl--loss .pnl__v { color: var(--danger-text); }

/* Ledger-style row tinting: money out red, money in green, unpaid amber.
   Kept to a 6% wash so the status badges stay the loudest thing on the row. */
.table tbody tr.r-out  td { background: color-mix(in srgb, var(--danger-solid) 6%, transparent); }
.table tbody tr.r-in   td { background: color-mix(in srgb, var(--success-solid) 7%, transparent); }
.table tbody tr.r-due  td { background: color-mix(in srgb, var(--warning-solid) 8%, transparent); }
.table tbody tr.r-out:hover td { background: color-mix(in srgb, var(--danger-solid) 12%, transparent); }
.table tbody tr.r-in:hover  td { background: color-mix(in srgb, var(--success-solid) 13%, transparent); }
.table tbody tr.r-due:hover td { background: color-mix(in srgb, var(--warning-solid) 14%, transparent); }

/* ==========================================================================
   20. TAB PANELS
   Used on document pages so the invoice itself stays the whole screen, and
   accounting / activity / compliance live one click away instead of below.
   ========================================================================== */
.tabbar {
  display: flex; gap: var(--sp-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-8);
  overflow-x: auto;
}
.tabpanel[hidden] { display: none; }

/* A 6% wash reads fine on white but disappears on a dark surface, so dark
   mode gets its own, stronger set. */
[data-theme="dark"] .table tbody tr.r-out td { background: color-mix(in srgb, var(--danger-solid)  16%, transparent); }
[data-theme="dark"] .table tbody tr.r-in  td { background: color-mix(in srgb, var(--success-solid) 16%, transparent); }
[data-theme="dark"] .table tbody tr.r-due td { background: color-mix(in srgb, var(--warning-solid) 17%, transparent); }
[data-theme="dark"] .table tbody tr.r-out:hover td { background: color-mix(in srgb, var(--danger-solid)  24%, transparent); }
[data-theme="dark"] .table tbody tr.r-in:hover  td { background: color-mix(in srgb, var(--success-solid) 24%, transparent); }
[data-theme="dark"] .table tbody tr.r-due:hover td { background: color-mix(in srgb, var(--warning-solid) 25%, transparent); }

/* Tinted rows need their pinned status cell tinted too, or it reads as a
   floating white block at the end of a coloured row. */
.table--sticky-end tbody tr.r-out td:last-child,
.table--sticky-end tbody tr.r-in  td:last-child,
.table--sticky-end tbody tr.r-due td:last-child { background: var(--surface); }
[data-theme="dark"] .table--sticky-end tbody tr.r-out td:last-child { background: color-mix(in srgb, var(--danger-solid)  16%, var(--surface)); }
[data-theme="dark"] .table--sticky-end tbody tr.r-in  td:last-child { background: color-mix(in srgb, var(--success-solid) 16%, var(--surface)); }
[data-theme="dark"] .table--sticky-end tbody tr.r-due td:last-child { background: color-mix(in srgb, var(--warning-solid) 17%, var(--surface)); }
.table--sticky-end tbody tr.r-out td:last-child { background: color-mix(in srgb, var(--danger-solid)  6%, var(--surface)); }
.table--sticky-end tbody tr.r-in  td:last-child { background: color-mix(in srgb, var(--success-solid) 7%, var(--surface)); }
.table--sticky-end tbody tr.r-due td:last-child { background: color-mix(in srgb, var(--warning-solid) 8%, var(--surface)); }

/* ==========================================================================
   AUTH & INSTALL — the screens drawn before the shell exists: installer,
   sign-in, forgot / reset password, first-run wizard. One centred column on
   the canvas; everything inside is the ordinary card / field / note set.
   ========================================================================== */
.auth {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  padding: var(--sp-12) var(--sp-7);
  background: var(--canvas);
}
.auth__panel { width: 100%; max-width: var(--auth-w); display: flex; flex-direction: column; gap: var(--sp-7); }
.auth__panel--wide { max-width: var(--auth-w-wide); }
.auth__top { display: flex; align-items: center; gap: var(--sp-5); }
.auth__name { display: flex; flex-direction: column; line-height: 1.15; }
.auth__name b { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); letter-spacing: var(--ls-tight); }
.auth__name span { font-size: var(--fs-micro); color: var(--text-muted); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.auth__title { font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); margin: 0; }
.auth__foot { font-size: var(--fs-xs); color: var(--text-faint); text-align: center; }
.auth .card__body .stack { gap: var(--sp-7); }
.field__error { font-size: var(--fs-xs); color: var(--danger-text); }
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--danger); }

/* Native checkbox, brand-tinted, with its label beside it. */
.check { display: flex; align-items: flex-start; gap: var(--sp-4); font-size: var(--fs-base); color: var(--text); cursor: pointer; }
.check input { accent-color: var(--brand); width: var(--sp-7); height: var(--sp-7); margin: var(--sp-1) 0 0; flex-shrink: 0; }
.check small { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
.setup-logo { max-height: var(--sp-12); max-width: calc(var(--sp-12) * 5); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }

/* ==========================================================================
   SETTINGS HUB — its own left sub-navigation beside the section content.
   ========================================================================== */
.settings { display: grid; grid-template-columns: var(--settings-nav-w) minmax(0, 1fr); gap: var(--sp-9); align-items: start; }
.settings__nav { position: sticky; top: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-1); }
.settings__nav .nav-group__label { color: var(--text-muted); padding: var(--sp-6) var(--sp-5) var(--sp-2); }
.settings__nav .nav-group__label:first-child { padding-top: 0; }
.settings__link {
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md);
  font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--text-secondary);
}
.settings__link:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.settings__link.is-active { background: var(--surface-active); color: var(--brand-soft-text); font-weight: var(--fw-semibold); }
@media (max-width: 900px) {
  .settings { grid-template-columns: minmax(0, 1fr); }
  .settings__nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .settings__nav .nav-group__label { display: none; }
}
.inline-form { display: inline; }
.pre-wrap { white-space: pre-wrap; }
.textarea--code { font-family: var(--font-mono); font-size: var(--fs-sm); }

/* Numeric and centred column headers. `.table thead th` sets text-align: left and outranks a bare
   `.num` / `.center`, so headers sat left while their figures sat right. */
.table thead th.num    { text-align: right; }
.table thead th.center { text-align: center; }

/* Inline copy button beside a GSTIN, PAN, email or address (party profile). Smaller than
   .icon-btn so it sits on the text line; turns green for a moment once copied (app.js). */
.copy-btn {
  display: inline-grid; place-items: center;
  width: var(--sp-9); height: var(--sp-9);
  margin-left: var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--text-faint);
  vertical-align: middle;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.copy-btn:hover { color: var(--brand); background: var(--surface-hover); }
.copy-btn[data-copied] { color: var(--success-text); }
.copy-btn .ico { width: 14px; height: 14px; }

/* Party profile header: identity on the left, addresses on the right. */
.profile-line { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-secondary); }
.profile-line .ico { color: var(--text-muted); }
.profile-line + .profile-line { margin-top: var(--sp-4); }
/* Tabs sitting on the top edge of a card (party profile) rather than above page content. */
.tabbar--card { margin-bottom: 0; padding: 0 var(--sp-8); }


/* Modal — a native <dialog>, so focus is trapped and Esc closes it without any script.
   Two uses: the shared confirmation (layout.php, filled from data-confirm-* on the button) and
   quick-add forms (a category or a unit typed without leaving the item form). Never the browser's confirm(). */
.modal {
  padding: 0; border: 1px solid var(--border-strong); border-radius: var(--r-xl);
  background: var(--surface-raised); color: var(--text);
  box-shadow: var(--shadow-lg);
  width: min(30rem, calc(100vw - var(--sp-12)));
  z-index: var(--z-modal);
}
.modal::backdrop { background: var(--surface-inverse); opacity: 0.45; }
.modal__head { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-7) var(--sp-8); border-bottom: 1px solid var(--border); }
.modal__head h2 { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin: 0; }
.modal__body { padding: var(--sp-8); display: grid; gap: var(--sp-6); font-size: var(--fs-base); }
.modal__foot { display: flex; justify-content: flex-end; gap: var(--sp-4); padding: var(--sp-6) var(--sp-8); border-top: 1px solid var(--border); background: var(--surface-sunken); border-radius: 0 0 var(--r-xl) var(--r-xl); }
.modal__error { color: var(--danger-text); font-size: var(--fs-sm); }

/* Category tree: each level indents one step. */
.tree-d2 { padding-left: calc(var(--sp-8) + var(--sp-8)); }
.tree-d3 { padding-left: calc(var(--sp-8) + var(--sp-8) * 2); }
.tree-d4 { padding-left: calc(var(--sp-8) + var(--sp-8) * 3); }

/* A text-link button under a field ("+ New category"). */
.link-btn { display: inline; padding: 0; margin-top: var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--brand); text-align: left; }
.link-btn:hover { text-decoration: underline; }
[data-track-fields].is-off { opacity: 0.5; }

/* The import guide: numbered steps, readable when printed. */
.guide-steps { list-style: decimal; margin: 0; padding-left: var(--sp-10); display: grid; gap: var(--sp-4); font-size: var(--fs-base); color: var(--text-secondary); }
.guide-steps li::marker { color: var(--brand); font-weight: var(--fw-semibold); }

/* Document line editor (invoice, proforma, challan forms). Widths keep the money columns steady as rows are added. */
.table--lines td { vertical-align: top; }
.table--lines .col-item { min-width: 300px; }
.table--lines .col-hsn { width: 104px; }
.table--lines .col-qty { width: 96px; }
.table--lines .col-money { width: 128px; }
.table--lines .col-gst { width: 92px; }
.table--lines .stack { gap: var(--sp-3); }
.table--lines .row--wrap { gap: var(--sp-3); }
.table--lines .row--wrap .input { flex: 1; min-width: 140px; }
.table--lines .tagline { margin-top: 0; }
.table--lines .tag-input { flex: 1; }

/* Text for screen readers only. */
.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; }

/* Dashboard charts: series colours as classes (no inline style under the CSP). */
.chart .c1, .chart-legend i.c1 { fill: var(--chart-1); background: var(--chart-1); }
.chart .c2, .chart-legend i.c2 { fill: var(--chart-2); background: var(--chart-2); }
.chart-legend i.c3 { background: var(--chart-3); } .chart-legend i.c4 { background: var(--chart-4); } .chart-legend i.c5 { background: var(--chart-5); }
.donut circle { fill: none; stroke-width: 14; }
.donut .s0 { stroke: var(--surface-sunken); } .donut .s1 { stroke: var(--chart-1); } .donut .s2 { stroke: var(--chart-2); }
.donut .s3 { stroke: var(--chart-3); } .donut .s4 { stroke: var(--chart-4); } .donut .s5 { stroke: var(--chart-5); }
.donut text { fill: var(--text); font-family: var(--font-sans); }
/* Employees (ADR-059): a profile photo, and progress bars drawn in SVG (widths are attributes, so no inline style under the CSP). */
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.avatar--xl { width: var(--avatar-xl); height: var(--avatar-xl); font-size: var(--fs-lg); overflow: hidden; }
.bar { display: block; width: 100%; height: var(--sp-4); margin-top: var(--sp-3); }
.bar__track { fill: var(--surface-sunken); }
.bar__fill { fill: var(--chart-1); }
.bar__fill--ok { fill: var(--success-solid); }
/* A KPI tile that opens its report. */
a.kpi { color: inherit; text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out); }
a.kpi:hover { border-color: var(--brand); }

/* A choosable card (Settings → Invoice Templates): radio, name, a line about it, a preview link. */
.tpl-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); cursor: pointer; }
.tpl-card:hover { border-color: var(--border-strong); }
.tpl-card.is-active, .tpl-card:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.input--color { width: 72px; height: 38px; padding: var(--sp-2); cursor: pointer; }

/* A wider modal for forms with long fields (the Send email popup). */
.modal.modal--wide { width: min(46rem, calc(100vw - var(--sp-12))); }

/* ==========================================================================
   Popup forms (plan step 0) — every create form opens here on demand.
   ========================================================================== */
.modal--form { width: min(52rem, calc(100vw - var(--sp-12))); max-height: calc(100vh - var(--sp-12)); }
.modal--form[data-size="lg"]   { width: min(68rem, calc(100vw - var(--sp-12))); }
.modal--form[data-size="full"] { width: calc(100vw - var(--sp-12)); height: calc(100vh - var(--sp-12)); }
.modal--form[open] { display: flex; flex-direction: column; }
.modal--form .modal__head { flex: none; }
.fm-head { min-width: 0; }
.fm-sub { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--text-muted); }
.fm-body { flex: 1; overflow: auto; padding: var(--sp-8); background: var(--canvas); overscroll-behavior: contain; }
.modal--form[aria-busy="true"] .fm-body { opacity: 0.6; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out); }
.fm-loading { padding: var(--sp-10); text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }
/* the page's own heading moves into the popup's head; its buttons (Save, Cancel) stay, pinned to the top */
.fm-page .page-head .breadcrumb, .fm-page .page-head .page-title, .fm-page .page-head .page-sub { display: none; }
.fm-page .page-head { position: sticky; top: calc(var(--sp-8) * -1); z-index: var(--z-sticky); margin: calc(var(--sp-8) * -1) calc(var(--sp-8) * -1) var(--sp-7);
  padding: var(--sp-5) var(--sp-8); background: var(--surface-raised); border-bottom: 1px solid var(--border); min-height: 0; }
.fm-page .page-head:not(:has(.page-actions)) { display: none; }
.fm-page .page-head .page-actions { margin-left: auto; }
.fm-page .card:last-child { margin-bottom: 0; }
/* the form's buttons stay in reach while it scrolls */
.fm-page form > .card__foot:last-child,
.fm-page form > .card:last-child > .card__foot:last-child { position: sticky; bottom: calc(var(--sp-8) * -1); z-index: var(--z-sticky); }
.fm-discard { flex: none; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-6) var(--sp-8); border-top: 1px solid var(--border);
  background: var(--warning-soft); color: var(--warning-text); font-size: var(--fs-sm); border-radius: 0 0 var(--r-xl) var(--r-xl); }
.fm-discard[hidden] { display: none; }
.fm-discard p { margin: 0; }
@media (max-width: 720px) {
  .modal--form, .modal--form[data-size] { width: 100vw; height: 100vh; max-height: 100vh; max-width: 100vw; border-radius: 0; margin: 0; }
}

/* "+ New" at the start of the top bar (plan step 1) */
.qc { position: relative; margin-left: var(--sp-4); }
.qc__btn { gap: var(--sp-3); }
.qc__kbd { font-family: var(--font-mono); font-size: var(--fs-micro); padding: 0 var(--sp-2); border-radius: var(--r-sm); border: 1px solid currentColor; opacity: 0.7; line-height: 1.4; }
.qc__menu {
  position: absolute; top: calc(100% + var(--sp-3)); left: 0; z-index: var(--z-dropdown);
  display: grid; grid-template-columns: repeat(4, minmax(190px, 1fr)); gap: var(--sp-2) var(--sp-6);
  padding: var(--sp-6); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.qc__menu[hidden] { display: none; }
.qc__label { font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); padding: var(--sp-2) var(--sp-4); }
.qc__item {
  display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); min-height: 36px; border-radius: var(--r-md);
  color: var(--text); text-decoration: none; font-size: var(--fs-sm); transition: background var(--dur-fast) var(--ease-out);
}
.qc__item svg { width: 15px; height: 15px; color: var(--text-muted); flex: none; }
.qc__item span { flex: 1; }
.qc__item .qc__kbd { color: var(--text-faint); }
.qc__item:hover, .qc__item:focus-visible { background: var(--surface-hover); outline: none; }
.qc__item:focus-visible { box-shadow: var(--shadow-focus); }
@media (max-width: 900px) { .qc__menu { grid-template-columns: repeat(2, minmax(160px, 1fr)); } .qc__btn .qc__kbd { display: none; } }

/* An add / edit form that lives on its list page, opened by its button (Settings lists, categories). */
.modal--inpage { position: relative; }
.modal--inpage > form > .card { border: 0; box-shadow: none; margin: 0; background: transparent; }
.modal--inpage .card__head { padding-right: calc(var(--sp-8) + var(--sp-10)); }
.modal--inpage .card__foot { border-radius: 0 0 var(--r-xl) var(--r-xl); }
.modal__x { position: absolute; top: var(--sp-5); right: var(--sp-5); z-index: 1; }

/* ==========================================================================
   Preview pack 2 (ADR-062 …): small stat boxes, the person header, money-coloured rows, legend,
   segmented choice, drop zone, steps, tick-and-pay bar.
   ========================================================================== */
.table tbody tr.row--exp  td { background: var(--row-exp-bg); }
.table tbody tr.row--card td { background: var(--row-card-bg); }
.table tbody tr.row--move td { background: var(--row-move-bg); }
/* (critique P1-6) no coloured stripe down a row's side — the tint and the legend carry the meaning */
.table tbody tr.row--in   { --row-edge: var(--success-solid); }
.table tbody tr.row--out  { --row-edge: var(--danger-solid); }
.table tbody tr.row--exp  { --row-edge: var(--warning-solid); }
.table tbody tr.row--card { --row-edge: var(--info-solid); }
.table tbody tr.row--move { --row-edge: var(--border-strong); }
.t-exp  { color: var(--money-exp); }
.t-card { color: var(--money-card); }

/* A month heading inside a statement-style list */
.table tbody tr.month-row td {
  background: var(--surface-sunken);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  padding-top: var(--sp-4); padding-bottom: var(--sp-4);
}
.table tbody tr.month-row td .month-row__sums { text-transform: none; letter-spacing: 0; font-weight: var(--fw-medium); }

/* Legend for the colours */
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8); font-size: var(--fs-xs); color: var(--text-secondary); }
.legend__item { display: inline-flex; align-items: center; gap: var(--sp-3); }
.legend__sw { display: inline-block; flex: none; width: var(--sp-6); height: var(--sp-6); border-radius: var(--r-xs); border: 1px solid var(--row-edge); background: var(--sw-bg); }
.legend__sw--in   { --row-edge: var(--success-solid); --sw-bg: var(--row-in-bg); }
.legend__sw--out  { --row-edge: var(--danger-solid);  --sw-bg: var(--row-out-bg); }
.legend__sw--exp  { --row-edge: var(--warning-solid); --sw-bg: var(--row-exp-bg); }
.legend__sw--card { --row-edge: var(--info-solid);    --sw-bg: var(--row-card-bg); }
.legend__sw--move { --row-edge: var(--border-strong); --sw-bg: var(--row-move-bg); }
.legend__sw--doc  { --row-edge: var(--border);        --sw-bg: var(--surface); }

/* Small stat boxes in one line (the employee strip, the transactions header) */
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-5); }
.stat {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  min-width: 0;
  color: inherit; text-decoration: none;
}
a.stat:hover { border-color: var(--brand); }
.stat--in   { --stat-accent: var(--success-solid); }
.stat--out  { --stat-accent: var(--danger-solid); }
.stat--exp  { --stat-accent: var(--warning-solid); }
.stat--card { --stat-accent: var(--info-solid); }
.stat--brand{ --stat-accent: var(--brand); }
.stat__k { font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); }
.stat__v { font-size: var(--fs-md); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat__m { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The person header: photo · who · what needs doing */
.person { display: grid; grid-template-columns: auto 1fr minmax(260px, 340px); gap: var(--sp-8); align-items: start; }
.person__photo { width: 112px; height: 112px; border-radius: var(--r-lg); background: var(--brand-soft); color: var(--brand-soft-text);
  display: grid; place-items: center; font-size: var(--fs-2xl); font-weight: var(--fw-semibold); }
.person__name { font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); }
.person__role { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: var(--sp-1); }
.person__todo { background: var(--surface-sunken); border-radius: var(--r-lg); padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
.person__todo-k { font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); }
.todo { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-sm); }
.todo .ico { color: var(--warning); flex: none; }
@media (max-width: 1100px) { .person { grid-template-columns: auto 1fr; } .person__todo { grid-column: 1 / -1; } }

/* Party with its particulars under it, one line each */
/* the particulars cell gives way first when a table is tight: its second line is cut to one line with an ellipsis, but
   (unlike nowrap) it never forces the table wider than its card — critique P0 */
.party-cell { max-width: 340px; min-width: 10rem; }
.party-cell__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; font-size: var(--fs-xs); color: var(--text-muted); overflow: hidden; overflow-wrap: anywhere; }

/* Segmented choice (radio buttons that look like one control) — "Paid by", "Received in" */
.seg { align-self: flex-start; display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border-input); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; gap: var(--sp-3); height: var(--control-h); padding: 0 var(--sp-6); font-size: var(--fs-sm); color: var(--text-secondary); border-right: 1px solid var(--border); }
.seg label:last-child span { border-right: 0; }
.seg span svg { width: 14px; height: 14px; }
.seg input:checked + span { background: var(--brand-soft); color: var(--brand-soft-text); font-weight: var(--fw-semibold); }
.seg input:focus-visible + span { box-shadow: inset var(--shadow-focus); }

/* Drop a file here */
.dropzone {
  display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-7);
  border: 1px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface-sunken); color: var(--text-secondary); font-size: var(--fs-sm);
}
.dropzone svg { width: 20px; height: 20px; color: var(--text-muted); flex: none; }
.dropzone__file { display: flex; align-items: center; gap: var(--sp-4); color: var(--text); font-weight: var(--fw-medium); }

/* Steps of a short process (reconciliation) */
.steps { display: flex; gap: var(--sp-6); margin-bottom: var(--sp-8); flex-wrap: wrap; counter-reset: step; }
.steps__item { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-sm); color: var(--text-muted); }
.steps__item::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border-strong); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.steps__item.is-done { color: var(--text-secondary); }
.steps__item.is-done::before { background: var(--success-soft); color: var(--success-text); border-color: transparent; }
.steps__item.is-now { color: var(--text); font-weight: var(--fw-semibold); }
.steps__item.is-now::before { background: var(--brand); color: var(--brand-on); border-color: transparent; }

/* The bar under a tickable list: how many chosen, the total */
.pickbar { display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-6) var(--sp-8); border-top: 1px solid var(--border); background: var(--surface-sunken); font-size: var(--fs-sm); }
.pickbar__total { font-size: var(--fs-lg); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.table tbody tr.is-picked td { background: var(--brand-soft); }
.calc { font-variant-numeric: tabular-nums; }
.person__photo { overflow: hidden; }
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__name { margin: 0; }
.span-2 { grid-column: span 2; }

/* A select sized to its options (a currency next to its amount, ADR-068) */
.select--narrow { flex: 0 0 auto; width: auto; }

/* "What each step posts" — a short list of entries (previews 10, 11; ADR-069) */
.post-list { font-size: var(--fs-sm); display: grid; gap: var(--sp-4); }
.post-list__k { font-weight: var(--fw-semibold); }
.post-list code { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-secondary); }

/* Account chips (ADR-074): the accounts of one kind, each with its balance — they wrap, never hide */
.acct-chips { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-8); }
.acct-chip {
  display: flex; flex-direction: column; gap: var(--sp-1);
  min-width: 200px; padding: var(--sp-5) var(--sp-6);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  color: inherit; text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.acct-chip:hover { border-color: var(--brand); }
.acct-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.acct-chip.is-active { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.acct-chip__k { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.acct-chip__v { font-size: var(--fs-md); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.acct-chip__m { font-size: var(--fs-xs); color: var(--text-muted); }

/* ==========================================================================
   Type-to-search over a select (ADR-079) — the select stays in the form, hidden; the box searches its options
   ========================================================================== */
.combo { position: relative; display: block; min-width: 0; }
.combo__input { width: 100%; }
.combo__native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.combo__list {
  position: absolute; z-index: var(--z-dropdown); inset-inline: 0; top: calc(100% + var(--sp-1)); min-width: var(--combo-list-min-w);
  max-height: var(--combo-list-max-h); overflow-y: auto; margin: 0; padding: var(--sp-2); list-style: none;
  background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
}
.combo__opt { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-6); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-sm); }
.combo__opt[aria-selected="true"], .combo__opt:hover { background: var(--brand-soft); color: var(--brand-soft-text); }
.combo__opt mark { background: none; color: inherit; font-weight: var(--fw-bold); }
.combo__key { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.combo__group { padding: var(--sp-3) var(--sp-4) var(--sp-1); font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); }
.combo__new { border-top: 1px solid var(--divider); margin-top: var(--sp-2); padding-top: var(--sp-3); color: var(--text-link); font-weight: var(--fw-semibold); }
.combo__empty { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); color: var(--text-muted); }
/* an open list inside a scrolling table (invoice and bill lines) is never cut off by it */
.table-wrap:has(.combo__list:not([hidden])), .table-wrap:has(details.xmenu[open]) { overflow: visible; }


/* A service as it reads on an invoice line (Part 2a): print name, then the description line by line, then the tenure. */
.svc-line { display: flex; flex-direction: column; gap: var(--sp-1); line-height: var(--lh-snug); }
.svc-line__name { font-weight: var(--fw-bold); }
.svc-line__sub { font-size: var(--fs-sm); color: var(--text-secondary); white-space: pre-line; }
.svc-line__tenure { font-size: var(--fs-sm); color: var(--text-secondary); }

/* ==========================================================================
   THE PAGE STANDARD (plan 2026-10-03-page-standard, previews 28–31)
   Every form is a page. Its head is one bar that stays under the top bar:
   crumb, title, one line on the left — the actions on the right, no Cancel.
   ========================================================================== */
form > .page-head, .page-head--bar {
  position: sticky; top: var(--topbar-h); z-index: var(--z-sticky);
  align-items: center; flex-wrap: nowrap;
  margin: calc(var(--sp-9) * -1) calc(var(--sp-9) * -1) var(--sp-8);
  padding: var(--sp-6) var(--sp-9);
  background: var(--canvas); border-bottom: 1px solid var(--border);
}
form > .page-head .breadcrumb, .page-head--bar .breadcrumb { margin-bottom: var(--sp-2); }
form > .page-head .page-title h1, .page-head--bar .page-title h1 { font-size: var(--fs-lg); }
form > .page-head .page-sub, .page-head--bar .page-sub { margin-top: var(--sp-1); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
form > .page-head .page-actions, .page-head--bar .page-actions { flex-wrap: nowrap; flex-shrink: 0; }
.modal--ask { width: min(var(--modal-ask-w), calc(100vw - var(--sp-12))); }
.topbar__trial { gap: var(--sp-2); text-decoration: none; }
.topbar__trial svg { width: 12px; height: 12px; }

/* One sheet, sections divided by a rule (not a box per group); the purpose on the left, four columns of fields */
.fp-sheet { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); }
.fp-sec { display: grid; grid-template-columns: minmax(0, var(--fp-sec-head-w)) minmax(0, 1fr); gap: var(--sp-9); padding: var(--sp-8) var(--sp-9); }
.fp-sec + .fp-sec, .fp-pane > .fp-sec:first-child { border-top: 1px solid var(--divider); }
.fp-sheet > .fp-sec:first-child, .fp-tabs + .fp-pane > .fp-sec:first-child { border-top: 0; }
.fp-sec--full { grid-template-columns: minmax(0, 1fr); }
.fp-sec--tight { padding-top: 0; }
.fp-sec__head h2 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.fp-sec__head p { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-2); line-height: var(--lh-snug); }
.fp-sec__head .chip { margin-top: var(--sp-4); }
.fp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-7); align-items: start; }
.fp-grid .span-2 { grid-column: span 2; }
.fp-grid .span-3 { grid-column: span 3; }
.fp-grid .span-4 { grid-column: 1 / -1; }
.fp-end { align-self: end; }
.fp-sheet .field { gap: var(--sp-2); }
.fp-sheet .field__label { font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-normal); text-transform: none; color: var(--text-secondary); }

/* Tabs under the head for a long record (employee): one form, one Save; a dot marks a tab with something to fix */
.fp-tabs { display: flex; gap: var(--sp-2); border-bottom: 1px solid var(--border); padding: 0 var(--sp-9); }
.fp-tabs button { position: relative; height: calc(var(--control-h) + var(--sp-4)); padding: 0 var(--sp-6); display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-muted); background: none; border: 0; cursor: pointer; }
.fp-tabs button:hover { color: var(--text); }
.fp-tabs button[aria-selected="true"] { color: var(--text); }
.fp-tabs button[aria-selected="true"]::after { content: ""; position: absolute; inset: auto var(--sp-4) -1px; height: var(--sp-1); border-radius: var(--r-full); background: var(--brand); }
.fp-tabs button:focus-visible { outline: none; box-shadow: inset var(--shadow-focus); border-radius: var(--r-sm); }
.fp-tabs__err { width: var(--sp-3); height: var(--sp-3); border-radius: var(--r-full); background: var(--danger); }
.fp-pane[hidden] { display: none; }

/* Stock under a line's quantity; amber when a sale asks for more than there is */
.fp-stock { display: block; margin-top: var(--sp-2); font-size: var(--fs-micro); color: var(--text-muted); text-align: right; white-space: nowrap; }
.fp-stock--short { color: var(--warning-text); font-weight: var(--fw-semibold); }
.input.is-short { border-color: var(--warning); box-shadow: 0 0 0 1px var(--warning); }

/* The foot of a document: notes on the left, totals on the right */
.fp-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--fp-totals-w)); gap: var(--sp-10); align-items: start; }

/* A record's page: title row with its chips, then one strip of figures (instead of a row of tall cards) */
.fp-chips { display: inline-flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.fp-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--fp-fig-min-w), 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); }
/* hairlines drawn as each figure's right and bottom shadow; the strip clips the outer ones, so a strip that wraps onto
   a second row stays a clean grid with no stray edges */
.fp-figs { overflow: hidden; }
.fp-fig { padding: var(--sp-6) var(--sp-7); min-width: 0; box-shadow: 1px 0 0 var(--divider), 0 1px 0 var(--divider); }
.fp-figs:has(> :nth-child(7)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* seven or eight figures: two even rows */
.fp-fig__k { font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); }
.fp-fig__v { font-size: var(--fs-lg); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; margin-top: var(--sp-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-fig__m { font-size: var(--fs-micro); color: var(--text-muted); margin-top: var(--sp-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-fig--in .fp-fig__v { color: var(--money-in); }
.fp-fig--out .fp-fig__v { color: var(--money-out); }

@media (max-width: 1100px) {
  .fp-sec { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .fp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-grid .span-3 { grid-column: 1 / -1; }
  .fp-foot { grid-template-columns: minmax(0, 1fr); }
  form > .page-head, .page-head--bar { flex-wrap: wrap; }
}

/* A document line on one row: the description sits quietly under the item; client and tags fold under a link */
.fp-desc { border-color: transparent; background: transparent; color: var(--text-secondary); }
.fp-desc:hover, .fp-desc:focus { border-color: var(--border-input); background: var(--surface); color: var(--text); }
.fp-desc.is-invalid { border-color: var(--danger); }
.fp-more { align-self: flex-start; font-size: var(--fs-micro); color: var(--text-link); background: none; border: 0; padding: 0 var(--sp-2); cursor: pointer; }
.fp-more:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-xs); }
.fp-extra { display: grid; gap: var(--sp-3); }
.fp-extra[hidden] { display: none; }

/* Upload bill in the header: a button that is a label for a file field; the chosen file shows beside it */
.fp-upload { position: relative; }
.fp-upload:focus-within { box-shadow: var(--shadow-focus); }
.fp-file { display: inline-flex; align-items: center; gap: var(--sp-3); max-width: var(--fp-file-max-w); height: var(--control-h-sm); padding: 0 var(--sp-5);
  border: 1px dashed var(--border-strong); border-radius: var(--r-md); font-size: var(--fs-xs); color: var(--text-secondary); }
.fp-file > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-file svg { width: 14px; height: 14px; flex: none; }
.fp-file[hidden] { display: none; }

/* ==========================================================================
   BRAND PLACES (3 Oct): the company at the head of the sidebar, Offiio in
   the footer; each shows its icon when the sidebar is collapsed.
   ========================================================================== */
.sidebar__co-logo { display: block; max-width: 100%; max-height: var(--brand-logo-h); width: auto; height: auto; object-fit: contain; }
.sidebar__co-logo.is-on-chip { padding: var(--sp-2) var(--sp-4); background: var(--paper); border-radius: var(--r-md); }
.sidebar__co-name { color: var(--nav-text-active); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__co-icon { display: none; width: var(--brand-icon-s); height: var(--brand-icon-s); object-fit: contain; flex-shrink: 0; }
.app[data-nav="collapsed"] .sidebar__co-logo, .app[data-nav="collapsed"] .sidebar__co-name { display: none; }
.app[data-nav="collapsed"] .sidebar__co-icon { display: grid; }


/* ==========================================================================
   THE LABEL STANDARD (3 Oct, design pass): sentence case everywhere a label
   names a value — field labels, figure labels, chips and badges, meta, roles.
   Small capitals stay only where they are structure: table column heads,
   the sidebar's sections, menu groups, month rows.
   ========================================================================== */
.field__label, .section-label, .meta dt, .party-block__role, .doc-head__kind,
.kpi__label, .stat__k, .fp-fig__k, .pnl__k, .person__todo-k, .tagline__k, .combo__group, .tagsuggest__hint, .je__balanced {
  text-transform: none; letter-spacing: var(--ls-normal);
}
.field__label { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-secondary); }
.section-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); }
.meta dt, .party-block__role, .doc-head__kind { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-muted); }
.kpi__label, .stat__k, .fp-fig__k, .pnl__k, .person__todo-k { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-secondary); }
.badge, .chip { text-transform: none; letter-spacing: var(--ls-normal); font-size: var(--fs-xs); }
.badge { font-weight: var(--fw-semibold); }
.chip { font-weight: var(--fw-medium); }
.tagline__k { font-size: var(--fs-xs); font-weight: var(--fw-medium); }

/* ==========================================================================
   ONE RECORD PAGE (preview 33): the head every customer, vendor, employee,
   item, service and department page uses — name and chips, one line of
   who / what, the main actions; contact lines and addresses; the terms on one
   quiet row under a hairline; notes behind ⓘ.
   ========================================================================== */
.rec { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); }
.rec__top { display: flex; align-items: flex-start; gap: var(--sp-8); padding: var(--sp-8) var(--sp-9) var(--sp-6); }
.rec__media { flex-shrink: 0; }
.rec__id { flex: 1; min-width: 0; }
.rec__title { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.rec__title h1 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.rec__sub { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text-secondary); }
.rec__actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; flex-shrink: 0; }
.rec__body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-9); padding: 0 var(--sp-9) var(--sp-7); }
.rec__lines { display: grid; gap: var(--sp-4); align-content: start; font-size: var(--fs-sm); }
.rec__line { display: flex; align-items: center; gap: var(--sp-3) var(--sp-4); flex-wrap: wrap; color: var(--text-secondary); }
.rec__line > svg { width: 15px; height: 15px; color: var(--text-muted); flex: none; }
.rec__line b { color: var(--text); font-weight: var(--fw-semibold); }
.rec__dot { color: var(--text-faint); }
.rec__aside { display: grid; gap: var(--sp-6); align-content: start; }
.rec__aside h3 { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-muted); }
.rec__aside p { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text); display: flex; gap: var(--sp-3); align-items: flex-start; }
.rec__facts { display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--sp-4); margin: 0; padding: var(--sp-6) var(--sp-9); border-top: 1px solid var(--border); }
.rec__fact { display: flex; align-items: baseline; gap: var(--sp-3); padding: 0 var(--sp-7); font-size: var(--fs-sm); }
.rec__fact:first-child { padding-left: 0; }
.rec__fact + .rec__fact { border-left: 1px solid var(--border); }
.rec__fact dt { color: var(--text-muted); }
.rec__fact dd { margin: 0; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }

/* Notes behind an ⓘ — read on hover or focus, so they cost no space */
.info-pop { position: relative; display: inline-flex; }
.info-pop > button { display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--control-h-sm); padding: 0 var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-full);
  background: var(--surface); color: var(--text-secondary); font-size: var(--fs-xs); font-weight: var(--fw-medium); cursor: pointer; }
.info-pop > button:hover { border-color: var(--border-strong); color: var(--text); }
.info-pop > button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.info-pop > button svg { width: 13px; height: 13px; }
.info-pop__card { position: absolute; z-index: var(--z-dropdown); top: calc(100% + var(--sp-3)); left: 0; width: max-content; max-width: var(--info-pop-w);
  padding: var(--sp-5) var(--sp-6); background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm); font-weight: var(--fw-regular); line-height: var(--lh-snug); color: var(--text); white-space: pre-line; visibility: hidden; opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out), visibility var(--dur-fast); }
.info-pop:hover .info-pop__card, .info-pop:focus-within .info-pop__card { visibility: visible; opacity: 1; }
.info-pop--end .info-pop__card { left: auto; right: 0; }

@media (max-width: 1100px) {
  .rec__body { grid-template-columns: minmax(0, 1fr); }
  .rec__top { flex-wrap: wrap; padding: var(--sp-7) var(--sp-7) var(--sp-5); }
  .rec__id { flex: 1 1 18rem; }
  .rec__body, .rec__facts { padding-inline: var(--sp-7); }
  .rec__fact { padding: 0 var(--sp-6); }
}
.person__photo--sm { width: var(--rec-photo-s); height: var(--rec-photo-s); font-size: var(--fs-lg); }


/* Documents (preview 34): the standard ones first, then any named by hand, then Add document */
.docs { display: grid; border: 1px solid var(--border); border-radius: var(--r-md); }
.docs__row { display: grid; grid-template-columns: minmax(0, var(--docs-name-w)) minmax(0, 1fr) auto; align-items: center; gap: var(--sp-7); padding: var(--sp-5) var(--sp-6); }
.docs__row + .docs__row { border-top: 1px solid var(--divider); }
.docs__name { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.docs__file { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; font-size: var(--fs-xs); color: var(--text-secondary); }
.docs__file svg { width: 14px; height: 14px; flex: none; color: var(--success); }
.docs__file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs__file--none { color: var(--text-faint); }
.docs__acts { display: flex; gap: var(--sp-3); justify-content: flex-end; }
.docs__row--new { background: var(--surface-sunken); border-radius: 0 0 var(--r-md) var(--r-md); }
@media (max-width: 1100px) { .docs__row { grid-template-columns: minmax(0, 1fr); } .docs__acts { justify-content: flex-start; } }

/* A file field drawn in the design, not the browser's grey button (critique P1-8) */
input[type="file"].input { padding: 0 var(--sp-3) 0 0; display: flex; align-items: center; color: var(--text-secondary); font-size: var(--fs-sm); }
input[type="file"]::file-selector-button { height: 100%; margin-right: var(--sp-5); padding: 0 var(--sp-6); border: 0; border-right: 1px solid var(--border-input);
  background: var(--surface-sunken); color: var(--text); font: inherit; font-weight: var(--fw-medium); cursor: pointer; }
input[type="file"]::file-selector-button:hover { background: var(--surface-hover); }
/* a balance of nothing is not a warning (critique P0-1) */
.totals tr.totals__due.is-clear td, .totals tr.totals__due.is-clear td:first-child { color: var(--text-muted); }


/* (critique P1-4) one figure strip for record and statement pages: the money pages' boxes join the record pages' strip —
   one card, hairline dividers, no dots; list pages and the dashboard keep their icon cards */
.stat-strip { gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); overflow: hidden; }
.stat-strip .stat { border: 0; border-radius: 0; border-left: 1px solid var(--divider); padding: var(--sp-6) var(--sp-7); }
.stat-strip .stat:first-child { border-left: 0; }
.stat-strip a.stat:hover { border-color: var(--divider); background: var(--surface-hover); }
.stat-strip a.stat.is-active, .stat-strip a.stat[aria-current] { background: var(--brand-soft); }
.stat__k::before, .pnl__k::before { content: none; }
.stat__v { font-size: var(--fs-lg); }

/* A small menu from a button (Export): the native details element, drawn as a dropdown */
.xmenu { position: relative; display: inline-block; }
.xmenu > summary { list-style: none; }
.xmenu > summary::-webkit-details-marker { display: none; }
.xmenu > summary svg:last-child { width: 12px; height: 12px; opacity: .7; }
.xmenu__list { position: absolute; z-index: var(--z-dropdown); top: calc(100% + var(--sp-2)); right: 0; min-width: 12rem; padding: var(--sp-2);
  background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-lg); display: grid; }
.xmenu__list a { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--text); text-decoration: none; white-space: nowrap; }
.xmenu__list a svg { width: 14px; height: 14px; }
.xmenu__list a:hover, .xmenu__list a:focus-visible { background: var(--surface-hover); outline: none; }
.xmenu__list form { display: contents; }
.xmenu__list button { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-4) var(--sp-5); border: 0; border-radius: var(--r-sm); background: none;
  font: inherit; font-size: var(--fs-sm); color: var(--text); text-align: left; cursor: pointer; }
.xmenu__list button:hover, .xmenu__list button:focus-visible { background: var(--surface-hover); outline: none; }
.xmenu__list button svg { width: 14px; height: 14px; }
.xmenu__list .xmenu__danger { color: var(--danger-text); }

/* (critique P1-7) one line grid for sales and purchases: the GST rate never clipped, the unit as tall as the quantity,
   the amount on the line's centre */
.table--lines .col-gst .select { min-width: var(--line-gst-min-w); }
.table--lines .col-qty .input--sm { height: var(--control-h); }
.table--lines td.num b[data-inv-line-total] { display: block; line-height: var(--control-h); }

/* The dashboard's "needs action" strip (critique P1-9): this week's dues first, as chips */
.needs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-5); padding: var(--sp-6) var(--sp-7);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); }
.needs__k { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-right: var(--sp-4); }
.needs__k svg, .needs__ok svg { width: 15px; height: 15px; color: var(--warning-text); }
.needs__ok { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-secondary); }
.needs__ok svg { color: var(--success-text); }
.needs__item { display: inline-flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3) var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--warning-soft); text-decoration: none; color: var(--text); }
.needs__item b { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.needs__item span { font-size: var(--fs-xs); color: var(--warning-text); }
.needs__item.is-late { background: var(--danger-soft); }
.needs__item.is-late span { color: var(--danger-text); }
.needs__item:hover { border-color: var(--border-strong); }

/* Settings → Company: each logo on the background it is made for (paper or the sidebar's ink); choosing a file saves it */
.brand-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7); }
.brand-tile { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.brand-tile__stage { display: grid; place-items: center; height: calc(var(--sp-12) * 2); padding: var(--sp-7); background: var(--paper); border-bottom: 1px solid var(--border); }
.brand-tile__stage--dark { background: var(--brand-ink); }
.brand-tile__stage img { max-width: 70%; max-height: 100%; object-fit: contain; }
.brand-tile__stage--icon img { width: var(--sp-12); height: var(--sp-12); }
.brand-tile__none { font-size: var(--fs-xs); color: var(--paper-muted); }
.brand-tile__stage--dark .brand-tile__none { color: var(--nav-text-muted); }
.brand-tile__foot { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6); }
.brand-tile__what { flex: 1; min-width: 0; display: grid; gap: var(--sp-1); font-size: var(--fs-sm); }
.brand-tile__what span { font-size: var(--fs-xs); color: var(--text-muted); }
.brand-tile__acts { display: flex; gap: var(--sp-3); flex-shrink: 0; }

/* Reports hub: the four most opened reports first, as tiles; the groups below sit at their own height */
.grid--top { align-items: start; }
.rep-featured { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); margin-bottom: var(--sp-8); }
.rep-tile { display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-7); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs); color: var(--text); text-decoration: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.rep-tile:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); text-decoration: none; }
.rep-tile:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.rep-tile__icon { display: grid; place-items: center; width: var(--sp-11); height: var(--sp-11); margin-bottom: var(--sp-3); border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand-soft-text); }
.rep-tile__icon svg { width: 18px; height: 18px; }
.rep-tile b { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.rep-tile > span:last-child { font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-snug); }
/* A statement (P&L) reads down one column of figures: kept to a readable width instead of spread across the screen */
.statement { max-width: var(--statement-w); }

/* Table cells (critique P0): 12px between columns in the compact density, so a table fits its card from 1100px up;
   the first and last cell keep the card's 16px edge */
.table thead th, .table tbody td, .table tfoot td { padding-left: var(--cell-px); padding-right: var(--cell-px); }
.table :is(thead th, tbody td, tfoot td):first-child { padding-left: var(--sp-7); }
.table :is(thead th, tbody td, tfoot td):last-child { padding-right: var(--sp-7); }

/* An error page (critique H9): what happened in words, then the ways back */
.errpage { max-width: 36rem; margin-inline: auto; display: grid; justify-items: center; gap: var(--sp-5); }
.errpage__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text); }
.errpage__search { display: flex; gap: var(--sp-4); width: 100%; max-width: 26rem; }
.errpage__search .input { flex: 1; }
.errpage__acts { display: flex; gap: var(--sp-4); justify-content: center; }

/* Help: the keyboard as a two-column list */
.help-keys { display: grid; gap: var(--sp-4); margin: 0; }
.help-keys > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--sp-6); align-items: baseline; }
.help-keys dd { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); }
.help-keys kbd { font-family: var(--font-mono); font-size: var(--fs-xs); padding: var(--sp-1) var(--sp-4); border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface-sunken); white-space: nowrap; }

/* Documents: the block that adds a document of any name — a heading, its two fields and the button (4 Oct) */
.docs__new { display: grid; gap: var(--sp-5); padding: var(--sp-6); border-top: 1px solid var(--divider); background: var(--surface-sunken); border-radius: 0 0 var(--r-md) var(--r-md); }
.docs__new-head { display: grid; gap: var(--sp-1); font-size: var(--fs-sm); }
.docs__new-head span { font-size: var(--fs-xs); color: var(--text-muted); }
.docs__new-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--sp-6); align-items: end; }
.docs__pick { display: flex; align-items: center; gap: var(--sp-4); min-height: var(--control-h); min-width: 0; }
.docs__picked { font-size: var(--fs-sm); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.docs__picked.is-set { color: var(--text); font-weight: var(--fw-medium); }

/* An employee's page head (preview 37, Ashish 4 Oct): the photo fills the left side top to bottom; beside it who they
   are — name, designation, code, email, phone — then the actions and what needs doing; the tax row at the foot */
.ehead { display: grid; grid-template-columns: var(--ehead-photo-w) minmax(0, 1fr); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-xs); overflow: hidden; }
.ehead__photo { position: relative; grid-row: 1 / span 2; min-height: calc(var(--ehead-photo-w) * 1.25); background: var(--surface-sunken); border-right: 1px solid var(--border); }
.ehead__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ehead__initials { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-2xl); font-weight: var(--fw-semibold); color: var(--brand-soft-text); background: var(--brand-soft); }
.ehead__change { position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); display: flex; justify-content: center; }
.ehead__change .btn { width: 100%; justify-content: center; }
.ehead__top { display: flex; gap: var(--sp-8); padding: var(--sp-8) var(--sp-9) var(--sp-6); min-width: 0; }
.ehead__id { flex: 1; min-width: 0; display: grid; gap: var(--sp-3); align-content: start; }
.ehead__name { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.ehead__name h1 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.ehead__role { font-size: var(--fs-md); color: var(--text-secondary); }
.ehead__code { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-secondary); }
.ehead__code b { font-family: var(--font-mono); font-weight: var(--fw-semibold); color: var(--text); padding: var(--sp-2) var(--sp-5); border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface-sunken); }
.ehead__contact, .ehead__meta { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-8); font-size: var(--fs-sm); }
.ehead__contact { margin-top: var(--sp-2); }
.ehead__meta { color: var(--text-secondary); margin-top: var(--sp-2); }
.ehead__contact > span, .ehead__meta > span { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--text-secondary); }
.ehead__contact svg, .ehead__meta svg { width: 15px; height: 15px; color: var(--text-muted); flex: none; }
.ehead__side { width: var(--ehead-side-w); flex-shrink: 0; display: grid; gap: var(--sp-5); align-content: start; }
.ehead__acts { display: flex; gap: var(--sp-4); justify-content: flex-end; flex-wrap: wrap; }
.ehead__needs { display: grid; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-sunken); font-size: var(--fs-sm); }
.ehead__needs b { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-muted); }
.ehead__needs > span { display: flex; align-items: flex-start; gap: var(--sp-3); }
.ehead__needs svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--text-muted); }
.ehead__facts { grid-column: 2; }
/* The photo on the employee form: a portrait frame, the button and its size beside it */
.photo-pick { display: flex; gap: var(--sp-6); align-items: center; }
.photo-pick__img { position: relative; overflow: hidden; width: var(--photo-pick-w); height: calc(var(--photo-pick-w) * 1.25); flex: none; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand-soft-text); font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.photo-pick__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.photo-pick__txt { display: grid; gap: var(--sp-2); justify-items: start; font-size: var(--fs-xs); color: var(--text-muted); }

/* Settings → Tags (preview 37): the add row on top, where each tag is used as quiet chips */
.tm-add { display: flex; gap: var(--sp-6); align-items: flex-end; flex-wrap: wrap; padding: var(--sp-6) var(--sp-7); border-bottom: 1px solid var(--border); }
.tm-add__name { flex: 1; min-width: 14rem; }
.where { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.where span { font-size: var(--fs-xs); padding: var(--sp-2) var(--sp-5); border-radius: var(--r-full); background: var(--surface-sunken); color: var(--text-secondary); white-space: nowrap; }

/* Serial numbers on a line (spec 2026-10-04, preview 36): the count under the quantity, and its dialog */
.serial-btn { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); padding: 0; border: 0; background: none;
  font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-link); cursor: pointer; white-space: nowrap; }
.serial-btn svg { width: 13px; height: 13px; }
.serial-btn.is-short, .serial-btn.is-invalid { color: var(--warning-text); }
.serial-btn.is-done { color: var(--success-text); }
.serial-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-xs); }
.modal--serials { width: min(var(--modal-ask-w) * 1.4, calc(100vw - var(--sp-12))); }
.serials-count { font-size: var(--fs-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.serials-count b { font-size: var(--fs-lg); color: var(--text); }
.ser-list { display: grid; gap: var(--sp-1); max-height: 18rem; overflow-y: auto; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); }
.ser-list label { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); cursor: pointer; font-family: var(--font-mono); font-size: var(--fs-sm); }
.ser-list label:hover { background: var(--surface-hover); }
.ser-list input { width: var(--sp-7); height: var(--sp-7); }
.ser-list label.is-on { background: var(--brand-soft); color: var(--brand-soft-text); }

/* A line's description is a textarea (Part 2b): a service's print name, IP and specs print line by line */
textarea.fp-desc { height: auto; min-height: var(--control-h); resize: vertical; field-sizing: content; max-height: calc(var(--control-h) * 4); line-height: var(--lh-snug); padding-block: var(--sp-4); }

/* ==========================================================================
   RESPONSIVE SHELL (critique P1-10) — last in the file so it wins over every
   base rule above it.
   ========================================================================== */
/* Below 1100px the sidebar is a rail of icons; the menu button opens it in full over the page (a drawer).
   Below 768px the rail goes too: the menu button is a hamburger and the drawer slides in from the left. */
@media (max-width: 1100px) {
  .app, .app[data-nav="collapsed"] { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }
  .main { grid-column: 2; }
  .app:not(.is-drawer) :is(.sidebar__name, .nav-item__text, .nav-item__chev, .nav-group__label, .nav-item__badge, .nav-sub, .sidebar__foot-text, .sidebar__co-logo, .sidebar__co-name) { display: none; }
  .app:not(.is-drawer) .nav-item { justify-content: center; padding-inline: 0; }
  .app:not(.is-drawer) .sidebar__brand { justify-content: center; padding-inline: 0; }
  .app:not(.is-drawer) .sidebar__co-icon { display: grid; }
  .app.is-drawer .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w); height: auto; box-shadow: var(--shadow-lg); }
  .app.is-drawer::after { content: ""; position: fixed; inset: 0; z-index: calc(var(--z-sidebar) - 1); background: var(--surface-inverse); opacity: .45; }
  .topbar__search { max-width: 220px; }
  .topbar__user-meta { display: none; }
  .footbar__brand, .app[data-nav="collapsed"] ~ .footbar .footbar__brand { width: var(--sidebar-w-collapsed); }
  .footbar__logo, .footbar__ver { display: none; }
  .footbar__icon { display: block; }
  .footbar__hints > span { display: none; }   /* the #tag hint goes first; the shortcut stays */
  .kpi-grid:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-grid:has(> :nth-child(4)) > :last-child:nth-child(odd) { grid-column: 1 / -1; }   /* five figures: 2 + 2 + one across */
  .rep-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3.grid--top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .fp-figs, .fp-figs:has(> :nth-child(7)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.topbar__nav-narrow { display: none; }
.topbar__nav-wide, .topbar__nav-narrow { line-height: 0; }
@media (max-width: 768px) {
  .app, .app[data-nav="collapsed"] { grid-template-columns: minmax(0, 1fr); }
  .main { grid-column: 1; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w); height: auto; transform: translateX(-100%); transition: transform var(--dur-base) var(--ease-out); }
  .app.is-drawer .sidebar { transform: none; }
  .topbar__nav-wide { display: none; }
  .topbar__nav-narrow { display: inline; }
  .topbar { gap: var(--sp-4); padding: 0 var(--sp-6); }
  .ctx { display: none; }
  .page-head { flex-direction: column; align-items: stretch; }
  /* a wide table scrolls inside its card, its first column (the number or name) staying in view */
  .table-wrap .table th:first-child, .table-wrap .table td:first-child { position: sticky; left: 0; z-index: var(--z-base); background: var(--surface); }
}
@media (max-width: 720px) {
  .page { padding: var(--sp-6) var(--sp-6) calc(var(--footbar-h) + var(--sp-6)); }
  form > .page-head, .page-head--bar { margin: calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) var(--sp-7); padding: var(--sp-5) var(--sp-6); flex-direction: row; align-items: center; }
  form > .page-head .page-sub, .page-head--bar .page-sub { display: none; }
  .topbar__search kbd, .qc__btn .qc__kbd { display: none; }
}
@media (max-width: 560px) {
  /* two figures across on a phone, a size smaller, so the list is not pushed off the screen (critique P2-14) */
  .kpi-grid, .kpi-grid:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  .kpi-grid .kpi { padding: var(--sp-5) var(--sp-6); }
  .kpi-grid .kpi__value { font-size: var(--fs-md); }
  .kpi-grid .kpi__meta { display: none; }
}
@media (max-width: 900px) { .brand-tiles { grid-template-columns: minmax(0, 1fr); } }
/* A document's lines below 1000px (critique P1-9): each line a small card — the item across the top with its remove
   button, then qty, rate, discount, GST and amount side by side, each with its own label (the column heads are hidden) */
@media (max-width: 1000px) {
  .table--lines thead { display: none; }
  .table--lines tbody tr { display: flex; flex-wrap: wrap; align-items: flex-start; padding-block: var(--sp-4); border-bottom: 1px solid var(--divider); }
  .table--lines tbody td { display: block; height: auto; border: 0; padding: var(--sp-3) var(--sp-4); width: auto; min-width: 0; }
  .table--lines tbody td.col-item { order: 0; flex: 1 1 calc(100% - var(--sp-12) - var(--sp-8)); min-width: 0; }
  .table--lines tbody td:last-child { order: 1; flex: 0 0 auto; }
  .table--lines tbody td:not(.col-item):not(:last-child) { order: 2; flex: 1 1 7rem; }
  .table--lines tbody td:not(.col-item):not(:last-child)::before { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-micro); color: var(--text-muted); }
  .table--lines td.col-hsn::before { content: "HSN / SAC"; }
  .table--lines td.col-item + td.num::before { content: "Left to credit"; }
  .table--lines td.col-qty::before { content: "Qty"; }
  .table--lines td.col-qty + td.col-money::before { content: "Rate"; }
  .table--lines td.col-qty + td.col-money + td.col-money:not(.num)::before { content: "Discount"; }
  .table--lines td.col-gst::before { content: "GST"; }
  .table--lines td.num.col-money::before { content: "Amount"; }
  .table--lines tfoot td { display: block; }
}
/* A list's filters on a narrow screen: the search box keeps a usable width, on its own line if need be */
.filters .field--grow { min-width: 12rem; }
/* Settings (critique P1-6): a form's Save stays in view at the foot of the screen while its card is scrolled */
.settings form > .card > .card__foot { position: sticky; bottom: var(--footbar-h); z-index: var(--z-sticky); }
@media (max-width: 560px) { .kpi-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 900px) { .docs__new-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1100px) {
  .ehead__top { flex-direction: column; }
  .ehead__side { width: auto; }
  .ehead__acts { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .ehead { grid-template-columns: minmax(0, 1fr); }
  .ehead__photo { grid-row: auto; height: calc(var(--ehead-photo-w) * 1.25); border-right: 0; border-bottom: 1px solid var(--border); }
  .ehead__facts { grid-column: 1; }
}

/* Purchase bill (Ashish, 4 Oct): a vendor who charges no GST on the bill — overseas (Hetzner, in euro) or unregistered —
   shows no GST choice on its lines. A reverse-charge bill keeps the rate in view: it makes the self-invoice's IGST (review). */
.pb-nogst, .pb-rcm { display: none; }
[data-pb-form][data-rcm-bill="1"] .pb-rcm { display: block; margin-top: var(--sp-2); }
[data-pb-form][data-fixed-kind="lut"]:not([data-rcm-bill="1"]) .col-gst [data-l="gst"] { display: none; }
[data-pb-form][data-fixed-kind="lut"]:not([data-rcm-bill="1"]) .pb-nogst { display: inline; }

/* Guide (after Settings): How it works, and the go-live questions — each with its detail, an answer and a status */
.guide-steps { margin: 0; padding-left: var(--sp-8); display: grid; gap: var(--sp-4); font-size: var(--fs-base); line-height: var(--lh-snug); }
.guide-steps a { margin-left: var(--sp-2); }
.golive { padding-bottom: var(--sp-8); border-bottom: 1px solid var(--border); }
.golive:last-child { padding-bottom: 0; border-bottom: 0; }
.golive__head { display: flex; align-items: baseline; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.golive__title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.golive__body { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-6); font-size: var(--fs-base); }
.golive__body dt { display: inline; font-weight: var(--fw-semibold); }
.golive__body dt::after { content: ': '; }
.golive__body dd { display: inline; margin: 0; color: var(--text-secondary); }
.golive__answer { display: grid; gap: var(--sp-4); max-width: var(--statement-w); }