/*
 * BIMS organization theme presets
 *
 * This is the final visual layer. The server publishes only the preset key;
 * every foreground/background pair below is curated for readable light and
 * dark surfaces. Semantic status colors deliberately remain independent of
 * the selected brand.
 */

:root,
html[data-bims-theme="violet"] {
  --bims-canvas: #fbf8ff;
  --bims-canvas-tint: #f4edff;
  --bims-surface: #ffffff;
  --bims-surface-soft: #faf5ff;
  --bims-surface-inset: #f5eeff;
  --bims-text: #2a1740;
  --bims-text-strong: #1e1033;
  --bims-muted: #705f7f;
  --bims-subtle: #87778f;
  --bims-border: #e7d9f3;
  --bims-border-strong: #cfb8e5;
  --bims-primary: #6d28d9;
  --bims-primary-strong: #4c1d95;
  --bims-primary-hover: #5b21b6;
  --bims-primary-soft: #f3e8ff;
  --bims-primary-tint: #e9d5ff;
  --bims-on-primary: #ffffff;
  --bims-accent: #a16207;
  --bims-accent-strong: #7c4a03;
  --bims-accent-soft: #fef3c7;
  --bims-on-accent: #ffffff;
  --bims-nav-start: #4c1d95;
  --bims-nav-mid: #2e1065;
  --bims-nav-end: #1e0a36;
  --bims-shadow: rgba(76, 29, 149, .16);
  --bims-focus: rgba(109, 40, 217, .28);
  --bims-dark-canvas: #130b22;
  --bims-dark-surface: #211332;
  --bims-dark-surface-soft: #2b1a41;
  --bims-dark-inset: #34204e;
  --bims-dark-text: #f7f2ff;
  --bims-dark-muted: #d1c3dc;
  --bims-dark-subtle: #b9a9c6;
  --bims-dark-border: #513c68;
  --bims-dark-border-strong: #6d5387;
  --bims-dark-primary: #c4b5fd;
  --bims-dark-primary-strong: #a78bfa;
  --bims-dark-primary-soft: #3b2a5b;
  --bims-dark-on-primary: #2e1065;
  --bims-dark-accent: #fcd34d;
  --bims-dark-accent-soft: #4a390d;
  --bims-dark-on-accent: #2f2200;
}

html[data-bims-theme="emerald"] {
  --bims-canvas: #f4fbf7;
  --bims-canvas-tint: #eaf7ef;
  --bims-surface: #ffffff;
  --bims-surface-soft: #f2fbf6;
  --bims-surface-inset: #e0f5e8;
  --bims-text: #102c20;
  --bims-text-strong: #082218;
  --bims-muted: #587064;
  --bims-subtle: #72877d;
  --bims-border: #d5e7dc;
  --bims-border-strong: #abcdb9;
  --bims-primary: #047857;
  --bims-primary-strong: #065f46;
  --bims-primary-hover: #05664b;
  --bims-primary-soft: #d1fae5;
  --bims-primary-tint: #a7f3d0;
  --bims-on-primary: #ffffff;
  --bims-accent: #a16207;
  --bims-accent-strong: #7c4a03;
  --bims-accent-soft: #fef3c7;
  --bims-on-accent: #ffffff;
  --bims-nav-start: #065f46;
  --bims-nav-mid: #064e3b;
  --bims-nav-end: #022c22;
  --bims-shadow: rgba(5, 95, 70, .16);
  --bims-focus: rgba(4, 120, 87, .28);
  --bims-dark-canvas: #071c15;
  --bims-dark-surface: #102a20;
  --bims-dark-surface-soft: #17382a;
  --bims-dark-inset: #1b4936;
  --bims-dark-text: #ecfff4;
  --bims-dark-muted: #c2d9cb;
  --bims-dark-subtle: #a6beaf;
  --bims-dark-border: #355947;
  --bims-dark-border-strong: #4c7961;
  --bims-dark-primary: #6ee7b7;
  --bims-dark-primary-strong: #34d399;
  --bims-dark-primary-soft: #174a37;
  --bims-dark-on-primary: #053b2d;
  --bims-dark-accent: #fcd34d;
  --bims-dark-accent-soft: #4a390d;
  --bims-dark-on-accent: #2f2200;
}

html[data-bims-theme="crimson"] {
  --bims-canvas: #fff8f8;
  --bims-canvas-tint: #fff0f1;
  --bims-surface: #ffffff;
  --bims-surface-soft: #fff6f6;
  --bims-surface-inset: #fde9ec;
  --bims-text: #34151d;
  --bims-text-strong: #260c14;
  --bims-muted: #7f5d65;
  --bims-subtle: #96777e;
  --bims-border: #f1d7dc;
  --bims-border-strong: #ddb5bf;
  --bims-primary: #b4233d;
  --bims-primary-strong: #8f1d34;
  --bims-primary-hover: #991b36;
  --bims-primary-soft: #fde8eb;
  --bims-primary-tint: #fecdd3;
  --bims-on-primary: #ffffff;
  --bims-accent: #9a6700;
  --bims-accent-strong: #7a5100;
  --bims-accent-soft: #fef3c7;
  --bims-on-accent: #ffffff;
  --bims-nav-start: #8f1d34;
  --bims-nav-mid: #68152a;
  --bims-nav-end: #3d0b1a;
  --bims-shadow: rgba(143, 29, 52, .16);
  --bims-focus: rgba(180, 35, 61, .28);
  --bims-dark-canvas: #260a12;
  --bims-dark-surface: #3a111c;
  --bims-dark-surface-soft: #4b1724;
  --bims-dark-inset: #5c1d2d;
  --bims-dark-text: #fff3f4;
  --bims-dark-muted: #e4c5ca;
  --bims-dark-subtle: #cba7ae;
  --bims-dark-border: #70404b;
  --bims-dark-border-strong: #925564;
  --bims-dark-primary: #fda4af;
  --bims-dark-primary-strong: #fb7185;
  --bims-dark-primary-soft: #642433;
  --bims-dark-on-primary: #4c0519;
  --bims-dark-accent: #fcd34d;
  --bims-dark-accent-soft: #4a390d;
  --bims-dark-on-accent: #2f2200;
}

html[data-bims-theme="ocean"] {
  --bims-canvas: #f5fbff;
  --bims-canvas-tint: #ecf8ff;
  --bims-surface: #ffffff;
  --bims-surface-soft: #f2faff;
  --bims-surface-inset: #e0f2fe;
  --bims-text: #102b3e;
  --bims-text-strong: #082235;
  --bims-muted: #567184;
  --bims-subtle: #718a9b;
  --bims-border: #d5e8f3;
  --bims-border-strong: #a9ccdf;
  --bims-primary: #0369a1;
  --bims-primary-strong: #075985;
  --bims-primary-hover: #075a88;
  --bims-primary-soft: #e0f2fe;
  --bims-primary-tint: #bae6fd;
  --bims-on-primary: #ffffff;
  --bims-accent: #b45309;
  --bims-accent-strong: #92400e;
  --bims-accent-soft: #ffedd5;
  --bims-on-accent: #ffffff;
  --bims-nav-start: #075985;
  --bims-nav-mid: #0c4a6e;
  --bims-nav-end: #082f49;
  --bims-shadow: rgba(7, 89, 133, .16);
  --bims-focus: rgba(3, 105, 161, .28);
  --bims-dark-canvas: #071b29;
  --bims-dark-surface: #102b3d;
  --bims-dark-surface-soft: #16394e;
  --bims-dark-inset: #1b4a63;
  --bims-dark-text: #edf9ff;
  --bims-dark-muted: #c0d8e5;
  --bims-dark-subtle: #a7c0cf;
  --bims-dark-border: #355b70;
  --bims-dark-border-strong: #4c7a92;
  --bims-dark-primary: #7dd3fc;
  --bims-dark-primary-strong: #38bdf8;
  --bims-dark-primary-soft: #164865;
  --bims-dark-on-primary: #083344;
  --bims-dark-accent: #fdba74;
  --bims-dark-accent-soft: #55310d;
  --bims-dark-on-accent: #301b06;
}

