/*
 * Roswell Data — Vireo look on Bootstrap 5.3 (same file as the Roswell PIM; keep them in sync)
 * Load order: bootstrap.min.css -> vireo-theme.css -> app.css
 * Brand swap later: change only the --rx-* tokens in section 1.
 * Theme is driven by <html data-bs-theme="dark|light">.
 */

/* =====================================================================
   1. BRAND TOKENS (the only values to edit for Roswell branding)
   ===================================================================== */
:root {
  --rx-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --rx-font-display: "Red Hat Display", var(--rx-font-sans);

  --rx-radius-card: 24px;
  --rx-radius-lg: 18px;
  --rx-radius-md: 14px;   /* buttons, inputs, dropdowns, modals */
  --rx-radius-sm: 12px;
  --rx-radius-xs: 8px;    /* badges, chips */

  --rx-space-card: 24px;
  --rx-sidebar-w: 264px;
  --rx-topbar-h: 64px;
  --rx-motion: 200ms cubic-bezier(0.2, 0, 0, 1);
}

/* Light.

   Every value below is derived, not picked. The brand gives three colours —
   accent #0093C9, ink #0E1821, deep #031F33 — and the rest are steps at those
   two hues (233.5° accent, 243.5° neutral, OKLCH) chosen so the contrast a
   reader needs is met rather than hoped for. The ratios in the comments are
   WCAG 2.1, measured against the background each token actually sits on. */
[data-bs-theme="light"] {
  color-scheme: light;
  --rx-canvas: #F4F8FB;
  --rx-surface: #FFFFFF;
  --rx-surface-subtle: #ECF1F6;
  --rx-surface-raised: rgba(255, 255, 255, 0.80);
  --rx-surface-overlay: rgba(255, 255, 255, 0.96);
  --rx-border: #D8E0E7;
  --rx-border-strong: #CAD4DD;
  --rx-text-strong: #0E1821;   /* the brand ink itself — 17.93:1 on white */
  --rx-text: #374653;          /*  9.09:1 on canvas */
  --rx-text-muted: #4E6171;    /*  6.01:1 on canvas */
  --rx-text-subtle: #5E7385;   /*  4.61:1 on canvas — the old #6E7A92 sat at 4.06 */
  --rx-accent: #0078A5;        /*  4.65:1 on canvas. The brand #0093C9 is 3.49:1
                                  on white, which is a UI-component colour, not
                                  a text one — so links and buttons take the step
                                  below it and the brand hue is unchanged. */
  --rx-accent-hover: #00678E;
  --rx-accent-wash: #DDF2FF;
  --rx-accent-rgb: 0, 120, 165;
  --rx-on-accent: #FFFFFF;     /*  4.96:1 on the accent */

  /* Status. Reserved: never a series colour, never the accent. Each clears
     4.6:1 on its own 16% wash, on the surface and on the canvas. */
  --rx-success: #007447;
  --rx-warning: #895D00;
  --rx-danger:  #AF3E37;
  --rx-info:    #006C95;

  --rx-shadow-card: 0 1px 2px rgba(3, 31, 51, 0.05), 0 8px 24px rgba(3, 31, 51, 0.07);

  /* Charts.
     One hue, six steps, light -> dark. Every chart in this app encodes either
     magnitude (a heatmap) or an ordered position (funnel stages, completeness
     bands), and both of those are read from lightness — so there is deliberately
     no categorical palette here. A nominal bar chart uses step 3 for every bar:
     colouring nominal bars by their value spends the identity channel
     re-encoding what bar length already shows.
     Six steps, because the readiness funnel has six stages. Validated light ->
     dark on #FFFFFF: monotone L, every adjacent step ΔL >= 0.07, light end
     2.05:1 against the card surface, hue spread 0°. The four-step subset the
     completeness bands use (1, 3, 4, 6) was validated on its own. */
  --rx-chart-1: #44BEF9;
  --rx-chart-2: #22A7E1;
  --rx-chart-3: #0090C5;
  --rx-chart-4: #0079A7;
  --rx-chart-5: #006389;
  --rx-chart-6: #004E6D;
  --rx-chart-empty: #E7EDF3;
  --rx-chart-grid: #E4EBF1;
  --rx-chart-axis: #5E7385;
}

