/*
  Fondssparrechner – Eingabefelder (UI)

  Ziel:
  - Gleicher Input-Aufbau wie im Entnahmeplan (3 Spalten: Tools | Label | Inputs)
  - Saubere Responsiveness: Desktop/Tablet = Tabelle, Mobile = Stack (Inputs unter Label)
  - Keine „Layout-Hacks“ in separaten Fix-Dateien
*/

/* Table-Layout wie Entnahmeplan, aber scoped auf den Fondssparrechner
   ================================================================
   Breitensteuerung (Desktop & kleine Screens):
   - Label-Spalte:   --fs-col-label
   - Eingabe-Spalte: --w-inputs-max
   - Select-Breite:  --fs-select-w
   - Input-Min/Basis: --fs-field-min / --fs-field-basis

   => Du passt die Werte unten pro Breakpoint an (Desktop / klein / Mobile).
*/
#calc-form.fonds-app .form-card{ overflow-x:auto; }

/* Default (Desktop-ish) */
#calc-form.fonds-app{
  --fs-col-tools: 44px;
  --fs-col-label: 170px;
  --w-inputs-max: 560px;

  /* Steuer-Toggle (TaxSV): feste Breite wie im Entnahmeplan, aber ohne vw-„Atmen“ */
  --fs-tax-toggle-w: 240px;

  --fs-select-w: var(--compact-select-w);
  --fs-field-min: 0px;         /* wichtig: darf schrumpfen, damit Tabelle nicht aufbläst */
  --fs-field-basis: 260px;     /* Startbreite der "w-grow" Inputs in Multi-Field-Zeilen */

  --fs-mobile-field-basis: 220px; /* Mobile: Basisbreite je Feld im Wrap */
}

#calc-form.fonds-app .w-form-table{
  width:auto;
  max-width:100%;
  min-width:0;
  border-collapse:collapse;
  table-layout:fixed; /* wie Entnahmeplan: Colgroup-Breiten werden erzwungen */
}

#calc-form.fonds-app .w-form-table .w-col-tools{ width:var(--fs-col-tools); }
#calc-form.fonds-app .w-form-table .w-col-label{ width:var(--fs-col-label); }
#calc-form.fonds-app .w-form-table .w-col-inputs{ width:var(--w-inputs-max) !important; }

#calc-form.fonds-app .w-form-table .w-cell.inputs{
  width:var(--w-inputs-max);
  max-width:var(--w-inputs-max);
}

#calc-form.fonds-app .w-form-table .w-row{ border-bottom:1px solid var(--br); }
#calc-form.fonds-app .w-form-table .w-row:last-child{ border-bottom:0; }

#calc-form.fonds-app .w-form-table .w-cell{ padding:12px 10px; vertical-align:middle; }
#calc-form.fonds-app .w-form-table .w-cell.label{ padding-left:6px; padding-right:6px; font-weight:700; }
#calc-form.fonds-app .w-form-table .w-cell.inputs{ padding-left:6px; overflow:hidden; }

#calc-form.fonds-app .w-form-table .w-cell.tools{ white-space:nowrap; }
#calc-form.fonds-app .w-form-table .w-cell.tools{ display:flex; align-items:center; gap:10px; }
#calc-form.fonds-app .w-form-table .w-cell.tools .calc-label{ white-space:nowrap; }

/* Auswahl-Kreis (Radio-Icon) exakt so hoch wie die Eingabefelder (wie Entnahmeplan),
   sonst werden die Zeilen mit Radio-Button unnötig hoch. */
#calc-form.fonds-app .calc-label .calc-ico{ width:32px; height:32px; }
#calc-form.fonds-app .calc-label .calc-ico svg{ width:14px; height:14px; }

#calc-form.fonds-app .w-inputs-line{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;
  white-space:nowrap;
  max-width:var(--w-inputs-max);
}

/* Eingabefelder: feste Breite wie im Entnahmeplan – nicht die volle Spalte ausnutzen */
#calc-form.fonds-app .w-inputs-line input[type="text"],
#calc-form.fonds-app .w-inputs-line .w-grow{
  width:200px;
  max-width:200px;
  flex:0 0 200px;
  min-width:0;
}

/* Auswahllisten (Selects) */
#calc-form.fonds-app .w-form-table .w-compact{
  width:var(--fs-select-w);
  min-width:var(--fs-select-w);
}

