/*
 * B&B Enterprise Solutions Invoice Generator — UI stylesheet.
 *
 * Single file by design (see docs/ui.md §6 for rationale). Organised
 * top-to-bottom as: design tokens, base reset, typography, layout
 * primitives, component classes (header, drawer, page, table, form,
 * button, modal, status, flash).
 */

/* ------------------------------------------------------------------ */
/* 1. Design tokens — :root (light) + [data-theme="dark"] override     */
/* ------------------------------------------------------------------ */

:root {
  /* Color tokens (semantic). See docs/ui.md §4. */
  --color-bg: #FFFFFF;
  --color-bg-subtle: #F5F5F5;
  --color-fg: #0A0A0A;
  --color-fg-muted: #6B6B6B;
  --color-fg-subtle: #999999;
  --color-border: #E5E5E5;
  --color-border-strong: #1A1A1A;
  --color-overlay: rgba(0, 0, 0, 0.4);

  /* Type scale. */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Spacing scale (multiples of 4px). */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Borders + radii. */
  --radius-sm: 2px;
  --radius-md: 4px;
  --border-width: 1px;

  /* Layout. */
  --content-max-width: 1200px;
  --header-height: 56px;

  /* Typography. */
  --font-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono:
    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0A0A0A;
    --color-bg-subtle: #1A1A1A;
    --color-fg: #F5F5F5;
    --color-fg-muted: #999999;
    --color-fg-subtle: #6B6B6B;
    --color-border: #2A2A2A;
    --color-border-strong: #E5E5E5;
    --color-overlay: rgba(0, 0, 0, 0.6);
  }
}

[data-theme="dark"] {
  --color-bg: #0A0A0A;
  --color-bg-subtle: #1A1A1A;
  --color-fg: #F5F5F5;
  --color-fg-muted: #999999;
  --color-fg-subtle: #6B6B6B;
  --color-border: #2A2A2A;
  --color-border-strong: #E5E5E5;
  --color-overlay: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] {
  --color-bg: #FFFFFF;
  --color-bg-subtle: #F5F5F5;
  --color-fg: #0A0A0A;
  --color-fg-muted: #6B6B6B;
  --color-fg-subtle: #999999;
  --color-border: #E5E5E5;
  --color-border-strong: #1A1A1A;
  --color-overlay: rgba(0, 0, 0, 0.4);
}

/* ------------------------------------------------------------------ */
/* 2. Font face — Inter self-hosted (woff2)                            */
/* ------------------------------------------------------------------ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/InterVariable.woff2") format("woff2-variations");
}

/* ------------------------------------------------------------------ */
/* 3. Reset / base                                                     */
/* ------------------------------------------------------------------ */

*, *::before, *::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--color-fg);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

input, select, textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-fg);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

[hidden] { display: none !important; }

/* Tabular figures everywhere numbers matter. */
.table,
.field__input[type="number"],
.field__input[type="text"][inputmode="decimal"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "cv11";
}

/* ------------------------------------------------------------------ */
/* 4. Layout primitives — header, main, drawer                         */
/* ------------------------------------------------------------------ */

.main {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
}

.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg);
  border-bottom: var(--border-width) solid var(--color-border);
}

.header__inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  height: var(--header-height);
  padding: 0 var(--space-6);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
}

/* Each top-level column is explicitly placed so that hiding .nav on
 * mobile (display: none) does NOT shift .chrome into the middle track
 * via auto-placement. Source order alone is not enough — auto-placement
 * fills the next available cell when an item is removed, which would
 * pull .chrome into column 2.
 */
.wordmark { grid-column: 1; }
.nav { grid-column: 2; justify-self: center; }
.chrome { grid-column: 3; justify-self: end; }

.wordmark {
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.wordmark:hover { text-decoration: none; }
.wordmark__short { display: none; }

.nav {
  display: flex;
  gap: var(--space-4);
}

.nav__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-fg-muted);
  padding: var(--space-2) 0;
}
.nav__link:hover {
  color: var(--color-fg);
  text-decoration: none;
}
.nav__link.is-active {
  color: var(--color-fg);
  border-bottom: 1px solid var(--color-fg);
}

