/* =========================================================
CIFRAFÁCIL — TEMA.CSS
=====================

RESPONSABILIDADE:

* Tema claro
* Tema escuro
* Cores globais
* Variáveis do Bootstrap
* Cores dos componentes

NÃO COLOCAR REGRAS DE LAYOUT AQUI.
========================================================= */

/* =========================================================
TEMA CLARO
========================================================= */

:root {
--color-bg:           #F5F5F5;
--color-bg-alt:       #FFFFFF;
--color-bg-dark:      #EFEFEF;


--color-accent:       #E0950A;
--color-accent-hover: #F5A623;

--color-text:         #1E1E1E;
--color-muted:        #555555;
--color-placeholder:  #999999;

--color-border:       #D5D5D5;
--color-tablatura:    #555555;

--bs-body-bg:         var(--color-bg);
--bs-body-color:      var(--color-text);

--bs-dark-rgb:        30, 30, 30;
--bs-warning-rgb:     224, 149, 10;

--wipe-duration:      0.35s;
--wipe-timing:        cubic-bezier(0.25, 1, 0.5, 1);


}

/* =========================================================
TEMA ESCURO
========================================================= */

[data-bs-theme="dark"] {
    --color-bg:           #2B2B2B;
    --color-bg-alt:       #3A3A3A;
    --color-bg-dark:      #1E1E1E;

    --color-accent:       #E0950A;
    --color-accent-hover: #F5A623;

    --color-text:         #FFFFFF;
    --color-muted:        #888888;
    --color-placeholder:  #777777;

    --color-border:       #444444;
    --color-tablatura:    #BBBBBB;

    --bs-body-bg:         var(--color-bg);
    --bs-body-color:      var(--color-text);

    --bs-dark-rgb:        30, 30, 30;
    --bs-warning-rgb:     245, 166, 35;
}

/* =========================================================
APLICAÇÃO GLOBAL
========================================================= */

html,
body {
background-color: var(--color-bg) !important;
color: var(--color-text) !important;
}

/* =========================================================
BARRA SUPERIOR GLOBAL — BASE.HTML
========================================================= */

header.fixed-top {
background-color: var(--color-bg-alt) !important;
color: var(--color-text) !important;
background-image: none !important;
opacity: 1 !important;
}

/* =========================================================
BARRA INFERIOR GLOBAL
========================================================= */

nav.navbar.fixed-bottom {
background-color: var(--color-bg-alt) !important;
color: var(--color-text) !important;
background-image: none !important;
opacity: 1 !important;
}

[data-bs-theme="dark"] nav.navbar.fixed-bottom {
background-color: var(--color-bg-dark) !important;
}

/* =========================================================
NAVBAR INFERIOR — CIFRAFÁCIL
========================================================= */

nav.navbar.fixed-bottom.nav-app-custom {
background-color: var(--color-bg-alt) !important;
background-image: none !important;
color: var(--color-text) !important;
opacity: 1 !important;
}

nav.navbar.fixed-bottom.nav-app-custom .container {
background-color: transparent !important;
}

nav.navbar.fixed-bottom.nav-app-custom .nav-app-item {
color: var(--color-text) !important;
}

nav.navbar.fixed-bottom.nav-app-custom
.nav-app-item.bg-body-secondary {
background-color: var(--color-bg-dark) !important;
}

/* =========================================================
BARRA DE CONTROLES DA CIFRA
========================================================= */

/*
Esta é a barra específica existente em cifra.html.

Ela precisa ter fundo próprio porque não é o header
global do base.html.
*/

div.barra-controles-cifra {
background-color: var(--color-bg-alt) !important;
background-image: none !important;
color: var(--color-text) !important;

```
opacity: 1 !important;

/*
   Evita qualquer aparência de transparência causada
   por composição do elemento.
*/
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
```

}

[data-bs-theme="dark"] div.barra-controles-cifra {
background-color: var(--color-bg-dark) !important;
}

/* =========================================================
   BOTÃO TABS
   ========================================================= */

#btn-toggle-tabs-global {
    color: var(--color-muted) !important;
    border-color: var(--color-border) !important;
    background-color: transparent !important;
}

#btn-toggle-tabs-global:hover,
#btn-toggle-tabs-global:focus,
#btn-toggle-tabs-global:active {
    color: #FFFFFF !important;
    background-color: var(--color-muted) !important;
    border-color: var(--color-muted) !important;
}

/* =========================================================
   AUTO SCROLL — CORREÇÃO DEFINITIVA NO TEMA ESCURO
   ========================================================= */

[data-bs-theme="dark"] #btn-scroll {
    background-color: #F5A623 !important;
    border-color: #F5A623 !important;
    color: #1E1E1E !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] #btn-scroll #label-velocidade {
    color: #1E1E1E !important;
    background-color: transparent !important;
}

/* Mouseover */
[data-bs-theme="dark"] #btn-scroll:hover,
[data-bs-theme="dark"] #btn-scroll:focus {
    background-color: #FFB84D !important;
    border-color: #FFB84D !important;
    color: #1E1E1E !important;
}

[data-bs-theme="dark"] #btn-scroll:hover #label-velocidade,
[data-bs-theme="dark"] #btn-scroll:focus #label-velocidade {
    color: #1E1E1E !important;
}

/* =========================================================
CONJUNTO INTERNO DA BARRA DA CIFRA
========================================================= */

.barra-controles-cifra-interna {
width: fit-content !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;

```
background-color: var(--color-bg-alt) !important;
color: var(--color-text) !important;
```

}

