/* My UPS (myUps.html): every UPS this account's copies of UPS Monitor report,
   grouped by computer, and the devices with a Revoke beside each.

   Built on appMenu.css's group box and category header, the same as My
   Remote Control.

   THE STATE COLOURS ARE THE TRAY POPUP'S: online green, charging blue, on
   battery amber, low battery or overloaded red, no data grey. Through the
   theme's status tokens (--ok, --info, --warn, --danger), never a colour of
   their own, so they stay readable in all eight themes. Sizes through
   --font-scale for the same reason.

   Added 2026-10-08. */

.ups [hidden] {
  display: none !important;
}

.ups__status {
  margin: 24px 0;
  color: var(--ink-muted);
  font-size: calc(1.05rem * var(--font-scale, 1));
}

.ups-lede {
  margin: 0 0 12px;
  color: var(--ink-muted);
  font-size: calc(0.95rem * var(--font-scale, 1));
}

.ups-hint {
  margin: 10px 0 0;
  color: var(--ink-faint);
  font-size: calc(0.88rem * var(--font-scale, 1));
  line-height: 1.5;
}

.ups-empty {
  margin: 0;
  color: var(--ink-muted);
  font-size: calc(0.95rem * var(--font-scale, 1));
}

/* ------------------------------------------------------------- the total */

.ups-total {
  margin: 0;
  color: var(--ink);
  font-size: calc(1.6rem * var(--font-scale, 1));
  font-weight: 600;
}

/* "Windows · Tray app · UPS Monitor 0.3.0 — last report 20 s ago", under each
   computer's header. In the warning colour once it has gone quiet, because
   a silent computer is the one whose UPS nobody is watching. */
.ups-heard {
  margin: 0 0 12px;
  color: var(--ink-muted);
  font-size: calc(0.9rem * var(--font-scale, 1));
}

.ups-heard--silent {
  color: var(--warn);
  font-weight: 600;
}

/* ------------------------------------------------------------- the cards */

.ups-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 12px;
}

/* The state colour runs down the left edge as well as in the pill, so a
   row of cards can be read at a glance from across the room. */
.ups-card {
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--surface-alt);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--ink-faint);
  color: var(--ink);
}

.ups-card--online { border-left-color: var(--ok); }
.ups-card--charging { border-left-color: var(--info); }
.ups-card--battery { border-left-color: var(--warn); }
.ups-card--danger { border-left-color: var(--danger); }
.ups-card--nodata { border-left-color: var(--ink-faint); }

.ups-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ups-card__name {
  font-weight: 600;
  font-size: calc(1.05rem * var(--font-scale, 1));
  overflow-wrap: anywhere;
}

.ups-card__model {
  margin: 2px 0 0;
  color: var(--ink-faint);
  font-size: calc(0.82rem * var(--font-scale, 1));
  overflow-wrap: anywhere;
}

.ups-card__big {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 10px 0 8px;
}

.ups-card__charge {
  font-size: calc(1.8rem * var(--font-scale, 1));
  font-weight: 600;
}

.ups-card__runtime {
  color: var(--ink-muted);
  font-size: calc(0.95rem * var(--font-scale, 1));
}

.ups-card__flag {
  margin: 8px 0 0;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--warn-soft);
  border-left: 3px solid var(--warn);
  font-size: calc(0.88rem * var(--font-scale, 1));
}

.ups-card__when {
  margin: 8px 0 0;
  color: var(--ink-faint);
  font-size: calc(0.8rem * var(--font-scale, 1));
}

/* The state, as a filled pill in the state's colour with the theme's own
   text-on-status ink. */
.ups-pill {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--ink-faint);
  color: var(--on-status);
  font-size: calc(0.8rem * var(--font-scale, 1));
  font-weight: 600;
  white-space: nowrap;
}

