/*! Selvar — the revenue desk of a commercial solar company — © 2026 Hasib (OVERSHOOT). All rights reserved. Licensed to gusttavo.gimenis@byotti.com.br (order INS-959E4F60), not sold: see LICENSE.md. */
/* Overview — runway hero, Copilot, KPI tiles, bookings, stages, today, risk, leaders. */

.ov-grid {
  display: grid; gap: var(--gap); grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "runway runway runway runway runway runway runway runway copilot copilot copilot copilot"
    "tiles tiles tiles tiles tiles tiles tiles tiles copilot copilot copilot copilot"
    "bookings bookings bookings bookings bookings bookings bookings bookings stages stages stages stages"
    "today today today today risk risk risk risk risk leaders leaders leaders";
}

/* ── the runway ───────────────────────────────────────────────────────── */
.runway { padding: 24px 24px 20px; }
.runway__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.runway__k { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.runway__fig { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.runway__fig .num { font-size: var(--fs-display); font-weight: 600; letter-spacing: -.025em; line-height: 1; }
.runway__quota { display: grid; text-align: right; line-height: 1.25; }
.runway__quota small { color: var(--muted); }
.runway__quota b { font-size: var(--fs-3xl); font-weight: 600; letter-spacing: -.01em; }
.runway__track { position: relative; margin: 54px 0 46px; }
.runway__rail { position: relative; height: 54px; border-radius: 16px; background: repeating-linear-gradient(-45deg, var(--well) 0 6px, transparent 6px 12px), var(--card-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.runway__seg { position: absolute; top: 0; bottom: 0; transform-origin: left; }
.runway__seg--won { background: var(--c-cobalt); border-radius: 16px 0 0 16px; }
.runway__seg--commit { background: var(--c-amber); }
.runway__seg--best { background: color-mix(in srgb, var(--c-sky) 45%, var(--card)); border-right: 2px solid var(--c-sky); }
.runway__tick { position: absolute; top: 10px; bottom: 10px; width: 1px; background: rgba(255, 255, 255, .35); mix-blend-mode: overlay; }
.runway__pace { position: absolute; top: -12px; bottom: -12px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 2px; }
.runway__pace b, .runway__pace small { position: absolute; left: 8px; white-space: nowrap; font-size: var(--fs-xs); }
.runway__pace b { top: auto; bottom: -20px; font-weight: 700; }
.runway__pace small { bottom: -36px; color: var(--muted); }
.runway__pace::before { content: ''; position: absolute; top: -5px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--text); }
.runway__band { position: absolute; top: -34px; height: 18px; border-radius: 99px; background: color-mix(in srgb, var(--c-amber) 22%, transparent); border: 1px dashed var(--c-amber); transform-origin: center; }
.runway__band i { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--c-amber); box-shadow: 0 0 0 3px var(--card); }
.runway__band b { position: absolute; bottom: calc(100% + 4px); left: 50%; translate: -50% 0; white-space: nowrap; font-size: var(--fs-xs); font-weight: 700; color: var(--t-amber); }
.runway__flag { position: absolute; top: -14px; width: 26px; height: 26px; margin-left: -4px; color: var(--text); }
.runway__flag .ico { width: 22px; height: 22px; stroke-width: 2; }
.runway__legend { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.runway__legend li { display: flex; align-items: center; gap: 7px; }
.runway__legend b { color: var(--text); font-weight: 600; }
.runway__swatch { width: 12px; height: 12px; border-radius: 4px; }
.runway__swatch--won { background: var(--c-cobalt); } .runway__swatch--commit { background: var(--c-amber); }
.runway__swatch--best { background: color-mix(in srgb, var(--c-sky) 45%, var(--card)); box-shadow: inset -2px 0 var(--c-sky); }
.runway__swatch--gap { background: repeating-linear-gradient(-45deg, var(--line-2) 0 3px, transparent 3px 6px), var(--card-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.runway__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 20px; border-radius: 16px; overflow: hidden; background: var(--line); border: 1px solid var(--line); }
.runway__stats > div { background: var(--card); padding: 12px 16px; }
.runway__stats dt { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.runway__stats dd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.runway__stats .num { font-size: var(--fs-3xl); font-weight: 600; letter-spacing: -.01em; }
.runway__stats small { color: var(--muted); }

/* ── Copilot ──────────────────────────────────────────────────────────── */
.copilot { display: flex; flex-direction: column; gap: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--c-cobalt) 7%, var(--card)), var(--card) 46%); }
.copilot__head { display: flex; align-items: center; gap: 12px; }
.copilot__head > div { flex: 1; min-width: 0; }
.orb { width: 44px; height: 44px; flex: none; }
.orb__ring { fill: none; stroke: var(--c-cobalt); stroke-width: 2; stroke-linecap: round; }
.orb__ring--2 { stroke: var(--c-amber); }
.orb__core { fill: var(--c-cobalt); }
.copilot__line { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.01em; line-height: 1.35; min-height: 3.9em; }
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--c-cobalt); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }
.copilot__list { display: grid; gap: 8px; flex: 1; align-content: start; }
.sig { display: flex; gap: 12px; padding: 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.sig--empty { display: block; border-style: dashed; }
.sig__ico { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--c) var(--tint), var(--card)); color: var(--t); }
.sig__ico .ico { width: 17px; height: 17px; }
.sig__body { flex: 1; min-width: 0; display: grid; gap: 6px; }
.sig__title { min-height: 24px; padding: 3px 0; text-align: left; font-weight: 600; font-size: var(--fs-md); line-height: 1.3; }
.sig__title:hover { color: var(--primary); }
.sig__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: var(--fs-xs); }
.sig__meta .pill { height: 20px; padding: 0 8px; font-size: var(--fs-2xs); }
.sig__acts { display: flex; align-items: center; gap: 6px; }
.sig__acts .btn { max-width: 100%; overflow: hidden; }
.sig__acts .btn .ico { width: 15px; height: 15px; }
.ask { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 6px 0 14px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--card); }
.ask:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.ask > .ico { color: var(--c-cobalt); }
.ask input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font-size: var(--fs-md); }
.ask__go { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--ink); color: var(--on-ink); }

