/* Absatzplanung – App-Stile.
   Verwendet ausschließlich die Norm-Variablen aus design-norm.css
   (lädt als letzte Stildatei und bleibt Quelle der Wahrheit). */

* { box-sizing: border-box; }

/* Dokumentierte Abweichung von der Norm-Feldhoehe (Manifest §18): Die
   Planungsmatrix zeigt 12 Monate x Artikel mit je zwei Zellen (Plan/Ist);
   Zellen und Tabellenknoepfe bleiben deshalb kompakt. Ein Wert, eine Stelle. */
:root { --ap-kompakt-hoehe: 34px; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- Kopfbereich ---------- */

/* Kopfband + Reiter kommen aus der Werksnorm (ma-app-kopf/ma-tab-leiste,
   design-norm.css). Hier nur die App-eigene Zentrierung auf 1500px. */
.app-kopf .ma-tab-leiste {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}

.kopf-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: baseline;
  justify-content: space-between;
  max-width: 1500px;
  margin: 0 auto;
}

.app-kopf h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0;
}

.app-untertitel {
  font-size: 14px;
  font-weight: 400;
  opacity: .8;
  margin-left: 8px;
}

.cloud-status {
  margin: 0;
  font-size: 13px;
  opacity: .85;
}

.cloud-status.cloud-fehler { color: var(--aqua-light); font-weight: 700; opacity: 1; }

/* ---------- Inhalt ---------- */

main {
  max-width: 1500px;
  margin: 0 auto;
  padding: 20px 22px 60px 22px;
  display: grid;
  gap: 18px;
}

/* Rasterkinder duerfen schmaler als ihr Inhalt werden (min-width: auto waere
   die Vorgabe) – erst dann scrollt die breite Planungsmatrix in ihrem
   .table-wrap statt die ganze Seite seitlich zu schieben. */
main > * { min-width: 0; }

.karten-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.ma-card h2 {
  margin: 0 0 12px 0;
  font-size: 17px;
}

.ma-card h3 {
  margin: 18px 0 8px 0;
  font-size: 15px;
}

.hinweis {
  color: var(--muted);
  font-size: 13.5px;
  margin: 6px 0 0 0;
}

/* Aufzählungen mit hängender Einrückung (Plattform-Regel) */
.hinweis-liste {
  list-style: none;
  margin: 8px 0 0 0;
  padding: 0;
  color: var(--muted);
  font-size: 13.5px;
}

.hinweis-liste li {
  position: relative;
  padding-left: 18px;
  margin: 4px 0;
}

.hinweis-liste li::before {
  content: "•";
  position: absolute;
  left: 4px;
  top: 0;
  color: var(--aqua-text);
}

/* ---------- Kennzahlen-Kacheln ---------- */

.kpi-kachel {
  border: 1px solid var(--line);
  border-radius: var(--ma-card-radius);
  background: var(--white);
  padding: 16px 18px;
}

.kpi-kachel .kpi-titel {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0;
}

.kpi-kachel .kpi-wert {
  margin: 6px 0 0 0;
  font-size: 24px;
  font-weight: 900;
  color: var(--navy);
}

.kpi-kachel .kpi-neben {
  margin: 4px 0 0 0;
  font-size: 13px;
  color: var(--muted);
}

.kpi-gut { color: var(--green); }
.kpi-schlecht { color: var(--red); }

/* ---------- Statusabzeichen ---------- */

.status-badge {
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--aqua-soft);
  color: var(--green);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.status-badge.warn { background: color-mix(in srgb, var(--amber-flaeche) 22%, white); color: var(--amber); }
.status-badge.bad  { background: color-mix(in srgb, var(--red) 10%, white); color: var(--red); }

/* ---------- Tabellen ---------- */

.table-wrap { overflow-x: auto; }

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}

th, td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
  vertical-align: middle;
}

th {
  color: var(--muted);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
}

td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }

tfoot td {
  font-weight: 900;
  color: var(--navy);
  border-top: 2px solid var(--line);
}

