/* SQL-Baukasten (src/SqlBaukasten.php, assets/js/sqlbaukasten.js).
 *
 * Steht an zwei Orten: in der Quizkarte und auf Einfuehrungsfolien. Die
 * Quizkarte ist immer dunkel; auf der Folie bekommt der Baukasten deshalb
 * seine eigene dunkle Buehne (.sb-buehne) - so gelten ueberall dieselben
 * Farben, gleich ob die Seite hell oder dunkel steht.
 */

/* Eine Farbe je Klausel: SELECT blau, FROM gelb, WHERE violett, ORDER BY
   rosa. Sie zeigt, was wozu gehoert - die Zeile der Klausel, alles, was
   darin steht, ihr Baustein in der Leiste und ihre Zeile in der Vorschau
   tragen dieselbe Farbe. Gruen bleibt der markierten Stelle vorbehalten.
   Die Farbe ist Beigabe: Jede Zeile beginnt mit dem Wort der Klausel. */
[data-sqlbaukasten] {
    --sb-select: #8ec5ff; --sb-from: #f3cf7a; --sb-where: #c9a8ff; --sb-order_by: #ff9db0; --sb-limit: #ffb86b;
    --sb-rand: var(--rand, rgba(255, 255, 255, .2));
}
.sb-k-select { --sb-k: var(--sb-select); }
.sb-k-from { --sb-k: var(--sb-from); }
.sb-k-where { --sb-k: var(--sb-where); }
.sb-k-order_by { --sb-k: var(--sb-order_by); }
.sb-k-limit { --sb-k: var(--sb-limit); }
.sb-ziele { margin: 0 0 .9rem; padding: .6rem .8rem; border-left: 3px solid var(--sb-rand); background: rgba(255, 255, 255, .04); border-radius: 0 6px 6px 0; }
.sb-ziele-titel { margin: 0 0 .25rem; font-weight: 600; font-size: .9rem; }
.sb-ziele ul { margin: 0; padding-left: 1.2rem; font-size: .9rem; }

