/* Mooke Hub — Mooke Monochroom */
:root{
  --mm-zwart:#111111; --mm-tekst:#2b2b2b; --mm-grijs-7:#3d3d3d; --mm-grijs-5:#6b6b6b;
  --mm-grijs-3:#9a9a9a; --mm-grijs-2:#c9c9c9;
  --mm-lijn:#e6e6e6; --mm-lijn-2:#efefef; --mm-wit:#ffffff; --mm-vlak:#fafafa; --mm-hover:#f4f4f4;
  --mm-fout:#b00020; --mm-radius:6px; --mm-max:1180px;
  --mm-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--mm-font);font-size:14px;line-height:1.55;color:var(--mm-tekst);background:var(--mm-vlak);-webkit-font-smoothing:antialiased}
::selection{background:var(--mm-zwart);color:var(--mm-wit)}
a{color:inherit}

.mm-label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mm-grijs-5)}
.mm-merk{display:inline-block;background:var(--mm-zwart);color:var(--mm-wit);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:4px 8px}
.mm-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:0 0 28px;background:var(--mm-zwart);color:var(--mm-wit);font-size:12px;font-weight:600;line-height:1}
.mm-card{background:var(--mm-wit);border:1px solid var(--mm-lijn);border-radius:var(--mm-radius);padding:24px}
.mm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--mm-font);font-size:13px;font-weight:600;letter-spacing:.02em;padding:11px 18px;border-radius:var(--mm-radius);border:1px solid var(--mm-zwart);background:var(--mm-zwart);color:var(--mm-wit);cursor:pointer;transition:background .15s,color .15s}
.mm-btn:hover{background:#000}
.mm-btn-ghost{background:var(--mm-wit);color:var(--mm-zwart);border-color:var(--mm-lijn)}
.mm-btn-ghost:hover{background:var(--mm-hover);border-color:var(--mm-zwart)}
.mm-btn-klein{padding:7px 12px;font-size:12px}
.mm-input{width:100%;font-family:var(--mm-font);font-size:14px;color:var(--mm-zwart);background:var(--mm-wit);border:1px solid var(--mm-lijn);border-radius:var(--mm-radius);padding:11px 12px}
.mm-input:focus{outline:none;border-color:var(--mm-zwart)}
.mm-input::placeholder{color:var(--mm-grijs-3)}
.mm-seg{display:inline-flex;border:1px solid var(--mm-lijn);border-radius:var(--mm-radius);overflow:hidden;background:var(--mm-wit)}
.mm-seg button{font-family:var(--mm-font);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:9px 16px;background:var(--mm-wit);color:var(--mm-grijs-5);border:none;border-right:1px solid var(--mm-lijn);cursor:pointer}
.mm-seg button:last-child{border-right:none}
.mm-seg button.is-actief{background:var(--mm-zwart);color:var(--mm-wit)}
.mm-drop{border:1px dashed var(--mm-grijs-2);border-radius:var(--mm-radius);background:var(--mm-vlak);padding:28px;text-align:center;color:var(--mm-grijs-5);transition:border-color .15s,background .15s;cursor:pointer}
.mm-drop.is-over{border-color:var(--mm-zwart);background:var(--mm-hover);color:var(--mm-zwart)}
.mm-chip{display:inline-flex;align-items:center;gap:8px;font-family:'SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;font-size:12px;background:var(--mm-vlak);border:1px solid var(--mm-lijn);border-radius:var(--mm-radius);padding:6px 10px;color:var(--mm-zwart);cursor:pointer}
.mm-chip:hover{border-color:var(--mm-zwart)}
.mm-chip.is-gekopieerd{background:var(--mm-zwart);color:var(--mm-wit);border-color:var(--mm-zwart)}

/* ---------- kop ---------- */
.kop{background:var(--mm-wit);border-bottom:1px solid var(--mm-lijn);position:sticky;top:0;z-index:20}
.kop-in{max-width:var(--mm-max);margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:16px}
.kop-merk{display:flex;align-items:center;gap:10px}
.kop-titel{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mm-zwart)}
.kop-rechts{margin-left:auto;display:flex;align-items:center;gap:14px}
.kop-user{font-size:12px;color:var(--mm-grijs-5)}
.nav{max-width:var(--mm-max);margin:0 auto;padding:0 24px;display:flex;gap:0;border-top:1px solid var(--mm-lijn-2)}
.nav button{font-family:var(--mm-font);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mm-grijs-5);background:none;border:none;border-bottom:2px solid transparent;padding:14px 0;margin-right:28px;cursor:pointer}
.nav button.is-actief{color:var(--mm-zwart);border-bottom-color:var(--mm-zwart)}
.nav .telbol{display:inline-block;margin-left:7px;background:var(--mm-zwart);color:var(--mm-wit);font-size:10px;padding:1px 6px;border-radius:999px;letter-spacing:0}

