:root {
	--achtergrond: #f6f7f9;
	--vlak: #ffffff;
	--tekst: #1d2433;
	--zacht: #5d6678;
	--rand: #dfe3ea;
	--accent: #2453d4;
	--accent-tekst: #ffffff;
	--vol: #1f8a4c;
	--vol-bg: #e7f6ed;
	--deels: #b26a00;
	--deels-bg: #fff4e0;
	--leeg: #c62828;
	--leeg-bg: #fdecec;
	--gevaar: #c62828;
	--radius: 8px;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		--achtergrond: #12151b;
		--vlak: #1b2029;
		--tekst: #e6e9ef;
		--zacht: #9aa3b5;
		--rand: #2d3441;
		--accent: #6b8cff;
		--accent-tekst: #0d1220;
		--vol: #5fd08f;
		--vol-bg: #16301f;
		--deels: #f2b04f;
		--deels-bg: #33270f;
		--leeg: #ff7a7a;
		--leeg-bg: #3a1818;
		--gevaar: #ff7a7a;
		color-scheme: dark;
	}
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	background: var(--achtergrond);
	color: var(--tekst);
}

a { color: var(--accent); }
h1 { font-size: 1.6rem; margin: 0.5rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 0.75rem; }
h3 { font-size: 1rem; margin: 0 0 0.5rem; }

main { max-width: 960px; margin: 0 auto; padding: 1rem; }
main.breed { max-width: 1600px; }

.topbalk {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem;
	padding: 0.75rem 1rem; background: var(--vlak); border-bottom: 1px solid var(--rand);
}
.topbalk .logo { font-weight: 700; font-size: 1.1rem; color: var(--tekst); text-decoration: none; }
.topbalk nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; flex: 1; }
.topbalk nav a { text-decoration: none; color: var(--zacht); }
.topbalk nav a:hover { color: var(--accent); }
.uitloggen { display: flex; align-items: center; gap: 0.75rem; color: var(--zacht); }

.klein { color: var(--zacht); font-size: 0.9rem; }
.leeg-bericht { color: var(--zacht); padding: 1rem; background: var(--vlak); border: 1px dashed var(--rand); border-radius: var(--radius); }

.meldingen .melding, .melding { padding: 0.6rem 0.9rem; border-radius: var(--radius); margin: 0 0 1rem; }
.melding.info { background: var(--vol-bg); color: var(--vol); }
.melding.fout { background: var(--leeg-bg); color: var(--leeg); }
.veldfout { color: var(--leeg); margin: -0.25rem 0 0.5rem; font-size: 0.9rem; }

/* Knoppen en formulieren */
button, .knop {
	display: inline-block; font: inherit; cursor: pointer; text-decoration: none;
	padding: 0.45rem 0.9rem; border-radius: var(--radius); border: 1px solid var(--accent);
	background: var(--accent); color: var(--accent-tekst);
}
button.secundair, .knop.secundair { background: transparent; color: var(--accent); }
button.gevaar { background: transparent; border-color: var(--gevaar); color: var(--gevaar); }
button.link { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; }
button.link.gevaar { color: var(--gevaar); }

input, select, textarea {
	font: inherit; color: inherit; background: var(--vlak);
	padding: 0.4rem 0.55rem; border: 1px solid var(--rand); border-radius: 6px; max-width: 100%;
}
.formulier { display: flex; flex-direction: column; gap: 0.75rem; max-width: 520px; }
.formulier label:not(.keuze) { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 500; }
.formulier button { align-self: flex-start; }
fieldset { border: 1px solid var(--rand); border-radius: var(--radius); padding: 0.5rem 0.9rem 0.75rem; margin: 0; }
legend { font-weight: 500; padding: 0 0.25rem; }
label.keuze { display: inline-flex; align-items: center; gap: 0.4rem; margin-right: 1rem; font-weight: normal; }
.rij { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.75rem; margin-bottom: 0.5rem; }
.rij label { display: flex; flex-direction: column; gap: 0.25rem; }
.verwijderen { margin-top: 2rem; }
.filters { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.filters label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9rem; color: var(--zacht); }
.kolommen { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }

/* Tabellen */
.tabel { width: 100%; border-collapse: collapse; background: var(--vlak); border-radius: var(--radius); overflow: hidden; }
.tabel th, .tabel td { text-align: left; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--rand); }
.tabel th { font-weight: 600; color: var(--zacht); font-size: 0.9rem; }
.tabel tr.inactief td { color: var(--zacht); }
.tabel tr.leeg td:first-child { box-shadow: inset 4px 0 var(--leeg); }
.tabel tr.deels td:first-child { box-shadow: inset 4px 0 var(--deels); }

/* Weeknavigatie en rooster */
.weeknav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-bottom: 1rem; }
.werkbalk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.werkbalk .weeknav { margin-bottom: 0; }

.weekraster { display: grid; grid-template-columns: 7rem repeat(7, minmax(0, 1fr)); column-gap: 0.5rem; }
.weekraster .dag { display: grid; grid-template-rows: subgrid; align-content: start; }
.weekraster h2 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 0.5rem; font-size: 0.95rem; }
.weekraster h2 span { display: inline-block; }
.weekraster h2 span::first-letter { text-transform: uppercase; }
/* Elke rij (rooster) krijgt links een kop en een lijn dwars door de dagkaarten. */
.weekraster .vak, .baan-label { border-top: 1px solid var(--rand); padding-top: 0.5rem; }
.baan-label { grid-column: 1; font-weight: 600; font-size: 0.9rem; color: var(--zacht); }
.weekraster .dag .meta { display: none; }
@media (max-width: 900px) {
	.weekraster { grid-template-columns: 1fr; row-gap: 0.6rem; }
	.weekraster .dag { display: block; grid-row: auto !important; grid-column: auto !important; }
	.baan-label { display: none; }
	.weekraster .vak { border-top: none; padding-top: 0; }
	.weekraster .dag .meta { display: block; }
}
.weekraster .dag, .template .dag {
	background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius); padding: 0.6rem; min-height: 6rem;
}
.daglijst h2::first-letter { text-transform: uppercase; }
.toevoegen { text-decoration: none; font-weight: 700; font-size: 1.1rem; padding: 0 0.35rem; }

.daglijst .dag { margin-bottom: 1.25rem; }
.daglijst h2 { margin-bottom: 0.5rem; }

.template { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }

.dienst {
	display: block; color: inherit; text-decoration: none; margin-bottom: 0.5rem;
	padding: 0.5rem 0.6rem; border-radius: 6px; border: 1px solid var(--rand); border-left: 4px solid var(--rand);
	background: var(--vlak); font-size: 0.9rem;
}
a.dienst:hover { border-color: var(--accent); }
.dienst.vol { border-left-color: var(--vol); }
.dienst.deels { border-left-color: var(--deels); background: var(--deels-bg); }
.dienst.leeg { border-left-color: var(--leeg); background: var(--leeg-bg); }
.dienst.slot { border-left-color: var(--accent); }
.dienst-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.3rem; }
.tijd { font-weight: 600; white-space: nowrap; }
.bezetting { white-space: nowrap; font-size: 0.8rem; font-weight: 600; padding: 0 0.4rem; border-radius: 999px; background: var(--achtergrond); }
.activiteit { font-weight: 500; }
.meta, .opmerking { color: var(--zacht); font-size: 0.85rem; }
.opmerking { font-style: italic; }
.namen { list-style: none; margin: 0.3rem 0 0; padding: 0; }
.namen li { font-size: 0.85rem; }
.namen li.ik { font-weight: 700; }

.bezetting-regel { font-weight: 600; }
.bezetting-regel.vol { color: var(--vol); }
.bezetting-regel.deels { color: var(--deels); }
.bezetting-regel.leeg { color: var(--leeg); }
.toewijzingen { list-style: none; padding: 0; margin: 0 0 1rem; }
.toewijzingen li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px solid var(--rand); }

