/* ===========================================================================
   ETL Sistemas — Tema de marca para o painel administrativo (AdminLTE 3)
   Replica a identidade visual do site institucional:
     - Accent âmbar #F4AA00 (substitui o "primary" azul padrão do AdminLTE)
     - Chrome escuro (#212529) na sidebar e navbar
     - Conteúdo/cards permanecem claros para legibilidade
   Deve ser carregado DEPOIS de adminlte.min.css.
   =========================================================================== */

:root {
    --etl-accent: #F4AA00;
    --etl-accent-hover: #ffc233;
    --etl-accent-active: #c58f00;
    --etl-accent-rgb: 244, 170, 0;
    --etl-dark: #212529;
    --etl-dark-elevated: #2c3034;
    --etl-dark-card: #343a40;
    --etl-on-accent: #212529; /* texto escuro sobre o âmbar (alto contraste) */
    --etl-border: rgba(255, 255, 255, 0.1);
    --etl-muted: rgba(255, 255, 255, 0.55);
    --etl-light-text: rgba(255, 255, 255, 0.85);
}

/* ---------------------------------------------------------------------------
   Botões / cor "primary"
   --------------------------------------------------------------------------- */
.btn-primary {
    background-color: var(--etl-accent);
    border-color: var(--etl-accent);
    color: var(--etl-on-accent);
    font-weight: 600;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary.focus {
        background-color: var(--etl-accent-hover);
        border-color: var(--etl-accent-hover);
        color: var(--etl-on-accent);
    }

    .btn-primary:not(:disabled):not(.disabled):active,
    .btn-primary:not(:disabled):not(.disabled).active,
    .show > .btn-primary.dropdown-toggle {
        background-color: var(--etl-accent-active);
        border-color: var(--etl-accent-active);
        color: var(--etl-on-accent);
    }

    .btn-primary:disabled,
    .btn-primary.disabled {
        background-color: var(--etl-accent);
        border-color: var(--etl-accent);
        color: var(--etl-on-accent);
    }

.btn-outline-primary {
    color: var(--etl-accent-active);
    border-color: var(--etl-accent);
}

    .btn-outline-primary:hover {
        background-color: var(--etl-accent);
        border-color: var(--etl-accent);
        color: var(--etl-on-accent);
    }

/* Botões "bg-blue" usados em telas (ex.: botão "Novo") */
.btn.bg-blue,
.bg-blue {
    background-color: var(--etl-accent) !important;
    border-color: var(--etl-accent) !important;
    color: var(--etl-on-accent) !important;
}

    .btn.bg-blue:hover {
        background-color: var(--etl-accent-hover) !important;
    }

/* ---------------------------------------------------------------------------
   Utilitários de cor primary
   --------------------------------------------------------------------------- */
.bg-primary,
.badge-primary {
    background-color: var(--etl-accent) !important;
    color: var(--etl-on-accent) !important;
}

.text-primary {
    color: var(--etl-accent-active) !important;
}

.border-primary {
    border-color: var(--etl-accent) !important;
}

/* ---------------------------------------------------------------------------
   Títulos de página
   Os títulos exibidos no cabeçalho dos cards (ex.: "Lista de Usuários") e no
   content-header padrão do AdminLTE recebem o âmbar da marca, acompanhando o
   restante do tema. O ícone que precede o título herda a mesma cor.
   --------------------------------------------------------------------------- */
.card-header .card-title,
.content-header h1,
.content-header .h1 {
    color: var(--etl-accent);
    font-weight: 600;
}

    .card-header .card-title > i {
        color: var(--etl-accent);
    }

/* ---------------------------------------------------------------------------
   Alinhamento do cabeçalho dos cards
   Quando o cabeçalho tem um botão à direita (ex.: "Novo"), o título e o botão
   ficam na mesma linha e centralizados verticalmente, evitando o desalinhamento
   causado pelo float padrão do AdminLTE.
   --------------------------------------------------------------------------- */
.card-header {
    display: flex;
    align-items: center;
}

    .card-header .card-title {
        margin-bottom: 0;
    }

    /* O container de botões deixa de flutuar e é empurrado para a direita pelo
       flex (margin-left:auto), imune ao pseudo-elemento clearfix do card-header. */
    .card-header .card-tools {
        float: none;
        margin: 0;
        margin-left: auto;
    }

/* ---------------------------------------------------------------------------
   Estados ativos (nav-pills, paginação, dropdown, checkbox)
   --------------------------------------------------------------------------- */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--etl-accent);
    color: var(--etl-on-accent);
}

