/* ─────────────────────────────────────────────────────────────────────────
 * Elementic · dark-controls  (Reskin Fatia 1)
 * The controls layer: inputs, selects, sliders, choose/btn-group, switcher,
 * swatches, repeater, popovers + the Elementor v3 admin-token remap.
 *
 * Everything is scoped under html[data-theme="dark"] → inert until ?theme=dark.
 * Loads AFTER dark-base.css and panel-polish.css so it wins on the cascade.
 *
 * TWO LAYERS:
 *   1. --e-a-* remap. Elementor v3 drives the whole chrome through ~94
 *      `--e-a-*` admin custom properties (text, borders, accent, buttons,
 *      hover/active bg, font). Remapping them onto our tokens flips most of
 *      the control surfaces at once AND kills the magenta (#D004D4 lived in
 *      --e-a-color-primary-bold / --e-a-color-primary).
 *   2. Targeted overrides. panel-polish.css hardcodes some light values
 *      (`.elementor-panel input {#fff}`, slider/switcher `#D004D4`) that the
 *      vars can't reach — we mirror those selectors with a `html[data-theme]`
 *      prefix so specificity wins. Never touches the light theme.
 * ───────────────────────────────────────────────────────────────────────── */

/* ── 1. Elementor v3 admin-token remap ─────────────────────────────────────
 * Set on both html[data-theme] and its body so we beat whichever element
 * editor.css declared the var on (:root and/or body). */
html[data-theme="dark"],
html[data-theme="dark"] body {
  /* surfaces */
  --e-a-bg-default:    var(--bg-elevated);   /* was #ffffff — inputs/popovers/chips */
  --e-a-bg-hover:      var(--bg-hover);      /* was #F1F2F3 */
  --e-a-bg-active:     var(--bg-active);     /* was #E6E8EA */
  --e-a-bg-active-bold:var(--border-strong); /* was #D5D8DC */
  --e-a-bg-chip:       var(--bg-elevated);   /* was #F1F2F3 */
  --e-a-bg-loading:    var(--bg-panel);      /* was #F9FAFA */
  --e-a-bg-primary:    var(--accent-soft);   /* was #FAE8FF (magenta tint) */

  /* text */
  --e-a-color-txt:          var(--fg-2);     /* was #515962 */
  --e-a-color-txt-hover:    var(--fg-1);     /* was #3f444b */
  --e-a-color-txt-muted:    var(--fg-3);     /* was #818A96 */
  --e-a-color-txt-disabled: var(--fg-4);     /* was #BABFC5 */
  --e-a-color-txt-accent:   var(--fg-1);     /* was #0C0D0E */
  --e-a-color-txt-active:   var(--fg-1);     /* was #0C0D0E */

  /* borders */
  --e-a-border-color:       var(--border);          /* was #E6E8EA */
  --e-a-border:             1px solid var(--border);
  --e-a-border-bold:        1px solid var(--border-strong);
  --e-a-border-color-bold:  var(--border-strong);   /* was #D5D8DC */
  --e-a-border-color-accent:var(--border-strong);   /* was #0C0D0E */
  --e-a-border-color-focus: var(--accent);          /* was #BABFC5 */

  /* accent — every magenta lived here */
  --e-a-color-primary:        var(--accent);   /* was #F3BAFD */
  --e-a-color-primary-bold:   var(--accent);   /* was #D004D4  ← THE magenta */
  --e-a-color-accent:         var(--accent);   /* was #93003f */
  --e-a-color-accent-promotion:var(--accent);  /* was #93003f (pro upsell) */
  --e-a-color-secondary:      var(--fg-2);     /* was #515962 */

  /* primary / accent buttons */
  --e-a-btn-bg-primary:        var(--accent);     /* was #F3BAFD */
  --e-a-btn-bg-primary-hover:  var(--accent-hi);  /* was #F5D0FE */
  --e-a-btn-bg-primary-active: var(--accent-lo);  /* was #F0ABFC */
  --e-a-btn-bg-accent:         var(--accent);     /* was #93003f */
  --e-a-btn-bg-accent-hover:   var(--accent-hi);  /* was #8F1A4C */
  --e-a-btn-bg-accent-active:  var(--accent-lo);  /* was #A93365 */

  /* default (secondary) button */
  --e-a-btn-bg:          var(--bg-active);   /* was #515962 */
  --e-a-btn-bg-hover:    var(--bg-hover);
  --e-a-btn-bg-active:   var(--border-strong);
  --e-a-btn-color:       var(--fg-1);        /* was #0C0D0E */
  --e-a-btn-bg-disabled: var(--bg-active);   /* was #D5D8DC */
  --e-a-btn-color-disabled: var(--fg-4);     /* was #BABFC5 */

  /* font + shadows */
  --e-a-font-family:    var(--font-ui);      /* was Roboto — now Geist */
  --e-a-popover-shadow: var(--shadow-pop);
  --e-a-dropdown-shadow:var(--shadow-1);

  /* leave semantic colors (info/success/warning/danger) and --e-a-color-global
     (#1DDDBF cyan global indicator) as-is — they read fine on dark. */
}

/* ── 2a. Inputs / selects / textareas (beats panel-polish #fff) ───────────── */
html[data-theme="dark"] .elementor-panel input,
html[data-theme="dark"] .elementor-panel select,
html[data-theme="dark"] .elementor-panel textarea,
html[data-theme="dark"] .elementor-panel .e-input-style {
  background-color: var(--bg-input);
  border-color: var(--border-strong);
  color: var(--fg-1);
  font-family: var(--font-ui);
}
html[data-theme="dark"] .elementor-panel input:focus,
html[data-theme="dark"] .elementor-panel select:focus,
html[data-theme="dark"] .elementor-panel textarea:focus,
html[data-theme="dark"] .elementor-panel .e-input-style:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  outline: none;
}
html[data-theme="dark"] .elementor-panel input::placeholder,
html[data-theme="dark"] .elementor-panel textarea::placeholder { color: var(--fg-4); }
/* native select dropdown arrow + option list */
html[data-theme="dark"] .elementor-panel select option { background: var(--bg-elevated); color: var(--fg-1); }
/* checkbox accent */
html[data-theme="dark"] .elementor-panel input[type="checkbox"],
html[data-theme="dark"] .elementor-panel input[type="radio"] { accent-color: var(--accent); }

/* ── 2b. Choose / icon button-group (alignment etc.) ──────────────────────── */
html[data-theme="dark"] .elementor-choices { border-color: var(--border-strong); }
html[data-theme="dark"] .elementor-choices label {
  border-inline-end-color: var(--border);
  background: var(--bg-input);
  color: var(--fg-2);
}
html[data-theme="dark"] .elementor-choices label:hover { background: var(--bg-hover); color: var(--fg-1); }
html[data-theme="dark"] .elementor-choices input:checked + label {
  background-color: var(--accent-soft);
  color: var(--accent-hi);
}

/* ── 2c. Slider (noUiSlider) — kill the hardcoded magenta ──────────────────── */
html[data-theme="dark"] .elementor-slider .noUi-base,
html[data-theme="dark"] .elementor-slider .noUi-target {
  background: var(--bg-active);
  border-color: var(--border);
}
html[data-theme="dark"] .elementor-slider .noUi-connect { background-color: var(--accent); }
html[data-theme="dark"] .elementor-slider .noUi-handle {
  background: var(--fg-1);
  border-color: var(--accent);
}

/* ── 2d. Switcher / toggle ─────────────────────────────────────────────────── */
html[data-theme="dark"] .elementor-switch-label { background-color: var(--bg-active); }
html[data-theme="dark"] .elementor-control-type-switcher .elementor-switch-input:checked ~ .elementor-switch-label {
  background-color: var(--accent);
}
html[data-theme="dark"] .elementor-switch-handle { background: var(--fg-1); }

/* ── 2e. Color swatch (pickr) ──────────────────────────────────────────────── */
html[data-theme="dark"] .elementor-control-type-color .pcr-button,
html[data-theme="dark"] .pcr-button { border: 1px solid var(--border-strong); }
/* global-value cyan indicator stays (--e-a-color-global) — meaningful brand cue */

/* ── 2f. Repeater rows (e.g. form fields, social icons) ────────────────────── */
html[data-theme="dark"] .elementor-repeater-row-item-title,
html[data-theme="dark"] .elementor-repeater-row-tools {
  background: var(--bg-elevated);
  color: var(--fg-2);
  border-color: var(--border);
}
html[data-theme="dark"] .elementor-repeater-fields { border-color: var(--border); }
html[data-theme="dark"] .elementor-button-text,
html[data-theme="dark"] .elementor-repeater-add { color: var(--accent-hi); }

