/* ════════════════════════════════════════════════════════════
   ADV Mobile · Overview tab — flag-gated, ≤768px
   Design tokens: /tmp/adv-design/.../tokens.js
   ════════════════════════════════════════════════════════════ */

:root{
  /* Brand blue */
  --ovm-primary:#006FA0;
  --ovm-d10:#003047; --ovm-d20:#003E5C; --ovm-d30:#004F73; --ovm-d40:#00608A;
  --ovm-b10:#1A82B0; --ovm-b20:#3F95BD; --ovm-b30:#6FAFCB; --ovm-b40:#9EC8DA; --ovm-b50:#C8DEE9;
  --ovm-s40:#5A7A8A;

  /* Surfaces */
  --ovm-bg:#0A1628;
  --ovm-surface:#0E1B30;
  --ovm-raised:#13243C;
  --ovm-line:#1B2D48;
  --ovm-line2:#26405F;

  /* Text */
  --ovm-text:#EAF1FA;
  --ovm-text2:#9DB1C9;
  --ovm-text3:#5E7494;
  --ovm-text4:#3F546E;

  /* Status */
  --ovm-pos:#3FBF8F;
  --ovm-neg:#E3725B;
  --ovm-warn:#E0A23E;

  /* Type */
  --ovm-font:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}

/* The mobile root is hidden by default; the dispatcher in main.js shows it. */
#overview-mobile-root{ display:none; }

/* Belt-and-suspenders: ensure desktop content is hidden when mobile root is shown. */
#panel-overview #overview-mobile-root[style*="display: block"] ~ #overview-content,
#panel-overview #overview-mobile-root[style*="display:block"] ~ #overview-content{ display:none !important; }

/* Root container fills the panel; design uses fixed 380w but we let it flex. */
.ovm-root{
  font-family:var(--ovm-font);
  color:var(--ovm-text);
  background:var(--ovm-bg);
  margin:0 -16px;        /* cancel #main padding (sp-3 ≈ 12px on mobile, sp-4 16) */
  min-height:calc(100dvh - 200px);
  position:relative;
  overflow:hidden;
}
@media(max-width:480px){
  .ovm-root{ margin:0 -12px; }
}

.ovm-scroll{
  position:relative;
  padding:16px 0 32px;
  overflow-x:hidden;
}

/* Pull-to-refresh */
.ovm-ptr{
  height:0; opacity:0; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:6px;
  transition:height .15s ease-out, opacity .15s ease-out;
  color:var(--ovm-text3);
  padding-bottom:6px;
}
.ovm-ptr-ring{
  width:22px; height:22px; border-radius:999px;
  border:2px solid var(--ovm-line2); border-top-color:var(--ovm-primary);
}
.ovm-ptr-label{
  font-size:10px; font-weight:600; letter-spacing:0.6px; text-transform:uppercase;
}
.ovm-ptr-spin .ovm-ptr-ring{
  animation:ovm-spin 0.9s linear infinite;
}
@keyframes ovm-spin{ to{ transform:rotate(360deg); } }

/* Section gap matches design's 24px. */
.ovm-gap-section{ height:24px; }
.ovm-section{ padding:0 16px; }
.ovm-tail{ height:8px; }

/* Filter chip-bar (tap to open sheet) */
.ovm-filterbar{
  width:calc(100% - 32px); margin:0 16px;
  min-height:44px;
  display:flex; align-items:center; gap:6px; justify-content:flex-start;
  background:var(--ovm-surface); border:1px solid var(--ovm-line);
  border-radius:12px; padding:8px 10px 8px 12px; cursor:pointer;
  color:var(--ovm-text); text-align:left;
  font-family:inherit;
}
.ovm-chip{
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 9px; border-radius:999px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--ovm-line2);
  color:var(--ovm-text2);
  font-size:11px; font-weight:600; letter-spacing:0.4px; text-transform:uppercase;
  white-space:nowrap;
}
.ovm-chip-active{
  background:var(--ovm-primary); border-color:var(--ovm-primary); color:#fff;
}
.ovm-store{
  color:var(--ovm-text2); font-size:12px; font-weight:500;
  margin-left:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  flex:1;
}
.ovm-caret{ color:var(--ovm-text3); font-size:14px; margin-right:2px; }

