/* =============================================================================
   main.css — CareIQ Brain / OAC Portal V2
   Global stylesheet. Extracted and consolidated from base.html <style> block
   and V1 portal.css. All design tokens use the OAC Brand Guide 2026 palette.

   OAC Brand Palette:
     Sage Green    #88CD6A  — primary accent
     Forest Green  #5FA344  — links, depth
     Periwinkle    #8FB4F5  — gradient accent, active nav
     Violet Purple #7A68D6  — primary action color
     Slate         #303642  — text, headers
     Warm Cream    #F5F3DE  — neutral bg

   CareIQ Brain UI tokens:
     Dark bg       #080a14
     Sidebar bg    #0f1018

   Last updated: 2026-08-09
   ============================================================================= */


/* ── Design tokens ────────────────────────────────────────────────────────── */

:root {
  /* OAC brand palette */
  --oac-sage:       #88CD6A;
  --oac-forest:     #5FA344;
  --oac-periwinkle: #8FB4F5;
  --oac-violet:     #7A68D6;
  --oac-slate:      #303642;
  --oac-cream:      #F5F3DE;

  /* CareIQ Brain UI */
  --ciq-dark:       #080a14;
  --ciq-sidebar-bg: #0f1018;
  --ciq-sidebar-border: rgba(255,255,255,0.07);
  --ciq-nav-active-bg:    rgba(143,180,245,0.13);
  --ciq-nav-active-color: #8FB4F5;
  --ciq-nav-color:        rgba(255,255,255,0.55);
  --ciq-nav-hover-bg:     rgba(255,255,255,0.06);

  /* Gradient bar: Forest → Sage → Periwinkle → Violet */
  --oac-gradient: linear-gradient(90deg, #5FA344 0%, #88CD6A 25%, #8FB4F5 65%, #7A68D6 100%);

  /* Semantic aliases (used throughout components) */
  --primary:     var(--oac-violet);
  --primary-dim: rgba(122,104,214,0.15);
  --accent:      var(--oac-sage);
  --accent-dim:  rgba(136,205,106,0.15);
  --link:        var(--oac-forest);
  --text:        var(--oac-slate);
  --muted:       rgba(48,54,66,0.55);
  --border:      rgba(48,54,66,0.15);
  --border-mid:  rgba(48,54,66,0.22);
  --bg:          #f0f2f5;
  --surface:     #ffffff;
  --surface-alt: #f8f8fb;

  /* Status colours — unchanged from V1, work with any palette */
  --green:    #16a34a;  --green-bg:  #dcfce7;
  --amber:    #d97706;  --amber-bg:  #fef3c7;
  --red:      #dc2626;  --red-bg:    #fee2e2;
  --gray:     #6b7280;  --gray-bg:   #f3f4f6;

  /* Layout */
  --sidebar-w: 240px;
  --topbar-h:  56px;
  --radius:    8px;
  --shadow:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
}


/* ── Reset ────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Space Grotesk', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--oac-forest); text-decoration: underline; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }


/* ── Navbar (Bootstrap override) ─────────────────────────────────────────── */

.navbar {
  background: var(--ciq-dark) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 0 1rem;
  height: var(--topbar-h);
}


/* ── CareIQ Brain wordmark ────────────────────────────────────────────────── */

.navbar-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 0;
  line-height: 1;
  text-decoration: none;
}

.ciq-wordmark {
  display: flex;
  align-items: baseline;
  line-height: 1;
}

.ciq-care {
  font-family: 'Syne', sans-serif;
  font-weight: 300;
  font-size: 30px;
  color: #ffffff;
  letter-spacing: -0.05em;
}

.ciq-iq {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 30px;
  color: var(--oac-periwinkle);
  letter-spacing: -0.05em;
}

.ciq-brain-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
}

.ciq-brain-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--oac-sage);
  opacity: 0.8;
  flex-shrink: 0;
}

.ciq-brain-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oac-sage);
}

.ciq-bar {
  height: 2px;
  width: 100%;
  background: var(--oac-gradient);
  border-radius: 2px;
  margin-top: 3px;
}


/* ── Navbar right side ────────────────────────────────────────────────────── */

