/* addons.renten.ui.css — scoped fixes for Rentenrechner ONLY; respects theme vars */
#renten-app .card{
  background:var(--card);
  border:1px solid var(--br);
  box-shadow:0 8px 20px rgba(2,12,27,.06);
  border-radius:14px;
}

/* Section header alignment spacing */
#renten-app .section-title{ display:flex; align-items:center; gap:.75rem;  }

/* Primary pill buttons */
#renten-app .btn-primary{
  background:var(--primary, #ff7a00);
  color:#fff;
  border:1px solid var(--primary, #ff7a00);
  box-shadow:0 6px 14px rgba(255,122,0,.25);
}
#renten-app .btn-primary:hover{ filter:brightness(0.98); }

/* Secondary outline pill buttons */
#renten-app .btn.btn-secondary{
  background:var(--card);
  color:var(--primary, #ff7a00);
  border:1px solid var(--primary, #ff7a00);
}

/* Toolbar icon-only buttons */
#renten-app #resetBtn,#renten-app #saveBtn,#renten-app #loadBtn,#renten-app #permalinkBtn{
  width:42px;height:42px;padding:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
}
#renten-app #saveBtn{ background:var(--primary,#ff7a00); color:#fff; border-color:var(--primary,#ff7a00); box-shadow:0 6px 14px rgba(255,122,0,.25); }
#renten-app #saveBtn svg{ stroke:#fff !important; }
#renten-app #resetBtn,#renten-app #loadBtn,#renten-app #permalinkBtn{ background:var(--card); color:var(--primary,#ff7a00); border:1px solid var(--primary,#ff7a00); }

/* A11y helper for hidden text on icon-only buttons */
#renten-app .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }

/* === Spacing Tweaks: Renten & Bausteine Headings === */
#renten-app .section-title{ padding-top: 4px; padding-bottom:  4px; }
#renten-app .section-title h2{ margin: 0; line-height: 1.2; }
/* Tabellen näher an die Überschrift rücken */
#renten-app #tblPensions, 
#renten-app #tblBlocks { margin-top: 6px !important; }


/* === Fix: Steuer-Schaltflächen zentrieren & Permalink sichtbar ===================== */
#renten-app .actions .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
  line-height:1;
  padding:0; /* icon-only => keine seitlichen Offsets */
}
/* Icon-only Buttons (Reset, Speichern, Laden, Permalink) als runde Buttons ausrichten */
#renten-app #resetBtn,
#renten-app #saveBtn,
#renten-app #loadBtn,
#renten-app #permalinkBtn{
  width:56px;
  height:56px;
  border-radius:999px;
}

/* SVG immer exakt mittig darstellen */
#renten-app #resetBtn svg,
#renten-app #saveBtn svg,
#renten-app #loadBtn svg,
#renten-app #permalinkBtn svg{
  display:block;
  width:22px;
  height:22px;
  margin:0;
}

/* Permalink-Icon sichtbar machen (gleiche Farbe wie Rahmen/#ff6b00) */
#renten-app #permalinkBtn svg,
#renten-app #permalinkBtn svg *{
  stroke: var(--primary, #ff7a00) !important;
  fill: none !important;
  stroke-width: 2;
}

/* Outline-Buttons: auch Reset/Load haben orangen Stroke für klare Sichtbarkeit */
#renten-app #resetBtn svg, 
#renten-app #loadBtn svg{
  stroke: var(--primary, #ff7a00) !important;
  fill: none !important;
}

/* Save (vollflächig) – Weißes Icon auf orangem Kreis bleibt bestehen */
#renten-app #saveBtn{
  background: var(--primary, #ff7a00);
  color:#fff;
}
#renten-app #saveBtn svg{
  stroke:#fff !important;
  fill:none !important;
}
/* ================================================================================== */


/* === Tuning: Icon-Stärke normalisieren & Calc-Button zentrieren =================== */
#renten-app .actions .btn svg,
#renten-app .actions .btn svg *{
  stroke-width: 1.3 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#renten-app #calcBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:56px;
  padding:0 22px;
  line-height:1;
}
/* ================================================================================ */


/* === Outline-Buttons: Icons #ff6b00, dünn ================================================= */
#renten-app #resetBtn svg, #renten-app #resetBtn svg *,
#renten-app #loadBtn svg, #renten-app #loadBtn svg *,
#renten-app #permalinkBtn svg, #renten-app #permalinkBtn svg *{
  stroke: var(--primary, #ff7a00) !important;
  fill: none !important;
  stroke-width: 1.3 !important;
}
#renten-app #saveBtn svg,
#renten-app #saveBtn svg *{
  stroke: #fff !important;
  fill: none !important;
  stroke-width: 1.4 !important;
}
/* ========================================================================================= */

/* header person icon */
.person-col{ width:48px; text-align:center }
.person-col .th-person-icon{ display:inline-block; width:1.2em; height:1.2em; vertical-align:middle; }
.person-col svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* compact section dot */
.section-title .dot{ display:inline-block; width:0.75em; height:0.75em; border-radius:9999px; background: currentColor; opacity:.25; margin-right:.5rem; }
.section-title .dot.dot--tight{ margin-left:0; }

/* compact section-title spacing */
#renten-app .section-title{padding:.5rem 1rem .5rem 0 !important;gap:.5rem !important}

/* dot with centered icon */
.section-title .dot.with-icon{display:inline-flex;align-items:center;justify-content:center;width:1.25em;height:1.25em;background:transparent;border:1px solid var(--br);opacity:1;font-weight:700}