/* ============================================================
   SHELL DO SISTEMA TAREFAS — camada visual sobre o SB Admin 2
   Tema claro por padrão; overrides com body.tema-dark
   ============================================================ */

/* ---------- Fundo geral ---------- */
body {
    background-color: #f4f6fb;
}

body.tema-dark {
    background-color: #0b1120;
}

/* O sb-admin-2-dark.min.css traz #f8f9fc (claro) para o content-wrapper por engano;
   com o #wrapper restaurado no sidebar.php esse seletor passou a valer — corrige aqui. */
#wrapper #content-wrapper {
    background-color: #f4f6fb;
}

body.tema-dark #wrapper #content-wrapper {
    background-color: #0b1120;
}

/* ---------- Topbar (flat, sóbrio, fina) ---------- */
.topbar-tarefas {
    background-color: #3a56c4;
    height: 3.4rem;
}

.topbar-tarefas .nav-item .nav-link {
    height: 3.4rem;
}

.topbar-tarefas .topbar-divider {
    height: 1.6rem;
}

.topbar-tarefas .img-profile {
    height: 1.8rem;
    width: 1.8rem;
}

body.tema-dark .topbar-tarefas {
    background-color: #0e1626;
}

/* Marca */
.brand-tarefas {
    display: flex;
    align-items: center;
    color: #fff !important;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none !important;
    margin-right: 1rem;
    white-space: nowrap;
}

.brand-tarefas img {
    height: 30px;
    width: 30px;
    border-radius: .35rem;
    margin-right: .55rem;
}

/* Links do menu */
.topbar-tarefas .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 600;
    font-size: .9rem;
    transition: color .15s, box-shadow .15s;
}

.topbar-tarefas .navbar-nav .nav-link:hover {
    color: #fff !important;
}

.topbar-tarefas .navbar-nav .nav-item.active > .nav-link {
    color: #fff !important;
    box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.85);
}

/* Divisor e nome do usuário */
.topbar-tarefas .topbar-divider {
    border-right-color: rgba(255, 255, 255, 0.25);
}

.topbar-tarefas .nome-usuario {
    color: rgba(255, 255, 255, 0.9);
}

/* Avatar do usuário (foto de perfil recortada) */
.avatar-usuario {
    object-fit: cover;
    background: #fff;
}

/* Cabeçalho do dropdown do usuário (avatar + nome) */
.dropdown-perfil {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .75rem .65rem;
}

.dropdown-perfil .avatar-usuario {
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    border: 2px solid #eef0f7;
}

.dropdown-perfil-info {
    min-width: 0;
}

.dropdown-perfil-info .nome {
    font-weight: 700;
    font-size: .85rem;
    color: #3a3b45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-perfil-info .email {
    font-size: .75rem;
    color: #9aa0b5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.tema-dark .dropdown-perfil-info .nome {
    color: #e2e6ee;
}

body.tema-dark .dropdown-perfil .avatar-usuario {
    border-color: #24314a;
}

/* Prévia da foto no modal */
.preview-foto-perfil {
    width: 130px;
    height: 130px;
    object-fit: cover;
    border: 3px solid #eef0f7;
    background: #fff;
}

body.tema-dark .preview-foto-perfil {
    border-color: #1e2a3d;
}

/* O input de arquivo do modal cobre todo o botão "Escolher imagem" */
.fileUpload input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Dropdowns (discretos, profissionais) */
.dropdown-menu-tarefas {
    border: 0;
    border-radius: .5rem;
    box-shadow: 0 .5rem 1.5rem rgba(30, 40, 80, 0.16);
    padding: .35rem;
    font-size: .85rem;
}

.dropdown-menu-tarefas .dropdown-item {
    border-radius: .35rem;
    padding: .5rem .75rem;
    color: #3a3b45;
}

.dropdown-menu-tarefas .dropdown-item i {
    width: 1.25rem;
    text-align: center;
    margin-right: .5rem;
    color: #858796;
}

.dropdown-menu-tarefas .dropdown-item:hover {
    background: #f1f3fa;
    color: #2e3350;
}

.dropdown-menu-tarefas .dropdown-item:hover i {
    color: #4e73df;
}

