/* ==============================================================================================
   Gemeinsames Stylesheet der vier Lesemasken im Fenster (09_034/09_035/09_036, seit 09_075 in der
   gemeinsamen Dialog-Huelle).

   Die vier Masken: Aenderungshistorie (scripts/changeHistory/getHistoryValues.php, `.alog--field`),
   CRF-Status-Log (scripts/crfstatelog/crfstatelog.php, `.alog--state`), Normwerte
   (scripts/getInfo.php?labvalue=1, `.alog--lab`) und Infotext (scripts/getInfo.php?ob=F|B|C|V,
   `.alog--info`). Das Praefix `.alog` bleibt fuer alle vier; der Stil liegt hier und NICHT als
   <style> im Fragment (Pin AuditTrailMaskSourceTest) -- "aehnlich sehen" ist nur mit EINER Quelle
   zu halten.

   09_075 (Plan §5.7): Die Masken zeichnen keinen eigenen Kopf mehr. Ihre Wurzel traegt den
   Fragment-Vertrag der Huelle (`data-dlg-kind="ro"`, Gattungszeile, Titel, Brotkrume als JSON,
   Breite, Plakette „nur lesen“), und die Huelle (js/bi/crf/qv-window.js, css/bi/dlg/dlg.css)
   zeichnet den einen Kopf mit dem Akzent der Leseansicht (2 px, Token `--dlg-acc-ro`). Was hier
   bleibt, ist der Rumpf: Kopfdaten als Schluessel-Wert-Paare, Spaltenkopf, Karten, Abschnitte,
   Streifen und der Fuss. Fuss und Knopf kommen aus dlg.css (`.dlg__ft`, `.dlg-btn`, `Close` normal,
   nicht gefuellt); `.alog__close` bleibt nur der Griff der Bindung im Fragment. Leerzustand
   `.dlg-empty`, Hinweis `.dlg-info`, Warnung `.dlg-warn` ebenso aus dlg.css.

   Farben nur aus den Token-Werten des Auftrags 09_075b: Sekundaertext `#5F6A76`, Titeltext
   `#1F2933`, Fliesstext `#2C3A47`, Kartenrand `#DCE2E8`, Tabellenkopf-Linie `#C9D1D8`, die
   geltende bzw. aktuelle Zeile in der Aktiv-Farbe `#0E5F6B` auf `#F2F9F9`. Die Statusfarben der
   Badges (07_010) bleiben: sie tragen Bedeutung.

   HOEHEN- UND SCROLLMODELL: genau ein Scrollbereich, der Rumpf der Huelle (`.dlg__bd`, Polster
   16/18). Darin klebt der Spaltenkopf oben (`position: sticky` -- im Normwert-Fall innerhalb seines
   Abschnitts, zwei Koepfe stapeln sich also nie) und der Fuss unten. Der Fuss hebt das Polster des
   Rumpfs mit negativen Raendern auf, damit er randlos an der Unterkante des Fensters steht; weil
   er das LETZTE Kind ist, verschluckt sein negativer Unterrand genau das Polster unten und die
   Rolllaenge endet mit dem Fuss. Klebekante `bottom: -16px`, weil `sticky` gegen den Rollbereich
   abzueglich seines Polsters misst.
   ============================================================================================== */

.alog {
    box-sizing: border-box;
    color: #2C3A47;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.45;
}

.alog *,
.alog *:before,
.alog *:after {
    box-sizing: border-box;
}

/* ----------------------------------------------------------------------------------------------
   Kopfdaten als Schluessel-Wert-Paare nebeneinander (Zielbild „Reference ranges“): Beschriftung in
   Kapitaelchen, der Wert dahinter -- mit Abstand, das Zielbild klebt beide aneinander.
   ---------------------------------------------------------------------------------------------- */
.alog__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 26px;
    margin: 0 0 14px;
}

.alog__meta-item {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    line-height: 1.3;
}

