/* Status display shared by the customer report page and the printout
   (templates/report/_status.html). Sizes are in em so each page sets the scale.
   Colour sits on the icon and the bar; numbers and words stay in normal ink. */

/* Brand: the shop's heading typeface (as on its website) and colours. --brand comes from
   Admin → Shop settings (set in a <style> tag by the page); --ink is the logo's black. */
@font-face { font-family: "Raleway"; font-weight: 800; src: url("../fonts/Raleway-800.ttf") format("truetype"); }
:root { --ink: #14171c; }
.brand-font {
  font-family: "Raleway", system-ui, "Segoe UI", Arial, sans-serif; font-weight: 800;
  font-variant-numeric: lining-nums; text-transform: uppercase; letter-spacing: .04em;
}

.hv-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.hv-green { color: #1e7b34; }
.hv-yellow, .hv-soon { color: #e2a500; }
.hv-red, .hv-urgent { color: #b3261e; }

.hv-badge {
  display: inline-flex; align-items: center; gap: .4em; padding: .2em .65em .2em .4em;
  border-radius: 999px; border: 1px solid transparent;
  font-size: .82em; font-weight: 700; line-height: 1.3; color: #1c1f23; white-space: nowrap;
}
.hv-bg-green { background: #e6f4e9; border-color: #b9dfc1; }
.hv-bg-yellow { background: #fff4d1; border-color: #f0d98a; }
.hv-bg-red { background: #fbe6e5; border-color: #f0b9b6; }

.hv-health {
  margin: 1em 0 1.5em; padding: 1em; border: 1px solid #d6d9de; border-radius: 10px; background: #fff;
  break-inside: avoid;
}
.hv-health-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; margin-bottom: .7em; }
.hv-health-head h2 {
  margin: 0; padding: 0; border: 0; font-size: 1em; color: var(--ink);
  font-family: "Raleway", system-ui, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
}
.hv-health-head span { color: #5f6670; font-size: .85em; }

/* Thin bar, rounded ends, a small gap between segments. */
.hv-bar { display: flex; gap: 2px; height: .6em; margin-bottom: .9em; }
.hv-seg { flex: 1 0 .6em; background: currentColor; }
.hv-seg:first-child { border-radius: 4px 0 0 4px; }
.hv-seg:last-child { border-radius: 0 4px 4px 0; }
.hv-seg:only-child { border-radius: 4px; }

.hv-tiles { display: flex; gap: .5em; }
.hv-tile {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: .5em;
  padding: .6em .7em; border: 1px solid #e3e5e9; border-radius: 8px;
  color: #1c1f23; text-decoration: none;
}
.hv-tile .hv-icon { width: 1.9em; height: 1.9em; }
.hv-tile strong { display: block; font-size: 1.6em; line-height: 1.05; }
.hv-tile span { display: block; font-size: .8em; color: #5f6670; line-height: 1.2; }
a.hv-tile:hover, a.hv-tile:focus-visible { border-color: #9aa1ab; }

@media (max-width: 480px) {
  /* Narrow phones: icon above the number, so long labels have room. */
  .hv-tile { flex-direction: column; text-align: center; gap: .15em; padding: .6em .3em; }
}