/* ═══ Overview ═══════════════════════════════════════════════════
   Built from the existing tokens and components (.tile, .card, .list-item,
   .banner, .pill, .sdot). New vocabulary only where there was none.

   Colour: green / amber / red appear ONLY where they report the state of stock
   (tokens.css). Order progress, KPI tiles and the category bars use the accent
   and neutrals, so a red "past date" is never competing with decoration.
   ═══════════════════════════════════════════════════════════════ */

.dash{display:flex;flex-direction:column}
.dash-sec+.dash-sec{margin-top:22px}
.dash-sec .sec-head{margin-top:0}
.dash-sec .sec-head h2{white-space:nowrap}
.dash-sec .sec-head .note{text-align:right}

/* Two reading columns on a desk or landscape tablet; one on a phone. */
.dash-cols{display:grid;gap:0 20px;margin-top:6px}
.dash-col{display:flex;flex-direction:column;min-width:0}
.dash-col+.dash-col{margin-top:22px}
@media (min-width:1000px){
  .dash-cols{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}
  .dash-col+.dash-col{margin-top:0}
  .dash-cols+.dash-cols{margin-top:26px}
}
.dash-cols+.dash-cols{margin-top:22px}

/* ── primary actions: the three things a picker starts the day with ── */
.dash-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.dash-actions .dash-act:first-child{grid-column:1/-1}
@media (min-width:720px){
  .dash-actions{grid-template-columns:repeat(3,1fr)}
  .dash-actions .dash-act:first-child{grid-column:auto}
}
.dash-act{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic t" "ic s";
  column-gap:14px;align-items:center;justify-items:start;text-align:left;min-height:68px;padding:10px 16px}
.dash-act-ic{grid-area:ic;width:28px;height:28px;display:block}
.dash-act-t{grid-area:t;font-weight:700;font-size:var(--fs-title);line-height:1.2}
.dash-act-s{grid-area:s;font-size:var(--fs-meta);font-weight:500;opacity:.78;min-width:0;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* "Overdue" is a delivery problem, not a stock one — so no red or amber:
   an inverted neutral edge, the same trick the offline pill uses. */
.banner.overdue{background:var(--surface-3);border-left-color:var(--text);color:var(--text-sub)}
.banner.overdue strong{color:var(--text)}

/* ── KPI tiles ── */
.tiles.kpis{margin-bottom:6px}
.tiles.kpis .tile{min-height:96px}
.tile .s{display:block;font-size:var(--fs-meta);color:var(--text-muted);line-height:1.3;margin-top:3px}

/* On a phone the eight tiles would fill two screens before today's drops appear:
   one swipeable row instead, so the work is still the first thing under the buttons. */
@media (max-width:639px){
  .tiles.kpis{display:flex;overflow-x:auto;gap:10px;margin:0 calc(-1 * var(--gutter)) 6px;
    padding:2px var(--gutter);scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .tiles.kpis::-webkit-scrollbar{display:none}
  .tiles.kpis .tile{flex:0 0 156px;scroll-snap-align:start}
}

/* ── progress bars: accent, never a stock colour ── */
.dash-progress{height:6px;background:var(--border);border-radius:var(--r-pill);overflow:hidden;margin-bottom:12px}
.dash-progress.sm{height:4px;margin:10px 0 0}
.dash-progress>span{display:block;height:100%;background:var(--accent);border-radius:inherit;
  transition:width var(--dur-slow) var(--ease-out)}

/* ── today's drops ── */
.drop{display:block;width:100%;text-align:left;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-md);padding:12px 14px;margin-bottom:10px;min-height:68px;
  transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.drop:hover{background:var(--surface-2-hover)}
.drop:active{background:var(--surface-3)}
.drop.is-done{opacity:.68}
.drop-top{display:flex;align-items:flex-start;gap:12px}
.drop-name{font-weight:600;font-size:var(--fs-body);line-height:1.3}
.drop-meta{font-size:var(--fs-meta);color:var(--text-sub);margin-top:2px}
.drop-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.drop-count{font-size:var(--fs-title);font-weight:700;line-height:1}
.drop-pills{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

.dash-up{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.dash-up-item{display:flex;align-items:baseline;gap:8px;padding:8px 12px;background:var(--surface-1);
  border:1px solid var(--border);border-radius:var(--r-sm);font-size:var(--fs-small)}
.dash-up-d{font-weight:600}

/* ── needs attention ── */
.attn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-height:60px;
  padding:11px 14px;margin-bottom:8px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-md);transition:background var(--dur-fast) var(--ease-out)}
.attn:hover{background:var(--surface-2-hover)}
.attn:active{background:var(--surface-3)}
.attn-t{font-weight:600;font-size:var(--fs-body);line-height:1.3}
.attn-s{font-size:var(--fs-meta);color:var(--text-sub);margin-top:1px}
.attn .sdot{width:10px;height:10px}
/* No-state items (a delivery to review) carry the accent, not a stock colour. */
.attn .sdot:not(.ok):not(.warn):not(.danger){background:var(--accent)}
.dash-clear{display:flex;align-items:center;gap:12px;padding:14px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-md);font-size:var(--fs-small);color:var(--text-sub)}
.dash-clear .sdot{width:10px;height:10px}

/* ── list rows inside the dashboard ── */
.dash-row{min-height:60px;padding:10px 14px;margin-bottom:8px}
.dash-qty{font-weight:700}

/* ── reorder ── */
.dash-reorder{margin-bottom:10px}
.dash-reorder .card-title{margin-bottom:6px}
.dash-reorder-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:baseline;
  padding:7px 0;border-bottom:1px solid var(--border-faint);font-size:var(--fs-small)}
.dash-reorder-row:last-of-type{border-bottom:none}
.dash-reorder-row .is-out{color:var(--danger);font-weight:700}
.dash-reorder-row .is-low{color:var(--warn);font-weight:700}

/* ── category bars ── */
.cat+.cat{margin-top:12px}
.cat-top{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-small);margin-bottom:5px}
.cat .dash-progress{margin:0}

/* ── activity feed ── */
.feed{display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-height:var(--tap-min);
  padding:8px 0;border-bottom:1px solid var(--border-faint)}
.feed:last-child{border-bottom:none}
.feed-qty{flex:none;min-width:58px;text-align:right;font-weight:700;font-size:var(--fs-body)}
.feed-qty.in{color:var(--ok)}
.feed-qty.out{color:var(--danger)}
.feed-qty.adj{color:var(--warn)}
.feed-t{font-size:var(--fs-small);font-weight:600}
.feed-s{font-size:var(--fs-label);color:var(--text-muted)}