/* Plugin agenda: overzicht (/agenda), shortcode [agenda] en het bolletje per bron in het beheer */
.agenda-balk { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.agenda-filter { display: flex; flex-wrap: wrap; gap: .4rem; }
.agenda-filter a { padding: .25rem .75rem; border: 1px solid var(--agenda-kleur, #6c757d); border-radius: 999px; text-decoration: none; color: inherit; font-size: .9rem; }
.agenda-filter a.actief { background: var(--agenda-kleur, #6c757d); color: #fff; }
.agenda-abonneer { font-size: .9rem; }
.agenda-maandkop { font-size: 1.25rem; text-transform: capitalize; margin: 1.75rem 0 .75rem; padding-bottom: .25rem; border-bottom: 1px solid rgba(127, 127, 127, .3); }
.agenda-lijst { list-style: none; margin: 0; padding: 0; }
.agenda-item { display: flex; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid rgba(127, 127, 127, .15); }
.agenda-item:last-child { border-bottom: 0; }
.agenda-datum { flex: 0 0 3.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 3.5rem; border-radius: .5rem; background: var(--agenda-kleur, #2e7d32); color: #fff; line-height: 1; }
.agenda-dag { font-size: 1.4rem; font-weight: 700; }
.agenda-maand { font-size: .75rem; text-transform: uppercase; margin-top: .15rem; }
.agenda-tekst { min-width: 0; }
.agenda-titel { font-size: 1.05rem; margin: 0 0 .2rem; }
.agenda-wanneer { margin: 0; font-size: .9rem; opacity: .8; }
.agenda-links { margin: .3rem 0 0; font-size: .9rem; }
.agenda-bron { opacity: .8; }
.agenda-beschrijving { margin: .35rem 0 0; font-size: .95rem; overflow-wrap: anywhere; }
.agenda-leeg { opacity: .8; }
.agenda-meer { margin-top: .5rem; }
.agenda-paginering { display: flex; justify-content: center; gap: 1.5rem; margin-top: 2rem; }
.agenda-stip { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .35rem; vertical-align: middle; }

/* ------------------------------------------------------------------
   Kalender (/agenda): zijbalk links, werkbalk en dag/week/maand/jaar (classes/AgendaKalender.php)
   Kleuren uit Bootstrap 5.3 (licht en donker); --agenda-kleur = kleur van de bron */
.agenda-kalender { --agenda-rand: var(--bs-border-color, rgba(127, 127, 127, .3)); --agenda-zacht: var(--bs-tertiary-bg, rgba(127, 127, 127, .08)); --agenda-accent: var(--bs-primary, #2e7d32); --agenda-uur: 3rem; max-width: 1600px; }
.agenda-uit { display: none !important; }
.agenda-app { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.agenda-knop { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border: 1px solid var(--agenda-rand); border-radius: .5rem; background: var(--bs-body-bg, #fff); color: inherit; text-decoration: none; font-size: .9rem; line-height: 1.3; cursor: pointer; }
.agenda-knop:hover { background: var(--agenda-zacht); color: inherit; }

/* Zijbalk */
.agenda-zij { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 1rem; }
.agenda-knop-vandaag-zij { justify-content: center; font-weight: 600; }
.agenda-zijmaand-kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: .35rem; font-size: .95rem; }
.agenda-zijmaand-kop strong::first-letter, .agenda-periode::first-letter, .agenda-jaarmaand h2 a::first-letter { text-transform: uppercase; }
.agenda-zijmaand-kop a { display: inline-block; padding: .1rem .45rem; color: inherit; border-radius: .35rem; }
.agenda-zijmaand-kop a:hover { background: var(--agenda-zacht); }
.agenda-mini { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .8rem; text-align: center; }
.agenda-mini th { font-weight: 600; opacity: .6; padding: .15rem 0; text-transform: uppercase; }
.agenda-mini td { padding: 1px; }
.agenda-mini td a { display: block; position: relative; padding: .2rem 0; border-radius: 999px; color: inherit; text-decoration: none; }
.agenda-mini td a:hover { background: var(--agenda-zacht); }
.agenda-mini td.agenda-gekozen { background: color-mix(in srgb, var(--agenda-accent) 14%, transparent); }
.agenda-mini a.agenda-datum-gekozen { outline: 2px solid var(--agenda-accent); outline-offset: -2px; }
.agenda-mini a.agenda-vandaag { background: var(--agenda-accent); color: #fff; font-weight: 700; }
.agenda-zijblok summary { font-weight: 600; font-size: .95rem; margin-bottom: .4rem; cursor: pointer; }
.agenda-bronnen { display: flex; flex-direction: column; gap: .15rem; }
.agenda-bronkeuze { display: flex; align-items: center; gap: .55rem; padding: .3rem .4rem; border-radius: .4rem; cursor: pointer; font-size: .92rem; }
.agenda-bronkeuze:hover { background: var(--agenda-zacht); }
.agenda-bronkeuze input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.agenda-vinkje { flex: 0 0 1.05rem; height: 1.05rem; border: 2px solid var(--agenda-kleur); border-radius: .3rem; position: relative; }
.agenda-bronkeuze input:checked + .agenda-vinkje { background: var(--agenda-kleur); }
.agenda-bronkeuze input:checked + .agenda-vinkje::after { content: ""; position: absolute; left: .27rem; top: .05rem; width: .3rem; height: .6rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.agenda-bronkeuze input:focus-visible + .agenda-vinkje { outline: 2px solid var(--agenda-accent); outline-offset: 2px; }
.agenda-bronnaam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-toepassen { margin-top: .4rem; align-self: flex-start; }
.agenda-js .agenda-toepassen { display: none; }

/* Werkbalk */
.agenda-werkbalk { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.agenda-nav { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.agenda-pijl { padding: .35rem .6rem; }
.agenda-periode { font-size: 1.3rem; margin: 0 0 0 .5rem; }
.agenda-weergaven { display: inline-flex; border: 1px solid var(--agenda-rand); border-radius: .5rem; overflow: hidden; }
.agenda-weergaven a { padding: .35rem .85rem; color: inherit; text-decoration: none; font-size: .9rem; }
.agenda-weergaven a + a { border-left: 1px solid var(--agenda-rand); }
.agenda-weergaven a:hover { background: var(--agenda-zacht); }
.agenda-weergaven a.actief { background: var(--agenda-accent); color: #fff; }

/* Activiteit in maand en hele-dag-rij */
.agenda-chip { display: flex; align-items: center; gap: .3rem; min-width: 0; padding: .05rem .35rem; border-radius: .3rem; font-size: .78rem; line-height: 1.35; color: inherit; text-decoration: none; white-space: nowrap; overflow: hidden; }
.agenda-chip:hover { background: color-mix(in srgb, var(--agenda-kleur) 15%, transparent); color: inherit; }
.agenda-chip > span { overflow: hidden; text-overflow: ellipsis; }
.agenda-chip time { opacity: .75; flex: none; }
.agenda-stipje { flex: 0 0 .5rem; height: .5rem; border-radius: 50%; background: var(--agenda-kleur); }
.agenda-balkje { background: var(--agenda-kleur); color: #fff; font-weight: 500; }
.agenda-balkje:hover { background: var(--agenda-kleur); color: #fff; filter: brightness(1.1); }

/* Maand */
.agenda-maandraster { border: 1px solid var(--agenda-rand); border-radius: .6rem; overflow: hidden; }
.agenda-weekdagen, .agenda-weekrij { display: grid; grid-template-columns: 2rem repeat(7, minmax(0, 1fr)); }
.agenda-weeknr { font-size: .7rem; font-weight: 600; opacity: .55; text-align: center; color: inherit; text-decoration: none; }
a.agenda-weeknr { padding-top: .35rem; }
a.agenda-weeknr:hover { opacity: 1; background: var(--agenda-zacht); color: inherit; }
.agenda-weeknr + .agenda-cel { border-left: 1px solid var(--agenda-rand); }
.agenda-mini .agenda-weeknr { width: 1.6rem; font-weight: 400; text-transform: none; }
.agenda-mini tbody .agenda-weeknr { vertical-align: top; padding-top: calc(.2rem + 1px); line-height: inherit; }
.agenda-weekdagen div { padding: .4rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; opacity: .7; text-align: center; border-bottom: 1px solid var(--agenda-rand); }
.agenda-weekrij + .agenda-weekrij { border-top: 1px solid var(--agenda-rand); }
.agenda-cel { min-height: 7.5rem; padding: .25rem; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agenda-cel + .agenda-cel { border-left: 1px solid var(--agenda-rand); }
.agenda-weekend { background: color-mix(in srgb, var(--agenda-zacht) 60%, transparent); }
.agenda-buiten > .agenda-celdag { opacity: .45; }
.agenda-buiten .agenda-chip { opacity: .7; }
.agenda-celdag { align-self: flex-start; min-width: 1.6rem; padding: .05rem .4rem; border-radius: 999px; font-size: .82rem; font-weight: 600; text-align: center; color: inherit; text-decoration: none; }
.agenda-celdag:hover { background: var(--agenda-zacht); color: inherit; }
.agenda-cel.agenda-vandaag > .agenda-celdag { background: var(--agenda-accent); color: #fff; }
.agenda-extra { display: none; }
.agenda-meerdag { white-space: nowrap; font-size: .75rem; font-weight: 600; padding: 0 .35rem; color: inherit; opacity: .75; text-decoration: none; }
.agenda-meerdag:hover { opacity: 1; text-decoration: underline; }

/* Week en dag: tijdraster */
.agenda-tijdraster { --agenda-kolommen: 7; border: 1px solid var(--agenda-rand); border-radius: .6rem; overflow: hidden; }
.agenda-kolommen-1 { --agenda-kolommen: 1; }
.agenda-tr-kop, .agenda-tr-heledag, .agenda-tr-body { display: grid; grid-template-columns: 3.5rem repeat(var(--agenda-kolommen), minmax(0, 1fr)); }
.agenda-tr-kop { border-bottom: 1px solid var(--agenda-rand); }
.agenda-tr-dag { display: flex; flex-direction: column; align-items: center; padding: .4rem 0; color: inherit; text-decoration: none; border-left: 1px solid var(--agenda-rand); }
.agenda-tr-dag:hover { background: var(--agenda-zacht); color: inherit; }
.agenda-tr-dag span { font-size: .72rem; text-transform: uppercase; opacity: .7; }
.agenda-tr-dag strong { font-size: 1.25rem; line-height: 1.2; width: 2.1rem; height: 2.1rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.agenda-tr-dag.agenda-vandaag strong { background: var(--agenda-accent); color: #fff; }
.agenda-tr-hoek { font-size: .7rem; opacity: .6; padding: .3rem .25rem; text-align: right; }
.agenda-tr-heledag { border-bottom: 1px solid var(--agenda-rand); }
.agenda-tr-heledagcel { border-left: 1px solid var(--agenda-rand); padding: 2px; display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 1.6rem; }
.agenda-tr-scroll { max-height: 70vh; overflow-y: auto; }
.agenda-tr-body { position: relative; height: calc(24 * var(--agenda-uur)); background-image: linear-gradient(to bottom, var(--agenda-rand) 1px, transparent 1px); background-size: 100% var(--agenda-uur); }
.agenda-tr-uren { position: relative; }
.agenda-tr-uren span { position: absolute; right: .4rem; transform: translateY(-50%); font-size: .7rem; opacity: .6; }
.agenda-tr-kolom { position: relative; border-left: 1px solid var(--agenda-rand); }
.agenda-tr-kolom.agenda-vandaag { background: color-mix(in srgb, var(--agenda-accent) 5%, transparent); }
.agenda-blok { position: absolute; box-sizing: border-box; padding: .15rem .35rem; border: 1px solid var(--bs-body-bg, #fff); border-left: 3px solid var(--agenda-kleur); border-radius: .3rem; background: color-mix(in srgb, var(--agenda-kleur) 22%, var(--bs-body-bg, #fff)); color: inherit; text-decoration: none; font-size: .75rem; line-height: 1.25; overflow: hidden; z-index: 1; }
.agenda-blok:hover { z-index: 3; background: color-mix(in srgb, var(--agenda-kleur) 35%, var(--bs-body-bg, #fff)); color: inherit; }
.agenda-blok strong, .agenda-blok span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-blok span { opacity: .8; }
.agenda-nu { position: absolute; left: 0; right: 0; height: 2px; background: #e53935; z-index: 2; pointer-events: none; }
.agenda-nu::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #e53935; }
.agenda-daglijst { margin-top: 1.5rem; }
.agenda-dagleeg { margin-top: 1rem; }

/* Jaar */
.agenda-jaar { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1.5rem 2rem; }
.agenda-jaarmaand h2 { font-size: 1rem; margin: 0 0 .4rem; }
.agenda-jaarmaand h2 a { display: inline-block; color: inherit; text-decoration: none; }
.agenda-jaarmaand h2 a:hover { text-decoration: underline; }
.agenda-jaar .agenda-mini td a, .agenda-zijmaand .agenda-mini td a { padding-bottom: .45rem; }
.agenda-stippen { position: absolute; left: 0; right: 0; bottom: .1rem; display: flex; justify-content: center; gap: 2px; }
.agenda-stippen i { width: 4px; height: 4px; border-radius: 50%; background: var(--agenda-kleur); }
.agenda-mini a.agenda-vandaag .agenda-stippen i { background: #fff; }

/* Venster met details */
.agenda-dialoog { width: min(36rem, calc(100vw - 2rem)); max-height: calc(100vh - 4rem); padding: 1.25rem 1.5rem; border: 0; border-radius: .75rem; background: var(--bs-body-bg, #fff); color: var(--bs-body-color, inherit); box-shadow: 0 1rem 3rem rgba(0, 0, 0, .3); }
.agenda-dialoog::backdrop { background: rgba(0, 0, 0, .35); }
.agenda-dialoog .agenda-item { border: 0; padding: 0; }
.agenda-sluit { position: absolute; top: .4rem; right: .6rem; border: 0; background: none; color: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; opacity: .7; }
.agenda-sluit:hover { opacity: 1; }
.agenda-daglijst .agenda-item:target { background: color-mix(in srgb, var(--agenda-kleur) 12%, transparent); }

/* Maand: de hele dag (assets/agenda.js); op een smal scherm als lijst onder de kalender, anders in het venster */
.agenda-js .agenda-cel { cursor: pointer; }
.agenda-js .agenda-cel:hover { background: color-mix(in srgb, var(--agenda-zacht) 70%, transparent); }
.agenda-cel.agenda-cel-gekozen { background: color-mix(in srgb, var(--agenda-accent) 12%, transparent); }
.agenda-dagkop { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .5rem; }
.agenda-dagkop h3 { font-size: 1.1rem; margin: 0; }
.agenda-dagkop h3::first-letter { text-transform: uppercase; }
.agenda-dagkop a { font-size: .9rem; white-space: nowrap; }
.agenda-dagpaneel { margin-top: 1rem; padding-top: .75rem; scroll-margin-top: 1rem; }
.agenda-dialoog .agenda-dagkop { padding-right: 2rem; }
.agenda-dialoog .agenda-lijst .agenda-item + .agenda-item { border-top: 1px solid rgba(127, 127, 127, .15); padding-top: .75rem; margin-top: .75rem; }

/* Smal scherm: zijbalk boven, week horizontaal schuiven, maand compacter */
@media (max-width: 991.98px) {
    .agenda-app { grid-template-columns: minmax(0, 1fr); }
    .agenda-zij { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: start; }
    .agenda-knop-vandaag-zij { display: none; }
}
@media (max-width: 767.98px) {
    .agenda-zijmaand { display: none; }
    .agenda-periode { font-size: 1.1rem; flex-basis: 100%; margin: .25rem 0 0; }
    .agenda-weergaven a { padding: .35rem .6rem; }
    .agenda-cel { min-height: 4.5rem; padding: 2px; }
    .agenda-weekdagen, .agenda-weekrij { grid-template-columns: 1.4rem repeat(7, minmax(0, 1fr)); }
    .agenda-weeknr { font-size: .6rem; }
    .agenda-chip time, .agenda-chip .agenda-stipje { display: none; }
    .agenda-chip { font-size: .68rem; padding: 0 .2rem; }
    .agenda-chip:not(.agenda-balkje) { border-left: 3px solid var(--agenda-kleur); border-radius: 0; }
    .agenda-tijdraster:not(.agenda-kolommen-1) { overflow-x: auto; }
    .agenda-tijdraster:not(.agenda-kolommen-1) > div { min-width: 44rem; }
    .agenda-tr-scroll { max-height: none; }

    /* Eerst de kalender, dan de agenda's en abonneren; knoppen groot genoeg voor een vinger */
    .agenda-kalender h1 { font-size: 1.6rem; }
    .agenda-zij { order: 2; }
    .agenda-hoofd { order: 1; }
    .agenda-werkbalk { gap: .5rem; }
    .agenda-nav { width: 100%; }
    .agenda-knop { padding: .5rem .9rem; }
    .agenda-pijl { padding: .5rem .8rem; }
    .agenda-weergaven { display: flex; width: 100%; }
    .agenda-weergaven a { flex: 1; text-align: center; padding: .5rem .25rem; }
    .agenda-bronkeuze { padding: .5rem .4rem; }

    /* Maand: per dag gekleurde stipjes (met JavaScript), de activiteiten zelf in de lijst eronder */
    .agenda-js .agenda-cel { min-height: 3.6rem; flex-flow: row wrap; align-content: flex-start; justify-content: center; gap: 3px; padding: 3px 1px; }
    .agenda-js .agenda-celdag { flex: 0 0 2rem; align-self: auto; margin: 0 calc(50% - 1rem); padding: .15rem 0; }   /* eigen regel, stipjes eronder */
    .agenda-js .agenda-cel .agenda-chip { flex: none; width: .45rem; height: .45rem; padding: 0; border: 0; border-radius: 50%; background: var(--agenda-kleur); font-size: 0; }
    .agenda-js .agenda-cel .agenda-chip > * { display: none; }
    .agenda-js .agenda-cel .agenda-extra { display: none; }
    .agenda-js .agenda-meerdag { flex-basis: 100%; text-align: center; font-size: .62rem; padding: 0; pointer-events: none; }
    .agenda-js .agenda-buiten .agenda-chip { opacity: .45; }

    /* Venster als paneel van onderen */
    .agenda-dialoog { width: 100vw; max-width: 100vw; max-height: 85vh; margin: auto 0 0; padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom)); border-radius: 1rem 1rem 0 0; }
}