/* ==========================================================================
   NAVJ Portal - shared visual system
   --------------------------------------------------------------------------
   One stylesheet for every surface. Loaded AFTER Bootstrap so equal-specificity
   rules win; that ordering is the only reason the body font applies at all
   (the old `*` selector had specificity 0 and lost to Bootstrap's own `body`).

   Sections
     1  Fonts
     2  Tokens
     3  Reset + base
     4  App shell (top bar, side rail, main)
     5  Page head + action bar
     6  Filter bar
     7  Summary strip
     8  Tables
     9  Forms
    10  Buttons + links
    11  Chips + status
    12  Cards + panels
    13  Empty states
    14  Drawer + modal
    15  Pagination
    16  Footer
    17  Utilities
    18  Responsive
   ========================================================================== */

/* == 1  Fonts =========================================================== */

/* Source Sans 3 ships as a variable face; one file per subset covers 200-900.
   latin-ext is NOT optional - the rupee sign U+20B9 lives only in that range
   and the portal prints it on every money figure. */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/SourceSans3-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/SourceSans3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Brand mark only. The mark is ASCII, so the latin subset is sufficient. */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/PlayfairDisplay-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* == 2  Tokens ========================================================== */

:root {
  /* Surfaces and ink */
  --canvas:       #FFFFFF;
  --surface:      #FFFFFF;
  --surface-sunk: #F5F6F8;
  --ink:          #101216;
  --ink-muted:    #3F4652;
  --ink-faint:    #626B78;
  --border:       #C9CED7;
  --border-soft:  #E0E3E8;

  /* Brand. Navy carries identity and primary action; gold is a detail only. */
  --navy:       #14213D;
  --navy-hover: #1D315C;
  --navy-soft:  #E8EEF8;
  --gold:       #A47D32;
  --gold-soft:  #F8F1E3;

  /* Semantic. Text values meet WCAG AA on --surface and on their own soft
     background. Never used for ordinary totals or decoration. */
  --success:      #1B6B3A;
  --success-soft: #E8F3EC;
  --warning:      #8A5A00;
  --warning-soft: #FBF1DE;
  --danger:       #B3261E;
  --danger-soft:  #FBEAE8;
  --info:         #1F5C9E;
  --info-soft:    #E9F1FA;

  /* Type */
  --font-ui:    'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-brand: 'Playfair Display', Georgia, serif;

  --fs-xs:   0.75rem;    /* 12px - eyebrows, table meta */
  --fs-sm:   0.8125rem;  /* 13px - table body, dense controls */
  --fs-base: 0.9375rem;  /* 15px - interface default */
  --fs-md:   1rem;       /* 16px - lead figures */
  --fs-lg:   1.125rem;   /* 18px - section titles */
  --fs-xl:   1.375rem;   /* 22px - page title */

  --lh-tight: 1.25;
  --lh-base:  1.5;

  /* Space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;

  /* Shape */
  --r-sm: 4px;
  --r:    6px;
  --r-lg: 10px;

  --shadow-sm: 0 1px 3px rgba(16, 18, 22, 0.08);
  --shadow:    0 5px 16px rgba(16, 18, 22, 0.10);
  --shadow-lg: 0 16px 36px rgba(16, 18, 22, 0.16);

  /* Shell metrics - referenced by layout and by the responsive rules */
  --rail-w:   232px;
  --topbar-h: 52px;

  /* Bootstrap bridge: components that read these variables inherit the system
     instead of being restyled one selector at a time. */
  --bs-body-font-family: var(--font-ui);
  --bs-body-font-size: var(--fs-base);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--canvas);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--r);
  --bs-link-color: var(--navy);
  --bs-link-hover-color: var(--navy-hover);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--ink-muted);

  /* Bootstrap's own "primary" and "info" are #0d6efd and #0dcaf0 - a blue and
     a cyan that exist nowhere in this palette. Anything still reaching for
     .text-primary / .bg-primary-subtle / .btn-outline-primary / .bg-info was
     painting that blue straight onto the page (an audit of every authenticated
     surface found it on the audit log, notices, portal stats, the users list,
     the task board, the bill preview, the client statement and more). These
     are re-pointed once here rather than edited out of twenty templates, so a
     use that has not been found yet still lands on the portal's own colours. */
  --bs-primary: var(--navy);
  --bs-primary-rgb: 20, 33, 61;
  --bs-primary-bg-subtle: var(--navy-soft);
  --bs-primary-border-subtle: var(--border);
  --bs-primary-text-emphasis: var(--navy);
  --bs-info: var(--info);
  --bs-info-rgb: 31, 92, 158;
  --bs-info-bg-subtle: #E8F0F8;
  --bs-info-border-subtle: #C6D9EC;
  --bs-info-text-emphasis: var(--info);
}

/* == 3  Reset + base ==================================================== */

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

body {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--canvas);
  /* The footer is in normal flow now, so no reserved padding is needed. */
  padding-bottom: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Digits line up in every context that shows them in columns. */
body,
.table, .table td, .table th,
.money, code, .badge, .chip,
input, select, textarea,
.summary-value, .stat-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
h4, h5, h6 { font-size: var(--fs-base); }

hr { border-color: var(--border); opacity: 1; }

::selection { background: var(--navy-soft); color: var(--ink); }

/* One focus treatment everywhere, always visible. */
:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
  box-shadow: none;
}

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

/* Skip link - first tab stop on every page. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--navy);
  color: #fff;
  padding: var(--s-2) var(--s-4);
  border-radius: 0 0 var(--r) 0;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

/* == 4  App shell ======================================================= */

.app-topbar {
  height: var(--topbar-h);
  background: var(--navy);
  color: rgba(255, 255, 255, 0.86);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-4);
  position: sticky;
  top: 0;
  z-index: 1035;
  flex: 0 0 auto;
}
.app-brand {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
  line-height: 1;
}
.app-brand:hover { color: #fff; }
.app-brand .brand-suffix {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-left: var(--s-2);
  vertical-align: middle;
}
.app-topbar .topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}
.app-topbar .topbar-user {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Do not shrink: the search box beside it is the flexible element, so a
     long name stays readable rather than collapsing to an initial. */
  flex: 0 0 auto;
  max-width: 14rem;
}
.app-topbar .topbar-link {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: var(--fs-sm);
  padding: var(--s-2);
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.app-topbar .topbar-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
}
.app-topbar .topbar-link:focus-visible { outline-color: #fff; }

.app-body {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

/* Two elements on purpose: the column stretches to the full page height so
   its surface and border reach the footer, while the nav inside it sticks
   below the top bar. One sticky element cannot do both - it would be exactly
   one viewport tall and leave raw canvas under the rail on any long page. */
.app-rail-col {
  width: var(--rail-w);
  flex: 0 0 var(--rail-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.app-rail {
  position: sticky;
  top: var(--topbar-h);
  max-height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  padding: var(--s-3) 0 var(--s-5);
}

.app-main {
  flex: 1 1 auto;
  min-width: 0;         /* lets wide children scroll instead of pushing the page */
  padding: var(--s-4) var(--s-5) var(--s-6);
}

/* Rail navigation. Groups are <details>, so open/close/traverse works from the
   keyboard with no script and survives JS being unavailable. */
.rail-group { margin-bottom: var(--s-1); }
.rail-group > summary { list-style: none; cursor: pointer; }
.rail-group > summary::-webkit-details-marker { display: none; }
.rail-group[open] > summary .rail-caret { transform: rotate(90deg); }
.rail-group[open] > summary { color: var(--ink); }
.rail-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
  font-weight: 600;
  padding: var(--s-3) var(--s-4) var(--s-1);
  margin: 0;
}
.rail-link,
.rail-toggle {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: 0.4rem var(--s-4);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--fs-base);
  font-weight: 500;
  border: 0;
  background: none;
  text-align: left;
  border-left: 3px solid transparent;
  line-height: 1.35;
}
.rail-link:hover,
.rail-toggle:hover {
  background: var(--surface-sunk);
  color: var(--ink);
}
.rail-link .bi,
.rail-toggle .bi {
  color: var(--ink-muted);
  font-size: 0.95rem;
  flex: 0 0 1.05rem;
}
.rail-link.active {
  background: var(--navy-soft);
  border-left-color: var(--navy);
  color: var(--navy);
  font-weight: 600;
}
.rail-link.active .bi { color: var(--gold); }
.rail-toggle .rail-caret {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--ink-faint);
  transition: transform 0.15s ease;
}
.rail-toggle[aria-expanded="true"] .rail-caret { transform: rotate(90deg); }
.rail-children { padding: 0 0 var(--s-1); }
.rail-children .rail-link {
  padding-left: 2.45rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-muted);
}
.rail-children .rail-link.active {
  color: var(--navy);
  font-weight: 600;
}
.rail-count {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--surface-sunk);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 0 0.4rem;
  min-width: 1.4rem;
  text-align: center;
}
.rail-link.active .rail-count {
  background: #fff;
  border-color: var(--border);
  color: var(--navy);
}

/* Rail drawer toggle - hidden until the rail collapses. */
.rail-open-btn { display: none; }
.rail-backdrop { display: none; }

