/*
 * Component library — minimal scaffold subset.
 * Source: UI-001 §6 (Component Library).
 * Only the components used by the htmx_demo page are styled here; extend
 * as new components are ported.
 */

/* Page header — UI-002 §3 PageHeaderData */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.page-header__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--accent-primary);
}

.page-header__subtitle {
  margin-top: var(--space-1);
  font-size: 13px;
  color: var(--text-secondary);
}

.page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Card — UI-001 §6.1 */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.card-header__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-primary);
  letter-spacing: -0.01em;
}

.card-body {
  padding: var(--space-4);
}

.card-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-base);
}

/* Buttons — UI-001 §6.2 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 34px;
  padding: 0 var(--space-3);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--accent-primary);
  color: var(--text-inverse);
}

.btn--primary:hover {
  background: var(--accent-primary-hover);
}

.btn--secondary {
  background: transparent;
  border-color: var(--border-default);
  color: var(--text-primary);
}

.btn--secondary:hover {
  background: var(--hover-overlay);
  border-color: var(--border-strong);
}

.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn--ghost:hover {
  background: var(--hover-overlay);
  color: var(--text-primary);
}

.btn--danger {
  background: var(--status-critical);
  color: #ffffff;
}

.btn--danger:hover {
  filter: brightness(0.9);
}

.btn--sm {
  height: 28px;
  font-size: 12px;
  padding: 0 var(--space-2);
}

.btn--lg {
  height: 40px;
  font-size: 14px;
  padding: 0 var(--space-4);
}

/* Icon-only button — used for the per-row action column on
   /devices and other list pages. 28×28, transparent background,
   muted icon colour that brightens on hover. */
.btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
}
.btn--icon:hover {
  background: var(--hover-overlay);
  color: var(--text-primary);
}
.btn--icon svg {
  width: 16px;
  height: 16px;
}
.btn--icon--danger:hover {
  background: var(--status-critical-muted);
  color: var(--status-critical);
}

/* Per-row icon button cluster — keeps the four buttons tight
   on the right side without stealing focus from the row click. */
.device-row__actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  justify-content: flex-end;
}

/* Device detail page — definition-list grid for the info cards
   and a flex row for the action buttons. */
.device-detail__grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-size: 13px;
}
.device-detail__grid dt {
  color: var(--text-tertiary);
  font-weight: 500;
}
.device-detail__grid dd {
  margin: 0;
  color: var(--text-primary);
}
.device-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Clickable rows — fingers up the cursor and brighten on hover so
   the user knows the whole row is a link. The action-column
   <td> stops propagation so its buttons don't trigger the row
   navigation.

   F19 (Bundle I): real-anchor row-cover. The first <td> of each
   navigable row carries an <a class="row-link"> wrapping the cell's
   visible content. Its ::after pseudo-element absolutely covers the
   parent <tr>, which makes the entire row a real anchor for the
   browser — so right-click "Open in new tab" and middle-click both
   work. Left-click is still handled by the JS data-nav dispatcher
   (interactions.js) so the existing UX is preserved. Cells marked
   data-stop-propagation get a higher stacking context so their
   buttons/links sit above the overlay and remain interactive. */
.data-table__row--clickable {
  cursor: pointer;
  position: relative;
}
.data-table__row--clickable:hover {
  background: var(--hover-overlay);
}
.row-link {
  color: inherit;
  text-decoration: none;
}
.row-link:hover {
  color: inherit;
}
.row-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
.data-table__row--clickable td {
  position: relative;
}
.data-table__row--clickable td[data-stop-propagation] {
  z-index: 1;
}

/* Status badge — UI-001 §6.3 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 22px;
  padding: 2px 8px 2px 6px;
  border-radius: var(--radius-md);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

.badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.badge--healthy {
  background: var(--status-healthy-muted);
  color: var(--status-healthy);
}

.badge--warning {
  background: var(--status-warning-muted);
  color: var(--status-warning);
}

.badge--critical {
  background: var(--status-critical-muted);
  color: var(--status-critical);
}

.badge--info {
  background: var(--status-info-muted);
  color: var(--status-info);
}

.badge--unknown {
  background: var(--status-unknown-muted);
  color: var(--status-unknown);
}

.badge--critical .badge__dot {
  animation: pulse-critical 2s ease-in-out infinite;
}

@keyframes pulse-critical {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* Utility: monospace */
.font-mono {
  font-family: var(--font-mono);
}

/* Utility: spacing (subset of UI-002 §7 utilities.css that the devices
   list needs today — add more as callers arrive). */
.mt-4 { margin-top: var(--space-4); }

/* Card body flush — table sits edge to edge inside a card. */
.card-body--flush {
  padding: 0;
}

/* Data tables — UI-001 §6.4 */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table thead tr {
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-default);
}

.data-table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

.data-table__th--right { text-align: right; }
.data-table__th--center { text-align: center; }

.data-table tbody tr {
  border-bottom: 1px solid var(--border-subtle);
  transition: background-color var(--transition-fast);
}

.data-table tbody tr:last-child {
  border-bottom: none;
}

.data-table tbody tr:hover {
  background: var(--hover-overlay);
}

.data-table td {
  padding: var(--space-3) var(--space-4);
  color: var(--text-primary);
  vertical-align: middle;
}

.data-table__td--right { text-align: right; }
.data-table__td--center { text-align: center; }

.data-table__empty {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--text-tertiary);
}

/* Inline meta text — e.g. "metric_name" suffix next to a rule, or
   "source" after an event_type. Rendered in a small muted font so
   it reads as secondary information. */
.data-table__meta {
  color: var(--text-tertiary);
  font-size: 11px;
}

/* Toolbar — filter + search row above a table. */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.toolbar__search {
  position: relative;
  flex: 1 1 240px;
  min-width: 200px;
  max-width: 320px;
}

.toolbar__search-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  stroke: var(--text-tertiary);
  stroke-width: 2;
  fill: none;
  pointer-events: none;
}

