/* ==========================================================================
   SGSAP — ponte Bootstrap 4 / SB Admin 2 → tokens
   --------------------------------------------------------------------------
   O Bootstrap e o tema SB Admin trazem cores fixas no CSS (cinzas, branco,
   azul). Enquanto elas ficarem lá, trocar de tema só muda as telas escritas
   com classes sgsap-*, e componentes comuns (tabela, formulário, dropdown,
   paginação) continuam claros no tema escuro.

   Este arquivo é a única camada autorizada a sobrescrever componentes do
   Bootstrap, e faz isso sempre apontando para os tokens. Carregue-o DEPOIS de
   bootstrap.min.css e sb-admin-2.min.css.
   ========================================================================== */

/* --- base ---------------------------------------------------------------- */

body {
    background-color: var(--sgsap-page);
    color: var(--sgsap-text);
}

hr {
    border-top-color: var(--sgsap-border);
}

a {
    color: var(--sgsap-accent-legivel);
    transition: color var(--sgsap-transition);
}

a:hover,
a:focus {
    color: var(--sgsap-accent-legivel);
}

/* Um anel de foco só, igual em toda parte, sempre visível nos três temas. */
.sgsap-shell a:focus-visible,
.sgsap-shell button:focus-visible,
.sgsap-shell input:focus-visible,
.sgsap-shell select:focus-visible,
.sgsap-shell textarea:focus-visible,
.sgsap-shell [tabindex]:focus-visible {
    outline: 2px solid var(--sgsap-focus);
    outline-offset: 2px;
    box-shadow: none;
}

/* --- tipografia utilitária do SB Admin ----------------------------------- */

.text-gray-100, .text-gray-200, .text-gray-300 { color: var(--sgsap-text-muted) !important; }
.text-gray-400, .text-gray-500, .text-gray-600 { color: var(--sgsap-text-muted) !important; }
.text-gray-700, .text-gray-800, .text-gray-900 { color: var(--sgsap-text) !important; }
.text-dark { color: var(--sgsap-text) !important; }
.text-muted { color: var(--sgsap-text-muted) !important; }
.text-primary { color: var(--sgsap-accent-legivel) !important; }
.text-success { color: var(--sgsap-success) !important; }
.text-danger { color: var(--sgsap-danger) !important; }
.text-warning { color: var(--sgsap-warning) !important; }
.text-info { color: var(--sgsap-info) !important; }

.bg-white { background-color: var(--sgsap-surface) !important; }
.bg-light { background-color: var(--sgsap-surface-muted) !important; }

/* --- superfícies --------------------------------------------------------- */

.card,
.list-group-item,
.modal-content,
.dropdown-menu,
.popover,
.toast {
    background-color: var(--sgsap-surface);
    border-color: var(--sgsap-border);
    color: var(--sgsap-text);
}

.card {
    border-radius: var(--sgsap-radius);
    box-shadow: var(--sgsap-shadow-sm);
}

.card-header,
.card-footer,
.modal-header,
.modal-footer {
    background-color: var(--sgsap-surface-muted);
    border-color: var(--sgsap-border);
    color: var(--sgsap-text);
}

.sticky-footer,
footer.sticky-footer {
    background-color: var(--sgsap-surface) !important;
    color: var(--sgsap-text-muted);
    border-top: 1px solid var(--sgsap-border);
}

/* --- tabelas ------------------------------------------------------------- */

.table {
    color: var(--sgsap-text);
    border-color: var(--sgsap-border);
}

.table th,
.table td {
    border-color: var(--sgsap-border-subtle);
    vertical-align: middle;
}

.table thead th {
    background-color: var(--sgsap-surface-muted);
    border-bottom: 1px solid var(--sgsap-border);
    color: var(--sgsap-text-muted);
    font-size: var(--sgsap-font-size-small);
    font-weight: var(--sgsap-font-weight-bold);
    letter-spacing: .02em;
    text-transform: uppercase;
}

.table tbody tr {
    transition: background-color var(--sgsap-transition);
}

