/* Katalog Stile – Profi Sortiment im Profishop und Admin-Seite «Lieferanten-Katalog». Betreiberin KINTEC GmbH. Teil des Lieferanten-Katalogs, siehe katalog/SPEC.md. */
/* Nur Regeln mit Präfix kat- sowie .sh-avail.extern. Farben ausschliesslich über die CSS-Variablen der Oberfläche
 * (--accent, --text-2, --text-3, --green, --orange, --red, --sh-line und die Flächenvariablen aus styles.css),
 * damit der Dark Mode ([data-theme="dark"]) ohne eigene Farbwerte funktioniert. Breakpoints wie shop.css: 1240/1100/900/640 px. */

/* ---------- Verfügbarkeit beim Lieferanten ---------- */
/* Grün wie «an Lager», aber mit hohlem Punkt: sichtbar anders als der eigene Lagerbestand. */
.sh-avail.extern { color: var(--green); }
.sh-avail.extern i { background: transparent; box-shadow: inset 0 0 0 2px var(--green); }

/* ---------- Menüblock «Profi Sortiment» (im Kategorienmenü .sh-hcats) ---------- */
.kat-menu { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--sh-line, var(--border)); }
.kat-menu h3 { margin: 0 0 4px 2px; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-3); }
.kat-menu ul { list-style: none; }
.kat-menu > ul > li + li { border-top: 1px solid var(--sh-line, var(--border)); }
.kat-menu .kat-menu-alle { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--accent); }

/* ---------- Kategorie- und Suchseiten ---------- */
.kat-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.kat-kachel {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 76px; padding: 16px 42px 16px 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.kat-kachel b { font-size: 15px; font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; }
.kat-kachel span { font-size: 12.5px; color: var(--text-3); }
.kat-kachel svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); transition: color .15s; }
.kat-kachel:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kat-kachel:hover b, .kat-kachel:hover svg { color: var(--accent); }
.kat-kachel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.kat-hinweis {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; padding: 11px 14px; border-radius: 12px;
  background: var(--accent-soft); color: var(--text); font-size: 13.5px; line-height: 1.45;
}
.kat-hinweis svg { flex-shrink: 0; margin-top: 1px; color: var(--accent); }
.kat-hinweis.warn { background: var(--orange-soft); }
.kat-hinweis.warn svg { color: var(--orange); }
.kat-treffer a span { margin-left: 5px; }
.kat-leer { padding: 64px 20px; }
.kat-leer > div { max-width: 520px; margin: 0 auto; line-height: 1.5; }
.kat-leer .btn { margin-top: 14px; }

/* ---------- Karten ---------- */
.kat-card .sh-card-price .kat-pro { font-size: 12px; font-weight: 500; color: var(--text-2); }
.kat-zusatz { display: flex; flex-wrap: wrap; gap: 0 6px; font-size: 12px; line-height: 1.4; color: var(--text-3); }
.kat-zusatz span + span::before { content: '·'; margin-right: 6px; }
/* In schmalen Karten je Angabe eine Zeile, und der längere Liefertext («Beim Lieferanten an Lager») darf die Knöpfe umbrechen. */
.kat-card .kat-zusatz { flex-direction: column; }
.kat-card .kat-zusatz span + span::before { content: none; }
.kat-card .sh-card-foot { flex-wrap: wrap; row-gap: 6px; }
.kat-card .sh-card-acts { margin-left: auto; }
.kat-badge { background: var(--orange); }
.kat-platzhalter { border-style: dashed; }
.kat-platzhalter .sh-card-img { background: var(--surface-2); }
.kat-platzhalter .sh-noimg { color: var(--text-3); }
.kat-platzhalter .sh-card-name { color: var(--text-3); }
.kat-platzhalter:hover { box-shadow: none; transform: none; border-color: var(--border); }

