/* ============================================================================
   SpendDesk — Budget & PO Control
   Visual layer only. The markup, page structure and interactions are fixed;
   this sheet must never change where a control sits or how it behaves.

   CONTRACTS (see the note above each rule before editing):
   - .payment-entry-fields must stay `display:contents` (po_detail.html sets
     .style.display = 'contents' | 'none' on those wrappers).
   - .primary / .negative / .danger-button keep their !important declarations.
     Do not wrap this file in @layer: that inverts !important precedence.
   - Links written by the requester poller have no class, so table links are
     styled via `td a`, never via a class.

   Sections: 1 tokens · 2 base · 3 layout · 4 surfaces · 5 data · 6 forms
             7 buttons · 8 feedback · 9 PO document · 10 utilities
             11 responsive · 12 print
   ========================================================================= */

/* == 1. Tokens ============================================================ */

:root {
  /* Neutrals (cool grey) */
  --n-0: #ffffff;
  --n-25: #fbfcfd;
  --n-50: #f6f8fa;
  --n-100: #eef1f5;
  --n-200: #e2e6ed;
  --n-300: #cdd3dd;
  --n-400: #a9b1bf;
  --n-500: #858d9c;
  --n-600: #5b6272;
  --n-700: #454c5b;
  --n-800: #2e3542;
  --n-900: #1b202a;
  --n-950: #11151c;

  /* Accent — links, focus, current page. Used sparingly on purpose. */
  --a-50: #eef2fb;
  --a-100: #dde5f7;
  --a-200: #bdcdef;
  --a-400: #6b87d0;
  --a-500: #3f5fb0;
  --a-600: #33509a;
  --a-700: #27407c;

  /* Semantic */
  --ok-50: #ecfdf3;
  --ok-200: #abefc6;
  --ok-700: #087443;
  --warn-50: #fffaeb;
  --warn-200: #fedf89;
  --warn-700: #8a5a08;
  --da-50: #fef3f2;
  --da-200: #fecdca;
  --da-600: #b42318;
  --da-700: #912018;
  --info-50: #eef4ff;
  --info-200: #c7d7fe;
  --info-700: #233b63;

  /* Aliases — components reference these only, so dark mode is one block. */
  --bg-app: var(--n-50);
  --bg-surface: var(--n-0);
  --bg-surface-2: var(--n-50);
  --bg-inset: var(--n-100);
  --bg-hover: var(--n-50);
  --text-1: var(--n-900);
  --text-2: var(--n-600);
  --text-3: var(--n-500);
  --border: var(--n-200);
  --border-strong: var(--n-300);
  --accent: var(--a-500);
  --accent-hover: var(--a-600);
  --ink-solid: var(--n-900);
  --ink-solid-hover: var(--n-800);
  --topbar-bg: var(--n-950);
  --danger: var(--da-600);

  /* Legacy names kept so any stray reference still resolves. */
  --bg: var(--bg-app);
  --panel: var(--bg-surface);
  --ink: var(--text-1);
  --muted: var(--text-2);
  --line: var(--border);
  --soft: var(--n-100);

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  /* Radii */
  --r-control: 6px;
  --r-card: 10px;
  --r-doc: 12px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 4px 14px rgba(16, 24, 40, .08);
  --shadow-pop: 0 14px 32px rgba(16, 24, 40, .16), 0 2px 6px rgba(16, 24, 40, .06);

  --ring: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--a-400);
  --dur: 120ms;
  --ease: cubic-bezier(.2, .6, .3, 1);
}

