/* =======================================================================
   WheatCampaign – Consolidated Stylesheet (clean rewrite)
   File: style.css
   Goals:
   - Remove duplicated/conflicting rules
   - Normalize donut sizing (all equal, small)
   - Fix "middle scrolling" by avoiding scroll-trap containers
   - Maintain existing visual identity (dark + light theme)
   ======================================================================= */

/* Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ----------------------------- Theme tokens ----------------------------- */
:root{
  /* Dark theme */
  --bg: #0d1628; /* Deeper blue for corporate depth */
  --card: rgba(20,30,50,0.75); /* Softer transparency */
  --cardSolid: #121a2e;
  --stroke: rgba(42,59,94,.85);
  --text: #e6efff; /* Higher contrast white */
  --muted: #b0c4e6;
  --muted2:#8a9cc2;
  --chartBorder: rgba(255,255,255,.10);
  --donutHole: var(--bg);
  --mapBg: var(--cardSolid);

  --brand: #0096d6; /* Updated Bayer blue for modernity */
  --brand2:#76c020; /* Brighter green */
  --warn: #f59e0b;
  --danger:#ef4444;
  --wheat:#e8d19a; /* Softer wheat gold */

  --radius: 16px; /* Larger for modern feel */
  --shadow: 0 12px 32px rgba(0,0,0,0.32); /* Deeper shadows */
  --shadowSoft: 0 8px 18px rgba(0,0,0,.22);
  --t: 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Smoother easing */

  /* Layout */
  --container: 1200px;
  --headerOffset: 120px; /* sticky header scroll offset */
}

[data-theme="light"]{
  --bg:#f5f8fc;
  --card: rgba(255,255,255,0.85);
  --cardSolid:#ffffff;
  --stroke: rgba(226,232,240,.95);
  --text:#0a2a42;
  --muted:#64748b;
  --muted2:#475569;
  --chartBorder: rgba(16,56,79,.14);
  --donutHole: var(--cardSolid);
  --mapBg: var(--cardSolid);

  --brand:#0096d6;
  --brand2:#76c020;
  --warn:#d97706;
  --danger:#dc2626;
  --shadow: 0 8px 24px rgba(10,42,66,0.12);
  --shadowSoft: 0 4px 14px rgba(16,56,79,.10);
}

/* ------------------------------ Base reset ----------------------------- */
*{ box-sizing:border-box; }
html,body{ width:100%; }
html{ scroll-behavior:smooth; transition: background var(--t), color var(--t); }
body{
  margin:0;
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;

  /* Avoid scroll trapping */
  overflow-x:hidden;
  overflow-y:auto;
}

/* Anchor land below sticky header */
section,[id]{ scroll-margin-top: var(--headerOffset); }

a{ color: inherit; }
.hidden{ display:none !important; }
.muted{ color: var(--muted); }
.small{ font-size:12px; color: var(--muted2); }
.srOnly{ position:absolute; left:-9999px; }

/* ------------------------------ Background ----------------------------- */
.bg{ position:fixed; inset:0; z-index:-2; background:#060a12; }
.bgVideo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter: saturate(1.05) contrast(1.05);
  opacity:.30;
}
.bgShade{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 20% 15%, rgba(241,219,179,.12), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.70), rgba(0,0,0,.55), rgba(0,0,0,.72));
}

[data-theme="light"] .bgShade{
  background:
    radial-gradient(1200px 500px at 20% 10%, rgba(76,111,255,.12), transparent 50%),
    radial-gradient(900px 500px at 70% 35%, rgba(34,197,94,.08), transparent 60%),
    linear-gradient(to bottom, rgba(245,248,255,.35), rgba(245,248,255,.75) 55%, rgba(245,248,255,.85));
}

/* ------------------------------- Topbar -------------------------------- */
.topbar{
  position: sticky;
  top: 0;
  z-index: 40;

  padding: max(14px, env(safe-area-inset-top)) 16px 14px;
  backdrop-filter: blur(10px);
  background: rgba(7,11,20,.45);
  border-bottom: 1px solid rgba(26,41,71,.55);

  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:16px;
}

[data-theme="light"] .topbar{
  background: rgba(255,255,255,.70);
  border-bottom: 1px solid rgba(226,232,240,.95);
}

.headerRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}

/* Brand */
.brand{ display:flex; align-items:center; gap:12px; }
.brandLogo{
  width:auto; height:36px; max-height:36px;
  object-fit:contain;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.28));
}
.brandTitle{ font-size:18px; font-weight:900; letter-spacing:.2px; }
.brandSub{ font-size:12px; color: var(--muted); margin-top:2px; }

/* Tabs */
.tabBar{ display:flex; gap:10px; flex-wrap:wrap; margin-left:auto; }
.tabBtn{
  appearance:none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  color: var(--muted);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  transition: background var(--t), color var(--t), border-color var(--t);
}
[data-theme="light"] .tabBtn{
  border-color: rgba(16,56,79,.14);
  background: rgba(16,56,79,.04);
}
.tabBtn:hover{ background: rgba(255,255,255,.06); color: var(--text); }
.tabBtn--active{
  border-color: rgba(0,188,255,.55);
  background: rgba(0,188,255,.14);
  color: var(--text);
}

/* Controls area */
.controls{
  width:100%;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:12px;
  align-items:end;
}

.control label{
  display:block;
  font-size:12px;
  color: var(--muted2);
  margin:0 0 6px;
}

.control input,
.control select,
.control textarea{
  width:100%;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
  outline:none;
}

[data-theme="light"] .control input,
[data-theme="light"] .control select,
[data-theme="light"] .control textarea{
  background: rgba(245,248,255,.70);
  border-color: rgba(16,56,79,.14);
  color: var(--text);
}

.control textarea{ resize:vertical; }

/* Date range row */
.rangeRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}
.rangeRow input[type="date"]{
  flex:1 1 140px;
  min-width:140px;
}
.rangeRow span{
  font-size:12px;
  color: var(--muted2);
}

/* Buttons */
.actions{ display:flex; gap:8px; flex-wrap:wrap; }
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 14px;
  cursor:pointer;
  transition: transform .08s ease, background var(--t), border-color var(--t);
  user-select:none;
}
[data-theme="light"] .btn{
  background: rgba(16,56,79,.04);
  border-color: rgba(16,56,79,.12);
}
.btn:hover{ background: rgba(255,255,255,.08); }
.btn:active{ transform: translateY(1px); }
.btn.primary{
  background: rgba(0,188,255,.16);
  border-color: rgba(0,188,255,.40);
}
.btn.whatsapp{
  background: rgba(34,197,94,.16);
  border-color: rgba(34,197,94,.35);
}
.btnSmall{ padding:8px 10px; font-size:12px; border-radius:10px; }
.btnGhost{ background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); }
.btnGhost:hover{ background: rgba(255,255,255,.07); }

.iconBtn{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: inherit;
  border-radius: 12px;
  padding: 8px 10px;
  cursor:pointer;
}
.iconBtn:hover{ background: rgba(255,255,255,.08); }

.icon{ width:18px; height:18px; display:inline-block; flex:0 0 auto; }

/* ------------------------------- Hero ---------------------------------- */
.heroWrap{
  max-width:100%;
  margin:0;
  padding:0 0 14px;
  display:block;
  position:relative;
}
.heroPlayer{
  position:relative;
  height: clamp(200px, 28vh, 320px);
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(26,41,71,.65);
  background: rgba(11,18,32,.55);
  box-shadow: var(--shadow);
}
.heroPlayer video,
.heroPlayer img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.heroPlayer img{ opacity:0; transition:opacity .25s ease; }
.heroPlayer.fallback img{ opacity:1; }

.heroOverlay{
  position:absolute; inset:0;
  background: linear-gradient(to top, var(--bg) 0%, transparent 60%);
  opacity: 0.85;
  transition: opacity var(--t);
}
[data-theme="light"] .heroOverlay{
  background: linear-gradient(to top, rgba(245,248,255,.92), rgba(245,248,255,.25) 55%, rgba(245,248,255,.15));
}
.heroPlayer:hover .heroOverlay {
  opacity: 1;
}
.heroCaption{ position:absolute; left:14px; right:14px; bottom:12px; }
.heroTitle{ font-size:18px; font-weight:900; animation: fadeInUp 1s ease-out; }
.heroSub{ margin-top:6px; font-size:12px; color: var(--muted); }

