/* --- DARK MODE CONFIGURATIE (VARIABELEN) --- */
:root {
    /* Standaard Kleuren (Light Mode) */
    --loader-overlay-bg: rgba(255, 255, 255, 0.7);
    --spinner-border: rgba(0, 0, 0, 0.1);
    --spinner-active: #54c3ea;
    --loader-text: #2c3e50;
}

/* Systeem-gebaseerde Dark Mode */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode-forced) {
        --loader-overlay-bg: rgba(10, 15, 20, 0.8); /* Diepe navy/zwart overlay */
        --spinner-border: rgba(255, 255, 255, 0.1);
        --spinner-active: #3BA7D9; /* Je nieuwe Dark Mode primary */
        --loader-text: #f1f1f1;
    }
}

/* Handmatige Dark Mode (via settings gekozen) */
body.dark-mode {
    --loader-overlay-bg: rgba(10, 15, 20, 0.8);
    --spinner-border: rgba(255, 255, 255, 0.1);
    --spinner-active: #3BA7D9;
    --loader-text: #f1f1f1;
}

/* --- SPINNER BASIS --- */
.spinner {
    display: inline-block;
    border: 3px solid var(--spinner-border);
    border-top-color: var(--spinner-active); /* Zorgt voor het draaiende effect */
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    transition: border-color 0.3s ease;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- LOADING CONTAINERS --- */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px;
    width: 100%;
    color: var(--loader-text);
    transition: color 0.3s ease;
}

/* --- AGENDA / OVERLAY LOADERS --- */
.agenda-loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--loader-overlay-bg);
    backdrop-filter: blur(2px);            /* Vervaagt de oude data */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100;
    border-radius: 15px;
    animation: fadeInLoad 0.3s ease;
    color: var(--loader-text);
    transition: background 0.3s ease;
}

.agenda-loader-overlay.fade-out {
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none; /* Zorg dat je al op items kunt klikken tijdens de fade */
}

/* --- ANIMATIES --- */
@keyframes fadeInLoad {
    from { opacity: 0; }
    to { opacity: 1; }
}