/* ═══════════════════════════════════════════════════════════════════
   Secretaria Paroquial — Responsividade Mobile
   Carregado após o <style> inline de cada página para sobrescrever
═══════════════════════════════════════════════════════════════════ */

/* ── Navbar: sem sobreposição em qualquer tamanho ─────────────── */
.navbar { flex-wrap: nowrap; }
.navbar-brand { flex: 1 1 0; min-width: 0; overflow: hidden; }
.navbar-brand > a,
.navbar-brand > span:not([style*="opacity"]) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navbar-right { flex-shrink: 0; white-space: nowrap; }

/* ── Tablet: ≤ 768px ──────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Navbar */
  .navbar { padding: 0 16px; gap: 8px; }
  .navbar-brand { font-size: .9rem; }
  .navbar-right { gap: 10px; }
  .navbar-right .user { display: none; }

  /* Container */
  .container { padding: 20px 16px; }

  /* Dashboard grid: 2 colunas no tablet */
  .grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
  .card { padding: 20px 16px; gap: 10px; }

  /* Page header */
  .page-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .page-header > div:last-child,
  .page-header > a:last-child { align-self: stretch; }
  .page-header .btn { width: 100%; justify-content: center; }
  .page-header > div[style*="flex"] { width: 100%; }
  .page-header > div[style*="flex"] .btn { flex: 1; justify-content: center; }

  /* Tabelas: scroll horizontal */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 560px; }

  /* Formulários: coluna única */
  .form-grid { grid-template-columns: 1fr !important; }
  .section-body { grid-template-columns: 1fr !important; }
  .form-group.full { grid-column: 1 !important; }

  /* Card de formulário */
  .card-form { padding: 20px 16px; }

  /* Form actions: empilhar */
  .form-actions { flex-direction: column; gap: 8px; }
  .form-actions .btn { width: 100%; justify-content: center; }

  /* Modal */
  .modal { padding: 20px 16px; width: 95%; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn { flex: 1; justify-content: center; min-width: 100px; }

  /* Configurações */
  .section-body { padding: 16px; }
  .section-header { padding: 14px 16px; }

  /* Seção label */
  .section-label { margin: 20px 0 12px; }

  /* Galeria: grid de álbuns */
  .albuns-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: 12px !important; }
  .fotos-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important; gap: 8px !important; }

  /* Banners */
  .banners-grid { grid-template-columns: 1fr !important; }

  /* Pastorais / Freis */
  .pastorais-grid,
  .freis-grid { grid-template-columns: 1fr !important; }

  /* Ações de tabela: botões menores */
  .actions { flex-wrap: wrap; gap: 4px; }
  .btn-danger, .btn-outline { font-size: .78rem; padding: 5px 10px; }

  /* Ocultar colunas secundárias em tabelas */
  .col-optional { display: none; }
}

/* ── Mobile: ≤ 480px ──────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Navbar: esconde "Paróquia São Lourenço Mártir ›", mostra só a página atual */
  .navbar-brand > a { display: none; }
  .navbar-brand > span[style*="opacity"] { display: none; }
  .navbar-brand { font-size: .9rem; font-weight: 600; }
  .btn-sair { padding: 5px 12px; font-size: .8rem; }

  /* Container: menos padding */
  .container { padding: 16px 12px; }

  /* Dashboard: 1 coluna em telas muito pequenas */
  .grid { grid-template-columns: 1fr; }

  /* Título de página menor */
  .page-title { font-size: 1.15rem; }
  .page-sub { font-size: .8rem; }

  /* Tabela: células mais compactas */
  th { padding: 10px 12px; font-size: .72rem; }
  td { padding: 10px 12px; font-size: .82rem; }

  /* Thumb menor */
  .thumb-img, .thumb-empty { width: 40px; height: 30px; }

  /* Input / textarea */
  input[type=text], input[type=email], input[type=url],
  input[type=password], textarea, select {
    font-size: .875rem;
    padding: 9px 11px;
  }

  /* Badge menor */
  .badge { font-size: .7rem; padding: 2px 7px; }

  /* Card form */
  .card-form { padding: 16px 12px; border-radius: 10px; }

  /* Empty state */
  .empty { padding: 32px 16px; }

  /* Login */
  .card { padding: 28px 20px !important; }
  .card .logo h1 { font-size: 1.1rem; }
}