/* ── KPI tiles ────────────────────────────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.tile { display: grid; gap: 6px; align-content: start; padding: 16px 16px 10px; border-radius: var(--r-tile); min-width: 0; overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
/* one focal tile in the brand colour; the rest stay neutral (60 · 30 · 10) */
.tile--feature { background: linear-gradient(160deg, var(--tile-feature-top), var(--tile-feature)); border-color: transparent; color: var(--on-feature); --c-paper: rgba(255, 255, 255, .9); }
.tile header { display: flex; align-items: center; gap: 8px; }
.tile__ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--c-cobalt) var(--tint), var(--card)); color: var(--t-cobalt); }
.tile--feature .tile__ico { background: rgba(255, 255, 255, .16); color: inherit; }
.tile__ico .ico { width: 16px; height: 16px; }
.tile__label { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.tile--feature .tile__label, .tile--feature .tile__foot small { color: var(--on-feature-dim); }
.tile__fig .num { font-size: var(--fs-3xl); font-weight: 600; letter-spacing: -.01em; }
.tile__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tile__foot small { color: var(--muted); font-size: var(--fs-xs); }
.tile--feature .delta { color: var(--on-feature); }
.tile .spark { height: 28px; margin-top: 2px; }

/* ── stages ───────────────────────────────────────────────────────────── */
.stages { display: grid; }
.stages__row { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 6px; margin: 0 -6px; border-radius: 12px; }
.stages__row:hover { background: var(--well); }
.stages__name { display: grid; font-weight: 600; font-size: var(--fs-md); line-height: 1.2; }
.stages__name small { color: var(--muted); font-weight: 500; }
.stages__bar .meter { height: 12px; border-radius: 6px; }
.stages__row b { font-weight: 600; min-width: 56px; text-align: right; }
.stages__conv { display: flex; align-items: center; gap: 4px; padding: 0 0 0 4px; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.stages__conv .ico { width: 13px; height: 13px; }
.stages__foot { display: flex; gap: 8px; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-sm); }
.stages__foot .ico { width: 16px; height: 16px; }

/* ── today ────────────────────────────────────────────────────────────── */
.agenda { display: grid; gap: 2px; }
.agenda__row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 6px; margin: 0 -6px; border-radius: 12px; text-align: left; width: calc(100% + 12px); }
.agenda__row:hover { background: var(--well); }
.agenda__time { display: grid; width: 62px; flex: none; font-weight: 600; font-size: var(--fs-md); line-height: 1.2; }
.agenda__time small { color: var(--muted); font-weight: 500; }
.agenda__bar { width: 4px; align-self: stretch; border-radius: 4px; background: var(--c); flex: none; }
.agenda__body { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.agenda__body b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda__body small { color: var(--muted); }
.agenda .is-past { opacity: .55; }
.agenda__now { display: flex; align-items: center; gap: 8px; margin: 4px 0; color: var(--t-bad); font-size: var(--fs-xs); font-weight: 700; }
.agenda__now i { flex: 1; order: 2; height: 1.5px; background: var(--c-bad); position: relative; }
.agenda__now::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c-bad); }