.toolbar__search-input {
  width: 100%;
  height: 36px;
  padding: 0 var(--space-3) 0 calc(var(--space-3) * 2 + 16px);
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
}

.toolbar__search-input:focus {
  outline: none;
  border-color: var(--border-strong);
  box-shadow: var(--shadow-focus);
}

.toolbar__search-input::placeholder {
  color: var(--text-tertiary);
}

.toolbar__filter {
  height: 36px;
  padding: 0 var(--space-3);
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
}

.toolbar__filter:focus {
  outline: none;
  border-color: var(--border-strong);
  box-shadow: var(--shadow-focus);
}

.toolbar__count {
  margin-left: auto;
  font-size: 13px;
  color: var(--text-tertiary);
}

/* Metric card (dashboard KPI) — UI-001 §6.6.
 * Compact card used in the top row of a dashboard. Not a full chart —
 * just a label + big value + optional trend + optional sparkline. */
.metric-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 110px;
}

.metric-card__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.metric-card__value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.metric-card__value--healthy  { color: var(--status-healthy); }
.metric-card__value--warning  { color: var(--status-warning); }
.metric-card__value--critical { color: var(--status-critical); }
.metric-card__value--default  { color: var(--text-primary); }

.metric-card__trend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--text-secondary);
}

.metric-card__trend-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-elevated);
  color: var(--text-tertiary);
}

.metric-card__trend--up   .metric-card__trend-glyph {
  background: var(--status-healthy-muted);
  color: var(--status-healthy);
}

.metric-card__trend--down .metric-card__trend-glyph {
  background: var(--status-critical-muted);
  color: var(--status-critical);
}

.metric-card__sparkline {
  width: 100%;
  height: 24px;
  margin-top: auto;
  color: var(--accent-primary);
  opacity: 0.8;
}

/* Dashboard grid helpers — UI-001 §10.3.
 * KPI row across the top, then a two-column grid of big charts. */
.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.dashboard-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.dashboard-chart-slot {
  padding: var(--space-3);
  min-height: 220px;
}

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

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

/* Pagination — prev/next footer below a table. */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.pagination__label {
  font-size: 13px;
  color: var(--text-tertiary);
}

.pagination__buttons {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* -------------------------------------------------------------------------
 * Fleet dashboard v2 (project_dashboard_v03_target.md, 2026-04-12)
 *
 * No donut gauges. Row 1 is three equal-width cards holding a device
 * heatmap, a big-number + breakdown, and a pass/fail checklist. Row 2
 * is four clickable stat tiles. Row 3 is three scrolling panels. All
 * colours use UI-001 tokens — no hardcoded hex outside tokens.css.
 * ------------------------------------------------------------------------- */

.dash-banner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.dash-banner-card {
  min-height: 220px;
}

/* --- Heatmap (slot 1) --- */

.heatmap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.heatmap__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: var(--space-2);
}

.heatmap__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-inverse);
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.heatmap__tile:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-focus);
}

.heatmap__tile--healthy  { background: var(--status-healthy); }
.heatmap__tile--warning  { background: var(--status-warning); }
.heatmap__tile--critical { background: var(--status-critical); }
.heatmap__tile--unknown  { background: var(--status-unknown); }

.heatmap__label {
  text-transform: lowercase;
  letter-spacing: -0.02em;
}

.heatmap__empty {
  grid-column: 1 / -1;
  padding: var(--space-4);
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
}

.heatmap__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--text-secondary);
}

.heatmap__legend a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-secondary);
  text-decoration: none;
}

.heatmap__legend a:hover {
  color: var(--text-primary);
}

.heatmap__legend-sep {
  color: var(--text-tertiary);
}

.heatmap__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}

.heatmap__dot--healthy  { background: var(--status-healthy); }
.heatmap__dot--warning  { background: var(--status-warning); }
.heatmap__dot--critical { background: var(--status-critical); }
.heatmap__dot--unknown  { background: var(--status-unknown); }

/* --- Fleet Score (slot 2) --- */

.dash-fleet-score {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.dash-fleet-score__value {
  font-family: var(--font-mono);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.dash-fleet-score__value--healthy  { color: var(--status-healthy); }
.dash-fleet-score__value--warning  { color: var(--status-warning); }
.dash-fleet-score__value--critical { color: var(--status-critical); }

.dash-fleet-score__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.dash-fleet-score__breakdown {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.dash-fleet-score__breakdown a {
  display: flex;
  justify-content: space-between;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
}

.dash-fleet-score__breakdown a:hover {
  background: var(--hover-overlay);
  color: var(--text-primary);
}

.dash-fleet-score__row-val {
  font-family: var(--font-mono);
  color: var(--text-primary);
}

/* --- Hostnames Health (slot 3) --- */

.dash-dns-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dash-dns-checklist__row a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 14px;
}

.dash-dns-checklist__row a:hover {
  background: var(--hover-overlay);
  color: var(--text-primary);
}

.dash-dns-checklist__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 14px;
}

.dash-dns-checklist__row--healthy  .dash-dns-checklist__icon { color: var(--status-healthy); background: var(--status-healthy-muted); }
.dash-dns-checklist__row--warning  .dash-dns-checklist__icon { color: var(--status-warning); background: var(--status-warning-muted); }
.dash-dns-checklist__row--critical .dash-dns-checklist__icon { color: var(--status-critical); background: var(--status-critical-muted); }

.dash-dns-checklist__label {
  flex: 1;
  color: var(--text-primary);
}

.dash-dns-checklist__count {
  color: var(--text-secondary);
  font-size: 13px;
}

/* --- Devices page filter bar --- */

.device-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}

.device-filter-bar__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
  flex: 1 1 140px;
}

.device-filter-bar__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.device-filter-bar__input,
.device-filter-bar__select {
  height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font-body);
}

.device-filter-bar__input:focus,
.device-filter-bar__select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-focus);
}