.navbar-user-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  color: rgba(255,255,255,0.45);
}

.btn-logout {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.78rem;
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.6);
  padding: 0.25rem 0.7rem;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn-logout:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.35);
}


/* ── Sidebar ──────────────────────────────────────────────────────────────── */

.sidebar {
  min-height: calc(100vh - var(--topbar-h));
  background: var(--ciq-sidebar-bg);
  border-right: 1px solid var(--ciq-sidebar-border);
  padding-top: 1.25rem;
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); }

.sidebar .nav-link {
  color: var(--ciq-nav-color);
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius);
  margin-bottom: 2px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
}

.sidebar .nav-link:hover {
  background: var(--ciq-nav-hover-bg);
  color: #fff;
  text-decoration: none;
}

.sidebar .nav-link.active {
  background: var(--ciq-nav-active-bg);
  color: var(--ciq-nav-active-color);
  font-weight: 500;
}

/* Disabled/coming-soon nav items */
.sidebar .nav-link.disabled-link {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.sidebar-section-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
  padding: 0.75rem 1.25rem 0.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
}

.sidebar-section-label:hover {
  color: rgba(255,255,255,0.45);
  text-decoration: none;
}

/* Collapsible sidebar sections (added 2026-09-14) — chevron rotates via the
   .collapsed class Bootstrap's collapse JS already toggles on the trigger,
   no extra JS needed for the icon itself. */
.sidebar-section-label i.bi-chevron-down {
  font-size: 0.6rem;
  transition: transform 0.15s ease;
}

.sidebar-section-label.collapsed i.bi-chevron-down {
  transform: rotate(-90deg);
}

/* Sidebar overlay — mobile only */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 199;
}
.sidebar-overlay.open { display: block; }


/* ── Main content ─────────────────────────────────────────────────────────── */

.main-content {
  padding: 2rem 1.5rem;
}

.page-body {
  padding: 2rem 1.5rem;
  max-width: 1280px;
}


/* ── Page header ──────────────────────────────────────────────────────────── */

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
  position: relative;
  padding-bottom: 14px;
}

/* Brand accent underline — pulls the periwinkle/sage/violet gradient out of
   the sidebar/navbar and into the main-content banners. Applies to every
   .page-header automatically, no per-template changes needed. Added 2026-08-16. */
.page-header::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: var(--oac-gradient);
}

.page-header h1 {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--oac-slate);
  line-height: 1.2;
}

.page-header .meta {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

/* Section heading used inside cards/content areas */
.section-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--oac-slate);
  margin-bottom: 12px;
}

/* Collapsible dashboard section detail (added 2026-09-16) — same chevron-
   rotate idea as .sidebar-section-label's collapsible sections, styled for
   main-content (dark text on light background) instead of the sidebar.
   Wraps a section's detail table/empty-state; the stat-grid summary above
   it is never collapsed. Collapsed by default on first load (opposite of
   the sidebar, which defaults open) — persisted per-section via
   localStorage, same try/catch-wrapped pattern. */
.dash-toggle {
  font-size: 13px;
  font-weight: 600;
  color: var(--oac-violet);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}

.dash-toggle:hover {
  text-decoration: underline;
}

.dash-toggle i.bi-chevron-down {
  font-size: 11px;
  transition: transform 0.15s ease;
}

.dash-toggle.collapsed i.bi-chevron-down {
  transform: rotate(-90deg);
}


/* ── Stat cards ───────────────────────────────────────────────────────────── */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

/* Subtle gradient left-border accent */
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--oac-gradient);
}

.stat-card .stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 8px;
}

.stat-card .stat-value {
  font-family: 'Syne', sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--oac-slate);
}

.stat-card.accent .stat-value  { color: var(--oac-violet); }
.stat-card.success .stat-value { color: var(--green); }
.stat-card.danger  .stat-value { color: var(--red); }
.stat-card.warning .stat-value { color: var(--amber); }

/* Clickable stat cards (added 2026-09-01 — Staff dashboard compliance
   boxes link through to a filtered list). Anchor reset so a <a class="stat-card">
   looks identical to a plain stat-card, plus a hover/focus lift for
   affordance that a plain (non-link) stat-card never gets. */