/* Pipe-prefix headings */
.ovm-pipe{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:0 16px; margin-bottom:12px;
}
.ovm-pipe-left{ display:flex; align-items:baseline; gap:8px; min-width:0; }
.ovm-pipe-bar{
  color:var(--ovm-primary); font-weight:700; font-size:18px; line-height:20px;
  letter-spacing:-0.2px;
}
.ovm-pipe-label{
  color:var(--ovm-text); font-size:13px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase;
}
.ovm-pipe-sub{
  color:var(--ovm-text3); font-size:11px; font-weight:500; margin-left:4px; letter-spacing:0.2px;
}
.ovm-pipe-action{
  background:transparent; border:0; padding:6px 0; min-height:28px;
  color:var(--ovm-b20); font-family:inherit; font-size:12px; font-weight:600;
  letter-spacing:0.4px; text-transform:uppercase; cursor:pointer;
}

/* Headline KPIs — 2×2 grid */
.ovm-kpi-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  padding:0 16px;
}
.ovm-kpi{
  background:var(--ovm-surface);
  border:1px solid var(--ovm-line);
  border-radius:12px;
  padding:12px 12px 10px;
  position:relative;
  min-height:84px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.ovm-kpi-big{ padding:14px 14px 12px; min-height:96px; }
.ovm-kpi-label{
  color:var(--ovm-text3);
  font-family:inherit;
  font-size:10px; font-weight:600; letter-spacing:1.2px;
  text-transform:uppercase; margin-bottom:4px;
}
.ovm-kpi-value{
  color:var(--ovm-text);
  font-family:inherit;
  font-size:22px; font-weight:700; letter-spacing:-0.5px;
  line-height:1; margin-top:2px;
}
.ovm-kpi-big .ovm-kpi-value{ font-size:30px; letter-spacing:-0.5px; }
.ovm-kpi-sub{
  color:var(--ovm-text3);
  font-family:inherit;
  font-size:11px; font-weight:500; margin-top:6px;
}
.ovm-accent-blue{ color:var(--ovm-b20); }
.ovm-accent-warn{ color:var(--ovm-warn); }
.ovm-accent-pos{ color:var(--ovm-pos); }

/* Cards */
.ovm-card{
  background:var(--ovm-surface);
  border:1px solid var(--ovm-line);
  border-radius:12px;
  padding:14px;
}
.ovm-card-stack{ display:flex; flex-direction:column; gap:16px; }

/* New vs Used split */
.ovm-split-block .ovm-kpi-label{ margin-bottom:8px; }
.ovm-split-row{
  display:flex; justify-content:space-between;
  font-family:inherit;
  font-size:11px; font-weight:600; letter-spacing:0.6px;
  text-transform:uppercase; margin-bottom:6px;
}
.ovm-split-side{ color:var(--ovm-text2); }
.ovm-split-right{ text-align:right; }
.ovm-split-label{ color:var(--ovm-text2); }
.ovm-split-val{ color:var(--ovm-text); }
.ovm-dot{ display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px; vertical-align:-1px; }
.ovm-split-right .ovm-dot{ margin-right:0; margin-left:6px; }
.ovm-dot-new{ background:var(--ovm-b10); }
.ovm-dot-used{ background:var(--ovm-s40); }
.ovm-split-bar{
  display:flex; height:10px; border-radius:6px; overflow:hidden;
  background:var(--ovm-line);
}
.ovm-split-bar-new{ background:var(--ovm-b10); height:100%; }
.ovm-split-bar > .ovm-split-bar-new{ border-right:0; }
.ovm-split-bar::after{ content:''; flex:1; background:var(--ovm-s40); }
.ovm-split-pct{
  display:flex; justify-content:space-between; margin-top:4px;
  font-family:inherit;
  font-size:10px; font-weight:500; color:var(--ovm-text3);
}

/* Pacing */
.ovm-pacing{ padding:14px 14px 10px; }
.ovm-pacing-head{
  display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px;
}
.ovm-pacing-head-right{ text-align:right; }
.ovm-pacing-num{
  color:var(--ovm-text); font-size:24px; font-weight:700; letter-spacing:-0.4px; margin-top:2px;
  line-height:1;
}
.ovm-pacing-rev{
  color:var(--ovm-text); font-size:18px; font-weight:700; letter-spacing:-0.3px; margin-top:2px;
  line-height:1;
}
.ovm-pacing-bars{
  display:flex; align-items:flex-end; gap:12px; height:120px; padding-bottom:0; position:relative;
}
.ovm-pacing-bar{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0;
}
.ovm-pacing-bar-num{
  color:var(--ovm-text3); font-size:10px; font-weight:600;
}
.ovm-pacing-bar-fill{
  width:100%; flex:1;
  display:flex; align-items:flex-end;
  border-radius:4px;
}
.ovm-pacing-bar-inner{
  width:100%; background:var(--ovm-line2); border-radius:4px;
  min-height:2px;
  transition:height .25s ease-out;
}
.ovm-pacing-bar-proj .ovm-pacing-bar-num{ color:var(--ovm-text); }
.ovm-pacing-bar-proj .ovm-pacing-bar-inner{
  background:linear-gradient(180deg,var(--ovm-primary) 0%,var(--ovm-d30) 100%);
  border:1px solid var(--ovm-b20);
}
.ovm-pacing-bar-label{
  color:var(--ovm-text3); font-size:10px; font-weight:600; letter-spacing:0.4px; text-transform:uppercase;
}
.ovm-pacing-bar-proj .ovm-pacing-bar-label{ color:var(--ovm-b20); }
.ovm-pacing-foot{
  color:var(--ovm-text3); font-size:10px; font-weight:500; padding-top:8px; margin-top:8px;
  border-top:1px solid var(--ovm-line); display:flex; justify-content:space-between;
}

/* Top stores */
.ovm-stores{ padding:4px 14px; }
.ovm-store-row{
  display:flex; align-items:center; gap:10px;
  padding:12px 0;
  min-height:44px;
}
.ovm-store-row-divided{ border-bottom:1px solid var(--ovm-line); }
.ovm-store-rank{
  width:18px; color:var(--ovm-text3);
  font-family:inherit; font-size:11px; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.ovm-store-badge{
  width:16px; height:16px; border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:700; line-height:1;
}
.ovm-store-light{ background:rgba(224,162,62,0.12); color:var(--ovm-warn); }
.ovm-store-thund{ background:rgba(63,191,143,0.12); color:var(--ovm-pos); }
.ovm-store-other{ background:rgba(95,116,148,0.12); color:var(--ovm-text3); }
.ovm-store-mid{ flex:1; min-width:0; }
.ovm-store-name{
  color:var(--ovm-text); font-size:13px; font-weight:600; letter-spacing:-0.1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ovm-store-track{
  display:flex; gap:4px; margin-top:4px; height:4px;
  background:var(--ovm-line); border-radius:2px; overflow:hidden;
}
.ovm-store-fill{ height:100%; background:var(--ovm-b10); border-radius:2px; }
.ovm-store-right{ text-align:right; }
.ovm-store-rev{
  color:var(--ovm-text); font-size:13px; font-weight:700; letter-spacing:-0.2px;
  font-variant-numeric:tabular-nums;
}
.ovm-store-units{
  color:var(--ovm-text3); font-size:10px; font-weight:500; margin-top:2px;
  font-variant-numeric:tabular-nums;
}

/* Quick links */
.ovm-quick-grid{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;
}
.ovm-quick{
  background:var(--ovm-surface); border:1px solid var(--ovm-line);
  border-radius:12px; padding:12px 10px; min-height:64px;
  display:flex; flex-direction:column; justify-content:space-between;
  text-align:left; cursor:pointer;
  font-family:inherit;
}
.ovm-quick-label{ color:var(--ovm-text); font-size:13px; font-weight:600; }
.ovm-quick-sub{ color:var(--ovm-text3); font-size:10px; font-weight:500; margin-top:6px; }

/* States: empty / loading / error */
.ovm-state-wrap{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:48px 32px 24px;
}
.ovm-state-icon{
  width:56px; height:56px; border-radius:14px;
  background:var(--ovm-surface);
  border:1px solid var(--ovm-line2);
  display:flex; align-items:center; justify-content:center;
  color:var(--ovm-text3); font-size:26px;
}
.ovm-state-icon-err{
  background:rgba(227,114,91,0.12);
  border-color:rgba(227,114,91,0.3);
  color:var(--ovm-neg); font-weight:600;
}
.ovm-state-title{
  color:var(--ovm-text); font-family:inherit;
  font-size:16px; font-weight:600; margin-top:18px;
}
.ovm-state-sub{
  color:var(--ovm-text2); font-family:inherit;
  font-size:13px; line-height:1.5; margin-top:8px; max-width:260px;
}
.ovm-state-cta{
  margin-top:20px; min-height:44px; padding:0 18px; border-radius:10px;
  background:var(--ovm-primary); border:0; color:#fff;
  font-family:inherit; font-size:13px; font-weight:700; letter-spacing:0.4px; cursor:pointer;
}

/* Loading skeletons */
.ovm-skel{
  border-radius:8px;
  background:linear-gradient(90deg, var(--ovm-surface) 0%, var(--ovm-raised) 50%, var(--ovm-surface) 100%);
  background-size:200% 100%;
  animation:ovm-pulse 1.4s ease-in-out infinite;
}
@keyframes ovm-pulse{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}
.ovm-skel-bar{ height:44px; margin:0 16px; }
.ovm-skel-kpi{ height:96px; }
.ovm-skel-card{ height:130px; }
.ovm-skel-card-tall{ height:200px; }

/* Empty state mini for cards */
.ovm-empty-mini{
  color:var(--ovm-text3); font-family:inherit;
  font-size:12px; padding:24px 12px; text-align:center;
}

/* Filter sheet (modal) */
.ovm-sheet-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,0.55);
  display:none; align-items:flex-end; justify-content:center;
  z-index:1000;
}
.ovm-sheet-backdrop.ovm-sheet-open{ display:flex; }
.ovm-sheet{
  width:100%; max-width:480px;
  background:var(--ovm-bg);
  border-top-left-radius:20px; border-top-right-radius:20px;
  border-top:1px solid var(--ovm-line2);
  padding:12px 16px 28px;
  font-family:var(--ovm-font);
  color:var(--ovm-text);
  position:relative;
  overflow:hidden;
  transform:translateY(100%);
  transition:transform .25s cubic-bezier(0.16,1,0.3,1);
  max-height:85vh;
  overflow-y:auto;
}
.ovm-sheet.ovm-sheet-open{ transform:translateY(0); }
.ovm-sheet-handle{
  width:36px; height:4px; background:var(--ovm-line2);
  border-radius:2px; margin:0 auto 16px;
}
.ovm-sheet-title{
  display:flex; align-items:baseline; gap:8px;
  font-size:13px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--ovm-text);
  margin-bottom:8px;
}
.ovm-sheet-title .ovm-pipe-bar{ font-size:18px; }
.ovm-sheet-section-label{
  color:var(--ovm-text3); font-size:10px; font-weight:600; letter-spacing:1.2px;
  text-transform:uppercase; margin-top:14px; margin-bottom:6px;
}
.ovm-sheet-row{ display:flex; gap:8px; }
.ovm-pill{
  flex:1; min-height:44px; border-radius:10px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--ovm-line2);
  color:var(--ovm-text2);
  font-family:inherit; font-size:12px; font-weight:700; letter-spacing:0.6px;
  text-transform:uppercase; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.ovm-pill-active{
  background:var(--ovm-primary); border-color:var(--ovm-primary); color:#fff;
}
.ovm-pill-ico{ font-size:11px; }
.ovm-sheet-store-btn{
  width:100%; min-height:44px; padding:10px 14px; border-radius:10px;
  background:rgba(255,255,255,0.03); border:1px solid var(--ovm-line2);
  color:var(--ovm-text); font-family:inherit; font-size:13px; font-weight:500;
  display:flex; justify-content:space-between; align-items:center; cursor:pointer;
}
.ovm-sheet-apply{
  width:100%; min-height:48px; margin-top:20px; border-radius:12px;
  background:var(--ovm-primary); border:0; color:#fff;
  font-family:inherit; font-size:14px; font-weight:700; letter-spacing:0.4px; cursor:pointer;
}

