/* Beslis-kaarten — mobiel-eerst, TalentFirst-huisstijl */
:root { --rood: #E10D36; --blauw: #0E3A79; --grijs: #f4f5f7; }
* { box-sizing: border-box; margin: 0; }
/* hidden-attribuut moet ALTIJD winnen van display:flex op login-screen/modal-overlay */
[hidden] { display: none !important; }
body { font-family: 'Roboto Slab', serif; background: var(--grijs); color: #222; }

#login-screen { display: flex; min-height: 100vh; align-items: center; justify-content: center; }
.login-box { background: #fff; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.08); text-align: center; width: min(90vw, 340px); }
.login-box h1 { color: var(--blauw); margin-bottom: .25rem; }
.login-box input { width: 100%; padding: .7rem; margin: 1rem 0 .5rem; border: 1px solid #ccc; border-radius: 8px; font: inherit; }
.login-box button { width: 100%; padding: .7rem; background: var(--rood); color: #fff; border: 0; border-radius: 8px; font: inherit; font-weight: 700; }
.error { color: var(--rood); margin-top: .5rem; }

header { background: var(--blauw); color: #fff; padding: .9rem 1rem; position: sticky; top: 0; z-index: 5; }
header h1 { font-size: 1.15rem; display: inline; }
.stats { display: inline; margin-left: .75rem; opacity: .9; font-size: .9rem; }

main { padding: .75rem; max-width: 640px; margin: 0 auto; }
.kaart { background: #fff; border-radius: 12px; padding: 1rem; margin-bottom: .75rem; box-shadow: 0 1px 4px rgba(0,0,0,.06); border-left: 4px solid #bbb; transition: opacity .3s, transform .3s; }
.kaart.prio-hoog { border-left-color: var(--rood); }
.kaart.prio-middel { border-left-color: #e8a13a; }
.kaart.bezig { opacity: .6; pointer-events: none; }
.kaart.weg { opacity: 0; transform: translateX(30px); }
.kaart-kop { display: flex; justify-content: space-between; font-size: .8rem; margin-bottom: .4rem; }
.badge { font-weight: 700; }
.angel { color: var(--blauw); }
.kaart h2 { font-size: 1.05rem; margin-bottom: .4rem; }
.context { font-size: .92rem; margin-bottom: .4rem; }
.voorstel { font-size: .92rem; margin-bottom: .4rem; }
.reden { font-size: .8rem; color: #777; margin-bottom: .4rem; }
.acties { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.acties button { flex: 1 1 auto; min-height: 44px; padding: .5rem .6rem; border: 0; border-radius: 8px; font: inherit; font-size: .9rem; cursor: pointer; background: #e9ecf1; }
.acties .ja { background: #1a9e4b; color: #fff; font-weight: 700; }
.acties .nee { background: var(--rood); color: #fff; }
.acties .volledig { flex: 0 0 52px; }

footer { text-align: center; padding: 1rem; font-size: .85rem; }
footer a { color: var(--blauw); }

#afgehandeld { max-width: 640px; margin: 0 auto; padding: 0 .75rem 2rem; }
.afgehandeld-rij { background: #fff; border-radius: 8px; padding: .6rem .8rem; margin-bottom: .4rem; font-size: .85rem; display: flex; flex-direction: column; gap: .15rem; }
.afgehandeld-rij .dim { color: #888; font-size: .78rem; }
[class^="status-"] { font-weight: 700; text-transform: uppercase; font-size: .72rem; }
.status-ja { color: #1a9e4b; } .status-nee { color: var(--rood); }
.status-later { color: #e8a13a; } .status-anders { color: var(--blauw); }

/* --- Ter kennisname sectie --- */
#kennisname-sectie { max-width: 640px; margin: 0 auto; padding: 0 .75rem 1rem; }
.sectie-kop { font-size: .95rem; color: var(--blauw); margin-bottom: .5rem; padding-top: .25rem; border-top: 1px solid #dde; margin-top: .25rem; padding-left: .1rem; }
.kennisname-badge { background: var(--blauw); color: #fff; border-radius: 99px; padding: .1em .5em; font-size: .72rem; vertical-align: middle; margin-left: .35rem; }
.kaart.kennisname { border-left-color: #9ab; opacity: .92; }
.kaart.kennisname.prio-hoog { border-left-color: var(--rood); opacity: 1; }
.kaart.kennisname.prio-middel { border-left-color: #e8a13a; }
.acties .gelezen { background: var(--blauw); color: #fff; font-weight: 700; }

#modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 10; padding: 1rem; }
.modal { background: #fff; border-radius: 12px; padding: 1.25rem; width: min(92vw, 480px); max-height: 85vh; overflow-y: auto; }
.modal h3 { margin-bottom: .75rem; font-size: 1rem; }
.modal textarea { width: 100%; font: inherit; padding: .6rem; border: 1px solid #ccc; border-radius: 8px; }
.modal-acties { display: flex; gap: .5rem; margin-top: .9rem; }
.modal-acties button { flex: 1; min-height: 44px; border: 0; border-radius: 8px; font: inherit; background: var(--blauw); color: #fff; cursor: pointer; }
.modal-acties .secundair { background: #e9ecf1; color: #222; }
.volledig-tekst { white-space: pre-wrap; font-family: inherit; font-size: .85rem; background: var(--grijs); padding: .75rem; border-radius: 8px; }