/* Diagramme und Statistik-Bausteine */

.chart { position: relative; width: 100%; }
.chart__svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart__tick { font-size: 9.5px; fill: var(--muted); font-family: Roboto, sans-serif; }
.chart__leer {
  padding: 30px; text-align: center; color: var(--muted); font-size: 12.5px;
  background: #fafbfa; border: 1px dashed var(--line); border-radius: var(--radius-s);
}

.chart__legend {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px;
  font-size: 11.5px; color: var(--text);
}
.chart__legend-item { display: inline-flex; align-items: center; gap: 5px; }
.chart__swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; display: inline-block; }

.chart__tip {
  position: absolute; z-index: 20; pointer-events: none;
  background: var(--heading); color: #fff; border-radius: var(--radius-s);
  padding: 7px 9px; font-size: 11.5px; box-shadow: var(--shadow-s);
  min-width: 132px; white-space: nowrap;
}
.chart__tip-title {
  font-weight: 500; margin-bottom: 4px; padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.2);
}
.chart__tip-row { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.chart__tip-name { color: rgba(255,255,255,.8); }
.chart__tip-val {
  margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 500; padding-left: 10px;
}

/* ------------------------------------------------------- Liegende Balken */

.hbar { display: flex; flex-direction: column; gap: 5px; }
.hbar__row { display: grid; grid-template-columns: minmax(120px, 1.5fr) 3fr auto; gap: 10px; align-items: center; }
.hbar__label {
  font-size: 12px; color: var(--heading);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hbar__sub { display: block; font-size: 10.5px; color: var(--muted); }
.hbar__track { background: #f0f2f0; border-radius: 3px; height: 15px; overflow: hidden; }
.hbar__fill { height: 100%; border-radius: 3px; min-width: 2px; }
.hbar__value {
  font-size: 12px; font-variant-numeric: tabular-nums; text-align: right;
  min-width: 88px; color: var(--heading); font-weight: 500;
}

.sparkline { width: 100%; height: 26px; display: block; margin-top: 4px; }

/* ------------------------------------------------------------- Statistik */

.stat-section { margin-bottom: 18px; }
.stat-section__head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px;
}
.stat-section__head h2 { font-size: 15px; }
.stat-section__hint { font-size: 11.5px; color: var(--muted); }

.kpi {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 11px 13px;
  display: flex; flex-direction: column; min-height: 92px;
}
.kpi__label {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; gap: 6px;
}
.kpi__value {
  font-family: Ubuntu, sans-serif; font-size: 21px; font-weight: 500;
  color: var(--heading); margin-top: 3px; line-height: 1.15;
}
.kpi__foot { font-size: 11px; color: var(--muted); margin-top: auto; padding-top: 5px; }
.kpi__bench { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 11px; }
.kpi--gut    .kpi__value { color: var(--green-dark); }
.kpi--warnung .kpi__value { color: var(--amber); }
.kpi--kritisch .kpi__value { color: var(--red); }

.ampel { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ampel--gut { background: #0ca30c; }
.ampel--warnung { background: #fab219; }
.ampel--kritisch { background: #d03b3b; }
.ampel--neutral { background: var(--muted); }

.chartgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1150px) { .chartgrid { grid-template-columns: 1fr; } }
.chartgrid--voll { grid-template-columns: 1fr; }

.quelle {
  font-size: 10.5px; color: var(--muted); margin-top: 7px;
  padding-top: 6px; border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------- Gehälter */
/* Lila: in diesem Monat hat sich das Gehalt geändert - wie in der Excel. */
.cell--aenderung {
  background: #e6e0ec;
  box-shadow: inset 2px 0 0 #8064a2;
  font-weight: 500;
}
tr:hover .cell--aenderung { background: #ddd4e6; }
/* Zelle enthält zusätzlich eine Sonderzahlung */
.cell--sonder { font-style: italic; }
.cell--sonder::after {
  content: '*'; color: var(--amber); margin-left: 2px; font-style: normal;
}
/* Grün: "Danke gesagt" bei Sonderzahlungen */
.cell--gedankt { background: #eaf4d8; box-shadow: inset 2px 0 0 #92d050; }
tr:hover .cell--gedankt { background: #e1efc8; }
/* ------------------------------------------- Gehälter & Sonderzahlungen */

/* Die Listen sind lang - jede Zeile zählt. */
.view-gehalt table.grid thead th,
.view-sonder table.grid thead th { padding: 3px 7px; font-size: 11px; line-height: 1.15; }
.view-gehalt table.grid thead th small,
.view-sonder table.grid thead th small { font-size: 9px; }
.view-gehalt .cell, .view-sonder .cell { padding: 2px 7px; min-height: 19px; line-height: 1.3; }
.view-gehalt .col-label__inner,
.view-sonder .col-label__inner { padding: 2px 7px; gap: 5px; }
.view-gehalt tr.grouprow td,
.view-sonder tr.grouprow td { padding: 2px 7px; font-size: 10.5px; }
.view-gehalt .chip, .view-sonder .chip { font-size: 9.5px; padding: 0 5px; }
.view-gehalt .toolbar, .view-sonder .toolbar { padding: 6px 12px; gap: 7px; }
.view-gehalt .th-month, .view-sonder .th-month { min-width: 74px; }
.view-gehalt table.grid td, .view-sonder table.grid td { line-height: 1.3; }

/* Haken mit rotem Zustand */
.haken {
  display: flex; gap: 6px; align-items: center; font-size: 12px;
  cursor: pointer; font-weight: 400; white-space: nowrap;
}
.haken--rot { color: var(--red); font-weight: 500; }
.haken--rot input { accent-color: var(--red); }

/* Monat mit eingerechneter Sonderzahlung */
.cell--sonder {
  background: #fdecea; box-shadow: inset 2px 0 0 var(--red);
  color: var(--red); font-weight: 500; font-style: normal;
}
.cell--sonder::after { content: ''; margin: 0; }
tr:hover .cell--sonder { background: #fbdedb; }

/* Durchschnittsspalten der Sonderzahlungen abheben */
.th-schnitt { background: #eceeec !important; }
.td-schnitt { background: #f4f5f4; }
tr:hover .td-schnitt { background: #edefed; }
.row--total .td-schnitt { background: #eceeec; }

/* Kopfbereich im Mitarbeiterfenster */
.ma-kopf {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line);
}
.ma-kopf__info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }

/* Breiteres Fenster für die Mitarbeiterübersicht */
.modal--xl { width: min(1180px, 100%); }

/* Gruppenverwaltung */
.gruppenliste { display: flex; flex-direction: column; gap: 3px; }
.gruppenzeile {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 9px; border: 1px solid var(--line); border-radius: var(--radius-s);
  background: #fbfcfb;
}
.gruppenzeile__nr {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: var(--green-dark); color: #fff;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 500;
}
.gruppenzeile__name { font-weight: 500; color: var(--heading); font-size: 13px; }
.gruppenzeile__aktionen { margin-left: auto; display: flex; gap: 2px; }
/* --------------------------------------------- Mitarbeiterverwaltung */

.view-ma table.list td { padding: 4px 8px; }
.view-ma table.list th { padding: 5px 8px; }

/* Ablagefläche für den Lohnimport */
.ablage {
  border: 2px dashed var(--line-strong); border-radius: var(--radius);
  background: #fafbfa; padding: 22px; text-align: center;
  transition: border-color .12s, background .12s;
}
.ablage--aktiv { border-color: var(--green); background: var(--green-tint); }
.ablage__inhalt { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ablage__inhalt svg { width: 26px; height: 26px; color: var(--green-dark); }
.ablage__titel { font-family: Ubuntu, sans-serif; font-size: 15px; color: var(--heading); }
.ablage__text { font-size: 12px; color: var(--muted); max-width: 520px; line-height: 1.45; }

/* Ergebniszeilen der Formatprüfung */
.pruefzeile {
  border: 1px solid var(--line); border-left: 3px solid #0ca30c;
  border-radius: var(--radius-s); padding: 8px 10px; background: #fbfcfb;
}
.pruefzeile--fehler { border-left-color: var(--red); background: var(--red-tint); }
.pruefzeile__kopf { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12.5px; }
.pruefzeile__text { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.pruefzeile__fehler { font-size: 11.5px; color: var(--red); margin-top: 4px; }
.pruefzeile__warnung { font-size: 11.5px; color: var(--amber); margin-top: 4px; }

/* Gelb: Abrechnung weicht von der Gehaltstabelle ab */
.cell--pruefen {
  background: #fdf6e7; box-shadow: inset 2px 0 0 #fab219;
  color: var(--amber); font-weight: 500;
}
tr:hover .cell--pruefen { background: #fbeed0; }