/* =====================================================================
   CSSE Clube do Rocha — Ajustes de usabilidade em celular e tablet
   Carregado DEPOIS do CSS de cada página, por isso sobrepõe-se a ele.
   Mobile-first: as regras dentro de @media só se aplicam em ecrãs pequenos,
   nunca alteram o visual no computador.
   ===================================================================== */

/* --- Evita que o iOS faça zoom automático ao focar um campo (fonte < 16px) --- */
@media (max-width: 820px) {
  input:not([type=checkbox]):not([type=radio]),
  select, textarea {
    font-size: 16px !important;
  }
}

/* --- Alvos de toque confortáveis (mínimo 44px recomendado pela Apple/Google) --- */
@media (max-width: 820px) {
  .btn, .btn-primary-premium, .btn-outline-premium,
  button[type=submit], .sidebar a, .table-header a, .table-header button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .sidebar a { padding-top: 12px; padding-bottom: 12px; }
  /* Botões de ação em tabelas (editar/apagar) mais fáceis de acertar */
  .custom-table .btn, .custom-table a.btn, .custom-table button {
    min-height: 40px; min-width: 40px; justify-content: center;
  }
}

/* --- Tabelas: rolar na horizontal em vez de cortar/espremer o conteúdo --- */
@media (max-width: 980px) {
  .table-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .table-container .custom-table { min-width: 620px; }
  /* pista visual subtil de que a tabela rola */
  .table-container::-webkit-scrollbar { height: 6px; }
  .table-container::-webkit-scrollbar-thumb { background: #c3c6cd; border-radius: 3px; }
}

/* --- Barra do topo compacta no telemóvel (o padrão tem fontes enormes) --- */
@media (max-width: 768px) {
  .topbar {
    height: 60px !important;
    padding: 0 10px !important;
    gap: 8px !important;
  }
  .menu-btn { font-size: 26px !important; }
  .brand { margin-right: 0 !important; gap: 6px !important; min-width: 0; }
  .brand input {
    font-size: 16px !important;
    min-width: 0 !important;
    width: 34vw !important;
    height: 40px !important;
    padding: 0 8px !important;
    letter-spacing: 0 !important;
  }
  .btn-brand-save { height: 40px !important; padding: 0 10px !important; font-size: 14px !important; }
  .club-logo-top { width: 40px !important; height: 40px !important; }
  .user-display-name {
    font-size: 13px !important;
    max-width: 24vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* A sidebar e o conteúdo começam logo abaixo da barra de 60px */
  .sidebar { top: 60px !important; width: 82vw !important; max-width: 300px; }
  .sidebar-overlay.open { top: 60px !important; }
  .page { margin-top: 78px !important; }
}

/* --- Conteúdo: margens e largura à prova de overflow --- */
@media (max-width: 768px) {
  .page {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 12px !important;
  }
  /* Impede que qualquer elemento largo cause scroll horizontal na página toda */
  img, video, canvas, svg { max-width: 100%; height: auto; }
}
html, body { max-width: 100%; overflow-x: hidden; }

/* --- Formulários: campos e grelhas empilham numa coluna no telemóvel --- */
@media (max-width: 768px) {
  .row > [class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; }
  form .d-flex { flex-wrap: wrap; gap: 8px; }
  .form-control, .form-select, input[type=text], input[type=email],
  input[type=number], input[type=date], input[type=tel], input[type=password],
  select, textarea { width: 100% !important; }
  /* Grelhas CSS personalizadas (planeamento, cards, etc.) numa só coluna */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* --- Cabeçalho de secção: título e botões empilham sem apertar --- */
@media (max-width: 620px) {
  .table-header { flex-wrap: wrap; }
  .table-header .chart-title { font-size: 18px !important; }
  .table-header > * { flex: 1 1 auto; }
}

/* --- Cards Bootstrap e caixas com padding grande ficam mais aproveitados --- */
@media (max-width: 620px) {
  .card, .table-container { border-radius: 12px; }
  .card-body { padding: 14px !important; }
}

/* --- Modais ocupam melhor o ecrã pequeno --- */
@media (max-width: 620px) {
  .modal-dialog { margin: 10px !important; max-width: calc(100% - 20px) !important; }
}