/* ==========================================================
   /assets/css/theme-toggle.css
   APENAS regras DARK. Nada do modo claro foi tocado.
   Mapeado pelas classes reais do main.css do projeto:
   .block, .small-block, .table-block, .stat-card, .bg-pastel-*,
   .bg-white, .header.fixed-header, .navigation-sidebar, etc.
   ========================================================== */

/*html[data-theme="dark"] .sua-classe {*/
    /*sua-propriedade: valor;*/
/*}*/

/* Botão toggle (visível em ambos os temas) */
.theme-toggle-btn {
    background: #fff;
    color: #333;
    border: 1px solid #e3e8ef;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
    line-height: 1;
}
.theme-toggle-btn:hover {
    border-color: #FF822D;
    color: #FF822D;
}

/* Logo dual */
html[data-theme="light"] [data-logo-dark]  { display: none !important; }
html[data-theme="dark"]  [data-logo-light] { display: none !important; }

/* ==========================================================
   ===========  TUDO ABAIXO É APENAS [data-theme="dark"]  ===========
   ========================================================== */

/* ----- Variáveis de cor (mesmas da Central) ----- */
html[data-theme="dark"] body {
    --dk-bg:        #000000;
    --dk-bg-soft:   #0d0d0d;
    --dk-surface:   #1a1a1a;
    --dk-surface-2: #242424;
    --dk-border:    #2a2a2a;
    --dk-border-2:  #333333;
    --dk-txt:       #ffffff;
    --dk-txt-soft:  #cfcfcf;
    --dk-txt-muted: #888888;
}

/* ----- Body / containers ----- */
html[data-theme="dark"] body {
    background: var(--dk-bg) !important;
    color: var(--dk-txt);
}
html[data-theme="dark"] .page-container,
html[data-theme="dark"] .page-content-wrapper,
html[data-theme="dark"] .content,
html[data-theme="dark"] .container-fluid {
    background: var(--dk-bg);
    color: var(--dk-txt);
}

/* ----- Headings, parágrafos, labels, smalls ----- */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
    color: var(--dk-txt);
}
html[data-theme="dark"] p,
html[data-theme="dark"] ul li,
html[data-theme="dark"] label,
html[data-theme="dark"] span,
html[data-theme="dark"] small,
html[data-theme="dark"] legend {
    color: var(--dk-txt-soft);
}
html[data-theme="dark"] .logo {
    color: var(--dk-txt);
}

/* ==========================================================
   HEADER FIXO (top bar)
   No main.css linha 1521 tem .header background white
   ========================================================== */
html[data-theme="dark"] .header,
html[data-theme="dark"] .header.fixed-header {
    background: var(--dk-surface) !important;
    border-bottom: 1px solid var(--dk-border) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
html[data-theme="dark"] .breadcrumb {
    background: transparent !important;
}
html[data-theme="dark"] .breadcrumb-item,
html[data-theme="dark"] .breadcrumb-item a {
    color: var(--dk-txt-soft) !important;
}
html[data-theme="dark"] .breadcrumb-item.active {
    color: var(--dk-txt) !important;
}
html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--dk-txt-muted);
}
html[data-theme="dark"] .header .text-muted {
    color: var(--dk-txt-soft) !important;
}
html[data-theme="dark"] .header a.text-muted:hover {
    color: #FF822D !important;
}
html[data-theme="dark"] .header .icon-btn {
    color: var(--dk-txt);
}
/* Botão toggle no dark */
html[data-theme="dark"] .theme-toggle-btn {
    background: var(--dk-surface-2);
    color: var(--dk-txt);
    border-color: var(--dk-border-2);
}

/* ==========================================================
   SIDEBAR (vence o bg-primary do Bootstrap)
   ========================================================== */
html[data-theme="dark"] nav.navigation-sidebar,
html[data-theme="dark"] nav.navigation-sidebar.bg-primary,
html[data-theme="dark"] #navigation,
html[data-theme="dark"] #navigation.bg-primary,
html[data-theme="dark"] .navigation-sidebar.bg-primary {
    background: var(--dk-bg-soft) !important;
    background-color: var(--dk-bg-soft) !important;
    box-shadow: 5px 0 20px rgba(0,0,0,0.4);
}

html[data-theme="dark"] .navigation-sidebar .navigation-header {
    background: transparent !important;
}

html[data-theme="dark"] .navigation-sidebar hr,
html[data-theme="dark"] .navigation-menu hr {
    border-color: rgba(255,255,255,0.06) !important;
    opacity: 1;
}

/* Itens do menu */
html[data-theme="dark"] .menu-items li a,
html[data-theme="dark"] .menu-items li a .title {
    color: var(--dk-txt-soft) !important;
}
html[data-theme="dark"] .menu-items li a .icon-thumbnail i,
html[data-theme="dark"] .menu-items li a i[class*="dripicons-"],
html[data-theme="dark"] .menu-items li a i[class*="fa-"],
html[data-theme="dark"] .menu-items li a i[class*="icon-"] {
    color: var(--dk-txt-soft) !important;
}
html[data-theme="dark"] .menu-items li a:hover {
    background: rgba(255,130,45,0.12) !important;
}
html[data-theme="dark"] .menu-items li a:hover .title,
html[data-theme="dark"] .menu-items li a:hover i {
    color: var(--dk-txt) !important;
}

