/* =================================================================================
   VOLARIS • Tema de cores
   ---------------------------------------------------------------------------------
   Paleta da marca (logo Volaris):
     - Teal primário (UI/marca):   #1AA6B2
     - Navy (texto "VOLARIS"):     #0C2C4C
     - Amarelo (acento):           #F5B015
     - Laranja (acento):           #EE5A22

   PRINCÍPIO (igual ao eacon-theme): recolore SÓ a MARCA (teal + semânticas + foco).
   Os neutros (fundo, texto, bordas, cards, tabelas) ficam por conta do Inspinia/
   Bootstrap, que trocam sozinhos entre claro e escuro (data-bs-theme light|dark).

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

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

    --vlr-navy: #0C2C4C;
    --vlr-navy-rgb: 12, 44, 76;

    --vlr-yellow: #F5B015;
    --vlr-yellow-rgb: 245, 176, 21;

    --vlr-orange: #EE5A22;
    --vlr-orange-rgb: 238, 90, 34;

    /* ---------- Escala do teal primário ---------- */
    --vlr-primary-50:  #E8F6F7;
    --vlr-primary-100: #C6E9EB;
    --vlr-primary-200: #9DD9DD;
    --vlr-primary-300: #6FC7CD;
    --vlr-primary-400: #43B4BC;
    --vlr-primary-500: #1AA6B2;
    --vlr-primary-600: #17909A;
    --vlr-primary-700: #137780;
    --vlr-primary-800: #105F66;
    --vlr-primary-900: #0C474C;

    /* ---------- Cores semânticas (harmonizadas com a marca) ---------- */
    --vlr-success: #1E9E6A;
    --vlr-success-rgb: 30, 158, 106;
    --vlr-warning: var(--vlr-yellow);
    --vlr-warning-rgb: var(--vlr-yellow-rgb);
    --vlr-danger:  var(--vlr-orange);
    --vlr-danger-rgb: var(--vlr-orange-rgb);
    --vlr-info:    #1B95C9;
    --vlr-info-rgb: 27, 149, 201;

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

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

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

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

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

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

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

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

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

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

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--vlr-primary);
    --bs-btn-border-color: var(--vlr-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--vlr-primary-600);
    --bs-btn-hover-border-color: var(--vlr-primary-600);
    --bs-btn-active-bg: var(--vlr-primary-700);
    --bs-btn-active-border-color: var(--vlr-primary-700);
    --bs-btn-disabled-bg: var(--vlr-primary-300);
    --bs-btn-disabled-border-color: var(--vlr-primary-300);
    color: #fff;
    background-color: var(--vlr-primary);
    border-color: var(--vlr-primary);
}

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

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

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

.btn-outline-primary {
    --bs-btn-color: var(--vlr-primary);
    --bs-btn-border-color: var(--vlr-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--vlr-primary);
    --bs-btn-hover-border-color: var(--vlr-primary);
    --bs-btn-active-bg: var(--vlr-primary-700);
    border-color: var(--vlr-primary);
}

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

.btn-success { --bs-btn-bg: var(--vlr-success); --bs-btn-border-color: var(--vlr-success); --bs-btn-hover-bg: #18875a; --bs-btn-hover-border-color: #18875a; }
.btn-warning { --bs-btn-bg: var(--vlr-warning); --bs-btn-border-color: var(--vlr-warning); --bs-btn-color: #1f1300; --bs-btn-hover-color: #1f1300; --bs-btn-hover-bg: #d99c0d; --bs-btn-hover-border-color: #d99c0d; }
.btn-danger  { --bs-btn-bg: var(--vlr-danger);  --bs-btn-border-color: var(--vlr-danger);  --bs-btn-hover-bg: #d24a17; --bs-btn-hover-border-color: #d24a17; }
.btn-info    { --bs-btn-bg: var(--vlr-info);    --bs-btn-border-color: var(--vlr-info);    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #167daa; --bs-btn-hover-border-color: #167daa; }

/* .btn-light: no hover o Inspinia pinta o texto com --ins-primary (verde). Força na marca. */
.btn-light {
    --ins-btn-hover-color: var(--vlr-primary);
}

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

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

.card.card-bordered.border-primary {
    border-color: var(--vlr-primary) !important;
}

/* =================================================================================
   4. Formulários (só foco e checks da marca)
   ================================================================================= */
.form-control:focus,
.form-select:focus {
    border-color: var(--vlr-primary);
    box-shadow: var(--vlr-focus-ring);
}

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

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

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

/* =================================================================================
   5. Tabelas + DataTables
   ================================================================================= */
.table {
    --bs-table-hover-bg: var(--vlr-primary-50);
    --bs-table-hover-color: var(--vlr-navy);
}

.table > thead th,
.table > thead td,
table.dataTable > thead th,
table.dataTable > thead td {
    color: var(--vlr-primary-900);
    background: var(--vlr-primary-100);
    border-color: var(--vlr-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(--vlr-primary-200);
}

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

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

[data-bs-theme="dark"] .table {
    --bs-table-hover-bg: rgba(var(--vlr-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(--vlr-primary-800);
    border-color: var(--vlr-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(--vlr-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(--vlr-primary-700) !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--vlr-radius-sm) !important;
    border: 1px solid transparent !important;
    color: inherit !important;
    transition: all var(--vlr-transition);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

:focus-visible {
    box-shadow: var(--vlr-focus-ring);
    border-radius: var(--vlr-radius-sm);
}

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

/* =================================================================================
   9. Sidebar — realce na marca
   O template deixa o menu em DESTAQUE (special-menu) e o hover do card do usuário
   no verde --ins-primary/#1ab394 (não migrado). Força tudo na cor Volaris.
   ================================================================================= */

/* Menu em DESTAQUE (special-menu): fundo na marca; escurece no hover/foco. */
.side-nav .side-nav-item .side-nav-link.special-menu {
    background-color: var(--vlr-primary) !important;
    border-color: var(--vlr-primary) !important;
    color: #fff !important;
    transition: background-color var(--vlr-transition), border-color var(--vlr-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(--vlr-primary-700) !important;
    border-color: var(--vlr-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(--vlr-primary-rgb), .12);
    color: var(--vlr-primary) !important;
}

/* Card do usuário: destaca SÓ o elemento sob o cursor (nome OU usuário), não os dois. */
.sidenav-user a span:hover {
    color: var(--vlr-primary) !important;
}