html[data-bims-theme="midnight"] {
  --bims-canvas: #f7f9ff;
  --bims-canvas-tint: #eff3ff;
  --bims-surface: #ffffff;
  --bims-surface-soft: #f5f7ff;
  --bims-surface-inset: #e8efff;
  --bims-text: #152449;
  --bims-text-strong: #0b1938;
  --bims-muted: #5d6d8d;
  --bims-subtle: #7886a1;
  --bims-border: #d9e1f4;
  --bims-border-strong: #b7c6e5;
  --bims-primary: #1d4ed8;
  --bims-primary-strong: #1e3a8a;
  --bims-primary-hover: #1d40ae;
  --bims-primary-soft: #dbeafe;
  --bims-primary-tint: #bfdbfe;
  --bims-on-primary: #ffffff;
  --bims-accent: #a16207;
  --bims-accent-strong: #7c4a03;
  --bims-accent-soft: #fef3c7;
  --bims-on-accent: #ffffff;
  --bims-nav-start: #1e3a8a;
  --bims-nav-mid: #172554;
  --bims-nav-end: #0f1738;
  --bims-shadow: rgba(30, 58, 138, .17);
  --bims-focus: rgba(29, 78, 216, .28);
  --bims-dark-canvas: #0c1227;
  --bims-dark-surface: #17213e;
  --bims-dark-surface-soft: #202d50;
  --bims-dark-inset: #293963;
  --bims-dark-text: #f3f6ff;
  --bims-dark-muted: #cad5ec;
  --bims-dark-subtle: #adbbd5;
  --bims-dark-border: #3d5177;
  --bims-dark-border-strong: #58709e;
  --bims-dark-primary: #93c5fd;
  --bims-dark-primary-strong: #60a5fa;
  --bims-dark-primary-soft: #263b69;
  --bims-dark-on-primary: #172554;
  --bims-dark-accent: #fcd34d;
  --bims-dark-accent-soft: #4a390d;
  --bims-dark-on-accent: #2f2200;
}

/* Map the new preset tokens onto the variables used by the mature BIMS UI. */
html[data-bims-theme] {
  color-scheme: light;
  --ui-canvas: var(--bims-canvas);
  --ui-canvas-tint: var(--bims-canvas-tint);
  --ui-surface: var(--bims-surface);
  --ui-surface-raised: var(--bims-surface);
  --ui-surface-soft: var(--bims-surface-soft);
  --ui-surface-inset: var(--bims-surface-inset);
  --ui-text: var(--bims-text);
  --ui-text-strong: var(--bims-text-strong);
  --ui-text-muted: var(--bims-muted);
  --ui-text-subtle: var(--bims-subtle);
  --ui-border: var(--bims-border);
  --ui-border-strong: var(--bims-border-strong);
  --ui-brand: var(--bims-primary);
  --ui-brand-hover: var(--bims-primary-strong);
  --ui-brand-soft: var(--bims-primary-soft);
  --ui-accent: var(--bims-accent);
  --ui-accent-soft: var(--bims-accent-soft);
  --ui-focus: 0 0 0 4px var(--bims-focus);
  --bg: var(--bims-canvas);
  /* Legacy professional-shell color bridge: auth, print, and fallback
     surfaces still consume --text/--text-strong/--surface. */
  --surface: var(--bims-surface);
  --surface-soft: var(--bims-surface-soft);
  --surface-muted: var(--bims-surface-inset);
  --text: var(--bims-text);
  --text-strong: var(--bims-text-strong);
  --line-strong: var(--bims-border-strong);
  --primary-strong: var(--bims-primary-strong);
  --primary-soft: var(--bims-primary-soft);
  --accent-strong: var(--bims-accent-strong);
  --panel: var(--bims-surface);
  --ink: var(--bims-text);
  --muted: var(--bims-muted);
  --line: var(--bims-border);
  --nav: var(--bims-nav-mid);
  --nav-soft: var(--bims-nav-start);
  --primary: var(--bims-primary);
  --primary-dark: var(--bims-primary-strong);
  --accent: var(--bims-accent);
  --accent-soft: var(--bims-accent-soft);
  --md-ink: var(--bims-text);
  --md-muted: var(--bims-muted);
  --md-green: var(--bims-primary);
  --md-green-dark: var(--bims-primary-strong);
  --md-gold: var(--bims-accent);
  --md-bg: var(--bims-canvas);
  --md-card: var(--bims-surface);
  --md-line: var(--bims-border);
  --md-soft: var(--bims-surface-inset);
  /* Staff visibility pass: use a clearly present light wash instead of a
     nearly-white shell. The actual color-mix values below are ten percentage
     points stronger than the original sidebar treatment, while all text
     remains on high-contrast light surfaces. */
  --bims-sidebar-tint: var(--bims-primary-tint);
  --bims-sidebar-tint-strong: var(--bims-primary-tint);
  --bims-sidebar-accent-tint: var(--bims-accent-soft);
  --bims-sidebar-line: var(--bims-border-strong);
  --bims-staff-canvas-tint: var(--bims-primary-soft);
  --bims-staff-header-tint: var(--bims-primary-soft);
  --bims-staff-panel-tint: var(--bims-primary-soft);
  --bims-staff-table-tint: var(--bims-primary-soft);
  --bims-staff-accent-tint: var(--bims-accent-soft);
}

