/* css/style.css — v4.0 — Responsividade 320px / 768px / 980px + Tema Claro */

/* ══════════════════════════════════════════════════════════════
   DEFINIÇÃO DE TEMAS (ESCURO = padrão / CLARO)
══════════════════════════════════════════════════════════════ */
:root {
  /* Dark Theme (padrão) */
  --surface:        #111827;
  --surface-card:   #1f2937;
  --surface-border: #374151;
  --surface-hover:  #283548;
  --map-bg:         #0d1117;
  --shadow-color:   rgba(0,0,0,0.6);
  --bottom-nav-h:   64px;   /* altura da bottom nav mobile */
  /* Aliases de texto */
  --clr-white:   #ffffff;
  --clr-100:     #f3f4f6;
  --clr-200:     #e5e7eb;
  --clr-300:     #d1d5db;
  --clr-400:     #9ca3af;
  --clr-500:     #6b7280;
  --clr-600:     #4b5563;
  --clr-700:     #374151;
  --clr-800:     #1f2937;
  --clr-900:     #111827;
  --clr-body:    #ffffff;
}

[data-theme="light"] {
  /* Light Theme */
  --surface:        #f1f5f9;
  --surface-card:   #ffffff;
  --surface-border: #e2e8f0;
  --surface-hover:  #e8edf5;
  --map-bg:         #f8fafc;
  --shadow-color:   rgba(148,163,184,0.25);
  /* Aliases de texto invertidos */
  --clr-white:   #0f172a;
  --clr-100:     #1e293b;
  --clr-200:     #334155;
  --clr-300:     #475569;
  --clr-400:     #64748b;
  --clr-500:     #94a3b8;
  --clr-600:     #cbd5e1;
  --clr-700:     #e2e8f0;
  --clr-800:     #f1f5f9;
  --clr-900:     #f8fafc;
  --clr-body:    #0f172a;
}

/* ══════════════════════════════════════════════════════════════
   TRANSIÇÃO SUAVE AO TROCAR TEMA
══════════════════════════════════════════════════════════════ */
html {
  transition: background-color 0.25s ease, color 0.25s ease;
}
*, *::before, *::after {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}
/* Evitar que transforms/opacity herdem a transição (animações do Tailwind) */
.animate-fade-in, .animate-slide-in, .animate-pulse-soft,
[class*="transition-all"], [class*="transition-transform"] {
  transition-property: all;
}

/* ══════════════════════════════════════════════════════════════
   TEMA CLARO — OVERRIDES GLOBAIS DE COR
══════════════════════════════════════════════════════════════ */

/* 1. Cor do body (texto padrão) */
[data-theme="light"] body {
  color: var(--clr-body);
}

/* 2. text-white → texto escuro no tema claro */
[data-theme="light"] .text-white {
  color: var(--clr-white) !important;
}

/* 3. hover:text-white no tema claro → texto escuro no hover */
[data-theme="light"] .hover\:text-white:hover {
  color: var(--clr-white) !important;
}

/* 4. EXCEÇÕES — mantém texto BRANCO em elementos com fundo colorido */
/* (botões primários, badges, ações destrutivas, etc.) */
[data-theme="light"] .bg-brand.text-white,
[data-theme="light"] .bg-brand-light.text-white,
[data-theme="light"] button.bg-brand,
[data-theme="light"] button.bg-brand-light,
[data-theme="light"] a.bg-brand,
[data-theme="light"] button.bg-red-500,
[data-theme="light"] button.bg-red-600,
[data-theme="light"] button.bg-green-500,
[data-theme="light"] button.bg-green-600,
[data-theme="light"] button.bg-blue-600,
[data-theme="light"] button.bg-indigo-600,
[data-theme="light"] button.bg-purple-600,
[data-theme="light"] button.bg-orange-500,
[data-theme="light"] button.bg-yellow-500,
[data-theme="light"] button.bg-teal-600,
[data-theme="light"] button.bg-amber-500,
[data-theme="light"] .bg-brand .text-white,
[data-theme="light"] .bg-brand-light .text-white,
[data-theme="light"] .bg-red-500 .text-white,
[data-theme="light"] .bg-red-600 .text-white,
[data-theme="light"] .bg-green-500 .text-white,
[data-theme="light"] .bg-green-600 .text-white,
[data-theme="light"] .bg-blue-600 .text-white,
[data-theme="light"] .bg-indigo-600 .text-white,
[data-theme="light"] .bg-purple-600 .text-white,
[data-theme="light"] .bg-orange-500 .text-white,
[data-theme="light"] .bg-yellow-500 .text-white,
[data-theme="light"] .bg-amber-500 .text-white,
[data-theme="light"] .toast .text-white {
  color: #ffffff !important;
}

