/* ===========================================================================
   Nester theme for Attendee
   ---------------------------------------------------------------------------
   Design tokens are lifted from nForge (`nForge/frontend/app/globals.css`) so
   the two internal consoles read as one product: Figtree/Geist Mono, the
   #C4483C brand ramp, neutral surfaces, 10px radius, flat borders over
   shadows, and a blue (not brand) focus ring.

   This file is loaded after Bootstrap 5.3 and re-points Bootstrap's CSS
   variables at those tokens. Bootstrap compiles component colors into
   per-component `--bs-<component>-*` variables rather than reading
   `--bs-primary` at runtime, so each component Attendee actually uses is
   re-declared below. Nothing here depends on Attendee's markup beyond the
   class names it already ships, which is what keeps the overlay to two
   template overrides.

   Light mode only: Attendee's templates hardcode light assumptions
   (`text-dark`, `bg-light`, inline `#f8f9fa`), so a dark palette would fight
   the markup rather than theme it.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   TIER 1 — PRIMITIVES (raw palette, mode-independent).
   Mirrors nForge's ramps. Edit a ramp here to recolor everything above it.
   --------------------------------------------------------------------------- */
:root {
  /* Neutral ramp — Tailwind `neutral` (0 is pure white) */
  --neutral-0:   hsl(0 0% 100%);
  --neutral-50:  hsl(0 0% 98%);
  --neutral-100: hsl(0 0% 96%);
  --neutral-200: hsl(0 0% 90%);
  --neutral-300: hsl(0 0% 83%);
  --neutral-400: hsl(0 0% 64%);
  --neutral-500: hsl(0 0% 45%);
  --neutral-600: hsl(0 0% 32%);
  --neutral-700: hsl(0 0% 25%);
  --neutral-800: hsl(0 0% 15%);
  --neutral-900: hsl(0 0% 9%);
  --neutral-950: hsl(0 0% 4%);

  /* Brand ramp — #C4483C */
  --brand-50:  hsl(6 62% 96%);
  --brand-100: hsl(6 60% 91%);
  --brand-200: hsl(6 57% 83%);
  --brand-300: hsl(6 55% 71%);
  --brand-400: hsl(6 54% 60%);
  --brand-500: hsl(6 54% 50%);   /* #C4483C */
  --brand-600: hsl(6 56% 43%);
  --brand-700: hsl(7 58% 35%);
  --brand-800: hsl(7 60% 27%);
  --brand-900: hsl(8 62% 20%);

  /* Semantic ramps */
  --red-50:  hsl(0 86% 97%);
  --red-100: hsl(0 93% 94%);
  --red-200: hsl(0 96% 89%);
  --red-500: hsl(0 84% 60%);
  --red-600: hsl(0 72% 51%);
  --red-700: hsl(0 74% 42%);

  --green-50:  hsl(138 76% 97%);
  --green-100: hsl(141 84% 93%);
  --green-200: hsl(141 79% 85%);
  --green-600: hsl(142 76% 36%);
  --green-700: hsl(142 72% 29%);

  /* Cyan is the one hue not in nForge's ramp set. It exists solely so badge
     `bg-info` can sit next to badge `bg-primary` in the calendars table
     (Google vs Microsoft) and still be told apart. */
  --cyan-50:  hsl(183 100% 96%);
  --cyan-100: hsl(185 96% 90%);
  --cyan-700: hsl(192 82% 31%);

  --blue-50:  hsl(214 100% 97%);
  --blue-100: hsl(214 95% 93%);
  --blue-200: hsl(213 97% 87%);
  --blue-600: hsl(221 83% 53%);
  --blue-700: hsl(224 76% 48%);

  --yellow-50:  hsl(55 92% 95%);
  --yellow-100: hsl(55 97% 88%);
  --yellow-200: hsl(53 98% 77%);
  --yellow-500: hsl(45 93% 47%);
  --yellow-700: hsl(35 92% 33%);
  --yellow-800: hsl(32 81% 29%);

  /* ---------------------------------------------------------------------
     TIER 2 — SEMANTIC ALIASES. Components reference these, never Tier 1.
     --------------------------------------------------------------------- */
  --bg: var(--neutral-50);
  --surface: var(--neutral-0);
  --surface-2: var(--neutral-100);
  --surface-hover: var(--neutral-100);
  --border: var(--neutral-200);
  --border-2: var(--neutral-300);
  --border-subtle: var(--neutral-100);
  --text: var(--neutral-950);
  --text-muted: var(--neutral-600);
  --text-dim: var(--neutral-500);

  --brand: var(--brand-500);
  --brand-foreground: var(--neutral-0);
  --brand-hover: var(--brand-600);
  --brand-dim: var(--brand-50);
  --brand-border: var(--brand-200);
  --brand-strong: var(--brand-600);

  --danger: var(--red-600);
  --danger-strong: var(--red-700);
  --success: var(--green-600);
  --success-strong: var(--green-700);
  --info: var(--blue-600);
  --warn: var(--yellow-500);
  --warn-strong: var(--yellow-800);

  /* Focus is deliberately blue, not brand: it must read as "the browser is
     talking to you", and it needs contrast against brand-red controls. */
  --ring: var(--blue-600);

  --radius: 0.625rem;            /* 10px — nForge preset "small" */
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --font-sans: "Figtree Variable", "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Sidebar — faint brand tint, matching nForge's Todoist-style treatment */
  --sidebar: color-mix(in srgb, var(--brand) 3%, var(--neutral-0));
  --sidebar-hover: var(--brand-50);
  --sidebar-active-bg: var(--brand-100);
  --sidebar-active-fg: var(--brand-600);
  --sidebar-border: color-mix(in srgb, var(--brand) 12%, var(--neutral-200));
}