.chrome {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.chrome__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: var(--space-2);
  color: var(--color-fg-muted);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.chrome__btn:hover { color: var(--color-fg); }

.chrome__user .icon { width: 20px; height: 20px; }

/* Theme-toggle icon visibility.
 *
 * The server cannot know the OS's prefers-color-scheme, so both icons
 * render in the HTML and CSS picks the one that matches the *effective*
 * rendered theme. Without this, a first-time anonymous visitor whose
 * OS is dark would see the moon icon (suggesting "click for dark")
 * while the page is already dark — wrong and confusing.
 *
 * Rules:
 *   - No [data-theme], OS light → show moon  (click → goes dark)
 *   - No [data-theme], OS dark  → show sun   (click → goes light)
 *   - [data-theme="light"]      → show moon  (click → goes dark)
 *   - [data-theme="dark"]       → show sun   (click → goes light)
 */
.icon--sun { display: none; }
.icon--moon { display: inline-block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .icon--sun { display: inline-block; }
  :root:not([data-theme]) .icon--moon { display: none; }
}

[data-theme="dark"] .icon--sun { display: inline-block; }
[data-theme="dark"] .icon--moon { display: none; }
[data-theme="light"] .icon--sun { display: none; }
[data-theme="light"] .icon--moon { display: inline-block; }

.chrome__menu {
  position: relative;
}
.chrome__menu > summary {
  list-style: none;
  cursor: pointer;
}
.chrome__menu > summary::-webkit-details-marker { display: none; }
.chrome__menu[open] > summary { color: var(--color-fg); }

.dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-1));
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  min-width: 160px;
  padding: var(--space-1) 0;
  box-shadow: 0 8px 24px var(--color-overlay);
  z-index: 20;
}
.dropdown--user { min-width: 240px; }

.dropdown__item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}
.dropdown__item:hover { background: var(--color-bg-subtle); }
.dropdown__item.is-active { font-weight: var(--weight-medium); }

.dropdown__meta {
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
}
.dropdown__meta-label {
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
}
.dropdown__meta-value {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  word-break: break-all;
}

.hamburger {
  display: none;
  background: transparent;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-lg);
  line-height: 1;
}

/* Hamburger icon swap. Both glyphs render in the DOM; CSS picks the
 * correct one based on the button's aria-expanded state (toggled by
 * app.js). Mirrors the same pattern as the theme-toggle sun/moon. */
.hamburger__icon--close { display: none; }
.hamburger[aria-expanded="true"] .hamburger__icon--open { display: none; }
.hamburger[aria-expanded="true"] .hamburger__icon--close { display: inline; }

.drawer {
  display: none;
  border-top: var(--border-width) solid var(--color-border);
  background: var(--color-bg);
  padding: var(--space-4) var(--space-6);
}
.drawer__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.drawer__divider {
  height: var(--border-width);
  background: var(--color-border);
  margin: var(--space-4) 0;
}
.drawer__link,
.drawer__item {
  display: block;
  background: transparent;
  border: none;
  padding: var(--space-2) 0;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  text-align: left;
  color: var(--color-fg-muted);
}
.drawer__link:hover,
.drawer__item:hover {
  color: var(--color-fg);
  text-decoration: none;
}
.drawer__link.is-active,
.drawer__item.is-active {
  color: var(--color-fg);
}
.drawer__meta {
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  margin-bottom: var(--space-2);
}

/* ------------------------------------------------------------------ */
/* 5. Page anatomy — title, breadcrumb, header                         */
/* ------------------------------------------------------------------ */

.page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.page__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: 1.25;
}

.page__subtitle {
  color: var(--color-fg-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

.breadcrumb {
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}
.breadcrumb a:hover { color: var(--color-fg); text-decoration: none; }

.meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: calc(var(--space-2) * -1) 0 0;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
}
.meta__row {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-xs);
}
.meta__row dt {
  color: var(--color-fg-muted);
  font-weight: var(--weight-medium);
  min-width: 140px;
}
.meta__row dd {
  margin: 0;
  color: var(--color-fg);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.placeholder {
  padding: var(--space-8);
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-fg-muted);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

/* ------------------------------------------------------------------ */
/* 6. Tables                                                           */
/* ------------------------------------------------------------------ */

.table-wrap { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table thead th {
  background: var(--color-bg-subtle);
  text-align: left;
  font-weight: var(--weight-semibold);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
}

.table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
}

.table tbody tr:hover { background: var(--color-bg-subtle); }

.table .row--muted td { color: var(--color-fg-muted); }

.link {
  color: var(--color-fg);
  text-decoration: underline;
}
.link--button {
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* 7. Forms                                                            */
/* ------------------------------------------------------------------ */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.form--narrow { max-width: 480px; }

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.field__input {
  background: var(--color-bg);
  color: var(--color-fg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  transition: border-color 120ms ease;
}
.field__input:hover { border-color: var(--color-fg-muted); }
.field__input::placeholder { color: var(--color-fg-subtle); }

.field__hint {
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
}

.field__readonly {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  letter-spacing: 0.05em;
  color: var(--color-fg);
}

.field--inline { gap: var(--space-1); }

.field__inline-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.field__inline-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-fg);
}

.field__error {
  font-size: var(--text-xs);
  color: var(--color-fg);
  font-weight: var(--weight-semibold);
}

.form__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-6);
  align-items: center;
}

