/* ================================================================
   ORDEM DOS NAVEGADORES — Responsive Fix (Wave Site-R1)
   ================================================================
   Carregado DEPOIS de variables/base/components/admin para sobrepor
   regras que partem em telemóvel/tablet. Foco em:
   • Modal "Novo/Editar Cliente" — vira bottom-sheet fullscreen
     em phone, com header e footer sticky → Guardar sempre alcançável
   • Topbar não estoura largura
   • Page-header empilha em phone
   • Grids globais com fallback fluido
   • Safe-area iOS (notch + home indicator)
   ================================================================ */

/* ── Hardening global anti-scroll-horizontal ─────────────────── */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ── Modal: bottom-sheet fullscreen em phone ─────────────────── */
@media (max-width: 768px) {

  /* Overlay deixa de centrar — encaixa o sheet ao fundo */
  .modal-overlay {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  /* Card vira folha cheia. 100dvh respeita a barra dinâmica do iOS
     (100vh extende por baixo da barra de URL e corta o footer). */
  .modal-overlay .modal-card,
  .modal-overlay .modal-box,
  .modal-overlay .modal-content {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    transform: none !important;
    overflow: hidden !important;          /* corta o overflow externo */
  }

  /* Header — fica fixo no topo. */
  .modal-card .modal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    flex-shrink: 0 !important;
    padding-top: max(var(--s5), env(safe-area-inset-top)) !important;
  }

  /* Form é a área scrollável. Tem que ter min-height:0 para o flex
     deixar shrink, senão o footer sai do ecrã.
     Inclui também `.detalhe-content` (#detalheModal) e fallback por id
     para modais que não usam class .modal-form/.modal-body. */
  .modal-card .modal-form,
  .modal-card .modal-body,
  .modal-card .detalhe-content,
  .modal-card > #detalheContent,
  .modal-card > .modal-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding-bottom: var(--s6) !important;
  }

  /* Grid do form em 1 coluna (admin.css já tem isto a partir de
     560px; reforçamos aqui caso outra page redefina). */
  .modal-grid {
    grid-template-columns: 1fr !important;
    gap: var(--s3) !important;
  }

  /* Footer sticky ao fundo do sheet — Guardar/Cancelar sempre
     visíveis sem scrollar até ao final do form. */
  .modal-card .modal-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
    flex-shrink: 0 !important;
    background: var(--bg-card, rgba(5,10,20,0.96)) !important;
    margin-top: 0 !important;
    padding: var(--s3) var(--s5)
             calc(var(--s3) + env(safe-area-inset-bottom)) var(--s5) !important;
    border-top: 1px solid var(--border, rgba(255,255,255,.08)) !important;
    gap: var(--s2) !important;
  }

  /* Botões do footer ocupam linha cheia para tap fácil */
  .modal-card .modal-footer .btn {
    flex: 1 1 auto !important;
    min-height: 44px !important;          /* tap-target iOS HIG */
    font-size: 14px !important;
  }

  /* Inputs ligeiramente maiores em phone — evita zoom automático
     do iOS (qualquer input <16px faz zoom on-focus). */
  .modal-card .modal-input,
  .modal-card .modal-select,
  .modal-card .modal-textarea {
    font-size: 16px !important;
    padding: 12px 12px !important;
    min-height: 44px !important;
  }

  .modal-card .modal-textarea {
    min-height: 88px !important;
  }
}

/* Em phones muito pequenos, modal-form com padding apertado */
@media (max-width: 480px) {
  .modal-card .modal-form {
    padding: var(--s4) !important;
    gap: var(--s4) !important;
  }
  .modal-card .modal-header {
    padding: var(--s4) !important;
  }
  .modal-title {
    font-size: 14px !important;
  }
}

/* ── Topbar — protecção overflow ─────────────────────────────── */
@media (max-width: 640px) {
  .topbar {
    overflow: hidden;
  }
  .topbar-right {
    gap: 6px !important;
  }
  /* Esconder pesquisa para libertar espaço; user usa o atalho do
     menu ou abre uma página específica. */
  .topbar-right .search-box {
    display: none !important;
  }
  /* O badge do role no sidebar ocupa demasiado; reduzir em phone */
  .role-badge {
    font-size: 9px !important;
    padding: 3px 8px !important;
  }
  /* Botão Sair fica iconográfico (sem texto) */
  .action-btn--secondary {
    padding: 7px 8px !important;
  }
}

/* ── Page-header empilha em mobile ───────────────────────────── */
@media (max-width: 640px) {
  .page-header {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .page-header .header-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .page-header .header-actions .btn {
    flex: 1 1 auto !important;
    min-height: 38px !important;
  }
  .section-title {
    font-size: 18px !important;
  }
  .section-subtitle {
    font-size: 11px !important;
  }
}

/* ── Tabelas dentro de cards: scroll horizontal seguro ───────── */
@media (max-width: 768px) {
  .table-wrapper,
  .clients-table-wrapper,
  .data-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }
  table {
    min-width: max-content;
  }
}

/* ── Cards globais com padding humano em phone ───────────────── */
@media (max-width: 480px) {
  .card, .metric-card, .stat-card, .table-card, .info-card {
    padding: 12px !important;
    border-radius: 10px !important;
  }
}

/* ── Detalhe modal (cliente) e renovar modal: mesmo tratamento ── */
@media (max-width: 768px) {
  #detalheModal .modal-card,
  #renovarModal .modal-card,
  #clienteModal .modal-card {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
}

/* ── Main-content respira em phone ───────────────────────────── */
@media (max-width: 768px) {
  .main-content {
    padding: 14px !important;
  }
  .main-wrapper {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ── Sidebar drawer: fade-in correcto do overlay ─────────────── */
@media (max-width: 960px) {
  #menuOverlay {
    background: rgba(0,0,0,.6) !important;
  }
  /* Sidebar drawer mantém scroll interno se for longa */
  #sidebar.open {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ── Forma global: previne 100vh quando 100dvh está disponível ─ */
@supports (height: 100dvh) {
  body, .app {
    min-height: 100dvh !important;
  }
}

/* ── iOS: tap highlight discreto em vez de cyan default ──────── */
* {
  -webkit-tap-highlight-color: rgba(201, 168, 76, 0.18);
}