/* AQUA STUDIO V11 — global polish, compact layouts, theme parity */

:root{
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --fs-page:22px; --fs-section:16px; --fs-comp:14px; --fs-body:13.5px; --fs-meta:11.5px;
  --ctrl-h:38px; --radius:10px; --radius-sm:8px;
  --focus:0 0 0 2px color-mix(in srgb, var(--accent-primary,#8B5CF6) 55%, transparent);
}

/* —— Sticky campaign nav under app header (fixes title overlap) —— */
#workspace .app-header{z-index:40}
:root{--aqua-sticky-top:var(--header-h,56px)}
.cp-nav-bar{
  top:var(--aqua-sticky-top)!important;
  z-index:30!important;
  margin-top:0!important;
  padding:var(--space-2) 0!important;
  gap:var(--space-2)!important;
  background:color-mix(in srgb, var(--bg-primary, var(--bg,#0C0D12)) 94%, transparent)!important;
}
#cpBack{display:none!important} /* single Back via cpNavBack */

#workspace .app-header h1{font-size:var(--fs-page)!important;font-weight:750}
#workspace .app-header .sub{font-size:var(--fs-meta)!important}
#workspace .app-main h2,#workspace .card > h2{font-size:var(--fs-section)!important;margin:0 0 var(--space-2)}
#workspace .app-main h3{font-size:var(--fs-comp)!important;margin:0 0 var(--space-2)}
#workspace .muted,#workspace .campaign-meta{font-size:var(--fs-meta)}

/* Controls */
#workspace .text-input,
#workspace select.text-input,
#workspace .aqua-select-trigger{
  min-height:var(--ctrl-h)!important;
  height:auto;
  padding:8px 12px!important;
  font-size:var(--fs-body)!important;
  border-radius:var(--radius-sm)!important;
  box-sizing:border-box;
}
#workspace textarea.text-input{min-height:72px;height:auto}
#workspace .btn,#workspace .small-btn{
  min-height:var(--ctrl-h)!important;
  padding:8px 14px!important;
  font-size:var(--fs-body)!important;
  border-radius:var(--radius-sm)!important;
  line-height:1.2;
}
#workspace .small-btn.icon-btn,
#workspace .aqua-video-close{
  width:var(--ctrl-h);min-width:var(--ctrl-h);padding:0!important;
  display:inline-flex;align-items:center;justify-content:center;
}
#workspace .btn{background:var(--accent-primary,#8B5CF6);border-color:transparent}
#workspace .btn:focus-visible,
#workspace .small-btn:focus-visible,
#workspace .text-input:focus-visible,
#workspace .aqua-select-trigger:focus-visible{
  outline:none;box-shadow:var(--focus);
}

/* Language switcher */
.aqua-lang{
  display:inline-flex;align-items:center;gap:2px;
  border:1px solid var(--border-primary,var(--border,#2B2E3D));
  border-radius:999px;padding:2px;background:var(--bg-elevated,var(--surface,#171820));
}
.aqua-lang button{
  border:0;background:transparent;color:var(--text-muted,#9AA3B5);
  font:inherit;font-size:11.5px;font-weight:700;padding:5px 9px;border-radius:999px;cursor:pointer;
  min-height:28px!important;
}
.aqua-lang button[aria-pressed="true"]{
  background:var(--accent-soft,rgba(139,92,246,.18));
  color:var(--accent-text,#D7C2FF);
}
.aqua-lang button:hover{color:var(--text-primary,var(--text,#F3F4F8))}

/* —— Creative detail compact rows —— */
.cp-creative-detail{
  padding:var(--space-3)!important;
  margin:var(--space-2) 0!important;
  background:var(--bg-elevated,var(--surface))!important;
  border:1px solid var(--border-primary,var(--border))!important;
  border-radius:var(--radius)!important;
  display:flex;flex-direction:column;gap:var(--space-3);
}
.cp-detail-row{display:flex;flex-direction:column;gap:var(--space-2)}
.cp-detail-row .row-label{
  font-size:10.5px;font-weight:700;letter-spacing:.35px;text-transform:uppercase;
  color:var(--text-muted);
}
.cp-meta-row{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2) var(--space-3);
}
.cp-meta-row .cell .k{font-size:10.5px;color:var(--text-muted);margin-bottom:2px}
.cp-meta-row .cell .v{font-size:var(--fs-body);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.cp-video-row{
  display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
}
.cp-video-row .info{min-width:0;flex:1 1 140px}
.cp-video-row .actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-left:auto}
.cp-creative-detail .aqua-acc{margin:0!important;border-radius:var(--radius-sm)!important}
.cp-creative-detail .vsl-toolbar{margin:0!important;gap:var(--space-2)}

/* Performance form */
.perf-form{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-1)}
.perf-form-row{
  display:grid;gap:var(--space-2);align-items:end;
}
.perf-form-row.metrics{grid-template-columns:minmax(140px,1.2fr) minmax(96px,110px) minmax(110px,130px)}
.perf-form-row.full{grid-template-columns:1fr}
.perf-form label{
  display:flex;flex-direction:column;gap:4px;margin:0;font-size:var(--fs-meta);color:var(--text-muted);
}
.perf-form .text-input{width:100%;margin-top:0!important}
.perf-form input[type=number]{max-width:100%}
.perf-form-foot{
  display:flex;justify-content:flex-end;gap:var(--space-2);padding-top:var(--space-2);
  border-top:1px solid var(--border-primary,var(--border));
}
.perf-form .btn-secondary{background:transparent!important}

/* Light theme form fields — no dark inputs */
[data-theme="light"] .campaign-result input,
[data-theme="light"] .campaign-result select,
[data-theme="light"] .campaign-result textarea,
[data-theme="light"] #workspace .campaign-result input,
[data-theme="light"] #workspace .campaign-result select,
[data-theme="light"] #workspace .campaign-result textarea,
[data-theme="light"] .perf-form .text-input{
  background:#fff!important;border-color:#D8DCE8!important;color:#182033!important;
}
[data-theme="dark"] .perf-form .text-input,
[data-theme="dark"] .campaign-result .text-input{
  background:var(--bg-secondary,#111218)!important;
  border-color:var(--border-primary,#2B2E3D)!important;
  color:var(--text-primary,#F3F4F8)!important;
}

/* My Projects cards */
#projects.projects{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-3);
}
#projects .project{
  display:flex;flex-direction:column;min-height:100%;
  border:1px solid var(--border-primary,var(--border));
  border-radius:var(--radius);overflow:hidden;background:var(--bg-elevated,var(--surface));
}
#projects .thumb{
  aspect-ratio:16/10;width:100%;height:auto!important;min-height:120px;
  background:#0A0A10;position:relative;
}
#projects .details{padding:var(--space-3);display:flex;flex-direction:column;gap:6px;flex:1}
#projects .name{font-size:var(--fs-comp);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#projects .display-id{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;font-weight:700;color:var(--accent-text,#D7C2FF);
}
#projects .meta{font-size:var(--fs-meta)}
#projects .id-actions{display:flex;flex-wrap:wrap;gap:6px}
#projects .id-actions .small-btn{min-height:30px!important;padding:4px 8px!important;font-size:11.5px!important}

/* VSL workspace polish */
/* Allow Create VSL / filter AquaSelect menus to escape the panel (was overflow:hidden → clipped/frozen clicks). */
#vslLibraryPanel.card{overflow:visible!important}
.vsl-workspace{gap:var(--space-3)!important}
.vsl-list-card,.vsl-card{
  padding:var(--space-3)!important;border-radius:var(--radius)!important;
}
.vsl-detail-body{padding:var(--space-3)!important}
.vsl-kpi-strip .kpi-strip-item{padding:8px 10px!important}
.vsl-detail-empty{padding:var(--space-5);text-align:center;color:var(--text-muted)}

/* Analytics / Dashboard */
.kpi-strip,.vsl-kpi-strip,.kpi-grid,.cp-analytics-grid{margin:var(--space-3) 0!important}
.kpi-card,.cp-kpi,.kpi{padding:10px 12px!important}
.intel-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--space-3)}
.intel-tab{min-height:34px!important;padding:6px 12px!important}
.idea-source-table,.cp-table,.intel-table{font-size:var(--fs-body)}
.idea-source-table th,.idea-source-table td,
.cp-table th,.cp-table td{padding:8px 10px!important}
.idea-source-table td.num,.cp-table td.num,.intel-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

/* AquaSelect menus above sticky chrome */
.aqua-select-menu,.geo-combo-list{z-index:60!important}
.aqua-select{width:100%}
.field-block{display:flex;flex-direction:column;gap:4px;min-width:0}
.field-block > label{font-size:var(--fs-meta);color:var(--text-muted);font-weight:650}

/* Empty / loading */
.aqua-empty{padding:var(--space-5);text-align:center;color:var(--text-muted);font-size:var(--fs-body)}

/* Responsive */
@media(max-width:900px){
  .cp-meta-row{grid-template-columns:1fr 1fr}
  .perf-form-row.metrics{grid-template-columns:1fr 1fr 1fr}
  #projects.projects{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}
@media(max-width:640px){
  :root{--fs-page:20px;--ctrl-h:36px}
  .cp-meta-row{grid-template-columns:1fr}
  .perf-form-row.metrics{grid-template-columns:1fr}
  .cp-video-row .actions{margin-left:0;width:100%}
  .cp-nav-bar{top:calc(var(--header-h,56px) + 0px)!important}
}
@media(max-width:420px){
  #workspace .app-header{padding:8px 10px}
  .aqua-lang button{padding:4px 7px;font-size:11px}
}