/* ============================================================
   Aanvullingen op styles.css (design system blijft ongewijzigd)
   Alleen voor schermen die het prototype nog niet had:
   gebruikersbeheer, accountmenu en de rol-zichtbaarheid.
============================================================ */

/* Rol-zichtbaarheid: styles.css kent .role-monteur .admin-only al.
   Editors zien Beheer wel, maar niet het tabblad Gebruikers. */
.role-editor .beheerder-only,
.role-monteur .beheerder-only { display: none !important; }

/* ---- Beheer › Gebruikers ---- */
.u-row .bd .t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.u-row.u-inactive { opacity: .62 }
.u-role {
  flex: 0 0 auto; border: 1.5px solid var(--line); border-radius: 9px;
  padding: 7px 10px; font-size: 13px; font-weight: 700; color: var(--text);
  background: #fff; font-family: inherit; transition: .13s;
}
.u-role:hover:not(:disabled) { border-color: var(--brand-100); background: var(--brand-50) }
.u-role:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-50) }
.u-role:disabled { color: var(--muted); background: var(--line-2); cursor: not-allowed }

@media (max-width: 820px) {
  .u-row { flex-wrap: wrap }
  .u-row .bd { flex: 1 1 100% }
  .u-row .acts { flex-wrap: wrap }
}

/* ---- Accountmenu ---- */
.acct { display: flex; flex-direction: column; gap: 18px }
.acct-id { display: flex; align-items: center; gap: 12px }
.acct-id .t { font-size: 15px; font-weight: 700; color: var(--ink) }
.acct-id .s { font-size: 13px; color: var(--muted) }

/* Tekstknop in het loginscherm ("Uitloggen" onder de wachtwoordgate) */
.linkbtn {
  background: none; border: none; padding: 0; font: inherit; font-weight: 700;
  color: var(--brand); cursor: pointer; text-decoration: underline;
}

/* ---- Categoriekiezer: icoon en kleur ---- */
.ic-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px }
.ic-opt {
  display: flex; align-items: center; justify-content: center; height: 44px;
  border: 1.5px solid var(--line); border-radius: 10px; background: #fff;
  color: var(--muted); font-size: 20px; transition: .13s; cursor: pointer;
}
.ic-opt:hover { border-color: var(--brand-100); background: var(--brand-50); color: var(--brand) }
.ic-opt.on { border-color: var(--brand); background: var(--brand-50); color: var(--brand) }

.tint-row { display: flex; gap: 10px; flex-wrap: wrap }
.tint-opt {
  width: 44px; height: 44px; border-radius: 12px; border: 2px solid transparent;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  transition: .13s; cursor: pointer;
}
.tint-opt .chk { display: none }
.tint-opt:hover { transform: translateY(-1px) }
.tint-opt.on { border-color: var(--ink) }
.tint-opt.on .dot { display: none }
.tint-opt.on .chk { display: inline-flex }

@media (max-width: 560px) {
  .ic-grid { grid-template-columns: repeat(5, 1fr) }
}

/* ---- Reacties: acties onder een reactie ---- */
.crow-acts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.cmt-del {
  background: none; border: none; padding: 0; font: inherit; font-size: 12.5px;
  font-weight: 700; color: var(--faint); display: inline-flex; align-items: center;
  gap: 5px; cursor: pointer; transition: .13s;
}
.cmt-del:hover { color: var(--err) }