a.stat-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow .15s ease, transform .15s ease;
}
a.stat-card-link:hover,
a.stat-card-link:focus-visible {
  box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
  transform: translateY(-2px);
}


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

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 24px;
}

.card-header {
  padding: 14px 20px 14px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface-alt);
  position: relative;
}

/* Brand accent bar — periwinkle-to-sage gradient edge on every card banner
   in the main content area (not just nav/sidebar accents). Added 2026-08-16. */
.card-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: var(--oac-gradient);
}

.card-header h2 {
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--oac-slate);
}

.card-body { padding: 20px; }

/* Compact variant — used where a card's content is a dense identity/summary
   grid that doesn't need full breathing room (e.g. resident detail's
   Identity & Enrollment card). Added 2026-08-16. */
.card-body-tight { padding: 12px 20px; }


/* ── Pending Actions widget ───────────────────────────────────────────────── */

.pending-actions-widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 24px;
}

.pending-actions-widget .widget-header {
  padding: 12px 20px;
  background: var(--oac-violet);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pending-actions-widget .widget-header h2 {
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.03em;
}

.pending-actions-widget .widget-header .badge-count {
  background: rgba(255,255,255,0.25);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}

.pending-action-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.pending-action-item:last-child { border-bottom: none; }

.pending-action-item .action-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--primary-dim);
  color: var(--oac-violet);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.pending-action-item .action-icon.urgent {
  background: var(--red-bg);
  color: var(--red);
}

.pending-action-item .action-text { flex: 1; color: var(--text); }
.pending-action-item .action-text .action-label { font-weight: 500; }
.pending-action-item .action-text .action-sub { font-size: 11px; color: var(--muted); }


/* ── Tables ───────────────────────────────────────────────────────────────── */

table { width: 100%; border-collapse: collapse; }

th {
  text-align: left;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}

td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-size: 13.5px;
  color: var(--text);
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(143,180,245,0.05); }

/* Clickable list rows (portal-wide, 2026-08-17 CSS batch) — see the
   delegated click handler in base.html. Stronger hover than the plain
   tr:hover above so it reads as clickable, not just striped. */
tr[data-href] { cursor: pointer; }
tr[data-href]:hover td { background: rgba(143,180,245,0.12); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }


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

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
}

.badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.badge-current  { background: var(--green-bg); color: var(--green); }
.badge-current::before  { background: var(--green); }
.badge-expiring { background: var(--amber-bg); color: var(--amber); }
.badge-expiring::before { background: var(--amber); }
.badge-expired  { background: var(--red-bg);   color: var(--red); }
.badge-expired::before  { background: var(--red); }
.badge-missing  { background: var(--gray-bg);  color: var(--gray); }
.badge-missing::before  { background: var(--gray); }
.badge-lapsed   { background: #fff3cd; color: #856404; border: 1px solid #ffc107; }

/* OAC brand badges */
.badge-primary  { background: var(--primary-dim); color: var(--oac-violet); }
.badge-primary::before { background: var(--oac-violet); }
.badge-accent   { background: var(--accent-dim);  color: var(--oac-forest); }
.badge-accent::before  { background: var(--oac-forest); }


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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity .15s, background .15s;
  font-family: 'Space Grotesk', sans-serif;
}

.btn:hover { opacity: .87; }

