/* Stock list, delivery / new ingredient forms, and the bill steps. Tokens only.
   Reuses .menu-toolbar, .search-box, .menu-cat, .dish-section, .form-grid from menu.css. */

.stock-view{max-width:980px;display:flex;flex-direction:column;gap:var(--sp-4)}
.chip.small{padding:4px 10px;font-size:11px}
.stock-cats{margin:-6px 0 var(--sp-4)}
.muted{color:var(--muted)}
.check{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:700;color:var(--ink);cursor:pointer;
  padding-top:22px}
.form-grid .span2{grid-column:1 / -1}

/* ---- ingredient rows ---- */
.stock-group-sec{max-width:980px}
.stock-items{display:flex;flex-direction:column}
.stock-item{border-bottom:1px solid var(--line)}
.stock-item.open{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);margin:6px 0}
.si-main{width:100%;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.4fr) minmax(0,1fr) 18px;gap:var(--sp-4);
  align-items:center;padding:12px 8px;background:none;border:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.si-main:hover{background:var(--surface)}
.stock-item.open .si-main:hover{background:transparent}
.si-main:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.si-name{font-weight:800;font-size:var(--fs-md);display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.si-level{display:flex;flex-direction:column;gap:5px;min-width:0}
.si-qty{font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.si-qty small{color:var(--muted);font-size:var(--fs-xs)}
.si-exp{font-size:var(--fs-xs);font-weight:700;color:var(--ink-2)}
.si-exp.warn{color:var(--amber)}
.si-exp.bad{color:var(--brick)}
.si-exp .muted{font-weight:600}
.si-chev{color:var(--muted);transition:transform .15s}
.stock-item.open .si-chev{transform:rotate(180deg)}

/* on-hand bar with a tick at par */
.level{position:relative;display:block;height:6px;border-radius:999px;background:var(--surface-2);max-width:260px}
.level > span{display:block;height:100%;border-radius:999px;background:var(--mint)}
.level.low > span{background:var(--amber)}
.level.out > span{background:var(--brick)}
.level > i{position:absolute;top:-3px;width:2px;height:12px;background:var(--ink-2);border-radius:1px;transform:translateX(-1px)}

/* drawer */
.si-drawer{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--sp-5);padding:4px 12px var(--sp-4)}
.si-sec h3{font-size:var(--fs-sm);font-weight:800;margin-bottom:var(--sp-2);display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.si-sec h3 .hint{font-weight:600}
.si-sec > .btn{margin-top:var(--sp-3)}
.batch{display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:2px var(--sp-2);align-items:center;padding:8px 0;
  border-bottom:1px solid var(--line)}
.batch .icon-btn{grid-row:1 / 3;grid-column:2}
.batch-main{font-size:var(--fs-sm);display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.batch-exp{font-size:var(--fs-xs);font-weight:700;color:var(--ink-2)}
.batch-exp.warn{color:var(--amber)}
.batch-exp.bad{color:var(--brick)}
.batch-sub{font-size:var(--fs-xs);color:var(--muted)}
.si-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-2) var(--sp-3);align-items:end}
.si-form .field{margin:0;min-width:0}
.si-form input,.si-form select{width:100%}
.si-form .btn{justify-self:start}
.si-sec > .hint{margin-top:var(--sp-2)}

/* ---- bill steps ---- */
.steps{list-style:none;display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.steps li{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:700;color:var(--muted)}
.steps li + li::before{content:"";width:28px;height:2px;background:var(--line-strong);margin-right:var(--sp-2)}
.steps li span{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;
  border:2px solid var(--line-strong);font-size:var(--fs-xs);background:var(--surface)}
.steps li.current{color:var(--ink)}
.steps li.current span{border-color:var(--ink);background:var(--chalk);color:var(--chalk-ink)}
.steps li.done{color:var(--mint)}
.steps li.done span{border-color:var(--mint);background:var(--mint);color:var(--surface)}

.dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
  min-height:190px;padding:var(--sp-5);border:2px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--paper);cursor:pointer}
.dropzone:hover,.dropzone.over{border-color:var(--ink);background:var(--surface-2)}
.dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
/* Sits above the file input that covers the whole card, so it is clickable. */
.dz-clear{position:absolute;top:8px;right:8px;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);
  color:var(--ink-2);cursor:pointer}
.dz-clear:hover{background:var(--surface-2);color:var(--ink)}
.dz-icon{color:var(--ink-2)}
.dz-title{font-weight:800;font-size:var(--fs-md);color:var(--ink);word-break:break-all}
.bill-mode{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3)}
.bill-files{list-style:none;margin:var(--sp-3) 0 0;padding:0;display:grid;gap:var(--sp-2)}
.bill-files li{display:flex;align-items:center;gap:var(--sp-3);padding:6px 8px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--surface)}
.bill-files img,.bill-files .bf-pdf{width:44px;height:44px;flex:none;object-fit:cover;border-radius:var(--r-sm);
  display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--ink-2)}
.bill-files .bf-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.bill-errors{margin:var(--sp-2) 0 0;padding-left:18px}
.bill-queue-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.bill-results li{margin-bottom:6px}
.dish-actions .hint{align-self:center}

