/* ==========================================================================
   responsive.css — camada responsiva (2026-10-28)

   Carrega por ÚLTIMO em todas as páginas (dashboard, login, loja, operação).
   Não substitui nada dos arquivos antigos: só corrige o que quebra em tela
   pequena. Tirar o <link> dela volta tudo como era.

   Breakpoints desta camada (os mesmos em todo o arquivo):
     ≤ 480px  celular pequeno (360/390/414)
     ≤ 768px  celular — mesmo corte do menu off-canvas do resto do projeto
     ≤ 1024px tablet (em pé e deitado)
     ≥ 1441px monitor grande
   - O que é regra NOVA (vale em qualquer tela) fica no topo, sem media.
   - O que muda o visual compacto de hoje fica restrito a < 1024px ou a
     tela de toque (pointer:coarse) — decisão do usuário: "só celular/
     tablet", o desktop mantém a identidade visual atual. Aqui é max-width
     de propósito: pra "desfazer" num min-width:1024px eu teria que repetir
     o valor antigo de cada elemento, e eles variam (ex: .kpi-grid tem 4
     definições diferentes entre main.css/svx-theme.css).
   - Seletores com "html body" na frente: os arquivos antigos usam muito
     !important com seletor de id (#ciclosContainer ...); o prefixo garante
     que esta camada vence sem precisar mexer neles.
   ========================================================================== */


/* ---- 1. Mídia nunca passa da largura do pai ---- */
img, video, canvas, svg{ max-width:100%; }
img, video{ height:auto; }


/* ---- 2. Tabelas — rolam na horizontal dentro do próprio card ----
   Todas as tabelas do projeto já ficam dentro de um wrapper; o .table-wrap
   tinha overflow:hidden (main.css) e só ganhava rolagem ≤768px. Agora rola
   em qualquer tela quando a tabela não cabe; overflow-y continua hidden
   pra manter o canto arredondado. */
.table-wrap,
.log-table-wrap,
.hist-table-wrap,
.gbcm-cm-wrap,
.timer-hist-body,
.lj-table-card{
  max-width:100%;
  overflow-x:auto !important;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}

/* Dashboard: Resumo Operacional pedia 400px por coluna — em tela < 432px
   isso sozinho já estourava a largura. min() deixa encolher. */
html body #ov2Lower{ grid-template-columns:repeat(auto-fit, minmax(min(400px, 100%), 1fr)) !important; }


/* Tempo real (static/js/live.js) — enquanto a tela é redesenhada sozinha,
   as animações de entrada (cards subindo, anéis enchendo) terminam na hora
   em vez de repetir a cada atualização. Só duração/atraso: trocar o nome
   da animação faria ela recomeçar quando a classe sai. */
html.svx-live-refresh body *{ animation-duration:0s !important; animation-delay:0s !important; }
/* Selo "Tempo real" do cabeçalho apaga quando a conexão cai */
.rt-badge.rt-off{ opacity:.45; filter:grayscale(1); }


/* Controle de Ciclos — campo Gerente (qualquer tela). Era position:absolute
   no canto direito e, com valores de 4 dígitos, ficava EM CIMA do "CTA 174"
   (visto em 1024 e 1920px). Continua no alto à direita, só que agora na
   mesma linha do título, dentro do fluxo — empurra em vez de sobrepor. */
html body #ciclosContainer .ciclo-day-top{
  flex-direction:row !important; flex-wrap:wrap !important; align-items:center !important;
}
html body #ciclosContainer .ciclo-day-title{ flex:1 1 auto !important; width:auto !important; min-width:0 !important; }
html body #ciclosContainer .ciclo-day-gerente{
  position:static !important; order:2 !important;
  flex-direction:row !important; align-items:center !important; gap:8px !important;
}
html body #ciclosContainer .ciclo-day-summary{ order:3 !important; flex:0 0 100% !important; width:100% !important; }
html body #ciclosContainer .ciclo-day-summary-row2{ order:4 !important; }


/* ---- 3. Monitor grande (> 1440px) ----
   .page já é centralizada com max-width:1200px (redesign-v4). No Controle
   de Ciclos isso cortava em 2 cards por linha mesmo num monitor de 1920+;
   lá a página pode ir até 3 cards (3×480 + 2×16). */
