/* =======================================================
   VISY — DARK THEME
   Sobreposição de cores sobre style.css e Bootstrap.
   Carregado por último para garantir precedência.
   ======================================================= */

/* ── Paleta de cores escuras ── */
:root {
    --dk-bg-0:      #0d1117;                   /* fundo da página */
    --dk-bg-1:      #161b22;                   /* cards / painéis */
    --dk-bg-2:      #1c2128;                   /* sub-painéis / hover */
    --dk-bg-3:      #21262d;                   /* inputs / dropdowns */
    --dk-border:    rgba(255, 255, 255, 0.08); /* bordas */
    --dk-text-1:    #e6edf3;                   /* texto principal */
    --dk-text-2:    #8b949e;                   /* texto secundário */
    --dk-text-3:    #525a64;                   /* placeholder / desabilitado */
    --dk-accent:    #58a6ff;                   /* azul de destaque */
    --dk-shadow:    rgba(0, 0, 0, 0.45);       /* sombras */

    /* Override das variáveis originais do style.css */
    --first-color:       #161b22;  /* bg sidebar */
    --first-color-light: #8b949e;  /* ícones / links inativos */
    --black-color:       #e6edf3;  /* links ativos / texto forte */
    --white-color:       #161b22;  /* reaproveitado como bg escuro */
}

/* ============================================================
   GERAL
   ============================================================ */
body {
    background: var(--dk-bg-0) !important;
    color: var(--dk-text-1) !important;
}

/* Scrollbar customizada */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: var(--dk-bg-0); }
::-webkit-scrollbar-thumb        { background: rgba(255,255,255,0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(255,255,255,0.22); }

/* Texto */
h1, h2, h3, h4, h5, h6 { color: var(--dk-text-1) !important; }
.text-dark                { color: var(--dk-text-1) !important; }
.text-muted               { color: var(--dk-text-2) !important; }
.form-label               { color: var(--dk-text-2) !important; }
p, li                     { color: inherit; }

/* Links */
a:not(.btn):not(.nav_link):not(.nav_logout):not(.dropdown-item) {
    color: var(--dk-text-2) !important;
}
a:not(.btn):not(.nav_link):not(.nav_logout):not(.dropdown-item):hover {
    color: var(--dk-text-1) !important;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.l-navbar {
    background-color: var(--dk-bg-1) !important;
    border-right: 1px solid var(--dk-border);
}

.l-navbar .nav_link {
    color: var(--dk-text-2) !important;
}
.l-navbar .nav_link:hover {
    color: var(--dk-text-1) !important;
}
.l-navbar .active {
    color: var(--dk-text-1) !important;
}
.l-navbar .active::before {
    background-color: var(--dk-accent) !important;
}

/* Logo da sidebar: inverte para ficar branca em fundo escuro */
.l-navbar .img-logoo {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

/* Botão Sair */
.nav_logout {
    color: var(--dk-text-2) !important;
    cursor: pointer;
    transition: color .2s;
}
.nav_logout:hover {
    color: #ff6b6b !important;
}

/* ============================================================
   HAMBURGER FLUTUANTE
   ============================================================ */
.sv-hamburger {
    background: var(--dk-bg-1) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: var(--dk-text-1) !important;
    box-shadow: 0 4px 14px var(--dk-shadow) !important;
}
.sv-hamburger:hover {
    background: var(--dk-bg-2) !important;
    border-color: rgba(255,255,255,0.25) !important;
}
/* Garante que o ícone dentro do hamburger fique visível sobre fundo escuro */
.sv-hamburger i {
    color: var(--dk-text-1) !important;
}

/* ============================================================
   BACKDROP DA SIDEBAR
   ============================================================ */
#sv-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 99;   /* abaixo da sidebar (100) e do hamburger (200) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}
#sv-nav-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ============================================================
   CARDS / MINI-STAT
   ============================================================ */
.mini-stat {
    background-color: var(--dk-bg-1) !important;
}

.card {
    background-color: var(--dk-bg-1) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text-1) !important;
}
.card-body {
    background-color: var(--dk-bg-1) !important;
    color: var(--dk-text-1) !important;
}
.card-header {
    background-color: var(--dk-bg-2) !important;
    border-bottom-color: var(--dk-border) !important;
    color: var(--dk-text-1) !important;
}
.card-footer {
    background-color: var(--dk-bg-2) !important;
    border-top-color: var(--dk-border) !important;
    color: var(--dk-text-1) !important;
}
.card-title { color: var(--dk-text-2) !important; }

.bx-shadow {
    box-shadow: 0 2px 12px rgba(0,0,0,0.35) !important;
}
.cai {
    box-shadow: 0 2px 12px rgba(0,0,0,0.35) !important;
}

/* ============================================================
   FORMULÁRIOS
   ============================================================ */
.form-control {
    background-color: var(--dk-bg-3) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text-1) !important;
}
.form-control::placeholder         { color: var(--dk-text-3) !important; }
.form-control:focus {
    background-color: var(--dk-bg-3) !important;
    border-color: rgba(88, 166, 255, 0.45) !important;
    color: var(--dk-text-1) !important;
    box-shadow: 0 0 0 0.2rem rgba(88, 166, 255, 0.12) !important;
}
.form-control:disabled,
.form-control[readonly] {
    background-color: var(--dk-bg-2) !important;
    color: var(--dk-text-3) !important;
}

.form-select {
    background-color: var(--dk-bg-3) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text-1) !important;
    /* Seta branca */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238b949e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}
