/* PlaySlot final shell/theme layer.
   Loaded after the legacy inline SPA stylesheet to prevent old-theme flashes. */

:root,
html:root,
html[data-pl-route] {
  color-scheme: dark !important;
  --bg-body: #050505 !important;
  --bg-panel: linear-gradient(160deg, #161616, #0e0e0e) !important;
  --bg-raised: #151515 !important;
  --bg-sidebar: linear-gradient(180deg, #0b0b0b, #070707) !important;
  --bg-input: #0e0e0e !important;
  --bg-surface: #0d0d0d !important;
  --bg-hover: rgba(255,255,255,.045) !important;
  --bg-active: rgba(245,180,0,.11) !important;
  --text-primary: #fff !important;
  --text-secondary: #cfcfcf !important;
  --text-muted: #8c8c8c !important;
  --border-color: rgba(255,255,255,.075) !important;
  --accent: #f5b400 !important;
  --accent-color: #f5b400 !important;
  --accent-hover: #ffc533 !important;
  --accent-alt: #c98a00 !important;
  --accent-blue: #f5b400 !important;
  --accent-warning: #f5b400 !important;
  --status-success: #3ecf8e !important;
  --status-info: #f5b400 !important;
  --status-purple: #f5b400 !important;
  --status-warning: #f5b400 !important;
  --status-danger: #ef5b6e !important;
  --select-trigger-bg: #101010 !important;
  --select-menu-bg: #141414 !important;
  --select-menu-border: rgba(245,180,0,.22) !important;
  --select-option-active-bg: rgba(245,180,0,.13) !important;
  --filter-accent: #f5b400 !important;
  --filter-accent-weak: rgba(245,180,0,.10) !important;
  --filter-accent-border: rgba(245,180,0,.30) !important;
}

html,
html[data-pl-route],
html[data-pl-route] body,
html[data-pl-route] body.light-mode {
  background: #050505 !important;
  color: #fff !important;
}

/* Never reveal the legacy shell during a hard refresh. */
html.pl-shell-booting #root,
body.pl-booting #root {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: none !important;
  pointer-events: none !important;
}
html:not(.pl-shell-booting) #root,
body:not(.pl-booting) #root {
  visibility: visible;
}

html[data-pl-route] .pl-dashboard-vanta,
html[data-pl-route] body.light-mode .pl-dashboard-vanta {
  opacity: 0 !important;
  background: #050505 !important;
}

/* Stable PlaySlot loader shown while React/session data are mounting. */
html[data-pl-route] .pl-boot,
html[data-pl-route] body.light-mode .pl-boot {
  background:
    radial-gradient(760px 420px at 50% 8%, rgba(245,180,0,.075), transparent 64%),
    #050505 !important;
}
html[data-pl-route] .loader {
  border-color: rgba(255,255,255,.10) !important;
  border-top-color: #f5b400 !important;
  border-right-color: #ffc533 !important;
  box-shadow: 0 0 28px rgba(245,180,0,.10) !important;
}

/* Force the protected app to stay on the dark PlaySlot skin. */
html[data-pl-route] body.light-mode,
html[data-pl-route] body.light-mode :where(.ps-panel,.ps-stat-card,.dash-panel,.dash-kpi-card,.dash-scope-card,.dash-status-card,.ps-tablewrap,.card) {
  background-color: transparent;
  color: var(--text-primary) !important;
}
html[data-pl-route] body.light-mode :where(input,select,textarea) {
  background: #0e0e0e !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #e6e6e6 !important;
}

