/* ─────────────────────────────────────────────────────────────────────────────
   SD Weight Loss Center — brand system for the CRM
   Source: Brand Guidelines v1.0, August 2026 (Identity, voice and tone)

   Loaded LAST in every standalone layout so it wins over the inline styles the
   templates were built with. Two type families, one palette, both themes.
   Rule of thumb from the guide: ~70% neutral, 20% plum, 10% green — green earns
   its impact by being rare, so it is reserved for the active state, focus, and
   the one call to action on a screen.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Type: Marcellus for display, Jost for everything else. Self-hosted (OFL)
      so a clinical app makes no third-party font requests. Fallbacks follow the
      guide: Times New Roman and Century Gothic — not Arial or Inter. ────────── */
@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/marcellus-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/jost-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/jost-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/jost-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/jost-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("../fonts/jost-latin-500-italic.woff2") format("woff2"); }

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Palette, named as in the guide */
  --plum-800: #321e4e;   /* primary: headlines, ink surfaces, buttons */
  --plum-900: #241338;   /* display type, deepest ink */
  --plum-50:  #f4f2f8;   /* tint panels, table heads */
  --green-500: #76b52a;  /* accents, eyebrows, one CTA */
  --green-700: #3a8933;  /* positive copy, link hover */
  --lime-300: #c3d337;   /* light accents */
  --paper:  #fbfbf8;     /* default background */
  --cream:  #f6f5f0;     /* sunken sections */
  --line:   #e5e3ec;     /* hairlines, card borders */
  --text-1: #2b2140;     /* body copy */
  --text-2: #5c5470;     /* support copy, captions */
  --text-3: #8b8598;     /* meta, labels, footers */
  --surface: #ffffff;
  --green-tint: #eef5e4;
  --plum-tint: var(--plum-50);
  --vitality: linear-gradient(90deg, var(--lime-300), var(--green-500) 55%, var(--green-700));

  --font-display: "Marcellus", "Times New Roman", Times, serif;
  --font-text: "Jost", "Century Gothic", "CenturyGothic", "AppleGothic", "URW Gothic", sans-serif;

  /* The four tokens every template was built on — remapped, not removed */
  --brand:       var(--green-500);
  --brand-light: var(--green-tint);
  --brand-dark:  var(--plum-800);
  --accent:      var(--green-500);

  /* Bootstrap 5.3 hooks */
  --bs-body-font-family: var(--font-text);
  --bs-body-bg: var(--paper);
  --bs-body-color: var(--text-1);
  --bs-secondary-color: var(--text-2);
  --bs-tertiary-color: var(--text-3);
  --bs-border-color: var(--line);
  --bs-primary: #321e4e;
  --bs-primary-rgb: 50, 30, 78;
  --bs-success: #3a8933;
  --bs-success-rgb: 58, 137, 51;
  --bs-link-color: var(--plum-800);
  --bs-link-color-rgb: 50, 30, 78;
  --bs-link-hover-color: var(--green-700);
  --bs-link-hover-color-rgb: 58, 137, 51;
  --bs-heading-color: var(--plum-900);
  --bs-focus-ring-color: rgba(118, 181, 42, .3);
}

/* Dark: the brand has no dark spec, so this is derived — plum ink as the ground,
   the same accents, contrast kept. Sidebar goes to Plum 900. */
[data-theme="dark"] {
  --paper:  #15101d;
  --cream:  #1a1424;
  --surface: #1f1729;
  --line:   #332844;
  --text-1: #ece8f2;
  --text-2: #b9b1c6;
  --text-3: #8b8598;
  --plum-tint: #2a1f38;
  --green-tint: rgba(118, 181, 42, .14);
  --brand-light: var(--green-tint);
  --brand-dark:  var(--plum-900);

  --bs-body-bg: var(--paper);
  --bs-body-color: var(--text-1);
  --bs-secondary-color: var(--text-2);
  --bs-tertiary-color: var(--text-3);
  --bs-border-color: var(--line);
  --bs-link-color: #c9b8e8;
  --bs-link-color-rgb: 201, 184, 232;
  --bs-link-hover-color: #9fd16a;
  --bs-heading-color: var(--text-1);
  --bs-emphasis-color: var(--text-1);
  --bs-tertiary-bg: var(--cream);
  --bs-secondary-bg: var(--surface);
}

/* ── Base ───────────────────────────────────────────────────────────────── */
html { font-size: 16px; }   /* the guide floors type at 16px; nothing below via rem */
body {
  font-family: var(--font-text);
  background: var(--paper);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .h1, .h2, .h3,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.brand-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.005em;
  line-height: 1.15;
  text-transform: none;
}
h4, h5, h6, .h4, .h5, .h6 { font-family: var(--font-text); font-weight: 500; }
/* Numerals stay in the text face: Marcellus is for headlines, and figures in a
   dense dashboard need the sans to be read at a glance. */
