/* Island List: retain the compact table while removing theme chrome. */
html,
body,
#app {
  background: #05070c !important;
  background-image: none !important;
}

/* Use the browser/system font stack; the bundled Lato webfont is intentionally
   not loaded so the public page has no external font dependency. */
html,
body,
#app,
#app * {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Noto Sans SC", "Microsoft YaHei", sans-serif !important;
}

#header,
#header-content,
#app #header,
#header::before,
#header::after,
#app #header::before,
#app #header::after,
#cards,
#card,
.cards,
.ui.cards,
.card-list,
.server-cards,
[class*="cards"],
[class*="card-list"],
[class*="server-card"] {
  display: none !important;
}

/* Keep a discreet link to the white-label login shell at the bottom. */
footer,
#footer,
.footer {
  display: flex !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  justify-content: center !important;
  align-items: center !important;
  margin: -8px auto 4px !important;
  padding: 0 !important;
  background: transparent !important;
  color: #9ca3af !important;
  z-index: 10 !important;
}

.footer p {
  margin: 0 !important;
  padding: 0 !important;
}

.footer a {
  display: inline-block !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  color: #c4c9d2 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.footer a:hover {
  border: none !important;
  color: #f3f4f6 !important;
  text-decoration: underline !important;
}

#table {
  margin-top: 24px !important;
  border-collapse: separate !important;
  border-spacing: 0 4px !important;
  background: transparent !important;
}

#table thead tr th {
  color: #f3f4f6 !important;
  background: transparent !important;
  border: none !important;
  font-weight: 700 !important;
}

#table tr.tableRow,
#table tr.tableRow td {
  background: #111827 !important;
  color: #e5e7eb !important;
  border: none !important;
}

#table tr.tableRow td {
  height: 42px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

#table tr.expandRow {
  display: table-row !important;
  height: 0 !important;
}

#table tr.expandRow td {
  display: table-cell !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

#table tr.expandRow td > div {
  display: block !important;
  height: auto !important;
  max-height: 0 !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  transition: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

#table tr.tableRow td:first-child {
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
}

#table tr.tableRow td:last-child {
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}

.container {
  background: transparent !important;
}

#table td,
#table th {
  font-weight: 700 !important;
}

#table .ui.progress {
  margin: 0 !important;
}

/* The public list does not need the virtualization/type column. */
#type,
#table tr.tableRow td:nth-child(3) {
  display: none !important;
}

.island-location-flag {
  display: inline-block !important;
  width: 1.55em !important;
  height: 1.55em !important;
  vertical-align: middle !important;
}

/* Expanded public node details. The bundled theme supplies the row shell;
   island-node-details.js fills it with the complete public report. */
#table tr.expandRow td > div:not(.collapsed) {
  max-height: none !important;
  overflow-y: auto !important;
  padding: 12px 18px !important;
  color: #cbd5e1 !important;
  text-align: left !important;
}

.island-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 20px;
}

.island-detail-field {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 4px 0;
  border-bottom: 1px solid rgba(148, 163, 184, .16);
}

.island-detail-field span {
  color: #94a3b8;
  white-space: nowrap;
}

.island-detail-field strong {
  overflow: hidden;
  color: #e2e8f0;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.island-detail-gpu-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.island-detail-gpu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 6px 8px;
  border-radius: 5px;
  background: rgba(15, 23, 42, .5);
  color: #cbd5e1;
}

.island-detail-message,
.island-detail-loading,
.island-detail-empty {
  padding-top: 8px;
  color: #94a3b8;
  text-align: center;
}

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

@media (max-width: 600px) {
  .island-detail-grid {
    grid-template-columns: 1fr;
  }
}