/* Standardqualitäten (Seite „Standardqualitäten“, Zuordnung in „Kunden & Grenzwerte“).
   Eigene Datei, damit sie unabhängig von pages.css gepflegt werden kann. Nur Tokens aus app.css verwenden. */

/* ---------- Grenzwert-Zeilen: Herkunft, Urheber, Abweichung ---------- */
/* Die Spalte rechts zeigt sichtbar, wer den Wert wann gesetzt hat (nicht nur als Tooltip) */
.lim-tbl .lr-src { white-space: normal; min-width: 0; }
.lr-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 0.18rem; text-align: right; }
.lr-badges { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem; }
.lr-by { font-size: 0.72rem; line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; }
.lr-std { font-size: 0.74rem; line-height: 1.3; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lr-hint { font-size: 0.72rem; line-height: 1.3; font-weight: 600; color: var(--warn); }
.lr-hint:empty { display: none; }
.btn.lr-reset { margin-top: 0.1rem; padding: 0.2rem 0.6rem; gap: 0.35rem; font-size: 0.74rem; white-space: nowrap; }
.btn.lr-reset .ic { width: 14px; height: 14px; }
/* Abweichung vom Standard: Streifen am Zeilenanfang, Eingabefeld mit Warnrand */
.lr.is-dev > th:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.lr.is-dev .lr-in { border-color: var(--warn-line); }

/* ---------- Kunden & Grenzwerte: Kopfzeile und Standardqualität ---------- */
.cd-mail { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--line-soft); font-size: 0.86rem; }
.cd-mail-l { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 650; color: var(--muted); }
.cd-mail-l .ic { width: 16px; height: 16px; }
.cd-mail-v { font-weight: 600; overflow-wrap: anywhere; }
/* Die längere Zeile „Zuletzt geändert oder geprüft: … von …“ bricht um, statt den Knopf „Als geprüft markieren“ in die nächste Zeile zu schieben */
.pm-row .pm-spec { flex: 1 1 280px; min-width: 0; }
.pd-std .sec-head { margin-bottom: 0.75rem; }
.std-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.4rem; }
.std-row select { min-width: 240px; max-width: 100%; }
.std-name { display: grid; gap: 0.1rem; }
.std-name b { font-weight: 600; }
.std-state { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.7rem; font-size: 0.85rem; min-width: 0; }
.std-note { font-size: 0.8rem; margin-top: 0.7rem; }
.hist-via { display: block; font-size: 0.72rem; font-weight: 500; color: var(--muted); }

