/* Gemeinsames Material-Design-Formular-System fuer alle Rechner-Seiten (Cashflow-Rechner,
   Kreditrechner, ...). Urspruenglich als scoped Cashflow.razor.css entstanden, jetzt global,
   damit mehrere Feature-Seiten dasselbe Design nutzen koennen, ohne die Regeln zu duplizieren
   (siehe CLAUDE.md KI-Regel 6). Alle Regeln sind bewusst auf ".material-calculator" als
   Nachfahren-Selektor beschraenkt (nicht wirklich global) - Properties.razor nutzt z.B. auch
   .card-body/.mb-3 als normales, unveraendertes Bootstrap-Formular; ohne diese Klammer wuerden
   diese seitenuebergreifenden Regeln dort das Layout kaputt machen. Jede Rechner-Seite muss ihr
   Markup daher in einen <div class="material-calculator"> wrappen. Klassennamen bleiben
   "cashflow-*" aus Kompatibilitaetsgruenden, sind aber inzwischen seitenuebergreifend gemeint. */

/* Layout-Grundprinzip (Neuaufbau nach mehreren gescheiterten Flexbox-Anläufen):
   - Jede Karte (.card-body) ist eine eigene CSS-Grid mit 3 Spalten
     (Label | Wert | optionale Checkbox), jede Spalte "max-content" - die Karte wird
     also exakt so breit UND so hoch wie ihr eigener Inhalt es braucht.
   - Die Zeilen-Wrapper (.cashflow-field-row/.cashflow-result-row) sind "display:
     contents": sie selbst erzeugen keine eigene Box, ihre Kinder (Label, Wert,
     Checkbox) werden direkte Grid-Items der Karte.
   - Weil "display: contents" die urspruengliche Zeilengrenze fuer das Grid unsichtbar
     macht, bekommt jeder Item-Typ eine FESTE Spalte (Label=1, Wert=2, Checkbox=3) statt
     sich auf die Auto-Platzierung zu verlassen - sonst packt das Grid Items einfach
     fortlaufend in die 3 Spalten und Label/Wert aus verschiedenen urspruenglichen Zeilen
     landen im selben Grid-Row (beobachtet: Werte und Labels durcheinander). Mit fester
     Spalte pro Item-Typ sucht sich jedes Item automatisch die naechste freie Zeile in
     genau dieser Spalte, wodurch die urspruengliche Zeilenzuordnung korrekt
     rekonstruiert wird.
   - Der Spalten-Stack (.cashflow-column-stack) ist ebenfalls eine Grid mit einer
     "max-content"-Spur: die breiteste Karte in dieser Spalte bestimmt die Spaltenbreite,
     alle anderen Karten strecken sich per Grid-Default (justify-items: stretch) exakt
     auf diese Breite. align-content:start verhindert, dass Karten in die Hoehe gezogen
     werden, nur weil eine andere Spalte hoeher ist.
   - Flexbox konnte "Spalte so breit wie Inhalt, alle Karten gleich breit" nicht
     zuverlaessig, weil Bootstraps .card width:100% setzt - das erzeugt in einem
     inhaltsbasierten Flexbox-Kontext einen Zirkelbezug (Spalte will sich am Inhalt
     orientieren, Karte behauptet "ich bin 100% davon"), der je nach Browser/Inhalt zu
     falsch (zu schmal) berechneten Breiten fuehrte - Werte liefen ueber den Kartenrand
     hinaus. CSS Grid berechnet die Breite eines Grid-Items fuer die Spurgroessen-
     Ermittlung anhand seines Inhalts (unabhaengig von einer width:100%-Angabe), daher
     KEIN width:max-content auf .card-body setzen - das wuerde Grids Default
     justify-items:stretch verhindern, wodurch schmalere Karten nicht mehr auf die
     Breite der breitesten Karte gezogen werden (genau das war der naechste Bug). */
/* max-width statt fixer Breite: auf einem echten Handy-Viewport (schmaler als dieser Wert)
   greift ohnehin ganz normal "width:auto" (= volle verfuegbare Breite), auf einem breiteren
   Browserfenster unterhalb des lg-Breakpoints (col-12 macht die Spalte sonst bildschirmbreit,
   siehe Bootstraps .card{width:100%}) begrenzt max-width die Karten auf eine sinnvolle,
   handy-aehnliche Breite statt sie ueber die gesamte Fensterbreite zu ziehen
   (Nutzer-Feedback: "am Handy passt es perfekt, nur im Browser ist es zu gross"). */
.material-calculator .cashflow-column-stack {
    display: grid;
    grid-template-columns: max-content;
    align-content: start;
    max-width: 420px;
}

