/*
  Swiss-Dokument-Styling für die BOBI-Dokument-Engine (Offerten/Rechnungen).
  Namespaced unter .swiss-doc, damit nichts mit dem dunklen BOBI-Theme kollidiert.
  Portiert aus dem eigenständigen Kontrastbau-Generator.
*/

.swiss-doc {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #1c1e21;
  background: #ffffff;
}

.swiss-doc input[type="number"]::-webkit-inner-spin-button,
.swiss-doc input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.swiss-doc input[type="number"] {
  -moz-appearance: textfield;
}

.swiss-doc .cursor-edit:focus-within {
  border-color: #c5a059 !important;
  box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.15);
}

.swiss-doc input,
.swiss-doc button,
.swiss-doc canvas {
  transition: all 0.2s ease-in-out;
}

/*
  Das dunkle BOBI-Portal-Theme (styles.css) setzt global
  "input, select, textarea { background-color: navy; color: white; !important }".
  Das würde auch die Eingabefelder in diesem weissen Dokument treffen und beim
  Fokussieren (nur Hintergrund wird weiss, Schrift bleibt aber weiss) unsichtbaren
  Text erzeugen. Hier deshalb für alle Formularfelder im Dokument explizit wieder
  auf helles Papier-Design mit dunkler Schrift zurücksetzen.
*/
.swiss-doc input,
.swiss-doc select,
.swiss-doc textarea {
  background-color: #f8f9fa !important;
  color: #1c1e21 !important;
  border: 1px solid #e5e7eb !important;
}

.swiss-doc input:focus,
.swiss-doc select:focus,
.swiss-doc textarea:focus {
  outline: none;
  border-color: #c5a059 !important;
  background-color: #ffffff !important;
  color: #1c1e21 !important;
  box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.15);
}

.swiss-doc .unit-input {
  background-color: transparent !important;
  border: none !important;
}

.swiss-doc input[type="range"] {
  background-color: transparent !important;
  border: none !important;
}

.swiss-doc input[type="checkbox"] {
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
}

.swiss-doc .section-block {
  page-break-inside: avoid;
  break-inside: avoid;
}

.swiss-doc .avoid-break {
  page-break-inside: avoid;
  break-inside: avoid;
}

.swiss-doc [contenteditable="true"] {
  transition: background-color 0.2s;
}
.swiss-doc [contenteditable="true"]:hover {
  background-color: rgba(197, 160, 89, 0.05);
}
/*
  Ohne explizite Textfarbe bleibt beim Fokussieren die geerbte Farbe stehen — z.B.
  bei Abschnitts-Titeln in der dunklen Kopfzeile (weisse Schrift). Da der Hintergrund
  beim Fokus auf Weiss wechselt, wäre der Text sonst unsichtbar (weiss auf weiss).
*/
.swiss-doc [contenteditable="true"]:focus {
  background-color: #ffffff !important;
  color: #1c1e21 !important;
  outline: 2px solid #c5a059;
}

/* Kunden-Modus: Positionen/Kopfdaten gesperrt, nur Optional-Checkboxen + Unterschrift aktiv */
.swiss-doc[data-mode="customer"] .edit-only {
  display: none !important;
}
.swiss-doc[data-mode="customer"] [contenteditable] {
  cursor: default;
}
/*
  Die Rabatt & Skonto-Box (.edit-only) ist im Kunden-Modus ausgeblendet — ohne diese Regel
  bliebe die Kalkulationsübersicht daneben nur halb so breit wie der Leistungsbeschrieb
  darüber. Sie füllt dann stattdessen die volle Breite aus (genau wie der Leistungsbeschrieb),
  für ein einheitlicheres Bild. Die Zahlen-Zeilen darin bleiben aber kompakt und rechts-
  bündig (siehe .kalkulation-inner) statt über die ganze Breite auseinandergezogen zu werden.
*/
.swiss-doc[data-mode="customer"] .kalkulation-uebersicht {
  grid-column: 1 / -1;
}
.swiss-doc[data-mode="customer"] .kalkulation-inner {
  max-width: 20rem;
  margin-left: auto;
}

