/* crm – Stile des Pakets (seit 0.8). Nur Variablen aus app.css, eigenes Präfix.
   Ergänzt die CRM-Grundstile in app.css: Leistungsverzeichnis (Ordnungszahlen), Hinweistexte, Alternativ- und
   Bedarfspositionen, Kalkulation, Deckungsbeitrag, Online-Annahme, Aufmaß in der Abrechnung, GAEB, Leistungsvorlagen. */

/* ---------- Beleg-Editor: Positionen ---------- */
.crm-pos-schalter { display: inline-flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; justify-content: flex-end; }
.crm-oz-schalter { font-size: 13px; color: var(--ink-2); }
.crm-lv .crm-pos-kopf, .crm-lv .crm-pos { grid-template-columns: 96px minmax(0, 1fr) 70px 96px 104px 70px 100px 100px; }
.crm-lv .crm-pos.titel { grid-template-columns: 96px minmax(0, 1fr) 100px; }
.crm-pos > .crm-pos-oz { grid-area: nr; padding: 6px 6px; font: 500 12.5px var(--mono); color: var(--ink-2); }
.crm-pos.titel > .crm-pos-oz { color: var(--copper-dark); font-weight: 600; }
.crm-pos.crm-hinweis { grid-template-columns: 30px minmax(0, 1fr) 100px; grid-template-areas: 'nr text aktionen'; background: color-mix(in srgb, var(--info-tint) 55%, transparent); }
.crm-lv .crm-pos.crm-hinweis { grid-template-columns: 96px minmax(0, 1fr) 100px; }
.crm-pos.crm-hinweis > .crm-pos-nr { color: var(--info); padding-top: 9px; }
.crm-hinweis-felder { grid-area: text; display: grid; gap: 6px; min-width: 0; }
.crm-hinweis-felder input { font-weight: 500; }
.crm-pos.crm-hinweis textarea { min-height: 52px; color: var(--ink); }
.crm-pos.crm-variante { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.crm-pos.crm-variante > .crm-pos-summe { color: var(--ink-3); font-style: italic; }
.crm-pos .crm-pos-info select[data-f="variante"] { max-width: 170px; }
.crm-kalk-knopf { min-height: 30px; padding: 2px 10px; font-size: 12.5px; }
.crm-kalk-knopf.an { color: var(--copper-dark); border-color: color-mix(in srgb, var(--copper) 40%, transparent); background: var(--copper-tint); }
.crm-text-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.crm-text-kopf .btn { min-height: 30px; padding: 2px 10px; font-size: 12.5px; }

/* Ansicht: Tabelle mit OZ, Hinweis- und Variantenzeilen */
.crm-pos-tabelle.crm-lv td:first-child, .crm-pos-tabelle.crm-lv th:first-child { width: 104px; white-space: nowrap; }
.crm-hinweiszeile td { background: color-mix(in srgb, var(--info-tint) 45%, transparent); color: var(--ink-2); }
.crm-hinweiszeile .ico { color: var(--info); }
.crm-pos-tabelle .crm-variante td { color: var(--ink-3); }
.crm-pos-tabelle .crm-variante td:last-child { font-style: italic; }

/* ---------- Deckungsbeitrag und Kalkulation ---------- */
.crm-db .card-body { display: grid; gap: 2px; }
.crm-db p { margin-top: 6px; }
.crm-kalk { display: grid; gap: 14px; }
.crm-kalk-box { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.crm-kalk-teil { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.crm-kalk-teil legend { padding: 0; margin-bottom: 4px; font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.crm-kalk-reihe { display: grid; grid-template-columns: 120px minmax(0, 1fr) 150px; gap: 10px; align-items: end; }
.crm-kalk-reihe.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.crm-kalk-reihe .field { margin: 0; }
.crm-kalk-zeilen { display: grid; gap: 6px; }
.crm-kalk-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 80px 80px 104px 40px; gap: 6px; align-items: center; }
.crm-kalk-zeile.fremd { grid-template-columns: minmax(0, 1fr) 104px 40px; }
.crm-kalk-zeile input { width: 100%; min-width: 0; min-height: 38px; padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 14px; }
.crm-kalk-zeile input.r { text-align: right; font-family: var(--mono); font-size: 13.5px; }
.crm-kalk-zeile input[readonly] { background: var(--surface-2); color: var(--ink-2); }
.crm-kalk-ek { text-align: right; }
.crm-kalk-ergebnis { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.crm-kalk-tabelle { width: 100%; }
.crm-kalk-tabelle td, .crm-kalk-tabelle th { padding: 4px 6px; }
.crm-kalk-summe td { border-top: 1px solid var(--line-2); font-weight: 600; }
.crm-kalk-zahlen { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.crm-kalk-zahlen .crm-betrag { font-size: 20px; }
.crm-kalk-zahlen > :last-child { margin-left: auto; font-size: 13.5px; color: var(--ink-2); }

/* ---------- Auswahl-Dialoge (Vorlage, Textbaustein) und Leistungen ---------- */
.crm-wahl-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.crm-wahl-kopf select { min-height: 42px; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); color: var(--ink); max-width: 220px; }
.crm-tb-vorschau span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.crm-unterreiter { margin: -6px 0 16px; }
.crm-inaktiv .t { color: var(--ink-3); }
.crm-zuordnung { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.crm-zuordnung .field { margin: 0; }
.crm-import-vorschau { max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.crm-import-vorschau td, .crm-import-vorschau th { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* ---------- GAEB ---------- */
.crm-gaeb-daten { margin: 0; padding: 0; }
.crm-gaeb-kunden { display: flex; gap: 8px; flex-wrap: wrap; }
.crm-wahl-liste { display: grid; gap: 10px; }
.crm-datei-knopf { justify-self: start; }

/* ---------- Online-Annahme ---------- */
.crm-online { display: grid; gap: 10px; }
.crm-online input[readonly] { font: 500 12.5px var(--mono); color: var(--ink-2); background: var(--surface-2); }
.crm-unterschrift { margin: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.crm-unterschrift img { display: block; width: 100%; max-height: 120px; object-fit: contain; }
.crm-zitat { padding-left: 10px; border-left: 3px solid var(--line-2); color: var(--ink-2); }
.crm-online-liste .crm-betrag { font-size: 13.5px; }

/* ---------- Kundenakte ---------- */
.crm-link-knopf { padding: 0; border: 0; background: none; color: var(--copper-dark); font: inherit; text-align: left; cursor: pointer; }
.crm-link-knopf:hover { text-decoration: underline; }

/* ---------- Abrechnung: Aufmaß und Nachträge ---------- */
.crm-abr-gruppe + .crm-abr-gruppe { border-top: 1px solid var(--line-2); }
.crm-abr-gruppe-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; padding: 10px 18px 6px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.crm-abr-gruppe-kopf a { color: inherit; }

/* ---------- Belegliste ---------- */
.crm-tabs { flex-wrap: wrap; }

@media (pointer: coarse) and (min-width: 901px) {
  .crm-lv .crm-pos-kopf, .crm-lv .crm-pos { grid-template-columns: 96px minmax(0, 1fr) 70px 96px 104px 70px 100px 128px; }
  .crm-lv .crm-pos.titel, .crm-lv .crm-pos.crm-hinweis { grid-template-columns: 96px minmax(0, 1fr) 128px; }
  .crm-pos.crm-hinweis { grid-template-columns: 30px minmax(0, 1fr) 128px; }
}
@media (max-width: 900px) {
  .crm-lv .crm-pos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); grid-template-areas: 'nr nr aktionen' 'text text text' 'menge einheit einzel' 'ust summe summe' 'mehr mehr mehr'; }
  .crm-lv .crm-pos > .crm-pos-oz { max-width: 180px; }
  .crm-lv .crm-pos.titel, .crm-lv .crm-pos.crm-hinweis { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'nr aktionen' 'text text'; }
  .crm-pos.crm-hinweis { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .crm-kalk-reihe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .crm-kalk-reihe > [data-eigen] { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .crm-pos-schalter { justify-content: flex-start; }
  .crm-kalk-reihe.drei { grid-template-columns: minmax(0, 1fr); }
  .crm-kalk-zeile { grid-template-columns: minmax(0, 1fr) 70px 90px 40px; grid-template-areas: 'text text text weg' 'menge einheit ek ek'; }
  .crm-kalk-zeile > [data-mf="text"] { grid-area: text; }
  .crm-kalk-zeile > [data-mf="menge"] { grid-area: menge; }
  .crm-kalk-zeile > [data-mf="einheit"] { grid-area: einheit; }
  .crm-kalk-zeile > [data-mf="ek"], .crm-kalk-zeile > .crm-kalk-ek { grid-area: ek; }
  .crm-kalk-zeile > [data-m-weg] { grid-area: weg; }
  .crm-kalk-zeile.fremd { grid-template-columns: minmax(0, 1fr) 96px 40px; grid-template-areas: none; }
  .crm-wahl-kopf { grid-template-columns: minmax(0, 1fr); }
  .crm-wahl-kopf select { max-width: none; }
  .crm-kalk-zahlen > :last-child { margin-left: 0; }
}
/* Handy: Positionen der Beleg-Ansicht als Zeilenblöcke statt breiter Tabelle (Bezeichnung oben, Zahlen darunter) */
@media (max-width: 640px) {
  .crm-pos-tabelle thead { display: none; }
  .crm-pos-tabelle, .crm-pos-tabelle tbody { display: block; width: 100%; }
  .crm-pos-tabelle tr { display: grid; grid-template-columns: 62px auto auto minmax(0, 1fr) auto; grid-template-areas: 'nr text text text text' '. menge einheit einzel gesamt'; column-gap: 6px; row-gap: 4px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .crm-pos-tabelle tr.crm-titelzeile, .crm-pos-tabelle tr.crm-hinweiszeile { grid-template-areas: 'nr text text text text'; }
  .crm-pos-tabelle tr.crm-titelzeile { background: var(--surface-2); }
  .crm-pos-tabelle tr.crm-hinweiszeile { background: color-mix(in srgb, var(--info-tint) 45%, transparent); }
  .crm-pos-tabelle td, .crm-pos-tabelle.crm-lv td { padding: 0; border: 0; background: none; width: auto; white-space: normal; }
  .crm-pos-tabelle td:nth-child(1) { grid-area: nr; }
  .crm-pos-tabelle td:nth-child(2) { grid-area: text; }
  .crm-pos-tabelle td:nth-child(3) { grid-area: menge; }
  .crm-pos-tabelle td:nth-child(4) { grid-area: einheit; }
  .crm-pos-tabelle td:nth-child(5) { grid-area: einzel; color: var(--ink-3); }
  .crm-pos-tabelle td:nth-child(5)::before { content: 'je '; font-family: var(--sans); }
  .crm-pos-tabelle td:nth-child(6) { grid-area: gesamt; font-weight: 600; }
}
.crm-tb-ziel { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }