/* Toschke e.V. Corporate Design
   Primär: Portal-Leisten-Blau #132849 / #1e3a5f / #2a4a73
   Logo: Original-Wappen (kein nachgezeichnetes Gelb), Hell=dunkler Text, Dunkel=weißer Text
*/
:root {
  --toschke-brand: #1e3a5f;
  --toschke-brand-mid: #2a4a73;
  --toschke-brand-dark: #132849;
  --toschke-bg: #eef1f4;
  --toschke-gradient: linear-gradient(135deg, #132849 0%, #1e3a5f 55%, #2a4a73 100%);
  --bs-primary: #1e3a5f !important;
  --bs-primary-rgb: 30, 58, 95 !important;
  --bs-success: #1e3a5f !important;
  --pngx-primary: 214, 52% !important;
  --pngx-primary-lightness: 25% !important;
  --pngx-primary-text-contrast: #ffffff !important;
  --pngx-primary-darken-5: #132849 !important;
  --pngx-primary-lighten-18: #2a4a73 !important;
  --color-primary: #1e3a5f !important;
  --color-primary-element: #1e3a5f !important;
  --color-primary-element-hover: #2a4a73 !important;
  --color-primary-element-text: #ffffff !important;
  /* Nextcloud: dunkler Body-Hintergrund + weiße Icons (Theming-bg war hell) */
  --color-background-plain: #1e3a5f !important;
  --color-background-plain-text: #ffffff !important;
  --header-menu-icon-mask: linear-gradient(#ffffff 25%, color-mix(in srgb, #ffffff, 55% transparent) 90%) alpha !important;
}

/* === Menüleisten (Portal-Blau) === */
html body .navbar,
html body .navbar.bg-primary,
html body nav.navbar,
html body nav.navbar.bg-primary,
html body nav#id_main_nav,
html body .bg-primary,
html body header.navbar,
.navbar.bg-primary {
  --bs-primary: #1e3a5f !important;
  --bs-primary-rgb: 30, 58, 95 !important;
  --pngx-primary: 214, 52% !important;
  --pngx-primary-lightness: 25% !important;
  --pngx-primary-text-contrast: #ffffff !important;
  background-color: #1e3a5f !important;
  background-image: var(--toschke-gradient) !important;
  background: var(--toschke-gradient) !important;
  border-color: #132849 !important;
  color: #fff !important;
}
html body .navbar .nav-link,
html body .navbar .navbar-brand,
html body .navbar .navbar-text,
html body .navbar .btn,
html body .navbar .dropdown > .btn,
html body nav#id_main_nav a {
  color: #fff !important;
}
html body .navbar .navbar-toggler-icon {
  filter: invert(1);
}

/* Paperless/Tandoor: Navbar-SVGs weiß auf dunklem Verlauf */
html body .navbar svg,
html body nav#id_main_nav svg {
  color: #fff !important;
  fill: currentColor !important;
}

/* Paperless hard override of baked HSL primary on navbar */
html body .navbar.bg-primary {
  --pngx-primary: 214, 52% !important;
  --pngx-primary-lightness: 25% !important;
}

/* Tandoor beige kill */
html body nav#id_main_nav,
html body nav.navbar[style*="ddbf86"],
html body [style*="background-color: #ddbf86"],
html body [style*="background-color:#ddbf86"] {
  background-color: #1e3a5f !important;
  background-image: var(--toschke-gradient) !important;
  background: var(--toschke-gradient) !important;
}
html body nav#id_main_nav .brand-icon,
html body .navbar-brand img.brand-icon,
html body .navbar-brand img {
  height: 44px !important;
  width: auto !important;
  max-height: 48px !important;
  object-fit: contain !important;
}

/* Buttons */
.btn-primary, .btn-success, .btn-blue, .btn-login,
.button-vue--vue-primary, button.primary,
button[type=submit].btn-primary, button[type=submit].btn-success {
  background-color: #1e3a5f !important;
  background-image: none !important;
  border-color: #132849 !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-success:hover, .button-vue--vue-primary:hover {
  background-color: #2a4a73 !important;
}
a.text-primary, .text-primary { color: #1e3a5f !important; }

/* Wolke Fläche */
html:has(#body-login), body#body-login, #body-login, .body-login,
#body-user, #body-public, #body-settings {
  background: var(--toschke-gradient) !important;
  background-attachment: fixed !important;
}
#body-login .wrapper, #body-login main, #body-login .login-wrapper { background: transparent !important; }

/* Wolke: Login gestapelt (dark Logo), Header-Leiste Wappen + CSS-Text */
:root {
  --image-logo: url("/toschke-brand-dark.png") !important;
  --image-logoheader: url("/toschke-wappen.png") !important;
  --header-height: 56px;
}
#body-login .logo,
.body-login .logo,
.header-guest .logo,
#header.header-guest .logo {
  background-image: url("/toschke-brand-dark.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  width: min(200px, 62vw) !important;
  aspect-ratio: 3 / 4 !important;
  height: auto !important;
  max-height: min(280px, 38vh) !important;
  min-height: 180px !important;
  margin: 8px auto 20px !important;
  position: relative !important;
  inset: auto !important;
  display: block !important;
  filter: none !important;
}
#header:not(.header-guest) {
  --header-height: 56px;
  height: 56px !important;
  min-height: 56px !important;
}
#header:not(.header-guest) #nextcloud {
  padding-inline-start: 210px !important;
  overflow: visible !important;
  position: relative !important;
}
#header:not(.header-guest) #nextcloud .logo {
  background-image: url("/toschke-wappen.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  width: 40px !important;
  height: 40px !important;
  filter: none !important;
  top: 50% !important;
  transform: translateY(-50%);
  bottom: auto !important;
  inset-inline-start: 12px !important;
  overflow: visible !important;
}
/* Brand-Text rechts neben Wappen (wie Portal): Zeile 1 + Zeile 2 */
#header:not(.header-guest) #nextcloud .logo::before,
#header:not(.header-guest) #nextcloud .logo::after {
  position: absolute;
  left: 48px;
  pointer-events: none;
  text-align: left;
  white-space: nowrap;
  z-index: 1;
  transform: none;
}
#header:not(.header-guest) #nextcloud .logo::before {
  content: "Toschke e.V.";
  top: 2px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  color: #ffffff;
}
#header:not(.header-guest) #nextcloud .logo::after {
  content: "Abteilung Networks";
  top: 22px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.88);
}
#header:not(.header-guest) .header-appname {
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Nextcloud Header: Icons weiß auf dunklem Verlauf
   Nur Trigger/Chrome, nicht Dropdown-Inhalte. Sonst (Hub 26 / NC 35.0.x)
   erben Profilmenü-Einträge --color-main-text/#fff und Labels werden
   auf hellem Hintergrund unsichtbar; nur der aktive Eintrag bleibt lesbar. */
