/* ==========================================================================
   MACAM Connect — camada de marca
   ==========================================================================
   Valores lidos do site institucional (grupomacam.com.br), nao escolhidos aqui:

     roxo        #562799   acao, navegacao, link, selecao
     ambar       #FEB205   acento, destaque de valor, item ativo
     azul-noite  #2A334E   barra lateral e superficies escuras
     tipografia  Poppins

   O roxo e a primaria e o ambar e o acento — o inverso do peso que as duas
   cores tem no site. Motivo medido: ambar sobre branco da 1,81:1 de contraste
   e reprova para texto; roxo da 9,79:1. O par ambar-sobre-roxo (5,40:1), que e
   o botao do site, sobrevive e vira o botao principal.

   A escala do roxo vive em UNFOLD["COLORS"]["primary"] (macam/base.py), porque
   o unfold precisa dela para gerar hover, foco e tema escuro. Aqui ficam so o
   ambar e o azul-noite, que o unfold nao conhece.
   ========================================================================== */

@import url("poppins.653fd9b18202.css");

:root {
    --macam-ambar: #feb205;
    --macam-ambar-fraco: #faf4e6;
    --macam-ambar-borda: #f7e6c0;
    --macam-ambar-texto: #815a01;   /* ambar 900: 6,18:1 no branco, legivel */
    --macam-noite: #2a334e;
    --macam-noite-forte: #050a30;
    --macam-noite-borda: #39415c;
    --macam-noite-texto: #c9cee0;
    /* #7d86a4 media 3,46:1 sobre o azul-noite — abaixo dos 4,5:1 exigidos para
       texto pequeno, e este token pinta o subtitulo "Connect", os titulos de
       grupo e TODOS os icones da barra lateral, em 84 telas. #9aa2bd da 4,92:1
       sem clarear a barra a ponto de competir com o item ativo. */
    --macam-noite-fraco: #9aa2bd;
}

/* --- Barra lateral: azul-noite ------------------------------------------ */

/* O painel e #nav-sidebar, mas quem pinta o fundo e um <nav class="bg-base-50">
   dentro dele — pintar so o pai nao aparece, fica coberto. */
#nav-sidebar,
#nav-sidebar > nav {
    background-color: var(--macam-noite);
    border-right-color: var(--macam-noite-borda);
}

#nav-sidebar a,
#nav-sidebar .text-font-default-light,
#nav-sidebar .text-font-important-light {
    color: var(--macam-noite-texto);
}

/* Titulo de grupo ("Comercial", "Operacional") e textos de apoio. */
#nav-sidebar h2,
#nav-sidebar .text-font-subtle-light,
#nav-sidebar .text-font-subtle-dark {
    color: var(--macam-noite-fraco);
}

#nav-sidebar a:hover {
    background-color: #222a42;
    color: #ffffff;
}

/* A barra lateral e escura nos DOIS temas, mas o unfold pinta seus estados
   com tokens do tema claro: bg-base-100 no rodape do usuario quando o menu
   esta aberto, e nos itens sob o cursor. Um cinza claro sobre azul-noite
   aparece como um retangulo pastel no meio da barra. */
#nav-sidebar .bg-base-100,
#nav-sidebar .bg-base-50,
#nav-sidebar [class*="hover:bg-base-100"]:hover {
    background-color: #222a42;
}

.dark #nav-sidebar .bg-base-100,
.dark #nav-sidebar .bg-base-50,
.dark #nav-sidebar [class*="hover:bg-base-100"]:hover {
    background-color: #131a3d;
}

/* Item ativo: fundo roxo com texto ambar — o par do botao do site.
   O unfold marca o ativo com a classe .active (ver unfold/helpers/app_list.html);
   junto vem bg-base-100 e text-primary-600, que precisam ser sobrepostos. */
#nav-sidebar a.active,
#nav-sidebar a.active:hover {
    background-color: #562799;
    color: var(--macam-ambar);
}

#nav-sidebar a.active .material-symbols-outlined {
    color: var(--macam-ambar);
}

#nav-sidebar .material-symbols-outlined {
    color: var(--macam-noite-fraco);
}

