/**
 * Ajustes de componente do painel do SurfApp.
 *
 * Separado de `surfapp-palette.css` de proposito: aquele arquivo so declara
 * variaveis de cor (e o que `color-adjustments.css` do tema consome), este
 * mexe em componentes. Quem for trocar a marca mexe aqui; quem for trocar a
 * cor mexe la.
 *
 * A referencia visual e o template oficial do Tabler: superficies lisas,
 * bordas de 1px, sombra quase imperceptivel e nenhum efeito decorativo.
 */

/* ---------------------------------------------------------------------------
   Marca

   Os arquivos vem do kit oficial (docs/mockups/surfapp_kit_marca), gerados por
   `php artisan surfapp:build-brand-assets` em public/images/brand.

   Escala: o logotipo horizontal tem proporcao 645x195 (3.3:1). A altura e
   fixada e a largura acompanha (`width: auto` + `object-fit: contain`), com
   `max-width` de guarda para o caso de a arte ser trocada por uma mais larga:
   sem isso, um logo novo empurraria o menu do usuario para fora da barra.
   --------------------------------------------------------------------------- */

.surf-brand-logo {
    height: 2.1rem;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
}

/* O tema envolve o logo num `<a class="h2 mb-0">`. O tamanho de fonte e o
   line-height desse `h2` criam espaco morto acima e abaixo da imagem e
   desalinham a marca em relacao ao menu do usuario. Zerar e transformar o
   anchor em flex resolve o alinhamento vertical.

   O recuo vertical e a folga em volta do logotipo DENTRO da faixa: como a faixa
   ja tem altura minima propria, 0.25rem basta para o logo nao encostar na borda
   e mantem o elemento (34px de arte + 8px de folga = 42px) abaixo do piso da
   faixa, sem esticar o cabecalho. */
.navbar .navbar-brand,
header a.h2 {
    display: flex;
    align-items: center;
    font-size: inherit;
    line-height: 1;
    padding-block: 0.25rem;
}

/* Simbolo quadrado, usado na barra do celular. */
.surf-brand-mark {
    height: 1.9rem;
    width: 1.9rem;
    object-fit: contain;
    display: block;
}

/* Abaixo de lg a faixa da marca some e vale a barra mobile. */
@media (max-width: 575.98px) {
    .surf-brand-mark {
        height: 1.7rem;
        width: 1.7rem;
    }
}

/* Versao reversa (branca) da marca: fica no HTML, mas nunca aparece.

   O painel nao tem mais modo escuro (ver `config/backpack/theme-tabler.php`),
   entao a troca clara/escura que existia aqui virou codigo morto e saiu. A
   REGRA ABAIXO PRECISA FICAR: `project_logo`, em `config/backpack/ui.php`, e uma
   string unica que ainda emite as DUAS artes -- a clara e a reversa -- e sem
   este `display: none` os dois logotipos apareceriam lado a lado. O mesmo vale
   para o simbolo da barra do celular, em `layouts/partials/mobile_toggle_btn`.

   Nao custa banda: navegador atual adia o download de imagem em `display: none`. */
.surf-brand-logo--dark {
    display: none;
}

/* ---------------------------------------------------------------------------
   Escola em que o usuario esta operando (inc/topbar_left_content)

   No painel quem lidera e o SurfApp, mas trabalhar na escola errada e um erro
   caro e silencioso. O bloco fica logo a direita da assinatura, discreto: texto
   pequeno, sem cor de destaque, para informar sem disputar com a marca.
   --------------------------------------------------------------------------- */

/* ARMADILHA: o Tabler declara `.navbar-nav .nav-item { flex-direction: column }`
   (tabler.min.css). Este bloco e um `.nav-item` dentro de um `.navbar-nav`, e
   aquele seletor tem especificidade 0,2,0 -- vence a utilitaria `.d-flex` do
   Blade, que so liga `display: flex` e nao mexe na direcao. Resultado: logo e
   texto empilhavam, o bloco ia de ~28px para 61px e sozinho definia a altura da
   primeira faixa do cabecalho (70px para um logotipo de 34px).

   Por isso o seletor abaixo qualifica com `.navbar-nav .nav-item` (0,3,0) em vez
   de so `.surf-topbar-tenant` (0,1,0): sem isso a regra do tema continua
   ganhando. Nao trocar por `!important` -- a ordem de cascata resolve. */
.navbar-nav .nav-item.surf-topbar-tenant {
    flex-direction: row;
    gap: 0.5rem;
    min-width: 0; /* deixa o nome truncar em vez de esticar a barra. */

    /* Folga ate o menu do usuario. Quem separava os dois era o botao de modo de
       cor, que ficava no meio; sem ele o nome da escola encostava no avatar
       (medido: 0px entre um e outro). O recuo e menor no celular, onde a mesma
       barra ainda carrega hamburguer e simbolo da marca. */
    margin-inline-end: 0.5rem;
}

@media (min-width: 992px) {
    .navbar-nav .nav-item.surf-topbar-tenant {
        margin-inline-end: 1rem;
    }
}

/* Logomarca enviada pela escola. Altura fixa e largura livre: cada escola sobe
   uma arte de proporcao diferente, e esticar deformaria o logo do cliente. */
.surf-topbar-tenant__logo {
    height: 22px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    display: block;
}

.surf-topbar-tenant__texto {
    min-width: 0;
    line-height: 1.15;
}

.surf-topbar-tenant__rotulo {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tblr-secondary);
}

.surf-topbar-tenant__nome {
    display: block;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--tblr-body-color);
}

/* Na barra do celular disputam espaco hamburguer, simbolo, alternador de tema e
   menu do usuario. O nome encolhe em vez de empurrar o resto para fora. */
