/* ============================================================
   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; }

/* Het oogje achter de tijd: deze afspraak staat op openbaar. Alleen
   zichtbaar voor wie is ingelogd; een bezoeker zonder login ziet van een
   niet-openbare afspraak toch alleen de standaardtekst. Geen eigen kleur:
   de tekst in een blok is wit op de categoriekleur, dus erven volstaat. */
.ev-public { opacity: .85; }

/* ============================================================
   Lijstweergave (jaarplanning): dagen verticaal, categorieen
   horizontaal.

   Bewust een eigen prefix .lst-  -  httpdocs/js/app.js bindt
   "klik = nieuwe afspraak" aan .cal-grid .cal-day, en die
   klassen mogen hier dus niet opduiken.
   ============================================================ */

/* De scroll-container MOET een expliciete hoogte hebben: zonder
   hoogtebegrenzing scrollt de pagina in plaats van de container
   en pakt position:sticky;top:0 nooit. */
.lst-wrap {
    /* Breedtes van de drie vaste linkerkolommen; de sticky-offsets en de
       min-width van de tabel worden hieruit berekend, zodat er maar een
       plek is waar deze maten staan. */
    --lst-w-iso: 54px;
    --lst-w-nr:  54px;
    --lst-w-day: 104px;
    --lst-w-cat: 170px;

    /* Lijnkleuren, gelijk aan het weekoverzicht (#dee2e6 = de uurlijn) */
    --lst-line:       #dee2e6;   /* kolom- en dagscheiding */
    --lst-line-week:  #adb5bd;   /* scheiding tussen weken */
    --lst-line-month: #6c757d;   /* scheiding bij een maandgrens */

    max-height: calc(100vh - 190px);
    overflow: auto;
    background: #fff;
}

.lst-table {
    /* separate + inset box-shadows: met border-collapse verdwijnen de
       randen zodra cellen onder een sticky kolom door schuiven. */
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    width: 100%;
    margin: 0;
    /* Zonder min-width perst table-layout:fixed de kolommen samen tot in
       de container in plaats van horizontaal te scrollen. --lst-cols wordt
       inline gezet met het aantal categoriekolommen. */
    min-width: calc(var(--lst-w-iso) + var(--lst-w-nr) + var(--lst-w-day)
                    + var(--lst-cols) * var(--lst-w-cat));
}

/* Rasterlijnen: elke cel tekent zijn eigen rechter- en onderlijn, in
   dezelfde tint als de uurlijnen van het weekoverzicht. Als inset-shadow
   in plaats van border, zodat de lijn de sticky cellen meeschuift en de
   rijhoogte niet verspringt. */
.lst-table th,
.lst-table td {
    box-shadow: inset -1px 0 0 var(--lst-line), inset 0 -1px 0 var(--lst-line);
    padding: 3px 6px;
    vertical-align: top;
    font-size: .78rem;
    font-weight: 400;
}

/* Sticky kopregel en linkerkolommen. Ondoorzichtige achtergronden zijn
   verplicht, anders schuift de inhoud er zichtbaar onderdoor. */
.lst-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f8f9fa;
    vertical-align: bottom;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: inset -1px 0 0 var(--lst-line), inset 0 -2px 0 var(--lst-line-week);
}

.lst-table .lst-iso,
.lst-table .lst-nr,
.lst-table .lst-day {
    position: sticky;
    z-index: 2;
}

.lst-table .lst-iso {
    left: 0;
    background: #f8f9fa;
    text-align: center;
    vertical-align: middle;
}

.lst-table .lst-nr {
    left: var(--lst-w-iso);
    background: #f8f9fa;
    text-align: center;
    vertical-align: middle;
}

.lst-table .lst-day {
    left: calc(var(--lst-w-iso) + var(--lst-w-nr));
    background: #fff;
    white-space: nowrap;
    /* Duidelijke afsluiting van het vaste blok links */
    box-shadow: inset -2px 0 0 var(--lst-line), inset 0 -1px 0 var(--lst-line);
}