/* Item ativo */
html[data-theme="dark"] .menu-items li.active > a,
html[data-theme="dark"] .menu-items li > a.active {
    background: rgba(255,130,45,0.15) !important;
    border-left: 3px solid #FF822D;
}

/* Submenu */
html[data-theme="dark"] .menu-items .sub-menu {
    background: rgba(255,255,255,0.03);
}
html[data-theme="dark"] .menu-items .sub-menu li a {
    color: var(--dk-txt-soft);
}
html[data-theme="dark"] .menu-items .sub-menu li a:hover {
    color: var(--dk-txt);
}

/* Footer da sidebar (HOSTCEL info) */
html[data-theme="dark"] .navigation-sidebar h1,
html[data-theme="dark"] .navigation-sidebar h2,
html[data-theme="dark"] .navigation-sidebar h3,
html[data-theme="dark"] .navigation-sidebar h4,
html[data-theme="dark"] .navigation-sidebar h5,
html[data-theme="dark"] .navigation-sidebar h6,
html[data-theme="dark"] .navigation-sidebar strong,
html[data-theme="dark"] .navigation-sidebar b {
    color: var(--dk-txt) !important;
}
html[data-theme="dark"] .navigation-sidebar p,
html[data-theme="dark"] .navigation-sidebar span,
html[data-theme="dark"] .navigation-sidebar small,
html[data-theme="dark"] .navigation-sidebar td {
    color: var(--dk-txt-soft);
}
/* div com style inline rgba(0,0,0,0.2) no rodapé */
html[data-theme="dark"] .navigation-sidebar [style*="rgba(0,0,0,0.2)"] {
    background: rgba(255,255,255,0.04) !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
}

/* ==========================================================
   .block / .small-block / .table-block
   (linha 1609 / 1628 / 2326 do main.css - background white)
   ========================================================== */
html[data-theme="dark"] .block,
html[data-theme="dark"] .small-block,
html[data-theme="dark"] .table-block {
    background: var(--dk-surface) !important;
    color: var(--dk-txt);
    border-color: var(--dk-border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
html[data-theme="dark"] .block.bordered,
html[data-theme="dark"] .block-bw-heading {
    border-color: var(--dk-border) !important;
}
html[data-theme="dark"] .block hr {
    border-color: var(--dk-border) !important;
}

/* ==========================================================
   .bg-white (linha 330 do main.css com !important)
   .bg-pastel-1..4 (na home com background:#FFFFFF)
   ========================================================== */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-pastel-1,
html[data-theme="dark"] .bg-pastel-2,
html[data-theme="dark"] .bg-pastel-3,
html[data-theme="dark"] .bg-pastel-4 {
    background: var(--dk-surface) !important;
    color: var(--dk-txt);
}

/* ==========================================================
   .stat-card (home com background #FFE5D1, hover, etc)
   ========================================================== */
html[data-theme="dark"] .stat-card {
    background: var(--dk-surface) !important;
    border: 1px solid var(--dk-border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
html[data-theme="dark"] .stat-card:hover {
    box-shadow: 0 8px 22px rgba(0,0,0,0.5);
}
html[data-theme="dark"] .stat-card .stat-value {
    color: var(--dk-txt) !important;
}
html[data-theme="dark"] .stat-card .stat-label {
    color: var(--dk-txt-soft) !important;
}
/* ícone laranja com fundo translúcido fica bem em ambos */
html[data-theme="dark"] .stat-card .stat-icon {
    background: rgba(255,130,45,0.15) !important;
}

/* ==========================================================
   TABELAS (linhas 3238/2327: background #fff !important)
   ========================================================== */
html[data-theme="dark"] .table {
    background: var(--dk-surface) !important;
    color: var(--dk-txt);
}
html[data-theme="dark"] .table thead th {
    background: var(--dk-surface-2);
    color: var(--dk-txt-soft);
    border-color: var(--dk-border) !important;
}
html[data-theme="dark"] .table tbody td,
html[data-theme="dark"] .table tbody th {
    color: var(--dk-txt);
    border-color: var(--dk-border) !important;
}
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(2n+1) {
    background: var(--dk-surface-2);
}
html[data-theme="dark"] .table-hover tbody tr:hover {
    background: var(--dk-surface-2);
}
/* td.date, td.price já têm cor própria, deixa */

/* DataTables */
html[data-theme="dark"] .dataTables_wrapper,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
    color: var(--dk-txt-soft);
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background: var(--dk-surface-2) !important;
    color: var(--dk-txt) !important;
    border: 1px solid var(--dk-border-2) !important;
}
html[data-theme="dark"] .dataTables_wrapper .paginate_button {
    color: var(--dk-txt-soft) !important;
}
html[data-theme="dark"] .dataTables_wrapper .paginate_button.current,
html[data-theme="dark"] .dataTables_wrapper .paginate_button:hover {
    background: #FF822D !important;
    color: #fff !important;
    border-color: #FF822D !important;
}

/* ==========================================================
   FORMS - inputs, textareas, selects, fieldset
   ========================================================== */
html[data-theme="dark"] fieldset {
    background: var(--dk-surface) !important;
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-txt);
}
html[data-theme="dark"] legend {
    color: var(--dk-txt-soft);
}
html[data-theme="dark"] .form-control,
html[data-theme="dark"] textarea.form-control,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: var(--dk-surface-2) !important;
    color: var(--dk-txt) !important;
    border: 1px solid var(--dk-border-2) !important;
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--dk-txt-muted) !important;
    opacity: 1;
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
    border-color: #FF822D !important;
    box-shadow: 0 0 0 3px rgba(255,130,45,0.15) !important;
    outline: none !important;
}
html[data-theme="dark"] input[readonly],
html[data-theme="dark"] input[disabled],
html[data-theme="dark"] textarea[readonly] {
    background: var(--dk-surface) !important;
    color: var(--dk-txt-soft) !important;
    border-color: var(--dk-border) !important;
}
html[data-theme="dark"] form label,
html[data-theme="dark"] .form-label {
    color: var(--dk-txt) !important;
}

