/**
 * Estilos para Dark Mode - Sistema PLEX
 * IMPORTANTE: Este arquivo deve ser carregado DEPOIS do Bootstrap CSS
 */

/* ============================================
   VARIÁVEIS CSS
   ============================================ */
:root {
    --page-bg: var(--page-bg-light, #f4f6fb);
    --surface-bg: var(--surface-bg-light, #ffffff);
    --surface-muted: var(--surface-muted-light, #edf1f6);
    --bg-light: var(--page-bg);
    --bg-secondary: var(--surface-muted);
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --border-color: #dee2e6;
    --card-bg: var(--surface-bg);
    --table-bg: #ffffff;
    --table-hover: #f8f9fa;
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --modal-bg: #ffffff;
    --shadow: rgba(0, 0, 0, 0.1);
    
    /* Navbar - Light Mode (tema por empresa) */
    --navbar-bg: linear-gradient(135deg, var(--brand-primary, var(--cor-primaria, #667eea)) 0%, var(--brand-secondary, var(--cor-secundaria, #764ba2)) 100%);
    --navbar-bg-color: var(--brand-primary, var(--cor-primaria, #667eea));
    --navbar-text: #ffffff;
}

.dark-mode {
    --page-bg: var(--page-bg-dark, color-mix(in srgb, var(--brand-primary, #4f46e5) 10%, #020617));
    --surface-bg: var(--surface-bg-dark, color-mix(in srgb, var(--brand-primary, #4f46e5) 17%, #0f172a));
    --surface-muted: var(--surface-muted-dark, color-mix(in srgb, var(--brand-primary, #4f46e5) 24%, #111827));
    --bg-light: var(--page-bg);
    --bg-secondary: var(--surface-muted);
    --text-primary: #e9ecef;
    --text-secondary: #adb5bd;
    --border-color: #495057;
    --card-bg: var(--surface-bg);
    --table-bg: var(--surface-bg);
    --table-hover: #3d3d3d;
    --input-bg: var(--surface-bg);
    --input-border: #495057;
    --modal-bg: var(--surface-bg);
    --shadow: rgba(0, 0, 0, 0.5);
    
    /* Navbar - Dark Mode com base na marca */
    --navbar-bg: linear-gradient(
        135deg,
        color-mix(in srgb, var(--brand-primary, #4f46e5) 44%, #020617) 0%,
        color-mix(in srgb, var(--brand-secondary, #7c3aed) 36%, #0b1220) 100%
    );
    --navbar-bg-color: color-mix(in srgb, var(--brand-primary, #4f46e5) 44%, #020617);
    --navbar-text: #ffffff;
}

/* ============================================
   NAVBAR - SOLUÇÃO DEFINITIVA
   ============================================ */

/* Light Mode: Barra Roxa + Texto Branco */
nav.navbar,
nav.navbar-dark,
.navbar,
.navbar-dark {
    background: var(--navbar-bg) !important;
    background-color: var(--navbar-bg-color) !important;
    background-image: var(--navbar-bg) !important;
    color: var(--navbar-text) !important;
}

/* Dark Mode: Barra Escura + Texto Branco */
.dark-mode nav.navbar,
.dark-mode nav.navbar-dark,
.dark-mode .navbar,
.dark-mode .navbar-dark {
    background: var(--navbar-bg) !important;
    background-color: var(--navbar-bg-color) !important;
    background-image: var(--navbar-bg) !important;
    color: var(--navbar-text) !important;
}

/* Links do Navbar - SEMPRE BRANCOS */
nav.navbar .nav-link,
nav.navbar .navbar-brand,
nav.navbar a,
.navbar .nav-link,
.navbar .navbar-brand,
.navbar a,
.navbar-dark .nav-link,
.navbar-dark .navbar-brand,
.navbar-dark a {
    color: var(--navbar-text) !important;
}

.dark-mode nav.navbar .nav-link,
.dark-mode nav.navbar .navbar-brand,
.dark-mode nav.navbar a,
.dark-mode .navbar .nav-link,
.dark-mode .navbar .navbar-brand,
.dark-mode .navbar a,
.dark-mode .navbar-dark .nav-link,
.dark-mode .navbar-dark .navbar-brand,
.dark-mode .navbar-dark a {
    color: var(--navbar-text) !important;
}

/* Ícones do Navbar - SEMPRE BRANCOS */
nav.navbar i,
.navbar i,
.navbar-dark i,
nav.navbar .nav-link i,
.navbar .nav-link i,
.navbar-dark .nav-link i {
    color: var(--navbar-text) !important;
}

.dark-mode nav.navbar i,
.dark-mode .navbar i,
.dark-mode .navbar-dark i,
.dark-mode nav.navbar .nav-link i,
.dark-mode .navbar .nav-link i,
.dark-mode .navbar-dark .nav-link i {
    color: var(--navbar-text) !important;
}

/* Modal header com tema (light) */
.modal-header.theme-header {
    background: var(--navbar-bg) !important;
    color: var(--navbar-text) !important;
}
.dark-mode .modal-header.theme-header {
    background: var(--navbar-bg) !important;
    color: var(--navbar-text) !important;
}

/* Toggle do Dark Mode - SEMPRE BRANCO */
#darkModeToggle,
#darkModeToggle i {
    color: var(--navbar-text) !important;
}

.dark-mode #darkModeToggle,
.dark-mode #darkModeToggle i {
    color: var(--navbar-text) !important;
}

/* ============================================
   BODY E ELEMENTOS GERAIS
   ============================================ */
body {
    background-color: var(--bg-light);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dark-mode body {
    background-color: var(--bg-light);
    color: var(--text-primary);
}

/* ============================================
   CARDS
   ============================================ */
.card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.card-header {
    background-color: var(--bg-secondary) !important;
    border-bottom-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .card-header {
    background-color: var(--bg-secondary) !important;
    border-bottom-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   TABELAS
   ============================================ */
.table {
    background-color: var(--table-bg) !important;
    color: var(--text-primary) !important;
}

.dark-mode .table,
.dark-mode table.table,
.dark-mode .table-responsive .table,
.dark-mode .card .table,
.dark-mode .card-body .table {
    background-color: var(--table-bg) !important;
    color: var(--text-primary) !important;
}

.table thead th {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .table thead th,
.dark-mode table.table thead th,
.dark-mode .table-responsive .table thead th,
.dark-mode .card .table thead th {
    background-color: var(--table-header-bg-dark, var(--surface-muted)) !important;
    color: var(--table-header-text-dark, #ffffff) !important;
    border-color: var(--border-color) !important;
}

.table tbody {
    background-color: var(--table-bg) !important;
}

.dark-mode .table tbody,
.dark-mode table.table tbody,
.dark-mode .table-responsive .table tbody,
.dark-mode .card .table tbody {
    background-color: var(--table-bg) !important;
}

.table tbody tr {
    background-color: var(--table-bg) !important;
    color: var(--text-primary) !important;
}

.dark-mode .table tbody tr,
.dark-mode table.table tbody tr,
.dark-mode .table-responsive .table tbody tr,
.dark-mode .card .table tbody tr {
    background-color: var(--table-bg) !important;
    color: var(--text-primary) !important;
}

.table tbody tr:hover {
    background-color: var(--table-hover) !important;
}

.dark-mode .table tbody tr:hover,
.dark-mode table.table tbody tr:hover,
.dark-mode .table-responsive .table tbody tr:hover,
.dark-mode .card .table tbody tr:hover {
    background-color: var(--table-hover) !important;
}

.table tbody td {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    background-color: transparent !important;
}

.dark-mode .table tbody td,
.dark-mode table.table tbody td,
.dark-mode .table-responsive .table tbody td,
.dark-mode .card .table tbody td {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    background-color: transparent !important;
}

/* Striped rows */
.table-striped tbody tr:nth-child(even) {
    background-color: var(--table-hover) !important;
}

.dark-mode .table-striped tbody tr:nth-child(even),
.dark-mode table.table-striped tbody tr:nth-child(even),
.dark-mode .table-responsive .table-striped tbody tr:nth-child(even),
.dark-mode .card .table-striped tbody tr:nth-child(even) {
    background-color: var(--table-hover) !important;
}

/* Table responsive wrapper */
.table-responsive {
    background-color: transparent !important;
}

.dark-mode .table-responsive,
.dark-mode .card .table-responsive {
    background-color: var(--table-bg) !important;
}

/* ============================================
   FORMULÁRIOS
   ============================================ */
.form-control,
.form-select {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

.dark-mode .form-control,
.dark-mode .form-select {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

.dark-mode .form-control:focus,
.dark-mode .form-select:focus {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

.form-label {
    color: var(--text-primary) !important;
}

.dark-mode .form-label {
    color: var(--text-primary) !important;
}

/* ============================================
   MODAIS
   ============================================ */
.modal-content {
    background-color: var(--modal-bg) !important;
    color: var(--text-primary) !important;
}

.dark-mode .modal-content {
    background-color: var(--modal-bg) !important;
    color: var(--text-primary) !important;
}

.modal-header {
    border-bottom-color: var(--border-color) !important;
}

.dark-mode .modal-header {
    border-bottom-color: var(--border-color) !important;
}

.modal-footer {
    border-top-color: var(--border-color) !important;
}

.dark-mode .modal-footer {
    border-top-color: var(--border-color) !important;
}

/* ============================================
   FILTROS CARD
   ============================================ */
.filters-card {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

.dark-mode .filters-card {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   BADGES E ALERTAS
   ============================================ */
.badge {
    color: var(--text-primary) !important;
}

.dark-mode .badge {
    color: var(--text-primary) !important;
}

.alert {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .alert {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   BOTÕES
   ============================================ */
.btn-outline-secondary {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .btn-outline-secondary {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.btn-outline-secondary:hover {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .btn-outline-secondary:hover {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   DASHBOARD TOPBAR (PLEX / 5W2H)
   ============================================ */
.dark-mode .dashboard-topbar {
    background: var(--card-bg) !important;
    border-bottom-color: var(--border-color) !important;
}
.dark-mode .dashboard-topbar-greeting,
.dark-mode .dashboard-topbar-title {
    color: var(--text-primary) !important;
}
.dark-mode .dashboard-topbar-user {
    color: var(--text-primary) !important;
}
.dark-mode .dashboard-topbar-btn {
    color: var(--text-secondary) !important;
}
.dark-mode .dashboard-topbar-btn:hover {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}
.dark-mode .dropdown-menu {
    background: var(--modal-bg) !important;
    border-color: var(--border-color) !important;
}
.dark-mode .dropdown-item {
    color: var(--text-primary) !important;
}
.dark-mode .dropdown-item:hover {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   PLANILHA JEXCEL (PLEX / 5W2H) - legível em dark mode
   ============================================ */
.dark-mode .spreadsheet-container .jexcel_container,
.dark-mode .jexcel_container {
    background: var(--card-bg) !important;
}
.dark-mode .jexcel_container table {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
.dark-mode .jexcel_container thead th {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
.dark-mode .jexcel_container tbody td {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
.dark-mode .jexcel_container tbody tr:nth-child(even) td {
    background: var(--table-hover) !important;
}
.dark-mode .jexcel_container td input,
.dark-mode .jexcel_container td select,
.dark-mode .jexcel_container td textarea {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
.dark-mode .jexcel_container td.jexcel_row {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}
.dark-mode .jexcel_container tbody td.readonly {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}
/* Célula em foco na planilha: borda destacada em dark mode */
.dark-mode .jexcel_container tbody td.highlight,
.dark-mode .jexcel_container .jexcel tbody td.highlight {
    outline: 1px solid rgba(99, 102, 241, 0.9) !important;
    outline-offset: -1px;
}

/* ============================================
   MODAIS DATEPICKER (PLEX e 5W2H) – legível em dark mode
   ============================================ */
.dark-mode #plex-datetime-picker.plex-datetime-picker,
.dark-mode #custom-datepicker.w2h-date-picker {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
.dark-mode #plex-datetime-picker.plex-datetime-picker input[type="date"],
.dark-mode #plex-datetime-picker.plex-datetime-picker input[type="time"],
.dark-mode #custom-datepicker.w2h-date-picker input[type="date"] {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
.dark-mode #plex-datetime-picker.plex-datetime-picker input:focus,
.dark-mode #custom-datepicker.w2h-date-picker input:focus {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
.dark-mode #plex-datetime-picker.plex-datetime-picker .plex-dtp-btn-cancel,
.dark-mode #custom-datepicker.w2h-date-picker .w2h-dtp-btn-cancel {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

/* ============================================
   GESTÃO: Usuários, Empresas, Filiais, Setores
   (contraste no modo noturno; sobrepõe .card-header genérico)
   ============================================ */

/* Painel de filtros colapsável — sem inline style (usa --card-bg) */
.admin-filters-collapse-bg {
    background: color-mix(in srgb, var(--cor-primaria, #4f46e5) 4%, var(--card-bg, #ffffff));
}

.dark-mode .admin-filters-collapse-bg {
    background: color-mix(in srgb, var(--cor-primaria, #818cf8) 12%, var(--card-bg)) !important;
}

/* Cabeçalho da tabela (gradiente + texto branco) */
.dark-mode .usuarios-table-card > .card-header,
.dark-mode .empresas-table-card > .card-header,
.dark-mode .filiais-table-card > .card-header,
.dark-mode .setores-table-card > .card-header {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--dashboard-sidebar-bg) 88%, #0f172a) 0%,
        color-mix(in srgb, var(--dashboard-sidebar-bg) 68%, var(--cor-primaria, #6366f1)) 100%
    ) !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.dark-mode .usuarios-table-card .card-header span,
.dark-mode .usuarios-table-card .card-header .small,
.dark-mode .usuarios-table-card .card-header #usuariosListMeta,
.dark-mode .empresas-table-card .card-header span,
.dark-mode .empresas-table-card .card-header .small,
.dark-mode .empresas-table-card .card-header #empresasListMeta,
.dark-mode .filiais-table-card .card-header span,
.dark-mode .filiais-table-card .card-header .small,
.dark-mode .filiais-table-card .card-header #filiaisListMeta,
.dark-mode .setores-table-card .card-header span,
.dark-mode .setores-table-card .card-header .small,
.dark-mode .setores-table-card .card-header #setoresListMeta {
    color: rgba(255, 255, 255, 0.92) !important;
}

.dark-mode .usuarios-table-card .card-header .bi,
.dark-mode .empresas-table-card .card-header .bi,
.dark-mode .filiais-table-card .card-header .bi,
.dark-mode .setores-table-card .card-header .bi {
    color: rgba(255, 255, 255, 0.88) !important;
}

.dark-mode .usuarios-table-card .card-header .btn-light,
.dark-mode .empresas-table-card .card-header .btn-light,
.dark-mode .filiais-table-card .card-header .btn-light,
.dark-mode .setores-table-card .card-header .btn-light {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
}

.dark-mode .usuarios-table-card .card-header .btn-light:hover,
.dark-mode .empresas-table-card .card-header .btn-light:hover,
.dark-mode .filiais-table-card .card-header .btn-light:hover,
.dark-mode .setores-table-card .card-header .btn-light:hover {
    background: rgba(255, 255, 255, 0.24) !important;
    color: #fff !important;
}

/* Rodapé da tabela + paginação */
.dark-mode .usuarios-table-card > .card-footer,
.dark-mode .empresas-table-card > .card-footer,
.dark-mode .filiais-table-card > .card-footer,
.dark-mode .setores-table-card > .card-footer {
    background-color: var(--card-bg) !important;
    border-top-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.dark-mode .usuarios-table-card .pagination .page-link,
.dark-mode .empresas-table-card .pagination .page-link,
.dark-mode .filiais-table-card .pagination .page-link,
.dark-mode .setores-table-card .pagination .page-link {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .usuarios-table-card .pagination .page-item.active .page-link,
.dark-mode .empresas-table-card .pagination .page-item.active .page-link,
.dark-mode .filiais-table-card .pagination .page-item.active .page-link,
.dark-mode .setores-table-card .pagination .page-item.active .page-link {
    background-color: color-mix(in srgb, var(--cor-primaria, #818cf8) 55%, var(--bg-secondary)) !important;
    border-color: var(--cor-primaria, #818cf8) !important;
    color: #fff !important;
}

.dark-mode .usuarios-table-card .pagination .page-item.disabled .page-link,
.dark-mode .empresas-table-card .pagination .page-item.disabled .page-link,
.dark-mode .filiais-table-card .pagination .page-item.disabled .page-link,
.dark-mode .setores-table-card .pagination .page-item.disabled .page-link {
    background-color: var(--card-bg) !important;
    color: var(--text-secondary) !important;
    opacity: 0.65;
}

/* Cabeçalho das colunas da tabela (legível sobre fundo escuro; > especificidade que .card .table) */
.dark-mode .usuarios-table-card .usuarios-table thead th,
.dark-mode .empresas-table-card .empresas-table thead th,
.dark-mode .filiais-table-card .filiais-table thead th,
.dark-mode .setores-table-card .setores-table thead th {
    background: color-mix(in srgb, var(--cor-primaria, #818cf8) 14%, var(--card-bg)) !important;
    color: var(--table-header-text-dark, #e2e8f0) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .usuarios-table-card .usuarios-table tbody td,
.dark-mode .empresas-table-card .empresas-table tbody td,
.dark-mode .filiais-table-card .filiais-table tbody td,
.dark-mode .setores-table-card .setores-table tbody td {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .usuarios-table-card .usuarios-table tbody tr:hover,
.dark-mode .empresas-table-card .empresas-table tbody tr:hover,
.dark-mode .filiais-table-card .filiais-table tbody tr:hover,
.dark-mode .setores-table-card .setores-table tbody tr:hover {
    background: color-mix(in srgb, var(--cor-primaria, #818cf8) 8%, var(--table-bg)) !important;
}

.dark-mode .usuarios-table-card .usuarios-table .text-muted,
.dark-mode .empresas-table-card .empresas-table .text-muted,
.dark-mode .filiais-table-card .filiais-table .text-muted,
.dark-mode .setores-table-card .setores-table .text-muted {
    color: #94a3b8 !important;
}

/* Cards de estatísticas — valor “total” legível no escuro */
.dark-mode .usuarios-stat-card.usuarios-stat-total .usuarios-stat-value,
.dark-mode .empresas-stat-card.empresas-stat-total .empresas-stat-value,
.dark-mode .filiais-stat-card.filiais-stat-total .filiais-stat-value,
.dark-mode .setores-stat-card.setores-stat-total .setores-stat-value {
    color: color-mix(in srgb, var(--cor-primaria, #a5b4fc) 85%, #f8fafc) !important;
}

.dark-mode .usuarios-stat-card .small.text-muted,
.dark-mode .empresas-stat-card .small.text-muted,
.dark-mode .filiais-stat-card .small.text-muted,
.dark-mode .setores-stat-card .small.text-muted {
    color: #94a3b8 !important;
}

/* Toolbar filtros — botão ativo */
.dark-mode .usuarios-toolbar .btn-filtros-toggle[aria-expanded="true"],
.dark-mode .empresas-toolbar .btn-filtros-toggle[aria-expanded="true"],
.dark-mode .filiais-toolbar .btn-filtros-toggle[aria-expanded="true"],
.dark-mode .setores-toolbar .btn-filtros-toggle[aria-expanded="true"] {
    background: color-mix(in srgb, var(--cor-primaria, #818cf8) 20%, transparent) !important;
    border-color: color-mix(in srgb, var(--cor-primaria, #818cf8) 50%, var(--border-color)) !important;
    color: #c7d2fe !important;
}

/* Sombra dos cards no escuro */
.dark-mode .usuarios-stat-card,
.dark-mode .usuarios-toolbar,
.dark-mode .usuarios-table-card,
.dark-mode .empresas-stat-card,
.dark-mode .empresas-toolbar,
.dark-mode .empresas-table-card,
.dark-mode .filiais-stat-card,
.dark-mode .filiais-toolbar,
.dark-mode .filiais-table-card,
.dark-mode .setores-stat-card,
.dark-mode .setores-toolbar,
.dark-mode .setores-table-card {
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.35) !important;
}

/* ============================================================
   MODAIS PLEX — Contraste no Dark Mode
   (Carregar, Salvar, Telegram, Ajuda e quaisquer outros)
   ============================================================ */

/* ── Estrutura genérica de todos os modais ── */
.dark-mode .modal-content {
    background-color: var(--modal-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
.dark-mode .modal-header {
    border-bottom-color: var(--border-color) !important;
}
.dark-mode .modal-footer {
    border-top-color: var(--border-color) !important;
}
.dark-mode .modal-title,
.dark-mode .modal-title * {
    color: var(--text-primary) !important;
}

/* Ícone X de fechar (preto por padrão Bootstrap → branco no dark) */
.dark-mode .modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Labels, texto descritivo e text-muted dentro de modais */
.dark-mode .modal-body .text-muted,
.dark-mode .modal-body p,
.dark-mode .modal-body small,
.dark-mode .modal-body .small,
.dark-mode .modal-body .form-label,
.dark-mode .modal-body .fw-semibold,
.dark-mode .modal-body label {
    color: var(--text-secondary) !important;
}
.dark-mode .modal-body .fw-semibold,
.dark-mode .modal-body .form-label {
    color: var(--text-primary) !important;
}

/* Botão Cancelar / btn-secondary em footers de modais */
.dark-mode .modal-footer .btn-secondary,
.dark-mode .modal .btn-secondary {
    background: var(--surface-muted) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
.dark-mode .modal-footer .btn-secondary:hover,
.dark-mode .modal .btn-secondary:hover {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Alertas (aviso de limite Telegram, nenhum dia salvo) */
.dark-mode .modal .alert-warning,
.dark-mode .modal .alert {
    background: rgba(255, 193, 7, 0.12) !important;
    border-color: rgba(255, 193, 7, 0.35) !important;
    color: #ffd54f !important;
}
.dark-mode .modal .alert-danger {
    background: rgba(220, 38, 38, 0.15) !important;
    border-color: rgba(220, 38, 38, 0.40) !important;
    color: #fca5a5 !important;
}

/* Elementos bg-light dentro de modais (ex: preview legenda Telegram) */
.dark-mode .modal .bg-light,
.dark-mode .modal [class*="bg-light"] {
    background: var(--surface-muted) !important;
    color: var(--text-primary) !important;
}
.dark-mode .modal .border {
    border-color: var(--border-color) !important;
}

/* Separadores e bordas internas */
.dark-mode .modal hr,
.dark-mode .modal .dropdown-divider {
    border-color: var(--border-color) !important;
    opacity: 0.5;
}

/* ── Calendários de Carregar / Salvar ── */

/* Cabeçalho de meses (prev, título, next) */
.dark-mode #plexCalendarioNav,
.dark-mode #plexSaveCalNav {
    color: var(--text-primary) !important;
}
.dark-mode #plexCalMonthTitle,
.dark-mode #plexSaveCalMonthTitle {
    color: var(--text-primary) !important;
}

/* Botões de navegação de mês */
.dark-mode #plexCalPrevMonth,
.dark-mode #plexCalNextMonth,
.dark-mode #plexSaveCalPrevMonth,
.dark-mode #plexSaveCalNextMonth {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    background: transparent !important;
}
.dark-mode #plexCalPrevMonth:hover,
.dark-mode #plexCalNextMonth:hover,
.dark-mode #plexSaveCalPrevMonth:hover,
.dark-mode #plexSaveCalNextMonth:hover {
    background: var(--surface-muted) !important;
}

/* Cabeçalho dos dias da semana */
.dark-mode .plex-cal-table thead th {
    color: var(--text-secondary) !important;
}

/* Chip de dia: texto padrão no dark */
.dark-mode .plex-dia-num {
    color: var(--text-primary) !important;
}

/* Dias com dados: cor primária clara (mais legível no fundo escuro) */
.dark-mode .plex-dia-com-dados .plex-dia-num {
    color: color-mix(in srgb, var(--cor-primaria, #818cf8) 65%, #c7d2fe 35%) !important;
}
.dark-mode .plex-dia-com-dados .plex-dia-num::after {
    background: color-mix(in srgb, var(--cor-primaria, #818cf8) 65%, #c7d2fe 35%) !important;
}
.dark-mode .plex-dia-com-dados[role="button"]:hover .plex-dia-num {
    background: color-mix(in srgb, var(--cor-primaria, #818cf8) 20%, transparent) !important;
    color: color-mix(in srgb, var(--cor-primaria, #818cf8) 65%, #c7d2fe 35%) !important;
}

/* Hoje: círculo preenchido com cor primária, texto branco */
.dark-mode .plex-dia-hoje .plex-dia-num {
    background: var(--cor-primaria, #818cf8) !important;
    color: #fff !important;
}
.dark-mode .plex-dia-hoje[role="button"]:hover .plex-dia-num {
    background: color-mix(in srgb, var(--cor-primaria, #818cf8) 80%, #fff 20%) !important;
}

/* Aviso "nenhum dia" e mensagem de bloqueio */
.dark-mode #nenhumDiaPlex,
.dark-mode #plexSaveCalMsg {
    background: rgba(255, 193, 7, 0.12) !important;
    border-color: rgba(255, 193, 7, 0.35) !important;
    color: #ffd54f !important;
}

/* Hint de "Datas passadas bloqueadas" abaixo do calendário */
.dark-mode #plexSaveCalWrap p.text-muted {
    color: var(--text-secondary) !important;
}

/* ── Modal Telegram ── */
.dark-mode #plexTelegramPreviewLegenda {
    background: var(--surface-muted) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
.dark-mode #modalPlexTelegram .form-check-label {
    color: var(--text-primary) !important;
}
.dark-mode #modalPlexTelegram .form-check-input {
    background-color: var(--surface-muted) !important;
    border-color: var(--border-color) !important;
}

/* ── Modal Ajuda (accordion) ── */
.dark-mode .modal .accordion-item {
    background: var(--modal-bg) !important;
    border-color: var(--border-color) !important;
}
.dark-mode .modal .accordion-button {
    background: var(--surface-muted) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}
.dark-mode .modal .accordion-button:not(.collapsed) {
    background: color-mix(in srgb, var(--cor-primaria, #4f46e5) 18%, var(--surface-muted)) !important;
    color: var(--text-primary) !important;
}
.dark-mode .modal .accordion-button::after {
    filter: invert(1) brightness(200%);
}
.dark-mode .modal .accordion-body {
    background: var(--modal-bg) !important;
    color: var(--text-primary) !important;
}
.dark-mode .modal .accordion-body p,
.dark-mode .modal .accordion-body li,
.dark-mode .modal .accordion-body span {
    color: var(--text-secondary) !important;
}