/* ==========================================================
   COBRETUDO 27/09/2026 — ENQUADRAMENTO PADRÃO (ADM + CLIENTE)
   Base: telas mais usadas no Brasil (StatCounter, ago/2026):
   computador 1366x768, 1920x1080, 1536x864 (1920 com 125%), 1280x720;
   celular 384–432px de largura.
   Regras: nada de rolagem lateral na página, texto mínimo 12px,
   toque mínimo ~40px no celular, conteúdo usa a largura sem sobrar
   faixa vazia e sem esticar demais em telas grandes.
   Carregado por último em admin/ e cliente/. Não é usado na capa.
   ========================================================== */

/* Texto mínimo 12px também para tamanhos relativos (small, sub, sup) */
body.painel-claro small{font-size:max(12px,.9em)}
body.painel-claro :is(sub,sup){font-size:max(12px,.75em)}

/* Ícones de linha nunca ficam gigantes (no celular o botão Sair do cliente
   não tinha tamanho e cobria o título da página) */
body.painel-claro .ico svg{width:20px;height:20px;display:block;flex:0 0 auto}
body.painel-claro .ico{display:inline-grid;place-items:center;width:22px;min-width:22px;height:22px}

/* Barra do topo do ADM: não passa da borda direita */
@media (min-width:801px){body.admin-page .main>#adminGlobalbar{margin-left:-24px!important;margin-right:-24px!important}}

/* Tabelas: selos e ações numa linha só; sem empilhar botões */
body.painel-claro td .badge,body.painel-claro td .billing-pill,body.painel-claro td .chip{white-space:nowrap}
body.painel-claro .ct-row-actions{display:flex;gap:6px;flex-wrap:nowrap;align-items:center}
body.painel-claro .ct-row-actions .btn{white-space:nowrap}
body.painel-claro th{white-space:nowrap}

/* Botões com texto longo quebram de forma limpa, sem cortar */
body.admin-page #finance .ctf-foot .btn{white-space:normal;line-height:1.25;height:auto;min-height:40px}

/* Telas grandes (1600px+): um pouco mais de respiro e leitura,
   conteúdo centralizado até 1760px para não esticar */
@media (min-width:1600px){
  body.painel-claro .main{margin-left:auto;margin-right:auto}
  body.admin-page td{font-size:13px}
  body.admin-page th{font-size:12px}
  body.admin-page .muted{font-size:12.5px}
}

/* Notebook 1280–1400px: tabelas cabem sem rolar para o lado */
@media (min-width:801px) and (max-width:1400px){
  body.painel-claro th,body.painel-claro td{padding-left:8px;padding-right:8px}
}

/* Celular: área de toque confortável e botões sem espremer */
@media (max-width:800px){
  body.painel-claro .btn,body.painel-claro button.btn{min-height:40px}
  body.painel-claro .btn.small{min-height:36px}
  body.painel-claro .ct-row-actions{flex-wrap:wrap}
  body.client-page .client-logout .ico svg{width:18px;height:18px}
  /* Sair do cliente: botão compacto no canto, igual ao ADM, sem cobrir a marca */
  body.client-page .client-logout{display:inline-flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:6px!important;width:auto!important;height:36px!important;min-height:36px!important;padding:6px 12px!important;border-radius:9px!important;white-space:nowrap!important}
  body.client-page .client-logout .nav-label{opacity:1!important;width:auto!important;font-size:12px!important;font-weight:700}
  body.client-page .client-logout .ico{width:18px;min-width:18px;height:18px}
  /* Números do topo em 2 colunas (menos rolagem) */
  body.painel-claro .kpi-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  /* Botões do cabeçalho lado a lado */
  body.admin-page .header .top-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  body.admin-page .header .top-actions>*:last-child:nth-child(odd){grid-column:1/-1}
}

/* Celular (até 640px): tabelas viram cartões — cada linha é um cartão
   com "Título: valor", sem precisar arrastar para o lado */
@media (max-width:640px){
  body.painel-claro .tablewrap{overflow-x:visible!important;border:0!important;background:transparent!important}
  body.painel-claro table.ct-cards{min-width:0!important;width:100%!important;border-collapse:separate!important;border-spacing:0!important}
  body.painel-claro table.ct-cards thead{display:none!important}
  body.painel-claro table.ct-cards tbody,body.painel-claro table.ct-cards tr:not(#_){display:block!important;width:100%!important}
  body.painel-claro table.ct-cards tr:not(#_){background:#fff;border:1px solid #dce6ec!important;border-radius:12px;padding:6px 12px;margin:0 0 10px;box-shadow:0 2px 8px rgba(15,48,87,.05)}
  body.painel-claro table.ct-cards td:not(#_){display:block!important;position:relative;min-height:34px;width:auto!important;max-width:none!important;padding:8px 0 8px 40%!important;border:0!important;border-bottom:1px solid #eef3f6!important;text-align:left!important;white-space:normal!important;overflow-wrap:anywhere}
  body.painel-claro table.ct-cards td:last-child:not(#_){border-bottom:0!important}
  body.painel-claro table.ct-cards td:not(#_)::before{content:attr(data-label);position:absolute;left:0;top:8px;width:37%;font-size:12px;font-weight:700;color:#5b7383;line-height:1.35;text-transform:none;letter-spacing:0}
  body.painel-claro table.ct-cards td.ct-card-full:not(#_){padding-left:0!important;padding-top:10px!important}
  body.painel-claro table.ct-cards td.ct-card-full:not(#_)::before{content:none}
  body.painel-claro table.ct-cards td .ct-row-actions{flex-wrap:wrap}
  body.painel-claro table.ct-cards td .badge,body.painel-claro table.ct-cards td .btn{max-width:100%}
  body.painel-claro table.ct-cards tr[style*="border-left"],body.painel-claro table.ct-cards tr[class*="urgent"]{border-left-width:4px!important}
}