/*
 * NachtragsPilot – App-Stile. Verwendet ausschließlich die Variablen der
 * zentralen Werksnorm (design-norm.css, wird als letzte Datei eingebunden
 * und überschreibt hier keine Einzelfarbwerte, weil keine definiert werden).
 * Mobile-first: Basisregeln gelten für Smartphones, ab 860px folgt die
 * Desktop-/Büro-Ansicht.
 */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--aqua-text); }

.np-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Kopfband + Reiter kommen aus der Werksnorm (ma-app-kopf/ma-tab-leiste,
   design-norm.css). Hier nur die App-eigene Titelzeile. */
.np-kopf-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.np-kopf-titel h1 {
  margin: 0;
  font-size: 22px;
}

.np-kopf-untertitel {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
}

.np-btn {
  border: none;
  border-radius: var(--ma-field-radius);
  min-height: var(--ma-control-height);
  padding: 0 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  background: var(--white);
  color: var(--navy);
}

.np-btn--primary {
  background: var(--aqua);
  color: var(--navy);
}

.np-btn--primary:hover,
.np-btn--primary:focus-visible {
  color: #04302f;
}

.np-btn--gross {
  width: 100%;
  min-height: 56px;
  font-size: 17px;
}

.np-btn--sekundaer {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
}

/* Werksnorm (Muster CRM): kritische Aktionen visuell von Standardaktionen
   trennen - als "leise Gefahr" erkennbar (roter Text), nicht vollflaechig rot. */
.np-btn--gefahr {
  background: var(--white);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
}

.np-btn--gefahr:hover,
.np-btn--gefahr:focus-visible {
  background: color-mix(in srgb, var(--danger) 8%, var(--white));
  color: var(--danger);
}

/* Zeilenaktionen: zurueckhaltend, treten erst beim Daraufzeigen hervor
   (Muster CRM button.leise-gefahr). */
.np-btn--leise-gefahr {
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
}

.np-btn--leise-gefahr:hover,
.np-btn--leise-gefahr:focus-visible {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--white));
}

/* Einklappbare Karte fuer lange Listen (UI-Regel: standardmaessig zu,
   Titel + Anzahl im Kopf). */
details.np-aufklapp > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 19px;
  color: var(--ink);
  list-style: none;
}
details.np-aufklapp > summary::-webkit-details-marker { display: none; }
details.np-aufklapp > summary::after { content: " ⌄"; color: var(--muted); font-size: 15px; }
details.np-aufklapp[open] > summary::after { content: " ⌃"; }
details.np-aufklapp > summary .np-anzahl { color: var(--muted); font-weight: 400; font-size: 15px; }

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

/* Demo-Schalter sitzt jetzt rechts in der Reiterleiste auf dunklem Grund. */
.np-nav-demo {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, .85);
  white-space: nowrap;
  padding-left: 12px;
  padding-bottom: 6px;
}

.np-inhalt {
  flex: 1;
  padding: 16px;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
}

.np-lade,
.np-leer {
  text-align: center;
  color: var(--muted);
  padding: 48px 16px;
  background: var(--white);
  border: 1px dashed var(--line);
  border-radius: var(--ma-card-radius);
}

.np-leer h2 {
  margin-top: 0;
  color: var(--ink);
}

/* Kacheln/Kennzahlen */
.np-kachel-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.np-kachel {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--ma-card-radius);
  padding: var(--ma-card-padding);
}

/* Ampel-Kante oben (Muster wie die KPI-Kacheln des EinsatzPlaners):
   gruen = gut, gelb = Achtung/Handlung noetig, blau = Information/wartet.
   Zahl und Symbol tragen dieselbe Statusfarbe - das Dashboard zeigt auf
   einen Blick, wo es brennt (Text bleibt immer dabei, nie Farbe allein). */
.np-kachel--erfolg { border-top: 4px solid var(--green); }
.np-kachel--warnung { border-top: 4px solid var(--amber); }
.np-kachel--info { border-top: 4px solid var(--blue); }
.np-kachel--kritisch { border-top: 4px solid var(--red); }