/* ---- Bijlage die nog niet in R2 staat (seed-data, tot fase 3) ---- */
.file-off { opacity: .55; cursor: not-allowed }
.file-off:hover { border-color: var(--line); background: #fff; transform: none }

/* Bijlagen zijn nu links (<a>) in plaats van knoppen, zodat de browser de
   download afhandelt — een script-gestarte download wordt in een iframe
   geblokkeerd. Zelfde uiterlijk als de knop uit het prototype. */
.attach a.file { text-decoration: none; color: inherit }

/* ---- Merkteken ----
   Het logo staat als los bestand in public/logo.svg. Wil je het vervangen,
   overschrijf dan dat bestand; er hoeft geen code aangepast te worden.
   .mark-logo haalt de blauwe tegel en de schaduw weg die het prototype om
   het icoon zette — het logo heeft zijn eigen vorm en kleuren. */
.mark-logo {
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.mark-logo img { width: 100%; height: 100%; display: block; object-fit: contain }

/* ============================================================
   Verbruik & kosten — menu-item "Verbruik", alleen beheerders
   ------------------------------------------------------------
   Bewust dicht opgezet: één tabelregel per grens in plaats van een kaart,
   zodat alle elf grenzen samen in beeld passen zonder scrollen.
============================================================ */

.vb-titelrij { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 4px }
.vb-titelrij .h-page { margin: 0 }
.vb-periode { font-size: 13px; color: var(--muted); flex: 1; min-width: 200px }

.vb-uitleg { display: flex; gap: 9px; align-items: center; margin: 12px 0 0;
             padding: 9px 13px; border-radius: var(--r-md); background: var(--brand-50);
             border: 1px solid var(--brand-100); color: var(--text); font-size: 12.5px; line-height: 1.5 }
.vb-uitleg .tic { color: var(--brand); flex: 0 0 auto; font-size: 16px }

/* ---- samenvattingsstrook ---- */
.vb-strook { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 14px 0 16px;
             background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg);
             overflow: hidden; box-shadow: var(--sh-1) }
.vb-strook .st { background: var(--card); padding: 13px 16px; display: flex; flex-direction: column; gap: 2px }
.vb-strook .st.let-op { background: var(--warn-bg) }
.vb-strook .lb { font-size: 11px; font-weight: 700; color: var(--muted);
                 letter-spacing: .05em; text-transform: uppercase }
.vb-strook .gr { font-size: 23px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; line-height: 1.15 }
.vb-strook .gr small { font-size: 14px; font-weight: 700; color: var(--muted) }
.vb-strook .on { font-size: 12px; color: var(--muted) }

.vb-blok { margin-bottom: 16px }
.vb-blok .p-hd { padding: 13px 18px }
.vb-blok .p-hd h3 { font-size: 15px }
.vb-kopje { font-size: 12px; font-weight: 700; color: var(--muted);
            letter-spacing: .04em; text-transform: uppercase; margin-bottom: 5px }
.vb-leeg { padding: 22px 18px; color: var(--faint); font-size: 13px; text-align: center }

/* ---- grenzen-tabel ---- */
.vb-tabel { padding: 2px 0 6px }
.vb-groep { display: flex; align-items: baseline; gap: 9px; padding: 11px 18px 5px;
            font-size: 12px; font-weight: 800; color: var(--ink);
            letter-spacing: .05em; text-transform: uppercase }
.vb-groep i { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--faint);
              letter-spacing: 0; text-transform: none }

.vb-rij { display: grid; align-items: center; gap: 14px; padding: 7px 18px;
          grid-template-columns: minmax(120px, 1.15fr) minmax(130px, 1.05fr) minmax(90px, 1.5fr) 52px 60px 62px;
          font-size: 13px; border-radius: 8px }
.vb-rij:hover { background: var(--brand-50) }
.vb-rij.let-op { background: var(--warn-bg) }
.vb-rij.kritiek { background: var(--err-bg) }

.vb-rij .nm { font-weight: 700; color: var(--ink); min-width: 0;
              display: flex; flex-direction: column; line-height: 1.3 }
.vb-rij .nm i { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--muted);
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.vb-rij .ge { font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums }
.vb-rij .ge em { font-style: normal; font-weight: 600; color: var(--muted); font-size: 12px; margin-left: 4px }

/* Balk met streepje op de verwachte eindstand. */
.vb-rij .bl { position: relative; height: 7px; border-radius: 999px; background: var(--line-2) }
.vb-rij .bl i { display: block; height: 100%; border-radius: 999px }
.vb-rij .bl u { position: absolute; top: -3px; width: 2px; height: 13px; background: var(--ink);
                border-radius: 2px; opacity: .4; text-decoration: none }

