/* AQUA STUDIO V12/V13 — Compact workspace + PART4 Desktop UX */

/*
  Theme tokens (V13 fix): never put dark colors on bare :root.
  :root + [data-theme="dark"] previously overrode [data-theme="light"]
  from aqua-v9.css (same specificity, later cascade) → mixed theme
  (dark chrome + white inputs). Colors live only under data-theme.
*/
:root{
  --radius:8px;
  --radius-card:12px;
  --ctrl-h:36px;
  --fs-page:22px;
  --fs-section:16px;
  --fs-body:13.5px;
  --fs-table:13px;
  --fs-meta:11.5px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --sidebar-w:220px;
  --sidebar-width:220px;
  --cp-drawer-w:560px;
  --cp-row-h:48px;
  --cp-drawer-z:80;
  --focus:0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
}

[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0B0D14;
  --bg-primary:#0B0D14;
  --sidebar:#121522;
  --bg-secondary:#121522;
  --surface:#121522;
  --bg-card:#121522;
  --bg-elevated:#191D2D;
  --surface-2:#191D2D;
  --elevated:#191D2D;
  --border:#2A2E40;
  --border-primary:#2A2E40;
  --border-strong:#3A3E52;
  --text:#F1F3F9;
  --text-primary:#F1F3F9;
  --text-2:#9CA3B8;
  --text-secondary:#9CA3B8;
  --text-muted:#9CA3B8;
  --muted:#9CA3B8;
  --accent:#8B5CF6;
  --accent-primary:#8B5CF6;
  --accent-hover:#A78BFA;
  --accent-soft:rgba(139,92,246,.18);
  --accent-text:#E9D5FF;
  --success:#34D399;
  --warning:#FBBF24;
  --danger:#FB7185;
  --error:#FB7185;
  --input-bg:#121522;
  --sidebar-text:#9CA3B8;
  --sidebar-active-bg:rgba(139,92,246,.18);
  --sidebar-active-text:#E9D5FF;
  --thumb-bg:#1A1C28;
  --shadow:0 12px 32px rgba(0,0,0,.45);
  --overlay:rgba(6,7,12,.55);
  --mix-shade:#000;
}

[data-theme="light"]{
  color-scheme:light;
  --bg:#F7F8FC;
  --bg-primary:#F7F8FC;
  --sidebar:#FFFFFF;
  --bg-secondary:#FFFFFF;
  --surface:#FFFFFF;
  --bg-card:#FFFFFF;
  --bg-elevated:#F1F3F9;
  --surface-2:#F1F3F9;
  --elevated:#F1F3F9;
  --border:#E1E5EE;
  --border-primary:#E1E5EE;
  --border-strong:#CDD3E0;
  --text:#182033;
  --text-primary:#182033;
  --text-2:#667085;
  --text-secondary:#667085;
  --text-muted:#8A93A6;
  --muted:#8A93A6;
  --accent:#7546E8;
  --accent-primary:#7546E8;
  --accent-hover:#6435D6;
  --accent-soft:rgba(117,70,232,.12);
  --accent-text:#5B35C7;
  --success:#1F9D63;
  --warning:#B78103;
  --danger:#C62828;
  --error:#C62828;
  --input-bg:#FFFFFF;
  --sidebar-text:#667085;
  --sidebar-active-bg:rgba(117,70,232,.12);
  --sidebar-active-text:#5B35C7;
  --thumb-bg:#EEF0F7;
  --shadow:0 12px 28px rgba(24,32,51,.10);
  --overlay:rgba(24,32,51,.35);
  --mix-shade:#182033;
}

