rustio-core 2.0.2

/*
 * RustIO Admin — design system (v7, operator-scale, density-aware)
 * ───────────────────────────────────────────────────────────────────
 *
 * Framework-owned stylesheet, bundled into `rustio-core` via
 * `include_str!`. Customisation goes through `rustio.design.json`
 * (logo, project name, primary/accent colour, density), re-emitted
 * as CSS variables inline in the admin shell.
 *
 * ### Design language
 *
 * Operator-facing back-office for long sessions. Typography favours
 * clarity at laptop distance without wasting rows on blog-post-sized
 * type. Weight hierarchy (400 body → 600 labels → 700 titles) carries
 * most of the scanning work; colour accent is reserved for write
 * actions only.
 *
 * ### Type scale (anchored at 16 px body)
 *
 *     Display (page titles):   28 / 700 / -0.02em
 *     H2 (section titles):     22 / 700
 *     H3 (card titles):        18 / 600
 *     Body L (default):        16 / 400
 *     Body M (cells, inputs):  15 / 500
 *     Body S (labels, btns):   14 / 600
 *     Small (meta, pills):     13 / 600
 *     XS (table header caps):  12 / 700 / uppercase / 0.08em
 *
 * ### Spacing (8 pt grid)
 *
 *     4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 56 · 64
 *
 * Row/container padding is density-driven — see the density block
 * below. Comfortable is the default; Compact is opt-in via
 * `rustio.design.json` → `.rio-density-compact` on `<body>`.
 *
 * ### Colour
 *
 * - **Ink scale** (9 steps from off-white 50 to near-black 900).
 *   Primary text: ink-900 #0F141A (≈ 18:1 on white).
 *   Borders: ink-200. Subtle fills: ink-50.
 * - **Rust accent** (single brand colour, overrideable via JSON).
 *   Used for the primary button, active nav rail, and logo mark.
 * - **Semantic triplets** (success / warn / danger) each carry a
 *   matched soft-bg + border + text pair for pills and alerts.
 *
 * ### Typography
 *
 * Inter for UI (via Google Fonts when online; system stack fallback).
 * JetBrains Mono for IDs, hashes, counts, and code — with the `zero`
 * stylistic set on so `0` and `O` never confuse a log reader.
 */

/*
 * Fonts — system stack only. The framework's single-binary promise
 * means no network dependencies at runtime: no CDN @import, no
 * external webfont download. `Inter` is listed first so projects
 * that opt in (e.g. via their own layout `<link>` to a self-hosted
 * copy) pick it up automatically; without it, the OS picks the best
 * native UI font (SF Pro on macOS, Segoe UI on Windows, Roboto on
 * Android/Linux) and the admin renders identically offline, behind
 * a strict CSP, or on an air-gapped network.
 */

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

  --rio-fs-display: 28px;   /* page titles */
  --rio-fs-h2:      22px;   /* section titles */
  --rio-fs-h3:      18px;   /* card titles */
  --rio-fs-body-l:  16px;   /* default body */
  --rio-fs-body-m:  15px;   /* cells, inputs */
  --rio-fs-body-s:  14px;   /* labels, buttons */
  --rio-fs-small:   13px;   /* pills, hints */
  --rio-fs-xs:      12px;   /* table header caps */

  /* Spacing — 8 pt grid -------------------------------------------- */
  --rio-s-1:  4px;
  --rio-s-2:  8px;
  --rio-s-3:  12px;
  --rio-s-4:  16px;
  --rio-s-5:  20px;
  --rio-s-6:  24px;
  --rio-s-8:  32px;
  --rio-s-10: 40px;
  --rio-s-12: 48px;
  --rio-s-16: 64px;

  /* Ink scale — neutrals ------------------------------------------- */
  --rio-ink-50:  #F5F7F9;
  --rio-ink-100: #EAEEF2;
  --rio-ink-200: #D6DEE5;
  --rio-ink-300: #B8C3CC;
  --rio-ink-400: #8A97A2;
  --rio-ink-500: #5F6D78;
  --rio-ink-600: #3F4A54;
  --rio-ink-700: #2B343C;
  --rio-ink-800: #1A2027;
  --rio-ink-900: #0F141A;

  /* Rust — single brand accent ------------------------------------- */
  --rio-rust-50:  #FCE9E2;
  --rio-rust-100: #F8D3C5;
  --rio-rust-200: #F1A78B;
  --rio-rust-500: #D2501E;
  --rio-rust-600: #B84318;
  --rio-rust-700: #8F3413;

  /* Surfaces ------------------------------------------------------- */
  /* Body bg sits between ink-50 and ink-100 so white cards, the
     tinted filter strip (ink-50), and the sticky thead (ink-100)
     all read as distinct visual layers. */
  --rio-bg: #EDF1F5;
  --rio-surface: #FFFFFF;
  --rio-surface-muted: var(--rio-ink-50);
  --rio-surface-hover: var(--rio-ink-100);

  /* Borders -------------------------------------------------------- */
  --rio-border: var(--rio-ink-200);
  --rio-border-strong: var(--rio-ink-300);

  /* Text ----------------------------------------------------------- */
  --rio-text:        var(--rio-ink-900);
  --rio-text-label:  var(--rio-ink-800);
  --rio-text-muted:  var(--rio-ink-600);
  --rio-text-subtle: var(--rio-ink-600);

  /* Brand (overrideable via rustio.design.json) -------------------- */
  --rio-primary: var(--rio-rust-600);
  --rio-primary-hover: var(--rio-rust-700);
  --rio-accent: var(--rio-rust-600);
  --rio-accent-hover: var(--rio-rust-700);
  --rio-accent-ring: rgba(184, 67, 24, 0.45);

  /* Semantic ------------------------------------------------------- */
  --rio-danger:        #B42318;
  --rio-danger-hover:  #912018;
  --rio-danger-soft:   #FEF3F2;
  --rio-danger-border: #FDA29B;
  --rio-danger-text:   #912018;

  --rio-success:       #067647;
  --rio-success-soft:  #ECFDF3;
  --rio-success-border:#ABEFC6;
  --rio-success-text:  #085D3A;

  --rio-warning:       #B54708;
  --rio-warning-soft:  #FFFAEB;
  --rio-warning-border:#FEDF89;
  --rio-warning-text:  #93370D;

  /* Radii ---------------------------------------------------------- */
  --rio-radius-sm: 6px;
  --rio-radius:    8px;
  --rio-radius-lg: 12px;

  /* Shadows -------------------------------------------------------- */
  --rio-shadow-sm: 0 1px 2px rgba(15, 20, 26, 0.05);
  --rio-shadow:    0 2px 4px -1px rgba(15, 20, 26, 0.06),
                   0 1px 2px rgba(15, 20, 26, 0.04);
  --rio-shadow-lg: 0 12px 28px -8px rgba(15, 20, 26, 0.15),
                   0 4px 8px -2px rgba(15, 20, 26, 0.06);

  /* Layout metrics ------------------------------------------------- */
  /* Topbar height must feel anchored — at 64 px the breadcrumbs +
     env-chip felt cramped against a page title whose display size
     is 28 px. 76 px gives the topbar the same vertical weight as
     the sidebar's 72-px brand block and reads as a deliberate
     app-shell bar rather than a hairline strip. */
  --rio-topbar-h: 60px;

  /* Density — defaults are "comfortable". Consumers read the vars
     below; switching to `.rio-density-compact` on <body> flips them
     all together. The row-y/row-x names are kept for back-compat.
     `row-x` trimmed from 20 → 16 in the v7.1 refresh so wide tables
     (e.g. 10-column medflow patients) read without excessive
     horizontal whitespace per cell. */
  --rio-row-y: 14px;
  --rio-row-x: 16px;
  --rio-form-field-gap:  20px;
  --rio-card-pad:        24px;
  --rio-section-pad-y:   24px;
  --rio-section-pad-x:   32px;
  --rio-container-gap:   28px;
  --rio-container-pad-x: 32px;
}

/* Compact density — opt-in. ~40% more rows per viewport than the
   comfortable default; still legible at 15 px cells. */
.rio-density-compact {
  --rio-row-y: 10px;
  --rio-row-x: 16px;
  --rio-form-field-gap:  12px;
  --rio-card-pad:        16px;
  --rio-section-pad-y:   16px;
  --rio-section-pad-x:   20px;
  --rio-container-gap:   20px;
  --rio-container-pad-x: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { font-size: 16px; }

body {
  background: var(--rio-bg);
  color: var(--rio-text);
  font-family: var(--rio-font);
  font-size: var(--rio-fs-body-l);
  line-height: 1.6;
  font-weight: 400;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.mono, code, pre, kbd,
.rio-cell-id, .rio-cell-num,
.rio-meta-value, .rio-search-intent,
.rio-audit-when, .rio-audit-meta, .rio-audit-ip,
.rio-schema-reload-meta, .rio-schema-diff, .rio-plan-preview {
  font-family: var(--rio-font-mono);
  font-feature-settings: "zero";
}

a { color: var(--rio-primary); text-decoration: none; font-weight: 500; }
a:hover { color: var(--rio-primary-hover); text-decoration: underline; }

:focus-visible { outline: 3px solid var(--rio-accent); outline-offset: 2px; }

/* Safety net — catches icons not individually sized. */
.rio-app svg:not([width]):not([height]) {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ═════════════════════════════════════════════════════════════════
 * Generic utility classes — migrated from inline styles so the
 * server templates stay HTML-only. Any new `style="…"` added to a
 * template is a smell; prefer adding a class here instead.
 * ═════════════════════════════════════════════════════════════════ */

/* Zero-margin inline form — for logout button + per-row delete
   forms that live inside flex rows and shouldn't contribute extra
   vertical space. */
.rio-inline-form { margin: 0; display: inline; }

/* A centred row of buttons inside an empty-state panel. */
.rio-empty-actions {
  display: flex;
  gap: var(--rio-s-2);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--rio-s-2);
}

/* Spacing for the error shell's action row. */
.rio-error-actions {
  display: flex;
  gap: var(--rio-s-2);
  margin-top: var(--rio-s-3);
  flex-wrap: wrap;
}

/* ═════════════════════════════════════════════════════════════════
 * Layout shell
 * ═════════════════════════════════════════════════════════════════ */

.rio-body { display: block; min-height: 100vh; }
.rio-app {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* Sidebar --------------------------------------------------------- */

/*
 * Two-layer layout so the sidebar is VISUALLY full-height on every
 * page (even pages where the content scrolls past one viewport), AND
 * the nav itself stays pinned to the viewport as you scroll:
 *
 *   .rio-sidebar          — flex child, stretches to full `.rio-app`
 *                            height so its background reaches the
 *                            bottom of every page. Owns the border
 *                            and surface colour.
 *   .rio-sidebar-inner    — sticky wrapper at `top: 0; height: 100vh`.
 *                            Holds brand + nav + footer. Stays locked
 *                            to the viewport while long content
 *                            scrolls underneath.
 *
 * This replaces the earlier `position: sticky` directly on
 * `.rio-sidebar` which left a gap at the bottom of tall pages
 * (sidebar height capped at 100vh).
 */
.rio-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--rio-surface);
  border-right: 1px solid var(--rio-border);
  align-self: stretch; /* fill the full height of `.rio-app` */
}
.rio-sidebar-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* Let children scroll if the model list is very long, without
     losing the pinned brand or the footer. */
  overscroll-behavior: contain;
}

.rio-brand {
  display: flex;
  align-items: center;
  gap: var(--rio-s-3);
  padding: var(--rio-s-5);
  border-bottom: 1px solid var(--rio-border);
  color: var(--rio-text);
}
.rio-brand:hover { text-decoration: none; color: var(--rio-text); }

.rio-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--rio-radius);
  background: var(--rio-primary);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
}
.rio-brand-meta { display: flex; flex-direction: column; line-height: 1.25; gap: 2px; }
.rio-brand-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--rio-ink-900);
}
.rio-brand-label {
  font-size: 12px;
  color: var(--rio-text-subtle);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Each `.rio-nav` is a content-sized block; the server emits them as
   siblings (Dashboard / Recent actions, then Models). Giving each
   `flex: 1` would split the sidebar height between them and push the
   second group to the middle. */
.rio-nav {
  flex: 0 0 auto;
  padding: var(--rio-s-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* The first `.rio-nav` after the brand gets a bit more top padding. */
.rio-brand + .rio-nav { padding-top: var(--rio-s-3); }
.rio-nav-section {
  padding: var(--rio-s-5) var(--rio-s-3) var(--rio-s-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rio-text-subtle);
}
.rio-nav-link {
  display: flex;
  align-items: center;
  gap: var(--rio-s-3);
  padding: var(--rio-s-3) var(--rio-s-4);
  border-radius: var(--rio-radius-sm);
  color: var(--rio-ink-700);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  border-left: 3px solid transparent;
  margin-left: -3px;
}
.rio-nav-link:hover {
  background: var(--rio-ink-50);
  color: var(--rio-ink-900);
  text-decoration: none;
}
.rio-nav-link.is-active {
  background: var(--rio-ink-100);
  color: var(--rio-ink-900);
  font-weight: 600;
  border-left-color: var(--rio-primary);
}
.rio-nav-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.rio-sidebar-footer {
  margin-top: auto; /* pushes the footer to the bottom of the sidebar */
  border-top: 1px solid var(--rio-border);
  padding: var(--rio-s-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
/* Error / 404 shell pages render with no identity → the footer
   becomes an empty bordered box. Suppress it so the sidebar ends
   cleanly at the last nav group. */
.rio-sidebar-footer:empty {
  border-top: none;
  padding: 0;
}
.rio-sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--rio-s-3);
  padding: var(--rio-s-3) var(--rio-s-4);
  border-radius: var(--rio-radius-sm);
  color: var(--rio-ink-800);
  font-size: 14px;
  font-weight: 500;
}
.rio-sidebar-user:hover {
  background: var(--rio-ink-50);
  color: var(--rio-ink-900);
  text-decoration: none;
}
.rio-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--rio-ink-200);
  color: var(--rio-ink-800);
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}
.rio-user-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rio-sidebar-logout { margin: 0; }
.rio-sidebar-logout button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--rio-s-3);
  padding: var(--rio-s-3) var(--rio-s-4);
  border-radius: var(--rio-radius-sm);
  color: var(--rio-ink-700);
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}
.rio-sidebar-logout button:hover {
  background: var(--rio-ink-50);
  color: var(--rio-ink-900);
}
.rio-sidebar-logout button svg,
.rio-sidebar-user svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Main + topbar --------------------------------------------------- */

.rio-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.rio-container {
  flex: 1 1 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rio-container-gap);
  /* Cap the content column on very wide screens so tables / forms
     don't sprawl across a 27-inch monitor. 1600px fits a 5-column
     list plus row actions comfortably; wider monitors get generous
     letterboxing of the ink-tinted body bg. */
  width: 100%;
  max-width: 1600px;
  align-self: center;
}
.rio-container > *:not(.rio-topbar) {
  margin-left: var(--rio-container-pad-x);
  margin-right: var(--rio-container-pad-x);
}
.rio-container > *:not(.rio-topbar):first-child { margin-top: var(--rio-container-gap); }
.rio-container > *:last-child { margin-bottom: var(--rio-container-pad-x); }

.rio-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--rio-surface);
  border-bottom: 1px solid var(--rio-border);
  padding: 0 var(--rio-container-pad-x);
  display: flex;
  align-items: center;
  gap: var(--rio-s-4);
  /* Fixed height — breadcrumbs + icon cluster align cleanly on a
     single 60-px bar. Was 76 px with elastic padding; now locked so
     the shadow, sticky list thead, and sidebar all measure against
     the same value. */
  height: var(--rio-topbar-h);
  min-height: var(--rio-topbar-h);
  box-shadow: 0 1px 0 var(--rio-border), 0 2px 8px -6px rgba(15, 20, 26, 0.06);
}

/* Breadcrumb takes the left; the action cluster is pushed to the right. */
.rio-topbar > .rio-breadcrumbs { flex: 1 1 auto; min-width: 0; }

.rio-topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--rio-s-2);
}

.rio-topbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--rio-radius-sm);
  background: transparent;
  color: var(--rio-text-subtle);
  cursor: pointer;
  position: relative;
  text-decoration: none;
}
.rio-topbar-icon:hover {
  background: var(--rio-ink-50);
  color: var(--rio-ink-900);
  text-decoration: none;
}
.rio-topbar-icon svg { width: 18px; height: 18px; }
.rio-topbar-dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--rio-primary);
  border: 2px solid var(--rio-surface);
}

.rio-topbar-logout { margin: 0; }
.rio-topbar-logout button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--rio-border);
  border-radius: var(--rio-radius-sm);
  background: var(--rio-surface);
  color: var(--rio-text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  line-height: 1;
}
.rio-topbar-logout button svg { width: 16px; height: 16px; color: var(--rio-text-subtle); }
.rio-topbar-logout button:hover {
  background: var(--rio-ink-50);
  border-color: var(--rio-border);
  color: var(--rio-primary);
}
.rio-topbar-logout button:hover svg { color: var(--rio-primary); }

@media (max-width: 720px) {
  .rio-topbar-logout button span { display: none; }
  .rio-topbar-logout button { padding: 0 10px; width: 36px; }
}

.rio-env-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--rio-s-2);
  margin-left: auto;
  padding: 6px 12px;
  border-radius: var(--rio-radius-sm);
  border: 1px solid var(--rio-border-strong);
  background: var(--rio-surface);
  color: var(--rio-ink-700);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rio-env-chip::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rio-success);
}
.rio-env-chip.is-prod {
  color: #FFFFFF;
  background: var(--rio-danger);
  border-color: var(--rio-danger);
}
.rio-env-chip.is-prod::before { background: rgba(255, 255, 255, 0.92); }

/* Breadcrumbs ----------------------------------------------------- */
.rio-breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--rio-s-2);
  font-size: 14px;
  color: var(--rio-text-muted);
  font-weight: 500;
}
.rio-breadcrumbs a { color: var(--rio-text-muted); }
.rio-breadcrumbs a:hover { color: var(--rio-ink-900); }
.rio-crumb-sep {
  display: inline-flex;
  align-items: center;
  color: var(--rio-ink-400);
  user-select: none;
}
.rio-crumb-sep svg { width: 16px; height: 16px; display: block; }
.rio-crumb-current { color: var(--rio-ink-900); font-weight: 600; }

/* Page header ----------------------------------------------------- */
.rio-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rio-s-5);
  flex-wrap: wrap;
  padding-bottom: var(--rio-s-1);
}
/* When the server emits an empty right-hand `<div>` (no page
   actions), suppress its layout so the title doesn't float with an
   invisible sibling eating flex space. */
.rio-page-header > div:empty { display: none; }

/* On edit/create pages (where a `.rio-form` follows below) keep the
   header aligned with the form's 860 rail so the page reads as one
   centred column, not a misaligned title + body. */
.rio-container > .rio-page-header:has(~ form.rio-form) {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 1100px) {
  .rio-container > .rio-page-header:has(~ form.rio-form) {
    margin-left: var(--rio-container-pad-x);
    margin-right: var(--rio-container-pad-x);
  }
}
.rio-page-title {
  margin: 0;
  font-size: var(--rio-fs-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--rio-ink-900);
  letter-spacing: -0.02em;
}
.rio-page-subtitle {
  margin: var(--rio-s-2) 0 0;
  font-size: 15px;
  color: var(--rio-text-muted);
  line-height: 1.55;
}
.rio-page-actions {
  display: flex;
  align-items: center;
  gap: var(--rio-s-2);
  flex-wrap: wrap;
}

/* ═════════════════════════════════════════════════════════════════
 * Buttons
 * ═════════════════════════════════════════════════════════════════ */

.rio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rio-s-2);
  padding: 11px 20px;
  font-family: inherit;
  font-size: var(--rio-fs-body-s);
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--rio-radius);
  border: 1px solid var(--rio-border-strong);
  background: var(--rio-surface);
  color: var(--rio-ink-800);
  cursor: pointer;
  transition: background 0.08s ease, border-color 0.08s ease,
              color 0.08s ease, box-shadow 0.08s ease;
  white-space: nowrap;
}
.rio-btn:hover {
  background: var(--rio-ink-50);
  color: var(--rio-ink-900);
  text-decoration: none;
}
.rio-btn:disabled,
.rio-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.rio-btn-sm { padding: 7px 12px; font-size: 13px; }
.rio-btn-block { width: 100%; }

.rio-btn-primary {
  background: var(--rio-primary);
  color: #FFFFFF;
  border-color: var(--rio-primary);
}
.rio-btn-primary:hover {
  background: var(--rio-primary-hover);
  border-color: var(--rio-primary-hover);
  color: #FFFFFF;
}

.rio-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--rio-ink-700);
}
.rio-btn-ghost:hover { background: var(--rio-ink-50); color: var(--rio-ink-900); }

.rio-btn-danger {
  background: var(--rio-danger);
  border-color: var(--rio-danger);
  color: #FFFFFF;
}
.rio-btn-danger:hover {
  background: var(--rio-danger-hover);
  border-color: var(--rio-danger-hover);
  color: #FFFFFF;
}

.rio-btn-danger-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--rio-danger);
}
.rio-btn-danger-ghost:hover {
  background: var(--rio-danger-soft);
  color: var(--rio-danger-hover);
}

/* Colour rule for buttons (non-negotiable):
   rust-filled (`.rio-btn-primary`) is reserved for WRITE actions —
   Create, Save, Confirm, Apply. Retrieval / query / view actions —
   including search submit — render as the default outline button
   (`.rio-btn`). One dominant button per screen. */

.rio-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.rio-btn-sm svg { width: 16px; height: 16px; }

/* ═════════════════════════════════════════════════════════════════
 * Forms
 * ═════════════════════════════════════════════════════════════════ */