@media (min-width:1441px){
  html body #pg-ciclos.page{ max-width:1500px !important; }
}


/* ---- 4. Celular (≤ 768px) ---- */
@media (max-width:768px){

  /* -- Menu --
     A lista completa (#navDrawerSingle) agora fica dentro da .sidebar-nav
     no mobile (ver script da gaveta em dashboard.html). O "Dashboard" dela
     duplicaria o que já existe na .sidebar-nav, então some aqui. O ícone
     do "Sair" só tinha tamanho no CSS de desktop — sem isso o SVG crescia
     até a largura do menu. */
  html body .sidebar-nav .nav-drawer-flyout > .nav-item[data-page="overview"]{ display:none !important; }
  html body .sidebar-nav .nav-drawer-flyout{ transform:none !important; pointer-events:auto !important; height:auto !important; width:auto !important; max-width:none !important; overflow:visible !important; }
  html body .btn-logout svg{ width:18px !important; height:18px !important; flex-shrink:0 !important; }

  /* -- Controle de Ciclos: card da plataforma --
     Gerente era position:absolute no canto (feito pro card de 480px do
     desktop) e no celular ficava em cima do CTA. Vira uma linha normal
     logo abaixo do título. */
  html body #ciclosContainer{ grid-template-columns:minmax(0, 1fr) !important; }
  html body #ciclosContainer .ciclo-day-top{
    padding:14px !important; gap:10px !important; height:auto !important;
  }
  html body #ciclosContainer .ciclo-day-title{ padding-right:34px !important; box-sizing:border-box !important; }
  html body #ciclosContainer .ciclo-day-gerente{
    position:static !important; order:2 !important; width:100% !important;
    flex-direction:row !important; align-items:center !important; justify-content:space-between !important;
    gap:10px !important;
  }
  html body #ciclosContainer .ciclo-day-gerente-lbl{ font-size:11px !important; }
  /* 16px: abaixo disso o iPhone dá zoom sozinho ao tocar no campo */
  html body #ciclosContainer .ciclo-day-gerente .cdt-currency-input{
    width:150px !important; min-width:0 !important; font-size:16px !important;
    min-height:40px !important; padding:6px 10px !important;
  }
  /* Resumo: 3 colunas iguais nas duas fileiras (DEP|SAQ|CTA, BAÚ|GER|LUC),
     ícone em cima e valor embaixo. O main.css punha o LUC numa linha
     inteira sozinho e deixava vão entre as fileiras. */
  html body #ciclosContainer .ciclo-day-summary{
    order:3 !important;
    display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows:auto !important; align-items:start !important;
    gap:6px !important; margin:0 !important; padding:0 !important;
    height:auto !important; min-height:0 !important;
  }
  html body #ciclosContainer .ciclo-day-summary-row2{ order:4 !important; }
  html body #ciclosContainer .ciclo-day-summary .ciclo-sum-item{
    grid-column:auto !important;
    flex-direction:column !important; align-items:center !important; justify-content:flex-start !important;
    gap:4px !important; padding:8px 4px !important; margin:0 !important;
    height:auto !important; min-height:0 !important; min-width:0 !important;
  }
  html body #ciclosContainer .ciclo-sum-text{ min-width:0 !important; max-width:100% !important; }
  html body #ciclosContainer .ciclo-sum-val,
  html body #ciclosContainer .ciclo-sum-lucro .ciclo-sum-val{
    font-size:13px !important; display:block !important; max-width:100% !important;
    white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
  }
  html body #ciclosContainer .ciclo-sum-icon,
  html body #ciclosContainer .ciclo-sum-lucro .ciclo-sum-icon{ width:26px !important; height:26px !important; }

  /* Lista de ciclos (cards): o wrapper é flex-coluna com altura máxima, e
     os cards (overflow:hidden) encolhiam até sobrar só o título
     "27/10 · C1". flex-shrink:0 devolve a altura real; a lista continua
     rolando dentro do card, só que mais alta. */
  html body #ciclosContainer .ciclo-mobile-view.ccg-wrap{ max-height:70dvh !important; }
  html body .ccg-wrap > *{ flex-shrink:0 !important; }
  html body .cc-lucro-val{ font-size:22px !important; }

  /* Barra de ordenação: rola pro lado em vez de quebrar a página */
  html body .ciclos-sort-strip{ display:flex !important; overflow-x:auto !important; flex-wrap:nowrap !important; gap:6px !important; -webkit-overflow-scrolling:touch; }
  html body .ciclos-sort-strip > *{ flex-shrink:0 !important; }

  /* -- Cabeçalhos de seção com botão ao lado (Usuários, Keys, Operadores,
     PIX, Finanças): quebram linha em vez de espremer o título. -- */
  html body .section-header,
  html body .settings-title,
  html body .fp-header,
  html body .fp-section-hdr,
  html body .pix-header,
  html body .op-date-ctrl,
  html body .pix-controls,
  html body .pix-flat-toolbar,
  html body .pix-flat-selectn,
  html body .pix-flat-bulk,
  html body .pix-migrate-banner,
  html body .log-filters{ flex-wrap:wrap !important; gap:8px !important; }

  /* PIX: filtros 2 por linha, busca na linha inteira */
  html body .pix-controls{ width:100% !important; }
  html body .pix-controls > *{ flex:1 1 calc(50% - 8px) !important; min-width:0 !important; }
  html body .pix-controls > .pix-global-search{ flex-basis:100% !important; }

  /* Logs: filtros dividem a linha, select perde o min-width:150 inline */
  html body .log-filter-group{ flex:1 1 140px !important; min-width:0 !important; }
  html body .log-filter-input{ width:100% !important; min-width:0 !important; }

  /* Operadores: cards de 340px mínimos não cabem em 360 */
  html body .op-grid{ grid-template-columns:minmax(0, 1fr) !important; }

  /* Tabelas largas (Usuários 7 col., Keys 7 col., Logs 4 col.): em vez de
     espremer cada coluna até o texto virar uma pilha de letras, mantêm uma
     largura legível e rolam pro lado dentro do card (regra 2 acima). */
  html body .data-table{ min-width:640px !important; }
  html body .log-table{ min-width:560px !important; }
  /* Tabela vazia (só a linha "Nenhum registro…" com colspan): sem dado pra
     rolar, a largura mínima só empurrava a mensagem pra fora da tela. */
  html body table:has(> tbody > tr:only-child > td[colspan]){ min-width:0 !important; }

  /* Importar */
  html body .upload-zone{ padding:24px 16px !important; }

  /* Modais: nunca mais largos/altos que a tela */
  html body .modal-box,
  html body .xmodal{ max-width:calc(100vw - 24px) !important; max-height:calc(100dvh - 24px) !important; overflow-y:auto !important; }
}


