/* ===========================================================================
   SpoonForm design system
   Design tokens, typography, and Bootstrap retheme. Loaded after Bootstrap
   so the variable overrides win.
   =========================================================================== */

/* ---------------- Web fonts (self-hosted WOFF2) ---------------------------- */
/* Two-tier font system:
     UI  (everything operational) → Inter. Designed for screens and data UIs;
                                    tall x-height, tabular numerals, open
                                    apertures, legible at 13-16px.
     DISPLAY (brand moments)      → Archer. The licensed ASF slab serif kept
                                    for the anon landing, home-page greetings,
                                    pull quotes, and PDF headers.
   Verlag is intentionally NOT loaded here — it's too decorative for
   dense production screens. The OTFs remain in the repo and can be used
   on explicitly marketing-facing surfaces via .asf-wordmark if needed. */
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter/Inter-Regular.da03732a27e1.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter/Inter-Italic.abfa19127a95.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter/Inter-Medium.51205681a1ba.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter/Inter-MediumItalic.fa1a5bb7f812.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter/Inter-SemiBold.2ede57db1a3a.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter/Inter-SemiBoldItalic.3f2dd8a51d91.woff2") format("woff2");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter/Inter-Bold.8ca0a5155296.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter/Inter-BoldItalic.a58822891829.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* Archer — slab serif for titles, pull-quotes, brand moments. */
@font-face {
  font-family: "Archer";
  src: url("/static/fonts/asf/Archer-Book-Pro.ca40882ddefc.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archer";
  src: url("/static/fonts/asf/Archer-Semibold-Pro.b1eb5f827251.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archer";
  src: url("/static/fonts/asf/Archer-Bold-Pro.fdbd422028e8.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------------- Design tokens -------------------------------------------- */
:root {
  /* Core palette — warm, pantry-like, American-Spoon-aligned */
  --asf-cream-50:  #fcfbf7;
  --asf-cream-100: #f8f4ea;
  --asf-cream-200: #f1ead6;
  --asf-cream-300: #e6ddc4;
  --asf-cream-400: #d9cfa8;
  --asf-cream-500: #c9ba85;

  --asf-copper-300: #d5a667;
  --asf-copper-500: #b98a3c;   /* brand accent — borders, primary ghosts */
  --asf-copper-600: #9b7128;
  --asf-copper-700: #7c5712;

  --asf-ink-900: #2b2010;       /* body text */
  --asf-ink-700: #4a3a20;       /* secondary body */
  --asf-ink-600: #5a4320;       /* headings labels */
  --asf-ink-500: #6b5736;       /* muted labels */
  --asf-ink-400: #8c7749;       /* captions, empty-state text */

  --asf-berry-500: #8a3a1a;     /* "hot" actions, notices */
  --asf-berry-600: #6f2c12;

  --asf-green-500: #3f6126;     /* success states */
  --asf-amber-500: #c68a1a;     /* warn states */
  --asf-rose-500: #9b2f2f;      /* error states */

  --asf-bg: var(--asf-cream-50);
  --asf-surface: #ffffff;
  --asf-surface-soft: #faf7ef;
  --asf-border: var(--asf-cream-300);
  --asf-border-soft: var(--asf-cream-200);

  /* Typography */
  --asf-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                   Roboto, "Helvetica Neue", Arial, sans-serif;
  --asf-font-display: "Archer", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --asf-font-mono: "SF Mono", Menlo, Consolas, "Courier New", monospace;

  --asf-fs-xs: 0.78rem;
  --asf-fs-sm: 0.88rem;
  --asf-fs-base: 1rem;
  --asf-fs-lg: 1.125rem;
  --asf-fs-xl: 1.4rem;
  --asf-fs-2xl: 1.75rem;
  --asf-fs-3xl: 2.25rem;

  /* Radius */
  --asf-radius-sm: 4px;
  --asf-radius: 6px;
  --asf-radius-lg: 10px;

  /* Shadows */
  --asf-shadow-xs: 0 1px 2px rgba(70, 50, 10, 0.06);
  --asf-shadow-sm: 0 1px 3px rgba(70, 50, 10, 0.08);
  --asf-shadow:    0 3px 10px rgba(70, 50, 10, 0.10);
  --asf-shadow-lg: 0 10px 30px rgba(70, 50, 10, 0.15);

  /* Spacing (we still use Bootstrap spacing for grids; these exist for custom) */
  --asf-space-1: 0.25rem;
  --asf-space-2: 0.5rem;
  --asf-space-3: 0.75rem;
  --asf-space-4: 1rem;
  --asf-space-5: 1.5rem;
  --asf-space-6: 2rem;

  /* Bootstrap variable overrides (CSS vars that Bootstrap 5 reads directly) */
  --bs-body-font-family: var(--asf-font-body);
  --bs-body-font-size: 1rem;
  --bs-body-color: var(--asf-ink-900);
  --bs-body-bg: var(--asf-bg);
  --bs-border-color: var(--asf-border);
  --bs-border-radius: var(--asf-radius);
  --bs-border-radius-sm: var(--asf-radius-sm);
  --bs-border-radius-lg: var(--asf-radius-lg);
  --bs-primary: var(--asf-copper-600);
  --bs-primary-rgb: 155, 113, 40;
  --bs-success: var(--asf-green-500);
  --bs-danger:  var(--asf-rose-500);
  --bs-warning: var(--asf-amber-500);
  --bs-info:    var(--asf-copper-500);
  --bs-link-color: var(--asf-berry-500);
  --bs-link-hover-color: var(--asf-berry-600);
  --bs-heading-color: var(--asf-ink-900);
}

/* ---------------- Base document ------------------------------------------- */
html, body {
  background: var(--asf-bg);
}
body {
  font-family: var(--asf-font-body);
  color: var(--asf-ink-900);
  font-size: 0.95rem;          /* Inter x-height runs a notch taller than Verlag */
  line-height: 1.5;
  /* Inter OpenType features: contextual alternates + kerning + ligatures +
     calibrated letter-spacing ("cv11"), plus tabular numerals everywhere
     numbers are dense. Flipped off case-sensitive forms to keep em-dashes
     from growing. */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "cv11" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Numeric cells + counters + code column in tables get tabular figures so
   things line up column-by-column. */
.table, .num, .po-counter .num, .lowinv-qty, .run-time, .appr-ponum,
[class*="tabular"], .font-monospace, code {
  font-variant-numeric: tabular-nums;
}

/* Headings — Archer for display sizes, Verlag-bold for smaller ones */
h1, .h1, h2, .h2 {
  font-family: var(--asf-font-display);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--asf-ink-900);
}
h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--asf-font-body);
  font-weight: 700;
  color: var(--asf-ink-900);
}
h1, .h1 { font-size: var(--asf-fs-3xl); }
h2, .h2 { font-size: var(--asf-fs-2xl); }
h3, .h3 { font-size: var(--asf-fs-xl); }

/* Utility: display font for the handful of places that want big serif */
.asf-display { font-family: var(--asf-font-display); font-weight: 600; }

/* Utility: uppercase small-tracked labels for section heads, meta labels, etc. */
.label-caps {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--asf-ink-600);
}

/* ---------------- Links ---------------------------------------------------- */
a { color: var(--asf-berry-500); text-decoration-color: rgba(138, 58, 26, 0.35); }
a:hover { color: var(--asf-berry-600); }

/* ---------------- Buttons -------------------------------------------------- */
/*
 * BUTTON DOCTRINE
 * ---------------
 * One screen, one primary action. Pick the single most-likely thing the
 * user came here to do and make IT the btn-primary. Everything else is
 * secondary.
 *
 *   btn-primary              The next-step action. One per page, period.
 *                            (On lists: "New X". On a PO in RECEIVED: "Approve".)
 *   btn-outline-secondary    Neutral navigation + secondary actions
 *                            (Back, Print, Revise, Email me a copy, ...)
 *   btn-outline-danger       Destructive but low-chance (Delete, Cancel Line).
 *   btn-danger               Destructive and the primary intent of the page
 *                            (a Confirm-Delete page's "Yes, delete" button).
 *   btn-success              Generally avoid. Reserve for confirmation
 *                            actions like "Mark complete" if neutral outline
 *                            feels too quiet.
 *   btn-warning / btn-info   Effectively banned. These screamed for attention
 *                            and created rainbow headers. Use outline-secondary
 *                            or a ⋯ dropdown for additional actions instead.
 *   btn-link                 Inline text-level actions ("Clear filters",
 *                            "Forgot password?"). Not a button visually.
 *
 * On any page with > 3 actions, group everything-but-the-primary into a
 * secondary cluster or a ⋯ dropdown. Row-level actions live in
 * .row-actions (primary-button + ⋯ dropdown). See list pages for the
 * canonical pattern.
 */
.btn {
  border-radius: var(--asf-radius);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding-block: 0.42rem;
  padding-inline: 0.95rem;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s,
              box-shadow 0.15s, transform 0.05s;
}
.btn:active { transform: translateY(1px); }
.btn-sm { font-size: 0.82rem; padding: 0.3rem 0.65rem; }
.btn-lg { font-size: 1.05rem; padding: 0.6rem 1.4rem; }

.btn-primary {
  --bs-btn-bg: var(--asf-copper-600);
  --bs-btn-border-color: var(--asf-copper-600);
  --bs-btn-hover-bg: var(--asf-copper-700);
  --bs-btn-hover-border-color: var(--asf-copper-700);
  --bs-btn-active-bg: var(--asf-copper-700);
  --bs-btn-active-border-color: var(--asf-copper-700);
  --bs-btn-disabled-bg: var(--asf-cream-400);
  --bs-btn-disabled-border-color: var(--asf-cream-400);
  color: #fff;
}
.btn-outline-primary {
  --bs-btn-color: var(--asf-copper-700);
  --bs-btn-border-color: var(--asf-copper-500);
  --bs-btn-hover-bg: var(--asf-copper-600);
  --bs-btn-hover-border-color: var(--asf-copper-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--asf-copper-700);
  --bs-btn-active-border-color: var(--asf-copper-700);
}
.btn-secondary {
  --bs-btn-bg: var(--asf-ink-700);
  --bs-btn-border-color: var(--asf-ink-700);
  --bs-btn-hover-bg: var(--asf-ink-900);
  --bs-btn-hover-border-color: var(--asf-ink-900);
  --bs-btn-active-bg: var(--asf-ink-900);
  color: #fff;
}
.btn-outline-secondary {
  --bs-btn-color: var(--asf-ink-700);
  --bs-btn-border-color: var(--asf-cream-400);
  --bs-btn-hover-bg: var(--asf-cream-200);
  --bs-btn-hover-color: var(--asf-ink-900);
  --bs-btn-hover-border-color: var(--asf-cream-500);
  --bs-btn-active-bg: var(--asf-cream-300);
  --bs-btn-active-color: var(--asf-ink-900);
}
.btn-success {
  --bs-btn-bg: var(--asf-green-500);
  --bs-btn-border-color: var(--asf-green-500);
  --bs-btn-hover-bg: #2f4a1c;
  --bs-btn-hover-border-color: #2f4a1c;
  color: #fff;
}
.btn-danger {
  --bs-btn-bg: var(--asf-rose-500);
  --bs-btn-border-color: var(--asf-rose-500);
  --bs-btn-hover-bg: #7a2424;
  --bs-btn-hover-border-color: #7a2424;
  color: #fff;
}
.btn-outline-danger {
  --bs-btn-color: var(--asf-rose-500);
  --bs-btn-border-color: #e0b6b6;
  --bs-btn-hover-bg: var(--asf-rose-500);
  --bs-btn-hover-color: #fff;
}
.btn-warning {
  --bs-btn-bg: var(--asf-amber-500);
  --bs-btn-border-color: var(--asf-amber-500);
  --bs-btn-hover-bg: #a1730a;
  --bs-btn-hover-border-color: #a1730a;
  color: #fff;
}
.btn-info {
  --bs-btn-bg: var(--asf-copper-500);
  --bs-btn-border-color: var(--asf-copper-500);
  --bs-btn-hover-bg: var(--asf-copper-600);
  --bs-btn-hover-border-color: var(--asf-copper-600);
  color: #fff;
}
.btn-outline-info {
  --bs-btn-color: var(--asf-copper-700);
  --bs-btn-border-color: var(--asf-copper-300);
  --bs-btn-hover-bg: var(--asf-copper-500);
  --bs-btn-hover-color: #fff;
}
.btn-link { color: var(--asf-berry-500); font-weight: 500; }
.btn-link:hover { color: var(--asf-berry-600); }
.btn-dark {
  --bs-btn-bg: var(--asf-ink-900);
  --bs-btn-border-color: var(--asf-ink-900);
  --bs-btn-hover-bg: #000;
  color: #fff;
}

/* ---------------- Navbar --------------------------------------------------- */
.asf-navbar,
.navbar.bg-dark {
  background: var(--asf-ink-900) !important;
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  min-height: 52px;
}
.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link {
  color: #f4eed8;
  font-weight: 500;
}

/* Brand: roundel + SpoonForm wordmark */
.asf-brand { padding-top: 0; padding-bottom: 0; }
.asf-brand-mark {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  padding: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.asf-brand-text {
  font-family: var(--asf-font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: #f9f2da;
  line-height: 1;
}

.navbar-dark .navbar-nav .nav-link {
  padding-inline: 0.8rem;
  font-size: 0.93rem;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus { color: var(--asf-copper-300); }

/* Active section — copper underline under the top-level item */
.navbar-dark .navbar-nav .nav-link.is-active {
  color: #fff;
  position: relative;
}
.navbar-dark .navbar-nav .nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0.6rem; right: 0.6rem; bottom: 0;
  height: 2px;
  background: var(--asf-copper-500);
  border-radius: 2px;
}

/* Nav dropdown items */
.navbar-dark .dropdown-menu {
  background: var(--asf-surface);
  border: 1px solid var(--asf-border);
  border-radius: var(--asf-radius);
  box-shadow: var(--asf-shadow);
  padding-block: 0.35rem;
  min-width: 240px;
}
.navbar-dark .dropdown-item {
  color: var(--asf-ink-900);
  font-size: 0.93rem;
  padding: 0.4rem 0.9rem;
}
.navbar-dark .dropdown-item i.bi {
  color: var(--asf-ink-500);
  width: 1.1em;
  text-align: center;
}
.navbar-dark .dropdown-item:hover,
.navbar-dark .dropdown-item:focus {
  background: var(--asf-cream-100);
  color: var(--asf-ink-900);
}
.navbar-dark .dropdown-item:hover i.bi,
.navbar-dark .dropdown-item:focus i.bi {
  color: var(--asf-copper-700);
}
.navbar-dark .dropdown-header {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--asf-ink-500);
  padding: 0.45rem 0.9rem 0.15rem;
  font-weight: 700;
}
.navbar-dark .dropdown-item.text-muted {
  color: var(--asf-ink-500) !important;
}
.navbar-dark .dropdown-item.text-muted:hover { color: var(--asf-ink-900) !important; }

/* Neutralize legacy colored menu items that still exist in other templates */
.navbar-dark .dropdown-item.text-success,
.navbar-dark .dropdown-item.text-primary {
  color: var(--asf-ink-900) !important;
}

.navbar-dark .dropdown-divider { border-color: var(--asf-border-soft); }

/* Help icon (right side) */
.asf-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  padding: 0.4rem 0.65rem !important;
  line-height: 1;
}
.asf-icon-link:hover { color: var(--asf-copper-300); }

/* User menu trigger (right side) */
.asf-user-menu {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.65rem !important;
}
.asf-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--asf-copper-600);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1;
}
.asf-user-name { font-size: 0.9rem; }
@media (max-width: 991px) {
  .asf-user-menu .asf-user-name { font-weight: 600; }
}

