/* Home-tegel "Laatste sensor-update" (js/sensor-update.js) */
.dash-su { position: relative; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.dash-su::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, #2563eb, #6366f1, #a855f7); }
/* Breedte van de tegel: zie app.css, "Home over de volle breedte". */
.dash-su.is-new { animation: suGlow 2.4s ease-out; }
@keyframes suGlow { 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, .55); } 40% { box-shadow: 0 0 0 10px rgba(99, 102, 241, .12); } 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); } }
.su-loading { display: flex; align-items: center; gap: 10px; padding: 18px 4px; color: var(--text-muted, #64748b); font-size: .85rem; }
.su-loading span { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: #6366f1; border-radius: 50%; animation: suSpin .8s linear infinite; }
@keyframes suSpin { to { transform: rotate(360deg); } }

.su-head { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.su-head h3 { margin: 0 auto 0 0; font-size: .9rem; font-weight: 700; white-space: nowrap; }
.su-live { flex: none;  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 99px; font-size: .64rem; font-weight: 800;
           letter-spacing: .08em; text-transform: uppercase; color: #16a34a; background: rgba(22, 163, 74, .1); }
.su-live i { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; animation: suPulse 1.8s infinite; }
@keyframes suPulse { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .6); } 70% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } }

.su-rows { display: grid; grid-template-columns: 10px minmax(0, 1.5fr) minmax(88px, 1.1fr) auto auto; column-gap: 10px; align-content: start;
           transition: opacity .18s ease, transform .18s ease; min-height: 174px; }
.su-rows.is-out { opacity: 0; transform: translateX(-8px); }
.su-rows .su-empty { grid-column: 1 / -1; padding: 14px 0; }
.su-dots { display: flex; justify-content: center; gap: 6px; padding-top: 2px; }
.su-dots[hidden] { display: none; }
.su-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: var(--border, #cbd5e1); cursor: pointer; transition: width .25s, background .25s; position: relative; }
.su-dots button::after { content: ''; position: absolute; inset: -8px -3px; }
.su-dots button.is-on { width: 20px; background: #6366f1; }
/* Elke regel deelt de kolommen van .su-rows (subgrid): de lijntjes beginnen en eindigen overal op dezelfde plek. */
.su-row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; padding: 7px 6px; margin: 0 -6px;
          border-top: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: background .15s; }
.su-row:first-child { border-top: 0; }
.su-row:hover, .su-row:focus-visible { background: var(--bg-soft, rgba(100, 116, 139, .08)); outline: none; }
.su-row.is-new { animation: suGlow 2.4s ease-out; }
.su-dotc { width: 10px; height: 10px; border-radius: 50%; background: var(--hw); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hw) 22%, transparent); }
.su-loc { min-width: 0; }
.su-loc b { display: block; font-size: .92rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-loc span { display: block; font-size: .72rem; color: var(--text-muted, #64748b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.su-sw { position: relative; min-width: 0; }
.su-spark { display: block; width: 100%; height: 38px; }
.su-spark .su-line { fill: none; stroke: #2563eb; stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.su-spark .su-end { fill: #fff; stroke: #2563eb; stroke-width: 2; vector-effect: non-scaling-stroke; }
.su-spark .su-base { stroke: var(--border, #e2e8f0); stroke-width: 1; vector-effect: non-scaling-stroke; }
.su-spark .su-rain { fill: #3b82f6; opacity: .8; }
.su-nodata { position: absolute; left: 0; right: 0; top: 6px; text-align: center; font-size: .7rem; color: var(--text-muted, #94a3b8); }
.su-num { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.su-num b { font-size: 1.15rem; font-weight: 600; }
.su-num small { font-size: .7rem; color: var(--text-muted, #64748b); }
.su-num em { margin-left: 4px; padding: 1px 7px; border-radius: 99px; font-style: normal; font-weight: 700; font-size: .7rem; background: var(--bg-soft, rgba(100, 116, 139, .1)); }
.su-num em.up { color: #1d4ed8; background: rgba(37, 99, 235, .1); } .su-num em.down { color: #b45309; background: rgba(245, 158, 11, .12); }
.su-ago { display: flex; flex-direction: column; align-items: flex-end; font-size: .72rem; color: var(--text-muted, #64748b); white-space: nowrap; line-height: 1.25; }
.su-rainl { font-size: .68rem; color: #2563eb; font-weight: 600; }
.su-empty { margin: 8px 0; font-size: .82rem; color: var(--text-muted, #64748b); }
@media (max-width: 640px) {
    .su-rows { grid-template-columns: 10px minmax(0, 1fr) auto; min-height: 216px; }
    .su-sw { display: none; }
    .su-ago { grid-column: 2 / -1; flex-direction: row; justify-content: flex-start; gap: 8px; margin-top: -2px; }
    .su-num em { margin-left: 2px; }
}