/* ════════════════════════════════════════════════════════════
   SOLALSA GPS — Traccar 6 Custom Theme
   Paleta:  #004A3D (verde oscuro) | #409435 (verde web)
            #70a74d (verde claro) | #003830 (verde más oscuro)
   ════════════════════════════════════════════════════════════ */

/* ── Base ────────────────────────────────────────────────── */
html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

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

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

/* ══════════════════════════════════════════════════════════
   PÁGINA DE LOGIN
   ══════════════════════════════════════════════════════════ */

/* Fondo verde SOLO en la página de login */
html:has(#root > main > .MuiPaper-root > form),
body:has(#root > main > .MuiPaper-root > form),
#root > main:has(> .MuiPaper-root > form) {
  background-color: rgba(111, 168, 76) !important;
  background-image: none !important;
}

/* ── Cuadro de login BLANCO ──────────────────────────────── */
#root > main > .MuiPaper-root {
  background-color: #ffffff !important;
  background-image: none !important;
  --Paper-overlay: none !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
  border-radius: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

/* Form y divs dentro del cuadro también blancos */
#root > main > .MuiPaper-root > form,
#root > main > .MuiPaper-root > div {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* ── Ocultar logo/panel nativo de Traccar en el login ────── */
#root > main > div:not(.MuiPaper-root) {
  display: none !important;
}

/* ── Selector de idioma (fuera del cuadro blanco) ───────────
   Usa :not(.MuiPaper-root *) para no tocar email/contraseña  */
body:has(#root > main > .MuiPaper-root > form) .MuiInputBase-root:not(.MuiPaper-root .MuiInputBase-root) {
  background-color: rgba(111, 168, 76) !important;
  background-image: none !important;
}
body:has(#root > main > .MuiPaper-root > form) .MuiInputBase-root:not(.MuiPaper-root .MuiInputBase-root) fieldset {
  border-color: rgba(0, 74, 61, 0.3) !important;
}
body:has(#root > main > .MuiPaper-root > form) .MuiInputBase-root:not(.MuiPaper-root .MuiInputBase-root) .MuiSelect-select,
body:has(#root > main > .MuiPaper-root > form) .MuiInputBase-root:not(.MuiPaper-root .MuiInputBase-root) input {
  color: #003830 !important;
}
body:has(#root > main > .MuiPaper-root > form) .MuiInputBase-root:not(.MuiPaper-root .MuiInputBase-root) .MuiSelect-icon {
  color: #003830 !important;
}

/* ── Texto "Sistema de Rastreo" dentro del cuadro ────────── */
.solalsa-tagline {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #004A3D;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 28px 32px 4px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── Autofill de Mac/Safari: mantener fondo blanco ────────── */
#root > main .MuiInputBase-input:-webkit-autofill,
#root > main .MuiInputBase-input:-webkit-autofill:hover,
#root > main .MuiInputBase-input:-webkit-autofill:focus,
#root > main .MuiInputBase-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: rgba(0, 0, 0, 0.87) !important;
  caret-color: rgba(0, 0, 0, 0.87) !important;
}

/* ── Fondo blanco en los campos de texto ─────────────────── */
#root > main .MuiOutlinedInput-root {
  background-color: #ffffff !important;
  border-radius: 8px !important;
}

/* ── Labels visibles sobre fondo blanco ──────────────────── */
#root > main .MuiInputLabel-root {
  color: rgba(0, 0, 0, 0.6) !important;
  background-color: transparent !important;
}
#root > main .MuiInputLabel-root.Mui-focused {
  color: #004A3D !important;
}

/* ── Borde del input ─────────────────────────────────────── */
#root > main .MuiOutlinedInput-root fieldset {
  border-color: rgba(0, 0, 0, 0.3) !important;
}
#root > main .MuiOutlinedInput-root:hover fieldset {
  border-color: rgba(0, 0, 0, 0.6) !important;
}
#root > main .MuiOutlinedInput-root.Mui-focused fieldset {
  border-color: #004A3D !important;
  border-width: 2px !important;
}

/* ── Texto escrito y iconos dentro del input ─────────────── */
#root > main .MuiInputBase-input {
  color: rgba(0, 0, 0, 0.87) !important;
}
#root > main .MuiInputAdornment-root .MuiIconButton-root {
  color: rgba(0, 0, 0, 0.54) !important;
}

/* ── Botón DESHABILITADO (campos vacíos) ─────────────────── */
#root > main .MuiButton-contained.Mui-disabled {
  background-color: rgba(0, 0, 0, 0.12) !important;
  color: rgba(0, 0, 0, 0.38) !important;
  box-shadow: none !important;
}

/* ── Botón ACTIVO (con usuario y contraseña) ─────────────── */
#root > main .MuiButton-containedPrimary:not(.Mui-disabled),
#root > main .MuiButton-contained:not(.Mui-disabled) {
  background-color: #004A3D !important;
  color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(0, 74, 61, 0.4) !important;
}
#root > main .MuiButton-containedPrimary:not(.Mui-disabled):hover,
#root > main .MuiButton-contained:not(.Mui-disabled):hover {
  background-color: #003830 !important;
  box-shadow: 0 6px 20px rgba(0, 74, 61, 0.5) !important;
}

/* ── Links dentro del form ────────────────────────────────── */
#root > main form a,
#root > main form .MuiLink-root {
  color: #409435 !important;
}

/* ══════════════════════════════════════════════════════════
   APLICACIÓN PRINCIPAL (post-login)
   ══════════════════════════════════════════════════════════ */

/* ── AppBar superior ─────────────────────────────────────── */
header.MuiAppBar-root,
.MuiAppBar-root {
  background-color: #70a74d !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* ── Drawer / Sidebar de dispositivos ───────────────────── */
.MuiDrawer-paper {
  border-right: none !important;
  box-shadow: 2px 0 12px rgba(0,0,0,0.15) !important;
}

/* ── Botones primarios (globales) ────────────────────────── */
.MuiButton-containedPrimary {
  background-color: #70a74d !important;
  color: #ffffff !important;
}
.MuiButton-containedPrimary:hover {
  background-color: #5a9040 !important;
}

/* ── FAB / botones flotantes del mapa ───────────────────── */
.MuiFab-primary,
.MuiSpeedDial-fab {
  background-color: #70a74d !important;
  color: #ffffff !important;
}
.MuiFab-primary:hover,
.MuiSpeedDial-fab:hover {
  background-color: #5a9040 !important;
}

/* ── Checkbox, Switch, Radio con color SOLALSA ──────────── */
.MuiCheckbox-colorPrimary.Mui-checked,
.MuiRadio-colorPrimary.Mui-checked {
  color: #409435 !important;
}
.MuiSwitch-colorPrimary.Mui-checked .MuiSwitch-thumb {
  background-color: #409435 !important;
}
.MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track {
  background-color: #70a74d !important;
}

/* ── Tabs activos ────────────────────────────────────────── */
.MuiTab-root.Mui-selected {
  color: #70a74d !important;
}
.MuiTabs-indicator {
  background-color: #70a74d !important;
}

/* ── Chip de estado online (verde) ──────────────────────── */
.MuiChip-colorSuccess {
  background-color: #409435 !important;
}

/* ── Focus rings ─────────────────────────────────────────── */
.MuiOutlinedInput-root.Mui-focused fieldset {
  border-color: #004A3D !important;
}
.MuiInputLabel-root.Mui-focused {
  color: #004A3D !important;
}

/* ── Scrollbar personalizado ─────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f1; }
::-webkit-scrollbar-thumb { background: #70a74d; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #004A3D; }

/* ── Dark mode ───────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  body { background: #121212; }
}