/* Produktkatalog */
#view-catalog { --cat-line: rgba(255,255,255,.10); --cat-muted: #b8b8bd; --cat-soft: rgba(255,255,255,.04); --cat-bad: #ff8a8a; --cat-warn: #f5b862; --cat-ok: #7fd3a4; }
#view-catalog [hidden], #cat-dialog [hidden] { display: none !important; }
.cat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.cat-head h2 { margin: 2px 0 4px; }
.cat-head p { margin: 0; color: var(--cat-muted); font-size: 13px; max-width: 640px; }
.cat-eyebrow { font-size: 10px; letter-spacing: .14em; color: var(--cat-muted); }
.cat-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cat-message { padding: 10px 14px; border-radius: 8px; background: rgba(127,211,164,.12); color: var(--cat-ok); margin: 0 0 14px; font-size: 13px; }
.cat-message.is-error { background: rgba(255,138,138,.12); color: var(--cat-bad); }
.cat-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.cat-filters input[type=search] { flex: 1 1 260px; min-width: 0; }
.cat-filters select { flex: 0 1 200px; min-width: 0; }
.cat-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cat-muted); cursor: pointer; }
.cat-check input { width: auto; margin: 0; }
.cat-check b { background: rgba(245,184,98,.18); color: var(--cat-warn); border-radius: 99px; padding: 1px 7px; font-size: 11px; }
.cat-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.cat-chips button { background: var(--cat-soft); border: 1px solid var(--cat-line); color: #ddd; border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 12px; cursor: pointer; }
.cat-chips button b { color: var(--cat-muted); font-weight: 600; margin-left: 2px; }
.cat-chips button.is-active { background: rgba(232,106,95,.16); border-color: #e86a5f; color: #fff; }
.cat-count { font-size: 12px; color: var(--cat-muted); margin: 0 0 8px; }
.cat-list { display: flex; flex-direction: column; gap: 8px; }
.cat-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 170px 150px 110px; gap: 6px 16px; align-items: center; padding: 12px 16px; border: 1px solid var(--cat-line);
  border-radius: 12px; background: var(--cat-soft); min-width: 0; }
.cat-row[data-cat-edit] { cursor: pointer; }
.cat-row[data-cat-edit]:hover, .cat-row[data-cat-edit]:focus-visible { border-color: rgba(232,106,95,.6); outline: none; }
.cat-row.is-inactive { opacity: .55; }
.cat-row.is-drop { border-color: #e86a5f; background: rgba(232,106,95,.10); box-shadow: 0 0 0 2px rgba(232,106,95,.35) inset; }
.cat-row.is-busy { opacity: .6; pointer-events: none; }
.cat-thumb { width: 64px; height: 64px; border-radius: 10px; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.cat-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cat-thumb.is-empty { background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.18); color: var(--cat-muted); flex-direction: column; gap: 2px; font-size: 18px; }
.cat-thumb.is-empty span { font-size: 10px; }
.cat-row.is-drop .cat-thumb.is-empty { border-color: #e86a5f; color: #fff; }
.cat-tip { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--cat-muted); margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: rgba(255,255,255,.03); }
.cat-tip i { color: var(--cat-warn); margin-top: 2px; }
.cat-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cat-main b { font-size: 14px; overflow-wrap: anywhere; }
.cat-main small { color: var(--cat-muted); font-size: 12px; overflow-wrap: anywhere; }
.cat-meta { font-size: 11px; color: var(--cat-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cat-sku { color: #ddd; font-weight: 600; }
.cat-cat span { display: inline-block; font-size: 11px; padding: 3px 9px; border-radius: 99px; background: rgba(255,255,255,.08); color: #ddd; }
.cat-price { display: flex; flex-direction: column; gap: 1px; text-align: right; font-variant-numeric: tabular-nums; }
.cat-price b { font-size: 15px; }
.cat-price small { font-size: 11px; color: var(--cat-muted); }
.cat-stock { text-align: right; font-size: 12px; color: var(--cat-muted); font-variant-numeric: tabular-nums; }
.cat-low { color: var(--cat-warn); font-weight: 600; }
.cat-muted { color: var(--cat-muted); }
.cat-empty { padding: 26px; border: 1px dashed var(--cat-line); border-radius: 12px; color: var(--cat-muted); }
@media (max-width: 760px) {
  .cat-row { grid-template-columns: 56px minmax(0, 1fr) auto; padding: 10px 12px; gap: 6px 12px; }
  .cat-thumb { width: 56px; height: 56px; grid-row: 1 / span 2; align-self: start; }
  .cat-main { grid-column: 2 / -1; }
  .cat-price { grid-column: 3; grid-row: 2; }
  .cat-cat { grid-column: 2; grid-row: 2; }
  .cat-stock { grid-column: 2 / -1; text-align: left; }
  .cat-stock .cat-muted { display: none; }
}

/* Dialog */
#cat-dialog { border: 0; border-radius: 14px; padding: 0; width: min(760px, calc(100vw - 24px)); max-height: 92vh; background: #1d1d22; color: #f2f2f4; box-shadow: 0 24px 80px rgba(0,0,0,.6); }
#cat-dialog::backdrop { background: rgba(0,0,0,.55); }
#cat-dialog .cat-form { display: flex; flex-direction: column; max-height: 92vh; }
#cat-dialog header, #cat-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; }
#cat-dialog header { border-bottom: 1px solid rgba(255,255,255,.08); }
#cat-dialog footer { border-top: 1px solid rgba(255,255,255,.08); justify-content: flex-end; }
#cat-dialog h3 { margin: 0; font-size: 18px; }
.cat-x { background: none; border: 0; color: #b8b8bd; font-size: 18px; cursor: pointer; padding: 4px 8px; }
.cat-form-body { overflow: auto; padding: 14px 20px; }
#cat-dialog fieldset { border: 1px solid rgba(255,255,255,.10); border-radius: 12px; padding: 10px 14px 4px; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }
#cat-dialog legend { font-size: 12px; color: #b8b8bd; padding: 0 6px; }
#cat-dialog label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: #b8b8bd; margin-bottom: 10px; min-width: 0; }
#cat-dialog input, #cat-dialog select, #cat-dialog textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; }
#cat-dialog label.cat-check { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; }
#cat-dialog label.cat-check input { width: auto; }
#cat-dialog fieldset label:has(.cat-wide-input) { grid-column: 1 / -1; }
.cat-more { margin: 0 0 12px; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; padding: 10px 14px; }
.cat-more summary { cursor: pointer; font-size: 13px; color: #ddd; margin-bottom: 6px; }
.cat-hint { grid-column: 1 / -1; margin: 0 0 10px; font-size: 12px; color: #7fd3a4; min-height: 1em; }
.cat-error { color: #ff8a8a; font-size: 13px; margin: 6px 0 0; }

/* Bild im Produktdialog */
#cat-dialog fieldset.cat-imgbox { display: block; padding-bottom: 12px; }
#cat-dialog fieldset.cat-imgbox.is-busy { opacity: .65; pointer-events: none; }
.cat-img-drop { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 14px; align-items: start; border-radius: 10px; padding: 4px; transition: background .15s; }
.cat-img-drop.is-over { background: rgba(232,106,95,.12); box-shadow: 0 0 0 2px #e86a5f inset; }
.cat-img-preview { width: 160px; height: 160px; border-radius: 10px; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cat-img-preview a { display: block; width: 100%; height: 100%; }
.cat-img-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cat-img-empty { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: #26262c; color: #8d8d94;
  border: 1px dashed rgba(255,255,255,.18); border-radius: 10px; box-sizing: border-box; font-size: 28px; }
.cat-img-empty small { font-size: 11px; max-width: 90%; overflow-wrap: anywhere; text-align: center; }
.cat-img-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cat-img-hint { margin: 0; font-size: 12px; color: #b8b8bd; }
.cat-img-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-img-btns .btn { padding: 7px 11px; font-size: 13px; }
.cat-img-remove { color: #ff8a8a; }
.cat-img-url { display: flex; gap: 6px; }
#cat-dialog .cat-img-url input { flex: 1 1 auto; min-width: 0; }
.cat-img-url .btn { flex: 0 0 auto; padding: 7px 12px; font-size: 13px; }
.cat-img-status { margin: 0; font-size: 12px; color: #7fd3a4; }
.cat-img-status.is-error { color: #ff8a8a; }
.cat-img-source { margin: 0; font-size: 11px; color: #8d8d94; }
.cat-img-source a { color: #b8b8bd; }
@media (max-width: 560px) {
  .cat-img-drop { grid-template-columns: 1fr; }
  .cat-img-preview { width: 100%; height: 200px; }
  .cat-img-btns .btn { flex: 1 1 auto; justify-content: center; }
}