/* ============================================
   Dark Mode - Modals
   ============================================ */

/* Modal overlay */
html[data-theme='dark'] .modal {
    background-color: rgba(var(--pz-shadow-rgb), 0.8);
}

/* Modal content base */
html[data-theme='dark'] .modal-content {
    background-color: var(--dm-content-bg);
    color: var(--dm-text);
    border-color: var(--dm-border);
}

html[data-theme='dark'] .modal-content h3 {
    color: var(--dm-accent);
}

html[data-theme='dark'] #confirmModal .modal-content h3 {
    color: var(--dm-text-bright);
}

/* Modal form controls */
html[data-theme='dark'] .modal-content input,
html[data-theme='dark'] .modal-content select,
html[data-theme='dark'] .modal-content textarea {
    background-color: var(--dm-surface);
    color: var(--dm-text);
    border-color: var(--dm-border);
}

/* Modal buttons */
html[data-theme='dark'] .modal-buttons button {
    background-color: var(--dm-surface);
    color: var(--dm-text);
    border-color: var(--dm-border);
}

html[data-theme='dark'] .modal-buttons button:hover {
    background-color: var(--dm-surface-hover);
}

html[data-theme='dark'] .modal-buttons button:first-child {
    background-color: var(--dm-active);
    color: var(--pz-text-inverse);
}

html[data-theme='dark'] .modal-buttons button:first-child:hover {
    background-color: var(--dm-accent-soft);
}

/* The variants, scoped to the dialog, exactly as modals/base.css does it for the
   light theme. The generic rules above are (0,2,2) and (0,3,2); the plain
   variant rules in dark-mode/components.css are (0,2,1), so without these a
   primary button inside a dialog fell back to the neutral surface and the only
   way to stop it was !important, which then flattened every rule that styles a
   button in context. These are (0,3,2) and (0,4,2), one step above what they
   have to beat and one step below anything a page scopes for itself. */
html[data-theme='dark'] .modal-buttons button.btn-primary {
    background-color: var(--pz-accent);
    color: var(--pz-text-inverse);
    border-color: var(--pz-accent);
}

html[data-theme='dark'] .modal-buttons button.btn-primary:hover {
    background-color: var(--pz-accent-hover);
    border-color: var(--pz-accent-hover);
}

html[data-theme='dark'] .modal-buttons button.btn-danger,
html[data-theme='dark'] .modal-buttons button.btn-delete-ws {
    background-color: var(--pz-danger);
    color: var(--pz-text-inverse);
    border-color: var(--pz-danger);
}

html[data-theme='dark'] .modal-buttons button.btn-danger:hover,
html[data-theme='dark'] .modal-buttons button.btn-delete-ws:hover {
    background-color: var(--dm-danger-hover);
    border-color: var(--dm-danger-hover);
}

html[data-theme='dark'] .modal-buttons button.btn-success {
    background-color: var(--pz-success);
    color: var(--pz-text-inverse);
    border-color: var(--pz-success);
}

html[data-theme='dark'] .modal-buttons button.btn-success:hover {
    background-color: var(--dm-success-hover);
    border-color: var(--dm-success-hover);
}

html[data-theme='dark'] .modal-buttons button.btn-cancel {
    background-color: var(--dm-border);
    color: var(--dm-text);
    border-color: var(--dm-border-light);
}

html[data-theme='dark'] .modal-buttons button.btn-cancel:hover {
    background-color: var(--dm-surface-raised);
}

/* ============================================
   Reminder Modal
   ============================================ */

html[data-theme='dark'] #reminderModal .modal-content,
html[data-theme='dark'] #taskDueModal .modal-content {
    background: linear-gradient(180deg, var(--dm-content-bg) 0%, var(--dm-content-bg) 100%);
    border: 1px solid rgba(var(--pz-highlight-rgb), 0.06);
    box-shadow: 0 18px 44px rgba(var(--pz-shadow-rgb), 0.38);
}

html[data-theme='dark'] #reminderModal .modal-content h3,
html[data-theme='dark'] #taskDueModal .modal-content h3 {
    color: var(--dm-text-bright);
}