/* Global search in the top bar */
.global-search {
  position: relative;
  flex: 0 1 320px;
  min-width: 140px;
}
.global-search input {
  width: 100%;
  font-size: var(--fs-sm);
  padding: 0.3rem 0.6rem 0.3rem 1.9rem;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}
.global-search input::placeholder { color: rgba(255, 255, 255, 0.55); }
.global-search input:focus {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.global-search input:focus::placeholder { color: var(--ink-faint); }
.global-search > .bi-search {
  position: absolute;
  left: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
}
.global-search input:focus ~ .bi-search { color: var(--ink-faint); }
.global-search .results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  border-radius: var(--r);
  max-height: 380px;
  overflow-y: auto;
  z-index: 1060;
  display: none;
  margin-top: var(--s-1);
}
.global-search .results.show { display: block; }
.global-search .res-group {
  padding: var(--s-1) var(--s-3);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  background: var(--surface-sunk);
  font-weight: 600;
}
.global-search .res-item {
  display: block;
  padding: 0.4rem var(--s-3);
  text-decoration: none;
  color: var(--ink);
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-sm);
}
.global-search .res-item:hover { background: var(--navy-soft); }
.global-search .res-empty {
  padding: var(--s-3);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}

/* == 5  Page head + action bar ========================================== */

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.page-head .page-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.page-head .page-sub {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  margin: 0.15rem 0 0;
}
.page-head .page-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.page-eyebrow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  color: var(--ink-faint);
  margin: 0 0 0.1rem;
}

/* == 6  Filter bar ====================================================== */

.filter-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--s-3);
  margin-bottom: var(--s-4);
}
.filter-bar.is-sticky {
  position: sticky;
  top: var(--topbar-h);
  z-index: 20;
  box-shadow: var(--shadow-sm);
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  align-items: flex-end;
}
.filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 8.5rem;
}
.filter-field.is-wide { flex: 2 1 14rem; }
.filter-field > label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.filter-advanced {
  border-top: 1px dashed var(--border);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
}
.filter-toggle {
  background: none;
  border: 0;
  color: var(--navy);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}
.filter-toggle .bi { transition: transform 0.15s ease; }
.filter-toggle[aria-expanded="true"] .bi { transform: rotate(90deg); }

/* == 7  Summary strip =================================================== */

/* One compact row of figures. Neutral by default - a semantic tone is opt-in
   per item and reserved for genuine exceptions. */
.summary-strip {
  display: flex;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: var(--s-4);
  overflow: hidden;
}
.summary-item {
  flex: 1 1 9rem;
  min-width: 0;
  padding: var(--s-3) var(--s-4);
  border-right: 1px solid var(--border-soft);
  text-decoration: none;
  color: inherit;
  display: block;
}
.summary-item:last-child { border-right: 0; }
a.summary-item:hover { background: var(--surface-sunk); color: inherit; }
.summary-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  font-weight: 600;
  display: block;
  margin-bottom: 0.1rem;
}
.summary-value {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);          /* ordinary totals stay neutral */
  line-height: 1.2;
  overflow-wrap: anywhere;
  display: block;
}
.summary-note {
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  display: block;
  margin-top: 0.1rem;
}
.summary-item.is-alert .summary-value { color: var(--danger); }
.summary-item.is-warn  .summary-value { color: var(--warning); }

/* == 8  Tables ========================================================== */

/* Wide data scrolls inside its own labelled region; the page never does. */
.table-scroll {
  overflow-x: auto;
  overflow-y: visible;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  -webkit-overflow-scrolling: touch;
}
.table-scroll:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.table-scroll > .table { margin-bottom: 0; }

.table {
  --bs-table-bg: var(--surface);
  --bs-table-color: var(--ink);
  --bs-table-border-color: var(--border-soft);
  --bs-table-hover-bg: var(--surface-sunk);
  --bs-table-hover-color: var(--ink);
  font-size: var(--fs-sm);
  margin-bottom: 0;
}
.table > thead > tr > th {
  background: var(--surface-sunk);
  color: var(--ink);
  font-weight: 700;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  vertical-align: middle;
}
.table > tbody > tr > td { vertical-align: middle; }
.table > :not(caption) > * > * { padding: 0.5rem 0.7rem; }
.table caption,
.table-caption {
  caption-side: top;
  padding: 0 0 var(--s-2);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}
.table-sticky > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 2;
}
.table .num, .table .text-end { text-align: right; }
.table .cell-strong { font-weight: 600; color: var(--ink); }
.table .cell-meta {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  line-height: 1.3;
}
.table .row-actions {
  display: flex;
  gap: var(--s-1);
  justify-content: flex-end;
  white-space: nowrap;
}

/* Totals row: neutral, separated by weight and rule, never by colour. */
.table tfoot > tr > td,
.table tfoot > tr > th,
.table tr.is-total > td {
  background: var(--surface-sunk);
  font-weight: 700;
  color: var(--ink);
  border-top: 2px solid var(--border);
}

/* == 9  Forms =========================================================== */

/* Money and percentage fields carry step="0.01" so paise and half-percents
   validate. That also makes the browser's spinner move one PAISA per click -
   ~100 clicks to add a rupee, which is not a usable control on a fee of
   25,000. There is no step value that fixes it: step="1" gives rupee arrows
   but makes 1234.50 fail validation, and step="any" allows the value but
   disables the arrows anyway (stepUp() throws). So the arrows come off these
   fields and the amount is typed. Fields whose step is genuinely meaningful
   keep theirs - hours (0.5) and the period counter (1). */
input[type="number"][step="0.01"]::-webkit-outer-spin-button,
input[type="number"][step="0.01"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type="number"][step="0.01"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.form-control, .form-select {
  font-size: var(--fs-base);
  color: var(--ink);
  background-color: var(--surface);
  border-color: var(--border);
  border-radius: var(--r-sm);
  padding: 0.35rem 0.6rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(23, 35, 59, 0.10);
}
.form-control::placeholder { color: var(--ink-faint); }
.form-control:disabled, .form-select:disabled,
.form-control[readonly] {
  background-color: var(--surface-sunk);
  color: var(--ink-muted);
}
.form-control-sm, .form-select-sm {
  font-size: var(--fs-sm);
  padding: 0.25rem 0.5rem;
}
.form-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.2rem;
}
.form-text { font-size: var(--fs-xs); color: var(--ink-muted); }
.form-check-input:checked {
  background-color: var(--navy);
  border-color: var(--navy);
}
.form-check-input:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(23, 35, 59, 0.12);
}
.was-validated .form-control:invalid, .form-control.is-invalid {
  border-color: var(--danger);
}
.invalid-feedback { color: var(--danger); font-size: var(--fs-xs); }

/* Grouped fields. Sections carry the meaning; the form stays one column on
   narrow screens without reordering. */
.form-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
}
.form-section > .form-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border-soft);
}
.form-section-title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.form-section-note { font-size: var(--fs-xs); color: var(--ink-muted); margin: 0; }

/* == 10  Buttons + links ================================================ */

.btn {
  font-size: var(--fs-base);
  font-weight: 600;
  border-radius: var(--r-sm);
  padding: 0.35rem 0.8rem;
  white-space: nowrap;
}
.btn-sm { font-size: var(--fs-sm); padding: 0.25rem 0.6rem; }
.btn-lg { font-size: var(--fs-md); padding: 0.5rem 1.1rem; }

.btn-primary {
  --bs-btn-bg: var(--navy);
  --bs-btn-border-color: var(--navy);
  --bs-btn-hover-bg: var(--navy-hover);
  --bs-btn-hover-border-color: var(--navy-hover);
  --bs-btn-active-bg: var(--navy-hover);
  --bs-btn-active-border-color: var(--navy-hover);
  --bs-btn-disabled-bg: var(--ink-faint);
  --bs-btn-disabled-border-color: var(--ink-faint);
}
.btn-outline-primary {
  --bs-btn-color: var(--navy);
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-bg: var(--navy);
  --bs-btn-hover-border-color: var(--navy);
  --bs-btn-active-bg: var(--navy);
  --bs-btn-active-border-color: var(--navy);
}
.btn-secondary, .btn-outline-secondary {
  --bs-btn-color: var(--ink);
  --bs-btn-bg: var(--surface);
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--surface-sunk);
  --bs-btn-hover-border-color: var(--border);
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: var(--surface-sunk);
  --bs-btn-active-border-color: var(--border);
}
.btn-danger {
  --bs-btn-bg: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-hover-bg: #9A1F18;
  --bs-btn-hover-border-color: #9A1F18;
}
.btn-outline-danger {
  --bs-btn-color: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-hover-bg: var(--danger);
  --bs-btn-hover-border-color: var(--danger);
}
.btn-success {
  --bs-btn-bg: var(--success);
  --bs-btn-border-color: var(--success);
  --bs-btn-hover-bg: #15562E;
  --bs-btn-hover-border-color: #15562E;
}
.btn-link { color: var(--navy); text-decoration: none; font-weight: 600; }
.btn-link:hover { color: var(--navy-hover); text-decoration: underline; }

/* Icon-only button: still needs a real hit area and a discernible name. */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  line-height: 1;
}

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--navy-hover); text-decoration: underline; }
.app-rail a:hover, .app-topbar a:hover { text-decoration: none; }

/* == 11  Chips + status ================================================= */

/* Status always carries text. Colour is a second signal, never the only one. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
  padding: 0.1rem 0.45rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-sunk);
  color: var(--ink);
  white-space: nowrap;
}
.chip .bi { font-size: 0.8em; }
.chip--neutral { background: var(--surface-sunk); border-color: var(--border); color: var(--ink); }
.chip--muted   { background: var(--surface); border-color: var(--border); color: var(--ink-muted); }
.chip--success { background: var(--success-soft); border-color: #BFDDCA; color: var(--success); }
.chip--warning { background: var(--warning-soft); border-color: #E6D3A8; color: var(--warning); }
.chip--danger  { background: var(--danger-soft);  border-color: #EEC3BE; color: var(--danger); }
.chip--info    { background: var(--info-soft);    border-color: #BFD6EE; color: var(--info); }
.chip--brand   { background: var(--gold-soft);    border-color: #E0D2B7; color: var(--gold); }

/* Bootstrap badges used as status elsewhere pick up the same restraint. */
.badge { font-weight: 600; font-size: var(--fs-xs); }

.text-ink       { color: var(--ink) !important; }
.text-ink-muted { color: var(--ink-muted) !important; }
.text-muted     { color: var(--ink-muted) !important; }

/* == 12  Cards + panels ================================================= */

.card {
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  background: var(--surface);
}
.card-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
  font-weight: 600;
  color: var(--ink);
  padding: var(--s-3) var(--s-4);
}
.card-body { padding: var(--s-4); }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--s-4);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border-soft);
}
.panel-title { font-size: var(--fs-base); font-weight: 600; margin: 0; color: var(--ink); }
.panel-body { padding: var(--s-4); }
.panel-body.is-flush { padding: 0; }