/* Dark (default). The brand's deep navy is the card surface, so the app is
   Roswell blue rather than a neutral slate with a blue button on it. */
[data-bs-theme="dark"] {
  color-scheme: dark;
  --rx-canvas: #000E1C;
  --rx-surface: #031F33;       /* the brand deep, unchanged */
  --rx-surface-subtle: rgba(10, 45, 70, 0.80);
  --rx-surface-raised: rgba(2, 22, 37, 0.72);
  --rx-surface-overlay: rgba(4, 26, 43, 0.96);
  --rx-border: rgba(255, 255, 255, 0.08);
  --rx-border-strong: rgba(255, 255, 255, 0.14);
  --rx-text-strong: #E8EEF2;   /* 14.38:1 on the surface */
  --rx-text: #D1D9DF;          /* 11.78:1 */
  --rx-text-muted: #8D9DAA;    /*  6.04:1 */
  --rx-text-subtle: #778897;   /*  4.61:1 — the old #646E80 sat at 3.39 */
  --rx-accent: #0093C9;        /*  4.82:1 on the surface: the brand accent needs
                                  no adjustment against a dark ground */
  --rx-accent-hover: #30A9E0;
  --rx-accent-wash: #0E3649;
  --rx-accent-rgb: 0, 147, 201;
  --rx-on-accent: #031F33;     /*  4.82:1 on the accent */

  --rx-success: #1AAF6F;
  --rx-warning: #C78A00;
  --rx-danger:  #E87166;
  --rx-info:    #00A5E0;

  --rx-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 32px rgba(0, 0, 0, 0.45);

  /* The dark ramp is chosen against the dark surface, not flipped from the
     light one: on #031F33 the step nearest the surface is the one at risk of
     vanishing, and it clears it at 2.31:1. Charts use the ramp reversed here,
     so more is lighter. Same checks: monotone L, ΔL >= 0.08, hue spread 1°. */
  --rx-chart-1: #AAE0FF;
  --rx-chart-2: #5EC9FF;
  --rx-chart-3: #2DAEE7;
  --rx-chart-4: #0092C8;
  --rx-chart-5: #0077A4;
  --rx-chart-6: #005D81;
  /* Opaque, not a translucent white: ApexCharts draws legend swatches on their
     own background, where an alpha fill renders near-white and the "no data"
     key ends up the most prominent thing in the legend. */
  --rx-chart-empty: #0B2B41;
  --rx-chart-grid: rgba(255, 255, 255, 0.08);
  --rx-chart-axis: #8D9DAA;
}

/* =====================================================================
   2. MAP TOKENS ONTO BOOTSTRAP VARIABLES
   ===================================================================== */
[data-bs-theme] {
  --bs-body-font-family: var(--rx-font-sans);
  --bs-body-font-size: 0.875rem;
  --bs-body-bg: var(--rx-canvas);
  --bs-body-color: var(--rx-text);
  --bs-emphasis-color: var(--rx-text-strong);
  --bs-secondary-color: var(--rx-text-muted);
  --bs-tertiary-color: var(--rx-text-subtle);
  --bs-secondary-bg: var(--rx-surface-subtle);
  --bs-tertiary-bg: var(--rx-surface-subtle);
  --bs-border-color: var(--rx-border);
  --bs-border-color-translucent: var(--rx-border);
  --bs-heading-color: var(--rx-text-strong);
  --bs-link-color: var(--rx-accent);
  --bs-link-color-rgb: var(--rx-accent-rgb);
  --bs-link-hover-color: var(--rx-accent-hover);
  --bs-primary: var(--rx-accent);
  --bs-primary-rgb: var(--rx-accent-rgb);
  --bs-border-radius: var(--rx-radius-md);
  --bs-border-radius-sm: var(--rx-radius-sm);
  --bs-border-radius-lg: var(--rx-radius-lg);
  --bs-focus-ring-color: rgba(var(--rx-accent-rgb), 0.35);
}

