/* =================================================================================
   VOLARIS KAIA • Tema de cores
   ---------------------------------------------------------------------------------
   Paleta da marca Volaris (wwwroot/img/logo-volaris.svg):
     - Teal primário (marca):      #1AA6B2
     - Navy (texto/superfícies):   #0C2C4C

   PRINCÍPIO: este arquivo SÓ recolore a MARCA (azul + semânticas + foco).
   Os neutros (fundo, texto, bordas, superfícies de card/tabela) ficam por conta
   do Inspinia/Bootstrap, que já trocam sozinhos entre claro e escuro
   (data-bs-theme="light" | "dark"). Assim o tema funciona nos dois modos.

   As poucas superfícies tingidas de azul (thead, hover, linha selecionada) têm
   variante de dark mode em [data-bs-theme="dark"].

   Ativar (depois do CSS do Inspinia):
     <link href="~/css/kaia-theme.css" rel="stylesheet" asp-append-version="true" />
   ================================================================================= */

:root {
    /* ---------- Marca ---------- */
    --ka-primary: #1AA6B2;
    --ka-primary-rgb: 26, 166, 178;

    --ka-charcoal: #0C2C4C;
    --ka-charcoal-rgb: 12, 44, 76;

    /* ---------- Escala do azul primário ---------- */
    --ka-primary-50:  #E8F7F8;
    --ka-primary-100: #C6ECEF;
    --ka-primary-200: #94DBE1;
    --ka-primary-300: #62C9D2;
    --ka-primary-400: #38B5C1;
    --ka-primary-500: #1AA6B2;
    --ka-primary-600: #16909A;
    --ka-primary-700: #127781;
    --ka-primary-800: #0E5E66;
    --ka-primary-900: #0A454B;

    /* ---------- Cores semânticas (harmonizadas com a marca) ---------- */
    --ka-success: #1E9E6A;
    --ka-success-rgb: 30, 158, 106;
    --ka-warning: #F5B015;
    --ka-warning-rgb: 245, 176, 21;
    --ka-danger:  #DC4C4C;
    --ka-danger-rgb: 220, 76, 76;
    --ka-info:    #1B95C9;
    --ka-info-rgb: 27, 149, 201;

    /* ---------- Raios ---------- */
    --ka-radius-sm: .375rem;
    --ka-radius:    .625rem;
    --ka-radius-pill: 50rem;

    --ka-focus-ring: 0 0 0 .2rem rgba(var(--ka-primary-rgb), .30);
    --ka-transition: .2s ease;

    /* ===== Sobrescrita APENAS dos tokens de MARCA do Bootstrap 5 ===== */
    --bs-primary: var(--ka-primary);
    --bs-primary-rgb: var(--ka-primary-rgb);
    --bs-link-color: var(--ka-primary);
    --bs-link-color-rgb: var(--ka-primary-rgb);
    --bs-success: var(--ka-success);
    --bs-success-rgb: var(--ka-success-rgb);
    --bs-warning: var(--ka-warning);
    --bs-warning-rgb: var(--ka-warning-rgb);
    --bs-danger: var(--ka-danger);
    --bs-danger-rgb: var(--ka-danger-rgb);
    --bs-info: var(--ka-info);
    --bs-info-rgb: var(--ka-info-rgb);
}

/* =================================================================================
   1. Base (neutro, agnóstico de modo)
   ================================================================================= */
::selection {
    background: rgba(var(--ka-primary-rgb), .22);
}

* {
    scrollbar-color: rgba(var(--ka-primary-rgb), .45) transparent;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--ka-primary-rgb), .35);
    border-radius: var(--ka-radius-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--ka-primary-rgb), .6);
    background-clip: content-box;
}

/* =================================================================================
   2. Botões (cor da marca — vale nos dois modos)
   ================================================================================= */
.btn {
    --bs-btn-border-radius: var(--ka-radius-sm);
    font-weight: 500;
    transition: background-color var(--ka-transition), border-color var(--ka-transition), color var(--ka-transition);
}

.btn:focus-visible {
    box-shadow: var(--ka-focus-ring);
}

/* Primário — flat, cor sólida da marca (sem gradiente/glow) */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ka-primary);
    --bs-btn-border-color: var(--ka-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ka-primary-600);
    --bs-btn-hover-border-color: var(--ka-primary-600);
    --bs-btn-active-bg: var(--ka-primary-700);
    --bs-btn-active-border-color: var(--ka-primary-700);
    --bs-btn-disabled-bg: var(--ka-primary-300);
    --bs-btn-disabled-border-color: var(--ka-primary-300);
    color: #fff;
    background-color: var(--ka-primary);
    border-color: var(--ka-primary);
}

.btn-primary:hover {
    color: #fff;
    background-color: var(--ka-primary-600);
    border-color: var(--ka-primary-600);
}

.btn-primary:active,
.btn-primary:first-child:active,
.btn-primary.active,
.btn-primary:focus:active {
    color: #fff;
    background-color: var(--ka-primary-700);
    border-color: var(--ka-primary-700);
}

.btn-primary:disabled,
.btn-primary.disabled {
    color: #fff;
    background-color: var(--ka-primary-300);
    border-color: var(--ka-primary-300);
}

/* Outline primário */
.btn-outline-primary {
    --bs-btn-color: var(--ka-primary);
    --bs-btn-border-color: var(--ka-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ka-primary);
    --bs-btn-hover-border-color: var(--ka-primary);
    --bs-btn-active-bg: var(--ka-primary-700);
    border-color: var(--ka-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:first-child:active,
.btn-outline-primary.active {
    color: #fff;
    background-color: var(--ka-primary);
    border-color: var(--ka-primary);
}

/* Variantes semânticas */
.btn-success { --bs-btn-bg: var(--ka-success); --bs-btn-border-color: var(--ka-success); --bs-btn-hover-bg: #18875a; --bs-btn-hover-border-color: #18875a; }
.btn-warning { --bs-btn-bg: var(--ka-warning); --bs-btn-border-color: var(--ka-warning); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #cc8f0f; --bs-btn-hover-border-color: #cc8f0f; }
.btn-danger  { --bs-btn-bg: var(--ka-danger);  --bs-btn-border-color: var(--ka-danger);  --bs-btn-hover-bg: #c53f3f; --bs-btn-hover-border-color: #c53f3f; }
.btn-info    { --bs-btn-bg: var(--ka-info);    --bs-btn-border-color: var(--ka-info);    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #167daa; --bs-btn-hover-border-color: #167daa; }

/* .btn-light (ex.: "Fechar" do popup de pesquisa): no hover o Inspinia pinta o
   texto com --ins-primary (verde #1ab394, não migrado p/ a marca). Força na cor
   EACON. Aqui o prefixo é --ins-, que é o que a regra .btn:hover do template lê. */
.btn-light {
    --ins-btn-hover-color: var(--ka-primary);
}

/* =================================================================================
   3. Cards (só raio — cor/superfície fica com o Inspinia, nos dois modos)
   ================================================================================= */
.card {
    --bs-card-border-radius: var(--ka-radius);
    --bs-card-inner-border-radius: calc(var(--ka-radius) - 1px);
}

.card-accent {
    border-top: 3px solid var(--ka-primary);
}

/* Cards bordados (.card-bordered + .border-primary): o Inspinia pinta a borda
   via --ins-primary (verde, não migrado p/ a marca). Força na cor primária EACON. */
.card.card-bordered.border-primary {
    border-color: var(--ka-primary) !important;
}

/* =================================================================================
   4. Formulários (só foco e checks da marca — texto/borda ficam com o Inspinia)
   ================================================================================= */
.form-control:focus,
.form-select:focus {
    border-color: var(--ka-primary);
    box-shadow: var(--ka-focus-ring);
}

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

.form-check-input:focus {
    border-color: var(--ka-primary);
    box-shadow: var(--ka-focus-ring);
}

.form-switch .form-check-input:checked {
    background-color: var(--ka-primary);
}

/* =================================================================================
   5. Tabelas + DataTables
   ---------------------------------------------------------------------------------
   Claro: thead azul clarinho; hover/selecionado azul bem clarinho.
   Escuro: thead azul escuro; hover/selecionado azul mais forte (override abaixo).
   ================================================================================= */
.table {
    --bs-table-hover-bg: var(--ka-primary-50);
    --bs-table-hover-color: var(--ka-charcoal);
}

.table > thead th,
.table > thead td,
table.dataTable > thead th,
table.dataTable > thead td {
    color: var(--ka-primary-900);
    background: var(--ka-primary-100);
    border-color: var(--ka-primary-200);
    font-weight: 600;
    letter-spacing: .02em;
}

table.dataTable thead .sorting:hover,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background-color: var(--ka-primary-200);
}

table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    color: var(--ka-primary-900);
}

table.dataTable tbody tr.selected > *,
table.dataTable tbody tr.selected {
    background-color: var(--ka-primary-50) !important;
    color: var(--ka-charcoal) !important;
    box-shadow: none;
}

/* ----- Dark mode: tons escuros da marca ----- */
[data-bs-theme="dark"] .table {
    --bs-table-hover-bg: rgba(var(--ka-primary-rgb), .28);
    --bs-table-hover-color: #fff;
}

[data-bs-theme="dark"] .table > thead th,
[data-bs-theme="dark"] .table > thead td,
[data-bs-theme="dark"] table.dataTable > thead th,
[data-bs-theme="dark"] table.dataTable > thead td {
    color: #fff;
    background: var(--ka-primary-800);
    border-color: var(--ka-primary-700);
}

[data-bs-theme="dark"] table.dataTable thead .sorting:hover,
[data-bs-theme="dark"] table.dataTable thead .sorting_asc,
[data-bs-theme="dark"] table.dataTable thead .sorting_desc {
    background-color: var(--ka-primary-700);
}

[data-bs-theme="dark"] table.dataTable thead th.sorting_asc,
[data-bs-theme="dark"] table.dataTable thead th.sorting_desc {
    color: #fff;
}

[data-bs-theme="dark"] table.dataTable tbody tr.selected > *,
[data-bs-theme="dark"] table.dataTable tbody tr.selected {
    background-color: var(--ka-primary-700) !important;
    color: #fff !important;
}

/* Paginação do DataTables (neutro segue o modo; ativo/hover na marca) */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--ka-radius-sm) !important;
    border: 1px solid transparent !important;
    color: inherit !important;
    transition: all var(--ka-transition);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(var(--ka-primary-rgb), .14) !important;
    border-color: rgba(var(--ka-primary-rgb), .35) !important;
    color: inherit !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--ka-primary) !important;
    border-color: var(--ka-primary) !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--ka-primary);
    box-shadow: var(--ka-focus-ring);
    outline: none;
}