/* ---------------------------------------------------------------------------
   TIER 3 — BOOTSTRAP BRIDGE.
   Root-level Bootstrap variables. `*-rgb` triples matter: Bootstrap's colour
   utilities (`.text-primary`, `.bg-light`, `.border-danger`) compile to
   `rgba(var(--bs-<name>-rgb), var(--bs-<x>-opacity))`, so setting the triple
   retargets every one of them at once.
   --------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  --bs-primary: #c4483c;
  --bs-primary-rgb: 196, 72, 60;
  --bs-primary-text-emphasis: #8e3129;
  --bs-primary-bg-subtle: #f8ecea;
  --bs-primary-border-subtle: #e6c0bb;

  --bs-secondary: #525252;
  --bs-secondary-rgb: 82, 82, 82;
  --bs-secondary-color: hsl(0 0% 32%);
  --bs-secondary-bg: hsl(0 0% 96%);

  --bs-tertiary-color: hsl(0 0% 45%);
  --bs-tertiary-bg: hsl(0 0% 98%);

  --bs-success: #16a34a;
  --bs-success-rgb: 22, 163, 74;
  --bs-success-text-emphasis: #157f3a;
  --bs-success-bg-subtle: #eafaef;
  --bs-success-border-subtle: #b7ebc7;

  --bs-danger: #dc2626;
  --bs-danger-rgb: 220, 38, 38;
  --bs-danger-text-emphasis: #b21b1b;
  --bs-danger-bg-subtle: #fdeaea;
  --bs-danger-border-subtle: #f7bebe;

  --bs-warning: #eab308;
  --bs-warning-rgb: 234, 179, 8;
  --bs-warning-text-emphasis: #8a5a09;
  --bs-warning-bg-subtle: #fdf7dd;
  --bs-warning-border-subtle: #f6e3a0;

  --bs-info: #2563eb;
  --bs-info-rgb: 37, 99, 235;
  --bs-info-text-emphasis: #1d4fbe;
  --bs-info-bg-subtle: #eef4fe;
  --bs-info-border-subtle: #bdd3fa;

  --bs-light: hsl(0 0% 96%);
  --bs-light-rgb: 245, 245, 245;
  --bs-dark: hsl(0 0% 4%);
  --bs-dark-rgb: 10, 10, 10;

  --bs-body-bg: var(--bg);
  --bs-body-bg-rgb: 250, 250, 250;
  --bs-body-color: var(--text);
  --bs-body-color-rgb: 10, 10, 10;
  --bs-emphasis-color: var(--text);
  --bs-heading-color: var(--text);

  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: 0.9375rem;   /* 15px — nForge body size */
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.55;

  --bs-border-color: var(--border);
  --bs-border-color-translucent: var(--border);
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);

  --bs-link-color: var(--brand-strong);
  --bs-link-color-rgb: 173, 61, 51;
  --bs-link-hover-color: var(--brand-700);
  --bs-link-hover-color-rgb: 141, 49, 41;

  --bs-code-color: var(--brand-strong);
  --bs-font-monospace: var(--font-mono);

  --bs-focus-ring-color: color-mix(in srgb, var(--ring) 25%, transparent);
  --bs-focus-ring-width: 3px;

  --bs-box-shadow: 0 1px 2px hsl(0 0% 0% / 0.04);
  --bs-box-shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.04);
  --bs-box-shadow-lg: 0 8px 28px hsl(0 0% 0% / 0.08);
}