/* Alerts: quieter than Bootstrap's, and each carries an icon in template use. */
.alert {
  border-radius: var(--r);
  border-width: 1px;
  font-size: var(--fs-base);
  padding: var(--s-3) var(--s-4);
}
.alert-info    { background: var(--info-soft);    border-color: #BFD6EE; color: var(--info); }
.alert-success { background: var(--success-soft); border-color: #BFDDCA; color: var(--success); }
.alert-warning { background: var(--warning-soft); border-color: #E6D3A8; color: var(--warning); }
.alert-danger  { background: var(--danger-soft);  border-color: #EEC3BE; color: var(--danger); }
.alert-secondary { background: var(--surface-sunk); border-color: var(--border); color: var(--ink); }

/* == 12b  Attention rail (work desk) ==================================== */

/* A ledger: one ruled line per thing that needs doing, ordered by urgency.
   The rank number carries the ordering, so the tone stripe is a second
   signal rather than the only one. */
.attention-rail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.attention-item {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border-soft);
  border-left: 3px solid var(--border);
  text-decoration: none;
  color: inherit;
}
.attention-item:last-child { border-bottom: 0; }
.attention-item:hover { background: var(--surface-sunk); color: inherit; text-decoration: none; }
.attention-item.is-alert { border-left-color: var(--danger); }
.attention-item.is-warn  { border-left-color: var(--warning); }

.attention-rank {
  flex: 0 0 1.4rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.attention-main { flex: 1 1 auto; min-width: 0; }
.attention-title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.attention-detail {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  margin: 0.1rem 0 0;
}
.attention-amount {
  flex: 0 0 auto;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.attention-item.is-alert .attention-amount { color: var(--danger); }
.attention-go {
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}
.attention-go .bi { font-size: 0.75em; margin-left: 0.2rem; }

/* Shortcut row: the four things started most often. */
.shortcut-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

/* Recent records: a short list, never a transaction table. */
.recent-list { display: flex; flex-direction: column; }
.recent-item {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--border-soft);
  text-decoration: none;
  color: inherit;
  font-size: var(--fs-sm);
}
.recent-item:last-child { border-bottom: 0; }
.recent-item:hover { background: var(--surface-sunk); color: inherit; text-decoration: none; }
.recent-item .recent-no { font-weight: 600; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.recent-item .recent-client { flex: 1 1 auto; min-width: 0; color: var(--ink-muted); }
.recent-item .recent-amount { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

@media (max-width: 767.98px) {
  .attention-item { flex-wrap: wrap; }
  .attention-main { flex: 1 1 100%; order: 1; }
  .attention-rank { order: 0; }
  .attention-amount { order: 2; margin-left: 1.4rem; }
  .attention-go { order: 3; margin-left: auto; }
  .shortcut-row > .btn { flex: 1 1 100%; }
}

/* == 12c  Bulk client picker ============================================ */

/* Selecting many clients at once needs one checkbox per client, so the list
   cannot be paginated without losing the selection. Instead it starts closed:
   the operator searches, or asks for the whole list explicitly. Anything
   already ticked stays visible whatever the search says. */
.picker-prompt {
  padding: var(--s-5) var(--s-4);
  text-align: center;
  color: var(--ink-muted);
}
.picker-prompt .picker-title {
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.15rem;
}
.picker-list.is-collapsed > *:not(.is-picked) { display: none; }
.picker-list.is-collapsed .picker-prompt { display: block; }
.picker-list:not(.is-collapsed) .picker-prompt { display: none; }

/* == 12d  Workspace tabs ================================================ */

/* Two halves of one job (define the templates, then run them) that were only
   related through the navigation rail. */
.tabs {
  display: flex;
  gap: var(--s-1);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-4);
  overflow-x: auto;
}
.tabs a {
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a.active { color: var(--navy); border-bottom-color: var(--navy); }

/* == 13  Empty states =================================================== */

.empty-state {
  text-align: center;
  padding: var(--s-6) var(--s-4);
  color: var(--ink-muted);
}
.empty-state .empty-icon {
  font-size: 1.8rem;
  color: var(--ink-faint);
  display: block;
  margin-bottom: var(--s-2);
}
.empty-state .empty-title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.15rem;
}
.empty-state .empty-hint { font-size: var(--fs-sm); margin: 0 0 var(--s-3); }

/* == 14  Drawer + modal ================================================= */

.drawer-row > td {
  background: var(--surface-sunk);
  border-top: 0;
  padding: var(--s-3) var(--s-4) var(--s-4);
}
.drawer-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--s-3);
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}

.modal-content {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.modal-header { border-bottom: 1px solid var(--border-soft); padding: var(--s-3) var(--s-4); }
.modal-title { font-size: var(--fs-lg); font-weight: 600; color: var(--ink); }
.modal-body { padding: var(--s-4); }
.modal-footer { border-top: 1px solid var(--border-soft); padding: var(--s-3) var(--s-4); }

/* Sticky action tray: the selection summary that follows a bulk workflow. */
.action-tray {
  position: sticky;
  bottom: 0;
  z-index: 30;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: var(--s-3) var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-3);
}
.action-tray .tray-summary {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  margin-right: auto;
}
.action-tray .tray-summary strong { color: var(--ink); }

/* == 15  Pagination ===================================================== */

/* Bootstrap declares its pagination variables ON .pagination, not on :root,
   so a :root override never reaches them and the active page stayed #0d6efd.
   Re-pointed at the same specificity, and this file loads later. */
.pagination {
  --bs-pagination-active-bg: var(--navy);
  --bs-pagination-active-border-color: var(--navy);
  --bs-pagination-color: var(--ink-muted);
  --bs-pagination-hover-color: var(--ink);
  --bs-pagination-focus-color: var(--ink);
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(23, 35, 59, .18);
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}
.pager .pager-actions { display: flex; gap: var(--s-2); }

/* == 16  Footer ========================================================= */

/* In normal flow. The old fixed bar covered content on 31 of 43 measured
   page/width combinations, desktop included. */
.portal-footer {
  flex: 0 0 auto;
  background: var(--navy);
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--fs-xs);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid rgba(154, 123, 63, 0.25);
}
.portal-footer .pf-brand {
  font-family: var(--font-brand);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-base);
}
.portal-footer .pf-sep { margin: 0 var(--s-2); opacity: 0.35; }

/* == 17  Utilities ====================================================== */

.stack   { display: flex; flex-direction: column; gap: var(--s-3); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.push    { margin-left: auto; }
.eyebrow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--ink-faint);
}
/* The only sanctioned use of the brand serif outside the shell's brand mark:
   standalone pages that have to identify the firm (no-login action links). */
.brand-mark {
  font-family: var(--font-brand);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.text-numeric { font-variant-numeric: tabular-nums; }
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* searchable-select.js: type-to-shortlist dropdowns for long lists */
.ss-wrap { position: relative; }
.ss-hidden { display: none !important; }
.ss-panel {
  position: absolute;
  z-index: 1080;
  top: 100%; left: 0; right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-top: 2px;
  box-shadow: var(--shadow);
}
.ss-item { padding: 0.3rem 0.6rem; font-size: var(--fs-sm); cursor: pointer; }
.ss-item:hover, .ss-item.active { background: var(--navy-soft); }
.ss-empty { padding: var(--s-2) var(--s-3); font-size: var(--fs-sm); color: var(--ink-muted); }

/* Multi-select: the ticks live inside the panel, so a 513-client list costs
   the page nothing until it is opened. Chips carry the choices above the box
   so what is filtered is readable without opening anything. */
.ss-multi .ss-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin-bottom: 0.2rem;
}
.ss-multi .ss-chips[hidden] { display: none; }
.ss-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  max-width: 100%;
  padding: 0.05rem 0.2rem 0.05rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-sunk);
  font-size: var(--fs-xs);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* A finger has to be able to hit this: 24x30 is the visual gate's floor for
   a control carrying visible text, and a chip is removed far more often on a
   phone than on a desk. */
