:root {
  --vm-accent: #e8590c;
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.navbar-brand { color: var(--vm-accent) !important; }
.btn-primary {
  --bs-btn-bg: var(--vm-accent);
  --bs-btn-border-color: var(--vm-accent);
  --bs-btn-hover-bg: #d04f08;
  --bs-btn-hover-border-color: #d04f08;
  --bs-btn-active-bg: #b84507;
}
.btn-outline-primary {
  --bs-btn-color: var(--vm-accent);
  --bs-btn-border-color: var(--vm-accent);
  --bs-btn-hover-bg: var(--vm-accent);
  --bs-btn-hover-border-color: var(--vm-accent);
}
.card { border: 1px solid var(--bs-border-color); }
.badge.rounded-pill { width: 1rem; height: 1rem; padding: 0; display: inline-block; }

/* VVM-Logo: dunkler Schriftzug folgt der Theme-Textfarbe (currentColor) */
.vvm-logo { color: #23272b; line-height: 0; }
[data-bs-theme="dark"] .vvm-logo { color: #e9ecef; }
.vvm-logo svg { display: block; }

/* Navbar: engerer Linkabstand, damit die volle Leiste ab xl ohne Überlauf passt */
.navbar-expand-xl .navbar-nav .nav-link {
  padding-left: .5rem;
  padding-right: .5rem;
}

/* Statistik-Karten oben (Dashboard) */
.vvm-stats .vvm-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 16px 18px;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-left: 4px solid var(--bs-secondary-color);
  border-radius: 12px;
  color: inherit;
}
.vvm-stats .vvm-stat-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
}
.vvm-stats .col-sm-4:nth-child(1) .vvm-stat { border-left-color: #198754; }
.vvm-stats .col-sm-4:nth-child(1) .vvm-stat-icon { color: #198754; background: rgba(25,135,84,.12); }
.vvm-stats .col-sm-4:nth-child(2) .vvm-stat { border-left-color: #e8590c; }
.vvm-stats .col-sm-4:nth-child(2) .vvm-stat-icon { color: #e8590c; background: rgba(232,89,12,.12); }
.vvm-stat-label {
  color: var(--bs-secondary-color);
  font-size: .82rem;
  margin-bottom: 2px;
}
.vvm-stat-value {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--bs-body-color);
}
/* Fristen-Warnungskarte */
.vvm-stats .vvm-stat-warn { border-left-color: var(--bs-secondary-color); transition: transform .08s ease, box-shadow .15s ease; }
.vvm-stats .vvm-stat-warn .vvm-stat-icon { color: var(--bs-secondary-color); }
.vvm-stats .vvm-stat-warn.is-active {
  background: #fff3cd;
  border-color: #ffe69c;
  border-left-color: #fd7e14;
}
[data-bs-theme="dark"] .vvm-stats .vvm-stat-warn.is-active {
  background: rgba(253,126,20,.16);
  border-color: rgba(253,126,20,.5);
  border-left-color: #fd7e14;
}
.vvm-stats .vvm-stat-warn.is-active .vvm-stat-icon { color: #fd7e14; background: rgba(253,126,20,.18); }
.vvm-stats .vvm-stat-warn.is-active .vvm-stat-value,
.vvm-stats .vvm-stat-warn.is-active .vvm-stat-label { color: #b35309; }
[data-bs-theme="dark"] .vvm-stats .vvm-stat-warn.is-active .vvm-stat-value,
[data-bs-theme="dark"] .vvm-stats .vvm-stat-warn.is-active .vvm-stat-label { color: #ffc680; }
a.vvm-stat-warn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px -6px rgba(0,0,0,.3); }

/* Tabellen-Wrapper: horizontales Scrollen bei schmalen Bildschirmen bleibt
   erhalten. Die Aktionsmenues werden per JavaScript an den Seitenkoerper
   angehaengt (siehe app.js), damit der Wrapper sie nicht abschneidet. */
.vvm-table-wrap .dropdown-menu { z-index: 1055; }

/* Mobile Vertragskarten: Text-Truncation in Flexbox ermöglichen */
.min-w-0 { min-width: 0; }

/* Mobile Vertragskarten – aufgeräumtes, luftiges Layout */
.vvm-cards { display: flex; flex-direction: column; gap: 10px; }
.vvm-vertrag-card {
  position: relative;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
}
.vvm-card-main {
  display: block;
  padding: 14px 44px 14px 16px; /* rechts Platz fürs ⋯-Menü */
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
}
.vvm-card-main:active { background: var(--bs-secondary-bg); }
.vvm-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vvm-card-name {
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--bs-body-color);
  min-width: 0;
  flex: 1 1 auto;
}
.vvm-card-top .badge:last-child { flex-shrink: 0; }
.vvm-card-meta {
  color: var(--bs-secondary-color);
  font-size: .85rem;
  margin: 4px 0 12px;
}
.vvm-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.vvm-card-kosten { font-weight: 600; font-size: .95rem; white-space: nowrap; }
.vvm-card-ablauf {
  color: var(--bs-secondary-color);
  font-size: .8rem;
  margin-top: 6px;
}
.vvm-card-menu {
  position: absolute;
  top: 8px;
  right: 6px;
}

/* Dropdown-Menüs klar abheben (Karte + Tabelle, beide Themes) */
.dropdown-menu {
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 8px 24px -6px rgba(0,0,0,.35);
  z-index: 1030;
}
[data-bs-theme="dark"] .dropdown-menu {
  background-color: #2b3035;
  box-shadow: 0 8px 24px -4px rgba(0,0,0,.6);
}
[data-bs-theme="dark"] .dropdown-item { color: #e9ecef; }
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus { background-color: #3a4046; color: #fff; }
[data-bs-theme="dark"] .dropdown-header { color: #adb5bd; }
[data-bs-theme="dark"] .dropdown-divider { border-top-color: #495057; }
[data-bs-theme="dark"] .text-bg-light {
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color) !important;
}
/* --------------------------------------------------------------------------
 * Angeheftete Navigationsleiste (umschaltbar per 📌-Knopf)
 *
 * Braucht einen deckenden Hintergrund und einen dezenten Schatten - sonst
 * scheint der darunter durchscrollende Inhalt durch die Leiste hindurch.
 * Die Farbe folgt dem jeweiligen Design (hell/dunkel).
 * ------------------------------------------------------------------------ */
.vvm-nav-pinned {
  background-color: #fff;
  box-shadow: 0 2px 8px -2px rgba(0,0,0,.15);
  z-index: 1030;
}
[data-bs-theme="dark"] .vvm-nav-pinned {
  background-color: #212529;
  box-shadow: 0 2px 10px -2px rgba(0,0,0,.6);
}

/* --------------------------------------------------------------------------
 * Angeheftete Filterleiste (umschaltbar per 📌-Knopf in der Leiste)
 *
 * Sitzt unterhalb der Navigationsleiste, falls diese ebenfalls angeheftet ist.
 * Der Abstand wird per JavaScript aus der tatsaechlichen Navbar-Hoehe gesetzt
 * (--vvm-nav-h), weil die Leiste bei manchen Fensterbreiten umbricht und dann
 * hoeher ist - ein fester Wert wuerde dort zu Ueberlappung fuehren.
 * ------------------------------------------------------------------------ */
.vvm-filter-pinned {
  position: sticky;
  top: var(--vvm-nav-h, 0px);
  z-index: 1020;               /* unter der Navbar (1030), ueber dem Inhalt */
  background-color: #fff;
  padding-top: .5rem;
  padding-bottom: .5rem;
  box-shadow: 0 2px 8px -2px rgba(0,0,0,.12);
}
[data-bs-theme="dark"] .vvm-filter-pinned {
  background-color: #212529;
  box-shadow: 0 2px 10px -2px rgba(0,0,0,.5);
}

/* --------------------------------------------------------------------------
 * Seitenleiste im Vertragsformular (Speichern/Abbrechen/Löschen)
 *
 * Klebt beim Scrollen mit, muss aber unterhalb einer angepinnten
 * Navigationsleiste einrasten - sonst schiebt sich die Leiste darüber und
 * verdeckt die Knöpfe. --vvm-nav-h wird per JavaScript aus der tatsächlichen
 * Höhe der Navigationsleiste gesetzt (0px, wenn sie nicht angepinnt ist).
 * ------------------------------------------------------------------------ */
.vvm-seitenleiste {
  top: calc(var(--vvm-nav-h, 0px) + 1rem);
}

/* --------------------------------------------------------------------------
 * Schnellerfassung
 *
 * Hebt die Felder hervor, die zum Anlegen eines Vertrags wirklich gebraucht
 * werden: Bezeichnung, Typ, Anbieter, Betrag, Intervall, Vertragsbeginn.
 * Der Umschalter blendet zusaetzlich alles aus, was spaeter nachgetragen
 * werden kann - das lange Formular wird dadurch deutlich uebersichtlicher.
 *
 * Bewusst dezent: ein farbiger Rand links statt einer flaechigen Faerbung,
 * damit die Felder normal lesbar bleiben und nicht wie Fehlermeldungen wirken.
 * ------------------------------------------------------------------------ */
.vvm-kernfeld {
  border-left: 3px solid #e8590c;   /* Hausfarbe, nicht Bootstrap-Blau */
}
.vvm-kernfeld:focus {
  border-left-width: 3px;
}

/* Im Schnellmodus zusaetzlich der Hintergrund, damit die Felder sofort
   ins Auge fallen - dezent genug, um den Text nicht zu stoeren. */
.vvm-schnell .vvm-kernfeld {
  background-color: rgba(232, 89, 12, .06);
}
[data-bs-theme="dark"] .vvm-schnell .vvm-kernfeld {
  background-color: rgba(232, 89, 12, .12);
}

/* Detailkarten im Schnellmodus ausblenden */
.vvm-schnell .vvm-detailkarte {
  display: none !important;
}

/* --------------------------------------------------------------------------
 * Auswahllisten im dunklen Modus
 *
 * Die aufgeklappte Liste zeichnet der Browser selbst - Bootstrap faerbt nur
 * das zugeklappte Feld und verlaesst sich ansonsten auf "color-scheme: dark".
 * Das greift aber nicht ueberall zuverlaessig: Die einzelnen Eintraege erbten
 * dann die helle Schriftfarbe des Feldes, waehrend der Browser die Liste hell
 * zeichnete - helle Schrift auf hellem Grund. Lesbar war nur der Eintrag, auf
 * dem gerade die Maus stand, weil der farblich hervorgehoben wird.
 *
 * Deshalb hier Hintergrund UND Schriftfarbe der Eintraege ausdruecklich setzen.
 * ------------------------------------------------------------------------ */
[data-bs-theme="dark"] .form-select option,
[data-bs-theme="dark"] select option,
[data-bs-theme="dark"] .form-select optgroup,
[data-bs-theme="dark"] select optgroup {
  background-color: #2b3035;
  color: #e9ecef;
}

/* Deaktivierte Eintraege (z. B. Platzhalter) etwas zurueckgenommen */
[data-bs-theme="dark"] .form-select option:disabled,
[data-bs-theme="dark"] select option:disabled {
  color: #868e96;
}

/* Mehrfachauswahl-Listen (z. B. "Verknuepfte Vertraege") sind immer
   aufgeklappt - dort greift dasselbe Problem im Feld selbst. */
[data-bs-theme="dark"] select[multiple],
[data-bs-theme="dark"] select[size]:not([size="1"]) {
  background-color: #2b3035;
  color: #e9ecef;
}

/* --------------------------------------------------------------------------
 * Sprungziele nach dem Speichern
 *
 * Nach einer Aktion (Datei hochladen, Stoerung erfassen ...) springt die Seite
 * zur passenden Karte zurueck, statt oben zu landen. Ohne Abstand wuerde die
 * angesprungene Ueberschrift genau unter der angepinnten Navigationsleiste
 * liegen - deshalb derselbe Abstand, den auch die Seitenleiste verwendet,
 * plus etwas Luft, damit die Ueberschrift nicht am Rand klebt.
 * ------------------------------------------------------------------------ */
[id="abrechnungen"],
[id="stoerungen"],
[id="preise"],
[id="dateien"] {
  scroll-margin-top: calc(var(--vvm-nav-h, 0px) + 1.5rem);
}

/* Sanftes Scrollen ausdruecklich abschalten.
 *
 * Bootstrap setzt "scroll-behavior: smooth" von sich aus auf :root. Bei diesem
 * langen Formular faehrt die Seite dadurch nach jedem Speichern sichtbar von
 * oben bis zur Zielkarte durch - unruhig und anstrengend fuer die Augen.
 * Mit dem direkten Sprung steht die Seite sofort an der richtigen Stelle.
 *
 * Die Regel muss :root UND html abdecken und "!important" tragen, weil
 * Bootstraps Vorgabe in einer Media-Query steht und sonst gewinnt. */
:root,
html {
  scroll-behavior: auto !important;
}

/* --------------------------------------------------------------------------
 * Hinweise (gespeichert, geloescht, Fehler ...)
 *
 * Erscheinen unten rechts und blenden sich nach einigen Sekunden aus, statt
 * als Leiste oben zu stehen. Seit die Seite nach dem Speichern an derselben
 * Stelle bleibt, waere eine Meldung am Seitenanfang haeufig ausserhalb des
 * Bildes - man haette sie schlicht nicht gesehen.
 * ------------------------------------------------------------------------ */
.vvm-hinweise {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1090;              /* ueber der angehefteten Navigationsleiste */
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: min(28rem, calc(100vw - 2rem));
  pointer-events: none;       /* Klicks gehen durch den leeren Bereich hindurch */
}

.vvm-hinweis {
  pointer-events: auto;       /* der Hinweis selbst bleibt bedienbar */
  margin-bottom: 0;
  animation: vvm-hinweis-ein .25s ease-out;
}

@keyframes vvm-hinweis-ein {
  from { opacity: 0; transform: translateY(.75rem); }
  to   { opacity: 1; transform: none; }
}

/* Ausblenden am Ende der Anzeigedauer */
.vvm-hinweis.vvm-geht {
  opacity: 0;
  transform: translateY(.5rem);
  transition: opacity .35s ease, transform .35s ease;
}

/* Auf schmalen Bildschirmen ueber die volle Breite, damit laengere Texte
   nicht auf wenige Zeichen pro Zeile zusammenschrumpfen. */
@media (max-width: 575.98px) {
  .vvm-hinweise {
    left: 1rem;
    right: 1rem;
    max-width: none;
  }
}

/* Wer "Bewegung reduzieren" eingestellt hat, bekommt keine Animation. */
@media (prefers-reduced-motion: reduce) {
  .vvm-hinweis { animation: none; }
  .vvm-hinweis.vvm-geht { transition: none; }
}

/* --------------------------------------------------------------------------
 * Nachtmodus / Waermefilter
 *
 * Zieht die Darstellung ins Bernsteinfarbene, aehnlich dem Nachtmodus von
 * Windows: Blauanteile werden gedaempft, was am Abend angenehmer ist.
 *
 * Umgesetzt ueber einen CSS-Filter auf dem gesamten Seiteninhalt. Wichtig:
 * NICHT auf <body> selbst filtern, sondern auf dessen Inhalt - ein Filter
 * erzeugt einen neuen Bezugsrahmen fuer "position: fixed", wodurch die
 * angeheftete Navigationsleiste und die Hinweise unten ihre Verankerung
 * verlieren wuerden.
 * ------------------------------------------------------------------------ */
.vvm-waerme-1 { --vvm-waerme-staerke: .08; }
.vvm-waerme-2 { --vvm-waerme-staerke: .16; }
.vvm-waerme-3 { --vvm-waerme-staerke: .26; }

/* Der Filter liegt als getoente Ebene ueber der Seite. Gegenueber einem
   CSS-Filter hat das den Vorteil, dass Verankerungen unberuehrt bleiben. */
.vvm-waerme-1::after,
.vvm-waerme-2::after,
.vvm-waerme-3::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;          /* Klicks gehen hindurch */
  z-index: 2147483000;           /* ueber allem, auch ueber den Hinweisen */
  background: rgb(255, 147, 41); /* warmes Bernstein */
  opacity: var(--vvm-waerme-staerke);
  mix-blend-mode: multiply;      /* daempft Blau, statt alles zu ueberdecken */
}

/* Im dunklen Design wuerde "multiply" die Seite fast schwarz machen -
   dort eine sanftere Mischung und geringere Staerke. */
[data-bs-theme="dark"] .vvm-waerme-1::after { opacity: .12; mix-blend-mode: soft-light; }
[data-bs-theme="dark"] .vvm-waerme-2::after { opacity: .22; mix-blend-mode: soft-light; }
[data-bs-theme="dark"] .vvm-waerme-3::after { opacity: .34; mix-blend-mode: soft-light; }

/* Beim Drucken nie einfaerben */
@media print {
  .vvm-waerme-1::after,
  .vvm-waerme-2::after,
  .vvm-waerme-3::after { display: none; }
}

/* --------------------------------------------------------------------------
 * "Rückgängig"-Knopf in den Hinweisen
 *
 * Zuvor als btn-outline-dark gestaltet - im dunklen Design ergab das dunklen
 * Text auf dunklem Grund und war praktisch unlesbar. Der Knopf uebernimmt
 * jetzt die Textfarbe der jeweiligen Meldung (gruen bei Erfolg, gelb bei
 * Warnung ...) und hebt sich durch Rahmen und leichte Fuellung ab.
 * ------------------------------------------------------------------------ */
.vvm-ruecknahme-btn {
  color: inherit;                        /* Farbe der Meldung uebernehmen */
  border: 1px solid currentColor;
  background-color: rgba(255, 255, 255, .35);
  font-weight: 600;
  opacity: .95;
}

.vvm-ruecknahme-btn:hover,
.vvm-ruecknahme-btn:focus {
  color: inherit;
  background-color: rgba(255, 255, 255, .7);
  opacity: 1;
}

/* Im dunklen Design wuerde eine helle Fuellung zu grell wirken -
   dort dunkler unterlegen, damit der Text weiterhin gut absteht. */
[data-bs-theme="dark"] .vvm-ruecknahme-btn {
  background-color: rgba(0, 0, 0, .28);
}
[data-bs-theme="dark"] .vvm-ruecknahme-btn:hover,
[data-bs-theme="dark"] .vvm-ruecknahme-btn:focus {
  background-color: rgba(0, 0, 0, .45);
}