html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.sl-login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--rz-base-background-color, #f6f7fa);
    padding: 1rem;
    position: relative;
}

/* O botao de tema no login e a unica coisa na tela alem do cartao: sem contorno ele
   passa por enfeite e o usuario nao acha onde troca o tema (aconteceu). Com borda e
   fundo proprio ele se le como controle nos dois temas. */
.sl-canto-tema {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.sl-canto-tema .rz-button {
    border: 1px solid var(--rz-border-color, rgba(0, 0, 0, .18));
    border-radius: 999px;
    background: var(--rz-card-background-color, #fff);
    color: var(--rz-text-color);
    width: 2.25rem;
    height: 2.25rem;
}

.sl-canto-tema .rz-button:hover {
    background: var(--rz-base-700, rgba(0, 0, 0, .06));
}

.sl-login-card {
    width: 100%;
    max-width: 420px;
}

.sl-login-logo {
    display: block;
    max-width: 170px;
    margin: 0 auto;
}

.sl-logo {
    height: 30px;
    width: auto;
}

/* ----------------------------------------------------------------------------
   Ajustes do modo escuro.
   O "software-dark" do Radzen usa um azul-acinzentado de baixo contraste que
   cansa para ler o dia inteiro. Aqui neutralizamos o fundo, clareamos o texto
   e damos borda visivel aos blocos, sem trocar de tema.
   ---------------------------------------------------------------------------- */
html:has(#rz-theme-dark:not([disabled])) {
    /* Faixa de cinzas do modo escuro. Um degrau entre cada nivel: fundo, superficie
       (card/painel/grid), realce (cabecalho de grid e campos) e hover. */
    --rz-base-background-color: #21252b;
    --rz-body-background-color: #21252b;

    /* No tema escuro do Radzen a escala esta invertida: 900 e o fundo, 700 o realce.
       Sem sobrescrever estas tres, abas e faixas zebradas voltam a puxar o quase-preto. */
    --rz-base-900: #21252b;
    --rz-base-800: #282d34;
    --rz-base-700: #30363e;

    --rz-panel-background-color: #282d34;
    --rz-card-background-color: #282d34;
    --rz-sidebar-background-color: #242930;
    --rz-header-background-color: #242930;
    --rz-dialog-background-color: #282d34;

    /* Abas: o padrao herda o fundo do body e a aba some dentro da pagina. */
    --rz-tabs-background-color: #21252b;
    --rz-tabs-tab-background-color: #282d34;
    --rz-tabs-tab-hover-background-color: #30363e;
    --rz-tabs-tab-selected-background-color: #30363e;

    /* Texto: o padrao fica acinzentado demais sobre esse fundo. */
    --rz-text-color: rgba(255, 255, 255, .88);
    --rz-text-title-color: #ffffff;
    --rz-text-secondary-color: rgba(255, 255, 255, .66);
    --rz-text-disabled-color: rgba(255, 255, 255, .38);

    --rz-border-color: #3d444d;
    --rz-border-disabled: #333941;

    /* Grid: linha e cabecalho precisam se distinguir do fundo, e a zebra
       precisa ser so um degrau - nao o fundo quase preto do tema. */
    --rz-grid-background-color: #282d34;
    --rz-grid-header-background-color: #30363e;
    --rz-grid-row-background-color: #282d34;
    --rz-grid-stripe-background-color: #2d333a;
    --rz-grid-stripe-odd-background-color: #282d34;
    --rz-grid-row-hover-background-color: #39404a;
    --rz-grid-cell-border: 1px solid #343a42;
    --rz-grid-header-color: #ffffff;

    /* Campos: fundo mais claro que o card destaca onde se digita. */
    --rz-input-background-color: #30363e;
    --rz-input-value-color: rgba(255, 255, 255, .92);
    --rz-input-placeholder-color: rgba(255, 255, 255, .45);
    --rz-input-border: 1px solid #454c56;
}

/* O bootstrap.min.css crava body { color: #212529 } e o tema escuro do Radzen so troca
   variavel - nunca essa regra. Dentro do RadzenLayout o problema nao aparece porque
   header, sidebar e body do Radzen pintam a cor por conta propria. Na pagina de login,
   que usa o LayoutVazio, tudo que apenas HERDA sai quase preto sobre fundo quase preto:
   o rotulo "Usuario"/"Senha" em repouso (o Radzen so pinta o rotulo depois que ele sobe)
   e o proprio botao de alternar o tema, que ficava invisivel no canto. */
html:has(#rz-theme-dark:not([disabled])) body {
    color: var(--rz-text-color);
}

html:has(#rz-theme-dark:not([disabled])) .rz-card,
html:has(#rz-theme-dark:not([disabled])) .rz-panel {
    border: 1px solid var(--rz-border-color);
}

html:has(#rz-theme-dark:not([disabled])) .rz-sidebar,
html:has(#rz-theme-dark:not([disabled])) .rz-header {
    border-color: var(--rz-border-color);
}

/* Cabecalho da grid mais marcado, para a tabela nao virar um bloco unico. */
html:has(#rz-theme-dark:not([disabled])) .rz-grid-table thead th {
    background-color: var(--rz-grid-header-background-color);
    color: var(--rz-grid-header-color);
    font-weight: 600;
    border-bottom: 2px solid #454c56;
}

/* Campos de cadastro em maiusculo: o CSS mostra enquanto digita, o codigo grava assim. */
.sl-uppercase input,
input.sl-uppercase {
    text-transform: uppercase;
}

/* Lista de permissoes do cadastro de usuario: muitos itens, em grade com rolagem vertical.
   Grid em vez de columns: com columns o conteudo cresce para o lado e cria rolagem horizontal. */
.sl-lista-selecao {
    max-height: 320px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2px 2rem;
    padding: 0.75rem;
    border: 1px solid var(--rz-border-color, #ddd);
    border-radius: var(--rz-border-radius, 4px);
}

/* Corpo da grid antes da primeira pesquisa (e quando a pesquisa nao traz nada):
   o logo bem apagado evita a sensacao de tela quebrada, sem competir com o conteudo. */
.sl-grid-vazia {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 1rem;
    text-align: center;
}

.sl-grid-vazia-logo {
    width: 200px;
    max-width: 60%;
    filter: grayscale(1);
    opacity: .14;
}

.sl-grid-vazia .rz-text-body1 {
    color: var(--rz-text-secondary-color);
}

/* No escuro o cinza do logo cai sobre um fundo escuro e some; um pouco mais de opacidade. */
html:has(#rz-theme-dark:not([disabled])) .sl-grid-vazia-logo {
    opacity: .22;
}

/* Cartoes de numero do painel de historico do cliente. */
.sl-indicador {
    height: 100%;
}

.sl-indicador .rz-text-caption {
    color: var(--rz-text-secondary-color);
}

/* ----------------------------------------------------------------------------
   Tela de entrega

   O cliente pediu densidade: "o usuario final e preguicoso, nao quero que tenha
   que expandir algo, quero tudo disponivel no bater de olho da tela". Entao aqui
   nada e accordion e nada e menu - o que existe esta na tela, e o que nao pode
   rodar aparece desabilitado com o motivo.

   As cores saem todas de variavel do Radzen, para o bloco escuro nao precisar
   redefinir cada regra.
   ---------------------------------------------------------------------------- */

/* Faixa de resumo do topo: so leitura, sempre visivel, para trocar de aba nao
   custar o contexto da entrega. */
.sl-resumo {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2rem;
    padding: .75rem 1rem;
    border: 1px solid var(--rz-border-color, rgba(0, 0, 0, .12));
    border-radius: var(--rz-border-radius, 4px);
    background: var(--rz-base-background-color, #fff);
}

.sl-resumo-item {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .25rem 0;
    min-width: 8rem;
}

.sl-resumo-rotulo {
    font-size: .68rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .65;
}

.sl-resumo-valor {
    font-size: .9rem;
    line-height: 1.3;
}

.sl-resumo-destaque {
    font-size: 1.15rem;
    font-weight: 600;
}

/* O valor do frete e o numero que o operador mais procura. */
.sl-resumo-item-valor .sl-resumo-destaque {
    color: var(--rz-primary, #1b5e20);
}

.sl-resumo-item-fechamento {
    padding-left: 1rem;
    border-left: 3px solid var(--rz-info, #0288d1);
}

/* Pendencia financeira: pedido explicito de "gritar em vermelho" para ja cobrar.
   Ocupa a largura toda porque e a primeira coisa que tem que ser lida. */
.sl-alerta-financeiro {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    border: 2px solid var(--rz-danger, #c62828);
    border-radius: var(--rz-border-radius, 4px);
    background: var(--rz-danger-lighter, #fdecea);
    color: var(--rz-danger-dark, #8e1b16);
}

.sl-alerta-financeiro-icone {
    font-size: 2rem;
    color: var(--rz-danger, #c62828);
}

.sl-alerta-financeiro-texto {
    display: flex;
    flex-direction: column;
    flex: 1 1 18rem;
}

.sl-alerta-financeiro-titulo {
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.sl-alerta-financeiro-detalhe {
    font-size: .85rem;
}

.sl-alerta-financeiro-valor {
    font-size: 1.6rem;
    font-weight: 700;
    white-space: nowrap;
}

/* A grade dos cards. auto-fill com minmax deixa o navegador decidir quantas
   colunas cabem - de 4 num monitor largo a 1 no notebook, sem breakpoint na mao. */
.sl-grade-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: .75rem;
    align-items: start;
}

.sl-card {
    height: 100%;
}

.sl-card-titulo {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .6rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--rz-border-color, rgba(0, 0, 0, .12));
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .8;
}

.sl-card-titulo .rzi {
    font-size: 1.1rem;
}

/* Empurra a acao do cabecalho para a direita, sem precisar de um flex a mais. */
.sl-card-titulo-acao {
    margin-left: auto;
}

/* O card das abas nao entra na grade: ele ocupa a largura toda. */
.sl-card-abas {
    height: auto;
}

/* Acoes rapidas: grade de botoes, todos visiveis. Nada atras de "mais opcoes". */
.sl-acoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: .4rem;
}

.sl-acoes .rz-button {
    justify-content: flex-start;
    width: 100%;
}

/* Par rotulo/valor dos cards de leitura. */
.sl-linha-dado {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: .85rem;
}

.sl-linha-dado > span {
    opacity: .7;
}

.sl-icone-inline {
    font-size: .95rem;
    vertical-align: text-bottom;
}

/* Codigo e acoes na mesma celula, a primeira da linha: o codigo a esquerda, os botoes
   encostados a direita. Some a coluna de acoes do fim, que so tinha botao e roubava
   largura de quem tem conteudo. */
.sl-celula-acoes {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Numeros alinhados na vertical: com N0 os codigos tem larguras diferentes. O min-width
   deixa os botoes comecando na mesma coluna em todas as linhas. */
.sl-codigo {
    font-variant-numeric: tabular-nums;
    min-width: 4rem;
    flex: 0 0 auto;
}

/* Excluir com o mesmo fundo do editar e so a lixeira em vermelho. O botao Danger cheio
   gritava mais que o proprio dado da linha - numa grid com 15 linhas era um paredao
   vermelho, e a acao mais perigosa nao precisa CHAMAR, precisa ser reconhecivel. */
.sl-botao-excluir .rzi,
.sl-botao-excluir i {
    color: var(--rz-danger, #dc3545);
}

.sl-botao-excluir:hover:not(:disabled) {
    background-color: var(--rz-danger-lighter, rgba(220, 53, 69, .12));
}

/* Desabilitado (cadastro aberto) o vermelho tambem tem que apagar, senao a linha parece
   clicavel. */
.sl-botao-excluir:disabled .rzi,
.sl-botao-excluir:disabled i {
    color: var(--rz-text-disabled-color);
}

/* Camera, cadeado, cortesia e nota vem logo depois dos botoes, na mesma celula. */
.sl-sinais {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    margin-inline-start: .15rem;
}

.sl-acoes-linha {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* Sinais da listagem de entregas (camera, cadeado). O title mora no span porque o
   RadzenIcon renderiza uma ligadura dentro de <i> - e sem cursor de ajuda ninguem
   descobre que ha o que ler ali. */
.sl-sinal {
    display: inline-flex;
    align-items: center;
    cursor: help;
    margin-inline: .1rem;
}

/* CT-e pendente. E o unico sinal que pede acao - os outros so informam - entao ganha cor,
   sem virar o paredao que o botao de excluir evita: e um icone pequeno numa celula. */
.sl-sinal-atencao {
    color: var(--rz-warning-dark, #b26a00);
}

/* Agendamento que chegou a hora e nao virou coleta. Como o lancamento e automatico, este
   sinal e a unica coisa na tela que denuncia a falha - por isso vermelho, nao amarelo. */
.sl-sinal-erro {
    color: var(--rz-danger, #c62828);
}

/* Grid com colunas demais (entregas: 10 colunas de conteudo). O Radzen usa
   table-layout:fixed com width 100%, entao sem um piso de largura ele espreme todo
   mundo em vez de rolar. Com o min-width, quem nao cabe vai para a barra horizontal. */
.sl-grid-largo .rz-data-grid-data {
    overflow-x: auto;
}

.sl-grid-largo .rz-grid-table {
    min-width: 1750px;
}

/* Lista longa dentro de um card (notas fiscais: ha entrega com 19). Sem teto, o card
   estica e desalinha a grade toda; com teto, a barra aparece so quando passa do limite.
   scrollbar-gutter reserva o espaco da barra, senao a linha "pula" ao passar de 6 itens. */
.sl-lista-rolagem {
    max-height: 11rem;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

/* Barra discreta: o card e pequeno, a barra padrao do Chrome no Linux come 15px. */
.sl-lista-rolagem::-webkit-scrollbar {
    width: 8px;
}

.sl-lista-rolagem::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(0, 0, 0, .22);
}

.sl-lista-rolagem::-webkit-scrollbar-track {
    background: transparent;
}

/*
   Relatorio do retorno bancario: colunas de largura fixa, entao so faz sentido em fonte
   monoespacada. Ocupa a altura que sobra no dialog e rola por dentro - um arquivo de retorno
   com centenas de registros nao pode esticar a janela.

   As cores saem das variaveis do Radzen para o bloco acompanhar o tema escuro sem regra a parte.
*/
.sl-retorno-bancario {
    flex: 1;
    width: 100%;
    min-height: 22rem;
    resize: none;
    white-space: pre;
    overflow: auto;
    font-family: ui-monospace, "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace;
    font-size: 12px;
    line-height: 1.45;
    padding: .75rem;
    border: 1px solid var(--rz-border-color, rgba(0, 0, 0, .12));
    border-radius: var(--rz-border-radius, 4px);
    background: var(--rz-base-background-color);
    color: var(--rz-text-color);
}

html:has(#rz-theme-dark:not([disabled])) .sl-lista-rolagem::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .24);
}

/* No escuro o vermelho claro do Radzen vira quase branco e a faixa perde o susto:
   fundo proprio, borda viva e texto claro. */
html:has(#rz-theme-dark:not([disabled])) .sl-alerta-financeiro {
    background: #3b1f1f;
    border-color: #ef5350;
    color: #ffcdd2;
}

html:has(#rz-theme-dark:not([disabled])) .sl-alerta-financeiro-icone {
    color: #ef5350;
}

html:has(#rz-theme-dark:not([disabled])) .sl-resumo {
    background: var(--rz-base-800);
}

/* ------------------------------------------------------------------ Fase 6 */

/* Linha conferida (abastecimento e conta): a linha inteira em verde, como o
   CellPainting do desktop pintava. E a unica informacao da grid que se le de
   longe, e e justamente a que o operador varre. Tom claro, nao o verde cheio do
   desktop - numa grid de 15 linhas aquilo virava um paredao.

   O SELETOR PRECISA SER LONGO ASSIM. A primeira versao era ".sl-linha-conferida td"
   e nao pintava quase nada:

   - A regra de zebra do Radzen
     (".rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(2n+1) > td")
     tem especificidade 0,3,3 contra os 0,1,1 da nossa. Em METADE das linhas - as
     impares dentro do tbody - ela ganhava e repintava de #ffffff, ou seja, o verde
     sumia por completo; nas outras aparecia com 10% de alpha, quase invisivel.
   - A celula congelada da primeira coluna (Frozen="true") e forcada para
     "--rz-grid-background-color" e nunca recebia o verde, deixando um vao branco
     bem onde o olho entra na linha.

   Por isso a cadeia leva ".rz-data-grid" E ".rz-data-grid-data": sao dois ancestrais
   reais da tabela, e e o que poe a nossa regra acima da do tema. So um dos dois
   empata com a zebra, e empate aqui nao basta - foi medido no navegador.

   E foi so o TEMA CLARO que quebrou. No escuro a mesma regra ja ganhava por
   acidente: o ":has(#rz-theme-dark...)" carrega um ID, o que joga a especificidade
   para 1,x,x e passa por cima de qualquer coisa do tema. Por isso o defeito
   aparecia so de dia.

   O ":before" e o fundo que a celula congelada pinta por baixo do sticky.

   A barra da esquerda nao e enfeite: e ela que faz a linha ser reconhecida no
   relance sem precisar de um verde forte no fundo - que era a reclamacao original
   contra o verde cheio do desktop. */
.rz-data-grid .rz-data-grid-data .rz-grid-table-striped tbody > tr.sl-linha-conferida > td,
.rz-data-grid .rz-data-grid-data .rz-grid-table-striped tbody > tr.sl-linha-conferida > td.rz-frozen-cell,
.rz-data-grid .rz-data-grid-data .rz-grid-table-striped tbody > tr.sl-linha-conferida > td.rz-frozen-cell:before {
    background-color: #dcecdd;
}

.rz-data-grid .rz-data-grid-data .rz-grid-table-striped tbody > tr.sl-linha-conferida > td:first-child {
    box-shadow: inset 4px 0 0 0 #2e7d32;
}

html:has(#rz-theme-dark:not([disabled])) .rz-data-grid .rz-data-grid-data .rz-grid-table-striped tbody > tr.sl-linha-conferida > td,
html:has(#rz-theme-dark:not([disabled])) .rz-data-grid .rz-data-grid-data .rz-grid-table-striped tbody > tr.sl-linha-conferida > td.rz-frozen-cell,
html:has(#rz-theme-dark:not([disabled])) .rz-data-grid .rz-data-grid-data .rz-grid-table-striped tbody > tr.sl-linha-conferida > td.rz-frozen-cell:before {
    background-color: #24402a;
}

html:has(#rz-theme-dark:not([disabled])) .rz-data-grid .rz-data-grid-data .rz-grid-table-striped tbody > tr.sl-linha-conferida > td:first-child {
    box-shadow: inset 4px 0 0 0 #66bb6a;
}

/* Entrega marcada como importante: o laranja do desktop, no mesmo desenho da linha
   conferida (fundo claro + barra a esquerda). A conferida ganha quando as duas valem. */
.rz-data-grid .rz-data-grid-data .rz-grid-table-striped tbody > tr.sl-linha-importante > td,
.rz-data-grid .rz-data-grid-data .rz-grid-table-striped tbody > tr.sl-linha-importante > td.rz-frozen-cell,
.rz-data-grid .rz-data-grid-data .rz-grid-table-striped tbody > tr.sl-linha-importante > td.rz-frozen-cell:before {
    background-color: #fde8cf;
}

.rz-data-grid .rz-data-grid-data .rz-grid-table-striped tbody > tr.sl-linha-importante > td:first-child {
    box-shadow: inset 4px 0 0 0 #e65100;
}

html:has(#rz-theme-dark:not([disabled])) .rz-data-grid .rz-data-grid-data .rz-grid-table-striped tbody > tr.sl-linha-importante > td,
html:has(#rz-theme-dark:not([disabled])) .rz-data-grid .rz-data-grid-data .rz-grid-table-striped tbody > tr.sl-linha-importante > td.rz-frozen-cell,
html:has(#rz-theme-dark:not([disabled])) .rz-data-grid .rz-data-grid-data .rz-grid-table-striped tbody > tr.sl-linha-importante > td.rz-frozen-cell:before {
    background-color: #4a3115;
}

html:has(#rz-theme-dark:not([disabled])) .rz-data-grid .rz-data-grid-data .rz-grid-table-striped tbody > tr.sl-linha-importante > td:first-child {
    box-shadow: inset 4px 0 0 0 #ffa040;
}

/* Valor ou saldo negativo no caixa do motorista. */
.sl-valor-negativo {
    color: var(--rz-danger);
    font-weight: 600;
}

/* O antes/depois da Central de Logs: JSON de ate alguns KB, que nao pode esticar
   o card nem empurrar a pagina para o lado. Mesma ideia da .sl-lista-rolagem. */
.sl-json {
    margin: 0;
    max-height: 22rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
    font-size: 0.78rem;
    line-height: 1.45;
}

/* O resumo do filtro na faixa recolhida da listagem de entregas.
   Uma linha so, com reticencias: sao ate 22 filtros, e deixar quebrar em tres linhas faria a
   faixa "recolhida" ocupar mais espaco do que o card de filtros aberto. O texto inteiro fica
   no title. */
.sl-filtro-resumo {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.85;
}

/* A grid do historico dentro de um dialogo: teto de altura e barra propria, como a
   .sl-lista-rolagem faz com as listas dos cards. Sem o teto o dialogo cresce com a
   quantidade de logs e o painel de antes/depois sai da tela. */
.sl-lista-rolagem-grid .rz-data-grid-data {
    max-height: 22rem;
    overflow-y: auto;
}

/* A faixa de filtros da listagem de entregas: campos a esquerda, marcadores "Somente..."
   agrupados numa coluna a direita.
   Os oito marcadores soltos entre os campos nao se alinhavam com nada - cada linha tinha uma
   largura diferente, e eles boiavam onde sobrasse espaco. Juntos viram um bloco so, que e o
   que eles sao: recortes da mesma pesquisa. */
.sl-filtros-entrega {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.sl-filtros-entrega > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.sl-filtros-marcadores {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--rz-border-color, rgba(0, 0, 0, 0.12));
    border-radius: var(--rz-border-radius, 4px);
}

.sl-filtros-marcadores .sl-card-titulo {
    white-space: nowrap;
}

.sl-filtros-marcadores-separador {
    height: 1px;
    margin: 0.25rem 0;
    background: var(--rz-border-color, rgba(0, 0, 0, 0.12));
}

/* ------------------------------------------------------------------
   Validacao: varias mensagens num alerta so

   As BLL acumulam os erros em StringBuilder (padrao do Panthera) e lancam UMA
   RegraNegocioException com todas as linhas. O Blazor renderiza o texto como
   HTML, onde "\n" nao quebra nada - sem esta regra os erros saiam grudados
   numa linha so ("preencha o campo "Numero"Por favor, preencha o campo...").

   pre-line preserva a quebra e colapsa o espaco, que e exatamente o que o
   AppendLine produz. Vale para TODO RadzenAlert do sistema, e nao ha nenhum que
   dependa de ter a quebra ignorada.
   ------------------------------------------------------------------ */
.rz-alert .rz-alert-content,
.rz-notification-message {
    white-space: pre-line;
}

/* Em tela estreita a coluna vira mais uma faixa embaixo, em vez de espremer os campos. */

@media (max-width: 1400px) {
    .sl-filtros-entrega {
        flex-direction: column;
    }

    .sl-filtros-marcadores {
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 1.25rem;
        width: 100%;
    }

    .sl-filtros-marcadores-separador {
        display: none;
    }
}

/* ------------------------------------------------------ Entrega: fotos */

/* "Anexar foto" e um <label> com o InputFile dentro: input de arquivo nativo nao aceita
   estilo. Fica com a cara de um botao pequeno do Radzen, tracejado para ler como slot vazio. */
.sl-anexar-foto {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .6rem;
    border: 1px dashed var(--rz-border-color, rgba(0, 0, 0, .3));
    border-radius: var(--rz-border-radius, 4px);
    font-size: .8rem;
    cursor: pointer;
    opacity: .85;
}

.sl-anexar-foto:hover {
    opacity: 1;
    border-style: solid;
}

.sl-anexar-foto .rzi {
    font-size: 1rem;
}

.sl-anexar-foto-ocupado {
    opacity: .4;
    pointer-events: none;
}

/* A foto girada precisa de uma caixa que nao encolha com ela: o transform nao muda o
   espaco que o <img> ocupa no fluxo. */
.sl-foto-moldura {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 70vh;
    overflow: hidden;
}

/* ------------------------------------------------- CampoSelecao com codigo */

/* A caixinha do codigo na frente do nome, como o par txtTomadorId + txtTomadorNome do
   desktop. O nome ocupa o resto; o codigo tem largura fixa para nao dancar. */
.sl-campo-selecao {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
}

.sl-campo-selecao > .sl-campo-texto {
    flex: 1 1 auto;
    min-width: 0;
}

.sl-campo-selecao > .sl-campo-codigo {
    flex: 0 0 92px;
}

/* A grade de entregas tem as 30 colunas do desktop: o piso de largura sobe junto, senao o
   Radzen (table-layout: fixed, width: 100%) espreme tudo em vez de rolar. O numero e a SOMA
   das larguras das colunas: maior que isso o Radzen estica todas na proporcao, e a primeira
   (numero + botoes + sinais) voltava a sobrar. Mexeu numa largura, refaca a soma. */
.sl-grid-entregas .rz-grid-table {
    min-width: 4045px;
}

/* A primeira coluna da grade de entregas (numero + botoes + sinais) sobrava: o numero da
   entrega nao usa N0, entao nao precisa do min-width que alinha os codigos dos cadastros, e
   os sinais no tamanho padrao do icone (24px) ocupavam mais que os proprios botoes. */
.sl-grid-entregas .sl-celula-acoes {
    gap: .35rem;
}

.sl-grid-entregas .sl-codigo {
    min-width: 0;
}

.sl-grid-entregas .sl-sinal .rzi {
    font-size: 1.15rem;
}

/* ------------------------------------------------------------------ Inicio */

/* Indicadores da tela inicial. Recolhidos, sao uma grade de numeros; o card expandido
   ocupa a linha inteira (o "dense" puxa os outros para cima, sem buraco na grade). */
.sl-indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    grid-auto-flow: dense;
    gap: 1rem;
}

.sl-indicador {
    --sl-indicador-cor: var(--rz-info);
    box-shadow: inset 4px 0 0 0 var(--rz-border-color, rgba(0, 0, 0, .12));
}

.sl-indicador-warning { --sl-indicador-cor: var(--rz-warning); }
.sl-indicador-info    { --sl-indicador-cor: var(--rz-info); }
.sl-indicador-danger  { --sl-indicador-cor: var(--rz-danger); }

/* Zero fica cinza: so o que pede acao ganha cor. */
.sl-indicador-ativo {
    box-shadow: inset 4px 0 0 0 var(--sl-indicador-cor);
}

.sl-indicador-aberto {
    grid-column: 1 / -1;
    height: auto;
}

.sl-indicador-cabecalho {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.sl-indicador-icone {
    font-size: 1.6rem;
    opacity: .5;
}

.sl-indicador-ativo .sl-indicador-icone {
    color: var(--sl-indicador-cor);
    opacity: 1;
}

.sl-indicador-texto {
    flex: 1;
    min-width: 0;
}

.sl-indicador-numero {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.1;
    min-height: 2.5rem;
    opacity: .45;
}

.sl-indicador-ativo .sl-indicador-numero {
    color: var(--sl-indicador-cor);
    opacity: 1;
}

.sl-indicador-titulo {
    font-weight: 600;
}

.sl-indicador-descricao {
    font-size: .8rem;
    opacity: .7;
}

.sl-indicador-expandir {
    flex-shrink: 0;
}

.sl-indicador-grid {
    margin-top: .75rem;
}

.sl-indicador-grid .rz-data-row {
    cursor: pointer;
}