body { background: var(--rx-canvas); -webkit-font-smoothing: antialiased; }
h1, h2, h3, .h1, .h2, .h3, .rx-kpi { font-family: var(--rx-font-display); letter-spacing: -0.015em; }
.rx-kpi { font-size: 2rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--rx-text-strong); }

/* =====================================================================
   3. COMPONENTS
   ===================================================================== */
.card {
  --bs-card-bg: var(--rx-surface);
  --bs-card-border-color: var(--rx-border);
  --bs-card-border-radius: var(--rx-radius-card);
  --bs-card-inner-border-radius: calc(var(--rx-radius-card) - 1px);
  --bs-card-spacer-x: var(--rx-space-card);
  --bs-card-spacer-y: var(--rx-space-card);
  --bs-card-cap-bg: transparent;
  box-shadow: var(--rx-shadow-card);
}
.card-header { border-bottom-color: var(--rx-border); }
.card-title { font-size: 1.125rem; font-weight: 600; color: var(--rx-text-strong); margin-bottom: 0; }

.btn { --bs-btn-border-radius: var(--rx-radius-md); --bs-btn-font-weight: 500; transition: all var(--rx-motion); }
.btn-primary {
  --bs-btn-bg: var(--rx-accent); --bs-btn-border-color: var(--rx-accent); --bs-btn-color: var(--rx-on-accent);
  --bs-btn-hover-bg: var(--rx-accent-hover); --bs-btn-hover-border-color: var(--rx-accent-hover); --bs-btn-hover-color: var(--rx-on-accent);
  --bs-btn-active-bg: var(--rx-accent-hover); --bs-btn-active-border-color: var(--rx-accent-hover); --bs-btn-active-color: var(--rx-on-accent);
  --bs-btn-disabled-bg: var(--rx-accent); --bs-btn-disabled-border-color: var(--rx-accent);
  border-radius: 999px;
}
.btn-outline-primary {
  --bs-btn-color: var(--rx-accent); --bs-btn-border-color: var(--rx-accent);
  --bs-btn-hover-bg: var(--rx-accent); --bs-btn-hover-border-color: var(--rx-accent); --bs-btn-hover-color: var(--rx-on-accent);
}
.btn-soft { background: var(--rx-surface-subtle); border: 1px solid var(--rx-border); color: var(--rx-text); }
.btn-soft:hover { border-color: var(--rx-border-strong); color: var(--rx-text-strong); }

.form-control, .form-select {
  background-color: var(--rx-surface-subtle);
  border-color: var(--rx-border);
  border-radius: var(--rx-radius-md);
  color: var(--rx-text-strong);
}
.form-control:focus, .form-select:focus {
  background-color: var(--rx-surface-subtle);
  border-color: var(--rx-accent);
  box-shadow: 0 0 0 0.2rem rgba(var(--rx-accent-rgb), 0.25);
}
.form-label { font-size: 0.8125rem; font-weight: 500; color: var(--rx-text-muted); }
.form-check-input:checked { background-color: var(--rx-accent); border-color: var(--rx-accent); }

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--rx-text);
  --bs-table-border-color: var(--rx-border);
  --bs-table-hover-bg: var(--rx-surface-subtle);
  --bs-table-active-bg: var(--rx-accent-wash);
}
.table thead th { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rx-text-subtle); background: var(--rx-surface-subtle); }

