/* ==========================================================================
   OLLIVER — RESPONSIVIDADE GLOBAL
   Celular • Tablet • Desktop

   A ultima camada de CSS do painel da equipe, do portal do cliente e das
   portas de entrada. Nao desenha nada novo: so ajusta o que ja existe para
   caber em tela estreita. Tirar o <link> devolve o comportamento anterior.

   Pontos de quebra (os mesmos do resto do sistema):
     1100px  a lateral vira gaveta (estilo.css)
     1024px  tablet deitado
      767px  celular / tablet em pe estreito
      380px  celular pequeno
   ========================================================================== */

:root {
  --mobile-breakpoint: 480px;
  --tablet-breakpoint: 768px;
  --desktop-breakpoint: 1024px;
  --page-padding: 24px;
}

/* ---- 1. Base: nada estoura a largura da tela ---- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
  /* `clip` corta o que vaza sem virar area de rolagem: o `position: sticky`
     das barras continua funcionando, o que `hidden` quebraria. */
  overflow-x: clip;
}

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

input, select, textarea { min-width: 0; max-width: 100%; }
textarea { resize: vertical; }
button, [role="button"], a { -webkit-tap-highlight-color: transparent; }

/* Tabelas: rolam dentro do proprio quadro em vez de empurrar a pagina. */
table th, table td { overflow-wrap: anywhere; }
.tabela-rolagem, .table-container, .table-responsive {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Utilitarios (para telas novas usarem sem CSS proprio). */
@media (max-width: 1024px) {
  .desktop-only { display: none !important; }
  .tablet-stack { flex-direction: column; align-items: stretch; }
}
@media (max-width: 767px) {
  .mobile-hide { display: none !important; }
  .mobile-stack { display: flex; flex-direction: column; align-items: stretch; }
  .mobile-full-width { width: 100% !important; max-width: 100% !important; }
  .mobile-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mobile-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .mobile-actions > * { flex: 1 1 auto; min-width: 0; }
}

/* ==========================================================================
   2. TABLET (gaveta no lugar da lateral)
   ========================================================================== */
@media (max-width: 1100px) {
  /* O botao do menu flutua no canto. Com a gaveta aberta ele vira um "X"
     visual (o mesmo botao fecha), e o veu escurece mais o conteudo. */
  body.menu-aberto::after { background: rgba(3, 5, 9, .55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
  aside.lateral { z-index: 40; box-shadow: 18px 0 50px rgba(0, 0, 0, .45); max-width: 86vw; }
  body.menu-aberto { overflow: hidden; }
  aside.lateral nav.menu { overscroll-behavior: contain; }
  button.abrir-menu { touch-action: manipulation; }

  /* WhatsApp: a tela ocupa a altura inteira e tirava o respiro de cima — o
     botao do menu pousava em cima do titulo. */
  body.com-lateral:has(.central) main { padding-top: 64px !important; }
  .central { height: calc(100dvh - 78px) !important; }

  /* Equipe: os cartoes compactos ficavam com 230px num tablet com espaco
     sobrando, e o nome virava "Da...". */
  .grade-pessoas { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)) !important; }

  /* Clientes: a tabela tinha 980px de minimo e cortava "Responsavel" no
     tablet. As quatro colunas cabem; abaixo de 768px ela vira cartoes. */
  .tabela-clientes { min-width: 0 !important; }

  /* Sub-abas: rolam de lado em vez de quebrar em duas linhas. */
  .sub-modulo { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .sub-modulo::-webkit-scrollbar { display: none; }
}

@media (max-width: 1024px) {
  :root { --page-padding: 20px; }
}

/* ==========================================================================
   3. CELULAR
   ========================================================================== */
@media (max-width: 767px) {
  :root { --page-padding: 14px; }

  h1 { font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.2; }

  /* iPhone da zoom na pagina ao tocar num campo com letra menor que 16px,
     e nao volta sozinho. So em tela de toque. */
  @media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea { font-size: 16px !important; }
  }

  /* Janelas (dialog): ocupam a largura e rolam por dentro. */
  dialog,
  #janela {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto;
    padding: 20px 16px !important;
  }
  dialog .acoes { flex-wrap: wrap; }
  dialog .acoes > button { flex: 1 1 auto; min-height: 42px; }
  #janela-corpo { min-width: 0; }
  #janela-corpo [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Cabecalhos de tela: titulo em cima, acoes embaixo, sem espremer. */
  .cabeca-tela, .barra, .page-header, .toolbar, .filters-bar { flex-wrap: wrap; gap: 12px; min-width: 0; }
  .cabeca-tela > *, .barra > * { min-width: 0; }

  /* ---- WhatsApp ---- */
  .central .central-topo { flex-wrap: wrap !important; gap: 10px; }
  .central .central-titulo { flex: 1 1 100%; min-width: 0; }
  .central .central-topo p { display: none; }
  .central .central-barra { flex-wrap: wrap; gap: 8px; }
  .central .central-abas { max-width: 100%; overflow-x: auto; }
  .central .central-nova span { display: none; }
  .central .central-acoes { flex-wrap: wrap; }

  /* ---- Clientes: a tabela vira lista de cartoes ----
     Rolar de lado numa tabela de 980px escondia status, contrato e
     responsavel; no celular cada cliente vira um cartao com o nome em cima
     e o resto em linha embaixo. */
  .tabela-clientes { min-width: 0 !important; width: 100%; table-layout: auto; }
  .tabela-clientes thead { display: none; }
  .tabela-clientes tbody { display: grid; gap: 0; }
  .tabela-clientes tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--linha, rgba(255, 255, 255, .08));
  }
  .tabela-clientes td { display: block; padding: 0 !important; border: 0 !important; width: auto !important; }
  .tabela-clientes td:first-child { flex: 1 1 100%; }
  .tabela-clientes td:nth-child(4) { margin-left: auto; font-size: 12.5px; color: var(--apagado); }
  .tabela-clientes td.acoes-linha:empty,
  .tabela-clientes td.acoes-linha:not(:has(*)) { display: none; }
  .tabela-clientes td.acoes-linha { flex: 1 1 100%; }
  /* o quadro que rolava a tabela nao precisa mais rolar */
  div:has(> .tabela-clientes) { overflow-x: visible !important; }

  /* ---- Financeiro: o titulo herdava `flex: 1 1 280px` e, com a cabeca em
     coluna, os 280px viravam altura — um buraco vazio no topo. ---- */
  .fin-topo .fin-titulo { flex-basis: auto; }
  .fin-topo .fin-periodo-botao { justify-content: center; }

  /* ---- Calendario do mes (pre-producao, producao, calendario) ----
     Rolava de lado com colunas de 112px e mostrava 3 dias por vez. Agora
     os 7 dias cabem: o post vira uma faixa da cor do estado (toque abre). */
  .calendario.mes { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; overflow-x: visible !important; }
  .calendario.mes .cabecalho-dia { padding: 8px 2px !important; font-size: 9.5px !important; text-align: center; letter-spacing: .02em; overflow: hidden; }
  .calendario.mes .dia { min-height: 64px !important; padding: 4px 3px 6px !important; min-width: 0; }
  .calendario.mes .numero { font-size: 12.5px !important; }
  .calendario.mes .pastilha {
    min-height: 7px;
    height: 7px;
    margin: 3px 0 0 !important;
    padding: 0 !important;
    border-radius: 4px !important;
    overflow: hidden;
    font-size: 0 !important;
    gap: 0 !important;
  }
  .calendario.mes .pastilha > * { display: none !important; }
  .calendario.mes .faixa-data { font-size: 8.5px !important; padding: 1px 3px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .calendario.mes .dia-mais { display: none !important; }

  /* Faixas de numeros e filtros que nao quebravam. */
  .segmentado { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .segmentado::-webkit-scrollbar { display: none; }

  /* Botoes principais: alvo de toque confortavel. */
  .botao-principal, button.principal, .cabeca-tela button, .acoes > button { min-height: 42px; }
}

/* ---- 4. Celular pequeno ---- */
@media (max-width: 380px) {
  :root { --page-padding: 10px; }
  main { padding-left: 10px !important; padding-right: 10px !important; }
  .cartao { padding: 14px; }
  .mobile-actions { flex-direction: column; }
  .mobile-actions > * { width: 100%; }
  .calendario.mes .dia { min-height: 54px !important; }
}

/* ---- 5. Tela deitada e baixa (celular na horizontal) ---- */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1100px) {
  aside.lateral nav.menu { overflow-y: auto; }
  .lateral .logo { max-height: 36px !important; }
}

/* ---- 6. Acessibilidade e movimento ----
   Quem pede "reduzir movimento" no sistema fica sem animacao — menos na
   boas-vindas (.bv), que roda sempre, a pedido do dono. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *:not(.bv):not(.bv *),
  *:not(.bv):not(.bv *)::before,
  *:not(.bv):not(.bv *)::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}