/* Filters: dark surfaces from the new layout, never legacy green fills. */
html[data-pl-route] .ps-filter-strip {
  background: transparent !important;
}
html[data-pl-route] .ps-filter-card {
  background: linear-gradient(160deg,#151515,#0d0d0d) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
html[data-pl-route] .ps-filter-card:hover,
html[data-pl-route] .ps-filter-card:focus-within {
  border-color: rgba(245,180,0,.30) !important;
  background: linear-gradient(160deg,#181818,#0f0f0f) !important;
}
html[data-pl-route] .ps-filter-card .ps-filter-ic {
  background: rgba(245,180,0,.09) !important;
  border: 1px solid rgba(245,180,0,.18) !important;
  color: #f5b400 !important;
}
html[data-pl-route] .ps-filter-label { color: #777 !important; }
html[data-pl-route] .ps-filter-static,
html[data-pl-route] .ps-filter-select { color: #e8e8e8 !important; }
html[data-pl-route] .ps-filter-select {
  background-color: transparent !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23F5B400' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
}
html[data-pl-route] .pl-filter-chip {
  background: linear-gradient(180deg,#151515,#0f0f0f) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #d8d8d8 !important;
  box-shadow: none !important;
}
html[data-pl-route] .pl-filter-chip:hover,
html[data-pl-route] .pl-filter-chip:focus-visible,
html[data-pl-route] .pl-filter-chip[aria-pressed="true"],
html[data-pl-route] .pl-filter-chip[data-active="true"] {
  background: linear-gradient(180deg,#191919,#111) !important;
  border-color: rgba(245,180,0,.34) !important;
  color: #fff !important;
}

/* Native and custom dropdown menus. */
html[data-pl-route] :where(input,select,textarea) {
  background: #0e0e0e !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #e6e6e6 !important;
}
html[data-pl-route] :where(input,select,textarea):focus,
html[data-pl-route] :where(input,select,textarea):focus-visible {
  outline: none !important;
  border-color: rgba(245,180,0,.50) !important;
  box-shadow: 0 0 0 3px rgba(245,180,0,.08) !important;
}
html[data-pl-route] select option {
  background: #111 !important;
  color: #e6e6e6 !important;
}
html[data-pl-route] :where([role="listbox"],[role="menu"],.reg-ct-dd,.reg-dropdown,.ps-select-menu) {
  background: linear-gradient(180deg,#151515,#0e0e0e) !important;
  border-color: rgba(245,180,0,.22) !important;
  color: #e6e6e6 !important;
}
html[data-pl-route] :where([role="option"],[role="menuitem"],.reg-dd-item,.ps-select-option):hover,
html[data-pl-route] :where([role="option"][aria-selected="true"],[role="menuitem"][aria-current="true"],.reg-dd-item.active,.ps-select-option.is-active) {
  background: rgba(245,180,0,.12) !important;
  color: #fff !important;
}

/* Dashboard chart dropdowns follow the gold/black layout. */
html[data-pl-route] .psdash .ps-pill-wrap {
  background: linear-gradient(180deg,#171717,#101010) !important;
  border-color: rgba(245,180,0,.22) !important;
}
html[data-pl-route] .psdash .ps-pill-wrap:hover,
html[data-pl-route] .psdash .ps-pill-wrap:focus-within,
html[data-pl-route] .psdash .ps-pill-wrap.is-open {
  border-color: rgba(245,180,0,.52) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06),0 10px 26px rgba(0,0,0,.24) !important;
}
html[data-pl-route] .psdash .ps-select-caret { color: #f5b400 !important; }
html[data-pl-route] .psdash .ps-select-menu { border-color: rgba(245,180,0,.22) !important; }
html[data-pl-route] .psdash .ps-select-option.is-active {
  background: linear-gradient(180deg,rgba(245,180,0,.22),rgba(245,180,0,.12)) !important;
  color: #ffd978 !important;
}

/* Primary actions stay PlaySlot gold; green is reserved for success states. */
html[data-pl-route] :where(.pl-ui-btn--primary,.pl-btn--primary,button[type="submit"],.btn-primary,.login-btn) {
  background: linear-gradient(180deg,#ffc533,#c98a00) !important;
  border-color: transparent !important;
  color: #1a1200 !important;
}
html[data-pl-route] :where(.badge-ok,.b-active,.b-approved) {
  background: rgba(62,207,142,.13) !important;
  color: #3ecf8e !important;
}
html[data-pl-route] :where(.tag-type,.tag-model,.reg-tag) {
  background: rgba(62,207,142,.11) !important;
  border-color: rgba(62,207,142,.24) !important;
  color: #3ecf8e !important;
}

@media (max-width: 720px) {
  html[data-pl-route] .ps-filter-strip {
    width: 100% !important;
  }
  html[data-pl-route] .ps-filter-card,
  html[data-pl-route] .pl-filter-chip {
    background: linear-gradient(160deg,#151515,#0d0d0d) !important;
    border-color: rgba(245,180,0,.22) !important;
  }
  html[data-pl-route] :where([role="listbox"],[role="menu"],.reg-ct-dd,.reg-dropdown,.ps-select-menu) {
    background: #111 !important;
    border-color: rgba(245,180,0,.3) !important;
  }
  /* Mobile dashboard dropdown accents */
  html[data-pl-route] .ps-react-sidebar.dashboard-mobile-menu {
    background: linear-gradient(160deg,#161616,#0c0c0c) !important;
    border-color: rgba(245,180,0,.18) !important;
  }
  html[data-pl-route] .dashboard-mobile-menu .nav-item.active {
    color: #f5b400 !important;
  }
}


/* v11: direct cleanup for Campaigns and every shared SelectField portal. */
html[data-pl-route] [data-sf-build="r11-playslot-menu"] {
  background: #111 !important;
  background-color: #111 !important;
  border: 1px solid rgba(245,180,0,.22) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.55) !important;
}
html[data-pl-route] [data-sf-build="r11-playslot-menu"] [role="option"] {
  border-radius: 8px !important;
  color: #d8d8d8 !important;
}
html[data-pl-route] [data-sf-build="r11-playslot-menu"] [role="option"]:hover,
html[data-pl-route] [data-sf-build="r11-playslot-menu"] [role="option"][aria-selected="true"] {
  background: rgba(245,180,0,.12) !important;
  color: #fff !important;
}
html[data-pl-route] [role="combobox"] {
  background: linear-gradient(180deg,#151515,#0f0f0f) !important;
  border-color: rgba(255,255,255,.09) !important;
}
html[data-pl-route] [role="combobox"]:hover,
html[data-pl-route] [role="combobox"]:focus-visible,
html[data-pl-route] [role="combobox"][aria-expanded="true"] {
  border-color: rgba(245,180,0,.38) !important;
  box-shadow: 0 0 0 3px rgba(245,180,0,.07) !important;
}