/* NetPrinter panel. Colours are tokens: light by default, dark when the
   system asks for it, and either one when chosen with the header switch
   (data-theme on <html>). */
:root {
  --bg: #f4f5f7; --surface: #ffffff; --text: #171c28; --muted: #515a6c;
  --line: #e7e9ee; --border: #d3d8e0; --track: #e4e7ec; --hover: #eef0f4; --field: #ffffff;
  --accent: #1f4fb8; --accent-text: #ffffff; --accent-soft: #e6edfb;
  --ok: #136c3a; --warn: #8a4f00; --bad: #b3231f; --idle: #6b7386; --on-bad: #ffffff;
  --ok-bg: #e3f3e9; --warn-bg: #fcefd6; --bad-bg: #fbe6e5;
  --level-ok: #2e9e5b; --level-low: #e0951a;
  --shadow: none; --float: 0 10px 28px rgba(16, 24, 40, .16);
  --series-mono: #22252b; --series-color: #0a9bd0; /* black prints in black; colour in cyan */
  color-scheme: light;
  --cyan: #10a6d8; --magenta: #d6278a; --yellow: #e8c21c;
  --radius: 10px; --control: 2.5rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg: #12151b; --surface: #1b1f27; --text: #e6e9ef; --muted: #a3abba;
  --line: #2c323d; --border: #3a4250; --track: #2f3541; --hover: #252b36; --field: #12151b;
  --accent: #7ba1f2; --accent-text: #0d1220; --accent-soft: #1f2b45;
  --ok: #4cc283; --warn: #e3a440; --bad: #f47c7c; --idle: #8b93a5; --on-bad: #2a0b0b;
  --ok-bg: #173325; --warn-bg: #3a2c12; --bad-bg: #3d1a1a;
  --level-ok: #4cc283; --level-low: #e3a440;
  --float: 0 10px 28px rgba(0, 0, 0, .5);
  --series-mono: #d3d7de; --series-color: #2bbcec;
  color-scheme: dark;
  }
  :root:not([data-theme="light"]) .tools a.theme-light { display: inline-flex; }
  :root:not([data-theme="light"]) .tools a.theme-dark { display: none; }
}
:root[data-theme="dark"] {
  --bg: #12151b; --surface: #1b1f27; --text: #e6e9ef; --muted: #a3abba;
  --line: #2c323d; --border: #3a4250; --track: #2f3541; --hover: #252b36; --field: #12151b;
  --accent: #7ba1f2; --accent-text: #0d1220; --accent-soft: #1f2b45;
  --ok: #4cc283; --warn: #e3a440; --bad: #f47c7c; --idle: #8b93a5; --on-bad: #2a0b0b;
  --ok-bg: #173325; --warn-bg: #3a2c12; --bad-bg: #3d1a1a;
  --level-ok: #4cc283; --level-low: #e3a440;
  --float: 0 10px 28px rgba(0, 0, 0, .5);
  --series-mono: #d3d7de; --series-color: #2bbcec;
  color-scheme: dark;
}
.tools a.theme-light { display: none; }
:root[data-theme="dark"] .tools a.theme-light { display: inline-flex; }
:root[data-theme="dark"] .tools a.theme-dark { display: none; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); }
h1 { font-size: 1.55rem; line-height: 1.2; letter-spacing: -.015em; margin: 0 0 .25rem; }
h2 { font-size: 1.05rem; line-height: 1.3; margin: 0 0 .7rem; }
h3 { font-size: .95rem; margin: 1rem 0 .4rem; }
.muted { color: var(--muted); }
.small { font-size: .85em; }
code { font-size: .9em; word-break: break-all; }

/* Header: brand, menu and tools in one row; a dropdown under 760px. */
.sprite { display: none; }
.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .5rem 1.5rem;
  padding: .55rem 16px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); }
.brand { font-weight: 700; font-size: 1.15rem; text-decoration: none; color: var(--text); padding: .35rem 0; }
.count { display: inline-block; min-width: 1.35rem; padding: 0 .35rem; border-radius: 999px; background: var(--bad);
  color: var(--on-bad); font-size: .75rem; font-weight: 700; text-align: center; line-height: 1.35rem; margin-left: .2rem; }