.table-hover tbody tr:hover,
.table tbody tr:hover {
    background-color: var(--sgsap-accent-quiet);
    color: var(--sgsap-text);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--sgsap-surface-muted);
}

.table-bordered,
.table-bordered th,
.table-bordered td {
    border-color: var(--sgsap-border-subtle);
}

/* Tabela dentro de página com fundo de superfície ganha respiro e cantos. */
.sgsap-shell .table {
    background-color: var(--sgsap-surface);
    border-radius: var(--sgsap-radius);
    overflow: hidden;
}

/* --- formulários --------------------------------------------------------- */

.form-control,
.custom-select,
select.form-control,
textarea.form-control {
    background-color: var(--sgsap-surface);
    border-color: var(--sgsap-border);
    color: var(--sgsap-text);
    border-radius: var(--sgsap-radius-sm);
    transition: border-color var(--sgsap-transition), box-shadow var(--sgsap-transition);
}

.form-control:focus,
.custom-select:focus {
    background-color: var(--sgsap-surface);
    border-color: var(--sgsap-accent);
    color: var(--sgsap-text);
    box-shadow: var(--sgsap-focus-ring);
}

.form-control::placeholder {
    color: var(--sgsap-text-muted);
    opacity: .8;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--sgsap-surface-muted);
    color: var(--sgsap-text-muted);
}

/* Campos sem a classe .form-control.
   Boa parte dos formulários do SGSAP é gerada pelo Django sem widget próprio,
   então o campo chega ao HTML como <input> puro e não recebe nada do
   Bootstrap. Estas regras davam a ele a aparência do resto — e viviam em
   basedashboard.css, a última folha da ordem, com cor literal: era exatamente
   o que deixava todo campo branco no tema escuro.

   Aqui ficam na única camada autorizada a redesenhar componente do Bootstrap,
   com cor por token e forma pelos tokens de raio e transição, para que os
   pacotes de estilo alcancem os campos junto com o resto. */
input[type="text" i],
input[type="email" i],
input[type="password" i],
input[type="number" i],
input[type="search" i],
select,
textarea {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: var(--sgsap-font-size-body);
    font-weight: 400;
    line-height: 1.5;
    color: var(--sgsap-text);
    background-color: var(--sgsap-surface);
    background-clip: padding-box;
    border: 1px solid var(--sgsap-border);
    border-radius: var(--sgsap-radius-sm);
    transition: border-color var(--sgsap-transition), box-shadow var(--sgsap-transition);
}

/* A busca da DataTables fica em linha com o rótulo que a biblioteca gera. */
.dataTables_filter input[type="search" i] {
    display: inline-block !important;
}

.input-group-text {
    background-color: var(--sgsap-surface-muted);
    border-color: var(--sgsap-border);
    color: var(--sgsap-text-muted);
}

label {
    color: var(--sgsap-text);
    font-weight: var(--sgsap-font-weight-medium);
}

.form-text,
small.form-text {
    color: var(--sgsap-text-muted);
}

.custom-control-label::before {
    background-color: var(--sgsap-surface);
    border-color: var(--sgsap-border-strong);
}

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

/* --- botões -------------------------------------------------------------- */

.btn {
    border-radius: var(--sgsap-radius-sm);
    font-weight: var(--sgsap-font-weight-medium);
    cursor: pointer;
    transition: background-color var(--sgsap-transition), border-color var(--sgsap-transition),
                color var(--sgsap-transition), transform var(--sgsap-transition), box-shadow var(--sgsap-transition);
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.btn:active:not(:disabled) {
    transform: translateY(0);
}

.btn-primary,
.sgsap-button-primary {
    background-color: var(--sgsap-accent);
    border-color: var(--sgsap-accent);
    color: var(--sgsap-accent-contrast);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.sgsap-button-primary:hover,
.sgsap-button-primary:focus {
    background-color: var(--sgsap-accent-strong);
    border-color: var(--sgsap-accent-strong);
    color: var(--sgsap-accent-contrast);
}

.btn-outline-primary {
    border-color: var(--sgsap-accent);
    color: var(--sgsap-accent-legivel);
    background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--sgsap-accent);
    border-color: var(--sgsap-accent);
    color: var(--sgsap-accent-contrast);
}

.btn-secondary,
.btn-outline-secondary {
    color: var(--sgsap-text);
    border-color: var(--sgsap-border-strong);
    background-color: transparent;
}

.btn-secondary {
    background-color: var(--sgsap-surface-muted);
}

.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--sgsap-surface-hover);
    border-color: var(--sgsap-border-strong);
    color: var(--sgsap-text);
}

