/* Enkel voor Beheer (de schil staat in /assets/app.css). */

/* Agenda: één rij per maand, één kolom per dag */
.agenda { overflow-x: auto; padding: 14px; }
.agenda table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 980px; table-layout: fixed; }
.agenda th, .agenda td { padding: 0; height: 36px; font-size: .72rem; text-align: center; border-right: 1px solid var(--lijn-zacht); }
.agenda th.maandnaam { width: 96px; text-align: left; padding-left: 8px; font-size: .85rem; font-weight: 600; color: var(--tekst); text-transform: capitalize; border-right: 1px solid var(--lijn); }
.agenda thead th { height: 24px; color: var(--grijs); font-weight: 600; }
.agenda td { position: relative; cursor: pointer; background: var(--wit); border-bottom: 1px solid var(--lijn-zacht); }
.agenda td.weekend { background: var(--veld); }
.agenda td.vandaag { box-shadow: inset 0 0 0 2px var(--oranje); }
.agenda td.geen { background: var(--veld); cursor: default; }
.agenda td.vrij:hover { background: var(--primair-licht); }
.agenda .balkje { position: absolute; inset: 6px -1px; border-radius: 0; color: #fff; font-size: .7rem; line-height: 24px; white-space: nowrap; overflow: visible; text-align: left; padding-left: 5px; z-index: 1; }
.agenda .balkje.begin { border-top-left-radius: 8px; border-bottom-left-radius: 8px; left: 50%; }
.agenda .balkje.einde { border-top-right-radius: 8px; border-bottom-right-radius: 8px; right: 50%; }
.agenda .balkje span { position: relative; z-index: 2; font-weight: 600; }
.agenda td:has(.balkje span) { z-index: 3; }
/* Soorten in de agenda: verhuur groen, eigen gebruik zee, blokkering zand; optie en aanvraag gestreept */
.kl-verhuur { background: var(--primair); }
.kl-eigen { background: var(--blauw); }
.kl-blokkering { background: var(--zand); color: var(--tekst) !important; }
.kl-optie { background: repeating-linear-gradient(45deg, #EBD3A0, #EBD3A0 6px, var(--geel-licht) 6px, var(--geel-licht) 12px); color: var(--geel) !important; }
.kl-aanvraag { background: repeating-linear-gradient(45deg, #BFD6E2, #BFD6E2 6px, var(--blauw-licht) 6px, var(--blauw-licht) 12px); color: var(--blauw) !important; }
.agenda-legende { display: flex; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: var(--grijs); font-weight: 600; margin: 12px 4px 0; }
.agenda-legende i { display: inline-block; width: 22px; height: 10px; border-radius: 4px; margin-right: 6px; vertical-align: 0; }

/* Boeking */
.soortkeuze { display: inline-flex; gap: 4px; background: var(--veld); padding: 4px; border-radius: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.soortkeuze label { display: inline-flex; gap: 8px; align-items: center; border-radius: 8px; padding: 7px 14px; cursor: pointer; font-weight: 600; color: var(--grijs); margin: 0; font-size: .88rem; }
.soortkeuze input { position: absolute; opacity: 0; pointer-events: none; }
.soortkeuze label:has(input:checked) { background: var(--wit); color: var(--primair); box-shadow: var(--schaduw); }
.extras { display: flex; gap: 8px 18px; flex-wrap: wrap; }
.prijsvak table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.prijsvak td { padding: 7px 0; border-bottom: 1px solid var(--lijn-zacht); }
.prijsvak tr.som td { font-weight: 700; border-bottom: 0; border-top: 1px solid var(--lijn); }
.geschiedenis { font-size: .85rem; max-height: 320px; overflow-y: auto; }
.geschiedenis li { display: block; }
.geschiedenis .wanneer { color: var(--grijs); }
.statusrij { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }

/* Teksteditor (mails, brochure) */
.editor textarea { min-height: 360px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86rem; line-height: 1.55; }
.velden-hulp { font-size: .82rem; color: var(--grijs); background: var(--wit); border-radius: var(--rond); padding: 16px; border: 1px solid var(--lijn); }
.velden-hulp code { background: var(--veld); padding: 2px 6px; border-radius: 5px; cursor: pointer; display: inline-block; margin: 2px 0; color: var(--primair); }
.voorbeeld-frame { width: 100%; min-height: 600px; border: 1px solid var(--lijn); border-radius: 12px; background: #fff; }
.sectie-blok { border: 1px solid var(--lijn); border-radius: var(--rond); padding: 16px; margin-bottom: 14px; background: var(--wit); }
.sectie-blok textarea { min-height: 200px; }
.minikaart { height: 320px; border-radius: 12px; border: 1px solid var(--lijn); }

@media (min-width: 1600px) { .agenda th, .agenda td { height: 42px; } .agenda .balkje { line-height: 30px; } .agenda th.maandnaam { width: 116px; } }

/* Aanvragen */
.aanvragen-raster { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.aanvraag { display: flex; flex-direction: column; gap: 12px; }
.aanvraag .melding { margin: 0; }
.aanvraag-kop { display: flex; gap: 12px; align-items: center; }
.aanvraag-kop .tekst { flex: 1; min-width: 0; }
.aanvraag-kop strong { display: block; font-size: 1.02rem; }
.aanvraag-feiten { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: var(--veld); border-radius: 10px; padding: 12px 14px; }
.aanvraag-feiten span { display: block; font-size: .75rem; color: var(--grijs); font-weight: 600; }
.aanvraag-feiten strong { font-size: .92rem; }
.aanvraag .opmerking { margin: 0; padding: 10px 14px; border: 1px solid var(--lijn-zacht); background: var(--veld); border-radius: 10px; font-size: .9rem; white-space: pre-line; }
.aanvraag .knoppen { margin-top: auto; }

/* Klantfiche */
.profiel { display: flex; gap: 20px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.avatar.groot { width: 72px; height: 72px; font-size: 1.4rem; }
.profiel-tekst { flex: 1; min-width: 240px; }
.profiel-tekst h2 { font-size: 2rem; margin-bottom: 6px; }
.profiel-labels { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.profiel-contact { display: flex; gap: 8px 20px; flex-wrap: wrap; font-size: .9rem; color: var(--grijs); }
.profiel-contact a, .profiel-contact span { display: inline-flex; gap: 6px; align-items: center; }
.profiel-volgende { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 14px 18px; border-radius: 12px; background: var(--primair-licht); color: var(--tekst); text-decoration: none; }
.profiel-volgende:hover { text-decoration: none; box-shadow: 0 0 0 2px var(--primair); }
.profiel-volgende span:first-child { font-size: .78rem; font-weight: 600; color: var(--primair); }
.naamcel { display: flex; gap: 10px; align-items: center; }
.naamcel .avatar { width: 34px; height: 34px; font-size: .78rem; }
.smal-blok { max-width: 980px; }

/* Bezetting */
.balkmeter { display: inline-flex; width: 110px; height: 8px; border-radius: 4px; background: var(--lijn); overflow: hidden; vertical-align: middle; margin-right: 8px; }
.balkmeter .m-verhuur { background: var(--primair); }
.balkmeter .m-eigen { background: var(--blauw); }
.tabel tr.totaalrij td { font-weight: 700; border-top: 2px solid var(--lijn); }

/* Te doen */
.lijstje.taken .knop { flex: none; }

/* Herinneringen voor het team */
.teamregels { display: grid; gap: 4px; margin: 10px 0 16px; }
.teamregel { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(170px, 1fr) minmax(0, 2fr); gap: 8px 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.teamregel-dagen { display: flex; gap: 8px; align-items: center; }
.teamregel-dagen input { width: 80px; }
.teamregel-rollen { display: flex; gap: 6px 14px; flex-wrap: wrap; }
@media (max-width: 760px) { .teamregel { grid-template-columns: 1fr; } }
.aanvraag-feiten > div:first-child { grid-column: 1 / -1; }