.cp-campaign-head{align-items:center!important;gap:10px!important;padding:8px 0!important}
.cp-campaign-head-line{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;
  font-size:13px;line-height:1.35;min-width:0;
}
.cp-campaign-head-line .cp-head-id{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:750;color:var(--accent-text,#D7C2FF);margin-right:4px;
}
.cp-campaign-head-line .cp-head-name{font-weight:650;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-campaign-head-line .sep{color:var(--text-muted,#9AA3B5);margin:0 8px}
.cp-campaigns-table-wrap{overflow:auto;border:1px solid var(--border-primary,#2B2E3D);border-radius:10px}
.cp-campaigns-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12.5px}
.cp-campaigns-table th,.cp-campaigns-table td{
  padding:0 10px!important;height:48px;max-height:48px;
  border-bottom:1px solid var(--border-primary,#2B2E3D);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;
}
.cp-campaigns-table tbody tr{cursor:pointer}
.cp-campaigns-table tbody tr:hover{background:color-mix(in srgb, var(--accent-primary,#8B5CF6) 8%, transparent)}
.cp-campaigns-table .name-cell{font-weight:600}
.cp-list-toolbar .cp-check{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted)}
.cp-info-actions .small-btn,.cp-info-actions .btn{min-height:32px!important;padding:5px 10px!important;font-size:12px!important}

/* —— Compact creatives table —— */
.cp-creatives-table-wrap{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border-primary,#2B2E3D);
  border-radius:10px;
  max-width:100%;
}
.cp-creatives-table{
  width:100%;
  border-collapse:collapse;
  font-size:12.5px;
  table-layout:fixed;
  min-width:640px;
}
.cp-creatives-table th,
.cp-creatives-table td{
  padding:0 10px!important;
  height:var(--cp-row-h);
  max-height:var(--cp-row-h);
  border-bottom:1px solid var(--border-primary,#2B2E3D);
  text-align:left;
  vertical-align:middle;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cp-creatives-table th{
  height:36px;
  max-height:36px;
  color:var(--text-muted,#9AA3B5);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:.3px;
  background:var(--bg-elevated,#171820);
  font-weight:700;
}
.cp-creatives-table tbody tr{cursor:pointer}
.cp-creatives-table tbody tr:hover{background:color-mix(in srgb, #7C3AED 10%, transparent)}
.cp-creatives-table tbody tr.is-active{
  background:color-mix(in srgb, #7C3AED 16%, transparent);
  box-shadow:inset 2px 0 0 #7C3AED;
}
.cp-creatives-table col.c-num{width:56px}
.cp-creatives-table col.c-angle{width:18%}
.cp-creatives-table col.c-text{width:auto}
.cp-creatives-table col.c-author{width:110px}
.cp-creatives-table col.c-status{width:96px}
.cp-creatives-table tbody tr:focus-visible{
  outline:2px solid color-mix(in srgb, #7C3AED 70%, transparent);
  outline-offset:-2px;
}

/* Uniform campaign number badge — same style for every creative */
.cp-creatives-table .num-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:28px;height:24px;box-sizing:border-box;
  padding:0 8px;border-radius:6px;
  background:#4C1D95;
  color:#F5F3FF;
  font-size:12px;font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
  border:none;
  white-space:nowrap;
}
.cp-creatives-table td.num-cell{width:56px}
.cp-creatives-table .meta-badge,
.cp-creatives-table .status-chip{
  display:inline-block;padding:2px 7px;border-radius:999px;
  font-size:11px;font-weight:650;
  background:var(--bg-secondary,#111218);
  border:1px solid var(--border-primary,#2B2E3D);
  color:var(--text-muted,#9AA3B5);
}
.cp-creatives-table td.text-cell{
  white-space:nowrap;
  color:var(--text-muted,#9AA3B5);
  font-size:12px;
}
.cp-creatives-table td.angle-cell{font-weight:600}
/* Row actions removed — whole row is the control */

/* Keep table on narrow screens (no card fallback takeover) */
@media(max-width:980px){
  .cp-creatives-table-wrap{display:block!important}
  .cp-creatives-cards{display:none!important}
}

/* —— Side panel / drawer —— */
.cp-drawer{
  position:fixed;inset:0;z-index:var(--cp-drawer-z);
  pointer-events:none;
}
.cp-drawer.is-open{pointer-events:auto}
.cp-drawer-backdrop{
  position:absolute;inset:0;
  background:rgba(4,6,12,.45);
  opacity:0;transition:opacity .18s ease;
}
.cp-drawer.is-open .cp-drawer-backdrop{opacity:1}
.cp-drawer-panel{
  position:fixed;top:0;right:0;bottom:0;
  width:min(var(--cp-drawer-w),100vw);
  max-width:600px;
  min-width:min(480px,100vw);
  background:var(--bg-elevated,#171820);
  border-left:1px solid var(--border-primary,#2B2E3D);
  box-shadow:-12px 0 40px rgba(0,0,0,.35);
  display:flex;flex-direction:column;
  translate:100% 0;
  transition:translate .18s ease;
  color:var(--text-primary,#F3F4F8);
  z-index:calc(var(--cp-drawer-z) + 1);
}
.cp-drawer.is-open .cp-drawer-panel{translate:0 0}

.cp-drawer-head{
  flex:0 0 auto;
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;
  padding:14px 16px 12px;
  border-bottom:1px solid var(--border-primary,#2B2E3D);
}
.cp-drawer-head-main{min-width:0;flex:1}
.cp-drawer-cr{
  font-size:20px;font-weight:750;letter-spacing:.2px;
  color:#E9D5FF;
  line-height:1.2;
}
.cp-drawer-campaign{
  margin-top:4px;font-size:12px;color:var(--text-muted,#9AA3B5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cp-drawer-tech{
  margin-top:6px;display:inline-flex;align-items:center;gap:6px;
  font-size:11px;line-height:1.2;
  color:var(--text-muted,#9AA3B5);
}
.cp-drawer-tech-label{
  text-transform:uppercase;letter-spacing:.35px;font-weight:700;opacity:.85;
}
.cp-drawer-tech-value{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:650;color:#A78BFA;
}
.cp-drawer-head-actions{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.cp-drawer-close{
  width:32px;height:32px;min-height:32px!important;padding:0!important;
  border-radius:8px!important;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;
}

.cp-drawer-body{
  flex:1 1 auto;
  overflow:auto;
  padding:14px 16px 18px;
  display:flex;flex-direction:column;gap:14px;
  -webkit-overflow-scrolling:touch;
}
.cp-drawer-foot{
  flex:0 0 auto;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 16px;
  border-top:1px solid var(--border-primary,#2B2E3D);
  background:color-mix(in srgb, var(--bg-elevated,#171820) 92%, var(--mix-shade,#000));
}
.cp-drawer-foot .btn,
.cp-drawer-foot .small-btn,
#workspace .cp-drawer-foot .btn,
#workspace .cp-drawer-foot .small-btn,
.cp-drawer .btn,
.cp-drawer .small-btn{
  min-height:34px!important;
  padding:6px 12px!important;
  font-size:12.5px!important;
}
.cp-drawer-foot .cp-edit-status{margin-left:auto;font-size:12px}

.cp-field-block{display:flex;flex-direction:column;gap:6px;min-width:0}
.cp-field-label{
  font-size:11px;font-weight:700;letter-spacing:.3px;
  text-transform:uppercase;color:var(--text-muted,#9AA3B5);
}
.cp-field-value{
  font-size:13.5px;font-weight:600;line-height:1.35;
  white-space:pre-wrap;word-break:break-word;
}
.cp-script-view{
  max-height:280px;overflow:auto;
  padding:10px 12px;
  border:1px solid var(--border-primary,#2B2E3D);
  border-radius:8px;
  background:var(--bg-secondary,#111218);
  font-size:13px;line-height:1.5;
  white-space:pre-wrap;word-break:break-word;
}
.cp-drawer .text-input,
#workspace .cp-drawer .text-input{
  width:100%;box-sizing:border-box;
  min-height:34px!important;
  padding:7px 10px!important;
  font-size:13px!important;
}
.cp-drawer textarea.cp-script-input,
#workspace .cp-drawer textarea.cp-script-input{
  height:250px;
  min-height:220px;
  max-height:70vh;
  resize:vertical;
  line-height:1.45;
  white-space:pre-wrap;
  overflow:auto;
}

.cp-meta-inline{
  display:flex;flex-wrap:wrap;gap:8px 14px;
  padding:8px 10px;
  border:1px solid var(--border-primary,#2B2E3D);
  border-radius:8px;
  background:color-mix(in srgb, var(--bg-secondary,#111218) 80%, transparent);
  font-size:12px;
}
.cp-meta-inline .m{display:flex;gap:6px;align-items:baseline;min-width:0}
.cp-meta-inline .k{color:var(--text-muted,#9AA3B5);font-size:11px}
.cp-meta-inline .v{font-weight:650;color:var(--text-primary,#F3F4F8)}

.cp-gen-compact{
  display:flex;flex-direction:column;gap:8px;
  padding:10px;
  border:1px solid var(--border-primary,#2B2E3D);
  border-radius:8px;
}
.cp-gen-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
}
.cp-gen-table-wrap{overflow:auto;max-width:100%}
.cp-gen-table{
  width:100%;border-collapse:collapse;table-layout:fixed;font-size:12px;
}
.cp-gen-table th,.cp-gen-table td{
  padding:6px 8px!important;border-bottom:1px solid var(--border-primary,#2B2E3D);
  text-align:left;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cp-gen-table th{
  font-size:10px;text-transform:uppercase;letter-spacing:.3px;
  color:var(--text-muted,#9AA3B5);font-weight:700;
}
.cp-gen-table td.act-cell{white-space:normal}
.cp-gen-table td.act-cell .small-btn{margin:2px 4px 2px 0}
.cp-gen-compact .gen-top{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.cp-gen-compact .cp-video-thumb{
  width:72px!important;height:46px!important;
}
.cp-gen-create-modal{max-width:640px;width:min(640px,94vw)}
.cp-gen-create-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0;
}
.cp-gen-drop{
  display:flex;flex-direction:column;gap:8px;padding:12px!important;min-height:0!important;
  cursor:pointer;
}
.cp-gen-drop input[type=file]{font-size:12px;max-width:100%}
@media(max-width:720px){
  .cp-gen-create-grid{grid-template-columns:1fr}
}

.cp-drawer .aqua-acc{margin:0!important}
.cp-drawer-empty{
  padding:40px 16px;text-align:center;color:var(--text-muted,#9AA3B5);font-size:13px;
}

body.cp-drawer-open{overflow:hidden}

/* Keep creatives table readable beside the panel on desktop */
@media(min-width:721px){
  .cp-drawer-backdrop{background:transparent; pointer-events:none}
  /* Keep creatives table fully visible beside the panel */
  body.cp-drawer-open-desktop #cpCreatives,
  body.cp-drawer-open-desktop .cp-creatives-head{
    margin-right:calc(var(--cp-drawer-w) + 12px)!important;
    transition:margin-right .18s ease;
  }
  body.cp-drawer-open-desktop .cp-creatives-table{
    min-width:0;
  }
}

@media(max-width:720px){
  .cp-drawer-panel{
    width:100vw;max-width:100vw;min-width:100vw;
  }
  .cp-drawer-backdrop{display:block}
}

/* —— PART4 Desktop chrome —— */
#workspace.wrap,#workspace{
  --app-pad:22px;
}
.app-main{
  padding-left:var(--app-pad,22px)!important;
  padding-right:var(--app-pad,22px)!important;
}
#appTitle{font-size:var(--fs-page,22px)!important;font-weight:750!important;letter-spacing:-.01em}
#appSubtitle{font-size:var(--fs-meta,11.5px)!important}

:root{--sidebar-width:var(--sidebar-w,220px)}
.aqua-sidebar{
  width:var(--sidebar-width)!important;
  transition:width .18s ease;
}
.aqua-sidebar .aqua-nav button{
  min-height:40px!important;
  padding:8px 10px!important;
  gap:10px!important;
  border-radius:8px!important;
  font-size:13px!important;
}
.aqua-sidebar .aqua-nav button:focus-visible{
  outline:none; box-shadow:var(--focus);
}
.aqua-sidebar-toggle{
  display:flex;align-items:center;justify-content:center;
  width:100%;margin:8px 0 4px;min-height:32px!important;
  border-radius:8px!important;
}
body.aqua-sidebar-collapsed{
  --sidebar-width:72px;
  --sidebar-w:72px;
}
body.aqua-sidebar-collapsed .aqua-sidebar{
  width:72px!important;
  padding-left:8px!important;
  padding-right:8px!important;
}
body.aqua-sidebar-collapsed .aqua-sidebar .label,
body.aqua-sidebar-collapsed .aqua-sidebar .aqua-logo span,
body.aqua-sidebar-collapsed .aqua-sidebar .aqua-foot{
  display:none!important;
}
body.aqua-sidebar-collapsed .aqua-sidebar .aqua-logo{
  justify-content:center;padding:8px 0;
}
body.aqua-sidebar-collapsed .aqua-sidebar .aqua-nav button{
  justify-content:center;padding:10px!important;
}
body.aqua-sidebar-collapsed .wrap#workspace,
body.aqua-sidebar-collapsed #workspace.wrap{
  margin-left:var(--sidebar-width)!important;
}

.aqua-toast-host{
  position:fixed!important;
  top:16px!important; right:16px!important; bottom:auto!important;
  z-index:120!important;
  display:flex;flex-direction:column;gap:8px;
  max-width:min(380px,92vw);
  pointer-events:none;
}
.aqua-toast{
  pointer-events:auto;
  background:var(--bg-elevated,#191D2D)!important;
  color:var(--text-primary,#F1F3F9)!important;
  border:1px solid var(--border,#2A2E40)!important;
  border-radius:10px!important;
  padding:10px 12px!important;
  font-size:13px!important;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  opacity:0; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease;
}
.aqua-toast.show{opacity:1;transform:none}
.aqua-toast.ok{border-color:color-mix(in srgb, var(--success,#34D399) 45%, var(--border))!important}
.aqua-toast.err{border-color:color-mix(in srgb, var(--error,#FB7185) 55%, var(--border))!important}
.aqua-toast.warn{border-color:color-mix(in srgb, var(--warning,#FBBF24) 55%, var(--border))!important}
.aqua-toast.info{border-color:color-mix(in srgb, var(--accent,#8B5CF6) 45%, var(--border))!important}
.aqua-toast .aqua-toast-close{
  float:right;margin-left:8px;border:0;background:transparent;color:var(--text-muted);
  cursor:pointer;font-size:16px;line-height:1;
}

.aqua-empty-state{
  padding:28px 16px;text-align:center;
  border:1px dashed var(--border-primary,#2A2E40);
  border-radius:12px;
  color:var(--text-muted,#9CA3B8);
  font-size:13.5px;line-height:1.45;
}
.aqua-empty-state strong{display:block;color:var(--text-primary);margin-bottom:6px;font-size:14px}

.aqua-skel{
  display:flex;flex-direction:column;gap:8px;padding:8px 0;
}
.aqua-skel-row{
  height:48px;border-radius:8px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--bg-elevated) 80%, var(--mix-shade,#000)),
    color-mix(in srgb, var(--accent) 12%, var(--bg-elevated)),
    color-mix(in srgb, var(--bg-elevated) 80%, var(--mix-shade,#000)));
  background-size:200% 100%;
  animation:aquaSkel 1.1s ease-in-out infinite;
}
@keyframes aquaSkel{0%{background-position:100% 0}100%{background-position:-100% 0}}

.cp-script-view{max-height:260px!important}

.dash-kpi,.kpi-card,.dash-card{
  min-height:90px;max-height:110px;
  border-radius:12px!important;
}

@media(max-width:1279px){
  :root{--sidebar-w:200px}
}
@media(max-width:767px){
  body.aqua-sidebar-collapsed .aqua-sidebar,
  .aqua-sidebar{width:100%!important}
}