/**
 * YOOAdmin Dark Engine v2 — Elementor "Home / website builder" app layer.
 *
 * The Elementor Home screen (admin.php?page=elementor-home) renders a
 * self-contained React + MUI (emotion) app. It is light-only: colors are
 * hardcoded / injected at runtime via emotion (eui-* classes) and it consumes
 * NO design tokens (neither Elementor's --e-a-* nor ours), so token injection
 * cannot reach it. The generic compat layer only catches the outer containers,
 * leaving the banner, tabs and chips light (half-dark result).
 *
 * This layer themes the app directly through MUI's *stable* semantic class names
 * (.MuiPaper-root, .MuiAlert-root, .MuiChip-root, .MuiTab-root, ...). Because
 * this file is enqueued ONLY on the Elementor Home page, scoping to
 * #wpbody-content is equivalent to scoping to the app itself, while reliably
 * catching nodes (like the connect banner) that sit outside the React root.
 * !important guarantees we win over emotion regardless of insertion order. Card
 * thumbnails (images) and the primary brand CTA are intentionally left intact.
 */

/* App roots — the white background the bundle forces on its containers. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content {
  background: var(--yp-dark-bg) !important;
  color: var(--yp-dark-text);
}

/* Override the bundle's `body{background:#fff}`. Kept as a separate rule so an
   unsupported :has() (older browsers) can't drop the app-root rule above. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin:has(#elementor-home-app) {
  background: var(--yp-dark-bg) !important;
}

/* ---- Surfaces: paper, cards, accordions, menus, popovers, dialogs. ---- */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(
    .MuiPaper-root, .MuiCard-root, .MuiAccordion-root,
    .MuiMenu-paper, .MuiPopover-paper, .MuiDialog-paper,
    .MuiList-root, .MuiCardContent-root, .MuiCardHeader-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;
}

/* Notice / alert banner (e.g. "Have an Elementor One plan?"). MuiAlert is not a
   Paper, so it needs its own rule — this is what kept the top banner light. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(
    .MuiAlert-root, .MuiAlert-standardInfo, .MuiAlert-standardSuccess,
    .MuiAlert-standardWarning, .MuiAlert-standardError,
    .MuiAlert-outlinedInfo, .MuiAlert-filledInfo, .MuiSnackbarContent-root
  ) {
  background-color: var(--yp-dark-surface-raised) !important;
  color: var(--yp-dark-text) !important;
  border-color: var(--yp-dark-border) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(.MuiAlert-message, .MuiAlert-action) {
  color: var(--yp-dark-text) !important;
}

/* App bar / toolbar (the "website builder" header strip). */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(.MuiAppBar-root, .MuiToolbar-root) {
  background-color: var(--yp-dark-surface-raised) !important;
  color: var(--yp-dark-text) !important;
  border-color: var(--yp-dark-border) !important;
}

