/**
 * YOOAdmin Dark Engine v2 — Elementor vendor layer.
 *
 * Elementor has TWO token systems with ready-made dark palettes that it only
 * loads inside its own editor:
 *   1. the legacy app tokens  (--e-a-*)           — older admin UI
 *   2. the Editor One palette  (--e-one-palette-*) — the new unified admin nav
 *      ("Editor One": the fixed rail + top bar) AND every settings page
 *      (.form-table / .wp-list-table read --e-one-palette-background-default,
 *      --e-one-palette-text-primary, --e-one-palette-divider, …).
 *
 * We inject BOTH dark palettes scoped to our dark-mode attribute, so the admin
 * dashboard, settings, tools, role manager — every Elementor admin page — gets
 * the official Elementor dark theme automatically, with zero manual selector
 * enumeration. This file loads on ALL Elementor admin pages (detect = Elementor
 * active); the React Home app's emotion-only boxes are handled separately in
 * css/dark/vendor/elementor-home.css.
 */

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin {
  --e-a-color-logo: #000000;
  --e-a-color-circle-logo: #ffffff;
  --e-a-color-primary: #524CFF;
  --e-a-color-primary-bold: #F0ABFC;
  --e-a-color-primary-bold-dark: #E73CF6;
  --e-a-color-secondary: #515962;
  --e-a-color-accent: #93003f;
  --e-a-color-accent-promotion: #D6107C;
  --e-a-color-global: #1DDDBF;
  --e-a-bg-default: #1f2124;
  --e-a-bg-invert: #ffffff;
  --e-a-bg-hover: #2b2c31;
  --e-a-bg-active: #333438;
  --e-a-bg-active-bold: #3f444b;
  --e-a-bg-logo: #ffffff;
  --e-a-bg-primary: #310132;
  --e-a-bg-secondary: #515962;
  --e-a-bg-success: #032317;
  --e-a-bg-info: #0A1A3D;
  --e-a-bg-danger: #390A0A;
  --e-a-bg-warning: #311808;
  --e-a-bg-chip: #333438;
  --e-a-color-txt: #D5D8DC;
  --e-a-color-txt-muted: #9DA5AE;
  --e-a-color-txt-disabled: #69727D;
  --e-a-color-txt-invert: #ffffff;
  --e-a-color-txt-accent: #ffffff;
  --e-a-color-txt-hover: #9DA5AE;
  --e-a-color-txt-active: #ffffff;
  --e-a-border-color: #333438;
  --e-a-border-color-bold: #3f444b;
  --e-a-border-color-focus: #515962;
  --e-a-border-color-accent: #ffffff;
  --e-a-border: 1px solid var(--e-a-border-color);
  --e-a-border-bold: 1px solid var(--e-a-border-color-bold);
  --e-a-btn-color: #0C0D0E;
  --e-a-btn-color-invert: var(--e-a-color-txt-invert);
  --e-a-btn-color-disabled: var(--e-a-color-txt-disabled);
  --e-a-btn-bg: #515962;
  --e-a-btn-bg-hover: #3a4048;
  --e-a-btn-bg-active: #23272a;
  --e-a-btn-bg-disabled: #D5D8DC;
  --e-a-btn-bg-primary: #F3BAFD;
  --e-a-btn-bg-primary-hover: #EB8EFB;
  --e-a-btn-bg-primary-active: #F0ABFC;
  --e-a-btn-bg-accent: #93003f;
  --e-a-btn-bg-accent-hover: #8F1A4C;
  --e-a-btn-bg-accent-active: #A93365;
  --e-a-btn-bg-info: #2563EB;
  --e-a-btn-bg-info-hover: #134cca;
  --e-a-btn-bg-success: #0A875A;
  --e-a-btn-bg-success-hover: #07583a;
  --e-a-btn-bg-warning: #F59E0B;
  --e-a-btn-bg-warning-hover: #c57f08;
  --e-a-btn-bg-danger: #DC2626;
  --e-a-btn-bg-danger-hover: #b31d1d;
  --e-a-dark-bg: #0C0D0E;
  --e-a-dark-color-txt: #9DA5AE;
  --e-a-dark-color-txt-hover: #D5D8DC;
  --e-a-popover-shadow: 0 2px 15px rgba(0, 0, 0, 0.9);
  --e-a-dropdown-shadow: 0 0 3px rgba(0, 0, 0, 0.9);

  /* ---------------------------------------------------------------------------
   * Editor One palette (--e-one-palette-*) — verbatim from the plugin's own
   * modules/editor-one/theme-dark.css. This is what drives the settings forms,
   * list tables, the rail and the top bar. Injecting it here is the single
   * source that darkens all of them across every Elementor admin page.
   * ------------------------------------------------------------------------- */
  /* Neutrals mapped to our --yp-dark tokens so every Elementor admin page stays
     visually cohesive with the rest of the YOOAdmin dark theme. */
  --e-one-palette-text-primary: var(--yp-dark-text);
  --e-one-palette-text-secondary: var(--yp-dark-text-muted);
  --e-one-palette-text-tertiary: var(--yp-dark-text-faint);
  --e-one-palette-text-disabled: var(--yp-dark-text-faint);
  --e-one-palette-primary-light: #f3bafd;
  --e-one-palette-primary-main: #f0abfc;
  --e-one-palette-primary-dark: #eb8efb;
  --e-one-palette-primary-contrast-text: #0c0d0e;
  --e-one-palette-primary-contrastText: var(--e-one-palette-primary-contrast-text);
  --e-one-palette-secondary-light: #babfc5;
  --e-one-palette-secondary-main: #9da5ae;
  --e-one-palette-secondary-dark: #818a96;
  --e-one-palette-secondary-contrast-text: #0c0d0e;
  --e-one-palette-secondary-contrastText: var(--e-one-palette-secondary-contrast-text);
  --e-one-palette-error-light: #ef4444;
  --e-one-palette-error-main: #dc2626;
  --e-one-palette-error-dark: #b91c1c;
  --e-one-palette-error-contrast-text: #fff;
  --e-one-palette-error-contrastText: var(--e-one-palette-error-contrast-text);
  --e-one-palette-warning-light: #fbbf24;
  --e-one-palette-warning-main: #f59e0b;
  --e-one-palette-warning-dark: #b15211;
  --e-one-palette-warning-contrast-text: #000;
  --e-one-palette-warning-contrastText: var(--e-one-palette-warning-contrast-text);
  --e-one-palette-info-light: #3b82f6;
  --e-one-palette-info-main: #2563eb;
  --e-one-palette-info-dark: #1d4ed8;
  --e-one-palette-info-contrast-text: #fff;
  --e-one-palette-info-contrastText: var(--e-one-palette-info-contrast-text);
  --e-one-palette-success-light: #10b981;
  --e-one-palette-success-main: #0a875a;
  --e-one-palette-success-dark: #047857;
  --e-one-palette-success-contrast-text: #fff;
  --e-one-palette-success-contrastText: var(--e-one-palette-success-contrast-text);
  --e-one-palette-global-light: #99f6e4;
  --e-one-palette-global-main: #5eead4;
  --e-one-palette-global-dark: #2adfcd;
  --e-one-palette-global-contrast-text: #0c0d0e;
  --e-one-palette-global-contrastText: var(--e-one-palette-global-contrast-text);
  --e-one-palette-promotion-light: #b51243;
  --e-one-palette-promotion-main: #93003f;
  --e-one-palette-promotion-dark: #7e013b;
  --e-one-palette-promotion-contrast-text: #fff;
  --e-one-palette-promotion-contrastText: var(--e-one-palette-promotion-contrast-text);
  --e-one-palette-decorative-light: #99f6e4;
  --e-one-palette-decorative-main: #5eead4;
  --e-one-palette-decorative-dark: #2adfcd;
  --e-one-palette-decorative-contrast-text: #0c0d0e;
  --e-one-palette-decorative-contrastText: var(--e-one-palette-decorative-contrast-text);
  --e-one-palette-neutral-light: #fff;
  --e-one-palette-neutral-main: #fff;
  --e-one-palette-neutral-dark: #fff;
  --e-one-palette-neutral-contrast-text: #fff;
  --e-one-palette-neutral-contrastText: var(--e-one-palette-neutral-contrast-text);
  --e-one-palette-action-active: var(--yp-dark-text);
  --e-one-palette-action-hover: var(--yp-dark-surface-raised);
  --e-one-palette-action-selected: var(--yp-dark-surface-raised);
  --e-one-palette-action-focus: hsla(0, 0%, 100%, 0.12);
  --e-one-palette-action-disabled: hsla(0, 0%, 100%, 0.3);
  --e-one-palette-action-disabled-background: hsla(0, 0%, 100%, 0.12);
  --e-one-palette-action-disabledBackground: var(--e-one-palette-action-disabled-background);
  --e-one-palette-divider: var(--yp-dark-border);
  --e-one-palette-common-black: #000;
  --e-one-palette-common-white: #fff;
  --e-one-palette-background-default: var(--yp-dark-bg);
  --e-one-palette-background-paper: var(--yp-dark-surface);

  /* The rail background is a standalone hardcoded var (#fff), not part of the
     palette — re-point it so the fixed left rail is dark on every page. */
  --editor-one-sidebar-bg: var(--yp-dark-surface);
}