/* Botão de ponto (btn-bater-ponto quando ativo com cores dinâmicas) */
[data-theme="light"] [style*="background-color: rgb(34,197,94)"],
[data-theme="light"] [style*="background-color: rgb(239,68,68)"],
[data-theme="light"] [style*="background-color: rgb(59,130,246)"],
[data-theme="light"] [style*="background-color: rgb(234,179,8)"] {
  color: #ffffff !important;
}

/* 5. Escala de cinzas remapeada */
[data-theme="light"] .text-gray-100 { color: var(--clr-100) !important; }
[data-theme="light"] .text-gray-200 { color: var(--clr-200) !important; }
[data-theme="light"] .text-gray-300 { color: var(--clr-300) !important; }
[data-theme="light"] .text-gray-400 { color: var(--clr-400) !important; }
[data-theme="light"] .text-gray-500 { color: var(--clr-500) !important; }
[data-theme="light"] .text-gray-600 { color: var(--clr-600) !important; }
[data-theme="light"] .text-gray-700 { color: var(--clr-700) !important; }
[data-theme="light"] .text-gray-800 { color: var(--clr-800) !important; }
[data-theme="light"] .text-gray-900 { color: var(--clr-900) !important; }

/* 6. Placeholders */
[data-theme="light"] ::placeholder {
  color: var(--clr-400) !important;
  opacity: 1;
}

/* 7. Select e input no tema claro */
[data-theme="light"] select,
[data-theme="light"] input,
[data-theme="light"] textarea {
  color: var(--clr-body) !important;
  background-color: var(--surface-card) !important;
  border-color: var(--surface-border) !important;
}
[data-theme="light"] select option {
  background-color: #ffffff;
  color: #0f172a;
}

/* 8. Tabelas — células com text-gray-300 ficam legíveis */
[data-theme="light"] table td,
[data-theme="light"] table th {
  color: var(--clr-body);
}
/* Cabeçalhos de tabela */
[data-theme="light"] thead {
  background-color: var(--surface) !important;
}

/* 9. Ícones SVG herdados do parent text- */
[data-theme="light"] svg[stroke="currentColor"],
[data-theme="light"] svg path {
  /* herdam a cor do elemento pai, já sobrescrita acima */
}

/* 10. Barra de separação (divide) */
[data-theme="light"] .divide-surface-border > * + * {
  border-color: var(--surface-border);
}

/* 11. Scrollbars no tema claro */
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #94a3b8 !important;
}

/* 12. Modal overlay (backdrop) */
[data-theme="light"] #admin-modal,
[data-theme="light"] #modal-overlay {
  background-color: rgba(15, 23, 42, 0.5);
}

/* 13. Links de navegação da sidebar em tema claro */
[data-theme="light"] nav a.text-gray-500 {
  color: var(--clr-400) !important;
}
[data-theme="light"] nav a:hover .text-white,
[data-theme="light"] nav a:hover {
  color: var(--clr-white) !important;
}

