/* =============================================================================
   Halconsat GPS — Tema custom (naranja + negro)
   -----------------------------------------------------------------------------
   Este CSS se inyecta automáticamente por Nginx en cada respuesta HTML de
   Traccar (vía sub_filter). Sobreescribe los colores Material UI por defecto
   sin necesidad de recompilar el frontend.

   Paleta:
     Primary (naranja):      #FF6B00
     Primary hover/dark:     #E55F00
     Primary light/bg:       rgba(255, 107, 0, 0.12)
     Negro corporativo:      #1A1A1A
     Texto secundario:       #666666

   Para cambiar la paleta entera, edita las 4 variables siguientes y reinicia
   el contenedor nginx (docker compose restart nginx).
============================================================================= */

:root {
  --halconsat-primary: #FF6B00;
  --halconsat-primary-dark: #E55F00;
  --halconsat-primary-light: rgba(255, 107, 0, 0.12);
  --halconsat-black: #1A1A1A;
}

/* ---------- AppBar / barra superior ---------- */
.MuiAppBar-colorPrimary,
header.MuiAppBar-root {
  background-color: var(--halconsat-black) !important;
  color: #ffffff !important;
}

.MuiAppBar-colorPrimary .MuiIconButton-root,
.MuiAppBar-colorPrimary .MuiSvgIcon-root,
.MuiAppBar-colorPrimary .MuiTypography-root {
  color: #ffffff !important;
}

/* Borde naranja inferior en el AppBar como acento de marca */
header.MuiAppBar-root {
  border-bottom: 3px solid var(--halconsat-primary) !important;
}

/* ---------- Botones primarios (login, guardar, etc.) ---------- */
.MuiButton-containedPrimary {
  background-color: var(--halconsat-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(255, 107, 0, 0.3) !important;
}

.MuiButton-containedPrimary:hover {
  background-color: var(--halconsat-primary-dark) !important;
  box-shadow: 0 4px 8px rgba(255, 107, 0, 0.4) !important;
}

.MuiButton-textPrimary,
.MuiButton-outlinedPrimary {
  color: var(--halconsat-primary) !important;
}

.MuiButton-outlinedPrimary {
  border-color: var(--halconsat-primary) !important;
}

.MuiButton-outlinedPrimary:hover {
  background-color: var(--halconsat-primary-light) !important;
  border-color: var(--halconsat-primary-dark) !important;
}

/* ---------- FABs (floating action buttons del mapa) ---------- */
.MuiFab-primary,
.MuiFab-colorPrimary {
  background-color: var(--halconsat-primary) !important;
  color: #ffffff !important;
}

.MuiFab-primary:hover,
.MuiFab-colorPrimary:hover {
  background-color: var(--halconsat-primary-dark) !important;
}

/* ---------- Switches ---------- */
.MuiSwitch-colorPrimary.Mui-checked {
  color: var(--halconsat-primary) !important;
}

.MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track {
  background-color: var(--halconsat-primary) !important;
}

/* ---------- Checkboxes y radios ---------- */
.MuiCheckbox-colorPrimary.Mui-checked,
.MuiRadio-colorPrimary.Mui-checked {
  color: var(--halconsat-primary) !important;
}

/* ---------- Tabs ---------- */
.MuiTab-textColorPrimary.Mui-selected {
  color: var(--halconsat-primary) !important;
}

.MuiTabs-indicator {
  background-color: var(--halconsat-primary) !important;
}

/* ---------- Listas con item seleccionado (sidebar de dispositivos) ---------- */
.MuiListItem-root.Mui-selected,
.MuiListItemButton-root.Mui-selected {
  background-color: var(--halconsat-primary-light) !important;
  border-left: 3px solid var(--halconsat-primary) !important;
}

.MuiListItem-root.Mui-selected:hover,
.MuiListItemButton-root.Mui-selected:hover {
  background-color: rgba(255, 107, 0, 0.18) !important;
}

/* ---------- Inputs (focus) ---------- */
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline,
.MuiInput-root.Mui-focused:after,
.MuiFilledInput-root.Mui-focused:after {
  border-color: var(--halconsat-primary) !important;
}

.MuiInputLabel-root.Mui-focused {
  color: var(--halconsat-primary) !important;
}

/* ---------- Links ---------- */
.MuiLink-root,
a.MuiTypography-colorPrimary {
  color: var(--halconsat-primary) !important;
}

/* ---------- Loading bars y spinners ---------- */
.MuiLinearProgress-colorPrimary {
  background-color: rgba(255, 107, 0, 0.25) !important;
}

.MuiLinearProgress-barColorPrimary {
  background-color: var(--halconsat-primary) !important;
}

.MuiCircularProgress-colorPrimary {
  color: var(--halconsat-primary) !important;
}

/* ---------- Chips (etiquetas) ---------- */
.MuiChip-colorPrimary {
  background-color: var(--halconsat-primary) !important;
  color: #ffffff !important;
}

.MuiChip-outlinedPrimary {
  color: var(--halconsat-primary) !important;
  border-color: var(--halconsat-primary) !important;
}

/* ---------- Iconos primarios ---------- */
.MuiSvgIcon-colorPrimary {
  color: var(--halconsat-primary) !important;
}

/* ---------- Login page (acento naranja arriba del card) ---------- */
.MuiPaper-root.MuiCard-root,
form > .MuiPaper-root {
  border-top: 4px solid var(--halconsat-primary);
}

/* ---------- Login: columna de marca a la izquierda = negro sólido ----------
   Traccar 6 (LoginLayout) aplica el color "primary" de MUI al sidebar; lo
   forzamos a #000 para el logo blanco/naranja del PNG. */
#root:has([type="password"]) [class*="sidebar"],
#root:has([type="password"]) > div > div:first-child {
  background-color: #000000 !important;
  background: #000000 !important;
  background-image: none !important;
}

/* Wordmark ancho: logo oficial HalconSat (PNG) */
#root:has([type="password"]) img[src*="/branding/logo.png"] {
  max-width: min(92%, 520px) !important;
  max-height: 220px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  padding: 0 8px;
  box-sizing: border-box;
}

/* Logo (fallback si se usa /logo.svg en algún ruta) */
img[src*="logo.svg"],
img[src="/logo.svg"] {
  max-height: 80px !important;
  width: auto !important;
  margin: 8px auto !important;
}

/* ---------- Scrollbar custom (detalles finos) ---------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #cccccc;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--halconsat-primary);
}