/* v2 dashboard page styles — restyle the existing classes emitted by
   assets/js/pages/dashboard.js. Pure overrides scoped under [data-theme="v2"]. */

/* ──────────────────────────────────────────────────────────────
   Hero
   ────────────────────────────────────────────────────────────── */
body[data-theme="v2"] .hero {
  background:
    linear-gradient(135deg, rgba(108, 184, 255, .12), rgba(47, 223, 163, .06) 60%, transparent),
    var(--panel);
  border: var(--border-subtle);
  border-radius: var(--radius);
  padding: var(--space-7) var(--space-7);
  position: relative;
  overflow: hidden;
}

body[data-theme="v2"] .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(108, 184, 255, .14), transparent 60%);
  pointer-events: none;
}

body[data-theme="v2"] .hero-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-7);
  position: relative;
  z-index: 1;
}

@media (max-width: 960px) {
  body[data-theme="v2"] .hero-grid {
    grid-template-columns: 1fr;
  }
}

body[data-theme="v2"] .section-kicker {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-weight: var(--weight-strong);
  color: var(--muted-2);
  margin-bottom: var(--space-2);
}

body[data-theme="v2"] .hero-title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-3);
}

body[data-theme="v2"] .hero-copy {
  font-size: var(--text-md);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-5);
  max-width: 64ch;
}

body[data-theme="v2"] .hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

body[data-theme="v2"] .hero-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

body[data-theme="v2"] .hero-side-card {
  padding: var(--space-4) var(--space-5);
  background: var(--panel-2);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

body[data-theme="v2"] .hero-side-card.highlight {
  background: linear-gradient(135deg, rgba(108, 184, 255, .18), rgba(47, 223, 163, .08));
  border-color: rgba(108, 184, 255, .3);
}

body[data-theme="v2"] .hero-side-card .label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--muted);
  font-weight: var(--weight-strong);
}

body[data-theme="v2"] .hero-side-card .value {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}

body[data-theme="v2"] .hero-side-card .value.large {
  font-size: var(--text-3xl);
}

body[data-theme="v2"] .hero-side-card .copy {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

/* ──────────────────────────────────────────────────────────────
   Quick action launchers
   ────────────────────────────────────────────────────────────── */
body[data-theme="v2"] .dashboard-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

body[data-theme="v2"] .quick-action-btn {
  padding: var(--space-3) var(--space-4);
  background: var(--panel-3);
  border: var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

body[data-theme="v2"] .quick-action-btn:hover {
  background: linear-gradient(135deg, rgba(108, 184, 255, .22), rgba(108, 184, 255, .08));
  border-color: rgba(108, 184, 255, .4);
  color: var(--text-strong);
  transform: translateY(-1px);
}

body[data-theme="v2"] .quick-action-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ──────────────────────────────────────────────────────────────
   Grids
   ────────────────────────────────────────────────────────────── */
body[data-theme="v2"] .grid-1 { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
body[data-theme="v2"] .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
body[data-theme="v2"] .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
body[data-theme="v2"] .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }

@media (max-width: 1100px) {
  body[data-theme="v2"] .grid-3 { grid-template-columns: repeat(2, 1fr); }
  body[data-theme="v2"] .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  body[data-theme="v2"] .grid-2,
  body[data-theme="v2"] .grid-3,
  body[data-theme="v2"] .grid-4 { grid-template-columns: 1fr; }
}

/* Replace the inline-styled <div style="height:18px"></div> spacers
   with our spacing scale. The v1 spacer divs still render, but we
   neutralize them and let grid + section spacing carry the rhythm. */
body[data-theme="v2"] #page-dashboard > div[style*="height:18px"] {
  height: var(--space-3) !important;
}

/* ──────────────────────────────────────────────────────────────
   Activity feed
   ────────────────────────────────────────────────────────────── */
body[data-theme="v2"] .activity-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-height: 340px;
  overflow: auto;
}

body[data-theme="v2"] .activity-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--panel-2);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-out);
}

