/* ============================================================
   RSAT Executive Performance Dashboard — Main Stylesheet
   Theme: Dark Navy Sidebar · White Cards · Light Gray BG
   Cascade Accents: Test=Blue, Treat=Green, Prevent=Orange, Retain=Purple
   ============================================================ */

/* ── Google Fonts ────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap');

/* ── CSS Variables ───────────────────────────────────────────────────────── */
:root {
  /* Sidebar palette */
  --navy-900: #0D1B2A;
  --navy-800: #112236;
  --navy-700: #172F47;
  --navy-600: #1E3D58;
  --navy-500: #2B5278;
  --navy-text: #A8C0D6;
  --navy-text-muted: #5A7B96;

  /* Content palette */
  --bg-page: #F5F7FB;
  --bg-card: #FFFFFF;
  --bg-header: #FFFFFF;
  --border: #E2E8F0;
  --border-light: #F1F5F9;

  /* Text */
  --text-primary: #1E293B;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;

  /* Cascade accent — TEST */
  --test-600: #1D4ED8;
  --test-500: #2563EB;
  --test-400: #3B82F6;
  --test-100: #DBEAFE;
  --test-50:  #EFF6FF;

  /* Cascade accent — TREAT */
  --treat-600: #047857;
  --treat-500: #059669;
  --treat-400: #10B981;
  --treat-100: #D1FAE5;
  --treat-50:  #ECFDF5;

  /* Cascade accent — PREVENT */
  --prevent-600: #B45309;
  --prevent-500: #D97706;
  --prevent-400: #F59E0B;
  --prevent-100: #FEF3C7;
  --prevent-50:  #FFFBEB;

  /* Cascade accent — RETAIN */
  --retain-600: #6D28D9;
  --retain-500: #7C3AED;
  --retain-400: #8B5CF6;
  --retain-100: #EDE9FE;
  --retain-50:  #F5F3FF;

  /* Status / semantic */
  --red-500: #EF4444;
  --red-100: #FEE2E2;

  /* Spacing */
  --sidebar-width: 240px;
  --content-pad: 24px;
  --card-radius: 14px;
  --header-h: 72px;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-card: 0 2px 8px rgba(15,27,42,.07);

  /* Transitions */
  --transition: 0.2s ease;
}

/* ── Reset / Base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; }

body {
  font-family: 'Prompt', 'Noto Sans Thai', sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
select { font-family: inherit; }

/* ── App Layout ──────────────────────────────────────────────────────────── */
/* Sidebar is position:fixed so it's removed from flow.
   main-content uses margin-left to offset itself. No grid needed. */
.app-layout {
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
  background: var(--navy-900);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  z-index: 100;
  overflow: hidden;
  transition: transform var(--transition), width var(--transition);
}

/* Brand */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--navy-700);
}
.brand-logo {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background: transparent;
}
.brand-logo-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  image-rendering: auto;
}
.brand-title {
  font-size: 1.1rem; font-weight: 700;
  color: #fff; letter-spacing: .5px;
}
.brand-subtitle {
  font-size: .72rem; font-weight: 400;
  color: var(--navy-text-muted); margin-top: 1px;
}

/* Nav */
.sidebar-nav {
  flex: 1;
  padding: 16px 10px;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--navy-600); border-radius: 2px; }

.nav-section-label {
  font-size: .65rem; font-weight: 600;
  color: var(--navy-text-muted);
  text-transform: uppercase; letter-spacing: 1.2px;
  padding: 12px 10px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--navy-text);
  font-size: .875rem; font-weight: 400;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  margin-bottom: 2px;
}
.nav-item:hover { background: var(--navy-700); color: #fff; }
.nav-item.active {
  background: linear-gradient(90deg, var(--navy-600), var(--navy-700));
  color: #fff; font-weight: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.nav-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }
.nav-label { white-space: nowrap; }

/* Footer */
.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--navy-700);
}
.version-text { font-size: .72rem; color: var(--navy-text-muted); }
.version-num  { font-size: .7rem;  color: var(--navy-text-muted); margin-top: 2px; }