/* Spalte 3 ist "1fr" statt "max-content": andernfalls ist die Wert-Spalte nur so breit
   wie die laengste Zahl DIESER Karte, und der Rest der (auf die breiteste Karte der
   Spalte gestreckten) Kartenbreite bleibt als Leerraum rechts vom Grid ungenutzt - die
   Zahlen enden dann je nach Karte unterschiedlich weit vor dem echten Kartenrand
   (Nutzer-Feedback per Screenshot). Mit 1fr fuellt die Wert-Spalte immer den
   verbleibenden Platz bis zum Kartenrand, "justify-self:stretch" + "text-align:right"
   auf den Werten sorgt fuer die Rechtsbuendigkeit darin. */
.material-calculator .card-body {
    display: grid;
    grid-template-columns: max-content max-content 1fr;
    align-items: center;
    align-content: start;
    column-gap: 0.5rem;
    row-gap: 0.35rem;
    padding: 0.65rem 0.85rem;
}

.material-calculator .card-body h5 {
    font-size: 0.95rem;
    margin-bottom: 0;
}

/* Material-Design-"Outlined"-Textfeld (Label sitzt im Rahmen). Karte bekommt eine
   einzelne Spalte statt Label/Wert nebeneinander, jedes Feld ist ein eigener Block mit
   schwebendem Label. Werte sind rechtsbuendig, da es (bis auf "Name") ausschliesslich
   Zahlen sind. */
.material-calculator .cashflow-material-card {
    grid-template-columns: 1fr;
    row-gap: 0.5rem;
}

.material-calculator .material-field {
    position: relative;
    margin-top: 0.4rem;
}

/* Zwei Material-Felder nebeneinander statt untereinander (Nutzer-Feedback: Grundanteil+
   Wertsteigerung, Zinssatz+Laufzeit, Eigenkapital-Betrag+Prozent). Eigenes 2-Spalten-Grid
   innerhalb der ansonsten einspaltigen .cashflow-material-card. */
.material-calculator .cashflow-field-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.5rem;
}

.material-calculator .material-input {
    display: block;
    width: 100%;
    border: 1.5px solid var(--rec-navy);
    border-radius: 6px;
    padding: 0.55rem 0.7rem;
    font-size: 0.9rem;
    background-color: #fff;
    text-align: right;
}

.material-calculator .material-input-text {
    text-align: left;
}

/* Rechtsbuendig wie alle anderen Werte; extra padding-right, damit der Text nicht unter
   dem nativen Dropdown-Pfeil landet (Bootstraps eigenes .form-select reserviert dafuer
   Platz, unser einheitliches .material-input-Padding hat das ueberschrieben).
   -webkit-appearance/appearance:none ist noetig, weil iOS Safari bei <select> die
   native (nicht ueberschriebene) Darstellung verwendet und dabei "text-align" ignoriert -
   am Desktop-Browser wirkte text-align, am iPhone blieb der Text trotzdem linksbuendig
   (Nutzer-Feedback). Mit appearance:none wird das Control vollstaendig selbst gestylt,
   der eigene Pfeil (background-image) ersetzt den weggefallenen nativen Pfeil. */
.material-calculator select.material-input {
    text-align: right;
    text-align-last: right;
    padding-right: 2rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230b2545' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 0.9rem;
}

/* Der native Zahlen-Spinner belegt selbst nur ca. 20px direkt nach dem Text - zu viel
   padding-right laesst ihn NICHT an den Rahmenrand wandern, sondern erzeugt Leerraum
   ZWISCHEN Spinner und Rahmen (Nutzer-Feedback). Naeher an der tatsaechlichen
   Spinner-Breite haelt ihn am rechten Rand, mit noch spuerbarem Abstand zum Wert. */
.material-calculator input[type="number"].material-input {
    padding-right: 1.4rem;
}

.material-calculator .material-input:focus {
    outline: none;
    border-color: var(--rec-gold);
    box-shadow: 0 0 0 1px var(--rec-gold);
}

/* Deaktivierte Felder: einheitlich hellgrau (Rahmen + Inhalt + Label), kein grauer
   Hintergrund - das ist die uebliche Material-Design-Loesung fuer readonly/disabled
   Felder und wirkt konsistenter als eine reine Hintergrundfarbe (Nutzer-Feedback). */
.material-calculator .material-input:disabled {
    background-color: #fff;
    border-color: #adb5bd;
    color: #adb5bd;
}

.material-calculator .material-field:has(.material-input:disabled) .material-label {
    color: #adb5bd;
}

.material-calculator .material-label {
    position: absolute;
    top: -0.55rem;
    left: 0.6rem;
    padding: 0 0.3rem;
    background-color: #fff;
    font-size: 0.75rem;
    color: var(--rec-navy);
    white-space: nowrap;
    line-height: 1;
}

/* Elemente, die die volle Kartenbreite einnehmen sollen statt in die Label/Wert-Spalten
   eingeordnet zu werden (Ueberschrift, Name-Feld, Eigenkapital-Umschalter, Platzhaltertext). */