/* ---- 5. Celular pequeno (≤ 480px) ---- */
@media (max-width:480px){
  /* Anéis da Home (3 lado a lado, 92px fixo inline) e do Controle de
     Ciclos: 3×92 + vãos não cabem em 360px — encolhem com a tela. */
  html body .ov2-hero-rings .svx-ring{
    width:clamp(72px, 24vw, 92px) !important; height:clamp(72px, 24vw, 92px) !important;
  }
  html body .ov2-hero-rings{ gap:8px !important; }
  html body .ov2-hero-ring-lbl{ font-size:11px !important; }
  html body .ov2-meta-card .svx-ring{ width:76px !important; height:76px !important; }
  html body .ov2-meta-card{ gap:14px !important; padding:14px !important; }
  html body .ciclos-kpi-mini-row .svx-ring{ width:72px !important; height:72px !important; }

  /* Grades fixas de 3 colunas escritas inline (Config → Informações do
     Sistema) viram 1 coluna */
  html body .page-content [style*="grid-template-columns:repeat(3,1fr)"]{ grid-template-columns:minmax(0, 1fr) !important; }

  /* Modais com 2 campos lado a lado (Pagamento: De/Até, Contas/Valor) */
  html body .modal-body [style*="grid-template-columns:1fr 1fr"]{ grid-template-columns:minmax(0, 1fr) !important; }
}