.btn-primary   { background: var(--oac-violet);  color: #fff; }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-mid); }
.btn-success   { background: var(--oac-forest);  color: #fff; }
.btn-danger    { background: var(--red);    color: #fff; }
.btn-ghost     { background: transparent; color: var(--oac-violet); border-color: var(--oac-violet); }
.btn-ghost:hover { background: var(--primary-dim); opacity: 1; }
/* Bootstrap-named outline variant used by several templates (e.g. module cards,
   Support Plan renew/upload). Not part of Bootstrap here — main.css's own .btn
   base rule (border: 1px solid transparent, above) overrides Bootstrap's real
   .btn-outline-primary border/background, so without this rule it renders as a
   plain link with no visible box. Same look as .btn-ghost; kept as a separate
   rule so existing "btn-outline-primary" class names in templates don't need
   to change. Added 2026-08-20 — see .linked-module-card-body .btn below for the
   card-specific white-on-green override this doesn't replace. */
.btn-outline-primary { background: transparent; color: var(--oac-violet); border-color: var(--oac-violet); }
.btn-outline-primary:hover { background: var(--primary-dim); opacity: 1; }
.btn-sm        { padding: 4px 10px; font-size: 12px; }
.btn-lg        { padding: 10px 20px; font-size: 14px; }


/* ── Filters bar ──────────────────────────────────────────────────────────── */

.filters {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.filters input,
.filters select {
  padding: 7px 12px;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
}

.filters input:focus,
.filters select:focus {
  outline: none;
  border-color: var(--oac-violet);
  box-shadow: 0 0 0 3px var(--primary-dim);
}


/* ── Forms ────────────────────────────────────────────────────────────────── */

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.full { grid-column: 1 / -1; }

.form-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}

.form-label .req { color: var(--red); margin-left: 2px; }

.form-input,
.form-select,
.form-textarea {
  padding: 9px 12px;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--oac-violet);
  box-shadow: 0 0 0 3px var(--primary-dim);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
  field-sizing: content;
}

.form-check { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
/* Bootstrap's real rule is `.form-check .form-check-input { float:left;
   margin-left:-1.5em }` — TWO classes, specificity (0,2,0). Our first attempt
   at this fix used `.form-check input` (0,1,1), which loses that specificity
   fight and never actually overrode it — confirmed by checking the real
   vendored bootstrap.min.css, not just generic Bootstrap docs. Re-fixed
   2026-08-18 with the exact matching two-class selector so it wins on
   specificity, with main.css loading after bootstrap.min.css in base.html
   settling any tie. Portal-wide bug (Edit Staff home checkboxes,
   Qlarant/Clearance checkboxes, Document Categories "Staff Visible"). */
.form-check .form-check-input,
.form-check input {
  width: 15px;
  height: 15px;
  accent-color: var(--oac-violet);
  margin: 0;
  float: none;
  flex-shrink: 0;
}

.form-actions {
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Bootstrap form override — match our token system */
.form-control:focus,
.form-select:focus {
  border-color: var(--oac-violet);
  box-shadow: 0 0 0 3px var(--primary-dim);
}


/* ── Flash / alert messages ───────────────────────────────────────────────── */

.flash-list { list-style: none; margin-bottom: 20px; }
.flash-list li {
  padding: 10px 16px;
  border-radius: var(--radius);
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 500;
}

.flash-success { background: var(--green-bg); color: var(--green); }
.flash-info    { background: var(--gray-bg);  color: var(--gray); }
.flash-error   { background: var(--red-bg);   color: var(--red); }
.flash-warning { background: var(--amber-bg); color: var(--amber); }
.flash-danger  { background: var(--red-bg);   color: var(--red); }

/* Bootstrap alert override */
.alert {
  border-radius: var(--radius);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13.5px;
}

.alert-strip {
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 500;
}
.alert-strip.danger  { background: var(--red-bg);   color: var(--red);   border-left: 3px solid var(--red); }
.alert-strip.warning { background: var(--amber-bg); color: var(--amber); border-left: 3px solid var(--amber); }
.alert-strip.info    { background: var(--primary-dim); color: var(--oac-violet); border-left: 3px solid var(--oac-violet); }
.alert-strip.success { background: var(--green-bg); color: var(--green); border-left: 3px solid var(--green); }


/* ── Misc utility components ──────────────────────────────────────────────── */

.missing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.missing-item {
  border: 1px dashed var(--border-mid);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
}

.empty-state .empty-icon { font-size: 40px; margin-bottom: 12px; }
.empty-state p { font-size: 14px; }

/* Divider with OAC gradient */
.oac-divider {
  height: 2px;
  background: var(--oac-gradient);
  border: none;
  border-radius: 2px;
  margin: 1.5rem 0;
}

/* Inline color dot — for facility/status indicators */
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-green  { background: var(--green); }
.dot-amber  { background: var(--amber); }
.dot-red    { background: var(--red); }
.dot-violet { background: var(--oac-violet); }
.dot-sage   { background: var(--oac-sage); }


/* ── Module 11 — Policy acknowledgment status ─────────────────────────────── */

.ack-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.ack-status-row:last-child { border-bottom: none; }

.ack-pending  { color: var(--amber); }
.ack-complete { color: var(--green); }
.ack-overdue  { color: var(--red);   }


/* ── Module 11 — Document library table column widths ─────────────────────── */
/* Replaces inline style="width:Xpx" on <th> elements in library and audit templates. */

.col-doc-icon    { width: 40px; }
.col-doc-number  { width: 140px; }
.col-doc-version { width: 90px; }
.col-doc-date    { width: 110px; }
.col-doc-tags    { width: 130px; }
.col-doc-status  { width: 110px; }
.col-doc-action  { width: 90px; }
.col-doc-ack     { width: 90px; }

/* Small badge variant for dense table rows (audit checklist, library status) */
.badge-xs {
  font-size: 10px;
  padding: 2px 7px;
}

/* Audit tag checkbox list container */
.audit-tag-list {
  background: var(--surface-alt);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  padding: 10px 12px;
}

/* Acknowledgment role selector max-width */
.ack-role-select { max-width: 280px; }

/* Form switch row — ensures toggle is never clipped on left edge */
.form-switch-row {
  display: flex;
  align-items: center;
  padding-left: 0;
  margin-bottom: 0;
}

.form-switch-row .form-check-input {
  margin-left: 0;
  margin-right: 0.5rem;
  flex-shrink: 0;
}


/* ── Mobile responsive ────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  /* Sidebar rules superseded 2026-09-18 by the fuller, dvh-aware
     .sidebar / .sidebar.open block further down (originally added
     2026-09-14 to "replace the old d-none d-md-block approach" but this
     older duplicate was never removed -- two overlapping mobile
     breakpoints defining the same selectors is exactly the kind of thing
     that made this sidebar's real mobile bug hard to track down). */

  .main-content,
  .page-body { padding: 1rem; }

  .page-header { flex-direction: column; align-items: flex-start; }
  .page-header h1 { font-size: 20px; }

  .form-grid { grid-template-columns: 1fr; }

  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

  .filters { flex-direction: column; align-items: stretch; }
  .filters input,
  .filters select,
  .form-input,
  .form-select,
  .form-textarea { width: 100%; }

  .form-actions { flex-wrap: wrap; }

  .topbar-actions { flex-wrap: wrap; gap: 6px; }
}


/* ── Loading overlay ──────────────────────────────────────────────────────── */
/*
   Full-screen semi-transparent overlay shown during slow server actions
   (AI extraction, PDF generation, file uploads). Triggered by JS in base.html
   via data-loading attribute on forms or submit buttons.
*/

#loading-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 20, 0.72);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

#loading-overlay.active {
  display: flex;
}

.loading-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 40px 48px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  min-width: 240px;
}

/* ── Client / Resident Photos (added 2026-08-16) ──────────────────────────── */
/* Resident detail page header avatar — stays circular, ~25% bigger
   (64px -> 80px) with a brand-gradient glow behind it, per 2026-08-17 CSS
   batch. The All Clients card grid avatar (.client-avatar) switched to a
   rounded rectangle and now carries its own img rule locally in
   residents/list.html's extra_css block instead of sharing this one. */
.resident-avatar-lg img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.resident-avatar-lg {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--oac-violet);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Syne', sans-serif;
  font-size: 26px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 0 0 4px #fff;
  position: relative;
}

