/* ═══════════════════════════════════════════════════════════════════════════
   MDM UNIFY — local preview (2026-08-15)
   Last-loaded sheet. One token recipe for buttons, chips, switches, fleet.
   Does not delete older dialects; it wins over them.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --btn-h: 44px;
  --btn-h-sm: 32px;
  --btn-r: 980px;
  --btn-r-sm: 11px;
  --btn-fs: 15px;
  --btn-fs-sm: 13px;
  --chip-h: 22px;
  --unify-cta: #0071e3;
  --unify-go: #30d158;
  --unify-stop: #ff453a;
  --text3: rgba(235, 235, 245, 0.72);
  --ios-label-3: rgba(235, 235, 245, 0.72);
  --apple-label-3: rgba(245, 245, 247, 0.72);
}

/* Skip link */
.mdm-skip {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 10050;
  background: var(--unify-cta);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  font: 600 13px/1.2 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  transform: translateY(-160%);
}
.mdm-skip:focus { transform: none; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
#loginOverlay .login-trial-cta,
#loginOverlay .login-register-btn,
.pur-btn-primary,
.dc-act.primary,
.dc .dc-act.primary,
.qa-btn.accent,
.login-box button:not(.lang-btn):not(.login-contact-btn):not(.pur-close):not(.pur-copy-btn):not(.pur-btn-ghost) {
  min-height: var(--btn-h) !important;
  height: auto !important;
  padding: 12px 20px !important;
  border-radius: var(--btn-r) !important;
  background: var(--accent, var(--unify-cta)) !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: var(--btn-fs) !important;
  font-weight: 600 !important;
  border: 1px solid transparent !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset !important;
}
/* Stream actions: outlined, not candy fills. Start ≠ No-Dialog. */
.vhud-btn,
.screen-stream-ctrl .vhud-btn,
.scr-btn {
  min-height: 32px !important;
  border-radius: 10px !important;
  border: 1.5px solid rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.06) !important;
  background-image: none !important;
  color: #f5f5f7 !important;
  -webkit-text-fill-color: #f5f5f7 !important;
  box-shadow: none !important;
  font-weight: 650 !important;
}
.vhud-btn.go[data-vaction="start"],
.screen-stream-ctrl .vhud-btn.go[data-vaction="start"],
.scr-btn.go[data-vaction="start"] {
  background: rgba(48, 209, 88, 0.14) !important;
  border-color: rgba(48, 209, 88, 0.55) !important;
  color: #3ee06a !important;
  -webkit-text-fill-color: #3ee06a !important;
}
.vhud-btn.go[data-vaction="start"] .vhud-lbl,
.vhud-btn.go[data-vaction="start"] svg {
  color: #3ee06a !important;
  -webkit-text-fill-color: #3ee06a !important;
  stroke: currentColor !important;
}
.vhud-btn[data-vaction="nodialog"],
.screen-stream-ctrl .vhud-btn[data-vaction="nodialog"] {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.28) !important;
  color: #f5f5f7 !important;
  -webkit-text-fill-color: #f5f5f7 !important;
}
.vhud-btn[data-vaction="nodialog"] .vhud-lbl,
.vhud-btn[data-vaction="nodialog"] svg {
  color: #f5f5f7 !important;
  -webkit-text-fill-color: #f5f5f7 !important;
}
.vhud-btn.stop,
.scr-btn.stop,
.vhud-btn[data-vaction="stop"] {
  background: rgba(255, 69, 58, 0.14) !important;
  border-color: rgba(255, 69, 58, 0.55) !important;
  color: #ff6b61 !important;
  -webkit-text-fill-color: #ff6b61 !important;
}
.vhud-btn.stop .vhud-lbl,
.vhud-btn.stop svg {
  color: #ff6b61 !important;
  -webkit-text-fill-color: #ff6b61 !important;
}