.rio-form {
  background: var(--rio-surface);
  border: 1px solid var(--rio-border);
  border-radius: var(--rio-radius);
  /* 860 (down from 960) anchors the form content to a comfortable
     reading measure without feeling cramped. Combined with the
     container's 1600px cap and the auto-centering rule below, the
     form sits as a centred rail regardless of viewport width. */
  max-width: 860px;
  width: 100%;
  box-shadow: var(--rio-shadow-sm);
}

/* Edit / create pages — centre the form and every companion card
   on a single 860px rail. Without this the form left-aligns inside
   the 1600-wide container on a 27-inch monitor, leaving a visible
   asymmetric gap to the right. `margin-left/right: auto` replaces
   the container's symmetric `--rio-container-pad-x` rule. */
.rio-container > form.rio-form,
.rio-container > form.rio-form ~ section.rio-card,
.rio-container > form.rio-form ~ .rio-danger-zone {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
/* The compact meta row ("ID · Created") that sits above the form on
   edit pages is always a sibling of `.rio-form` inside the
   container. Pull it onto the same centred rail so the edit-page
   column reads as one unit. */
.rio-container > .rio-meta {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
/* Fallback for narrow viewports — if the main area can't host the
   860 rail plus its container pad, collapse the auto-centring and
   let the container's side margin keep the form off the edge. */
@media (max-width: 1100px) {
  .rio-container > form.rio-form,
  .rio-container > form.rio-form ~ section.rio-card,
  .rio-container > form.rio-form ~ .rio-danger-zone,
  .rio-container > .rio-meta {
    margin-left: var(--rio-container-pad-x);
    margin-right: var(--rio-container-pad-x);
  }
}
.rio-form-section {
  padding: var(--rio-section-pad-y) var(--rio-section-pad-x) var(--rio-section-pad-x);
  border-bottom: 1px solid var(--rio-border);
}
.rio-form-section:last-of-type { border-bottom: none; }
.rio-form-section-title {
  margin: 0;
  font-size: var(--rio-fs-h3);
  font-weight: 600;
  color: var(--rio-ink-900);
}
.rio-form-section-hint {
  margin: var(--rio-s-1) 0 var(--rio-s-5);
  font-size: 14px;
  color: var(--rio-text-muted);
  line-height: 1.55;
}

.rio-field {
  display: flex;
  flex-direction: column;
  gap: var(--rio-s-2);
  margin: 0 0 var(--rio-form-field-gap);
}
.rio-field:last-child { margin-bottom: 0; }
.rio-field > label,
.rio-field-label {
  font-size: var(--rio-fs-body-s);
  font-weight: 600;
  color: var(--rio-ink-900);
  line-height: 1.4;
}
.rio-field-optional {
  font-weight: 500;
  color: var(--rio-text-subtle);
  margin-left: var(--rio-s-1);
}

.rio-input,
.rio-select,
.rio-textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--rio-fs-body-m);
  font-weight: 500;
  color: var(--rio-ink-900);
  background: var(--rio-surface);
  border: 1px solid var(--rio-border-strong);
  border-radius: var(--rio-radius);
  padding: 12px 16px;
  line-height: 1.5;
  transition: border-color 0.08s ease, box-shadow 0.08s ease;
}
.rio-input::placeholder,
.rio-textarea::placeholder { color: var(--rio-text-subtle); font-weight: 500; }
.rio-input:focus,
.rio-select:focus,
.rio-textarea:focus {
  outline: none;
  border-color: var(--rio-accent);
  box-shadow: 0 0 0 3px var(--rio-accent-ring);
}
.rio-textarea { min-height: 120px; resize: vertical; }

.rio-field-hint {
  font-size: 13px;
  color: var(--rio-text-muted);
  line-height: 1.55;
  margin: 0;
}
/* Stacked hints (e.g. a relation "Linked:" line above a general
   hint) — use a small inter-line gap instead of `<p>` default
   margin collapse. */
.rio-field-hint + .rio-field-hint { margin-top: var(--rio-s-1); }

.rio-field-row-checkbox,
.rio-field.rio-field-row-checkbox {
  flex-direction: row;
  align-items: center;
  gap: var(--rio-s-3);
}
.rio-field-row-checkbox > label {
  font-size: var(--rio-fs-body-m);
  font-weight: 500;
  color: var(--rio-ink-900);
  margin: 0;
}

.rio-checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--rio-border-strong);
  border-radius: 4px;
  background: var(--rio-surface);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
/* Checked fill uses ink-800 (near-black), not rust. Rust is reserved
   for write actions; a bulk-selected table of 50 rows should not
   flood the left rail with brand colour. */
.rio-checkbox:checked {
  background: var(--rio-ink-800);
  border-color: var(--rio-ink-800);
}
.rio-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid #FFFFFF;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.rio-checkbox:focus-visible { outline: 3px solid var(--rio-accent); outline-offset: 2px; }

/* The outer form/card footer: tinted strip with left anchor + right
   action group, pushed apart via space-between. Also applies to
   the delete-confirmation card where `.rio-form-footer` sits as a
   sibling of `.rio-card-body` inside the card — the bottom radius
   and top hairline both land correctly in that layout too. */
.rio-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rio-s-3);
  padding: var(--rio-s-4) var(--rio-s-6);
  border-top: 1px solid var(--rio-border);
  background: var(--rio-ink-50);
  border-bottom-left-radius: var(--rio-radius);
  border-bottom-right-radius: var(--rio-radius);
}

/* The nested action group on the right side of the footer — tight
   button row, no padding/border/bg of its own. */
.rio-footer-actions {
  display: flex;
  align-items: center;
  gap: var(--rio-s-2);
  flex-wrap: wrap;
}

/* A bare `<a class="rio-btn">` in the footer uses the standard button
   styling; the "anchor" link on the left (e.g. "Back to patients")
   renders as a muted-text link, not a boxed button, matching the
   reference. */
.rio-form-footer > a:not(.rio-btn) {
  font-size: 14px;
  font-weight: 500;
  color: var(--rio-text-muted);
}
.rio-form-footer > a:not(.rio-btn):hover {
  color: var(--rio-ink-900);
  text-decoration: none;
}

.rio-field-sensitive {
  display: inline-flex;
  align-items: center;
  gap: var(--rio-s-1);
  padding: 3px var(--rio-s-2);
  border-radius: var(--rio-radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--rio-warning-text);
  background: var(--rio-warning-soft);
  border: 1px solid var(--rio-warning-border);
}

/* ═════════════════════════════════════════════════════════════════
 * Cards
 * ═════════════════════════════════════════════════════════════════ */

.rio-card {
  background: var(--rio-surface);
  border: 1px solid var(--rio-border);
  border-radius: var(--rio-radius);
  overflow: hidden;
  /* Small lift so the white card reads as an object on top of the
     tinted body bg. Keeps the admin from looking like an unbroken
     sheet of white. */
  box-shadow: var(--rio-shadow-sm);
}
.rio-card.rio-form,
.rio-form.rio-card { overflow: visible; }

.rio-card-header {
  padding: var(--rio-s-5) var(--rio-s-6);
  border-bottom: 1px solid var(--rio-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rio-s-3);
}
.rio-card-title {
  margin: 0;
  font-size: var(--rio-fs-h3);
  font-weight: 600;
  color: var(--rio-ink-900);
}
.rio-card-subtitle {
  margin: var(--rio-s-1) 0 0;
  font-size: 14px;
  color: var(--rio-text-muted);
}
.rio-card-body { padding: var(--rio-card-pad); }