/* De hoekcellen liggen boven beide sticky assen. */
.lst-table thead .lst-iso,
.lst-table thead .lst-nr,
.lst-table thead .lst-day { z-index: 4; }

.lst-cathead .cal-swatch {
    width: 10px;
    height: 10px;
    vertical-align: baseline;
}

.lst-iso-num {
    font-size: .95rem;
    font-weight: 600;
    color: #495057;
}

.lst-nr-num {
    font-size: 1.05rem;
    font-weight: 600;
    color: #0d6efd;
}

/* Week voor de start van de alternatieve nummering: die heeft geen nummer. */
.lst-table .lst-nr.is-unnumbered { background: #f1f3f5; }

.lst-dayname {
    display: inline-block;
    width: 1.7em;
    color: #6c757d;
}

.lst-daydate { font-weight: 600; }

/* Vandaag / weekend / buiten het agendajaar - zelfde tinten als het
   weekoverzicht. Ook op de sticky datumkolom zetten, die is ondoorzichtig. */
.lst-table .is-weekend { background: #f1f3f5; }
.lst-table .is-today   { background: #e7f1ff; }
.lst-table .is-today.lst-day .lst-daydate { color: #0d6efd; }
.lst-table .is-outside { background: #fbfbfc; color: #adb5bd; }

.lst-cell { height: 32px; }   /* voorkomt dat lege rijen dichtklappen */

/* Scheidingslijn per week en bij een maandgrens. Echte randen kunnen hier
   wel: met border-collapse:separate tekent elke cel zijn eigen rand, dus
   die verdwijnt niet onder een sticky kolom. De maandregel staat na de
   weekregel, zodat een maandgrens die op maandag valt de maandlijn krijgt. */
.lst-weekstart > th,
.lst-weekstart > td { border-top: 2px solid var(--lst-line-week); }

.lst-monthstart > th,
.lst-monthstart > td { border-top: 2px solid var(--lst-line-month); }

/* Een afspraak in een cel: zelfde blokjesstijl als .cal-event in het
   weekoverzicht. Meerdere afspraken in dezelfde cel komen onder elkaar,
   niet naast elkaar zoals in het weekraster. */
.lst-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    color: #fff;
    border-radius: 4px;
    padding: 2px 5px;
    margin-bottom: 3px;
    font-size: .74rem;
    line-height: 1.15;
    text-decoration: none;
    border: 1px solid rgba(0, 0, 0, .12);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    overflow-wrap: anywhere;   /* bij table-layout:fixed blaast een lange titel anders de rij op */
    transition: filter .12s ease;
}

.lst-item:last-child { margin-bottom: 0; }

.lst-item:hover { filter: brightness(.92); color: #fff; }

.lst-item-time { font-size: .68rem; opacity: .9; }
.lst-item-title { font-weight: 600; }

/* ---- Modal in de wachtstand -------------------------------- */
/* De bewerk-modal gaat meteen open en haalt de afspraak daarna pas op
   (GET /api/events/<id>). Zolang dat loopt zijn de velden nog leeg: dat
   moet te zien zijn, anders lijkt het een afspraak zonder gegevens. */
#event-form.is-loading .modal-body {
    opacity: .45;
    pointer-events: none;
}

/* De modal staat in twee kolommen. Bij veel categorieen zou de linker
   daardoor veel langer worden dan de rechter; een eigen schuifbalk houdt
   de twee in evenwicht. */
#event-modal .ev-cat-list {
    max-height: 11rem;
    overflow-y: auto;
}

/* Onder de lg-breakpoint staat de zijbalk boven de tabel; de aftrek van
   190px klopt dan niet meer, dus een vaste fractie van het scherm. */
@media (max-width: 991.98px) {
    .lst-wrap { max-height: 80vh; }
}

/* Geen printopmaak, alleen een vangnet: zonder dit print de pagina
   precies een schermvulling. */
@media print {
    .lst-wrap { max-height: none; overflow: visible; }
}