/* ===========================================================================
   Werkstatt und Logansicht (/werkstatt, /werkstatt/logs)
   Plan: docs/PLAN-WERKSTATT.md, Abschnitte 2 und 3.

   Alles unter .ld, wie im ganzen Designsystem, und alles mit dem Praefix wk-:
   diese Seite ist die einzige mit Kacheln dieser Art, und ein allgemeiner
   Klassenname waere ein Versprechen, das sie nicht halten kann.

   Die drei Zustandsfarben sind die des Hauses und nur Beigabe, denn der
   Zustand steht auf der Seite immer schon als WORT daneben:
     gefahr   rot     etwas ist kaputt oder fehlt, das den Betrieb traegt
     warnung  gelb    eine Warnung im Log
     offen    gelb    Geld oder ein offener Punkt
     gut      gruen   laeuft
   =========================================================================== */

/* ---- Kopfzeile der Seite ------------------------------------------------ */

.ld .wk-laedt { color: var(--muted); padding: 28px 0; font-size: var(--fs-14) }

.ld .wk-kopf {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 14px;
}

.ld .wk-stand { color: var(--muted2); font-size: var(--fs-12); flex: 1 }

.ld .wrap > .block { margin-bottom: 18px }

/* ---- Kacheln ------------------------------------------------------------ */

.ld .wk-kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
    /* Jede Kachel so hoch wie ihr Inhalt. Auf gleiche Hoehe gezogen (der
       Standard im Raster) bekam die Stripe-Kachel neben der langen Mailliste
       einen handtellergrossen leeren Boden, und leere Flaeche in einem
       umrandeten Kasten sieht aus wie ein Ladefehler. */
    align-items: start;
}

.ld .wk-kachel {
    background: var(--p2);
    border: 1px solid var(--dim);
    border-radius: var(--r-card);
    padding: 14px 15px 15px;
    min-width: 0;
}

.ld .wk-kopfzeile {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 11px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--dim);
}

.ld .wk-kopfzeile > b { font-size: var(--fs-14); flex: 1; min-width: 0 }

