/* O tema escuro da intranet, das 18h às 5h.
 *
 * Liga junto com a saudação de "Boa noite" e vai até o fim da "Boa
 * madrugada" (ver `main.context_processors.periodo_do_dia`), com a classe
 * `tema-escuro` no <body>. Quem decide é o servidor, pela hora de Cascavel: a
 * página já nasce escura, sem clarão.
 *
 * Funciona em duas camadas:
 *
 * 1. **Os tokens de `marca.css`** ganham valores noturnos. A maior parte da
 *    casa pinta com `var(--superficie)`, `var(--texto)`, `var(--borda)`... e
 *    escurece sem que este arquivo saiba que ela existe.
 * 2. **O AdminLTE 3.0.4 e o Bootstrap** não leem os tokens, e esta versão do
 *    AdminLTE ainda não tinha o próprio modo escuro: cartão, tabela,
 *    formulário, modal e menu suspenso são cobertos aqui, um a um.
 *
 * A marca não muda: o marinho, o água e o verde continuam os do manual. O
 * que muda é o papel — o fundo vira marinho profundo, a superfície um azul
 * acinzentado, e o texto claro.
 */

body.tema-escuro {
    color-scheme: dark;

    --superficie: #182338;
    --superficie-fundo: #0e1627;
    --superficie-alt: #1d2a42;

    --texto: #e3eaf3;
    --texto-suave: #a7b2c3;
    --texto-fraco: #7e8a9c;

    --borda: #2b3954;
    --borda-forte: #3b4b6a;

    /* O vermelho de texto (atrasada, segurança) clareia: o do dia some no
       fundo escuro. Como fundo de selo, com letra branca, continua legível. */
    --erro: #e2604f;
    --erro-fundo: #3b1f22;

    --fundo-coluna: #121c30;
    --linha-sutil: #2b3954;
    --texto-apagado: #7e8a9c;
    --texto-secundario: #a7b2c3;
    --foco-anel: #3d8bd8;

    --papel: #1a2338;
    --papel-borda: #303b55;
    --papel-borda-forte: #44506c;
    --papel-texto: #e3eaf3;
    --papel-texto-suave: #b5bfcd;
    --papel-selo-fundo: #27314a;
    --papel-selo-texto: #cfc8ba;

    --sombra: 0 2px 8px rgba(0, 0, 0, .35);
    --sombra-alta: 0 10px 28px rgba(0, 0, 0, .45);

    background: var(--superficie-fundo);
    color: var(--texto);
}

/* As variáveis da Central de Demandas que guardavam um tom claro fixo. */
body.tema-escuro .kanban-module {
    --kanban-brand-soft: #123640;
    --kanban-surface-soft: #16243a;
    --kanban-brand-deep: #4fc0c9;
    --kanban-green-deep: #7fcf6a;
}

/* ---- O quadro do Kanban ------------------------------------------------- */
/* O fundo do quadro, as colunas e o cabeçalho delas são pintados com tons
   claros fixos em `kanban/css/theme.css`, e não com os tokens: sem este bloco,
   o quadro do departamento ficava claro com os cartões escuros por cima, e o
   nome das colunas sumia. */
