html { scrollbar-gutter: stable; }
.dashboard-main { padding-top: 28px; }
.video-quality-detail { white-space: pre-line; }
.video-quality-detail:empty { display: none; }
.video-options { align-items: end; }
.card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #26313e; padding-top: 10px; }
.card-actions .open-link { border-top: 0; padding-top: 0; }
.rename-camera { border: 1px solid #344252; border-radius: 7px; background: #172231; color: #bcd0e8; padding: 7px 9px; font: 600 11px system-ui, sans-serif; cursor: pointer; }
.rename-camera:hover { background: #20354c; color: #fff; }
.rename-camera:focus-visible { outline: 2px solid #8cbaf1; outline-offset: 2px; }
#cameraNameForm { margin-top: 22px; }
#cameraNameInput { display: block; width: 100%; font-family: system-ui, sans-serif; }
.camera-name-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 14px; }
.dashboard-nav {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px;
  margin: 0 0 35px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid #27394d;
  border-radius: 14px;
  background: #0c131d;
}
.dashboard-nav-link {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 13px 19px;
  color: #93a6bc;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  border-radius: 9px;
  border: 1px solid transparent;
  transition: background .15s, color .15s;
}
.dashboard-nav-link:hover { background: #162536; color: #eff5fe; }
.dashboard-nav-link:focus-visible { outline: 2px solid #8cbaf1; outline-offset: 2px; }
.dashboard-nav-link[aria-current="page"] { color: #fff; background: #20354c; border-color: #3c5879; }
.dashboard-nav-link small {
  font-size: 9px;
  font-weight: 500;
  padding: 4px 7px;
  border: 1px solid #33455b;
  border-radius: 20px;
  color: #a2b4c9;
  white-space: nowrap;
}
.dashboard-nav-link small.running { color: #63e3a4; background: #112d23; border-color: #306b50; }
.dashboard-page[hidden] { display: none !important; }
.dashboard-page .video-panel { margin-bottom: 0; }
.dashboard-intro-content { width: 100%; }
.dashboard-title-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-bottom: 9px; }
.intro .dashboard-title-row h1 { margin: 0; }
.dashboard-title-row .dashboard-nav { margin: 0; flex-shrink: 0; }
.dashboard-intro-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.dashboard-intro-top .eyebrow { margin: 0; }
/* Reserve the controls' space so switching pages keeps the shared header still. */
.dashboard-intro:not([data-page="tally"]) .header-actions { visibility: hidden; pointer-events: none; }
@media (max-width: 950px) {
  .dashboard-title-row { grid-template-columns: 1fr; gap: 16px; }
  .dashboard-title-row .dashboard-nav { justify-self: end; }
}
@media (max-width: 600px) {
  .dashboard-intro-top { flex-wrap: wrap; }
  .dashboard-nav { width: 100%; gap: 5px; margin-bottom: 27px; }
  .dashboard-nav-link { flex: 1; padding: 12px 9px; gap: 7px; justify-content: center; font-size: 11px; }
  .dashboard-nav-link small { font-size: 8px; padding: 3px 5px; }
}
@media (max-width: 440px) {
  .dashboard-nav-link small { display: none; }
}

#connectForm #switcherType { width:100%; padding:12px; border:1px solid #344252; border-radius:10px; background:#0a1017; color:#edf3fa; font:13px system-ui,sans-serif; }
#connectForm #switcherIpLabel { margin-top:18px; }
#switcherConnectionStatus { overflow-wrap:anywhere; }

/* Video telemetry sits with its preview, leaving the input controls uncluttered. */
.video-preview-column { min-width:0; align-self:start; display:grid; gap:16px; }
.video-preview-column .video-monitor { width:100%; }
.video-insights { min-width:0; padding:17px 18px; border:1px solid #2b3d51; border-radius:13px; background:linear-gradient(135deg,#111d2b,#0c141e); }
.video-insights-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.video-insights-heading h3 { margin:0; color:#e7eff9; font-size:14px; font-weight:700; }
.video-insights-heading>span { border:1px solid #33465d; border-radius:20px; padding:4px 9px; color:#91a7bf; font-size:10px; white-space:nowrap; }
.video-insights-heading>span.running { color:#72dfb0; border-color:#2e6854; background:#102c23; }
.video-insights .video-quality-detail { display:grid; gap:12px; margin:0; white-space:normal; }
.video-insights-overview { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.video-insights-metric { min-width:0; padding:11px 12px; border:1px solid #27394c; border-radius:9px; background:#0a131e; }
.video-insights-metric span { display:block; margin-bottom:7px; color:#8299b3; font-size:10px; }
.video-insights-metric strong { display:block; color:#dceafb; font-size:13px; font-weight:650; line-height:1.5; overflow-wrap:anywhere; }
.video-insights-phones { display:grid; gap:9px; }
.video-insights-phone { min-width:0; padding:12px 13px; border:1px solid #283b4d; border-left:3px solid #5bb8a0; border-radius:9px; background:#101c29; }
.video-insights-phone h4 { margin:0 0 7px; font-size:12px; color:#edf5ff; }
.video-insights-phone p { margin:5px 0 0; font-size:11px; line-height:1.7; overflow-wrap:anywhere; }
.video-insights-target { color:#aac2dd; }
.video-insights-actual { color:#7cddbb; }
.video-insights-reason { color:#8b9fb5; }
.video-insights-budget { padding-top:11px; border-top:1px solid #26394c; display:grid; gap:5px; }
.video-insights-budget strong { color:#c8d9eb; font-size:11px; font-weight:600; line-height:1.7; }
.video-insights-budget small { color:#8197af; font-size:10px; line-height:1.6; }
.video-insights-empty { margin:0; color:#829ab4; font-size:11px; line-height:1.85; }
.video-insights .video-insights-note { padding-top:12px; margin-top:13px; border-top:1px solid #26394c; color:#8ca3bd; font-size:10px; line-height:1.8; }
@media (max-width:440px) {
  .video-insights { padding:14px; }
  .video-insights-overview { grid-template-columns:1fr; }
}