/* ═══════════════════════════════════════════════════════════════════
   PHASE 2C.2 POLISH SESSION -- DESIGN SYSTEM v1 (April 12, 2026)
   ═══════════════════════════════════════════════════════════════════
   Plus15 Design System tokens + admin panel scoped styling.

   Scope: ALL of these styles are scoped to #adminPanel only. The rest
   of the app continues to use the existing magenta-based system. This
   is Option C from the polish-session scoping conversation: introduce
   the new tokens as additions (not replacements), use them in admin
   only, then roll out to other surfaces in future sessions after the
   pattern is proven in production.

   Token prefix: --ds-* so the new vars never conflict with existing
   ones (--bg, --magenta, --surface, etc).

   ═══════════════════════════════════════════════════════════════════
   TYPOGRAPHY RULES (per Plus15 design system v1)
   ═══════════════════════════════════════════════════════════════════
   - POPPINS: All headings, body, BUTTONS, all UI text. The default.
     Bold 700 with negative tracking at display sizes.
   - JETBRAINS MONO: Reserved for metadata labels, section numbers,
     timestamps, project IDs, badge text, navigation eyebrows, data
     values, code. NEVER for headings, body copy, or buttons. It
     signals "this is data / metadata / a label."
   - ORBITRON: Logo-only. NEVER as a heading, label, or UI font.
     Not loaded at all in this CSS scope.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* ── Color tokens ── */
    --ds-carbon: #0A0A0A;
    --ds-forge: #141414;
    --ds-iron: #1E1E1E;
    --ds-graphite: #2A2A2A;
    --ds-steel: #555555;
    --ds-alloy: #888888;
    --ds-silver: #AAAAAA;
    --ds-bone: #E8E8E8;
    --ds-chalk: #F5F3EF;
    --ds-paper: #FAF9F7;
    --ds-accent: #CCFF00;
    --ds-accent-muted: rgba(204, 255, 0, 0.10);
    --ds-accent-glow: rgba(204, 255, 0, 0.06);
    /* Text color on top of accent backgrounds. NEVER flips with theme.
       Lime + dark text is the design system pairing for both modes. */
    --ds-on-accent: #0A0A0A;
    --ds-success: #3D9A50;
    --ds-warning: #D4A843;
    --ds-error: #C4423C;
    --ds-info: #4A8EC2;
    /* ── Typography tokens ── */
    --ds-font-body: 'Poppins', sans-serif;
    --ds-font-mono: 'JetBrains Mono', monospace;
    /* (no --ds-font-display because Orbitron is logo-only and not used here) */
    /* ── Borders (dark surface variant) ── */
    --ds-border-subtle: rgba(255, 255, 255, 0.06);
    --ds-border-default: rgba(255, 255, 255, 0.10);
    --ds-border-strong: rgba(255, 255, 255, 0.18);
    /* ── Shadows (dark surface variant) ── */
    --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --ds-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --ds-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
    /* ── Motion ── */
    --ds-dur-fast: 150ms;
    --ds-dur-base: 300ms;
    --ds-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ds-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Admin panel shell ── */
#adminPanel {
    font-family: var(--ds-font-body);
    background: var(--ds-carbon);
    color: var(--ds-bone);
    padding: 40px 32px;
}
#adminPanel h1, #adminPanel h2, #adminPanel h3, #adminPanel h4 {
    font-family: var(--ds-font-body);
    font-weight: 700;
    color: var(--ds-bone);
    letter-spacing: -0.02em;
}
#adminPanel h2 { font-size: 24px; line-height: 1.2; }
#adminPanel h3 { font-size: 18px; line-height: 1.3; }
#adminPanel h4 { font-size: 14px; line-height: 1.4; font-weight: 600; }
#adminPanel p { font-family: var(--ds-font-body); color: var(--ds-silver); font-size: 13px; line-height: 1.6; }

/* ── Tab nav at top of admin panel (Companies / Agreements) ── */
#adminPanel .admin-tabs,
#adminPanel .ca-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--ds-border-default);
    margin-bottom: 32px;
    padding: 0;
}
#adminPanel .admin-tab,
#adminPanel .ca-tab {
    font-family: var(--ds-font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--ds-silver);
    padding: 14px 24px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all var(--ds-dur-fast) var(--ds-ease-out);
}
#adminPanel .admin-tab:hover,
#adminPanel .ca-tab:hover { color: var(--ds-bone); }
#adminPanel .admin-tab.active,
#adminPanel .ca-tab.active {
    color: var(--ds-bone);
    border-bottom-color: var(--ds-accent);
    font-weight: 600;
}

