/* betterSALES — Anbauplatz des Moduls (CLAUDE.md „Sammeldateien haben einen Anbauplatz je Modul").
   Nur Layout und Zustände der Belegstrecke; Farben, Abstände und Radien ausschließlich aus tokens.css,
   Kacheln/Karten/Tabellen/Chips aus bp-components.css. Keine eigenen Hex-Werte. */

/* ---------- Grundlagen ---------- */

.sales-h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--bp-text);
    margin: 0;
}

.sales-lead {
    margin: var(--bp-space-1) 0 0;
    font-size: 0.88rem;
}

.sales-muted { color: var(--bp-text-muted); }

.sales-strong { font-weight: 600; }

.sales-num,
.sales-mono,
.sales-pos td,
.sales-sum dd {
    font-variant-numeric: tabular-nums;
}

.sales-num { text-align: right; white-space: nowrap; }

.sales-mono { letter-spacing: 0.01em; white-space: nowrap; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sales-kpi-grid { --bp-stat-cols: 4; }

.sales-tile-link {
    color: inherit;
    text-decoration: none;
    transition: border-color 160ms ease-out;
}

.sales-tile-link:hover { border-color: var(--bp-text-muted); }

.sales-tile-link:focus-visible {
    outline: 2px solid var(--bp-yellow);
    outline-offset: 2px;
}

/* ---------- Belegseite: Raster + Detailspalte ---------- */

.sales-doc__head { align-items: center; }

.sales-doc__title h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: var(--bp-space-1) 0 var(--bp-space-2);
    color: var(--bp-text);
}

.sales-doc__crumb {
    display: flex;
    align-items: center;
    gap: var(--bp-space-2);
    font-size: 0.8rem;
    color: var(--bp-text-muted);
}

.sales-doc__head-actions {
    display: flex;
    align-items: center;
    gap: var(--bp-space-2);
    flex-shrink: 0;
}

.sales-doc__legacy { padding: var(--bp-space-3) 2rem 0; }

/* Einspaltig (Nutzerentscheid 01.10.2026): Neben Hauptmenü und Aktions-Dock blieb für eine dritte Spalte
   zu wenig Platz — die Positionstabelle bekommt die volle Breite, alles Übrige steht darunter. */
.sales-doc__body {
    display: flex;
    flex-direction: column;
    gap: var(--bp-space-4);
    padding: var(--bp-space-4) 2rem 2rem;
}

.sales-doc__main {
    display: flex;
    flex-direction: column;
    gap: var(--bp-space-3);
    min-width: 0;
}

/* Band unter der Tabelle: Positionsdetails über die volle Breite (direkt unter den Zeilen, wo der Blick
   ist), darunter Summen und Belegkette — auf breiten Bildschirmen nebeneinander, sonst untereinander. */
.sales-doc__side {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: var(--bp-space-3);
    align-items: start;
    min-width: 0;
}

.sales-doc__side > .sales-detail { grid-column: 1 / -1; }

/* Statuslinie: erledigte Schritte hell, der aktuelle gelb (CI-Akzent), künftige gedämpft. */
.sales-steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bp-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sales-steps__step {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--bp-panel-border);
    color: var(--bp-text-muted);
}

.sales-steps__step--done { color: var(--bp-text); }

.sales-steps__step--current {
    background: var(--bp-yellow);
    border-color: var(--bp-yellow);
    color: var(--bp-black);
}

.sales-steps__step--end {
    border-color: var(--bp-debit);
    color: var(--bp-debit);
}

/* ---------- Kopf ---------- */

/* Spaltenzahl folgt der Breite: Eingabefelder unter ~13rem werden unbedienbar (Datumswähler, Auswahllisten). */
.sales-head__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--bp-space-3) var(--bp-space-4);
}

.sales-kv {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    font-size: 0.88rem;
    color: var(--bp-text);
}

.sales-kv--wide { grid-column: span 2; }

.sales-kv__label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bp-text-muted);
}

.sales-head__note {
    margin: var(--bp-space-3) 0 0;
    font-size: 0.85rem;
    color: var(--bp-text);
}


/* ---------- Positionsraster ---------- */

.sales-positions__scroll {
    overflow-x: auto;
    margin-top: var(--bp-space-2);
}

.sales-pos { font-size: 0.85rem; }

.sales-pos th,
.sales-pos td { padding: 0.45rem 0.5rem; }

