/* Menu list + dish page. Tokens only. */

/* ---- list ---- */
.menu-toolbar{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;margin-bottom:var(--sp-4)}
.search-box{display:flex;align-items:center;gap:8px;flex:1 1 260px;max-width:420px;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r-md);padding:0 10px;color:var(--muted)}
.search-box:focus-within{outline:2px solid var(--focus);outline-offset:1px}
.search-box input{border:none;outline:none;padding:9px 0;flex:1;background:transparent}
.search-box input:focus{outline:none}
.chip-n{display:inline-block;min-width:18px;padding:0 5px;margin-left:2px;border-radius:999px;background:var(--surface-2);
  color:var(--ink-2);font-size:11px;text-align:center}
.chip.active .chip-n{background:var(--board-2);color:var(--on-board)}
.menu-emp-note{margin:-6px 0 var(--sp-3)}
.menu-none{padding:var(--sp-4) 0}

.menu-group{max-width:860px;margin-bottom:var(--sp-5)}
.menu-cat{font-family:var(--font-chalk);font-weight:700;font-size:var(--fs-xl);color:var(--ink);letter-spacing:.3px;
  padding-bottom:6px;border-bottom:2px solid var(--ink);margin-bottom:2px}
.menu-cat span{font-family:var(--font);font-size:var(--fs-xs);font-weight:700;color:var(--muted);letter-spacing:0;margin-left:4px}
.menu-items{display:flex;flex-direction:column}
.menu-item{display:block;padding:12px 8px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none;border-radius:0}
.menu-item:hover{background:var(--surface)}
.menu-item:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.menu-item.off{opacity:.6}
.mi-line{display:flex;align-items:baseline;gap:8px}
.mi-name{font-weight:800;font-size:var(--fs-md);color:var(--ink);min-width:0}
.mi-dots{flex:1;border-bottom:2px dotted var(--line-strong);transform:translateY(-4px);min-width:24px}
.mi-price{font-weight:800;font-size:var(--fs-md);font-variant-numeric:tabular-nums;color:var(--ink)}
.mi-sub{font-size:var(--fs-xs);color:var(--muted);margin-top:3px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.mi-sub i{font-style:normal;margin:0 3px;color:var(--line-strong)}
.mi-sub .good{color:var(--mint);font-weight:700}
.mi-sub .bad{color:var(--brick);font-weight:700}
.mi-sub .warn{color:var(--amber);font-weight:700}
.mi-sub .badge{margin-left:4px}

/* monthly price suggestions: green = could charge more, red = could sell more */
.menu-row{border-bottom:1px solid var(--line)}
.menu-row .menu-item{border-bottom:none}
.sugg-pill{display:inline-flex;align-items:center;gap:3px;align-self:center;padding:2px 8px;border:none;border-radius:999px;
  font:inherit;font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap}
.sugg-pill.raise{background:var(--mint-soft);color:var(--mint)}
.sugg-pill.lower{background:var(--brick-soft);color:var(--brick)}
.sugg-pill:focus-visible{outline:2px solid var(--focus)}
.sugg-slot{padding:0 8px 12px}
.price-sugg{display:flex;gap:var(--sp-3);align-items:flex-start;padding:12px 14px;border-radius:var(--r-md);font-size:var(--fs-sm);
  color:var(--ink);border-left:4px solid}
.price-sugg.raise{background:var(--mint-soft);border-color:var(--mint)}
.price-sugg.raise > .i{color:var(--mint)}
.price-sugg.lower{background:var(--brick-soft);border-color:var(--brick)}
.price-sugg.lower > .i{color:var(--brick)}
.price-sugg > .i{flex:none;margin-top:2px}
.ps-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.ps-why{font-size:var(--fs-xs);color:var(--ink-2)}
.ps-form{display:flex;align-items:flex-end;gap:var(--sp-2);flex-wrap:wrap}
.ps-form .field{margin:0;width:140px}
.ps-hint{font-size:var(--fs-xs);color:var(--ink-2)}
.ps-hint .good{color:var(--mint);font-weight:700}
.ps-hint .bad{color:var(--brick);font-weight:700}
.po-stats{display:grid;grid-template-columns:repeat(2,1fr);margin:var(--sp-3) 0}

.menu-empty{max-width:520px;padding:var(--sp-5);border:1px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--surface)}
.menu-empty h3{font-size:var(--fs-lg);margin-bottom:var(--sp-2)}
.menu-empty p{color:var(--ink-2);margin-bottom:var(--sp-4)}

/* ---- dish page ---- */
.back-link{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:700;color:var(--on-board-muted);
  text-decoration:none;margin-bottom:2px}
