/* ── TABLET (≤ 900px) ── */
@media (max-width: 900px) {
  /* Topbar */
  #topbar { height:auto; flex-wrap:wrap; padding:8px 12px; gap:8px; }
  .logo-sep { display:none; }
  .nav { order:3; width:100%; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:3px; padding-bottom:5px; border-top:1px solid var(--border); padding-top:6px; }
  .nav::-webkit-scrollbar { display:none; }
  .nav-btn { font-size:0.72rem; padding:5px 9px; white-space:nowrap; flex-shrink:0; }
  .topbar-right { margin-left:auto; }

  /* Conteúdo */
  #content { padding:14px; }

  /* Stats grid: 2 colunas */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap:9px; }

  /* Grids de layout */
  .grid-2 { grid-template-columns:1fr; }
  .grid-3 { grid-template-columns:1fr; }

  /* Formulários */
  .form-2col { grid-template-columns:1fr; gap:0; }
  .form-3col { grid-template-columns:1fr 1fr; gap:8px; }

  /* Modais — mais espaço e scroll touch-friendly em mobile/tablet */
  .modal {
    width:96vw !important;
    padding:18px;
    max-height: 92vh;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .modal-wide, .modal-xl { width:96vw !important; }
  /* Botão fechar maior pra tocar no mobile (mín. 36px) */
  .modal-close {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    top: 10px;
    right: 10px;
  }

  /* TV Mode */
  .tv-hd { padding:12px 16px 0; }
  .tv-body { flex-direction:column; padding:10px 16px 10px; gap:10px; overflow-y:auto; }
  .tv-podium-wrap { width:100%; flex-direction:column; align-items:center; justify-content:flex-end; gap:0; flex-shrink:0; }
  .tv-podium { flex-direction:row; justify-content:center; gap:16px; height:120px; }
  .tv-rank-list { padding-left:0; flex:1; min-height:180px; overflow-y:auto; }
  .tv-ticker { padding:7px 16px; }

  /* Tabelas — scroll horizontal */
  .admin-table, .rep-table, .migr-table {
    display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
    white-space:nowrap;
  }

  /* Barra de XP menor */
  .bar-w { width:44px; }
}

