/* ============================================================
   Nextcloud 34.0.4 — Designanpassung an sr-stm.org
   Projekt: /home/erich/hermes-projekte/sr-stm-org/
   Status: Stetig erweitern, Schritt für Schritt.
   ============================================================ */

/* ------------------------------------------------------------
   STUFE 1 — FUNDAMENT
   Basis-Farben, Hintergrund, Schrift
   ------------------------------------------------------------ */
:root {
  --color-background-plain: #F1EEDE;
/*  --image-background: none; */
  --color-main-text: #333;
  --color-text-maxcontrast: #6b6b6b;
  --font-face: 'Source Sans Pro', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --default-font-size: 14px;
  --default-line-height: 1.5;
}

/* ------------------------------------------------------------
   HEADER / NAVIGATION
   Leiste: Olivgrün aus der Homepage
   ------------------------------------------------------------ */
#header,
.app-navigation__header,
.navbar-header,
.appmenu-header,
.app-header {
  background-color: #38452F !important;
}

#header a,
.app-navigation__header a,
.navbar-header a,
.appmenu-header a,
.app-header a,
.app-navigation a,
.app-navigation__link,
.appmenu-item a,
.app-menu a {
  color: #FFFFFF !important;
}

#header a:hover,
.app-navigation__header a:hover,
.navbar-header a:hover,
.appmenu-header a:hover,
.app-header a:hover,
.app-navigation a:hover,
.app-navigation__link:hover,
.appmenu-item a:hover,
.app-menu a:hover {
  color: #E0E0E0 !important;
}

/* ------------------------------------------------------------
   SYMbole IM HEADER
   Weiß auf Olivgrün, inkl. Avatar-Rand/-Initialen
   ------------------------------------------------------------ */
#header .icon,
#header .svg-icon,
#header svg,
#header i[class*="icon"],
#header .app-navigation__icon,
#header .appmenu-icon,
#header .icon-bell,
#header .icon-notification,
#header .icon-contact,
#header .icon-user,
#header .icon-gear,
.app-navigation__icon,
.appmenu-icon,
.app-header .icon,
.app-header svg,
.app-header .icon-bell,
.app-header .icon-notification,
.app-header .icon-contact,
.app-header .icon-gear {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  stroke: #FFFFFF !important;
  opacity: 1 !important;
}

#header .user-avatar,
#header .avatar,
#header .app-navigation__avatar,
#header .appmenu-avatar,
#header .header-avatar,
.app-navigation__avatar,
.appmenu-avatar,
.app-header .avatar,
.app-header .user-avatar {
  border-color: #FFFFFF !important;
  background-color: #FFFFFF !important;
}

#header .user-avatar span,
#header .avatar span,
#header .app-navigation__avatar span,
#header .appmenu-avatar span,
#header .header-avatar span,
.app-navigation__avatar span,
.appmenu-avatar span,
.app-header .avatar span {
  color: #38452F !important;
}

/* ------------------------------------------------------------
   DATEI-SYMBOL IM APP-MENÜ (linkes Hamburger-Menü)
   Helles Glow auf Olivgrün-Hintergrund
   ------------------------------------------------------------ */
#app-menu-container img[src*="app.svg"],
.app-menu-main img[src*="app.svg"],
.app-menu-entry__active img[src*="app.svg"],
.app-menu img[src*="app.svg"] {
  filter: brightness(1.8) drop-shadow(0 0 3px rgba(241, 238, 222, 0.9)) !important;
}
/* Neue Regel: Alle Icons im Hauptmenü (inkl. Tables-Icons)weiß machen */
.app-menu-main img[src$=".svg"] {
  filter: brightness(0) invert(1) !important;
}

/* ------------------------------------------------------------
   SUCHFELD — nur Beschriftung + Lupensymbol hell
   Nicht das ganze Feld, nur die Begleitext-Elemente.
   ------------------------------------------------------------ */