/* ---------------- Cards ---------------------------------------------------- */
.card {
  background: var(--asf-surface);
  border: 1px solid var(--asf-border);
  border-radius: var(--asf-radius);
  box-shadow: var(--asf-shadow-xs);
}
.card-header {
  background: var(--asf-surface-soft);
  border-bottom: 1px solid var(--asf-border-soft);
  font-weight: 600;
  color: var(--asf-ink-600);
  letter-spacing: 0.01em;
}
.card.shadow-sm { box-shadow: var(--asf-shadow-sm) !important; }

/* ---------------- Forms ---------------------------------------------------- */
.form-label {
  font-weight: 600;
  color: var(--asf-ink-700);
  font-size: 0.92rem;
  margin-bottom: 0.25rem;
}
.form-control, .form-select {
  border-color: var(--asf-cream-400);
  color: var(--asf-ink-900);
  background: var(--asf-surface);
  border-radius: var(--asf-radius);
}
.form-control:focus, .form-select:focus {
  border-color: var(--asf-copper-500);
  box-shadow: 0 0 0 0.2rem rgba(185, 138, 60, 0.22);
}
.form-control::placeholder { color: var(--asf-ink-400); }
.form-text { color: var(--asf-ink-500); }
.was-validated .form-control:valid,
.was-validated .form-select:valid { border-color: var(--asf-green-500); }

