/* AQUA Studio V13.4 — Premium UI Final
   Extends DS 2.0. Charcoal + restrained purple. Staging only. */

:root{
  --ds-btn-h: 36px;
  --ds-btn-compact-h: 32px;
  --ds-input-h: 36px;
  --ds-select-h: 36px;
  --ds-row-h: 46px;
  --ds-sidebar-w: 220px;
  --ds-sidebar-collapsed: 64px;
  --ds-header-h: 62px;
  --ds-panel-w: 580px;
  --ds-radius: 8px;
  --ds-radius-panel: 12px;
  --ds-card-pad: 16px;
  --ds-card-pad-sm: 12px;
  --ds-fs-page: 22px;
  --ds-fs-section: 15px;
  --ds-fs-card: 14px;
  --ds-fs-body: 13.5px;
  --ds-fs-meta: 12px;
  --ds-fs-id: 12px;
  --ds-fs-table: 12.5px;
  --ds-fs-label: 11.5px;
}

/* —— Global control heights —— */
#workspace .btn,
.aqua-shell .btn,
.btn{
  min-height:var(--ds-btn-h);
  height:var(--ds-btn-h);
  padding:0 14px;
  border-radius:var(--ds-radius);
  font-size:13px;
  font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  box-sizing:border-box;
}
#workspace .small-btn,
.small-btn{
  min-height:var(--ds-btn-compact-h);
  height:var(--ds-btn-compact-h);
  padding:0 10px;
  border-radius:var(--ds-radius);
  font-size:12.5px;
  display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;
}
#workspace .text-input,
#workspace select.text-input,
#workspace .aqua-select-trigger,
.aqua-select-trigger{
  min-height:var(--ds-input-h)!important;
  height:var(--ds-input-h)!important;
  border-radius:var(--ds-radius)!important;
  font-size:13px!important;
  box-sizing:border-box;
}
#workspace .aqua-select-trigger{max-height:var(--ds-select-h)!important}

