html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

@media (prefers-color-scheme: dark) {
  body {
    background: black;
  }
}

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media print {
  * {
    height: auto !important;
    overflow: visible !important;
  }
}

/* TaCOS rebrand - the login screen's wordmark is an inline SVG baked into
   the app bundle (not the small /logo.svg icon), so it is replaced here via
   override rather than patched in the image. The main app view has no logo.
   Panel flipped to the same dark navy as www.cos.taxi (was gold with dark
   text; now dark with the site's actual two-tone "Ta"+"COS" treatment -
   "Ta" in cream, "COS" in gold, exactly matching sites/www/index.html's
   .brand-mark, plus a small uppercase subtitle matching its .brand-sub). */
.muiltr-b5ygvr-image {
  display: none;
}

.muiltr-zaovjp-sidebar {
  background-color: #0A1626 !important;
}

.muiltr-zaovjp-sidebar::after {
  content: '';
  display: block;
  width: 300px;
  height: 90px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 90'%3E%3Ctext x='0' y='52' font-family='system-ui,-apple-system,Segoe UI,sans-serif' font-weight='900' font-size='44'%3E%3Ctspan fill='%23F5F1E6'%3ETa%3C/tspan%3E%3Ctspan fill='%23F0B429'%3ECOS%3C/tspan%3E%3C/text%3E%3Ctext x='2' y='78' font-family='system-ui,-apple-system,Segoe UI,sans-serif' font-weight='700' font-size='13' letter-spacing='2' fill='%2393A0B7'%3EFLEET MANAGER%3C/text%3E%3C/svg%3E");
}

/* Post-login screens (2026-10-03) - MUI's dark theme defaults to greyscale
   (body/background.default #212121, Paper/background.paper #121212 - MUI's
   dark palette oddly makes Paper DARKER than the body behind it). Neither is
   a Server.attributes key (confirmed: only colorPrimary/colorSecondary/
   darkMode are read by the frontend's theme builder, not a background
   colour) so this has to be CSS, same mechanism as the login page. Mapped
   to the site's own hierarchy instead - body gets the darkest navy
   (--bg), Paper surfaces (cards, the settings panel, dialogs, menus) get
   the lighter --panel navy, which also fixes MUI's inverted elevation. */
body {
  background-color: #0A1626 !important;
}

.MuiPaper-root {
  background-color: #11223D !important;
}

/* Selected-nav-item highlight (e.g. Settings > Preferences in the left list)
   is already gold under the hood - MUI's .Mui-selected applies colorPrimary
   at 16% opacity - but ANY semi-transparent warm gold over the dark navy
   panel blends toward olive/brown (verified: even 30% opacity still mixes
   to rgb(84,78,55), not gold - it's the colour maths, not a caching issue).
   Solid gold instead, same treatment as the existing SAVE/LOGIN buttons
   (gold fill, dark navy text) rather than a translucent wash. */
.Mui-selected {
  background-color: #F0B429 !important;
  color: #0A1626 !important;
}

.Mui-selected * {
  color: #0A1626 !important;
}

/* Map control buttons (zoom, compass, locate, layers, search, ruler, bell) -
   stable MapLibre GL class names (.maplibregl-ctrl-*), not build-time hashes,
   so this is safe across Traccar upgrades even if the MUI hashes elsewhere
   aren't. Each icon is a hardcoded-fill inline SVG background-image per
   button (#333/#fff/#ccc/etc depending on state) - not recolourable via
   `color`, confirmed by reading the actual CSS rules rather than assuming.
   brightness(0) saturate(100%) first crushes whatever fill it already has to
   pure black, THEN the fixed tint runs, so every state lands on the same
   gold regardless of its original colour - verified against the real
   #F0B429 swatch side by side, not just "looks about right". */
.maplibregl-ctrl-group {
  background-color: #0A1626 !important;
  border: 1px solid rgba(240, 180, 41, 0.16);
}

.maplibregl-ctrl-group button:hover {
  background-color: #11223D !important;
}

.maplibregl-ctrl-icon {
  filter: brightness(0) saturate(100%) invert(75%) sepia(54%) saturate(1943%) hue-rotate(359deg) brightness(100%) contrast(96%);
}