/* Custom Sidebar Submenu Active State */
.sidebar-menu li ul li.active-submenu>a {
    background-color: rgba(0, 0, 0, 0.04);
    /* Soft background */
    color: #7b8190;
    font-weight: 600;
    margin-right: 10px;
    /* Spacing */
}

/* Dark Mode Adaptation */
body.dark-mode .sidebar-menu li ul li.active-submenu>a {
    background-color: rgba(255, 255, 255, 0.05);
    /* Soft white background */
    color: #7b8190;
}

/* Ensure the icon also looks active/highlighted if needed */
.sidebar-menu li ul li.active-submenu>a i {
    opacity: 1;
}

/* Import Items Preview Table - Dark Mode */
#preview-area .table {
    color: inherit;
    background-color: transparent;
}

#preview-area .table th,
#preview-area .table td {
    color: inherit;
    background-color: transparent;
    border-color: rgba(128, 128, 128, 0.3);
}

#preview-area .table th {
    background-color: rgba(128, 128, 128, 0.1);
}

#preview-area .table tr:hover td {
    background-color: rgba(128, 128, 128, 0.1);
}

/* Dark mode specific adjustments */
body.dark-mode #preview-area .table {
    color: #e1e1e1;
}

body.dark-mode #preview-area .table th {
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

body.dark-mode #preview-area .table td {
    background-color: transparent;
    color: #e1e1e1;
}

body.dark-mode #preview-area .table tr:hover td {
    background-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode #preview-area .table-bordered th,
body.dark-mode #preview-area .table-bordered td {
    border-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode #preview-area .table .error,
body.dark-mode #preview-area .table td.error {
    background-color: rgba(244, 67, 54, 0.12);
    color: #ef9a9a;
    border-color: rgba(244, 67, 54, 0.35);
}

body.dark-mode #preview-area .table .text-danger,
body.dark-mode #preview-area .table th.text-danger {
    color: #ef9a9a;
}

/* Import modal body dark mode */
body.dark-mode .import-item-modal-body,
body.dark-mode .import-modal-body {
    background-color: inherit;
}

/* File upload modal: zona de dropzone con borde punteado y texto centrado (modo oscuro) */
body.dark-mode #ajaxModal #file-form .dropzone,
body.dark-mode #ajaxModal #file-form #file-upload-dropzone,
body.dark-mode #ajaxModal .dropzone,
body.dark-mode #ajaxModal #file-upload-dropzone {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(255, 255, 255, 0.35) !important;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.2) !important;
}
body.dark-mode #ajaxModal #file-form .dropzone .dz-message,
body.dark-mode #ajaxModal #file-form #file-upload-dropzone .dz-message,
body.dark-mode #ajaxModal .dropzone .dz-message,
body.dark-mode #ajaxModal #file-upload-dropzone .dz-message {
    margin: 0;
    color: #898fa9;
    text-align: center;
    font-size: 14px;
}
.import-modal-body .dropzone .dz-message,
.import-modal-body #file-upload-dropzone .dz-message {
    margin: 0;
    color: #898fa9;
    text-align: center;
    font-size: 14px;
}
body.dark-mode .import-modal-body .dropzone,
body.dark-mode .import-modal-body #file-upload-dropzone {
    border-color: rgba(255, 255, 255, 0.35) !important;
    background: rgba(0, 0, 0, 0.2) !important;
}
body.dark-mode .import-modal-body .dropzone .dz-message,
body.dark-mode .import-modal-body #file-upload-dropzone .dz-message {
    color: #898fa9;
}

/* WhatsApp QR Code - Dark Mode Support */
body.dark-mode img[id^="whatsapp-qr-"],
body.dark-mode div[id^="whatsapp-qr-loader-"] {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode div[id^="whatsapp-qr-loader-"] {
    background-color: rgba(0, 0, 0, 0.2);
}

/* WhatsApp Sync Progress - Dark Mode Support */
body.dark-mode [id^="whatsapp-sync-wrap-"] .text-success,
body.dark-mode [id^="whatsapp-sync-wrap-"] .sync-completed-text,
body.dark-mode [id^="whatsapp-sync-progress-"] .progress-text,
body.dark-mode [id^="whatsapp-sync-progress-"] .sync-status-text {
    color: #4ade80 !important;
}

body.dark-mode [id^="whatsapp-sync-wrap-"] {
    color: #e1e1e1;
}

body.dark-mode [id^="whatsapp-sync-wrap-"] .text-muted,
body.dark-mode [id^="whatsapp-sync-wrap-"] small,
body.dark-mode [id^="whatsapp-sync-wrap-"] .sync-info {
    color: #b0b0b0 !important;
}

/* Sync progress bar in dark mode */
body.dark-mode [id^="whatsapp-sync-progress-"] .progress {
    background-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode [id^="whatsapp-sync-progress-"] .progress-bar {
    color: #fff;
}

/* File Upload Modal - Dark Mode Fix */
body.dark-mode #file-upload-dropzone,
body.dark-mode .dropzone {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 2px dashed rgba(255, 255, 255, 0.3) !important;
}
body.dark-mode #file-upload-dropzone .dz-message,
body.dark-mode .dropzone .dz-message {
    color: #a0a6b8 !important;
}

/* Margen superior para el área de previews de archivos */
#file-upload-dropzone-scrollbar {
    margin-top: 15px;
}
body.dark-mode #file-upload-dropzone-scrollbar .box,
body.dark-mode #uploaded-file-previews .box {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px;
}
body.dark-mode #file-upload-dropzone-scrollbar .box-content,
body.dark-mode #uploaded-file-previews .box-content {
    color: #e1e1e1;
}
body.dark-mode #file-upload-dropzone-scrollbar .name,
body.dark-mode #uploaded-file-previews .name {
    color: #ffffff;
}