/* ============================================================================
   GIGAFARMA ATENDE — tema da marca (P1: AZUL Gigafarma + sidebar NAVY)
   SPEC-FORK-PARECER-COM-UNICO.md · injetado em runtime via GlobalConfig
   DASHBOARD_SCRIPTS (custom/bin/aplicar-tema.rb) — SEM rebuild da imagem.
   Editar este arquivo = so recarregar a pagina (servido por volume).

   ⭐ CORREÇÃO 08/09: a marca é AZUL (o verde da 1ª versão era erro de spec).

   ==== COMO TROCAR AS CORES (pedido do Rodrigo: editável) ====================
   As cores-âncora estão nas 3 linhas logo abaixo, em "R G B" (sem vírgula).
   1. --giga-acao ......... cor de ação/da marca (botões, links, destaques)
   2. --giga-acao-clara ... a mesma, mais clara (modo escuro / texto s/ navy)
   3. --giga-navy ......... fundo da barra lateral (navy do site Gigafarma)
   As rampas --blue-1..12 abaixo derivam da ação; se trocar MUITO a âncora
   (ex.: pra vermelho), ajuste a rampa junto (ou me chame, levo 2 min).
   Logos: substituir os 3 SVGs nesta mesma pasta (custom/marca/).
   ========================================================================== */
:root {
  --giga-acao: 18 87 165;        /* #1257A5 — TROCAR AQUI pro hex oficial */
  --giga-acao-clara: 116 174 231;
  --giga-navy: 26 26 46;         /* #1a1a2e — navy dos moldes do site */
}

/* ---- 1. paleta var-based da UI v4: azul re-ancorado na marca (claro) ---- */
:root {
  --blue-1: 250 252 255;
  --blue-2: 243 248 254;
  --blue-3: 231 241 252;
  --blue-4: 214 231 250;
  --blue-5: 194 219 246;
  --blue-6: 168 203 240;
  --blue-7: 133 180 231;
  --blue-8: 88 148 217;
  --blue-9: var(--giga-acao);    /* ação primária */
  --blue-10: 15 76 146;
  --blue-11: 12 68 131;
  --blue-12: 12 36 66;
}

/* ---- modo escuro ---- */
.dark, [data-theme='dark'] {
  --blue-1: 12 17 26;
  --blue-2: 15 22 34;
  --blue-3: 16 31 52;
  --blue-4: 15 39 68;
  --blue-5: 18 47 82;
  --blue-6: 23 57 98;
  --blue-7: 29 70 119;
  --blue-8: 37 88 148;
  --blue-9: 58 122 190;
  --blue-10: 72 136 204;
  --blue-11: var(--giga-acao-clara);
  --blue-12: 205 226 249;
}

/* ---- 2. literais compilados: n-brand (#2781F6 no tailwind) ---- */
[class*='bg-n-brand'] { background-color: rgb(var(--giga-acao)) !important; }
[class*='text-n-brand'] { color: rgb(var(--giga-acao)) !important; }
[class*='border-n-brand'] { border-color: rgb(var(--giga-acao)) !important; }
[class*='outline-n-brand'] { outline-color: rgb(var(--giga-acao)) !important; }
[class*='ring-n-brand'] { --tw-ring-color: rgb(var(--giga-acao)) !important; }
.dark [class*='bg-n-brand'] { background-color: rgb(58 122 190) !important; }
.dark [class*='text-n-brand'] { color: rgb(var(--giga-acao-clara)) !important; }

/* ---- 2b. literais legados woot-* (telas antigas/config/login) ---- */
.bg-woot-500, .bg-woot-600, .btn-woot,
[class*='hover:bg-woot-']:hover { background-color: rgb(var(--giga-acao)) !important; }
.bg-woot-700 { background-color: rgb(15 76 146) !important; }
.bg-woot-25, .bg-woot-50, .bg-woot-75 { background-color: rgb(231 241 252) !important; }
.text-woot-500, .text-woot-600, [class*='hover:text-woot-']:hover { color: rgb(var(--giga-acao)) !important; }
.border-woot-500, .border-woot-600 { border-color: rgb(var(--giga-acao)) !important; }
.dark .text-woot-500, .dark .text-woot-600 { color: rgb(var(--giga-acao-clara)) !important; }

