/* Available data: keep selector and detail panes independently scrollable. */
.device-master-detail {
  height: min(72vh, 760px);
  min-height: 420px;
  align-items: stretch;
  overflow: hidden;
}

.device-master-detail > .device-list-panel,
.device-master-detail > .device-detail-panel {
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.device-master-detail > .device-list-panel {
  align-content: start;
}

/* Keep the detail pane information-dense without changing the left selector. */
.device-master-detail > .device-detail-panel .device-detail-card {
  padding: 16px 18px;
}

.device-master-detail > .device-detail-panel .device-detail-card h2 {
  margin-bottom: 12px;
  font-size: 1.25rem;
}

.device-master-detail > .device-detail-panel .device-parameter-list > div {
  gap: 14px;
  padding: 7px 0;
}

.device-master-detail > .device-detail-panel .device-edit-section,
.device-master-detail > .device-detail-panel .device-attributes-section {
  margin-top: 18px;
  padding-top: 13px;
}

.device-master-detail > .device-detail-panel .device-edit-section h3,
.device-master-detail > .device-detail-panel .device-attributes-section h3 {
  margin-bottom: 9px;
}

.device-master-detail > .device-detail-panel .device-edit-grid {
  gap: 6px;
}

.device-master-detail > .device-detail-panel .device-edit-row {
  gap: 14px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.device-master-detail > .device-detail-panel .device-edit-row input[type="text"],
.device-master-detail > .device-detail-panel .device-edit-row input[type="tel"],
.device-master-detail > .device-detail-panel .device-edit-row input[type="password"],
.device-master-detail > .device-detail-panel .device-edit-row input[type="date"],
.device-master-detail > .device-detail-panel .device-edit-row input[type="datetime-local"],
.device-master-detail > .device-detail-panel .device-edit-row select {
  padding: 7px 10px;
}

.device-master-detail > .device-detail-panel .device-attribute-row {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.device-master-detail > .device-detail-panel .user-role-note {
  margin-top: 8px;
}

.device-master-detail > .device-detail-panel .device-form-actions {
  margin-top: 16px;
  padding-top: 12px;
}

.device-master-detail > .device-detail-panel .form-success,
.device-master-detail > .device-detail-panel .form-error {
  margin-top: 8px;
  margin-bottom: 8px;
  padding: 8px 10px;
}

.generic-data-detail .device-parameter-list dd pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
}

@media (max-width: 720px) {
  .device-master-detail {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .device-master-detail > .device-list-panel {
    max-height: 38vh;
    overflow-y: auto;
  }

  .device-master-detail > .device-detail-panel {
    max-height: none;
    overflow: visible;
  }

  .device-master-detail > .device-detail-panel .device-detail-card {
    padding: 14px;
  }
}