/* TradeHub – Finanzen (viewFinanzen), 31.07.2026
   Eigenstaendige fi-* Klassen im selben Blaupausen-Stil wie css/cbam.css.
   Zwei Firmen = zwei Farben: WP GmbH im App-Blau, DeMuxi in Petrol. Bewusst KEINE
   gemeinsame Summe fuer Geld — es sind zwei Rechtstraeger (Peters Vorgabe 31.07.2026). */

#viewFinanzen{--fiBlau:#2a87c8;--fiBlauD:#185fa5;--fiTeal:#0f766e}
#viewFinanzen{flex-direction:column;width:100%;overflow-y:auto!important;overflow-x:hidden!important;
  padding-bottom:24px!important}
#viewFinanzen > *{flex-shrink:0}

/* Kopf */
.fiTop{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.fiKick{font-size:10px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:#9aa3af;margin-bottom:2px}
.fiH2{font-size:19px;font-weight:700;letter-spacing:-.015em;color:var(--fiBlau)}
.fiHint{font-size:12px;color:#9aa3af;margin-top:3px}
.fiCtl{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
/* v4.303: Die Umschalter tragen selbst die Klassen „btn s p" — hier steht nur noch der
   aktive Zustand und die Symbolgroesse. Alles andere kommt aus der Knopf-Definition in
   index.html; ein Nachbau lief zwangslaeufig auseinander (gemessen: 1,6 px zu hoch). */
.fiSeg{display:inline-flex;background:transparent;border:0;border-radius:0;padding:0;gap:6px;align-items:center}
/* ⚠️ Das Gewicht ist hier entscheidend: `#appShell header .btn.s.p` (index.html Z. 3455)
   setzt das Dunkelblau mit einer ID im Selektor und schlaegt damit jede einfache Regel.
   Genau deshalb blieb der aktive Knopf dunkel und nur ein Rahmen kam durch. Die erste Zeile
   der Liste hat dasselbe Gewicht und steht spaeter — damit gewinnt sie.
   Sonst nichts: kein Rahmen, kein Schimmer. Dunkelblau ist normal, Hellblau ist gewaehlt. */
/* ⚠️ GEWICHT — hier liegt der Hund begraben. Die App setzt das Dunkelblau mit
       #appShell header .btn.s.p        (1 ID, 3 Klassen, 1 Element)
   Meine erste Fassung
       #appShell header .fiSeg button.on (1 ID, 2 Klassen, 2 Elemente)
   verliert, weil beim Vergleich die KLASSEN vor den Elementen zaehlen: 3 schlaegt 2.
   Deshalb blieb der gewaehlte Knopf dunkel. Jetzt nenne ich .btn und .p ausdruecklich mit,
   damit die Regel vier Klassen hat und sicher gewinnt. */
#appShell header .fiSeg button.btn.p.on,
.repGrDlg .fiSeg button.btn.p.on,
.fiSeg button.btn.p.on{background:var(--sbBright,#2a87c8);border-color:var(--sbBright,#2a87c8);color:#fff}
#appShell header .fiSeg button.btn.p.on:hover,
.repGrDlg .fiSeg button.btn.p.on:hover,
.fiSeg button.btn.p.on:hover{background:#3593d2;border-color:#3593d2;color:#fff}
/* KEINE eigene Symbolgroesse: .ic der App gilt — mit 15 px waren die Knoepfe
   3 px niedriger als „Neue Bestellung" (gemessen 29 gegen 32 px). */
.fiStand{font-size:11.5px;color:#9aa3af;white-space:nowrap;margin-right:4px}
.fiBtnS{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--sbBrand,#1b4b7a);
  background:var(--sbBrand,#1b4b7a);color:#fff;font:inherit;font-weight:700;
  padding:6px 10px;border-radius:9px;cursor:pointer;box-shadow:none}
.fiBtnS:hover{background:var(--sbBrandDark,#153c62);border-color:var(--sbBrandDark,#153c62);color:#fff}
.fiBtnS:disabled{opacity:.45;cursor:not-allowed}
.fiBtnS svg{color:#fff}

.fiMsg{display:none;margin-bottom:12px;padding:11px 14px;border-radius:11px;font-size:13px;font-weight:600}
.fiMsg.zeig{display:block}
.fiMsg.bad{background:#fee2e2;border:1px solid #fecaca;color:#b91c1c}
.fiMsg.lade{background:#eef5fb;border:1px solid #dcebf7;color:#185fa5}
.fiMsg.warn{background:#fef3c7;border:1px solid #fde68a;color:#8a6116}

/* Schwebendes Ladefenster — verschiebt den Inhalt NICHT (31.07.2026) */
.fiLade{position:fixed;left:50%;top:22px;transform:translate(-50%,-14px);z-index:4000;
  display:flex;align-items:center;gap:11px;padding:12px 20px;border-radius:14px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px) saturate(1.3);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
  border:1px solid rgba(226,232,240,.9);box-shadow:0 12px 34px rgba(16,24,40,.16);
  font-size:13px;font-weight:650;color:#1f2937;opacity:0;pointer-events:none;
  transition:opacity .22s ease,transform .22s cubic-bezier(.22,.8,.3,1)}
.fiLade.zeig{opacity:1;transform:translate(-50%,0)}
.fiSpin{width:17px;height:17px;border-radius:50%;flex:0 0 auto;
  border:2.2px solid rgba(42,135,200,.22);border-top-color:#2a87c8;animation:fiDreh .7s linear infinite}
@keyframes fiDreh{ to{transform:rotate(360deg)} }
@media (prefers-reduced-motion:reduce){ .fiSpin{animation-duration:2.4s} .fiLade{transition:none} }

/* Karten */
.fiCard{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 10px 30px rgba(16,24,40,.05)}
.fiPad{padding:16px 18px}
.fiHd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.fiHd h3{margin:0;font-size:14px;font-weight:800;letter-spacing:-.01em;color:#111827}
.fiHd .sub{font-size:11.5px;color:#9aa3af}
.fiHd .rechts{margin-left:auto;font-size:11.5px;color:#9aa3af}
.fiFirma{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.03em;
  padding:3px 10px;border-radius:999px;text-transform:uppercase}
.fi-wp{background:#eef5fb;color:#185fa5;border:1px solid #dcebf7}
.fi-dm{background:#e9f5f3;color:#0f766e;border:1px solid #cfe8e3}

.fiG2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* v4.328: Rasterkacheln duerfen schmaler werden als ihr breitester Inhalt. Ohne diese Zeile
   gilt `min-width:auto`, die Kachel misst sich an der laengsten Tabellenzeile (die Zellen
   stehen auf nowrap) und schiebt bei schmalen Fenstern seitlich ueber den Rand — gemessen bei
   900 px: 33 px. Gescrollt wird stattdessen innen, dafuer hat .fiTblWrap `overflow-x:auto`. */
.fiG2 > *,.fiG4 > *,.fiG2in > *{min-width:0}
.fiG4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.fiG2in{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:1150px){.fiG4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){.fiG2{grid-template-columns:1fr}}
@media(max-width:560px){.fiG4,.fiG2in{grid-template-columns:1fr}}

.fiKpi{border:1px solid #eef0f2;border-radius:13px;padding:13px 14px;background:#fbfcfe;min-width:0}
.fiKpi .t{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9aa3af}
.fiKpi .v{font-size:25px;font-weight:800;letter-spacing:-.02em;margin-top:5px;line-height:1.1;
  font-variant-numeric:tabular-nums}
.fiKpi .n{font-size:11.5px;color:#6b7280;margin-top:4px;line-height:1.4}
.fiKpi.gut .v{color:#0d7a49}.fiKpi.warn .v{color:#b45309}.fiKpi.bad .v{color:#b91c1c}
.fiDelta{font-size:11.5px;font-weight:700}
.fiDelta.up{color:#0d7a49}.fiDelta.down{color:#b91c1c}

.fiTbl{width:100%;border-collapse:collapse;font-size:13px}
.fiTbl th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#9aa3af;padding:9px 10px;border-bottom:1px solid #f0f1f3;white-space:nowrap}
.fiTbl td{padding:9px 10px;border-bottom:1px solid #f5f6f7;white-space:nowrap;color:#111827}
.fiTbl tr:last-child td{border-bottom:0}
.fiTbl td.r,.fiTbl th.r{text-align:right}
.fiTbl .num{font-variant-numeric:tabular-nums}
.fiTblWrap{overflow-x:auto}

/* ── „Umsatz je Jahr" bis an den unteren Rand, innen scrollend (v4.290) ────────────────────
   Peter, 01.08.2026: „Das Feld kannst du größer machen, bis an den unteren Rand — und wenn
   dann 2027, 2028 dazukommen, muss das automatisch scrollbar sein."
   #viewFinanzen ist eine Flex-Spalte (switchViews setzt display:flex). Damit die letzte Karte
   den Rest ausfuellen kann, muss auch #fiBody eine wachsende Flex-Spalte sein — die allgemeine
   Regel `#viewFinanzen > *{flex-shrink:0}` wird hier bewusst mit zwei IDs ueberstimmt. */
/* v4.291 — DAS war der fehlende Baustein: index.html gibt in @media(min-width:981px) den Listen-
   Ansichten `flex:1; min-height:0` (Z. 1826/1827), damit sie ueberhaupt eine Hoehe haben, die sie
   nach unten weiterreichen koennen. #viewFinanzen stand in KEINER der beiden Zeilen — deshalb
   richtete sich die Ansicht nach ihrem Inhalt, und `flex:1` auf der Karte hatte nichts zu verteilen.
   Gleiche Bauart wie #viewOrderForms/#viewOrderRequest: die Ansicht selbst scrollt.
   `min-height:100%` auf #fiBody heisst: mindestens die volle sichtbare Hoehe — dann reicht die
   letzte Karte bis an den unteren Rand; ist der Inhalt laenger, wird ganz normal gescrollt. */
@media(min-width:981px){
  #viewFinanzen{flex:1;min-height:0}
  /* v4.328 — Peter, 04.08.2026: „Irgendwie ist dort ein Scrollbalken, und ich weiss nie, warum.
     Der ist aus meiner Sicht ueberfluessig."
     ⚠️ Das war `min-height:100%` — also 100 % der GANZEN Ansicht, obwohl #fiBody UNTER der
     Kopfzeile steht. Die Seite war damit immer um Kopfzeile + Polsterung zu hoch und zeigte
     einen Scrollbalken ohne jeden Inhalt (gemessen: 93 px im Cockpit, 79 px im Verlauf,
     sogar bei voellig leerem Koerper 132 px). `flex:1 1 auto` (weiter unten) fuellt den Rest
     exakt aus — mehr braucht es nicht, damit die letzte Karte bis an den unteren Rand reicht. */
  #viewFinanzen #fiBody{min-height:0}

  /* ── Offene Posten: gescrollt wird INNEN ────────────────────────────────────────────────
     Peter: „Wenn scrollbar, dann nur innerhalb der eigentlichen Kachel." Die beiden
     Firmenkarten fuellen die Resthoehe, ihre Rechnungsliste scrollt fuer sich. Wer kurz genug
     ist (DeMuxi mit 11 Rechnungen), bekommt gar keinen Balken.
     Bewusst NUR fuer diese Ansicht: im Cockpit sollen die Karten weiter ihrer Hoehe folgen. */
  #fiBody[data-fv="offen"] > .fiG2{flex:1 1 auto;min-height:0}
  /* ⚠️ min-width:0 ist hier PFLICHT: als Flex-Kachel bekommt die Tabellenspalte sonst
     `min-width:auto` und misst sich an der breitesten Zeile — die Zellen stehen auf
     `white-space:nowrap`, also kann die Karte nicht mehr schmaler werden und das Raster
     laeuft seitlich ueber (gemessen bei 1366 px: 213 px zu breit). */
  #fiBody[data-fv="offen"] > .fiG2 > .fiCard{display:flex;flex-direction:column;
    min-height:240px;min-width:0}
  #fiBody[data-fv="offen"] > .fiG2 > .fiCard > .fiTblWrap{flex:1 1 auto;min-height:0;min-width:0;
    overflow-y:auto;overscroll-behavior:contain}
  /* Kopfzeile stehen lassen — sonst weiss man beim Scrollen nicht mehr, welche Spalte welche ist
     (gleiche Loesung wie bei „Umsatz je Jahr"). */
  #fiBody[data-fv="offen"] > .fiG2 > .fiCard > .fiTblWrap .fiTbl thead th{position:sticky;top:0;
    z-index:1;background:#fff;box-shadow:0 1px 0 #eceef0}
}
#viewFinanzen #fiBody{display:flex;flex-direction:column;flex:1 1 auto}
#viewFinanzen #fiBody > .fiJahr{flex:1 1 auto;display:flex;flex-direction:column;min-height:230px}
.fiJahr .fiTblWrap{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
/* Kopfzeile stehen lassen, sonst weiss man beim Scrollen nicht mehr, welche Spalte welche ist. */
.fiJahr .fiTbl thead th{position:sticky;top:0;z-index:1;background:#fff;box-shadow:0 1px 0 #eceef0}
.fiJahr .fiNote{margin-top:10px}

/* Entwicklungsspalte (v4.291): Pfeil und Prozentzahl in ZWEI festen Spalten, ueber die volle
   Zellenbreite. Dadurch stehen ALLE Pfeile exakt untereinander und alle Prozentzahlen rechts
   buendig — unabhaengig davon, ob dort 11 %, 118 % oder 1.200 % steht. Ein rechtsbuendiger
   Fliesstext koennte das nicht: dort wandert der Pfeil mit jeder Zahlenbreite mit. */
.fiWZelle{width:108px;white-space:nowrap}
.fiWGrid{display:grid;grid-template-columns:11px 1fr;align-items:baseline;gap:6px;width:100%}
.fiWPfeil{font-style:normal;font-size:11px;line-height:1;text-align:center}
.fiWProz{text-align:right;font-weight:700;font-size:11.5px;font-variant-numeric:tabular-nums}
.fiWLeer{color:#c3c9d0;font-weight:400}
.fiWNeu{font-size:11px;font-weight:700;color:#0f766e;background:#e9f5f3;border:1px solid #cfe8e3;
  border-radius:999px;padding:2px 8px}
.fiJlauf td{background:#fbfcfd}
.fiJteil{margin-left:8px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#9aa3af}

.fiPill{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:2px 9px;
  border-radius:999px;white-space:nowrap}
.fiP-ok{background:#e8f5ee;color:#067a46;border:1px solid #bfe6d0}
.fiP-warn{background:#fef3c7;color:#b45309;border:1px solid #fde68a}
.fiP-bad{background:#fee2e2;color:#b91c1c;border:1px solid #fecaca}
.fiP-neutral{background:#f0f1f3;color:#6b7280;border:1px solid #e5e7eb}

.fiLegende{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:#6b7280;margin-top:10px}
.fiLegende i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.fiNote{font-size:11.5px;color:#9aa3af;margin-top:10px;line-height:1.5}
.fiWarnZeile{font-size:11.5px;color:#a35b06;font-weight:600;margin-top:8px;line-height:1.5}
.fiBalken{height:24px;display:flex;border-radius:8px;overflow:hidden;border:1px solid #eef0f2}
.fiBalken span{display:block;height:100%}
.fiMini{display:block;height:9px;border-radius:5px;background:var(--fiBlau)}
.fiLeer{padding:30px 20px;text-align:center;color:#9aa3af;font-size:13px}

/* Getrennt-Hinweis: steht bewusst ueber allem, damit niemand die Firmen zusammenrechnet */
.fiTrenn{display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:11px;
  background:#f7f9fb;border:1px solid #e6edf4;font-size:12px;color:#4b5563;margin-bottom:14px}
.fiTrenn b{color:#185fa5}

/* ── Bewegung (31.07.2026) ────────────────────────────────────────────────────────────
   Peter: „die Animationen der Balken wie in den anderen Modulen, die Zahlen sollen
   hochzaehlen, und der Wechsel zwischen den Ansichten soll smooth sein." */
.fiWachs{width:0;transition:width .75s cubic-bezier(.22,.8,.3,1)}
.fiBalken span{transition:width .75s cubic-bezier(.22,.8,.3,1)}

@keyframes fiAufbau{ from{transform:scaleY(0);opacity:.25} to{transform:scaleY(1);opacity:1} }
@keyframes fiRein  { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

@media (prefers-reduced-motion:no-preference){
  /* SVG-Balken wachsen aus der Grundlinie heraus — transform-origin setzt das JS je Balken */
  .fiRect{animation:fiAufbau .55s cubic-bezier(.22,.8,.3,1) backwards}
  /* Ansichtswechsel: der ganze Block faehrt einmal ein */
  #fiBody.fiRein{animation:fiRein .32s cubic-bezier(.22,.8,.3,1)}
  .fiSeg button{transition:background .16s ease,color .16s ease,box-shadow .16s ease}
  .fiKpi{transition:border-color .16s ease,box-shadow .16s ease}
  .fiKpi:hover{border-color:#dde3ea;box-shadow:0 2px 8px rgba(16,24,40,.06)}
}
@media (prefers-reduced-motion:reduce){
  .fiWachs,.fiBalken span{transition:none}
}

/* ── v4.307: iPad und iPhone ──────────────────────────────────────────────
   Nachgesehen statt vermutet: die Tabellen hier schieben bereits seitlich (.fiTblWrap hat
   overflow-x:auto, die Zellen stehen auf nowrap) und die Kachelraster brechen bei 1150/980/560
   px um. Es fehlte also nur Kleinkram fuer schmale Geraete — Platz und Zeilenumbruch. */
@media(max-width:820px){
  .fiCard{border-radius:14px}
  .fiTbl{font-size:12.5px}
  .fiTbl th,.fiTbl td{padding-left:8px;padding-right:8px}
}
@media(max-width:560px){
  /* Die Wachstumsspalte steht als Pfeil + Wert in einem festen Zweispalter; auf dem Telefon
     darf der Pfeil schmaler werden, sonst bricht der Prozentwert um. */
  .fiWGrid{grid-template-columns:10px 1fr;gap:4px}
  .fiTbl{font-size:12px}
  .fiKpi{min-width:0}
}