/* =========================================================================
 * Editor One chrome — the fixed left rail (#editor-one-sidebar-navigation) and
 * top bar (#editor-one-top-bar).
 *
 * The chrome renders OUTSIDE #wpbody-content (fixed children of the page) and
 * appears on EVERY Elementor admin page, so its dark rules live here (this file
 * loads whenever Elementor is active) rather than in the Home-only layer. The
 * token injection above darkens palette-driven parts; these rules cover the
 * emotion-injected, classless boxes (rail header card, search wrapper, footer)
 * that hardcode #fff and don't read the palette.
 * ========================================================================= */

/* The rail + top bar containers themselves. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  :is(#editor-one-sidebar-navigation, #editor-one-top-bar) {
  background-color: var(--yp-dark-surface) !important;
  color: var(--yp-dark-text) !important;
  border-color: var(--yp-dark-border) !important;
}

/* Flatten the rail's inner containers (header card + search wrapper + footer).
   The rail is purely navigational — it carries no colored surfaces — so making
   its generic containers transparent lets the dark rail show through and removes
   the stray white header/search/footer boxes (emotion-injected, classless). The
   selected/hover item rules below use class selectors and still win. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #editor-one-sidebar-navigation
  :is(div, nav, header, footer, section, ul, li, a, button, .MuiBox-root, .MuiStack-root) {
  background-color: transparent !important;
}

/* MUI surfaces inside the chrome (header card, search, list, paper, app bar). */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  :is(#editor-one-sidebar-navigation, #editor-one-top-bar)
  :is(
    .MuiPaper-root, .MuiCard-root, .MuiList-root, .MuiAppBar-root,
    .MuiToolbar-root, .MuiCardContent-root, .MuiListSubheader-root
  ) {
  background-color: var(--yp-dark-surface) !important;
  color: var(--yp-dark-text) !important;
  border-color: var(--yp-dark-border) !important;
  box-shadow: none !important;
}

/* Text + icons in the chrome. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  :is(#editor-one-sidebar-navigation, #editor-one-top-bar)
  :is(
    .MuiTypography-root, .MuiListItemText-primary, .MuiListItemText-secondary,
    a, span, p, h1, h2, h3, h4, h5, h6, li, label, svg
  ) {
  color: var(--yp-dark-text) !important;
}

/* Search / inputs inside the chrome. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  :is(#editor-one-sidebar-navigation, #editor-one-top-bar)
  :is(.MuiOutlinedInput-root, .MuiInputBase-root, input) {
  background-color: var(--yp-dark-field) !important;
  color: var(--yp-dark-text) !important;
  color-scheme: dark;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  :is(#editor-one-sidebar-navigation, #editor-one-top-bar)
  .MuiOutlinedInput-notchedOutline {
  border-color: var(--yp-dark-field-border) !important;
}

/* Hover / selected menu item states in the rail. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #editor-one-sidebar-navigation
  :is(
    .MuiMenuItem-root:hover, .MuiListItemButton-root:hover,
    .MuiListItemButton-root.Mui-selected, .MuiMenuItem-root.Mui-selected
  ) {
  background-color: var(--yp-dark-surface-raised) !important;
  color: var(--yp-dark-text) !important;
}