/*
 * Audit Suite Design System
 * =========================
 * Single source of truth for spacing, color, elevation, typography,
 * card + button + form patterns.  Loaded AFTER Bootstrap so its
 * cascade wins.  Every template picks these up automatically through
 * the Bootstrap variables we redefine, plus opt-in component classes
 * (.ds-card, .ds-stat, .ds-hero) for new-style UI.
 *
 * Design goals:
 *   - Calm, professional colour palette (subtle primary, muted greys).
 *   - Card-first layout — everything lives inside a visible container.
 *   - Generous spacing to reduce visual noise.
 *   - Clear hierarchy: header strip, stat row, content card.
 *   - Works in light AND dark modes (data-bs-theme="dark").
 */

/* -------------------------------------------------------------------------- */
/* 1. Design tokens — CSS custom properties                                   */
/* -------------------------------------------------------------------------- */

:root {
  /* ---- Colour palette -------------------------------------------------- */
  /* Primary stays on the brand blue; the other semantic families are
     punched up to brighter Tailwind-style hues so badges, alerts and
     stat-card accents read as vibrant instead of muted. */
  --ds-primary:        #2563eb;
  --ds-primary-hover:  #1d4ed8;
  --ds-primary-bg:     #eff6ff;
  --ds-primary-border: #c7dcfe;

  --ds-success:        #10b981;   /* emerald-500 (was #0f9d58) */
  --ds-success-bg:     #ecfdf5;

  --ds-warning:        #f59e0b;   /* amber-500 (was #d97706) */
  --ds-warning-bg:     #fffbeb;

  --ds-danger:         #ef4444;   /* red-500 (was #dc2626) */
  --ds-danger-bg:      #fef2f2;

  --ds-info:           #06b6d4;   /* cyan-500 (was #0891b2) */
  --ds-info-bg:        #ecfeff;

  /* Neutral scale — warm slate */
  --ds-gray-0:   #ffffff;
  --ds-gray-50:  #f8fafc;
  --ds-gray-100: #f1f5f9;
  --ds-gray-200: #e2e8f0;
  --ds-gray-300: #cbd5e1;
  --ds-gray-400: #94a3b8;
  --ds-gray-500: #64748b;
  --ds-gray-600: #475569;
  --ds-gray-700: #334155;
  --ds-gray-800: #1e293b;
  --ds-gray-900: #0f172a;

  --ds-body-bg:   var(--ds-gray-50);
  --ds-surface:   var(--ds-gray-0);
  --ds-border:    var(--ds-gray-200);
  --ds-border-strong: var(--ds-gray-300);

  --ds-text:            var(--ds-gray-800);
  --ds-text-muted:      var(--ds-gray-500);
  --ds-text-subtle:     var(--ds-gray-400);

  /* ---- Spacing scale (4-pt grid, px) --------------------------------- */
  --ds-space-1: 0.25rem;   /*  4 */
  --ds-space-2: 0.5rem;    /*  8 */
  --ds-space-3: 0.75rem;   /* 12 */
  --ds-space-4: 1rem;      /* 16 */
  --ds-space-5: 1.5rem;    /* 24 */
  --ds-space-6: 2rem;      /* 32 */
  --ds-space-7: 3rem;      /* 48 */
  --ds-space-8: 4rem;      /* 64 */

  /* ---- Radius ---------------------------------------------------------- */
  --ds-radius-sm: 0.375rem;  /*  6 — chips, badges */
  --ds-radius-md: 0.5rem;    /*  8 — buttons, inputs */
  --ds-radius-lg: 0.75rem;   /* 12 — cards */
  --ds-radius-xl: 1rem;      /* 16 — modals, hero cards */

  /* ---- Elevation (5 levels) -------------------------------------------
     Bumped ~30-50% vs the original tokens so card layers are visible at
     a glance without being heavy. The brand-blue tint on --ds-shadow-md
     and -lg pulls cards toward the palette on hover instead of going
     flat grey. */
  --ds-shadow-none:  none;
  --ds-shadow-xs:    0 1px 2px 0 rgba(15, 23, 42, 0.08);
  --ds-shadow-sm:    0 2px 4px -1px rgba(15, 23, 42, 0.10), 0 1px 2px -1px rgba(15, 23, 42, 0.06);
  --ds-shadow-md:    0 6px 10px -2px rgba(37, 99, 235, 0.10), 0 3px 5px -3px rgba(15, 23, 42, 0.08);
  --ds-shadow-lg:    0 14px 22px -4px rgba(37, 99, 235, 0.14), 0 6px 8px -5px rgba(15, 23, 42, 0.08);
  --ds-shadow-xl:    0 22px 30px -6px rgba(37, 99, 235, 0.16), 0 8px 12px -6px rgba(15, 23, 42, 0.08);

  /* ---- Typography -----------------------------------------------------
     Two-track system: Pilat for display (headings, hero titles, brand,
     stat values), clean UI stack for body (tables, forms, lists, dense
     paragraphs). The @font-face for Pilat lives in base_audit_suite.html. */
  --ds-font-sans:    'Segoe UI', system-ui, -apple-system, 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --ds-font-display: 'Pilat', 'Segoe UI', system-ui, sans-serif;

  --ds-fs-xs:   0.75rem;   /* 12 */
  --ds-fs-sm:   0.8125rem; /* 13 */
  --ds-fs-base: 0.875rem;  /* 14 */
  --ds-fs-md:   0.9375rem; /* 15 */
  --ds-fs-lg:   1rem;      /* 16 */
  --ds-fs-xl:   1.125rem;  /* 18 */
  --ds-fs-2xl:  1.375rem;  /* 22 */
  --ds-fs-3xl:  1.75rem;   /* 28 */
  --ds-fs-4xl:  2.25rem;   /* 36 */

  --ds-fw-normal:   400;
  --ds-fw-medium:   500;
  --ds-fw-semibold: 600;
  --ds-fw-bold:     700;

  /* ---- Motion --------------------------------------------------------- */
  --ds-motion-fast:   120ms;
  --ds-motion-base:   180ms;
  --ds-motion-slow:   280ms;
  --ds-ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

[data-bs-theme="dark"] {
  --ds-body-bg:   #0f172a;
  --ds-surface:   #1e293b;
  --ds-border:    #334155;
  --ds-border-strong: #475569;
  --ds-text:          #e2e8f0;
  --ds-text-muted:    #94a3b8;
  --ds-text-subtle:   #64748b;

  --ds-primary-bg:     rgba(37, 99, 235, 0.15);
  --ds-primary-border: rgba(37, 99, 235, 0.4);
  --ds-success-bg:     rgba(15, 157, 88, 0.15);
  --ds-warning-bg:     rgba(217, 119, 6, 0.15);
  --ds-danger-bg:      rgba(220, 38, 38, 0.15);
  --ds-info-bg:        rgba(8, 145, 178, 0.15);
}

/* -------------------------------------------------------------------------- */
/* 2. Bootstrap variable overrides — inherited everywhere                    */
/* -------------------------------------------------------------------------- */

:root {
  --bs-primary:    var(--ds-primary);
  --bs-primary-rgb: 37, 99, 235;
  --bs-body-bg:    var(--ds-body-bg);
  --bs-body-color: var(--ds-text);
  --bs-border-color: var(--ds-border);
  --bs-border-radius: var(--ds-radius-md);
  --bs-border-radius-lg: var(--ds-radius-lg);
  --bs-box-shadow-sm: var(--ds-shadow-sm);
  --bs-box-shadow:    var(--ds-shadow-md);
  --bs-box-shadow-lg: var(--ds-shadow-lg);
}

/* -------------------------------------------------------------------------- */
/* 3. Global tweaks                                                          */
/* -------------------------------------------------------------------------- */

body {
  font-family: var(--ds-font-sans);
  font-size: var(--ds-fs-base);
  color: var(--ds-text);
  background-color: var(--ds-body-bg);
}

h1, h2, h3, h4 {
  color: var(--ds-text);
  font-weight: var(--ds-fw-semibold);
  letter-spacing: -0.011em;
  font-family: var(--ds-font-display);
}

.text-muted {
  color: var(--ds-text-muted) !important;
}

/* -------------------------------------------------------------------------- */
/* 4. Card — the core layout atom                                            */
/* -------------------------------------------------------------------------- */

.card, .ds-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-xs);
  transition: box-shadow var(--ds-motion-base) var(--ds-ease-standard);
}