.rio-grid {
  display: grid;
  gap: var(--rio-s-5);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.rio-model-card {
  background: var(--rio-surface);
  border: 1px solid var(--rio-border);
  border-radius: var(--rio-radius);
  padding: var(--rio-s-5);
  display: flex;
  flex-direction: column;
  gap: var(--rio-s-3);
  transition: border-color 0.08s ease, box-shadow 0.08s ease;
}
.rio-model-card:hover {
  border-color: var(--rio-border-strong);
  box-shadow: var(--rio-shadow);
}
.rio-model-card-head {
  display: flex;
  align-items: center;
  gap: var(--rio-s-3);
}
.rio-model-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--rio-radius-sm);
  background: var(--rio-ink-100);
  color: var(--rio-ink-700);
}
.rio-model-card-icon svg { width: 20px; height: 20px; }
.rio-model-name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--rio-ink-900);
  line-height: 1.3;
}
.rio-model-name a { color: inherit; }
.rio-model-name a:hover { color: var(--rio-primary); text-decoration: none; }
.rio-model-count {
  font-size: 13px;
  color: var(--rio-text-muted);
  font-weight: 500;
  margin: 0;
}
.rio-model-count code {
  font-family: var(--rio-font-mono);
  font-size: 12px;
  color: var(--rio-ink-700);
  background: var(--rio-ink-50);
  padding: 1px 6px;
  border-radius: var(--rio-radius-sm);
}
.rio-model-card-actions {
  display: flex;
  gap: var(--rio-s-2);
  margin-top: auto;
}

/* ═════════════════════════════════════════════════════════════════
 * List card — filter strip + bulk bar + table
 * ═════════════════════════════════════════════════════════════════ */

.rio-table-wrap {
  background: var(--rio-surface);
  border: 1px solid var(--rio-border);
  border-radius: var(--rio-radius);
  overflow: hidden;
  /* Subtle lift against the tinted body bg so the card reads as
     one visual unit separated from the admin frame. */
  box-shadow: var(--rio-shadow-sm);
}

/* Filter strip — tinted (ink-50) so it reads as a distinct control
   surface, clearly separated from both the darker body bg and the
   white table rows below. Padding tightened vs v7 for a denser,
   more operator-friendly toolbar on laptop widths. */
.rio-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rio-s-3);
  padding: var(--rio-s-4) var(--rio-s-5);
  background: var(--rio-ink-50);
  border-bottom: 1px solid var(--rio-border);
}
.rio-table-toolbar .rio-select,
.rio-bulk-bar .rio-select,
.rio-bulk-form .rio-select {
  width: auto;
  min-width: 160px;
}
/* Domain + relation filter dropdowns on the main toolbar. Tightened
   vs v7: 180px is enough for "All priorities" / "All patients" on
   most screens without truncation, and keeps the whole strip on a
   single row at 1366-width laptops. */
.rio-table-toolbar .rio-select:not(.rio-select-sort) {
  min-width: 180px;
}
/* Sort select stays the most compact control — terse labels
   ("Newest first", "ID ↑") don't need width. Pushed to the right of
   the filter cluster via `margin-left: auto` so the "Search + Reset"
   action buttons always sit at the far right of the toolbar. */
.rio-table-toolbar .rio-select-sort {
  min-width: 140px;
  margin-left: auto;
}

/* All toolbar controls share the same height so they line up
   perfectly regardless of which filters a model declares. 42px
   (down from 48) reads as a dense operator toolbar without
   clipping the 15-px input text. */
.rio-table-toolbar .rio-input,
.rio-table-toolbar .rio-select,
.rio-table-toolbar .rio-btn { height: 42px; }

/* Search input — the primary control on the strip. Plain white
   surface; the rust-coloured search icon plus the field itself are
   the affordances. No tint, no decorative fill. The server emits a
   bare `<input type="search">` (no `.rio-input` class), so the
   selectors target the actual input element — both the typed and
   class-tagged variants. */
.rio-search {
  position: relative;
  /* Tightened from v7. The toolbar now carries domain filters,
     relation filters, sort, and submit — the search no longer needs
     to dominate the row. Still the first flex child so it gets
     priority when the strip has spare width. */
  flex: 1 1 320px;
  max-width: 460px;
  min-width: 260px;
}
.rio-search input,
.rio-search .rio-input {
  width: 100%;
  font-family: inherit;
  font-size: var(--rio-fs-body-m);
  font-weight: 500;
  color: var(--rio-ink-900);
  background: var(--rio-surface);
  border: 1px solid var(--rio-border-strong);
  border-radius: var(--rio-radius);
  padding: 10px 14px 10px 42px;
  line-height: 1.5;
  height: 42px;
  transition: border-color 0.08s ease, box-shadow 0.08s ease;
  -webkit-appearance: none;
          appearance: none;
}
.rio-search input::placeholder,
.rio-search .rio-input::placeholder {
  color: var(--rio-text-subtle);
  font-weight: 500;
}
.rio-search input:focus,
.rio-search .rio-input:focus {
  outline: none;
  border-color: var(--rio-accent);
  box-shadow: 0 0 0 3px var(--rio-accent-ring);
}
/* Strip Safari / Chrome `type="search"` extras that would collide
   with our custom padding. */
.rio-search input[type="search"]::-webkit-search-cancel-button,
.rio-search input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.rio-search > svg,
.rio-search > svg:first-of-type,
.rio-search > :first-child:is(svg) {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--rio-rust-600);
  pointer-events: none;
}
.rio-search > label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Toolbar action cluster (Search button + Reset). Tighter gap so the
   two buttons feel like a pair, not a loose row of controls. */
.rio-toolbar-actions {
  display: flex;
  gap: var(--rio-s-2);
  flex-wrap: wrap;
  align-items: center;
}

/* Toolbar submit button — explicitly 42px to match the input / select
   line, and padded generously so the icon-plus-text label doesn't
   feel cramped against the tinted strip. Stays neutral (rust is
   reserved for write actions) but reads as a firm "go" control. */
.rio-table-toolbar .rio-btn[type="submit"],
.rio-table-toolbar button.rio-btn {
  padding: 0 18px;
  font-weight: 600;
}

.rio-search-intent {
  font-size: 13px;
  color: var(--rio-text-subtle);
  padding: 4px var(--rio-s-2);
  background: var(--rio-ink-50);
  border: 1px solid var(--rio-border);
  border-radius: var(--rio-radius-sm);
  font-weight: 600;
  font-family: var(--rio-font-mono);
}

.rio-count {
  margin-left: auto;
  font-size: 14px;
  color: var(--rio-text-muted);
  font-weight: 500;
  white-space: nowrap;
}

/* Bulk-action bar — shares the ink-50 tint with the filter strip
   above so the two control surfaces read as one continuous band
   above the white table body. */
.rio-bulk-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rio-s-3);
  padding: var(--rio-s-3) var(--rio-s-5);
  background: var(--rio-ink-50);
  border-bottom: 1px solid var(--rio-border);
  font-size: 14px;
  color: var(--rio-text-muted);
}
.rio-bulk-form { display: contents; }
.rio-bulk-count {
  margin-left: auto;
  color: var(--rio-ink-900);
  font-weight: 600;
  white-space: nowrap;
}
.rio-bulk-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--rio-ink-800);
  white-space: nowrap;
}
.rio-bulk-list,
.rio-bulk-item { display: inline-flex; align-items: center; gap: var(--rio-s-2); }

/* Table — sticky thead (ink-100), subtle zebra (ink-50 on even rows),
   stronger hover (ink-100) so the active row beats both base states.
   Thead sticks below the topbar via `--rio-topbar-h` so column
   headers stay visible while scrolling a long list. */
