:root {
  /* ── Brand ──────────────────────────────────────────────────────────────
     Contrast ratios measured against every surface this token appears on.
     Update the annotation whenever the value changes.                      */
  --color-brand-0:       #3D5C0A;   /* dark green  — primary brand — 6.82:1 on s-0 · 7.68:1 on white */
  --color-brand-1:       #486B13;   /* mid green   — links/interactive — 5.50:1 on s-0 · 6.20:1 on white */
  --color-brand-2:       #A8C96B;   /* light green — tint/highlight (use on dark bg only) */

  /* ── Surfaces ────────────────────────────────────────────────────────── */
  --color-surface-0:     #F0F2EE;   /* page base — deepest layer    */
  --color-surface-1:     #F7F8F5;   /* cards, panels                */
  --color-surface-2:     #FFFFFF;   /* elevated elements, overlays  */

  /* ── Content ─────────────────────────────────────────────────────────── */
  --color-content:       #1A2B1A;   /* near-black — 13.3:1 on s-0 · 14.0:1 on s-1 · 14.9:1 on white (AAA) */
  --color-content-muted: #4A5E50;   /* muted — 6.20:1 on s-0 · 6.55:1 on s-1 · 6.98:1 on white (AA) */

  --color-separators:    #D4DAD0;   /* decorative only — not used for text */

  /* ── Accents ─────────────────────────────────────────────────────────── */
  --color-accent-0:      #5B7FA6;   /* corporate blue — verify contrast before use as text */
  --color-accent-1:      #8A6D3B;   /* warm amber     — verify contrast before use as text */
  --color-accent-2:      #C0392B;   /* error red      — 5.44:1 on white · 4.68:1 on #FCEAE8 badge bg */

  /* ── Badge token pairs ────────────────────────────────────────────────
     Each badge must declare both text and bg tokens as a pair.
     Contrast ratio for the pair is annotated on the bg token.             */
  --color-badge-ok-text:      #3D5C0A;   /* = brand-0 */
  --color-badge-ok-bg:        #C2DB88;   /* 5.04:1 with ok-text */
  --color-badge-pending-text: #5C5044;   /* warm dark brown */
  --color-badge-pending-bg:   #EDE8DF;   /* 6.41:1 with pending-text */

  /* Gradients — kept but subdued */
  --gradient-0: linear-gradient(135deg, #3D5C0A 0%, #5A8018 100%);
  --gradient-1: linear-gradient(135deg, #5B7FA6 0%, #3D5C7A 100%);
  --gradient-2: linear-gradient(135deg, #D6CFBF 0%, #8A7E6E 100%);
}

/********************************* CSS Reset **********************************/
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }

/********************************* Base ***************************************/
body {
  font-family: "Inter", "Helvetica Neue", "Arial", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background: var(--color-surface-0);
  color: var(--color-content);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a        { color: var(--color-brand-1); text-decoration: none; }
a:hover  { color: var(--color-brand-0); text-decoration: underline; }
ul       { list-style: none; }

dl {
  display: grid;
  grid-template-columns: max-content auto;
  gap: 2px 20px;
  margin-bottom: 16px;
}

dt {
  grid-column-start: 1;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-content-muted);
  padding-block: 7px;
  white-space: nowrap;
}

dd {
  grid-column-start: 2;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-content);
  padding-block: 7px;
  border-bottom: 1px solid var(--color-separators);
}

dt:last-of-type + dd { border-bottom: none; }

/********************************* Layout *************************************/
/* Default: nav collapsed to icon-only strip (48px).                         */
/* .nav_open class widens it — toggled by JS on load and on resize.          */
body {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "nav header"
    "nav main";
  min-height: 100vh;
  transition: grid-template-columns 0.25s ease;
}

body.nav_open {
  grid-template-columns: 220px 1fr;
}

/********************************* Header *************************************/
body > header {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px 0 16px;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-separators);
  overflow: visible;
  position: relative;
  z-index: 10;
  transition: border-bottom-color 0.18s ease;
}

