/* Mobile stacking for Entnahmeplan form rows.
   Goal: tools (info + calc icon) stay visually aligned to the *label line*
   (right side), but must not increase the label row height. Inputs remain
   stacked below to avoid horizontal scrolling. */

@media (max-width: 900px) {

  /* Mobile: Tools-Spalte schmal halten und Abstand konsistent zum Feld-Gap */
  #withdrawal-app{
    /* Die Tools-Spalte soll so breit sein wie der Rechner-Button (44px Kreis),
       damit der Abstand vom Eingabefeld bis zum Button exakt dem Feld-Gap entspricht
       (keine zusaetzliche Leerstelle durch Zentrierung in einer zu breiten Spalte). */
    --w-mobile-tools-width:44px;
    --w-mobile-tools-gap:12px;
  }

  /* Prevent horizontal scrolling caused by table layout on very small screens */
  #withdrawal-app .form-card {
    overflow-x: hidden !important;
  }

  /* Convert table rows into stacked blocks (avoid display:grid on <tr>) */
  #withdrawal-app .w-form-table,
  #withdrawal-app .w-form-table tbody,
  #withdrawal-app .w-form-table tr.w-row {
    display: block !important;
    width: 100% !important;
  }

  #withdrawal-app .w-form-table tr.w-row {
    position: relative !important;
  }

  /* Make cells stack; tools are taken out of flow and pinned top-right */
  #withdrawal-app .w-form-table td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Leave room on the right for tools (label + inputs), so nothing overlaps */
  #withdrawal-app .w-form-table td.label,
  #withdrawal-app .w-form-table td.inputs{
    padding-right: calc(var(--w-mobile-tools-width) + var(--w-mobile-tools-gap)) !important;
  }

  /* Tighten vertical spacing between label and inputs on mobile */
  #withdrawal-app .w-form-table td.label{
    /* Do not increase label height: keep natural height and only align content */
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    padding-bottom: 2px !important;
  }
  #withdrawal-app .w-form-table td.inputs{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Tools: rechts im Row-Bereich, Calc-Icon vertikal zentriert im gesamten Row-Höhenbereich
     (absolute positioning => beeinflusst weder Label- noch Input-Höhen) */
  #withdrawal-app .w-form-table td.tools {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    width: var(--w-mobile-tools-width) !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    text-align: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  #withdrawal-app .w-form-table td.tools .i{
    width:20px !important;
    height:20px !important;
    font-size:11px !important;
    line-height:20px !important;
  }

  /* Mobile: Berechnen-Button (Rechner-Icon) vertikal zentriert im Tools-Bereich */
  #withdrawal-app .w-form-table td.tools .calc-label{
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
  }

  /* Mobile: Rechner-Auswahl kompakter, damit die Tools-Spalte schmal bleibt */
  #withdrawal-app .w-form-table td.tools .calc-label input{
    width:16px !important;
    height:16px !important;
  }
  #withdrawal-app .w-form-table td.tools .calc-label .calc-ico svg{
    width:18px !important;
    height:18px !important;
  }


  /* Inputs within a row wrap instead of forcing horizontal scroll */
  #withdrawal-app .w-form-table td.inputs .w-inline,
  #withdrawal-app .w-form-table td.inputs .w-inputs-line,
  #withdrawal-app .w-form-table td.inputs .w-tax-inline {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Ensure individual controls don't exceed viewport */
  #withdrawal-app .w-form-table td.inputs input,
  #withdrawal-app .w-form-table td.inputs select {
    max-width: 100% !important;
  }

  /* Mobile: Anfangskapital uses full available width */
  #withdrawal-app #w_pv {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Mobile: these controls use full available width (like Anfangskapital) */
  #withdrawal-app #w_due,
  #withdrawal-app #w_fv,
  #withdrawal-app #w_growth {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Mobile: in paired rows, both controls use 50% of the available width */
  /* Use flex:1 1 0 + width:0 to avoid "intrinsic" widths and any 200px caps */
  #withdrawal-app #w_pmt,
  #withdrawal-app #w_pmtFreq,
  #withdrawal-app #w_compFreq,
  #withdrawal-app #w_rate,
  #withdrawal-app #w_termUnit,
  #withdrawal-app #w_term {
    flex: 1 1 0 !important;
    width: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* Keep the decay toggle readable: it drops to the next line and spans full width */
  #withdrawal-app .w-decay-toggle {
    flex: 1 1 100% !important;
    width: 100% !important;
    margin-top: 6px !important;
  }

  /* Mobile: Zinssatz/Entnahmezeitraum – beide Felder pro Zeile gleich breit
     (ueberschreibt fixe Desktop-Breiten aus entnahmeplan.overrides.css) */
  #withdrawal-app .w-form-table select#w_compFreq,
  #withdrawal-app .w-form-table input#w_rate,
  #withdrawal-app .w-form-table select#w_termUnit,
  #withdrawal-app .w-form-table input#w_term{
    flex: 1 1 0 !important;
    width: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}