/* ---------------- Tables --------------------------------------------------- */
.table {
  --bs-table-color: var(--asf-ink-900);
  --bs-table-bg: var(--asf-surface);
  --bs-table-border-color: var(--asf-border-soft);
  --bs-table-striped-bg: var(--asf-cream-50);
  --bs-table-hover-bg: #f5ecd4;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--asf-ink-900);
  margin-bottom: 0;
}
/* Cell padding: 6px top/bottom, 10px left/right. Generous-but-not-airy. */
.table > :not(caption) > * > * {
  padding: 0.55rem 0.7rem;
  vertical-align: middle;
  border-bottom-color: var(--asf-border-soft);
}

/* Header row */
.table thead th {
  background: var(--asf-surface-soft);
  color: var(--asf-ink-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.78rem;
  font-weight: 700;
  border-bottom: 1px solid var(--asf-border);
  white-space: nowrap;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

/* Zebra stripe: Bootstrap applies it via :nth-of-type, we reinforce here
   for list_page tables that don't have .table-striped. */
.list-page-table-wrap .table > tbody > tr:nth-of-type(odd) > td {
  background: var(--asf-cream-50);
}
.list-page-table-wrap .table > tbody > tr:hover > td {
  background: #f3e9cc;
}

/* Cells that hold identifiers (codes, SKUs, PO #s) look tighter with a
   slightly monospace-feeling font. Opt-in via .cell-code. */
.cell-code {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
  letter-spacing: 0.02em;
}

/* Numeric column alignment helpers */
.table td.num, .table th.num,
.table td.text-end, .table th.text-end {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table-bordered { --bs-table-border-color: var(--asf-border); }

/* Density modifiers */
.table-compact > :not(caption) > * > * {
  padding: 0.32rem 0.55rem;
  font-size: 0.88rem;
}
.table-roomy > :not(caption) > * > * {
  padding: 0.8rem 0.85rem;
}

/* Row-action dropdowns inside a table shouldn't stretch the row height */
.table td .row-actions,
.table td .row-actions > * { line-height: 1; }

/* OPT-IN wide-table behavior. Keeps horizontal scroll only where the old
   base.html forced it — opt in with .data-table-wide. */
.table-responsive > table { min-width: 0; }
.table-responsive > table.data-table-wide { min-width: 1800px; }

/* OPT-IN sticky-header for non-wide tables that still want the header to
   stick while scrolling their page. Header stays put; no sticky columns. */
.table.data-table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--asf-surface-soft);
  box-shadow: inset 0 -1px 0 var(--asf-border);
}

/* Sticky first/second columns only on opt-in wide tables */
.data-table-wide thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--asf-surface-soft);
  box-shadow: inset 0 -1px 0 var(--asf-border);
}
.data-table-wide th:first-child,
.data-table-wide td:first-child {
  position: sticky;
  left: 0;
  min-width: 120px;
  max-width: 180px;
  background: var(--asf-surface);
  z-index: 11;
  border-right: 1px solid var(--asf-border-soft);
}
.data-table-wide th:nth-child(2),
.data-table-wide td:nth-child(2) {
  position: sticky;
  left: 120px;
  min-width: 200px;
  max-width: 260px;
  background: var(--asf-surface);
  z-index: 11;
  border-right: 1px solid var(--asf-border-soft);
}
/* Alternating stripe must also apply to the sticky columns,
   otherwise they visually "jump" against the stripe underneath. */