.stat-card .stat-val, .stat-chip .val, .numeral {
  font-family: var(--font-text); font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em;
}
/* Overlines and labels: Jost 500, 0.14em tracking per the guide */
.table th, .nav-section, .kanban-col-header, .eyebrow, .form-label.small.fw-semibold, label.form-label {
  font-family: var(--font-text);
  letter-spacing: .06em;
}
.eyebrow, .nav-section, .table th, .kanban-col-header { letter-spacing: .14em; font-weight: 500; }
strong, b, .fw-bold { font-weight: 600; }   /* Jost 700 isn't shipped; 600 is the heaviest face */
.fw-semibold { font-weight: 500; }
.fw-black { font-weight: 600; }

/* ── Surfaces ───────────────────────────────────────────────────────────── */
.card, .stat-card, .section-card, .kanban-card, .modal-content,
.dropdown-menu, .list-group-item, .accordion-item, .offcanvas, .toast, .popover {
  background-color: var(--surface);
  border-color: var(--line);
  color: var(--text-1);
}
.card-header, .card-footer, .modal-header, .modal-footer { border-color: var(--line); background-color: transparent; }
.stat-card, .section-card, .card { border-radius: 10px; }
.stat-card .stat-label, .text-muted, small.text-muted, .form-text { color: var(--text-3) !important; }
.kanban-col { background: var(--cream); }
.bg-light { background-color: var(--cream) !important; }
.bg-white { background-color: var(--surface) !important; }
hr { border-color: var(--line); opacity: 1; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--line) !important; }

/* Tables */
.table { --bs-table-color: var(--text-1); --bs-table-bg: transparent; --bs-table-border-color: var(--line);
         --bs-table-striped-bg: var(--plum-tint); --bs-table-hover-bg: var(--green-tint); }
.table > thead th, .table th { color: var(--text-3); font-size: .74rem; background: var(--plum-tint); }
.clickable-row:hover { background: var(--green-tint) !important; }

/* Forms */
.form-control, .form-select, .input-group-text {
  background-color: var(--surface); border-color: var(--line); color: var(--text-1);
  font-family: var(--font-text);
}
.form-control::placeholder { color: var(--text-3); opacity: 1; }
.form-control:focus, .form-select:focus {
  background-color: var(--surface); color: var(--text-1);
  border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(118,181,42,.22);
}
.form-control:read-only, .form-control:disabled, .form-select:disabled { background-color: var(--cream); }
.form-check-input:checked { background-color: var(--plum-800); border-color: var(--plum-800); }
.form-check-input:focus { border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(118,181,42,.22); }
.form-switch .form-check-input:checked { background-color: var(--green-700); border-color: var(--green-700); }

/* ── Buttons: plum is the working colour; green is the single CTA ────────── */
.btn { font-family: var(--font-text); font-weight: 500; letter-spacing: .01em; border-radius: 8px; }
.btn-primary {
  --bs-btn-bg: var(--plum-800); --bs-btn-border-color: var(--plum-800); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--plum-900); --bs-btn-hover-border-color: var(--plum-900); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--plum-900); --bs-btn-active-border-color: var(--plum-900);
  --bs-btn-disabled-bg: var(--plum-800); --bs-btn-disabled-border-color: var(--plum-800);
  --bs-btn-focus-shadow-rgb: 118, 181, 42;
}
.btn-outline-primary {
  --bs-btn-color: var(--plum-800); --bs-btn-border-color: var(--plum-800);
  --bs-btn-hover-bg: var(--plum-800); --bs-btn-hover-border-color: var(--plum-800); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--plum-800); --bs-btn-active-border-color: var(--plum-800);
  --bs-btn-focus-shadow-rgb: 118, 181, 42;
}
.btn-success {
  --bs-btn-bg: var(--green-700); --bs-btn-border-color: var(--green-700); --bs-btn-color: #fff;
  --bs-btn-hover-bg: #2f7229; --bs-btn-hover-border-color: #2f7229; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #2f7229; --bs-btn-active-border-color: #2f7229;
  --bs-btn-disabled-bg: var(--green-700); --bs-btn-disabled-border-color: var(--green-700);
}
.btn-outline-success {
  --bs-btn-color: var(--green-700); --bs-btn-border-color: var(--green-700);
  --bs-btn-hover-bg: var(--green-700); --bs-btn-hover-border-color: var(--green-700); --bs-btn-hover-color: #fff;
}
.btn-outline-secondary { --bs-btn-color: var(--text-2); --bs-btn-border-color: var(--line);
  --bs-btn-hover-bg: var(--cream); --bs-btn-hover-border-color: var(--line); --bs-btn-hover-color: var(--text-1); }
