/* ===== WEBNET SIGA - VISUAL MODERNO ===== */
/* Traccar 6.6 | Atualizado 2026-03-21 */

/* ========================================
   VARIÁVEIS E BASE
   ======================================== */

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

:root {
  --wn-blue: #1d4ed8;
  --wn-blue-dark: #1e3a8a;
  --wn-red: #dc2626;
  --wn-dark: #0f172a;
  --wn-dark-2: #1e293b;
  --wn-gray: #334155;
  --wn-gray-light: #94a3b8;
  --wn-green: #22c55e;
  --wn-surface: rgba(15, 23, 42, 0.92);
  --wn-glass: rgba(30, 41, 59, 0.85);
  --wn-radius: 12px;
  --wn-radius-sm: 8px;
  --wn-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  --wn-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

body, html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  font-family: inherit !important;
}

/* ========================================
   SIDEBAR / PAINEL DE VEÍCULOS (esquerda)
   ======================================== */

/* Container principal da sidebar */
.MuiPaper-elevation3 {
  background: var(--wn-surface) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: var(--wn-shadow) !important;
}

/* Barra de pesquisa */
.MuiInputBase-root {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--wn-radius-sm) !important;
  color: #fff !important;
  transition: var(--wn-transition) !important;
}

.MuiInputBase-root:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.MuiInputBase-root.Mui-focused {
  border-color: var(--wn-blue) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.2) !important;
}

.MuiInputBase-input {
  color: #fff !important;
}

.MuiInputBase-input::placeholder {
  color: var(--wn-gray-light) !important;
  opacity: 1 !important;
}

/* Ícones dentro do input */
.MuiInputAdornment-root .MuiIconButton-root {
  color: var(--wn-gray-light) !important;
}

/* ========================================
   LISTA DE VEÍCULOS
   ======================================== */

/* Cada item da lista */
.MuiListItemButton-root {
  margin: 4px 8px !important;
  padding: 10px 12px !important;
  border-radius: var(--wn-radius-sm) !important;
  border-left: 3px solid transparent !important;
  transition: var(--wn-transition) !important;
  position: relative !important;
}

.MuiListItemButton-root:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Veículo selecionado */
.MuiListItemButton-root.Mui-selected,
.MuiListItemButton-root[aria-selected="true"] {
  background: rgba(29, 78, 216, 0.15) !important;
  border-left-color: var(--wn-blue) !important;
}

/* Avatar/ícone do veículo */
.MuiListItemAvatar-root {
  min-width: 44px !important;
}

.MuiListItemAvatar-root svg {
  background: var(--wn-glass) !important;
  border-radius: 50% !important;
  padding: 6px !important;
  width: 32px !important;
  height: 32px !important;
  color: var(--wn-gray-light) !important;
}

/* Nome do veículo */
.MuiListItemText-primary {
  color: #f1f5f9 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.2px !important;
}