.rio-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--rio-fs-body-m);
}
.rio-table thead {
  position: sticky;
  top: var(--rio-topbar-h);
  z-index: 3;
  background: var(--rio-ink-100);
  border-bottom: 1px solid var(--rio-border);
}
.rio-table th {
  padding: var(--rio-s-4) var(--rio-row-x);
  text-align: left;
  font-size: var(--rio-fs-xs);
  font-weight: 700;
  color: var(--rio-ink-700);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.rio-table tbody tr {
  border-bottom: 1px solid var(--rio-border);
  transition: background 0.06s ease;
}
.rio-table tbody tr:nth-child(even) { background: var(--rio-ink-50); }
.rio-table tbody tr:hover,
.rio-table tbody tr:nth-child(even):hover { background: var(--rio-ink-100); }
.rio-table td {
  padding: var(--rio-row-y) var(--rio-row-x);
  color: var(--rio-ink-900);
  vertical-align: middle;
  font-weight: 500;
}

.rio-cell-check { width: 48px; padding-left: var(--rio-row-x); padding-right: 0; }
.rio-cell-id {
  font-family: var(--rio-font-mono);
  font-size: 14px;
  color: var(--rio-ink-700);
  white-space: nowrap;
}
.rio-cell-primary { font-weight: 600; color: var(--rio-ink-900); }
.rio-cell-muted { color: var(--rio-text-muted); }
.rio-cell-num {
  font-family: var(--rio-font-mono);
  font-size: 14px;
  color: var(--rio-ink-700);
  font-weight: 500;
}
.rio-cell-actions,
.rio-row-actions {
  text-align: right;
  white-space: nowrap;
}
.rio-row-actions .rio-btn { margin-left: var(--rio-s-2); }

/* Pagination ------------------------------------------------------- */
.rio-table-wrap > nav,
.rio-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rio-s-3);
  padding: var(--rio-s-4) var(--rio-s-6);
  border-top: 1px solid var(--rio-border);
  background: var(--rio-ink-50);
  font-size: 14px;
  color: var(--rio-text-muted);
}

/* ═════════════════════════════════════════════════════════════════
 * Pills / badges
 * ═════════════════════════════════════════════════════════════════ */

.rio-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--rio-s-2);
  padding: 4px 10px;
  border-radius: var(--rio-radius-sm);
  font-size: var(--rio-fs-small);
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid var(--rio-border);
  background: var(--rio-ink-100);
  color: var(--rio-ink-800);
}
.rio-pill::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rio-ink-500);
  flex-shrink: 0;
}
.rio-pill-emerald {
  color: var(--rio-success-text);
  background: var(--rio-success-soft);
  border-color: var(--rio-success-border);
}
.rio-pill-emerald::before { background: var(--rio-success); }
.rio-pill-amber {
  color: var(--rio-warning-text);
  background: var(--rio-warning-soft);
  border-color: var(--rio-warning-border);
}
.rio-pill-amber::before { background: var(--rio-warning); }
.rio-pill-rose {
  color: var(--rio-danger-text);
  background: var(--rio-danger-soft);
  border-color: var(--rio-danger-border);
}
.rio-pill-rose::before { background: var(--rio-danger); }
.rio-pill-indigo {
  color: #3538CD;
  background: #EEF4FF;
  border-color: #C7D7FE;
}
.rio-pill-indigo::before { background: #444CE7; }
.rio-pill-slate {
  color: var(--rio-ink-700);
  background: var(--rio-ink-100);
  border-color: var(--rio-border);
}
.rio-pill-slate::before { background: var(--rio-ink-500); }

.rio-risk-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--rio-radius-sm);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.rio-risk-badge[data-risk="low"] {
  color: var(--rio-success-text);
  background: var(--rio-success-soft);
  border: 1px solid var(--rio-success-border);
}
.rio-risk-badge[data-risk="medium"] {
  color: var(--rio-warning-text);
  background: var(--rio-warning-soft);
  border: 1px solid var(--rio-warning-border);
}
.rio-risk-badge[data-risk="high"],
.rio-risk-badge[data-risk="critical"] {
  color: var(--rio-danger-text);
  background: var(--rio-danger-soft);
  border: 1px solid var(--rio-danger-border);
}

/* ═════════════════════════════════════════════════════════════════
 * Empty state
 * ═════════════════════════════════════════════════════════════════ */

.rio-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--rio-s-16) var(--rio-s-6);
  text-align: center;
  background: var(--rio-surface);
  border: 1px solid var(--rio-border);
  border-radius: var(--rio-radius);
  gap: var(--rio-s-4);
}
.rio-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--rio-radius);
  background: var(--rio-ink-100);
  color: var(--rio-ink-600);
}
.rio-empty-icon svg { width: 28px; height: 28px; }
.rio-empty h3 {
  margin: 0;
  font-size: var(--rio-fs-h3);
  font-weight: 600;
  color: var(--rio-ink-900);
}
.rio-empty p,
.rio-empty-hint {
  margin: 0;
  font-size: var(--rio-fs-body-m);
  color: var(--rio-text-muted);
  max-width: 52ch;
  line-height: 1.6;
}

/* ═════════════════════════════════════════════════════════════════
 * Alerts
 * ═════════════════════════════════════════════════════════════════ */

.rio-alert {
  display: flex;
  gap: var(--rio-s-3);
  padding: var(--rio-s-4) var(--rio-s-5);
  border-radius: var(--rio-radius);
  border: 1px solid var(--rio-border);
  background: var(--rio-surface);
  font-size: var(--rio-fs-body-s);
  color: var(--rio-ink-800);
  line-height: 1.55;
}
.rio-alert-info {
  background: #EFF8FF;
  border-color: #B2DDFF;
  color: #175CD3;
}
.rio-alert-warn {
  background: var(--rio-warning-soft);
  border-color: var(--rio-warning-border);
  color: var(--rio-warning-text);
}
.rio-alert-error {
  background: var(--rio-danger-soft);
  border-color: var(--rio-danger-border);
  color: var(--rio-danger-text);
}

.rio-dashboard-alerts {
  display: flex;
  flex-direction: column;
  gap: var(--rio-s-3);
}
.rio-dashboard-alert {
  display: flex;
  gap: var(--rio-s-3);
  padding: var(--rio-s-4) var(--rio-s-5);
  border-radius: var(--rio-radius);
  background: var(--rio-surface);
  border: 1px solid var(--rio-border);
  font-size: var(--rio-fs-body-s);
  color: var(--rio-ink-800);
}

.rio-suggestion-card {
  display: flex;
  gap: var(--rio-s-3);
  align-items: flex-start;
  padding: var(--rio-s-4) var(--rio-s-5);
  border-radius: var(--rio-radius);
  background: var(--rio-surface);
  border: 1px solid var(--rio-border);
  border-left: 3px solid var(--rio-primary);
}

/* Related inverse-relation grid on detail/edit pages. Replaces the
   inline grid style the server used to emit. */