.vb-rij .pc { font-weight: 800; color: var(--text); text-align: right; font-variant-numeric: tabular-nums }
.vb-rij .pr { color: var(--muted); text-align: right; font-size: 12px; font-variant-numeric: tabular-nums }
.vb-rij .ko { text-align: right; color: var(--faint); font-size: 12px }
.vb-rij .ko b { color: var(--warn); font-size: 12.5px }

/* ---- verloop ---- */
.vb-grafieken { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; padding: 6px 18px 16px }

/* ---- onderste helft: twee kolommen naast elkaar ---- */
.vb-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start }
.vb-verdelingen { display: grid; gap: 14px; padding: 12px 18px 16px }
.vb-vrij { display: grid; grid-template-columns: minmax(0, 1fr) 72px auto; gap: 10px;
           align-items: center; padding: 3px 0; font-size: 12.5px; color: var(--text) }
.vb-vrij .nm { display: flex; align-items: center; gap: 7px; min-width: 0;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.vb-vrij .nm b { font-size: 10.5px; font-weight: 700; background: var(--brand-50); color: var(--brand-600);
                 padding: 1px 6px; border-radius: var(--r-pill); flex: 0 0 auto }
.vb-vrij.eigen .nm { font-weight: 700; color: var(--ink) }
.vb-vrij .bal { height: 5px; border-radius: 999px; background: var(--line-2); overflow: hidden }
.vb-vrij .bal i { display: block; height: 100%; background: var(--faint); border-radius: 999px }
.vb-vrij.eigen .bal i { background: var(--brand) }
.vb-vrij .wr { font-weight: 700; color: var(--ink); white-space: nowrap; font-size: 12px;
               font-variant-numeric: tabular-nums }

.vb-inhoud { padding: 12px 18px 16px }
.vb-split { display: flex; height: 10px; border-radius: 999px; overflow: hidden; gap: 2px; margin-bottom: 9px }
.vb-split > span { display: block }
.vb-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px }
.vb-legenda span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text) }
.vb-legenda i { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto }
.vb-legenda b { color: var(--ink); font-weight: 700 }

.vb-best { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px;
           align-items: center; padding: 4px 0; font-size: 12.5px }
.vb-best .ft { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center;
               justify-content: center; font-size: 9.5px; font-weight: 800 }
.vb-best .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text) }
.vb-best .gr { font-weight: 700; color: var(--ink); white-space: nowrap }

.vb-tellers { display: flex; flex-wrap: wrap; gap: 8px }
.vb-tellers span { display: flex; align-items: baseline; gap: 5px; font-size: 12px; color: var(--muted);
                   background: var(--bg); border-radius: var(--r-pill); padding: 4px 11px }
.vb-tellers b { font-size: 14px; font-weight: 800; color: var(--ink) }

/* ---- signalen ---- */
.vb-signaal { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 10px 14px;
              border-radius: var(--r-md); background: var(--brand-50); border: 1px solid var(--brand-100);
              color: var(--text); font-size: 12.5px; line-height: 1.5 }
.vb-signaal .tic { flex: 0 0 auto; color: var(--brand); font-size: 16px }
.vb-signaal.let-op { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn) }
.vb-signaal.let-op .tic { color: var(--warn) }
.vb-signaal.fout { background: var(--err-bg); border-color: var(--err-line); color: var(--err) }
.vb-signaal.fout .tic { color: var(--err) }

.vb-stappen { margin: 0; padding-left: 20px; color: var(--text); font-size: 13.5px; line-height: 1.85 }
.vb-stappen code { background: var(--line-2); border-radius: 6px; padding: 2px 7px;
                   font-size: 12px; font-family: ui-monospace, Menlo, Consolas, monospace }

@media (max-width: 1180px) {
  .vb-strook { grid-template-columns: 1fr 1fr }
  .vb-twee, .vb-grafieken { grid-template-columns: 1fr }
}
@media (max-width: 820px) {
  .vb-rij { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px }
  .vb-rij .bl { grid-column: 1 / -1 }
  .vb-rij .pr, .vb-rij .ko { display: none }
}

/* ---- Video in een artikel ----
   De speler staat in het artikel zelf zodat een monteur op locatie de app
   niet hoeft te verlaten. */