.card:hover {
  box-shadow: var(--ds-shadow-sm);
}

.card.card-clickable,
a.ds-card-link {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}
.card.card-clickable:hover,
a.ds-card-link:hover .card,
a.ds-card-link:hover.ds-card {
  box-shadow: var(--ds-shadow-md);
  transform: translateY(-1px);
  border-color: var(--ds-border-strong);
}

.card-header, .ds-card-header {
  padding: var(--ds-space-4) var(--ds-space-5);
  border-bottom: 1px solid var(--ds-border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
}

.card-body {
  padding: var(--ds-space-5);
}

.card-footer {
  padding: var(--ds-space-3) var(--ds-space-5);
  border-top: 1px solid var(--ds-border);
  background: transparent;
}

.card-title {
  font-size: var(--ds-fs-lg);
  font-weight: var(--ds-fw-semibold);
  margin: 0;
}

/* -------------------------------------------------------------------------- */
/* 5. Stat card — key metrics in dashboard headers                           */
/* -------------------------------------------------------------------------- */

.ds-stat {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-4) var(--ds-space-5);
  display: flex;
  align-items: center;
  gap: var(--ds-space-4);
  transition: all var(--ds-motion-base) var(--ds-ease-standard);
}
.ds-stat:hover {
  box-shadow: var(--ds-shadow-sm);
  border-color: var(--ds-border-strong);
}
.ds-stat-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: var(--ds-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--ds-primary);
  background: var(--ds-primary-bg);
}
.ds-stat-value {
  font-size: var(--ds-fs-3xl);
  font-weight: var(--ds-fw-bold);
  line-height: 1.1;
  color: var(--ds-text);
  font-family: var(--ds-font-display);
  letter-spacing: -0.02em;
}
.ds-stat-label {
  font-size: var(--ds-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ds-text-muted);
  font-weight: var(--ds-fw-medium);
  margin-top: 2px;
}
.ds-stat-trend {
  font-size: var(--ds-fs-xs);
  color: var(--ds-text-muted);
  margin-top: 4px;
}

