/* AQUA Studio V13.5 — Ultimate Desktop Experience
   Extends premium-ui-final. Container-aware grids, compact cards, VSL more-filters. */

:root{
  --ds-content-pad: clamp(16px, 2.2vw, 40px);
  --ds-projects-min: 260px;
  --ds-header-h: 62px;
}

/* —— Content area uses available width —— */
#workspace.wrap{
  padding-left: var(--ds-content-pad) !important;
  padding-right: var(--ds-content-pad) !important;
  max-width: none;
}
#appMain, .aqua-main-content{
  width: 100%;
  max-width: min(1600px, 100%);
}
@media (min-width: 1920px){
  #appMain, .aqua-main-content{ max-width: min(1760px, 100%); }
}
@media (min-width: 2560px){
  #appMain, .aqua-main-content{ max-width: min(2000px, 100%); }
}

/* Header denser, no overlap */
#appHeader, .aqua-shell-header, #workspace .aqua-view-head{
  min-height: var(--ds-header-h);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
#appHeaderExtra, .account-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 1280px){
  #appTitle{ font-size: 20px !important; }
  #appHeaderExtra .btn{ height: 32px; min-height: 32px; padding: 0 10px; font-size: 12.5px; }
}

/* —— My Projects: container-aware columns (target ~3–6) ——
   Must beat premium-ui-final / ui-polish fixed repeat(N) !important rules. */
#projectsPanel{ --ds-projects-min: 260px; }
#projectsPanel .projects,
#projectsPanel .projects.projects-list,
#projectsPanel .projects.projects-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(var(--ds-projects-min), 1fr)) !important;
  gap: 10px !important;
}
@media (max-width: 1599px){
  #projectsPanel .projects,
  #projectsPanel .projects.projects-list,
  #projectsPanel .projects.projects-grid{
    grid-template-columns: repeat(auto-fill, minmax(var(--ds-projects-min), 1fr)) !important;
  }
}
@media (max-width: 1100px){
  #projectsPanel{ --ds-projects-min: 240px; }
  #projectsPanel .projects,
  #projectsPanel .projects.projects-list,
  #projectsPanel .projects.projects-grid{
    grid-template-columns: repeat(auto-fill, minmax(var(--ds-projects-min), 1fr)) !important;
  }
}
@media (min-width: 1728px){
  #projectsPanel{ --ds-projects-min: 270px; }
}
@media (min-width: 1920px){
  #projectsPanel{ --ds-projects-min: 290px; }
}
@media (min-width: 2560px){
  #projectsPanel{ --ds-projects-min: 300px; }
}

/* Compact project cards (~≤250px tall) */
#projectsPanel .project .thumb{
  aspect-ratio: 16 / 9 !important;
  max-height: 132px !important;
}
#projectsPanel .project .thumb .placeholder{
  min-height: 72px !important;
  font-size: 11.5px;
}
#projectsPanel .project .details{
  padding: 8px 10px 4px !important;
  gap: 2px !important;
}
#projectsPanel .project .proj-card-foot{
  padding: 6px 10px 8px !important;
  gap: 6px !important;
  min-width: 0;
}
#projectsPanel .project .proj-card-actions{
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
  flex-wrap: wrap !important;
  gap: 4px !important;
}
#projectsPanel .project .proj-card-actions .small-btn,
#projectsPanel .project .proj-card-actions .link{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px !important;
  font-size: 11.5px !important;
}
#projectsPanel .project .proj-status{
  flex: 0 0 auto;
  white-space: nowrap;
}
#projectsPanel .project .meta:nth-of-type(n+3){
  display: none; /* keep LS + name + one context line */
}

/* —— Campaign ID chip + copy —— */
.cp-campaigns-table .id-chip{
  max-width: 200px;
  cursor: copy;
}
.cp-campaigns-table .id-chip:hover{
  outline: 1px solid var(--ds-accent);
}
.cp-campaigns-table td.id-cell{
  width: 18%;
  max-width: 240px;
}

