/* computers-v2.css
   Small companion stylesheet for the computers/ section (hardware page,
   and the syslog.html status dashboard emitted by getusageinfo.sh +
   checkusage*). Loaded alongside rtdc-v2.css, not instead of it — reuses
   its :root tokens (--gray-*, --blue-*, --radius-*, --shadow-card) rather
   than redefining them. Only adds what rtdc-v2.css doesn't already have:
   a compact per-host status table and a green/red "responding" indicator,
   since the homepage/SMAdata companion stylesheets have no equivalent. */

/* ---------- Card header: status dot + hostname (left), timestamp (right) ---------- */
/* Replaces the old blue colspan title row that used to live inside the
   table. Spans the full card width (not the narrower table block below),
   per "top-left"/"top-right of the card". */
.resource-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 10px 0;
}
.resource-host {
  display: inline-flex;
  align-items: center;
  font-size: 21px;
  font-weight: 700;
  color: var(--gray-900);
}
.resource-timestamp {
  font-size: 12px;
  color: var(--gray-500);
  white-space: nowrap;
}

/* ---------- Data block: table + metadata treated as one unit ---------- */
/* Fixed width (not a % of the card, not auto-centred) so the table and the
   metadata below it always share the exact same width and the exact same
   left edge — flush under .resource-card-header's hostname, not drifting
   toward the middle of the card. */
.resource-block {
  width: 460px;
  max-width: 100%;
}

/* ---------- Per-host status table ---------- */
.resource-table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  font-size: 13.5px;
}
.resource-table th,
.resource-table td {
  padding: 4px 10px;
  text-align: left;
}
.resource-table td { color: var(--gray-900); }

/* Single subtle separator below the last filesystem row only — not a
   boxed table, not a line under every row/header. */
.resource-table tbody tr:last-child th,
.resource-table tbody tr:last-child td {
  border-bottom: 1px solid var(--gray-200);
}

/* Column header row (Mounted/Size/Used/Avail/Use%) — plain text, same size
   as the data rows, just bold; no shaded/boxed header band. Mounted (the
   first column) stays left-aligned; the other four are centered, matching
   their centered data cells below. */
.resource-table tr.resource-table-cols th {
  color: var(--gray-700);
  font-weight: 700;
  text-align: left;
}
.resource-table tr.resource-table-cols th:nth-child(n+2) {
  text-align: center;
}

/* Size/Used/Avail/Use% — centered in their column so the value sits
   directly under its heading (Mounted/the mount path stay left-aligned). */
.resource-table td.resource-num { text-align: center; font-variant-numeric: tabular-nums; }

/* Wide/narrow-viewport safety for hosts with many mount points */
.resource-table-scroll { overflow-x: auto; }

/* Compact memory/login metadata under the disk table — each on its own
   row so the two values are never visually or structurally run together.
   Full width of .resource-block, matching the table above exactly. */
.resource-meta {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1px;
  padding: 4px 10px 2px 10px;
  font-size: 12.5px;
  color: var(--gray-500);
}
.resource-meta-row { line-height: 1.5; }
.resource-meta strong,
.resource-meta b { color: var(--gray-700); font-weight: 700; }

/* ---------- Host status indicator dot ---------- */
.resource-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  background: var(--green-600);
  flex: none;
}
/* Previously white-on-blue (sat on the old blue title strip); now red so it
   stays visible now that the dot sits directly on the card's white background. */
.resource-dot.resource-dot-down { background: var(--red-600); }

/* ---------- Status page layout ---------- */
/* One card per host, stacked and centered — not a multi-column grid. Each
   card sits at ~750-850px. The card's own padding is the whitespace around
   the (fixed-width, flush-left) data block; the block's internal cell
   padding stays tight so the data itself reads dense. */
.resource-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.resource-card {
  width: 100%;
  max-width: 850px;
  min-width: 0;
  padding: 22px 32px;
}

.resource-updated-note {
  color: var(--gray-500);
  font-size: 13px;
  margin: 0 0 20px 0;
}