.device-filter-bar__select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
                    linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 14px) 14px, calc(100% - 9px) 14px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}

/* --- Row 1 — Network Health traffic-light row ---
   The card-body is a flex column so the three status panels and the
   total-devices badge share the available vertical space evenly:
   both halves grow proportionally (flex: 1) and the gap between them
   matches the gap between the three panels side-by-side. */
.dash-banner-card .card-body:has(.netw-traffic) {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
}

.netw-traffic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  flex: 1;
}

.netw-traffic__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-2);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.netw-traffic__panel:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
}

.netw-traffic__panel--online    { border-top: 3px solid var(--status-healthy); }
.netw-traffic__panel--degraded  { border-top: 3px solid var(--status-warning); }
.netw-traffic__panel--offline   { border-top: 3px solid var(--status-critical); }

.netw-traffic__count {
  font-family: var(--font-mono);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}

.netw-traffic__panel--online  .netw-traffic__count { color: var(--status-healthy); }
.netw-traffic__panel--degraded .netw-traffic__count { color: var(--status-warning); }
.netw-traffic__panel--offline .netw-traffic__count { color: var(--status-critical); }

.netw-traffic__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.netw-traffic__total {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-2);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  text-decoration: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.netw-traffic__total:hover {
  border-color: var(--border-default);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.netw-traffic__total-count {
  font-family: var(--font-mono);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}

.netw-traffic__total-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

/* --- Row 2 — four operational stat cards --- */

.dash-summary-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

/* .dash-stat-card is a <div> wrapper — a real anchor inside (.dash-stat-card__main)
   wraps the label+value, so we keep clean single-anchor semantics without
   violating HTML5's no-nested-anchors rule. */
.dash-stat-card {
  display: block;
  color: inherit;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.dash-stat-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.dash-stat-card__main {
  display: block;
  text-decoration: none;
  color: inherit;
}

.dash-stat-card__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.dash-stat-card__value {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary);
  margin-top: var(--space-2);
}

.dash-stat-card__secondary {
  margin-top: var(--space-2);
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.dash-stat-card__secondary a {
  color: var(--text-secondary);
  text-decoration: none;
}

.dash-stat-card__secondary a:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.dash-stat-card__sep {
  color: var(--text-tertiary);
}

/* --- Row 3 — three-column panel row --- */

.dash-panels-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.dash-panel-third {
  min-height: 320px;
}

.dash-scroll {
  max-height: 320px;
  overflow-y: auto;
}

.dash-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dash-list__row {
  border-bottom: 1px solid var(--border-subtle);
}

.dash-list__row:last-child {
  border-bottom: none;
}

.dash-list__row a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: var(--text-primary);
  font-size: 13px;
}

.dash-list__row a:hover {
  background: var(--hover-overlay);
}

.dash-list__time {
  color: var(--text-tertiary);
  font-size: 11px;
  font-family: var(--font-mono);
  min-width: 64px;
}

.dash-list__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex: 0 0 auto;
}

.dash-list__dot--healthy  { background: var(--status-healthy); }
.dash-list__dot--warning  { background: var(--status-warning); }
.dash-list__dot--critical { background: var(--status-critical); }
.dash-list__dot--unknown  { background: var(--status-unknown); }

.dash-list__main {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-list__meta {
  color: var(--text-secondary);
  font-size: 12px;
}

.dash-list__empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
}

/* --- Row 4 — Predictive Failures --- */

.dash-predictive {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dash-predictive__row {
  border-bottom: 1px solid var(--border-subtle);
}

.dash-predictive__row:last-child {
  border-bottom: none;
}

.dash-predictive__row a {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: var(--text-primary);
}

.dash-predictive__row a:hover {
  background: var(--hover-overlay);
}

.dash-predictive__host {
  font-size: 13px;
  min-width: 180px;
}

.dash-predictive__reason {
  flex: 1;
  color: var(--text-secondary);
  font-size: 13px;
}

/* --- Row 5 — feeds row (TLDR 60% / OPNsense 40%) --- */

.dash-feeds-row {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-4);
}

.dash-feed-card {
  display: flex;
  flex-direction: column;
  max-height: 1440px;
  min-height: 840px;
}

.dash-feed-card .card-body {
  flex: 1;
  overflow-y: auto;
}

/* When the card embeds an upstream page via iframe, the card-body
   hands the scroll to the iframe itself (TLDR's own chrome is what
   scrolls) and the card-body just acts as a sized container. */
.dash-feed-card--embed .card-body {
  overflow: hidden;
  padding: 0;
}

.dash-feed-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.dash-feed-placeholder {
  color: var(--text-tertiary);
  font-size: 13px;
  margin: 0;
}

.dash-feed-stale {
  color: var(--text-tertiary);
  font-size: 13px;
  margin: 0;
  padding: var(--space-3);
}

.dash-feed-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dash-feed-list__row {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-default);
}

.dash-feed-list__row:last-child {
  border-bottom: none;
}