.form-select:focus {
    background-color: var(--dk-bg-3) !important;
    border-color: rgba(88, 166, 255, 0.45) !important;
    color: var(--dk-text-1) !important;
    box-shadow: 0 0 0 0.2rem rgba(88, 166, 255, 0.12) !important;
}

.input-group-text {
    background-color: var(--dk-bg-2) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text-2) !important;
}

/* Checkbox */
.checkbox label::before {
    background-color: var(--dk-bg-3) !important;
    border-color: rgba(255,255,255,0.2) !important;
}
.checkbox label::after { color: var(--dk-text-1) !important; }

/* ============================================================
   ABAS (Bootstrap nav-tabs)
   ============================================================ */
.nav-tabs {
    border-bottom-color: var(--dk-border) !important;
}
.nav-tabs .nav-link {
    color: var(--dk-text-2) !important;
}
.nav-tabs .nav-link:hover {
    color: var(--dk-text-1) !important;
    border-color: transparent !important;
}
.nav-tabs .nav-link.active {
    color: var(--dk-accent) !important;
    background: transparent !important;
    border-bottom-color: var(--dk-accent) !important;
}
.nav-tabs .nav-link.disabled {
    color: var(--dk-text-3) !important;
}

/* Style.css nav-tabs override */
.nav.nav-tabs > li > a,
.nav.tabs-vertical > li > a {
    color: var(--dk-text-2) !important;
}
.nav.nav-tabs > li > a.active,
.nav.nav-tabs > li > a:hover,
.nav.tabs-vertical > li > a:hover {
    color: var(--dk-text-1) !important;
}
.nav.nav-tabs > li > a.active {
    background-color: transparent !important;
}
.tab-content {
    background: var(--dk-bg-1) !important;
    color: var(--dk-text-1) !important;
}

/* ============================================================
   DATEPICKER
   ============================================================ */
