/*
 * Identidade visual nova do Retaguarda aplicada em cima do tema Bootstrap
 * existente (Jidox/CoderThemes) - sem reescrever nenhuma tela. O tema
 * inteiro é dirigido por custom properties com prefixo --ct- (ver
 * public/assets/css/app.css), incluindo variantes por atributo
 * (html[data-topbar-color=X], html[data-menu-color=X]) que têm mais
 * especificidade que um :root simples - por isso as regras abaixo usam
 * !important nas custom properties, não nas propriedades finais, pra
 * ganhar de qualquer combinação de tema/menu que o usuário tenha escolhido
 * sem precisar duplicar cada variante.
 *
 * Cores semânticas (--ct-success/--ct-warning/--ct-danger) foram mantidas
 * como estão de propósito - são feedback de sistema (sucesso/erro/aviso),
 * não identidade de marca. Só --ct-primary (e o que depende dele: links,
 * foco, botões primary) virou a cor de marca.
 */

@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/zilla-slab-600.woff2") format("woff2");
}
@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/zilla-slab-700.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/public-sans.woff2") format("woff2");
}

:root {
  /* fundo do conteudo (era #eeeef1 cinza neutro, agora stone com leve viés petrol) */
  --ct-body-bg: #edefe6 !important;

  /* tipografia */
  --ct-font-sans-serif: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  --ct-body-font-family: var(--ct-font-sans-serif) !important;

  /* fallback antes do partial calcular (evita flash da cor antiga em
     algum ponto sem __corMarcaEmpresa() - normalmente nunca chega aqui,
     ver layouts/partials/marca-cor.blade.php, que e a fonte real) */
  --ct-on-primary: #ffffff;

  /* flyout que aparece ao passar o mouse num item com submenu quando o
     menu lateral esta reduzido (so icones) - variavel separada de
     --ct-menu-bg, ficou esquecida no navy escuro original (#313a46) do
     tema. Usa o mesmo ink das faixas escuras do resto da identidade. */
  --ct-menu-condensed-link-bg: #16241f !important;
}

[data-bs-theme=dark] {
  --ct-body-bg: #12211b !important;
}

/* Cor de marca (--ct-primary e tudo que depende dela: links, foco,
   botao primary, hover/ativo do menu) NAO fica fixa aqui - e calculada
   por empresa a partir da escolha em Configuração > Geral e injetada
   inline em layouts/partials/marca-cor.blade.php (incluido nos dois
   layouts de auth). Aqui só ficam os pedaços realmente estáticos
   (tipografia, fundo neutro) e os bypasses de cor cravada abaixo. */

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.card-title, .page-title-box .page-title {
  font-family: "Zilla Slab", "Iowan Old Style", ui-serif, Georgia, serif;
  font-weight: 700;
}

/* botao "primary" usa a cor calculada pra empresa - texto branco ou
   escuro conforme a luminancia dessa cor (--ct-on-primary, calculado em
   __corMarcaEmpresa()), em vez de branco fixo, que ficaria ilegivel se
   a empresa escolher uma cor clara. */
.btn-primary {
  color: var(--ct-on-primary) !important;
}
/* mesmo problema se repete em ~7 telas usando "bg-primary text-white"
   direto (badges de status, cabecalhos) - regra generica cobre todas de
   uma vez, incluindo qualquer tela nova que reusar esse padrao Bootstrap
   comum, em vez de editar cada uma. */
.bg-primary.text-white,
.bg-primary .text-white {
  color: var(--ct-on-primary) !important;
}

/* body/html em si ficam transparentes nesse tema (quem realmente pinta o
   fundo visivel e um container mais interno que a inspecao nao achou) -
   forcando aqui direto em vez de so na custom property, cobre os dois
   casos sem precisar caçar o container exato. */
html, body {
  background-color: #edefe6 !important;
}
[data-bs-theme=dark] html,
[data-bs-theme=dark] body,
html[data-bs-theme=dark],
body[data-bs-theme=dark] {
  background-color: #12211b !important;
}

/* Duas cores continuavam cravadas em indigo direto no CSS (nao vinham
   da custom property, por isso o override de --ct-primary la em cima
   nao alcançava) - public/css/custom.css:29 (.side-nav-link.active) e
   public/css/home.css:430 (.range-btn.active), os dois com !important.
   Aumentando a especificidade (prefixo "html body") em vez de reordenar
   o <link>, pra nao arriscar quebrar a ordem de outros overrides. */
html body .side-nav-link.active {
  background: var(--ct-primary-bg-subtle) !important;
  color: var(--ct-primary) !important;
}
html body .range-btn.active {
  background: var(--ct-primary) !important;
  color: var(--ct-on-primary) !important;
  box-shadow: 0 6px 18px rgba(var(--ct-primary-rgb), 0.35) !important;
}