/* ---------------------------------------------------------------------------
   BASE
   --------------------------------------------------------------------------- */
body {
  font-family: var(--font-sans);
  background-color: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss09" 1;   /* plain zero, matching nForge */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.011em;
  color: var(--text);
  text-wrap: balance;
}
h1 { font-size: 1.625rem; }
h2 { font-size: 1.3125rem; }
h3 { font-size: 1.1875rem; }
h4 { font-size: 1.0625rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9375rem; }

/* Weight is clamped UI-wide to the regular–semibold range. */
strong, b { font-weight: 600; }

.small, small { font-size: 0.8125rem; }

code, pre, kbd, samp, .font-monospace {
  font-family: var(--font-mono);
  font-feature-settings: "ss09" 1;
}

code {
  font-size: 0.875em;
  color: var(--brand-strong);
}

/* Brand-red inline code is right for prose, where it marks one token in a
   sentence. In a table it is wall-to-wall: every meeting URL and object id
   would shout. Data-dense contexts get the neutral ink instead. */
.table code,
.table-responsive code,
pre code,
.form-control code { color: var(--neutral-700); }

pre {
  background-color: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--neutral-800);
  padding: 0.75rem 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.6;
}
pre code { color: inherit; }

/* Attendee renders `<pre class="bg-light">` for curl snippets; the utility
   would otherwise flatten the border treatment above. */
pre.bg-light { background-color: var(--surface-2) !important; }

hr {
  border-color: var(--border);
  opacity: 1;
}

a { text-underline-offset: 0.2em; }

/* Baseline keyboard focus ring for everything not covered by a component
   rule below. Form controls soften this into a box-shadow. */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Bootstrap Icons sit ~1px low against Figtree's baseline. */
.bi { vertical-align: -0.125em; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border: 3px solid var(--bg);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--neutral-400); }

/* ---------------------------------------------------------------------------
   SIDEBAR
   `sidebar.html` ships its own inline <style> block in the document body,
   which beats an equal-specificity rule from this file on source order. The
   selectors below deliberately outrank it (`.sidebar nav.nav .nav-link`
   is 4 classes + 1 element vs. its 2 classes).
   --------------------------------------------------------------------------- */
.sidebar {
  background-color: var(--sidebar);
  border-right: 1px solid var(--sidebar-border);
  min-height: 100vh;
  padding-top: 1.25rem !important;
}

/* Brand lockup */
.sidebar > .d-flex > h5 {
  padding-inline: 1.125rem !important;
  margin-bottom: 1.25rem !important;
}
.sidebar img[class*="img-fluid"] {
  max-width: 132px !important;
  height: auto;
}

