/* ==========================================================================
   Temas visuais — Portal do Servidor
   - Os "skins" do template (skin-*) só alteram a barra superior e o menu
     lateral. Este arquivo complementa os skins "-dark", aplicando um
     verdadeiro modo escuro à área de conteúdo (fundo, cards, tabelas,
     formulários, etc.). Vale para qualquer skin terminado em "-dark".
   ========================================================================== */

body[class*="-dark"] {
    /* Paleta do modo escuro */
    --tema-bg: #1b1e23;
    --tema-surface: #24282f;
    --tema-surface-alt: #2b3038;
    --tema-border: #3a4049;
    --tema-text: #e4e7ec;
    --tema-text-muted: #9aa3b0;

    background-color: var(--tema-bg);
    color: var(--tema-text);
}

/* Área principal -------------------------------------------------------- */
body[class*="-dark"] .page-wrapper,
body[class*="-dark"] .container-fluid {
    background-color: var(--tema-bg);
}

body[class*="-dark"] .page-titles {
    background-color: var(--tema-surface);
    border-color: var(--tema-border);
}

/* Cards / painéis -------------------------------------------------------- */
body[class*="-dark"] .card,
body[class*="-dark"] .modal-content,
body[class*="-dark"] .right-sidebar,
body[class*="-dark"] .right-sidebar .slimscrollright,
body[class*="-dark"] .dropdown-menu {
    background-color: var(--tema-surface);
    color: var(--tema-text);
    border-color: var(--tema-border);
}

body[class*="-dark"] .card-header,
body[class*="-dark"] .card-footer,
body[class*="-dark"] .modal-header,
body[class*="-dark"] .modal-footer {
    background-color: var(--tema-surface-alt);
    border-color: var(--tema-border);
}

/* Texto ------------------------------------------------------------------ */
body[class*="-dark"] h1,
body[class*="-dark"] h2,
body[class*="-dark"] h3,
body[class*="-dark"] h4,
body[class*="-dark"] h5,
body[class*="-dark"] h6,
body[class*="-dark"] p,
body[class*="-dark"] label,
body[class*="-dark"] span,
body[class*="-dark"] td,
body[class*="-dark"] th,
body[class*="-dark"] li {
    color: var(--tema-text);
}

body[class*="-dark"] .text-muted,
body[class*="-dark"] small {
    color: var(--tema-text-muted) !important;
}

body[class*="-dark"] a:not(.btn):not(.nav-link) {
    color: #5cc6d8;
}

/* Painel de Serviços: seção Acessibilidade (A+/A-/Alto Contraste) tem cor de
   texto fixa (#212529) no template base, que fica ilegível no fundo escuro. */
body[class*="-dark"] .chatonline li a span {
    color: var(--tema-text) !important;
}

/* Tabelas ---------------------------------------------------------------- */
body[class*="-dark"] .table,
body[class*="-dark"] table.dataTable {
    color: var(--tema-text);
    border-color: var(--tema-border);
}

body[class*="-dark"] .table thead th,
body[class*="-dark"] table.dataTable thead th {
    background-color: var(--tema-surface-alt);
    color: var(--tema-text);
    border-color: var(--tema-border);
}

body[class*="-dark"] .table td,
body[class*="-dark"] .table th {
    border-color: var(--tema-border);
}

body[class*="-dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03);
}

body[class*="-dark"] .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

/* Formulários ------------------------------------------------------------ */
body[class*="-dark"] .form-control,
body[class*="-dark"] .custom-select,
body[class*="-dark"] textarea,
body[class*="-dark"] .bootstrap-select .dropdown-toggle {
    background-color: var(--tema-surface-alt);
    color: var(--tema-text);
    border-color: var(--tema-border);
}

body[class*="-dark"] .form-control:focus {
    background-color: var(--tema-surface-alt);
    color: var(--tema-text);
    border-color: #5cc6d8;
    box-shadow: 0 0 0 0.2rem rgba(92, 198, 216, 0.25);
}

body[class*="-dark"] .form-control::placeholder {
    color: var(--tema-text-muted);
}

body[class*="-dark"] .input-group-text {
    background-color: var(--tema-surface-alt);
    color: var(--tema-text-muted);
    border-color: var(--tema-border);
}

/* Botões neutros --------------------------------------------------------- */
body[class*="-dark"] .btn-light,
body[class*="-dark"] .btn-default,
body[class*="-dark"] .btn-outline-secondary {
    background-color: var(--tema-surface-alt);
    color: var(--tema-text);
    border-color: var(--tema-border);
}