html[data-theme='dark'] #reminderModal .reminder-datetime-input,
html[data-theme='dark'] #taskDueModal .reminder-datetime-input {
    background: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text-bright);
    box-shadow: inset 0 1px 0 rgba(var(--pz-highlight-rgb), 0.03);
    color-scheme: dark;
}

html[data-theme='dark'] #reminderModal .reminder-datetime-input:focus,
html[data-theme='dark'] #taskDueModal .reminder-datetime-input:focus {
    border-color: var(--dm-accent);
    box-shadow: 0 0 0 3px rgba(var(--dm-accent-rgb), 0.18);
}

html[data-theme='dark'] #reminderModal .reminder-datetime-input::-webkit-calendar-picker-indicator,
html[data-theme='dark'] #taskDueModal .reminder-datetime-input::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.15);
    opacity: 0.88;
}

html[data-theme='dark'] #reminderModal .reminder-datetime-part,
html[data-theme='dark'] #taskDueModal .reminder-datetime-part {
    background: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text-bright);
}

html[data-theme='dark'] #reminderModal .reminder-datetime-part i,
html[data-theme='dark'] #taskDueModal .reminder-datetime-part i {
    color: var(--dm-text);
}

html[data-theme='dark'] #reminderModal .reminder-datetime-part:hover,
html[data-theme='dark'] #taskDueModal .reminder-datetime-part:hover {
    border-color: var(--dm-accent);
}

html[data-theme='dark'] :is(#reminderModal, #taskDueModal) .reminder-repeat-select,
html[data-theme='dark'] :is(#taskDueModal, #taskDueModal) .reminder-repeat-select,
html[data-theme='dark'] :is(#reminderModal, #taskDueModal) .reminder-repeat-unit,
html[data-theme='dark'] :is(#taskDueModal, #taskDueModal) .reminder-repeat-unit,
html[data-theme='dark'] :is(#reminderModal, #taskDueModal) .reminder-repeat-interval,
html[data-theme='dark'] :is(#taskDueModal, #taskDueModal) .reminder-repeat-interval {
    background: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text-bright);
    box-shadow: inset 0 1px 0 rgba(var(--pz-highlight-rgb), 0.03);
    color-scheme: dark;
}

html[data-theme='dark'] :is(#reminderModal, #taskDueModal) .reminder-repeat-select:focus,
html[data-theme='dark'] :is(#taskDueModal, #taskDueModal) .reminder-repeat-select:focus,
html[data-theme='dark'] :is(#reminderModal, #taskDueModal) .reminder-repeat-unit:focus,
html[data-theme='dark'] :is(#taskDueModal, #taskDueModal) .reminder-repeat-unit:focus,
html[data-theme='dark'] :is(#reminderModal, #taskDueModal) .reminder-repeat-interval:focus,
html[data-theme='dark'] :is(#taskDueModal, #taskDueModal) .reminder-repeat-interval:focus {
    border-color: var(--dm-accent);
    box-shadow: 0 0 0 3px rgba(var(--dm-accent-rgb), 0.18);
}

html[data-theme='dark'] :is(#reminderModal, #taskDueModal) .reminder-repeat-label i,
html[data-theme='dark'] :is(#taskDueModal, #taskDueModal) .reminder-repeat-label i {
    color: var(--dm-accent-hover);
}

html[data-theme='dark'] #reminderModal .reminder-email-option,
html[data-theme='dark'] #taskDueModal .reminder-email-option {
    background: var(--dm-surface);
    border-color: rgba(var(--pz-highlight-rgb), 0.08);
    color: var(--dm-text-bright);
}

html[data-theme='dark'] #reminderModal .reminder-email-option:hover,
html[data-theme='dark'] #taskDueModal .reminder-email-option:hover,
html[data-theme='dark'] #reminderModal .reminder-email-option:focus-within,
html[data-theme='dark'] #taskDueModal .reminder-email-option:focus-within {
    background: var(--dm-surface);
    border-color: rgba(var(--dm-accent-rgb), 0.24);
}

html[data-theme='dark'] #reminderModal .reminder-email-title,
html[data-theme='dark'] #taskDueModal .reminder-email-title {
    color: var(--dm-text-bright);
}

html[data-theme='dark'] #reminderModal .reminder-email-title i,
html[data-theme='dark'] #taskDueModal .reminder-email-title i {
    color: var(--dm-accent-hover);
}

html[data-theme='dark'] #reminderModal .reminder-email-hint,
html[data-theme='dark'] #taskDueModal .reminder-email-hint {
    color: var(--dm-text);
}

html[data-theme='dark'] #reminderModal .reminder-repeat-hint,
html[data-theme='dark'] #taskDueModal .reminder-repeat-hint {
    color: var(--dm-text-muted);
}

html[data-theme='dark'] #reminderModal .reminder-current-info,
html[data-theme='dark'] #taskDueModal .reminder-current-info {
    background: rgba(var(--dm-accent-rgb), 0.11);
    border: 1px solid rgba(var(--dm-accent-rgb), 0.18);
    color: var(--dm-accent-hover);
}

html[data-theme='dark'] #reminderModal .reminder-modal-action,
html[data-theme='dark'] #taskDueModal .reminder-modal-action {
    border-radius: var(--pz-radius-xl);
}

html[data-theme='dark'] #reminderModal .reminder-modal-actions .btn-cancel,
html[data-theme='dark'] #taskDueModal .reminder-modal-actions .btn-cancel {
    background: var(--dm-surface-raised);
    border-color: var(--dm-border-light);
    color: var(--dm-text-bright);
}

html[data-theme='dark'] #reminderModal .reminder-modal-actions .btn-cancel:hover,
html[data-theme='dark'] #taskDueModal .reminder-modal-actions .btn-cancel:hover {
    background: var(--dm-neutral);
    border-color: var(--dm-border-light);
}

