/* ===========================================================================
   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);
}

/* ---------------------------------------------------------------------------
   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);
}

/* ---------------------------------------------------------------------------
   Tela de login
   --------------------------------------------------------------------------- */
.login-page,
.register-page {
    background-color: transparent;
}

.login-page .login-box .card,
.register-page .register-box .card {
    background-color: rgba(33, 37, 41, 0.88);
    border: 1px solid var(--etl-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
}

.login-page .login-card-body,
.register-page .register-card-body {
    background-color: transparent;
    color: var(--etl-light-text);
}

.login-page .login-box-msg,
.register-page .register-box-msg {
    color: var(--etl-light-text);
}

.login-page .form-control,
.register-page .form-control {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--etl-border);
    color: var(--etl-light-text);
}

.login-page .form-control::placeholder,
.register-page .form-control::placeholder {
    color: var(--etl-muted);
}

.login-page .form-control:focus,
.register-page .form-control:focus {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: var(--etl-accent);
    color: #fff;
}

.login-page .input-group-text,
.register-page .input-group-text {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: var(--etl-border);
}

.login-logo a,
.register-logo a {
    color: var(--etl-accent) !important;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.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);
}

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

.login-page .preloader {
    background-color: var(--etl-dark);
}