@media (max-width: 991.98px) {
    .surf-topbar-tenant__nome {
        max-width: 8rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 400px) {
    .surf-topbar-tenant__nome {
        max-width: 5.5rem;
    }
}

/* ---------------------------------------------------------------------------
   Tela de login e demais telas de autenticacao

   O tema imprime o mesmo `project_logo` da barra superior dentro de
   `.auth-logo-container`, num `.page-center`. Duas correcoes sao necessarias:

   1. o logo e `display: block`, e bloco dentro de div centralizada por
      `text-align` continua colado a esquerda. `margin-inline: auto` centraliza;
   2. 2.1rem e a altura da barra superior, apertada demais para uma tela cujo
      unico assunto e a marca. Aqui ela cresce e o `max-width` acompanha, ainda
      preso ao `container-tight` do tema.
   --------------------------------------------------------------------------- */

.page-center .surf-brand-logo,
.auth-logo-container .surf-brand-logo {
    height: 3.5rem;
    max-width: 100%;
    margin-inline: auto;
}

/* O tema aplica `display-6` no wrapper: um `font-size` enorme que, com o
   line-height correspondente, abre um vao entre a marca e o cartao de login. */
.auth-logo-container {
    font-size: inherit;
    line-height: 1;
    margin-bottom: 2rem;
}

/* ---------------------------------------------------------------------------
   Barra superior (layout horizontal, duas faixas)
   --------------------------------------------------------------------------- */

/* Fundo sangrando na tela inteira, conteudo alinhado a grid.

   O tema coloca `container-xxl` no wrapper que envolve as DUAS faixas, o que
   prende tambem o FUNDO e a borda na largura da grid: a barra parecia um
   cartao centralizado em vez de um cabecalho. Aqui o wrapper passa a ocupar
   100% da largura, e o alinhamento do conteudo fica por conta dos
   `container-xxl` que o tema ja coloca DENTRO de cada faixa, os mesmos usados
   pelo `<main>` da pagina. Assim marca, menu e conteudo compartilham a mesma
   coluna. */
.double-top-bar.container-xxl,
.single-top-bar.container-xxl {
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* A faixa da marca tem `container-xxl` aninhado dentro de outro `container-xxl`
   no tema. O de dentro somaria um segundo gutter e deslocaria a marca em
   relacao ao conteudo da pagina. */
.double-top-bar .container-xxl .container-xxl,
.single-top-bar .container-xxl .container-xxl {
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* O `px-3` que o tema aplica na faixa 1 somaria mais um recuo por fora do
   container. Zerado aqui (seletor mais especifico que a utilitaria do
   Bootstrap, sem precisar de !important). */
.double-top-bar > header.px-3,
.single-top-bar > header.px-3 {
    padding-left: 0;
    padding-right: 0;
}

/* O tema aninha um `container-fluid` dentro do `<main class="container-xxl">`,
   e esse container soma um gutter proprio: o conteudo ficava recuado meio
   gutter a mais do que a marca e o menu. Zerar aqui faz cabecalho e conteudo
   compartilharem exatamente a mesma coluna. */
.page-body > main > .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

/* ALTURA DO CABECALHO
   -------------------
   O cabecalho ocupava 161px (faixa 1 com 70px, faixa 2 com 91px) para mostrar um
   logotipo de 34px e o menu. Tres fontes de espaco morto, todas medidas no
   navegador:

   1. o bloco do contexto empilhado pelo `flex-direction: column` do Tabler (61px
      onde cabiam 28px) -- corrigido la em cima, e o que sozinho segurava a
      faixa 1 em 70px;
   2. o `padding` de 0.25rem que a classe `.navbar` poe nas DUAS faixas, somado a
      altura minima que cada faixa ja declara: recuo cobrado duas vezes;
   3. `min-height: 3.5rem` (56px) no `.navbar` interno da faixa 2, que impedia a
      faixa de encolher quando o menu cabe em uma linha so.

   Depois: 49px na faixa 1 e 41px na faixa 2 com o menu em uma linha (90px de
   cabecalho, a partir de ~1400px de viewport), ou 78px com o menu em duas
   (127px de cabecalho). Nenhum valor abaixo e chutado: sao pisos, nao tetos --
   quem manda e o conteudo. */

/* Faixa 1: marca, contexto e menu do usuario. */
.double-top-bar > header:first-child {
    background-color: var(--tblr-bg-surface);
    border-bottom: 1px solid var(--tblr-border-color);

    /* A classe `.navbar` do tema traz `min-height: 3.5rem` e `padding: 0.25rem`:
       56px de piso mais 8px de recuo, para uma faixa cujo item mais alto tem
       42px. Os dois sao zerados aqui e o piso real vai para o container interno,
       logo abaixo. */
    min-height: 0;
    padding-block: 0;
}

/* ARMADILHA: o piso NAO pode ficar no `<header>`. Ele e um bloco, e `min-height`
   em bloco nao estica o filho -- o conteudo fica colado no topo e sobra um vao
   morto embaixo (medido: 5px, com marca, contexto e avatar 3px acima do centro
   da faixa). O piso vai no container interno, que o Bootstrap ja entrega como
   `display: flex; align-items: center`: ai a altura minima e a centralizacao
   vertical saem da mesma regra. */
.double-top-bar > header:first-child > .container-xxl {
    min-height: 3rem;
}

/* Faixa 2: os grupos de menu. Fundo levemente distinto da primeira, para as
   duas linhas nao virarem um bloco unico. */
.double-top-bar .navbar-expand-lg.top {
    background-color: var(--tblr-bg-surface);
    border-bottom: 1px solid var(--tblr-border-color);
    box-shadow: 0 1px 2px rgba(10, 38, 56, 0.04);
}

/* O `.navbar` interno da faixa 2 traz `min-height: 3.5rem` do Tabler, pensado
   para uma barra com marca e avatar. Aqui dentro so ha links de menu de 2.125rem:
   os 56px viravam piso artificial e a faixa nunca encolhia. Sem o piso, a altura
   passa a ser exatamente a das linhas de menu mais o recuo. */
.double-top-bar .navbar-expand-lg.top .navbar {
    min-height: 0;
    padding-block: 0.2rem;
}

/* `min-height` no lugar de `padding` vertical maior: da alvo de clique de 34px
   sem inflar a faixa, e mantem as duas linhas do menu com a mesma altura.

   O recuo lateral cai de 0.75rem para 0.6rem. Nao e aperto: o texto continua com
   14px e o item ganha 4.8px de folga interna de cada lado. Em compensacao a soma
   dos onze grupos cai de 1325px para ~1272px, e passa a caber em UMA linha no
   `container-xxl` cheio (1296px de area util, telas a partir de ~1400px), onde
   antes sempre quebrava em duas. Abaixo disso a quebra continua valendo -- e o
   comportamento desejado, melhor do que cortar item ou rolar de lado. */
.double-top-bar .navbar-nav .nav-link {
    border-radius: 0.5rem;
    padding: 0.35rem 0.6rem;
    min-height: 2.125rem;
    font-weight: 500;
}

.double-top-bar .navbar-nav .nav-link:hover {
    background-color: var(--tblr-gray-100);
}

.double-top-bar .navbar-nav .nav-item.active > .nav-link,
.double-top-bar .navbar-nav .nav-link.active {
    background-color: var(--tblr-primary-bg-subtle);
    color: var(--tblr-primary-text);
    font-weight: 600;
}

/* Com nove grupos, em telas medias o menu chega perto do limite. Permitir a
   quebra em duas linhas e melhor do que cortar item ou gerar rolagem lateral. */
.double-top-bar .navbar-nav {
    flex-wrap: wrap;
    row-gap: 0.15rem;
}

.double-top-bar .dropdown-menu {
    border: 1px solid var(--tblr-border-color);
    box-shadow: 0 4px 16px rgba(10, 38, 56, 0.1);
}

/* Barra do celular: marca ao lado do hamburguer. */
.surf-brand-mobile {
    line-height: 1;
}

/* ---------------------------------------------------------------------------
   Superficies
   --------------------------------------------------------------------------- */

/* O tema aplica sombra media nos cartoes; o Tabler usa uma borda fina e uma
   sombra minima. Isso e o que mais aproxima a aparencia do template oficial. */
.card {
    border: 1px solid var(--tblr-border-color);
    box-shadow: 0 1px 2px rgba(29, 39, 59, 0.04);
}

.card:hover {
    box-shadow: 0 1px 2px rgba(29, 39, 59, 0.04);
}

/* Cabecalho de cartao sem preenchimento cinza, como no template. */
.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--tblr-border-color);
}

/* ---------------------------------------------------------------------------
   Barra lateral e cabecalho
   --------------------------------------------------------------------------- */

/* Mantido para o caso de o layout voltar a ser vertical: o acabamento fica no
   CSS, nunca em `classes.sidebar` do config, onde o valor substituiria a lista
   inteira de classes e derrubaria `navbar navbar-vertical navbar-expand-lg`. */
.navbar-vertical.navbar-expand-lg {
    background-color: var(--tblr-bg-surface);
    border-right: 1px solid var(--tblr-border-color);
}

/* Rodape sem faixa cinza, tambem pelo CSS e nao pelo config. */
.footer.app-footer {
    background-color: transparent;
    border-top: 1px solid var(--tblr-border-color);
}

.navbar-vertical .navbar-nav .nav-link {
    border-radius: 0.5rem;
    margin: 0.05rem 0.5rem;
    padding-inline: 0.65rem;
}

/* Item ativo com fundo suave em vez de barra lateral colorida: e o
   comportamento do template do Tabler e evita o efeito de "borda dupla"
   quando o item tem submenu. */
.navbar-vertical .navbar-nav .nav-link.active,
.navbar-vertical .navbar-nav .nav-item.active > .nav-link {
    background-color: var(--tblr-primary-bg-subtle);
    color: var(--tblr-primary-text);
    font-weight: 600;
}

.navbar-vertical .navbar-nav .nav-link:hover {
    background-color: var(--tblr-gray-100);
}

/* Titulo de grupo do menu (Agenda, Comercial, Evolucao...). */
.navbar-vertical .navbar-nav .nav-item .dropdown-menu {
    border: 1px solid var(--tblr-border-color);
    box-shadow: 0 2px 8px rgba(29, 39, 59, 0.08);
}

.page-header {
    padding-block: 1.25rem;
}

/* ---------------------------------------------------------------------------
   Tabelas de listagem
   --------------------------------------------------------------------------- */

.table thead th {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tblr-secondary);
    border-bottom: 1px solid var(--tblr-border-color);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--tblr-gray-50);
}