.page-item.active .page-link {
    background-color: var(--etl-accent);
    border-color: var(--etl-accent);
    color: var(--etl-on-accent);
}

.page-link {
    color: var(--etl-accent-active);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--etl-accent);
    color: var(--etl-on-accent);
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    background-color: var(--etl-accent);
    border-color: var(--etl-accent);
}

/* Anel de foco em controles */
.btn:focus,
.btn.focus,
.form-control:focus,
.custom-select:focus,
.form-control-navbar:focus {
    border-color: var(--etl-accent);
    box-shadow: 0 0 0 0.2rem rgba(var(--etl-accent-rgb), 0.25) !important;
}

/* ---------------------------------------------------------------------------
   Sidebar escura (sidebar-dark-primary)
   --------------------------------------------------------------------------- */
.main-sidebar,
.sidebar-dark-primary {
    background-color: var(--etl-dark);
}

    .sidebar-dark-primary .brand-link {
        background-color: var(--etl-dark);
        border-bottom: 1px solid var(--etl-border);
    }

    /* Item de menu ativo recebe o âmbar */
    .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
    .nav-sidebar > .nav-item > .nav-link.active {
        background-color: var(--etl-accent);
        color: var(--etl-on-accent);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .sidebar-dark-primary .nav-treeview > .nav-item > .nav-link.active {
        background-color: rgba(var(--etl-accent-rgb), 0.9);
        color: var(--etl-on-accent);
    }

    /* Hover dos itens */
    .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:not(.active):hover,
    .sidebar-dark-primary .nav-treeview > .nav-item > .nav-link:not(.active):hover {
        background-color: rgba(255, 255, 255, 0.06);
        color: #fff;
    }

    /* Cabeçalhos de seção e ícones de destaque na sidebar */
    .sidebar-dark-primary .nav-header {
        color: var(--etl-accent);
    }

/* ---------------------------------------------------------------------------
   Navbar (topo) — chrome escuro
   --------------------------------------------------------------------------- */
.main-header.navbar-white,
.main-header.navbar-light {
    background-color: var(--etl-dark) !important;
    border-bottom: 1px solid var(--etl-border);
}

    .main-header.navbar-light .nav-link {
        color: var(--etl-light-text) !important;
    }

        .main-header.navbar-light .nav-link:hover,
        .main-header.navbar-light .nav-link:focus {
            color: var(--etl-accent) !important;
        }

.navbar-light .form-control-navbar,
.navbar-search-block .form-control-navbar {
    background-color: var(--etl-dark-elevated);
    border-color: var(--etl-border);
    color: #fff;
}

    .navbar-light .form-control-navbar::placeholder {
        color: var(--etl-muted);
    }

.navbar-light .btn-navbar {
    background-color: var(--etl-dark-elevated);
    border-color: var(--etl-border);
    color: var(--etl-light-text);
}

/* ---------------------------------------------------------------------------
   Rodapé
   --------------------------------------------------------------------------- */
.main-footer a {
    color: var(--etl-accent-active);
}

    .main-footer a:hover {
        color: var(--etl-accent);
    }

/* ---------------------------------------------------------------------------
   Preloader: keep the Kinora wordmark aspect ratio (login used to force 206x74).
   On .login-page the body is a flex column; a fixed preloader is still a flex
   item and would otherwise shrink to the logo/box width.
   --------------------------------------------------------------------------- */
.preloader img {
    width: 220px;
    height: auto;
    max-width: 80vw;
}

.login-page .preloader,
.register-page .preloader {
    width: 100vw;
    align-self: stretch;
}

/* ---------------------------------------------------------------------------
   Tela de login
   --------------------------------------------------------------------------- */
.login-logo a,
.register-logo a {
    color: var(--etl-accent) !important;
    font-weight: 700;
}

.login-page .btn-login,
.login-page .btn-primary {
    background-color: var(--etl-accent);
    border-color: var(--etl-accent);
    color: var(--etl-on-accent);
    font-weight: 700;
}

    .login-page .btn-login:hover,
    .login-page .btn-primary:hover {
        background-color: var(--etl-accent-hover);
        border-color: var(--etl-accent-hover);
        color: var(--etl-on-accent);
    }

.login-page .input-group-text {
    color: var(--etl-accent-active);
}

.btn-esqueci-password {
    color: var(--etl-accent-active);
}

    .btn-esqueci-password:hover {
        color: var(--etl-accent);
    }

/* ---------------------------------------------------------------------------
   Menu lateral: fonte ~5% menor (itens de 1º nível e subitens do treeview)
   --------------------------------------------------------------------------- */
.main-sidebar .nav-sidebar .nav-link p {
    font-size: 0.95rem;
}

/* ---------------------------------------------------------------------------
   select2 (busca nos combos): alinha a aparência com o .form-control do
   AdminLTE, para o combo com busca não ficar mais baixo nem com borda
   diferente dos campos vizinhos do mesmo formulário.
   --------------------------------------------------------------------------- */
/* O padding fica no container e a centralização é por flex: com line-height fixo o texto encostava para
   cima/baixo dependendo da fonte, e o padding do select2 (8px) não batia com o .75rem do .form-control,
   deixando o texto do combo começando em posição diferente dos campos vizinhos. */
.select2-container--default .select2-selection--single {
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    display: flex;
    align-items: center;
}

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 1.5;
        padding: 0;
        color: #495057;
    }

    /* A seta é absoluta dentro da seleção: ocupa toda a altura para ficar centrada junto com o texto. */
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 100%;
        top: 0;
        right: .25rem;
    }