.data-table-wide > tbody > tr:nth-of-type(odd) > td:first-child,
.data-table-wide > tbody > tr:nth-of-type(odd) > td:nth-child(2) {
  background: var(--asf-cream-50);
}
.data-table-wide > tbody > tr:hover > td:first-child,
.data-table-wide > tbody > tr:hover > td:nth-child(2) {
  background: #f3e9cc;
}

/* Empty-value convenience: <td class="cell-empty"></td> renders a mdash */
.cell-empty::before {
  content: "—";
  color: var(--asf-ink-400);
}

/* ---------------- Mobile table + dashboard polish ------------------------- */
/*
 * Two tools for authors:
 *   - `.col-priority-2` / `.col-priority-3` on <th>/<td> cells hides that
 *     column at narrower viewports so the most-important data stays visible.
 *     Priority 2 hides below 768 px, priority 3 hides below 992 px.
 *   - `.table-stack-sm` flips the whole table into stacked label/value
 *     card rows below 576 px for tables that can't usefully scroll
 *     horizontally (details pages, receipt logs, etc.).
 */
@media (max-width: 991px) {
  .table .col-priority-3 { display: none; }
}
@media (max-width: 767px) {
  .table .col-priority-2 { display: none; }
}

/* Stacked-card fallback for small screens on opt-in tables */
@media (max-width: 575px) {
  .table.table-stack-sm thead { display: none; }
  .table.table-stack-sm,
  .table.table-stack-sm tbody,
  .table.table-stack-sm tr,
  .table.table-stack-sm td { display: block; width: 100%; }
  .table.table-stack-sm tr {
    margin-bottom: 0.75rem;
    border: 1px solid var(--asf-border);
    border-radius: var(--asf-radius);
    padding: 0.5rem 0.75rem;
    background: var(--asf-surface);
  }
  .table.table-stack-sm td {
    border: 0;
    border-bottom: 1px solid var(--asf-border-soft);
    padding: 0.4rem 0;
  }
  .table.table-stack-sm td:last-child { border-bottom: 0; }
  .table.table-stack-sm td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--asf-ink-500);
    font-size: 0.72rem;
    margin-bottom: 2px;
  }
}

/* List-page polish for narrow screens: give the filter bar more room to
   breathe and make the primary "New X" button full-width so thumbs can
   hit it without zooming. */
@media (max-width: 575px) {
  .list-page-head { flex-direction: column; align-items: stretch; }
  .list-page-actions { width: 100%; }
  .list-page-actions .btn-primary { width: 100%; }
  .list-filter-bar form { flex-direction: column; align-items: stretch; }
  .list-filter-bar .form-control,
  .list-filter-bar .form-select { max-width: 100%; }
  .row-actions-toggle { padding: 0.3rem 0.6rem; }
  .row-actions { gap: 0.2rem; }
}

/* Dashboard tweaks for narrow viewports: enforce comfortable tap targets
   on the shortcut tiles and keep the PO counter row readable. */
@media (max-width: 575px) {
  .dash-wrap { padding: 0.85rem 0.7rem 3rem; }
  .dash-greeting h1 { font-size: 1.15rem; }
  .dash-card .bd { padding: 0.85rem 0.9rem; }
  .po-counters { grid-template-columns: 1fr 1fr; gap: 0.4rem; }
  .po-counters .po-counter:nth-child(3) { grid-column: 1 / -1; }
  .po-counter { padding: 0.85rem; }
  .po-counter .num { font-size: 2.1rem; }
  .shortcuts-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem;
  }
  .shortcut-tile { min-height: 108px; padding: 0.9rem 0.5rem; }
  .shortcut-tile .icon { font-size: 1.8rem; }
  .shortcut-tile .lbl { font-size: 0.9rem; }
  .lowinv-list li {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .lowinv-list .lowinv-bar { display: none; }
  .dash-whatsnew { padding: 0.7rem 0.9rem; }
}

/* Run-list row on production-today also wraps better */
@media (max-width: 575px) {
  .run-list li {
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
  }
  .run-list .run-kettles { margin-left: auto; }
}

/* ---------------- Alerts / flash messages ---------------------------------- */
.alert {
  border-radius: var(--asf-radius);
  border: 1px solid;
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
}
.alert-success {
  background: #eff5e6;
  border-color: #c9dcaf;
  color: #2f4a1c;
}
.alert-danger, .alert-error {
  background: #f7e5e5;
  border-color: #e0b6b6;
  color: #7a2424;
}
.alert-warning {
  background: #fbf0d4;
  border-color: #e9cf8f;
  color: #8a5e0a;
}
.alert-info {
  background: var(--asf-cream-100);
  border-color: var(--asf-cream-300);
  color: var(--asf-ink-700);
}
.alert strong { color: inherit; }

/* Branded flash-message strip — renders as a stack of pill-shaped cards
   with a 4px colored accent rail, a leading Bootstrap Icon, and calmer
   padding than Bootstrap's default. Each variant's accent rail color
   matches the text/border tone. */