.datepicker {
    background-color: var(--dk-bg-2) !important;
    border-color: var(--dk-border) !important;
}
.datepicker th,
.datepicker td {
    color: var(--dk-text-1) !important;
}
.datepicker table tr td:hover,
.datepicker table tr th:hover {
    background: var(--dk-bg-3) !important;
}
.datepicker table tr td.old,
.datepicker table tr td.new {
    color: var(--dk-text-3) !important;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover {
    background-color: rgba(88,166,255,0.18) !important;
    color: var(--dk-accent) !important;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover {
    background-color: var(--dk-accent) !important;
    color: #fff !important;
}
.datepicker-dropdown:after  { border-bottom-color: var(--dk-bg-2) !important; }
.datepicker-dropdown:before { border-bottom-color: var(--dk-border) !important; }
.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next {
    color: var(--dk-text-1) !important;
}
.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover {
    background: var(--dk-bg-3) !important;
}

/* ============================================================
   TABELAS / DATATABLES
   ============================================================ */

/* Bootstrap 5 — sobrescreve as variáveis CSS antes de qualquer regra */
.table {
    --bs-table-bg:            transparent;
    --bs-table-border-color:  var(--dk-border);
    --bs-table-color:         var(--dk-text-1);
    --bs-table-striped-bg:    rgba(255,255,255,0.03);
    --bs-table-striped-color: var(--dk-text-1);
    --bs-table-active-bg:     var(--dk-bg-2);
    --bs-table-active-color:  var(--dk-text-1);
    --bs-table-hover-bg:      var(--dk-bg-2);
    --bs-table-hover-color:   var(--dk-text-1);
    color: var(--dk-text-1) !important;
    border-color: var(--dk-border) !important;
}
.table > :not(caption) > * > * {
    background-color: var(--bs-table-bg, transparent) !important;
    border-bottom-color: var(--dk-border) !important;
    color: var(--dk-text-1) !important;
}
.table thead th,
.table thead td {
    background-color: var(--dk-bg-2) !important;
    color: var(--dk-text-2) !important;
    border-bottom-color: var(--dk-border) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(255,255,255,0.03);
    background-color: rgba(255,255,255,0.03) !important;
    color: var(--dk-text-1) !important;
}
.table tbody tr:hover > td,
.table tbody tr:hover > th { background-color: var(--dk-bg-2) !important; }

/* DataTables — linhas odd/even geradas pelo plugin */
table.dataTable tbody tr {
    background-color: transparent !important;
    color: var(--dk-text-1) !important;
}
table.dataTable tbody tr.odd  { background-color: rgba(255,255,255,0.03) !important; }
table.dataTable tbody tr.even { background-color: transparent !important; }
table.dataTable tbody tr:hover { background-color: var(--dk-bg-2) !important; }
table.dataTable thead th,
table.dataTable thead td {
    background-color: var(--dk-bg-2) !important;
    color: var(--dk-text-2) !important;
    border-bottom: 1px solid var(--dk-border) !important;
}
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd { background-color: rgba(255,255,255,0.03) !important; }
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover { background-color: var(--dk-bg-2) !important; }

/* DataTables controles */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: var(--dk-text-2) !important;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background-color: var(--dk-bg-3) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text-1) !important;
    border-radius: 5px;
    padding: 2px 6px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--dk-text-2) !important;
    background: transparent !important;
    border-color: transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--dk-bg-2) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text-1) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: rgba(88,166,255,0.18) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-accent) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--dk-text-3) !important;
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-content {
    background-color: var(--dk-bg-1) !important;
    border-color: var(--dk-border) !important;
}
.modal-header {
    background-color: var(--dk-bg-2) !important;
    border-bottom-color: var(--dk-border) !important;
}
.modal-footer {
    background-color: var(--dk-bg-2) !important;
    border-top-color: var(--dk-border) !important;
}
.modal-title { color: var(--dk-text-1) !important; }
.modal-body  { color: var(--dk-text-1) !important; }
/* Botão "X" de fechar visível em fundo escuro */
.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
    opacity: 0.6 !important;
}
.btn-close:hover { opacity: 1 !important; }

/* ============================================================
   DROPDOWN
   ============================================================ */
.dropdown-menu {
    background-color: var(--dk-bg-2) !important;
    border-color: var(--dk-border) !important;
    box-shadow: 0 8px 24px var(--dk-shadow) !important;
}
.dropdown-item {
    color: var(--dk-text-1) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--dk-bg-3) !important;
    color: var(--dk-text-1) !important;
}
.dropdown-divider { border-color: var(--dk-border) !important; }
.dropdown-header  { color: var(--dk-text-3) !important; }

/* ============================================================
   PAGINATION (Bootstrap)
   ============================================================ */
.page-item .page-link {
    background-color: var(--dk-bg-1) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text-2) !important;
}
.page-item .page-link:hover {
    background-color: var(--dk-bg-2) !important;
    color: var(--dk-text-1) !important;
}
.page-item.active .page-link {
    background-color: #1f6feb !important;
    border-color: #1f6feb !important;
    color: #fff !important;
}
.page-item.disabled .page-link {
    background-color: var(--dk-bg-1) !important;
    color: var(--dk-text-3) !important;
}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn-outline-primary {
    color: var(--dk-accent) !important;
    border-color: var(--dk-accent) !important;
}
.btn-outline-primary:hover {
    background-color: rgba(88,166,255,0.15) !important;
    color: var(--dk-accent) !important;
}
.btn-outline-secondary {
    color: var(--dk-text-2) !important;
    border-color: var(--dk-border) !important;
}
.btn-outline-secondary:hover {
    background-color: var(--dk-bg-2) !important;
    color: var(--dk-text-1) !important;
}
.btn-outline-danger {
    color: #ff6b6b !important;
    border-color: rgba(255,107,107,0.5) !important;
}
.btn-outline-danger:hover {
    background-color: rgba(255,107,107,0.15) !important;
}

/* ============================================================
   ALERTAS
   ============================================================ */
.alert-danger {
    background-color: rgba(239,83,80,0.14) !important;
    border-color: rgba(239,83,80,0.28) !important;
    color: #ff8a80 !important;
}
.alert-warning {
    background-color: rgba(255,193,7,0.12) !important;
    border-color: rgba(255,193,7,0.25) !important;
    color: #ffd54f !important;
}
.alert-success {
    background-color: rgba(76,175,80,0.14) !important;
    border-color: rgba(76,175,80,0.28) !important;
    color: #a5d6a7 !important;
}
.alert-info {
    background-color: rgba(33,150,243,0.12) !important;
    border-color: rgba(33,150,243,0.25) !important;
    color: #90caf9 !important;
}