@supports (color: color-mix(in srgb, #000 10%, #fff)) {
  html[data-bims-theme] {
    --bims-sidebar-tint: color-mix(in srgb, var(--bims-primary) 20%, #ffffff);
    --bims-sidebar-tint-strong: color-mix(in srgb, var(--bims-primary) 26%, #ffffff);
    --bims-sidebar-accent-tint: color-mix(in srgb, var(--bims-accent) 22%, #ffffff);
    --bims-sidebar-line: color-mix(in srgb, var(--bims-primary) 42%, #ffffff);
    --bims-staff-canvas-tint: color-mix(in srgb, var(--bims-primary) 12%, #ffffff);
    --bims-staff-header-tint: color-mix(in srgb, var(--bims-primary) 14%, #ffffff);
    --bims-staff-panel-tint: color-mix(in srgb, var(--bims-primary) 7%, #ffffff);
    --bims-staff-table-tint: color-mix(in srgb, var(--bims-primary) 16%, #ffffff);
    --bims-staff-accent-tint: color-mix(in srgb, var(--bims-accent) 12%, #ffffff);
  }
}

html[data-citizen-theme="dark"][data-bims-theme]:not([data-bims-display-scope="staff"]) {
  color-scheme: dark;
  --bims-canvas: var(--bims-dark-canvas);
  --bims-canvas-tint: var(--bims-dark-canvas);
  --bims-surface: var(--bims-dark-surface);
  --bims-surface-soft: var(--bims-dark-surface-soft);
  --bims-surface-inset: var(--bims-dark-inset);
  --bims-text: var(--bims-dark-text);
  --bims-text-strong: var(--bims-dark-text);
  --bims-muted: var(--bims-dark-muted);
  --bims-subtle: var(--bims-dark-subtle);
  --bims-border: var(--bims-dark-border);
  --bims-border-strong: var(--bims-dark-border-strong);
  --bims-primary: var(--bims-dark-primary);
  --bims-primary-strong: var(--bims-dark-primary-strong);
  --bims-primary-hover: var(--bims-dark-primary-strong);
  --bims-primary-soft: var(--bims-dark-primary-soft);
  --bims-primary-tint: var(--bims-dark-primary-soft);
  --bims-on-primary: var(--bims-dark-on-primary);
  --bims-accent: var(--bims-dark-accent);
  --bims-accent-strong: var(--bims-dark-accent);
  --bims-accent-soft: var(--bims-dark-accent-soft);
  --bims-on-accent: var(--bims-dark-on-accent);
  --ui-canvas: var(--bims-dark-canvas);
  --ui-canvas-tint: var(--bims-dark-canvas);
  --ui-surface: var(--bims-dark-surface);
  --ui-surface-raised: var(--bims-dark-surface);
  --ui-surface-soft: var(--bims-dark-surface-soft);
  --ui-surface-inset: var(--bims-dark-inset);
  --ui-text: var(--bims-dark-text);
  --ui-text-strong: var(--bims-dark-text);
  --ui-text-muted: var(--bims-dark-muted);
  --ui-text-subtle: var(--bims-dark-subtle);
  --ui-border: var(--bims-dark-border);
  --ui-border-strong: var(--bims-dark-border-strong);
  --ui-brand: var(--bims-dark-primary);
  --ui-brand-hover: var(--bims-dark-primary-strong);
  --ui-brand-soft: var(--bims-dark-primary-soft);
  --ui-accent: var(--bims-dark-accent);
  --ui-accent-soft: var(--bims-dark-accent-soft);
  --ui-focus: 0 0 0 4px var(--bims-focus);
  --bg: var(--bims-dark-canvas);
  --surface: var(--bims-dark-surface);
  --surface-soft: var(--bims-dark-surface-soft);
  --surface-muted: var(--bims-dark-inset);
  --text: var(--bims-dark-text);
  --text-strong: var(--bims-dark-text);
  --muted: var(--bims-dark-muted);
  --line: var(--bims-dark-border);
  --line-strong: var(--bims-dark-border-strong);
  --primary: var(--bims-dark-primary);
  --primary-strong: var(--bims-dark-primary-strong);
  --primary-soft: var(--bims-dark-primary-soft);
  --accent: var(--bims-dark-accent);
  --accent-strong: var(--bims-dark-accent);
  --accent-soft: var(--bims-dark-accent-soft);
  --primary-dark: var(--bims-dark-primary-strong);
  --md-ink: var(--bims-dark-text);
  --md-muted: var(--bims-dark-muted);
  --md-green: var(--bims-dark-primary);
  --md-green-dark: var(--bims-dark-primary-strong);
  --md-gold: var(--bims-dark-accent);
  --md-bg: var(--bims-dark-canvas);
  --md-card: var(--bims-dark-surface);
  --md-line: var(--bims-dark-border);
  --md-soft: var(--bims-dark-surface-soft);
}

/* Shared focus, links, controls, and primary actions. */
html[data-bims-theme] body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--bims-primary) !important;
  box-shadow: 0 0 0 4px var(--bims-focus) !important;
}

html[data-bims-theme] body :is(.btn-primary, .btn--primary, .btn.primary, .mydasma-user, .mydasma-install, .mydasma-form button, .mydasma-verify button) {
  border-color: var(--bims-primary-strong) !important;
  background: linear-gradient(135deg, var(--bims-primary), var(--bims-primary-strong)) !important;
  box-shadow: 0 8px 18px var(--bims-shadow), inset 0 1px 0 rgba(255, 255, 255, .24) !important;
  color: var(--bims-on-primary) !important;
}

html[data-bims-theme] body :is(.btn-primary, .btn--primary, .btn.primary, .mydasma-user, .mydasma-install, .mydasma-form button, .mydasma-verify button):not(:disabled):hover {
  border-color: var(--bims-primary-strong) !important;
  background: linear-gradient(135deg, var(--bims-primary-hover), var(--bims-primary-strong)) !important;
  color: var(--bims-on-primary) !important;
}

html[data-bims-theme] body :is(.btn-light, .btn--secondary, .btn.ghost) {
  border-color: var(--bims-border-strong) !important;
  background: var(--bims-surface) !important;
  color: var(--bims-primary-strong) !important;
}

html[data-bims-theme] body :is(.btn-light, .btn--secondary, .btn.ghost):not(:disabled):hover {
  border-color: var(--bims-accent) !important;
  background: var(--bims-accent-soft) !important;
  color: var(--bims-accent-strong) !important;
}

html[data-bims-theme] body :is(input, select, textarea):focus {
  border-color: var(--bims-primary) !important;
  box-shadow: 0 0 0 4px var(--bims-focus) !important;
}

html[data-bims-theme] body :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--bims-primary) !important;
}

/* Staff application shell ------------------------------------------------ */
html[data-bims-theme] body.bims-admin-shell {
  /* Bridge the mature staff shell's three-color details to the published
     organization preset, so its panel stripe never falls back to fixed green
     and blue when an administrator chooses violet, crimson, or ocean. */
  --ios-blue: var(--bims-primary);
  --ios-green: var(--bims-primary);
  --ios-green-strong: var(--bims-primary-strong);
  --ios-gold: var(--bims-accent);
  --ios-text: var(--bims-text);
  --ios-secondary: var(--bims-primary-strong);
  --ios-tertiary: var(--bims-muted);
  --ios-bg: var(--bims-canvas);
  --ios-separator: var(--bims-border);
  --ios-separator-strong: var(--bims-sidebar-line);
  background:
    radial-gradient(circle at 92% -8%, var(--bims-staff-accent-tint), transparent 36%),
    radial-gradient(circle at 12% 9%, var(--bims-sidebar-tint), transparent 36%),
    linear-gradient(180deg, var(--bims-staff-canvas-tint) 0%, var(--bims-canvas) 48%, var(--bims-staff-canvas-tint) 100%) !important;
  color: var(--bims-text) !important;
  color-scheme: light;
}

html[data-bims-theme] body.bims-admin-shell .main {
  background:
    radial-gradient(circle at 98% 2%, var(--bims-staff-accent-tint), transparent 26%),
    radial-gradient(circle at 3% 8%, var(--bims-sidebar-tint), transparent 32%),
    linear-gradient(180deg, var(--bims-staff-canvas-tint) 0%, var(--bims-canvas) 42%, var(--bims-staff-canvas-tint) 100%) !important;
}

html[data-bims-theme] body.bims-admin-shell .sidebar {
  border-right-color: var(--bims-sidebar-line) !important;
  background:
    radial-gradient(circle at 12% -4%, var(--bims-sidebar-accent-tint), transparent 38%),
    radial-gradient(circle at 100% 12%, var(--bims-sidebar-tint-strong), transparent 50%),
    linear-gradient(180deg, var(--bims-sidebar-tint) 0%, var(--bims-staff-canvas-tint) 55%, var(--bims-sidebar-tint) 100%) !important;
  color: var(--bims-text) !important;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .72), 14px 0 38px var(--bims-shadow) !important;
}

/* Staff light-surface contract: theme colors may brand the UI, but the
 * administrative canvas, sidebar, controls, and navigation never turn dark. */
html[data-bims-display-scope="staff"][data-bims-theme] {
  color-scheme: light;
}

html[data-bims-theme] body.bims-admin-shell .sidebar .brand {
  border-color: var(--bims-sidebar-line) !important;
  background: linear-gradient(135deg, var(--bims-sidebar-tint-strong), var(--bims-sidebar-accent-tint)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 10px 24px var(--bims-shadow) !important;
}

html[data-bims-theme] body.bims-admin-shell .sidebar .brand strong {
  color: var(--bims-text-strong) !important;
}

html[data-bims-theme] body.bims-admin-shell .sidebar .brand span,
html[data-bims-theme] body.bims-admin-shell .sidebar .nav-chevron {
  color: var(--bims-primary-strong) !important;
}

html[data-bims-theme] body.bims-admin-shell .side-nav details {
  border-color: var(--bims-sidebar-line) !important;
  background: linear-gradient(135deg, var(--bims-sidebar-tint), var(--bims-staff-panel-tint)) !important;
}

html[data-bims-theme] body.bims-admin-shell .side-nav details:is([open], .active-group) {
  background: linear-gradient(135deg, var(--bims-sidebar-tint-strong), var(--bims-staff-canvas-tint)) !important;
}

html[data-bims-theme] body.bims-admin-shell .side-nav :is(summary, a) {
  color: var(--bims-text) !important;
}

html[data-bims-theme] body.bims-admin-shell :is(.brand-mark, .logo-mark) {
  background: linear-gradient(135deg, #ffffff, var(--bims-accent-soft), var(--bims-primary-soft)) !important;
  color: var(--bims-primary-strong) !important;
}

html[data-bims-theme] body.bims-admin-shell .side-nav :is(summary, a):hover,
html[data-bims-theme] body.bims-admin-shell .side-nav a:is(.active, .is-active),
html[data-bims-theme] body.bims-admin-shell .side-nav details.active-group > summary {
  border-color: var(--bims-sidebar-line) !important;
  background: linear-gradient(135deg, var(--bims-sidebar-tint-strong), var(--bims-sidebar-accent-tint)) !important;
  box-shadow: inset 3px 0 0 var(--bims-primary), inset 0 1px 0 rgba(255, 255, 255, .82), 0 8px 20px var(--bims-shadow) !important;
  color: var(--bims-primary-strong) !important;
}

html[data-bims-theme] body.bims-admin-shell .side-nav .nav-step {
  background: var(--bims-surface) !important;
  color: var(--bims-primary-strong) !important;
  box-shadow: inset 0 0 0 1px var(--bims-sidebar-line), 0 3px 8px var(--bims-shadow) !important;
}

/* Sidebar icons are the navigation's visual anchor. A legacy dark-sidebar
 * rule gave them pale mint strokes; these local theme tokens keep every icon
 * crisp on the new light surfaces, no matter which preset is published. */
html[data-bims-theme] body.bims-admin-shell .sidebar .side-nav :is(summary, a) .bpw-icon.ico[class*="ico-"][aria-hidden="true"] {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 2px !important;
  border: 1px solid var(--bims-sidebar-line) !important;
  border-radius: 8px !important;
  background: var(--bims-surface) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 3px 8px var(--bims-shadow) !important;
  --icon-ink: var(--bims-primary-strong) !important;
  --icon-accent: var(--bims-accent-strong) !important;
  --icon-detail: var(--bims-primary) !important;
  --icon-wash: transparent !important;
  color: var(--bims-primary-strong) !important;
  opacity: 1 !important;
}

html[data-bims-theme] body.bims-admin-shell .sidebar .side-nav :is(summary, a) .bpw-icon.ico[class*="ico-"][aria-hidden="true"] svg {
  width: 18px !important;
  height: 18px !important;
}

html[data-bims-theme] body.bims-admin-shell .sidebar .side-nav .bpw-icon.ico[class*="ico-"][aria-hidden="true"] svg * {
  stroke-width: 1.9px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html[data-bims-theme] body.bims-admin-shell .sidebar .side-nav details[open] > summary .bpw-icon.ico[class*="ico-"][aria-hidden="true"] {
  border-color: var(--bims-sidebar-line) !important;
  background: var(--bims-sidebar-tint-strong) !important;
}

html[data-bims-theme] body.bims-admin-shell .sidebar .side-nav :is(a:hover, a.active, a.is-active) .bpw-icon.ico[class*="ico-"][aria-hidden="true"],
html[data-bims-theme] body.bims-admin-shell .sidebar .side-nav details.active-group > summary .bpw-icon.ico[class*="ico-"][aria-hidden="true"] {
  border-color: var(--bims-primary-strong) !important;
  background: var(--bims-primary) !important;
  box-shadow: 0 5px 12px var(--bims-shadow) !important;
  --icon-ink: var(--bims-on-primary) !important;
  --icon-accent: var(--bims-on-primary) !important;
  --icon-detail: var(--bims-on-primary) !important;
  --icon-wash: transparent !important;
  color: var(--bims-on-primary) !important;
}

html[data-bims-theme] body.bims-admin-shell .side-nav :is(a:hover, a.active, a.is-active) .nav-step {
  background: var(--bims-primary) !important;
  color: var(--bims-on-primary) !important;
  box-shadow: 0 4px 10px var(--bims-shadow) !important;
}

html[data-bims-theme] body.bims-admin-shell .side-nav details.active-group > summary .nav-chevron,
html[data-bims-theme] body.bims-admin-shell .side-nav :is(summary, a):hover .nav-chevron {
  color: var(--bims-primary-strong) !important;
}

html[data-bims-theme] body.bims-admin-shell .topbar {
  border-bottom-color: var(--bims-sidebar-line) !important;
  background: linear-gradient(105deg, var(--bims-staff-header-tint), var(--bims-surface) 54%, var(--bims-staff-accent-tint)) !important;
  box-shadow: 0 9px 30px var(--bims-shadow) !important;
}

html[data-bims-theme] body.bims-admin-shell .topbar :is(.topbar-title > small, .topbar-field-title) {
  color: var(--bims-primary-strong) !important;
}

/* The scope picker and account menu sit on a light topbar. Set both sides of
 * each pair explicitly so inherited dark text can never reappear on white. */
html[data-bims-theme] body.bims-admin-shell .bpw-account-shell :is(
  .barangay-lookup > input,
  .barangay-select-search-input,
  .barangay-lookup-label > select:not(.barangay-select-search-native),
  .kld-nextly-profile-button,
  .barangay-scope-pill
) {
  border-color: var(--bims-border-strong) !important;
  background: var(--bims-surface) !important;
  color: var(--bims-text) !important;
}

html[data-bims-theme] body.bims-admin-shell .bpw-account-shell :is(
  .kld-nextly-profile-copy b,
  .kld-nextly-profile-head b
) {
  color: var(--bims-text-strong) !important;
}

html[data-bims-theme] body.bims-admin-shell .bpw-account-shell :is(
  .kld-nextly-profile-copy small,
  .kld-nextly-profile-head small,
  .barangay-lookup-label,
  .barangay-scope-label
) {
  color: var(--bims-primary-strong) !important;
}

html[data-bims-theme] body.bims-admin-shell :is(
  .panel, .bpw-panel, .metric-card, .stat-card, .module-card, .module-card-pro,
  .portal-card-panel, .category-hero, .dashboard-welcome, .chart-panel,
  .ai-executive-panel, .area-dashboard-panel, .notification-inbox-panel,
  .reports-panel, .receipt-panel, .permission-matrix-panel, .table-wrap
) {
  border-color: var(--bims-sidebar-line) !important;
  background: var(--bims-surface) !important;
  box-shadow: 0 16px 40px var(--bims-shadow) !important;
}

html[data-bims-theme] body.bims-admin-shell :is(
  .complaint-detail-card, .area-module-card, .breakdown-card, .workflow-status-note,
  .service-citizen-action-panel, .complaint-feedback-panel, .complaint-mode-actions-card,
  .dashboard-summary-card, .metric-card-inner
) {
  border-color: var(--bims-border) !important;
  background: var(--bims-surface-soft) !important;
  color: var(--bims-text) !important;
}

html[data-bims-theme] body.bims-admin-shell .main > :not(.topbar) :is(
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
  select:not([multiple]), textarea
) {
  border-color: var(--bims-border-strong) !important;
  background: var(--bims-surface) !important;
  color: var(--bims-text) !important;
}

html[data-bims-theme] body.bims-admin-shell :is(th, .table-wrap thead th) {
  border-bottom-color: var(--bims-border) !important;
  background: linear-gradient(180deg, var(--bims-staff-table-tint), var(--bims-staff-panel-tint)) !important;
  color: var(--bims-primary-strong) !important;
}

html[data-bims-theme] body.bims-admin-shell :is(td, .table-wrap tbody td) {
  border-bottom-color: var(--bims-border) !important;
  color: var(--bims-text) !important;
}

html[data-bims-theme] body.bims-admin-shell table {
  background: var(--bims-surface) !important;
  color: var(--bims-text) !important;
}

html[data-bims-theme] body.bims-admin-shell tbody tr:hover td {
  background: var(--bims-staff-panel-tint) !important;
}

html[data-bims-theme] body.bims-admin-shell :is(.filter-chip, .segmented-control button, .area-report-tabs > a, .page-link, .page-number, .page-control) {
  border-color: var(--bims-border-strong) !important;
  background: var(--bims-surface) !important;
  color: var(--bims-primary-strong) !important;
}

html[data-bims-theme] body.bims-admin-shell :is(.filter-chip.is-active, .segmented-control button.is-active, .area-report-tabs > a.is-active, .area-report-tabs > a.active, .page-link.is-current, .page-number.is-current) {
  border-color: var(--bims-primary) !important;
  background: linear-gradient(135deg, var(--bims-primary), var(--bims-primary-strong)) !important;
  color: var(--bims-on-primary) !important;
  box-shadow: 0 7px 16px var(--bims-shadow) !important;
}

html[data-bims-theme] body.bims-admin-shell :is(.modal-header, .bims-modal-header) {
  border-bottom-color: var(--bims-border) !important;
  background: linear-gradient(135deg, var(--bims-primary-soft), var(--bims-accent-soft)) !important;
}

html[data-bims-theme] body.bims-admin-shell :is(.bpw-map-actions .btn.primary, .bpw-map-filter.active, .bpw-map-legend b) {
  border-color: var(--bims-primary-strong) !important;
  background: linear-gradient(135deg, var(--bims-primary), var(--bims-primary-strong)) !important;
  color: var(--bims-on-primary) !important;
}

html[data-bims-theme] body.bims-admin-shell :is(.bpw-dasma-leaflet-map, .complaint-radar-map) .leaflet-control-zoom {
  border-color: var(--bims-primary) !important;
  box-shadow: 0 6px 16px var(--bims-shadow) !important;
}

html[data-bims-theme] body.bims-admin-shell :is(.bpw-dasma-leaflet-map, .complaint-radar-map) .leaflet-control-zoom a {
  background: var(--bims-primary) !important;
  color: var(--bims-on-primary) !important;
}

html[data-bims-theme] body.bims-admin-shell :is(.bpw-dasma-leaflet-map, .complaint-radar-map) .leaflet-control-zoom a:hover,
html[data-bims-theme] body.bims-admin-shell :is(.bpw-dasma-leaflet-map, .complaint-radar-map) .leaflet-control-zoom a:focus-visible {
  background: var(--bims-primary-strong) !important;
  color: var(--bims-on-primary) !important;
}

/* Landing, authentication, print, and offline fallbacks. */
html[data-bims-theme] body.landing-body,
html[data-bims-theme] body.bims-pro-shell.auth-page,
html[data-bims-theme] body.bims-pro-shell.print-page {
  background:
    radial-gradient(circle at 88% -8%, var(--bims-accent-soft), transparent 31%),
    radial-gradient(circle at 10% 11%, var(--bims-primary-soft), transparent 30%),
    var(--bims-canvas) !important;
  color: var(--bims-text) !important;
}

html[data-bims-theme] body.landing-body .landing-hero,
html[data-bims-theme] body.mydasma-body :is(.mydasma-guest, .mydasma-welcome) {
  background: linear-gradient(138deg, var(--bims-nav-start) 0%, var(--bims-primary) 58%, var(--bims-accent) 135%) !important;
  box-shadow: 0 20px 46px var(--bims-shadow) !important;
}

html[data-bims-theme] body.landing-body :is(.demo-card, .landing-tile, .credential-box, .landing-account-note),
html[data-bims-theme] body.bims-pro-shell.auth-page :is(.login-card, .login-panel, .auth-card, .install-card),
html[data-bims-theme] body.bims-pro-shell.print-page :is(.panel, .document-sheet) {
  border-color: var(--bims-border) !important;
  background: var(--bims-surface) !important;
  box-shadow: 0 16px 40px var(--bims-shadow) !important;
}

html[data-bims-theme] body.bims-pro-shell.auth-page .login-hero {
  border-color: var(--bims-border) !important;
  background: var(--bims-surface) !important;
  box-shadow: 0 16px 40px var(--bims-shadow) !important;
}

/* The shared brand component normally uses a sidebar-only muted token. On
   auth and offline cards it sits on a surface, so use the readable card text
   token instead. */
html[data-bims-theme] body.bims-pro-shell.auth-page .brand span {
  color: var(--bims-muted) !important;
}

/* Staff sign-in light-surface lock ----------------------------------------
 * Login and recovery pages are administrative screens, not citizen pages.
 * Keep their foregrounds and fields explicitly paired with light surfaces so
 * a device's Dark/System PWA preference can never make staff credentials hard
 * to read. The light tints mirror the dashboard without turning the login
 * card into a dark hero. */
html[data-bims-display-scope="staff"][data-bims-theme] body.bims-pro-shell.auth-page {
  background:
    radial-gradient(circle at 91% -8%, var(--bims-staff-accent-tint), transparent 34%),
    radial-gradient(circle at 8% 10%, var(--bims-sidebar-tint), transparent 34%),
    linear-gradient(145deg, var(--bims-staff-canvas-tint), var(--bims-canvas) 48%, var(--bims-staff-canvas-tint)) !important;
  color: var(--bims-text) !important;
  color-scheme: light;
}

html[data-bims-display-scope="staff"][data-bims-theme] body.bims-pro-shell.auth-page .login-card {
  border-color: var(--bims-sidebar-line) !important;
  background: var(--bims-surface) !important;
  box-shadow: 0 20px 48px var(--bims-shadow) !important;
}

html[data-bims-display-scope="staff"][data-bims-theme] body.bims-pro-shell.auth-page .login-card > :is(.login-panel, .login-hero) {
  border-radius: 0 !important;
  color: var(--bims-text) !important;
}

html[data-bims-display-scope="staff"][data-bims-theme] body.bims-pro-shell.auth-page .login-panel {
  border: 0 !important;
  background: linear-gradient(145deg, var(--bims-surface), var(--bims-staff-panel-tint) 160%) !important;
}

html[data-bims-display-scope="staff"][data-bims-theme] body.bims-pro-shell.auth-page .login-hero {
  border: 0 !important;
  border-left: 1px solid var(--bims-sidebar-line) !important;
  background: linear-gradient(145deg, var(--bims-staff-table-tint), var(--bims-surface) 56%, var(--bims-staff-accent-tint)) !important;
  box-shadow: none !important;
}

html[data-bims-display-scope="staff"][data-bims-theme] body.bims-pro-shell.auth-page :is(
  .login-panel h2, .login-hero h3, .bpw-login-brand > div:not(.brand-mark) > strong,
  .auth-account-directory-head strong, .auth-demo-head strong
) {
  color: var(--bims-text-strong) !important;
}

html[data-bims-display-scope="staff"][data-bims-theme] body.bims-pro-shell.auth-page .bpw-login-brand > div:not(.brand-mark) > span {
  color: var(--bims-primary-strong) !important;
}

html[data-bims-display-scope="staff"][data-bims-theme] body.bims-pro-shell.auth-page .bpw-login-brand .brand-mark {
  border-color: var(--bims-primary-strong) !important;
  background: linear-gradient(135deg, var(--bims-primary-strong), var(--bims-primary)) !important;
  color: var(--bims-on-primary) !important;
  box-shadow: 0 8px 18px var(--bims-shadow) !important;
}

html[data-bims-display-scope="staff"][data-bims-theme] body.bims-pro-shell.auth-page :is(
  .login-hero > p, .auth-account-directory-help, .auth-demo-panel p,
  .auth-login-secondary > span, .auth-install-note, .portal-install-note
) {
  color: var(--bims-text) !important;
}

html[data-bims-display-scope="staff"][data-bims-theme] body.bims-pro-shell.auth-page :is(
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]),
  select:not([multiple]), textarea
) {
  border-color: var(--bims-border-strong) !important;
  background: var(--bims-surface) !important;
  color: var(--bims-text) !important;
  -webkit-text-fill-color: var(--bims-text) !important;
  caret-color: var(--bims-text) !important;
}

html[data-bims-display-scope="staff"][data-bims-theme] body.bims-pro-shell.auth-page :is(input, textarea)::placeholder {
  color: var(--bims-muted) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--bims-muted) !important;
}

html[data-bims-display-scope="staff"][data-bims-theme] body.bims-pro-shell.auth-page :is(input, textarea):-webkit-autofill {
  box-shadow: 0 0 0 1000px var(--bims-surface) inset !important;
  -webkit-text-fill-color: var(--bims-text) !important;
}

html[data-bims-display-scope="staff"][data-bims-theme] body.bims-pro-shell.auth-page .auth-account-directory {
  border-color: var(--bims-sidebar-line) !important;
  background: linear-gradient(145deg, var(--bims-staff-table-tint), var(--bims-surface) 62%) !important;
  box-shadow: 0 10px 24px var(--bims-shadow) !important;
}

html[data-bims-display-scope="staff"][data-bims-theme] body.bims-pro-shell.auth-page :is(
  .auth-account-directory-head > span, .auth-demo-head > span
) {
  border: 1px solid var(--bims-sidebar-line) !important;
  background: var(--bims-staff-panel-tint) !important;
  color: var(--bims-primary-strong) !important;
}

html[data-bims-display-scope="staff"][data-bims-theme] body.bims-pro-shell.auth-page .auth-account-directory .field-title,
html[data-bims-display-scope="staff"][data-bims-theme] body.bims-pro-shell.auth-page .field-title {
  color: var(--bims-text-strong) !important;
}

html[data-bims-display-scope="staff"][data-bims-theme] body.bims-pro-shell.auth-page .field-title .bpw-icon {
  --icon-ink: var(--bims-primary-strong) !important;
  --icon-accent: var(--bims-accent-strong) !important;
  --icon-detail: var(--bims-primary) !important;
}

html[data-bims-display-scope="staff"][data-bims-theme] body.bims-pro-shell.auth-page .auth-account-results {
  border-color: var(--bims-sidebar-line) !important;
  background: var(--bims-surface) !important;
  box-shadow: 0 18px 38px var(--bims-shadow) !important;
}

html[data-bims-display-scope="staff"][data-bims-theme] body.bims-pro-shell.auth-page :is(
  .auth-account-result, .auth-account-result-meta, .auth-account-result-empty
) {
  color: var(--bims-text) !important;
}

html[data-bims-display-scope="staff"][data-bims-theme] body.bims-pro-shell.auth-page .auth-account-result:is(:hover, :focus-visible) {
  background: var(--bims-staff-panel-tint) !important;
  color: var(--bims-text-strong) !important;
}

html[data-bims-display-scope="staff"][data-bims-theme] body.bims-pro-shell.auth-page :is(
  .pill-grid span, .portal-login-links a, .pwa-install-auth
) {
  border-color: var(--bims-sidebar-line) !important;
  background: var(--bims-surface) !important;
  color: var(--bims-primary-strong) !important;
  box-shadow: 0 5px 12px var(--bims-shadow) !important;
}

html[data-bims-display-scope="staff"][data-bims-theme] body.bims-pro-shell.auth-page .auth-login-secondary a {
  color: var(--bims-primary-strong) !important;
}

html[data-bims-display-scope="staff"][data-bims-theme] body.bims-pro-shell.auth-page .auth-demo-panel {
  border-color: var(--bims-sidebar-line) !important;
  background: linear-gradient(145deg, var(--bims-staff-table-tint), var(--bims-surface) 72%) !important;
}

@media (max-width: 760px) {
  html[data-bims-display-scope="staff"][data-bims-theme] body.bims-pro-shell.auth-page .login-hero {
    border-top: 1px solid var(--bims-sidebar-line) !important;
    border-left: 0 !important;
  }
}

/* Citizen website and installed MyDasma PWA. */
html[data-bims-theme] body.public-service-body {
  background: var(--bims-canvas) !important;
  color: var(--bims-text) !important;
}

html[data-bims-theme] body.public-service-body:not(.mydasma-body) :is(
  .citizen-portal-top, .public-hero-panel, .public-service-card, .public-flow-strip article,
  .citizen-access-hero, .citizen-access-card, .citizen-account-profile,
  .citizen-account-panel, .citizen-action-card, .citizen-feature-card,
  .citizen-mobile-primary-module-grid > a
) {
  border-color: var(--bims-border) !important;
  background: var(--bims-surface) !important;
  box-shadow: 0 14px 32px var(--bims-shadow) !important;
  color: var(--bims-text) !important;
}

html[data-bims-theme] body.public-service-body:not(.mydasma-body) :is(
  .citizen-desktop-account, .citizen-mobile-header-theme, .citizen-menu-account,
  .citizen-mobile-primary-module-icon, .citizen-menu-avatar
) {
  color: var(--bims-primary) !important;
}

html[data-bims-theme] body.public-service-body:not(.mydasma-body) :is(
  .citizen-desktop-account, .citizen-menu-account:hover, .citizen-menu-account:focus-visible,
  .citizen-mobile-primary-module-grid > a.is-active
) {
  background: linear-gradient(135deg, var(--bims-primary-soft), var(--bims-accent-soft)) !important;
  color: var(--bims-primary-strong) !important;
}

html[data-bims-theme] body.mydasma-body {
  background:
    radial-gradient(circle at 82% 0, var(--bims-accent-soft), transparent 34%),
    radial-gradient(circle at 8% 12%, var(--bims-primary-soft), transparent 28%),
    var(--bims-canvas) !important;
  color: var(--bims-text) !important;
}

html[data-bims-theme] body.mydasma-body :is(
  .mydasma-auth-card, .mydasma-section, .mydasma-verify, .mydasma-guest-options a,
  .mydasma-quick a, .mydasma-nav, .mydasma-history a, .mydasma-news a
) {
  border-color: var(--bims-border) !important;
  background: var(--bims-surface) !important;
  color: var(--bims-text) !important;
  box-shadow: 0 14px 32px var(--bims-shadow) !important;
}

html[data-bims-theme] body.mydasma-body :is(
  .mydasma-brand span, .mydasma-guest-options > a > .bpw-icon:first-child,
  .mydasma-quick .bpw-icon, .mydasma-auth-card-head > span,
  .mydasma-history a > span:first-child, .mydasma-news a > span:first-child,
  .mydasma-section-head > a, .mydasma-profile
) {
  background: var(--bims-primary-soft) !important;
  color: var(--bims-primary-strong) !important;
}

html[data-bims-theme] body.mydasma-body :is(.mydasma-form input, .mydasma-form select) {
  border-color: var(--bims-border-strong) !important;
  background: var(--bims-surface) !important;
  color: var(--bims-text) !important;
}

html[data-bims-theme] body.mydasma-body :is(.mydasma-nav a.active, .mydasma-guest-note a, .mydasma-form-switch a, .mydasma-profile small) {
  color: var(--bims-primary) !important;
}

/* Dark mode remains a device-local preference and uses the same brand key. */
html[data-citizen-theme="dark"][data-bims-theme] body.public-service-body,
html[data-citizen-theme="dark"][data-bims-theme] body.mydasma-body {
  background: var(--bims-dark-canvas) !important;
  color: var(--bims-dark-text) !important;
}

html[data-citizen-theme="dark"][data-bims-theme] body.public-service-body:not(.mydasma-body) :is(
  .citizen-portal-top, .public-hero-panel, .public-service-card, .public-flow-strip article,
  .citizen-access-hero, .citizen-access-card, .citizen-account-profile,
  .citizen-account-panel, .citizen-action-card, .citizen-feature-card,
  .citizen-mobile-primary-module-grid > a
),
html[data-citizen-theme="dark"][data-bims-theme] body.mydasma-body :is(
  .mydasma-auth-card, .mydasma-section, .mydasma-verify, .mydasma-guest-options a,
  .mydasma-quick a, .mydasma-nav, .mydasma-history a, .mydasma-news a
) {
  border-color: var(--bims-dark-border) !important;
  background: var(--bims-dark-surface) !important;
  color: var(--bims-dark-text) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .26) !important;
}

html[data-citizen-theme="dark"][data-bims-theme] body.public-service-body :is(input, select, textarea),
html[data-citizen-theme="dark"][data-bims-theme] body.mydasma-body :is(input, select, textarea) {
  border-color: var(--bims-dark-border-strong) !important;
  background: var(--bims-dark-surface-soft) !important;
  color: var(--bims-dark-text) !important;
}

html[data-citizen-theme="dark"][data-bims-theme]:not([data-bims-display-scope="staff"]) body :is(.btn-light, .btn--secondary, .btn.ghost) {
  border-color: var(--bims-dark-border-strong) !important;
  background: var(--bims-dark-surface-soft) !important;
  color: var(--bims-dark-primary) !important;
}

html[data-citizen-theme="dark"][data-bims-theme] body.public-service-body:not(.mydasma-body) :is(
  .citizen-desktop-account, .citizen-menu-account:hover, .citizen-menu-account:focus-visible,
  .citizen-mobile-primary-module-grid > a.is-active
) {
  background: linear-gradient(135deg, var(--bims-dark-primary-soft), var(--bims-dark-accent-soft)) !important;
  color: var(--bims-dark-primary) !important;
}

html[data-citizen-theme="dark"][data-bims-theme] body.mydasma-body :is(
  .mydasma-brand span, .mydasma-guest-options > a > .bpw-icon:first-child,
  .mydasma-quick .bpw-icon, .mydasma-auth-card-head > span,
  .mydasma-history a > span:first-child, .mydasma-news a > span:first-child,
  .mydasma-section-head > a, .mydasma-profile
) {
  background: var(--bims-dark-primary-soft) !important;
  color: var(--bims-dark-primary) !important;
}

/* Landing-page contrast lock ------------------------------------------------
 *
 * Older landing styles intentionally use green and gold foregrounds.  Once a
 * published palette turns the hero into a saturated gradient those inherited
 * foregrounds become unreadable (for example dark green on violet).  Keep
 * the artwork in the palette, but explicitly bind every foreground to a
 * proven hero/surface pair here, after every legacy stylesheet has loaded.
 */
html[data-bims-theme] body.landing-body .landing-hero {
  border-color: rgba(255, 255, 255, .28) !important;
  background: linear-gradient(138deg, var(--bims-nav-start) 0%, var(--bims-primary) 58%, var(--bims-accent) 135%) !important;
  box-shadow: 0 20px 46px var(--bims-shadow) !important;
}

html[data-bims-theme] body.landing-body .landing-hero::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, .76), rgba(255, 255, 255, .26)) !important;
}

html[data-bims-theme] body.landing-body .landing-hero :is(
  h1, .landing-title-main, .landing-title-accent, p, .landing-badge
) {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .22) !important;
}