/* When the filter is expanded the dropdown pops below the header — hide     */
/* the header's bottom border so it doesn't cut through the panel.           */
body:has(#period_filter[open]) > header {
  border-bottom-color: transparent;
}

/* Page title — left-aligned, takes up remaining space */
body > header > span:first-child {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-content-muted);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body > header nav {
  display: flex;
  gap: 20px;
  font-size: 0.875rem;
  font-weight: 500;
}

body > header nav a       { color: var(--color-content-muted); }
body > header nav a:hover { color: var(--color-brand-0); }

/********************************* Period filter ******************************/
/* Everything lives inside <details id="period_filter"> in body > header.    */
/* <summary> is the pill.  The panel uses position:fixed so it escapes the   */
/* header grid row and paints above all other content.                       */

/* ── <details> container ──────────────────────────────────────────────────── */
/* No position:relative here — the panel's containing block must be the      */
/* header (body > header, which has position:relative), not the <details>.   */
/* This lets position:absolute on the panel escape the ::details-content     */
/* containment slot that modern browsers use internally.                      */
#period_filter {
  flex-shrink: 0;
}

/* ── Summary / pill ───────────────────────────────────────────────────────── */
#period_filter summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border: 1.5px solid var(--color-separators);
  border-radius: 99px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-content-muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
  white-space: nowrap;
  background: var(--color-surface-1);
  transition: border-color 0.15s, color 0.15s, background 0.15s,
              border-radius 0.15s;
}

#period_filter summary::-webkit-details-marker { display: none; }

#period_filter summary .pf_dates {
  display: flex;
  align-items: center;
  gap: 5px;
}

#period_filter summary .pf_dates span { opacity: 0.5; }

#period_filter summary .pf_chevron {
  font-size: 0.7rem;
  display: inline-block;
  opacity: 0.6;
  transition: transform 0.2s ease;
}

#period_filter summary:hover {
  border-color: var(--color-brand-1);
  color: var(--color-brand-1);
  background: var(--color-surface-2);
}

/* Open state — pill becomes a flat-bottomed tab that connects to the panel.  */
/* border-bottom-color matches the panel background so the seam disappears.   */
#period_filter[open] summary {
  position: relative;
  z-index: 9999;
  border-color: var(--color-brand-0);
  border-bottom-color: var(--color-surface-2);
  color: var(--color-brand-0);
  background: var(--color-surface-2);
  border-radius: 8px 8px 0 0;
}

#period_filter[open] summary .pf_chevron {
  transform: rotate(180deg);
  opacity: 0.9;
}

/* ── Dropdown panel ───────────────────────────────────────────────────────── */
/* position:absolute escapes the details content slot.  top:60px is a fixed  */
/* value (= header height) because top:100% would resolve against the        */
/* ::details-content containing block, not the header.                       */
/* left:0 + right:0 spans the full header width.  The header has             */
/* overflow:visible and z-index:10, so the panel paints above <main>.        */
#period_filter_panel {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  z-index: 9998;
  background: var(--color-surface-2);
  border-top:    2px solid var(--color-brand-0);
  border-bottom: 2px solid var(--color-brand-0);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 12px 24px;
}

/* ── Chips inside the panel ───────────────────────────────────────────────── */
#pf_chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.pf_chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 16px;
  border-radius: 99px;
  border: 1.5px solid var(--color-separators);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-content-muted);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.pf_chip:hover {
  border-color: var(--color-brand-1);
  color: var(--color-brand-1);
  text-decoration: none;
}

.pf_chip:has(input:checked) {
  background: var(--color-brand-0);
  border-color: var(--color-brand-0);
  color: #fff;
  font-weight: 600;
}

.pf_chip input[type=radio] { display: none; }

