/* ============================================================================
   Sales Team HQ — Direction 7 overlay ("v3"), rolled out onto the real app.
   Additive only: everything here is scoped under html[data-design="v3"], so
   Classic (the app's own look, data-design absent or "classic") renders
   byte-for-byte as before. Off by default — a setter opts in from the picker
   this file injects (design-v3.js), preference kept in localStorage.

   Ported from mocks/v2/shared/tokens.css + components.css (Ethan's dashboard
   skill), trimmed to only what the real app's pages actually use — grows as
   more pages get their v3 treatment, see "PAGE: <name>" section markers below.
   See .claude/skills/glass-dashboard-builder/references/rolling-out-onto-a-live-app.md
   for the rollout rules this file follows.
   ========================================================================== */

html[data-design="v3"] {
  --v3-hot: #33d17e;
  --v3-warm: #f2a93b;
  --v3-cold: #84848c;
  --v3-blue: #4d8dff;
  --v3-ruby: #ff3b4e;
  --v3-card-bg: linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.022) 45%, rgba(255,255,255,0) 75%), var(--panel);
  --v3-card-border: rgba(255,255,255,.16);
  --v3-card-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 1px 2px rgba(0,0,0,.45), 0 24px 40px -20px rgba(0,0,0,.85);
  --v3-glow-hot: 0 0 0 1.5px rgba(51,209,126,.4), 0 0 0 6px rgba(51,209,126,.12), 0 0 32px -4px rgba(51,209,126,.75);
  --v3-glow-ruby: 0 0 0 1.5px rgba(255,59,78,.44), 0 0 0 6px rgba(255,59,78,.14), 0 0 36px -4px rgba(255,59,78,.8);
}

/* ambient mesh, same recipe as the mock board: corner washes, never covers
   text without a plain surface under it */
html[data-design="v3"] body {
  background:
    radial-gradient(1300px 820px at 12% -12%, rgba(255,59,78,.065), transparent 55%),
    radial-gradient(1100px 760px at 104% -6%, rgba(77,141,255,.055), transparent 52%),
    var(--bg);
}

/* every real .card gets the layered v3 surface; a category wash (cat-hot /
   cat-warm / cat-cold / cat-blue / cat-ruby) is added by each page's own JS,
   reading state it already computed — this file never decides what's hot. */
html[data-design="v3"] .card {
  background: var(--v3-card-bg);
  border-color: var(--v3-card-border);
  box-shadow: var(--v3-card-shadow);
  border-radius: 16px;
}
html[data-design="v3"] .card.cat-hot { background: linear-gradient(165deg, rgba(51,209,126,.14), transparent 55%), var(--v3-card-bg); }
html[data-design="v3"] .card.cat-warm { background: linear-gradient(165deg, rgba(242,169,59,.16), transparent 55%), var(--v3-card-bg); }
html[data-design="v3"] .card.cat-cold { background: linear-gradient(165deg, rgba(132,132,140,.10), transparent 55%), var(--v3-card-bg); }
html[data-design="v3"] .card.cat-blue { background: linear-gradient(165deg, rgba(77,141,255,.14), transparent 55%), var(--v3-card-bg); }
/* glow is reserved for real urgency only (an open alert needing you), never decoration */
html[data-design="v3"] .card.cat-ruby { background: linear-gradient(165deg, rgba(255,59,78,.16), transparent 55%), var(--v3-card-bg); box-shadow: var(--v3-glow-ruby); border-color: rgba(255,59,78,.42); }

/* objective / alert rows: same wash idea, lighter touch since they're inside a card */
html[data-design="v3"] .obj { border-radius: 10px; padding: 10px 8px; margin-bottom: 2px; }
html[data-design="v3"] .obj.cat-hot { background: rgba(51,209,126,.08); }
html[data-design="v3"] .obj.cat-ruby { background: rgba(255,59,78,.10); }

html[data-design="v3"] .pill { background: var(--v3-card-bg); border-color: var(--v3-card-border); }
html[data-design="v3"] .stat { background: var(--v3-card-bg); border-color: var(--v3-card-border); }
html[data-design="v3"] .chip { box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }

/* ---- picker bar (design-v3.js injects the markup; chrome lives here, reuses .seg) ---- */
.v3-picker-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 14px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--bg); }
.v3-picker-bar .grp { display: flex; align-items: center; gap: 6px; }
.v3-picker-bar .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.v3-picker-bar .seg button { font-size: 11px; padding: 5px 10px; }