/* ═══ Listview CSS ══════════════════════════════════════════════════════════ */
#screen-by-band, #screen-by-region {
  display: flex; flex-direction: column; overflow: hidden;
}
.lv-empty { padding:40px; text-align:center; color:var(--text-muted); font-size:14px; }

.lv-top {
  display:flex; align-items:center; gap:10px; padding:8px 14px;
  background:var(--bg-secondary); border-bottom:1px solid var(--border-default);
  flex-shrink:0; flex-wrap:wrap;
}
.lv-top-l { display:flex; align-items:center; gap:8px; flex:1; }
.lv-chip {
  background:var(--accent-primary); color:#fff; font-family:var(--font-mono);
  font-size:10px; font-weight:700; padding:2px 7px; border-radius:9px;
}
.lv-sum { font-size:12px; color:var(--text-secondary); }
.lv-chk { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text-secondary); cursor:pointer; }
.lv-chk input { cursor:pointer; }

.lv-scroll { flex:1; overflow-y:auto; overflow-x:hidden; }

.lv-group { border-bottom:1px solid var(--border-subtle); }
.lv-ghdr {
  display:flex; align-items:center; gap:7px; padding:9px 14px;
  background:var(--bg-elevated); cursor:pointer; user-select:none;
  transition:background 120ms; position:sticky; top:0; z-index:1;
}
.lv-ghdr:hover { background:var(--bg-secondary); }
.lv-ghdr.has-r { border-left:3px solid var(--accent-primary); }
.lv-flag { font-size:16px; width:22px; flex-shrink:0; }
.lv-cname { font-size:13px; font-weight:600; flex:1; color:var(--text-primary); }
.lv-rbadge {
  font-size:11px; padding:1px 7px; border-radius:8px;
  background:var(--bg-primary); color:var(--text-muted); flex-shrink:0;
}
.lv-rbadge.open {
  background:color-mix(in srgb,var(--score-good) 18%,transparent);
  color:var(--score-good);
}
.lv-chev { font-size:11px; color:var(--text-muted); flex-shrink:0; }

.lv-gbody {}
.lv-row, .lv-cont-row {
  display:flex; align-items:center; gap:8px; padding:8px 14px 8px 18px;
  cursor:pointer; transition:background 100ms; min-height:40px;
  border-bottom:1px solid var(--border-subtle);
}
.lv-row:hover, .lv-cont-row:hover { background:var(--bg-elevated); }
.lv-row.lv-hide { display:none; }

.lv-pfx { font-family:var(--font-mono); font-size:11px; font-weight:700; min-width:30px; color:var(--text-secondary); flex-shrink:0; }
.lv-nm  { font-size:13px; color:var(--text-primary); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.lv-count { font-size:11px; color:var(--text-muted); flex-shrink:0; min-width:24px; text-align:right; }

.sb-wrap { width:52px; height:5px; background:var(--bg-primary); border-radius:3px; overflow:hidden; flex-shrink:0; }
.sb { height:100%; border-radius:3px; }
.sb.exc  { background:var(--score-excellent); }
.sb.good { background:var(--score-good); }
.sb.mod  { background:var(--score-moderate); }
.sb.poor { background:var(--score-poor); }
.sb.marg { background:#555; }
.sb.nil  { width:0 !important; }

.spct { font-size:11px; font-weight:700; min-width:30px; text-align:right; font-family:var(--font-mono); flex-shrink:0; }
.spct.exc  { color:var(--score-excellent); }
.spct.good { color:var(--score-good); }
.spct.mod  { color:var(--score-moderate); }
.spct.poor { color:var(--score-poor); }
.spct.marg,.spct.nil { color:var(--text-muted); }

/* By Region */
.lv-ctitle { font-size:14px; font-weight:600; flex:1; }
.lv-back {
  background:none; border:1px solid var(--border-default); color:var(--text-secondary);
  padding:4px 10px; border-radius:6px; cursor:pointer; font-size:12px; flex-shrink:0;
}
.lv-back:hover { background:var(--bg-elevated); color:var(--text-primary); }
.lv-bands { display:flex; gap:2px; flex-wrap:wrap; flex:1; min-width:0; }
.mb { font-size:9px; padding:1px 4px; border-radius:3px; font-family:var(--font-mono); font-weight:600; }
.mb.exc  { background:color-mix(in srgb,var(--score-excellent) 22%,var(--bg-elevated)); color:var(--score-excellent); }
.mb.good { background:color-mix(in srgb,var(--score-good) 22%,var(--bg-elevated));      color:var(--score-good); }
.mb.mod  { background:color-mix(in srgb,var(--score-moderate) 22%,var(--bg-elevated));  color:var(--score-moderate); }
.mb.poor { background:color-mix(in srgb,var(--score-poor) 22%,var(--bg-elevated));      color:var(--score-poor); }
.mb.marg { background:var(--bg-elevated); color:var(--text-muted); }
.mb.nil  { display:none; }
.lv-cont-row { padding-left:14px; }
.lv-cont-row .lv-cname { font-weight:500; }

/* ── Tegelraster (By Band groepen + By Region entiteiten) ── */
.lv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 naast elkaar op smal scherm */
  gap: 6px;
  padding: 8px;
}
@media (min-width: 560px) {
  .lv-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

.lv-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 8px;
  min-height: 44px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.lv-tile:hover { background: var(--bg-elevated); }
.lv-tile.lv-hide { display: none; }

.lv-tile.exc  { border-left-color: var(--score-excellent); }
.lv-tile.good { border-left-color: var(--score-good); }
.lv-tile.mod  { border-left-color: var(--score-moderate); }
.lv-tile.poor { border-left-color: var(--score-poor); }
.lv-tile.marg { border-left-color: #555; }
.lv-tile.nil  { border-left-color: transparent; opacity: 0.6; }

.lv-tflag { font-size: 20px; line-height: 1; }
.lv-tname {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lv-tmeta { display: flex; align-items: center; gap: 6px; }
.lv-tpfx  { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--text-secondary); }
.lv-tsub  { font-size: 10px; color: var(--text-muted); }
.lv-tscore { font-size: 13px; font-weight: 700; font-family: var(--font-mono); }
.lv-tscore.exc  { color: var(--score-excellent); }
.lv-tscore.good { color: var(--score-good); }
.lv-tscore.mod  { color: var(--score-moderate); }
.lv-tscore.poor { color: var(--score-poor); }
.lv-tscore.marg, .lv-tscore.nil { color: var(--text-muted); }
.lv-tile .sb-wrap { width: 100%; }


/* ─── By Band: band-tabs (in-screen bandwissel) ───────────────────────────── */
.lv-bandtabs {
  display:flex; gap:6px; overflow-x:auto; padding:8px 12px 6px;
  -webkit-overflow-scrolling:touch; border-bottom:1px solid var(--border-subtle);
}
.lv-bandtabs::-webkit-scrollbar { display:none; }
.lv-bandtab {
  flex:0 0 auto; min-width:46px; padding:5px 12px;
  border:1px solid var(--border-default); border-radius:9px;
  background:var(--bg-elevated); color:var(--text-secondary);
  font-family:var(--font-mono); font-size:13px; font-weight:600; cursor:pointer;
  transition:background var(--transition-fast,120ms), color var(--transition-fast,120ms);
}
.lv-bandtab:hover { color:var(--text-primary); }
.lv-bandtab.is-active {
  background:var(--accent-primary); color:#fff; border-color:var(--accent-primary);
}