/* ------------------------------------------------------------------ */
/* Conteúdo original do styles.css da imagem traccar/traccar:latest    */
/* ------------------------------------------------------------------ */

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

@media (prefers-color-scheme: dark) {
  body {
    /* !important: o CssBaseline do MUI sobrescreve com background.default
       (grey[900] = #212121) injetando no <head> depois deste arquivo. */
    background: #000000 !important;
  }
}

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

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

/* ------------------------------------------------------------------ */
/* Customização AGenteAcha                                             */
/*                                                                     */
/* <main> é renderizado apenas pelo LoginLayout, então o escopo é      */
/* login / reset de senha / registro / troca de servidor.              */
/*                                                                     */
/* Layout (LoginLayout-D-6rL4KT.js + LoginPage-CZjvX1_l.js):           */
/*   <main>                                                            */
/*     <div class="…sidebar">  <img>  </div>    <- logo em >=lg        */
/*     <div class="MuiPaper-root …paper">                              */
/*       <form>                                                        */
/*         <div class="…options">                                      */
/*           … <span class="…flag"> <img> </span>  <- BANDEIRA idioma  */
/*         <div class="…container">                                    */
/*           <img>                              <- logo em <lg         */
/*                                                                     */
/* CUIDADO: existem DOIS <img> dentro do <form>. "main form img" pega  */
/* a bandeira do seletor de idioma junto e a infla pro tamanho da      */
/* logo. Por isso o combinador de filho: "main form > div > img" casa  */
/* só com a logo (filha direta do .container); a bandeira fica dois    */
/* níveis mais fundo, dentro de um <span>.                             */
/*                                                                     */
/* Modo escuro = server.attributes.darkMode se definido, senão a media */
/* query do sistema. Como darkMode não está setado, prefers-color-     */
/* scheme casa com o app. Se um dia setarem esse atributo, as regras   */
/* abaixo escopadas por media query vão divergir do tema.              */
/* ------------------------------------------------------------------ */

/* --- fundo preto atrás da logo --------------------------------------*/

/* Desktop (>=lg): painel lateral */
main > div:first-child {
  background: #000000 !important;
}

/* <lg em dark mode: o Paper é #121212 + overlay de elevação = #1e1e1e.
   Zeramos cor e overlay pra casar com o preto da logo. */
@media (max-width: 1199.95px) and (prefers-color-scheme: dark) {
  main > .MuiPaper-root {
    background-color: #000000 !important;
    background-image: none !important;
  }
}

/* <lg em light mode: o Paper é branco e o PNG do lockup é RGB SEM alpha —
   o fundo preto está pintado na imagem. Sobre o Paper branco isso vira um
   retângulo preto de borda dura; o padding + border-radius transformam esse
   recorte numa placa arredondada de propósito, em vez de acidente. */
@media (max-width: 1199.95px) and (prefers-color-scheme: light) {
  main form > div > img {
    background: #000000 !important;
    border-radius: 12px;
    padding: 12px;
    box-sizing: border-box;
  }
}

/* --- layout: painel lateral maior ------------------------------------*/
/* O gargalo nunca foi o max-width da imagem: o tema fixa o painel em
   dimensions.sidebarWidth = 28% da viewport (LoginLayout, .sidebar), e
   o Paper reserva padding-right spacing(25) = 200px em >=lg — é o que
   empurra o formulário pra esquerda do espaço dele. Com o painel preso
   em 28%, a logo não passa de ~26% da tela por mais que se mexa nela.

   Aqui o painel deixa de ser porcentagem fixa e passa a tomar TODO o
   espaço que sobra depois de reservar o necessário pro formulário:
   form maxWidth spacing(52) = 416px + folga = 520px. O clamp segura os
   dois extremos — nunca menor que os 28% originais, nunca além de 68%,
   porque passar disso só acrescenta preto: a arte tem margem própria e o
   que sobra do painel é fundo, não logo.

   O padding-right de 200px do Paper vai a zero: sem ele o formulário
   fica centralizado no espaço restante, que é o que faz sentido agora
   que esse espaço passou a ser justo.                                 */