/* ── MOBILE: scroll de listas dentro de modais ──
   Em mobile, scroll aninhado (lista com overflow-y dentro de .modal que também tem overflow-y)
   quebra o touch: o gesto vai pro container externo. Solução em duas frentes:
   1) listas internas ganham comportamento touch-friendly (-webkit-overflow-scrolling, overscroll-behavior)
   2) em mobile, listas com max-height fixo em px relaxam pra usar o scroll do próprio modal
*/
@media (max-width: 900px) {
  .modal [style*="overflow-y:auto"],
  .modal [style*="overflow-y: auto"],
  .modal-scroll-list,
  .ev-check-list,
  .badge-assign-grid,
  .student-check-list,
  .question-preview-list,
  .ep-grid,
  .avc-pieces-grid {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
}

/* No mobile estreito, o scroll duplo é mais nocivo — entrega tudo ao modal pai. */
@media (max-width: 600px) {
  .modal-scroll-list {
    max-height: none !important;
  }
  .avc-pieces-grid {
    max-height: 50vh;
  }
  .ev-check-list,
  .badge-assign-grid,
  .student-check-list,
  .question-preview-list {
    max-height: 45vh;
  }
}

/* ── MOBILE (≤ 600px) ── */
@media (max-width: 600px) {
  /* Topbar compacta */
  #topbar { padding:6px 10px; }
  .logo-text { font-size:0.82rem; }
  .tv-btn { font-size:0.68rem; padding:5px 8px; }
  .logout-btn { font-size:0.68rem; padding:5px 8px; }
  .user-chip { font-size:0.62rem; padding:3px 7px; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .topbar-right { gap:5px; }

  /* Nav já herdou nowrap do 900px — só ajustes finos */
  .nav { gap:2px; }
  .nav-btn { font-size:0.70rem; padding:5px 7px; }

  /* Conteúdo */
  #content { padding:10px; }

  /* Stats grid: 2 colunas compactas */
  .stats-grid { grid-template-columns:repeat(2,1fr); gap:7px; }
  .stat-val { font-size:1.25rem; }
  .stat-lbl { font-size:0.6rem; }
  .stat-icon { font-size:1.15rem; }
  .stat-card { padding:11px 12px; }

  /* Títulos de seção */
  .sec-hd { flex-direction:column; align-items:flex-start; gap:8px; }
  .sec-title { font-size:0.82rem; }

  /* Chip: mostra nome curto */
  .chip-full { display:none; }
  .chip-short { display:inline !important; }
  /* Botões de ação no sec-hd ficam em linha */
  .flex-gap { gap:5px; }
  .btn { font-size:0.72rem; padding:6px 11px; }
  .btn-sm { font-size:0.68rem; padding:4px 9px; }

  /* Student row — layout em 2 linhas no mobile */
  .bar-w { display:none; }
  .s-meta .lv-badge { display:none; }
  /* Row wraps: nome+info na 1ª linha, ações na 2ª */
  .s-row { flex-wrap:wrap; gap:7px; padding:8px 10px; }
  .s-avatar { width:30px; height:30px; font-size:0.95rem; flex-shrink:0; }
  .s-info { flex:1; min-width:120px; }
  .s-name { font-size:0.8rem; white-space:normal; word-break:break-word; }
  .s-meta { font-size:0.62rem; flex-wrap:wrap; }
  .cls-tag { font-size:0.58rem; }
  /* Coin, badge, xp ficam numa linha secundária */
  .coin-mini { font-size:0.65rem; }
  .xp-mini-v { font-size:0.68rem; }
  .xp-mini-l { font-size:0.54rem; }
  .lv-badge { font-size:0.6rem; padding:2px 5px; }
  /* Edit/delete buttons ficam menores */
  .s-row .btn-xs { padding:3px 7px; font-size:0.62rem; }

  /* Formulários */
  .form-3col { grid-template-columns:1fr; gap:0; }

  /* Modal */
  .modal {
    padding:14px;
    border-radius:12px;
    max-height: 95vh;
    /* iOS Safari conta a barra de URL no 100vh — usa dvh quando disponível */
    max-height: 95dvh;
  }
  .modal-title { font-size:0.82rem; padding-right: 40px; /* não passa por baixo do botão fechar */ }

  /* Login */
  .login-box { padding:24px 18px; }
  .login-logo { font-size:1.25rem; }

  /* Card */
  .card { padding:12px; }
  .card-title { font-size:0.72rem; }

  /* Rank row */
  .rank-row { padding:6px 8px; gap:6px; }

  /* Mission card */
  .m-card { padding:8px 10px; }
  .m-icon { width:30px; height:30px; font-size:0.95rem; }

  /* Toast posição */
  #toast { bottom:14px; right:12px; left:12px; max-width:100%; font-size:0.74rem; }

  /* TV Mode mobile */
  .tv-hd { flex-direction:column; align-items:center; gap:8px; padding:10px 12px 0; text-align:center; }
  .tv-logo { font-size:1rem; }
  .tv-close-btn { position:static; font-size:0.62rem; padding:4px 8px; }
  .tv-ctrl-btns { position:absolute !important; top:10px; right:10px; display:flex !important; flex-direction:column; gap:4px; z-index:10; }
  .tv-podium-wrap { flex-direction:column; width:100%; align-items:center; justify-content:flex-end; gap:0; flex-shrink:0; }
  .tv-podium { flex-direction:row; justify-content:center; gap:8px; height:100px; }
  .podium-base { width:44px; }
  .tv-ava { font-size:0.85rem; }
  .tv-rname { font-size:0.68rem; }
  .tv-rxp { font-size:0.72rem; }
  .tv-rank-list { min-height:160px; flex:1; }
  .tv-rank-row { padding:6px 8px; gap:7px; }
}

/* ── MOBILE MUITO PEQUENO (≤ 380px) ── */
@media (max-width: 380px) {
  .stats-grid { grid-template-columns:1fr 1fr; gap:6px; }
  .stat-val { font-size:1.1rem; }
  .nav-btn { font-size:0.66rem; padding:4px 7px; }
  .logo-text { font-size:0.72rem; }
}