/* ============================================================================
   responsive.css — Fundação mobile / tablet / desktop (Fase 0)
   Carregado globalmente pelo base.html, depois do portal_theme.css.
   Objetivo: nenhuma tela estoura a largura da viewport; conforto de toque;
   e o componente "gire o celular" (orientation-aware) para telas largas.
   ========================================================================== */

/* ---- 1. Mídia e blocos largos nunca estouram a largura da tela ---------- */
img, svg, video, canvas, iframe {
  max-width: 100%;
}
img, svg, video {
  height: auto;
}

/* ---- 2. Guarda contra scroll horizontal acidental (celular/tablet) ------ */
@media (max-width: 991.98px) {
  html, body {
    overflow-x: hidden;
  }
}

/* ---- 3. Conforto de toque e leitura no celular -------------------------- */
@media (max-width: 575.98px) {
  .btn {
    min-height: 42px;            /* alvo de toque confortável (>= 42px) */
  }
  .card-body {
    padding: 1rem;
  }
  h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
  h2 { font-size: clamp(1.3rem, 5vw, 1.6rem); }
  /* Grupos de botões lado a lado passam a empilhar */
  .btn-group-responsive {
    display: flex;
    flex-direction: column;
    gap: .5rem;
  }
}

/* ---- 4. Tabelas largas: rolagem horizontal só na tabela ----------------- *
   Aplique a classe utilitária .table-scroll no wrapper de uma tabela que
   ainda não esteja em .table-responsive. (As já tratadas continuam iguais.) */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================================
   5. Componente "gire o celular" (landscape hint)
   --------------------------------------------------------------------------
   Uso numa tela larga (traçado, conectividade, topografia):

     <div class="needs-landscape">
       {% include "eeg_analyzer/partials/landscape_hint.html" %}
       <div class="landscape-only"> ...conteúdo horizontal... </div>
     </div>

   - Desktop e celular/tablet em PAISAGEM: mostra o conteúdo, esconde o aviso.
   - Celular/tablet em RETRATO: esconde o conteúdo, mostra o aviso "gire".
   ========================================================================== */
.landscape-hint {
  display: none;
}

@media (max-width: 991.98px) and (orientation: portrait) {
  .needs-landscape .landscape-only {
    display: none !important;
  }
  .needs-landscape .landscape-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    min-height: 55vh;
    padding: 2rem 1.5rem;
    color: #475569;
  }
  .landscape-hint .rotate-icon {
    font-size: 3.5rem;
    color: #2f7dff;
    animation: rotateHint 2.4s ease-in-out infinite;
  }
}

@keyframes rotateHint {
  0%, 40%   { transform: rotate(0deg); }
  60%, 100% { transform: rotate(90deg); }
}

/* ============================================================================
   7. Dashboard / paginas internas — header e grids no mobile/tablet
   --------------------------------------------------------------------------
   .header (dashboard, patient_list, report_template) e flex space-between sem
   wrap: titulo + botoes de acao ficam lado a lado e estouram a largura.
   .dashboard-grid trava em 2 colunas (2fr 1fr). No celular/tablet estreito
   tudo isso precisa empilhar.
   ========================================================================== */
@media (max-width: 991.98px) {
  /* Cabecalho: titulo em cima, acoes embaixo (em vez de lado a lado) */
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  .header-actions {
    flex-wrap: wrap;
  }
  /* Grid principal do dashboard vira coluna unica */
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  /* Itens de grid podem encolher abaixo do tamanho do conteudo (senao a
     tabela de pacientes forca a largura e empurra tudo para fora da tela) */
  .stats-grid > *,
  .dashboard-grid > * {
    min-width: 0;
  }
}

/* ============================================================================
   6. Banner "melhor em paisagem" (versão NÃO-destrutiva)
   Para visualizadores interativos (canvas/WebGL): mostra um aviso no topo SEM
   esconder o conteúdo — assim o JS que mede o tamanho do canvas não quebra.
   Só aparece em celular/tablet no modo retrato.
   ========================================================================== */
.landscape-banner {
  display: none;
}

@media (max-width: 991.98px) and (orientation: portrait) {
  .landscape-banner {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #eaf2ff;
    border: 1px solid #b9d4ff;
    color: #1e40af;
    border-radius: 10px;
    padding: .6rem .9rem;
    margin: 0 0 1rem;
    font-size: .85rem;
    line-height: 1.3;
  }
  .landscape-banner .bi {
    font-size: 1.25rem;
    flex-shrink: 0;
  }
}