/**
 * YOOAdmin Dark Engine v2 — generic third-party plugin admin dark layer.
 *
 * Token-based, conservative coverage for plugins that reuse standard WordPress
 * admin markup (.wrap, .card, .postbox, .form-table, .nav-tab-wrapper, notices,
 * buttons). Scoped to `body.yp-dark-v2-plugin` inside #wpbody-content.
 *
 * Intentionally does NOT do aggressive [class*=] surface matching — unknown
 * custom markup is left to the narrow adaptive JS fallback (later phase) so we
 * never miscolor a plugin's bespoke UI from CSS alone.
 */

/* Generic plugin page shell — plain .wrap without a self-contained app. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  > .wrap:not([class*='yooadmin']) {
  color: var(--yp-dark-text);
}

/* Standard surfaces. These are well-defined WordPress admin primitives, so
 * darkening them is always correct — authoritative (!important) to stop plugin
 * CSS/inline white from leaking. (Fuzzy [class*=] matchers below stay soft.) */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(.card, .postbox, .stuffbox, .box, .metabox-holder .postbox, .form-table, fieldset, .inside) {
  background: var(--yp-dark-surface) !important;
  border-color: var(--yp-dark-border);
  color: var(--yp-dark-text);
}

/* Postbox / metabox headers. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(.postbox-header, .postbox > h2, .postbox > h3, .stuffbox > h2, .stuffbox > h3) {
  background: var(--yp-dark-surface-raised);
  color: var(--yp-dark-text);
  border-color: var(--yp-dark-border);
}

/* Text — broad coverage including custom plugin elements. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(h1, h2, h3, h4, h5, h6, .form-table th, .form-table td,
      label, legend, strong, b, em, p, li, dt, dd,
      span:not([class*='__']):not(.badge):not([class*='-badge']),
      div:not([class*='__']):not(.badge):not([class*='-badge']),
      [class*='-title'], [class*='-heading'], [class*='-label'],
      [class*='-text'], [class*='-name'], [class*='-description'],
      [class*='Title'], [class*='Heading'], [class*='Label'],
      [class*='Text'], [class*='Name']) {
  color: var(--yp-dark-text);
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(.description, p.description, .howto, .help, small,
      [class*='-subtitle'], [class*='-meta'], [class*='-hint'],
      [class*='-info']:not(.notice):not(.error):not(.updated),
      [class*='-secondary'], [class*='-muted'], [class*='-light'],
      [class*='-caption'], [class*='-note']) {
  color: var(--yp-dark-text-muted);
}

/* Tab / pill buttons — inactive state gets visible muted text. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(
    [class*='-tab']:not(.nav-tab-active):not([aria-selected='true']),
    [class*='-pill']:not(.active):not([aria-selected='true']),
    [class*='-filter']:not(.active):not(.current),
    [class*='Tab']:not(.active), [class*='Pill']:not(.active),
    [role='tab']:not([aria-selected='true'])
  ) {
  color: var(--yp-dark-text-muted);
  border-color: var(--yp-dark-border);
}

/* Tab / pill buttons — active state gets full contrast. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(
    [class*='-tab'][aria-selected='true'], .nav-tab-active,
    [class*='-pill'].active, [class*='-filter'].current,
    [role='tab'][aria-selected='true']
  ) {
  color: var(--yp-dark-text);
  border-color: var(--yp-dark-accent);
}

/* Form fields. Universal primitives — authoritative so plugin/inline white can't
 * leak (this is the "white title input" class of bug). */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #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-plugin
  #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-plugin
  #wpbody-content
  input[type='checkbox']:not(.switch) {
  accent-color: var(--yp-dark-accent);
  color-scheme: dark;
}