html[data-theme='dark'] #reminderModal .reminder-modal-actions .btn-primary,
html[data-theme='dark'] #taskDueModal .reminder-modal-actions .btn-primary {
    background: var(--dm-accent);
}

html[data-theme='dark'] #reminderModal .reminder-modal-actions .btn-primary:hover,
html[data-theme='dark'] #taskDueModal .reminder-modal-actions .btn-primary:hover {
    background: var(--dm-accent);
}

html[data-theme='dark'] #reminderModal .reminder-modal-actions .btn-danger,
html[data-theme='dark'] #taskDueModal .reminder-modal-actions .btn-danger {
    background: var(--dm-danger-hover) !important;
}

html[data-theme='dark'] #reminderModal .reminder-modal-actions .btn-danger:hover,
html[data-theme='dark'] #taskDueModal .reminder-modal-actions .btn-danger:hover {
    background: var(--dm-danger-hover) !important;
}

/* ============================================
   Notifications Modal
   ============================================ */

html[data-theme='dark'] #notificationsModal .modal-content {
    background: linear-gradient(180deg, var(--dm-content-bg) 0%, var(--dm-content-bg) 100%);
    border: 1px solid rgba(var(--pz-highlight-rgb), 0.06);
    box-shadow: 0 18px 44px rgba(var(--pz-shadow-rgb), 0.38);
}

html[data-theme='dark'] #notificationsModal .modal-content h3 {
    color: var(--dm-text-bright);
}

html[data-theme='dark'] #notificationsModal .notification-item {
    background: var(--dm-surface);
    border: 1px solid rgba(var(--pz-highlight-rgb), 0.06);
}

html[data-theme='dark'] #notificationsModal .notification-item:hover {
    background: var(--dm-surface);
}

html[data-theme='dark'] #notificationsModal .notification-item.unread {
    background: rgba(var(--dm-accent-rgb), 0.14);
    border-color: rgba(var(--dm-accent-rgb), 0.22);
}

html[data-theme='dark'] #notificationsModal .notification-item.unread:hover {
    background: rgba(var(--dm-accent-rgb), 0.2);
}

