/* ============================================================
   Nadzorna plošča — only what app.css does not already have.

   The page is built out of the existing vocabulary: `.card`, `.cal-grid` and
   `.cal-day` for the heatmap, `.calls-table` for the računi, `.badge*` for the
   states, `.empty-state`, `.muted`, `.svc-card__head`. What is left over and
   lives here is the stat tiles, the label/value rows, and the heatmap's tints
   — three things that had nowhere else to come from.

   No new colours. Every value below is either one of app.css's custom
   properties or the pine `rgba(16, 120, 106, …)` that `.cal-day.has-appts`
   already paints a busy day with — written out as literals for the same reason
   app.css writes it out: there is no `--pine-rgb` token to alpha-compose
   against, and app.css is not this file's to change.
   ============================================================ */

/* ---- the month stepper ------------------------------------------------
   `.cal-nav` supplies the two square buttons; this only puts the month
   between them and keeps the three on one baseline. `capitalize` because
   Slovene month names are lower case in running text but this one is a
   heading — the same thing `.cal-head h2` does on the first tab. */
.np-period { align-items: center; gap: .6rem; }
.np-period h2 {
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: capitalize;
  min-width: 9.5rem;   /* "maj 2026" and "september 2026" must not move the arrows */
  text-align: center;
}

/* ---- the four tiles ---------------------------------------------------
   `auto-fit` rather than a fixed four columns: at 1180px they are four across,
   at tablet width two, and on a phone one — without a breakpoint per step. The
   floor of 11rem is what "Predvidoma še klicev" needs before its label wraps
   into three lines. */
.np-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .75rem;
  margin-bottom: 1.25rem;
}

.np-tile { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .15rem; }
.np-tile__label {
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-faint);
}
.np-tile__value { font-size: 1.5rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
/* The note is the honest half of the tile — what the number is *of*, and for
   the estimate, what it rests on. It is small, but it is never optional: a
   value with its note cropped is a claim this page must not make. */
.np-tile__note { font-size: .78rem; color: var(--ink-soft); line-height: 1.4; }

/* ---- panels -----------------------------------------------------------
   Stroški and SMS side by side, because they answer one question between them
   and an owner comparing them should not have to scroll. They stack at the
   same width `.cal-layout` does, so the whole dashboard folds at one place. */
.np-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; margin-bottom: 1.25rem; }
@media (max-width: 860px) { .np-cols { grid-template-columns: 1fr; } }

.np-panel { padding: 1.25rem; margin-bottom: 1.25rem; }
.np-cols .np-panel { margin-bottom: 0; }
.np-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .9rem; flex-wrap: wrap; }
.np-panel__head h2 { font-size: 1rem; font-weight: 700; }

/* ---- label / value rows ----------------------------------------------
   A charge is a label, what it is made of, and an amount. The middle part is
   the one that makes the amount checkable — *3 klici × 0,10 €* — so it sits
   under the label rather than in a tooltip. */
.np-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line-soft); }
.np-row:last-of-type { border-bottom: 0; }
.np-row__label { font-size: .88rem; }
.np-row__label em { display: block; font-style: normal; font-size: .76rem; color: var(--ink-faint); margin-top: .1rem; }
.np-row__value { font-size: .92rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* The sum, marked by a heavier rule above it rather than a colour: it is the
   same kind of number as the ones above, just the last one. */
.np-row--total { border-top: 1px solid var(--line); border-bottom: 0; margin-top: .2rem; padding-top: .7rem; }
.np-row--total .np-row__value { font-size: 1.05rem; }

/* Sentences that stand where a row would otherwise print a zero — "nič
   doplačila", "račun se izda po koncu meseca", the locked add-on. */
.np-note { font-size: .82rem; color: var(--ink-soft); line-height: 1.5; margin-top: .7rem; }

/* Stroški and SMS stack into one column of `.np-cols` so the heatmap can have
   the other. It used to sit in a card of its own below them, where — capped at
   36rem, for the reason under `.np-heat` — it filled half the width and left
   the rest of the card blank. A column is about 36rem, so the cap now lands
   where the card ends instead of inside it. */
.np-stack { display: flex; flex-direction: column; gap: 1.25rem; }

/* ---- the heatmap ------------------------------------------------------
   `.cal-grid` and `.cal-day` do the geometry; this does the tint. Capped in
   width because `.cal-day`'s square aspect ratio across a full-width card
   would give a month of 160px tiles — a wall, not a shape to read at a
   glance. */
.np-heat { max-width: 36rem; }

/* `.cal-day` is a clickable control on the first tab and carries a pointer
   cursor and a hover border for it. Nothing here opens anything yet, and a
   pointer over a cell that does nothing is a promise the page does not keep. */
.np-heat .np-day { cursor: default; }
.np-heat .np-day:hover { border-color: transparent; }

/* **A day with no calls is plain, not the palest shade of "some".** Level 1 has
   to mean at least one call, or a salon reading its month sees activity on
   every day it was closed. */
.np-day--empty { background: transparent; color: var(--ink-faint); }

/* Four steps of the pine `.cal-day.has-appts` already uses, so a busy day looks
   the same on both calendars in this dashboard. The top step stays light enough
   that `--ink` on it is still comfortably readable — the number in the cell is
   not decoration. */
.np-l1 { background: rgba(16, 120, 106, .10); }
.np-l2 { background: rgba(16, 120, 106, .22); }
.np-l3 { background: rgba(16, 120, 106, .36); }
.np-l4 { background: rgba(16, 120, 106, .52); }
.np-l3, .np-l4 { font-weight: 600; }

.np-legend { display: flex; align-items: center; gap: .3rem; font-size: .74rem; color: var(--ink-faint); }
/* The border is what makes the first swatch visible at all: level 1 is a 10 %
   pine wash and on a white card it is otherwise an empty gap in the legend. */
.np-swatch { width: .85rem; height: .85rem; border-radius: 3px; display: inline-block; border: 1px solid var(--line-soft); }

/* ---- računi -----------------------------------------------------------
   `.svc-card` + `.calls-table`, the same pairing the Storitve tab uses for a
   list inside a card. Two things have to be undone: the table's rows are
   clickable there and are not here (there is no invoice-detail page), and the
   card's own bottom padding assumes a table that ends the card. */
.np-invoices { margin-bottom: 1.25rem; }
.np-table tbody tr { cursor: default; }
.np-invoice__number { font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  /* Zapadlost goes first on a narrow screen: the status badge already says
     "Zapadel" when the date is the thing that matters, so the column is the
     detail and not the signal. */
  .np-table th:nth-child(3), .np-table td:nth-child(3) { display: none; }
  .np-period h2 { min-width: 7.5rem; font-size: .95rem; }
}

/* ---- a tile that carries a verdict -------------------------------------
   Only *Še na voljo* uses these, and only when `pace()` in `nadzorna.js`
   actually reaches one. Three tones, the same three this dashboard already
   means by pine / amber / red on `.badge-ok`, `.badge-warn` and
   `.badge-fault` — a fourth vocabulary for the same three states would be a
   second product.

   **The colour is on the value, not the tile.** A whole card washed amber
   reads as an alert about the card; the thing being judged is the number.
   And the note under it always says the same thing in words, so nothing here
   is carried by hue alone. */
.np-tile__value--ok    { color: var(--pine); }
.np-tile__value--warn  { color: #8A5D00; }
.np-tile__value--alert { color: var(--alert); }