/* ---------- Produktseite ---------- */
.kat-pd-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.kat-pd-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 8px;
  background: var(--orange-soft); color: var(--orange); font-size: 12.5px; font-weight: 700;
}
.kat-pd-badge.sperrgut { background: var(--surface-2); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border-strong); }
.kat-zusatz-gross { list-style: none; display: grid; gap: 2px; margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.kat-menge-label { margin: 18px 0 -12px; font-size: 13px; font-weight: 650; color: var(--text-2); }
.kat-text p { margin: 0 0 10px; white-space: normal; }
.kat-text p:last-child { margin-bottom: 0; }
.kat-spec { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); gap: 14px; }
.kat-spec span { color: var(--text-3); }
.kat-spec b { font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.kat-spec a { color: var(--accent); }
.kat-spec a:hover { text-decoration: underline; }
.kat-gesperrt:disabled, .kat-gesperrt:disabled:hover { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; background: var(--accent); }

/* ---------- Warenkorb ---------- */
.kat-cart-row .pic .sh-noimg { color: var(--text-3); }
.kat-cart-row .pic .sh-noimg svg { width: 26px; height: 26px; }
.kat-cart-row .kat-zusatz { font-size: 12px; }
.kat-cart-hinweis { margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--orange); }
.kat-nicht-bestellbar .pic, .kat-nicht-bestellbar .sum { opacity: .55; }
.kat-einheit { padding: 0 10px 0 2px; font-size: 12.5px; font-weight: 650; color: var(--text-2); white-space: nowrap; }
.kat-versand { margin: 6px 0 12px; }
.kat-cart-sperre { margin: 4px 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--orange-soft); color: var(--text); font-size: 13px; line-height: 1.45; }
.kat-cart-sperre p { margin: 0 0 8px; }

/* ---------- Suchblock und Anbindung unter eigenen Listen ---------- */
.kat-suche, .kat-anbindung { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--border); }
.kat-suche .sh-toolbar .btn, .kat-anbindung .sh-toolbar .btn { flex-shrink: 0; }
.kat-suche .sh-toolbar .btn svg, .kat-anbindung .sh-toolbar .btn svg { width: 14px; height: 14px; }

/* ---------- Admin «Lieferanten-Katalog» (kat-adm-*) ---------- */
/* Ergänzt die bestehenden Admin-Klassen (adm-page, adm-panel, adm-table, card, chip, btn). */
/* Gesperrte Knöpfe sichtbar machen (die Admin-Knöpfe haben sonst keinen :disabled-Stil). */
.kat-adm .btn:disabled, .kat-adm-modal .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
/* Karten sind Rasterfelder und wären sonst so breit wie ihr breitester Inhalt: Eine breite Tabelle (Verlauf,
   Freischaltung) würde die ganze Seite auf dem Telefon nach rechts schieben. So bleibt sie in ihrem Rollbereich. */
