/* AQUA Studio DS 2.0 — Part 2: Shell + Dashboard + Campaigns/Creative
   Scoped visual layer on live Staging. Does not restyle VSL/Lip Sync/etc heavily. */

/* Bridge DS tokens → product vars used by aqua-v9/v12 */
[data-theme="dark"]{
  --bg:var(--ds-bg); --bg-primary:var(--ds-bg); --sidebar:var(--ds-sidebar);
  --surface:var(--ds-surface); --bg-card:var(--ds-surface); --bg-secondary:var(--ds-surface);
  --elevated:var(--ds-elevated); --surface-2:var(--ds-elevated); --bg-elevated:var(--ds-elevated);
  --border:var(--ds-border); --border-primary:var(--ds-border); --border-strong:var(--ds-border-strong);
  --text:var(--ds-text); --text-primary:var(--ds-text); --text-2:var(--ds-text-2);
  --text-secondary:var(--ds-text-2); --text-muted:var(--ds-text-2); --muted:var(--ds-text-2);
  --accent:var(--ds-accent); --accent-primary:var(--ds-accent); --accent-hover:var(--ds-accent-hover);
  --accent-soft:var(--ds-accent-soft); --accent-text:var(--ds-accent-text);
  --input-bg:var(--ds-input-bg); --success:var(--ds-success); --warning:var(--ds-warning);
  --danger:var(--ds-error); --error:var(--ds-error);
  --sidebar-text:var(--ds-text-2); --sidebar-active-bg:var(--ds-accent-soft); --sidebar-active-text:var(--ds-accent-text);
  --ctrl-h:36px; --radius:7px; --radius-card:8px; --cp-drawer-w:560px; --cp-row-h:46px;
  --sidebar-w:228px; --sidebar-width:228px; --fs-page:22px; --fs-section:16px; --fs-body:13.5px;
}
[data-theme="light"]{
  --bg:var(--ds-bg); --bg-primary:var(--ds-bg); --sidebar:var(--ds-sidebar);
  --surface:var(--ds-surface); --bg-card:var(--ds-surface); --bg-secondary:var(--ds-surface);
  --elevated:var(--ds-elevated); --surface-2:var(--ds-elevated); --bg-elevated:var(--ds-elevated);
  --border:var(--ds-border); --border-primary:var(--ds-border); --border-strong:var(--ds-border-strong);
  --text:var(--ds-text); --text-primary:var(--ds-text); --text-2:var(--ds-text-2);
  --text-secondary:var(--ds-text-2); --text-muted:var(--ds-text-2); --muted:var(--ds-text-2);
  --accent:var(--ds-accent); --accent-primary:var(--ds-accent); --accent-hover:var(--ds-accent-hover);
  --accent-soft:var(--ds-accent-soft); --accent-text:var(--ds-accent-text);
  --input-bg:var(--ds-input-bg); --success:var(--ds-success); --warning:var(--ds-warning);
  --danger:var(--ds-error); --error:var(--ds-error);
  --sidebar-text:var(--ds-text-2); --sidebar-active-bg:var(--ds-accent-soft); --sidebar-active-text:var(--ds-accent-text);
  --ctrl-h:36px; --radius:7px; --radius-card:8px; --cp-drawer-w:560px; --cp-row-h:46px;
  --sidebar-w:228px; --sidebar-width:228px;
}

html,body,#workspace,#workspace.wrap{
  font-family:var(--ds-font)!important;
  background:var(--ds-bg)!important;
  color:var(--ds-text)!important;
}

