/* ============================================================
   bacap – Komponente: Formular-Tabelle (.calc-app .w-form-table)
   ------------------------------------------------------------
   3-Spalten-Layout (Tools | Label | Inputs) für alle Rechner.

   Aktivierung:  <main class="container calc-app"> ... </main>
   Mobile-Stack: @media (max-width: 760px) – Label oben, Tools rechts,
                 Inputs darunter.

   Parameter (Custom Properties, lokal überschreibbar):
     --w-col-tools       Breite Tools-Spalte (Default: 1% = "schrumpft auf Inhalt")
     --w-col-label       Breite Label-Spalte (Default: 210px, fest – damit
                         alle Rechner dieselbe Eingabe-Position haben)
     --w-inputs-max      max-width der Inputs-Spalte
     --w-row-pad-y/-x    Innenabstand der Zellen
     --w-cell-gap        gap zwischen Elementen in der Inputs-Zeile
   ============================================================ */

/* Form-Card: zentrierter Inhalts-Container, schrumpft am Inhalt.
   overflow:visible (Default), damit position:absolute Tooltips frei
   über den Container hinausragen können, ohne einen Scrollbalken
   auszulösen. Horizontaler Scroll für breite Inhalte (Ergebnis-
   Tabellen) übernimmt jeweils der .table-scroll Wrapper. */
.calc-app .form-card{ overflow:visible; }
.calc-app .form-grid{ width:fit-content; max-width:100%; margin:0 auto; }

/* Tabellengerüst */
.calc-app .w-form-table{
  width:auto;
  max-width:100%;
  min-width:0;
  border-collapse:collapse;
  table-layout:auto;
}

.calc-app .w-form-table .w-col-tools  { width:var(--w-col-tools, 1%); }
.calc-app .w-form-table .w-col-label  { width:var(--w-col-label, 210px); }
.calc-app .w-form-table .w-col-inputs { width:auto; }

/* Zeilen: feine Trennlinie zwischen Eingaben */
.calc-app .w-form-table .w-row{ border-bottom:1px solid var(--br); }
.calc-app .w-form-table .w-row:last-child{ border-bottom:0; }

/* Zellen */
.calc-app .w-form-table .w-cell{
  padding:var(--w-row-pad-y, 3px) var(--w-row-pad-x, 4px);
  vertical-align:middle;
}
.calc-app .w-form-table .w-cell.tools{
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:6px;
  padding-right:0;
}
.calc-app .w-form-table .w-cell.label{
  font-weight:700;
  padding-left:8px;
  padding-right:4px;
  white-space:nowrap;
  /* Rechtsbündig: alle Labels sitzen am rechten Cell-Rand, direkt
     neben den Eingabefeldern. */
  text-align:right;
  /* Feste Breite, damit alle Rechner dieselbe Eingabe-Position haben.
     min-width + max-width erzwingen die Breite – der <col width> wird
     in table-layout:auto nur als Hinweis behandelt und vom Browser
     überstimmt, sobald ein Label (z.B. "Ertragsverwendung") mehr Platz
     verlangt. */
  box-sizing:border-box;
  width:var(--w-col-label, 210px);
  min-width:var(--w-col-label, 210px);
  max-width:var(--w-col-label, 210px);
}
.calc-app .w-form-table .w-cell.inputs{
  padding-left:8px;
  overflow:hidden;
  max-width:var(--w-inputs-max, 560px);
}

/* Label + Info-Icon nebeneinander */
.calc-app .w-label-line{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.calc-app .w-label-line > label{ margin:0; }

/* Auswahl-Icon (Radio-Button "Lösen nach") */
.calc-app .calc-label{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--muted); font-weight:600;
}
.calc-app .calc-label input{ width:18px; height:18px; }
.calc-app .calc-label .calc-ico{
  display:inline-grid; place-items:center;
  width:40px; height:40px;
  border-radius:var(--radius-md);
  color:var(--accent);
}
.calc-app .calc-label .calc-ico svg{ width:18px; height:18px; }

/* Inputs-Zeile innerhalb einer Tabellen-Zelle */
.calc-app .w-inputs-line{
  display:flex;
  align-items:center;
  gap:var(--w-cell-gap, 12px);
  flex-wrap:nowrap;
  white-space:nowrap;
  max-width:var(--w-inputs-max, 560px);
}

/* Info-Icon (kreisrund, deutlich sichtbar). Größe + Schrift kommen
   aus --i-icon-size / --i-icon-font (Tokens), damit alle Rechner
   denselben Wert nutzen. */
.calc-app .w-label-line .i,
.calc-app .taxsv-compact-toggle .i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  padding:0;
  height:var(--i-icon-size, 22px);
  width:var(--i-icon-size, 22px);
  line-height:1;
  font-size:var(--i-icon-font, 11px);
  box-sizing:border-box;
  cursor:help;
  border-radius:var(--radius-pill);
  background:var(--info-bg);
  color:var(--info-fg);
  font-weight:800;
  user-select:none;
}
:root[data-theme="dark"] .calc-app .w-label-line .i,
:root[data-theme="dark"] .calc-app .taxsv-compact-toggle .i{
  background:#1f2937;
  color:var(--accent);
}

/* ------------------------------------------------------------
   Mobile-Stack (≤ 760 px)
   Label oben, Tools rechts, Inputs darunter.
   ------------------------------------------------------------ */
@media (max-width: 760px){
  .calc-app .form-card{ overflow:visible; }

  .calc-app .w-form-table,
  .calc-app .w-form-table tbody,
  .calc-app .w-form-table tr.w-row{
    display:block;
    width:100%;
  }
  .calc-app .w-form-table tr.w-row{ position:relative; }
  .calc-app .w-form-table td{
    display:block;
    width:100%;
    box-sizing:border-box;
  }

  .calc-app .w-form-table td.label,
  .calc-app .w-form-table td.inputs{ padding-right:54px; }

  .calc-app .w-form-table td.label{
    display:flex;
    align-items:center;
    padding-bottom:2px;
    min-height:0;
    /* Auf Mobile (Stack-Layout) Labels wieder linksbündig, sonst stehen
       sie inkonsistent rechts über dem Input. Außerdem feste Breite
       der Desktop-Variante zurücknehmen – Mobile-Label soll volle
       Stack-Breite haben. */
    text-align:left;
    width:auto;
    min-width:0;
    max-width:none;
  }
  .calc-app .w-form-table td.inputs{
    padding-top:0;
    margin-top:0;
  }

  .calc-app .w-form-table td.tools{
    position:absolute;
    top:0; right:0; bottom:0;
    width:44px; height:100%;
    padding:0; margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .calc-app .w-form-table td.inputs .w-inputs-line{
    flex-wrap:wrap;
    gap:10px;
    white-space:normal;
  }

  /* Info-Icon im Mobile-Stack ausblenden (Platz sparen) */
  .calc-app .w-form-table td.label .i{ display:none; }
}