:root{--bg:#0b1120;--card:#111827;--card-hover:#1a2332;--border:#1e2d3d;--accent:#ff7e2d;--accent-dim:rgba(255,126,45,.15);--accent-glow:rgba(255,126,45,.3);--text:#e2e8f0;--text-muted:#64748b;--danger:#ef4444;--danger-dim:rgba(239,68,68,.15);--warning:#f59e0b;--input-bg:#0f1729}
*{box-sizing:border-box;margin:0;padding:0}body{font-family:'DM Sans','Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
.bg-layer{position:fixed;inset:0;z-index:0;background:radial-gradient(ellipse at 20% 40%,rgba(255,126,45,.07) 0%,transparent 60%),radial-gradient(ellipse at 75% 20%,rgba(255,179,71,.05) 0%,transparent 50%),radial-gradient(ellipse at 50% 90%,rgba(245,158,11,.03) 0%,transparent 40%)}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes modalPop{0%{opacity:0;transform:scale(.94) translateY(12px)}60%{transform:scale(1.02) translateY(-2px)}100%{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalPopOut{0%{opacity:1;transform:scale(1) translateY(0)}100%{opacity:0;transform:scale(.94) translateY(12px)}}.modal-overlay.closing{animation:none;background:rgba(0,0,0,0)}.modal-overlay.closing .modal{animation:modalPopOut .2s ease-in forwards}
.fade-up{animation:fadeUp .4s ease-out}.page{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.card{position:relative;background:var(--card);border-radius:16px;border:1px solid rgba(255,126,45,.27);padding:32px;width:100%;max-width:420px;box-shadow:0 8px 32px rgba(0,0,0,.3),0 4px 24px rgba(255,126,45,.08)}
.logo{display:flex;align-items:center;gap:10px}.logo-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 0 14px rgba(255,126,45,.45))}
.logo-text{font-weight:700;font-size:20px;letter-spacing:-.02em}.logo-text span{color:var(--accent)}
.form-group{margin-bottom:18px}.form-label{display:block;font-size:13px;font-weight:500;color:var(--text);margin-bottom:6px}
.input-wrap{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--input-bg);border-radius:10px;border:1.5px solid var(--border);transition:border-color .2s,box-shadow .2s}
.input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}.input-wrap svg{color:var(--text-muted);flex-shrink:0}.input-wrap:focus-within svg{color:var(--accent)}
.input-wrap input{flex:1;border:none;background:none;color:var(--text);font-size:16px;font-family:inherit;outline:none}.input-wrap input::placeholder{color:var(--text-muted)}
.btn{width:100%;padding:13px 20px;border-radius:10px;border:none;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-primary{background:rgba(255,126,45,.18);color:var(--accent);border:1px solid rgba(255,126,45,.45)}.btn-primary:hover{background:rgba(255,126,45,.28);border-color:rgba(255,126,45,.7);box-shadow:0 4px 20px var(--accent-glow)}
.btn-secondary{background:transparent;color:var(--text);border:1.5px solid var(--border)}.btn-secondary:hover{background:var(--card-hover)}.btn:disabled{opacity:.5;cursor:not-allowed}
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;display:inline-block}
.alert{border-radius:10px;padding:10px 14px;margin-bottom:16px;font-size:13px}.alert-error{background:var(--danger-dim);border:1px solid rgba(239,68,68,.2);color:var(--danger)}
.link{color:var(--accent);cursor:pointer;font-weight:500}.link:hover{text-decoration:underline}
.back-link{display:flex;align-items:center;gap:6px;color:var(--text-muted);cursor:pointer;font-size:14px;margin-bottom:20px}.back-link:hover{color:var(--text)}
.dashboard{position:relative;z-index:1;min-height:100vh;padding:0 20px 40px}.dash-header{max-width:800px;margin:0 auto;padding:20px 0;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)}
.dash-content{max-width:800px;margin:0 auto}.user-info{display:flex;align-items:center;gap:12px}.user-info-text{text-align:right}
.user-name{font-size:14px;font-weight:600;display:block}.user-id{font-size:12px;color:var(--text-muted)}
.avatar-lg{width:72px;height:72px;font-size:26px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:#0b1120;font-weight:700;background:linear-gradient(135deg,var(--accent),#ffb347);border-radius:50%}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#ffb347);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#0b1120}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:28px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 16px;text-align:center}
.stat-value{font-size:24px;font-weight:700}.stat-label{display:block;font-size:12px;color:var(--text-muted);margin-top:4px;text-transform:uppercase;letter-spacing:.05em}
.device-grid{display:grid;gap:14px}.device-card{background:var(--card-hover);border:1px solid rgba(255,126,45,.27);border-radius:14px;padding:22px;box-shadow:0 4px 24px rgba(255,126,45,.08)}
.device-card.flip-anim{transition:transform 420ms cubic-bezier(0.22,1,0.36,1) !important;will-change:transform}
.device-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.device-name{font-size:16px;font-weight:600;margin-bottom:3px}.device-id-label{font-size:12px;color:var(--text-muted)}
.fw-hw-info{color:#475569;font-size:11px;margin-left:6px}
.combo-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.combo-value{font-size:12px;font-weight:600;color:var(--text);text-align:right}
.status-badge{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;font-size:13px;font-weight:600}
.status-badge.online{background:#10b981;color:#fff}.status-badge.offline{background:var(--danger-dim);color:var(--danger)}.status-badge.paused{background:#f59e0b;color:#fff}.status-badge.dot-online-text-paused{background:#f59e0b;color:#fff}
/* 1.0.8 — Aan/uit toggle. Stijl matcht de status-badge (pill, padding 5x12,
   border-radius 20) zodat de twee pills onder elkaar visueel als één geheel
   ogen. iOS-stijl track + thumb met label. */
.device-toggle{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;font-size:13px;font-weight:600;background:rgba(255,255,255,.04);border:1px solid var(--border);cursor:pointer;transition:background .15s,border-color .15s;font-family:inherit;color:var(--text-muted)}
.device-toggle:hover{background:rgba(255,255,255,.08);border-color:rgba(255,126,45,.35)}
.device-toggle-track{position:relative;width:30px;height:16px;border-radius:8px;background:var(--border);transition:background .2s;flex-shrink:0}
.device-toggle-thumb{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:left .2s,background .2s;box-shadow:0 1px 2px rgba(0,0,0,.4)}
.device-toggle.on .device-toggle-track{background:var(--accent)}
.device-toggle.on .device-toggle-thumb{left:16px}
.device-toggle.on{color:var(--accent)}
.device-toggle.off{color:var(--text-muted)}
/* Fixed label-width zodat de pill niet inkrimpt bij Aan↔Uit (NL) of On↔Off (EN).
   Beide labels passen ruim binnen 28px met font-size 13. text-align centreert
   de tekst binnen het reservedevak. */
.device-toggle-label{display:inline-block;min-width:28px;text-align:left}
.status-dot{width:8px;height:8px;border-radius:50%}
/* Consistent breathing: alle online-dots ademen in 2s rythme (rustig).
   Paused ademt sneller (1s) om aandacht te vragen. Offline = statisch dim. */
.status-badge.online .status-dot{background:#10b981;box-shadow:0 0 6px #10b981;animation:ledBreath 2000ms ease-in-out infinite}
.status-badge.offline .status-dot{background:var(--danger);box-shadow:0 0 6px var(--danger);opacity:.6}
.status-badge.paused .status-dot{background:#f59e0b;box-shadow:0 0 6px #f59e0b;animation:ledBreath 1000ms ease-in-out infinite}
/* LED-spiegel voor de centrale status-badge - kleur + pulsatie matchen de
   fysieke LED 1-op-1 op basis van firmware-leveringen led_state.
   Pulsatie wordt op het bestaande .status-dot dotje toegepast. */
.status-badge.led-wifi_connecting .status-dot{background:#3b82f6;box-shadow:0 0 6px #3b82f6;animation:ledBreath 2000ms ease-in-out infinite}
.status-badge.led-mqtt_connecting .status-dot{background:#3b82f6;box-shadow:0 0 6px #3b82f6;animation:ledBreath 1000ms ease-in-out infinite}
.status-badge.led-ap_mode .status-dot{background:#f8fafc;box-shadow:0 0 6px #f8fafc;animation:ledBreath 1000ms ease-in-out infinite}
.status-badge.led-ap_client .status-dot{background:#f8fafc;box-shadow:0 0 6px #f8fafc;animation:ledBreath 2000ms ease-in-out infinite}
.status-badge.led-no_config .status-dot{background:#facc15;box-shadow:0 0 6px #facc15;animation:ledBreath 1000ms ease-in-out infinite}
.status-badge.led-p1_timeout .status-dot{background:#fb923c;box-shadow:0 0 6px #fb923c;animation:ledBreath 1000ms ease-in-out infinite}
.status-badge.led-inv_offline .status-dot{background:#c084fc;box-shadow:0 0 6px #c084fc;animation:ledBreath 1000ms ease-in-out infinite}
.status-badge.led-working_idle .status-dot{background:#22c55e;box-shadow:0 0 6px #22c55e;animation:ledBreath 2000ms ease-in-out infinite}
.status-badge.led-working_active .status-dot{background:#22c55e;box-shadow:0 0 6px #22c55e;animation:ledBreath 1000ms ease-in-out infinite}
.status-badge.led-setup_needed .status-dot{background:#ef4444;box-shadow:0 0 6px #ef4444;animation:ledBlink 500ms steps(2,end) infinite}
.status-badge.led-ota .status-dot{background:#ec4899;box-shadow:0 0 6px #ec4899;animation:ledBreath 500ms ease-in-out infinite}
@keyframes ledBreath{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes ledBlink{0%,49%{opacity:1}50%,100%{opacity:.15}}
.device-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}.device-stat{background:var(--bg);border-radius:10px;padding:10px 12px}
/* Tegel-titels — kleine accent-label bovenaan elke tegel, zoals section-labels
   op marketing pagina's. Lichte uppercase, gespatieerd, accent-kleur. */
.device-stat-title{
  font-size:.7rem;font-weight:600;color:var(--text);
  text-transform:uppercase;letter-spacing:.1em;
  margin:-2px 0 8px;padding-bottom:6px;
  border-bottom:1px solid var(--border);
}
/* wattBalancer-tegel: geen uppercase + "Balancer" in mango-accent. */
.device-stat-title-wb{text-transform:none;letter-spacing:.01em;font-size:.85rem}
.device-stat-title-wb span{color:var(--accent)}
/* link-dot (Inverter/P1) — 3-stage indicator:
   .ok   = groen ademend (2s) — TCP bereikbaar + data_ok
   .warn = oranje ademend (1s) — bereikbaar maar geen data, OF eerder ooit data gehad maar nu offline
   .err  = rood statisch — nooit data gehad op huidige instellingen
   .off (legacy) = grijs dim, fallback */
.link-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:6px;vertical-align:middle}
.link-dot.ok  {background:#22c55e;box-shadow:0 0 6px #22c55e;animation:ledBreath 2000ms ease-in-out infinite}
.link-dot.warn{background:#f59e0b;box-shadow:0 0 6px #f59e0b;animation:ledBreath 1000ms ease-in-out infinite}
.link-dot.err {background:#ef4444;box-shadow:0 0 6px #ef4444;opacity:.85}
.link-dot.off {background:#64748b;opacity:.6}
/* Backwards-compat: oude .on class blijft groen ademen voor evt. cached pagina */
.link-dot.on  {background:#22c55e;box-shadow:0 0 6px #22c55e;animation:ledBreath 2000ms ease-in-out infinite}
.device-stat-label{font-size:11px;color:var(--text);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;display:flex;align-items:center;gap:5px}.device-stat-label svg{width:13px;height:13px}
.device-stat-value{font-size:14px;font-weight:600}
.actions{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}.actions .btn{width:auto;flex:1;min-width:180px}
.icon-circle{width:48px;height:48px;border-radius:12px;background:var(--accent-dim);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--accent)}.icon-circle.lg{width:56px;height:56px;border-radius:50%}
.text-center{text-align:center}.mb-6{margin-bottom:24px}.mt-6{margin-top:24px}.hidden{display:none!important}
.settings-section{margin-bottom:28px;padding-bottom:28px;border-bottom:1px solid var(--border)}.settings-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.settings-title{font-size:15px;font-weight:600;margin-bottom:4px}.settings-desc{font-size:13px;color:var(--text-muted);margin-bottom:16px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:500}
.badge-on{background:var(--accent-dim);color:var(--accent)}.badge-off{background:rgba(100,116,139,.1);color:var(--text-muted)}
.qr-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px;background:var(--bg);border-radius:12px;margin-bottom:16px}
#qr-canvas canvas,#qr-canvas img{border-radius:8px}
.secret-box{font-family:monospace;font-size:13px;letter-spacing:2px;background:var(--bg);padding:8px 12px;border-radius:8px;border:1px solid var(--border);color:var(--text-muted);word-break:break-all;text-align:center}
.user-menu{position:relative;cursor:pointer}.user-menu .avatar{cursor:pointer;transition:opacity .2s}.user-menu .avatar:hover{opacity:.85}
.dropdown{position:absolute;right:0;top:calc(100% + 8px);background:var(--card);border:1px solid var(--border);border-radius:12px;min-width:220px;box-shadow:0 8px 32px rgba(0,0,0,.4);z-index:100;overflow:hidden;white-space:nowrap}
.dropdown-item{display:flex;align-items:center;gap:10px;padding:12px 16px;font-size:14px;font-weight:500;color:var(--text);cursor:pointer;transition:background .15s}.dropdown-item:hover{background:var(--card-hover)}
.dropdown-item.danger{color:var(--danger)}.dropdown-divider{height:1px;background:var(--border)}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:32px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:0 16px 48px rgba(0,0,0,.5);animation:modalPop .25s ease-out}.form-row-inline{display:flex;align-items:center;gap:12px;margin-bottom:16px}.form-row-inline .form-label{flex:0 0 auto;margin:0;white-space:nowrap}.form-row-inline select,.form-row-inline input{margin-left:auto;min-width:0;width:130px;padding:10px 12px;background:var(--input-bg);border:1.5px solid var(--border);border-radius:10px;color:var(--text);font-size:14px;font-family:inherit;outline:none}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.modal-title{font-size:18px;font-weight:700}
.modal-close{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;line-height:1}.modal-close:hover{color:var(--text)}
.device-img-wrap{width:100%;height:80px;background:var(--bg);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;overflow:hidden}
.device-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}.device-btn{flex:1 1 0;min-width:0;padding:9px 8px;border-radius:9px;border:1.5px solid var(--border);background:transparent;color:var(--text);font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.device-btn:hover:not(:disabled){background:var(--card-hover);color:var(--text)}.device-btn:disabled{opacity:.4;cursor:not-allowed}.device-btn.danger:hover{border-color:rgba(239,68,68,.4);color:var(--danger);background:var(--danger-dim)}
/* Up/down arrows next to status badge: 2 small chevrons inline, only
   visible when the user has 2+ devices (renderDeviceHeader hides them
   on a 1-device dashboard). */
.status-row{display:flex;align-items:center;gap:8px;justify-content:flex-end}
/* status-stack — twee gestapelde "pills" rechts in de header.
   align-items:stretch maakt beide pills even breed (= breedte van de
   breedste). De toggle is doorgaans iets breder dan de Actief-badge, dus
   de badge stretcht mee naar dezelfde breedte. Visueel netter: één
   strakke kolom van twee identieke pills. Pijltjes ↑↓ staan in een aparte
   zus-container ernaast. */
.status-stack{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.status-stack > .status-badge{justify-content:center}
.status-stack > .device-toggle{justify-content:center}
/* Pijltjes ↑↓ — elk in een ronde knop (matcht pill-stijl van de status-pills).
   Kolom-flex met kleine gap zodat ze duidelijk twee aparte knoppen zijn. */
.device-order-btns{display:flex;flex-direction:column;gap:6px}
.device-order-btn{
  width:28px;height:28px;padding:0;border-radius:50%;
  border:1px solid var(--border);background:rgba(255,255,255,.04);
  color:var(--text-muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s,color .15s,opacity .15s;
}
.device-order-btn:hover:not(:disabled){
  background:rgba(255,255,255,.08);
  border-color:rgba(255,126,45,.45);
  color:var(--accent);
}
.device-order-btn:disabled{opacity:.3;cursor:not-allowed}
.device-order-btn svg{width:14px;height:14px}
.switch{position:relative;width:36px;height:20px;cursor:pointer;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:#334155;border-radius:20px;transition:.25s}
.switch .slider::before{content:"";position:absolute;height:14px;width:14px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.25s}
.switch input:checked + .slider{background:var(--accent)}
.switch input:checked + .slider::before{transform:translateX(16px)}


.device-card.disabled:hover{background:var(--card);border-color:var(--border);box-shadow:none}
.header-right{display:flex;flex-direction:row;align-items:flex-start;gap:8px}
/* (status-stack-row override verwijderd 6 mei 2026: was leftover van oude
   horizontale layout en overschreef de column-stack uit regel 130.) */
.device-header-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.device-img-inline{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.device-img-inline svg{width:28px;height:28px;filter:drop-shadow(0 0 12px rgba(255,126,45,.35))}
.power-pill{padding:5px 12px;border-radius:20px;font-size:13px;font-weight:700;color:#fbbf24;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.25);white-space:nowrap}
@media(max-width:600px){.stats-grid{grid-template-columns:1fr}.device-stats{grid-template-columns:1fr}.actions{flex-direction:column}.actions .btn{min-width:unset}.device-card{padding:16px}.device-btn{font-size:12px;padding:9px 6px}.device-btn svg{width:12px;height:12px}.header-right{gap:6px}.status-badge{padding:3px 8px;font-size:11px}
/* Mobiel: toggle compacter (kleinere padding + label, kleinere track) zodat
   de status-stack niet uit de tegel ramt op smalle viewports. */
.device-toggle{padding:3px 8px;font-size:11px;gap:4px}
.device-toggle-track{width:24px;height:14px}
.device-toggle-thumb{width:10px;height:10px}
.device-toggle.on .device-toggle-thumb{left:12px}
.device-toggle-label{min-width:22px}
}
*{box-sizing:border-box}
.form-section{background:rgba(15,23,42,.5);border:1px solid var(--border);border-radius:10px;padding:14px 14px 2px;margin-bottom:16px}
/* Section-titel binnen settings/advanced-modals.
   Zelfde stijl als device-stat-title op de dashboard-tegels: kleine
   uppercase accent-tekst met onderstreping. Maakt visueel meteen
   duidelijk waar elke sectie begint. */
.form-section-title{
  font-size:.7rem;font-weight:600;color:var(--accent);
  text-transform:uppercase;letter-spacing:.1em;
  margin:-2px 0 12px;padding-bottom:6px;
  border-bottom:1px solid var(--border);
}
.edit-pen{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-left:6px;border-radius:4px;color:var(--text-muted);cursor:pointer;transition:all .15s;vertical-align:middle}
.edit-pen:hover{color:var(--accent)}
.device-name{display:inline-flex;align-items:center}
.device-stat.clickable{cursor:pointer;transition:background .2s}
.device-stat.clickable:hover{background:var(--card-hover)}
.info-tip{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:auto;border-radius:50%;background:var(--border);color:var(--text-muted);font-size:11px;font-weight:700;font-style:italic;font-family:Georgia,serif;cursor:help;position:relative;outline:none;flex:0 0 16px}.form-row-inline .info-tip + select,.form-row-inline .info-tip + input{margin-left:8px}.info-tip:hover,.info-tip:focus{background:var(--accent);color:#0b1120}.info-tip:hover::after,.info-tip:focus::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);background:#0f1729;color:var(--text);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:12.5px;font-weight:400;font-style:normal;font-family:'DM Sans','Segoe UI',system-ui,sans-serif;line-height:1.55;letter-spacing:0;white-space:normal;width:240px;text-align:left;box-shadow:0 8px 20px rgba(0,0,0,.4);z-index:1000;pointer-events:none}.mode-toggle{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-left:auto}.mode-toggle button{flex:0 0 auto;background:transparent;border:0;color:var(--text-muted);font-family:inherit;font-size:13px;font-weight:600;padding:8px 14px;cursor:pointer;transition:background .15s,color .15s}.mode-toggle button:hover{background:var(--card-hover);color:var(--text)}.mode-toggle button.active{background:var(--accent);color:#0b1120}.mode-toggle button:disabled,.mode-toggle button[disabled]{color:#475569;cursor:not-allowed;background:transparent}.mode-toggle button:disabled:hover{background:transparent;color:#475569}.device-mode-row{display:flex;align-items:center;gap:10px;padding:0;margin-bottom:8px;background:transparent;border-radius:0}.device-mode-label{font-size:11px;font-weight:600;color:var(--text);text-transform:uppercase;letter-spacing:.05em;flex:0 0 auto}/* Device mode-toggle: segmented control rechts, label "MODUS" links op
   dezelfde regel zodat de control compacter blijft (niet over de hele
   tegelbreedte uitgerekt).
   Grid van 6 kolommen (LCM van 3 en 2):
     Rij 1: 3 actieve knoppen, elk 2 kolommen breed (Uit / Volg / Statisch)
     Rij 2: 2 toekomstige knoppen, elk 3 kolommen breed (Dynamisch / Planner) */
.device-mode-row{flex-direction:row;align-items:flex-start;gap:10px;flex-wrap:nowrap;min-width:0;overflow:hidden}
.device-mode-row .device-mode-label{flex:0 0 auto;align-self:center}
.device-mode-toggle{
  margin-left:auto;
  display:grid;grid-template-columns:repeat(6,1fr);gap:0;
  width:auto;flex:1 1 auto;min-width:0;max-width:100%;
}
.device-mode-toggle button{
  grid-column:span 2;
  padding:5px 6px;font-size:10.5px;font-weight:600;
  border-right:1px solid var(--border);
  border-top:0;
  text-align:center;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-width:64px;
}
.device-mode-toggle button.row2{
  grid-column:span 3;
  border-top:1px solid var(--border);
  background:repeating-linear-gradient(135deg,transparent 0,transparent 5px,rgba(255,255,255,.022) 5px,rgba(255,255,255,.022) 10px);
  color:#64748b;font-size:10px;
  cursor:not-allowed;
}
.device-mode-toggle button:nth-child(3){border-right:0}
.device-mode-toggle button:nth-child(5){border-right:0}.device-mode-row .device-fixed-pct{padding:6px 10px;background:var(--input-bg);border:1.5px solid var(--border);border-radius:8px;color:var(--text);font-size:12px;font-family:inherit;outline:none;width:80px}.device-mode-row[data-mode="dynamic"] .device-fixed-pct{display:none}.device-stat.clickable:hover{background:var(--bg)}.combo-row.collapsible{max-height:60px;overflow:hidden;transition:max-height .25s ease,opacity .25s ease,margin .25s ease,padding .25s ease}.combo-row.collapsible.row-hidden{max-height:0;opacity:0;margin:0;padding:0;border-width:0}.combo-value{transition:opacity .15s ease}.lang-switch{position:absolute;top:14px;right:14px;z-index:5;display:flex;gap:6px}.lang-switch.hidden{display:none}.lang-btn{background:transparent;border:1.5px solid var(--border);border-radius:8px;padding:3px 7px;font-size:14px;line-height:1;cursor:pointer;transition:border-color .2s}.lang-btn:hover{border-color:var(--text-muted)}.lang-btn.active{border-color:var(--accent)}

/* ── Server status widget op login-card ───────────────────── */
/* Positie: links-boven binnen de card (lang-switch zit rechts-boven) */
/* Server-status: bolletje in een subtiele pill-frame, geen tekst.
   Tooltip toont status-detail via de title-attr en de uitklapbare status-tip.
   Kleuren: groen=online, oranje=onderhoud (bezig of gepland), rood=onbereikbaar. */
.status-dot-wrap{position:absolute;top:14px;left:14px;z-index:5;display:inline-flex;align-items:center;cursor:pointer;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.03);border:1px solid var(--border);transition:background .15s,border-color .15s;user-select:none}
.status-dot-wrap:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,126,45,0.25)}
.status-dot{width:10px;height:10px;border-radius:50%;background:var(--text-dim);transition:background .3s,box-shadow .3s}
.status-dot.ok{background:#10b981;box-shadow:0 0 8px rgba(16,185,129,.6);animation:dotPulse 2.6s ease-in-out infinite}
.status-dot.warn{background:#ff7e2d;box-shadow:0 0 8px rgba(255,126,45,.6);animation:dotPulse 2s ease-in-out infinite}
.status-dot.err{background:#ef4444;box-shadow:0 0 8px rgba(239,68,68,.6);animation:dotPulse 1.2s ease-in-out infinite}
.status-dot.loading{background:var(--text-dim)}
@keyframes dotPulse{0%,100%{opacity:.6}50%{opacity:1}}
/* Tekst-label permanent verborgen — alleen bolletje + tooltip is gewenst. */
.status-label{display:none}
.status-tip{position:absolute;top:calc(100% + 8px);left:0;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px 14px;min-width:240px;max-width:320px;font-size:.82rem;color:var(--text);box-shadow:0 8px 24px rgba(0,0,0,.4);display:none;z-index:200;line-height:1.55;text-align:left}
.status-tip.show{display:block}
.status-tip strong{color:var(--accent);display:block;margin-bottom:4px}
.status-tip .muted{color:var(--text-muted);font-size:.76rem;margin-top:6px}
/* 1.0.9 — Network-scan button + result-cards */
.scan-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:var(--accent-dim);color:var(--accent);border:1px solid rgba(255,126,45,.3);cursor:pointer;margin-left:6px;flex-shrink:0;transition:background .15s,border-color .15s,opacity .15s}
.scan-btn:hover:not(:disabled){background:rgba(255,126,45,.25);border-color:rgba(255,126,45,.5)}
.scan-btn:active:not(:disabled){transform:translateY(1px)}
.scan-btn:disabled{background:rgba(100,116,139,.10);color:var(--text-muted);border-color:var(--border);cursor:not-allowed;opacity:.6}
.scan-hint{font-size:11.5px;color:var(--text-muted);margin-top:4px;margin-left:2px;line-height:1.35}
/* Reset-instelling knop: ↺-icoontje naast een dropdown, klik = terug naar
   de default-waarde van die specifieke setting. */
.reset-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;background:transparent;color:var(--text-muted);border:1px solid var(--border);cursor:pointer;margin-left:6px;flex-shrink:0;transition:color .15s,border-color .15s,background .15s;font-size:14px;line-height:1;padding:0}
.reset-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-dim)}
.reset-btn:active{transform:translateY(1px)}
.scan-hit{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--input-bg);border:1px solid var(--border);border-radius:10px;margin-bottom:8px;cursor:pointer;transition:border-color .15s,background .15s}
.scan-hit:hover{border-color:var(--accent);background:rgba(255,126,45,.04)}
.scan-hit-ip{font-family:'DM Mono','Courier New',monospace;font-weight:600;color:var(--text)}
.scan-hit-brand{margin-left:auto;font-size:12px;color:var(--text-muted);background:rgba(100,116,139,.12);padding:3px 8px;border-radius:6px}
.scan-hit-brand.match{color:var(--accent);background:var(--accent-dim)}