.asf-flashes { max-width: 980px; margin-inline: auto; }
.asf-flash {
  display: grid;
  grid-template-columns: 22px 1fr 24px;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem 0.75rem 1.1rem;
  border-left: 4px solid transparent;
  box-shadow: var(--asf-shadow-xs);
  margin-bottom: 0.6rem;
}
.asf-flash .asf-flash-icon {
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.85;
}
.asf-flash .asf-flash-body {
  font-size: 0.95rem;
  line-height: 1.4;
}
.asf-flash .btn-close {
  padding: 0.55rem;
  margin: 0;
  opacity: 0.55;
}
.asf-flash .btn-close:hover { opacity: 1; }

.asf-flash-success { border-left-color: #4c7a2b; }
.asf-flash-danger  { border-left-color: #9b2f2f; }
.asf-flash-warning { border-left-color: #a1720a; }
.asf-flash-info    { border-left-color: var(--asf-copper-500); }

/* ---------------- Badges --------------------------------------------------- */
.badge {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.3em 0.6em;
}
.text-bg-danger   { background: var(--asf-rose-500) !important; color: #fff !important; }
.text-bg-success  { background: var(--asf-green-500) !important; color: #fff !important; }
.text-bg-warning  { background: var(--asf-amber-500) !important; color: #fff !important; }
.text-bg-primary  { background: var(--asf-copper-600) !important; color: #fff !important; }
.text-bg-info     { background: var(--asf-copper-500) !important; color: #fff !important; }
.text-bg-secondary{ background: var(--asf-ink-700)   !important; color: #fff !important; }

/* ---------------- Pagination ---------------------------------------------- */
.pagination { --bs-pagination-color: var(--asf-ink-700); }
.page-link {
  color: var(--asf-ink-700);
  border-color: var(--asf-border);
}
.page-link:hover {
  background: var(--asf-cream-100);
  color: var(--asf-ink-900);
  border-color: var(--asf-border);
}
.page-item.active .page-link {
  background: var(--asf-copper-600);
  border-color: var(--asf-copper-600);
  color: #fff;
}

/* ---------------- Dropdowns ------------------------------------------------ */
.dropdown-menu {
  border: 1px solid var(--asf-border);
  border-radius: var(--asf-radius);
  box-shadow: var(--asf-shadow);
}
.dropdown-item { font-size: 0.95rem; color: var(--asf-ink-900); }
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--asf-cream-100);
  color: var(--asf-ink-900);
}
.dropdown-divider { border-color: var(--asf-border-soft); }
/* Nested dropdown support — moved from base.html */
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-left: 0.1rem; }

/* ---------------- Muted text ---------------------------------------------- */
.text-muted { color: var(--asf-ink-500) !important; }

/* ---------------- Focus-visible ring (accessibility) ---------------------- */
:focus-visible {
  outline: 2px solid var(--asf-copper-500);
  outline-offset: 2px;
}

/* ---------------- Moved from base.html's 9 style blocks ------------------- */

/* Body padding for fixed navbar */
body { padding-top: 60px; }

/* Shopify table: nowrap except the location column, card-ify on mobile */
.shopify-table-wrapper .shopify-table { min-width: 100%; width: 100%; }
.shopify-table th, .shopify-table td { white-space: nowrap; }
.shopify-table th.location-col,
.shopify-table td.location-col {
  max-width: 220px;
  white-space: normal;
  word-wrap: break-word;
}
@media (max-width: 768px) {
  .shopify-table-wrapper { overflow-x: auto; }
  .shopify-table { font-size: 0.85rem; }
  .shopify-table th, .shopify-table td { white-space: normal; }
  .shopify-table th.sticky-col, .shopify-table td.sticky-col { position: static !important; }
}
@media (max-width: 576px) {
  .shopify-table thead { display: none; }
  .shopify-table,
  .shopify-table tbody,
  .shopify-table tr,
  .shopify-table td { display: block; width: 100%; }
  .shopify-table tr {
    margin-bottom: 0.75rem;
    border: 1px solid var(--asf-border);
    border-radius: var(--asf-radius);
    padding: 0.5rem 0.75rem;
    background-color: var(--asf-surface);
  }
  .shopify-table td {
    border: none;
    border-bottom: 1px solid var(--asf-border-soft);
    padding: 0.25rem 0;
  }
  .shopify-table td:last-child { border-bottom: none; }
  .shopify-table td::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    display: inline-block;
    margin-right: 0.25rem;
  }
}

/* Pull list tables allow wrapping */
.pull-list-table td,
.pull-list-table th { white-space: normal; }
.pull-list-table td.text-break {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Costing pages: prevent global sticky/min-width inheriting */
.costing-page .table-responsive table { min-width: 100%; }
.costing-page .table-responsive thead th { position: static; white-space: normal; }
.costing-page .table-responsive th:first-child,
.costing-page .table-responsive td:first-child,
.costing-page .table-responsive th:nth-child(2),
.costing-page .table-responsive td:nth-child(2) {
  position: static; min-width: auto; max-width: none;
  background-color: inherit; z-index: auto;
}
.costing-page .table-responsive th,
.costing-page .table-responsive td { white-space: normal; }
.costing-page .select2-container { width: 100% !important; }
.costing-page .table-responsive .form-control,
.costing-page .table-responsive .form-select { min-width: 0; max-width: 100%; }

.costing-list-wrap .table-responsive table { min-width: 0; }
.costing-list-wrap .table-responsive th,
.costing-list-wrap .table-responsive td { white-space: nowrap; }
.costing-list-wrap .table-responsive .wrap-cell { white-space: normal; }
.costing-list-wrap .table-responsive .actions-cell { white-space: nowrap; }

/* FullCalendar: let event titles wrap */
.fc .fc-event-title,
.fc .fc-event-title-container,
.fc .fc-daygrid-event { white-space: normal; overflow: visible; }
.fc .fc-daygrid-event .fc-event-title { display: block; }
.fc .fc-event { overflow: visible; }

/* Yes/No toggle sizing (used by yesno_badges.js) */
.js-yesno-wrap input[type="checkbox"] { width: 1.1rem; height: 1.1rem; }

/* Training markdown (kept as-is, only colors mapped) */
.training-markdown { font-size: 1rem; line-height: 1.65; }
.training-container { max-width: 980px; }
.training-badge { font-weight: 500; border: 1px solid var(--asf-border); }
.training-todo { border-left: 4px solid var(--asf-amber-500); }
.training-markdown h1,
.training-markdown h2,
.training-markdown h3,
.training-markdown h4 {
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}
.training-markdown p { margin-bottom: 0.85rem; }
.training-markdown ul,
.training-markdown ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.training-markdown li { margin-bottom: 0.35rem; }
.training-markdown code {
  background: var(--asf-cream-100);
  padding: 0.1rem 0.3rem;
  border-radius: var(--asf-radius-sm);
  font-family: var(--asf-font-mono);
}
.training-markdown pre {
  background: var(--asf-cream-100);
  padding: 0.75rem 1rem;
  border-radius: var(--asf-radius);
  overflow-x: auto;
}
.training-markdown blockquote {
  border-left: 4px solid var(--asf-border);
  padding-left: 1rem;
  color: var(--asf-ink-500);
  margin: 1rem 0;
}
.training-markdown a { text-decoration: underline; }
.training-markdown table {
  width: 100%;
  margin-bottom: 1rem;
}
.training-markdown th,
.training-markdown td {
  padding: 0.5rem;
  border: 1px solid var(--asf-border);
}

/* Legacy home-page hero styles (kept for any template still loading them) */
.hero-as { border-radius: var(--asf-radius-lg); overflow: hidden; }
.hero-img { width: 100%; height: auto; display: block; }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,0) 100%);
}
.hero-body {
  position: relative; z-index: 1; color: #fff;
  height: 100%;
  display: flex; align-items: center;
  padding: 1.25rem;
}
.brand-chip {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.95;
}

/* ---------------- List pages (shared shell) ------------------------------ */
.list-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.2rem 1.1rem 2rem;
}
.list-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.list-page-head-left { min-width: 0; }
.list-page-title {
  font-family: var(--asf-font-display);
  font-size: 1.65rem;
  font-weight: 600;
  margin: 0;
  color: var(--asf-ink-900);
  line-height: 1.2;
}
.list-page-count {
  color: var(--asf-ink-500);
  font-family: var(--asf-font-body);
  font-weight: 400;
  font-size: 1rem;
  margin-left: 0.4rem;
  font-variant-numeric: tabular-nums;
}
.list-page-subtitle {
  margin: 0.15rem 0 0;
  color: var(--asf-ink-500);
  font-size: 0.92rem;
}
.list-page-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Filter bar — card with cream background under the title */
.list-filter-bar {
  background: var(--asf-surface-soft);
  border: 1px solid var(--asf-border-soft);
  border-radius: var(--asf-radius);
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.9rem;
}
.list-filter-bar form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
}
.list-filter-bar .form-control,
.list-filter-bar .form-select {
  max-width: 280px;
}

/* The table itself */
.list-page-table-wrap {
  background: var(--asf-surface);
  border: 1px solid var(--asf-border);
  border-radius: var(--asf-radius);
  overflow: hidden;
  box-shadow: var(--asf-shadow-xs);
}
/* Allow row-action dropdowns to escape the wrappers overflow:hidden
   while keeping the rounded-corner clip in place at all other times.
   Match both .dropdown.show (parent div) and .dropdown-menu.show
   (the menu itself) since Bootstrap may toggle either depending on
   structure. */
.list-page-table-wrap:has(.dropdown.show),
.list-page-table-wrap:has(.dropdown-menu.show) {
  overflow: visible;
}
.list-page-table-wrap > .table {
  margin: 0;
}
.list-page-table-wrap .table > :not(caption) > * > *:first-child { padding-left: 1rem; }
.list-page-table-wrap .table > :not(caption) > * > *:last-child  { padding-right: 1rem; }
.list-page-table-wrap .table > tbody > tr:last-child > * { border-bottom: 0; }

/* Empty-state card */
.list-empty {
  text-align: center;
  padding: 2.75rem 1rem 2.25rem;
  color: var(--asf-ink-500);
}
.list-empty .list-empty-icon {
  font-size: 2.6rem;
  color: var(--asf-cream-500);
  display: block;
  margin-bottom: 0.6rem;
}
.list-empty h3 {
  font-family: var(--asf-font-display);
  color: var(--asf-ink-700);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.3rem;
}
.list-empty p {
  margin: 0 auto 1rem;
  max-width: 420px;
  font-size: 0.95rem;
}

/* Pagination */
.list-page-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
}
.list-page-pageinfo {
  color: var(--asf-ink-500);
  font-size: 0.9rem;
}

