/* Theme Toggle Button */
/* Theme toggle button */
.theme-toggle {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: #757575 !important;
    font-size: 18px !important;
    border: 1px solid #ddd !important;
    border-radius: 50% !important;
}

.theme-toggle:hover {
    background-color: #f5f5f5 !important;
}

/* Dark Theme Base */
body.dark-theme {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

/* Header - Dark Theme */
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3 {
    color: #e0e0e0 !important;
    border-bottom-color: #4285F4 !important;
}

/* Controls - Dark Theme */
body.dark-theme .controls {
    border-bottom-color: #333 !important;
}

body.dark-theme button:not(.theme-toggle-header):not(.pin-button-icon):not(.close) {
    background-color: #3367D6 !important;
    color: #e0e0e0 !important;
}

body.dark-theme button:not(.theme-toggle-header):not(.pin-button-icon):not(.close):hover {
    background-color: #4285F4 !important;
}

/* Ensure icon buttons stay transparent in dark mode */
body.dark-theme .theme-toggle-header,
body.dark-theme .pin-button-icon {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.dark-theme .theme-toggle-header:hover,
body.dark-theme .pin-button-icon:hover {
    background: transparent !important;
}

body.dark-theme .theme-toggle {
    border-color: #444 !important;
    color: #e0e0e0 !important;
}
body.dark-theme .theme-toggle:hover {
    background-color: #333 !important;
}
body.dark-theme .year-selector {
    background-color: #333 !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

/* Calendar - Dark Theme */
body.dark-theme .month-column {
    border-color: #444 !important;
    background-color: #1e1e1e !important;
}

body.dark-theme .month-header {
    background-color: #282828 !important;
    color: #e0e0e0 !important;
    border-bottom-color: #444 !important;
}

body.dark-theme .day-cell {
    border-bottom-color: #333 !important;
    color: #e0e0e0 !important;
    transition: all 0.2s ease !important;
}

body.dark-theme .day-cell:hover {
    background-color: #282828 !important;
}

/* Fix for the bright borders when clicking cells */
body.dark-theme .day-cell[style*="border: 2px solid rgb(66, 133, 244)"],
body.dark-theme .day-cell:focus {
    border: 2px solid #4285F4 !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #1e1e1e !important;
}

/* Today highlight in dark mode */
body.dark-theme .day-cell.today {
    background-color: rgba(66, 133, 244, 0.2) !important;
    border-left: 3px solid #4285F4 !important;
}

/* Weekend highlighting in dark mode */
body.dark-theme .day-cell.saturday {
    background-color: #2a2a2a !important;
}

body.dark-theme .day-cell.sunday {
    background-color: #252525 !important;
}

/* Weekend + has-events combination in dark mode - REMOVED
body.dark-theme .day-cell.saturday.has-events {
    background-color: rgba(52, 168, 83, 0.2) !important;
}

body.dark-theme .day-cell.sunday.has-events {
    background-color: rgba(52, 168, 83, 0.25) !important;
} */

/* Events highlight in dark mode - REMOVED
body.dark-theme .day-cell.has-events:not(.saturday):not(.sunday):not(.today) {
    background-color: rgba(52, 168, 83, 0.15) !important;
} */

/* Event summaries in dark mode - improved contrast */
body.dark-theme .event-summary {
    color: #ffffff !important;
    font-weight: 500 !important;
    padding: 3px 5px !important;
    margin: 2px 0 !important;
    border-radius: 3px !important;
    /* Let inline styles handle background-color and border-left-color */
}

/* Events list styling */
body.dark-theme .event-list {
    background-color: #1e1e1e !important;
    border-color: #444 !important;
}

body.dark-theme .event-item {
    border-bottom-color: #333 !important;
    background-color: #282828 !important;
}

body.dark-theme .event-item:hover {
    background-color: #333 !important;
}

/* Calendar header for events list */
body.dark-theme .calendar-header {
    border-bottom-color: #444 !important;
}

/* Modal styles for dark theme */
body.dark-theme .modal-content {
    background-color: #282828 !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

body.dark-theme .modal-header,
body.dark-theme .modal-footer {
    border-color: #444 !important;
}

body.dark-theme .close {
    background: none !important;
}

body.dark-theme .close:hover {
    background: none !important;
}

body.dark-theme .close svg {
    fill: #aaa !important;
    stroke: #aaa !important;
    opacity: 0.6 !important;
}

body.dark-theme .close:hover svg {
    opacity: 0.9 !important;
}

body.dark-theme input[type="text"],
body.dark-theme input[type="datetime-local"],
body.dark-theme textarea,
body.dark-theme select {
    background-color: #333 !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

body.dark-theme input[type="text"]:disabled,
body.dark-theme input[type="datetime-local"]:disabled,
body.dark-theme textarea:disabled,
body.dark-theme select:disabled {
    background-color: #2a2a2a !important;
    color: #888 !important;
    border-color: #3a3a3a !important;
    cursor: not-allowed !important;
}

/* Calendar dropdown in modal */
body.dark-theme .calendar-select-group {
    background-color: #2a2a2a !important;
    border-color: #444 !important;
}

body.dark-theme .calendar-select {
    background-color: #333 !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
    /* Update dropdown arrow color for dark mode */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
}

body.dark-theme .calendar-select:hover {
    border-color: #5a9fd4 !important;
}

body.dark-theme .calendar-select-group label {
    color: #e0e0e0 !important;
}

body.dark-theme label {
    color: #e0e0e0 !important;
}

/* Legend items */
body.dark-theme .legend-item {
    color: #e0e0e0 !important;
}

body.dark-theme .legend-color[style*="background-color: #e8f4ff"] {
    background-color: rgba(66, 133, 244, 0.2) !important;
}

body.dark-theme .legend-color[style*="background-color: #e8ffe8"] {
    background-color: rgba(52, 168, 83, 0.15) !important;
}

/* Calendar selector area */
body.dark-theme #calendarSelector {
    background-color: #282828 !important;
    border-color: #444 !important;
}

/* Ensure toggle button is visible in dark mode */
body.dark-theme .theme-toggle {
    background-color: transparent !important;
    border: 1px solid #444 !important;
}

/* Selection styles for day cells */
.day-cell.selected-cell {
    border: 2px solid #4285F4 !important;
    outline: none !important;
}

body.dark-theme .day-cell.selected-cell {
    border: 2px solid #4285F4 !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #1e1e1e !important;
}

/* Dark theme support for drag and drop */
body.dark-theme .day-cell.drag-over {
    background-color: rgba(66, 133, 244, 0.3) !important;
    border: 2px dashed #4285F4 !important;
}

body.dark-theme .loader-spinner {
    background: #333;
    color: #e0e0e0;
}

/* Event tooltip dark mode */
body.dark-theme .event-tooltip {
    background-color: #2a2a2a !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
}

body.dark-theme .event-tooltip-title {
    border-bottom-color: #444 !important;
}

body.dark-theme .event-tooltip-label {
    color: #aaa !important;
}

body.dark-theme .event-tooltip-value {
    color: #e0e0e0 !important;
}

/* Account info dark mode */
body.dark-theme .account-email {
    background-color: rgba(66, 133, 244, 0.2) !important;
    color: #e0e0e0 !important;
}

body.dark-theme .stat-item {
    color: #e0e0e0 !important;
}

body.dark-theme .stat-label {
    color: #aaa !important;
}

body.dark-theme .stat-value {
    color: #5a9fd4 !important;
}

/* Month navigation arrows in dark mode */
body.dark-theme .month-nav-arrow {
    color: #bbb !important;
}

body.dark-theme .month-nav-arrow:hover {
    color: #5a9fd4 !important;
}