/*
  Druckoptimierung: nur das Dokument selbst wird gedruckt, der Rest der Seite ausgeblendet.

  Bewusst KEIN "visibility:hidden auf body * + position:absolute auf .swiss-doc"-Trick mehr:
  In der Partnerbereich-Seite sitzt .swiss-doc innerhalb eines scrollbaren Containers
  (overflow-y-auto) und mehrerer unbenannter Wrapper-Divs — je nach Browser/Druck-Engine
  wird das absolut positionierte Element dabei unterschiedlich verankert (mal am Seitenrand,
  mal versetzt), was zu Sprüngen/Verschiebungen führte. Stattdessen werden die umgebenden
  Chrome-Elemente (Sidebar, Kopfzeile, Buttons — via allgemeiner .no-print-Klasse in
  styles.css) direkt per display:none entfernt, sodass .swiss-doc ganz normal im
  Dokumentfluss oben beginnt, ohne jede Positionierungs-Unsicherheit.
*/
@media print {
  /* Allgemein (nicht auf .swiss-doc beschränkt!) — greift auch auf offer-view.html,
     wo die Kunden-Seiten-Chrome (Überschrift, Status-Banner, "Akzeptieren"-Leiste)
     ausserhalb von .swiss-doc liegt und sonst mitgedruckt würde. */
  .no-print {
    display: none !important;
  }

  .swiss-doc {
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Editier-Werkzeuge (Rabatt-Regler, Skonto-Checkbox etc.) gehören nie ins gedruckte
     Dokument — auch nicht, wenn der Partner direkt aus dem Editor heraus druckt. */
  .swiss-doc .edit-only,
  .swiss-doc button,
  .swiss-doc .interactive-notice,
  .swiss-doc input[type="checkbox"],
  .swiss-doc input[type="range"] {
    display: none !important;
  }

  /* Kalkulationsübersicht füllt die Zeile, sobald die Rabatt&Skonto-Box (siehe oben) beim
     Drucken ausgeblendet ist — unabhängig vom sonst nur im Kunden-Modus geltenden data-mode.
     Die Zahlen-Zeilen bleiben trotzdem kompakt & rechtsbündig statt auseinandergezogen. */
  .swiss-doc .kalkulation-uebersicht {
    grid-column: 1 / -1 !important;
  }
  .swiss-doc .kalkulation-inner {
    max-width: 20rem !important;
    margin-left: auto !important;
  }

  .swiss-doc [contenteditable="true"] {
    outline: none !important;
    border: none !important;
    background: transparent !important;
  }

  /*
    Ausnahme von der Regel oben: Die "Offerte"/"Rechnung"-Titel-Badge ist zwar auch
    contenteditable, braucht ihren dunklen Hintergrund aber zwingend — sonst wäre der
    weisse Text auf der (durch die Regel oben transparent gewordenen) Fläche unsichtbar.
    Steht bewusst NACH der allgemeinen Regel, damit sie dank gleicher Spezifität gewinnt.
  */
  .swiss-doc .doc-type-badge {
    background-color: #0E1C2F !important;
    color: #ffffff !important;
  }

  .swiss-doc input {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    text-align: right;
    box-shadow: none !important;
    font-weight: 600 !important;
    color: #1c1e21 !important;
  }

  .swiss-doc .qty-input {
    text-align: center !important;
  }

  .swiss-doc * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /*
    Mehrspaltige Bereiche nutzen Tailwinds "md:"-Präfix (z.B. md:grid-cols-2). Die
    tatsächliche Druckbreite von A4 abzüglich @page-Rand liegt aber unter Tailwinds
    768px-Schwelle, wodurch diese Klassen beim Drucken/PDF-Export nie greifen und
    alles nur noch einspaltig untereinander gerendert wird — z.B. rutschten Logo &
    Firmendaten unter den (dann volle Breite einnehmenden) Empfänger-Block, oder
    "Zahlungskonditionen"/"Gewährleistung" landeten untereinander statt nebeneinander.

    Genereller Sicherheitsnetz-Fallback zuerst: JEDES Element, das die Tailwind-Klasse
    "md:grid-cols-2" bzw. "md:flex-row" trägt, wird automatisch zweispaltig erzwungen —
    damit nicht jede einzelne Stelle im Dokument-Template manuell nachgepflegt werden
    muss, falls künftig weitere solche Bereiche dazukommen. Die spezifischeren Regeln
    danach ergänzen bei Bedarf noch Abstände/Ausrichtung für einzelne Bereiche.
  */
  .swiss-doc [class~="md:grid-cols-2"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  .swiss-doc [class~="md:flex-row"] {
    display: flex !important;
    flex-direction: row !important;
  }

  .swiss-doc header {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
    align-items: start !important;
  }
  .swiss-doc header > div:last-child {
    text-align: right !important;
    align-items: flex-end !important;
  }

  .swiss-doc .doc-meta-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  .swiss-doc .doc-meta-row > div:last-child {
    align-items: flex-end !important;
  }

  .swiss-doc .signature-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }

  .swiss-doc .qr-bill {
    display: flex !important;
    flex-direction: row !important;
  }
  .swiss-doc .qr-bill-receipt {
    width: 33.333% !important;
  }
  .swiss-doc .qr-bill-payment {
    width: 66.666% !important;
    display: flex !important;
    flex-direction: row !important;
  }

  /* Grösserer oberer Rand als Standard, damit Folgeseiten (2, 3, …) nicht direkt am
     Papierrand beginnen (ca. 4-5 Zeilen Freiraum). Die erste Seite braucht das nicht,
     da sie ohnehin mit dem Gold-Streifen/Kopfbereich beginnt — dort gilt weiterhin der
     normale, kleinere Rand über @page :first. */
  @page {
    size: A4;
    margin: 1.6cm;
    margin-top: 3.8cm;
  }
  @page :first {
    margin-top: 1.6cm;
  }
}