/* ============================================================
   vertraege-vorlagen — Modul-spezifische Styles (Vertragsvorlagen)
   ------------------------------------------------------------
   Additiv zu den Shared-Listen-Patterns (idf-list-grid) und zum
   Standard-Artefakt. Nur Spalten-Grid, Pillen-Color-Modifier und
   das Layout der Positionen-Sub-Liste im Modal.
   Tokens, kein Hex. Geometrie der Pillen kommt aus .idf-pill-tag,
   die Icon-Pillen aus dem flag-check-Baustein.
   ============================================================ */

/* ---- Spalten-Grid (6): Bezeichnung · Version · Art · Gilt für · Gültig ab · Löschen ---- */
/* Breiten aus der CSS-Variable (col-resize-Baustein); Fallback = Defaults. */
.vvl-grid {
  grid-template-columns: var(--vvl-cols, minmax(240px, 1fr) 120px 150px 220px 150px 52px);
}

@media (max-width: 1100px) {
  /* col-resize im Schmal-Layout inaktiv (Modul-Grid gewinnt hier). */
  .idf-colresize-layer { display: none; }
  .idf-colresize-scroll .idf-list-thead,
  .idf-colresize-scroll .idf-list-rows { width: auto; min-width: 0; }
}

/* Enger Desktop: Gilt für (4.) und Gültig ab (5.) weg. `!important` und die
   601px-Untergrenze aus denselben zwei Gruenden wie im Register
   (T15/#601): die Zeilen-Regel verliert sonst gegen die Shared-Zellenregel,
   und unter 600 px entscheiden die data-m-Rollen. */
@media (max-width: 1100px) and (min-width: 601px) {
  .vvl-grid { grid-template-columns: minmax(180px, 1fr) 100px 130px 52px; }
  .vvl-list-thead .vvl-grid > div:nth-child(4),
  .vvl-list-thead .vvl-grid > div:nth-child(5),
  .vvl-row .vvl-grid > .vvl-cell-rollen,
  .vvl-row .vvl-grid > div:nth-child(5) { display: none !important; }
}

/* ---- Zellen ---- */
/* Art traegt eine Pen-Pille und darf deshalb NICHT umbrechen, sonst rutscht
   der Pen in eine zweite Zeile. Die Rollen-Zelle hat keinen Pen und darf. */
.vvl-cell-art {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  min-width: 0;
}
.vvl-cell-rollen {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
}

.vvl-cell-delete-head {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Vorfassungen treten zurück, bleiben aber lesbar. */
.vvl-row.is-archiv .vvl-bez { color: var(--mid); }

/* ---- Art-Pille (Color-Modifier; Geometrie aus shared .idf-pill-tag) ---- */
/* Gleiche Zuordnung wie in vertraege.css, damit Vorlage und Vertrag
   dieselbe Vertragsart gleich einfärben. */
.vvl-art-badge.is-av        { background: var(--tint-primary); color: var(--primary); }
.vvl-art-badge.is-wartung,
.vvl-art-badge.is-service   { background: var(--tint-accent); color: var(--accent); }
.vvl-art-badge.is-lizenz,
.vvl-art-badge.is-leasing,
.vvl-art-badge.is-miete,
.vvl-art-badge.is-liefer,
.vvl-art-badge.is-kauf,
.vvl-art-badge.is-sonstiges { background: var(--neutral-bg); color: var(--mid); }

/* ---- Rolle-Pille: identisch zu vertraege.css (kunde = Erlös, lieferant = Kosten) ---- */
.vvl-rolle-badge.is-kunde     { background: var(--tint-confirm); color: var(--confirm); }
.vvl-rolle-badge.is-lieferant { background: var(--tint-accent);  color: var(--accent); }
.vvl-rolle-badge.is-partner   { background: var(--neutral-bg);   color: var(--mid); }

/* ---- Empty-State: Aktion unter dem Text ---- */
.vvl-empty-actions {
  margin-top: var(--space-3);
  display: flex;
  justify-content: center;
}

/* `.vvl-modal-hint` ist ersatzlos weg (v0.4.2): die Hinweiszeile ist der
   Shared-Baustein `_shared/blocks/hint` (`.idf-hint`). Mit ihm entfallen
   auch die beiden Flex-Workarounds (`min-width: 0` am Kasten und am
   `> span`) - der Kasten ist kein Flex-Container mehr. Der `code`-Skin
   fuer die Platzhalter-Tokens liegt jetzt Shared als `.idf-hint code`. */

/* Platzhalter-Liste: eigene Zeile, umbrechend, statt einer endlosen Zeile. */
.vvl-platzhalter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-top: 4px;
}

