/* =================================================================================
   EACON • Tema de cores
   ---------------------------------------------------------------------------------
   Paleta extraída do logo (wwwroot/img/logo-eacon.svg):
     - Azul primário (marca/"A"):  #0072BB
     - Grafite (texto "EACON"):    #3F3F41

   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/eacon-theme.css" rel="stylesheet" asp-append-version="true" />
   ================================================================================= */

:root {
    /* ---------- Marca ---------- */
    --ea-primary: #0072BB;
    --ea-primary-rgb: 0, 114, 187;

    --ea-charcoal: #3F3F41;
    --ea-charcoal-rgb: 63, 63, 65;

    /* ---------- Escala do azul primário ---------- */
    --ea-primary-50:  #EBF4FA;
    --ea-primary-100: #D1E5F2;
    --ea-primary-200: #A6D1E9;
    --ea-primary-300: #80B9DD;
    --ea-primary-400: #4D9CCF;
    --ea-primary-500: #0072BB;
    --ea-primary-600: #0064A5;
    --ea-primary-700: #00568E;
    --ea-primary-800: #004774;
    --ea-primary-900: #003456;

    /* ---------- Cores semânticas (harmonizadas com a marca) ---------- */
    --ea-success: #1E9E6A;
    --ea-success-rgb: 30, 158, 106;
    --ea-warning: #E8A317;
    --ea-warning-rgb: 232, 163, 23;
    --ea-danger:  #DC4C4C;
    --ea-danger-rgb: 220, 76, 76;
    --ea-info:    #1B95C9;
    --ea-info-rgb: 27, 149, 201;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Variantes semânticas */
.btn-success { --bs-btn-bg: var(--ea-success); --bs-btn-border-color: var(--ea-success); --bs-btn-hover-bg: #18875a; --bs-btn-hover-border-color: #18875a; }
.btn-warning { --bs-btn-bg: var(--ea-warning); --bs-btn-border-color: var(--ea-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(--ea-danger);  --bs-btn-border-color: var(--ea-danger);  --bs-btn-hover-bg: #c53f3f; --bs-btn-hover-border-color: #c53f3f; }
.btn-info    { --bs-btn-bg: var(--ea-info);    --bs-btn-border-color: var(--ea-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(--ea-primary);
}

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

.card-accent {
    border-top: 3px solid var(--ea-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(--ea-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(--ea-primary);
    box-shadow: var(--ea-focus-ring);
}

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

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

.form-switch .form-check-input:checked {
    background-color: var(--ea-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(--ea-primary-50);
    --bs-table-hover-color: var(--ea-charcoal);
}

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

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

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

/* ----- Dark mode: tons escuros da marca ----- */
[data-bs-theme="dark"] .table {
    --bs-table-hover-bg: rgba(var(--ea-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(--ea-primary-800);
    border-color: var(--ea-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(--ea-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(--ea-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(--ea-radius-sm) !important;
    border: 1px solid transparent !important;
    color: inherit !important;
    transition: all var(--ea-transition);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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