/* Kurszuwachs: Badge sauber im Input */
#calc-form.fonds-app .with-suffix{ position:relative; width:100%; }
#calc-form.fonds-app .with-suffix #effRateBadge{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  white-space:nowrap;
}

/* Steuerfelder: kompakt, bricht sauber um.
   Ein-/Ausblenden animiert wie im Entnahmeplan (gesteuert über .is-open,
   das app.js via updateTaxVisibility() auf .z-tax-fields setzt). */
#calc-form.fonds-app .fs-tax-fields{
  display:grid;
  /* Bis zu 4 Felder pro Zeile; bei Bedarf werden sie schmaler.
     max-width deckelt auf 4 Spalten (4 × 130 + 3 × 12 gap). */
  grid-template-columns:repeat(auto-fit, minmax(118px, 1fr));
  gap:12px;
  max-width:558px;
  white-space:normal;
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height 240ms ease, opacity 180ms ease;
}
#calc-form.fonds-app .fs-tax-fields.is-open{
  max-height:600px;
  opacity:1;
  overflow:visible;
}

/* Label über dem Feld, etwas kleiner – wie im Entnahmeplan.
   Breite kommt aus dem Grid (auto-fit), daher kein festes width hier. */
#calc-form.fonds-app .fs-tax-field{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  box-sizing:border-box;
}

#calc-form.fonds-app .fs-tax-field > span{
  font-size:11px;
  line-height:1.1;
  color:var(--muted);
  opacity:.9;
  margin:0;
  min-width:0;
}

#calc-form.fonds-app .fs-tax-field > input{
  width:100%;
  min-width:0;
  max-width:100%;
}

/* Kleine Screens (Tablet / kleiner Desktop): etwas kompakter */
@media (max-width: 1040px){
  #calc-form.fonds-app{
    --fs-col-label: 150px;
    --w-inputs-max: 480px;
    --fs-field-basis: 220px;
  }
}

/* Steuern aktiv: Eingabespalte wie im Entnahmeplan verbreitern,
   damit die Steuerchips weniger stark umbrechen. */
@media (min-width: 900px) and (max-width: 1099px){
  #calc-form.fonds-app:has(#z_taxEnabled:checked){
    --w-inputs-max: 880px;
  }
}
@media (min-width: 1100px){
  #calc-form.fonds-app{
    --w-inputs-max: min(1000px, 100%);
  }
}

/* Mobile: Inputs unter Label (wie Entnahmeplan) */
@media (max-width: 900px){
  #calc-form.fonds-app .form-card{ overflow-x:hidden; }

  #calc-form.fonds-app .w-form-table,
  #calc-form.fonds-app .w-form-table tbody{
    display:block;
    width:100%;
  }

  #calc-form.fonds-app .w-form-table .w-row{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
  }

  #calc-form.fonds-app .w-form-table .w-cell{
    display:block;
    width:auto;
    padding-left:0;
    padding-right:0;
  }

  #calc-form.fonds-app .w-form-table .w-cell.label{
    order:1;
    flex:1 1 auto;
    padding-bottom:6px;
  }

  #calc-form.fonds-app .w-form-table .w-cell.tools{
    order:2;
    flex:0 0 auto;
    margin-left:auto;
    align-self:flex-start;
    padding-left:10px;
    white-space:nowrap;
  }

  #calc-form.fonds-app .w-form-table .w-cell.inputs{
    order:3;
    flex:1 1 100%;
    width:100%;
    overflow:visible;
    padding-bottom:12px;
  }

  #calc-form.fonds-app .w-inputs-line{ flex-wrap:wrap; gap:10px; }
  #calc-form.fonds-app .w-inputs-line > *{ min-width:0; flex:1 1 var(--fs-mobile-field-basis); }
  #calc-form.fonds-app .w-inputs-line .w-compact{ width:100%; min-width:0; max-width:100%; flex:1 1 var(--fs-mobile-field-basis); }
}

/* Ausschüttungen-Feld neben Endkapital (nur sichtbar bei distMode=dist):
   Label links, Wert rechts – alles in einer Zeile, damit die Zeilenhöhe
   identisch mit allen anderen Eingabezeilen bleibt. */