/* ---- Modal: Markdown-Reiter ---- */
.vvl-md-tab {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ---- Modal: Rollen-Auswahl (flag-check-Reihe) ---- */
.vvl-rollen-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ---- Modal: Positionen-Sub-Liste ---- */
.vvl-punkte-tab {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.vvl-punkte-bereich {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.vvl-punkte-bereich-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 8px 10px;
  background: var(--neutral-bg);
  border-bottom: 1px solid var(--line);
  font-weight: 500;
  color: var(--ink);
}
.vvl-punkte-bereich-head small {
  color: var(--mid);
  font-weight: 400;
  margin-left: 6px;
}

/* ---- Gruppen-Kopf: einmal pro Gruppe editierbar, nicht je Zeile ---- */
/* Vorher stand die Gruppe als Freitext in jeder Position - bei 88 TOMs in 11
   Gruppen ist ein Tippfehler damit unvermeidlich und zerlegt die Gruppe.
   Jetzt wird der Name einmal gepflegt und auf alle Zeilen der Gruppe
   durchgeschrieben. */
.vvl-punkte-gruppe-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 10px 3px;
}
.vvl-gruppe-input {
  flex: 1 1 auto;
  min-width: 0;
  /* Der Name einer Gruppe wird gelesen UND getippt, ist also Inhalt und keine
     Meta-Zeile (Issue 937, Regel 11). Er stand auf 12 px und grau, waehrend
     die Punkte darunter auf 16 px schwarz stehen: die Ueberschrift war
     kleiner als das, was unter ihr steht. */
  font-size: var(--font-base);
  font-weight: var(--weight-medium, 500);
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs, 3px);
  padding: 2px 6px;
  height: auto;
}
.vvl-gruppe-input:hover  { border-color: var(--line); }
.vvl-gruppe-input:focus  { border-color: var(--primary); background: var(--bg); outline: none; }
.vvl-gruppe-count { color: var(--mid); font-size: var(--font-xs2); }

/* Zeile: Vorbelegt-Pille · Titel · Löschen. Die Gruppe steht im Gruppen-Kopf. */
.vvl-punkt-row {
  display: grid;
  grid-template-columns: 44px minmax(160px, 1fr) 44px;
  align-items: center;
  gap: var(--space-2);
  padding: 3px 10px;
}
.vvl-punkt-row + .vvl-punkt-row { border-top: 1px solid var(--line); }
.vvl-punkt-row:hover { background: var(--bg-hover); }

/* Titel-Zelle im Listen-Pattern: Text, Pen-Pille rechts. Im Ruhezustand steht
   nur der Text da, das Bearbeiten macht IDF.inlineEditCells - kein
   Dauer-Input, kein eigener Skin (Joerg: uebersichtlicher). */
.vvl-cell-titel {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.vvl-punkt-titel {
  min-width: 0;
  font-size: var(--font-base);
  overflow-wrap: anywhere;
}

/* ---- Anlagen-Reiter: Text oben, Positionen darunter ---- */
.vvl-anlage-tab {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.vvl-anlage-trenner {
  margin: var(--space-2) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: var(--font-lg);
  font-weight: var(--weight-medium, 500);
  color: var(--ink);
}