/* Ajustes proprios em cima do Tabler. Tema (cor, fonte, raio, claro/escuro)
   NAO e aqui: e config/admin.php -> atributos data-bs-theme-* do Tabler. */

/* Alpine: esconde ate o componente iniciar (evita "piscar" conteudo). */
[x-cloak] { display: none !important; }

/* Botao de tema no topo sem fundo de botao. */
.nav-item button.nav-link { background: none; border: 0; }

/* Cabecalho ordenavel da tabela de dados (componente dataTable). */
.table-sort-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; display: inline-flex; align-items: center; gap: .25rem; cursor: pointer; }
.table-sort-btn .ti { font-size: 1rem; }


/* Barra lateral recolhida: selos (ex.: DEMO) so aparecem quando ela abre no hover. */
html[data-bs-sidebar^="folded"] .navbar-vertical:not(:hover) .nav-link .badge { display: none; }

/* Tom Select (select com busca) com as cores do Tabler. O CSS dele usa
   variaveis do Bootstrap (--bs-*), que o Tabler nao define (usa --tblr-*):
   sem isso a lista fica transparente por cima do formulario. */
.ts-wrapper .ts-control { background: var(--tblr-bg-forms); color: var(--tblr-body-color); border-color: var(--tblr-border-color); }
.ts-wrapper.focus .ts-control { border-color: var(--tblr-primary); box-shadow: 0 0 0 .25rem rgba(var(--tblr-primary-rgb), .25); }
.ts-dropdown {
    background: var(--tblr-bg-surface);
    color: var(--tblr-body-color);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    box-shadow: var(--tblr-box-shadow-dropdown, 0 16px 24px 2px rgba(0, 0, 0, .07));
    z-index: 1060;
    margin-top: .25rem;
}
.ts-dropdown .option, .ts-dropdown .create, .ts-dropdown .no-results { padding: .5rem .75rem; }
.ts-dropdown .active { background: rgba(var(--tblr-primary-rgb), .08); color: var(--tblr-primary); }
.ts-dropdown .selected { font-weight: 600; }
.ts-wrapper.multi .ts-control > .item {
    background: rgba(var(--tblr-primary-rgb), .1);
    color: var(--tblr-primary);
    border: 0;
    border-radius: var(--tblr-border-radius-sm, 4px);
    padding: .1rem .5rem;
    font-weight: 500;
}
.ts-wrapper.multi .ts-control > .item.active { background: var(--tblr-primary); color: #fff; }