/* ============================================================
   ucheck — the few pieces minimal_ui doesn't ship.
   Written in the kit's idiom: every value comes from a --mui-*
   token, so light/dark and any re-theme follow automatically.
   Prefixed uc- so nothing collides with mui- classes.

   Contents
     0. hidden helper
     1. status colours (one source of truth for all four states)
     2. watch card — status rail, title button, thumbnail
     3. negative badge (mui ships pos/warn, not neg)
     4. status dots — footer legend + live connection indicator
     5. price row + price history chart (no line chart in the kit)
     6. narrow screens (the kit ships no breakpoints)
   ============================================================ */

/* --- 0. hidden ------------------------------------------------
   base.css has no [hidden] rule, and display:flex/grid on an
   element beats the browser default — make it authoritative. */
[hidden] { display: none !important; }

/* --- 0b. icon glyphs the kit's subset omits -------------------
   css/icons.css ships only the glyph mappings the kit itself uses,
   but the vendored font binary holds the full Tabler set — so five
   extra class→codepoint rules cost ~200 bytes instead of the 210 KB
   full vendor/tabler/tabler-icons.min.css. Codepoints copied from it. */
.ti-radar:before         { content: "\f017"; }
.ti-plus:before          { content: "\eb0b"; }
.ti-trash:before         { content: "\eb41"; }
.ti-external-link:before { content: "\ea99"; }
.ti-lock-open:before     { content: "\eae1"; }

/* --- 1. status colours --------------------------------------- */
:root {
  --uc-available:   var(--mui-pos);
  --uc-unavailable: var(--mui-faint);
  --uc-unknown:     var(--mui-warn);
  --uc-error:       var(--mui-neg);
}

/* --- 2. watch card ------------------------------------------- */
.uc-card {
  position: relative;
  overflow: hidden;
  padding-left: calc(var(--mui-sp-4) + 3px); /* .mui-card--pad is sp-4; +3 clears the rail */
}

/* status rail on the leading edge — the kit has no edge accent */
.uc-rail {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--uc-unavailable);
}
.uc-card.is-available   .uc-rail { background: var(--uc-available); }
.uc-card.is-unavailable .uc-rail { background: var(--uc-unavailable); }
.uc-card.is-unknown     .uc-rail { background: var(--uc-unknown); }
.uc-card.is-error       .uc-rail { background: var(--uc-error); }

.uc-card__grid {
  display: flex;
  align-items: flex-start;
  gap: var(--mui-sp-4);
}
.uc-card__main { flex: 1 1 auto; min-width: 0; }

/* the label doubles as the rename affordance — a button that
   reads as a card title (.mui-panel__title sizing) */
.uc-title {
  font: inherit;
  font-size: var(--mui-fs-16);
  font-weight: 600;
  color: var(--mui-ink);
  background: none;
  border: 0;
  border-radius: var(--mui-radius-xs);
  padding: 0;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--mui-dur) var(--mui-ease);
}
.uc-title:hover { color: var(--mui-ink-2); text-decoration: underline; }
.uc-title:focus-visible { outline: 2px solid var(--mui-accent); outline-offset: 2px; }

/* product image — .mui-entity__icon is a glyph slot, not an image.
   The image is sized off the box, not by percentage max-height: a percentage
   max-height on a centred grid/flex item doesn't clamp a replaced element whose
   width is already at 100%, so the image kept its 1:1 ratio and painted over
   the card below it. width/height:100% + object-fit:contain is unambiguous
   (box-sizing is border-box kit-wide, so the padding is respected), and
   overflow:hidden makes it impossible to spill either way. */
.uc-thumb-wrap {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  padding: var(--mui-sp-2);
  overflow: hidden;
  background: var(--mui-surface-2);
  border: 1px solid var(--mui-border);
  border-radius: var(--mui-radius-sm);
}
.uc-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.uc-card__actions { flex: 0 0 auto; gap: var(--mui-sp-2); }

/* the kit's alert is a flex row (bold lead + long sentence). Ours pairs a short
   lead with a short timestamp, so let the pair wrap as a line rather than
   collapse into two squeezed columns on a phone. */
.uc-card .mui-alert { flex-wrap: wrap; align-items: baseline; row-gap: var(--mui-sp-1); }
.uc-card .mui-alert__title,
.uc-card .ba-time,
.uc-card .pba-time { white-space: nowrap; }

/* --- 3. negative badge --------------------------------------- */
.uc-badge--neg {
  background: var(--mui-neg-bg);
  color: var(--mui-neg);
  border-color: transparent;
}

/* --- 4. status dots ----------------------------------------- */
.uc-dot--available   { background: var(--uc-available); }
.uc-dot--unavailable { background: var(--uc-unavailable); }
.uc-dot--unknown     { background: var(--uc-unknown); }
.uc-dot--error       { background: var(--uc-error); }

/* live connection indicator: a .mui-dot that breathes */
.uc-live { background: var(--mui-faint); }
.uc-live.is-live {
  background: var(--mui-pos);
  animation: uc-breathe 2.4s var(--mui-ease) infinite;
}
.uc-live.is-bad { background: var(--mui-neg); }
@keyframes uc-breathe { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .uc-live.is-live { animation: none; }
}