/* ---------------------------------------------------------------------------
   Formularios e botoes
   --------------------------------------------------------------------------- */

.form-label {
    font-weight: 500;
    color: var(--tblr-gray-700);
}

.btn {
    font-weight: 500;
}

/* O Tabler nao usa botao em caixa alta. */
.btn,
.badge {
    text-transform: none;
}

/* ---------------------------------------------------------------------------
   Modo escuro: nao existe mais
   ---------------------------------------------------------------------------
   Havia aqui quatro regras `[data-bs-theme='dark'] ...` (cartao sem sombra,
   nome da marca clareado, hover e item ativo da barra lateral). Todas foram
   removidas por serem codigo morto: nenhum elemento do painel recebe mais
   `data-bs-theme='dark'`.

   Quem garante isso, e onde procurar se um dia o escuro voltar:

     - `config/backpack/theme-tabler.php`: `colorModes` so tem `light` e
       `showColorModeSwitcher` esta em `false`;
     - `resources/views/vendor/backpack/theme-tabler/inc/head.blade.php`: apaga a
       chave `colorMode` do localStorage antes do script bloqueante do tema;
     - `resources/views/vendor/backpack/theme-tabler/layouts/partials/
       light_dark_mode_logic.blade.php`: forca `data-bs-theme="light"` em todo
       elemento que traga o atributo, fixa `theme-light` no `<body>`, ignora
       `prefers-color-scheme` e deixa `window.colorMode` inerte.

   Os outros dois arquivos foram limpos junto: `surfapp-palette.css` nao declara
   mais o bloco de variaveis da paleta escura, e `surfapp-badges.css` nao tem
   mais as regras de etiqueta sobre superficie escura. Nao sobrou nenhum seletor
   `[data-bs-theme='dark']` no CSS do painel -- so estes comentarios, que existem
   para quem for reintroduzir o tema saber que precisa reescrever, e nao apenas
   reativar: os tons escuros foram embora com as regras.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Galeria da aula
   ---------------------------------------------------------------------------
   O card de midia precisa de altura previsivel: sem `aspect-ratio` a grade
   fica serrilhada porque foto retrato e paisagem se misturam no mesmo lote.
--------------------------------------------------------------------------- */

