/*
 * FieldPay foundation.css
 *
 * Single source of truth for design tokens + canonical components.
 * Loaded by HQ + Office + Time. Per design-system/DESIGN.md (5/3/26).
 *
 * Phase 1 deliverable — this file exists but isn't wired into any
 * template yet. Phase 2 wires it into the 3 base.html shells.
 *
 * Rules (from DESIGN.md, with two user-chosen overrides marked *):
 *   - Every color comes from the token list. No new hex values, no
 *     inline color: #... outside this palette.
 *   - Border-radius is one of: 2 (pills/chips), 3 (inputs/buttons),
 *     4 (cards/modals). NEVER 6/8/10/12/14/20.
 *   - No shadows on stat cards, table rows, or section bodies. Only
 *     modals + floating toasts get shadow.
 *   * Single-family — DM Sans for everything (DESIGN.md spec used
 *     mono for numbers; user chose all-sans on review). DM Mono token
 *     remains aliased to sans for backwards compatibility. Numeric
 *     columns still use `font-variant-numeric: tabular-nums` so
 *     digits line up properly.
 *   * Sections + tables blend with the paper canvas (transparent bg)
 *     using the slightly-darker --line-2 hairline for visible
 *     framing. Header text in tables uses --ink (was --muted) for
 *     stronger contrast. .section.elevated opts INTO white card.
 *   - No emoji as icons. Use SVG.
 *   * Sidebar nav KEEPS Feather-style icons (DESIGN.md said drop them
 *     for a 5px-dot pattern; user overruled — icons help scanning).
 *   - Pills: 2px radius, 4 specific tone colors only.
 */

/* ─────────────────────────────────────────────────────────────────────
   1. Tokens
   ───────────────────────────────────────────────────────────────────── */
:root {
  /* ───────────────────────────────────────────────────────────────────────
     ONE source of truth. Office, HQ, Time and HR all load this file; none
     of them may redefine a token here. Change a value once and every app
     moves together — that is the whole point.

     The canonical names below are the vocabulary Office and HQ already
     speak. Foundation's older names follow as aliases so existing rules
     (and Time and HR, which use them) keep working.
     ─────────────────────────────────────────────────────────────────── */

  /* Canonical colour */
  --page-bg:         #f7f9f8;   /* page canvas */
  --card-bg:         #ffffff;   /* card / panel fill */
  --card-border:     #e2e8e4;   /* hairline + form border */
  --card-shadow:     0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --text-primary:    #0f1f17;   /* primary text + dark elements */
  --text-secondary:  #3d5c47;   /* secondary text */
  --text-muted:      #8aab94;   /* tertiary text, placeholders */
  --accent:          #2d6b3a;   /* primary brand, CTA fill */
  --accent-dark:     #1f5430;   /* CTA hover */
  --accent-light:    #f0faf2;   /* success pill background */
  --accent-border:   #a7d9b0;   /* soft green outline */
  --input-border:    #c4d4c9;
  --input-focus:     var(--accent);

  /* Sidebar chrome — shared vocabulary, each app lays it out its own way */
  --sidebar-bg:      #0f1f17;
  --sidebar-hover:   #172b1e;
  --sidebar-active:  #1a3d27;
  --sidebar-text:    #8aab94;
  --sidebar-label:   #4a7a58;

  /* Semantic status — shared by every app's banners, pills and badges */
  --success:         var(--accent);
  --success-light:   var(--accent-light);
  --success-border:  var(--accent-border);
  --danger:          #dc2626;
  --danger-light:    #fef2f2;
  --danger-border:   #fca5a5;
  --warning:         #d97706;
  --warning-light:   #fffbeb;
  --warning-border:  #fcd34d;
  --info:            #1e6b4a;
  --info-light:      var(--accent-light);
  --info-border:     var(--accent-border);
  --input-bg:        var(--card-bg);
  --card-shadow-md:  0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);

  /* Motion. An undefined easing does not fall back to a default — it makes
     the whole `animation` shorthand invalid, so an element that starts at
     opacity 0 and animates in never appears at all. Both sign-in pages do
     exactly that. */
  --ease-out:        cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Status colours */
  --orange:      #c75e2a;   /* accent — needs-you / submitted */
  --orange-tint: #fbe9dc;
  --amber:       #9a6b15;   /* pending / informational warn */
  --amber-tint:  #f6ebcf;
  --red:         #a8341f;   /* destructive, hard error */
  --red-tint:    #f7d9d2;

  /* Layout */
  --sidebar-w:   220px;
  --sidebar-width: var(--sidebar-w);
  --main-max:    100%;
  --main-pad-x:  38px;

  /* Radius */
  --r-pill:      999px;
  --r-input:     6px;
  --r-card:      10px;
  --radius:      8px;
  --radius-lg:   12px;
  --radius-sm:   var(--r-input);
  --input-radius: var(--r-input);

  /* Type */
  --font-sans:   'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ui:     var(--font-sans);
  --font-mono:   var(--font-sans);   /* single-family by owner's choice */

  /* ── Aliases: foundation's older names, kept so nothing breaks ── */
  --ink:         var(--text-primary);
  --ink-2:       #1a2e22;
  --paper:       var(--page-bg);
  --paper-2:     var(--card-bg);
  --line:        var(--card-border);
  --line-2:      var(--card-border);
  --muted:       var(--text-muted);
  --muted-2:     var(--text-secondary);
  --ink-mute:    var(--text-muted);
  --green:       var(--accent);
  --green-deep:  var(--accent-dark);
  --green-tint:  var(--accent-light);
  --green-line:  #cfe1d3;   /* section/card outline — distinct from --accent-border */
}