.dash-feed-list__time {
  display: inline-block;
  color: var(--text-tertiary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  margin-right: var(--space-2);
}

.dash-feed-list__title {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.dash-feed-list__title:hover {
  text-decoration: underline;
}

.dash-feed-list__summary {
  margin: 4px 0 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

/* --- Responsive collapse --- */

@media (max-width: 1100px) {
  .dash-banner       { grid-template-columns: 1fr; }
  .dash-summary-row  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-panels-row   { grid-template-columns: 1fr; }
  .dash-feeds-row    { grid-template-columns: 1fr; }
  .netw-traffic      { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .dash-summary-row  { grid-template-columns: 1fr; }
}

/* ------- tabs bar (used by /settings/* and /admin/* sub-nav) ------- */
.tabs-bar {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-default, #1e3a5f);
  margin-bottom: 20px;
  overflow-x: auto;
}
.tabs-bar__tab {
  padding: 10px 16px;
  color: var(--text-secondary, #94a3b8);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
}
.tabs-bar__tab:hover { color: var(--text-primary, #e2e8f0); }
.tabs-bar__tab--active {
  color: var(--accent-primary, #77BA64);
  border-bottom-color: var(--accent-primary, #77BA64);
}

/* ------- settings form widgets ------- */
.form-card {
  background: var(--bg-surface, #122035);
  border: 1px solid var(--border-default, #1e3a5f);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
}
.form-card__title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px 0;
}
.form-field { display: block; margin-bottom: 12px; }
.form-field__label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary, #94a3b8);
  margin-bottom: 4px;
}
.form-field__input,
.form-field__select {
  width: 100%;
  background: var(--bg-subtle, #0a1628);
  border: 1px solid var(--border-default, #1e3a5f);
  color: var(--text-primary, #e2e8f0);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
}
.form-field__input:focus,
.form-field__select:focus {
  outline: none;
  border-color: var(--accent-primary, #77BA64);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: var(--bg-subtle, #0a1628);
  border-radius: 8px;
}
.form-toggle__switch {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 99px;
  border: none;
  cursor: pointer;
  background: #475569;
}
.form-toggle__switch--on { background: var(--accent-primary, #77BA64); }
.form-toggle__switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  transition: transform 0.15s;
}
.form-toggle__switch--on::after { transform: translateX(16px); }

.avatar-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--accent-primary, #77BA64);
  color: white;
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.avatar-row {
  display: flex;
  align-items: center;
  gap: 20px;
}
.color-swatch {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s;
}
.color-swatch:hover { transform: scale(1.1); }
.color-swatch--active { border-color: white; }
.color-swatch-row { display: flex; flex-wrap: wrap; gap: 10px; }

.module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) {
  .module-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .module-grid { grid-template-columns: 1fr; }
}
.tenant-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 800px) { .tenant-card-grid { grid-template-columns: 1fr; } }

.notif-matrix { width: 100%; font-size: 13px; }
.notif-matrix th, .notif-matrix td { padding: 8px; }
.notif-matrix th { text-align: left; color: var(--text-secondary); font-weight: 500; }
.notif-matrix td.notif-matrix__cell { text-align: center; }
.notif-cell {
  width: 20px;
  height: 20px;
  border: 1px solid var(--border-default, #1e3a5f);
  border-radius: 4px;
  background: var(--bg-subtle, #0a1628);
}
.notif-cell--on {
  background: var(--accent-primary, #77BA64);
  border-color: var(--accent-primary, #77BA64);
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--bg-subtle, #0a1628);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 4px;
}
.progress-bar__fill {
  height: 100%;
  background: var(--accent-primary, #77BA64);
  border-radius: 99px;
}
.progress-bar__fill--warn { background: #f59e0b; }
.progress-bar__fill--crit { background: #ef4444; }

.flash-banner {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  margin: 16px 0;
  border: 1px solid;
}
.flash-banner--ok {
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.3);
  color: #34d399;
}
.flash-banner--err {
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.3);
  color: #f87171;
}

/* Lab page misconfiguration banner — ERR-8. */
.lab-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid;
  font-size: 13px;
  line-height: 1.45;
}
.lab-banner__icon {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  margin-top: 1px;
}
.lab-banner__body { flex: 1 1 auto; }
.lab-banner__title {
  font-weight: 600;
  margin-bottom: 2px;
}
.lab-banner__message { opacity: 0.9; }
.lab-banner--error {
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.35);
  color: #f87171;
}
.lab-banner--info {
  background: rgba(96, 165, 250, 0.1);
  border-color: rgba(96, 165, 250, 0.35);
  color: #60a5fa;
}

/* Network allowlist row direction indicators (task #59).
   here       = row defined at the current scope, editable
   inherited  = row pushed down from a higher scope, read-only
   exposure   = row originating below current scope, read-only */
.allowlist-direction {
  font-size: 11px;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid;
}
.allowlist-direction--here {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
}
.allowlist-direction--inherited {
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.4);
  color: #60a5fa;
}
.allowlist-direction--exposure {
  background: rgba(251, 146, 60, 0.12);
  border-color: rgba(251, 146, 60, 0.4);
  color: #fb923c;
}

.allowlist-row--inherited td { background: rgba(96, 165, 250, 0.04); }
.allowlist-row--exposure td  { background: rgba(251, 146, 60, 0.04); }

.allowlist-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid;
  text-transform: capitalize;
}
.allowlist-status--ok {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.4);
  color: #34d399;
}
.allowlist-status--unchecked {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.35);
  color: #94a3b8;
}
.allowlist-status--resolve_failed,
.allowlist-status--unreachable {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.4);
  color: #f87171;
}
.allowlist-status--expired {
  background: rgba(251, 146, 60, 0.12);
  border-color: rgba(251, 146, 60, 0.4);
  color: #fb923c;
}

/* Onboarding wizard — 5-step indicator + form shell. Task #81
   port of frontend/src/pages/devices/OnboardingWizard.jsx. */
.wizard-shell {
  max-width: 760px;
  margin: 16px 0;
}
.wizard-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 8px;
}
.wizard-step {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.wizard-step:last-child { flex: 0 0 auto; }
.wizard-step__dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(148, 163, 184, 0.3);
  flex-shrink: 0;
}
.wizard-step--active .wizard-step__dot {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.5);
}
.wizard-step--done .wizard-step__dot {
  background: rgba(52, 211, 153, 0.18);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.45);
}
.wizard-step__label {
  font-size: 11px;
  color: #94a3b8;
  margin-left: 8px;
  white-space: nowrap;
}
.wizard-step--active .wizard-step__label { color: #e2e8f0; }
.wizard-step__connector {
  flex: 1;
  height: 1px;
  background: rgba(148, 163, 184, 0.25);
  margin: 0 12px;
  min-width: 12px;
}
.wizard-step--done .wizard-step__connector {
  background: rgba(52, 211, 153, 0.4);
}
.wizard-step-label {
  font-size: 12px;
  color: #64748b;
  margin: 4px 0 16px 0;
}
.wizard-body { }
.wizard-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}
.wizard-form { max-width: 720px; }

/* internal-chip — toggle for marking a device as internal/lab so it
   gets excluded from fleet metrics. Sits in the device detail page
   Actions card. Uses a native checkbox so CSP doesn't bite, but the
   label draws the visual toggle so the raw <input> is hidden. */
.internal-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  cursor: pointer;
  user-select: none;
  transition: all var(--transition-fast);
}
.internal-chip:hover { border-color: var(--accent-primary-muted); color: var(--text-secondary); }
.internal-chip input { accent-color: var(--accent-primary); }
.internal-chip--on {
  background: var(--status-warning-muted);
  border-color: var(--status-warning);
  color: var(--status-warning);
}
.device-detail__flags { display: flex; gap: 8px; flex-wrap: wrap; }

.internal-chip--locked {
  cursor: not-allowed;
  opacity: 0.85;
}
.internal-chip--locked input { pointer-events: none; }

/* ── Platform self-health banner ────────────────────────────────
   Rendered only when something is degraded/down. Red for down,
   amber for degraded. Sits between topbar and main content so it
   never overlaps a tooltip. */
.platform-health-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  font-size: 13px;
  color: #fff;
  background: var(--status-warning, #f59e0b);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.platform-health-banner--down {
  background: var(--status-error, #dc2626);
}
.platform-health-banner__icon {
  font-size: 16px;
  line-height: 1;
}
.platform-health-banner__label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}
.platform-health-banner__detail {
  display: flex;
  gap: 16px;
  font-size: 12px;
  opacity: 0.95;
}
.platform-health-banner__item {
  white-space: nowrap;
}

/* ───────────────────────────────────────────────────────────────
 * Device detail page (templates/pages/device_detail.html)
 *
 * Ports the pre-HTMX 7-tab layout from the Zoe reference onto
 * current design tokens. Tab switching is plain-JS via interactions.js
 * (data-tab-switch / data-tab-panel + .is-active) — no Alpine, no
 * unsafe-eval. Every class is prefixed `.dd-` so nothing here
 * collides with existing card / grid primitives.
 * ───────────────────────────────────────────────────────────────*/
.dd-header {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 8px);
  padding: 14px 18px;
  margin-top: 8px;
}
.dd-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.dd-header__back {
  font-size: 12px;
  color: var(--text-tertiary);
  text-decoration: none;
}
.dd-header__back:hover { color: var(--accent-primary); }
.dd-header__selector {
  background: var(--bg-base);
  color: var(--text-secondary);
  border: 1px solid var(--border-default, var(--border-subtle));
  border-radius: var(--radius-sm, 4px);
  padding: 4px 8px;
  font-size: 12px;
  font-family: var(--font-mono, ui-monospace, monospace);
  cursor: pointer;
  max-width: 260px;
}
.dd-header__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.dd-header__identity { min-width: 0; }
.dd-header__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dd-header__hostname {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.dd-header__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  padding: 2px 10px;
  border-radius: 9999px;
  color: var(--text-secondary);
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
}
.dd-header__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.dd-header__meta {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.dd-header__meta span + span::before {
  content: "·";
  margin-right: 8px;
  color: var(--text-tertiary);
}
.dd-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dd-header__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 8px);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.dd-header__btn:hover {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}
.dd-header__chip { display: inline-flex; align-items: center; }

.dd-infobar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 8px);
  padding: 14px 18px;
  margin-top: 12px;
}
.dd-infobar__item label {
  display: block;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dd-infobar__value {
  font-size: 13px;
  color: var(--text-primary);
}

.dd-tabs {
  margin-top: 12px;
}
.dd-tabs__bar {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border-subtle);
  background: transparent;
  overflow-x: auto;
  padding: 0;
  margin-bottom: 14px;
}
.dd-tabs__btn {
  appearance: none;
  border: none;
  background: none;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  font-family: inherit;
}
.dd-tabs__btn:hover {
  color: var(--text-secondary);
  background: var(--hover-overlay, rgba(255,255,255,0.04));
}
.dd-tabs__btn.is-active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}
.dd-tabs__panel {
  display: none;
}
.dd-tabs__panel.is-active {
  display: block;
}

/* Stat grid — 3 equal columns by default, collapses to 1 on narrow.
   dd-statgrid--5 / --6 variants are used on the Monitoring tab for
   the hardware-sensor row (5 cards) and the top summary row (6
   cards) respectively. */
.dd-statgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.dd-statgrid--5 { grid-template-columns: repeat(5, 1fr); }
.dd-statgrid--6 { grid-template-columns: repeat(6, 1fr); }
.dd-stat {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 8px);
  padding: 14px 16px;
}
.dd-stat__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.dd-stat__value {
  font-size: 24px;
  font-weight: 700;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--text-primary);
  line-height: 1;
}
.dd-stat__value--ok   { color: var(--status-healthy, #34d399); }
.dd-stat__value--warn { color: var(--status-warning, #fbbf24); }
.dd-stat__value--err  { color: var(--status-critical, #f87171); }
.dd-stat__value--muted { color: var(--text-tertiary); font-size: 18px; font-weight: 500; }

/* dd-stat--text is the identity-card variant used for the CPU card
   on the Monitoring tab. It presents a compact two-column key/value
   grid instead of the big numeric readout the sibling cards use. */
.dd-stat--text .dd-stat__value { display: none; }
.dd-stat--text {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-auto-rows: min-content;
  row-gap: 2px;
  column-gap: 10px;
  align-items: baseline;
}
.dd-stat--text .dd-stat__label { grid-column: 1 / -1; margin-bottom: 2px; }
.dd-stat__kv {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dd-stat__kv__value {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dd-stat__note {
  margin-top: 6px;
  font-size: 10px;
  color: var(--text-tertiary);
  font-style: italic;
}

/* Sensor row — one-line compact readout. Used on the Monitoring
   tab so that CPU identity, temperature, disk life, and three
   stoplight indicators (SMART / CMOS / 7-day trend) share a
   single horizontal line instead of each owning their own card.
   Wraps on narrow viewports. */
.dd-sensorrow {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 8px);
  padding: 10px 14px;
  margin-bottom: 12px;
}
.dd-sensor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
}
.dd-sensor__k {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dd-sensor__v {
  color: var(--text-primary);
  font-size: 12px;
}
.dd-sensor__v--muted { color: var(--text-tertiary); }
.dd-sensor--dot { cursor: help; }
.dd-sensor__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: var(--text-tertiary);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
}
.dd-sensor__dot--ok       { background: var(--status-healthy, #34d399); }
.dd-sensor__dot--warn     { background: var(--status-warning, #fbbf24); }
.dd-sensor__dot--err      { background: var(--status-critical, #f87171); }
.dd-sensor__dot--unknown  { background: var(--text-tertiary); }

/* Memory/storage hbars container when placed inside a chart-grid
   cell. Keeps the card the same visual height as a chart so the
   two-column row stays tidy. */
.dd-hbars-card { min-height: 160px; }
.dd-hbars-card .dd-hbars { padding: 14px 16px; }

/* Horizontal usage bars inside a card (RAM / Swap / Disk row on
   the Monitoring tab). Grid layout so label, track, value, hint
   line up consistently across rows. */
.dd-hbars {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dd-hbar {
  display: grid;
  grid-template-columns: 60px 1fr 60px auto;
  align-items: center;
  gap: 10px;
}
.dd-hbar__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dd-hbar__track {
  height: 10px;
  background: var(--bg-base);
  border-radius: 9999px;
  overflow: hidden;
}
.dd-hbar__fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.4s ease;
  background: var(--accent-primary);
}
.dd-hbar__fill--ok    { background: var(--status-healthy, #34d399); }
.dd-hbar__fill--warn  { background: var(--status-warning, #fbbf24); }
.dd-hbar__fill--err   { background: var(--status-critical, #f87171); }
.dd-hbar__fill--muted { background: rgba(255,255,255,0.15); }
.dd-hbar__value {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--text-primary);
  text-align: right;
}
.dd-hbar__hint {
  font-size: 10px;
  color: var(--text-tertiary);
  font-style: italic;
}

/* Progress (CPU/Mem/Disk bars on the Monitoring + Health tabs) */
.dd-progress {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 8px);
  padding: 14px 16px;
}
.dd-progress__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.dd-progress__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dd-progress__value {
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--text-primary);
}
.dd-progress__track {
  width: 100%;
  height: 8px;
  background: var(--bg-base);
  border-radius: 9999px;
  overflow: hidden;
}
.dd-progress__fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.4s ease;
  background: var(--accent-primary);
}
.dd-progress__fill--ok   { background: var(--status-healthy, #34d399); }
.dd-progress__fill--warn { background: var(--status-warning, #fbbf24); }
.dd-progress__fill--err  { background: var(--status-critical, #f87171); }

/* Info list — key/value rows with a dotted key column */
.dd-infolist {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 8px);
  overflow: hidden;
}
.dd-infolist__row {
  display: flex;
  align-items: center;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.dd-infolist__row:last-child { border-bottom: none; }
.dd-infolist__key {
  font-size: 12px;
  color: var(--text-tertiary);
  width: 180px;
  flex-shrink: 0;
  cursor: help;
  border-bottom: 1px dotted rgba(255,255,255,0.1);
}
.dd-infolist__value {
  font-size: 12px;
  color: var(--text-primary);
}

/* Card + empty state shared across tabs */
.dd-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 8px);
  overflow: hidden;
}
.dd-card__header {
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dd-card__body { padding: 14px 16px; font-size: 13px; color: var(--text-secondary); }
.dd-card__count {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-primary);
  background: var(--accent-primary-muted, rgba(119,186,100,0.15));
  padding: 1px 6px;
  border-radius: 4px;
}
.dd-empty {
  padding: 18px 16px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 12px;
}
.dd-empty a { color: var(--accent-primary); }

/* Event list — dot + message + meta row */
.dd-eventlist { padding: 0; }
.dd-event {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.dd-event:last-child { border-bottom: none; }
.dd-event__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}
.dd-event__dot--critical { background: var(--status-critical, #f87171); }
.dd-event__dot--warning  { background: var(--status-warning, #fbbf24); }
.dd-event__dot--info     { background: var(--accent-secondary, #60a5fa); }
.dd-event__body { flex: 1; min-width: 0; }
.dd-event__msg {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}
.dd-event__meta {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 2px;
  font-family: var(--font-mono, ui-monospace, monospace);
}

/* Monitoring bar above the chart grid */
.dd-monitoring__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text-tertiary);
}
.dd-chartgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* Health score card — big number + bar */
.dd-health {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 8px);
  padding: 20px;
}
.dd-health__top {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
}
.dd-health__score {
  font-size: 40px;
  font-weight: 700;
  font-family: var(--font-mono, ui-monospace, monospace);
  line-height: 1;
}
.dd-health__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.dd-health__desc {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* Firmware current-version banner */
.dd-firmware {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 8px);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.dd-firmware__label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dd-firmware__version {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 18px;
  color: var(--text-primary);
}

/* Access tab button row */
.dd-access__buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Console / Serial / WebGUI tabs — shared chrome + xterm/iframe mount.
   The dd-console wrapper is reused for both SSH-over-WS (Console tab)
   and virsh PTY (Serial tab); dd-webgui wraps the iframe. Each has a
   thin bar on top matching the rest of the device-detail cards and a
   fixed-height mount area below so xterm/iframe sizing is stable. */
.dd-console {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 8px);
  background: var(--bg-surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 560px;
}
.dd-console__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-surface-2, var(--bg-surface));
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.dd-console__name {
  color: var(--text-primary);
  font-size: 12px;
}
.dd-console__badge {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.18);
  color: var(--accent-primary, #60a5fa);
}
.dd-console__badge--serial {
  background: rgba(34, 197, 94, 0.18);
  color: var(--status-healthy, #22c55e);
}
.dd-console__status {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: auto;
}
.dd-console__popout {
  font-size: 11px;
  text-decoration: none;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}
.dd-console__popout:hover {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}
.dd-console__term {
  flex: 1;
  min-height: 520px;
  background: #0a1628;
  padding: 6px 8px;
}
.dd-console__term .xterm {
  height: 100%;
}

.dd-webgui {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 8px);
  background: var(--bg-surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 720px;
}
.dd-webgui__frame {
  flex: 1;
  width: 100%;
  border: 0;
  background: #ffffff;
  min-height: 680px;
}

/* Responsive collapse */
@media (max-width: 1200px) {
  .dd-statgrid--6 { grid-template-columns: repeat(3, 1fr); }
  .dd-statgrid--5 { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 900px) {
  .dd-statgrid,
  .dd-statgrid--5,
  .dd-statgrid--6 { grid-template-columns: 1fr; }
  .dd-infobar  { grid-template-columns: repeat(2, 1fr); }
  .dd-chartgrid { grid-template-columns: 1fr; }
  .dd-hbar { grid-template-columns: 54px 1fr 60px; }
  .dd-hbar__hint { display: none; }
}
@media (max-width: 600px) {
  .dd-infobar  { grid-template-columns: 1fr; }
}

/* =========================================================================
   Monitoring — Real-time / History / Compare
   Ported from zoe-reference monitoring_realtime/history/compare.html.
   Scoped with mon-rt- / mon-hist- / mon-cmp- prefixes so the rules don't
   collide with device-detail (dd-) or dashboard (dash-) layouts.
   ========================================================================= */

/* Real-time */
.mon-rt-counters {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px;
}
@media (min-width: 768px) { .mon-rt-counters { grid-template-columns: repeat(4, 1fr); } }
.mon-rt-card {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 16px 20px;
}
.mon-rt-card__label { font-size: 11px; color: var(--text-tertiary); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.mon-rt-card__value { font-size: 24px; font-weight: 700; font-family: var(--font-mono); color: var(--text-primary); }
.mon-rt-card__value--blue { color: #60a5fa; }
.mon-rt-card__value--green { color: #34d399; }
.mon-rt-card__value--accent { color: var(--accent-primary); }
.mon-rt-card__value--amber { color: #fbbf24; }

.mon-rt-panel {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px;
}
.mon-rt-panel__title { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 16px; }

.mon-rt-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
@media (min-width: 640px) { .mon-rt-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .mon-rt-grid { grid-template-columns: repeat(6, 1fr); } }
.mon-rt-tile {
  border: 1px solid; border-radius: var(--radius-lg); padding: 12px;
  display: flex; flex-direction: column; gap: 4px;
  text-decoration: none; color: inherit;
  transition: filter var(--transition-fast);
}
.mon-rt-tile:hover { filter: brightness(1.15); }
.mon-rt-tile--up { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.3); }
.mon-rt-tile--down { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.3); }
.mon-rt-tile--unknown { background: rgba(107,114,128,0.12); border-color: rgba(107,114,128,0.3); }
.mon-rt-tile__name { font-size: 12px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mon-rt-tile__meta { display: flex; }
.mon-rt-tile__status {
  font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 9999px;
  display: inline-block; width: fit-content; text-transform: capitalize;
}
.mon-rt-tile__status--up { background: var(--status-healthy-muted); color: var(--status-healthy); }
.mon-rt-tile__status--down { background: var(--status-critical-muted); color: var(--status-critical); }
.mon-rt-tile__status--unknown { background: rgba(107,114,128,0.2); color: #9ca3af; }
.mon-rt-empty { grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--text-tertiary); }

/* History */
.mon-hist-controls {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 20px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end;
  margin-bottom: 16px;
}
.mon-hist-field { display: flex; flex-direction: column; gap: 4px; }
.mon-hist-field__label { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.mon-hist-field select, .mon-hist-field input {
  background: var(--bg-base); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 6px 12px; font-size: 13px;
  color: var(--text-primary); min-width: 180px;
}
.mon-hist-field select:focus, .mon-hist-field input:focus {
  outline: none; border-color: var(--accent-primary);
}
.mon-hist-range-btns { display: flex; gap: 4px; }
.mon-hist-range-btn {
  padding: 6px 12px; font-size: 12px; border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle); background: transparent;
  color: var(--text-tertiary); cursor: pointer; transition: all var(--transition-fast);
}
.mon-hist-range-btn:hover { border-color: var(--text-secondary); }
.mon-hist-range-btn--active {
  background: var(--accent-primary-muted); border-color: var(--accent-primary);
  color: var(--accent-primary);
}
.mon-hist-panel {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px;
}
.mon-hist-panel__title { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 12px; }
.mon-hist-panel__header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.mon-hist-empty { text-align: center; padding: 48px; color: var(--text-tertiary); font-size: 13px; }
.mon-hist-table-scroll { overflow-x: auto; max-height: 400px; overflow-y: auto; }
.mon-hist-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.mon-hist-table th {
  text-align: left; padding: 8px 12px; font-size: 11px; font-weight: 600;
  color: var(--text-tertiary); border-bottom: 1px solid var(--border-subtle);
  text-transform: uppercase; letter-spacing: 0.04em;
  position: sticky; top: 0; background: var(--bg-surface);
}
.mon-hist-table td {
  padding: 8px 12px; color: var(--text-secondary); font-family: var(--font-mono); font-size: 12px;
  border-bottom: 1px solid rgba(30,37,54,0.5);
}
.mon-hist-table tbody tr:hover { background: var(--hover-overlay); }

/* Compare */
.mon-cmp-controls {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 20px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start;
  margin-bottom: 16px;
}
.mon-cmp-field { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.mon-cmp-field--grow { flex: 1; }
.mon-cmp-field__label { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.mon-cmp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mon-cmp-chip {
  padding: 6px 12px; font-size: 12px; border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle); background: transparent;
  color: var(--text-tertiary); cursor: pointer; transition: all var(--transition-fast);
}
.mon-cmp-chip:hover { border-color: var(--text-secondary); }
.mon-cmp-chip--active {
  background: var(--accent-primary-muted); border-color: var(--accent-primary);
  color: var(--accent-primary);
}
.mon-cmp-panel {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px;
}
.mon-cmp-panel__title { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.mon-cmp-panel__header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
}
.mon-cmp-legend { display: flex; gap: 12px; }
.mon-cmp-legend__item { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-tertiary); }
.mon-cmp-legend__dot { width: 12px; height: 12px; border-radius: 2px; }
.mon-cmp-empty { text-align: center; padding: 48px; color: var(--text-tertiary); font-size: 13px; }
.mon-cmp-chart { width: 100%; }

.mon-cmp-details {
  display: grid; grid-template-columns: repeat(1, 1fr); gap: 12px; margin-bottom: 16px;
}
@media (min-width: 768px) { .mon-cmp-details { grid-template-columns: repeat(2, 1fr); } }
.mon-cmp-card {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 20px;
}
.mon-cmp-card__header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.mon-cmp-card__name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.mon-cmp-card__status {
  display: inline-block; font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 9999px; text-transform: capitalize;
}
.mon-cmp-card__status--up { background: var(--status-healthy-muted); color: var(--status-healthy); }
.mon-cmp-card__status--down { background: var(--status-critical-muted); color: var(--status-critical); }
.mon-cmp-card__status--unknown { background: rgba(107,114,128,0.2); color: #9ca3af; }
.mon-cmp-card__metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.mon-cmp-card__label { font-size: 11px; color: var(--text-tertiary); margin-bottom: 4px; }
.mon-cmp-card__value { font-family: var(--font-mono); font-size: 18px; color: var(--text-primary); }

/* PR-7 (role-taxonomy v2 + customer-hierarchy): admin polish ------- */

/* HTMX confirm-modal partial (rendered into the existing dialog
   modal slot used by /admin/tenants, /admin/users, /admin/orgs,
   /admin/sites). Mirrors the form-card padding so confirm + form
   open with the same chrome. */
.confirm-modal {
  padding: 20px 24px;
  min-width: 320px;
  max-width: 480px;
}
.confirm-modal__title { font-size: 16px; color: var(--text-primary); margin-bottom: 8px; }
.confirm-modal__message { font-size: 13px; line-height: 1.4; }

/* Per-page filter bar above admin tables. Compact selects sized to
   match the data-table chrome on /admin/users, /admin/tenants, etc. */
.admin-filter-bar .form-field { display: inline-flex; flex-direction: column; gap: 2px; }
.admin-filter-bar .form-field__input { padding: 4px 8px; font-size: 12px; }

/* Default-admin badge sizing — used inline next to user names on
   /admin/users to mark the ★ Default holder for each role/scope. */
.default-admin-badge {
  display: inline-block;
  font-size: 14px;
  vertical-align: middle;
  cursor: help;
}

/* Bundle Q (2026-05-04) — row-hover summary tooltip. The element is
   appended to <body> by interactions.js so it escapes any overflow
   container; CSS positions it via fixed coords the JS sets each
   mouseenter. Surface + border match the .card token so a tooltip
   feels like a small floating card. Pointer-events: none keeps the
   tooltip from intercepting clicks meant for the row underneath —
   click navigation (Bundle I) still fires when the cursor passes
   through the tooltip area. */
.row-tooltip {
  position: fixed;
  z-index: 1100;
  max-width: 400px;
  max-height: 50vh;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  padding: var(--space-3, 12px);
  pointer-events: none;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-primary);
}
.row-tooltip__title {
  font-weight: 600;
  margin-bottom: 2px;
  word-break: break-word;
}
.row-tooltip__subtitle {
  color: var(--text-secondary);
  font-size: 12px;
  margin-bottom: var(--space-2, 8px);
}
.row-tooltip__fields {
  display: grid;
  grid-template-columns: minmax(70px, max-content) 1fr;
  gap: 2px var(--space-3, 12px);
  margin: 0;
}
.row-tooltip__label {
  color: var(--text-secondary);
  font-size: 12px;
  margin: 0;
}
.row-tooltip__value {
  color: var(--text-primary);
  margin: 0;
  word-break: break-word;
}

/* Admin org/site form specifics — the create/edit fragments share
   the form-row layout so a single tweak covers both. */
.admin-org-form .form-row,
.admin-site-form .form-row { margin-bottom: 12px; }

/* Bundle AF — reachability pill row on the device-detail Overview tab.
   Four pills (icmp/ssh/api/snmp) sourced from the canonical
   monitoring.reachability_status row. State drives the colour:
     up      → healthy   (green)
     down    → critical  (red)
     stale   → warning   (amber)
     unknown → unknown   (grey)
   Mirrors the existing --status-* token convention so dark/light
   themes pick up the right shade automatically. */
.dd-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  border: 1px solid var(--text-tertiary);
  background: var(--status-unknown-muted);
  color: var(--text-secondary);
}
.dd-pill__kind { font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.dd-pill__state { color: var(--text-tertiary); }
.dd-pill__stat { color: var(--text-secondary); font-size: 11px; }
.dd-pill--up      { border-color: var(--status-healthy);  background: var(--status-healthy-muted);  color: var(--status-healthy); }
.dd-pill--down    { border-color: var(--status-critical); background: var(--status-critical-muted); color: var(--status-critical); }
.dd-pill--stale   { border-color: var(--status-warning);  background: var(--status-warning-muted);  color: var(--status-warning); }
.dd-pill--unknown { border-color: var(--status-unknown);  background: var(--status-unknown-muted);  color: var(--status-unknown); }