/* O rodape (nome do usuario) e o subtitulo "Connect" usam as classes de texto
   do unfold, calibradas para fundo claro: sobre o azul-noite somem. */
#nav-sidebar .text-important {
    color: #ffffff;
}

#nav-sidebar .text-subtle {
    color: var(--macam-noite-fraco);
}

#nav-sidebar hr,
#nav-sidebar .border-base-200 {
    border-color: var(--macam-noite-borda);
}

/* Campo de busca da barra lateral. Quem pinta o fundo e o involucro
   (div.bg-white), nao o input — pintar so o input deixa duas faixas brancas
   nas pontas, onde ficam o icone e o atalho de teclado. */
#nav-sidebar .bg-white,
#nav-sidebar input[type="text"],
#nav-sidebar input[type="search"] {
    background-color: #222a42;
    border-color: var(--macam-noite-borda);
    color: #ffffff;
}

#nav-sidebar .bg-white .material-symbols-outlined,
#nav-sidebar input::placeholder {
    color: var(--macam-noite-fraco);
}

/* Tecla de atalho ao lado da busca. */
#nav-sidebar .bg-white kbd,
#nav-sidebar kbd {
    background-color: #2f3a58;
    border-color: var(--macam-noite-borda);
    color: var(--macam-noite-texto);
}

/* --- Botao de acao principal -------------------------------------------- */
/* O pill roxo-com-ambar do site. Reservado ao envio do formulario e ao "novo
   registro": um por tela, senao deixa de destacar o que importa. */

button[name="_save"],
a.addlink,
a.macam-acao {
    background-color: #562799;
    color: var(--macam-ambar);
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-left: 18px;
    padding-right: 18px;
}

button[name="_save"]:hover,
a.addlink:hover,
a.macam-acao:hover {
    background-color: #451f7a;
    color: var(--macam-ambar);
}

/* O "+" do cabecalho ja e um circulo de 38px: nao leva padding lateral nem
   caixa alta, so o par de cores. */
a.addlink {
    padding-left: 0;
    padding-right: 0;
    letter-spacing: normal;
}

/* --- Ambar como acento --------------------------------------------------- */

/* Barra de filtro ativo. */
.macam-filtros .macam-filtro-ativo {
    background-color: var(--macam-ambar-fraco);
    border-color: var(--macam-ambar-borda);
    color: var(--macam-ambar-texto);
}

/* Valor total no cabecalho da listagem e no resumo da O.S. */
.macam-total,
.macam-destaque {
    color: var(--macam-ambar-texto);
}

/* --- Tema escuro --------------------------------------------------------- */
/* O unfold marca o tema escuro com a classe .dark no elemento raiz; nao usa
   prefers-color-scheme nem data-theme. */

.dark #nav-sidebar,
.dark #nav-sidebar > nav {
    background-color: var(--macam-noite-forte);
    border-right-color: #1a2140;
}

.dark #nav-sidebar a:hover {
    background-color: #131a3d;
}

.dark #nav-sidebar input[type="text"],
.dark #nav-sidebar input[type="search"] {
    background-color: #131a3d;
    border-color: #1a2140;
}

.dark .macam-total,
.dark .macam-destaque {
    color: var(--macam-ambar);
}

.dark .macam-filtros .macam-filtro-ativo {
    background-color: #2a2413;
    border-color: #4a3f1c;
    color: #fec748;
}

/* --- Tela de acesso ------------------------------------------------------ */
/* A capa e uma foto em retrato (1131x1600) num painel largo: no enquadramento
   central o logotipo e a assinatura "aqui a gente faz bonito" ficam cortados
   pela borda direita. Ancorar a esquerda mantem os dois visiveis. */

body.login .bg-cover {
    background-position: 25% center;
}

/* --- Autocomplete do django-autocomplete-light --------------------------- */
/* O DAL traz o CSS proprio do select2, que nao conhece os tokens do unfold: na
   escalacao do evento o campo de colaborador saia como uma caixa cinza fina,
   visivelmente diferente de todos os outros campos da mesma linha. */