/* 14. Toast em tema claro — texto legível */
[data-theme="light"] .toast {
  color: #1e293b;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
[data-theme="light"] .toast.toast-success {
  background: rgba(34,197,94,0.12);
  border-color: rgba(34,197,94,0.35);
}
[data-theme="light"] .toast.toast-error {
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.35);
}
[data-theme="light"] .toast.toast-info {
  background: rgba(59,130,246,0.10);
  border-color: rgba(59,130,246,0.35);
}
[data-theme="light"] .toast.toast-warning {
  background: rgba(234,179,8,0.12);
  border-color: rgba(234,179,8,0.35);
}

/* 15. Topbar e Nav com sombra suave no tema claro */
[data-theme="light"] #topbar {
  box-shadow: 0 1px 0 var(--surface-border);
}

/* 16. Cards e painéis com sombra mais visível no tema claro */
[data-theme="light"] .shadow-2xl {
  box-shadow: 0 20px 40px rgba(148,163,184,0.2), 0 4px 12px rgba(148,163,184,0.12) !important;
}

/* 17. Item da lista de representantes no tema claro */
[data-theme="light"] .rep-item {
  background-color: var(--surface-card);
  border-color: var(--surface-border);
}
[data-theme="light"] .rep-item:hover {
  background-color: var(--surface-hover);
  border-color: rgba(30,64,255,0.3);
}
[data-theme="light"] .rep-item .text-white {
  color: var(--clr-white) !important;
}

/* 18. Popup do mapa no tema claro */
[data-theme="light"] .leaflet-popup-content-wrapper {
  box-shadow: 0 8px 32px rgba(148,163,184,0.3);
}

/* 19. Indicadores do mapa (zoom, contadores) */
[data-theme="light"] #zoom-indicator,
[data-theme="light"] #markers-counter {
  background: rgba(255,255,255,0.95);
  border-color: var(--surface-border);
  color: var(--clr-body);
}

/* 20. Status API badge */
[data-theme="light"] #api-status {
  background: var(--surface-hover);
}

/* 21. Botão de ponto eletrônico (estado desabilitado) */
[data-theme="light"] #btn-bater-ponto:disabled {
  color: var(--clr-400) !important;
  background-color: var(--surface) !important;
}

/* 22. Texto dentro de spans inline com style background */
[data-theme="light"] span[style*="background"],
[data-theme="light"] div[style*="background:#"],
[data-theme="light"] span[style*="background:#"] {
  /* Textos nestes elementos costumam ser white no HTML dinâmico */
}

/* 23. Highlight ativo nos filtros de tab */
[data-theme="light"] .bg-brand\/10 {
  background-color: rgba(30,64,255,0.08) !important;
}

/* ══════════════════════════════════════════════════════════════
   MAPA — Leaflet
══════════════════════════════════════════════════════════════ */
#map {
  background: var(--map-bg);
}

/* Remove controles padrão do Leaflet */
.leaflet-control-zoom,
.leaflet-control-attribution {
  display: none !important;
}

.leaflet-container {
  font-family: 'Inter', sans-serif;
}

/* Popup customizado */
.leaflet-popup-content-wrapper {
  background: var(--surface-card);
  color: var(--clr-body);
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  box-shadow: 0 20px 60px var(--shadow-color);
  padding: 0;
}

.leaflet-popup-content {
  margin: 0;
  padding: 14px 16px;
}

.leaflet-popup-tip-container {
  display: none;
}

.leaflet-popup-close-button {
  color: var(--clr-400) !important;
  top: 10px !important;
  right: 10px !important;
  font-size: 18px !important;
}

.leaflet-popup-close-button:hover {
  color: var(--clr-body) !important;
}

/* Tooltip do mapa */
.leaflet-tooltip {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  color: var(--clr-body);
  border-radius: 8px;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  padding: 4px 10px;
  box-shadow: 0 4px 12px var(--shadow-color);
}

.leaflet-tooltip::before {
  display: none;
}

/* ══════════════════════════════════════════════════════════════
   SCROLLBAR CUSTOMIZADA
══════════════════════════════════════════════════════════════ */
.custom-scroll::-webkit-scrollbar,
#lista-representantes::-webkit-scrollbar,
#sidebar::-webkit-scrollbar {
  width: 4px;
}

