/* ============================================================
   ALMA FORMS GBP — responsive.css
   Breakpoints e ajustes de responsividade.
   Carregado por último em todas as páginas.

   Breakpoints:
     mobile:  até 640px
     tablet:  641px a 1024px
     desktop: acima de 1024px (estilos "desktop" já são o padrão
     definido em base.css / dashboard.css / form.css)
   ============================================================ */

/* ============================================================
   Tablet e mobile (<= 1024px) — sidebar em overlay
   ============================================================ */

@media (max-width: 1024px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 110;
  }

  .sidebar.sidebar--open {
    transform: translateX(0);
    box-shadow: var(--shadow-elevated);
  }

  .sidebar__overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 16, 16, 0.4);
    z-index: 105;
  }

  .sidebar.sidebar--open ~ .sidebar__overlay {
    display: block;
  }

  .app-header__menu {
    display: flex;
  }

  .app-content {
    padding: 20px;
  }

  /* Cards de resumo em 2 colunas */
  .summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .response-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Mobile (<= 640px)
   ============================================================ */

@media (max-width: 640px) {
  /* ---- Layout geral ---- */
  .app-header {
    padding: 14px 16px;
  }

  .app-content {
    padding: 16px;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }

  .section-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .section-header .btn {
    width: 100%;
  }

  /* ---- Tabelas -> cards ---- */
  .data-table-wrapper {
    display: none;
  }

  .data-card {
    display: flex;
  }

  .data-card__actions .btn,
  .data-card__actions button {
    flex: 1;
  }

  /* ---- Modal ---- */
  .modal {
    padding: 20px;
    max-width: 100%;
  }

  .modal__footer {
    flex-direction: column-reverse;
  }

  .modal__footer .btn {
    width: 100%;
  }

  /* ---- Página individual de resposta ---- */
  .response-actions {
    flex-direction: column;
  }

  .response-actions .btn {
    width: 100%;
  }

  .media-gallery {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  /* ---- Formulário público ---- */
  .form-page {
    padding: 20px 16px 80px;
  }

  .form-card.card {
    padding: 20px;
  }

  .field-row,
  .field-row--3 {
    grid-template-columns: 1fr;
  }

  .form-nav {
    flex-wrap: wrap;
  }

  .form-nav .btn {
    flex: 1;
    min-width: 0;
  }

  .review-block__row {
    flex-direction: column;
    gap: 2px;
  }

  .review-block__row dd {
    text-align: left;
    max-width: 100%;
  }

  /* ---- Toasts ---- */
  #toast-container {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }

  .toast {
    max-width: none;
  }

  /* ---- Login ---- */
  .auth-card {
    padding: 28px 20px;
  }
}


/* ============================================================
   ALMA FORMS GBP — responsive.css (Fase 13)
   Adicionar ao FINAL do public/styles/responsive.css.
   ============================================================ */

/* ── Fix 1: Sidebar overlay fica ABAIXO da sidebar ────────────
   A sidebar precisa ter z-index > overlay para que seus links
   sejam clicáveis quando o menu está aberto no mobile.          */
@media (max-width: 900px) {
  .sidebar {
    z-index: 300 !important;   /* acima do overlay (200) */
  }

  .sidebar-overlay {
    z-index: 200 !important;   /* acima do conteúdo, abaixo da sidebar */
  }
}

/* ── Fix 2: Option-pills tipo de operação — alinhar à esquerda ─
   O grupo usa flex-direction:column inline, mas os pills
   individuais tinham text-align:center herdado.                 */
#og-operation-type .option-pill {
  text-align: left;
  justify-content: flex-start;
}



/* ── Fix 4: Botão "Enviar formulário" — sem quebra de linha ────
   O botão de submit (#btn-continuar quando na etapa 10) pode
   quebrar o texto em telas estreitas. Garantimos width mínima.  */
#btn-continuar {
  min-width: 200px;
  white-space: nowrap;
}

@media (max-width: 480px) {
  #btn-continuar {
    min-width: 0;
    width: 100%;
  }

  .form-nav {
    flex-direction: column-reverse;
    gap: 10px;
  }

  .form-nav #btn-voltar {
    width: 100%;
  }
}