.videos { display: grid; gap: 14px }
.video-blok { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
              background: #000; box-shadow: var(--sh-1) }
.video-blok video { display: block; width: 100%; max-height: 62vh; background: #000 }
.video-vt { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--card) }
.video-vt .nm { font-size: 13.5px; font-weight: 700; color: var(--ink); flex: 1; min-width: 0;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.video-vt .gr { font-size: 12.5px; color: var(--muted); white-space: nowrap }
.video-vt .dl { color: var(--muted); display: flex; padding: 4px; border-radius: 7px; transition: .13s }
.video-vt .dl:hover { color: var(--brand); background: var(--brand-50) }
.video-off { display: flex; align-items: center; gap: 10px; padding: 26px 18px; background: var(--card);
             color: var(--faint); font-size: 13.5px }

/* Uitleg over wat er geüpload mag worden, onder de bijlageknop. */
.ed-hint { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; padding: 10px 13px;
           border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line);
           color: var(--muted); font-size: 12.5px; line-height: 1.6 }
.ed-hint .tic { color: var(--brand); flex: 0 0 auto; font-size: 16px; margin-top: 1px }
.ed-hint b { color: var(--text); font-weight: 700 }

/* ============================================================
   Mededelingen bovenaan de startpagina
   ------------------------------------------------------------
   Zolang er iets ongelezen is staat het paneel er; is alles gelezen, dan
   blijft er één regel over. Een blok dat altijd ruimte pakt wordt
   weggekeken, en mist dan zijn doel bij het bericht dat er wél toe doet.
============================================================ */
.med { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
       box-shadow: var(--sh-1); overflow: hidden; margin-bottom: 20px }
.med-hd { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
          border-bottom: 1px solid var(--line-2) }
.med-hd .tic { color: var(--brand); font-size: 19px }
.med-hd h3 { font-size: 15px; font-weight: 800; color: var(--ink) }
.med-hd .pil { font-size: 11.5px; font-weight: 800; background: var(--brand); color: #fff;
               padding: 2px 9px; border-radius: var(--r-pill) }
.med-hd .mini { margin-left: auto }

.med-rij { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center;
           border-bottom: 1px solid var(--line-2) }
.med-rij:last-of-type { border-bottom: none }
.med-rij.belangrijk:not(.gelezen) { background: linear-gradient(90deg, var(--warn-bg) 0%, transparent 40%) }

/* Het bolletje: open bij ongelezen, afgevinkt en dof bij gelezen. */
.med-rij .bol { width: 19px; height: 19px; margin-left: 15px; border-radius: 50%;
                border: 2px solid var(--brand); background: none; padding: 0;
                display: flex; align-items: center; justify-content: center;
                font-size: 12px; color: transparent; cursor: pointer; transition: .13s }
.med-rij .bol:hover:not(:disabled) { background: var(--brand-50); color: var(--brand-100) }
.med-rij.gelezen .bol { border-color: var(--line); background: var(--line-2);
                        color: var(--muted); cursor: default }

.med-open { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 13px;
            align-items: center; padding: 11px 16px 11px 13px; background: none; border: none;
            text-align: left; cursor: pointer; width: 100%; transition: .12s }
.med-open:hover { background: var(--brand-50) }
.med-open .dt { font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap }
.med-open .tt { font-size: 14.5px; font-weight: 700; color: var(--ink); min-width: 0;
                display: flex; align-items: center; gap: 9px }
.med-open .tt > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.med-rij.gelezen .med-open .tt { font-weight: 600; color: var(--muted) }
.med-rij.gelezen .med-open .dt { color: var(--faint) }
.med-open .ch { color: var(--faint); display: flex }

.med-vt { display: flex; align-items: center; justify-content: space-between; gap: 12px;
          width: 100%; padding: 9px 16px; background: var(--bg); border: none;
          border-top: 1px solid var(--line-2); font-size: 12.5px; color: var(--muted);
          cursor: pointer; transition: .12s }
.med-vt:hover { color: var(--brand) }

/* Alles gelezen: één regel, nauwelijks ruimte. */
.med-dicht { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 18px;
             padding: 10px 16px; background: var(--card); border: 1px solid var(--line);
             border-radius: var(--r-md); color: var(--muted); font-size: 13px;
             cursor: pointer; transition: .13s }
.med-dicht:hover { border-color: var(--brand-100); color: var(--brand) }
.med-dicht .tic { color: var(--faint); font-size: 17px }
.med-dicht .ch { margin-left: auto; display: flex }

/* ---- Beheer: wie heeft het gelezen ---- */
.lz-laden { padding: 26px 4px; color: var(--muted); font-size: 13.5px; text-align: center }
.lz-kop { padding: 0 0 14px; border-bottom: 1px solid var(--line-2); margin-bottom: 10px }
.lz-kop b { display: block; font-size: 15px; color: var(--ink) }
.lz-kop span { font-size: 13px; color: var(--muted) }
.lz-kop .bar { height: 7px; border-radius: 999px; background: var(--line-2); margin-top: 9px; overflow: hidden }
.lz-kop .bar > span { display: block; height: 100%; border-radius: 999px }
.lz-kopje { font-size: 11.5px; font-weight: 800; color: var(--muted); letter-spacing: .07em;
            text-transform: uppercase; margin: 14px 0 6px }
.lz-rij { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 11px;
          align-items: center; padding: 6px 0 }
.lz-rij .nm { font-size: 13.5px; font-weight: 700; color: var(--ink); display: flex;
              flex-direction: column; line-height: 1.3; min-width: 0 }
.lz-rij .nm i { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--muted) }
.lz-rij .wn { font-size: 12.5px; color: var(--muted); white-space: nowrap }
.lz-rij.open .wn { color: var(--warn); font-weight: 700 }

