/* ============================================================
   bacap – Komponente: Steuerfelder-Panel (.tax-fields)
   ------------------------------------------------------------
   Animiert ein-/ausklappbares Panel mit einem Grid aus
   Steuer-Eingabefeldern. Konsolidiert die bisherigen Klassen
     .z-tax-fields (Zinsrechner)
     .fs-tax-fields (Fondssparrechner)
     .w-tax-fields  (Entnahmeplan)
   Für Rückwärtskompatibilität reagiert die Komponente auf
   alle vier Klassennamen.

   Aktivierung: .is-open auf dem Panel toggelt die Sichtbarkeit
   (wird von app.js / updateTaxVisibility() gesetzt).

   Parameter:
     --tax-field-w     Breite je Steuerfeld (Default 110px)
     --tax-grid-gap    Gap zwischen Feldern
     --tax-field-h     Höhe der Eingabefelder
   ============================================================ */

/* Toggle-Zeile: Toggle + Info-Icon nebeneinander */
.calc-app .taxsv-compact-toggle{
  display:flex;
  align-items:center;
  gap:10px;
}
.calc-app .taxsv-compact-toggle .i.tt,
.calc-app .taxsv-compact-toggle .i{
  flex:0 0 auto;
}

/* Wrapper-Label um den Toggle: rechtsbündig in der Label-Spalte.
   Strategie:
   - Wrapper ist Block mit text-align:right (wirkt auf inline-Inhalte)
   - #taxsv-card ist inline-block → folgt text-align des Parents
   - .taxsv-compact-toggle ist inline-flex → bleibt innen Flex, ist
     aber außen wie inline-Text (rückt mit text-align nach rechts)
   Hohe Spezifität (ID #taxsv-card im Selektor) + !important, damit
   die Regel zuverlässig gegen die taxsv.ui.css-Regeln gewinnt, die
   den Toggle/Card sonst auf block-level mit 100% Breite drücken. */
.calc-app .z-tax-toggle-label,
.calc-app .w-tax-toggle-label,
.calc-app .fs-tax-toggle-label{
  display:block !important;
  text-align:right !important;
}
.calc-app .z-tax-toggle-label #taxsv-card,
.calc-app .w-tax-toggle-label #taxsv-card,
.calc-app .fs-tax-toggle-label #taxsv-card{
  display:inline-block !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  text-align:left;  /* Inhalte innerhalb des Toggles selbst wieder normal */
}
.calc-app .z-tax-toggle-label #taxsv-card .taxsv-compact-toggle,
.calc-app .w-tax-toggle-label #taxsv-card .taxsv-compact-toggle,
.calc-app .fs-tax-toggle-label #taxsv-card .taxsv-compact-toggle{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px;
  /* taxsv.ui.css setzt im Rentenrechner-Kontext width:240px (fest).
     Dadurch wäre der Toggle breiter als die 210px-Label-Spalte und
     würde links überlaufen. Hier auf "schrumpft auf Inhalt" zurück-
     setzen, damit der Toggle in jede Spaltenbreite passt. */
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  flex:0 0 auto !important;
}

/* Toggle-Label nicht zusätzlich (Toggle übernimmt Beschriftung) */
.calc-app .z-tax-toggle-label > label,
.calc-app .w-tax-toggle-label > label{ display:none; }

/* Tax-Zeile in der Form-Tabelle: Toggle und Steuerfelder oben ausrichten
   (sonst springt die ausklappende Inputs-Zelle vertikal mittig). */
.calc-app .z-tax-toggle-row .w-cell.inputs,
.calc-app .w-tax-toggle-row .w-cell.inputs,
.calc-app .fs-tax-toggle-row .w-cell.inputs{
  vertical-align:top;
}

/* Steuerfelder-Container: animiert ein-/ausblenden.
   Spaltenraster über zwei Custom Properties steuerbar:
     --tax-col-min  Mindestbreite je Spalte (Default 110px)
     --tax-col-max  Maximalbreite je Spalte (Default = --tax-col-min, also fix)
   Sparrechner-Default = fixe 110px-Spalten.
   Fondssparrechner setzt --tax-col-min:118px und --tax-col-max:1fr → Spalten
   wachsen flexibel, schmaler bei kleinem Container.
   Im geschlossenen Zustand 1-Spalten-Layout (minmax(0,1fr)), damit das
   Grid die umgebende Tabellen-Spalte nicht horizontal aufbläht.

   Animation: max-height bewusst klein gehalten (knapp über Inhaltshöhe),
   damit die Ein-/Ausblenden-Animation sichtbar mitläuft und nicht erst
   am Ende der Dauer ruckartig anspringt. Auf Mobile großzügiger. */
