/* ==================================================================================================
   Inline Laboratory Editor (09_060 / E6)

   Der Dialog neben dem Feld "Laborparameter" -- in der Feld-Maske des eCRF und im Feldeditor des
   Studien-Editors. Aufbau und Optik folgen dem Listeneditor aus 09_053
   (css/bi/crf/list-editor.css); die Werte sind bewusst dieselben, damit beide Inline-Masken
   gleich aussehen.

   Warum eine eigene Datei und nicht crf-design.css:
   scripts/EditorNew/maineditor.php laedt crf-design.css NICHT (das ist der Stil der
   Struktur-Masken des Design-Modus, die es im Studien-Editor gar nicht gibt). Alles, was dieser
   Baustein zum Sichtbarwerden braucht, gehoert deshalb hierher -- einschliesslich der Optik des
   Startknopfs (.labe-launch), die im eCRF von .design__btn kaeme.

   Die fruehere Hausregel „kein `gap`, das kennt der IE-9-Modus der Masken nicht“ ist mit 09_075
   entfallen (Fehldeutung des Meta-Tags X-UA-Compatible, das nur im echten IE wirkt).

   09_075 (P7, Plan §5.8): GESTAPELTER UNTERDIALOG in der Huelle, 940 px (09_075 P10/E28: Breite,
   Zeilenfolge und Eingabemasse wie vor 09_075). Die Box traegt
   `.dlg-scope` und holt Tokens, Kopf, Fuss, Knoepfe (`.dlg-btn`), Schalter (`.dlg-seg`),
   Streifen (`.dlg-info`/`.dlg-warn`) und Zeilen-Kreuz aus css/bi/dlg/dlg.css (beide Traeger laden
   es). KEINE Abdunkelung der Seite: die Ueberlagerung ist durchsichtig und laesst Klicks durch,
   das Elternfenster traegt den Schleier `.dlg__veil` -- nie `opacity`/`filter` am Fenster.
   ================================================================================================== */

/* --------------------------------------------------------------------------------------------
   Host und Startknopf
   -------------------------------------------------------------------------------------------- */

.labe {
    display: none;
}

/* Die Optik des Stifts. Im eCRF traegt sie .design__btn--icon, im Studien-Editor gibt es die
   Klasse nicht -- darum hier dieselben Werte noch einmal, gebunden an die eigene Klasse. */
.labe-launch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 6px;
    padding: 0;
    border: 1px solid #7C8894;
    border-radius: 6px;
    background: #FFFFFF;
    color: #2C3A47;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
}

.labe-launch:hover {
    border-color: #4C5A67;
    background: #EEF3F7;
    color: #1F2933;
}

.labe-launch[disabled] {
    border-color: #E4E9ED;
    background: #F7F9FA;
    color: #7C8894;
    cursor: not-allowed;
}

.labe-launch[disabled]:hover {
    border-color: #E4E9ED;
    background: #F7F9FA;
    color: #7C8894;
}

/* --------------------------------------------------------------------------------------------
   Die Ueberlagerung und der Kasten
   -------------------------------------------------------------------------------------------- */

.labe-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    pointer-events: none;
    font-size: 13px;
    line-height: 1.45;
    color: #2C3A47;
    text-align: left;
}

.labe-modal * {
    box-sizing: border-box;
}

/* `max-height` und `max-width` sind TRAGEND, nicht Optik (09_060/E6, Auflage G5).
   Gemessen: die Klemmung des Ziehens rechnet `maxTop = Math.max(0, window.height - box.height)`.
   Ist der Kasten hoeher als der Viewport, ist maxTop 0 -- die Fusszeile mit dem Speichern-Knopf
   bliebe dauerhaft unter dem Rand, und der einzige Ausgang waere Verwerfen. Wer diese Werte
   anfasst, nimmt dem Ziehen seinen Anschlag. */
.labe-modal__box {
    display: flex;
    flex-direction: column;
    width: 940px;
    max-width: 94%;
    max-height: 88%;
    overflow: hidden;
    border: 1px solid #D6DEE5;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 22px 54px rgba(23, 43, 63, .30);
    pointer-events: auto;
}

/* Das Fenster haengt an der Kopfzeile (startDrag() in js/bi/crf/lab-editor.js). `.dlg__hd`
   bringt Polster und Akzentlinie; ohne `user-select` markiert das Ziehen den Titeltext. */
.labe-modal__head {
    flex: 0 0 auto;
    padding-right: 56px;
    cursor: move;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.labe-modal .labe__scope {
    margin-top: 4px;
    font-size: 12px;
    color: #5F6A76;
}

.labe-modal .labe__scope b {
    font-weight: 700;
    color: #2C3A47;
}

.labe-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 16px 18px;
}

.labe-modal__foot {
    flex: 0 0 auto;
}

.labe-modal .labe__warn {
    color: #7A4A00;
}