@media (min-width: 1200px) {
  main > div:first-child {
    width: clamp(28%, calc(100% - 520px), 68%) !important;
    /* spacing(5) do tema; zerado, vira altura útil pra logo */
    padding-bottom: 0 !important;
  }

  main > .MuiPaper-root {
    padding-right: 0 !important;
  }
}

/* --- tamanho da logo -------------------------------------------------*/
/* O tema limita a imagem a max-width 240px / max-height 120px. O lockup é
   1448x1086 (~4:3), então o max-height de 120px é o que a encolhe.
   Soltamos os dois e deixamos o container governar.                   */

/* Desktop: 92% do painel novo. O teto em vh existe porque em tela baixa
   (notebook 16:9) a altura é que vira o gargalo, e sem ele o lockup
   estouraria a dobra. margin zerada (era spacing(2)) devolve 32px de
   largura.

   ATENÇÃO ao `width`: com `auto`, o max-width de 92% é só um TETO — a
   imagem para no tamanho intrínseco do PNG e não cresce além dele. Era
   por isso que a logo aparecia minúscula dentro do painel largo. Com
   `width: 92%` ela de fato acompanha o container. O max-height continua
   valendo: para elemento substituído, o navegador reduz a largura junto
   ao aplicar o teto de altura, então o ~4:3 se mantém.                */
main > div:first-child img {
  width: 92% !important;
  max-width: 92% !important;
  max-height: 92vh !important;
  height: auto !important;
  margin: 0 !important;
}

/* <lg: a logo é renderizada dentro do <form>, que tem maxWidth 416px e
   padding 40px — teto de 336px. Em vez de alargar o form (o que
   esticaria os campos junto), a imagem escapa da caixa: largura
   explícita maior que a do pai + o align-self:center que o tema já põe
   nela = transborda centralizada, sem margin negativa. O
   calc(100vw - 96px) evita encostar na borda e criar scroll horizontal
   (52px de painel em >=sm + respiro).                                 */
@media (max-width: 1199.95px) {
  main form > div > img {
    width: min(520px, calc(100vw - 96px)) !important;
    max-width: none !important;
    max-height: 50vh !important;
    height: auto !important;
  }

  /* <sm o painel lateral tem width 0 (não há 52px pra reservar), então
     a logo pode chegar mais perto da borda. */
  @media (max-width: 599.95px) {
    main form > div > img {
      width: min(520px, calc(100vw - 32px)) !important;
    }
  }

  /* Com a logo grande, em landscape de celular o conteúdo pode passar da
     altura do Paper. `safe center` centraliza enquanto cabe e desencosta
     do topo quando não cabe — navegador sem suporte descarta a
     declaração e mantém o center do tema. O overflow-y dá o scroll. */
  main > .MuiPaper-root {
    justify-content: safe center !important;
    overflow-y: auto !important;
  }
}

/* ==================================================================== */
/* Camada de design iOS (Apple HIG) — AGenteAcha                        */
/*                                                                      */
/* Ordem da cascata, que é o que dita o !important quase onipresente    */
/* aqui: index.html carrega /styles.css ANTES de                        */
/* /assets/index-*.css (app + MapLibre) e o emotion do MUI injeta       */
/* <style> no <head> só em runtime, depois de tudo. Ou seja: este       */
/* arquivo é o primeiro a falar e o último a ser ouvido. Sem            */
/* !important praticamente nada aqui pega.                              */
/*                                                                      */
/* Escopo: ANEXADO de propósito, não substitui o bloco acima. As        */
/* regras de login/logo já resolvidas continuam valendo; nada aqui      */
/* re-seleciona `main > div:first-child` nem o background do Paper de   */
/* login, para não sobrescrevê-las por chegar depois com !important.    */
/* ==================================================================== */

/* --- tokens ----------------------------------------------------------*/
/* Cores do sistema iOS (systemBlue, systemGreen, …) nos dois modos.    */
/* Mantida a estratégia do arquivo: prefers-color-scheme, igual ao      */
/* resto — se um dia server.attributes.darkMode for setado, este bloco  */
/* diverge junto com as regras antigas, de forma consistente.           */