.tabs { display: flex; gap: .25rem; }
.tabs a { padding: .4rem .8rem; border-radius: 8px; text-decoration: none; color: var(--muted); }
.tabs a[aria-current] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.alerts tr.unread td:first-child { font-weight: 600; }
.alerts tr.unread td:first-child::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--accent); margin-right: .45rem; vertical-align: .1rem; }
.alerts tr.read td { color: var(--muted); }
.readall { margin: 0 0 .8rem; }
.license code { font-size: 1.35rem; letter-spacing: .06em; user-select: all; }
tr.system td, tr.system td a { color: var(--muted); }
tr.todo td { background: var(--warn-bg); }
.danger-link { color: var(--bad) !important; }
form.pw input { width: 11rem; display: inline-block; }
.clients .name a { font-weight: 600; }
.brand-sub { font-weight: 600; color: var(--accent); }
.brand { min-height: 2.5rem; display: inline-flex; align-items: center; gap: .3em; }
.menu { display: flex; align-items: center; gap: 1rem; flex: 1; min-width: 0; }
.menu nav { display: flex; gap: .25rem; flex: 1; }
.menu a, .menu button.link { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .7rem;
  border-radius: 8px; text-decoration: none; color: var(--muted); font-size: .95rem; white-space: nowrap; }
.menu a:hover, .menu button.link:hover { background: var(--hover); color: var(--text); }
.menu a[aria-current] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tools { display: flex; align-items: center; gap: .25rem; }
  background: var(--warn-bg); color: var(--warn); font-size: .8rem; font-weight: 600; }
.mobile-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.menu-toggle { display: none; margin-left: auto; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; background: none; color: var(--text); padding: 0;
  border-radius: 8px; border: 1px solid var(--border); }
.menu-toggle .icon { width: 1.4rem; height: 1.4rem; vertical-align: middle; }
.menu-toggle .close-icon { display: none; }

@media (max-width: 900px) {
  .top { flex-wrap: wrap; }
  .menu-toggle { display: inline-flex; }
  .mobile-only { position: static; width: auto; height: auto; clip-path: none; }
  .menu { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: .25rem; padding: .25rem 0 .5rem; }
  .menu nav { flex-direction: column; gap: .15rem; }
  .menu a, .menu button.link { padding: .8rem .75rem; font-size: 1.05rem; width: 100%; }
  .tools { flex-direction: column; align-items: stretch; gap: .15rem; border-top: 1px solid var(--line); padding-top: .4rem; }
  .tools form { display: block; }
  .user-menu > summary { width: 100%; box-sizing: border-box; padding: .8rem .75rem; }
  .user-menu-list { position: static; box-shadow: none; border: 0; padding: .15rem 0 0; min-width: 0; }
  /* With JavaScript the menu folds behind the button; without it, it
     stays open so it is never out of reach. */
  .js .top:not(.open) .menu { display: none; }
  .js .top.open .menu-toggle .open-icon { display: none; }
  .js .top.open .menu-toggle .close-icon { display: inline; }
}

/* Central's user menu: who is signed in, the preferences and signing out. */
.user-menu { position: relative; }
.user-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .7rem;
  border-radius: 8px; border: 1px solid var(--border); cursor: pointer; color: var(--text); font-size: .95rem; white-space: nowrap; }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover, .user-menu[open] > summary { background: var(--hover); }
/* Who is signed in: their name, and a filled mark for technicians. */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--hover); color: var(--muted); flex: none; }
.avatar .icon { width: 1rem; height: 1rem; vertical-align: 0; }
.avatar.tech { background: var(--accent); color: var(--accent-text); }
.user-menu > summary { padding-left: .35rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.user-menu > summary.tech-on { background: var(--warn-bg); color: var(--warn); border-color: transparent; font-weight: 600; }
.spacer { flex: 1; }
.user-menu-list { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 20; min-width: 230px; display: flex; flex-direction: column;
  padding: .35rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--float); }
.user-menu-list a, .user-menu-list button.link { width: 100%; justify-content: flex-start; box-sizing: border-box; }
.user-menu-list form { display: block; margin: 0; }
.user-menu-list hr { border: 0; border-top: 1px solid var(--line); margin: .3rem 0; width: 100%; }
.user-menu .mobile-only { position: static; width: auto; height: auto; clip-path: none; }

.page-title { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; }

main { max-width: 1180px; margin: 0 auto; padding: 1.25rem 16px 2rem; }
footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 1rem 16px 2rem; }

