/* ================= Runde 2y TEAM (.tb-): Personalberater bearbeiten, neu anlegen, einladen =================
   Liste mit «Bearbeiten» vorne (bis 760 px als Karten), ruhiges Fenster mit allen Feldern, Einladung mit Vorschau.
   Nur Tokens, MediPersonal ohne Rot (Hinweise in Blau), grosse Tippflächen auf dem Handy, eine Hauptaktion. */

/* ---------- Kopfzeile und Liste ---------- */
.tb-host { margin-top: 4px; }
.tb-kopfzeile { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin: 6px 0 12px; }
.tb-kopfzeile .tb-neu-knopf { flex: none; }
.tb-hinweis-fehlt { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 9px 12px; border-radius: 10px; font-size: 13px;
  background: var(--warn-bg); color: var(--warn-tx); border: 1px solid var(--warn-ln); }
.tb-hinweis-fehlt svg.i { width: 15px; height: 15px; flex: none; }
body[data-mandant="med"] .tb-hinweis-fehlt { background: rgba(10, 155, 217, .10); color: var(--ink); border-color: rgba(10, 155, 217, .32); }

.tb-liste-wrap { border-radius: 10px; }
.tb-liste { width: 100%; }
.tb-liste tbody tr { cursor: pointer; }
.tb-liste td { white-space: normal; vertical-align: middle; padding-top: 9px; padding-bottom: 9px; }
.tb-liste th:first-child, .tb-liste td.tb-z-knopf { width: 1%; white-space: nowrap; padding-left: 4px; }
.tb-liste tr.tb-aus td { color: var(--muted); }
.tb-liste tr.tb-aus .avatar { opacity: .6; }
.tb-bearbeiten-knopf { gap: 6px; }
.tb-bearbeiten-knopf svg.i { width: 14px; height: 14px; }
.tb-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tb-person > .avatar { width: 36px; height: 36px; border-radius: 50%; font-size: 12px; flex: none; }
.tb-person-text { display: flex; flex-direction: column; min-width: 0; }
.tb-person-text b { overflow-wrap: break-word; }
.tb-mail { font-size: 12.5px; color: var(--muted); overflow-wrap: break-word; }
.tb-titel { font-size: 12.5px; color: var(--text); opacity: .85; }
.tb-du { align-self: flex-start; margin-top: 2px; padding: 0 7px; border-radius: 6px; font-size: 11.5px; background: var(--flaeche-3); color: var(--muted); }
.tb-name-fehlt { color: var(--warn-tx); font-style: italic; }
body[data-mandant="med"] .tb-name-fehlt { color: var(--ink); }
.tb-abt { display: inline-block; margin: 1px 4px 1px 0; padding: 1px 8px; border-radius: 6px; font-size: 12px; background: var(--flaeche-3); white-space: nowrap; }
td.tb-z-nst, td.tb-z-kunden { white-space: nowrap; }
.tb-m { display: none; }
.tb-st { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; white-space: nowrap; }
.tb-st svg.i { width: 13px; height: 13px; color: var(--ok-tx); }
.tb-st-nie, .tb-st-aus { color: var(--muted); }
.tb-st-erneuern { padding: 1px 8px; border-radius: 6px; background: var(--warn-bg); color: var(--warn-tx); border: 1px solid var(--warn-ln); }
body[data-mandant="med"] .tb-st-erneuern { background: rgba(10, 155, 217, .12); color: var(--ink); border-color: rgba(10, 155, 217, .35); }
.tb-st-einl { display: block; font-size: 12px; color: var(--muted); }

/* ---------- Fenster ---------- */
.modal-box.tb-fenster { width: min(820px, 100%); padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.tb-form { display: flex; flex-direction: column; min-height: 0; max-height: 92vh; }
.tb-kopf { display: flex; align-items: center; gap: 14px; padding: 18px 22px 14px; border-bottom: 1px solid var(--line); flex: none; }
.tb-kopf > .avatar.tb-kopf-bild { width: 56px; height: 56px; border-radius: 50%; font-size: 19px; flex: none; }
.tb-kopf > .head-icon { flex: none; }
.tb-kopf-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.tb-kopf-text h2 { margin: 0 !important; font-size: 19px; overflow-wrap: break-word; }
.tb-kopf-mail { overflow-wrap: break-word; }
.tb-kopf .tb-zu { flex: none; align-self: flex-start; }
.tb-koerper { padding: 6px 22px 8px; overflow: auto; flex: 1 1 auto; min-height: 0; }
.tb-koerper > .tb-hinweis-fehlt { margin-top: 12px; }
.tb-gruppe { min-width: 0; margin: 14px 0 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--line); }
.tb-gruppe:first-of-type { border-top: 0; padding-top: 4px; }
.tb-gruppe legend { float: left; width: 100%; padding: 0; margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tb-gruppe legend + * { clear: both; }
.tb-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.tb-felder > .tb-breit { grid-column: 1 / -1; }
.tb-felder label { min-width: 0; }
.tb-felder input, .tb-felder select { width: 100%; box-sizing: border-box; }
.tb-feldhinweis { margin: -6px 0 0; }
.tb-lbl { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.tb-abt-liste { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.tb-abt-liste .check-line { margin: 2px 0; }
.tb-abt-liste[aria-invalid="true"] { outline: 2px solid var(--warn-ln); outline-offset: 4px; border-radius: 6px; }
.tb-felder .bn-schalter { margin: 0; }
.tb-gruppe input[aria-invalid="true"], .tb-gruppe select[aria-invalid="true"] { border-color: var(--warn-tx); }
body[data-mandant="med"] .tb-gruppe input[aria-invalid="true"] { border-color: var(--ink); }
body[data-mandant="med"] .tb-abt-liste[aria-invalid="true"] { outline-color: rgba(10, 155, 217, .5); }

/* Foto im Fenster */
.tb-foto { display: flex; align-items: center; gap: 16px; min-width: 0; }
.tb-foto > .avatar.tb-foto-bild { width: 76px; height: 76px; border-radius: 50%; font-size: 25px; flex: none; object-fit: cover; }
.tb-foto-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tb-foto-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-datei { position: relative; overflow: hidden; }
.tb-datei input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.tb-datei:focus-within { outline: 2px solid var(--fokus); outline-offset: 2px; }
.tb-foto-fehler { color: var(--warn-tx); }
body[data-mandant="med"] .tb-foto-fehler { color: var(--ink); }
.tb-foto-fehler:empty { display: none; }

/* Anmeldung und Konto */
.tb-anm-stand { margin: 0 0 6px; }
.tb-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 6px; }
.tb-pw-hinweis { margin: 6px 0 0; }
.tb-pw { max-width: 360px; margin-bottom: 10px; }
.tb-einladen { align-items: flex-start !important; }
.tb-einladen input { margin-top: 3px; }

/* Fehlerzeile und Fuss */
.tb-fehler { margin: 0; padding: 0 22px; color: var(--warn-tx); font-size: 13px; }
body[data-mandant="med"] .tb-fehler { color: var(--ink); }
.tb-fehler:not(:empty) { padding-top: 10px; }
.tb-fuss { flex: none; margin: 0 !important; padding: 12px 22px 16px; border-top: 1px solid var(--line); background: inherit; }

/* Einladung */
.tb-einl-an { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 12px 0 6px; }
.tb-einl-an > div { display: flex; flex-direction: column; min-width: 0; }
.tb-einl-an b, .tb-einl-an span:not(.tb-lbl) { overflow-wrap: anywhere; }
.tb-einl-zuletzt { margin: 0 0 10px; }
.tb-einl-betreff { margin: 0 0 8px; }
.tb-einl-betreff b { display: block; overflow-wrap: anywhere; }
.tb-vorschau.mail-preview { display: block; width: 100%; height: 360px; min-height: 220px; max-height: none; padding: 0; overflow: hidden; box-sizing: border-box; }
.tb-einl-text { margin: 12px 0 0; }
.tb-einl-text summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 6px 0; font-weight: 600; }
.tb-einl-text summary svg.i { width: 14px; height: 14px; }
.tb-einl-text label { margin-top: 8px; }
.tb-einl-text textarea, .tb-einladung textarea { width: 100%; box-sizing: border-box; font: inherit; line-height: 1.5; resize: vertical; }
.tb-hinweise .notice { margin-top: 8px; }
.tb-einl-ohne { margin: 12px 0 10px; }
.tb-einladung label { margin-bottom: 10px; }
.tb-kopierzeile { display: flex; gap: 8px; align-items: center; }
.tb-kopierzeile input { flex: 1; min-width: 0; }
.tb-kopierzeile .btn { flex: none; }

/* ---------- Runde 2y Korrektur 2: mittlere Breiten (761 bis 1180 px) ----------
   Die Tabelle war bis 41 px breiter als ihr Bereich (bei 761 scrollte die Seite). Etwas weniger Abstand in den Zellen, der Stand der Anmeldung
   darf umbrechen. Alle Spalten und der Knopf «Bearbeiten» bleiben. */
@media (min-width: 761px) and (max-width: 1180px) {
  .tb-liste th, .tb-liste td { padding-left: 6px; padding-right: 6px; }
  .tb-liste th:first-child, .tb-liste td.tb-z-knopf { padding-left: 2px; }
  .tb-liste .tb-st { white-space: normal; align-items: flex-start; }
  .tb-liste .tb-st svg.i { flex: none; margin-top: 2px; }
}

/* ---------- Handy: Karten statt Tabelle, Fenster über die ganze Fläche ---------- */
@media (max-width: 760px) {
  .tb-kopfzeile .tb-neu-knopf { width: 100%; min-height: 46px; font-size: 15px; }
  .tb-liste, .tb-liste tbody { display: block; }
  .tb-liste thead { display: none; }
  .tb-liste tr.tb-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--flaeche-2); }
  .tb-liste tr.tb-zeile:hover td { background: transparent; }
  .tb-liste td { display: block; padding: 0; border: 0; white-space: normal; }
  .tb-liste td.tb-z-knopf { order: 9; flex: 1 1 100%; width: auto; padding: 6px 0 0; }
  .tb-liste td.tb-z-knopf .btn { width: 100%; min-height: 46px; font-size: 15px; }
  .tb-z-person { order: 1; flex: 1 1 100%; margin-bottom: 2px; }
  .tb-person > .avatar { width: 46px; height: 46px; font-size: 15px; }
  .tb-z-rolle, .tb-z-nst, .tb-z-kunden { font-size: 13px; padding: 2px 9px !important; border-radius: 7px; background: var(--flaeche-3) !important; }
  .tb-z-rolle { order: 2; }
  .tb-z-abt { order: 3; }
  .tb-z-abt .tb-abt { padding: 2px 9px; font-size: 13px; margin: 0 4px 0 0; }
  .tb-z-nst { order: 4; }
  .tb-z-kunden { order: 5; }
  .tb-z-anm { order: 6; flex: 1 1 100%; }
  .tb-m { display: inline; color: var(--muted); }
  .tb-z-rolle .tb-m { display: none; }
  .tb-z-kunden b { font-weight: 600; }

  .modal:has(.tb-fenster) { padding: 0; place-items: stretch; }
  .modal-box.tb-fenster { width: 100%; max-height: none; height: 100%; border-radius: 0; }
  .tb-form { max-height: none; height: 100%; }
  .tb-kopf { padding: 14px 16px 12px; gap: 12px; }
  .tb-kopf > .avatar.tb-kopf-bild { width: 46px; height: 46px; font-size: 16px; }
  .tb-kopf-text h2 { font-size: 17px; }
  .tb-kopf .tb-zu { min-width: 44px; min-height: 44px; }
  .tb-koerper { padding: 4px 16px 10px; }
  .tb-felder { grid-template-columns: 1fr; }
  .tb-felder input, .tb-felder select { min-height: 44px; font-size: 16px; }
  .tb-abt-liste .check-line { min-height: 40px; }
  .tb-foto { align-items: flex-start; }
  .tb-foto > .avatar.tb-foto-bild { width: 64px; height: 64px; font-size: 21px; }
  .tb-foto-knoepfe .btn, .tb-knoepfe .btn { min-height: 44px; flex: 1 1 auto; justify-content: center; font-size: 14px; }
  .tb-knoepfe { flex-direction: column; }
  .tb-fehler { padding: 0 16px; }
  .tb-fuss { padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
  .tb-fuss .btn { flex: 1 1 0; min-height: 48px; font-size: 15px; }
  .tb-einl-an { grid-template-columns: 1fr; }
  .tb-kopierzeile .btn { min-height: 44px; }
  .tb-einladung input, .tb-einladung textarea { font-size: 16px; }
  /* Runde 2y Korrektur 2: grosse Tippflächen auch für «Einladung gleich senden» (vorher 20 px) und das Start-Passwort (vorher 36 px) */
  .tb-einladen { min-height: 48px; align-items: center !important; margin: 4px 0; padding: 4px 0; cursor: pointer; }
  .tb-einladen input { width: 22px; height: 22px; margin: 0; flex: none; }
  .tb-pw { max-width: none; }
  .tb-pw input { min-height: 44px; font-size: 16px; }
}