/* Sparsam und ohne Rahmenwerk: Das Interface ist intern und soll lesbar sein,
   nicht huebsch. Was hier fehlt, fehlt absichtlich. */

/*
 * Seit 2026-09-30 kommen Seitengeruest, Navigation und Liste/Detail aus
 * airside-web (/airside-web/airside-web.css, vorher geladen). Hier steht nur
 * noch, was Steward eigen ist.
 *
 * Fest hell: Die Farben unten sind feste Hellwerte. Im dunklen Modus von
 * airside-web staenden sie als helle Flaechen mit heller Schrift da.
 * Aufheben, sobald sie auf die Variablen von airside-web umgestellt sind.
 */
:root {
    color-scheme: light;
    --rand: #d0d4d8;
    --gedaempft: #5b6470;
    --warnung: #8a5a00;
    --fehler: #a02020;
    font-family: system-ui, sans-serif;
}

.platzhalter { color: var(--gedaempft); }

/* Das Bedienmuster: Der Wert und sein Eingabefeld stehen an derselben Stelle. */
.feld { display: inline-flex; align-items: center; gap: .5rem; }
.feld.wird-bearbeitet { outline: 2px solid var(--rand); outline-offset: 2px; }
.feld-eingabe { font: inherit; padding: .15rem .35rem; }
.feld-fehler { color: var(--fehler); font-size: .85rem; }

.warnung { color: var(--warnung); }
.fehler { color: var(--fehler); }
.hinweis { color: var(--gedaempft); }

.anmeldung {
    max-width: 20rem; margin: 6rem auto; display: flex;
    flex-direction: column; gap: .75rem;
}
.anmeldung label { display: flex; flex-direction: column; gap: .25rem; }
.anmeldung input { font: inherit; padding: .35rem; }

.marke-wir { color: var(--gedaempft); }

.detail h1 { font-size: 1.4rem; margin: 0 0 .5rem; }
.detail h2 { font-size: 1rem; margin: 1.5rem 0 .5rem; color: var(--gedaempft); }
.stammdaten { display: grid; grid-template-columns: 8rem 1fr; gap: .4rem 1rem; margin: 0; }
.stammdaten dt { color: var(--gedaempft); }
.stammdaten dd { margin: 0; }

.tenants, .vertraege { list-style: none; margin: 0; padding: 0; }
.tenants li, .vertraege li { padding: .25rem 0; }

.anlegen { display: flex; gap: .5rem; align-items: end; margin-top: .75rem; }
.anlegen label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--gedaempft); }
.anlegen input { font: inherit; padding: .25rem; }

/*
 * Verbundene Personen und ihre Rollen.
 *
 * Vorgabe aus der Spezifikation, keine Gestaltungsfrage: Berechtigende Haken
 * muessen von informativen optisch unterscheidbar sein. Wer Online-Marketing
 * setzt, aendert eine Beschreibung; wer Web-Admin setzt, erteilt Zugriff auf
 * fremde Daten.
 */
ul.warnungen { list-style: none; padding: 0; }
ul.warnungen .warnung { display: block; padding: .4em .6em; margin-bottom: .3em;
    border-left: 4px solid #b26a00; background: #fff6e5; }

ul.rollen { list-style: none; padding: 0; }
ul.rollen li { padding: .3em 0; border-bottom: 1px solid #e5e5e5; }
ul.rollen li.aktiv { background: #eef4ff; }

.marke-rolle, .marke-berechtigt, .marke-info {
    display: inline-block; font-size: .8em; padding: .1em .45em; margin-left: .3em;
    border-radius: .2em; white-space: nowrap;
}
.marke-rolle      { background: #ececec; color: #333; }
.marke-berechtigt { background: #7a1620; color: #fff; font-weight: 600; }
.marke-info       { background: #eef2f6; color: #445; border: 1px solid #ccd4dd; }

.person-rolle { display: flex; gap: 1.5em; align-items: flex-start; }
.person-rolle .haelfte { flex: 1 1 0; min-width: 0; }

fieldset.berechtigt { border: 2px solid #7a1620; background: #fdf4f4; margin: 1em 0; }
fieldset.berechtigt legend { color: #7a1620; font-weight: 700; }
fieldset.informativ { border: 1px solid #ccd4dd; background: #fafbfc; margin: 1em 0; }
fieldset.quellen    { border: 1px solid #ddd; margin: 1em 0; }

/* Je Kanal ein abgesetzter Block: Titel, Quelle und eigener Wert stehen in
   Spalten, damit erkennbar ist, was zusammengehoert. */
fieldset.quellen .kanal { display: grid; grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1fr); gap: .5rem;
    align-items: center; padding: .5rem 0; }
fieldset.quellen .kanal + .kanal { border-top: 1px solid #e5e5e5; }
.kanal-titel { font-weight: 600; }
.kanal label { display: flex; flex-direction: column; gap: .15rem; font-size: .85rem;
    color: var(--gedaempft); }
.kanal select, .kanal input { font: inherit; width: 100%; min-width: 0; box-sizing: border-box; }

h4.berechtigt { color: #7a1620; margin-bottom: .2em; }
h4.informativ { color: #556; margin-bottom: .2em; }
ul.berechtigt li { color: #7a1620; }

label.haken-berechtigt { display: block; padding: .25em 0; font-weight: 600; }
label.haken-berechtigt .wirkung { font-weight: 400; color: #7a1620; font-size: .9em; }
label.haken-info { display: block; padding: .25em 0; }

ul.treffer { list-style: none; padding: 0; }
ul.treffer li.zugeordnet { color: #888; }

/* Gespeichert, aber nicht geschoben — eigene Farbe, damit es niemand fuer
   einen Speicherfehler haelt. */
.push-offen { padding: .6em .8em; border-left: 4px solid #b26a00; background: #fff6e5; }

/*
 * Tab "Tenant": eine Zeile je Person, ein Haken je Flagge.
 *
 * Gesperrte Haken sind geerbt und an der Organisations-Rolle zu aendern;
 * angehakt heisst: gilt.
 */
table.berechtigungen, table.domains { border-collapse: collapse; width: 100%; margin: .8em 0; }
table.berechtigungen th, table.berechtigungen td,
table.domains th, table.domains td {
    border: 1px solid #ddd; padding: .4em .6em; vertical-align: top; text-align: left;
}
table.berechtigungen th { background: #f4f6f8; font-weight: 600; }
table.berechtigungen th.flagge, table.berechtigungen td.flagge { text-align: center; }
table.berechtigungen input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .55; }

/* Wo eine Warnung zu beheben ist -- gedaempft, weil es der zweite Satz ist. */
.warnung .wohin { font-weight: 400; color: #6b4a00; }