/* Token-only styling pass — colors/typography/radius/shadow lifted from
   lsh-ui's design tokens (Lsh.UI/wwwroot/css/lsh-ui.tailwind.css) so this
   app reads as LSH-branded. This is NOT full lsh-ui component adoption —
   markup still uses this project's own hand-rolled classes (.card/.btn/
   .badge/etc.), just re-themed. Full component adoption is blocked on
   Lsh.UI shipping as a real NuGet package (it-ticket's ProjectReference
   attempt broke CI and was reverted — see PLAN.md).

   Everything below is wrapped in `@layer legacy` (swarm audit, 2026-08-31):
   this sheet is unlayered CSS, and unlayered rules always beat Tailwind's
   layered ones — so bare-element selectors here (h1, h2, table, body) were
   overriding Tailwind utility classes on the NEW pages too, not just this
   file's own legacy `.card`/`.field`/`.btn` markup. The layer order itself
   is declared once in Styles/app.tailwind.css, which loads first.

   The layer fix alone does NOT explain the white-on-white table bug the
   audit also reported, and testing that assumption against the real running
   app (not just reasoning about it) is what caught this: the plain <table>
   markup on /records, /caf, /bpm carries no Tailwind background class at
   all, so there is no competing rule for cascade layers to arbitrate —
   site.css's table{background:var(--lsh-surface)} is the ONLY rule touching
   it regardless of layer order. The real fix is the [data-theme="dark"]
   block below, giving THIS file's own tokens a dark variant (they had none
   before). That also gives the fully-legacy pages (Track D6, not yet
   restyled) working — if not yet pretty — dark mode for free, since they
   read these same variables for .card/.field/etc. */
@layer legacy {

:root {
  --lsh-primary: #177419;
  --lsh-primary-dark: #125e14;
  --lsh-secondary: #475569;
  --lsh-ink: #1f2937;
  --lsh-ink-soft: #6b7280;
  --lsh-line: #e1dfdd;
  --lsh-surface: #ffffff;
  --lsh-surface-alt: #f8fafc;
  --lsh-paper: #f3f2f1;
  --lsh-danger: #dc2626;
  --lsh-danger-soft: #fef2f2;
  --lsh-danger-ink: #991b1b;
  --lsh-warn: #d97706;
  --lsh-warn-soft: #fffbeb;
  --lsh-warn-ink: #92400e;
  --lsh-success: #177419;
  --lsh-success-soft: #ecfdf5;
  --lsh-success-ink: #065f46;

  /* legacy aliases so nothing referencing the old names silently breaks */
  --lsh-accent: var(--lsh-primary);
  --lsh-accent-dark: var(--lsh-primary-dark);
}

/* Same palette as Styles/lsh-tokens.css's dark theme, mapped onto this
   file's own (separate, older) variable names — this sheet predates that
   token system and the two were never reconciled. */
[data-theme="dark"] {
  --lsh-primary: #22c55e;
  --lsh-primary-dark: #4ade80;
  --lsh-secondary: #94a3b8;
  --lsh-ink: #f1f5f9;
  --lsh-ink-soft: #94a3b8;
  --lsh-line: #334155;
  --lsh-surface: #1e293b;
  --lsh-surface-alt: #0f172a;
  --lsh-paper: #0f172a;
  --lsh-danger: #ef4444;
  --lsh-danger-soft: #2a1010;
  --lsh-danger-ink: #fca5a5;
  --lsh-warn: #f59e0b;
  --lsh-warn-soft: #2a1d08;
  --lsh-warn-ink: #f59e0b;
  --lsh-success: #22c55e;
  --lsh-success-soft: #0c2318;
  --lsh-success-ink: #22c55e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--lsh-paper);
  color: var(--lsh-ink);
}

::selection { background: #bbf7d0; color: #14532d; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 28px;
  background: var(--lsh-surface);
  border-bottom: 1px solid var(--lsh-line);
}

.topbar .brand {
  font-weight: 700;
  color: var(--lsh-primary-dark);
  text-decoration: none;
  font-size: 15px;
}

.topbar nav a {
  color: var(--lsh-ink-soft);
  text-decoration: none;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 0.375rem;
}

.topbar nav a:hover { background: var(--lsh-paper); color: var(--lsh-ink); }

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 28px;
}

h1 { font-size: 22px; margin: 0 0 4px; font-weight: 700; }
h2 { font-size: 16px; margin: 24px 0 10px; font-weight: 600; }
.subtitle { color: var(--lsh-ink-soft); font-size: 13px; margin: 0 0 20px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--lsh-surface); }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--lsh-line); }
th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--lsh-ink-soft); background: var(--lsh-surface-alt); }
tr:hover td { background: var(--lsh-surface-alt); }
table a { color: var(--lsh-primary-dark); text-decoration: none; font-weight: 600; }

.card {
  background: var(--lsh-surface);
  border: 1px solid var(--lsh-line);
  border-radius: 0.5rem;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
}

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.field label { font-size: 12.5px; font-weight: 600; color: rgba(31,41,55,0.8); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 13.5px; padding: 8px 10px;
  border: 1px solid var(--lsh-line); border-radius: 0.375rem; background: var(--lsh-surface);
  color: var(--lsh-ink); transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus, .field select:focus, .field textarea:focus,
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: none; border-color: var(--lsh-primary); box-shadow: 0 0 0 3px rgba(23,116,25,0.15);
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; cursor: pointer; font-weight: 600;
  border-radius: 0.375rem; padding: 9px 16px; font-size: 13.5px; font-family: inherit;
  text-decoration: none; transition: filter 0.15s, background 0.15s;
}
.btn:hover { filter: brightness(0.95); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--lsh-primary); color: #fff; border-color: var(--lsh-primary); }
.btn-primary:hover { background: #15803d; }
.btn-danger { background: var(--lsh-danger); color: #fff; border-color: var(--lsh-danger); }
.btn-danger:hover { background: #b91c1c; }
.btn-ghost { background: none; border: 1px solid var(--lsh-line); color: var(--lsh-ink); }
.btn-ghost:hover { background: var(--lsh-paper); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

.badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  background: var(--lsh-paper); color: var(--lsh-ink-soft);
  border: 1px solid transparent;
}
.badge.rejected { background: var(--lsh-danger-soft); color: var(--lsh-danger-ink); border-color: #fecaca; }
.badge.amend { background: var(--lsh-warn-soft); color: var(--lsh-warn-ink); border-color: #fde68a; }
.badge.done { background: var(--lsh-success-soft); color: var(--lsh-success-ink); border-color: #a7f3d0; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 8px 0; border-top: 1px solid var(--lsh-line); font-size: 13px; }
.timeline li:first-child { border-top: none; }
.timeline .meta { color: var(--lsh-ink-soft); font-size: 12px; }

.notice { font-size: 12.5px; padding: 10px 14px; border-radius: 0.5rem; margin-bottom: 16px; border: 1px solid transparent; }
.notice.warn { background: var(--lsh-warn-soft); color: var(--lsh-warn-ink); border-color: #fde68a; }

} /* @layer legacy */