/* Profielmenu → Meldingen (meldingen-paneel.js). Bouwt op Mia Design (vel, groep, rij, segment, schakelaar):
   een instellingenvel zoals Systeeminstellingen → Meldingen — dicht, rustig, kleur alleen voor de status. */
.md-vel.bm-vel { background: var(--md-grond); -webkit-backdrop-filter: none; backdrop-filter: none; }
.md-vel.bm-vel .md-groep { background: var(--md-vlak-op-glas); }
.bm-vel .md-vel-inhoud { padding-top: 2px; }
.bm-blok { margin-top: 18px; }
.bm-blok:first-child { margin-top: 4px; }
.bm-laad { padding: 28px 4px; color: var(--md-label-2); font-size: var(--md-t-tekst); }

/* status van dit apparaat: stip + tekst die mag doorlopen, knop rechts */
.md-rij.bm-st { align-items: flex-start; --md-rij-in: 36px; }
.bm-stip { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--md-label-3); }
.bm-stip.bm-ok { background: var(--md-groen); }
.bm-stip.bm-let { background: var(--md-oranje); }
.bm-stip.bm-fout { background: var(--md-rood); }
.bm-wrap .md-rij-titel, .bm-wrap.md-rij-sub, .bm-wrap .md-rij-sub { white-space: normal; }
.bm-st .bm-knop { flex: none; align-self: center; }
.md-rij.bm-link .md-rij-titel { color: var(--md-tint); font-weight: 400; flex: 1; }
.md-rij.bm-link.bm-zacht .md-rij-titel { color: var(--md-label-2); }

/* per Bord: naam + laatste activiteit, het segment eronder over de volle breedte (namen nooit afgekapt; het vel is 400 px) */
.md-rij.bm-bord { flex-wrap: wrap; row-gap: 8px; gap: 12px; padding-bottom: 12px; }
.md-rij.bm-bord .md-rij-tekst { flex-basis: 100%; }
.bm-seg-bord { flex: none; width: 100%; }
.bm-seg-bord .md-seg-optie { font-size: var(--md-t-sub); padding-inline: 4px; white-space: nowrap; }
.md-rij.bm-focus { background: var(--md-tint-zacht); }
.md-rij.bm-leeg { min-height: 0; padding-block: 14px; }
.md-rij.bm-segrij { padding-block: 10px; }
.md-rij.bm-uitleg { min-height: 0; padding-top: 0; padding-bottom: 12px; }
.md-rij.bm-uitleg::before { display: none; }

/* stille uren: tijdkiezer rechts, cijfers op één lijn */
.bm-flex { flex: 1; }
.bm-tijd { appearance: none; -webkit-appearance: none; border: 0; border-radius: 7px; padding: 4px 8px; min-width: 84px;
  font: inherit; font-variant-numeric: tabular-nums; text-align: center; color: var(--md-label); background: var(--md-fill); }
.bm-tijd:focus-visible { outline: 2px solid var(--md-tint); outline-offset: 2px; }
.bm-tijd::-webkit-calendar-picker-indicator { display: none; }

.bm-voet { display: flex; justify-content: center; }
.bm-alle { min-width: 60%; }


/* donker: de gekozen stand moet ook op een donkere groep te zien zijn (de duim zelf scheelt daar weinig) */
html[data-thema="avond"] .bm-vel .md-seg-optie[aria-checked="true"] { color: var(--md-tint); }
html[data-thema="avond"] .bm-vel .md-seg-duim { box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .16), 0 2px 6px rgba(0, 0, 0, .35); }