/*
  SupportBridge production device modal polish.
  Repair193:
  - wider device modal;
  - cleaner left column;
  - compact SupportBridge Agent status tiles;
  - no overflowing current operation text;
  - Device ID actions only in modal detail blocks.
*/

.sb-device-modal,
.device-modal,
.modal.device-modal,
.dialog:has(.sb-device-agent-panel),
.modal:has(.sb-device-agent-panel),
.dialog:has(.sb-runtime-deviceid-mask),
.modal:has(.sb-runtime-deviceid-mask) {
  max-width: min(1260px, calc(100vw - 72px)) !important;
}

.sb-device-modal .modal-body,
.device-modal .modal-body,
.dialog:has(.sb-device-agent-panel) .modal-body,
.modal:has(.sb-device-agent-panel) .modal-body {
  display: grid !important;
  grid-template-columns: minmax(278px, 318px) minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

.sb-device-modal .device-side,
.device-modal .device-side,
.sb-device-modal .modal-body > aside,
.device-modal .modal-body > aside {
  min-width: 278px !important;
  max-width: 318px !important;
}

.sb-device-modal .panel,
.sb-device-modal .card,
.sb-device-modal .field,
.sb-device-modal .metric,
.device-modal .panel,
.device-modal .card,
.device-modal .field,
.device-modal .metric {
  min-width: 0 !important;
}

.sb-device-modal .device-basic-state,
.sb-device-modal .accordion-body,
.device-modal .device-basic-state,
.device-modal .accordion-body {
  overflow: visible !important;
  max-height: none !important;
}

.sb-device-agent-panel {
  min-width: 0 !important;
  overflow: hidden !important;
}

.sb-device-agent-panel .sb-agent-metrics-row {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(128px, 1fr)) !important;
  gap: 8px !important;
  align-items: stretch !important;
}

.sb-device-agent-panel .sb-agent-metric-card {
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 12px !important;
}

.sb-device-agent-panel .sb-agent-metric-card * {
  min-width: 0 !important;
}

.sb-agent-metric-title,
.sb-agent-current-op-title,
.sb-agent-metric-value {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.sb-agent-current-op-title {
  font-weight: 800 !important;
}

.sb-agent-metric-subtitle,
.sb-agent-metric-note {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

.sb-device-modal .sb-runtime-http-error,
.device-modal .sb-runtime-http-error {
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sb-device-id-actions {
  display: inline-flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.sb-device-id-btn {
  border: 1px solid rgba(59, 130, 246, .35);
  background: #fff;
  color: #1d4ed8;
  border-radius: 8px;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.sb-device-id-btn:hover {
  background: #eff6ff;
}

.sb-device-id-value {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

@media (max-width: 1180px) {
  .sb-device-agent-panel .sb-agent-metrics-row {
    grid-template-columns: repeat(3, minmax(140px, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  .sb-device-modal .modal-body,
  .device-modal .modal-body,
  .dialog:has(.sb-device-agent-panel) .modal-body,
  .modal:has(.sb-device-agent-panel) .modal-body {
    display: block !important;
  }

  .sb-device-agent-panel .sb-agent-metrics-row {
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
  }
}