/*
 * Variaveis de marca — azul extraido da foto real da frota da Sape (fundo-login.jpg).
 * Nunca usar hex fixo direto nos templates/CSS de tela: sempre var(--bs-primary) e as
 * demais variaveis do Bootstrap (--bs-border-color, --bs-tertiary-bg etc.), para o tema
 * escuro recalcular sozinho.
 */
:root {
    --bs-primary: #0b63ce; /* azul da marca Sape (extraido das cores reais da frota) */
    --bs-primary-rgb: 11, 99, 206;
    --bs-primary-2: #29b6f6; /* tom mais claro, usado em gradientes (logo, tela de login) */
    /* Cor de fundo REAL da pagina (body) — pedido do Diego, 08/09/2026, vendo o
       dashboard de Acompanhamento Diario expandido (position:fixed, tela cheia)
       com um fundo diferente do resto da tela: "deve ter a mesma cor de fundo da
       tela quando ele nao esta expandido". A causa: o body no tema escuro usa uma
       cor FIXA (#262b35, ver `html[data-bs-theme="dark"] body` embaixo), que NAO
       é o mesmo valor de --bs-body-bg (variavel padrao do Bootstrap) — entao
       qualquer overlay que use var(--bs-body-bg) pra imitar o fundo da pagina
       (telas fullscreen tipo essa) ficava com um cinza levemente diferente. Esta
       variavel é a fonte única: no claro cai no --bs-body-bg do Bootstrap mesmo
       (nao tem override aqui), no escuro é redefinida pra #262b35 — qualquer tela
       que precisar "imitar o fundo da pagina" deve usar var(--pagina-bg), nunca
       var(--bs-body-bg) direto nem o hex fixo. */
    --pagina-bg: var(--bs-body-bg);
}

html, body {
    height: 100%;
    margin: 0;
    /* Trava a rolagem no nivel de documento/body de proposito: o layout inteiro
       (.painel-shell, height:100vh + overflow:hidden) ja garante que nada deveria
       escapar dele, mas arredondamento de subpixel (zoom do navegador, DPI da tela)
       pode deixar o body 1-2px mais alto que 100vh em algumas maquinas, criando uma
       barra de rolagem residual quase vazia mas visivel/clicavel no canto da janela
       (bug reportado pelo usuario em 21/08/2026 na tela de Confirmar Importacao:
       "a barra de rolagem e na tela de fora, e ela existe"). Toda rolagem de
       verdade do sistema acontece dentro de .content-scroll (ou de um scroll
       interno de painel, tipo .painel-conferencia-scroll) - nunca no documento
       inteiro - entao isso e seguro pro app inteiro, nao so essa tela. */
    overflow: hidden;
}

.painel-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* Sidebar escura, mesmo padrão visual do TMS W Ávila (menu lateral escuro, independente
   do tema claro/escuro do conteúdo — só a área de conteúdo/topbar reagem ao data-bs-theme).
   Cor de destaque em hover/ativo usa var(--bs-primary), então herda sozinho o azul da
   marca Sape (ou qualquer ajuste futuro) sem precisar duplicar hex aqui. */
.sidebar {
    width: 260px;
    flex: 0 0 auto;
    background-color: #1c1f26;
    color: #fff;
    transition: width 0.2s ease;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.sidebar.collapsed {
    width: 70px;
}

.sidebar .logo-area {
    height: 70px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.sidebar .logo-area img {
    max-width: 44px;
    max-height: 44px;
    transition: max-width 0.2s ease;
}

.sidebar.collapsed .logo-area img {
    max-width: 34px;
    max-height: 34px;
}

/* Rodapé da sidebar com "Bem-vindo, <nome>" — mesmo padrão visual do TMS W Ávila. Sem o
   badge de contagem regressiva de sessão de lá (`#badge-sessao`) de propósito: a Sape
   ainda não tem a lógica de expirar sessão por inatividade que aquele badge mostra —
   adicionar aqui se/quando essa feature entrar (ver SESSION_COOKIE_AGE em settings.py). */
.sidebar-footer {
    flex-shrink: 0;
    padding: .9rem 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    gap: .7rem;
}

.sidebar-footer i {
    font-size: 1.4rem;
    color: var(--bs-primary);
    flex-shrink: 0;
}

.sidebar-footer-texto {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-footer-label {
    font-size: .8rem;
    color: #8a8d95;
}

.sidebar-footer-nome {
    font-size: .85rem;
    color: #fff;
    font-weight: 500;
}

.sidebar.collapsed .sidebar-footer-texto {
    display: none;
}

.sidebar-menu-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .15) transparent;
}

.sidebar-menu-scroll::-webkit-scrollbar {
    width: 5px;
}

.sidebar-menu-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .15);
    border-radius: 10px;
}

