/* ---------------------------------------------------------------------------
   Betriebliche Altersvorsorge (bAV) - Manager-Tab #bavBox.
   Eigene Variablen (Muster einkommenssicherung.css), Optik angelehnt an
   die vm-Variablen aus manager-ui.css.
   --------------------------------------------------------------------------- */
#bavBox {
  --bav-petrol: #087985;
  --bav-petrol-dunkel: #055d67;
  --bav-gold: #e5b74b;
  --bav-gruen: #08763f;
  --bav-rot: #a12c26;
  --bav-linie: #d7dfdb;
}

/* Hero bleibt die gemeinsame COMODUS-Flaeche. Kennzahlen gehoeren in die
   Auswertung, damit die Fallliste wie die Referenz ruhig und klar bleibt. */
#bavBox .bav-reiter {
  display: flex; gap: 8px; margin: 0 0 22px; padding: 10px; flex-wrap: wrap;
  background: var(--vm-surface); border: 1px solid var(--bav-linie); border-radius: 22px;
  box-shadow: var(--vm-card-shadow);
}
#bavBox .bav-reiter button {
  border: 0; background: transparent; color: var(--vm-text);
  border-radius: 14px; padding: 14px 22px; cursor: pointer; font-size: 14px; font-weight: 750;
}
#bavBox .bav-reiter button.an { background: var(--bav-petrol-dunkel); color: #fff; }

#bavBox .bav-karte {
  background: var(--vm-surface); border: 1px solid var(--bav-linie); border-radius: 18px;
  box-shadow: var(--vm-card-shadow); padding: 20px 22px; margin-bottom: 16px;
}
#bavBox .bav-karte > h3 { margin: 0 0 4px; font-size: 17px; letter-spacing: -.01em; }
#bavBox .bav-karte > .bav-unter { margin: 0 0 16px; color: var(--vm-muted); font-size: 13.5px; }

#bavBox .bav-listen-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
#bavBox .bav-listen-kopf h3 { margin: 0; font-size: 25px; letter-spacing: -.025em; }
#bavBox .bav-listen-aktionen { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
#bavBox .bav-umschalt { display: flex; border: 1px solid var(--bav-linie); border-radius: 13px; overflow: hidden; }
#bavBox .bav-umschalt button { border: 0; background: var(--vm-surface); padding: 13px 16px; cursor: pointer; font-size: 13.5px; font-weight: 750; color: var(--vm-text); }
#bavBox .bav-umschalt button.an { background: var(--bav-petrol); color: #fff; font-weight: 700; }

#bavBox .bav-tabelle-wrap { overflow: visible; }
#bavBox table.bav-tabelle { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
#bavBox table.bav-tabelle:not(.bav-fallliste) { border-collapse: collapse; }
#bavBox table.bav-tabelle:not(.bav-fallliste) th { text-align: left; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--vm-muted); padding: 0 10px 9px; font-weight: 700; }
#bavBox table.bav-tabelle:not(.bav-fallliste) td { padding: 12px 10px; border-top: 1px solid var(--bav-linie); vertical-align: middle; }
#bavBox table.bav-fallliste { overflow: hidden; border: 1px solid var(--bav-linie); border-radius: 16px; }
#bavBox table.bav-fallliste th { background: var(--vm-surface-2); color: var(--vm-text); font-size: 12px; letter-spacing: .01em; text-transform: none; padding: 13px 12px; border-bottom: 1px solid var(--bav-linie); }
#bavBox table.bav-fallliste td { padding: 13px 12px; border: 0; border-bottom: 1px solid var(--bav-linie); vertical-align: middle; }
#bavBox table.bav-fallliste tr:last-child td { border-bottom: 0; }
#bavBox table.bav-fallliste th:not(:last-child), #bavBox table.bav-fallliste td:not(:last-child) { border-right: 1px solid var(--bav-linie); }
#bavBox tr.bav-zeile { cursor: pointer; }
#bavBox tr.bav-zeile:hover td { background: var(--vm-surface-3); }
#bavBox .bav-name { font-weight: 700; }
#bavBox .bav-sub { font-size: 12.5px; color: var(--vm-muted); }
#bavBox .bav-infos, #bavBox .bav-aktionen { display: flex; align-items: center; justify-content: center; min-height: 40px; }
#bavBox .bav-info-kopf { width: 72px; text-align: center !important; }
#bavBox .bav-aktionen-kopf { width: 86px; text-align: center !important; }
#bavBox .bav-info-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: var(--vm-surface-2); color: var(--vm-muted); cursor: pointer; }
#bavBox .bav-info-btn:hover { background: var(--vm-primary-soft); color: var(--bav-petrol-dunkel); }
#bavBox .bav-btn-icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#bavBox .bav-fall-aktionenmenue .topt-zeilenmenue-inhalt { width: 280px; }
#bavBox .bav-fall-aktionenmenue[open] { z-index: 35; }
#bavBox .bav-fallliste tr:has(.bav-fall-aktionenmenue[open]) { position: relative; z-index: 34; }

