/* ============================================================
   Campaigns Page — pure unlayered CSS
   Unlayered rules have highest cascade priority — always win
   over Tailwind @layer utilities/components/base.
   Uses --k-* design tokens from tokens.css.
   ============================================================ */

/* ── Page wrapper padding ──────────────────────────────── */
.page-container {
  padding: var(--k-space-6) var(--k-space-10) var(--k-space-10);
}
@media (max-width: 1024px) {
  .page-container { padding: var(--k-space-5) var(--k-space-7) var(--k-space-9); }
}
@media (max-width: 768px) {
  .page-container { padding: var(--k-space-4) var(--k-space-4) var(--k-space-8); }
}
.page-container:has(.camp-page) { padding-inline: var(--k-space-5); }
@media (max-width: 1024px) { .page-container:has(.camp-page) { padding-inline: var(--k-space-4); } }
@media (max-width: 768px)  { .page-container:has(.camp-page) { padding-inline: var(--k-space-3); } }

/* ── Dashboard overview ────────────────────────────────── */
.dashboard-hero { padding: 0 0 var(--k-space-5); }
.dashboard-hero h1 { font: var(--k-text-h1); color: var(--k-text); letter-spacing: -0.5px; }
.dashboard-hero p  { font: var(--k-text-body-lg); color: var(--k-text-secondary); margin-top: var(--k-space-1); }
.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.75rem), 1fr));
  gap: var(--k-space-4);
  margin-bottom: var(--k-space-7);
}

/* ── Toolbar ───────────────────────────────────────────── */
.camp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-space-4);
  padding-bottom: var(--k-space-5);
  flex-wrap: wrap;
}
.camp-search {
  display: flex;
  align-items: center;
  gap: var(--k-space-2);
  border: 1.5px solid var(--k-border);
  border-radius: var(--k-radius-sm);
  padding: var(--k-space-2) var(--k-space-4);
  background: var(--k-surface);
  min-width: 11.25rem;
  max-width: 15rem;
  transition: border-color var(--k-dur-fast) var(--k-ease);
}
.camp-search:focus-within { border-color: var(--k-primary); }
.camp-search .material-symbols-outlined { font-size: var(--k-icon-btn-sm-icon); color: var(--k-text-tertiary); }
.camp-search input {
  flex: 1; border: none; background: none; outline: none;
  font: var(--k-text-body); color: var(--k-text); min-width: 5rem;
}
.camp-search input::placeholder { color: var(--k-text-tertiary); }

.camp-toolbar-right { display: flex; align-items: center; gap: 0.625rem; }
.camp-dropdown-wrap { position: relative; }

.camp-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: var(--k-space-2) var(--k-space-4);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-sm);
  background: var(--k-surface);
  font: var(--k-text-body);
  color: var(--k-text);
  cursor: pointer;
  transition: all var(--k-dur-fast) var(--k-ease);
}
.camp-status-btn:hover { border-color: var(--k-primary); }
.camp-status-btn .material-symbols-outlined { font-size: var(--k-icon-btn-sm-icon); }

.camp-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  z-index: 100;
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-md);
  box-shadow: var(--k-shadow-lg);
  min-width: 10rem;
  overflow: hidden;
}
.camp-dropdown-item {
  padding: 0.625rem var(--k-space-4);
  font: var(--k-text-body);
  cursor: pointer;
  transition: background var(--k-dur-fast) var(--k-ease);
}
.camp-dropdown-item:hover { background: var(--k-primary-light); }
.camp-dropdown-item.active { color: var(--k-primary); font-weight: 600; }

.camp-add-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-1);
  padding: 0.625rem 1.375rem;
  border: none;
  border-radius: var(--k-radius-md);
  background: var(--k-primary);
  color: #fff;
  font: var(--k-text-label);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--k-dur-fast) var(--k-ease);
}
.camp-add-btn:hover { background: var(--k-primary-hover); box-shadow: var(--k-shadow-primary); }
.camp-add-btn .material-symbols-outlined { font-size: var(--k-icon-btn-sm-icon); }