html[data-bims-theme] body.landing-body .landing-badge {
  border: 1px solid rgba(255, 255, 255, .30) !important;
  background: rgba(0, 0, 0, .20) !important;
}

html[data-bims-theme] body.landing-body :is(.demo-card, .landing-tile) {
  border-color: var(--bims-border) !important;
  background: var(--bims-surface) !important;
  color: var(--bims-text) !important;
  box-shadow: 0 16px 40px var(--bims-shadow) !important;
}

html[data-bims-theme] body.landing-body :is(.demo-card h2, .landing-tile h3) {
  color: var(--bims-text-strong) !important;
}

html[data-bims-theme] body.landing-body .credential-box {
  border-color: var(--bims-border) !important;
  background: var(--bims-surface-inset) !important;
  color: var(--bims-text) !important;
}

html[data-bims-theme] body.landing-body .credential-row {
  border-bottom-color: var(--bims-border-strong) !important;
}

html[data-bims-theme] body.landing-body .credential-row > span,
html[data-bims-theme] body.landing-body .credential-row small,
html[data-bims-theme] body.landing-body .landing-account-note,
html[data-bims-theme] body.landing-body .landing-tile p,
html[data-bims-theme] body.landing-body .landing-footer {
  color: var(--bims-muted) !important;
}