/* !important e necessario: o CSS do select2 vem no form.media, que o Django
   injeta DEPOIS das folhas do unfold — sem ele estas regras perdem. */
.select2-container--default .select2-selection--single {
    background-color: #ffffff !important;
    border: 1px solid #e6e4ec !important;
    border-radius: 6px !important;
    height: 38px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: inherit;
    line-height: 36px !important;
    padding-left: 12px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #562799;
    box-shadow: 0 0 0 3px #efeaf6;
}

.dark .select2-container--default .select2-selection--single {
    background-color: var(--color-base-900, #18181b);
    border-color: var(--color-base-700, #3f3f46);
}

.dark .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-font-default-dark, #d4d4d8);
}

/* --- Barra de ferramentas do cabecalho ---------------------------------- */
/* O django-import-export injeta <ul class="object-tools"> sem estilo nenhum:
   display block e <li> list-item. O link "Exportar" caia por cima do botao
   "+" do cabecalho, os dois na mesma coluna. Aqui a lista vira uma linha. */

ul.object-tools {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.object-tools > li {
    display: flex;
    margin: 0;
}

/* "Exportar" e acao secundaria: fica com a mesma metrica dos outros botoes
   secundarios da tela, sem competir com a acao principal. */
a.export_link,
a.import_link {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 14px;
    border: 1px solid #e6e4ec;
    border-radius: 6px;
    background-color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

a.export_link:hover,
a.import_link:hover {
    background-color: #f7f6f9;
}

.dark a.export_link,
.dark a.import_link {
    background-color: var(--color-base-900, #18181b);
    border-color: var(--color-base-700, #3f3f46);
}

/* --- CKEditor ----------------------------------------------------------- */
/* O CKEditor 4.22.1 desenha um balao vermelho "This CKEditor version is not
   secure" POR CIMA do texto que a pessoa esta editando. O aviso e para quem
   mantem o sistema, nao para quem escreve a descricao da O.S. — a atualizacao
   do pacote continua pendente, mas o balao sai da frente do conteudo. */

.cke_notification_warning,
.cke_notifications_area {
    display: none !important;
}

/* --- Contraste do tema escuro ------------------------------------------- */
/* A escala do roxo foi calibrada contra BRANCO (primary-600 da 9,79:1 la).
   Sobre o fundo escuro do unfold ela desaba: primary-600 sobre #101828 mede
   1,81:1 e primary-500 mede 3,17:1 — os dois sao usados como texto de link,
   de "Adicionar outro(a)" e do numero da pagina ativa. No escuro o texto
   passa a usar primary-300 (7,3:1), que e a mesma cor, so que legivel. */

.dark .text-primary-600,
.dark .text-primary-500,
.dark a.text-primary-600,
.dark a.text-primary-500,
.dark .add-row a,
.dark .inline-group .add-row a,
.dark a.showall {
    color: #b99ee1;
}

.dark .text-primary-600 .material-symbols-outlined,
.dark .add-row a .material-symbols-outlined,
.dark .text-link {
    color: #b99ee1;
}

/* Excecao a regra acima: quando o proprio elemento carrega o FUNDO roxo, o
   texto claro nao vale — lavanda sobre roxo mede 4,21:1. Ali vale o par que a
   marca ja usa, ambar sobre roxo (5,40:1). Foi a regra anterior que criou este
   caso ao pintar o icone sem olhar o fundo em que ele estava. */
.dark .bg-primary-600,
.dark .bg-primary-600 .material-symbols-outlined,
.dark .material-symbols-outlined.bg-primary-600 {
    color: var(--macam-ambar);
}

/* A bolha de ajuda "?" herda font-subtle-LIGHT tambem no tema escuro — o
   unfold aplica o token do tema errado. 3,67:1 sobre a superficie escura. */
.dark .cursor-help,
.dark [class*="rounded-de"].absolute.border.flex.font-medium {
    color: var(--color-font-subtle-dark, #a8b0c7);
}

/* Preenchimentos de marca continuam no roxo cheio: sobre eles o texto e
   branco ou ambar, e o par ja foi medido. So o TEXTO em roxo muda. */

/* --- Contraste de icones estruturais ------------------------------------ */
/* Todos os icones de acao do unfold herdam text-base-400 (#99a1af): 2,60:1
   sobre branco, abaixo do minimo de 3:1 para elemento nao textual. Nao sao
   decoracao — sao o chevron que diz onde voce esta, a lupa da busca, o
   download do anexo, os tres pontos do menu, a ordenacao da coluna. Medido em
   56 telas. #6a7282 da 4,84:1 e continua discreto ao lado do texto.

   A classe e sobrescrita no lugar do seletor por seletor: e a mesma decisao
   aplicada uma vez, e acompanha telas que ainda nem existem. */

/* Corrigido no TOKEN, nao em cada seletor: text-base-400, text-icon e os
   icones que herdam dele saem todos do mesmo --color-base-400. Mudar a
   variavel conserta chevron, lupa, download, tres-pontos, expand_more e a
   bolha de ajuda de uma vez — e vale para as telas que ainda nao existem. */
:root:not(.dark) {
    --color-base-400: oklch(52% 0.028 261);   /* ~#6a7282 · 4,84:1 no branco */
}

/* No escuro o mesmo #6a7282 cai para 3,67:1 — o ajuste do claro nao serve
   para os dois temas e precisa do seu proprio valor. */
.dark {
    --color-base-400: oklch(76% 0.022 261);   /* ~#a8b0c7 · legivel no escuro */
}

/* A barra lateral tem token proprio: e superficie escura nos dois temas. */
#nav-sidebar .text-base-400,
#nav-sidebar .material-symbols-outlined {
    color: var(--macam-noite-fraco);
}

/* Etiqueta verde de "Aprovada": media 4,50:1, exatamente em cima do minimo.
   Um degrau mais escuro no texto tira a etiqueta da corda bamba sem mudar a
   cor que o operador associa ao estado. Só no tema CLARO: no escuro o fundo da
   etiqueta e escuro e escurecer o texto derruba o contraste para 3,54:1. */
:root:not(.dark) #result_list .bg-green-100,
:root:not(.dark) .bg-green-100.text-green-600 {
    color: #15803d;
}

/* O "+" dos cartoes do indice fica sobre o roxo da marca, mas herda
   text-base-400 do unfold — cinza sobre roxo mede 2,02:1. A cor do par ja
   estava definida na regra do botao; falta ganhar em especificidade. */
a.addlink .material-symbols-outlined,
a.addlink.text-base-400 .material-symbols-outlined {
    color: var(--macam-ambar);
}

/* O "+" de "adicionar relacionado" (novo cliente, novo local) usa text-icon,
   que no escuro mede 4,21:1. */
.dark .related-widget-wrapper-link .material-symbols-outlined,
.dark .add-related .material-symbols-outlined {
    color: #9aa2bd;
}

/* --- Foco visivel -------------------------------------------------------- */
/* O campo de busca da barra lateral (#nav-filter) nao tinha outline NEM
   box-shadow ao receber foco: quem navega por teclado perdia o cursor em
   todas as telas. Mesmo anel do resto do sistema. */

#nav-filter:focus,
#nav-filter:focus-visible,
#searchbar-submit:focus-visible {
    outline: 2px solid var(--macam-ambar);
    outline-offset: 2px;
}

/* Valor vencido na faixa de resumo: o vermelho de estado ja usado nas
   etiquetas, para o numero que exige acao hoje. */
.macam-vencido {
    color: #b91c1c;
}

.dark .macam-vencido {
    color: #fca5a5;
}

/* --- Seletor de tema no menu do usuario ---------------------------------- */
/* Os tres botoes (Claro / Escuro / Sistema) somam 274px dentro de uma caixa de
   261px na barra lateral: o ultimo saia cortado pela metade. Reduzir o respiro
   lateral faz caberem; o flex-wrap garante que, em qualquer traducao mais
   longa, eles quebrem para a linha de baixo em vez de vazar. */

#nav-sidebar nav > div:first-child {
    flex-wrap: wrap;
}

#nav-sidebar nav > div:first-child > a {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}