/* Gradient glow ring behind the photo, using the existing brand gradient. */
.resident-avatar-lg::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: var(--oac-gradient);
  z-index: -1;
  filter: blur(6px);
  opacity: 0.85;
}

.loading-spinner {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 4px solid var(--border-mid);
  border-top-color: var(--oac-violet);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-message {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--oac-slate);
}


/* ── Mobile sidebar (override d-none pattern) ─────────────────────────────── */
/*
   On desktop (≥768px): sidebar sits in the normal grid column flow.
   On mobile (<768px):  sidebar is fixed off-screen left, slides in when
                        .open is added by the hamburger toggle JS.
   Replaces the old d-none d-md-block approach so nav is accessible on phones.
*/

@media (max-width: 767.98px) {

  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    width: 260px;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* keep dark sidebar bg from the existing rule */

    /* Fixed 2026-09-18 -- was `bottom: 0`, which anchors to the LAYOUT
       viewport, not the visible one. Mobile browsers' own bottom toolbar
       (back/forward/tabs) covers the bottom of a `bottom: 0` fixed panel
       whenever that toolbar is shown -- Carrie found the last nav item
       (Users, at the very bottom of the Admin section) landing right under
       it, so it could show, then get covered again before a tap on it
       registered. `100dvh` tracks the real visible viewport instead of the
       worst-case one, and the extra bottom padding below gives the last
       item breathing room even where dvh support is imperfect. */
    height: calc(100vh - var(--topbar-h));
    height: calc(100dvh - var(--topbar-h));
    padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.35);
  }

  /* Main content takes full width on mobile */
  .col-md-10.main-content {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }

}