:root {
  color-scheme: light dark;

  /* Acento da marca. Três papéis distintos de propósito — o verde do logo
     (#57D303) é claro demais para carregar texto branco: dá 1.96:1, reprova
     em qualquer critério. Então ele fica só onde é FUNDO, com rótulo preto
     (10.72:1), que é o mesmo par verde-sobre-preto do próprio logo.
       --ios-accent      texto/ícone/indicador  -> contrasta COM o fundo
       --ios-accent-fill superfície preenchida  -> o verde do logo, cru
       --ios-on-accent   o que vai por cima do fill
     No claro o acento escurece para 5.34:1 no branco e 4.78:1 no #F2F2F7. */
  --ios-accent: #357A00;
  --ios-accent-fill: #57D303;
  --ios-on-accent: #000000;
  --ios-green: #34C759;
  --ios-red: #FF3B30;
  --ios-orange: #FF9500;

  --ios-bg: #F2F2F7;              /* systemGroupedBackground */
  --ios-surface: #FFFFFF;         /* secondarySystemGroupedBackground */
  --ios-label: #000000;
  --ios-label-2: rgba(60, 60, 67, .60);
  --ios-label-3: rgba(60, 60, 67, .30);
  --ios-separator: rgba(60, 60, 67, .29);
  --ios-fill: rgba(120, 120, 128, .12);
  --ios-fill-strong: rgba(120, 120, 128, .20);
  --ios-material: rgba(249, 249, 249, .80);
  --ios-focus: rgba(87, 211, 3, .30);

  --ios-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.08);
  --ios-radius: 12px;
  --ios-radius-lg: 16px;
  --ios-radius-xl: 20px;

  /* San Francisco quando existe (Apple), degradando pro sans do SO.    */
  --ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Text",
              "SF Pro Display", "Segoe UI", Roboto, system-ui,
              "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* No escuro o acento pode abrir: 10.14:1 sobre #1C1C1E. O fill não
       muda — é a cor do logo, e ela já rende 8.69:1 ali. */
    --ios-accent: #6BE21A;
    --ios-accent-fill: #57D303;
    --ios-on-accent: #000000;
    --ios-green: #30D158;
    --ios-red: #FF453A;
    --ios-orange: #FF9F0A;

    --ios-bg: #000000;
    --ios-surface: #1C1C1E;
    --ios-label: #FFFFFF;
    --ios-label-2: rgba(235, 235, 245, .60);
    --ios-label-3: rgba(235, 235, 245, .30);
    --ios-separator: rgba(84, 84, 88, .65);
    --ios-fill: rgba(120, 120, 128, .24);
    --ios-fill-strong: rgba(120, 120, 128, .36);
    --ios-material: rgba(30, 30, 32, .80);
    --ios-focus: rgba(87, 211, 3, .38);

    --ios-shadow: 0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.50);
  }
}

/* --- tipografia ------------------------------------------------------*/
/* O tracking negativo é o que mais "vende" o visual Apple: a SF é      */
/* desenhada com espacejamento apertado em corpo de texto.              */

body,
.MuiTypography-root,
.MuiButton-root,
.MuiInputBase-root,
.MuiFormLabel-root,
.MuiChip-label,
.MuiTab-root,
.MuiMenuItem-root,
.MuiTableCell-root,
.MuiListItemText-primary,
.MuiListItemText-secondary {
  font-family: var(--ios-font) !important;
  letter-spacing: -0.01em !important;
}

