/* =========================================================
   Ajustes responsivos globais - uso no celular
   ========================================================= */
:root {
  --app-primary: #0b1d3a;
  --app-bg: #f0f4f8;
  --app-radius: 14px;
  --bottom-nav-height: 64px;
}

* { box-sizing: border-box; }
html { width: 100%; max-width: 100%; overflow-x: hidden; }
body {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
}

img, svg, canvas, video, iframe {
  max-width: 100%;
  height: auto;
}

.container,
.container-fluid,
.container-full,
.app-container,
.times-container,
.page-wrap,
.container-custom {
  width: 100% !important;
  max-width: 100% !important;
  overflow-wrap: anywhere;
}

.container-full,
.app-container,
.times-container,
.page-wrap {
  padding-left: clamp(10px, 3vw, 18px) !important;
  padding-right: clamp(10px, 3vw, 18px) !important;
}

/* Topo fixo */
nav.navbar {
  width: 100% !important;
  max-width: 100% !important;
  left: 0;
  right: 0;
}
nav.navbar .container-fluid {
  min-width: 0;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.navbar-brand {
  min-width: 0;
  max-width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.15;
}
.titulo-grande {
  font-size: clamp(1rem, 5vw, 1.75rem) !important;
  line-height: 1.1;
}
.icone-grande {
  font-size: clamp(1.15rem, 5vw, 1.8rem) !important;
  margin-right: 4px !important;
}

/* Menu principal */
.centralizado-vertical {
  min-height: calc(100vh - var(--bottom-nav-height));
  padding: 16px 12px calc(var(--bottom-nav-height) + 22px) !important;
  justify-content: flex-start !important;
}
.logo {
  max-width: min(210px, 58vw) !important;
}
.menu-container {
  width: 100% !important;
  max-width: 560px !important;
  max-height: none !important;
  overflow: visible !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 2.4vw, 15px) !important;
  padding: clamp(10px, 3vw, 20px) !important;
}
.menu-item {
  min-height: 86px;
  padding: 8px 6px;
}
.menu-icon {
  font-size: clamp(1.55rem, 8vw, 2.25rem) !important;
  margin-bottom: 6px !important;
}
.menu-text {
  font-size: clamp(.62rem, 2.8vw, .78rem) !important;
  line-height: 1.15;
}

/* Menu inferior */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100% !important;
  max-width: 100%;
  min-height: var(--bottom-nav-height) !important;
  height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  align-items: center;
  justify-content: space-around;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  z-index: 2000;
}
.bottom-nav a {
  min-width: 54px;
  min-height: 54px;
  flex: 1 0 54px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.15rem, 5vw, 1.55rem) !important;
  padding: 8px 4px !important;
  touch-action: manipulation;
}

/* Formularios e botoes */
input,
select,
textarea,
.form-control,
.form-select {
  max-width: 100%;
  font-size: 16px !important;
}
.form-control,
.form-select,
.btn {
  min-height: 44px;
}
textarea.form-control { min-height: 96px; }
label.form-label { margin-bottom: 6px; }
.btn,
button,
a.btn {
  white-space: normal !important;
  word-break: normal;
  touch-action: manipulation;
}
.btn-group {
  flex-wrap: wrap;
}

/* Cards e caixas */
.card,
.modal-content,
.top-card,
.resumo-card,
.filter-card,
.regras-container,
.atleta-card,
.team-card,
.team-panel,
.reserve-panel,
.empty-card {
  max-width: 100%;
}
.card,
.top-card,
.resumo-card,
.filter-card {
  border-radius: var(--app-radius) !important;
}

/* Tabelas */
.table-responsive {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  display: block !important;
  justify-content: initial !important;
  text-align: initial !important;
}
.table-responsive > table,
.table-atletas,
table.table {
  width: 100% !important;
  max-width: none;
}
.table-atletas .acoes-coluna {
  justify-content: flex-start;
}
.table-atletas .acoes-coluna .btn,
.table .btn {
  margin: 2px 0;
}

/* Listas e chips */
.atleta-card {
  gap: 10px;
}
.atleta-nome {
  min-width: 0;
  font-size: clamp(1rem, 4.4vw, 1.25rem) !important;
}
.acoes-atleta,
.chip-atleta,
.name-pill,
.info-pill {
  max-width: 100%;
}
.info-pill,
.chip-atleta,
.name-pill {
  line-height: 1.2;
}

/* Presenca */
.app-container {
  padding-bottom: calc(var(--bottom-nav-height) + 26px) !important;
}
label.checkbox-custom {
  gap: 12px;
  padding: 14px 16px !important;
}
label.checkbox-custom span,
label.checkbox-custom strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
.nav-links {
  flex-wrap: wrap;
  gap: 10px;
}
.nav-links a {
  flex: 1 1 150px;
  justify-content: center;
}

