/* RRB-SHARED v0.10.0 — do not edit project copy; sync from /opt/stacks/ops/shared */
/* /opt/stacks/ops/shared/css/rrb-storingsmatrix.css
 * RRB Storingsmatrix — component stijlen.
 * Alleen design tokens; geen hex-kleuren.
 * Klassen: .rrb-sm__* (prefix rrb-sm).
 * Zie shared/js/ux/storingsmatrix.js voor de bijbehorende JS.
 */

/* ── Root ──────────────────────────────────────────────────────────────────── */

.rrb-sm {
  font-size: var(--fs-md);
  line-height: 1.4;
}

/* Componentklassen zetten display; [hidden] moet altijd winnen. */
.rrb-sm [hidden] {
  display: none !important;
}

/* ── Statusbanners ─────────────────────────────────────────────────────────── */

.rrb-sm__banner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  align-items: center;
  padding: var(--sp-sm) var(--sp-md);
  margin-bottom: var(--sp-sm);
  border-radius: var(--r-card);
  font-size: var(--fs-sm);
}

.rrb-sm__banner.is-stale,
.rrb-sm__banner.is-uncertain {
  background: var(--warning-50);
  border: 1px solid var(--warning-300);
  color: var(--warning-text);
}

.rrb-sm__banner.is-unavailable {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* ── Tabs ──────────────────────────────────────────────────────────────────── */

.rrb-sm__tabs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}

.rrb-sm__tabs-extra {
  font-size: var(--fs-sm);
}

.rrb-sm__seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  overflow: hidden;
  background: var(--surface);
}

.rrb-sm__tab-btn,
.rrb-sm__seg-btn {
  border: 0;
  background: none;
  padding: 6px 10px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  cursor: pointer;
  min-height: 32px;
  line-height: 1.2;
}

.rrb-sm__tab-btn:focus-visible,
.rrb-sm__seg-btn:focus-visible {
  outline: 2px solid var(--primary-400);
  outline-offset: -2px;
}

.rrb-sm__tab-btn[aria-selected="true"],
.rrb-sm__seg-btn[aria-pressed="true"] {
  background: var(--primary-50);
  color: var(--primary-700);
  font-weight: 600;
}

/* ── Skeleton ──────────────────────────────────────────────────────────────── */

.rrb-sm__skel {
  padding: var(--sp-md) 0;
}

/* ── Toolbar ───────────────────────────────────────────────────────────────── */

.rrb-sm__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  align-items: center;
  margin-bottom: var(--sp-md);
}

.rrb-sm__filter-select {
  width: auto;
  flex: 0 1 240px;
  min-width: 160px;
}

.rrb-sm__badge {
  margin-left: auto;
  white-space: nowrap;
}

/* ── Quick-filter chips ────────────────────────────────────────────────────── */

.rrb-sm__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--sp-sm);
}

.rrb-sm__chip {
  min-height: 32px;
}

button.rrb-sm__chip {
  border: 1px solid var(--border);
}

.rrb-sm__chip[aria-pressed="true"] {
  background: var(--primary-50);
  color: var(--primary-700);
  border-color: var(--primary-300);
}

/* ── Plan-switch (mobiel) ──────────────────────────────────────────────────── */

.rrb-sm__plan-pick {
  display: none;
  margin-bottom: var(--sp-sm);
}

.rrb-sm__plan-seg {
  width: 100%;
}

.rrb-sm__plan-seg .rrb-sm__seg-btn {
  flex: 1;
}

/* ── Pager ─────────────────────────────────────────────────────────────────── */

.rrb-sm__pager {
  display: flex;
  align-items: center;
  gap: var(--sp-sm, 8px);
  padding: var(--sp-sm, 8px) 0;
}

.rrb-sm__result {
  margin: var(--sp-sm, 8px) 0 0;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

.rrb-sm__result:empty {
  display: none;
}

.rrb-sm__pager-info {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  min-width: 3rem;
  text-align: center;
}

/* ── Tabel ─────────────────────────────────────────────────────────────────── */

.rrb-sm__scroll {
  max-width: 100%;
  overflow-x: auto;
}

/* Vult de beschikbare breedte; scrollt alleen als de inhoud breder is. */
.rrb-sm__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  margin-bottom: var(--sp-sm);
}

.rrb-sm__table th,
.rrb-sm__table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.rrb-sm__table thead th {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 600;
  background: var(--surface-muted);
  position: sticky;
  top: 0;
}

.rrb-sm__table thead th.rrb-sm__col--center {
  text-align: center;
}

.rrb-sm__table thead th.rrb-sm__col--plan,
.rrb-sm__table thead th.rrb-sm__col--cust {
  text-align: center;
}

.rrb-sm__table tr:last-child td {
  border-bottom: 0;
}

