/* Leichte Stufe fuer das Innere von OpenSlides im Bild des Landesjugendring
   Saar (28.10.2026, Max: „ohne Sachen umzubauen“). Nur Haut: Grundton,
   Rundungen, Schatten, Kopfleiste, Abstaende. Aufbau, Reihenfolge und
   Funktionen bleiben wie OpenSlides sie liefert. Gilt nur im hellen Thema.
   Schrift: schrift.css. Eingehaengt von /docker-entrypoint.d/40-ljr.sh. */

body.openslides-light-theme {
  /* Rundungen: weich, aber ruhig */
  --mat-card-elevated-container-shape: 14px;
  --mat-card-outlined-container-shape: 14px;
  --mat-card-filled-container-shape: 14px;
  --mat-dialog-container-shape: 18px;
  --mat-menu-container-shape: 12px;
  --mat-select-container-shape: 12px;
  --mat-autocomplete-container-shape: 12px;
  --mat-expansion-container-shape: 12px;
  --mat-bottom-sheet-container-shape: 18px;
  --mat-button-filled-container-shape: 10px;
  --mat-button-outlined-container-shape: 10px;
  --mat-button-protected-container-shape: 10px;
  --mat-button-text-container-shape: 10px;
  --mat-button-tonal-container-shape: 10px;
  --mat-button-toggle-shape: 10px;

  /* Schatten: weich und flach statt drei harter Lagen */
  --mat-card-elevated-container-elevation: 0 1px 2px rgba(40, 37, 29, 0.05), 0 6px 20px rgba(40, 37, 29, 0.06);
  --mat-button-protected-container-elevation-shadow: 0 1px 2px rgba(40, 37, 29, 0.08);
  --mat-button-protected-hover-container-elevation-shadow: 0 2px 8px rgba(40, 37, 29, 0.10);
  --mat-button-protected-focus-container-elevation-shadow: 0 2px 8px rgba(40, 37, 29, 0.10);
  --mat-button-protected-pressed-container-elevation-shadow: 0 1px 2px rgba(40, 37, 29, 0.08);
  --mat-sidenav-container-elevation-shadow: 0 0 40px rgba(40, 37, 29, 0.12);
  --mat-sidenav-container-divider-color: #ece9e1;
}

/* Warmer Grundton wie im Portal statt Grau */
body.openslides-light-theme .background-default,
body.openslides-light-theme .mat-sidenav-content {
  background: #f7f6f2 !important;
}