body {
  background-color: var(--ios-bg) !important;
  color: var(--ios-label) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.MuiTypography-h1, .MuiTypography-h2, .MuiTypography-h3,
.MuiTypography-h4, .MuiTypography-h5, .MuiTypography-h6,
.MuiDialogTitle-root {
  font-weight: 700 !important;
  letter-spacing: -0.022em !important;
}

.MuiListItemText-primary { font-weight: 500 !important; }
.MuiListItemText-secondary { color: var(--ios-label-2) !important; }

/* --- barra superior: material translúcido ----------------------------*/
/* Barras no iOS não têm sombra; têm blur e um separador de meio pixel. */

.MuiAppBar-root {
  background-color: var(--ios-material) !important;
  background-image: none !important;
  color: var(--ios-label) !important;
  box-shadow: none !important;
  border-bottom: 0.5px solid var(--ios-separator) !important;
}

@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .MuiAppBar-root {
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
}

/* --- botões ----------------------------------------------------------*/
/* O MUI força uppercase; o iOS nunca usa. text-transform é a única     */
/* mudança aqui que sozinha já muda a percepção do produto.             */

.MuiButton-root {
  text-transform: none !important;
  border-radius: var(--ios-radius) !important;
  font-weight: 590 !important;
  box-shadow: none !important;
  padding: 8px 16px !important;
}

.MuiButton-contained,
.MuiButton-containedPrimary {
  background-color: var(--ios-accent-fill) !important;
  color: var(--ios-on-accent) !important;
}

/* Vermelho é escuro o bastante para texto branco (3.4:1); o verde de sucesso
   não é (2.1:1), então leva preto igual ao primário. */
.MuiButton-containedError {
  background-color: var(--ios-red) !important;
  color: #FFFFFF !important;
}

.MuiButton-containedSuccess {
  background-color: var(--ios-green) !important;
  color: #000000 !important;
}
.MuiButton-contained:hover { filter: brightness(0.94); }

.MuiButton-outlined {
  border: 1px solid var(--ios-separator) !important;
  color: var(--ios-accent) !important;
  background-color: transparent !important;
}

.MuiButton-text { color: var(--ios-accent) !important; }
.MuiIconButton-root { color: var(--ios-accent) !important; }

.MuiFab-root {
  background-color: var(--ios-accent-fill) !important;
  color: var(--ios-on-accent) !important;
  box-shadow: var(--ios-shadow) !important;
}

/* --- campos de formulário -------------------------------------------*/
/* iOS usa campo preenchido (tertiarySystemFill) sem borda, não a       */
/* caixa outlined do Material. A borda vira anel de foco.               */

.MuiOutlinedInput-root {
  border-radius: var(--ios-radius) !important;
  background-color: var(--ios-fill) !important;
}

.MuiOutlinedInput-notchedOutline { border: none !important; }

.MuiOutlinedInput-root.Mui-focused {
  box-shadow: 0 0 0 3px var(--ios-focus) !important;
}

.MuiOutlinedInput-root.Mui-error {
  box-shadow: 0 0 0 3px rgba(255, 59, 48, .25) !important;
}

.MuiFormLabel-root { color: var(--ios-label-2) !important; }
.MuiFormLabel-root.Mui-focused { color: var(--ios-accent) !important; }

.MuiCheckbox-root.Mui-checked,
.MuiRadio-root.Mui-checked { color: var(--ios-accent) !important; }

/* --- switch: reconstruído no formato iOS ----------------------------*/
/* Medidas reais do controle do iOS: trilho 51x31, polegar 27.         */

.MuiSwitch-root {
  width: 51px !important;
  height: 31px !important;
  padding: 0 !important;
  overflow: visible !important;
}

.MuiSwitch-switchBase { padding: 2px !important; }
.MuiSwitch-switchBase.Mui-checked { transform: translateX(20px) !important; }

.MuiSwitch-thumb {
  width: 27px !important;
  height: 27px !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15) !important;
}

.MuiSwitch-track {
  border-radius: 16px !important;
  background-color: var(--ios-fill-strong) !important;
  opacity: 1 !important;
}

.MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track {
  background-color: var(--ios-accent-fill) !important;
  opacity: 1 !important;
}

/* --- superfícies -----------------------------------------------------*/
/* Deliberadamente NÃO se mexe no background de .MuiPaper-root cru: o   */
/* bloco de login acima pinta o Paper de preto com !important e, como   */
/* este arquivo vem depois, um seletor de mesma especificidade aqui     */
/* venceria e desfaria aquilo. Só componentes específicos.              */

.MuiCard-root,
.MuiDialog-paper,
.MuiDrawer-paper {
  background-color: var(--ios-surface) !important;
  background-image: none !important;
}

.MuiCard-root {
  border-radius: var(--ios-radius-lg) !important;
  box-shadow: var(--ios-shadow) !important;
}

.MuiDialog-paper {
  border-radius: var(--ios-radius-xl) !important;
  box-shadow: var(--ios-shadow) !important;
}

.MuiDrawer-paper { border: none !important; }

.MuiBackdrop-root {
  background-color: rgba(0, 0, 0, .28) !important;
}