.custom-scroll::-webkit-scrollbar-track,
#lista-representantes::-webkit-scrollbar-track,
#sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scroll::-webkit-scrollbar-thumb,
#lista-representantes::-webkit-scrollbar-thumb,
#sidebar::-webkit-scrollbar-thumb {
  background: var(--surface-border);
  border-radius: 2px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover,
#lista-representantes::-webkit-scrollbar-thumb:hover {
  background: var(--clr-500);
}

/* ══════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
══════════════════════════════════════════════════════════════ */
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  min-width: 240px;
  max-width: 360px;
  border: 1px solid;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  pointer-events: auto;
  animation: toastIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform-origin: bottom right;
  /* Sem transição automática de cor — evita flash durante animação */
  transition: none !important;
}

.toast.toast-success {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
}
.toast.toast-error {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
}
.toast.toast-info {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
}
.toast.toast-warning {
  background: rgba(234, 179, 8, 0.15);
  border-color: rgba(234, 179, 8, 0.3);
}
.toast.removing {
  animation: toastOut 0.25s ease-in forwards;
}

@keyframes toastIn {
  from { opacity: 0; transform: scale(0.8) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to   { opacity: 0; transform: scale(0.9) translateY(6px); }
}

/* ══════════════════════════════════════════════════════════════
   POPUP DE CIDADE (conteúdo dinâmico)
══════════════════════════════════════════════════════════════ */
.popup-cidade-nome {
  font-size: 14px;
  font-weight: 700;
  color: var(--clr-body);
  margin-bottom: 6px;
}

.popup-cidade-estado {
  font-size: 11px;
  color: var(--clr-400);
  margin-bottom: 8px;
}

.popup-rep-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  margin: 2px;
  /* cor de texto garantida pelo inline style do JS */
}

/* ══════════════════════════════════════════════════════════════
   MODAL OVERLAY — flex quando visível
══════════════════════════════════════════════════════════════ */
#modal-overlay.flex {
  display: flex !important;
}

/* ══════════════════════════════════════════════════════════════
   COLOR INPUT
══════════════════════════════════════════════════════════════ */
input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 6px;
}

/* ══════════════════════════════════════════════════════════════
   ESTADO VAZIO
══════════════════════════════════════════════════════════════ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px;
  text-align: center;
}
.empty-state svg { color: var(--surface-border); }
.empty-state p {
  font-size: 13px;
  color: var(--clr-500);
}

/* ══════════════════════════════════════════════════════════════
   BADGE CAPITAL
══════════════════════════════════════════════════════════════ */
.badge-capital {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(234, 179, 8, 0.15);
  color: #ca8a04; /* amarelo mais escuro para legibilidade no tema claro */
  border: 1px solid rgba(234, 179, 8, 0.30);
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVIDADE — mobile sidebar aberta
══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  #sidebar.open {
    transform: translateX(0) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVIDADE — 380px (celulares pequenos)
══════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .toast {
    min-width: 200px;
    max-width: calc(100vw - 32px);
    font-size: 12px;
    padding: 10px 12px;
  }
  #topbar { padding-left: 10px; padding-right: 10px; }
  .leaflet-popup-content-wrapper { max-width: 260px !important; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVIDADE — até 768px (mobile / tablet small)
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #admin-modal > div,
  #modal-overlay > #modal {
    border-radius: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  #admin-modal .p-6 { padding: 16px; }
  #btn-admin-novo span[data-i18n] { display: none; }
  #legenda-representantes { max-height: none; }
  #toast-container {
    bottom: auto;
    top: 16px;
    right: 16px;
    left: 16px;
    align-items: center;
  }
  #zoom-indicator,
  #markers-counter {
    font-size: 10px;
    padding: 4px 8px;
  }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVIDADE — 768px ~ 1280px (tablet / laptop)
