/* ══ MOBILE — Odonto Excellence ══════════════════════════════════════════ */

/* ── Botão hamburguer (aparece só em mobile) ── */
.menu-toggle {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 500;
  width: 40px;
  height: 40px;
  background: var(--navy, #0f1e2e);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all .25s ease;
}
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Overlay escuro atrás do menu ── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 90;
}
.sidebar-overlay.open { display: block; }

@media (max-width: 768px) {
  /* Mostrar botão hamburguer */
  .menu-toggle { display: flex; }

  /* Sidebar vira drawer lateral */
  .sidebar {
    transform: translateX(-100%);
    transition: transform .28s ease;
    z-index: 100;
    position: fixed;
  }
  .sidebar.open { transform: translateX(0); }

  /* Conteúdo principal sem margem da sidebar */
  .main { margin-left: 0 !important; }

  /* Topbar com espaço para o botão hamburguer */
  .topbar { padding-left: 64px !important; }

  /* Content com padding menor */
  .content { padding: 16px !important; }

  /* Stats grid em 2 colunas */
  .stats-grid { grid-template-columns: 1fr 1fr !important; }

  /* Grids de fotos menores */
  .photos-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }
  .radio-grid  { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }
  .grade-grande { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; }

  /* Abas com scroll horizontal */
  .tabs-bar { overflow-x: auto; white-space: nowrap; }

  /* Paginação menor */
  .pg-btn { min-width: 32px; height: 32px; font-size: .75rem; }

  /* Form rows em coluna */
  .form-row-2 { grid-template-columns: 1fr !important; }

  /* Esconder colunas secundárias em tabelas */
  .hide-mobile { display: none !important; }

  /* Busca rica menor */
  .search-results { max-height: 320px; }

  /* Modal full width */
  .modal { width: 95% !important; padding: 20px !important; }

  /* Lightbox toolbar scroll */
  .lb-toolbar { overflow-x: auto; max-width: 90vw; }
}