/* home.css: icone dos cards de KPI do painel principal, cravado em lilas
   direto (sem !important, mais facil de ganhar so por especificidade).
   O card "Seja Bem Vindo" era estilo inline no proprio home.blade.php
   (nao dava pra pegar por CSS) - corrigido direto la. */
html body .mini-card .icon {
  background: var(--ct-primary-bg-subtle) !important;
  color: var(--ct-primary) !important;
}

/* public/css/custom.css: o menu lateral inteiro (icone, hover, submenu)
   era cravado em indigo direto (#4254BA/#5563f1/#eef1ff), por isso
   continuava destoando mesmo com o resto do painel ja na marca nova.
   Icone ganhou um fundo suave (badge) em vez de so o glifo colorido -
   fica mais parecido com um selo do que um icone solto. */
html body .side-nav-link i {
  color: var(--ct-primary) !important;
  background: var(--ct-primary-bg-subtle);
  /* .side-nav-link tem font-weight:600 (custom.css) pro texto do menu;
     sem isso aqui o icone herdava esse peso e o navegador "engordava"
     o traço na marra (a fonte remixicon so tem 1 variante), lendo como
     negrito mesmo depois de padronizar pra -line. */
  font-weight: 400 !important;
}
html body .side-nav-link:hover {
  background: var(--ct-primary-bg-subtle) !important;
  color: var(--ct-primary) !important;
}
/* Excecao: quando o menu lateral esta reduzido (so icones) e o mouse
   passa num item com submenu, esse MESMO seletor :hover tambem batia
   aqui e ganhava da cor pensada pro flyout (--ct-menu-condensed-link-bg,
   fundo escuro tipo tooltip) - por especificidade tinha que ser mais
   especifico que a regra generica acima, nao so trocar a variavel. */
html[data-sidenav-size=condensed] .side-nav-item:hover > .side-nav-link {
  background: #16241f !important;
  color: #ffffff !important;
}
html body .side-nav-second-level a {
  color: var(--ct-body-color) !important;
}
html body .side-nav-second-level a:hover,
html body .side-nav-second-level a.active {
  border-left-color: var(--ct-primary) !important;
  background: var(--ct-primary-bg-subtle) !important;
  color: var(--ct-primary) !important;
}

/* cartao do usuario no topo do menu lateral: era uma FOTO de banco de
   imagens (app.css: .leftbar-user{background:url(.../small-4.jpg)}),
   nao um gradiente - por isso destoava tanto. Agora e um cartao proprio
   (margem, cantos arredondados, sombra e leve gradiente pra profundidade
   - nao usa color-mix() de propósito, usa --ct-primary-text-emphasis que
   ja vem calculado do PHP, funciona em qualquer navegador) configuravel
   por empresa em Configuração > Geral > "Cor da marca" (--menu-lateral-cor,
   ver __corMenuLateral() em Functions.php) - cai no petrol padrao se a
   empresa nao escolheu nenhuma. */
html body .leftbar-user {
  background: linear-gradient(155deg, var(--menu-lateral-cor, var(--ct-primary)) 0%, var(--ct-primary-text-emphasis) 100%) !important;
  margin: 14px 14px 6px;
  border-radius: 12px;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.4);
}
html body .leftbar-user a {
  color: var(--ct-on-primary) !important;
}
html body .leftbar-user span.fw-semibold {
  font-family: "Zilla Slab", "Iowan Old Style", ui-serif, Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.01em;
}
html body .leftbar-user span.fs-13 {
  opacity: 0.75;
}
html body .leftbar-user img.rounded-circle {
  border: 2px solid color-mix(in srgb, var(--ct-on-primary) 35%, transparent);
}
html body .leftbar-user .ri-arrow-right-s-fill {
  opacity: 0.6;
}

/* Dropdown de notificacoes: o item e um .card e no Bootstrap 5 .card e
   display:flex, entao o .card-body vira flex item com min-width:auto, que
   resolve para min-content. Como o titulo e a descricao sao nowrap, esse
   min-content passava de 440px dentro de um menu de 320px: a caixa estourava
   para os dois lados e o texto aparecia cortado no comeco e no fim ("nta a
   pagar", "GELIS COMERCIO ... CONSTRUCAO LT"). O text-truncate do markup nunca
   chegava a agir porque nada forcava a cadeia a encolher. min-width:0 devolve
   o controle da largura ao dropdown. */
.notification-list .notify-item,
.notification-list .notify-item .card-body,
.notification-list .notify-item .card-body > .d-flex,
.notification-list .notify-item .card-body .flex-grow-1 {
  min-width: 0;
}

/* Com a largura correta, a descricao (nome do fornecedor/cliente) cabe em duas
   linhas em vez de virar reticencia logo nas primeiras palavras. */
.notification-list .notify-item .card-body .noti-item-subtitle {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  line-height: 1.35;
}