html[data-theme='dark'] #notificationsModal .notification-icon {
    background: rgba(var(--dm-accent-rgb), 0.14);
    color: var(--dm-accent-hover);
}

html[data-theme='dark'] #notificationsModal .notification-heading {
    color: var(--dm-text-bright);
}

html[data-theme='dark'] #notificationsModal .notification-time {
    color: var(--dm-text);
}

html[data-theme='dark'] #notificationsModal .notification-action-btn {
    color: var(--dm-text);
}

html[data-theme='dark'] #notificationsModal .notification-action-btn:hover {
    color: var(--dm-danger);
    background: rgba(239, 68, 68, 0.14);
}

html[data-theme='dark'] #notificationsModal .notifications-empty {
    opacity: 0.72;
    color: var(--dm-text-bright);
}

html[data-theme='dark'] #notificationsModal .modal-buttons .btn-cancel {
    background: var(--dm-surface-raised);
    border-color: var(--dm-border-light);
    color: var(--dm-text-bright);
}

html[data-theme='dark'] #notificationsModal .modal-buttons .btn-cancel:hover {
    background: var(--dm-neutral);
    border-color: var(--dm-border-light);
}

/* ============================================
   Move Task Modal
   ============================================ */

html[data-theme='dark'] .move-task-list {
    border-color: var(--dm-border);
    background-color: var(--dm-sidebar-surface);
}

html[data-theme='dark'] .move-task-item {
    color: var(--dm-text);
}

html[data-theme='dark'] .move-task-item.selected {
    background: var(--dm-active);
}

html[data-theme='dark'] .move-task-item.move-task-create {
    color: var(--dm-accent);
}

/* ============================================
   Move Folder Files Modal
   ============================================ */

html[data-theme='dark'] #moveFolderFilesModal .modal-content h3 {
    color: var(--dm-text);
}

html[data-theme='dark'] #moveFolderFilesModal .modal-content p {
    color: var(--dm-text);
}

html[data-theme='dark'] #moveFolderFilesModal select#moveFolderFilesTargetSelect {
    background-color: var(--dm-surface);
    color: var(--dm-text);
    border-color: var(--dm-border);
}

html[data-theme='dark'] #moveFolderFilesModal select#moveFolderFilesTargetSelect:focus {
    outline: none;
    border-color: var(--dm-accent);
    box-shadow: 0 0 0 2px rgba(var(--dm-accent-rgb), 0.25);
}

html[data-theme='dark'] #moveFolderFilesModal .modal-buttons .btn-cancel {
    background-color: var(--dm-surface);
    color: var(--dm-text);
    border: 1px solid var(--dm-border);
}

html[data-theme='dark'] #moveFolderFilesModal .modal-buttons .btn-cancel:hover {
    background-color: var(--dm-surface-hover);
}

html[data-theme='dark'] #moveFolderFilesModal .modal-buttons .btn-primary {
    background-color: var(--dm-active);
    color: var(--pz-text-inverse);
    border: none;
}

html[data-theme='dark'] #moveFolderFilesModal .modal-buttons .btn-primary:hover {
    background-color: var(--dm-accent-soft);
}

html[data-theme='dark'] #moveFolderFilesModal .modal-error-message,
html[data-theme='dark'] #createWorkspaceModal .modal-error-message {
    background-color: rgba(255, 77, 77, 0.08);
    color: var(--dm-danger);
    border: 1px solid var(--dm-danger-soft);
    border-radius: var(--pz-radius-sm);
    padding: 8px 10px;
}

/* ============================================
   Move Notes Modal (Workspaces)
   ============================================ */

html[data-theme='dark'] #moveNotesModal .modal-content {
    background-color: var(--dm-bg);
    color: var(--dm-text);
}

html[data-theme='dark'] #moveNotesModal .modal-content h3 {
    color: var(--dm-text);
}

html[data-theme='dark'] #moveNotesModal .modal-content label {
    color: var(--dm-text);
}

html[data-theme='dark'] #moveNotesModal select {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
}