:root[data-theme="dark"] {
  --bg-app: #0f1218;
  --bg-surface: #161a21;
  --bg-surface-2: #1c212a;
  --bg-inset: #1c212a;
  --bg-hover: #1e2430;
  --text-1: #e6e8ec;
  --text-2: #a4abb8;
  --text-3: #858d9c;
  --border: #262c36;
  --border-strong: #363d4a;
  --accent: #8ba6e6;
  --accent-hover: #a8bdf0;
  --ink-solid: #e6e8ec;
  --ink-solid-hover: #ffffff;
  --topbar-bg: #0b0e13;
  --danger: #ff9592;
  --soft: #232935;

  --ok-50: #10231a;
  --ok-200: #23543a;
  --ok-700: #6ee7a8;
  --warn-50: #241c0c;
  --warn-200: #5c4413;
  --warn-700: #f5c454;
  --da-50: #2a1512;
  --da-200: #5c2a24;
  --da-700: #ff9592;
  --info-50: #131d2e;
  --info-200: #2a3b5c;
  --info-700: #9db9f0;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
  --shadow-pop: 0 14px 32px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* == 2. Base ============================================================== */

* { box-sizing: border-box }

/* `display` rules on labels and buttons would otherwise beat the hidden
   attribute, leaving empty controls on screen. */
[hidden] { display: none !important }

html { color-scheme: light dark }

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg-app);
  color: var(--text-1);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit }

:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--ring);
  border-radius: var(--r-control);
}
:focus:not(:focus-visible) { outline: none }

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

/* == 3. Layout ============================================================ */