/* Divisores e elementos diversos ---------------------------------------- */
body[class*="-dark"] hr,
body[class*="-dark"] .border,
body[class*="-dark"] .border-top,
body[class*="-dark"] .border-bottom {
    border-color: var(--tema-border) !important;
}

body[class*="-dark"] .list-group-item {
    background-color: var(--tema-surface);
    color: var(--tema-text);
    border-color: var(--tema-border);
}

body[class*="-dark"] .nav-tabs {
    border-color: var(--tema-border);
}

body[class*="-dark"] .nav-tabs .nav-link.active {
    background-color: var(--tema-surface);
    color: var(--tema-text);
    border-color: var(--tema-border) var(--tema-border) var(--tema-surface);
}

/* Footer ----------------------------------------------------------------- */
body[class*="-dark"] .footer {
    background-color: var(--tema-surface);
    color: var(--tema-text-muted);
    border-color: var(--tema-border);
}

/* Cards de menu da Home (btn-secondary dentro de .card) ------------------ */
body[class*="-dark"] .menu-card,
body[class*="-dark"] .card .btn-secondary {
    background-color: var(--tema-surface-alt) !important;
    border-color: var(--tema-border) !important;
    color: var(--tema-text) !important;
}

body[class*="-dark"] .menu-card:hover,
body[class*="-dark"] .card:hover .btn-secondary {
    background-color: var(--tema-border) !important;
}

body[class*="-dark"] .menu-card .card-title,
body[class*="-dark"] .card .btn {
    color: var(--tema-text) !important;
}

/* Menus suspensos (dropdown do usuário, etc.) ---------------------------- */
body[class*="-dark"] .dropdown-item {
    color: var(--tema-text);
}

body[class*="-dark"] .dropdown-item:hover,
body[class*="-dark"] .dropdown-item:focus {
    background-color: var(--tema-surface-alt);
    color: var(--tema-text);
}

body[class*="-dark"] .dropdown-divider {
    border-color: var(--tema-border);
}

/* Breadcrumb / barra de títulos ------------------------------------------ */
body[class*="-dark"] .breadcrumb {
    background-color: transparent;
}

body[class*="-dark"] .breadcrumb-item.active,
body[class*="-dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--tema-text-muted);
}

/* Botão de fechar (modais, alertas) -------------------------------------- */
body[class*="-dark"] .close {
    color: var(--tema-text);
    text-shadow: none;
}

body[class*="-dark"] .close:hover {
    color: #fff;
}

/* Paginação -------------------------------------------------------------- */
body[class*="-dark"] .page-link {
    background-color: var(--tema-surface);
    color: var(--tema-text);
    border-color: var(--tema-border);
}

body[class*="-dark"] .page-item.disabled .page-link {
    background-color: var(--tema-surface-alt);
    color: var(--tema-text-muted);
    border-color: var(--tema-border);
}

/* Alertas neutros / badges leves ----------------------------------------- */
body[class*="-dark"] .alert-light,
body[class*="-dark"] .badge-light {
    background-color: var(--tema-surface-alt);
    color: var(--tema-text);
    border-color: var(--tema-border);
}

/* ==========================================================================
   Painel de Serviços: o header (.rpanel-title) vinha com laranja fixo no
   template original, independente do tema escolhido. Aqui ele acompanha a
   mesma cor de destaque usada em .topbar para cada skin.
   ========================================================================== */
.skin-default .right-sidebar .rpanel-title {
    background: #4F5467;
}

.skin-default-dark .right-sidebar .rpanel-title {
    background: #fb9678;
}

.skin-green .right-sidebar .rpanel-title,
.skin-green-dark .right-sidebar .rpanel-title {
    background: #00c292;
}

.skin-red .right-sidebar .rpanel-title,
.skin-red-dark .right-sidebar .rpanel-title {
    background: #e46a76;
}

.skin-blue .right-sidebar .rpanel-title,
.skin-blue-dark .right-sidebar .rpanel-title {
    background: #03a9f3;
}

.skin-purple .right-sidebar .rpanel-title,
.skin-purple-dark .right-sidebar .rpanel-title {
    background: #6f42c1;
}

.skin-megna .right-sidebar .rpanel-title,
.skin-megna-dark .right-sidebar .rpanel-title {
    background: #01c0c8;
}

/* ==========================================================================
   Polimento geral do seletor de temas (Painel de Serviços)
   ========================================================================== */
#themecolors li a {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#themecolors li a:hover {
    transform: scale(1.12);
}

#themecolors li a.working {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #17a2b8;
}

/* Ícone do pincel na barra superior */
#painel-temas .nav-link {
    cursor: pointer;
}