══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1280px) {
  #admin-modal > div { max-height: 95vh; }
  #sidebar { width: 18rem; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVIDADE — 1280px+ (desktop / widescreen)
══════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  #sidebar { width: 20rem; }
  #admin-modal > div,
  #modal-overlay > #modal { border-radius: 1rem; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVIDADE — formulário de edição mobile
══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  #form-representante .grid.grid-cols-2 > div { grid-column: span 2; }
  #form-representante .flex.gap-3 { flex-direction: column; }
  #lista-cidades-modal { max-height: 35vh; }
}

/* Modal de gerenciamento: 80% da tela no desktop */
@media (min-width: 768px) {
  #admin-modal > div {
    width: 80vw !important;
    max-width: 80vw !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   TEMA CLARO — OVERRIDES ESPECÍFICOS PARA HOVER / @APPLY GERADO
══════════════════════════════════════════════════════════════ */

/* Map control buttons hover no tema claro */
[data-theme="light"] .map-btn:hover {
  color: #0f172a !important;
  background-color: var(--surface-hover) !important;
  border-color: rgba(30, 64, 255, 0.3) !important;
}

/* Rep action buttons (edit/delete) hover no tema claro */
[data-theme="light"] .rep-action-btn:hover {
  color: #0f172a !important;
}
[data-theme="light"] .rep-action-btn.delete:hover {
  color: #ef4444 !important;
  background-color: rgba(239, 68, 68, 0.08) !important;
}
[data-theme="light"] .rep-action-btn.edit:hover {
  color: #2563eb !important;
  background-color: rgba(37, 99, 235, 0.08) !important;
}

/* Nav sidebar — hover e ativo */
[data-theme="light"] nav a:hover {
  color: #0f172a !important;
  background-color: var(--surface-hover) !important;
}
[data-theme="light"] nav a.text-brand {
  color: #1E40FF !important;
}

/* Dropdown de idioma — hover */
[data-theme="light"] #lang-dropdown-menu button:hover {
  color: #0f172a !important;
}

/* Tabs de sub-navegação (leads, ponto, config, etc.) */
[data-theme="light"] a[id^="tab-btn-"]:hover {
  color: #0f172a !important;
  background-color: var(--surface-hover) !important;
}

/* Botões de fechar modal */
[data-theme="light"] #btn-fechar-admin:hover,
[data-theme="light"] button[id^="btn-fechar"]:hover,
[data-theme="light"] button[id^="btn-close"]:hover {
  color: #0f172a !important;
}

/* Botão de logout hover (text-red já está OK, mas garante) */
[data-theme="light"] #btn-logout:hover {
  color: #dc2626 !important;
}

/* Indicadores de zoom/contadores no mapa */
[data-theme="light"] #zoom-indicator,
[data-theme="light"] #markers-counter {
  background-color: rgba(255, 255, 255, 0.92) !important;
  border-color: var(--surface-border) !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(148, 163, 184, 0.2) !important;
}

/* Filter/busca na sidebar em tema claro */
[data-theme="light"] #sidebar input[type="text"],
[data-theme="light"] #sidebar select {
  background-color: var(--surface-card) !important;
  color: var(--clr-body) !important;
  border-color: var(--surface-border) !important;
}

/* Tabelas geradas por JS — células */
[data-theme="light"] tbody tr:hover {
  background-color: var(--surface-hover) !important;
}

/* Texto do ponto eletrônico (relógio gigante) */
[data-theme="light"] #ponto-relogio {
  color: var(--clr-body) !important;
}
[data-theme="light"] #ponto-horas-trabalhadas {
  color: var(--clr-body) !important;
}

/* Botão bater ponto quando habilitado (cor dinâmica via JS inline style — mantém) */
[data-theme="light"] #btn-bater-ponto:not(:disabled) {
  /* herda cor do inline style do JS */
}

/* Área de usuário na topbar */
[data-theme="light"] #topbar-user-area {
  background-color: var(--surface) !important;
  border-color: var(--surface-border) !important;
}

