/* ─────────────────────────────────────────────────────────────────────────
 * Elementic · dark-base
 * Flips the major surfaces of the Elementor editor chrome to the dark
 * design. EVERYTHING here is scoped under html[data-theme="dark"], so this
 * file is inert until the ?theme=dark flag sets that attribute (see the
 * inline theme-flag script in index.html). Loads AFTER panel-polish.css.
 *
 * Fatia 0 = big surfaces only (panel shell, header, footer, tabs, nav,
 * canvas surround, base typography + inputs so text isn't invisible).
 * Per-control fidelity (sliders, swatches, choose, toggles) is Fatia 1.
 * Uses var(--*) from tokens.css; never hardcodes the palette here.
 * ───────────────────────────────────────────────────────────────────────── */

/* ── Root + typography ─────────────────────────────────────────────────── */
html[data-theme="dark"],
html[data-theme="dark"] body {
  background: var(--bg-app);
  color: var(--fg-1);
}
html[data-theme="dark"] body,
html[data-theme="dark"] .elementor-panel,
html[data-theme="dark"] .elementor-control,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] button {
  font-family: var(--font-ui);
}

/* ── Panel shell ───────────────────────────────────────────────────────── */
html[data-theme="dark"] #elementor-panel,
html[data-theme="dark"] .elementor-panel {
  background: var(--bg-panel);
  color: var(--fg-1);
  border-inline-end: 1px solid var(--border);
}
html[data-theme="dark"] #elementor-panel-content-wrapper,
html[data-theme="dark"] #elementor-panel-inner,
html[data-theme="dark"] .elementor-panel-page-settings,
html[data-theme="dark"] #elementor-panel-page-settings,
html[data-theme="dark"] .elementor-panel-content {
  background: var(--bg-panel);
  color: var(--fg-1);
}

/* ── Panel header (widget title + back/duplicate/save/delete) ──────────── */
html[data-theme="dark"] #elementor-panel-header,
html[data-theme="dark"] #elementor-panel-header-wrapper,
html[data-theme="dark"] .elementor-panel-header {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  color: var(--fg-1);
}
html[data-theme="dark"] #elementor-panel-header-title,
html[data-theme="dark"] .elementor-panel-header-title { color: var(--fg-1); }
html[data-theme="dark"] #elementor-panel-header .eicon,
html[data-theme="dark"] #elementor-panel-header i { color: var(--fg-2); }

/* ── Tabs (Conteúdo / Estilo / Avançado) ──────────────────────────────── */
html[data-theme="dark"] #elementor-panel-navigation,
html[data-theme="dark"] .elementor-panel-navigation {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}
html[data-theme="dark"] .elementor-panel-navigation-tab a,
html[data-theme="dark"] .elementor-component-tab {
  color: var(--fg-3);
}
html[data-theme="dark"] .elementor-panel-navigation-tab.elementor-active a,
html[data-theme="dark"] .elementor-component-tab.elementor-active {
  color: var(--fg-1);
  /* indicator is Elementor's native border-bottom, recolored to accent in
     dark-controls.css — no extra box-shadow underline (would double up). */
}
html[data-theme="dark"] .elementor-panel-navigation-tab a:hover { color: var(--fg-1); }

/* ── Section headings / control sections ──────────────────────────────── */
html[data-theme="dark"] .elementor-panel-heading,
html[data-theme="dark"] .elementor-control-type-section .elementor-panel-heading {
  background: var(--bg-panel);
  border-block: 1px solid var(--border);
  color: var(--fg-2);
}
html[data-theme="dark"] .elementor-panel-heading-title { color: var(--fg-2); }
html[data-theme="dark"] .elementor-control-type-section:not(.e-open) .elementor-panel-heading:hover {
  background: var(--bg-hover);
}