[data-bs-theme="dark"] .barra-controles-cifra-interna {
background-color: var(--color-bg-dark) !important;
}

/* =========================================================
   DIAGRAMAS DE ACORDES
   ========================================================= */

.cifra-card-acorde {
    min-width: 105px;
    padding: 0.5rem !important;
    background-color: var(--color-bg-alt) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text) !important;
}

.cifra-diagrama {
    margin-bottom: 0.4rem;
}

/* =========================================================
FUNDOS BOOTSTRAP
========================================================= */

.bg-body {
background-color: var(--color-bg) !important;
}

.bg-body-secondary {
background-color: var(--color-bg-dark) !important;
}

.bg-dark {
background-color: var(--color-bg-dark) !important;
}

.bg-black {
background-color: var(--color-bg-dark) !important;
}

/* =========================================================
CARDS
========================================================= */

.card {
background-color: var(--color-bg-alt) !important;
border-color: var(--color-border) !important;
color: var(--color-text) !important;
}

/* =========================================================
LISTAS
========================================================= */

.list-group-item {
background-color: var(--color-bg-alt) !important;
color: var(--color-text) !important;
border-color: var(--color-border) !important;
}

/* =========================================================
MODAIS
========================================================= */

.modal-content {
background-color: var(--color-bg-alt) !important;
color: var(--color-text) !important;
border-color: var(--color-border) !important;
}

.modal-header,
.modal-footer {
border-color: var(--color-border) !important;
}

/* =========================================================
TEXTOS
========================================================= */

.text-body {
color: var(--color-text) !important;
}

.text-muted {
color: var(--color-muted) !important;
}

[data-bs-theme="light"] .text-light,
[data-bs-theme="light"] .text-white {
color: var(--color-text) !important;
}

[data-bs-theme="dark"] .text-light,
[data-bs-theme="dark"] .text-white {
color: #FFFFFF !important;
}

/* =========================================================
TÍTULOS DE MÚSICAS
========================================================= */

.titulo-musica,
.musica-titulo,
.titulo-cifra,
.list-group-item .titulo-musica,
.list-group-item .musica-titulo,
.list-group-item .titulo-cifra {
color: var(--color-text) !important;
}

/* =========================================================
ACORDES / DESTAQUES
========================================================= */

.cifra-acorde,
.cifra-acorde-token,
.text-warning {
color: var(--color-accent) !important;
}

span.cifra-acorde-token,
span.cifra-acorde,
.cifra-linha-acordes .cifra-acorde-token {
color: var(--color-accent) !important;
font-weight: bold !important;
}

/* =========================================================
BOTÕES WARNING
========================================================= */

.btn-warning {
background-color: var(--color-accent) !important;
border-color: var(--color-accent) !important;
color: #121212 !important;
}

.btn-warning:hover,
.btn-warning:focus {
background-color: var(--color-accent-hover) !important;
border-color: var(--color-accent-hover) !important;
color: #121212 !important;
}

/* =========================================================
BOTÕES OUTLINE WARNING
========================================================= */

.btn-outline-warning {
color: var(--color-accent) !important;
border-color: var(--color-accent) !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
background-color: var(--color-accent) !important;
border-color: var(--color-accent) !important;
color: #121212 !important;
}

/* =========================================================
BORDAS
========================================================= */

.border-secondary {
border-color: var(--color-border) !important;
}

/* =========================================================
LINKS
========================================================= */

a {
color: var(--color-accent);
}

a:hover {
color: var(--color-accent-hover);
}

/* =========================================================
CAMPOS DE FORMULÁRIO
========================================================= */

.form-control,
.form-select {
background-color: var(--color-bg-alt) !important;
color: var(--color-text) !important;
border-color: var(--color-border) !important;
}

.form-control:focus,
.form-select:focus {
background-color: var(--color-bg-alt) !important;
color: var(--color-text) !important;
border-color: var(--color-accent) !important;

```
box-shadow:
    0 0 0 0.2rem
    rgba(224, 149, 10, 0.20) !important;
```

}

.form-control::placeholder {
color: var(--color-placeholder) !important;
opacity: 1;
}

/* =========================================================
DROPDOWN
========================================================= */

.dropdown-menu {
background-color: var(--color-bg-alt) !important;
border-color: var(--color-border) !important;
}

.dropdown-item {
color: var(--color-text) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
background-color: var(--color-bg-dark) !important;
color: var(--color-text) !important;
}

/* =========================================================
TABELAS
========================================================= */

.table {
--bs-table-bg: var(--color-bg-alt);
--bs-table-color: var(--color-text);
--bs-table-border-color: var(--color-border);

```
color: var(--color-text) !important;
```

}

/* =========================================================
BADGES
========================================================= */

.badge {
color: var(--color-text);
}

/* =========================================================
CIFRA
========================================================= */

.cifra-linha-acordes {
color: var(--color-accent) !important;
}

.cifra-letra {
color: var(--color-text) !important;
}

.cifra-par-token .cifra-acorde-token {
color: var(--color-accent) !important;
}

.cifra-par-token .cifra-texto-token {
color: var(--color-text) !important;
}

/* =========================================================
SEÇÕES
========================================================= */

.bloco-secao {
color: var(--color-accent) !important;
}

/* =========================================================
TABLATURAS
========================================================= */

.cifra-tablatura-conteudo {
color: var(--color-tablatura) !important;
}


/* =========================================================
FIM
========================================================= */