.badge { border-radius: var(--rx-radius-xs); font-weight: 500; }
.badge-soft-success { background: color-mix(in srgb, var(--rx-success) 16%, transparent); color: var(--rx-success); }
.badge-soft-warning { background: color-mix(in srgb, var(--rx-warning) 16%, transparent); color: var(--rx-warning); }
.badge-soft-danger  { background: color-mix(in srgb, var(--rx-danger) 16%, transparent);  color: var(--rx-danger); }
.badge-soft-info    { background: color-mix(in srgb, var(--rx-info) 16%, transparent);    color: var(--rx-info); }
.badge-soft-muted   { background: var(--rx-surface-subtle); color: var(--rx-text-muted); }

.dropdown-menu, .modal-content, .offcanvas, .popover, .toast {
  --bs-dropdown-bg: var(--rx-surface-overlay);
  --bs-modal-bg: var(--rx-surface-overlay);
  --bs-offcanvas-bg: var(--rx-surface-overlay);
  --bs-dropdown-border-color: var(--rx-border);
  --bs-modal-border-color: var(--rx-border);
  --bs-dropdown-border-radius: var(--rx-radius-md);
  --bs-modal-border-radius: var(--rx-radius-lg);
  backdrop-filter: blur(16px);
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--rx-accent-wash); --bs-nav-pills-link-active-color: var(--rx-accent); --bs-nav-pills-border-radius: 999px; }
.nav-tabs { --bs-nav-tabs-border-color: var(--rx-border); --bs-nav-tabs-link-active-bg: transparent; --bs-nav-tabs-link-active-color: var(--rx-text-strong); --bs-nav-tabs-link-active-border-color: transparent transparent var(--rx-accent); }
.nav-tabs .nav-link { border-width: 0 0 2px; color: var(--rx-text-muted); }

/* =====================================================================
   4. APP SHELL (sidebar + topbar)
   ===================================================================== */
.rx-shell { display: flex; min-height: 100vh; }
.rx-sidebar {
  width: var(--rx-sidebar-w); flex-shrink: 0;
  background: var(--rx-surface-raised); border-right: 1px solid var(--rx-border); backdrop-filter: blur(20px);
  transition: width var(--rx-motion);
}
.rx-sidebar-inner { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; padding: 20px 14px; }
.rx-sidebar .rx-brand { text-decoration: none; display: flex; align-items: center; gap: 10px; padding: 4px 10px 20px; font-family: var(--rx-font-display); font-weight: 700; color: var(--rx-text-strong); }
.rx-nav-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rx-text-subtle); padding: 16px 12px 6px; }
.rx-nav-link {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--rx-radius-md);
  color: var(--rx-text-muted); text-decoration: none; font-weight: 500; transition: all var(--rx-motion);
}
.rx-nav-link:hover { background: var(--rx-surface-subtle); color: var(--rx-text-strong); }
.rx-nav-link.active { background: var(--rx-accent-wash); color: var(--rx-accent); }
.rx-nav-link i { font-size: 1.125rem; }
.rx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rx-topbar {
  height: var(--rx-topbar-h); position: sticky; top: 0; z-index: 200; display: flex; align-items: center; gap: 12px;
  padding: 0 24px; background: var(--rx-surface-raised); border-bottom: 1px solid var(--rx-border); backdrop-filter: blur(20px);
}
.rx-content { padding: 24px; flex: 1; }
.rx-footer { padding: 14px 24px; border-top: 1px solid var(--rx-border); color: var(--rx-text-subtle); font-size: 0.75rem; }

body.rx-sidebar-collapsed .rx-sidebar { width: 76px; }
body.rx-sidebar-collapsed .rx-sidebar .rx-hide-collapsed { display: none; }

@media (max-width: 991.98px) {
  .rx-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 300; transform: translateX(-100%); transition: transform var(--rx-motion); }
  .rx-sidebar-inner { max-height: 100%; }
  body.rx-sidebar-open .rx-sidebar { transform: none; }
}

/* =====================================================================
   5. SHARED COMPONENTS (from the PIM)
   ===================================================================== */
