/* BUILD160 — compact server/Agent/vMix diagnostics in the runtime topbar. */
.hockey-diagnostics-ui {
  position: relative;
  z-index: 60;
  flex: 0 0 auto;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.runtime-diagnostics-btn {
  position: relative;
}
.runtime-diagnostics-btn.is-open { border-color: #5b7b98; }
.runtime-diagnostics-btn.is-loading .diagnostics-button-dot { animation: diagnosticsPulse 1s ease-in-out infinite; }
.diagnostics-button-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e2a84f;
  box-shadow: 0 0 0 3px rgba(226,168,79,.12);
}
.diagnostics-button-dot.ok {
  background: #53d8a8;
  box-shadow: 0 0 9px rgba(83,216,168,.65);
}
.diagnostics-button-dot.warning {
  background: #e2a84f;
  box-shadow: 0 0 8px rgba(226,168,79,.5);
}
.diagnostics-button-dot.error {
  background: #ff687c;
  box-shadow: 0 0 9px rgba(255,104,124,.58);
}

@keyframes diagnosticsPulse {
  0%, 100% { transform: scale(1); opacity: .65; }
  50% { transform: scale(1.35); opacity: 1; }
}

/* Keep the tab buttons to the left of the compact action buttons and never
   force the whole runtime header onto a second line on desktop. */
.runtime-topbar {
  grid-template-columns: minmax(145px, .42fr) minmax(0, 1fr) max-content;
  column-gap: clamp(7px, .8vw, 13px);
}
.runtime-tabs {
  min-width: 0;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding-bottom: 1px;
}
.runtime-tabs::-webkit-scrollbar { display: none; }
.runtime-tab {
  flex: 0 0 auto;
  min-height: 35px;
  padding-inline: clamp(8px, .7vw, 13px);
  white-space: nowrap;
}
.runtime-actions {
  gap: 5px;
  flex-wrap: nowrap;
  min-width: max-content;
}
.runtime-actions > .icon-btn,
.runtime-actions > .hockey-agent-ui,
.runtime-actions > .hockey-diagnostics-ui {
  flex: 0 0 auto;
}

.hockey-diagnostics-panel {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  width: min(590px, calc(100vw - 24px));
  max-height: min(760px, calc(100vh - 82px));
  overflow: auto;
  border: 1px solid #304961;
  border-radius: 16px;
  color: #dce8f5;
  background: rgba(7, 16, 27, .985);
  box-shadow: 0 26px 80px rgba(0,0,0,.58);
  backdrop-filter: blur(18px);
}

.hockey-diagnostics-header {
  position: sticky;
  z-index: 3;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 15px 12px;
  border-bottom: 1px solid #22384d;
  background: rgba(7,16,27,.98);
}
.hockey-diagnostics-header > div:first-child { display: grid; gap: 2px; }
.hockey-diagnostics-header small { color: #58cda8; font-size: 8px; font-weight: 950; letter-spacing: .14em; }
.hockey-diagnostics-header strong { font-size: 16px; }
.hockey-diagnostics-header-actions { display: flex; align-items: center; gap: 6px; }
.diagnostic-icon-btn {
  width: 29px;
  height: 29px;
  padding: 0;
  border: 1px solid #314961;
  border-radius: 8px;
  color: #a9b9ca;
  background: #0d1b2a;
  font-size: 17px;
}
.diagnostic-icon-btn:hover { border-color: #54708e; color: #eaf3fb; }
.diagnostic-overall {
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .08em;
}
.diagnostic-overall.ok { color: #8debc9; background: #123b31; }
.diagnostic-overall.warning { color: #f3c37b; background: #3a2c1a; }
.diagnostic-overall.error { color: #ffc0c9; background: #47232c; }

.hockey-diagnostics-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 7px;
  padding: 11px 13px 4px;
}
.diagnostic-health-card {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid #243b52;
  border-radius: 10px;
  background: #0a1826;
}
.diagnostic-health-card.ok { border-color: rgba(83,216,168,.30); }
.diagnostic-health-card.error { border-color: rgba(255,104,124,.42); }
.diagnostic-health-card.warning { border-color: rgba(226,168,79,.35); }
.diagnostic-health-card span { color: #72879d; font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.diagnostic-health-card b { color: #dce9f5; font-size: 10px; }
.diagnostic-health-card.ok b { color: #73dfbc; }
.diagnostic-health-card.error b { color: #ff9bab; }
.diagnostic-health-card.warning b { color: #efbd73; }
.diagnostic-health-card small { overflow: hidden; color: #60768d; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

.hockey-diagnostics-error {
  margin: 8px 13px 0;
  padding: 9px 10px;
  border-radius: 9px;
  color: #ffd2d9;
  background: #4a2028;
  font-size: 9px;
}
.hockey-diagnostics-section { padding: 9px 13px 0; }
.diagnostics-events-section { padding-bottom: 11px; }
.diagnostic-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 1px 7px;
}
.diagnostic-section-title strong { color: #c7d6e5; font-size: 10px; }
.diagnostic-section-title span { color: #5f758c; font-size: 8px; }
.hockey-diagnostic-devices { display: grid; gap: 7px; }
.hockey-diagnostic-device {
  display: grid;
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid #253e55;
  border-radius: 10px;
  background: #091723;
}
.hockey-diagnostic-device.selected { border-color: #397f6b; box-shadow: inset 0 0 0 1px rgba(83,216,168,.08); }
.hockey-diagnostic-device.offline { opacity: .78; }
.diagnostic-device-head { display: grid; grid-template-columns: 9px minmax(0,1fr) auto; align-items: center; gap: 8px; }
.diagnostic-device-head > div { min-width: 0; display: grid; gap: 2px; }
.diagnostic-device-head strong { overflow: hidden; color: #dce9f6; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.diagnostic-device-head small { overflow: hidden; color: #647a91; font: 8px ui-monospace, SFMono-Regular, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.diagnostic-device-head em { padding: 4px 6px; border-radius: 6px; color: #83e4c5; background: #14372f; font-size: 7px; font-style: normal; font-weight: 950; }
.diagnostic-device-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff687c; }
.diagnostic-device-dot.online { background: #53d8a8; box-shadow: 0 0 8px rgba(83,216,168,.58); }
.diagnostic-device-grid { display: flex; flex-wrap: wrap; gap: 4px 11px; color: #60778e; font-size: 8px; text-transform: uppercase; }
.diagnostic-device-grid span { white-space: nowrap; }
.diagnostic-device-grid b { color: #b7c9da; font-weight: 900; }
.diagnostic-device-grid b.ok { color: #73dfbc; }
.diagnostic-device-grid b.warning { color: #efbd73; }
.diagnostic-device-grid b.error { color: #ff98a8; }
.diagnostic-device-grid b.muted { color: #6d8095; }
.diagnostic-device-error { padding: 7px 8px; border-radius: 7px; color: #ffb3bd; background: #2d1c23; font-size: 8px; line-height: 1.35; }

.hockey-diagnostic-events {
  max-height: 290px;
  overflow: auto;
  border: 1px solid #1d344a;
  border-radius: 9px;
  background: #07131f;
}
.hockey-diagnostic-event {
  display: grid;
  grid-template-columns: 16px 50px 40px minmax(0,1fr);
  align-items: start;
  gap: 6px;
  padding: 7px 8px;
  border-bottom: 1px solid #14293c;
}
.hockey-diagnostic-event:last-child { border-bottom: 0; }
.diagnostic-event-icon { display: grid; width: 15px; height: 15px; place-items: center; border-radius: 5px; color: #7ddfbd; background: #12372e; font-size: 9px; font-weight: 950; }
.hockey-diagnostic-event.warning .diagnostic-event-icon { color: #efbd73; background: #392b1b; }
.hockey-diagnostic-event.error .diagnostic-event-icon { color: #ff9baa; background: #47232c; }
.hockey-diagnostic-event time { color: #60768c; font: 8px ui-monospace, SFMono-Regular, Consolas, monospace; }
.hockey-diagnostic-event > b { color: #6f879d; font-size: 7px; letter-spacing: .04em; }
.hockey-diagnostic-event > div { min-width: 0; display: grid; gap: 2px; }
.hockey-diagnostic-event strong { color: #c6d6e5; font-size: 8px; font-weight: 800; line-height: 1.3; }
.hockey-diagnostic-event small { overflow: hidden; color: #5f7489; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.diagnostic-empty { padding: 18px 12px; color: #61778d; text-align: center; font-size: 9px; }
.hockey-diagnostics-footer { display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px 12px; color: #536a80; font-size: 7px; }

@media (max-width: 1100px) {
  .runtime-topbar { grid-template-columns: minmax(115px,.3fr) minmax(0,1fr) max-content; }
  .runtime-tab { padding-inline: 7px; font-size: 10px; }
  .runtime-actions { gap: 3px; }
  .runtime-actions > .icon-btn { width: 32px; min-height: 32px; }
}

@media (max-width: 760px) {
  .runtime-topbar { grid-template-columns: minmax(90px,auto) minmax(0,1fr) max-content; }
  .runtime-topbar > div:first-child .eyebrow { display: none; }
  .runtime-topbar > div:first-child #runtimeTitle { font-size: 13px; }
  .runtime-tabs { gap: 4px; }
  .runtime-tab { min-height: 32px; padding-inline: 7px; font-size: 9px; }
  .hockey-diagnostics-panel { width: min(560px, calc(100vw - 16px)); }
}