.alog__meta-label {
    color: #5F6A76;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.alog__meta-value {
    color: #1F2933;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* Hinweis- und Warnstreifen (`.dlg-info` / `.dlg-warn`) im Rumpf: Abstand zur Liste darunter. */
.alog__notice {
    margin: 0 0 14px;
}

/* Leerzustand: die Optik kommt aus `.dlg-empty` (dlg.css); hier nur der Abstand. */
.alog__empty {
    margin: 0;
}

/* ----------------------------------------------------------------------------------------------
   Spaltenkopf -- klebt oben im rollenden Rumpf. Waagerechter Innenabstand 15 px = 1 (Kartenrand)
   + 14 (Kartenpolster): so fluchten die Beschriftungen mit den Spalten der Karten darunter.
   ---------------------------------------------------------------------------------------------- */
.alog__cols {
    display: grid;
    gap: 0 12px;
    position: sticky;
    top: -16px; /* bis an die Oberkante des Rumpfs, nicht 16 px (sein Polster) darunter -- siehe Kopf */
    z-index: 1;
    padding: 8px 15px 7px;
    background: #FFFFFF;
    border-bottom: 1px solid #C9D1D8;
    color: #5F6A76;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Die Spaltenraster stehen an EINER Stelle je Variante, damit Kopf und Karte nie auseinanderlaufen.
   Status-Log: Zeitstempel - Status - Benutzer. Feldhistorie: Zeitstempel - Aenderung - Wert -
   Benutzer (der Wert bekommt den Rest, er ist der lange Teil). */
.alog--state .alog__cols,
.alog--state .alog__entry-main {
    grid-template-columns: 150px 1fr 168px;
}

.alog--field .alog__cols,
.alog--field .alog__entry-main {
    grid-template-columns: 150px 110px 1fr 168px;
}

/* Normwerte: Geschlecht - Alter - Untergrenze - Obergrenze - Einheit. Dieselben fuenf Klassen
   tragen die <span> des Spaltenkopfs und die Zellen der Karte. Ohne Einheitsspalte (E18: alle
   gezeigten Zeilen tragen die Einheit der Kopfdaten) entfaellt die fuenfte Spalte. */
.alog--lab .alog__cols,
.alog--lab .alog__entry-main {
    grid-template-columns: 150px 1fr 110px 110px 90px;
}

.alog--lab-nounit .alog__cols,
.alog--lab-nounit .alog__entry-main {
    grid-template-columns: 150px 1fr 110px 110px;
}

/* Die Grenzspalten stehen rechtsbuendig mit Ziffern gleicher Breite -- Kopf-<span> und Zelle. */
.alog__lab-lower,
.alog__lab-upper {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.alog__lab-unit {
    color: #5F6A76;
}

/* ----------------------------------------------------------------------------------------------
   Karten.
   ---------------------------------------------------------------------------------------------- */
.alog__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0 0;
}

.alog__entry {
    padding: 10px 14px;
    border: 1px solid #DCE2E8;
    border-radius: 8px;
    background: #FFFFFF;
}

/* Die aktuelle bzw. geltende Zeile (Plan §5.7): Aktiv-Farbe am Rand und als Leiste links, dazu die
   Plakette in der Zeile -- Farbe allein reicht nicht. */
.alog__entry.is-current {
    border-color: #0E5F6B;
    background: #F2F9F9;
    box-shadow: inset 3px 0 0 #0E5F6B;
}

.alog__entry-main {
    display: grid;
    gap: 0 12px;
    align-items: start;
}

.alog__ts {
    color: #2C3A47;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* `#history_id` unter dem Zeitstempel (Entscheidung 9.5 aus 09_034): der Griff, mit dem sich eine
   Karte im CSV-Export und im Daten-Ausdruck wiederfinden laesst. */
.alog__rowid {
    display: block;
    color: #5F6A76;
    font-size: 11px;
}

.alog__user {
    color: #1F2933;
    font-weight: 600;
}

.alog__role {
    display: inline-block;
    margin-top: 3px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #EDF0F2;
    color: #3B4956;
    font-size: 11px;
    font-weight: 400;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    white-space: nowrap;
}

/* Der gespeicherte Wert. `pre-wrap` haelt Zeilenumbrueche eines Textfeldes, `break-word` faengt
   eine Zeichenkette ohne Leerzeichen ab, die sonst die Spalte sprengte. */
.alog__value {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Der gespeicherte Schluessel neben dem aufgeloesten Text (Entscheidung 9.3 aus 09_034) bzw. der
   technische Name des Laborparameters: 12 px mono, Sekundaertext. */
.alog__key {
    display: inline;
    margin-left: 6px;
    color: #5F6A76;
    font-size: 12px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

/* Hinweis am Wert, etwa "Sonderliste" bei einer nicht aufloesbaren Liste (-999). */
.alog__hint {
    margin-left: 6px;
    color: #5F6A76;
    font-size: 11px;
    font-style: italic;
}

/* 10_003 (E3): die Labels einer Mehrfachauswahl als Badges (`MultiSelectValue::badgesHtml()` ->
   `span.cs-tag`); dieselbe Optik wie `.bi .cs-tag` (css/bi/crf/multiselect.css), hier eigens, weil
   die Maske auch in Traegern ohne das eCRF-Stylesheet laeuft. */
.alog .cs-tag {
    display: inline-block;
    box-sizing: border-box;
    margin: 1px 2px 1px 0;
    padding: 0 6px;
    border: 1px solid #D6DEE5;
    border-radius: 3px;
    background-color: #EEF3F7;
    color: #1F2933;
    font-size: 12.5px;
    line-height: 18px;
    white-space: normal;
}

.alog__value--empty {
    color: #5F6A76;
    font-style: italic;
}

/* ----------------------------------------------------------------------------------------------
   Badges. `--saved` bis `--unfrozen` sind die Statusfarben des CRF-Status-Logs (07_010),
   `--created`/`--changed`/`--deleted` die drei Typen der Feldhistorie (I/U/D). Sie tragen Bedeutung
   und bleiben (Plan §5.7).
   ---------------------------------------------------------------------------------------------- */
.alog__badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.alog__badge--saved     { background: #eef1f5; color: #52606d; }
.alog__badge--completed { background: #dcfce7; color: #166534; }
.alog__badge--confirmed { background: #dbeafe; color: #1e40af; }
.alog__badge--confirmation-revoked { background: #fee2e2; color: #b91c1c; }
.alog__badge--unlocked  { background: #fef3c7; color: #92400e; }
.alog__badge--frozen    { background: #cffafe; color: #0e7490; }
.alog__badge--unfrozen  { background: #ede9fe; color: #6d28d9; }

.alog__badge--created   { background: #dcfce7; color: #166534; }
.alog__badge--changed   { background: #dbeafe; color: #1e40af; }
.alog__badge--deleted   { background: #fee2e2; color: #b91c1c; }

/* Normalbefund der Normwert-Maske -- eigene, neutral benannte Klasse statt `--completed`. */
.alog__badge--normal    { background: #dcfce7; color: #166534; }

/* „Aktuell“ (Historie, Status-Log) und „gilt“ (Normwerte): Weiss auf der Aktiv-Farbe, 7.32:1. */
.alog__pill-now,
.alog__pill-applies {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #0E5F6B;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    vertical-align: middle;
}

/* Das Zielbild schreibt die Plakette klein („gilt“). */
.alog__pill-applies {
    text-transform: lowercase;
}

/* ----------------------------------------------------------------------------------------------
   Grund einer Statusaenderung -- in derselben Karte, damit Eintrag und Grund als eine Gruppe
   gelesen werden (07_010). Optik des Hinweisstreifens `.dlg-info` (Plan §5.7).
   ---------------------------------------------------------------------------------------------- */
.alog__reason-box {
    display: flex;
    gap: 9px;
    align-items: baseline;
    margin-top: 9px;
    padding: 8px 11px;
    border-radius: 6px;
    background: #F1F4F7;
    color: #4A5966;
}

.alog__reason-label {
    flex-shrink: 0;
    color: #4A5966;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.alog__reason-text {
    color: #4A5966;
    font-size: 12px;
    line-height: 1.5;
}

/* ----------------------------------------------------------------------------------------------
   Abschnitte der Normwert-Maske (09_075): „Bereiche des Instituts“ und „Vorgaben der Studie“, je
   mit Titel, EIGENEM Spaltenkopf und Liste. So wird die Aufloesungsregel sichtbar (Institutssatz
   ersetzt den Studiensatz), und der klebende Spaltenkopf bleibt in seinem Abschnitt.
   ---------------------------------------------------------------------------------------------- */
.alog__section + .alog__section {
    margin-top: 18px;
}

/* Titel als <h3>: `.alog .alog__group` (0,2,0) schlaegt `.bi h3` und aehnliche Seitenregeln. */
.alog .alog__group {
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    background: none;
    color: #5F6A76;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.alog .alog__group-hint {
    margin: 0;
    color: #5F6A76;
    font-size: 12.5px;
}

/* Zeilen-Notiz (`lab_reference_ranges.note`) unter dem Raster der Karte (Entscheidung 9.5). */
.alog__note {
    margin-top: 6px;
    color: #5F6A76;
    font-size: 11.5px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ----------------------------------------------------------------------------------------------
   Der Infotext (`.alog--info`). Studienkonfiguration, als HTML gepflegt und roh eingesetzt
   (renderInfoMask()): der EINZIGE Ort der Masken, in dem fremdes Markup fliesst. Etwas groessere
   Schrift (Rueckmeldung Browser-Test 09_036), `word-break` gegen ueberlange Zeichenketten, ein
   Deckel auf Bildern.
   ---------------------------------------------------------------------------------------------- */
.alog--info .alog__info {
    color: #2C3A47;
    font-size: 15px;
    line-height: 1.55;
    word-break: break-word;
}

.alog--info .alog__info img {
    max-width: 100%;
    height: auto;
}

/* Tabellen aus dem Infotext-Editor der Struktur-Masken (Quill 2). Ohne diese Regeln staende das
   Raster ohne Linien und ohne Polster. */
.alog--info .alog__info table {
    margin: 8px 0;
    border-collapse: collapse;
}

.alog--info .alog__info td,
.alog--info .alog__info th {
    padding: 4px 8px;
    border: 1px solid #DCE2E8;
    vertical-align: top;
}

.alog--info .alog__info th {
    background: #F7F9FA;
    text-align: left;
}

.alog--info .alog__info p:first-child {
    margin-top: 0;
}

.alog--info .alog__info p:last-child {
    margin-bottom: 0;
}

/* ----------------------------------------------------------------------------------------------
   Fuss: `.dlg__ft` aus dlg.css (Linie, Flaeche, Polster 11/18), `Close` rechts. Klebt unten im
   rollenden Rumpf und hebt dessen Polster (16/18) mit negativen Raendern auf -- siehe Kopf.
   ---------------------------------------------------------------------------------------------- */
.alog__footer {
    justify-content: flex-end;
    position: sticky;
    /* Chrome misst `sticky` gegen den Rollbereich ABZUEGLICH seines Polsters: `bottom: 0` liesse
       den Fuss 16 px ueber der Unterkante schweben (gemessen, 09_075 P3). */
    bottom: -16px;
    z-index: 2;
    margin: 16px -18px -16px;
}

/* Browser-Abnahme 2026-09-25: bei kurzem Inhalt (etwa „Zu diesem Feld wurde noch nichts geaendert.")
   hing der Fuss direkt unter dem Inhalt und darunter lag eine leere Flaeche -- `sticky` klebt nur
   beim Rollen. Die Lesemaske fuellt darum den Rumpf, der Fuss sitzt an dessen Unterkante. */
.qvw-body:has(> .alog) {
    display: flex;
    flex-direction: column;
}

.qvw-body > .alog {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

.qvw-body > .alog > .alog__footer {
    margin-top: auto;
}

.qvw-body > .alog > :nth-last-child(2) {
    margin-bottom: 16px;
}

/* Browser-Abnahme 2026-09-25: die Aenderungshistorie eines FELDES ist 25 % niedriger als das
   Standardfenster (90vh -> 67.5vh). Nur ab 900 px Breite -- darunter bleibt das Vollbild der Huelle;
   maximiert gilt weiter die Hoehe der Huelle. */
@media (min-width: 900px) {
    .qvw-window.dlg:not(.is-max):has(.qvw-body > .alog--field) {
        height: 67.5vh;
        max-height: 67.5vh;
    }
}

/* ----------------------------------------------------------------------------------------------
   Schmales Fenster (gezogen oder im iframe des Casebooks): unter 600 px traegt ein mehrspaltiger
   Kopf nichts mehr bei. Der Spaltenkopf geht, die Karte stapelt ihre Zellen untereinander.
   ---------------------------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .alog__cols {
        display: none;
    }

    .alog__entry-main,
    .alog--state .alog__entry-main,
    .alog--field .alog__entry-main,
    .alog--lab .alog__entry-main,
    .alog--lab-nounit .alog__entry-main {
        grid-template-columns: 1fr;
    }

    .alog__lab-lower,
    .alog__lab-upper {
        text-align: left;
    }
}