/* PiCo: brandweerstijl met hints van de huisstijl van Veiligheidsregio Utrecht.
   Rood als hoofdkleur, antraciet voor de kopbalk, brandweergoud als accent.
   Op telefoons staat de navigatie onderin, binnen bereik van de duim. */
:root{
  --bg:#F2F3F5;--surface:#FFFFFF;--surface2:#F6F7F9;--ink:#1B1F24;--muted:#5E6772;--line:#E1E4E8;
  --red:#C8102E;--red-dark:#A00D25;--redsoft:#FCE8EB;--amber:#8A5A00;--ambersoft:#FFF3D6;--green:#22744A;--greensoft:#E3F3E9;
  --gold:#C9A13B;--goldsoft:#FBF3DF;
  --bar:#1E2329;--bar-ink:#FFFFFF;--bar-muted:#B7BEC7;
  --p0:#C8102E;--p1:#1F5FA8;--p2:#B87500;--p3:#22744A;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 4px 14px rgba(16,24,40,.06);
  --radius:16px;--radius-sm:12px;
  --display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --navh:64px;
  box-sizing:border-box;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0F1216;--surface:#1A1F25;--surface2:#222830;--ink:#ECEEF1;--muted:#9AA3AD;--line:#2B323A;
    --red:#E5394A;--red-dark:#C8102E;--redsoft:#3A1A1F;--amber:#F0B44C;--ambersoft:#33290F;--green:#5DBB82;--greensoft:#15291E;
    --gold:#D9B65A;--goldsoft:#2E2714;
    --bar:#151A1F;--bar-ink:#FFFFFF;--bar-muted:#9AA3AD;
    --p0:#E5394A;--p1:#5B9BE6;--p2:#F0B44C;--p3:#5DBB82;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  --bg:#0F1216;--surface:#1A1F25;--surface2:#222830;--ink:#ECEEF1;--muted:#9AA3AD;--line:#2B323A;
  --red:#E5394A;--red-dark:#C8102E;--redsoft:#3A1A1F;--amber:#F0B44C;--ambersoft:#33290F;--green:#5DBB82;--greensoft:#15291E;
  --gold:#D9B65A;--goldsoft:#2E2714;
  --bar:#151A1F;--bar-ink:#FFFFFF;--bar-muted:#9AA3AD;
  --p0:#E5394A;--p1:#5B9BE6;--p2:#F0B44C;--p3:#5DBB82;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.25);
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--body);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
a{color:var(--p1)}
.ti{vertical-align:-2px}
.wrap{max-width:760px;margin:0 auto;padding:4px 16px 48px}
.wrap.wide,header.wide .head-in{max-width:1180px}

/* ---------- kopbalk ---------- */
header{position:sticky;top:0;z-index:20;background:var(--bar);color:var(--bar-ink);padding-top:env(safe-area-inset-top,0px);box-shadow:inset 0 -4px 0 var(--red)}
header:has(.head-in:empty){display:none}
.head-in{max-width:760px;margin:0 auto;padding:12px 16px 4px}
.head-in:empty{display:none}
.who-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.mark{width:46px;height:46px;border-radius:50%;flex:none;object-fit:cover;border:2px solid var(--gold);background:#fff}
.post{font:700 1.4rem/1.05 var(--display);letter-spacing:.02em;margin:0;color:var(--bar-ink);text-transform:uppercase}
.who{font-size:.88rem;color:var(--bar-muted);margin:2px 0 0;line-height:1.3}
.icon-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:var(--bar-ink);cursor:pointer;font-size:1.3rem;line-height:1;padding:8px 12px;border-radius:999px;min-height:40px;flex:none}
.icon-btn:hover{background:rgba(255,255,255,.14)}
.icon-btn.on{background:var(--red);border-color:var(--red)}
.icon-btn .lbl{font:600 .88rem/1 var(--body)}