/* ── Main Content ────────────────────────────────────────────────────────── */
.main-content {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  min-width: 0;           /* prevent overflow blowout */
  overflow-x: hidden;
}

/* ── Sidebar Toggle (mobile) ─────────────────────────────────────────────── */
.sidebar-toggle {
  display: none;
  position: fixed; top: 14px; left: 14px;
  z-index: 200;
  width: 40px; height: 40px;
  background: var(--navy-800);
  color: #fff; border-radius: 8px;
  font-size: 18px;
  box-shadow: var(--shadow-md);
}

/* ── Top Header ──────────────────────────────────────────────────────────── */
.top-header {
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--content-pad);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.header-left {
  flex: 1;
  min-width: 0;        /* allow shrink so right side isn't pushed off */
}
.dashboard-title {
  font-size: 1.1rem; font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-subtitle {
  font-size: .78rem; color: var(--text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-right { flex-shrink: 0; }
.last-update { text-align: right; }
.update-label {
  font-size: .65rem; text-transform: uppercase;
  letter-spacing: .8px; color: var(--text-muted); font-weight: 600;
}
.update-value {
  font-size: .82rem; font-weight: 500;
  color: var(--text-secondary); margin-top: 2px;
  white-space: nowrap;
}

/* ── Filter Bar ──────────────────────────────────────────────────────────── */
.filter-bar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 10px var(--content-pad);
  display: flex;
  align-items: flex-end;   /* align labels + selects as a unit */
  flex-wrap: nowrap;        /* single row on desktop */
  gap: 12px;
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
  overflow: visible;
  flex-shrink: 0;
}
/* Hide horizontal scrollbar but keep functionality */
.filter-bar::-webkit-scrollbar { height: 3px; }
.filter-bar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;           /* never collapse filter groups */
}
.filter-label {
  font-size: .62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .8px;
  color: var(--text-muted);
  white-space: nowrap;
}
.filter-select {
  height: 34px; padding: 0 28px 0 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-page);
  color: var(--text-primary);
  font-size: .82rem; font-weight: 400;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
  min-width: 150px;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filter-select[multiple] {
  display: none;
}
.multi-select { position: relative; min-width: 150px; }
.multi-select-trigger {
  width: 100%; min-height: 34px; padding: 7px 30px 7px 10px;
  border: 1.5px solid var(--border); border-radius: 8px;
  background: var(--bg-page); color: var(--text-secondary);
  font: inherit; font-size: .82rem; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  position: relative;
}
.multi-select-trigger::after {
  content: ''; position: absolute; right: 10px; top: 12px;
  width: 8px; height: 8px; border-right: 2px solid var(--text-secondary);
  border-bottom: 2px solid var(--text-secondary); transform: rotate(45deg);
}
.multi-select-trigger.has-selection { color: var(--text-primary); }
.multi-select-trigger:focus { outline: none; border-color: var(--test-400); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.multi-select-menu {
  display: none; position: absolute; top: calc(100% + 5px); left: 0; right: 0;
  z-index: 80; max-height: 230px; overflow-y: auto; padding: 5px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-md);
}
.multi-select.open .multi-select-menu { display: block; }
.multi-select-option {
  display: flex; align-items: center; gap: 8px; padding: 7px 6px;
  border-radius: 5px; color: var(--text-primary); font-size: .8rem; cursor: pointer;
}
.multi-select-option:hover { background: var(--bg-page); }
.multi-select-option input { accent-color: var(--test-500); }
}
.filter-select:focus {
  outline: none;
  border-color: var(--test-400);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.filter-select:hover { border-color: var(--text-muted); }

.filter-actions { margin-left: auto; flex-shrink: 0; }
.loading-indicator {
  display: none; align-items: center; gap: 8px;
  color: var(--text-secondary); font-size: .82rem;
}
.loading-indicator.visible { display: flex; }
.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--test-500);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Dashboard Body ──────────────────────────────────────────────────────── */
.dashboard-body {
  flex: 1;
  padding: var(--content-pad);
  display: flex; flex-direction: column; gap: 20px;
}