body.tema-escuro .kanban-module .kanban-board-wrapper {
    background:
        linear-gradient(135deg, rgba(35, 141, 153, .08), rgba(109, 182, 95, .04)),
        var(--superficie-fundo);
    border-color: var(--borda);
}
body.tema-escuro .kanban-module .kanban-board { scrollbar-color: var(--borda-forte) transparent; }
body.tema-escuro .kanban-module .kanban-column-wrapper {
    background: rgba(255, 255, 255, .03);
    border-color: var(--borda);
    box-shadow: none;
}
body.tema-escuro .kanban-module .kanban-column-header {
    background: var(--superficie);
    border-bottom-color: var(--borda);
}
body.tema-escuro .kanban-module .kanban-column { scrollbar-color: var(--borda-forte) transparent; }
body.tema-escuro .kanban-module .kanban-empty { color: var(--texto-fraco) !important; }
/* O tom suave de cada etapa: o ícone e a contagem do cabeçalho. */
body.tema-escuro .kanban-module .kanban-column-wrapper.status-open { --status-soft: #12303d; }
body.tema-escuro .kanban-module .kanban-column-wrapper.status-in-progress { --status-soft: #3a2f12; }
body.tema-escuro .kanban-module .kanban-column-wrapper.status-canceled { --status-soft: #263240; }
body.tema-escuro .kanban-module .kanban-column-wrapper.status-closed { --status-soft: #173322; }
body.tema-escuro .kanban-module .kanban-column-wrapper.status-repassada { --status-soft: #2a2440; }
body.tema-escuro .kanban-module .kanban-repassadas-aviso { background: #173322; color: #9fdc8f; }
/* Os cards da coluna "Repassadas" têm fundo claro próprio (o tracejado de
   "não é seu" e o verde de "a ponta terminou"): sem estas linhas, o fundo
   ficava claro e o título, já em letra clara, sumia. */
body.tema-escuro .kanban-module .kanban-card--repassada { background: var(--superficie); border-color: #4a4270; }
body.tema-escuro .kanban-module .kanban-card--pronta { background: #15291c; border-color: var(--kanban-green-deep); }
body.tema-escuro .kanban-module .kanban-repassada-engenharia { background: var(--superficie-alt); }
body.tema-escuro .kanban-module .kanban-label-papel { background: #2a2440; color: #c9bdf0; }
body.tema-escuro .kanban-module .kanban-badge-esperando { background: var(--superficie-alt); color: var(--texto-suave); }
body.tema-escuro .kanban-board-total,
body.tema-escuro .kanban-modos {
    background: var(--superficie);
    border-color: var(--borda);
}
body.tema-escuro .kanban-setor-aba { background: var(--superficie); border-color: var(--borda-forte); }
body.tema-escuro .kanban-setor-aba.ativa .badge { background: var(--superficie-alt); color: var(--texto); }
/* A aba ativa troca fundo e letra (`.ativa` usa a cor do texto como fundo): no
   escuro o fundo vira o água profundo, e a letra precisa ser clara. */
body.tema-escuro .kanban-setor-aba.ativa,
body.tema-escuro .kanban-setor-aba.ativa .kanban-setor-count { color: #fff; }
/* O setor interno no cartão e os botões de ação dele (Mover, Delegar...). */
body.tema-escuro .kanban-module .card-setor-interno { background: var(--kanban-brand-soft); color: var(--texto-suave); }
body.tema-escuro .kanban-module .btn-light {
    background: var(--superficie-alt);
    border-color: var(--borda);
    color: var(--texto-suave);
}
body.tema-escuro .kanban-module .btn-light:hover,
body.tema-escuro .kanban-module .btn-light:focus { background: var(--borda); color: var(--texto); }

/* ---- Estrutura do AdminLTE ---------------------------------------------- */
/* O item aberto do submenu: o AdminLTE o pinta de branco, a única mancha
   clara que sobrava na lateral com a página inteira escura. */
body.tema-escuro .nav-sidebar .nav-treeview > .nav-item > .nav-link.active,
body.tema-escuro .nav-sidebar .nav-treeview > .nav-item > .nav-link.active:hover {
    background: rgba(79, 192, 201, .2);
    color: #fff;
}
body.tema-escuro:not(.pagina-com-wallpaper) .content-wrapper { background: var(--superficie-fundo); }
body.tema-escuro .content-wrapper { color: var(--texto); }
body.tema-escuro .main-header.navbar,
body.tema-escuro .main-header.navbar-white {
    background: var(--superficie);
    border-bottom-color: var(--borda);
}
body.tema-escuro .main-header .nav-link,
body.tema-escuro .navbar-light .navbar-nav .nav-link { color: var(--texto-suave); }
body.tema-escuro .navbar-light .navbar-nav .nav-link:hover { color: var(--texto); }
body.tema-escuro .main-footer {
    background: var(--superficie);
    border-top-color: var(--borda);
    color: var(--texto-suave);
}
body.tema-escuro .content-header h1,
body.tema-escuro h1, body.tema-escuro h2, body.tema-escuro h3,
body.tema-escuro h4, body.tema-escuro h5, body.tema-escuro h6 { color: var(--texto); }
/* Só o link "puro", sem classe: os que têm classe são botão, pílula ou etiqueta
   e trazem a própria cor (às vezes sobre fundo claro de propósito). */
body.tema-escuro .content-wrapper a:not([class]) { color: #6cc7e0; }
body.tema-escuro hr { border-top-color: var(--borda); }
body.tema-escuro .text-muted { color: var(--texto-suave) !important; }
body.tema-escuro .text-dark { color: var(--texto) !important; }
body.tema-escuro .bg-white,
body.tema-escuro .bg-light { background-color: var(--superficie) !important; }
/* O AdminLTE força texto escuro nos links dentro de `.bg-white` (`!important`
   dele); no escuro, o texto volta a ser o do tema. */
body.tema-escuro .bg-white,
body.tema-escuro .bg-white > a:not(.btn-primary):not(.btn-success):not(.btn-danger) { color: var(--texto) !important; }
body.tema-escuro .bg-white > a.btn-outline-primary { color: #8cc4f5 !important; }
body.tema-escuro .border,
body.tema-escuro .border-top,
body.tema-escuro .border-bottom { border-color: var(--borda) !important; }

/* ---- Cartões e listas -------------------------------------------------- */
/* `.small-box` fica de fora: é a caixa colorida do AdminLTE (verde, azul...),
   que já traz a cor de fundo e a letra branca dela. */
body.tema-escuro .card,
body.tema-escuro .info-box,
body.tema-escuro .list-group-item,
body.tema-escuro .jumbotron,
body.tema-escuro .callout {
    background-color: var(--superficie);
    border-color: var(--borda);
    color: var(--texto);
}
body.tema-escuro .card-header,
body.tema-escuro .card-footer {
    background-color: var(--superficie-alt);
    border-color: var(--borda);
}
body.tema-escuro .list-group-item-action:hover { background-color: var(--superficie-alt); }

/* ---- Tabelas ----------------------------------------------------------- */
body.tema-escuro .table { color: var(--texto); }
body.tema-escuro .table th,
body.tema-escuro .table td,
body.tema-escuro .table thead th { border-color: var(--borda); }
body.tema-escuro .table thead th,
body.tema-escuro .thead-light th { background-color: var(--superficie-alt); color: var(--texto); }
body.tema-escuro .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .025); }
body.tema-escuro .table-hover tbody tr:hover { background-color: rgba(108, 199, 224, .07); color: var(--texto); }
body.tema-escuro .table-bordered,
body.tema-escuro .table-bordered th,
body.tema-escuro .table-bordered td { border-color: var(--borda); }

/* ---- Formulários ------------------------------------------------------- */
body.tema-escuro .form-control,
body.tema-escuro .custom-select,
/* `form-select` é do Bootstrap 5; o visual antigo de Contratos usa no filtro
   de situação, e ele ficava uma caixa cinza com letra preta. */
body.tema-escuro .form-select,
body.tema-escuro .input-group-text,
body.tema-escuro .select2-container--default .select2-selection--single,
body.tema-escuro .select2-container--default .select2-selection--multiple,
body.tema-escuro .select2-dropdown {
    background-color: #111b2e;
    border-color: var(--borda-forte);
    color: var(--texto);
}
body.tema-escuro .form-control:focus {
    background-color: #111b2e;
    border-color: var(--foco-anel);
    color: var(--texto);
}
body.tema-escuro .form-control::placeholder { color: var(--texto-fraco); }
body.tema-escuro .form-control:disabled,
body.tema-escuro .form-control[readonly] { background-color: var(--superficie-alt); }
body.tema-escuro .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--texto); }
body.tema-escuro .select2-results__option[aria-selected=true] { background-color: var(--superficie-alt); }

/* ---- Botões neutros ---------------------------------------------------- */
body.tema-escuro .btn-default,
body.tema-escuro .btn-light {
    background-color: var(--superficie-alt);
    border-color: var(--borda-forte);
    color: var(--texto);
}
body.tema-escuro .btn-outline-secondary {
    border-color: var(--borda-forte);
    color: var(--texto-suave);
}
body.tema-escuro .btn-outline-secondary:hover,
body.tema-escuro .btn-default:hover,
body.tema-escuro .btn-light:hover {
    background-color: #24324d;
    color: var(--texto);
}
body.tema-escuro .btn-link { color: #6cc7e0; }

/* ---- Menus, modais, abas, paginação ------------------------------------ */
body.tema-escuro .dropdown-menu,
body.tema-escuro .modal-content,
body.tema-escuro .popover,
body.tema-escuro .toast {
    background-color: var(--superficie);
    border-color: var(--borda);
    color: var(--texto);
}
body.tema-escuro .dropdown-item { color: var(--texto); }
body.tema-escuro .dropdown-item:hover,
body.tema-escuro .dropdown-item:focus { background-color: var(--superficie-alt); color: var(--texto); }
body.tema-escuro .dropdown-divider { border-top-color: var(--borda); }
body.tema-escuro .modal-header,
body.tema-escuro .modal-footer { border-color: var(--borda); }
body.tema-escuro .close { color: var(--texto); text-shadow: none; }
body.tema-escuro .nav-tabs { border-bottom-color: var(--borda); }
body.tema-escuro .nav-tabs .nav-link.active {
    background-color: var(--superficie);
    border-color: var(--borda) var(--borda) var(--superficie);
    color: var(--texto);
}
body.tema-escuro .page-link {
    background-color: var(--superficie);
    border-color: var(--borda);
    color: var(--texto);
}
body.tema-escuro .page-item.disabled .page-link { background-color: var(--superficie-alt); color: var(--texto-fraco); }
body.tema-escuro .breadcrumb { background-color: transparent; }
body.tema-escuro .badge-light { background-color: var(--superficie-alt); color: var(--texto); }

/* Avisos: o fundo pastel do Bootstrap ofusca no escuro; fica a cor no texto. */
body.tema-escuro .alert-info { background-color: #10303f; border-color: #1b4a5e; color: #bfe6f3; }
body.tema-escuro .alert-success { background-color: #14321e; border-color: #22502f; color: #c3ebc9; }
body.tema-escuro .alert-warning { background-color: #3a2f10; border-color: #5a4816; color: #f3e1a8; }
body.tema-escuro .alert-danger { background-color: #3b1f22; border-color: #5c2c31; color: #f4c4c6; }
body.tema-escuro .alert-secondary,
body.tema-escuro .alert-light { background-color: var(--superficie-alt); border-color: var(--borda); color: var(--texto); }

/* ---- O que tinha cor fixa clara (medido com o contraste, 27/10/2026) ---- */

/* Os atalhos da página inicial. */
body.tema-escuro .boas-vindas-atalho {
    background: rgba(24, 35, 56, .94);
    border-color: rgba(255, 255, 255, .08);
    color: var(--texto);
}
body.tema-escuro .boas-vindas-atalho small { color: var(--texto-suave); }

/* As pílulas dos atalhos e dos dias no painel. */
body.tema-escuro .kanban-dia {
    background: var(--superficie);
    border-color: var(--borda);
    color: var(--texto);
}
body.tema-escuro .kanban-dia--ativo,
body.tema-escuro .kanban-dia[aria-current="true"] {
    background: var(--marca-agua);
    border-color: var(--marca-agua);
    color: #fff;
}

/* O cabeçalho do painel, que tinha um degradê claro fixo. */
body.tema-escuro .kanban-module .kanban-page-header {
    background:
        radial-gradient(circle at 92% 15%, rgba(109, 182, 95, .12), transparent 24%),
        linear-gradient(118deg, var(--superficie) 0%, #15283b 100%);
}

/* Os botões claros do cabeçalho do painel (PDF, Excel, som). */
body.tema-escuro .kanban-module .kanban-btn-secondary {
    background: var(--superficie-alt);
    border-color: var(--borda-forte);
    color: var(--texto);
}

/* Grupos do painel: o título "⚠ Atrasadas" e o contador. */
body.tema-escuro .kanban-module .kanban-panel-group-title.kanban-panel-group-overdue { color: #f08a8f; }
body.tema-escuro .kanban-module .kanban-panel-group-title .badge { background: var(--superficie-alt); color: var(--texto-suave); }
body.tema-escuro .kanban-panel-restantes { background: rgba(0, 0, 0, .15); border-top-color: var(--borda); }
body.tema-escuro .kanban-badge-overdue { color: #fff; }

/* A ficha da demanda: a situação e o "onde está". */
body.tema-escuro .demanda-status { color: #fff; }
body.tema-escuro .demanda-status.recebido { background: #1f4d7a; }
body.tema-escuro .demanda-status.em-atendimento { color: #1c2430; }
body.tema-escuro .demanda-onde { background: var(--superficie-alt); }
body.tema-escuro .demanda-onde-origem,
body.tema-escuro .demanda-onde-setor,
body.tema-escuro .demanda-dados dt { color: var(--texto-suave); }

/* O número da versão nas notas, que era marinho sobre marinho. */
body.tema-escuro .numero,
body.tema-escuro .nota .versao { color: #7fd3e0; }

/* Botões vazados: a cor do contorno vira a do texto. */
body.tema-escuro .content-wrapper .btn-outline-primary { border-color: #3d8bd8; color: #8cc4f5; }
body.tema-escuro .content-wrapper .btn-outline-secondary { border-color: var(--borda-forte); color: var(--texto-suave); }
body.tema-escuro .content-wrapper .btn-outline-primary:hover { background: #3d8bd8; color: #fff; }

/* A pílula escolhida em "Quando" (concluídas e antigas). */
body.tema-escuro .painel-pilula--ativa,
body.tema-escuro .painel-pilula--ativa:hover { background: #1a6d78; border-color: #1a6d78; color: #fff; }

/* O fundo dos grupos de cards no painel, que era um verde-claro fixo. */
body.tema-escuro .kanban-module .kanban-panel-group { background: var(--superficie-alt); }

/* Rótulos de formulário com cor fixa (cadastro da demanda, indicadores). */
body.tema-escuro .content-wrapper label,
body.tema-escuro #ticket-form .form-label { color: var(--texto); }

/* O passo atual do cadastro da demanda: fundo marinho, letra que era a cor da
   superfície (que no escuro também é escura). */
body.tema-escuro .demanda-passo-link.ativo { background: #1a6d78; border-color: #1a6d78; color: #fff; }

/* O calendário da Agenda (FullCalendar), pelas variáveis dele. */
body.tema-escuro .agenda-calendario {
    --fc-border-color: var(--borda);
    --fc-button-bg-color: var(--superficie-alt);
    --fc-button-text-color: var(--texto);
    --fc-button-hover-bg-color: #24324d;
    --fc-neutral-bg-color: var(--superficie-alt);
    --fc-page-bg-color: var(--superficie);
    --fc-list-event-hover-bg-color: var(--superficie-alt);
}

/* O marinho da marca é a cor de texto de destaque de várias telas (contratos,
   notas, números): sobre o fundo noturno ele sumia. Dentro do conteúdo, à
   noite, o "marinho" de texto vira um azul claro. Os quatro lugares que usam
   o marinho como *fundo* são acertados logo abaixo. */
body.tema-escuro .content-wrapper { --marca-marinho: #8cc4f5; }
body.tema-escuro .pagina-com-wallpaper .content-wrapper,
body.tema-escuro.pagina-com-wallpaper .content-wrapper { background-color: #0a2463; }
body.tema-escuro .contratos-botao-forte:hover,
body.tema-escuro .contratos-botao-forte:focus-visible { background: #1a6d78; border-color: #1a6d78; }

/* Contratos. A folha da tela (`contracts/css/contratos.css`) tem nomes
   próprios de cor, `--transitar-*`, declarados em `:root` a partir dos da
   marca — e uma variável declarada em `:root` guarda o valor que a marca tinha
   lá, o claro. Trocar `--marca-marinho` no conteúdo, como acima, não chegava a
   ela: o número e o valor do contrato e o nome do gestor ficavam em marinho
   sobre o fundo noturno, e o objeto, as datas e o departamento em cinza
   escuro. Redeclarar aqui, no conteúdo, faz os nomes lerem o valor noturno. */
body.tema-escuro .content-wrapper {
    --transitar-marinho: var(--marca-marinho);
    --transitar-cinza: var(--texto-suave);
}
body.tema-escuro .contrato-ficha-objeto p { color: var(--texto); }
body.tema-escuro .contrato-ficha-numeros { background: var(--superficie-alt); }
body.tema-escuro .contrato-ficha-numeros strong:not(.contrato-valor) { color: var(--texto); }
body.tema-escuro .contrato-pessoa { border-color: var(--borda); }
body.tema-escuro .contrato-ficha-acoes { border-top-color: var(--borda); }
/* O topo da ficha é o gradiente da marca nos dois temas: letra branca, como
   no claro (ela vinha de `--superficie`, que à noite é marinho), e o selo
   branco com letra marinho de verdade, não o azul claro do texto noturno. */
body.tema-escuro .contrato-ficha-topo { color: #fff; }
body.tema-escuro .contrato-ficha-topo .contrato-selo { color: #162d58; }

/* O mapa de calor: a caixa de filtros e o resumo tinham cor fixa clara. */
body.tema-escuro .mapa-filtro,
body.tema-escuro .mapa-vazio { background: var(--superficie); border-color: var(--borda); color: var(--texto); }
body.tema-escuro .mapa-resumo { color: var(--texto-suave); }
body.tema-escuro .mapa-pilula span { background: var(--superficie-alt); border-color: var(--borda); color: var(--texto); }

/* Dispositivos: a barra de ações em lote. */
body.tema-escuro .lote-barra { background: var(--superficie-alt) !important; }

/* Link dentro de aviso: a cor do próprio aviso, mais forte. */
body.tema-escuro .alert .alert-link { color: inherit; text-decoration: underline; }

/* O calendário das Férias, desenhado à moda do calendário do Mac. */
body.tema-escuro .mac-cal__barra { background: rgba(24, 35, 56, .92); }
body.tema-escuro .mac-cal__titulo span,
body.tema-escuro .mac-cal__dica { color: var(--texto-suave); }
body.tema-escuro .mac-cal__botao { background: var(--superficie-alt); color: var(--texto); }
body.tema-escuro .mac-cal__botao:hover { background: #24324d; }
body.tema-escuro .mac-cal__num { color: var(--texto); }
body.tema-escuro .mac-cal__dia:nth-child(7n + 1),
body.tema-escuro .mac-cal__dia:nth-child(7n) { background: #15203a; }
body.tema-escuro .mac-cal__dia:hover { background: #1d2c47; }
body.tema-escuro .mac-cal__dia--fora .mac-cal__num,
body.tema-escuro .mac-cal__dia--passado .mac-cal__num { color: var(--texto-fraco); }
body.tema-escuro .mac-cal__dia--hoje .mac-cal__num { color: #fff; }
/* A caixa colorida do AdminLTE fica com a letra branca dela, como de dia. */
body.tema-escuro .small-box,
body.tema-escuro .small-box h3,
body.tema-escuro .small-box p { color: #fff; }
body.tema-escuro .mac-cal__ferias { background: rgba(79, 192, 201, .22); color: #bfeef2; }

/* Imagem com fundo branco (logo, foto de documento) não inverte: fica como é. */