/* --- 5. price row + history chart ---------------------------- */
.uc-price {
  margin-top: var(--mui-sp-3);
  padding-top: var(--mui-sp-3);
  border-top: 1px solid var(--mui-border);
}
.uc-price__head { flex-wrap: wrap; gap: var(--mui-sp-2) var(--mui-sp-3); }
.uc-price__now { font-size: var(--mui-fs-16); font-weight: 600; }

/* the toggle's chevron reuses .mui-panel__chevron, which rotates
   off [data-open] on an ancestor panel — drive it off the button's
   own aria-expanded instead */
.uc-price__toggle[aria-expanded="false"] .mui-panel__chevron { transform: rotate(-90deg); }

.uc-chart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--mui-sp-3);
  background: var(--mui-surface-2);
  border: 1px solid var(--mui-border);
  border-radius: var(--mui-radius-sm);
}
.uc-chart__grid { stroke: var(--mui-border-2); stroke-width: 1; }
.uc-chart__label,
.uc-chart__axis {
  fill: var(--mui-faint);
  font-family: var(--mui-mono);
  font-size: 10px;
}
.uc-chart__value {
  fill: var(--mui-ink-2);
  font-family: var(--mui-mono);
  font-size: 10px;
  font-weight: 600;
}
.uc-chart__line {
  fill: none;
  stroke: var(--mui-chart-1);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.uc-chart__area { fill: var(--mui-chart-1); opacity: 0.07; stroke: none; }
.uc-chart__dot {
  fill: var(--mui-surface);
  stroke: var(--mui-chart-1);
  stroke-width: 2;
  cursor: help;
}

/* cheaper than last time reads positive, dearer reads negative —
   same semantics as .mui-delta--pos / --neg */
.uc-price.is-down .uc-chart__line,
.uc-price.is-down .uc-chart__dot { stroke: var(--mui-pos); }
.uc-price.is-down .uc-chart__area { fill: var(--mui-pos); }
.uc-price.is-up .uc-chart__line,
.uc-price.is-up .uc-chart__dot { stroke: var(--mui-neg); }
.uc-price.is-up .uc-chart__area { fill: var(--mui-neg); }

/* --- 6. narrow screens ---------------------------------------
   components.css has no breakpoints of its own (only reduced-motion),
   so the phone layout for the topbar and the card head lives here. */

/* hide chrome that isn't worth the width on a phone */
@media (max-width: 640px) {
  .uc-hide-sm { display: none !important; }

  /* topbar becomes two rows: brand, then status + actions spread out */
  .mui-topbar {
    flex-wrap: wrap;
    row-gap: var(--mui-sp-2);
    padding: var(--mui-sp-3) var(--mui-sp-4);
  }
  .mui-topbar > :first-child { flex: 1 1 auto; min-width: 0; }
  .mui-topbar__meta { flex: 1 1 100%; justify-content: space-between; }
  .mui-topbar strong,
  .mui-topbar__meta .mui-small { white-space: nowrap; }
  .mui-topbar .mui-btn { white-space: nowrap; }

  /* keep the thumbnail beside the text — a full-width band wastes the screen */
  .uc-thumb-wrap { width: 64px; height: 64px; }
  .uc-card { padding-left: calc(var(--mui-sp-3) + 3px); }
  .uc-card__grid { gap: var(--mui-sp-3); }

  /* title row wraps so Open/Delete drop to their own full-width line
     instead of crushing the label and badge */
  .uc-card__head { flex-wrap: wrap; }
  .uc-card__head > :first-child { flex: 1 1 100%; }
  .uc-card__actions { flex: 1 1 100%; }
  .uc-card__actions .mui-btn { flex: 1 1 0; justify-content: center; }

  .uc-price__head { row-gap: var(--mui-sp-1); }

  /* two lines of title beat "UniFi 5G Back…" */
  .uc-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }

  /* the kit's 4-column spec grid squeezes "1m 43s ago" onto two lines here */
  .uc-card .mui-spec-grid { grid-template-columns: auto 1fr; }
}

/* Very narrow (≤360px): the card collapses to identity + actions only —
   thumbnail, title, status badge, Open/Delete. Description, availability
   banners, the price row/chart and the meta grid are all .uc-hide-xs and
   drop out; open the item on a wider screen to see them. */
@media (max-width: 360px) {
  .uc-hide-xs { display: none !important; }

  .uc-card { padding: var(--mui-sp-3); padding-left: calc(var(--mui-sp-3) + 3px); }
  .uc-card__grid { gap: var(--mui-sp-3); align-items: center; }
  .uc-card__head { row-gap: var(--mui-sp-2); }
  .uc-title { font-size: var(--mui-fs-14); }

  /* Buy back ~22px so a short name and its badge share one line instead of
     wrapping five pixels short: smaller thumbnail, tighter badge. Long names
     still wrap, which is correct. */
  .uc-thumb-wrap { width: 48px; height: 48px; }
  .uc-card .state-tag {
    font-size: 10px;
    padding: 1px 6px;
    letter-spacing: 0.04em;
  }
}