/* ══════════════════════════════════════════════════════════════════════════════
   PREISANPASSUNGEN & KOSTENCHRONOLOGIE — Styles (public/price-history.css)
   ──────────────────────────────────────────────────────────────────────────────
   Namespace `.ph-`. Ausschließlich Tokens aus css/design-system.css (keine Hex-
   Farben, keine rohen px-Abstände/Schriftgrößen außerhalb der Token-Schicht).
   Drei Bereiche: Dialog (.ph-form) · Chronologie (.ph-list) · Report (.ph-kpis …).
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── geteilte Kleinteile ─────────────────────────────────────────────────────── */
.ph-muted { color: var(--gray-500); font-weight: var(--fw-normal); }
.ph-loading { padding: var(--space-5); color: var(--gray-500); font-size: var(--text-sm); }
.ph-arrow { color: var(--gray-500); padding: 0 var(--space-1); }

.ph-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
  white-space: normal; overflow-wrap: anywhere;
}
.ph-chip-up   { background: var(--color-danger-soft);  color: var(--color-danger-ink); }
.ph-chip-down { background: var(--color-success-soft); color: var(--color-success-ink); }
.ph-chip-flat { background: var(--gray-100);           color: var(--gray-700); }
.ph-chip-basis { margin-left: var(--space-2); color: var(--gray-500); font-size: var(--text-xs); }

.ph-link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  color: var(--color-sage); font-size: var(--text-xs); font-weight: var(--fw-medium);
  cursor: pointer; text-decoration: none;
}
.ph-link:hover { color: var(--color-sage-hover); text-decoration: underline; }

.ph-check {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--gray-700); cursor: pointer;
  white-space: normal; overflow-wrap: anywhere;
}
.ph-check-sm { font-size: var(--text-xs); color: var(--gray-500); margin-top: var(--space-2); }
.ph-check-inline { margin: 0; }

/* Segment-Umschalter (Richtung / Gruppierung) */
.ph-seg { display: inline-flex; gap: 0; border: 1px solid var(--gray-300); border-radius: var(--radius-md); overflow: hidden; }
.ph-seg button {
  border: 0; background: var(--color-surface); color: var(--gray-700);
  padding: var(--space-2) var(--space-3);
  font: inherit; font-size: var(--text-sm); cursor: pointer;
  white-space: normal; overflow-wrap: anywhere;
  border-right: 1px solid var(--gray-300);
}
.ph-seg button:last-child { border-right: 0; }
.ph-seg button:hover { background: var(--gray-100); }
.ph-seg button.is-on { background: var(--color-sage-soft); color: var(--color-sage-hover); font-weight: var(--fw-semibold); }
.ph-seg-sm button { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }

/* ══ 1) DIALOG „Preisanpassung erfassen" ═══════════════════════════════════════ */
.ph-form { max-width: 640px; }
.ph-form-head { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--gray-900); }
.ph-sec {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  color: var(--gray-500); letter-spacing: 0.06em; text-transform: uppercase;
}
.ph-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.ph-note { resize: vertical; min-height: 60px; }
.ph-file { padding: var(--space-2); }
.ph-doctitle { margin-top: var(--space-2); }

.ph-current {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
  padding: var(--space-3);
  background: var(--gray-100); border-radius: var(--radius-md);
}
.ph-cur-cell { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ph-cur-l { font-size: var(--text-xs); color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.04em; }
.ph-cur-v {
  font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--gray-900);
  font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum", "tnum";
}
.ph-cur-v-sm { font-size: var(--text-base); }
.ph-cur-s { font-size: var(--text-xs); color: var(--gray-500); overflow-wrap: anywhere; }

.ph-preview {
  margin-top: var(--space-3); padding: var(--space-3);
  border-radius: var(--radius-md);
  display: flex; flex-direction: column; gap: var(--space-1);
  font-size: var(--text-sm);
}
.ph-preview-flat { background: var(--gray-100); color: var(--gray-500); }
.ph-preview-up   { background: var(--color-danger-soft);  color: var(--color-danger-ink); }
.ph-preview-down { background: var(--color-success-soft); color: var(--color-success-ink); }
.ph-preview-main {
  font-size: var(--text-lg); font-weight: var(--fw-semibold);
  font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum", "tnum";
}
.ph-preview-sub { font-size: var(--text-xs); opacity: 0.85; }

