/* ═══════════════════ Model Routing Tab ═══════════════════ */

.mr-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: var(--md-surface-2, #f5f5f5);
  border-radius: 12px;
  color: var(--md-on-surface-variant, #666);
  font-size: 14px;
  margin-bottom: 16px;
}
.mr-banner code {
  background: var(--md-surface-3, #e8e8e8);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.mr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.mr-card {
  background: var(--md-surface, #fff);
  border: 1px solid var(--md-outline-variant, #ddd);
  border-radius: 12px;
  padding: 16px;
}
.mr-card-full {
  grid-column: 1 / -1;
}
.mr-card-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 12px;
  color: var(--md-on-surface, #222);
}

.mr-table-wrap {
  overflow-x: auto;
}
#mr-health-table {
  width: 100%;
  font-size: 13px;
}
#mr-health-table th {
  white-space: nowrap;
}
.mr-model-name {
  font-weight: 500;
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 12px;
}

.mr-score-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 12px;
}
.mr-score-good { background: #e6f4ea; color: #1e7e34; }
.mr-score-mid  { background: #fff8e1; color: #f57f17; }
.mr-score-bad  { background: #fce8e6; color: #c62828; }

.mr-src-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}
.mr-src-production    { background: #e8f0fe; color: #1a73e8; }
.mr-src-probe-baseline { background: #fef7e0; color: #e37400; }
.mr-src-cold-start    { background: #f1f3f4; color: #5f6368; }

.mr-probe-cell { font-size: 12px; color: var(--md-on-surface-variant, #666); }
.mr-probe-fail { color: #c62828; font-weight: 500; }

/* Disabled row */
.mr-row-disabled { opacity: 0.45; }
.mr-row-disabled:hover { opacity: 0.7; }

/* Toggle switch */
.mr-toggle-cell { text-align: center; }
.mr-toggle {
  display: inline-block;
  position: relative;
  width: 40px; height: 22px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.mr-toggle input { display: none; }
.mr-toggle-track {
  display: block;
  width: 100%; height: 100%;
  border-radius: 11px;
  background: var(--md-surface-3);
  transition: background .25s ease;
  position: relative;
}
.mr-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .25s ease;
}
.mr-toggle input:checked + .mr-toggle-track {
  background: var(--md-primary, #1a73e8);
}
.mr-toggle input:checked + .mr-toggle-track::after {
  transform: translateX(18px);
}

/* Traffic distribution bars */
.mr-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.mr-bar-label {
  width: 220px;
  font-size: 12px;
  font-family: 'SF Mono', 'Consolas', monospace;
  text-align: right;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mr-bar-track {
  flex: 1;
  height: 16px;
  background: var(--md-surface-2, #f1f3f4);
  border-radius: 8px;
  overflow: hidden;
}
.mr-bar-fill {
  height: 100%;
  border-radius: 8px;
  transition: width 0.3s ease;
}
.mr-bar-pct {
  width: 50px;
  font-size: 12px;
  font-weight: 500;
  text-align: right;
}

/* Fallback events */
.mr-event-list {
  max-height: 300px;
  overflow-y: auto;
}
.mr-event-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border-bottom: 1px solid var(--md-outline-variant, #eee);
  font-size: 12px;
}
.mr-event-time {
  color: var(--md-on-surface-variant, #888);
  min-width: 60px;
}
.mr-event-from, .mr-event-to {
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 11px;
}
.mr-event-reason {
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 11px;
  margin-left: auto;
}
.mr-reason-429     { background: #fff3e0; color: #e65100; }
.mr-reason-5xx     { background: #fce8e6; color: #c62828; }
.mr-reason-timeout { background: #e8eaf6; color: #283593; }

.mr-empty {
  padding: 24px;
  text-align: center;
  color: var(--md-on-surface-variant, #888);
  font-size: 13px;
}

/* Dark mode */
[data-theme="dark"] .mr-banner { background: var(--md-surface-2); }
[data-theme="dark"] .mr-banner code { background: var(--md-surface-3); }
[data-theme="dark"] .mr-card { background: var(--md-surface); border-color: var(--md-outline-variant); }
[data-theme="dark"] .mr-score-good { background: #1b3a26; color: #81c784; }
[data-theme="dark"] .mr-score-mid  { background: #3e2723; color: #ffb74d; }
[data-theme="dark"] .mr-score-bad  { background: #3b1515; color: #ef9a9a; }
[data-theme="dark"] .mr-src-production    { background: #1a237e30; color: #90caf9; }
[data-theme="dark"] .mr-src-probe-baseline { background: #e65100a0; color: #ffcc80; }
[data-theme="dark"] .mr-src-cold-start    { background: var(--md-surface-2); color: var(--md-on-surface-variant); }
[data-theme="dark"] .mr-reason-429     { background: #3e272380; color: #ffb74d; }
[data-theme="dark"] .mr-reason-5xx     { background: #3b151580; color: #ef9a9a; }
[data-theme="dark"] .mr-reason-timeout { background: #1a237e40; color: #9fa8da; }