/*
 * Event Mode Live Display Center final alignment pass.
 *
 * This route-scoped bridge follows the QR Studio/Event Workspace spacing
 * cadence and only applies while the Live Display Center is mounted. It does
 * not define a separate palette, typography family, or runtime behavior.
 */

/* -------------------------------------------------------------------------- */
/* Shared outer rhythm                                                         */
/* -------------------------------------------------------------------------- */

@supports selector(div:has(> .live-display-center)) {
  html body div:has(> .live-display-center) {
    width: min(1440px, calc(100vw - 48px)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-top: 18px !important;
    padding-bottom: 44px !important;
  }
}

.live-display-center {
  --ld-space-1: 4px;
  --ld-space-2: 8px;
  --ld-space-3: 12px;
  --ld-space-4: 16px;
  --ld-space-5: 20px;
}

.live-display-center .ldc-shell {
  gap: 14px !important;
}

.live-display-center .ldc-surface,
.live-display-center .ldc-action-shell {
  border-radius: 12px !important;
}

/* -------------------------------------------------------------------------- */
/* Header identity and action alignment                                        */
/* -------------------------------------------------------------------------- */

@supports selector(body:has(.live-display-center)) {
  html body:has(.live-display-center) .eeh-orb {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
    border-radius: 16px !important;
  }

  html body:has(.live-display-center) .eeh-orb::after {
    right: -7px !important;
    bottom: -5px !important;
    z-index: 4 !important;
    min-width: 25px !important;
    height: 14px !important;
    padding: 0 4px !important;
    border-width: 2px !important;
    font-size: 6.5px !important;
    line-height: 1 !important;
    letter-spacing: .065em !important;
    pointer-events: none !important;
  }

  html body:has(.live-display-center) .eeh-orb svg {
    width: 18px !important;
    height: 18px !important;
    transform: none !important;
    stroke-width: 1.9 !important;
  }

  html body:has(.live-display-center) .eeh-actions {
    align-items: center !important;
    gap: 8px !important;
  }

  html body:has(.live-display-center) .eeh-actions div:has(> [data-testid="toggle-advanced-displays"]) {
    height: 38px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -.01em !important;
  }

  html body:has(.live-display-center) [data-testid="toggle-advanced-displays"] {
    flex: 0 0 auto !important;
  }

  html body:has(.live-display-center) .eeh-dots {
    gap: 3.5px !important;
  }

  html body:has(.live-display-center) .eeh-dot {
    width: 5.5px !important;
    height: 5.5px !important;
    box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--event-rose, #e11d48) 8%, transparent) !important;
  }
}

/* BEO uses the same compact identity-tile and external-label geometry. */
html body .beo-workspace .eeh-operational-heading .eeh-operational-icon {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  border-radius: 16px !important;
}

html body .beo-workspace .eeh-operational-heading .eeh-operational-icon::after {
  right: -7px !important;
  bottom: -5px !important;
  z-index: 4 !important;
  min-width: 23px !important;
  height: 14px !important;
  padding: 0 4px !important;
  border-width: 2px !important;
  font-size: 6.5px !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

html body .beo-workspace .eeh-operational-heading .eeh-operational-icon svg {
  width: 18px !important;
  height: 18px !important;
  transform: none !important;
  stroke-width: 1.9 !important;
}

/* -------------------------------------------------------------------------- */
/* More Actions dropdown                                                       */
/* -------------------------------------------------------------------------- */

@supports selector(body:has(.live-display-center)) {
  html body:has(.live-display-center) .eeh-dropdown {
    top: 56px !important;
    width: min(424px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: min(76dvh, 680px) !important;
    padding: 14px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    border-radius: 14px !important;
  }

  html body:has(.live-display-center) .eeh-dropdown::before {
    top: -7px !important;
    right: 24px !important;
    width: 14px !important;
    height: 14px !important;
  }

  html body:has(.live-display-center) .eeh-menu-section {
    padding: 11px 0 !important;
  }

  html body:has(.live-display-center) .eeh-menu-section:first-child {
    padding-top: 0 !important;
  }

  html body:has(.live-display-center) .eeh-menu-section:last-child {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }

  html body:has(.live-display-center) .eeh-section-label {
    margin: 0 0 9px !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .14em !important;
  }

  html body:has(.live-display-center) .eeh-preview-list,
  html body:has(.live-display-center) .eeh-menu-list {
    gap: 5px !important;
  }

  html body:has(.live-display-center) .eeh-preview-row {
    min-height: 46px !important;
    grid-template-columns: 34px minmax(0, 1fr) auto 14px !important;
    align-items: center !important;
    gap: 9px !important;
  }

  html body:has(.live-display-center) .eeh-preview-row > div:nth-child(2) {
    min-width: 0 !important;
  }

  html body:has(.live-display-center) .eeh-preview-icon,
  html body:has(.live-display-center) .eeh-menu-item-icon {
    width: 32px !important;
    height: 32px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 9px !important;
  }

  html body:has(.live-display-center) .eeh-preview-icon svg,
  html body:has(.live-display-center) .eeh-menu-item-icon svg {
    width: 15px !important;
    height: 15px !important;
    stroke-width: 1.9 !important;
  }

  html body:has(.live-display-center) .eeh-preview-title,
  html body:has(.live-display-center) .eeh-menu-item-title,
  html body:has(.live-display-center) .eeh-event-name {
    font-size: 11.5px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
  }

  html body:has(.live-display-center) .eeh-preview-sub,
  html body:has(.live-display-center) .eeh-menu-item-subtitle {
    margin-top: 2px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 9.5px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
  }

  html body:has(.live-display-center) .eeh-count {
    min-width: 24px !important;
    height: 24px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  html body:has(.live-display-center) .eeh-menu-item {
    min-height: 54px !important;
    grid-template-columns: 34px minmax(0, 1fr) 16px !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 7px 8px !important;
    border-radius: 8px !important;
  }

  html body:has(.live-display-center) .eeh-menu-item-end,
  html body:has(.live-display-center) .eeh-chev {
    width: 14px !important;
    height: 14px !important;
  }

  html body:has(.live-display-center) .eeh-event-card {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 12px !important;
  }

  html body:has(.live-display-center) .eeh-event-card > div {
    min-width: 0 !important;
  }

  html body:has(.live-display-center) .eeh-event-name {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body:has(.live-display-center) .eeh-event-meta {
    margin-top: 7px !important;
    gap: 5px !important;
  }

  html body:has(.live-display-center) .eeh-event-pill,
  html body:has(.live-display-center) .eeh-status-pill {
    height: 24px !important;
    padding: 0 8px !important;
    gap: 5px !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
  }

  html body:has(.live-display-center) .eeh-event-pill svg {
    width: 11px !important;
    height: 11px !important;
  }

  html body:has(.live-display-center) .eeh-action-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html body:has(.live-display-center) .eeh-action {
    min-height: 58px !important;
    gap: 5px !important;
    padding: 8px 6px !important;
    border-radius: 9px !important;
    font-size: 9.5px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
  }

  html body:has(.live-display-center) .eeh-action svg {
    width: 16px !important;
    height: 16px !important;
    stroke-width: 1.9 !important;
  }

  html body:has(.live-display-center) .eeh-sys-row {
    gap: 8px !important;
  }

  html body:has(.live-display-center) .eeh-sys-pill {
    min-height: 36px !important;
    gap: 7px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  html body:has(.live-display-center) .eeh-exception-pill {
    min-height: 40px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    font-size: 10px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Page context and left rail                                                  */
/* -------------------------------------------------------------------------- */

.live-display-center .ldc-event-block {
  padding: 14px !important;
}

.live-display-center .ldc-event-cover {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  border-radius: 10px !important;
}

.live-display-center .ldc-event-cover svg {
  width: 18px !important;
  height: 18px !important;
}

.live-display-center .ldc-event-name {
  margin-top: 4px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  letter-spacing: -.025em !important;
}

.live-display-center .ldc-event-meta {
  margin-top: 9px !important;
  gap: 6px !important;
}

.live-display-center .ldc-event-meta-row {
  gap: 7px !important;
  font-size: 9.5px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}

.live-display-center .ldc-event-meta-row svg {
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 13px !important;
  stroke-width: 1.9 !important;
}

.live-display-center .ldc-event-select {
  min-height: 38px !important;
  margin-top: 12px !important;
  padding-inline: 10px !important;
}

.live-display-center .ldc-nav {
  gap: 4px !important;
  padding: 10px !important;
}

.live-display-center .ldc-nav-button {
  min-height: 40px !important;
  gap: 9px !important;
  padding: 0 10px !important;
}

.live-display-center .ldc-nav-button svg {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
  stroke-width: 1.9 !important;
}

.live-display-center .ldc-action-shell {
  padding: 10px !important;
}

/* -------------------------------------------------------------------------- */
/* Center workspace vertical rhythm                                            */
/* -------------------------------------------------------------------------- */

.live-display-center .ldc-center-head {
  padding: 18px 18px 16px !important;
}

.live-display-center .ldc-title-row {
  gap: 14px !important;
}

.live-display-center .ldc-subtitle {
  margin-top: 8px !important;
}

.live-display-center .ldc-metrics {
  gap: 8px !important;
  padding: 12px 18px !important;
}

.live-display-center .ldc-metric {
  min-height: 70px !important;
  display: grid !important;
  align-content: center !important;
  gap: 5px !important;
  padding: 10px 11px !important;
  border-radius: 9px !important;
}

.live-display-center .ldc-metric span {
  margin-top: 0 !important;
}

.live-display-center .ldc-toolbar {
  gap: 10px !important;
  padding: 12px 18px !important;
}

.live-display-center .ldc-search {
  min-height: 38px !important;
}

.live-display-center .ldc-search-wrap svg {
  width: 14px !important;
  height: 14px !important;
  left: 11px !important;
}

.live-display-center .ldc-filters {
  gap: 5px !important;
}

.live-display-center .ldc-filter {
  min-height: 30px !important;
  padding-inline: 9px !important;
}

.live-display-center .ldc-section-block {
  padding: 16px 18px 18px !important;
}

.live-display-center .ldc-section-head {
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 13px !important;
}

.live-display-center .ldc-section-head p {
  margin-top: 3px !important;
}

.live-display-center .ldc-display-list {
  gap: 8px !important;
}

.live-display-center .ldc-display-row {
  min-height: 88px !important;
  grid-template-columns: 40px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 11px 12px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.live-display-center .ldc-display-icon {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 9px !important;
}

.live-display-center .ldc-display-icon svg {
  width: 17px !important;
  height: 17px !important;
  stroke-width: 1.9 !important;
}

.live-display-center .ldc-display-copy,
.live-display-center .ldc-title-row > div,
.live-display-center .ldc-section-head > div,
.live-display-center .ldc-right-head > div {
  min-width: 0 !important;
}

.live-display-center .ldc-display-name {
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  letter-spacing: -.025em !important;
}

.live-display-center .ldc-display-description {
  margin-top: 4px !important;
  font-size: 10.5px !important;
  font-weight: 620 !important;
  line-height: 1.5 !important;
}

.live-display-center .ldc-display-route {
  margin-top: 5px !important;
  font-size: 9.5px !important;
  line-height: 1.35 !important;
}

.live-display-center .ldc-status-stack {
  min-width: 0 !important;
  max-width: 190px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
}

.live-display-center .ldc-pill {
  min-height: 24px !important;
  gap: 4px !important;
  padding-inline: 8px !important;
  font-size: 8.5px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.live-display-center .ldc-empty {
  padding: 28px 18px !important;
}

.live-display-center .ldc-empty svg {
  width: 24px !important;
  height: 24px !important;
  margin-bottom: 9px !important;
}

.live-display-center .ldc-empty p {
  margin-top: 5px !important;
}

/* -------------------------------------------------------------------------- */
/* Right command rail and device rows                                          */
/* -------------------------------------------------------------------------- */

.live-display-center .ldc-right-head {
  min-height: 68px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 13px 14px !important;
}

.live-display-center .ldc-right-subtitle {
  margin-top: 3px !important;
}

.live-display-center .ldc-command-card {
  margin: 10px 12px 0 !important;
  border-radius: 10px !important;
}

.live-display-center .ldc-command-card:last-child {
  margin-bottom: 12px !important;
}

.live-display-center .ldc-command-head {
  padding: 9px 11px !important;
}

.live-display-center .ldc-command-body {
  padding: 11px !important;
}

.live-display-center .ldc-url {
  padding: 9px !important;
  border-radius: 8px !important;
}

.live-display-center .ldc-button-row {
  gap: 6px !important;
  margin-top: 10px !important;
}

.live-display-center .ldc-secondary-button,
.live-display-center .ldc-icon-button {
  min-height: 36px !important;
  gap: 6px !important;
  padding-inline: 10px !important;
}

.live-display-center .ldc-icon-button {
  width: 36px !important;
  padding: 0 !important;
}

.live-display-center .ldc-secondary-button svg,
.live-display-center .ldc-icon-button svg {
  width: 14px !important;
  height: 14px !important;
  stroke-width: 1.9 !important;
}

.live-display-center .ldc-check-row {
  gap: 8px !important;
  padding: 8px 0 !important;
}

.live-display-center .ldc-pair-code {
  margin-top: 9px !important;
  padding: 10px 8px !important;
}

.live-display-center .ldc-note {
  margin-top: 8px !important;
}

.live-display-center .ldc-overview-grid,
.live-display-center .ldc-health-grid,
.live-display-center .ldc-pairing-grid {
  gap: 10px !important;
}

.live-display-center .ldc-info-card {
  min-height: 90px !important;
  padding: 12px !important;
  border-radius: 10px !important;
}

.live-display-center .ldc-info-card p {
  margin-top: 5px !important;
}

.live-display-center .ldc-subsection-head {
  gap: 10px !important;
  margin: 16px 0 8px !important;
}

.live-display-center .ldc-device-list {
  gap: 7px !important;
}

.live-display-center .ldc-device-row {
  min-height: 52px !important;
  grid-template-columns: 28px minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 10px !important;
  border-radius: 9px !important;
}

.live-display-center .ldc-device-signal {
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 8px !important;
}

.live-display-center .ldc-device-signal svg {
  width: 13px !important;
  height: 13px !important;
  stroke-width: 1.9 !important;
}

.live-display-center .ldc-device-name {
  font-size: 10.8px !important;
  line-height: 1.3 !important;
}

.live-display-center .ldc-device-meta {
  margin-top: 3px !important;
  font-size: 9.5px !important;
  line-height: 1.35 !important;
}

.live-display-center .ldc-device-actions {
  gap: 4px !important;
}

.live-display-center .ldc-device-actions .ldc-icon-button {
  width: 32px !important;
  min-height: 32px !important;
}

/* -------------------------------------------------------------------------- */
/* Responsive cadence                                                          */
/* -------------------------------------------------------------------------- */

@media (max-width: 1240px) {
  .live-display-center .ldc-shell {
    gap: 12px !important;
  }

  .live-display-center .ldc-display-row {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    align-items: start !important;
  }

  .live-display-center .ldc-status-stack {
    grid-column: 2 !important;
    justify-content: flex-start !important;
    max-width: none !important;
    margin-top: 4px !important;
  }
}

@media (max-width: 900px) {
  @supports selector(body:has(.live-display-center)) {
    html body:has(.live-display-center) .eeh-dropdown {
      position: fixed !important;
      top: 88px !important;
      left: 12px !important;
      right: 12px !important;
      width: auto !important;
      max-width: none !important;
      max-height: calc(100dvh - 100px) !important;
    }

    html body:has(.live-display-center) .eeh-dropdown::before {
      display: none !important;
    }
  }
}

@media (max-width: 820px) {
  .live-display-center .ldc-shell {
    gap: 12px !important;
  }

  .live-display-center .ldc-center-head {
    padding: 16px !important;
  }

  .live-display-center .ldc-metrics,
  .live-display-center .ldc-toolbar {
    padding-inline: 16px !important;
  }

  .live-display-center .ldc-section-block {
    padding: 15px 16px 17px !important;
  }

  .live-display-center .ldc-device-row {
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
  }
}

@media (max-width: 768px) {
  @supports selector(body:has(.live-display-center)) {
    html body:has(.live-display-center) .eeh-orb {
      width: 40px !important;
      height: 40px !important;
      flex: 0 0 40px !important;
      border-radius: 14px !important;
    }

    html body:has(.live-display-center) .eeh-orb::after {
      right: -6px !important;
      bottom: -4px !important;
      min-width: 23px !important;
      height: 13px !important;
      font-size: 6px !important;
    }
  }

  html body .beo-workspace .eeh-operational-heading .eeh-operational-icon {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    border-radius: 14px !important;
  }

  html body .beo-workspace .eeh-operational-heading .eeh-operational-icon::after {
    right: -6px !important;
    bottom: -4px !important;
    min-width: 22px !important;
    height: 13px !important;
    font-size: 6px !important;
  }
}

@media (max-width: 620px) {
  @supports selector(div:has(> .live-display-center)) {
    html body div:has(> .live-display-center) {
      width: min(100%, calc(100vw - 24px)) !important;
      padding-top: 12px !important;
      padding-bottom: 28px !important;
    }
  }

  .live-display-center .ldc-shell {
    gap: 10px !important;
  }

  .live-display-center .ldc-center-head {
    padding: 15px 14px !important;
  }

  .live-display-center .ldc-metrics,
  .live-display-center .ldc-toolbar {
    padding: 10px 14px !important;
  }

  .live-display-center .ldc-section-block {
    padding: 14px !important;
  }

  .live-display-center .ldc-display-row {
    min-height: 0 !important;
    padding: 10px !important;
  }

  .live-display-center .ldc-display-icon {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }

  .live-display-center .ldc-command-card {
    margin-inline: 10px !important;
  }

  .live-display-center .ldc-right-head {
    padding-inline: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-display-center *,
  .live-display-center *::before,
  .live-display-center *::after {
    transition-duration: .01ms !important;
  }
}