/* The hub's few own styles. Bootstrap and the box's helion.css (the Panou,
 * the power band, the top bar) do the rest; colours only from the theme's
 * variables (24-grid-and-theme). */

/* `hidden` must always win over a component's own display (the box's lesson,
   2026-10-12). */
[hidden] { display: none !important; }

.cloud-status { color: var(--bs-secondary-color); margin: 0 0 .5rem; }
.cloud-status.offline, .cloud-status.stale { color: var(--bs-danger-text-emphasis); font-weight: 600; }
/* A value that may be old never looks live. */
.stale .panel-reading, .stale .power-band-value { opacity: .45; text-decoration: line-through dotted; }

/* The history card (M6b): the canvas needs a box with a height to fill. */
.history-chart { position: relative; height: 320px; }
/* What the chart's marks mean (the band asked about, 2026-10-16): a swatch in
 * the series' accent, set from script (no inline styles here). */
.history-legend li { display: inline-flex; align-items: center; gap: .35rem; margin-right: 1rem; }
.history-swatch { display: inline-block; width: 1.4rem; height: .7rem; border-radius: 2px; }
.history-swatch.line { height: 0; border-top: 2px solid currentColor; }
.history-series { max-width: 22rem; }
.history-title { min-width: 10rem; text-align: center; }
#history.loading .history-chart { opacity: .5; }

@media (max-width: 575.98px) {
  .history-chart { height: 240px; }
  .history-series { max-width: 100%; }
}

/* ---- the bar (M6c; solar-pv's chrome) ----------------------------------- */
.hub-bar { position: sticky; top: 0; z-index: 1020; --bs-navbar-padding-y: .4rem; }
.hub-brand { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
.hub-logo { color: var(--bs-primary); flex-shrink: 0; }
.hub-bar .nav-link { font-size: .95rem; }
.hub-bar .nav-link.active { color: var(--bs-emphasis-color); font-weight: 600; }
@media (min-width: 992px) {
  .hub-bar .nav-link.active { box-shadow: inset 0 -2px 0 var(--bs-primary); }
}
.hub-person { position: relative; }
.hub-person-btn { display: inline-flex; align-items: center; gap: .4rem; max-width: 220px; }
.hub-person-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-caret { font-size: .7rem; opacity: .7; }
.hub-person .dropdown-menu { position: absolute; top: calc(100% + .35rem); right: 0; left: auto; min-width: 14rem; }
.hub-avatar {
  width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis);
  font-size: .72rem; font-weight: 600; flex-shrink: 0;
}
.hub-avatar-lg { width: 38px; height: 38px; font-size: 1rem; }
@media (max-width: 575.98px) { .hub-person-name, .hub-caret { display: none; } }

/* ---- the settings shell (panel.html; solar-pv's panel) ------------------- */
.hub-side { position: sticky; top: 4.5rem; }
.hub-who { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--bs-border-color); }
.hub-side-nav { display: flex; flex-direction: column; padding: .5rem .6rem; gap: 2px; }
.hub-side-group { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-secondary-color); padding: .8rem .5rem .3rem; }
.hub-side-link { padding: .4rem .6rem; border-radius: var(--bs-border-radius); border: 1px solid transparent; color: var(--bs-secondary-color); text-decoration: none; font-size: .9rem; }
.hub-side-link:hover { color: var(--bs-emphasis-color); background: var(--bs-tertiary-bg); }
.hub-side-link.active { color: var(--bs-emphasis-color); font-weight: 600; border-color: var(--bs-primary-border-subtle); background: var(--bs-primary-bg-subtle); }
.hub-title { font-size: clamp(1.5rem, 2.5vw, 2rem); margin: 0 0 .25rem; }
.hub-orgs li + li { border-top: 1px solid var(--bs-border-color-translucent); }
.hub-side-org { display: contents; }
.hub-org-name { font-weight: 600; padding: .1rem .6rem .35rem; }
.hub-org-pick { margin: .1rem 0 .35rem; }
.hub-side-new { color: var(--bs-secondary-color); margin-top: .4rem; }
.hub-org-kicker { color: var(--bs-secondary-color); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .15rem; min-height: 1.2em; }
.hub-table th { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); font-weight: 500; }
.hub-table td:first-child, .hub-table th:first-child { padding-left: 1rem; }
.hub-table td:last-child, .hub-table th:last-child { padding-right: 1rem; }
/* The Yes/No question (shell.js ask): the browser's own modal dialog. */
.hub-ask { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); padding: 1.25rem; max-width: min(28rem, calc(100vw - 2rem)); background: var(--bs-body-bg); color: var(--bs-body-color); }
.hub-ask::backdrop { background: rgba(0, 0, 0, .45); }
/* On a phone the side becomes a row of pills above the page. */
@media (max-width: 991.98px) {
  .hub-side { position: static; }
  .hub-who, .hub-side-group, .hub-org-name { display: none; }
  .hub-org-pick { flex-basis: 100%; }
  .hub-side-nav { flex-direction: row; flex-wrap: wrap; gap: .4rem; padding: .6rem; }
  .hub-side-link { border: 1px solid var(--bs-border-color); border-radius: 2rem; padding: .3rem .8rem; }
}

/* The box's health (2026-10-19): four tiles, two to a row, one on a phone;
 * a thin meter under disk and memory, its width set from script. */
.health-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 420px) { .health-grid { grid-template-columns: minmax(0, 1fr); } }
.health-tile { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .55rem .75rem; }
.health-value { font-size: 1.15rem; font-weight: 500; font-variant-numeric: tabular-nums; margin: .1rem 0 .2rem; }
.health-track { height: .375rem; background: var(--bs-secondary-bg); border-radius: 1rem; overflow: hidden; }
.health-fill { height: 100%; width: 0; }

/* The machines list (helion design 32, mockup v3): one grid row per machine
 * -- tick, name, CPU, memory, disk, uptime, version, the up arrow. On a phone
 * the figures fold into one line under the name. Bar widths are set from
 * script (no inline styles here). */
.machines-bar { min-height: 2.75rem; }
.machines-row {
  display: grid;
  grid-template-columns: 28px minmax(140px, 1.4fr) repeat(5, minmax(68px, 1fr)) 36px;
  gap: 8px;
  align-items: center;
}
.machines-m { font-size: .85rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.machines-m .bi { color: var(--bs-secondary-color); margin-right: .25rem; }
.machines-meter { height: .25rem; background: var(--bs-secondary-bg); border-radius: 1rem; overflow: hidden; margin-top: .2rem; }
.machines-meter > span { display: block; height: 100%; width: 0; }
.machines-fold { display: none; font-variant-numeric: tabular-nums; }
.machines-icon { font-size: 1.25rem; line-height: 1; padding: .3rem .55rem; }
.machines-up { font-size: 1.25rem; line-height: 1; }
@media (max-width: 767.98px) {
  .machines-row { grid-template-columns: 28px minmax(0, 1fr) 36px; }
  .machines-row .machines-m { display: none; }
  .machines-fold { display: flex; }
}