.topbar {
  height: 68px;
  background: var(--topbar-bg);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.brand { display: flex; flex-direction: column; min-width: 180px; gap: 1px }
.brand a { text-decoration: none; font-weight: var(--fw-bold); font-size: 16px; letter-spacing: -.01em }
.brand span { font-size: 10px; color: #9aa1ad; text-transform: uppercase; letter-spacing: .08em; font-weight: var(--fw-medium) }

.topbar nav { display: flex; gap: 2px; flex: 1 }
.topbar nav a {
  text-decoration: none;
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
  font-weight: var(--fw-medium);
  padding: 7px 8px;
  border-radius: var(--r-control);
  position: relative;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.topbar nav a:hover { color: #fff; background: rgba(255, 255, 255, .08) }
.nav-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin-left: 2px;
  border-radius: var(--r-pill);
  background: var(--a-400);
  color: #0b0e13;
  font-size: 11px;
  font-weight: var(--fw-bold);
  text-align: center;
}
/* Current page marker — enhance.js adds data-current by matching the URL. */
.topbar nav a[data-current] { color: #fff }
.topbar nav a[data-current]::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--a-400);
}

.active-entity {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  max-width: 250px;
  padding: 5px 10px 5px 5px;
  border-radius: var(--r-control);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  transition: background-color var(--dur) var(--ease);
}
.active-entity:hover { background: rgba(255, 255, 255, .12) }
.active-entity .entity-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.toolbar-logo-wrap {
  background: #fff;
  border-radius: 4px;
  padding: 4px 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 46px;
}
.toolbar-logo-wrap img { display: block; max-height: 28px; max-width: 105px; object-fit: contain }

/* The entity chip doubles as the entity switcher when there is more than one
   entity (or the user can create them). Same chip, now with a caret. */
.entity-menu { position: relative }
.entity-menu summary { cursor: pointer; list-style: none }
.entity-menu summary::-webkit-details-marker { display: none }
/* An SVG chevron: a text caret renders too small and too faint to read as
   "this opens". It points up while the menu is open. */
.entity-caret {
  flex: none;
  opacity: .75;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.entity-menu summary:hover .entity-caret { opacity: 1 }
.entity-menu[open] .entity-caret { opacity: 1; transform: rotate(180deg) }
.entity-menu[open] summary { background: rgba(255, 255, 255, .12) }
.entity-menu-popover { left: 0; right: auto; top: 50px; max-width: 280px }
.entity-menu-popover .menu-heading {
  margin: 2px 0 4px;
  padding: 0 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: var(--fw-bold);
  color: var(--text-2);
}
.entity-menu-popover a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.entity-menu-popover .menu-current { background: var(--bg-hover); font-weight: var(--fw-semibold) }
.entity-menu-popover .menu-new { margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 var(--r-control) var(--r-control); color: var(--text-2) }

.topbar-requester {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 120px;
  max-width: 180px;
  font-size: 11px;
  line-height: 1.25;
}
.topbar-requester span { color: #9aa1ad; text-transform: uppercase; letter-spacing: .06em; font-size: 9px; font-weight: var(--fw-semibold) }
.topbar-requester strong { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

.user-menu { position: relative; font-size: 12px; color: #fff }
.user-menu summary {
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  color: rgba(255, 255, 255, .78);
  padding: 6px 4px;
  border-radius: var(--r-control);
  font-weight: var(--fw-medium);
}
.user-menu summary:hover { color: #fff }
.user-menu summary::-webkit-details-marker { display: none }
.user-menu summary::after { content: ' ▾' / ''; color: #7d8492 }
.user-menu[open] summary::after { content: ' ▴' / '' }
.user-menu-popover {
  position: absolute;
  right: 0;
  top: 32px;
  min-width: 200px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 6px;
  box-shadow: var(--shadow-pop);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.user-menu-popover a, .user-menu-popover .menu-button {
  display: block;
  width: 100%;
  text-align: left;
  color: var(--text-1);
  background: transparent;
  border: 0;
  text-decoration: none;
  padding: 9px 10px;
  border-radius: var(--r-control);
  font-size: 13px;
  font-weight: var(--fw-medium);
  min-height: 0;
  box-shadow: none;
}
.user-menu-popover a:hover, .user-menu-popover .menu-button:hover { background: var(--bg-hover) }

.container { max-width: 1440px; margin: 0 auto; padding: 28px }
.pagehead { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 22px }
.pagehead h1 { margin: 0; font-size: 30px; line-height: 1.1; letter-spacing: -.028em; font-weight: var(--fw-bold) }
.eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: var(--fw-bold);
  color: var(--text-2);
  margin-bottom: 6px;
}
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0 }
/* The title may wrap; the buttons beside it must not be squeezed. */
.pagehead > *:first-child { min-width: 0 }
.pagehead > .button { align-self: flex-start; flex-shrink: 0 }

/* == 4. Surfaces ========================================================== */

.panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  margin: 18px 0;
  box-shadow: var(--shadow-xs);
  /* No overflow:hidden — it would disable the sticky table header. Corners
     are rounded on the first/last cells instead (section 5). */
}
.panel > h2 {
  margin: 0;
  padding: 16px 20px;
  font-size: 18px;
  font-weight: var(--fw-semibold);
  letter-spacing: -.01em;
  border-bottom: 1px solid var(--border);
}
.panelhead {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border);
}
.panelhead h2 { margin: 0; font-size: 18px; font-weight: var(--fw-semibold); letter-spacing: -.01em }

.expandable-panel { overflow: visible }
.expandable-panel > summary { cursor: pointer; list-style: none }
.expandable-panel > summary::-webkit-details-marker { display: none }
.expandable-panel > summary:hover { background: var(--bg-surface-2) }
.expand-indicator { font-size: 11px; color: var(--text-2); font-weight: var(--fw-semibold) }
.expandable-panel[open] > summary .expand-indicator { color: var(--accent) }

.kpis { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap: 12px; margin-bottom: 18px }
.po-kpis { grid-template-columns: repeat(4, minmax(140px, 1fr)) }
.kpi {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 16px 20px;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
}
.kpi::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--border-strong);
}
.kpi span { display: block; color: var(--text-2); font-size: 12px; font-weight: var(--fw-medium); margin-bottom: 6px }
.kpi strong { font-size: 22px; letter-spacing: -.02em; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums }

.detailgrid { padding: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px }
.detailgrid div { display: flex; flex-direction: column; gap: 5px }
.detailgrid .wide { grid-column: 1/-1 }
.detailgrid .tiny { margin-top: 0 }

.summaryline {
  padding: 14px 20px;
  text-align: right;
  background: var(--bg-surface-2);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--r-card) var(--r-card);
  font-variant-numeric: tabular-nums;
}

.form-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1000px;
  box-shadow: var(--shadow-xs);
}
.form-card.plain { border: 0; padding: 20px; box-shadow: none; background: transparent }

.login-card {
  width: 420px;
  max-width: calc(100vw - 30px);
  margin: 12vh auto;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 32px;
  border-radius: var(--r-doc);
  box-shadow: var(--shadow-md);
}
.login-card h1 { margin: 0; font-size: 25px; letter-spacing: -.022em; font-weight: var(--fw-bold) }
.login-help { text-align: center; font-size: 12px }
.login-help a { color: var(--text-2) }

.logo-preview {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 14px 0;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--bg-surface-2);
}
.logo-preview img { max-width: 260px; max-height: 100px; object-fit: contain }

