/* ============================================================
   Codewise NFSe — camada de MARCA sobre o design system do QiLog.

   Ordem de carga obrigatória (App.razor):
     bootstrap.min.css → bootstrap-icons → erp.css → theme-modern.css
     → brand-nfse.css → app.css

   O `erp.css` e o `theme-modern.css` são cópias fiéis do QiLog (vendored):
   NÃO editar aqueles dois. Toda diferença do NFSe mora AQUI — assim uma
   evolução do design system lá continua sendo um `cp` simples pra cá.

   O que muda: só a identidade. Estrutura, tipografia, espaçamento, sombras,
   densidade e componentes seguem idênticos ao QiLog de propósito — é isso
   que faz os dois parecerem o mesmo produto.
   ============================================================ */

:root {
  /* === MARCA CODEWISE — azul institucional + laranja de destaque === */
  --brand-primary:             #1763a9;
  --brand-primary-hover:       #12518c;
  --brand-primary-pressed:     #0e4272;
  --brand-primary-soft:        #eff6fc;
  --brand-primary-soft-border: #bfd9ee;
  --brand-primary-ring:        rgba(23, 99, 169, 0.15);

  /* Laranja: acento de destaque, NÃO cor de ação primária. Usado em
     chips/badges de atenção e no realce da marca. Botão primário continua
     azul — laranja em botão de ação compete com o vermelho de perigo. */
  --brand-accent:              #e8821e;
  --brand-accent-hover:        #cf7215;
  --brand-accent-soft:         #fef6ed;
  --brand-accent-soft-border:  #f8d9b4;
  --brand-accent-on:           #8a4a08;

  /* O `accent` do erp.css (azul informativo) é usado em ícones/links de
     apoio; alinhamos com a marca pra não conviverem dois azuis diferentes. */
  --accent:   #1763a9;
  --accent-d: #12518c;
  --accent-l: #e7f1f9;
}

/* Bootstrap: as classes .btn-primary/.text-primary/.bg-primary vêm com o azul
   padrão do framework. Reapontamos para a marca — sem isso, metade da tela
   fica azul-Codewise e a outra metade azul-Bootstrap. */
:root {
  --bs-primary:     #1763a9;
  --bs-primary-rgb: 23, 99, 169;
  --bs-link-color:  #1763a9;
  --bs-link-hover-color: #12518c;
  --bs-link-color-rgb: 23, 99, 169;
}

/* ⚠️ O `!important` abaixo NÃO é preguiça de especificidade.
   O theme-modern.css tem uma seção "CORES VIVAS" que crava
   `background: #2563eb !important` nos botões. Sem repetir o `!important`
   aqui, a marca perde e metade da tela volta a ser azul-QiLog — foi
   exatamente o que o primeiro screenshot deste re-skin mostrou.
   Mesma especificidade + ambos `!important` → vence quem carrega por
   último, e brand-nfse.css é carregado depois. */
.btn-primary,
.btn-primary:visited {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary-hover) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--brand-primary-hover) !important;
  border-color: var(--brand-primary-pressed) !important;
  color: #fff !important;
}
.btn-primary:active {
  background: var(--brand-primary-pressed) !important;
  border-color: var(--brand-primary-pressed) !important;
}

.btn-outline-primary {
  background: var(--brand-primary-soft) !important;
  color: var(--brand-primary-hover) !important;
  border-color: var(--brand-primary) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: var(--brand-primary) !important;
  color: #fff !important;
  border-color: var(--brand-primary-hover) !important;
}
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
  background: var(--brand-primary) !important;
  color: #fff !important;
  border-color: var(--brand-primary-hover) !important;
}

/* Cabeçalho de modal — no QiLog é sempre a cor da marca (#2563eb cravado). */
.modal-header {
  background: var(--brand-primary);
  border-bottom-color: var(--brand-primary-hover);
}

/* ============================================================
   ACENTO LARANJA — utilitários de marca
   ============================================================ */

/* Chip/badge de destaque da marca (ex.: plano, franquia, excedente). */
.pill.pill-marca,
.badge-marca {
  background: var(--brand-accent-soft);
  border: 1px solid var(--brand-accent-soft-border);
  color: var(--brand-accent-on);
}

/* Botão de ação secundária com peso de marca — usar com parcimônia,
   tipicamente 1 por tela (ex.: "Emitir NFSe"). */
.btn-marca {
  background: var(--brand-accent);
  border: 1px solid var(--brand-accent);
  color: #fff;
}
.btn-marca:hover,
.btn-marca:focus {
  background: var(--brand-accent-hover);
  border-color: var(--brand-accent-hover);
  color: #fff;
}

/* ============================================================
   SIDEBAR — só o ACENTO muda

   A base slate-950 (#0f172a), a densidade, os tamanhos e a estrutura ficam
   idênticos ao QiLog — é o que dá o reconhecimento imediato de "mesmo
   produto". O que troca é o azul de realce (#2563eb → azul Codewise) e o
   indicador do item ativo, que ganha o laranja da marca.

   Os seletores abaixo espelham EXATAMENTE os de theme-modern.css (`.sidebar a`,
   não `.nav-group-itens a`) — seletor inventado vira CSS morto, sem erro
   visível, e o item ativo continuaria azul-QiLog.
   ============================================================ */

/* Cabeçalho de grupo — hover com o azul da marca. */
.sidebar .nav-group:hover {
  color: #fff;
  background: rgba(23, 99, 169, 0.16);
}