/* ============================================================
   CARDS DE EVENTOS (facial, veículos, anti-intruso)
   ============================================================ */
.evento-unified-card,
.veiculo-card,
.deteccao-card,
.intruder-card {
    background: var(--dk-bg-2) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
.evento-unified-card:hover,
.veiculo-card:hover,
.deteccao-card:hover,
.intruder-card:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.5) !important;
}
.evento-unified-info {
    background: linear-gradient(to bottom, var(--dk-bg-2), var(--dk-bg-1)) !important;
}
.veiculo-info,
.deteccao-info,
.intruder-card .card-body {
    background: var(--dk-bg-2) !important;
    color: var(--dk-text-1) !important;
}
.intruder-card .card-footer {
    background-color: var(--dk-bg-1) !important;
    border-top-color: var(--dk-border) !important;
}
.intruder-card .card-footer .btn-primary {
    background-color: #1f6feb !important;
    border: none !important;
}

.ev-nome, .placa, .nome {
    color: var(--dk-text-1) !important;
}
.ev-placa    { color: var(--dk-text-1) !important; }
.ev-motivo   { color: var(--dk-text-2) !important; }
.camera-info { color: var(--dk-text-2) !important; }
.timestamp   { color: var(--dk-text-3) !important; }

/* Paginação customizada dos eventos */
.pagina-info { color: var(--dk-text-2) !important; }

/* ============================================================
   MODAL DE ALERTA FACIAL (Maps + Vídeo)
   ============================================================ */
.info-text {
    background-color: var(--dk-bg-2) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
.info-text p { color: var(--dk-text-1) !important; }

/* ============================================================
   SWEETALERT2
   ============================================================ */
.swal2-popup {
    background: var(--dk-bg-2) !important;
    color: var(--dk-text-1) !important;
    border: 1px solid var(--dk-border) !important;
}
.swal2-title        { color: var(--dk-text-1) !important; }
.swal2-html-container { color: var(--dk-text-2) !important; }
.swal2-icon.swal2-warning { border-color: #ffd54f !important; color: #ffd54f !important; }
.swal2-icon.swal2-error   { border-color: #ff8a80 !important; color: #ff8a80 !important; }

/* ============================================================
   OVERRIDES — estilos inline hardcoded nos JSPs de dashboard
   (tabelas customizadas, cards, abas e componentes de página)
   ============================================================ */

/* Card container padrão dos dashboards */
.mini-stat.bx-shadow {
    background: var(--dk-bg-1) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
}
.mini-stat h4 { color: var(--dk-text-1) !important; }

/* Cabeçalho de tabelas customizadas (.table-tittle) */
.table-tittle {
    background-color: var(--dk-bg-2) !important;
}
.table-tittle td,
.table-tittle th {
    color: var(--dk-text-2) !important;
    border-bottom: 2px solid var(--dk-border) !important;
}

/* Células e hover das tabelas customizadas */
.table-show-users td,
.table-show-users th {
    color: var(--dk-text-1) !important;
    border-bottom: 1px solid var(--dk-border) !important;
}
.table-show-users tbody tr:hover,
.table-show-users tr:not(.table-tittle):hover {
    background-color: var(--dk-bg-2) !important;
}

/* Texto de paginação */
.pagina-info { color: var(--dk-text-2) !important; }

/* Abas (nav-tabs) com borda hardcoded */
.nav-tabs {
    border-bottom-color: var(--dk-border) !important;
}

/* Info de evento / card info com gradiente claro */
.evento-unified-info {
    background: linear-gradient(to bottom, var(--dk-bg-2), var(--dk-bg-1)) !important;
}

/* Card-body com gradiente claro (anti_intruso.jsp, etc.) */
.card-body {
    background: var(--dk-bg-1) !important;
}

/* Config cards em cadastro */
.config-card {
    background-color: var(--dk-bg-1) !important;
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text-1) !important;
}

/* Coordinates info / info-box com fundo claro */
.coordinates-info,
.info-box {
    background-color: var(--dk-bg-2) !important;
    color: var(--dk-text-1) !important;
}

/* Btn-group hover em metricas */
.btn-group .btn:hover:not(.active),
.btn-group .btn-outline-primary:hover {
    background-color: var(--dk-bg-2) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text-1) !important;
}

/* ============================================================
   BADGES
   ============================================================ */
.badge-facial  { background: rgba(29,78,216,0.25) !important; color: #93c5fd !important; }
.badge-veiculo { background: rgba(21,128,61,0.25) !important; color: #86efac !important; }
.badge-intruso { background: rgba(185,28,28,0.25) !important; color: #fca5a5 !important; }