/* ==============================================================================================
   09_053: Stil des Listeneditors (js/bi/crf/list-editor.js).

   Traeger: die Feld-Maske des Design-Modus (scripts/crfdesign/field.php, eingebunden ueber
   scripts/html_includes.inc.php) UND der Feldeditor des Studien-Editors (editfield.php in
   scripts/EditorNew/maineditor.php). Deshalb steht JEDE Regel unter `.lste` (der Host in der
   Maske), `.lste-launch` (der Knopf, der den Dialog oeffnet), `.lste-modal` (der Dialog am body)
   -- beide Seiten stylen nackte Elemente (css/bi/field.css, EditorNew/css/editor.css), eine Regel
   ohne Praefix waere ein Eingriff in die Traegerseite.

   09_075 (P7, Plan §5.8): GESTAPELTER UNTERDIALOG in der Huelle. Die Box traegt `.dlg-scope`
   und holt Tokens, Kopf (`.dlg__hd`), Fuss (`.dlg__ft`), Knoepfe (`.dlg-btn`), Streifen
   (`.dlg-warn`), Griff (`.dlg-grab`) und Zeilen-Kreuz (`.dlg-row-x`) aus css/bi/dlg/dlg.css (in
   beiden Traegern geladen). Hier stehen nur Mass, Lage und die Teile, die es nur hier gibt.
   KEINE Abdunkelung der Seite mehr: die Ueberlagerung ist durchsichtig und laesst Klicks durch
   (`pointer-events: none`), nur die Box faengt sie. Das Elternfenster traegt den Schleier
   `.dlg__veil` (qv-window.js ueber `qvw.stack`, im Studien-Editor der Baustein selbst) -- nie
   `opacity`/`filter` am Fenster.

   z-index: das Service-Fenster liegt auf 9000, der Listeneditor darueber (10001). Seine
   Rueckfragen und die des Tabellen-Editors sind der blockierende Dialog der Huelle (dlgBlock,
   11000, css/bi/dlg/dlg.css).
   ============================================================================================== */

/* Der Host in der Maske zeigt nichts: der Dialog liegt am body. Er bleibt trotzdem ein Kasten
   mit Grundwerten, damit ein spaeterer Inhalt nicht die Schrift der Maske erbt. */
.lste {
    box-sizing: border-box;
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    color: #2C3A47;
}

.lste * {
    box-sizing: border-box;
}

/* ----------------------------------------------------------------------------------------------
   Der Dialog
   ---------------------------------------------------------------------------------------------- */

.lste-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;
}

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

/* `max-height` ist tragend fuer die Klemmung beim Ziehen (list-editor.js dragMove()): waere der
   Kasten hoeher als der Viewport, liesse sich die Fusszeile nie in den Blick holen. */
.lste-modal__box {
    display: flex;
    flex-direction: column;
    /* 09_075 P10 (E28): Breite und Eingabemasse wie vor 09_075. */
    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;
}

/* Die Kopfzeile ist der Griff zum Verschieben (startDrag()). `.dlg__hd` bringt Polster, Linie
   (Akzent Konfiguration) und den Zeiger; `user-select` verhindert das Markieren beim Ziehen. */
.lste-modal__head {
    flex: 0 0 auto;
    padding-right: 56px;
    cursor: move;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

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

.lste-modal .lste__scope b {
    font-weight: 700;
    color: #2C3A47;
}

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

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

.lste-modal .lste__delete-why {
    max-width: 260px;
}

/* ----------------------------------------------------------------------------------------------
   Kopf des Rumpfs: Listenauswahl und „Neu"
   ---------------------------------------------------------------------------------------------- */

.lste-modal .lste__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 10px;
    padding: 8px 10px;
    border: 1px solid #E4E9ED;
    border-radius: 6px;
    background: #FBFCFD;
}

.lste-modal .lste__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 8px;
}

.lste-modal .lste__label {
    display: inline-block;
    min-width: 90px;
    margin-right: 6px;
    color: #2C3A47;
}

.lste-modal .lste__new {
    margin-right: 6px;
}

.lste-modal .lste__lists,
.lste-modal .lste__keytype,
.lste-modal .lste__name,
.lste-modal .lste__ownname,
.lste-modal .lste__key,
.lste-modal .lste__text,
.lste-modal .lste__sql,
.lste-modal .lste__quick-text {
    box-sizing: border-box;
    margin: 0;
    padding: 4px 6px;
    border: 1px solid #7C8894;
    border-radius: 4px;
    background: #FFFFFF;
    color: #1F2933;
    font: inherit;
    font-size: 12px;
}

.lste-modal .lste__lists,
.lste-modal .lste__keytype {
    display: inline-block;
    max-width: 100%;
    margin-right: 10px;
}

.lste-modal .lste__lists,
.lste-modal .lste__name,
.lste-modal .lste__ownname {
    width: 360px;
    max-width: 100%;
    margin-right: 10px;
}

