/* Dagelijks gebruik, besluit 14 september 2026. */
.home-tegels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hag-home{padding:20px;max-width:1320px;margin:auto;width:100%;box-sizing:border-box}
.home-captions{margin-top:auto;padding-top:28px}.home-captions .captie-tekst{margin:0;font-size:15px;line-height:1.8}
.home-tegel{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:12px;padding:24px 18px;min-height:180px;border:1px solid #514635;border-radius:18px;background:#201c16;color:#f4eee3;font:inherit;cursor:pointer;min-width:0;overflow-wrap:anywhere}
.home-tegel strong{font-size:23px;line-height:1.2}
.home-omschrijving{font-size:14px;line-height:1.5;color:#c4bcaf}
.home-tegel:hover{border-color:#c49d57;background:#292218}
.home-tegel:focus-visible{outline:3px solid #f2c86a;outline-offset:4px}
.home-event{background:#d5aa58;color:#221a0d;border-color:#e1bd7b}
.home-event:hover{background:#e0b968}
.home-event .home-omschrijving,.home-event .home-datum{color:#342510}
/* De datum direct onder de naam, de aftelregel eronder (Simon, 19-10-2026: "de datum staat erg
   laag"); een lange naam hoogstens twee regels, zodat niets uit de tegel zakt. */
.home-event .home-datum{order:1}
.home-event .home-omschrijving{order:2}
.home-event strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home-badge{position:absolute;right:12px;top:12px;display:grid;place-items:center;background:#bf3038;color:white;min-width:27px;height:27px;padding:0 4px;border-radius:99px;font-size:13px;font-weight:700;box-sizing:border-box}
.home-status{min-height:24px;font-size:13px;margin:16px 0}
.hag-persoon{--persoon:#c5bdaf}
.hag-persoon-paula,.ag-p1{--persoon:#F2B594}
.hag-persoon-simon,.ag-p2{--persoon:#4DDFC2}
.hag-persoon-robert,.ag-p3{--persoon:#79A2FF}
.hag-persoon-mariet,.ag-p4{--persoon:#E9B3CA}
.hag-eigenaar{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--persoon);max-width:100%;overflow-wrap:anywhere}
.hag-eigenaar .who{background:var(--persoon);color:#171717;font-weight:700;flex-shrink:0}
.hag-werkbord{border-inline-start:3px solid var(--persoon)}
.hag-bedrijf-menu{display:flex;gap:10px;flex-wrap:wrap;padding:16px}
.hag-mobiel-menu{margin-left:auto;flex-shrink:0}
@media(min-width:1024px){
 .home-tegels{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-self:start}
 .home-tegel{padding:18px;gap:10px}.home-tegel strong{font-size:20px}.home-omschrijving{font-size:13px}
 .bureau-kolom:has(.hag-home),.bureau-kolom:has(.relatie-veld){max-width:none;width:100%}
 .hag-mobiel-menu{display:none}
}
@media(max-width:374px){.home-tegels{grid-template-columns:minmax(0,1fr)}}
@media(max-width:1023px){
 .hag-home{padding:16px}
 /* Vierkante tegels, even hoog als breed (Simon, 22-9-2026): op een iPhone van 874 hoog
    eindigt de derde rij precies boven de onderbalk. */
 .home-tegels{gap:12px}
 .home-tegel{padding:18px 14px;gap:10px;min-height:0;aspect-ratio:1}
 .home-tegel strong{font-size:20px}
 /* Een eventnaam als "Castle Christmas Fair 2026" past zo in twee regels in plaats van afgekapt. */
 .home-event strong{font-size:17px}
 .home-omschrijving{font-size:13px}
 .nav{flex-wrap:wrap;gap:8px}
}

.ag-p0{--persoon:#c5bdaf}
.ag-blok.ag-p0,.ag-blok.ag-p1,.ag-blok.ag-p2,.ag-blok.ag-p3,.ag-blok.ag-p4,
.ag-heledag,.ag-mini,.ag-deadline{color:var(--persoon);border-inline-start:3px solid var(--persoon);background:#29241e}
.kaart-open .hag-eigenaar{margin-top:8px;margin-bottom:4px}.kaart-open{min-width:0}

.appelmoes-mini{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#181512;border-radius:12px}
.appelmoes-reacties{margin-top:16px;border-top:1px solid #514635;padding-top:16px}
.appelmoes-reactie{margin-bottom:16px}.appelmoes-reactie time{display:block;font-size:12px;color:#b8b0a3;margin-top:4px}
.appelmoes-reactie p{white-space:pre-wrap;overflow-wrap:anywhere}
.insp-kaart{min-width:0;overflow-wrap:anywhere}.insp-acties{flex-wrap:wrap}
/* Vier appeltjes of meer: een gouden rand (Simon, 21-9-2026). */
.insp-kaart.insp-favoriet{outline:2px solid var(--gold);outline-offset:6px;border-radius:12px}

.hag-agenda-editor{max-height:85dvh;overflow:auto;box-sizing:border-box;width:min(520px,calc(100vw - 24px))}
.hag-agenda-editor input{width:100%;box-sizing:border-box}.hag-agenda-editor .row{flex-wrap:wrap}
.ag-sync{padding:12px;font-size:13px}.ag-sync summary{cursor:pointer;font-weight:600}

.acts{display:flex;flex-wrap:wrap;gap:8px}.acts>*{flex:1 1 130px;min-width:0}
.bureau-kolom:has(.kaartje-titel){max-width:900px}
@media(min-width:1024px){.bureau-kolom:has(.relatie-veld)>.scroll{max-width:1100px;margin:auto}
 .bureau-kolom:has(.relatie-veld) .pad{max-width:none}
}

.who.hag-persoon{background:var(--persoon);color:#171717}

/* De gedeelde bediening: logo naar Home, één toevoegknop rechtsonder. */
.hag-merk-home{border:0;background:none;padding:6px 0;display:flex;align-items:center;cursor:pointer;flex-shrink:0}
.hag-merk-home img{width:100px;height:54px;object-fit:contain;mix-blend-mode:lighten}
.hag-appel-icoon{object-fit:contain;border-radius:6px}
/* Het appeltje op een Appelmoesbericht: het merkbestand, gedempt tot het gegeven is (geen variant, par. 18.39). */
.appeltje{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;font:inherit;font-size:var(--fs-support);color:var(--muted);cursor:pointer}
.appeltje .appeltje-icoon{width:22px;height:22px;filter:grayscale(1) opacity(.45);transition:filter .15s}
.appeltje.appeltje-aan{color:var(--gold-light)}
.appeltje.appeltje-aan .appeltje-icoon{filter:none}
.appeltje:disabled{cursor:default}
.nav.hag-bovenbalk{display:grid;grid-template-columns:minmax(0,1fr) 100px minmax(0,1fr);gap:8px;height:auto;min-height:70px;flex-shrink:0;background:var(--bg)}
.hag-merk-home:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.hag-hoofdactie{z-index:21;max-width:calc(100% - 32px)}
.met-hoofdactie .scroll{padding-bottom:calc(var(--h-fab) + 24px)}
.met-hoofdactie .ag-inhoud{padding-bottom:0}
.ag-rooster{scroll-padding-top:60px;scroll-padding-bottom:80px}
.hag-open-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;box-sizing:border-box;padding:0 5px;border-radius:99px;background:#bf3038;color:#fff;font-size:12px;font-weight:700;flex-shrink:0;vertical-align:middle}
.filter-groep [data-stand]{margin:6px 5px 0 0}
.filter-groep [data-stand][aria-pressed="true"]{background:var(--gold);color:var(--on-gold)}
details.lijst > summary{cursor:pointer;list-style:none}
details.lijst > summary::-webkit-details-marker{display:none}
details.lijst > summary::before{content:'›';font-size:22px;transition:transform .15s}
details.lijst[open] > summary::before{transform:rotate(90deg)}
@media(min-width:1024px){
 .hag-hoofdactie{bottom:24px;right:24px}
 .bureau-agenda{height:100%;box-sizing:border-box;display:flex;flex-direction:column;padding-bottom:0}
}

/* Home: compacte ingangen links, dashboard en caption rechts. */
.home-captions,.home-dashboard{display:none}
.home-status:empty{display:none}
.hag-kop-links,.hag-kop-rechts{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.hag-kop-links .navtitle,.hag-kop-links .bureau-schermtitel{min-width:0;overflow-wrap:anywhere}
/* De terugknop draagt zijn naam, ook op de computer (Simon, 1-10-2026: "hoe kom ik
   daar uit"); een kale pijl zegt niet waarheen. */
.hag-kop-links .terugknop{min-height:32px;height:32px;padding:0 12px 0 8px;gap:6px;border:1px solid var(--white-a10);border-radius:16px;flex-shrink:0}
.hag-kop-rechts{justify-content:flex-end}
.hag-kop-rechts:empty{min-height:1px}
.hag-bovenbalk .hag-merk-home{justify-self:center}
@media(min-width:1024px){
 .bureau-top.hag-bovenbalk{display:grid;grid-template-columns:minmax(0,1fr) 100px minmax(0,1fr);height:auto;min-height:74px;gap:8px 16px;padding-top:4px;padding-bottom:4px;background:var(--bg)}
 .bureau-top .hag-kop-links{grid-column:1;grid-row:1}
 .bureau-top .hag-merk-home{grid-column:2;grid-row:1}
 .bureau-top .bureau-zoek{grid-column:3;grid-row:1;width:100%;max-width:300px;justify-self:end}
 .bureau-top .bureau-acties{grid-column:1 / -1;grid-row:2;margin:0;flex-wrap:wrap;padding-bottom:6px}
 .bureau-top .bureau-acties:empty{display:none}
 .bureau-top .terugknop::after{display:none}
 .bureau-gebied .nav.hag-bovenbalk{display:none}
 .hag-home{max-width:none;margin:0 auto;padding:28px}
 /* HARDE REGEL (Simon, 22-9-2026): Home scrolt op de computer nooit. De indeling is
    precies zo hoog als het venster toelaat; de tegels en de rechterkolom verdelen die
    ruimte. Alleen het krappelpaneel scrolt. */
 /* EEN RASTER (Simon, 22-9-2026: uitlijning is altijd netjes). Drie kolommen: tegel, tegel,
    rechterkolom. Vier rijen: drie tegelrijen en het Dashboard. De tegels vullen zichzelf in
    (rij 1-3, kolom 1-2); de caption staat in kolom 3 op de onderkant van het Dashboard.
    De tegelwrapper doet niet mee (display:contents), zodat de tegels zelf rasteritems zijn.
    Krappels zit in het lipje aan de rechterrand (krappels.css), niet in het raster. */
 .home-indeling{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(280px,1.1fr);grid-template-rows:repeat(3,minmax(0,1fr)) auto;gap:12px;max-width:1100px;margin:0 auto;height:calc(100dvh - 150px);min-height:0}
 .home-tegels{display:contents}
 .home-tegel{min-height:0;overflow:hidden}
 .home-captions{display:block;grid-column:3;grid-row:1/5;align-self:end;margin:0 0 0 16px;padding-top:20px}
 .home-dashboard{display:flex;flex-direction:column;gap:14px;grid-column:1/3;grid-row:4}
 .home-highlight-kop{display:flex;justify-content:space-between;align-items:center;gap:12px}
 .home-highlight-kop h2{font-size:17px;font-weight:600}
 .home-highlight-kop .lnk{display:flex;align-items:center;font-size:13px;gap:4px}
 .home-highlight-kop .i{width:16px;height:16px}
 .home-voorraad{padding:20px;border:1px solid #514635;background:#201c16;border-radius:14px}
 .home-voorraad h3{font-size:17px;margin:0 0 10px}
 .home-voorraad-status{font-size:14px;color:var(--gold);margin-bottom:12px}
 .home-voorraad p:last-child{font-size:13px;line-height:1.6;color:#c4bcaf}
 .home-highlight{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;font:inherit;color:inherit;background:none;border:0;border-bottom:1px solid #383127;padding:12px 0}
 button.home-highlight{cursor:pointer}
 .home-highlight strong{font-size:22px;color:var(--gold)}
 .home-highlight-event{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:13px}
 .home-highlight-event strong{font-size:16px;color:var(--ink)}
 .home-highlight:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
}

/* Desktopbediening en Home, gebruikersronde 15 september. */
.home-captions{padding:20px;border:1px solid #514635;border-radius:18px;background:#201c16}
@media(hover:hover) and (pointer:fine){
 :where(button:not(:disabled):not([aria-disabled="true"]),a[href],summary,[role="button"]):hover{filter:brightness(1.2);box-shadow:0 0 0 1px var(--gold-a30);cursor:pointer}
 .home-event:hover{background:#efb54d;border-color:#ffc96b;box-shadow:0 0 22px #da9b384d;filter:none}
}
@media(min-width:1024px){
 .bureau-kolom:has(.appelmoes-pagina){max-width:none;width:100%}
 .appelmoes-pagina{width:100%;max-width:1380px;margin:auto;box-sizing:border-box;padding:20px}
 .appelmoes-pagina .insp-kaarten{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

 .appelmoes-pagina .insp-acties{flex-wrap:wrap;gap:12px 20px}
 .crm-lijst-vlak{display:block;width:100%}
 .crm-lijst-vlak .bureau-lijst{width:100%;max-width:none;height:100%;border-right:0}
}

.bureau-gebruiker .bureau-ini.hag-persoon{background:var(--persoon);border-color:var(--persoon);color:#171717}

/* Eén vierkant beeldvak per bericht; lange tekst blijft volledig open te klappen. */
.appelmoes-pagina .insp-kaarten{display:grid;gap:20px;align-items:start}
.appelmoes-pagina .insp-kaart{box-sizing:border-box;min-width:0;margin:0;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.insp-bestand{display:block;overflow:hidden;border-radius:12px}
/* Een bestand bekijken in de app (bestand-voorvertoning.js): donkere dialoog, foto of pdf past in het venster. */
.hag-voorvertoning{padding:0;border:1px solid var(--gold-a30);border-radius:12px;background:var(--bg);color:var(--ink);width:min(96vw,1200px);max-width:none;max-height:96dvh;overflow:hidden}
.hag-voorvertoning::backdrop{background:rgba(0,0,0,.82)}
.hag-voorvertoning-balk{display:flex;align-items:center;gap:8px;padding:6px 8px}
.hag-voorvertoning-naam{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:6px;color:var(--muted);font-size:var(--fs-support)}
.hag-voorvertoning img{display:block;max-width:100%;max-height:calc(96dvh - 56px);margin:0 auto;object-fit:contain}
.hag-voorvertoning iframe{display:block;width:100%;height:calc(96dvh - 56px);border:0;background:#fff}
.hag-voorvertoning-leeg{padding:24px;color:var(--muted)}
.insp-kaart > .appelmoes-beeldleeg{border-radius:12px}
.insp-kaart .appelmoes-link{position:relative;margin:0;border:0;box-shadow:inset 0 0 0 1px var(--line)}
.insp-kaart .appelmoes-linktekst{position:absolute;bottom:0;left:0;right:0;background:#171410e8;padding:12px}
.insp-kaart .appelmoes-linktekst > strong,.insp-kaart .appelmoes-linktekst > span{display:none}
.insp-kaart .appelmoes-linktekst small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.insp-download{height:36px;display:flex;align-items:center;font-size:13px}
.insp-tekst summary{display:flex;flex-direction:column;gap:8px;box-sizing:border-box;height:142px;cursor:pointer;list-style:none}
.insp-tekst summary::-webkit-details-marker{display:none}
.insp-tekst summary .it,.insp-samenvatting{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.insp-tekst summary .it{font-size:20px;line-height:1.35;min-height:54px}
.insp-samenvatting{font-size:14px;line-height:1.5;color:var(--muted)}
.insp-tekst summary > .lnk{margin-top:auto;font-size:13px}
.insp-tekst summary:hover > .lnk{color:var(--gold-light)}
.insp-volledig{padding:16px 0;border-bottom:1px solid var(--line);margin-bottom:12px}
.insp-voet{min-height:44px;display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:12px}
.insp-acties{min-height:44px;gap:12px;align-items:center}

.home-zoeken{display:flex;align-items:center;gap:8px;margin:0 0 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.home-zoekveld{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding-left:14px}
.home-zoekveld input{width:100%;min-width:0;min-height:48px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;outline:none}
.home-zoeken:focus-within{border-color:var(--gold)}
.home-zoeken button{display:flex;align-items:center;justify-content:center;width:48px;min-height:48px;flex-shrink:0;border:0;border-radius:10px;background:transparent;color:var(--gold);cursor:pointer}
/* Op de computer zoekt de zijbalk; de zoekbalk van de begrippenlijst blijft wel staan. */
@media(min-width:1024px){.home-zoeken:not(.begrippen-zoek){display:none}}