.kat-adm .card { min-width: 0; }
.kat-adm-warnungen { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.kat-adm-warnung {
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); font-size: 13.5px; line-height: 1.45;
}
.kat-adm-warnung.fehler { border-color: var(--red); background: var(--red-soft); }
.kat-adm-warnung.warnung { border-color: var(--orange); background: var(--orange-soft); }
.kat-adm-warnung.info { border-color: var(--accent); background: var(--accent-soft); }
.kat-adm-warnung .kat-adm-aktionen { margin: 0 0 0 auto; }
.kat-adm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.kat-adm-kennzahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.kat-adm-kennzahl { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.kat-adm-kennzahl b { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kat-adm-kennzahl span { font-size: 12px; color: var(--text-3); }
.kat-adm-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.kat-adm-zeile:last-child { border-bottom: none; }
.kat-adm-zeile > span:first-child { color: var(--text-2); }
.kat-adm-zeile > :last-child { text-align: right; font-variant-numeric: tabular-nums; }
.kat-adm-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; }
.kat-adm-fortschritt { height: 6px; border-radius: 3px; background: var(--border-strong); overflow: hidden; }
.kat-adm-fortschritt i { display: block; height: 100%; border-radius: 3px; background: var(--accent); transition: width .4s ease; }
.kat-adm-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.kat-adm-hinweis { font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.kat-adm-formular { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; }
.kat-adm-formular label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-2); }
.kat-adm-schalter { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.kat-adm-schalter input { width: 16px; height: 16px; accent-color: var(--accent); }
.kat-adm-protokoll {
  max-height: 480px; overflow: auto; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border);
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text);
}
.kat-adm-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 26px 18px; text-align: center;
  border: 2px dashed var(--border-strong); border-radius: 16px; color: var(--text-2); cursor: pointer; transition: border-color .15s, background .15s;
}
.kat-adm-dropzone:hover, .kat-adm-dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.kat-adm-dropzone.busy { cursor: progress; opacity: .7; }
/* Preisvergleich DATANORM gegen CSV (Anhang E.3.6): nur Anzahlen je Verhältnisklasse, nie Beträge. */
.kat-adm-balken { display: grid; gap: 4px; }
.kat-adm-balken-zeile { display: grid; grid-template-columns: minmax(92px, 116px) minmax(60px, 1fr) minmax(52px, auto); gap: 10px; align-items: center; font-size: 12.5px; }
.kat-adm-balken-zeile > span:first-child { color: var(--text-2); }
.kat-adm-balken-zeile > span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.kat-adm-balken-zeile i { display: block; height: 10px; border-radius: 5px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.kat-adm-balken-zeile i b { display: block; height: 100%; min-width: 2px; border-radius: 5px; background: var(--accent); }
.kat-adm-baender { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.kat-adm-baender th, .kat-adm-baender td { padding: 6px 8px 6px 0; text-align: left; border-bottom: 1px solid var(--border); }
.kat-adm-baender input { width: 100%; min-width: 80px; }
.kat-adm-pfad { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.kat-adm-flags { display: flex; flex-wrap: wrap; gap: 4px; }
.kat-adm-baum { max-height: 420px; overflow: auto; font-size: 13.5px; }
.kat-adm-baum ul { list-style: none; padding-left: 16px; }
.kat-adm-baum > ul { padding-left: 0; }
.kat-adm-baum button { border: none; background: transparent; padding: 3px 6px; border-radius: 6px; color: var(--text); text-align: left; }
.kat-adm-baum button:hover { background: var(--surface-2); }
.kat-adm-baum button.on { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.kat-adm-vorschau { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.kat-adm-vorschau .kat-adm-meta { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; color: var(--text-3); }
.kat-adm-rot { color: var(--red); }
.kat-adm-gruen { color: var(--green); }
.kat-adm-orange { color: var(--orange); }
/* EUR-Kurs der Quelle TBS (Anhang F): Kopfzeile, Zustand der Automatik, Vorschlagsband und Abrufergebnis. */
.kat-adm-kurs-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 2px 0 4px; font-size: 13.5px; }
.kat-adm-kurs-kopf b { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.kat-adm-kurs-kopf span { color: var(--text-2); }
.kat-adm-kurs-kopf.kat-adm-rot b, .kat-adm-kurs-kopf.kat-adm-rot span { color: var(--red); }
.kat-adm-kurs-zeile { margin: 2px 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.kat-adm-kurs-warnung { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0; font-size: 13px; line-height: 1.45; }
.kat-adm-kurs-band {
  margin: 10px 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--orange); background: var(--orange-soft);
  font-size: 13.5px; line-height: 1.45;
}
.kat-adm-kurs-ergebnis { margin: 10px 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); }
.kat-adm-kurs-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.kat-adm-kurs-verlauf > summary { cursor: pointer; font-size: 13px; color: var(--text-2); }

/* ---------- Dark Mode ---------- */
[data-theme="dark"] .kat-kachel:hover { box-shadow: none; }
[data-theme="dark"] .kat-platzhalter .sh-card-img { background: var(--surface-2); }
[data-theme="dark"] .kat-gesperrt:disabled { opacity: .4; }
[data-theme="dark"] .kat-adm-kennzahl { background: var(--surface); }
[data-theme="dark"] .kat-adm-kurs-ergebnis { background: var(--surface); }

/* ---------- Responsiv ---------- */
@media (max-width: 1240px) {
  .kat-kacheln { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}
@media (max-width: 1100px) {
  .kat-spec { grid-template-columns: minmax(110px, 40%) minmax(0, 1fr); }
  .kat-adm-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
@media (max-width: 900px) {
  .kat-menge-label { margin-top: 14px; }
  .kat-suche .sh-toolbar, .kat-anbindung .sh-toolbar { align-items: flex-start; }
}
@media (max-width: 640px) {
  .kat-adm-balken-zeile { grid-template-columns: minmax(84px, 1fr) minmax(40px, 1fr) auto; gap: 8px; font-size: 12px; }
  .kat-kacheln { grid-template-columns: 1fr; gap: 8px; }
  .kat-kachel { min-height: 0; padding: 13px 40px 13px 14px; }
  .kat-spec { grid-template-columns: 1fr; gap: 2px; }
  .kat-zusatz { font-size: 11.5px; }
  .kat-cart-row .kat-zusatz { flex-direction: column; }
  .kat-cart-row .kat-zusatz span + span::before { content: none; }
  .kat-suche .sh-toolbar .btn, .kat-anbindung .sh-toolbar .btn { width: 100%; justify-content: center; }
  .kat-einheit { padding-right: 8px; }
  .kat-adm-grid, .kat-adm-formular { grid-template-columns: 1fr; }
  .kat-adm-warnung .kat-adm-aktionen { margin-left: 0; }
  .kat-adm-kurs-kopf b { font-size: 15px; }
  .kat-adm-kurs-band, .kat-adm-kurs-ergebnis { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .kat-kachel, .kat-kachel svg, .kat-adm-fortschritt i, .kat-adm-dropzone { transition: none; }
  .kat-kachel:hover { transform: none; }
}