/* ==========================================================
   /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);
}