/* Entnahmeplan – lokale Overrides
   Ziel: Kapitalverzehr-Toggle im ON-State grün wie der Steuer-Toggle.
   Diese Datei wird nach styles.css geladen und überschreibt daher globale Regeln. */

#withdrawal-app .w-decay-toggle .rr-toggle.on .rr-track,
#withdrawal-app .w-decay-toggle .rr-toggle.is-on .rr-track,
#withdrawal-app .w-decay-toggle .rr-toggle[aria-pressed="true"] .rr-track{
  background:#22c55e !important;
}

/* Entnahmeplan – Feste Feldbreiten
   Vorgabe: Kein Eingabefeld (Inputs/Selects) darf breiter als 200px sein.
   WICHTIG: Perioden-Selects (.w-compact) und Toggle-Buttons bleiben unverändert. */

/* Inputs (Text/Numeric) auf 200px fixieren (auch wenn .w-grow gesetzt ist) */
#withdrawal-app .w-form-table input[type="text"],
#withdrawal-app .w-form-table input[type="number"],
#withdrawal-app .w-form-table input[type="tel"],
#withdrawal-app .w-form-table input[type="email"]{
  width:200px !important;
  max-width:200px !important;
  flex:0 0 200px !important;
}

/* Selects ebenfalls auf max. 200px begrenzen – Perioden-Selects bleiben über .w-compact unangetastet */
#withdrawal-app .w-form-table select{
  max-width:200px !important;
}
#withdrawal-app .w-form-table select:not(.w-compact){
  width:200px !important;
  flex:0 0 200px !important;
}

/* Sicherheitsnetz: falls über Wrapper/Klassen Breiten gesetzt sind */
#withdrawal-app .w-form-table .w-grow{
  width:200px !important;
  max-width:200px !important;
  flex:0 0 200px !important;
  min-width:0 !important;
}

/* Entnahmeplan – Feldbreiten: gezielte Reduktion um 60%
   Zinssatz p.a. (%) (#w_rate) und Entnahmezeitraum (#w_term)
   Basis ist die allgemeine 200px-Regel -> 40% davon = 80px. */
#withdrawal-app .w-form-table input#w_rate,
#withdrawal-app .w-form-table input#w_term{
  width:80px !important;
  max-width:80px !important;
  flex:0 0 80px !important;
}

/* Entnahmeplan – Steuerfelder
   Layout + Breiten liegen zentral in ./entnahmeplan_taxfields.css,
   damit hier keine doppelten/konkurrierenden Regeln entstehen.
*/


/* Entnahmeplan – Steuerfelder: Feldhöhe hart fixieren
   Schutzregel: Die Steuer-Inputs dürfen nicht „aufblasen“.
   Soll-Höhe ist 34px (wie global in ../../styles.css). */
#withdrawal-app .w-tax-fields input[type="text"]{
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  padding:5px 9px !important;
  box-sizing:border-box;
}
/* Entnahmeplan – Steuerfelder: Breite hart fixieren
   Ziel: Jede Steuer-Eingabe ist exakt --w-tax-field-width breit (Desktop/Tablet),
   unabhängig von globalen Input-Breiten oder Grid/Flex-Regeln anderer Stylesheets.
   Höhe bleibt unverändert (wird oben separat gelockt). */

#withdrawal-app{ --w-tax-field-width:110px; }

#withdrawal-app .w-tax-fields{
  /* Grid explizit und unveränderbar festnageln */
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(var(--w-tax-field-width), var(--w-tax-field-width))) !important;
  gap:12px 16px !important;
  justify-content:start !important;
  align-items:end !important;
}

#withdrawal-app .w-tax-fields > .w-tax-field{
  width:var(--w-tax-field-width) !important;
  min-width:var(--w-tax-field-width) !important;
  max-width:var(--w-tax-field-width) !important;
}

/* Wichtig: globale Entnahmeplan-Regel setzt Inputs teils auf 200px.
   Für Steuerfelder muss die Breite aber immer der Feldspalte folgen. */
#withdrawal-app .w-tax-fields > .w-tax-field > input[type="text"].w-autow{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  flex:0 0 auto !important;
}

/* Mobile: einspaltig, damit auf kleinen Screens alles benutzbar bleibt. */
@media (max-width:760px){
  #withdrawal-app .w-tax-fields{
    grid-template-columns: 1fr !important;
  }
  #withdrawal-app .w-tax-fields > .w-tax-field{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }
}