.flash { background: var(--ok-bg); border: 1px solid var(--ok); border-left-width: 4px; border-radius: var(--radius); padding: .6rem .9rem; }
.empty { color: var(--muted); padding: 2rem 0; text-align: center; }

.summary { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-bottom: 1rem; color: var(--muted); }
.summary strong { color: var(--text); }
.dot::before { content: ""; display: inline-block; width: .6rem; height: .6rem; border-radius: 50%;
  margin-right: .35rem; background: var(--idle); vertical-align: .05rem; }
.dot.online::before { background: var(--ok); }
.dot.offline::before { background: var(--idle); }
.dot.error::before { background: var(--bad); }
.warn { color: var(--warn); }
.busy { color: var(--accent); }

.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .9rem 1rem; color: inherit; text-decoration: none; min-width: 0;
  transition: border-color .15s, box-shadow .15s; }
.card:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.card.problem { border-left: 4px solid var(--level-low); }
.card.problem.why-error, .card.problem.why-alert { border-left-color: var(--bad); }
.card.problem.why-offline { border-left-color: var(--idle); }
.sub { color: var(--muted); margin: 0 0 .5rem; font-size: .9rem; overflow-wrap: anywhere; }

.state { margin: 0; font-weight: 600; font-size: .9rem; }
.state .led { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; margin-right: .4rem;
  background: var(--idle); vertical-align: .02rem; }
.state.online .led { background: var(--ok); }
.state.error .led { background: var(--bad); }
.state.error { color: var(--bad); }
.state .muted { font-weight: 400; }

.notices { display: grid; gap: .5rem; margin-bottom: 16px; }
.notices:empty { display: none; }
.notices .alert { margin: 0; padding: .6rem .8rem; }
.alert { margin: .3rem 0; padding: .3rem .55rem; border-radius: 6px; font-size: .9rem;
  background: var(--warn-bg); color: var(--text); border-left: 3px solid var(--warn); }
.alert.critical { background: var(--bad-bg); border-left-color: var(--bad); }
.alert.info { background: var(--ok-bg); border-left-color: var(--ok); }
span.alert { display: inline-block; }