.rio-related-grid {
  list-style: none;
  margin: 0;
  padding: var(--rio-card-pad);
  display: grid;
  gap: var(--rio-s-3);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.rio-related-grid > li { margin: 0; }
.rio-related-grid .rio-suggestion-card {
  flex-direction: column;
  gap: var(--rio-s-1);
  text-decoration: none;
  transition: border-color 0.08s ease, box-shadow 0.08s ease;
}
.rio-related-grid .rio-suggestion-card:hover {
  border-color: var(--rio-border-strong);
  box-shadow: var(--rio-shadow);
}
.rio-related-grid .rio-suggestion-card strong {
  font-size: var(--rio-fs-body-s);
  font-weight: 600;
  color: var(--rio-ink-900);
}
.rio-related-grid .rio-suggestion-card .rio-cell-id {
  font-size: 13px;
  color: var(--rio-text-muted);
}
.rio-related-grid .rio-suggestion-card .rio-cell-muted {
  font-size: 12px;
}
.rio-suggestion-actions {
  margin-left: auto;
  display: flex;
  gap: var(--rio-s-2);
  flex-shrink: 0;
}
.rio-suggestion-action { font-size: var(--rio-fs-body-s); font-weight: 600; }

/* ═════════════════════════════════════════════════════════════════
 * Meta list
 * ═════════════════════════════════════════════════════════════════ */

.rio-meta {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.rio-meta-item {
  display: flex;
  align-items: center;
  gap: var(--rio-s-5);
  padding: var(--rio-s-4) 0;
  border-bottom: 1px solid var(--rio-border);
}
.rio-meta-item:last-child { border-bottom: none; }
.rio-meta-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rio-text-subtle);
  width: 160px;
  flex-shrink: 0;
}
.rio-meta-value {
  font-size: var(--rio-fs-body-m);
  color: var(--rio-ink-900);
  font-weight: 500;
}

/* When a meta list sits directly inside a card (profile page), give
   it horizontal padding matching the card header so key/value rows
   don't stretch to the raw card edges. The inline
   `style="margin:0;border:0;border-radius:0"` the server emits just
   neutralises the standalone defaults above; this block supplies the
   in-card spacing on top. */
.rio-card > .rio-meta {
  padding: 0 var(--rio-s-6);
}
.rio-card > .rio-meta > .rio-meta-item:first-child {
  padding-top: var(--rio-s-5);
}
.rio-card > .rio-meta > .rio-meta-item:last-child {
  padding-bottom: var(--rio-s-5);
  border-bottom: 1px solid var(--rio-border);
}

/* When `.rio-meta` sits at container level (edit pages show ID and
   created_at this way), render its items inline as a compact
   metadata row — no full-width rows with hairlines, just a slim
   label/value pair or two. Padding keeps it aligned with the
   centred form rail on wide screens. */
.rio-container > .rio-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rio-s-5);
  padding: 0;
  background: none;
  border: none;
  margin-top: calc(-1 * var(--rio-container-gap) / 2);
  margin-bottom: calc(-1 * var(--rio-container-gap) / 2);
}
.rio-container > .rio-meta > .rio-meta-item {
  padding: 0;
  border-bottom: none;
  gap: var(--rio-s-2);
}
.rio-container > .rio-meta .rio-meta-label {
  width: auto;
  min-width: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
}
.rio-container > .rio-meta .rio-meta-value {
  font-size: 14px;
}

/* ═════════════════════════════════════════════════════════════════
 * Auth shell
 * ═════════════════════════════════════════════════════════════════ */

.rio-auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--rio-bg);
  padding: var(--rio-s-6);
}
.rio-auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--rio-surface);
  border: 1px solid var(--rio-border);
  border-radius: var(--rio-radius-lg);
  box-shadow: var(--rio-shadow-lg);
  padding: var(--rio-s-8);
  display: flex;
  flex-direction: column;
  gap: var(--rio-s-5);
}
.rio-auth-logo {
  display: flex;
  align-items: center;
  gap: var(--rio-s-3);
}
.rio-auth-logo .rio-env-chip { margin-left: auto; }
.rio-auth-title {
  margin: 0;
  font-size: var(--rio-fs-h2);
  font-weight: 700;
  color: var(--rio-ink-900);
}
.rio-auth-subtitle { margin: 0; font-size: var(--rio-fs-body-s); color: var(--rio-text-muted); }
.rio-auth-footer {
  font-size: 13px;
  color: var(--rio-text-muted);
  text-align: center;
  margin: var(--rio-s-1) 0 0;
}

/* ═════════════════════════════════════════════════════════════════
 * Error shell
 * ═════════════════════════════════════════════════════════════════ */

.rio-error-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--rio-bg);
  padding: var(--rio-s-6);
}
.rio-error-card {
  width: 100%;
  max-width: 600px;
  background: var(--rio-surface);
  border: 1px solid var(--rio-border);
  border-radius: var(--rio-radius-lg);
  box-shadow: var(--rio-shadow-lg);
  padding: var(--rio-s-8);
  display: flex;
  flex-direction: column;
  gap: var(--rio-s-4);
}
.rio-error-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--rio-radius);
  background: var(--rio-danger-soft);
  color: var(--rio-danger);
}
.rio-error-status {
  font-family: var(--rio-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rio-danger);
}
.rio-error-title { margin: 0; font-size: var(--rio-fs-h2); font-weight: 700; color: var(--rio-ink-900); }
.rio-error-body { margin: 0; font-size: var(--rio-fs-body-s); color: var(--rio-text-muted); line-height: 1.55; }
.rio-error-actions { display: flex; gap: var(--rio-s-2); margin-top: var(--rio-s-1); }

/* ═════════════════════════════════════════════════════════════════
 * Audit timeline
 * ═════════════════════════════════════════════════════════════════ */

.rio-audit-timeline {
  display: flex;
  flex-direction: column;
  background: var(--rio-surface);
  border: 1px solid var(--rio-border);
  border-radius: var(--rio-radius);
  overflow: hidden;
}
.rio-audit-item {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: var(--rio-s-5);
  align-items: baseline;
  padding: var(--rio-s-4) var(--rio-s-6);
  border-bottom: 1px solid var(--rio-border);
}
.rio-audit-item:last-child { border-bottom: none; }
.rio-audit-when { font-size: 13px; color: var(--rio-text-subtle); white-space: nowrap; }
.rio-audit-head { font-size: var(--rio-fs-body-s); color: var(--rio-ink-900); font-weight: 500; }
.rio-audit-who,
.rio-audit-object { font-weight: 600; color: var(--rio-ink-900); }
.rio-audit-meta { font-size: 12px; color: var(--rio-text-subtle); }
.rio-audit-ip { font-size: 12px; color: var(--rio-text-muted); }
.rio-audit-summary { font-size: 13px; color: var(--rio-text-muted); margin-top: 2px; }

/* ═════════════════════════════════════════════════════════════════
 * Schema diff / reload / plan preview
 * ═════════════════════════════════════════════════════════════════ */

.rio-schema-diff {
  font-size: 13px;
  line-height: 1.55;
  background: var(--rio-ink-900);
  color: var(--rio-ink-100);
  padding: var(--rio-s-4) var(--rio-s-5);
  border-radius: var(--rio-radius);
  overflow-x: auto;
}
.rio-schema-diff-add { color: #6CE9A6; }
.rio-schema-reload {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rio-s-3);
  padding: var(--rio-s-3) var(--rio-s-5);
  background: var(--rio-surface);
  border: 1px solid var(--rio-border);
  border-radius: var(--rio-radius);
  font-size: var(--rio-fs-body-s);
  color: var(--rio-text-muted);
}
.rio-schema-reload-meta {
  font-size: 12px;
  color: var(--rio-ink-700);
  letter-spacing: 0.01em;
}
.rio-plan-preview {
  font-size: 13px;
  background: var(--rio-ink-900);
  color: var(--rio-ink-100);
  padding: var(--rio-s-4) var(--rio-s-5);
  border-radius: var(--rio-radius);
  white-space: pre;
  overflow-x: auto;
  line-height: 1.55;
}
.rio-apply-summary {
  background: var(--rio-surface);
  border: 1px solid var(--rio-border);
  border-radius: var(--rio-radius);
  padding: var(--rio-s-4) var(--rio-s-5);
  font-size: var(--rio-fs-body-s);
  color: var(--rio-ink-800);
  line-height: 1.6;
}

