:root,
[data-bs-theme="light"] {
  /* ── 1. BASE BRAND COLORS (Flutter AppColors — light) ── ◀── EDIT THESE ── */
  --pe-primary: #5C0F94;      /* AppColors.primary */
  --pe-tertiary-accent: #5D3400; /* AppColors.tertiary (warm accent, used below) */

  /* ── 2. Everything after this is DERIVED automatically — do not edit ── */
  --pe-primary-rgb: 92, 15, 148;
  --pe-primary-text-emphasis: color-mix(in srgb, var(--pe-primary) 78%, black);
  --pe-primary-bg-subtle: color-mix(in srgb, var(--pe-primary) 16%, white);
  --pe-primary-border-subtle: color-mix(in srgb, var(--pe-primary) 35%, white);

  --pe-link-color: var(--pe-primary);
  --pe-link-color-rgb: var(--pe-primary-rgb);
  --pe-link-hover-color: color-mix(in srgb, var(--pe-primary) 82%, black);
  --pe-link-hover-color-rgb: var(--pe-primary-rgb);
  --pe-code-color: var(--pe-primary);

  /* ── 3. Bridge: fix the currently-broken var(--bs-*) references used in
         head-css.ejs's inline <style> (badge-soft-*, btn-soft-*, DataTable
         pagination) — bootstrap.min.css never defines --bs-*, only --pe-*,
         so those rules were silently no-ops until now. ── */
  --bs-primary: var(--pe-primary);
  --bs-primary-rgb: var(--pe-primary-rgb);
  --bs-primary-text-emphasis: var(--pe-primary-text-emphasis);
  --bs-primary-bg-subtle: var(--pe-primary-bg-subtle);
  --bs-primary-border-subtle: var(--pe-primary-border-subtle);
  --bs-secondary: var(--pe-secondary);
  --bs-secondary-rgb: var(--pe-secondary-rgb);
  --bs-secondary-text-emphasis: var(--pe-secondary-text-emphasis);
  --bs-secondary-bg-subtle: var(--pe-secondary-bg-subtle);
  --bs-success: var(--pe-success);
  --bs-success-text-emphasis: var(--pe-success-text-emphasis);
  --bs-success-bg-subtle: var(--pe-success-bg-subtle);
  --bs-danger: var(--pe-danger);
  --bs-danger-text-emphasis: var(--pe-danger-text-emphasis);
  --bs-danger-bg-subtle: var(--pe-danger-bg-subtle);
  --bs-warning: var(--pe-warning);
  --bs-warning-text-emphasis: var(--pe-warning-text-emphasis);
  --bs-warning-bg-subtle: var(--pe-warning-bg-subtle);
  --bs-info: var(--pe-info);
  --bs-info-text-emphasis: var(--pe-info-text-emphasis);
  --bs-info-bg-subtle: var(--pe-info-bg-subtle);
  --bs-dark: var(--pe-dark);
  --bs-dark-text-emphasis: var(--pe-dark-text-emphasis);
  --bs-dark-bg-subtle: var(--pe-dark-bg-subtle);
  --bs-body-color: var(--pe-body-color);
  --bs-body-bg: var(--pe-body-bg);
  --bs-border-color: var(--pe-border-color);
}