/* ── Column header ─────────────────────────────────────── */
.camp-col-header {
  display: flex;
  align-items: center;
  gap: var(--k-space-3);
  padding: var(--k-space-2) var(--k-row-padding-r) var(--k-space-2) var(--k-row-padding-l);
  font: var(--k-text-label-sm);
  color: var(--k-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.44px;
}
.camp-col-header .camp-cb { margin-right: var(--k-space-2); }

.camp-col-name     { flex: 2.5; min-width: 0; }
.camp-col-status   { flex: 1;   min-width: var(--k-col-status-w, 7.5rem); }
.camp-col-progress { flex: 1.2; min-width: var(--k-col-progress-w, 9rem); }
.camp-col-stat     { flex: 0.8; min-width: var(--k-col-stat-w, 5.5rem); }
.camp-col-actions  { width: var(--k-col-actions-w, 5rem); flex-shrink: 0; }

/* ── Campaign list — container query context ───────────── */
.camp-list {
  display: flex;
  flex-direction: column;
  gap: var(--k-space-3);
  container-type: inline-size;
  container-name: camp-list;
}

/* ── Campaign rows ─────────────────────────────────────── */
.camp-row {
  display: flex;
  align-items: center;
  gap: var(--k-space-3);
  padding: var(--k-row-padding-v, 0.875rem) var(--k-row-padding-r, 1.5rem) var(--k-row-padding-v, 0.875rem) var(--k-row-padding-l, 1rem);
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-md);
  cursor: pointer;
  min-height: var(--k-row-min-h, 4.5rem);
  box-shadow: var(--k-shadow-md);
  transition: all var(--k-dur-normal) var(--k-ease);
}
.camp-row:hover {
  border-color: var(--k-primary);
  box-shadow: var(--k-shadow-lg);
  transform: translateY(-1px);
}
.camp-row .camp-cb { margin-right: var(--k-space-2); flex-shrink: 0; }

.camp-cb {
  width: var(--k-cb-size, 1.125rem);
  height: var(--k-cb-size, 1.125rem);
  accent-color: var(--k-primary);
  cursor: pointer;
}