.sales-pos__row {
    cursor: pointer;
    transition: background-color 120ms ease-out;
}

.sales-pos__row:hover td { background: color-mix(in srgb, var(--bp-text) 4%, transparent); }

.sales-pos__row:focus-visible {
    outline: 2px solid var(--bp-yellow);
    outline-offset: -2px;
}

.sales-pos__row--selected td { background: color-mix(in srgb, var(--bp-yellow) 9%, transparent); }

.sales-pos__row--child td {
    color: var(--bp-text-muted);
    font-size: 0.8rem;
}

.sales-pos__row--child td:nth-child(4) { padding-left: 1.4rem; }

.sales-pos__row--text .sales-pos__textcell { font-style: italic; }

.sales-pos__state { width: 1.2rem; }

.sales-pos__empty {
    padding: var(--bp-space-4) var(--bp-space-2);
    text-align: center;
    color: var(--bp-text-muted);
}

/* Zeilenzustand (E-07): ok · manuell abweichend · unvollständig. */
.sales-state {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    vertical-align: middle;
}

.sales-state--ok { background: var(--bp-success); }

.sales-state--manual { background: var(--bp-warn); }

.sales-state--incomplete {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--bp-debit);
}

/* Schnellerfassung: Menge · Artikel · Preis · Enter. */
.sales-entry {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr) 9rem auto;
    gap: var(--bp-space-2);
    align-items: center;
    margin-top: var(--bp-space-3);
    padding-top: var(--bp-space-3);
    border-top: 1px dashed var(--bp-panel-border);
}

.sales-entry__input {
    width: 100%;
    height: 2.25rem;
    padding: 0 0.65rem;
    font: inherit;
    font-size: 0.88rem;
    color: var(--bp-text);
    background: color-mix(in srgb, var(--bp-text) 3%, transparent);
    border: 1px solid var(--bp-panel-border);
    border-radius: var(--bp-radius-ctl);
    caret-color: var(--bp-yellow);
    transition: border-color 140ms ease-out;
}

.sales-entry__input::placeholder { color: var(--bp-text-muted); }

.sales-entry__input:focus {
    outline: none;
    border-color: var(--bp-yellow);
}

/* ---------- Detailspalte ---------- */

.sales-detail__name {
    margin: var(--bp-space-2) 0 var(--bp-space-3);
    font-weight: 600;
    color: var(--bp-text);
}

.sales-detail__sub {
    margin: var(--bp-space-4) 0 var(--bp-space-2);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bp-text-muted);
}

.sales-detail__actions {
    display: flex;
    align-items: center;
    gap: var(--bp-space-2);
    margin-top: var(--bp-space-3);
}

.sales-formula {
    margin: var(--bp-space-3) 0 0;
    padding: var(--bp-space-2);
    font-size: 0.75rem;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    color: var(--bp-text);
    background: color-mix(in srgb, var(--bp-saldo) 10%, transparent);
    border-radius: var(--bp-radius-ctl);
}

.sales-facts {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.3rem var(--bp-space-3);
    margin: var(--bp-space-3) 0 0;
    font-size: 0.8rem;
}

.sales-facts dt { color: var(--bp-text-muted); }

.sales-facts dd {
    margin: 0;
    color: var(--bp-text);
}

/* Preisherkunft (E-03): verwendet · verworfen · Hinweis. */
.sales-trail {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
}

.sales-trail__item {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    gap: var(--bp-space-2);
    padding: 0.35rem 0;
    border-bottom: 1px dashed var(--bp-panel-border);
    color: var(--bp-text);
}

.sales-trail__item:last-child { border-bottom: none; }

.sales-trail__item .e-icons { font-size: 0.85rem; line-height: 1.3; }

.sales-trail__item--used .e-icons { color: var(--bp-success); }

.sales-trail__item--skipped { color: var(--bp-text-muted); }

.sales-trail__item--info .e-icons { color: var(--bp-saldo); }

/* ---------- Summen und Belegkette ---------- */

.sales-sum {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem var(--bp-space-3);
    margin: var(--bp-space-3) 0 0;
    font-size: 0.88rem;
}

.sales-sum dt { color: var(--bp-text-muted); }

.sales-sum dd {
    margin: 0;
    text-align: right;
    color: var(--bp-text);
}

.sales-sum .sales-sum__total {
    padding-top: var(--bp-space-2);
    border-top: 1px solid var(--bp-text-muted);
    font-weight: 700;
    color: var(--bp-text);
}