/* Status-coloured stat variants — tinted background + coloured left rail.
   Pre-refresh the whole card was saturated; this keeps the design-system tone
   but restores enough colour that the row reads as five distinct tiles. */
.ds-stat-primary { border-left: 3px solid var(--ds-primary); background: var(--ds-primary-bg); }
.ds-stat-primary .ds-stat-icon { color: var(--ds-primary); background: var(--ds-surface); }
.ds-stat-success { border-left: 3px solid var(--ds-success); background: var(--ds-success-bg); }
.ds-stat-success .ds-stat-icon { color: var(--ds-success); background: var(--ds-surface); }
.ds-stat-warning { border-left: 3px solid var(--ds-warning); background: var(--ds-warning-bg); }
.ds-stat-warning .ds-stat-icon { color: var(--ds-warning); background: var(--ds-surface); }
.ds-stat-danger  { border-left: 3px solid var(--ds-danger);  background: var(--ds-danger-bg); }
.ds-stat-danger  .ds-stat-icon { color: var(--ds-danger);  background: var(--ds-surface); }
.ds-stat-info    { border-left: 3px solid var(--ds-info);    background: var(--ds-info-bg); }
.ds-stat-info    .ds-stat-icon { color: var(--ds-info);    background: var(--ds-surface); }

/* -------------------------------------------------------------------------- */
/* 6. Hero card — page header with title + actions + stats row               */
/* -------------------------------------------------------------------------- */

.ds-hero {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-5) var(--ds-space-6);
  margin-bottom: var(--ds-space-5);
  box-shadow: var(--ds-shadow-xs);
}
.ds-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--ds-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--ds-space-4);
}
.ds-hero-title {
  font-size: var(--ds-fs-2xl);
  font-weight: var(--ds-fw-bold);
  line-height: 1.2;
  margin: 0;
  color: var(--ds-text);
  font-family: var(--ds-font-display);
}
.ds-hero-subtitle {
  font-size: var(--ds-fs-sm);
  color: var(--ds-text-muted);
  margin: 6px 0 0;
}
.ds-hero-actions {
  display: flex;
  gap: var(--ds-space-2);
  flex-wrap: wrap;
}

/* Status-coloured hero variants — opt-in modifier that tints the header with
   a soft accent bg + coloured left rail. Text colours stay the same so all
   existing `.ds-hero-title` / `.ds-hero-subtitle` content stays legible. */
.ds-hero-primary { border-left: 4px solid var(--ds-primary); background: var(--ds-primary-bg); }
.ds-hero-success { border-left: 4px solid var(--ds-success); background: var(--ds-success-bg); }
.ds-hero-warning { border-left: 4px solid var(--ds-warning); background: var(--ds-warning-bg); }
.ds-hero-danger  { border-left: 4px solid var(--ds-danger);  background: var(--ds-danger-bg); }
.ds-hero-info    { border-left: 4px solid var(--ds-info);    background: var(--ds-info-bg); }

/* -------------------------------------------------------------------------- */
/* 7. Nav card — quick-navigation tiles for dashboards                       */
/* -------------------------------------------------------------------------- */

.ds-nav-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-5);
  display: block;
  text-decoration: none;
  color: inherit;
  transition: all var(--ds-motion-base) var(--ds-ease-standard);
  height: 100%;
  position: relative;
}
.ds-nav-card:hover {
  border-color: var(--ds-primary);
  box-shadow: var(--ds-shadow-md);
  transform: translateY(-2px);
  color: inherit;
  text-decoration: none;
}
.ds-nav-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--ds-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--ds-primary);
  background: var(--ds-primary-bg);
  margin-bottom: var(--ds-space-3);
}
.ds-nav-card-title {
  font-size: var(--ds-fs-lg);
  font-weight: var(--ds-fw-semibold);
  color: var(--ds-text);
  margin: 0 0 4px;
}
.ds-nav-card-desc {
  font-size: var(--ds-fs-sm);
  color: var(--ds-text-muted);
  line-height: 1.45;
  margin: 0;
}
.ds-nav-card-meta {
  font-size: var(--ds-fs-xs);
  color: var(--ds-text-subtle);
  margin-top: var(--ds-space-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ds-nav-card-chevron {
  position: absolute;
  top: var(--ds-space-5);
  right: var(--ds-space-5);
  color: var(--ds-text-subtle);
  transition: transform var(--ds-motion-fast) var(--ds-ease-standard);
}
.ds-nav-card:hover .ds-nav-card-chevron {
  transform: translateX(3px);
  color: var(--ds-primary);
}

/* -------------------------------------------------------------------------- */
/* 8. Buttons — clearer hierarchy                                            */
/* -------------------------------------------------------------------------- */

.btn {
  font-weight: var(--ds-fw-medium);
  border-radius: var(--ds-radius-md);
  transition: all var(--ds-motion-fast) var(--ds-ease-standard);
  padding: 0.4rem 0.9rem;
  font-size: var(--ds-fs-base);
}
.btn-sm {
  padding: 0.3rem 0.7rem;
  font-size: var(--ds-fs-sm);
}
.btn-lg {
  padding: 0.55rem 1.1rem;
  font-size: var(--ds-fs-md);
}

.btn-primary {
  /* Subtle top-to-bottom gradient gives the primary CTA a bit of vibrance
     without reading as a skeuomorphic "3D" button. Falls through to the
     flat --ds-primary if the user agent ignores the gradient. */
  background: linear-gradient(180deg, var(--ds-primary) 0%, var(--ds-primary-hover) 100%);
  border-color: var(--ds-primary-hover);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--ds-primary-hover);
  border-color: var(--ds-primary-hover);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25), 0 0 0 3px rgba(37, 99, 235, 0.15);
  transform: translateY(-1px);
}