html[data-bims-theme] body.landing-body :is(.credential-row strong, .landing-account-note strong) {
  color: var(--bims-text-strong) !important;
}

html[data-bims-theme] body.landing-body .landing-account-note {
  border-top-color: var(--bims-border) !important;
  background: var(--bims-surface-soft) !important;
}

html[data-bims-theme] body.landing-body :is(.landing-account-link, .pwa-install-landing) {
  border-color: var(--bims-primary-strong) !important;
  background: var(--bims-primary) !important;
  color: var(--bims-on-primary) !important;
  box-shadow: 0 8px 18px var(--bims-shadow) !important;
  text-shadow: none !important;
}

html[data-bims-theme] body.landing-body :is(.landing-account-link, .pwa-install-landing):is(:hover, :focus-visible) {
  border-color: var(--bims-primary-strong) !important;
  background: var(--bims-primary-strong) !important;
  color: var(--bims-on-primary) !important;
}

html[data-bims-theme] body.landing-body .landing-tile > a {
  border: 1px solid var(--bims-border-strong) !important;
  background: var(--bims-primary-soft) !important;
  color: var(--bims-text-strong) !important;
  text-decoration-color: currentColor !important;
}

html[data-bims-theme] body.landing-body .landing-tile > a:is(:hover, :focus-visible) {
  border-color: var(--bims-primary) !important;
  background: var(--bims-primary-tint) !important;
  color: var(--bims-text-strong) !important;
}

