/* css/_dark-mode.css */

/* Dark mode adjustments for general elements */
.dark .form-input:not(.admin-input-light) {
    background-color: var(--color-gray-700);
    border-color: var(--color-gray-600);
    color: var(--text-color-light);
}
.dark .form-input:not(.admin-input-light):focus {
    border-color: var(--color-primary-base);
    background-color: var(--color-gray-600);
}

.dark .modal-content {
    background-color: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

.dark .modal-header .modal-title,
.dark .form-label,
.dark .text-gray-700 {
    color: var(--text-color-light);
}

.dark .modal-footer {
    background-color: var(--color-gray-700);
    border-top-color: var(--color-gray-600);
}

.dark .modal-content .form-input {
    background-color: var(--color-gray-700);
    border-color: var(--color-gray-600);
    color: var(--text-color-light);
}

.dark .modal-content .form-input:focus {
    border-color: var(--color-primary-base);
    box-shadow: 0 0 0 2px var(--color-primary-focus-ring);
}

.dark .tab-button {
    background-color: var(--color-gray-700);
    border-color: var(--color-gray-600);
    color: var(--color-gray-300);
}

.dark .tab-button.active {
    background-color: var(--color-gray-800);
    border-color: var(--color-gray-600) var(--color-gray-600) var(--color-gray-800);
    color: var(--color-primary-base);
}

.dark .tab-button:hover:not(.active) {
    background-color: var(--color-gray-600);
}

/* Dark mode adjustments for rich text editor (Summernote) */
.dark .note-editor.note-frame {
    background-color: var(--color-gray-800) !important;
}

.dark .note-editing-area .note-editable {
    background-color: var(--color-gray-800) !important;
    color: var(--text-color-light) !important;
}

.dark .note-toolbar {
    background-color: var(--color-gray-700) !important;
    border-bottom-color: var(--color-gray-600) !important;
}

.dark .note-toolbar .note-btn {
    background-color: var(--color-gray-700) !important;
    color: var(--color-gray-300) !important;
    border-color: var(--color-gray-600) !important;
}

.dark .note-toolbar .note-btn:hover {
    background-color: var(--color-gray-600) !important;
}

.dark .note-toolbar .note-btn.active {
    background-color: var(--color-primary-base) !important;
    color: var(--text-color-white) !important;
}

.dark .note-popover {
    background-color: var(--color-gray-700) !important;
    border-color: var(--color-gray-600) !important;
}

.dark .note-popover .note-btn {
    background-color: var(--color-gray-700) !important;
    color: var(--color-gray-300) !important;
}

.dark .note-popover .note-btn:hover {
    background-color: var(--color-gray-600) !important;
}

.dark .note-popover .note-color .note-color-btn {
    background-color: var(--color-gray-700) !important;
    border-color: var(--color-gray-600) !important;
}

.dark .note-popover .note-color .note-color-btn:hover {
    background-color: var(--color-gray-600) !important;
}

.dark .note-popover .note-color .note-palette .note-color-reset,
.dark .note-popover .note-color .note-palette .note-color-close,
.dark .note-popover .note-color .note-palette .note-color-open,
.dark .note-popover .note-color .note-palette .note-color-more {
    background-color: var(--color-gray-700) !important;
    color: var(--color-gray-300) !important;
}

.dark .note-popover .note-color .note-palette .note-color-reset:hover,
.dark .note-popover .note-color .note-palette .note-color-close:hover,
.dark .note-popover .note-color .note-palette .note-color-open:hover,
.dark .note-popover .note-color .note-palette .note-color-more:hover {
    background-color: var(--color-gray-600) !important;
}

.dark .note-popover .note-color .note-palette .note-color-picker {
    background-color: var(--color-gray-700) !important;
    border-color: var(--color-gray-600) !important;
}

.dark .note-popover .note-color .note-palette .note-color-picker:hover {
    background-color: var(--color-gray-600) !important;
}

.dark .note-popover .note-color .note-palette .note-color-picker.active {
    background-color: var(--color-primary-base) !important;
    color: var(--text-color-white) !important;
}

.dark .note-popover .note-color .note-palette .note-color-picker.active:hover {
    background-color: var(--color-primary-hover) !important;
    color: var(--text-color-white) !important;
}

.dark .note-btn:disabled,
.dark .note-popover .note-btn:disabled,
.dark .note-editor.note-frame.disabled .note-editing-area .note-editable {
    background-color: var(--color-gray-600) !important;
    color: var(--color-gray-500) !important;
    cursor: not-allowed;
}

.dark .note-popover .note-color .note-palette .note-color-picker.disabled {
    background-color: var(--color-gray-700) !important;
    color: var(--color-gray-500) !important;
    cursor: not-allowed;
}

/* Dark mode adjustments for Calendar */
.dark #calendarGrid {
    border-color: var(--border-color-dark);
}
.dark #calendarGrid .text-center.font-semibold.text-sm.text-gray-600.py-2 {
    background-color: var(--color-gray-700);
    border-bottom-color: var(--border-color-dark);
    border-right-color: var(--border-color-darker);
    color: var(--text-color-light);
}
.dark .calendar-day {
    border-color: var(--border-color-dark);
    background-color: var(--color-gray-800);
    color: var(--text-color-light); /* Default text in dark mode */
}
.dark .calendar-day.empty-day {
    background-color: var(--color-gray-900);
    border-color: var(--color-gray-700); /* Ensure empty days have a border in dark mode */
}
.dark .calendar-day.today {
    background-color: var(--color-indigo-900); /* Darker highlight for today */
    border-color: var(--color-primary-base);
    box-shadow: inset 0 0 0 1px var(--color-primary-base);
}
.dark .calendar-day .text-lg.font-bold.text-gray-800 {
    color: var(--text-color-light);
}
.dark .calendar-day.today .text-lg.font-bold.text-gray-800 {
    color: var(--color-primary-base);
}
.dark .events-list::-webkit-scrollbar-track {
    background: var(--color-gray-700); /* Darker scrollbar track */
}
.dark .events-list::-webkit-scrollbar-thumb {
    background: var(--color-gray-600); /* Darker scrollbar thumb */
}
.dark .events-list::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-500); /* Darker scrollbar thumb hover */
}
.dark .event-item {
    color: var(--text-color-white); /* Events typically use colored backgrounds, keep white text */
}