/* NFC admin list layout
 * Use the actual list width as the breakpoint so browser sidebars,
 * split views and zoomed windows cannot push card content off-screen.
 */
.admin-cards.collapsible-cards {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 18px;
  width: 100%;
  min-width: 0;
  container-name: nfc-admin-list;
  container-type: inline-size;
}

.admin-cards.collapsible-cards > .device {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.admin-cards .device-top,
.admin-cards .device-top > *,
.admin-cards .device-details {
  min-width: 0;
  max-width: 100%;
}

.admin-cards .device-top h2 {
  overflow-wrap: anywhere;
}

.admin-cards .device-summary {
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(240px, 1.45fr) repeat(3, minmax(120px, 1fr));
}

.admin-cards .summary-item {
  max-width: 100%;
  overflow: hidden;
}

.admin-cards .summary-item dd,
.admin-cards .summary-item code,
.admin-cards .device-details dd,
.admin-cards .device-details code {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.admin-cards .copy-link {
  width: 100%;
  min-width: 0;
}

.admin-cards .copy-link input {
  min-width: 0;
  max-width: 100%;
}

@container nfc-admin-list (max-width: 820px) {
  .admin-cards .device-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-cards .summary-item:first-child dd {
    white-space: normal;
  }

  .admin-cards dl {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .admin-cards dl > div {
    grid-column: auto !important;
  }

  .admin-cards dl > div:nth-last-child(-n + 2) {
    grid-column: span 2 !important;
  }
}

@container nfc-admin-list (max-width: 520px) {
  .admin-cards .device {
    padding: 18px;
  }

  .admin-cards .device-top {
    align-items: flex-start;
  }

  .admin-cards .device-toggle {
    width: 100%;
    margin: 8px 0 0;
  }

  .admin-cards .device-summary,
  .admin-cards dl {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-cards dl > div,
  .admin-cards dl > div:nth-last-child(-n + 2) {
    grid-column: span 1 !important;
  }

  .admin-cards .copy-link {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-cards .copy-link span {
    grid-column: auto;
  }

  .admin-cards .copy-link button {
    width: 100%;
  }
}

/* Fallback for older browsers without container queries. */
@media (max-width: 820px) {
  @supports not (container-type: inline-size) {
    .admin-cards .device-summary,
    .admin-cards dl {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }
}

@media (max-width: 520px) {
  @supports not (container-type: inline-size) {
    .admin-cards .device-summary,
    .admin-cards dl {
      grid-template-columns: minmax(0, 1fr) !important;
    }
  }
}