/* ============================================================
   Modelo — Operation matrix & KPI strip styles
   ============================================================ */

/* KPI strip cards */
.mdl-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.mdl-kpi-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  text-align: center;
}
.mdl-kpi-card__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 6px;
}
.mdl-kpi-card__value {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--sb-blue-700);
}
.mdl-kpi-card__unit {
  font-size: 0.75rem;
  color: var(--text-mute);
  margin-left: 2px;
}
.mdl-kpi-card--positive .mdl-kpi-card__value { color: var(--sb-green); }
.mdl-kpi-card--negative .mdl-kpi-card__value { color: var(--sb-red); }

/* Operation matrix grid */
.mdl-matrix {
  display: inline-block;
  font-size: 0.7rem;
  user-select: none;
}
.mdl-matrix__header {
  display: grid;
  grid-template-columns: 40px repeat(24, 32px);
  gap: 1px;
  margin-bottom: 2px;
}
.mdl-matrix__row {
  display: grid;
  grid-template-columns: 40px repeat(24, 32px);
  gap: 1px;
}
.mdl-matrix__label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--text-mute);
  font-size: 0.62rem;
}
.mdl-matrix__cell {
  width: 32px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.6rem;
  transition: background .12s;
  position: relative;
}
.mdl-matrix__cell:hover {
  filter: brightness(1.15);
  z-index: 1;
  transform: scale(1.3);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.mdl-matrix__cell--S {
  background: var(--sb-blue-300);
  color: var(--sb-blue-800);
}
.mdl-matrix__cell--R {
  background: var(--sb-red-soft);
  color: var(--sb-red);
}
.mdl-matrix__cell--SS {
  background: var(--sb-blue-100);
  color: var(--sb-blue-700);
}
.mdl-matrix__cell--SB {
  background: #FFE0E0;
  color: var(--sb-red);
}
.mdl-matrix__cell--positive {
  background: var(--pos-bg);
  color: var(--pos);
}
.mdl-matrix__cell--negative {
  background: var(--sb-blue-100);
  color: var(--sb-blue-600);
}
.mdl-matrix__cell--zero {
  background: var(--panel-alt);
  color: var(--text-faint);
}

/* Matrix editor popup */
.mdl-matrix-editor {
  position: absolute;
  z-index: 100;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 80px;
}
.mdl-matrix-editor button {
  padding: 3px 8px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 600;
  text-align: left;
  background: none;
  color: var(--text);
}
.mdl-matrix-editor button:hover {
  background: var(--sb-blue-100);
}

/* Legend */
.mdl-matrix-legend {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  font-size: 0.65rem;
  color: var(--text-soft);
}
.mdl-matrix-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mdl-matrix-legend .swatch {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  display: inline-block;
}

/* Sim results tabs */
.mdl-results-tabs {
  margin-top: 16px;
}
.mdl-results-tabs .tab {
  display: inline-block;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-mute);
  border-bottom: 2px solid transparent;
  margin-right: 2px;
}
.mdl-results-tabs .tab--active {
  color: var(--sb-blue-700);
  border-bottom-color: var(--sb-blue-700);
}