/* Select2 */
html[data-theme="dark"] .select2-container--default .select2-selection {
    background: var(--dk-surface-2) !important;
    border: 1px solid var(--dk-border-2) !important;
    color: var(--dk-txt) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection__rendered {
    color: var(--dk-txt) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection__placeholder {
    color: var(--dk-txt-muted) !important;
}
html[data-theme="dark"] .select2-dropdown {
    background: var(--dk-surface-2) !important;
    border: 1px solid var(--dk-border-2) !important;
}
html[data-theme="dark"] .select2-results__option {
    color: var(--dk-txt) !important;
}
html[data-theme="dark"] .select2-results__option--highlighted {
    background: #FF822D !important;
    color: #fff !important;
}
html[data-theme="dark"] .select2-search--dropdown .select2-search__field {
    background: var(--dk-surface) !important;
    border: 1px solid var(--dk-border-2) !important;
    color: var(--dk-txt) !important;
}
html[data-theme="dark"] .select2-selection__choice__display {
    color: var(--dk-txt) !important;
}

/* ==========================================================
   MODAIS / DROPDOWNS
   ========================================================== */
html[data-theme="dark"] .modal-content {
    background: var(--dk-surface);
    color: var(--dk-txt);
    border: 1px solid var(--dk-border);
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--dk-border);
}
html[data-theme="dark"] .modal-title {
    color: var(--dk-txt);
}
html[data-theme="dark"] .modal-backdrop {
    background: rgba(0,0,0,0.7);
}

html[data-theme="dark"] .dropdown-menu {
    background: var(--dk-surface);
    border: 1px solid var(--dk-border);
}
html[data-theme="dark"] .dropdown-item {
    color: var(--dk-txt);
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background: var(--dk-surface-2);
    color: #FF822D;
}
html[data-theme="dark"] .dropdown-divider {
    border-color: var(--dk-border);
}

/* ==========================================================
   TABS / PAGINATION
   ========================================================== */
html[data-theme="dark"] .nav-tabs {
    border-bottom: 1px solid var(--dk-border);
}
html[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--dk-txt-soft);
    border-color: transparent;
}
html[data-theme="dark"] .nav-tabs .nav-link.active {
    background: var(--dk-surface);
    color: #FF822D;
    border-color: var(--dk-border) var(--dk-border) var(--dk-surface);
}
html[data-theme="dark"] .pagination .page-link {
    background: var(--dk-surface);
    color: var(--dk-txt);
    border-color: var(--dk-border);
}
html[data-theme="dark"] .pagination .page-item.active .page-link {
    background: #FF822D;
    border-color: #FF822D;
    color: #fff;
}

/* ==========================================================
   BOTÕES
   ========================================================== */
html[data-theme="dark"] .btn-light {
    background: var(--dk-surface-2);
    color: var(--dk-txt);
    border: 1px solid var(--dk-border-2);
}
html[data-theme="dark"] .btn-light:hover {
    background: var(--dk-border);
}
html[data-theme="dark"] .btn-secondary {
    background: var(--dk-surface-2);
    color: var(--dk-txt);
    border: 1px solid var(--dk-border-2);
}
html[data-theme="dark"] .btn-outline-secondary {
    color: var(--dk-txt-soft) !important;
    border-color: var(--dk-border-2) !important;
    background: transparent !important;
}
html[data-theme="dark"] .btn-outline-secondary:hover {
    background: var(--dk-surface-2) !important;
    color: #FF822D !important;
    border-color: #FF822D !important;
}
html[data-theme="dark"] .btn-sm,
html[data-theme="dark"] .btn-icon {
    background: var(--dk-surface-2);
    color: var(--dk-txt);
    border: 1px solid var(--dk-border-2);
}
html[data-theme="dark"] .btn-sm:hover,
html[data-theme="dark"] .btn-icon:hover {
    background: #FF822D;
    color: #fff;
    border-color: #FF822D;
}
/* Botão SALVAR (.btn-dark fica laranja no dark) */
html[data-theme="dark"] .btn-dark {
    background: #FF822D !important;
    border-color: #FF822D !important;
    color: #fff !important;
}
html[data-theme="dark"] .btn-dark:hover {
    background: #E97527 !important;
}
/* btn-rounded preto fixo */
html[data-theme="dark"] .btn-primary.btn-round {
    background: #FF822D;
    color: #fff;
}

/* ==========================================================
   ALERTS
   ========================================================== */
