/* AQUA Studio — My Projects card grid + Creative Details polish
   Extends DS 2.0 tokens; Staging only. */

/* —— My Projects toolbar —— */
#projectsPanel .proj-head{margin-bottom:10px}
#projectsPanel .proj-toolbar{
  display:flex!important;flex-wrap:wrap;align-items:center;gap:8px!important;
  padding:8px 10px!important;margin:0 0 12px!important;
}
#projectsPanel .proj-toolbar label{
  display:flex!important;flex-direction:row!important;align-items:center!important;
  gap:6px!important;margin:0!important;font-size:11px;color:var(--ds-text-2);
  flex:0 1 auto;
}
#projectsPanel .proj-toolbar .text-input,
#projectsPanel .proj-toolbar select.text-input{
  height:32px!important;min-width:0;font-size:12.5px!important;width:auto!important;
}
#projectsPanel .proj-toolbar #projSearch{flex:1 1 200px;min-width:160px;max-width:100%}
#projectsPanel .proj-toolbar #projStatus,
#projectsPanel .proj-toolbar .aqua-select{width:140px!important;flex:0 0 140px!important;min-width:140px}
#projectsPanel .proj-toolbar .aqua-select{height:32px!important}
#projectsPanel .proj-toolbar #projCampaign,
#projectsPanel .proj-toolbar #projCreative{width:130px!important;flex:0 0 130px}
#projectsPanel .proj-view-toggle{display:none!important} /* grid is the primary mode */

/* —— Responsive video card grid —— */
#projectsPanel .projects,
#projectsPanel .projects.projects-list,
#projectsPanel .projects.projects-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  border:0!important;background:transparent!important;overflow:visible!important;
}
@media(max-width:1599px){
  #projectsPanel .projects,
  #projectsPanel .projects.projects-list,
  #projectsPanel .projects.projects-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:1100px){
  #projectsPanel .projects,
  #projectsPanel .projects.projects-list,
  #projectsPanel .projects.projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:640px){
  #projectsPanel .projects,
  #projectsPanel .projects.projects-list,
  #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:8px!important;
  overflow:hidden!important;
  min-height:0!important;max-height:none!important;
  padding:0!important;cursor:default!important;
  box-shadow:none!important;
}
#projectsPanel .project:hover{border-color:var(--ds-accent)!important;background:var(--ds-surface)!important}
#projectsPanel .project.is-active{box-shadow:inset 0 0 0 1px var(--ds-accent)!important}

#projectsPanel .project .thumb{
  position:relative!important;
  width:100%!important;height:140px!important;
  background:var(--ds-elevated)!important;border-radius:0!important;
  cursor:pointer;
}
#projectsPanel .project .thumb img{
  width:100%!important;height:100%!important;object-fit:cover!important;display:block;
}
#projectsPanel .project .thumb .placeholder{
  display:flex;align-items:center;justify-content:center;height:100%;
  color:var(--ds-text-2);font-size:12px;
}
#projectsPanel .project .thumb .play-result{
  opacity:0;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.35);color:#fff;font-size:28px;pointer-events:none;
}
#projectsPanel .project .thumb:hover .play-result{opacity:1}

#projectsPanel .project .details{
  padding:10px 12px 8px!important;display:flex!important;flex-direction:column!important;gap:4px!important;
  min-width:0!important;
}
#projectsPanel .project .display-id{
  font-size:12px!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;color:var(--ds-text)!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
#projectsPanel .project .meta{
  font-size:11.5px!important;color:var(--ds-text-2)!important;margin:0!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#projectsPanel .project .owner,
#projectsPanel .project .bar,
#projectsPanel .project .id-actions{display:none!important}

#projectsPanel .project .proj-card-foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 12px 10px;margin-top:auto;
  border-top:1px solid var(--ds-border);
}
#projectsPanel .project .proj-card-actions{
  display:flex;gap:6px;flex-wrap:nowrap;align-items:center;
}
#projectsPanel .project .proj-card-actions .small-btn,
#projectsPanel .project .proj-card-actions .link{
  height:28px!important;padding:0 10px!important;margin:0!important;
  font-size:12px!important;white-space:nowrap;
  display:inline-flex;align-items:center;text-decoration:none;
  border-radius:6px;border:1px solid var(--ds-border);
  background:var(--ds-elevated);color:var(--ds-text)!important;
}
#projectsPanel .project .proj-card-actions .small-btn:hover,
#projectsPanel .project .proj-card-actions .link:hover{
  border-color:var(--ds-accent);color:var(--ds-accent-text)!important;
}
#projectsPanel .aqua-empty-state{grid-column:1/-1}

