/* ============================================================================
   GLOBAL COMPONENT THEME OVERRIDES
   Global theme styles for components with scoped CSS (not scoped)
   These must be in a separate non-scoped CSS file to work properly in Blazor WASM
   ============================================================================ */

/* ============================================================================
   BOOTSTRAP & UTILITY CLASS OVERRIDES
   Common Bootstrap classes that don't respond to theme changes
   ============================================================================ */

/* Light Theme - Bootstrap & Utilities */
.theme-light .text-muted {
    color: #6B7280 !important;
}

.theme-light .btn-primary {
    background-color: #4F46E5 !important;
    border-color: #4F46E5 !important;
    color: white !important;
}

.theme-light .btn-primary:hover {
    background-color: #4338CA !important;
    border-color: #4338CA !important;
}

.theme-light .btn-outline-primary {
    color: #4F46E5 !important;
    border-color: #4F46E5 !important;
}

.theme-light .btn-outline-primary:hover {
    background-color: #4F46E5 !important;
    color: white !important;
}

.theme-light .btn-outline-secondary {
    color: #6B7280 !important;
    border-color: #D1D5DB !important;
}

.theme-light .btn-outline-secondary:hover {
    background-color: #F3F4F6 !important;
    color: #374151 !important;
}

/* Dark Theme - Bootstrap & Utilities */
.theme-dark .text-muted {
    color: #9CA3AF !important;
}

.theme-dark .btn-primary {
    background-color: #3B82F6 !important;
    border-color: #3B82F6 !important;
    color: white !important;
}

.theme-dark .btn-primary:hover {
    background-color: #2563EB !important;
    border-color: #2563EB !important;
}

.theme-dark .btn-outline-primary {
    color: #60A5FA !important;
    border-color: #3B82F6 !important;
}

.theme-dark .btn-outline-primary:hover {
    background-color: #3B82F6 !important;
    color: white !important;
}

.theme-dark .btn-outline-secondary {
    color: #D1D5DB !important;
    border-color: #4B5563 !important;
}

.theme-dark .btn-outline-secondary:hover {
    background-color: #374151 !important;
    color: white !important;
}

/* Default Theme (OS Preference) - Bootstrap & Utilities */
@media (prefers-color-scheme: dark) {
    .theme-default .text-muted {
        color: #9CA3AF !important;
    }
    
    .theme-default .btn-primary {
        background-color: #3B82F6 !important;
        border-color: #3B82F6 !important;
        color: white !important;
    }
    
    .theme-default .btn-primary:hover {
        background-color: #2563EB !important;
        border-color: #2563EB !important;
    }
    
    .theme-default .btn-outline-primary {
        color: #60A5FA !important;
        border-color: #3B82F6 !important;
    }
    
    .theme-default .btn-outline-primary:hover {
        background-color: #3B82F6 !important;
        color: white !important;
    }
    
    .theme-default .btn-outline-secondary {
        color: #D1D5DB !important;
        border-color: #4B5563 !important;
    }
    
    .theme-default .btn-outline-secondary:hover {
        background-color: #374151 !important;
        color: white !important;
    }
}

/* ============================================================================
   DEBUG OVERLAY THEME OVERRIDES
   ============================================================================ */

/* Light Theme - Debug Overlay */
.theme-light .debug-panel {
    background: white !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
}

.theme-light .debug-header {
    background: #F9FAFB !important;
    border-bottom-color: #E5E7EB !important;
}

.theme-light .debug-header h4 {
    color: #111827 !important;
}

.theme-light .debug-actions button {
    background: white !important;
    border-color: #E5E7EB !important;
    color: #6B7280 !important;
}

.theme-light .debug-actions button:hover {
    background: #F3F4F6 !important;
    color: #111827 !important;
}

.theme-light .debug-tabs {
    background: #F9FAFB !important;
    border-bottom-color: #E5E7EB !important;
}

.theme-light .debug-tab {
    color: #6B7280 !important;
}

.theme-light .debug-tab:hover {
    background: #F3F4F6 !important;
    color: #111827 !important;
}

.theme-light .debug-tab-active {
    color: #667eea !important;
    background: white !important;
    border-bottom-color: #667eea !important;
}

.theme-light .debug-content {
    background: white !important;
}

.theme-light .debug-tab-content h3 {
    color: #111827 !important;
}

.theme-light .debug-table thead tr {
    background: #F9FAFB !important;
    border-bottom-color: #E5E7EB !important;
}

.theme-light .debug-table th {
    color: #6B7280 !important;
}

.theme-light .debug-table td {
    color: #374151 !important;
    border-bottom-color: #F3F4F6 !important;
}

.theme-light .debug-table tbody tr:hover {
    background: #F9FAFB !important;
}

.theme-light .debug-stat-card {
    background: #F9FAFB !important;
    border-color: #E5E7EB !important;
}

.theme-light .debug-stat-label {
    color: #6B7280 !important;
}

.theme-light .debug-stat-value {
    color: #111827 !important;
}

.theme-light .debug-subtab {
    background: #F3F4F6 !important;
    border-color: #E5E7EB !important;
    color: #6B7280 !important;
}

.theme-light .debug-subtab:hover {
    background: #E5E7EB !important;
}

.theme-light .debug-subtab-active {
    background: #667eea !important;
    color: white !important;
    border-color: #667eea !important;
}

.theme-light .debug-tips {
    background: #EFF6FF !important;
    border-color: #DBEAFE !important;
    color: #1E40AF !important;
}

.theme-light .debug-alerts {
    background: #FEF3C7 !important;
    border-color: #FDE68A !important;
    color: #92400E !important;
}

.theme-light .debug-tab-header {
    color: #111827 !important;
    background: #F9FAFB !important;
}

.theme-light .debug-section-title {
    color: #374151 !important;
    border-bottom-color: #E5E7EB !important;
}

/* Dark Theme - Debug Overlay */
.theme-dark .debug-panel {
    background: #1F2937 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

.theme-dark .debug-header {
    background: #111827 !important;
    border-bottom-color: #374151 !important;
}

.theme-dark .debug-header h4 {
    color: #F9FAFB !important;
}

.theme-dark .debug-actions button {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #D1D5DB !important;
}

.theme-dark .debug-actions button:hover {
    background: #4B5563 !important;
    color: #F9FAFB !important;
}

.theme-dark .debug-tabs {
    background: #111827 !important;
    border-bottom-color: #374151 !important;
}

.theme-dark .debug-tab {
    color: #9CA3AF !important;
}

.theme-dark .debug-tab:hover {
    background: #374151 !important;
    color: #F9FAFB !important;
}

.theme-dark .debug-tab-active {
    color: #818CF8 !important;
    background: #1F2937 !important;
    border-bottom-color: #818CF8 !important;
}

.theme-dark .debug-content {
    background: #1F2937 !important;
}

.theme-dark .debug-tab-content h3 {
    color: #F9FAFB !important;
}

.theme-dark .debug-table thead tr {
    background: #111827 !important;
    border-bottom-color: #374151 !important;
}

.theme-dark .debug-table th {
    color: #9CA3AF !important;
}

.theme-dark .debug-table td {
    color: #D1D5DB !important;
    border-bottom-color: #374151 !important;
}

.theme-dark .debug-table tbody tr:hover {
    background: #374151 !important;
}

.theme-dark .debug-stat-card {
    background: #111827 !important;
    border-color: #374151 !important;
}

.theme-dark .debug-stat-label {
    color: #9CA3AF !important;
}

.theme-dark .debug-stat-value {
    color: #F9FAFB !important;
}

.theme-dark .debug-subtab {
    background: #374151 !important;
    border-color: #4B5563 !important;
    color: #9CA3AF !important;
}

.theme-dark .debug-subtab:hover {
    background: #4B5563 !important;
}

.theme-dark .debug-subtab-active {
    background: #818CF8 !important;
    color: white !important;
    border-color: #818CF8 !important;
}

.theme-dark .debug-tips {
    background: #1E3A8A !important;
    border-color: #1E40AF !important;
    color: #BFDBFE !important;
}

.theme-dark .debug-alerts {
    background: #78350F !important;
    border-color: #92400E !important;
    color: #FDE68A !important;
}

.theme-dark .debug-tab-header {
    color: #F9FAFB !important;
    background: #111827 !important;
}

.theme-dark .debug-section-title {
    color: #D1D5DB !important;
    border-bottom-color: #374151 !important;
}

/* Default Theme (OS Preference) - Debug Overlay */
@media (prefers-color-scheme: dark) {
    .theme-default .debug-panel {
        background: #1F2937 !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
    }
    
    .theme-default .debug-header {
        background: #111827 !important;
        border-bottom-color: #374151 !important;
    }
    
    .theme-default .debug-header h4 {
        color: #F9FAFB !important;
    }
    
    .theme-default .debug-actions button {
        background: #374151 !important;
        border-color: #4B5563 !important;
        color: #D1D5DB !important;
    }
    
    .theme-default .debug-actions button:hover {
        background: #4B5563 !important;
        color: #F9FAFB !important;
    }
    
    .theme-default .debug-tabs {
        background: #111827 !important;
        border-bottom-color: #374151 !important;
    }
    
    .theme-default .debug-tab {
        color: #9CA3AF !important;
    }
    
    .theme-default .debug-tab:hover {
        background: #374151 !important;
        color: #F9FAFB !important;
    }
    
    .theme-default .debug-tab-active {
        color: #818CF8 !important;
        background: #1F2937 !important;
        border-bottom-color: #818CF8 !important;
    }
    
    .theme-default .debug-content {
        background: #1F2937 !important;
    }
    
    .theme-default .debug-tab-content h3 {
        color: #F9FAFB !important;
    }
    
    .theme-default .debug-table thead tr {
        background: #111827 !important;
        border-bottom-color: #374151 !important;
    }
    
    .theme-default .debug-table th {
        color: #9CA3AF !important;
    }
    
    .theme-default .debug-table td {
        color: #D1D5DB !important;
        border-bottom-color: #374151 !important;
    }
    
    .theme-default .debug-table tbody tr:hover {
        background: #374151 !important;
    }
    
    .theme-default .debug-stat-card {
        background: #111827 !important;
        border-color: #374151 !important;
    }
    
    .theme-default .debug-stat-label {
        color: #9CA3AF !important;
    }
    
    .theme-default .debug-stat-value {
        color: #F9FAFB !important;
    }
    
    .theme-default .debug-subtab {
        background: #374151 !important;
        border-color: #4B5563 !important;
        color: #9CA3AF !important;
    }
    
    .theme-default .debug-subtab:hover {
        background: #4B5563 !important;
    }
    
    .theme-default .debug-subtab-active {
        background: #818CF8 !important;
        color: white !important;
        border-color: #818CF8 !important;
    }
    
    .theme-default .debug-tips {
        background: #1E3A8A !important;
        border-color: #1E40AF !important;
        color: #BFDBFE !important;
    }
    
    .theme-default .debug-alerts {
        background: #78350F !important;
        border-color: #92400E !important;
        color: #FDE68A !important;
    }
    
    .theme-default .debug-tab-header {
        color: #F9FAFB !important;
        background: #111827 !important;
    }
    
    .theme-default .debug-section-title {
        color: #D1D5DB !important;
        border-bottom-color: #374151 !important;
    }
}

/* ============================================================================
   EVENTS WEEK VIEW THEME OVERRIDES
   ============================================================================ */

/* Light Theme - Events Week View */
.theme-light .week-navigation {
    background: white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.theme-light .week-display h3 {
    color: #1F2937 !important;
}

.theme-light .week-grid {
    background: white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.theme-light .day-column {
    border-color: #E5E7EB !important;
    background: white !important;
}

.theme-light .day-column.today {
    border-color: #4F46E5 !important;
    background: linear-gradient(180deg, rgba(79, 70, 229, 0.05) 0%, white 30%) !important;
}

.theme-light .day-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
}

.theme-light .no-events {
    color: #9CA3AF !important;
}

.theme-light .no-events i {
    color: #9CA3AF !important;
}

.theme-light .no-events .text-muted {
    color: #9CA3AF !important;
}

.theme-light .event-item {
    background: #F9FAFB !important;
    border-left-color: #667eea !important;
}

.theme-light .event-item:hover {
    background: #F3F4F6 !important;
}

.theme-light .event-title {
    color: #1F2937 !important;
}

.theme-light .event-location {
    color: #6B7280 !important;
}

.theme-light .summary-card {
    background: white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.theme-light .summary-value {
    color: #1F2937 !important;
}

.theme-light .summary-label {
    color: #6B7280 !important;
}

/* Dark Theme - Events Week View */
.theme-dark .week-navigation {
    background: #1F2937 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.theme-dark .week-display h3 {
    color: #F9FAFB !important;
}

.theme-dark .week-grid {
    background: #1F2937 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.theme-dark .day-column {
    border-color: #374151 !important;
    background: #111827 !important;
}

.theme-dark .day-column.today {
    border-color: #3B82F6 !important;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.1) 0%, #111827 30%) !important;
}

.theme-dark .day-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
}

.theme-dark .no-events {
    color: #6B7280 !important;
}

.theme-dark .no-events i {
    color: #6B7280 !important;
}

.theme-dark .no-events .text-muted {
    color: #6B7280 !important;
}

.theme-dark .event-item {
    background: #1F2937 !important;
    border-left-color: #667eea !important;
}

.theme-dark .event-item:hover {
    background: #374151 !important;
}

.theme-dark .event-title {
    color: #F9FAFB !important;
}

.theme-dark .event-location {
    color: #D1D5DB !important;
}

.theme-dark .summary-card {
    background: #1F2937 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.theme-dark .summary-value {
    color: #F9FAFB !important;
}

.theme-dark .summary-label {
    color: #D1D5DB !important;
}

/* Default Theme (OS Preference) - Events Week View */
@media (prefers-color-scheme: dark) {
    .theme-default .week-navigation {
        background: #1F2937 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }
    
    .theme-default .week-display h3 {
        color: #F9FAFB !important;
    }
    
    .theme-default .week-grid {
        background: #1F2937 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }
    
    .theme-default .day-column {
        border-color: #374151 !important;
        background: #111827 !important;
    }
    
    .theme-default .day-column.today {
        border-color: #3B82F6 !important;
        background: linear-gradient(180deg, rgba(59, 130, 246, 0.1) 0%, #111827 30%) !important;
    }
    
    .theme-default .day-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: white !important;
    }
    
    .theme-default .no-events {
        color: #6B7280 !important;
    }
    
    .theme-default .no-events i {
        color: #6B7280 !important;
    }
    
    .theme-default .no-events .text-muted {
        color: #6B7280 !important;
    }
    
    .theme-default .event-item {
        background: #1F2937 !important;
        border-left-color: #667eea !important;
    }
    
    .theme-default .event-item:hover {
        background: #374151 !important;
    }
    
    .theme-default .event-title {
        color: #F9FAFB !important;
    }
    
    .theme-default .event-location {
        color: #D1D5DB !important;
    }
    
    .theme-default .summary-card {
        background: #1F2937 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }
    
    .theme-default .summary-value {
        color: #F9FAFB !important;
    }
    
    .theme-default .summary-label {
        color: #D1D5DB !important;
    }
}

/* ============================================================================
   EVENTS DAY VIEW THEME OVERRIDES
   ============================================================================ */

/* Light Theme - Events Day View */
.theme-light .date-navigation {
    background: white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.theme-light .date-display h3,
.theme-light .date-display-heading {
    color: #1F2937 !important;
}

.theme-light .summary-card {
    background: white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.theme-light .summary-count {
    color: #1F2937 !important;
}

.theme-light .summary-label {
    color: #6B7280 !important;
}

.theme-light .calendar-item-card {
    background: white !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.theme-light .card-title {
    color: #1F2937 !important;
}

.theme-light .card-icon {
    color: white !important;
}

.theme-light .empty-state {
    color: #6B7280 !important;
}

.theme-light .empty-icon {
    color: #9CA3AF !important;
}

.theme-light .empty-title {
    color: #6B7280 !important;
}

.theme-light .empty-message {
    color: #9CA3AF !important;
}

.theme-light .priority-medium {
    background-color: #F59E0B !important;
    color: #1F2937 !important;
}

.theme-light .priority-high,
.theme-light .priority-urgent {
    background-color: #EF4444 !important;
    color: white !important;
}

.theme-light .priority-low {
    background-color: #10B981 !important;
    color: white !important;
}

/* Dark Theme - Events Day View */
.theme-dark .date-navigation {
    background: #1F2937 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.theme-dark .date-display h3,
.theme-dark .date-display-heading {
    color: #F9FAFB !important;
}

.theme-dark .summary-card {
    background: #1F2937 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.theme-dark .summary-count {
    color: #F9FAFB !important;
}

.theme-dark .summary-label {
    color: #D1D5DB !important;
}

.theme-dark .calendar-item-card {
    background: #1F2937 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

.theme-dark .card-title {
    color: #F9FAFB !important;
}

.theme-dark .card-icon {
    color: white !important;
}

.theme-dark .empty-state {
    color: #9CA3AF !important;
}

.theme-dark .empty-icon {
    color: #6B7280 !important;
}

.theme-dark .empty-title {
    color: #9CA3AF !important;
}

.theme-dark .empty-message {
    color: #6B7280 !important;
}

.theme-dark .priority-medium {
    background-color: #F59E0B !important;
    color: #1F2937 !important;
}

.theme-dark .priority-high,
.theme-dark .priority-urgent {
    background-color: #EF4444 !important;
    color: white !important;
}

.theme-dark .priority-low {
    background-color: #10B981 !important;
    color: white !important;
}

/* Default Theme (OS Preference) - Events Day View */
@media (prefers-color-scheme: dark) {
    .theme-default .date-navigation {
        background: #1F2937 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }
    
    .theme-default .date-display h3,
    .theme-default .date-display-heading {
        color: #F9FAFB !important;
    }
    
    .theme-default .summary-card {
        background: #1F2937 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }
    
    .theme-default .summary-count {
        color: #F9FAFB !important;
    }
    
    .theme-default .summary-label {
        color: #D1D5DB !important;
    }
    
    .theme-default .calendar-item-card {
        background: #1F2937 !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
    }
    
    .theme-default .card-title {
        color: #F9FAFB !important;
    }
    
    .theme-default .card-icon {
        color: white !important;
    }
    
    .theme-default .empty-state {
        color: #9CA3AF !important;
    }
    
    .theme-default .empty-icon {
        color: #6B7280 !important;
    }
    
    .theme-default .empty-title {
        color: #9CA3AF !important;
    }
    
    .theme-default .empty-message {
        color: #6B7280 !important;
    }
    
    .theme-default .priority-medium {
        background-color: #F59E0B !important;
        color: #1F2937 !important;
    }
    
    .theme-default .priority-high,
    .theme-default .priority-urgent {
        background-color: #EF4444 !important;
        color: white !important;
    }
    
    .theme-default .priority-low {
        background-color: #10B981 !important;
        color: white !important;
    }
}

/* ============================================================================
   QUICKACTIONS THEME OVERRIDES
   Global theme styles for QuickActions component (not scoped)
   ============================================================================ */

/* Light Theme - QuickActions */
.theme-light .quick-search-input {
    background-color: #F9FAFB !important;
    border-color: #D1D5DB !important;
    color: #1F2937 !important;
}

.theme-light .quick-search-input:focus {
    background-color: white !important;
    border-color: #4F46E5 !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
}

.theme-light .quick-search-input::placeholder {
    color: #9CA3AF !important;
}

.theme-light .quick-search-btn {
    color: #6B7280 !important;
}

.theme-light .quick-search-btn:hover {
    background-color: #F3F4F6 !important;
    color: #4F46E5 !important;
}

.theme-light .quick-btn {
    background-color: white !important;
    border-color: #D1D5DB !important;
    color: #374151 !important;
}

.theme-light .quick-btn:hover {
    background-color: #EEF2FF !important;
    border-color: #4F46E5 !important;
    color: #4338CA !important;
}

/* Dark Theme - QuickActions */
.theme-dark .quick-search-input {
    background-color: #1F2937 !important;
    border-color: #374151 !important;
    color: #F9FAFB !important;
}

.theme-dark .quick-search-input:focus {
    background-color: #374151 !important;
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

.theme-dark .quick-search-input::placeholder {
    color: #9CA3AF !important;
}

.theme-dark .quick-search-btn {
    color: #D1D5DB !important;
}

.theme-dark .quick-search-btn:hover {
    background-color: #374151 !important;
    color: #60A5FA !important;
}

.theme-dark .quick-btn {
    background-color: #1F2937 !important;
    border-color: #374151 !important;
    color: #E5E7EB !important;
}

.theme-dark .quick-btn:hover {
    background-color: #374151 !important;
    border-color: #3B82F6 !important;
    color: #60A5FA !important;
}

/* Default Theme (OS Preference) - QuickActions */
@media (prefers-color-scheme: dark) {
    .theme-default .quick-search-input {
        background-color: #1F2937 !important;
        border-color: #374151 !important;
        color: #F9FAFB !important;
    }
    
    .theme-default .quick-search-input:focus {
        background-color: #374151 !important;
        border-color: #3B82F6 !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
    }
    
    .theme-default .quick-search-input::placeholder {
        color: #9CA3AF !important;
    }
    
    .theme-default .quick-search-btn {
        color: #D1D5DB !important;
    }
    
    .theme-default .quick-search-btn:hover {
        background-color: #374151 !important;
        color: #60A5FA !important;
    }
    
    .theme-default .quick-btn {
        background-color: #1F2937 !important;
        border-color: #374151 !important;
        color: #E5E7EB !important;
    }
    
    .theme-default .quick-btn:hover {
        background-color: #374151 !important;
        border-color: #3B82F6 !important;
        color: #60A5FA !important;
    }
}

/* ============================================================================
   NAVMENU THEME OVERRIDES
   ============================================================================ */

/* ============================================================================
   LIGHT THEME
   ============================================================================ */

.theme-light .top-row {
    background: #E0E7EF !important; /* Light gray-blue */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

.theme-light .navbar-brand {
    color: #1F2937 !important; /* Dark text for light background */
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.theme-light .navbar-brand img {
    mix-blend-mode: normal !important;
}

.theme-light .nav-scrollable {
    background: #F4F7FB !important; /* Very light gray */
}

.theme-light .navbar-toggler {
    background-color: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

.theme-light .navbar-toggler:hover {
    background-color: rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
}

.theme-light .hamburger-line {
    background-color: #1F2937 !important; /* Dark lines for light background */
}

.theme-light .nav-section-title {
    color: rgba(0, 0, 0, 0.6) !important;
}

.theme-light .nav-section-title:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: rgba(0, 0, 0, 0.85) !important;
}

.theme-light .nav-item a {
    color: #4B5563 !important; /* Dark gray text */
}

.theme-light .nav-item a.active {
    background-color: rgba(99, 102, 241, 0.15) !important; /* Light indigo */
    color: #4338CA !important; /* Indigo */
    font-weight: 600;
}

.theme-light .nav-item a:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #1F2937 !important;
}

.theme-light .nav-link-button {
    color: #4B5563 !important;
}

.theme-light .nav-link-button:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #1F2937 !important;
}

.theme-light .mobile-profile-info {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

.theme-light .mobile-profile-name {
    color: #1F2937 !important;
}

.theme-light .mobile-profile-email {
    color: #6B7280 !important;
}

.theme-light .mobile-profile-avatar-placeholder {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(79, 70, 229, 0.2) 100%) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

.theme-light .mobile-profile-avatar {
    border-color: rgba(0, 0, 0, 0.15) !important;
}

.theme-light .nav-scrollable::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05) !important;
}

.theme-light .nav-scrollable::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2) !important;
}

.theme-light .nav-scrollable::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3) !important;
}

.theme-light .mobile-footer-content,
.theme-light .desktop-footer-content {
    background-color: rgba(0, 0, 0, 0.05) !important;
    border-top-color: rgba(0, 0, 0, 0.1) !important;
}

.theme-light .mobile-footer-version,
.theme-light .mobile-footer-build,
.theme-light .desktop-footer-version,
.theme-light .desktop-footer-build {
    color: #6B7280 !important;
}

/* ============================================================================
   DARK THEME
   ============================================================================ */

.theme-dark .top-row {
    background: #1F2937 !important; /* Dark gray-blue */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.theme-dark .navbar-brand {
    color: white !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.theme-dark .navbar-brand img {
    mix-blend-mode: normal !important;
}

.theme-dark .nav-scrollable {
    background: #111827 !important; /* Very dark gray */
}

.theme-dark .navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.theme-dark .navbar-toggler:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.theme-dark .nav-section-title {
    color: rgba(255, 255, 255, 0.7) !important;
}

.theme-dark .nav-section-title:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

.theme-dark .nav-item a {
    color: rgba(255, 255, 255, 0.85) !important;
}

.theme-dark .nav-item a.active {
    background-color: rgba(59, 130, 246, 0.2) !important; /* Blue instead of purple */
    color: #60A5FA !important; /* Light blue */
    font-weight: 600;
}

.theme-dark .nav-item a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

.theme-dark .nav-link-button {
    color: rgba(255, 255, 255, 0.85) !important;
}

.theme-dark .nav-link-button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

.theme-dark .mobile-profile-info {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.theme-dark .mobile-profile-name {
    color: white !important;
}

.theme-dark .mobile-profile-email {
    color: rgba(255, 255, 255, 0.6) !important;
}

.theme-dark .mobile-profile-avatar-placeholder {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.5) 0%, rgba(37, 99, 235, 0.5) 100%) !important; /* Blue gradient */
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.theme-dark .mobile-profile-avatar {
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.theme-dark .nav-scrollable::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2) !important;
}

.theme-dark .nav-scrollable::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15) !important;
}

.theme-dark .nav-scrollable::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

.theme-dark .mobile-footer-content,
.theme-dark .desktop-footer-content {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-top-color: rgba(255, 255, 255, 0.15) !important;
}

.theme-dark .mobile-footer-version,
.theme-dark .mobile-footer-build,
.theme-dark .desktop-footer-version,
.theme-dark .desktop-footer-build {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Icon-only mode tooltips - dark theme */
@media (min-width: 641px) and (max-width: 1199px) {
    .theme-dark .nav-section:not(:last-child)::after {
        background: rgba(255, 255, 255, 0.15) !important;
    }

    .theme-dark .nav-item a::after {
        background-color: var(--sf-neutral-700) !important;
        color: white !important;
    }

    .theme-dark .nav-item a::before {
        border-color: transparent var(--sf-neutral-700) transparent transparent !important;
    }
}

/* ============================================================================
   DEFAULT THEME (OS Preference)
   ============================================================================ */

@media (prefers-color-scheme: dark) {
    .theme-default .top-row {
        background: linear-gradient(135deg, #4c1d95 0%, #5b21b6 100%) !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    }

    .theme-default .navbar-brand {
        background-color: rgba(255, 255, 255, 0.95) !important;
        padding: 0.25rem 0.75rem !important;
        border-radius: 0.5rem !important;
        margin: 0.5rem !important;
    }

    .theme-default .navbar-brand img {
        mix-blend-mode: darken !important;
    }

    .theme-default .nav-scrollable {
        background: linear-gradient(135deg, #4c1d95 0%, #5b21b6 100%) !important;
    }

    .theme-default .navbar-toggler {
        background-color: rgba(255, 255, 255, 0.08) !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
    }

    .theme-default .navbar-toggler:hover {
        background-color: rgba(255, 255, 255, 0.15) !important;
        border-color: rgba(255, 255, 255, 0.25) !important;
    }

    .theme-default .nav-section-title {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    .theme-default .nav-section-title:hover {
        background-color: rgba(255, 255, 255, 0.08) !important;
        color: rgba(255, 255, 255, 0.85) !important;
    }

    .theme-default .nav-item a {
        color: var(--sf-neutral-300, #d1d5db) !important;
    }

    .theme-default .nav-item a.active {
        background-color: rgba(139, 92, 246, 0.25) !important;
        color: var(--sf-primary-300, #c4b5fd) !important;
        font-weight: 600;
    }

    .theme-default .nav-item a:hover {
        background-color: rgba(255, 255, 255, 0.08) !important;
        color: var(--sf-neutral-100, #f1f5f9) !important;
    }

    .theme-default .nav-link-button {
        color: var(--sf-neutral-300, #d1d5db) !important;
    }

    .theme-default .nav-link-button:hover {
        background-color: rgba(255, 255, 255, 0.08) !important;
        color: var(--sf-neutral-100, #f1f5f9) !important;
    }

    .theme-default .mobile-profile-info {
        background-color: rgba(255, 255, 255, 0.08) !important;
    }

    .theme-default .mobile-profile-name {
        color: var(--sf-neutral-100, #f1f5f9) !important;
    }

    .theme-default .mobile-profile-email {
        color: rgba(255, 255, 255, 0.55) !important;
    }

    .theme-default .mobile-profile-avatar-placeholder {
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.5) 0%, rgba(124, 58, 237, 0.5) 100%) !important;
        border-color: rgba(255, 255, 255, 0.25) !important;
    }

    .theme-default .mobile-profile-avatar {
        border-color: rgba(255, 255, 255, 0.25) !important;
    }

    .theme-default .nav-scrollable::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.2) !important;
    }

    .theme-default .nav-scrollable::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.15) !important;
    }

    .theme-default .nav-scrollable::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.25) !important;
    }

    .theme-default .mobile-footer-content,
    .theme-default .desktop-footer-content {
        background-color: rgba(0, 0, 0, 0.3) !important;
        border-top-color: rgba(255, 255, 255, 0.15) !important;
    }

    .theme-default .mobile-footer-version,
    .theme-default .mobile-footer-build,
    .theme-default .desktop-footer-version,
    .theme-default .desktop-footer-build {
        color: rgba(255, 255, 255, 0.8) !important;
    }

    /* Icon-only mode tooltips */
    @media (min-width: 641px) and (max-width: 1199px) {
        .theme-default .nav-section:not(:last-child)::after {
            background: rgba(255, 255, 255, 0.15) !important;
        }

        .theme-default .nav-item a::after {
            background-color: var(--sf-neutral-700) !important;
            color: white !important;
        }

        .theme-default .nav-item a::before {
            border-color: transparent var(--sf-neutral-700) transparent transparent !important;
        }
    }
}