/* Combo aberto: mesma cor de foco dos demais campos */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--etl-accent);
}

/* Múltipla escolha: tags e busca na mesma linha, crescendo conforme necessário */
.select2-container--default .select2-selection--multiple {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: calc(2.25rem + 2px);
    border: 1px solid #ced4da;
}

/* Item destacado da lista com o âmbar da marca, em vez do azul padrão */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--etl-accent);
    color: var(--etl-on-accent);
}

/* Filtro de conta das telas de Lançamentos e Aplicações: mantém a identidade âmbar do seletor mesmo
   quando o select2 assume o campo (contas em quantidade suficiente para valer a busca). */
select#filtroConta + .select2-container--default .select2-selection--single {
    background-color: var(--etl-accent);
    border-color: var(--etl-accent);
}

    select#filtroConta + .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: var(--etl-on-accent);
        font-weight: 600;
    }

    select#filtroConta + .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-top-color: var(--etl-on-accent);
    }

/* select2 dentro de input-group (combo com o botão "+" de cadastro rápido ao lado): o container do select2
   nasce com width:100% inline, o que no flex do input-group ocupa a linha inteira e joga o botão para
   baixo. Aqui ele volta a se comportar como o .form-control faz no Bootstrap — item flex que cresce — e
   perde o arredondamento do lado que encosta no botão. */
.input-group > .select2-container {
    flex: 1 1 auto;
    width: 1% !important;
}

    .input-group > .select2-container .select2-selection--single,
    .input-group > .select2-container .select2-selection--multiple {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }