/* ============================================================================
   VATSE — fundação de leitura e toque
   ============================================================================

   Carregada DEPOIS das folhas de cada vertical, em todo layout (públicas dos 22
   tenants, painel do dono e admin). Ela não redesenha nada: corrige o que
   impedia usar o produto no celular.

   Os quatro defeitos que originaram este arquivo, medidos em 390px de largura:

   1. TEXTO ILEGÍVEL. A escala foi desenhada em rem com valores muito baixos
      (0.5–0.8rem). Com raiz de 16px, a mediana do texto de corpo ficava entre
      9,8px e 13,4px, e o mínimo em 7,8px. Aqui a raiz sobe em telas pequenas,
      então texto E espaçamento crescem juntos e a proporção do desenho é
      preservada.

   2. ZOOM SOZINHO AO TOCAR NUM CAMPO. O iOS dá zoom em qualquer campo com
      fonte menor que 16px. Todos estavam menores.

   3. O SCROLL VAZAVA. Rolar dentro do menu lateral movia a página de fundo,
      porque faltava conter o encadeamento de rolagem.

   4. CONTROLES ILEGÍVEIS NO MODO ESCURO. Sem `color-scheme` declarado, o
      Safari em modo escuro pinta campos e selects com fundo escuro sobre uma
      página clara, e o texto some.
   ========================================================================= */

/* ---- 1. Escala de leitura --------------------------------------------- */

/* A raiz cresce conforme a tela encolhe. Parece invertido e não é: no celular
   a distância do olho é menor, mas a área é muito menor, e o desenho foi feito
   com uma escala que só se sustenta em monitor. */
/* O `!important` aqui é deliberado e é o único do bloco de escala. Várias
   páginas declaram a própria raiz depois desta folha (o construtor monta HTML
   completo, com `<style>` próprio), e sem ele o piso valeria em umas telas e
   não em outras — que é pior do que não ter piso, porque parece resolvido. */
/* A base é 17,5px e não os 16px do navegador. O piso do projeto é 0,80rem, e
   sobre 16px isso dá 12,8px: abaixo do que se pede para ler. Sobre 17,5px dá
   exatamente 14px. Foi essa a queixa original, e ela veio do monitor, antes
   ainda de o telefone entrar na conversa. */
html { font-size: 17.5px !important; }

@media (max-width: 430px) {
    html { font-size: 18px !important; }
}

/* ---- 2. Campos: nunca menos de 16px em telas de toque ------------------ */

/* Regra do iOS, não preferência de gosto: abaixo de 16px o Safari aplica zoom
   ao focar, a página desalinha e o visitante precisa fechar o teclado e
   reposicionar tudo à mão. */
@media (max-width: 900px) {
    input,
    select,
    textarea,
    .sc-input,
    .adm-input,
    [contenteditable="true"] {
        font-size: max(16px, 1rem) !important;
    }

    /* Alvo de toque: o mínimo que uma pessoa acerta sem ampliar. */
    button,
    .btn,
    [role="button"],
    input[type="submit"],
    input[type="button"],
    a.sc-btn,
    a.btn {
        min-height: 44px;
    }

    /* A regra acima só cuida da ALTURA, e sobrou metade do problema.
       Medido nas 25 superfícies comerciais, a 390 e a 768: os pontos dos
       carrosséis tinham 8 px de largura (44 de altura, pela regra acima), e os
       links de ação que não vestem .sc-btn tinham 22 a 25 px de altura. Entre
       eles estavam a chamada de compra da tabela de planos e os links de "Ver
       na demonstração", que é onde a pessoa decide. Alvo que o dedo não acerta
       é ação que não existe. */

    /* Os pontos dos carrosséis são tratados na folha de cada componente: o
       desenho deles é identidade (cor, formato, o que a versão ativa faz) e
       identidade não se centraliza. O que é comum, e mora aqui, é a régua.

       Link de ação que não é botão desenhado. A altura vem do espaço que já
       existia embaixo dele: o `margin` vira `padding`, então o ritmo da coluna
       não muda e a área dobra. Link dentro de frase fica de fora, porque ele
       acompanha a linha do texto e engordá-lo quebraria o parágrafo. */
    .sc-footer-link,
    .sc-pricing-cta,
    .sc-sys-gallery-cta,
    .brb-viewall {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
    }

    .sc-footer-link {
        display: flex;
        margin-bottom: 4px;
    }
}