.btn-success { background-color: var(--sgsap-success); border-color: var(--sgsap-success); color: var(--sgsap-text-inverse); }
.btn-danger { background-color: var(--sgsap-danger); border-color: var(--sgsap-danger); color: var(--sgsap-text-inverse); }
.btn-warning { background-color: var(--sgsap-warning); border-color: var(--sgsap-warning); color: var(--sgsap-text-inverse); }
.btn-info { background-color: var(--sgsap-info); border-color: var(--sgsap-info); color: var(--sgsap-text-inverse); }

.btn-outline-success { color: var(--sgsap-success); border-color: var(--sgsap-success); }
.btn-outline-danger { color: var(--sgsap-danger); border-color: var(--sgsap-danger); }
.btn-outline-warning { color: var(--sgsap-warning); border-color: var(--sgsap-warning); }
.btn-outline-info { color: var(--sgsap-info); border-color: var(--sgsap-info); }
.btn-outline-success:hover { background-color: var(--sgsap-success); color: var(--sgsap-text-inverse); }
.btn-outline-danger:hover { background-color: var(--sgsap-danger); color: var(--sgsap-text-inverse); }
.btn-outline-warning:hover { background-color: var(--sgsap-warning); color: var(--sgsap-text-inverse); }
.btn-outline-info:hover { background-color: var(--sgsap-info); color: var(--sgsap-text-inverse); }

.btn-link {
    color: var(--sgsap-accent-legivel);
}

.btn-link:hover {
    color: var(--sgsap-accent-legivel);
}

/* --- navegação, dropdown, paginação -------------------------------------- */

.dropdown-menu {
    box-shadow: var(--sgsap-shadow-lg);
    border-radius: var(--sgsap-radius-md);
}

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

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--sgsap-accent-quiet);
    color: var(--sgsap-text);
}

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

.dropdown-divider {
    border-top-color: var(--sgsap-border);
}

.dropdown-header {
    color: var(--sgsap-text-muted);
}

.page-link {
    background-color: var(--sgsap-surface);
    border-color: var(--sgsap-border);
    color: var(--sgsap-accent-legivel);
}

.page-link:hover {
    background-color: var(--sgsap-accent-quiet);
    border-color: var(--sgsap-border);
    color: var(--sgsap-accent-legivel);
}

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

.page-item.disabled .page-link {
    background-color: var(--sgsap-surface-muted);
    border-color: var(--sgsap-border);
    color: var(--sgsap-text-muted);
}

.nav-tabs {
    border-bottom-color: var(--sgsap-border);
}

.nav-tabs .nav-link {
    color: var(--sgsap-text-muted);
}

.nav-tabs .nav-link.active {
    background-color: var(--sgsap-surface);
    border-color: var(--sgsap-border) var(--sgsap-border) var(--sgsap-surface);
    color: var(--sgsap-text);
}

/* --- sinalização --------------------------------------------------------- */

.badge-primary { background-color: var(--sgsap-accent); color: var(--sgsap-accent-contrast); }
.badge-secondary { background-color: var(--sgsap-surface-muted); color: var(--sgsap-text-muted); }
.badge-success { background-color: var(--sgsap-success-soft); color: var(--sgsap-success); }
.badge-danger { background-color: var(--sgsap-danger-soft); color: var(--sgsap-danger); }
.badge-warning { background-color: var(--sgsap-warning-soft); color: var(--sgsap-warning); }
.badge-info { background-color: var(--sgsap-info-soft); color: var(--sgsap-info); }