/* navigatie: op de computer pillen in de kopbalk */
nav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0 12px}
nav::-webkit-scrollbar{display:none}
.tab{display:inline-flex;align-items:center;gap:6px;background:none;border:0;border-radius:999px;padding:8px 14px;min-height:40px;font-weight:600;color:var(--bar-muted);cursor:pointer;white-space:nowrap}
.tab:hover{color:var(--bar-ink);background:rgba(255,255,255,.08)}
.tab[aria-current="true"]{color:#fff;background:var(--red)}
.badge{display:inline-block;min-width:1.45em;padding:0 .45em;border-radius:999px;background:var(--gold);color:#1B1F24;font-size:.75rem;font-weight:700;line-height:1.45em;text-align:center}
.tab[aria-current="true"] .badge{background:#fff;color:var(--red)}

/* navigatie: op de telefoon een tabbalk onderin */
@media (max-width:719px){
  body{padding-bottom:calc(var(--navh) + env(safe-area-inset-bottom,0px))}
  .head-in{padding-bottom:0}
  nav{position:fixed;left:0;right:0;bottom:0;z-index:30;gap:0;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(16,24,40,.08);overflow:visible}
  .tab{flex:1 1 0;min-width:0;flex-direction:column;gap:2px;padding:6px 2px;min-height:52px;border-radius:14px;color:var(--muted);font-size:.7rem;position:relative}
  .tab:hover{background:none;color:var(--ink)}
  .tab .ti{font-size:1.45rem;padding:2px 14px;border-radius:999px;transition:background .15s}
  .tab[aria-current="true"]{background:none;color:var(--red)}
  .tab[aria-current="true"] .ti{background:var(--redsoft)}
  .tab .badge{position:absolute;top:2px;left:calc(50% + 8px);font-size:.68rem}
  .tab[aria-current="true"] .badge{background:var(--gold);color:#1B1F24}
  .icon-btn .lbl{display:none}
  .post{font-size:1.25rem}
}

/* ---------- koppen en tekst ---------- */
h2{font:700 1.45rem/1.15 var(--display);margin:28px 0 10px;letter-spacing:.01em}
h3{font:700 1.15rem/1.2 var(--display);margin:22px 0 8px}
p.lead{margin:0 0 12px;color:var(--muted)}
.sub{display:block;color:var(--muted);font-size:.88rem}
.help{font-size:.88rem;color:var(--muted);margin:6px 0 0}
.note{font-style:italic}
.via{color:var(--muted);font-size:.85em}

/* ---------- hero: wie heeft er dienst ---------- */
.hero{position:relative;margin:18px 0 16px;background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.stripe{height:10px;background:repeating-linear-gradient(135deg,var(--red) 0 14px,#fff 14px 28px)}
.hero-body{display:grid;grid-template-columns:auto 1fr;gap:4px 20px;padding:16px 18px 18px;align-items:start}
.hero-letter{font:700 clamp(84px,26vw,148px)/.78 var(--display);color:var(--pc,var(--red));margin:0;padding-top:6px}
.hero-k{margin:0;font:700 1rem/1.2 var(--display);color:var(--gold);text-transform:uppercase;letter-spacing:.06em}
.hero-range{margin:2px 0 10px;font-weight:600}
.hero.empty .hero-body{display:block}
.crew{margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:.95rem}
.crew dt{color:var(--muted)}
.crew dd{margin:0}
.crew .me{font-weight:700;color:var(--red)}

/* ---------- lijsten ---------- */
.list{list-style:none;margin:0;padding:0;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.list>li{border-top:1px solid var(--line)}
.list>li:first-child{border-top:0}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:14px 16px;width:100%;background:none;border:0;text-align:left;cursor:default}
button.row{cursor:pointer}
button.row:hover{background:var(--surface2)}
.row.cur{background:var(--surface2);box-shadow:inset 4px 0 0 var(--red)}
.row .btn.small{margin-left:auto}
.wk{font:700 1.05rem/1 var(--display);min-width:3.2em;color:var(--muted)}
.chip{display:inline-flex;align-items:center;justify-content:center;min-width:2.1em;height:2.1em;padding:0 .45em;border-radius:10px;font:700 1.1rem/1 var(--display);color:#fff;background:var(--pc,var(--muted))}
.grow{flex:1 1 12em;min-width:0}
.yr{font:700 1rem/1 var(--display);color:var(--muted);padding:14px 16px 6px;background:var(--surface2);letter-spacing:.05em}
.detail{padding:0 16px 16px}
.ivs{list-style:none;margin:4px 0 0;padding:0;font-size:.88rem;color:var(--muted)}
.ivs li{margin:1px 0}
.tag{display:inline-flex;align-items:center;font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.tag.open{background:var(--ambersoft);color:var(--amber)}
.tag.ok{background:var(--greensoft);color:var(--green)}
.tag.me{background:var(--redsoft);color:var(--red)}
.tag.feest{background:var(--goldsoft);color:var(--amber)}
.feest-note{margin-top:6px;color:var(--amber);font-weight:600}

/* ---------- knoppen ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 20px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);font-weight:700;cursor:pointer;text-decoration:none;color:var(--ink);transition:transform .08s,background .15s,border-color .15s,box-shadow .15s;touch-action:manipulation}
.btn:hover{border-color:var(--muted)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 4px 12px rgba(200,16,46,.25)}
.btn.primary:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn.small{min-height:38px;padding:7px 14px;font-size:.92rem}
.btn.big{min-height:56px;padding:14px 26px;font-size:1.1rem}
.btn.block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn .ti{font-size:1.2em}
a.btn{color:var(--ink)}
a.btn.primary{color:#fff}
.btn.wa i{color:#1FA855}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.toggle{background:none;border:0;color:var(--p1);font-weight:700;cursor:pointer;padding:8px 0;min-height:40px}

/* ---------- kaarten en meldingen ---------- */
.card{background:var(--surface);border-radius:var(--radius);padding:16px;margin-bottom:12px;box-shadow:var(--shadow)}
.card p{margin:4px 0}
.card.focus{box-shadow:0 0 0 3px var(--red),var(--shadow)}
.card .banner{margin:10px 0 0}
.banner{background:var(--ambersoft);color:var(--amber);border-radius:var(--radius-sm);padding:12px 14px;margin:16px 0;font-weight:600}
.empty-state{background:var(--surface);border:1.5px dashed var(--line);border-radius:var(--radius);padding:18px;color:var(--muted)}
.offline{background:var(--ambersoft);color:var(--amber);border-radius:var(--radius-sm);padding:10px 14px;margin:12px 0 0;font-size:.9rem;font-weight:600}
.req+.req{border-top:1px solid var(--line);margin-top:10px;padding-top:6px}
.req.fresh{background:var(--greensoft);border-radius:var(--radius-sm);padding:10px 12px}

/* ---------- formulieren ---------- */
label{display:block;font-weight:700;font-size:.92rem;margin:14px 0 6px}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=date],input[type=time],input[type=number],select,textarea{width:100%;max-width:100%;min-height:48px;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:10px 14px;font-size:16px;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--redsoft)}
select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
textarea{min-height:160px;font:400 .9rem/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media (max-width:480px){.grid2{grid-template-columns:1fr}}
.preview{font-size:.9rem;margin:6px 0 0;color:var(--muted)}
.preview.bad{color:var(--red)}
details summary{cursor:pointer;font-weight:700;color:var(--p1);padding:6px 0}

/* ---------- tabellen ---------- */
.tblwrap{overflow-x:auto;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);margin-top:12px}
.tbl{border-collapse:collapse;width:100%;font-size:.92rem}
.tbl th,.tbl td{text-align:left;padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
.tbl thead th{border-top:0;color:var(--muted);font-weight:700;white-space:nowrap;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
.tbl td.n,.tbl th.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl tfoot td{font-weight:700;background:var(--surface2)}
.tbl .sub{font-size:.82rem}
.decl-note{display:block;margin-top:2px}
.decl .decl-note{font-size:.8rem}
.team{min-width:640px}
.team input[type=text],.team input[type=email],.team input[type=tel]{min-height:38px;padding:6px 10px;margin:2px 0;font-size:.92rem;border-radius:10px}
.team select{min-height:36px;padding:4px 36px 4px 10px;margin-top:2px;font-size:.85rem;border-radius:10px}
.team .namecell{min-width:230px;position:sticky;left:0;background:var(--surface);z-index:1}
.team thead .namecell{z-index:2}
.team td.c,.team th.c{text-align:center;width:3.4em;vertical-align:middle}
.team .sep{border-left:1px solid var(--line)}
.team input[type=checkbox],.grid input[type=checkbox]{width:22px;height:22px;accent-color:var(--red);margin:0;cursor:pointer}
.team tr.removed td{opacity:.45}
.team tr.removed input[type=text]{text-decoration:line-through}
.team tr.bad td{background:var(--redsoft)}
.team .err{color:var(--red);font-size:.82rem;margin:2px 0 0}
.team abbr{text-decoration:none}
.team .chip,.grid .chip{height:1.8em;min-width:1.8em;font-size:.95rem;border-radius:8px}
.team td.acts{white-space:nowrap}
.status{font-size:.78rem;font-weight:700;white-space:nowrap}
.status.actief{color:var(--green)}
.status.uitgenodigd{color:var(--amber)}
.status.niet{color:var(--muted)}
.status.gedeactiveerd{color:var(--red)}
.gridwrap{max-height:62vh;overflow:auto}
.grid thead th{position:sticky;top:0;background:var(--surface);z-index:1}
.grid th.c,.grid td.c{text-align:center;width:3.5em}
.grid tr.cur td{background:var(--surface2)}
.grid tr.changed td{background:var(--ambersoft)}
#feed-url{font-size:.85rem}
@media (max-width:560px){.tbl.decl th,.tbl.decl td{padding:8px 6px}}

/* ---------- melding onderin ---------- */
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,8px);max-width:min(92vw,520px);background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:999px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:40;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:719px){#toast{bottom:calc(var(--navh) + 16px + env(safe-area-inset-bottom,0px))}}
@media (prefers-reduced-motion:reduce){#toast,.btn,.tab .ti{transition:none}}

/* ---------- inloggen en laden ---------- */
.auth{max-width:420px;margin:28px auto 0}
.auth h1{font:700 2rem/1.05 var(--display);margin:14px 0 6px}
.auth .card{padding:0;overflow:hidden}
.auth .btn.primary{width:100%}
.auth-logo{display:block;width:200px;height:auto;margin:0 auto 18px;border-radius:24px;box-shadow:var(--shadow)}
.splash{text-align:center;margin:40px auto 0;color:var(--muted)}
.splash img{display:block;width:min(240px,60vw);height:auto;margin:0 auto 14px;border-radius:24px;box-shadow:var(--shadow)}

/* ---------- statuskaart met PiCo ---------- */
.pico{display:flex;gap:16px;align-items:center;border-radius:var(--radius);padding:14px;margin:16px 0;background:var(--surface);box-shadow:var(--shadow)}
.pico img{width:104px;height:auto;flex:none;border-radius:14px}
.pico h2{margin:0 0 2px;font-size:1.3rem}
.pico p{margin:2px 0}
.pico .quote{font-style:italic;color:var(--muted)}
.pico .actions{margin-top:10px}
.pico.st-ok{background:var(--greensoft)}
.pico.st-acuut{background:var(--redsoft);box-shadow:0 0 0 2px var(--red),var(--shadow)}
.pico.st-hulp,.pico.st-ruil{background:var(--ambersoft)}
@media (min-width:600px){.pico img{width:132px}}

/* ---------- Nu ruilen ---------- */
.nu-ruilen{margin:18px 0 8px;padding:18px;border-radius:var(--radius);background:linear-gradient(135deg,var(--bar) 0%,#2A3038 100%);color:#fff;box-shadow:var(--shadow);position:relative;overflow:hidden}
.nu-ruilen::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:repeating-linear-gradient(135deg,var(--red) 0 12px,#fff 12px 24px)}
.nu-ruilen h2{margin:0 0 4px;color:#fff}
.nu-ruilen p{margin:0 0 14px;color:var(--bar-muted)}
.nu-ruilen .btn.primary{width:100%}
.nu-ruilen + .detail,.card.form{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin:12px 0}
.card.form .detail{padding:0}

/* Urgent, meldingen en kudos */
.btn.urgent{border-color:var(--red);color:var(--red)}
.btn.urgent:hover{background:var(--redsoft)}
.tag.urgent{background:var(--red);color:#fff;gap:4px}
.card.is-urgent{box-shadow:0 0 0 2px var(--red),var(--shadow)}
.card.hint{background:var(--goldsoft)}
.card.hint p{margin:0}
p.tag{display:inline-flex;gap:6px;margin:4px 0;font-size:.85rem}
.kudos{list-style:none;margin:0;padding:0;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.kudos li{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
.kudos li:first-child{border-top:0}
.kudos li.me{background:var(--redsoft)}
.kudos .rank{flex:none;width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:700 1.05rem/1 var(--display);background:var(--surface2);color:var(--muted)}
.kudos .rank .ti{font-size:1.2rem}
.kudos .rank.goud{background:#F6E3A1;color:#7A5A00}
.kudos .rank.zilver{background:#E3E7EC;color:#4A5563}
.kudos .rank.brons{background:#F1D3B8;color:#7A4319}
.kudos .pts{font:700 1.5rem/1 var(--display);color:var(--red)}
.kudos .pts small{font-size:.75rem;margin-left:2px;color:var(--muted)}

/* Bevestigingskaart na een melding of link */
.snel{display:grid;grid-template-columns:96px 1fr;gap:6px 16px;align-items:start;margin:18px 0;padding:16px;border-radius:var(--radius);background:var(--surface);box-shadow:0 0 0 3px var(--red),var(--shadow)}
.snel img{width:96px;height:auto;border-radius:14px}
.snel h2{margin:0 0 4px;font-size:1.6rem}
.snel p{margin:2px 0}
.snel .banner{margin:8px 0 0}
.snel-knoppen{grid-column:1 / -1;display:flex;flex-direction:column;gap:10px;margin-top:8px}
.snel-knoppen .toggle{align-self:center}
@media (min-width:600px){.snel{grid-template-columns:132px 1fr}.snel img{width:132px}.snel-knoppen{flex-direction:row;flex-wrap:wrap;align-items:center}.snel-knoppen .btn.block{width:auto}}