/* ================= Runde 2g TELEFON (.tx-): 3CX-Schnittstelle in Einstellungen, Schnittstellen =================
   Ruhig und knapp, kein Rot (auch nicht bei verpassten Anrufen), MediPersonal über die Marken-Token. */

/* Kasten «3CX-Schnittstelle»: drei Punkte für die IT */
.tx-punkte { margin: 0; padding-left: 34px; display: flex; flex-direction: column; gap: 6px; line-height: 1.6; }
.tx-punkte li { overflow-wrap: anywhere; padding-left: 2px; }
.tx-alternative { margin: 10px 0 0; overflow-wrap: anywhere; }
.tx-alternative code { background: var(--flaeche-3); padding: 1px 6px; border-radius: 5px; font-size: 12px; word-break: break-all; }

/* Meldungen von 3CX */
.tx-stand { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 12px; }
.tx-stand > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.tx-stand dt { font-size: 12px; color: var(--muted); }
.tx-stand dd { margin: 0; font-weight: 700; }
.tx-wert { display: inline-block; padding: 0 8px; border-radius: 6px; font-size: 12.5px; border: 1px solid var(--neu-ln); background: var(--neu-bg); color: var(--neu-tx); }
.tx-wert.tx-ja { background: var(--ok-bg); color: var(--ok-tx); border-color: var(--ok-ln); }
.tx-tabelle table { min-width: 640px; }
.tx-tabelle td, .tx-tabelle th { vertical-align: top; }
.tx-tabelle td a { color: var(--text); text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 3px; }
.tx-tabelle td a:hover { text-decoration-color: currentColor; }
.tx-tabelle td a:focus-visible { outline: 2px solid var(--ak-ln); outline-offset: 2px; border-radius: 3px; }
.tx-art { display: inline-block; padding: 0 7px; border-radius: 6px; font-size: 12.5px; white-space: nowrap; border: 1px solid var(--neu-ln); background: var(--neu-bg); color: var(--neu-tx); }
.tx-art-missed, .tx-art-notanswered { background: var(--warn-bg); color: var(--warn-tx); border-color: var(--warn-ln); }
.tx-nummer { font-variant-numeric: tabular-nums; color: var(--muted); }
.tx-leer { margin: 4px 0 0; }

@media (max-width: 760px) {
  .tx-punkte { padding-left: 28px; }
  .tx-stand { flex-direction: column; gap: 4px; }
  /* Schmal (Korrektur Runde 2g): jede Meldung als kleine Karte statt einer breiten Tabelle, nichts läuft rechts hinaus */
  .table-wrap.tx-tabelle { max-height: none; overflow: visible; }
  .tx-tabelle table { display: block; min-width: 0; }
  .tx-tabelle thead { display: none; }
  .tx-tabelle tbody { display: block; }
  .tx-tabelle tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
  .tx-tabelle td { display: block; padding: 0; border: 0; white-space: normal; min-width: 0; overflow-wrap: anywhere; }
  .tx-tabelle td.tx-z { grid-row: 1; grid-column: 1; font-weight: 700; }
  .tx-tabelle td.tx-d { grid-row: 1; grid-column: 2; text-align: right; color: var(--muted); }
  .tx-tabelle td.tx-a { grid-row: 2; grid-column: 1 / -1; }
  .tx-tabelle td.tx-b { grid-row: 3; grid-column: 1 / -1; }
  .tx-tabelle td.tx-f { grid-row: 4; grid-column: 1 / -1; }
  .tx-tabelle td.tx-nst { grid-row: 5; grid-column: 1; color: var(--muted); }
  .tx-tabelle td.tx-nummer { grid-row: 5; grid-column: 2; text-align: right; }
  .tx-tabelle td[data-l]::before { content: attr(data-l) " "; color: var(--muted); font-size: 12px; }
  .tx-tabelle td.tx-nst:empty { display: none; }
}

/* ================= Runde 2j (.tx-s-, .tx-sm-): Telefonie-Schlüssel per Knopf =================
   Stand ruhig, Fenster mit dem Schlüssel gross und gut vorlesbar (Vierergruppen, Monospace), kein Rot. */
.tx-s-stand { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; overflow-wrap: anywhere; }
.tx-s-stand svg.i { width: 16px; height: 16px; color: var(--ok-tx); flex: none; }
.tx-s-stand.leer { color: var(--muted); }
.tx-schluessel .btn { margin-top: 6px; }
.tx-s-verlauf { margin-top: 12px; }
.tx-s-verlauf summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.tx-s-verlauf ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.tx-sm { display: grid; gap: 12px; }
.tx-sm-kopf h2 { margin: 0; display: flex; align-items: center; gap: 8px; }
.tx-sm-satz { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--warn-bg); border: 1px solid var(--warn-ln); color: var(--text); }
.tx-sm-wert { font-family: var(--mono); font-size: 22px; line-height: 1.6; letter-spacing: .04em; padding: 14px 16px; border-radius: 12px; background: var(--feld);
  border: 1px solid var(--line-strong); color: var(--text); overflow-wrap: normal; word-break: normal; user-select: all; }
.tx-sm-gruppe { white-space: nowrap; } /* Vierergruppen brechen nie mitten durch */
.tx-sm-wer { margin: 0; }
@media (max-width: 760px) {
  .tx-sm-wert { font-size: 17px; padding: 12px; }
  .tx-sm .modal-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ================= Runde 2u (.tx-sp-): Zugang von 3CX, Stand der Sperre und letzte Anfragen =================
   Gesperrt in Gelb (Warnung), frei in Grün, kein Rot. Schmal als kleine Karten wie die Meldungen. */
.tx-sp-stand { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--neu-ln);
  background: var(--neu-bg); overflow-wrap: anywhere; line-height: 1.5; }
.tx-sp-stand svg.i { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.tx-sp-stand.tx-sp-zu { background: var(--warn-bg); border-color: var(--warn-ln); }
.tx-sp-stand.tx-sp-zu svg.i { color: var(--warn-tx); }
.tx-sp-stand.tx-sp-frei svg.i { color: var(--ok-tx); }
.tx-sp-zaehler { margin: 0 0 6px; }
.tx-sp-tipp { margin: 0 0 10px; overflow-wrap: anywhere; }
.tx-sperre > .btn { margin: 0 0 10px; }
.tx-sp-auf { margin: 0 0 10px; }
.tx-sp-fremd { margin: 8px 0 0; overflow-wrap: anywhere; } /* Runde 2u: abgewiesene fremde Adressen, eine Zeile unter der Liste */
.tx-sp-tabelle table { min-width: 520px; }
.tx-erg { display: inline-block; padding: 0 7px; border-radius: 6px; font-size: 12.5px; white-space: nowrap; border: 1px solid var(--neu-ln); background: var(--neu-bg); color: var(--neu-tx); }
.tx-erg-ok { background: var(--ok-bg); color: var(--ok-tx); border-color: var(--ok-ln); }
.tx-erg-falsch, .tx-erg-leer, .tx-erg-gesperrt { background: var(--warn-bg); color: var(--warn-tx); border-color: var(--warn-ln); }
.tx-ip { font-variant-numeric: tabular-nums; color: var(--muted); }
@media (max-width: 760px) {
  .tx-sp-tabelle table { min-width: 0; }
  .tx-sp-tabelle td.tx-z { grid-row: 1; grid-column: 1; font-weight: 700; }
  .tx-sp-tabelle td.tx-e { grid-row: 1; grid-column: 2; text-align: right; }
  .tx-sp-tabelle td.tx-a { grid-row: 2; grid-column: 1; }
  .tx-sp-tabelle td.tx-ip { grid-row: 2; grid-column: 2; text-align: right; }
  .tx-sperre > .btn { width: 100%; justify-content: center; }
}