.pf_chip_clear {
  margin-left: 6px;
  border-style: dashed;
  color: var(--color-content-muted);
  opacity: 0.75;
}

.pf_chip_clear:hover {
  opacity: 1;
  border-color: var(--color-accent-2);
  color: var(--color-accent-2);
}

/* Hide the hidden period inputs — visually irrelevant */
#period_filter_panel input[type=hidden] { display: none; }

/* ── Mobile (≤768px): pill collapses to calendar icon ────────────────────── */
@media (max-width: 768px) {
  #period_filter summary {
    padding: 5px 10px;
    gap: 4px;
  }

  #period_filter summary .pf_dates { display: none; }

  #period_filter summary::before {
    content: "📅";
    font-size: 1rem;
    line-height: 1;
  }

  #period_filter_panel {
    top: 42px;
    left: 0;
    right: 0;
  }
}

/********************************* Sidebar nav ********************************/
body > nav:not(#mobile_actions) {
  grid-area: nav;
  background: var(--color-brand-0);
  border-right: none;
  display: flex;
  flex-direction: column;

  /* Stick the sidebar to the viewport so it never scrolls away.
     height: 100vh + overflow-y: auto lets the nav scroll independently
     if its own content is taller than the screen (unlikely but safe). */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

/* Logo link */
body > nav > a {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  padding: 0 20px;
  background: rgba(0, 0, 0, 0.15);
  color: var(--color-surface-2);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

body > nav > a:hover {
  background: rgba(0, 0, 0, 0.2);
  color: var(--color-surface-2);
}

body > nav > a span:not(.label) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--color-brand-2);
  color: var(--color-brand-0);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

/* Nav sections */
body > nav section {
  padding: 16px 0 4px;
}

/* Section label row — flex so toggle button sits inline */
body > nav section h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* 0.76 alpha = 5.23:1 contrast on brand-0 sidebar — passes AA */
  color: rgba(255,255,255,0.76);
  white-space: nowrap;
  overflow: hidden;
}

/* Toggle button inside first section's <h2> */
body > nav section h2 button {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 4px;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  line-height: 1;
  font-size: 0; /* hide raw text; icon rendered via ::before */
  transition: background 0.15s;
}

body > nav section h2 button:hover { background: rgba(255,255,255,0.18); }

body > nav section h2 button::before          { content: '→'; font-size: 0.9rem; }
body.nav_open nav section h2 button::before   { content: '←'; font-size: 0.9rem; }
body.nav_open nav section h2                  { justify-content: space-between; }
body.nav_open nav section h2 button           { order: 1; }

/* Nav links — white at full opacity = 7.68:1 on sidebar bg; meets AAA */
body > nav section ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  border-left: 3px solid transparent;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.4;
}

body > nav section ul li a span {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1;
  width: 20px;
  text-align: center;
}

/* Collapsed state — remove labels from flow so justify-content: center
   works on the icon alone. Vertical spacing (padding) is kept intact. */
body:not(.nav_open) > nav .label { display: none; }

body:not(.nav_open) > nav > a              { justify-content: center; padding: 0; }
body:not(.nav_open) > nav section h2       { justify-content: center; padding: 4px 0; }
body:not(.nav_open) > nav section ul li a  { justify-content: center; padding: 8px 0; }

body > nav section ul li a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-surface-2);
  text-decoration: none;
}

body > nav section ul li.active a {
  border-left-color: var(--color-brand-2);
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-surface-2);
  font-weight: 600;
}

/* No ::after bleed needed since the sidebar is now fully dark */
body > nav section ul li.active {
  position: relative;
}