/* =================================================================================
   6. Navegação (só estado ativo/hover da marca)
   ================================================================================= */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--ka-primary);
    --bs-nav-pills-link-active-color: #fff;
}

.nav-pills .nav-link:hover:not(.active):not(.disabled) {
    background: rgba(var(--ka-primary-rgb), .12);
    color: var(--ka-primary);
}

.nav-pills .nav-link.active {
    background: var(--ka-primary);
}

.nav-tabs .nav-link.active {
    color: var(--ka-primary);
    border-top: 2px solid var(--ka-primary);
}

.nav-tabs .nav-link:hover {
    color: var(--ka-primary);
}

.breadcrumb-item a {
    color: var(--ka-primary);
}

.page-link {
    color: var(--ka-primary);
}

.page-link:hover {
    background: rgba(var(--ka-primary-rgb), .14);
    color: var(--ka-primary);
}

.page-item.active .page-link {
    background: var(--ka-primary);
    border-color: var(--ka-primary);
}

/* =================================================================================
   7. Badges, alerts, list-group, dropdown, progress
   ================================================================================= */
.badge.bg-primary { background: var(--ka-primary) !important; }
.badge.text-bg-primary { background: var(--ka-primary) !important; color: #fff !important; }

.alert-primary { border-left: 4px solid var(--ka-primary); }
.alert-success { border-left: 4px solid var(--ka-success); }
.alert-warning { border-left: 4px solid var(--ka-warning); }
.alert-danger  { border-left: 4px solid var(--ka-danger); }
.alert-info    { border-left: 4px solid var(--ka-info); }

.progress-bar {
    background-color: var(--ka-primary);
}

.list-group-item.active {
    background: var(--ka-primary);
    border-color: var(--ka-primary);
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--ka-primary);
    color: #fff;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(var(--ka-primary-rgb), .12);
}

/* =================================================================================
   8. Utilitários da marca
   ================================================================================= */
.text-eacon        { color: var(--ka-primary) !important; }
.bg-eacon          { background-color: var(--ka-primary) !important; color: #fff; }
.bg-eacon-soft     { background-color: rgba(var(--ka-primary-rgb), .12) !important; }
.border-eacon      { border-color: var(--ka-primary) !important; }

.divider-eacon {
    height: 3px;
    width: 56px;
    border-radius: var(--ka-radius-pill);
    background: var(--ka-primary);
    border: 0;
    opacity: 1;
}

/* Realce de foco acessível e consistente */
:focus-visible {
    box-shadow: var(--ka-focus-ring);
    border-radius: var(--ka-radius-sm);
}

.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: var(--ka-primary) !important;
}

/* =================================================================================
   9. Sidebar — realce na marca
   ---------------------------------------------------------------------------------
   O template deixa dois pontos no verde --ins-primary/#1ab394 (não migrado p/ a
   marca): o menu em DESTAQUE (special-menu) e o realce/hover do card do usuário.
   Força ambos na cor EACON, nos dois modos.
   ================================================================================= */

/* Menu em destaque (MENU_DESTAQUE = ESPECIAL): fundo na marca; escurece no hover/foco. */
.side-nav .side-nav-item .side-nav-link.special-menu {
    background-color: var(--ka-primary) !important;
    border-color: var(--ka-primary) !important;
    color: #fff !important;
    transition: background-color var(--ka-transition), border-color var(--ka-transition);
}

.side-nav .side-nav-item .side-nav-link.special-menu:hover,
.side-nav .side-nav-item .side-nav-link.special-menu:focus {
    background-color: var(--ka-primary-700) !important;
    border-color: var(--ka-primary-700) !important;
    color: #fff !important;
}

/* Item de menu (topo e sub): realce da marca preenchendo o botão inteiro no hover/foco.
   O .special-menu é mais específico (+ !important), então mantém o escurecer próprio. */
.side-nav .side-nav-item .side-nav-link:hover,
.side-nav .side-nav-item .side-nav-link:focus {
    background: rgba(var(--ka-primary-rgb), .12);
    color: var(--ka-primary) !important;
}

/* Card do usuário na sidebar (.sidenav-user): hover na marca, não no verde do template */
.sidenav-user a:hover,
.sidenav-user a:hover .sidenav-user-name,
.sidenav-user a:hover span,
.sidenav-user .sidenav-user-name:hover {
    color: var(--ka-primary) !important;
}