.ss-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 30px;
  border: 0;
  background: none;
  color: var(--ink-faint);
  line-height: 1;
  padding: 0;
  cursor: pointer;
  font-size: 1rem;
}
.ss-chip-x:hover { color: var(--danger); }
.ss-actions {
  display: flex;
  gap: var(--s-2);
  padding: 0.3rem 0.6rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
}
.ss-all {
  border: 0;
  background: none;
  padding: 0;
  color: var(--navy);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.ss-tick {
  display: inline-block;
  width: 1rem;
  margin-right: 0.35rem;
  text-align: center;
  color: var(--navy);
  font-weight: 700;
}
.ss-item.is-on { font-weight: 600; }

/* == 18  Responsive ===================================================== */

@media (max-width: 991.98px) {
  :root { --rail-w: 264px; }

  .rail-open-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--r-sm);
    background: transparent;
    color: #fff;
    flex: 0 0 auto;
  }

  .app-rail-col {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    z-index: 1060;
    transform: translateX(-100%);
    transition: transform 0.18s ease;
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
  }
  .app-rail-col.is-open { transform: translateX(0); }
  .app-rail {
    position: static;
    max-height: none;
    overflow: visible;
    padding-top: var(--s-2);
  }
  .rail-backdrop.is-open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(36, 48, 71, 0.45);
    z-index: 1055;
  }
  .rail-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-2) var(--s-4) var(--s-3);
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: var(--s-2);
  }

  .app-main { padding: var(--s-3) var(--s-4) var(--s-5); }
  .global-search { flex: 1 1 auto; min-width: 0; }
}

/* Touch targets, up to the breakpoint where the rail becomes a drawer: a
   tablet is a finger device too, and the old rules stopped at 768. */
@media (max-width: 991.98px) {
  .btn, .form-control, .form-select, .rail-link, .rail-toggle,
  .filter-toggle, .pw-toggle, .app-brand, .app-topbar .topbar-link {
    min-height: 2.75rem;
  }
  .app-brand, .app-topbar .topbar-link { display: inline-flex; align-items: center; }

  /* A sticky tray wraps to several rows at these widths and pins over the
     controls above it. Measured at 390 px it covered the client search by
     39 px and hid Show all / Select shown / Clear completely. Let it sit at
     the end of the form instead. */
  .action-tray { position: static; }
  .btn-sm, .form-control-sm, .form-select-sm { min-height: 2.5rem; }
  .btn-icon, .btn-sm.btn-icon { width: 2.75rem; height: 2.75rem; }
  .table .row-actions .btn-icon { width: 2.5rem; height: 2.5rem; }
}

/* Below the tablet breakpoint the top bar cannot hold brand + search + user +
   three actions: at 390px it overflowed the page by 18-43px depending on the
   length of the user's name. Shed the labels, keep every control. */
@media (max-width: 767.98px) {
  .app-topbar { gap: var(--s-2); padding: 0 var(--s-3); }
  .app-brand .brand-suffix { display: none; }
  .app-topbar .topbar-user { display: none; }
  .app-topbar .topbar-link {
    justify-content: center;
    min-width: 2.75rem;
    padding: var(--s-2) 0.35rem;
  }
  .app-topbar .topbar-link .topbar-label { display: none; }
  .app-topbar .topbar-link .bi { margin-right: 0 !important; }
  .global-search { flex: 1 1 auto; min-width: 0; }
}

@media (min-width: 992px) {
  .rail-drawer-head { display: none; }
}

@media (max-width: 767.98px) {
  .app-main { padding: var(--s-3) var(--s-3) var(--s-5); }
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head .page-actions { width: 100%; }
  .page-head .page-actions > .btn { flex: 1 1 auto; }

  .summary-item {
    flex: 1 1 50%;
    border-bottom: 1px solid var(--border-soft);
  }
  .summary-item:nth-child(2n) { border-right: 0; }

  .filter-field { flex: 1 1 100%; }
  .filter-bar.is-sticky { position: static; }


  .portal-footer { justify-content: center; text-align: center; }
}