body[data-theme="v2"] .activity-item:hover {
  background: var(--panel-3);
}

body[data-theme="v2"] .activity-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--panel-3), var(--panel-2));
  border: var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  flex-shrink: 0;
}

body[data-theme="v2"] .activity-content {
  flex: 1;
  min-width: 0;
}

body[data-theme="v2"] .activity-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  color: var(--text-strong);
  line-height: var(--leading-tight);
}

body[data-theme="v2"] .activity-meta {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: var(--leading-normal);
  margin-top: 2px;
}

body[data-theme="v2"] .activity-status {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

body[data-theme="v2"] .activity-status.active   { background: var(--green); box-shadow: 0 0 8px rgba(47, 223, 163, .5); }
body[data-theme="v2"] .activity-status.inactive { background: var(--red);   box-shadow: 0 0 8px rgba(243, 124, 145, .4); }

body[data-theme="v2"] .activity-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-4);
  color: var(--muted);
  font-size: var(--text-sm);
}

body[data-theme="v2"] .activity-empty-icon {
  font-size: var(--text-2xl);
  opacity: .5;
}

/* ──────────────────────────────────────────────────────────────
   Metric cards emitted by components/cards.js → metricCard()
   ────────────────────────────────────────────────────────────── */
body[data-theme="v2"] .metric-card {
  background: var(--panel);
  border: var(--border-subtle);
  border-radius: var(--radius);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}

body[data-theme="v2"] .metric-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
}

body[data-theme="v2"] .metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

body[data-theme="v2"] .metric-icon {
  font-size: var(--text-xl);
  opacity: .9;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--panel-3);
  border: var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}

body[data-theme="v2"] .metric-value {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  line-height: var(--leading-tight);
}

body[data-theme="v2"] .metric-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
}

body[data-theme="v2"] .metric-card .meta {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: var(--leading-normal);
  margin-top: var(--space-1);
}

/* ──────────────────────────────────────────────────────────────
   Analytics list emitted by components/cards.js → analyticsCard()
   ────────────────────────────────────────────────────────────── */
body[data-theme="v2"] .analytics-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

body[data-theme="v2"] .bar-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

body[data-theme="v2"] .bar-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

body[data-theme="v2"] .bar-meta strong {
  color: var(--text-strong);
  font-weight: var(--weight-bold);
}

body[data-theme="v2"] .bar-track {
  height: 6px;
  background: var(--bg-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

body[data-theme="v2"] .bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--blue-2));
  border-radius: var(--radius-pill);
  transition: width var(--duration-slow) var(--ease-out);
}

/* ──────────────────────────────────────────────────────────────
   Mini-notes (error / info inline blocks)
   ────────────────────────────────────────────────────────────── */