.btn-light { --bs-btn-bg: var(--cream); --bs-btn-border-color: var(--cream); --bs-btn-color: var(--text-1);
  --bs-btn-hover-bg: var(--line); --bs-btn-hover-border-color: var(--line); --bs-btn-hover-color: var(--text-1); }
.btn-link { --bs-btn-color: var(--plum-800); --bs-btn-hover-color: var(--green-700); }
/* The one green CTA per screen */
.btn-cta, .btn-brand {
  --bs-btn-bg: var(--green-700); --bs-btn-border-color: var(--green-700); --bs-btn-color: #fff;
  --bs-btn-hover-bg: #2f7229; --bs-btn-hover-border-color: #2f7229; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #2f7229; --bs-btn-active-border-color: #2f7229; --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 118, 181, 42;
}
[data-theme="dark"] .btn-primary {
  --bs-btn-bg: #4a3070; --bs-btn-border-color: #4a3070;
  --bs-btn-hover-bg: #5a3d86; --bs-btn-hover-border-color: #5a3d86;
  --bs-btn-active-bg: #5a3d86; --bs-btn-active-border-color: #5a3d86;
  --bs-btn-disabled-bg: #4a3070; --bs-btn-disabled-border-color: #4a3070;
}
[data-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #c9b8e8; --bs-btn-border-color: #6a4f93;
  --bs-btn-hover-bg: #4a3070; --bs-btn-hover-border-color: #4a3070; --bs-btn-hover-color: #fff;
}