/* Text etwas luftiger, Schrift kommt aus schrift.css */
body.openslides-light-theme {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Kopfleiste: flach und ruhig, ohne harten Schatten */
body.openslides-light-theme .mat-toolbar.mat-primary,
body.openslides-light-theme os-head-bar .mat-toolbar {
  box-shadow: none !important;
}

/* Karten: feine Kante statt Schattenkasten */
body.openslides-light-theme .mat-mdc-card {
  border: 1px solid #ece9e1;
}

/* Listen und Tabellen: leisere Trennlinien, Zeilen mit sanftem Hover */
body.openslides-light-theme .mat-divider,
body.openslides-light-theme .mat-mdc-list-item,
body.openslides-light-theme .mat-mdc-row,
body.openslides-light-theme .mat-mdc-header-row,
body.openslides-light-theme .scrolling-table-row,
body.openslides-light-theme cdk-row,
body.openslides-light-theme .cdk-row {
  border-color: #ece9e1 !important;
}
body.openslides-light-theme .mat-mdc-row:hover,
body.openslides-light-theme .cdk-row:hover {
  background-color: rgba(196, 21, 50, 0.03);
}

/* Runde Schaltflaechen in Listen (z. B. „auf den Beamer“): flach statt Schatten */
body.openslides-light-theme .mat-mdc-mini-fab,
body.openslides-light-theme .mat-mdc-fab {
  box-shadow: 0 0 0 1px #ece9e1 !important;
}

/* Menues, Auswahllisten, Dialoge: weicher Schatten */
body.openslides-light-theme .mat-mdc-menu-panel,
body.openslides-light-theme .mat-mdc-select-panel,
body.openslides-light-theme .mat-mdc-autocomplete-panel {
  box-shadow: 0 10px 30px rgba(40, 37, 29, 0.14) !important;
}
body.openslides-light-theme .mat-mdc-dialog-surface {
  box-shadow: 0 24px 60px rgba(40, 37, 29, 0.18) !important;
}

/* Aufgeklappte Bereiche wie Karten */
body.openslides-light-theme .mat-expansion-panel:not(.mat-expansion-panel-spacing) {
  box-shadow: none !important;
  border: 1px solid #ece9e1;
}

/* Hinweise am Rand (Chips) ruhiger */
body.openslides-light-theme .mat-mdc-chip {
  box-shadow: none !important;
}

/* ── Startseite der Sitzung (28.10.2026) ────────────────────
   Titel und Begruessungstext pflegt die Geschaeftsstelle in OpenSlides
   (welcome_title, welcome_text). Hier nur die Buehne: grosser Titel, die
   Kreise schweben langsam in der Ecke, Links aus einer Aufzaehlung im Text
   werden zu Kacheln. */
body.openslides-light-theme os-start > .mat-mdc-card {
  position: relative;
  overflow: hidden;
  max-width: 920px;
  margin: 24px auto 60px;
  border-radius: 22px;
}
body.openslides-light-theme os-start > .mat-mdc-card::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -60px;
  width: 360px;
  height: 240px;
  background: url("/ljr/kreise.svg") center / contain no-repeat;
  opacity: 0.9;
  pointer-events: none;
  animation: ljr-schweben 22s ease-in-out infinite;
}
@keyframes ljr-schweben {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  33% { transform: translate3d(-10px, 8px, 0) rotate(-3deg); }
  66% { transform: translate3d(6px, -6px, 0) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  body.openslides-light-theme os-start > .mat-mdc-card::before { animation: none; }
}
body.openslides-light-theme os-start #start-page-content {
  position: relative;
  padding: 40px 36px 32px;
}
body.openslides-light-theme os-start #start-page-content > h1 {
  position: relative;
  z-index: 1;
  max-width: 70%;
  margin: 0 0 18px;
  font-size: 44px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #c41532;
}
body.openslides-light-theme os-start .html-view {
  font-size: 18px;
  line-height: 1.6;
  color: #28251d;
  max-width: 62ch;
}
body.openslides-light-theme os-start .html-view h2,
body.openslides-light-theme os-start .html-view h3 {
  margin: 28px 0 8px;
  font-weight: 700;
  color: #28251d;
}
/* Eckdaten: eine Zeile mit <strong> am Anfang des Textes wirkt als Unterzeile */
body.openslides-light-theme os-start .html-view > p:first-child strong {
  color: #6b6860;
  font-weight: 600;
}
/* Aufzaehlung mit Links: Kacheln */
body.openslides-light-theme os-start .html-view ul:has(> li > a) {
  list-style: none;
  padding: 0;
  margin: 24px 0 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  max-width: none;
}
body.openslides-light-theme os-start .html-view ul:has(> li > a) > li {
  margin: 0;
}
body.openslides-light-theme os-start .html-view ul:has(> li > a) > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 14px 18px;
  border: 1px solid #ece9e1;
  border-radius: 14px;
  background: #faf9f6;
  color: #28251d;
  font-weight: 600;
  text-decoration: none !important;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1), border-color 300ms;
}
body.openslides-light-theme os-start .html-view ul:has(> li > a) > li > a::after {
  content: "→";
  color: #c41532;
  font-weight: 700;
  margin-left: 12px;
}
/* Der Live-Weg (Autopilot: aktueller Punkt, Redeliste, Abstimmung) als
   rote Hauptkachel ueber die ganze Breite. */
