/* AQUA STUDIO V9 — theme tokens + aqua-select + polish */

/* Structural defaults only — color tokens require [data-theme] (see V13 theme fix). */
:root{
  --radius:11px;
  --ctrl-h:40px;
  --focus:0 0 0 2px rgba(137,86,245,.45);
}

[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0B0C12;
  --sidebar:#101118;
  --surface:#171922;
  --surface-2:#1E202C;
  --elevated:#242636;
  --border:#2B2E3D;
  --border-strong:#3A3E52;
  --text:#F3F4F8;
  --text-2:#9CA3B8;
  --muted:#7B8194;
  --accent:#8956F5;
  --accent-hover:#9B6CFF;
  --accent-soft:rgba(137,86,245,.16);
  --accent-text:#D7C2FF;
  --success:#3DCF8E;
  --danger:#E57373;
  --warning:#E6B84D;
  --input-bg:#12141C;
  --shadow:0 12px 32px rgba(0,0,0,.45);
  --focus:0 0 0 2px rgba(137,86,245,.45);
  --sidebar-text:#A9A8B7;
  --sidebar-active-bg:#29213B;
  --sidebar-active-text:#D7C2FF;
  --thumb-bg:#1A1C28;
  --chart-bar:rgba(137,86,245,.75);
  --overlay:rgba(6,7,12,.55);
  --vsl-accent:rgba(137,86,245,.12);
  --ad-accent:rgba(70,120,220,.12);
  --radius:11px;
  --ctrl-h:40px;
  /* Bridge V6/V7 token names */
  --bg-primary:#0B0C12;
  --bg-secondary:#101118;
  --bg-card:#171922;
  --bg-elevated:#1E202C;
  --bg-hover:#252836;
  --accent-primary:#8956F5;
  --text-primary:#F3F4F8;
  --text-secondary:#9CA3B8;
  --text-muted:#7B8194;
  --border-primary:#2B2E3D;
  --border-hover:#3A3E52;
}

[data-theme="light"]{
  color-scheme:light;
  --bg:#F7F8FC;
  --sidebar:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F1F3F9;
  --elevated:#F1F3F9;
  --border:#E1E5EE;
  --border-strong:#CDD3E0;
  --text:#182033;
  --text-2:#667085;
  --muted:#8A93A6;
  --accent:#7546E8;
  --accent-hover:#6435D6;
  --accent-soft:rgba(117,70,232,.12);
  --accent-text:#5B35C7;
  --success:#1F9D63;
  --danger:#C62828;
  --warning:#B78103;
  --input-bg:#FFFFFF;
  --shadow:0 12px 28px rgba(24,32,51,.10);
  --focus:0 0 0 2px rgba(117,70,232,.35);
  --sidebar-text:#667085;
  --sidebar-active-bg:rgba(117,70,232,.12);
  --sidebar-active-text:#5B35C7;
  --thumb-bg:#EEF0F7;
  --chart-bar:rgba(117,70,232,.7);
  --overlay:rgba(24,32,51,.35);
  --vsl-accent:rgba(117,70,232,.08);
  --ad-accent:rgba(37,99,235,.08);
  /* Bridge V6/V7 token names → light */
  --bg-primary:#F7F8FC;
  --bg-secondary:#FFFFFF;
  --bg-card:#FFFFFF;
  --bg-elevated:#F1F3F9;
  --bg-hover:#E9ECF5;
  --accent-primary:#7546E8;
  --text-primary:#182033;
  --text-secondary:#667085;
  --text-muted:#8A93A6;
  --border-primary:#E1E5EE;
  --border-hover:#CDD3E0;
}

html,body{
  background:var(--bg)!important;
  color:var(--text)!important;
}