/* ============================================================
   2026-08-17 CSS batch (Phase 2b bugs/CSS/ideas capture)
   ============================================================ */

/* ── Edit Staff screen: box background + Identity header ──────────────────
   "Boxes" (card bodies, where the form fields live) -> IQ blue. Only the
   Identity section's header -> sage (Qlarant card's header is left as the
   default surface-alt, since only Identity was called out). form-control
   inputs keep their own white background so fields stay readable on the
   periwinkle backdrop. */
#edit-staff-form .card-body {
  background: var(--oac-periwinkle);
}
#edit-staff-form .card-header-identity {
  background: var(--oac-sage);
  color: var(--oac-slate);
}
#edit-staff-form .card-header-identity::before { display: none; }

/* ── Client detail page — "Linked Modules" cards ──────────────────────────
   Label removed from the template; header = IQ blue, body = sage green,
   more compact than the plain Bootstrap card these replaced. */
.linked-module-card {
  border: none;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.linked-module-card-header {
  background: var(--oac-periwinkle);
  padding: 8px 14px 6px;
}

.linked-module-card-header .card-title {
  color: var(--oac-slate);
  font-weight: 700;
  font-size: 0.83rem;
  margin-bottom: 0;
}

.linked-module-card-body {
  background: var(--oac-sage);
  padding: 8px 14px 12px;
}

.linked-module-card-body .card-text {
  color: var(--oac-slate);
  margin-bottom: 8px;
  font-size: 0.78rem;
  line-height: 1.35;
}

/* Bootstrap's .btn-outline-primary text/border is too low-contrast against
   a solid sage body — swap to a solid white pill so the action stays
   readable. */
.linked-module-card-body .btn {
  background: #fff;
  color: var(--oac-violet);
  border-color: #fff;
}
.linked-module-card-body .btn:hover {
  background: var(--oac-violet);
  color: #fff;
  opacity: 1;
}

/* ============================================================
   Module 6C — House Expenses
   ============================================================ */

/* Extra-small badge (shared with Module 11) */
/* .badge-xs already defined in Module 11 section — no duplicate needed */

/* Expense status colors */
.expense-status-approved  { color: var(--bs-success); }
.expense-status-submitted { color: var(--bs-warning);  }
.expense-status-draft     { color: var(--bs-secondary); }

/* Receipt indicator column — fixed narrow */
.col-exp-receipt { width: 60px; }

/* Amount column — right-aligned, no-wrap */
.col-exp-amount {
  width: 90px;
  text-align: right;
  white-space: nowrap;
}

/* Actions column — no-wrap, shrink */
.col-exp-actions {
  width: 1%;
  white-space: nowrap;
}

/* ============================================================
   Module 18 — Contact Directory pickers + Therap import
   (added 2026-09-24)
   ============================================================ */

.contact-import-narrow { max-width: 760px; }

.contact-import-table td { min-width: 9rem; }
.contact-import-table td:last-child { min-width: 0; }

/* "+ Add new" inline fields under a directory dropdown */
.contact-picker-new {
  border-left: 3px solid var(--bs-primary);
  padding-left: .75rem;
  margin-top: .5rem;
}