/* ═════════════════════════════════════════════════════════════════
 * PII / sensitive-field toggles
 * ═════════════════════════════════════════════════════════════════ */

.rio-pii {
  display: inline-flex;
  align-items: center;
  gap: var(--rio-s-2);
  font-family: var(--rio-font-mono);
  font-size: 14px;
  color: var(--rio-ink-700);
}
.rio-pii-toggle {
  background: none;
  border: none;
  padding: 3px var(--rio-s-1);
  color: var(--rio-text-subtle);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--rio-radius-sm);
}
.rio-pii-toggle:hover { background: var(--rio-ink-100); color: var(--rio-ink-900); }

/* ═════════════════════════════════════════════════════════════════
 * Danger zone
 * ═════════════════════════════════════════════════════════════════ */

/* Danger zone — a horizontal panel on the edit page: explanatory
   copy on the left, destructive action button pinned to the right.
   Wraps on narrow screens. */
.rio-danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rio-s-5);
  border: 1px solid var(--rio-danger-border);
  background: var(--rio-danger-soft);
  border-radius: var(--rio-radius);
  padding: var(--rio-s-5) var(--rio-s-6);
  flex-wrap: wrap;
}
.rio-danger-copy {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rio-s-1);
}
.rio-danger-title {
  display: flex;
  align-items: center;
  gap: var(--rio-s-2);
  margin: 0;
  font-size: var(--rio-fs-body-s);
  font-weight: 700;
  color: var(--rio-danger-text);
}
.rio-danger-title svg { width: 18px; height: 18px; flex-shrink: 0; }
.rio-danger-hint {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--rio-danger-text);
  line-height: 1.55;
}
.rio-danger-zone > .rio-btn-danger { flex-shrink: 0; }

/* ═════════════════════════════════════════════════════════════════
 * Details / <summary>
 * ═════════════════════════════════════════════════════════════════ */

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* ═════════════════════════════════════════════════════════════════
 * Responsive
 * ═════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .rio-app { flex-direction: column; }
  .rio-sidebar {
    width: 100%;
    height: auto;
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--rio-border);
  }
  .rio-nav { flex-direction: row; flex-wrap: wrap; overflow-x: auto; }
  .rio-container > *:not(.rio-topbar) {
    margin-left: var(--rio-s-5);
    margin-right: var(--rio-s-5);
  }
  /* On mobile the topbar is static (not sticky) so the bigger
     desktop height eats too much vertical space. Trim back to a
     compact 56 px. Sticky-thead is also disabled below (re-anchored
     to static) so this doesn't affect column-header docking. */
  .rio-topbar {
    padding: var(--rio-s-3) var(--rio-s-5);
    min-height: 56px;
    box-shadow: 0 1px 0 var(--rio-border);
  }
  /* On mobile the topbar is static, so thead can't stick relative to
     it — reset sticky so it scrolls with the table. */
  .rio-table thead { position: static; }
}

/* ═════════════════════════════════════════════════════════════════
 * Columns toggle (Change 2) — native <details> with an absolutely-
 * positioned panel. Layout-only rules; reuses existing tokens for
 * background, border, and radius. No new colours, no typography
 * changes, no animation.
 * ═════════════════════════════════════════════════════════════════ */

.rio-cols-ctl {
  position: relative;
  display: inline-block;
}
.rio-cols-ctl > summary {
  list-style: none;
  cursor: pointer;
}
.rio-cols-ctl > summary::-webkit-details-marker { display: none; }
.rio-cols-ctl > summary::marker { content: ""; }

.rio-cols-panel {
  position: absolute;
  top: calc(100% + var(--rio-s-2));
  right: 0;
  z-index: 30;
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  padding: var(--rio-s-2);
  background: var(--rio-surface);
  border: 1px solid var(--rio-border);
  border-radius: var(--rio-radius);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rio-cols-panel-row {
  display: flex;
  align-items: center;
  gap: var(--rio-s-2);
  padding: var(--rio-s-1) var(--rio-s-2);
  border-radius: var(--rio-radius-sm);
  cursor: pointer;
}
.rio-cols-panel-row:hover { background: var(--rio-ink-50); }
.rio-cols-panel-row input[type="checkbox"] { margin: 0; flex-shrink: 0; }
.rio-cols-panel-row input[disabled] + span { color: var(--rio-text-subtle); }
.rio-cols-panel-row > span { flex: 1 1 auto; }

/* ═════════════════════════════════════════════════════════════════
 * More filters panel (Change 3) — sibling of the primary toolbar
 * controls inside the same <form class="rio-table-toolbar">. The
 * panel wraps to its own line via `flex: 0 0 100%`; content is a
 * simple 3-column grid. Hidden by default via the `hidden`
 * attribute on the <div>; JS flips the attribute.
 * ═════════════════════════════════════════════════════════════════ */

.admin-list-more-filters {
  flex: 0 0 100%;
  margin-top: 8px;
}

.admin-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* ═════════════════════════════════════════════════════════════════
 * Active filter chips (Change 4) — rendered between the toolbar and
 * the bulk-action form, outside any <form>. Layout only: the tokens,
 * border, and radius reuse the existing rio palette. Each chip's
 * `×` is a plain <a>; there is no JS — removal is a full navigation.
 * ═════════════════════════════════════════════════════════════════ */

.admin-filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rio-s-1);
  margin: var(--rio-s-2) 0;
}

.admin-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--rio-s-1);
  padding: var(--rio-s-1) var(--rio-s-2);
  border: 1px solid var(--rio-border);
  border-radius: var(--rio-radius-sm);
  background: var(--rio-surface);
  line-height: 1.2;
}

.admin-filter-chip-label {
  color: var(--rio-text-subtle);
}

.admin-filter-chip-value {
  font-weight: 500;
}

.admin-filter-chip a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  text-decoration: none;
  color: var(--rio-text-subtle);
  border-radius: var(--rio-radius-sm);
}

.admin-filter-chip a:hover {
  color: var(--rio-text);
  background: var(--rio-ink-50);
}

.admin-filter-clear-all {
  margin-left: var(--rio-s-1);
  color: var(--rio-text-subtle);
  text-decoration: underline;
}

.admin-filter-clear-all:hover {
  color: var(--rio-text);
}

/* ═════════════════════════════════════════════════════════════════
 * Row expansion (Change 5) — main + expand row pair in the list
 * table. The expand row is always in the DOM and carries the
 * `hidden` attribute; a single click handler in the inline IIFE
 * flips the attribute plus the button's chevron + aria-expanded.
 * Layout only — no colors, no typography, no animation.
 * ═════════════════════════════════════════════════════════════════ */

.rio-cell-expand {
  width: 32px;
  text-align: center;
}

.rio-expand-btn {
  background: transparent;
  border: 0;
  cursor: pointer;
  line-height: 1;
}

.rio-row-expand > td {
  padding: var(--rio-s-3);
}

.rio-expand-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--rio-s-2);
  margin: 0;
}

.rio-expand-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rio-expand-field dd {
  margin: 0;
}