.sidebar .nav-link {
    color: #c7cad1;
    padding: .7rem 1.2rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    white-space: nowrap;
}

.sidebar .nav-link .menu-label {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background-color: rgba(var(--bs-primary-rgb), .18);
    color: var(--bs-primary-2, var(--bs-primary));
}

.sidebar .nav-link i {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.sidebar.collapsed .nav-link .menu-label {
    display: none;
}

/* Submenu (ex: "Gestão Logística" > Gestão de Viagem / Mapa da Frota) — mesmo padrão
   visual do TMS W Ávila: fundo um pouco mais claro que o resto da sidebar, fonte levemente
   menor, seta que gira ao abrir/fechar. */
.sidebar .submenu {
    background-color: rgba(255, 255, 255, .05);
}

.sidebar .submenu .nav-link {
    font-size: .9rem;
}

.sidebar .nav-link[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

.sidebar .nav-link .bi-chevron-down {
    transition: transform .2s ease;
    margin-left: auto;
}

.sidebar.collapsed .nav-link .bi-chevron-down {
    display: none;
}

/* Topbar e conteúdo continuam claros/escuros de acordo com o tema (ver seleção de tema
   mais abaixo) — mesmo padrão do TMS W Ávila. */
.topbar {
    height: 70px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--bs-border-color);
    padding: 0 1.5rem;
    flex: 0 0 auto;
}

#btn-toggle-sidebar {
    flex-shrink: 0;
}

#btn-tema {
    flex-shrink: 0;
}

.main-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.content-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.5rem;
}

.content-header {
    flex: 0 0 auto;
    padding: 1rem 1.5rem 0;
}

.content-footer {
    flex: 0 0 auto;
    padding: 0 1.5rem 1rem;
}

/* Formulários de cadastro — ver CLAUDE.md */
.form-wrap {
    max-width: 900px;
    margin: 0 auto;
}

