/* ═══════════════════════════════════════════════════════════════════════
   SAIB — Sprint 22
   Rooster: maandraster, statuskleuren en lijstweergave

   Additief bestand: laden ná alle eerdere saib-lagen.
   Bewust geen externe agendabibliotheek. Het raster is een CSS-grid van
   zeven kolommen, dus het past in de huisstijl en voegt geen nieuwe
   afhankelijkheid toe.
   ═══════════════════════════════════════════════════════════════════════ */

.saib-rooster-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.saib-rooster {
    display: grid;
    grid-template-columns: repeat(7, minmax(92px, 1fr));
    gap: 1px;
    background: var(--border-sub);
    border: 1px solid var(--border-sub);
    border-radius: 10px;
    overflow: hidden;
    min-width: 660px;
}

.saib-rooster-kop {
    background: var(--navy-mid);
    color: var(--gold);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    padding: 8px 4px;
}

.saib-rooster-dag {
    background: var(--navy);
    min-height: 92px;
    padding: 5px 5px 7px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.saib-rooster-dag.is-buiten {
    background: var(--navy-mid);
    opacity: 0.45;
}

.saib-rooster-dag.is-vandaag {
    background: var(--gold-dim);
    box-shadow: inset 0 0 0 1px var(--gold);
}

.saib-rooster-datum {
    font-size: 11px;
    font-weight: 700;
    color: var(--white-dim);
    margin-bottom: 1px;
}

.saib-rooster-dag.is-vandaag .saib-rooster-datum {
    color: var(--gold);
}

/* Eén dienst in een dagvakje */
.saib-rooster-item {
    font-size: 10px;
    line-height: 1.35;
    padding: 3px 5px;
    border-radius: 4px;
    border-left: 3px solid var(--gold);
    background: var(--navy-light);
    color: var(--saib-white);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.saib-rooster-tijd {
    font-weight: 700;
    color: var(--gold);
    margin-right: 3px;
}

.saib-rooster-meer {
    font-size: 9px;
    color: var(--white-dim);
    padding-left: 5px;
}

/* Stip in de legenda en de lijst */
.saib-rooster-stip {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--gold);
}

/* ── Statuskleuren ─────────────────────────────────────────────────────
   Dezelfde klassenamen worden gebruikt voor het blokje in het raster,
   de stip in de lijst en de legenda. Eén plek om een kleur te wijzigen. */

.saib-rooster-item.is-gepland     { border-left-color: var(--gold); }
.saib-rooster-stip.is-gepland     { background: var(--gold); }

.saib-rooster-item.is-ontbreekt   { border-left-color: #E2A03F; }
.saib-rooster-stip.is-ontbreekt   { background: #E2A03F; }

.saib-rooster-item.is-concept     { border-left-color: #8B93A7; }
.saib-rooster-stip.is-concept     { background: #8B93A7; }

.saib-rooster-item.is-ingediend   { border-left-color: #4A9DD8; }
.saib-rooster-stip.is-ingediend   { background: #4A9DD8; }

.saib-rooster-item.is-goed        { border-left-color: #3FA96B; }
.saib-rooster-stip.is-goed        { background: #3FA96B; }

.saib-rooster-item.is-afgekeurd   { border-left-color: var(--danger); }
.saib-rooster-stip.is-afgekeurd   { background: var(--danger); }

/* Rij in de lijst die vandaag is */
.saib-rooster-vandaag-rij {
    border-left: 3px solid var(--gold);
}

/* ── Mobiel ────────────────────────────────────────────────────────────
   Onder 768px is een maandraster op een telefoon niet prettig leesbaar.
   Het raster blijft beschikbaar via horizontaal schuiven, maar de
   dagvakjes worden compacter zodat er meer op het scherm past. De lijst
   eronder is op een telefoon de primaire weergave. */

@media (max-width: 767.98px) {

    .saib-rooster {
        min-width: 620px;
    }

    .saib-rooster-dag {
        min-height: 74px;
        padding: 4px;
    }

    .saib-rooster-item {
        font-size: 9px;
        padding: 2px 4px;
    }
}