/* ── 2g. Popovers (typography, text-shadow, etc.) ──────────────────────────── */
html[data-theme="dark"] .elementor-controls-popover {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-pop);
}
html[data-theme="dark"] .elementor-controls-popover::before { border-bottom-color: var(--bg-elevated); }

/* ── 2h. Search area in the elements catalog (panel-polish #fff) ────────────── */
html[data-theme="dark"] #elementor-panel-elements-search-area { background-color: var(--bg-panel); }
html[data-theme="dark"] #elementor-panel-elements-search-input,
html[data-theme="dark"] #elementor-panel-elements-search-input:focus {
  background-color: var(--bg-input) !important;
  color: var(--fg-1);
}

/* ── 2i. Dynamic-conditions custom UI (.elementic-dc-* / condition rows) ────── */
html[data-theme="dark"] .elementic-dc-relation-select,
html[data-theme="dark"] .elementic-condition-row__fields input {
  background: var(--bg-input);
  color: var(--fg-1);
  border-color: var(--border);
}
html[data-theme="dark"] .elementic-dc-toggle-slider::before { background-color: var(--fg-1); }

/* ── 2j. Toast (panel-polish .elementic-toast #fff) ────────────────────────── */
html[data-theme="dark"] .elementic-toast {
  background: var(--bg-elevated);
  color: var(--fg-1);
  border: 1px solid var(--border);
}

/* ── 2k-pre. panel-polish.css magenta (#D004D4) → accent ─────────────────────
 * panel-polish.css hardcodes the Elementor magenta (#D004D4) in 16 spots as
 * the LIGHT theme's accent (intentional — matches real Elementor). Some use
 * !important. We recolor each to our accent by mirroring the exact selector
 * (+ data-theme prefix → always higher specificity) with !important so we win
 * over the !important ones too. Light theme keeps its magenta untouched.
 * (The #1DDDBF cyan global-value indicator is deliberately left alone.) */
html[data-theme="dark"] .elementor-panel .elementor-panel-navigation .elementor-panel-navigation-tab.elementor-active {
  border-bottom-color: var(--accent) !important;
  border-color: var(--accent) !important;
}
html[data-theme="dark"] .elementor-slider .noUi-connect { background-color: var(--accent) !important; }
html[data-theme="dark"] .elementor-slider .noUi-handle { border-color: var(--accent) !important; }
html[data-theme="dark"] .elementor-control-type-switcher .elementor-switch-input:checked ~ .elementor-switch-label {
  background-color: var(--accent) !important;
}
html[data-theme="dark"] .elementor-panel .elementor-button.elementor-button-success,
html[data-theme="dark"] .elementor-panel #elementor-panel-saver-button-publish {
  background-color: var(--accent) !important;
}
html[data-theme="dark"] #elementor-panel-elements-search-input:focus { border-color: var(--accent) !important; }
html[data-theme="dark"] #elementor-panel-elements-search-wrapper:focus-within > i,
html[data-theme="dark"] .elementor-panel .elementor-element-wrapper .elementor-element:hover i,
html[data-theme="dark"] .elementor-control-responsive-switchers .elementor-responsive-switcher:hover,
html[data-theme="dark"] .elementor-control-dynamic-switcher {
  color: var(--accent) !important;
}
html[data-theme="dark"] .elementor-navigator__drop-indicator { background-color: var(--accent) !important; }
html[data-theme="dark"] .elementor-navigator__item.elementor-navigator__drop-target { outline-color: var(--accent) !important; }
html[data-theme="dark"] .elementic-revision-item.is-previewing { border-left-color: var(--accent) !important; }
html[data-theme="dark"] .elementic-preview-bar-apply { background-color: var(--accent) !important; }
/* navigator search chip (navigator-search.mjs inline style) */
html[data-theme="dark"] .elementic-nav-search__chip.is-active {
  background-color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
  color: var(--fg-1);
}

/* ── 2k. Warning box (#FFF7ED light tint) ──────────────────────────────────── */
html[data-theme="dark"] .elementor-panel-alert,
html[data-theme="dark"] .elementor-control-raw-html.elementor-panel-alert {
  background: color-mix(in oklab, var(--amber) 12%, var(--bg-elevated));
  border-color: color-mix(in oklab, var(--amber) 40%, transparent);
  color: var(--fg-1);
}