/* ---- Editor: urgentieschakelaar ---- */
.ed-schakel { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px;
              border: 1.5px solid var(--line); border-radius: var(--r-md);
              cursor: pointer; font-size: 13px; color: var(--text); line-height: 1.55 }
.ed-schakel:hover { border-color: var(--brand-100); background: var(--brand-50) }
.ed-schakel input { width: 17px; height: 17px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--brand) }
.ed-schakel b { color: var(--warn) }

/* ============================================================
   YouTube-video's
   ------------------------------------------------------------
   Eerst een stilstaande kaart, pas bij een klik de speler. Dat scheelt op
   4G een hoop laadwerk, en er gaat pas iets richting Google zodra iemand
   daar bewust op klikt.
============================================================ */
.yt-kaart { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
            background: var(--card); box-shadow: var(--sh-1); cursor: pointer; transition: .15s }
.yt-kaart:hover { box-shadow: var(--sh-2); border-color: var(--brand-100) }
.yt-kaart:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-50) }
.yt-mini { position: relative; background: #000; aspect-ratio: 16 / 9; overflow: hidden }
.yt-mini img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; transition: .18s }
.yt-kaart:hover .yt-mini img { opacity: 1; transform: scale(1.02) }
.yt-play { position: absolute; inset: 0; margin: auto; width: 62px; height: 44px; border-radius: 12px;
           background: rgba(200, 32, 32, .93); color: #fff; display: flex; align-items: center;
           justify-content: center; font-size: 24px; box-shadow: 0 6px 18px rgba(0,0,0,.35); transition: .15s }
.yt-kaart:hover .yt-play { background: #c81f1f; transform: scale(1.06) }
.yt-vt { display: flex; align-items: center; gap: 12px; padding: 10px 14px }
.yt-vt .nm { font-size: 13.5px; font-weight: 700; color: var(--ink); flex: 1; min-width: 0;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.yt-vt .br { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
             color: var(--muted); white-space: nowrap }

/* De speler in een venster: groter beeld op een tablet, en het omzeilt dat
   schermvullend geblokkeerd kan worden als de app zelf in een iframe draait. */
.modal.breed { width: min(940px, 94vw) }
.yt-speler { position: relative; aspect-ratio: 16 / 9; background: #000;
             border-radius: var(--r-md); overflow: hidden }
.yt-speler iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.yt-extern { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
             font-size: 13px; font-weight: 700; color: var(--muted); text-decoration: none }
.yt-extern:hover { color: var(--brand) }

.ed-knoppen { display: flex; gap: 10px; flex-wrap: wrap }