.rx-sortable-handle { cursor: grab; color: var(--rx-text-subtle); }
.rx-sortable-ghost { opacity: 0.4; background: var(--rx-accent-wash); }
.rx-media-tile { border-radius: var(--rx-radius-lg); border: 1px solid var(--rx-border); overflow: hidden; background: var(--rx-surface-subtle); aspect-ratio: 1; }
.rx-media-tile img { width: 100%; height: 100%; object-fit: contain; }
.rx-diff-old { background: color-mix(in srgb, var(--rx-danger) 10%, transparent); text-decoration: line-through; }
.rx-diff-new { background: color-mix(in srgb, var(--rx-success) 12%, transparent); }
.rx-completeness { height: 6px; border-radius: 999px; background: var(--rx-surface-subtle); }
.rx-completeness > span { display: block; height: 100%; border-radius: 999px; background: var(--rx-accent); }

/* =====================================================================
   6. FORMS, FEEDBACK AND NAVIGATION (port completed)
   ===================================================================== */
.form-control::placeholder { color: var(--rx-text-subtle); opacity: 1; }
.form-control:disabled, .form-select:disabled, .form-control[readonly] {
  background-color: var(--rx-surface-raised); color: var(--rx-text-muted); opacity: 1;
}
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--rx-danger); }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--rx-danger) 25%, transparent); }
.invalid-feedback { color: var(--rx-danger); font-size: 0.8125rem; }
.form-text { color: var(--rx-text-subtle); font-size: 0.8125rem; }
.input-group-text { background: var(--rx-surface-raised); border-color: var(--rx-border); color: var(--rx-text-muted); }
.form-check-input { background-color: var(--rx-surface-subtle); border-color: var(--rx-border-strong); }
.form-check-input:focus { border-color: var(--rx-accent); box-shadow: 0 0 0 0.2rem rgba(var(--rx-accent-rgb), 0.25); }
.form-switch .form-check-input:checked { background-color: var(--rx-accent); border-color: var(--rx-accent); }

/* Visible keyboard focus everywhere, in both themes. */
:focus-visible { outline: 2px solid var(--rx-accent); outline-offset: 2px; }
.btn:focus-visible, .page-link:focus-visible, .dropdown-item:focus-visible, .rx-nav-link:focus-visible {
  outline: 2px solid var(--rx-accent); outline-offset: 2px; box-shadow: none;
}

.btn-soft:disabled, .btn-soft.disabled { opacity: 0.5; }
.btn-link { --bs-btn-color: var(--rx-accent); --bs-btn-hover-color: var(--rx-accent-hover); text-decoration: none; }
.btn-outline-secondary {
  --bs-btn-color: var(--rx-text-muted); --bs-btn-border-color: var(--rx-border-strong);
  --bs-btn-hover-bg: var(--rx-surface-subtle); --bs-btn-hover-border-color: var(--rx-border-strong); --bs-btn-hover-color: var(--rx-text-strong);
}
.btn-outline-danger { --bs-btn-color: var(--rx-danger); --bs-btn-border-color: color-mix(in srgb, var(--rx-danger) 50%, transparent); --bs-btn-hover-bg: var(--rx-danger); --bs-btn-hover-border-color: var(--rx-danger); --bs-btn-hover-color: #fff; }
.btn-danger { --bs-btn-bg: var(--rx-danger); --bs-btn-border-color: var(--rx-danger); --bs-btn-hover-bg: color-mix(in srgb, var(--rx-danger) 84%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--rx-danger) 84%, #000); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; border-radius: 999px; }

.alert { --bs-alert-border-color: var(--rx-border); border-radius: var(--rx-radius-lg); border-width: 1px; }
.alert-success { --bs-alert-bg: color-mix(in srgb, var(--rx-success) 12%, transparent); --bs-alert-color: var(--rx-text-strong); --bs-alert-border-color: color-mix(in srgb, var(--rx-success) 35%, transparent); }
.alert-warning { --bs-alert-bg: color-mix(in srgb, var(--rx-warning) 12%, transparent); --bs-alert-color: var(--rx-text-strong); --bs-alert-border-color: color-mix(in srgb, var(--rx-warning) 35%, transparent); }
.alert-danger  { --bs-alert-bg: color-mix(in srgb, var(--rx-danger) 12%, transparent);  --bs-alert-color: var(--rx-text-strong); --bs-alert-border-color: color-mix(in srgb, var(--rx-danger) 35%, transparent); }
.alert-info    { --bs-alert-bg: rgba(110, 144, 222, 0.12); --bs-alert-color: var(--rx-text-strong); --bs-alert-border-color: rgba(110, 144, 222, 0.35); }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(2); }

.dropdown-menu {
  --bs-dropdown-link-color: var(--rx-text);
  --bs-dropdown-link-hover-bg: var(--rx-surface-subtle);
  --bs-dropdown-link-hover-color: var(--rx-text-strong);
  --bs-dropdown-link-active-bg: var(--rx-accent-wash);
  --bs-dropdown-link-active-color: var(--rx-accent);
  --bs-dropdown-header-color: var(--rx-text-subtle);
  --bs-dropdown-divider-bg: var(--rx-border);
  box-shadow: var(--rx-shadow-card); padding: 6px;
}
.dropdown-item { border-radius: var(--rx-radius-xs); padding: 8px 12px; }
.dropdown-header { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; }

.modal-header, .modal-footer { border-color: var(--rx-border); }
.modal-backdrop { --bs-backdrop-bg: #05070B; --bs-backdrop-opacity: 0.6; }
.offcanvas-header { border-bottom: 1px solid var(--rx-border); }

.pagination {
  --bs-pagination-bg: transparent; --bs-pagination-color: var(--rx-text-muted);
  --bs-pagination-border-color: var(--rx-border);
  --bs-pagination-hover-bg: var(--rx-surface-subtle); --bs-pagination-hover-color: var(--rx-text-strong);
  --bs-pagination-hover-border-color: var(--rx-border-strong);
  --bs-pagination-active-bg: var(--rx-accent); --bs-pagination-active-border-color: var(--rx-accent);
  --bs-pagination-active-color: var(--rx-on-accent);
  --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-color: var(--rx-text-subtle);
  --bs-pagination-disabled-border-color: var(--rx-border);
  --bs-pagination-border-radius: var(--rx-radius-xs);
}
.pagination .page-link { margin-left: 4px; }

.breadcrumb { --bs-breadcrumb-divider-color: var(--rx-text-subtle); --bs-breadcrumb-item-active-color: var(--rx-text-muted); font-size: 0.8125rem; }
.breadcrumb a { color: var(--rx-text-subtle); text-decoration: none; }
.breadcrumb a:hover { color: var(--rx-accent); }

.list-group {
  --bs-list-group-bg: transparent; --bs-list-group-color: var(--rx-text);
  --bs-list-group-border-color: var(--rx-border);
  --bs-list-group-action-hover-bg: var(--rx-surface-subtle); --bs-list-group-action-hover-color: var(--rx-text-strong);
  --bs-list-group-border-radius: var(--rx-radius-md);
}
.progress { --bs-progress-bg: var(--rx-surface-subtle); --bs-progress-bar-bg: var(--rx-accent); --bs-progress-border-radius: 999px; height: 8px; }
.toast { --bs-toast-bg: var(--rx-surface-overlay); --bs-toast-border-color: var(--rx-border); --bs-toast-header-bg: transparent; --bs-toast-header-color: var(--rx-text-strong); box-shadow: var(--rx-shadow-card); }
.tooltip { --bs-tooltip-bg: var(--rx-surface-overlay); --bs-tooltip-color: var(--rx-text-strong); --bs-tooltip-opacity: 1; }
.spinner-border { --bs-spinner-border-width: 0.15em; }

hr { border-color: var(--rx-border); opacity: 1; }
code, .font-monospace { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
code { color: var(--rx-accent); }
.table > :not(caption) > * > * { padding: 0.75rem 0.75rem; }
.table-borderless thead th { background: transparent; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rx-border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--rx-text-subtle); background-clip: content-box; }

/* Tom Select and Quill inherit the same tokens, so pickers and the editor match. */
.ts-wrapper .ts-control { background: var(--rx-surface-subtle); border-color: var(--rx-border); border-radius: var(--rx-radius-md); color: var(--rx-text-strong); }
.ts-wrapper.focus .ts-control { border-color: var(--rx-accent); box-shadow: 0 0 0 0.2rem rgba(var(--rx-accent-rgb), 0.25); }
.ts-dropdown { background: var(--rx-surface-overlay); border-color: var(--rx-border); border-radius: var(--rx-radius-md); color: var(--rx-text); }
.ts-dropdown .active { background: var(--rx-accent-wash); color: var(--rx-accent); }
.ql-toolbar.ql-snow, .ql-container.ql-snow { border-color: var(--rx-border); }
.ql-toolbar.ql-snow { border-radius: var(--rx-radius-md) var(--rx-radius-md) 0 0; background: var(--rx-surface-subtle); }
.ql-container.ql-snow { border-radius: 0 0 var(--rx-radius-md) var(--rx-radius-md); background: var(--rx-surface-subtle); color: var(--rx-text-strong); }
[data-bs-theme="dark"] .ql-snow .ql-stroke { stroke: var(--rx-text-muted); }
[data-bs-theme="dark"] .ql-snow .ql-fill { fill: var(--rx-text-muted); }
[data-bs-theme="dark"] .ql-snow .ql-picker-label { color: var(--rx-text-muted); }

/* =====================================================================
   7. SHELL DETAILS (brand mark, avatar, search, empty state, auth pages)
   ===================================================================== */
.rx-brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 10px; background: var(--rx-accent); color: var(--rx-on-accent);
  font-family: var(--rx-font-display); font-weight: 700; font-size: 1rem; line-height: 1;
}
.rx-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--rx-accent-wash); color: var(--rx-accent);
  font-size: 0.75rem; font-weight: 600;
}
.rx-sidebar-toggle { display: inline-flex; }
@media (min-width: 992px) { .rx-sidebar-toggle { display: none; } }