/* Separador de times */
.field-grid,
.team-grid,
.reserve-grid,
.reserva-grid {
  min-width: 0;
}
.campo,
.field {
  max-width: 100%;
}
.slot,
.player-box {
  min-width: 0;
}
.slot label,
.nome-preview,
.player-name {
  overflow-wrap: anywhere;
}
.acoes-fixas {
  bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
  margin-left: -10px;
  margin-right: -10px;
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.report-card {
  max-width: 100%;
  transform-origin: top center;
}

/* Relatorios e PDFs em tela */
.proximo-jogo {
  max-width: 100%;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

@media (max-width: 992px) {
  .field-grid,
  .team-grid,
  .reserve-grid {
    grid-template-columns: 1fr !important;
  }
  .row.g-2 > [class*="col-"],
  .row.g-3 > [class*="col-"] {
    min-width: 0;
  }
}

@media (max-width: 768px) {
  body { padding-top: 56px; }
  .container,
  .container-fluid,
  .container-full,
  .app-container,
  .times-container,
  .page-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .menu-container {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .row > [class*="col-"] {
    margin-bottom: 6px;
  }
  .table-responsive > table,
  .table-atletas,
  table.table {
    min-width: 640px;
  }
  .tabela-pequena,
  .table-sm {
    min-width: 520px !important;
  }
  .atleta-card {
    align-items: flex-start;
    flex-direction: column;
  }
  .atleta-card .btn-group,
  .acoes-atleta,
  .table-atletas .acoes-coluna {
    width: 100%;
  }
  .atleta-card .btn,
  .acoes-atleta .btn {
    flex: 1 1 140px;
  }
  .modal-dialog {
    margin: 10px !important;
  }
  .report-card {
    border-radius: 20px !important;
  }
  .footer-note {
    flex-wrap: wrap;
  }
}

@media (max-width: 576px) {
  :root { --bottom-nav-height: 62px; }
  .container-full {
    padding-top: 14px !important;
    padding-bottom: calc(var(--bottom-nav-height) + 18px) !important;
  }
  .menu-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 420px !important;
  }
  .menu-item {
    min-height: 92px;
    border-radius: 14px !important;
  }
  .bottom-nav a {
    min-width: 58px;
    flex-basis: 58px;
  }
  .titulo-grande {
    max-width: calc(100vw - 70px);
  }
  .btn-lg {
    font-size: 1rem !important;
    padding: .68rem .75rem !important;
  }
  .filter-card,
  .top-card,
  .resumo-card {
    padding: 12px !important;
  }
  .table-responsive {
    border-radius: 12px !important;
    padding: 4px !important;
  }
  .table-responsive > table,
  .table-atletas,
  table.table {
    min-width: 580px;
    font-size: 13px !important;
  }
  .table-atletas th,
  .table-atletas td,
  .table th,
  .table td {
    padding: 9px 8px !important;
  }
  .linha-campo,
  .field-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .reserva-grid,
  .reserve-grid {
    grid-template-columns: 1fr !important;
  }
  .campo,
  .field {
    min-height: 500px !important;
  }
  .acoes-fixas .row > [class*="col-"] {
    width: 100%;
  }
  .acoes-fixas .btn {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .container,
  .container-fluid,
  .container-full,
  .app-container,
  .times-container,
  .page-wrap {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
  .navbar-brand {
    padding-left: 4px !important;
    padding-right: 4px !important;
    gap: 4px !important;
  }
  .menu-container {
    gap: 9px !important;
    padding: 9px !important;
  }
  .menu-item {
    min-height: 84px;
  }
  .table-responsive > table,
  .table-atletas,
  table.table {
    min-width: 540px;
  }
  label.checkbox-custom {
    padding: 12px !important;
  }
  label.checkbox-custom input[type="checkbox"] {
    width: 38px !important;
    height: 23px !important;
  }
  .campo,
  .field {
    min-height: 470px !important;
  }
  .slot {
    padding: 8px !important;
  }
}

@media print {
  .bottom-nav,
  .acoes-fixas,
  .top-actions,
  nav.navbar {
    display: none !important;
  }
  body {
    padding: 0 !important;
    overflow: visible !important;
  }
}

/* =========================================================
   Refinamento responsivo v2 - 3 menus por linha
   Computador, Android e iPhone
   ========================================================= */
@media screen {
  html {
    min-width: 320px;
    overflow-x: hidden !important;
    scroll-behavior: smooth;
  }

  body {
    min-width: 320px;
    min-height: 100svh;
    overscroll-behavior-x: none;
    -webkit-tap-highlight-color: rgba(11, 29, 58, .12);
  }

  @supports (height: 100dvh) {
    body { min-height: 100dvh; }
    .centralizado-vertical { min-height: calc(100dvh - var(--bottom-nav-height)); }
  }

  /* Menu principal sempre com 3 itens por linha */
  .menu-container {
    width: min(100%, 720px) !important;
    max-width: 720px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(8px, 1.8vw, 16px) !important;
    align-items: stretch;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .menu-container > a,
  .menu-container > .menu-item,
  .menu-container a {
    min-width: 0 !important;
    width: 100% !important;
    text-decoration: none !important;
  }

  .menu-item {
    width: 100% !important;
    min-width: 0 !important;
    min-height: clamp(86px, 12vw, 118px);
    height: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    touch-action: manipulation;
  }

  .menu-icon {
    line-height: 1 !important;
  }

  .menu-text {
    width: 100%;
    max-width: 100%;
    display: block;
    text-align: center;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
    letter-spacing: .01em;
  }

  /* Menu inferior seguro para Android/iPhone, sem estourar largura */
  .bottom-nav {
    box-shadow: 0 -8px 22px rgba(0, 0, 0, .18);
    padding-left: max(4px, env(safe-area-inset-left, 0px));
    padding-right: max(4px, env(safe-area-inset-right, 0px));
  }

  .bottom-nav a {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    border-radius: 12px;
  }

  .central-wrapper {
    min-height: calc(100svh - 70px);
    height: auto !important;
    padding: 76px 12px calc(var(--bottom-nav-height) + 18px) !important;
  }

  .menu,
  .central-wrapper .menu {
    width: min(100%, 720px) !important;
    max-width: 720px !important;
  }

  .btn-menu {
    width: min(100%, 520px) !important;
    max-width: 100% !important;
  }
}

@media screen and (min-width: 1200px) {
  .menu-container {
    max-width: 760px !important;
  }
  .menu-item {
    min-height: 116px;
  }
}

@media screen and (max-width: 768px) {
  .centralizado-vertical {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .menu-container {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  .menu-item {
    min-height: 88px !important;
    padding: 9px 5px !important;
  }

  .menu-icon {
    font-size: clamp(1.35rem, 6.2vw, 1.9rem) !important;
    margin-bottom: 3px !important;
  }

  .menu-text {
    font-size: clamp(.56rem, 2.45vw, .72rem) !important;
    line-height: 1.08 !important;
  }
}

@media screen and (max-width: 576px) {
  .menu-container {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 100% !important;
    gap: 7px !important;
    padding: 8px !important;
  }

  .menu-item {
    min-height: 82px !important;
    border-radius: 13px !important;
    padding: 8px 4px !important;
  }

  .menu-icon {
    font-size: clamp(1.18rem, 6vw, 1.55rem) !important;
    margin-bottom: 2px !important;
  }

  .menu-text {
    font-size: clamp(.50rem, 2.7vw, .62rem) !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
  }

  .logo {
    max-width: min(168px, 48vw) !important;
  }

  .proximo-jogo {
    font-size: clamp(.72rem, 3.1vw, .9rem) !important;
    line-height: 1.25;
  }
}

@media screen and (max-width: 380px) {
  .centralizado-vertical {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .menu-container {
    gap: 6px !important;
    padding: 6px !important;
  }

  .menu-item {
    min-height: 76px !important;
    padding: 7px 3px !important;
  }

  .menu-icon {
    font-size: 1.12rem !important;
  }

  .menu-text {
    font-size: .48rem !important;
    line-height: 1.02 !important;
  }

  .bottom-nav a {
    font-size: 1.08rem !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
}

@media screen and (max-width: 340px) {
  .menu-item {
    min-height: 72px !important;
  }
  .menu-text {
    font-size: .44rem !important;
  }
}

/* =========================================================
   CORRECAO FINAL: MENU INFERIOR NAO COBRIR CONTEUDO
   Android, iPhone e navegadores mobile
   ========================================================= */
:root {
  --altura-menu-inferior-fixa: 106px;
  --respiro-menu-inferior-fixo: 44px;
}

html,
body {
  min-height: 100%;
  overflow-x: hidden !important;
}

body {
  padding-bottom: calc(var(--altura-menu-inferior-fixa) + var(--respiro-menu-inferior-fixo) + env(safe-area-inset-bottom)) !important;
}

.menu-inferior,
.bottom-menu,
.bottom-nav,
nav.fixed-bottom,
.navbar.fixed-bottom {
  padding-bottom: env(safe-area-inset-bottom) !important;
  z-index: 1050 !important;
}

body > .container,
body > .container-fluid,
.times-container,
.page-wrap,
.main-container,
.conteudo,
.content,
.relatorio-container,
.presenca-container {
  padding-bottom: calc(var(--altura-menu-inferior-fixa) + 90px + env(safe-area-inset-bottom)) !important;
}

.acoes-fixas {
  z-index: 1040 !important;
  bottom: calc(var(--altura-menu-inferior-fixa) + 12px + env(safe-area-inset-bottom)) !important;
  margin-bottom: 12px !important;
}

@media screen and (max-width: 768px) {
  :root {
    --altura-menu-inferior-fixa: 120px;
    --respiro-menu-inferior-fixo: 95px;
  }

  body {
    padding-bottom: calc(var(--altura-menu-inferior-fixa) + var(--respiro-menu-inferior-fixo) + env(safe-area-inset-bottom)) !important;
  }

  body > .container,
  body > .container-fluid,
  .times-container,
  .page-wrap,
  .main-container,
  .conteudo,
  .content,
  .relatorio-container,
  .presenca-container {
    padding-bottom: calc(var(--altura-menu-inferior-fixa) + 125px + env(safe-area-inset-bottom)) !important;
  }

  .acoes-fixas {
    position: static !important;
    bottom: auto !important;
    margin-top: 22px !important;
    margin-bottom: calc(var(--altura-menu-inferior-fixa) + 42px + env(safe-area-inset-bottom)) !important;
    padding: 12px !important;
    border-radius: 18px !important;
    background: rgba(240, 244, 248, .96) !important;
  }

  .field-grid,
  .team-card,
  .resumo-card,
  .top-card {
    margin-bottom: 28px !important;
  }
}

@media screen and (max-width: 430px) {
  :root {
    --altura-menu-inferior-fixa: 128px;
    --respiro-menu-inferior-fixo: 115px;
  }

  .acoes-fixas .btn,
  .acoes-fixas button,
  .acoes-fixas a {
    min-height: 52px !important;
    margin-bottom: 8px !important;
  }
}

@supports (padding: max(0px)) {
  body {
    padding-bottom: max(190px, calc(var(--altura-menu-inferior-fixa) + var(--respiro-menu-inferior-fixo) + env(safe-area-inset-bottom))) !important;
  }
}

/* =========================================================
   CORRECAO DESKTOP: MENU INFERIOR NAO FICAR SOBRE O CONTEUDO
   No desktop/tablet largo, o menu volta ao fluxo da pagina.
   No celular, permanece fixo embaixo.
   ========================================================= */
@media screen and (min-width: 769px) {
  html,
  body {
    padding-bottom: 0 !important;
  }

  .bottom-nav,
  .menu-inferior,
  .bottom-menu,
  nav.fixed-bottom,
  .navbar.fixed-bottom {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 10px 0 !important;
    margin-top: 18px !important;
    margin-bottom: 0 !important;
    transform: none !important;
  }

  body > .container,
  body > .container-fluid,
  .times-container,
  .page-wrap,
  .main-container,
  .conteudo,
  .content,
  .relatorio-container,
  .presenca-container,
  .container-full {
    padding-bottom: 24px !important;
  }

  .acoes-fixas {
    bottom: auto !important;
    margin-bottom: 18px !important;
  }
}

/* =========================================================
   AJUSTE MOBILE COMPACTO: MENOS ESPACO BRANCO NO FINAL
   Mantem o conteudo protegido do menu inferior, mas deixa a
   rolagem mais justa no Android e iPhone.
   ========================================================= */
@media screen and (max-width: 768px) {
  :root {
    --altura-menu-inferior-fixa: 72px;
    --respiro-menu-inferior-fixo: 14px;
    --bottom-nav-height: 64px;
  }

  body {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body > .container,
  body > .container-fluid,
  .container-full,
  .times-container,
  .page-wrap,
  .main-container,
  .conteudo,
  .content,
  .relatorio-container,
  .presenca-container,
  .app-container,
  .container-custom {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .centralizado-vertical {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .acoes-fixas {
    position: static !important;
    bottom: auto !important;
    margin-top: 16px !important;
    margin-bottom: 14px !important;
    padding: 10px !important;
    border-radius: 16px !important;
  }

  .field-grid,
  .team-card,
  .resumo-card,
  .top-card {
    margin-bottom: 16px !important;
  }

  .bottom-nav {
    min-height: 64px !important;
    height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

@media screen and (max-width: 430px) {
  body,
  body > .container,
  body > .container-fluid,
  .container-full,
  .times-container,
  .page-wrap,
  .main-container,
  .conteudo,
  .content,
  .relatorio-container,
  .presenca-container,
  .app-container,
  .container-custom,
  .centralizado-vertical {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .acoes-fixas {
    margin-bottom: 12px !important;
  }

  .acoes-fixas .btn,
  .acoes-fixas button,
  .acoes-fixas a {
    min-height: 48px !important;
    margin-bottom: 6px !important;
  }
}

@supports (padding: max(0px)) {
  @media screen and (max-width: 768px) {
    body {
      padding-bottom: max(78px, calc(72px + env(safe-area-inset-bottom, 0px))) !important;
    }
  }
}