/* =========================================================================
   Der lozi-Look für die öffentlichen Seiten: das Seitengerüst, das sie alle
   teilen (Kopfleiste, Menü, Fußzeile, Hintergrund) und die Inhalte der
   Seiten, die Besuchende ohne Konto zu sehen bekommen.

   ---- Wo das gilt -------------------------------------------------------

   Eingegrenzt wird über Klassen, die Indico selbst vergibt — es braucht dafür
   keine eigenen Templates. Jede kommt aus dem `page_class`-Block der
   jeweiligen Vorlage und benennt genau einen Seitentyp:

   | Klasse                             | Seite                              |
   |------------------------------------|------------------------------------|
   | `.category-container`              | Startseite (Kategorie-Übersicht)   |
   | `.error-box`                       | Fehlerseiten (404, 403, …)         |
   | `.login-page`                      | Anmeldung                          |
   | `.lozi-auth-page`                  | Konto anlegen, Passwort vergessen  |
   | `.fixed-width-standalone-text-page`| Kontakt, Nutzungsbedingungen, Datenschutz |
   | `.search-page`                     | Suche                              |
   | `.category-overview`               | Kategorie-Übersicht (Tag/Woche)    |
   | `.category-calendar-page`          | Kategorie-Kalender                 |

   Eine Erlaubnisliste, keine Verbotsliste — bewusst. Der naheliegende
   Gegenentwurf wäre "alles außer der Verwaltung", also
   `body:not(:has(.management-page))`. Das wäre falsch herum: Indicos
   `layout/base.html` setzt `management-page` als *Vorgabe*, jede Vorlage ohne
   eigenen `page_class`-Block bekommt sie — auch öffentliche. Umgekehrt landete
   jede Seite, die wir nicht kennen, ungefragt im Dunkeldesign. Halb dunkel ist
   schlechter als der Standard; lieber bleibt eine Seite ganz beim Indico-Look,
   bis sie jemand angesehen hat.

   Bewusst nicht dabei, jeweils mit Grund:

   - Event-Seiten (`/event/3/…`): haben ihr eigenes Stylesheet aus
     setup-branding.py. Die Regeln hier würden dagegen arbeiten.
   - Verwaltung und Benutzerbereich (`/user/…`): bleiben beim Indico-Look.
     Die Verwaltung ist Indicos eigenes Werkzeug, das die Orga während der
     Veranstaltung bedienen können muss; sie umzufärben hieße, hunderte
     React-Oberflächen blind zu übermalen.

   Suche, Kategorie-Kalender und -Übersicht standen hier lange als „nicht
   verlinkt, deshalb ausgenommen". Das stimmte nicht: Ein Crawl der Instanz als
   anonymer Besucher erreicht alle drei über das Kategorie-Seitenmenü der
   Startseite. Sie sind jetzt dabei. Ihr Gerüst — Hintergrund, Kopfleiste,
   Karten, Tabellen — ist gesetzt; was Indico darin erst im Browser aus
   React-/Semantic-UI-Komponenten und dem Kalender-Widget zusammenbaut, ist nur
   grob erfasst und gehört einmal angesehen.

   Eine weitere Seite aufzunehmen heißt: ihre Klasse in die `:has()`-Liste
   unten eintragen und ihre Inhalte hier ergänzen.

   Getestet gegen Indico 3.3.12. Nach einem Indico-Update kurz nachsehen, ob
   die Klassennamen noch stimmen.
   ========================================================================= */

/* ---- Seitenhintergrund ------------------------------------------------- */

/* `:has()` nimmt eine Liste: die eine Stelle, an der die Seitentypen oben aus
   der Tabelle stehen. Sie wiederholt sich in jedem Abschnitt — eine Variable
   für Selektoren gibt es in CSS nicht, und ein Präprozessor lohnt für diese
   paar Dateien nicht. Beim Ergänzen einer Seite: überall mitziehen. */
body:has(
    .category-container,
    .error-box,
    .login-page,
    .lozi-auth-page,
    .fixed-width-standalone-text-page,
    .search-page,
    .category-overview,
    .category-calendar-page
  ) {
  background: var(--lozi-bg);
  -webkit-font-smoothing: antialiased;
}