@media print {
  .app-topbar, .app-rail, .portal-footer, .page-actions,
  .filter-bar, .action-tray, .pager { display: none !important; }
  .app-main { padding: 0; }
  body { background: #fff; }
}

/* == 19  Auth pages ===================================================== */

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  padding: var(--s-5) var(--s-4);
}
.auth-wrap { width: 100%; max-width: 26rem; }
.auth-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  border-top: 3px solid var(--gold);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.auth-head {
  text-align: center;
  padding: var(--s-6) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--border-soft);
}
.auth-rule {
  width: 2.75rem;
  height: 2px;
  background: var(--gold);
  margin: 0 auto var(--s-4);
}
.auth-brand {
  font-family: var(--font-brand);
  font-size: 2.35rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}
.auth-tagline {
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin: var(--s-2) 0 0;
}
.auth-body { padding: var(--s-5); }
.auth-title { font-size: var(--fs-lg); font-weight: 600; margin: 0 0 0.15rem; }
.auth-sub { font-size: var(--fs-sm); color: var(--ink-muted); margin: 0 0 var(--s-5); }
.auth-foot {
  text-align: center;
  margin-top: var(--s-4);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
}
.auth-card .input-group-text {
  background: var(--surface-sunk);
  border-color: var(--border);
  color: var(--ink-muted);
}
.auth-card .input-group:focus-within .input-group-text {
  border-color: var(--navy);
  color: var(--navy);
}
.pw-toggle {
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-left: 0;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 0 0.75rem;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.pw-toggle:hover { color: var(--navy); background: var(--navy-soft); }

/* == 20  Legacy shell =================================================== */

/* The pre-rehaul navbar and the two sub-navs, re-pointed at the new tokens so
   this issue can land the visual system without also restructuring
   navigation. The role-aware shell issue replaces all three and deletes this
   section. */
.navbar {
  background: var(--navy) !important;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}
.navbar-brand {
  font-family: var(--font-brand);
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff !important;
  letter-spacing: -0.01em;
  line-height: 1;
}
.navbar-brand .brand-suffix {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-left: var(--s-2);
  vertical-align: middle;
}
.navbar .nav-link {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.navbar .nav-link:hover { color: #fff !important; }
.navbar .text-muted { color: rgba(255, 255, 255, 0.65) !important; }

.billing-subnav, .work-subnav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0.35rem 0;
  margin-bottom: var(--s-4);
  position: relative;
  z-index: 100;
}
.billing-subnav .subnav-row, .work-subnav .subnav-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  row-gap: var(--s-1);
}
.billing-subnav .nav, .work-subnav .nav { flex: 1 1 auto; flex-wrap: wrap; row-gap: 0.2rem; }
.billing-subnav .nav-link, .work-subnav .nav-link {
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 0.3rem 0.65rem;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.billing-subnav .nav-link:hover, .work-subnav .nav-link:hover {
  background: var(--surface-sunk);
  color: var(--ink);
}
.billing-subnav .nav-link.active, .work-subnav .nav-link.active {
  color: var(--navy);
  background: var(--navy-soft);
  font-weight: 600;
}
.billing-subnav .dropdown-menu {
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  font-size: var(--fs-sm);
  border-radius: var(--r);
}
.billing-subnav .dropdown-item.active,
.billing-subnav .dropdown-item:active {
  background: var(--navy-soft);
  color: var(--navy);
}
.work-subnav .alert-pill {
  font-size: var(--fs-sm);
  text-decoration: none;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  white-space: nowrap;
}
.work-subnav .alert-pill:hover { background: var(--surface-sunk); }

/* Search box while it still lives on the light sub-nav rather than the top
   bar. Shares the results markup with .global-search. */
.billing-search { position: relative; flex: 0 1 16rem; min-width: 11rem; }
.billing-search input {
  width: 100%;
  font-size: var(--fs-sm);
  padding: 0.3rem 0.6rem 0.3rem 1.9rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}
.billing-search > .bi-search {
  position: absolute;
  left: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-faint);
  font-size: var(--fs-sm);
  pointer-events: none;
}
.billing-search .results {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  border-radius: var(--r);
  max-height: 380px;
  overflow-y: auto;
  z-index: 1050;
  display: none;
  margin-top: var(--s-1);
}
.billing-search .results.show { display: block; }
.billing-search .res-group {
  padding: var(--s-1) var(--s-3);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  background: var(--surface-sunk);
  font-weight: 600;
}
.billing-search .res-item {
  display: block;
  padding: 0.4rem var(--s-3);
  text-decoration: none;
  color: var(--ink);
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-sm);
}
.billing-search .res-item:hover { background: var(--navy-soft); }
.billing-search .res-empty {
  padding: var(--s-3);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}