/*
 | VadoplexDB – Oberflächen-Styles (aus OpedDB adaptiert)
 | OPED-Markenfarbe (Teal) als Primärfarbe des Tabler-Themes + fachliche
 | Formular-Elemente: Abschnittsüberschriften und Ein-/Ausschlussblöcke.
 */

:root,
.theme-tabler {
    --tblr-primary: #009cb4;              /* OPED-Teal */
    --tblr-primary-rgb: 0, 156, 180;
}

/* Logo in der Sidebar sauber einpassen */
.navbar-brand img { max-height: 32px; width: auto; }

/* Abschnittsüberschrift (custom_heading) – Abstand VOR der Überschrift, nicht danach. */
.vdx-heading { margin: 1.5rem 0 0; }
.vdx-heading:first-child { margin-top: 0; }
.vdx-heading h4 { margin-bottom: .15rem; font-weight: 600; }
.vdx-heading .vdx-heading-hint { color: var(--tblr-secondary, #6c757d); font-size: .85rem; }
.vdx-heading hr { margin: .25rem 0 0; border-top-color: var(--tblr-border-color, #e6e7e9); }

/* Ein-/Ausschluss: der häufigste Bedienfehler ist die Verwechslung der Blöcke.
   Die Bedeutung tragen die farbige Überschrift + die farbigen Feld-Randstreifen;
   die Trennlinie bleibt neutral (die bunte Linie war überflüssig). */
.vdx-heading--einschluss h4 { color: #2fa36b; }
.vdx-heading--ausschluss h4 { color: #d63939; }

/* Farbige Rahmen um die zugehörigen Kriterienfelder (per Wrapper-Klasse gesetzt) */
.vdx-field--einschluss { border-left: 3px solid #2fa36b; padding-left: .75rem; }
.vdx-field--ausschluss { border-left: 3px solid #d63939; padding-left: .75rem; }

/* Randomisierungs-Zustandsanzeige */
.vdx-random-state { margin: .5rem 0 1rem; }

/* Oxford-Rechner (#29031) */
.vdx-oxford-q legend { font-size: .95rem; font-weight: 600; }
.vdx-oxford-q { border-bottom: 1px solid var(--tblr-border-color, #e6e7e9); padding-bottom: .5rem; }
.vdx-oxford-q:last-of-type { border-bottom: 0; }
.vdx-oxford-summary { font-size: .9rem; }

/* Zeitpunkt-Tableiste am Kopf der Visiten-/OP-Karte (#29038): sitzt IN der Karte
   (erstes Feld) und liest sich als Tab-Leiste des Formulars – durchgehende
   Trennlinie, aktiver Tab hängt daran, klarer Abstand zum ersten Feld. */
.vdx-visit-tabs { margin: 0 0 1.25rem; }
.vdx-visit-tabs .nav-tabs { border-bottom: 1px solid var(--tblr-border-color, #e6e7e9); }
.vdx-visit-tabs .nav-link { display: inline-flex; align-items: center; gap: .35rem; }

/* Elixhauser-Rechner (#29032) */
.vdx-elix-diabetes legend { font-size: .95rem; font-weight: 600; }
.vdx-elix-summary { font-size: .9rem; }

/*
 | Gekappte Feldbreiten (Konvention aus tänzer:admin, docs/23-form-layout).
 | Ein col-md-* ist auf breiten Monitoren viel breiter als ein Datum/Select je
 | braucht → Control kappen, Spalte behält das responsive Wrapping. Klasse
 | ZUSÄTZLICH zur Grid-Spalte an wrapper.class. NICHT auf paarweise Messwertfelder.
 */
.field-compact .form-control,
.field-compact .form-select,
.field-compact .input-group,
.field-compact .select2-container { max-width: 14rem; }

/* Datumsfelder brauchen Platz für Wert + Kalender-Icon + „Heute"-Button (input-group). */
.field-compact.field-date .form-control { max-width: 11rem; }
.field-compact.field-date .input-group { max-width: 17rem; }

.field-medium .form-control,
.field-medium .form-select,
.field-medium .input-group,
.field-medium .select2-container { max-width: 26rem; }

.field-wide .form-control,
.field-wide .form-select,
.field-wide textarea { max-width: 44rem; }

/*
 | Eingabemaske-Breite INNERHALB der Tabs/Formulare begrenzen – nicht das ganze
 | Layout boxen. Die Felder ziehen sonst über die volle Bildschirmbreite.
 */
.nav-tabs-custom .tab-pane > .row,   /* Formulare mit Tabs (Fall) */
.card-body.row { max-width: 1040px; }   /* Formulare ohne Tabs (Visite, OP) */

/* Export-Buttons ans rechte Zeilenende (neben die Suchmaske), Höhe = Suchfeld (40px).
   !important, da die Theme-Skin denselben Container mit gleicher Spezifität als block setzt. */
[class*="top_buttons_"] { display: flex !important; align-items: center; flex-wrap: wrap; gap: .5rem; }
[class*="top_buttons_"] .vdx-export-top { margin-left: auto; }
.vdx-export-top .btn { height: 40px; display: inline-flex; align-items: center; }