/* rentenrechner UI hardening (namespaced) */
.rr-toggle-wrap[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.rr-toggle-label { user-select: none; }
.rr-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap; }

/* Optional generic disabled look for inputs when activate=false */
input[disabled][data-toggle] { cursor: not-allowed; }
.rr-dim { opacity: 0.6; }

/* Table column disabled cue (when hidden, display:none kommt aus Controller; hier nur Fallback) */
.rr-col-hidden { display: none !important; }

/* ---------- Finetuning (scoped) ---------- */
.rr-scope {
  --rr-accent: #ff6b00; /* Orange toggle color */
  --rr-border: #7a7a7a;
  --rr-border-focus: #0b5fff;
  --rr-border-disabled: #a0a0a0;
  --rr-bg-disabled: #f5f5f5;
}

/* Always-visible borders for text-like inputs (scoped) */
.rr-scope input[type="text"],
.rr-scope input[type="number"],
.rr-scope input[type="email"],
.rr-scope input[type="tel"],
.rr-scope input[type="search"],
.rr-scope textarea {
  border: 1.5px solid var(--rr-border);
  background-clip: padding-box;
  outline: none;
}

.rr-scope input[type="text"]:focus,
.rr-scope input[type="number"]:focus,
.rr-scope input[type="email"]:focus,
.rr-scope input[type="tel"]:focus,
.rr-scope input[type="search"]:focus,
.rr-scope textarea:focus {
  border-color: var(--rr-border-focus);
}

/* Disabled inputs remain visible */
.rr-scope input[disabled],
.rr-scope textarea[disabled] {
  background-color: var(--rr-bg-disabled);
  border-color: var(--rr-border-disabled);
  opacity: 0.85; /* keep readable */
}

/* Native checkbox toggles get a consistent accent color */
.rr-scope input[type="checkbox"][data-toggle] {
  accent-color: var(--rr-accent);
}

/* Optional: visually dim labels of disabled toggles */
.rr-scope .rr-toggle-wrap[aria-disabled="true"] .rr-toggle-label {
  opacity: 0.75;
}

/* --- mirrored from #taxsv-card for #tax-card and #sv-card (auto-generated) --- */
#tax-card .taxsv-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
#sv-card .taxsv-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
#tax-card .taxsv-header h2{margin:0}
#sv-card .taxsv-header h2{margin:0}
#tax-card .inline-toggle{display:flex;align-items:center}
#sv-card .inline-toggle{display:flex;align-items:center}
#tax-card .tax-grid{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:12px}
#sv-card .tax-grid{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:12px}
#tax-card .tax-grid{grid-template-columns:repeat(3,minmax(160px,1fr))}
#sv-card .tax-grid{grid-template-columns:repeat(3,minmax(160px,1fr))}
#tax-card .tax-grid{grid-template-columns:repeat(2,minmax(150px,1fr))}
#sv-card .tax-grid{grid-template-columns:repeat(2,minmax(150px,1fr))}
#tax-card .tax-grid{grid-template-columns:1fr}
#sv-card .tax-grid{grid-template-columns:1fr}
#tax-card .toggle{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .75rem; border-radius:20px; line-height:1;
  background:#f4f4f4; border:1px solid #ccc; color:#333;
}
#sv-card .toggle{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .75rem; border-radius:20px; line-height:1;
  background:#f4f4f4; border:1px solid #ccc; color:#333;
}
#tax-card .toggle .knob{
  width:16px; height:16px; border-radius:50%;
  background:#fff; border:1px solid #bbb; display:inline-block;
}
#sv-card .toggle .knob{
  width:16px; height:16px; border-radius:50%;
  background:#fff; border:1px solid #bbb; display:inline-block;
}
#tax-card .toggle.on{
  background:#ff8a00; border-color:#ff8a00; color:#fff;
}
#sv-card .toggle.on{
  background:#ff8a00; border-color:#ff8a00; color:#fff;
}
#tax-card .toggle.on .knob{
  box-shadow:0 0 0 1px rgba(255,255,255,.5);
}
#sv-card .toggle.on .knob{
  box-shadow:0 0 0 1px rgba(255,255,255,.5);
}
#tax-card .toggle{
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .45rem 1.0rem;
  padding-left: 3.1rem;      /* Platz für Track+Knob reservieren */
  gap: .6rem;
  line-height: 1.1;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
#sv-card .toggle{
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .45rem 1.0rem;
  padding-left: 3.1rem;      /* Platz für Track+Knob reservieren */
  gap: .6rem;
  line-height: 1.1;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