.np-kachel--erfolg .np-kachel-wert, .np-kachel--erfolg .np-kachel-symbol { color: var(--green); }
.np-kachel--warnung .np-kachel-wert, .np-kachel--warnung .np-kachel-symbol { color: var(--amber); }
.np-kachel--info .np-kachel-wert, .np-kachel--info .np-kachel-symbol { color: var(--blue); }
.np-kachel--kritisch .np-kachel-wert, .np-kachel--kritisch .np-kachel-symbol { color: var(--red); }

.np-kachel-symbol {
  position: absolute;
  top: 14px;
  right: 14px;
  opacity: .55;
}

.np-kachel-symbol svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Nummerierte Erste-Schritte-Führung auf der noch leeren Übersicht
   (native Nummerierung, hängende Einrückung). */
.np-erste-schritte {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--ma-card-radius);
  padding: var(--ma-card-padding);
  margin-bottom: 24px;
}
.np-erste-schritte h2 { margin-top: 0; }
.np-erste-schritte ol { margin: 8px 0 0; padding-left: 24px; }
.np-erste-schritte li { margin-bottom: 8px; padding-left: 4px; }
.np-erste-schritte li::marker { color: var(--aqua-text); font-weight: 700; }

/* Hilfe-Seite: Karten, nummerierte Schritte, Bereichsliste, häufige Fragen. */
.np-karte {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--ma-card-radius);
  padding: var(--ma-card-padding);
  margin-bottom: 18px;
}
.np-karte h2 { margin-top: 0; }
.np-schritt-liste { margin: 8px 0 0; padding-left: 24px; }
.np-schritt-liste li { margin-bottom: 8px; padding-left: 4px; }
.np-schritt-liste li::marker { color: var(--aqua-text); font-weight: 700; }
.np-hilfe-liste { margin: 0; padding: 0; list-style: none; }
.np-hilfe-liste li { position: relative; padding-left: 18px; margin-bottom: 8px; }
.np-hilfe-liste li::before { content: "–"; position: absolute; left: 0; color: var(--muted); }
.np-faq { border-top: 1px solid var(--line); padding: 10px 0; }
.np-faq:last-child { border-bottom: 1px solid var(--line); }
.np-faq > summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; }
.np-faq > summary::-webkit-details-marker { display: none; }
.np-faq > summary::after { content: " ⌄"; color: var(--muted); }
.np-faq[open] > summary::after { content: " ⌃"; }
.np-faq p { margin: 8px 0 0; }

.np-kachel-wert {
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
}

.np-kachel-label {
  color: var(--muted);
  font-size: 14px;
}

/* Status: Text + dezente Farbe, nie Farbe allein */
.np-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

