/* Umstellungsplanung
 *
 * Vier Seiten als Tabs in einer Nav-Seite. Stil folgt den App-Karten
 * (helle Surfaces, grüne Akzente); die Status-Badges nutzen das
 * Ampel-Schema Bio (grün) / U-Ware (orange) / konv (grau).
 */

.umstellung-page {
  display: grid;
  gap: 14px;
}

.umstellung-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.umstellung-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.umstellung-tab {
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  background: #fff;
  color: var(--accent-color, #1a4d1a);
  border: 1px solid var(--accent-color, #1a4d1a);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  min-height: 40px;
}

.umstellung-tab:hover {
  background: rgba(26, 77, 26, 0.07);
}

.umstellung-tab.is-active {
  background: var(--accent-color, #1a4d1a);
  color: #fff;
}

.umstellung-plan-picker select {
  padding: 7px 10px;
  border: 1px solid var(--border, #aaa);
  border-radius: 8px;
  font-size: 0.82rem;
  font-family: inherit;
  background: #fff;
  min-height: 40px;
}

.umstellung-toolbar-status {
  justify-content: flex-end;
  min-height: 0;
}

.umstellung-autosave-status {
  margin: 0;
  text-align: right;
  font-style: italic;
}

/* ===================================================================
 * Zeitplan: nummerierte, verschiebbare Meilenstein-Zeilen
 * =================================================================== */

.umstellung-zeitplan-table {
  table-layout: auto;
}

/* Text-Spalte nimmt die gesamte Freifläche; von/bis rücken dadurch
   automatisch ganz nach rechts (vor die Aktions-Spalte). Der
   Input-Selektor ist bewusst hoch-spezifisch: die generische Regel
   `.umstellung-table input[type="text"] { max-width: 150px }` steht
   später in der Datei und würde sonst gewinnen. */
.umstellung-zeitplan-table .umstellung-meilenstein-text-cell {
  width: 100%;
}

.umstellung-zeitplan-table .umstellung-meilenstein-text-cell input[type="text"] {
  width: 100%;
  max-width: none;
}

.umstellung-meilenstein-nr {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
}

.umstellung-meilenstein-nr-head {
  width: 64px;
}

.umstellung-meilenstein-nummer {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 20px;
  text-align: right;
}

.umstellung-drag-handle {
  cursor: grab;
  color: var(--text-muted, #999);
  font-size: 0.95rem;
  user-select: none;
}

.umstellung-meilenstein-row.is-dragging {
  opacity: 0.45;
}

.umstellung-meilenstein-row.is-drop-target td {
  border-top: 2px solid var(--accent-color, #1a4d1a);
}

.umstellung-meilenstein-datum,
.umstellung-meilenstein-datum-head {
  white-space: nowrap;
  width: 1%;
}


/* Sektionen */
.umstellung-section {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--border, #d9e7da);
  border-left: 4px solid var(--accent-color, #1a4d1a);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
  margin-bottom: 0;
}

.umstellung-section h3 {
  margin: 0 0 8px 0;
  font-size: 0.95rem;
  color: var(--text);
}

#umstellung-tab-content {
  display: grid;
  gap: 14px;
}

.umstellung-help-text {
  margin: 4px 0 8px 0;
  font-size: 0.74rem;
  color: var(--text-muted, #666);
  line-height: 1.4;
}

/* Parameter-Reihe (Umstellungsbeginn, Crop-Set, U-Ware-Faktor) */
.umstellung-param-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 16px;
  margin-bottom: 8px;
}

.umstellung-param-grid label {
  display: grid;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-color, #1a4d1a);
}

.umstellung-param-grid input,
.umstellung-param-grid select {
  padding: 6px 8px;
  border: 1px solid var(--border, #aaa);
  border-radius: 6px;
  font-size: 0.85rem;
  font-family: inherit;
  background: #fff;
  min-height: 36px;
}

/* Tabellen */
.umstellung-table-scroll {
  overflow-x: auto;
}

.umstellung-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.umstellung-table thead th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted, #555);
  padding: 6px 8px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(232, 245, 235, 0.45);
}

.umstellung-table tbody td {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  vertical-align: middle;
}

.umstellung-table input[type="text"],
.umstellung-table input[type="date"],
.umstellung-table input[type="number"],
.umstellung-table select {
  padding: 4px 6px;
  border: 1px solid var(--border, #ccc);
  border-radius: 5px;
  font-size: 0.78rem;
  font-family: inherit;
  background: #fff;
  min-height: 32px;
  max-width: 150px;
}

.umstellung-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.umstellung-num-input {
  width: 90px;
  text-align: right;
}

/* Kompakte Zahlen-Inputs in der Flächenplan-Tabelle (Ertrag/Preis je
   U-Jahr) — hier stehen nur zwei-/dreistellige Zahlen; Spinner aus,
   damit die schmale Breite voll dem Wert gehört. Der gewonnene Platz
   geht an die Frucht-Dropdowns (s.u.). */
.umstellung-num-input-sm {
  width: 48px;
  padding-left: 4px;
  padding-right: 4px;
  appearance: textfield;
  -moz-appearance: textfield;
}

.umstellung-num-input-sm::-webkit-outer-spin-button,
.umstellung-num-input-sm::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.umstellung-center {
  text-align: center;
}

.umstellung-vorfrucht-input {
  width: 110px;
}

.umstellung-total-row td {
  font-weight: 700;
  border-top: 2px solid rgba(15, 23, 42, 0.15);
  background: rgba(232, 245, 235, 0.5);
}

.umstellung-muted-row td {
  color: var(--text-muted, #888);
}

.umstellung-actions {
  text-align: right;
  white-space: nowrap;
}

.umstellung-row-delete {
  border: 1px solid #b94646;
  color: #b94646;
  background: #fff;
  border-radius: 5px;
  cursor: pointer;
  padding: 3px 9px;
  font-size: 0.8rem;
  min-height: 30px;
}

.umstellung-row-delete:hover {
  background: #b94646;
  color: #fff;
}

/* Status-Badges */
.umstellung-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.umstellung-status-bio {
  background: rgba(26, 122, 26, 0.12);
  color: #146014;
  border: 1px solid rgba(26, 122, 26, 0.4);
}

.umstellung-status-uware {
  background: rgba(204, 102, 0, 0.1);
  color: #8a4500;
  border: 1px solid rgba(204, 102, 0, 0.4);
}

.umstellung-status-konv {
  background: rgba(100, 100, 100, 0.08);
  color: #555;
  border: 1px solid rgba(100, 100, 100, 0.3);
}

.umstellung-nv-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 0.66rem;
  background: rgba(100, 100, 100, 0.08);
  color: #666;
  border: 1px dashed rgba(100, 100, 100, 0.4);
}

/* Übersicht-Header mit Jahr-Umschalter */
.umstellung-uebersicht-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.umstellung-jahr-toggle {
  display: flex;
  gap: 4px;
}

/* Betriebsrechnung */
.umstellung-br-table {
  max-width: 760px;
}

.umstellung-br-section td {
  font-weight: 700;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-color, #1a4d1a);
  background: rgba(232, 245, 235, 0.55);
  border-top: 2px solid rgba(15, 23, 42, 0.08);
  padding-top: 8px;
}

.umstellung-br-important td {
  font-weight: 700;
  background: rgba(247, 250, 247, 0.9);
}

.umstellung-br-result td {
  font-weight: 700;
  background: rgba(232, 245, 235, 0.75);
  border-top: 2px solid var(--accent-color, #1a4d1a);
}

/* Speichern */
.umstellung-save-section {
  border-left-color: #1e5aa0;
}

.umstellung-save-form {
  display: grid;
  gap: 8px;
}

.umstellung-save-form label {
  display: grid;
  gap: 3px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-color, #1a4d1a);
}

.umstellung-save-form input {
  padding: 6px 8px;
  border: 1px solid var(--border, #aaa);
  border-radius: 6px;
  font-size: 0.85rem;
  font-family: inherit;
}

.umstellung-save-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.umstellung-primary-button,
.umstellung-secondary-button,
.umstellung-danger-button {
  padding: 7px 12px;
  font-size: 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  min-height: 38px;
  border: 1px solid var(--accent-color, #1a4d1a);
}

.umstellung-primary-button {
  background: var(--accent-color, #1a4d1a);
  color: #fff;
}

.umstellung-primary-button:hover {
  background: #154015;
}

.umstellung-secondary-button {
  background: #fff;
  color: var(--accent-color, #1a4d1a);
}

.umstellung-secondary-button:hover:not(:disabled) {
  background: rgba(26, 77, 26, 0.08);
}

.umstellung-danger-button {
  background: #fff;
  color: #b94646;
  border-color: #b94646;
}

.umstellung-danger-button:hover:not(:disabled) {
  background: #b94646;
  color: #fff;
}

.umstellung-secondary-button:disabled,
.umstellung-danger-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* Kosten-Anpassungen je U-Jahr (Betriebsrechnung, Tabelle unten) */

.umstellung-override-table th[colspan] {
  text-align: left;
  background: rgba(26, 77, 26, 0.08);
  font-weight: 600;
}

.umstellung-override-table tbody th {
  font-weight: 400;
  text-align: left;
}

.umstellung-override-input {
  width: 110px;
  text-align: right;
  padding: 4px 6px;
}

/* Gesetzter Ersatzwert hebt sich vom Stammdaten-Platzhalter ab */
.umstellung-override-input.has-override {
  font-weight: 600;
  border-color: var(--accent-color, #1a4d1a);
  background: rgba(26, 77, 26, 0.06);
}


/* Auf-/zuklappbare Sektion "Kosten-Anpassungen je U-Jahr" — gleicher
   Look wie die Sektions-Balken der Szenario-Tabellen: vollbreiter
   hellgrüner Balken, Pfeil links. `.table-section-toggle` (tables.css)
   resettet den globalen Button-Stil inkl. Schatten. */

.umstellung-collapsible-heading {
  margin: 0;
}

.umstellung-collapsible-heading .table-section-toggle {
  background: #eaf2ec;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 700;
}

.umstellung-collapsible-heading .table-section-toggle:hover {
  background: #dfeae1;
}

.umstellung-override-count {
  font-size: 0.7em;
  font-weight: 600;
  background: rgba(26, 77, 26, 0.12);
  color: var(--accent-color, #1a4d1a);
  border-radius: 10px;
  padding: 2px 8px;
}


/* Flächenplan: Frucht-/Vorfrucht-Dropdowns mit FESTER Breite — 120px
   reichen für den längsten Fruchtnamen ("Wintertriticale", 83px Text
   bei 0.78rem, im Browser nachgemessen), ohne dass die globale
   select-width:100%-Regel (forms.css) die Tabelle aufbläht. Knappe
   Zellen-Polsterung und kompakte Badges, damit die Tabelle (~950px)
   auch auf kleineren Screens ohne Scrollen passt. */
.umstellung-flaechenplan-table select {
  width: 120px;
  min-width: 0;
  max-width: 120px;
}

.umstellung-flaechenplan-table thead th,
.umstellung-flaechenplan-table tbody td {
  padding-left: 4px;
  padding-right: 4px;
}

.umstellung-flaechenplan-table .umstellung-status-badge {
  padding: 2px 5px;
}


/* Flächenplan — Soll-Frucht-Karte (Layout/Legende/Details über die
   geteilten rotation-planning-* / field-map-* Klassen in layout.css).
   Nur der Hover-Tooltip ist modul-spezifisch. */
.flaechenplan-karte-tooltip {
  position: absolute;
  display: none;
  z-index: 5;
  pointer-events: none;
  transform: translate(12px, -50%);
  background: rgba(17, 24, 20, 0.92);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}


/* ===================================================================
 * Druck-/PDF-Ansicht (Flächenplan + Betriebsrechnung)
 * =================================================================== */

/* Druckleiste am Seitenkopf */
.umstellung-druck-leiste {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
}

/* Druck-Kopf nur im Druck sichtbar */
.umstellung-druck-kopf {
  display: none;
}

.umstellung-druck-kopf h2 {
  margin: 0 0 2px 0;
  font-size: 1.2rem;
}

.umstellung-druck-kopf p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted, #555);
}

@media print {
  /* Alle Regeln strikt auf body.umstellung-druck gescopet, damit ein
     normaler Ctrl+P-Druck auf anderen Seiten unberührt bleibt. */
  body.umstellung-druck #app-sidebar,
  body.umstellung-druck .workspace-toolbar,
  body.umstellung-druck #message,
  body.umstellung-druck .no-print {
    display: none !important;
  }

  body.umstellung-druck .app-shell {
    display: block !important;
  }

  body.umstellung-druck .content-area {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }

  body.umstellung-druck .umstellung-druck-kopf {
    display: block !important;
    margin-bottom: 10px;
  }

  /* Eingeklappte Tabellenzeilen für den Druck aufklappen */
  body.umstellung-druck .excel-like-table .is-hidden,
  body.umstellung-druck .umstellung-table .is-hidden {
    display: table-row !important;
  }

  /* Formularfelder in den Sektionen als reinen Text darstellen */
  body.umstellung-druck .umstellung-section select,
  body.umstellung-druck .umstellung-section input,
  body.umstellung-druck .umstellung-flaechenplan-table select,
  body.umstellung-druck .umstellung-flaechenplan-table input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    -webkit-appearance: none;
    appearance: none;
    color: var(--text) !important;
  }

  /* Sektionen/Tabellen möglichst nicht über Seiten zerreißen */
  body.umstellung-druck .umstellung-section,
  body.umstellung-druck .table-overview-plain-block {
    break-inside: avoid;
    box-shadow: none !important;
  }

  /* Karte: feste, druckbare Höhe */
  body.umstellung-druck .rotation-planning-map-shell,
  body.umstellung-druck .rotation-planning-map-canvas {
    min-height: 320px !important;
    height: 320px !important;
  }

  /* Vollkosten-Tabellen NICHT abschneiden: am Bildschirm scrollen sie
     (max-height + overflow:auto, Tabelle width:max-content). Im Druck
     müssen alle Zeilen UND Spalten erscheinen → Deckel + Scroll-
     Clipping aufheben, Tabelle auf Seitenbreite schrumpfen, Sticky
     abschalten, Schrift/Polsterung verkleinern. */
  body.umstellung-druck .fullcost-table-wrapper,
  body.umstellung-druck .results-table-wrapper,
  body.umstellung-druck .table-overview-block,
  body.umstellung-druck .calculation-overview-stack,
  body.umstellung-druck .umstellung-table-scroll {
    max-height: none !important;
    overflow: visible !important;
  }

  body.umstellung-druck .fullcost-table-wrapper .excel-like-table,
  body.umstellung-druck .excel-like-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
    font-size: 8.5pt !important;
  }

  /* Sticky-Header/-Spalte im Druck deaktivieren (sonst Überlappungen
     / falsche Hintergründe auf Papier). */
  body.umstellung-druck .excel-like-table th,
  body.umstellung-druck .excel-like-table td {
    position: static !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* Zahlenspalten dürfen umbrechen statt die Tabelle zu sprengen. */
  body.umstellung-druck .excel-like-table .number-cell {
    white-space: normal !important;
  }
}


/* Subventionen-Seite (Planung): "gilt für"-Phasen als kompakte
   Checkbox-Reihe (UJ1 / UJ2 / Bio nebeneinander). */
.subventionen-phase-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.subventionen-phase-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.76rem;
  white-space: nowrap;
}

.subventionen-phase-check input {
  margin: 0;
}

/* Wirtschaftsplan — manuell überschreibbare Werte (Einnahmen wie
   Ausgaben). Gesetzter Override hebt sich ab wie .umstellung-override-input;
   ↺ setzt die Zeile auf den App-Wert zurück. */
.wp-ertrag-input,
.wp-praemie-input,
.wp-aufwand-input,
.wp-investition-input,
.wp-kredit-input {
  width: 96px;
  text-align: right;
}

.wp-override-active {
  font-weight: 600;
  border-color: var(--accent-color, #1a4d1a);
  background: rgba(26, 77, 26, 0.08);
}

.wp-erloes-zelle {
  white-space: nowrap;
}

.wp-reset-button {
  margin-left: 4px;
  min-height: 28px;
  padding: 2px 7px;
  border: 1px solid var(--border, #ccc);
  border-radius: 5px;
  background: #fff;
  color: var(--accent-color, #1a4d1a);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.wp-reset-button:hover {
  background: rgba(26, 77, 26, 0.08);
}

/* Analyse → Nährstoffe: Ampel-Status des Naturland-Checks + kompakte
   Faustzahlen-Inputs + Hinweisliste. */
.np-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 600;
}

.np-status-gruen {
  background: rgba(26, 77, 26, 0.12);
  color: #1a4d1a;
}

.np-status-gelb {
  background: rgba(180, 130, 0, 0.14);
  color: #7a5800;
}

.np-status-rot {
  background: rgba(160, 30, 30, 0.12);
  color: #a01e1e;
}

.np-faustzahl-gruppe {
  display: inline-flex;
  gap: 4px;
}

.np-faustzahl-gruppe input {
  width: 64px;
}

.np-hinweise {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  font-size: 0.85rem;
}

/* Nährstoffe: Spaltenköpfe dürfen umbrechen (lange Szenario-Namen
   sollen die Vergleichstabellen nicht in die Breite treiben) —
   .number-cell setzt sonst nowrap. Zahlenzellen bleiben einzeilig. */
.umstellung-table th.np-spaltenkopf {
  white-space: normal;
  overflow-wrap: break-word;
  min-width: 130px;
  max-width: 210px;
  vertical-align: bottom;
}

/* Betriebsmittel-Katalog (System → Betriebsmittel) */
.betriebsmittel-vorschau-frucht {
  display: grid;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-color, #1a4d1a);
  max-width: 340px;
  margin-bottom: 12px;
}

.betriebsmittel-notiz {
  display: grid;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-color, #1a4d1a);
  margin-bottom: 8px;
}

.betriebsmittel-notiz textarea {
  font-weight: 400;
  resize: vertical;
}

/* Gründüngungs-Transfer (Analyse → Nährstoffe) */
.np-transfer-warnung {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(198, 124, 32, 0.12);
  border-left: 3px solid #c67c20;
  font-size: 0.8rem;
  font-weight: 600;
  color: #7a4d10;
}

.np-transfer-vorschlag {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--accent-soft, rgba(36, 107, 69, 0.12));
  border-left: 3px solid var(--accent, #246b45);
  font-size: 0.82rem;
}

.np-transfer-vorschlag p {
  margin: 0 0 8px;
}