/* Store-picker sub-sheet */
.ovm-store-picker{
  position:absolute; inset:0;
  background:var(--ovm-bg);
  transform:translateX(100%);
  transition:transform .22s ease-out;
  padding:12px 16px 28px;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.ovm-sheet-picker-open .ovm-store-picker{ transform:translateX(0); }
.ovm-store-picker-head{
  display:flex; align-items:center; gap:8px; margin-bottom:14px;
}
.ovm-store-picker-back{
  background:transparent; border:0; color:var(--ovm-b20);
  font-family:inherit; font-size:13px; font-weight:600; cursor:pointer;
  padding:6px 0; min-height:32px;
}
.ovm-store-picker-title{
  color:var(--ovm-text); font-size:13px; font-weight:600;
  letter-spacing:1.2px; text-transform:uppercase;
}
.ovm-store-picker-list{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.ovm-store-picker-row{
  display:flex; justify-content:space-between; align-items:center;
  width:100%; min-height:44px; padding:10px 4px;
  background:transparent; border:0; border-bottom:1px solid var(--ovm-line);
  color:var(--ovm-text); font-family:inherit; font-size:14px; font-weight:500;
  text-align:left; cursor:pointer;
}
.ovm-store-picker-row-active{ color:var(--ovm-b20); }
.ovm-pick-check{ color:var(--ovm-primary); font-weight:700; }

/* While the mobile flag is active and we're rendering mobile, hide ALL
   non-overview panels' redundant chrome inside #panel-overview only.
   (Also collapse the desktop overview-content quietly.) */
@media(max-width:768px){
  /* If mobile root is mounted with content, prefer it; the JS dispatcher
     toggles display, this is purely defensive. */
  body.ovm-active #overview-content{ display:none !important; }
  body.ovm-active #panel-overview > #empty{ display:none !important; }
}