/**
 * YOOAdmin Dark Engine v2 — Menus + Widgets screens.
 *
 * nav-menus.php and widgets.php use bespoke admin markup that the generic
 * settings layer does not reach (menu builder panels/handles, the block-based
 * widgets editor shell, and the classic widgets columns). Token-based, scoped to
 * the v2 wp context, loaded only on these two screens.
 */

/* =========================================================================
 * Appearance → Menus (nav-menus.php)
 * ========================================================================= */

/* Builder frame + main column. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  :is(#nav-menus-frame, #menu-management-liner, #menu-management, .menu-edit) {
  background: var(--yp-dark-surface);
  border-color: var(--yp-dark-border);
  color: var(--yp-dark-text);
}

/* Header / footer bands of the menu editor. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  :is(#nav-menu-header, #nav-menu-footer) {
  background: var(--yp-dark-surface-raised);
  border-color: var(--yp-dark-border);
  color: var(--yp-dark-text);
}

/* Menu item rows + their expanded settings. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .menu-item-handle {
  background: var(--yp-dark-surface-raised);
  border-color: var(--yp-dark-border);
  color: var(--yp-dark-text);
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  :is(.menu-item-settings, .menu-settings) {
  background: var(--yp-dark-surface);
  border-color: var(--yp-dark-border);
  color: var(--yp-dark-text);
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  :is(.menu-item-handle .item-title, .menu-item-handle .item-controls a, .menu-item-bar .item-type) {
  color: var(--yp-dark-text);
}

/* "Add menu items" accordion panel + its tabbed lists. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  :is(.accordion-section-title, .accordion-section-content, .tabs-panel) {
  background: var(--yp-dark-surface);
  border-color: var(--yp-dark-border);
  color: var(--yp-dark-text);
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  :is(.accordion-section-title a, .categorychecklist label, .quick-search-wrap label) {
  color: var(--yp-dark-text);
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .nav-menus-php .item-edit {
  color: var(--yp-dark-text-muted);
}

/* =========================================================================
 * Appearance → Widgets — classic columns (Classic Widgets plugin / fallback)
 * ========================================================================= */

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  :is(#widgets-left, #widgets-right, .widget-liner, .widget-holder, .sidebars-column-1, .sidebars-column-2) {
  background: var(--yp-dark-surface);
  border-color: var(--yp-dark-border);
  color: var(--yp-dark-text);
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  :is(.widget .widget-top, .widget-top .widget-title h3, .sidebar-name, .sidebar-name h2) {
  background: var(--yp-dark-surface-raised);
  color: var(--yp-dark-text);
  border-color: var(--yp-dark-border);
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  :is(.widget-inside, .widget .widget-inside) {
  background: var(--yp-dark-surface);
  border-color: var(--yp-dark-border);
  color: var(--yp-dark-text);
}

/* =========================================================================
 * Appearance → Widgets — block-based editor (default since WP 5.8)
 *
 * The widgets block editor renders inside #wpbody-content (not the fullscreen
 * post-editor shell), so its surfaces are reachable from page CSS. Block
 * components carry inline/high-specificity styles, so these use !important —
 * matching the block-editor module's approach.
 * ========================================================================= */

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  :is(
    .interface-interface-skeleton,
    .interface-interface-skeleton__body,
    .interface-interface-skeleton__content,
    .interface-interface-skeleton__sidebar,
    .interface-interface-skeleton__secondary-sidebar,
    .edit-widgets-layout,
    .edit-widgets-block-editor,
    .edit-widgets-main-block-list,
    .editor-styles-wrapper
  ) {
  background: var(--yp-dark-surface) !important;
  color: var(--yp-dark-text) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  :is(.interface-interface-skeleton__header, .edit-widgets-header) {
  background: 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-wp
  #wpbody-content
  :is(.components-panel, .components-panel__body, .components-panel__header, .block-editor-inserter__panel-content) {
  background: var(--yp-dark-surface) !important;
  border-color: var(--yp-dark-border) !important;
  color: var(--yp-dark-text) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  :is(
    .edit-widgets-header__title,
    .components-panel__body-title,
    .components-panel__body-toggle,
    .block-editor-block-card__title,
    .components-base-control__label
  ) {
  color: var(--yp-dark-text) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .components-button:not(.is-primary) {
  color: var(--yp-dark-text) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  :is(
    .components-text-control__input,
    .components-textarea-control__input,
    .components-select-control__input,
    .block-editor-inserter__search input
  ) {
  background: var(--yp-dark-field) !important;
  border-color: var(--yp-dark-field-border) !important;
  color: var(--yp-dark-text) !important;
}

/* Widget blocks placed in the canvas. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  :is(.wp-block-widget-area, .block-editor-block-list__block, .wp-block) {
  color: var(--yp-dark-text) !important;
}