/* Accountmenu → Mijn server (server-paneel.js). Bouwt op Mia Design (vel, groep, rij, knop):
   een instellingenvel zoals in Systeeminstellingen — gegroepeerde lijsten, cijfers rechts, één primaire knop. */
.sv-vel .md-vel-inhoud { padding-top: 2px; }
/* instellingenvel: massief (zoals Systeeminstellingen) — door glas schemerden app-iconen door de tekst heen */
.md-vel.sv-vel { background: var(--md-grond); -webkit-backdrop-filter: none; backdrop-filter: none; }
.md-vel.sv-vel .md-groep { background: var(--md-vlak-op-glas); }   /* wit op licht, #1a1a1d op donker */
.sv-blok { margin-top: 18px; }
.sv-blok:first-child { margin-top: 4px; }
.sv-w { font-variant-numeric: tabular-nums; }

/* gebruiksmeter onder een rij: dun, rustig, kleur alleen als het krap wordt */
.sv-meterrij { padding: 0 16px 12px; margin-top: -4px; }
.sv-meterrij + .md-rij::before { content: ""; position: absolute; top: 0; right: 0; left: 16px; height: .5px; background: var(--md-sep); }
.sv-meter { display: block; height: 4px; border-radius: 2px; background: var(--md-fill); overflow: hidden; }
.sv-meter > span { display: block; height: 100%; border-radius: 2px; background: var(--md-tint); transition: width .4s var(--md-veer-standaard); }
.sv-meter.sv-krap > span { background: var(--md-oranje); }
.sv-meter.sv-vol > span { background: var(--md-rood); }
.sv-rij.sv-klein { min-height: 0; padding-top: 0; margin-top: -6px; }
.sv-rij.sv-klein::before { display: none; }

/* lopende uitbreiding: stip + tekst die mag doorlopen */
.md-rij.sv-st { align-items: flex-start; }
.sv-stip { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--md-label-3); }
.sv-ok .sv-stip { background: var(--md-groen); }
.sv-wacht .sv-stip, .sv-bezig .sv-stip { background: var(--md-tint); }
.sv-bezig .sv-stip { animation: sv-puls 1.4s ease-in-out infinite; }
.sv-let .sv-stip { background: var(--md-oranje); }
.sv-fout .sv-stip { background: var(--md-rood); }
.sv-st { --md-rij-in: 36px; }
.sv-wrap .md-rij-titel, .sv-wrap .md-rij-sub { white-space: normal; }
.sv-moment { display: block; margin-top: 2px; color: var(--md-label); }
.sv-knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sv-knop { text-decoration: none; }
@keyframes sv-puls { 50% { opacity: .35; } }

/* pakketkeuze als keuzelijst (radio), prijs rechts */
.sv-pakket { --md-rij-in: 48px; }
.sv-radio { flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--md-label-3); display: grid; place-items: center;
  transition: box-shadow var(--md-duur-vervaag) ease; }
.sv-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--md-tint); transform: scale(0); transition: transform .22s var(--md-veer-standaard); }
.sv-pakket.sv-aan .sv-radio { box-shadow: inset 0 0 0 1.5px var(--md-tint); }
.sv-pakket.sv-aan .sv-radio::after { transform: scale(1); }
.sv-pakket:disabled { cursor: default; }
.sv-pakket .md-rij-sub { white-space: normal; }
.sv-pakket:disabled:not(.sv-aan) .sv-radio { opacity: .4; }
.sv-pakket.sv-aan:disabled .sv-radio { opacity: .6; }
.sv-pakket:disabled .md-rij-titel, .sv-pakket:disabled .md-rij-waarde { color: var(--md-label-2); }
.sv-pakket:disabled:active { background: transparent; }

.sv-voet { margin-top: 2px; }
.sv-fout { padding: 0 16px; font-size: var(--md-t-sub); color: var(--md-rood-tekst); }
.sv-actie { padding: 12px 0 2px; }
.sv-door { width: 100%; }
.md-knop.md-tint.sv-door:disabled { opacity: 1; background: var(--md-fill); color: var(--md-label-3); }   /* uit = neutraal, niet troebel teal */
.sv-chip { display: inline-block; padding: 0 6px; border-radius: 5px; font-weight: 600; line-height: 16px; background: var(--md-oranje-zacht); color: var(--md-oranje-tekst); }
.sv-opzeg .md-rij-titel { color: var(--md-rood-tekst); font-weight: 400; }
.sv-leeg { padding: 28px 4px; color: var(--md-label-2); font-size: var(--md-t-tekst); }

@media (prefers-reduced-motion: reduce) {
  .sv-meter > span, .sv-radio, .sv-radio::after { transition: none; }
  .sv-bezig .sv-stip { animation: none; }
}