/*
 * mdb-theme.css, ponte entre o MDB 9.3 e os tokens do base.css
 * --------------------------------------------------------------------------
 * O MDB grava o azul #3b71ca nas próprias variáveis e, em vários estados
 * (foco de campo, checkbox marcado, aba ativa), direto no seletor. Sem esta
 * ponte, foco, checkbox, abas, links e o botão de cancelar ficariam azuis numa
 * tela verde, e não dá para levar uma classe app-* a cada um desses elementos.
 * Este é o único arquivo autorizado a sobrescrever seletor do MDB (exceção do
 * §7.3 do guia de frontend), e só mexe em cor: geometria e comportamento
 * continuam os do MDB. Os estados de validação (is-valid, is-invalid) ficam
 * com as cores do MDB de propósito. Carregado logo depois do base.css.
 */

/* ==========================================================================
   VARIÁVEIS GLOBAIS
   ========================================================================== */
/* As de link não derivam de --mdb-primary, por isso vão à parte. */
:root {
    --mdb-primary:               var(--color-accent);
    --mdb-primary-rgb:           var(--color-accent-rgb);
    --mdb-primary-text-emphasis: var(--color-accent-dark);
    --mdb-primary-bg-subtle:     var(--color-accent-light);
    --mdb-primary-border-subtle: var(--color-border);
    --mdb-link-color:            var(--color-accent);
    --mdb-link-color-rgb:        var(--color-accent-rgb);
    --mdb-link-hover-color:      var(--color-accent-dark);
    --mdb-link-hover-color-rgb:  var(--color-accent-dark-rgb);
}

/* ==========================================================================
   CAMPOS
   ========================================================================== */
/* As regras de foco do MDB repetem o hex em vez de usar a variável. */
.form-control:focus,
.form-select:focus,
.input-group > .form-control:focus {
    border-color: var(--color-border-focus);
    box-shadow: inset 0 0 0 1px var(--color-border-focus);
}

/* ==========================================================================
   CHECKBOX, RADIO E SWITCH
   ========================================================================== */
.form-check-input:checked,
.form-check-input:checked:focus,
.form-check-input[type=checkbox]:checked,
.form-check-input[type=checkbox]:checked:focus {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}
.form-check-input[type=radio]:checked:after {
    border-color: var(--color-accent);
    background-color: var(--color-accent);
}
.form-check-input:checked:focus:before,
.form-check-input:indeterminate:focus:before {
    box-shadow: 0 0 0 13px var(--color-accent);
}
.form-switch .form-check-input:checked[type=checkbox]:after {
    background-color: var(--color-accent);
}
.form-switch .form-check-input:checked:focus:before {
    box-shadow: 3px -1px 0 13px var(--color-accent);
}

/* ==========================================================================
   NAVEGAÇÃO: ABAS, ACCORDION, LISTA, DROPDOWN
   ========================================================================== */
/* O MDB declara as variáveis da aba nos dois seletores, então os dois
   precisam ser redefinidos. */
.nav-tabs,
.nav-tabs .nav-link {
    --mdb-nav-tabs-link-active-color:        var(--color-accent);
    --mdb-nav-tabs-link-active-border-color: var(--color-accent);
}
.nav-link:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(var(--color-accent-rgb), .25);
}
.accordion {
    --mdb-accordion-active-color: var(--color-accent-dark);
}
.list-group {
    --mdb-list-group-active-bg:           var(--color-accent);
    --mdb-list-group-active-border-color: var(--color-accent);
}
.dropdown-menu {
    --mdb-dropdown-link-active-bg: var(--color-accent);
}

/* ==========================================================================
   BOTÕES
   ========================================================================== */
.btn-link {
    --mdb-btn-color:        var(--color-accent);
    --mdb-btn-hover-color:  var(--color-accent-dark);
    --mdb-btn-focus-color:  var(--color-accent-dark);
    --mdb-btn-active-color: var(--color-accent-dark);
}

/* O "Cancelar" dos modais fica neutro para não competir com o botão principal. */
.btn-secondary {
    --mdb-btn-bg:           var(--color-bg-surface-alt);
    --mdb-btn-color:        var(--color-text-secondary);
    --mdb-btn-box-shadow:   none;
    --mdb-btn-hover-bg:     var(--color-border);
    --mdb-btn-hover-color:  var(--color-text-primary);
    --mdb-btn-focus-bg:     var(--color-border);
    --mdb-btn-focus-color:  var(--color-text-primary);
    --mdb-btn-active-bg:    var(--color-border);
    --mdb-btn-active-color: var(--color-text-primary);
}

.btn-close {
    --mdb-btn-close-focus-shadow: 0 0 0 .25rem rgba(var(--color-accent-rgb), .25);
}

/* ==========================================================================
   PROGRESSO
   ========================================================================== */
.progress,
.progress-stacked {
    --mdb-progress-bar-bg: var(--color-accent);
}

/* ==========================================================================
   SELECT2
   ========================================================================== */
/* O dropdown do Select2 é anexado ao body, fora de qualquer contêiner da tela,
   por isso a regra é global. */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-accent);
}