.btn-outline-primary {
  border-color: var(--ds-border-strong);
  color: var(--ds-primary);
}
.btn-outline-primary:hover {
  background: var(--ds-primary-bg);
  border-color: var(--ds-primary);
  color: var(--ds-primary);
}

.btn-soft {
  background: var(--ds-primary-bg);
  border: 1px solid var(--ds-primary-border);
  color: var(--ds-primary);
}
.btn-soft:hover {
  background: var(--ds-primary);
  color: #fff;
  border-color: var(--ds-primary);
}

/* -------------------------------------------------------------------------- */
/* 9. Form controls                                                          */
/* -------------------------------------------------------------------------- */

.form-control, .form-select {
  border-radius: var(--ds-radius-md);
  border-color: var(--ds-border);
  font-size: var(--ds-fs-base);
  padding: 0.4rem 0.75rem;
  transition: border-color var(--ds-motion-fast), box-shadow var(--ds-motion-fast);
}
.form-control:focus, .form-select:focus {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.form-label {
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-fw-medium);
  color: var(--ds-text);
  margin-bottom: var(--ds-space-1);
}

/* -------------------------------------------------------------------------- */
/* 10. Badges, pills, chips                                                  */
/* -------------------------------------------------------------------------- */

.badge {
  font-weight: var(--ds-fw-medium);
  font-size: var(--ds-fs-xs);
  padding: 0.3em 0.6em;
  border-radius: var(--ds-radius-sm);
  letter-spacing: 0.01em;
}
.badge.bg-primary   { background: var(--ds-primary) !important; }
.badge.bg-success   { background: var(--ds-success) !important; }
/* bg-warning / bg-info do not force `color` so a template can opt into
   `text-dark` (which is the correct contrast on amber/cyan) without losing
   the specificity fight against Bootstrap. Bootstrap's own default still
   renders white text when no class is set, matching the previous behaviour. */
.badge.bg-warning   { background: var(--ds-warning) !important; }
.badge.bg-danger    { background: var(--ds-danger)  !important; }
.badge.bg-info      { background: var(--ds-info)    !important; }

/* Soft badge variants — more subtle than Bootstrap's default.
   Text uses Tailwind-700/800 shades rather than the Tailwind-500 semantic
   tokens: the bumped palette (#10b981, #f59e0b, #06b6d4) looks right on
   dark-mode surfaces but fails WCAG contrast on the pale --ds-{color}-bg
   companions in light mode (e.g. amber-500 on #fffbeb reads ~2:1). The
   darker shades pass 4.5:1 comfortably. Dark-mode overrides for these
   classes in §19 keep the brighter hues where they belong. */