[data-bs-theme="dark"] {
  /* ── 1. BASE BRAND COLORS (Flutter AppColors — dark) ── ◀── EDIT THESE ── */
  --pe-primary: #CC8EFF;      /* dark's onPrimaryContainer — lighter purple for contrast on dark bg */
  --pe-tertiary-accent: #D99D61; /* onTertiaryContainer */

  /* ── 2. Derived automatically — do not edit ── */
  --pe-primary-rgb: 204, 142, 255;
  --pe-primary-text-emphasis: color-mix(in srgb, var(--pe-primary) 85%, white);
  --pe-primary-bg-subtle: color-mix(in srgb, var(--pe-primary) 20%, black);
  --pe-primary-border-subtle: color-mix(in srgb, var(--pe-primary) 40%, black);

  --pe-link-color: var(--pe-primary);
  --pe-link-color-rgb: var(--pe-primary-rgb);
  --pe-link-hover-color: color-mix(in srgb, var(--pe-primary) 85%, white);
  --pe-link-hover-color-rgb: var(--pe-primary-rgb);
  --pe-code-color: var(--pe-primary);

  /* ── 3. Same --bs- bridge for dark mode ── */
  --bs-primary: var(--pe-primary);
  --bs-primary-rgb: var(--pe-primary-rgb);
  --bs-primary-text-emphasis: var(--pe-primary-text-emphasis);
  --bs-primary-bg-subtle: var(--pe-primary-bg-subtle);
  --bs-primary-border-subtle: var(--pe-primary-border-subtle);
  --bs-secondary: var(--pe-secondary);
  --bs-secondary-rgb: var(--pe-secondary-rgb);
  --bs-secondary-text-emphasis: var(--pe-secondary-text-emphasis);
  --bs-secondary-bg-subtle: var(--pe-secondary-bg-subtle);
  --bs-success: var(--pe-success);
  --bs-success-text-emphasis: var(--pe-success-text-emphasis);
  --bs-success-bg-subtle: var(--pe-success-bg-subtle);
  --bs-danger: var(--pe-danger);
  --bs-danger-text-emphasis: var(--pe-danger-text-emphasis);
  --bs-danger-bg-subtle: var(--pe-danger-bg-subtle);
  --bs-warning: var(--pe-warning);
  --bs-warning-text-emphasis: var(--pe-warning-text-emphasis);
  --bs-warning-bg-subtle: var(--pe-warning-bg-subtle);
  --bs-info: var(--pe-info);
  --bs-info-text-emphasis: var(--pe-info-text-emphasis);
  --bs-info-bg-subtle: var(--pe-info-bg-subtle);
  --bs-dark: var(--pe-dark);
  --bs-dark-text-emphasis: var(--pe-dark-text-emphasis);
  --bs-dark-bg-subtle: var(--pe-dark-bg-subtle);
  --bs-body-color: var(--pe-body-color);
  --bs-body-bg: var(--pe-body-bg);
  --bs-border-color: var(--pe-border-color);

  /* ── 4. Surface colors for dark mode — page background, cards,
         sidebar, tables. These weren't previously defined in this
         file, so dark mode was falling back to Bootstrap defaults
         instead of the deep-purple theme surfaces. ── */
  --pe-body-bg: #14101f;
  --pe-secondary-bg: #1e1730;
  --pe-border-color: rgba(255, 255, 255, 0.08);

  --bs-secondary-bg: var(--pe-secondary-bg);
}

/* ============================================================
   4. COMPONENT-LEVEL OVERRIDES — added because Bootstrap's build
   bakes a RESOLVED hex value directly into each component's own
   CSS variable (e.g. .btn-primary's --pe-btn-bg) rather than
   having it reference --pe-primary live. So redefining
   --pe-primary above (sections 1–3) does NOT reach these two —
   they need their own explicit override, which is what this
   section does. Uses var(--pe-primary) etc. so it automatically
   follows whichever theme (light/dark) is active — no duplication
   needed per theme.
   ============================================================ */

/* Buttons — .btn-primary and its check/hover/active/disabled states */
.btn-primary,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  --pe-btn-bg: var(--pe-primary);
  --pe-btn-border-color: var(--pe-primary);
  --pe-btn-hover-bg: color-mix(in srgb, var(--pe-primary) 85%, black);
  --pe-btn-hover-border-color: color-mix(in srgb, var(--pe-primary) 80%, black);
  --pe-btn-active-bg: color-mix(in srgb, var(--pe-primary) 75%, black);
  --pe-btn-active-border-color: color-mix(in srgb, var(--pe-primary) 70%, black);
  --pe-btn-disabled-bg: var(--pe-primary);
  --pe-btn-disabled-border-color: var(--pe-primary);
  --pe-btn-focus-shadow-rgb: var(--pe-primary-rgb);
}

/* Pagination — active page pill.
   This theme's compiled CSS uses ".page-link.active, .active >
   .page-link" as its real selector (NOT the standard Bootstrap
   ".page-item.active .page-link" pattern) — both are covered
   here since some pages' custom pill pagination may use either. */
.page-link.active,
.active > .page-link,
.page-item.active .page-link,
#familiesTable_paginate .page-item.active .page-link,
#approvalPagination .page-item.active .page-link,
#paginationWrap .page-item.active .page-link,
[id$="_paginate"] .page-item.active .page-link {
  --pe-pagination-active-bg: var(--pe-primary);
  --pe-pagination-active-border-color: var(--pe-primary);
  background-color: var(--pe-primary) !important;
  border-color: var(--pe-primary) !important;
  color: #fff !important;
}

/* Pagination — hover state on non-active page links/arrows.
   Same fallback-color issue as the active state: some pages'
   inline CSS uses var(--bs-primary, #f1556c) for hover, and
   without this override the fallback hex wins. */
.page-link:hover,
#familiesTable_paginate .page-link:hover,
#approvalPagination .page-link:hover,
#paginationWrap .page-link:hover,
[id$="_paginate"] .page-link:hover {
  background-color: var(--pe-primary-bg-subtle) !important;
  color: var(--pe-primary) !important;
  border-color: var(--pe-primary) !important;
}

/* ============================================================
   5. DARK MODE SURFACES — page background, cards, sidebar, tables.
   Scoped globally (not per-page) so every screen in the app picks
   up the same deep-purple dark theme automatically.
   ============================================================ */