html[data-theme="dark"] .alert {
    border: 1px solid var(--dk-border);
    background: var(--dk-surface-2);
    color: var(--dk-txt);
}
html[data-theme="dark"] .alert-success {
    background: rgba(22,163,74,0.15);
    color: #4ade80;
    border-color: rgba(22,163,74,0.3);
}
html[data-theme="dark"] .alert-danger {
    background: rgba(239,68,68,0.15);
    color: #f87171;
    border-color: rgba(239,68,68,0.3);
}
html[data-theme="dark"] .alert-warning {
    background: rgba(245,158,11,0.15);
    color: #fbbf24;
    border-color: rgba(245,158,11,0.3);
}

/* ==========================================================
   HRs e divisores
   ========================================================== */
html[data-theme="dark"] hr {
    border-color: var(--dk-border) !important;
    opacity: 0.5;
}

/* ==========================================================
   SCROLLBAR
   ========================================================== */
html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--dk-bg); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--dk-border-2);
    border-radius: 8px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--dk-txt-muted);
}

/* ==========================================================
   SUSPENSION / TYPEBOT MODAIS
   ========================================================== */
html[data-theme="dark"] .suspension-modal,
html[data-theme="dark"] .typebot-modal {
    background: var(--dk-surface);
    color: var(--dk-txt);
}
html[data-theme="dark"] .suspension-modal h3 { color: var(--dk-txt); }
html[data-theme="dark"] .suspension-modal p { color: var(--dk-txt-soft); }
html[data-theme="dark"] .typebot-footer {
    background: var(--dk-surface-2);
    color: var(--dk-txt-soft);
    border-color: var(--dk-border);
}

/* ==========================================================
   CHANGELOG MODAL (no dark)
   ========================================================== */
html[data-theme="dark"] .changelog-modal {
    background: var(--dk-surface);
}
html[data-theme="dark"] .changelog-version {
    background: var(--dk-surface-2);
    border-color: var(--dk-border);
}
html[data-theme="dark"] .changelog-version.destaque {
    background: rgba(255,130,45,0.08);
    border-color: #FF822D;
}
html[data-theme="dark"] .changelog-version-body {
    background: var(--dk-surface);
}
html[data-theme="dark"] .changelog-version-title {
    color: var(--dk-txt);
}
html[data-theme="dark"] .changelog-section li {
    color: var(--dk-txt-soft);
}
html[data-theme="dark"] .changelog-section-title {
    color: var(--dk-txt-muted);
}

/* ==========================================================
   MODAL DE NOTIFICAÇÃO GLOBAL (header.view.php)
   ========================================================== */
html[data-theme="dark"] .modal-notificacao-content {
    background: var(--dk-surface);
    color: var(--dk-txt);
}
html[data-theme="dark"] .modal-notificacao-content h5 {
    color: var(--dk-txt);
}
html[data-theme="dark"] .modal-notificacao-content p {
    color: var(--dk-txt-soft);
}

/* ==========================================================
   LINKS
   ========================================================== */
html[data-theme="dark"] a {
    color: #FF822D;
}
html[data-theme="dark"] a:hover {
    color: #ff9d5e;
}

/* utilitários */
html[data-theme="dark"] .text-dark { color: var(--dk-txt) !important; }
html[data-theme="dark"] .text-muted { color: var(--dk-txt-muted) !important; }

/* ==========================================================
   >>> AJUSTES DARK MODE  (adicionado 2026-07-04)
   Corrige: tela de LOGIN (cartão branco + labels ilegíveis)
   e DIVs de fundo branco embutido que não trocavam de cor.
   ========================================================== */

/* ---------- TELA DE LOGIN / REGISTRO ----------
   .login-div/.register-div usam background: var(--white-color) e não
   eram sobrescritos: cartão ficava branco e os labels (que no dark
   viram brancos) sumiam. Deixa o cartão escuro e o texto legível. */
html[data-theme="dark"] .login-div,
html[data-theme="dark"] .register-div {
    background: var(--dk-surface) !important;
    border: 1px solid var(--dk-border) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.55) !important;
    color: var(--dk-txt);
}
html[data-theme="dark"] .login-div label,
html[data-theme="dark"] .register-div label {
    color: var(--dk-txt) !important;
}
html[data-theme="dark"] .login-div .invalid-feedback,
html[data-theme="dark"] .register-div .invalid-feedback {
    color: #f87171 !important;
}
/* link "Esqueceu a senha?" (cor azul inline) -> tom legível no escuro */
html[data-theme="dark"] .login-div a[href*="esqueceu-senha"] {
    color: #4aa3ff !important;
}
/* Overlay de fundo escuro atrás do cartão (a imagem de fundo está quebrada);
   garante contraste em vez do tom claro. */
html[data-theme="dark"] .bg-primary-trans {
    background: rgba(0,0,0,0.82) !important;
}

/* ---------- CARD PADRÃO (style inline com background:#fff) ----------
   Alvo pela assinatura exata do style (max-width:700px + background:#fff),
   usado em home, cameras, camera.new/edit, comunidade.new/edit.
   Não afeta o botão Google (usa "background-color:#ffffff") nem os
   ícones circulares (não têm max-width:700px). */
html[data-theme="dark"] [style*="max-width:700px"][style*="background:#fff"] {
    background: var(--dk-surface) !important;
    box-shadow: 0 3px 20px rgba(0,0,0,0.6) !important;
    color: var(--dk-txt);
}