/* ---------- Planungsmatrix ---------- */

.matrix-steuerung {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--ma-field-min), 1fr));
  gap: var(--ma-form-gap);
  align-items: end;
}

.matrix-tabelle th.monat-kopf { text-align: center; min-width: 96px; }
.matrix-tabelle th.monat-kopf .monat-zusatz {
  display: block;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  font-weight: 400;
}

.matrix-tabelle th.monat-gesperrt { background: var(--paper); }

.matrix-tabelle td.artikel-zelle { min-width: 220px; }
.matrix-tabelle .artikel-nummer { font-weight: 700; color: var(--navy); }
.matrix-tabelle .artikel-neben { display: block; font-size: 12.5px; color: var(--muted); }

.gruppen-zeile td {
  background: var(--aqua-soft);
  color: var(--navy);
  font-weight: 900;
  font-size: 13px;
}

.zellen-paar {
  display: grid;
  gap: 4px;
  justify-items: stretch;
}

.zellen-paar input {
  width: 88px;
  height: var(--ap-kompakt-hoehe);
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: calc(var(--ma-field-radius) * 2 / 3);
  font: inherit;
  font-size: 13.5px;
  text-align: right;
  background: var(--white);
  color: var(--ink);
}

.zellen-paar input:focus-visible { outline: 3px solid var(--aqua); outline-offset: 1px; }

.zellen-paar input:disabled {
  background: var(--paper);
  color: var(--muted);
}

.zellen-paar input.ist-feld { border-style: dashed; }

.zellen-wert {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  text-align: right;
  min-height: 16px;
}

.zeilen-summe { white-space: nowrap; font-weight: 700; color: var(--navy); }

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 10px 0 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- Säulendiagramme (vertikal) ---------- */

.saeulen-diagramm {
  display: flex;
  gap: 18px;
  align-items: stretch;
  overflow-x: auto;   /* viele Gruppen scrollen waagerecht, statt zu quetschen */
  padding-top: 6px;
  margin-top: 6px;
}

