/* Ortungsheld-Branding für Traccar-Web 6.16.0 (Look: docs/mockups/17-ortungsheld-look.png)
   Traccar bindet /styles.css in jede Seite ein; über web.override liefern wir diese Fassung aus.
   Die ersten Regeln sind das Original, darunter die Ortungsheld-Anpassungen.
   Klassen der Form muiltr-<hash>-<schlüssel>: der Schlüssel (sidebar, header …) ist stabil, der Hash nicht –
   deshalb nur [class*="-schlüssel"] verwenden. Nach jedem Traccar-Update prüfen. */

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;
  }
}

/* ---------- Ortungsheld ---------- */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/ortungsheld/manrope-latin.woff2) format('woff2');
}

:root {
  --itl-p: #1a3059;
  --itl-rot: #ce2829;
  --itl-gold: #d4a654;
  --itl-dunkel: #1a3059;
  --itl-verlauf: radial-gradient(circle at 30% 20%, #24407a, #13244a);
}

/* Schrift überall (MUI setzt Roboto fest im Theme) */
body, .root, .MuiTypography-root, .MuiButtonBase-root, .MuiInputBase-root, .MuiFormLabel-root,
.MuiTableCell-root, .MuiMenuItem-root, .MuiListItemText-primary, .MuiListItemText-secondary,
.MuiBottomNavigationAction-label, .MuiChip-label, .MuiTab-root, .MuiAlert-message, .MuiSnackbarContent-message,
.maplibregl-ctrl, .maplibregl-popup {
  font-family: Manrope, 'Segoe UI', Arial, sans-serif !important;
}
.MuiListItemText-primary { font-weight: 700 !important; }

/* Knöpfe und Eingabefelder */
.MuiButton-root { border-radius: 8px !important; font-weight: 700 !important; letter-spacing: .3px; box-shadow: none !important; }
.MuiOutlinedInput-root { border-radius: 8px !important; }
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-width: 2px !important; }

/* Anmeldeseite: Navy-Band mit Wortmarke oben und dem Held unten (Mockup 17) */
main > [class*="-sidebar"] {
  background: url(/ortungsheld/held-stehend.webp) right -50px bottom -14px / auto min(72vh, 600px) no-repeat,
              var(--itl-verlauf) !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 44px 40px !important;
  position: relative;
  overflow: hidden;
}
main > [class*="-sidebar"] img { max-width: 280px !important; width: 100%; height: auto !important; }
/* Schmale Fenster: Traccar schrumpft das Band zum Streifen – dann ohne Held */
@media (max-width: 1100px) {
  main > [class*="-sidebar"] { background: var(--itl-verlauf) !important; padding: 0 !important; }
}
main > [class*="-paper"] { box-shadow: none !important; }
main > [class*="-paper"] form .MuiButton-containedPrimary { padding: 10px 16px; font-size: 14px; background: var(--itl-rot) !important; }
main > [class*="-paper"] form::before {
  content: "Anmelden";
  display: block;
  font: 800 24px/1.2 Manrope, 'Segoe UI', Arial, sans-serif;
  color: #0f172a;
  margin-bottom: 8px;
}

/* Geräteliste: ausgewähltes Fahrzeug goldfarben hinterlegt mit Akzentbalken */
.MuiListItemButton-root.Mui-selected,
.MuiListItemButton-root[class*="-selected"] {
  background-color: rgba(212, 166, 84, .14) !important;
  box-shadow: inset 3px 0 0 var(--itl-gold);
}
/* Fahrzeugsymbole sind weiß – Hintergrund daher dunkel halten */
.MuiListItemButton-root .MuiAvatar-root { background: #94a3b8; }
.MuiListItemButton-root.Mui-selected .MuiAvatar-root { background: var(--itl-dunkel); }

/* Untere Navigation */
.MuiBottomNavigationAction-label { font-weight: 600 !important; }

/* Infokarte zum Fahrzeug auf der Karte: dunkler Kopf, runde Ecken */
.MuiCard-root[class*="-card"] { border-radius: 12px !important; overflow: hidden; box-shadow: 0 8px 24px rgba(15, 23, 42, .18) !important; }
.MuiCard-root[class*="-card"] > [class*="-header"] {
  background: var(--itl-dunkel);
  color: #fff !important;
  padding: 10px 8px 10px 16px !important;
}
.MuiCard-root[class*="-card"] > [class*="-header"] .MuiTypography-root { font-weight: 700 !important; color: #fff !important; }
.MuiCard-root[class*="-card"] > [class*="-header"] .MuiIconButton-root { color: #fff !important; }
.MuiCard-root[class*="-card"] .MuiTableCell-root { border-bottom: 1px solid #f1f5f9; }
.MuiCard-root[class*="-card"] .MuiCardActions-root { border-top: 1px solid #e2e8f0; }

/* Karten-Bedienelemente */
.maplibregl-ctrl-group { border-radius: 8px !important; box-shadow: 0 1px 4px rgba(15, 23, 42, .25) !important; }