.heroControls{
  position:absolute;
  right:12px; top:12px;
  display:flex; gap:8px;
}

.heroThumbs{
  position:absolute;
  right:14px; bottom:14px;
  display:flex;
  flex-direction:row;
  gap:8px;
  z-index:5;
}
.heroThumb{
  position:relative;
  width:58px; height:40px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(26,41,71,.65);
  background: rgba(11,18,32,.5);
  cursor:pointer;
}
.heroThumb img,
.heroThumb video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.heroThumb .badge{
  position:absolute;
  bottom:4px; left:4px;
  background: rgba(7,11,20,.72);
  border: 1px solid rgba(255,255,255,.08);
  padding: 3px 8px;
  border-radius: 999px;
  font-size:9px;
  color:#dfe7ff;
}
.heroThumb.active{
  outline: 2px solid rgba(0,188,255,.55);
  outline-offset: 2px;
}

/* ------------------------------ Main area ------------------------------ */
.main{
  max-width: var(--container);
  margin: 16px auto 60px;
  padding: 0 16px;
}

/* Card */
.card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadowSoft);
  padding: 24px;
  margin: 16px auto;
  max-width: var(--container);
  transition: transform var(--t), box-shadow var(--t);
}
.card h2{ margin:0 0 8px; font-size:18px; }
.card p{ margin:0; }
.card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

/* Status / chips */
.statusRow{
  margin-top:12px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color: var(--text);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 6px 10px;
  text-decoration:none;
}
[data-theme="light"] .chip{
  background: rgba(16,56,79,.04);
  border-color: rgba(16,56,79,.12);
}
.chip.muted{ color: var(--muted); }
.chip--active{
  background: rgba(0,188,255,.14);
  border-color: rgba(0,188,255,.35);
}