.saeulen-gruppe {
  flex: 1;
  min-width: 110px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.saeulen-flaeche {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  border-bottom: 2px solid var(--line);
  padding: 0 6px;
}

.saeule-huelle {
  height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  flex: 1;
  max-width: 72px;
}

.saeule-wert {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.saeule {
  width: 100%;
  max-width: 48px;
  height: 2px;
  border-radius: calc(var(--ma-field-radius) * 2 / 3) calc(var(--ma-field-radius) * 2 / 3) 0 0;
  background: var(--blue);
}

.saeule.plan { background: var(--blue); }
.saeule.ist { background: var(--green); }

.saeulen-titel {
  margin: 0;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.saeulen-titel span {
  display: block;
  font-weight: 400;
  color: var(--muted);
  font-size: 12.5px;
}

/* ---------- Liniendiagramm (SVG) ---------- */

.trend-svg { width: 100%; height: auto; display: block; }
.trend-linie { fill: none; stroke-width: 2.5; }
.trend-linie.plan { stroke: var(--blue); }
.trend-linie.ist { stroke: var(--green); }
.trend-punkt.plan { fill: var(--blue); }
.trend-punkt.ist { fill: var(--green); }
.trend-achse { stroke: var(--line); stroke-width: 1; }
.trend-beschriftung { fill: var(--muted); font-size: 10px; }

/* ---------- Formulare / Knöpfe ---------- */

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  align-items: center;
}

.primary-action, .secondary-action, .danger-action {
  min-height: var(--ma-control-height);
  padding: 8px 18px;
  border-radius: var(--ma-field-radius);
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  border: 1px solid transparent;
}

.primary-action {
  background: var(--navy);
  color: var(--white);
}

.secondary-action {
  background: var(--white);
  color: var(--navy);
  border-color: var(--line);
}

.secondary-action:hover, .secondary-action:focus-visible { border-color: var(--navy); }

.danger-action {
  background: var(--white);
  color: var(--red);
  border-color: var(--line);
}

.danger-action:hover, .danger-action:focus-visible { border-color: var(--red); }

.primary-action:focus-visible, .secondary-action:focus-visible, .danger-action:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 2px;
}

button:disabled { opacity: .55; cursor: not-allowed; }

.klein-knopf {
  min-height: var(--ap-kompakt-hoehe);
  padding: 4px 12px;
  border-radius: calc(var(--ma-field-radius) * 2 / 3);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.klein-knopf:hover, .klein-knopf:focus-visible { border-color: var(--navy); }
.klein-knopf.gefahr { color: var(--red); }
.klein-knopf.gefahr:hover, .klein-knopf.gefahr:focus-visible { border-color: var(--red); }

/* ---------- Ein-/ausklappbare Listen (Standard: zu) ---------- */

details.liste-karte {
  border: 1px solid var(--line);
  border-radius: var(--ma-card-radius);
  background: var(--white);
  padding: 0;
}

details.liste-karte > summary {
  cursor: pointer;
  list-style: none;
  padding: 16px var(--ma-card-padding);
  font-weight: 900;
  color: var(--navy);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

details.liste-karte > summary::-webkit-details-marker { display: none; }

details.liste-karte > summary::after { content: "▸"; color: var(--muted); }
details.liste-karte[open] > summary::after { content: "▾"; }

details.liste-karte > summary:focus-visible { outline: 3px solid var(--aqua); outline-offset: -3px; }

details.liste-karte > .liste-inhalt {
  padding: 0 var(--ma-card-padding) var(--ma-card-padding) var(--ma-card-padding);
}

.anzahl-pille {
  background: var(--aqua-soft);
  color: var(--aqua-text);
  border-radius: 999px;
  font-size: 12.5px;
  padding: 3px 10px;
  font-weight: 700;
  margin-left: auto;
}

/* ---------- Meldungen ---------- */

.app-message {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 100000;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--ma-field-radius);
  padding: 12px 18px;
  font-size: 14.5px;
  max-width: min(680px, calc(100vw - 40px));
  box-shadow: var(--shadow);
  margin: 0;
}

.app-message.error { background: var(--red); }

.fusszeile {
  color: var(--muted);
  font-size: 12.5px;
  text-align: right;
}

/* Import-Vorschau / Fehlerliste */
.fehler-liste {
  list-style: none;
  margin: 8px 0 0 0;
  padding: 0;
  font-size: 13.5px;
  color: var(--red);
}

.fehler-liste li {
  position: relative;
  padding-left: 18px;
  margin: 3px 0;
}

.fehler-liste li::before {
  content: "•";
  position: absolute;
  left: 4px;
  top: 0;
}

/* Zugriffsverwaltung */
.zuordnung-zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.zuordnung-tochter { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }

/* Responsive Feinheiten */
@media (max-width: 720px) {
  main { padding: 16px 14px 50px 14px; }
  .kpi-kachel .kpi-wert { font-size: 20px; }
}

/* Anlege-/Bearbeiten-Formulare in den Stammdaten (Maß-Norm ma-compact-form / ma-form-grid):
   Beschriftung über dem Feld, Feld über die ganze Spaltenbreite, Rand und Fläche wie in
   Feinplanung und Nachtragspilot. Ohne diese Regeln standen Beschriftungen neben dem Feld und
   die Felder zeigten den grauen Browser-Standardrand (10.10.2026). */
.ma-compact-form .ma-form-grid > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.ma-compact-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.ma-compact-form select,
.ma-compact-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  background-color: var(--white);
  color: var(--ink);
  font-family: inherit;
}
.ma-compact-form input:focus-visible,
.ma-compact-form select:focus-visible,
.ma-compact-form textarea:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 1px;
  border-color: var(--aqua);
}
.ma-compact-form h3 { margin: 22px 0 12px; }
/* Ein einzelnes Feld in einer Reihe (z. B. Portal-E-Mail) nicht über die ganze Kartenbreite ziehen */
.ma-compact-form .ma-form-grid:has(> label:only-child) { max-width: 440px; }