.np-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.np-status--neutral { background: var(--paper); color: var(--muted); border-color: var(--line); }
.np-status--info { background: #e7f0fb; color: var(--blue); border-color: rgba(39, 95, 143, .25); }
.np-status--warnung { background: #fbf1df; color: var(--amber); border-color: rgba(150, 106, 9, .25); }
.np-status--erfolg { background: #e4f4ec; color: var(--green); border-color: rgba(31, 139, 102, .25); }
.np-status--kritisch { background: #fbe9e9; color: var(--red); border-color: rgba(184, 66, 66, .25); }

/* Listen: hängende Einrückung, Aufzählungspunkt bündig, Umbruch unter dem Text */
.np-hinweisliste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.np-hinweisliste li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 6px;
}

.np-hinweisliste li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--muted);
}

/* Karten für Listenzeilen (Aufträge/Nachträge) */
.np-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--ma-card-radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.np-zeile:hover,
.np-zeile:focus-visible {
  border-color: var(--aqua);
  box-shadow: 0 8px 20px rgba(7, 27, 54, .10);
  transform: translateY(-1px);
}

/* Status-Akzentkante links: dieselbe Ampel wie die Status-Pille rechts */
.np-zeile--erfolg { border-left-color: var(--green); }
.np-zeile--warnung { border-left-color: var(--amber); }
.np-zeile--info { border-left-color: var(--blue); }
.np-zeile--kritisch { border-left-color: var(--red); }

.np-zeile-haupt {
  min-width: 220px;
  flex: 1 1 auto;
}

.np-zeile-titel {
  font-weight: 700;
  color: var(--navy);
}

.np-zeile-neben {
  color: var(--muted);
  font-size: 14px;
}

.np-zeile-summe {
  font-weight: 700;
  font-size: 17px;
  color: var(--navy);
  white-space: nowrap;
}

/* Filterleiste */
.np-filterleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.np-filterleiste select,
.np-filterleiste input {
  min-height: var(--ma-control-height);
  border-radius: var(--ma-field-radius);
  border: 1px solid var(--line);
  padding: 0 12px;
  font-size: 15px;
}

/* Schrittanzeige Editor */
.np-schritte {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.np-schritt {
  flex: 1 1 140px;
  text-align: center;
  padding: 10px 8px;
  border-radius: var(--ma-field-radius);
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.np-schritt--aktiv {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.np-schritt--fertig {
  background: var(--aqua-soft);
  color: var(--aqua-text);
  border-color: var(--aqua);
}

/* Große Erfassungs-Buttons (Sprache/Foto) für die Baustelle */
.np-erfassung-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.np-erfassung-knopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 10px;
  min-height: 96px;
  border-radius: var(--ma-card-radius);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.np-erfassung-knopf:hover,
.np-erfassung-knopf:focus-visible {
  border-color: var(--aqua);
  box-shadow: 0 8px 20px rgba(7, 27, 54, .10);
  transform: translateY(-1px);
}

.np-erfassung-knopf--aktiv {
  background: #fdeceb;
  border-color: var(--danger);
  color: var(--danger);
}

/* Linien-Symbole im Stil der Website-Produktkarten */
.np-erfassung-symbol svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.np-btn .np-btn-ico {
  width: 18px;
  height: 18px;
  vertical-align: -0.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.np-erfassung-knopf:hover .np-erfassung-symbol svg,
.np-erfassung-knopf:focus-visible .np-erfassung-symbol svg {
  stroke: var(--aqua-text);
}

/* Positionstabelle */
.np-positionen-tabelle {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--ma-card-radius);
  overflow: hidden;
}

.np-positionen-tabelle th,
.np-positionen-tabelle td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 14px;
}

.np-positionen-tabelle th {
  background: var(--paper);
  color: var(--muted);
  font-weight: 600;
}

.np-summenblock {
  margin-top: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--ma-card-radius);
  padding: var(--ma-card-padding);
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 360px;
  margin-left: auto;
}

.np-summenzeile {
  display: flex;
  justify-content: space-between;
}

.np-summenzeile--brutto {
  font-weight: 700;
  font-size: 18px;
  border-top: 1px solid var(--line);
  padding-top: 6px;
}

/* Firmenlogo-Vorschau im Betriebsprofil */
.np-logo-bild {
  max-width: 220px;
  max-height: 90px;
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--ma-field-radius);
  padding: 6px;
  background: var(--white);
}

/* Fotos */
.np-fotoraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.np-foto {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--ma-field-radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
}

.np-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ------------------------------------------------------------------
   Formular- und Hilfsklassen (Maß-Norm).
   WICHTIG: Die Content-Security-Policy der Plattform (style-src 'self')
   blockiert Inline-Stile in style="..."-Attributen. Alle Gestaltung
   MUSS deshalb über diese Klassen laufen, nie über style-Attribute.
   ------------------------------------------------------------------ */

/* Einheitliche Ränder/Hintergründe für alle Felder in Maß-Norm-Containern
   (die Norm selbst regelt Höhe, Radius und Pfeil der Auswahlfelder). */
.ma-compact-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.ma-compact-form select,
.ma-compact-form textarea {
  border: 1px solid var(--line);
  background-color: var(--white);
  color: var(--ink);
  font-family: inherit;
}

.np-feld {
  display: block;
  margin-bottom: 14px;
}

.np-feld-titel {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.np-input {
  min-height: var(--ma-control-height);
  border-radius: var(--ma-field-radius);
  border: 1px solid var(--line);
  padding: 0 12px;
  font-size: 15px;
  background: var(--white);
}

.np-input--voll { width: 100%; }

.np-textarea {
  width: 100%;
  border-radius: var(--ma-field-radius);
  border: 1px solid var(--line);
  padding: 10px 12px;
  font-size: 15px;
  background: var(--white);
}

.np-hilfetext {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.np-hinweis {
  color: var(--muted);
  font-size: 14px;
}

.np-gedaempft { color: var(--muted); }

.np-knopfzeile {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.np-knopfzeile--rechts { justify-content: flex-end; }

.np-filter-feld { flex: 1 1 170px; }
.np-filter-feld--breit { flex: 1 1 220px; }

.np-block { display: block; }
.np-versteckt { display: none; }
.np-rechts { text-align: right; }
.np-flex-1 { flex: 1; }
.np-zeiger { cursor: pointer; }
.np-cursor-standard { cursor: default; }
.np-klick-durch { pointer-events: none; }
.np-scroll-x { overflow-x: auto; }
.np-ohne-rand { border: none; }
.np-selbst-unten { align-self: end; }
.np-minb-160 { min-width: 160px; }
.np-voll-160 { width: 100%; min-width: 160px; }

.np-mt-8 { margin-top: 8px; }
.np-mt-12 { margin-top: 12px; }
.np-mt-16 { margin-top: 16px; }
.np-mr-10 { margin-right: 10px; }
.np-mb-16 { margin-bottom: 16px; }
.np-mb-24 { margin-bottom: 24px; }
.np-my-16 { margin: 16px 0; }

.np-b-70 { width: 70px; }
.np-b-80 { width: 80px; }
.np-b-90 { width: 90px; }
.np-b-100 { width: 100px; }
.np-b-110 { width: 110px; }

.np-foto-platzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--muted);
  font-size: 12px;
}

.np-gestrichelt-box {
  border: 1px dashed var(--line);
  border-radius: var(--ma-field-radius);
  padding: 12px;
  margin-bottom: 14px;
}

.np-vorschlagsliste {
  border: 1px solid var(--line);
  border-radius: var(--ma-field-radius);
  margin-top: 4px;
  display: none;
  background: var(--white);
  max-height: 200px;
  overflow-y: auto;
}

.np-vorschlag-eintrag {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}

.np-vorschlag-knopf {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  cursor: pointer;
}

.np-link-knopf {
  display: inline-block;
  margin-top: 12px;
  text-decoration: none;
  text-align: center;
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  background: var(--navy);
  color: var(--white);
  padding: 12px 20px;
  border-radius: var(--ma-field-radius);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 100000;
  max-width: calc(100vw - 32px);
}

.toast--sichtbar {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast--kritisch { background: var(--danger); }
.toast--info { background: var(--blue); }

/* Dialoge/Overlays immer im Vordergrund vor der shared-ui-Kopfleiste */
.np-dialog-hintergrund {
  position: fixed;
  inset: 0;
  background: rgba(7, 27, 54, .5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100000;
  padding: 0;
}

.np-dialog {
  background: var(--white);
  border-radius: var(--ma-card-radius) var(--ma-card-radius) 0 0;
  padding: 20px;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
}

@media (min-width: 640px) {
  .np-dialog-hintergrund {
    align-items: center;
    padding: 20px;
  }
  .np-dialog {
    border-radius: var(--ma-card-radius);
  }
}

/* Desktop/Büro-Ansicht ab 860px */
@media (min-width: 860px) {
  .np-btn--gross {
    width: auto;
    min-height: var(--ma-control-height);
  }

  .np-inhalt {
    padding: 24px 32px;
  }
}

@media print {
  .np-kopf, .toast, .np-dialog-hintergrund { display: none !important; }
}

/* Eingabefeld und Kennzeichnung nebeneinander (Positionstabelle).
   Ohne diese gemeinsame Zeile rutscht die Kennzeichnung unter das Feld und
   macht die Tabellenzeile doppelt so hoch. */
.np-zelle-mit-hinweis {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  /* Deutlicher Abstand zwischen Eingabefeld und Kennzeichnung. 8px und 14px
     waren zu knapp - beides wirkte wie ein zusammenhaengender Block.
     Von Thorsten am Vergleich ausgewaehlt (27.07.2026). */
  gap: 48px;
}
.np-zelle-mit-hinweis .np-pos-feld { flex: 1 1 auto; }
.np-zelle-mit-hinweis .np-status { flex: 0 0 auto; }

/* Kompakte Kennzeichnung fuer Tabellenzeilen - die normale Groesse wuerde
   neben dem Eingabefeld zu schwer wirken. */
.np-status--kompakt {
  padding: 2px 9px;
  font-size: 12px;
}