.camp-name {
  font: var(--k-text-body);
  font-weight: 600;
  color: var(--k-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.camp-cell-val {
  font: var(--k-text-body);
  color: var(--k-text);
  font-variant-numeric: tabular-nums;
}

/* ── Container-query column hiding ────────────────────── */
@container camp-list (max-width: 56rem) {
  .camp-col-stat:nth-child(n+12) { display: none; }
}
@container camp-list (max-width: 45rem) {
  .camp-col-stat { display: none; }
}
@container camp-list (max-width: 30rem) {
  .camp-col-progress { display: none; }
  .camp-row { flex-wrap: wrap; min-height: auto; padding: var(--k-space-3); }
}

/* ── Status badges ─────────────────────────────────────── */
.camp-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: var(--k-space-1) 0.625rem;
  border-radius: var(--k-radius-xs);
  font: var(--k-text-label-sm);
  letter-spacing: 0.1px;
  white-space: nowrap;
}
.camp-badge-dot {
  width: var(--k-dot-sm, 0.375rem);
  height: var(--k-dot-sm, 0.375rem);
  border-radius: 50%;
  flex-shrink: 0;
}
.camp-badge-active    { background: rgba(0,200,117,.13); color: #006A3A; }
.camp-badge-active    .camp-badge-dot { background: var(--k-emerald, #00C875); }
.camp-badge-paused    { background: rgba(253,188,17,.16); color: #7A5400; }
.camp-badge-paused    .camp-badge-dot { background: var(--k-amber, #FDBC11); }
.camp-badge-draft     { background: var(--k-surface-sunken); color: var(--k-text-secondary); }
.camp-badge-draft     .camp-badge-dot { background: var(--k-text-tertiary); }
.camp-badge-completed { background: rgba(80,70,228,.10); color: #3D34C2; }
.camp-badge-completed .camp-badge-dot { background: var(--k-primary); }
.camp-badge-error     { background: rgba(226,68,92,.12); color: #9A0020; }
.camp-badge-error     .camp-badge-dot { background: var(--k-error); }

/* ── Progress bar ──────────────────────────────────────── */
.camp-progress-cell { display: flex; flex-direction: column; gap: var(--k-space-1); }
.camp-progress-pct  {
  font: var(--k-text-body);
  font-weight: 600;
  color: var(--k-instant-blue, var(--k-sky, #0073EA));
  font-variant-numeric: tabular-nums;
}
.camp-progress-bar {
  width: 100%;
  max-width: var(--k-progress-bar-max-w, 6.25rem);
  height: var(--k-progress-h, 0.25rem);
  background: var(--k-surface-sunken);
  border-radius: 9999px;
  overflow: hidden;
}
.camp-progress-fill {
  height: 100%;
  background: var(--k-emerald, #00C875);
  border-radius: inherit;
  transition: width var(--k-dur-slow) var(--k-ease);
}

/* ── Action buttons ────────────────────────────────────── */
.camp-actions {
  display: flex;
  align-items: center;
  gap: var(--k-space-1);
  flex-shrink: 0;
  width: var(--k-col-actions-w, 5rem);
  justify-content: flex-end;
}
.camp-toggle-btn,
.camp-dots-btn {
  width: var(--k-icon-btn-size, 2.25rem);
  height: var(--k-icon-btn-size, 2.25rem);
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--k-dur-fast) var(--k-ease);
}
.camp-toggle-btn:hover,
.camp-dots-btn:hover { background: var(--k-surface-sunken); }
.camp-toggle-btn .material-symbols-outlined,
.camp-dots-btn .material-symbols-outlined { font-size: var(--k-icon-btn-icon, 1.25rem); color: var(--k-text-secondary); }
.camp-menu-wrap { position: relative; }

/* ── Bulk action bar ───────────────────────────────────── */
.camp-bulk-bar {
  display: flex;
  align-items: center;
  gap: var(--k-space-2);
  padding: var(--k-space-2) var(--k-space-4);
  background: var(--k-primary-light);
  border-radius: var(--k-radius-sm);
  margin-bottom: var(--k-space-3);
  font: var(--k-text-body);
}
.camp-bulk-bar.hidden { display: none; }
.camp-bulk-count { color: var(--k-primary); font-weight: 600; }
.camp-bulk-clear {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--k-text-secondary);
  cursor: pointer;
  font: var(--k-text-body);
}
.camp-bulk-btn {
  padding: var(--k-space-1) var(--k-space-3);
  border-radius: var(--k-radius-sm);
  border: 1px solid var(--k-border);
  background: var(--k-surface);
  font: var(--k-text-body);
  cursor: pointer;
  transition: background var(--k-dur-fast) var(--k-ease);
}
.camp-bulk-btn:hover { background: var(--k-surface-hover); }
.camp-bulk-btn.danger { color: var(--k-error); border-color: var(--k-error-light); }
.camp-bulk-btn.danger:hover { background: var(--k-error-light); }

/* ── Campaign detail ───────────────────────────────────── */
.campaign-detail-wrap {
  max-width: var(--k-detail-max-w, 72.25rem);
  margin: 0 auto;
  padding-top: 1.625rem;
}
.campaign-header-bar {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding-bottom: var(--k-space-3);
}
.campaign-status-row {
  display: flex;
  align-items: center;
  gap: var(--k-space-4);
  padding: var(--k-space-4) 0;
  flex-wrap: wrap;
}
.campaign-progress { display: flex; align-items: center; gap: 0.625rem; }
.campaign-progress .bar {
  width: 8.75rem;
  height: var(--k-progress-h-thick, 0.375rem);
  background: var(--k-surface-sunken);
  border-radius: 9999px;
  overflow: hidden;
}
.campaign-progress .bar .fill { height: 100%; background: var(--k-gradient); border-radius: inherit; }
.campaign-progress .pct { font: var(--k-text-label); font-weight: 700; }

/* ── Analytics ─────────────────────────────────────────── */
.anl-page { display: flex; flex-direction: column; gap: var(--k-space-6); }
.anl-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: var(--k-space-3); }
.anl-toolbar-right { display: flex; align-items: center; gap: 0.625rem; }
.anl-filter-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-sm);
  padding: var(--k-space-2) var(--k-space-4);
  background: transparent;
  font: var(--k-text-body);
  font-weight: 500;
  color: var(--k-text);
  cursor: pointer;
  white-space: nowrap;
}
.anl-filter-btn .material-symbols-outlined { font-size: var(--k-icon-btn-sm-icon); color: var(--k-text-secondary); }
.anl-filter-btn:hover { background: var(--k-surface-hover); }
.anl-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--k-icon-btn-size, 2.25rem);
  height: var(--k-icon-btn-size, 2.25rem);
  border-radius: var(--k-radius-sm);
  border: 1px solid var(--k-border);
  background: transparent;
  cursor: pointer;
}
.anl-icon-btn .material-symbols-outlined { font-size: var(--k-icon-btn-icon, 1.25rem); color: var(--k-text-secondary); }
.anl-icon-btn:hover { background: var(--k-surface-hover); }

.anl-kpi-container {
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-md);
  padding: var(--k-space-8);
  background: var(--k-surface);
}
.anl-kpi-row { display: flex; gap: var(--k-space-5); flex-wrap: wrap; }
.anl-kpi-row--mono {
  margin-top: var(--k-space-5);
  padding-top: var(--k-space-5);
  border-top: 1px solid var(--k-border);
}
.anl-kpi-card {
  flex: 1;
  min-width: 8.75rem;
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-sm);
  padding: var(--k-space-4) var(--k-space-6);
  min-height: var(--k-anl-kpi-min-h, 7.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.anl-kpi-card--mono { border-left: 3px solid var(--k-primary); }
.anl-kpi-header { display: flex; align-items: center; gap: var(--k-space-2); margin-bottom: var(--k-space-3); }
.anl-kpi-dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; flex-shrink: 0; }
.anl-kpi-label { font: var(--k-text-body); font-weight: 600; color: var(--k-text-secondary); }
.anl-kpi-info { display: flex; }
.anl-kpi-info .material-symbols-outlined { font-size: 1rem; color: var(--k-text-tertiary); cursor: help; }
.anl-kpi-value { font: var(--k-text-number); font-weight: 400; color: var(--k-text); letter-spacing: -0.5px; }

.anl-chart-container {
  position: relative;
  padding: var(--k-space-6);
  background: var(--k-surface);
  border-radius: var(--k-radius-md);
  border: 1px solid var(--k-border);
}
.anl-chart-legend { display: flex; gap: var(--k-space-6); flex-wrap: wrap; margin-bottom: var(--k-space-4); }
.anl-legend-item { display: flex; align-items: center; gap: var(--k-space-2); font: var(--k-text-small); color: var(--k-text-secondary); }
.anl-legend-dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; flex-shrink: 0; }
.anl-chart-svg { width: 100%; height: 18.75rem; }

.anl-section {
  background: var(--k-surface);
  border-radius: var(--k-radius-md);
  border: 1px solid var(--k-border);
  padding: var(--k-space-6);
}
.anl-section-title { font: var(--k-text-h3); color: var(--k-text); margin: 0 0 var(--k-space-4); }

.step-analytics-tabs {
  display: flex;
  gap: var(--k-space-1);
  margin-top: var(--k-space-6);
  border-bottom: 1px solid var(--k-border-light);
}
.step-analytics-tab {
  padding: var(--k-space-3) 1.125rem;
  border: none;
  background: none;
  cursor: pointer;
  font: var(--k-text-label);
  color: var(--k-text-secondary);
  border-radius: var(--k-radius-sm) var(--k-radius-sm) 0 0;
  transition: all var(--k-dur-normal) var(--k-ease);
}
.step-analytics-tab.active {
  color: var(--k-primary);
  background: var(--k-primary-light);
  font-weight: 600;
}
.step-analytics-tab.active::after {
  content: '';
  display: block;
  position: relative;
  bottom: -0.75rem;
  height: 0.15625rem;
  border-radius: 0.125rem 0.125rem 0 0;
  background: var(--k-gradient);
}

/* ── Mobile ≤640px ─────────────────────────────────────── */
@media (max-width: 40rem) {
  .camp-toolbar { gap: var(--k-space-2); }
  .camp-toolbar-right { flex-wrap: wrap; gap: var(--k-space-2); }
  .camp-search { min-width: 0; flex: 1; }
  .camp-col-header { display: none; }
  .anl-kpi-card { min-width: 100%; }
  .anl-kpi-row { flex-direction: column; }
  .campaign-detail-wrap { padding-top: var(--k-space-4); }
}