body.openslides-light-theme os-start .html-view ul:has(> li > a) > li:has(> a[href$="/autopilot"]) {
  grid-column: 1 / -1;
}
body.openslides-light-theme os-start .html-view ul:has(> li > a) > li > a[href$="/autopilot"] {
  min-height: 72px;
  padding: 18px 22px;
  background: #c41532;
  border-color: #c41532;
  color: #ffffff;
  font-size: 20px;
}
body.openslides-light-theme os-start .html-view ul:has(> li > a) > li > a[href$="/autopilot"]::after {
  color: #ffffff;
}
body.openslides-light-theme os-start .html-view ul:has(> li > a) > li > a[href$="/autopilot"]:hover {
  border-color: #a8102a;
  box-shadow: 0 10px 26px rgba(196, 21, 50, 0.28);
}
body.openslides-light-theme os-start .html-view ul:has(> li > a) > li > a:hover {
  transform: translateY(-2px);
  border-color: #e0dccf;
  box-shadow: 0 8px 22px rgba(40, 37, 29, 0.08);
}
@media (max-width: 600px) {
  body.openslides-light-theme os-start > .mat-mdc-card { margin: 12px 8px 40px; border-radius: 18px; }
  body.openslides-light-theme os-start > .mat-mdc-card::before { width: 170px; height: 115px; top: -48px; right: -62px; }
  body.openslides-light-theme os-start #start-page-content { padding: 28px 20px 22px; }
  body.openslides-light-theme os-start #start-page-content > h1 { font-size: 32px; max-width: 80%; }
  body.openslides-light-theme os-start .html-view { font-size: 16px; }
  body.openslides-light-theme os-start .html-view ul:has(> li > a) { grid-template-columns: 1fr 1fr; gap: 8px; }
  body.openslides-light-theme os-start .html-view ul:has(> li > a) > li > a { min-height: 48px; padding: 10px 14px; }
}

/* ── Stimmknoepfe: gross und eindeutig (Probelauf 28.10.2026) ─────────
   OpenSlides zeigt Ja/Nein/Enthaltung als Beschriftung ueber leeren
   Kaesten. Hier: groessere Flaeche, farbiger Rand je Antwort, die gewaehlte
   Antwort voll eingefaerbt. */
body.openslides-light-theme .vote-button {
  min-width: 72px !important;
  min-height: 64px !important;
  border-radius: 16px !important;
  border: 2px solid #d8d4c8 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms;
}
body.openslides-light-theme .vote-button:hover { transform: translateY(-1px); }
body.openslides-light-theme .vote-button .vote-button-circle { transform: scale(1.4); }
body.openslides-light-theme .vote-button[aria-label="Ja"] { border-color: #3f8f1c !important; color: #3f8f1c; }
body.openslides-light-theme .vote-button[aria-label="Nein"] { border-color: #c41532 !important; color: #c41532; }
body.openslides-light-theme .vote-button[aria-label="Enthaltung"] { border-color: #6b6860 !important; color: #6b6860; }
body.openslides-light-theme .vote-button[aria-checked="true"][aria-label="Ja"] { background: #3f8f1c !important; color: #ffffff; }
body.openslides-light-theme .vote-button[aria-checked="true"][aria-label="Nein"] { background: #c41532 !important; color: #ffffff; }
body.openslides-light-theme .vote-button[aria-checked="true"][aria-label="Enthaltung"] { background: #6b6860 !important; color: #ffffff; }
body.openslides-light-theme .vote-button[aria-checked="true"] .mat-icon { color: #ffffff !important; }

/* Seitenleiste: Logo mit Luft, der erste Eintrag (bei Verwaltenden
   „Dashboard“) klebt sonst unter dem Logo. */
body.openslides-light-theme .nav-toolbar-logo {
  height: auto !important;
  padding: 14px 0 18px;
}

/* ── Schlichtmodus für Delegierte (ljr.js setzt body.ljr-schlicht) ──
   Keine Seitenleiste, kein Menüknopf; unten drei Wege wie in einer App. */
body.ljr-schlicht mat-sidenav.side-panel,
body.ljr-schlicht .main-content-wrapper > .navigation.sidenav-background { display: none !important; }
body.ljr-schlicht .mat-sidenav-content { margin-left: 0 !important; padding-bottom: 96px; }
body.ljr-schlicht .ljr-menueknopf { display: none !important; }
#ljr-leiste { display: none; }
body.ljr-schlicht #ljr-leiste {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  gap: 4px;
  width: min(440px, calc(100vw - 24px));
  padding: 6px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(40, 37, 29, 0.16);
}
body.ljr-schlicht #ljr-leiste button {
  flex: 1;
  min-height: 56px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: #6b6860;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  transition: background 260ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms;
}
body.ljr-schlicht #ljr-leiste button .material-icons { font-size: 22px; }
body.ljr-schlicht #ljr-leiste button.an { background: #fde9ec; color: #c41532; }
body.ljr-schlicht #ljr-leiste button[data-weg="/autopilot"]:not(.an) { color: #c41532; }
@media (prefers-reduced-motion: reduce) { body.ljr-schlicht #ljr-leiste button { transition: none; } }