.sales-note {
    margin: var(--bp-space-2) 0 0;
    padding: var(--bp-space-2);
    font-size: 0.78rem;
    color: var(--bp-text);
    background: color-mix(in srgb, var(--bp-saldo) 10%, transparent);
    border-radius: var(--bp-radius-ctl);
}

.sales-chain__list {
    display: flex;
    flex-direction: column;
    gap: var(--bp-space-2);
    margin: var(--bp-space-3) 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
}

.sales-chain__list li {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.sales-chain__item--current .sales-mono {
    color: var(--bp-black);
    background: var(--bp-yellow);
    padding: 0 0.35rem;
    align-self: flex-start;
}

/* ---------- Cockpit ---------- */

.sales-todo tbody tr { cursor: pointer; }

.sales-todo--urgent td { color: var(--bp-text); }

.sales-todo .bp-dot { margin-right: var(--bp-space-1); }

/* ---------- Dialoge ---------- */

.sales-dialog .e-dlg-content {
    display: flex;
    flex-direction: column;
    gap: var(--bp-space-3);
}

.sales-dialog__hint {
    margin: 0;
    font-size: 0.82rem;
    color: var(--bp-text-muted);
}

.sales-dialog__warn,
.sales-dialog__blocked {
    margin: 0;
    padding: var(--bp-space-2);
    font-size: 0.82rem;
    border-radius: var(--bp-radius-ctl);
    color: var(--bp-text);
}

.sales-dialog__warn { background: color-mix(in srgb, var(--bp-warn) 16%, transparent); }

.sales-dialog__blocked { background: color-mix(in srgb, var(--bp-debit) 16%, transparent); }

.sales-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--bp-text-muted);
}

.sales-field--inline {
    flex-direction: row;
    align-items: center;
    gap: var(--bp-space-3);
}

.sales-grid { display: grid; gap: var(--bp-space-3); }

.sales-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Positionsdetails stehen jetzt in voller Breite unter der Tabelle: die Felder in eine Zeile, statt zu zweit. */
.sales-detail .sales-grid--2 { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }

/* Artikeländerung seit dem Erfassen: alt → neu je geändertem Feld, darunter die Übernahme. */
.sales-article-change {
    display: flex;
    flex-direction: column;
    gap: var(--bp-space-2);
    margin-top: var(--bp-space-3);
    padding: var(--bp-space-3);
    border: 1px solid color-mix(in srgb, var(--bp-warn) 38%, transparent);
    background: color-mix(in srgb, var(--bp-warn) 9%, transparent);
    border-radius: var(--bp-radius-ctl);
}

.sales-article-change__title {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bp-warn);
}

.sales-article-change__list {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.25rem var(--bp-space-3);
    margin: 0;
    font-size: 0.85rem;
}

.sales-article-change__list dt { color: var(--bp-text-muted); }

.sales-article-change__list dd { margin: 0; }

.sales-article-change__old {
    color: var(--bp-text-muted);
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--bp-text-muted) 60%, transparent);
}

.sales-checks {
    display: flex;
    flex-direction: column;
    gap: var(--bp-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
}

.sales-checks__item {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: var(--bp-space-2);
    align-items: baseline;
    color: var(--bp-text);
}

.sales-checks__item .bp-chip { justify-self: start; }

.sales-qty td { vertical-align: middle; }

/* Entnahmedialog: je Artikel ein Block, Summe rechts — grün erst, wenn sie genau passt. */
.sales-pick + .sales-pick { margin-top: var(--bp-space-3); }

.sales-pick__head {
    display: flex;
    justify-content: space-between;
    gap: var(--bp-space-2);
    margin-bottom: var(--bp-space-1);
    font-weight: 600;
    color: var(--bp-text);
}

.sales-pick__sum {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--bp-warn);
}

.sales-pick__sum--ok { color: var(--bp-success); }

/* Rückstand im Seitenpanel: die eine Zahl, die handeln lässt. */
.sales-stock--short { color: var(--bp-warn); font-weight: 600; }

/* Entnommene Bestände im Seitenpanel der Lieferung. */
.sales-issued { list-style: none; margin: 0; padding: 0; }

.sales-issued__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--bp-space-2);
    padding: 0.3rem 0;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--bp-panel-border);
}

.sales-issued__item:last-child { border-bottom: none; }