.wrap{max-width:var(--mm-max);margin:0 auto;padding:32px 24px 72px}
.paginakop{display:flex;align-items:flex-end;gap:16px;margin-bottom:24px}
h1{font-size:28px;font-weight:700;letter-spacing:-.01em;color:var(--mm-zwart);margin:0}
.sub{color:var(--mm-grijs-5);font-size:13px;margin:4px 0 0}
.paginakop .rechts{margin-left:auto;display:flex;gap:8px}

/* ---------- cijfers ---------- */
.cijfers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
.cijfer{background:var(--mm-wit);border:1px solid var(--mm-lijn);border-radius:var(--mm-radius);padding:20px}
.cijfer .getal{font-size:32px;font-weight:700;color:var(--mm-zwart);letter-spacing:-.02em;line-height:1.1;margin-top:10px}
.cijfer .bij{font-size:12px;color:var(--mm-grijs-5);margin-top:4px}
.cijfer.let{border-color:var(--mm-zwart)}
.cijfer.let .getal{color:var(--mm-fout)}

/* ---------- balk ---------- */
.balk{height:6px;background:var(--mm-lijn);border-radius:999px;overflow:hidden;display:flex}
.balk i{display:block;height:100%;background:var(--mm-zwart)}
.balk i.grijs{background:var(--mm-grijs-2)}

