/* ==============================================================================================
   09_046: Stil des Tabellen-Editors (js/bi/crf/table-definition.js).

   Traeger: die Feld-Maske des Design-Modus (scripts/crfdesign/field.php, eingebunden ueber
   scripts/html_includes.inc.php), der Feldeditor des Studien-Editors (editfield.php in
   scripts/EditorNew/maineditor.php) und die eigene Listendefinition im Listeneditor (09_053,
   Spielart `list`). Deshalb steht JEDE Regel unter `.tdef` -- die Seiten stylen nackte Elemente
   (css/bi/field.css, EditorNew/css/editor.css), eine Regel ohne Praefix waere ein Eingriff in die
   Traegerseite. Die Bausteine der Huelle (`.dlg-grab`, `.dlg-row-x`) gelten nur unter `.dlg`/
   `.dlg-scope`; der Baustein traegt ihre Optik darum hier SELBST, damit er in allen drei Traegern
   gleich aussieht.

   09_075 (P5b, Plan §5.4, Auftrag 09_075b §9.10): drei Spalten -- Liste · `›`/`‹` (je 30 px) ·
   Liste; Marken statt `✓`; Griff als Knopf mit 2x3-Punkten; Fusszeile UNTER beiden Listen mit
   Linie; „Expertenansicht (JSON)“ ist ein Knopf, kein blauer Link. Farben aus den Tokens der
   Huelle (css/bi/dlg/dlg.css): Tinte #2C3A47, gedaempft #5F6A76, Rahmen bedienbar #7C8894,
   Kontur #D6DEE5/#E4E9ED, gewaehlt #DDECEE/#0E5F6B, Fokus #14707F. Das fruehere Blau `#007bff`
   ist entfallen.
   ============================================================================================== */

.tdef {
    box-sizing: border-box;
    margin: 0 0 8px;
    font-size: 12.5px;
    line-height: 1.4;
    color: #2C3A47;
}

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

/* ---- Kopf: Formular ------------------------------------------------------------------------ */
.tdef__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0 0 12px;
}

.tdef__label {
    display: inline-block;
    color: #2C3A47;
}

/* 09_053: die Wertequelle der Listen-Spielart im Kopf -- reine ANZEIGE (geaendert wird `SRC` nur
   in der Expertenansicht). Kein `display: none` hier: renderSource() blendet die Zeile mit einem
   geleerten inline-display wieder ein, das auf diese Regel zurueckfaellt. */
.tdef__src {
    display: inline-block;
    color: #5F6A76;
    font-style: italic;
}

.tdef .tdef__form,
.tdef .tdef__order {
    display: inline-block;
    max-width: 100%;
    height: 30px;
    margin: 0;
    padding: 0 8px;
    border: 1px solid #7C8894;
    border-radius: 6px;
    background: #fff;
    color: #2C3A47;
    font: inherit;
    font-size: 12.5px;
}

.tdef .tdef__form {
    width: 420px;
}

/* Sortierung: so breit wie ihr Text, nicht wie die Zeile (Auftrag 09_075b §7.1). */
.tdef .tdef__order {
    width: max-content;
}

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

.tdef__hint {
    margin: 0 0 10px;
    padding: 8px 11px;
    border-radius: 6px;
    background: #FBEBCD;
    color: #7A4A00;
}

/* ---- Rumpf: Liste · Knoepfe · Liste ---------------------------------------------------------- */
.tdef__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
}

.tdef__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 330px;
    overflow: hidden;
    border: 1px solid #E4E9ED;
    border-radius: 8px;
    background: #fff;
}

.tdef__title {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 7px;
    border-bottom: 1px solid #E4E9ED;
    color: #5F6A76;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.tdef__title > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.tdef__count {
    flex: 0 0 auto;
    color: #2C3A47;
}

.tdef .tdef__filter {
    display: block;
    flex: 0 0 auto;
    width: calc(100% - 20px);
    height: 30px;
    margin: 8px 10px;
    padding: 0 9px;
    border: 1px solid #7C8894;
    border-radius: 6px;
    background: #fff;
    color: #2C3A47;
    font: inherit;
    font-size: 12.5px;
}