html[data-theme='dark'] #moveNotesModal select:focus {
    outline: none;
    border-color: var(--dm-accent);
    box-shadow: 0 0 0 2px rgba(var(--dm-accent-rgb), 0.25);
}

/* ============================================
   Move Note to Folder Modal (#moveNoteFolderModal)
   ============================================ */

html[data-theme='dark'] #moveNoteFolderModal .modal-content label {
    color: var(--dm-text);
}

html[data-theme='dark'] #moveNoteFolderModal .move-note-recent-label {
    color: var(--dm-text);
}

html[data-theme='dark'] #moveNoteFolderModal .move-note-inline-create-toggle {
    color: var(--dm-accent);
}

html[data-theme='dark'] #moveNoteFolderModal .move-note-inline-create-toggle:hover {
    color: var(--dm-text-bright);
}

html[data-theme='dark'] #moveNoteFolderModal .move-note-inline-create button.btn-cancel {
    border-color: var(--dm-border);
}

html[data-theme='dark'] #moveNoteFolderModal .move-note-inline-create button.btn-cancel:hover {
    background-color: rgba(var(--pz-highlight-rgb), 0.08);
}

html[data-theme='dark'] #moveNoteFolderModal .move-note-recent-folder {
    border-color: var(--dm-border);
}

html[data-theme='dark'] #moveNoteFolderModal .move-note-recent-folder:hover,
html[data-theme='dark'] #moveNoteFolderModal .move-note-recent-folder.is-selected {
    background: rgba(var(--dm-accent-rgb), 0.16);
    border-color: var(--dm-accent);
    color: var(--dm-text-bright);
}

/* ============================================
   Rename Modal
   ============================================ */

html[data-theme='dark'] #renameModal .modal-content {
    background-color: var(--dm-bg);
    color: var(--dm-text);
}

html[data-theme='dark'] #renameModal .modal-content h3 {
    color: var(--dm-text);
}

html[data-theme='dark'] #renameModal .modal-content label {
    color: var(--dm-text);
}

html[data-theme='dark'] #renameModal input {
    background-color: var(--dm-surface);
    color: var(--dm-text);
    border-color: var(--dm-border);
}

html[data-theme='dark'] #renameModal input:focus {
    outline: none;
    border-color: var(--dm-accent);
    box-shadow: 0 0 0 2px rgba(var(--dm-accent-rgb), 0.25);
}

/* ============================================
   Delete Modal
   ============================================ */

html[data-theme='dark'] #deleteModal .modal-content {
    background-color: var(--dm-bg);
    color: var(--dm-text);
}

html[data-theme='dark'] #deleteModal .modal-content h3 {
    color: var(--dm-text);
}

html[data-theme='dark'] #deleteModal .modal-content p {
    color: var(--dm-text);
}

/* Irreversible-deletion warning headline (base styles in settings.css):
   the blanket p-recolor above would grey it out, and its id gives it the
   weight to do so, hence the matching :is() id boost. #dc3545 is too dim on
   the dark panel, so a lighter red. #deleteAccountModal is the self-service
   twin built by js/delete-account.js on the settings page. */
html[data-theme='dark'] :is(#deleteModal, #deleteAccountModal) .delete-warning-box .delete-warning {
    color: var(--dm-danger);
}

html[data-theme='dark'] #deleteModal input {
    background-color: var(--dm-surface);
    color: var(--dm-text);
    border-color: var(--dm-border);
}

html[data-theme='dark'] #deleteModal input:focus {
    outline: none;
    border-color: var(--dm-accent);
    box-shadow: 0 0 0 2px rgba(var(--dm-accent-rgb), 0.25);
}

/* ============================================
   Font Size & Note Width Modals
   ============================================ */

html[data-theme='dark'] #fontSizeModal .modal-header h2 {
    color: var(--dm-text);
}

html[data-theme='dark'] #fontSizeModal .modal-body p,
html[data-theme='dark'] #noteWidthModal .modal-body p {
    color: var(--dm-text);
}