/* ---------- tabel ---------- */
.tabelkop{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.tabelkop .mm-label{margin-right:auto}
table{width:100%;border-collapse:collapse;background:var(--mm-wit);border:1px solid var(--mm-lijn);border-radius:var(--mm-radius);overflow:hidden}
th{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mm-grijs-5);text-align:left;padding:12px 16px;border-bottom:1px solid var(--mm-lijn);background:var(--mm-wit);white-space:nowrap}
td{padding:13px 16px;border-bottom:1px solid var(--mm-lijn-2);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--mm-vlak)}
.site{font-weight:600;color:var(--mm-zwart)}
.mono{font-family:'SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.zacht{color:var(--mm-grijs-5);font-size:12px}
td.rechts,th.rechts{text-align:right}

.staat{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.stip{width:7px;height:7px;border-radius:50%;background:var(--mm-zwart);flex:0 0 7px}
.staat.oud .stip{background:var(--mm-grijs-2)}
.staat.fout{color:var(--mm-fout)}
.staat.fout .stip{background:var(--mm-fout)}
.staat.oud{color:var(--mm-grijs-5)}

/* ---------- lijst met meldingen ---------- */
.meld{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--mm-lijn-2)}
.meld:first-child{border-top:none}
.meld .wat{flex:1}
.meld .site{display:block;margin-bottom:2px}
.meld .tekst{font-size:13px;color:var(--mm-grijs-7)}
.meld .wanneer{font-size:12px;color:var(--mm-grijs-3);white-space:nowrap}
.meld .acties{display:flex;gap:6px;align-items:flex-start}

/* ---------- plugins ---------- */
.plugrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.plug{background:var(--mm-wit);border:1px solid var(--mm-lijn);border-radius:var(--mm-radius);padding:20px 22px}
.plug .naam{font-size:15px;font-weight:600;color:var(--mm-zwart)}
.plug .slug{font-family:'SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--mm-grijs-3)}
.plug .versie{margin-left:auto;font-size:20px;font-weight:700;color:var(--mm-zwart);letter-spacing:-.01em}
.plug .rijkop{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.plug .cijferrij{display:flex;justify-content:space-between;font-size:12px;color:var(--mm-grijs-5);margin-bottom:7px}
.plug .voet{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--mm-lijn-2)}
.plug .voet .zacht{margin-right:auto}

.mm-rij{display:grid;grid-template-columns:220px 1fr;gap:32px;padding:26px 0;border-top:1px solid var(--mm-lijn-2)}
.mm-rij:first-child{border-top:none}
.veldhulp{font-size:12px;color:var(--mm-grijs-5);margin-top:7px}


/* ---------- meters & animatie ---------- */
.cijfer .getal{transition:none}
.balk i{width:0;transition:width 1.1s cubic-bezier(.22,.75,.3,1)}

/* ring-meter */
.ringkaart{display:flex;align-items:center;gap:28px}
.ring{position:relative;flex:0 0 132px;width:132px;height:132px}
.ring svg{transform:rotate(-90deg);display:block}
.ring circle{fill:none;stroke-linecap:round}
.ring .baan{stroke:var(--mm-lijn);stroke-width:9}
.ring .vulling{stroke:var(--mm-zwart);stroke-width:9;stroke-dasharray:0 999;transition:stroke-dasharray 1.4s cubic-bezier(.22,.75,.3,1)}
.ring .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .mid b{font-size:26px;font-weight:700;color:var(--mm-zwart);letter-spacing:-.02em;line-height:1}
.ring .mid span{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mm-grijs-5);margin-top:5px}

/* stippenraster — één stip per site */
.raster{display:grid;grid-template-columns:repeat(28,1fr);gap:5px;margin-top:14px}
.raster i{display:block;aspect-ratio:1;border-radius:2px;background:var(--mm-lijn);transform:scale(.4);opacity:0;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .35s,background .35s}
.raster i.aan{transform:scale(1);opacity:1}
.raster i.bij{background:var(--mm-zwart)}
.raster i.achter{background:var(--mm-grijs-2)}
.raster i.fout{background:var(--mm-fout)}
.legenda{display:flex;gap:18px;margin-top:14px;flex-wrap:wrap}
.legenda span{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mm-grijs-5)}
.legenda i{width:9px;height:9px;border-radius:2px;background:var(--mm-zwart);display:block}
.legenda i.g{background:var(--mm-grijs-2)} .legenda i.r{background:var(--mm-fout)}

/* staafjes — mislukte updates per nacht */
.staafjes{display:flex;align-items:flex-end;gap:6px;height:96px;margin-top:16px}
.staafjes b{flex:1;background:var(--mm-lijn);border-radius:2px 2px 0 0;height:0;transition:height .8s cubic-bezier(.22,.75,.3,1),background .3s;position:relative}
.staafjes b.piek{background:var(--mm-zwart)}
.staafjes b:hover{background:var(--mm-zwart)}
.staafjes b::after{content:attr(data-n);position:absolute;top:-19px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:600;color:var(--mm-grijs-3);opacity:0;transition:opacity .2s}
.staafjes b:hover::after{opacity:1}
.asrij{display:flex;justify-content:space-between;margin-top:8px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mm-grijs-3)}

/* puls */
.puls{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--mm-grijs-5)}
.puls em{width:8px;height:8px;border-radius:50%;background:var(--mm-zwart);position:relative;display:block}
.puls em::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--mm-zwart);animation:pulseer 2.4s ease-out infinite}
@keyframes pulseer{0%{transform:scale(1);opacity:.5}100%{transform:scale(3.4);opacity:0}}

.meterrij{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
@media(max-width:900px){.meterrij{grid-template-columns:1fr}.raster{grid-template-columns:repeat(20,1fr)}}

.paneel{display:none}
.paneel.is-actief{display:block}

@media(max-width:900px){
  .cijfers{grid-template-columns:repeat(2,1fr)}
  .plugrid{grid-template-columns:1fr}
  .mm-rij{grid-template-columns:1fr;gap:12px}
  .verbergklein{display:none}
}