.tdef .tdef__filter::placeholder {
    color: #5F6A76;
}

.tdef__list {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: auto;
    list-style: none;
    background: #fff;
}

.tdef__list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Die Knoepfe zwischen den Listen: senkrecht in der Mitte. */
.tdef__move {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

/* `.tdef__list .tdef__group` und `.tdef__list .tdef__item` (0,2,0), nicht `.tdef__group` allein:
   die Regel `.tdef__list li { padding: 0 }` darueber wiegt 0,1,1 und nahm den Zeilen sonst den
   Einzug (Bugfix 2026-09-17: die Schrift klebte am linken Rand). */
.tdef__list .tdef__group {
    padding: 8px 12px 3px;
    background: #FBFCFD;
    color: #5F6A76;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.tdef__list .tdef__item {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    min-height: 30px;
    padding: 4px 12px;
    border-bottom: 1px solid #F0F3F5;
    cursor: pointer;
    outline: none;
}

.tdef__list .tdef__item:hover {
    background: #F8FAFB;
}

.tdef__text {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tdef__fid {
    color: #5F6A76;
    font-family: Consolas, "Courier New", monospace;
    font-size: 11.5px;
}

/* Die Marke „in der Tabelle“, „ohne Wert“, „zyklisch“ (09_075) -- der Grund, nicht nur ein Haken. */
.tdef__mark {
    flex: 0 0 auto;
    color: #5F6A76;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

/* Links gewaehlt (Klick oder Tastatur). */
.tdef__list .tdef__item--picked,
.tdef__list .tdef__item--picked:hover {
    background: #DDECEE;
    color: #0E5F6B;
    box-shadow: inset 3px 0 0 #0E5F6B;
}

/* Schon in der Tabelle / nicht waehlbar: gedaempft, aber lesbar (#5F6A76 auf Weiss 5.51:1),
   gesperrt auf #F7F9FA mit Schrift #7C8894 wie die gesperrte Option (E10). */
.tdef__list .tdef__item--chosen {
    color: #5F6A76;
    cursor: default;
}

.tdef__list .tdef__item--locked,
.tdef__list .tdef__item--locked:hover {
    background: #F7F9FA;
    color: #7C8894;
    cursor: not-allowed;
}

.tdef__list .tdef__item--locked .tdef__fid {
    color: #7C8894;
}

.tdef__item--unknown .tdef__text {
    color: #B03A2E;
    font-family: Consolas, "Courier New", monospace;
}

/* Rechts: die Spalten der Tabelle -- Griff · Text · Kreuz. */
.tdef__list--chosen .tdef__item {
    min-height: 40px;
    padding: 6px 8px 6px 6px;
    cursor: default;
}

/* Rechts markiert (Klick oder Tastatur) -- Ziel von `‹` und Entf. */
.tdef__list .tdef__item--sel,
.tdef__list .tdef__item--sel:hover {
    background: #DDECEE;
    box-shadow: inset 3px 0 0 #0E5F6B;
}

/* Tastaturfokus auf einer Zeile oder der Liste selbst. */
.tdef__list:focus,
.tdef__list .tdef__item:focus {
    outline: 2px solid #14707F;
    outline-offset: -2px;
}

/* ---- Griff und Kreuz (Auftrag 09_075b §7.5), eigenstaendig unter `.tdef` ------------------- */
.tdef .tdef__grip {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #7C8894;
    cursor: grab;
    -webkit-appearance: none;
    appearance: none;
}

.tdef .tdef__grip:hover {
    color: #1F2933;
}

.tdef .tdef__grip svg {
    width: 8px;
    height: 14px;
    fill: currentColor;
}

.tdef .tdef__remove {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    border: 1px solid #D6DEE5;
    border-radius: 5px;
    background: #fff;
    color: #5F6A76;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.tdef .tdef__remove:hover {
    border-color: #B03A2E;
    background: #FBE6E3;
    color: #B03A2E;
}

.tdef .tdef__remove svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

/* ---- Knoepfe ------------------------------------------------------------------------------- */
.tdef .tdef__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #7C8894;
    border-radius: 6px;
    background: #fff;
    color: #2C3A47;
    font: inherit;
    font-size: 12.5px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.tdef .tdef__btn:hover {
    border-color: #4C5A67;
    background: #EEF3F7;
}

.tdef .tdef__btn[disabled] {
    border-color: #D6DEE5;
    background: #F7F9FA;
    color: #7C8894;
    cursor: not-allowed;
}

/* `›` und `‹` -- je 30 px im Quadrat. */
.tdef .tdef__arrow {
    width: 30px;
    padding: 0;
    font-size: 17px;
}

/* Die Expertenansicht ist offen: der Knopf zeigt es (aria-pressed). */
.tdef .tdef__expert[aria-pressed="true"] {
    border-color: #0E5F6B;
    background: #DDECEE;
    color: #0E5F6B;
}

.tdef .tdef__btn:focus,
.tdef .tdef__grip:focus,
.tdef .tdef__remove:focus,
.tdef .tdef__form:focus,
.tdef .tdef__order:focus,
.tdef .tdef__filter:focus {
    outline: 2px solid #14707F;
    outline-offset: 1px;
}

.tdef__empty {
    padding: 14px 12px;
    color: #5F6A76;
}

/* ---- Fusszeile unter beiden Listen --------------------------------------------------------- */
.tdef__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 14px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid #E4E9ED;
}

.tdef__spacer {
    flex: 1 1 auto;
}

.tdef__extra {
    display: inline-block;
    margin-left: 14px;
}

.tdef__extra:empty {
    display: none;
}

/* Die uebernommene Zeile des Traegers (Design-Maske: `.design__row`, „Zeilen auswaehlbar“ als
   `.dlg-seg--bi`) als Inline-Paar Beschriftung + Schalter; die Regeln der Maske (Flex-Zeile,
   Beschriftung 190 px) treten zurueck. */
.design-mask .tdef__extra .design__row {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.design-mask .tdef__extra .design__label {
    width: auto;
    margin-right: 8px;
    padding: 0;
}

/* Die Ansage fuer Tastaturbedienung -- nur fuer Vorleseprogramme. */
.tdef__live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 700px) {
    .tdef .tdef__form {
        width: 100%;
    }

    .tdef__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .tdef__move {
        flex-direction: row;
        justify-content: center;
    }
}

/* Die modale Rueckfrage (Formularwechsel bei bestehenden Spalten) ist seit 09_075 der blockierende
   Dialog der Huelle (window.dlgBlock, css/bi/dlg/dlg.css) -- `.tdef-modal` ist entfallen. */

/* ----------------------------------------------------------------------------------------------
   Drag & Drop (Browser-Rueckmeldung 2026-09-17): Zeilen der rechten Liste am Griff ziehen (die
   ganze Zeile ist draggable), Felder von links an eine Position ziehen. Die Einfuegemarke ist
   eine Linie ueber der Zielzeile, unter der letzten Zeile ein Fuss der Liste (09_075: Teal statt
   des frueheren Blaus).
   ---------------------------------------------------------------------------------------------- */
.tdef .tdef__list--available .tdef__item[draggable="true"] {
    cursor: grab;
}

.tdef .tdef__item--dragging {
    opacity: 0.45;
}

.tdef .tdef__item--drop-before {
    box-shadow: inset 0 2px 0 0 #0E5F6B;
}

.tdef .tdef__list--chosen.tdef__list--drop-end {
    box-shadow: inset 0 -3px 0 0 #0E5F6B;
}

/* ----------------------------------------------------------------------------------------------
   Die Expertenansicht als CodeMirror (Browser-Rueckmeldung 2026-09-17). `body` davor, weil das
   Buendel sein Stylesheet nach den <link>s einbettet und bei gleicher Spezifitaet gewaenne; in der
   Design-Maske sticht die Regel zudem `.design-mask .CodeMirror` (540px der JavaScript-Reiter).
   ---------------------------------------------------------------------------------------------- */
body .tdef__editor.CodeMirror,
body .design-mask .tdef__editor.CodeMirror {
    height: 240px;
    border: 1px solid #7C8894;
    border-radius: 6px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    line-height: 1.45;
}