/* ── Stat cards (totals row + overview tab) ── */
#adminPanel .stat-card,
#adminPanel .ca-stat-card,
#adminPanel .ad-stat-card {
    background: var(--ds-iron);
    border: 1px solid var(--ds-border-subtle);
    border-radius: 8px;
    padding: 24px;
    transition: border-color var(--ds-dur-base) var(--ds-ease-out);
}
#adminPanel .stat-card:hover,
#adminPanel .ca-stat-card:hover,
#adminPanel .ad-stat-card:hover { border-color: var(--ds-border-default); }
/* Stat label = mono (it's a metadata label) */
#adminPanel .ad-stat-label {
    font-family: var(--ds-font-mono);
    font-size: 10px;
    font-weight: 500;
    color: var(--ds-alloy);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: block;
}
/* Stat value = Poppins with tabular nums (it's a number, but display text) */
#adminPanel .ad-stat-value {
    font-family: var(--ds-font-body);
    font-size: 32px;
    font-weight: 700;
    color: var(--ds-bone);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
/* Stat sub-line = mono (it's a metadata caption) */
#adminPanel .ad-stat-sub {
    font-family: var(--ds-font-mono);
    font-size: 10px;
    color: var(--ds-steel);
    margin-top: 8px;
    letter-spacing: 0.04em;
}

/* ── Tables ── */
#adminPanel table {
    font-family: var(--ds-font-body);
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}
/* Table headers = mono (they're column metadata labels) */
#adminPanel table thead th {
    font-family: var(--ds-font-mono);
    font-size: 10px;
    font-weight: 500;
    color: var(--ds-alloy);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ds-border-default);
    background: transparent;
}
#adminPanel table tbody tr {
    border-bottom: 1px solid var(--ds-border-subtle);
    transition: background var(--ds-dur-fast) var(--ds-ease-out);
}
#adminPanel table tbody tr:hover { background: var(--ds-forge); }
#adminPanel table tbody td {
    padding: 16px;
    color: var(--ds-bone);
    font-size: 13px;
    vertical-align: middle;
    font-family: var(--ds-font-body);
}

/* ── Buttons (override existing classes inside #adminPanel) ──
   ALL BUTTONS USE POPPINS per design system. Never mono. */
#adminPanel .btn {
    font-family: var(--ds-font-body);
    font-weight: 600;
    letter-spacing: 0.01em;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 4px;
    transition: all var(--ds-dur-fast) var(--ds-ease-out);
    text-decoration: none;
    padding: 12px 24px;
    font-size: 14px;
    min-height: 44px;
    white-space: nowrap;
}
#adminPanel .btn-sm {
    padding: 8px 14px;
    font-size: 12px;
    min-height: 36px;
    font-weight: 600;
}
#adminPanel .btn-magenta {
    background: var(--ds-accent);
    color: var(--ds-on-accent);
    border: 1px solid var(--ds-accent);
}
#adminPanel .btn-magenta:hover {
    background: #dbff33;
    border-color: #dbff33;
}
#adminPanel .btn-outline {
    background: transparent;
    color: var(--ds-bone);
    border: 1px solid var(--ds-border-strong);
}
#adminPanel .btn-outline:hover {
    border-color: var(--ds-bone);
    background: var(--ds-forge);
}
#adminPanel .btn-danger {
    background: transparent;
    color: var(--ds-error);
    border: 1px solid rgba(196, 66, 60, 0.4);
}
#adminPanel .btn-danger:hover {
    background: rgba(196, 66, 60, 0.12);
    border-color: var(--ds-error);
    color: #e85c55;
}

/* ── Inputs (Poppins for the input value, mono for labels) ── */
#adminPanel input[type="text"],
#adminPanel input[type="email"],
#adminPanel input[type="number"],
#adminPanel input[type="date"],
#adminPanel input[type="password"],
#adminPanel input[type="search"],
#adminPanel select,
#adminPanel textarea {
    font-family: var(--ds-font-body);
    font-size: 14px;
    color: var(--ds-bone);
    background: var(--ds-iron) !important;
    border: 1px solid var(--ds-border-default) !important;
    border-radius: 4px;
    padding: 12px 14px;
    outline: none;
    transition: border-color var(--ds-dur-fast) var(--ds-ease-out), box-shadow var(--ds-dur-fast) var(--ds-ease-out);
    min-height: 44px;
    box-sizing: border-box;
}
#adminPanel textarea { min-height: auto; padding: 12px 14px; line-height: 1.5; }
#adminPanel input::placeholder,
#adminPanel textarea::placeholder { color: var(--ds-alloy); }
#adminPanel input:focus,
#adminPanel select:focus,
#adminPanel textarea:focus {
    border-color: var(--ds-accent) !important;
    box-shadow: 0 0 0 3px var(--ds-accent-glow);
}
#adminPanel input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-height: 16px;
    accent-color: var(--ds-accent);
    cursor: pointer;
}
/* Form labels = mono (they're metadata labels) */
#adminPanel label {
    font-family: var(--ds-font-mono);
    font-size: 10px;
    font-weight: 500;
    color: var(--ds-alloy);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
}