/* ── Nav badges ─────────────────────────────────────────────────────── */
.nav_badge {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 1.6em;
  padding: 2px 0;
  border-radius: 99px;
  line-height: 1.4;
  text-align: center;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.nav_badge[data-type="error"] {
  background: var(--color-accent-2);
}

body:not(.nav_open) > nav .nav_badge { display: none; }

/********************************* Main ***************************************/
main {
  grid-area: main;
  padding: 16px;
  overflow-y: auto;
  background: var(--color-surface-0);

  /* Stack every direct child — sections, kpi rows, content grids, etc. —
     with consistent vertical spacing. New boxes get the gap for free. */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Any wrapper element inside main that directly contains sections (e.g. the
   left column of a two-panel layout) inherits the same vertical rhythm.
   Specificity 0,0,3 — safely overridden by any class-based layout rule. */
main :is(div, article):has(> section) {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

main > header {
  all: unset;
    display: flex;
    align-items: baseline;
    gap: 16px;
  }

main > header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-content);
}

main > header span {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-content-muted);
}

/* When the subtitle is a badge, size it to match the header scale */
main > header span .badge {
  font-size: 0.8rem;
}

/********************************* Flash **************************************/
#flash {
  border: none;
  background: transparent;
  border-radius: 0;
}

#flash p {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 8px;
  padding: 13px 44px 13px 16px;
  border-radius: 6px;
  border: 1px solid;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
}

#flash p::before {
  flex-shrink: 0;
  font-size: 1.1rem;
  line-height: 1.3;
}

/* Alert — red */
#flash_alert {
  background: #FDF3F2;
  border-color: var(--color-accent-2);
  color: var(--color-accent-2);
}

#flash_alert::before { content: '⛔'; }

/* Notice — green */
#flash_notice {
  background: #F2F9E8;
  border-color: var(--color-brand-0);
  color: var(--color-brand-0);
}

#flash_notice::before { content: '✅'; }

/* Close button */
#flash p button {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.5;
  color: inherit;
  padding: 2px 4px;
  border-radius: 3px;
}

#flash p button:hover { opacity: 1; background: rgba(0,0,0,0.06); }

/********************************* Forms **************************************/
form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

fieldset {
  border: 1px solid var(--color-separators);
  border-radius: 6px;
  padding: 20px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

legend {
  padding: 0 6px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-content-muted);
}

label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-content);
}

input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
  width: 100%;
  padding: 8px 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-separators);
  border-radius: 5px;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--color-content);
  transition: border-color 0.15s, box-shadow 0.15s;
}

input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-brand-1);
  box-shadow: 0 0 0 3px rgba(90, 128, 24, 0.14);
}

input::placeholder,
textarea::placeholder { color: var(--color-content-muted); opacity: 1; }

textarea { resize: vertical; min-height: 90px; }

select { cursor: pointer; }

/* Password toggler — eye icon floated inside the right edge of the input.
   The JS wraps input[data-toggle] + span.password_toggler in div.input_wrapper. */
.input_wrapper {
  position: relative;
  display: block;
}

.input_wrapper input[data-toggle] {
  padding-right: 44px; /* leave room for the icon */
}

.password_toggler {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  color: var(--color-content-muted);
  user-select: none;
  transition: color 0.15s;
}

.password_toggler:hover { color: var(--color-content); }

/* "Slash" overlay drawn on top of the eye when the password is visible.
   The span is already position:absolute, so ::after is placed relative to it. */
.password_toggler.visible {
  color: var(--color-content);
}

.password_toggler.visible::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 10%;
  width: 2px;
  height: 80%;
  background: currentColor;
  border-radius: 1px;
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}

/* Inline checkbox / radio rows */
label:has(input[type="checkbox"]),
label:has(input[type="radio"]) {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-brand-1);
  flex-shrink: 0;
}

/* All form buttons — secondary style by default */
form input[type="submit"],
form button {
  align-self: flex-start;
  padding: 9px 22px;
  border-radius: 5px;
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  background: transparent;
  border: 1.5px solid var(--color-brand-0);
  color: var(--color-brand-0);
}

form input[type="submit"]:hover,
form button:hover {
  background: color-mix(in srgb, var(--color-brand-2) 30%, transparent);
}

/* Last button — primary style */
form input[type="submit"]:last-child,
form button:last-child {
  background: var(--color-brand-0);
  border-color: var(--color-brand-0);
  color: var(--color-surface-2);
}

form input[type="submit"]:last-child:hover,
form button:last-child:hover {
  background: var(--color-brand-1);
  border-color: var(--color-brand-1);
}

/* Hint text beneath a field */
label small {
  display: block;
  margin-top: 4px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-content-muted);
}

/* Required field indicator — auto-added by InputTagsReflectValidationFromModel */
label.required::after {
  content: ' *';
  color: var(--color-accent-2);
  font-weight: 700;
}

/* Base-error summary — rendered by FormHelperWithBaseErrors BEFORE the <form> tag.
   Only errors.add(:base, …) appear here. */
#error_explanation {
  background: color-mix(in srgb, var(--color-accent-2) 8%, var(--color-surface-2));
  border: 1px solid var(--color-accent-2);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

#error_explanation ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#error_explanation li.error {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-accent-2);
}

#error_explanation li.error::before {
  content: '•';
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1;
}

/* Field-level errors — custom field_error_proc wraps each errored input in
   .field_with_errors and appends a <span class="error_message"> below it.
   Labels are returned unchanged (not wrapped), so use :has() to colour them. */
label:has(+ .field_with_errors) { color: var(--color-accent-2); }

.field_with_errors input,
.field_with_errors select,
.field_with_errors textarea {
  border-color: var(--color-accent-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-2) 12%, transparent);
}

span.error_message {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-accent-2);
  margin-top: 4px;
}

/********************************* Cards **************************************/
main section {
  background: var(--color-surface-2);
  border: 1px solid var(--color-separators);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

main section > header {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--color-surface-1);
  border-bottom: 1px solid var(--color-separators);
}

main section > header h2 {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-content);
}

main section > header a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-brand-1);
}

main section > header a:hover { color: var(--color-brand-0); }

/********************************* KPI row ************************************/
.kpi_row {
  display: grid;
  gri display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.kpi_row article {
  background: var(--color-surface-2);
  border: 1px solid var(--color-separators);
  border-radius: 8px;
  padding: 20px 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.kpi_row article p:first-child {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-content-muted);
  margin-bottom: 10px;
}

.kpi_row article p:last-child {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-content);
}

.kpi_row article:nth-child(1) { border-top: 3px solid var(--color-brand-0); }
.kpi_row article:nth-child(2) { border-top: 3px solid var(--color-brand-1); }
.kpi_row article:nth-child(3) { border-top: 3px solid var(--color-brand-2); }
.kpi_row article:nth-child(4) { border-top: 3px solid var(--color-accent-0); }

/********************************* Content grid *******************************/
.content_grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 16px;
  align-items: start;
}

.content_grid > aside {
  grid-row: 1 / span 2;
  grid-column: 2;
}

#page_overrides .swatches {
  grid-template-columns: 1fr;
}

#page_overrides .swatches span {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  text-align: center;
  padding: 0 16px;
}

/********************************* Table **************************************/
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

thead th {
  padding: 10px 20px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-content-muted);
  background: var(--color-surface-1);
  border-bottom: 1px solid var(--color-separators);
}

tbody tr td {
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-separators);
  color: var(--color-content);
  font-size: 0.9375rem;
  line-height: 1.5;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td      { background: var(--color-surface-0); }

/********************************* Badges *************************************/
td span {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
}

/* All badge backgrounds + text pairs pass WCAG AA ≥4.5:1 */
td span[data-status="ok"]      { background: var(--color-badge-ok-bg);      color: var(--color-badge-ok-text);      }
td span[data-status="pending"] { background: var(--color-badge-pending-bg); color: var(--color-badge-pending-text); }
td span[data-status="error"]   { background: #FCEAE8;                       color: var(--color-accent-2);           }

/* Reusable badge — works anywhere (td, div, span).
   Use data-status for semantic colour; default is neutral.                   */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  background: var(--color-badge-pending-bg);   /* neutral default — 6.41:1 with pending-text */
  color: var(--color-badge-pending-text);
}