.bill-layout{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:var(--sp-4);align-items:start}
.bill-aside{position:sticky;top:0}
.bill-layout.no-img{grid-template-columns:minmax(0,1fr)}
.bill-layout.no-img .bill-aside{position:static}
.bill-aside .bill-preview{display:block;width:100%;max-height:calc(100vh - 240px);object-fit:contain;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--surface)}
.bill-main{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
#bill-lines{display:flex;flex-direction:column;gap:var(--sp-3)}
/* "looks like" questions on a bill line */
.bl-ask{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2) var(--sp-3);
  background:var(--amber-soft);border-radius:var(--r-sm);padding:8px 10px;font-size:var(--fs-sm)}
.bl-ask[hidden]{display:none}
.bl-ask-btns{display:flex;flex-wrap:wrap;gap:6px}
.bl-guess{margin-left:4px}
/* stock drawer: delete options, hidden list */
.hidden-item{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:10px 12px}
.bill-check{display:flex;flex-wrap:wrap;gap:4px var(--sp-4);font-size:var(--fs-sm);color:var(--ink-2);padding-top:var(--sp-3);
  border-top:1px solid var(--line)}
.bill-check .good{color:var(--mint);font-weight:700}
.bill-check .warn{color:var(--amber);font-weight:700}
.bill-hint{margin:0 2px}

.bill-line{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--line-strong);border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2)}
.bill-line.warn{border-left-color:var(--amber)}
.bill-line.skipped{opacity:.55}
.bill-line.skipped .bl-grid .field:not(.bl-act){display:none}
.bill-line-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bl-n{font-size:var(--fs-xs);font-weight:800;color:var(--muted);min-width:18px}
.bill-name{flex:1;min-width:0;border:1px solid transparent;border-radius:var(--r-sm);padding:4px 6px;font-weight:800;
  font-size:var(--fs-md);background:transparent;color:var(--ink)}
.bill-name:hover,.bill-name:focus{border-color:var(--line-strong);background:var(--surface)}
.bl-grid{display:grid;grid-template-columns:90px 90px 120px minmax(0,1fr);gap:var(--sp-2)}
.bill-new .bl-grid{grid-template-columns:minmax(0,1.4fr) 110px minmax(0,1fr) 110px 90px}
.bl-grid .field{margin:0}
.bl-grid input,.bl-grid select{width:100%}
.bill-new{background:var(--surface-2);border-radius:var(--r-md);padding:var(--sp-3)}
.bill-new[hidden]{display:none}
.bl-conv{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--sp-3);align-items:end}
.bl-conv[hidden]{display:none}
.bl-conv .field{margin:0}
.bl-conv .hint{padding-bottom:10px;font-size:var(--fs-sm);color:var(--ink-2)}
.bl-conv .hint.odd{color:var(--amber)}
.bill-actions{position:sticky;bottom:0;background:var(--paper);padding:var(--sp-3) 0;margin-top:0;border-top:1px solid var(--line)}

.result h2{display:flex;align-items:center;gap:8px;font-size:var(--fs-lg);color:var(--mint);margin-bottom:var(--sp-3)}
.result p{color:var(--ink-2)}
.result-list{margin:0 0 var(--sp-3) 18px;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm)}
.result .dish-note{margin-bottom:var(--sp-2)}

#bill-history .list-row-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

@media (max-width:1100px){
  .bill-layout{grid-template-columns:minmax(0,1fr)}
  .bill-aside{position:static}
  .bill-aside .bill-preview{max-height:260px}
  .bill-new .bl-grid{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:700px){
  .si-main{grid-template-columns:minmax(0,1fr) 18px;grid-template-areas:"name chev" "level level" "exp exp";gap:6px}
  .si-name{grid-area:name}
  .si-level{grid-area:level}
  .si-exp{grid-area:exp}
  .si-chev{grid-area:chev}
  .level{max-width:none}
  .si-drawer{grid-template-columns:minmax(0,1fr);gap:var(--sp-4);padding:4px 10px var(--sp-3)}
  .steps li + li::before{width:12px;margin-right:4px}
  .steps li{font-size:var(--fs-xs)}
  .bl-grid{grid-template-columns:1fr 1fr 1fr}
  .bl-grid .bl-act{grid-column:1 / -1}
  .bill-new .bl-grid{grid-template-columns:1fr 1fr}
  .bill-new .bl-grid .field:first-child{grid-column:1 / -1}
  .bl-conv{grid-template-columns:1fr}
  .bl-conv .hint{padding-bottom:0}
  .check{padding-top:0}
  .page-head .page-actions .btn{flex:1 1 auto}
}

/* How an ingredient is costed: bought, free or made in-house */
.cost-modes{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);margin-bottom:var(--sp-3)}
.prep-edit{display:grid;gap:var(--sp-2);margin-bottom:var(--sp-3);max-width:560px}
.prep-edit[hidden]{display:none}
.prep-edit .field{margin:0}
.prep-row{display:grid;grid-template-columns:minmax(0,1fr) 110px auto;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-2)}
.prep-edit > .btn{justify-self:start}