/* —— Shell: sidebar / header —— */
.aqua-sidebar{
  width:var(--ds-sidebar-w)!important;
}
body.aqua-sidebar-collapsed .aqua-sidebar,
.aqua-sidebar.is-collapsed{
  width:var(--ds-sidebar-collapsed)!important;
}
.aqua-nav button{
  min-height:38px;
  height:38px;
  padding:0 12px!important;
  align-items:center;gap:10px;
  border-radius:8px!important;
}
/* Never force-show denied/admin items — display:flex!important previously overrode [hidden]. */
.aqua-nav button:not([hidden]):not(.nav-denied){
  display:flex!important;
}
.aqua-nav button[hidden],
.aqua-nav button.nav-denied{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.aqua-nav button svg{width:18px;height:18px;flex:0 0 18px}
.aqua-nav button .label{line-height:1.2}
.aqua-nav button.active{
  background:var(--ds-accent-soft)!important;
  color:var(--ds-accent-text)!important;
  box-shadow:inset 3px 0 0 var(--ds-accent);
}
#workspace.wrap{margin-left:var(--ds-sidebar-w)}
body.aqua-sidebar-collapsed #workspace.wrap,
.aqua-sidebar.is-collapsed ~ #workspace.wrap,
#workspace.wrap.sidebar-collapsed{margin-left:var(--ds-sidebar-collapsed)}

.aqua-topbar,
.aqua-shell-header,
#workspace > .top,
#appHeader,
.aqua-view-head{
  min-height:var(--ds-header-h);
}
#appTitle,
.aqua-page-title{
  font-size:var(--ds-fs-page)!important;
  font-weight:650!important;
  letter-spacing:-.02em;
  margin:0!important;
}
#appSubtitle{font-size:var(--ds-fs-meta)!important;color:var(--ds-text-2)!important;margin:2px 0 0!important}

/* Hide nested panel titles that duplicate the shell title */
.ds3-panel > .proj-head > div > h2,
.ds3-panel > .ls-workspace > .ls-setup > .ls-setup-head > h2,
#campaignPanel > .cp-list-head > h2,
#teamChrome > .team-section-head h2,
#analytics > .analytics-head h3,
#whiteGeneratorPanel > h2:first-child,
#settingsPanel > h2:first-child,
#settingsPanel > .ls-sub:first-of-type,
#whiteGeneratorPanel > .ls-sub:first-of-type,
.team-section-head .ls-sub,
#analytics .analytics-head p.muted,
.proj-head .ls-sub{
  /* Keep for a11y structure but visually collapse duplicates */
}
.aqua-hide-dup-title #projectsPanel .proj-head > div > h2,
.aqua-hide-dup-title #projectsPanel .proj-head .ls-sub,
.aqua-hide-dup-title #campaignPanel .cp-list-head > h2,
.aqua-hide-dup-title #teamChrome .team-section-head h2,
.aqua-hide-dup-title #analytics .analytics-head h3,
.aqua-hide-dup-title #analytics .analytics-head > div > p.muted,
.aqua-hide-dup-title #settingsPanel .dash-overview-head,
.aqua-hide-dup-title #settingsPanel > h2:first-of-type,
.aqua-hide-dup-title #settingsPanel > p.ls-sub:first-of-type,
.aqua-hide-dup-title #whiteGeneratorPanel > .dash-overview-head,
.aqua-hide-dup-title #whiteGeneratorPanel > h2:first-of-type,
.aqua-hide-dup-title #whiteGeneratorPanel > p.ls-sub:first-of-type,
.aqua-hide-dup-title #lipSyncPanel .ls-setup-head > h2,
.aqua-hide-dup-title #lipSyncPanel .ls-setup-head > .ls-sub{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
.aqua-hide-dup-title #projectsPanel .proj-head{margin-bottom:0!important;min-height:0}
.aqua-hide-dup-title #projectsPanel .proj-view-toggle{display:none!important}

/* Force Create VSL button never floating outside VSL */
#vslNewBtn.aqua-ctx-hidden,
body:not([data-aqua-view="vsl"]) #vslNewBtn{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* —— ID chips —— */
.id-chip,
.cp-campaigns-table .id-chip{
  display:inline-block;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  vertical-align:bottom;
  font-variant-numeric:tabular-nums;
  font-size:var(--ds-fs-id);
  padding:2px 8px;border-radius:999px;
  background:var(--ds-accent-soft);color:var(--ds-accent-text);
}
.cp-campaigns-table td.id-cell{max-width:220px;width:22%}
.cp-campaigns-table tbody tr{height:var(--ds-row-h)}
.cp-campaigns-table tbody tr td{padding:8px 10px;vertical-align:middle}

/* —— Cards / panels —— */
#workspace .card.ds3-panel,
#workspace .card.ds4-panel,
.ds3-panel,.ds4-panel{
  border-radius:var(--ds-radius-panel)!important;
  padding:var(--ds-card-pad)!important;
  background:var(--ds-surface)!important;
  border:1px solid var(--ds-border)!important;
}

/* —— My Projects —— */
#projectsPanel .proj-toolbar{
  display:flex!important;flex-wrap:wrap;align-items:center;gap:8px!important;
  padding:8px 0 12px!important;margin:0 0 8px!important;
  border:0!important;background:transparent!important;
}
#projectsPanel .proj-toolbar #projSearch{flex:1 1 220px;min-width:180px}
#projectsPanel .proj-toolbar #projStatus,
#projectsPanel .proj-toolbar .aqua-select{width:150px!important;flex:0 0 150px}
#projectsPanel .proj-toolbar #projCampaign,
#projectsPanel .proj-toolbar #projCreative{width:140px!important;flex:0 0 140px}
#projectsPanel .proj-pager{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin:12px 0 0;padding-top:10px;
  border-top:1px solid var(--ds-border);
  font-size:var(--ds-fs-meta);color:var(--ds-text-2);
}
#projectsPanel .proj-pager .pager-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#projectsPanel .proj-pager select{
  height:32px;border-radius:var(--ds-radius);
  background:var(--ds-input-bg);color:var(--ds-text);
  border:1px solid var(--ds-border);padding:0 8px;
}