.MuiMenu-paper,
.MuiPopover-paper {
  border-radius: 14px !important;
  background-color: var(--ios-material) !important;
  background-image: none !important;
  box-shadow: var(--ios-shadow) !important;
}

@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .MuiMenu-paper, .MuiPopover-paper {
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
}

.MuiMenuItem-root {
  border-radius: 8px !important;
  margin: 2px 6px !important;
}

.MuiAccordion-root {
  border-radius: var(--ios-radius) !important;
  background-color: var(--ios-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0.5px solid var(--ios-separator) !important;
}

/* O MUI desenha o separador do Accordion num ::before; no visual       */
/* agrupado do iOS ele vira ruído em cima da borda que já existe.       */
.MuiAccordion-root::before { display: none !important; }

/* --- listas ----------------------------------------------------------*/
/* Sem margin lateral de propósito: a lista de dispositivos é           */
/* virtualizada (react-window), com linhas em position:absolute e       */
/* altura calculada. Margin ali desalinha a virtualização.              */

.MuiListItemButton-root { border-radius: 10px !important; }

.MuiListItemButton-root.Mui-selected {
  background-color: var(--ios-fill-strong) !important;
}

.MuiDivider-root { border-color: var(--ios-separator) !important; }

/* --- abas ------------------------------------------------------------*/

.MuiTab-root {
  text-transform: none !important;
  font-weight: 590 !important;
  min-height: 44px !important;
}

.MuiTab-root.Mui-selected { color: var(--ios-accent) !important; }

.MuiTabs-indicator {
  background-color: var(--ios-accent) !important;
  height: 3px !important;
  border-radius: 3px !important;
}

/* --- diversos --------------------------------------------------------*/

.MuiChip-root {
  border-radius: 999px !important;
  background-color: var(--ios-fill) !important;
  font-weight: 500 !important;
}

.MuiTableCell-root {
  border-bottom: 0.5px solid var(--ios-separator) !important;
}

.MuiTableCell-head {
  font-weight: 600 !important;
  color: var(--ios-label-2) !important;
}

.MuiTooltip-tooltip {
  border-radius: 8px !important;
  background-color: rgba(0, 0, 0, .82) !important;
  font-size: 12px !important;
}

.MuiAlert-root, .MuiSnackbarContent-root {
  border-radius: var(--ios-radius) !important;
}

.MuiSlider-root { color: var(--ios-accent) !important; }

.MuiSlider-thumb {
  width: 24px !important;
  height: 24px !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .2) !important;
}

.MuiLinearProgress-bar, .MuiCircularProgress-root {
  color: var(--ios-accent) !important;
}

/* --- controles do mapa (MapLibre) -----------------------------------*/
/* O CSS do MapLibre vem no bundle do app, que carrega depois deste     */
/* arquivo — daí o !important também aqui.                             */

/* Sempre claros, mesmo no modo escuro: o mapa continua claro e os ícones */
/* do MapLibre e do Traccar são pretos — fundo escuro os apagava.        */
.maplibregl-ctrl-group {
  border-radius: var(--ios-radius) !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, .92) !important;
  border: 0.5px solid rgba(60, 60, 67, .29) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 6px 18px rgba(0,0,0,.18) !important;
}

@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .maplibregl-ctrl-group {
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
}

.maplibregl-ctrl-group button {
  width: 38px !important;
  height: 38px !important;
  background: transparent !important;
}

.maplibregl-ctrl-group button + button {
  border-top: 0.5px solid rgba(60, 60, 67, .29) !important;
}

.maplibregl-popup-content {
  border-radius: 14px !important;
  background: var(--ios-surface) !important;
  color: var(--ios-label) !important;
  box-shadow: var(--ios-shadow) !important;
}

/* --- barras de rolagem ----------------------------------------------*/
/* O iOS usa indicador fino que some; aqui fica fino e discreto.        */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--ios-label-3) transparent;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
  background-color: var(--ios-label-3);
  border-radius: 4px;
}