.calc-app .tax-fields,
.calc-app .z-tax-fields,
.calc-app .fs-tax-fields,
.calc-app .w-tax-fields{
  display:grid;
  /* Identisch im closed- und im is-open-State, damit der Inhalt beim
     Toggle nicht umlayouted wird. */
  grid-template-columns:repeat(
    auto-fit,
    minmax(var(--tax-col-min, 110px), var(--tax-col-max, var(--tax-col-min, 110px)))
  );
  gap:var(--tax-grid-gap, 8px) 16px;
  justify-content:start;
  align-items:end;
  /* Höhe wird IMMER von den Feldern bestimmt – die Tax-Row reserviert
     dauerhaft den Platz, damit der Toggle-Wechsel die Zeile nicht
     vergrößert oder verkleinert. Nur Sichtbarkeit + Interaktivität
     animieren. */
  opacity:0;
  pointer-events:none;
  transition:opacity 180ms ease;
  will-change:opacity;
}

.calc-app .tax-fields.is-open,
.calc-app .z-tax-fields.is-open,
.calc-app .fs-tax-fields.is-open,
.calc-app .w-tax-fields.is-open{
  opacity:1;
  pointer-events:auto;
}

/* Einzelnes Feld: Label oben, Input darunter.
   Breite folgt dem Grid-Track (flex column, min-width:0).
   Zeile so kompakt wie möglich – Label klein, gap minimal. */
.calc-app .tax-field,
.calc-app .z-tax-field,
.calc-app .fs-tax-field,
.calc-app .w-tax-field{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

.calc-app .tax-field > span,
.calc-app .z-tax-field > span,
.calc-app .fs-tax-field > span,
.calc-app .w-tax-field > span{
  font-size:10px;
  line-height:1;
  color:var(--muted);
  opacity:.9;
  margin:0;
  min-width:0;
}

/* Steuer-Inputs: Höhe wie normale Form-Inputs, damit die Tax-Row
   sich beim Öffnen so wenig wie möglich vergrößert. */
.calc-app .tax-fields input[type="text"],
.calc-app .z-tax-fields input[type="text"],
.calc-app .fs-tax-fields input[type="text"],
.calc-app .w-tax-fields input[type="text"]{
  height:var(--tax-field-h, 30px);
  min-height:var(--tax-field-h, 30px);
  max-height:var(--tax-field-h, 30px);
  padding:var(--tax-field-pad-y, 3px) var(--tax-field-pad-x, 9px);
  box-sizing:border-box;
  width:100%;
  min-width:0;
  max-width:100%;
  flex:none;
}

/* Fokus-Ring darf nicht durch overflow abgeschnitten werden */
.calc-app .tax-fields input:focus,
.calc-app .tax-fields input:focus-visible,
.calc-app .z-tax-fields input:focus,
.calc-app .z-tax-fields input:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(0,0,0,.22);
}
:root[data-theme="dark"] .calc-app .tax-fields input:focus,
:root[data-theme="dark"] .calc-app .tax-fields input:focus-visible,
:root[data-theme="dark"] .calc-app .z-tax-fields input:focus,
:root[data-theme="dark"] .calc-app .z-tax-fields input:focus-visible{
  box-shadow:0 0 0 2px rgba(255,255,255,.75);
}

/* Mobile: Steuerfelder eine pro Zeile.
   grid-template-columns für beide States identisch (1fr) – die Tax-Row
   reserviert dauerhaft den vertikalen Platz für alle Felder. */
@media (max-width: 760px){
  .calc-app .tax-fields,
  .calc-app .z-tax-fields,
  .calc-app .fs-tax-fields,
  .calc-app .w-tax-fields{
    grid-template-columns:1fr;
  }
  .calc-app .tax-field,
  .calc-app .z-tax-field,
  .calc-app .fs-tax-field,
  .calc-app .w-tax-field{
    width:100%;
    min-width:0;
    max-width:100%;
  }
}