/* Item de menu — hover azul da marca. */
.sidebar a:hover {
  background: rgba(23, 99, 169, 0.18);
  color: #ffffff;
  border-left-color: var(--brand-primary);
}

/* Item ATIVO — aqui entra o laranja. É o único ponto da navegação com a cor
   de destaque: marca a posição atual sem competir com nada, porque não há
   outro laranja na tela. */
.sidebar a.active {
  background: var(--brand-primary);
  color: #ffffff;
  border-left-color: var(--brand-accent);
  font-weight: 500;
}

/* Assinatura da marca: filete laranja no topo do bloco do logo. */
.sidebar .brand {
  border-top: 3px solid var(--brand-accent);
}

/* ============================================================
   SIDEBAR DO VENDOR — vermelho-escuro

   Mesma sinalização do QiLog (.sidebar-vendor). Não é decoração: quem tem
   acesso aos dois lados precisa saber de relance em qual está. No ERP você
   mexe nos dados de UM cliente; no painel do fornecedor, nos de todos —
   confundir os dois é o tipo de erro que só se descobre depois.
   ============================================================ */
aside.sidebar.sidebar-vendor {
  background: linear-gradient(180deg, #450a0a 0%, #2f0606 100%);
  border-right: 1px solid #7f1d1d;
}
aside.sidebar.sidebar-vendor .brand {
  border-top-color: #dc2626;
  border-bottom-color: #7f1d1d;
}
aside.sidebar.sidebar-vendor .brand h1      { color: #fff5f5; }
aside.sidebar.sidebar-vendor .brand .subtitle { color: #fca5a5; }
aside.sidebar.sidebar-vendor .nav-group     { color: #fca5a5; }
aside.sidebar.sidebar-vendor .nav-group:hover { background: rgba(220, 38, 38, .16); color: #fff; }
aside.sidebar.sidebar-vendor a              { color: #fecaca; }
aside.sidebar.sidebar-vendor a i            { color: #f87171; }
aside.sidebar.sidebar-vendor a:hover {
  background: rgba(220, 38, 38, .2);
  color: #fff;
  border-left-color: #dc2626;
}
aside.sidebar.sidebar-vendor a.active {
  background: #b91c1c;
  color: #fff;
  border-left-color: #fecaca;
}
aside.sidebar.sidebar-vendor a.active i     { color: #fff; }
aside.sidebar.sidebar-vendor .user-footer   { border-top-color: #7f1d1d; }
aside.sidebar.sidebar-vendor .user-footer .nome   { color: #fff5f5; }
aside.sidebar.sidebar-vendor .user-footer .perfil { color: #fca5a5; }
aside.sidebar.sidebar-vendor .user-footer a       { color: #fca5a5; }

/* ============================================================
   CHIP DE TRIAL na sidebar
   O usuário precisa ver o prazo ANTES de tentar emitir e levar 402.
   ============================================================ */
.sidebar .trial-chip {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: .8rem .55rem .2rem;
    padding: .55rem .7rem;
    border-radius: .45rem;
    background: rgba(232, 130, 30, .16);
    border: 1px solid rgba(232, 130, 30, .38);
    color: #fde3c4;
    font-size: .78rem;
    line-height: 1.25;
}
.sidebar .trial-chip i { font-size: .95rem; color: var(--brand-accent); margin-top: .1rem; }
.sidebar .trial-chip span { display: flex; flex-direction: column; }
.sidebar .trial-chip b { font-weight: 600; }
.sidebar .trial-chip small { color: #cbb49b; font-size: .7rem; }

/* Vencido: vermelho, porque aqui a emissão já está parada. */
.sidebar .trial-chip.vencido {
    background: rgba(220, 38, 38, .18);
    border-color: rgba(220, 38, 38, .45);
    color: #fecaca;
}
.sidebar .trial-chip.vencido i { color: #f87171; }
.sidebar .trial-chip.vencido small { color: #e3a3a3; }

/* ============================================================
   BOTÃO DE ALTERNÂNCIA ERP ↔ VENDOR
   ============================================================ */
.sidebar .troca-modo {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: .8rem .55rem .4rem;
  padding: .6rem .8rem;
  border-radius: .45rem;
  border-left: 0;
  font-weight: 600;
  font-size: .82rem;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.sidebar .troca-modo:hover { transform: translateY(-1px); border-left: 0; }

/* Do ERP para o painel: vermelho, a cor do território do fornecedor. */
.sidebar .troca-modo.para-vendor {
  background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
  color: #fee2e2;
  box-shadow: 0 2px 6px rgba(127, 29, 29, .35);
}
.sidebar .troca-modo.para-vendor:hover {
  background: linear-gradient(135deg, #991b1b 0%, #b91c1c 100%);
  color: #fff;
  box-shadow: 0 4px 10px rgba(127, 29, 29, .5);
}

/* Do painel de volta ao ERP: azul da marca. */
.sidebar .troca-modo.para-erp {
  background: linear-gradient(135deg, #0e4272 0%, #1763a9 100%);
  color: #dbeafe;
  box-shadow: 0 2px 6px rgba(23, 99, 169, .35);
}
.sidebar .troca-modo.para-erp:hover {
  background: linear-gradient(135deg, #1763a9 0%, #2079c9 100%);
  color: #fff;
  box-shadow: 0 4px 10px rgba(23, 99, 169, .5);
}