/* ---------- Auswirkungen, Rückfragen (Dialoge) ---------- */
.std-sum { font-weight: 650; line-height: 1.5; margin: 0.7rem 0 0.4rem; }
.std-list { display: grid; gap: 0.3rem; margin: 0.4rem 0 0.5rem; padding-left: 1.2rem; color: var(--ink-2); line-height: 1.45; }
.std-list li::marker { color: var(--gold); }
.std-list li.warn { color: var(--warn); font-weight: 600; }
.std-list li.bad { color: var(--bad-ink); font-weight: 600; }
.std-imp { margin-top: 0.8rem; }
.std-fine { font-size: 0.8rem; margin-top: 0.5rem; }
.std-warn { color: var(--bad-ink); font-weight: 600; }
.std-more { margin-top: 0.6rem; border: 1px solid var(--line); border-radius: 12px; background: var(--field-soft); overflow: hidden; }
.std-more > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.55rem 0.9rem; cursor: pointer; user-select: none; font-size: 0.84rem; font-weight: 650; color: var(--ink-2); }
.std-more > summary::-webkit-details-marker { display: none; }
.std-more > summary:hover { background: var(--hover); }
.std-more > summary .ic { color: var(--muted); transition: transform 0.25s var(--ease); }
.std-more[open] > summary .ic { transform: rotate(180deg); }
.std-tw { max-height: 38vh; overflow: auto; }
.std-more .std-tw { border-top: 1px solid var(--line-soft); border-radius: 0; }
.std-chg { margin: 0.7rem 0 0.2rem; border: 1px solid var(--line); }
.std-cut { font-size: 0.78rem; padding: 0.4rem 0.9rem 0.6rem; }
.std-tw .tbl thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-solid); }
.std-opt { margin: 0.7rem 0 0; padding: 0.4rem 0.9rem 0.6rem; display: flex; flex-wrap: wrap; gap: 0.35rem 1.6rem; border: 1px solid var(--line); border-radius: 12px; background: var(--field-soft); }
.std-opt legend { padding: 0 0.4rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.std-from { margin: 0; padding: 0.4rem 0.9rem 0.9rem; border: 1px solid var(--line); border-radius: 12px; }
.std-from legend { padding: 0 0.4rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.std-conf { padding: 0.6rem 0.8rem; border: 1px solid var(--bad-line); border-radius: 12px; background: var(--bad-soft); }
.std-conf .std-list { margin-bottom: 0.2rem; }
/* Dialog „Kunden zuordnen“: die Liste scrollt für sich, die Auswirkungen bleiben unten sichtbar */
dialog.std-dlg .dlg-card { max-height: min(94vh, 880px); }
dialog.std-dlg .dlg-body { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.std-assign { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.std-assign > * { flex: none; }
.std-assign > .std-alist { flex: 1 1 280px; min-height: 130px; max-height: none; }
.std-assign > .std-imp { flex: 0 1 auto; max-height: 30vh; overflow: auto; min-height: 3rem; margin-top: 0.6rem; }

/* ---------- Seite „Standardqualitäten“ ---------- */
.std-m { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.55rem; }
.std-dev { color: var(--warn); font-weight: 650; }
/* Getreidefarbe als kleiner Punkt vor der Getreideart (Farben aus den Diagrammen) */
.std-grain::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.std-grain.g-weizen::before { background: var(--c-weizen); }
.std-grain.g-roggen::before { background: var(--c-roggen); }
.std-grain.g-dinkel::before { background: var(--c-dinkel); }
.std-grain.g-sonstige::before { background: var(--c-sonstige); }
.std-desc { flex: 1 1 100%; color: var(--ink-2); line-height: 1.5; overflow-wrap: anywhere; white-space: pre-line; }
.std-by { flex: 1 1 100%; font-size: 0.8rem; }
.std-head .cd-meta { flex-wrap: wrap; }
.std-head .cd-actions { flex-wrap: wrap; }
.std-head .cd-actions .btn { white-space: nowrap; }
.std-pairs .sec-meta { gap: 0.8rem; }
.std-ptools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; margin-bottom: 0.8rem; }
.std-ptools .search { flex: 1 1 220px; max-width: 360px; }
.std-pick { display: flex; align-items: center; gap: 0.7rem; margin-left: auto; font-size: 0.85rem; font-weight: 600; color: var(--ink-2); }
.std-nopairs { padding: 0.4rem 0; }
.hist-d { display: block; margin-top: 0.15rem; font-size: 0.8rem; overflow-wrap: anywhere; }
.std-htbl td:nth-child(-n+3) { white-space: nowrap; }
.std-htbl td { vertical-align: top; }
.std-ptbl .chk-c, .std-pairs .chk-c { width: 36px; padding-right: 0; }
.std-ptbl .sp-none, .std-alist .sp-none { padding: 1rem; text-align: center; }
.std-ptbl .sp-dl { font-size: 0.76rem; margin-left: 0.3rem; }
.std-ptbl .acts { width: 1%; }
.std-pairs .std-tw { max-height: 60vh; }

/* Dialog „Kunden zuordnen“ */
.std-atools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 0.8rem 0 0.4rem; }
.std-atools .search { flex: 1 1 170px; min-width: 150px; }
.std-atools .fld.inline select { max-width: min(100%, 21rem); } /* „Ohne oder mit anderer Standardqualität“ passt hinein */
.std-ahead-l { display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; }
.std-ahead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.4rem 1rem; padding: 0.2rem 0.2rem 0.4rem; font-size: 0.82rem; }
.std-alist { overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--field-soft); }
.std-pick-row { display: grid; grid-template-columns: 22px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 0.2rem 0.7rem; padding: 0.42rem 0.8rem; border-bottom: 1px solid var(--line-soft); font-size: 0.86rem; cursor: pointer; }
.std-pick-row:last-child { border-bottom: 0; }
.std-pick-row:hover { background: var(--hover); }
.std-pick-row.inactive .sp-c, .std-pick-row.inactive .sp-p { opacity: 0.7; }
.std-pick-row .sp-c { font-weight: 600; overflow-wrap: anywhere; }
.std-pick-row .sp-n { font-size: 0.76rem; overflow-wrap: anywhere; }