/* ── Section Header ──────────────────────────────────────────────────────── */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.section-header h2 {
  font-size: 1rem; font-weight: 600;
  color: var(--text-primary);
}

/* ── KPI Cards ───────────────────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.kpi-card {
  background: var(--bg-card);
  border-radius: var(--card-radius);
  padding: 18px 18px 14px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.kpi-card-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}
.kpi-card.test-card  .kpi-card-accent { background: var(--test-500); }
.kpi-card.treat-card .kpi-card-accent { background: var(--treat-500); }
.kpi-card.prevent-card .kpi-card-accent { background: var(--prevent-500); }
.kpi-card.retain-card  .kpi-card-accent { background: var(--retain-500); }

.kpi-label {
  font-size: .78rem; color: var(--text-secondary);
  font-weight: 400; margin-bottom: 4px;
}
.kpi-value {
  font-size: 1.7rem; font-weight: 700;
  color: var(--text-primary); line-height: 1.1;
  margin-bottom: 6px;
}
.kpi-sub {
  font-size: .78rem; color: var(--text-secondary);
  display: flex; align-items: center; gap: 4px;
}
.kpi-sub-pct {
  font-weight: 600;
  padding: 1px 6px; border-radius: 4px;
}
.test-card    .kpi-sub-pct { background: var(--test-50);    color: var(--test-600); }
.treat-card   .kpi-sub-pct { background: var(--treat-50);   color: var(--treat-600); }
.prevent-card .kpi-sub-pct { background: var(--prevent-50); color: var(--prevent-600); }
.retain-card  .kpi-sub-pct { background: var(--retain-50);  color: var(--retain-600); }

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, #f0f4f8 25%, #e2e8f0 50%, #f0f4f8 75%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 6px;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-text  { height: 14px; margin-bottom: 8px; }
.skeleton-value { height: 32px; width: 70%; margin-bottom: 8px; }

/* ── Cascade Section ─────────────────────────────────────────────────────── */
.cascade-section {
  background: var(--bg-card);
  border-radius: var(--card-radius);
  padding: 20px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
}
.cascade-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.cascade-column {
  border-radius: 10px;
  padding: 16px;
  border: 1px solid var(--border);
}
.cascade-column.cascade-test    { border-top: 3px solid var(--test-500);    background: var(--test-50); }
.cascade-column.cascade-treat   { border-top: 3px solid var(--treat-500);   background: var(--treat-50); }
.cascade-column.cascade-prevent { border-top: 3px solid var(--prevent-500); background: var(--prevent-50); }
.cascade-column.cascade-retain  { border-top: 3px solid var(--retain-500);  background: var(--retain-50); }

.cascade-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.cascade-header h3 {
  font-size: .88rem; font-weight: 600;
  color: var(--text-primary);
}
.cascade-badge {
  padding: 3px 9px;
  border-radius: 20px;
  font-size: .6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
  flex-shrink: 0;
}
.badge-test    { background: var(--test-500);    color: #fff; }
.badge-treat   { background: var(--treat-500);   color: #fff; }
.badge-prevent { background: var(--prevent-500); color: #fff; }
.badge-retain  { background: var(--retain-500);  color: #fff; }

/* Cascade Step */
.cascade-step {
  background: var(--bg-card);
  border-radius: 9px;
  padding: 12px 14px;
  margin-bottom: 4px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}
.cascade-step-label {
  font-size: .72rem; color: var(--text-secondary);
  margin-bottom: 3px;
}
.cascade-step-value {
  font-size: 1.25rem; font-weight: 700;
  color: var(--text-primary);
}
/* One compact line: arrow + precise % readout. The step-bar below each value
   already encodes this ratio visually — this text isn't a second badge competing
   with it, just the exact number for anyone who wants it. */
.cascade-arrow {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 3px 0;
  color: var(--text-muted); font-size: .78rem;
}
.cascade-conversion {
  font-weight: 600;
  color: var(--text-secondary);
}

/* Progress bar in retain */
.retain-progress-wrap { margin-top: 6px; }
.retain-bar-label {
  display: flex; justify-content: space-between;
  font-size: .7rem; margin-bottom: 3px;
}
.retain-bar-label span:first-child { color: var(--text-secondary); }
.retain-bar-label span:last-child  { color: var(--retain-600); font-weight: 600; }
.retain-bar-bg {
  background: var(--retain-100);
  border-radius: 4px; height: 6px; overflow: hidden;
}
.retain-bar-fill {
  background: var(--retain-500);
  height: 100%; border-radius: 4px;
  transition: width 0.5s ease;
}
/* Darkest = ≥1 visit (the widest, outermost group), lightest = ≥3 visits
   (the narrowest, innermost subset) — shade alone shows the nesting. */
.retain-bar-fill.tier-1 { background: var(--retain-600); }
.retain-bar-fill.tier-2 { background: var(--retain-500); }
.retain-bar-fill.tier-3 { background: var(--retain-400); }

/* ── Chart Row ───────────────────────────────────────────────────────────── */
.charts-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}
.chart-section {
  background: var(--bg-card);
  border-radius: var(--card-radius);
  padding: 20px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
}
.chart-wrapper { position: relative; }
.chart-trend-wrapper { height: 300px; }
.chart-donut-wrapper { height: 280px; }
.chart-age-wrapper   { height: 280px; }
.chart-art-timing-wrapper { height: 300px; }

/* Age chart toggle */
.chart-toggle {
  display: flex; gap: 6px;
}
.toggle-btn {
  padding: 5px 12px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-size: .76rem; font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-page);
  transition: all var(--transition);
}
.toggle-btn:hover { border-color: var(--test-400); color: var(--test-600); }
.toggle-btn.active {
  background: var(--test-500); color: #fff;
  border-color: var(--test-500);
}

/* ── Province Table ──────────────────────────────────────────────────────── */
.table-section {
  background: var(--bg-card);
  border-radius: var(--card-radius);
  padding: 20px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
}
.table-wrapper { overflow-x: auto; }
.data-table {
  width: 100%; border-collapse: collapse;
  font-size: .85rem;
}
.data-table thead tr {
  background: var(--bg-page);
}
.data-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-muted);
  border-bottom: 1.5px solid var(--border);
  white-space: nowrap;
}
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { color: var(--test-600); }
.data-table th.sort-asc  .sort-icon::after { content: ' ▲'; font-size: .65rem; }
.data-table th.sort-desc .sort-icon::after { content: ' ▼'; font-size: .65rem; }
.sort-icon { color: var(--text-muted); }

.data-table tbody tr {
  border-bottom: 1px solid var(--border-light);
  transition: background var(--transition);
}
.data-table tbody tr:hover { background: var(--bg-page); }
.data-table td {
  padding: 10px 14px;
  color: var(--text-primary);
}
.data-table td.province-name { font-weight: 500; }
.data-table td.num-cell { text-align: right; }

/* No data row */
.no-data-row td {
  text-align: center; padding: 32px;
  color: var(--text-muted); font-style: italic;
}

/* ── Micro-interactions / Flourishes ─────────────────────────────────────── */

/* Staggered entrance for cards & sections */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.fade-in-up {
  animation: fadeInUp .5s cubic-bezier(.21,.9,.32,1) both;
}

/* Value "pop" when a number updates */
@keyframes valuePop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.value-pop { display: inline-block; animation: valuePop .4s cubic-bezier(.34,1.56,.64,1); }

/* Brand logo playful hover */
.brand-logo { transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.sidebar-brand:hover .brand-logo { transform: scale(1.06); }

/* Nav icon bounce on hover */
.nav-icon { transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
.nav-item:hover .nav-icon { transform: scale(1.22) rotate(-6deg); }
.nav-item.active .nav-icon { animation: valuePop .4s cubic-bezier(.34,1.56,.64,1); }

/* Ripple effect (spawned by JS on click) */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  transform: scale(0);
  animation: rippleAnim .55s ease-out forwards;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(2.6); opacity: 0; }
}

/* Toggle / nav-item need relative + clipped for ripple */
.nav-item, .toggle-btn { position: relative; overflow: hidden; }

/* Button press bounce */
.toggle-btn:active { animation: btnBounce .3s ease; }
@keyframes btnBounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(.93); }
  100% { transform: scale(1); }
}

/* KPI card icon-accent shimmer sweep on hover */
.kpi-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%);
  background-size: 250% 250%;
  background-position: 130% 130%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.kpi-card:hover::after {
  opacity: 1;
  animation: sweep .9s ease forwards;
}
@keyframes sweep {
  from { background-position: 130% 130%; }
  to   { background-position: -30% -30%; }
}

/* Cascade step hover lift */
.cascade-step { transition: transform var(--transition), box-shadow var(--transition); }
.cascade-step:hover { transform: translateY(-2px) scale(1.015); box-shadow: var(--shadow-md); }

/* Retain progress bar: animated fill sweep highlight */
.retain-bar-fill {
  position: relative;
  overflow: hidden;
}
.retain-bar-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation: barShine 1.6s ease-in-out infinite;
}
@keyframes barShine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Sort icon: playful rotate + bounce on click */
.sort-icon { display: inline-block; transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.data-table th.sortable:active .sort-icon { transform: scale(1.3) rotate(180deg); }

/* Table rows: gentle slide-in on (re)render */
@keyframes rowIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.data-table tbody tr { animation: rowIn .3s ease both; }

/* Last-update value: highlight pulse when refreshed */
@keyframes pulseHighlight {
  0%   { background: rgba(37,99,235,.18); box-shadow: 0 0 0 4px rgba(37,99,235,.08); }
  100% { background: transparent; box-shadow: 0 0 0 0 rgba(37,99,235,0); }
}
.update-value.pulse { border-radius: 5px; animation: pulseHighlight 1.1s ease; }

/* Loading spinner: add a little wobble for personality */
.spinner { animation: spin .7s linear infinite, wobble 1.4s ease-in-out infinite; }
@keyframes wobble {
  0%, 100% { border-top-color: var(--test-500); }
  50%      { border-top-color: var(--retain-500); }
}

/* Toast notification */
.flair-toast {
  position: fixed;
  bottom: 22px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--navy-900);
  color: #fff;
  padding: 10px 20px;
  border-radius: 30px;
  font-size: .82rem; font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  display: flex; align-items: center; gap: 8px;
  opacity: 0;
  pointer-events: none;
  z-index: 500;
  transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.flair-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.flair-toast-icon {
  display: inline-block;
  animation: valuePop .5s cubic-bezier(.34,1.56,.64,1);
}

@media (prefers-reduced-motion: reduce) {
  .fade-in-up, .value-pop, .kpi-card::after, .retain-bar-fill::after,
  .data-table tbody tr, .spinner, .ripple, .toggle-btn:active,
  .nav-item .nav-icon, .flair-toast { animation: none !important; transition: none !important; }
}

/* ╔═══════════════════════════════════════════════════════════════╗
   ║              PREMIUM VISUAL ENHANCEMENTS                     ║
   ╚═══════════════════════════════════════════════════════════════╝ */

/* ── Header gradient cascade bar ─────────────────────────────────────────── */
.top-header {
  position: relative;   /* keeps existing sticky, adds pseudo context */
  border-bottom: none;
}
.top-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    var(--test-500) 0%, var(--test-400) 24%,
    var(--treat-500) 26%, var(--treat-400) 49%,
    var(--prevent-500) 51%, var(--prevent-400) 74%,
    var(--retain-500) 76%, var(--retain-400) 100%
  );
}

/* ── Sidebar premium glow on logo ─────────────────────────────────────────── */
.brand-logo {
  box-shadow: 0 4px 14px rgba(2, 11, 36, .28);
}
.sidebar-brand {
  background: linear-gradient(180deg, rgba(37,99,235,.07) 0%, transparent 100%);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 60%;
  background: var(--test-400);
  border-radius: 0 3px 3px 0;
}
.nav-item { position: relative; }

/* ── Entry animations ─────────────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}

.kpi-card {
  animation: fadeInUp .5s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(var(--card-i, 0) * 55ms);
}
.cascade-column {
  animation: fadeInScale .45s ease both;
  animation-delay: calc(var(--col-i, 0) * 80ms);
}
.chart-section { animation: fadeInScale .5s ease .2s both; }

/* ── KPI Card Premium ─────────────────────────────────────────────────────── */
.kpi-card:hover {
  transform: translateY(-3px) scale(1.015);
}
/* Type-specific glow on hover */
.kpi-card.test-card:hover    { box-shadow: 0 8px 28px rgba(37,99,235,.2); }
.kpi-card.treat-card:hover   { box-shadow: 0 8px 28px rgba(5,150,105,.2); }
.kpi-card.prevent-card:hover { box-shadow: 0 8px 28px rgba(217,119,6,.2); }
.kpi-card.retain-card:hover  { box-shadow: 0 8px 28px rgba(124,58,237,.2); }

/* Mini progress bar at card bottom */
.kpi-progress-wrap {
  margin-top: 10px;
  height: 4px; border-radius: 3px;
  background: var(--border-light);
  overflow: hidden;
}
.kpi-progress-fill {
  height: 100%; border-radius: 3px; width: 0%;
  transition: width .95s cubic-bezier(.22,.61,.36,1) .15s;
}
.test-card    .kpi-progress-fill { background: linear-gradient(90deg,var(--test-400),var(--test-600)); }
.treat-card   .kpi-progress-fill { background: linear-gradient(90deg,var(--treat-400),var(--treat-600)); }
.prevent-card .kpi-progress-fill { background: linear-gradient(90deg,var(--prevent-400),var(--prevent-600)); }
.retain-card  .kpi-progress-fill { background: linear-gradient(90deg,var(--retain-400),var(--retain-600)); }

