/* Bürofox — projektspezifisches Styling.
   Bootstrap 5 wird separat geladen. Hier nur eigene Overrides. */

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #faf8f5;
}

.position-fehlt {
  background-color: #f8d7da;
}

.position-fehlt td {
  border-color: #f1aeb5 !important;
}

/* Marken-Lockup in der hellen App-Navbar — Icon + zweifarbige Wortmarke,
   konsistent mit der Landing-Page. */
.app-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
}
.app-brand .b {
  color: #15123a;
}
.app-brand .f {
  color: #fd6844;
}

/* Primaer-Buttons in Markenfarbe (Fox-Orange) statt Bootstrap-Blau.
   Bootstrap 5.3 steuert Buttons ueber --bs-btn-*-Variablen — wir setzen
   nur die Farbwerte um, Hover/Active/Disabled bleiben konsistent.
   Semantische Varianten (success/danger/secondary) bleiben unangetastet. */
.btn-primary {
  --bs-btn-bg: #fd6844;
  --bs-btn-border-color: #fd6844;
  --bs-btn-hover-bg: #e8542f;
  --bs-btn-hover-border-color: #e8542f;
  --bs-btn-active-bg: #d8491f;
  --bs-btn-active-border-color: #d8491f;
  --bs-btn-disabled-bg: #fd6844;
  --bs-btn-disabled-border-color: #fd6844;
  --bs-btn-focus-shadow-rgb: 253, 104, 68;
}
.btn-outline-primary {
  --bs-btn-color: #e8542f;
  --bs-btn-border-color: #e8542f;
  --bs-btn-hover-bg: #fd6844;
  --bs-btn-hover-border-color: #fd6844;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #fd6844;
  --bs-btn-active-border-color: #fd6844;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #e8542f;
  --bs-btn-disabled-border-color: #e8542f;
  --bs-btn-focus-shadow-rgb: 253, 104, 68;
}

/* Links in einem warmen, gut lesbaren Ton statt Bootstrap-Blau.
   Navbar-Links (--bs-nav-link-color) und text-muted-Links lesen andere
   Variablen und bleiben dadurch unberuehrt. */
:root {
  --bs-link-color: #c0451c;
  --bs-link-color-rgb: 192, 69, 28;
  --bs-link-hover-color: #a73c18;
  --bs-link-hover-color-rgb: 167, 60, 24;
}

/* Fokus-Zustand von Eingabefeldern: Orange statt Blau. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: #fdaa92;
  box-shadow: 0 0 0 0.25rem rgba(253, 104, 68, 0.22);
}
.form-check-input:checked {
  background-color: #fd6844;
  border-color: #fd6844;
}

/* Flash-Meldungen ruhiger + markenkonform: weiche Tönung, linke
   Akzentkante. „Erfolg" mit Orange-Akzent statt grün (Grün passt nicht
   zur Marke); Fehler bleibt rot, weil das eine klare Warnfarbe braucht. */
.alert {
  border: 1px solid #ece6df;
  border-left: 4px solid #c9c2b8;
  border-radius: 0.5rem;
}
.alert-success {
  background: #fff4ef;
  border-color: #ffd9c9;
  border-left-color: #fd6844;
  color: #7a3a22;
}
.alert-danger {
  background: #fbeceb;
  border-color: #f3cfcd;
  border-left-color: #cf5b5b;
  color: #8a2f2f;
}
.alert-warning {
  background: #fdf4e3;
  border-color: #f0e0bf;
  border-left-color: #d6a23e;
  color: #6f521b;
}
.alert-info {
  background: #eef0f3;
  border-color: #dde0e6;
  border-left-color: #9aa0ad;
  color: #454b57;
}

/* Rechnungs-Status — ruhige, getönte Badges statt voller Bootstrap-Farben. */
.rg-status {
  display: inline-block;
  padding: 0.25em 0.6em;
  border-radius: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
}
.rg-status-offen {
  background: #fdf0db;
  color: #8a6311;
}
.rg-status-bezahlt {
  background: #e8e4dc;
  color: #4f4a40;
}
.rg-status-storniert {
  background: #ededef;
  color: #9a9aa4;
}

/* Angebots-Status — abgeleitet (Angebot.status_anzeige), ruhige Badges.
   Einheitliche Breite + kein Umbruch, damit die Status-Spalte sauber
   untereinander steht. */
.ag-status {
  display: inline-block;
  min-width: 9rem;
  text-align: center;
  white-space: nowrap;
  padding: 0.3em 0.6em;
  border-radius: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
}
.ag-status-angebot {
  background: #eef0f3;
  color: #5a6070;
}
.ag-status-rechnung {
  background: #e8e4dc;
  color: #4f4a40;
}
.ag-status-ersetzt {
  background: #ededef;
  color: #9a9aa4;
}

/* Layout-Editor: ausgewählte Varianten-Kachel — Markenrahmen statt blau. */
.kachel-aktiv {
  border-color: #fd6844 !important;
}

/* Aufklapp-Trigger "Texte anpassen" — klickbare Karten-Kopfzeile. */
.texte-toggle {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: inherit;
}
.texte-toggle:hover {
  background: #f3f1ee;
}
.texte-chevron {
  transition: transform 0.15s ease;
}
.texte-toggle[aria-expanded="true"] .texte-chevron {
  transform: rotate(180deg);
}

/* Pauschal-Toggle in der eigenen Spalte (zwischen Beschreibung und
   Menge) — bewusst dezent: kleinere Schrift, gemutete Farbe,
   reduziertes Opacity bei unchecked. Klick-Flaeche bleibt voll
   bedienbar, nur visuell zurueckgenommen damit der Toggle nicht
   heraussticht. */
.pauschal-toggle {
  font-size: 0.78rem;
  min-height: 0;
  margin: 0;
}
.pauschal-toggle .form-check-input {
  width: 0.9em; height: 0.9em;
  margin-top: 0.22em;
  opacity: 0.7;
}
.pauschal-toggle .form-check-input:checked {
  opacity: 1;  /* aktiv = klar sichtbar */
}
.pauschal-toggle .form-check-label {
  color: #9a9aa4;
  padding-left: 0.15rem;
}

/* Positionen-Tabelle: Pfeile zum Verschieben (↑/↓). An den Raendern
   blenden wir die jeweils nicht-sinnvolle Richtung per :first-child /
   :last-child aus — das spart serverseitige Berechnung von ist_erste/
   ist_letzte und ueberlebt jeden HTMX-Swap automatisch. */
#positionen-body > tr:first-child .pos-up,
#rechnung-positionen-body > tr:first-child .pos-up,
#positionen-body > tr:last-child .pos-down,
#rechnung-positionen-body > tr:last-child .pos-down {
  display: none;
}

/* Die Landing-Page hat ein eigenes Stylesheet (static/css/landing.css)
   und erbt nicht von base.html — daher hier keine Landing-Styles. */