/* Das Wort ist die Aussage. Der Farbfleck davor ist nur ein zweiter Kanal. */
.ld .wk-wort {
    font-size: var(--fs-11);
    font-weight: 700;
    letter-spacing: .01em;
    padding: 4px 9px 4px 8px;
    border-radius: var(--r-chip);
    border: 1px solid var(--dim);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.ld .wk-wort::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.ld .wk-wort.gut { color: var(--lime); border-color: rgba(199, 251, 77, .35); background: rgba(199, 251, 77, .07) }
.ld .wk-wort.offen { color: var(--ampel-gelb); border-color: rgba(255, 216, 74, .35); background: rgba(255, 216, 74, .07) }
.ld .wk-wort.gefahr { color: var(--red); border-color: rgba(255, 0, 55, .40); background: rgba(255, 0, 55, .09) }

/* ---- Wertepaare --------------------------------------------------------- */

.ld .wk-werte {
    display: grid;
    grid-template-columns: minmax(110px, 38%) 1fr;
    gap: 5px 12px;
    margin: 0;
    font-size: var(--fs-12);
}

.ld .wk-werte dt { color: var(--muted2); min-width: 0 }
.ld .wk-werte dd { margin: 0; color: var(--text); min-width: 0; overflow-wrap: anywhere }
.ld .wk-werte dd.wk-geld { color: var(--ampel-gelb); font-weight: 600 }
.ld .wk-werte dd a { color: var(--cyan) }
.ld .wk-werte dd code {
    display: inline-block;
    background: var(--field);
    border: 1px solid var(--dim);
    border-radius: var(--r-ctl);
    padding: 5px 8px;
    font-size: var(--fs-11);
    overflow-wrap: anywhere;
}

/* ---- Kleine Listen in einer Kachel (Ereignisse, Mails, Migrationen) ------ */

.ld .wk-liste {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--dim);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ld .wk-liste.offen { border-top-color: rgba(255, 216, 74, .35) }

.ld .wk-ltitel {
    font-size: var(--fs-11);
    color: var(--muted2);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 3px;
}

.ld .wk-lz {
    font-size: var(--fs-12);
    color: var(--text);
    display: flex;
    gap: 8px;
    align-items: baseline;
    overflow-wrap: anywhere;
}

.ld .wk-lz > i { color: var(--muted2); font-style: normal; flex: none; font-variant-numeric: tabular-nums }
.ld .wk-lz > b { font-weight: 600; color: var(--muted) }
.ld .wk-lz.ruhig { color: var(--muted2) }
.ld .wk-lz.gefahr { color: var(--red) }

/* ---- Die eine Tat auf dieser Seite: Testmail ---------------------------- */

.ld .wk-tat {
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid var(--dim);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.ld .wk-tat .hint { margin-top: 0; flex: 1 1 180px }

.ld .wk-fertig {
    margin-top: 9px;
    font-size: var(--fs-12);
    color: var(--lime);
    font-weight: 600;
}

/* ---- Der Tag ------------------------------------------------------------ */

.ld .wk-zahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.ld .wk-zahlen > div {
    background: var(--p2);
    border: 1px solid var(--dim);
    border-radius: var(--r-card);
    padding: 13px 14px;
    min-width: 0;
}

.ld .wk-zahlen > div.offen { border-color: rgba(255, 216, 74, .35) }
.ld .wk-zahlen .n { font-size: var(--fs-24); font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere }
.ld .wk-zahlen > div.offen .n { color: var(--ampel-gelb) }
.ld .wk-zahlen .n > i { font-style: normal; color: var(--muted2); font-size: var(--fs-18) }
.ld .wk-zahlen .t { font-size: var(--fs-11); color: var(--muted2); margin-top: 3px }

/* ---- Wege --------------------------------------------------------------- */

.ld .wk-wege {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.ld .wk-wege a {
    font-size: var(--fs-12);
    color: var(--text);
    text-decoration: none;
    background: var(--field);
    border: 1px solid var(--dim);
    border-radius: var(--r-ctl);
    padding: 8px 12px;
    line-height: 1.1;
}

.ld .wk-wege a:hover { border-color: var(--acc); color: #fff }

.ld .wk-orte { grid-template-columns: minmax(140px, 26%) 1fr }
.ld .wk-orte .hint { margin-top: 5px; display: block }

/* ===========================================================================
   Logansicht
   =========================================================================== */

.ld .wk-logleiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 12px;
}

.ld .wk-logleiste .grp { display: inline-flex; gap: 7px; flex-wrap: wrap; align-items: center; min-width: 0 }

.ld .wk-logleiste .glbl {
    font-size: var(--fs-11);
    color: var(--muted2);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.ld .wk-logleiste .fsel { width: auto; max-width: 100%; border-radius: var(--r-ctl) }

.ld .wk-logleiste input[type="search"] {
    min-height: var(--ctl-h);
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    color: var(--text);
    padding: 0 11px;
    font-size: var(--fs-12);
    min-width: 0;
    width: 170px;
}

.ld .wk-logleiste input[type="search"]:focus { outline: 0; border-color: var(--cyan) }

/* Dieselben Marken wie in der zweiten Navigationszeile (.subtabs .chip), nur
   hier als Knopf. Die Regeln muessen wiederholt werden: das Aussehen von .on
   haengt dort an .subtabs, und ohne diese Zeilen sah man dem Filter nicht an,
   welcher gerade gilt (Gegenprobe 22.09.2026). */
.ld .wk-filter { display: inline-flex; gap: 5px; flex-wrap: wrap }

.ld .wk-filter .chip {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    font-family: var(--font);
    font-weight: 700;
    font-size: var(--fs-12);
    padding: 7px 13px;
    border-radius: var(--r-ctl);
    cursor: pointer;
}

.ld .wk-filter .chip:hover { border-color: var(--acc); color: var(--text) }
.ld .wk-filter .chip.on { background: var(--acc); border-color: var(--acc); color: #fff }

.ld .wk-takt {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-12);
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
}

.ld .wk-logstand {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: var(--fs-11);
    color: var(--muted2);
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--dim);
}

.ld .wk-logstand .wk-zaehler b.gefahr { color: var(--red) }
.ld .wk-logstand .wk-zaehler b.warnung { color: var(--ampel-gelb) }

.ld .wk-leer { color: var(--muted); font-size: var(--fs-13); padding: 22px 0 }
.ld .wk-leer code, .ld .hint code {
    background: var(--field);
    border: 1px solid var(--dim);
    border-radius: var(--r-chip);
    padding: 2px 6px;
    overflow-wrap: anywhere;
}

/* Die Zeilen selbst. Eine eigene Rolle (scroll) statt Seitenscroll: das
   Kopffeld mit Datei, Filter und Suche bleibt dann stehen, waehrend man in
   den Zeilen blaettert. */
.ld .wk-log {
    max-height: 62vh;
    overflow: auto;
    background: var(--spurgrund);
    border: 1px solid var(--dim);
    border-radius: var(--r-card);
    padding: 9px 4px 9px 0;
}

.ld .wk-logzeile {
    display: grid;
    grid-template-columns: 116px 1fr;
    gap: 10px;
    padding: 3px 12px;
    font-size: var(--fs-11);
    line-height: 1.45;
    border-left: 3px solid transparent;
}

.ld .wk-logzeile:hover { background: rgba(255, 255, 255, .03) }
.ld .wk-logzeile .zeit { color: var(--muted2); font-variant-numeric: tabular-nums; white-space: nowrap }

/* Lange Zeilen brechen um, Stapelabbilder behalten ihre Zeilen (pre-wrap). */
.ld .wk-logzeile .txt {
    color: var(--muted);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    min-width: 0;
    font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
}

.ld .wk-logzeile.warnung { border-left-color: var(--ampel-gelb); background: rgba(255, 216, 74, .05) }
.ld .wk-logzeile.warnung .txt { color: var(--ampel-gelb) }
.ld .wk-logzeile.fehler { border-left-color: var(--red); background: rgba(255, 0, 55, .07) }
.ld .wk-logzeile.fehler .txt { color: #FF6B8A }

/* Der Satz unter dem Kasten braucht Luft, sonst klebt er auf dessen Kante. */
.ld .wk-log + .hint { margin-top: 12px; display: block }

/* ---- Schmal (Tablet quer und Telefon) ---------------------------------- */

@media (max-width: 900px) {
    .ld .wk-kacheln { grid-template-columns: 1fr }
    .ld .wk-orte { grid-template-columns: 1fr }
    .ld .wk-orte dt { margin-top: 6px }
}

@media (max-width: 560px) {
    .ld .wk-werte { grid-template-columns: 1fr; gap: 1px 0 }
    .ld .wk-werte dt { margin-top: 7px }
    .ld .wk-logleiste { gap: 9px }
    .ld .wk-logleiste .grp { width: 100% }
    .ld .wk-logleiste .fsel,
    .ld .wk-logleiste input[type="search"] { width: 100%; flex: 1 1 100% }
    .ld .wk-logzeile { grid-template-columns: 1fr; gap: 0 }
    .ld .wk-log { max-height: 58vh }
    .ld .wk-zahlen { grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)) }
}