/* ============================================================
   Financeiro Omnibyte — cor primária da marca (#FF0033)
   Sobrescreve as variáveis do Adminator. Carregar DEPOIS do adminator.css.
   ============================================================ */

:root[data-theme="light"] {
    --primary: #FF0033 !important;
    --primary-dark: #CC0029 !important;
    --primary-light: #FF3358 !important;
    --primary-ring: rgba(255, 0, 51, .20) !important;
    --primary-soft: #FFE0E6 !important;
}

:root[data-theme="dark"] {
    --primary: #FF3358 !important;
    --primary-dark: #FF0033 !important;
    --primary-light: #FF6F8D !important;
    --primary-ring: rgba(255, 51, 88, .24) !important;
    --primary-soft: #2B0710 !important;
}

/* Força cores do tema em todos os elementos que usam --primary */
[data-theme="light"] {
    --primary: #FF0033 !important;
    --primary-dark: #CC0029 !important;
    --primary-light: #FF3358 !important;
    --primary-ring: rgba(255, 0, 51, .20) !important;
    --primary-soft: #FFE0E6 !important;
}

[data-theme="dark"] {
    --primary: #FF3358 !important;
    --primary-dark: #FF0033 !important;
    --primary-light: #FF6F8D !important;
    --primary-ring: rgba(255, 51, 88, .24) !important;
    --primary-soft: #2B0710 !important;
}

/* Garante que o menu ativo usa a cor correta */
[data-theme="light"] .nav-link.is-active,
[data-theme="light"] a.is-active {
    color: var(--primary) !important;
    background-color: var(--primary-soft) !important;
}

[data-theme="dark"] .nav-link.is-active,
[data-theme="dark"] a.is-active {
    color: var(--primary) !important;
    background-color: var(--primary-soft) !important;
}

/* Força cor primária em botões e elementos com classe ativa */
[data-theme="light"] .btn-primary,
[data-theme="light"] button.is-active,
[data-theme="light"] .badge-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

[data-theme="dark"] .btn-primary,
[data-theme="dark"] button.is-active,
[data-theme="dark"] .badge-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

/* ============================================================
   Card-Head — Padding Equilibrado
   Corrige padding desproporcional (top > bottom)
   ============================================================ */

.card-head {
    padding: 16px 20px !important;
    align-items: center !important;
}

.card-title {
    margin: 0 !important;
}

/* ============================================================
   Dropdown — Mobile: evita barra de rolagem horizontal
   adminator.css usa right:-8px no @media 720px, o que extrapola
   o viewport. Corrige mantendo o painel dentro da tela.
   ============================================================ */
@media (max-width: 720px) {
    .dd-menu {
        right: 0 !important;
    }
}

/* ============================================================
   Ícones de ação nas listagens — cinza fixo
   Garante visibilidade em ambos os temas (claro e escuro),
   sobrescrevendo currentColor e estilos inline.
   ============================================================ */
.btn--icon {
    color: #9ca3af !important;
}

/* ============================================================
   Logo do sidebar — troca pro ícone (img/icon-logo.png) quando o
   menu está comprimido (classe sidebar-collapsed no body, ver
   public/js/sidebar-toggle.js), volta pra logo normal quando expandido.
   Centralizado tanto expandido quanto comprimido — antes vinha de um
   justify-content:center inline no .brand, mas o <a> por dentro não é
   flex, então quando comprimido (largura fixa 72px, mobile-enhancements.css)
   a logo ficava encostada na esquerda.
   ============================================================ */
.brand {
    justify-content: center !important;
}

.brand a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Quando comprimido, mobile-enhancements.css já reduz o .brand pra 72px de
   largura — aqui só zera o padding vertical extra, senão a altura do .brand
   cresce (padding 12px 0 do mobile-enhancements.css + altura do ícone) e o
   ícone fica visualmente "flutuando" no topo em vez de centralizado. */
body.sidebar-collapsed .brand {
    padding: 0 !important;
    height: 60px;
}

.brand-logo-comprimida {
    display: none !important;
}

/* !important necessário: mobile-enhancements.css define
   "body.sidebar-collapsed .brand img" (carregado depois deste arquivo) com a
   mesma especificidade, então sem isso ele ganha da cascata e mostra as duas logos. */
body.sidebar-collapsed .brand-logo-expandida {
    display: none !important;
}

body.sidebar-collapsed .brand-logo-comprimida {
    display: block !important;
}

/* ============================================================
   Select com busca (public/js/select-busca.js) — autocomplete sem
   dependência externa. Usa só tokens de tema, então acompanha o modo
   claro/escuro junto com o resto do sistema, sem override de CSS de
   terceiros (era o problema de usar Chosen/Select2 aqui).
   ============================================================ */
.selbusca-lista {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 240px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    padding: 4px;
}

.selbusca-lista.is-open {
    display: block;
}

.selbusca-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--t-base);
}

.selbusca-item:hover,
.selbusca-item.is-ativo {
    background: var(--bg-hover);
}

/* Razão social (ou termo secundário) ao lado do nome, em tom recessivo */
.selbusca-extra {
    font-size: 11.5px;
    color: var(--t-muted);
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 55%;
}

.selbusca-vazio {
    padding: 12px 10px;
    font-size: 12.5px;
    color: var(--t-muted);
    text-align: center;
}