/* == 5. Data (tables, figures, links) ===================================== */

table { width: 100%; border-collapse: collapse }
th, td { padding: 12px 16px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top }
th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: var(--fw-semibold);
  color: var(--text-2);
  background: var(--bg-surface-2);
  border-bottom: 2px solid var(--border-strong);
  white-space: nowrap;
}
tbody tr:hover td { background: var(--bg-hover) }
/* Action cells: right-aligned, one row, compact controls (any markup). */
td.actions, td.num:has(button), td.num:has(.button) {
  display: table-cell;
  text-align: right;
  white-space: nowrap;
}
td.actions > form, td.actions > .button, td.num > form { display: inline-flex; margin-left: 6px }
td.actions > form:first-child, td.num > form:first-child { margin-left: 0 }
.clickable-row:hover td { background: var(--bg-hover) }
tbody tr:last-child td { border-bottom: 0 }
/* Rounded panel corners without overflow:hidden (see .panel). */
.panel > table > thead th:first-child { border-top-left-radius: var(--r-card) }
.panel > table > thead th:last-child { border-top-right-radius: var(--r-card) }
.panel > table > tbody tr:last-child td:first-child,
.panel > table > tfoot tr:last-child td:first-child,
.panel > table > tfoot tr:last-child th:first-child { border-bottom-left-radius: var(--r-card) }
.panel > table > tbody tr:last-child td:last-child,
.panel > table > tfoot tr:last-child td:last-child,
.panel > table > tfoot tr:last-child th:last-child { border-bottom-right-radius: var(--r-card) }

tfoot th, tfoot td {
  background: var(--bg-surface-2);
  border-top: 2px solid var(--border-strong);
  border-bottom: 0;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums }
.tiny { font-size: 11px; color: var(--text-2); margin-top: 3px; line-height: 1.45 }
.muted { color: var(--text-2) }
.empty { text-align: center; color: var(--text-2); padding: 40px 20px; background: var(--bg-surface-2) }

td a { color: var(--accent); text-decoration: none; font-weight: var(--fw-medium) }
td a:hover { text-decoration: underline; text-underline-offset: 2px }
.category-link { text-decoration: none; font-weight: var(--fw-semibold) }
.category-link:hover { text-decoration: underline; text-underline-offset: 2px }

/* Drillable figures: dotted underline signals "click for the breakdown". */
.financial-link {
  font-weight: var(--fw-semibold);
  color: inherit;
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
}
.financial-link:hover { text-decoration-style: solid; text-decoration-color: currentColor }
.financial-link.negative { color: var(--danger) }
.negative { color: var(--danger) !important }

/* == 6. Forms ============================================================= */

label { display: flex; flex-direction: column; gap: 7px; font-size: 12px; font-weight: var(--fw-semibold) }
input, select, textarea {
  font: inherit;
  padding: 9px 11px;
  min-height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  background: var(--bg-surface);
  color: var(--text-1);
  width: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--n-400) }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--accent) }
input[type="number"] { font-variant-numeric: tabular-nums }
input::placeholder, textarea::placeholder { color: var(--text-3) }
textarea { resize: vertical; min-height: 80px }
.check { display: flex; flex-direction: row; align-items: center; gap: 8px }
.check input { width: auto; min-height: 0 }
.field-help { font-size: 11px; font-weight: var(--fw-regular); color: var(--text-3); line-height: 1.45 }
.field-help a { font-weight: var(--fw-semibold) }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 16px }
.stack { display: flex; flex-direction: column; gap: 16px; margin-top: 24px }

.filters {
  display: flex;
  gap: 14px;
  align-items: end;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 14px 16px;
  border-radius: var(--r-card);
  margin-bottom: 18px;
  box-shadow: var(--shadow-xs);
}
.filters label { min-width: 220px }
.po-register-filters { align-items: end; flex-wrap: wrap }
.po-register-filters .search-label { min-width: 230px }
.po-register-filters input[type="search"] { min-width: 230px }
.filter-actions { display: flex; gap: 8px; align-items: end; padding-bottom: 1px }
.export-actions { display: flex; gap: 8px; justify-content: flex-end; margin: 12px 0 16px }