/* ---------- PANEL (bootstrap antigo) ---------- */
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-default,
html[data-theme="dark"] .panel-body {
    background: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-txt);
}
html[data-theme="dark"] .panel-heading {
    background: var(--dk-surface-2) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-txt) !important;
}
html[data-theme="dark"] .panel-title { color: var(--dk-txt) !important; }

/* ---------- alert-light / card-radio / bg-light ---------- */
html[data-theme="dark"] .alert-light {
    background: var(--dk-surface-2) !important;
    border-color: var(--dk-border-2) !important;
    color: var(--dk-txt) !important;
}
html[data-theme="dark"] .card-radio {
    background: var(--dk-surface-2) !important;
    border-color: var(--dk-border-2) !important;
    color: var(--dk-txt);
}
html[data-theme="dark"] .bg-light {
    background: var(--dk-surface) !important;
    color: var(--dk-txt);
}
/* =====================================================================
   LOGIN — tema claro e escuro
   O gradiente laranja estava inline no <section> do login.view.php, o que
   impedia o tema escuro de sobrepor: sobrava uma faixa marrom (o gradiente
   escurecido) abaixo do cartao. Agora o fundo mora aqui.
   ===================================================================== */
.login-hero {
    background: linear-gradient(135deg, #FF822D 0%, #E97527 45%, #aa182c 100%);
    background-size: cover;
    min-height: 100vh;
}

html[data-theme="dark"] .login-hero {
    background: var(--dk-bg) !important;
}

/* o overlay translucido sobre o gradiente nao faz sentido no escuro */
html[data-theme="dark"] .login-hero .bg-primary-trans {
    background: transparent !important;
}

/* cartao do login */
html[data-theme="dark"] .login-div {
    background: var(--dk-surface) !important;
    border: 1px solid var(--dk-border) !important;
    border-radius: 6px;
}

html[data-theme="dark"] .login-div label {
    color: var(--dk-txt-soft) !important;
}

html[data-theme="dark"] .login-div .form-control {
    background: var(--dk-surface-2) !important;
    border-color: var(--dk-border-2) !important;
    color: var(--dk-txt) !important;
}

html[data-theme="dark"] .login-div .form-control::placeholder {
    color: var(--dk-txt-muted) !important;
}

html[data-theme="dark"] .login-div .form-control:focus {
    border-color: #FF822D !important;
    box-shadow: 0 0 0 2px rgba(255,130,45,.18) !important;
}

/* botao ENTRAR: era quase preto sobre fundo escuro */
html[data-theme="dark"] .login-div .btn-primary,
html[data-theme="dark"] .login-div button[type="submit"] {
    background: #FF822D !important;
    border-color: #FF822D !important;
    color: #fff !important;
}

html[data-theme="dark"] .login-div .btn-primary:hover,
html[data-theme="dark"] .login-div button[type="submit"]:hover {
    background: #e8721f !important;
    border-color: #e8721f !important;
}

/* "Esqueceu a senha?" — alvo exato, para nao pegar o botao do Google */
html[data-theme="dark"] .login-div a[href*="esqueceu-senha"] {
    color: var(--dk-txt-soft) !important;
}
html[data-theme="dark"] .login-div a[href*="esqueceu-senha"]:hover {
    color: #FF822D !important;
}

/* botao "Fazer login com Google": mantem o padrao branco do Google */
html[data-theme="dark"] .login-div a[href*="accounts.google.com"] {
    background: #ffffff !important;
    color: #3c4043 !important;
    border: 1px solid #dadce0 !important;
}
/* rodape de direitos autorais */
html[data-theme="dark"] .login-hero .copyright,
html[data-theme="dark"] .login-hero small {
    color: var(--dk-txt-muted) !important;
}

/* =====================================================================
   TELAS INTERNAS — corrigindo estilos cravados INLINE nas views
   ---------------------------------------------------------------------
   13 views trazem fundo claro (#fff, #f9f9f9, #f8f9fa, #e9ecef) e 40
   trechos com texto escuro (#333, #444, #555, #000) direto no atributo
   style. No tema escuro isso resultava em texto quase invisivel — o caso
   mais grave era o bloco "ENTENDENDO O STREAM" em cameras.view.php.

   Resolvido por seletor de atributo em vez de mexer nas views: as views
   sao cifradas, o CSS nao. Assim a correcao nao entra no lote do ionCube
   e vale para qualquer view que use os mesmos valores.
   ===================================================================== */

/* --- blocos com fundo claro cravado --- */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background:#f9f9f9"],
html[data-theme="dark"] [style*="background: #f9f9f9"],
html[data-theme="dark"] [style*="background-color:#f9f9f9"],
html[data-theme="dark"] [style*="background-color: #f9f9f9"],
html[data-theme="dark"] [style*="background:#f8f9fa"],
html[data-theme="dark"] [style*="background: #f8f9fa"],
html[data-theme="dark"] [style*="background-color:#f8f9fa"],
html[data-theme="dark"] [style*="background-color: #f8f9fa"],
html[data-theme="dark"] [style*="background:#e9ecef"],
html[data-theme="dark"] [style*="background: #e9ecef"],
html[data-theme="dark"] [style*="background:#fafafa"],
html[data-theme="dark"] [style*="background: #fafafa"],
html[data-theme="dark"] [style*="background:#f5f5f5"],
html[data-theme="dark"] [style*="background: #f5f5f5"] {
    background: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
}

/* --- texto escuro cravado --- */
html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color: #333"],
html[data-theme="dark"] [style*="color:#444"],
html[data-theme="dark"] [style*="color: #444"],
html[data-theme="dark"] [style*="color:#555"],
html[data-theme="dark"] [style*="color: #555"],
html[data-theme="dark"] [style*="color:#222"],
html[data-theme="dark"] [style*="color: #222"],
html[data-theme="dark"] [style*="color:#000"],
html[data-theme="dark"] [style*="color: #000"] {
    color: var(--dk-txt-soft) !important;
}

/* --- blocos de codigo / texto pre-formatado --- */
html[data-theme="dark"] pre,
html[data-theme="dark"] code,
html[data-theme="dark"] kbd,
html[data-theme="dark"] samp {
    background: var(--dk-surface-2) !important;
    color: var(--dk-txt-soft) !important;
    border-color: var(--dk-border) !important;
}

html[data-theme="dark"] pre {
    padding: 14px;
    border-radius: 5px;
    line-height: 1.6;
}

/* --- tabelas --- */
html[data-theme="dark"] table,
html[data-theme="dark"] .table {
    color: var(--dk-txt-soft) !important;
}
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] table thead th {
    background: var(--dk-surface-2) !important;
    color: var(--dk-txt) !important;
    border-color: var(--dk-border) !important;
}
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th,
html[data-theme="dark"] table td,
html[data-theme="dark"] table th {
    border-color: var(--dk-border) !important;
}
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background: rgba(255,255,255,.025) !important;
}
html[data-theme="dark"] .table-hover tbody tr:hover {
    background: rgba(255,130,45,.07) !important;
}