#projectsPanel .projects,
#projectsPanel .projects.projects-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
}
@media(max-width:1599px){
  #projectsPanel .projects,
  #projectsPanel .projects.projects-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:1100px){
  #projectsPanel .projects,
  #projectsPanel .projects.projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:640px){
  #projectsPanel .projects,
  #projectsPanel .projects.projects-grid{grid-template-columns:1fr!important}
}

#projectsPanel .project{
  display:flex!important;flex-direction:column!important;
  background:var(--ds-surface)!important;
  border:1px solid var(--ds-border)!important;
  border-radius:10px!important;
  overflow:hidden!important;
  min-height:0!important;
  padding:0!important;
}
#projectsPanel .project .thumb{
  position:relative!important;
  width:100%!important;
  aspect-ratio:16/10;
  height:auto!important;
  max-height:160px;
  background:var(--ds-elevated)!important;
}
#projectsPanel .project .thumb img{
  width:100%!important;height:100%!important;
  object-fit:contain!important;display:block;
  background:#0a0b10;
}
[data-theme="light"] #projectsPanel .project .thumb img{background:#e8eaef}
#projectsPanel .project .thumb .placeholder{
  display:flex;align-items:center;justify-content:center;height:100%;
  min-height:88px;color:var(--ds-text-3);font-size:12px;
}
#projectsPanel .project .details{
  padding:10px 12px 6px!important;gap:3px!important;
}
#projectsPanel .project .display-id{
  font-size:var(--ds-fs-id)!important;font-weight:650!important;
  color:var(--ds-accent-text)!important;font-variant-numeric:tabular-nums;
}
#projectsPanel .project .name{
  font-size:12.5px!important;font-weight:550!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#projectsPanel .project .meta{
  font-size:11.5px!important;color:var(--ds-text-2)!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#projectsPanel .project .proj-card-foot{
  padding:8px 10px 10px!important;gap:6px;
  border-top:1px solid var(--ds-border);
}
#projectsPanel .project .proj-status{
  font-size:11px;padding:2px 8px;border-radius:999px;font-weight:600;
}
#projectsPanel .project .proj-status.done{
  background:var(--ds-badge-completed-bg);color:var(--ds-badge-completed-fg);
}
#projectsPanel .project .proj-status.failed{
  background:var(--ds-badge-failed-bg);color:var(--ds-badge-failed-fg);
}
#projectsPanel .project .proj-status.processing,
#projectsPanel .project .proj-status.queued{
  background:var(--ds-badge-processing-bg);color:var(--ds-badge-processing-fg);
}

/* —— Creative drawer —— */
.cp-drawer-panel{
  width:min(100vw, var(--ds-panel-w))!important;
  max-width:640px;
}
.cp-drawer-panel .cp-drawer-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:10px 14px!important;
  border-top:1px solid var(--ds-border);
  background:var(--ds-surface);
}
.cp-drawer-panel .cp-drawer-foot .btn{flex:0 0 auto}
.cp-drawer-panel .cp-more-wrap{position:relative;margin-left:auto}
.cp-drawer-panel .cp-more-menu{
  position:absolute;right:0;bottom:calc(100% + 6px);
  min-width:180px;padding:6px;
  background:var(--ds-elevated);border:1px solid var(--ds-border);
  border-radius:8px;box-shadow:var(--ds-shadow);z-index:5;
  display:flex;flex-direction:column;gap:2px;
}
.cp-drawer-panel .cp-more-menu.hidden{display:none!important}
.cp-drawer-panel .cp-more-menu button,
.cp-drawer-panel .cp-more-menu .small-btn{
  width:100%;justify-content:flex-start;background:transparent;border:0;
}
.cp-drawer-panel .cp-more-menu button:hover{background:var(--ds-hover)}
.cp-drawer-panel .aqua-select-trigger,
.cp-drawer-panel select.text-input,
.cp-drawer-panel .cp-perf-panel .aqua-select-trigger{
  height:var(--ds-select-h)!important;
  min-height:var(--ds-select-h)!important;
  max-height:var(--ds-select-h)!important;
}
.cp-creative-thumb{height:140px!important;max-height:160px}
.cp-creative-thumb img{object-fit:contain!important}