/* Row-actions dropdown (⋯ + primary button) */
.row-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}
.row-actions-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.row-actions-toggle {
  padding: 0.18rem 0.5rem;
  line-height: 1;
}
.row-actions-toggle::after { display: none; }

/* Wide variant — for data-dense tables (reconciliation, catalog).
   Removes the 1400px cap so wide monitors get the full width, while
   the inner table wrap becomes horizontally scrollable on narrow
   viewports so mobile stays usable instead of clipping.
   Padding stays generous on desktop, tightens on phones. */
.list-page.list-page-wide {
  max-width: 100%;
  padding-inline: 1.1rem;
}
@media (min-width: 1200px) {
  .list-page.list-page-wide { padding-inline: 1.5rem; }
}
@media (max-width: 575px) {
  .list-page.list-page-wide { padding-inline: 0.6rem; }
}
.list-page-wide .list-page-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Row-action dropdowns still need to escape on wide tables when open. */
.list-page-wide .list-page-table-wrap:has(.dropdown.show),
.list-page-wide .list-page-table-wrap:has(.dropdown-menu.show) {
  overflow: visible;
}
/* Optional compact density modifier — pair with .list-page-wide when a
   table has many columns (10+) and reads better with tighter padding. */
.list-page-wide.list-page-dense .table > :not(caption) > * > * {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

/* ---------------- Footer --------------------------------------------------- */
.asf-page-body {
  min-height: calc(100vh - 52px - 72px);  /* navbar 52 + footer ~72 */
  padding-bottom: 1.5rem;
}
.asf-footer {
  background: var(--asf-ink-900);
  color: var(--asf-cream-200);
  padding: 0.9rem 1rem;
  border-top: 1px solid #000;
  font-size: 0.85rem;
}
.asf-footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.asf-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
}
a.asf-footer-brand:hover .asf-footer-text {
  color: var(--asf-cream-100);
}
.asf-footer-logo img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  padding: 1px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}
.asf-footer-text {
  color: var(--asf-cream-300);
  letter-spacing: 0.02em;
}
.asf-footer-right {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
}
.asf-footer-link {
  color: var(--asf-copper-300);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.asf-footer-link:hover { color: var(--asf-cream-100); }
@media print {
  .asf-footer { display: none; }
}

/* ---------------- Empty states + loading --------------------------------- */
/*
 * Three patterns, listed from lightest to heaviest:
 *
 *   .empty-inline  — a single <td colspan="…"> cell inside a table when the
 *                    table rendered a header but there are no rows yet.
 *                    Shows a soft icon + muted message on one line.
 *
 *   .empty-block   — a card-like empty state you drop inside a section
 *                    header (e.g. "Receiving Log" on a PO with zero
 *                    receipts). Bigger icon, h3, sub-line, optional CTA.
 *
 *   .list-empty    — the full-width card pattern already used by the
 *                    list-page shell (kept as-is; see earlier block).
 */

/* Inline, one-row friendly */
.empty-inline {
  text-align: center;
  color: var(--asf-ink-500);
  padding: 0.9rem 0.75rem !important;
  font-size: 0.92rem;
}
.empty-inline .bi {
  color: var(--asf-cream-500);
  margin-right: 0.4rem;
  font-size: 1.05rem;
  vertical-align: -2px;
}

/* Block-level empty state for detail-page child sections */
.empty-block {
  text-align: center;
  padding: 1.8rem 1rem 1.6rem;
  color: var(--asf-ink-500);
  background: var(--asf-cream-50);
  border: 1px dashed var(--asf-cream-400);
  border-radius: var(--asf-radius);
}
.empty-block .empty-block-icon {
  display: block;
  font-size: 2.1rem;
  color: var(--asf-cream-500);
  margin-bottom: 0.5rem;
}
.empty-block h3 {
  font-family: var(--asf-font-display);
  color: var(--asf-ink-700);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
}
.empty-block p {
  margin: 0 auto 0.75rem;
  max-width: 420px;
  font-size: 0.9rem;
  line-height: 1.45;
}
.empty-block .btn { font-size: 0.88rem; }

/* Skeleton loader for anticipated content (a placeholder shimmer bar) */
@keyframes asf-skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skeleton {
  display: inline-block;
  height: 1em;
  border-radius: var(--asf-radius-sm);
  background: linear-gradient(
    90deg,
    var(--asf-cream-100) 0%,
    var(--asf-cream-200) 50%,
    var(--asf-cream-100) 100%
  );
  background-size: 800px 100%;
  animation: asf-skeleton-shimmer 1.2s ease-in-out infinite;
  min-width: 40px;
}
.skeleton-line { display: block; width: 100%; height: 0.9em; margin: 0.3em 0; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-20 { width: 20%; }

/* PDF iframe wrapper with a loading banner while the embed boots */
.pdf-iframe-wrap {
  position: relative;
  min-height: 320px;
  background: var(--asf-cream-50);
  border: 1px solid var(--asf-border);
  border-radius: var(--asf-radius);
  overflow: hidden;
}
.pdf-iframe-wrap::before {
  content: "Loading PDF…";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--asf-ink-400);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.pdf-iframe-wrap iframe {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

/* ---------------- Form pages (shared shell) -------------------------------- */
.form-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 1.2rem 1.1rem 8rem;  /* extra bottom pad for sticky action bar */
}
.form-page.form-page-wide { max-width: 1280px; }
.form-page.form-page-narrow { max-width: 680px; }

/* Header */
.form-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.form-page-head-left { min-width: 0; }
.form-page-title {
  font-family: var(--asf-font-display);
  font-size: 1.65rem;
  font-weight: 600;
  margin: 0;
  color: var(--asf-ink-900);
  line-height: 1.2;
}
.form-page-subtitle {
  margin: 0.15rem 0 0;
  color: var(--asf-ink-500);
  font-size: 0.92rem;
}
.form-page-head .form-page-top-actions { display: flex; gap: 0.5rem; align-items: center; }

/* Section cards */
.form-section {
  background: var(--asf-surface);
  border: 1px solid var(--asf-border);
  border-radius: var(--asf-radius);
  box-shadow: var(--asf-shadow-xs);
  margin-bottom: 1rem;
  overflow: hidden;
}
.form-section-head {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--asf-border-soft);
  background: var(--asf-surface-soft);
  border-left: 3px solid var(--asf-copper-500);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.form-section-head h2,
.form-section-head h3 {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--asf-ink-600);
  font-family: var(--asf-font-body);
}
.form-section-subhead {
  color: var(--asf-ink-500);
  font-size: 0.85rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  margin-left: 0.75rem;
}
.form-section-body { padding: 1rem 1.15rem; }
.form-section-body > :last-child { margin-bottom: 0 !important; }

/* Two-column layout inside a section */
.form-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 992px) {
  .form-two-col { grid-template-columns: 2fr 1fr; }
  .form-two-col.form-two-col-equal { grid-template-columns: 1fr 1fr; }
}

