/*
 * Tema do portal — stack v2 (AdminLTE 4.3.1 / Bootstrap 5.3.8).
 * Documentação: docs/front-end/README.md §12
 *
 * Carregado DEPOIS do adminlte.min.css, em admin/estrutura/assets_v2_head.
 * A ordem é o que faz este arquivo funcionar: cada regra abaixo repete o mesmo
 * seletor da regra original do AdminLTE e vence por ordem de fonte. Por isso
 * não há um único !important aqui — e não deve passar a haver.
 *
 * O arquivo tem três camadas:
 *
 *   1. PALETA  — a única parte que se edita para trocar a cor do portal.
 *   2. LIGAÇÃO — reaponta as variáveis do Bootstrap/AdminLTE para a paleta.
 *                Escrita uma vez; não precisa ser tocada ao mudar de cor.
 *   3. AJUSTES — os poucos pontos em que o AdminLTE compilou a cor direto na
 *                propriedade, sem passar por variável.
 *
 * A paleta vem da logo da GetCard. Para trocar a cor do portal, edite apenas a
 * camada 1 — e, junto com ela, os dois SVGs marcados com ATENÇÃO no fim do
 * arquivo, os únicos pontos onde um hex precisa ser repetido à mão.
 */

/* ==========================================================================
   1. PALETA — editar só aqui
   ========================================================================== */

/* A paleta sai da logo (public/assets/img/logo-getcard.svg):
 *
 *   #002358  wordmark "GetCard"          -> cor principal
 *   #1DA1CF  o símbolo (o laço)          -> acento
 *   #192043  tagline                     -> não usado como cor de interface
 *
 * A regra que organiza tudo: **o navy trabalha, o ciano diz onde você está.**
 * O portal é um back-office de meios de pagamento — toda tela tem botões
 * success e danger em quantidade, e em conciliação verde/vermelho carregam
 * significado. A cor principal precisa recuar para não disputar com o status,
 * e o navy quase-preto faz isso bem (15,2:1 com texto branco).
 *
 * O ciano é o oposto: sobre branco ele dá 2,98:1, e por isso **nunca** carrega
 * texto claro nem vira cor de link. O trabalho dele é marcar posição — anel de
 * foco, borda do campo focado — e assumir como principal no modo escuro, onde
 * o navy seria invisível.
 */

:root {
  /* Cor principal e seus dois estados de interação.
     ATENÇÃO: a principal é escura (L 17%), então o hover **clareia** — escurecer
     não seria perceptível. É a mesma inversão que o Bootstrap faz no .btn-dark.
     (color-mix() derivaria os tons sozinho, mas o projeto não declara
     browserslist e o v1 ainda atende navegadores antigos — mantido explícito.) */
  --gc-primary: #002358;
  --gc-primary-hover: #074276;
  --gc-primary-active: #001739;

  /* O mesmo tom em RGB, para as composições rgba(). Acompanha o hex acima. */
  --gc-primary-rgb: 0, 35, 88;

  /* Texto/ícone sobre a cor principal. */
  --gc-on-primary: #fff;
  --gc-on-primary-rgb: 255, 255, 255;

  /* Acento — o ciano da logo. Só marca posição; ver o comentário no topo. */
  --gc-accent: #1DA1CF;
  --gc-accent-rgb: 29, 161, 207;

  /* Links NÃO usam a cor principal: o navy contra o texto do corpo (#212529)
     dá 1,01:1, ou seja, um link ficaria idêntico a texto comum. Este tom é um
     passo acima na escala — 7,15:1 sobre branco e distinguível do corpo. */
  --gc-link-color: #0d5c8e;
  --gc-link-color-rgb: 13, 92, 142;
  --gc-link-hover-color: #002358;
  --gc-link-hover-color-rgb: 0, 35, 88;

  /* Borda do campo em foco — tom claro do acento. */
  --gc-primary-border-focus: #61bddd;

  /* Variantes suaves: alert-primary, callout-primary, list-group-item-primary. */
  --gc-primary-bg-subtle: #e0e5eb;
  --gc-primary-border-subtle: #9eabc0;
  --gc-primary-text-emphasis: #001739;
}

:root[data-bs-theme="dark"] {
  /* No escuro o navy seria invisível sobre o fundo, então **o acento assume**
     como cor principal (5,18:1 sobre o fundo escuro do Bootstrap). */
  --gc-primary: #1DA1CF;
  --gc-primary-hover: #61bddd;
  --gc-primary-active: #99d5e9;
  --gc-primary-rgb: 29, 161, 207;

  /* E o rótulo do botão inverte: branco sobre o ciano dá 2,98:1 e reprovaria;
     navy sobre ciano dá 5,97:1. */
  --gc-on-primary: #001739;
  --gc-on-primary-rgb: 0, 23, 57;

  --gc-link-color: #61bddd;
  --gc-link-color-rgb: 97, 189, 221;
  --gc-link-hover-color: #99d5e9;
  --gc-link-hover-color-rgb: 153, 213, 233;

  --gc-primary-border-focus: var(--gc-accent);

  --gc-primary-bg-subtle: #001028;
  --gc-primary-border-subtle: #074276;
  --gc-primary-text-emphasis: #99d5e9;
}

/* ==========================================================================
   2. LIGAÇÃO — não precisa ser editada ao trocar a cor
   ========================================================================== */

/* --- Globais -------------------------------------------------------------
   O AdminLTE define estas em ":root,[data-bs-theme=light]" e redefine parte
   delas no seu próprio bloco "[data-bs-theme=dark]". Declarar tudo em ":root"
   basta para os DOIS temas: mesma especificidade, e este arquivo vem depois —
   e como cada token --gc-* já varia por tema na camada 1, o var() resolve
   sozinho para o valor certo. Por isso aqui não há bloco escuro. */
:root {
  --bs-primary: var(--gc-primary);
  --bs-primary-rgb: var(--gc-primary-rgb);
  --bs-blue: var(--gc-primary);

  --bs-primary-bg-subtle: var(--gc-primary-bg-subtle);
  --bs-primary-border-subtle: var(--gc-primary-border-subtle);
  --bs-primary-text-emphasis: var(--gc-primary-text-emphasis);

  --bs-link-color: var(--gc-link-color);
  --bs-link-color-rgb: var(--gc-link-color-rgb);
  --bs-link-hover-color: var(--gc-link-hover-color);
  --bs-link-hover-color-rgb: var(--gc-link-hover-color-rgb);

  /* O foco usa o acento, não a principal: navy a 25% sobre branco vira um
     cinza pálido, pouco visível justamente onde a visibilidade importa. */
  --bs-focus-ring-color: rgba(var(--gc-accent-rgb), 0.4);
}

/* --- Botões -------------------------------------------------------------- */
.btn-primary {
  --bs-btn-color: var(--gc-on-primary);
  --bs-btn-bg: var(--gc-primary);
  --bs-btn-border-color: var(--gc-primary);
  --bs-btn-hover-color: var(--gc-on-primary);
  --bs-btn-hover-bg: var(--gc-primary-hover);
  --bs-btn-hover-border-color: var(--gc-primary-active);
  --bs-btn-focus-shadow-rgb: var(--gc-primary-rgb);
  --bs-btn-active-color: var(--gc-on-primary);
  --bs-btn-active-bg: var(--gc-primary-active);
  --bs-btn-active-border-color: var(--gc-primary-active);
  --bs-btn-disabled-color: var(--gc-on-primary);
  --bs-btn-disabled-bg: var(--gc-primary);
  --bs-btn-disabled-border-color: var(--gc-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--gc-primary);
  --bs-btn-border-color: var(--gc-primary);
  --bs-btn-hover-color: var(--gc-on-primary);
  --bs-btn-hover-bg: var(--gc-primary);
  --bs-btn-hover-border-color: var(--gc-primary);
  --bs-btn-focus-shadow-rgb: var(--gc-primary-rgb);
  --bs-btn-active-color: var(--gc-on-primary);
  --bs-btn-active-bg: var(--gc-primary);
  --bs-btn-active-border-color: var(--gc-primary);
  --bs-btn-disabled-color: var(--gc-primary);
  --bs-btn-disabled-border-color: var(--gc-primary);
}

/* --- Navegação ----------------------------------------------------------- */
.nav-pills {
  --bs-nav-pills-link-active-color: var(--gc-on-primary);
  --bs-nav-pills-link-active-bg: var(--gc-primary);
}

.pagination {
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--gc-primary-rgb), 0.25);
  --bs-pagination-active-color: var(--gc-on-primary);
  --bs-pagination-active-bg: var(--gc-primary);
  --bs-pagination-active-border-color: var(--gc-primary);
}

.dropdown-menu {
  --bs-dropdown-link-active-color: var(--gc-on-primary);
  --bs-dropdown-link-active-bg: var(--gc-primary);
}

.dropdown-menu-dark {
  --bs-dropdown-link-active-color: var(--gc-on-primary);
  --bs-dropdown-link-active-bg: var(--gc-primary);
}

/* --- Listas, progresso e toasts ------------------------------------------ */
.list-group {
  --bs-list-group-active-color: var(--gc-on-primary);
  --bs-list-group-active-bg: var(--gc-primary);
  --bs-list-group-active-border-color: var(--gc-primary);
}

.progress,
.progress-stacked {
  --bs-progress-bar-color: var(--gc-on-primary);
  --bs-progress-bar-bg: var(--gc-primary);
}

.toast-primary {
  --bs-toast-header-color: var(--gc-on-primary);
  --bs-toast-header-bg: var(--gc-primary);
  --bs-toast-header-border-color: var(--gc-primary);
  --bs-toast-border-color: var(--gc-primary);
}

/* --- Componentes próprios do AdminLTE ------------------------------------ */
.bg-primary,
.card-primary,
.text-bg-primary {
  --lte-card-variant-bg: var(--gc-primary);
  --lte-card-variant-bg-rgb: var(--gc-primary-rgb);
  --lte-card-variant-color: var(--gc-on-primary);
  --lte-card-variant-color-rgb: var(--gc-on-primary-rgb);
}

.direct-chat-primary {
  --lte-direct-chat-color: var(--gc-on-primary);
  --lte-direct-chat-bg: var(--gc-primary);
}

/* ==========================================================================
   3. AJUSTES — onde a cor foi compilada direto na propriedade
   ========================================================================== */

/* Checkbox e radio marcados. O "check" branco é um SVG que codifica apenas
   %23fff, então só o fundo precisa mudar — o desenho não é regerado. */
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--gc-primary);
  border-color: var(--gc-primary);
}

.form-range::-webkit-slider-thumb {
  background-color: var(--gc-primary);
}

.form-range::-moz-range-thumb {
  background-color: var(--gc-primary);
}

/* Campo em foco. Nas telas de login o halo é anulado por
   ".login-card-body .input-group .form-control:focus{box-shadow:none}", de
   especificidade maior — lá o foco aparece só pela borda, e continua assim. */
.form-control:focus,
.form-select:focus {
  border-color: var(--gc-primary-border-focus);
  box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(var(--gc-primary-rgb), 0.25);
}

/* O outline já sai de --bs-focus-ring-color; só a sombra estava compilada. */
.focus-enhanced:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--gc-primary-rgb), 0.25);
}

/* ATENÇÃO — os DOIS únicos lugares onde a cor aparece repetida e em
   hexadecimal literal. O AdminLTE desenha o botão do switch em foco com um SVG
   embutido numa url(), e var() não é substituído dentro de string: o valor tem
   que ser escrito à mão, URL-encodado (%23 no lugar do #). Ao trocar a paleta,
   editar também aqui, com os valores de --gc-primary-border-focus de cada tema.
   Nenhuma tela v2 usa .form-switch hoje; está aqui por completude. */
.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2361bddd'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231DA1CF'/%3e%3c/svg%3e");
}