/**
 * SPBX client surfaces — light/dark theme (review, admin, presentation)
 * Loads after page inline styles + spbx-design.css
 */

/* ── Design tokens ── */
body.theme-dark,
body:not(.theme-light) {
  color-scheme: dark;
  --spbx-bg: #0d0c0a;
  --spbx-bg-elevated: #14120f;
  --spbx-surface: #1a1814;
  --spbx-surface-hover: #252219;
  --spbx-border: #2a2620;
  --spbx-border-soft: #3a342c;
  --spbx-text: #e8e4dc;
  --spbx-text-strong: #f5f2ed;
  --spbx-text-soft: #ccc;
  --spbx-text-muted: #888;
  --spbx-text-hint: #666;
  --spbx-accent: #5b7fa6;
  --spbx-accent-soft: rgba(91, 127, 166, 0.1);
  --spbx-accent-border: rgba(91, 127, 166, 0.15);
  /* Legacy “gold” token names → blue UI chrome (warm --identity kept for brand) */
  --spbx-gold: var(--spbx-accent);
  --spbx-gold-dim: #4a6d94;
  --spbx-gold-soft: var(--spbx-accent-soft);
  --spbx-gold-border: var(--spbx-accent-border);
  --spbx-gold-hover-bg: rgba(91, 127, 166, 0.08);
  --spbx-on-gold: #0d0d0d;
  --spbx-overlay: rgba(0, 0, 0, 0.55);
  --spbx-loading-bg: rgba(13, 12, 10, 0.88);
  --spbx-vote-no: #c04040;
  --spbx-vote-maybe: #b8b800;
  --background: #0d0d0d;
  --surface: #111111;
  --surface-raised: #1a1a1a;
  --text: var(--spbx-text);
  --text-dim: rgba(240, 237, 230, 0.38);
  --accent: var(--spbx-accent);
  --accent-dim: rgba(91, 127, 166, 0.35);
  --accent-border: var(--spbx-accent-border);
  --accent-soft: var(--spbx-accent-soft);
  --accent-soft-hover: rgba(91, 127, 166, 0.05);
  --identity: #a8874a;
  --identity-soft: rgba(168, 135, 74, 0.15);
  --rv-bg: var(--spbx-bg);
  --rv-bg-elevated: var(--spbx-bg-elevated);
  --rv-surface: var(--spbx-surface);
  --rv-surface-hover: var(--spbx-surface-hover);
  --rv-border: var(--spbx-border);
  --rv-border-soft: var(--spbx-border-soft);
  --rv-text: var(--spbx-text);
  --rv-text-strong: var(--spbx-text-strong);
  --rv-text-soft: var(--spbx-text-soft);
  --rv-text-muted: var(--spbx-text-muted);
  --rv-text-hint: var(--spbx-text-hint);
  --rv-gold: var(--spbx-gold);
  --rv-gold-dim: var(--spbx-gold-dim);
  --rv-gold-soft: var(--spbx-gold-soft);
  --rv-gold-border: var(--spbx-gold-border);
  --rv-gold-hover-bg: var(--spbx-gold-hover-bg);
  --rv-accent: var(--spbx-accent);
  --rv-accent-soft: var(--spbx-accent-soft);
  --rv-accent-border: var(--spbx-accent-border);
  --rv-on-gold: var(--spbx-on-gold);
  --rv-overlay: var(--spbx-overlay);
  --rv-loading-bg: var(--spbx-loading-bg);
  --rv-vote-no: var(--spbx-vote-no);
  --rv-vote-maybe: var(--spbx-vote-maybe);
}