[data-bs-theme="dark"] body {
  background-color: var(--pe-body-bg) !important;
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .pe-app-sidebar,
[data-bs-theme="dark"] .kvo-families-card {
  background-color: var(--pe-secondary-bg) !important;
  border-color: var(--pe-border-color) !important;
}

[data-bs-theme="dark"] .table {
  --bs-table-bg: var(--pe-secondary-bg);
  --bs-table-color: #e8e3f5;
  color: #e8e3f5;
}

[data-bs-theme="dark"] .kvo-families-table thead th,
[data-bs-theme="dark"] .kvo-families-table tbody td {
  background-color: var(--pe-secondary-bg) !important;
  border-color: var(--pe-border-color) !important;
}

[data-bs-theme="dark"] .kvo-head-name {
  color: #f0eefc !important;
}

[data-bs-theme="dark"] .kvo-search-input {
  background-color: var(--pe-body-bg) !important;
  border-color: var(--pe-border-color) !important;
  color: #e8e3f5 !important;
}

/* ============================================================
   6. FORCE FULL-WIDTH LAYOUT — belt-and-suspenders for the
   data-content-width="box" bug (see partials/switcher.ejs's own
   fix comment: a stale "box" value left in a browser's
   localStorage from before the Customize panel was removed made
   layout-setup.js apply the theme's boxed/centered layout on
   load — large empty gutters running down both sides of the
   ENTIRE app, header/sidebar/content alike, on every page).
   switcher.ejs pins localStorage + the attribute back to
   "default" on every load, but that's a JS-timing fix; this CSS
   override makes every boxed-mode selector inert regardless of
   what the attribute ends up as, so the gutters can never come
   back even if some future load races ahead of that script. ── */
[data-content-width="box"] #layout-wrapper,
[data-content-width="box"] .app-header,
[data-content-width="box"] .footer {
  margin: 0 !important;
}

[data-content-width="box"] .pe-app-sidebar {
  left: 0 !important;
}

[data-content-width="box"] .app-wrapper {
  padding-inline: 0 !important;
}

/* ============================================================
   7. REMOVE THE WIDE-SCREEN CONTENT PADDING — a totally separate
   theme behavior from the "boxed" one above, confirmed live via
   getBoundingClientRect(): app.min.css has
     .app-wrapper { padding-inline: 10px; }
     @media (min-width: 1441px) {
       .app-wrapper { padding-inline: var(--pe-app-wrapper-padding); }  // 5rem = 80px
     }
   with no data-content-width/data-layout condition at all — so on
   any monitor 1441px or wider, the main content area alone (not
   the sidebar/header) gets an extra 80px of empty padding on BOTH
   sides, regardless of the boxed-layout setting. This keeps the
   same tight 10px gutter the page already uses below that width
   at every screen size. ── */
.app-wrapper {
  padding-inline: 0 !important;
}

/* ============================================================
   8. FIX THE DOUBLED SIDEBAR↔CARD GAP — every page wraps its
   content in its OWN <div class="container-fluid"> (e.g.
   families.ejs), which is ALREADY nested inside the layout's own
   <main class="app-wrapper"><div class="container-fluid"> from
   layout-vertical.ejs — so the standard Bootstrap container-fluid
   gutter (bootstrap.min.css's --pe-gutter-x: 1.25rem, i.e. 10px
   padding each side) was being applied twice, stacking into a
   visible double-wide grey strip.

   Rather than removing the gutter entirely (which made the page
   look flush/cramped compared to a normal admin panel), we zero
   it everywhere by default, then re-apply it ONCE — a single 16px
   padding each side — only on the outer layout wrapper's own
   container-fluid (the direct child of .app-wrapper). Any page's
   own nested container-fluid still matches the plain `.container-fluid`
   rule below (lower specificity), so it stays at 0 and the gutter
   is no longer doubled. Change 32px below to 16px if you'd rather
   have 8px padding on each side instead of 16px. ── */
.container-fluid {
  --pe-gutter-x: 0 !important;
}
.app-wrapper > .container-fluid {
  --pe-gutter-x: 32px !important; /* = 16px padding on each side */
}

/* ============================================================
   9. MATCH BUTTON CORNERS TO THE DASHBOARD STAT CARDS — buttons
   like "Add family" / "New announcement" should have the same
   moderate corner radius as the stat cards next to them, not a
   full pill. Confirmed correct value via the user's own reference
   screenshot: --pe-border-radius-lg (0.625rem = 10px). Overriding
   --pe-btn-border-radius (the CSS variable Bootstrap's own .btn
   rule actually reads) so every button carrying the plain "btn"
   class — not just .btn-primary — picks up this same 10px corner
   radius. NOTE: buttons that use a custom class instead of "btn"
   (e.g. index.ejs's .kvo-btn-add / .kvo-btn-outline) are NOT
   reached by this rule and have the matching radius set directly
   in their own file. ── */
.btn {
  --pe-btn-border-radius: var(--pe-border-radius-lg);
  border-radius: var(--pe-border-radius-lg) !important;
}