html[data-theme="light"] .vhud-btn,
html[data-theme="light"] .screen-stream-ctrl .vhud-btn {
  background: #fff !important;
  border-color: rgba(0,0,0,.18) !important;
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
}
html[data-theme="light"] .vhud-btn.go[data-vaction="start"],
html[data-theme="light"] .vhud-btn.go[data-vaction="start"] .vhud-lbl,
html[data-theme="light"] .vhud-btn.go[data-vaction="start"] svg,
html[data-theme="light"] .all-panel-header .vhud-btn.go[data-vaction="start"],
html[data-theme="light"] .all-panel-header .vhud-btn.go[data-vaction="start"] * {
  background: #e8f8ee !important;
  border-color: #1b7a34 !important;
  color: #146c2e !important;
  -webkit-text-fill-color: #146c2e !important;
}
html[data-theme="light"] .vhud-btn[data-vaction="nodialog"],
html[data-theme="light"] .vhud-btn[data-vaction="nodialog"] .vhud-lbl,
html[data-theme="light"] .all-panel-header .vhud-btn[data-vaction="nodialog"] * {
  background: #fff !important;
  border-color: rgba(0,0,0,.22) !important;
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
}
html[data-theme="light"] .vhud-btn.stop,
html[data-theme="light"] .vhud-btn.stop .vhud-lbl,
html[data-theme="light"] .vhud-btn.stop svg,
html[data-theme="light"] .all-panel-header .vhud-btn.stop * {
  background: #fdecea !important;
  border-color: #c9342b !important;
  color: #b42318 !important;
  -webkit-text-fill-color: #b42318 !important;
}
.login-contact-btn,
.pur-btn-ghost,
.ghost-btn {
  min-height: 36px !important;
  border-radius: var(--btn-r) !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

/* Compact toolbar */
.fleet-filter-btn,
.fleet-btn.sm-btn,
.view-mode-btn,
.fleet-sel {
  min-height: var(--btn-h-sm) !important;
  height: var(--btn-h-sm) !important;
  border-radius: var(--btn-r-sm) !important;
  font-size: var(--btn-fs-sm) !important;
}

/* ── Chips ─────────────────────────────────────────────────────────────── */
.chip, .badge, .hdr-chip, .dc-chip, .stream-badge, .fc-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: var(--chip-h) !important;
  padding: 2px 10px !important;
  border-radius: var(--btn-r) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}
.fc-badge.on, .dc-status.on, .chip.on {
  color: var(--unify-go) !important;
  background: rgba(48, 209, 88, 0.14) !important;
}
.fc-badge, .fc-badge.on i {
  flex-shrink: 0 !important;
}

/* ── Scroll-wheel switch: high contrast on light HUD ───────────────────── */
.video-hud-quality .vhud-switch,
.vhud-switch {
  width: 42px !important;
  height: 24px !important;
  min-width: 42px !important;
  min-height: 24px !important;
  border-radius: 999px !important;
  background: #3a3a3c !important;
  border: 2px solid #1c1c1e !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) !important;
}
.video-hud-quality .vhud-switch::after,
.vhud-switch::after {
  width: 18px !important;
  height: 18px !important;
  top: 1px !important;
  left: 2px !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.45) !important;
}
.video-hud-quality .vhud-check input:checked + .vhud-switch,
.vhud-check input:checked + .vhud-switch {
  background: #34c759 !important;
  border-color: #1b7a34 !important;
}
.video-hud-quality .vhud-check input:checked + .vhud-switch::after,
.vhud-check input:checked + .vhud-switch::after {
  transform: translateX(16px) !important;
}
html[data-theme="light"] .video-hud-quality .vhud-switch,
html[data-theme="light"] .vhud-switch {
  background: #8e8e93 !important;
  border: 2px solid #1c1c1e !important;
}
html[data-theme="light"] .video-hud-quality .vhud-switch::after,
html[data-theme="light"] .vhud-switch::after {
  background: #fff !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.25) !important;
}
html[data-theme="light"] .video-hud-quality .vhud-check input:checked + .vhud-switch,
html[data-theme="light"] .vhud-check input:checked + .vhud-switch {
  background: #34c759 !important;
  border-color: #0d5c22 !important;
}
.vhud-check {
  color: #f5f5f7 !important;
  font-weight: 650 !important;
}
html[data-theme="light"] .vhud-check {
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
}