.badge {
    border-radius: var(--sgsap-radius-pill);
    font-weight: var(--sgsap-font-weight-medium);
    padding: .35em .7em;
}

.alert-success { background-color: var(--sgsap-success-soft); border-color: var(--sgsap-success); color: var(--sgsap-success); }
.alert-danger { background-color: var(--sgsap-danger-soft); border-color: var(--sgsap-danger); color: var(--sgsap-danger); }
/* O texto do aviso usa a cor de texto comum: --sgsap-warning sobre
   --sgsap-warning-soft dá 4,06:1, abaixo do mínimo de 4,5:1. O fundo e a borda
   continuam dizendo que é um aviso; o recado continua legível. */
.alert-warning { background-color: var(--sgsap-warning-soft); border-color: var(--sgsap-warning); color: var(--sgsap-text); }
.alert-info { background-color: var(--sgsap-info-soft); border-color: var(--sgsap-info); color: var(--sgsap-info); }

.alert {
    border-radius: var(--sgsap-radius-md);
}

.close {
    color: var(--sgsap-text);
    text-shadow: none;
    opacity: .7;
}

.close:hover {
    color: var(--sgsap-text);
    opacity: 1;
}

.errorlist {
    color: var(--sgsap-danger);
    list-style: none;
    margin: var(--sgsap-space-2) 0 0;
    padding: 0;
    font-size: var(--sgsap-font-size-small);
}

/* --- menu lateral e barra superior --------------------------------------- */

/* Substitui o gradiente cinza fixo do SB Admin. A cor sai do destaque, então
   trocar a cor do sistema muda o menu junto, sem <style> inline por página. */
.sgsap-sidebar,
.sgsap-sidebar.bg-gradient-dark,
.sgsap-sidebar.bg-customize {
    /* Cor de texto no contêiner: qualquer texto solto no menu herda a cor
       certa, em vez da cor do corpo da página. */
    color: var(--sgsap-nav-text);
    background-color: var(--sgsap-nav-surface) !important;
    background-image: linear-gradient(180deg, var(--sgsap-nav-surface) 0%, var(--sgsap-nav-surface-strong) 100%) !important;
    border-right: 1px solid var(--sgsap-nav-border);
}

/* Os seletores repetem .sidebar-dark de propósito: o SB Admin escreve
   `.sidebar-dark .nav-item .nav-link` (0,3,0) e venceria um `.sgsap-sidebar
   .nav-link` (0,2,0). Igualar o peso evita depender da ordem dos arquivos. */
.sgsap-sidebar.sidebar-dark .nav-item .nav-link,
.sgsap-sidebar.sidebar-dark .nav-item .nav-link i,
.sgsap-sidebar .nav-link,
.sgsap-sidebar .nav-link i {
    color: var(--sgsap-nav-text);
}

.sgsap-sidebar.sidebar-dark .nav-item .nav-link:hover,
.sgsap-sidebar.sidebar-dark .nav-item .nav-link:focus-visible,
.sgsap-sidebar.sidebar-dark .nav-item .nav-link:hover i,
.sgsap-sidebar.sidebar-dark .nav-item .nav-link:focus-visible i {
    background-color: var(--sgsap-nav-active);
    color: var(--sgsap-nav-text-strong);
}

.sgsap-sidebar.sidebar-dark .nav-item.active .nav-link,
.sgsap-sidebar.sidebar-dark .nav-item.active .nav-link i {
    background-color: var(--sgsap-nav-active);
    color: var(--sgsap-nav-text-strong);
    font-weight: var(--sgsap-font-weight-bold);
}

.sgsap-sidebar.sidebar-dark .nav-item.active .nav-link {
    box-shadow: inset 3px 0 0 var(--sgsap-nav-text-strong);
}

/* O cabeçalho de seção se distingue por tamanho e espacejamento, não por
   opacidade: texto de menu tem de passar em 4,5:1 como qualquer outro. */