/* —— Shell —— */
.aqua-sidebar{
  width:var(--sidebar-width)!important;
  padding:14px 10px!important;
  background:var(--ds-sidebar)!important;
  border-right:1px solid var(--ds-border)!important;
}
.aqua-logo{
  padding:4px 8px 14px!important;
  font-size:14px!important;
  font-weight:600!important;
  letter-spacing:-.02em!important;
  color:var(--ds-text)!important;
}
.aqua-logo span{color:var(--ds-accent)!important}
.aqua-nav{gap:2px!important}
.aqua-nav button{
  min-height:36px!important;height:36px!important;
  padding:0 10px!important;gap:10px!important;
  border-radius:7px!important;font-size:13px!important;font-weight:550!important;
  color:var(--ds-text-2)!important;background:transparent!important;
}
.aqua-nav button:hover{background:var(--ds-hover)!important;color:var(--ds-text)!important}
.aqua-nav button.active{
  background:var(--ds-accent-soft)!important;
  color:var(--ds-accent-text)!important;
}
.aqua-nav button svg{width:16px;height:16px;opacity:.92}
.aqua-sidebar-toggle{
  min-height:32px!important;margin:0 0 8px!important;
  border-radius:7px!important;border:1px solid var(--ds-border)!important;
  background:transparent!important;color:var(--ds-text-2)!important;
}
.aqua-foot{font-size:11px!important;color:var(--ds-text-3,#6B7280)!important;border-top-color:var(--ds-border)!important;padding:12px 8px!important}
body.aqua-sidebar-collapsed{--sidebar-width:64px;--sidebar-w:64px}

.app-header{
  height:56px;min-height:56px;align-items:center!important;
  padding:0!important;margin:0 0 8px!important;
  border-bottom:1px solid var(--ds-border)!important;
  background:transparent!important;
}
#appTitle{font-size:22px!important;font-weight:600!important;letter-spacing:-.02em!important;margin:0!important}
#appSubtitle{font-size:11.5px!important;color:var(--ds-text-2)!important;margin:2px 0 0!important}
.app-header-actions{gap:8px!important}
.app-header-actions .small-btn,#logoutBtn{
  min-height:32px!important;padding:0 12px!important;font-size:12px!important;
  border-radius:6px!important;background:var(--ds-elevated)!important;
  border:1px solid var(--ds-border)!important;color:var(--ds-text)!important;
}
.theme-toggle{
  width:32px!important;height:32px!important;border-radius:6px!important;
  background:transparent!important;border:1px solid var(--ds-border)!important;
}
#accountName{font-size:12px!important;color:var(--ds-text-2)!important;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#workspace.wrap,#workspace{
  margin-left:var(--sidebar-width)!important;
  padding:12px 22px 40px!important;
  max-width:none!important;
}
.app-main{padding-left:0!important;padding-right:0!important}

/* Shared buttons in workspace sections */
#dashboardPanel .btn,#campaignPanel .btn,
#dashboardPanel .small-btn,#campaignPanel .small-btn,
.cp-drawer-panel .btn,.cp-drawer-panel .small-btn{
  min-height:32px!important;padding:0 12px!important;font-size:12.5px!important;
  border-radius:6px!important;font-weight:550!important;
}
#dashboardPanel .btn,#campaignPanel .btn,.cp-drawer-panel .btn{
  background:var(--ds-accent)!important;color:#fff!important;border:0!important;
}
#dashboardPanel .btn:hover,#campaignPanel .btn:hover{background:var(--ds-accent-hover)!important}
#dashboardPanel .small-btn,#campaignPanel .small-btn,.cp-drawer-panel .small-btn{
  background:var(--ds-elevated)!important;border:1px solid var(--ds-border)!important;color:var(--ds-text)!important;
}
#dashboardPanel .text-input,#campaignPanel .text-input,
#dashboardPanel select.text-input,#campaignPanel select.text-input,
#dashboardPanel textarea.text-input,#campaignPanel textarea.text-input,
.cp-drawer-panel .text-input,.cp-drawer-panel textarea.text-input{
  min-height:36px!important;border-radius:6px!important;
  background:var(--ds-input-bg)!important;border:1px solid var(--ds-border)!important;
  color:var(--ds-text)!important;font-size:13px!important;
}

/* Flatten nested cards for Part2 panels */
#dashboardPanel.card,#campaignPanel.card{
  background:transparent!important;border:0!important;box-shadow:none!important;
  padding:0!important;margin:0!important;border-radius:0!important;
}
#dashboardPanel .campaign-box,#campaignPanel .campaign-box{
  background:var(--ds-surface)!important;border:1px solid var(--ds-border)!important;
  border-radius:8px!important;padding:14px 16px!important;margin:12px 0!important;
}

/* —— Dashboard —— */
#dashboardPanel .dash-overview-head{margin:0 0 14px}
#dashboardPanel .dash-overview-head h2{
  margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--ds-text);
}
#dashboardPanel .dash-overview-head p{margin:4px 0 0;font-size:12px;color:var(--ds-text-2)}
#dashboardPanel .dash-kpi-grid,
#dashboardPanel #empDashKpis.dash-kpi-grid,
#dashboardPanel #dashOverviewKpis{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px!important;margin:0 0 18px!important;
}
#dashboardPanel .dash-kpi{
  min-height:84px!important;max-height:100px!important;
  padding:12px 14px!important;margin:0!important;
  background:var(--ds-surface)!important;border:1px solid var(--ds-border)!important;
  border-radius:8px!important;box-shadow:none!important;
}
#dashboardPanel .dash-kpi .label,#dashboardPanel .dash-kpi .sub{
  font-size:11px!important;color:var(--ds-text-2)!important;font-weight:550!important;
  text-transform:uppercase;letter-spacing:.04em;
}
#dashboardPanel .dash-kpi strong{
  display:block;margin-top:8px;font-size:22px!important;font-weight:600!important;
  letter-spacing:-.02em;color:var(--ds-text)!important;
}
#dashboardPanel .dash-section{
  margin:18px 0 8px!important;font-size:13px!important;font-weight:600!important;
  color:var(--ds-text)!important;letter-spacing:-.01em;
}
#dashboardPanel .dash-toolbar{
  display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin-bottom:12px;
  padding:10px 12px;background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:8px;
}
#dashboardPanel .dash-toolbar label{font-size:11px;color:var(--ds-text-2);gap:4px}
#dashboardPanel .cost-note{font-size:11px!important;color:var(--ds-text-2)!important;margin:0 0 12px!important}
#dashboardPanel .dash-activity-list{border:1px solid var(--ds-border);border-radius:8px;background:var(--ds-surface);overflow:hidden}
#dashboardPanel .dash-activity-row{
  display:grid;grid-template-columns:120px 1fr 140px 100px;gap:10px;align-items:center;
  padding:10px 12px;border-bottom:1px solid var(--ds-border);font-size:13px;
}
#dashboardPanel .dash-activity-row:last-child{border-bottom:0}
#dashboardPanel .dash-activity-row .k{color:var(--ds-text-2);font-size:12px}
#dashboardPanel .dash-quick{
  display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 20px;
}
#dashboardPanel .dash-quick a,#dashboardPanel .dash-quick button{
  display:inline-flex;align-items:center;height:32px;padding:0 12px;
  border-radius:6px;border:1px solid var(--ds-border);background:var(--ds-surface);
  color:var(--ds-text);font-size:12.5px;font-weight:550;cursor:pointer;text-decoration:none;
}
#dashboardPanel .dash-quick a:hover,#dashboardPanel .dash-quick button:hover{
  border-color:var(--ds-accent);color:var(--ds-accent-text);background:var(--ds-accent-soft);
}
#dashboardPanel .dash-charts{display:none} /* quieter overview; charts remain in Analytics */
#dashboardPanel .dash-table-wrap{
  border:1px solid var(--ds-border);border-radius:8px;overflow:auto;background:var(--ds-surface);
}
#dashboardPanel .dash-table{width:100%;border-collapse:collapse;font-size:13px}
#dashboardPanel .dash-table th,#dashboardPanel .dash-table td{
  padding:0 12px;height:40px;border-bottom:1px solid var(--ds-border);text-align:left;
}
#dashboardPanel .dash-table th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ds-text-2);background:var(--ds-elevated)}

@media(max-width:1439px){
  #dashboardPanel .dash-kpi-grid,#dashboardPanel #dashOverviewKpis{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #dashboardPanel .dash-activity-row{grid-template-columns:100px 1fr 110px}
  #dashboardPanel .dash-activity-row .hide-sm{display:none}
}
@media(max-width:1100px){
  #dashboardPanel .dash-kpi-grid,#dashboardPanel #dashOverviewKpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* —— Campaigns —— */
#campaignPanel .cp-list-toolbar{
  display:flex!important;flex-wrap:wrap;align-items:end;gap:8px!important;
  padding:10px 12px!important;margin:0 0 12px!important;
  background:var(--ds-surface)!important;border:1px solid var(--ds-border)!important;
  border-radius:8px!important;
}
#campaignPanel .cp-list-toolbar.hidden,
#campaignPanel #cpList.hidden,
#campaignPanel #cpListHead.hidden,
#campaignPanel #cpListPager.hidden,
#campaignPanel #cpAccessPanel.hidden,
#campaignPanel #cpCreativeFormBox.hidden{display:none!important}
#campaignPanel .cp-list-toolbar label{
  display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--ds-text-2);margin:0!important;
  min-width:0;
}
#campaignPanel .cp-list-toolbar label:first-child{flex:1 1 200px;max-width:280px}
#campaignPanel .cp-list-toolbar .cp-tool-secondary{opacity:.92}
#campaignPanel .cp-list-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;
}
#campaignPanel .cp-list-head h2{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em}
#campaignPanel .cp-campaigns-table-wrap,#campaignPanel .cp-list-wrap{
  border:1px solid var(--ds-border)!important;border-radius:8px!important;overflow:auto;background:var(--ds-surface)!important;
}
#campaignPanel .cp-campaigns-table th,#campaignPanel .cp-campaigns-table td,
#campaignPanel .cp-table th,#campaignPanel .cp-table td{
  height:46px!important;max-height:46px!important;padding:0 12px!important;
  border-bottom:1px solid var(--ds-border)!important;font-size:13px!important;
}
#campaignPanel .cp-campaigns-table th{
  background:var(--ds-elevated)!important;color:var(--ds-text-2)!important;
  font-size:11px!important;text-transform:uppercase;letter-spacing:.04em;font-weight:600!important;
}
#campaignPanel .cp-campaigns-table tbody tr:hover{background:var(--ds-hover)!important}
#campaignPanel .cp-campaigns-table .name-cell{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px;
}
#campaignPanel .id-chip,#campaignPanel .meta-badge,#campaignPanel .status-chip{
  display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;
  font-size:11px;font-weight:550;background:var(--ds-elevated);border:1px solid var(--ds-border);color:var(--ds-text-2);
}
#campaignPanel .meta-badge.active,#campaignPanel .status-chip.active{background:var(--ds-badge-active-bg);color:var(--ds-badge-active-fg);border-color:transparent}
#campaignPanel .meta-badge.testing,#campaignPanel .status-chip.testing,
#campaignPanel .meta-badge.processing,#campaignPanel .status-chip.processing{background:var(--ds-badge-processing-bg);color:var(--ds-badge-processing-fg);border:0}
#campaignPanel .meta-badge.draft,#campaignPanel .status-chip.draft{background:var(--ds-badge-draft-bg);color:var(--ds-badge-draft-fg);border:0}
#campaignPanel .meta-badge.paused,#campaignPanel .status-chip.paused{background:var(--ds-badge-paused-bg);color:var(--ds-badge-paused-fg);border:0}
#campaignPanel .meta-badge.completed,#campaignPanel .status-chip.completed,
#campaignPanel .meta-badge.ready,#campaignPanel .status-chip.ready{background:var(--ds-badge-completed-bg);color:var(--ds-badge-completed-fg);border:0}
#campaignPanel .meta-badge.failed,#campaignPanel .status-chip.failed,
#campaignPanel .meta-badge.archived,#campaignPanel .status-chip.archived{background:var(--ds-badge-failed-bg);color:var(--ds-badge-failed-fg);border:0}

#campaignPanel .cp-nav-bar{
  background:color-mix(in srgb, var(--ds-bg) 92%, transparent)!important;
  border-bottom:1px solid var(--ds-border)!important;padding:8px 0!important;gap:8px!important;
}
#campaignPanel .cp-project-head,#campaignPanel #cpProjectInfo .cp-info-bar,#campaignPanel .cp-campaign-head{
  display:flex!important;flex-wrap:wrap;align-items:center;gap:8px 12px!important;
  padding:8px 0 12px!important;margin:0 0 8px!important;
  border-bottom:1px solid var(--ds-border);
}
#campaignPanel .cp-info-actions{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
#campaignPanel .ad-texts-head{margin-top:8px}
#campaignPanel .cp-add-creative > #cpToggleAddCreative{display:none!important} /* primary CTA is campaign header action */
#campaignPanel .cp-add-creative > #cpCreativeFormBox.hidden{display:none!important}
/* When create form is parked in DOM (not in drawer), keep it hidden */
#campaignPanel .cp-add-creative > #cpCreativeFormBox{display:none}
#campaignPanel .cp-creatives-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 8px;
}
#campaignPanel .cp-creatives-head h3{margin:0;font-size:14px;font-weight:600}
#campaignPanel .cp-creatives-table-wrap{
  border:1px solid var(--ds-border)!important;border-radius:8px!important;background:var(--ds-surface)!important;
}
#campaignPanel .cp-creatives-table th,#campaignPanel .cp-creatives-table td{
  height:46px!important;padding:0 12px!important;border-bottom:1px solid var(--ds-border)!important;
  font-size:13px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#campaignPanel .cp-creatives-table th{
  background:var(--ds-elevated)!important;color:var(--ds-text-2)!important;
  font-size:11px!important;text-transform:uppercase;letter-spacing:.04em;
}
#campaignPanel .cp-creatives-table tbody tr:hover{background:var(--ds-hover)!important}
#campaignPanel .cp-creatives-table tbody tr.is-active,
#campaignPanel .cp-creatives-table tbody tr.expanded{background:var(--ds-selected)!important}
#campaignPanel .num-badge{
  display:inline-flex!important;align-items:center;justify-content:center;
  min-width:24px!important;height:22px!important;padding:0 6px!important;
  border-radius:5px!important;background:var(--ds-accent-soft)!important;
  color:var(--ds-accent-text)!important;font-size:12px!important;font-weight:600!important;
  border:0!important;
}

/* Side panel polish */
.cp-drawer-panel{
  background:var(--ds-surface)!important;border-left:1px solid var(--ds-border)!important;
  width:var(--cp-drawer-w)!important;max-width:min(600px,100vw)!important;
}
.cp-drawer-head{padding:14px 16px!important;border-bottom:1px solid var(--ds-border)!important;gap:10px!important}
.cp-drawer-cr{font-size:16px!important;font-weight:600!important;color:var(--ds-text)!important}
.cp-drawer-campaign,.cp-drawer-tech{font-size:11.5px!important;color:var(--ds-text-2)!important}
.cp-drawer-body{padding:14px 16px!important}
.cp-field-label{font-size:11px!important;color:var(--ds-text-2)!important;font-weight:550!important;text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px}
.cp-field-value{font-size:13.5px!important;color:var(--ds-text)!important}
.cp-script-view,.cp-script-input{
  max-height:280px!important;overflow:auto!important;
  background:var(--ds-elevated)!important;border:1px solid var(--ds-border)!important;
  border-radius:7px!important;padding:10px 12px!important;font-size:13px!important;
  line-height:1.45!important;white-space:pre-wrap!important;word-break:break-word;
}
.cp-drawer-foot{
  position:sticky;bottom:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:12px 16px!important;border-top:1px solid var(--ds-border)!important;
  background:var(--ds-surface)!important;
}
.cp-drawer-close{width:32px!important;min-width:32px!important;padding:0!important}

.aqua-empty-state{
  border:1px dashed var(--ds-border)!important;border-radius:8px!important;
  background:transparent!important;color:var(--ds-text-2)!important;
}
.aqua-skel-row{background:var(--ds-elevated)!important;border-radius:6px!important}

/* Hide Vozo/provider wording if any slips into campaign chrome */
#campaignPanel .vozo-label{display:none!important}