.levels { list-style: none; padding: 0; margin: .6rem 0; display: grid; gap: .3rem; }
.levels li { display: grid; grid-template-columns: .8rem 1fr 4.2rem auto; gap: .5rem; align-items: center; }
.sw { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; background: var(--idle);
  margin-right: .4rem; vertical-align: -.05rem; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.levels .sw { margin: 0; }
.sw.black { background: #111; box-shadow: inset 0 0 0 1px var(--muted); } .sw.cyan { background: var(--cyan); }
.sw.magenta { background: var(--magenta); } .sw.yellow { background: var(--yellow); }
.bar { display: block; height: .6rem; border-radius: 4px; background: var(--track); overflow: hidden; min-width: 60px; }
.bar.unknown { background: repeating-linear-gradient(45deg, var(--border), var(--border) 4px, transparent 4px, transparent 8px); }
.fill { display: block; height: 100%; background: var(--level-ok); }
.fill.low { background: var(--level-low); }
.fill.empty { background: var(--bad); }
.pct { font-variant-numeric: tabular-nums; font-size: .9rem; text-align: right; }
.tag { font-size: .8rem; padding: .05rem .4rem; border-radius: 4px; background: var(--bad-bg); color: var(--bad);
  white-space: nowrap; }
.counts { display: flex; gap: 1.2rem; margin: .4rem 0 0; color: var(--muted); font-size: .9rem; }
.counts strong { color: var(--text); font-variant-numeric: tabular-nums; }

.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ref { display: inline-block; text-decoration: none; font-size: max(.8em, 12px); font-weight: 700; letter-spacing: .02em; padding: .15em .45em;
  margin-right: .45em; border-radius: 6px; background: var(--accent-soft); color: var(--accent);
  font-variant-numeric: tabular-nums; vertical-align: .08em; }
.idgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1rem; }
.idgrid div { min-width: 0; }
.idgrid .wide { grid-column: 1 / -1; }
.idgrid dt { font-size: .8rem; }
.idgrid dd { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; margin-bottom: 16px; min-width: 0; }
.panel.tech { border-color: var(--warn); }
.panel.narrow { max-width: 420px; margin: 3rem auto; padding: 1.5rem; }

dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0; }
dt { color: var(--muted); }
dd { margin: 0; overflow-wrap: anywhere; }
.counters dd { font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.counters dt { align-self: center; }

table { width: 100%; border-collapse: collapse; }
.supplies th, .supplies td, .list th, .list td { padding: .6rem .5rem; border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: middle; font-weight: normal; }
.list thead th { color: var(--muted); font-size: .85rem; font-weight: 600; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.barcell { width: 30%; }
.supplies thead th { color: var(--muted); font-size: .85rem; font-weight: 600; }
.date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.stale { margin: .3rem 0 .4rem; font-size: .85rem; color: var(--warn); }
.list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  border-collapse: separate; border-spacing: 0; overflow: hidden; }
.list td a:not(.ref) { text-decoration: none; }
.list td a:not(.ref):hover { text-decoration: underline; }
.alerts td a:not(.ref), .billing td:nth-child(2) a, .counters-list td a { color: var(--text); font-weight: 500; }
.list thead th { background: var(--hover); }
.list th:first-child, .list td:first-child { padding-left: .8rem; }
.list th:last-child, .list td:last-child { padding-right: .8rem; }
.list tbody tr:last-child td { border-bottom: 0; }
.list tbody tr:hover td { background: var(--hover); }
.supplies tr:last-child th, .supplies tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) {
  .list, .list tbody, .list tr, .list td { display: block; }
  .list thead { display: none; }
  .list tr { border-bottom: 1px solid var(--line); padding: .4rem 0; }
  .list td { border: 0; padding: .15rem .4rem; text-align: left !important; }
  .list td[data-label] { display: flex; justify-content: space-between; gap: 1rem; }
  .list td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: .85rem; }
  .list td.name { padding-bottom: .35rem; }
  .barcell { width: auto; }
  /* Supplies: one block per supply - name, level bar, then labelled figures. */
  .supplies, .supplies tbody, .supplies th, .supplies td { display: block; }
  .supplies thead { display: none; }
  .supplies tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .15rem .75rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
  .supplies th, .supplies td { border: 0; padding: .15rem 0; }
  .supplies th { grid-column: 1 / -1; }
  .supplies td[data-label] { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 1rem; }
  .supplies td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: .85rem; }
  .supplies td:last-child:empty { display: none; }
  .dates label { flex-direction: column; align-items: stretch; gap: .25rem; }
  .head { flex-direction: column; align-items: stretch; }
  .head form button, .month .button { width: 100%; text-align: center; }
  .month { flex-direction: column; align-items: stretch; }
  .month label { display: grid; gap: .25rem; }
  .month select { width: 100%; }
  .grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .history time { display: block; min-width: 0; }
  main { padding-top: .75rem; }
  h1 { font-size: 1.3rem; }
}

.history { list-style: none; padding: 0; margin: 0; }
.history li { padding: .35rem 0; border-bottom: 1px solid var(--line); }
.history time { color: var(--muted); display: inline-block; min-width: 7.5rem; font-variant-numeric: tabular-nums; }

form.inline { display: inline; }
.edit { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin-top: 1rem; }
.edit label { display: grid; gap: .2rem; flex: 1 1 200px; color: var(--muted); font-size: .9rem; }
.settings { display: grid; gap: .9rem; max-width: 560px; margin-bottom: 1rem; }
.settings > button { justify-self: start; min-width: 8rem; }
.settings label { display: grid; gap: .25rem; font-weight: 600; }
.settings label.check { display: flex; flex-wrap: wrap; gap: .2rem .5rem; align-items: center; font-weight: 600; }
.settings label.check .hint { flex-basis: 100%; padding-left: 1.55rem; }
.share code { font-size: 1.05rem; user-select: all; }
.hint { font-weight: 400; color: var(--muted); font-size: .85rem; }
.danger { margin-top: 1rem; }
.danger .link { color: var(--bad); }
.month { display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: center; }
.month label { display: inline-flex; align-items: center; gap: .45rem; }

/* Controls share one height. They do not inherit the weight of their
   label, and a select draws its own arrow: the native one ignores padding. */
input, select, textarea { font: inherit; font-weight: 400; color: var(--text); background-color: var(--field); border: 1px solid var(--border);
  border-radius: 6px; padding: .45rem .6rem; width: 100%; max-width: 100%; }