/* ── Toolbar ──
   display:flex is set WITHOUT !important so JS can still toggle display:none
   when navigating into the detail view. The flex/gap behavior survives the
   reset because when JS sets style.display = '' the inline display is
   cleared and the browser falls back to this CSS default of flex.
   The flex-direction and gap need to be active whenever display is flex,
   so they keep !important. */
#adminPanel #adminListToolbar {
    display: flex;
    flex-direction: column !important;
    gap: 12px !important;
    background: var(--ds-iron) !important;
    border: 1px solid var(--ds-border-subtle) !important;
    border-radius: 8px;
    padding: 24px !important;
    margin-bottom: 24px;
}
#adminPanel #adminSearchInput {
    background: var(--ds-forge) !important;
    border: 1px solid var(--ds-border-default) !important;
    color: var(--ds-bone) !important;
    font-family: var(--ds-font-body) !important;
    font-size: 13px !important;
    min-height: 44px;
}
#adminPanel #adminSortSelect {
    background: var(--ds-forge) !important;
    border: 1px solid var(--ds-border-default) !important;
    color: var(--ds-bone) !important;
    font-family: var(--ds-font-body);
    font-size: 13px !important;
    min-height: 44px;
    padding: 0 14px !important;
}

/* ── Filter chips ──
   Chip labels (the "Plan:" / "Status:" prefix) = mono.
   Chip buttons themselves = Poppins (they're interactive buttons). */
#adminPanel #adminFilterChips > div { gap: 8px !important; }
#adminPanel #adminFilterChips span {
    font-family: var(--ds-font-mono) !important;
    font-size: 9px !important;
    color: var(--ds-alloy) !important;
    letter-spacing: 0.08em !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
}
#adminPanel #adminFilterChips button {
    padding: 6px 14px !important;
    border-radius: 100px !important;
    font-family: var(--ds-font-body) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    border: 1px solid var(--ds-border-default) !important;
    background: transparent !important;
    color: var(--ds-silver) !important;
    transition: all var(--ds-dur-fast) var(--ds-ease-out);
    cursor: pointer;
}
#adminPanel #adminFilterChips button:hover { border-color: var(--ds-border-strong) !important; }
/* Active chip: uses .ad-chip-active class set by admin.js _renderAdminFilterChips */
#adminPanel #adminFilterChips button.ad-chip-active {
    background: var(--ds-accent) !important;
    color: var(--ds-on-accent) !important;
    border-color: var(--ds-accent) !important;
    font-weight: 600 !important;
}

/* ── Badges (status / plan) ──
   Badge text = mono (it's a metadata label per design system). */
#adminPanel .ad-badge {
    font-family: var(--ds-font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    line-height: 1.4;
}
#adminPanel .ad-badge-accent { background: var(--ds-accent); color: var(--ds-on-accent); }
#adminPanel .ad-badge-active {
    background: rgba(61, 154, 80, 0.12);
    color: #4dbb63;
    border-color: rgba(61, 154, 80, 0.3);
}
#adminPanel .ad-badge-trialing {
    background: rgba(74, 142, 194, 0.12);
    color: #6aa9d9;
    border-color: rgba(74, 142, 194, 0.3);
}
#adminPanel .ad-badge-warning {
    background: rgba(212, 168, 67, 0.12);
    color: #e0bb5c;
    border-color: rgba(212, 168, 67, 0.3);
}
#adminPanel .ad-badge-error {
    background: rgba(196, 66, 60, 0.12);
    color: #e85c55;
    border-color: rgba(196, 66, 60, 0.3);
}
#adminPanel .ad-badge-neutral {
    background: var(--ds-graphite);
    color: var(--ds-silver);
    border-color: var(--ds-border-default);
}
#adminPanel .ad-badge-plan-enterprise { background: var(--ds-accent); color: var(--ds-on-accent); }
#adminPanel .ad-badge-plan-pro {
    background: rgba(204, 255, 0, 0.12);
    color: var(--ds-accent);
    border-color: rgba(204, 255, 0, 0.3);
}
#adminPanel .ad-badge-plan-starter {
    background: var(--ds-graphite);
    color: var(--ds-bone);
}
#adminPanel .ad-badge-plan-free {
    background: transparent;
    color: var(--ds-silver);
    border-color: var(--ds-border-default);
}

