/**
 * YOOAdmin Dark Engine v2 — WordPress core settings/tools dark layer.
 *
 * Token-based, zero duplication. Scoped to the single context class
 * `body.yp-dark-v2-wp` inside #wpbody-content so it never touches the admin
 * menu/shell. High specificity + load-after-core beats forms.css without
 * !important (core settings forms carry no inline styles).
 *
 * Replaces the enumerated dark rules scattered across wp-settings-experience.css
 * and studio-hub-plugin-admin-dark.css for these screens.
 */

/* Surfaces: wrap cards, postboxes, tables, accordions. Standard WP primitives —
 * authoritative (!important) so plugin/inline white can't leak. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  :is(.card, .postbox, .stuffbox, .form-table, fieldset, .health-check-accordion) {
  background: var(--yp-dark-surface) !important;
  border-color: var(--yp-dark-border);
  color: var(--yp-dark-text);
}

/* Text: headings, labels, descriptions, table cells. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  :is(h1, h2, h3, h4, .form-table th, .form-table td, label, legend, strong, p, li, dt, dd) {
  color: var(--yp-dark-text);
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  :is(.description, p.description, .form-table td p.description, .howto, .help) {
  color: var(--yp-dark-text-muted);
}

/* Form fields: the white-input fix. Authoritative so plugin/inline white can't
 * leak (same class of bug as the native 2FA fields). */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  :is(
    input[type='text'], input[type='url'], input[type='email'],
    input[type='number'], input[type='password'], input[type='search'],
    input[type='tel'], input[type='date'], textarea,
    select:not([multiple])
  ) {
  background: var(--yp-dark-field) !important;
  border: 1px solid var(--yp-dark-field-border) !important;
  color: var(--yp-dark-text) !important;
  color-scheme: dark;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  :is(input, textarea, select):focus {
  border-color: var(--yp-dark-accent);
  box-shadow: 0 0 0 1px var(--yp-dark-field-focus);
  outline: none;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  input[type='checkbox'] {
  accent-color: var(--yp-dark-accent);
  color-scheme: dark;
}

/* Site icon preview: the white-box fix. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  :is(.site-icon-preview, .app-icon-preview, #site-icon-preview, .favicon-preview) {
  background: var(--yp-dark-surface-raised);
  border-color: var(--yp-dark-border);
}

/* Secondary buttons (primary keeps its accent). */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .button-secondary {
  background: var(--yp-dark-surface-raised);
  border-color: var(--yp-dark-field-border);
  color: var(--yp-dark-text);
}

/* Links, separators, inline code. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  a:not(.button):not(.button-primary) {
  color: var(--yp-dark-link);
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  :is(hr, .form-table tr) {
  border-color: var(--yp-dark-border-soft);
}

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

/* -------------------------------------------------------------------------
 * Core user screens (default profile.php / user-edit.php / user-new.php).
 * These render with plain core markup and, without a dark layer, leave most
 * text dark-on-dark under the Focus shell. Only applies to the *default* core
 * screens — YOOAdmin's own user pages live under admin.php?page=yooadmin-* and
 * are excluded from this context entirely.
 * ------------------------------------------------------------------------- */

/* Admin color-scheme picker: readable option frames; swatches stay true-colour
   (the .color-palette table is intentionally left untouched). */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .color-option {
  background: var(--yp-dark-surface);
  border-color: var(--yp-dark-border);
}

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

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .color-option.selected {
  background: var(--yp-dark-surface-raised);
  border-color: var(--yp-dark-accent);
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  :is(.color-option .color-palette-label, .color-palette caption) {
  color: var(--yp-dark-text);
}

/* Profile picture / avatar cell and helper text. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  :is(.user-profile-picture td, .user-profile-picture .description) {
  color: var(--yp-dark-text-muted);
}

/* Application Passwords + Sessions tables (not .wp-list-table). */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  :is(.application-passwords-user table, table.application-passwords-user) {
  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(.application-passwords-user th, .application-passwords-user td) {
  border-color: var(--yp-dark-border-soft);
  color: var(--yp-dark-text);
}

/* -------------------------------------------------------------------------
 * wp_editor() chrome — Visual/Code tabs, quicktags toolbar + buttons, tools and
 * container wrappers. Universal WP primitive (core comment replies, plugin
 * description fields, etc.); core forms.css paints the toolbar buttons white, so
 * these are authoritative. The TinyMCE iframe is themed by the bridge; the
 * Code-mode textarea is covered by the form-field rule above.
 * ------------------------------------------------------------------------- */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  :is(.wp-editor-tools, .wp-editor-container) {
  background: var(--yp-dark-surface) !important;
  border-color: var(--yp-dark-border) !important;
}

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

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .quicktags-toolbar
  :is(input.ed_button, button.ed_button, .ed_button) {
  background: var(--yp-dark-field) !important;
  border-color: var(--yp-dark-field-border) !important;
  color: var(--yp-dark-text) !important;
  text-shadow: none !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .quicktags-toolbar
  :is(input.ed_button, button.ed_button, .ed_button):hover,
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .quicktags-toolbar
  :is(input.ed_button, button.ed_button, .ed_button):focus {
  border-color: var(--yp-dark-accent) !important;
  color: var(--yp-dark-text) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .wp-editor-tabs
  .wp-switch-editor {
  background: var(--yp-dark-surface) !important;
  border-color: var(--yp-dark-border) !important;
  color: var(--yp-dark-text-muted) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .wp-editor-wrap.tmce-active
  .wp-editor-tabs
  .switch-tmce,
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .wp-editor-wrap.html-active
  .wp-editor-tabs
  .switch-html {
  background: var(--yp-dark-surface-raised) !important;
  color: var(--yp-dark-text) !important;
  border-bottom-color: var(--yp-dark-surface-raised) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .wp-media-buttons
  .button {
  background: var(--yp-dark-surface-raised) !important;
  border-color: var(--yp-dark-field-border) !important;
  color: var(--yp-dark-text) !important;
}

/* -------------------------------------------------------------------------
 * @wordpress/components — universal React UI primitives on wp-core screens.
 * ------------------------------------------------------------------------- */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  :is(.components-panel, .components-panel__body) {
  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(.components-panel__header, .components-panel__body-title,
      .components-panel__body-toggle) {
  color: var(--yp-dark-text) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  :is(.components-card, [data-wp-component="Card"]) {
  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(.components-card__header, .components-card__body, .components-card__footer) {
  background: transparent !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
  .components-base-control {
  color: var(--yp-dark-text) !important;
}

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

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

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

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

/* -------------------------------------------------------------------------
 * Tag / token inputs — universal primitives:
 *   1. @wordpress/components FormTokenField (.components-form-token-field*).
 *   2. WP core post-tags box (.tagchecklist).
 *   3. select2 multi-select choices.
 * Token "pills" default to light backgrounds; authoritative dark here.
 * ------------------------------------------------------------------------- */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .components-form-token-field__input-container {
  background: var(--yp-dark-field) !important;
  border-color: var(--yp-dark-field-border) !important;
  color: var(--yp-dark-text) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  :is(.components-form-token-field__token, .components-form-token-field__token-text,
      .components-form-token-field__remove-token) {
  background: var(--yp-dark-surface-raised) !important;
  color: var(--yp-dark-text) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .components-form-token-field__remove-token:hover {
  color: var(--yp-dark-accent) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .components-form-token-field__input {
  background: transparent !important;
  color: var(--yp-dark-text) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .components-form-token-field__suggestions-list {
  background: var(--yp-dark-surface) !important;
  border-color: var(--yp-dark-border) !important;
}

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

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .components-form-token-field__suggestion.is-selected {
  background: var(--yp-dark-accent) !important;
  color: #fff !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .tagchecklist
  > li {
  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
  .select2-container--default
  .select2-selection--multiple
  .select2-selection__choice {
  background: var(--yp-dark-surface-raised) !important;
  border-color: var(--yp-dark-field-border) !important;
  color: var(--yp-dark-text) !important;
}

/* -------------------------------------------------------------------------
 * YOOAdmin custom select (yp-ui-select) on core screens. The visible control
 * is a div-based trigger (the native <select> is hidden), so the generic
 * `select` dark rule above never reaches it — style it explicitly here.
 * ------------------------------------------------------------------------- */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .yp-ui-select
  .yp-custom-select__trigger {
  background: var(--yp-dark-field);
  border-color: var(--yp-dark-field-border);
  color: var(--yp-dark-text);
  color-scheme: dark;
  box-shadow: none;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .yp-ui-select.is-open
  .yp-custom-select__trigger,
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .yp-ui-select
  .yp-custom-select__trigger:focus,
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .yp-ui-select
  .yp-custom-select__trigger:focus-visible {
  border-color: var(--yp-dark-accent);
  box-shadow: 0 0 0 1px var(--yp-dark-field-focus);
  outline: none;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .yp-ui-select
  .yp-custom-select__value {
  color: var(--yp-dark-text);
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .yp-ui-select
  :is(.yp-custom-select__placeholder, .yp-custom-select__chevron) {
  color: var(--yp-dark-text-muted);
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .yp-ui-select
  .yp-custom-select__drop {
  background: var(--yp-dark-surface);
  border-color: var(--yp-dark-border);
  box-shadow: var(--yp-dark-shadow);
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .yp-ui-select
  .yp-custom-select__search {
  background: var(--yp-dark-field);
  border-color: var(--yp-dark-field-border);
  color: var(--yp-dark-text);
  color-scheme: dark;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .yp-ui-select
  :is(.yp-custom-select__option, .yp-custom-select__option-main) {
  color: var(--yp-dark-text);
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .yp-ui-select
  .yp-custom-select__option-sub {
  color: var(--yp-dark-text-muted);
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .yp-ui-select
  .yp-custom-select__option:is(.is-active, :hover) {
  background: var(--yp-dark-surface-raised);
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .yp-ui-select
  .yp-custom-select__option.is-selected
  .yp-custom-select__option-main {
  color: var(--yp-dark-accent);
}

/* -------------------------------------------------------------------------
 * Select2 / SelectWoo (WooCommerce country & state on profile.php, etc.).
 * WC replaces native <select> after load — the generic `select` rule above
 * no longer applies once .select2-container is injected.
 * Dropdown panels are portaled to <body>, so they need a body-level scope too.
 * ------------------------------------------------------------------------- */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .select2-container--default
  .select2-selection--single,
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .select2-container--default
  .select2-selection--multiple {
  background: var(--yp-dark-field) !important;
  background-color: var(--yp-dark-field) !important;
  border-color: var(--yp-dark-field-border) !important;
  color: var(--yp-dark-text) !important;
  color-scheme: dark;
  box-shadow: none !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .select2-container--default
  .select2-selection__rendered,
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .select2-container--default
  .select2-selection__placeholder {
  color: var(--yp-dark-text) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .select2-container--default
  .select2-selection__arrow
  b {
  border-color: var(--yp-dark-text-muted) transparent transparent transparent !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .select2-container--default.select2-container--open
  .select2-selection--single,
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  #wpbody-content
  .select2-container--default.select2-container--open
  .select2-selection--multiple {
  border-color: var(--yp-dark-accent) !important;
  box-shadow: 0 0 0 1px var(--yp-dark-field-focus) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  .select2-dropdown {
  background: var(--yp-dark-surface) !important;
  background-color: var(--yp-dark-surface) !important;
  border-color: var(--yp-dark-border) !important;
  color: var(--yp-dark-text) !important;
  box-shadow: var(--yp-dark-shadow) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  .select2-search--dropdown
  .select2-search__field {
  background: var(--yp-dark-field) !important;
  background-color: var(--yp-dark-field) !important;
  border-color: var(--yp-dark-field-border) !important;
  color: var(--yp-dark-text) !important;
  color-scheme: dark;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  .select2-results__option {
  color: var(--yp-dark-text) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  .select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background: var(--yp-dark-surface-raised) !important;
  color: var(--yp-dark-text) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-wp
  .select2-container--default
  .select2-results__option[aria-selected='true'] {
  background: color-mix(in srgb, var(--yp-dark-accent) 14%, transparent) !important;
  color: var(--yp-dark-accent) !important;
}