/* Correção de input de formulário em tema claro */
[data-theme="light"] .form-input {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: var(--surface-border) !important;
}
[data-theme="light"] .form-input:focus {
  border-color: #1E40FF !important;
  box-shadow: 0 0 0 2px rgba(30, 64, 255, 0.15) !important;
}

/* Prevenção de texto invisível em widgets de cor (GPS dot) */
[data-theme="light"] [style*="background:#"] {
  /* Não sobrescreve cor — os dots coloridos são sempre exibidos */
}

/* Garante que o body tenha background correto */
[data-theme="light"] body {
  background-color: var(--surface) !important;
}


/* ══════════════════════════════════════════════════════════════
   ██████  ███████ ███████ ██████   ██████  ███    ██ ███████
   ██   ██ ██      ██      ██   ██ ██    ██ ████   ██ ██
   ██████  █████   ███████ ██████  ██    ██ ██ ██  ██ ███████
   ██   ██ ██           ██ ██      ██    ██ ██  ██ ██      ██
   ██   ██ ███████ ███████ ██       ██████  ██   ████ ███████
   RESPONSIVIDADE TOTAL — 320px / 768px / 980px
══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────
   BOTTOM NAVIGATION BAR (Mobile < 640px)
─────────────────────────────────────────────────── */
#mobile-bottom-nav {
  display: none; /* Oculto por padrão — visível apenas em mobile via media query */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--bottom-nav-h);
  background: var(--surface-card);
  border-top: 1px solid var(--surface-border);
  z-index: 9999;
  padding: 0 4px;
  padding-bottom: env(safe-area-inset-bottom, 0px); /* iPhone notch */
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--clr-500);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: color 0.15s ease, background-color 0.15s ease;
  min-width: 0;
  flex: 1;
  cursor: pointer;
  background: none;
  border: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.mobile-nav-item svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.mobile-nav-item:active svg {
  transform: scale(0.88);
}

.mobile-nav-item.active {
  color: #1E40FF;
}

.mobile-nav-item.active svg {
  filter: drop-shadow(0 0 6px rgba(30, 64, 255, 0.5));
}

[data-theme="light"] #mobile-bottom-nav {
  box-shadow: 0 -2px 12px rgba(148, 163, 184, 0.2);
}

[data-theme="light"] .mobile-nav-item {
  color: var(--clr-400);
}

[data-theme="light"] .mobile-nav-item.active {
  color: #1E40FF;
}