/* ── Section header (mono uppercase label inside cards) ── */
#adminPanel .ad-section-h {
    font-family: var(--ds-font-mono);
    font-size: 10px;
    font-weight: 500;
    color: var(--ds-alloy);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 28px 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ds-border-subtle);
}
#adminPanel .ad-section-h:first-child { margin-top: 0; }

/* ── Detail view layout ── */
#adminPanel #adminDetailView { padding-top: 20px; }
#adminPanel #adminDetailHeader {
    margin-bottom: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--ds-border-default);
}
#adminPanel #adminDetailHeader h2 {
    font-family: var(--ds-font-body);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ds-bone);
}
#adminPanel #adminDetailTabsNav {
    display: flex;
    gap: 0 !important;
    border-bottom: 1px solid var(--ds-border-default) !important;
    margin-bottom: 32px !important;
}
#adminPanel #adminDetailTabsNav button {
    font-family: var(--ds-font-body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 14px 24px !important;
    background: none !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    color: var(--ds-silver) !important;
    cursor: pointer;
    transition: all var(--ds-dur-fast) var(--ds-ease-out);
}
#adminPanel #adminDetailTabsNav button:hover { color: var(--ds-bone) !important; }
/* Active tab: uses .active class set by admin.js _renderAdminDetailTabsNav */
#adminPanel #adminDetailTabsNav button.active {
    color: var(--ds-bone) !important;
    border-bottom-color: var(--ds-accent) !important;
    font-weight: 600 !important;
}

/* ── Modals (simple admin modal + change primary admin modal) ── */
#simpleAdminModal,
#changePrimaryModal {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(8px);
}
#simpleAdminModalBody,
#changePrimaryModal > div {
    background: var(--ds-iron) !important;
    border: 1px solid var(--ds-border-strong) !important;
    border-radius: 8px !important;
    padding: 32px !important;
    box-shadow: var(--ds-shadow-lg);
    font-family: var(--ds-font-body);
    color: var(--ds-bone);
}
#simpleAdminModalBody h3,
#changePrimaryModal h3 {
    font-family: var(--ds-font-body);
    font-size: 18px !important;
    font-weight: 700;
    color: var(--ds-bone);
    letter-spacing: -0.01em;
    margin-bottom: 16px !important;
}
/* Modal labels = mono */
#simpleAdminModalBody label,
#changePrimaryModal label {
    font-family: var(--ds-font-mono);
    font-size: 10px;
    font-weight: 500;
    color: var(--ds-alloy);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
}
#simpleAdminModalBody input,
#simpleAdminModalBody select,
#simpleAdminModalBody textarea,
#changePrimaryModal input,
#changePrimaryModal select {
    background: var(--ds-forge) !important;
    border: 1px solid var(--ds-border-default) !important;
    color: var(--ds-bone) !important;
    font-family: var(--ds-font-body);
    font-size: 13px;
    padding: 10px 12px !important;
    border-radius: 4px;
    min-height: 40px;
}
#simpleAdminModalBody input:focus,
#simpleAdminModalBody select:focus,
#simpleAdminModalBody textarea:focus {
    border-color: var(--ds-accent) !important;
    box-shadow: 0 0 0 3px var(--ds-accent-glow);
}
/* Modal monospace blocks (for signup links / magic links shown after success) */
#simpleAdminModalBody div[id$="Link"] {
    font-family: var(--ds-font-mono) !important;
    font-size: 10px !important;
    line-height: 1.6;
}