/* ---- Kopfleiste -------------------------------------------------------- */

/* Indico färbt die Kopfleiste mit `div.page-header { background-color: #007cac }`
   ein — dem Indico-Blau. Der `body:has(…)`-Vorspann hebt uns darüber. */
body:has(
    .category-container,
    .error-box,
    .login-page,
    .lozi-auth-page,
    .fixed-width-standalone-text-page,
    .search-page,
    .category-overview,
    .category-calendar-page
  )
  :is(.header, div.page-header) {
  background: var(--lozi-card);
  border-bottom: 1px solid var(--lozi-line);
}

/* Das Logo hat einen hellen Bildhintergrund — auf dunklem Grund braucht es
   dieselbe weiße Platte wie im Kopf der Event-Seiten. */
body:has(
    .category-container,
    .error-box,
    .lozi-auth-page,
    .fixed-width-standalone-text-page,
    .search-page,
    .category-overview,
    .category-calendar-page
  )
  img.header-logo {
  background: #fff;
  border-radius: 10px;
  padding: 6px;
}

/* Sprache und Zeitzone. Die aufklappenden Listen darunter bleiben im
   Indico-Standard (heller Kasten, dunkler Text) — sie sind lesbar, und ein
   halbfertiges Dunkeldesign wäre dort schlechter als der Standard. */
body:has(
    .category-container,
    .error-box,
    .lozi-auth-page,
    .fixed-width-standalone-text-page,
    .search-page,
    .category-overview,
    .category-calendar-page
  )
  .session-bar
  .i-button:not(.label) {
  background: transparent;
  background-image: none;
  border-color: var(--lozi-line2);
  color: var(--lozi-text2);
}

/* Indico baut das obere Menü aus den `--menu-*`-Variablen. Sie umzusetzen ist
   sauberer als die einzelnen Regeln zu überschreiben — und es trifft dieselben
   Werte, die das aufklappende Untermenü verwendet. Deshalb eine deckende
   Farbe statt `transparent`: sonst stünde die Seite hinter dem Menü durch. */
body:has(
    .category-container,
    .error-box,
    .lozi-auth-page,
    .fixed-width-standalone-text-page,
    .search-page,
    .category-overview,
    .category-calendar-page
  )
  #global-menu {
  --menu-background-color: var(--lozi-card);
  --menu-text-color: var(--lozi-text2);
  --menu-text-hover-color: var(--lozi-accent2);
  --menu-background-hover-color: var(--lozi-card2);
  --menu-border-color: var(--lozi-line);
}

/* Brotkrumen-Navigation, z. B. über den Textseiten. */
body:has(
    .category-container,
    .error-box,
    .fixed-width-standalone-text-page,
    .search-page,
    .category-overview,
    .category-calendar-page
  )
  nav.main-breadcrumb {
  background-color: var(--lozi-card2);
  border-bottom: 1px solid var(--lozi-line);
  color: var(--lozi-muted);
}

/* ---- Fußzeile ---------------------------------------------------------- */

/* Der Indico-Footer bleibt stehen; MIT verlangt ihn nicht, wir lassen ihn aus
   Anstand drin. Indico baut seine Farben aus Variablen, deshalb reicht es,
   die umzusetzen. */
body:has(
    .category-container,
    .error-box,
    .login-page,
    .lozi-auth-page,
    .fixed-width-standalone-text-page,
    .search-page,
    .category-overview,
    .category-calendar-page
  )
  footer.footer {
  background: transparent;
  border-top: 1px solid var(--lozi-line);
  --text-secondary-color: var(--lozi-muted);
  --clickable-text-color: var(--lozi-accent);
  --clickable-text-highlight-color: var(--lozi-accent2);
}

/* ---- Startseite: Kategorie-Übersicht ---------------------------------- */

.category-container {
  background: var(--lozi-bg);
  color: var(--lozi-text2);
}

/* Indico legt hier einen hellen Verlauf drüber, nicht nur eine Farbe —
   `background` als Kurzschreibweise räumt beides ab. */