/* Plugin toggle switches (appearance:none sliders — not native checkboxes). */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  input[type='checkbox'].switch {
  appearance: none !important;
  -webkit-appearance: none !important;
  accent-color: unset !important;
  color-scheme: dark;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  input[type='checkbox'].switch::before {
  content: '' !important;
  color: transparent !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  input[type='checkbox'].switch:checked {
  background-color: #0073aa !important;
  border-color: #0073aa !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  input[type='checkbox'].switch:checked::before {
  background-color: #fff !important;
}

/* -------------------------------------------------------------------------
 * react-select / emotion custom selects (v5 — no __control BEM; uses *-select
 * wrappers + *-control suffix + camelCase inner nodes from emotion).
 * ------------------------------------------------------------------------- */

/* Wrapper surfaces (PHP type, location, generic plugin selects). */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(
    [class*='type-container'],
    [class*='type-option'],
    [class*='dropdown'],
    [class*='-select'],
    [role='button'][aria-haspopup='listbox'],
    [role='combobox'],
    [role='listbox']
  ):not(:is(.button, .button-primary, .button-secondary, .button-link)) {
  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;
  -webkit-text-fill-color: var(--yp-dark-text) !important;
  box-shadow: none !important;
}

/* Inner control/menu nodes (emotion classes like css-xxx-control). */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(
    [class*='-select'] [class*='-control'],
    [class*='type-container'] [class*='-control'],
    [class*='type-container'] > div[class],
    [class*='-select'] [class*='-menu'],
    [class*='-select'] [class*='-menu-list'],
    [class*='-select'] [class*='-MenuList'],
    [class*='-select'] [class*='-option'],
    [class*='-select'] [class*='-Option'],
    [class*='__control'],
    [class*='__menu'],
    [class*='__menu-list']
  ) {
  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;
  -webkit-text-fill-color: var(--yp-dark-text) !important;
  box-shadow: none !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(
    [class*='-select'] [class*='-option--is-focused'],
    [class*='-select'] [class*='-option--is-selected'],
    [class*='-select'] [class*='-option']:hover,
    [class*='__option--is-focused'],
    [class*='__option--is-selected']
  ) {
  background: var(--yp-dark-surface-raised) !important;
  background-color: var(--yp-dark-surface-raised) !important;
  color: var(--yp-dark-text) !important;
}

/* Value container + inner text. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(
    [class*='-select'] :is(
      [class*='singleValue'],
      [class*='single-value'],
      [class*='ValueContainer'],
      [class*='value-container'],
      [class*='placeholder'],
      [class*='Placeholder'],
      [class*='Input'],
      [class*='input']
    ),
    [class*='type-container'] :is(
      [class*='singleValue'],
      [class*='ValueContainer'],
      [class*='placeholder']
    ),
    [class*='__value-container'],
    [class*='__single-value'],
    [class*='__placeholder'],
    [class*='__input-container'],
    [class*='__input-container'] input
  ) {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--yp-dark-text) !important;
  -webkit-text-fill-color: var(--yp-dark-text) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is([class*='-select'], [class*='type-container'])
  :is(span, div, svg, path, .dashicons) {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  fill: currentColor !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(
    [class*='-select'] :is([class*='indicator'], [class*='Indicator'], [class*='indicator-separator'], [class*='IndicatorSeparator']),
    [class*='__indicator'],
    [class*='__indicator-separator']
  ) {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--yp-dark-text-muted) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is([class*='-select'], [class*='type-container']) input {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  color: var(--yp-dark-text) !important;
  -webkit-text-fill-color: var(--yp-dark-text) !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Portaled react-select menus (mounted on <body>). */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  > :is(
    [class*='-menu']:not([id*='adminmenu']),
    [class*='__menu'],
    [class*='__menu-list'],
    [class*='__option']
  ) {
  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;
}

/* Plugin badges — pastel/light variants clash after broad text rules. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(
    .pro-badge,
    .neutral-badge,
    .beta-badge,
    .inverted-badges .badge,
    .nav-tab-inactive .badge
  ) {
  background-color: var(--yp-dark-surface-raised) !important;
  color: var(--yp-dark-text) !important;
  -webkit-text-fill-color: var(--yp-dark-text) !important;
  border: 1px solid var(--yp-dark-border) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(
    .php-badge,
    .html-badge,
    .css-badge,
    .js-badge,
    .cond-badge,
    .core-badge,
    .success-badge,
    .failure-badge,
    .info-badge,
    .cloud-badge
  ) {
  border: 1px solid transparent !important;
}

/* -------------------------------------------------------------------------
 * Inline React surfaces — plugins that bake light backgrounds into style=""
 * (e.g. import/upload cards). Attribute match beats inline background-color.
 * ------------------------------------------------------------------------- */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(
    div[style*='background-color: rgb(255, 255, 255)'],
    div[style*='background-color:rgb(255, 255, 255)'],
    div[style*='background-color: rgb(255,255, 255)'],
    div[style*='background-color:rgb(255,255,255)'],
    div[style*='background-color:#fff'],
    div[style*='background-color: #fff'],
    div[style*='background-color:#ffffff'],
    div[style*='background-color: #ffffff'],
    div[style*='background-color:#fafafa'],
    div[style*='background-color: #fafafa'],
    div[style*='background-color:#f6f7f7'],
    div[style*='background-color: #f6f7f7'],
    div[style*='background-color:#f0f6fc'],
    div[style*='background-color: #f0f6fc']
  ) {
  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;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(
    [class*='drop-zone'],
    [class*='upload-drop'],
    [class*='import-']
  ) {
  background: var(--yp-dark-surface-sunken) !important;
  background-color: var(--yp-dark-surface-sunken) !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-plugin
  #wpbody-content
  [class*='drop-zone'].drag-over,
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  [class*='drop-zone'][class*='drag-over'] {
  background: 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
  :is([id$='-container'], [id$='-app'], [id$='-root']):not([id^='yp-']):not([id^='yoo']) {
  color: var(--yp-dark-text);
}

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

/* Nav tabs. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  .nav-tab-wrapper {
  border-color: var(--yp-dark-border);
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  .nav-tab {
  background: var(--yp-dark-surface-raised);
  border-color: var(--yp-dark-border);
  color: var(--yp-dark-text-muted);
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  .nav-tab-active {
  background: var(--yp-dark-surface);
  color: var(--yp-dark-text);
}

/* Notices. Standard admin primitive — authoritative. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(.notice, .updated, .update-nag, div.error) {
  background: var(--yp-dark-surface) !important;
  background-color: var(--yp-dark-surface) !important;
  color: var(--yp-dark-text) !important;
  border-color: var(--yp-dark-border) !important;
  box-shadow: none !important;
}

/* Plugin-branded WP notices (BEM: .notice.notice-*, .notice.yoast, etc.). */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  .notice:is([class*='notice-'], .yoast, [class*='yoast']) {
  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: none !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  .notice
  :is(
    [class*='__header'],
    [class*='-content'],
    [class*='__content'],
    [class*='__container']
  ) {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--yp-dark-text) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  .notice
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    [class*='__header-heading'],
    [class*='-header-heading']
  ) {
  color: var(--yp-dark-heading, var(--yp-dark-text)) !important;
  -webkit-text-fill-color: var(--yp-dark-heading, var(--yp-dark-text)) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  .notice :is(p, span, li, small, label) {
  color: var(--yp-dark-text) !important;
  -webkit-text-fill-color: var(--yp-dark-text) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  .notice a:not(.button) {
  color: var(--yp-dark-link) !important;
  -webkit-text-fill-color: var(--yp-dark-link) !important;
}

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

/* In-app notification cards (*-general-page-notice, *-page-notice patterns). */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(
    [class*='general-page-notice'],
    [class*='-page-notice'],
    [class*='-admin-notice'],
    [class*='-dashboard-notice']
  ) {
  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: none !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(
    [class*='general-page-notice'],
    [class*='-page-notice'],
    [class*='-admin-notice'],
    [class*='-dashboard-notice']
  )
  :is(
    p,
    span,
    div,
    a:not(.button),
    [class*='text-sm'],
    [class*='font-medium'],
    [class*='text-slate'],
    [class*='text-gray']
  ) {
  color: var(--yp-dark-text) !important;
  -webkit-text-fill-color: var(--yp-dark-text) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(
    [class*='general-page-notice'],
    [class*='-page-notice'],
    [class*='-admin-notice'],
    [class*='-dashboard-notice']
  )
  a:not(.button) {
  color: var(--yp-dark-link) !important;
  -webkit-text-fill-color: var(--yp-dark-link) !important;
}

/* Secondary buttons. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #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-plugin
  #wpbody-content
  a:not(.button):not(.button-primary):not(.nav-tab) {
  color: var(--yp-dark-link);
}

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

/* -------------------------------------------------------------------------
 * Broad surface catch — plugin containers with light backgrounds.
 *
 * Many plugins use custom class names ([class*="-card"], [class*="-box"],
 * [class*="-lower"], [class*="-panel"]) with background: white/fff. Instead of
 * enumerating every plugin's class, we target the structural pattern: direct
 * children of .wrap or #wpbody-content that carry light surface semantics.
 *
 * Scoped tightly to avoid miscoloring intentionally-light decorative areas
 * (badges, tag clouds, image previews). Elements already handled by the
 * specific rules above are naturally overridden by specificity.
 * ------------------------------------------------------------------------- */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  > .wrap
  > :is(
    div, section, article, aside,
    [class*='-card'], [class*='-box'], [class*='-panel'],
    [class*='-lower'], [class*='-content'], [class*='-container'],
    [class*='-wrapper'], [class*='-section'], [class*='-main'],
    [class*='-body'], [class*='-inner'], [class*='-page'],
    [class*='Card'], [class*='Box'], [class*='Panel']
  ) {
  background: var(--yp-dark-surface);
  color: var(--yp-dark-text);
  border-color: var(--yp-dark-border);
}

/* Masthead / hero bars — typically full-width with white/light bg. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(
    [class*='-masthead'], [class*='-header'], [class*='-hero'],
    [class*='-banner'], [class*='-toolbar'], [class*='-topbar'],
    [class*='Header'], [class*='Banner']
  ) {
  background: var(--yp-dark-surface-raised);
  color: var(--yp-dark-text);
  border-color: var(--yp-dark-border);
}

/* Nested plugin cards/boxes (not just direct children of .wrap). */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(
    .box,
    [class*='-card'], [class*='-box']:not(select):not(input):not(textarea),
    [class*='-tile'], [class*='-item']:not(li):not(option),
    [class*='-tag-wrapper']
  ) {
  background: var(--yp-dark-surface) !important;
  background-color: var(--yp-dark-surface) !important;
  color: var(--yp-dark-text);
  border-color: var(--yp-dark-border);
}

/* Buttons inside plugin UIs that aren't WP standard. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(
    [class*='-button']:not(.button):not(.button-primary):not(.button-secondary),
    [class*='Button']:not(.button)
  ) {
  color: var(--yp-dark-text);
}

/* Input wrapper/group containers that carry light bg. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(
    [class*='-input-wrapper'], [class*='-form-wrapper'],
    [class*='-field-wrapper'], [class*='input-wrapper'],
    [class*='form-wrapper']
  ) {
  background: var(--yp-dark-surface);
  color: var(--yp-dark-text);
}

/* -------------------------------------------------------------------------
 * React app shells — universal mount points + design-system surfaces.
 *
 * Pattern-based coverage for modern plugin admin UIs: React mount divs,
 * *-paper/*-sidebar shells, Tailwind neutral utilities. No plugin-specific
 * selectors.
 * ------------------------------------------------------------------------- */

/* React mount roots inside plugin admin content. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(
    [id$='-general'],
    [id$='-dashboard'],
    [id$='-app'],
    [id*='plugin-container'],
    [id*='-admin']
  ):not([id^='yp-']):not([id^='yoo']) {
  color: var(--yp-dark-text);
}

/* Plugin settings shells — beat hardcoded whites (#fff, white) in vendor CSS. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(
    [id*='plugin-container'],
    [class*='-snapshot'],
    [class*='-card'],
    [class*='-box']
  ):not([class^='yp-']):not([class*=' yp-']):not([class^='yoo']):not([class*=' yoo']) {
  background: var(--yp-dark-surface) !important;
  background-color: var(--yp-dark-surface) !important;
  border: 1px solid var(--yp-dark-border) !important;
  border-color: var(--yp-dark-border) !important;
  box-shadow: none !important;
  color: var(--yp-dark-text);
}

/* Section / snapshot headers — no filled bars on sub-headings. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is([class*='section-header'], [class*='__header']) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(h1, h2, h3, h4, h5, h6)[class*='__header'] {
  background: none !important;
  color: var(--yp-dark-text-muted) !important;
}

/* Chart shells — v2 tokens (no hardcoded #fff frames). Invert only iframes. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  [class*='__chart']:not([class^='yp-']):not([class*=' yp-']) {
  background: var(--yp-dark-surface-sunken) !important;
  background-color: var(--yp-dark-surface-sunken) !important;
  border: 1px solid var(--yp-dark-border) !important;
  border-radius: var(--yp-dark-radius, 8px);
  box-shadow: none !important;
  overflow: hidden;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  [class*='__chart']:has(iframe) iframe {
  filter: invert(1) hue-rotate(180deg);
  background: #fff;
}

/* Paper / surface / sidebar shells (shared design-system naming). */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(
    [class*='-paper'],
    [class*='-surface'],
    [class*='-sidebar'],
    [class*='Paper'],
    [class*='Surface'],
    [class*='Sidebar']
  ):not(.button):not(.button-primary):not(.button-secondary):not([class*='upsell']):not(
      [class*='primary']
    ) {
  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;
}

/* Tailwind-style neutral light backgrounds. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is([class*='bg-white'], [class*='bg-slate-'], [class*='bg-gray-'], [class*='bg-neutral-']) {
  background: var(--yp-dark-surface) !important;
  background-color: var(--yp-dark-surface) !important;
}

/* Tailwind-style dark text utilities — lighten for dark surfaces. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(
    [class*='text-slate-'],
    [class*='text-gray-'],
    [class*='text-neutral-'],
    [class*='text-black']
  ) {
  color: var(--yp-dark-text) !important;
  -webkit-text-fill-color: var(--yp-dark-text) !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  [role='main'] {
  color: var(--yp-dark-text);
}

/* Portaled modals / toasts (often mounted on <body>, outside #wpbody-content). */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  > :is(
    [role='dialog'],
    [class*='-modal'],
    [class*='-toast'],
    [class*='-notification'],
    [class*='Modal'],
    [class*='Toast']
  ):not([class^='components-']):not([class*=' components-']) {
  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;
  -webkit-text-fill-color: var(--yp-dark-text) !important;
}

/* -------------------------------------------------------------------------
 * wp_editor() chrome — Visual/Code tabs, quicktags toolbar + its buttons, and
 * the tools/container wrappers. A universal WordPress primitive used by core
 * AND most plugins (e.g. Code Snippets "Description"). Core forms.css paints the
 * toolbar buttons (.ed_button / .button) white, so these are authoritative.
 * The TinyMCE writing surface (iframe) is themed by the tinymce bridge; the
 * Code-mode textarea (.wp-editor-area) is covered by the form-field rule above.
 * ------------------------------------------------------------------------- */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #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-plugin
  #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-plugin
  #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-plugin
  #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-plugin
  #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;
}

/* Visual / Code switch tabs. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #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-plugin
  #wpbody-content
  .wp-editor-wrap.tmce-active
  .wp-editor-tabs
  .switch-tmce,
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #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;
}

/* Media buttons row ("Add Media", etc.). */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #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.
 *
 * These components ship with WordPress core and are used by dozens of plugins
 * (Code Snippets, Jetpack, WooCommerce, etc.). CSS handles their dark mode
 * deterministically; the adaptive JS intentionally skips them to avoid
 * desynchronising React's virtual DOM.
 * ------------------------------------------------------------------------- */

/* Panels (collapsible sections, sidebars). */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #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-plugin
  #wpbody-content
  :is(.components-panel__header, .components-panel__body-title) {
  color: var(--yp-dark-text) !important;
}

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

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

/* Cards. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #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-plugin
  #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;
}

/* Form controls (base wrapper). */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  .components-base-control {
  color: var(--yp-dark-text) !important;
}

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

/* Input controls. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #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-plugin
  #wpbody-content
  .components-input-control__container {
  color: var(--yp-dark-text) !important;
}

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

/* Toggle control. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #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-plugin
  #wpbody-content
  .components-form-toggle:not(.is-checked) .components-form-toggle__track {
  border-color: var(--yp-dark-field-border) !important;
}

/* Checkbox / Radio controls. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(.components-checkbox-control__input, .components-radio-control__input) {
  accent-color: var(--yp-dark-accent) !important;
  color-scheme: dark !important;
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(.components-checkbox-control__label, .components-radio-control__option label) {
  color: var(--yp-dark-text) !important;
}

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

/* Button group + secondary buttons. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  .components-button-group .components-button:not(.is-primary) {
  background: var(--yp-dark-surface-raised) !important;
  border-color: var(--yp-dark-field-border) !important;
  color: var(--yp-dark-text) !important;
}

/* Dropdown / popover content. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  .components-popover__content {
  background: var(--yp-dark-surface) !important;
  border-color: var(--yp-dark-border) !important;
  color: var(--yp-dark-text) !important;
}

/* Surfaces / elevation. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(.components-surface, [data-wp-component="Surface"]) {
  background: var(--yp-dark-surface) !important;
  color: var(--yp-dark-text) !important;
}

/* Snackbar. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  .components-snackbar {
  background: var(--yp-dark-surface-raised) !important;
  color: var(--yp-dark-text) !important;
  border-color: var(--yp-dark-border) !important;
}

/* -------------------------------------------------------------------------
 * Tag / token inputs — universal primitives, not plugin-specific:
 *   1. @wordpress/components FormTokenField (.components-form-token-field*) —
 *      used by core (Gutenberg) and many plugins, e.g. Code Snippets tags.
 *   2. WP core post-tags box (.tagchecklist / .ntdelbutton).
 *   3. select2 multi-select choices (.select2-selection__choice).
 * Their token "pills" default to light backgrounds; authoritative dark here.
 * ------------------------------------------------------------------------- */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #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-plugin
  #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-plugin
  #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-plugin
  #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-plugin
  #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-plugin
  #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-plugin
  #wpbody-content
  .components-form-token-field__suggestion.is-selected {
  background: var(--yp-dark-accent) !important;
  color: #fff !important;
}

/* WP core post-tags token list. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  .tagchecklist
  > li {
  background: var(--yp-dark-surface-raised) !important;
  color: var(--yp-dark-text) !important;
  border-color: var(--yp-dark-border) !important;
}

/* select2 multi-select choices. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #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;
}

/* -------------------------------------------------------------------------
 * CodeMirror — many plugins embed a code editor (e.g. Code Snippets, custom-CSS
 * panels). The same dark theme used by the file-editor context is applied here
 * so the editor surface, line numbers, the typing caret, and the selection
 * highlight stay readable. The caret/selection classes are theme-independent,
 * so they work even when the plugin forces its own CodeMirror theme.
 * ------------------------------------------------------------------------- */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  .CodeMirror {
  background: var(--yp-dark-surface-sunken);
  color: var(--yp-dark-text);
  border-color: var(--yp-dark-border);
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  .CodeMirror-gutters {
  background: var(--yp-dark-surface);
  border-right-color: var(--yp-dark-border-soft);
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(.CodeMirror-linenumber, .CodeMirror-guttermarker-subtle) {
  color: var(--yp-dark-text-faint);
}

/* The typing caret: CodeMirror draws it as a bordered element, so caret-color
   does not reach it — colour its left border instead. */
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  .CodeMirror-cursor {
  border-left-color: var(--yp-dark-text);
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(.CodeMirror-selected, .CodeMirror-line ::selection, .CodeMirror-line::selection) {
  background: rgba(125, 180, 255, 0.22);
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  .CodeMirror-activeline-background {
  background: rgba(255, 255, 255, 0.04);
}

html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  .cm-s-default .cm-comment {
  color: #6b7c93;
}
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  .cm-s-default .cm-keyword {
  color: #c792ea;
}
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  .cm-s-default .cm-string {
  color: #c3e88d;
}
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(.cm-s-default .cm-variable, .cm-s-default .cm-variable-2) {
  color: #82aaff;
}
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  :is(.cm-s-default .cm-number, .cm-s-default .cm-atom) {
  color: #f78c6c;
}
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  .cm-s-default .cm-tag {
  color: #f07178;
}
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  .cm-s-default .cm-attribute {
  color: #ffcb6b;
}
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  .cm-s-default .cm-property {
  color: #82aaff;
}
html[data-yooadmin-studio-color-mode-effective='dark']
  body.yp-dark-v2-plugin
  #wpbody-content
  .cm-s-default .cm-def {
  color: #ffcb6b;
}