/* ==============================================================================================
   09_051: Stil des Datenlink-Baukastens (js/bi/crf/data-link.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 `.dlink` -- beide Seiten
   stylen nackte Elemente, eine Regel ohne Praefix waere ein Eingriff in die Traegerseite. Werte
   (Rahmen, Radius, Grau, Blau) wie css/bi/crf/table-definition.css. Die fruehere Regel „IE-9-Modus:
   kein `gap`, hoechstens eine flache Media-Query“ ist mit 09_075 entfallen: sie beruhte auf einer
   Fehldeutung des Meta-Tags X-UA-Compatible (wirkt nur im echten Internet Explorer).
   ============================================================================================== */

.dlink {
    box-sizing: border-box;
    margin: 6px 0 4px;
    padding: 8px 10px;
    border: 1px solid #e4e9f0;
    border-radius: 4px;
    background: #f8f9fb;
    font-size: 12px;
    line-height: 1.35;
    color: #212529;
    text-align: left;
}

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

.dlink__title {
    margin: 0 0 6px;
    font-weight: bold;
    color: #495057;
}

/* 09_075 (P5a): die Arten als Schalter in der Form von `.dlg-seg` (css/bi/dlg/dlg.css) -- hier
   eigenstaendig unter `.dlink`, weil der Studien-Editor den Baukasten nicht in einem `.dlg`-Fenster
   zeigt. Aktiv = `aria-pressed="true"` (die Klasse `dlink__kind--active` bleibt fuer den Bestand). */
.dlink .dlink__kinds {
    display: inline-flex;
    flex-wrap: wrap;
    width: max-content;
    max-width: 100%;
    margin: 0 0 8px;
    border: 1px solid #7C8894;
    border-radius: 6px;
    overflow: hidden;
    background: #FFFFFF;
}

.dlink .dlink__kind {
    display: inline-flex;
    align-items: center;
    height: 24px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-right: 1px solid #7C8894;
    border-radius: 0;
    background: #FFFFFF;
    color: #2C3A47;
    font: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.dlink .dlink__kind:last-child {
    border-right: 0;
}

.dlink .dlink__kind:hover {
    background: #EEF3F7;
}

.dlink .dlink__kind[aria-pressed="true"],
.dlink .dlink__kind--active,
.dlink .dlink__kind--active:hover {
    background: #DDECEE;
    color: #0E5F6B;
    font-weight: 700;
}

.dlink .dlink__kind:focus {
    outline: 2px solid #14707F;
    outline-offset: -2px;
}

.dlink__row {
    margin: 0 0 8px;
}

/* Beschriftung UEBER dem Feld (Browser-Rueckmeldung 2026-09-18): die Zeile der Design-Maske ist
   schmal, nebeneinander brach die Auswahl ohnehin um. */
.dlink__row .dlink__label {
    display: block;
    margin: 0 0 3px;
    color: #495057;
}

/* Eine Zeile Bedienelemente: die Zyklusauswahl und ihre Nummer stehen NEBENEINANDER. */
.dlink__line {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 420px;
}

/* field.css/form.css stylen nackte `select`/`input` (220 px, 30 px hoch, margin-bottom 10 px,
   14 px Schrift) -- hier alles zurueckgeholt. */
.dlink .dlink__form,
.dlink .dlink__target,
.dlink .dlink__cycle,
.dlink .dlink__var,
.dlink .dlink__cycle-no {
    display: block;
    box-sizing: border-box;
    height: auto;
    margin: 0;
    padding: 4px 6px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #fff;
    color: #212529;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.4;
    box-shadow: none;
}

.dlink .dlink__form,
.dlink .dlink__target,
.dlink .dlink__cycle,
.dlink .dlink__var {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.dlink .dlink__cycle-no {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 70px;
    flex: 0 0 70px;
    width: 70px;
    margin-left: 6px;
}

/* Die Checkbox buendig links, ohne Einzug einer leeren Beschriftung (Rueckmeldung 2026-09-18). */
.dlink__row--text {
    margin-top: -2px;
}

.dlink .dlink__check {
    display: inline-block;
    margin: 0;
    padding: 0;
    color: #212529;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
}

.dlink .dlink__check input {
    width: auto;
    height: auto;
    margin: 0 5px 0 0;
    vertical-align: middle;
}

.dlink__option--used {
    font-weight: bold;
}

.dlink__note {
    margin: 0 0 6px;
    color: #495057;
}

.dlink__preview {
    margin: 8px 0 0;
    padding: 6px 8px;
    border: 1px solid #d0e2ff;
    border-radius: 4px;
    background: #eef5ff;
    color: #1d3b66;
}

.dlink__sentence {
    display: block;
    margin: 0 0 4px;
}

.dlink__expression .dlink__label {
    display: inline-block;
    margin-right: 6px;
    color: #1d3b66;
}

.dlink .dlink__expert {
    display: inline-block;
    margin: 0 0 0 8px;
    padding: 0;
    border: 0;
    background: none;
    color: #1B4676;
    font: inherit;
    font-size: 11px;
    line-height: 1.4;
    text-decoration: underline;
    cursor: pointer;
    -webkit-appearance: none;
}

.dlink .dlink__code {
    padding: 1px 5px;
    border: 1px solid #d0e2ff;
    border-radius: 3px;
    background: #fff;
    color: #212529;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

.dlink__status {
    margin: 8px 0 0;
    padding: 6px 10px;
    border: 1px solid #ffe08a;
    border-radius: 4px;
    background: #fff8e1;
    color: #6b5200;
}

.dlink__hint {
    margin: 6px 0 0;
    color: #6c757d;
    font-size: 11px;
}

@media (max-width: 700px) {
    .dlink__line {
        max-width: none;
    }
}