/* Fleet 360 — screen styles (own file so the shared erp.css stays untouched on the feature branch). Uses the theme tokens of erp.css. */
.fleet .fl-h { font-size: 14px; margin: 6px 0 8px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.fleet .fl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.fleet .fl-vcard { display: block; color: inherit; text-decoration: none; }
.fleet .fl-vcard:hover { border-color: var(--tara-teal, #037171); }
.fl-dl { margin-top: 8px; }
.fl-bar { height: 8px; border-radius: 4px; background: var(--border, #e3e8ea); overflow: hidden; min-width: 80px; }
.fl-bar span { display: block; height: 100%; background: var(--tara-teal, #037171); }
.fl-plot { width: 100%; height: auto; display: block; }
.fl-plot-bg { fill: var(--surface-2, #f4f7f7); stroke: var(--border, #e3e8ea); }
.fl-place { fill: #8BC6A9; }
.fl-place-t { font-size: 10px; fill: var(--muted, #5f6b70); }
.fl-veh-t { font-size: 12px; font-weight: 700; fill: var(--text, #1f2a30); }
.fl-live { margin-bottom: 10px; }
.fl-syn { white-space: nowrap; }
.kpi-mini b { font-size: 22px; }
.fleet .toolbar .sep-v { width: 1px; align-self: stretch; background: var(--border, #e3e8ea); margin: 0 4px; }
@media (max-width: 640px) {
  .fleet .fl-cards { grid-template-columns: 1fr; }
  .fleet .table-wrap { overflow-x: auto; }
  .fleet .toolbar { flex-wrap: wrap; }
}