.material-calculator .cashflow-span-all {
    grid-column: 1 / -1;
}

.material-calculator .cashflow-field-row,
.material-calculator .cashflow-result-row {
    display: contents;
}

.material-calculator .cashflow-field-label,
.material-calculator .cashflow-result-label {
    grid-column: 1;
    font-size: 0.8rem;
    white-space: nowrap;
    margin-bottom: 0;
}

/* Ergebnis-Karten (Spalte 3+4: Cashflow/Steuer/Kennzahlen/Vermoegensaufbau/ETF-Vergleich)
   haben keine Material-Eingabefelder, sondern nur Label/Wert-Zeilen - dort duerfen die
   Zeilen enger stehen als das globale row-gap der Karte (Nutzer-Feedback: zu viel
   vertikaler Abstand zwischen den Zeilen). row-gap muss am Grid-Container (.card-body)
   selbst gesetzt werden, nicht an .cashflow-result-row - das ist "display: contents" und
   damit selbst kein Grid-Container. :has() waehlt gezielt nur die Karten aus, die
   ausschliesslich Ergebnis-Zeilen enthalten (Kaufpreis-Karte mit Checkboxen bleibt beim
   groesseren Standard-row-gap). */
.material-calculator .card-body:has(.cashflow-result-row) {
    row-gap: 0.15rem;
}

/* justify-self:stretch erzwingen: ohne explizite Breite haben die Werte (Spans) nur ihre
   eigene Textbreite eingenommen statt die volle Spaltenbreite, wodurch kuerzere Zahlen
   (z.B. "-92 €") weiter links endeten als laengere in derselben Karte (z.B. "-1.109 €") -
   rechtsbuendiger Text half nichts, wenn die Box selbst schon nur textbreit war
   (Nutzer-Feedback per Screenshot). */
.material-calculator .cashflow-result-row > span:last-child {
    grid-column: 2 / -1;
    text-align: right;
    justify-self: stretch;
}

/* Die Kaufpreis-Karte hat als einzige Checkboxen (Pfandrecht/Makler) - der Wert liegt
   hier in Spalte 3, die Checkbox (falls vorhanden) in Spalte 2 davor, damit sie vor statt
   nach dem Betrag steht (Nutzer-Feedback). Dadurch bleiben alle Werte dieser Karte
   weiterhin in derselben Spalte (3) ausgerichtet, unabhaengig davon, ob eine Zeile eine
   Checkbox hat oder nicht. */
.material-calculator .cashflow-field-row > span {
    grid-column: 3;
    text-align: right;
    justify-self: stretch;
}

.material-calculator .cashflow-field-row > .form-check-input {
    grid-column: 2;
    justify-self: start;
}

.material-calculator .cashflow-toggle-btn {
    padding: 0.1rem 0.4rem;
    font-size: 0.75rem;
}

.material-calculator .cashflow-toggle-group {
    width: 100%;
}

.material-calculator .cashflow-btn {
    max-width: 140px;
}

/* Runde Icon-Buttons statt Text-Buttons fuer "Laden"/"Loeschen" in der Historie-Tabelle -
   moderneres, kompakteres Aussehen (Nutzer-Feedback), Tooltip via title-Attribut ersetzt
   den bisherigen sichtbaren Text. */
.material-calculator .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid transparent;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.material-calculator .btn-icon-primary {
    color: var(--rec-navy);
    background-color: rgba(11, 37, 69, 0.08);
}

.material-calculator .btn-icon-primary:hover {
    color: #fff;
    background-color: var(--rec-navy);
}

.material-calculator .btn-icon-danger {
    color: #b02a37;
    background-color: rgba(176, 42, 55, 0.08);
}

.material-calculator .btn-icon-danger:hover {
    color: #fff;
    background-color: #b02a37;
}

.material-calculator .cashflow-flag {
    width: 1.1rem;
    height: 0.8rem;
    object-fit: cover;
    vertical-align: -0.1rem;
    border-radius: 2px;
}

.material-calculator .cashflow-erkenntnis {
    font-size: 0.85rem;
}

.material-calculator .mb-3 {
    margin-bottom: 0.5rem !important;
}

.material-calculator .gap-3 {
    gap: 0.5rem !important;
}

/* Kein separates Mobile-Stack-Layout mehr: Label bleibt immer links vom Wert, genau wie
   am Desktop (Nutzer-Feedback). Das fruehere Umschalten auf eine gestapelte Ansicht war
   noch aus der Zeit vor col-12 auf den vier Cashflow-Spalten (siehe Cashflow.razor) - die
   Karten haben seitdem auf schmalen Bildschirmen ohnehin die volle Breite und damit
   genug Platz fuer Label+Wert nebeneinander. */