/* ---- 6. Celular + tablet (< 1024px) ---- */
@media (max-width:1023.98px){

  /* Nenhum filho empurra a página pro lado. clip (e não hidden) pra não
     virar container de rolagem — não quebra position:sticky nem a rolagem
     normal do body no celular. */
  html body .page-content{ overflow-x:clip !important; }

  /* Cards de métricas empilham: 1 por linha no celular, 2-3 no tablet.
     min(240px,100%) evita estourar em tela < 240px + padding. */
  html body .kpi-grid,
  html body .fin-kpi-wrap,
  html body .metrics-row,
  html body .fp-summary-row{
    grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important;
  }
  /* .kpi-card.highlight usava span 2 — com 1 coluna isso criava uma
     coluna fantasma e a rolagem lateral voltava. */
  html body .kpi-grid > *,
  html body .fin-kpi-wrap > *,
  html body .metrics-row > *{ grid-column:auto !important; }

  /* Loja: 5 números lado a lado só cabem no desktop */
  html body .lj-stats-row{ grid-template-columns:repeat(auto-fit, minmax(min(150px, 100%), 1fr)) !important; }

  /* Cabeçalho: os controles (mês, Dashboard Vendas, Grupo Bet, sino)
     quebram linha em vez de se sobrepor. */
  html body .header-right{ flex-wrap:wrap !important; row-gap:8px !important; min-width:0 !important; }
  html body .header-left{ min-width:0 !important; }
  html body .header-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* Filtros do Controle de Ciclos e barras de ação em geral */
  html body .ciclos-table-controls,
  html body .ciclo-ctrl-filters,
  html body .ciclo-filter-actions,
  html body .modal-footer{ flex-wrap:wrap !important; }
}


/* ---- 7. Toque: fonte e alvos maiores (celular, tablet, tela touch) ----
   pointer:coarse pega tablet deitado (iPad ≥1024px) e notebook touch. */
@media (max-width:1023.98px), (pointer:coarse){

  body{ font-size:16px; }

  /* 16px em campo de texto também impede o iPhone de dar zoom sozinho ao
     tocar no campo (agora que o zoom com os dedos foi liberado no
     viewport). Inputs DENTRO da tabela de ciclos ficam fora: as colunas
     são estreitas de propósito e o valor cortaria. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(.ciclo-day-table input),
  select,
  textarea{
    font-size:16px !important;
  }

  /* Alvos de toque ≥ 44px. Ficam de fora: campos da tabela/cards de
     ciclos (edição densa, layout medido) e a calculadora (.calc-btn, grade
     própria). */
  .btn,
  .pg-btn,
  .modal-close,
  .role-opt,
  .svx-pd-item,
  .ciclos-sort-btn,
  .notif-filter-btn,
  .fp-tipo-btn,
  .month-selector,
  .btn-toggle,
  .login-btn,
  .lj-btn, .lj-period-btn, .lj-mes-btn, .lj-abc-btn,
  .xbtn-save, .xbtn-next, .xcycles-new, .xrefresh, .xmodal-close,
  .pbc-bulk-btn,
  .btn-cdt-add-new,
  .form-input,
  select,
  input[type="text"]:not(.ciclo-day-table input):not(.ccg-wrap input),
  input[type="email"],
  input[type="password"],
  input[type="number"]:not(.ciclo-day-table input):not(.ccg-wrap input),
  input[type="date"]:not(.ciclo-day-table input):not(.ccg-wrap input),
  input[type="search"]{
    min-height:44px !important;
  }
  /* Tabela de ciclos (tablet usa a versão tabela): linha tem altura medida
     pra caber 10 ciclos — botões dela ficam como estão. */
  .ciclo-day-table .btn,
  .ciclo-day-table .btn-cdt-add-new{ min-height:0 !important; }
  /* Item do menu: toque confortável */
  html body .sidebar .nav-item{ min-height:44px !important; }

  /* Botões só de ícone (fechar modal, paginação): também 44 de largura */
  .modal-close,
  .pg-btn,
  .btn-toggle,
  .xmodal-close{ min-width:44px !important; }

  /* Respiro entre clicáveis vizinhos */
  html body .header-right,
  html body .ciclo-filter-actions,
  html body .modal-footer,
  html body .notif-filters{ gap:10px !important; }
}