.rx-search { position: relative; min-width: 280px; }
.rx-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--rx-text-subtle); pointer-events: none; }
.rx-search .form-control { padding-left: 34px; border-radius: 999px; height: 36px; }

.rx-sidebar-backdrop { position: fixed; inset: 0; z-index: 250; background: rgba(5, 7, 11, 0.6); }
@media (min-width: 992px) { .rx-sidebar-backdrop { display: none !important; } }

.rx-empty-icon { font-size: 2.5rem; color: var(--rx-text-subtle); }
.rx-empty { color: var(--rx-text-muted); }

.rx-stat { display: flex; flex-direction: column; gap: 4px; }
.rx-stat-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rx-text-subtle); }
.rx-stat-note { font-size: 0.8125rem; color: var(--rx-text-muted); }

.rx-auth-body { background: var(--rx-canvas); }
.rx-auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; gap: 16px; }
.rx-auth-card { width: 100%; max-width: 420px; }
.rx-auth-brand { display: flex; align-items: center; gap: 10px; font-family: var(--rx-font-display); font-weight: 700; color: var(--rx-text-strong); }
.rx-auth-foot { font-size: 0.8125rem; color: var(--rx-text-subtle); margin: 0; }

.rx-code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.75rem; letter-spacing: 0.35em; text-align: center; text-indent: 0.35em;
  height: 64px; font-weight: 600;
}

.rx-meta { font-size: 0.8125rem; color: var(--rx-text-subtle); }
.rx-table-sticky thead th { position: sticky; top: 0; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}