/* ── Mono utility classes for explicit metadata text ── */
#adminPanel .ad-mono { font-family: var(--ds-font-mono); }
#adminPanel .ad-mono-num { font-family: var(--ds-font-mono); font-variant-numeric: tabular-nums; }
#adminPanel .ad-eyebrow {
    font-family: var(--ds-font-mono);
    font-size: 10px;
    font-weight: 500;
    color: var(--ds-alloy);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════════
   When the user toggles to light mode the rest of the app already
   responds via [data-theme="light"] selectors on existing tokens.
   The design system tokens above default to dark surfaces -- this
   block flips them to light surfaces so the admin panel inherits
   the rest of the app's theme switch.

   Token semantic flip:
   --ds-carbon (page bg)        : near black -> paper white
   --ds-forge (subtle surface)  : dark      -> very light gray
   --ds-iron (card bg)          : medium dk -> pure white
   --ds-graphite (heavier bg)   : darker    -> light gray
   --ds-steel (low-contrast)    : dark gray -> light gray
   --ds-alloy (label gray)      : mid gray  -> mid gray (kept)
   --ds-silver (secondary text) : light gry -> mid-dark gray
   --ds-bone (primary text)     : near wht  -> near black

   Borders flip from rgba(255,255,255,...) to rgba(0,0,0,...) so they
   are visible on light surfaces. Shadows go from heavy dark to subtle
   dark (smaller alpha) since light surfaces don't need as much depth.

   The accent (lime CCFF00) stays the same because the design system
   pairs it with carbon-dark text in both modes, which is readable on
   both surfaces.
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="light"] {
    --ds-carbon: #FAF9F7;
    --ds-forge: #F5F3EF;
    --ds-iron: #FFFFFF;
    --ds-graphite: #E8E8E8;
    --ds-steel: #AAAAAA;
    --ds-alloy: #888888;
    --ds-silver: #555555;
    --ds-bone: #0A0A0A;
    --ds-border-subtle: rgba(0, 0, 0, 0.06);
    --ds-border-default: rgba(0, 0, 0, 0.10);
    --ds-border-strong: rgba(0, 0, 0, 0.18);
    --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --ds-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --ds-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.15);
    --ds-accent-glow: rgba(204, 255, 0, 0.20);
}

/* Light mode tweaks for translucent badge backgrounds.
   Dark mode uses rgba(green/blue/amber/red, 0.12) which looks fine on
   dark cards. On white cards 0.12 alpha is too pale -- bump to 0.18 and
   shift the text colors slightly darker so they read on white. */
[data-theme="light"] #adminPanel .ad-badge-active {
    background: rgba(61, 154, 80, 0.14);
    color: #2d7a3d;
    border-color: rgba(61, 154, 80, 0.35);
}
[data-theme="light"] #adminPanel .ad-badge-trialing {
    background: rgba(74, 142, 194, 0.14);
    color: #2c6a98;
    border-color: rgba(74, 142, 194, 0.35);
}
[data-theme="light"] #adminPanel .ad-badge-warning {
    background: rgba(212, 168, 67, 0.18);
    color: #8a6a1f;
    border-color: rgba(212, 168, 67, 0.45);
}
[data-theme="light"] #adminPanel .ad-badge-error {
    background: rgba(196, 66, 60, 0.14);
    color: #962d27;
    border-color: rgba(196, 66, 60, 0.35);
}
[data-theme="light"] #adminPanel .ad-badge-neutral {
    background: var(--ds-graphite);
    color: var(--ds-silver);
    border-color: var(--ds-border-default);
}
[data-theme="light"] #adminPanel .ad-badge-plan-pro {
    background: rgba(204, 255, 0, 0.20);
    color: #5a7300;
    border-color: rgba(204, 255, 0, 0.40);
}

/* The btn-magenta (now lime) has carbon text in both modes -- works as is.
   The btn-outline border on light surfaces needs to be slightly darker
   so it's actually visible against white cards. */
[data-theme="light"] #adminPanel .btn-outline {
    border-color: rgba(0, 0, 0, 0.18);
}
[data-theme="light"] #adminPanel .btn-outline:hover {
    border-color: var(--ds-bone);
    background: var(--ds-forge);
}

/* Lime elements on white backgrounds need a dark grey border for definition.
   Without this they look like floating chips with no edge -- the lime CCFF00
   blends into the warm paper background and the eye loses them. The border
   gives them a clear boundary that reads on white surfaces. */
[data-theme="light"] #adminPanel .btn-magenta {
    border: 1px solid rgba(0, 0, 0, 0.35);
}
[data-theme="light"] #adminPanel .btn-magenta:hover {
    border-color: rgba(0, 0, 0, 0.55);
}
[data-theme="light"] #adminPanel .ad-badge-accent,
[data-theme="light"] #adminPanel .ad-badge-plan-enterprise {
    border: 1px solid rgba(0, 0, 0, 0.35);
}
[data-theme="light"] #adminPanel #adminFilterChips button.ad-chip-active {
    border-color: rgba(0, 0, 0, 0.35) !important;
}

/* Modal backdrop: keep the same dark blur regardless of theme.
   The modal CARD itself flips to white via the token override above. */
[data-theme="light"] #simpleAdminModal,
[data-theme="light"] #changePrimaryModal {
    background: rgba(0, 0, 0, 0.5) !important;
}