/* ──────────────────────────────────────────────────
   MOBILE (< 640px) — Base
─────────────────────────────────────────────────── */
@media (max-width: 639px) {
  /* Mostra a bottom nav */
  #mobile-bottom-nav {
    display: flex;
    align-items: stretch;
  }

  /* Adiciona padding no main para não cobrir conteúdo com a bottom nav */
  body > main,
  #sidebar,
  #map-container,
  #dashboard-page,
  #leads-page,
  #b2c-page,
  #ponto-page,
  #representantes-page,
  #relatorios-page,
  #config-page {
    padding-bottom: var(--bottom-nav-h);
  }

  /* Garante que o sidebar do mapa não cubra a bottom nav */
  #sidebar {
    padding-bottom: calc(var(--bottom-nav-h) + 8px);
    bottom: var(--bottom-nav-h) !important;
  }

  /* Overlay do sidebar — não cobre a bottom nav */
  #sidebar-overlay {
    bottom: var(--bottom-nav-h);
  }

  /* Topbar — super compacto em 320px */
  #topbar {
    padding-left: 8px;
    padding-right: 8px;
    gap: 6px;
  }

  /* Dashboard page — padding reduzido */
  #dashboard-page {
    padding: 12px 12px 0;
    gap: 12px;
  }

  /* Títulos menores em mobile */
  #dashboard-page h2,
  #b2c-list-view h2,
  .page-header h2 {
    font-size: 1.15rem;
    line-height: 1.3;
  }

  /* Cards de stats — padding menor */
  #dashboard-page [class*="p-6"] {
    padding: 12px;
  }

  /* Admin modal — full screen no mobile */
  #admin-modal > div {
    border-radius: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* Admin modal header — empilhado */
  #admin-modal .p-6.border-b {
    padding: 12px !important;
  }

  /* Admin modal header — coluna única */
  #admin-modal .p-6 > div:first-child h2 {
    font-size: 1.1rem;
  }

  /* Indicadores do mapa — posicionados para não colidir com bottom nav */
  #zoom-indicator {
    bottom: calc(var(--bottom-nav-h) + 8px);
  }
  #markers-counter {
    bottom: calc(var(--bottom-nav-h) + 8px);
  }

  /* Ponto eletrônico — relógio menor */
  #ponto-relogio {
    font-size: 3.2rem !important;
  }

  /* Ponto eletrônico — botão bater ponto menor */
  #btn-bater-ponto {
    padding: 14px !important;
  }

  /* Tabelas — scroll suave com dica visual */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }

  /* Toast — acima da bottom nav */
  #toast-container {
    bottom: calc(var(--bottom-nav-h) + 12px) !important;
    right: 12px;
    left: 12px;
    top: auto !important;
    align-items: center;
  }

  .toast {
    min-width: 0;
    width: 100%;
    max-width: calc(100vw - 24px);
    font-size: 12px;
    padding: 10px 12px;
  }

  /* Páginas com layout flex-row — vira coluna em mobile */
  #leads-page,
  #b2c-page,
  #ponto-page,
  #representantes-page,
  #relatorios-page {
    flex-direction: column !important;
  }

  /* Sub-menus laterais (ponto, leads, b2c) — tabs horizontais scrolláveis */
  #leads-page > div:first-child,
  #b2c-page > div:first-child,
  #ponto-page > div:first-child,
  #representantes-page > div:first-child,
  #relatorios-page > div:first-child {
    width: 100% !important;
    min-height: auto !important;
    flex-shrink: 0;
    border-right: none !important;
    border-bottom: 1px solid var(--surface-border);
  }

  /* Tabs de sub-navegação — altura reduzida em 320px */
  #leads-page .flex > a,
  #b2c-page .flex > a,
  #ponto-page .flex > a,
  #representantes-page .flex > a {
    font-size: 11px;
    padding: 8px 10px;
  }

  /* Botão Novo Representante — só ícone */
  #btn-admin-novo span[data-i18n],
  #btn-novo-lead span,
  #btn-novo-b2c span {
    display: none;
  }

  /* Formulário modal de edit — grid 1 coluna */
  #form-representante .grid.grid-cols-2 > div {
    grid-column: span 2;
  }
  #form-representante .flex.gap-3 {
    flex-direction: column;
  }

  /* Lista de cidades modal — menor */
  #lista-cidades-modal {
    max-height: 30vh;
  }

  /* Títulos de seção h1/h2 dentro de páginas */
  h2.text-2xl {
    font-size: 1.1rem !important;
  }
  h3.text-lg {
    font-size: 0.95rem !important;
  }
}

/* ──────────────────────────────────────────────────
   320px EXTRAS — dispositivos minúsculos
─────────────────────────────────────────────────── */
@media (max-width: 360px) {
  #topbar {
    padding-left: 4px;
    padding-right: 4px;
  }

  /* Esconde indicador de idioma em telas menores que 360px */
  #lang-dropdown-btn {
    padding-left: 6px;
    padding-right: 6px;
  }

  /* Nav item menor */
  .mobile-nav-item {
    font-size: 8px;
    padding: 4px 2px;
    gap: 2px;
  }

  .mobile-nav-item svg {
    width: 20px;
    height: 20px;
  }

  /* Relógio ponto ainda menor */
  #ponto-relogio {
    font-size: 2.6rem !important;
  }
}