.lste-modal .lste__lists:focus,
.lste-modal .lste__keytype:focus,
.lste-modal .lste__name:focus,
.lste-modal .lste__ownname:focus,
.lste-modal .lste__key:focus,
.lste-modal .lste__text:focus,
.lste-modal .lste__sql:focus,
.lste-modal .lste__quick-text:focus {
    outline: none;
    border-color: #14707F;
    box-shadow: 0 0 0 3px rgba(20, 112, 127, .18);
}

.lste-modal .lste__name[readonly],
.lste-modal .lste__key[readonly] {
    background: #F7F9FA;
    color: #3B4956;
}

.lste-modal .lste__notice {
    display: none;
    margin: 0 0 8px;
    padding: 9px 11px;
    border-radius: 6px;
    background: #F1F4F7;
    color: #4A5966;
    font-size: 11.5px;
}

/* Der Warnstreifen ueber der Tabelle (`.dlg-warn` aus dlg.css) */
.lste-modal .lste__usage b {
    font-weight: 700;
}

/* ----------------------------------------------------------------------------------------------
   Die Hinweise hinter dem Fragezeichen (Rueckmeldung des Auftraggebers zur Schnellanlage).
   Beide starten eingeklappt; geschaltet wird ueber die Klasse `lste__hints--open`.
   ---------------------------------------------------------------------------------------------- */

.lste-modal .lste__hints {
    display: none;
}

.lste-modal .lste__hints--open {
    display: block;
}

.lste-modal .lste__hints--quick {
    margin: 0 0 6px;
}

.lste-modal .lste__hints--items {
    margin: 8px 0 0;
}

.lste-modal .lste__quick-format,
.lste-modal .lste__entity {
    margin: 0 0 6px;
    padding: 9px 11px;
    border-radius: 6px;
    background: #F1F4F7;
    color: #4A5966;
    font-size: 11.5px;
}

.lste-modal .lste__hints .lste__entity {
    margin-bottom: 0;
}

.lste-modal .lste__help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 0 0 0 6px;
    padding: 0;
    vertical-align: middle;
    border: 1px solid #7C8894;
    border-radius: 5px;
    background: #FFFFFF;
    color: #4A5966;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.lste-modal .lste__help:hover {
    background: #EEF3F7;
    color: #1F2933;
}

.lste-modal .lste__th .lste__help {
    width: 18px;
    height: 18px;
    margin-left: 4px;
    font-size: 10px;
}

.lste-modal .lste__help--open {
    border-color: #0E5F6B;
    background: #DDECEE;
    color: #0E5F6B;
}

/* ----------------------------------------------------------------------------------------------
   Teil A: die Item-Liste -- eine Sortierliste (<ul>/<li>) mit Griff; Kopfzeile (`.lste__th`) und
   Zeile (`.lste__cell`) teilen sich dieselben Spaltenbreiten.
   ---------------------------------------------------------------------------------------------- */

.lste-modal .lste__table {
    width: 100%;
    margin: 0;
}

.lste-modal .lste__head {
    display: flex;
    align-items: center;
    padding: 5px 6px;
    border-bottom: 1px solid #DCE2E8;
    color: #5F6A76;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.lste-modal .lste__rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lste-modal .lste__item {
    margin: 0;
    padding: 3px 6px;
    border-bottom: 1px solid #E8EBEE;
    list-style: none;
    background: #FFFFFF;
}

.lste-modal .lste__item-main {
    display: flex;
    align-items: center;
}

/* Die fuenf Spalten -- dieselben Werte oben wie unten. */
.lste-modal .lste__th--grip,
.lste-modal .lste__cell--grip {
    flex: 0 0 20px;
    width: 20px;
}

.lste-modal .lste__th--key,
.lste-modal .lste__cell--key {
    flex: 0 0 30%;
    width: 30%;
    margin-right: 6px;
}

.lste-modal .lste__th--text,
.lste-modal .lste__cell--text {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 6px;
}

.lste-modal .lste__th--use,
.lste-modal .lste__cell--use {
    flex: 0 0 54px;
    width: 54px;
}

.lste-modal .lste__th--tools,
.lste-modal .lste__cell--tools {
    flex: 0 0 26px;
    width: 26px;
    text-align: right;
}

.lste-modal .lste__key,
.lste-modal .lste__text {
    width: 100%;
    padding: 3px 5px;
    border-radius: 3px;
}

/* Die Ablehnung steht im selben <li> wie die Zeile -- eingerueckt auf Hoehe der Eingaben. */
.lste-modal .lste__error--row {
    margin: 0 0 1px 20px;
}