/* Rechnungsart als wählbare Zeilen statt nackter Radio-Knöpfe. */
.sales-kinds {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bp-space-2);
}

.sales-kind {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.15rem var(--bp-space-2);
    padding: var(--bp-space-2) var(--bp-space-3);
    border: 1px solid var(--bp-panel-border);
    border-radius: var(--bp-radius-ctl);
    cursor: pointer;
    transition: border-color 140ms ease-out;
}

.sales-kind input { accent-color: var(--bp-yellow); grid-row: span 2; }

.sales-kind--on { border-color: var(--bp-yellow); }

.sales-kind__label { font-weight: 600; color: var(--bp-text); }

.sales-kind__hint { font-size: 0.75rem; color: var(--bp-text-muted); }

/* Segment-Umschalter Angebot | Auftrag. */
.sales-segment {
    display: inline-flex;
    border: 1px solid var(--bp-panel-border);
    align-self: flex-start;
}

.sales-segment__item {
    appearance: none;
    padding: 0.4rem 1rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bp-text-muted);
    background: none;
    border: none;
    cursor: pointer;
}

.sales-segment__item--on {
    color: var(--bp-black);
    background: var(--bp-yellow);
}

.sales-segment__item:focus-visible {
    outline: 2px solid var(--bp-yellow);
    outline-offset: 2px;
}

.sales-manual-mark {
    margin-left: 0.25rem;
    font-size: 0.7rem;
    color: var(--bp-warn);
}

/* ---------- Stammdatenmasken: Liste links, Bearbeitung rechts (wie die Belegseite, breitere Spalte) ---------- */
.sales-md { grid-template-columns: minmax(0, 1fr) 26rem; }

@media (max-width: 1100px) {
    .sales-md { grid-template-columns: minmax(0, 1fr); }
}

.sales-md__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--bp-space-3);
    margin-bottom: var(--bp-space-3);
}

.sales-md__search { max-width: 18rem; }

.sales-md__row {
    cursor: pointer;
    transition: background-color 120ms ease-out;
}

.sales-md__row:hover td { background: color-mix(in srgb, var(--bp-text) 4%, transparent); }

.sales-md__row:focus-visible {
    outline: 2px solid var(--bp-yellow);
    outline-offset: -2px;
}

.sales-md__row--selected td { background: color-mix(in srgb, var(--bp-yellow) 9%, transparent); }

.sales-md__flags { white-space: nowrap; }

.sales-md__flags .bp-chip + .bp-chip { margin-left: 0.25rem; }

.sales-md__more {
    margin: var(--bp-space-3) 0 0;
    font-size: 0.8rem;
}

/* Das fieldset trägt nur das „disabled" für Leser ohne Bearbeitungsrecht — optisch keine eigene Box. */
.sales-md__form {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.sales-md__hint {
    margin: var(--bp-space-2) 0 0;
    font-size: 0.78rem;
}

.sales-md__discount {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6rem auto;
    gap: var(--bp-space-2);
    align-items: center;
    margin-bottom: var(--bp-space-2);
}

.sales-md__checks {
    display: flex;
    flex-direction: column;
    gap: var(--bp-space-2);
    margin-bottom: var(--bp-space-3);
}

/* Kopf einer Preisliste: drei Spalten, der Name über zwei. */
.sales-md__head { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sales-md__span2 { grid-column: span 2; }

@media (max-width: 800px) {
    .sales-md__head { grid-template-columns: minmax(0, 1fr); }
    .sales-md__span2 { grid-column: auto; }
}

.sales-md__stack { margin-top: var(--bp-space-3); }

/* Ergebnis eines Regeltests: Schlüssel groß, Satz und Hinweise daneben. */
.sales-md__result {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--bp-space-2) var(--bp-space-3);
    margin-top: var(--bp-space-3);
    padding: var(--bp-space-2) var(--bp-space-3);
    border: 1px solid color-mix(in srgb, var(--bp-success) 45%, transparent);
    border-radius: var(--bp-radius-ctl);
    background: color-mix(in srgb, var(--bp-success) 8%, transparent);
}

/* Auswahlspalte der Laufseiten. */
.sales-md__check { width: 2.5rem; text-align: center; }

/* Sondersatz-Zeile: Art, Bezug, Satz, Entfernen. */
.sales-md__rate {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr) 5.5rem auto;
    gap: var(--bp-space-2);
    align-items: center;
    margin-bottom: var(--bp-space-2);
}