/* ccm-complianceapp — styles for the v0.5.2 frontend scaffold.
   Two layouts:
     .layout-public  → simple centred page (landing, errors when signed out)
     .layout-app     → sidebar + topbar + main content grid (everything else)
*/

:root {
  --bg:           #f7f7f6;
  --surface:      #ffffff;
  --surface-alt:  #fafaf9;
  --text:         #1c1c1c;
  --muted:        #6b6b6b;
  --border:       #e3e3e1;
  --border-strong:#cfcfcd;
  --accent:       #1f4f8b;      /* CCM-ish navy */
  --accent-hover: #163a68;
  --accent-soft:  #e7eef8;
  --danger:       #b3261e;
  --danger-strong:#9a1f18;
  --danger-soft:  #fdecea;
  --warn:         #965f00;
  --warn-soft:    #fdf3df;
  --ok:           #1b5e20;
  --ok-soft:      #e6f3e7;
  --info:         #4a5d70;
  --info-soft:    #eef1f4;
  --radius:       6px;
  --radius-sm:    4px;
  --shadow:       0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.06);

  --sidebar-w:    240px;
  --topbar-h:     56px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  font-size: 14px;
}

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

code {
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: var(--bg);
  padding: 0.05em 0.3em;
  border-radius: 3px;
}

/* ─── Public layout (landing, signed-out errors) ─────────────────────── */

.layout-public .topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.layout-public .container { max-width: 720px; margin: 0 auto; padding: 3rem 1.5rem; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* v0.9.8.1 — real CCM logo. Sized to sit in the same footprint as the
   former text pill so sidebar + topbar layouts stay stable. */
.brand-logo {
  width: 28px;
  height: 28px;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
}
.brand-label { font-size: 0.95rem; }

.hero { padding: 1rem 0; }
.hero h1 { font-size: 2rem; margin: 0 0 0.5rem; }

.lede { font-size: 1.05rem; color: var(--muted); margin: 0 0 1.5rem; }
.muted { color: var(--muted); }

/* ─── App layout (signed in) ────────────────────────────────────────── */

.layout-app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  min-height: 100vh;
}

.sidebar {
  grid-area: sidebar;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 1rem 0.75rem;
  gap: 1.5rem;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar .brand { padding: 0 0.5rem; }

.side-nav { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; }
.side-nav-group { display: flex; flex-direction: column; gap: 0.15rem; }

.side-nav-link, .side-nav-sublink, .side-nav-subsublink {
  display: block;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.92rem;
  text-decoration: none;
}
.side-nav-link:hover, .side-nav-sublink:hover, .side-nav-subsublink:hover {
  background: var(--bg);
  text-decoration: none;
}
.side-nav-link.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.side-nav-sublink {
  padding-left: 1.75rem;
  font-size: 0.88rem;
  color: var(--muted);
}
.side-nav-sublink.is-active {
  color: var(--accent);
  font-weight: 600;
}
.side-nav-subsublink {
  padding-left: 2.75rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.side-nav-subsublink.is-active {
  color: var(--accent);
  font-weight: 600;
}
.sidebar-foot { padding: 0.5rem 0.75rem 0; border-top: 1px solid var(--border); }

/* Tab strip — used on Risk Management subpages (Risks / Controls).
   Sits above the search toolbar, mirrors ACA's tab layout. */
.tab-strip {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  margin: 0 0 1rem 0;
}
.tab-strip a {
  padding: 0.6rem 1.25rem;
  text-decoration: none;
  color: var(--muted);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.tab-strip a:hover { color: var(--text); }
.tab-strip a.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  height: var(--topbar-h);
}
.topbar-title { font-size: 1.05rem; font-weight: 600; }
.topbar-right { display: flex; align-items: center; gap: 1rem; }
.who { color: var(--muted); font-size: 0.9rem; }

.main {
  grid-area: main;
  padding: 1.5rem 2rem 3rem;
  max-width: 1200px;
  width: 100%;
}

/* ─── Buttons ───────────────────────────────────────────────────────── */

.btn, .btn-primary, .btn-ghost {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.2;
  background: none;
}
.btn, .btn-primary { background: var(--accent); color: #fff; }
.btn:hover, .btn-primary:hover { background: var(--accent-hover); text-decoration: none; }
.btn-ghost { color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--bg); text-decoration: none; }
.btn-lg { padding: 0.7rem 1.4rem; font-size: 1rem; }

/* ─── Cards ─────────────────────────────────────────────────────────── */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}
.card h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.card p { margin: 0.4rem 0; }
.card ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }

a.card-link {
  color: var(--text);
  display: block;
}
a.card-link:hover {
  text-decoration: none;
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.kv { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 0.75rem; }
.kv dt { color: var(--muted); font-size: 0.85rem; }
.kv dd { margin: 0; }

/* ─── Dashboard stat cards ─────────────────────────────────────────── */

.welcome { margin-bottom: 1.5rem; }
.welcome h1 { margin: 0 0 0.25rem; font-size: 1.6rem; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.stat-label { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.stat-value { font-size: 2rem; font-weight: 600; margin: 0.25rem 0; color: var(--text); }
.stat-hint  { color: var(--muted); font-size: 0.8rem; }

/* ─── List pages (search + table) ──────────────────────────────────── */

.list-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.search-input, .filter-select {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  background: var(--surface);
  font-family: inherit;
}
.search-input { min-width: 280px; }
.search-input:focus, .filter-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.result-count { margin-left: auto; font-size: 0.85rem; }

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.data-table th, .data-table td {
  padding: 0.6rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.data-table th {
  background: var(--surface-alt);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.03em;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--surface-alt); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.empty-row td { text-align: center; color: var(--muted); padding: 2rem; }
.empty-row:hover { background: transparent !important; }
.row-overdue td:first-child { box-shadow: inset 3px 0 0 var(--danger); }

/* ─── Badges ───────────────────────────────────────────────────────── */

.badge {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  background: var(--info-soft);
  color: var(--info);
  border: 1px solid transparent;
}
.badge-soon { background: var(--info-soft); color: var(--info); }
.badge-overdue { background: var(--danger-soft); color: var(--danger); margin-left: 0.5rem; }

/* Occurrence state — maps to app.occurrence_state enum */
.badge-state-open                 { background: var(--info-soft); color: var(--info); }
.badge-state-inprogress           { background: var(--accent-soft); color: var(--accent); }
.badge-state-pendingapproval      { background: var(--warn-soft); color: var(--warn); }
.badge-state-approvedandcompleted { background: var(--ok-soft); color: var(--ok); }
.badge-state-pastdue              { background: var(--danger-soft); color: var(--danger); }
.badge-state-cancelled            { background: var(--bg); color: var(--muted); }
.badge-state-reopened             { background: var(--warn-soft); color: var(--warn); }
.badge-state-closed               { background: var(--ok-soft); color: var(--ok); }

/* Priority — maps to app.priority_level enum */
.badge-priority-low      { background: var(--info-soft); color: var(--info); }
.badge-priority-medium   { background: var(--warn-soft); color: var(--warn); }
.badge-priority-high     { background: var(--danger-soft); color: var(--danger); }
.badge-priority-critical { background: var(--danger-strong); color: #fff; }

/* Risk level — maps to app.risk_level enum */
.badge-risk-low      { background: var(--info-soft); color: var(--info); }
.badge-risk-medium   { background: var(--warn-soft); color: var(--warn); }
.badge-risk-high     { background: var(--danger-soft); color: var(--danger); }
.badge-risk-critical { background: var(--danger-strong); color: #fff; }

/* ─── Notices and errors ──────────────────────────────────────────── */

.notice {
  margin-top: 1.5rem;
  padding: 0.85rem 1rem;
  background: var(--info-soft);
  border: 1px solid var(--border);
  border-left: 3px solid var(--info);
  border-radius: var(--radius-sm);
  color: var(--info);
  font-size: 0.9rem;
}
.notice strong { color: var(--text); }

.error-page {
  text-align: center;
  padding: 3rem 1rem;
  max-width: 520px;
  margin: 0 auto;
}
.error-code {
  font-size: 4rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0;
  line-height: 1;
  letter-spacing: -0.02em;
}
.error-page h1 { margin: 0.5rem 0 1rem; font-size: 1.4rem; }

/* ─── Footer (public layout only) ─────────────────────────────────── */

.footer {
  text-align: center;
  padding: 1.5rem;
  color: var(--muted);
}

/* ─── Responsive: collapse sidebar on narrow screens ──────────────── */

@media (max-width: 820px) {
  .layout-app {
    grid-template-columns: 1fr;
    grid-template-rows: auto var(--topbar-h) 1fr;
    grid-template-areas:
      "sidebar"
      "topbar"
      "main";
  }
  .sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    gap: 0.75rem;
  }
  .side-nav {
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1;
  }
  .side-nav-sublink, .side-nav-subsublink { display: none; }
  .sidebar-foot { display: none; }
  .main { padding: 1rem; }
}

/* ─── v0.6 additions: detail pages, breadcrumbs, clickable stat cards ──── */

.stat-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.1s, box-shadow 0.1s;
}
.stat-card-link:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.breadcrumb {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 1.25rem;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); }

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 1.5rem;
  align-items: start;
}
.detail-main { min-width: 0; }     /* prevent overflow with long content */
.detail-side { display: flex; flex-direction: column; gap: 1rem; }

.detail-section-h {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 1.5rem 0 0.5rem;
  font-weight: 600;
}
.detail-section-h:first-of-type { margin-top: 0; }

.detail-main .kv {
  grid-template-columns: 180px 1fr;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  gap: 0.6rem 1rem;
}
.detail-main .kv dt { padding-top: 0.1rem; }
.detail-main p {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 0;
}

.table-foot {
  padding: 0.6rem 0.85rem;
  margin: 0;
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
}

@media (max-width: 820px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
  .detail-main .kv {
    grid-template-columns: 140px 1fr;
  }
}

/* ─── v0.7 additions: submission status badges, rush flag, comments thread ─ */

/* Submission status — maps to app.submission_status enum.
   Reuse the v0.6 .badge-state-* names where the visual meaning is the same. */
.badge-state-draft           { background: var(--bg);          color: var(--muted); }
.badge-state-pendingreview   { background: var(--info-soft);   color: var(--info); }
.badge-state-inreview        { background: var(--accent-soft); color: var(--accent); }
.badge-state-approved        { background: var(--ok-soft);     color: var(--ok); }
.badge-state-rejected        { background: var(--danger-soft); color: var(--danger); }
/* badge-state-pendingapproval / closed / cancelled already defined in v0.5.2 */

.badge-rush {
  background: var(--danger);
  color: #fff;
  margin-left: 0.5rem;
}
.row-rush td:first-child { box-shadow: inset 3px 0 0 var(--danger); }

/* Multi-value form answer chips */
.chip {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  margin: 0.1rem 0.2rem 0.1rem 0;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 0.8rem;
}

/* Comments thread on the submission detail page */
.comment-thread {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.comment {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
}
.comment-head { font-size: 0.85rem; margin-bottom: 0.4rem; }
.comment-body { white-space: pre-wrap; }

/* v0.9.0 — Risks UI ─────────────────────────────────────────────────────────
   Tags get a softer chip variant to visually distinguish them from
   jurisdictions/business_groups/affiliates on the risk detail page.
   The kv-ratings variant is a denser key/value grid so the four risk
   ratings (Impact / Likelihood / Inherent / Residual) line up side-by-side
   without each one taking a full row of vertical space. */
.chip-tag {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: transparent;
}

.kv-ratings {
  display: grid;
  grid-template-columns: max-content 1fr max-content 1fr;
  column-gap: 1rem;
  row-gap: 0.4rem;
  align-items: baseline;
}
.kv-ratings dt {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.9rem;
}
.kv-ratings dd { margin: 0; }

/* v0.9.2 — Admin module ─────────────────────────────────────────────────────
   Role badges rendered as small pills inline in the users table.
   Inactive row is dimmed to signal the user can't sign in.
   Sidebar separator and admin link have a distinct muted colour so the
   admin section is visually set apart from the domain nav links.
   Role checkboxes are compact labels inside the inline role-assignment form. */

.side-nav-separator {
  height: 1px;
  background: var(--border);
  margin: 0.5rem 1rem;
}
.side-nav-admin {
  color: var(--muted) !important;
  font-size: 0.85rem;
}
.side-nav-admin.is-active,
.side-nav-admin:hover {
  color: var(--text) !important;
}

/* Role badge pills — one per named role */
.role-badge {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.role-viewer    { background: var(--bg); border-color: var(--border); color: var(--muted); }
.role-submitter { background: #e8f4fd; color: #1a6fa8; border-color: #b8d9f0; }
.role-reviewer  { background: #fef3cd; color: #856404; border-color: #ffd97a; }
.role-approver  { background: #d4edda; color: #155724; border-color: #82c795; }
.role-admin     { background: #f8d7da; color: #721c24; border-color: #f1aeb5; }

/* Inactive user row */
.row-inactive td { opacity: 0.5; }
.badge-inactive {
  background: var(--muted);
  color: #fff;
  font-size: 0.7rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  margin-left: 0.3rem;
}

/* Inline role checkbox labels */
.role-check-label {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}
.role-check-label:hover { border-color: var(--accent); }

/* Small action buttons inside table cells */
.btn-sm {
  font-size: 0.78rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  white-space: nowrap;
}
.btn-sm:hover { border-color: var(--accent); }
.btn-primary-outline { border-color: var(--accent); color: var(--accent); }
.btn-primary-outline:hover { background: var(--accent); color: #fff; }
.btn-danger-outline  { border-color: var(--danger); color: var(--danger); }
.btn-danger-outline:hover  { background: var(--danger); color: #fff; }

/* Role chips container in the users table */
.role-chips { display: flex; flex-wrap: wrap; gap: 0.2rem; }

/* v0.9.3 — Attachments ──────────────────────────────────────────────────────
   File download links look like code but are clickable.
   Muted colour signals they're secondary UI (download, not navigation). */
.file-link {
  font-family: var(--font-mono, monospace);
  font-size: 0.875em;
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
}
.file-link:hover { text-decoration: underline; }

/* v0.9.4 — Write paths (occurrence transitions, comments, attachments) ──────
   write-actions: transition button strip above the schedule section.
   write-form: comment textarea + file upload form below their sections.
   btn: base button; variants for approve (green), danger (red), default. */

.write-actions {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.write-actions-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.5rem;
}
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Base button */
.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  cursor: pointer;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: background 0.1s, border-color 0.1s;
  white-space: nowrap;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover { opacity: 0.88; color: #fff; }

.btn-approve {
  background: #d4edda;
  color: #155724;
  border-color: #82c795;
}
.btn-approve:hover { background: #82c795; }

.btn-danger {
  background: #f8d7da;
  color: #721c24;
  border-color: #f1aeb5;
}
.btn-danger:hover { background: #f1aeb5; }

.btn-default { background: var(--bg); }
.btn-default:hover { background: var(--surface); }

/* Comment and file upload forms */
.write-form {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.write-textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
  box-sizing: border-box;
}
.write-textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.write-form-foot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.write-file-input {
  font-size: 0.875rem;
  color: var(--text);
}

/* v0.9.6 — Risk rating edit grid ───────────────────────────────────────────
   Two-column grid for the four rating selects so they take half the space
   they'd take as a vertical list. Stacks to single column on narrow viewports. */
.ratings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
  margin-bottom: 0.5rem;
}
.ratings-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.ratings-field > span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}
@media (max-width: 640px) {
  .ratings-grid { grid-template-columns: 1fr; }
}

/* v0.9.7 — Dashboard widgets ──────────────────────────────────────────────
   Widget shell (card-like, full-width by default).
   widget-row puts two widget-half cards side by side on wide viewports;
   stacks them on narrow ones. */

.dashboard-widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}
.widget-h {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
  margin: 0 0 0.75rem;
}
.widget-subh {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  margin: 0.75rem 0 0.4rem;
}
.widget-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0;
}
.widget-half { margin: 0; }
@media (max-width: 900px) {
  .widget-row { grid-template-columns: 1fr; }
}

/* Compact data tables for embedded widget lists */
.data-table-compact th,
.data-table-compact td {
  padding: 0.35rem 0.5rem;
  font-size: 0.875rem;
}

/* Stacked breakdown bar — one segment per non-zero state.
   `flex:N` on segments creates proportional widths automatically. */
.breakdown-bar {
  display: flex;
  width: 100%;
  height: 2.2rem;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg);
}
.breakdown-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0 0.4rem;
  color: #fff;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  min-width: 2rem;
  transition: filter 0.1s;
}
.breakdown-cell:hover { filter: brightness(1.08); }
.breakdown-label { opacity: 0.92; }
.breakdown-count { opacity: 1; font-weight: 700; }

/* Per-state colours mirror the existing badge palette so the dashboard
   feels of-a-piece with the list pages. */
.breakdown-state-open                   { background: #6c757d; }
.breakdown-state-inprogress             { background: #007bff; }
.breakdown-state-pendingapproval        { background: #ffc107; color: #312500; }
.breakdown-state-approvedandcompleted   { background: #28a745; }
.breakdown-state-cancelled              { background: #adb5bd; color: #1f2937; }
.breakdown-state-pastdue                { background: #dc3545; }
.breakdown-state-reopened               { background: #fd7e14; }
.breakdown-state-draft                  { background: #6c757d; }
.breakdown-state-pendingreview          { background: #17a2b8; }
.breakdown-state-inreview               { background: #007bff; }
.breakdown-state-approved               { background: #28a745; }
.breakdown-state-closed                 { background: #6610f2; }
.breakdown-state-rejected               { background: #dc3545; }

/* Recent activity feed */
.activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.activity-item {
  font-size: 0.875rem;
  line-height: 1.4;
  padding: 0.4rem 0.5rem;
  background: var(--bg);
  border-left: 3px solid var(--border);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.activity-item:hover { border-left-color: var(--accent); }
.activity-when {
  display: inline-block;
  color: var(--muted);
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  margin-right: 0.5rem;
}
.activity-actor {
  font-weight: 600;
  margin-right: 0.25rem;
}

/* Welcome bar — role badges sit on the same line as the lede */
.welcome .lede {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

/* ─── v0.9.8 Reports module ───────────────────────────────────────────── */

.report-group {
  margin: 1.5rem 0 2rem 0;
}
.report-group-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 0.75rem 0;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.85rem;
}

.report-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
  min-height: 140px;
}
.report-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transform: translateY(-1px);
}
.report-card-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.4rem 0;
  color: var(--text);
}
.report-card-desc {
  font-size: 0.83rem;
  color: var(--muted);
  margin: 0;
  flex: 1;
}
.report-card-foot {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.report-card-cta {
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 500;
}

/* Preview page */
.back-link {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.back-link:hover { color: var(--accent); }

.page-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.report-filters {
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}

.filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem 1rem;
  margin-bottom: 0.85rem;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.filter-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
}
.filter-help {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.15rem;
}
.filter-field input[type="date"],
.filter-field input[type="text"],
.filter-field select {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--surface);
}
.filter-field input[type="checkbox"] {
  align-self: flex-start;
  margin: 0.25rem 0 0 0;
  transform: scale(1.1);
}

.filters-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
}

.btn-export {
  background: var(--surface);
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 0.88rem;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.btn-export:hover {
  background: var(--accent-soft);
  text-decoration: none;
}

/* Result + preview */
.report-result-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 1rem 0 0.5rem 0;
  flex-wrap: wrap;
}

.report-preview-card {
  padding: 0;
  overflow: hidden;
}

.table-scroll {
  overflow-x: auto;
  max-width: 100%;
}

.report-preview-table {
  width: 100%;
  font-size: 0.83rem;
  border-collapse: collapse;
}
.report-preview-table th,
.report-preview-table td {
  padding: 0.4rem 0.55rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  white-space: nowrap;
}
.report-preview-table thead th {
  background: var(--surface-alt);
  font-weight: 600;
  color: var(--text);
  position: sticky;
  top: 0;
  z-index: 1;
}
.report-preview-table tbody tr:nth-child(even) td {
  background: var(--surface-alt);
}
.report-preview-table .align-right { text-align: right; }
.report-preview-table .align-center { text-align: center; }

/* Sidebar entry for Reports */
.side-nav-link.is-active.side-nav-reports {
  /* nothing custom — inherits .is-active */
}

/* ─── v0.9.8.1 — Full Chickasaw Capital Management lockup (landing page) ─── */

.hero-centered {
  text-align: center;
  padding: 2.5rem 1rem;
}

.ccm-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 auto 1.75rem auto;
  padding: 0.25rem 0.5rem;
}

.ccm-lockup .lockup-emblem {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  object-fit: contain;
}

.ccm-lockup .lockup-wordmark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  text-align: left;
}

.lockup-line1 {
  font-family: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  font-weight: 700;
  font-size: 2.6rem;
  letter-spacing: 0.04em;
  color: var(--accent);            /* CCM navy */
  line-height: 1;
}

.lockup-line2 {
  font-family: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a8a8a;                  /* CCM gray — matches the wordmark in their actual logo */
  margin-top: 0.35rem;
}

/* Slightly soften the original .hero h1 so it doesn't fight the lockup. */
.hero-centered .hero-h1 {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 0.5rem 0;
  letter-spacing: 0.01em;
}

.hero-centered .lede {
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.btn-lg {
  padding: 0.7rem 1.4rem;
  font-size: 1rem;
}

/* Compact lockup on narrow viewports. */
@media (max-width: 540px) {
  .ccm-lockup { flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
  .ccm-lockup .lockup-emblem { width: 56px; height: 56px; }
  .lockup-line1 { font-size: 2rem; }
  .lockup-line2 { font-size: 0.85rem; }
}

/* ─── v0.9.8.2 — Brand wordmark variants (sidebar + topbar + landing) ─── */

/* SIDEBAR: stacked "CHICKASAW CAPITAL MANAGEMENT" + Compliance subtitle */

.brand-stacked {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.85rem 0.25rem 0.85rem;
}
.brand-stacked .brand-logo {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
}
.brand-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  font-family: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 0.82rem;
}
.brand-wm-line {
  white-space: nowrap;
}
/* The function label sits just below the brand and gets a subtle rule. */
.brand-function {
  margin: 0.1rem 0.85rem 0.85rem 0.85rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
  font-weight: 600;
}

/* TOPBAR (public): horizontal wordmark + Compliance subtitle */

.brand-horizontal {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.brand-logo-md {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
}
.brand-wordmark-h {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand-wm-h-line1 {
  font-family: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  color: var(--accent);
}
.brand-wm-h-line2 {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-weight: 600;
  margin-top: 0.1rem;
}

/* LANDING: function rule between lockup and lede */

.hero-function {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 1.25rem auto 0.85rem auto;
  max-width: 420px;
}
.hero-function-rule {
  height: 1px;
  flex: 1;
  background: var(--border-strong);
}
.hero-function-label {
  font-family: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  flex: 0 0 auto;
}

/* Mobile shrinkage */
@media (max-width: 540px) {
  .brand-horizontal { gap: 0.5rem; }
  .brand-logo-md { width: 32px; height: 32px; }
  .brand-wm-h-line1 { font-size: 0.9rem; }
  .brand-wm-h-line2 { font-size: 0.62rem; letter-spacing: 0.14em; }
}

/* ============================================================================
   v0.9.10 — UI Polish
   Adds: missing classes referenced by v0.9.9 templates, refined typography,
   universal focus indicators, unified empty states, accessibility patterns
   (skip link, sr-only), and a proper mobile sidebar drawer.
   ============================================================================ */

/* ─── Typography refinement ─────────────────────────────────────────── */

body {
  font-family:
    "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI Variable", "Segoe UI", system-ui,
    Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.data-table {
  font-variant-numeric: tabular-nums;
}
.data-table th {
  /* Slightly tighter all-caps for a more polished header row. */
  letter-spacing: 0.05em;
}

/* ─── Accessibility: skip link + visually-hidden helper ─────────────── */

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 600;
  z-index: 1000;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0.5rem;
  text-decoration: none;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Universal focus indicators (:focus-visible only) ──────────────── */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Search and select use a ring instead of an outline so the rounded corner
   carries through cleanly. Already styled in the v0.5 block — leave alone. */
.search-input:focus-visible,
.filter-select:focus-visible {
  outline: none;
}
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn-secondary:focus-visible,
.btn-action:focus-visible,
.btn-export:focus-visible,
.btn-sm:focus-visible,
.btn-default:focus-visible,
.btn-danger:focus-visible,
.btn-danger-outline:focus-visible,
.btn-primary-outline:focus-visible,
.btn-approve:focus-visible {
  outline-offset: 3px;
}

/* ─── aria-current="page" on sidebar links ─────────────────────────── */

.side-nav-link[aria-current="page"],
.side-nav-sublink[aria-current="page"],
.side-nav-subsublink[aria-current="page"] {
  /* Combine with .is-active visually — :where prevents specificity wars. */
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

/* ─── Page header (used by /admin, /reports, /regulatory-updates) ───── */

.page-header {
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.page-header h1 {
  margin: 0 0 0.25rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.page-header .lede {
  margin: 0;
  font-size: 0.95rem;
  max-width: 640px;
}
.page-header-actions {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ─── Banner: contextual status messages above tables ───────────────── */

.banner {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  margin: 0 0 1rem;
  font-size: 0.9rem;
}
.banner::before {
  content: "";
  flex: 0 0 4px;
  align-self: stretch;
  border-radius: 2px;
  background: var(--info);
}
.banner-ok       { background: var(--ok-soft);     color: var(--ok); }
.banner-ok::before     { background: var(--ok); }
.banner-warn     { background: var(--warn-soft);   color: var(--warn); }
.banner-warn::before   { background: var(--warn); }
.banner-danger   { background: var(--danger-soft); color: var(--danger); }
.banner-danger::before { background: var(--danger); }
.banner strong { font-weight: 600; }

/* ─── Empty state: unified copy block for zero-row pages ─────────────── */

.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--muted);
}
.empty-state h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  color: var(--text);
  font-weight: 600;
}
.empty-state p {
  margin: 0;
  font-size: 0.9rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.empty-state p + p { margin-top: 0.5rem; }
.empty-state .empty-state-icon {
  display: block;
  font-size: 2rem;
  margin: 0 auto 0.75rem;
  color: var(--border-strong);
  line-height: 1;
}
.empty-state-filtered { border-style: solid; }

/* ─── Filters bar (used by /regulatory-updates, reports) ─────────────── */

.filters-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.filters-bar input[type="search"],
.filters-bar input[type="text"] {
  flex: 1 1 240px;
  min-width: 200px;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--surface);
}
.filters-bar input[type="search"]:focus,
.filters-bar input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.filters-bar select {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.9rem;
  font-family: inherit;
}
.filters-bar .filter-field {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.filters-bar .filter-field span { white-space: nowrap; }
.filters-bar-action {
  /* Inline form for refresh / export actions on a filters bar. */
  margin: 0;
  display: inline-flex;
  margin-left: auto;
}

/* ─── Cell helpers ──────────────────────────────────────────────────── */

.cell-title {
  /* Long titles in reg updates / submissions: prevent table blow-out. */
  max-width: 32rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cell-truncate {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Chips for document type / category in lists ───────────────────── */

.chip-doc-type {
  background: var(--info-soft);
  color: var(--info);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* ─── Controls helper text on risk_detail ───────────────────────────── */

.controls-helper {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  max-width: 60ch;
}

/* ─── Table footer (unify table-foot + table-footer naming) ──────────── */

.table-footer {
  padding: 0.6rem 0.85rem;
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
}

/* ─── Mobile sidebar drawer ─────────────────────────────────────────── */

/* The mobile menu button lives in the topbar and is hidden on desktop.
   When checked, the layout shifts so the sidebar slides in from the left. */
.mobile-menu-toggle { display: none; }
.mobile-menu-btn {
  display: none;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  padding: 0.4rem 0.55rem;
  font-size: 1rem;
  line-height: 1;
  margin-right: 0.75rem;
}
.mobile-menu-btn:hover { background: var(--surface-alt); }
.mobile-menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.4);
  z-index: 90;
}

@media (max-width: 820px) {
  /* Replace the old "sidebar wraps as a horizontal bar" pattern with a
     proper off-canvas drawer toggled by the hamburger in the topbar. */
  .layout-app {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-h) 1fr;
    grid-template-areas:
      "topbar"
      "main";
  }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 100;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100vh;
    padding: 1rem 0.75rem;
    gap: 1.5rem;
    overflow-y: auto;
  }
  .side-nav {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .side-nav-sublink,
  .side-nav-subsublink {
    display: block;   /* show on mobile via the drawer */
  }
  .sidebar-foot { display: block; }
  .mobile-menu-btn { display: inline-flex; align-items: center; }

  /* When the toggle is checked, slide the sidebar in and dim the page. */
  .mobile-menu-toggle:checked ~ .sidebar { transform: translateX(0); }
  .mobile-menu-toggle:checked ~ .mobile-menu-backdrop { display: block; }
  /* Prevent body scroll while drawer is open via the backdrop covering it. */
  .mobile-menu-toggle:checked ~ .main { overflow: hidden; }

  /* Close the drawer when the user clicks the backdrop (it's a <label>
     pointing at the same checkbox). */
}

/* ─── Refined unified empty-state look (used inside table-wrap) ──────── */

.table-wrap .empty-state {
  border: none;
  background: transparent;
  padding: 2.5rem 1.5rem;
}

/* ─── Reduce-motion preference: respect users who ask for it ─────────── */

@media (prefers-reduced-motion: reduce) {
  .skip-link,
  .sidebar,
  .stat-card-link,
  a.card-link,
  .summary-card-spinner,
  * { transition: none !important; animation: none !important; }
}

/* ─── Unified empty-row look (in-table empty state) ────────────────────
   Keeps existing table partials working while harmonising the visual with
   the new .empty-state block used on regulatory-updates / admin pages. */
.empty-row td {
  text-align: center;
  color: var(--muted);
  padding: 2.5rem 1.5rem;
  background: var(--surface);
}
.empty-row td em {
  font-style: normal;
  font-size: 0.92rem;
  display: inline-block;
  max-width: 480px;
}
.empty-row:hover td { background: var(--surface); }

/* ─── Banner inline within main content (extra spacing tweaks) ─────── */
.banner + .filters-bar,
.banner + .list-toolbar,
.banner + .page-header { margin-top: 0; }

/* ─── Polish: result count + table footer caps ─────────────────────── */
.result-count { font-variant-numeric: tabular-nums; }
.table-foot, .table-footer { font-variant-numeric: tabular-nums; }

/* ─── v0.9.10 — additional missing classes ───────────────────────────────
   Picked up after the first sweep when reviewing the reports pages and
   admin_users template more carefully. */

/* page-section is a thin wrapper used by /reports — primarily semantic. */
.page-section { display: block; }

/* page-title / page-lede are explicit class aliases used on /reports.
   Mirror what `.page-header h1` / `.page-header .lede` already render so the
   page header reads the same whether the class is on the wrapper or the
   heading directly. */
.page-title {
  margin: 0 0 0.25rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.page-lede {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 640px;
}

/* Form wrapper class used by /reports filters; previously inherited the
   default browser form styling and looked unframed. Give it the same
   padding rhythm as other form blocks. */
.filters-form > .filters-grid {
  margin-bottom: 1rem;
}

/* chip-warn — admin-only badge on report cards. */
.chip-warn {
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* Admin role legend on /admin/users — paragraph rhythm. */
.admin-legend { margin-top: 1.75rem; }
.admin-legend-line {
  font-size: 0.82rem;
  margin: 0.3rem 0;
}
.admin-legend-line .role-badge { vertical-align: baseline; }

/* Hint text underneath any inline status (.muted form-hint) — small.
   Used by several write paths (rating editor, etc.). */
.form-hint { font-size: 0.8rem; }

/* Page header bottom-row variant for /reports — back link sits above the
   title and gets a little breathing room. */
.page-header-row {
  margin-bottom: 0.5rem;
}

/* ============================================================================
   v0.9.11 — Forms admin: shared form layout primitives
   Used by admin_form_new.html and admin_form_edit.html. Designed to be
   reusable for any future settings/notification preferences pages.
   ============================================================================ */

.form-card {
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

.form-row {
  display: block;
  margin-bottom: 1rem;
}
.form-row:last-of-type { margin-bottom: 0; }
.form-row > label { display: block; }

.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.3rem;
}

/* v0.9.27.1 — Catch-all input styling. Previously enumerated only
   text/number/email/search, leaving date/datetime-local/time/tel/url
   and multi-selects falling back to UA defaults (black on most setups).
   Excludes checkbox/radio which use their own styling. */
.form-row input:not([type="checkbox"]):not([type="radio"]),
.form-row textarea,
.form-row select {
  width: 100%;
  max-width: 480px;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.92rem;
  background: var(--surface);
  color: var(--text);
}
/* Multi-select (size > 1) needs height auto and explicit option styling
   because Chrome's listbox rendering ignores background-color inheritance
   on the <option> children. */
.form-row select[multiple] {
  height: auto;
  min-height: 5rem;
  padding: 0.3rem;
}
.form-row select[multiple] option {
  padding: 0.25rem 0.4rem;
  background: var(--surface);
  color: var(--text);
}
.form-row select[multiple] option:checked {
  background: var(--accent-soft);
  color: var(--text);
}
.form-row textarea {
  font-family: inherit;
  resize: vertical;
  min-height: 4rem;
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-row .form-hint {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.form-row-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.form-row-inline > label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-weight: 500;
}
.form-row-inline input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.form-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* ─── Inline-edit details/summary pattern (per-row editors) ─────────── */

.inline-edit { display: inline-block; }
.inline-edit > summary {
  list-style: none;
  display: inline-block;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  background: var(--surface);
  cursor: pointer;
}
.inline-edit > summary::-webkit-details-marker { display: none; }
.inline-edit > summary:hover { background: var(--surface-alt); }
.inline-edit[open] > summary {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.inline-edit-card {
  margin-top: 0.5rem;
  padding: 1rem 1.25rem;
  max-width: 520px;
  position: relative;
  z-index: 1;
}

/* ============================================================================
   v0.9.12 — Email notifications + per-user admin detail page
   ============================================================================ */

/* ─── Role grid on user detail ──────────────────────────────────────── */

.role-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.role-row {
  display: grid;
  grid-template-columns: 24px 130px 1fr;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}
.role-row:hover { background: var(--surface-alt); }
.role-row input[type="checkbox"] { width: auto; margin: 0; }
.role-row .role-name { line-height: 1; }
.role-row .role-desc { color: var(--muted); font-size: 0.85rem; }
.role-row-readonly {
  cursor: not-allowed;
  background: var(--bg);
}
.role-row-readonly:hover { background: var(--bg); }

/* ─── Notification preference editor ────────────────────────────────── */

.notif-category-h {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 1.4rem 0 0.6rem;
  font-weight: 700;
}
.notif-category-h:first-of-type { margin-top: 0; }

.notif-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.notif-row {
  display: grid;
  grid-template-columns: 1fr 320px;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.notif-label strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
}
.notif-desc {
  font-size: 0.82rem;
  margin-top: 0.15rem;
}
.notif-radios {
  display: flex;
  gap: 0.85rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.notif-radios label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}
.notif-radios input[type="radio"] {
  width: auto;
  margin: 0;
}

/* ─── Mail status pill in /admin/notifications header ───────────────── */

.mail-status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.mail-status code {
  font-size: 0.8rem;
}

/* ─── Activity list (sidebar widget on user detail) ─────────────────── */

.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.activity-item {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.activity-item:last-child { border-bottom: none; }
.activity-when {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.activity-actor {
  font-weight: 600;
}

/* ─── Mobile: collapse notif-row to a single column ─────────────────── */
@media (max-width: 720px) {
  .notif-row {
    grid-template-columns: 1fr;
  }
  .notif-radios {
    justify-content: flex-start;
  }
  .role-row {
    grid-template-columns: 24px 1fr;
  }
  .role-row .role-desc {
    grid-column: 1 / -1;
    margin-left: 32px;
  }
}

/* ============================================================================
   v0.9.13 — Submission creation UI
   ============================================================================ */

/* ─── Form picker grid ──────────────────────────────────────────────── */

.form-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.form-picker-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms, transform 120ms;
  min-height: 140px;
}
.form-picker-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  text-decoration: none;
}
.form-picker-card:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 2px;
}
.form-picker-card h2 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}
.form-picker-card p {
  margin: 0 0 0.6rem;
  font-size: 0.88rem;
  flex-grow: 1;
}
.form-picker-cta {
  align-self: flex-end;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
}

/* ─── Submission form sections (Trade 1/2/3 etc) ───────────────────── */

.form-section-h {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 1.4rem 0 0.5rem;
  font-weight: 700;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border);
}
.trade-group {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
}

/* ─── v0.9.25.3 — Trade table layout for Employee Trade Pre-Approval Form ──
   Replaces the per-trade stacked groups (Trade 1, Trade 2, …) with a single
   compact 5×4 table. Empty rows submit blank values; the create handler
   already drops empty optional fields. Inputs inside cells are full-width
   so the table feels like a spreadsheet row.
   ────────────────────────────────────────────────────────────────────── */
.trade-table-wrap {
  overflow-x: auto;
  margin: 0.25rem 0 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.trade-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: var(--surface);
}
.trade-table thead th {
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.trade-table tbody td,
.trade-table tbody th {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.trade-table tbody tr:last-child td,
.trade-table tbody tr:last-child th {
  border-bottom: none;
}
.trade-table-num {
  width: 2.5rem;
  text-align: center;
  color: var(--muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.trade-table tbody input[type="text"],
.trade-table tbody input[type="number"],
.trade-table tbody select {
  width: 100%;
  min-width: 0;
  padding: 0.35rem 0.5rem;
  font: inherit;
  font-size: 0.92rem;
  margin: 0;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.trade-table tbody input:focus,
.trade-table tbody select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.trade-table tbody input[type="number"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ─── v0.9.26 — Trade table additions: segmented toggle, add-row, badges ── */
.trade-table-actions {
  width: 2.5rem;
  text-align: center;
}
.btn-icon {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-icon[hidden] { display: none; }

.trade-add-row-wrap {
  margin: 0.6rem 0 0;
}

/* Buy/Sell segmented two-radio toggle inside table cells. Hides the native
   radio inputs and styles the labels as buttons; checked state lights up. */
.seg-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-alt);
}
.seg-toggle input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.seg-toggle label {
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
  border-right: 1px solid var(--border);
  color: var(--muted);
  background: transparent;
  transition: background-color 0.1s ease, color 0.1s ease;
  margin: 0;
}
.seg-toggle label:last-of-type {
  border-right: none;
}
.seg-toggle input[type="radio"]:checked + label {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.seg-toggle input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Read-only Buy/Sell badge on the detail page. Soft success for Buy, soft
   danger for Sell — same token palette as the rest of the badge system. */
.badge-buysell-buy {
  background: var(--ok-soft, rgba(46, 125, 50, 0.15));
  color: var(--ok, #1b5e20);
  border: 1px solid var(--ok-soft, rgba(46, 125, 50, 0.3));
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-buysell-sell {
  background: var(--danger-soft, rgba(185, 28, 28, 0.15));
  color: var(--danger, #b91c1c);
  border: 1px solid var(--danger-soft, rgba(185, 28, 28, 0.3));
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Read-only detail view: shed the editing affordances. */
.trade-table-readonly tbody td,
.trade-table-readonly tbody th {
  font-variant-numeric: tabular-nums;
}
.trade-table-readonly tbody td.num {
  text-align: right;
}

/* ─── v0.9.27 — Marketing Form subsection layout (2-column grid) ─────
   Wraps fields under <h3 class="form-subsection-h"> blocks; .form-row
   children sit in a 2-column CSS grid. Add .full-width to any .form-row
   to span both columns (TextAreas + long-prompt questions).
   On narrow viewports collapses to single column.
   ────────────────────────────────────────────────────────────────── */
.form-subsection-h {
  margin: 1.25rem 0 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.form-subsection-h:first-of-type {
  margin-top: 0.25rem;
}
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1.25rem;
  margin-bottom: 0.5rem;
}
.form-grid-2 .form-row {
  margin-bottom: 0;
}
.form-grid-2 .form-row.full-width {
  grid-column: 1 / -1;
}
.form-grid-2 .form-row input[type="text"],
.form-grid-2 .form-row input[type="number"],
.form-grid-2 .form-row input[type="email"],
.form-grid-2 .form-row input[type="date"],
.form-grid-2 .form-row input[type="datetime-local"],
.form-grid-2 .form-row textarea,
.form-grid-2 .form-row select {
  max-width: none;             /* override default 480px cap inside grid cells */
  width: 100%;
}
@media (max-width: 720px) {
  .form-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* ─── Form fieldset wrapper used by submission form ────────────────── */
.form-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  margin: 0 0 1rem;
}
.form-fieldset > legend {
  padding: 0 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}

/* required-marker red asterisk */
.required-marker {
  color: var(--danger, #c62828);
  margin-left: 0.15rem;
}

/* Bool toggle inline wrapper */
.bool-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
}
.bool-toggle input[type="checkbox"] {
  width: auto;
  margin: 0;
}

/* New-submission button container in list toolbar */
.list-toolbar-actions {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
}

/* MultiSelect <select multiple> styling that matches the other inputs */
.form-row select[multiple] {
  min-height: 6rem;
  padding: 0.4rem;
}

/* Mobile: form-picker becomes single column at narrow widths (already by auto-fit grid) */

/* ============================================================================
   v0.9.15 — Action-language button variants
   ============================================================================
   Templates render workflow buttons as:
       <button class="btn btn-action btn-action-{{ variant }}">

   variant comes from app.permissions.WORKFLOW_ACTIONS:
     primary → progressing the workflow forward (Submit, Start, Send to ...)
     success → terminal positive (Approve, Approve & Complete)
     danger  → destructive (Reject, Cancel, Discard)
     neutral → lateral / rework moves (Send Back, Reopen, Pause)
   These re-use the existing .btn-primary / .btn-approve / .btn-danger /
   .btn-default base palette so we don't introduce new tokens — same shapes,
   same focus rings, same hover behaviors.
*/

.btn-action-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-action-primary:hover { opacity: 0.88; color: #fff; }

.btn-action-success {
  background: #d4edda;
  color: #155724;
  border-color: #82c795;
}
.btn-action-success:hover { background: #82c795; }

.btn-action-danger {
  background: #f8d7da;
  color: #721c24;
  border-color: #f1aeb5;
}
.btn-action-danger:hover { background: #f1aeb5; }

.btn-action-neutral {
  background: var(--bg);
  color: var(--text);
  border-color: var(--border);
}
.btn-action-neutral:hover { background: var(--surface); }

/* Secondary "Save as draft instead" link under the primary submit button.
   Subtle so it doesn't compete with the primary CTA, but obvious enough that
   users who want to save without submitting can find it. */
.form-secondary-action a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-secondary-action a:hover {
  color: var(--accent);
}

/* ============================================================================
   v0.9.16 — Dark theme
   ============================================================================
   Applied when <html data-theme="dark">. The pre-paint inline script in
   base.html sets this attribute synchronously before CSS evaluates, so users
   never see a flash of light theme. Every base token is overridden here; pages
   that use only the tokens "just work" in dark.

   The pieces that need explicit dark variants beyond tokens:
     - .role-* chips             (hardcoded soft pastels — bump to dark)
     - .breakdown-state-* bars   (hardcoded saturated colors — soften)
     - Status badges that bake-in #fff text (kept; contrast still ≥ 4.5:1)
     - Buttons with #fff text on var(--accent)   (kept; accent re-tuned for dark)

   Palette philosophy: warm slate (not pure black). Background sits at ~#0f1419
   for low eye-strain. Surface and surface-alt are progressively lighter so the
   page reads as layered. Accent gets bumped lighter to keep readable on dark.
   Soft/state colors shift to deeper saturation + darker substrate so they read
   as filled badges, not faded text. All foreground-on-background pairs hit at
   least WCAG AA 4.5:1; we err toward AAA on body text. */
[data-theme="dark"] {
  --bg:            #0f1419;
  --surface:       #1a2028;
  --surface-alt:   #232a34;
  --text:          #e5e7eb;
  --muted:         #94a3b8;
  --border:        #2d3748;
  --border-strong: #3f4b5d;

  /* Accent: bump lighter so CCM navy reads on dark surface. The hover gets
     slightly lighter too. accent-soft becomes a dim navy tint, not a pale wash. */
  --accent:        #4a8bc7;
  --accent-hover:  #6fa8e0;
  --accent-soft:   #15222d;

  --danger:        #f87171;
  --danger-strong: #b91c1c;
  --danger-soft:   #3b1f24;
  --warn:          #fbbf24;
  --warn-soft:     #3a2d14;
  --ok:            #4ade80;
  --ok-soft:       #19321f;
  --info:          #93b3cc;
  --info-soft:     #1f2a36;

  --shadow:        0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:     0 4px 12px rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}

/* ─── Role chips (had hardcoded pastels — give them a dark pair) ───────── */
[data-theme="dark"] .role-submitter {
  background: #1e3a52; color: #93c5fd; border-color: #3b5e7e;
}
[data-theme="dark"] .role-reviewer {
  background: #3a2d14; color: #fcd34d; border-color: #6b5320;
}
[data-theme="dark"] .role-approver {
  background: #19321f; color: #86efac; border-color: #2f5938;
}
[data-theme="dark"] .role-admin {
  background: #3b1f24; color: #fca5a5; border-color: #6b323b;
}

/* ─── Breakdown chart segments — re-saturated for dark ───────────────── */
[data-theme="dark"] .breakdown-state-open                 { background: #475569; }
[data-theme="dark"] .breakdown-state-inprogress           { background: #1d4ed8; }
[data-theme="dark"] .breakdown-state-pendingapproval      { background: #fbbf24; color: #1c1917; }
[data-theme="dark"] .breakdown-state-approvedandcompleted { background: #4ade80; color: #052e16; }
[data-theme="dark"] .breakdown-state-cancelled            { background: #6b7280; color: #f3f4f6; }
[data-theme="dark"] .breakdown-state-pastdue              { background: #f87171; color: #2a0e0e; }
[data-theme="dark"] .breakdown-state-reopened             { background: #fb923c; color: #2a1503; }
[data-theme="dark"] .breakdown-state-draft                { background: #475569; }
[data-theme="dark"] .breakdown-state-pendingreview        { background: #22d3ee; color: #08383e; }
[data-theme="dark"] .breakdown-state-inreview             { background: #1d4ed8; }
[data-theme="dark"] .breakdown-state-approved             { background: #4ade80; color: #052e16; }
[data-theme="dark"] .breakdown-state-closed               { background: #a78bfa; color: #1e1535; }
[data-theme="dark"] .breakdown-state-rejected             { background: #f87171; color: #2a0e0e; }

/* ─── Action button variants (from v0.9.15) — re-tune for dark ────────── */
[data-theme="dark"] .btn-action-success {
  background: #19321f; color: #86efac; border-color: #2f5938;
}
[data-theme="dark"] .btn-action-success:hover { background: #2f5938; }
[data-theme="dark"] .btn-action-danger {
  background: #3b1f24; color: #fca5a5; border-color: #6b323b;
}
[data-theme="dark"] .btn-action-danger:hover { background: #6b323b; }
[data-theme="dark"] .btn-action-neutral {
  background: var(--surface-alt); color: var(--text); border-color: var(--border-strong);
}
[data-theme="dark"] .btn-action-neutral:hover { background: var(--border-strong); }
/* btn-action-primary inherits the new dark --accent automatically (already tokenized). */

/* ─── Legacy btn-approve/btn-danger/btn-default — same pattern ────────── */
[data-theme="dark"] .btn-approve {
  background: #19321f; color: #86efac; border-color: #2f5938;
}
[data-theme="dark"] .btn-approve:hover { background: #2f5938; }
[data-theme="dark"] .btn-danger {
  background: #3b1f24; color: #fca5a5; border-color: #6b323b;
}
[data-theme="dark"] .btn-danger:hover { background: #6b323b; }
[data-theme="dark"] .btn-default {
  background: var(--surface-alt); color: var(--text); border-color: var(--border-strong);
}
[data-theme="dark"] .btn-default:hover { background: var(--border-strong); }

/* ─── Form fields — make sure native inputs read correctly ────────────── */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

/* Native date/time pickers icon — invert in dark so it's visible */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85);
}

/* ─── Code/pre blocks — keep tracking_numbers etc readable ────────────── */
[data-theme="dark"] code,
[data-theme="dark"] pre {
  background: var(--surface-alt);
  color: var(--text);
  border-color: var(--border);
}

/* ─── Scrollbars (webkit) — match the surface ─────────────────────────── */
[data-theme="dark"] ::-webkit-scrollbar { background: var(--bg); }
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 4px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ─── Modal backdrop (was rgba 20,20,20,0.4) needs to be darker ───────── */
[data-theme="dark"] .modal-backdrop,
[data-theme="dark"] .mobile-menu-backdrop {
  background: rgba(0, 0, 0, 0.6);
}

/* ─── Brand wordmark text override — was #8a8a8a ──────────────────────── */
[data-theme="dark"] .brand-wm-line,
[data-theme="dark"] .brand-wordmark { color: #cbd5e1; }

/* ─── Banner outlines for the dark variant ───────────────────────────── */
/* The banner-* classes already key off --ok-soft etc which we redefined,
   so they update automatically. The left-edge bars (.banner-ok::before)
   key off --ok which is now the lighter green — they remain visible. */

/* ============================================================================
   Theme toggle — segmented control (v0.9.27.2)
   Replaces the v0.9.16 single icon-button cycling design. Three side-by-side
   icon buttons in a single pill; the active one keys off the form's
   data-active="light|system|dark" attribute, set server-side from the saved
   preference and updated client-side on click.
   ============================================================================ */
.theme-toggle-form {
  display: inline-flex;
  align-items: center;
  margin: 0 0.4rem 0 0;
  padding: 2px;
  gap: 0;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.theme-seg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);
  color: var(--muted);
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.theme-seg:hover {
  color: var(--text);
  background: var(--surface);
}
.theme-seg:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  z-index: 1;
}
/* Active segment: highlighted to make the current preference unambiguous.
   The form's data-active attribute holds the user's saved pref (light /
   system / dark) — we match it against each button's own data-theme. */
.theme-toggle-form[data-active="light"]  .theme-seg[data-theme="light"],
.theme-toggle-form[data-active="system"] .theme-seg[data-theme="system"],
.theme-toggle-form[data-active="dark"]   .theme-seg[data-theme="dark"] {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .theme-toggle-form[data-active="light"]  .theme-seg[data-theme="light"],
[data-theme="dark"] .theme-toggle-form[data-active="system"] .theme-seg[data-theme="system"],
[data-theme="dark"] .theme-toggle-form[data-active="dark"]   .theme-seg[data-theme="dark"] {
  /* In dark mode, drop the soft shadow (it reads as a halo on dark bg) */
  box-shadow: none;
}

/* v0.9.18 — Global text-overflow safety ─────────────────────────────────────
   Long unbroken tokens (UUIDs, AI summaries with concatenated words, URLs)
   were overflowing their cards. CSS Grid children that aren't given an
   explicit minimum width default to min-content, which lets a single long
   string force horizontal scroll on the parent. Belt-and-suspenders: clamp
   widths AND set overflow-wrap on every text container we know about.
   ───────────────────────────────────────────────────────────────────────── */

/* Root-level: nothing on the page may exceed the viewport width */
html, body {
  overflow-x: hidden;
}

/* All grid + flex children: allow them to shrink below content size so
   wrapping kicks in instead of overflow */
.detail-grid > *,
.detail-side,
.detail-side > *,
.detail-side .card,
.detail-side .kv,
.detail-side .kv > *,
.dashboard-grid > *,
.report-grid > *,
.form-row,
.form-row-inline,
.form-row-inline > * {
  min-width: 0;
}

/* Prose-y text containers: break long tokens anywhere rather than overflow */
.summary-card,
.summary-card-body,
.summary-card-body p,
.kv,
.kv dd,
.kv dt,
.prose,
.prose p,
.banner,
.lede,
.detail-section p,
.comment-body,
.comment-thread,
.form-hint,
.form-error,
.muted,
.chip,
.cell-title,
.cell-truncate,
.report-card,
.report-card p,
.empty-state,
.empty-state p,
dd, dt,
li,
td, th {
  overflow-wrap: anywhere;
  word-wrap: break-word;
  /* Keep word-break at normal so individual short words don't fragment;
     overflow-wrap: anywhere handles the long-token cases. */
}

/* Tables: enforce table-layout fixed for any table marked .table-fixed; the
   default .data-table keeps auto layout but cells now wrap. */
.data-table {
  width: 100%;
  max-width: 100%;
}

.data-table td,
.data-table th {
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Long monospace identifiers (display_id, UUIDs, tracking numbers) get
   a no-wrap chip-style render when they're tagged .mono */
.mono, code {
  word-break: break-all;
}

/* v0.9.19 — Linked risks/controls cards ────────────────────────────────────── */

.link-card-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.link-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: 0.75rem 1rem;
}

.link-card-pending {
  border-left-color: var(--warn);
  background: var(--surface-alt);
}

.link-card-confirmed {
  border-left-color: var(--ok);
}

.link-card-dismissed {
  border-left-color: var(--border);
  opacity: 0.65;
}

.link-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.link-card-title {
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.link-card-title:hover {
  text-decoration: underline;
}

.link-card-title code {
  background: var(--surface-alt);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  margin-right: 0.4rem;
  font-size: 0.9em;
}

.link-card-reasoning,
.link-card-notes {
  margin: 0.5rem 0;
  font-size: 0.95em;
  line-height: 1.5;
}

.link-card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.subhead {
  font-size: 1rem;
  font-weight: 600;
  margin: 1.25rem 0 0.5rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dismissed-links {
  margin-top: 1rem;
}

.dismissed-links summary {
  cursor: pointer;
  user-select: none;
  padding: 0.4rem 0;
}

.manual-link-form {
  margin-top: 1.5rem;
  padding: 0.75rem 1rem;
  background: var(--surface-alt);
  border-radius: 6px;
}

.manual-link-form summary {
  cursor: pointer;
  user-select: none;
  font-weight: 500;
}

.manual-link-form .form-row-inline {
  margin-top: 0.75rem;
}

.inline-form {
  display: inline-block;
  margin: 0;
}

.chip-warn {
  background: var(--warn-soft, #fef3c7);
  color: var(--warn, #965f00);
  border: 1px solid var(--warn);
}

.chip-muted {
  background: var(--surface-alt);
  color: var(--muted);
  border: 1px solid var(--border);
}

.small {
  font-size: 0.85em;
}

/* ============================================================================
   v0.9.22 — Regulatory filter admin + body display
   ============================================================================ */

/* Filter bar — inline checkbox option (used by show_dismissed toggle) */
.filter-field-inline {
  flex-direction: row !important;
  align-items: center;
  gap: 0.4rem;
}
.filter-field-inline input[type="checkbox"] {
  margin: 0;
}
.filter-field-inline > span {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text);
}

/* Admin filter page — top-level form, lays form-card sections vertically */
.filter-config-form {
  display: block;
  margin-top: 1rem;
}
.filter-config-form .form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.filter-config-form .form-card-header {
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}
.filter-config-form .form-card-header h2 {
  margin: 0 0 0.25rem 0;
  font-size: 1.05rem;
}
.filter-config-form .form-card-header p.muted {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--muted);
}

/* Checkbox grid (used inside agency / doc_type / CFR-parts blocks) */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.5rem 1rem;
}
.checkbox-grid-tight {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.35rem 1rem;
}
.check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  line-height: 1.35;
}
.check-item:hover {
  background: var(--surface-alt);
}
.check-item input[type="checkbox"] {
  margin: 0.2rem 0 0 0;
  flex: 0 0 auto;
}
.check-item-all {
  background: var(--surface-alt);
  border-left: 3px solid var(--accent);
  padding-left: 0.6rem;
  margin-bottom: 0.5rem;
}

/* CFR title blocks: nested visual grouping under "CFR allowlist" */
.cfr-title-block {
  border-top: 1px dashed var(--border);
  padding-top: 0.9rem;
  margin-top: 0.9rem;
}
.cfr-title-block:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.cfr-title-block h3 {
  margin: 0 0 0.5rem 0;
  font-size: 0.95rem;
}

/* Free-form textarea inside the filter form */
.form-textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.92rem;
  background: var(--surface);
  color: var(--text);
  resize: vertical;
  min-height: 5rem;
  box-sizing: border-box;
}
.form-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Sticky save bar at the bottom of the long filter form */
.form-actions-sticky {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  margin-top: 0.5rem;
  box-shadow: 0 -4px 12px -8px rgba(0,0,0,0.15);
  z-index: 1;
}

/* Federal Register body rendering on the detail page.
   bleach allowlist keeps tags conservative but FR rules use tables and
   blockquotes for formal commentary; style them so they're readable. */
.reg-doc-body {
  font-size: 0.95rem;
  line-height: 1.55;
}
.reg-doc-body h1,
.reg-doc-body h2,
.reg-doc-body h3,
.reg-doc-body h4 {
  margin: 1.5rem 0 0.6rem 0;
  font-weight: 600;
  color: var(--text);
}
.reg-doc-body h1 { font-size: 1.15rem; }
.reg-doc-body h2 { font-size: 1.05rem; }
.reg-doc-body h3 { font-size: 0.98rem; }
.reg-doc-body p {
  margin: 0 0 0.85rem 0;
}
.reg-doc-body blockquote {
  border-left: 3px solid var(--border-strong);
  padding: 0.25rem 0 0.25rem 1rem;
  margin: 0.75rem 0;
  color: var(--muted);
}
.reg-doc-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  font-size: 0.9rem;
}
.reg-doc-body table th,
.reg-doc-body table td {
  border: 1px solid var(--border);
  padding: 0.35rem 0.55rem;
  text-align: left;
  vertical-align: top;
}
.reg-doc-body table th {
  background: var(--surface-alt);
  font-weight: 600;
}
.reg-doc-body ul,
.reg-doc-body ol {
  margin: 0 0 0.85rem 1.4rem;
  padding: 0;
}
.reg-doc-body li {
  margin-bottom: 0.3rem;
}
.reg-doc-body pre,
.reg-doc-body code {
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.85rem;
  background: var(--surface-alt);
  padding: 0.1rem 0.3rem;
  border-radius: var(--radius-sm);
}
.reg-doc-body pre {
  padding: 0.6rem 0.8rem;
  overflow-x: auto;
}
.reg-doc-body hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 1.25rem 0;
}
.reg-doc-body a {
  color: var(--accent);
  text-decoration: underline;
}

/* ============================================================================
   v0.9.23 — AI prompts admin + relevance badges
   ============================================================================ */

/* Two-column grid on the AI prompt edit page: form left, test panel right */
.ai-prompt-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 1100px) {
  .ai-prompt-edit-grid { grid-template-columns: minmax(0, 1fr); }
}

.ai-prompt-test-panel {
  position: sticky;
  top: 1rem;
}

/* Monospace textarea for editing prompts — easier to spot Jinja braces */
.code-textarea {
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  tab-size: 2;
}

/* General single-line form input used on the edit page */
.form-input {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.92rem;
  background: var(--surface);
  color: var(--text);
  box-sizing: border-box;
}
.form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Test result panel */
.test-result-details {
  margin-top: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  background: var(--surface-alt);
}
.test-result-details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text);
  margin-bottom: 0.4rem;
}
.test-pre {
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.8rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--surface);
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  max-height: 22rem;
  overflow-y: auto;
  margin: 0;
}

/* HTMX indicator: shown while a request is in flight */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }
.htmx-request.htmx-indicator { display: inline; }

/* ─── Relevance badges (list + detail) ────────────────────────────── */

.col-relevance {
  width: 4.5rem;
  text-align: center;
}
.rel-badge {
  display: inline-block;
  min-width: 1.8rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.35;
  border: 1px solid transparent;
}
.rel-high {
  background: #1b6e3a;          /* green tone */
  color: #ffffff;
}
.rel-med {
  background: #b07a18;          /* amber tone */
  color: #ffffff;
}
.rel-low {
  background: var(--surface-alt);
  color: var(--muted);
  border-color: var(--border);
}
.rel-none {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
}
/* When used as a header-row chip (detail page), let it size like a chip */
.lede .rel-badge {
  font-size: 0.78rem;
  padding: 0.15rem 0.6rem;
  min-width: 0;
  margin-left: 0.25rem;
}

.relevance-reasoning {
  margin-top: 0.4rem;
}
.relevance-reasoning > summary {
  cursor: pointer;
  display: inline-block;
}

/* "Active" chip on the AI prompts list */
.chip-ok {
  background: #1b6e3a;
  color: #ffffff;
}

/* ============================================================================
   v0.9.24 — Data-table layout hardening
   ============================================================================
   Symptom: narrow columns squeezed by an 8-9 column table get hard-wrapped
   one character per line ("CAO-7031" rendered C/A/O/-/7/0/3/1 vertically).
   Cause: default table-layout=auto with no white-space hints lets the browser
   wrap aggressively inside cells when total width exceeds container.
   Fix: nowrap on headers + compact-content cells, truncate-with-ellipsis on
   long text cells, badges/chips never wrap, and the table itself gets a
   sensible min-width so .table-wrap's existing overflow-x:auto kicks in
   rather than the browser shrinking the table to fit.
   ============================================================================ */

/* Table headers never wrap mid-word — single line, ellipsis if truly absurd. */
.data-table thead th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Base table gets a reasonable min-width so .table-wrap horizontal scroll
   engages instead of the browser cramming everything together. Tunable
   per-page via overrides on the wrapper if a list ever needs more room. */
.data-table {
  min-width: 720px;
}

/* Compact dashboard widget tables stay readable but don't grow past their
   half-column container. Inherit min-width from .data-table; on tablet+
   keep the scroll affordance. */
.data-table-compact {
  min-width: 0;          /* dashboard widget — fit the half-column */
}

/* Compact cells that should NEVER wrap: IDs, dates, status pills, numbers.
   Apply these utility classes in the template <td>. */
.col-id,
.col-date,
.col-num,
.col-status,
.col-priority,
.col-state,
.col-action {
  white-space: nowrap;
}

.col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Username / display-name cells: nowrap by default, but allow 2-3 word
   wrap if the assignee name is multi-word (Jeff Gammill should stay on
   one line; only break on actual whitespace, never mid-word). */
.col-name,
.col-user {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14rem;
}

/* Badges and chips never wrap their own text (multi-word state names like
   ApprovedAndCompleted are a single visual unit). */
.badge,
.chip {
  white-space: nowrap;
}

/* On narrow viewports allow user cells to wrap on word boundaries so two-
   word names don't get cut off by ellipsis on a phone. */
@media (max-width: 720px) {
  .col-name,
  .col-user {
    white-space: normal;
    text-overflow: clip;
  }

/* ═══════════════════════════════════════════════════════════════════════════
   ccm-salesapp feature components (v0.7.0)
   ---------------------------------------------------------------------------
   Appended onto the ccm-complianceapp design-system base above so salesapp's
   bespoke screens (Lists, Campaigns funnel, Admin panel, entity forms, detail
   pages) keep their component styles while inheriting the shared tokens, the
   sidebar/topbar layout, typography, and the light/dark theme. Where a class
   name overlaps the base (.data-table, .badge, .btn-sm, .page-header,
   .filter-bar, .breadcrumb), the salesapp definition below intentionally wins
   for those components. All tokens used here exist in the base :root + the
   [data-theme] overrides, so these components theme automatically.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════════
   v0.2.0 — Advisors module components
   ════════════════════════════════════════════════════════════════════════ */

/* Page header gains a flex layout so a title and an action button sit on one
   row. The dashboard's plain header (no second child) is unaffected. */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.header-actions { display: flex; gap: 0.5rem; align-items: center; }

/* ─── Buttons (additional variants) ──────────────────────────────────────── */
.btn-secondary { background: var(--surface); color: var(--accent); border-color: var(--accent-soft); }
.btn-secondary:hover { background: var(--accent-soft); }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: #8f1414; color: #fff; }
.inline-form { display: inline; margin: 0; }

/* ─── Breadcrumb ─────────────────────────────────────────────────────────── */
.breadcrumb { color: var(--muted); font-size: 0.85rem; margin: 0 0 0.25rem; }
.breadcrumb a { color: var(--muted); }

/* ─── Filter bar ─────────────────────────────────────────────────────────── */
.filter-bar {
  display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem;
  align-items: center;
}
.filter-input {
  padding: 0.5rem 0.7rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font-size: 0.9rem; min-width: 160px;
}
.filter-input-sm { min-width: 90px; max-width: 120px; }
.filter-input:focus { outline: none; border-color: var(--accent); }
.result-count { color: var(--muted); font-size: 0.85rem; margin: 0 0 0.5rem; }

/* ─── Data table ─────────────────────────────────────────────────────────── */
.data-table {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.data-table th {
  text-align: left; padding: 0.65rem 0.85rem; background: var(--surface-alt);
  color: var(--muted); font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.03em; border-bottom: 1px solid var(--border);
}
.data-table td { padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-row { cursor: pointer; }
.data-row:hover { background: var(--accent-soft); }
.data-row.row-inactive { opacity: 0.6; }
.row-link { font-weight: 500; }
.data-table-compact td, .data-table-compact th { padding: 0.4rem 0.6rem; font-size: 0.82rem; }

/* ─── Badges ─────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; vertical-align: middle;
}
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-muted { background: var(--surface-alt); color: var(--muted); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }

/* ─── v0.4.0 Lists & Segments helpers ────────────────────────────────────── */
/* Small button variant for inline row actions (member remove, add). */
.btn-sm { padding: 0.2rem 0.6rem; font-size: 0.8rem; }
/* Inline add-member form on the list detail page. */
.inline-add-form { margin: 0.5rem 0 1rem; }
.inline-add-form .form-row { align-items: flex-end; gap: 0.5rem; flex-wrap: wrap; }
/* Dynamic-list rule condition rows. */
.condition-row { align-items: flex-end; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; }

/* ─── Detail page ────────────────────────────────────────────────────────── */
.detail-grid {
  display: grid; gap: 1rem; margin-bottom: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.detail-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 1.1rem 1.25rem;
}
.detail-card h3 { margin: 0 0 0.75rem; font-size: 0.95rem; color: var(--accent); }
.detail-card-wide { grid-column: 1 / -1; }
.detail-list { display: grid; grid-template-columns: 7rem 1fr; gap: 0.4rem 0.75rem; margin: 0; }
.detail-list dt { color: var(--muted); font-size: 0.85rem; }
.detail-list dd { margin: 0; font-size: 0.9rem; word-break: break-word; }
.notes-body { white-space: pre-wrap; margin: 0; }
.muted { color: var(--muted); }

/* ─── Entity form ────────────────────────────────────────────────────────── */
.entity-form { max-width: 760px; }
.entity-form fieldset {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 1rem 1.25rem 1.25rem; margin-bottom: 1.25rem; background: var(--surface);
}
.entity-form legend { padding: 0 0.5rem; color: var(--accent); font-weight: 600; font-size: 0.9rem; }
.entity-form label { display: block; margin-bottom: 0.85rem; font-size: 0.85rem; color: var(--muted); }
.entity-form input:not([type="checkbox"]):not([type="radio"]),
.entity-form select,
.entity-form textarea {
  display: block; width: 100%; margin-top: 0.3rem; padding: 0.5rem 0.7rem;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  color: var(--text); font-size: 0.92rem; font-family: inherit;
}
.entity-form input:focus, .entity-form select:focus, .entity-form textarea:focus {
  outline: none; border-color: var(--accent);
}
.form-row { display: flex; gap: 1rem; }
.form-row label { flex: 1; }
.form-row .field-sm { flex: 0 0 7rem; }
.entity-form .hint { color: var(--muted); font-weight: 400; font-size: 0.78rem; }
.form-actions { display: flex; gap: 0.6rem; margin-top: 0.5rem; }

@media (max-width: 720px) {
  .form-row { flex-direction: column; gap: 0; }
  .form-row .field-sm { flex: 1; }
  .detail-list { grid-template-columns: 6rem 1fr; }
  .filter-input { min-width: 0; flex: 1; }
}

/* ─── v0.5.0 Campaigns: recipient-resolution funnel ──────────────────────── */
.funnel { max-width: 32rem; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.funnel-row { display: flex; justify-content: space-between; align-items: center;
  padding: 0.5rem 0.85rem; border-bottom: 1px solid var(--border); }
.funnel-row:last-child { border-bottom: none; }
.funnel-label { color: var(--muted); }
.funnel-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.funnel-total { background: var(--surface-alt); }
.funnel-total .funnel-label { color: var(--text, inherit); font-weight: 600; }

/* ── Admin user panel (v0.6.0, ADR-018) ──────────────────────────────────── */
.col-actions { text-align: right; white-space: nowrap; }
.cell-muted { color: var(--muted); }
.filter-check {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--muted); font-size: 0.85rem; white-space: nowrap;
}
.tag {
  display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.4rem;
  border-radius: 4px; font-size: 0.66rem; font-weight: 600; vertical-align: middle;
}
.tag-muted { background: var(--surface-alt); color: var(--muted); }

/* Role chips: each is a tiny toggle form button. On = granted (accent), off = available (outline). */
.role-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.role-chips .inline-form { display: inline; margin: 0; }
.role-chip {
  cursor: pointer; padding: 0.12rem 0.5rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; border: 1px solid var(--border);
  font-family: inherit; line-height: 1.4;
}
.role-chip-on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); }
.role-chip-off { background: var(--surface); color: var(--muted); }
.role-chip-off:hover { border-color: var(--accent); color: var(--accent); }
.role-chip-on:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-soft); }

.btn-danger-subtle { color: var(--danger); border-color: var(--border); background: var(--surface); }
.btn-danger-subtle:hover { background: var(--danger-soft); border-color: var(--danger-soft); }

/* Anonymous auth explainer (deactivated account) */
.auth-card {
  max-width: 30rem; margin: 4rem auto; padding: 2rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.auth-card h1 { color: var(--accent); font-size: 1.5rem; margin-bottom: 0.75rem; }
.auth-card p { color: var(--text); margin-bottom: 0.75rem; }
.auth-card-foot { color: var(--muted); margin-top: 1.5rem; }