/* Apply tokens to core chrome without rewriting every legacy rule */
.aqua-sidebar{
  background:var(--sidebar)!important;
  border-right-color:var(--border)!important;
}
.aqua-logo{color:var(--text)!important}
.aqua-logo span{color:var(--accent)!important}
.aqua-nav button{color:var(--sidebar-text)!important}
.aqua-nav button:hover{background:var(--surface-2)!important;color:var(--text)!important}
.aqua-nav button.active{
  background:var(--sidebar-active-bg)!important;
  color:var(--sidebar-active-text)!important;
}
.aqua-foot{border-top-color:var(--border)!important;color:var(--muted)!important}
#workspace.wrap,#workspace{background:var(--bg)!important}
.app-header{
  border-bottom:1px solid var(--border);
  background:transparent;
}
.app-header h1,#appTitle{color:var(--text)!important}
.app-header .sub,#appSubtitle,.muted{color:var(--text-2)!important}
.card,.campaign-box,#dashboardPanel,#campaignPanel,#vslLibraryPanel,#adminPanel,#whiteGeneratorPanel{
  background:var(--surface)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
}
.text-input,select.text-input,textarea.text-input,input.text-input{
  background:var(--input-bg)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
  min-height:var(--ctrl-h);
  border-radius:var(--radius)!important;
}
.text-input:focus,select.text-input:focus,textarea.text-input:focus{
  outline:none!important;
  box-shadow:var(--focus)!important;
  border-color:var(--accent)!important;
}
.btn{
  background:var(--accent)!important;
  color:#fff!important;
  border:0!important;
  border-radius:var(--radius)!important;
  min-height:var(--ctrl-h);
}
.btn:hover{background:var(--accent-hover)!important}
.small-btn{
  background:var(--surface-2)!important;
  color:var(--text)!important;
  border:1px solid var(--border)!important;
  border-radius:9px!important;
  min-height:34px;
}
.small-btn:hover{border-color:var(--accent)!important;color:var(--accent-text)!important}
.auth-screen{background:var(--bg)!important}
.auth-card{
  background:var(--surface)!important;
  border:1px solid var(--border)!important;
  color:var(--text)!important;
}
.project,.thumb,.dash-chart,.intel-filters,.vsl-card,.cp-meta-block{
  background:var(--surface-2)!important;
  border-color:var(--border)!important;
}
.display-id,.id-chip{
  color:var(--accent-text)!important;
  background:var(--accent-soft)!important;
}
.bar .fill,.filebar>div{background:linear-gradient(90deg,var(--accent),var(--accent-hover))!important}
table.dash-table th,table.analytics-table th,.cp-table th{
  color:var(--text-2)!important;
  border-bottom-color:var(--border)!important;
}
table.dash-table td,table.analytics-table td,.cp-table td{
  border-bottom-color:var(--border)!important;
  color:var(--text)!important;
}

/* Theme switcher */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--border);
  color:var(--text);cursor:pointer;
}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent-text)}
.theme-toggle svg{width:18px;height:18px;display:block}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
[data-theme="light"] .theme-toggle .icon-sun{display:block}
[data-theme="light"] .theme-toggle .icon-moon{display:none}

.app-header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* GEO combo + aqua-select shared panel */
.geo-combo,.aqua-select{position:relative;margin-top:8px}
.geo-combo-list,.aqua-select-menu{
  position:absolute;z-index:80;left:0;right:0;
  top:calc(100% + 4px);
  background:var(--elevated);
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  max-height:min(280px,45vh);
  overflow:auto;
  box-shadow:var(--shadow);
  display:none;
}
.geo-combo-list.open,.aqua-select-menu.open{display:block}
.geo-combo-list.flip-up,.aqua-select-menu.flip-up{
  top:auto;bottom:calc(100% + 4px);
}
.geo-combo-item,.aqua-select-option{
  display:block;width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--border);
  color:var(--text);padding:9px 12px;cursor:pointer;font:inherit;font-size:13px;
}
.geo-combo-item:hover,.geo-combo-item.active,
.aqua-select-option:hover,.aqua-select-option.active{
  background:var(--accent-soft);
}
.geo-combo-item.selected,.aqua-select-option.selected{color:var(--accent-text);font-weight:600}
.geo-combo-empty,.aqua-select-empty{
  padding:12px;color:var(--muted);font-size:13px;
}

.aqua-select-trigger{
  width:100%;min-height:var(--ctrl-h);box-sizing:border-box;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 12px;
  background:var(--input-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);
  font:inherit;font-size:14px;cursor:pointer;text-align:left;
}
.aqua-select-trigger:focus{outline:none;box-shadow:var(--focus);border-color:var(--accent)}
.aqua-select-trigger[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.aqua-select-trigger .placeholder{color:var(--muted)}
.aqua-select-trigger .chev{
  width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid var(--text-2);flex:0 0 auto;
}
.aqua-select.open .chev{transform:rotate(180deg)}
.aqua-select-search{
  width:100%;box-sizing:border-box;padding:9px 12px;
  border:0;border-bottom:1px solid var(--border);
  background:var(--surface-2);color:var(--text);font:inherit;font-size:13px;
}
.aqua-select-search:focus{outline:none}
.aqua-select select.aqua-select-native{
  position:absolute!important;opacity:0!important;pointer-events:none!important;
  width:1px!important;height:1px!important;left:0;top:0;
}

/* VSL auto code preview */
.vsl-code-preview{
  display:flex;flex-direction:column;gap:6px;
  padding:12px 14px;border-radius:var(--radius);
  background:var(--accent-soft);border:1px solid var(--border);
}
.vsl-code-preview strong{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:16px;color:var(--accent-text);letter-spacing:.02em;
}
.vsl-code-preview .hint{font-size:12px;color:var(--text-2);margin:0}

/* Compact form rows */
.v9-form-row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;
}
@media(max-width:720px){
  .v9-form-row{grid-template-columns:1fr}
}