.sb-kasten { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; margin-bottom: .75rem; }
@media (min-width: 900px) {
    .sb-kasten { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; }
}
.sb-leiste, .sb-arbeit {
    padding: .7rem .75rem;
    border: 1px solid var(--sb-rand);
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
}
.sb-arbeit { background: #0f1420; }
.sb-sorte + .sb-sorte { margin-top: .7rem; }
.sb-sorte-titel { margin: 0 0 .3rem; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.sb-reihe { display: flex; flex-wrap: wrap; gap: .4rem; }

.sb-stein {
    min-height: 2.25rem;
    padding: .3rem .65rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88rem;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .25);
    border-left: 4px solid var(--sb-farbe, rgba(255, 255, 255, .5));
    border-radius: 6px;
}
.sb-stein, .sb-klausel > .sb-wort { user-select: none; -webkit-user-select: none; }
.sb-leiste .sb-stein, .sb-flaeche .sb-stein[data-zug].sb-name, .sb-flaeche .sb-stein[data-zug].sb-wert,
.sb-sortierung .sb-stein.sb-zeichen, .sb-klausel > .sb-wort { cursor: grab; }
/* Der gezogene Baustein haengt am body und folgt dem Zeiger */
.sb-geist {
    position: fixed;
    z-index: 2000;
    margin: 0;
    padding: .3rem .65rem;
    transform: translate(-50%, -60%) rotate(-2deg);
    pointer-events: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88rem;
    font-weight: 600;
    color: #fff;
    background: #1f2a3d;
    border: 1px solid rgba(255, 255, 255, .5);
    border-left: 4px solid #fff;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}
body.sb-zieht-gerade, body.sb-zieht-gerade * { cursor: grabbing !important; }
/* Waehrend des Ziehens: jede Stelle, an die der Baustein passt */
.sb-flaeche .sb-moeglich { color: #fff; border-color: #7ee2b8; background: rgba(126, 226, 184, .12); }
.sb-klausel.sb-vor { box-shadow: 0 -3px 0 #7ee2b8; }
.sb-klausel.sb-nach { box-shadow: 0 3px 0 #7ee2b8; }
.sb-leiste .sb-stein:hover:not(:disabled) { background: rgba(255, 255, 255, .18); }
.sb-stein:disabled { opacity: .4; cursor: default; }
.sb-stein.sb-zieht { opacity: .45; }
/* In der Leiste traegt jede Sorte die Farbe der Klausel, in die sie
   gehoert: Tabellen gelb wie FROM, Werte und Vergleiche violett wie WHERE,
   ASC und DESC rosa wie ORDER BY. Spalten passen in mehrere Klauseln und
   tragen einen Streifen aus allen (assets/js/sqlbaukasten.js setzt ihn).
   Auf der Flaeche erbt jeder Baustein die Farbe seiner Zeile. */
.sb-leiste .sb-stein[class*="sb-k-"], .sb-leiste .sb-sorte[class*="sb-k-"] .sb-stein, .sb-flaeche .sb-stein { --sb-farbe: var(--sb-k); }
.sb-leiste .sb-sorte[class*="sb-k-"] .sb-sorte-titel { color: var(--sb-k); }
.sb-leiste .sb-mehrfarbig .sb-stein {
    border-left-color: transparent;
    background-color: transparent;
    background-image: var(--sb-streifen), linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08));
    background-size: 4px 100%, auto;
    background-position: left top;
    background-repeat: no-repeat, repeat;
    background-origin: border-box;
    background-clip: border-box;
}
.sb-leiste .sb-mehrfarbig .sb-stein:hover:not(:disabled) {
    background-color: transparent;
    background-image: var(--sb-streifen), linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, .18));
}
.sb-leiste .sb-stein[class*="sb-k-"] { color: var(--sb-k); font-weight: 600; }
.sb-stein:focus-visible, .sb-platz:focus-visible, .sb-weg:focus-visible, .sb-knopf:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.sb-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-bottom: .6rem; }
.sb-kopf-titel { margin-right: auto; font-weight: 600; font-size: .9rem; }
/* Die leere Flaeche braucht Hoehe: Dorthin wird der erste Baustein gezogen */
.sb-flaeche { min-height: 9rem; }
.sb-klauseln { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.sb-klausel {
    display: grid;
    grid-template-columns: 6.2rem minmax(0, 1fr) auto;
    gap: .5rem;
    align-items: start;
    padding: .45rem .5rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-left: 4px solid var(--sb-k, rgba(255, 255, 255, .14));
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
    background: color-mix(in srgb, var(--sb-k, #fff) 9%, transparent);
    border-color: color-mix(in srgb, var(--sb-k, #fff) 38%, transparent);
    border-left-color: var(--sb-k, rgba(255, 255, 255, .14));
}
/* Fester Bereich: ohne Werkzeug, das Wort laesst sich nicht greifen */
.sb-klausel.sb-bereich { grid-template-columns: 6.2rem minmax(0, 1fr); min-height: 3.4rem; }
.sb-klausel.sb-bereich > .sb-wort { cursor: default; }
.sb-kannleer { font-size: .78rem; color: rgba(255, 255, 255, .6); }
.sb-klausel.sb-ende { display: block; border: 1px dashed rgba(255, 255, 255, .14); background: none; }
.sb-klausel > .sb-wort {
    padding: .35rem .5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88rem;
    font-weight: 600;
    color: var(--sb-k);
    border-radius: 4px;
    background: rgba(0, 0, 0, .22);
}
.sb-klausel[data-typ] .sb-platz:not(.sb-aktiv):not(.sb-moeglich):not(.sb-ziel) { border-color: color-mix(in srgb, var(--sb-k, #fff) 55%, transparent); }
.sb-inhalt { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-width: 0; }
.sb-werkzeug { display: flex; gap: .2rem; }
.sb-knopf, .sb-weg {
    min-width: 2rem;
    min-height: 2rem;
    padding: 0 .35rem;
    color: rgba(255, 255, 255, .8);
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    line-height: 1;
}
.sb-knopf:hover:not(:disabled), .sb-weg:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, .12); }
.sb-knopf:disabled { opacity: .3; }
.sb-gesetzt { display: inline-flex; align-items: center; }
.sb-gesetzt .sb-weg { min-width: 1.6rem; margin-left: -.1rem; }

.sb-platz {
    min-height: 2.25rem;
    padding: .3rem .7rem;
    font-size: .82rem;
    color: rgba(255, 255, 255, .78);
    background: none;
    border: 1px dashed rgba(255, 255, 255, .45);
    border-radius: 6px;
}
.sb-platz:hover:not(:disabled) { color: #fff; border-color: #fff; }
/* Die markierte Stelle: dorthin kommt der naechste Baustein */
.sb-aktiv, .sb-ziel {
    color: #fff;
    border-color: #7ee2b8;
    border-style: solid;
    box-shadow: 0 0 0 2px rgba(126, 226, 184, .45);
}
.sb-gruppe {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    padding: .25rem .35rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
}
.sb-gruppe { border-color: color-mix(in srgb, var(--sb-k, #fff) 30%, transparent); }
.sb-logik { border-style: dashed; }

.sb-status { min-height: 1.2rem; margin: .45rem 0 0; font-size: .85rem; color: #ffd8a8; }
.sb-vorschau-titel { margin: .6rem 0 .25rem; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.sb-vorschau {
    margin: 0;
    padding: .6rem .75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9rem;
    color: #fff;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 6px;
    background: rgba(255, 255, 255, .04);
}
.sb-vorschau.sb-unfertig { color: rgba(255, 255, 255, .7); }
/* Je Klausel eine Zeile in ihrer Farbe */
/* Die Umbrueche zwischen den Zeilen stehen im Text (zum Kopieren), gezeigt
   werden sie nicht noch einmal - jede Zeile ist schon ein Block. */
.sb-vorschau:has(.sb-zeile) { white-space: normal; }
.sb-zeile { display: block; padding-left: .55rem; white-space: pre-wrap; border-left: 3px solid var(--sb-k, transparent); }
.sb-zeile + .sb-zeile { margin-top: .15rem; }
.sb-zustand { margin: .4rem 0 0; font-size: .88rem; color: rgba(255, 255, 255, .8); }
.sb-zustand-gut { color: #7ee2b8; }
.sb-zustand-fehler { color: #ffb4a8; }
.sb-fertig .sb-weg, .sb-fertig .sb-werkzeug, .sb-fertig .sb-platz, .sb-fertig .sb-kopf button { display: none; }

@media (max-width: 575px) {
    .sb-klausel { grid-template-columns: minmax(0, 1fr) auto; }
    .sb-klausel > .sb-wort { grid-column: 1; }
    .sb-inhalt { grid-column: 1 / -1; grid-row: 2; }
}


/* ---------------------------------------------------------------- Urteil */

.sb-ergebnis { margin-bottom: .75rem; }
.sb-urteil { padding: .7rem .8rem; border: 1px solid var(--sb-rand); border-radius: 8px; background: rgba(255, 255, 255, .04); }
.sb-urteil-titel { margin: 0 0 .35rem; font-weight: 600; }
.sb-urteil-liste { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .45rem; }
.sb-urteil-liste li { display: grid; grid-template-columns: 1.3rem 1fr; column-gap: .4rem; align-items: start; }
.sb-ok .bi { color: #7ee2b8; }
.sb-nein .bi { color: #ff8f80; }
.sb-urteil-text { overflow-wrap: anywhere; }
.sb-urteil-klein { margin: .35rem 0 .15rem; font-size: .8rem; color: rgba(255, 255, 255, .7); }
.sb-urteil-code {
    margin: 0;
    padding: .5rem .65rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem;
    color: #fff;
    white-space: pre-wrap;
    border-radius: 6px;
    background: rgba(0, 0, 0, .3);
}
.sb-urteil-erklaerung { margin: .5rem 0 0; }

.sb-kopfknopf {
    padding: .2rem .55rem;
    font-size: .8rem;
    color: rgba(255, 255, 255, .85);
    background: none;
    border: 1px solid var(--sb-rand);
    border-radius: 6px;
}
.sb-kopfknopf:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, .1); }
.sb-kopfknopf:disabled { opacity: .4; }
.sb-kopfknopf:focus-visible, .sb-pruefen:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ----------------------------------------------------------- Auf der Folie */

.sb-folie .sb-buehne {
    margin-top: .75rem;
    padding: 1rem;
    color: #fff;
    border-radius: 10px;
    background: #12201b;
}
.sb-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.sb-pruefen {
    padding: .45rem 1.1rem;
    font-weight: 600;
    color: #0c1a14;
    background: #7ee2b8;
    border: 0;
    border-radius: 6px;
}
.sb-pruefen:hover { background: #9aecc9; }
.sb-versuch { font-size: .85rem; color: rgba(255, 255, 255, .7); }

/* Knopf zum Bezugsmedium: rechts ueber der Frage, wie bei den anderen Folienaufgaben */
.sb-folie > .sb-bezug { float: right; margin: 0 0 .4rem .75rem; }