/* Die Sichtbarkeit der Tastatur-Ansage: nur fuer Vorleser (Live-Region ohne id). */
.lste-modal .lste__live {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.lste-modal .lste__grip:focus {
    outline: 2px solid #14707F;
    outline-offset: 1px;
}

/* `forcePlaceholderSize: true` setzt die Hoehe inline; die hier ist nur der Rueckfall. */
.lste-modal .design__item--placeholder {
    margin: 0;
    height: 30px;
    border: 1px dashed #0E5F6B;
    border-radius: 6px;
    background: #F2F9F9;
    list-style: none;
}

.lste-modal .lste__input--error {
    border-color: #B03A2E;
    background: #FBE6E3;
}

/* Die sichtbare Marke am gesperrten Schluessel (Plan §5.8): Schloss + Zahl der Werte, klickbar
   (zeigt die Fundstellen). */
.lste-modal .lste__use {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    margin: 0;
    padding: 0 8px;
    border: 0;
    border-radius: 11px;
    background: #FBEBCD;
    color: #7A4A00;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.lste-modal .lste__use svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

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

.lste-modal .lste__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 0;
}

/* ----------------------------------------------------------------------------------------------
   Teil A: die Schnellanlage
   ---------------------------------------------------------------------------------------------- */

.lste-modal .lste__quick {
    display: none;
    margin: 8px 0 0;
    padding: 8px 10px;
    border: 1px solid #E4E9ED;
    border-radius: 8px;
    background: #FBFCFD;
}

.lste-modal .lste__quick-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 6px;
}

.lste-modal .lste__quick-title {
    margin-right: auto;
    padding-right: 16px;
    color: #2C3A47;
    font-weight: 700;
}

.lste-modal .lste__quick-head .lste__label {
    min-width: 0;
}

/* Die Box waechst mit ihrem Inhalt (growQuick()); hier stehen die Grenzen. */
.lste-modal .lste__quick-text {
    width: 100%;
    min-height: 100px;
    max-height: 340px;
    padding: 5px 6px;
    overflow-y: auto;
    resize: none;
    font-family: Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    line-height: 1.45;
}

.lste-modal .lste__quick-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
}

/* ----------------------------------------------------------------------------------------------
   Teil B: die eigene Listendefinition. Die Huelle `.tdef-source` gehoert dem Tabellen-Editor
   (expertWrap() schaltet ihr `display`) -- hier bekommt sie nur Abstand und Breite.
   ---------------------------------------------------------------------------------------------- */

.lste-modal .tdef-source {
    margin: 0 0 8px;
}

.lste-modal .lste__sql {
    width: 100%;
    padding: 5px 6px;
    font-family: Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    line-height: 1.45;
}

/* ----------------------------------------------------------------------------------------------
   Meldungen: Ablehnungen an den Zeilen, Warnungen zwischen Rumpf und Fuss
   ---------------------------------------------------------------------------------------------- */

.lste-modal .lste__error {
    display: none;
    margin: 2px 0;
    color: #B03A2E;
    font-size: 11.5px;
    font-weight: 600;
}

.lste-modal .lste__warn {
    display: none;
    flex: 0 0 auto;
    margin: 0;
    padding: 9px 18px;
    border-top: 1px solid #E8EBEE;
    background: #FBEBCD;
    color: #7A4A00;
    font-size: 11.5px;
}

.lste-modal .lste__warn-line {
    margin: 0 0 2px;
}

/* ----------------------------------------------------------------------------------------------
   Knoepfe im Dialog: die Optik kommt aus `.dlg-btn` (dlg.css). Nur der Text-Knopf der
   Schnellanlage ist ein Verweis.
   ---------------------------------------------------------------------------------------------- */

.lste-modal .lste__btn--text {
    margin: 0;
    padding: 2px 4px;
    border: 0;
    background: transparent;
    color: #0E5F6B;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.lste-modal .lste__btn--text:hover {
    color: #0B4F59;
}

/* ----------------------------------------------------------------------------------------------
   Der Knopf, der den Dialog oeffnet (Browser-Rueckmeldung zu 09_053, Punkte 1 und 2).

   Er steht in der MASKE, nicht im Dialog, und traegt ein Bleistift-Symbol. Zwei Traeger, zwei
   Wege: im eCRF-Fenster gewinnt `.design-mask .design__btn.design__btn--icon` (crf-design.css,
   0,3,0); der Studien-Editor laedt crf-design.css gar nicht -- dort tragen DIESE Regeln die Optik.
   ---------------------------------------------------------------------------------------------- */

.lste-launch {
    display: inline-block;
    width: 28px;
    margin: 0 0 0 6px;
    padding: 4px 0;
    vertical-align: middle;
    border: 1px solid #7C8894;
    border-radius: 6px;
    background: #FFFFFF;
    color: #2C3A47;
    font: inherit;
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
    cursor: pointer;
}

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

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

/* Schmale Fenster: die Beschriftung ueber der Eingabe. */
@media (max-width: 700px) {
    .lste-modal .lste__lists,
    .lste-modal .lste__name,
    .lste-modal .lste__ownname {
        width: 100%;
    }
}