#tax-card .toggle .knob{
  position: absolute !important;
  top: 50%;
  left: 1.0rem;                  /* Startposition im Track */
  transform: translateY(-50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,.25);
  box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset;
  transition: left .22s ease;
}
#sv-card .toggle .knob{
  position: absolute !important;
  top: 50%;
  left: 1.0rem;                  /* Startposition im Track */
  transform: translateY(-50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,.25);
  box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset;
  transition: left .22s ease;
}
#tax-card .toggle.on{
  background:#ff8a00;
  border-color:#ff8a00;
  color:#fff;
}
#sv-card .toggle.on{
  background:#ff8a00;
  border-color:#ff8a00;
  color:#fff;
}
#tax-card .toggle.on::before{
  background: rgba(255,255,255,.3);
  border-color: rgba(255,255,255,.7);
}
#sv-card .toggle.on::before{
  background: rgba(255,255,255,.3);
  border-color: rgba(255,255,255,.7);
}
#tax-card .toggle.on .knob{
  left: 2.5rem; /* Knob nach rechts im Track */
}
#sv-card .toggle.on .knob{
  left: 2.5rem; /* Knob nach rechts im Track */
}
#tax-card .toggle{
  display: grid;
  grid-template-columns: 46px auto; /* fixes width for icon area */
  align-items: center;
  gap: 10px;
  padding: .45rem .9rem;
  border-radius: 999px;
  line-height: 1.1;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
#sv-card .toggle{
  display: grid;
  grid-template-columns: 46px auto; /* fixes width for icon area */
  align-items: center;
  gap: 10px;
  padding: .45rem .9rem;
  border-radius: 999px;
  line-height: 1.1;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
#tax-card .toggle .toggle-icon{
  position: relative;
  width: 40px; height: 22px;
  border-radius: 999px;
  background: rgba(0,0,0,.07);
  border: 1px solid rgba(0,0,0,.15);
  box-sizing: border-box;
}
#sv-card .toggle .toggle-icon{
  position: relative;
  width: 40px; height: 22px;
  border-radius: 999px;
  background: rgba(0,0,0,.07);
  border: 1px solid rgba(0,0,0,.15);
  box-sizing: border-box;
}
#tax-card .toggle .toggle-icon .knob{
  position: absolute;
  top: 50%; left: 2px;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,.25);
  box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset;
  transition: left .22s ease;
}
#sv-card .toggle .toggle-icon .knob{
  position: absolute;
  top: 50%; left: 2px;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,.25);
  box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset;
  transition: left .22s ease;
}
#tax-card .toggle.on .toggle-icon .knob{ left: 20px; }
#sv-card .toggle.on .toggle-icon .knob{ left: 20px; }
#tax-card .toggle{ background:#f4f4f4; border:1px solid #ccc; color:#333; }
#sv-card .toggle{ background:#f4f4f4; border:1px solid #ccc; color:#333; }
#tax-card .toggle.on{ background:#ff8a00; border-color:#ff8a00; color:#fff; }
#sv-card .toggle.on{ background:#ff8a00; border-color:#ff8a00; color:#fff; }
#tax-card */

/* Keep handle crisp/visible */

/* Track color spec — OFF: light gray, ON: green */

/* Collapse content when taxSv is disabled */
#taxsv-card.is-collapsed > :not(.taxsv-header){ display:none !important; }
#sv-card */

/* Keep handle crisp/visible */

/* Track color spec — OFF: light gray, ON: green */

/* Collapse content when taxSv is disabled */
#taxsv-card.is-collapsed > :not(.taxsv-header){ display:none !important; }
#tax-card .grid.tax-grid,
#taxsv-card .grid.sv-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(200px,1fr));
  gap:14px 18px;
}
#sv-card .grid.tax-grid,
#taxsv-card .grid.sv-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(200px,1fr));
  gap:14px 18px;
}
#tax-card .grid.tax-grid>*,
#taxsv-card .grid.sv-grid>*{min-width:0;}
#sv-card .grid.tax-grid>*,
#taxsv-card .grid.sv-grid>*{min-width:0;}
#tax-card .grid.tax-grid,
  #taxsv-card .grid.sv-grid{grid-template-columns:repeat(2,minmax(200px,1fr));}
#sv-card .grid.tax-grid,
  #taxsv-card .grid.sv-grid{grid-template-columns:repeat(2,minmax(200px,1fr));}
#tax-card .grid.tax-grid,
  #taxsv-card .grid.sv-grid{grid-template-columns:1fr;}
#sv-card .grid.tax-grid,
  #taxsv-card .grid.sv-grid{grid-template-columns:1fr;}


/* === 2.5.41: Sozialversicherung layout ===
   - Place KVdR/SV-as-Abzug toggles on a single row
   - Inputs start on the next row in a 4-column grid (wrap after 4)
*/
#sv-card #kvdr_toggle,
#sv-card #svAsDeduction_toggle{
  display: inline-flex;
  align-items: center;
  margin-right: 16px;
  margin-bottom: 12px;
}