/* Entnahmeplan: Szenarien-Button ausblenden (Addon UI) */
#withdrawal-app .addons-scenarios-open{
  display:none !important;
}

/* Entnahmeplan Mobile: Tools (i + Rechner) in der Label-Zeile rechts,
   Eingaben darunter, ohne horizontales Scrollen. */
@media (max-width:520px){
  #withdrawal-app .w-form-table tr.w-row{
    display:grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label tools"
      "inputs tools";
    column-gap: 12px;
    row-gap: 8px;
    align-items:center;
  }

  /* table-cells als normale Grid-Items behandeln */
  #withdrawal-app .w-form-table tr.w-row > td{
    display:block;
  }

  #withdrawal-app .w-form-table td.label{ grid-area: label; }
  #withdrawal-app .w-form-table td.tools{
    grid-area: tools;
    align-self:center;
    justify-self:end;
    display:flex;
    align-items:center;
    gap: 10px;
    white-space:nowrap;
  }
  #withdrawal-app .w-form-table td.inputs{
    grid-area: inputs;
    width:100%;
    min-width:0;
  }

  /* Inputs in einer Zeile dürfen umbrechen statt die Seite zu sprengen */
  #withdrawal-app .w-form-table .w-inputs-line{
    flex-wrap:wrap;
    gap: 10px;
  }
}

/* Entnahmeplan – Info-Icon immer direkt neben dem Label (alle Breakpoints)
   Anforderungen:
   - Icon steht rechts neben dem jeweiligen Label
   - Kreis ist exakt so hoch wie die Label-Zeile
   - Label-Zeile wird durch das Icon nicht höher
*/
#withdrawal-app .w-form-table .w-label-line{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

#withdrawal-app .w-form-table .w-label-line > label{
  margin:0;
}

#withdrawal-app .w-form-table .w-label-line .i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  padding:0;
  /* 1lh = exakt die Zeilenhöhe der aktuellen Schrift (moderne Browser) */
  height:1lh;
  width:1lh;
  line-height:1lh;
  /* etwas kleiner, damit die Zeile nicht „drückt“ */
  font-size:0.85em;
  box-sizing:border-box;
}

/* Fallback, falls 1lh nicht unterstützt wird */
@supports not (height: 1lh){
  #withdrawal-app .w-form-table .w-label-line .i{
    height:1em;
    width:1em;
    line-height:1em;
  }
}

/* Tooltip-Variante bleibt positionierbar */
#withdrawal-app .w-form-table .w-label-line .i.tt{
  position:relative;
}


/* Entnahmeplan – Info-Icons & Tooltips vereinheitlichen
   Anforderungen:
   - Alle "i" Icons identisch wie in der Zeile Anfangskapital (kompakt, 1 Zeilenhöhe).
   - Tooltips einheitlich wie beim Steuer-Tooltip.
   - Tooltip darf ca. 20% breiter sein als Default.
*/
#withdrawal-app .i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  padding:0;
  height:1lh;
  width:1lh;
  line-height:1lh;
  font-size:0.85em;
  box-sizing:border-box;
}
@supports not (height: 1lh){
  #withdrawal-app .i{
    height:1em;
    width:1em;
    line-height:1em;
  }
}

/* Entnahmeplan – Fix: Steuern-Info-Icon Hintergrund
   In der Steuer-Zeile liegt das Info-Icon innerhalb des TaxSV-Containers.
   Dadurch wurde der Kreis-Hintergrund im Dunkel-Design optisch „verschluckt“.
   Hier wird der Hintergrund für genau dieses Icon wieder explizit gesetzt.
   (Andere Info-Icons bleiben unberührt.) */
#withdrawal-app #taxsv-card .taxsv-compact-toggle > .i{
  background:#eef2ff;
  border-radius:999px;
}
:root[data-theme="dark"] #withdrawal-app #taxsv-card .taxsv-compact-toggle > .i{
  /* In der Steuer-Zeile sitzt das Icon auf der Card-Fläche; 
     mit dem Standard-Info-Icon Hintergrund (#1f2937) wirkt es dort
     optisch wie „verschluckt“. Wir nehmen daher die Input-Fläche als
     Kontrast-Hintergrund, analog zu den Feldern. */
  background:#0f172a;
  border:1px solid #263043;
}