.sidebar hr {
  border-color: var(--sidebar-border);
  margin-inline: 0.75rem;
  opacity: 1;
}

.sidebar .nav-link,
.sidebar button.nav-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0.0625rem 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  color: var(--neutral-700);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar .nav-link .bi,
.sidebar button.nav-link .bi {
  width: 1.15em;
  flex: none;
  text-align: center;
  color: var(--text-dim);
  transition: color 0.15s ease;
}

.sidebar .nav-link:hover,
.sidebar button.nav-link:hover {
  background-color: var(--sidebar-hover);
  color: var(--neutral-900);
}
.sidebar .nav-link:hover .bi { color: var(--neutral-700); }

/* Outranks sidebar.html's inline `.sidebar .nav-link.active`. */
.sidebar nav.nav .nav-link.active,
.sidebar .settings-submenu .nav-link.active,
.sidebar .account-submenu .nav-link.active {
  background-color: var(--sidebar-active-bg);
  color: var(--sidebar-active-fg);
  font-weight: 600;
}
.sidebar nav.nav .nav-link.active .bi,
.sidebar .settings-submenu .nav-link.active .bi,
.sidebar .account-submenu .nav-link.active .bi {
  color: var(--sidebar-active-fg);
}

/* Nested settings/account items read as a second level. */
.sidebar .settings-submenu .nav-link,
.sidebar .account-submenu .nav-link {
  font-size: 0.875rem;
  font-weight: 450;
  padding-left: 1.75rem !important;
}

.sidebar .settings-caret,
.sidebar .account-caret { transition: transform 0.2s ease; }

/* Project switcher */
.sidebar .project-selector { padding-inline: 0.75rem !important; }
.sidebar .project-dropdown-toggle {
  border: 1px solid var(--sidebar-border);
  background-color: var(--surface);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem !important;
  font-weight: 500;
  color: var(--text);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.sidebar .project-dropdown-toggle:hover {
  background-color: var(--sidebar-hover);
  border-color: var(--brand-border);
}
.sidebar .project-selector .dropdown-menu {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--bs-box-shadow-lg);
  padding: 0.25rem;
}
.sidebar .project-selector .dropdown-item {
  border-radius: var(--radius-sm);
  padding: 0.4375rem 0.625rem;
}
.sidebar .project-selector .dropdown-item.active {
  background-color: var(--sidebar-active-bg) !important;
  color: var(--sidebar-active-fg) !important;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   BUTTONS
   --------------------------------------------------------------------------- */
.btn {
  --bs-btn-padding-x: 0.875rem;
  --bs-btn-padding-y: 0.4375rem;
  --bs-btn-font-size: 0.9375rem;
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: var(--radius-md);
  --bs-btn-focus-box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-sm {
  --bs-btn-padding-x: 0.625rem;
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-font-size: 0.8125rem;
  --bs-btn-border-radius: var(--radius-sm);
}
.btn-lg {
  --bs-btn-padding-x: 1.125rem;
  --bs-btn-padding-y: 0.625rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-border-radius: var(--radius-md);
}

.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-color: var(--brand-foreground);
  --bs-btn-hover-bg: var(--brand-hover);
  --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-hover-color: var(--brand-foreground);
  --bs-btn-active-bg: var(--brand-700);
  --bs-btn-active-border-color: var(--brand-700);
  --bs-btn-active-color: var(--brand-foreground);
  --bs-btn-disabled-bg: var(--brand-300);
  --bs-btn-disabled-border-color: var(--brand-300);
  --bs-btn-disabled-color: var(--brand-foreground);
}

/* Secondary is the neutral workhorse in this UI (39 uses), so it reads as a
   quiet outline button rather than Bootstrap's grey fill. */
.btn-secondary {
  --bs-btn-bg: var(--surface);
  --bs-btn-border-color: var(--border-2);
  --bs-btn-color: var(--neutral-800);
  --bs-btn-hover-bg: var(--surface-2);
  --bs-btn-hover-border-color: var(--border-2);
  --bs-btn-hover-color: var(--neutral-950);
  --bs-btn-active-bg: var(--neutral-200);
  --bs-btn-active-border-color: var(--border-2);
  --bs-btn-active-color: var(--neutral-950);
  --bs-btn-disabled-bg: var(--surface);
  --bs-btn-disabled-border-color: var(--border);
  --bs-btn-disabled-color: var(--text-dim);
}

.btn-outline-secondary {
  --bs-btn-color: var(--neutral-700);
  --bs-btn-border-color: var(--border-2);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--surface-2);
  --bs-btn-hover-border-color: var(--border-2);
  --bs-btn-hover-color: var(--neutral-950);
  --bs-btn-active-bg: var(--neutral-200);
  --bs-btn-active-border-color: var(--border-2);
  --bs-btn-active-color: var(--neutral-950);
  --bs-btn-disabled-color: var(--text-dim);
  --bs-btn-disabled-border-color: var(--border);
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-strong);
  --bs-btn-border-color: var(--brand-border);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--brand-dim);
  --bs-btn-hover-border-color: var(--brand-300);
  --bs-btn-hover-color: var(--brand-700);
  --bs-btn-active-bg: var(--brand-100);
  --bs-btn-active-border-color: var(--brand-300);
  --bs-btn-active-color: var(--brand-700);
}