#sv-card .tax-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 16px;
  width: 100%;
}

@media (max-width: 1280px){
  #sv-card .tax-grid{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 720px){
  #sv-card .tax-grid{ grid-template-columns: 1fr; }
}

/* Ensure form fields align within grid cells */
#sv-card .tax-grid .field,
#sv-card .tax-grid .form-field,
#sv-card .tax-grid .rr-field{
  width: 100%;
}


/* === 2.5.41 layout fix for Sozialversicherung ===
   Goal: two toggles in first row; inputs start next row; 4 fields per row.
*/
#sv-card .taxsv-section__body{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(240px, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
}

/* make both toggles sit in the first row, side by side */
#sv-card #kvdr_toggle,
#sv-card #svAsDeduction_toggle{
  grid-column: span 2 !important;
  margin: 0 !important;
}

/* ensure form fields are grid items and take one column each */
#sv-card .taxsv-section__body .rr-field,
#sv-card .taxsv-section__body .form-field,
#sv-card .taxsv-section__body .field{
  grid-column: span 1 !important;
  width: 100% !important;
}

/* Inputs full width inside their cells */
#sv-card .taxsv-section__body .rr-field input,
#sv-card .taxsv-section__body .rr-field select,
#sv-card .taxsv-section__body .rr-field .rr-input{
  width: 100% !important;
}

/* Responsive: reduce columns on smaller widths */
@media (max-width: 1280px){
  #sv-card .taxsv-section__body{ grid-template-columns: repeat(2, minmax(220px, 1fr)) !important; }
  #sv-card #kvdr_toggle, #sv-card #svAsDeduction_toggle{ grid-column: span 1 !important; }
}
@media (max-width: 720px){
  #sv-card .taxsv-section__body{ grid-template-columns: 1fr !important; }
  #sv-card #kvdr_toggle, #sv-card #svAsDeduction_toggle{ grid-column: 1 / -1 !important; }
}



/* === 2.5.41 layout fix v2 (targets real DOM) === */
/* Grid lives on the SV field grid container */
#taxsv-card fieldset.taxsv-sec.social .sv-grid{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(240px, 1fr)) !important;
  gap:16px !important;
  width:100%;
}
/* Put both toggles in first row, two columns each */
#taxsv-card fieldset.taxsv-sec.social .sv-grid .field:has(#kvdr_toggle),
#taxsv-card fieldset.taxsv-sec.social .sv-grid .field:has(#svAsDeduction_toggle){
  grid-column: span 2 !important;
  margin:0 !important;
  align-items:center;
}
/* Regular fields: one column each */
#taxsv-card fieldset.taxsv-sec.social .sv-grid .field{
  grid-column: span 1 !important;
}
#taxsv-card fieldset.taxsv-sec.social .sv-grid .field input,
#taxsv-card fieldset.taxsv-sec.social .sv-grid .field select,
#taxsv-card fieldset.taxsv-sec.social .sv-grid .field .rr-input{
  width:100% !important;
}
/* Responsive */
@media (max-width:1280px){
  #taxsv-card fieldset.taxsv-sec.social .sv-grid{ grid-template-columns: repeat(2, minmax(220px,1fr)) !important; }
  #taxsv-card fieldset.taxsv-sec.social .sv-grid .field:has(#kvdr_toggle),
  #taxsv-card fieldset.taxsv-sec.social .sv-grid .field:has(#svAsDeduction_toggle){
    grid-column: span 1 !important;
  }
}
@media (max-width:720px){
  #taxsv-card fieldset.taxsv-sec.social .sv-grid{ grid-template-columns: 1fr !important; }
  #taxsv-card fieldset.taxsv-sec.social .sv-grid .field{ grid-column: 1 / -1 !important; }
}



/* SV toggles row (3 toggles in first line) */
#taxsv-card .sv-toggles-row{ grid-column:1 / -1; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
#taxsv-card .sv-toggles-row .field{ margin:0; }

/* ===== Tax/SV compact section + dialog ===== */
#taxsv-card .taxsv-header--compact{
  margin-bottom: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
#taxsv-card .taxsv-header-actions{ display:flex; align-items:center; gap:8px; }

#taxsv-card .taxsv-compact{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

#taxsv-card .taxsv-compact-row{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  overflow: hidden;
}



#taxsv-card{ --taxsv-toggle-w: clamp(180px, 24vw, 240px); }

/*
  IMPORTANT: In styles.css there are global "safety" selectors that paint
  all buttons.rr-toggle inside #taxsv-card orange with !important.
  For the compact section, we want:
  - both toggles same width
  - only the toggle changes color when enabled/disabled
  - the rest of the row/summary stays neutral
*/
#taxsv-card .taxsv-compact-toggle{
  flex: 0 0 var(--taxsv-toggle-w);
}