html[data-bims-theme] body.landing-body .landing-icon {
  background: var(--bims-primary) !important;
  color: var(--bims-on-primary) !important;
}

html[data-bims-theme] body.landing-body .landing-tile:hover {
  border-color: var(--bims-primary) !important;
  box-shadow: 0 20px 42px var(--bims-shadow) !important;
}

/* Light foregrounds are intentionally never placed on the lightened dark
 * palette.  The dark hero uses only dark palette surfaces, preserving a
 * minimum 9.7:1 white-text contrast even at the lightest end of its gradient.
 */
html[data-citizen-theme="dark"][data-bims-theme] body.landing-body .landing-hero {
  border-color: var(--bims-dark-border-strong) !important;
  background: linear-gradient(138deg, var(--bims-dark-surface) 0%, var(--bims-dark-inset) 58%, var(--bims-dark-primary-soft) 135%) !important;
}

/* MyDasma guest and welcome heroes use the same inverse-surface contract as
 * the landing page.  The base MyDasma CSS supplies dark text for ordinary
 * cards; it must never leak onto these saturated branded hero surfaces. */
html[data-bims-theme] body.mydasma-body :is(.mydasma-guest, .mydasma-welcome) {
  border-color: rgba(255, 255, 255, .28) !important;
  background: linear-gradient(138deg, var(--bims-nav-start) 0%, var(--bims-primary) 58%, var(--bims-accent) 135%) !important;
  color: #ffffff !important;
  box-shadow: 0 20px 46px var(--bims-shadow) !important;
}