/* Error summary banner */
.form-error-summary {
  background: #f7e5e5;
  border: 1px solid #e0b6b6;
  color: #7a2424;
  border-radius: var(--asf-radius);
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--asf-shadow-xs);
}
.form-error-summary-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}
.form-error-summary-head .bi { font-size: 1.05rem; }
.form-error-summary ul {
  margin: 0;
  padding-left: 1.4rem;
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Inline field error styling */
.form-field-error {
  color: var(--asf-rose-500);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--asf-rose-500);
  box-shadow: 0 0 0 0.15rem rgba(155, 47, 47, 0.15);
}

/* Sticky action bar at the bottom of the viewport */
.form-sticky-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--asf-surface);
  border-top: 1px solid var(--asf-border);
  box-shadow: 0 -2px 8px rgba(70, 50, 10, 0.05);
  padding: 0.65rem 1rem;
  z-index: 1020;
}
.form-sticky-actions-inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.form-page.form-page-wide ~ .form-sticky-actions .form-sticky-actions-inner { max-width: 1280px; }
.form-page.form-page-narrow ~ .form-sticky-actions .form-sticky-actions-inner { max-width: 680px; }
.form-sticky-actions .form-sticky-left,
.form-sticky-actions .form-sticky-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.form-sticky-status {
  color: var(--asf-ink-500);
  font-size: 0.85rem;
}
@media print {
  .form-sticky-actions { display: none; }
}