.btn-danger {
  --bs-btn-bg: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--danger-strong);
  --bs-btn-hover-border-color: var(--danger-strong);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--danger-strong);
  --bs-btn-active-border-color: var(--danger-strong);
}
.btn-outline-danger {
  --bs-btn-color: var(--danger-strong);
  --bs-btn-border-color: var(--red-200);
  --bs-btn-hover-bg: var(--red-50);
  --bs-btn-hover-border-color: var(--red-200);
  --bs-btn-hover-color: var(--danger-strong);
  --bs-btn-active-bg: var(--red-100);
  --bs-btn-active-border-color: var(--red-200);
  --bs-btn-active-color: var(--danger-strong);
}

/* `.btn-check` + label pairs are used for the bot-filter segmented controls. */
.btn-check:focus-visible + .btn {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent);
}
.btn-check:checked + .btn-outline-secondary {
  background-color: var(--brand-dim);
  border-color: var(--brand-border);
  color: var(--brand-strong);
  font-weight: 600;
}

.btn-close {
  --bs-btn-close-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent);
  opacity: 0.45;
}
.btn-close:hover { opacity: 0.85; }

/* ---------------------------------------------------------------------------
   CARDS
   Flat: border first, shadow only where elevation is real (modals, popovers).
   --------------------------------------------------------------------------- */
.card {
  --bs-card-bg: var(--surface);
  --bs-card-border-color: var(--border);
  --bs-card-border-radius: var(--radius-lg);
  --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
  --bs-card-cap-bg: var(--surface);
  --bs-card-spacer-x: 1.25rem;
  --bs-card-spacer-y: 1.125rem;
  box-shadow: var(--bs-box-shadow);
}

.card-header {
  border-bottom: 1px solid var(--border-subtle);
  font-weight: 600;
  color: var(--text);
}

.card-title {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.011em;
}

.card-text { color: var(--text-muted); }

/* `.shadow-lg .border-0` is the auth-card recipe; keep it hairline, not heavy. */
.card.shadow-lg {
  box-shadow: 0 10px 36px hsl(0 0% 0% / 0.07) !important;
  border: 1px solid var(--border) !important;
}

/* ---------------------------------------------------------------------------
   FORMS
   --------------------------------------------------------------------------- */
.form-label {
  font-size: 0.875rem;
  font-weight: 550;
  color: var(--neutral-800);
  margin-bottom: 0.375rem;
}

.form-control,
.form-select {
  background-color: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 0.9375rem;
  padding: 0.4375rem 0.75rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control::placeholder { color: var(--text-dim); }

.form-control:focus,
.form-select:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent);
}

.form-control-sm,
.form-select-sm {
  font-size: 0.8125rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--surface-2);
  color: var(--text-muted);
}

/* Read-only fields in this app hold IDs, keys and URLs — set them in mono. */
.form-control[readonly] { font-family: var(--font-mono); font-size: 0.8125rem; }

.form-text {
  color: var(--text-dim);
  font-size: 0.8125rem;
}

.form-floating > label { color: var(--text-dim); }
.form-floating > .form-control { padding-top: 1.625rem; padding-bottom: 0.5rem; }

.form-check-input {
  border-color: var(--border-2);
  border-radius: 0.3125rem;
}
.form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}
.form-check-input:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent);
}
.form-switch .form-check-input { border-radius: 999px; }

.input-group-text {
  background-color: var(--surface-2);
  border-color: var(--border-2);
  color: var(--text-muted);
  font-size: 0.875rem;
  border-radius: var(--radius-md);
}

/* ---------------------------------------------------------------------------
   TABLES
   Horizontal rules only; header as quiet metadata.
   --------------------------------------------------------------------------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border-subtle);
  --bs-table-striped-bg: var(--neutral-50);
  --bs-table-hover-bg: var(--brand-50);
  --bs-table-color: var(--text);
  font-size: 0.9375rem;
  vertical-align: middle;
  margin-bottom: 0;
}

.table > thead > tr > th {
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.625rem 0.75rem;
  white-space: nowrap;
}

.table > tbody > tr > td {
  border-bottom: 1px solid var(--border-subtle);
  padding: 0.6875rem 0.75rem;
}

.table-bordered,
.table-bordered > :not(caption) > * > * {
  border-inline-width: 0;
}

.table-responsive {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  overflow-x: auto;
}
.table-responsive > .table > tbody > tr:last-child > td { border-bottom: 0; }

/* ---------------------------------------------------------------------------
   ALERTS
   Subtle tinted surfaces — flat, no left accent bar.
   --------------------------------------------------------------------------- */
.alert {
  --bs-alert-border-radius: var(--radius-lg);
  border-width: 1px;
  font-size: 0.9375rem;
  padding: 0.875rem 1rem;
}
.alert-info {
  --bs-alert-bg: var(--blue-50);
  --bs-alert-border-color: var(--blue-200);
  --bs-alert-color: var(--blue-700);
  --bs-alert-link-color: var(--blue-700);
}
.alert-success {
  --bs-alert-bg: var(--green-50);
  --bs-alert-border-color: var(--green-200);
  --bs-alert-color: var(--success-strong);
  --bs-alert-link-color: var(--success-strong);
}
.alert-warning {
  --bs-alert-bg: var(--yellow-50);
  --bs-alert-border-color: var(--yellow-200);
  --bs-alert-color: var(--warn-strong);
  --bs-alert-link-color: var(--warn-strong);
}
.alert-danger {
  --bs-alert-bg: var(--red-50);
  --bs-alert-border-color: var(--red-200);
  --bs-alert-color: var(--danger-strong);
  --bs-alert-link-color: var(--danger-strong);
}
.alert-link { font-weight: 600; text-decoration: underline; }

/* The base template pins Django messages to the top edge full-bleed. */
.messages .alert { border-radius: 0; }

/* ---------------------------------------------------------------------------
   BADGES
   --------------------------------------------------------------------------- */