body[data-theme="v2"] .mini-note {
  padding: var(--space-3) var(--space-4);
  background: var(--panel-2);
  border: var(--border-subtle);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

body[data-theme="v2"] .mini-note.restricted {
  border-left-color: var(--red);
  background: rgba(243, 124, 145, .08);
}

/* ──────────────────────────────────────────────────────────────
   Export button
   ────────────────────────────────────────────────────────────── */
body[data-theme="v2"] .export-btn {
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-3);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════════
   COMMAND CENTRE — Dashboard page upgrade
   HUD-glass panels, chrome-gradient headings, glow on interact.
   Scoped to body[data-theme="v2"] (already the selector above).
   ════════════════════════════════════════════════════════════════ */

/* ──────────── Hero → HUD panel ──────────── */
body[data-theme="v2"] .hero {
  background:
    linear-gradient(135deg, rgba(108, 184, 255, .08), rgba(47, 223, 163, .04) 60%, transparent),
    linear-gradient(180deg, rgba(16, 28, 52, .85), rgba(8, 18, 38, .85));
  border: 1px solid rgba(108, 184, 255, .25);
  box-shadow: 0 0 32px rgba(108, 184, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Hero title → chrome gradient */
body[data-theme="v2"] .hero-title {
  background: linear-gradient(180deg, #f4f8ff 0%, #c9d6ea 40%, #8ab4e0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(108, 184, 255, .2));
}

body[data-theme="v2"] .section-kicker {
  color: var(--blue-2);
  text-shadow: 0 0 8px rgba(108, 184, 255, .4);
}

body[data-theme="v2"] .hero-side-card {
  background: rgba(12, 22, 42, .72);
  border: 1px solid rgba(108, 184, 255, .18);
  box-shadow: 0 0 14px rgba(108, 184, 255, .06);
  transition: border-color .22s, box-shadow .22s;
}

body[data-theme="v2"] .hero-side-card:hover {
  border-color: rgba(108, 184, 255, .42);
  box-shadow: 0 0 24px rgba(108, 184, 255, .18);
}

body[data-theme="v2"] .hero-side-card.highlight {
  background: linear-gradient(135deg, rgba(108, 184, 255, .14), rgba(47, 223, 163, .06));
  border-color: rgba(108, 184, 255, .35);
  box-shadow: 0 0 20px rgba(108, 184, 255, .14);
}

body[data-theme="v2"] .hero-side-card .value {
  background: linear-gradient(180deg, #f4f8ff, #8ab4e0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ──────────── Metric cards → HUD glass ──────────── */
body[data-theme="v2"] .metric-card {
  background: linear-gradient(180deg, rgba(16, 28, 52, .82), rgba(8, 18, 38, .82));
  border: 1px solid rgba(108, 184, 255, .18);
  box-shadow: 0 0 18px rgba(108, 184, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}

body[data-theme="v2"] .metric-card::after {
  content: '';
  position: absolute;
  top: 0; left: 16%; right: 16%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(108, 184, 255, .35), transparent);
}

body[data-theme="v2"] .metric-card:hover {
  transform: translateY(-3px);
  border-color: rgba(108, 184, 255, .42);
  box-shadow: 0 0 32px rgba(108, 184, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .06);
}

body[data-theme="v2"] .metric-value {
  background: linear-gradient(180deg, #f4f8ff, #8ab4e0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

body[data-theme="v2"] .metric-icon {
  background: rgba(8, 18, 38, .65);
  border: 1px solid rgba(108, 184, 255, .28);
  color: var(--blue-2);
  box-shadow: 0 0 10px rgba(108, 184, 255, .15);
}

/* ──────────── Activity items → glass ──────────── */
body[data-theme="v2"] .activity-item {
  background: rgba(12, 22, 42, .65);
  border: 1px solid rgba(108, 184, 255, .12);
  transition: background .14s, border-color .14s, box-shadow .14s;
}

body[data-theme="v2"] .activity-item:hover {
  background: rgba(108, 184, 255, .08);
  border-color: rgba(108, 184, 255, .3);
  box-shadow: 0 0 14px rgba(108, 184, 255, .12);
}

/* ──────────── Quick action buttons → glowing ──────────── */
body[data-theme="v2"] .quick-action-btn {
  background: rgba(8, 18, 38, .65);
  border: 1px solid rgba(108, 184, 255, .22);
  transition: all .22s;
}

body[data-theme="v2"] .quick-action-btn:hover {
  background: rgba(108, 184, 255, .15);
  border-color: rgba(108, 184, 255, .55);
  color: var(--text-strong);
  box-shadow: 0 0 18px rgba(108, 184, 255, .25);
  transform: translateY(-2px);
}

/* ──────────── Bar tracks → Command Centre colours ──────────── */
body[data-theme="v2"] .bar-track {
  background: rgba(8, 18, 38, .7);
  border: 1px solid rgba(108, 184, 255, .12);
}

body[data-theme="v2"] .bar-fill {
  background: linear-gradient(90deg, #1a6fd8, #6cb8ff, #93dcff);
  box-shadow: 0 0 10px rgba(108, 184, 255, .4);
}

/* ──────────── Global card → HUD glass (primitives override) ──────────── */
body[data-theme="v2"] .card {
  background: linear-gradient(180deg, rgba(16, 28, 52, .82), rgba(8, 18, 38, .82));
  border: 1px solid rgba(108, 184, 255, .18);
  box-shadow: 0 0 18px rgba(108, 184, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body[data-theme="v2"] .card-elevated,
body[data-theme="v2"] .card.hero-side-card.highlight {
  border-color: rgba(108, 184, 255, .32);
  box-shadow: 0 0 28px rgba(108, 184, 255, .14);
}

body[data-theme="v2"] .card-title {
  background: linear-gradient(180deg, #f4f8ff 0%, #c9d6ea 50%, #8ab4e0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ──────────── Tables → HUD styling ──────────── */
body[data-theme="v2"] table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

body[data-theme="v2"] thead {
  background: rgba(8, 18, 38, .7);
  border-bottom: 1px solid rgba(108, 184, 255, .22);
}

body[data-theme="v2"] thead th {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--blue-2);
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

body[data-theme="v2"] tbody tr {
  border-bottom: 1px solid rgba(157, 189, 255, .08);
  transition: background .14s;
}

body[data-theme="v2"] tbody tr:hover {
  background: rgba(108, 184, 255, .06);
}

body[data-theme="v2"] tbody td {
  padding: var(--space-3) var(--space-4);
  color: var(--text-secondary);
}

body[data-theme="v2"] tbody td:first-child {
  color: var(--text-strong);
  font-weight: 600;
}

/* ──────────── Modals → HUD glass ──────────── */
body[data-theme="v2"] .modal-overlay,
body[data-theme="v2"] .modal-backdrop {
  background: rgba(2, 6, 16, .78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body[data-theme="v2"] .modal,
body[data-theme="v2"] .modal-body,
body[data-theme="v2"] .dialog {
  background: linear-gradient(180deg, rgba(16, 28, 52, .96), rgba(8, 18, 38, .96));
  border: 1px solid rgba(108, 184, 255, .28);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 40px rgba(108, 184, 255, .18);
}

body[data-theme="v2"] .modal-header,
body[data-theme="v2"] .dialog-header {
  border-bottom: 1px solid rgba(108, 184, 255, .18);
}

body[data-theme="v2"] .modal-footer,
body[data-theme="v2"] .dialog-footer {
  border-top: 1px solid rgba(108, 184, 255, .18);
}

/* ──────────── Status chips / badges → glow ──────────── */
body[data-theme="v2"] .status-chip,
body[data-theme="v2"] .badge {
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

body[data-theme="v2"] .status-chip.active,
body[data-theme="v2"] .badge.active,
body[data-theme="v2"] .badge.success {
  background: rgba(47, 223, 163, .15);
  color: var(--positive-soft);
  border: 1px solid rgba(47, 223, 163, .3);
  box-shadow: 0 0 10px rgba(47, 223, 163, .2);
}

body[data-theme="v2"] .status-chip.warning,
body[data-theme="v2"] .badge.warning {
  background: rgba(245, 199, 115, .15);
  color: var(--warning-soft);
  border: 1px solid rgba(245, 199, 115, .3);
  box-shadow: 0 0 10px rgba(245, 199, 115, .2);
}

body[data-theme="v2"] .status-chip.danger,
body[data-theme="v2"] .badge.danger,
body[data-theme="v2"] .badge.error {
  background: rgba(243, 124, 145, .15);
  color: var(--danger-soft);
  border: 1px solid rgba(243, 124, 145, .3);
  box-shadow: 0 0 10px rgba(243, 124, 145, .2);
}

/* ──────────── Section headings → kicker + chrome title ──────────── */
body[data-theme="v2"] .section-title,
body[data-theme="v2"] .card-head h3 {
  background: linear-gradient(180deg, #f4f8ff, #c9d6ea);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ──────────── Skeleton loading → Command Centre pulse ──────────── */
body[data-theme="v2"] .skeleton {
  background: linear-gradient(90deg,
    rgba(12, 22, 42, .6) 25%,
    rgba(108, 184, 255, .08) 50%,
    rgba(12, 22, 42, .6) 75%
  );
  background-size: 200% 100%;
  animation: cc-skeleton-shimmer 1.8s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes cc-skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ──────────── Toast notifications → HUD glass ──────────── */
body[data-theme="v2"] .toast {
  background: linear-gradient(180deg, rgba(16, 28, 52, .94), rgba(8, 18, 38, .94));
  border: 1px solid rgba(108, 184, 255, .28);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .45), 0 0 24px rgba(108, 184, 255, .15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ──────────── KPI cards (management dashboard) ──────────── */
body[data-theme="v2"] .kpi-card {
  background: linear-gradient(180deg, rgba(16, 28, 52, .82), rgba(8, 18, 38, .82));
  border: 1px solid rgba(108, 184, 255, .18);
  border-radius: var(--radius);
  box-shadow: 0 0 18px rgba(108, 184, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
  transition: border-color .22s, box-shadow .22s, transform .22s;
}

body[data-theme="v2"] .kpi-card::before {
  background: linear-gradient(135deg, rgba(108, 184, 255, .06), transparent);
}

body[data-theme="v2"] .kpi-card:hover {
  transform: translateY(-2px);
  border-color: rgba(108, 184, 255, .42);
  box-shadow: 0 0 28px rgba(108, 184, 255, .18);
}

body[data-theme="v2"] .kpi-value {
  background: linear-gradient(180deg, #f4f8ff, #8ab4e0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

body[data-theme="v2"] .kpi-icon {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(108, 184, 255, .22);
  box-shadow: 0 0 8px rgba(108, 184, 255, .12);
}

body[data-theme="v2"] .kpi-trend.up   { color: var(--positive-soft); text-shadow: 0 0 8px rgba(47, 223, 163, .4); }
body[data-theme="v2"] .kpi-trend.down { color: var(--danger-soft); text-shadow: 0 0 8px rgba(243, 124, 145, .4); }
body[data-theme="v2"] .kpi-trend.flat { color: var(--muted); }

/* ──────────── Chart cards ──────────── */
body[data-theme="v2"] .chart-card {
  background: linear-gradient(180deg, rgba(16, 28, 52, .82), rgba(8, 18, 38, .82));
  border: 1px solid rgba(108, 184, 255, .18);
  border-radius: var(--radius);
  box-shadow: 0 0 18px rgba(108, 184, 255, .06);
}

body[data-theme="v2"] .chart-legend {
  color: var(--muted);
  font-size: var(--text-xs);
}

/* ──────────── Page header ──────────── */
body[data-theme="v2"] .page-head {
  margin-bottom: var(--space-6);
}

body[data-theme="v2"] .page-head h1 {
  background: linear-gradient(180deg, #f4f8ff 0%, #c9d6ea 50%, #8ab4e0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
}

body[data-theme="v2"] .page-head p {
  color: var(--muted);
  font-size: var(--text-sm);
}

body[data-theme="v2"] .page-head-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ──────────── Table wrap + pagination ──────────── */
body[data-theme="v2"] .table-wrap {
  background: linear-gradient(180deg, rgba(16, 28, 52, .82), rgba(8, 18, 38, .82));
  border: 1px solid rgba(108, 184, 255, .18);
  border-radius: var(--radius);
  overflow: auto;
}

body[data-theme="v2"] .table-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid rgba(108, 184, 255, .12);
}

body[data-theme="v2"] .table-pagination button {
  background: rgba(8, 18, 38, .65);
  border: 1px solid rgba(108, 184, 255, .22);
  color: var(--text-secondary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: all .14s;
}

body[data-theme="v2"] .table-pagination button:hover {
  background: rgba(108, 184, 255, .12);
  border-color: rgba(108, 184, 255, .42);
  color: var(--text-strong);
}

body[data-theme="v2"] .table-pagination button.active,
body[data-theme="v2"] .table-pagination button[aria-current] {
  background: rgba(108, 184, 255, .22);
  border-color: rgba(108, 184, 255, .55);
  color: var(--text-strong);
  box-shadow: 0 0 12px rgba(108, 184, 255, .22);
}

/* ──────────── Permission cards ──────────── */
body[data-theme="v2"] .permission-card {
  background: rgba(12, 22, 42, .72);
  border: 1px solid rgba(108, 184, 255, .15);
  border-radius: var(--radius-sm);
  transition: border-color .22s, box-shadow .22s;
}

body[data-theme="v2"] .permission-card:hover {
  border-color: rgba(108, 184, 255, .35);
  box-shadow: 0 0 14px rgba(108, 184, 255, .12);
}

/* ──────────── Bucket pills (conversion) ──────────── */
body[data-theme="v2"] .bucket-pill.excellent { background: rgba(47, 223, 163, .15); color: var(--positive-soft); border: 1px solid rgba(47, 223, 163, .3); }
body[data-theme="v2"] .bucket-pill.good      { background: rgba(108, 184, 255, .15); color: var(--info-soft); border: 1px solid rgba(108, 184, 255, .3); }
body[data-theme="v2"] .bucket-pill.fair      { background: rgba(245, 199, 115, .15); color: var(--warning-soft); border: 1px solid rgba(245, 199, 115, .3); }
body[data-theme="v2"] .bucket-pill.poor      { background: rgba(243, 124, 145, .15); color: var(--danger-soft); border: 1px solid rgba(243, 124, 145, .3); }

/* ──────────── Conversion preview bars ──────────── */
body[data-theme="v2"] .row-bar.excellent { background: linear-gradient(90deg, rgba(47, 223, 163, .6), var(--green)); }
body[data-theme="v2"] .row-bar.fair      { background: linear-gradient(90deg, rgba(245, 199, 115, .6), var(--amber)); }
body[data-theme="v2"] .row-bar.poor      { background: linear-gradient(90deg, rgba(243, 124, 145, .6), var(--red)); }

/* ──────────── General form field overrides (page context) ──────────── */
body[data-theme="v2"] .page .field input,
body[data-theme="v2"] .page .field select,
body[data-theme="v2"] .page .field textarea {
  background: rgba(8, 18, 38, .55);
  border: 1px solid rgba(108, 184, 255, .18);
  color: var(--text-strong);
  border-radius: var(--radius-sm);
  transition: border-color .14s, box-shadow .14s;
}

body[data-theme="v2"] .page .field input:focus,
body[data-theme="v2"] .page .field select:focus,
body[data-theme="v2"] .page .field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(108, 184, 255, .1), 0 0 18px rgba(108, 184, 255, .15);
}

/* ──────────── Buttons in page context → match Command Centre ──────────── */
body[data-theme="v2"] .page .btn,
body[data-theme="v2"] .page button.btn-primary {
  background: linear-gradient(135deg, #1a6fd8, #3a8ff5);
  border: none;
  color: #fff;
  font-weight: 700;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 18px rgba(26, 111, 216, .3);
  transition: transform .14s, box-shadow .14s, filter .14s;
}

body[data-theme="v2"] .page .btn:hover,
body[data-theme="v2"] .page button.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 26px rgba(26, 111, 216, .5);
  filter: brightness(1.08);
}

body[data-theme="v2"] .page .btn-secondary {
  background: rgba(8, 18, 38, .65);
  border: 1px solid rgba(108, 184, 255, .28);
  color: var(--text-secondary);
  box-shadow: none;
}

body[data-theme="v2"] .page .btn-secondary:hover {
  background: rgba(108, 184, 255, .12);
  border-color: rgba(108, 184, 255, .55);
  color: var(--text-strong);
  box-shadow: 0 0 14px rgba(108, 184, 255, .22);
  filter: none;
}