html[data-bims-theme] body.mydasma-body :is(.mydasma-guest, .mydasma-welcome) :is(.mydasma-kicker, h1, p),
html[data-bims-theme] body.mydasma-body .mydasma-welcome > span {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .22) !important;
}

html[data-bims-theme] body.mydasma-body .mydasma-guest-actions a,
html[data-bims-theme] body.mydasma-body :is(.mydasma-guest-install, .mydasma-welcome .mydasma-install) {
  border-color: rgba(255, 255, 255, .48) !important;
  background: #ffffff !important;
  color: var(--bims-nav-mid) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .16) !important;
  text-shadow: none !important;
}

html[data-bims-theme] body.mydasma-body .mydasma-guest-actions a + a {
  border-color: rgba(255, 255, 255, .42) !important;
  background: rgba(255, 255, 255, .14) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html[data-bims-theme] body.mydasma-body :is(
  .mydasma-guest-actions a, .mydasma-guest-install, .mydasma-welcome .mydasma-install
) .bpw-icon {
  background: transparent !important;
  color: currentColor !important;
}

html[data-bims-theme] body.mydasma-body .mydasma-guest-actions a:is(:hover, :focus-visible),
html[data-bims-theme] body.mydasma-body :is(.mydasma-guest-install, .mydasma-welcome .mydasma-install):is(:hover, :focus-visible) {
  border-color: #ffffff !important;
  background: var(--bims-accent-soft) !important;
  color: var(--bims-nav-mid) !important;
}

html[data-bims-theme] body.mydasma-body .mydasma-guest-actions a + a:is(:hover, :focus-visible) {
  border-color: #ffffff !important;
  background: rgba(255, 255, 255, .25) !important;
  color: #ffffff !important;
}

html[data-citizen-theme="dark"][data-bims-theme] body.mydasma-body :is(.mydasma-guest, .mydasma-welcome) {
  border-color: var(--bims-dark-border-strong) !important;
  background: linear-gradient(138deg, var(--bims-dark-surface) 0%, var(--bims-dark-inset) 58%, var(--bims-dark-primary-soft) 135%) !important;
}

html[data-citizen-theme="dark"][data-bims-theme] body.mydasma-body .mydasma-guest-actions a:first-child:is(:hover, :focus-visible),
html[data-citizen-theme="dark"][data-bims-theme] body.mydasma-body :is(.mydasma-guest-install, .mydasma-welcome .mydasma-install):is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, .22) !important;
  color: #ffffff !important;
}

