/* stock — styles owned by mod/parts-used.js (the picker after a repair,
   the lines under an entry) and the stock block in mod/parts.js.
   Rule 8: "low stock" is always the words in a heavy frame — the warn
   colour is on top of that, never instead of it. */

/* ---- the stock words on a part row and the low-stock mark ---- */
.vinfo .stk{font-family:var(--mono);}
.pill.low{color:var(--warn); border:2px solid var(--warn); font-weight:700; letter-spacing:.04em; text-transform:uppercase;}
.pill.low.big{font-size:12.5px; padding:4px 10px;}
.pill.uncounted{color:var(--muted); border-style:dashed;}
.lowbar button.on{border-color:var(--warn); border-width:2px; font-weight:700;}

/* ---- the stock block on a part's detail ---- */
.stockbox{border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; margin:0 0 12px; font-size:13.5px; line-height:1.5;}
.stockbox.low{border:2px solid var(--warn);}
.stockbox .qty{font-family:var(--mono); font-size:22px; font-weight:700; line-height:1.1;}
.stockbox .qty small{font-size:12px; font-weight:400; color:var(--muted); font-family:var(--sans, inherit);}
.stockbox .row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.stockbox .row .spacer{flex:1;}
.stockbox .facts{color:var(--muted); font-size:12.5px; margin-top:4px;}
.stockbox .note{margin-top:6px; font-size:13px;}
.stockbox .acts{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px;}
.stockbox .acts button{width:auto; flex:1 1 auto;}

/* ---- stock history (moves) ---- */
.moves{margin-top:6px;}
.moves .mv{display:grid; grid-template-columns:auto auto 1fr; gap:2px 10px; padding:7px 0; border-bottom:1px solid var(--line); font-size:12.5px;}
.moves .mv:last-child{border-bottom:0;}
.moves .mv .d{font-family:var(--mono); font-weight:700; min-width:44px; text-align:right;}
.moves .mv .r{font-weight:600;}
.moves .mv .a{font-family:var(--mono); color:var(--muted); grid-column:1 / -1;}
.moves .mv .n{color:var(--muted); grid-column:1 / -1;}

/* ---- the picker ---- */
/* min-width:0 — the card is a flex item, and a no-wrap part number inside
   would otherwise push it wider than a phone screen. */
.modal .card:has(.ppick){max-width:560px; min-width:0;}
.ppick{min-width:0;}
.ppick label{margin-top:12px;}
.ppick-lines{border:1px solid var(--line); border-radius:var(--r-sm); padding:6px 10px; margin-top:4px;}
.ppick-lines .pl{display:flex; align-items:center; gap:8px; padding:4px 0;}
.ppick-lines .pl input{width:72px; margin:0; padding:6px 8px; font-size:14px; flex:none;}
.ppick-results{max-height:220px; overflow-y:auto; border:1px solid var(--line); border-radius:var(--r-sm); margin-top:6px;}
.ppick-results:empty{display:none;}
.ppick-results .prow{display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:transparent;
  border:0; border-bottom:1px solid var(--line); border-radius:0; padding:8px 10px; min-height:40px; font-size:13.5px;}
.ppick-results .prow:last-child{border-bottom:0;}
.ppick-results .prow:hover{background:var(--panel);}
.ppick .pn, .pused .pn{font-family:var(--mono); font-weight:700; white-space:nowrap; max-width:48%; overflow:hidden; text-overflow:ellipsis; flex:none;}
.ppick .pc{flex:none;}
@media (max-width:440px){ .ppick .pc, .ppick-results .prow .pc{display:none;} .ppick-results .prow{flex-wrap:wrap;} }
.ppick .pd, .pused .pd{flex:1; min-width:0; color:var(--muted); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ppick .pc, .pused .pc{font-family:var(--mono); font-size:11.5px; color:var(--muted); white-space:nowrap;}
.ppick button.x, .pused button.x{width:auto; min-height:26px; padding:2px 9px; font-size:14px; line-height:1;
  border-radius:var(--r-pill); color:var(--muted); background:transparent; border:1px dashed var(--line); flex:none;}
.ppick button.x:hover, .pused button.x:hover{color:var(--bad); border-style:solid;}

/* ---- the lines under an entry in the Activity tab ---- */
.pused{margin-top:5px; font-size:12.5px;}
.pused .pl{display:flex; align-items:center; gap:8px; padding:2px 0;}
.pused .pl .q{font-family:var(--mono); min-width:34px; text-align:right; color:var(--muted);}
.pused button.addp{width:auto; margin-top:4px; min-height:28px; padding:3px 10px; font-size:12.5px;}