/* 1. DARK MODE overrides */
body.dark-mode {
    background-color: #0b1513 !important; /* Sehr dunkles Grün/Schwarz passend zu #2C554D */
    color: #E2E8F0 !important;
}

body.dark-mode .bg-\[\#F6F4EE\], 
body.dark-mode .bg-\[\#F6F4EE\]\/90 {
    background-color: #12211e !important;
}

body.dark-mode .bg-\[\#F6F4EE\]\/50 {
    background-color: rgba(18, 33, 30, 0.5) !important;
}

body.dark-mode .bg-white {
    background-color: #162925 !important;
    color: #e2e8f0 !important;
}

body.dark-mode .text-\[\#2C554D\] {
    color: #cbd5e1 !important;
}

body.dark-mode #daily-quote-text {
    color: #C4A464 !important;
}

body.dark-mode .text-\[\#2C554D\]\/70,
body.dark-mode .text-\[\#2C554D\]\/50,
body.dark-mode .text-\[\#2C554D\]\/80 {
    color: #94a3b8 !important;
}

body.dark-mode .border-\[\#C4A464\]\/30,
body.dark-mode .border-\[\#C4A464\]\/20,
body.dark-mode .border-\[\#C4A464\]\/10 {
    border-color: rgba(196, 164, 100, 0.4) !important;
}

/* Modals & Inputs in Dark Mode */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background-color: #1f3833 !important;
    color: #e2e8f0 !important;
    border-color: rgba(196, 164, 100, 0.4) !important;
}

/* Day View Grid Lines */
body.dark-mode .border-gray-200 { border-color: #1a302b !important; }
body.dark-mode .border-gray-100 { border-color: #12211e !important; }
body.dark-mode .bg-gray-50 { background-color: #0b1513 !important; }

/* Logo in Dark Mode anpassen (Invert + Gold Filter + Screen Blend Mode um weiß zu entfernen) */
body.dark-mode img[src*="logo"] {
    filter: invert(1) sepia(1) saturate(5) hue-rotate(5deg) !important;
    mix-blend-mode: screen !important;
}

/* 2. LOADER SPINNER OVERLAY */
#global-loader {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#global-loader .spinner {
    border: 4px solid rgba(196, 164, 100, 0.3);
    border-top: 4px solid #C4A464;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }