/* AV-Depotrechner – lokale Anpassungen (orientiert am Entnahmeplan) */

/* ---- Eingabebereich: volle Breite, links ausgerichtet (wie Entnahmeplan) ---- */
#avdepot-app{
  --w-col-tools: 20px;
  --w-col-label: 278px;   /* breit genug für "Rendite Auszahlungsphase (%)" + i-Icon ohne Umbruch */
  --w-inputs-max: min(1000px, 100%);
}
/* Eingabebereich so schmal wie sinnvoll (Inhaltsbreite), links ausgerichtet */
#avdepot-app .form-grid{ width: fit-content; max-width: 100%; margin: 0; }
#avdepot-app .w-form-table{ width: auto; }
#avdepot-app .w-form-table .w-col-inputs{ width: auto; }

/* Desktop: Eingaben links (schmal), Diagramm rechts daneben.
   align-items:stretch => beide Spalten exakt gleich hoch (Eingabe-Sektion =
   Diagrammhöhe). Zeilenhöhen/Abstände im Formular bleiben unverändert; der
   Mehrplatz erscheint als Leerraum unten in der Karte. */
@media (min-width: 1000px){
  #avdepot-app .av-top{ display: flex; gap: 16px; align-items: stretch; margin: 16px 0; }
  #avdepot-app .av-top > .form-card{ flex: 0 0 auto; }
  #avdepot-app .av-top > .chart-wrap{ flex: 1 1 0; min-width: 0; margin: 0; }
}

/* Effektivkosten: schmales Zahlenfeld (gerade groß genug für "0,01") + Slider.
   Die Zeile ist so breit wie die Eingabefelder darüber (--field-w), damit der
   Slider exakt an derselben Stelle endet. */
#avdepot-app .av-cost-line{
  width: var(--field-w, 180px); max-width: var(--field-w, 180px);
}
#avdepot-app .av-cost-input{
  width: 58px; min-width: 58px; max-width: 58px; flex: 0 0 58px;
  text-align: right;
}
#avdepot-app .av-range{
  flex: 1 1 auto; min-width: 0;
  accent-color: var(--accent, #ff6b00);
  cursor: pointer;
}

/* Geburtsjahr: "Alter: xx" als überlagerndes Badge oben rechts AUF dem Feld
   (keine eigene Zeile -> Zeilenhöhe bleibt wie bei den anderen Feldern). */
#avdepot-app .av-birth-field{ position: relative; display: inline-flex; }
#avdepot-app .av-age-over{
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  font-size: .72rem; line-height: 1; white-space: nowrap;
  color: #000;
  background: rgba(127,127,127,0.16);
  padding: 2px 6px; border-radius: 6px;
  pointer-events: none;
}
#avdepot-app .av-age-over:empty{ display: none; }

/* Aktionsleiste (wie .actions, aber ohne Addon-Hooks) */
#avdepot-app .av-actions{
  display:flex; justify-content:center; align-items:center;
  gap:8px; padding:10px 14px; border-top:1px solid var(--br, #e5e7eb);
  flex-wrap:wrap;
}
/* Buttons: Icon + Text vertikal zentrieren (Basis-.btn ist nur inline-block,
   die Flex-Zentrierung greift sonst nur unter .actions). */
#avdepot-app .av-actions .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
}
#avdepot-app .av-actions .btn .btn-icon{
  display:inline-flex; align-items:center; width:1.1em; height:1.1em; line-height:1;
}
#avdepot-app .av-actions .btn .btn-icon svg{ display:block; width:100%; height:100%; }
/* Icon-only-Buttons (Permalink/CSV haben kein Label): schmaleres Padding.
   "Zurücksetzen" behält sein Label. */
#avdepot-app .av-actions .btn.icon-only-sm{ padding-inline:12px; }

/* Validierung */
#avdepot-app .av-field-err{
  color: #dc2626; font-size: .82rem; font-weight: 600; margin-top: 4px;
}
#avdepot-app .av-field-err[hidden]{ display: none; }
#avdepot-app input[aria-invalid="true"]{
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220,38,38,.25);
}

/* Vergleichs-Toggle */
#avdepot-app .av-compare-toggle{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .9rem; cursor: pointer; user-select: none;
}

/* ---- Diagramm ---- */
#avdepot-app .chart-inner{ position: relative; }
#avdepot-app #avChart{ width: 100%; height: auto; display: block; }
#avdepot-app .av-chart-legend{
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: center; margin-top: 8px;
  font-size: .85rem; color: var(--txt, #111827);
}
#avdepot-app .av-chart-legend .av-lg{ display: inline-flex; align-items: center; gap: 7px; }
#avdepot-app .av-chart-legend .av-lg-swatch{
  width: 22px; height: 0; border-top: 3px solid currentColor; border-radius: 2px;
}
#avdepot-app .av-chart-legend .av-lg-swatch.dashed{ border-top-style: dashed; }

/* Diagramm-Tooltip beim Hovern */
#avdepot-app #avChart{ cursor: crosshair; }
#avdepot-app .av-chart-tip{
  position: absolute; z-index: 20; pointer-events: none;
  min-width: 190px; max-width: 260px;
  background: var(--card, #fff); color: var(--txt, #111);
  border: 1px solid var(--br, #e5e7eb); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  padding: 8px 10px; font-size: .82rem; line-height: 1.3;
}
#avdepot-app .av-chart-tip .av-tip-title{ font-weight: 700; margin-bottom: 5px; }
#avdepot-app .av-chart-tip .av-tip-row{ display: flex; justify-content: space-between; gap: 12px; }
#avdepot-app .av-chart-tip .av-tip-k{ display: inline-flex; align-items: center; gap: 6px; color: var(--muted, #6b7280); }
#avdepot-app .av-chart-tip .av-tip-v{ font-variant-numeric: tabular-nums; white-space: nowrap; }
#avdepot-app .av-chart-tip .av-tip-sw{ width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
#avdepot-app .av-chart-tip .av-tip-sep{ border-top: 1px solid var(--br, #e5e7eb); margin: 5px 0; }
#avdepot-app .av-chart-tip .av-tip-vorteil .av-tip-k,
#avdepot-app .av-chart-tip .av-tip-vorteil .av-tip-v{ color: #16a34a; font-weight: 700; }
#avdepot-app .av-chart-tip .av-tip-neg .av-tip-k,
#avdepot-app .av-chart-tip .av-tip-neg .av-tip-v{ color: #dc2626; }

/* ---- Anspar- und Entnahmephase-Header: gleiche Hintergrundfarbe ---- */
#avdepot-app #yearTable thead th {
  background: color-mix(in srgb, var(--card, #fff) 80%, var(--accent, #ff6b00) 20%) !important;
  color: var(--txt, #111) !important;
  border-bottom: 2px solid var(--accent, #ff6b00) !important;
}
:root[data-theme="dark"] #avdepot-app #yearTable thead th {
  background: rgba(255,107,0,0.15) !important;
}

/* ---- Σ Anspar-Zeile (tbody, direkt unter Sparjahren) ---- */
#avdepot-app #yearTable tr.av-sum-spar td {
  font-weight: 700;
  border-top: 2px solid var(--accent, #ff6b00);
  border-bottom: 1px solid var(--br, #e5e7eb);
}

/* ---- Entnahmephase: Phasentrenner, Sub-Header, Zeilen ---- */
#avdepot-app #yearTable tr.av-draw-thead th{
  background: color-mix(in srgb, var(--card, #fff) 80%, var(--accent, #ff6b00) 20%);
  color: var(--txt, #111);
  font-weight: 700;
  font-size: .82rem;
  padding: 5px 8px;
  border-bottom: 2px solid var(--accent, #ff6b00);
  white-space: nowrap;
  position: sticky;
  top: 0;
}
:root[data-theme="dark"] #avdepot-app #yearTable tr.av-draw-thead th{
  background: rgba(255,107,0,0.15);
}

/* ---- Entnahmephase: Phasentrenner + Zeilen ---- */
#avdepot-app #yearTable tr.av-phase-sep td{
  background: var(--accent, #ff6b00) !important; color: #fff !important;
  padding: 6px 12px; font-size: .82rem; white-space: normal;
}
#avdepot-app #yearTable .av-phase-label{
  font-weight: 700; margin-right: 10px;
}
#avdepot-app #yearTable .av-phase-hint{
  opacity: .88; font-weight: 400;
}
#avdepot-app #yearTable tr.av-row-draw td{
  background: color-mix(in srgb, var(--card, #fff) 92%, var(--accent, #ff6b00) 8%);
}
:root[data-theme="dark"] #avdepot-app #yearTable tr.av-row-draw td{
  background: rgba(255,107,0,0.08);
}
#avdepot-app #yearTable tr.av-row-draw td.av-draw-rente{ font-weight: 600; }
#avdepot-app #yearTable tr.av-row-draw td.av-draw-netto{
  font-weight: 700; color: #15803d;
}
:root[data-theme="dark"] #avdepot-app #yearTable tr.av-row-draw td.av-draw-netto{
  color: #4ade80;
}
#avdepot-app #yearTable .av-draw-monthly{
  font-size: 1em; font-weight: 700; color: var(--txt, #111);
}
#avdepot-app #yearTable td.av-muted{ color: var(--muted, #6b7280); }

/* ---- Übersichts-Balken (unter dem Diagramm) ---- */
.av-sb-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--br, #e5e7eb);
}
.av-sb-col{ min-width: 0; }
.av-sb-title{
  font-size: .72rem; font-weight: 700; color: var(--muted, #6b7280);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px;
}
.av-sb-row{ display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.av-sb-tag{
  font-size: .75rem; font-weight: 700; width: 62px; flex-shrink: 0;
  color: var(--muted, #6b7280);
}
.av-sb-tag--avd{ color: #16a34a; }
.av-sb-track{ flex: 1; display: flex; border-radius: 5px; overflow: hidden; height: 20px; min-width: 0; }
.av-sb-bar{
  display: flex; align-items: center; padding: 0 7px;
  overflow: hidden; min-width: 0; box-sizing: border-box;
}
.av-sb-bar--avd{ background: rgba(22,163,74,.22); color: #15803d; }
.av-sb-bar--norm{ background: #e5e7eb; color: var(--txt, #111); }
.av-sb-bar--adv{
  background: #fef9c3;
  border: 1px solid #fde047; border-left: none;
  color: #dc2626;
  /* Differenzbalken: Zahl rechtsbündig an der rechten Kante und – falls der
     Balken zu schmal ist – nach links über den Nachbarbalken hinausragen
     lassen, damit sie immer lesbar bleibt. */
  overflow: visible;
  justify-content: flex-end;
  position: relative;
  z-index: 2;
}
.av-sb-val{ font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-sb-bar--adv .av-sb-val{
  overflow: visible; text-overflow: clip;
  flex: 0 0 auto; text-align: right;
  /* Heller Umriss, damit die rote Zahl auch über dem grünen/grauen Balken trägt. */
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
}

/* ---- Ergebnistabelle: volle Breite, Zebra-Zeilen + Header erbt von #yearTable ---- */
#avdepot-app #yearTable{ table-layout: auto; width: max-content; min-width: 100%; }
#avdepot-app #yearTable td,
#avdepot-app #yearTable th{ white-space: nowrap; }
#avdepot-app #yearTable td.av-vorteil{ color: #16a34a; font-weight: 600; }
#avdepot-app #yearTable td.av-kosten{ color: #dc2626; }
#avdepot-app #yearTable tfoot td{ font-weight: 700; }

/* Zulagen-Spalte: Tooltip-Hinweis (Cursor) auf Zellen */
#avdepot-app #yearTable .av-ztip,
#av_stickyBar .av-ztip{ cursor: help; }
/* Spalten-Header mit Tooltip: gestrichelte Unterstreichung statt i-Icon */
#avdepot-app #yearTable thead th.av-th-tip,
#av_stickyBar .fs-summary-table thead th.av-th-tip{
  text-decoration: underline dotted;
  cursor: help;
}

/* ---- Rich Tooltip (HTML-Overlay für AV-Depot Aufschlüsselung) ---- */
#av-rtip {
  position: fixed;
  z-index: 9999;
  background: var(--card, #fff);
  color: var(--txt, #111);
  border: 1px solid var(--br, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  padding: 10px 14px;
  font-size: .82rem;
  line-height: 1.45;
  min-width: 220px;
  max-width: 260px;
  pointer-events: none;
}
#av-rtip .av-rt-title {
  font-weight: 700;
  margin-bottom: 7px;
  border-bottom: 1px solid var(--br, #e5e7eb);
  padding-bottom: 5px;
}
#av-rtip .av-rt-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 2px;
}
#av-rtip .av-rt-k { color: var(--muted, #6b7280); flex: 1; }
#av-rtip .av-rt-v {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  font-weight: 500;
  flex-shrink: 0;
}
#av-rtip .av-rt-neg .av-rt-k,
#av-rtip .av-rt-neg .av-rt-v { color: #dc2626; }
#av-rtip .av-rt-total .av-rt-k,
#av-rtip .av-rt-total .av-rt-v { font-weight: 700; color: var(--txt, #111); }
#av-rtip .av-rt-total .av-rt-v { color: #16a34a; }
#av-rtip .av-rt-reg .av-rt-v { color: #d97706; }
#av-rtip .av-rt-vorteil .av-rt-k,
#av-rtip .av-rt-vorteil .av-rt-v { color: #16a34a; font-weight: 700; }
#av-rtip .av-rt-sep { border-top: 1px solid var(--br, #e5e7eb); margin: 5px 0; }
#av-rtip .av-rt-sub-hd {
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 2px 0 3px;
}
#av-rtip .av-rt-sub .av-rt-k { padding-left: 10px; }
#avdepot-app #yearTable .av-rtip { cursor: help; }

/* ---- Jahr/Alter-Spalte: rechtsbündig ---- */
#avdepot-app #yearTable td:first-child,
#avdepot-app #yearTable th:first-child,
#avdepot-app #yearTable tr.av-draw-thead th:first-child{ text-align: right; }

/* ---- Zeilen-Toggle (Pfeil in erster Jahr-Zelle) ---- */
#avdepot-app #yearTable .av-fold-btn{
  background: none; border: none; padding: 0 4px 0 0;
  font-size: .85rem; line-height: 1;
  color: var(--accent, #ff6b00);
  cursor: pointer; opacity: .7;
  vertical-align: middle;
  transition: opacity .15s;
}
#avdepot-app #yearTable .av-fold-btn:hover{ opacity: 1; }

/* ---- Sticky-Ergebnisleiste (unten, immer sichtbar) – spiegelt die Tabelle ---- */
/* nutzt die geteilten Klassen .fs-sticky-summary / .fs-summary-table aus styles.css */
#av_stickyBar{ display: none; }
body.av-has-sticky{ padding-bottom: 96px; }
#av_stickyBar .fs-summary-table{ table-layout: auto; width: max-content; min-width: 100%; }
#av_stickyBar .fs-summary-table th,
#av_stickyBar .fs-summary-table td{ white-space: nowrap; }
#av_stickyBar .fs-summary-table td.av-vorteil{ color: #16a34a; font-weight: 700; }
#av_stickyBar .fs-summary-table td.av-kosten{ color: #dc2626; }