@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap);
/* Local/dev backup. Production HTML (index.html) loads Public Sans + Inter — webpack
   can drop this nested @import, which made dvi1 fall back to Arial (no nav 600 weight). */

/* Type + color from SecurEnds_Modern_UI_Cursor/19-add-application.html */
.securends,
:root {
  --se-navy: #ffffff;
  --se-navy-2: #f3f6f8;
  --se-navy-3: #e8eef2;
  --se-nav-parent: #1e293b;
  --se-nav-text: #475569;
  --se-nav-muted: #64748b;
  --se-nav-icon: #475569;
  --se-nav-border: #e2e8f0;
  --se-nav-edge: 1px solid #e2e8f0;
  --se-nav-logo-filter: brightness(0) invert(1);
  --se-nav-scroll-thumb: #94a3b8;
  --se-nav-active-bg: #dbeafe;
  --se-nav-active-text: #17457e;
  --se-logo-bg: #17457e;
  --se-brand: #17457e;
  --se-brand-hover: #10365f;
  --se-brand-fill: var(--se-brand);
  --se-brand-fill-hover: var(--se-brand-hover);
  --se-btn-bg: var(--se-brand-fill);
  --se-btn-bg-hover: var(--se-brand-fill-hover);
  --se-btn-fg: #ffffff;
  --se-brand-tint: #eaf0f8;
  --se-brand-line: #c3d5ea;
  --se-raise: #f2f4f6;
  --se-page: #f8fafc;
  --se-card: #ffffff;
  --se-ink: #0f172a;
  --se-ink-2: #475569;
  --se-ink-3: #94a3b8;
  --se-line: #e2e8f0;
  --se-line-soft: #eef0f3;
  --se-line-subtle: var(--se-line-soft);
  --se-row-hover: #eaf0f8;
  --se-ok: #12866a;
  --se-ok-tint: #e6f3ef;
  --se-warn: #b0710c;
  --se-warn-tint: #fbf1df;
  --se-risk: #b23a55;
  --se-risk-tint: #fee2e2;
  --se-info: #3b82f6;
  --se-accent: #06b6d4;
  --se-secondary: #17457e;
  --se-r: 10px;
  --se-r-sm: 8px;
  --se-r-card: 14px;
  --se-r-modal: 16px;
  --se-r-pill: 20px;
  --se-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  --se-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --se-shadow-lg: 0 20px 45px rgba(15, 23, 42, 0.12);
  /* Font A/B: swap --se-sans to compare. Inter kept loaded for instant rollback.
     Do not put generic sans-serif before system UI fonts — if Public Sans fails to load
     (production @import drop), Arial has no real 600 and left-nav bold disappears. */
  --se-sans-inter: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --se-sans-public: "Public Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* --se-sans: var(--se-sans-inter); */
  --se-sans: var(--se-sans-public);
  --se-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --se-t-page: 32px;
  --se-t-title: 22px;
  --se-t-page-head: 16px;
  --se-t-card: 18px;
  --se-t-body: 14px;
  --se-t-sm: 13.5px;
  --se-t-xs: 12px;
  --se-t-label: 10.5px;
  --se-ease: 180ms ease;
  --se-z-header: 1029;
  --se-z-dropdown: 1100;
  --se-select-caret: url(/build/assets/media/3ee5077622847646e44b.3ee50776.svg);
  --se-select-caret-dark: url(/build/assets/media/00d1b1f67127ac1f7052.00d1b1f6.svg);
  /* Above horizontal nav (1100) so drawer headers are not covered on dvi1. */
  --se-z-modal: 1200;
  --se-z-toast: 20000;
  --se-modal-scrim: rgba(15, 23, 42, 0.45);
  --se-app-header: 60px;
  --se-breadcrumb-h: 32px;
  --se-sticky-top: calc(var(--se-app-header) + var(--se-breadcrumb-h));
  --se-sidebar-w: 230px;
  --se-sidebar-mini-w: 70px;
  --se-logo-strip-h: 56px;
  --se-horiz-nav-h: 56px;
  --se-hnav-sub-h: 36px;
  --se-hnav-bar-h: 48px;
  --se-header-inset-x: clamp(12px, 1.8vw, 24px);
  --se-header-pad-x: clamp(12px, 1.8vw, 24px);
  /* Resolution caps. 100% keeps the 768 foundation. resolution.css sets px caps. */
  --se-page-max: 100%;
  --se-page-max-laptop: 1140px;
  --se-page-max-desktop: 1440px;
  /* Canvas inset under sticky breadcrumb. 5px = ~25% of the former 20px gap. */
  --se-page-pad-top: 5px;
  --se-page-pad-x: var(--se-header-inset-x);
  --se-page-pad-bottom: 32px;
  --se-guide-tab-w: 36px;
  --se-page-toolbar: 56px;
  --se-table-colhead: 36px;
  --se-table-filter-h: 36px;
  --se-table-header-bg: #f8fafc;
  --se-table-header-ink: #334155;
  --se-table-ink: #0f172a;
  --se-table-muted: #64748b;
  --se-table-line: #e2e8f0;
  --se-table-hover: #eff6ff;
  --se-table-selected: #dbeafe;
  --se-table-max-h: 600px;
  --se-table-action-w: 74px; /* 3-dots Action/ACTIONS; 72px + 3%. Not UAR flipswitch ACTION. */
  --se-camp-name-w: 240px; /* /listOfCampaign NAME min; column grows to fill leftover width */
  --se-camp-progress-w: 105px; /* /listOfCampaign PROGRESS; 30% narrower than former 150px */
  --se-table-freeze-1: 74px;
  --se-table-freeze-2: 200px;
  --se-table-row-h: 48px;
  --se-loader-size: 36px;
  --se-loader-track: #e2e8f0;
  --se-loader-scrim: rgba(248, 250, 252, 0.78);
  /* Approve / Pending / Revoke — same semantic colors as elections buttons (light + dark) */
  --se-chart-approved: var(--se-ok);
  --se-chart-pending: var(--se-warn);
  --se-chart-revoked: var(--se-risk);
  --se-chart-cancelled: var(--se-risk);
  --se-chart-completed: var(--se-ok);
  --se-chart-inprogress: var(--se-info);
  --se-chart-notstarted: var(--se-ink-3);
  --se-chart-managers: rgb(255, 99, 132);
  --se-chart-employees: rgb(16, 196, 105);
  --se-chart-credentials: rgb(54, 162, 235);
  --se-chart-entitlements: rgb(51, 122, 183);
  --se-metric-1: #5b8def;
  --se-metric-2: #9b8ec4;
  --se-metric-3: #3db88a;
  --se-metric-4: #e06b6b;
  --se-metric-5: #c4a35a;
  --se-metric-6: #e07a4c;
  --se-metric-7: #2e8b57;
  --se-metric-8: #d45a8a;

  /* Access Insights chips (Direct Elections). Match attached pastel pills. */
  --se-insight-admin-bg: #fce4ea;
  --se-insight-admin-fg: #e11d48;
  --se-insight-privileged-bg: #fce4ea;
  --se-insight-privileged-fg: #e11d48;
  --se-insight-sod-bg: #fce4ea;
  --se-insight-sod-fg: #e11d48;
  --se-insight-terminated-bg: #fce4ea;
  --se-insight-terminated-fg: #e11d48;
  --se-insight-new-bg: #ede4f5;
  --se-insight-new-fg: #7c3aed;
  --se-insight-dormant-bg: #f6e8c8;
  --se-insight-dormant-fg: #b45309;
  --se-insight-regranted-bg: #fef3c7;
  --se-insight-regranted-fg: #a16207;
  --se-insight-peer-bg: #d1fae5;
  --se-insight-peer-fg: #047857;
  --se-insight-none-bg: #d1fae5;
  --se-insight-none-fg: #047857;

  /* ------------------------------------------------------------------
     Semantic theme aliases (light defaults). Dark mode remaps these in
     themes/color-mode.css. Prefer semantic names for new CSS; keep --se-*
     for existing overlays. Vertical + horizontal nav share these.
     ------------------------------------------------------------------ */
  --bg-app: var(--se-page);
  --bg-app-deep: #f1f5f9;
  --bg-surface: var(--se-card);
  --bg-surface-secondary: var(--se-raise);
  --bg-surface-elevated: var(--se-card);
  --bg-navigation: var(--se-navy);
  --bg-navigation-active: var(--se-nav-active-bg);
  --bg-header: var(--se-card);
  --bg-input: var(--se-card);
  --se-input: var(--bg-input);
  --bg-table-header: var(--se-table-header-bg);
  --bg-table-row: var(--se-card);
  --bg-table-row-hover: var(--se-table-hover);
  --border-default: var(--se-line);
  --border-strong: #cbd5e1;
  --text-primary: var(--se-ink);
  --text-secondary: var(--se-ink-2);
  --text-muted: var(--se-ink-3);
  --text-disabled: #94a3b8;
  --color-primary: var(--se-brand);
  --color-primary-hover: var(--se-brand-hover);
  --color-primary-active: var(--se-brand-hover);
  --color-success: var(--se-ok);
  --color-warning: var(--se-warn);
  --color-error: var(--se-risk);
  --color-info: var(--se-info);
  --focus-ring: rgba(59, 130, 246, 0.35);
  --overlay-scrim: var(--se-modal-scrim);
  --icon-default: var(--se-ink-2);
  --icon-primary: var(--se-brand);
}

/* html-only snapshot so dark mode can mix without a cycle on .securends */
:root {
  --se-brand-base: #17457e;
  --se-brand-hover-base: #10365f;
}

/* Default theme. Other themes override variables only (see UI_MODERNIZATION_TEMPLATE). */
[data-se-theme="enterprise"] {
  /* inherits tokens.css */
}

/* Global color palettes — variables only. Add new palettes here.
   Use html + .securends so these beat tokens.css `.securends { --se-brand }`.
   Theme color updates brand accents + logo strip (--se-logo-bg) only.
   Left nav menu (--se-navy) is white in light mode for every palette. */

/* Light: white drawer on every preset. Dark mode remaps --se-navy in color-mode.css. */
html[data-se-theme],
.securends[data-se-theme] {
  --se-navy: #ffffff;
  --se-navy-2: #f3f6f8;
  --se-navy-3: #e8eef2;
  --bg-navigation: #ffffff;
}

/* Navy — former White palette (navy brand + navy logo strip) */
html[data-se-theme="navy"],
.securends[data-se-theme="navy"] {
  --se-brand: #17457e;
  --se-brand-hover: #10365f;
  --se-brand-tint: #eaf0f8;
  --se-brand-line: #c3d5ea;
  --se-raise: #f2f4f6;
  --se-row-hover: #eaf0f8;
  --se-secondary: #17457e;
  --se-logo-bg: #17457e;
  --se-nav-logo-filter: brightness(0) invert(1);
  --se-nav-active-bg: #dbeafe;
  --se-nav-active-text: #17457e;
  --se-page: #f8fafc;
  --se-card: #ffffff;
  --se-ink: #0f172a;
  --se-ink-2: #475569;
  --se-ink-3: #94a3b8;
  --se-line: #e2e8f0;
  --se-table-hover: #eff6ff;
  --se-table-selected: #dbeafe;
}

html[data-se-theme="blue"],
.securends[data-se-theme="blue"] {
  --se-brand: #60a5fa;
  --se-brand-hover: #3b82f6;
  --se-brand-tint: #dbeafe;
  --se-brand-line: #93c5fd;
  --se-row-hover: #eff6ff;
  --se-secondary: #93c5fd;
  --se-logo-bg: #0f172a;
  --se-nav-logo-filter: brightness(0) invert(1);
  --se-nav-active-bg: #dbeafe;
  --se-nav-active-text: #1d4ed8;
}

html[data-se-theme="pink"],
.securends[data-se-theme="pink"] {
  --se-brand: #f472b6;
  --se-brand-hover: #ec4899;
  --se-brand-tint: #fce7f3;
  --se-brand-line: #f9a8d4;
  --se-row-hover: #fdf2f8;
  --se-secondary: #f9a8d4;
  --se-logo-bg: #500724;
  --se-nav-logo-filter: brightness(0) invert(1);
  --se-nav-active-bg: #fce7f3;
  --se-nav-active-text: #9d174d;
}

/* Teal — SaaS chrome; white logo strip + charcoal lockup. White stays navy. */
html[data-se-theme="teal"],
.securends[data-se-theme="teal"] {
  --se-brand: #48beb4;
  --se-brand-hover: #3aa39b;
  --se-brand-tint: #e6f7f6;
  --se-brand-line: #9dd9d4;
  --se-raise: #f2f4f6;
  --se-row-hover: #eefaf8;
  --se-secondary: #48beb4;
  --se-logo-bg: #ffffff;
  --se-nav-logo-filter: none;
  --se-nav-active-bg: #e6f7f6;
  --se-nav-active-text: #1f7a74;
  --se-navy: #ffffff;
  --se-navy-2: #f3f6f8;
  --se-navy-3: #e8eef2;
  --se-nav-parent: #1e293b;
  --se-nav-text: #475569;
  --se-page: #f8f9fb;
  --se-card: #ffffff;
  --se-ink: #0f172a;
  --se-ink-2: #475569;
  --se-ink-3: #94a3b8;
  --se-line: #e8eaed;
  --se-table-header-bg: #f2f4f6;
  --se-table-hover: #eefaf8;
  --se-table-selected: #d5f0ed;
  --bg-header: #ffffff;
  --bg-navigation: #ffffff;
}

html[data-se-theme="green"],
.securends[data-se-theme="green"] {
  --se-brand: #34d399;
  --se-brand-hover: #10b981;
  --se-brand-tint: #d1fae5;
  --se-brand-line: #6ee7b7;
  --se-row-hover: #ecfdf5;
  --se-secondary: #6ee7b7;
  --se-logo-bg: #022c22;
  --se-nav-logo-filter: brightness(0) invert(1);
  --se-nav-active-bg: #d1fae5;
  --se-nav-active-text: #047857;
}

html[data-se-theme="orange"],
.securends[data-se-theme="orange"] {
  --se-brand: #fb923c;
  --se-brand-hover: #f97316;
  --se-brand-tint: #ffedd5;
  --se-brand-line: #fdba74;
  --se-row-hover: #fff7ed;
  --se-secondary: #fdba74;
  --se-logo-bg: #7c2d12;
  --se-nav-logo-filter: brightness(0) invert(1);
  --se-nav-active-bg: #ffedd5;
  --se-nav-active-text: #c2410c;
}

/* B&W — monochrome accents; fixed light nav; dark logo strip */
html[data-se-theme="bw"],
.securends[data-se-theme="bw"] {
  --se-brand: #0f172a;
  --se-brand-hover: #1e293b;
  --se-brand-tint: #e2e8f0;
  --se-brand-line: #cbd5e1;
  --se-raise: #e2e8f0;
  --se-row-hover: #e2e8f0;
  --se-secondary: #334155;
  --se-logo-bg: #0f172a;
  --se-nav-logo-filter: brightness(0) invert(1);
  --se-nav-active-bg: #e2e8f0;
  --se-nav-active-text: #0f172a;
  --se-page: #f1f5f9;
  --se-card: #ffffff;
  --se-ink: #0f172a;
  --se-ink-2: #475569;
  --se-ink-3: #94a3b8;
  --se-line: #e2e8f0;
}

/* White (default) — navy brand; white logo strip; white left nav. */
html[data-se-theme="white"],
.securends[data-se-theme="white"] {
  --se-brand: #17457e;
  --se-brand-hover: #10365f;
  --se-brand-tint: #eaf0f8;
  --se-brand-line: #c3d5ea;
  --se-raise: #f2f4f6;
  --se-row-hover: #eaf0f8;
  --se-secondary: #17457e;
  --se-logo-bg: #ffffff;
  --se-nav-logo-filter: brightness(0);
  --se-nav-active-bg: #dbeafe;
  --se-nav-active-text: #17457e;
  --se-page: #f8fafc;
  --se-card: #ffffff;
  --se-ink: #0f172a;
  --se-ink-2: #475569;
  --se-ink-3: #94a3b8;
  --se-line: #e2e8f0;
  --se-table-hover: #eff6ff;
  --se-table-selected: #dbeafe;
}

/* Keep enterprise alias for older markup → sky pastel blue */
html[data-se-theme="enterprise"],
.securends[data-se-theme="enterprise"] {
  --se-brand: #60a5fa;
  --se-brand-hover: #3b82f6;
  --se-brand-tint: #dbeafe;
  --se-logo-bg: #0f172a;
  --se-nav-logo-filter: brightness(0) invert(1);
  --se-nav-active-bg: #dbeafe;
  --se-nav-active-text: #1d4ed8;
}

/* Light-mode solid brand snapshot on <html> only (literals, not var(--se-brand)).
   Dark mode remaps --se-brand to #dbeafe and uses these for filled buttons. */
html[data-se-theme="navy"],
html[data-se-theme="white"] {
  --se-brand-base: #17457e;
  --se-brand-hover-base: #10365f;
}

html[data-se-theme="teal"] {
  --se-brand-base: #48beb4;
  --se-brand-hover-base: #3aa39b;
}

html[data-se-theme="blue"],
html[data-se-theme="enterprise"] {
  --se-brand-base: #60a5fa;
  --se-brand-hover-base: #3b82f6;
}

html[data-se-theme="pink"] {
  --se-brand-base: #f472b6;
  --se-brand-hover-base: #ec4899;
}

html[data-se-theme="green"] {
  --se-brand-base: #34d399;
  --se-brand-hover-base: #10b981;
}

html[data-se-theme="orange"] {
  --se-brand-base: #fb923c;
  --se-brand-hover-base: #f97316;
}

html[data-se-theme="bw"] {
  --se-brand-base: #0f172a;
  --se-brand-hover-base: #1e293b;
}

/* Light / dark color mode — centralized semantic surfaces.
   Dark mode: --se-brand is #dbeafe (icons/links). Buttons use --se-btn-bg
   (#dbeafe) and --se-btn-fg (#333) like Cursor. Light mode is unchanged.
   Boot sets data-se-mode + data-theme + .dark on <html> before paint.
   Nav layout (vertical|horizontal) must NEVER fork these colors. */

html[data-se-mode="dark"],
html[data-theme="dark"],
html.dark,
.securends[data-se-mode="dark"],
.securends[data-theme="dark"] {
  color-scheme: dark;

  /* Semantic dark palette (enterprise IAM) */
  --bg-app-deep: #080d17;
  --bg-app: #0b1220;
  --bg-surface: #111827;
  --bg-surface-secondary: #151e2e;
  --bg-surface-elevated: #1a2436;
  --bg-navigation: #0f1726;
  --bg-navigation-active: #172a46;
  --bg-header: #0f1726;
  --bg-input: #111b2b;
  --se-input: var(--bg-input);
  --bg-table-header: #151f30;
  --bg-table-row: #111827;
  --bg-table-row-hover: #172235;
  --border-default: #263348;
  --border-strong: #334155;
  --text-primary: #e5e7eb;
  --text-secondary: #a7b0c0;
  --text-muted: #6f7b8f;
  --text-disabled: #4b5568;
  --color-primary: var(--se-brand);
  --color-primary-hover: var(--se-brand-hover);
  --color-primary-active: var(--se-brand-hover);
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #38bdf8;
  --focus-ring: rgba(59, 130, 246, 0.35);
  --overlay-scrim: rgba(2, 6, 23, 0.72);
  --icon-default: #94a3b8;
  --icon-primary: #dbeafe;
  /* Connector TYPE cell logo plate (dark PNGs need a light pad) */
  --se-type-logo-plate: #ffffff;

  /* Legacy --se-* mapped onto semantic (existing overlays keep working) */
  --se-page: var(--bg-app);
  --se-card: var(--bg-surface);
  --se-raise: var(--bg-surface-secondary);
  --se-ink: var(--text-primary);
  --se-ink-2: var(--text-secondary);
  --se-ink-3: var(--text-muted);
  --se-line: var(--border-default);
  --se-line-soft: var(--bg-surface-secondary);
  --se-line-subtle: var(--border-default);
  --se-row-hover: var(--bg-table-row-hover);
  --se-brand-tint: color-mix(in srgb, var(--se-brand) 24%, var(--bg-surface));
  --se-brand-line: color-mix(in srgb, var(--se-brand) 40%, var(--bg-surface));
  --se-ok: var(--color-success);
  --se-ok-tint: rgba(16, 185, 129, 0.12);
  --se-warn: var(--color-warning);
  --se-warn-tint: rgba(245, 158, 11, 0.12);
  --se-risk: var(--color-error);
  --se-risk-tint: rgba(239, 68, 68, 0.12);
  /* Charts: Approve / Pending / Revoke track semantic tokens in dark too */
  --se-chart-approved: var(--se-ok);
  --se-chart-pending: var(--se-warn);
  --se-chart-revoked: var(--se-risk);
  --se-info: var(--color-info);
  --se-table-header-bg: var(--bg-table-header);
  --se-table-header-ink: var(--text-secondary);
  --se-table-ink: var(--text-primary);
  --se-table-muted: var(--text-muted);
  --se-table-line: var(--border-default);
  --se-table-hover: var(--bg-table-row-hover);
  --se-table-selected: var(--bg-navigation-active);
  --se-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  --se-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --se-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.35);
  --se-loader-track: var(--border-strong);
  --se-loader-scrim: rgba(11, 18, 32, 0.78);
  --se-modal-scrim: var(--overlay-scrim);

  /* Vertical sidebar + horizontal nav share the same nav tokens */
  --se-navy: var(--bg-navigation);
  --se-navy-2: var(--bg-surface-secondary);
  --se-navy-3: var(--bg-surface-elevated);
  --se-nav-parent: var(--text-primary);
  --se-nav-text: var(--text-secondary);
  --se-nav-muted: var(--text-muted);
  --se-nav-icon: var(--text-secondary);
  --se-nav-border: var(--border-default);
  --se-nav-edge: 1px solid var(--border-default);
  --se-nav-scroll-thumb: var(--border-strong);
  --se-nav-active-bg: var(--bg-navigation-active);
  --se-nav-active-text: #ffffff;
  --se-logo-bg: #000000;
  --se-nav-logo-filter: none;

  /* Portaled chrome (modals) inherit from html — literal, no var() cycle.
     Buttons: ice-blue fill + dark label (Cursor-style). */
  --se-brand: #dbeafe;
  --se-brand-hover: #bfdbfe;
  --se-brand-fill: #dbeafe;
  --se-brand-fill-hover: #bfdbfe;
  --se-btn-bg: #dbeafe;
  --se-btn-bg-hover: #bfdbfe;
  --se-btn-fg: #333333;

  --se-insight-admin-bg: rgba(225, 29, 72, 0.22);
  --se-insight-admin-fg: #fb7185;
  --se-insight-privileged-bg: rgba(225, 29, 72, 0.22);
  --se-insight-privileged-fg: #fb7185;
  --se-insight-sod-bg: rgba(225, 29, 72, 0.22);
  --se-insight-sod-fg: #fb7185;
  --se-insight-terminated-bg: rgba(225, 29, 72, 0.22);
  --se-insight-terminated-fg: #fb7185;
  --se-insight-new-bg: rgba(124, 58, 237, 0.22);
  --se-insight-new-fg: #c4b5fd;
  --se-insight-dormant-bg: rgba(180, 83, 9, 0.22);
  --se-insight-dormant-fg: #fcd34d;
  --se-insight-regranted-bg: rgba(202, 138, 4, 0.22);
  --se-insight-regranted-fg: #fde047;
  --se-insight-peer-bg: rgba(16, 185, 129, 0.18);
  --se-insight-peer-fg: #6ee7b7;
  --se-insight-none-bg: rgba(16, 185, 129, 0.18);
  --se-insight-none-fg: #6ee7b7;

  --se-chart-notstarted: var(--text-muted);
}

/* Beat palette `.securends[data-se-theme="…"]` surface vars (equal specificity otherwise) */
html[data-se-mode="dark"] .securends[data-se-theme],
html[data-se-mode="dark"][data-se-theme] .securends,
html[data-se-mode="dark"] .securends,
html.dark .securends,
html[data-theme="dark"] .securends,
.securends[data-se-mode="dark"][data-se-theme] {
  --se-page: var(--bg-app);
  --se-card: var(--bg-surface);
  --se-raise: var(--bg-surface-secondary);
  --se-ink: var(--text-primary);
  --se-ink-2: var(--text-secondary);
  --se-ink-3: var(--text-muted);
  --se-line: var(--border-default);
  --se-line-soft: var(--bg-surface-secondary);
  --se-line-subtle: var(--border-default);
  --se-table-header-bg: var(--bg-table-header);
  --se-table-header-ink: var(--text-secondary);
  --se-table-ink: var(--text-primary);
  --se-table-muted: var(--text-muted);
  --se-table-line: var(--border-default);
  --se-navy: var(--bg-navigation);
  --se-navy-2: var(--bg-surface-secondary);
  --se-navy-3: var(--bg-surface-elevated);
  --se-nav-parent: var(--text-primary);
  --se-nav-text: var(--text-secondary);
  --se-nav-muted: var(--text-muted);
  --se-nav-icon: var(--text-secondary);
  --se-nav-border: var(--border-default);
  --se-nav-edge: 1px solid var(--border-default);
  --se-nav-scroll-thumb: var(--border-strong);
  --se-nav-active-bg: var(--bg-navigation-active);
  --se-nav-active-text: #ffffff;
  --se-logo-bg: #000000;
  --se-nav-logo-filter: none;

  /* Dark brand: ice-blue accents + Cursor-style buttons (#dbeafe / #333). */
  --se-brand: #dbeafe;
  --se-brand-hover: #bfdbfe;
  --se-brand-fill: #dbeafe;
  --se-brand-fill-hover: #bfdbfe;
  --se-btn-bg: #dbeafe;
  --se-btn-bg-hover: #bfdbfe;
  --se-btn-fg: #333333;
  --se-secondary: var(--se-brand);
  --se-brand-tint: color-mix(in srgb, var(--se-brand) 18%, var(--bg-surface));
  --se-brand-line: color-mix(in srgb, var(--se-brand) 36%, var(--bg-surface));
  --color-primary: var(--se-brand-fill);
  --color-primary-hover: var(--se-brand-fill-hover);
  --icon-primary: var(--se-brand);
}