/* --- formularios dentro das telas internas --- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background: var(--dk-surface-2) !important;
    border-color: var(--dk-border-2) !important;
    color: var(--dk-txt) !important;
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--dk-txt-muted) !important;
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
    border-color: #FF822D !important;
    box-shadow: 0 0 0 2px rgba(255,130,45,.18) !important;
}
html[data-theme="dark"] label,
html[data-theme="dark"] legend {
    color: var(--dk-txt-soft) !important;
}

/* --- modais e alertas --- */
html[data-theme="dark"] .modal-content {
    background: var(--dk-surface) !important;
    color: var(--dk-txt-soft) !important;
    border: 1px solid var(--dk-border) !important;
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--dk-border) !important;
}
html[data-theme="dark"] .close,
html[data-theme="dark"] .modal-header .close {
    color: var(--dk-txt-soft) !important;
    text-shadow: none !important;
    opacity: .8;
}

/* --- paginacao do DataTables --- */
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter {
    color: var(--dk-txt-soft) !important;
}
html[data-theme="dark"] .paginate_button {
    background: var(--dk-surface-2) !important;
    color: var(--dk-txt-soft) !important;
    border-color: var(--dk-border) !important;
}
html[data-theme="dark"] .paginate_button.current {
    background: #FF822D !important;
    color: #fff !important;
    border-color: #FF822D !important;
}

/* =====================================================================
   TELAS INTERNAS — parte 2
   ===================================================================== */

/* Faixa clara pintada por JavaScript ao desabilitar o campo:
   camera.new.view.php:197 faz .css('background','#f1f1f1') quando o tipo
   de conexao e RTMP. No escuro isso virava uma tarja branca cobrindo os
   rotulos "Dias da Semana" e "Periodo". */
html[data-theme="dark"] [style*="#f1f1f1"],
html[data-theme="dark"] [style*="rgb(241, 241, 241)"],
html[data-theme="dark"] [style*="#f1f1f1;"],
html[data-theme="dark"] [style*="#eee"],
html[data-theme="dark"] [style*="#e0e0e0"] {
    background: var(--dk-surface-2) !important;
}

/* Botoes primarios: o padrao ficava preto sobre fundo preto */
html[data-theme="dark"] .btn-primary {
    background: #FF822D !important;
    border-color: #FF822D !important;
    color: #fff !important;
}
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-primary:focus {
    background: #e8721f !important;
    border-color: #e8721f !important;
}
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .btn-light {
    background: var(--dk-surface-2) !important;
    border-color: var(--dk-border-2) !important;
    color: var(--dk-txt-soft) !important;
}
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-light:hover {
    background: var(--dk-border) !important;
    color: var(--dk-txt) !important;
}

/* select2 (carregado de CDN, traz o css claro dele) */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background: var(--dk-surface-2) !important;
    border-color: var(--dk-border-2) !important;
    color: var(--dk-txt) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .select2-container--default .select2-selection__placeholder {
    color: var(--dk-txt-soft) !important;
}
html[data-theme="dark"] .select2-dropdown,
html[data-theme="dark"] .select2-search--dropdown .select2-search__field {
    background: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-txt) !important;
}
html[data-theme="dark"] .select2-results__option {
    background: var(--dk-surface) !important;
    color: var(--dk-txt-soft) !important;
}
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #FF822D !important;
    color: #fff !important;
}
html[data-theme="dark"] .select2-selection__choice {
    background: rgba(255,130,45,.18) !important;
    border-color: rgba(255,130,45,.35) !important;
    color: var(--dk-txt) !important;
}

/* SweetAlert e caixas de confirmacao */
html[data-theme="dark"] .swal-modal,
html[data-theme="dark"] .swal2-popup {
    background: var(--dk-surface) !important;
    color: var(--dk-txt-soft) !important;
}
html[data-theme="dark"] .swal-title,
html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal-text,
html[data-theme="dark"] .swal2-html-container {
    color: var(--dk-txt) !important;
}