/* Separates the destructive Delete action from Save/Cancel by pushing
   it to the right of the row. The spacer is an empty span that flex
   grows to fill remaining horizontal space. */
.form__actions-spacer { flex: 1; }

/* Strips the browser's default fieldset chrome (border + margin +
   padding) so a <fieldset disabled> wrap stays invisible. Used to
   cascade `disabled` to every form control inside an edit page when
   the active user lacks permission to mutate — the native HTML
   mechanism does the heavy lifting; we just remove the visual default. */
.fieldset--bare {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0; /* override the fieldset's intrinsic min-width quirk */
}

.form-errors {
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-fg);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.form-errors--block { background: var(--color-bg-subtle); }
.form-errors__list { padding-left: var(--space-4); list-style: disc; font-weight: var(--weight-regular); }

/* ------------------------------------------------------------------ */
/* 8. Buttons                                                          */
/* ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
  border: var(--border-width) solid transparent;
  background: transparent;
  text-decoration: none;
  min-height: 36px;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.btn--primary {
  background: var(--color-fg);
  color: var(--color-bg);
  border-color: var(--color-fg);
}
.btn--primary:hover {
  text-decoration: none;
  filter: brightness(0.85);
}

.btn--secondary {
  background: transparent;
  color: var(--color-fg);
  border-color: var(--color-fg);
}
.btn--secondary:hover {
  background: var(--color-bg-subtle);
  text-decoration: none;
}

.btn--tertiary {
  background: transparent;
  color: var(--color-fg);
  border-color: transparent;
}
.btn--tertiary:hover { text-decoration: underline; }

.btn--block { width: 100%; }

/* ------------------------------------------------------------------ */
/* 9. Status indicators                                                */
/* ------------------------------------------------------------------ */

.status {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.status--muted { color: var(--color-fg-muted); }
.status--strong { color: var(--color-fg); }

/* ------------------------------------------------------------------ */
/* 10. Flash messages                                                  */
/* ------------------------------------------------------------------ */

.flash {
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}
.flash--error {
  border-color: var(--color-fg);
  font-weight: var(--weight-semibold);
}

/* ------------------------------------------------------------------ */
/* 11. Modal                                                           */
/* ------------------------------------------------------------------ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal {
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  max-width: 480px;
  width: calc(100% - var(--space-8));
  box-shadow: 0 12px 32px var(--color-overlay);
}

.modal__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-3);
}

.modal__body {
  color: var(--color-fg);
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
}

.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* ------------------------------------------------------------------ */
/* 12. Login                                                           */
/* ------------------------------------------------------------------ */

.login-shell {
  min-height: calc(100vh - var(--space-16));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
}

.login-card {
  width: 100%;
  max-width: 400px;
  padding: var(--space-8);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.login-card__wordmark {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.login-card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-fg-muted);
}

/* ------------------------------------------------------------------ */
/* 12b. Setup cards + list filters + dynamic-row catalogue             */
/* ------------------------------------------------------------------ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* The picker's <form class="card-form"> wraps each <button class="card">
   per project so CSRF + project_id ride along with the click. Without
   display:contents the form would be the grid item, the button would
   shrink to its intrinsic width, and a few projects would scatter into
   pockets of empty space across the row. display:contents lets the
   button inherit the grid slot directly. */
.card-form { display: contents; }

/* The picker's card is a <button>, not an <a>. Reset the browser
   button defaults (centred text, system font, transparent background)
   so it visually matches the anchor-driven cards on /setup. */
.card--button {
  width: 100%;
  text-align: left;
  background: var(--color-bg);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

a.card--button:hover,
button.card--button:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-strong);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-fg);
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}