/* Empty screen copy — must read on black */
.screen-ph-inner {
  background: rgba(0,0,0,.55) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}
.screen-ph-title,
html[data-theme="light"] .screen-ph-title,
html[data-theme="light"] .screen-ph-inner .screen-ph-title,
html[data-theme="light"] .screen-ph span,
html[data-theme="light"] .screen-ph-inner {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.screen-ph-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
.screen-ph-sub,
html[data-theme="light"] .screen-ph-sub,
html[data-theme="light"] .screen-ph-inner .screen-ph-sub {
  color: rgba(255,255,255,.82) !important;
  -webkit-text-fill-color: rgba(255,255,255,.82) !important;
}
.screen-ph-sub b,
html[data-theme="light"] .screen-ph-sub b {
  color: #7ec8ff !important;
  -webkit-text-fill-color: #7ec8ff !important;
}

/* ── Fleet cards ───────────────────────────────────────────────────────── */
.fleet-view .dev-grid.view-cards,
#devGrid.view-cards.fc-grid {
  gap: 16px !important;
  padding: 16px 20px 40px !important;
}
#devGrid.view-cards.fc-grid > .fc,
.fc {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 14px !important;
  background: #1c1c1e !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  overflow: hidden !important;
}
.fc-top {
  align-items: flex-start !important;
}
.fc-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}
.fc-name { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.fc-flag img,
.fc-flag img.flag-img,
#devGrid .fc-flag img.flag-img {
  width: 16px !important;
  height: 12px !important;
  border-radius: 2px !important;
  object-fit: cover !important;
}
.fc-meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}
.fc-shot img {
  outline: 1px solid oklch(1 0 0 / 0.10);
  outline-offset: -1px;
}

html[data-theme="light"] .fc {
  background: #fff !important;
  border-color: rgba(0,0,0,.08) !important;
}
html[data-theme="light"] .fc-name,
html[data-theme="light"] .fc-sub,
html[data-theme="light"] .fc-stat,
html[data-theme="light"] .fc-loc-txt {
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
}
html[data-theme="light"] .fc-badge.on {
  color: #1b7a34 !important;
  -webkit-text-fill-color: #1b7a34 !important;
}



/* Topbar */
.topbar .topbar-title {
  background: none !important;
  -webkit-text-fill-color: #f5f5f7 !important;
  color: #f5f5f7 !important;
  letter-spacing: 0.08em !important;
}
html[data-theme="light"] .topbar .topbar-title {
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
}
.topbar-ghost.topbar-logo {
  filter: none !important;
}
#topbarFleetStats,
.topbar-fleet-stats {
  min-width: max-content !important;
  overflow: visible !important;
  flex: 0 1 auto !important;
}

/* Conn status */
.conn-dot-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(245,245,247,.72);
  white-space: nowrap;
}
.conn-dot-wrap .conn-dot { flex: 0 0 auto; }
#connDotLabel { font-weight: 600; letter-spacing: .01em; }

/* Login card stays comfortable */
#loginOverlay .login-box {
  width: min(400px, calc(100vw - 32px)) !important;
  padding: 28px 24px 20px !important;
  gap: 16px !important;
  border-radius: 24px !important;
}
#loginOverlay .login-seo-footer,
#loginOverlay .login-seo-sub {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
}

/* Sidebar */
.app-side-btn.active {
  background: rgba(0, 113, 227, 0.16) !important;
  border-radius: 11px !important;
}

/* Muted text contrast */
.login-box input::placeholder,
.login-trial-hint,
.dev-count {
  color: rgba(235, 235, 245, 0.72) !important;
}
html[data-theme="light"] .login-box input::placeholder,
html[data-theme="light"] .login-trial-hint,
html[data-theme="light"] .dev-count {
  color: rgba(60, 60, 67, 0.72) !important;
}