/* ---------------- Auth pages (login / logout / password reset) ------------ */
.auth-hero {
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem 3rem;
  background:
    radial-gradient(ellipse at top,
      var(--asf-cream-50) 0%,
      var(--asf-cream-100) 55%,
      var(--asf-cream-200) 100%);
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--asf-surface);
  border: 1px solid var(--asf-border);
  border-radius: var(--asf-radius-lg);
  box-shadow: var(--asf-shadow);
  padding: 2rem 2.25rem 1.75rem;
}
.auth-logo {
  width: 84px;
  height: auto;
  display: block;
  margin: 0 auto 0.6rem;
}
.auth-wordmark {
  display: block;
  margin: 0 auto 0.25rem;
  width: 200px;
  max-width: 75%;
  height: auto;
}
.auth-title {
  font-family: var(--asf-font-display);
  font-weight: 600;
  font-size: 1.55rem;
  color: var(--asf-ink-900);
  text-align: center;
  margin: 1rem 0 0.1rem;
}
.auth-subtitle {
  text-align: center;
  color: var(--asf-ink-500);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  min-height: 1.2em;
}
.auth-card .form-label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--asf-ink-500);
  font-weight: 700;
}
.auth-card .form-control {
  padding: 0.6rem 0.85rem;
  font-size: 1rem;
}
.auth-submit {
  width: 100%;
  padding: 0.65rem 1rem;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.auth-help {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--asf-border-soft);
  color: var(--asf-ink-500);
  font-size: 0.85rem;
  line-height: 1.5;
}
.auth-help:empty { display: none; }
.auth-help a { color: var(--asf-berry-500); font-weight: 600; }
.auth-footer {
  margin-top: 1rem;
  color: var(--asf-ink-400);
  font-size: 0.72rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-align: center;
}
.auth-errors {
  background: #f7e5e5;
  border: 1px solid #e0b6b6;
  color: #7a2424;
  border-radius: var(--asf-radius);
  padding: 0.65rem 0.85rem;
  font-size: 0.88rem;
  margin-bottom: 1.1rem;
}
.auth-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* ---------------- Print ---------------------------------------------------- */
@media print {
  .navbar, .no-print, .btn { display: none !important; }
  body { padding-top: 0; background: #fff; }
  .container, .container-fluid, .container-xxl { max-width: 100% !important; }
}

/* ---------------- Select2 branded retheme ---------------------------------- */
/* Retone Select2's default blue highlight + border to ASF cream/copper so it
   blends with Bootstrap form controls on branded forms. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-color: var(--asf-cream-400) !important;
  background-color: var(--asf-surface) !important;
  min-height: 38px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--asf-ink-900);
  line-height: 36px;
}
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus {
  border-color: var(--asf-copper-500) !important;
  box-shadow: 0 0 0 0.2rem rgba(185, 138, 60, 0.22) !important;
}
.select2-dropdown {
  border-color: var(--asf-border) !important;
  box-shadow: var(--asf-shadow);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--asf-cream-200) !important;
  color: var(--asf-ink-900) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--asf-cream-200) !important;
  border-color: var(--asf-cream-400) !important;
  color: var(--asf-ink-900);
}

/* ---------------- Costing UI tokens --------------------------------------- */
/*
 * Semantic tokens for the costing app. These centralize the tinted
 * status backgrounds, bucket accents, and KPI freshness colors that were
 * previously hard-coded inline in six costing templates. Adjust here, all
 * pages update. Never introduce a raw hex color in a costing template —
 * use one of these vars.
 */
:root {
  /* Reconciliation status tints (background + accent bar) */
  --cost-status-match-bg:   #dcfce7;
  --cost-status-match-bar:  #16a34a;
  --cost-status-close-bg:   #fef3c7;
  --cost-status-close-bar:  #d97706;
  --cost-status-off-bg:     #fee2e2;
  --cost-status-off-bar:    #dc2626;
  --cost-status-missing-bg: #f3f4f6;
  --cost-status-missing-fg: #6b7280;
  --cost-status-missing-bar:#6b7280;

  /* Reconciliation UI chrome */
  --cost-recon-head-bg:     #f8f9fa;
  --cost-recon-tile-border: #e5e7eb;
  --cost-recon-tile-active: #1f2937;
  --cost-recon-inactive-fg: #9ca3af;
  --cost-recon-inactive-bg: #fafafa;
  --cost-recon-chip-border: #d1d5db;
  --cost-recon-chip-fg:     #374151;
  --cost-recon-link-fg:     #2563eb;

  /* Cost bucket accents (crayon rail on build-result cards) */
  --cost-bucket-ingredient: #6f4e37;   /* brown */
  --cost-bucket-packaging:  #0d6efd;   /* blue */
  --cost-bucket-labor:      #198754;   /* green */
  --cost-bucket-overhead:   #6c757d;   /* neutral */
  --cost-bucket-neutral:    #dee2e6;

  /* Cost bucket row tints on catalog */
  --cost-catalog-bucket-ing: #eff6ff;
  --cost-catalog-bucket-pkg: #f0fdf4;

  /* Build-result grand-total hero */
  --cost-grand-total-from: #2b2010;
  --cost-grand-total-to:   #3d2f1c;

  /* KPI freshness (dashboard cards) */
  --cost-kpi-ok:   #4c8b3f;
  --cost-kpi-warn: #c9862d;
  --cost-kpi-bad:  #a94b6d;
  --cost-kpi-mono: #3d3d3d;

  /* Basis pill on reconciliation detail (indigo) */
  --cost-basis-pill-bg: #eef2ff;
  --cost-basis-pill-fg: #3730a3;

  /* Catalog extra bucket tints + SKU badge + labor pills */
  --cost-catalog-bucket-lab: #fffbeb;
  --cost-catalog-bucket-oh:  #faf5ff;
  --cost-catalog-sku-fg:     #4b5563;
  --cost-catalog-labor-override-bg: #fde68a;
  --cost-catalog-labor-override-fg: #78350f;
  --cost-catalog-labor-rate-bg:     #dbeafe;
  --cost-catalog-labor-rate-fg:     #1e40af;

  /* Profile-detail hero card gradient stop */
  --cost-profile-hero-to: #f4efe8;
}

/* Money column alignment utility — right-align + tabular numerals for scannable currency columns */
.money,
th.money,
td.money {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Sort header polish — subtle hover + active-column tint */
th .sort-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
th .sort-link:hover {
  text-decoration: underline;
}
th[aria-sort] {
  background-color: rgba(185, 138, 60, 0.06);
}
th .sort-link.sort-active {
  font-weight: 600;
}