a.card:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-strong);
}

.card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin: 0;
}

.card__body {
  margin: 0;
  color: var(--color-fg-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.card__cta {
  margin-top: auto;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.card--disabled {
  color: var(--color-fg-muted);
  cursor: not-allowed;
}

.card--disabled .card__title { color: var(--color-fg-muted); }

.card__badge {
  margin-top: auto;
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.filters {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.filters__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.filters__input {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-fg);
}

.form__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0 var(--space-4);
}

.form__section-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-4);
}

.form__section-help {
  color: var(--color-fg-muted);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-4);
}

/* Form section panels (zebra). Each multi-section form/view page
 * wraps its logical sections in a .form-section, alternating with
 * .form-section--tinted. Plain sections merge with the page bg;
 * tinted sections use --color-bg-subtle. No borders, no shadows. */
.form-section {
  padding: var(--space-6);
  border-radius: var(--radius-sm);
  margin-top: var(--space-4);
}
.form-section:first-of-type { margin-top: 0; }
.form-section--tinted { background: var(--color-bg-subtle); }

.form-section__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-3);
}

.form-section__help {
  color: var(--color-fg-muted);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-4);
}

.btn--icon {
  padding: var(--space-1) var(--space-2);
  min-width: 32px;
  font-size: var(--text-lg);
  line-height: 1;
}

.table--rows tbody td { padding: var(--space-2); vertical-align: middle; }
.table--rows .field__input { min-width: 0; width: 100%; }

/* Upload affordance on per-kind invoice form pages (spec-010).
 * The outer gap (.upload-actions) separates the Download CTA
 * from the Upload form as two distinct controls; the inner gap
 * (.upload-form) keeps the file input + submit button visually
 * grouped. Wraps to two lines at narrow widths. */
.upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
}
.upload-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin: 0;
}
.upload-form__file { flex: 1 1 36ch; min-width: 28ch; }

/* ------------------------------------------------------------------ */
/* 13. Accessibility — honour OS-level reduce-motion                   */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .btn,
  .field__input,
  .card {
    transition: none;
  }
}

/* ------------------------------------------------------------------ */
/* 14. Responsive — hamburger drawer below 640px                       */
/* ------------------------------------------------------------------ */

@media (max-width: 640px) {
  .nav,
  .chrome > form,
  .chrome > details {
    display: none;
  }
  .hamburger { display: inline-flex; }
  .drawer[data-open="true"] { display: block; }

  /* On narrow screens the full wordmark would crowd out the hamburger.
   * Swap to the short "B&B" form and hide the long span. */
  .wordmark__full { display: none; }
  .wordmark__short { display: inline; }

  .page__header {
    flex-direction: column;
    align-items: stretch;
  }
  .form__actions { flex-direction: column; }
  .form__actions .btn { width: 100%; }
}

/* ------------------------------------------------------------------ */
/* spec-011: invoice list — filter bar, sortable headers, page actions */
/* ------------------------------------------------------------------ */

.page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
  margin: var(--space-4) 0 var(--space-6);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.filter-bar__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 12ch;
}

.filter-bar__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.filter-bar__select,
.filter-bar__date {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-fg);
  min-height: 36px;
  min-width: 14ch;
}

.filter-bar__select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.filter-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.th-sort {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.th-sort:hover { text-decoration: underline; }

.sort-arrow {
  display: inline-block;
  margin-left: var(--space-1);
  color: var(--color-fg-muted);
  opacity: 0.55;
}

.sort-arrow--active {
  color: var(--color-fg);
  opacity: 1;
  font-weight: var(--weight-semibold);
}

/* ------------------------------------------------------------------ */
/* spec-016: audit attribution marker. Used inside .meta__row dd blocks*/
/* on edit pages and the invoice view when the actor is unknown        */
/* (pre-spec-016 row, CLI write, bootstrap admin).                     */
/* ------------------------------------------------------------------ */

.audit__unknown {
  color: var(--color-fg-muted);
  font-style: italic;
}

@media (max-width: 1023px) {
  .main { padding-left: var(--space-4); padding-right: var(--space-4); }
  .header__inner { padding-left: var(--space-4); padding-right: var(--space-4); }
}