/* Tooltip-Breite: +20% */
#withdrawal-app .tt .tt-pop{
  width:min(504px, 90vw);
}

/* Entnahmeplan – Steuern: Info-Icon neben dem TaxSV-Toggle
   Im TaxSV-Container werden Hintergründe teils überschrieben; dadurch kann das
   "i" optisch wie reiner Text wirken. Hier erzwingen wir dieselbe Optik wie
   bei allen anderen Info-Icons. */
#withdrawal-app #taxsv-card .taxsv-compact-toggle > .i{
  background:#eef2ff !important;
  color:#3b82f6 !important;
  border-radius:999px !important;
  border:0 !important;
}
:root[data-theme="dark"] #withdrawal-app #taxsv-card .taxsv-compact-toggle > .i{
  background:#1f2937 !important;
  color:var(--accent) !important;
  border:0 !important;
}


/* Entnahmeplan – Light-Theme: Tabellen-Header vereinheitlichen (kein schwarzer Block bei "Jahr")
   Hintergrund/Schrift der gesamten Headerzeile konsistent setzen und Sonderfall erste Spalte neutralisieren. */
:root:not([data-theme="dark"]) #withdrawal-app #yearTable thead,
:root:not([data-theme="dark"]) #withdrawal-app #yearTable thead tr,
:root:not([data-theme="dark"]) #withdrawal-app #yearTable thead th{
  background-color: var(--card) !important;
  color: var(--muted) !important;
}

:root:not([data-theme="dark"]) #withdrawal-app #yearTable thead th:first-child{
  background-color: var(--card) !important;
  background-image: none !important;
  color: var(--muted) !important;
}

/* Falls der Sticky-Summary-Header aktiv ist: identisches Verhalten */
:root:not([data-theme="dark"]) #withdrawal-app #fsSummaryTable thead,
:root:not([data-theme="dark"]) #withdrawal-app #fsSummaryTable thead tr,
:root:not([data-theme="dark"]) #withdrawal-app #fsSummaryTable thead th{
  background-color: var(--card) !important;
  color: var(--muted) !important;
}
:root:not([data-theme="dark"]) #withdrawal-app #fsSummaryTable thead th:first-child{
  background-color: var(--card) !important;
  background-image: none !important;
  color: var(--muted) !important;
}

/* Entnahmeplan: Diagramm-Tooltip – Label/Wert immer in einer Zeile ausrichten */
#withdrawal-app .chart-tooltip .tt-box{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: center;
}

#withdrawal-app .chart-tooltip .tt-box .tt-k{
  opacity: .88;
}

#withdrawal-app .chart-tooltip .tt-box .tt-v{
  text-align: right;
  white-space: nowrap;
}


/* ==================== Steuer-Erklärsektion ==================== */
#w_tax_explain{
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--br);
  border-radius: 14px;
  background: var(--card);
  color: var(--txt);
}
#w_tax_explain.is-hidden{ display:none; }
#w_tax_explain h3{
  margin: 0 0 8px 0;
  font-size: 16px;
}
#w_tax_explain p{ margin: 8px 0; line-height: 1.35; }
#w_tax_explain ul{ margin: 8px 0 8px 18px; padding: 0; }
#w_tax_explain li{ margin: 6px 0; }
#w_tax_explain .w-tax-explain-hint{
  opacity: .9;
}

/* ==================== Tooltip Layout Fix (Label/Value in einer Zeile) ==================== */
#withdrawal-app .chart-tooltip .tt-grid{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: center;
}
#withdrawal-app .chart-tooltip .tt-grid .tt-kv{ display: contents; }
#withdrawal-app .chart-tooltip .tt-grid .tt-v{
  text-align: right;
  white-space: nowrap;
}

/* Tabellen-Steuer-Tooltip */
#withdrawal-app td.w-tax-col{ white-space: nowrap; }
#withdrawal-app .w-tax-tip{
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

/* Overlay-Tooltip: über allem, scrollbar im Tooltip statt im Eingabebereich */
.chart-tooltip.tt-overlay{
  position: fixed;
  z-index: 9999;
  pointer-events: auto;
  max-height: min(70vh, 520px);
  overflow: auto;
}