/* ---- Tags / chips (the "Featured (10)" pills). ---- */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  .MuiChip-root {
  background-color: var(--yp-dark-surface-raised) !important;
  color: var(--yp-dark-text) !important;
  border-color: var(--yp-dark-border) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  .MuiChip-root.Mui-selected,
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  .MuiChip-filled {
  background-color: var(--yp-dark-surface-sunken) !important;
  color: var(--yp-dark-text) !important;
  border-color: var(--yp-dark-accent) !important;
}

/* ---- Tabs / toggle buttons. ---- */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(.MuiTabs-root, .MuiToggleButtonGroup-root) {
  background-color: transparent !important;
  border-color: var(--yp-dark-border) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(.MuiTab-root, .MuiToggleButton-root) {
  color: var(--yp-dark-text-muted) !important;
  border-color: var(--yp-dark-border) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(.MuiTab-root.Mui-selected, .MuiToggleButton-root.Mui-selected) {
  color: var(--yp-dark-text) !important;
  background-color: var(--yp-dark-surface-raised) !important;
  border-color: var(--yp-dark-accent) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  .MuiTabs-indicator {
  background-color: var(--yp-dark-accent) !important;
}

/* ---- Text. ---- */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(
    .MuiTypography-root, h1, h2, h3, h4, h5, h6,
    .MuiListItemText-primary, .MuiFormLabel-root, .MuiInputLabel-root
  ) {
  color: var(--yp-dark-text) !important;
}

/* Keep contrast on contained buttons (e.g. the pink primary CTA) — restore a
   dark label after the broad text rule rather than excluding via complex :not()
   (which has weaker browser support and would drop the whole rule). */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(.MuiButton-contained, .MuiButton-containedPrimary)
  :is(.MuiTypography-root, span, .MuiButton-label),
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(.MuiButton-contained, .MuiButton-containedPrimary) {
  color: var(--yp-dark-accent-contrast) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(
    .MuiTypography-body2, .MuiTypography-caption,
    .MuiListItemText-secondary, .MuiFormHelperText-root
  ) {
  color: var(--yp-dark-text-muted) !important;
}

/* ---- Form fields. ---- */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(.MuiOutlinedInput-root, .MuiInputBase-root, .MuiSelect-select) {
  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
  #wpbody-content
  .MuiOutlinedInput-notchedOutline {
  border-color: var(--yp-dark-field-border) !important;
}

/* ---- Buttons. Keep the brand/primary CTA; theme the rest. ---- */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(.MuiButton-outlined, .MuiButton-text, .MuiIconButton-root):not(
    .MuiButton-containedPrimary
  ) {
  color: var(--yp-dark-text) !important;
  border-color: var(--yp-dark-border-strong) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  .MuiButton-outlined:hover {
  background-color: var(--yp-dark-surface-raised) !important;
}

/* ---- Dividers / borders. ---- */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(.MuiDivider-root, hr) {
  border-color: var(--yp-dark-border-soft) !important;
}

/* ---- Hover/selected action states. ---- */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(.MuiMenuItem-root:hover, .MuiListItemButton-root:hover) {
  background-color: var(--yp-dark-surface-raised) !important;
}

/* =========================================================================
 * Portaled surfaces (menus, popovers, dialogs/modals).
 *
 * MUI renders these into a portal appended to <body>, OUTSIDE #wpbody-content,
 * so the rules above cannot reach them — this is why the "Add a page" menu, the
 * account popover and the "Site management" modal stayed white. Scope to <body>
 * (this file only loads on the Elementor Home page, so it can only match
 * Elementor's own portals).
 * ========================================================================= */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  :is(
    .MuiMenu-paper, .MuiPopover-paper, .MuiDialog-paper, .MuiModal-root .MuiPaper-root,
    .MuiAutocomplete-paper, .MuiList-root.MuiMenu-list
  ) {
  background-color: var(--yp-dark-surface) !important;
  color: var(--yp-dark-text) !important;
  border: 1px solid var(--yp-dark-border) !important;
  box-shadow: var(--yp-dark-shadow, 0 8px 32px rgba(0, 0, 0, 0.45)) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  :is(.MuiModal-root, .MuiDialog-root, .MuiPopover-root, .MuiMenu-root)
  :is(
    .MuiMenuItem-root, .MuiListItemText-primary, .MuiDialogTitle-root,
    .MuiDialogContent-root, .MuiDialogContentText-root, .MuiTypography-root,
    h1, h2, h3, h4, h5, h6, p, li, span, label
  ) {
  color: var(--yp-dark-text) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  :is(.MuiModal-root, .MuiDialog-root, .MuiPopover-root, .MuiMenu-root)
  :is(.MuiTypography-body2, .MuiTypography-caption, .MuiListItemText-secondary) {
  color: var(--yp-dark-text-muted) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  :is(.MuiMenuItem-root:hover, .MuiListItemButton-root:hover) {
  background-color: var(--yp-dark-surface-raised) !important;
}

/* Editor One chrome (the fixed rail + top bar) is dark-themed in
 * css/dark/vendor/elementor.css, which loads on ALL Elementor admin pages — the
 * chrome appears on every page, not just Home, so its rules must too. This file
 * only handles the React Home app body (#wpbody-content / portals). */