.badge[data-status="ok"]      { background: var(--color-badge-ok-bg);      color: var(--color-badge-ok-text);      }
.badge[data-status="pending"] { background: var(--color-badge-pending-bg); color: var(--color-badge-pending-text); }
.badge[data-status="error"]   { background: #FCEAE8;                       color: var(--color-accent-2);           }

/* Expenditure source badges — contrast verified:
   receipt: brand-ok pair  5.04:1 ✅ AA
   manual:  brand-pending  6.41:1 ✅ AA
   mixed:   #3A5F7F/#D6E4F0 6.99:1 ✅ AA                                   */
.badge[data-source="receipt"] { background: var(--color-badge-ok-bg);      color: var(--color-badge-ok-text);      }
.badge[data-source="manual"]  { background: var(--color-badge-pending-bg); color: var(--color-badge-pending-text); }
.badge[data-source="mixed"]   { background: #D6E4F0;                       color: #3A5F7F;                         }

/* Receipt allocation status badges — contrast verified:
   full:    brand-ok pair    5.04:1 ✅ AA
   partial: brand-pending    6.41:1 ✅ AA
   none:    #7A4F1E/#FAF0E6  5.12:1 ✅ AA (warm amber — signals action needed) */
.badge[data-allocation="full"]    { background: var(--color-badge-ok-bg);      color: var(--color-badge-ok-text);      }
.badge[data-allocation="partial"] { background: var(--color-badge-pending-bg); color: var(--color-badge-pending-text); }
.badge[data-allocation="none"]    { background: #FAF0E6;                        color: #7A4F1E;                         }

/********************************* Link-as-button *****************************/
/* .button and .button.secondary let link_to render as a primary/secondary    *
 * button without being inside a <form>. Same sizing as form buttons.         */
a.button {
  display: inline-block;
  padding: 9px 22px;
  border-radius: 5px;
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  background: var(--color-brand-0);
  border: 1.5px solid var(--color-brand-0);
  color: var(--color-surface-2);
}

a.button:hover {
  background: var(--color-brand-1);
  border-color: var(--color-brand-1);
  color: var(--color-surface-2);
  text-decoration: none;
}

a.button.secondary {
  background: transparent;
  border-color: var(--color-brand-0);
  color: var(--color-brand-0);
}

a.button.secondary:hover {
  background: color-mix(in srgb, var(--color-brand-2) 30%, transparent);
  color: var(--color-brand-0);
}

/********************************* Aside panels *******************************/
aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

aside > div:first-child {
  background: var(--color-brand-0);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

aside > div:first-child p:first-child {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-2);
  margin-bottom: 10px;
  opacity: 0.9;
}

aside > div:first-child p:nth-child(2) {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-surface-2);
  margin-bottom: 4px;
}

aside > div:first-child p:last-child {
  font-size: 0.8rem;
  color: var(--color-brand-2);
  opacity: 0.85;
}


/********************************* Button strip ********************************/
/* .actions is a flex strip of link_to / button_to actions.
   button_to wraps a <button> in a <form>; dissolve the form into the flex
   flow so it participates directly in the strip layout.                       */
.actions {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
}

/* button_to generates <form class="button_to"> — make it invisible in layout */
.actions form {
  display: contents;
}

/* Buttons inside .actions inherit a.button sizing; default = secondary style  */
.actions button {
  display: inline-block;
  padding: 9px 22px;
  border-radius: 5px;
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  background: transparent;
  border: 1.5px solid var(--color-brand-0);
  color: var(--color-brand-0);
}

.actions button:hover {
  background: color-mix(in srgb, var(--color-brand-2) 30%, transparent);
}

/********************************* Swatches ***********************************/
.swatches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 16px 20px;
}

.swatches span {
  display: block;
  height: 36px;
  border-radius: 4px;
  border: 1px solid var(--color-separators);
  position: relative;
}

.swatches span::after {
  content: attr(title);
  position: absolute;
  bottom: -18px;
  left: 0; right: 0;
  font-size: 0.6rem;
  color: var(--color-content-muted);
  text-align: center;
  white-space: nowrap;
}

.swatches_wrap { padding-bottom: 16px; }

/********************************* Quick actions (sidebar bottom strip) *******/
/* Pushed to the bottom of the sidebar via margin-top: auto on the section */
#quick_actions {
  margin-top: auto;
  padding: 12px 0 16px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

#quick_actions h2 {
  /* inherits the nav section h2 rule — just override padding slightly */
  padding-bottom: 8px;
}