body.theme-light {
  color-scheme: light;
  --spbx-bg: #f8f8f6;
  --spbx-bg-elevated: #ffffff;
  --spbx-surface: #ffffff;
  --spbx-surface-hover: #f0efeb;
  --spbx-border: rgba(17, 17, 17, 0.1);
  --spbx-border-soft: rgba(17, 17, 17, 0.15);
  --spbx-text: #111111;
  --spbx-text-strong: #111111;
  --spbx-text-soft: rgba(17, 17, 17, 0.72);
  --spbx-text-muted: rgba(17, 17, 17, 0.55);
  --spbx-text-hint: rgba(17, 17, 17, 0.45);
  --spbx-accent: #5b7fa6;
  --spbx-accent-soft: rgba(91, 127, 166, 0.1);
  --spbx-accent-border: rgba(91, 127, 166, 0.2);
  --spbx-gold: var(--spbx-accent);
  --spbx-gold-dim: #4a6d94;
  --spbx-gold-soft: var(--spbx-accent-soft);
  --spbx-gold-border: var(--spbx-accent-border);
  --spbx-gold-hover-bg: rgba(91, 127, 166, 0.08);
  --spbx-on-gold: #f8f8f6;
  --spbx-overlay: rgba(17, 17, 17, 0.35);
  --spbx-loading-bg: rgba(248, 248, 246, 0.92);
  --spbx-vote-no: #b04040;
  --spbx-vote-maybe: #9a9a00;
  --background: #f8f8f6;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --text: var(--spbx-text);
  --text-dim: var(--spbx-text-muted);
  --accent: var(--spbx-accent);
  --accent-dim: rgba(91, 127, 166, 0.35);
  --accent-border: var(--spbx-accent-border);
  --accent-soft: var(--spbx-accent-soft);
  --accent-soft-hover: rgba(91, 127, 166, 0.06);
  --identity: #a8874a;
  --identity-soft: rgba(168, 135, 74, 0.12);
  --rv-bg: var(--spbx-bg);
  --rv-bg-elevated: var(--spbx-bg-elevated);
  --rv-surface: var(--spbx-surface);
  --rv-surface-hover: var(--spbx-surface-hover);
  --rv-border: var(--spbx-border);
  --rv-border-soft: var(--spbx-border-soft);
  --rv-text: var(--spbx-text);
  --rv-text-strong: var(--spbx-text-strong);
  --rv-text-soft: var(--spbx-text-soft);
  --rv-text-muted: var(--spbx-text-muted);
  --rv-text-hint: var(--spbx-text-hint);
  --rv-gold: var(--spbx-gold);
  --rv-gold-dim: var(--spbx-gold-dim);
  --rv-gold-soft: var(--spbx-gold-soft);
  --rv-gold-border: var(--spbx-gold-border);
  --rv-gold-hover-bg: var(--spbx-gold-hover-bg);
  --rv-accent: var(--spbx-accent);
  --rv-accent-soft: var(--spbx-accent-soft);
  --rv-accent-border: var(--spbx-accent-border);
  --rv-on-gold: var(--spbx-on-gold);
  --rv-overlay: var(--spbx-overlay);
  --rv-loading-bg: var(--spbx-loading-bg);
  --rv-vote-no: var(--spbx-vote-no);
  --rv-vote-maybe: var(--spbx-vote-maybe);
}

/* Logo swap */
body.theme-dark .logo-img,
body:not(.theme-light) .logo-img {
  content: url('/Logo_White.png');
}

body.theme-light .logo-img {
  content: url('/Logo_Black.png');
}