/* ------------------------------- KPI ----------------------------------- */
.kpis{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
@media (max-width: 900px){ .kpis{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

.kpi{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  transition: transform var(--t), box-shadow var(--t);
}
[data-theme="light"] .kpi{
  border-color: rgba(16,56,79,.12);
  background: rgba(16,56,79,.03);
}
.kpi:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.kpiLabel{ font-size:12px; color: var(--muted); display:flex; align-items:center; gap:6px; }
.ico{ width:14px; height:14px; flex:0 0 auto; color: var(--text); opacity:.85; }
.kpiLabel span{ display:inline-flex; align-items:center; gap:6px; }

.kpiVal{ font-size:22px; font-weight:800; letter-spacing:.2px; margin-top:2px; }

/* KPI dot icons */
.kpiLabel::before{
  content:'';
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
}
.kpi--sessions .kpiLabel::before { background:#4c6fff; }
.kpi--farmers  .kpiLabel::before { background:#22c55e; }
.kpi--acres    .kpiLabel::before { background:#f59e0b; }
.kpi--estacres .kpiLabel::before { background:#eab308; }
.kpi--awareness .kpiLabel::before { background:#8e44ad; }
.kpi--definite  .kpiLabel::before { background:#f97316; }
.kpi--used      .kpiLabel::before { background:#3b82f6; }
.kpi--score     .kpiLabel::before { background:#10b981; }

/* ------------------------------ Donuts --------------------------------- */
/* All donuts equal small size (no flex stretching). */
.donutGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:12px;
  justify-items:center;
  padding: 0;
  margin-top: 12px;
}
.donutCard{
  width:140px;
  max-width:140px;
  border:1px solid var(--stroke);
  border-radius:16px;
  background: var(--card);
  padding:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  box-shadow: none;
}
[data-theme="light"] .donutCard{
  background: var(--card);
  border-color: var(--stroke);
}
.donutTitle{
  margin: 0 0 8px;
  font-size:13px;
  color: var(--text);
  text-align:center;
}
.donutWrap{
  width:96px;
  height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.donut{
  width:100%;
  height:100%;
  border-radius:50%;
  background: conic-gradient(var(--color, var(--brand)) calc(var(--percent) * 1%), rgba(255,255,255,.12) 0%);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.donut::before{
  content:'';
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:70%;
  height:70%;
  border-radius:50%;
  background: var(--donutHole);
}
[data-theme="light"] .donut::before{ background: var(--cardSolid); }
.donutValue{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-size:14px;
  font-weight:800;
  color: var(--text);
}

.donutLegend{
  margin-top: 8px;
  display:flex;
  flex-direction: column;
  gap: 8px;
  max-height: 180px;
  overflow:auto;
  padding-right: 4px;
}
.donutLegend .legendItem{
  display:grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 10px;
}
.donutLegend .legendDot{
  width:10px;
  height:10px;
  border-radius: 999px;
}
.donutLegend .legendText{
  color: var(--text);
  font-size: 14px;
  line-height: 1.25;
}
.donutLegend .legendVal{
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chartTile{
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background: rgba(255,255,255,.03);
  padding:12px;
}

.chartTile h4{
  margin:0 0 8px;
  font-size:13px;
}

.chartWrap{
  height: 220px;
}

.chartWrap canvas{
  width:100% !important;
  height:100% !important;
}

/* =======================================================================
   Patch v3 – Critical alignment with index.html structure
   - Ensure session tables (.sessionTable) get the same styling as .table
   - Fix drawer overlay vs drawer panel class mismatch in HTML
   ======================================================================= */

/* Session tables (HTML uses .sessionTable, not .table) */
.sessionTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:820px;
  font-size:13px;
}
.sessionTable th,
.sessionTable td{
  padding:10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align:top;
  white-space:nowrap;
}
[data-theme="light"] .sessionTable th,
[data-theme="light"] .sessionTable td{
  border-bottom-color: rgba(16,56,79,.10);
}
.sessionTable th{
  position:sticky;
  top:0;
  background: rgba(7,12,22,.92);
  backdrop-filter: blur(8px);
  z-index:2;
  text-align:left;
  color: var(--text);
}
[data-theme="light"] .sessionTable th{
  background: rgba(255,255,255,.92);
}

/* Drawer: HTML uses #drawerOverlay as backdrop and #sessionDrawer as the panel */
#drawerOverlay{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  z-index:60;
  transform:none !important;
  transition:none !important;
  overflow:hidden;
  cursor:pointer;
}

/* Right-side details drawer panel */
#sessionDrawer{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width: min(420px, 92vw);
  z-index:70;
  overflow:auto;

  background: rgba(10,14,22,.96);
  border-left: 1px solid rgba(255,255,255,.08);
  box-shadow: -18px 0 42px rgba(0,0,0,.45);

  /* Make it feel like a panel, not a card */
  border-radius:0;
  margin:0;
}

/* Keep the drawer header pinned */
#sessionDrawer .drawerTop{
  position:sticky;
  top:0;
  background: rgba(10,14,22,.96);
  backdrop-filter: blur(6px);
  z-index:2;
}

/* On small devices, use full width */
@media (max-width: 860px){
  #sessionDrawer{ width: 100vw; }
}



/* =======================================================================
   Patch v4 – Hero compact filter bar (single-row, responsive)
   Goal:
   - Reduce header height on laptops by keeping filters in a single row
   - Auto-adjust on smaller screens (wrap) without breaking layout
   ======================================================================= */

/* Slightly tighter sticky header spacing */
.topbar{
  gap:12px;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px;
}

/* Make hero height responsive to viewport height */
.heroPlayer{
  height: clamp(170px, 22vh, 240px);
}

/* Filters: single-row with horizontal scroll (laptop), wraps on smaller screens */
.topbar .controls{
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  gap:10px;
  align-items:flex-end;
  padding-bottom:6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.topbar .controls::-webkit-scrollbar{ height:8px; }
.topbar .controls::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.12);
  border-radius:999px;
}

.topbar .controls .control{
  flex:0 0 auto;
  min-width:170px;
}

/* Explicit widths for key controls */
.topbar .controls .control--campaign{ min-width: 220px; }
.topbar .controls .control--dates{ min-width: 520px; }
.topbar .controls .control--score{ min-width: 320px; }

.topbar .controls .control label{
  margin:0 0 4px;
  font-size:11px;
}

.topbar .controls .control input,
.topbar .controls .control select{
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 13px;
}

/* Smaller buttons inside header filters */
.topbar .controls .btn{
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 13px;
}

/* Score range row (was missing styling) */
.scoreRangeRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}
.scoreRangeRow input[type="number"]{
  width:120px;
  min-width:120px;
}

/* Hide campaign duration hint on desktop to save vertical space */
#rangeHint{ display:none; }

/* Small screens: allow wrapping instead of horizontal scroll */
@media (max-width: 740px){
  .topbar .controls{
    flex-wrap:wrap;
    overflow-x:visible;
  }
  .topbar .controls .control{
    flex: 1 1 220px;
    min-width: 220px;
  }
  .topbar .controls .control--dates{ min-width: 100%; }
  #rangeHint{ display:block; }
  .scoreRangeRow{ flex-wrap:wrap; }
}

/* Very short viewports (small laptop screens): shrink hero a bit more */
@media (max-height: 720px){
  .heroPlayer{ height: clamp(150px, 20vh, 210px); }
}


/* =======================================================================
   Patch v5 – Filters collapse button
   ======================================================================= */

.filtersHeader{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.filtersMeta{
  font-size:12px;
  color: var(--muted2);
  font-weight:700;
  letter-spacing:.2px;

  /* Prevent the header row from growing taller */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

body.filters-collapsed .topbar .controls{
  display:none !important;
}

@media (max-width: 560px){
  .filtersHeader{
    flex-wrap:wrap;
    align-items:flex-start;
  }
  .filtersMeta{
    flex: 1 1 100%;
  }
}

/* Remove legacy KPI dot markers (SVG icons are used instead). */
.kpiLabel::before{ display:none !important; }

/* Wheat-inspired KPI accents */
.kpi--awareness{
  background: linear-gradient(135deg, rgba(137, 211, 41, 0.15), rgba(241, 219, 179, 0.12) 80%);
  border-bottom: 3px solid var(--brand2);
}
.kpi--definite{
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(241, 219, 179, 0.20) 80%);
  border-bottom: 3px solid var(--warn);
}
[data-theme="light"] .kpi--awareness{
  background: linear-gradient(135deg, rgba(137, 211, 41, 0.12), rgba(241, 219, 179, 0.18) 80%);
}
[data-theme="light"] .kpi--definite{
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(241, 219, 179, 0.22) 80%);
}

/* Light theme: fallback field image behind the background video (ensure asset exists). */
[data-theme="light"] .bg{
  background-image: url('assets/wheat-field-light.jpg');
  background-size: cover;
  background-position: center;
}
[data-theme="light"] .bgVideo{ opacity:.18; }

.heroThumb{ will-change: transform; }
.heroThumb:hover{
  transform: translateY(-1px) scale(1.02);
  transition: var(--t);
  border-color: var(--wheat);
}

@media (min-width: 1400px){ :root{ --container: 1400px; } .kpis{ grid-template-columns: repeat(6, minmax(0,1fr)); } }

/* Storytelling typography: headings */
h2, h3{
  font-family: 'Playfair Display', serif;
  font-style: italic;
  letter-spacing: -0.5px;
  color: var(--wheat);
}

/* Tooltips */
[data-tooltip]{
  position: relative;
  cursor: help;
}
[data-tooltip]::after{
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cardSolid);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
  border: 1px solid var(--stroke);
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
[data-tooltip]:hover::after{
  opacity: 1;
  visibility: visible;
}

/* Summary intro box */
.introBox{
  margin: 12px 0 16px;
  padding: 14px 14px;
  background: var(--card);
  border-radius: var(--radius);
  border-left: 4px solid var(--wheat);
}
.introBox h3{ margin:0 0 6px 0; }
.introBox p{ margin:0; }

/* Summary progress */
.progressContainer{
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
}
[data-theme="light"] .progressContainer{
  background: rgba(16,56,79,0.06);
  border-color: rgba(16,56,79,.10);
}
.progressTrack{
  height: 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
}
.progressBar{
  height: 100%;
  width: 0%;
  background: var(--brand2);
  border-radius: 10px;
  transition: width 1s ease;
}
.progressNote{ margin-top: 6px; }

/* Gold badge for top performing sessions */
.badge--gold{
  background: var(--wheat);
  color: #5c4a2a;
  font-weight: 800;
  box-shadow: 0 0 10px rgba(241,219,179,0.35);
  border: 1px solid rgba(92,74,42,.15);
}

/* ================================
   Wheat success KPIs (final override)
   ================================ */
.kpi--awareness,
.kpi--definite{
  background: linear-gradient(90deg,
    rgba(137,211,41,.18) 0%,
    rgba(241,219,179,.22) 70%,
    rgba(0,188,255,.10) 100%);
  border-color: rgba(241,219,179,.35);
}
[data-theme="light"] .kpi--awareness,
[data-theme="light"] .kpi--definite{
  background: linear-gradient(90deg,
    rgba(137,211,41,.14) 0%,
    rgba(241,219,179,.26) 75%,
    rgba(0,188,255,.06) 100%);
}
.kpi--awareness .kpiLabel::before,
.kpi--definite .kpiLabel::before{
  background: var(--wheat);
}

/* Micro-interaction safety (GPU hint) */
.heroThumb{ will-change: transform; }
/* ---------- v16: Reduced motion + autoplay fallback ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .heroThumb:hover,
  .mediaCard:hover {
    transform: none !important;
  }

  .progressBar {
    transition: none !important;
  }

  [data-tooltip]::after {
    transition: none !important;
  }
}

.bgVideo.fallback { display: none; }

.bgFallback {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0a0f1c 0%, #1a2937 100%);
  z-index: -1;
}

[data-theme="light"] .bgFallback {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

/* ---------- v16: Tooltip improvements for touch devices ---------- */
[data-tooltip] {
  -webkit-tap-highlight-color: transparent;
}

[data-tooltip]::after {
  max-width: 280px;
  word-wrap: break-word;
  white-space: normal;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

@media (hover: none) and (pointer: coarse) {
  [data-tooltip] { touch-action: manipulation; }
  [data-tooltip]:active::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
  }
}

/* ---------- v16: Lightbox active thumb ---------- */
.thumb--active {
  outline: 2px solid var(--wheat);
  outline-offset: 2px;
}


/* Patch 2026-01-07: ensure drawer overlay covers the full viewport */
.drawerOverlay{position:fixed;inset:0;width:100vw;height:100vh;z-index:60;background:rgba(15,21,34,.72);backdrop-filter:blur(6px);cursor:pointer;}



/* --------------------------- Donut row (carousel) --------------------------- */
.donutRow{
  scroll-behavior: smooth;
}
.donutRow .chartTile{
  flex: 0 0 320px;
  scroll-snap-align: start;
}
@media (max-width: 720px){
  .donutRow .chartTile{ flex-basis: 280px; }
}
.donutRow:active{ cursor: grabbing; }

/* ------------------------------ Leaflet theming ----------------------------- */
.leaflet-container{
  background: var(--mapBg);
  color: var(--text);
  font-family: inherit;
}

[data-theme="dark"] .leaflet-tile{
  filter: saturate(1.05) hue-rotate(195deg) brightness(1.08) contrast(1.05);
}
[data-theme="dark"] .leaflet-tile-pane{
  opacity:.94;
}

.leaflet-control,
.leaflet-bar,
.leaflet-control-layers,
.leaflet-control-zoom{
  background: var(--cardSolid);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadowSoft);
}
.leaflet-bar a,
.leaflet-control-zoom a{
  background: transparent;
  color: var(--text);
  border-bottom: 1px solid var(--stroke);
}
.leaflet-bar a:last-child,
.leaflet-control-zoom a:last-child{
  border-bottom: none;
}
.leaflet-bar a:hover,
.leaflet-control-zoom a:hover{
  background: rgba(255,255,255,.06);
}
[data-theme="light"] .leaflet-bar a:hover,
[data-theme="light"] .leaflet-control-zoom a:hover{
  background: rgba(16,56,79,.06);
}

.leaflet-control-attribution,
.leaflet-control-attribution a{
  color: var(--muted2) !important;
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip{
  background: var(--cardSolid);
  color: var(--text);
  border: 1px solid var(--stroke);
}
.leaflet-tooltip{
  background: var(--cardSolid);
  color: var(--text);
  border: 1px solid var(--stroke);
}


[data-theme="dark"] .chartTile{background: rgba(255,255,255,.045);}

/* Modern Corporate Theme Enhancements (from review) */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Share options styling */
.share-options {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
#qrContainer {
  margin-top: 10px;
}