/* ============================================================
   Week Agenda - eigen styling bovenop Bootstrap
   ============================================================ */

body {
    background-color: #f5f6f8;
}

/* Kleurvierkantje voor een categorie */
.cal-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    flex: 0 0 auto;
    border: 1px solid rgba(0, 0, 0, .15);
}

/* ---- Het weekraster ---------------------------------------- */
.cal-grid {
    display: grid;
    /* grid-template-columns wordt inline gezet (60px + 7 dagen) */
    overflow: hidden;
    background: #fff;
}

/* Kopregel */
.cal-corner {
    border-bottom: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    background: #f8f9fa;
}

.cal-dayhead {
    text-align: center;
    padding: 6px 4px;
    border-bottom: 1px solid #dee2e6;
    border-right: 1px solid #f1f3f5;
    background: #f8f9fa;
}

.cal-dayhead .cal-dayname {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
}

.cal-dayhead .cal-daynum {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
}

.cal-dayhead.is-today {
    background: #e7f1ff;
}

.cal-dayhead.is-today .cal-daynum {
    color: #0d6efd;
}

.cal-dayhead.is-weekend {
    background: #f1f3f5;
}

/* Hele-dag-rij */
.cal-gutterlabel {
    font-size: .7rem;
    color: #6c757d;
    text-align: right;
    padding: 4px 6px;
    border-bottom: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    background: #f8f9fa;
}

.cal-allday {
    min-height: 28px;
    padding: 2px;
    border-bottom: 1px solid #dee2e6;
    border-right: 1px solid #f1f3f5;
}

.cal-allday.is-today { background: #e7f1ff; }
.cal-allday.is-weekend { background: #fafbfc; }

.cal-allday-item {
    display: block;
    color: #fff;
    font-size: .75rem;
    border-radius: 3px;
    padding: 1px 6px;
    margin-bottom: 2px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tijdkolom (uurlabels) */
.cal-gutter {
    position: relative;
    border-right: 1px solid #dee2e6;
    background: #f8f9fa;
}

.cal-hour {
    position: absolute;
    right: 6px;
    transform: translateY(-50%);
    font-size: .72rem;
    color: #868e96;
}

/* Dagkolommen */
.cal-day {
    position: relative;
    border-right: 1px solid #f1f3f5;
    cursor: pointer;
    /* Lijnen: eerst de dikkere uurlijn, daarna de halfuurlijn */
    background-image:
        repeating-linear-gradient(to bottom, #dee2e6 0, #dee2e6 1px, transparent 1px, transparent calc(var(--slot) * 2)),
        repeating-linear-gradient(to bottom, #eef0f2 0, #eef0f2 1px, transparent 1px, transparent var(--slot));
}

.cal-day.is-today { background-color: #f4f9ff; }
.cal-day.is-weekend { background-color: #fcfcfd; }

/* Een afspraakblok */
.cal-event {
    position: absolute;
    box-sizing: border-box;
    color: #fff;
    border-radius: 4px;
    padding: 2px 5px;
    font-size: .74rem;
    line-height: 1.15;
    overflow: hidden;
    text-decoration: none;
    border: 1px solid rgba(0, 0, 0, .12);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    display: flex;
    flex-direction: column;
    gap: 1px;
    transition: filter .12s ease;
}

.cal-event:hover {
    filter: brightness(.92);
    color: #fff;
    z-index: 20;
}

.cal-event-time { font-size: .68rem; opacity: .9; }
.cal-event-title { font-weight: 600; }
.cal-event-loc { font-size: .68rem; opacity: .9; }