body.theme-light .logo-img,
body.theme-light .gate-logo.logo-img,
body.theme-light .auth-logo.logo-img {
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* Theme toggle */
.theme-toggle {
  min-width: 34px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 15px;
  line-height: 1;
}

.theme-toggle--floating {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 1200;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--spbx-border);
  border-radius: 8px;
  background: var(--spbx-surface);
  color: var(--spbx-accent);
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle--floating:hover {
  border-color: var(--spbx-accent);
}

@media (min-width: 901px) {
  .theme-toggle--mobile {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .theme-toggle--desktop:not(.theme-toggle--floating) {
    display: none !important;
  }
}

/* ── Shared light surfaces ── */
body.theme-light {
  background: radial-gradient(
      ellipse 60% 50% at 85% 10%,
      rgba(91, 127, 166, 0.12) 0%,
      transparent 70%
    ),
    var(--spbx-bg) !important;
  background-color: var(--spbx-bg) !important;
  color: var(--spbx-text) !important;
}

body.theme-light .topbar,
body.theme-light .file-panel,
body.theme-light .gate-card,
body.theme-light .auth-card,
body.theme-light .rank-panel,
body.theme-light .mobile-menu-panel,
body.theme-light .toast,
body.theme-light .waveform,
body.theme-light .modal-card,
body.theme-light .ws-toolbar,
body.theme-light .cdb-detail-panel,
body.theme-light .hub-lead-drawer,
body.theme-light .cdb-card,
body.theme-light .swipe-card,
body.theme-light .tile,
body.theme-light .note-item {
  background: var(--spbx-surface) !important;
  border-color: var(--spbx-border) !important;
}

/* Layout shells stay transparent so page droplets show through (panels/topbars stay solid above). */

body.theme-light .fp-row:hover,
body.theme-light .fp-folder-head:hover,
body.theme-light .tile:hover {
  background: var(--spbx-surface-hover) !important;
}

body.theme-light .fp-row.active,
body.theme-light .tile.active {
  background: var(--spbx-accent-soft) !important;
  border-color: var(--spbx-accent-border) !important;
  box-shadow: inset 2px 0 0 var(--spbx-accent) !important;
}

body.theme-light .brand,
body.theme-light .brand-short,
body.theme-light .brand-label,
body.theme-light .top-brand,
body.theme-light .dashboard-identity-brand,
body.theme-light .dash-card-identity-brand,
body.theme-light .dash-row-identity-brand {
  color: var(--identity) !important;
}

body.theme-light .morse-bar {
  background: linear-gradient(90deg, transparent, rgba(91, 127, 166, 0.28), transparent) !important;
  border-top-color: var(--spbx-border) !important;
}

body.theme-light .topbar {
  border-bottom-color: var(--spbx-border) !important;
}

body.theme-light .gate-btn,
body.theme-light .auth-btn,
body.theme-light .play-btn,
body.theme-light .vid-play-btn {
  background: var(--spbx-accent) !important;
  color: var(--spbx-bg) !important;
}

body.theme-light .gate-btn:hover,
body.theme-light .auth-btn:hover {
  filter: brightness(1.08);
}

body.theme-light .review-loading-spinner,
body.theme-light .app-loading-overlay {
  border-color: var(--spbx-border) !important;
}

body.theme-light .review-loading-spinner {
  border-top-color: var(--spbx-accent) !important;
}

body.theme-light .app-loading-overlay {
  background: var(--spbx-loading-bg) !important;
  color: var(--spbx-text-muted) !important;
}

body.theme-light .prog-fill,
body.theme-light .vid-pf {
  background: var(--spbx-accent) !important;
}

body.theme-light .mobile-menu-btn {
  color: var(--spbx-accent) !important;
}

body.theme-light .dashboard-card,
body.theme-light .dashboard-row,
body.theme-light .posting-context-strip {
  background: var(--spbx-surface) !important;
  border-color: var(--spbx-border) !important;
}

body.theme-light .dashboard-card:hover,
body.theme-light .dashboard-row:hover {
  border-color: var(--spbx-border-soft) !important;
}

body.theme-light .posting-context-label,
body.theme-light .np-title,
body.theme-light .rank-head h2,
body.theme-light .top-proj-name,
body.theme-light .title-main,
body.theme-light .mobile-menu-project,
body.theme-light .mobile-menu-title {
  color: var(--spbx-text-strong) !important;
}

body.theme-light .fp-name,
body.theme-light .fp-folder-name,
body.theme-light .dashboard-row-name,
body.theme-light .admin-nav-btn,
body.theme-light .btn-ghost {
  color: var(--spbx-text-muted) !important;
}

body.theme-light .admin-nav-btn:hover,
body.theme-light .btn-ghost:hover {
  color: var(--spbx-text) !important;
  border-color: var(--spbx-accent-border) !important;
}

body.theme-light .meta-strip,
body.theme-light .vote-bar,
body.theme-light .present-immersive-dock {
  background: var(--spbx-surface) !important;
  border-color: var(--spbx-border) !important;
}

body.theme-light .title-sub,
body.theme-light .auth-sub,
body.theme-light .hint,
body.theme-light .gate-sub {
  color: var(--spbx-text-muted) !important;
}

/* ── Boxed dropdowns (custom chevron, themed surfaces) ── */
.dash-card-posting-select,
.dash-status-select,
.ws-posting-select,
.fp-posting-select,
.cdb-select,
.terms-hub-select,
.cp-status-select,
.cp-submission-batch-bar select,
.batch-folder-row select,
.mf select,
.tc-field select,
.tc-admin-status,
.cp-field select,
.mobile-menu-field select,
.dash-posting-panel select,
.dash-posting-panel-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: calc(var(--spbx-select-px) + 1.125rem);
  background-image: var(--spbx-select-chevron);
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 0.75rem;
}

/* Underline / plain selects keep native menu affordance */
.tb-posting-select {
  -webkit-appearance: menulist;
  appearance: auto;
  background-image: none;
  padding-right: initial;
}

/* ── Review hub: droplet-friendly shells + unified blue accent in posting views ── */
body.review-active .main,
body.review-active .review-layout,
body.review-active .review-player-col,
body.review-active .review-content-col,
body.review-active .review-scroll-below,
body.review-active .video-review-layout,
body.review-active .video-review-player-col,
body.review-active .video-review-controls {
  background: transparent !important;
}

/* File View playback stays blue (including light theme). */
body.review-active.theme-light .play-btn,
body.review-active.theme-light .vid-play-btn,
body.review-active.theme-light .video-review-play-btn {
  background: var(--spbx-accent) !important;
  color: var(--background) !important;
  border: none !important;
  border-radius: 0 !important;
}

body.review-active .video-review-scrub-fill,
body.review-active .video-review-scrub-playhead {
  background: var(--rv-accent) !important;
}

body.review-active .video-review-deck .vr-btn--primary,
body.review-active .video-tc-composer-btn--primary {
  background: var(--rv-accent) !important;
  border-color: var(--rv-accent) !important;
  color: var(--background) !important;
}

body.review-active .video-review-actions-votes .thumb-btn.yes.active {
  background: var(--rv-accent-soft) !important;
  border-color: var(--rv-accent) !important;
}

body.review-active .pl-playlist-media .thumb-btn.yes.active {
  background: rgba(74, 157, 95, 0.18) !important;
  border: 1px solid #4a9d5f !important;
  box-shadow: none !important;
}

body.review-active .pl-playlist-media .thumb-btn.maybe.active {
  background: rgba(106, 143, 196, 0.18) !important;
  border: 1px solid #6a8fc4 !important;
  box-shadow: none !important;
}

body.review-active .pl-playlist-media .thumb-btn.no.active {
  background: rgba(192, 64, 64, 0.16) !important;
  border: 1px solid var(--rv-vote-no) !important;
  box-shadow: none !important;
}

body.review-active .video-review-filter-btn.active,
body.review-active .vr-files-file.active {
  background: var(--rv-accent-soft) !important;
  border-color: var(--rv-accent-border) !important;
  color: var(--rv-accent) !important;
}

body.review-active .vr-files-file.active {
  box-shadow: inset 2px 0 0 var(--rv-accent) !important;
}

body.review-active .review-view-pill.active {
  color: var(--rv-accent) !important;
  box-shadow: 0 0 0 1px var(--rv-accent-border) !important;
}