/* —— VSL filters compact —— */
#vslLibraryPanel .vsl-filters,
#vslLibraryPanel .filters,
#vslLibraryPanel .vsl-toolbar{
  display:flex!important;flex-wrap:wrap;align-items:center;gap:8px!important;
  padding:6px 0 8px!important;margin:0 0 8px!important;
}
#vslLibraryPanel .vsl-filters > *,
#vslLibraryPanel .vsl-filters .span-2{
  flex:0 1 auto!important;width:auto!important;min-width:120px;margin:0!important;
}
#vslLibraryPanel .vsl-filters #vslFilterQ,
#vslLibraryPanel .vsl-filters .span-2#vslFilterQ,
#vslLibraryPanel .vsl-filters input.span-2{
  flex:1 1 220px!important;min-width:180px!important;max-width:100%;
}
#vslLibraryPanel .vsl-filters label{
  display:flex;flex-direction:row;align-items:center;gap:6px;
  font-size:var(--ds-fs-label);color:var(--ds-text-2);
  margin:0!important;min-width:0;
}
#vslLibraryPanel .vsl-filters .text-input,
#vslLibraryPanel .filters .text-input,
#vslLibraryPanel .vsl-filters .aqua-select-trigger,
#vslLibraryPanel .vsl-filters .geo-combo{
  height:36px!important;min-height:36px!important;width:auto!important;
}
#vslLibraryPanel .vsl-filters #vslFilterApply{
  height:36px!important;
}

/* —— Analytics / Team / Settings / White —— */
#analytics .analytics-filters,
.intel-filters{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;
  padding:8px 0 12px;margin:0 0 12px;
}
#settingsPanel .settings-grid,
#settingsPanel .ds4-settings-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px;max-width:960px;
}
#settingsPanel .settings-card,
#settingsPanel .ds4-settings-card{
  padding:14px!important;border-radius:10px;
  border:1px solid var(--ds-border);background:var(--ds-elevated);
}
#whiteGeneratorPanel .white-form,
#whiteGeneratorPanel .wg-config{
  max-width:720px;
}
#teamChrome .team-block{font-size:var(--ds-fs-section);font-weight:600;margin:4px 0 10px}

/* —— Auto-collapse sidebar on narrow desktops —— */
@media(max-width:1100px){
  body:not(.aqua-sidebar-pinned) .aqua-sidebar:not(.is-expanded-manual){
    width:var(--ds-sidebar-collapsed)!important;
  }
  body:not(.aqua-sidebar-pinned) .aqua-sidebar:not(.is-expanded-manual) .label,
  body:not(.aqua-sidebar-pinned) .aqua-sidebar:not(.is-expanded-manual) .aqua-logo span,
  body:not(.aqua-sidebar-pinned) .aqua-sidebar:not(.is-expanded-manual) .aqua-foot{
    display:none!important;
  }
  body:not(.aqua-sidebar-pinned) #workspace.wrap{
    margin-left:var(--ds-sidebar-collapsed)!important;
  }
}

/* —— Light theme surfaces —— */
[data-theme="light"] #workspace .card.ds3-panel,
[data-theme="light"] #workspace .card.ds4-panel{
  background:var(--ds-surface)!important;
  border-color:var(--ds-border)!important;
}
[data-theme="light"] .cp-drawer-panel .cp-more-menu{
  background:#fff;border-color:var(--ds-border);
}