html[data-theme='dark'] #fontSizeModal .font-size-controls label,
html[data-theme='dark'] #noteWidthModal .font-size-controls label {
    color: var(--dm-text-bright);
}

html[data-theme='dark'] #fontSizeModal .font-size-controls input,
html[data-theme='dark'] #noteWidthModal .font-size-controls input {
    background-color: var(--dm-surface);
    color: var(--dm-text);
    border-color: var(--dm-border);
}

html[data-theme='dark'] #noteWidthModal .btn-full-width-footer {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

html[data-theme='dark'] #noteWidthModal .btn-full-width-footer:hover {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border-light) !important;
}

html[data-theme='dark'] #noteWidthModal .btn-full-width-footer.active {
    background-color: var(--pz-accent) !important;
    color: var(--pz-text-inverse) !important;
    border-color: var(--pz-accent) !important;
}

html[data-theme='dark'] #fontSizeModal .font-size-controls input::placeholder,
html[data-theme='dark'] #noteWidthModal .font-size-controls input::placeholder {
    color: var(--dm-text-subtle);
}

html[data-theme='dark'] #noteWidthModal .note-width-unit {
    color: var(--dm-text-muted);
}

html[data-theme='dark'] #fontSizeModal .modal-footer .btn-primary {
    background-color: var(--dm-active);
    color: var(--pz-text-inverse);
}

html[data-theme='dark'] #fontSizeModal .modal-footer .btn-primary:hover {
    background-color: var(--dm-accent-soft);
}

html[data-theme='dark'] #fontSizeModal .modal-buttons .btn-primary {
    background-color: var(--dm-danger-hover) !important;
    color: var(--pz-text-inverse) !important;
    border-color: var(--dm-danger-hover) !important;
}

html[data-theme='dark'] #fontSizeModal .modal-buttons .btn-primary:hover {
    background-color: var(--dm-danger-hover) !important;
    border-color: var(--dm-danger-hover) !important;
    opacity: 1;
}

html[data-theme='dark'] #fontSizeModal .modal-buttons .btn-cancel:hover {
    background-color: var(--dm-surface-hover);
    color: var(--dm-text-bright);
}

/* ============================================
   Share Modal
   ============================================ */

html[data-theme='dark'] #shareModal h3 {
    color: var(--dm-text-bright);
}

/* Toggle switch: shared component, also used outside the share modals */
html[data-theme='dark'] .toggle-slider {
    background-color: var(--dm-border-light);
}

html[data-theme='dark'] input:checked+.toggle-slider {
    background-color: var(--dm-success-hover) !important;
}

/* Folder Share Modal */
html[data-theme='dark'] #folderShareModal .modal-content {
    background-color: var(--dm-content-bg);
    color: var(--dm-text-bright);
}

html[data-theme='dark'] #folderShareModal h3 {
    color: var(--dm-text-bright);
}

/* ============================================
   Folder Options (Move Dialog)
   ============================================ */

html[data-theme='dark'] .folder-option {
    color: var(--dm-text);
    border-color: var(--dm-border);
}

html[data-theme='dark'] .folder-option:hover {
    background-color: var(--dm-surface);
}

html[data-theme='dark'] .folder-option.selected {
    background-color: var(--dm-active);
    color: var(--pz-text-inverse);
}

/* ============================================
   Import/Alert Modal Content
   ============================================ */

html[data-theme='dark'] .import-confirm-modal-content,
html[data-theme='dark'] .custom-alert-content {
    background-color: var(--dm-surface);
    color: var(--dm-text);
    border: 1px solid var(--dm-border);
}

html[data-theme='dark'] .import-confirm-modal-content p,
html[data-theme='dark'] .custom-alert-content p {
    color: var(--dm-text);
}

html[data-theme='dark'] .import-confirm-modal-content .btn-cancel,
html[data-theme='dark'] #confirmModal .btn-cancel,
html[data-theme='dark'] #deleteFolderModal .btn-cancel,
html[data-theme='dark'] #deleteConfirmModal .btn-cancel,
html[data-theme='dark'] #emptyTrashConfirmModal .btn-cancel,
html[data-theme='dark'] #restoreConfirmModal .btn-cancel {
    background-color: var(--dm-danger-hover) !important;
    color: var(--pz-text-inverse) !important;
    border-color: var(--dm-danger-hover) !important;
}

