/* ============================================================
   SBSVolei — Camada Responsiva (mobile-first refinements)
   Carregar SEMPRE depois de theme.css em todas as páginas.
   ============================================================ */

/* ── Safe area (iOS notch / Android gesture bar) ── */
@supports (padding: max(0px)) {
  body {
    padding-left:  env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* ── Anti-zoom iOS Safari: inputs precisam de font-size >= 16px ──
   (override seguro: respeita o tamanho desktop, mas força mínimo 16 em mobile) */
@media (max-width: 820px) {
  input[type=text], input[type=email], input[type=password],
  input[type=tel],  input[type=number], input[type=date],
  input[type=search], input[type=url],
  textarea, select, .t-input, .t-select, .t-textarea, .fi {
    font-size: 16px !important;
    line-height: 1.4;
  }
  /* Touch targets mínimos */
  button, .t-btn, .btn, .btnp, .bsm,
  a.t-btn, a.btn, .nav-cta, .btn-out, .ni,
  input[type=submit], input[type=button] {
    min-height: 44px;
  }
  /* Botão pequeno só fica menor no desktop */
  .t-btn-sm { min-height: 38px; padding: 8px 14px; }

  /* Burger / menu trigger sempre confortável */
  .mobt, .burger, .mx { min-width: 44px; min-height: 44px; }
}

/* ── Hover only on devices que de fato fazem hover ── */
@media (hover: none) {
  *:hover { transform: none !important; }
  .t-btn:hover, .btn:hover, .btnp:hover, .nav-cta:hover,
  .ev-card:hover, .sc:hover, .ni:hover {
    transform: none !important;
    background-color: inherit;
  }
}

/* ── Modais: usar 100dvh + respeitar safe-area no fundo ── */
.mo {
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
           max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.mbox {
  max-height: calc(100dvh - 32px) !important;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
@media (max-width: 480px) {
  .mbox { padding: 22px 18px !important; border-radius: 16px !important; }
  .mhead h3 { font-size: 1.05rem !important; }
  .mfoot { flex-direction: column-reverse; }
  .mfoot .t-btn, .mfoot .btnp, .mfoot .btnc { width: 100%; }
  .fr, .fr3 { grid-template-columns: 1fr !important; gap: 10px !important; }
}

/* ── Tabelas: scroll horizontal suave + indicador visual ── */
.tw, .table-wrap {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
@media (max-width: 540px) {
  table { font-size: .85rem; }
  th, td { padding: 10px 10px !important; }
  /* Linha de ações fica multi-linha sem quebrar layout */
  .actions, .actions-cell { flex-wrap: wrap; gap: 4px; }
  .actions .t-btn, .actions-cell .t-btn { flex: 1 1 auto; }
}

/* ── Card view para tabelas grandes (admin Equipes/Pagamentos) — mobile + tablet ── */
@media (max-width: 820px) {
  .tw.responsive-cards table,
  .tw.responsive-cards thead,
  .tw.responsive-cards tbody,
  .tw.responsive-cards tr,
  .tw.responsive-cards td,
  .tw.responsive-cards th { display: block; }
  .tw.responsive-cards thead { display: none; }
  .tw.responsive-cards tr {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 14px;
    margin: 10px 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .tw.responsive-cards tr:hover td { background: transparent; }
  .tw.responsive-cards td {
    padding: 4px 0 !important;
    border-bottom: none !important;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    text-align: right;
  }
  .tw.responsive-cards td::before {
    content: attr(data-label);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-faint);
    flex-shrink: 0;
  }
  .tw.responsive-cards td:first-child {
    border-bottom: 1px solid var(--border) !important;
    padding-bottom: 10px !important;
    margin-bottom: 4px;
    text-align: left;
  }
  .tw.responsive-cards td:first-child::before { display: none; }
}

/* ── Sidebar mobile (admin/portal): drawer + fechar ao tocar fora ── */
@media (max-width: 820px) {
  .sb {
    box-shadow: 8px 0 32px rgba(0,0,0,.5);
    -webkit-overflow-scrolling: touch;
  }
  .sb-foot { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}

/* ── Topbar sticky com safe-area no topo (notch) ── */
.topbar { padding-top: max(14px, env(safe-area-inset-top)); }

/* ── Toast posicionamento mobile (acima da safe-area inferior) ── */
@media (max-width: 540px) {
  .twrap {
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    right: 12px !important;
    left: 12px !important;
  }
  .toast { min-width: 0 !important; width: 100%; }
}

/* ── Botão CTA "Enviar comprovante WhatsApp" sticky no mobile (PIX modal) ── */
@media (max-width: 540px) {
  .pixmo-sticky-cta {
    position: sticky;
    bottom: 0;
    margin: 14px -18px -22px;
    padding: 14px 18px max(14px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent 0%, var(--surface) 30%);
    z-index: 5;
  }
}

/* ── QR Code: tamanho fluido ── */
.qr-wrap {
  max-width: min(260px, 80vw);
  margin-left: auto !important;
  margin-right: auto !important;
}
.qr-wrap canvas, .qr-wrap img, .qr-wrap svg {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* ── Cards do dashboard: 2 colunas em mobile (não 1 nem 4) ── */
@media (max-width: 640px) {
  .cg { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .cg .sc { padding: 14px 12px !important; }
  .cg .sc .vl { font-size: 1.8rem !important; }
  .cg .sc::after { display: none; }
}
@media (max-width: 360px) {
  .cg { grid-template-columns: 1fr !important; }
}

/* ── Tabs mini: scroll horizontal sem quebrar ── */
.tabs-mini {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs-mini::-webkit-scrollbar { display: none; }
.tab-mini { flex-shrink: 0; min-height: 38px; }

/* ── Forms públicos: prevent layout shift quando teclado abre ── */
@media (max-width: 540px) {
  .form-card, .login-right, .right { padding: 22px 18px !important; }
  .form-row { grid-template-columns: 1fr !important; gap: 10px !important; }
}

/* ── Index/landing: hero respira em mobile ── */
@media (max-width: 540px) {
  .hero { padding-left: 16px; padding-right: 16px; }
  .event-title { font-size: clamp(2.2rem, 8vw, 3.5rem) !important; }
  .nav { padding: 12px 14px !important; }
  .nav-links { display: none; }
}

/* ── Sticky CTA bottom em formulários longos (inscrição) ── */
@media (max-width: 540px) {
  .btn-submit {
    position: sticky;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 10;
    box-shadow: 0 -8px 20px rgba(7,16,31,.55), 0 0 24px rgba(245,197,24,.18);
  }
}

/* ── Acessibilidade: focar input rolando para visível em mobile ── */
@media (max-width: 820px) {
  input:focus, textarea:focus, select:focus {
    scroll-margin: 80px;
  }
}

/* ── Quebra de palavra em e-mails/links longos (não estoura layout) ── */
.t-input, .t-textarea, td, .ev-card-meta, .pix-key-val,
.pix-key-val, .info-value, .uname, .link-url {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ── Imagens fluidas por padrão ── */
img { max-width: 100%; height: auto; }

/* ── Dark scrollbar mobile ── */
@media (max-width: 820px) {
  ::-webkit-scrollbar { width: 6px; height: 6px; }
}

/* ── Reduzir animações em low-power / reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── Print friendly (capitão pode imprimir lista de inscrição) ── */
@media print {
  .sb, .topbar, .mobt, .burger, .nav, .twrap, .mo, .btn-out, .actions, .actions-cell { display: none !important; }
  body { background: white !important; color: black !important; }
  .main { margin: 0 !important; }
  .t-card, .tw { border: 1px solid #ccc !important; box-shadow: none !important; }
}