/* --- maintenance --- */
.maint-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px; margin-bottom: 18px; }
.maint-card {
  display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
  font: inherit; padding: 13px 14px; border-radius: 13px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  transition: border-color .15s ease, transform .12s ease;
}
.maint-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.maint-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.mc-ico { font-size: 17px; }
.mc-n { font-size: 26px; font-weight: 800; line-height: 1.1; }
.maint-card.ok .mc-n { color: var(--green-dark); }
.maint-card.warn .mc-n { color: var(--amber); }
.maint-card.bad .mc-n { color: var(--red); }
/* optional checks: a count, not a warning */
.maint-card.opt .mc-n { color: var(--text-soft); }
.mc-opt {
  font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 999px; margin-left: 4px; white-space: nowrap;
  background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue);
}
.mc-label { font-size: 12.5px; font-weight: 650; line-height: 1.3; }
.mc-scope { font-size: 11px; color: var(--text-muted); }
.maint-list { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 4px 14px 12px; }
.maint-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; padding: 12px 0 8px; border-bottom: 1px solid var(--border); }
.maint-head b { font-size: 14.5px; }
.maint-head span { flex: 1; font-size: 12px; color: var(--text-muted); }
.maint-hint { font-size: 12.5px; color: var(--text-muted); }
.maint-list .prow:last-child { border-bottom: none; }
.maint-head .mh-btns { display: flex; gap: 8px; }
/* "Print barcodes" is live only once something is ticked, and has to look it —
   .tool.big carries a disabled style already, the plain .tool doesn't */
.maint-head .mh-btns .tool[disabled] { opacity: .45; cursor: not-allowed; }
/* the inline fix-it line under each maintenance row */
.medit {
  flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 6px; padding-top: 8px; padding-left: 56px; border-top: 1px dashed var(--border);
}
.medit .me-label { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.medit .me-note { font-size: 11.5px; color: var(--text-muted); }
.medit input, .medit select {
  padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 8px;
  font-size: 13px; background: var(--surface); color: var(--text); outline: none;
  transition: border-color .15s ease;
}
.medit input:focus, .medit select:focus { border-color: var(--accent); }
.medit input.mnum { width: 88px; text-align: right; }
.medit input.mwide { flex: 1; min-width: 160px; }
.medit .tool { padding: 6px 10px; font-size: 12px; }
/* fixed while the list is open: it stays put until you refresh, so a mistake
   is still in front of you instead of vanishing as you press */
.prow.mdone { opacity: .62; border-color: color-mix(in srgb, var(--green-dark) 45%, transparent); }
.prow .mflag { min-width: 12px; font-weight: 800; color: var(--green-dark); }
/* …except a "not needed" press, which is you saying the row doesn't belong on
   the list at all — it slides out on the spot rather than waiting for Refresh */
.prow.mgone {
  opacity: 0; transform: translateX(-14px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce){ .prow.mgone { transition: none; } }
@media (max-width: 640px){ .medit { padding-left: 0; } }