/* ─────────────────────────────────────────────────────────────────────
   2. Reset (minimal)
   ───────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

body {
  background: var(--page-bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* .mono is now a no-op (single-family). Kept for legacy class refs.
   .mono-num still earns its keep — keeps numeric columns aligned. */
.mono     { /* legacy, no-op */ }
.mono-num { font-variant-numeric: tabular-nums; }
.muted    { color: var(--muted); }
.muted-2  { color: var(--muted-2); }

/* ─────────────────────────────────────────────────────────────────────
   3. Type scale
   ───────────────────────────────────────────────────────────────────── */
h1, h2, h3 { margin: 0; font-weight: 600; color: var(--ink); }
h1 { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.025em; margin: 0 0 4px; }
h2 { font-size: 1.1rem;  font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
h3 { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
}
.id-tag {
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 500;
  color: var(--muted);
}

/* ─────────────────────────────────────────────────────────────────────
   4. Layout primitives
   ───────────────────────────────────────────────────────────────────── */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--ink-2);
  color: #cfd6cf;
  position: sticky; top: 0;
  height: 100vh;
  padding: 22px 0 16px;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.sidebar-brand {
  padding: 0 18px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sidebar-brand .name { color: #fff; font-weight: 600; font-size: 15px; }
.sidebar-brand .sub  { color: #8aab94; font-size: 12px; margin-top: 3px;
                       font-family: var(--font-sans); text-transform: uppercase;
                       letter-spacing: 0.12em; }

.sidebar-group-label {
  padding: 18px 18px 6px;
  color: #4a7a58;
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
}

.sidebar-link {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 18px;
  color: #cfd6cf;
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background 120ms, color 120ms;
}
.sidebar-link svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 120ms;
}
.sidebar-link:hover {
  background: rgba(255,255,255,0.04);
  color: #fff;
  text-decoration: none;
}
.sidebar-link:hover svg { opacity: 1; }
.sidebar-link.active {
  background: rgba(255,255,255,0.06);
  border-left-color: var(--orange);
  color: #fff;
}
.sidebar-link.active svg { opacity: 1; color: var(--orange); }

/* Collapsible nav group — header acts as toggle, children animate
   open/closed via the data-open attribute (JS toggles it).
   Visually IDENTICAL to .sidebar-link (same font size, weight, case,
   color) — the right-side chevron is the only thing that signals
   "this expands". User feedback: the old uppercase/tracked/muted
   treatment made group headers feel like a different element type. */
.sidebar-group-header {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 9px 18px;
  background: transparent; border: 0;
  color: #cfd6cf;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 500;
  text-transform: none; letter-spacing: 0;
  text-align: left; cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 120ms, color 120ms;
}
.sidebar-group-header:hover {
  background: rgba(255,255,255,0.04);
  color: #fff;
}
/* A group header's leading icon. HQ hardcodes width/height on the svg, so
   this was never needed until Office adopted these classes — an svg with a
   viewBox and no size renders at the CSS default, which is enormous. */
.sidebar-group-header > svg:not(.chevron) {
  width: 16px; height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
}
.sidebar-group-header svg.chevron {
  margin-left: auto; width: 12px; height: 12px;
  transition: transform 150ms ease;
  opacity: 0.55;
}
.sidebar-group-header:hover svg.chevron { opacity: 0.85; }
.sidebar-group-header[aria-expanded="true"] svg.chevron { transform: rotate(90deg); opacity: 0.85; }
.sidebar-group-children {
  overflow: hidden;
  max-height: 800px;
  transition: max-height 200ms ease;
}
.sidebar-group-children[data-open="false"] { max-height: 0; }
.sidebar-group-children .sidebar-link {
  padding-left: 42px; font-size: 13.5px;
}

.sidebar-footer {
  margin-top: auto;
  padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 12px; color: #8aab94;
}
.sidebar-footer .who   { color: #cfd6cf; font-weight: 500; }
.sidebar-footer .env   { font-family: var(--font-sans); text-transform: uppercase;
                         letter-spacing: 0.12em; color: #4a7a58; margin-top: 4px; }
.sidebar-footer a {
  color: #8aab94; text-decoration: none; font-size: 13px;
}
.sidebar-footer a:hover { color: #cfd6cf; }

.main {
  padding: 28px var(--main-pad-x) 60px;
  max-width: var(--main-max);
  width: 100%;
  min-width: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   5. Page head
   ───────────────────────────────────────────────────────────────────── */
.page-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px;
  padding-bottom: 18px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.page-head .lede {
  font-size: 15px; color: var(--muted);
  max-width: 560px; margin: 6px 0 0;
}
.page-head .actions { display: flex; gap: 10px; align-items: center; }

/* ─────────────────────────────────────────────────────────────────────
   6. Ledger strip — single most important pattern
   Replaces stat cards everywhere. NO shadows. NO separate tiles.
   ───────────────────────────────────────────────────────────────────── */
/* KPI strip used in invoice headers, dashboard cards, ledger pages.
   Default is "flat": no dividers, no surrounding borders — the parent
   container (usually .section.elevated) carries the chrome. Add
   .ledger.bordered for the older boxed-off look. */
.ledger {
  display: grid;
  grid-template-columns: repeat(var(--ledger-cols, 4), 1fr);
  gap: 0;
  margin: 18px 0 0;
}
.ledger > div { padding: 6px 18px 4px; }
.ledger.bordered {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 22px 0;
}
.ledger.bordered > div { padding: 14px 18px; border-right: 1px solid var(--line); }
.ledger.bordered > div:last-child { border-right: none; }
.ledger-label {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 6px;
}
.ledger-value {
  font-family: var(--font-sans); font-variant-numeric: tabular-nums;
  font-size: 19px; font-weight: 700; line-height: 1.15;
  color: var(--ink);
}
.ledger-value.xl { font-size: 28px; }
.ledger-sub {
  font-size: 12px; color: var(--muted-2); font-weight: 500;
  margin-left: 6px;
}
.ledger-sub.warn { color: var(--orange); }

/* ─────────────────────────────────────────────────────────────────────
   7. Section card
   ───────────────────────────────────────────────────────────────────── */
/* Sections / tables blend with the paper canvas — no harsh white
   card chrome. Hairline border + internal rules do the structural
   work. If a specific surface needs "lift" (e.g. a focused modal),
   add `.section.elevated { background: #fff; }` locally. */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  margin-bottom: 20px;
}

.section {
  margin-top: 20px;
  background: transparent;
  border: 1px solid var(--green-line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.section:hover { border-color: var(--green); }
.section.elevated { background: #fff; }       /* opt-in white card */
.section-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  background: linear-gradient(180deg, #f0f8f2, #e7f2ea);
  border-bottom: 1px solid var(--green-line);
}
.section-head.clickable { cursor: pointer; user-select: none; }
.section-head.clickable:hover { background: var(--paper-2); }
.section-title,
.section-head h2,
.section-head h3 {
  font-family: var(--font-sans);
  font-size: 0.86rem; font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.section-count {
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  padding: 2px 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--muted);
}
.section-meta {
  margin-left: auto;
  font-size: 12.5px; font-style: italic;
  color: var(--muted-2);
}
.section-body { padding: 18px; }
.section-body.flush { padding: 0; }     /* when wrapping a .t */

/* ─────────────────────────────────────────────────────────────────────
   8. Tables — single canonical style (.t)
   ───────────────────────────────────────────────────────────────────── */
table.t {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.t thead th {
  padding: 10px 16px;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink);
  background: transparent;
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
  cursor: pointer; user-select: none;
}
.t thead th.no-sort { cursor: default; }
.t thead th:hover:not(.no-sort) { color: var(--ink); }
.t tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
}
.t tbody tr:last-child td { border-bottom: none; }
.t tbody tr:hover td { background: var(--paper-2); }
.t tbody tr.inactive td { color: var(--muted-2); opacity: 0.6; }
/* All row cells use --ink uniformly. .inactive rows go muted via the
   tbody tr.inactive rule above (covers voided / inactive / soft-deleted). */
.t .num { text-align: right; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.t .date,
.t .id   { font-family: var(--font-sans); font-size: 13px; }
.t .name { font-weight: 500; }
.t .meta { color: var(--muted-2); font-size: 13px; }

/* Mono link as row action (Edit / View / Open / Print) */
.row-actions { display: inline-flex; gap: 4px; }
.row-actions a {
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: none;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
}
.row-actions a:hover {
  color: var(--ink);
  border-color: var(--line-2);
  text-decoration: none;
}

/* ─────────────────────────────────────────────────────────────────────
   9. Forms
   ───────────────────────────────────────────────────────────────────── */
.field { margin-bottom: 14px; }

label, .field-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 5px;
}

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-input);
  font-size: 14.5px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(45, 107, 58, 0.10);
}
input::placeholder, textarea::placeholder,
.input::placeholder, input.fp::placeholder {
  color: var(--ink-mute);
  opacity: .55;
  font-size: .85rem;
}

.help-text  { font-size: 13px; color: var(--muted); margin-top: 4px; }
.error-text { font-size: 13px; color: var(--red);   margin-top: 4px; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ─────────────────────────────────────────────────────────────────────
   10. Buttons
   ───────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  border-radius: var(--r-input);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line-2);
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  transition: background 150ms, border-color 150ms, color 150ms, box-shadow 150ms;
}
.btn:hover { border-color: var(--ink); background: var(--paper-2); text-decoration: none; }

.btn-primary { background: var(--green); color: #fff; border-color: var(--green); }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); box-shadow: 0 2px 8px rgba(45,107,58,0.35); color: #fff; }

.btn-secondary { background: #fff; color: var(--text-secondary); border-color: var(--input-border); }
.btn-secondary:hover { background: #f5f8f6; border-color: #94a3b8; color: var(--text-primary); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--ink); background: var(--paper-2); border-color: transparent; }

.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; box-shadow: 0 2px 8px rgba(220,38,38,0.25); color: #fff; }

.btn .ico { font-family: var(--font-sans); font-weight: 500; opacity: 0.8; }

/* Loading state — inline spinner replacing button label */
.btn.loading { color: transparent; }
.btn.loading::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: fp-spin 0.6s linear infinite;
  color: var(--ink);
}
.btn-primary.loading::after { color: #fff; }
@keyframes fp-spin { to { transform: rotate(360deg); } }

/* ─────────────────────────────────────────────────────────────────────
   11. Pills (status / type / mode) — mono, 2px, dot prefix
   ───────────────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  text-transform: uppercase; letter-spacing: 0.04em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill .d {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.pill-ok       { color: var(--green);  background: var(--green-tint);  border-color: #cfe1d4; }
.pill-pending  { color: var(--amber);  background: var(--amber-tint);  border-color: #e8d7a3; }
.pill-action   { color: var(--orange); background: var(--orange-tint); border-color: #f3d3b7; }
.pill-error    { color: var(--red);    background: var(--red-tint);    border-color: #e8b9af; }
.pill-neutral  { color: #3d4a3d;       background: #eef0ec;            border-color: #dfe2dc; }
.pill-inactive { color: var(--muted);  background: var(--paper);       border-color: var(--line-2); }

/* ─────────────────────────────────────────────────────────────────────
   12. Strips (banners) — 4 tones, same shape
   ───────────────────────────────────────────────────────────────────── */
.strip {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 16px;
  font-size: 14px;
  border: 1px solid;
  border-left-width: 3px;
  border-radius: var(--r-pill);
  margin-bottom: 18px;
}
.strip-tag {
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.01em;
}
.strip-meta {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 500;
  color: inherit;
  opacity: 0.75;
}

.strip-success { background: #f3faf4; border-color: var(--green-tint);
                 border-left-color: var(--green);  color: #1a4523; }
.strip-action  { background: #fdf3ed; border-color: var(--orange-tint);
                 border-left-color: var(--orange); color: #6b2e0e; }
.strip-pending { background: #fdf6e3; border-color: var(--amber-tint);
                 border-left-color: var(--amber);  color: #5e4a18; }
.strip-error   { background: #fdecea; border-color: var(--red-tint);
                 border-left-color: var(--red);    color: #6b1f0e; }

/* ─────────────────────────────────────────────────────────────────────
   12c. Notice — softer page-level banner, way less dominating than
   .strip. Paper-tone background + thin 3px left-border accent + small
   muted text. Use for "X items pending tax setup" / "filters applied" /
   "sandbox environment" — informational, not commanding. Variants
   change only the left-border color.
   ───────────────────────────────────────────────────────────────────── */
.notice {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  font-size: 13px; line-height: 1.5;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted-2);
  color: var(--ink);
  margin-bottom: 18px;
  border-radius: var(--r-input);
}
/* The component `display` above otherwise overrides the HTML `hidden`
   attribute (equal specificity, stylesheet wins) — so a hidden notice
   stayed visible. Restore hidden semantics app-wide. */
.notice[hidden] { display: none !important; }
.notice strong { font-weight: 600; color: var(--ink); }
/* Text-link inside a notice (right-aligned "Review →" plain link). */
.notice a      { color: var(--green); font-weight: 600; }
/* Solid action button inside a notice. Higher specificity than .notice a
   so the white text wins (without that, the green-on-green button text
   was invisible). */
.notice a.notice-cta,
.notice a.pending-banner-action {
  margin-left: auto;
  padding: 7px 14px; border-radius: var(--r-input);
  background: var(--green); color: #fff;
  font-weight: 600; font-size: 0.82rem;
  text-decoration: none; white-space: nowrap;
}
.notice a.notice-cta:hover,
.notice a.pending-banner-action:hover { background: var(--green-deep); color: #fff; }
.notice-pending { border-left-color: var(--amber);  }
.notice-action  { border-left-color: var(--orange); }
.notice-success { border-left-color: var(--green);  }
.notice-error   { border-left-color: var(--red);    }

/* Notice content helpers. Use these instead of inline `style="..."`
   on the children of .notice so the markup stays clean and any future
   token tweak only happens here. */
.notice-icon {
  width: 18px; height: 18px; flex-shrink: 0;
  color: var(--amber); opacity: 0.85;
}
.notice-success .notice-icon { color: var(--green); }
.notice-action  .notice-icon { color: var(--orange); }
.notice-error   .notice-icon { color: var(--red); }
.notice-body { flex: 1; min-width: 0; }
/* .notice-block — variant for multi-line notices (title + description
   stacked) instead of the default single-line flex row. */
.notice-block { display: block; padding: 14px 18px; }
.notice-title {
  font-weight: 600; font-size: 0.95rem; margin: 0 0 4px;
  color: var(--ink);
}
.notice-title-meta {
  font-weight: 400; color: var(--muted); font-size: 0.82rem;
}
.notice-desc {
  font-size: 0.82rem; color: var(--muted); margin: 0 0 12px;
  line-height: 1.5;
}
.notice-desc:last-child { margin-bottom: 0; }
/* .notice-banner — slim centered variant used for the sandbox banner
   at the top of every page. Smaller, uppercase, tight padding. */
.notice-banner {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 6px 12px; justify-content: center;
}

/* ─────────────────────────────────────────────────────────────────────
   12b. Accordion (section-body collapse via data-open attribute)
   JS toggles the attribute on .section-head; CSS handles the visual.
   ───────────────────────────────────────────────────────────────────── */
.section-body {
  max-height: 5000px;
  overflow: hidden;
  transition: max-height 200ms ease, padding 200ms ease;
}
.section-body[data-open="false"] {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.section-head .chevron {
  margin-left: auto;
  width: 14px; height: 14px;
  transition: transform 150ms ease;
  opacity: 0.5;
  flex-shrink: 0;
}
.section-head[data-open="true"] .chevron,
.section-head.open .chevron {
  transform: rotate(90deg);
  opacity: 0.8;
}

/* Pill state-change cross-fade — when status changes (e.g. Submitted
   -> Approved), pill smoothly transitions instead of snapping. */
.pill {
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}

/* ─────────────────────────────────────────────────────────────────────
   13. Tabs — orange underline on active
   ───────────────────────────────────────────────────────────────────── */
.tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs > .tab { flex: 0 0 auto; }
.tab {
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  text-decoration: none;
}
.tab:hover { color: var(--ink); text-decoration: none; }
.tab.active {
  color: var(--ink);
  border-bottom-color: var(--orange);
}

/* ─────────────────────────────────────────────────────────────────────
   14. Modal
   ───────────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 31, 23, 0.5);
  display: none;
  align-items: center; justify-content: center;
  z-index: 1000;
  padding: 16px;
}
.modal-overlay.open { display: flex; }
.modal-card {
  background: #fff;
  border-radius: var(--r-card);
  padding: 24px 28px;
  max-width: 460px; width: 100%;
  box-shadow: 0 20px 40px rgba(15, 31, 23, 0.12);
}
.modal-card h3 { font-size: 19px; font-weight: 600; margin: 0 0 4px; }
.modal-sub { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.modal-actions {
  display: flex; gap: 10px;
  margin-top: 18px;
  justify-content: flex-end;
}

/* ─────────────────────────────────────────────────────────────────────
   15. Search + segmented control
   ───────────────────────────────────────────────────────────────────── */
.search { position: relative; display: inline-block; }
.search input {
  padding: 9px 12px 9px 32px;
  background: #fff;
}
.search::before {
  content: "";
  position: absolute; left: 11px; top: 50%;
  width: 13px; height: 13px;
  margin-top: -7px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%238b8576' stroke-width='2' viewBox='0 0 24 24'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.35-4.35'/></svg>") center/contain no-repeat;
  pointer-events: none;
}

.seg {
  display: inline-flex;
  border: 1px solid var(--line-2);
  border-radius: var(--r-input);
  background: #fff;
  overflow: hidden;
}
.seg button {
  padding: 8px 13px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  cursor: pointer;
}
.seg button:last-child { border-right: 0; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--ink); color: #fff; }

/* ─────────────────────────────────────────────────────────────────────
   15b. Selection bar — sticky bulk-action bar that materializes when
        the user ticks at least one row in a list/table. Replaces the
        always-on stacked bulk-action bars; bulk operations are only
        relevant when rows are selected, so the bar is hidden until then.

        Markup pattern (toggle `.is-open` from JS when count > 0):

          <div class="selection-bar is-open">
            <div class="selection-bar-count">
              <strong>3</strong> selected
            </div>
            <div class="selection-bar-fields">
              <label class="selection-bar-field">
                <span>Hours</span>
                <input type="number" ...>
              </label>
              ...
            </div>
            <div class="selection-bar-actions">
              <button class="btn btn-primary">Apply</button>
              <button class="btn btn-danger">Delete</button>
              <button class="btn btn-ghost">Clear</button>
            </div>
          </div>

        Sticky to the top of its scroll container so it stays visible
        while the user scrolls the list. Mobile: wraps onto multiple
        lines naturally via flex-wrap.
   ───────────────────────────────────────────────────────────────────── */
.selection-bar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-input);
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  box-shadow: 0 2px 8px rgba(15, 31, 23, 0.18);
}
.selection-bar.is-open { display: flex; }
.selection-bar-count {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
}
.selection-bar-count strong {
  color: #fff;
  font-weight: 700;
  margin-right: 4px;
}
.selection-bar-fields {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  flex: 1 1 auto;
}
.selection-bar-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;            /* override foundation's label margin-bottom */
  text-transform: none; /* override foundation's label uppercase */
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}
.selection-bar-field > span {
  flex-shrink: 0;
}
.selection-bar-field input,
.selection-bar-field select {
  width: auto;
  padding: 6px 9px;
  font-size: 13px;
  background: #fff;
  color: var(--ink);
  border: 1px solid transparent;
}
.selection-bar-field input { width: 84px; }
.selection-bar-field select { min-width: 110px; }
.selection-bar-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.selection-bar-actions .btn { padding: 6px 12px; font-size: 13px; }
.selection-bar-actions .btn-ghost { color: rgba(255, 255, 255, 0.7); }
.selection-bar-actions .btn-ghost:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.selection-bar-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.15);
}

/* ─────────────────────────────────────────────────────────────────────
   16. Empty state — no emoji, small SVG, sentence-case
   ───────────────────────────────────────────────────────────────────── */
.empty {
  padding: 48px 24px;
  text-align: center;
}
.empty svg {
  color: var(--muted-2);
  stroke-width: 1.5;
  margin-bottom: 12px;
}
.empty strong {
  display: block;
  color: var(--ink);
  font-size: 15px; font-weight: 600;
  margin-bottom: 6px;
}
.empty p {
  font-size: 14px; color: var(--muted);
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   17. Inline-rename (double-click contenteditable)
   ───────────────────────────────────────────────────────────────────── */
.editable-name {
  display: inline-block;
  padding: 1px 4px;
  border-radius: var(--r-pill);
  cursor: text;
}
.editable-name:hover { background: var(--paper-2); }
.editable-name.editing {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--green);
  outline: none;
}
.editable-name.saved {
  background: var(--green-tint);
  transition: background 700ms;
}
.editable-name.error {
  background: var(--red-tint);
}

/* ─────────────────────────────────────────────────────────────────────
   18. Toast (floating, transient)
   ───────────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  padding: 14px 20px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  border-radius: var(--r-card);
  box-shadow: 0 8px 24px rgba(15, 31, 23, 0.06);
  z-index: 1001;
}

/* ─────────────────────────────────────────────────────────────────────
   19. Sandbox banner (replaces the bright-yellow anti-pattern)
   ───────────────────────────────────────────────────────────────────── */
.sandbox-banner {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
}
.sandbox-banner::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--amber);
}

/* ─────────────────────────────────────────────────────────────────────
   20. Motion utilities
   Count-up + hover lift live in JS or component classes.
   This block: keyframes, reduced-motion override.
   ───────────────────────────────────────────────────────────────────── */
@keyframes fp-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.row-new { animation: fp-fade-in 300ms var(--ease-out); }

.tile {
  transition: transform 150ms, border-color 150ms, background 150ms;
}
.tile:hover {
  transform: translateY(-1px);
  border-color: var(--green);
  background: var(--paper-2);
}

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

/* ─────────────────────────────────────────────────────────────────────
   21. Print baseline (filings, paystubs, invoices)
   Per-page templates can override but this is the floor.
   ───────────────────────────────────────────────────────────────────── */
.table-scroll {
  overflow-x: auto;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-card, 4px);
}
.table-scroll > table { margin: 0; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.filter-bar input,
.filter-bar select {
  width: auto;
  height: 36px;
  padding: 0 10px;
  font-size: 14px;
}
.filter-bar input[type="search"] { min-width: 150px; }
.filter-bar input[type="date"]   { min-width: 140px; }
.filter-bar select               { min-width: 150px; }
.filter-bar .btn                 { height: 36px; padding: 0 14px; font-size: 0.85rem; }
.filter-bar .filter-sep          { color: var(--muted); }
@media (max-width: 640px) {
  .filter-bar > input,
  .filter-bar > select { flex: 1 1 100%; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   NARROW WINDOWS — a resized window, not only a phone.

   Office and HQ both contain the page so it cannot slide sideways, which on
   its own CLIPS anything too wide instead of letting it scroll. Wide tables
   get their own horizontal scroll so the hidden columns stay reachable, and
   header/action rows wrap instead of running off the edge.

   Lives here because foundation.css is the stylesheet every app actually
   loads — office/static/css/app.css is not linked by Office at all.
───────────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 1280px) {
  .main table,
  .main-content table,
  .main-wrapper table,
  .content-area table {
    /* block turns the grid into a shrink-to-fit box, so pin the width back
       to the container or 100%-width tables stop filling it. */
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .page-head,
  .page-head .actions,
  .section-head,
  .page-header,
  .card-header { flex-wrap: wrap; }
}

@media print {
  /* Undo the narrow-window table treatment: a printed report must not be
     clipped, and thead has to keep repeating across pages. */
  .main table, .main-content table, .main-wrapper table, .content-area table {
    display: table; overflow-x: visible; max-width: none;
  }

  .sidebar, .tabs, .actions, .btn, .row-actions { display: none !important; }
  body { background: #fff; }
  .main { padding: 0; max-width: none; }
  .section { border: 0; box-shadow: none; }
  .ledger, .t { border-color: #000; }
  .t tbody td, .t thead th { border-color: #000; }
}