/* ──────────────────────────────────────────────────
   TABLET (640px – 979px)
─────────────────────────────────────────────────── */
@media (min-width: 640px) and (max-width: 979px) {
  /* Esconde a bottom nav (não é mobile) */
  #mobile-bottom-nav {
    display: none !important;
  }

  /* Remove padding-bottom que foi adicionado para a bottom nav */
  body > main {
    padding-bottom: 0;
  }

  /* Sidebar do mapa — em tablets vira overlay como no mobile */
  #sidebar {
    position: absolute !important;
    inset-y: 0;
    left: 0;
    z-index: 40;
    width: 280px !important;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,0.4);
  }

  #sidebar.open {
    transform: translateX(0) !important;
  }

  /* Overlay aparece em tablet também */
  #sidebar-overlay {
    display: none;
  }
  #sidebar-overlay.show {
    display: block !important;
  }

  /* Botão de toggle sidebar — visível em tablet */
  #btn-toggle-sidebar {
    display: flex !important;
  }

  /* Nav lateral — menor em tablet */
  nav.sm\:flex {
    width: 52px !important;
  }

  /* Dashboard — 2 colunas em tablet */
  #dashboard-page [class*="grid-cols-3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Dashboard shortcuts — 2 colunas */
  #dashboard-page [class*="grid-cols-4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Toast no topo em tablet portrait */
  #toast-container {
    top: 12px;
    right: 12px;
    bottom: auto;
  }

  /* Admin modal — quase full em tablet */
  #admin-modal > div {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 95dvh !important;
  }

  /* Ponto eletrônico — relógio adaptado */
  #ponto-relogio {
    font-size: 4rem !important;
  }
}

/* ──────────────────────────────────────────────────
   980px — Ponto de entrada para layout completo
─────────────────────────────────────────────────── */
@media (min-width: 980px) {
  /* Bottom nav: garantido oculto */
  #mobile-bottom-nav {
    display: none !important;
  }

  /* Sidebar do mapa — volta para lado a lado */
  #sidebar {
    position: relative !important;
    transform: none !important;
    width: 280px !important;
    box-shadow: none;
    bottom: auto !important;
  }

  /* Dashboard — 3 colunas */
  #dashboard-page [class*="grid-cols-3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Dashboard shortcuts — 4 colunas */
  #dashboard-page [class*="grid-cols-4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  /* Admin modal — 80% largura */
  #admin-modal > div {
    width: 80vw !important;
    max-width: 80vw !important;
    border-radius: 1rem !important;
    height: auto !important;
    max-height: 90dvh !important;
  }
}

/* ──────────────────────────────────────────────────
   1280px+ — Desktop / Widescreen
─────────────────────────────────────────────────── */
@media (min-width: 1280px) {
  #sidebar {
    width: 320px !important;
  }
}

/* ──────────────────────────────────────────────────
   SCROLL INDICADORES PARA TABELAS
─────────────────────────────────────────────────── */
.table-scroll-wrapper {
  position: relative;
}

.table-scroll-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 100%;
  background: linear-gradient(to right, transparent, var(--surface-card));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.table-scroll-wrapper.has-overflow::after {
  opacity: 1;
}

/* ──────────────────────────────────────────────────
   TOUCH — tamanho mínimo de área de toque (44×44)
─────────────────────────────────────────────────── */
@media (max-width: 979px) {
  /* Botões pequenos ganham área de toque maior com padding invisível */
  .map-btn {
    min-width: 40px;
    min-height: 40px;
  }

  .rep-action-btn {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 1 !important; /* sempre visível em touch */
  }

  /* Inputs e selects — tamanho de toque adequado */
  input, select, textarea, button {
    min-height: 36px;
  }

  /* Evita zoom em inputs iOS */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important; /* iOS não faz zoom se font-size >= 16px */
  }

  /* Botão bater ponto — área maior */
  #btn-bater-ponto {
    min-height: 80px;
  }
}

/* ──────────────────────────────────────────────────
   SIDEBAR TOGGLE — mobile/tablet compartilhado
─────────────────────────────────────────────────── */
@media (max-width: 979px) {
  #btn-toggle-sidebar {
    display: flex !important;
  }
}

@media (min-width: 980px) {
  #btn-toggle-sidebar {
    display: none !important;
  }
}