/* —— Creative drawer —— */
.cp-drawer-panel{
  width: min(100vw - 48px, 600px) !important;
}
@media (max-width: 1280px){
  .cp-drawer-panel{ width: min(100vw - 24px, 92vw) !important; }
}
.cp-drawer-panel .cp-creative-thumb{
  height: 120px !important;
  max-height: 132px;
}
.cp-drawer-panel .cp-drawer-foot{
  position: sticky;
  bottom: 0;
  z-index: 2;
}

/* —— VSL More Filters —— */
#vslLibraryPanel .vsl-filters{
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px !important;
  margin: 6px 0 8px !important;
  padding: 0 !important;
}
#vslLibraryPanel .vsl-filters-primary{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
#vslLibraryPanel .vsl-filters-more{
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding-top: 6px;
  border-top: 1px dashed var(--ds-border);
  margin-top: 4px;
}
#vslLibraryPanel .vsl-filters.is-more-open .vsl-filters-more{
  display: flex;
}
#vslLibraryPanel .vsl-filters .text-input,
#vslLibraryPanel .vsl-filters .geo-combo,
#vslLibraryPanel .vsl-filters select{
  height: 36px !important;
  min-height: 36px !important;
}
#vslLibraryPanel #vslFilterQ{
  flex: 1 1 220px;
  min-width: 180px;
}

/* —— Analytics sections —— */
#analytics .intel-section{
  margin: 14px 0 8px;
  padding-top: 8px;
  border-top: 1px solid var(--ds-border);
}
#analytics .intel-section:first-of-type{ border-top: 0; padding-top: 0; }
#analytics .intel-section h4{
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text-2);
  letter-spacing: .02em;
  text-transform: uppercase;
}
#analytics .analytics-filters{
  gap: 8px !important;
  padding: 6px 0 10px !important;
}
#analytics .analytics-kpis .kpi,
#analytics .dash-kpi{
  min-height: 0;
  padding: 12px 14px;
}

/* —— Dashboard KPIs —— */
#dashboardPanel .dash-kpi,
#adminDash .dash-kpi,
#employeeDash .dash-kpi{
  padding: 12px 14px !important;
}
#dashboardPanel .dash-kpi strong{
  font-size: 26px !important;
  line-height: 1.15;
}

/* —— Team / White / Settings —— */
#teamChrome .team-section-head{ margin-bottom: 8px; }
#whiteGeneratorPanel .wg-layout,
#whiteGeneratorPanel .white-split{
  display: grid;
  grid-template-columns: minmax(320px, 480px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 1100px){
  #whiteGeneratorPanel .wg-layout,
  #whiteGeneratorPanel .white-split{
    grid-template-columns: 1fr;
  }
}
#settingsPanel .settings-grid{
  max-width: 900px;
  gap: 12px !important;
}

/* —— Tables —— */
.cp-campaigns-table tbody tr,
.cp-creatives-table tbody tr,
.analytics-table tbody tr,
.vsl-table tbody tr{
  height: 46px;
}
.cp-campaigns-table th,
.cp-creatives-table th,
.analytics-table th{
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ds-text-2);
}

/* —— Focus / light theme polish —— */
[data-theme="light"] .geo-combo-list{
  background: #fff;
  border-color: var(--ds-border);
  color: var(--ds-text);
  box-shadow: var(--ds-shadow);
}
[data-theme="light"] .geo-combo-item{
  color: var(--ds-text);
  border-bottom-color: var(--ds-border);
}
[data-theme="light"] .geo-combo-item:hover,
[data-theme="light"] .geo-combo-item.active{
  background: var(--ds-hover);
}
.btn:focus-visible,
.small-btn:focus-visible,
.text-input:focus-visible,
.aqua-select-trigger:focus-visible,
.aqua-nav button:focus-visible{
  outline: none;
  box-shadow: var(--ds-focus);
}

/* Prevent accidental page horizontal scroll */
html, body{ overflow-x: hidden; }
#workspace{ overflow-x: clip; }

/* Zoom 125% friendly denser header */
@media (max-height: 800px){
  #projectsPanel .project .thumb{ max-height: 110px !important; }
}