.category-container .category-header {
  background: var(--lozi-card);
  border-bottom: 1px solid var(--lozi-line);
  border-top: 1px solid var(--lozi-line);
}

.category-container .category-title {
  color: var(--lozi-text);
  font-family: var(--lozi-mono);
  letter-spacing: -0.01em;
}

.category-container .category-info,
.category-container .category-info p {
  color: var(--lozi-text2);
  font-family: var(--lozi-sans);
}

.category-container .category-content a {
  color: var(--lozi-accent);
}

.category-container .category-content a:hover {
  color: var(--lozi-accent2);
}

/* Die Monatsüberschriften über der Veranstaltungsliste. */
.category-container .event-list h3 {
  color: var(--lozi-muted);
  border-bottom: 1px solid var(--lozi-line);
  font-family: var(--lozi-mono);
}

.category-container .event-list h3.current-month {
  border-bottom-color: var(--lozi-line2);
}

.category-container .event-list h3.current-month span {
  background-color: var(--lozi-card2);
  color: var(--lozi-text);
  border-bottom: 1px solid var(--lozi-line2);
}

.category-container .event-list li .date {
  color: var(--lozi-muted);
}

.category-container .event-list li .event-icons {
  color: var(--lozi-muted);
}

/* Die Veranstaltungstitel sind die Hauptsache der Seite — sie sollen nicht wie
   ein Link neben vielen aussehen, sondern wie der Einstieg. */
.category-container .event-list li .list-name a {
  --link-color: var(--lozi-text);
  --link-highlight-color: var(--lozi-accent2);
  color: var(--lozi-text);
  font-family: var(--lozi-mono);
}

.category-container .event-list li .list-name a:hover {
  color: var(--lozi-accent2);
}

.category-container #category-toolbar .i-button:not(.label) {
  background: var(--lozi-card2);
  background-image: none;
  border: 1px solid var(--lozi-line2);
  border-radius: 8px;
  color: var(--lozi-text2);
  font-family: var(--lozi-mono);
  text-shadow: none;
}

.category-container #category-toolbar .i-button:not(.label):hover {
  background: var(--lozi-card);
  background-image: none;
  color: var(--lozi-text);
}

/* Das Suchfeld oben rechts setzt Indico erst im Browser zusammen
   (Semantic UI), deshalb die Farben an dessen Klassen. */
.category-container .search-box .ui.input > input,
.category-container .search-box input[type="text"] {
  background: var(--lozi-card2);
  border: 1px solid var(--lozi-line2);
  border-radius: 8px;
  color: var(--lozi-text);
  font-family: var(--lozi-mono);
}

.category-container .search-box input::placeholder {
  color: var(--lozi-muted);
}

/* ---- Textseiten: Kontakt, Nutzungsbedingungen, Datenschutz ------------- */

/* Nur aktiv, wenn in der Indico-Konfiguration hinterlegt — sonst antwortet
   Indico dort mit 404. Die Regeln kosten nichts und sind schon da, falls die
   Seiten später dazukommen. */
.fixed-width-standalone-text-page {
  color: var(--lozi-text2);
  font-family: var(--lozi-sans);
}

.fixed-width-standalone-text-page header h2,
.fixed-width-standalone-text-page header h3 {
  color: var(--lozi-text);
  font-family: var(--lozi-mono);
}

.fixed-width-standalone-text-page a {
  color: var(--lozi-accent);
}

.fixed-width-standalone-text-page a:hover {
  color: var(--lozi-accent2);
}

/* ---- Fehlerseiten ------------------------------------------------------ */

/* Der Kasten mit "Seite nicht gefunden". Steht bei Indico als heller Kasten
   auf weißem Grund, in derselben Form wie der Anmeldekasten. */
.error-box {
  background-color: var(--lozi-card);
  border: 1px solid var(--lozi-line);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  color: var(--lozi-text2);
  font-family: var(--lozi-sans);
}

.error-box h1 {
  color: var(--lozi-text);
  font-family: var(--lozi-mono);
  letter-spacing: -0.01em;
}