html[data-se-mode="dark"],
html[data-theme="dark"],
html.dark,
html[data-se-mode="dark"] body,
html[data-theme="dark"] body,
html.dark body,
/* Backup: mode on .securends only (if html attr ever missing) */
html:has(.securends[data-se-mode="dark"]),
html:has(.securends[data-se-mode="dark"]) body {
  background-color: var(--bg-app, #0b1220) !important;
  background: var(--bg-app, #0b1220) !important;
  color: var(--text-primary, #e5e7eb) !important;
  min-height: 100vh;
}

/* Portaled chrome (hnav) and boot root sit outside .securends — paint them too. */
html[data-se-mode="dark"] #react,
html[data-se-mode="dark"] #app,
html[data-theme="dark"] #react,
html[data-theme="dark"] #app,
html.dark #react,
html.dark #app,
html:has(.securends[data-se-mode="dark"]) #react,
html:has(.securends[data-se-mode="dark"]) #app,
.securends[data-se-mode="dark"],
.securends[data-se-mode="dark"] .wrapper,
.securends[data-se-mode="dark"] .se-main-panel,
.securends[data-se-mode="dark"] [class*="mainPanel"],
.securends[data-se-mode="dark"] .main-content {
  background-color: var(--bg-app, #0b1220) !important;
  background: var(--bg-app, #0b1220) !important;
  color: var(--text-primary, #e5e7eb) !important;
  min-height: 100%;
}

/* Pickels / Bootstrap leftovers that still hardcode white surfaces */
html[data-se-mode="dark"] .securends .form-control,
html[data-se-mode="dark"] .securends select,
html[data-se-mode="dark"] .securends select.form-control,
html[data-se-mode="dark"] .securends .MuiOutlinedInput-root,
html[data-se-mode="dark"] .securends .MuiInputBase-root,
html[data-se-mode="dark"] .securends .MuiInputBase-input,
html[data-se-mode="dark"] .securends .MuiOutlinedInput-input,
html[data-se-mode="dark"] .securends input[type="text"],
html[data-se-mode="dark"] .securends input[type="email"],
html[data-se-mode="dark"] .securends input[type="search"],
html[data-se-mode="dark"] .securends input[type="password"],
html[data-se-mode="dark"] .securends input[type="number"],
html[data-se-mode="dark"] .securends input[type="tel"],
html[data-se-mode="dark"] .securends input[type="url"],
html[data-se-mode="dark"] .securends input[type="date"],
html[data-se-mode="dark"] .securends input[type="datetime-local"],
html[data-se-mode="dark"] .securends input[type="time"],
html[data-se-mode="dark"] .securends textarea,
html[data-se-mode="dark"] .securends textarea.form-control,
html[data-se-mode="dark"] .securends .ReactTable .rt-thead.-filters input,
html[data-se-mode="dark"] .securends .endpointConfigCard .form-control,
html[data-se-mode="dark"] .securends .endpointConfigCard input,
html[data-se-mode="dark"] .securends .endpointConfigCard textarea,
html[data-se-mode="dark"] .securends .endpointConfigCard select,
html[data-se-mode="dark"] .securends .se-add-data-transformation-page .form-control,
html[data-se-mode="dark"] .securends .se-add-data-transformation-page input[type="text"],
html[data-se-mode="dark"] .securends .se-add-data-transformation-page textarea,
html[data-se-mode="dark"] .securends .se-add-data-transformation-page select,
html[data-se-mode="dark"] .securends .se-forms-page .form-control,
html[data-se-mode="dark"] .securends .se-forms-page input,
html[data-se-mode="dark"] .securends .se-forms-page textarea,
html[data-se-mode="dark"] .securends .se-forms-page select,
html[data-se-mode="dark"] .securends .rfb-item .form-control,
html[data-se-mode="dark"] .securends .rfb-item input,
html[data-se-mode="dark"] .securends .rfb-item textarea,
html[data-se-mode="dark"] .securends .rfb-item select,
html[data-se-mode="dark"] .securends .react-form-builder-form .form-control,
html[data-se-mode="dark"] .securends .react-form-builder-form input,
html[data-se-mode="dark"] .securends .react-form-builder-form textarea,
html[data-se-mode="dark"] .securends .react-form-builder-form select,
html[data-se-mode="dark"] .securends .non-employee-form-content .form-control,
html[data-se-mode="dark"] .securends .non-employee-form-content input,
html[data-se-mode="dark"] .securends .non-employee-form-content textarea,
html[data-se-mode="dark"] .securends .non-employee-form-content select,
html[data-se-mode="dark"] .securends .modal .form-control,
html[data-se-mode="dark"] .securends .modal input[type="text"],
html[data-se-mode="dark"] .securends .modal input[type="password"],
html[data-se-mode="dark"] .securends .modal textarea,
html[data-se-mode="dark"] .securends .modal select,
html[data-se-mode="dark"] .securends .o-form-input .form-control,
html[data-se-mode="dark"] .securends .o-form-input input,
html[data-se-mode="dark"] .securends .o-form-input textarea,
html[data-se-mode="dark"] .securends .o-form-input select {
  background: var(--bg-input, #111b2b) !important;
  background-color: var(--bg-input, #111b2b) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-default) !important;
}

/* Disabled fields (Web API Content-Type) — beat light #f5f6f8 / Bootstrap disabled white */
html[data-se-mode="dark"] .securends input.form-control:disabled,
html[data-se-mode="dark"] .securends input:disabled,
html[data-se-mode="dark"] .securends select.form-control:disabled,
html[data-se-mode="dark"] .securends textarea.form-control:disabled,
html[data-se-mode="dark"] .securends .endpointConfigCard input.form-control:disabled,
html[data-se-mode="dark"] .securends .attributes-flex-conn-wrapper input.form-control:disabled,
html[data-se-mode="dark"] .securends .attributes-conn-wrapper input.form-control:disabled,
html[data-se-mode="dark"] .securends input#Content-Type,
html[data-se-mode="dark"] .securends input#Content-Type:disabled,
html[data-se-mode="dark"] .securends .se-sor-create-page input.form-control:disabled,
html[data-se-mode="dark"] .securends .se-sor-update-page input.form-control:disabled,
html[data-se-mode="dark"] .securends .se-create-app input.form-control:disabled:not(:where(.se-create-parity *)) {
  background: var(--bg-input, #111b2b) !important;
  background-color: var(--bg-input, #111b2b) !important;
  color: var(--text-secondary, #a7b0c0) !important;
  -webkit-text-fill-color: var(--text-secondary, #a7b0c0) !important;
  border-color: var(--border-default, #263348) !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

/* Web API JSON textarea (#Path) — readable value + placeholder on dark */
html[data-se-mode="dark"] .securends .textAreaGoogleDrive textarea,
html[data-se-mode="dark"] .securends .textAreaGoogleDrive textarea.form-control,
html[data-se-mode="dark"] .securends textarea#Path,
html[data-se-mode="dark"] .securends textarea#Path.form-control,
html[data-se-mode="dark"] .securends .endpointConfigCard textarea#Path,
html[data-se-mode="dark"] .securends .se-sor-create-page textarea.form-control,
html[data-se-mode="dark"] .securends .se-sor-update-page textarea.form-control {
  background: var(--bg-input, #111b2b) !important;
  background-color: var(--bg-input, #111b2b) !important;
  color: var(--text-primary, #e5e7eb) !important;
  -webkit-text-fill-color: var(--text-primary, #e5e7eb) !important;
  border-color: var(--border-default, #263348) !important;
  caret-color: var(--text-primary, #e5e7eb) !important;
  opacity: 1 !important;
}

html[data-se-mode="dark"] .securends .textAreaGoogleDrive textarea::placeholder,
html[data-se-mode="dark"] .securends textarea#Path::placeholder,
html[data-se-mode="dark"] .securends .se-sor-create-page textarea.form-control::placeholder,
html[data-se-mode="dark"] .securends .se-sor-update-page textarea.form-control::placeholder {
  color: var(--text-secondary, #a7b0c0) !important;
  -webkit-text-fill-color: var(--text-secondary, #a7b0c0) !important;
  opacity: 1 !important;
}

html[data-se-mode="dark"] .securends .form-control::placeholder,
html[data-se-mode="dark"] .securends input::placeholder,
html[data-se-mode="dark"] .securends textarea::placeholder,
html[data-se-mode="dark"] .securends .MuiInputBase-input::placeholder {
  color: var(--text-muted, #6b7280) !important;
  opacity: 1 !important;
}

/* Browser autofill — keep dark field fill (Chrome paints yellow/white otherwise) */
html[data-se-mode="dark"] .securends input:-webkit-autofill,
html[data-se-mode="dark"] .securends input:-webkit-autofill:hover,
html[data-se-mode="dark"] .securends input:-webkit-autofill:focus,
html[data-se-mode="dark"] .securends textarea:-webkit-autofill,
html[data-se-mode="dark"] .securends select:-webkit-autofill {
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary) !important;
  box-shadow: 0 0 0 1000px var(--bg-input, #111b2b) inset !important;
  transition: background-color 99999s ease-out 0s !important;
}

/* Textareas + MUI multiline in modal portals (often outside .securends) */
html[data-se-mode="dark"] textarea,
html[data-se-mode="dark"] textarea.form-control,
html[data-se-mode="dark"] textarea.justEntNotes,
html[data-se-mode="dark"] textarea.history,
html[data-se-mode="dark"] .modal textarea,
html[data-se-mode="dark"] .modal-body textarea,
html[data-se-mode="dark"] .MuiDialogContent-root textarea,
html[data-se-mode="dark"] .iga-justification-modal textarea,
html[data-se-mode="dark"] .iga-modal-justification-field .MuiOutlinedInput-root,
html[data-se-mode="dark"] .iga-justification-modal .MuiOutlinedInput-root,
html[data-se-mode="dark"] .MuiOutlinedInput-multiline,
html[data-se-mode="dark"] .revoke-justification-label textarea {
  background: var(--bg-input, #111b2b) !important;
  background-color: var(--bg-input, #111b2b) !important;
  color: var(--text-primary, #e5e7eb) !important;
  border-color: var(--border-default, #263348) !important;
  -webkit-text-fill-color: var(--text-primary, #e5e7eb) !important;
}

html[data-se-mode="dark"] .iga-modal-justification-field .MuiOutlinedInput-input,
html[data-se-mode="dark"] .iga-modal-justification-field .MuiOutlinedInput-inputMultiline,
html[data-se-mode="dark"] .MuiOutlinedInput-multiline .MuiOutlinedInput-input,
html[data-se-mode="dark"] .MuiOutlinedInput-multiline textarea {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text-primary, #e5e7eb) !important;
  -webkit-text-fill-color: var(--text-primary, #e5e7eb) !important;
}

html[data-se-mode="dark"] .iga-modal-justification-field .MuiInputLabel-outlined,
html[data-se-mode="dark"] .iga-modal-justification-field .MuiInputLabel-outlined.MuiInputLabel-shrink {
  background: var(--se-card, #111827) !important;
  color: var(--text-secondary, #a7b0c0) !important;
}

html[data-se-mode="dark"] textarea::placeholder,
html[data-se-mode="dark"] .MuiOutlinedInput-inputMultiline::placeholder,
html[data-se-mode="dark"] .MuiInputBase-inputMultiline::placeholder {
  color: var(--text-muted, #6b7280) !important;
  opacity: 1 !important;
}

html[data-se-mode="dark"] .securends select,
html[data-se-mode="dark"] .securends select.form-control {
  background-color: var(--se-raise) !important;
  background-image: var(--se-select-caret-dark) !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 10px 7px !important;
}

html[data-se-mode="dark"] .securends .react-select__control,
html[data-se-mode="dark"] .securends .selectCampaign [class*="-control"],
html[data-se-mode="dark"] .securends div[class^="css-"][class*="-control"],
html[data-se-mode="dark"] .securends .react-select__menu,
html[data-se-mode="dark"] .securends .selectCampaign [class*="-menu"],
html[data-se-mode="dark"] .securends div[class^="css-"][class*="-menu"] {
  background: var(--se-raise) !important;
  border-color: var(--se-line) !important;
  color: var(--se-ink) !important;
}

html[data-se-mode="dark"] .securends .modal-content,
html[data-se-mode="dark"] .modal-content,
html[data-se-mode="dark"] .securends .modal-header,
html[data-se-mode="dark"] .modal-header,
html[data-se-mode="dark"] .modelheader,
html[data-se-mode="dark"] .securends .modal-body,
html[data-se-mode="dark"] .modal-body,
html[data-se-mode="dark"] .securends .dropdown-menu,
html[data-se-mode="dark"] .securends .multiselect-container,
html[data-se-mode="dark"] .securends .se-settings-panel,
html[data-se-mode="dark"] .securends .MuiPaper-root:not(.MuiDrawer-paper) {
  background: var(--se-card) !important;
  color: var(--se-ink) !important;
  border-color: var(--se-line) !important;
}

/* Profile menu — elevated (exclude from flat --se-card group above) */
html[data-se-mode="dark"] .securends .se-profile-menu,
html[data-se-mode="dark"] .se-profile-menu {
  background: var(--bg-surface-elevated, #1a2436) !important;
  color: var(--se-ink) !important;
  border-color: var(--border-strong, #334155) !important;
}

/* Mode / Left Nav tiles — do NOT flatten .is-selected (was in se-card group) */
html[data-se-mode="dark"] .se-settings-tile,
html[data-se-mode="dark"] .securends .se-settings-tile,
html[data-se-mode="dark"] .se-profile-popper .se-settings-tile {
  background: var(--bg-surface-elevated, #1a2436) !important;
  color: var(--text-secondary, #a7b0c0) !important;
  border-color: var(--border-default, #263348) !important;
}

html[data-se-mode="dark"] .se-settings-tile:hover,
html[data-se-mode="dark"] .securends .se-settings-tile:hover,
html[data-se-mode="dark"] .se-profile-popper .se-settings-tile:hover {
  border-color: var(--border-strong, #334155) !important;
  color: var(--text-primary, #e5e7eb) !important;
  background: var(--bg-table-row-hover, #172235) !important;
}

html[data-se-mode="dark"] .se-settings-tile.is-selected,
html[data-se-mode="dark"] .securends .se-settings-tile.is-selected,
html[data-se-mode="dark"] .se-profile-popper .se-settings-tile.is-selected {
  background: var(--se-btn-bg, #dbeafe) !important;
  background-color: var(--se-btn-bg, #dbeafe) !important;
  border-color: var(--se-btn-bg, #dbeafe) !important;
  color: var(--se-btn-fg, #333333) !important;
  -webkit-text-fill-color: var(--se-btn-fg, #333333) !important;
}

html[data-se-mode="dark"] .se-settings-tile.is-selected .fa,
html[data-se-mode="dark"] .securends .se-settings-tile.is-selected .fa,
html[data-se-mode="dark"] .se-profile-popper .se-settings-tile.is-selected .fa,
html[data-se-mode="dark"] .se-settings-tile.is-selected span,
html[data-se-mode="dark"] .securends .se-settings-tile.is-selected span,
html[data-se-mode="dark"] .se-profile-popper .se-settings-tile.is-selected span {
  color: var(--se-btn-fg, #333333) !important;
  -webkit-text-fill-color: var(--se-btn-fg, #333333) !important;
}

html[data-se-mode="dark"] .securends .modal-footer,
html[data-se-mode="dark"] .modal-footer {
  background: var(--se-page) !important;
  color: var(--se-ink) !important;
  border-color: var(--se-line) !important;
}

html[data-se-mode="dark"] .securends .modal-header .close,
html[data-se-mode="dark"] .modal-header .close {
  color: var(--se-ink-2) !important;
  background: transparent !important;
}

html[data-se-mode="dark"] .securends .ReactTable .rt-noData {
  color: var(--text-primary, var(--se-ink)) !important;
  background: transparent !important;
}

html[data-se-mode="dark"] .securends .noDataComponent,
html[data-se-mode="dark"] .securends .noDataComponent b,
html[data-se-mode="dark"] .securends .noDataComponent strong,
html[data-se-mode="dark"] .securends .fa-spinner-icon b,
html[data-se-mode="dark"] .securends .rt-noData b,
html[data-se-mode="dark"] .securends .ReactTable .-loading > div,
html[data-se-mode="dark"] .securends .ReactTable .-loading-inner,
html[data-se-mode="dark"] .securends .listofCampTable .-loading > div,
html[data-se-mode="dark"] .securends .listofCampTable .-loading-inner {
  color: var(--text-primary, #e5e7eb) !important;
}

html[data-se-mode="dark"] .securends .ReactTable .-pagination,
html[data-se-mode="dark"] .securends .ReactTable .-pagination select,
html[data-se-mode="dark"] .securends .ReactTable .-pagination input {
  background: var(--se-card) !important;
  color: var(--se-ink) !important;
  border-color: var(--se-line) !important;
}

html[data-se-mode="dark"] .securends .ReactTable .rt-tbody,
html[data-se-mode="dark"] .securends .ReactTable .rt-tbody .rt-tr-group,
html[data-se-mode="dark"] .securends .ReactTable .rt-tbody .rt-tr,
html[data-se-mode="dark"] .securends .ReactTable.-striped .rt-tr.-odd,
html[data-se-mode="dark"] .securends .ReactTable.-striped .rt-tr.-even,
html[data-se-mode="dark"] .securends .evenRow .rt-tr.-even,
html[data-se-mode="dark"] .securends .ReactTable .rt-tbody .rt-td {
  background: var(--bg-table-row) !important;
  color: var(--text-primary) !important;
}

html[data-se-mode="dark"] .securends .ReactTable .rt-tbody .rt-tr:hover > .rt-td {
  background: var(--bg-table-row-hover) !important;
}

/* 3-dots panel — beat pickels `.ReactTable .dropdown .dropdown-menu { background: #fff }` */
html[data-se-mode="dark"] .securends .ReactTable .dropdown-menu:not(.multiselect):not(.multiselect-container),
html[data-se-mode="dark"] .securends .ReactTable .dropdown .dropdown-menu,
html[data-se-mode="dark"] .securends .ReactTable .configActionDropdown .dropdown-menu,
html[data-se-mode="dark"] .securends .ReactTable .ActionDropdown .dropdown-menu,
html[data-se-mode="dark"] .securends .dropdown-menu.campaignPopUp,
html[data-se-mode="dark"] .securends .dropdown-menu.campaignPopUpCO,
html[data-se-mode="dark"] .securends .dropdown-menu.leftAlign,
html[data-se-mode="dark"] .securends .ActionDropdown-content,
html[data-se-mode="dark"] .securends .ActionDropdown-content1,
html[data-se-mode="dark"] .securends .iamUsersTbl .ActionDropdown .dropdown-menu,
html[data-se-mode="dark"] .securends .dropdown-menu.campaignPopUp .dropdown-content {
  --bs-dropdown-bg: var(--se-card);
  --bs-dropdown-color: var(--se-ink);
  --bs-dropdown-link-color: var(--se-ink);
  --bs-dropdown-link-hover-bg: var(--se-raise);
  --bs-dropdown-link-hover-color: var(--se-ink);
  background: var(--se-card) !important;
  background-color: var(--se-card) !important;
  color: var(--se-ink) !important;
  border-color: var(--se-line) !important;
}

html[data-se-mode="dark"] .securends .ReactTable .dropdown-menu:not(.multiselect) li > a,
html[data-se-mode="dark"] .securends .ReactTable .dropdown-menu.campaignPopUp li > a,
html[data-se-mode="dark"] .securends .ReactTable .dropdown-menu.leftAlign li > a,
html[data-se-mode="dark"] .securends .configActionDropdown .dropdown-menu li > a,
html[data-se-mode="dark"] .securends .ActionDropdown .dropdown-menu li > a,
html[data-se-mode="dark"] .securends .ActionDropdown-content .child,
html[data-se-mode="dark"] .securends .ActionDropdown-content a,
html[data-se-mode="dark"] .securends .ActionDropdown-content1 .child {
  color: var(--se-ink) !important;
  background: transparent !important;
}

html[data-se-mode="dark"] .securends .ReactTable .dropdown-menu:not(.multiselect) li > a i,
html[data-se-mode="dark"] .securends .ReactTable .dropdown-menu.campaignPopUp li > a i,
html[data-se-mode="dark"] .securends .ActionDropdown-content .child i.fa {
  color: var(--se-ink-2) !important;
}

html[data-se-mode="dark"] .securends .ReactTable .dropdown-menu:not(.multiselect) li > a:hover,
html[data-se-mode="dark"] .securends .ReactTable .dropdown-menu.campaignPopUp li > a:hover,
html[data-se-mode="dark"] .securends .ActionDropdown-content .child:hover {
  background: var(--se-raise) !important;
  color: var(--se-ink) !important;
}

html[data-se-mode="dark"] .securends .dropdown.badge .btn-default,
html[data-se-mode="dark"] .securends .dropdown.badge .btn-default .appGear,
html[data-se-mode="dark"] .securends .dropdown.badge .btn-default .fa-cog,
html[data-se-mode="dark"] .securends .ReactTable .rt-td .dropdown.badge .btn-default {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--se-ink) !important;
  border-color: transparent !important;
}

/* --------------------------------------------------------------------------
   App-wide dark mode — beat remaining pickels / Bootstrap / MUI white plates
   and low-contrast ink. Presentation only; tokens already set above.
   -------------------------------------------------------------------------- */

/* Shell / canvas — app background; header + hnav share --bg-navigation. */
html[data-se-mode="dark"] .securends,
html[data-se-mode="dark"] .securends .wrapper,
html[data-se-mode="dark"] .securends .main-panel,
html[data-se-mode="dark"] .securends .se-main-panel,
html[data-se-mode="dark"] .securends [class*="mainPanel"],
html[data-se-mode="dark"] .securends .content,
html[data-se-mode="dark"] .securends .main-content,
html[data-se-mode="dark"] .securends .perfect-scrollbar-on,
html[data-se-mode="dark"] .securends .ps,
html[data-se-mode="dark"] .securends .container-fluid,
html[data-se-mode="dark"] .securends .page-header {
  background-color: var(--bg-app) !important;
  color: var(--text-primary) !important;
}

html[data-se-mode="dark"] .securends .MuiAppBar-root,
html[data-se-mode="dark"] .securends header.MuiAppBar-root,
html[data-se-mode="dark"] .securends .MuiAppBar-root .MuiToolbar-root {
  background: var(--bg-navigation) !important;
  background-color: var(--bg-navigation) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-default) !important;
}

/* Horizontal nav (portaled to body) — SAME tokens as vertical sidebar / header. */
html[data-se-mode="dark"] .se-hnav-bar,
html[data-se-mode="dark"][data-se-nav="horizontal"] .se-hnav-bar {
  background: var(--bg-navigation) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-default) !important;
}

html[data-se-mode="dark"] .se-hnav-link {
  color: var(--text-secondary) !important;
}

html[data-se-mode="dark"] .se-hnav-ico,
html[data-se-mode="dark"] .se-hnav-caret {
  color: var(--text-secondary) !important;
}

html[data-se-mode="dark"] .se-hnav-link:hover {
  background: var(--bg-table-row-hover) !important;
  color: var(--text-primary) !important;
}

html[data-se-mode="dark"] .se-hnav-item.is-open > .se-hnav-link,
html[data-se-mode="dark"] .se-hnav-item.is-active > .se-hnav-link {
  background: var(--bg-navigation-active) !important;
  color: #ffffff !important;
}

html[data-se-mode="dark"] .se-hnav-link:hover .se-hnav-ico,
html[data-se-mode="dark"] .se-hnav-link:hover .se-hnav-caret {
  color: var(--color-primary) !important;
}

html[data-se-mode="dark"] .se-hnav-item.is-open > .se-hnav-link .se-hnav-ico,
html[data-se-mode="dark"] .se-hnav-item.is-active > .se-hnav-link .se-hnav-ico,
html[data-se-mode="dark"] .se-hnav-item.is-open > .se-hnav-link .se-hnav-caret,
html[data-se-mode="dark"] .se-hnav-item.is-active > .se-hnav-link .se-hnav-caret {
  color: var(--color-primary) !important;
}

html[data-se-mode="dark"] .se-hnav-sub {
  background: var(--bg-surface-elevated) !important;
  border-color: var(--border-default) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

html[data-se-mode="dark"] .se-hnav-sub-head {
  color: var(--se-ink-3) !important;
  border-bottom-color: var(--se-line) !important;
}

html[data-se-mode="dark"] .se-hnav-child {
  color: var(--se-ink) !important;
}

html[data-se-mode="dark"] .se-hnav-child .se-hnav-ico {
  color: var(--se-ink-2) !important;
}

html[data-se-mode="dark"] .se-hnav-child:hover {
  background: var(--se-raise) !important;
}

html[data-se-mode="dark"] .se-hnav-child.is-active {
  background: var(--se-brand-tint) !important;
  color: var(--se-brand) !important;
  border-left-color: var(--se-brand) !important;
}

html[data-se-mode="dark"] .se-hnav-arrow {
  background: var(--se-raise) !important;
  border-color: var(--se-line) !important;
  color: var(--se-ink-2) !important;
}

html[data-se-mode="dark"] .securends .se-breadcrumb {
  background: var(--bg-app) !important;
  border-bottom-color: var(--border-default) !important;
  color: var(--text-secondary) !important;
}

html[data-se-mode="dark"] .securends .navbar,
html[data-se-mode="dark"] .securends .navbar-transparent,
html[data-se-mode="dark"] .securends .se-topbar,
html[data-se-mode="dark"] .securends .headerbar,
html[data-se-mode="dark"] .securends .top-nav {
  background: var(--se-card) !important;
  background-color: var(--se-card) !important;
  color: var(--se-ink) !important;
  border-color: var(--se-line) !important;
}

/* Sidebar — force readable nav text/icons (beat MUI / pickels dark ink) */
html[data-se-mode="dark"] .securends .MuiDrawer-paper,
html[data-se-mode="dark"] .securends .leftNavDrawer .MuiDrawer-paper,
html[data-se-mode="dark"] .securends .leftNavCustomScroll,
html[data-se-mode="dark"] .securends div.leftNavCustomScroll {
  background: var(--se-navy) !important;
  background-color: var(--se-navy) !important;
  color: var(--se-nav-text) !important;
}

html[data-se-mode="dark"] .securends .MuiDrawer-paper .MuiListItem-root,
html[data-se-mode="dark"] .securends .MuiDrawer-paper .MuiListItem-root *,
html[data-se-mode="dark"] .securends .MuiDrawer-paper [class*="itemLink"],
html[data-se-mode="dark"] .securends .MuiDrawer-paper [class*="itemCollapseLink"],
html[data-se-mode="dark"] .securends .MuiDrawer-paper [class*="itemText"],
html[data-se-mode="dark"] .securends .MuiDrawer-paper [class*="collapseItemText"],
html[data-se-mode="dark"] .securends .MuiDrawer-paper .MuiListItemText-root,
html[data-se-mode="dark"] .securends .MuiDrawer-paper .MuiTypography-root,
html[data-se-mode="dark"] .securends .MuiDrawer-paper span,
html[data-se-mode="dark"] .securends .MuiDrawer-paper p,
html[data-se-mode="dark"] .securends .MuiDrawer-paper a {
  color: var(--se-nav-text) !important;
}

/* Dark mode: keep parent emphasis (--se-nav-parent) vs child (--se-nav-muted) */
html[data-se-mode="dark"] .securends .MuiDrawer-paper [class*="itemCollapseLink"],
html[data-se-mode="dark"] .securends .MuiDrawer-paper [class*="itemCollapseLink"] [class*="itemText"],
html[data-se-mode="dark"] .securends .MuiDrawer-paper [class*="itemCollapseLink"] > span,
html[data-se-mode="dark"] .securends .MuiDrawer-paper .MuiList-root > a > [class*="itemLink"] [class*="itemText"],
html[data-se-mode="dark"] .securends .MuiDrawer-paper .MuiList-root > a > [class*="itemLink"] > span:not(.material-icons):not(.label-new) {
  color: var(--se-nav-parent) !important;
}

html[data-se-mode="dark"] .securends .MuiDrawer-paper .MuiCollapse-container .MuiList-root > a > [class*="itemLink"] [class*="itemText"],
html[data-se-mode="dark"] .securends .MuiDrawer-paper .MuiCollapse-container .MuiList-root > a > [class*="itemLink"] > span:not(.material-icons):not(.label-new),
html[data-se-mode="dark"] .securends .MuiDrawer-paper .MuiCollapse-container [class*="itemLink"] [class*="itemText"],
html[data-se-mode="dark"] .securends .MuiDrawer-paper .MuiCollapse-container [class*="itemLink"] span:not(.material-icons):not(.label-new),
html[data-se-mode="dark"] .securends .MuiDrawer-paper .MuiCollapse-container [class*="collapseItemText"],
html[data-se-mode="dark"] .securends .MuiDrawer-paper .MuiCollapse-container [class*="collapseItemText"] span {
  color: var(--se-nav-muted) !important;
}

html[data-se-mode="dark"] .securends .MuiDrawer-paper .material-icons,
html[data-se-mode="dark"] .securends .MuiDrawer-paper .MuiListItemIcon-root,
html[data-se-mode="dark"] .securends .MuiDrawer-paper .MuiSvgIcon-root,
html[data-se-mode="dark"] .securends .MuiDrawer-paper [class*="itemIcon"],
html[data-se-mode="dark"] .securends .MuiDrawer-paper [class*="itemIcon1"],
html[data-se-mode="dark"] .securends .leftNavCustomScroll .material-icons {
  color: var(--se-nav-icon) !important;
  fill: var(--se-nav-icon) !important;
  opacity: 1 !important;
}

/* Re-assert parent/child icons after the general icon sweep */
html[data-se-mode="dark"] .securends .MuiDrawer-paper [class*="itemCollapseLink"] .material-icons,
html[data-se-mode="dark"] .securends .MuiDrawer-paper [class*="itemCollapseLink"] .MuiSvgIcon-root,
html[data-se-mode="dark"] .securends .MuiDrawer-paper [class*="itemCollapseLink"] [class*="itemIcon"],
html[data-se-mode="dark"] .securends .MuiDrawer-paper [class*="itemCollapseLink"] [class*="itemIcon1"],
html[data-se-mode="dark"] .securends .MuiDrawer-paper .MuiList-root > a > [class*="itemLink"] .material-icons,
html[data-se-mode="dark"] .securends .MuiDrawer-paper .MuiList-root > a > [class*="itemLink"] .MuiSvgIcon-root {
  color: var(--se-nav-parent) !important;
  fill: var(--se-nav-parent) !important;
}

html[data-se-mode="dark"] .securends .MuiDrawer-paper .MuiCollapse-container [class*="itemLink"] .material-icons,
html[data-se-mode="dark"] .securends .MuiDrawer-paper .MuiCollapse-container [class*="itemLink"] .MuiSvgIcon-root {
  color: var(--se-nav-muted) !important;
  fill: var(--se-nav-muted) !important;
}

html[data-se-mode="dark"] .securends .MuiDrawer-paper .MuiListItem-root.Mui-selected,
html[data-se-mode="dark"] .securends .MuiDrawer-paper .MuiListItem-root.Mui-selected *,
html[data-se-mode="dark"] .securends .MuiDrawer-paper [class*="itemLink"].active,
html[data-se-mode="dark"] .securends .MuiDrawer-paper [class*="itemLink"].active * {
  color: var(--se-nav-active-text, var(--se-nav-text)) !important;
}

/* Page toolbar wrappers — transparent outer containers to prevent corner bleed */
.securends .sticky,
.securends .manageApp,
.securends .row.manageApp,
html[data-se-mode="dark"] .securends .sticky,
html[data-se-mode="dark"] .securends .manageApp,
html[data-se-mode="dark"] .securends .row.manageApp,
html[data-se-theme="dark"] .securends .sticky,
html[data-se-theme="dark"] .securends .manageApp,
html[data-se-theme="dark"] .securends .row.manageApp,
[data-se-theme="dark"] .securends .sticky,
[data-se-theme="dark"] .securends .manageApp,
[data-se-theme="dark"] .securends .row.manageApp {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Page toolbar cards — kill white corner artifacts */
html[data-se-mode="dark"] .securends .topLevelRecords,
html[data-se-mode="dark"] .securends h2.o-form-title-bar,
html[data-se-mode="dark"] .securends div.o-form-title-bar,
html[data-se-mode="dark"] .securends .o-form-title-bar,
html[data-se-theme="dark"] .securends .o-form-title-bar,
[data-se-theme="dark"] .securends .o-form-title-bar,
html[data-se-mode="dark"] .securends .se-campaign-reports-toolbar,
html[data-se-mode="dark"] .securends .open-campaigns-header-row {
  background: var(--se-card) !important;
  background-color: var(--se-card) !important;
  border-color: var(--se-line) !important;
  color: var(--se-ink) !important;
  box-shadow: var(--se-shadow) !important;
}

html[data-se-mode="dark"] .securends .o-form-title-bar,
html[data-se-mode="dark"] .securends .o-form-title-bar span,
html[data-se-mode="dark"] .securends .o-form-title-bar .strapi-pagename,
html[data-se-mode="dark"] .securends .manageApp .strapi-pagename,
html[data-se-mode="dark"] .securends h2.o-form-title-bar,
html[data-se-mode="dark"] .securends .pageTitle,
html[data-se-mode="dark"] .securends .iamUsersTitle,
html[data-se-mode="dark"] .securends label {
  color: var(--se-ink) !important;
}

/* Identities /manage page title (#peopleTitle) — beat pickels navy on dark */
html[data-se-mode="dark"] .securends .se-identities-toolbar .o-form-title-bar,
html[data-se-mode="dark"] .securends .se-identities-page .o-form-title-bar,
html[data-se-mode="dark"] .securends #peopleTitle,
html[data-se-mode="dark"] .securends #peopleTitle.o-form-title-bar,
html[data-se-mode="dark"] .securends .manageApp.se-identities-toolbar .o-form-title-bar,
html[data-theme="dark"] .securends #peopleTitle,
html.dark .securends #peopleTitle {
  color: var(--se-ink, #e5e7eb) !important;
  -webkit-text-fill-color: var(--se-ink, #e5e7eb) !important;
}

/* Identities toolbar title — beat pickels `#peopleTitle { color:#002e56 !important }` */
html[data-se-mode="dark"] .securends #peopleTitle,
html[data-se-mode="dark"] .securends #peopleTitle.o-form-title-bar,
html[data-se-mode="dark"] .securends .se-identities-toolbar #peopleTitle,
html[data-se-mode="dark"] #peopleTitle {
  color: var(--se-ink) !important;
  -webkit-text-fill-color: var(--se-ink) !important;
  background: transparent !important;
  background-color: transparent !important;
}

html[data-se-mode="dark"] .securends .o-form-title-bar label,
html[data-se-mode="dark"] .securends .manageApp label,
html[data-se-mode="dark"] .securends .filterLabel,
html[data-se-mode="dark"] .securends .statusLabel {
  color: var(--se-ink-2) !important;
  background: transparent !important;
}

/* Selects / multiselect toggles in toolbars (Status, Manager, Type…)
   Exclude .dropdown-toggle so Action 3-dots / gear are not painted as raise plates.
   Multiselect toggles are re-included via the explicit .multiselect selectors below. */
html[data-se-mode="dark"] .securends select,
html[data-se-mode="dark"] .securends .form-select,
html[data-se-mode="dark"] .securends .btn-default:not(.button-primary):not(.AddAppBtn):not(.tempaddselect):not(.dropdown-toggle):not([aria-haspopup]),
html[data-se-mode="dark"] .securends button.multiselect.dropdown-toggle.btn.btn-default,
html[data-se-mode="dark"] .securends .multiselect.dropdown-toggle.btn.btn-default,
html[data-se-mode="dark"] .securends .btn.dropdown-toggle.btn-default.multiselect,
html[data-se-mode="dark"] .securends .selectDropDown button.multiselect,
html[data-se-mode="dark"] .securends .filter-campaign button.multiselect,
html[data-se-mode="dark"] .securends .filterData button.multiselect,
html[data-se-mode="dark"] .securends .MuiSelect-select,
html[data-se-mode="dark"] .securends .MuiOutlinedInput-input,
html[data-se-mode="dark"] .securends .MuiInputBase-root {
  background-color: var(--se-raise) !important;
  color: var(--se-ink) !important;
  border-color: var(--se-line) !important;
}

/* Dark mode buttons — Cursor-style ice-blue fill + #333 label (all action buttons).
   Exclude danger, icon-only, 3-dots, multiselect, disabled.
   :where() keeps :not() from beating ActionDropdown transparent overrides. */
html[data-se-mode="dark"] .securends .btn:where(:not(.btn-danger):not(.btn-link):not(.close):not(.btn-close):not(.multiselect):not(:disabled):not(.disabled)):not([aria-haspopup]),
html[data-se-mode="dark"] .securends button.btn:where(:not(.btn-danger):not(.btn-link):not(.close):not(.btn-close):not(.multiselect):not(:disabled):not(.disabled)):not([aria-haspopup]),
html[data-se-mode="dark"] .securends input[type="button"]:not(:disabled):not(.disabled):not([value="Approve All"]):not([value="Revoke All"]):not([value="Clear All"]):not([value="Previous Review"]):not([value="Save & Previous"]),
html[data-se-mode="dark"] .securends input[type="submit"]:not(:disabled):not(.disabled),
html[data-se-mode="dark"] .securends .btn-primary,
html[data-se-mode="dark"] .securends .btn-default:where(:not(.multiselect):not(.dropdown-toggle)):not([aria-haspopup]),
html[data-se-mode="dark"] .securends .btn-secondary,
html[data-se-mode="dark"] .securends .button-primary.blue,
html[data-se-mode="dark"] .securends .AddAppBtn:not(:disabled):not(.se-hdr-btn-approve):not(.se-hdr-btn-revoke):not(.se-hdr-btn-quiet):not(#approveAll):not(#approveAllElections):not(#revokeAll):not(#revokAllElections):not(#clearAll):not(#clearAllElections):not(#cancelElections):not([value="Approve All"]):not([value="Revoke All"]):not([value="Clear All"]):not([data-type="cancel"]),
html[data-se-mode="dark"] .securends .iam_add_Add,
html[data-se-mode="dark"] .securends .iam_add_Export,
html[data-se-mode="dark"] .securends .iam_add_Import,
html[data-se-mode="dark"] .securends .tempaddselect,
html[data-se-mode="dark"] .securends [data-type="export"],
html[data-se-mode="dark"] .securends .se-btn-primary,
html[data-se-mode="dark"] .securends .se-btn-secondary,
html[data-se-mode="dark"] .securends .se-btn-cancel,
html[data-se-mode="dark"] .securends .request_access_buttons,
html[data-se-mode="dark"] .securends .delegateClear,
html[data-se-mode="dark"] .securends .treeExportBtn,
html[data-se-mode="dark"] .securends .button:not(.btn-danger):not(.close):not(:disabled),
html[data-se-mode="dark"] .securends .button-primary,
html[data-se-mode="dark"] .securends .submit-button,
html[data-se-mode="dark"] .securends .cancelBtn,
html[data-se-mode="dark"] .securends button#tempADDdataCancel,
html[data-se-mode="dark"] .securends button#tempADDdata,
html[data-se-mode="dark"] .securends button#tempADDdataApply,
html[data-se-mode="dark"] .securends button#templatecancel,
html[data-se-mode="dark"] .securends button#templatesave,
html[data-se-mode="dark"] .securends .MuiButton-contained,
html[data-se-mode="dark"] .securends .MuiButton-containedPrimary,
html[data-se-mode="dark"] .securends .MuiButton-containedSecondary,
html[data-se-mode="dark"] .securends .MuiButton-outlined:not(.MuiButton-outlinedSecondary),
html[data-se-mode="dark"] .securends .MuiButton-outlinedPrimary,
html[data-se-mode="dark"] .MuiButton-containedPrimary,
html[data-se-mode="dark"] .MuiButton-outlined,
html[data-se-mode="dark"] .modal .btn-primary,
html[data-se-mode="dark"] .modal .btn-default:where(:not(.multiselect):not(.dropdown-toggle)),
html[data-se-mode="dark"] .modal .MuiButton-containedPrimary,
html[data-se-mode="dark"] .modal .MuiButton-outlined,
html[data-se-mode="dark"] .modal .button:not(.btn-danger):not(.close):not(:disabled),
html[data-se-mode="dark"] .modal .button-primary,
html[data-se-mode="dark"] .modal .submit-button,
html[data-se-mode="dark"] .modal .cancelBtn,
html[data-se-mode="dark"] .modal .AddAppBtn,
html[data-se-mode="dark"] .modal .tempaddselect,
html[data-se-mode="dark"] .modal button#tempADDdataCancel,
html[data-se-mode="dark"] .modal button#tempADDdata,
html[data-se-mode="dark"] .modal button#tempADDdataApply,
html[data-se-mode="dark"] .se-config-dialog .button,
html[data-se-mode="dark"] .se-config-dialog .cancelBtn,
html[data-se-mode="dark"] .sidebar-modal .AddAppBtn,
html[data-se-mode="dark"] .sidebar-modal .tempaddselect {
  background: var(--se-btn-bg, #dbeafe) !important;
  background-color: var(--se-btn-bg, #dbeafe) !important;
  border: 1px solid var(--se-btn-bg, #dbeafe) !important;
  border-color: var(--se-btn-bg, #dbeafe) !important;
  color: var(--se-btn-fg, #333333) !important;
  -webkit-text-fill-color: var(--se-btn-fg, #333333) !important;
  box-shadow: none !important;
}

/* Modal action chips — include <span class="custom__pg"> (#add_button) */
html[data-se-mode="dark"] .modal .custom__pg:not(.custom_danger):not(.btn-danger),
html[data-se-mode="dark"] .modal button.custom__pg:not(.custom_danger),
html[data-se-mode="dark"] .modal span.custom__pg,
html[data-se-mode="dark"] .modal #create_button,
html[data-se-mode="dark"] .modal #add_button,
html[data-se-mode="dark"] .modal .se-person-create-btn,
html[data-se-mode="dark"] .modal .se-person-add-attr-btn,
html[data-se-mode="dark"] .modal .se-create-app-actions .custom__pg,
html[data-se-mode="dark"] .modal .se-add-person-actions .custom__pg,
html[data-se-mode="dark"] .modal .se-create-app-actions #add_button,
html[data-se-mode="dark"] .modal .se-create-app-actions #create_button,
html[data-theme="dark"] .modal .custom__pg:not(.custom_danger),
html[data-theme="dark"] .modal #add_button,
html[data-theme="dark"] .modal #create_button,
html.dark .modal .custom__pg:not(.custom_danger),
html.dark .modal #add_button,
html.dark .modal #create_button {
  background: var(--se-btn-bg, #dbeafe) !important;
  background-color: var(--se-btn-bg, #dbeafe) !important;
  border: 1px solid var(--se-btn-bg, #dbeafe) !important;
  border-color: var(--se-btn-bg, #dbeafe) !important;
  color: var(--se-btn-fg, #333333) !important;
  -webkit-text-fill-color: var(--se-btn-fg, #333333) !important;
  box-shadow: none !important;
}

html[data-se-mode="dark"] .modal #add_button > span,
html[data-se-mode="dark"] .modal span.custom__pg > span,
html[data-se-mode="dark"] .modal .custom__pg > span,
html[data-theme="dark"] .modal #add_button > span,
html.dark .modal #add_button > span {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  background: transparent !important;
}

/* Modal secondary / cancel chips stay readable on dark surfaces */
html[data-se-mode="dark"] .modal .custom__lg,
html[data-se-mode="dark"] .modal button.custom__lg,
html[data-se-mode="dark"] .modal .custom_secondary,
html[data-se-mode="dark"] .modal .cancelBtn,
html[data-theme="dark"] .modal .custom__lg,
html.dark .modal .custom__lg {
  background: var(--se-raise, #151e2e) !important;
  background-color: var(--se-raise, #151e2e) !important;
  border: 1px solid var(--se-line, #263348) !important;
  color: var(--se-ink, #e5e7eb) !important;
  -webkit-text-fill-color: var(--se-ink, #e5e7eb) !important;
}

/* Danger stays risk (Delete Person, etc.) */
html[data-se-mode="dark"] .modal .custom_danger,
html[data-se-mode="dark"] .modal button.custom_danger,
html[data-se-mode="dark"] .modal .btn-danger,
html[data-theme="dark"] .modal .custom_danger,
html.dark .modal .custom_danger {
  background: var(--se-risk, #b23a55) !important;
  background-color: var(--se-risk, #b23a55) !important;
  border-color: var(--se-risk, #b23a55) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

html[data-se-mode="dark"] .securends .btn:where(:not(.btn-danger):not(.multiselect):not(:disabled)):hover,
html[data-se-mode="dark"] .securends .btn-primary:hover,
html[data-se-mode="dark"] .securends .btn-default:where(:not(.multiselect):not(.dropdown-toggle)):hover,
html[data-se-mode="dark"] .securends .AddAppBtn:not(:disabled):not(.se-hdr-btn-approve):not(.se-hdr-btn-revoke):not(.se-hdr-btn-quiet):not([data-type="cancel"]):hover,
html[data-se-mode="dark"] .securends .tempaddselect:hover,
html[data-se-mode="dark"] .securends [data-type="export"]:hover,
html[data-se-mode="dark"] .securends .button:not(.btn-danger):not(:disabled):hover,
html[data-se-mode="dark"] .securends .submit-button:hover,
html[data-se-mode="dark"] .securends .cancelBtn:hover,
html[data-se-mode="dark"] .securends .MuiButton-contained:hover,
html[data-se-mode="dark"] .securends .MuiButton-containedPrimary:hover,
html[data-se-mode="dark"] .securends .MuiButton-outlined:hover,
html[data-se-mode="dark"] .MuiButton-containedPrimary:hover,
html[data-se-mode="dark"] .modal .btn-primary:hover,
html[data-se-mode="dark"] .modal .button:not(:disabled):hover,
html[data-se-mode="dark"] .modal .AddAppBtn:hover,
html[data-se-mode="dark"] .modal .tempaddselect:hover,
html[data-se-mode="dark"] .modal .cancelBtn:hover,
html[data-se-mode="dark"] .se-config-dialog .button:hover,
html[data-se-mode="dark"] .se-config-dialog .cancelBtn:hover,
html[data-se-mode="dark"] .sidebar-modal .AddAppBtn:hover,
html[data-se-mode="dark"] .sidebar-modal .tempaddselect:hover {
  background: var(--se-btn-bg-hover, #bfdbfe) !important;
  background-color: var(--se-btn-bg-hover, #bfdbfe) !important;
  border-color: var(--se-btn-bg-hover, #bfdbfe) !important;
  color: var(--se-btn-fg, #333333) !important;
  -webkit-text-fill-color: var(--se-btn-fg, #333333) !important;
}

html[data-se-mode="dark"] .securends .btn:disabled,
html[data-se-mode="dark"] .securends .btn.disabled,
html[data-se-mode="dark"] .securends .AddAppBtn:disabled,
html[data-se-mode="dark"] .securends .MuiButton-root.Mui-disabled,
html[data-se-mode="dark"] .MuiButton-root.Mui-disabled {
  background: var(--se-raise, #151e2e) !important;
  background-color: var(--se-raise, #151e2e) !important;
  border-color: var(--se-line, #263348) !important;
  color: var(--text-disabled, #4b5568) !important;
  -webkit-text-fill-color: var(--text-disabled, #4b5568) !important;
  opacity: 0.7 !important;
}

/* Color-coded outline actions — Approve=ok, Revoke=risk, Clear/quiet=brand.
   Keep semantic coding; use bright dark-mode tints so they stay visible. */
html[data-se-mode="dark"] .securends .AddAppBtn.se-hdr-btn-approve,
html[data-se-mode="dark"] .securends #approveAllElections,
html[data-se-mode="dark"] .securends #approveAll,
html[data-se-mode="dark"] .securends input.AddAppBtn[value="Approve All"],
html[data-se-mode="dark"] .securends input[value="Approve All"] {
  background: rgba(16, 185, 129, 0.16) !important;
  background-color: rgba(16, 185, 129, 0.16) !important;
  border: 1px solid #34d399 !important;
  border-color: #34d399 !important;
  color: #6ee7b7 !important;
  -webkit-text-fill-color: #6ee7b7 !important;
}

html[data-se-mode="dark"] .securends .AddAppBtn.se-hdr-btn-approve:hover:not(:disabled),
html[data-se-mode="dark"] .securends #approveAllElections:hover:not(:disabled),
html[data-se-mode="dark"] .securends #approveAll:hover:not(:disabled),
html[data-se-mode="dark"] .securends input.AddAppBtn[value="Approve All"]:hover:not(:disabled) {
  background: rgba(16, 185, 129, 0.28) !important;
  border-color: #6ee7b7 !important;
  color: #a7f3d0 !important;
  -webkit-text-fill-color: #a7f3d0 !important;
}

html[data-se-mode="dark"] .securends .AddAppBtn.se-hdr-btn-revoke,
html[data-se-mode="dark"] .securends #revokAllElections,
html[data-se-mode="dark"] .securends #revokeAll,
html[data-se-mode="dark"] .securends input.AddAppBtn[value="Revoke All"],
html[data-se-mode="dark"] .securends input[value="Revoke All"] {
  background: rgba(239, 68, 68, 0.16) !important;
  background-color: rgba(239, 68, 68, 0.16) !important;
  border: 1px solid #f87171 !important;
  border-color: #f87171 !important;
  color: #fca5a5 !important;
  -webkit-text-fill-color: #fca5a5 !important;
}

html[data-se-mode="dark"] .securends .AddAppBtn.se-hdr-btn-revoke:hover:not(:disabled),
html[data-se-mode="dark"] .securends #revokAllElections:hover:not(:disabled),
html[data-se-mode="dark"] .securends #revokeAll:hover:not(:disabled),
html[data-se-mode="dark"] .securends input.AddAppBtn[value="Revoke All"]:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.28) !important;
  border-color: #fca5a5 !important;
  color: #fecaca !important;
  -webkit-text-fill-color: #fecaca !important;
}

html[data-se-mode="dark"] .securends .AddAppBtn.se-hdr-btn-quiet,
html[data-se-mode="dark"] .securends #clearAll,
html[data-se-mode="dark"] .securends #clearAllElections,
html[data-se-mode="dark"] .securends #cancelElections,
html[data-se-mode="dark"] .securends input.AddAppBtn[value="Clear All"],
html[data-se-mode="dark"] .securends input[value="Clear All"],
html[data-se-mode="dark"] .securends input.AddAppBtn[value="Previous Review"],
html[data-se-mode="dark"] .securends input.AddAppBtn[value="Save & Previous"],
html[data-se-mode="dark"] .securends .AddAppBtn[data-type="cancel"] {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid var(--se-brand, #dbeafe) !important;
  border-color: var(--se-brand, #dbeafe) !important;
  color: var(--se-brand, #dbeafe) !important;
  -webkit-text-fill-color: var(--se-brand, #dbeafe) !important;
}

html[data-se-mode="dark"] .securends .AddAppBtn.se-hdr-btn-quiet:hover:not(:disabled),
html[data-se-mode="dark"] .securends #clearAll:hover:not(:disabled),
html[data-se-mode="dark"] .securends #clearAllElections:hover:not(:disabled),
html[data-se-mode="dark"] .securends input.AddAppBtn[value="Clear All"]:hover:not(:disabled),
html[data-se-mode="dark"] .securends .AddAppBtn[data-type="cancel"]:hover:not(:disabled) {
  background: rgba(219, 234, 254, 0.14) !important;
  border-color: #bfdbfe !important;
  color: #eff6ff !important;
  -webkit-text-fill-color: #eff6ff !important;
}

/* Dropdowns / multiselect — light ink on dark raise (never #333 on dark plate) */
html[data-se-mode="dark"] .securends button.multiselect,
html[data-se-mode="dark"] .securends button.multiselect.dropdown-toggle,
html[data-se-mode="dark"] .securends button.multiselect.btn.btn-default,
html[data-se-mode="dark"] .securends .btn-group button.multiselect,
html[data-se-mode="dark"] .securends .electionFilter button.multiselect,
html[data-se-mode="dark"] .securends .small-multiselect button.multiselect,
html[data-se-mode="dark"] .securends .direct-multiselect button.multiselect,
html[data-se-mode="dark"] .securends select,
html[data-se-mode="dark"] .securends select.form-control,
html[data-se-mode="dark"] .securends .form-select {
  background: var(--se-raise, #151e2e) !important;
  background-color: var(--se-raise, #151e2e) !important;
  color: var(--se-ink, #e5e7eb) !important;
  -webkit-text-fill-color: var(--se-ink, #e5e7eb) !important;
  border: 1px solid var(--se-line, #263348) !important;
  border-color: var(--se-line, #263348) !important;
}

html[data-se-mode="dark"] .securends button.multiselect .multiselect-selected-text,
html[data-se-mode="dark"] .securends .multiselect-selected-text,
html[data-se-mode="dark"] .securends button.multiselect span {
  color: var(--se-ink, #e5e7eb) !important;
  -webkit-text-fill-color: var(--se-ink, #e5e7eb) !important;
}

html[data-se-mode="dark"] .securends button.multiselect .caret,
html[data-se-mode="dark"] .securends button.multiselect b.caret,
html[data-se-mode="dark"] .securends .dropdown-toggle .caret {
  border-top-color: var(--se-ink-2, #a7b0c0) !important;
  color: var(--se-ink-2, #a7b0c0) !important;
}

html[data-se-mode="dark"] .securends select,
html[data-se-mode="dark"] .securends select.form-control {
  background-image: var(--se-select-caret-dark) !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 10px 7px !important;
}

/* GUIDE tab — ice-blue fill + dark label (same as primary buttons) */
html[data-se-mode="dark"] .guideSideNavToggleButton,
html[data-se-mode="dark"] .securends .guideSideNavToggleButton,
html[data-se-mode="dark"] .guideSideNavToggleButton.reversed,
html[data-se-mode="dark"] .securends .guideSideNavToggleButton.reversed {
  background-color: var(--se-btn-bg, #dbeafe) !important;
  background-image: none !important;
  color: var(--se-btn-fg, #333333) !important;
  -webkit-text-fill-color: var(--se-btn-fg, #333333) !important;
  border-color: var(--se-btn-bg, #dbeafe) !important;
}

html[data-se-mode="dark"] .guideSideNavToggleButton:hover,
html[data-se-mode="dark"] .securends .guideSideNavToggleButton:hover {
  background-color: var(--se-btn-bg-hover, #bfdbfe) !important;
  color: var(--se-btn-fg, #333333) !important;
}

/* App Guide body — high-contrast ink; beat CMS/RTE dark inline colors */
html[data-se-mode="dark"] .se-guide-article-html,
html[data-se-mode="dark"] .securends .se-guide-article-html,
html[data-se-mode="dark"] .se-guide-article-html.guideContent,
html[data-se-mode="dark"] .securends .se-guide-article-html.guideContent,
html[data-se-mode="dark"] .guideSideNavMainContent .guideContent,
html[data-se-mode="dark"] .securends .guideSideNavMainContent .guideContent,
html[data-se-mode="dark"] .guideBottomNavMainContent .guideContent,
html[data-se-mode="dark"] .securends .guideBottomNavMainContent .guideContent,
html[data-se-mode="dark"] .se-guide-panel .guideContent,
html[data-se-mode="dark"] .securends .se-guide-panel .guideContent,
html[data-se-mode="dark"] .se-guide-article-title,
html[data-se-mode="dark"] .securends .se-guide-article-title {
  color: var(--se-ink, var(--text-primary, #e5e7eb)) !important;
}

html[data-se-mode="dark"] .se-guide-article-html :is(p, span, div, li, ul, ol, strong, b, em, i, u, h1, h2, h3, h4, h5, h6, td, th, label, font, blockquote, section, article),
html[data-se-mode="dark"] .securends .se-guide-article-html :is(p, span, div, li, ul, ol, strong, b, em, i, u, h1, h2, h3, h4, h5, h6, td, th, label, font, blockquote, section, article),
html[data-se-mode="dark"] .guideSideNavMainContent .guideContent :is(p, span, div, li, ul, ol, strong, b, em, i, u, h1, h2, h3, h4, h5, h6, td, th, label, font, blockquote, section, article),
html[data-se-mode="dark"] .securends .guideSideNavMainContent .guideContent :is(p, span, div, li, ul, ol, strong, b, em, i, u, h1, h2, h3, h4, h5, h6, td, th, label, font, blockquote, section, article),
html[data-se-mode="dark"] .guideBottomNavMainContent .guideContent :is(p, span, div, li, ul, ol, strong, b, em, i, u, h1, h2, h3, h4, h5, h6, td, th, label, font, blockquote, section, article),
html[data-se-mode="dark"] .securends .guideBottomNavMainContent .guideContent :is(p, span, div, li, ul, ol, strong, b, em, i, u, h1, h2, h3, h4, h5, h6, td, th, label, font, blockquote, section, article),
html[data-se-mode="dark"] .se-guide-panel .guideContent :is(p, span, div, li, ul, ol, strong, b, em, i, u, h1, h2, h3, h4, h5, h6, td, th, label, font, blockquote, section, article),
html[data-se-mode="dark"] .securends .se-guide-panel .guideContent :is(p, span, div, li, ul, ol, strong, b, em, i, u, h1, h2, h3, h4, h5, h6, td, th, label, font, blockquote, section, article) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-se-mode="dark"] .se-guide-article-html a,
html[data-se-mode="dark"] .securends .se-guide-article-html a,
html[data-se-mode="dark"] .guideSideNavMainContent .guideContent a,
html[data-se-mode="dark"] .securends .guideSideNavMainContent .guideContent a,
html[data-se-mode="dark"] .guideBottomNavMainContent .guideContent a,
html[data-se-mode="dark"] .securends .guideBottomNavMainContent .guideContent a,
html[data-se-mode="dark"] .se-guide-panel .guideContent a,
html[data-se-mode="dark"] .securends .se-guide-panel .guideContent a {
  color: var(--se-brand, #dbeafe) !important;
  -webkit-text-fill-color: var(--se-brand, #dbeafe) !important;
}

/* Guide CMS callouts — beat leftover light fills (inline / bgcolor / tables) */
html[data-se-mode="dark"] .se-guide-cms-surface,
html[data-se-mode="dark"] .securends .se-guide-cms-surface,
html[data-se-mode="dark"] .se-guide-article-html .se-guide-cms-surface,
html[data-se-mode="dark"] .guideContent .se-guide-cms-surface,
html[data-theme="dark"] .se-guide-cms-surface,
html.dark .se-guide-cms-surface {
  background: var(--se-raise, #151e2e) !important;
  background-color: var(--se-raise, #151e2e) !important;
  color: var(--se-ink, #e5e7eb) !important;
  border-color: var(--border-default, #263348) !important;
}

html[data-se-mode="dark"] .se-guide-article-html [style*="background"],
html[data-se-mode="dark"] .securends .se-guide-article-html [style*="background"],
html[data-se-mode="dark"] .guideSideNavMainContent .guideContent [style*="background"],
html[data-se-mode="dark"] .guideBottomNavMainContent .guideContent [style*="background"],
html[data-se-mode="dark"] .se-guide-panel .guideContent [style*="background"],
html[data-se-mode="dark"] .se-guide-article-html [bgcolor],
html[data-se-mode="dark"] .securends .se-guide-article-html [bgcolor],
html[data-se-mode="dark"] .guideContent [bgcolor],
html[data-theme="dark"] .se-guide-article-html [style*="background"],
html[data-theme="dark"] .guideContent [style*="background"],
html.dark .se-guide-article-html [style*="background"],
html.dark .guideContent [style*="background"] {
  background: var(--se-raise, #151e2e) !important;
  background-color: var(--se-raise, #151e2e) !important;
  color: var(--se-ink, #e5e7eb) !important;
  border-color: var(--border-default, #263348) !important;
}

html[data-se-mode="dark"] .se-guide-article-html :is(table, td, th, blockquote, pre, code),
html[data-se-mode="dark"] .securends .se-guide-article-html :is(table, td, th, blockquote, pre, code),
html[data-se-mode="dark"] .guideSideNavMainContent .guideContent :is(table, td, th, blockquote, pre, code),
html[data-se-mode="dark"] .guideBottomNavMainContent .guideContent :is(table, td, th, blockquote, pre, code),
html[data-se-mode="dark"] .se-guide-panel .guideContent :is(table, td, th, blockquote, pre, code),
html[data-theme="dark"] .se-guide-article-html :is(table, td, th, blockquote, pre, code),
html.dark .se-guide-article-html :is(table, td, th, blockquote, pre, code) {
  background-color: transparent !important;
  color: inherit !important;
  border-color: var(--border-default, #263348) !important;
}

html[data-se-mode="dark"] .se-guide-article-html :is(blockquote, pre, code, .se-guide-cms-surface),
html[data-se-mode="dark"] .securends .se-guide-article-html :is(blockquote, pre, code, .se-guide-cms-surface),
html[data-se-mode="dark"] .guideContent :is(blockquote, pre, code, .se-guide-cms-surface),
html[data-theme="dark"] .se-guide-article-html :is(blockquote, pre, code, .se-guide-cms-surface),
html.dark .se-guide-article-html :is(blockquote, pre, code, .se-guide-cms-surface) {
  background: var(--se-raise, #151e2e) !important;
  background-color: var(--se-raise, #151e2e) !important;
  color: var(--se-ink, #e5e7eb) !important;
}

/* Beat page-specific AddAppBtn / toolbar rules that still force white-on-navy.
   Skip color-coded outline actions (approve/revoke/clear). */
html[data-se-mode="dark"][data-se-theme] .securends [class*="page"] .AddAppBtn:not(.se-hdr-btn-approve):not(.se-hdr-btn-revoke):not(.se-hdr-btn-quiet):not(#approveAll):not(#approveAllElections):not(#revokeAll):not(#revokAllElections):not(#clearAll):not(#clearAllElections):not(#cancelElections),
html[data-se-mode="dark"][data-se-theme] .securends [class*="page"] input.AddAppBtn:not(.se-hdr-btn-approve):not(.se-hdr-btn-revoke):not(.se-hdr-btn-quiet):not([value="Approve All"]):not([value="Revoke All"]):not([value="Clear All"]):not([value="Previous Review"]):not([value="Save & Previous"]):not([data-type="cancel"]),
html[data-se-mode="dark"][data-se-theme] .securends [class*="page"] button.AddAppBtn:not([data-type="cancel"]),
html[data-se-mode="dark"][data-se-theme] .securends [class*="page"] .tempaddselect,
html[data-se-mode="dark"][data-se-theme] .securends .o-form-title-bar .AddAppBtn:not([data-type="cancel"]),
html[data-se-mode="dark"][data-se-theme] .securends .se-toolbar-actions .AddAppBtn:not(.se-hdr-btn-approve):not(.se-hdr-btn-revoke):not(.se-hdr-btn-quiet):not([data-type="cancel"]),
html[data-se-mode="dark"][data-se-theme] .securends .se-toolbar-actions .tempaddselect,
html[data-se-mode="dark"][data-se-theme] .securends .manageApp .AddAppBtn:not([data-type="cancel"]) {
  background: var(--se-btn-bg, #dbeafe) !important;
  background-color: var(--se-btn-bg, #dbeafe) !important;
  border-color: var(--se-btn-bg, #dbeafe) !important;
  color: var(--se-btn-fg, #333333) !important;
  -webkit-text-fill-color: var(--se-btn-fg, #333333) !important;
}

/* Refresh (.iam_add_Export) — page CSS paints --se-card on the toolbar card, so
   the label disappears in dark mode. Same ice button as Add, app-wide. */
html[data-se-mode="dark"][data-se-theme] .securends [class*="page"] .iam_add_Export,
html[data-se-mode="dark"][data-se-theme] .securends [class*="page"] button.iam_add_Export,
html[data-se-mode="dark"][data-se-theme] .securends [class*="page"] a.iam_add_Export,
html[data-se-mode="dark"][data-se-theme] .securends [class*="page"] .se-ep-toolbar-end .iam_add_Export,
html[data-se-mode="dark"][data-se-theme] .securends [class*="page"] .se-toolbar-actions .iam_add_Export,
html[data-se-mode="dark"][data-se-theme] .securends [class*="page"] .o-form-title-bar .iam_add_Export,
html[data-se-mode="dark"][data-se-theme] .securends .se-ep-toolbar-end .iam_add_Export,
html[data-se-mode="dark"][data-se-theme] .securends .o-form-title-bar .iam_add_Export,
html[data-se-mode="dark"][data-se-theme] .securends .se-toolbar-actions .iam_add_Export,
html[data-se-mode="dark"] .securends #epTable .se-ep-toolbar-end .iam_add_Export {
  background: var(--se-btn-bg, #dbeafe) !important;
  background-color: var(--se-btn-bg, #dbeafe) !important;
  border: 1px solid var(--se-btn-bg, #dbeafe) !important;
  border-color: var(--se-btn-bg, #dbeafe) !important;
  color: var(--se-btn-fg, #333333) !important;
  -webkit-text-fill-color: var(--se-btn-fg, #333333) !important;
  box-shadow: none !important;
}

html[data-se-mode="dark"][data-se-theme] .securends [class*="page"] .iam_add_Export:hover,
html[data-se-mode="dark"][data-se-theme] .securends [class*="page"] button.iam_add_Export:hover,
html[data-se-mode="dark"][data-se-theme] .securends [class*="page"] .se-ep-toolbar-end .iam_add_Export:hover,
html[data-se-mode="dark"][data-se-theme] .securends [class*="page"] .se-toolbar-actions .iam_add_Export:hover,
html[data-se-mode="dark"][data-se-theme] .securends [class*="page"] .o-form-title-bar .iam_add_Export:hover,
html[data-se-mode="dark"][data-se-theme] .securends .se-ep-toolbar-end .iam_add_Export:hover,
html[data-se-mode="dark"] .securends #epTable .se-ep-toolbar-end .iam_add_Export:hover {
  background: var(--se-btn-bg-hover, #bfdbfe) !important;
  background-color: var(--se-btn-bg-hover, #bfdbfe) !important;
  border-color: var(--se-btn-bg-hover, #bfdbfe) !important;
  color: var(--se-btn-fg, #333333) !important;
  -webkit-text-fill-color: var(--se-btn-fg, #333333) !important;
}

/* Table 3-dots — icon only (no plate); beat pickels `.dropdown.badge .btn-default { background:#fff }` */
html[data-se-mode="dark"] .securends .dropdown.badge,
html[data-se-mode="dark"] .securends .dropdown.badge .btn-default,
html[data-se-mode="dark"] .securends .dropdown.badge > button,
html[data-se-mode="dark"] .securends .dropdown.badge .dropdown-toggle,
html[data-se-mode="dark"] .securends .dropdown.badge .btn-default .appGear,
html[data-se-mode="dark"] .securends .dropdown.badge .btn-default .fa-cog,
html[data-se-mode="dark"] .securends .ActionDropdown > button,
html[data-se-mode="dark"] .securends .ActionDropdown > .btn,
html[data-se-mode="dark"] .securends .ActionDropdown > button.btn-default,
html[data-se-mode="dark"] .securends .ActionDropdown .btn-default,
html[data-se-mode="dark"] .securends .configActionDropdown > button,
html[data-se-mode="dark"] .securends .configActionDropdown .btn-default,
html[data-se-mode="dark"] .securends .configActionDropdown .dropdown-toggle:not(.multiselect),
html[data-se-mode="dark"] .securends .ReactTable .rt-td .dropdown.badge .btn-default,
html[data-se-mode="dark"] .securends .ReactTable .rt-td .btn.dropdown-toggle:not(.multiselect),
html[data-se-mode="dark"] .securends .iamUsersTbl .ActionDropdown > button,
html[data-se-mode="dark"] .securends .iamUsersTbl .ActionDropdown .btn-default,
html[data-se-mode="dark"] .securends .sorTable .ActionDropdown > button,
html[data-se-mode="dark"] .securends .campaignTemp .ActionDropdown > button {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--se-ink-2) !important;
  border: none !important;
  box-shadow: none !important;
}

html[data-se-mode="dark"] .securends .dropdown.badge .btn-default .appGear,
html[data-se-mode="dark"] .securends .dropdown.badge .btn-default .fa-cog,
html[data-se-mode="dark"] .securends .ActionDropdown .appGear,
html[data-se-mode="dark"] .securends .ActionDropdown i.fa,
html[data-se-mode="dark"] .securends .ActionDropdown > button .fa-cog,
html[data-se-mode="dark"] .securends .configActionDropdown .appGear,
html[data-se-mode="dark"] .securends .configActionDropdown .fa-cog {
  color: inherit !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

html[data-se-mode="dark"] .securends .ActionDropdown > button:hover,
html[data-se-mode="dark"] .securends .configActionDropdown > button:hover,
html[data-se-mode="dark"] .securends .dropdown.badge .btn-default:hover {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  color: var(--se-ink) !important;
}

/* ReactTable headers / body — beat pickels white thead / dark ink */
html[data-se-mode="dark"] .securends .ReactTable .rt-thead.-header,
html[data-se-mode="dark"] .securends .ReactTable .rt-thead.-header .rt-th,
html[data-se-mode="dark"] .securends .ReactTable .rt-thead.-header .rt-td,
html[data-se-mode="dark"] .securends .ReactTable .rt-thead.-header .rt-th div,
html[data-se-mode="dark"] .securends .EndpointsTable .rt-thead.-header,
html[data-se-mode="dark"] .securends .sorReactTable .rt-thead.-header,
html[data-se-mode="dark"] .securends .iamUsersTbl .rt-thead.-header,
html[data-se-mode="dark"] .securends .listofCampTable .rt-thead.-header,
html[data-se-mode="dark"] .securends .campaignTemp .rt-thead.-header,
html[data-se-mode="dark"] .securends .MuiTableHead-root,
html[data-se-mode="dark"] .securends .MuiTableCell-head,
html[data-se-mode="dark"] .securends .se-campaign-table .MuiTableCell-head {
  background: var(--se-table-header-bg) !important;
  background-color: var(--se-table-header-bg) !important;
  color: var(--se-table-header-ink) !important;
  border-color: var(--se-table-line) !important;
}

/* Manage Access entitlement LIST view — beat pickels #fff / #f3f4f6 */
html[data-se-mode="dark"] .securends .manage-entitlements-list-scroll,
html[data-se-mode="dark"] .securends .manage-access-entitlements-table-wrap,
html[data-se-mode="dark"] .securends .manage-entitlements-list-view,
html[data-se-mode="dark"] .securends .access-template-entitlements-list,
html[data-se-mode="dark"] .manage-entitlements-list-scroll,
html[data-se-mode="dark"] .manage-access-entitlements-native-table {
  background: var(--se-card, #111827) !important;
  border-color: var(--se-table-line, #263348) !important;
  color: var(--se-table-ink, #e5e7eb) !important;
}

html[data-se-mode="dark"] .securends .manage-access-entitlements-native-table thead th,
html[data-se-mode="dark"] .manage-access-entitlements-native-table thead th {
  background: var(--se-table-header-bg, #151f30) !important;
  background-color: var(--se-table-header-bg, #151f30) !important;
  color: var(--se-table-header-ink, #a7b0c0) !important;
  border-bottom: 1px solid var(--se-table-line, #263348) !important;
  box-shadow: none !important;
}

html[data-se-mode="dark"] .securends .manage-access-entitlements-native-table thead th .manage-access-entitlements-sort-header,
html[data-se-mode="dark"] .manage-access-entitlements-native-table thead th .manage-access-entitlements-sort-header {
  background: transparent !important;
  color: var(--se-table-header-ink, #a7b0c0) !important;
}

html[data-se-mode="dark"] .securends .manage-access-entitlements-native-table tbody td,
html[data-se-mode="dark"] .manage-access-entitlements-native-table tbody td {
  background: var(--bg-table-row, #111827) !important;
  background-color: var(--bg-table-row, #111827) !important;
  color: var(--se-table-ink, #e5e7eb) !important;
  border-bottom: 1px solid var(--se-table-line, #263348) !important;
}

html[data-se-mode="dark"] .securends .manage-access-entitlements-native-table tbody tr:hover td,
html[data-se-mode="dark"] .securends .manage-access-entitlements-native-table .entitlement-list-row.active td,
html[data-se-mode="dark"] .manage-access-entitlements-native-table tbody tr:hover td,
html[data-se-mode="dark"] .manage-access-entitlements-native-table .entitlement-list-row.active td {
  background: var(--bg-table-row-hover, #172235) !important;
}

html[data-se-mode="dark"] .securends .ReactTable .rt-thead.-filters,
html[data-se-mode="dark"] .securends .ReactTable .rt-thead.-filters .rt-th {
  background: var(--se-card) !important;
  color: var(--se-ink) !important;
  border-bottom: 1px solid var(--se-table-line, var(--se-line)) !important;
}

/* App-wide ReactTable / table dividers — one standard dark line via cells (no double borders) */
html[data-se-mode="dark"] .securends .ReactTable .rt-tbody .rt-tr-group,
html[data-se-mode="dark"] .securends .se-data-transformation-page .ReactTable .rt-tr-group {
  border-bottom: none !important;
}

html[data-se-mode="dark"] .securends .ReactTable .rt-tbody .rt-td,
html[data-se-mode="dark"] .securends .ReactTable .rt-thead.-header .rt-th,
html[data-se-mode="dark"] .securends .ReactTable .rt-thead.-header .rt-td,
html[data-se-mode="dark"] .securends .ReactTable .rt-thead.-filters .rt-th,
html[data-se-mode="dark"] .securends table.table tbody td,
html[data-se-mode="dark"] .securends table.table thead th,
html[data-se-mode="dark"] .securends .MuiTableCell-body,
html[data-se-mode="dark"] .securends .MuiTableCell-head,
html[data-se-mode="dark"] .securends .se-data-transformation-page .ReactTable .rt-td {
  border-bottom: 1px solid var(--se-table-line, #263348) !important;
  border-color: var(--se-table-line, #263348) !important;
}

html[data-se-mode="dark"] .securends .ReactTable,
html[data-se-mode="dark"] .securends .se-data-transformation-page .ReactTable {
  border-color: var(--se-table-line, #263348) !important;
}

html[data-se-mode="dark"] .securends .ReactTable .rt-tbody .rt-td,
html[data-se-mode="dark"] .securends .ReactTable .rt-tbody .rt-td a,
html[data-se-mode="dark"] .securends .ReactTable .rt-tbody .rt-td span,
html[data-se-mode="dark"] .securends .ReactTable .rt-tbody .rt-td div,
html[data-se-mode="dark"] .securends .MuiTableCell-body,
html[data-se-mode="dark"] .securends .se-campaign-table .MuiTableCell-body {
  color: var(--se-table-ink) !important;
}

html[data-se-mode="dark"] .securends .ReactTable .rt-tbody .rt-td a {
  color: var(--se-brand) !important;
}

/* TYPE logos — light plate + normal blend (multiply hid dark PNGs on dark rows) */
html[data-se-mode="dark"] .securends .se-type-logo,
html[data-se-mode="dark"] .securends .ReactTable .se-type-logo {
  background: var(--se-type-logo-plate, #ffffff) !important;
  background-color: var(--se-type-logo-plate, #ffffff) !important;
  border: 1px solid var(--se-line, #243044) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  padding: 2px !important;
  box-sizing: border-box !important;
}

html[data-se-mode="dark"] .securends .ep-logo-thumb,
html[data-se-mode="dark"] .securends .ReactTable .rt-td img.ep-logo-thumb {
  background: var(--se-type-logo-plate, #ffffff) !important;
  background-color: var(--se-type-logo-plate, #ffffff) !important;
  border: 1px solid var(--se-line, #243044) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  padding: 2px !important;
  box-sizing: border-box !important;
  mix-blend-mode: normal !important;
}

html[data-se-mode="dark"] .securends .se-type-logo img,
html[data-se-mode="dark"] .securends .ReactTable .se-type-logo img {
  background: transparent !important;
  border-radius: 4px;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  filter: none !important;
}

html[data-se-mode="dark"] .securends .se-type-label {
  color: var(--se-ink) !important;
}

/* Status pills / chips — keep tint readable on dark */
html[data-se-mode="dark"] .securends .se-status-pill,
html[data-se-mode="dark"] .securends .se-status-open,
html[data-se-mode="dark"] .securends .se-status-ready,
html[data-se-mode="dark"] .securends .se-status-closed,
html[data-se-mode="dark"] .securends .se-status-initiated,
html[data-se-mode="dark"] .securends .se-status-progress,
html[data-se-mode="dark"] .securends .ReactTable .badge-success,
html[data-se-mode="dark"] .securends .ReactTable .badge-warning,
html[data-se-mode="dark"] .securends .ReactTable .badge-danger,
html[data-se-mode="dark"] .securends .ReactTable .badge-info,
html[data-se-mode="dark"] .securends .ReactTable .label-success,
html[data-se-mode="dark"] .securends .ReactTable .label-warning,
html[data-se-mode="dark"] .securends .ReactTable .label-danger {
  border: 1px solid transparent;
}

html[data-se-mode="dark"] .securends .se-status-open {
  background: var(--se-brand-tint) !important;
  color: var(--se-brand) !important;
}

html[data-se-mode="dark"] .securends .se-status-ready {
  background: var(--se-ok-tint) !important;
  color: var(--se-ok) !important;
}

html[data-se-mode="dark"] .securends .se-status-closed {
  background: var(--se-raise) !important;
  color: var(--se-ink-2) !important;
}

html[data-se-mode="dark"] .securends .se-status-initiated {
  background: var(--se-warn-tint) !important;
  color: var(--se-warn) !important;
}

html[data-se-mode="dark"] .securends .se-status-progress {
  background: var(--se-brand-tint) !important;
  color: var(--se-accent) !important;
}

/* Dark mode alerts — beat Bootstrap 3/4/5 + inner <p>/<div>/close */
html[data-se-mode="dark"] .securends .alert,
html[data-se-mode="dark"] .alert,
html[data-se-mode="dark"] .securends .alert.alert-dismissible,
html[data-se-mode="dark"] .alert.fade.show {
  background-color: var(--se-raise, #151e2e) !important;
  color: var(--se-ink, #e5e7eb) !important;
  border: 1px solid var(--se-line, #263348) !important;
  box-shadow: none !important;
}

html[data-se-mode="dark"] .securends .alert p,
html[data-se-mode="dark"] .alert p,
html[data-se-mode="dark"] .securends .alert div,
html[data-se-mode="dark"] .alert div {
  color: inherit !important;
  background: transparent !important;
  margin: 0 !important;
}

html[data-se-mode="dark"] .securends .alert-success,
html[data-se-mode="dark"] .alert-success,
html[data-se-mode="dark"] .securends .alert.alert-success {
  background-color: var(--se-ok-tint, rgba(16, 185, 129, 0.16)) !important;
  color: #6ee7b7 !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
}

html[data-se-mode="dark"] .securends .alert-danger,
html[data-se-mode="dark"] .alert-danger,
html[data-se-mode="dark"] .securends .alert.alert-danger,
html[data-se-mode="dark"] .securends .alert.alert-danger.fade.show {
  background-color: var(--se-risk-tint, rgba(239, 68, 68, 0.18)) !important;
  color: #fecaca !important;
  border: 1px solid rgba(239, 68, 68, 0.45) !important;
}

html[data-se-mode="dark"] .securends .alert-warning,
html[data-se-mode="dark"] .alert-warning,
html[data-se-mode="dark"] .securends .alert.alert-warning {
  background-color: var(--se-warn-tint, rgba(245, 158, 11, 0.16)) !important;
  color: #fde68a !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
}

html[data-se-mode="dark"] .securends .alert-info,
html[data-se-mode="dark"] .alert-info,
html[data-se-mode="dark"] .securends .alert.alert-info,
html[data-se-mode="dark"] .securends .headerInfo {
  background-color: rgba(59, 130, 246, 0.16) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
}

html[data-se-mode="dark"] .securends .alert .close,
html[data-se-mode="dark"] .alert .close,
html[data-se-mode="dark"] .securends .alert .btn-close,
html[data-se-mode="dark"] .alert .btn-close {
  color: var(--se-ink, #e5e7eb) !important;
  opacity: 0.85 !important;
  text-shadow: none !important;
  background: transparent !important;
  filter: invert(1) grayscale(1) brightness(1.8);
}

html[data-se-mode="dark"] .securends .alert .close:hover,
html[data-se-mode="dark"] .alert .btn-close:hover {
  opacity: 1 !important;
}

/* Cards / panels / dashboard tiles */
html[data-se-mode="dark"] .securends .card,
html[data-se-mode="dark"] .securends .MuiPaper-root:not(.MuiDrawer-paper):not(.MuiAppBar-root),
html[data-se-mode="dark"] .securends .se-dashboard-panel,
html[data-se-mode="dark"] .securends .se-config-card,
html[data-se-mode="dark"] .securends .endpointConfigCard,
html[data-se-mode="dark"] .securends .latest-campaign,
html[data-se-mode="dark"] .securends .graph {
  background: var(--se-card) !important;
  background-color: var(--se-card) !important;
  color: var(--se-ink) !important;
  border-color: var(--se-line) !important;
}

/* Manage Access type cards — keep selected brand ring (global MuiPaper border-color wins otherwise) */
html[data-se-mode="dark"] .securends .se-request-access-page .manage-access-info-cards > .MuiPaper-root.se-access-type-card--selected,
html[data-se-mode="dark"] .securends .se-request-access-page .se-access-type-cards > .MuiPaper-root.se-access-type-card--selected,
html[data-se-mode="dark"] .securends .se-request-access-page .manage-access-info-cards > .MuiCard-root.se-access-type-card--selected,
html[data-se-mode="dark"] .securends .se-request-access-page .se-access-type-cards > .MuiCard-root.se-access-type-card--selected,
html[data-theme="dark"] .securends .se-request-access-page .MuiCard-root.se-access-type-card--selected,
html.dark .securends .se-request-access-page .MuiCard-root.se-access-type-card--selected {
  border: 2px solid var(--se-brand) !important;
  border-color: var(--se-brand) !important;
  background: var(--se-brand-tint) !important;
  background-color: var(--se-brand-tint) !important;
  box-shadow: 0 0 0 1px var(--se-brand) !important;
  outline: 2px solid var(--se-brand);
  outline-offset: -2px;
}

/* Choose Access To — kill light selected-icon plate (#E3F2FD / aliceblue).
   AppsIcon is a 3×3 filled grid; matching ice plate + ice fill reads as a solid white block. */
html[data-se-mode="dark"] .securends .se-request-access-page .manage-access-info-cards [class*="selectedCardIcon"],
html[data-se-mode="dark"] .securends .se-request-access-page .se-access-type-cards [class*="selectedCardIcon"],
html[data-se-mode="dark"] .securends .se-request-access-page .manage-access-info-cards [class*="iconContainer"],
html[data-se-mode="dark"] .securends .se-request-access-page .se-access-type-cards [class*="iconContainer"],
html[data-theme="dark"] .securends .se-request-access-page [class*="selectedCardIcon"],
html.dark .securends .se-request-access-page [class*="selectedCardIcon"] {
  background: transparent !important;
  background-color: transparent !important;
}

html[data-se-mode="dark"] .securends .se-request-access-page .manage-access-info-cards .MuiSvgIcon-root,
html[data-se-mode="dark"] .securends .se-request-access-page .se-access-type-cards .MuiSvgIcon-root,
html[data-se-mode="dark"] .securends .se-request-access-page .access-type-content .MuiSvgIcon-root,
html[data-theme="dark"] .securends .se-request-access-page .se-access-type-cards .MuiSvgIcon-root,
html.dark .securends .se-request-access-page .se-access-type-cards .MuiSvgIcon-root {
  color: var(--se-brand, #dbeafe) !important;
  fill: var(--se-brand, #dbeafe) !important;
  background: transparent !important;
  background-color: transparent !important;
}

html[data-se-mode="dark"] .securends .se-config-desc,
html[data-se-mode="dark"] .securends .se-config-lead,
html[data-se-mode="dark"] .securends .se-config-copy,
html[data-se-mode="dark"] .securends .text-muted,
html[data-se-mode="dark"] .securends .help-block {
  color: var(--se-ink-2) !important;
}

/* Enabled / status select text that pickels paints maroon */
html[data-se-mode="dark"] .securends .multiselect-selected-text,
html[data-se-mode="dark"] .securends button.multiselect .multiselect-selected-text,
html[data-se-mode="dark"] .securends #fstatus,
html[data-se-mode="dark"] .securends select#fstatus,
html[data-se-mode="dark"] .securends .statusSelect {
  color: var(--se-ink) !important;
}

/* Column config — include body-portaled corner (outside .securends) */
html[data-se-mode="dark"] .securends .se-rt-colcfg-panel,
html[data-se-mode="dark"] .securends .se-rt-colcfg-btn,
html[data-se-mode="dark"] body > .se-rt-colcfg-corner .se-rt-colcfg-btn,
html[data-se-mode="dark"] .se-rt-colcfg-btn,
html[data-se-mode="dark"] .se-rt-colcfg-panel {
  background: var(--se-raise, var(--bg-surface-secondary)) !important;
  color: var(--se-ink) !important;
  border-color: var(--se-line) !important;
  box-shadow: none !important;
}

html[data-se-mode="dark"] body > .se-rt-colcfg-corner .se-rt-colcfg-bars > span,
html[data-se-mode="dark"] .se-rt-colcfg-bars > span {
  background: var(--se-ink-2) !important;
}

html[data-se-mode="dark"] body > .se-rt-colcfg-corner .se-rt-colcfg-btn:hover,
html[data-se-mode="dark"] body > .se-rt-colcfg-corner .se-rt-colcfg-btn.is-open,
html[data-se-mode="dark"] .se-rt-colcfg-btn:hover,
html[data-se-mode="dark"] .se-rt-colcfg-btn.is-open {
  border-color: var(--se-brand) !important;
  background: var(--se-brand-tint) !important;
}

/* Pagination leftovers */
html[data-se-mode="dark"] .securends .ReactTable .-pagination .-btn,
html[data-se-mode="dark"] .securends .ReactTable .-pagination .-center {
  background: var(--se-raise) !important;
  color: var(--se-ink) !important;
  border-color: var(--se-line) !important;
}

html[data-se-mode="dark"] .securends .ReactTable .-pagination .-btn:not([disabled]):hover {
  background: var(--se-btn-bg, #dbeafe) !important;
  color: var(--se-btn-fg, #333333) !important;
}

/* --------------------------------------------------------------------------
   3-dots triggers — FINAL dark override (app-wide)
   Icon only: beat pickels `.dropdown.badge .btn-default { background-color:#fff !important }`
   -------------------------------------------------------------------------- */
html[data-se-mode="dark"] .dropdown.badge .btn.btn-default,
html[data-se-mode="dark"] .dropdown.badge .btn.btn-default.dropdown-toggle,
html[data-se-mode="dark"] .dropdown.badge button.btn.btn-default,
html[data-se-mode="dark"] .configActionDropdown .btn.btn-default,
html[data-se-mode="dark"] .configActionDropdown .btn.btn-default.dropdown-toggle,
html[data-se-mode="dark"] .ActionDropdown > button.btn.btn-default,
html[data-se-mode="dark"] .ActionDropdown > button.btn-default,
html[data-se-mode="dark"] .drop-maindiv .dropdown.badge .btn.btn-default,
html[data-se-mode="dark"] .listofCampTable .drop-maindiv .dropdown.badge .btn.btn-default,
html[data-se-mode="dark"] .listofCampTable .configActionDropdown .btn.btn-default,
html[data-se-mode="dark"] .ReactTable .rt-td .dropdown.badge .btn.btn-default,
html[data-se-mode="dark"] .ReactTable .rt-td .dropdown.badge .btn.btn-default.dropdown-toggle,
html[data-se-mode="dark"] .securends .dropdown.badge .btn.btn-default,
html[data-se-mode="dark"] .securends .dropdown.badge .btn.btn-default.dropdown-toggle,
html[data-se-mode="dark"] .securends .configActionDropdown .btn.btn-default.dropdown-toggle,
html[data-se-mode="dark"] .securends .ActionDropdown > button.btn.btn-default,
html[data-se-mode="dark"] .securends .listofCampTable .drop-maindiv .dropdown.badge .btn.btn-default,
html[data-se-mode="dark"] .securends .ReactTable .rt-td .dropdown.badge .btn.btn-default.dropdown-toggle {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  --bs-btn-bg: transparent !important;
  --bs-btn-hover-bg: transparent !important;
  --bs-btn-active-bg: transparent !important;
  --bs-btn-color: var(--se-ink-2, #a8b3c2) !important;
  --bs-btn-border-color: transparent !important;
  color: var(--se-ink-2, #a8b3c2) !important;
  border: none !important;
  box-shadow: none !important;
}

html[data-se-mode="dark"] .dropdown.badge .btn.btn-default .appGear,
html[data-se-mode="dark"] .dropdown.badge .btn.btn-default .fa-cog,
html[data-se-mode="dark"] .dropdown.badge .btn.btn-default .appGear::before,
html[data-se-mode="dark"] .dropdown.badge .btn.btn-default .fa-cog::before,
html[data-se-mode="dark"] .configActionDropdown .btn.btn-default .appGear,
html[data-se-mode="dark"] .configActionDropdown .btn.btn-default .fa-cog,
html[data-se-mode="dark"] .ActionDropdown .appGear,
html[data-se-mode="dark"] .ActionDropdown .fa-cog,
html[data-se-mode="dark"] .securends .dropdown.badge .btn.btn-default .appGear,
html[data-se-mode="dark"] .securends .dropdown.badge .btn.btn-default .fa-cog,
html[data-se-mode="dark"] .securends .dropdown.badge .btn.btn-default .appGear::before,
html[data-se-mode="dark"] .securends i.appGear.fa-cog,
html[data-se-mode="dark"] .securends i.appGear.fa-cog::before {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: inherit !important;
  border: none !important;
  box-shadow: none !important;
}

html[data-se-mode="dark"] .dropdown.badge .btn.btn-default:hover,
html[data-se-mode="dark"] .dropdown.badge .btn.btn-default.dropdown-toggle:hover,
html[data-se-mode="dark"] .configActionDropdown .btn.btn-default:hover,
html[data-se-mode="dark"] .ActionDropdown > button.btn-default:hover,
html[data-se-mode="dark"] .securends .dropdown.badge .btn.btn-default:hover,
html[data-se-mode="dark"] .securends .listofCampTable .drop-maindiv .dropdown.badge .btn.btn-default:hover {
  background: transparent !important;
  background-color: transparent !important;
  --bs-btn-bg: transparent !important;
  border: none !important;
  color: var(--se-ink, #e8edf4) !important;
}

html[data-se-mode="dark"][data-se-nav="horizontal"] .securends .prod-popup-sidebar,
html[data-se-mode="dark"][data-se-nav="horizontal"] .securends .prod-popup-sidebar .material-icons {
  color: var(--se-ink) !important;
}

/* Dark mode logo strip — black plate; White-Teal-Dot lockup is never inverted */
html[data-se-mode="dark"] .securends .logoMobile,
html[data-se-mode="dark"] .securends .logoMobile > div,
html[data-se-mode="dark"] .securends .logoMobile [class*="logo"],
html[data-se-mode="dark"][data-se-theme="white"] .securends .logoMobile,
html[data-se-mode="dark"][data-se-theme="white"] .securends .logoMobile > div,
html[data-se-mode="dark"][data-se-theme="white"] .securends .logoMobile [class*="logo"] {
  background: var(--se-logo-bg, #000000) !important;
  background-color: var(--se-logo-bg, #000000) !important;
  border-bottom-color: var(--se-nav-border) !important;
}

html[data-se-mode="dark"] .securends .logoMobile img,
html[data-se-mode="dark"][data-se-theme="white"] .securends .logoMobile img,
html[data-se-mode="dark"][data-se-theme="white"] .securends .logoMobile img[src*="White"],
html[data-se-mode="dark"][data-se-theme="white"] .securends .logoMobile img[src*="white"] {
  filter: brightness(0) invert(1) !important;
}

html[data-se-mode="dark"] .securends .logoMobile img.se-brand-logo,
html[data-se-mode="dark"] .securends img.se-brand-logo,
html[data-se-mode="dark"] .securends .logoMobile img[src*="SecurEnds-Full-Logo"],
html[data-se-mode="dark"] .securends .logoMobile img[src*="Full-Logo"],
html[data-se-mode="dark"][data-se-theme="white"] .securends .logoMobile img.se-brand-logo,
html[data-se-mode="dark"][data-se-theme="white"] .securends .logoMobile img[src*="SecurEnds-Full-Logo"],
html[data-se-mode="dark"][data-se-theme="white"] .securends .logoMobile img[src*="Full-Logo"] {
  filter: none !important;
}

/* Login lockup: White-Teal-Dot / Full-Logo never invert (invert turned teal mark white).
   Legacy dark-ink tenant logos still invert for contrast on the dark card. */
html[data-se-mode="dark"] .securends .header-logo,
html[data-se-mode="dark"] .securends .login-wrapper .header-logo,
html[data-se-mode="dark"] .securends .sign-on-section .header-logo,
html[data-theme="dark"] .securends .header-logo,
html.dark .securends .header-logo {
  background: var(--se-card, #111827) !important;
  background-color: var(--se-card, #111827) !important;
}

html[data-se-mode="dark"] .securends .header-logo img,
html[data-se-mode="dark"] .securends .login-wrapper .header-logo img,
html[data-se-mode="dark"] .securends .sign-on-section .header-logo img,
html[data-theme="dark"] .securends .header-logo img,
html.dark .securends .header-logo img {
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0;
  filter: brightness(0) invert(1) !important;
  mix-blend-mode: normal !important;
  box-sizing: content-box !important;
}

html[data-se-mode="dark"] .securends .header-logo img[src*="Full-Logo"],
html[data-se-mode="dark"] .securends .login-wrapper .header-logo img[src*="Full-Logo"],
html[data-se-mode="dark"] .securends .sign-on-section .header-logo img[src*="Full-Logo"],
html[data-se-mode="dark"] .securends .header-logo img[src*="White-Teal"],
html[data-se-mode="dark"] .securends .header-logo img[src*="White"],
html[data-se-mode="dark"] .securends .header-logo img[src*="white"],
html[data-se-mode="dark"] .securends .header-logo img.se-brand-logo,
html[data-se-mode="dark"] .securends .login-wrapper .header-logo img.se-brand-logo,
html[data-se-mode="dark"] .securends .sign-on-section .header-logo img.se-brand-logo {
  filter: none !important;
  background-color: transparent !important;
  padding: 0 !important;
}

/* Login / Reset / Submit — Cursor dark buttons (ice fill + #333 label) */
html[data-se-mode="dark"] .securends .loginmodal-submit,
html[data-se-mode="dark"] .securends button.login.loginmodal-submit,
html[data-se-mode="dark"] .securends .sign-on-section .loginmodal-submit,
html[data-se-mode="dark"] .securends .se-login-panel .loginmodal-submit,
html[data-theme="dark"] .securends .loginmodal-submit,
html.dark .securends .loginmodal-submit {
  background: var(--se-btn-bg, #dbeafe) !important;
  background-color: var(--se-btn-bg, #dbeafe) !important;
  border-color: var(--se-btn-bg, #dbeafe) !important;
  color: var(--se-btn-fg, #333333) !important;
  -webkit-text-fill-color: var(--se-btn-fg, #333333) !important;
}

html[data-se-mode="dark"] .securends .loginmodal-submit:hover,
html[data-se-mode="dark"] .securends button.login.loginmodal-submit:hover,
html[data-se-mode="dark"] .securends .se-login-panel .loginmodal-submit:hover {
  background: var(--se-btn-bg-hover, #bfdbfe) !important;
  background-color: var(--se-btn-bg-hover, #bfdbfe) !important;
  color: var(--se-btn-fg, #333333) !important;
  -webkit-text-fill-color: var(--se-btn-fg, #333333) !important;
}

html[data-se-mode="dark"] .securends .loginmodal-submit .fa-spinner-icon,
html[data-se-mode="dark"] .securends .loginmodal-submit .fa-spinner-icon .fa-spinner,
html[data-se-mode="dark"] .securends .loginmodal-submit .fa-spinner {
  color: var(--se-btn-fg, #333333) !important;
}

html[data-se-mode="dark"]:not([data-se-nav="horizontal"]) .securends .prod-popup-sidebar,
html[data-se-mode="dark"]:not([data-se-nav="horizontal"]) .securends .prod-popup-sidebar .material-icons,
html[data-se-mode="dark"][data-se-theme="white"]:not([data-se-nav="horizontal"]) .securends .prod-popup-sidebar,
html[data-se-mode="dark"][data-se-theme="white"]:not([data-se-nav="horizontal"]) .securends .prod-popup-sidebar .material-icons {
  color: #ffffff !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* --------------------------------------------------------------------------
   Global dark architecture — portals, overlays, scrollbars
   Components rendered outside .securends must still consume semantic tokens.
   Do NOT add horizontal-nav-only color forks here.
   -------------------------------------------------------------------------- */

/* Dark mode overlays — dialogs keep a scrim; Menu/Popover Filters must stay clear.
   Painting every `.MuiBackdrop-root` hid My/All Requests + Approvals content
   while the Filters panel was open. */
html[data-se-mode="dark"] .modal-backdrop,
html[data-se-mode="dark"] .MuiDialog-root .MuiBackdrop-root {
  background-color: var(--overlay-scrim) !important;
}

html[data-se-mode="dark"] .MuiMenu-root .MuiBackdrop-root,
html[data-se-mode="dark"] .MuiPopover-root .MuiBackdrop-root,
html[data-se-mode="dark"] .filter-menu .MuiBackdrop-root,
html[data-se-mode="dark"] .MuiBackdrop-root.MuiBackdrop-invisible,
html.dark .MuiMenu-root .MuiBackdrop-root,
html.dark .filter-menu .MuiBackdrop-root {
  background: transparent !important;
  background-color: transparent !important;
  opacity: 0 !important;
}

html[data-se-mode="dark"] .dropdown-menu,
html[data-se-mode="dark"] .popover,
html[data-se-mode="dark"] .tooltip-inner,
html[data-se-mode="dark"] .MuiPaper-root,
html[data-se-mode="dark"] .MuiMenu-paper,
html[data-se-mode="dark"] .MuiPopover-paper,
html[data-se-mode="dark"] .MuiDialog-paper,
html[data-se-mode="dark"] .MuiTooltip-tooltip,
html[data-se-mode="dark"] .multiselect-container,
html[data-se-mode="dark"] .se-table-action-menu-portaled,
html[data-se-mode="dark"] .ActionDropdown-content,
html[data-se-mode="dark"] .ActionDropdown-content1,
html[data-se-mode="dark"] .se-profile-menu,
html[data-se-mode="dark"] .se-settings-panel,
html[data-se-mode="dark"] .se-rt-colcfg-panel,
html[data-se-mode="dark"] .datepicker,
html[data-se-mode="dark"] .ui-datepicker,
html[data-se-mode="dark"] .react-datepicker,
html[data-se-mode="dark"] .react-datepicker__header,
html[data-se-mode="dark"] .react-datepicker__month-container,
html[data-se-mode="dark"] .react-select__menu,
html[data-se-mode="dark"] .react-select__menu-portal [class*="-menu"],
html[data-se-mode="dark"] .react-select__menu-portal .react-select__menu,
html[data-se-mode="dark"] [class*="menuPortal"] [class*="-menu"] {
  background-color: var(--bg-surface-elevated) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-default) !important;
}

/* Admin profile dropdown is portaled as .securends.SidebarMobile.se-profile-popper
   (same node). Pickels `.SidebarMobile li div { color: #323130 }` and
   `.SidebarMobile li:hover { background: #cce8ff6b }` beat nested
   `.securends .SidebarMobile .se-profile-menu` selectors. Scope to this menu only.
   Use elevated surface (not flat --se-card) so the panel reads against dark page. */
html[data-se-mode="dark"] .se-profile-popper.securends .se-profile-menu,
html[data-se-mode="dark"] body > .se-profile-popper .se-profile-menu,
html[data-se-mode="dark"] .se-profile-popper .MuiPaper-root {
  background: var(--bg-surface-elevated, #1a2436) !important;
  background-color: var(--bg-surface-elevated, #1a2436) !important;
  color: var(--se-ink) !important;
  border-color: var(--border-strong, #334155) !important;
}

html[data-se-mode="dark"] body > .securends.se-profile-popper,
html[data-se-mode="dark"] .se-profile-popper.securends {
  z-index: 20050 !important;
  background: var(--bg-surface-elevated, #1a2436) !important;
  background-color: var(--bg-surface-elevated, #1a2436) !important;
  border-color: var(--border-strong, #334155) !important;
  box-shadow: var(--se-shadow-md) !important;
}

html[data-se-mode="dark"] .se-profile-popper .account-menu,
html[data-se-mode="dark"] .se-profile-popper ul.account-menu {
  background: var(--bg-surface-elevated, #1a2436) !important;
  color: var(--se-ink) !important;
}

/* Avatar initials on ice-blue plate — match Cursor btn fg (#333), not white */
html[data-se-mode="dark"] .se-profile-avatar,
html[data-se-mode="dark"] .securends .se-profile-avatar,
html[data-se-mode="dark"] .se-profile-popper .se-profile-avatar,
html[data-se-mode="dark"] .MuiAppBar-root .se-user-avatar,
html[data-se-mode="dark"] .securends .MuiAppBar-root .se-user-avatar {
  background: var(--se-btn-bg, #dbeafe) !important;
  color: var(--se-btn-fg, #333333) !important;
  -webkit-text-fill-color: var(--se-btn-fg, #333333) !important;
}

html[data-se-mode="dark"] .MuiAppBar-root .se-user-avatar .fa-user,
html[data-se-mode="dark"] .securends .MuiAppBar-root .se-user-avatar .fa-user {
  color: var(--se-btn-fg, #333333) !important;
  -webkit-text-fill-color: var(--se-btn-fg, #333333) !important;
}

html[data-se-mode="dark"] .se-profile-popper .se-profile-head,
html[data-se-mode="dark"] .se-profile-popper li.se-profile-head {
  background: var(--bg-surface-secondary, #151e2e) !important;
  border-bottom-color: var(--border-default, #263348) !important;
}

html[data-se-mode="dark"] .se-profile-popper.SidebarMobile li div,
html[data-se-mode="dark"] .se-profile-popper.SidebarMobile div[role="button"] div,
html[data-se-mode="dark"] .se-profile-popper .se-profile-label,
html[data-se-mode="dark"] .se-profile-popper .se-profile-name,
html[data-se-mode="dark"] .se-profile-popper .MuiMenuItem-root,
html[data-se-mode="dark"] .se-profile-popper .MuiListItem-root,
html[data-se-mode="dark"] .se-profile-popper [role="menuitem"],
html[data-se-mode="dark"] .se-profile-popper .se-profile-row,
html[data-se-mode="dark"] .se-profile-popper .se-settings-trigger,
html[data-se-mode="dark"] .se-profile-popper .se-theme-trigger,
html[data-se-mode="dark"] .se-profile-popper .MuiListItemText-root,
html[data-se-mode="dark"] .se-profile-popper .MuiListItemText-primary {
  color: var(--se-ink) !important;
  -webkit-text-fill-color: var(--se-ink) !important;
}

html[data-se-mode="dark"] .se-profile-popper .se-profile-ico,
html[data-se-mode="dark"] .se-profile-popper .se-profile-ico.fa,
html[data-se-mode="dark"] .se-profile-popper .se-profile-email,
html[data-se-mode="dark"] .se-profile-popper .se-settings-chevron,
html[data-se-mode="dark"] .se-profile-popper .se-settings-label {
  color: var(--se-ink-2) !important;
  -webkit-text-fill-color: var(--se-ink-2) !important;
}

html[data-se-mode="dark"] .se-profile-popper.SidebarMobile li:hover,
html[data-se-mode="dark"] .se-profile-popper.SidebarMobile a div[role="button"]:hover,
html[data-se-mode="dark"] .se-profile-popper .MuiMenuItem-root:hover,
html[data-se-mode="dark"] .se-profile-popper .MuiMenuItem-root:focus,
html[data-se-mode="dark"] .se-profile-popper [role="menuitem"]:hover,
html[data-se-mode="dark"] .se-profile-popper [role="menuitem"]:focus,
html[data-se-mode="dark"] .se-profile-popper .se-profile-row:hover,
html[data-se-mode="dark"] .se-profile-popper .se-theme-trigger:hover,
html[data-se-mode="dark"] .se-profile-popper .se-theme-item.is-open .se-theme-trigger {
  background: var(--bg-table-row-hover, #172235) !important;
  background-color: var(--bg-table-row-hover, #172235) !important;
  color: var(--text-primary, #e5e7eb) !important;
  -webkit-text-fill-color: var(--text-primary, #e5e7eb) !important;
  border-left-color: var(--se-brand, #dbeafe) !important;
}

/* Settings open/hover uses light ice plate — force dark label + gear (#333) */
html[data-se-mode="dark"] .se-profile-popper .se-settings-trigger:hover,
html[data-se-mode="dark"] .se-profile-popper .se-settings-item.is-open .se-settings-trigger,
html[data-se-mode="dark"] .securends.se-profile-popper .se-settings-trigger:hover,
html[data-se-mode="dark"] .securends.se-profile-popper .se-settings-item.is-open .se-settings-trigger,
html[data-se-mode="dark"] body > .securends.se-profile-popper .se-settings-trigger:hover,
html[data-se-mode="dark"] body > .securends.se-profile-popper .se-settings-item.is-open .se-settings-trigger,
html[data-se-mode="dark"] .securends .se-profile-menu .se-settings-trigger:hover,
html[data-se-mode="dark"] .securends .se-profile-menu .se-settings-item.is-open .se-settings-trigger {
  background: var(--se-btn-bg, #dbeafe) !important;
  background-color: var(--se-btn-bg, #dbeafe) !important;
  color: var(--se-btn-fg, #333333) !important;
  -webkit-text-fill-color: var(--se-btn-fg, #333333) !important;
  border-left-color: var(--se-btn-bg, #dbeafe) !important;
}

html[data-se-mode="dark"] .se-profile-popper.SidebarMobile li:hover div,
html[data-se-mode="dark"] .se-profile-popper .MuiMenuItem-root:hover .se-profile-label,
html[data-se-mode="dark"] .se-profile-popper .MuiMenuItem-root:hover .se-profile-ico,
html[data-se-mode="dark"] .se-profile-popper .MuiMenuItem-root:focus .se-profile-label,
html[data-se-mode="dark"] .se-profile-popper a:hover .se-profile-label {
  color: var(--text-primary, #e5e7eb) !important;
  -webkit-text-fill-color: var(--text-primary, #e5e7eb) !important;
}

html[data-se-mode="dark"] .se-profile-popper .se-settings-trigger:hover .se-profile-label,
html[data-se-mode="dark"] .se-profile-popper .se-settings-trigger:hover .se-profile-ico,
html[data-se-mode="dark"] .se-profile-popper .se-settings-trigger:hover .se-settings-chevron,
html[data-se-mode="dark"] .se-profile-popper .se-settings-trigger:hover .fa,
html[data-se-mode="dark"] .se-profile-popper .se-settings-item.is-open .se-settings-trigger .se-profile-label,
html[data-se-mode="dark"] .se-profile-popper .se-settings-item.is-open .se-settings-trigger .se-profile-ico,
html[data-se-mode="dark"] .se-profile-popper .se-settings-item.is-open .se-settings-trigger .se-settings-chevron,
html[data-se-mode="dark"] .se-profile-popper .se-settings-item.is-open .se-settings-trigger .fa,
html[data-se-mode="dark"] .securends.se-profile-popper .se-settings-trigger:hover .se-profile-label,
html[data-se-mode="dark"] .securends.se-profile-popper .se-settings-trigger:hover .se-profile-ico,
html[data-se-mode="dark"] .securends.se-profile-popper .se-settings-trigger:hover .fa,
html[data-se-mode="dark"] .securends.se-profile-popper .se-settings-item.is-open .se-settings-trigger .se-profile-label,
html[data-se-mode="dark"] .securends.se-profile-popper .se-settings-item.is-open .se-settings-trigger .se-profile-ico,
html[data-se-mode="dark"] .securends.se-profile-popper .se-settings-item.is-open .se-settings-trigger .fa,
html[data-se-mode="dark"] .securends .se-profile-menu .se-settings-trigger:hover .se-profile-label,
html[data-se-mode="dark"] .securends .se-profile-menu .se-settings-trigger:hover .se-profile-ico,
html[data-se-mode="dark"] .securends .se-profile-menu .se-settings-trigger:hover .fa,
html[data-se-mode="dark"] .securends .se-profile-menu .se-settings-item.is-open .se-settings-trigger .se-profile-label,
html[data-se-mode="dark"] .securends .se-profile-menu .se-settings-item.is-open .se-settings-trigger .se-profile-ico,
html[data-se-mode="dark"] .securends .se-profile-menu .se-settings-item.is-open .se-settings-trigger .fa {
  color: var(--se-btn-fg, #333333) !important;
  -webkit-text-fill-color: var(--se-btn-fg, #333333) !important;
}

html[data-se-mode="dark"] .react-select__menu-portal [class*="-option"],
html[data-se-mode="dark"] .react-select__menu-portal .react-select__option,
html[data-se-mode="dark"] [class*="menuPortal"] [class*="-option"] {
  color: var(--text-primary) !important;
  background-color: transparent !important;
}

html[data-se-mode="dark"] .react-select__menu-portal [class*="-option"]:hover,
html[data-se-mode="dark"] .react-select__menu-portal [class*="-option"][class*="focused"],
html[data-se-mode="dark"] .react-select__menu-portal .react-select__option:hover,
html[data-se-mode="dark"] .react-select__menu-portal .react-select__option--is-focused,
html[data-se-mode="dark"] [class*="menuPortal"] [class*="-option"]:hover,
html[data-se-mode="dark"] [class*="menuPortal"] [class*="-option"][class*="focused"],
html[data-se-mode="dark"] .mindmap-select__option--is-focused,
html[data-se-mode="dark"] .mindmap-select__option:hover,
html[data-theme="dark"] .mindmap-select__option--is-focused,
html[data-theme="dark"] .mindmap-select__option:hover,
html.dark .mindmap-select__option--is-focused,
html.dark .mindmap-select__option:hover {
  background-color: var(--bg-table-row-hover) !important;
  background: var(--bg-table-row-hover) !important;
  color: var(--text-primary) !important;
}

html[data-se-mode="dark"] .react-select__menu-portal [class*="-option"][class*="selected"],
html[data-se-mode="dark"] .react-select__menu-portal .react-select__option--is-selected,
html[data-se-mode="dark"] [class*="menuPortal"] [class*="-option"][class*="selected"],
html[data-se-mode="dark"] .mindmap-select__option--is-selected,
html[data-theme="dark"] .mindmap-select__option--is-selected,
html.dark .mindmap-select__option--is-selected {
  background-color: rgba(72, 190, 180, 0.22) !important;
  background: rgba(72, 190, 180, 0.22) !important;
  color: var(--text-primary, #e5e7eb) !important;
}

html[data-se-mode="dark"] .mindmap-select__menu,
html[data-se-mode="dark"] .mindmap-select__menu-list,
html[data-theme="dark"] .mindmap-select__menu,
html.dark .mindmap-select__menu {
  background: var(--bg-surface-elevated, #1a2436) !important;
  background-color: var(--bg-surface-elevated, #1a2436) !important;
  border-color: var(--border-default, #263348) !important;
}

html[data-se-mode="dark"] .mindmap-select__option,
html[data-theme="dark"] .mindmap-select__option,
html.dark .mindmap-select__option {
  color: var(--text-primary, #e5e7eb) !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Full-viewport Modal/Menu/Popover roots must stay clear.
   Do NOT paint them via a broad `[class*="-menu"]` rule — that matched
   `.filter-menu` on the Modal root and hid My/All Requests + Approvals. */
html[data-se-mode="dark"] .MuiModal-root,
html[data-se-mode="dark"] .MuiMenu-root,
html[data-se-mode="dark"] .MuiPopover-root,
html[data-se-mode="dark"] .filter-menu {
  background: transparent !important;
  background-color: transparent !important;
}

html[data-se-mode="dark"] .notification-container .notification,
html[data-se-mode="dark"] .toast,
html[data-se-mode="dark"] .Toastify__toast {
  background-color: var(--bg-surface-elevated) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-default) !important;
}

/* Dark scrollbars (where supported) */
html[data-se-mode="dark"],
html[data-se-mode="dark"] body,
html[data-se-mode="dark"] .securends,
html[data-se-mode="dark"] .se-hnav-scroller,
html[data-se-mode="dark"] .MuiDrawer-paper,
html[data-se-mode="dark"] .ReactTable .rt-table {
  scrollbar-color: #334155 #0b1220;
}

html[data-se-mode="dark"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html[data-se-mode="dark"] ::-webkit-scrollbar-track {
  background: #0b1220;
}

html[data-se-mode="dark"] ::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 8px;
}

html[data-se-mode="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Status badge soft tones (dark) */
html[data-se-mode="dark"] .securends .badge-success,
html[data-se-mode="dark"] .securends .label-success,
html[data-se-mode="dark"] .securends .se-status--ok,
html[data-se-mode="dark"] .securends .se-status--success {
  background: rgba(16, 185, 129, 0.14) !important;
  color: #34d399 !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
}

html[data-se-mode="dark"] .securends .badge-warning,
html[data-se-mode="dark"] .securends .label-warning,
html[data-se-mode="dark"] .securends .se-status--warn {
  background: rgba(245, 158, 11, 0.14) !important;
  color: #fbbf24 !important;
}

html[data-se-mode="dark"] .securends .badge-danger,
html[data-se-mode="dark"] .securends .label-danger,
html[data-se-mode="dark"] .securends .se-status--error {
  background: rgba(239, 68, 68, 0.14) !important;
  color: #f87171 !important;
}

/* --------------------------------------------------------------------------
   Action 3-dots / gear + portaled menus — FINAL (must beat pickels #fff)
   Triggers stay inside .securends; menus portal to body (lose .securends).
   -------------------------------------------------------------------------- */

/* Triggers: icon only, no white plate (beat pickels-v3 .dropdown.badge .btn-default) */
html[data-se-mode="dark"] .dropdown.badge,
html[data-se-mode="dark"] .dropdown.badge.configActionDropdown,
html[data-se-mode="dark"] .configActionDropdown,
html[data-se-mode="dark"] .ActionDropdown,
html:has(.securends[data-se-mode="dark"]) .dropdown.badge,
html:has(.securends[data-se-mode="dark"]) .configActionDropdown,
html:has(.securends[data-se-mode="dark"]) .ActionDropdown {
  background: transparent !important;
  background-color: transparent !important;
}

html[data-se-mode="dark"] .dropdown.badge .btn-default,
html[data-se-mode="dark"] .dropdown.badge .btn.btn-default,
html[data-se-mode="dark"] .dropdown.badge .btn.btn-default.dropdown-toggle,
html[data-se-mode="dark"] .dropdown.badge button.btn.btn-default,
html[data-se-mode="dark"] .dropdown.badge .btn-default .appGear,
html[data-se-mode="dark"] .dropdown.badge .btn-default .fa-cog,
html[data-se-mode="dark"] .dropdown.badge .btn-default .appGear::before,
html[data-se-mode="dark"] .dropdown.badge .btn-default .fa-cog::before,
html[data-se-mode="dark"] .configActionDropdown .btn-default,
html[data-se-mode="dark"] .configActionDropdown .btn.btn-default,
html[data-se-mode="dark"] .configActionDropdown .btn.btn-default.dropdown-toggle,
html[data-se-mode="dark"] .configActionDropdown .appGear,
html[data-se-mode="dark"] .configActionDropdown .fa-cog,
html[data-se-mode="dark"] .ActionDropdown > button,
html[data-se-mode="dark"] .ActionDropdown > button.btn-default,
html[data-se-mode="dark"] .ActionDropdown > button.btn.btn-default,
html[data-se-mode="dark"] .ActionDropdown .appGear,
html[data-se-mode="dark"] .ActionDropdown .fa-cog,
html[data-se-mode="dark"] .ReactTable .rt-td .dropdown.badge .btn-default,
html[data-se-mode="dark"] .ReactTable .rt-td .dropdown.badge .btn.btn-default.dropdown-toggle,
html[data-se-mode="dark"] .listofCampTable .dropdown.badge .btn-default,
html[data-se-mode="dark"] .drop-maindiv .dropdown.badge .btn-default,
html[data-se-mode="dark"] .securends .dropdown.badge .btn-default,
html[data-se-mode="dark"] .securends .dropdown.badge .btn.btn-default.dropdown-toggle,
html[data-se-mode="dark"] .securends .dropdown.badge .btn-default .appGear,
html[data-se-mode="dark"] .securends .dropdown.badge .btn-default .fa-cog,
html[data-se-mode="dark"] .securends .dropdown.badge .btn-default .appGear::before,
html[data-se-mode="dark"] .securends .dropdown.badge .btn-default .fa-cog::before,
html[data-se-mode="dark"] .securends i.appGear.fa-cog,
html[data-se-mode="dark"] .securends i.appGear.fa-cog::before,
html[data-se-mode="dark"] .securends .ActionDropdown > button.btn,
html[data-se-mode="dark"] .securends .ActionDropdown > button.btn.btn-default,
html[data-se-mode="dark"] .securends .ActionDropdown > button .appGear,
html[data-se-mode="dark"] .securends .ActionDropdown > button .appGear::before,
html[data-se-mode="dark"] .securends .ActionDropdown > button .fa-cog,
html[data-se-mode="dark"] .securends .ActionDropdown > button .fa-cog::before,
html[data-se-mode="dark"] .securends .ReactTable .ActionDropdown > button.btn,
html[data-se-mode="dark"] .securends .ReactTable .ActionDropdown > button.btn.btn-default,
html[data-se-mode="dark"] .securends .ReactTable .rt-td .ActionDropdown > button.btn,
html[data-se-mode="dark"] .securends .ReactTable .rt-td .ActionDropdown > button.btn.btn-default,
html:has(.securends[data-se-mode="dark"]) .dropdown.badge .btn-default,
html:has(.securends[data-se-mode="dark"]) .dropdown.badge .btn.btn-default.dropdown-toggle,
html:has(.securends[data-se-mode="dark"]) .dropdown.badge .btn-default .appGear,
html:has(.securends[data-se-mode="dark"]) .dropdown.badge .btn-default .fa-cog,
html:has(.securends[data-se-mode="dark"]) .dropdown.badge .btn-default .appGear::before,
html:has(.securends[data-se-mode="dark"]) .configActionDropdown .btn-default,
html:has(.securends[data-se-mode="dark"]) .ActionDropdown > button {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  --bs-btn-bg: transparent !important;
  --bs-btn-hover-bg: transparent !important;
  --bs-btn-active-bg: transparent !important;
  /* Ice dots on dark rows (not ice plate) */
  --bs-btn-color: var(--se-brand, #dbeafe) !important;
  --bs-btn-border-color: transparent !important;
  color: var(--se-brand, #dbeafe) !important;
  -webkit-text-fill-color: var(--se-brand, #dbeafe) !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-se-mode="dark"] .dropdown.badge .btn-default:hover,
html[data-se-mode="dark"] .dropdown.badge .btn.btn-default.dropdown-toggle:hover,
html[data-se-mode="dark"] .configActionDropdown .btn-default:hover,
html[data-se-mode="dark"] .ActionDropdown > button:hover,
html[data-se-mode="dark"] .securends .ActionDropdown > button.btn:hover,
html[data-se-mode="dark"] .securends .ReactTable .ActionDropdown > button.btn:hover,
html:has(.securends[data-se-mode="dark"]) .dropdown.badge .btn-default:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--se-btn-bg-hover, #bfdbfe) !important;
  -webkit-text-fill-color: var(--se-btn-bg-hover, #bfdbfe) !important;
  --bs-btn-bg: transparent !important;
  border: none !important;
}

/* Portaled action menus (body > …) — dark elevated surface + readable ink */
html[data-se-mode="dark"] body > .se-table-action-menu-portaled,
html[data-se-mode="dark"] body > .dropdown-menu.se-table-action-menu-portaled,
html[data-se-mode="dark"] body > .ActionDropdown-content.se-table-action-menu-portaled,
html[data-se-mode="dark"] body > .ActionDropdown-content,
html[data-se-mode="dark"] body > .ActionDropdown-content1,
html[data-se-mode="dark"] body > .dropdown-menu.campaignPopUp,
html[data-se-mode="dark"] body > .dropdown-menu.campaignPopUpCO,
html[data-se-mode="dark"] body > .dropdown-menu.leftAlign,
html[data-se-mode="dark"] .se-table-action-menu-portaled,
html[data-se-mode="dark"] .se-table-action-menu-portaled.dropdown-menu,
html[data-se-mode="dark"] .se-table-action-menu-portaled.ActionDropdown-content,
html:has(.securends[data-se-mode="dark"]) body > .se-table-action-menu-portaled,
html:has(.securends[data-se-mode="dark"]) body > .dropdown-menu.campaignPopUp,
html:has(.securends[data-se-mode="dark"]) body > .ActionDropdown-content,
html:has(.securends[data-se-mode="dark"]) .se-table-action-menu-portaled {
  --bs-dropdown-bg: #1a2436 !important;
  --bs-dropdown-color: #e5e7eb !important;
  --bs-dropdown-border-color: #263348 !important;
  --bs-dropdown-link-color: #e5e7eb !important;
  --bs-dropdown-link-hover-bg: #172235 !important;
  --bs-dropdown-link-hover-color: #e5e7eb !important;
  --se-card: #1a2436;
  --se-ink: #e5e7eb;
  --se-ink-2: #a7b0c0;
  --se-raise: #172235;
  --se-row-hover: #172235;
  --se-line: #263348;
  background: #1a2436 !important;
  background-color: #1a2436 !important;
  color: #e5e7eb !important;
  border: 1px solid #263348 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

html[data-se-mode="dark"] .se-table-action-menu-portaled li > a,
html[data-se-mode="dark"] .se-table-action-menu-portaled li > a *,
html[data-se-mode="dark"] .se-table-action-menu-portaled .child,
html[data-se-mode="dark"] .se-table-action-menu-portaled a.child,
html[data-se-mode="dark"] .se-table-action-menu-portaled .child i.fa,
html[data-se-mode="dark"] .se-table-action-menu-portaled li > a i,
html[data-se-mode="dark"] body > .dropdown-menu.campaignPopUp li > a,
html[data-se-mode="dark"] body > .dropdown-menu.campaignPopUp li > a i,
html[data-se-mode="dark"] body > .dropdown-menu.campaignPopUpCO li > a,
html[data-se-mode="dark"] body > .dropdown-menu.leftAlign li > a,
html[data-se-mode="dark"] body > .ActionDropdown-content .child,
html[data-se-mode="dark"] body > .ActionDropdown-content a,
html[data-se-mode="dark"] body > .ActionDropdown-content .child i.fa,
html:has(.securends[data-se-mode="dark"]) .se-table-action-menu-portaled li > a,
html:has(.securends[data-se-mode="dark"]) .se-table-action-menu-portaled .child,
html:has(.securends[data-se-mode="dark"]) body > .dropdown-menu.campaignPopUp li > a {
  color: #e5e7eb !important;
  background: transparent !important;
  background-color: transparent !important;
}

html[data-se-mode="dark"] .se-table-action-menu-portaled li > a:hover,
html[data-se-mode="dark"] .se-table-action-menu-portaled .child:hover,
html[data-se-mode="dark"] .se-table-action-menu-portaled a.child:hover,
html[data-se-mode="dark"] body > .dropdown-menu.campaignPopUp li > a:hover,
html[data-se-mode="dark"] body > .ActionDropdown-content .child:hover,
html:has(.securends[data-se-mode="dark"]) .se-table-action-menu-portaled li > a:hover,
html:has(.securends[data-se-mode="dark"]) .se-table-action-menu-portaled .child:hover {
  background: #172235 !important;
  background-color: #172235 !important;
  color: #e5e7eb !important;
}

html[data-se-mode="dark"] .se-table-action-menu-portaled .ActionDropdown-content1,
html[data-se-mode="dark"] body > .ActionDropdown-content1,
html:has(.securends[data-se-mode="dark"]) .se-table-action-menu-portaled .ActionDropdown-content1 {
  background: #1a2436 !important;
  background-color: #1a2436 !important;
  color: #e5e7eb !important;
  border-color: #263348 !important;
}

/* Entitlement tiles: no paper fill (beats MuiPaper --se-card / #fff) */
html[data-se-mode] .securends .cardGridContent .role-card.entitlement-card,
html[data-se-mode] .securends .cardGridContent .role-card.entitlement-card.MuiPaper-root,
html[data-se-mode] .securends .cardGridContent .role-card.entitlement-card.MuiCard-root,
html[data-se-theme] .securends .cardGridContent .role-card.entitlement-card,
html[data-se-theme] .securends .cardGridContent .role-card.entitlement-card.MuiPaper-root,
html[data-se-mode="dark"] .securends .cardGridContent .role-card.entitlement-card.MuiPaper-root:not(.MuiDrawer-paper),
html[data-se-mode="dark"] .securends .se-request-access-page .role-card.entitlement-card.MuiPaper-root:not(.MuiDrawer-paper) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-se-mode] .securends .cardGridContent .role-card.entitlement-card .MuiCardContent-root,
html[data-se-mode] .securends .cardGridContent .role-card.entitlement-card .card-content,
html[data-se-theme] .securends .cardGridContent .role-card.entitlement-card .MuiCardContent-root {
  background: transparent !important;
  background-color: transparent !important;
}

html[data-se-theme] .securends .cardGridContent .role-card.entitlement-card .card-header,
html[data-se-mode] .securends .cardGridContent .role-card.entitlement-card .card-header {
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-se-theme] .securends .cardGridContent .role-card.entitlement-card .card-header .MuiTypography-gutterBottom,
html[data-se-mode] .securends .cardGridContent .role-card.entitlement-card .card-header .MuiTypography-root {
  border-bottom: 0 !important;
  text-decoration: none !important;
}

html[data-se-theme] .securends .cardGridContent .role-card.entitlement-card > .MuiCardContent-root > .MuiTypography-colorTextSecondary,
html[data-se-mode] .securends .cardGridContent .role-card.entitlement-card > .MuiCardContent-root > .MuiTypography-colorTextSecondary {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

html[data-se-theme] .securends .cardGridContent .role-card.entitlement-card .entitlement-meta-sep,
html[data-se-mode] .securends .cardGridContent .role-card.entitlement-card .entitlement-meta-sep {
  background: var(--se-line) !important;
  background-color: var(--se-line) !important;
  opacity: 1 !important;
  height: 1px !important;
  min-height: 1px !important;
}

html[data-se-theme] .securends .cardGridContent .role-card.entitlement-card .card-footer,
html[data-se-mode] .securends .cardGridContent .role-card.entitlement-card .card-footer,
html[data-se-mode="dark"] .securends .role-card.entitlement-card .card-footer,
html[data-se-mode="dark"] .securends .se-request-access-page .role-card.entitlement-card .card-footer,
html[data-se-mode="dark"] .securends .card-footer {
  border-top: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--se-ink-2) !important;
  box-shadow: none !important;
}

html[data-se-mode="dark"] .securends .role-card.entitlement-card .card-footer strong,
html[data-se-mode="dark"] .securends .role-card.entitlement-card .card-footer .MuiTypography-root,
html[data-se-mode="dark"] .securends .card-footer .MuiTypography-root {
  background: transparent !important;
  color: var(--se-ink-2) !important;
}

/* Right drawers (`modal right fade` / `.in`) match Campaign Info (55%).
   Access Request left-nav screens keep their own widths. */
html[data-se-theme]:not(:has(.se-ar-page)) .modal.right:not(.allRequest):not(.access-template-modal):not(.iga) .modal-dialog:not(.products-menu-modal),
html[data-se-theme]:not(:has(.se-ar-page)) .modal.right.fade:not(.allRequest):not(.access-template-modal):not(.iga) .modal-dialog:not(.products-menu-modal),
html[data-se-theme]:not(:has(.se-ar-page)) .modal.right.fade.in:not(.allRequest):not(.access-template-modal):not(.iga) .modal-dialog:not(.products-menu-modal),
html[data-se-theme]:not(:has(.se-ar-page)) .modal.right.fade.show:not(.allRequest):not(.access-template-modal):not(.iga) .modal-dialog:not(.products-menu-modal),
html[data-se-theme]:not(:has(.se-ar-page)) .modal.right:not(.allRequest):not(.access-template-modal):not(.iga) .modal-dialog.sidebar-modal,
html[data-se-theme]:not(:has(.se-ar-page)) .modal.right:not(.allRequest):not(.access-template-modal):not(.iga) .modal-dialog.custom-dialog {
  width: 55% !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* Global React-Datepicker Selected Day Contrast */
.react-datepicker__day--selected,
.react-datepicker__day--keyboard-selected,
.react-datepicker__day--in-selecting-range,
.react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__quarter-text--selected,
.securends .react-datepicker__day--selected,
.securends .react-datepicker__day--keyboard-selected,
div.react-datepicker__day.react-datepicker__day--selected,
div.react-datepicker__day.react-datepicker__day--keyboard-selected {
  background-color: var(--se-brand, #1e3a8a) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

.react-datepicker__day--selected:hover,
.react-datepicker__day--keyboard-selected:hover,
div.react-datepicker__day.react-datepicker__day--selected:hover,
div.react-datepicker__day.react-datepicker__day--keyboard-selected:hover {
  background-color: var(--se-brand-hover, #1d4ed8) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ── Global Safeguard: Condition List Group Transparency ── */
.securends .card.sor-header .loggerViewScroll,
.securends .card.sor-header .list-group,
.securends .card.sor-header .card-body > .loggerViewScroll,
.card.sor-header .loggerViewScroll,
.card.sor-header .list-group,
.card.sor-header .loggerViewScroll.list-group {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Campaigns Export → Reviewers flyout — same surface as the gear items */
html[data-se-mode="dark"] .ActionDropdown-content .dropdown-content,
html[data-se-mode="dark"] .campaignPopUp .dropdown-content,
html[data-se-mode="dark"] .campaignPopUpCO .dropdown-content,
html.dark .ActionDropdown-content .dropdown-content,
html:has(.securends[data-se-mode="dark"]) .ActionDropdown-content .dropdown-content {
  background: #1a2436 !important;
  background-color: #1a2436 !important;
  color: #e5e7eb !important;
  border: 1px solid #263348 !important;
}

html[data-se-mode="dark"] .ActionDropdown-content .dropdown-content .child,
html[data-se-mode="dark"] .campaignPopUp .dropdown-content .child,
html[data-se-mode="dark"] .dropdown-content .child,
html.dark .ActionDropdown-content .dropdown-content .child,
html:has(.securends[data-se-mode="dark"]) .dropdown-content .child {
  color: #e5e7eb !important;
  background: transparent !important;
  border-bottom: none !important;
}

html[data-se-mode="dark"] .ActionDropdown-content .dropdown-content .child:hover,
html[data-se-mode="dark"] .dropdown-content .child:hover {
  background: #172235 !important;
  color: #e5e7eb !important;
}

/* Global Dark Mode Safeguard: MUI Disabled Form Control Labels & Radio Buttons */
html[data-se-mode="dark"] .securends .MuiFormControlLabel-root.Mui-disabled .MuiFormControlLabel-label,
html[data-se-mode="dark"] .securends .MuiFormControlLabel-label.Mui-disabled,
html[data-theme="dark"] .securends .MuiFormControlLabel-root.Mui-disabled .MuiFormControlLabel-label,
html[data-theme="dark"] .securends .MuiFormControlLabel-label.Mui-disabled,
html.dark .securends .MuiFormControlLabel-root.Mui-disabled .MuiFormControlLabel-label,
html.dark .securends .MuiFormControlLabel-label.Mui-disabled {
  color: var(--text-secondary, #a7b0c0) !important;
  -webkit-text-fill-color: var(--text-secondary, #a7b0c0) !important;
  opacity: 0.85 !important;
}

/* Pencil / info / radios — beat pickels `.fa-pencil-square-o { color:#222 }` */
html[data-se-mode="dark"] .fa-pencil-square-o,
html[data-se-mode="dark"] .fa-pencil,
html[data-se-mode="dark"] .fa-info-circle,
html[data-se-mode="dark"] .modal-title .fa-pencil-square-o,
html[data-se-mode="dark"] .iga-justification-modal .fa-pencil-square-o,
html[data-se-mode="dark"] h4#ModalHeader .fa.fa-pencil-square-o,
html[data-se-mode="dark"] .securends .fa-pencil-square-o,
html[data-se-mode="dark"] .securends .fa-info-circle {
  color: var(--se-brand, #dbeafe) !important;
}

/* Manage Access — "Application: …" label (MUI Typography defaults to near-black) */
html[data-se-mode="dark"] .securends .se-request-access-page .manage-access-application-header,
html[data-se-mode="dark"] .securends .se-request-access-page .manage-access-application-header .MuiTypography-root,
html[data-se-mode="dark"] .securends .se-request-access-page .manage-access-application-header .MuiTypography-body1,
html[data-se-mode="dark"] .securends .se-request-access-page .manage-access-application-header b,
html[data-se-mode="dark"] .securends .se-request-access-page .MuiCardContent-root,
html[data-se-mode="dark"] .securends .se-request-access-page .MuiCardContent-root .MuiTypography-root,
html[data-se-mode="dark"] .securends .se-request-access-page .MuiTypography-root,
html[data-se-mode="dark"] .securends .se-request-access-page .MuiTypography-body1,
html[data-se-mode="dark"] .securends .se-request-access-page .MuiTypography-body2 {
  color: var(--se-ink, #e5e7eb) !important;
}

html[data-se-mode="dark"] .securends .se-request-access-page .manage-access-application-header .fa-pencil-square-o,
html[data-se-mode="dark"] .securends .se-request-access-page .manage-access-application-header .MuiIconButton-root .MuiSvgIcon-root {
  color: var(--se-brand, #dbeafe) !important;
}

/* ── Dark: expand / collapse icons, app-wide ──
   MUI icons v3 carry no per-icon class, so collapse glyphs are matched by their
   exact SVG path. :where() keeps specificity ~0 so any screen-specific !important
   color (sidebar, Generic Agent, Direct Elections…) still wins. Icons with an
   explicit MUI color prop or inline color are left alone. */
html[data-se-mode="dark"] :where(.MuiExpansionPanelSummary-expandIcon, .MuiAccordionSummary-expandIcon):where(:not([class*="MuiIconButton-color"]):not([style*="color"])),
html[data-se-mode="dark"] :where(svg.MuiSvgIcon-root):where(:not([class*="MuiSvgIcon-color"]):not([style*="color"])):where(
  :has(> path[d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"]),
  :has(> path[d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"]),
  :has(> path[d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"]),
  :has(> path[d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"]),
  :has(> path[d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"]),
  :has(> path[d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"])
) {
  color: var(--se-ink-2) !important;
  fill: currentColor !important;
}

html[data-se-mode="dark"] :where(.MuiExpansionPanelSummary-expandIcon, .MuiAccordionSummary-expandIcon):where(:not([class*="MuiIconButton-color"]):not([style*="color"])) .MuiSvgIcon-root {
  color: inherit !important;
}

html[data-se-mode="dark"] :where(.MuiExpansionPanelSummary-expandIcon, .MuiAccordionSummary-expandIcon):where(:not([class*="MuiIconButton-color"]):not([style*="color"])):hover,
html[data-se-mode="dark"] :where(.MuiIconButton-root:not([class*="MuiIconButton-color"]):not([style*="color"])):where(:hover) > .MuiIconButton-label > :where(svg.MuiSvgIcon-root):where(
  :has(> path[d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"]),
  :has(> path[d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"]),
  :has(> path[d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"]),
  :has(> path[d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"]),
  :has(> path[d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"]),
  :has(> path[d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"])
) {
  color: var(--se-ink) !important;
}

/* react-table row expander caret — default rgba(0,0,0,.8) vanishes on dark rows */
html[data-se-mode="dark"] :where(.ReactTable .rt-expander)::after {
  border-top-color: var(--se-ink-2) !important;
}

html[data-se-mode="dark"] .securends .MuiRadio-root,
html[data-se-mode="dark"] .modal .MuiRadio-root,
html[data-se-mode="dark"] .MuiDialog-paper .MuiRadio-root {
  color: var(--se-ink-3) !important;
}

html[data-se-mode="dark"] .securends .MuiRadio-colorPrimary.Mui-checked,
html[data-se-mode="dark"] .securends .MuiRadio-root.Mui-checked,
html[data-se-mode="dark"] .modal .MuiRadio-root.Mui-checked,
html[data-se-mode="dark"] .MuiDialog-paper .MuiRadio-root.Mui-checked {
  color: var(--se-brand, #dbeafe) !important;
}

html[data-se-mode="dark"] .securends .MuiSvgIcon-root.MuiRadio-svg,
html[data-se-mode="dark"] .securends .MuiRadio-root.Mui-checked .MuiSvgIcon-root {
  fill: var(--se-brand, #dbeafe) !important;
  color: var(--se-brand, #dbeafe) !important;
}

/* Compact chips / selected-user pills — no filled “highlighter” plate */
html[data-se-mode="dark"] .securends .MuiChip-root,
html[data-se-mode="dark"] .securends .se-request-access-page .MuiChip-root {
  height: 24px !important;
  min-height: 24px !important;
  font-size: 12px !important;
  background: transparent !important;
  background-color: transparent !important;
}

html[data-se-mode="dark"] .securends .se-request-access-page ul[style*="flex-wrap"],
html[data-se-mode="dark"] .securends .se-request-access-page ul[style*="list-style"] {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 6px 8px !important;
  margin: 8px 0 !important;
  background: var(--se-card) !important;
  border: 1px solid var(--se-line) !important;
  border-radius: var(--se-r, 10px) !important;
}

html[data-se-mode="dark"] .securends .se-request-access-page ul[style*="flex-wrap"] > li,
html[data-se-mode="dark"] .securends .se-request-access-page ul[style*="list-style"] > li {
  display: inline-flex !important;
  align-items: center !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 10px !important;
  margin: 4px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid var(--se-line) !important;
  border-radius: 8px !important;
  color: var(--se-ink) !important;
  line-height: 28px !important;
  box-shadow: none !important;
}

html[data-se-mode="dark"] .securends .se-request-access-page ul[style*="flex-wrap"] .MuiSvgIcon-root,
html[data-se-mode="dark"] .securends .se-request-access-page ul[style*="list-style"] .MuiSvgIcon-root {
  color: var(--se-brand, #dbeafe) !important;
  font-size: 16px !important;
}

/* Selected app tabs — remove brand-tint highlighter fill; keep text/indicator only */
html[data-se-mode="dark"] .securends .se-request-access-page .tab-cnt .MuiTab-root,
html[data-se-mode="dark"] .securends .se-request-access-page .tab-cnt .MuiTab-root:hover,
html[data-se-mode="dark"] .securends .se-request-access-page .tab-cnt .MuiTab-root.Mui-selected,
html[data-se-mode="dark"] .securends .se-request-access-page .credential-tab-cnt .MuiTab-root,
html[data-se-mode="dark"] .securends .se-request-access-page .credential-tab-cnt .MuiTab-root.Mui-selected,
html[data-se-mode="dark"] .securends .tab-cnt .MuiTab-root.Mui-selected,
html[data-se-mode="dark"] .securends .tab-cnt .MuiTab-root:hover {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

html[data-se-mode="dark"] .securends .se-request-access-page .tab-cnt .MuiTab-root .tab-app-name,
html[data-se-mode="dark"] .securends .se-request-access-page .tab-cnt .MuiTab-root .tab-app-name-content,
html[data-se-mode="dark"] .securends .se-request-access-page .tab-cnt .MuiTab-wrapper {
  background: transparent !important;
  background-color: transparent !important;
}

html[data-se-mode="dark"] .securends .se-request-access-page .MuiOutlinedInput-root,
html[data-se-mode="dark"] .securends .se-request-access-page .MuiInputBase-root {
  min-height: 36px !important;
}

html[data-se-mode="dark"] .securends .se-request-access-page .MuiInputBase-input,
html[data-se-mode="dark"] .securends .se-request-access-page .MuiOutlinedInput-input {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Dark mode ReactTable column headers — vertically center labels (app-wide).
   Center the cell + .rt-resizable-header-content only; keep kit display:contents
   on nested wrappers so sort arrows / checkboxes stay intact. */
html[data-se-mode="dark"] .securends .ReactTable .rt-thead.-header .rt-th,
html[data-se-mode="dark"] .securends .ReactTable .rt-thead.-header .rt-td,
html[data-se-mode="dark"] .securends .ReactTable .rt-thead.-header .rt-th.rt-resizable-header {
  display: flex !important;
  align-items: center !important;
  height: var(--se-table-colhead, 36px) !important;
  min-height: var(--se-table-colhead, 36px) !important;
  max-height: var(--se-table-colhead, 36px) !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
  line-height: 1.25 !important;
}

html[data-se-mode="dark"] .securends .ReactTable .rt-thead.-header .rt-resizable-header-content,
html[data-se-mode="dark"] .securends .ReactTable .rt-thead.-header .rt-th > .rt-resizable-header-content {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 0 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   3-dots ACTION triggers — last word (app-wide dark)
   No ice/white plate; ice ink on the ellipsis only.
   -------------------------------------------------------------------------- */
html[data-se-mode="dark"] .securends .ActionDropdown > button.btn.btn-default,
html[data-se-mode="dark"] .securends .ActionDropdown > button.btn,
html[data-se-mode="dark"] .securends .ReactTable .ActionDropdown > button.btn.btn-default,
html[data-se-mode="dark"] .securends .ReactTable .rt-tbody .rt-td .ActionDropdown > button.btn.btn-default,
html[data-se-mode="dark"] .securends .ReactTable .rt-tbody .rt-td .ActionDropdown > button.btn,
html[data-se-mode="dark"] .securends .dropdown.badge.configActionDropdown .ActionDropdown > button.btn.btn-default,
html[data-se-mode="dark"] .securends .dropdown.badge .ActionDropdown > button.btn.btn-default,
html[data-se-mode="dark"] .securends .configActionDropdown .btn.btn-default:not(.multiselect),
html[data-se-mode="dark"] .securends .dropdown.badge > .btn.btn-default:not(.multiselect),
html[data-se-mode="dark"] .securends .iamUsersTbl .ActionDropdown > button.btn,
html[data-se-mode="dark"] .securends .sorTable .ActionDropdown > button.btn,
html[data-se-mode="dark"] .securends .listofCampTable .ActionDropdown > button.btn,
html[data-se-mode="dark"] .securends .listofCampTable .dropdown.badge .btn.btn-default {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  --bs-btn-bg: transparent !important;
  color: var(--se-brand, #dbeafe) !important;
  -webkit-text-fill-color: var(--se-brand, #dbeafe) !important;
}

html[data-se-mode="dark"] .securends .ActionDropdown > button .appGear,
html[data-se-mode="dark"] .securends .ActionDropdown > button .appGear::before,
html[data-se-mode="dark"] .securends .ActionDropdown > button .fa-cog,
html[data-se-mode="dark"] .securends .ActionDropdown > button .fa-cog::before,
html[data-se-mode="dark"] .securends .ActionDropdown i.appGear.fa-cog,
html[data-se-mode="dark"] .securends .ActionDropdown i.appGear.fa-cog::before,
html[data-se-mode="dark"] .securends .dropdown.badge .btn-default .appGear,
html[data-se-mode="dark"] .securends .dropdown.badge .btn-default .appGear::before,
html[data-se-mode="dark"] .securends .dropdown.badge .btn-default .fa-cog,
html[data-se-mode="dark"] .securends .dropdown.badge .btn-default .fa-cog::before {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--se-brand, #dbeafe) !important;
  -webkit-text-fill-color: var(--se-brand, #dbeafe) !important;
}

html[data-se-mode="dark"] .securends .ActionDropdown > button.btn:hover,
html[data-se-mode="dark"] .securends .ActionDropdown > button.btn.btn-default:hover,
html[data-se-mode="dark"] .securends .ReactTable .ActionDropdown > button.btn:hover,
html[data-se-mode="dark"] .securends .dropdown.badge .btn.btn-default:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--se-btn-bg-hover, #bfdbfe) !important;
  -webkit-text-fill-color: var(--se-btn-bg-hover, #bfdbfe) !important;
}

/* Application Entitlements — beat pickels #epTable .EndpointEntitlements white plate
   (bg #fff + ice/light glyph = invisible dots). Match Applications: icon-only ice ellipsis. */
html[data-se-mode="dark"] .securends #epTable.se-ep-ent-page .EndpointEntitlements .ActionDropdown > button,
html[data-se-mode="dark"] .securends #epTable.se-ep-ent-page .EndpointEntitlements .ActionDropdown > button.btn,
html[data-se-mode="dark"] .securends #epTable.se-ep-ent-page .EndpointEntitlements .ActionDropdown > button.btn-default,
html[data-se-mode="dark"] .securends #epTable.se-ep-ent-page .EndpointEntitlements .ActionDropdown .dropdown-toggle,
html[data-se-mode="dark"] .securends #epTable .EndpointEntitlements .ActionDropdown .dropdown-toggle,
html[data-se-mode="dark"] .securends #epTable .EndpointEntitlements .ActionDropdown .appGear,
html[data-se-mode="dark"] .securends #epTable .EndpointEntitlements .ActionDropdown .fa-cog,
html[data-se-mode="dark"] .securends #epTable .EndpointEntitlements .ActionDropdown .appGear::before,
html[data-se-mode="dark"] .securends #epTable .EndpointEntitlements .ActionDropdown .fa-cog::before,
html[data-se-mode="dark"] .securends #epTable.se-ep-ent-page .ReactTable .rt-td .ActionDropdown > button.btn,
html[data-se-mode="dark"] .securends #epTable.se-ep-ent-page .ReactTable .rt-td .ActionDropdown > button.btn.btn-default {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  --bs-btn-bg: transparent !important;
  --bs-btn-color: var(--se-brand, #dbeafe) !important;
  color: var(--se-brand, #dbeafe) !important;
  -webkit-text-fill-color: var(--se-brand, #dbeafe) !important;
}

html[data-se-mode="dark"] .securends #epTable.se-ep-ent-page .EndpointEntitlements .ActionDropdown > button:hover,
html[data-se-mode="dark"] .securends #epTable .EndpointEntitlements .ActionDropdown .dropdown-toggle:hover,
html[data-se-mode="dark"] .securends #epTable .EndpointEntitlements .ActionDropdown .appGear:hover,
html[data-se-mode="dark"] .securends #epTable .EndpointEntitlements .ActionDropdown .fa-cog:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--se-btn-bg-hover, #bfdbfe) !important;
  -webkit-text-fill-color: var(--se-btn-bg-hover, #bfdbfe) !important;
}

html[data-se-mode="dark"] .securends #epTable .EndpointEntitlements .ActionDropdown .dropdown-toggle::after {
  display: none !important;
  content: none !important;
  border: none !important;
}

/* Assign Credential / Custodian drawers — beat pickels #091432 navy text on dark */
html[data-se-mode="dark"] .modal .se-app-form-page .entCredsData span,
html[data-se-mode="dark"] .modal .se-app-form-page .entCredsData b,
html[data-se-mode="dark"] .modal .se-app-form-page .entCredsData .EntitlementCreds,
html[data-se-mode="dark"] .modal .entCredsData span,
html[data-se-mode="dark"] .modal .entCredsData b {
  color: var(--se-ink) !important;
}

html[data-se-mode="dark"] .modal .se-app-form-page .entCredsData .EntitlementCreds,
html[data-se-mode="dark"] .modal .entCredsData .EntitlementCreds {
  color: var(--se-ink-2) !important;
}

html[data-se-mode="dark"] .modal .se-app-form-page h2.header,
html[data-se-mode="dark"] .modal .se-app-form-page h2.credHeading,
html[data-se-mode="dark"] .modal h2.credHeading,
html[data-se-mode="dark"] .modal h2.header {
  color: var(--se-ink) !important;
  background: transparent !important;
}

html[data-se-mode="dark"] .modal .se-app-form-page .autoComplete label,
html[data-se-mode="dark"] .modal .se-app-form-page label {
  color: var(--se-ink-2) !important;
  background: transparent !important;
}

html[data-se-mode="dark"] .modal .se-app-form-page .autoComplete input.form-control,
html[data-se-mode="dark"] .modal .se-app-form-page .autocompleteInputbox input.form-control {
  background: var(--bg-input, var(--se-card)) !important;
  border-color: var(--se-line) !important;
  color: var(--se-ink) !important;
}

/* Assign Entitlement Owner (Entitlements → Update) — flatten white title + readable Bulk Upload */
html[data-se-mode="dark"] .modal .se-admin-entitle-page h2.o-form-title-bar,
html[data-se-mode="dark"] .modal .Delegation.se-admin-entitle-page h2.o-form-title-bar,
html[data-se-mode="dark"] .sidebar-modal .se-admin-entitle-page h2.o-form-title-bar {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--se-ink) !important;
}

html[data-se-mode="dark"] .modal .se-admin-entitle-page .iam_add_Import,
html[data-se-mode="dark"] .modal .Delegation .iam_add_Import,
html[data-se-mode="dark"] .modal .Delegation.se-admin-entitle-page .iam_add_Import,
html[data-se-mode="dark"] .sidebar-modal .iam_add_Import {
  background: var(--se-btn-bg, #dbeafe) !important;
  background-color: var(--se-btn-bg, #dbeafe) !important;
  border: 1px solid var(--se-btn-bg, #dbeafe) !important;
  color: var(--se-btn-fg, #333333) !important;
  -webkit-text-fill-color: var(--se-btn-fg, #333333) !important;
  opacity: 1 !important;
}

html[data-se-mode="dark"] .modal .se-admin-entitle-page .iam_add_Import:disabled,
html[data-se-mode="dark"] .modal .Delegation .iam_add_Import:disabled {
  opacity: 0.55 !important;
  color: var(--se-btn-fg, #333333) !important;
  -webkit-text-fill-color: var(--se-btn-fg, #333333) !important;
}

html[data-se-mode="dark"] .modal .se-admin-entitle-page .uploadTitle1 .help-block,
html[data-se-mode="dark"] .modal .se-admin-entitle-page .col-md-3,
html[data-se-mode="dark"] .modal .se-admin-entitle-page label {
  color: var(--se-ink-2) !important;
}

/* Person Details — Manager HTML table (beat DataTables/Bootstrap white cells) */
html[data-se-mode="dark"] .se-user-details-modal #user-det-table.table > tbody > tr > td,
html[data-se-mode="dark"] .se-user-details-modal table#user-det-table > tbody > tr > td,
html[data-se-mode="dark"] .modal.se-user-details-modal #user-det-table > tbody > tr > td,
html[data-se-mode="dark"] .modal #userDetailsTable #user-det-table.table > tbody > tr > td,
html[data-se-mode="dark"] .modal #userDetailsTable table.dataTable > tbody > tr > td {
  background: var(--se-card) !important;
  background-color: var(--se-card) !important;
  color: var(--se-ink) !important;
  -webkit-text-fill-color: var(--se-ink) !important;
}

html[data-se-mode="dark"] .se-user-details-modal #user-det-table > tbody > tr > td .MobileviewUD,
html[data-se-mode="dark"] .modal #userDetailsTable #user-det-table .MobileviewUD {
  color: var(--se-ink) !important;
  -webkit-text-fill-color: var(--se-ink) !important;
}

/* --------------------------------------------------------------------------
   Autocomplete menus — app-wide dark
   Covers: AutoComplete (.search-dropdown), CustomAutocomplete (.se-autocomplete-menu),
   MUI Autocomplete (portaled paper), mindmap Username/Email (pickels #fff).
   -------------------------------------------------------------------------- */
html[data-se-mode="dark"] .search-dropdown,
html[data-se-mode="dark"] .search-dropdown.search-active,
html[data-se-mode="dark"] .mindmap-toolbar__user-input .search-dropdown,
html[data-se-mode="dark"] .mindmap-toolbar__user-input .search-dropdown.search-active,
html[data-se-mode="dark"] .ai-agent-mindmap-search-row .search-dropdown,
html[data-se-mode="dark"] .ai-agent-mindmap-search-row .search-dropdown.search-active,
html[data-se-mode="dark"] .entitle-search .search-dropdown,
html[data-se-mode="dark"] .se-autocomplete-menu,
html[data-se-mode="dark"] .react-autocomplete-menu,
html[data-se-mode="dark"] .se-delegate-ac-menu,
html[data-se-mode="dark"] .MuiAutocomplete-paper,
html[data-se-mode="dark"] .MuiAutocomplete-listbox,
html[data-se-mode="dark"] .MuiPopper-root .MuiAutocomplete-paper,
html[data-theme="dark"] .search-dropdown,
html[data-theme="dark"] .search-dropdown.search-active,
html[data-theme="dark"] .se-autocomplete-menu,
html[data-theme="dark"] .MuiAutocomplete-paper,
html.dark .search-dropdown,
html.dark .search-dropdown.search-active,
html.dark .se-autocomplete-menu,
html.dark .MuiAutocomplete-paper {
  background: var(--bg-surface-elevated, #1a2436) !important;
  background-color: var(--bg-surface-elevated, #1a2436) !important;
  color: var(--text-primary, #e5e7eb) !important;
  border: 1px solid var(--border-default, #263348) !important;
  border-color: var(--border-default, #263348) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  --se-card: #1a2436;
  --se-ink: #e5e7eb;
  --se-ink-2: #a7b0c0;
  --se-line: #263348;
  --se-row-hover: #172235;
}

html[data-se-mode="dark"] .search-dropdown-item,
html[data-se-mode="dark"] .search-dropdown a,
html[data-se-mode="dark"] .search-dropdown a.search-dropdown-item,
html[data-se-mode="dark"] .ac_dropdown,
html[data-se-mode="dark"] .se-ac-option,
html[data-se-mode="dark"] .se-autocomplete-menu .ac_dropdown,
html[data-se-mode="dark"] .se-autocomplete-menu .se-ac-option,
html[data-se-mode="dark"] .se-autocomplete-menu div[role="option"],
html[data-se-mode="dark"] .MuiAutocomplete-option,
html[data-se-mode="dark"] .MuiAutocomplete-listbox .MuiAutocomplete-option,
html[data-theme="dark"] .search-dropdown-item,
html[data-theme="dark"] .ac_dropdown,
html[data-theme="dark"] .MuiAutocomplete-option,
html.dark .search-dropdown-item,
html.dark .ac_dropdown,
html.dark .MuiAutocomplete-option {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text-primary, #e5e7eb) !important;
  -webkit-text-fill-color: var(--text-primary, #e5e7eb) !important;
  border-bottom: 1px solid var(--border-default, #263348) !important;
}

html[data-se-mode="dark"] .search-dropdown-item:last-child,
html[data-se-mode="dark"] .ac_dropdown:last-child,
html[data-se-mode="dark"] .MuiAutocomplete-option:last-child {
  border-bottom: none !important;
}

html[data-se-mode="dark"] .search-dropdown-item:hover,
html[data-se-mode="dark"] .search-dropdown a:hover,
html[data-se-mode="dark"] .ac_dropdown:hover,
html[data-se-mode="dark"] .ac_dropdown.ac_dropdown--active,
html[data-se-mode="dark"] .ac_dropdown.is-highlighted,
html[data-se-mode="dark"] .se-ac-option:hover,
html[data-se-mode="dark"] .se-ac-option.is-highlighted,
html[data-se-mode="dark"] .MuiAutocomplete-option:hover,
html[data-se-mode="dark"] .MuiAutocomplete-option[data-focus="true"],
html[data-se-mode="dark"] .MuiAutocomplete-option.Mui-focused,
html[data-se-mode="dark"] .MuiAutocomplete-option[aria-selected="true"],
html[data-theme="dark"] .search-dropdown-item:hover,
html[data-theme="dark"] .ac_dropdown:hover,
html[data-theme="dark"] .ac_dropdown.ac_dropdown--active,
html[data-theme="dark"] .MuiAutocomplete-option.Mui-focused,
html.dark .search-dropdown-item:hover,
html.dark .ac_dropdown:hover,
html.dark .ac_dropdown.ac_dropdown--active,
html.dark .MuiAutocomplete-option.Mui-focused {
  background: var(--bg-table-row-hover, #172235) !important;
  background-color: var(--bg-table-row-hover, #172235) !important;
  color: var(--text-primary, #e5e7eb) !important;
  -webkit-text-fill-color: var(--text-primary, #e5e7eb) !important;
}

/* --------------------------------------------------------------------------
   Dark-mode consistency appendix (shared only).
   Light mode is unchanged: every rule is html[data-se-mode="dark"] (+ aliases).
   -------------------------------------------------------------------------- */

/* 1. Shared surfaces — Bootstrap leftovers that still flash white */
html[data-se-mode="dark"] .well,
html[data-se-mode="dark"] .jumbotron,
html[data-se-mode="dark"] .panel,
html[data-se-mode="dark"] .panel-body,
html[data-se-mode="dark"] .panel-heading,
html[data-se-mode="dark"] .panel-footer,
html[data-se-mode="dark"] .list-group-item,
html[data-se-mode="dark"] .thumbnail,
html[data-se-mode="dark"] .breadcrumb,
html[data-theme="dark"] .well,
html.dark .well,
html.dark .panel,
html.dark .list-group-item {
  background-color: var(--bg-surface, #111827) !important;
  background-image: none !important;
  color: var(--text-primary, #e5e7eb) !important;
  border-color: var(--border-default, #263348) !important;
}

html[data-se-mode="dark"] .list-group-item:hover,
html[data-se-mode="dark"] .list-group-item:focus {
  background-color: var(--bg-table-row-hover, #172235) !important;
  color: var(--text-primary, #e5e7eb) !important;
}

html[data-se-mode="dark"] hr,
html[data-se-mode="dark"] .MuiDivider-root,
html[data-theme="dark"] .MuiDivider-root,
html.dark hr {
  border-color: var(--border-default, #263348) !important;
  background-color: var(--border-default, #263348) !important;
}

html[data-se-mode="dark"] pre,
html[data-se-mode="dark"] code,
html[data-se-mode="dark"] kbd,
html[data-se-mode="dark"] samp,
html[data-se-mode="dark"] .form-control-plaintext {
  background-color: var(--bg-input, #111b2b) !important;
  color: var(--text-primary, #e5e7eb) !important;
  border-color: var(--border-default, #263348) !important;
}

html[data-se-mode="dark"] legend,
html[data-se-mode="dark"] fieldset,
html[data-se-mode="dark"] .help-block,
html[data-se-mode="dark"] .form-text,
html[data-se-mode="dark"] .text-muted {
  color: var(--text-secondary, #a7b0c0) !important;
  border-color: var(--border-default, #263348) !important;
}

html[data-se-mode="dark"] mark,
html[data-se-mode="dark"] .mark {
  background-color: var(--se-brand-tint) !important;
  color: var(--text-primary, #e5e7eb) !important;
}

/* 2. Forms + inputs + buttons */
html[data-se-mode="dark"] .input-group-addon,
html[data-se-mode="dark"] .input-group-text,
html[data-se-mode="dark"] .securends .input-group-addon,
html[data-se-mode="dark"] .securends .input-group-text,
html[data-theme="dark"] .input-group-text,
html.dark .input-group-addon {
  background-color: var(--bg-surface-secondary, #151e2e) !important;
  color: var(--text-secondary, #a7b0c0) !important;
  border-color: var(--border-default, #263348) !important;
}

html[data-se-mode="dark"] input[type="file"],
html[data-se-mode="dark"] .securends input[type="file"] {
  color: var(--text-primary, #e5e7eb) !important;
}

html[data-se-mode="dark"] .custom-file-label,
html[data-se-mode="dark"] .custom-file-label::after {
  background-color: var(--bg-input, #111b2b) !important;
  color: var(--text-primary, #e5e7eb) !important;
  border-color: var(--border-default, #263348) !important;
}

html[data-se-mode="dark"] .MuiOutlinedInput-notchedOutline,
html[data-se-mode="dark"] .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline,
html[data-theme="dark"] .MuiOutlinedInput-notchedOutline,
html.dark .MuiOutlinedInput-notchedOutline {
  border-color: var(--border-default, #263348) !important;
}

html[data-se-mode="dark"] .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
html[data-se-mode="dark"] .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--se-brand, #dbeafe) !important;
}

html[data-se-mode="dark"] .MuiInputLabel-root,
html[data-se-mode="dark"] .MuiFormLabel-root,
html[data-se-mode="dark"] .MuiFormHelperText-root,
html[data-theme="dark"] .MuiInputLabel-root,
html.dark .MuiFormLabel-root {
  color: var(--text-secondary, #a7b0c0) !important;
}

html[data-se-mode="dark"] .MuiInputLabel-root.Mui-focused,
html[data-se-mode="dark"] .MuiFormLabel-root.Mui-focused {
  color: var(--se-brand, #dbeafe) !important;
}

html[data-se-mode="dark"] .MuiInput-underline:before,
html[data-se-mode="dark"] .MuiInput-underline:hover:not(.Mui-disabled):before {
  border-bottom-color: var(--border-default, #263348) !important;
}

html[data-se-mode="dark"] .MuiInput-underline:after {
  border-bottom-color: var(--se-brand, #dbeafe) !important;
}

html[data-se-mode="dark"] .modal-header .close,
html[data-se-mode="dark"] .modal-header .btn-close,
html[data-se-mode="dark"] .MuiDialogTitle-root .MuiIconButton-root,
html[data-se-mode="dark"] .close,
html[data-se-mode="dark"] .btn-close {
  color: var(--text-secondary, #a7b0c0) !important;
}

/* 3. Select / dropdown / autocomplete (in-document + portaled) */
html[data-se-mode="dark"] .react-select__control,
html[data-se-mode="dark"] .react-select__value-container,
html[data-se-mode="dark"] .Select-control,
html[data-se-mode="dark"] .css-yk16xz-control,
html[data-theme="dark"] .react-select__control,
html.dark .react-select__control {
  background: var(--bg-input, #111b2b) !important;
  background-color: var(--bg-input, #111b2b) !important;
  border-color: var(--border-default, #263348) !important;
  color: var(--text-primary, #e5e7eb) !important;
}

html[data-se-mode="dark"] .react-select__single-value,
html[data-se-mode="dark"] .react-select__input,
html[data-se-mode="dark"] .react-select__input input,
html[data-se-mode="dark"] .Select-value-label,
html[data-theme="dark"] .react-select__single-value,
html.dark .react-select__single-value {
  color: var(--text-primary, #e5e7eb) !important;
}

html[data-se-mode="dark"] .react-select__placeholder,
html[data-theme="dark"] .react-select__placeholder,
html.dark .react-select__placeholder {
  color: var(--text-muted, #6f7b8f) !important;
}

html[data-se-mode="dark"] .react-select__indicator,
html[data-se-mode="dark"] .react-select__dropdown-indicator,
html[data-se-mode="dark"] .react-select__clear-indicator,
html[data-se-mode="dark"] .MuiSelect-icon,
html[data-se-mode="dark"] .MuiSvgIcon-root.MuiSelect-icon {
  color: var(--text-secondary, #a7b0c0) !important;
  fill: var(--text-secondary, #a7b0c0) !important;
}

html[data-se-mode="dark"] .react-select__multi-value,
html[data-theme="dark"] .react-select__multi-value,
html.dark .react-select__multi-value {
  background: var(--bg-surface-elevated, #1a2436) !important;
  border: 1px solid var(--border-default, #263348) !important;
}

html[data-se-mode="dark"] .react-select__multi-value__label,
html[data-se-mode="dark"] .react-select__multi-value__remove {
  color: var(--text-primary, #e5e7eb) !important;
}

html[data-se-mode="dark"] .react-select__option--is-focused,
html[data-se-mode="dark"] .react-select__option:hover,
html[data-se-mode="dark"] .securends .react-select__option--is-focused,
html[data-se-mode="dark"] .securends .react-select__option:hover,
html[data-theme="dark"] .react-select__option--is-focused,
html.dark .react-select__option--is-focused {
  background: var(--bg-table-row-hover, #172235) !important;
  background-color: var(--bg-table-row-hover, #172235) !important;
  color: var(--text-primary, #e5e7eb) !important;
}

html[data-se-mode="dark"] .react-select__option--is-selected,
html[data-se-mode="dark"] .securends .react-select__option--is-selected,
html[data-theme="dark"] .react-select__option--is-selected,
html.dark .react-select__option--is-selected {
  background: var(--se-brand-tint) !important;
  background-color: var(--se-brand-tint) !important;
  color: var(--text-primary, #e5e7eb) !important;
}

html[data-se-mode="dark"] select option,
html[data-se-mode="dark"] .securends select option {
  background-color: var(--bg-surface-elevated, #1a2436) !important;
  color: var(--text-primary, #e5e7eb) !important;
}

html[data-se-mode="dark"] select option:checked,
html[data-se-mode="dark"] select option:checked:hover,
html[data-se-mode="dark"] .securends select option:checked,
html[data-theme="dark"] select option:checked,
html.dark select option:checked {
  background-color: var(--se-btn-bg, #dbeafe) !important;
  background-image: linear-gradient(var(--se-btn-bg, #dbeafe), var(--se-btn-bg, #dbeafe)) !important;
  color: var(--se-btn-fg, #333333) !important;
}

html[data-se-mode="dark"] .MuiAutocomplete-paper,
html[data-se-mode="dark"] .MuiAutocomplete-listbox,
html[data-se-mode="dark"] .MuiAutocomplete-noOptions,
html[data-theme="dark"] .MuiAutocomplete-paper,
html.dark .MuiAutocomplete-paper {
  background-color: var(--bg-surface-elevated, #1a2436) !important;
  color: var(--text-primary, #e5e7eb) !important;
}

html[data-se-mode="dark"] .dropdown-item,
html[data-se-mode="dark"] .dropdown-menu > li > a,
html[data-se-mode="dark"] .MuiMenuItem-root,
html[data-se-mode="dark"] .MuiListItem-button,
html[data-theme="dark"] .MuiMenuItem-root,
html.dark .dropdown-item {
  color: var(--text-primary, #e5e7eb) !important;
}

html[data-se-mode="dark"] .dropdown-item:hover,
html[data-se-mode="dark"] .dropdown-menu > li > a:hover,
html[data-se-mode="dark"] .MuiMenuItem-root:hover,
html[data-se-mode="dark"] .MuiMenuItem-root.Mui-selected,
html[data-se-mode="dark"] .MuiListItem-button:hover,
html[data-theme="dark"] .MuiMenuItem-root:hover,
html.dark .MuiMenuItem-root:hover {
  background-color: var(--bg-table-row-hover, #172235) !important;
  color: var(--text-primary, #e5e7eb) !important;
}

html[data-se-mode="dark"] .dropdown-menu > .active > a,
html[data-se-mode="dark"] .dropdown-item.active,
html[data-se-mode="dark"] .dropdown-item:active {
  background-color: var(--se-btn-bg, #dbeafe) !important;
  color: var(--se-btn-fg, #333333) !important;
}

/* 4. Tables — Bootstrap + MUI pagination / empty */
html[data-se-mode="dark"] .table,
html[data-se-mode="dark"] .table > thead > tr > th,
html[data-se-mode="dark"] .table > tbody > tr > td,
html[data-se-mode="dark"] .table-striped > tbody > tr:nth-of-type(odd),
html[data-theme="dark"] .table,
html.dark .table {
  background-color: var(--bg-table-row, #111827) !important;
  color: var(--text-primary, #e5e7eb) !important;
  border-color: var(--border-default, #263348) !important;
}

html[data-se-mode="dark"] .table > thead > tr > th,
html[data-se-mode="dark"] .table thead th {
  background-color: var(--bg-table-header, #151f30) !important;
  color: var(--text-secondary, #a7b0c0) !important;
}

html[data-se-mode="dark"] .table-hover > tbody > tr:hover > td,
html[data-se-mode="dark"] .table-hover > tbody > tr:hover {
  background-color: var(--bg-table-row-hover, #172235) !important;
}

html[data-se-mode="dark"] .pagination > li > a,
html[data-se-mode="dark"] .pagination > li > span,
html[data-se-mode="dark"] .page-link,
html[data-se-mode="dark"] .MuiTablePagination-root,
html[data-se-mode="dark"] .MuiTablePagination-toolbar,
html[data-theme="dark"] .page-link,
html.dark .page-link {
  background-color: var(--bg-surface, #111827) !important;
  color: var(--text-primary, #e5e7eb) !important;
  border-color: var(--border-default, #263348) !important;
}

html[data-se-mode="dark"] .pagination > .active > a,
html[data-se-mode="dark"] .pagination > .active > span,
html[data-se-mode="dark"] .page-item.active .page-link {
  background-color: var(--se-btn-bg, #dbeafe) !important;
  border-color: var(--se-btn-bg, #dbeafe) !important;
  color: var(--se-btn-fg, #333333) !important;
}

html[data-se-mode="dark"] .ReactTable .-loading,
html[data-se-mode="dark"] .securends .ReactTable .-loading {
  background: var(--se-loader-scrim, rgba(11, 18, 32, 0.78)) !important;
}

html[data-se-mode="dark"] .ReactTable .-loading > div,
html[data-se-mode="dark"] .ReactTable .rt-noData {
  color: var(--text-secondary, #a7b0c0) !important;
  background: var(--bg-surface, #111827) !important;
}

html[data-se-mode="dark"] .MuiTablePagination-selectIcon,
html[data-se-mode="dark"] .MuiTableSortLabel-root,
html[data-se-mode="dark"] .MuiTableSortLabel-icon {
  color: var(--text-secondary, #a7b0c0) !important;
}

/* 5. Material UI shared chrome */
html[data-se-mode="dark"] .MuiCard-root,
html[data-theme="dark"] .MuiCard-root,
html.dark .MuiCard-root {
  background-color: var(--bg-surface, #111827) !important;
  color: var(--text-primary, #e5e7eb) !important;
}

html[data-se-mode="dark"] .MuiTypography-colorTextPrimary {
  color: var(--text-primary, #e5e7eb) !important;
}

html[data-se-mode="dark"] .MuiTypography-colorTextSecondary {
  color: var(--text-secondary, #a7b0c0) !important;
}

html[data-se-mode="dark"] .MuiTypography-root.MuiTypography-h6,
html[data-se-mode="dark"] .MuiDialogTitle-root,
html[data-se-mode="dark"] .MuiCardHeader-title {
  color: var(--text-primary, #e5e7eb) !important;
}

html[data-se-mode="dark"] .MuiTab-root,
html[data-se-mode="dark"] .MuiTabs-root,
html[data-theme="dark"] .MuiTab-root,
html.dark .MuiTab-root {
  color: var(--text-secondary, #a7b0c0) !important;
}

html[data-se-mode="dark"] .MuiTab-root.Mui-selected {
  color: var(--se-brand, #dbeafe) !important;
}

html[data-se-mode="dark"] .MuiTabs-indicator {
  background-color: var(--se-brand, #dbeafe) !important;
}

html[data-se-mode="dark"] .MuiAccordion-root,
html[data-se-mode="dark"] .MuiAccordionSummary-root,
html[data-se-mode="dark"] .MuiAccordionDetails-root,
html[data-se-mode="dark"] .MuiExpansionPanel-root,
html[data-se-mode="dark"] .MuiExpansionPanelSummary-root,
html[data-se-mode="dark"] .MuiExpansionPanelDetails-root {
  background-color: var(--bg-surface, #111827) !important;
  color: var(--text-primary, #e5e7eb) !important;
  border-color: var(--border-default, #263348) !important;
}

html[data-se-mode="dark"] .MuiIconButton-root:not(.MuiCheckbox-root):not(.MuiRadio-root):not(.MuiSwitch-switchBase),
html[data-theme="dark"] .MuiIconButton-root:not(.MuiCheckbox-root):not(.MuiRadio-root):not(.MuiSwitch-switchBase):not(.Mui-disabled),
html.dark .MuiIconButton-root:not(.MuiCheckbox-root):not(.MuiRadio-root):not(.MuiSwitch-switchBase) {
  color: var(--text-secondary, #a7b0c0) !important;
}

html[data-se-mode="dark"] .MuiIconButton-colorPrimary,
html[data-se-mode="dark"] .MuiIconButton-colorPrimary .MuiSvgIcon-root {
  color: var(--se-brand, #dbeafe) !important;
}

html[data-se-mode="dark"] .MuiSnackbarContent-root,
html[data-se-mode="dark"] .MuiAlert-root,
html[data-theme="dark"] .MuiSnackbarContent-root,
html.dark .MuiSnackbarContent-root {
  background-color: var(--bg-surface-elevated, #1a2436) !important;
  color: var(--text-primary, #e5e7eb) !important;
}

html[data-se-mode="dark"] .MuiBadge-colorPrimary {
  background-color: var(--se-brand, #dbeafe) !important;
  color: var(--se-btn-fg, #333333) !important;
}

html[data-se-mode="dark"] .MuiStepper-root,
html[data-se-mode="dark"] .MuiStepLabel-label,
html[data-se-mode="dark"] .MuiStepIcon-root {
  color: var(--text-secondary, #a7b0c0) !important;
  background-color: transparent !important;
}

html[data-se-mode="dark"] .MuiStepIcon-root.MuiStepIcon-active,
html[data-se-mode="dark"] .MuiStepIcon-root.MuiStepIcon-completed {
  color: var(--se-brand, #dbeafe) !important;
}

/* 6. Dialogs / popovers / datepickers */
html[data-se-mode="dark"] .MuiDialogTitle-root,
html[data-se-mode="dark"] .MuiDialogContent-root,
html[data-se-mode="dark"] .MuiDialogActions-root,
html[data-se-mode="dark"] .popover-title,
html[data-se-mode="dark"] .popover-content,
html[data-theme="dark"] .MuiDialogContent-root,
html.dark .popover-title {
  background-color: var(--bg-surface-elevated, #1a2436) !important;
  color: var(--text-primary, #e5e7eb) !important;
  border-color: var(--border-default, #263348) !important;
}

html[data-se-mode="dark"] .react-datepicker__day,
html[data-se-mode="dark"] .react-datepicker__day-name,
html[data-se-mode="dark"] .react-datepicker__current-month,
html[data-se-mode="dark"] .react-datepicker__time-name,
html[data-theme="dark"] .react-datepicker__day,
html.dark .react-datepicker__day {
  color: var(--text-primary, #e5e7eb) !important;
}

html[data-se-mode="dark"] .react-datepicker__day:hover,
html[data-se-mode="dark"] .react-datepicker__month-text:hover,
html[data-theme="dark"] .react-datepicker__day:hover,
html.dark .react-datepicker__day:hover {
  background-color: var(--bg-table-row-hover, #172235) !important;
  color: var(--text-primary, #e5e7eb) !important;
}

html[data-se-mode="dark"] .react-datepicker__day--selected,
html[data-se-mode="dark"] .react-datepicker__day--keyboard-selected,
html[data-se-mode="dark"] .react-datepicker__day--in-selecting-range,
html[data-se-mode="dark"] .react-datepicker__day--in-range,
html[data-se-mode="dark"] .securends .react-datepicker__day--selected,
html[data-theme="dark"] .react-datepicker__day--selected,
html.dark .react-datepicker__day--selected {
  background-color: var(--se-btn-bg, #dbeafe) !important;
  color: var(--se-btn-fg, #333333) !important;
  -webkit-text-fill-color: var(--se-btn-fg, #333333) !important;
}

html[data-se-mode="dark"] .react-datepicker__day--outside-month,
html[data-se-mode="dark"] .react-datepicker__day--disabled {
  color: var(--text-muted, #6f7b8f) !important;
}

html[data-se-mode="dark"] .react-datepicker__navigation-icon::before,
html[data-se-mode="dark"] .react-datepicker__year-read-view--down-arrow,
html[data-se-mode="dark"] .react-datepicker__month-read-view--down-arrow {
  border-color: var(--text-secondary, #a7b0c0) !important;
}

html[data-se-mode="dark"] .react-datepicker__time-container,
html[data-se-mode="dark"] .react-datepicker__time,
html[data-se-mode="dark"] .react-datepicker__time-box,
html[data-se-mode="dark"] .react-datepicker-time__header {
  background-color: var(--bg-surface-elevated, #1a2436) !important;
  color: var(--text-primary, #e5e7eb) !important;
}

html[data-se-mode="dark"] .react-datepicker__time-list-item:hover,
html[data-se-mode="dark"] .react-datepicker__time-list-item--selected {
  background-color: var(--bg-table-row-hover, #172235) !important;
  color: var(--text-primary, #e5e7eb) !important;
}

html[data-se-mode="dark"] .MuiPickersBasePicker-container,
html[data-se-mode="dark"] .MuiPickersCalendarHeader-switchHeader,
html[data-se-mode="dark"] .MuiPickersDay-day,
html[data-theme="dark"] .MuiPickersDay-day {
  background-color: var(--bg-surface-elevated, #1a2436) !important;
  color: var(--text-primary, #e5e7eb) !important;
}

html[data-se-mode="dark"] .MuiPickersDay-daySelected {
  background-color: var(--se-btn-bg, #dbeafe) !important;
  color: var(--se-btn-fg, #333333) !important;
}

/* 7. Chips / checkbox / radio / switch */
html[data-se-mode="dark"] .securends .MuiChip-root,
html[data-se-mode="dark"] .MuiChip-root,
html[data-theme="dark"] .MuiChip-root,
html.dark .MuiChip-root {
  background-color: var(--bg-surface-elevated, #1a2436) !important;
  color: var(--text-primary, #e5e7eb) !important;
  border: 1px solid var(--border-default, #263348) !important;
}

html[data-se-mode="dark"] .MuiChip-deleteIcon,
html[data-se-mode="dark"] .MuiChip-avatar {
  color: var(--text-secondary, #a7b0c0) !important;
}

html[data-se-mode="dark"] .securends .se-request-access-page .MuiChip-root {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}

html[data-se-mode="dark"] .MuiCheckbox-root,
html[data-se-mode="dark"] .MuiCheckbox-colorPrimary,
html[data-se-mode="dark"] .custom-control-input,
html[data-theme="dark"] .MuiCheckbox-root,
html.dark .MuiCheckbox-root {
  color: var(--text-muted, #6f7b8f) !important;
}

html[data-se-mode="dark"] .MuiCheckbox-root.Mui-checked,
html[data-se-mode="dark"] .MuiCheckbox-colorPrimary.Mui-checked,
html[data-theme="dark"] .MuiCheckbox-root.Mui-checked,
html.dark .MuiCheckbox-root.Mui-checked {
  color: var(--se-brand, #dbeafe) !important;
}

html[data-se-mode="dark"] input[type="checkbox"],
html[data-se-mode="dark"] input[type="radio"] {
  accent-color: var(--se-brand, #dbeafe);
}

html[data-se-mode="dark"] .MuiSwitch-track,
html[data-theme="dark"] .MuiSwitch-track,
html.dark .MuiSwitch-track {
  background-color: var(--border-strong, #334155) !important;
  opacity: 1 !important;
}

html[data-se-mode="dark"] .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track,
html[data-se-mode="dark"] .MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track {
  background-color: var(--se-brand, #dbeafe) !important;
  opacity: 0.45 !important;
}

html[data-se-mode="dark"] .MuiSwitch-thumb {
  background-color: var(--text-secondary, #a7b0c0) !important;
}

html[data-se-mode="dark"] .MuiSwitch-switchBase.Mui-checked .MuiSwitch-thumb {
  background-color: var(--se-btn-bg, #dbeafe) !important;
}

html[data-se-mode="dark"] .MuiFormControlLabel-label {
  color: var(--text-primary, #e5e7eb) !important;
}

/* 8. Loaders */
html[data-se-mode="dark"] .MuiCircularProgress-colorPrimary,
html[data-se-mode="dark"] .MuiCircularProgress-circle,
html[data-theme="dark"] .MuiCircularProgress-colorPrimary,
html.dark .MuiCircularProgress-colorPrimary {
  color: var(--se-brand, #dbeafe) !important;
}

html[data-se-mode="dark"] .MuiLinearProgress-colorPrimary,
html[data-se-mode="dark"] .MuiLinearProgress-colorSecondary {
  background-color: var(--border-default, #263348) !important;
}

html[data-se-mode="dark"] .MuiLinearProgress-barColorPrimary,
html[data-se-mode="dark"] .MuiLinearProgress-barColorSecondary {
  background-color: var(--se-brand, #dbeafe) !important;
}

html[data-se-mode="dark"] .spinner-border,
html[data-se-mode="dark"] .fa-spinner,
html[data-se-mode="dark"] .fa-circle-o-notch {
  color: var(--se-brand, #dbeafe) !important;
  border-color: var(--border-strong, #334155) !important;
  border-right-color: var(--se-brand, #dbeafe) !important;
}

html[data-se-mode="dark"] .progress,
html[data-se-mode="dark"] .progress-bar {
  background-color: var(--bg-surface-secondary, #151e2e) !important;
}

html[data-se-mode="dark"] .progress-bar {
  background-color: var(--se-brand, #dbeafe) !important;
  color: var(--se-btn-fg, #333333) !important;
}

/* 9. Charts / graphs (Recharts SVG + Chart.js legend DOM) */
html[data-se-mode="dark"] .recharts-wrapper,
html[data-se-mode="dark"] .recharts-surface,
html[data-theme="dark"] .recharts-wrapper,
html.dark .recharts-wrapper {
  color: var(--text-primary, #e5e7eb) !important;
}

html[data-se-mode="dark"] .recharts-text,
html[data-se-mode="dark"] .recharts-cartesian-axis-tick-value,
html[data-se-mode="dark"] .recharts-polar-angle-axis-tick-value,
html[data-se-mode="dark"] .recharts-legend-item-text,
html[data-theme="dark"] .recharts-text,
html.dark .recharts-text {
  fill: var(--text-secondary, #a7b0c0) !important;
  color: var(--text-secondary, #a7b0c0) !important;
}

html[data-se-mode="dark"] .recharts-polar-grid-angle line,
html[data-se-mode="dark"] .recharts-polar-grid-concentric path,
html[data-se-mode="dark"] .recharts-cartesian-grid line,
html[data-se-mode="dark"] .recharts-curve.recharts-polar-grid-concentric-circle {
  stroke: var(--border-default, #263348) !important;
}

html[data-se-mode="dark"] .recharts-default-tooltip,
html[data-se-mode="dark"] .recharts-tooltip-wrapper > div,
html[data-theme="dark"] .recharts-default-tooltip,
html.dark .recharts-tooltip-wrapper > div {
  background: var(--bg-surface-elevated, #1a2436) !important;
  background-color: var(--bg-surface-elevated, #1a2436) !important;
  border-color: var(--border-default, #263348) !important;
  color: var(--text-primary, #e5e7eb) !important;
}

html[data-se-mode="dark"] .chartjs-render-monitor,
html[data-se-mode="dark"] canvas.chartjs-render-monitor {
  filter: none;
}

html[data-se-mode="dark"] .nivo-tooltip,
html[data-theme="dark"] .nivo-tooltip,
html.dark .nivo-tooltip {
  background: var(--bg-surface-elevated, #1a2436) !important;
  color: var(--text-primary, #e5e7eb) !important;
  border: 1px solid var(--border-default, #263348) !important;
}

.guideBottomNavContainer {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: white;
  z-index: 2000;
}
.guideNavContainerTransition {
  transition: all 0.2s ease-in-out;
}
.guideBottomNavButtonContainer {
  position: absolute;
  top: -25px;
  left: 14px;
  background-color: #37556e;
  background-image: linear-gradient(0deg, #37556e, #337ab7);
  width: 100px;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
}
.guideBottomNavButtonContainer.reversed {
  background-image: linear-gradient(180deg, #37556e, #337ab7);
}

.guideBottomNavToggleButton {
  margin: auto;
  width: fit-content;
  color: white;
  font-weight: 600;
}

.guideBottomNavIcon {
  display: inline-block;
  width: 25px;
  color: white;
  position: relative;
  right: 5px;
}

.guideBottomNavResizeHandle {
  position: relative;
  background-color: #37556e;
  height: 3px;
  cursor: n-resize;
}

.guideBottomNavResizeHandle.reversed {
  background-color: #337ab7;
}

.guideBottomNavMainContent {
  padding: 15px 20px;
  height: 100%;
  overflow-y: scroll;
}

.guideBottomNavMainContent p:has(> img) {
  display: block;
  max-width: 100%;
  overflow-x: scroll;
}

.guideBottomNavMainContentTitle {
  padding: 8px;
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  color: rgb(50, 49, 48);
  display: block;
  transition: 0.3s;
}

.guideNavTitleIcon {
  margin-right: 4px;
  transition: all ease-in-out 0.2s;
}

.guideNavTitleIcon.expanded {
  rotate: 90deg;
}

.guideBottomNavMainContentTitle:hover {
  color: #363636;
  font-family: "Open Sans", sans-serif;
}

.guideBottomNavAvailable {
  padding: 8px 8px 8px 32px;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.guideSideNavContainer {
  position: fixed;
  display: flex;
  height: 100%;
  top: 0;
  right: 0;
  background-color: white;
  z-index: 1090;
  margin-top: 50px;
  padding-bottom: 50px;
}

.guideSideNavButtonContainer {
  pointer-events: none;
  display: flex;
  align-items: center;
  position: relative;
  height: 100%;
  width: fit-content;
  right: 28px;
  width: fit-content;
  border-radius: 40px 0 0 40px;
}

.guideSideNavMainContent {
  padding-top: 40px;
  right: 25px;
  margin-right: -20px;
  position: relative;
  height: 100%;
  overflow-x: auto;
  width: 100%;
}

.guideSideNavResizeHandle {
  pointer-events: all;
  height: 100%;
  width: 3px;
  cursor: e-resize;
  background-color: #37556e;
}

.guideSideNavResizeHandle.reversed {
  background-color: #337ab7;
}

.guideSideNavToggleButton {
  cursor: pointer;
  /* display: none; */
  pointer-events: all;
  background-color: #337ab7 !important;
  color: white;
  width: 28px;
  height: fit-content;
  word-break: break-all;
  text-align: center;
  font-weight: bold;
  font-size: 0.9rem;
  padding: 12px 10px;
  box-shadow: 0 4px 8px #ccc, 0 1px 8px #ccc;
  background-image: linear-gradient(270deg, #37556e, #337ab7);
}

.guideSidenavTitle {
  padding: 8px 8px 8px 16px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  color: rgb(50, 49, 48);
  display: block;
  transition: 0.3s;
}

.guideSidenavTitle:hover {
  color: #363636;
  font-family: "Open Sans", sans-serif;
}

.guideSideNavMainContent .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 26px;
  margin-left: 50px;
  margin-top: 5px;
}

.guideToggleIcon {
  display: inline-block;
  width: 25px;
  color: white;
  position: relative;
  right: 5px;
}

.guideSideNavToggleButton {
  cursor: pointer;
  background-color: #337ab7 !important;
  color: white;
  width: 28px;
  word-break: break-all;
  text-align: center;
  border-radius: 40px 0 0 40px;
  font-weight: bold;
  font-size: 0.9rem;
  padding: 12px 10px;
  box-shadow: 0 4px 8px #ccc, 0 1px 8px #ccc;
  background-image: linear-gradient(270deg, #37556e, #337ab7);
}

.guideSideNavToggleButton.reversed {
  background-image: linear-gradient(90deg, #37556e, #337ab7);
}

.guideSideNavTitleIcon {
  padding: 0;
  top: 58px;
  position: absolute;
  left: 0;
  font-size: 12px;
}
.guideSideNavTitleIcon.expanded {
  rotate: 180deg;
}

.guideContent {
  padding-left: 32px;
  padding-right: 5px;
  margin-bottom: 10px;
  font-size: 14px;
  color: rgb(50, 49, 48);
  overflow: auto;
  transition: max-height 0.3s ease-in-out;
}

.guideContent header,
.guideContent h1,
.guideContent h2,
.guideContent h3,
.guideContent h4,
.guideContent h5,
.guideContent h6 {
  height: revert !important;
  background-color: revert !important;
  font-family: revert !important;
  font-weight: revert !important;
}

.guideContent ul {
  padding-left: 40px;
}

.guideContent::-webkit-scrollbar {
  width: 5px;
}

.guideContent p:has(> img) {
  display: block;
  max-width: 100%;
  overflow-x: scroll;
}

.guideNotAvailable {
  padding: 8px 8px 8px 32px;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

@media screen and (max-height: 450px) {
  .guideSideNavMainContent {
    padding-top: 25px;
  }
  .guideSideNavMainContent a {
    font-size: 18px;
  }
}

.preventSelectBottomAppGuide {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
  cursor: n-resize;
}

.preventSelectSideAppGuide {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
  cursor: e-resize;
}


/*# sourceMappingURL=main-03a69efb.5035a61b.css.map*/