.badge-soft-primary { background: var(--ds-primary-bg); color: #1e40af;             border: 1px solid var(--ds-primary-border); }
.badge-soft-success { background: var(--ds-success-bg); color: #047857;             border: 1px solid rgba(5, 150, 105, 0.25); }
.badge-soft-warning { background: var(--ds-warning-bg); color: #b45309;             border: 1px solid rgba(180, 83, 9, 0.25); }
.badge-soft-danger  { background: var(--ds-danger-bg);  color: #b91c1c;             border: 1px solid rgba(185, 28, 28, 0.25); }
.badge-soft-info    { background: var(--ds-info-bg);    color: #0e7490;             border: 1px solid rgba(14, 116, 144, 0.25); }
.badge-soft-muted   { background: var(--ds-gray-100);   color: var(--ds-gray-700);  border: 1px solid var(--ds-border); }

/* -------------------------------------------------------------------------- */
/* 11. Tables                                                                */
/* -------------------------------------------------------------------------- */

.table {
  color: var(--ds-text);
}
.table > :not(caption) > * > * {
  padding: var(--ds-space-3) var(--ds-space-4);
  border-bottom-color: var(--ds-border);
}
.table thead th {
  font-size: var(--ds-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ds-text-muted);
  font-weight: var(--ds-fw-semibold);
  background: var(--ds-gray-50);
  border-bottom: 1px solid var(--ds-border);
}
.table-hover tbody tr:hover {
  background: var(--ds-gray-50);
}
[data-bs-theme="dark"] .table thead th {
  background: var(--ds-gray-800);
  color: var(--ds-text-muted);
}
[data-bs-theme="dark"] .table-hover tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* -------------------------------------------------------------------------- */
/* 12. Breadcrumbs                                                           */
/* -------------------------------------------------------------------------- */

.breadcrumb {
  font-size: var(--ds-fs-sm);
  padding: 0;
  margin-bottom: var(--ds-space-3);
}
.breadcrumb-item a {
  color: var(--ds-text-muted);
  text-decoration: none;
}
.breadcrumb-item a:hover {
  color: var(--ds-primary);
}
.breadcrumb-item.active {
  color: var(--ds-text);
  font-weight: var(--ds-fw-medium);
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--ds-text-subtle);
}

/* -------------------------------------------------------------------------- */
/* 13. Navs and tabs                                                         */
/* -------------------------------------------------------------------------- */

.nav-tabs {
  border-bottom: 1px solid var(--ds-border);
  gap: var(--ds-space-2);
}
.nav-tabs .nav-link {
  color: var(--ds-text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--ds-space-3) var(--ds-space-4);
  margin-bottom: -1px;
  font-weight: var(--ds-fw-medium);
  font-size: var(--ds-fs-sm);
  background: transparent;
  transition: color var(--ds-motion-fast), border-color var(--ds-motion-fast);
}
.nav-tabs .nav-link:hover {
  color: var(--ds-text);
  border-bottom-color: var(--ds-border-strong);
  background: transparent;
}
.nav-tabs .nav-link.active {
  color: var(--ds-primary);
  border-bottom-color: var(--ds-primary);
  background: transparent;
}

/* -------------------------------------------------------------------------- */
/* 14. Alerts — softer, less shouty                                          */
/* -------------------------------------------------------------------------- */

.alert {
  border-radius: var(--ds-radius-md);
  border: 1px solid transparent;
  padding: var(--ds-space-3) var(--ds-space-4);
  font-size: var(--ds-fs-sm);
}
.alert-primary { background: var(--ds-primary-bg); color: var(--ds-primary); border-color: var(--ds-primary-border); }
.alert-success { background: var(--ds-success-bg); color: var(--ds-success); border-color: rgba(15, 157, 88, 0.25); }
.alert-warning { background: var(--ds-warning-bg); color: var(--ds-warning); border-color: rgba(217, 119, 6, 0.25); }
.alert-danger  { background: var(--ds-danger-bg);  color: var(--ds-danger);  border-color: rgba(220, 38, 38, 0.25); }
.alert-info    { background: var(--ds-info-bg);    color: var(--ds-info);    border-color: rgba(8, 145, 178, 0.25); }

/* -------------------------------------------------------------------------- */
/* 15. Site Admin — drop-in improvements                                     */
/* -------------------------------------------------------------------------- */

.sa-topnav {
  background: var(--ds-surface);
  border-bottom: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow-xs);
  padding: 0 var(--ds-space-6);
  display: flex;
  align-items: center;
  gap: var(--ds-space-4);
  min-height: 56px;
  position: sticky;
  top: 0;
  z-index: 1020;
}
.sa-brand {
  font-weight: var(--ds-fw-bold);
  font-size: var(--ds-fs-md);
  color: var(--ds-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
}
.sa-brand:hover { color: var(--ds-primary); }

.sa-nav {
  display: flex;
  gap: var(--ds-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sa-nav > li > a,
.sa-nav .sa-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 0.5rem 0.9rem;
  border-radius: var(--ds-radius-md);
  color: var(--ds-text-muted);
  text-decoration: none;
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-fw-medium);
  border: none;
  background: transparent;
  transition: background var(--ds-motion-fast), color var(--ds-motion-fast);
}
.sa-nav > li > a:hover,
.sa-nav .sa-dropdown-toggle:hover {
  background: var(--ds-gray-100);
  color: var(--ds-text);
}
.sa-nav > li > a.active,
.sa-nav .sa-dropdown-toggle.active {
  background: var(--ds-primary-bg);
  color: var(--ds-primary);
}

.sa-card { /* Cards inside site admin follow the same tokens */
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-xs);
  transition: box-shadow var(--ds-motion-base) var(--ds-ease-standard);
}
.sa-card:hover {
  box-shadow: var(--ds-shadow-sm);
}

.sa-page-help {
  background: var(--ds-info-bg);
  border: 1px solid rgba(8, 145, 178, 0.2);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-3) var(--ds-space-4);
  color: var(--ds-info);
  font-size: var(--ds-fs-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-2);
  margin-bottom: var(--ds-space-4);
}

/* -------------------------------------------------------------------------- */
/* 16. Utility — section dividers, empty states, list items                  */
/* -------------------------------------------------------------------------- */

.ds-section-title {
  font-size: var(--ds-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ds-text-muted);
  font-weight: var(--ds-fw-semibold);
  margin-bottom: var(--ds-space-3);
}

.ds-empty {
  text-align: center;
  padding: var(--ds-space-7) var(--ds-space-5);
  color: var(--ds-text-muted);
}
.ds-empty .bi {
  font-size: 2.5rem;
  opacity: 0.4;
  display: block;
  margin-bottom: var(--ds-space-3);
}

.ds-inline-icon {
  width: 20px;
  text-align: center;
  color: var(--ds-text-muted);
}

/* -------------------------------------------------------------------------- */
/* 17. Dark-mode overrides                                                   */
/* -------------------------------------------------------------------------- */

[data-bs-theme="dark"] body          { background: var(--ds-body-bg); color: var(--ds-text); }
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .sa-card,
[data-bs-theme="dark"] .ds-card,
[data-bs-theme="dark"] .ds-stat,
[data-bs-theme="dark"] .ds-hero,
[data-bs-theme="dark"] .ds-nav-card { background: var(--ds-surface); border-color: var(--ds-border); }
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer  { border-color: var(--ds-border); }
[data-bs-theme="dark"] .sa-topnav    { background: var(--ds-surface); border-color: var(--ds-border); }

/* -------------------------------------------------------------------------- */
/* 18. Focus — visible for keyboard users                                    */
/* -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: 2px;
  border-radius: var(--ds-radius-sm);
}
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline-color: var(--ds-primary);
}

/* -------------------------------------------------------------------------- */
/* 19. Bootstrap-utility dark-mode compensation                              */
/* -------------------------------------------------------------------------- */
/* These rules patch Bootstrap utility classes that Django templates use
   heavily but that don't cooperate with dark mode on their own. We keep the
   rules scoped to .badge so we don't override arbitrary containers. */

/* `.badge.bg-{color}.bg-opacity-10` + `.text-{color}` — the "soft chip"
   pattern. Templates pair a tinted Bootstrap bg utility with the
   matching `text-{color}` token — which in light mode resolves to the
   Tailwind-500 hue (#10b981 / #f59e0b / #06b6d4). Those read at ~2:1
   on the pale tint (WCAG fail). Force darker Tailwind-700/800 text in
   light mode across every colour family. The dark-mode block further
   down overrides these with brighter hues where the pale text would
   otherwise vanish against the dark surface. */
.badge.bg-primary.bg-opacity-10,
.badge.bg-primary.bg-opacity-25 {
  background-color: var(--ds-primary-bg) !important;
  color: #1e40af !important;
}
.badge.bg-success.bg-opacity-10,
.badge.bg-success.bg-opacity-25 {
  background-color: var(--ds-success-bg) !important;
  color: #047857 !important;
}
.badge.bg-warning.bg-opacity-10,
.badge.bg-warning.bg-opacity-25 {
  background-color: var(--ds-warning-bg) !important;
  color: #b45309 !important;
}
.badge.bg-danger.bg-opacity-10,
.badge.bg-danger.bg-opacity-25 {
  background-color: var(--ds-danger-bg) !important;
  color: #b91c1c !important;
}
.badge.bg-info.bg-opacity-10,
.badge.bg-info.bg-opacity-25 {
  background-color: var(--ds-info-bg) !important;
  color: #0e7490 !important;
}
.badge.bg-secondary.bg-opacity-10,
.badge.bg-secondary.bg-opacity-25 {
  background-color: var(--ds-gray-100) !important;
  color: #334155 !important;
}

/* Dark mode — restore brighter hues on the tinted chip (the light-mode
   rules above would otherwise leave near-black text on a near-black bg).
   Higher specificity (the attribute selector) wins over the unscoped
   rules above. */
[data-bs-theme="dark"] .badge.bg-primary.bg-opacity-10,
[data-bs-theme="dark"] .badge.bg-primary.bg-opacity-25 {
  background-color: rgba(59, 130, 246, 0.22) !important;
  color: #93c5fd !important;
}
[data-bs-theme="dark"] .badge.bg-success.bg-opacity-10,
[data-bs-theme="dark"] .badge.bg-success.bg-opacity-25 {
  background-color: rgba(34, 197, 94, 0.22) !important;
  color: #6ee7b7 !important;
}
[data-bs-theme="dark"] .badge.bg-warning.bg-opacity-10,
[data-bs-theme="dark"] .badge.bg-warning.bg-opacity-25 {
  background-color: rgba(234, 179, 8, 0.22) !important;
  color: #fde68a !important;
}
[data-bs-theme="dark"] .badge.bg-danger.bg-opacity-10,
[data-bs-theme="dark"] .badge.bg-danger.bg-opacity-25 {
  background-color: rgba(239, 68, 68, 0.22) !important;
  color: #fca5a5 !important;
}
[data-bs-theme="dark"] .badge.bg-info.bg-opacity-10,
[data-bs-theme="dark"] .badge.bg-info.bg-opacity-25 {
  background-color: rgba(6, 182, 212, 0.22) !important;
  color: #67e8f9 !important;
}
[data-bs-theme="dark"] .badge.bg-secondary.bg-opacity-10,
[data-bs-theme="dark"] .badge.bg-secondary.bg-opacity-25 {
  background-color: rgba(148, 163, 184, 0.24) !important;
  color: #cbd5e1 !important;
}

/* `.badge.bg-light` + `.text-dark` + optional `.border` — the canonical
   "chip" used in list rows. In dark mode the near-white bg turns into a
   bright island that no longer reads as a neutral tag. Swap the pair to
   surface + body text so the chip sits naturally on the dark page. */
[data-bs-theme="dark"] .badge.bg-light,
[data-bs-theme="dark"] .badge.bg-light.text-dark,
[data-bs-theme="dark"] .badge.bg-light.text-secondary {
  background-color: var(--ds-gray-800) !important;
  color: var(--ds-text) !important;
  border-color: var(--ds-border-strong);
}

/* Saturated `.bg-warning` / `.bg-info` badges default to the body text
   colour. Dark-mode body text is light, which becomes low-contrast on
   bright amber / cyan. Force dark text unless the template explicitly
   asked for `.text-white`. */
.badge.bg-warning:not(.text-white) { color: #212529; }
.badge.bg-info:not(.text-white)    { color: #212529; }

/* Dark-mode companions for the in-house `.badge-soft-*` variants. The
   light-mode CSS above uses colour-family rgba tints that become faint
   against the dark surface; use the brighter family values here. */
[data-bs-theme="dark"] .badge-soft-primary {
  background: rgba(59, 130, 246, 0.22);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.4);
}
[data-bs-theme="dark"] .badge-soft-success {
  background: rgba(34, 197, 94, 0.22);
  color: #6ee7b7;
  border-color: rgba(34, 197, 94, 0.4);
}
[data-bs-theme="dark"] .badge-soft-warning {
  background: rgba(234, 179, 8, 0.22);
  color: #fde68a;
  border-color: rgba(234, 179, 8, 0.4);
}
[data-bs-theme="dark"] .badge-soft-danger {
  background: rgba(239, 68, 68, 0.22);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.4);
}
[data-bs-theme="dark"] .badge-soft-info {
  background: rgba(6, 182, 212, 0.22);
  color: #67e8f9;
  border-color: rgba(6, 182, 212, 0.4);
}
[data-bs-theme="dark"] .badge-soft-muted {
  background: var(--ds-gray-800);
  color: var(--ds-text);
  border-color: var(--ds-border-strong);
}

/* Alerts — mirror the soft-badge treatment so their foreground colours
   stay bright enough against the dark tint. The tinted backgrounds are
   already handled by the rgba `--ds-{color}-bg` overrides at the top of
   the dark-mode block. */
[data-bs-theme="dark"] .alert-primary { color: #93c5fd; border-color: rgba(59, 130, 246, 0.4); }
[data-bs-theme="dark"] .alert-success { color: #6ee7b7; border-color: rgba(34, 197, 94, 0.4); }
[data-bs-theme="dark"] .alert-warning { color: #fde68a; border-color: rgba(234, 179, 8, 0.4); }
[data-bs-theme="dark"] .alert-danger  { color: #fca5a5; border-color: rgba(239, 68, 68, 0.4); }
[data-bs-theme="dark"] .alert-info    { color: #67e8f9; border-color: rgba(6, 182, 212, 0.4); }

/* Bootstrap's `text-{color}` utilities pointing at muted hex values need
   the same dark-mode brightening so small inline labels (priority icons,
   "X active" hints, etc.) don't disappear. */
[data-bs-theme="dark"] .text-primary   { color: #93c5fd !important; }
[data-bs-theme="dark"] .text-success   { color: #6ee7b7 !important; }
[data-bs-theme="dark"] .text-warning   { color: #fde68a !important; }
[data-bs-theme="dark"] .text-danger    { color: #fca5a5 !important; }
[data-bs-theme="dark"] .text-info      { color: #67e8f9 !important; }
[data-bs-theme="dark"] .text-secondary { color: #cbd5e1 !important; }

/* -------------------------------------------------------------------------- */
/* 20. Stage chip + status pill — hoisted from per-page <style> blocks       */
/* -------------------------------------------------------------------------- */

.stage-chip {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 50px;
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-fw-medium);
  margin: 2px;
  cursor: pointer;
  transition: transform var(--ds-motion-fast) var(--ds-ease-standard);
  border: 1px solid transparent;
  background: var(--ds-gray-100);
  color: var(--ds-text-muted);
}
.stage-chip:hover    { transform: scale(1.05); }
.stage-chip.selected { box-shadow: 0 0 0 2px var(--ds-primary); }
.stage-chip.stage-draft   { background: var(--ds-gray-100);   color: var(--ds-text-muted); border-color: var(--ds-border); }
.stage-chip.stage-review  { background: var(--ds-warning-bg); color: var(--ds-warning);    border-color: rgba(217, 119, 6, 0.4); }
.stage-chip.stage-open    { background: var(--ds-success-bg); color: var(--ds-success);    border-color: rgba(15, 157, 88, 0.4); }
.stage-chip.stage-closed  { background: var(--ds-gray-200);   color: var(--ds-gray-700);   border-color: var(--ds-border-strong); }
.stage-chip.stage-pending { background: var(--ds-primary-bg); color: var(--ds-primary);    border-color: var(--ds-primary-border); }
[data-bs-theme="dark"] .stage-chip.stage-review  { color: #fde68a; }
[data-bs-theme="dark"] .stage-chip.stage-open    { color: #6ee7b7; }
[data-bs-theme="dark"] .stage-chip.stage-pending { color: #93c5fd; }
[data-bs-theme="dark"] .stage-chip.stage-closed  { background: var(--ds-gray-700); color: var(--ds-text-muted); }
[data-bs-theme="dark"] .stage-chip.stage-draft   { background: var(--ds-gray-800); color: var(--ds-text-muted); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-fw-medium);
  line-height: 1.4;
}
.status-pill.status-ok   { background: var(--ds-success-bg); color: #047857; border: 1px solid rgba(5, 150, 105, 0.35); }
.status-pill.status-fail { background: var(--ds-danger-bg);  color: #b91c1c; border: 1px solid rgba(185, 28, 28, 0.35); }
.status-pill.status-warn { background: var(--ds-warning-bg); color: #b45309; border: 1px solid rgba(180, 83, 9, 0.35); }
[data-bs-theme="dark"] .status-pill.status-ok   { color: #6ee7b7; }
[data-bs-theme="dark"] .status-pill.status-fail { color: #fca5a5; }
[data-bs-theme="dark"] .status-pill.status-warn { color: #fde68a; }

/* -------------------------------------------------------------------------- */
/* 21. Audits list chips — hoisted from audits/templates/audits/audits_list.html */
/* -------------------------------------------------------------------------- */

/* Workflow-stage badge. Template writes `.workflow-badge.planning`,
   `.in-progress`, `.draft-report`, `.with-bu`, `.issued`, `.deferred`,
   `.cancelled`. Each variant uses a --ds-*-bg tint (auto-adapts to dark)
   and a Tailwind-700/800 text colour in light mode; the dark-mode
   override below brightens the text to match the dark-mode brightening
   block in §19. */
.workflow-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.55rem;
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-fw-medium);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-primary-bg);
  color: #1e40af;
  white-space: nowrap;
}
.workflow-badge.planning       { background: var(--ds-warning-bg); color: #b45309; }
.workflow-badge.in-progress    { background: var(--ds-info-bg);    color: #0e7490; }
.workflow-badge.draft-report   { background: var(--ds-gray-100);   color: var(--ds-gray-700); }
.workflow-badge.with-bu        { background: var(--ds-success-bg); color: #047857; }
.workflow-badge.issued         { background: var(--ds-success-bg); color: #047857; }
.workflow-badge.deferred       { background: var(--ds-danger-bg);  color: #b91c1c; }
.workflow-badge.cancelled      { background: var(--ds-danger-bg);  color: #991b1b; }
[data-bs-theme="dark"] .workflow-badge              { color: #93c5fd; }
[data-bs-theme="dark"] .workflow-badge.planning     { color: #fde68a; }
[data-bs-theme="dark"] .workflow-badge.in-progress  { color: #67e8f9; }
[data-bs-theme="dark"] .workflow-badge.draft-report { background: var(--ds-gray-700); color: var(--ds-text); }
[data-bs-theme="dark"] .workflow-badge.with-bu      { color: #6ee7b7; }
[data-bs-theme="dark"] .workflow-badge.issued       { color: #6ee7b7; }
[data-bs-theme="dark"] .workflow-badge.deferred     { color: #fca5a5; }
[data-bs-theme="dark"] .workflow-badge.cancelled    { color: #fca5a5; }

/* Issue-count pills (Draft / Pending / Published). `.has-items` marks
   the row that actually has a count > 0 and bumps visual weight. */
.issue-count {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--ds-fs-xs);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--ds-gray-50);
  color: var(--ds-text-muted);
  border: 1px solid var(--ds-border);
}
.issue-count.has-items { font-weight: var(--ds-fw-medium); }
.issue-count.draft.has-items     { background: var(--ds-warning-bg); color: #b45309; border-color: rgba(180, 83, 9, 0.3); }
.issue-count.pending.has-items   { background: var(--ds-danger-bg);  color: #b91c1c; border-color: rgba(185, 28, 28, 0.3); }
.issue-count.published.has-items { background: var(--ds-success-bg); color: #047857; border-color: rgba(5, 150, 105, 0.3); }
[data-bs-theme="dark"] .issue-count { background: var(--ds-gray-800); }
[data-bs-theme="dark"] .issue-count.draft.has-items     { color: #fde68a; }
[data-bs-theme="dark"] .issue-count.pending.has-items   { color: #fca5a5; }
[data-bs-theme="dark"] .issue-count.published.has-items { color: #6ee7b7; }

/* Audit report rating badges. Rendered beside the audit title on list
   cards — they need to be compact + readable in both modes. */
.rating-badge {
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  border-radius: var(--ds-radius-sm);
  margin-left: 0.5rem;
  vertical-align: middle;
  font-weight: var(--ds-fw-medium);
}
.rating-badge.satisfactory      { background: var(--ds-success-bg); color: #047857; }
.rating-badge.needs-improvement { background: var(--ds-warning-bg); color: #b45309; }
.rating-badge.unsatisfactory    { background: var(--ds-danger-bg);  color: #b91c1c; }
[data-bs-theme="dark"] .rating-badge.satisfactory      { color: #6ee7b7; }
[data-bs-theme="dark"] .rating-badge.needs-improvement { color: #fde68a; }
[data-bs-theme="dark"] .rating-badge.unsatisfactory    { color: #fca5a5; }

/* Active-filter chip used by the filters toolbars. Sits on the body
   surface (not inside a card), so it uses --ds-surface + --ds-border
   rather than --ds-gray-*. */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  font-size: var(--ds-fs-xs);
  color: var(--ds-text);
  white-space: nowrap;
  box-shadow: var(--ds-shadow-xs);
}
.filter-chip a,
.filter-chip button {
  color: var(--ds-text-muted);
  text-decoration: none;
  padding: 0;
  line-height: 1;
  background: transparent;
  border: 0;
}
.filter-chip a:hover,
.filter-chip button:hover { color: var(--ds-danger); }