/* ================================= */
/* BASIS */
/* ================================= */
:root{--roze:#e9007c;--blauw:#1d3557;--blauw-hover:#294f7c;--achtergrond:#f4f5f7;--kaart:#fff;--tekst:#172033;--muted:#667085;--rand:#e3e6ea;--schaduw:0 6px 22px rgba(20,31,51,.08);--backlog:#7a7f87;--todo:#d43737;--doing:#ef8f00;--done:#2f8a49;--must:#b3261e;--should:#d98200;--could:#3b7d23;--wont:#6c757d}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,sans-serif;background:var(--achtergrond);color:var(--tekst)}a{color:inherit}button,input,textarea,select{font:inherit}.pagina{min-height:100vh;background:var(--achtergrond);color:var(--tekst);display:flex;flex-direction:column}
/* ================================= */
/* HEADER */
/* ================================= */
header{background:linear-gradient(135deg,#e9007c,#c9006b);color:#fff;padding:18px 40px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;box-shadow:0 3px 14px rgba(64,0,34,.16)}header h1{margin:0;font-size:26px}header p{margin:4px 0 0;opacity:.88}.header-knoppen{display:flex;gap:9px;flex-wrap:wrap}.knop{background:#fff;color:var(--blauw);padding:10px 14px;border:1px solid rgba(255,255,255,.3);border-radius:8px;text-decoration:none;font-weight:700;cursor:pointer;transition:.18s ease}.knop:hover{background:#f4f4f4;transform:translateY(-1px)}
/* ================================= */
/* HOOFDINHOUD */
/* ================================= */
main{padding:34px 40px 48px;flex:1;width:100%;max-width:1680px;margin:auto}main h2{text-align:center}main>h3{text-align:center;color:var(--muted);margin-bottom:30px}.eyebrow{font-size:11px;letter-spacing:.13em;font-weight:800;color:var(--roze);margin-bottom:5px}.page-title{margin:0!important;text-align:left!important;font-size:30px}.muted{color:var(--muted)}.grid{display:grid;gap:20px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.card,.panel{background:var(--kaart);padding:20px;border:1px solid var(--rand);border-radius:12px;box-shadow:var(--schaduw)}
/* ================================= */
/* KNOPPEN + FORMULIEREN */
/* ================================= */
.footer-knop,.btn{display:inline-block;background:var(--blauw);color:#fff;padding:10px 16px;border:0;border-radius:8px;text-decoration:none;font-weight:700;cursor:pointer;transition:.18s ease}.footer-knop:hover,.btn:hover{background:var(--blauw-hover);transform:translateY(-1px)}.btn.secundair{background:#6c757d}.btn.gevaar{background:#b3261e}.btn.klein{padding:6px 10px;font-size:13px}.btn.vol{width:100%;text-align:center}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.veld{display:flex;flex-direction:column;gap:6px}.veld.vol{grid-column:1/-1}.veld label{font-size:13px;font-weight:700;color:#344054}.veld input,.veld textarea,.veld select{width:100%;padding:11px 12px;border:1px solid #cfd4dc;border-radius:8px;background:#fff;color:#111;outline:none;transition:.16s ease}.veld input:focus,.veld textarea:focus,.veld select:focus{border-color:#607d9f;box-shadow:0 0 0 3px rgba(29,53,87,.09)}.veld textarea{min-height:96px;resize:vertical}.veld-hint{font-size:11px;color:var(--muted)}.melding{max-width:900px;margin:0 auto 25px;padding:12px 16px;border-radius:8px;background:#dff3e4;border:1px solid #9ed7ab}.melding.error{background:#fde0dd;border-color:#e6a39d}.auth-wrap{max-width:460px;margin:40px auto}.auth-wrap h2{text-align:left}.help{font-size:13px;color:var(--muted)}
/* ================================= */
/* BORD - BOVENKANT */
/* ================================= */
.trello-topbar{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:22px}.personen-legenda{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:780px}.persoon-chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--rand);border-radius:999px;padding:7px 10px;font-size:12px;font-weight:700;box-shadow:0 2px 7px rgba(20,31,51,.04)}.persoon-dot,.creator-dot{display:block;width:9px;height:9px;border-radius:50%;background:var(--person-color);flex:0 0 auto}.nieuwe-taak-panel{margin-bottom:22px}.panel-kop h3{margin:0 0 4px}.panel-kop p{margin:0 0 16px;color:var(--muted);font-size:14px}
/* ================================= */
/* BORD - KOLOMMEN */
/* ================================= */
.bord{display:grid;grid-template-columns:repeat(4,minmax(275px,1fr));gap:16px;align-items:start;overflow-x:auto;padding:2px 2px 16px}.kolom{--status-color:var(--backlog);background:#eceef1;border:1px solid #dfe2e6;border-radius:12px;padding:12px;min-height:310px;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}.kolom.status-backlog,.taak.status-backlog{--status-color:var(--backlog)}.kolom.status-todo,.taak.status-todo{--status-color:var(--todo)}.kolom.status-doing,.taak.status-doing{--status-color:var(--doing)}.kolom.status-done,.taak.status-done{--status-color:var(--done)}.kolom.moscow-must,.taak.moscow-must{--status-color:var(--must)}.kolom.moscow-should,.taak.moscow-should{--status-color:var(--should)}.kolom.moscow-could,.taak.moscow-could{--status-color:var(--could)}.kolom.moscow-wont,.taak.moscow-wont{--status-color:var(--wont)}.kolom.drag-over{border-color:var(--status-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--status-color) 18%,transparent);background:color-mix(in srgb,var(--status-color) 7%,#eceef1)}.kolom-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:3px 3px 12px;border-bottom:3px solid var(--status-color);margin-bottom:12px}.kolom-titel{display:flex;align-items:center;gap:8px}.kolom-kop h3{margin:0;text-align:left;color:#2b3340;font-size:16px}.status-dot,.taak-status{display:block;border-radius:50%;background:var(--status-color);flex:0 0 auto}.status-dot{width:11px;height:11px}.taak-status{width:8px;height:8px;margin-top:5px}.kolom-count{min-width:25px;height:25px;border-radius:999px;display:grid;place-items:center;background:#fff;border:1px solid #d6dae0;color:#576071;font-size:12px;font-weight:800}.kolom-inhoud{min-height:235px}.lege-kolom{border:1px dashed #c7ccd3;color:#8b929d;border-radius:9px;padding:18px;text-align:center;font-size:13px;background:rgba(255,255,255,.35)}
/* ================================= */
/* BORD - KAARTEN */
/* ================================= */
.taak{--status-color:var(--backlog);position:relative;background:#fff;border:1px solid var(--rand);border-top:4px solid var(--status-color);border-left:5px solid var(--person-color);border-radius:10px;padding:12px;margin-bottom:12px;box-shadow:0 3px 10px rgba(20,31,51,.08);transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease}.taak:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(20,31,51,.11)}.taak.is-dragging{opacity:.42;transform:scale(.985)}.taak.is-readonly{border-left-style:solid}.taak-kop{display:flex;align-items:flex-start;gap:7px}.taak-identiteit{flex:1;min-width:0}.taak-titel-wrap{display:flex;align-items:flex-start;gap:7px;min-width:0}.taak h4{margin:0;font-size:15px;line-height:1.35;overflow:hidden;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.creator-label{display:inline-flex;align-items:center;gap:5px;max-width:100%;margin-top:6px;padding:3px 7px;border:1px solid color-mix(in srgb,var(--person-color) 30%,#e4e7ec);border-radius:999px;background:color-mix(in srgb,var(--person-color) 7%,#fff);color:var(--person-color);font-size:10px;font-weight:800;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.creator-label .creator-dot{width:7px;height:7px}.taak-kop-acties{display:flex;align-items:center;gap:1px;flex:0 0 auto}.taak-body{display:block}.taak.is-collapsed{padding-top:10px;padding-bottom:10px}.taak.is-collapsed .taak-body{display:none}.taak.is-collapsed .drag-handle,.taak.is-collapsed .taak-menu{display:none}.taak.is-collapsed .kaart-inklap svg{transform:rotate(-90deg)}.taak-beschrijving{white-space:pre-wrap;margin:11px 0 0;color:#475467;font-size:13px;line-height:1.5}.taak-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid #edf0f2}.taak-datum{font-size:11px;color:#8a919c}
/* ================================= */
/* KAART ACTIES + SLEPEN */
/* ================================= */
.drag-handle,.kaart-inklap{width:28px;height:28px;border:0;border-radius:7px;background:transparent;color:#7b8492;display:grid;place-items:center;padding:0;flex:0 0 auto}.drag-handle{cursor:grab}.drag-handle:active{cursor:grabbing}.drag-handle:hover,.kaart-inklap:hover{background:#f1f3f5;color:#273142}.drag-handle svg{width:14px;height:18px;fill:currentColor}.kaart-inklap{cursor:pointer}.kaart-inklap svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s ease}.taak-menu{position:relative;flex:0 0 auto}.taak-menu summary{list-style:none;width:31px;height:28px;border-radius:7px;display:grid;place-items:center;color:#667085;font-weight:900;letter-spacing:1px;cursor:pointer;user-select:none}.taak-menu summary::-webkit-details-marker{display:none}.taak-menu summary:hover,.taak-menu[open] summary{background:#f1f3f5;color:#273142}.taak-menu-popup{position:absolute;right:0;top:33px;z-index:20;width:180px;background:#fff;border:1px solid #dfe3e8;border-radius:9px;padding:6px;box-shadow:0 12px 30px rgba(24,34,48,.18)}.taak-menu-popup form{margin:0}.menu-actie{width:100%;display:flex;align-items:center;gap:8px;border:0;background:transparent;color:#344054;padding:8px 9px;border-radius:6px;text-align:left;font-size:12px;cursor:pointer}.menu-actie:hover{background:#f2f4f7}.menu-gevaar{color:#b42318}.menu-scheiding{height:1px;background:#edf0f2;margin:5px 2px}
/* ================================= */
/* BESTANDEN */
/* ================================= */
.bijlage-knop{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:7px;background:#f2f4f7;color:#475467;font-size:11px;font-weight:700;cursor:pointer;transition:.16s ease}.bijlage-knop:hover{background:#e7ebf0}.bijlage-knop input{display:none}.paperclip-icon{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}.bijlagen{margin-top:10px}.taak-foto{display:block;width:100%;max-height:220px;object-fit:cover;border-radius:8px;border:1px solid #dde1e6}.foto-link{display:block}.bestand{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:12px}.bestand a{color:var(--blauw);font-weight:700;word-break:break-word}
/* ================================= */
/* MODALS */
/* ================================= */
.modal{border:0;padding:0;background:transparent;max-width:none;max-height:none}.modal::backdrop{background:rgba(12,18,28,.58);backdrop-filter:blur(2px)}.modal-card{width:min(560px,calc(100vw - 30px));background:#fff;color:#172033;border-radius:14px;padding:22px;box-shadow:0 24px 70px rgba(0,0,0,.28);display:grid;gap:15px}.modal-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.modal-kop h3{margin:0;font-size:22px}.modal-sluiten{border:0;background:#f1f3f5;color:#667085;width:34px;height:34px;border-radius:8px;font-size:22px;line-height:1;cursor:pointer}.modal-sluiten:hover{background:#e5e8ec}.modal-acties{display:flex;justify-content:flex-end;gap:9px;margin-top:4px}
/* ================================= */
/* LOGS + PRIVACY */
/* ================================= */
.log-tabel{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;box-shadow:var(--schaduw)}.log-tabel th,.log-tabel td{padding:12px;border-bottom:1px solid #ddd;text-align:left;vertical-align:top}.log-tabel th{background:var(--blauw);color:#fff}.log-details{max-width:480px;word-break:break-word;font-family:Consolas,monospace;font-size:12px}.privacy{max-width:900px;margin:auto}.privacy h2,.privacy h3{text-align:left}.privacy li{margin-bottom:8px}
/* ================================= */
/* GEBRUIKERSBEHEER */
/* ================================= */
.gebruikers-card{margin-top:20px}.tabel-wrap{overflow-x:auto}.user-tabel{width:100%;border-collapse:collapse;min-width:850px}.user-tabel th,.user-tabel td{padding:12px;border-bottom:1px solid #ddd;text-align:left;vertical-align:middle}.user-tabel th{background:var(--blauw);color:#fff}.user-acties{display:flex;gap:8px;flex-wrap:wrap}.user-acties form{margin:0}.status-badge{display:inline-block;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:700}.status-badge.actief{background:#dff3e4;color:#236232}.status-badge.inactief{background:#fde0dd;color:#8b1e18}code{background:rgba(0,0,0,.08);padding:2px 5px;border-radius:4px}
/* ================================= */
/* FOOTER */
/* ================================= */
footer{text-align:center;padding:20px;color:#667085}.footer-inhoud{display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap}.footer-inhoud p{margin:0}
/* ================================= */
/* DARK MODE */
/* ================================= */
body.dark-mode{--achtergrond:#111318;--kaart:#1e2229;--tekst:#f2f4f7;--muted:#aeb5c0;--rand:#343941}body.dark-mode .pagina{background:var(--achtergrond);color:#fff}body.dark-mode header{background:#0b1628}body.dark-mode footer{color:#aaa}body.dark-mode .card,body.dark-mode .panel,body.dark-mode .log-tabel{background:#1e2229;color:#fff}body.dark-mode .veld label{color:#d0d5dd}body.dark-mode .veld input,body.dark-mode .veld textarea,body.dark-mode .veld select{background:#171a20;color:#fff;border-color:#424852}body.dark-mode .persoon-chip{background:#1e2229;border-color:#343941}body.dark-mode .kolom{background:#191d23;border-color:#30353d}body.dark-mode .kolom.drag-over{background:color-mix(in srgb,var(--status-color) 10%,#191d23)}body.dark-mode .kolom-kop h3{color:#f2f4f7}body.dark-mode .kolom-count{background:#242932;border-color:#3a4049;color:#d6dae0}body.dark-mode .lege-kolom{background:rgba(255,255,255,.025);border-color:#3b414b;color:#808895}body.dark-mode .taak{background:#242932;border-right-color:#343941;border-bottom-color:#343941}body.dark-mode .taak-beschrijving{color:#c0c6cf}body.dark-mode .creator-label{background:color-mix(in srgb,var(--person-color) 14%,#242932);border-color:color-mix(in srgb,var(--person-color) 40%,#424852)}body.dark-mode .taak-datum{color:#929aa6}body.dark-mode .taak-footer{border-color:#363c45}body.dark-mode .bijlage-knop{background:#343a43;color:#d8dce2}body.dark-mode .bijlage-knop:hover{background:#404752}body.dark-mode .bestand a{color:#82b5ec}body.dark-mode .taak-foto{border-color:#454b55}body.dark-mode .drag-handle:hover,body.dark-mode .kaart-inklap:hover,body.dark-mode .taak-menu summary:hover,body.dark-mode .taak-menu[open] summary{background:#333943;color:#fff}body.dark-mode .taak-menu-popup{background:#242932;border-color:#404650}body.dark-mode .menu-actie{color:#e5e7eb}body.dark-mode .menu-actie:hover{background:#343a43}body.dark-mode .menu-gevaar{color:#ff9b93}body.dark-mode .menu-scheiding{background:#3b414a}body.dark-mode .modal-card{background:#20242b;color:#fff}body.dark-mode .modal-sluiten{background:#343a43;color:#fff}body.dark-mode .user-tabel td,body.dark-mode .log-tabel td{border-color:#444}body.dark-mode .status-badge.actief{background:#204c2a;color:#c7f0cf}body.dark-mode .status-badge.inactief{background:#5d2420;color:#ffd3cf}body.dark-mode code{background:rgba(255,255,255,.1)}
/* ================================= */
/* RESPONSIVE */
/* ================================= */
@media(max-width:1100px){main{padding:28px 24px}.bord{grid-template-columns:repeat(4,290px)}.trello-topbar{align-items:flex-start}.personen-legenda{justify-content:flex-start}}
@media(max-width:700px){header{padding:16px 18px}header h1{font-size:21px}main{padding:22px 14px}.grid-2,.form-grid{grid-template-columns:1fr}.bord{grid-template-columns:repeat(4,278px);gap:12px}.page-title{font-size:25px}.personen-legenda{max-width:100%}.nieuwe-taak-panel{padding:16px}.modal-acties{flex-direction:column-reverse}.modal-acties .btn{width:100%;text-align:center}.taak{padding:11px}.drag-handle{width:25px}.taak-kop{gap:4px}}
/* ================================= */
/* LIVE SYNCHRONISATIE */
/* ================================= */
.live-status{display:inline-flex;align-items:center;gap:7px;margin-top:9px;padding:6px 9px;border:1px solid #cfe8d5;border-radius:999px;background:#f1fbf4;color:#28763c;font-size:11px;font-weight:800;transition:.18s ease}.live-dot{width:8px;height:8px;border-radius:50%;background:#35a854;box-shadow:0 0 0 3px rgba(53,168,84,.12)}.live-status.is-loading{border-color:#dbe2ea;background:#f5f7f9;color:#64748b}.live-status.is-loading .live-dot{background:#7c8a9a;animation:livePulse 1s infinite}.live-status.is-pending{border-color:#f2d497;background:#fff8e8;color:#946200}.live-status.is-pending .live-dot{background:#e49a00}.live-status.is-error{border-color:#f1b7b2;background:#fff0ef;color:#a52b22}.live-status.is-error .live-dot{background:#d43b32}@keyframes livePulse{0%,100%{opacity:.4}50%{opacity:1}}
/* ================================= */
/* PERFORMANCE CONSOLE */
/* ================================= */
.console-page{display:grid;gap:20px}.console-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}.console-kop p{margin:7px 0 0;max-width:850px}.console-stats{display:grid;grid-template-columns:repeat(5,minmax(135px,1fr));gap:12px}.console-stat{background:var(--kaart);border:1px solid var(--rand);border-radius:12px;padding:16px 18px;box-shadow:var(--schaduw);display:flex;flex-direction:column;gap:6px}.console-stat span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800}.console-stat strong{font-size:24px}.console-uitleg h3{margin:0 0 10px}.console-uitleg p{margin:12px 0 0}.console-legenda{display:flex;flex-wrap:wrap;gap:14px}.console-legenda span{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700}.perf-dot{width:9px;height:9px;border-radius:50%;display:inline-block}.perf-dot.goed{background:#2f8a49}.perf-dot.letop{background:#ef8f00}.perf-dot.traag{background:#d43737}.console-tabel-wrap{border-radius:12px;box-shadow:var(--schaduw)}.console-tabel{min-width:1100px;box-shadow:none}.console-tabel td{font-size:12px}.perf-time{display:inline-block;padding:5px 8px;border-radius:999px;font-weight:800}.perf-time.goed{background:#e4f4e8;color:#276c38}.perf-time.letop{background:#fff1d8;color:#8d5c00}.perf-time.traag{background:#fde5e3;color:#a52b22}.console-diagnose{margin-top:4px;max-width:320px;color:var(--muted);line-height:1.35}.console-fout{display:block;margin-top:7px;max-width:320px;white-space:normal;color:#b42318}
body.dark-mode .live-status.is-ok{background:#173521;border-color:#285d38;color:#bfe9c9}body.dark-mode .live-status.is-loading{background:#242a32;border-color:#3b434d;color:#c1c7d0}body.dark-mode .live-status.is-pending{background:#3c3015;border-color:#6b5420;color:#ffd981}body.dark-mode .live-status.is-error{background:#48211e;border-color:#74312c;color:#ffb8b2}body.dark-mode .console-stat{background:#1e2229;border-color:#343941}body.dark-mode .perf-time.goed{background:#204c2a;color:#c7f0cf}body.dark-mode .perf-time.letop{background:#5a4315;color:#ffe0a1}body.dark-mode .perf-time.traag{background:#5d2420;color:#ffd3cf}body.dark-mode .console-fout{color:#ffaaa3}
@media(max-width:900px){.console-stats{grid-template-columns:repeat(2,minmax(135px,1fr))}}@media(max-width:520px){.console-stats{grid-template-columns:1fr}.live-status{max-width:100%}}