.surf-media-card {
    overflow: hidden;
}

.surf-media-thumb {
    align-items: center;
    aspect-ratio: 1;
    background: var(--surf-mint, #C2DFDB);
    display: flex;
    justify-content: center;
    position: relative;
}

.surf-media-thumb img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* Midia ainda na fila ou com falha: o lugar da miniatura mostra o estado, em
   vez de um quadrado vazio que parece defeito da tela. */
.surf-media-thumb__status {
    color: var(--surf-navy, #0A2638);
    font-size: .72rem;
    font-weight: 600;
    opacity: .7;
    padding: .5rem;
    text-align: center;
}

.surf-media-thumb__tag {
    background: rgba(10, 38, 56, .78);
    border-radius: 999px;
    bottom: .3rem;
    color: #fff;
    font-size: .65rem;
    left: .3rem;
    padding: .08rem .4rem;
    position: absolute;
}

.surf-media-thumb__check {
    left: .35rem;
    position: absolute;
    top: .35rem;
    z-index: 2;
}

/* ---------------------------------------------------------------------------
   Coluna de ações das listagens: pode quebrar linha.

   A listagem do Backpack aplica `white-space: nowrap` na tabela inteira, e com
   razão: data, valor e código não podem quebrar no meio. Só que a regra vale
   também para a ÚLTIMA coluna, a das ações — e ali o conteúdo são três ou
   quatro botões com texto ("Aprovar", "Recusar", "Comprovante"), que somados
   formam um bloco indivisível.

   O DataTables Responsive colapsa as colunas do meio para caber, mas a coluna
   de ações não é colapsável: ela é a âncora da linha. Nas larguras em que o
   colapso ainda não deu conta, esse bloco indivisível empurra a tabela para
   fora do cartão e o `body` ganha rolagem horizontal. Foi medido em 1280px e
   768px na tela de pagamentos de assinatura, com uma cobrança em análise (o
   único estado que mostra os três botões).

   A correção é local: só a última coluna volta a quebrar, e os botões viram
   uma linha que embrulha. Nada muda nas demais colunas, e a rolagem horizontal
   da tabela — que é desejada quando há muitas colunas — continua existindo.
--------------------------------------------------------------------------- */
/* `table.dataTable.crud-table` e não `.crud-table` sozinho: a regra que impõe o
   nowrap é `table.dataTable.nowrap td`, do CSS do DataTables, com
   especificidade (0,2,2). Um seletor de uma classe só perde a disputa e a
   correção não acontece — foi medido: a célula continuava `nowrap` com o
   arquivo carregado. Nada de `!important`: basta empatar em classes e ganhar
   no elemento. */
table.dataTable.crud-table td:last-child,
table.dataTable.crud-table th:last-child {
    white-space: normal;
}

/* Os botões embrulham como grupo, sem colar um no outro. `inline-flex` mantém
   a célula com a largura do conteúdo quando ele cabe — evita esticar a coluna
   de ações em telas largas, onde não havia problema nenhum. */
.crud-table td:last-child > .d-inline-block,
.crud-table td:last-child > form,
.crud-table td:last-child > a,
.crud-table td:last-child > .btn-group {
    vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   Indicador de aula no cabecalho (instrutor)

   A pergunta "tenho aula agora?" nao vale so no painel inicial: o instrutor
   passa a manha lancando chamada, abrindo ficha de aluno, vendo foto de aula.
   Uma etiqueta na barra superior responde sem exigir que ele volte ao
   dashboard, e desaparece quando nao ha nada de hoje para avisar — indicador
   permanente vira moldura e para de ser lido.

   Fica NESTE arquivo, e nao no `<style>` de `admin/partials/styles.blade.php`,
   porque a barra existe em toda tela do painel e aquele parcial so e incluido
   pelas telas customizadas. Num CRUD, a etiqueta sairia sem estilo nenhum.

   O texto entra por `App\Services\Booking\InstructorAgendaService::headline()`,
   com cache de 60s: este bloco e desenhado duas vezes por resposta (barra do
   desktop e barra do celular).
   --------------------------------------------------------------------------- */

.surf-headline {
    align-items: center;
    background: var(--tblr-primary-bg-subtle, #ddeff1);
    border: 1px solid var(--tblr-primary-border-subtle, #b3dade);
    border-radius: 999px;
    color: var(--tblr-primary-text-emphasis, #146973);
    display: inline-flex;
    font-size: .8rem;
    font-weight: 600;
    gap: .35rem;
    line-height: 1.4;
    max-width: 100%;
    padding: .2rem .65rem;
    text-decoration: none;
}

.surf-headline:hover,
.surf-headline:focus-visible {
    color: var(--tblr-primary-text-emphasis, #146973);
    filter: brightness(.97);
}

/* Aula acontecendo agora: mesmo tom de "atenção" das etiquetas de situação, e
   nao uma cor nova — o painel ja tem sete tons semanticos e um oitavo so para
   isto seria ruido. */
.surf-headline--warning {
    background: var(--tblr-warning-bg-subtle, #f6ecdc);
    border-color: var(--tblr-warning-border-subtle, #e6cfa8);
    color: var(--tblr-warning-text-emphasis, #7a5626);
}

.surf-headline--warning:hover,
.surf-headline--warning:focus-visible {
    color: var(--tblr-warning-text-emphasis, #7a5626);
}

/* O complemento ("Aula em grupo", "até 09:00") e contexto, nao a resposta. */
.surf-headline__detail {
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ARMADILHA do Tabler, a mesma de `.surf-topbar-tenant`: `.navbar-nav
   .nav-item { flex-direction: column }` (0,2,0) vence a utilitaria `.d-flex` e
   empilharia a etiqueta acima do que vier depois dela na barra. */
.navbar-nav .nav-item.surf-headline-item {
    align-items: center;
    flex-direction: row;
    margin-right: .5rem;
    min-width: 0;
}

/* Ate o `lg` a barra do celular divide espaco com a marca, o seletor de tema e
   o menu do usuario: sobra o essencial ("Aula agora", "Próxima 16:00"). */
@media (max-width: 991.98px) {
    .surf-headline__detail {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Tabela larga em tela estreita
   ---------------------------------------------------------------------------

   MEDIDO no navegador, a 390px, na listagem de vendas:

       TABLE.table              729px de largura
       DIV.table-responsive     357px de caixa
       BODY                     scrollWidth 738px contra 375px de viewport

   A tabela empurrava a PÁGINA INTEIRA para o lado: o sintoma não é a tabela
   cortada, é o cabeçalho, os cartões e os botões saindo da tela junto com ela.

   POR QUE `.table-responsive` NÃO RESOLVE AQUI. O `common.css` do Backpack traz:

       .table-responsive, .dataTables_wrapper, .card, .card-body,
       .container, .container-fluid { overflow: visible !important }

   É decisão do pacote, e tem motivo: o menu suspenso de cada linha das
   listagens de CRUD é filho do card, e com `overflow` ativo ele seria cortado
   na borda. Sobrescrever isso globalmente consertaria as tabelas novas e
   quebraria os menus de todas as listagens antigas — troca ruim.

   Então esta classe existe para as tabelas das telas próprias, que não têm
   menu suspenso dentro. Ela rola dentro da própria caixa e deixa o resto da
   página parado. O `!important` é o único jeito de vencer o do pacote, e está
   restrito a um seletor que só as nossas telas usam.

   `-webkit-overflow-scrolling` mantém a inércia no iOS, onde `auto` sozinho
   produz rolagem travada. */
.surf-table-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* =========================================================================
   Aviso de sistema em validação (faixa beta)
   -------------------------------------------------------------------------
   Primeiro filho do <body>, antes do `.page` — a marcação está em
   `resources/views/vendor/backpack/theme-tabler/layouts/horizontal.blade.php`,
   publicada só para poder abrir o <body> com essa linha.

   A faixa é do AMBIENTE, não da tela: sangra de ponta a ponta e não tem borda
   em cima nem embaixo. Com moldura ela viraria mais um `.alert` dentro do
   conteúdo, que é outra coisa.

   COR: o par de superfície de aviso do tema — `--tblr-warning-bg-subtle`
   (#f7eedf, amarelo pastel) com texto em `--tblr-warning-text` (#8a622b).
   Contraste medido: 4,73:1, acima do 4,5:1 da AA.

   O token SÓLIDO `--tblr-warning` (#c08a3e) foi tentado como fundo e
   reprovado: é o tom de ícone e filete, e como faixa larga fica pesado e
   derruba o contraste do texto.

   O QUE SEGURA A LEITURA DE "AVISO" com fundo suave e sem borda: o triângulo
   de atenção antes da frase e o peso 600. Sem eles, um retângulo pastel de
   ponta a ponta passa por faixa informativa neutra.

   A mesma regra, com os tokens de cada casa, está em public/css/site.css e
   public/css/portal.css. As três folhas são independentes de propósito.

   NADA A COMPENSAR: a barra do topo do layout horizontal é `.sticky-top`
   (`position: sticky`), ou seja, está no fluxo. A faixa a empurra para baixo
   em vez de ficar atrás dela, e ao rolar a barra gruda no topo como sempre.
   ========================================================================= */

.beta-aviso {
    /* Triângulo de atenção. MÁSCARA, e não imagem: quem pinta é
       `currentColor`, então o ícone acompanha a cor do texto e não há uma
       segunda definição de cor para manter em dia. `fill-rule='evenodd'` vaza
       a barra e o ponto de exclamação. */
    --beta-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M12 2.5 22.5 21 1.5 21 Z M10.9 9 h2.2 v6.5 h-2.2 Z M10.9 17.2 h2.2 v2 h-2.2 Z'/%3E%3C/svg%3E");

    /* Sem `max-width`, sem margem lateral: de x=0 a 100%. */
    width: 100%;
    padding: .5rem 1rem;
    /* O requisito é explícito: sem filete em cima nem embaixo. */
    border: 0;
    background: var(--tblr-warning-bg-subtle);
    color: var(--tblr-warning-text);
    text-align: center;
}

.beta-aviso__texto {
    /* Bootstrap dá `margin-bottom: 1rem` a todo `p`; aqui isso viraria um vão
       amarelo debaixo do texto. */
    margin: 0;
    font-size: .875rem;
    line-height: 1.4;
    font-weight: 600;
}

/* No `::before` do texto, e não no da faixa: assim o ícone e a primeira linha
   andam juntos quando a frase quebra no celular. */
.beta-aviso__texto::before {
    content: "";
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    margin-right: .45em;
    vertical-align: -.16em;
    background-color: currentColor;
    -webkit-mask: var(--beta-icone) center / contain no-repeat;
    mask: var(--beta-icone) center / contain no-repeat;
}

/* ---------------------------------------------------------------------------
   Titulo que quebra em duas linhas nao pode se sobrepor
   ---------------------------------------------------------------------------
   O `style.css` do Backpack traz `.page-body .container-fluid h2 { font-size:
   27px }` — uma regra de TAG, que sobrescreve o TAMANHO das classes utilitarias
   (`.h5`, `.h6`) mas nao traz `line-height` junto. A altura de linha continua
   vindo da classe: 0,75rem, ou seja 16px de caixa para 27px de letra.

   Em tela larga ninguem nota, porque o titulo cabe numa linha so. A 390px ele
   quebra em duas e as linhas se SOBREPOEM — encontrado na prova de
   responsividade em 03/09/2026, na tela de contrato e na de recebimentos, mas
   valendo para todo titulo de cartao do painel.

   A correcao mexe SO no espacamento. Reatribuir o tamanho pela classe seria o
   conserto "certo" e mudaria a altura de dezenas de titulos que a equipe ja
   desenhou em cima do valor efetivo — trocar aparencia estabelecida para
   corrigir um defeito de quebra e um preco que este bug nao cobra.

   `1.2` e o mesmo valor que o Tabler usa no bloco geral de headings.
   --------------------------------------------------------------------------- */

.page-body .container-fluid :is(h1, h2, h3, h4, h5, h6) {
    line-height: 1.2;
}

/* ---------------------------------------------------------------------------
   Alunos deste cliente: respiro do bloco final do cadastro de cliente
   ---------------------------------------------------------------------------
   O bloco (`resources/views/vendor/backpack/crud/fields/
   surfapp_students_repeatable.blade.php`) e o ultimo do formulario e junta
   quatro caixas de natureza diferente: o aviso azul, as linhas de aluno, o
   texto de "nenhum aluno ainda" e a linha de botoes. Cada uma trazia a propria
   margem utilitaria (`mb-2` aqui, `mt-2` ali) e o resultado era um bloco sem
   ritmo: aviso, texto e botoes praticamente colados, destoando do resto do
   formulario, onde cada `.form-group` respira 1rem.

   O espacamento passa a ser UM SO, declarado aqui: `gap` de container flex, que
   nao se soma a margem nenhuma e nao colapsa. As utilitarias de margem sairam
   da view justamente para nao haver duas fontes de verdade.

   Este arquivo, e nao `surfapp-fields.css`: aquele guarda o visual dos campos
   genericos do painel; isto e o ajuste de um bloco unico da tela de cliente.
   --------------------------------------------------------------------------- */

.surf-students {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Cliente sem nenhum aluno: o container das linhas continua no DOM (ele guarda
   o `<template>` da linha nova, que nao ocupa espaco) e viraria um item flex de
   altura zero — cobrando um `gap` inteiro por nada, ou seja, um vao dobrado
   entre o aviso azul e o texto de apoio. Escondido, ele sai da conta.

   `:has()` e reavaliado ao vivo: quando o JS insere a primeira linha, o
   container reaparece sozinho, sem ninguem precisar mexer em classe. Em
   navegador sem suporte a regra inteira e descartada e o unico efeito e o vao
   dobrado do estado vazio — degradacao aceitavel para um espacamento. */
.surf-students [data-surfapp-students-rows]:not(:has(.surf-setup-row)) {
    display: none;
}

/* Os botoes fecham o bloco e nao sao mais uma caixa de texto: um degrau a mais
   antes deles separa "o que voce precisa saber" de "o que voce pode fazer". */
.surf-students__actions {
    margin-top: .25rem;
}

/* ---------------------------------------------------------------------------
   Central de Suporte: acesso flutuante
   ---------------------------------------------------------------------------
   O item saiu da barra do menu (ver `vendor/backpack/ui/inc/menu_items`), que
   com ele estourava para duas faixas e cobrava ~37px de altura em toda tela do
   painel. Aqui ele vira uma pastilha fixa no canto inferior direito.

   COR FIXA DA MARCA SURFAPP, e nao `--tblr-primary`: o painel e white label e
   aquela variavel carrega a cor da ESCOLA — que muda a cada tenant e nao tem
   contraste garantido com texto branco. O suporte nao e da escola, e do
   SurfApp; o navy e constante e faz ~15:1 com o branco.

   NAO PODE COBRIR O "SALVAR". A barra de acoes dos formularios do Backpack
   (`.saveActions`) fecha a pagina, com "Excluir" alinhado a direita — bem
   debaixo desta pastilha. Por isso o `padding-bottom` no `.page-body` logo
   abaixo: ele reserva, no fim do documento, mais espaco do que a pastilha
   ocupa, entao em nenhuma posicao de rolagem os dois se encontram. (O rodape do
   tema nao entra na conta: `show_powered_by` e `developer_link` estao
   desligados em `config/backpack/ui.php` e ele nao chega a ser renderizado.)
   --------------------------------------------------------------------------- */

.surf-support-fab {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    /* 1030 e a faixa "fixed" do Bootstrap: acima do conteudo e do menu suspenso
       (1000), abaixo do backdrop (1050) e do modal (1055) — uma caixa de
       confirmacao aberta precisa cobrir a pastilha, nunca o contrario. */
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    background: var(--surf-navy, #0a2638);
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 .25rem .75rem rgba(10, 38, 56, .28);
}

.surf-support-fab:hover,
.surf-support-fab:focus {
    background: var(--surf-navy-600, #17435c);
    color: #fff;
    text-decoration: none;
}

/* O foco de teclado precisa ser visivel SOBRE o navy: o anel padrao do tema e
   escuro e sumiria dentro da pastilha. Branco por fora, com deslocamento. */
.surf-support-fab:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(10, 38, 56, .45);
}

.surf-support-fab i {
    font-size: 1.05rem;
}

/* Espaco reservado no fim da pagina para a pastilha nunca encostar no ultimo
   elemento — na pratica, a barra de Salvar/Excluir dos formularios. */
.page-body {
    padding-bottom: 4.5rem;
}

/* Telefone: a pastilha encolhe para o icone. A largura util e pouca e o canto
   inferior direito e onde o polegar navega; o `aria-label` continua dizendo o
   que ela e, entao nada se perde para quem usa leitor de tela. */
@media (max-width: 575.98px) {
    .surf-support-fab__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .surf-support-fab {
        padding: .6rem;
    }
}

/* ---------------------------------------------------------------------------
   Agenda: a cor do LOCAL

   O campo "Cor na agenda" mora no cadastro de locais desde o comeco e nunca
   chegava a grade. O bloco era montado so com a cor do TIPO de aula — a cor do
   local vinha carregada do banco e era descartada na montagem do evento. Uma
   escola que operasse em dois picos pintava cada um de uma cor e via a agenda
   inteira igual: o campo prometia a agenda e nao entregava nada.

   O preenchimento continua sendo do tipo de aula, porque e assim que a grade e
   lida de relance ("manha de iniciante, tarde de avancado"). O local ficou com
   o CONTORNO, que e a segunda informacao mais visivel do bloco e estava
   sobrando: ate aqui ele repetia a cor do fundo, entao ninguem o enxergava.

   POR QUE ESTAS REGRAS MORAM NESTE ARQUIVO, e nao no `<style>` de
   `admin/partials/styles.blade.php` junto das demais regras da agenda: aquele
   bloco e impresso no HTML de TODA tela customizada do painel, e este arquivo e
   servido uma vez e fica em cache. Regra que so a agenda usa nao precisa viajar
   em cada resposta do painel.

   Nenhuma cor esta escrita aqui de proposito. A cor do contorno chega no
   `style` inline que o proprio FullCalendar aplica a partir do `borderColor` do
   evento; o CSS so decide a ESPESSURA. Assim a cor da escola nunca fica
   duplicada entre o PHP e a folha de estilo.
   --------------------------------------------------------------------------- */

/* 2px: o suficiente para o contorno virar informacao, e nao tanto que ele
   dispute com o preenchimento ou coma a altura do bloco na visao de mes.

   A classe so e aplicada a evento cujo local TEM cor (ver `toEvent()`): sem
   ela, engrossar o contorno de 1px da mesma cor do fundo criaria uma moldura
   visivel sem significado nenhum. */
.fc .agenda-evento-local {
    border-width: 2px;
}

/* Amostra do contorno na legenda.

   O miolo cinza repete o desenho do bloco (preenchimento + contorno) e nao e
   enfeite: uma amostra feita so de borda sumiria contra o branco da pagina
   justamente nas cores claras — que sao as que o assistente de configuracao
   sugere e as que ja fizeram texto desaparecer neste projeto. A cor da borda
   vem do `style` inline, que e o unico lugar onde a cor da escola existe. */
.surf-legenda-local {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    border-radius: .15rem;
    background: #CBD5E1;
    border: 2px solid transparent;
}

/* ---------------------------------------------------------------------------
   Condicao comercial: o desconto individual da escola sobre o plano SaaS

   Tres telas desenham a mesma ideia — a vitrine de planos, o resumo da cobranca
   pendente e o contrato visto pela plataforma —, e o que elas mostram e sempre
   a mesma coisa: um preco que foi substituido por outro.

   POR QUE UMA CLASSE PARA O RISCO, e nao `<s>` ou um `text-decoration` solto no
   Blade: o preco de tabela e informacao, e nao enfeite. Ele precisa RECUAR sem
   sumir — num cinza claro demais a linha vira ruido ilegivel, e em texto normal
   os dois precos disputam a mesma atencao, que e justamente a duvida que a tela
   existe para tirar.

   O RISCO NUNCA VAI SOZINHO. A palavra "De" acompanha o preco antigo em toda
   tela que usa esta classe (ver `admin/commercial/plans.blade.php`): o tachado
   nao chega a leitor de tela, nao sobrevive a impressao em preto e branco e e
   fino demais para quem le no celular no sol. Quem dependesse so dele nunca
   descobriria que houve desconto.
   --------------------------------------------------------------------------- */

.surf-preco-de {
    text-decoration: line-through;
    /* Token que a paleta ja declara, e nao um cinza inventado aqui: 5.4:1 sobre
       o branco do cartao, que passa o AA ate no tamanho pequeno em que este
       preco aparece. */
    color: var(--tblr-secondary, #6e6a65);
}

/* A frase que diz POR QUE o preco e outro ("20% de desconto · ate 31/12/2026").
   Sem ela, o numero riscado logo acima parece erro de cadastro do plano.

   Verde porque acompanha o selo "Condicao comercial exclusiva" do mesmo cartao.
   E o `-text-emphasis`, e nao o `--tblr-success` cheio: aquele e cor de
   preenchimento de badge e reprovaria o contraste como texto sobre o branco. */
.surf-condicao-nota {
    color: var(--tblr-success-text-emphasis, #175c46);
}

/* Resumo do acordo vigente, no contrato da plataforma.

   Fundo proprio e barra na lateral porque o bloco precisa se separar do
   formulario que vem logo abaixo: "o que ja esta valendo" e "o que voce esta
   prestes a conceder" lidos como um paragrafo continuo e como se concede uma
   condicao por cima de outra sem perceber. */
.surf-condicao__resumo {
    padding: 0.75rem 0.9rem;
    border-left: 3px solid var(--tblr-success, #1f7a5c);
    border-radius: 0.25rem;
    background-color: var(--tblr-bg-surface-secondary, #faf8f5);
}

/* O efeito da condicao plano a plano. Linha por item, com folga de leitura: e
   uma conta que alguem confere em voz alta contra a cobranca. */
.surf-condicao__lista > li {
    padding: 0.15rem 0;
}

/* Previa ao vivo do preco final, preenchida pelo JavaScript.

   Tracejada porque a caixa NAO e um campo: mostra um numero que ninguem digitou
   e que nao vai junto no envio (o valor que vale e recalculado no servidor na
   hora da contratacao). O contorno interrompido e a diferenca mais barata entre
   "leia isto" e "preencha isto" num formulario que tem os dois. */
.surf-condicao-previa {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    border: 1px dashed var(--tblr-border-color, #e3ddd1);
    border-radius: 0.25rem;
    background-color: var(--tblr-bg-surface-secondary, #faf8f5);
}

/* SEM ESTA LINHA A CAIXA NUNCA SOME.

   O `display: flex` acima e regra de autor e vence o `[hidden] { display: none }`
   da folha do navegador: o atributo continuaria no HTML, o JavaScript
   continuaria escrevendo `root.hidden = true`, e a previa ficaria na tela com o
   ultimo valor calculado — inclusive um "Cortesia SurfApp" de um desconto que a
   pessoa acabou de apagar do campo. Mesma armadilha ja documentada em
   `public/css/shared/password.css`, que so a prova visual encontrou. */
.surf-condicao-previa[hidden] {
    display: none;
}

.surf-condicao-previa__rotulo {
    font-size: 0.8125rem;
    color: var(--tblr-secondary, #6e6a65);
}

/* Maior que o resto do formulario pelo mesmo motivo do valor final da
   matricula: e o numero que a pessoa confere em voz alta antes de fechar o
   acordo. */
.surf-condicao-previa__valor {
    font-size: 1.15rem;
    line-height: 1.2;
    color: var(--surf-navy, #0a2638);
}

.surf-condicao-previa__nota {
    font-size: 0.75rem;
    color: var(--tblr-secondary, #6e6a65);
}

/* A MESMA CAIXA DIZENDO QUE O ACORDO NAO FECHA: preco fechado sem plano, ou
   preco fechado igual/maior que o preco do plano.

   TOM DE AVISO, E NAO DE ERRO. Nada foi recusado — nada foi nem enviado. O
   vermelho de `is-invalid` e a cor da resposta do servidor, e usa-lo aqui faria
   a tela parecer ter validado o que ela nao validou: a recusa de verdade e de
   `SaasPlanPricing::assertValid()`, e continua vindo depois do envio.

   A BORDA VIRA CONTINUA. O tracejado diz "isto e leitura, e nao campo", que
   continua verdade; mas ele tambem faz a caixa recuar, e recuar e o contrario
   do que este estado precisa. A cor sozinha nao segurava: num pastel de fundo
   claro, um retangulo tracejado passa por decoracao.

   Par de tokens ja medido em `.beta-aviso`: `--tblr-warning-bg-subtle` (#f7eedf)
   com `--tblr-warning-text` (#8a622b), 4,72:1 — acima do 4,5:1 da AA. */
.surf-condicao-previa--alerta {
    border-style: solid;
    border-color: var(--tblr-warning-border-subtle, #e6d0ab);
    background-color: var(--tblr-warning-bg-subtle, #f7eedf);
}

.surf-condicao-previa--alerta .surf-condicao-previa__rotulo,
.surf-condicao-previa--alerta .surf-condicao-previa__valor,
.surf-condicao-previa--alerta .surf-condicao-previa__nota {
    color: var(--tblr-warning-text, #8a622b);
}

/* O aviso preso ao seletor de plano: "o preco fechado precisa de um plano".

   Mesmo tom da previa em alerta, e de proposito: as duas frases falam da mesma
   combinacao impossivel, uma no campo onde se corrige e a outra na caixa onde o
   efeito apareceria. Cores diferentes fariam parecer dois problemas.

   SEM `display` NESTA REGRA. A caixa aparece e some por atributo `hidden`, e
   `.form-text` do Tabler nao declara display — bastaria uma linha aqui para o
   aviso nunca mais sumir, que e a armadilha ja documentada logo acima em
   `.surf-condicao-previa[hidden]`.

   5,1:1 sobre o branco do cartao. */
.surf-condicao-aviso {
    color: var(--tblr-warning-text, #8a622b);
}

/* Telefone: os tres pedacos da previa empilham. Lado a lado em 320px, a nota
   ("de R$ 299,90 · desconto de R$ 59,98") quebra no meio de um numero e a
   conta deixa de ser conferivel de relance. */
@media (max-width: 575.98px) {
    .surf-condicao-previa {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }
}