input:not([type=checkbox]):not([type=radio]), select { height: var(--control); line-height: 1.2; }
textarea { resize: vertical; }
select { width: auto; appearance: none; -webkit-appearance: none; padding-right: 1.9rem; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8597' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .55rem center; background-size: 1rem; }
input[type=checkbox], input[type=radio] { width: 1.05rem; height: 1.05rem; flex: none; accent-color: var(--accent); }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input::placeholder, textarea::placeholder { color: var(--idle); opacity: 1; }
button, .button { font: inherit; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: var(--control);
  border: 1px solid transparent; border-radius: 6px; padding: .4rem .95rem;
  background: var(--accent); color: var(--accent-text); cursor: pointer; text-decoration: none; white-space: nowrap; }
button:hover, .button:hover { filter: brightness(1.08); }
button.secondary, .button.secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
button.secondary:hover, .button.secondary:hover { background: var(--hover); filter: none; }
button.link { display: inline-flex; min-height: 1.75rem; align-items: center; gap: .35rem; background: none; color: var(--accent); padding: 0; border: 0; font-size: inherit; font-weight: 400; }
form.stack { display: grid; gap: .6rem; justify-items: start; }
form.stack select { width: 100%; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Monthly chart: stacked columns, thin marks, recessive grid. */
.chart { margin: 0; }
.chart figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.legend { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; font-size: .85rem; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: .4rem; }
.legend .key { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; }
.key.s-mono { background: var(--series-mono); } .key.s-color { background: var(--series-color); }
.plot { width: 100%; height: auto; display: block; overflow: visible; }
.plot .s-mono { fill: var(--series-mono); } .plot .s-color { fill: var(--series-color); }
.plot .grid { stroke: var(--line); stroke-width: 1; }
.plot .axis { stroke: var(--muted); stroke-width: 1; opacity: .5; }
.plot .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.plot .hit { fill: transparent; }
.plot .col { outline: none; cursor: default; }
.plot .col:hover .hit, .plot .col:focus-visible .hit { fill: var(--accent-soft); }
.plot .col:focus-visible .hit { stroke: var(--accent); stroke-width: 1.5; }
.chart-table { margin-top: .6rem; font-size: .9rem; }
.chart-table summary { cursor: pointer; color: var(--accent); }
.chart-tip { position: fixed; z-index: 30; pointer-events: none; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: .45rem .6rem; font-size: .85rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.18); min-width: 9rem; }
.chart-tip .tip-title { color: var(--muted); margin-bottom: .2rem; }
.chart-tip .tip-row { display: flex; align-items: center; gap: .45rem; }
.chart-tip .tip-row strong { font-variant-numeric: tabular-nums; }
.chart-tip .line-key { width: .8rem; height: 2px; border-radius: 1px; display: inline-block; }
.edit-dates { margin-top: .8rem; }
.edit-dates summary { cursor: pointer; color: var(--accent); display: inline-flex; align-items: center; gap: .3rem; min-height: 1.75rem; }
.minor-alerts summary { cursor: pointer; min-height: 1.75rem; }
.dates { display: grid; gap: .5rem; max-width: 560px; margin-top: .5rem; }
.dates label { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.dates input { width: auto; }
.dates button { justify-self: start; }

@media (max-width: 640px) {
  /* The chart scales with its viewBox: axis text is sized in viewBox
     units, so on a phone it must be larger to read at ~11px. */
  .plot .tick { font-size: 22px; }
}

/* Bar widths: the CSP forbids inline styles. */
.w0{width:0%}
.w5{width:5%}
.w10{width:10%}
.w15{width:15%}
.w20{width:20%}
.w25{width:25%}
.w30{width:30%}
.w35{width:35%}
.w40{width:40%}
.w45{width:45%}
.w50{width:50%}
.w55{width:55%}
.w60{width:60%}
.w65{width:65%}
.w70{width:70%}
.w75{width:75%}
.w80{width:80%}
.w85{width:85%}
.w90{width:90%}
.w95{width:95%}
.w100{width:100%}

/* Chart period switch. */
.tabs.ranges { flex-wrap: wrap; margin: -.2rem 0 .7rem; }
.tabs.ranges a { padding: .3rem .7rem; font-size: .85rem; border: 1px solid var(--border); border-radius: 999px; }
.tabs.ranges a:hover { background: var(--hover); color: var(--text); }
.tabs.ranges a[aria-current] { border-color: var(--accent); }

/* Users: one card each, editing folds away. */
.users .user-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.users h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; }
.users h2 .icon { color: var(--accent); }
.users .sub { margin: .25rem 0 0; }
.users .user.disabled { background: var(--hover); }
.users .edit-dates .grid { margin-top: .8rem; align-items: start; }
.tag.me { background: var(--accent-soft); color: var(--accent); }

/* Client page: its name, then its tabs. */
.client-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .6rem; }
.client-head .page-title { margin: 0; }