/* Light-mode overrides for hard-coded dark panels (V6–V8 inline rules) */
[data-theme="light"] body,
[data-theme="light"] #workspace.wrap,
[data-theme="light"] #workspace{
  background:var(--bg)!important;
  color:var(--text)!important;
}
[data-theme="light"] #workspace .card,
[data-theme="light"] .card,
[data-theme="light"] .campaign-box,
[data-theme="light"] #dashboardPanel,
[data-theme="light"] #campaignPanel,
[data-theme="light"] #vslLibraryPanel,
[data-theme="light"] #adminPanel,
[data-theme="light"] #whiteGeneratorPanel,
[data-theme="light"] .auth-card{
  background:var(--surface)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
  box-shadow:0 1px 2px rgba(24,32,51,.04);
}
[data-theme="light"] #workspace h1,
[data-theme="light"] #workspace h2,
[data-theme="light"] #workspace h3,
[data-theme="light"] #appTitle,
[data-theme="light"] .app-header h1{
  color:var(--text)!important;
}
[data-theme="light"] #workspace .muted,
[data-theme="light"] #appSubtitle,
[data-theme="light"] .app-header .sub,
[data-theme="light"] .field{
  color:var(--text-2)!important;
}
[data-theme="light"] #workspace .drop,
[data-theme="light"] .drop{
  background:var(--surface-2)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
}
[data-theme="light"] #workspace .pick,
[data-theme="light"] .pick{
  background:var(--elevated)!important;
  border-color:var(--border-strong)!important;
  color:var(--text)!important;
}
[data-theme="light"] #workspace .pick b,
[data-theme="light"] #workspace .drop strong{color:var(--text)!important}
[data-theme="light"] #workspace .pick small,
[data-theme="light"] #workspace .drop small{color:var(--text-2)!important}
[data-theme="light"] #workspace .project,
[data-theme="light"] .project,
[data-theme="light"] .vsl-card,
[data-theme="light"] .dash-chart,
[data-theme="light"] .thumb{
  background:var(--surface)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
}
[data-theme="light"] #workspace .small-btn,
[data-theme="light"] .small-btn,
[data-theme="light"] .theme-toggle{
  background:var(--surface)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
}
[data-theme="light"] #workspace .text-input,
[data-theme="light"] .text-input,
[data-theme="light"] select.text-input,
[data-theme="light"] textarea.text-input{
  background:#fff!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
}
[data-theme="light"] .intel-tab.active,
[data-theme="light"] .aqua-nav button.active{
  background:var(--sidebar-active-bg)!important;
  color:var(--sidebar-active-text)!important;
}
[data-theme="light"] .geo-badge,.flag-chip{
  background:var(--surface-2);
  border:1px solid var(--border);
}
[data-theme="light"] .app-header{
  background:transparent!important;
  border-bottom-color:var(--border)!important;
}
[data-theme="light"] #workspace .media-ready{
  background:var(--elevated)!important;
  border-color:var(--border)!important;
}
[data-theme="light"] .geo-combo-list,
[data-theme="light"] .aqua-select-menu{
  background:#fff!important;
  border-color:var(--border-strong)!important;
}
[data-theme="light"] .geo-combo-item,
[data-theme="light"] .aqua-select-option{
  color:var(--text)!important;
  border-bottom-color:var(--border)!important;
}

/* Prevent FOUC helper (inline script sets data-theme early) */
html.aqua-theme-pending body{visibility:hidden}
html:not(.aqua-theme-pending) body{visibility:visible}

/* Campaign Projects — sticky back + breadcrumbs */
.cp-nav-bar{
  position:sticky;top:0;z-index:25;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 0 10px;margin:0 0 8px;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.cp-nav-back{
  flex:0 0 auto;min-height:32px!important;padding:6px 12px!important;
  font-weight:650;
}
.cp-nav-back[hidden]{display:none!important}
.cp-breadcrumbs{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  list-style:none;margin:0;padding:0;min-width:0;flex:1;
  font-size:12.5px;color:var(--text-2);
}
.cp-breadcrumbs li{
  display:inline-flex;align-items:center;gap:4px;min-width:0;
}
.cp-breadcrumbs li+li::before{
  content:"›";color:var(--muted);margin:0 2px;font-weight:700;
}
.cp-crumb{
  background:none;border:0;padding:2px 4px;margin:0;
  color:var(--accent-text);font:inherit;font-weight:650;
  cursor:pointer;border-radius:6px;max-width:min(42vw,280px);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cp-crumb:hover{background:var(--accent-soft)}
.cp-crumb[aria-current="page"]{
  color:var(--text);cursor:default;font-weight:700;
  pointer-events:none;
}
.cp-crumb:disabled{opacity:.7;cursor:default}
@media(max-width:530px){
  .cp-nav-bar{gap:6px;padding:6px 0 8px}
  .cp-crumb{max-width:46vw;font-size:12px}
}