/* —— Creative drawer polish —— */
.cp-drawer-panel .cp-drawer-head{
  padding:12px 14px!important;gap:8px!important;align-items:flex-start!important;
}
.cp-drawer-panel .cp-drawer-cr{font-size:15px!important;font-weight:650!important}
.cp-drawer-panel .cp-drawer-campaign{font-size:11px!important;color:var(--ds-text-2)!important}
.cp-drawer-panel .cp-drawer-tech{font-size:11px!important;color:var(--ds-text-2)!important;margin-top:2px}
.cp-drawer-panel .cp-drawer-body{padding:12px 14px!important}
.cp-drawer-panel .cp-field-block{margin:0 0 10px}
.cp-drawer-panel .cp-field-value,
.cp-drawer-panel .cp-script-preview,
.cp-drawer-panel .cp-script-view,
.cp-drawer-panel .cp-script-full{
  overflow-wrap:anywhere!important;word-break:break-word!important;
}
.cp-drawer-panel .cp-meta-inline{
  display:flex;flex-wrap:wrap;gap:8px 14px;margin:0 0 12px;
  font-size:12px;color:var(--ds-text-2);
}
.cp-drawer-panel .cp-meta-inline .k{margin-right:4px;opacity:.85}
.cp-drawer-panel .cp-meta-inline .v{color:var(--ds-text);font-weight:550}

/* Linked video thumbnail */
.cp-creative-thumb{
  position:relative;width:100%;height:148px;margin:0 0 12px;
  border-radius:8px;overflow:hidden;background:var(--ds-elevated);
  border:1px solid var(--ds-border);cursor:pointer;
}
.cp-creative-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cp-creative-thumb .ph{
  display:flex;align-items:center;justify-content:center;height:100%;
  color:var(--ds-text-2);font-size:12px;
}
.cp-creative-thumb .play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.28);color:#fff;font-size:26px;opacity:0;transition:opacity .15s;
}
.cp-creative-thumb:hover .play{opacity:1}
.cp-creative-thumb.is-placeholder{cursor:default}
.cp-creative-thumb.is-placeholder .play{display:none}

/* Collapsible script */
.cp-script-collapse .cp-script-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px;
}
.cp-script-collapse .cp-script-preview,
.cp-script-collapse .cp-script-full{
  max-height:none!important;
  padding:10px 12px!important;
  background:var(--ds-elevated)!important;
  border:1px solid var(--ds-border)!important;
  border-radius:7px!important;
  font-size:13px!important;line-height:1.45!important;
  white-space:pre-wrap!important;
  color:var(--ds-text)!important;
}
.cp-script-collapse .cp-script-preview{max-height:4.5em!important;overflow:hidden!important}
.cp-script-collapse .cp-script-full{max-height:280px!important;overflow:auto!important}

/* Compact generation history rows */
.cp-gen-compact{margin-top:4px}
.cp-gen-compact .cp-gen-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px;
}
.cp-gen-rows{border:1px solid var(--ds-border);border-radius:8px;overflow:hidden;background:var(--ds-surface)}
.cp-gen-row{
  display:grid;
  grid-template-columns:100px 96px minmax(110px,1fr) auto;
  gap:8px;align-items:center;
  padding:8px 10px;border-bottom:1px solid var(--ds-border);
  font-size:12.5px;min-height:40px;
}
.cp-gen-row:last-child{border-bottom:0}
.cp-gen-row .ls-id{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ds-text);white-space:nowrap}
.cp-gen-row .created{color:var(--ds-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-gen-row .acts{
  display:flex;gap:6px;flex-wrap:nowrap;justify-content:flex-end;white-space:nowrap;
}
.cp-gen-row .acts .small-btn,
.cp-gen-row .acts a.small-btn{
  height:28px!important;padding:0 8px!important;font-size:12px!important;
  text-decoration:none;display:inline-flex;align-items:center;
}
@media(max-width:700px){
  .cp-gen-row{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"id st" "cr acts";
  }
  .cp-gen-row .ls-id{grid-area:id}
  .cp-gen-row .st{grid-area:st;justify-self:end}
  .cp-gen-row .created{grid-area:cr}
  .cp-gen-row .acts{grid-area:acts}
}

/* Hide old gen table chrome if residual */
.cp-drawer-panel .cp-gen-table-wrap{display:none!important}