/* ══ 2) CHRONOLOGIE (Anlagenakte + Report) ═════════════════════════════════════ */
.ph-sum {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  padding: var(--space-3); margin-bottom: var(--space-3);
  background: var(--gray-100); border-radius: var(--radius-md);
}
.ph-sum-cell { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ph-sum-l { font-size: var(--text-xs); color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.04em; }
/* Zahlen-Typografie (Gewicht/Tracking/Ziffernform) kommt zentral aus css/design-system.css
   (Selektorliste im Kennzahlen-Block) — hier nur Größe und kontextabhängige Farbe. */
.ph-sum-v { font-size: var(--text-lg); color: var(--gray-900); }
.ph-sum-v-sm { font-size: var(--text-sm); font-weight: var(--fw-medium); }
.ph-sum-cell.is-up .ph-sum-v   { color: var(--color-danger-ink); }
.ph-sum-cell.is-down .ph-sum-v { color: var(--color-success-ink); }

.ph-list { display: flex; flex-direction: column; }
.ph-entry {
  display: grid; grid-template-columns: 110px 1fr; gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--gray-300);
  border-left: 3px solid transparent;
  padding-left: var(--space-3);
}
.ph-entry:last-child { border-bottom: 0; }
.ph-entry-up   { border-left-color: var(--color-danger); }
.ph-entry-down { border-left-color: var(--color-success); }
.ph-entry-flat { border-left-color: var(--gray-300); }
.ph-entry-date { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ph-entry-d {
  font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--gray-900);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.ph-entry-nr { font-size: var(--text-xs); color: var(--gray-500); font-variant-numeric: tabular-nums; }
.ph-entry-body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.ph-entry-ctx { font-size: var(--text-xs); color: var(--gray-500); overflow-wrap: anywhere; }
.ph-entry-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ph-entry-title { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--gray-900); overflow-wrap: anywhere; }
.ph-entry-vals {
  font-size: var(--text-sm); color: var(--gray-700);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
  overflow-wrap: anywhere;
}
.ph-entry-meta { font-size: var(--text-xs); color: var(--gray-500); overflow-wrap: anywhere; }
.ph-entry-note {
  font-size: var(--text-sm); color: var(--gray-700);
  padding: var(--space-2); background: var(--gray-100); border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
}
.ph-entry-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ══ 3) REPORT-SEITE /preisentwicklung ════════════════════════════════════════ */
.ph-export { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ph-scopebar {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3);
  background: var(--color-sage-soft); color: var(--color-sage-hover);
  border-radius: var(--radius-md); font-size: var(--text-sm);
}
.ph-kpis {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.ph-kpi {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-surface); border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  min-width: 0;
}
/* Größe + Farbe hier, Zahlen-Typografie zentral (css/design-system.css Kennzahlen-Block). */
.ph-kpi-v { font-size: var(--text-xl); color: var(--gray-900); overflow-wrap: anywhere; }
.ph-kpi-l { font-size: var(--text-xs); color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.ph-kpi.is-up .ph-kpi-v   { color: var(--color-danger-ink); }
.ph-kpi.is-down .ph-kpi-v { color: var(--color-success-ink); }

.ph-filterbar { flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.ph-fl { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--gray-700); }
.ph-fl-l { color: var(--gray-500); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.ph-fl-date { width: 150px; }
/* `.ph-fl-obj` entfiel am 17.08.2026 (ein Objektkontext, in der Hauptnavigation). */
.ph-fl-prov { flex: 0 1 200px; }
.ph-fl-reason { flex: 0 1 200px; }
.ph-fl-q { flex: 1 1 200px; min-width: 180px; }

.ph-card {
  background: var(--color-surface); border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: var(--space-4); margin-bottom: var(--section-gap);
}
.ph-card-h {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-3);
}
.ph-card-h h3 { margin: 0; font-size: var(--text-lg); color: var(--color-forest); }
.ph-tablewrap { overflow-x: auto; }
.ph-table { width: 100%; }
.ph-table td.numeric, .ph-table th.numeric {
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum", "tnum";
}
.ph-td-up   { color: var(--color-danger-ink); }
.ph-td-down { color: var(--color-success-ink); }

.ph-top { display: flex; flex-direction: column; }
.ph-top-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 80px 110px auto;
  align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0; border-bottom: 1px solid var(--gray-300);
}
.ph-top-row:last-child { border-bottom: 0; }
.ph-top-name { font-size: var(--text-sm); color: var(--gray-900); min-width: 0; overflow-wrap: anywhere; }
.ph-top-obj { font-size: var(--text-xs); color: var(--gray-500); min-width: 0; overflow-wrap: anywhere; }
.ph-top-pct, .ph-top-val {
  text-align: right; font-size: var(--text-sm); font-weight: var(--fw-semibold);
  color: var(--color-danger-ink);
  font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum", "tnum";
}
.ph-empty-hint { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--gray-500); }

/* ── Responsiv ───────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ph-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .ph-kpis { grid-template-columns: 1fr; }
  .ph-grid2 { grid-template-columns: 1fr; }
  .ph-current { grid-template-columns: 1fr; }
  .ph-entry { grid-template-columns: 1fr; gap: var(--space-2); }
  .ph-entry-date { flex-direction: row; align-items: baseline; gap: var(--space-2); }
  .ph-top-row { grid-template-columns: 1fr auto; row-gap: var(--space-1); }
  .ph-fl-prov, .ph-fl-reason, .ph-fl-q { flex: 1 1 100%; }
}