@media (max-width: 640px) {
  /* Grenzwerte: jede Zelle bekommt ihren Platz im Raster (pages.css überlässt die Felder sonst der automatischen Anordnung) */
  .lim-tbl .lr > td:nth-child(2) { grid-area: 2 / 1; }
  .lim-tbl .lr > .lr-dash { grid-area: 2 / 2; }
  .lim-tbl .lr > td:nth-child(4) { grid-area: 2 / 3; }
  /* Zeilen mit Angaben zu Urheber, Datum oder Standard: Name über die ganze Breite, die Angaben unter den Feldern statt oben rechts */
  .lim-tbl .lr.is-inh > th, .lim-tbl .lr.is-dev > th, .lim-tbl .lr:has(.lr-by) > th { grid-area: 1 / 1 / 2 / 4; }
  .lim-tbl .lr.is-inh > .lr-src, .lim-tbl .lr.is-dev > .lr-src, .lim-tbl .lr:has(.lr-by) > .lr-src { grid-area: 3 / 1 / 4 / 4; justify-self: stretch; }
  .lim-tbl .lr.is-inh .lr-cell, .lim-tbl .lr.is-dev .lr-cell, .lim-tbl .lr:has(.lr-by) .lr-cell { align-items: flex-start; text-align: left; }
  .lim-tbl .lr.is-inh .lr-badges, .lim-tbl .lr.is-dev .lr-badges, .lim-tbl .lr:has(.lr-by) .lr-badges { justify-content: flex-start; }
  .std-row select { min-width: 0; width: 100%; }
  .std-pick-row { grid-template-columns: 22px minmax(0, 1fr); }
  .std-pick-row .sp-p, .std-pick-row .sp-n { grid-column: 2; }
  .std-pick { margin-left: 0; }
  .std-atools .fld.inline { width: 100%; }
  .std-atools .fld.inline select { flex: 1; min-width: 0; }
}

/* Kleine Fenster (Telefon, niedrige Laptops): der Dialog scrollt als Ganzes, sonst würden die Auswirkungen abgeschnitten */
@media (max-width: 640px), (max-height: 720px) {
  dialog.std-dlg .dlg-body { display: block; overflow: auto; }
  .std-assign { display: block; }
  .std-assign > .std-alist { max-height: 34vh; min-height: 0; }
  .std-assign > .std-imp { max-height: none; overflow: visible; }
}

/* Zuordnungen: ist die Karte schmal (Telefon, aber auch Fenster mit Kundenliste daneben), wird je Eintrag eine Karte gezeigt
   (Kunde, Mehlart, Status, Abweichungen und „Lösen“ ohne seitliches Scrollen) */
.std-pairs { container: spairs / inline-size; }
@container spairs (max-width: 700px) {
  .std-ptbl, .std-ptbl tbody { display: block; }
  .std-ptbl thead { display: none; }
  .std-ptbl tr { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 0.15rem 0.6rem; align-items: start; padding: 0.65rem 0.2rem; border-bottom: 1px solid var(--line-soft); }
  .std-ptbl td { display: block; padding: 0; border: 0; }
  .std-ptbl .sp-cb { grid-area: 1 / 1 / 3 / 2; width: auto; }
  .std-ptbl .sp-cu { grid-area: 1 / 2; font-weight: 600; overflow-wrap: anywhere; }
  .std-ptbl .sp-ac { grid-area: 1 / 3 / 3 / 4; width: auto; }
  .std-ptbl .sp-pr { grid-area: 2 / 2; font-size: 0.82rem; color: var(--ink-2); }
  .std-ptbl .sp-st { grid-area: 3 / 2; }
  .std-ptbl .sp-dv { grid-area: 4 / 2; }
  .std-ptbl .sp-dv:has(> .muted:only-child) { display: none; }
  .std-ptbl tr:not(:has(.sp-cb)) .sp-cu, .std-ptbl tr:not(:has(.sp-cb)) .sp-pr, .std-ptbl tr:not(:has(.sp-cb)) .sp-st, .std-ptbl tr:not(:has(.sp-cb)) .sp-dv { grid-column: 1 / -1; }
  .std-ptbl tr.inactive td { opacity: 1; }
  .std-ptbl tr.inactive .sp-cu, .std-ptbl tr.inactive .sp-pr { opacity: 0.6; }
  .std-ptbl tbody tr:hover td { background-image: none; }
}

/* Sehr schmale Telefone (320 px): der längste Seitentitel („Standardqualitäten“) schob die Kopfzeile über den Rand hinaus */
@media (max-width: 400px) {
  .topbar .tb-title { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .tb-right { flex: none; }
}

/* Lange Namen ohne Leerzeichen (Standardqualität bis 80, Kunde bis 120 Zeichen) dürfen die Kopfkarte nicht über den Rand schieben */
.cd-title { min-width: 0; max-width: 100%; }
.cd-title h2 { overflow-wrap: anywhere; }