.sgsap-sidebar.sidebar-dark .sidebar-heading,
.sgsap-sidebar .sidebar-heading,
.sgsap-sidebar .sidebar-heading a {
    color: var(--sgsap-nav-text-muted);
    font-size: .72rem;
    font-weight: var(--sgsap-font-weight-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sgsap-sidebar.sidebar-dark .sidebar-brand {
    color: var(--sgsap-nav-text-strong);
}

.sgsap-sidebar .sidebar-divider {
    border-top-color: var(--sgsap-nav-border);
}

.sgsap-sidebar .sidebar-brand-text {
    color: var(--sgsap-nav-text-strong);
}

/* Utilitários de sombra. O Bootstrap os escreve com um cinza fixo e
   `!important`, então eles venciam a sombra dos pacotes exatamente onde ela
   mais aparece — os cartões do painel usam `class="card ... shadow"`. Com a
   sombra vindo do token, a linguagem do pacote (dura e deslocada no pixelado,
   no terminal, no HQ e no brutalista) alcança também esses cartões. */
.shadow-sm { box-shadow: var(--sgsap-shadow-sm) !important; }
.shadow { box-shadow: var(--sgsap-shadow) !important; }
.shadow-lg { box-shadow: var(--sgsap-shadow-lg) !important; }

/* Listas suspensas. O SB Admin pinta o cabeçalho com #b7b9cc, que dá 1,94:1
   sobre a superfície branca — ilegível já no tema claro, e a auditoria por
   expressão regular não via porque nenhum template cita essa cor. */
.dropdown-header,
.dropdown .dropdown-menu .dropdown-header,
.topbar .dropdown-list .dropdown-header {
    background-color: var(--sgsap-surface-muted);
    color: var(--sgsap-text-muted);
}

/* Item desativado ficava em 3,56:1. Desativado não precisa ser ilegível. */
.dropdown-item.disabled,
.dropdown-item:disabled {
    color: var(--sgsap-text-muted);
}

/* Fundo das telas de autenticação. Vinha do Bootstrap com cinza-quase-preto
   fixo, o que deixava o login sempre escuro e fora do tema. */
.bg-dark {
    background-color: var(--sgsap-page) !important;
    color: var(--sgsap-text) !important;
}

/* Classe herdada dos templates: continua existindo, mas agora aponta para o
   destaque em vez de receber uma cor fixa por <style> inline. */
.bg-customize {
    background-color: var(--sgsap-accent) !important;
    color: var(--sgsap-accent-contrast) !important;
}

.icon-circle.bg-customize {
    color: var(--sgsap-accent-contrast) !important;
}

.sgsap-topbar {
    background-color: var(--sgsap-surface) !important;
    border-bottom: 1px solid var(--sgsap-border);
    color: var(--sgsap-text);
}

/* Mesmo motivo do menu lateral: o SB Admin escreve
   `.topbar.navbar-light .navbar-nav .nav-item .nav-link` (0,4,0) com um cinza
   claro que, sobre a barra branca, dava 1.49:1. */
.sgsap-topbar.navbar-light .navbar-nav .nav-item .nav-link,
.sgsap-topbar.navbar-dark .navbar-nav .nav-item .nav-link,
.sgsap-topbar .nav-link,
.sgsap-topbar .nav-link i {
    color: var(--sgsap-text-muted);
}

.sgsap-topbar.navbar-light .navbar-nav .nav-item .nav-link:hover,
.sgsap-topbar.navbar-light .navbar-nav .nav-item .nav-link:focus,
.sgsap-topbar .nav-link:hover {
    color: var(--sgsap-text);
}

.topbar-divider {
    border-right-color: var(--sgsap-border);
}

.scroll-to-top {
    background-color: var(--sgsap-accent);
    color: var(--sgsap-accent-contrast);
}

.scroll-to-top:hover {
    background-color: var(--sgsap-accent-strong);
    color: var(--sgsap-accent-contrast);
}