.paperwork-form { max-width: none }
.role-form { display: flex; gap: 7px; align-items: center }
.role-form select { min-width: 120px }
.role-form button { white-space: nowrap }
.inline-form { display: inline }
td .inline-form button, td .role-form button, td .button { padding: 6px 10px; font-size: 12px; min-height: 30px }

/* CONTRACT — po_detail.html toggles these wrappers between 'contents' and
   'none'. They must never become a box: no padding, border or background,
   and never redeclare display (including inside a media query). */
.payment-entry-fields { display: contents }
.payment-history table { margin-top: .5rem }

/* == 7. Buttons =========================================================== */

.button, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  padding: 8px 14px;
  min-height: 36px;
  background: var(--bg-surface);
  text-decoration: none;
  color: var(--text-1);
  font: inherit;
  font-weight: var(--fw-medium);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.button:hover, button:hover { background: var(--bg-hover); border-color: var(--n-400) }
.button:active, button:active { transform: translateY(.5px) }
button:disabled { opacity: .55; cursor: not-allowed }

.primary {
  background: var(--ink-solid) !important;
  color: var(--bg-surface) !important;
  border-color: var(--ink-solid) !important;
}
.primary:hover { background: var(--ink-solid-hover) !important; border-color: var(--ink-solid-hover) !important }

.danger-button {
  background: var(--bg-surface) !important;
  color: var(--danger) !important;
  border-color: var(--da-200) !important;
}
.danger-button:hover { background: var(--da-50) !important }

/* == 8. Feedback (alerts, status chips) =================================== */

.alert, .info, .success {
  max-width: 1000px;
  padding: 12px 15px;
  border-radius: var(--r-control);
  margin: 12px 0;
  line-height: 1.5;
  border: 1px solid;
  border-left-width: 3px;
}
.alert { background: var(--da-50); color: var(--da-700); border-color: var(--da-200); border-left-color: var(--danger) }
.info { background: var(--info-50); color: var(--info-700); border-color: var(--info-200); border-left-color: var(--a-500) }
.success { background: var(--ok-50); color: var(--ok-700); border-color: var(--ok-200); border-left-color: var(--ok-700) }

/* Status chips. enhance.js sets data-tone from the chip's own text, for known
   statuses only, so breakdown labels stay neutral. Without JS this is the
   plain neutral chip the app has always shown. */
.pill {
  display: inline-block;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: .02em;
  white-space: nowrap;
}
.pill[data-tone="ok"] { background: var(--ok-50); border-color: var(--ok-200); color: var(--ok-700) }
.pill[data-tone="info"] { background: var(--info-50); border-color: var(--info-200); color: var(--info-700) }
.pill[data-tone="warn"] { background: var(--warn-50); border-color: var(--warn-200); color: var(--warn-700) }
.pill[data-tone="danger"] { background: var(--da-50); border-color: var(--da-200); color: var(--da-700) }

/* == 8b. Confirmations ====================================================
   Server-rendered inside <main>, so they work without JavaScript as plain
   banners. With JavaScript (html[data-js]) the same markup becomes a floating
   stack: success fades on its own, errors and warnings wait to be dismissed. */

.flashes { display: flex; flex-direction: column; gap: 8px; max-width: 1000px; margin: 0 0 16px }
.flash {
  padding: 12px 15px;
  border-radius: var(--r-control);
  line-height: 1.5;
  border: 1px solid;
  border-left-width: 3px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.flash-text { margin: 0; flex: 1 }
.flash-success { background: var(--ok-50); color: var(--ok-700); border-color: var(--ok-200); border-left-color: var(--ok-700) }
.flash-info { background: var(--info-50); color: var(--info-700); border-color: var(--info-200); border-left-color: var(--a-500) }
.flash-warn { background: var(--warn-50); color: var(--warn-700); border-color: var(--warn-200); border-left-color: var(--warn-700) }
.flash-error { background: var(--da-50); color: var(--da-700); border-color: var(--da-200); border-left-color: var(--danger) }

/* The dismiss button does nothing without JavaScript, so it only appears with it. */
.flash-close { display: none }
html[data-js] .flash-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-height: 0;
  flex: none;
  margin: -2px -4px 0 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  color: inherit;
  opacity: .6;
  font-size: 18px;
  cursor: pointer;
}
html[data-js] .flash-close:hover { opacity: 1; background: rgba(0, 0, 0, .06) }

html[data-js] .flashes {
  position: fixed;
  top: 84px;
  right: 20px;
  z-index: 60;
  width: min(420px, calc(100vw - 40px));
  max-width: none;
  margin: 0;
  pointer-events: none;
}
html[data-js] .flash {
  pointer-events: auto;
  box-shadow: var(--shadow-md);
  animation: flash-in .18s var(--ease) both;
}
html[data-js] .flash[data-leaving] { animation: flash-out .18s var(--ease) both }
@keyframes flash-in { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }
@keyframes flash-out { from { opacity: 1 } to { opacity: 0; transform: translateY(-6px) } }

.field-error { display: block; margin-top: 4px; color: var(--da-700); font-size: 12px; font-weight: var(--fw-medium) }
[aria-invalid="true"] { border-color: var(--danger) }

@media (max-width: 700px) {
  html[data-js] .flashes { top: 12px; right: 12px; left: 12px; width: auto }
}

/* == 8c. Modals ==========================================================
   Replaces window.confirm() for destructive actions. Built on <dialog>, so
   focus trapping, Esc and the backdrop come from the browser. */

.modal {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--bg-surface);
  color: var(--text-1);
  padding: 0;
  width: min(480px, calc(100vw - 32px));
  box-shadow: var(--shadow-pop);
}
.modal::backdrop { background: rgba(16, 24, 40, .45) }
:root[data-theme="dark"] .modal::backdrop { background: rgba(0, 0, 0, .6) }
.modal-inner { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px 20px }
.modal-title { margin: 0; font-size: 18px; font-weight: var(--fw-semibold); letter-spacing: -.01em }
.modal-body { color: var(--text-2); line-height: 1.55 }
.modal-body p { margin: 0 }
.modal-body ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px }
.modal-typed { gap: 6px; font-size: 12px; font-weight: var(--fw-medium); color: var(--text-2) }
.modal-typed span { line-height: 1.5 }
.modal-typed strong { color: var(--text-1) }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 2px }
.modal-actions button { min-height: 36px }

@media (max-width: 700px) {
  .modal { width: calc(100vw - 24px) }
  .modal-actions { flex-direction: column-reverse }
  .modal-actions button { width: 100% }
}

/* == 9. PO document (what suppliers see; stays light in dark mode) ======== */

.po-document {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-doc);
  padding: 34px 38px;
  margin-bottom: 20px;
  max-width: 1050px;
  box-shadow: var(--shadow-sm);
}
:root[data-theme="dark"] .po-document {
  color-scheme: light;
  --bg-surface: #ffffff;
  --bg-surface-2: #f6f8fa;
  --bg-inset: #f8f8f8;
  --text-1: #1b202a;
  --text-2: #5b6272;
  --text-3: #858d9c;
  --border: #e2e6ed;
  --border-strong: #cdd3dd;
  color: #1b202a;
}
.po-brand-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom: 2px solid var(--text-1);
}
.po-logo { display: block; max-width: 300px; max-height: 110px; object-fit: contain }
.po-brand-caption { font-size: 12px; font-weight: var(--fw-semibold); margin-top: 8px; color: var(--text-2) }
.po-label-name { font-size: 25px; font-weight: var(--fw-heavy); letter-spacing: -.022em }
.po-number-block { text-align: right; display: flex; flex-direction: column; gap: 4px; color: var(--text-2); font-size: 12px }
.po-number-block strong { font-size: 18px; color: var(--text-1); letter-spacing: .08em; font-weight: var(--fw-bold) }
.po-amount { display: grid; grid-template-columns: 1fr auto; gap: 4px 26px; align-items: end; padding: 28px 0 }
.po-amount > span:first-child { grid-column: 1; color: var(--text-2) }
.po-amount > strong:nth-child(2) { grid-column: 1; font-size: 21px; font-weight: var(--fw-semibold) }
.amount-label {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-2);
  font-weight: var(--fw-semibold);
}
.amount-value { grid-column: 2; grid-row: 2; font-size: 28px; font-weight: var(--fw-bold); letter-spacing: -.025em; font-variant-numeric: tabular-nums }
.po-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
}
.po-detail-grid > div { padding: 14px 16px; border-bottom: 1px solid var(--border) }
.po-detail-grid > div:nth-child(odd) { border-right: 1px solid var(--border) }
.po-detail-grid .wide { grid-column: 1/-1; border-right: 0 !important; border-bottom: 0 }
.invoice-box {
  margin-top: 24px;
  border: 1px solid var(--border-strong);
  background: var(--bg-inset);
  border-radius: var(--r-card);
  padding: 18px 20px;
}
.invoice-box h2 { margin: 0 0 10px; font-size: 16px; font-weight: var(--fw-semibold) }
.invoice-box p:last-child { margin-bottom: 0 }
.po-settings-note { margin-top: 12px; font-size: 11px; color: var(--text-2); text-align: right }

/* == 10. Utilities ======================================================== */

.preline { white-space: pre-line }

/* == 11. Responsive ======================================================= */

/* Sticky register headers on desktop only; the mobile rules below give
   .panel its own scroll container, which would cancel sticky. */
@media (min-width: 901px) {
  .panel > table > thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: inset 0 -2px 0 var(--border-strong);
  }
}

@media (max-width: 1100px) {
  .active-entity .entity-name { display: none }
  .active-entity { max-width: 120px }
  .topbar { gap: 18px }
}

@media (max-width: 900px) {
  .topbar { height: auto; flex-wrap: wrap; padding: 16px }
  .topbar nav { order: 3; width: 100%; overflow: auto }
  .container { padding: 18px }
  .kpis, .po-kpis { grid-template-columns: repeat(2, 1fr) }
  .form-grid { grid-template-columns: 1fr }
  .filters { flex-direction: column; align-items: stretch }
  .filters label { min-width: 0 }
  .panel { overflow: auto }
  .detailgrid { grid-template-columns: 1fr 1fr }
  /* Comfortable touch targets */
  .button, button, input, select, .user-menu summary, .entity-menu summary { min-height: 44px }
  .inline-form button, td .inline-form button, td .role-form button, td .button { min-height: 44px; padding: 10px 12px; font-size: 13px }
  .topbar nav a { padding: 10px }
}

@media (max-width: 700px) {
  .po-brand-head, .po-amount { display: flex; flex-direction: column; align-items: flex-start }
  .po-number-block { text-align: left }
  .po-detail-grid { grid-template-columns: 1fr }
  .po-detail-grid > div:nth-child(odd) { border-right: 0 }
  .po-detail-grid .wide { grid-column: auto }
  .po-logo { max-width: 220px }
  .amount-label { margin-top: 12px }
  .po-document { padding: 22px 20px }
}

/* == 12. Print ============================================================ */

@media print {
  :root, :root[data-theme="dark"] {
    --bg-app: #fff;
    --bg-surface: #fff;
    --bg-surface-2: #fff;
    --bg-inset: #f8f8f8;
    --text-1: #000;
    --text-2: #444;
    --border: #bbb;
    --border-strong: #888;
    --danger: #b42318;
    color-scheme: light;
  }
  body { background: #fff; color: #000 }
  .topbar, .pagehead .actions, .actions, .filters, .export-actions, .user-menu, .panelhead form, .login-help, .flashes, .modal { display: none !important }
  .container { padding: 0; max-width: none }
  .panel, .kpi, .form-card, .po-document { box-shadow: none !important; border-color: #bbb }
  .po-document { border: 0; max-width: none; padding: 0 }
  .po-detail-grid > div, .invoice-box, .payment-history tr { break-inside: avoid }
  thead { display: table-header-group }
  a { text-decoration: none; color: #000 }
}