@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");

*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.4;color:#111;background:#fff}
h1{font-size:1.1rem;margin:1rem .75rem .5rem}
i{font-style:italic;color:#666}
.flex {display:flex}
.space-between{justify-content:space-between}

nav{background:#fff;border-bottom:1px solid #eee;display:flex;gap:.5rem;padding:.6rem .75rem;z-index:1;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
nav.tabs {position:sticky;top:0}
nav a,
nav span {text-align:center;text-decoration:none;padding:.6rem;border:1px solid #e5e7eb;border-radius:.6rem;background:#f8fafc;color:#111}
nav span {background:#fff}
nav a:active{transform:scale(.98)}
nav a.active { background: #e5e7eb;font-weight:600;}

.week-note{width:calc(100% - 1.5rem);margin:.5rem .75rem 0;padding:.6rem;border:1px solid #e5e7eb;border-radius:.5rem;min-height:4.5rem;font:inherit}

.box{margin:.75rem}
.box-big{margin:.75rem}
table{width:100%;border-collapse:collapse;background:#fff;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid #f1f5f9;border-radius:.6rem}
.inactive table {display: none}
.open table {display:block;}
.toggle { cursor: pointer;width: 30px; height: 30px; background: url('//icon.ontbrand.com/regular/000/plus.svg') no-repeat center; background-size: 8px; border-radius: 15px; vertical-align: top; margin-top: -2px; border: 1px solid #cccc; margin-right: 8px; display: inline-block; text-align: center; }
.current .toggle,
.open .toggle { background: url('//icon.ontbrand.com/regular/000/minus.svg') no-repeat center; background-size: 9px; }
.toggle:hover { background-color: #eee; }
th,td{white-space:nowrap;padding:.6rem .7rem;border-bottom:1px solid #f1f5f9;font-size:.9rem;text-align: left;}
td.name { width: 100%; white-space: normal; }
th{top:2.6rem;z-index:1;font-weight:600}
tr:last-child td{border-bottom:0}
.block { border-bottom:1px solid #eee; padding-bottom: 10px; padding-top: 4px; }

.bar td{background:#eee;font-weight:600;text-transform:capitalize;border-bottom:1px solid #e5e7eb}

/* simpele status-indicatoren */
.check{width:1.8rem;position:relative;}
.check::before{content:"☐";display:inline-block}
.check.done::before{content:"✔";color:#16a34a;font-weight:600}
.check.todo::before{color:#64748b}

/* circels */
span.circle{width:10px;height:10px;position:absolute;border-radius:5px;left:-5px;top:calc(50% - 5px);}

/* kleurlabels (zacht) */
.algemeen { background: #cbd5e1; } /* donker lichtgrijs-blauw */
.oranje   { background: #ff7f00; } /* fel oranje */
.paars    { background: #800080; } /* fel paars */
.rood     { background: #ff0000; } /* fel rood */
.zwart    { background: #000000; } /* zwart */
.groen    { background: #008000; } /* fel groen */
.blauw    { background: #0000ff; } /* fel blauw */
.overig   { background: #808080; } /* neutraal grijs */
.kelder   { background: #4b5563; } /* donker grijsblauw */

span.red {color:#f00;font-weight:600}

form { margin: 0 auto; max-width: 500px; margin-top: 40vh; }
form input {font-family: 'Inter', sans-serif;font-size:16px;margin:.3rem 0;width: 100%;max-width:500px;padding: 20px;border: 1px solid #eee;border-radius:.6rem;}
form input[type="submit"] {background:#1a70e3;color:#fff;border:0;font-weight:600;}

/* lichte verbetering op grotere schermen */
@media (min-width:700px){
	h1{font-size:1.25rem}
	th,td{font-size:.95rem}
	nav{gap:.75rem}
}