:root {
  --ink: #344550;
  --muted: #5e7481;
  --line: #d7e1e8;
  --paper: #edf2f6;
  --canvas: #e7ecf0;
  --accent: #186f74;
  --accent-dark: #20595b;
  --soft-selected: #d6edeb;
  --soft-hover: #e1eeef;
  --soft-light: #ffffffd9;
  --soft-shadow: #7890a345;
  --soft-raised: 4px 4px 9px var(--soft-shadow), -4px -4px 9px var(--soft-light);
  --soft-inset: inset 2px 2px 5px var(--soft-shadow), inset -2px -2px 5px var(--soft-light);
}

/* Shared surfaces stay compact; alerts retain their semantic colors. */
.main-content { min-width: 0; width: 100%; }
.topbar, .side-nav, .bottom-nav {
  background: var(--canvas);
  color: var(--ink);
  border-color: var(--line);
}
.topbar { box-shadow: 0 4px 12px #7890a322; }
.brand-wordmark { color: var(--ink); }
.brand-wordmark .brand-control { color: var(--accent); }
.topbar .icon-button {
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 8px;
  box-shadow: var(--soft-raised);
}
.topbar .icon-button img, .side-nav .map-nav-icon { filter: none; }
.topbar .icon-button:hover { background: var(--soft-hover); }
.topbar .icon-button:active { box-shadow: var(--soft-inset); }
.topbar .icon-button:focus-visible { outline-color: var(--accent); }
.connection-dot { box-shadow: 0 0 0 3px #7890a325; }
.side-brand small, .side-state { color: var(--muted); }
.side-state { border-color: var(--line); }
.side-nav:not([hidden]) { background: var(--canvas); color: var(--ink); border-right: 1px solid var(--line); }
.side-nav button { color: var(--muted); margin-bottom: 4px; }
.side-nav button.active, .bottom-nav button.active {
  background: var(--soft-selected);
  color: var(--accent-dark);
  border-radius: 8px;
  box-shadow: var(--soft-inset);
}
.bottom-nav { gap: 4px; box-shadow: 0 -3px 14px #7890a31f; }
.bottom-nav button { color: var(--muted); }
.bottom-nav .nav-icon { width: 22px; height: 22px; margin-bottom: 2px; }
.side-nav .nav-icon { width: 23px; height: 23px; flex: none; }

button.primary, button.secondary, button.danger, button.warning,
.button-like, .mini-button, .catalog-icon, .rossko-site-link, .map-tool {
  border-radius: 8px;
  box-shadow: var(--soft-raised);
}
button.primary { border-color: #145c60; }
button.secondary, .mini-button, .catalog-icon, .rossko-site-link, .map-tool {
  background: var(--paper);
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
button.danger { background: #fbf0f1; }
button.warning { background: #fff8e9; }
button.secondary:hover, .mini-button:hover, .catalog-icon:hover,
.rossko-site-link:hover, .map-tool:hover { background: var(--soft-hover); }
button.primary:active { box-shadow: inset 2px 2px 5px #103e4660; }
button.secondary:active, .mini-button:active, .catalog-icon:active,
.rossko-site-link:active, .map-tool:active { box-shadow: var(--soft-inset); }

.auth-panel, .detail-banner, .total-strip, .vehicle-document {
  background: var(--paper);
  border-color: var(--line);
  border-radius: 8px;
  box-shadow: var(--soft-raised);
}
.auth-panel { border-top-color: var(--accent); }
.detail-banner {
  background: var(--soft-selected);
  border-left-width: 1px;
  box-shadow: var(--soft-inset);
}
.detail-banner.vehicle-summary { border-color: var(--accent); }
.total-strip div { border-color: var(--line); }
.list {
  border-radius: 8px;
  border-color: var(--line);
  background: var(--paper);
  box-shadow: 3px 3px 8px var(--soft-shadow), -3px -3px 8px var(--soft-light);
}
.list .list { box-shadow: none; }
.list-row, .fleet-row, .map-car-row {
  background: var(--paper);
  border-bottom-color: var(--line);
}
.list-row:hover, .fleet-row:hover, .map-car-row:hover,
.list-row:active, .fleet-row:active, .map-car-row.selected { background: var(--soft-hover); }
.fleet-list, .list.stock-list {
  display: grid;
  gap: 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.fleet-row, .fleet-row:last-child, .stock-row, .stock-row:last-child {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--soft-raised);
}
.fleet-row:active { box-shadow: var(--soft-inset); }
.fleet-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.stock-row { background: var(--paper); }
.stock-row > .list-row { border-radius: 7px 0 0 7px; }
.stock-row > .list-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.fleet-plate {
  background: var(--canvas);
  border-color: #c9d7df;
  color: var(--ink);
  border-radius: 7px;
  box-shadow: var(--soft-inset);
}
.empty-state { background: var(--paper); border-color: #bccbd4; border-radius: 8px; }

input:not([type=checkbox]):not([type=radio]), select, textarea {
  border-color: #c3d1da;
  background: var(--paper);
  border-radius: 8px;
  box-shadow: var(--soft-inset);
}
input::placeholder, textarea::placeholder { color: #647985; opacity: 1; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); box-shadow: none; }
label { color: var(--ink); }
.segmented, .map-filters { border-color: #c3d1da; border-radius: 8px; background: var(--paper); }
.segmented button, .map-filters button { background: var(--paper); color: var(--muted); border-color: var(--line); }
.segmented button.active, .map-filters button[aria-pressed=true] {
  background: var(--soft-selected);
  color: var(--accent-dark);
  box-shadow: var(--soft-inset);
  font-weight: 700;
}
.vehicle-menu button.selected { background: var(--soft-selected); box-shadow: var(--soft-inset); }
.vehicle-add-menu button { background: var(--paper); border-color: var(--line); }
.event-suggestions, .tire-suggestions { border-color: #c3d1da; border-radius: 8px; background: var(--paper); }
.event-suggestions button:hover, .event-suggestions [aria-selected=true],
.tire-suggestions button:hover, .tire-suggestions [aria-selected=true] { background: var(--soft-selected); }
.event-name-clear:hover, .history-search-clear:hover { background: var(--soft-hover); }

.modal-sheet { background: var(--paper); box-shadow: 0 12px 44px #243e5055; }
.modal-sheet > header, .modal-sheet footer { background: var(--canvas); border-color: var(--line); }
.modal-sheet > header .icon-button { color: var(--ink); }
.modal-backdrop { background: #20384575; }
.busy { background: #e7ecf0a8; }
.toast { background: var(--ink); border-radius: 8px; }
.toast.error { background: #8f3038; }
.vehicle-document:disabled { background: var(--canvas); box-shadow: var(--soft-inset); }
.vehicle-document.uploaded { border-color: #7bafab; background: var(--soft-selected); }
.vehicle-document.uploaded:hover { background: #c9e6e3; }
.document-expiry:hover { background: var(--soft-hover); }
.history-day > summary { background: var(--paper); }
.history-day > summary:hover, .history-day[open] > summary { background: var(--soft-selected); }
.history-kind-title { background: var(--canvas); }

.map-toolbar, .map-list-panel, .fleet-map-view { background: var(--paper); }
.fleet-map-canvas .leaflet-control-zoom { border-radius: 8px; border-color: var(--line); box-shadow: var(--soft-raised); overflow: hidden; }
.fleet-map-canvas .leaflet-control-zoom a { background: var(--paper); color: var(--ink); border-color: var(--line); }
.fleet-map-canvas .leaflet-popup-content-wrapper, .fleet-map-canvas .leaflet-popup-tip { background: var(--paper); color: var(--ink); }
.map-empty { background: var(--paper); border-color: var(--line); border-radius: 8px; }
.document-viewer-modal, .document-viewer,
.document-viewer-name, .document-viewer-toolbar { background: var(--paper); }
.document-viewer-viewport { background: var(--canvas); }
.document-viewer .icon-button:hover:not(:disabled) { background: var(--soft-selected); }
.document-viewer-page canvas, .document-viewer-page > img { background: #fff; }

@media (hover:hover) {
  .bottom-nav button:not(.active):hover, .side-nav button:not(.active):hover { background: var(--soft-hover); border-radius: 8px; }
}
@media (forced-colors:active) {
  .dashboard-overview .metric, button, input, select, textarea { box-shadow: none; }
  .dashboard-overview .overview-icon:before { background: ButtonText; }
}