/* Bootstrap text/bg utilities that name the primary colour */
.text-primary { color: var(--plum-800) !important; }
[data-theme="dark"] .text-primary { color: #c9b8e8 !important; }
.text-success { color: var(--green-700) !important; }
.bg-primary { background-color: var(--plum-800) !important; }
.bg-success { background-color: var(--green-700) !important; }
.badge.bg-primary { background-color: var(--plum-800) !important; }
.badge.bg-success { background-color: var(--green-700) !important; }
.badge.bg-secondary { background-color: var(--text-2) !important; }
.progress-bar { background-color: var(--green-700); }
.progress { background-color: var(--cream); }

/* Nav tabs / pills */
.nav-tabs { border-bottom-color: var(--line); }
.nav-tabs .nav-link { color: var(--text-2); }
.nav-tabs .nav-link.active { color: var(--plum-800); background: var(--surface); border-color: var(--line) var(--line) var(--surface); }
[data-theme="dark"] .nav-tabs .nav-link.active { color: var(--text-1); }
.nav-pills .nav-link.active { background-color: var(--plum-800); }

/* Alerts */
.alert-success { --bs-alert-bg: var(--green-tint); --bs-alert-border-color: #cfe3b6; --bs-alert-color: #2b5e26; }
.alert-info    { --bs-alert-bg: var(--plum-tint);  --bs-alert-border-color: #d8d0e8; --bs-alert-color: var(--plum-800); }
[data-theme="dark"] .alert-success { --bs-alert-bg: rgba(58,137,51,.22); --bs-alert-border-color: #2f5f2c; --bs-alert-color: #a8dc8a; }
[data-theme="dark"] .alert-info    { --bs-alert-bg: rgba(74,48,112,.35); --bs-alert-border-color: #4a3070; --bs-alert-color: #d9cdf0; }
[data-theme="dark"] .alert-danger  { --bs-alert-bg: rgba(127,29,29,.35); --bs-alert-border-color: #7f1d1d; --bs-alert-color: #fca5a5; }
[data-theme="dark"] .alert-warning { --bs-alert-bg: rgba(120,53,15,.35); --bs-alert-border-color: #78350f; --bs-alert-color: #fcd34d; }

/* Dropdowns, modals, popovers */
.dropdown-item { color: var(--text-1); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--green-tint); color: var(--text-1); }
.dropdown-divider { border-color: var(--line); }
.modal-title { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; }
.btn-close { filter: none; }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.4); }

/* Patient search autocomplete (shared component) */
.pt-dropdown { background: var(--surface); border-color: var(--line); }
.pt-item { border-bottom-color: var(--line); }
.pt-item:hover, .pt-item.active { background: var(--green-tint); }
.pt-item-name { color: var(--text-1); }
.pt-item-sub { color: var(--text-3); }
.pt-selected-badge { background: var(--plum-tint); border-color: #d8d0e8; color: var(--plum-800); }
[data-theme="dark"] .pt-selected-badge { border-color: #4a3070; color: #d9cdf0; }

/* Code / pre (audit log, settings) */
code { color: var(--plum-800); background: var(--plum-tint); border-radius: 4px; padding: .1em .3em; }
[data-theme="dark"] code { color: #d9cdf0; }
pre { background: var(--cream); color: var(--text-1); border-color: var(--line); }

/* ── App chrome (base.html) ─────────────────────────────────────────────── */
#sidebar { background: var(--brand-dark); }
[data-theme="dark"] #sidebar { background: var(--plum-900); }
#sidebar .brand { background: var(--surface); border-bottom: 3px solid var(--green-500); }
[data-theme="dark"] #sidebar .brand { background: #120c19; }
#sidebar nav a { color: rgba(255,255,255,.82); font-weight: 400; }
#sidebar nav a:hover, #sidebar nav a.active { background: rgba(255,255,255,.10); color: #fff; }
#sidebar nav a.active { border-left: 3px solid var(--green-500); }
#sidebar nav .nav-section { color: rgba(255,255,255,.45); }

/* The lockup: mark + wordmark in Jost 500 italic, themed by CSS rather than baked
   into a PNG. Clearspace around the mark equals the height of its dot. */
.brand-lockup { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand-lockup img { height: 40px; width: auto; display: block; }
.brand-lockup .wordmark {
  font-family: var(--font-text); font-style: italic; font-weight: 500;
  font-size: 1.02rem; line-height: 1.08; color: var(--plum-800); letter-spacing: -.005em;
}
.brand-lockup .wordmark small { display: block; font-style: normal; font-weight: 500; font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--green-700); margin-top: .25rem; }
[data-theme="dark"] .brand-lockup .wordmark { color: #fff; }
[data-theme="dark"] .brand-lockup .wordmark small { color: var(--green-500); }
.brand-lockup.on-plum .wordmark { color: #fff; }
.brand-lockup.on-plum .wordmark small { color: var(--lime-300); }

.topbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar h1 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; color: var(--plum-900); }
[data-theme="dark"] .topbar h1 { color: var(--text-1); }
#themeToggle { border-color: var(--line); color: var(--text-3); }
#themeToggle:hover { border-color: var(--green-500); color: var(--green-700); }
.section-card h6 { color: var(--plum-800); border-bottom: 2px solid var(--green-tint); font-family: var(--font-text); font-weight: 500; letter-spacing: .02em; }
[data-theme="dark"] .section-card h6 { color: var(--text-1); }
.stat-card .stat-val { color: var(--plum-800); font-size: 1.9rem; }
[data-theme="dark"] .stat-card .stat-val { color: var(--text-1); }

/* Pipeline stage pills: keep semantic hues, quiet them onto the palette */
.badge-stage { font-weight: 500; letter-spacing: .02em; }
.stage-active-patient  { background: var(--green-tint); color: var(--green-700); }
.stage-consultation-completed { background: var(--plum-tint); color: var(--plum-800); }
.stage-inactive-patient { background: var(--cream); color: var(--text-2); }
[data-theme="dark"] .stage-active-patient { background: rgba(58,137,51,.25); color: #a8dc8a; }
[data-theme="dark"] .stage-consultation-completed { background: rgba(74,48,112,.4); color: #d9cdf0; }
[data-theme="dark"] .stage-inactive-patient { background: var(--cream); color: var(--text-2); }

/* One vitality accent per layout — a bar, never a background */
.vitality-bar { height: 4px; background: var(--vitality); border-radius: 2px; }

/* ── Patient-facing layouts (portal, public forms, kiosk, login) ─────────── */
.portal-header, .public-header, .form-header { background: var(--plum-800) !important; }
.auth-bg, body.auth-page { background: var(--plum-800) !important; }
.auth-card { background: var(--surface); border: 1px solid var(--line); box-shadow: 0 12px 40px -18px rgba(36,19,56,.25); }
[data-theme="dark"] .auth-card { box-shadow: none; }
.btn-login, .btn-verify, .btn-signin, .btn-portal {
  background: var(--plum-800) !important; color: #fff !important; border: none !important; font-weight: 500;
}
.btn-login:hover, .btn-verify:hover, .btn-signin:hover, .btn-portal:hover { background: var(--plum-900) !important; }
.hipaa-badge i, .secure-note i { color: var(--green-700) !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Utilities that assume a light ground */
[data-theme="dark"] .text-dark { color: var(--text-1) !important; }
[data-theme="dark"] .badge.bg-light { background-color: var(--line) !important; color: var(--text-1) !important; }
[data-theme="dark"] .table-light, [data-theme="dark"] .thead-light th { background-color: var(--plum-tint) !important; color: var(--text-2) !important; }

/* Inline stat colours that were written for a white card. On the dark surface
   plum and the deep semantic shades vanish, so lift them without touching the
   templates. Matched on the inline style itself; the leading `;`/`^` guards keep
   `background-color:` from matching. */
[data-theme="dark"] .stat-val[style^="color:var(--brand-dark)"],
[data-theme="dark"] .stat-val[style*=";color:var(--brand-dark)"],
[data-theme="dark"] .stat-val[style*="; color:var(--brand-dark)"],
[data-theme="dark"] .stat-val[style^="color:var(--plum-800)"],
[data-theme="dark"] .stat-val[style^="color:var(--plum-900)"] { color: #cfc0ea !important; }
[data-theme="dark"] .stat-val[style^="color:var(--green-700)"] { color: #9fd16a !important; }
[data-theme="dark"] .stat-val[style^="color:#92400e"] { color: #f0b35a !important; }
[data-theme="dark"] .stat-val[style^="color:#9d174d"] { color: #f6a5c8 !important; }
[data-theme="dark"] .stat-val[style^="color:#1d4ed8"] { color: #93b4ff !important; }
[data-theme="dark"] .stat-val[style^="color:#0ea5e9"] { color: #7dd3fc !important; }
[data-theme="dark"] .stat-val[style^="color:#dc2626"] { color: #fca5a5 !important; }
[data-theme="dark"] .stat-val[style^="color:#d97706"] { color: #fcd34d !important; }
/* Same problem for plum headings and labels written inline */
[data-theme="dark"] h1[style^="color:var(--plum-800)"], [data-theme="dark"] h2[style^="color:var(--plum-800)"],
[data-theme="dark"] h3[style^="color:var(--plum-800)"], [data-theme="dark"] h4[style^="color:var(--plum-800)"],
[data-theme="dark"] h5[style^="color:var(--plum-800)"], [data-theme="dark"] h6[style^="color:var(--plum-800)"],
[data-theme="dark"] .fw-bold[style^="color:var(--plum-800)"], [data-theme="dark"] .fw-bold[style^="color:var(--brand-dark)"],
[data-theme="dark"] span[style^="color:var(--brand-dark)"], [data-theme="dark"] div[style^="color:var(--brand-dark)"] { color: #cfc0ea !important; }

/* Patient names in pickers and search results: plum, both themes. The reminders
   picker is a white popover even in dark mode, so its names stay Plum 800; the
   shared .pt-dropdown follows the theme surface, so its names lift in dark. */
.patient-name, .pt-item-name, .patient-link, a.patient-name { color: var(--plum-800) !important; font-weight: 600; }
[data-theme="dark"] .pt-item-name { color: #cfc0ea !important; }
#patientDropdown .patient-name { color: var(--plum-800) !important; }

/* Dark mode: any text set inline to the plum tokens becomes unreadable on the dark
   surface (the Forms Library cards, table heads, section titles). Match the inline
   declaration itself — `;color:` / leading `color:` — so `background-color:` and
   `background:` never match. Lifted to near-white per staff request. */
[data-theme="dark"] [style^="color:var(--brand-dark)"],
[data-theme="dark"] [style*=";color:var(--brand-dark)"],
[data-theme="dark"] [style*="; color:var(--brand-dark)"],
[data-theme="dark"] [style*=";color: var(--brand-dark)"],
[data-theme="dark"] [style^="color: var(--brand-dark)"],
[data-theme="dark"] [style^="color:var(--plum-800)"],
[data-theme="dark"] [style*=";color:var(--plum-800)"],
[data-theme="dark"] [style*="; color:var(--plum-800)"],
[data-theme="dark"] [style^="color:var(--plum-900)"],
[data-theme="dark"] [style*=";color:var(--plum-900)"],
[data-theme="dark"] [style*="; color:var(--plum-900)"] { color: var(--text-1) !important; }
/* …but not when the element is itself a plum button or badge (white text already) */
[data-theme="dark"] .btn[style*="background:var(--brand-dark)"],
[data-theme="dark"] .badge[style*="background:var(--brand-dark)"] { color: #fff !important; }
[data-theme="dark"] .btn[style*="background:var(--brand-dark)"],
[data-theme="dark"] .btn[style*="background: var(--brand-dark)"] { background: #4a3070 !important; border-color: #4a3070 !important; }