@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* =====================================================================
   zapiloc · Traccar web overrides · v3 (Fase 2, 06/10/2026)
   Fonte de verdade: docs/zapi-design-system (tokens) + docs/logos/zapiloc.
   O MUI gera classes em runtime; seletores usam [class*="Mui..."] e
   !important. Variante e cor são classes SEPARADAS (MuiButton-contained +
   MuiButton-colorPrimary). O tema do app é escuro por baixo: toda superfície
   e todo texto neutro precisam ser declarados aqui.
   ===================================================================== */

:root {
  --z-blue: #002DB6;
  --z-blue-deep: #001A6B;
  --z-blue-050: #EEF2FD;
  --z-blue-link: #0644B3;
  --z-green: #65F16C;
  --z-green-hover: #8BF590;
  --z-green-text: #0E9F6E;
  --z-orange: #FF8C2B;
  --z-danger: #FF266D;
  --z-ink: #141A32;
  --z-body: #3A4364;
  --z-muted: #6B7590;
  --z-line: #DBE0EC;
  --z-line-soft: #EBEEF6;
  --z-page: #F5F7FB;
  --z-disabled-bg: #B9C0D4;
  --z-shadow: 0 8px 24px rgba(0, 26, 107, .12);
  --z-shadow-sm: 0 2px 8px rgba(0, 26, 107, .10);
  --z-display: "Bai Jamjuree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --z-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Base ---------- */
html, body { height: 100%; }
body { margin: 0; padding: 0; font-family: var(--z-ui); }
html, body, #root, .root { background-color: #ffffff !important; }
@media (prefers-color-scheme: dark) { html, body, #root, .root { background-color: #ffffff !important; } }
.root { display: flex; flex-direction: column; height: 100%; }
@media print { * { height: auto !important; overflow: visible !important; } }

/* ---------- Tipografia ---------- */
[class*="MuiTypography-root"],
[class*="MuiInputBase-root"],
[class*="MuiFormLabel-root"],
[class*="MuiMenuItem-root"],
[class*="MuiTableCell-root"],
[class*="MuiFormControlLabel-label"] {
  font-family: var(--z-ui) !important;
}
h1, h2, h3, h4, h5, h6,
[class*="MuiTypography-h1"], [class*="MuiTypography-h2"], [class*="MuiTypography-h3"],
[class*="MuiTypography-h4"], [class*="MuiTypography-h5"], [class*="MuiTypography-h6"],
[class*="MuiDialogTitle-root"],
[class*="MuiToolbar-root"] [class*="MuiTypography-root"],
[class*="MuiAccordionSummary-content"] [class*="MuiTypography-root"],
[class*="MuiCardHeader-title"] {
  font-family: var(--z-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: var(--z-blue) !important;
}
[class*="MuiButton-root"],
[class*="MuiTab-root"],
[class*="MuiBottomNavigationAction-label"],
[class*="MuiChip-label"],
[class*="MuiListItemText-primary"] {
  font-family: var(--z-display) !important;
}
[class*="MuiListItemText-primary"] { font-weight: 600 !important; }
[class*="MuiListItemText-secondary"] { font-family: var(--z-ui) !important; }

/* ---------- Superfícies ---------- */
[class*="MuiDrawer-paper"],
[class*="MuiDialog-paper"],
[class*="MuiPaper-root"],
[class*="MuiPopover-paper"],
[class*="MuiMenu-paper"],
[class*="MuiAppBar-root"],
[class*="MuiTableContainer-root"],
[class*="MuiCard-root"],
[class*="MuiAccordion-root"] {
  background-color: #ffffff !important;
  background-image: none !important;
}
[class*="MuiDialog-paper"] { border-radius: 24px !important; box-shadow: var(--z-shadow) !important; }
[class*="MuiPopover-paper"], [class*="MuiMenu-paper"] { border-radius: 16px !important; box-shadow: var(--z-shadow) !important; border: 1px solid var(--z-line-soft); }
[class*="MuiBackdrop-root"]:not([class*="MuiBackdrop-invisible"]) { background-color: rgba(0, 26, 107, .55) !important; }

/* Texto neutro nas superfícies */
[class*="MuiDrawer-paper"] [class*="MuiTypography-root"],
[class*="MuiDialog-paper"] [class*="MuiTypography-root"],
[class*="MuiPaper-root"] [class*="MuiTypography-root"],
[class*="MuiTableContainer-root"] [class*="MuiTypography-root"],
[class*="MuiFormControlLabel-label"],
[class*="MuiListItemText-primary"],
[class*="MuiInputBase-input"],
[class*="MuiSelect-select"],
[class*="MuiTablePagination-root"] {
  color: var(--z-ink) !important;
}
[class*="MuiListItemText-secondary"],
[class*="MuiTypography-caption"],
[class*="MuiFormHelperText-root"],
[class*="MuiTypography-colorTextSecondary"] {
  color: var(--z-muted) !important;
}
[class*="MuiBreadcrumbs-separator"] { color: var(--z-muted) !important; }
[class*="MuiDivider-root"] { border-color: var(--z-line-soft) !important; }

/* ---------- Campos ---------- */
input,
[class*="MuiInputBase-root"],
[class*="MuiOutlinedInput-root"],
[class*="MuiFilledInput-root"] {
  background-color: #ffffff !important;
}
[class*="MuiOutlinedInput-root"] { border-radius: 10px !important; }
[class*="MuiOutlinedInput-notchedOutline"] { border-color: var(--z-line) !important; }
[class*="MuiOutlinedInput-root"]:hover [class*="MuiOutlinedInput-notchedOutline"] { border-color: #B9C4E0 !important; }
[class*="MuiOutlinedInput-root"][class*="Mui-focused"] [class*="MuiOutlinedInput-notchedOutline"] {
  border-color: var(--z-blue) !important;
  border-width: 1px !important;
  box-shadow: 0 0 0 3px rgba(101, 241, 108, .9);
  border-radius: 10px;
}
/* altura 44px nos campos "small" do Traccar (padrão 40) */
[class*="MuiInputBase-sizeSmall"] [class*="MuiInputBase-input"],
[class*="MuiInputBase-sizeSmall"][class*="MuiInputBase-input"] {
  padding-top: 10.5px !important;
  padding-bottom: 10.5px !important;
  font-size: 15px !important;
}
[class*="MuiInputBase-sizeSmall"] [class*="MuiSelect-select"] { padding-top: 10.5px !important; padding-bottom: 10.5px !important; }
[class*="MuiInputBase-sizeSmall"][class*="MuiAutocomplete-inputRoot"] { padding-top: 3px !important; padding-bottom: 3px !important; }
[class*="MuiInputLabel-sizeSmall"]:not([class*="MuiInputLabel-shrink"]) { transform: translate(14px, 11px) scale(1) !important; }
[class*="MuiFormLabel-root"] { color: var(--z-body) !important; font-weight: 500 !important; }
[class*="MuiFormLabel-root"][class*="Mui-focused"] { color: var(--z-blue) !important; }
[class*="MuiFormLabel-root"][class*="Mui-error"] { color: var(--z-danger) !important; }
[class*="MuiOutlinedInput-root"][class*="Mui-error"] [class*="MuiOutlinedInput-notchedOutline"] { border-color: var(--z-danger) !important; }
[class*="MuiFormHelperText-root"][class*="Mui-error"] { color: var(--z-danger) !important; }
[class*="MuiInputAdornment-root"] [class*="MuiSvgIcon-root"],
[class*="MuiInputAdornment-root"] [class*="MuiIconButton-root"] { color: var(--z-muted) !important; }
[class*="MuiSelect-icon"], [class*="MuiAutocomplete-popupIndicator"] { color: var(--z-blue) !important; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: var(--z-ink) !important;
  caret-color: var(--z-ink) !important;
}

/* Caixas, rádios, switches */
[class*="MuiCheckbox-root"]:not([class*="Mui-checked"]),
[class*="MuiRadio-root"]:not([class*="Mui-checked"]) { color: var(--z-muted) !important; }
[class*="MuiCheckbox-root"][class*="Mui-checked"],
[class*="MuiRadio-root"][class*="Mui-checked"] { color: var(--z-blue) !important; }
[class*="MuiSwitch-track"] { background-color: var(--z-disabled-bg) !important; opacity: 1 !important; }
[class*="MuiSwitch-switchBase"][class*="Mui-checked"] + [class*="MuiSwitch-track"] { background-color: var(--z-green) !important; }
[class*="MuiSwitch-switchBase"][class*="Mui-checked"] [class*="MuiSwitch-thumb"] { background-color: #ffffff !important; }
[class*="MuiSwitch-switchBase"]:not([class*="Mui-checked"]) [class*="MuiSwitch-thumb"] { background-color: #ffffff !important; }

/* Chips */
[class*="MuiChip-root"] { background-color: var(--z-blue-050) !important; color: var(--z-blue) !important; border-radius: 999px !important; font-weight: 600 !important; }
[class*="MuiChip-root"] [class*="MuiChip-label"] { color: var(--z-blue) !important; }
[class*="MuiChip-root"] [class*="MuiChip-deleteIcon"] { color: var(--z-muted) !important; }
[class*="MuiChip-root"] [class*="MuiChip-deleteIcon"]:hover { color: var(--z-blue) !important; }

/* ---------- Botões ---------- */
[class*="MuiButton-root"] {
  text-transform: none !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
  min-height: 44px;
  padding-left: 22px !important;
  padding-right: 22px !important;
  box-shadow: none !important;
}
[class*="MuiButton-sizeSmall"] { min-height: 36px; font-size: 13.5px !important; padding-left: 16px !important; padding-right: 16px !important; }
/* primário = verde de ação com texto marinho (DS); secundário = azul */
[class*="MuiButton-contained"][class*="MuiButton-colorPrimary"] { background-color: var(--z-green) !important; color: var(--z-blue-deep) !important; }
[class*="MuiButton-contained"][class*="MuiButton-colorPrimary"]:hover { background-color: var(--z-green-hover) !important; }
/* No Traccar, color="secondary" marca a ação principal da tela (Entrar, Mostrar): verde também */
[class*="MuiButton-contained"][class*="MuiButton-colorSecondary"],
[class*="MuiButton-outlined"][class*="MuiButton-colorSecondary"] { background-color: var(--z-green) !important; color: var(--z-blue-deep) !important; border-color: transparent !important; }
[class*="MuiButton-contained"][class*="MuiButton-colorSecondary"]:hover,
[class*="MuiButton-outlined"][class*="MuiButton-colorSecondary"]:hover { background-color: var(--z-green-hover) !important; }
/* o rótulo interno do botão é um Typography "button" com caixa alta própria */
[class*="MuiTypography-button"] { text-transform: none !important; font-family: var(--z-display) !important; font-weight: 700 !important; letter-spacing: 0 !important; }
[class*="MuiButton-contained"][class*="MuiButton-colorError"] { background-color: var(--z-danger) !important; color: #ffffff !important; }
[class*="MuiButton-outlined"][class*="MuiButton-colorPrimary"] { color: var(--z-blue) !important; border: 1.5px solid var(--z-blue) !important; }
[class*="MuiButton-outlined"][class*="MuiButton-colorError"] { color: var(--z-danger) !important; border-color: var(--z-danger) !important; }
[class*="MuiButton-text"][class*="MuiButton-colorPrimary"],
[class*="MuiButton-text"][class*="MuiButton-colorSecondary"] { color: var(--z-blue) !important; }
[class*="MuiButton-text"][class*="MuiButton-colorError"] { color: var(--z-danger) !important; }
[class*="MuiButton-outlined"][class*="MuiButton-colorPrimary"]:hover, [class*="MuiButton-text"]:hover { background-color: var(--z-blue-050) !important; }
[class*="MuiButton-root"][class*="Mui-disabled"] { background-color: var(--z-disabled-bg) !important; color: #46536b !important; opacity: 1 !important; border-color: transparent !important;
  /* o MUI desliga pointer-events no botão desabilitado; com isso o clique no "Entrar" não conta como gesto e o Chrome nunca libera a senha preenchida. Clicar num botão desabilitado continua sem efeito. */
  pointer-events: auto !important; cursor: not-allowed; }
[class*="MuiButton-text"][class*="Mui-disabled"] { background-color: transparent !important; color: var(--z-disabled-bg) !important; }
[class*="MuiIconButton-root"] { color: var(--z-blue) !important; }
[class*="MuiIconButton-root"]:hover { background-color: var(--z-blue-050) !important; }
[class*="MuiIconButton-root"][class*="Mui-disabled"] { color: var(--z-disabled-bg) !important; }
[class*="MuiFab-root"] { background-color: var(--z-green) !important; color: var(--z-blue-deep) !important; box-shadow: 0 8px 28px rgba(101, 241, 108, .42) !important; }
[class*="MuiFab-root"]:hover { background-color: var(--z-green-hover) !important; }
[class*="MuiButtonBase-root"]:focus-visible, a:focus-visible { outline: 3px solid var(--z-green) !important; outline-offset: 2px; }
/* campos já mostram o anel verde no contorno do MuiOutlinedInput; sem outline duplicado no input interno */
[class*="MuiInputBase-input"]:focus, [class*="MuiInputBase-input"]:focus-visible { outline: none !important; }

/* ---------- Navegação ---------- */
[class*="MuiBottomNavigation-root"] { background-color: #ffffff !important; border-top: 1px solid var(--z-line) !important; height: 64px !important; }
[class*="MuiBottomNavigationAction-root"] { color: var(--z-muted) !important; position: relative; }
[class*="MuiBottomNavigationAction-root"] [class*="MuiSvgIcon-root"] { color: inherit !important; }
[class*="MuiBottomNavigationAction-label"] { font-weight: 700 !important; font-size: 11px !important; opacity: 1 !important; }
[class*="MuiBottomNavigationAction-root"][class*="Mui-selected"] { color: var(--z-blue) !important; }
[class*="MuiBottomNavigationAction-root"][class*="Mui-selected"] [class*="MuiBottomNavigationAction-label"] { font-size: 11px !important; }
[class*="MuiBottomNavigationAction-root"][class*="Mui-selected"]::after {
  content: ""; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  width: 18px; height: 3px; border-radius: 2px; background: var(--z-green);
}
[class*="MuiListItemIcon-root"] [class*="MuiSvgIcon-root"],
[class*="MuiDrawer-paper"] [class*="MuiSvgIcon-root"],
[class*="MuiAppBar-root"] [class*="MuiSvgIcon-root"] { color: var(--z-muted) !important; }
[class*="MuiAppBar-root"] [class*="MuiIconButton-root"] [class*="MuiSvgIcon-root"] { color: var(--z-blue) !important; }

/* Menu lateral (Drawer): itens em pílula */
[class*="MuiDrawer-paper"] [class*="MuiListItemButton-root"] {
  border-radius: 999px !important; margin: 2px 10px !important; padding-top: 8px !important; padding-bottom: 8px !important;
}
[class*="MuiDrawer-paper"] [class*="MuiListItemButton-root"]:hover { background-color: var(--z-page) !important; }
[class*="MuiDrawer-paper"] [class*="MuiListItemButton-root"][class*="Mui-selected"] { background-color: var(--z-blue-050) !important; border-left: 0 !important; box-shadow: none !important; }
[class*="MuiDrawer-paper"] [class*="MuiListItemButton-root"][class*="Mui-selected"] [class*="MuiTypography-root"],
[class*="MuiDrawer-paper"] [class*="MuiListItemButton-root"][class*="Mui-selected"] [class*="MuiSvgIcon-root"] { color: var(--z-blue) !important; }
[class*="MuiDrawer-paper"] [class*="MuiListItemButton-root"] [class*="MuiListItemText-primary"] { font-family: var(--z-ui) !important; font-weight: 600 !important; font-size: 14px !important; }

/* Lista de veículos (fora do Drawer): linha cheia com filete verde */
[class*="MuiListItemButton-root"]:hover { background-color: var(--z-page) !important; }
[class*="MuiListItemButton-root"][class*="Mui-selected"] { background-color: var(--z-blue-050) !important; box-shadow: inset 3px 0 0 var(--z-green); }
[class*="MuiListItemButton-root"][class*="Mui-selected"] [class*="MuiTypography-root"] { color: var(--z-blue) !important; }
/* O Traccar desenha o ícone do veículo em branco (img/mask): o avatar precisa ser azul cheio */
[class*="MuiAvatar-root"] { background-color: var(--z-blue) !important; color: #ffffff !important; font-family: var(--z-display) !important; font-weight: 700 !important; }
[class*="MuiListItemButton-root"][class*="Mui-selected"] [class*="MuiAvatar-root"] { background-color: var(--z-blue-deep) !important; }
[class*="MuiMenuItem-root"]:hover { background-color: var(--z-page) !important; }
[class*="MuiMenuItem-root"][class*="Mui-selected"] { background-color: var(--z-blue-050) !important; color: var(--z-blue) !important; }

/* Abas */
[class*="MuiTabs-indicator"] { background-color: var(--z-green) !important; height: 3px !important; border-radius: 2px; }
[class*="MuiTab-root"] { color: var(--z-muted) !important; font-weight: 700 !important; text-transform: none !important; }
[class*="MuiTab-root"][class*="Mui-selected"] { color: var(--z-blue) !important; }

/* ---------- Tabelas ---------- */
[class*="MuiTableHead-root"] [class*="MuiTableCell-root"] {
  background-color: var(--z-page) !important; color: var(--z-body) !important;
  font-weight: 600 !important; font-size: 12.5px !important; border-bottom: 1px solid var(--z-line) !important;
}
[class*="MuiTableBody-root"] [class*="MuiTableCell-root"] { color: var(--z-ink) !important; border-bottom: 1px solid var(--z-line-soft) !important; font-size: 14px !important; }
[class*="MuiTableRow-root"]:hover [class*="MuiTableCell-root"] { background-color: var(--z-blue-050) !important; }
[class*="MuiPaginationItem-root"] { border-radius: 999px !important; color: var(--z-body) !important; }
[class*="MuiPaginationItem-root"][class*="Mui-selected"] { background-color: var(--z-blue) !important; color: #ffffff !important; }

/* ---------- Acordeões (configurações) ---------- */
[class*="MuiAccordion-root"] {
  border: 1px solid var(--z-line) !important; border-radius: 16px !important; box-shadow: none !important; margin: 0 0 12px 0 !important;
}
[class*="MuiAccordion-root"]::before { display: none !important; }
[class*="MuiAccordion-root"][class*="Mui-expanded"] { margin: 0 0 12px 0 !important; }
[class*="MuiAccordionSummary-root"] { min-height: 56px !important; }
[class*="MuiAccordionSummary-root"] [class*="MuiSvgIcon-root"] { color: var(--z-blue) !important; }

/* ---------- Links, progresso, tooltip, alertas ---------- */
a, [class*="MuiLink-root"] { color: var(--z-blue-link) !important; font-weight: 600; text-decoration-color: rgba(6, 68, 179, .35); }
[class*="MuiCircularProgress-root"], [class*="MuiLinearProgress-barColorPrimary"] { color: var(--z-blue) !important; }
[class*="MuiLinearProgress-root"] { background-color: var(--z-blue-050) !important; }
[class*="MuiTooltip-tooltip"] { background-color: var(--z-blue-deep) !important; font-family: var(--z-ui) !important; border-radius: 8px !important; }
[class*="MuiSnackbarContent-root"] { background-color: #ffffff !important; color: var(--z-ink) !important; border-radius: 16px !important; box-shadow: var(--z-shadow) !important; font-family: var(--z-ui) !important; }
[class*="MuiAlert-standardSuccess"] { background-color: #E6FBEA !important; color: #0B6B4A !important; }
[class*="MuiAlert-standardError"] { background-color: #FFE8EF !important; color: #9B0F3F !important; }
[class*="MuiAlert-standardWarning"] { background-color: #FFF0E0 !important; color: #8A4300 !important; }
[class*="MuiAlert-standardInfo"] { background-color: var(--z-blue-050) !important; color: var(--z-blue) !important; }

/* ---------- Mapa (MapLibre) ---------- */
.maplibregl-ctrl-group {
  border-radius: 999px !important; overflow: hidden; border: 1px solid var(--z-line) !important;
  box-shadow: var(--z-shadow-sm) !important; background: #ffffff !important;
}
.maplibregl-ctrl-group button { width: 40px !important; height: 40px !important; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--z-line-soft) !important; }
.maplibregl-ctrl-group button:hover { background-color: var(--z-blue-050) !important; }
.maplibregl-popup-content { border-radius: 16px !important; box-shadow: var(--z-shadow) !important; font-family: var(--z-ui) !important; }
.maplibregl-ctrl-attrib { font-family: var(--z-ui) !important; border-radius: 999px !important; }

/* ---------- Logo ---------- */
img[src*="/branding/zapiloc-on"] { max-width: 85% !important; max-height: none !important; width: 420px !important; height: auto !important; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--z-page); }
::-webkit-scrollbar-thumb { background: #B9C4E0; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--z-blue); }

/* ---------- Login: painel azul ---------- */
[class*="-sidebar"]:has(> img[src*="/branding/zapiloc-on-dark"]) {
  position: relative !important;
  background: linear-gradient(160deg, var(--z-blue) 0%, var(--z-blue-deep) 100%) !important;
  overflow: hidden;
}
[class*="-sidebar"]:has(> img[src*="/branding/zapiloc-on-dark"])::before {
  content: "um serviço"; position: absolute; right: 30px; bottom: 74px;
  font: 500 13px/1 var(--z-ui); letter-spacing: .02em; color: rgba(255, 255, 255, .72);
}
[class*="-sidebar"]:has(> img[src*="/branding/zapiloc-on-dark"])::after {
  content: ""; position: absolute; right: 30px; bottom: 26px; width: 104px; height: 44px;
  background: url("/branding/zapi-lockup-on-dark.png") right center / contain no-repeat;
}
/* coluna azul vazia do login em tablet (600–1200px); a lista do mapa nunca é vazia */
main > [class*="-sidebar"]:empty { display: none !important; }