/* Import menu & recipes. Tokens only.
   Reuses .steps, .dropzone, .result from stock.css and .recipe-row from menu.css. */

.import-intro{margin:0 2px var(--sp-2)}
.import-drops{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.import-drops .dropzone{min-height:170px}
.dropzone.filled{border-style:solid;border-color:var(--mint);background:var(--surface)}
.dropzone.filled .dz-icon{color:var(--mint)}

.sheet-help{margin-top:var(--sp-3)}
.sheet-help summary{cursor:pointer;font-size:var(--fs-sm);font-weight:700;color:var(--mint);list-style:none}
.sheet-help summary::-webkit-details-marker{display:none}
.sheet-examples{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-top:var(--sp-3)}
.sheet-examples > div{display:flex;flex-direction:column;gap:6px;min-width:0}
.sheet-examples b{font-size:var(--fs-sm)}
.mini-table{border-collapse:collapse;font-size:var(--fs-xs);width:100%}
.mini-table th,.mini-table td{border:1px solid var(--line);padding:4px 7px;text-align:left;white-space:nowrap}
.mini-table th{background:var(--surface-2);font-weight:700;color:var(--ink-2)}

/* step 2 */
.import-summary{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);padding:10px 14px;margin-bottom:var(--sp-3);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  font-size:var(--fs-sm);font-weight:700;color:var(--ink-2);position:sticky;top:0;z-index:3}
.import-summary span:first-child{color:var(--ink)}

.import-dish{margin-bottom:var(--sp-3)}
.import-dish.skipped{opacity:.55}
.import-dish header{align-items:flex-start}
.id-title{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.dish-name-input{font-size:var(--fs-md);font-weight:800;width:100%;max-width:360px}
.id-tags{display:flex;gap:6px;flex-wrap:wrap}
.skip-check{padding-top:0;white-space:nowrap}
.id-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);margin-bottom:var(--sp-3)}
.id-grid .field{margin:0;min-width:0}
.id-grid input,.id-grid select{width:100%}
.price-note{margin-bottom:var(--sp-3);padding:8px 12px;background:var(--amber-soft);border-radius:var(--r-md);
  font-weight:700;font-size:var(--fs-sm);color:var(--ink);align-items:flex-start}
/* menu.css narrows recipe rows when a card has no cost total; import cards
   carry an extra "was" column, so they set their own grid. */
.dish-section.import-dish .recipe-head,
.dish-section.import-dish .recipe-row,
.dish-section.import-dish:not(:has(.recipe-total)) .recipe-head,
.dish-section.import-dish:not(:has(.recipe-total)) .recipe-row{
  grid-template-columns:minmax(0,1.4fr) 96px 44px minmax(0,1fr) 34px}
.rr-ing-wrap{display:flex;flex-direction:column;gap:6px;min-width:0}
.rr-was{font-size:var(--fs-xs);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.import-actions{position:sticky;bottom:0;background:var(--paper);padding:var(--sp-3) 0;border-top:1px solid var(--line)}

@media (max-width:1100px){
  .id-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .import-drops,.sheet-examples,.id-grid{grid-template-columns:1fr}
  .import-dish header{flex-direction:column}
  .dish-name-input{max-width:none}
  .dish-section.import-dish .recipe-row,
  .dish-section.import-dish:not(:has(.recipe-total)) .recipe-row{
    grid-template-columns:minmax(0,1fr) 72px 34px;
    grid-template-areas:"ing ing del" "qty unit was";row-gap:6px}
  .import-dish .recipe-row .rr-ing-wrap{grid-area:ing}
  .import-dish .recipe-row .rr-qty{grid-area:qty}
  .import-dish .recipe-row .rr-unit{grid-area:unit}
  .import-dish .recipe-row .rr-was{grid-area:was;text-align:right}
  .import-dish .recipe-row .icon-btn{grid-area:del}
  .import-summary{font-size:var(--fs-xs);gap:4px var(--sp-3)}
}