/* =========================================================================
   Leistungen-Modul - Modul-eigenes CSS.
   Regel (Web-App-Design-Richtlinie + SHARED-REORG §7): nur Spaltenbreiten
   (Grids ueber CSS-Variable fuer col-resize) + Status-/Freigabe-Farben ueber
   Token-Tints. Alle Listen-Mechanik, Pillen-Geometrie und Input-Skins kommen
   aus _shared (list-grid, inline-edit, app-subnav).
   ========================================================================= */

/* ---- Leistungen-Liste (index.php) --------------------------------------- */
/* Spalten: Aktiv-Haken | Name (flex) | Einheit | EK | VK */
.lst-grid {
  grid-template-columns: var(--lst-cols,
    44px
    minmax(240px, 1fr)
    150px
    120px
    120px);
}

/* Preis-Zellen (EK/VK) rechtsbuendig, damit die Betraege fluchten. */
.lst-cell-preis { justify-self: stretch; text-align: right; }
.lst-cell-preis .idf-list-cell-text { justify-content: flex-end; }

/* Aktiv-Haken vorn nutzt die Shared idf-list-done-pill (is-active = aktiv) -
   kein Modul-CSS noetig. */

/* ---- Preisvergleich-Liste (preisvergleich.php) -------------------------- */
/* Spalten: Freigabe | Leistung (flex) | Unser VK | guenstig | mittel | hoch |
   Einheit | Stand | Markt-Ampel | Loeschen */
.pv-grid {
  grid-template-columns: var(--pv-cols,
    44px
    minmax(200px, 1.4fr)
    120px
    108px
    108px
    108px
    120px
    110px
    44px
    44px);
}

/* Die Preis-Spalten rechtsbuendig (Zahlen fluchten). Der Pen sitzt ueber die
   Shared-Inline-Edit-Host-Klasse rechts neben der Zahl. */
.pv-cell-preis { text-align: right; }
.pv-cell-preis .idf-list-cell-text { justify-content: flex-end; }

/* „Unser VK": unser Verkaufspreis rechtsbuendig. Die Markt-Ampel hat eine
   eigene Icon-Spalte mit Waage-Symbol (wie im Angebot), nicht mehr im VK-Feld. */
.pv-cell-unser-vk .idf-list-cell-text { font-variant-numeric: tabular-nums; }

/* Markt-Ampel: dezente Zeilen-Toenung nach unserem VK vs. dem Band dieser Zeile
   (Muster wie die Aufgaben-/Eisenhower-Zeilen). Nur die vier bewerteten Stufen
   werden getoent; „kein_vergleich" bleibt neutral. Hover verstaerkt den Tint
   statt filter:brightness - so entsteht kein Stacking-Context (Tooltip-Falle,
   s. _shared/ARCHITECTURE.md). Farben = dieselben Tokens wie der Ampel-Punkt. */