/* ---- 3. Rolagem contida ----------------------------------------------- */

/* Sem isto, chegar ao fim de uma lista rolável repassa o movimento para a
   página de trás: o menu "gira a página inteira", que foi como o defeito
   apareceu para quem usou. */
:where(
    .admin-sidebar-nav,
    #admin-sidebar,
    .sc-chat-panel,
    .sc-chat-body,
    .vatse-chat-body,
    [data-scroll-contain]
) {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* O menu lateral aberto no celular precisa rolar sozinho, inteiro. */
@media (max-width: 900px) {
    #admin-sidebar {
        max-height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* Enquanto um painel sobreposto está aberto, o fundo não se move. A classe é
   posta pelo JS, e a posição fixa preserva a rolagem de onde a pessoa estava. */
body.vatse-scroll-travado {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

/* ---- 4. Modo escuro do sistema ---------------------------------------- */

/* `color-scheme` diz ao navegador com que paleta pintar o que ELE desenha:
   campo, select, barra de rolagem, seletor de data. Sem a declaração, o Safari
   em modo escuro pinta esses controles de escuro dentro de uma página clara, e
   o texto digitado fica preto sobre preto. */
/* Nenhuma página do projeto tem desenho que responda a `prefers-color-scheme`:
   cada uma é clara ou escura por decisão própria, declarada em `data-mode`.
   Então o esquema não é uma preferência a consultar, é um fato a declarar, e
   declará-lo é o que impede o Safari de pintar controle escuro em página clara.
   O padrão é claro porque é o que a maioria das telas é; quem se declara
   escura corrige a si mesma. */
:root {
    color-scheme: light;
}

:root:is([data-mode="dark"], [data-theme="dark"]),
:root:has(> body[data-mode="dark"]),
:root:has(> body.dark-mode) {
    color-scheme: dark;
}

/* Rede de segurança para o campo de formulário: mesmo que uma página futura
   esqueça de se declarar, o texto digitado continua legível porque a cor vem
   do par de sistema (Field/FieldText), que combina entre si por definição. */
@media (prefers-color-scheme: dark) {
    :where(input, select, textarea):not([data-tema-proprio]) {
        background-color: Field;
        color: FieldText;
    }
}

/* ---- 5. Nada some fora da tela ---------------------------------------- */

@media (max-width: 900px) {
    /* `clip` e nao `hidden`. Os dois cortam o que vaza na horizontal, mas
       `hidden` transforma o corpo em contêiner de rolagem, e todo cabeçalho
       `sticky` para de grudar: no celular o botão do menu sumia ao rolar e a
       pessoa tinha de voltar ao topo da página para chegar no menu. `clip`
       corta sem criar contêiner, e o `sticky` continua valendo.
       Sem suporte a `clip`, é melhor uma barra de rolagem horizontal do que um
       cabeçalho que foge: por isso não há alternativa com `hidden`. */
    @supports (overflow-x: clip) {
        html, body { max-width: 100%; overflow-x: clip; }
    }

    :where(table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Onde a página já resolveu isso, ela manda. A região dela é rotulada e
       alcançável pelo teclado; a tabela virada em bloco não é nenhum dos dois.
       Duplicar os dois roladores ainda faz o de fora parar de rolar. */
    :where([role="region"], [data-agenda-day-scroll], [class*="overflow-x"]) :where(table) {
        display: table;
        overflow-x: visible;
    }
}

/* ------------------------------------------------------------------
   Legenda de grafico
   O ApexCharts escreve font-size no atributo style em tempo de execucao,
   entao nao ha folha do projeto para corrigir: so um seletor com peso
   maior alcanca. A legenda e texto de INTERFACE (a pessoa le para saber
   qual serie e qual), diferente do rotulo de eixo dentro do SVG, que
   segue a convencao da area e fica como esta.
   ------------------------------------------------------------------ */
.apexcharts-legend-text,
.apexcharts-legend-series span,
.apexcharts-legend-series {
    font-size: max(14px, 0.8rem) !important;
}


/* ------------------------------------------------------------------
   Filho de grade e de caixa flexivel nao empurra a pagina
   Item de `grid` e de `flex` nasce com `min-width: auto`, e por isso se
   RECUSA a encolher abaixo do proprio conteudo: um cartao de grafico com
   seis barras, uma linha de filtros ou um titulo longo empurram o cartao
   para fora da tela em vez de se ajustarem. `min-width: 0` devolve a
   permissao de encolher, que e o que faz o conteudo caber.
   So no telefone: no desktop a largura sobra e a regra nao muda nada.
   Excecao: numa linha que quebra (`flex-wrap`), o campo que declarou um
   `min-w-[...]` fica com ele. Zerado, o campo de busca dos chamados
   encolhia para 90px ao lado do select e cortava o proprio texto; com a
   largura minima ele desce para a linha de baixo, que e o que o autor quis.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
    .admin-content :where(.grid, .flex:not(.flex-wrap)) > *,
    .admin-content :where(.flex-wrap > :not([class*="min-w-"])) {
        min-width: 0;
    }
}

/* ------------------------------------------------------------------
   Area de toque dentro do painel
   A WCAG 2.2 pede 24px de alvo. Os botoes ja passam; quem nao passava eram
   os links de texto dentro de tabela (nome do cliente, "ver agenda") e os
   rotulos de caixa de marcar, entre 18px e 23px de altura. Padding vertical
   em elemento em linha cresce a area CLICAVEL sem empurrar a linha de baixo,
   entao o desenho da tabela nao muda: so fica possivel acertar com o dedo.
   Botao fica de fora porque ja tem a sua propria altura.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
    .has-horizontal-overflow {
        overscroll-behavior-inline: contain;
        scrollbar-color: var(--adm-primary, #c2410c) var(--adm-input-bg, #f3f6fa);
    }

    .has-horizontal-overflow > .barber-table-scroll-hint {
        position: sticky;
        left: 0.75rem;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        width: max-content;
        margin: 0.5rem 0.75rem 0.35rem;
        padding: 0.35rem 0.65rem;
        border: 1px solid color-mix(in srgb, var(--adm-primary, #c2410c) 28%, transparent);
        border-radius: 999px;
        background: var(--adm-surface, #fff);
        color: var(--adm-text-muted, #5b6472);
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
        font-size: max(14px, 0.8rem);
        font-weight: 650;
        line-height: 1.2;
        pointer-events: none;
    }

    .has-horizontal-overflow > .barber-table-scroll-hint::after {
        content: '\2192';
        color: var(--adm-primary, #c2410c);
        font-size: 1rem;
    }

    .has-horizontal-overflow:focus-visible {
        outline: 2px solid var(--adm-primary, #c2410c);
        outline-offset: -2px;
    }

    .admin-content a:not(.adm-btn):not([class*="btn"]):not([class*="badge"]) {
        padding-block: 3px;
    }

    /* A caixa nem sempre e filha direta do rotulo: em varias telas ela vem
       dentro de um span de estilo. Por isso descendente, e nao filho. */
    .admin-content label:has(input[type="checkbox"]),
    .admin-content label:has(input[type="radio"]) {
        padding-block: 3px;
    }

    /* Botoes com icone podem nascer da largura do glifo: 14px a 23px. O
       seletor tambem alcanca controles com texto em no adjacente, pois
       :only-child considera apenas filhos-elemento; ambos precisam da area
       minima de toque de 44px. */
    .admin-content button:has(> i:only-child),
    .admin-content a:has(> i:only-child) {
        min-width: 44px;
        min-height: 44px;
    }

    /* O "x" de fechar media 24px de largura, exatamente no limite da norma.
       Fechar e a saida de emergencia do modal: tem de ser facil de acertar. */
    .barber-modal-close,
    .stk-modal-close {
        min-width: 44px;
        min-height: 44px;
    }

    /* Mesma regra do lado publico: links de texto das telas de conta e da
       agenda ficavam entre 17px e 22px. */
    .ba-link,
    .ba-bottom a,
    .vb-booking a[href*="meus-agendamentos"] {
        display: inline-block;
        padding-block: 4px;
    }
}

/* ------------------------------------------------------------------
   Tamanhos escritos direto na classe (`text-[0.65rem]`, `text-[11px]`)
   O Tailwind gera esses valores exatamente como pedidos, e configuracao
   nenhuma os alcanca: valor arbitrario nao passa pela escala do tema. Como
   esta folha carrega por ultimo, e aqui que eles sobem ao piso.
   A lista e finita de proposito: so entram os que ficam ABAIXO de 14px.
   Um valor novo abaixo do piso precisa ser somado aqui, e a varredura de
   `storage/qa-barber` acusa quando isso e esquecido.
   ------------------------------------------------------------------ */
.text-\[0\.5rem\],
.text-\[0\.55rem\],
.text-\[\.6rem\],
.text-\[0\.6rem\],
.text-\[0\.62rem\],
.text-\[\.65rem\],
.text-\[0\.65rem\],
.text-\[0\.68rem\],
.text-\[0\.6875rem\],
.text-\[0\.7rem\],
.text-\[0\.72rem\],
.text-\[0\.75rem\],
.text-\[\.45rem\],
.text-\[6px\],
.text-\[8px\],
.text-\[9px\],
.text-\[10px\],
.text-\[11px\],
.text-\[12px\],
.text-\[13px\] {
    font-size: max(14px, 0.8rem);
}

/* `small` vale 0,8 do elemento em volta: encadeado dentro de um rotulo
   ja reduzido, chega a 11px. O piso e absoluto para nao depender disso. */
small {
    font-size: max(14px, 0.8rem);
}

/* ------------------------------------------------------------------
   Tabela larga no telefone rola dentro do próprio cartão
   Uma tabela de sete colunas não cabe em 390px e, sem um contêiner com
   overflow, quem rola é a página inteira: o botão de menu some para a
   esquerda e o visitante perde a referência. Nem toda tela envolveu a
   tabela em `.overflow-x-auto`; a regra pega o PAI direto de qualquer
   tabela e o transforma no contêiner de rolagem. Onde o envelope já existe
   ela é redundante e inofensiva.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
    main :has(> table),
    [role="main"] :has(> table) {
        /* !important porque o envelope costuma ser .overflow-hidden (cantos
           arredondados), que venceria :has() por especificidade e deixaria a
           página rolando de lado do mesmo jeito. */
        overflow-x: auto !important;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }
}

/* ------------------------------------------------------------------
   Painel do sino de avisos nos layouts com sino proprio (barbearia,
   saas e painel do usuario). Ele ficava ancorado com right:0 no botao do
   sino, que nao esta na borda da tela (o botao de tema vem depois), e com
   largura minima de 360 a 400px: de 360 a 430px a caixa abria de -73px a
   287px, com o comeco das mensagens fora da tela (QA-01; QA-02 barber,
   div#barber-notifications-panel). A largura vem da variavel que cada
   layout declara; abaixo de 640px o painel se prende as margens da tela
   em vez de ao botao. O sino generico (components/project-notification-bell)
   ja se contem por JS no main e nao usa esta classe.
   ------------------------------------------------------------------ */
.adm-notif-panel {
    width: min(var(--adm-notif-w, 460px), calc(100vw - 2rem));
}

@media (max-width: 639px) {
    .adm-notif-panel {
        position: fixed;
        left: .75rem;
        right: .75rem;
        top: 5.5rem;
        width: auto;
        margin-top: 0;
        max-height: calc(100dvh - 6.5rem);
    }
}

/* ------------------------------------------------------------------
   Rotulo so para leitor de tela dentro de celula ("Acoes" na coluna de
   botoes). O .sr-only e absolute e o bloco de contencao dele ficava FORA do
   rolador da tabela: a caixa de 1px ia parar a 550px no telefone e empurrava
   a largura do documento (estoque da barbearia, 195px de rolagem lateral,
   QA-01). Com a celula posicionada, ele fica preso dentro do rolador.
   ------------------------------------------------------------------ */
th:has(> .sr-only),
td:has(> .sr-only) {
    position: relative;
}