html[data-theme='dark'] .import-confirm-modal-content .btn-cancel:hover,
html[data-theme='dark'] #confirmModal .btn-cancel:hover,
html[data-theme='dark'] #deleteFolderModal .btn-cancel:hover,
html[data-theme='dark'] #deleteConfirmModal .btn-cancel:hover,
html[data-theme='dark'] #emptyTrashConfirmModal .btn-cancel:hover,
html[data-theme='dark'] #restoreConfirmModal .btn-cancel:hover {
    background-color: var(--dm-danger-hover) !important;
    border-color: var(--dm-danger-hover) !important;
}

html[data-theme='dark'] #deleteFolderModal .btn-cancel {
    background-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border-light) !important;
}

html[data-theme='dark'] #deleteFolderModal .btn-cancel:hover {
    background-color: var(--dm-surface-raised) !important;
    border-color: var(--dm-border) !important;
}

/* Snapshot Modal Dark Mode */
html[data-theme='dark'] #snapshotModal .snapshot-modal-content {
    background: linear-gradient(180deg, var(--dm-content-bg) 0%, var(--dm-content-bg) 100%);
    border: 1px solid rgba(var(--pz-highlight-rgb), 0.06);
    box-shadow: 0 18px 44px rgba(var(--pz-shadow-rgb), 0.38);
}

html[data-theme='dark'] .snapshot-modal-header {
    border-bottom-color: var(--dm-border);
}

html[data-theme='dark'] #snapshotModal .snapshot-modal-header h3 {
    color: var(--dm-text-bright);
}

html[data-theme='dark'] #snapshotModal .snapshot-modal-description {
    color: rgba(218, 226, 237, 0.82);
}

html[data-theme='dark'] .snapshot-meta-item {
    color: rgba(232, 238, 247, 0.86);
}

html[data-theme='dark'] #snapshotModal .snapshot-meta-item .lucide {
    opacity: 0.72;
}

html[data-theme='dark'] #snapshotModal .snapshot-content-preview {
    border-color: var(--dm-border);
    background: var(--dm-content-bg) !important;
    color: var(--dm-text, var(--dm-text-bright)) !important;
    box-shadow: inset 0 1px 0 rgba(var(--pz-highlight-rgb), 0.02);
}

html[data-theme='dark'] #snapshotModal .snapshot-content-preview h1,
html[data-theme='dark'] #snapshotModal .snapshot-content-preview h2,
html[data-theme='dark'] #snapshotModal .snapshot-content-preview h3,
html[data-theme='dark'] #snapshotModal .snapshot-content-preview h4,
html[data-theme='dark'] #snapshotModal .snapshot-content-preview h5,
html[data-theme='dark'] #snapshotModal .snapshot-content-preview h6,
html[data-theme='dark'] #snapshotModal .snapshot-content-preview p,
html[data-theme='dark'] #snapshotModal .snapshot-content-preview div,
html[data-theme='dark'] #snapshotModal .snapshot-content-preview li,
html[data-theme='dark'] #snapshotModal .snapshot-content-preview span,
html[data-theme='dark'] #snapshotModal .snapshot-content-preview strong,
html[data-theme='dark'] #snapshotModal .snapshot-content-preview em,
html[data-theme='dark'] #snapshotModal .snapshot-content-preview section,
html[data-theme='dark'] #snapshotModal .snapshot-content-preview article {
    color: inherit !important;
    background: transparent !important;
}

html[data-theme='dark'] #snapshotModal .snapshot-content-preview a {
    color: var(--dm-accent, var(--dm-accent-hover)) !important;
}

html[data-theme='dark'] #snapshotModal .snapshot-content-preview blockquote {
    border-left-color: var(--dm-border, var(--dm-border)) !important;
    color: var(--dm-text-muted, var(--dm-text)) !important;
    background: transparent !important;
}

