/* Stijl van de andere pagina's (themamappen, beheer, aanmelden), in dezelfde
   prikbord-look als de startpagina: papiertjes met tape, labeltjes, warme kleuren. */
:root{
  --bord:#EADCC4; --papier:#FFFDF8; --papier-warm:#FFF8E4; --papier-zacht:#FBF6EC;
  --inkt:#2B2A28; --bruin:#6B4A2E; --grijs:#7A6650; --rand:#E6DBC8; --stippel:#D9CBB3;
  --terracotta:#B5603F; --knop:#8E4A2E; --honing:#E3D49E;
  --fout:#8E2F22; --fout-licht:#F7D9D2; --goed:#3E5A2E; --goed-licht:#E6EEDC;
  --kop:Fraunces, Georgia, serif; --tekst:'DM Sans','Segoe UI',system-ui,sans-serif; --hand:Caveat,'Segoe Print',cursive;
  /* oude namen, nog gebruikt in inline stijlen van beheer */
  --accent:#8E5E3E; --accent-donker:#6B4A2E; --accent-licht:#FBF6EC;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--tekst);color:var(--inkt);background:var(--bord);display:flex;justify-content:center;padding:40px 20px 64px;}
.wrap{width:100%;max-width:640px;}
.wrap.breed{max-width:820px;}
.wrap.beheer{max-width:960px;}
a{color:var(--knop)}
a:hover{color:var(--bruin)}

/* bovenbalk: labeltjes */
.topbalk{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:26px;flex-wrap:wrap}
.topbalk .rechts{display:flex;gap:10px;align-items:center}
.topbalk form{margin:0}
.label{position:relative;display:inline-block;background:var(--papier);border:1px solid var(--rand);border-radius:1px;padding:7px 16px 6px;font:500 13px var(--tekst);letter-spacing:.02em;color:var(--inkt);text-decoration:none;cursor:pointer;transform:rotate(-.8deg)}
.label:hover{color:var(--bruin);background:var(--papier-warm)}
.label .minitape{position:absolute;top:-6px;left:50%;width:30px;height:11px;margin-left:-15px;background:#AFD0CB;opacity:.9}
.topbalk .rechts form .label{transform:rotate(.8deg)}
.topbalk .rechts form .minitape{background:#E8C3BA}
.label.terug .minitape{background:var(--honing)}

/* paginatitel op een papiertje met tape */
h1{position:relative;display:inline-block;margin:10px 0 6px 4px;background:var(--papier-warm);padding:14px 26px 12px;font-family:var(--kop);font-weight:700;font-size:32px;line-height:1.1;color:var(--bruin);transform:rotate(-1deg)}
h1::before{content:"";position:absolute;top:-12px;left:50%;width:96px;height:24px;margin-left:-48px;background:var(--honing);opacity:.9;transform:rotate(-2deg)}
h1 .hand{font-family:var(--hand);font-size:1.3em;line-height:.8;color:var(--terracotta);display:inline-block;transform:rotate(-3deg)}
.sub{margin:12px 0 26px;font-size:14px;color:var(--grijs);}

/* sectiekoppen als labeltje */
h2{display:inline-block;margin:30px 0 12px;background:var(--papier);border:1px solid var(--rand);border-radius:1px;padding:5px 16px 4px;font-family:var(--kop);font-weight:700;font-size:19px;color:var(--bruin);transform:rotate(-.6deg)}

/* papieren blokken met tape */
.blok{position:relative;background:var(--papier);border-radius:4px;padding:24px 22px 20px;margin:18px 0 18px}
.blok::before{content:"";position:absolute;top:-11px;left:50%;width:90px;height:22px;margin-left:-45px;background:var(--honing);opacity:.85;transform:rotate(-2deg)}
.blok:nth-of-type(even)::before{background:#AFD0CB;transform:rotate(2deg)}
.blok > b:first-child{font-family:var(--kop);font-size:18px;color:var(--bruin)}

.melding{font-size:14px;color:var(--grijs);background:var(--papier);border-radius:4px;padding:12px 16px;line-height:1.55;margin:12px 0}
.melding.fout{color:var(--fout);background:var(--fout-licht)}
.melding.goed{color:var(--goed);background:var(--goed-licht)}
.let{margin-top:26px;font-size:13px;color:var(--grijs);background:var(--papier);border-radius:4px;padding:12px 16px;line-height:1.55}

/* knoppen als labeltjes */
.knoppen{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.knop{display:inline-block;font:500 13px var(--tekst);padding:7px 15px 6px;border:1px solid var(--rand);border-radius:1px;background:var(--papier);color:var(--inkt);cursor:pointer;text-decoration:none}
.knop:hover{background:var(--papier-warm);color:var(--bruin)}
.knop.hoofd{background:var(--knop);border-color:var(--knop);color:#fff;font-weight:700}
.knop.hoofd:hover{background:var(--bruin);border-color:var(--bruin);color:#fff}
.knop.gevaar:hover{background:var(--fout-licht);color:var(--fout);border-color:#E4B3A7}
.knop:disabled{opacity:.5;cursor:default}

/* formulieren */
label{display:block;font-size:13px;font-weight:700;color:var(--bruin);margin:14px 0 5px}
label:first-child{margin-top:0}
input[type=text],input[type=password],input[type=search],input[type=number],select,textarea{width:100%;padding:9px 12px;border:1px solid var(--rand);border-radius:2px;font:15px var(--tekst);background:#fff;color:var(--inkt)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--honing);border-color:#C7B174}
input[type=file]{font:14px var(--tekst)}
.vink{display:flex;gap:8px;align-items:center;font-weight:400;color:var(--inkt)}
.hint{font-size:12.5px;color:var(--grijs);margin-top:5px;line-height:1.5}
.rij{display:flex;gap:14px;flex-wrap:wrap}
.rij > div{flex:1;min-width:200px}

/* themamappen */
.zoek{margin:4px 0 16px;font-size:15px;padding:11px 14px;background:var(--papier)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 16px}
.filters .zoek{flex:2 1 240px;width:auto;margin:0}
.filters select{flex:1 1 160px;width:auto;background:var(--papier)}
h2.klas{display:flex;justify-content:space-between;align-items:baseline;gap:16px;width:100%;transform:none;background:transparent;border:0;padding:0;margin:34px 0 12px;color:var(--klaskleur,var(--bruin))}
h2.klas > span:first-child{background:var(--papier);border:1px solid var(--rand);padding:5px 16px 4px;transform:rotate(-.6deg);display:inline-block}
h2 .telling{font-family:var(--tekst);font-size:13px;color:var(--grijs);font-weight:400}
details.thema{position:relative;background:var(--papier);border-radius:4px;margin-bottom:10px}
details.thema > summary{list-style:none;cursor:pointer;padding:13px 16px 12px 18px;display:flex;justify-content:space-between;align-items:center;font-size:15px;user-select:none;border-left:6px solid var(--klastape,var(--honing))}
details.thema > summary::-webkit-details-marker{display:none}
details.thema > summary::before{content:'▸';color:var(--grijs);margin-right:10px;transition:transform .15s;display:inline-block;font-size:11px}
details.thema[open] > summary::before{transform:rotate(90deg)}
details.thema > summary:hover{background:var(--papier-warm)}
.thema-naam{flex:1;font-family:var(--kop);font-weight:700;font-size:16px;color:var(--klaskleur,var(--bruin))}
.thema-aantal{font-size:12.5px;color:var(--grijs);margin-left:12px}
.bestanden{border-top:1px dashed var(--stippel);background:var(--papier-zacht);padding:6px 0;border-radius:0 0 4px 4px}
.bestand{display:flex;align-items:center;padding:8px 16px 8px 36px;text-decoration:none;color:var(--inkt);font-size:14px;gap:10px}
.bestand:hover{background:var(--papier-warm);color:var(--bruin)}
.type{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;border-radius:2px;background:var(--rand);color:var(--inkt);min-width:38px;text-align:center}
.type.html,.type.htm{background:#DDE6CF;color:#3E5A2E}
.type.pdf{background:#F2D5C8;color:#8A3E1E}
.type.docx,.type.doc{background:#D3DEEA;color:#294969}
.type.pptx,.type.ppt{background:#F0D9C2;color:#7A4620}
.type.xlsx,.type.xls{background:#D3E4D0;color:#2F6132}
.type.png,.type.jpg,.type.jpeg,.type.gif,.type.webp,.type.svg{background:#E6DCEC;color:#5A3970}
.type.mp3,.type.mp4,.type.m4a,.type.mov{background:#ECE3C8;color:#6A5820}
.naam{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leeg{padding:10px 16px;font-size:13px;color:var(--grijs);font-style:italic}

/* beheer: tabbladen als labeltjes, tabellen op papier */
nav.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 22px}
nav.tabs button{font:500 14px var(--tekst);padding:8px 16px 7px;border:1px solid var(--rand);border-radius:1px;background:var(--papier);color:var(--grijs);cursor:pointer}
nav.tabs button:nth-child(odd){transform:rotate(-.6deg)} nav.tabs button:nth-child(even){transform:rotate(.6deg)}
nav.tabs button:hover{color:var(--bruin);background:var(--papier-warm)}
nav.tabs button.actief{background:var(--knop);border-color:var(--knop);color:#fff;font-weight:700}
.paneel{display:none}
.paneel.actief{display:block}
.tabel{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--papier)}
.tabel th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--grijs);padding:9px 10px;border-bottom:1px dashed var(--stippel)}
.tabel td{padding:9px 10px;border-bottom:1px dashed #EDE3D2;vertical-align:top}
.tabel tr:hover td{background:var(--papier-zacht)}
.tabel .klein{font-size:12px;color:var(--grijs);word-break:break-all}
.tabel .acties{white-space:nowrap;text-align:right}
.tabel .acties .knop{padding:4px 9px 3px;font-size:12px}
.scroll{overflow-x:auto;background:var(--papier);border-radius:4px}
/* Gedeeld materiaal: inklapbare groepen per pakket en schuifvak */
.groepacties{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:-6px 0 10px}
.groepacties .hint{margin-right:auto}
.groepacties .knop{padding:4px 11px 3px;font-size:12px}
.tabel tr.groepkop td,.tabel tr.groepkop:hover td{padding:0;background:var(--papier-warm);border-bottom:1px dashed var(--stippel)}
.groepknop{display:block;width:100%;text-align:left;font:inherit;color:var(--inkt);padding:10px;border:0;background:none;cursor:pointer}
.groepknop:hover{color:var(--bruin)}
.groepknop .pijl{display:inline-block;width:1em;color:var(--bruin);transition:transform .15s}
.groepknop[aria-expanded="true"] .pijl{transform:rotate(90deg)}
.tabel tr.in-groep td:first-child{padding-left:28px}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.token{background:var(--papier-warm);border:1px dashed #C7B174;border-radius:2px;padding:10px 12px;word-break:break-all;margin-top:8px}
.verborgen{display:none !important}

@media (max-width:600px){
  body{padding:28px 16px 48px}
  h1{font-size:26px}
  .tabel div.klein{display:none}
}