/* ==================================================================
   MILKSCAPE Dashboard — design system
   Font: Verdana.  Aesthetic: light, bright, dreamy, ethereal.
   No gray fills; white modules; outlined cells; brand purples/blues.
   ================================================================== */
:root {
  /* brand palette */
  --white:#FFFFFF;
  --pink-1:#FFC0F1;
  --pink-2:#F09DFD;
  --purple-1:#A67AFF;
  --blue:#667AFF;        /* primary */
  --navy:#133D9E;        /* dark blue / supporting copy / tooltips */
  --sky:#35A6FF;         /* dollar sales bars / cool highlight */
  --grape:#8033E1;       /* gallon line / segment headers / deep accent */
  /* functional */
  --green:#19D7BC;       /* positive */
  --red:#F72C54;         /* negative */
  --gray-line:#999999;
  --gray-dark:#434343;

  /* derived tints */
  --green-soft:rgba(25,215,188,.55);
  --green-bg:rgba(25,215,188,.06);
  --red-soft:rgba(247,44,84,.50);
  --red-bg:rgba(247,44,84,.05);
  --panel-bd:#E6E9FB;
  --band:#EEF0FF;                 /* lavender header band */
  --band-grape:#F1EAFE;           /* light grape band for segment headers */
  --selected:rgba(102,122,255,.30);/* 70% shade of blue → lavender highlight */
  --shadow:0 6px 22px rgba(102,122,255,.08);

  --r-lg:18px; --r-md:12px; --r-sm:9px;

  --ff:Verdana, Geneva, Tahoma, sans-serif;
}

* { box-sizing:border-box; }
html,body { margin:0; }
body {
  font-family:var(--ff);
  color:var(--navy);
  background:transparent;          /* parent iframe page supplies the gradient */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* The dashboard surface itself is light/white & airy. */
.dash {
  background:
    radial-gradient(120% 90% at 12% -10%, rgba(160,200,255,.16), transparent 60%),
    radial-gradient(120% 90% at 100% 0%, rgba(240,157,253,.12), transparent 55%),
    #FFFFFF;
  border-radius:22px;
  box-shadow:0 18px 60px rgba(19,61,158,.10);
  max-width:1180px;
  margin:0 auto;
  overflow:hidden;
}

/* ---------------------------- top bar ---------------------------- */
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 30px 0 30px;
}
.tabs { display:flex; gap:26px; }
.tab {
  appearance:none; border:0; background:none; cursor:pointer;
  font-family:var(--ff); font-weight:700; font-size:15px;
  color:var(--navy); padding:8px 2px 12px; position:relative; letter-spacing:.2px;
}
.tab[aria-selected="true"] { color:var(--blue); }
.tab[aria-selected="true"]::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:3px;
  background:linear-gradient(90deg, var(--blue), var(--pink-2));
}
.brandmark { display:flex; align-items:center; gap:9px; }
.brandmark .logo {
  font-weight:900; letter-spacing:3px; font-size:15px;
  background:linear-gradient(90deg,#A06BFF,#667AFF 55%,#35A6FF);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brandmark .tm { font-size:9px; color:var(--purple-1); transform:translateY(-6px); }

.view { padding:6px 30px 30px; }
.view[hidden]{ display:none; }

/* --------------------------- page header --------------------------- */
.page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px;
  margin-top:14px; }
h1.h1 {
  font-family:var(--ff); font-weight:700; color:var(--blue);
  text-transform:uppercase; letter-spacing:1px; font-size:30px; margin:0 0 6px;
}
.source-line { font-weight:400; color:var(--navy); font-size:13.5px; margin:0; opacity:.92; }
.instructions { font-weight:400; color:var(--navy); font-size:13.5px; margin:12px 0 0; max-width:760px; line-height:1.5; }
.instructions b { font-weight:700; }

.resource-hub {
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  color:var(--navy); font-weight:700; font-size:16px; text-decoration:none;
}
.resource-hub svg { width:18px; height:18px; }
.resource-hub:hover { text-decoration:underline; }

/* ------------------------------ KPIs ------------------------------ */
.kpi-groups { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:22px; }
.kpi-group-title { text-align:center; color:var(--blue); font-weight:700; font-size:16px; margin:0 0 12px; }
.kpi-pair { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.kpi-card {
  background:var(--white); border:1.5px solid var(--panel-bd); border-radius:var(--r-md);
  padding:16px 14px 18px; text-align:center; box-shadow:var(--shadow);
}
.kpi-card.pos { border-color:var(--green-soft); }
.kpi-card.neg { border-color:var(--red-soft); }
.kpi-label { font-weight:700; font-size:12.5px; color:var(--navy); opacity:.78; letter-spacing:.3px; }
.kpi-value {
  margin-top:12px; font-weight:700; font-size:30px; letter-spacing:.5px;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.kpi-value .arrow { font-size:22px; line-height:1; }
.pos .kpi-value { color:var(--green); }
.neg .kpi-value { color:var(--red); }
.neu .kpi-value { color:var(--navy); }

/* --------------------------- module shell --------------------------- */
.module { margin-top:26px; }
.module-head { color:var(--blue); font-weight:700; font-size:16px; margin:0 0 10px; }
.panel {
  background:var(--white); border:1.5px solid var(--panel-bd); border-radius:var(--r-lg);
  box-shadow:var(--shadow); padding:18px 20px;
}

/* ------------------------------ chart ------------------------------ */
.chart-legend { display:flex; gap:20px; align-items:center; margin:2px 0 6px; font-size:12.5px; font-weight:700; }
.chart-legend .key { display:inline-flex; align-items:center; gap:7px; }
.chart-legend .dot { width:11px; height:11px; border-radius:50%; display:inline-block; }
.chart-legend .dollar { color:var(--sky); }
.chart-legend .gallon { color:var(--grape); }
.trend-svg { width:100%; height:auto; display:block; }
.trend-svg text { font-family:var(--ff); }

/* tooltip (chart + map) — navy box, white text */
.tip {
  position:absolute; pointer-events:none; z-index:30; background:var(--navy); color:#fff;
  border-radius:10px; padding:10px 12px; font-size:12px; line-height:1.55; box-shadow:0 8px 24px rgba(19,61,158,.35);
  opacity:0; transform:translateY(4px); transition:opacity .12s ease; white-space:nowrap;
}
.tip.show { opacity:1; transform:translateY(0); }
.tip .tip-title { font-weight:700; margin-bottom:5px; border-bottom:1px solid rgba(255,255,255,.25); padding-bottom:4px; }
.tip .tip-row { display:flex; justify-content:space-between; gap:18px; }
.tip .tip-row .lab { opacity:.82; }
.tip .tip-row .val { font-weight:700; }

/* ----------------------- metric tables (segments / acc) ----------------------- */
.seg-head {
  color:var(--grape); font-weight:700; font-size:16px;
  background:var(--band-grape); border-radius:10px 10px 0 0;
  padding:11px 16px; margin:0;
}
.seg-body { border:1.5px solid var(--panel-bd); border-top:0; border-radius:0 0 var(--r-lg) var(--r-lg);
  background:#fff; padding:16px 16px 14px; box-shadow:var(--shadow); }

.metric-grid { display:grid; gap:10px 14px; }
.metric-grid .col-head {
  color:var(--blue); font-weight:700; font-size:13px; text-align:center; padding:4px 0 2px;
}
.metric-grid .row-head {
  color:var(--navy); font-weight:700; font-size:12.5px; display:flex; align-items:center;
}
/* outlined value cell: white bg, colored border + colored text + arrow */
.cell {
  border-radius:8px; background:#fff; border:1.6px solid var(--panel-bd);
  padding:9px 6px; text-align:center; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.cell.pos { border-color:var(--green-soft); color:var(--green); background:var(--green-bg); }
.cell.neg { border-color:var(--red-soft); color:var(--red); background:var(--red-bg); }
.cell .arrow { font-size:13px; }
.seg-note { color:var(--navy); opacity:.72; font-style:italic; font-size:12px; margin:14px 2px 2px; font-weight:400; }

/* Dairy Milk Segments — all 10 metrics on one row. Columns are tightened via
   the gap / cell padding only; font sizes stay identical to the ACC cards
   (col-head 12px, cells 14px, row-head 12.5px) so type is consistent. */
.metric-grid.seg-oneline { gap:10px 8px; }
.metric-grid.seg-oneline .col-head { font-size:12px; line-height:1.2; min-height:46px; padding:2px 0; text-wrap:balance; }
.metric-grid.seg-oneline .cell { padding:9px 4px; }

/* Adjacent / Competitive / Complementary — three side-by-side cards, each with
   its own purple header. Cards sized proportionally to their column count so
   the value columns stay roughly equal width and headers wrap cleanly. */
.acc-row { display:grid; grid-template-columns:3.9fr 2.9fr 1.9fr; gap:18px; align-items:stretch; }
.acc-card { display:flex; flex-direction:column; }
.acc-card .seg-body { flex:1; }
.acc-card .seg-head { font-size:15px; }
.acc-card .col-head {
  font-size:12px; line-height:1.2; min-height:50px; text-wrap:balance;
  display:flex; align-items:flex-start; justify-content:center;
}

/* --------------------------- filters (regional) --------------------------- */
.filters { display:flex; gap:22px; flex-wrap:wrap; margin-top:18px; }
.filter { min-width:210px; }
.filter .f-title { font-size:11.5px; letter-spacing:1px; color:var(--navy); font-weight:400; text-transform:uppercase; margin-bottom:6px; }
.f-select {
  position:relative; background:#fff; border:1.6px solid var(--panel-bd); border-radius:10px;
  padding:11px 38px 11px 14px; font-weight:700; color:var(--blue); font-size:15px; cursor:pointer;
  box-shadow:var(--shadow); font-family:var(--ff);
}
.f-select .caret { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--blue); }
.f-menu {
  position:absolute; z-index:40; top:calc(100% + 6px); left:0; right:0; background:#fff;
  border:1.6px solid var(--panel-bd); border-radius:12px; box-shadow:0 14px 36px rgba(19,61,158,.16);
  padding:6px; display:none;
}
.f-select.open .f-menu { display:block; }
.f-opt { padding:10px 12px; border-radius:8px; font-weight:700; color:var(--navy); font-size:14px; cursor:pointer; }
.f-opt:hover { background:var(--band); }
.f-opt[aria-selected="true"] { background:var(--selected); color:var(--navy); }

/* --------------------------- map --------------------------- */
.map-src { font-weight:400; color:var(--navy); font-size:12.5px; margin:18px 0 4px; }
.map-title { color:var(--blue); font-weight:700; font-size:15px; margin:0 0 6px; }
.map-wrap { position:relative; display:grid; grid-template-columns:1fr; gap:8px; align-items:center; }
.legend { padding-left:4px; }
.legend-title { color:var(--blue); font-weight:700; text-transform:uppercase; font-size:13px; letter-spacing:.4px; margin:0 0 12px; line-height:1.3; }
.legend-item { display:flex; align-items:center; gap:9px; font-weight:700; color:var(--navy); font-size:12.5px; margin:8px 0; }
.legend-item .swatch { width:13px; height:13px; border-radius:50%; }
.us-map { width:100%; height:auto; display:block; }
.us-map .state { stroke:#fff; stroke-width:.8; stroke-dasharray:2.4 2; transition:filter .12s, opacity .12s; }
.us-map .region-outline { fill:none; stroke:#fff; stroke-width:1.8; pointer-events:none; transition:stroke .12s, stroke-width .12s; }
.us-map .region-outline.active { stroke:var(--navy); stroke-width:3.2; }
.us-map .state:hover { filter:brightness(1.06) saturate(1.1); cursor:pointer; }
.us-map .state.dim { opacity:.28; }
/* region name labels: navy text with a white halo (paint-order:stroke draws the
   halo behind the fill) so they stay legible over both light and dark fills. */
.us-map .region-label {
  fill:var(--navy); font-size:14px; font-weight:800; letter-spacing:.2px;
  paint-order:stroke; stroke:#fff; stroke-width:3.4px; stroke-linejoin:round;
  pointer-events:none;
}
.us-map .region-label-val { font-size:12.5px; font-weight:800; }
.map-caption { font-weight:400; color:var(--navy); font-size:13px; margin:12px 2px 0; line-height:1.5; }

/* --------------------------- region tabs --------------------------- */
.region-tabs { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 6px; }
.region-tab {
  appearance:none; font-family:var(--ff); cursor:pointer;
  background:#fff; border:1.6px solid var(--panel-bd); border-radius:10px;
  padding:10px 18px; font-weight:700; color:var(--blue); font-size:13.5px; box-shadow:var(--shadow);
}
.region-tab[aria-selected="true"] { background:var(--selected); border-color:var(--blue); }
.section-label { color:var(--navy); font-weight:400; text-transform:uppercase; letter-spacing:1px; font-size:11.5px; margin:16px 0 8px; }

/* --------------------------- data tables --------------------------- */
.dtable { width:100%; border-collapse:separate; border-spacing:0; }
.dtable thead th {
  background:var(--band); color:var(--blue); font-weight:700; font-size:13px; text-align:left;
  padding:12px 14px; border-bottom:0;
}
.dtable thead th:first-child { border-radius:10px 0 0 0; }
.dtable thead th:last-child { border-radius:0 10px 0 0; }
.dtable tbody td { padding:10px 14px; font-size:13.5px; color:var(--navy); border-bottom:1px solid #F0F2FE; }
.dtable tbody th { padding:10px 14px; font-size:13.5px; text-align:left; font-weight:700; color:var(--navy); border-bottom:1px solid #F0F2FE; }
.dtable tbody tr:last-child td, .dtable tbody tr:last-child th { border-bottom:0; }
.dtable .topline th, .dtable .topline td { font-weight:700; background:#FBFAFF; }
.dtable .num { font-weight:400; }
/* outlined % cell inside tables */
.pill {
  display:inline-flex; align-items:center; gap:6px; justify-content:center;
  border-radius:8px; border:1.6px solid var(--panel-bd); background:#fff;
  padding:6px 12px; font-weight:700; font-size:13px; min-width:78px;
}
.pill.pos { border-color:var(--green-soft); color:var(--green); background:var(--green-bg); }
.pill.neg { border-color:var(--red-soft); color:var(--red); background:var(--red-bg); }

/* --------------------------- footer --------------------------- */
.dash-footer { margin-top:26px; padding-top:16px; border-top:1px solid #EEF0FF;
  display:flex; flex-direction:column; gap:6px; }
.dash-footer .resource-note { color:var(--navy); font-weight:400; font-size:13px; }
.dash-footer .data-source { color:var(--navy); opacity:.8; font-size:12px; }

/* horizontal-scroll wrappers — wide grids/tables swipe instead of clipping */
.metric-scroll, .table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.metric-scroll { padding-bottom:2px; }
.table-scroll .dtable { min-width:560px; }

/* --------------------------- responsive --------------------------- */
@media (max-width: 920px) {
  .kpi-groups { grid-template-columns:1fr; }
  .acc-row { grid-template-columns:1fr; }
  .map-wrap { grid-template-columns:1fr; }
  h1.h1 { font-size:24px; }
}

/* tablet / large phone */
@media (max-width: 680px) {
  .dash { border-radius:16px; }
  .view { padding:6px 18px 24px; }
  .topbar { flex-wrap:wrap; gap:6px 14px; padding:14px 18px 0; }
  .tabs { gap:16px; }
  .tab { font-size:13.5px; padding:6px 1px 10px; }
  .brandmark .logo { font-size:12.5px; letter-spacing:2px; }
  .page-head { flex-direction:column; gap:8px; }
  h1.h1 { font-size:22px; letter-spacing:.5px; }
  .resource-hub { font-size:15px; }
  .instructions { font-size:13px; }
  .kpi-value { font-size:27px; }
  .kpi-value .arrow { font-size:19px; }
  .filters { gap:14px; }
  .filter { min-width:0; flex:1 1 100%; }
  .legend { padding-left:0; }
  .map-wrap { gap:14px; }
}

/* small phone */
@media (max-width: 420px) {
  .view { padding:6px 12px 20px; }
  .topbar { padding:12px 12px 0; }
  .tab { font-size:12.5px; }
  .brandmark .logo { font-size:11px; letter-spacing:1px; }
  h1.h1 { font-size:20px; }
  .kpi-pair { gap:10px; }
  .kpi-card { padding:13px 8px 15px; }
  .kpi-value { font-size:24px; }
  .kpi-label { font-size:11.5px; }
  .module-head, .seg-head, .map-title { font-size:14px; }
  .region-tab { padding:9px 14px; font-size:12.5px; }
}