/* Status - Conectado/Desconectado */
.MuiListItemText-secondary {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

/* Dividers na lista */
.MuiDivider-root {
  border-color: rgba(255, 255, 255, 0.06) !important;
  margin: 0 12px !important;
}

/* ========================================
   BARRA INFERIOR (Navegação)
   ======================================== */

.MuiBottomNavigation-root {
  background: var(--wn-dark) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  height: 64px !important;
}

.MuiBottomNavigationAction-root {
  color: var(--wn-gray-light) !important;
  transition: var(--wn-transition) !important;
  min-width: 64px !important;
  padding: 8px 0 !important;
}

.MuiBottomNavigationAction-root.Mui-selected {
  color: var(--wn-blue) !important;
}

.MuiBottomNavigationAction-root:hover {
  color: #e2e8f0 !important;
}

.MuiBottomNavigationAction-root svg {
  font-size: 22px !important;
  margin-bottom: 2px !important;
}

.MuiBottomNavigationAction-label {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
}

.MuiBottomNavigationAction-root.Mui-selected .MuiBottomNavigationAction-label {
  font-size: 11px !important;
}

/* ========================================
   CARD/POPUP DO VEÍCULO NO MAPA
   ======================================== */

.MuiCard-root {
  background: var(--wn-surface) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
  color: #f1f5f9 !important;
  overflow: hidden !important;
}

/* Card de detalhes - manter posicionamento padrão do Traccar */
.MuiCard-root.react-draggable {
  max-height: calc(100vh - 90px) !important;
  overflow-y: auto !important;
}

.MuiCardContent-root {
  padding: 16px !important;
}

/* Título do card */
.MuiCard-root .MuiTypography-h6,
.MuiCard-root .MuiTypography-subtitle1 {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

/* Tabela dentro do card */
.MuiCard-root .MuiTable-root {
  border-collapse: separate !important;
  border-spacing: 0 2px !important;
}

.MuiCard-root .MuiTableCell-root {
  color: #cbd5e1 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
}

.MuiCard-root .MuiTableCell-root:first-child {
  color: var(--wn-gray-light) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Link "Mostrar Endereço" e "Mais Detalhes" */
.MuiCard-root a {
  color: var(--wn-blue) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: var(--wn-transition) !important;
}

.MuiCard-root a:hover {
  color: #60a5fa !important;
}

/* Botões de ação do card (Adicional, Replay, Comando, Editar, Remover) */
.MuiCardActions-root {
  padding: 8px 12px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  gap: 4px !important;
  display: flex !important;
  justify-content: center !important;
}

.MuiCardActions-root .MuiIconButton-root {
  color: var(--wn-gray-light) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px !important;
  width: 38px !important;
  height: 38px !important;
  transition: var(--wn-transition) !important;
}

.MuiCardActions-root .MuiIconButton-root:hover {
  background: rgba(29, 78, 216, 0.2) !important;
  color: #93c5fd !important;
  transform: translateY(-2px) !important;
}

/* Botão de remover - ESCONDIDO para evitar exclusão acidental */
.MuiCardActions-root .MuiIconButton-colorError {
  display: none !important;
}

/* Botão fechar do card */
.MuiCard-root > .MuiIconButton-root {
  color: var(--wn-gray-light) !important;
  transition: var(--wn-transition) !important;
}

.MuiCard-root > .MuiIconButton-root:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* ========================================
   CONTROLES DO MAPA (direita)
   ======================================== */

.maplibregl-ctrl-group {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: var(--wn-radius) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden !important;
}

.maplibregl-ctrl-group button {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  width: 36px !important;
  height: 36px !important;
  transition: var(--wn-transition) !important;
}

.maplibregl-ctrl-group button:hover {
  background: rgba(0, 0, 0, 0.06) !important;
}

.maplibregl-ctrl-group button:last-child {
  border-bottom: none !important;
}

.maplibregl-ctrl-group button .maplibregl-ctrl-icon {
  filter: none !important;
}

/* Seletor de camadas do mapa */
.maplibregl-style-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 4px !important;
}

.maplibregl-style-list button {
  background: transparent !important;
  color: #334155 !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  text-align: left !important;
  white-space: nowrap !important;
  width: auto !important;
  height: auto !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.maplibregl-style-list button:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
}

.maplibregl-style-list button.active {
  background: var(--wn-blue) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* Container do seletor de camadas */
.maplibregl-ctrl-group:has(.maplibregl-style-list) {
  min-width: 140px !important;
  border-radius: var(--wn-radius) !important;
}

/* Controles do mapa - margem */
.maplibregl-ctrl-top-right .maplibregl-ctrl {
  margin-right: 10px !important;
}

/* Escala do mapa */
.maplibregl-ctrl-scale {
  background: rgba(15, 23, 42, 0.7) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 6px !important;
  color: #e2e8f0 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 2px 8px !important;
  line-height: 1.4 !important;
}

/* ========================================
   TELAS INTERNAS (Configurações, Relatórios, Conta)
   ======================================== */

/* Container de páginas internas */
.MuiPaper-elevation1 {
  background: var(--wn-dark-2) !important;
  color: #e2e8f0 !important;
}

/* Fundo geral das páginas internas */
#root > div {
  background: var(--wn-dark) !important;
}

/* Títulos de seção */
.MuiTypography-h6 {
  color: #f1f5f9 !important;
  font-weight: 700 !important;
}

.MuiTypography-subtitle1 {
  color: #e2e8f0 !important;
  font-weight: 600 !important;
}

.MuiTypography-body1 {
  color: #e2e8f0 !important;
}

.MuiTypography-body2 {
  color: #cbd5e1 !important;
}

.MuiTypography-caption {
  color: var(--wn-gray-light) !important;
}

/* Tabelas gerais (Relatórios + Configurações) */
.MuiTable-root {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.MuiTableCell-root {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
  font-size: 13px !important;
  background: transparent !important;
}

/* Header da tabela */
.MuiTableCell-head {
  color: #f1f5f9 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.12) !important;
}

.MuiTableRow-root:hover .MuiTableCell-root {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Zebra stripes suave */
.MuiTableBody-root .MuiTableRow-root:nth-child(even) .MuiTableCell-root {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* Footer da tabela (paginação) */
.MuiTableCell-footer {
  color: var(--wn-gray-light) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.MuiTablePagination-root {
  color: #e2e8f0 !important;
}

.MuiTablePagination-selectIcon {
  color: var(--wn-gray-light) !important;
}

/* ========================================
   RELATÓRIOS - Formulário e filtros
   ======================================== */

/* Container do formulário de relatório */
.MuiPaper-elevation0 {
  background: transparent !important;
  color: #e2e8f0 !important;
}

/* Ícones SVG dentro de botões e em geral */
.MuiSvgIcon-root {
  color: inherit !important;
}

.MuiIconButton-root {
  color: #cbd5e1 !important;
}

.MuiIconButton-root:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Tabs (se houver) */
.MuiTab-root {
  color: var(--wn-gray-light) !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

.MuiTab-root.Mui-selected {
  color: var(--wn-blue) !important;
  font-weight: 600 !important;
}

.MuiTabs-indicator {
  background-color: var(--wn-blue) !important;
}

/* Toolbar/AppBar interno */
.MuiToolbar-root {
  color: #e2e8f0 !important;
}

.MuiAppBar-root {
  background: var(--wn-dark-2) !important;
  color: #e2e8f0 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Links em qualquer lugar */
a {
  color: #60a5fa !important;
}

a:hover {
  color: #93c5fd !important;
}

/* ========================================
   BOTÕES GLOBAIS (específicos MUI)
   ======================================== */

.MuiButtonBase-root.MuiIconButton-root {
  transition: var(--wn-transition) !important;
}

/* Botões de ação primários */
.MuiButton-containedPrimary,
.MuiButton-contained {
  background: linear-gradient(135deg, var(--wn-blue-dark) 0%, var(--wn-blue) 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--wn-radius-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3) !important;
  transition: var(--wn-transition) !important;
}

.MuiButton-containedPrimary:hover,
.MuiButton-contained:hover {
  box-shadow: 0 6px 20px rgba(29, 78, 216, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* Botões outline */
.MuiButton-outlined {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #e2e8f0 !important;
  border-radius: var(--wn-radius-sm) !important;
  transition: var(--wn-transition) !important;
}

.MuiButton-outlined:hover {
  border-color: var(--wn-blue) !important;
  background: rgba(29, 78, 216, 0.1) !important;
}

/* ========================================
   FORMULÁRIOS (Configurações)
   ======================================== */

.MuiOutlinedInput-root {
  border-radius: var(--wn-radius-sm) !important;
}

.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
  border-color: rgba(255, 255, 255, 0.15) !important;
  transition: var(--wn-transition) !important;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--wn-blue) !important;
  border-width: 2px !important;
}

.MuiInputLabel-root {
  color: var(--wn-gray-light) !important;
}

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

.MuiSelect-select {
  color: #e2e8f0 !important;
}

/* Checkboxes */
.MuiCheckbox-root {
  color: var(--wn-gray-light) !important;
}

.MuiCheckbox-root.Mui-checked {
  color: var(--wn-blue) !important;
}

/* ========================================
   MENU LATERAL DE CONFIGURAÇÕES
   ======================================== */

.MuiList-root .MuiListItemButton-root {
  color: #cbd5e1 !important;
}

.MuiList-root .MuiListItemButton-root.Mui-selected {
  background: rgba(29, 78, 216, 0.15) !important;
  color: #93c5fd !important;
  border-left-color: var(--wn-blue) !important;
}

.MuiList-root .MuiListItemButton-root:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

.MuiListItemIcon-root {
  color: inherit !important;
  min-width: 40px !important;
}

/* ========================================
   ACCORDION / EXPANSÃO
   ======================================== */

.MuiAccordion-root {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.MuiAccordionSummary-root {
  color: #f1f5f9 !important;
}

.MuiAccordionSummary-expandIconWrapper {
  color: var(--wn-gray-light) !important;
}

/* ========================================
   SNACKBAR / ALERTAS
   ======================================== */

.MuiSnackbar-root .MuiPaper-root {
  border-radius: var(--wn-radius-sm) !important;
  font-weight: 500 !important;
}

/* ========================================
   TOOLTIPS
   ======================================== */

.MuiTooltip-tooltip {
  background: var(--wn-dark) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* ========================================
   DIALOG / MODAL
   ======================================== */

.MuiDialog-paper {
  background: var(--wn-dark-2) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5) !important;
}

.MuiDialogTitle-root {
  color: #f1f5f9 !important;
  font-weight: 700 !important;
}

.MuiDialogActions-root {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 12px 24px !important;
}

/* ========================================
   SCROLLBAR PERSONALIZADA
   ======================================== */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ========================================
   LOGO WEBNET SIGA
   ======================================== */

/* Logo em TODAS as telas (login, painel, etc) */
img[src*="logo-webnet-siga"],
img[src*="logo"],
img[src*="/logos/"] {
  width: 90% !important;
  max-width: 360px !important;
  min-width: 200px !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4)) !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Tela de Login - logo grande e centralizada */
img.jss10,
img[src*="logo-webnet"],
img[src*="/logos/"] {
  width: 90% !important;
  max-width: 500px !important;
  max-height: none !important;
  height: auto !important;
}

/* ========================================
   MAPA - GARANTIAS
   ======================================== */

.maplibregl-map {
  width: 100% !important;
  height: 100% !important;
}

/* Fix: attribution button */
summary.maplibregl-ctrl-attrib-button,
.maplibregl-ctrl-attrib-button {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
}

.maplibregl-ctrl.maplibregl-ctrl-attrib {
  width: auto !important;
  height: auto !important;
  max-width: 350px !important;
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  border-radius: 6px !important;
  color: #94a3b8 !important;
  font-size: 10px !important;
}

.maplibregl-ctrl-attrib a {
  color: #93c5fd !important;
}

/* ========================================
   CHIP / TAGS
   ======================================== */

.MuiChip-root {
  background: rgba(29, 78, 216, 0.15) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(29, 78, 216, 0.3) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
}

.MuiChip-deleteIcon {
  color: #93c5fd !important;
}

/* ========================================
   DROPDOWN / MENUS
   ======================================== */

.MuiMenu-paper,
.MuiPopover-paper {
  background: var(--wn-dark-2) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--wn-radius) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
  color: #e2e8f0 !important;
}

.MuiMenuItem-root {
  color: #cbd5e1 !important;
  font-size: 13px !important;
  transition: var(--wn-transition) !important;
}

.MuiMenuItem-root:hover {
  background: rgba(29, 78, 216, 0.12) !important;
}

.MuiMenuItem-root.Mui-selected {
  background: rgba(29, 78, 216, 0.2) !important;
  color: #93c5fd !important;
}

/* ========================================
   RESPONSIVE (Mobile)
   ======================================== */

@media (max-width: 768px) {
  .MuiPaper-elevation3 {
    border-radius: 0 !important;
  }

  .MuiCard-root {
    border-radius: 12px 12px 0 0 !important;
    margin: 0 !important;
  }

  .MuiBottomNavigation-root {
    height: 56px !important;
  }
}


/* ========================================
   STATS DO HISTÓRICO DE ROTA (custom.js)
   ======================================== */

/* Barra de stats (pontos, km, máx) */
#wn-history-stats,
[id='wn-history-stats'] {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #e2e8f0 !important;
  padding: 6px 0 !important;
  letter-spacing: 0.2px !important;
}