html[data-theme='dark'] #snapshotModal .snapshot-content-preview pre {
    background-color: var(--dm-surface, var(--dm-content-bg)) !important;
    border-color: var(--dm-border, var(--dm-border)) !important;
}

html[data-theme='dark'] #snapshotModal .snapshot-content-preview code:not([class*="hljs"]):not([class*="language-"]) {
    background-color: var(--dm-surface, var(--dm-content-bg)) !important;
    color: var(--dm-text, var(--dm-text-bright)) !important;
}

html[data-theme='dark'] #snapshotModal .snapshot-content-preview pre code:not([class*="hljs"]):not([class*="language-"]) {
    background-color: transparent !important;
    color: var(--dm-text-muted, var(--dm-text-bright)) !important;
}

html[data-theme='dark'] #snapshotModal .snapshot-content-preview table,
html[data-theme='dark'] #snapshotModal .snapshot-content-preview th,
html[data-theme='dark'] #snapshotModal .snapshot-content-preview td {
    border-color: var(--dm-border, var(--dm-border)) !important;
}

html[data-theme='dark'] #snapshotModal .snapshot-content-preview th,
html[data-theme='dark'] #snapshotModal .snapshot-content-preview td {
    background-color: var(--dm-surface, var(--dm-content-bg)) !important;
    color: var(--dm-text, var(--dm-text-bright)) !important;
}

html[data-theme='dark'] #snapshotModal .snapshot-content-preview hr {
    border-top-color: var(--dm-border, var(--dm-border)) !important;
}

html[data-theme='dark'] .snapshot-modal-actions {
    border-top-color: var(--dm-border);
}

html[data-theme='dark'] .snapshot-state > div:first-child {
    opacity: 0.25;
}

html[data-theme='dark'] .snapshot-date-list {
    border-right-color: var(--dm-border);
}

html[data-theme='dark'] .snapshot-date-btn {
    color: rgba(239, 244, 250, 0.92);
}

html[data-theme='dark'] .snapshot-date-list-header {
    color: rgba(213, 220, 230, 0.8);
}

html[data-theme='dark'] #snapshotModal .snapshot-date-secondary {
    color: rgba(181, 190, 202, 0.88);
    opacity: 1;
}

html[data-theme='dark'] .snapshot-date-btn:hover {
    background-color: rgba(var(--pz-highlight-rgb), 0.08);
}

html[data-theme='dark'] #snapshotModal .snapshot-state-title {
    color: var(--dm-text, var(--dm-text-bright));
}

html[data-theme='dark'] #snapshotModal .snapshot-state-hint {
    color: var(--dm-text-muted, var(--dm-text));
    opacity: 1;
}

/* Update Modal Specific */
html[data-theme='dark'] #updateModal .version-info {
    background-color: var(--dm-surface) !important;
    border: 1px solid var(--dm-border) !important;
}

html[data-theme='dark'] #updateModal .version-info p {
    color: var(--dm-text-bright) !important;
}

html[data-theme='dark'] #updateModal .modal-content p {
    color: var(--dm-text) !important;
}

html[data-theme='dark'] #updateModal .backup-warning {
    background-color: var(--dm-content-bg);
    border-color: var(--dm-warning-soft);
}

/* Update Check Modal Specific */
html[data-theme='dark'] #updateCheckModal .modal-content {
    background-color: var(--dm-content-bg) !important;
    color: var(--dm-text) !important;
}

html[data-theme='dark'] #updateCheckModal .modal-content h3 {
    color: var(--dm-accent) !important;
}

html[data-theme='dark'] #updateCheckModal .modal-content p {
    color: var(--dm-text) !important;
}

/* Custom date pattern token legend */
html[data-theme='dark'] .date-format-tokens {
    color: var(--dm-text-muted, var(--dm-text-muted)) !important;
}

html[data-theme='dark'] .date-format-tokens dt code {
    background: rgba(var(--pz-highlight-rgb), 0.1) !important;
    color: var(--dm-text) !important;
}