#taxsv-card .taxsv-compact-toggle > button.rr-toggle{
  width: 100%;
  justify-content: flex-start;
  background-color: rgba(0,0,0,.03) !important;
  border: 1px solid rgba(0,0,0,.18) !important;
  color: inherit !important;
}
#taxsv-card .taxsv-compact-toggle > button.rr-toggle *{
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

#taxsv-card .taxsv-compact-toggle > button.rr-toggle.is-on,
#taxsv-card .taxsv-compact-toggle > button.rr-toggle.on,
#taxsv-card .taxsv-compact-toggle > button.rr-toggle[aria-pressed="true"]{
  background-color: #ff6b00 !important;
  border-color: #ff6b00 !important;
  color: #ffffff !important;
}
#taxsv-card .taxsv-compact-toggle > button.rr-toggle.is-on *,
#taxsv-card .taxsv-compact-toggle > button.rr-toggle.on *,
#taxsv-card .taxsv-compact-toggle > button.rr-toggle[aria-pressed="true"] *{
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}
@media (max-width: 560px){
  #taxsv-card .taxsv-compact-toggle{ flex: 1 1 auto; }
  #taxsv-card .taxsv-compact-toggle > button.rr-toggle{ width: 100%; }
  #taxsv-card .taxsv-compact-row{ flex-direction: column; align-items: stretch; }
  #taxsv-card .taxsv-compact-summary{ min-width: 0; }
}
#taxsv-card .taxsv-compact-row.is-disabled{ background: transparent !important; }

#taxsv-card .taxsv-compact-summary{
  flex: 1 1 320px;
  min-width: 220px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items:center;
  align-content: center;
  min-height: 44px;
  line-height: 1.25;
  padding-top: 0;
}

#taxsv-card .taxsv-chip{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
  font-size: 0.95rem;
  white-space: nowrap;
}


/* Dark theme: visible frames for compact toggles + chips */
:root[data-theme="dark"] #taxsv-card .taxsv-compact-row{
  border-color: rgba(255,255,255,.24);
}
:root[data-theme="dark"] #taxsv-card .taxsv-compact-toggle > button.rr-toggle{
  background-color: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.32) !important;
}
:root[data-theme="dark"] #taxsv-card .taxsv-chip{
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
}
#taxsv-card .taxsv-compact-header{
  display:flex;
  align-items:center;
  gap: 12px;
  width: 100%;
}

/* Dialog */
.rr-taxsv-dialog{ border: 0; padding: 0; background: transparent; }
.rr-taxsv-dialog::backdrop{ background: rgba(0,0,0,.55); }

.rr-taxsv-dialog[open]{
  width: min(920px, calc(100vw - 24px));
  max-width: 920px;
}

.rr-taxsv-dialog__panel{
  background: #fff;
  color: inherit;
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  overflow: hidden;
  max-height: calc(100vh - 24px);
  display:flex;
  flex-direction:column;
}

.rr-taxsv-dialog__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

.rr-taxsv-dialog__title{
  font-weight: 800;
  font-size: 1.1rem;
}

.rr-taxsv-dialog__close{
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(0,0,0,.03);
  border-radius: 10px;
  width: 38px;
  height: 38px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.rr-taxsv-dialog__body{
  padding: 14px 16px;
  overflow: auto;
  display:flex;
  flex-direction:column;
  gap: 18px;
}

.rr-taxsv-dialog__secTitle{
  margin: 0 0 10px;
  font-size: 1.05rem;
}

.rr-taxsv-dialog__secActions{
  display:flex;
  justify-content:flex-end;
  margin-top: 12px;
}

.rr-taxsv-dialog__foot{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid rgba(0,0,0,.12);
}

/* Make grid responsive inside dialog */
.rr-taxsv-dialog .grid.tax-grid,
.rr-taxsv-dialog .grid.sv-grid{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px 14px;
}

@media (max-width: 900px){
  .rr-taxsv-dialog .grid.tax-grid,
  .rr-taxsv-dialog .grid.sv-grid{ grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}

@media (max-width: 620px){
  #taxsv-card .taxsv-compact-row{ padding: 8px; }
  #taxsv-card .taxsv-chip{ font-size: 0.9rem; }
  .rr-taxsv-dialog .grid.tax-grid,
  .rr-taxsv-dialog .grid.sv-grid{ grid-template-columns: 1fr; }
}

.rr-taxsv-dialog .sv-toggles-row{
  display:flex;
  flex-wrap:wrap;
  gap: 10px 12px;
  align-items:center;
}