/* Menu "Agenda en termijnen": uitklapmenu, kalender, takenoverzicht, lijsten en afhandelen. Compact. */

/* ---------- uitklapmenu in de bovenbalk ---------- */
.balk nav details.menu { position: static; }
.balk nav details.menu summary { list-style: none; cursor: pointer; color: var(--balk-tekst); opacity: .85; white-space: nowrap; }
.balk nav details.menu summary::-webkit-details-marker { display: none; }
.balk nav details.menu summary:hover, .balk nav details.menu summary.actief, .balk nav details.menu[open] summary {
  opacity: 1; border-bottom: 2px solid var(--accent); }
.balk nav details.menu .uitklap { position: fixed; z-index: 50; min-width: 220px; background: var(--vlak);
  border: 1px solid var(--lijn); border-radius: var(--r-groot); box-shadow: 0 6px 20px rgba(20, 30, 50, .18); padding: .3rem 0; }
.balk nav details.menu .uitklap a { display: block; color: var(--tekst); opacity: 1; padding: .35rem .9rem; border: 0; }
.balk nav details.menu .uitklap a:hover { background: #eef2f8; border: 0; }
.balk nav details.menu .uitklap hr { border: 0; border-top: 1px solid var(--lijn); margin: .25rem 0; }

/* ---------- gemeenschappelijk ---------- */
.ag-balk { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .6rem; }
.ag-balk .groep { display: inline-flex; border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; background: var(--vlak); }
.ag-balk .groep a, .ag-balk .groep span { padding: .3rem .65rem; text-decoration: none; color: var(--tekst); border-right: 1px solid var(--lijn); }
.ag-balk .groep > :last-child { border-right: 0; }
.ag-balk .groep a.actief { background: var(--knop); color: var(--knop-tekst); }
.ag-balk .periode { font-weight: 600; margin: 0 .5rem; }
.ag-balk input[type=date] { width: auto; padding: .25rem .4rem; }

.chips { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-bottom: .6rem; }
.chip { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--lijn); border-radius: 999px;
  padding: .12rem .6rem .12rem .25rem; background: var(--vlak); cursor: pointer; font: inherit; font-size: .85rem; color: var(--tekst); }
.chip .bol { width: .9rem; height: .9rem; border-radius: 50%; display: inline-block; }
.chip.uit { opacity: .45; text-decoration: line-through; }
.chip.tekst { padding: .12rem .6rem; color: var(--link); }

/* ---------- kalender ---------- */
.kal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid var(--lijn); border-top: 1px solid var(--lijn); background: var(--vlak); }
.kal.dag { grid-template-columns: 1fr; }
.kal .kop-dag { font-size: .8rem; color: var(--zacht); font-weight: 600; padding: .25rem .4rem; background: var(--kop-vlak);
  border-right: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.kal .vak { border-right: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); padding: .2rem .25rem; min-height: 6.5rem; overflow: hidden; }