/* Tabs with an icon: alerts and settings. */
.alert-tabs, .settings-tabs { flex-wrap: wrap; margin: .2rem 0 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
.alert-tabs a, .settings-tabs a { display: inline-flex; align-items: center; gap: .4rem; }
.alerts .ref-cell { white-space: nowrap; }
.alerts .ref-cell .ref { text-decoration: none; margin-right: 0; }
.alerts .what .bar { margin-top: .3rem; max-width: 14rem; }

/* Printer header: Edit and Read now side by side. */
.head-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
@media (max-width: 640px) { .head-actions { flex-direction: column; align-items: stretch; } .head-actions .button, .head-actions button { width: 100%; text-align: center; } }

.invoice tr.total td { border-top: 2px solid var(--border); }

/* Sites: printers grouped under their site. */
.site-head { display: flex; align-items: center; gap: .45rem; margin: 1.2rem 0 .6rem; font-size: 1.1rem; }
.site-head .icon { color: var(--accent); }
.agent-site { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; margin-top: .4rem; }
.agent-site label { display: grid; gap: .2rem; color: var(--muted); }
.agent-site select { width: auto; }
.coverage { color: var(--muted); font-size: .9rem; margin: .4rem 0 0; }
.coverage strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* Remote orders of an agent. */
.remote-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; }
.remote-settings h3 { margin: .4rem 0 0; font-size: .95rem; }
.ok-text { color: var(--ok); font-weight: 600; }
.commands time { min-width: 6rem; }

/* Page tabs (printer, client): one subject per tab. */
.page-tabs { flex-wrap: wrap; margin: .2rem 0 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
.page-tabs a { display: inline-flex; align-items: center; gap: .4rem; }
.narrowish { max-width: 720px; }

/* Contract and billing. */
.contract-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; align-items: center; }
.kv { grid-template-columns: max-content 1fr; }
.amount { font-size: 1.8rem; font-weight: 700; margin: .1rem 0; font-variant-numeric: tabular-nums; }
.estimate { border-left: 3px solid var(--accent); padding-left: 1rem; }
.billing { margin-bottom: 1rem; }

/* Contract form: one block per subject. */
.contract-form { display: grid; gap: 1rem; }
.contract-form fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem 1rem 1rem; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem 1rem; align-items: end; }
.contract-form legend { font-weight: 700; padding: 0 .4rem; }
.contract-form label { display: grid; gap: .25rem; font-weight: 600; }
.contract-form .unit { font-weight: 400; color: var(--muted); font-size: .85rem; }
.contract-form .notes { max-width: 100%; }
/* Billing: the tables of the reports, with their controls above. */
.billing-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: .6rem; }
.billing-tools .tabs.ranges { margin: 0; }
.billing-tools .button { margin-left: auto; }
.billing th.group { text-align: center; border-top: 3px solid var(--series-mono); }
.billing th.group.color { border-top-color: var(--series-color); }
.billing th.group + th.group { border-left: 6px solid var(--surface); }
.billing tr.total td { background: var(--hover); border-top: 2px solid var(--border); }
.billing-sum { max-width: 520px; margin-bottom: 1rem; }
.billing-sum tr.total td { background: var(--hover); }
.logo-preview { margin: .4rem 0 .6rem; padding: 1rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); display: inline-block; }
.logo-preview img { display: block; max-width: 100%; height: auto; }
.logo-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; margin-bottom: .6rem; }
.logo-form label { display: grid; gap: .25rem; font-weight: 600; }
.logo-form input[type=file] { height: auto; padding: .35rem; }
@media (max-width: 640px) { .billing-tools .button { margin-left: 0; width: 100%; } }
.tag.usb { background: var(--accent-soft); color: var(--accent); vertical-align: .2em; }
.usb-note { display: flex; align-items: center; gap: .4rem; }