.error-box p {
  color: var(--lozi-text2);
}

.error-box a {
  color: var(--lozi-accent);
}

.error-box a:hover {
  color: var(--lozi-accent2);
}

/* ---- Suche, Kategorie-Übersicht, Kategorie-Kalender -------------------- */

/* Diese drei erreichen Besuchende über das Seitenmenü der Startseite. Was
   Indico serverseitig rendert — Kopfzeile, Seitenmenü, Karten, Tabellen —
   steht hier. Die Ergebnisliste der Suche und das Kalenderblatt baut der
   Browser aus Komponenten zusammen; die bekommen Grundflächen, damit sie nicht
   als weißer Block im dunklen Gerüst stehen. */

.search-page,
.category-overview,
.category-calendar-page {
  color: var(--lozi-text);
}

/* Seitenmenü links (Übersicht / Kalender / Demnächst). */
.category-overview-side-menu,
.category-calendar-side-menu,
.layout-side-menu .side-menu {
  background: var(--lozi-card) !important;
  border: 1px solid var(--lozi-line) !important;
  border-radius: 0.75rem !important;
}

.category-overview-side-menu a,
.category-calendar-side-menu a,
.layout-side-menu .side-menu a {
  color: var(--lozi-text2) !important;
}

.category-overview-side-menu a:hover,
.category-calendar-side-menu a:hover,
.layout-side-menu .side-menu a:hover,
.layout-side-menu .side-menu .item.active {
  background: var(--lozi-card2) !important;
  color: var(--lozi-accent2) !important;
}

/* Die Tages-/Wochentabelle der Übersicht. */
.category-overview .category-table,
.category-overview table {
  background: var(--lozi-card2) !important;
  border-color: var(--lozi-line) !important;
  color: var(--lozi-text) !important;
}

.category-overview table th,
.category-overview table td {
  border-color: var(--lozi-line) !important;
  color: var(--lozi-text2) !important;
  background: none !important;
}

.category-overview table a,
.category-calendar-page a,
.search-page a {
  color: var(--lozi-accent) !important;
}

/* Das Kalenderblatt. Der Grundriss kommt aus einem Widget mit eigenen
   Klassennamen — hier stehen nur Flächen und Linien, keine Maße. */
.category-calendar-view,
.category-calendar-view .fc-view-harness,
.category-calendar-view table {
  background: var(--lozi-card2) !important;
  color: var(--lozi-text) !important;
}

.category-calendar-view td,
.category-calendar-view th,
.category-calendar-view .fc-scrollgrid,
.category-calendar-view .fc-scrollgrid td,
.category-calendar-view .fc-scrollgrid th {
  border-color: var(--lozi-line) !important;
}

.category-calendar-view .fc-day-today {
  background: rgba(94, 155, 255, 0.08) !important;
}

.category-calendar-view .fc-col-header-cell-cushion,
.category-calendar-view .fc-daygrid-day-number {
  color: var(--lozi-muted) !important;
}

/* Suchergebnisse (Semantic UI). */
.search-page .ui.segment,
.search-page .ui.card,
.search-page .ui.menu,
.search-page .ui.list > .item {
  background: var(--lozi-card2) !important;
  border-color: var(--lozi-line) !important;
  color: var(--lozi-text) !important;
  box-shadow: none !important;
}

.search-page .ui.header,
.search-page .ui.segment .header {
  color: var(--lozi-text) !important;
}

.search-page .ui.input > input,
.search-page input[type="text"] {
  background: var(--lozi-card) !important;
  border: 1px solid var(--lozi-line2) !important;
  color: var(--lozi-text) !important;
}

.search-page .ui.label,
.search-page .meta {
  color: var(--lozi-muted) !important;
  background: none !important;
}

/* Der Kopf dieser drei Seiten (Titel + Untertitel). */
.search-page .page-header,
.category-overview .page-header,
.category-calendar-page .page-header,
.title-with-actions {
  color: var(--lozi-text) !important;
}

.subtitle-container,
.title-with-actions .subtitle {
  color: var(--lozi-muted) !important;
}