/* ── Control labels + baseline inputs (full fidelity in Fatia 1) ───────── */
html[data-theme="dark"] .elementor-control-title,
html[data-theme="dark"] .elementor-control .elementor-control-title { color: var(--fg-2); }
html[data-theme="dark"] .elementor-control { border-bottom-color: var(--border); }
html[data-theme="dark"] .elementor-control input[type="text"],
html[data-theme="dark"] .elementor-control input[type="number"],
html[data-theme="dark"] .elementor-control input[type="search"],
html[data-theme="dark"] .elementor-control input[type="email"],
html[data-theme="dark"] .elementor-control input[type="url"],
html[data-theme="dark"] .elementor-control textarea,
html[data-theme="dark"] .elementor-control select {
  background: var(--bg-input);
  color: var(--fg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
html[data-theme="dark"] .elementor-control input:focus,
html[data-theme="dark"] .elementor-control textarea:focus,
html[data-theme="dark"] .elementor-control select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  outline: none;
}
html[data-theme="dark"] .elementor-control input::placeholder,
html[data-theme="dark"] .elementor-control textarea::placeholder { color: var(--fg-4); }

/* ── Navigator (Estrutura) ─────────────────────────────────────────────── */
html[data-theme="dark"] #elementor-navigator,
html[data-theme="dark"] #elementor-navigator__inner,
html[data-theme="dark"] .elementor-navigator__inner {
  background: var(--bg-panel);
  color: var(--fg-2);
  border-color: var(--border);
}
html[data-theme="dark"] #elementor-navigator__header,
html[data-theme="dark"] .elementor-navigator__header {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  color: var(--fg-1);
}
html[data-theme="dark"] .elementor-navigator__item { color: var(--fg-2); }
html[data-theme="dark"] .elementor-navigator__item:hover { background: var(--bg-elevated); color: var(--fg-1); }
html[data-theme="dark"] .elementor-navigator__element.elementor-active > .elementor-navigator__item,
html[data-theme="dark"] .elementor-navigator__item.elementor-active {
  background: var(--accent-soft);
  color: var(--accent-hi);
  box-shadow: inset 2px 0 0 var(--accent);
}

/* ── Footer tools (save icons + connection dot live here) ──────────────── */
html[data-theme="dark"] #elementor-panel-footer,
html[data-theme="dark"] #elementor-panel-footer-tools,
html[data-theme="dark"] .elementor-panel-footer {
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
}
html[data-theme="dark"] .elementor-panel-footer-tool { color: var(--fg-2); }
html[data-theme="dark"] .elementor-panel-footer-tool:hover { background: var(--bg-elevated); color: var(--fg-1); }

/* ── Hamburger menu (page-level actions: templates, blocks, etc) ───────── */
html[data-theme="dark"] #elementor-panel-page-menu,
html[data-theme="dark"] .elementor-panel-menu,
html[data-theme="dark"] .elementor-panel-menu-items {
  background: var(--bg-panel);
  color: var(--fg-1);
}
html[data-theme="dark"] .elementor-panel-menu-item { color: var(--fg-2); border-color: var(--border); }
html[data-theme="dark"] .elementor-panel-menu-item:hover { background: var(--bg-elevated); color: var(--fg-1); }
html[data-theme="dark"] .elementor-panel-menu-item-icon { color: var(--fg-3); }

/* ── Elements/widget catalog panel ─────────────────────────────────────── */
html[data-theme="dark"] #elementor-panel-elements,
html[data-theme="dark"] #elementor-panel-categories,
html[data-theme="dark"] .elementor-panel-category-title {
  background: var(--bg-panel);
  color: var(--fg-2);
}
html[data-theme="dark"] #elementor-panel-elements-search-input,
html[data-theme="dark"] .elementor-panel-elements-search-input {
  background: var(--bg-input);
  color: var(--fg-1);
  border: 1px solid var(--border);
}
html[data-theme="dark"] .elementor-element-wrapper .icon,
html[data-theme="dark"] .elementor-element .icon {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--fg-2);
}
html[data-theme="dark"] .elementor-element-wrapper:hover .icon { background: var(--bg-hover); border-color: var(--border-strong); }
html[data-theme="dark"] .elementor-element .title,
html[data-theme="dark"] .elementor-element-wrapper .title { color: var(--fg-3); }

/* ── Canvas surround (dark area around the white paper) ────────────────── */
html[data-theme="dark"] #elementor-preview,
html[data-theme="dark"] #elementor-preview-responsive-wrapper,
html[data-theme="dark"] #elementor-preview-iframe-wrapper {
  background: var(--bg-app);
}
/* The iframe document (the page being edited) keeps its own styling — we do
   NOT dark-ify the canvas CONTENT in this pass; only the surround. */

/* ── Editor V2 top app bar (MUI/eps) ───────────────────────────────────── */
html[data-theme="dark"] #elementor-editor-wrapper .MuiAppBar-root,
html[data-theme="dark"] .eps-app__header,
html[data-theme="dark"] .e-app-bar {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  color: var(--fg-1);
}

/* ── Scrollbars ────────────────────────────────────────────────────────── */
html[data-theme="dark"] #elementor-panel ::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-theme="dark"] #elementor-panel ::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 8px;
  border: 2px solid var(--bg-panel);
}
html[data-theme="dark"] #elementor-panel ::-webkit-scrollbar-track { background: transparent; }