#bavBox .bav-pille { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; }
#bavBox .bav-p-entwurf { background: #fde9c9; color: #8a5a05; }
#bavBox .bav-p-veroeffentlicht { background: color-mix(in srgb, var(--bav-petrol) 16%, var(--vm-surface)); color: var(--bav-petrol-dunkel); }
#bavBox .bav-p-termin { background: #d6f0dd; color: #1c6b38; }
#bavBox .bav-p-widerrufen { background: #fbdcd9; color: var(--bav-rot); }
#bavBox .bav-p-archiviert { background: var(--vm-surface-2); color: var(--vm-muted); }

#bavBox .bav-bahn { width: 84px; height: 7px; border-radius: 99px; background: var(--vm-surface-2); overflow: hidden; }
#bavBox .bav-bahn i { display: block; height: 100%; background: var(--bav-petrol); border-radius: 99px; }
#bavBox .bav-bahn-txt { font-size: 12px; color: var(--vm-muted); margin-top: 3px; }

#bavBox .bav-zurueck { border: 1px solid var(--bav-linie); background: var(--vm-surface); border-radius: 10px; padding: 8px 14px; cursor: pointer; font-size: 14px; margin-bottom: 14px; }
#bavBox .bav-raster { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; }
#bavBox .bav-dossier { display: grid; gap: 14px; }
#bavBox .bav-fall-titelzeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
#bavBox .bav-fall-titelzeile h3 { margin: 0; font-size: 17px; letter-spacing: -.01em; }
#bavBox .bav-gruppe { border: 1px solid var(--bav-linie); border-radius: 14px; overflow: hidden; }
#bavBox .bav-gruppe > header {
  background: var(--vm-surface-3); padding: 10px 14px; font-size: 12.5px; font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase; color: var(--vm-muted);
  border-bottom: 1px solid var(--bav-linie); display: flex; justify-content: space-between; align-items: center;
}
#bavBox .bav-gruppe header .bav-quelle { font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: 0; }
#bavBox .bav-q-kunde { color: var(--bav-petrol-dunkel); }
#bavBox .bav-q-berater { color: #a8801f; }
#bavBox .bav-zeilen { padding: 6px 14px 12px; }
#bavBox dl.bav-zeilen .bav-dz { display: grid; grid-template-columns: 180px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--bav-linie); margin: 0; }
#bavBox dl.bav-zeilen .bav-dz:last-child { border-bottom: 0; }
#bavBox .bav-dz dt { color: var(--vm-muted); font-size: 13.5px; margin: 0; }
#bavBox .bav-dz dd { margin: 0; font-weight: 600; }
#bavBox .bav-dz dd.bav-leer { color: var(--vm-muted); font-weight: 400; font-style: italic; }
#bavBox .bav-dz input, #bavBox .bav-dz select {
  width: 100%; padding: 7px 10px; border: 1px solid var(--bav-linie); border-radius: 8px; background: var(--vm-surface-3);
}

#bavBox .bav-insight { border-left: 4px solid var(--bav-gold); background: var(--vm-surface-3); border-radius: 0 12px 12px 0; padding: 12px 14px; margin-bottom: 10px; }
#bavBox .bav-insight .bav-kopf { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--vm-muted); }
#bavBox .bav-insight .bav-wert { font-size: 15.5px; font-weight: 800; margin: 2px 0 6px; }
#bavBox .bav-insight .bav-satz { font-size: 13.5px; color: var(--vm-text); font-style: italic; }
#bavBox .bav-insight .bav-satz::before { content: "\201E"; }
#bavBox .bav-insight .bav-satz::after { content: "\201C"; }

#bavBox .bav-rechnung { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 4px; }
#bavBox .bav-rz { background: var(--vm-surface-3); border: 1px solid var(--bav-linie); border-radius: 12px; padding: 11px 13px; }
#bavBox .bav-rz span { display: block; font-size: 11px; color: var(--vm-muted); letter-spacing: .03em; text-transform: uppercase; }
#bavBox .bav-rz b { font-size: 20px; letter-spacing: -.02em; }
#bavBox .bav-rz.gross { grid-column: 1 / -1; }
#bavBox .bav-rz.gross b { font-size: 27px; color: var(--bav-petrol-dunkel); }

#bavBox .bav-linkzeile { display: flex; gap: 8px; align-items: center; margin: 9px 0; flex-wrap: wrap; }
#bavBox .bav-linkzeile code {
  flex: 1; min-width: 200px; background: var(--vm-surface-3); border: 1px solid var(--bav-linie);
  border-radius: 9px; padding: 9px 12px; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#bavBox .bav-hinweis { margin-top: 14px; padding: 12px 14px; border-radius: 11px; background: var(--vm-surface-3); border: 1px dashed var(--bav-linie); font-size: 12.5px; color: var(--vm-muted); }
#bavBox .bav-ansicht { display: none; }
#bavBox .bav-ansicht.an { display: block; }

#bavBox .bav-btn {
  border: 1px solid var(--bav-petrol); border-radius: 10px; padding: 9px 15px; cursor: pointer;
  font-size: 14px; font-weight: 700; color: #fff; background: var(--bav-petrol-dunkel);
}
#bavBox .bav-btn.grau { color: #172330; border-color: var(--bav-linie); background: #fff; box-shadow: none; }
#bavBox .bav-btn.gold { color: #082d32; border-color: #d5a032; background: linear-gradient(135deg, #f4ce70, #dea735); }
#bavBox .bav-btn.rot { border-color: var(--bav-rot); background: var(--bav-rot); }
#bavBox .bav-btn.klein { padding: 6px 11px; font-size: 12.5px; }
#bavBox .bav-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Fallanlage mit Vorbefuellung. Das native Dialog-Element bleibt im
   COMODUS-Stil, ist aber breit genug fuer die gruppierten Kundendaten. */
#bavBox .bav-neu-dialog {
  width: min(94vw, 920px); max-width: min(94vw, 920px); max-height: 92dvh;
  overflow: hidden;
}
#bavBox .bav-neu-dialog .vm-dialog-kopf { padding-bottom: 12px; border-bottom: 1px solid var(--bav-linie); }
#bavBox .bav-neu-dialog .vm-dialog-kopf p { margin: 7px 0 0; color: var(--vm-muted); font-size: 14px; line-height: 1.5; }
#bavBox .bav-neu-form { max-height: calc(92dvh - 92px); overflow-y: auto; padding-top: 18px; }
#bavBox .bav-neu-fehler { margin-bottom: 14px; padding: 11px 13px; border: 1px solid var(--bav-rot); border-radius: 10px; color: var(--bav-rot); background: color-mix(in srgb, var(--bav-rot) 8%, var(--vm-surface)); font-weight: 650; }
#bavBox .bav-neu-gruppe { min-width: 0; margin: 0 0 16px; padding: 14px; border: 1px solid var(--bav-linie); border-radius: 13px; }
#bavBox .bav-neu-gruppe legend { padding: 0 7px; color: var(--vm-text); font-size: 14px; font-weight: 800; }
#bavBox .bav-neu-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
#bavBox .bav-neu-raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#bavBox .bav-neu-raster label, #bavBox .bav-neu-auswahl { min-width: 0; }
#bavBox .bav-neu-raster label > span, #bavBox .bav-neu-label { display: block; margin: 0 0 6px; color: var(--vm-text); font-size: 12.5px; font-weight: 750; }
#bavBox .bav-neu-raster input, #bavBox .bav-neu-raster select {
  width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid var(--bav-linie); border-radius: 9px;
  background: var(--vm-surface-3); color: var(--vm-text); font: inherit; font-size: 14px;
}
#bavBox .bav-neu-raster input:focus, #bavBox .bav-neu-raster select:focus {
  outline: 3px solid color-mix(in srgb, var(--bav-petrol) 22%, transparent); border-color: var(--bav-petrol);
}
#bavBox .bav-neu-breit { grid-column: span 2; }
#bavBox .bav-neu-mehr { margin-bottom: 16px; border: 1px solid var(--bav-linie); border-radius: 13px; overflow: clip; }
#bavBox .bav-neu-mehr > summary { min-height: 46px; padding: 13px 15px; cursor: pointer; background: var(--vm-surface-3); color: var(--vm-text); font-size: 14px; font-weight: 800; }
#bavBox .bav-neu-mehr > summary span { margin-left: 5px; color: var(--vm-muted); font-size: 12px; font-weight: 600; }
#bavBox .bav-neu-details { padding: 14px 14px 0; }
#bavBox .bav-neu-auswahl { margin-top: 14px; }
#bavBox .bav-neu-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#bavBox .bav-neu-checks label { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 9px 11px; border: 1px solid var(--bav-linie); border-radius: 9px; background: var(--vm-surface-3); cursor: pointer; font-size: 13px; }
#bavBox .bav-neu-checks input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--bav-petrol); }
#bavBox .bav-neu-aktionen { position: sticky; bottom: -22px; margin: 4px -26px -22px; padding: 14px 26px; border-top: 1px solid var(--bav-linie); background: var(--vm-surface); }

#bavBox .bav-trichter { display: grid; gap: 7px; margin-top: 6px; }
#bavBox .bav-tz { display: grid; grid-template-columns: 190px 1fr 92px; gap: 12px; align-items: center; font-size: 13.5px; }
#bavBox .bav-tz .bav-bar { height: 22px; border-radius: 7px; background: var(--vm-surface-2); overflow: hidden; }
#bavBox .bav-tz .bav-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--bav-petrol), var(--bav-petrol-dunkel)); }
#bavBox .bav-tz .bav-zahl { text-align: right; font-variant-numeric: tabular-nums; color: var(--vm-muted); }

/* Statusleiste aus wiedervorlage.js vergibt fuer 'bav' die Klasse .ropt-btn,
   deren Farben nur unter #roptBox definiert sind - hier nachziehen
   (identisches Muster wie #einkBox .ropt-btn in einkommenssicherung.css). */
#bavBox { --ropt-navy: #172330; --ropt-gruen: var(--bav-gruen); }
#bavBox .ropt-btn { border: 1px solid var(--bav-petrol); background: var(--bav-petrol-dunkel); color: #fff; }
#bavBox .ropt-btn.grau { color: #172330; border-color: var(--bav-linie); background: #fff; box-shadow: none; }
#bavBox .ropt-btn.rot { border-color: var(--bav-rot); background: var(--bav-rot); color: #fff; }
#bavBox .ropt-btn.gruen { border-color: var(--bav-gruen); background: var(--bav-gruen); color: #fff; }

@media (max-width: 900px) {
  #bavBox .bav-reiter { margin-bottom: 16px; padding: 7px; }
  #bavBox .bav-reiter button { padding: 11px 14px; }
  #bavBox .bav-listen-kopf { align-items: flex-start; flex-direction: column; }
  #bavBox .bav-listen-aktionen { justify-content: flex-start; }
  #bavBox .bav-raster { grid-template-columns: 1fr; }
  #bavBox .bav-dz { grid-template-columns: 1fr; gap: 3px; }
  #bavBox .bav-tz { grid-template-columns: 120px 1fr 64px; font-size: 12px; }
  #bavBox .bav-rechnung { grid-template-columns: 1fr; }
  #bavBox table.bav-tabelle .bav-weg { display: none; }
  #bavBox .bav-neu-raster-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  #bavBox .bav-neu-dialog { width: 96vw; max-width: 96vw; max-height: 96dvh; border-radius: 14px; }
  #bavBox .bav-neu-form { max-height: calc(96dvh - 110px); padding-inline: 16px; }
  #bavBox .bav-neu-raster, #bavBox .bav-neu-raster-3, #bavBox .bav-neu-checks { grid-template-columns: 1fr; }
  #bavBox .bav-neu-breit { grid-column: auto; }
  #bavBox .bav-neu-aktionen { margin-inline: -16px; padding-inline: 16px; }
  #bavBox .bav-fall-titelzeile { align-items: flex-start; flex-direction: column; }
  #bavBox .bav-fall-titelzeile .bav-btn { min-height: 44px; }
}

/* ---------------------------------------------------------------------------
   Rueckruf-Erinnerung: eigenes <dialog> ausserhalb von #bavBox (Muster wie
   kalDialogOeffnen in kalender.js), darum eigene, ungescopte Klassen.
   --------------------------------------------------------------------------- */
.bav-rueckruf-dialog .vm-dialog-inhalt { max-width: 480px; }
.bav-rueckruf-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid #e3e0d5;
}
.bav-rueckruf-zeile:last-of-type { border-bottom: 0; }
.bav-rueckruf-zeile b { display: block; font-size: 14.5px; }
.bav-rueckruf-tel, .bav-rueckruf-zeit { display: block; font-size: 12.5px; color: var(--vm-muted); }
.bav-rueckruf-tel { margin-top: 1px; }
.bav-rueckruf-zeit { margin-top: 1px; }