.ups-pill--online { background: var(--ok); }
.ups-pill--charging { background: var(--info); }
.ups-pill--battery { background: var(--warn); }
.ups-pill--danger { background: var(--danger); }
.ups-pill--nodata { background: var(--ink-faint); }

.ups-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 3px 14px;
  margin: 0;
  font-size: calc(0.9rem * var(--font-scale, 1));
}

.ups-facts dt {
  color: var(--ink-muted);
}

.ups-facts dd {
  margin: 0;
}

/* ------------------------------------------------- the devices and revoke */

.ups-table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(0.92rem * var(--font-scale, 1));
  display: block;
  overflow-x: auto;
}

.ups-table th,
.ups-table td {
  padding: 8px 12px 8px 0;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

.ups-table th {
  color: var(--ink-muted);
  font-weight: 600;
  border-bottom-color: var(--rule-strong);
}

.ups-table td {
  color: var(--ink);
}

.ups-table tr.is-revoked td {
  color: var(--ink-faint);
}

/* "Show 6 revoked" under the table: revoked devices are hidden until asked
   for, so this is quiet -- a link, not a button. */
.ups-show-revoked {
  margin: 10px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-strong);
  font: inherit;
  font-size: calc(0.88rem * var(--font-scale, 1));
  text-decoration: underline;
  cursor: pointer;
}

.ups-table__name {
  font-weight: 600;
}

.ups-id {
  display: block;
  font-family: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;
  font-size: calc(0.8rem * var(--font-scale, 1));
  font-weight: 400;
  color: var(--ink-faint);
}

/* The Revoke column stays in view on a phone while the row scrolls under
   it -- the same fix My Remote Control needed. */
.ups-table .ups-table__act {
  position: sticky;
  right: 0;
  padding: 8px 0 8px 12px;
  background: var(--surface);
}

.ups-revoke-btn {
  border-color: var(--danger);
  color: var(--danger);
}

.ups-revoke-btn:hover {
  background: var(--danger-soft);
}

.ups-revoke-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.ups-confirm {
  margin: 12px 0 0;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--surface-alt);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
}

.ups-confirm p {
  margin: 0 0 8px;
}

.ups-confirm__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.ups-notice {
  margin: 12px 0 0;
  padding: 12px 16px;
  border-radius: 8px;
  color: var(--ink);
}

.ups-notice p {
  margin: 0;
}

.ups-notice--danger {
  background: var(--danger-soft);
  border-left: 4px solid var(--danger);
}

/* ------------------------------------------------------------ the charts

   History, under a computer's cards: three small charts on one time axis
   (js/upsChart.js). Every colour is a theme token. The line is the theme's
   accent; on-battery periods are the warning wash, said in words in the
   legend too; the lowest-to-highest band is the accent at a tenth. */

.ups-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.ups-card__foot .ups-card__when {
  margin: 0;
}

.ups-history-btn,
.ups-range-btn,
.ups-history-close {
  font-size: calc(0.82rem * var(--font-scale, 1));
}

.ups-history-btn[aria-expanded="true"],
.ups-range-btn[aria-pressed="true"] {
  background: var(--selected-bg);
  border-color: var(--accent);
}

.ups-history {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--rule-strong);
  background: var(--surface);
}

.ups-history__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
}

.ups-history__title {
  margin: 0;
  color: var(--ink);
  font-size: calc(1.05rem * var(--font-scale, 1));
}

.ups-history__ranges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ups-history__host {
  margin-top: 6px;
}

/* The tooltip is placed against this. */
.ups-chart {
  position: relative;
}

.ups-chart__title {
  margin: 10px 0 0;
  color: var(--ink-muted);
  font-size: calc(0.88rem * var(--font-scale, 1));
}

.ups-chart__svg {
  display: block;
  max-width: 100%;
  overflow: visible;
  touch-action: pan-y;
}

.ups-chart__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.ups-chart__dot {
  fill: var(--accent);
}

.ups-chart__band {
  fill: var(--accent);
  fill-opacity: 0.12;
  stroke: none;
}

/* The warning colour, washed: strong enough to find a ten-minute cut in a
   week, quiet enough that the line stays the loudest thing. */
.ups-chart__battery {
  fill: var(--warn);
  fill-opacity: 0.28;
}

.ups-chart__grid {
  stroke: var(--rule);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.ups-chart__cross {
  stroke: var(--ink-muted);
  stroke-width: 1;
  shape-rendering: crispEdges;
  pointer-events: none;
}

.ups-chart__ylabel,
.ups-chart__xlabel,
.ups-chart__none {
  fill: var(--ink-faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.ups-chart__ylabel {
  text-anchor: end;
}

.ups-chart__xlabel {
  text-anchor: middle;
}

.ups-chart__legend {
  margin: 8px 0 0;
  color: var(--ink-faint);
  font-size: calc(0.82rem * var(--font-scale, 1));
  white-space: pre-wrap;
}

.ups-chart__key {
  display: inline-block;
  width: 14px;
  height: 10px;
  margin-right: 5px;
  vertical-align: -1px;
  border-radius: 2px;
}

.ups-chart__key--battery {
  background: color-mix(in srgb, var(--warn) 28%, transparent);
  border: 1px solid var(--warn);
}

.ups-chart__key--band {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid var(--accent);
}

.ups-chart__tip {
  position: absolute;
  z-index: 2;
  min-width: 170px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--rule-strong);
  background: var(--raised);
  box-shadow: 0 2px 8px var(--shadow);
  color: var(--ink);
  font-size: calc(0.85rem * var(--font-scale, 1));
  pointer-events: none;
}

.ups-chart__tip p {
  margin: 0;
}

.ups-chart__tip-when {
  color: var(--ink-muted);
  margin-bottom: 4px !important;
}

.ups-chart__tip-battery {
  margin-top: 4px !important;
  font-weight: 600;
}

.ups-chart__empty {
  margin: 10px 0 0;
  color: var(--ink-muted);
}

.ups-chart__table {
  margin-top: 10px;
  color: var(--ink-muted);
  font-size: calc(0.88rem * var(--font-scale, 1));
}

.ups-chart__table summary {
  cursor: pointer;
}

.ups-chart__table .ups-table {
  max-height: 320px;
  overflow-y: auto;
}

/* ------------------------------------------- UPS Monitor Cloud (2026-10-09)

   The trial or subscription line under RIGHT NOW, and the paused notice
   with Renew when it has ended. */

.ups-sub {
  margin: 0 0 10px;
  color: var(--ink-muted);
  font-size: calc(0.92rem * var(--font-scale, 1));
}

.ups-sub__link {
  margin-left: 6px;
}

.ups-notice--warn {
  background: var(--warn-soft);
  border-left: 4px solid var(--warn);
}

.ups-notice__buttons {
  margin: 10px 0 0 !important;
}

.ups-notice__buttons a.product-btn {
  text-decoration: none;
}

#sub-paused {
  margin: 0 0 12px;
}

/* ------------------------------------------------------------- the tabs
   My UPS (watching) and Manage (subscription, devices, Revoke), 2026-10-10. */

.ups-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--rule-strong);
}

.ups-tab {
  margin-bottom: -1px;
  padding: 8px 20px;
  background: transparent;
  color: var(--ink-muted);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.ups-tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--rule-strong);
  border-bottom: 1px solid var(--surface);
}

.ups-tab:focus-visible {
  outline: 2px solid var(--accent);
}

/* ------------------------------------- which entry is which (2026-10-09)

   The short id ("…0f28") beside each computer's name in the device list,
   matching the one in its box, and a left-over entry marked in the list. */

.ups-short-id {
  font-family: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;
  font-weight: 600;
  color: var(--ink-muted);
}

.ups-table tr.is-leftover td {
  background: var(--warn-soft);
}