/* Vehicle legal compliance (public/js/legal.js). Colours always come with a
   word and an icon: green valid, amber expiring, red expired or critical,
   blue renewal in progress, grey not applicable, purple awaiting verification. */
:root { --lg-purple: #7c3aed; --lg-purple-text: #5b21b6; --lg-purple-fill: #f3eefe; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --lg-purple: #a78bfa; --lg-purple-text: #ddd6fe; --lg-purple-fill: rgba(139, 92, 246, .16); }
}
:root[data-theme="dark"] { --lg-purple: #a78bfa; --lg-purple-text: #ddd6fe; --lg-purple-fill: rgba(139, 92, 246, .16); }

.badge.purple { color: var(--lg-purple-text); border-color: var(--lg-purple); background: var(--lg-purple-fill); }
.kpi.card .v.purple { color: var(--lg-purple-text); }

tr.row-critical td:first-child { box-shadow: inset 3px 0 0 var(--stop); }
.lc-reasons { margin: 8px 0 0; padding-left: 18px; }
.lc-reasons li { margin: 2px 0; }

.timeline { list-style: none; margin: 10px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: grid; gap: 8px; }
.timeline li { position: relative; font-size: 13px; }
.timeline li::before { content: ''; position: absolute; left: -19px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--info); }

.lc-page .foot.wrap { flex-wrap: wrap; }
.lc-page .tabs { margin-bottom: 4px; }
.lc-page .table-wrap, .fuel-dialog .table-wrap { max-width: 100%; overflow-x: auto; }

@media (max-width: 640px) {
  .lc-page .tabs { overflow-x: auto; flex-wrap: nowrap; }
  .lc-page .tabs .tab { white-space: nowrap; }
}