/* Login */
body.login { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.login-kaart { background: var(--vlak); border: 1px solid var(--rand); border-radius: 12px; padding: 2rem; max-width: 380px; width: 100%; text-align: center; }
.dev-login { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed var(--rand); display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.dev-login p { width: 100%; margin: 0; }

/* Administratie-submenu */
.submenu { position: relative; }
.submenu summary { cursor: pointer; color: var(--zacht); list-style: none; }
.submenu summary::-webkit-details-marker { display: none; }
.submenu summary::after { content: " ▾"; font-size: 0.8em; }
.submenu[open] summary, .submenu summary:hover { color: var(--accent); }
.submenu-inhoud {
	position: absolute; top: calc(100% + 0.5rem); left: 0; z-index: 10; min-width: 220px;
	display: flex; flex-direction: column; padding: 0.5rem 0;
	background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius);
	box-shadow: 0 6px 20px rgb(0 0 0 / 0.12);
}
.submenu-inhoud p { margin: 0; padding: 0.25rem 0.9rem 0.4rem; }
.topbalk .submenu-inhoud a { padding: 0.4rem 0.9rem; color: var(--tekst); }
.topbalk .submenu-inhoud a:hover { background: var(--achtergrond); color: var(--accent); }

.ook-volgende { margin: 0 0 0.75rem; }
.lijst { padding-left: 1.2rem; }
.lijst li { margin: 0.3rem 0; }

/* Uren */
.teller {
	display: inline-block; min-width: 1.3rem; padding: 0 0.35rem; margin-left: 0.2rem; border-radius: 999px;
	background: var(--leeg); color: #fff; font-size: 0.75rem; font-weight: 700; text-align: center; line-height: 1.3rem;
}
.totalen { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.5rem; }
.totaal-blok {
	display: flex; flex-direction: column; min-width: 120px; padding: 0.6rem 0.9rem;
	background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--radius);
}
.totaal-blok .label { color: var(--zacht); font-size: 0.85rem; }
.totaal-blok .waarde { font-size: 1.4rem; font-weight: 700; }
.totaal-blok.hoofd { border-color: var(--accent); }
.waarde.zacht { color: var(--zacht); }
.status { font-size: 0.85rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.status.ingediend { background: var(--deels-bg); color: var(--deels); }
.status.goedgekeurd { background: var(--vol-bg); color: var(--vol); }
.status.afgewezen { background: var(--leeg-bg); color: var(--leeg); }
.acties { display: flex; gap: 0.75rem; align-items: center; }
.beoordeling { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.beoordeling input { min-width: 12rem; }
.tabel-scroll { overflow-x: auto; }
.tabel.getallen td:not(:first-child), .tabel.getallen th:not(:first-child) { text-align: right; }
.tabel.getallen td.totaal { font-weight: 700; }
.overlap { display: block; font-size: 0.85rem; color: var(--deels); }
.overlap::before { content: "⚠ "; }

/* Beschikbaarheid */
.verzoek-melding {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 1rem; padding: 0.75rem 1rem;
	background: var(--vlak); border: 1px solid var(--accent); border-left: 4px solid var(--accent); border-radius: var(--radius);
}
.verzoek-melding span { flex: 1; min-width: 200px; }
.tabel tr.weekend td { background: var(--achtergrond); }
.tabel.beschikbaarheid td { white-space: nowrap; }
.tabel.beschikbaarheid th .status { display: block; margin-top: 0.2rem; width: max-content; }
.tabel.beschikbaarheid td.kan { color: var(--vol); font-weight: 600; }
.tabel.beschikbaarheid td.kan-niet, .tabel.beschikbaarheid td.onbekend { color: var(--zacht); }
.slotkeuze { display: grid; grid-template-columns: 6.5rem 1fr; align-items: baseline; gap: 0.5rem; margin: 0.35rem 0; }
.tabel tr.nieuwe-dag td { border-top: 2px solid var(--rand); }
.tabel.beschikbaarheid td.niemand { color: var(--leeg); font-weight: 700; }
.tabel.invullen input[type=checkbox] { width: 1.2rem; height: 1.2rem; }

.leeg-week { text-align: center; padding: 3rem 1rem; color: var(--zacht); }
.leeg-week form { margin: 1rem 0 0.5rem; }