body.tema-dark .dropdown-menu-tarefas {
    background: #0f172a;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, 0.5);
}

body.tema-dark .dropdown-menu-tarefas .dropdown-item {
    color: #c7ccd6;
}

body.tema-dark .dropdown-menu-tarefas .dropdown-item i {
    color: #8b93a7;
}

body.tema-dark .dropdown-menu-tarefas .dropdown-item:hover {
    background: #1d283f;
    color: #fff;
}

body.tema-dark .dropdown-menu-tarefas .dropdown-item:hover i {
    color: #38bdf8;
}

body.tema-dark .dropdown-menu-tarefas .dropdown-divider {
    border-color: #24314a;
}

/* ---------- Desktop: menu central, marca à esquerda, usuário à direita ---------- */
@media (min-width: 992px) {
    .topbar-tarefas {
        display: flex !important;
        justify-content: space-between !important;
    }

    .topbar-tarefas #navbarMainContent {
        flex-grow: 1;
        display: flex !important;
        justify-content: center;
    }
}

/* ---------- Menu mobile (collapse) ---------- */
@media (max-width: 991.98px) {
    .topbar-tarefas {
        position: relative;
        overflow: visible;
    }

    #navbarMainContent {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1030;
        background-color: #3a56c4;
        box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, 0.25);
        padding: .5rem .75rem .75rem;
        width: 100%;
    }

    body.tema-dark #navbarMainContent {
        background-color: #0e1626;
    }

    #navbarMainContent .nav-link {
        padding: .65rem .75rem !important;
        height: auto !important;
    }

    .topbar-tarefas .navbar-nav .nav-item.active > .nav-link {
        box-shadow: none;
        background: rgba(255, 255, 255, 0.12);
        border-radius: .35rem;
    }

    #navbarMainContent .dropdown-menu {
        position: static !important;
        float: none;
        border: none;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.08);
        margin: .25rem 0 .35rem .75rem;
    }

    #navbarMainContent .dropdown-menu .dropdown-item {
        color: rgba(255, 255, 255, 0.88);
    }

    #navbarMainContent .dropdown-menu .dropdown-item i {
        color: rgba(255, 255, 255, 0.65);
    }

    #navbarMainContent .dropdown-menu .dropdown-item:hover {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }

    .navbar-toggler {
        border: 1px solid rgba(255, 255, 255, 0.35);
        padding: .4rem .65rem;
    }

    .navbar-toggler:focus {
        box-shadow: 0 0 0 .2rem rgba(255, 255, 255, 0.25);
        outline: none;
    }

    .navbar-toggler-icon {
        width: 1.4rem;
        height: 1.4rem;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    .topbar-divider {
        display: none !important;
    }

    .navbar-nav.ml-auto .dropdown-menu {
        position: absolute !important;
        right: 0;
        left: auto !important;
        transform: none !important;
        margin-top: .5rem;
    }

    .navbar-nav.ml-auto .nav-item.dropdown {
        position: relative;
    }
}

/* ---------- Títulos de página ---------- */
.titulo-pagina {
    font-weight: 800;
    color: #2e3350;
}

body.tema-dark .titulo-pagina {
    color: #e2e6ee;
}

.subtitulo-pagina {
    color: #8a90a8;
    font-size: .9rem;
}

/* ---------- Cards (polimento geral) ---------- */
.card {
    border: 0;
    border-radius: .65rem;
}

.card.shadow {
    box-shadow: 0 4px 16px rgba(30, 45, 100, 0.08) !important;
}

/* Dark "night": estilo flat — borda fina no lugar de sombra pesada (--depth: 0) */
body.tema-dark .card.shadow {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.card > .card-header:first-child {
    border-radius: .65rem .65rem 0 0;
}

/* Superfícies do tema dark: fundo < card < header/hover (hierarquia visível) */
body.tema-dark .card {
    background-color: #0f172a;
    border: 1px solid #1e2a3d;
    border-radius: .9rem;
}

body.tema-dark .card > .card-header:first-child {
    border-radius: .9rem .9rem 0 0;
}

body.tema-dark .card > .card-header {
    background-color: #16203a;
    border-bottom: 1px solid #1e2a3d;
}

body.tema-dark .card-header .text-primary {
    color: #38bdf8 !important;
}

body.tema-dark .card-header .form-control {
    background-color: #131d30;
    border-color: #1e2a3d;
    color: #c7ccd6;
}

body.tema-dark .modal-content {
    background-color: #0f172a;
    color: #c7ccd6;
}

body.tema-dark .modal-footer {
    border-top-color: #1e2a3d;
}

body.tema-dark .icone-tempo-medio {
    background: rgba(56, 189, 248, 0.14);
    color: #38bdf8;
}

body.tema-dark .barra-empresa .preenchido {
    background: #38bdf8;
}

/* ---------- Modais ---------- */
.modal-content {
    border: 0;
    border-radius: .65rem;
    overflow: hidden;
}

.modal-header-tarefas {
    background-color: #3a56c4;
    color: #fff;
    border-bottom: 0;
}

.modal-header-tarefas .close {
    color: #fff;
    opacity: .8;
    text-shadow: none;
}

body.tema-dark .modal-header-tarefas {
    background-color: #0e1626;
}

/* Seções internas dos modais */
.modal-secao-titulo {
    font-weight: 800;
    color: #4e73df;
    font-size: .95rem;
    margin-bottom: .6rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid #eef0f7;
}

body.tema-dark .modal-secao-titulo {
    color: #38bdf8;
    border-bottom-color: #1e2a3d;
}

/* Tabelas dentro de modais no tema dark */
body.tema-dark .modal-content .table {
    color: #c7ccd6;
}

body.tema-dark .modal-content .table-bordered,
body.tema-dark .modal-content .table-bordered td,
body.tema-dark .modal-content .table-bordered th {
    border-color: #1e2a3d;
}

body.tema-dark .modal-content .table-hover tbody tr:hover td {
    background-color: #1c2740;
    color: #e2e6ee;
}

body.tema-dark .modal-body .text-primary {
    color: #38bdf8 !important;
}

/* ---------- KPI cards da dashboard (clean: filete de cor + dado em texto) ---------- */
.card-kpi {
    position: relative;
    cursor: pointer;
    transition: transform .16s, box-shadow .16s;
    height: 100%;
}

.card-kpi::before {
    content: '';
    position: absolute;
    left: 0;
    top: .85rem;
    bottom: .85rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
}

.card-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(30, 45, 100, 0.13) !important;
}

body.tema-dark .card-kpi:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5) !important;
}

.card-kpi .rotulo-kpi {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #8a90a8;
}

body.tema-dark .card-kpi .rotulo-kpi {
    color: #8b93a7;
}

.card-kpi .icone-kpi {
    font-size: 1rem;
    opacity: .4;
}

.card-kpi .valor-kpi {
    font-size: 1.7rem;
    font-weight: 800;
    color: #2e3350;
    line-height: 1.2;
    margin-top: .15rem;
}

body.tema-dark .card-kpi .valor-kpi {
    color: #e2e6ee;
}

.card-kpi .percentual-kpi {
    font-size: .78rem;
    color: #9aa0b5;
    margin-top: .1rem;
}

body.tema-dark .card-kpi .percentual-kpi {
    color: #6b7280;
}

