/* Stijl voor de bewonersomgeving, beheer en privacy — zelfde huisstijl als index.html */
:root{
  --stone:#edebdf; --stone-hi:#f6f4ea; --ink:#1e2a20; --ink-soft:#46543f; --line:#cdc9b4;
  --water:#2b5a5e; --water-dim:#234b4e; --moss:#4f6c3c; --brass:#b08a3f; --brass-dim:#8f6f2f;
  --danger:#9b3b2e; --card:#ffffff;
  --shadow:0 1px 2px rgba(30,42,32,.06), 0 8px 24px -12px rgba(30,42,32,.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --stone:#161d17; --stone-hi:#1c2419; --ink:#eae7da; --ink-soft:#b7bfae; --line:#3a4536;
    --water:#6fb4b9; --water-dim:#8ecbcf; --moss:#8fb374; --brass:#d9b164; --brass-dim:#e8c886;
    --danger:#e08b7c; --card:#1f2a1f;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --stone:#161d17; --stone-hi:#1c2419; --ink:#eae7da; --ink-soft:#b7bfae; --line:#3a4536;
  --water:#6fb4b9; --water-dim:#8ecbcf; --moss:#8fb374; --brass:#d9b164; --brass-dim:#e8c886;
  --danger:#e08b7c; --card:#1f2a1f;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
}

*{box-sizing:border-box;}
h1,h2,h3,h4,p,ul,figure{margin:0;}
body{
  background:var(--stone); color:var(--ink);
  font-family:'Karla',system-ui,-apple-system,sans-serif; font-size:17px; line-height:1.6;
  min-height:100vh; display:flex; flex-direction:column;
}
main{flex:1; width:100%; min-width:0;}
a{color:var(--water);}
.wrap{max-width:960px; margin:0 auto; padding:0 28px;}
h1,h2,h3{font-family:'Fraunces',Georgia,serif; font-weight:500; letter-spacing:-.01em; text-wrap:balance;}
.eyebrow{font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--water);}
.muted{color:var(--ink-soft);}
.small{font-size:.86rem;}
[hidden]{display:none !important;}

/* header */
header.site{border-bottom:1px solid var(--line); background:var(--stone);}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:10px; font-family:'Fraunces',serif; font-weight:600; font-size:1.05rem; text-decoration:none; color:var(--ink);}
.brand .mark{width:11px; height:11px; border-radius:50%; background:var(--water); box-shadow:0 0 0 3px color-mix(in srgb, var(--water) 22%, transparent);}
.nav-right{display:flex; align-items:center; gap:14px; font-size:.86rem; flex-wrap:wrap;}
.nav-right .who{color:var(--ink-soft); overflow-wrap:anywhere;}

/* page head */
.page-head{padding:48px 0 28px;}
.page-head h1{font-size:clamp(1.9rem,4vw,2.6rem); margin-top:10px;}
.page-head p{color:var(--ink-soft); margin-top:12px; max-width:60ch;}

/* panels & cards */
.panel{
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  box-shadow:var(--shadow); padding:32px;
}
.panel + .panel{margin-top:22px;}
.panel h2{font-size:1.4rem;}
.panel h3{font-size:1.12rem; font-weight:600;}
.panel > p{color:var(--ink-soft); margin-top:8px;}
.narrow{max-width:520px;}
.stack{display:flex; flex-direction:column; gap:16px;}
.list{display:flex; flex-direction:column;}
.item{padding:20px 0; border-top:1px solid var(--line);}
.item:first-child{border-top:none; padding-top:4px;}
.item-head{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap;}
.item h3, .item h4{font-family:'Fraunces',serif; font-weight:600; font-size:1.08rem;}
.item p{color:var(--ink-soft); font-size:.94rem; margin-top:6px; white-space:pre-line;}
.meta{font-family:'IBM Plex Mono',monospace; font-size:.74rem; color:var(--ink-soft); letter-spacing:.03em; margin-top:6px;}
.updates{margin-top:12px; padding-left:14px; border-left:2px solid var(--line); display:flex; flex-direction:column; gap:10px;}
.updates p{margin-top:2px;}
.empty{color:var(--ink-soft); font-size:.94rem; padding:8px 0;}

/* status chips */
.status{font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.04em; padding:4px 10px; border-radius:20px; white-space:nowrap; display:inline-block;}
.status-watch, .status-nieuw{background:color-mix(in srgb, var(--brass) 18%, transparent); color:var(--brass-dim);}
.status-progress, .status-in-behandeling, .status-gemeld-bij-beheer{background:color-mix(in srgb, var(--water) 16%, transparent); color:var(--water);}
.status-resolved, .status-opgelost, .status-goedgekeurd{background:color-mix(in srgb, var(--moss) 16%, transparent); color:var(--moss);}
.status-gesloten, .status-afgewezen{background:color-mix(in srgb, var(--ink-soft) 14%, transparent); color:var(--ink-soft);}

/* tabs */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:24px; overflow-x:auto; scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{
  background:none; border:none; border-bottom:2px solid transparent; padding:10px 14px; margin-bottom:-1px;
  font:600 .92rem 'Karla',sans-serif; color:var(--ink-soft); cursor:pointer; white-space:nowrap;
}
.tab:hover{color:var(--water);}
.tab[aria-selected="true"]{color:var(--water); border-bottom-color:var(--water);}
.tab .count{font-family:'IBM Plex Mono',monospace; font-size:.72rem; margin-left:6px; color:var(--brass-dim);}

/* forms */
form.stack{gap:14px;}
.field label, .label{
  display:block; font-size:.76rem; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace;
  letter-spacing:.05em; text-transform:uppercase; margin-bottom:6px;
}
.field input, .field textarea, .field select{
  width:100%; border:1px solid var(--line); border-radius:4px; padding:12px 14px;
  background:var(--stone-hi); color:var(--ink); font:inherit; font-size:.94rem;
}
.field textarea{min-height:120px; resize:vertical;}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible{outline:2px solid var(--water); outline-offset:1px;}
.row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px; border-radius:4px; border:1px solid transparent;
  font:600 .92rem 'Karla',sans-serif; cursor:pointer; text-decoration:none;
}
.btn-primary{background:var(--water); color:#f4f1e6;}
.btn-primary:hover{background:var(--water-dim);}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink);}
.btn-ghost:hover{border-color:var(--water); color:var(--water);}
.btn-small{padding:7px 12px; font-size:.84rem;}
.btn-danger{background:transparent; border-color:color-mix(in srgb, var(--danger) 50%, transparent); color:var(--danger);}
.btn:disabled{opacity:.55; cursor:default;}
.actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.msg{font-size:.88rem; min-height:1.2em;}
.msg.ok{color:var(--moss);}
.msg.err{color:var(--danger);}

/* poll */
.poll-options{display:flex; flex-direction:column; gap:8px; margin-top:14px;}
.poll-option{
  position:relative; display:flex; justify-content:space-between; gap:12px; align-items:center;
  width:100%; text-align:left; padding:12px 14px; border:1px solid var(--line); border-radius:4px;
  background:var(--stone-hi); color:var(--ink); font:inherit; font-size:.94rem; cursor:pointer; overflow:hidden;
}
.poll-option:hover:not(:disabled){border-color:var(--water);}
.poll-option:disabled{cursor:default;}
.poll-option .bar{position:absolute; inset:0 auto 0 0; background:color-mix(in srgb, var(--water) 14%, transparent); z-index:0;}
.poll-option > span{position:relative; z-index:1;}
.poll-option.mine{border-color:var(--water); box-shadow:inset 0 0 0 1px var(--water);}
.poll-option .pct{font-family:'IBM Plex Mono',monospace; font-size:.8rem; color:var(--ink-soft); white-space:nowrap;}

/* table (beheer) */
.table-scroll{overflow-x:auto;}
table.data{width:100%; border-collapse:collapse; font-size:.9rem;}
table.data th{text-align:left; font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); padding:8px 10px 8px 0; border-bottom:1px solid var(--line);}
table.data td{padding:12px 10px 12px 0; border-bottom:1px solid var(--line); vertical-align:top;}

/* notice */
.notice{padding:16px 18px; border:1px solid var(--line); border-radius:6px; background:var(--stone-hi); font-size:.92rem; color:var(--ink-soft);}
.notice strong{color:var(--ink);}

footer{padding:36px 0 44px; margin-top:56px; border-top:1px solid var(--line); font-size:.84rem; color:var(--ink-soft);}
footer .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;}
footer a{color:var(--ink-soft);}

@media (max-width: 640px){
  body{font-size:16px;}
  .wrap{padding:0 20px;}
  .panel{padding:22px;}
  .row{grid-template-columns:1fr;}
  .page-head{padding:36px 0 22px;}
}