/* --- login: estrutura iOS -------------------------------------------*/
/* Aqui a mudança deixa de ser cosmética. O padrão do iOS para um       */
/* formulário é: fundo agrupado (systemGroupedBackground) + os campos   */
/* num cartão branco de cantos arredondados, colados um no outro e      */
/* separados por um fio de meio pixel — não campos soltos flutuando.    */
/*                                                                     */
/* Só o modo claro recebe o fundo agrupado: no escuro o bloco antigo    */
/* já pinta o Paper de preto em <lg com !important, e um seletor de     */
/* mesma especificidade aqui venceria por vir depois, desfazendo o      */
/* enquadramento da logo.                                              */

@media (prefers-color-scheme: light) {
  main > .MuiPaper-root {
    background-color: var(--ios-bg) !important;
  }
}

/* Campos ocupando a largura toda e na altura de toque do iOS (44pt+). */
main form .MuiTextField-root,
main form .MuiFormControl-root {
  width: 100% !important;
}

main form .MuiOutlinedInput-root {
  min-height: 50px !important;
  border-radius: var(--ios-radius) !important;
  background-color: var(--ios-surface) !important;
  border: 0.5px solid var(--ios-separator) !important;
}

/* Botão primário no formato de ação do iOS: largura cheia, 50 de       */
/* altura, 17px (body semibold), que é a métrica real do sistema.       */
main form .MuiButton-root {
  min-height: 50px !important;
  border-radius: var(--ios-radius) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
}

/* O seletor de idioma vira controle discreto, não um campo de mesmo    */
/* peso visual que e-mail e senha.                                      */
main form .MuiInputBase-root.MuiInput-root,
main form .MuiSelect-select {
  font-size: 15px !important;
  color: var(--ios-label-2) !important;
}

/* --- login: lista agrupada e rótulo como placeholder ----------------*/
/* Estrutura real, extraída do DOM renderizado:                        */
/*   <div class="…-container">                                         */
/*     <img class="…-image">                                           */
/*     <div class="MuiTextField-root">  e-mail                         */
/*     <div class="MuiTextField-root">  senha                          */
/*     <button class="MuiButton-root">                                 */
/*                                                                     */
/* O Traccar rotula as classes do emotion no sufixo (…-container,      */
/* …-form). O hash do meio muda a cada build do frontend, o sufixo     */
/* não — por isso o seletor ancora em [class*="-container"].           */

/* gap zerado e espaçamento reposto na mão: assim os dois campos se    */
/* encostam formando um bloco só, e só o botão fica destacado.         */
main form [class*="-container"] {
  gap: 0 !important;
}

main form [class*="-container"] > .MuiTextField-root:nth-of-type(1) .MuiOutlinedInput-root {
  border-radius: var(--ios-radius) var(--ios-radius) 0 0 !important;
  border-bottom: none !important;
}

main form [class*="-container"] > .MuiTextField-root:nth-of-type(2) .MuiOutlinedInput-root {
  border-radius: 0 0 var(--ios-radius) var(--ios-radius) !important;
}

main form [class*="-container"] > .MuiButton-root {
  margin-top: 24px !important;
}

/* Rótulo flutuante é a assinatura visual do Material. No iOS o texto  */
/* fica dentro do campo e some ao digitar. Como o MUI já posiciona o   */
/* label dentro do campo enquanto não está "shrink", basta esconder o  */
/* estado shrink — o efeito resultante é o de um placeholder.          */
main form .MuiInputLabel-root.MuiInputLabel-shrink {
  opacity: 0 !important;
}

main form .MuiInputLabel-root {
  color: var(--ios-label-3) !important;
  font-size: 17px !important;
}

/* O entalhe da borda existe só para abrir espaço ao label flutuante;  */
/* sem label flutuante, ele vira um rasgo no traço.                    */
main form .MuiOutlinedInput-notchedOutline legend {
  display: none !important;
}

/* iOS não marca campo obrigatório com asterisco. */
main form .MuiFormLabel-asterisk {
  display: none !important;
}

/* Texto digitado na métrica de corpo do iOS (17px). */
main form .MuiOutlinedInput-input {
  font-size: 17px !important;
  padding-left: 16px !important;
}

