/**
 * Editor Themes - Dark Theme for Summernote and Flatpickr
 * Danger.tr - Shared CSS
 * 
 * This file provides consistent dark theme styling for:
 * - Summernote WYSIWYG Editor
 * - Flatpickr Date Picker
 */

/* ===================================
   Summernote Editor Dark Theme
   =================================== */

.note-editor {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 0.5rem !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.note-toolbar {
    background: rgba(255, 255, 255, 0.1) !important;
    border-bottom: 1px solid #000000 !important;
    border-radius: 0.5rem 0.5rem 0 0 !important;
    padding: 8px !important;
}

.note-toolbar .note-btn-group {
    border-right: 1px solid rgba(255, 255, 255, 0.03) !important;
}

.note-toolbar .note-btn-group:last-child {
    border-right: none !important;
}

.note-toolbar .note-btn {
    color: #D1D5DB !important;
    background: transparent !important;
    border: none !important;
}

.note-toolbar .note-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #E5E7EB !important;
}

.note-toolbar .note-btn.active {
    background: rgba(96, 165, 250, 0.3) !important;
    color: #60a5fa !important;
}

.note-editable {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #E5E7EB !important;
    min-height: 200px !important;
    padding: 12px !important;
    border-radius: 0 0 0.5rem 0.5rem !important;
}

.note-editable:focus {
    outline: none !important;
}

/* Summernote Modal Dark Theme */
.note-modal {
    background: rgba(0, 0, 0, 0.8) !important;
}

.note-modal .modal-content {
    background: #1f2937 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 0.5rem !important;
    color: #E5E7EB !important;
}

.note-modal .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.note-modal .modal-title {
    color: #9CA3AF !important;
}

.note-modal label {
    color: #9CA3AF !important;
}

.note-modal input[type="text"],
.note-modal input[type="url"] {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #E5E7EB !important;
    border-radius: 4px !important;
    padding: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.note-modal input[type="text"]:focus,
.note-modal input[type="url"]:focus {
    outline: none !important;
    border-color: rgba(96, 165, 250, 0.5) !important;
}

.note-modal .btn {
    background: rgba(96, 165, 250, 0.2) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(96, 165, 250, 0.3) !important;
    border-radius: 4px !important;
    padding: 8px 16px !important;
}

.note-modal .btn:hover {
    background: rgba(96, 165, 250, 0.3) !important;
}

.note-modal .btn-primary {
    background: rgba(96, 165, 250, 0.4) !important;
}

.note-modal .btn-primary:hover {
    background: rgba(96, 165, 250, 0.5) !important;
}

/* ===================================
   Flatpickr Date Picker Dark Theme
   =================================== */

.flatpickr-calendar {
    background: #1f2937 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

.flatpickr-months {
    background: #1f2937 !important;
    color: #fff !important;
}

.flatpickr-month {
    color: #fff !important;
}

.flatpickr-weekdays {
    background: #1f2937 !important;
}

.flatpickr-weekday {
    color: #fff !important;
}

.flatpickr-day {
    color: #fff !important;
}

.flatpickr-day:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.flatpickr-day.selected {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
}

.flatpickr-day.today {
    border-color: #ef4444 !important;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    color: #fff !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}