/* Toggle RTSP/RTMP (.toggle-btn): o estado inativo ficava cinza claro com
   texto branco — ilegivel. */
html[data-theme="dark"] .toggle-btn {
    background: var(--dk-surface-2) !important;
    color: var(--dk-txt-muted) !important;
    border: 1px solid var(--dk-border-2) !important;
    border-radius: 4px;
    padding: 6px 12px;
}
html[data-theme="dark"] .toggle-btn.active {
    background: #FF822D !important;
    border-color: #FF822D !important;
    color: #fff !important;
}
html[data-theme="dark"] .toggle-btn:hover {
    color: var(--dk-txt) !important;
}

/* O botao SAIR do topo usa .btn-primary; mantem neutro para nao competir
   com as acoes principais da tela. */
html[data-theme="dark"] .header .btn-primary,
html[data-theme="dark"] .navbar .btn-primary,
html[data-theme="dark"] a[href*="logout.php"] {
    background: var(--dk-surface-2) !important;
    border-color: var(--dk-border-2) !important;
    color: var(--dk-txt-soft) !important;
}

/* =====================================================================
   TELAS INTERNAS — parte 3
   ===================================================================== */

/* Cartoes de numero (.counter-block) do Relatorio de Gravacoes: ficavam
   com fundo claro e numero escuro, destoando do resto do painel. */
html[data-theme="dark"] .counter-block,
html[data-theme="dark"] .block.counter-block {
    background: var(--dk-surface) !important;
    border: 1px solid var(--dk-border) !important;
}
html[data-theme="dark"] .counter-block .value {
    color: var(--dk-txt) !important;
}
html[data-theme="dark"] .counter-block .label {
    color: var(--dk-txt-muted) !important;
}
html[data-theme="dark"] .counter-block .i-icon {
    color: #FF822D !important;
}

/* Blocos genericos do tema claro */
html[data-theme="dark"] .block,
html[data-theme="dark"] .form-block,
html[data-theme="dark"] .widget,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card {
    background: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-txt-soft) !important;
}

/* Celulas de tabela com texto apagado (colunas Camera/Cliente saiam
   cinza-escuro sobre fundo escuro) */
html[data-theme="dark"] table td,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .dataTable td {
    color: var(--dk-txt-soft) !important;
}
html[data-theme="dark"] table td small,
html[data-theme="dark"] .table td small,
html[data-theme="dark"] .text-muted {
    color: var(--dk-txt-muted) !important;
}

/* Cabecalho da pagina e textos auxiliares */
html[data-theme="dark"] h1, html[data-theme="dark"] h2,
html[data-theme="dark"] h3, html[data-theme="dark"] h4,
html[data-theme="dark"] h5, html[data-theme="dark"] h6 {
    color: var(--dk-txt) !important;
}
html[data-theme="dark"] small,
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .breadcrumb a {
    color: var(--dk-txt-muted) !important;
}

/* Links de tabela com style="color: var(--dark-color)" — a variavel e do
   tema claro, entao no escuro o texto ficava escuro sobre escuro
   (colunas Camera e Cliente do Relatorio de Gravacoes). */
html[data-theme="dark"] [style*="var(--dark-color)"] {
    color: var(--dk-txt-soft) !important;
}
html[data-theme="dark"] td a[style*="var(--dark-color)"]:hover {
    color: #FF822D !important;
}

/* A area do DataTables (topo com "Exibir/Pesquisar" e rodape com
   "Mostrando de X ate Y" + paginacao) ficava no preto do fundo da pagina,
   enquanto o card em volta e cinza — dava a impressao de um buraco preto
   dentro do bloco. Agora acompanha a cor do card. */