/* ── risk ─────────────────────────────────────────────────────────────── */
.risk { display: grid; }
.risk li + li { border-top: 1px solid var(--line); }
.risk__row { width: calc(100% + 12px); margin: 0 -6px; display: grid; grid-template-columns: minmax(0, 1.3fr) auto auto 24px; align-items: center; gap: 12px; padding: 10px 6px; border-radius: 12px; text-align: left; }
.risk__row:hover { background: var(--well); }
.risk__main { display: grid; min-width: 0; line-height: 1.3; }
.risk__main b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.risk__main small, .risk__val small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.risk__val { display: grid; text-align: right; line-height: 1.3; }
.risk__val b { font-weight: 600; }

/* ── leaders ──────────────────────────────────────────────────────────── */
.leaders { display: grid; gap: 4px; }
.leaders li { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.leaders__rank { width: 22px; text-align: center; font-weight: 700; font-size: var(--fs-xs); color: var(--muted); flex: none; }
.leaders__rank.is-first { color: var(--t-amber); }
.leaders__rank .ico { width: 18px; height: 18px; margin: 0 auto; }
.leaders__body { flex: 1; min-width: 0; display: grid; gap: 5px; }
.leaders__body b { font-weight: 600; font-size: var(--fs-md); }
.leaders__pct { font-weight: 600; font-size: var(--fs-md); min-width: 42px; text-align: right; }

/* ── widths ───────────────────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .ov-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      "runway runway runway runway runway runway"
      "tiles tiles tiles tiles tiles tiles"
      "copilot copilot copilot stages stages stages"
      "bookings bookings bookings bookings bookings bookings"
      "today today today leaders leaders leaders"
      "risk risk risk risk risk risk";
  }
}
@media (max-width: 999px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-grid {
    grid-template-areas:
      "runway runway runway runway runway runway"
      "tiles tiles tiles tiles tiles tiles"
      "copilot copilot copilot copilot copilot copilot"
      "bookings bookings bookings bookings bookings bookings"
      "stages stages stages leaders leaders leaders"
      "today today today today today today"
      "risk risk risk risk risk risk";
  }
}
@media (max-width: 760px) {
  .ov-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "runway" "tiles" "copilot" "bookings" "stages" "today" "risk" "leaders"; gap: 12px; }
  .tiles { gap: 12px; }
  .tile { padding: 14px 14px 8px; }
  .tile__fig .num { font-size: 18px; }
  .runway { padding: 18px 16px 16px; }
  .runway__head { flex-direction: column; gap: 6px; }
  .runway__quota { text-align: left; display: flex; gap: 8px; align-items: baseline; }
  .runway__quota b { font-size: var(--fs-xl); }
  .runway__rail { height: 42px; border-radius: 12px; }
  .runway__seg--won { border-radius: 12px 0 0 12px; }
  .runway__stats { grid-template-columns: 1fr 1fr; }
  .runway__stats > div:last-child { grid-column: 1 / -1; }
  .runway__stats .num { font-size: var(--fs-xl); }
  .copilot__line { font-size: var(--fs-lg); min-height: 0; }
  .ask input { font-size: 16px; }
  .risk__row { grid-template-columns: minmax(0, 1fr) auto; }
  .risk__why { grid-column: 1; grid-row: 2; }
  .risk__row > .av { display: none; }
}