.back-link:hover{color:var(--chalk)}
.dish-view{max-width:860px;display:flex;flex-direction:column;gap:var(--sp-4)}
.dish-stats{display:grid;grid-template-columns:repeat(5,1fr)}
.dish-stats .stat{min-width:0}
.stat .big.good{color:var(--mint)}
.stat .big.bad{color:var(--brick)}
.dish-note{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;padding:12px 14px;border-radius:var(--r-md);
  font-size:var(--fs-sm)}
.dish-note span{flex:1;min-width:200px}
.dish-note.bad{background:var(--brick-soft);color:var(--ink)}
.dish-note.bad > .i{color:var(--brick)}

.dish-section{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5)}
.dish-section.quiet{background:transparent;border-style:dashed}
.dish-section header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;
  margin-bottom:var(--sp-3)}
.dish-section h2{font-size:var(--fs-md);font-weight:800}
.dish-section > .hint{margin:var(--sp-2) 0 var(--sp-3)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2) var(--sp-4);margin-bottom:var(--sp-3)}
.form-grid .field .hint{margin-top:2px}
.inline-form{display:flex;align-items:flex-end;gap:var(--sp-3);flex-wrap:wrap}
.inline-form .field{margin:0;width:160px}
.dish-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}
.dish-view > .dish-actions{margin-top:0}

/* recipe editor */
.recipe-head,.recipe-row{display:grid;grid-template-columns:minmax(0,1fr) 96px 44px 80px 34px;gap:var(--sp-2);align-items:center}
.recipe-head{font-size:var(--fs-xs);font-weight:700;color:var(--muted);padding:0 0 6px;border-bottom:1px solid var(--line)}
.recipe-head .r,.rr-cost{text-align:right}
.recipe-row{padding:6px 0;border-bottom:1px solid var(--line)}
.recipe-row select,.recipe-row input{width:100%}
.rr-unit{font-size:var(--fs-xs);color:var(--muted)}
.rr-cost{font-size:var(--fs-sm);font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.no-price{color:var(--amber);font-weight:700;font-size:var(--fs-xs)}
.add-row{margin-top:var(--sp-3)}
.recipe-total{display:flex;flex-wrap:wrap;gap:4px var(--sp-4);align-items:baseline;justify-content:flex-end;margin-top:var(--sp-3);
  padding-top:var(--sp-3);border-top:2px solid var(--line);font-size:var(--fs-sm);color:var(--ink-2)}
.recipe-total b{color:var(--ink);font-size:var(--fs-md)}
.recipe-total .no-price{flex-basis:100%;text-align:right}
/* employee: no cost column */
.dish-section:not(:has(.recipe-total)) .recipe-head,
.dish-section:not(:has(.recipe-total)) .recipe-row{grid-template-columns:minmax(0,1fr) 96px 44px 34px}

.recipe-read{list-style:none;margin-bottom:var(--sp-3)}
.recipe-read li{display:flex;justify-content:space-between;gap:var(--sp-3);padding:9px 0;border-bottom:1px solid var(--line);
  font-size:var(--fs-sm)}
.recipe-read li b{font-variant-numeric:tabular-nums}
.recipe-read li.none{color:var(--muted)}

@media (max-width:1100px){
  .dish-stats{grid-template-columns:repeat(3,1fr)}
  .dish-stats .stat{border-bottom:1px solid var(--line)}
  .dish-stats .stat:nth-child(3n){border-right:none}
}
@media (max-width:700px){
  .menu-toolbar{flex-direction:column;align-items:stretch}
  /* in a column the 260px flex-basis would become a height, not a width */
  .search-box{max-width:none;flex:0 0 auto}
  .dish-stats{grid-template-columns:repeat(2,1fr)}
  .dish-stats .stat{padding:12px 14px}
  .dish-stats .stat:nth-child(3n){border-right:1px solid var(--line)}
  .dish-stats .stat:nth-child(2n){border-right:none}
  .dish-stats .stat:last-child{grid-column:1 / -1;border-bottom:none}
  .dish-section{padding:var(--sp-4)}
  .form-grid{grid-template-columns:1fr}
  .recipe-head{display:none}
  .recipe-row{grid-template-columns:96px minmax(0,1fr) 70px 34px;grid-template-areas:"ing ing ing del" "qty unit cost cost";row-gap:6px}
  .recipe-row .rr-ing{grid-area:ing}
  .recipe-row .rr-del{grid-area:del}
  .recipe-row .rr-qty{grid-area:qty}
  .recipe-row .rr-unit{grid-area:unit}
  .recipe-row .rr-cost{grid-area:cost}
  .dish-section:not(:has(.recipe-total)) .recipe-row{grid-template-columns:96px minmax(0,1fr) 70px 34px;
    grid-template-areas:"ing ing ing del" "qty unit unit unit"}
  .recipe-total{justify-content:flex-start}
  .recipe-total .no-price{text-align:left}
}