/* ── Performance Badges ───────────────────────────────────────────────────── */
.perf-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px;
  font-size: .6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  white-space: nowrap;
}
.perf-dot {
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
}
.perf-good    { background: #D1FAE5; color: #065F46; }
.perf-good    .perf-dot { background: #059669; }
.perf-warning { background: #FEF3C7; color: #78350F; }
.perf-warning .perf-dot { background: #D97706; animation: pulseDot 2s ease infinite; }
.perf-danger  { background: #FEE2E2; color: #7F1D1D; }
.perf-danger  .perf-dot { background: #EF4444; animation: pulseDot 1.4s ease infinite; }
@keyframes pulseDot {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.4; transform:scale(.6); }
}

/* ── Province Table — performance cells ──────────────────────────────────── */
.cell-with-bar {
  display: flex; align-items: center;
  justify-content: flex-end; gap: 8px;
}
.cell-mini-bar {
  width: 42px; height: 5px;
  background: var(--border); border-radius: 3px;
  overflow: hidden; flex-shrink: 0;
}
.cell-mini-fill {
  height: 100%; border-radius: 3px;
  transition: width .6s ease .1s;
}
.fill-good    { background: #059669; }
.fill-warning { background: #D97706; }
.fill-danger  { background: #EF4444; }
.val-good     { color: #047857; font-weight: 600; }
.val-warning  { color: #92400E; font-weight: 600; }
.val-danger   { color: #B91C1C; font-weight: 600; }

/* Rank number in table */
.rank-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  font-size: .7rem; font-weight: 600;
  color: var(--text-muted); flex-shrink: 0;
  margin-right: 6px;
}
.rank-1 { background: #FEF3C7; border-color: #D97706; color: #92400E; }
.rank-2 { background: #F1F5F9; border-color: #94A3B8; color: #475569; }
.rank-3 { background: #FEF9EE; border-color: #D97706; color: #78350F; }

/* ── Cascade funnel proportion bars ──────────────────────────────────────── */
.cascade-step-bar {
  height: 4px; border-radius: 2px; margin-top: 5px;
  transition: width .85s cubic-bezier(.22,.61,.36,1) .4s;
  width: 0%; max-width: 100%;
  opacity: .75;
}
.cascade-test    .cascade-step-bar { background: var(--test-400); }
.cascade-treat   .cascade-step-bar { background: var(--treat-400); }
.cascade-prevent .cascade-step-bar { background: var(--prevent-400); }
.cascade-retain  .cascade-step-bar { background: var(--retain-400); }

/* ── Section chips ────────────────────────────────────────────────────────── */
.section-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  font-size: .62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .6px;
  background: var(--bg-page); color: var(--text-muted);
  border: 1px solid var(--border);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

/* Large desktop: 4-col cascade, 2-col charts */
@media (min-width: 1281px) {
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Medium desktop / large tablet landscape */
@media (max-width: 1280px) {
  .cascade-grid { grid-template-columns: repeat(2, 1fr); }
  .charts-row   { grid-template-columns: 1fr; }
  .chart-donut-wrapper { height: 260px; }
}

/* Smaller desktop */
@media (max-width: 1100px) {
  :root { --sidebar-width: 200px; }
}

/* Tablet landscape */
@media (max-width: 1024px) {
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filter-bar { gap: 10px; }
  .filter-select { min-width: 130px; }
}

/* Tablet portrait — collapse sidebar */
@media (max-width: 768px) {
  :root {
    --sidebar-width: 240px;
    --content-pad: 16px;
    --header-h: 64px;
  }

  /* Sidebar slides off-screen by default */
  .sidebar {
    transform: translateX(calc(-1 * var(--sidebar-width)));
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.3);
  }

  .main-content { margin-left: 0; }
  .sidebar-toggle { display: flex; align-items: center; justify-content: center; }

  .top-header {
    padding-left: 64px;   /* room for hamburger button */
  }
  .dashboard-title { font-size: .95rem; }
  .dashboard-subtitle { display: none; }

  /* Filter bar wraps on mobile */
  .filter-bar {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 8px 12px;
    padding: 10px var(--content-pad);
  }
  .filter-group {
    flex: 1 1 calc(50% - 6px); /* 2 columns of filters */
    flex-shrink: 1;
  }
  .filter-select {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .multi-select { min-width: 0; width: 100%; }
  .filter-actions { width: 100%; }

  .cascade-grid { grid-template-columns: 1fr 1fr; }
  .kpi-grid     { grid-template-columns: repeat(2, 1fr); }
  .section-header { flex-wrap: wrap; gap: 8px; }
  .chart-toggle { flex-wrap: wrap; }
}

/* Mobile portrait */
@media (max-width: 480px) {
  :root { --content-pad: 12px; }
  .cascade-grid { grid-template-columns: 1fr; }
  .kpi-grid     { grid-template-columns: repeat(2, 1fr); }
  .kpi-value    { font-size: 1.4rem; }
  .filter-group { flex: 1 1 100%; }  /* single column filters */
  .charts-row   { gap: 12px; }
  .dashboard-body { gap: 14px; }
  .chart-art-timing-wrapper { height: 250px; }
}

/* Overlay for mobile sidebar */
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 99;
}
.sidebar-overlay.visible { display: block; }