/* --- barra de abas inferior -----------------------------------------*/
/* Estrutura: <div class="…-menu"> <Paper elevation3> <BottomNavigation> */
/* O Paper traz a sombra por variável inline (--Paper-shadow), mas a    */
/* declaração é box-shadow: var(--Paper-shadow) numa classe — então     */
/* !important aqui vence sem precisar redefinir a variável.             */
/*                                                                     */
/* Tab bar do iOS: material translúcido, fio de meio pixel no topo,     */
/* zero sombra, e o item ativo em azul. O MUI aumenta a fonte do label  */
/* selecionado; o iOS mantém do mesmo tamanho.                          */

[class*="-menu"] > .MuiPaper-root {
  box-shadow: none !important;
  background-color: var(--ios-material) !important;
  background-image: none !important;
  border-top: 0.5px solid var(--ios-separator) !important;
}

@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  [class*="-menu"] > .MuiPaper-root {
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
}

.MuiBottomNavigation-root { background-color: transparent !important; }

.MuiBottomNavigationAction-root { color: var(--ios-label-2) !important; }
.MuiBottomNavigationAction-root.Mui-selected { color: var(--ios-accent) !important; }

.MuiBottomNavigationAction-label,
.MuiBottomNavigationAction-label.Mui-selected {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  margin-top: 2px !important;
}

/* --- lista de dispositivos ------------------------------------------*/
/* ATENÇÃO: as linhas são virtualizadas com react-window e têm altura   */
/* fixa de 72px cravada em style inline. Nada aqui pode alterar altura  */
/* nem margem vertical, ou a virtualização desalinha.                   */

/* Linha de lista no iOS é retangular, com o separador recuado até o    */
/* início do texto — não um cartão arredondado. O raio global de 10px   */
/* continua valendo em menus; aqui dentro da lista, não.                */
[class*="-list"] .MuiListItemButton-root {
  border-radius: 0 !important;
  position: relative !important;
}

[class*="-list"] .MuiListItemButton-root::after {
  content: "";
  position: absolute;
  left: 72px;
  right: 0;
  bottom: 0;
  height: 0.5px;
  background-color: var(--ios-separator);
}

[class*="-list"] .MuiListItemText-primary {
  font-size: 17px !important;
  font-weight: 400 !important;
}

[class*="-list"] .MuiListItemText-secondary {
  font-size: 15px !important;
  color: var(--ios-label-2) !important;
}

/* --- campo de busca --------------------------------------------------*/
/* Barra de busca do iOS: pílula de preenchimento cinza, sem borda.     */

.MuiToolbar-root .MuiOutlinedInput-root,
.MuiToolbar-root .MuiInputBase-root {
  border-radius: 10px !important;
  background-color: var(--ios-fill) !important;
}

/* --- contadores (odômetro/horímetro) --------------------------------*/
/* A engrenagem ao lado de "Distância total"/"Horas" no card do veículo */
/* abre /settings/accumulators, onde se sobrescreve o odômetro à mão.   */
/* Coisa de instalador, não de cliente: o link some, a rota continua.   */
a[href^="/settings/accumulators"] {
  display: none !important;
}

/* --- detalhes da posição (/position/:id) ----------------------------*/
/* A tabela tem Atributo | Nome | Valor. "Atributo" é a chave crua da   */
/* API (fixTime, deviceId…) — só serve a quem mexe no Traccar. Escopo:  */
/* Container maxWidth sm com tabela de exatamente 3 colunas; a outra     */
/* página com Container sm + tabela (NetworkPage) tem 4 e 2 colunas.     */
.MuiContainer-maxWidthSm .MuiTable-root:has(thead th:nth-child(3):last-child) :is(th, td):first-child {
  display: none !important;
}

/* --- preferências (/settings/preferences) ---------------------------*/
/* Token de acesso (gerar/copiar token da API) e a seção Dispositivos   */
/* (título/detalhe do card) não servem ao cliente. Escopo: o Container  */
/* xs cujo accordion tem textarea readonly — só o do token tem isso.    */
/* Dispositivos é o 2º accordion (Mapa, Dispositivos, Som, Token, Info); */
/* em conta readonly só existe o Token, então o nth-child(2) não pega.   */
.MuiContainer-maxWidthXs > .MuiAccordion-root:has(textarea[readonly]),
.MuiContainer-maxWidthXs:has(> .MuiAccordion-root textarea[readonly]) > .MuiAccordion-root:nth-child(2) {
  display: none !important;
}