/* app.css — Designsprache der Heizungs-Schmidt-Gruppe (E-55, E-28).
 * Die Werte stammen 1:1 aus GISKO-Design-Prompt.md und wurden dort per
 * getComputedStyle von heizungs-schmidt.de ausgelesen. Nicht neu schaetzen.
 * Zwei Vorgaben aus docs/08-ui-konzept.md sind hier wichtiger als bei GISKO:
 * Bedienbarkeit am iPad (grosse Flaechen, kein Hover noetig) und ein nuechterner,
 * schwarz-weisser Druck.
 */

:root {
  --marke-blau:      #2A6BB7;
  --marke-blau-alt:  #1F5390;
  --marke-blau-tief: #172F57;
  --marke-gelb:      #FFDD00;
  --flaeche-blau:    #E9F0F8;
  --text:            #434343;
  --text-dunkel:     #343434;
  --linie:           #d8dee6;
  --grund:           #ffffff;

  /* Trefferklassen nach E-41. Farbe steht nie allein, immer mit Wort. */
  --klasse-gruen:  #2e7d32;
  --klasse-gelb:   #b58900;
  --klasse-grau:   #6b7280;
}

* { box-sizing: border-box; border-radius: 0 !important; }

/* Muss stehen bleiben: Ein eigenes display im CSS (etwa display:flex auf einem
   Block, der mit dem hidden-Attribut versteckt wird) schlaegt sonst das
   Verstecken, und der Block ist sichtbar, obwohl er es nicht sein soll. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: Montserrat, "Segoe UI", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  color: var(--text);
  background: var(--grund);
  -webkit-text-size-adjust: 100%;
}

h1 { font-size: 23px; font-weight: 700; color: var(--marke-blau); margin: 0 0 4px; }
h2 { font-size: 17px; font-weight: 700; color: var(--marke-blau); margin: 24px 0 8px; }
.klein { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Kopf ---------- */

