.ecosystem-selected-row {
  background: rgba(var(--ui-primary-rgb), .06);
}

.ecosystem-device-detail {
  scroll-margin-top: 18px;
}

.ecosystem-detail-body {
  display: grid;
  gap: 18px;
}

.ecosystem-detail-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ecosystem-detail-summary > div {
  display: grid;
  gap: 7px;
  padding: 14px 16px;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: rgba(var(--ui-primary-rgb), .04);
}

.ecosystem-detail-summary span,
.ecosystem-device-edit label > span,
.ecosystem-lifecycle-actions label > span {
  color: var(--ui-subtle);
  font-size: 12px;
  font-weight: 800;
}

.ecosystem-detail-summary strong {
  justify-self: start;
}

.ecosystem-device-edit {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, 1fr)) auto;
  gap: 12px;
  align-items: end;
  padding: 16px;
  border: 1px solid var(--ui-border);
  border-radius: 16px;
}

.ecosystem-device-edit label,
.ecosystem-lifecycle-actions label {
  display: grid;
  gap: 7px;
}

.ecosystem-lifecycle-actions {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px;
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  background: rgba(var(--ui-primary-rgb), .03);
}

.ecosystem-lifecycle-actions label {
  min-width: 170px;
}

.ecosystem-internet-package {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(var(--ui-primary-rgb), .32);
  border-radius: 18px;
  background: rgba(var(--ui-primary-rgb), .045);
}

.ecosystem-internet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.ecosystem-internet-head > div {
  display: grid;
  gap: 4px;
}

.ecosystem-internet-head h3,
.ecosystem-internet-head p {
  margin: 0;
}

.ecosystem-internet-head h3 {
  font-size: 17px;
}

.ecosystem-internet-head p,
.ecosystem-internet-note {
  color: var(--ui-subtle);
}

.ecosystem-internet-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ecosystem-internet-summary > div {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid var(--ui-border);
  border-radius: 13px;
  background: var(--ui-surface);
}

.ecosystem-internet-summary span,
.ecosystem-internet-form label > span {
  color: var(--ui-subtle);
  font-size: 11px;
  font-weight: 800;
}

.ecosystem-internet-form {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) minmax(180px, 1fr) minmax(150px, .7fr) auto;
  gap: 12px;
  align-items: end;
  padding-top: 14px;
  border-top: 1px solid var(--ui-border);
}

.ecosystem-internet-form label {
  display: grid;
  gap: 7px;
}

.ecosystem-internet-note {
  grid-column: 1 / -1;
  font-size: 12px;
}

.ecosystem-detail-grid {
  align-items: start;
}

.ecosystem-detail-grid section,
.ecosystem-enrollment-history {
  display: grid;
  gap: 12px;
}

.ecosystem-detail-grid h3,
.ecosystem-enrollment-history h3 {
  margin: 0;
  font-size: 15px;
}

.ecosystem-detail-list {
  display: grid;
  gap: 8px;
}

.ecosystem-detail-list > div {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: rgba(var(--ui-primary-rgb), .025);
}

.ecosystem-detail-list small {
  color: var(--ui-subtle);
}

.ecosystem-access-list {
  display: grid;
  gap: 10px;
}

.ecosystem-access-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: rgba(var(--ui-primary-rgb), .025);
}

.ecosystem-access-item > div {
  display: grid;
  gap: 4px;
}

.ecosystem-access-item small {
  color: var(--ui-subtle);
}

.ecosystem-access-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ui-text);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.ecosystem-access-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--ui-primary);
}

.ecosystem-access-toggle:has(input:disabled) {
  cursor: not-allowed;
  opacity: .58;
}

.ecosystem-access-warning {
  margin-bottom: 14px;
}

@media (max-width: 1100px) {
  .ecosystem-detail-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ecosystem-device-edit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ecosystem-internet-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ecosystem-device-edit button {
    width: max-content;
  }
}

@media (max-width: 720px) {
  .ecosystem-detail-summary,
  .ecosystem-device-edit {
    grid-template-columns: 1fr;
  }

  .ecosystem-device-edit button,
  .ecosystem-lifecycle-actions button,
  .ecosystem-internet-form button {
    width: 100%;
  }

  .ecosystem-internet-head {
    flex-direction: column;
  }

  .ecosystem-internet-summary,
  .ecosystem-internet-form {
    grid-template-columns: 1fr;
  }

  .ecosystem-lifecycle-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .ecosystem-lifecycle-actions label {
    min-width: 0;
  }

  .ecosystem-access-item {
    align-items: flex-start;
    flex-direction: column;
  }
}