/* Printers as a table: the switch at the end of the client's tabs. */
.page-tabs .layout-toggle { margin-left: auto; color: var(--muted); }
.page-tabs .layout-toggle:hover { background: var(--hover); color: var(--text); }
.printers { margin-bottom: 1.2rem; }
.printers .state { margin: 0; font-size: .85rem; white-space: nowrap; }
.printers .state .muted { display: none; } /* "since": on the printer's page */
/* Fixed columns: the tables of every site line up. */
.printers { table-layout: fixed; }
.printers th:nth-child(1) { width: 30%; }
.printers th:nth-child(2) { width: 22%; }
.printers th:nth-child(3) { width: 26%; }
.printers th:nth-child(4), .printers th:nth-child(5) { width: 11%; }
.printers td.name { overflow-wrap: anywhere; }
.printers td.name a { color: inherit; text-decoration: none; font-weight: 600; }
.printers td.name a:hover { color: var(--accent); }
.printers .levels.compact { margin: 0; gap: .2rem; }
.printers .levels.compact li { grid-template-columns: .7rem minmax(60px, 1fr) 3rem; gap: .4rem; font-size: .85rem; }
.printers .levels.compact .bar { height: .45rem; }
.printers tr.problem td:first-child { box-shadow: inset 3px 0 0 var(--level-low); }
.printers tr.problem.why-offline td:first-child { box-shadow: inset 3px 0 0 var(--idle); }
.printers tr.problem.why-error td:first-child, .printers tr.problem.why-alert td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
@media (max-width: 640px) {
  .printers td.barcell { padding: .3rem .4rem; }
}

/* Overview figures: each leads to what needs doing; what is at zero steps
   back so that what is not stands out. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: .25rem 0 1.25rem; }
.kpi { display: flex; flex-direction: column; gap: .1rem; padding: .85rem 1rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); text-decoration: none; }
a.kpi:hover { background: var(--hover); }
.kpi-n { font-size: 1.9rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-l { color: var(--muted); font-size: .9rem; }
.kpi.bad { border-color: var(--bad); background: var(--bad-bg); } .kpi.bad .kpi-n { color: var(--bad); }
.kpi.warn { border-color: var(--level-low); background: var(--warn-bg); } .kpi.warn .kpi-n { color: var(--warn); }
a.kpi.bad:hover { background: var(--bad-bg); } a.kpi.warn:hover { background: var(--warn-bg); }
.kpi.zero .kpi-n { color: var(--muted); font-weight: 500; }

.list-tools { flex-wrap: wrap; justify-content: flex-end; gap: .5rem; align-items: center; margin-bottom: .9rem; }
.search { position: relative; display: flex; align-items: center; width: min(300px, 100%); }
.search .icon { position: absolute; left: .7rem; color: var(--muted); pointer-events: none; }
.search input { width: 100%; padding-left: 2.2rem; }
.js-only { display: none !important; }
.js .js-only { display: flex !important; }

/* "Nuevo cliente": a button that opens its small form below. */
.newclient { position: relative; }
.newclient > summary { list-style: none; cursor: pointer; }
.newclient > summary::-webkit-details-marker { display: none; }
.newclient .popover { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 15; min-width: 300px; padding: 1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--float); }

/* Where one is: Clientes › client › printer. */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 .6rem; font-size: .92rem; color: var(--muted); }
.crumbs a { text-decoration: none; padding: .15rem 0; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: var(--text); font-weight: 600; }

/* The irreversible actions, apart at the end. */
.danger-zone { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); }
.danger-zone h2 { color: var(--bad); }
button.danger-button { background: transparent; color: var(--bad); border: 1px solid var(--bad); }
button.danger-button:hover { background: var(--bad-bg); }
.search .mobile-only { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; clip-path: inset(50%) !important; }
@media (max-width: 640px) {
  .list-tools { justify-content: stretch; }
  .search { width: 100%; }
  .newclient .popover { left: 0; right: auto; min-width: 0; width: calc(100vw - 32px); box-sizing: border-box; }
}
@media (max-width: 640px) {
  .page-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .page-tabs::-webkit-scrollbar { display: none; }
  .page-tabs a { flex: 0 0 auto; white-space: nowrap; }
}