/* Groepkoprij */
.rrb-sm__grp td {
  background: var(--surface-muted);
  font-weight: 600;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.rrb-sm__grp-cnt {
  font-weight: 400;
}

/* Typenaam */
.rrb-sm__tname {
  font-weight: 500;
  white-space: nowrap;
}

/* Mobiele subregel onder type */
.rrb-sm__tsub {
  display: none;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}

/* Eerste kolom: min breedte op desktop */
.rrb-sm__table td:first-child {
  min-width: 190px;
}

/* Kolombreedten */
.rrb-sm__col--device  { min-width: 112px; }
.rrb-sm__col--form    { min-width: 112px; }
.rrb-sm__col--plan    { min-width: 112px; text-align: center; }
.rrb-sm__col--cust    { min-width: 112px; }
.rrb-sm__col--center  { text-align: center; }
.rrb-sm__col--status  { white-space: nowrap; }

/* Geselecteerd plan (actief op desktop-kolom, altijd zichtbaar op mobiel) */
.rrb-sm__plan-col:not(.is-selected-plan) {
  /* Verborgen op mobiel via media-query; altijd zichtbaar op desktop. */
}

/* ── Cel: selectoverlays ───────────────────────────────────────────────────── */

.rrb-sm__cell {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.rrb-sm__fmw {
  position: relative;
  display: inline-block;
  width: 104px;
}

.rrb-sm__fm {
  width: 100%;
  height: 30px;
  padding: 0 22px 0 8px;
  font-size: 12px;
  color: transparent;
}

/* Kleur van opties blijft leesbaar (native select) */
.rrb-sm__fm option {
  color: var(--text);
  font-style: normal;
  font-weight: 400;
}

/* Overlay: korte code */
.rrb-sm__fmv {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font: 600 12px/1 var(--font);
  font-variant-numeric: tabular-nums;
}

/* Kleur per vorm */
.rrb-sm__fmw[data-f="dashboard"]      .rrb-sm__fmv { color: var(--text-muted); font-weight: 500; }
.rrb-sm__fmw[data-f="digest"]         .rrb-sm__fmv { color: var(--text); }
.rrb-sm__fmw[data-f="direct"]         .rrb-sm__fmv,
.rrb-sm__fmw[data-f="direct_digest"]  .rrb-sm__fmv { color: var(--primary-700); }
.rrb-sm__fmw[data-f="inherit"]        .rrb-sm__fmv { color: var(--text-subtle); font-style: italic; font-weight: 400; }

.rrb-sm__fm:disabled + .rrb-sm__fmv { opacity: 0.55; }

/* Caret */
.rrb-sm__fmw::after {
  content: "";
  position: absolute;
  right: 9px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
  pointer-events: none;
}

/* Dirty state: outline (niet alleen kleur — toegankelijk) */
.rrb-sm__fm.is-dirty {
  box-shadow: 0 0 0 2px var(--warning-300);
  outline: 2px solid var(--warning-300);
  outline-offset: -2px;
}

/* Forced-colors: native tekst herstellen zodat contrast gegarandeerd blijft */
@media (forced-colors: active) {
  .rrb-sm__fm {
    color: ButtonText;
  }
  .rrb-sm__fmv {
    display: none;
  }
  .rrb-sm__fmw::after {
    display: none;
  }
}

/* ── Code-chip (Overzicht) ─────────────────────────────────────────────────── */

.rrb-sm__code {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-field);
  font: 600 12px/1 var(--font);
  background: var(--surface);
}

.rrb-sm__code[data-f="dashboard"]     { color: var(--text-muted); font-weight: 500; }
.rrb-sm__code[data-f="direct"],
.rrb-sm__code[data-f="direct_digest"] { color: var(--primary-700); }

/* ── Vaste route ───────────────────────────────────────────────────────────── */

.rrb-sm__fixed {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ── Dash (—) voor ontbrekende planregel (D4) ──────────────────────────────── */

.rrb-sm__dash {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ── Klantcellabels (origin, blocker, ends_at) ─────────────────────────────── */

.rrb-sm__ovr {
  font-size: 10px;
  color: var(--primary-700);
  display: block;
  text-align: center;
  margin-top: 2px;
}

.rrb-sm__inh {
  font-size: 10px;
  color: var(--text-subtle);
  display: block;
  text-align: center;
  margin-top: 2px;
}

.rrb-sm__blk {
  font-size: 10px;
  color: var(--warning-text);
  display: block;
  text-align: center;
  margin-top: 2px;
}

/* Bestaande ends_at (alleen-lezen, D3) */
.rrb-sm__ends-at-ro {
  font-size: 10px;
  color: var(--text-subtle);
  display: block;
  text-align: center;
  margin-top: 2px;
}

/* ── Dekkingsindicator ─────────────────────────────────────────────────────── */

.rrb-sm__st {
  display: flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.rrb-sm__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.rrb-sm__dot.is-ok  { background: var(--success); }
.rrb-sm__dot.is-off { background: var(--border-strong); }
.rrb-sm__dot.is-warn { background: var(--warning); }

/* ── Herkomst (Overzicht) ──────────────────────────────────────────────────── */

.rrb-sm__origin--cust { color: var(--primary-700); }
.rrb-sm__origin--plan { color: var(--text-muted); }

/* Apparaat (Overzicht) */
.rrb-sm__dev {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── Lege toestand ─────────────────────────────────────────────────────────── */

.rrb-sm__empty-state {
  padding: var(--sp-lg) var(--sp-md);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.rrb-sm__no-overrides {
  padding: var(--sp-md) var(--sp-md);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.rrb-sm__truncated-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
  padding: var(--sp-sm) var(--sp-md);
  background: var(--surface-muted);
}

/* ── Legenda (D6: alleen codelegenda) ─────────────────────────────────────── */

.rrb-sm__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: var(--sp-sm);
}

/* ── Actiebalk (sticky onderaan) ───────────────────────────────────────────── */

.rrb-sm__actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-sm);
  align-items: center;
  padding: var(--sp-sm) var(--sp-md);
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: var(--e2);
  z-index: 100;
}

.rrb-sm__actionbar-cnt {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* "Tot"-datuminvoer (D3) */
.rrb-sm__ends-at-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-xs, 4px);
}

.rrb-sm__ends-at-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  cursor: pointer;
}

.rrb-sm__ends-at-input {
  width: 140px;
  height: 32px;
  font-size: var(--fs-sm);
}

/* ── "Meer" knop ───────────────────────────────────────────────────────────── */

.rrb-sm__more {
  margin-top: var(--sp-sm);
}

/* ── Breakpoint 1023px ─────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .rrb-sm__tname {
    white-space: normal;
  }

  .rrb-sm__table td:first-child {
    min-width: 0;
    white-space: normal;
  }

  .rrb-sm__fmw {
    width: 92px;
  }

  .rrb-sm__col--device,
  .rrb-sm__col--plan,
  .rrb-sm__col--cust {
    min-width: 0;
  }

  .rrb-sm__table th,
  .rrb-sm__table td {
    padding: 6px;
  }
}

/* ── Breakpoint 767px (mobiel) ─────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* Plan-switch tonen op mobiel */
  .rrb-sm__plan-pick {
    display: flex;
  }

  /* Tabel als blokken */
  .rrb-sm__table {
    display: block;
    width: 100%;
  }

  .rrb-sm__table thead {
    display: none;
  }

  .rrb-sm__table tbody {
    display: block;
  }

  /* Twee-koloms grid per rij: label links, cel rechts */
  .rrb-sm__table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
  }

  .rrb-sm__table tr:last-child {
    border-bottom: 0;
  }

  .rrb-sm__grp {
    display: block;
    padding: 6px 12px;
    background: var(--surface-muted);
  }

  .rrb-sm__table td,
  .rrb-sm__grp td {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    white-space: normal;
    min-width: 0;
  }

  /* Status-cel verbergen op mobiel (staat als tsub) */
  .rrb-sm__table td.rrb-sm__col--status { display: none; }

  /* Niet-geselecteerde plankolomcellen verbergen */
  .rrb-sm__table td.rrb-sm__plan-col:not(.is-selected-plan) { display: none; }

  /* Verbergen van device/origin/dekking-kolom in Overzicht */
  .rrb-sm__table td.rrb-sm__col--device   { display: none; }
  .rrb-sm__table td.rrb-sm__col--origin   { display: none; }
  .rrb-sm__table td.rrb-sm__col--coverage { display: none; }

  /* Mobiele subregel tonen */
  .rrb-sm__tsub {
    display: block;
    margin-top: 2px;
  }

  .rrb-sm__tsub .rrb-sm__st {
    margin-top: 2px;
  }

  /* Cel en labels rechts uitlijnen op mobiel */
  .rrb-sm__cell { justify-content: flex-end; }
  .rrb-sm__fixed,
  .rrb-sm__ovr,
  .rrb-sm__inh,
  .rrb-sm__blk,
  .rrb-sm__ends-at-ro { text-align: right; }

  /* Grotere touch-target voor select */
  .rrb-sm__fmw { width: 128px; }
  .rrb-sm__fm  { height: 44px; }

  /* Tab-knoppen: minimaal 44px */
  .rrb-sm__tab-btn,
  .rrb-sm__seg-btn {
    min-height: 44px;
  }

  /* Chips: minimaal 44px touch-target */
  .rrb-sm__chip {
    min-height: 44px;
  }
}

/* ── Breakpoint 480px ──────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .rrb-sm__toolbar > *,
  .rrb-sm__filter-select {
    flex: 1 1 100%;
  }

  .rrb-sm__badge {
    flex: 0 0 auto;
    margin-left: 0;
  }

  .rrb-sm__actionbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-xs, 4px);
  }

  .rrb-sm__ends-at-input {
    width: 100%;
  }
}