/* Katalogverwaltung 0.1.5: Schritte, Shop-Artikel-Suche, Ablagefläche, Shop-Verknüpfung im Produktformular.
   Farben und Abstände nur über die Variablen aus style.css (--blue, --ink, --muted, --line, --soft, --paper). */

/* Schritte */
.bmb-steps{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:0 0 18px;padding:0;font-size:12px;color:var(--muted)}
.bmb-steps li{display:flex;align-items:center;gap:7px}
.bmb-steps b{display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--line);border-radius:50%;font-size:11px}
.bmb-steps .is-current{color:var(--ink);font-weight:650}
.bmb-steps .is-current b{background:var(--blue);border-color:var(--blue);color:var(--paper)}
.bmb-steps-wrap{margin-bottom:2px}

/* Shop-Artikel suchen */
.bmb-picker{display:grid;gap:8px}
.bmb-picker-label{font-size:12px;font-weight:600;color:var(--ink)}
.bmb-picker-q{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);font-size:14px}
#modalBody .bmb-picker-status{margin:0;font-size:12px;line-height:1.5}
.bmb-picker-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:min(340px,42dvh);overflow:auto}
.bmb-article{width:100%;display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;white-space:normal;padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink)}
.bmb-article:hover,.bmb-article:focus-visible{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 6%,var(--paper))}
.bmb-article-img{display:grid;place-items:center;width:54px;height:44px;background:var(--soft);border-radius:5px;overflow:hidden}
.bmb-article-img img{width:100%;height:100%;object-fit:contain}
.bmb-article-main{display:grid;gap:2px;min-width:0}
.bmb-article-main strong{font-size:13px;overflow-wrap:anywhere}
.bmb-article-main small,.bmb-article-price small{color:var(--muted);font-size:11px;line-height:1.4}
.bmb-article-price{display:grid;justify-items:end;gap:2px;font-weight:650;font-size:13px;white-space:nowrap}

/* Ablagefläche */
.bmb-drop{display:grid;gap:10px;justify-items:center;padding:26px 20px;border-width:2px;transition:border-color .12s,background-color .12s}
.bmb-drop[data-state="over"]{border-style:solid;border-color:var(--blue);background:color-mix(in srgb,var(--blue) 10%,var(--paper))}
.bmb-drop[data-state="error"]{border-color:var(--muted)}
.bmb-drop:focus-within{outline:2px solid var(--blue);outline-offset:2px}
.bmb-drop-idle{display:grid;gap:8px;justify-items:center}
.bmb-drop-icon{width:34px;height:34px;fill:none;stroke:var(--blue);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bmb-drop-title{font-size:15px;color:var(--ink)}
.bmb-drop-sub{font-size:12px;color:var(--muted);max-width:46ch}
.bmb-drop-busy{display:grid;gap:8px;justify-items:center;width:min(440px,100%)}
.bmb-drop-busy[hidden],.bmb-inline-picker[hidden]{display:none}
.bmb-drop-file{font-size:12px;color:var(--ink);overflow-wrap:anywhere}
.bmb-progress{width:100%;height:10px;accent-color:var(--blue)}
.bmb-drop-pct{font-size:12px;color:var(--muted);min-height:1em}
#modalBody .bmb-drop-status{margin:0;font-size:12px;line-height:1.5;min-height:1.5em;width:100%;text-align:center}
.bmb-drop-status.error-message{text-align:left}
.bmb-admin-drop{margin-bottom:18px}
.bmb-admin-drop .bmb-drop{padding:34px 20px}
.bmb-admin-drop .bmb-drop-title{font-size:17px}
.bmb-shop-chip button,.bmb-file-ready{margin-left:6px}
.bmb-file-ready{margin:0 0 14px}

/* Produktformular */
.bmb-shop-link{display:grid;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:7px;background:color-mix(in srgb,var(--blue) 4%,var(--paper))}
.bmb-link-head{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:13px}
.bmb-link-head span{color:var(--muted);font-size:12px}
.bmb-link-actions{display:flex;flex-wrap:wrap;gap:8px}
.bmb-sync-result:empty{display:none}
.bmb-sync-result .notice,.bmb-upload-note{margin:0;font-size:12px}
.bmb-sync-result ul{margin:6px 0;padding-left:18px}
.bmb-inline-picker{padding-top:4px}
.bmb-dim-note{margin-top:0}
.bmb-dim-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.bmb-changed input,.bmb-changed select{border-color:var(--blue)!important;background:color-mix(in srgb,var(--blue) 8%,var(--paper))!important}

@media(max-width:600px){
  .bmb-article{grid-template-columns:44px minmax(0,1fr)}
  .bmb-article-price{grid-column:2;justify-items:start}
  .bmb-article-img{width:44px;height:38px}
}
@media(prefers-reduced-motion:reduce){.bmb-drop{transition:none}}