#calc-form.fonds-app .fs-dist-total{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:6px;
  min-width:0;
  box-sizing:border-box;
  flex-shrink:0;
}
#calc-form.fonds-app .fs-dist-total > span{
  font-size:inherit;
  font-weight:700;
  color:inherit;
  opacity:1;
  white-space:nowrap;
  flex-shrink:0;
}
#calc-form.fonds-app .fs-dist-total > input{
  width:120px;
  min-width:0;
  flex-shrink:0;
}

/* Jährliche Erträge (%): das innere Span-Label ausblenden, damit die Zeile
   nicht höher als alle anderen Eingabezeilen wird. */
#calc-form.fonds-app .z-dist-yield{
  flex-direction:row;
  align-items:center;
  gap:0;
  min-width:0;
}
#calc-form.fonds-app .z-dist-yield > span{ display:none; }

/* Steuer-Toggle: Optik & Breite zentral aus lib/toggle.css (fit-content) */

/* Steuer-Toggle-Zeile: Toggle + Info-Icon nebeneinander (wie Entnahmeplan) */
#calc-form.fonds-app .taxsv-compact-toggle{
  display:flex;
  align-items:center;
  gap:10px;
}
#calc-form.fonds-app .taxsv-compact-toggle .i.tt{
  flex:0 0 auto;
}

/* Info-Icon direkt neben dem Steuer-Toggle: gefüllt statt umrandet (wie Entnahmeplan) */
#calc-form.fonds-app #taxsv-card .taxsv-compact-toggle > .i{
  background:#eef2ff;
  color:#3b82f6;
  border:0;
}
:root[data-theme="dark"] #calc-form.fonds-app #taxsv-card .taxsv-compact-toggle > .i{
  background:#1f2937;
  color:var(--accent);
  border:0;
}

/* Tooltips (Info-i)
   Fix: Tooltip-Texte dürfen nicht im Layout sichtbar sein.
   Verhalten wie in anderen Rechnern: Hover (Desktop) + Focus (Tastatur/Touch)
*/
#calc-form.fonds-app .tt{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-left:8px;
  border-radius:999px;
  border:1px solid var(--br);
  color:var(--muted);
  font-weight:800;
  font-size:11px;
  line-height:1;
  cursor:help;
  user-select:none;
}

#calc-form.fonds-app .tt:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

#calc-form.fonds-app .tt .tt-pop{
  position:absolute;
  left:50%;
  top:calc(100% + 10px);
  transform:translateX(-50%);
  min-width:240px;
  max-width:min(420px, 85vw);
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--br);
  background:var(--card);
  box-shadow:0 12px 40px rgba(0,0,0,.25);
  z-index:50;
  display:none !important;
  white-space:normal;
}

#calc-form.fonds-app .tt .tt-title{ display:block; font-weight:800; margin-bottom:6px; }
#calc-form.fonds-app .tt .tt-body{ display:block; color:var(--muted); font-size:12px; line-height:1.35; }
#calc-form.fonds-app .tt .tt-lead{ display:block; }

#calc-form.fonds-app .tt:hover .tt-pop,
#calc-form.fonds-app .tt:focus .tt-pop,
#calc-form.fonds-app .tt:focus-within .tt-pop{
  display:block !important;
}

/* Tabellen-Header: „Verlauf" links, Ansicht-Umschalter rechts */
.fs-table-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}

/* Monatswerte / Jahreswerte Segmented Toggle
   ============================================
   Optik wie der Depot/Zinskonto-Umschalter im Entnahmeplan. */
#fsViewToggle{
  display:inline-flex;
  border:1px solid var(--br);
  border-radius:8px;
  overflow:hidden;
  flex-shrink:0;
}

.fs-view-btn{
  padding:5px 16px;
  min-width:110px;
  text-align:center;
  font-size:13px;
  font-weight:500;
  line-height:1.3;
  background:transparent;
  color:var(--txt);
  border:none;
  cursor:pointer;
  transition:background 0.15s, color 0.15s;
  white-space:nowrap;
}

.fs-view-btn + .fs-view-btn{
  border-left:1px solid var(--br);
}

.fs-view-btn.is-active{
  background:var(--accent);
  color:#fff;
  font-weight:600;
}

.fs-view-btn:hover:not(.is-active){
  background:rgba(128,128,128,0.12);
}

/* Tooltip-Pfeil */
#calc-form.fonds-app .tt .tt-pop::before{
  content:"";
  position:absolute;
  top:-7px;
  left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:14px;
  height:14px;
  background:var(--card);
  border-left:1px solid var(--br);
  border-top:1px solid var(--br);
}