/* ==========================================================================
   2G Energy Rental — the dashboard deck

   Built to be read in one look, without scrolling, on a desktop screen.
   Five bands, top to bottom, in the order the question gets asked:

     1. How big is the pipeline, and where does it sit?
     2. What do I do about it?
     3. How many of everything?
     4. What shape are the two funnels in?
     5. The quiet stuff — on rent, and what has no data source yet.

   Design System only: white cards on the #eceded canvas, Noto Sans, 2G green
   for figures, light-green as a tint, grays for everything else. No
   underlines, no gradients, no dark mode.
   ========================================================================== */

/* Mobile-first single column. The two-column deck kicks in at 1080px, where
   there is enough width to stop stacking and start using the screen. */
.deck {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-sm) var(--space-lg) var(--space-md);
  display: grid;
  gap: var(--space-sm);
}

/* Short laptop screens — 1366x768 and the like. Tighten the header and the
   gaps so the deck still lands in one screen. Same styling, less air. This
   lives in deck.css, so it only affects the dashboard: the tool pages keep
   the full-size header. */
@media (min-width: 1080px) and (max-height: 820px) {
  .pgh {
    padding: var(--space-sm) 28px;
  }

  .pgh__title {
    font-size: var(--text-h3) !important;
  }

  .deck {
    gap: var(--space-sm);
    padding-top: var(--space-xs);
  }

  .deck__panel,
  .deck__tile {
    padding: var(--space-sm) var(--space-md);
  }
}

@media (min-width: 1080px) {
  .deck {
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    grid-template-areas:
      'banner  banner'
      'hero    where'
      'tiles   funnels'
      'alert   alert'
      'foot    foot';
    gap: var(--space-md);
    align-items: stretch;
  }

  .deck__banner   { grid-area: banner; }
  .deck__a-hero   { grid-area: hero; }
  .deck__a-where  { grid-area: where; }
  .deck__a-tiles  { grid-area: tiles; }
  .deck__a-funnels{ grid-area: funnels; }
  .deck__a-alert  { grid-area: alert; }
  .deck__a-foot   { grid-area: foot; }

  /* Left column stacks its four counts 2x2 so it matches the height of the
     funnels beside it. */
  .deck__a-tiles {
    grid-template-columns: 1fr 1fr;
  }

  .deck__a-funnels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }
}

/* Below 1080px the funnels still sit side by side while there is room. */
.deck__a-funnels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-sm);
}

/* Small green-on-gray section label. Sets every heading in the deck so the
   eye can skip them and go straight to the numbers. */
.deck__eyebrow {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.09em;
  color: var(--gray-60);
}

.deck .card,
.deck__panel {
  background: var(--white);
  border: var(--border-width) solid var(--gray-40);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
}

/* Seven verticals in one column ran the hero band to 386px. Two columns of
   short rows uses the width instead of the height. */
.deck__bars--twoCol {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-sm) var(--space-xl);
}

.deck__banner {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  border-left: 4px solid var(--color-warning);
  background: var(--white);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
  color: var(--gray-80);
}

/* ---- Band 1 — the number, and where it sits ------------------------------ */

/* The one number. Deliberately oversized — it is the headline of the page. */
.deck__a-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.deck__a-hero .kpi-stat__value {
  display: block;
  font-size: clamp(3.5rem, 8vw, 5.5rem);
  font-weight: var(--font-weight-bold);
  line-height: 0.95;
  color: var(--2g-green);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.deck__a-hero .kpi-stat__unit {
  font-size: 0.32em;
  margin-left: 0.2em;
  letter-spacing: 0.04em;
  color: var(--2g-green);
}

.deck__a-hero .kpi-stat__label {
  display: none;                     /* the eyebrow already says "Pipeline" */
}

.deck__a-hero .kpi-stat__sub {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--text-body);
  color: var(--gray-60);
}

.deck__asof {
  margin: var(--space-sm) 0 0;
  font-size: var(--text-caption);
  color: var(--gray-60);
  font-variant-numeric: tabular-nums;
}

/* ---- Bars ----------------------------------------------------------------
   Label and figure on one line, thin track beneath. Reads as a list first
   and a chart second, which is the right order for scanning.
------------------------------------------------------------------------- */

.deck__bars {
  display: grid;
  gap: var(--space-md);
}

.deck__bars--tight {
  gap: var(--space-sm);
}

.deck__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--space-md);
  align-items: baseline;
}

.deck__bar__label {
  font-size: var(--text-small);
  color: var(--gray-80);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deck__bar__value {
  font-size: var(--text-small);
  font-weight: var(--font-weight-bold);
  color: var(--gray-80);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.deck__bar__track {
  grid-column: 1 / -1;
  height: 6px;
  background: var(--gray-10);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.deck__bar__fill {
  display: block;
  height: 100%;
  background: var(--2g-green);
  border-radius: var(--radius-pill);
}

/* A vertical with leads but no MW: the empty track is the message. */
.deck__bar--empty .deck__bar__label,
.deck__bar--empty .deck__bar__value {
  color: var(--gray-60);
}

.deck__bar--empty .deck__bar__fill {
  background: var(--gray-40);
}

/* ---- Band 2 — what to do about it ---------------------------------------- */

.deck__alert {
  background: var(--light-green);
  border: var(--border-width) solid var(--2g-green);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: center;
}

.deck__alertTitle {
  margin: 0;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.09em;
  color: var(--2g-green);
  white-space: nowrap;
}

.deck__alertItems {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-xl);
}

.deck__action {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-size: var(--text-small);
  color: var(--gray-80);
}

.deck__action b {
  font-size: var(--text-h4);
  font-weight: var(--font-weight-bold);
  color: var(--2g-green);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.deck__action--none {
  color: var(--gray-60);
}

/* ---- Band 3 — the counts -------------------------------------------------- */

.deck__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
}

.deck__tile {
  background: var(--white);
  border: var(--border-width) solid var(--gray-40);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
}

.deck__tile__value {
  display: block;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--gray-80);
  font-variant-numeric: tabular-nums;
}

.deck__tile__label {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--text-small);
  color: var(--gray-60);
}

.deck__tile--warn {
  border-color: var(--color-danger);
}

.deck__tile--warn .deck__tile__value {
  color: var(--color-danger);
}

/* ---- Band 4 — the two funnels --------------------------------------------- */

/* ---- Band 5 — the quiet row ------------------------------------------------ */

.deck__foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  background: var(--white);
  border: var(--border-width) solid var(--gray-40);
  border-radius: var(--radius-md);
}

.deck__counters {
  display: flex;
  gap: var(--space-xl);
}

.deck__counter__value {
  font-size: var(--text-h4);
  font-weight: var(--font-weight-bold);
  color: var(--gray-60);
  font-variant-numeric: tabular-nums;
}

.deck__counter__label {
  font-size: var(--text-caption);
  color: var(--gray-60);
  margin-left: var(--space-xs);
}

.deck__pending {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: flex-end;
}

.deck__chip {
  font-size: var(--text-caption);
  color: var(--gray-60);
  background: var(--gray-10);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  white-space: nowrap;
}

/* ---- Phone ------------------------------------------------------------------
   One column, and the hero divider becomes a rule above the split.
------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .deck {
    padding: var(--space-md) var(--space-md) var(--space-2xl);
    gap: var(--space-sm);
  }

  .deck__alert,
  .deck__foot {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .deck__pending {
    justify-content: flex-start;
  }

  .deck__tiles {
    grid-template-columns: 1fr 1fr;
  }
}