/**
 * idf-lieferant-preise — Styles fuer den O2M-Zeilen-Editor der Lieferant-
 * Preis-Junctions. Karten-Layout: pro Lieferant eine Zeile (Haupt-Grid +
 * Sub-Grid fuer Konditionen). Tokens wie in idf-zeichen-picker.
 */

.idf-lp-tab {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
}

.idf-lp-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--tint-neutral);
}
.idf-lp-counter {
  font-size: var(--font-sm);
  color: var(--mid);
}

.idf-lp-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Eine Preis-Zeile als Karte. */
.idf-lp-row {
  border: 1px solid var(--shade-08);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: var(--white, #fff);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.idf-lp-row-main {
  display: grid;
  grid-template-columns: 64px minmax(160px, 1fr) 120px 150px auto;
  gap: var(--space-3);
  align-items: end;
}

.idf-lp-row-sub {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  align-items: end;
}

/* Feld-Stack: kleine Caption ueber dem Eingabefeld. */
.idf-lp-f {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.idf-lp-f > span {
  font-size: var(--font-xs);
  color: var(--mid);
  font-weight: var(--weight-medium);
}

.idf-lp-input {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line, #e5e5e5);
  border-radius: 6px;
  background: var(--white, #fff);
  font-family: inherit;
  font-size: var(--font-sm);
  color: var(--ink);
  box-sizing: border-box;
  width: 100%;
}
select.idf-lp-input { padding-right: 4px; }
.idf-lp-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}

/* Die Lieferant-Combobox fuellt ihre Zelle voll aus. */
.idf-lp-f-lieferant .combobox { width: 100%; }

/* Trash-Button — sitzt am Ende der Hauptzeile, unten buendig zu den Inputs. */
.idf-lp-del {
  height: 34px;
  min-width: 34px;
  padding: 0 10px;
  border: 1px solid var(--shade-08);
  border-radius: 6px;
  background: var(--white, #fff);
  color: var(--mid);
  cursor: pointer;
  font-size: var(--font-sm);
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.idf-lp-del:hover { background: var(--bg-hover); color: var(--ink); }
.idf-lp-del.is-armed {
  border-color: var(--danger, #c0392b);
  color: var(--danger, #c0392b);
  background: var(--tint-danger, rgba(192, 57, 43, 0.08));
}
.idf-lp-del:disabled { opacity: 0.5; pointer-events: none; }

/* Add-Button im inline-add-Look (dashed, zentriert). */
.idf-lp-addbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1.5px dashed var(--shade-08);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--mid);
  font-family: inherit;
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.idf-lp-addbtn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-hover);
}
.idf-lp-addbtn:disabled { opacity: 0.6; pointer-events: none; }

.idf-lp-empty-msg {
  padding: var(--space-4);
  text-align: center;
  color: var(--mid);
  font-style: italic;
}

/* Schmales Modal: Karten stapeln statt Grid. */
@media (max-width: 720px) {
  .idf-lp-row-main { grid-template-columns: 1fr 1fr; }
  .idf-lp-row-main .idf-lp-f-lieferant { grid-column: 1 / -1; }
  .idf-lp-del { grid-column: 1 / -1; }
  .idf-lp-row-sub { grid-template-columns: 1fr 1fr; }
}