/*
 * As telas do painel que não são formulário nem tabela.
 *
 * Mesma história do mapa de ônibus: o projeto não tem etapa de build, e
 * **nenhuma classe utilitária do Tailwind existe no CSS servido** — nem
 * `flex`, nem `grid`, nem `text-sm`. O que o Filament entrega é o CSS
 * dos componentes dele, e só. Uma tela escrita com utilitárias renderiza
 * como uma pilha de linhas soltas: funciona, mas não é o desenho.
 *
 * Por isso o que precisa de layout próprio ganha nome próprio aqui.
 */

/* ------------------------------------------------------------------ */
/* Duas colunas lado a lado, uma embaixo da outra na tela estreita.     */
/* ------------------------------------------------------------------ */

.maxal-colunas {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 64rem) {
    .maxal-colunas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ------------------------------------------------------------------ */
/* O quadro de valores: rótulo à esquerda, dinheiro à direita.         */
/* Alinhar a coluna do dinheiro é o que torna a conta conferível de     */
/* olho — é para isso que a tela existe.                                */
/* ------------------------------------------------------------------ */

.maxal-quadro {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.875rem;
    margin: 0;
}

.maxal-quadro__linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
}

.maxal-quadro__rotulo {
    color: #6b7280;
    margin: 0;
}

.dark .maxal-quadro__rotulo {
    color: #9ca3af;
}

.maxal-quadro__valor {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    margin: 0;
    text-align: right;
    white-space: nowrap;
}

/* A linha que fecha um bloco: soma, esperado, diferença. */
.maxal-quadro__linha--total {
    border-top: 1px solid #e5e7eb;
    padding-top: 0.75rem;
}

.dark .maxal-quadro__linha--total {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.maxal-quadro__linha--total .maxal-quadro__rotulo {
    color: inherit;
    font-weight: 500;
}

.maxal-quadro__linha--total .maxal-quadro__valor {
    font-weight: 700;
}

/* Falta ou sobra na gaveta: o número que puxa o olho. */
.maxal-quadro__valor--alerta {
    color: #be123c;
}

.dark .maxal-quadro__valor--alerta {
    color: #fda4af;
}

/* A decisao da empresa: cinza, porque nao ha nada errado ali.        */
/* O beneficio que a linha nao cadastrou, o que ela desligou de        */
/* proposito e o que depende da gerencia nao sao engano — acusa-los    */
/* em vermelho seria apontar erro em quem esta certo.                  */
.maxal-quadro__valor--decisao {
    color: #6b7280;
    font-weight: 400;
}

.dark .maxal-quadro__valor--decisao {
    color: #9ca3af;
}

/* Por que este beneficio nao da para vender nesta saida (item 22).    */
/* Quebra linha ao contrario do numero, que e sempre curto.            */
.maxal-quadro__motivo {
    display: block;
    font-size: 0.8125rem;
    font-weight: 400;
    white-space: normal;
}

.maxal-quadro__nota {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 1rem;
}

.dark .maxal-quadro__nota {
    color: #9ca3af;
}

/* ------------------------------------------------------------------ */
/* Lista de lançamentos: sangria, suprimento.                          */
/* ------------------------------------------------------------------ */

.maxal-lancamentos {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
}

.maxal-lancamentos__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-top: 1px solid #f3f4f6;
}

.dark .maxal-lancamentos__item {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.maxal-lancamentos__item:first-child {
    border-top: 0;
}

.maxal-lancamentos__detalhe {
    color: #6b7280;
}

.dark .maxal-lancamentos__detalhe {
    color: #9ca3af;
}

/* ------------------------------------------------------------------ */
/* O selo de caixa aberto no alto da tela de venda (Tela 11).          */
/* ------------------------------------------------------------------ */

.maxal-cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.875rem;
}

.maxal-cabecalho__passo {
    color: #6b7280;
}

.dark .maxal-cabecalho__passo {
    color: #9ca3af;
}

.maxal-caixa__estado {
    font-weight: 600;
}

.maxal-caixa__estado--fechado {
    color: #be123c;
}

.dark .maxal-caixa__estado--fechado {
    color: #fda4af;
}

.maxal-caixa__detalhe {
    color: #6b7280;
}

.dark .maxal-caixa__detalhe {
    color: #9ca3af;
}

/* ------------------------------------------------------------------ */
/* Texto solto: explicação curta dentro de uma seção.                  */
/* ------------------------------------------------------------------ */

.maxal-nota {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

.dark .maxal-nota {
    color: #9ca3af;
}

.maxal-nota strong {
    color: inherit;
    font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Colunas com peso diferente: o mapa do ônibus manda, o painel ao     */
/* lado acompanha.                                                     */
/* ------------------------------------------------------------------ */

.maxal-colunas--principal {
    grid-template-columns: 1fr;
}

@media (min-width: 80rem) {
    .maxal-colunas--principal {
        grid-template-columns: 3fr 2fr;
    }
}

/* Seções empilhadas DENTRO de uma coluna: a página só espaça as que
   são filhas diretas dela. */
.maxal-empilhado {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ------------------------------------------------------------------ */
/* Formulário escrito à mão.                                           */
/*                                                                     */
/* A busca do guichê e os dados do passageiro não passam pelo form do  */
/* Filament — são campos soltos no blade. Sem estes estilos eles saem  */
/* como controles crus do navegador: sem borda, sem respiro e com a    */
/* largura que o sistema operacional achar melhor.                     */
/* ------------------------------------------------------------------ */

.maxal-form {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    align-items: end;
}

.maxal-form--dupla {
    grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
    .maxal-form--dupla {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* O campo que ocupa a linha inteira: nome do passageiro, pagamento. */
.maxal-form__largo {
    grid-column: 1 / -1;
}

.maxal-campo__rotulo {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.maxal-campo__controle {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #111827;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
}

.dark .maxal-campo__controle {
    color: #e5e7eb;
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

.maxal-campo__controle:focus {
    outline: 2px solid #4f97da;
    outline-offset: 1px;
    border-color: #4f97da;
}

.maxal-campo__erro {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    color: #be123c;
}

.dark .maxal-campo__erro {
    color: #fda4af;
}

/* ------------------------------------------------------------------ */
/* Tabela de dados dentro de uma seção (as saídas encontradas).        */
/* ------------------------------------------------------------------ */

.maxal-tabela {
    width: 100%;
    font-size: 0.875rem;
    border-collapse: collapse;
}

.maxal-tabela th {
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    padding: 0 1rem 0.5rem 0;
    white-space: nowrap;
}

.dark .maxal-tabela th {
    color: #9ca3af;
}

.maxal-tabela td {
    padding: 0.75rem 1rem 0.75rem 0;
    border-top: 1px solid #f3f4f6;
    vertical-align: middle;
}

.dark .maxal-tabela td {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.maxal-tabela__destaque {
    font-weight: 600;
}

.maxal-tabela__fraco {
    color: #6b7280;
}

.dark .maxal-tabela__fraco {
    color: #9ca3af;
}

.maxal-tabela__alerta {
    color: #be123c;
}

.dark .maxal-tabela__alerta {
    color: #fda4af;
}

/* A última coluna, a dos botões, encosta na borda direita. */
.maxal-tabela__acao {
    text-align: right;
    padding-right: 0;
    white-space: nowrap;
}

/* O link secundário da célula de ação — "Ver o mapa" ao lado do botão
   de escolher. Discreto de propósito: quem está vendendo aperta o
   botão, e só quem tem dúvida procura o mapa. */
.maxal-tabela__link {
    display: inline-block;
    margin-left: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #2c6fb5;
    text-decoration: none;
}

.maxal-tabela__link:hover {
    text-decoration: underline;
}

.dark .maxal-tabela__link,
html.dark .maxal-tabela__link {
    color: #7fb3e8;
}

/* ------------------------------------------------------------------ */
/* Linha de botões no rodapé de uma seção.                             */
/* ------------------------------------------------------------------ */

.maxal-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.maxal-botoes--fim {
    justify-content: flex-end;
}

/* ------------------------------------------------------------------ */
/* O localizador do bilhete: ditado por telefone, lido com pressa.     */
/* ------------------------------------------------------------------ */

.maxal-localizador {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

/* ------------------------------------------------------------------ */
/* Relatórios (Tela 17).                                              */
/* ------------------------------------------------------------------ */

/* Tabela larga rola dentro da própria caixa: o relatório de vendas
   detalhadas tem quinze colunas, e sem isto a página inteira ganharia
   barra horizontal e o menu sairia da tela. */
.maxal-rolagem {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.maxal-tabela--fim {
    text-align: right;
    padding-right: 0;
}

.maxal-tabela__total td {
    border-top: 2px solid #0f2a47;
    font-weight: 700;
    padding-top: 0.75rem;
}

.dark .maxal-tabela__total td {
    border-top-color: #4f97da;
}

/* Os filtros aplicados, escritos acima da tabela. Relatório circula
   solto — impresso, colado num e-mail, mostrado numa reunião —, e sem os
   filtros à vista o mesmo total pode significar duas coisas. */
.maxal-relatorio__filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 0 0 1rem;
    font-size: 0.75rem;
    line-height: 1.5;
}

.maxal-relatorio__filtro {
    display: inline-flex;
    gap: 0.375rem;
    align-items: baseline;
}

.maxal-relatorio__filtro-rotulo {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
}

.dark .maxal-relatorio__filtro-rotulo {
    color: #9ca3af;
}

.maxal-relatorio__filtro-valor {
    font-weight: 600;
}

/* A lista honesta do que ainda não existe, com o motivo de cada um. */
.maxal-catalogo {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

@media (min-width: 60rem) {
    .maxal-catalogo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem 1.5rem;
    }
}

.maxal-catalogo__item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0;
    border-top: 1px solid #f3f4f6;
    font-size: 0.8125rem;
}

.dark .maxal-catalogo__item {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.maxal-catalogo__nome {
    font-weight: 600;
}

.maxal-catalogo__motivo {
    color: #6b7280;
    font-size: 0.75rem;
}

.dark .maxal-catalogo__motivo {
    color: #9ca3af;
}

/* ---------------------------------------------------------------------
   Tela 15 — os quatro números da viagem e as etiquetas de embarque
   --------------------------------------------------------------------- */

/*
   Os números do cabeçalho: vendidas, receita, benefícios, já embarcaram.
   Grade que cabe em quatro no monitor e em dois no celular — quem confere
   embarque costuma estar de pé na plataforma, com o telefone na mão.
*/
.maxal-numeros {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .maxal-numeros {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.maxal-numero {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.875rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    background: #fff;
}

.dark .maxal-numero {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.maxal-numero__valor {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

/* O "/44" da capacidade: acompanha o número, sem competir com ele. */
.maxal-numero__de {
    font-size: 1rem;
    font-weight: 500;
    color: #6b7280;
}

.dark .maxal-numero__de {
    color: #9ca3af;
}

.maxal-numero__rotulo {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.dark .maxal-numero__rotulo {
    color: #9ca3af;
}

/*
   A etiqueta da coluna Embarque.

   Cor não é o único sinal: o texto já diz "Embarcou", "Aguardando" ou
   "Embarca em Campo Maior". Quem não distingue verde de âmbar lê a mesma
   informação — e a plataforma de rodoviária costuma ter sol batendo na
   tela, onde cor sozinha some.
*/
.maxal-etiqueta {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #f3f4f6;
    color: #374151;
    white-space: nowrap;
}

.dark .maxal-etiqueta {
    background: rgba(255, 255, 255, 0.08);
    color: #d1d5db;
}

.maxal-etiqueta--ok {
    background: #dcfce7;
    color: #166534;
}

.dark .maxal-etiqueta--ok {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

.maxal-etiqueta--aviso {
    background: #fef3c7;
    color: #92400e;
}

.dark .maxal-etiqueta--aviso {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
}

/* ---------------------------------------------------------------------
   Comunicados da Maxal no Painel do dia
   --------------------------------------------------------------------- */

.maxal-aviso {
    padding: 0.875rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    background: #fff;
}

.dark .maxal-aviso {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}

/*
   Já lido continua visível, só que apagado.

   Sumir com o comunicado depois de lido seria perder o recado: quem leu
   correndo de manhã precisa reencontrá-lo à tarde, e "manutenção no
   sábado" vale até sábado passar, não até alguém clicar.
*/
.maxal-aviso--lido {
    opacity: 0.62;
}

.maxal-aviso__topo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.maxal-aviso__data {
    font-size: 0.75rem;
    color: #6b7280;
    margin-left: auto;
}

.dark .maxal-aviso__data {
    color: #9ca3af;
}

.maxal-aviso__titulo {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
}

.maxal-aviso__texto {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #374151;
}

.dark .maxal-aviso__texto {
    color: #d1d5db;
}

/* O tipo "alerta" é o único que precisa parar o olho. */
.maxal-etiqueta--alerta {
    background: #fee2e2;
    color: #991b1b;
}

.dark .maxal-etiqueta--alerta {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

/* ------------------------------------------------------------------ */
/* A criança de colo dentro do bloco do passageiro (guichê, passo 3).  */
/* Separada por uma linha porque é OUTRA passagem, e não mais um campo */
/* do mesmo passageiro — quem confere o bilhete precisa ver os dois.   */
/* ------------------------------------------------------------------ */

.maxal-colo {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #cbd5e1;
}

.dark .maxal-colo {
    border-top-color: rgba(255, 255, 255, 0.15);
}

/* Caixa e texto na mesma linha, e o texto clicável junto: alvo pequeno
   é alvo errado no balcão com o passageiro esperando. */
.maxal-escolha {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    cursor: pointer;
    user-select: none;
}

.maxal-escolha input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: #4f97da;
    cursor: pointer;
    flex: none;
}