/* Main Admin theme picker ------------------------------------------------ */
.bims-theme-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 12px;
  width: 100%;
}

.bims-theme-choice {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 92px;
  padding: 14px;
  border: 1px solid var(--bims-border-strong, #cfb8e5);
  border-radius: 16px;
  background: var(--bims-surface, #fff);
  color: var(--bims-text, #2a1740);
  cursor: pointer;
  box-shadow: 0 7px 18px var(--bims-shadow, rgba(76, 29, 149, .11));
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.bims-theme-choice:hover {
  transform: translateY(-2px);
  border-color: var(--bims-primary, #6d28d9);
}

.bims-theme-choice input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.bims-theme-choice:has(input:checked) {
  border-color: var(--bims-primary, #6d28d9);
  box-shadow: 0 0 0 3px var(--bims-focus, rgba(109, 40, 217, .22)), 0 12px 24px var(--bims-shadow, rgba(76, 29, 149, .16));
}

.bims-theme-choice:has(input:focus-visible) {
  outline: 3px solid var(--bims-primary, #6d28d9);
  outline-offset: 2px;
}

.bims-theme-choice-swatches {
  display: flex;
  gap: 4px;
}

.bims-theme-choice-swatches i {
  display: block;
  width: 17px;
  height: 38px;
  border: 1px solid rgba(0, 0, 0, .08);
}

.bims-theme-choice-swatches i:first-child { border-radius: 8px 0 0 8px; }
.bims-theme-choice-swatches i:last-child { border-radius: 0 8px 8px 0; }
.bims-theme-choice-swatches[data-theme-swatch="violet"] i:nth-child(1) { background: #6d28d9; }
.bims-theme-choice-swatches[data-theme-swatch="violet"] i:nth-child(2) { background: #a16207; }
.bims-theme-choice-swatches[data-theme-swatch="violet"] i:nth-child(3) { background: #f3e8ff; }
.bims-theme-choice-swatches[data-theme-swatch="emerald"] i:nth-child(1) { background: #047857; }
.bims-theme-choice-swatches[data-theme-swatch="emerald"] i:nth-child(2) { background: #a16207; }
.bims-theme-choice-swatches[data-theme-swatch="emerald"] i:nth-child(3) { background: #d1fae5; }
.bims-theme-choice-swatches[data-theme-swatch="crimson"] i:nth-child(1) { background: #b4233d; }
.bims-theme-choice-swatches[data-theme-swatch="crimson"] i:nth-child(2) { background: #9a6700; }
.bims-theme-choice-swatches[data-theme-swatch="crimson"] i:nth-child(3) { background: #fde8eb; }
.bims-theme-choice-swatches[data-theme-swatch="ocean"] i:nth-child(1) { background: #0369a1; }
.bims-theme-choice-swatches[data-theme-swatch="ocean"] i:nth-child(2) { background: #b45309; }
.bims-theme-choice-swatches[data-theme-swatch="ocean"] i:nth-child(3) { background: #e0f2fe; }
.bims-theme-choice-swatches[data-theme-swatch="midnight"] i:nth-child(1) { background: #1d4ed8; }
.bims-theme-choice-swatches[data-theme-swatch="midnight"] i:nth-child(2) { background: #a16207; }
.bims-theme-choice-swatches[data-theme-swatch="midnight"] i:nth-child(3) { background: #dbeafe; }
.bims-theme-choice-copy { display: grid; gap: 3px; }
.bims-theme-choice-copy b { color: var(--bims-text-strong, #1e1033); }
.bims-theme-choice-copy small { color: var(--bims-muted, #705f7f); line-height: 1.35; }
.bims-theme-publication-note { margin: 2px 0 14px; color: var(--bims-muted, #705f7f); }

@media (prefers-reduced-motion: reduce) {
  .bims-theme-choice { transition: none; }
  .bims-theme-choice:hover { transform: none; }
}