.kal.week .vak { min-height: 24rem; }
.kal.dag .vak { min-height: 12rem; }
.kal .vak.weekend { background: #fafafa; }
.kal .vak.buiten { background: #f6f7f9; }
.kal .vak.buiten .dagnr { color: #b5bbc6; }
.kal .vak.vandaag { background: var(--vandaag-vlak); box-shadow: inset 0 0 0 2px var(--accent); }
.kal .dagnr { font-size: .8rem; color: var(--zacht); display: flex; justify-content: space-between; }
.kal .dagnr a { text-decoration: none; color: inherit; }
.kal .vandaag .dagnr { color: var(--tekst); font-weight: 700; }
.kal-item { display: block; margin: 2px 0; padding: 1px 4px 1px 6px; border-left: 4px solid var(--k, #7a8294); border-radius: 3px;
  background: color-mix(in srgb, var(--k, #7a8294) 12%, var(--vlak)); font-size: .8rem; line-height: 1.3; color: var(--tekst);
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal.week .kal-item, .kal.dag .kal-item { white-space: normal; }
.kal-item:hover { background: color-mix(in srgb, var(--k, #7a8294) 22%, var(--vlak)); }
.kal-item .uur { font-weight: 600; }
.kal-item .ref { color: var(--zacht); }
.kal-item .sub { display: block; color: var(--zacht); font-size: .75rem; }
.kal-item.klaar { opacity: .5; text-decoration: line-through; }
.kal-item.te-laat { border-left-color: var(--fout); background: #fbe9eb; color: var(--fout); }
.kal-item .afh { float: right; text-decoration: none; }
.verborgen { display: none !important; }

/* ---------- takenoverzicht ---------- */
.bord-wrap { overflow-x: auto; }
table.bord { border-collapse: collapse; width: 100%; background: var(--vlak); table-layout: fixed; font-size: .85rem; }
table.bord th, table.bord td { border: 1px solid var(--lijn); vertical-align: top; padding: .2rem; }
table.bord th { background: var(--kop-vlak); color: var(--zacht); font-weight: 600; font-size: .8rem; text-align: left; }
table.bord th.vandaag, table.bord td.vandaag { background: var(--vandaag-vlak); }
table.bord th.rijkop { width: 9rem; }
table.bord th.rijkop .bol { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .3rem; }
table.bord td.cel { min-height: 3rem; height: 3rem; }
table.bord td.cel.doel { outline: 2px dashed #6d8fca; outline-offset: -3px; background: #eef4fd; }
table.bord td.zijkolom { background: #f8f9fb; }
.kaartje { border: 1px solid var(--lijn); border-left: 4px solid var(--k, #7a8294); border-radius: var(--r); background: var(--vlak);
  padding: 2px 4px; margin-bottom: 3px; cursor: grab; line-height: 1.3; }
.kaartje.termijn { cursor: default; border-left-style: dashed; background: #fbfaf5; }
.kaartje.te-laat { border-color: #e7a3aa; border-left-color: var(--fout); background: #fff3f3; }
.kaartje.te-laat .oms { color: var(--fout); }
.kaartje.klaar { opacity: .5; }
.kaartje.klaar .oms { text-decoration: line-through; }
.kaartje .oms { outline: none; }
.kaartje .oms[contenteditable=true] { background: #fffbe0; cursor: text; }
.kaartje .meta { color: var(--zacht); font-size: .75rem; display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; }
.kaartje .meta a { text-decoration: none; }
.kaartje .knopjes { display: none; gap: .15rem; }
.kaartje:hover .knopjes { display: inline-flex; }
.kaartje button { background: none; border: 1px solid var(--lijn); border-radius: 3px; padding: 0 .25rem; font-size: .72rem; cursor: pointer; color: var(--zacht); }
.kaartje button:hover { color: var(--tekst); border-color: #9aa1ae; }
.kaartje input[type=checkbox] { margin: 0 .2rem 0 0; vertical-align: -2px; }
.kaartje.sleept { opacity: .4; }
.bord-melding { min-height: 1.3em; }
.nieuw-taak { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-end; }
.nieuw-taak > div { display: flex; flex-direction: column; }
.nieuw-taak input, .nieuw-taak select { width: auto; }

/* ---------- lijsten en afhandelen ---------- */
.filters input[type=date] { width: auto; }
.knop.klein { padding: .15rem .5rem; font-size: .8rem; }
.afgehandeld { color: var(--goed); font-size: .8rem; text-decoration: none; }
.afhandelen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .3rem 1rem; }
.afhandelen-raster .breed { grid-column: 1 / -1; }
.ag-balk select, .ag-balk input[type=date] { width: auto; }

/* ---------- menu Configuratie: groepen naast elkaar (op een smal scherm onder elkaar) ---------- */
.balk nav details.menu .uitklap.config-uitklap { display: grid; grid-template-columns: repeat(3, max-content);
  gap: .2rem .4rem; padding: .5rem .3rem .3rem; max-width: calc(100vw - 8px); max-height: calc(100vh - 60px); overflow-y: auto; }
.config-uitklap .config-groep { padding-bottom: .3rem; }
.config-uitklap .config-kopje { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); padding: .35rem .9rem .15rem; }
.balk nav details.menu .uitklap.config-uitklap a { padding: .25rem .9rem; white-space: nowrap; }
.balk nav details.menu .uitklap.config-uitklap a.prominent { font-weight: 600; }
.config-uitklap .config-voet { grid-column: 1 / -1; border-top: 1px solid var(--lijn); margin-top: .2rem; padding-top: .2rem; }
.balk nav details.menu .uitklap.config-uitklap .config-voet a { color: var(--zacht); font-size: .85rem; }
@media (max-width: 760px) { .balk nav details.menu .uitklap.config-uitklap { grid-template-columns: 1fr; } }

/* ---------- overzichtspagina Configuratie ---------- */
.config-overzicht { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: .8rem; }
.config-overzicht .kaart { margin: 0; padding: .7rem .8rem; }
.config-overzicht h2 { margin: 0 0 .4rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.config-tegel { display: flex; gap: .55rem; align-items: flex-start; padding: .4rem .45rem; border-radius: 5px;
  text-decoration: none; color: var(--tekst); }
.config-tegel:hover { background: var(--hover); }
.config-tegel .icoon { width: 1.4rem; text-align: center; flex: none; }
.config-tegel strong { display: block; font-size: .93rem; }
.config-tegel span.uitleg { display: block; font-size: .8rem; color: var(--zacht); }
.config-tegel.prominent { background: var(--accent-vlak); border: 1px solid var(--info-rand); }

/* Status van een zitting (keuzelijst in het dossier en in Zittingen): gepland vet, gehouden groen, uitgesteld oranje,
   geschrapt grijs doorgestreept; de rij volgt mee */
.zstatus { font-size: .8rem; padding: .05rem .2rem; width: auto; min-width: 7.6rem; max-width: none; border-radius: 4px; border: 1px solid var(--lijn); background: transparent; color: inherit; }
.zstatus.zs-gepland { font-weight: 700; }
.zstatus.zs-gehouden { color: #1d7a3a; border-color: #8fd0a3; background: #eaf7ee; }
.zstatus.zs-uitgesteld { color: #a85a00; border-color: #f0bf7a; background: #fff3e2; }
.zstatus.zs-geschrapt { color: #888; text-decoration: line-through; background: #f1f1f1; }
tr:has(.zstatus.zs-geschrapt) > td { color: #888; text-decoration: line-through; }
tr:has(.zstatus.zs-geschrapt) > td .zstatus, tr:has(.zstatus.zs-geschrapt) > td .knopje, tr:has(.zstatus.zs-geschrapt) > td a { text-decoration: none; }
tr:has(.zstatus.zs-uitgesteld) > td:first-child strong { color: #a85a00; }
@media (prefers-color-scheme: dark) {
  .zstatus.zs-gehouden { color: #7fd69a; background: transparent; }
  .zstatus.zs-uitgesteld { color: #f0b060; background: transparent; }
  .zstatus.zs-geschrapt { background: transparent; }
}
/* Dubbel stuk: venster per bestand */
.dubbelvenster { max-width: 36rem; }
.dubbelvenster .dubbelrij { border-top: 1px solid var(--lijn); padding: .4rem 0; }
.dubbelvenster .dubbelrij p { margin: 0 0 .3rem; }