/* Variações de cor dos KPIs (filete lateral + ícone) */
.kpi-warning::before { background: #f6c23e; }
.kpi-warning .icone-kpi { color: #f6c23e; }

.kpi-success::before { background: #1cc88a; }
.kpi-success .icone-kpi { color: #1cc88a; }

.kpi-primary::before { background: #4e73df; }
.kpi-primary .icone-kpi { color: #4e73df; }

.kpi-info::before { background: #36b9cc; }
.kpi-info .icone-kpi { color: #36b9cc; }

.kpi-avaliar::before { background: #a832a6; }
.kpi-avaliar .icone-kpi { color: #a832a6; }

/* KPIs no dark "night": acentos mais vivos sobre o navy */
body.tema-dark .card-kpi .icone-kpi { opacity: .6; }

body.tema-dark .kpi-warning .icone-kpi { color: #fbbf24; }
body.tema-dark .kpi-warning::before { background: #fbbf24; }

body.tema-dark .kpi-success .icone-kpi { color: #2dd4bf; }
body.tema-dark .kpi-success::before { background: #2dd4bf; }

body.tema-dark .kpi-primary .icone-kpi { color: #38bdf8; }
body.tema-dark .kpi-primary::before { background: #38bdf8; }

body.tema-dark .kpi-info .icone-kpi { color: #22d3ee; }
body.tema-dark .kpi-info::before { background: #22d3ee; }

body.tema-dark .kpi-avaliar .icone-kpi { color: #c084fc; }
body.tema-dark .kpi-avaliar::before { background: #c084fc; }

/* ---------- Widgets da dashboard (listas, ranking, barras) ---------- */
.lista-dash .item-dash {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem .35rem;
    border-bottom: 1px solid #eef0f7;
    color: inherit;
    text-decoration: none !important;
}

.lista-dash .item-dash:last-child {
    border-bottom: 0;
}

.lista-dash a.item-dash:hover {
    background: #f6f8fd;
    border-radius: .4rem;
}

body.tema-dark .lista-dash .item-dash {
    border-bottom-color: #1e2a3d;
}

body.tema-dark .lista-dash a.item-dash:hover {
    background: #0f172a;
}

.item-dash .info {
    min-width: 0;
    padding-right: .75rem;
}

.item-dash .titulo {
    font-size: .85rem;
    font-weight: 600;
    color: #2e3350;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.tema-dark .item-dash .titulo {
    color: #e2e6ee;
}

.item-dash .sub {
    font-size: .75rem;
    color: #9aa0b5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-dash .lado {
    text-align: right;
    flex-shrink: 0;
}

.badge-status {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 10rem;
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
}

.dias-dash {
    font-weight: 800;
    color: #2e3350;
    font-size: .88rem;
}

body.tema-dark .dias-dash {
    color: #e2e6ee;
}

.medalha {
    width: 1.9rem;
    height: 1.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    margin-right: .6rem;
    flex-shrink: 0;
}

.medalha.numero {
    background: #eef0f7;
    border-radius: 50%;
    font-size: .78rem;
    font-weight: 700;
    color: #6e707e;
}

/* Cabeçalho de seção do ranking (Técnicos / Suporte) */
.secao-ranking {
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #8a90a8;
    margin: .9rem 0 .4rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid #eef0f7;
}

.secao-ranking:first-child {
    margin-top: .25rem;
}

body.tema-dark .secao-ranking {
    color: #8b93a7;
    border-bottom-color: #1e2a3d;
}

/* Etiqueta de papel no ranking (entrada do suporte) */
.badge-papel-suporte {
    display: inline-block;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .1rem .45rem;
    border-radius: 10rem;
    background: rgba(246, 194, 62, 0.18);
    color: #b58a1b;
    vertical-align: middle;
    margin-left: .3rem;
}

body.tema-dark .badge-papel-suporte {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

/* Avatar do técnico no ranking (tamanho travado independente da imagem) */
.avatar-ranking {
    width: 2rem !important;
    height: 2rem !important;
    max-width: 2rem;
    max-height: 2rem;
    object-fit: cover;
    background: #fff;
    border: 2px solid #eef0f7;
    margin-right: .6rem;
    flex-shrink: 0;
}

body.tema-dark .avatar-ranking {
    border-color: #24314a;
}

body.tema-dark .medalha.numero {
    background: #1e2a3d;
    color: #c7ccd6;
}

.barra-empresa {
    margin-bottom: .9rem;
}

.barra-empresa:last-child {
    margin-bottom: 0;
}

.barra-empresa .linha-topo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: .3rem;
}

.barra-empresa .titulo-barra {
    font-size: .82rem;
    font-weight: 600;
    color: #2e3350;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: .75rem;
}

body.tema-dark .barra-empresa .titulo-barra {
    color: #e2e6ee;
}

.barra-empresa .trilho {
    height: .5rem;
    background: #eef0f7;
    border-radius: 10rem;
    overflow: hidden;
    display: flex;
}

body.tema-dark .barra-empresa .trilho {
    background: #1e2a3d;
}

.barra-empresa .preenchido {
    height: 100%;
    background: #4e73df;
    border-radius: 10rem;
}

/* Segmentos da barra composta (abertas x concluídas) */
.barra-empresa .seg {
    height: 100%;
}

.barra-empresa .seg-abertas {
    background: #4e73df;
}

.barra-empresa .seg-concluidas {
    background: #1cc88a;
}

body.tema-dark .barra-empresa .seg-abertas {
    background: #38bdf8;
}

body.tema-dark .barra-empresa .seg-concluidas {
    background: #2dd4bf;
}

.contadores-empresa {
    display: flex;
    justify-content: space-between;
    font-size: .72rem;
    color: #9aa0b5;
    margin-top: .25rem;
}

body.tema-dark .contadores-empresa {
    color: #6b7280;
}

.legenda-empresas {
    display: flex;
    gap: 1rem;
    font-size: .74rem;
    color: #8a90a8;
    margin-bottom: .85rem;
}

.legenda-empresas .ponto {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    margin-right: .3rem;
    vertical-align: middle;
}

.legenda-empresas .ponto-abertas {
    background: #4e73df;
}

.legenda-empresas .ponto-concluidas {
    background: #1cc88a;
}

body.tema-dark .legenda-empresas {
    color: #8b93a7;
}

body.tema-dark .legenda-empresas .ponto-abertas {
    background: #38bdf8;
}

body.tema-dark .legenda-empresas .ponto-concluidas {
    background: #2dd4bf;
}

.icone-tempo-medio {
    width: 3rem;
    height: 3rem;
    border-radius: .65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(78, 115, 223, 0.12);
    color: #4e73df;
    font-size: 1.15rem;
    flex-shrink: 0;
}

/* Itens de widget clicáveis (abrem o modal de tarefas) */
.item-clicavel {
    cursor: pointer;
    transition: background .15s;
    border-radius: .4rem;
}

.item-clicavel:hover {
    background: #f6f8fd;
}

body.tema-dark .item-clicavel:hover {
    background: #131d30;
}

.barra-empresa.item-clicavel {
    padding: .35rem .45rem;
    margin-left: -.45rem;
    margin-right: -.45rem;
}

.vazio-widget {
    color: #9aa0b5;
}

body.tema-dark .vazio-widget {
    color: #6b7280;
}

/* ---------- Listagem (DataTables) ---------- */
/* Tabela colada nas bordas do card (ganha largura); controles mantêm respiro */
.card-body-tabela {
    padding: .5rem .35rem;
}

.card-body-tabela .dataTables_wrapper .dt-buttons,
.card-body-tabela .dataTables_wrapper .dataTables_length,
.card-body-tabela .dataTables_wrapper .dataTables_info,
.card-body-tabela .dataTables_wrapper .dataTables_paginate {
    padding-left: .65rem;
    padding-right: .65rem;
}

.tabela-listagem {
    font-size: 13px;
}

/* Cabeçalho: linha de rótulos + linha de filtros por coluna */
.tabela-listagem table thead th {
    vertical-align: middle;
    background-color: #f8f9fc;
    border-bottom: 2px solid #e3e6f0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #6e707e;
    white-space: nowrap;
}

/* Inputs/selects de filtro por coluna (injetados via JS) */
.tabela-listagem table thead input,
.tabela-listagem table thead select {
    width: 100%;
    height: 28px !important;
    font-size: 12px;
    padding: 2px 6px;
    border: 1px solid #d1d3e2;
    border-radius: .3rem;
    font-weight: 400;
    text-transform: none;
    background-color: #fff;
    color: #3a3b45;
}

.tabela-listagem table thead input:focus,
.tabela-listagem table thead select:focus {
    border-color: #4e73df;
    outline: none;
    box-shadow: 0 0 0 .15rem rgba(78, 115, 223, 0.15);
}

.tabela-listagem table tbody td {
    vertical-align: middle;
}

/* Linhas com leve zebra e hover */
.tabela-listagem table tbody tr:hover td {
    background-color: #f6f8fd;
}

/* Controles do DataTables (topo: PDF/length; base: info/paginação) */
.dataTables_wrapper .dt-buttons .btn {
    margin-right: .35rem;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    font-size: .82rem;
    padding-top: .5rem;
}

.dataTables_wrapper .dataTables_length select {
    height: 28px;
    padding: 2px 6px;
    border-radius: .3rem;
    border: 1px solid #d1d3e2;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #4e73df !important;
    border-color: #4e73df !important;
    color: #fff !important;
    border-radius: .3rem;
}

/* --- Tema dark da listagem --- */
body.tema-dark .tabela-listagem table {
    color: #c7ccd6;
}

body.tema-dark .tabela-listagem table thead th {
    background-color: #16203a;
    border-bottom-color: #1e2a3d;
    color: #8b93a7;
}

body.tema-dark .tabela-listagem table.table-bordered,
body.tema-dark .tabela-listagem table.table-bordered td,
body.tema-dark .tabela-listagem table.table-bordered th {
    border-color: #1e2a3d;
}

body.tema-dark .tabela-listagem table tbody td {
    background-color: #0f172a;
}

body.tema-dark .tabela-listagem table tbody tr:hover td {
    background-color: #131d30;
}

body.tema-dark .tabela-listagem table thead input,
body.tema-dark .tabela-listagem table thead select,
body.tema-dark .dataTables_wrapper .dataTables_length select {
    background-color: #131d30;
    border-color: #24314a;
    color: #c7ccd6;
}

body.tema-dark .dataTables_wrapper,
body.tema-dark .dataTables_wrapper .dataTables_info,
body.tema-dark .dataTables_wrapper .dataTables_length,
body.tema-dark .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #8b93a7 !important;
}

/* Checkbox de seleção (native e DataTables select-checkbox) visível no dark */
body.tema-dark .tabela-listagem input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid #3a4a63;
    border-radius: .25rem;
    background-color: #131d30;
    vertical-align: middle;
    cursor: pointer;
    position: relative;
}

body.tema-dark .tabela-listagem input[type="checkbox"]:checked {
    background-color: #38bdf8;
    border-color: #38bdf8;
}

body.tema-dark .tabela-listagem input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #04283a;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Célula .select-checkbox do DataTables Select (usa ::before como marca) */
body.tema-dark .tabela-listagem td.select-checkbox::before {
    border-color: #8b93a7;
}

body.tema-dark .tabela-listagem tr.selected td.select-checkbox::after {
    color: #38bdf8;
    text-shadow: none;
}

/* ---------- Acentos globais do tema dark "night" (sky) ---------- */
/* Só links de conteúdo recebem o azul — botões e paginação mantêm sua própria cor */
body.tema-dark a:not(.btn):not(.paginate_button):not(.page-link):not(.nav-link):not(.dropdown-item) {
    color: #38bdf8;
}

body.tema-dark .text-primary {
    color: #38bdf8 !important;
}

body.tema-dark .btn-primary {
    background-color: #38bdf8;
    border-color: #38bdf8;
    color: #04283a;
    font-weight: 600;
}

body.tema-dark .btn-primary:hover,
body.tema-dark .btn-primary:focus {
    background-color: #22a8e0;
    border-color: #22a8e0;
    color: #04283a;
}

body.tema-dark .btn-outline-primary {
    color: #38bdf8;
    border-color: #2b4a63;
}

body.tema-dark .btn-outline-primary:hover {
    background-color: #38bdf8;
    border-color: #38bdf8;
    color: #04283a;
}

body.tema-dark .btn-secondary {
    background-color: #1d283f;
    border-color: #24314a;
    color: #c7ccd6;
}

body.tema-dark .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #c7ccd6 !important;
}

body.tema-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.tema-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #38bdf8 !important;
    border-color: #38bdf8 !important;
    color: #04283a !important;
}

body.tema-dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #1d283f !important;
    border-color: #24314a !important;
    color: #fff !important;
}

body.tema-dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: #4a556e !important;
}

body.tema-dark .modal-header-tarefas {
    background: linear-gradient(90deg, #0e1626 0%, #12263f 100%);
    border-bottom: 1px solid #1e2a3d;
}

/* Radius "night" (--radius-field / --radius-box) nos campos e badges */
body.tema-dark .form-control,
body.tema-dark .btn {
    border-radius: .5rem;
}

body.tema-dark .badge {
    border-radius: .5rem;
}

/* ---------- Cadastro de chamado: comentários ---------- */
.tabela-comentarios td {
    border-top: 0;
    border-bottom: 1px solid #eef0f7;
    padding: 1rem 1.25rem;
}

body.tema-dark .tabela-comentarios td {
    border-bottom-color: #1e2a3d;
}

.tabela-comentarios tr:last-child td {
    border-bottom: 0;
}

.comentario-tarefa .comentario-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
    flex-wrap: wrap;
}

.comentario-tarefa .usuario {
    font-size: .92rem;
}

.comentario-tarefa .data-status {
    font-size: .8rem;
    opacity: .85;
    white-space: nowrap;
}

.comentario-tarefa .mensagem {
    display: block;
    margin-top: .25rem;
    line-height: 1.5;
}

body.tema-dark .comentario-tarefa .mensagem {
    color: #c7ccd6;
}

/* ---------- CKEditor: chrome escuro no tema dark ---------- */
body.tema-dark .cke_chrome {
    border-color: #1e2a3d;
    box-shadow: none;
}

body.tema-dark .cke_top,
body.tema-dark .cke_bottom {
    background: #16203a;
    border-color: #1e2a3d;
    box-shadow: none;
}

body.tema-dark .cke_toolgroup,
body.tema-dark .cke_combo_button {
    background: #1c2740 !important;
    border-color: #24314a !important;
}

/* Ícones (sprite monocromático do moono-lisa): clareia para o dark */
body.tema-dark .cke_button_icon,
body.tema-dark .cke_button_arrow,
body.tema-dark .cke_combo_arrow {
    filter: invert(0.85) brightness(1.2) !important;
}

body.tema-dark .cke_button:hover,
body.tema-dark .cke_button_on,
body.tema-dark a.cke_button_on {
    background: #24314a !important;
    border-color: #2b3a5c !important;
}

body.tema-dark .cke_combo_text,
body.tema-dark .cke_path_item,
body.tema-dark .cke_toolbar_break {
    color: #c7ccd6 !important;
}

body.tema-dark .cke_reset_all,
body.tema-dark .cke_panel {
    background: #16203a !important;
    border-color: #1e2a3d !important;
    color: #c7ccd6 !important;
}

body.tema-dark .cke_panel_listItem a {
    color: #c7ccd6 !important;
}

body.tema-dark .cke_panel_listItem a:hover,
body.tema-dark .cke_panel_listItem a:focus {
    background: #24314a !important;
    border-color: #24314a !important;
}

/* ---------- Loading (skeleton + overlay dos gráficos) ---------- */
.skeleton {
    position: relative;
    overflow: hidden;
    background: #e9ecf3;
    border-radius: .4rem;
}

.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    animation: skeleton-shimmer 1.3s infinite;
}

.skeleton-line {
    height: .9rem;
    margin: .3rem 0;
}

@keyframes skeleton-shimmer {
    100% {
        transform: translateX(100%);
    }
}

body.tema-dark .skeleton {
    background: #1c2740;
}

body.tema-dark .skeleton::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
}

.dash-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b7b9cc;
    pointer-events: none;
}

body.tema-dark .dash-loading-overlay {
    color: #38bdf8;
}


.select2-results__options {
    max-height: 420px !important;
}

/* ---------- Rodapé ---------- */
.rodape-sistema {
    background: transparent;
    text-align: center;
    padding: 1.1rem 0 1.3rem;
    font-size: .8rem;
    color: #9aa0b5;
}

body.tema-dark .rodape-sistema {
    color: #6b7280;
}

.rodape-sistema .coracao {
    color: #ff6b81;
}

/* ---------- Botão scroll-to-top ---------- */
.scroll-to-top {
    border-radius: .5rem !important;
    background: rgba(78, 115, 223, 0.6) !important;
}

.scroll-to-top:hover {
    background: #4e73df !important;
}