html[data-theme="dark"] .dataTables_wrapper {
    background: var(--dk-surface) !important;
    border-radius: 6px;
}
html[data-theme="dark"] .dataTables_wrapper .row,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
    background: transparent !important;
}
html[data-theme="dark"] .dataTables_wrapper table,
html[data-theme="dark"] .dataTables_wrapper .dataTable {
    background: transparent !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTable tbody tr {
    background: transparent !important;
}

/* =====================================================================
   DOCUMENTACAO — tema escuro
   A view usa var(--doc-card-bg, rgba(255,255,255,.6)); o fallback branco
   translucido deixava os cartoes de pasta lavados no escuro.
   ===================================================================== */
html[data-theme="dark"] {
    --doc-card-bg: #1a1a1a;
}

html[data-theme="dark"] .doc-pasta {
    background: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
}
html[data-theme="dark"] .doc-pasta-cab {
    background: rgba(255,130,45,.10) !important;
    border-bottom-color: var(--dk-border) !important;
}
html[data-theme="dark"] .doc-pasta-cab h3 {
    color: var(--dk-txt) !important;
}
html[data-theme="dark"] .doc-pasta-qtd {
    color: var(--dk-txt-muted) !important;
}
html[data-theme="dark"] .doc-pasta-lista a {
    color: var(--dk-txt-soft) !important;
}
html[data-theme="dark"] .doc-pasta-lista a:hover {
    background: rgba(255,130,45,.12) !important;
    color: var(--dk-txt) !important;
}
html[data-theme="dark"] .doc-pasta-lista li + li {
    border-top-color: var(--dk-border) !important;
}
html[data-theme="dark"] .doc-num {
    background: rgba(255,130,45,.20) !important;
}

/* menu lateral da documentacao */
html[data-theme="dark"] .doc-busca {
    background: var(--dk-surface-2) !important;
    border-color: var(--dk-border-2) !important;
    color: var(--dk-txt) !important;
}
html[data-theme="dark"] .doc-busca::placeholder {
    color: var(--dk-txt-muted) !important;
}
html[data-theme="dark"] .doc-grupo-titulo {
    color: var(--dk-txt-soft) !important;
}
html[data-theme="dark"] .doc-grupo-titulo:hover {
    background: rgba(255,255,255,.05) !important;
}
html[data-theme="dark"] .doc-conta {
    background: rgba(255,255,255,.10) !important;
    color: var(--dk-txt-muted) !important;
}
html[data-theme="dark"] .doc-filhos a {
    color: var(--dk-txt-soft) !important;
    border-left-color: var(--dk-border) !important;
}
html[data-theme="dark"] .doc-filhos a:hover {
    background: rgba(255,255,255,.05) !important;
}

/* corpo do documento */
html[data-theme="dark"] .doc-capa h1,
html[data-theme="dark"] .doc-lead,
html[data-theme="dark"] .doc-lead-2 {
    color: var(--dk-txt-soft) !important;
}
html[data-theme="dark"] .doc-capa h1 {
    color: var(--dk-txt) !important;
}
html[data-theme="dark"] .doc-conteudo {
    color: var(--dk-txt-soft) !important;
}
html[data-theme="dark"] .doc-conteudo h2 {
    border-bottom-color: var(--dk-border) !important;
}
html[data-theme="dark"] .doc-conteudo code,
html[data-theme="dark"] .doc-conteudo pre {
    background: var(--dk-surface-2) !important;
    color: var(--dk-txt-soft) !important;
}
html[data-theme="dark"] .doc-conteudo blockquote {
    background: rgba(255,130,45,.08) !important;
}
html[data-theme="dark"] .doc-conteudo .doc-zoom img {
    border-color: var(--dk-border) !important;
}
html[data-theme="dark"] .doc-fig figcaption {
    color: var(--dk-txt-muted) !important;
}

/* anterior / proximo */
html[data-theme="dark"] .doc-navrod-item {
    background: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-txt-soft) !important;
}
html[data-theme="dark"] .doc-navrod-item:hover {
    border-color: #FF822D !important;
}
html[data-theme="dark"] .doc-navrod-rot {
    color: var(--dk-txt-muted) !important;
}

/* Opcoes de "Modo de envio" (.card-radio) em Enviar Notificacao: as nao
   selecionadas ficavam com fundo branco e texto branco — caixas vazias. */
html[data-theme="dark"] .card-radio,
html[data-theme="dark"] .card-radio label {
    background: var(--dk-surface-2) !important;
    color: var(--dk-txt-soft) !important;
    border-color: var(--dk-border-2) !important;
}
html[data-theme="dark"] .card-radio input:checked + label {
    background: #FF822D !important;
    color: #fff !important;
    border-color: #FF822D !important;
}
html[data-theme="dark"] .card-radio label:hover {
    background: var(--dk-border) !important;
    color: var(--dk-txt) !important;
}

/* Interruptores de canal (PUSH / WHATSAPP) */
html[data-theme="dark"] .switch,
html[data-theme="dark"] .slider,
html[data-theme="dark"] .toggle-switch {
    background: var(--dk-surface-2) !important;
    border-color: var(--dk-border-2) !important;
}
html[data-theme="dark"] input:checked + .slider,
html[data-theme="dark"] input:checked + .toggle-switch {
    background: #FF822D !important;
}

/* =====================================================================
   BADGES ("pilulas") — contraste no tema escuro
   O texto saia esmaecido, principalmente sobre laranja e azul-acinzentado.
   No escuro, fundo translucido com texto na cor viva le muito melhor do
   que branco sobre cor clara.
   ===================================================================== */
html[data-theme="dark"] .badge {
    font-weight: 600 !important;
    letter-spacing: .2px;
}
html[data-theme="dark"] .badge-warning {
    background: rgba(255,130,45,.20) !important;
    color: #FFB374 !important;
    border: 1px solid rgba(255,130,45,.45) !important;
}
html[data-theme="dark"] .badge-danger {
    background: rgba(231,76,60,.20) !important;
    color: #FF8F84 !important;
    border: 1px solid rgba(231,76,60,.45) !important;
}
html[data-theme="dark"] .badge-info {
    background: rgba(90,150,255,.20) !important;
    color: #9CC0FF !important;
    border: 1px solid rgba(90,150,255,.45) !important;
}
html[data-theme="dark"] .badge-success {
    background: rgba(46,204,113,.20) !important;
    color: #7BE3A8 !important;
    border: 1px solid rgba(46,204,113,.45) !important;
}
html[data-theme="dark"] .badge-secondary {
    background: rgba(255,255,255,.10) !important;
    color: var(--dk-txt-soft) !important;
    border: 1px solid var(--dk-border-2) !important;
}
html[data-theme="dark"] .badge-primary {
    background: rgba(255,130,45,.20) !important;
    color: #FFB374 !important;
    border: 1px solid rgba(255,130,45,.45) !important;
}