.badge {
  --bs-badge-padding-x: 0.5rem;
  --bs-badge-padding-y: 0.28em;
  --bs-badge-border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
/* Badges here are status, not branding. Attendee maps bot/user state onto the
   Bootstrap palette (`bg-primary` = running / current / Administrator,
   `bg-danger` = fatal error / disabled), which reads fine while primary is
   Bootstrap blue. Making primary brand-red collapsed that distinction: a bot
   in the "Recording" state looked like a bot in "Fatal error". Badge primary
   therefore stays blue, deliberately breaking the brand mapping for this one
   component, because state legibility outranks palette purity on a table of
   running jobs. Every other use of primary is brand-red. */
.badge.bg-primary   { background-color: var(--blue-100) !important; color: var(--blue-700); }
.badge.bg-secondary { background-color: var(--neutral-100) !important; color: var(--neutral-700); }
.badge.bg-success   { background-color: var(--green-100) !important; color: var(--success-strong); }
.badge.bg-danger    { background-color: var(--red-100) !important; color: var(--danger-strong); }
.badge.bg-warning   { background-color: var(--yellow-100) !important; color: var(--warn-strong); }
.badge.bg-info      { background-color: var(--cyan-100) !important; color: var(--cyan-700); }
/* `badge bg-light text-dark` is the project-name chip; it needs an edge to
   read as a chip against a white card. */
.badge.bg-light {
  background-color: var(--surface-2) !important;
  border: 1px solid var(--border);
  color: var(--neutral-700) !important;
}

/* ---------------------------------------------------------------------------
   MODALS
   --------------------------------------------------------------------------- */
.modal-content {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 64px hsl(0 0% 0% / 0.16);
}
.modal-header {
  border-bottom: 1px solid var(--border-subtle);
  padding: 1.125rem 1.25rem;
}
.modal-title { font-size: 1.0625rem; font-weight: 600; }
.modal-body { padding: 1.25rem; }
.modal-footer {
  border-top: 1px solid var(--border-subtle);
  padding: 0.875rem 1.25rem;
  gap: 0.5rem;
}
.modal-footer > * { margin: 0; }
.modal-backdrop.show { opacity: 0.35; }

/* ---------------------------------------------------------------------------
   TABS / NAV
   Underline tabs rather than Bootstrap's folder-tab boxes.
   --------------------------------------------------------------------------- */
.nav-tabs {
  border-bottom: 1px solid var(--border);
  gap: 0.25rem;
}
.nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--text-muted);
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  margin-bottom: -1px;
}
.nav-tabs .nav-link:hover {
  border-bottom-color: var(--border-2);
  color: var(--text);
  background-color: transparent;
}
.nav-tabs .nav-link.active {
  background-color: transparent;
  border-bottom-color: var(--brand);
  color: var(--brand-strong);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   LIST GROUPS  (quick-start checklist on the dashboard)
   --------------------------------------------------------------------------- */
.list-group {
  --bs-list-group-border-color: var(--border-subtle);
  --bs-list-group-border-radius: var(--radius-lg);
  --bs-list-group-bg: transparent;
  --bs-list-group-color: var(--text);
  --bs-list-group-action-hover-bg: var(--neutral-50);
}
.list-group-item { padding-inline: 0; }

/* ---------------------------------------------------------------------------
   DROPDOWNS
   --------------------------------------------------------------------------- */
.dropdown-menu {
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-border-radius: var(--radius-lg);
  --bs-dropdown-link-hover-bg: var(--surface-2);
  --bs-dropdown-link-active-bg: var(--brand-100);
  --bs-dropdown-link-active-color: var(--brand-700);
  --bs-dropdown-padding-x: 0.25rem;
  --bs-dropdown-padding-y: 0.25rem;
  --bs-dropdown-item-padding-x: 0.625rem;
  --bs-dropdown-item-padding-y: 0.4375rem;
  box-shadow: var(--bs-box-shadow-lg);
  font-size: 0.9375rem;
}
.dropdown-item { border-radius: var(--radius-sm); }
.dropdown-divider { border-color: var(--border-subtle); }

/* ---------------------------------------------------------------------------
   PAGINATION
   --------------------------------------------------------------------------- */
.pagination {
  --bs-pagination-color: var(--text-muted);
  --bs-pagination-bg: var(--surface);
  --bs-pagination-border-color: var(--border);
  --bs-pagination-border-radius: var(--radius-md);
  --bs-pagination-hover-color: var(--text);
  --bs-pagination-hover-bg: var(--surface-2);
  --bs-pagination-hover-border-color: var(--border-2);
  --bs-pagination-active-bg: var(--brand);
  --bs-pagination-active-border-color: var(--brand);
  --bs-pagination-active-color: #fff;
  --bs-pagination-focus-box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent);
  --bs-pagination-font-size: 0.875rem;
  gap: 0.25rem;
}
.page-link { border-radius: var(--radius-sm) !important; }

