/* ═══ app.css — AFood Fleet · DOAR layout specific paginilor (DESIGN.md §2.1, §8.6) ═══
   Regulile .page--map / .map-panel* / .map-embed și chenarul Leaflet sunt
   partajate (shell.css). Aici trăiesc doar: stratul de hartă Fleet (pinii GPS,
   coloana de acțiuni), vizualizatorul de bon (#/expenses) și heatmapul
   (#/order-stats). Fără hex, fără font-size, fără redefinirea unei clase
   partajate. Buget: 300 de linii. */

/* ── Pânza hărții: umple .page--map (§8.6) ── */
.gps-map {
  position: absolute;
  inset: 0;
}

/* ── Dalele: OSM standard, temperate ca să devină fundal calm (§8.6).
   Doar stratul de dale — pinii, popup-urile și controalele stau în alte pane-uri. ── */
.gps-map .leaflet-tile-pane,
.map-embed .leaflet-tile-pane {
  filter: saturate(0.28) brightness(1.06) contrast(0.94);
}

/* ── Pin GPS: cerc 14px colorat pe status, inelat cu suprafața ── */
.gps-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;   /* dimensiuni fixe de marker (§8.6), nu din scara de spațiere */
  height: 14px;
  border: 2px solid var(--surface);
  border-radius: var(--r-full);
  background: var(--neutral);
  box-shadow: var(--shadow-1);
}
.gps-pin.is-moving  { background: var(--success); }
.gps-pin.is-idle    { background: var(--warning); }
.gps-pin.is-parked  { background: var(--neutral); }
.gps-pin.is-offline { background: var(--danger); }

/* Selectat: mai mare, cu inelul de focus (§8.6) */
.gps-pin.is-selected {
  width: 18px;
  height: 18px;
  box-shadow: var(--ring);
}

/* Săgeata de cap-compas — unghiul vine din JS prin --heading (§10.40) */
.gps-pin-heading {
  position: absolute;
  font-size: var(--icon-16);
  color: var(--surface);
  transform: rotate(var(--heading, 0deg));
}

/* Eticheta cu numărul de înmatriculare, deasupra pinului */
.gps-pin-label {
  position: absolute;
  bottom: calc(100% + var(--sp-1));
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Leaflet divIcon: fără fundal/chenar proprii */
.gps-pin-icon {
  background: none;
  border: 0;
}

/* ── Coloana de acțiuni deasupra controlului de zoom (§8.6) ── */
.map-actions {
  position: absolute;
  right: var(--sp-4);
  bottom: calc(var(--sp-4) + var(--ctl-md) * 2 + var(--sp-2));
  z-index: var(--z-map-ui);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* Pe telefon controalele stau deasupra sheet-ului strâns (148px, §8.6). Extins,
   sheet-ul le acoperă curat — are z-index cu 1 peste stratul de UI al hărții. */
@media (max-width: 639px) {
  .map-actions {
    bottom: calc(148px + var(--sp-4) + var(--ctl-md) * 2 + var(--sp-2) + env(safe-area-inset-bottom));
  }
}

/* ── #/expenses · vizualizatorul de bon fiscal (§10.37) ─────────────────────
   Corpul modalului devine o casetă media (imagine sau PDF) pe fundal --sunken,
   cu zoom nativ pe bonurile fotografiate. */
.modal--receipt .modal-body { padding: 0; background: var(--sunken); }

.receipt-view {
  position: relative;                 /* ancoră pentru .loading-overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}
.receipt-view > img {
  max-height: 70dvh;
  object-fit: contain;
  touch-action: pinch-zoom;
}
.receipt-view > iframe {              /* bonurile PDF */
  width: 100%;
  height: 70dvh;
  border: 0;
}
/* Pe telefon .modal-lg e ecran complet: caseta ia toată înălțimea rămasă. */
@media (max-width: 639px) {
  .receipt-view > img { max-height: 100%; }
  .receipt-view > iframe { height: 100%; }
}

/* ── #/order-stats · heatmapul „Ore de vârf" (7 zile × 24 ore) ──────────────
   Heatmapul este un .data-table--compact normal, în .table-wrap; fiecare celulă
   primește una dintre cele 5 trepte de intensitate derivate din --accent-rgb. */
.heat-cell {
  display: block;
  min-width: 20px;
  height: 20px;
  border-radius: var(--r-1);
  font-size: var(--fs-12);
  line-height: 20px;
  text-align: center;
  color: var(--ink-2);
  background: rgba(var(--accent-rgb), 0.06);
}
.heat-cell.is-l1 { background: rgba(var(--accent-rgb), 0.20); }
.heat-cell.is-l2 { background: rgba(var(--accent-rgb), 0.40); }
.heat-cell.is-l3 { background: rgba(var(--accent-rgb), 0.62); color: var(--on-accent); }
.heat-cell.is-l4 { background: rgba(var(--accent-rgb), 0.88); color: var(--on-accent); }

/* Legenda din .card-footer: cele 5 trepte, fără text */
.heat-legend { display: inline-flex; align-items: center; gap: var(--sp-half); }
.heat-legend .heat-cell { width: 16px; min-width: 16px; }