/*
 * Correcoes de layout e responsividade (auditoria global).
 * Somente apresentacao: nao altera marcacao, rotas, permissoes nem regras.
 * Carregado DEPOIS de typography.css (ultimo CSS do <head>).
 */

/* 1) Botoes: o texto nunca e cortado. Em espaco curto ele quebra em 2 linhas. */
html body .btn,
html body .btn-barbershop,
html body .btn-gold,
html body .btn-outline-gold {
  white-space: normal;
  max-width: 100%;
  line-height: 1.25;
}
html body .btn-group > .btn,
html body .nav-pills .nav-link,
html body .page-link { white-space: nowrap; }

/* 2) DataTables: a tabela sempre ocupa a largura do cartao (o JS fixava a largura em px
      no carregamento e cortava/deixava vazio ao mudar a janela). No celular rola dentro do cartao. */
html body .dataTables_wrapper { max-width: 100%; }
html body table.dataTable { width: 100% !important; }
@media (max-width: 767.98px) {
  html body .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* 3) Indicadores (cards): valor na fonte de numeros sem quebrar de linha em larguras medias */
html body .stat-value,
html body [class*="stat-value"] {
  font-size: clamp(1.2rem, 0.4rem + 1.3vw, 1.75rem);
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  html body .stat-value,
  html body [class*="stat-value"] { font-size: 1.35rem; }
}

/* 4) Etiquetas e legendas com texto longo quebram em vez de vazar do cartao */
html body .badge { max-width: 100%; }
@media (max-width: 575.98px) {
  html body .card-barbershop .badge,
  html body .card .badge { white-space: normal; text-align: left; }
  .heatmap-legend { flex-wrap: wrap; justify-content: center; gap: .25rem .75rem; }
  .heatmap-legend-bar { flex: 1 1 120px; min-width: 80px; }
}

/* 5) Linhas de filtro/acoes quebram em vez de passar da tela */
@media (max-width: 575.98px) {
  html body .content-page .d-flex.align-items-end.gap-2,
  html body .content-page .card-header-barbershop .d-flex { flex-wrap: wrap; }
}

/* 6) Mini indicadores em 3 colunas (ex.: Indicacoes) em telas muito estreitas */
@media (max-width: 400px) {
  .stat-mini { padding: .75rem .25rem; }
  .stat-mini-label { font-size: .68rem; overflow-wrap: anywhere; line-height: 1.25; }
  .stat-mini-value { font-size: 1.4rem; }
}

/* 7) Titulos dentro de cartoes: nivel h4/h3 para nao quebrar em colunas estreitas */
html body .card-header-barbershop h3,
html body .card-header-barbershop .h3 { font-size: var(--fs-h4); }
html body .card-barbershop h2 { font-size: var(--fs-h3); }

/* 8) Campos de formulario com a mesma altura (alvo de toque confortavel) */
html body .form-control:not(.form-control-sm):not(textarea):not([type="file"]):not([type="color"]):not([type="range"]),
html body .form-select:not(.form-select-sm) { min-height: 44px; }

/* 9) Paginas publicas: linhas do Bootstrap com gutter maior que o padding do container nao saem da tela */
@media (max-width: 767.98px) {
  .container-barbershop .row { --bs-gutter-x: 1.5rem; }
}

/* 10) Superadmin: classe usada nas views sem CSS correspondente (padding igual ao .card-body-barbershop) */
.card-barbershop-body { padding: var(--space-6, 1.5rem); }
@media (max-width: 575.98px) { .card-barbershop-body { padding: var(--space-4, 1rem); } }