/* Printer state as a coloured label, the same on cards, rows and pages. */
.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .12rem .55rem; border-radius: 999px; font-size: .8rem;
  font-weight: 600; white-space: nowrap; background: var(--hover); color: var(--muted); }
.pill::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.pill.online { background: var(--ok-bg); color: var(--ok); }
.pill.offline { background: var(--hover); color: var(--muted); }
.pill.error { background: var(--bad-bg); color: var(--bad); }
.pill.stopped { background: var(--warn-bg); color: var(--warn); }

/* Card: number and state on top, the model, why it needs attention, the
   levels, the counters at the foot. */
.card-top { display: flex; align-items: center; gap: .5rem; min-height: 1.6rem; }
.card-top .pill { margin-left: auto; }
.card-top .ref { margin: 0; }
.card h2 { margin: .4rem 0 .15rem; font-size: 1.05rem; overflow-wrap: anywhere; }
.card .levels { margin: .55rem 0 .3rem; }
.card .counts { margin-top: auto; padding-top: .55rem; border-top: 1px solid var(--line); flex-wrap: wrap; gap: .3rem 1.2rem; }
.card .counts .coverage { margin-left: auto; }
.why { display: flex; align-items: flex-start; gap: .4rem; margin: .35rem 0 .2rem; font-size: .88rem; font-weight: 600; color: var(--warn); }
.why .icon { flex: none; width: 1rem; height: 1rem; margin-top: .1rem; }
.problem.why-offline .why, .problem.why-error .why, .problem.why-alert .why { color: var(--bad); }
.problem.why-offline .why { color: var(--muted); }
.printers .state-cell { white-space: normal; }
.printers .state-cell .why { display: block; margin: .25rem 0 0; font-size: .8rem; font-weight: 500; }
.printers tr[data-href] { cursor: pointer; }
.printers tbody tr:hover td { background: var(--hover); }

/* Filters: chips beside the search, with what each one holds. */
.filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-right: auto; }
.chip { font-weight: 500; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: .3rem .85rem; }
.chip span { color: var(--muted); font-variant-numeric: tabular-nums; }
.chip:hover { background: var(--hover); filter: none; }
.chip.bad span { color: var(--bad); font-weight: 700; } .chip.warn span { color: var(--warn); font-weight: 700; }
.chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.chip[aria-pressed="true"] span { color: inherit; }
.list-tools .layout-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--control); height: var(--control); border-radius: 8px; border: 1px solid var(--border); color: var(--muted); background: var(--surface); }
.list-tools .layout-toggle:hover { background: var(--hover); color: var(--text); }
.site-group + .site-group { margin-top: .4rem; }
.state-line { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .35rem 0 0; }
.head .sub { margin: .15rem 0 0; }
.head .ref { font-size: .7em; margin: 0; }
.list-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .9rem; }
.list-head .hint { margin: 0; }
.newclient .popover.settings { width: 360px; max-width: calc(100vw - 32px); box-sizing: border-box; margin: 0; }
@media (max-width: 640px) {
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpi { padding: .6rem .75rem; }
  .kpi-n { font-size: 1.4rem; }
  .kpi-l { font-size: .85rem; line-height: 1.25; }
  .kpi-s { display: none; }
  /* Thumbs: 44px targets, and 16px text so iOS does not zoom into fields. */
  :root { --control: 2.75rem; }
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 1rem; }
  select { width: 100%; }
  .tabs a, .page-tabs a { min-height: var(--control); display: inline-flex; align-items: center; }
  .tabs.ranges a { min-height: 2.5rem; }
  .list td a, button.link, .crumbs a, .small a { display: inline-flex; align-items: center; min-height: 2.5rem; }
  .list td a.ref { min-height: 0; padding: .55em .7em; }
  .edit-dates summary, .minor-alerts summary, .chart-table summary { min-height: var(--control); display: inline-flex; align-items: center; }
  .brand { min-height: var(--control); }
  .list-tools .filters { flex-wrap: nowrap; overflow-x: auto; margin: 0; width: 100%; scrollbar-width: none; }
  .chip { flex: none; }
  .month label { display: grid; }
  .printers .state-cell { flex-wrap: wrap; }
  .printers .state-cell .why { flex-basis: 100%; text-align: right; }
}