/* ---------------------------------------------------------------------------
   ACCORDION
   --------------------------------------------------------------------------- */
.accordion {
  --bs-accordion-border-color: var(--border);
  --bs-accordion-border-radius: var(--radius-lg);
  --bs-accordion-bg: var(--surface);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent);
  --bs-accordion-active-bg: var(--brand-50);
  --bs-accordion-active-color: var(--brand-700);
  --bs-accordion-btn-color: var(--text);
}
.accordion-button { font-weight: 550; }

/* ---------------------------------------------------------------------------
   SPINNERS
   --------------------------------------------------------------------------- */
.spinner-border { border-width: 0.15em; }

/* ---------------------------------------------------------------------------
   UTILITY REALIGNMENT
   Attendee leans on a few Bootstrap utilities for meaning rather than colour;
   re-point them at the token palette so they stay consistent.
   --------------------------------------------------------------------------- */
.text-muted { color: var(--text-muted) !important; }
.bg-light { background-color: var(--surface-2) !important; }
.bg-white { background-color: var(--surface) !important; }
.rounded { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.shadow-sm { box-shadow: var(--bs-box-shadow-sm) !important; }

/* ---------------------------------------------------------------------------
   AUTH PAGES
   `base.html` tags the body with `auth-shell` on /accounts/ URLs so the sign-in
   and password screens get nForge's brand wash instead of a flat grey field.
   --------------------------------------------------------------------------- */
.auth-shell {
  background:
    radial-gradient(72% 62% at 50% -12%,
      color-mix(in srgb, var(--brand) 20%, transparent) 0%,
      transparent 70%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--brand) 9%, var(--bg)) 0%,
      color-mix(in srgb, var(--brand) 3%, var(--bg)) 44%,
      var(--bg) 100%);
  background-attachment: fixed;
}

.auth-shell .card-body { padding: 2.5rem !important; }

/* Upstream sizes the wordmark with an inline `min-width:170px;max-width:250px`,
   which is too big for the card. Match on any image inside the auth card, not
   on a wrapper class: the sign-in page wraps the logo in `.text-center` and the
   closed-signup page does not, and keying off the wrapper silently missed one. */
.auth-shell .card-body img {
  max-width: 150px !important;
  min-width: 0 !important;
  height: auto;
}

/* The sign-in card is email/password only -- the Google button and the
   sign-up and password-reset links are removed in the login.html override,
   because this deployment is invite-only with email disabled. See that
   template's comment for the reasoning. */

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

/* ---------------------------------------------------------------------------
   IN-TEMPLATE STYLE BLOCKS
   Several list pages ship their own <style> in the document body with
   hardcoded Bootstrap-era greys. Body styles beat this file on source order at
   equal specificity, so these selectors are deliberately one step heavier.
   --------------------------------------------------------------------------- */

/* `table tbody tr.clickable-row:hover td` (0,2,3) -> this is (0,3,3). */
.table > tbody > tr.clickable-row:hover > td {
  background-color: var(--brand-50);
}
.table > tbody > tr.clickable-row { cursor: pointer; }

/* `.filter-container` (0,1,0) -> `div.filter-container` is (0,1,1). */
div.filter-container {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.125rem;
}

/* Page content column: give the main pane breathing room and stop full-width
   tables running to the viewport edge on wide screens. */
#content > .container,
#content > .container-fluid { padding-inline: 0.5rem; }