/* Each quick-action item is a pill-shaped button, NOT a plain nav link */
#quick_actions ul li {
  padding: 3px 10px;
}

#quick_actions ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}

#quick_actions ul li a:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
  text-decoration: none;
}

#quick_actions ul li a span:first-child {
  flex-shrink: 0;
  font-size: 1.15rem;
  line-height: 1;
  width: 20px;
  text-align: center;
  /* Boost dark-palette emoji (e.g. 🔍) so they read clearly on the dark
     sidebar background. filter: brightness does not affect text-colour
     emoji — it only lightens raster/dark-palette glyphs. */
  filter: brightness(1.6);
}

/* Collapsed nav — centre the icon, hide the label, keep the pill outline */
body:not(.nav_open) #quick_actions ul li {
  padding: 3px 6px;
}

body:not(.nav_open) #quick_actions ul li a {
  justify-content: center;
  padding: 9px 0;
  border-radius: 8px;
}

/********************************* Mobile action bar **************************/
#mobile_actions { display: none; }

/********************************* Responsive *********************************/
/* Desktop-first: base styles target ≥1280px. Queries narrow for smaller viewports. */

/* Large desktops and below — ≤1280px */
@media (max-width: 1280px) {
}

/* Laptops and below — ≤1024px */
@media (max-width: 1024px) {
  .content_grid { grid-template-columns: 1fr; }

  /* Reset explicit grid placement so the aside flows below the sections. */
  .content_grid > aside {
    grid-column: auto;
    grid-row: auto;
  }

}

/* Tablets and below — ≤768px */
@media (max-width: 768px) {
  .kpi_row { grid-template-columns: repeat(2, 1fr); }
  .kpi_row article { padding: 14px 16px; }
  .kpi_row article p:last-child { font-size: 1.4rem; }

  /* #mobile_actions replaces the sidebar quick actions on small screens */
  #quick_actions { display: none; }

  #mobile_actions {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--color-surface-2);
    border-top: 1px solid var(--color-separators);
    box-shadow: 0 -2px 8px 0 var(--color-separators);
    z-index: 100;
  }

  #mobile_actions a {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-content-muted);
    white-space: nowrap;
  }

  #mobile_actions a:hover,
  #mobile_actions a:first-child { color: var(--color-brand-0); }

  #mobile_actions a span { font-size: 1.1rem; line-height: 1; }

  main { padding-bottom: 80px; }
}

/* ── Category tree — shared depth indentation ──────────────────────────────── */
/* Any element with data-depth is indented by 1.25rem per level.              */
/* Used in: categories#index (.category_tree li) and ELI category checkboxes  */
/* (fieldset label) so both places stay consistent without extra classes.      */

[data-depth="0"] { padding-left: 0; }
[data-depth="1"] { padding-left: 1.25rem; }
[data-depth="2"] { padding-left: 2.5rem; }
[data-depth="3"] { padding-left: 3.75rem; }

/* Large phones and below — ≤480px */
@media (max-width: 480px) {
}

/* Small phones — ≤375px */
@media (max-width: 375px) {
}