/* =========================================================
   QTH-CRM Matrix (Corebusiness / Focuspunten) - Optie B
   - Cel krijgt statuskleur
   - Select blijft neutraal (dropdown menu kleurt NIET mee)
   - Sticky header + sticky 1e kolom
   - Custom bottom slider (thumb/track)
   ========================================================= */

/* Shell */
.matrix-shell { width: 100%; }

/* Scrollcontainer (sticky werkt hierbinnen) */
.matrix-scroll {
  overflow: auto;
  max-width: 100%;
  max-height: 60vh;
  border: 1px solid #dcdcdc;

  /* Firefox: pakbare scrollbar */
  scrollbar-width: auto;
  scrollbar-color: #8f99a3 #e9ecef;
}

/* WebKit (Chrome/Edge/Safari) scrollbar */
.matrix-scroll::-webkit-scrollbar { height: 18px; width: 12px; }
.matrix-scroll::-webkit-scrollbar-thumb { background-color: #8f99a3; border-radius: 10px; }
.matrix-scroll::-webkit-scrollbar-track { background: #e9ecef; }

/* Table */
.matrix-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: max-content;
  min-width: 100%;
}

/* Matrix cell basics */
.matrix-table th,
.matrix-table td {
  border: 1px solid #ddd;
  padding: 4px;
  text-align: center;
  vertical-align: middle;
  background: #fff;
  white-space: nowrap;
}

/* Eerste kolom */
.matrix-table th:first-child,
.matrix-table td:first-child {
  width: 220px;
  text-align: left;
}

/* Alle productgroep kolommen gelijk */
.matrix-table th:not(:first-child),
.matrix-table td:not(:first-child) {
  width: 120px;
}

/* Sticky header: lichtgrijs + zwart vet */
.matrix-table thead th {
  position: sticky;
  top: 0;
  z-index: 30;

  background: #e6e6e6;
  color: #000;
  font-weight: 700;
  border-bottom: 2px solid #bdbdbd;
}

/* Sticky eerste kolom (body) */
.matrix-table tbody td:first-child,
.matrix-table tbody th:first-child {
  position: sticky;
  left: 0;
  z-index: 20;

  background: #fff;
  border-right: 2px solid #d0d0d0;
}

/* Hoekcel */
.matrix-table thead th:first-child {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 40;

  background: #d9d9d9;
  color: #000;
  border-right: 2px solid #bdbdbd;
}

/* Link in eerste kolom */
.matrix-table tbody td:first-child a { font-weight: 600; }

/* Celkleur overgang + hover feedback */
.matrix-cell {
  transition: background-color 120ms ease-in-out;
  padding: 3px 6px;
}

.matrix-table tbody tr:hover td { outline: 1px solid rgba(0,0,0,0.08); }
.matrix-table tbody tr:hover td:first-child { outline: 1px solid rgba(0,0,0,0.12); }

/* Select: neutraal (dropdown menu blijft browser-native) */
.matrix-status-select {
  width: 100%;
  max-width: 100%;
  padding: 4px 26px;          /* rechts ruimte voor native pijltje, links neutraal */
  border-radius: 8px;

  border: 1px solid rgba(0,0,0,0.25);
  background-clip: padding-box;

  /* neutrale achtergrond zodat dropdown niet mee kleurt */
  background-color: rgba(255,255,255,0.9);
  color: #000;

  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);

  font-weight: 600;
  line-height: 1.2;

  text-align: left;
  text-align-last: left;
}

.matrix-status-select:hover { border-color: rgba(0,0,0,0.35); }

.matrix-status-select:focus {
  outline: 2px solid rgba(0, 90, 180, 0.35);
  outline-offset: 1px;
}


/* =========================================================
   Custom bottom slider (Firefox-proof) 74.3F
   ========================================================= */
.matrix-bottom-scroll {
  position: relative;
  height: 36px;
  background: #eef1f4;
  border: 1px solid #d0d0d0;
  border-top: 0;
  overflow: hidden;
}

.matrix-bottom-scroll-inner { height: 1px; }

.matrix-fake-track {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 8px;
  height: 20px;
  background: #dfe5ea;
  border-radius: 12px;
}

.matrix-fake-thumb {
  position: absolute;
  left: 0;
  top: 0;
  height: 20px;
  width: 120px;          /* JS zet dit dynamisch */
  background: #7f8a94;
  border-radius: 12px;
  cursor: grab;
}

.matrix-fake-thumb:active { cursor: grabbing; }

/* Bolletjes/indicatoren in matrices altijd uit */
.matrix-status-select::before,
.matrix-status-select::after {
  content: none !important;
  display: none !important;
}

.matrix-status-select {
  background-image: none !important;
}

/* Matrix kolomkop: logo + tekst (herbruikbaar voor toekomstige matrices) */
.matrix-colhead {
  vertical-align: bottom;
}

.matrix-header-logo {
  display: block;
  max-height: 26px;
  max-width: 120px;
  margin: 0 auto 4px auto;
}

.matrix-header-text {
  line-height: 1.1;
}