.kopf {
  background: linear-gradient(#2E5DAD 0%, #172F57 100%);
  border-bottom: 4px solid var(--marke-gelb);
  padding: 14px 20px 12px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 28px 100%, 0 calc(100% - 22px));
}
.kopf .hs-logo { height: 40px; width: auto; }
.kopf .hs-logo path { fill: #fff; }
.kopf .wer { margin-left: auto; color: #cddcf0; font-size: 12px; }
.kopf .wer button { margin-left: 12px; }

/* ---------- Reiter ---------- */

.reiter { display: flex; border-bottom: 1px solid var(--linie); background: var(--flaeche-blau); }
.reiter button {
  border: 0; background: transparent; color: var(--marke-blau);
  font: 700 15px/1 inherit; padding: 16px 26px; cursor: pointer;
  border-bottom: 3px solid transparent;
}
.reiter button[aria-selected="true"] { background: var(--grund); border-bottom-color: var(--marke-gelb); }

main { padding: 20px; max-width: 1320px; }   /* breiter seit E-139: Platz für das Foto in der Prüfliste */

/* ---------- Formular ---------- */

.feld { margin-bottom: 14px; }
.feld > label { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text); }
.feld .hinweis { font-size: 12px; color: #6b7280; margin-top: 3px; }

input[type=text], input[type=number], input[type=password], input[type=search], select, textarea {
  width: 100%; padding: 12px; font: inherit; color: var(--text);
  border: 1px solid var(--linie); background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--marke-blau); outline-offset: -2px; }
input[readonly] { background: #f4f6f9; }

.bleibt { border-left: 4px solid var(--marke-gelb); padding-left: 10px; }
.bleibt .marke { font-size: 11px; color: #6b7280; }

.zeile { display: flex; gap: 14px; flex-wrap: wrap; }
.zeile > * { flex: 1 1 180px; }

fieldset { border: 1px solid var(--linie); padding: 10px 14px 14px; margin: 0 0 14px; }
legend { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text); padding: 0 6px; }
.wahl { display: flex; gap: 10px; flex-wrap: wrap; }
.wahl label {
  flex: 1 1 160px; border: 1px solid var(--linie); padding: 12px; cursor: pointer;
  display: flex; align-items: center; gap: 10px; background: #fff;
}
.wahl input:checked + span { font-weight: 700; color: var(--marke-blau); }
.wahl label:has(input:checked) { border-color: var(--marke-blau); background: var(--flaeche-blau); }

/* ---------- Schaltflaechen ---------- */

button, .knopf {
  font: 700 15px/1 inherit; padding: 14px 26px; cursor: pointer;
  border: 1px solid var(--marke-blau); background: transparent; color: var(--marke-blau);
}
button.primaer { background: var(--marke-blau); color: #fff; }
button.primaer:hover { background: var(--marke-blau-alt); border-color: var(--marke-blau-alt); }
button:hover { background: var(--flaeche-blau); }
button.primaer:disabled, button:disabled { opacity: .45; cursor: default; }
button.gross { padding: 18px 34px; font-size: 16px; width: 100%; }

/* ---------- Vorschlag der Erkennung ---------- */

.vorschlag { background: var(--flaeche-blau); border-left: 4px solid var(--marke-blau); padding: 12px 14px; margin-bottom: 14px; }
.vorschlag .grund { font-size: 12px; color: #4b5563; margin-top: 4px; }
.vorschlag.schwach { border-left-color: var(--marke-gelb); }
.marken { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.marke-chip { border: 1px solid var(--marke-blau); color: var(--marke-blau); padding: 5px 10px; font-size: 13px; background: #fff; }

/* ---------- Liste ---------- */

table.liste { border-collapse: collapse; width: 100%; }
table.liste th {
  background: var(--flaeche-blau); color: var(--marke-blau);
  font-size: 11px; text-transform: uppercase; text-align: left; padding: 9px 10px;
}
table.liste td { border-bottom: 1px solid var(--linie); padding: 9px 10px; vertical-align: top; }
table.liste tr:hover td { background: #f7f9fc; }
.platz { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }

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

.meldung { padding: 12px 14px; margin-bottom: 14px; border-left: 4px solid var(--marke-blau); background: var(--flaeche-blau); }
.meldung.warnung { border-left-color: var(--marke-gelb); background: #fffbe6; color: #6b5900; }
.meldung.fehler  { border-left-color: #b3261e; background: #fbeaea; color: #7a1c17; }
.meldung.gut     { border-left-color: var(--klasse-gruen); background: #e8f4ea; color: #1d5023; }

/* ---------- Anmeldung ---------- */

.anmeldung { max-width: 380px; margin: 60px auto; }

/* ---------- Druck: schwarz-weiss und nuechtern (E-55) ---------- */

@media print {
  .kopf { background: none; color: #000; border-bottom: 2px solid #000; clip-path: none; }
  .kopf .hs-logo path { fill: #000; }
  .reiter, button, .vorschlag { display: none !important; }
  table.liste th { background: #eee; color: #000; }
  body { font-size: 11pt; }
}

/* ---------- iPad ---------- */

@media (max-width: 900px) {   /* iPad hoch: 768, 810, 820, 834 CSS-Pixel - alle sollen stapeln */
  main { padding: 14px; }
  .zeile > * { flex: 1 1 100%; }
  input, select, textarea { font-size: 16px; }   /* verhindert das Zoomen von Safari */
  .reiter button { padding: 14px 16px; font-size: 14px; }
}

/* ---------- Aendern, Zaehlen, Foto (E-82, E-84) ---------- */

.aendern-kopf {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--flaeche-blau); border-left: 4px solid var(--marke-blau);
  padding: 10px 14px; margin-bottom: 14px;
}
.aendern-kopf button { padding: 8px 16px; font-size: 13px; background: #fff; }

.schalter {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
  font-size: 12px; color: #4b5563; cursor: pointer; text-transform: none; font-weight: 400;
}
.schalter input { width: auto; }

.foto-vorschau { display: block; max-width: 260px; margin-top: 8px; border: 1px solid var(--linie); }
.foto-mini { width: 44px; height: 44px; object-fit: cover; display: block; border: 1px solid var(--linie); cursor: zoom-in; }

.klein-knopf { padding: 6px 12px; font-size: 12px; }

table.liste tbody tr { cursor: pointer; }

@media print { .foto-mini, .klein-knopf, .aendern-kopf { display: none !important; } }

/* Bei step="any" sind die eingebauten Pfeilchen des Zahlenfelds ohne Wirkung.
   Ein totes Bedienelement ist schlimmer als keines - also weg damit; gezaehlt
   wird ueber die Pfeiltasten (app.js). */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* ---------- Pruefen: Ablage, Treffer, Klassen (E-41) ---------- */

.ablage {
  border: 2px dashed var(--marke-blau); background: #fff;
  padding: 34px 20px; text-align: center; margin-bottom: 18px;
}
.ablage.heiss { background: var(--flaeche-blau); }
.ablage strong { color: var(--marke-blau); font-size: 17px; display: block; margin-bottom: 6px; }
.ablage button { padding: 6px 14px; font-size: 13px; }

.position { border: 1px solid var(--linie); margin-bottom: 14px; }
.position-kopf { background: var(--flaeche-blau); padding: 10px 12px; }

/* Die Farbe steht nie allein - jede Zeile traegt ihr Wort und ihren Satz (E-41).
   Gruen, Gelb und Grau statt Gruen/Orange/Rot: Rot hiesse "kein Treffer", und
   Gruen gegen Orange ist genau die Paarung, die bei Rot-Gruen-Sehschwaeche
   verschwimmt. */
.treffer {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 10px 12px; border-top: 1px solid var(--linie);
}
.treffer > div { flex: 1; }
.treffer .klasse {
  flex: 0 0 130px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  padding: 4px 8px; color: #fff; text-align: center;
}
.treffer.gruen .klasse { background: var(--klasse-gruen); }
.treffer.gelb  .klasse { background: var(--klasse-gelb); }
.treffer.grau  .klasse { background: var(--klasse-grau); }
.treffer.gruen { border-left: 4px solid var(--klasse-gruen); }
.treffer.gelb  { border-left: 4px solid var(--klasse-gelb); }
.treffer.grau  { border-left: 4px solid var(--klasse-grau); }
.treffer .grund { font-size: 13px; color: #4b5563; margin-top: 3px; }
.treffer button { padding: 8px 16px; font-size: 13px; white-space: nowrap; }

.ohne { padding: 6px 0; border-bottom: 1px solid var(--linie); font-size: 13px; }
details summary { cursor: pointer; font-weight: 700; color: var(--marke-blau); padding: 10px 0; }

tr.entnommen td { color: #9ca3af; text-decoration: line-through; }

/* Die Kommissionierliste wird im Lager benutzt, nicht vorgezeigt: schwarz-weiss
   und nuechtern (E-55). */
@media print {
  .nichtdrucken, .ablage, #pruefMeldung, #projektMeldung { display: none !important; }
  .treffer .klasse { background: none !important; color: #000; border: 1px solid #000; }
  tr.entnommen td { color: #666; }
}

/* ---------- Gegenueberstellung: kalkuliert -> Ersatz (E-106, neu gebaut mit E-133) ---------- */

/* Feste Spaltenbreiten: Die Tabelle passt in die Seite, statt nach rechts
   herauszuwachsen (docs/14). Lange Texte brechen um. */
table.vergleichstabelle { table-layout: fixed; }
table.vergleichstabelle td { overflow-wrap: anywhere; }
table.vergleichstabelle tr.position td { vertical-align: top; }
table.vergleichstabelle tr.position:hover td { background: transparent; }
.sp-position { width: 120px; }
.sp-kalkuliert { width: 24%; }
.sp-groesse { width: 64px; }
.sp-bedarf { width: 70px; }
.sp-pfeil { width: 22px; }

/* Die Vorschläge einer Position: eine kleine Liste in EINER Zelle, mit
   denselben Spalten wie der Kopf darüber. */
td.vorschlaege, th.sp-vorschlaege { padding: 0; }
.ersatzzeile {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 72px 76px 96px 88px;
  gap: 0 10px; align-items: center; padding: 8px 8px 8px 10px;
  border-left: 5px solid transparent; cursor: pointer;
}
.ersatzzeile + .ersatzzeile { border-top: 1px solid var(--linie); }
.ersatzzeile:hover { background: #f7f9fc; }
.ersatzzeile.gruen { border-left-color: var(--klasse-gruen); }
.ersatzzeile.gelb  { border-left-color: var(--klasse-gelb); }
.ersatzzeile.grau  { border-left-color: var(--klasse-grau); }
.ersatzzeile.ersatzkopf { cursor: default; padding-top: 0; padding-bottom: 0; }
.ersatzzeile.ersatzkopf:hover { background: transparent; }
.v-foto { width: 44px; height: 44px; }   /* feste Größe, damit Zeilen mit und ohne Foto gleich stehen (E-139) */
.v-groesse { white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.v-groesse.abweichend { color: var(--klasse-grau); font-weight: 400; }
.v-menge { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.v-platz { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ersatzzeile .begruendung { color: #4b5563; margin-top: 4px; }
.ersatzzeile .klein { font-weight: 400; text-transform: none; letter-spacing: 0; }
.weitere-knopf { margin: 4px 0 8px 15px; }
/* Schmalere Bildschirme (Beamer mit 1024 oder 1280 Pixeln, iPad quer): Die
   festen Spalten ruecken zusammen, damit der Name des Ersatzartikels nicht
   Buchstabe fuer Buchstabe umbricht (E-139). */
@media (max-width: 1280px) {
  .sp-position { width: 84px; }
  .sp-kalkuliert { width: 18%; }
  .sp-groesse { width: 56px; }
  .sp-bedarf { width: 60px; }
  .ersatzzeile { grid-template-columns: 40px minmax(0, 1fr) 56px 60px 86px 78px; gap: 0 6px; padding-left: 6px; }
  .v-foto { width: 40px; height: 40px; }
  .v-foto .foto-mini { width: 40px; height: 40px; }
}
.groesse { white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.geteilt { color: #92400e; }

/* Der gelockerte Abschnitt ist deutlich abgesetzt (E-133, docs/14 B-2). */
.gelockert-titel { margin: 32px 0 4px; padding-top: 14px; border-top: 3px solid var(--klasse-grau); color: #4b5563; }

.stelle { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }
.stelle .klein { font-weight: 400; text-transform: none; letter-spacing: 0; color: #6b7280; white-space: normal; }
.menge { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.pfeil { color: var(--marke-blau); font-weight: 700; text-align: center; }



.werkzeuge { display: flex; align-items: center; gap: 14px; margin: 10px 0 14px; flex-wrap: wrap; }
.werkzeuge button { padding: 8px 16px; font-size: 13px; }
.werkzeuge .hinweis { font-size: 12px; color: #6b7280; }

/* Löschen und Zurücksetzen (E-114, E-115): rot umrandet statt rot gefüllt —
   sichtbar, aber nicht der Knopf, auf dem die Hand von selbst landet. */
button.gefahr { color: #b42318; border-color: #b42318; background: #fff; }
button.gefahr:hover { background: #fdecea; }

/* Projekte: die Übersicht als Kacheln (E-122) */
.projektkacheln { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.projektkachel { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 14px; min-width: 150px; text-align: left; background: #fff; }
.projektkachel strong { font-size: 15px; color: var(--marke-blau); }
.projektkachel.aktiv { border-color: var(--marke-blau); box-shadow: inset 4px 0 0 var(--marke-gelb); }

/* Einplanen aus der Suche (E-124) */
td.knoepfe { white-space: nowrap; }
.einplan-dialog { border: 1px solid #c9d3df; padding: 22px 24px; max-width: 520px; width: 92vw; }
.einplan-dialog::backdrop { background: rgba(20, 30, 45, .35); }
.einplan-dialog h2 { margin-top: 0; }
.knopfzeile { display: flex; gap: 10px; margin-top: 14px; }

/* Sortieren per Spaltenkopf in der Suche (E-129) */
th[data-sortieren] { cursor: pointer; user-select: none; white-space: nowrap; }
th[data-sortieren]:hover { color: var(--marke-blau-alt, #1f5594); text-decoration: underline; }
th.sortiert { color: var(--marke-blau); }
.pfeilchen { font-size: 10px; margin-left: 2px; }
td.eingeplant { font-weight: 700; color: var(--marke-blau); white-space: nowrap; }

/* Große Bildansicht aus der Suche (E-135): so groß wie das Fenster erlaubt,
   Seitenverhältnis bleibt, Klick irgendwohin schließt. */
.bild-dialog { padding: 0; border: 0; background: transparent; max-width: 94vw; max-height: 94vh; cursor: zoom-out; }
.bild-dialog::backdrop { background: rgba(10, 16, 26, .82); }
.bild-dialog img { display: block; max-width: 94vw; max-height: calc(94vh - 52px); width: auto; height: auto; margin: 0 auto; background: #fff; }
.bild-leiste { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 2px 0; color: #fff; font-size: 14px; }
.bild-leiste button { background: #fff; }