/* AF CRM - enquadramento em tablet (iPad). Versao 3 - 02/09/2026.
 *
 * O que realmente empurrava o app para o lado no iPad era o CABECALHO: com a
 * barra lateral recolhida sobra 756px de largura util num iPad de 820px, e o
 * cabecalho pede 1018px (busca 256 + telefone/Conectado/AF Advocacia 381 +
 * dois botoes + nome e e-mail do usuario 200). Como esses textos tem
 * white-space:nowrap, nada encolhia: a pagina inteira ficava 265px mais larga
 * que a tela, ganhava rolagem horizontal e o conteudo deslizava para tras da
 * barra lateral - por isso "Dashboard" virava "board" e "PUBLICACOES" virava
 * "COES".
 *
 * A correcao aqui NAO esconde o estouro: faz o cabecalho caber, escondendo o
 * que e dispensavel em tela pequena. Medido num iframe de 768 / 820 / 1024 /
 * 1180px, com o menu recolhido e aberto: em todos os casos o cabecalho passou
 * a caber exatamente na largura util e a pagina deixou de rolar na horizontal.
 *
 * Acima de 1180px nada disso se aplica - o desktop fica exatamente como esta.
 */

@media (min-width: 768px) and (max-width: 1180px) {

  /* 1. cabecalho: fora o que nao cabe -------------------------------------- */

  /* "• AF Advocacia" ao lado do telefone */
  header span[class*="text-[#6b7280]"] { display: none !important; }

  /* nome e e-mail ao lado do avatar (o avatar continua, e ele que abre o menu) */
  header div[class*="leading-tight"] { display: none !important; }

  /* a busca encolhe e dispensa o atalho ⌘K */
  header div[class*="md:max-w-md"] { max-width: 210px; overflow: hidden; }
  header div[class*="md:max-w-md"] button { min-width: 0; }
  header div[class*="md:max-w-md"] kbd { display: none; }

  /* nada no cabecalho pode empurrar: encolhe e corta com reticencias */
  header button { min-width: 0; }
  header span[class*="font-semibold"][class*="text-[#374151]"] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 2. com o menu lateral ABERTO sobram 240px a menos: aperta mais ---------- */

  [data-state="expanded"] ~ main header div[class*="bg-[#e8f5e9]"] { display: none !important; }
  [data-state="expanded"] ~ main header span[class*="font-semibold"][class*="text-[#374151]"] { display: none !important; }
  [data-state="expanded"] ~ main header div[class*="md:max-w-md"] { max-width: 170px; }

  /* 3. WhatsApp: lista mais estreita, conversa maior ------------------------ */

  main aside[class*="md:w-[350px]"] { width: 250px !important; }

  /* balao de mensagem aproveita melhor a coluna estreita (era 58%) */
  main div[style*="min(560px, 58%)"] { max-width: min(560px, 78%) !important; }

  /* 4. rede de seguranca: se algo novo estourar, a pagina nao desliza ------- */

  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip; /* nao quebra position:sticky (Safari 16+) */
  }
}

/* 5. Agenda: o calendario nao cabe em 1/3 da largura ---------------------- */

/* o card do calendario recebia 219px, e o mes precisa de 237px (7 celulas de
   2rem + padding) - a coluna de sabado ficava cortada. Em tablet o calendario
   passa a ocupar a linha inteira e a lista de vencimentos vem abaixo. */
@media (min-width: 768px) and (max-width: 1180px) {

  main div[class*="md:grid-cols-3"]:has(.rdp-root) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* navegador antigo, sem :has(): ao menos encolhe as celulas para caber */
  @supports not (selector(:has(*))) {
    main .rdp-root { --cell-size: 1.6rem; }
  }

  /* 6. Financeiro: a linha de filtros em 5 colunas ------------------------- */

  /* cada coluna ficava com 124px e o campo de data pede 138px: as datas
     invadiam o campo ao lado. Duas colunas resolvem com folga. */
  main div[class*="md:grid-cols-5"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  main input[type="date"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}