.unified-search-input__label {
  color: #FFFFFF !important;
}

.unified-search-input__icon {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* ------------------------------------------------------------
   ADMIN-MENÜ (linke Leiste beim Admin-Bereich)
   Textfarbe wie Symbole — dunkel (#333) auf hellem Grund.
   ------------------------------------------------------------ */
.app-navigation-entry__name {
  color: #333 !important;
}

/* ------------------------------------------------------------
   USER-MENÜ (Klick auf Initialen/Avatar oben rechts)
   Dropdown-Text hell im Light Mode (Creme-Hintergrund),
   im Dark Mode automatisch über Global-Override weiß.
   ------------------------------------------------------------ */
.header-menu__content,
.account-menu__list,
.list-item-content__name,
.list-item-content__subname,
.list-item-content__details {
  color: #333 !important;
}

/* ------------------------------------------------------------
   ADMIN-BEREICH — Überschrift und Beschreibung hell
   Diese beiden Klassen nutzen ggf. keine --color-main-text
   und werden daher explizit hell gesetzt.
   ------------------------------------------------------------ */
.settings-section__name,
.settings-section__desc {
  color: #FFFFFF !important;
}

/* ------------------------------------------------------------
   DARK MODE (Browser-Präferenz prefers-color-scheme: dark)
   - Globale Schriftfarben hell für alle Komponenten.
   - Admin-Menü-Text hell (da sonst dunkel auf dunklem Grund).
   - User-Menü-Text hell (da sonst dunkel auf dunklem Grund).
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root,
  body,
  body#body-admin {
    --color-main-text: #FFFFFF !important;
    --color-text-maxcontrast: #FFFFFF !important;
  }

  .app-navigation-entry__name,
  .app-navigation-entry-link {
    color: #FFFFFF !important;
  }

  .header-menu__content,
  .account-menu__list,
  .list-item-content__name,
  .list-item-content__subname,
  .list-item-content__details {
    color: #FFFFFF !important;
  }
}

/* === Hintergrundbild: dezenter Creme-Nebel === */

body {
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(241, 238, 222, 0.5);
}

body {
  background-size: 80% auto !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* === Benachrichtigungs-Dropdown: Schrift dunkler (weißer BG bleibt) === */

/* Betreff-Text: dunkler Oliv-Grün, deutlich lesbar */
#header-menu-notifications .notification-subject,
#header-menu-notifications .notification-subject .subject,
#header-menu-notifications .notification-wrapper .notification .subject {
  color: #38452F !important;
  opacity: 1 !important;
}
#header-menu-notifications .notification-subject:hover,
#header-menu-notifications .notification-subject:hover .subject {
  color: #23527C !important;
  opacity: 1 !important;
}

/* Zeitstempel stark genug */
#header-menu-notifications .notification-time {
  color: #6b6b6b !important;
  opacity: 1 !important;
}

/* Optional: auch die Unterzeile ("Profil-Informationen …") */
#header-menu-notifications .notification-message,
#header-menu-notifications .notification-subject .subject-message {
  color: #4a4a4a !important;
  opacity: 1 !important;
}

/* Sekundär-Buttons/Icons im Panel */
#header-menu-notifications .button-vue,
#header-menu-notifications .material-design-icon {
  color: #555555 !important;
}

/* Hauptmenü-Items Darstellugn */
img[src*="material"] {
  filter: brightness(0) invert(1);
}

/* Ja-Nein-Schaltflächen in Tabellen */
/* === Schalter-Symbol (SVG) für Checkbox/Radio === */

/* === Inaktiv: Grau #777777 === */
.checkbox-content__icon svg path {
  fill: #666666 !important;
}

/* === Aktiv: Leuchtendes Gold #e7d85d mit leichtem Schimmer === */
.checkbox-content__icon--checked svg path {
  fill: #d4af37 !important; /* helleres, leuchtendes Gold */
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6)) !important;
}