/* ============================================================================
   3. SIDEBAR NAVY com item ativo em "pílula" clara (P1.1 — sensação do Único:
   navegação escura, conteúdo claro). A raiz da sidebar v4 é o <aside>.
   ========================================================================== */
#app aside[class*='bg-n-background'] {
  background-color: rgb(var(--giga-navy)) !important;
  border-color: rgb(var(--giga-navy)) !important;
}
/* textos/ícones da navegação em claro */
#app aside[class*='bg-n-background'] :is(a, button, span, div, svg) {
  color: rgb(226 230 240);
}
#app aside[class*='bg-n-background'] svg { fill: currentColor; }
/* estados de hover discretos sobre o navy */
#app aside[class*='bg-n-background'] :is(a, button):hover {
  background-color: rgb(255 255 255 / 0.08);
  border-radius: 8px;
}
/* item ATIVO = pílula clara com texto navy (padrão do Único) */
#app aside[class*='bg-n-background'] :is(.router-link-active, [aria-current='page'], [class*='active']) {
  background-color: rgb(255 255 255 / 0.94) !important;
  border-radius: 9999px !important;
}
#app aside[class*='bg-n-background'] :is(.router-link-active, [aria-current='page'], [class*='active']) :is(span, svg, div) {
  color: rgb(var(--giga-navy)) !important;
}

/* links padrao dentro de conteudo */
.prose a, a.text-link { color: rgb(12 68 131); }

/* Rodrigo 11/09: "fundo branco ficando ruim" — um cinza levíssimo na área de
   conteúdo em vez de branco puro (mais suave; cards/bolhas seguem brancos p/
   contraste). Conservador e reversível. */
#app main { background-color: #eef1f6 !important; }

/* ============================================================================
   4. TELA LIMPA (Rodrigo 11/09): menos coisas, sidebar encostada que abre só
   se quiser, e banner de atualização escondido. Inspiração: AtenderBem.
   ========================================================================== */

/* 4a. banner "atualização 4.17 disponível" some — atualizar só em janela
   planejada (com snapshot), nunca por clique acidental no meio do expediente */
.woot-banner, .update-banner-container,
[class*="update-banner"] { display: none !important; }

/* 4b. SIDEBAR por CLIQUE + PUSH (Rodrigo 11/09: menu abre/fecha no clique e
   EMPURRA o conteúdo, nunca sobrepõe). O toggle é o ☰ do plano-unico.js, que
   liga/desliga a classe abaixo. Colapsado = largura 0 (o main, flex, ocupa
   tudo); aberto = largura nativa. Transição suave. */
#app aside.bg-n-background { transition: width .18s ease, min-width .18s ease; }
html.giga-menu-colapsado #app aside.bg-n-background {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}

/* 4c. Rodrigo 12/09: o menu do avatar (perfil/disponibilidade/sair) estava com
   TEXTO CLARO sobre fundo claro = invisível. Causa: a regra do texto claro da
   sidebar vazava pro dropdown (.n-dropdown-body), que fica DENTRO do <aside>.
   Correção: dropdown com fundo branco sólido e texto escuro (vale p/ todos). */
.n-dropdown-body {
  background: #ffffff !important;
  backdrop-filter: none !important;
}
.n-dropdown-body::before { display: none !important; }   /* remove o blur translúcido */
.n-dropdown-body,
.n-dropdown-body :is(a, button, span, div, p, li, label) {
  color: #1c2330 !important;
}
.n-dropdown-body svg { color: #5b6570 !important; fill: currentColor !important; }
.n-dropdown-body :is(a, button, li):hover { background: #eef1f6 !important; }