/* ============================================================
   Maia Viagens - Camada de identidade visual
   ------------------------------------------------------------
   Camada 1 (--maia-*) : paleta oficial. Sobrevive intacta na
                         migracao para o Bootstrap 6.
   Camada 2 (--bs-*)   : ponte para o Bootstrap 5.3 atual.
                         Descartavel - sera removida quando o
                         CDN for trocado pela v6.

   Carregar SEMPRE depois do CSS do Bootstrap e ANTES de site.css.
   ============================================================ */

/* ---------- Camada 1: paleta oficial (README) ---------- */
:root {
    --maia-azul: #0B5C89;
    --maia-dourado: #D4AF37;
    --maia-superficie: #EDF5F7;

    /* Cor de titulo e de icone sobre a superficie. Vira um azul claro no
       tema escuro, onde o Azul Maia nao teria contraste. */
    --maia-titulo: var(--maia-azul);

    /* Rampa derivada do Azul Maia - evita escolher tons na mao */
    --maia-azul-700: color-mix(in oklab, var(--maia-azul), #000 12%);
    --maia-azul-900: color-mix(in oklab, var(--maia-azul), #000 24%);
    --maia-azul-100: color-mix(in oklab, var(--maia-azul), #fff 88%);
}

/* ---------- Camada 2: ponte Bootstrap 5.3 ---------- */
:root {
    --bs-primary: var(--maia-azul);
    --bs-primary-rgb: 11, 92, 137;

    --bs-link-color: var(--maia-azul);
    --bs-link-color-rgb: 11, 92, 137;
    --bs-link-hover-color: var(--maia-azul-700);
    --bs-link-hover-color-rgb: 10, 81, 120;

    /* Cor de titulo pelo mecanismo nativo do 5.3. Pintar h1..h6 direto
       nao resolve: o reboot aplica a mesma cor via .h1-.h6 (especificidade
       de classe, 0,1,0), que vence o seletor de elemento (0,0,1) - e os
       titulos costumam vir como <h1 class="h3">. */
    --bs-heading-color: var(--maia-titulo);
}

/* O CSS do 5.3 grava as variantes de botao com valores literais
   (nao usam var(--bs-primary)), portanto repintar :root nao basta:
   e preciso repintar os tokens de componente de cada variante em uso. */
.btn-primary {
    --bs-btn-bg: var(--maia-azul);
    --bs-btn-border-color: var(--maia-azul);
    --bs-btn-hover-bg: var(--maia-azul-700);
    --bs-btn-hover-border-color: var(--maia-azul-700);
    --bs-btn-active-bg: var(--maia-azul-900);
    --bs-btn-active-border-color: var(--maia-azul-900);
    --bs-btn-disabled-bg: var(--maia-azul);
    --bs-btn-disabled-border-color: var(--maia-azul);
    --bs-btn-focus-shadow-rgb: 11, 92, 137;
}

/* Mesmo caso nos controles de formulario: o 5.3 grava #86b7fe e
   #0d6efd literalmente, entao o anel de foco e os checkboxes
   apareciam no azul padrao do Bootstrap. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--maia-azul);
    box-shadow: 0 0 0 .25rem rgba(11, 92, 137, .25);
}

.form-check-input:checked {
    background-color: var(--maia-azul);
    border-color: var(--maia-azul);
}

/* A paginacao tem o mesmo problema: o item ativo e o anel de foco
   saem com #0d6efd literal. Usada por todas as listagens. */
.pagination {
    --bs-pagination-active-bg: var(--maia-azul);
    --bs-pagination-active-border-color: var(--maia-azul);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(11, 92, 137, .25);
}

/* A pilula ativa do Identity (nav-pills) e a barra de progresso das
   listagens repetem o mesmo caso: o 5.3 grava #0d6efd nos tokens de
   componente em vez de derivar de --bs-primary. */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--maia-azul);
    --bs-nav-pills-link-active-color: #fff;
}

.progress {
    --bs-progress-bar-bg: var(--maia-azul);
}

/* ---------- Superficies e tipografia ---------- */
/* Aplicado em body (e nao em --bs-body-bg) de proposito: no 5.3
   cards herdam --bs-card-bg de --bs-body-bg e ficariam off-white
   sobre off-white, sem contraste. */
body {
    background-color: var(--maia-superficie);
}

/* ---------- Tema escuro (data-bs-theme do Bootstrap 5.3) ---------- */
/* O 5.3 ja repinta formularios, tabelas, modais e dropdowns a partir de
   data-bs-theme. Aqui entram somente os tokens da identidade visual e os
   pontos em que o 5.3 grava cor literal. Quem troca o atributo e o
   wwwroot/js/maia-theme.js. */
[data-bs-theme="dark"] {
    /* Mais escuro que o #212529 dos cards, mantendo o tom azulado: um
       color-mix em oklab com preto esmagaria a matiz. */
    --maia-superficie: #101C24;

    /* 6.5:1 sobre a superficie escura - o Azul Maia daria 1.1:1. */
    --maia-titulo: #79A5BE;

    /* O bloco :root da Camada 2 e carregado depois do CDN e venceria o
       tema escuro do proprio Bootstrap, deixando os links em #0B5C89. */
    --bs-link-color: var(--maia-titulo);
    --bs-link-color-rgb: 121, 165, 190;
    --bs-link-hover-color: #A3C6D9;
    --bs-link-hover-color-rgb: 163, 198, 217;
}

/* ---------- Seletor de tema (_ThemeToggle.cshtml) ---------- */
/* O partial nao guarda estado: o icone do botao e a marca da opcao ativa
   sao escolhidos aqui a partir do modo gravado em html. */
.maia-theme__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background-color: transparent;
    color: var(--maia-titulo);
    line-height: 1;
}

.maia-theme__btn:hover,
.maia-theme__btn:focus-visible,
.maia-theme__btn[aria-expanded="true"] {
    background-color: var(--bs-tertiary-bg);
}

/* Variante para quem fica sobre um fundo escuro (navbar do layout legado) */
.maia-theme-on-dark .maia-theme__btn {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.maia-theme-on-dark .maia-theme__btn:hover,
.maia-theme-on-dark .maia-theme__btn:focus-visible,
.maia-theme-on-dark .maia-theme__btn[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, 0.15);
}

.maia-theme__icon,
.maia-theme__check {
    display: none;
}

html[data-maia-theme-mode="light"] .maia-theme__icon--light,
html[data-maia-theme-mode="dark"] .maia-theme__icon--dark,
html[data-maia-theme-mode="auto"] .maia-theme__icon--auto {
    display: inline-block;
}

html[data-maia-theme-mode="light"] [data-maia-theme-set="light"] .maia-theme__check,
html[data-maia-theme-mode="dark"] [data-maia-theme-set="dark"] .maia-theme__check,
html[data-maia-theme-mode="auto"] [data-maia-theme-set="auto"] .maia-theme__check {
    display: inline-block;
}

/* ---------- select2 no tema escuro ---------- */
/* O select2-bootstrap-5-theme 1.3.0 nao conhece o data-bs-theme e grava
   #fff nos selects; sem isso os campos ficariam brancos no escuro. */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--bs-body-color);
}

/* A seta tambem e um SVG literal (stroke #343a40), invisivel no escuro */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option--highlighted {
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option--selected,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
    color: #fff;
    background-color: var(--maia-azul);
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}