.pv-row[data-ampel="guenstig"],
.pv-row[data-ampel="gut"],
.pv-row[data-ampel="hoch"],
.pv-row[data-ampel="teuer"] {
  background: color-mix(in srgb, var(--pv-ampel-c) 12%, var(--white, #fff));
}
.pv-row[data-ampel="guenstig"]:hover,
.pv-row[data-ampel="gut"]:hover,
.pv-row[data-ampel="hoch"]:hover,
.pv-row[data-ampel="teuer"]:hover {
  background: color-mix(in srgb, var(--pv-ampel-c) 22%, var(--white, #fff));
}
.pv-row[data-ampel="guenstig"] { --pv-ampel-c: var(--accent, #167ea0); }
.pv-row[data-ampel="gut"]      { --pv-ampel-c: var(--green,  #2e8540); }
.pv-row[data-ampel="hoch"]     { --pv-ampel-c: var(--yellow, #f9ab00); }
.pv-row[data-ampel="teuer"]    { --pv-ampel-c: var(--red,    #e11d21); }

/* ---- Marktvergleich-Tab im Leistungs-Modal (#250) ----------------------
   Self-contained Band-Editor (marktvergleich-tab.js). Karten-Layout analog
   zum Shared idf-lieferant-preise; nur Modul-Layout, keine Feld-/Pillen-Skins
   nachbauen (Freigabe-Pille + Ampel-Punkt kommen aus _shared). */
.mv-tab { display: flex; flex-direction: column; gap: var(--space-3, 12px); min-height: 0; }

.mv-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3, 12px);
  padding: var(--space-2, 8px) 0;
  border-bottom: 1px solid var(--tint-neutral, #eee);
}
.mv-ref { font-size: var(--font-md, 0.875rem); color: var(--ink, #111); }
.mv-ref strong { font-variant-numeric: tabular-nums; }
.mv-counter { font-size: var(--font-sm, 0.8125rem); color: var(--mid, #555); }
.mv-muted { color: var(--mid, #555); }

.mv-list { display: flex; flex-direction: column; gap: var(--space-3, 12px); }

/* Ein Band als Karte. */
.mv-row {
  border: 1px solid var(--shade-08, rgba(0,0,0,.08));
  border-radius: var(--radius-sm, 6px);
  padding: var(--space-3, 12px);
  background: var(--white, #fff);
  display: flex; flex-direction: column; gap: var(--space-2, 8px);
}
.mv-row-main {
  display: grid;
  grid-template-columns: 56px 48px repeat(3, minmax(72px, 1fr)) 116px auto;
  gap: var(--space-3, 12px);
  align-items: end;
}
/* Varianten-Zeile (varianten-tab.js): Aktiv | Name | Einheit | VK | VK-Menge | Loeschen. */
.mv-var-main {
  grid-template-columns: 56px minmax(150px, 1.4fr) 130px 130px 100px auto;
}
.mv-row-sub {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3, 12px);
  align-items: end;
}
.mv-f-notiz { grid-column: 1 / -1; }

/* Feld-Stack: kleine Caption ueber dem Feld. */
.mv-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mv-f > span {
  font-size: var(--font-xs, 0.75rem);
  color: var(--mid, #555);
  font-weight: var(--weight-medium, 500);
}
.mv-f-frei, .mv-f-ampel { align-items: flex-start; }
.mv-f-ampel .mv-ampel { display: inline-flex; align-items: center; height: 34px; }

.mv-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, 0.8125rem);
  color: var(--ink, #111);
  box-sizing: border-box; width: 100%;
}
select.mv-input { padding-right: 4px; }
.mv-num { text-align: right; font-variant-numeric: tabular-nums; }
.mv-input:focus { outline: 2px solid var(--accent, #167ea0); outline-offset: -1px; border-color: var(--accent, #167ea0); }

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

/* Add-Button (dashed inline-add-Look). */
.mv-addbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: var(--space-2, 8px) var(--space-3, 12px);
  border: 1.5px dashed var(--shade-08, rgba(0,0,0,.08));
  border-radius: var(--radius-sm, 6px);
  background: transparent; color: var(--mid, #555);
  font-family: inherit; font-size: var(--font-sm, 0.8125rem); font-weight: var(--weight-medium, 500);
  cursor: pointer; transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.mv-addbtn:hover { border-color: var(--accent, #167ea0); color: var(--accent, #167ea0); background: var(--bg-hover, #f2f2f2); }
.mv-addbtn:disabled { opacity: 0.6; pointer-events: none; }

.mv-empty-msg { padding: var(--space-4, 16px); text-align: center; color: var(--mid, #555); font-style: italic; }

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

/* Freigabe-Pille vorn nutzt die Shared „erledigt"-Pille (.idf-list-done-pill):
   angehakt (is-active) = freigegeben (confirm-gruen), sonst hohl = Entwurf. Der
   Tooltip sagt den Zustand. Geometrie + Farben kommen aus _shared/list-grid,
   daher hier kein Modul-CSS. */

/* Leistung-Zelle: Layout + Pen-Position kommen aus der Shared .idf-list-cell-name
   (Text content-breit, Pen am Textende) + .idf-inline-edit-host - kein eigenes
   Flex-Pattern. Hier nur das Herkunft-Info-Icon (Pauls notizen als Tooltip). */
.pv-notiz-info { color: var(--neutral-mid); cursor: help; flex: 0 0 auto; margin-left: 2px; }
.pv-notiz-info:hover { color: var(--accent); }

/* Leerer Preis (Band ohne Wert in dieser Stufe) - dezenter Strich. */
.pv-preis-leer { color: var(--neutral-mid); }

/* ---- Detail-Modals (#250) ----------------------------------------------
   Nur Layout fuer modul-eigene Modal-Bloecke. Feld-Skins, Combobox- und
   Modal-Geometrie kommen aus _shared (idf-forms, form-combo, standard-artefakt). */

/* Aktiv-Toggle-Zeile im Leistungen-Modal: Standard-Pille (Shared
   .sa-erledigt-toggle) + kurzer Zustandshinweis, vertikal zentriert. */
.lst-aktiv-row { display: flex; align-items: center; gap: var(--space-2, 8px); }
.lst-aktiv-hint { color: var(--mid); font-size: var(--font-md, 0.875rem); }

/* Die drei Marktpreis-Felder im Preisvergleich-Modal nebeneinander - das
   Shared .idf-form-subgrid liefert nur eine Spalte, hier auf drei erweitert.
   Auf schmalem Viewport einspaltig (analog .idf-form). */
.pv-modal-preise { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .pv-modal-preise { grid-template-columns: 1fr; } }