#header:not(.header-guest) .header-menu__trigger,
#header:not(.header-guest) .app-menu__waffle,
#header:not(.header-guest) .app-menu__current-app {
  color: #ffffff !important;
}
#header:not(.header-guest) .header-menu__trigger svg,
#header:not(.header-guest) .header-menu__trigger .material-design-icon,
#header:not(.header-guest) .app-menu__waffle svg,
#header:not(.header-guest) .app-menu__waffle .material-design-icon,
#header:not(.header-guest) .app-menu__current-app svg,
#header:not(.header-guest) .app-menu__current-app .material-design-icon {
  color: #ffffff !important;
  fill: currentColor !important;
}

/* Profil-/Header-Dropdowns: Theme-Textfarbe vom Body, nicht Header-Chrome.
   Kein !important auf Menüpunkten, sonst verliert der aktive Eintrag
   seine Primary-Textfarbe (NC Hub 26 / 35.0.x). */
#header:not(.header-guest) .user-menu__content,
#header:not(.header-guest) .header-menu__content,
#header:not(.header-guest) .account-menu,
#header:not(.header-guest) .settings-menu,
#header:not(.header-guest) .v-popper__popper {
  color: var(--color-main-text, #222222);
}

/* Tandoor-Leiste: Wappen + Titel (aria-label = Space/Tandoor) */
html body nav#id_main_nav .navbar-brand,
html body .navbar .navbar-brand {
  overflow: visible !important;
  max-width: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  color: #fff !important;
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
}
html body nav#id_main_nav .navbar-brand::after {
  content: attr(aria-label);
  color: #fff !important;
  white-space: nowrap;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
}
@media (max-width: 420px) {
  html body nav#id_main_nav .navbar-brand {
    font-size: 1.05rem !important;
    gap: 0.45rem !important;
  }
  html body nav#id_main_nav .navbar-brand::after {
    font-size: 1.05rem;
  }
}
html body nav#id_main_nav .brand-icon,
html body nav#id_main_nav .navbar-brand img.brand-icon,
html body nav#id_main_nav .navbar-brand img,
html body .navbar-brand img.brand-icon,
html body .navbar-brand img,
img[src="/toschke-brand-nav.png"],
img[src*="toschke-brand-nav"],
img[src*="brand-inline"],
img[src*="toschke-wappen"],
img[src*="brand_logo"] {
  height: 48px !important;
  width: auto !important;
  max-height: 52px !important;
  max-width: min(240px, 55vw) !important;
  object-fit: contain !important;
  object-position: left center !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
}

/* CloudPanel Login: dunkler Verlauf hinter Logo (weißes Brand-Text) */
html:has(.login-container),
body:has(.login-container),
body:has(.login-container) html,
.login-container {
  background: linear-gradient(135deg, #132849 0%, #1e3a5f 55%, #2a4a73 100%) !important;
  background-color: #1e3a5f !important;
  min-height: 100vh;
}
.login-container {
  width: min(400px, 92vw) !important;
  margin: 64px auto 40px !important;
  padding-bottom: 24px;
  background: transparent !important;
}
.login-container .logo {
  text-align: center !important;
  padding: 12px 0 20px !important;
  background: transparent !important;
}
.login-container .logo img,
img[src*="cloudpanel-cloud.svg"] {
  width: auto !important;
  max-width: 240px !important;
  height: auto !important;
  max-height: 280px !important;
  object-fit: contain !important;
}
.login-form-container {
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 10px !important;
  padding: 28px 24px !important;
  background: #ffffff !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.22) !important;
}
.login-form-container .row { padding: 0 0 14px !important; margin: 0 !important; }
.login-form-container .row:last-child { padding: 0 !important; }
.login-form-container .col { padding: 0 !important; width: 100% !important; }
.btn-login {
  width: 100% !important;
  display: block !important;
  background: #1e3a5f !important;
  border-color: #132849 !important;
  color: #fff !important;
}
.footer-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 16px 0 0 !important;
  color: #e8eef6 !important;
  width: 100% !important;
}
.footer-container .language-selector {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}
.footer-container .language-selector label {
  margin: 0 !important;
  color: #e8eef6 !important;
  font-weight: 600 !important;
}
.footer-container .language-selector select,
.footer-container .language-selector .form-select {
  min-width: 160px !important;
  color: #132849 !important;
  background: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  border-radius: 6px !important;
}