/* ---------- Rentenrechner (scoped) ---------- */
#renten-app { --br: rgba(255,255,255,.08); }
#renten-app .card{background:rgba(255,255,255,.03);border:1px solid var(--br);border-radius:14px;padding:16px 16px 8px;margin:14px 0}
#renten-app .grid-rows{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:12px}
#renten-app .grid-rows label{display:flex;flex-direction:column;font-weight:700;font-size:.9rem}
#renten-app .grid-rows input{margin-top:6px;width:100%}
#renten-app .actions{margin-top:12px;display:flex;gap:10px}
#renten-app .section-title{display:flex;align-items:center;gap:10px;margin-bottom:10px}
#renten-app .section-title .dot{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,165,0,.1);border:1px solid var(--br);font-weight:900}
#renten-app .add-grid{display:grid;grid-template-columns: repeat(7, minmax(140px,1fr)) 48px;gap:10px;align-items:end;margin-bottom:12px}
#renten-app .add-grid-b{grid-template-columns: repeat(9, minmax(140px,1fr)) 48px}
#renten-app .add-grid label{display:flex;flex-direction:column;font-weight:700;font-size:.85rem}
#renten-app .add-grid input,#renten-app .add-grid select{margin-top:6px;width:100%}
#renten-app .btn.icon-only{min-width:44px;padding:8px;display:inline-flex;align-items:center;justify-content:center}
#renten-app .btn.icon-only svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none}
#renten-app table.table{width:100%;border-collapse:collapse}
#renten-app .table th,#renten-app .table td{padding:10px 8px;border-bottom:1px solid var(--br);white-space:nowrap}
#renten-app .table tbody tr:nth-child(odd){background:rgba(255,255,255,.02)}
#renten-app .edit-row td{padding:0!important}
#renten-app .edit-wrap{padding:12px}
#renten-app .edit-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:10px;align-items:end}
#renten-app .edit-grid .field{display:flex;flex-direction:column}
#renten-app .edit-grid .field label{font-weight:700;font-size:.85rem;margin-bottom:6px}
#renten-app .edit-grid .actions{display:flex;gap:8px}
@media (max-width:1100px){#renten-app .edit-grid{grid-template-columns:repeat(2,minmax(160px,1fr))}#renten-app .add-grid{grid-template-columns:1fr 1fr}#renten-app .add-grid-b{grid-template-columns:1fr 1fr}}
@media (max-width:640px){#renten-app .edit-grid{grid-template-columns:1fr}}
#renten-app .h-scroll{overflow-x:auto}

/* numeric alignment */
#renten-app #resultTable td.num, #renten-app #resultTable th.num{ text-align:right; }

#renten-app td.num .two-line{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
#renten-app td.num .two-line .sub{opacity:.75;font-size:.85em}


/* align OK / Cancel to the right in edit rows (pensions & blocks) */
#renten-app .edit-grid{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:12px}
#renten-app .edit-grid .actions{grid-column:1 / -1;display:flex;justify-content:flex-end;gap:10px}


#chartArea{padding:12px 16px}



/* Chart sizing */
#chartArea{padding:12px 16px}
#chartArea .chart-wrap{width:100%; height:clamp(160px, 40vh, 50vh);}
#chartArea .chart-wrap canvas{width:100% !important; height:100% !important; display:block;}
@media (max-width: 700px){
  #chartArea .chart-wrap{height:clamp(140px, 35vh, 50vh);}
}


#renten-app .add-grid-b .grid-break{grid-column:1 / -1;display:block;height:0}

#renten-app .section-title .title-actions{margin-left:auto;display:flex;gap:10px}
#renten-app .section-title .btn{white-space:nowrap}

/* 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-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}


/* Sticky header row + first column for Übersicht (#resultTable) */
#renten-app #resultTable thead th{
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(8,12,20,1); /* opaque */
  backdrop-filter: none;
}
#renten-app #resultTable thead th:first-child{
  left: 0;
  z-index: 4; /* corner above both */
}
#renten-app #resultTable tbody td:first-child,
#renten-app #resultTable tfoot td:first-child,
#renten-app #resultTable thead th:first-child{
  position: sticky;
  left: 0;
  background: rgba(8,12,20,1); /* opaque */
  backdrop-filter: none;
}
/* ensure horizontal + vertical scroll works inside container */
#renten-app .h-scroll{overflow:auto}


/* === Sticky Overview Table (keep exact header colors, opaque) === */

/* Make the scrolling happen inside the container so sticky works both ways */
#renten-app .h-scroll{
  overflow:auto;
  max-height:70vh;
}

/* Fallback opaque header background for cells WITHOUT inline color */
#renten-app #resultTable thead{
  background-color: var(--bg);
}

/* Stick the whole header row; don't override inline background colors */
#renten-app #resultTable thead th{
  position: sticky;
  top: 0;
  z-index: 5;              /* above body cells */
  background-color: inherit; /* let inline bg (exact color) win */
  backdrop-filter: none;
}

/* First column sticky (header/body/footer); keep opaque dark bg */
#renten-app #resultTable thead th:first-child{
  left: 0;
  z-index: 7; /* corner on top */
  background-color: var(--bg);
}
#renten-app #resultTable tbody td:first-child,
#renten-app #resultTable tfoot td:first-child{
  position: sticky;
  left: 0;
  z-index: 6;
  background-color: var(--bg);
  backdrop-filter: none;
}

/* Ensure header cells overlap the first column cells when scrolling vertically */
#renten-app #resultTable thead th:not(:first-child){
  z-index: 6;
}


/* Ensure Übersicht header text is always readable */
#renten-app #resultTable thead th{
  color:#ffffff !important;
  text-shadow:none;
}
#renten-app #resultTable thead th:first-child{
  color:#ffffff !important;
}