.form-wrap-sm {
    max-width: 500px;
    margin: 0 auto;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.form-actions .btn {
    min-width: 110px;
}

.linha-campos {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* campo-w-mini (120px) — campo numérico curto (Nº de Eixos, Nº de Frota em
   frotas/veiculos_form.html). Criado em 21/08/2026 a 80px (menor que campo-w-xxs,
   100px), depois ajustado no mesmo dia pro usuário pedir explicitamente metade da
   largura do campo Modelo (240px = campo-w-md) pra esses 2 campos — como só esses
   2 usam essa classe (nenhuma outra tela ainda), redefinir o valor aqui é mais
   simples que criar mais uma classe nova. CLAUDE.md documenta essa escala como
   reaproveitável em qualquer tela, não escopar largura nova só num template. */
.campo-w-mini { width: 120px; }
.campo-w-xxs { width: 100px; }
.campo-w-num { width: 130px; }
.campo-w-sm  { width: 170px; }
.campo-w-md  { width: 240px; }
.campo-w-lg  { width: 340px; }
.campo-w-xl  { width: 460px; }
.campo-w-full { width: 100%; }

/* Grid: cabeçalho fixo (sticky) e só o corpo da tabela rola (não a tela inteira) —
   antes só existia o wrapper flex (.grid-card), sem `height: 100%` nem regra pro
   `.table-responsive` rolar; sem isso, quem acabava rolando era o `.content-scroll`
   (a tela toda), não a grid — bug relatado pelo usuário em 21/08/2026 comparando com
   a grid de Veículos/Implementos do TMS W Ávila ("a barra de rolagem dentro da grid,
   não fora na tela"). Mesmo padrão de lá: o card ocupa 100% do espaço disponível
   (flex-grow do pai) e é o `.table-responsive` que ganha o scroll de verdade. */
.grid-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.grid-card .table-responsive {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Cabeçalho fixo ao rolar o corpo — sticky em cada <th> (não só no <thead>), usando
   `var(--bs-table-bg)` (a mesma variável que a classe `.table-light` do Bootstrap já
   define — clara ou escura conforme o tema, ver bloco "Modo escuro" mais abaixo —
   nunca hex fixo, CLAUDE.md) pra garantir que o fundo do cabeçalho cubra o conteúdo
   que passa por baixo ao rolar. As duas primeiras sombras da box-shadow mascaram a
   costura de baixo do cabeçalho com a própria cor de fundo; as duas últimas
   redesenham a borda vertical entre colunas (que a camada de composição própria do
   sticky, via `isolation`+`translateZ`, às vezes deixa de pintar) na cor real de
   borda do tema. Mesmo padrão do TMS W Ávila. */
.grid-card thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--bs-table-bg, var(--bs-tertiary-bg));
    box-shadow:
        0 1px 0 0 var(--bs-table-bg, var(--bs-tertiary-bg)), 0 -1px 0 0 var(--bs-table-bg, var(--bs-tertiary-bg)),
        -1px 0 0 0 var(--bs-border-color), 1px 0 0 0 var(--bs-border-color);
    isolation: isolate;
    transform: translateZ(0);
}

/* Centraliza o conteúdo de toda coluna de grid por padrão — pedido do Diego em
   23/08/2026 ("todas as telas de cadastros, centralize as informações nas colunas.
   Hoje elas estão alinhadas à esquerda"). Aplicado aqui, uma vez, em `.grid-card`
   (compartilhado por toda grid do sistema) em vez de editar célula por célula em cada
   template — DRY, e cobre telas futuras automaticamente. Sem `!important` de propósito:
   qualquer coluna que já tenha um alinhamento explícito (ex: `.text-end` na coluna
   Ações, `.text-center` nos ícones de Sascar/Telemetria) continua valendo, porque as
   classes utilitárias do Bootstrap (`.text-start`/`.text-center`/`.text-end`) usam
   `!important` e vencem esta regra — só o que não tinha alinhamento nenhum (o padrão
   `left` do navegador) passa a centralizar. Exceção pedida explicitamente: a coluna
   "Nome" do cadastro de Pessoas manteve `.text-start` (ver `pessoas_lista.html`) —
   nome de pessoa lê melhor alinhado à esquerda, texto mais comprido que as outras
   colunas da mesma grid. */
.grid-card table th,
.grid-card table td {
    text-align: center;
}

/* Ordenação por coluna nas grids (clicar no título do cabeçalho alterna crescente/
   decrescente) — ver `frotas/veiculos_lista.html` como referência e `proximo_sort`/
   `aplicar_ordenacao` (core_extras.py/view_helpers.py). Mesmo padrão do TMS W Ávila.
   Adicionado em 21/08/2026. */
.th-sortable {
    white-space: nowrap;
}

.th-sortable:hover {
    background-color: rgba(0, 0, 0, .035);
}

html[data-bs-theme="dark"] .th-sortable:hover {
    background-color: rgba(255, 255, 255, .06);
}

.th-inner {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.th-titulo {
    cursor: pointer;
    user-select: none;
}

a.th-titulo:hover {
    text-decoration: underline !important;
}

/* Barra de rolagem fina, padrão pra qualquer lista que precise de scroll de verdade */
.dashboard-scroll-fino {
    scrollbar-width: thin;
    scrollbar-color: var(--bs-border-color) transparent;
}

.btn-acao {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Célula com texto longo: corta com reticências, mantém a linha da tabela na altura
   normal — usar `title="{{ valor }}"` no <td> pra mostrar o texto completo no hover.
   Mesmo padrão do TMS W Ávila. */
.celula-truncada {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.legenda-info {
    font-weight: 400;
    color: #adb5bd;
    cursor: help;
    font-size: .9rem;
    vertical-align: middle;
}

.legenda-info:hover {
    color: #6c757d;
}

html[data-bs-theme="dark"] .legenda-info {
    color: #6c757d;
}

html[data-bs-theme="dark"] .legenda-info:hover {
    color: #adb5bd;
}

/* Barra de progresso fininha no topo da tela (19/09/2026, pedido do Diego: "inserir uma
   barra de status, bem fininha, para cada tela que tenha requisição que fica
   processando") — feedback visual em navegação/formulário/requisição AJAX demorada.
   Comportamento em static/js/barra-progresso.js (TMSBarraProgresso). Largura controlada
   via JS (style.width inline); aqui só o visual: fixa no topo, acima de tudo (inclusive
   a sidebar), cor da marca, opacidade que soma/some suavemente. */
#barra-progresso {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--bs-primary);
    z-index: 2000;
    opacity: 0;
    transition: width .2s ease, opacity .4s ease;
    pointer-events: none;
}

/* Modo escuro — ativado via atributo data-bs-theme="dark" no <html> (Bootstrap 5.3 já
   adapta sozinho cards, tabelas, formulários etc.). A sidebar continua igual nos dois
   temas (mesmo padrão do TMS W Ávila); só cobrimos aqui as peças com cor fixa que não
   fazem parte do Bootstrap padrão. */
html[data-bs-theme="dark"],
html[data-bs-theme="dark"] body {
    background-color: #262b35;
}
html[data-bs-theme="dark"] {
    --pagina-bg: #262b35; /* ver comentário de --pagina-bg no :root, no topo do arquivo */
}

html[data-bs-theme="dark"] .topbar {
    background-color: #262b35;
    border-bottom-color: #363c48;
}

html[data-bs-theme="dark"] #btn-toggle-sidebar,
html[data-bs-theme="dark"] #btn-tema {
    color: #c7cad1;
}

/* .table-light (cabeçalho da grid + barra "DASHBOARD"/"GESTÃO LOGÍSTICA" etc. na matriz
   de Permissões por Perfil) fixa --bs-table-bg/--bs-table-color claros direto na classe,
   independente do tema — por isso precisa sobrescrever as duas variáveis aqui, não só o
   background-color. --bs-table-border-color também entra pra herdar var(--bs-border-color)
   (a mesma que o Bootstrap já recalcula sozinho pro tema escuro), senão a borda entre
   células continua usando o cinza claro padrão do .table-light, bem visível/errada no
   fundo escuro. Mesmo padrão do TMS W Ávila. */
html[data-bs-theme="dark"] thead.table-light,
html[data-bs-theme="dark"] thead.table-light tr,
html[data-bs-theme="dark"] tr.table-light,
html[data-bs-theme="dark"] tr.table-light > td,
html[data-bs-theme="dark"] tr.table-light > th {
    --bs-table-bg: #2f3542;
    --bs-table-color: #e9ecef;
    --bs-table-border-color: var(--bs-border-color);
    background-color: #2f3542;
    color: #e9ecef;
}

html[data-bs-theme="dark"] thead.table-light th {
    background-color: #2f3542 !important;
    color: #e9ecef;
}

/* Logo no cartão da tela de login (ver accounts/templates/accounts/login.html) — no lugar
   do título "Acessar o sistema" que existia antes. 76px no desktop; menor em telas
   estreitas (ver media query no bloco Responsivo mais abaixo) pra não ficar desproporcional
   em relação aos campos do formulário. */
.login-card-logo {
    height: 120px;
    width: auto;
}

/* ==========================================================================
   Responsivo (celular) — criado em 16/08/2026. Breakpoint único em 992px
   (`lg` do Bootstrap): acima disso é "desktop" (sidebar sempre visível,
   encolhível pra ícones via #btn-toggle-sidebar); abaixo é "celular" (sidebar
   vira uma gaveta fora da tela por padrão, o mesmo #btn-toggle-sidebar abre/
   fecha ela por cima do conteúdo, com um fundo escurecido atrás
   `.sidebar-backdrop`). O JS de base_painel.html decide qual dos dois
   comportamentos aplicar checando a largura da janela no clique do botão.
   Ainda não existe padrão equivalente no TMS W Ávila (o layout com sidebar de
   lá também não é adaptado pra celular hoje) — este é o padrão novo da Sape,
   pra reaproveitar em qualquer tela nova daqui pra frente.
   ========================================================================== */

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 1040;
}

.sidebar-backdrop.show {
    display: block;
}

@media (max-width: 991.98px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1045;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 4px 0 24px rgba(0, 0, 0, .35);
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    /* Na gaveta do celular a sidebar é sempre "expandida" — o estado
       `collapsed` (modo só-ícone) é uma preferência de desktop, salva em
       localStorage, que não faz sentido aqui: neutraliza a largura/ocultação
       de rótulos que ele causaria se o usuário tivesse deixado colapsada no
       último acesso pelo computador. */
    .sidebar.collapsed {
        width: 260px;
    }

    .sidebar.collapsed .nav-link .menu-label {
        display: inline;
    }

    .sidebar.collapsed .nav-link .bi-chevron-down {
        display: inline-block;
    }

    .sidebar.collapsed .sidebar-footer-texto {
        display: block;
    }

    /* Botão de tema/logout continuam na topbar; some só o nome do usuário
       (já mostrado no rodapé da sidebar) pra sobrar espaço em telas bem
       estreitas. */
    .topbar .nome-usuario-topbar {
        display: none;
    }

    .topbar {
        padding: 0 1rem;
    }

    .content-scroll {
        padding: 1rem;
    }

    .content-header {
        padding: .75rem 1rem 0;
    }

    .content-footer {
        padding: 0 1rem .75rem;
    }
}

/* Campos de formulário com largura fixa (ver CLAUDE.md, seção "Telas de
   cadastro") — em telas de celular a largura fixa (ex.: `.campo-w-xl` =
   460px) estoura a tela; abaixo de 576px (`sm` do Bootstrap) todo campo
   dentro de `.linha-campos` vira largura total, empilhado verticalmente. */
@media (max-width: 575.98px) {
    .campo-w-mini,
    .campo-w-xxs,
    .campo-w-num,
    .campo-w-sm,
    .campo-w-md,
    .campo-w-lg,
    .campo-w-xl {
        width: 100%;
    }

    /* Logo do cartão de login (120px no desktop, ver regra .login-card-logo acima) —
       mesmo tamanho no celular por enquanto (ajuste sendo calibrado). */
    .login-card-logo {
        height: 120px;
    }
}

/* Logo em marca d'água da tela inicial (ver core/templates/core/tela_inicial.html) — só
   decoração de fundo, nunca deve competir com o conteúdo nem ser selecionável/clicável. */
.tela-inicial-marca-dagua-wrap {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tela-inicial-marca-dagua {
    width: 42%;
    max-width: 420px;
    height: auto;
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
}

/* Widget de autocomplete customizado (static/js/autocomplete.js) — substitui
   <datalist>, usado em qualquer campo "desacoplado" (ver CLAUDE.md, seção "Telas de
   cadastro", técnica de campo desacoplado). Lista posicionada logo abaixo do input via
   wrapper `position: relative` criado pelo próprio JS. Cores via variáveis do Bootstrap
   (nunca hex fixo) pra funcionar igual no tema claro e escuro. */
.autocomplete-lista {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    max-height: 260px;
    overflow-y: auto;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    margin-top: 0.125rem;
}

.autocomplete-item {
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.autocomplete-item:hover,
.autocomplete-item.active {
    background: var(--bs-primary-bg-subtle, var(--bs-tertiary-bg));
    color: var(--bs-primary);
}