/* --------------------------------------------------------------------------------------------
   Kopfzeile im Koerper (Parameterauswahl und "Neuer Parameter") und Zeilen: Beschriftung
   150 px, dann die Eingabe -- Masse wie vor 09_075 (P10/E28: 260 px, Textarea 420 x 48).
   -------------------------------------------------------------------------------------------- */

.labe-modal .labe__top {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #E8EBEE;
}

.labe-modal .labe__label {
    flex: 0 0 auto;
    margin-right: 8px;
    color: #2C3A47;
}

.labe-modal .labe__row {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.labe-modal .labe__row .labe__label {
    width: 150px;
}

.labe-modal input[type="text"],
.labe-modal select,
.labe-modal textarea {
    margin: 0;
    padding: 3px 6px;
    border: 1px solid #7C8894;
    border-radius: 4px;
    background: #FFFFFF;
    color: #1F2933;
    font: inherit;
    font-size: 12px;
}

.labe-modal .labe__row input[type="text"],
.labe-modal .labe__row select {
    width: 260px;
}

.labe-modal input[type="text"]:focus,
.labe-modal select:focus,
.labe-modal textarea:focus {
    outline: none;
    border-color: #14707F;
    box-shadow: 0 0 0 3px rgba(20, 112, 127, .18);
}

.labe-modal input[type="text"][readonly],
.labe-modal select[disabled],
.labe-modal textarea[readonly] {
    background: #F7F9FA;
    color: #3B4956;
}

.labe-modal .labe__params {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 420px;
    margin-right: 8px;
}

.labe-modal .labe__row--datatype .dlg-seg button {
    height: 32px;
    padding: 0 14px;
    font-size: 13px;
}

.labe-modal .labe__row .dlg-seg--bi button {
    height: 30px;
}

/* Gesperrter Datentyp: der gewaehlte Typ bleibt als gewaehlt erkennbar, nur nicht mehr bedienbar. */
.labe-modal .labe__datatype button[aria-pressed="true"][disabled] {
    background: #DDECEE;
    color: #0E5F6B;
    font-weight: 700;
}

.labe-modal .labe__why {
    flex: 1 1 200px;
    min-width: 0;
    margin-left: 10px;
    font-size: 12px;
    color: #5F6A76;
}

.labe-modal .labe__why:empty {
    display: none;
}

.labe-modal .labe__row textarea {
    width: 420px;
    height: 48px;
    resize: vertical;
}

/* --------------------------------------------------------------------------------------------
   Die Normwertzeilen
   -------------------------------------------------------------------------------------------- */

.labe-modal .labe__section {
    margin: 16px 0 8px;
    color: #5F6A76;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.labe-modal .labe__table {
    margin-top: 8px;
}

.labe-modal .labe__head,
.labe-modal .labe__range {
    display: flex;
    align-items: center;
    padding: 4px 8px;
}

.labe-modal .labe__head {
    border-bottom: 1px solid #DCE2E8;
    color: #5F6A76;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.labe-modal .labe__range {
    border-bottom: 1px solid #E8EBEE;
}

.labe-modal .labe__th,
.labe-modal .labe__td {
    flex: 0 0 auto;
    margin-right: 6px;
    min-width: 0;
}

.labe-modal .labe__th--gender,
.labe-modal .labe__td--gender {
    width: 110px;
}

.labe-modal .labe__th--age,
.labe-modal .labe__td--age {
    width: 76px;
}

.labe-modal .labe__th--limit,
.labe-modal .labe__td--limit {
    width: 104px;
}

.labe-modal .labe__th--note,
.labe-modal .labe__td--note {
    flex: 1 1 auto;
}

.labe-modal .labe__th--tools,
.labe-modal .labe__td--tools {
    width: 34px;
    margin-right: 0;
    margin-left: auto;
    text-align: right;
}

.labe-modal .labe__td input[type="text"],
.labe-modal .labe__td select {
    width: 100%;
}

.labe-modal .labe__rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.labe-modal .labe__actions {
    margin-top: 8px;
}

/* --------------------------------------------------------------------------------------------
   Hinweise und Fehler (Streifen aus dlg.css: `.dlg-info`, `.dlg-warn`)
   -------------------------------------------------------------------------------------------- */

.labe-modal .labe__notice--readonly {
    margin: 0 0 12px;
    padding: 9px 11px;
    border-radius: 6px;
    background: #F1F4F7;
    color: #4A5966;
    font-size: 11.5px;
}

.labe-modal .labe__notice--readonly:empty {
    display: none;
}

.labe-modal .labe__error {
    margin: 6px 0;
    color: #B03A2E;
    font-size: 12px;
    font-weight: 600;
}

.labe-modal .labe__error:empty {
    display: none;
}

.labe-modal .labe__range--bad input[type="text"],
.labe-modal .labe__range--bad select {
    border-color: #B03A2E;
    background: #FBE6E3;
}