/* =========================================================
   Metavent Portal – Frontend Styles (clean, same behavior)
   ========================================================= */

/* ---------- Baseline & Variablen (LIGHT) ---------- */
:root {
  /* Layout */
  --navbar-h: 56px;
  /* via JS aktualisiert */
  --container-max: 1440px;

  /* Markenfarben / Akzent */
  --accent: #2b6bc0;
  --accent-contrast: #ffffff;
  --bs-primary: var(--accent);
  /* Bootstrap-Primary ← Akzent */

  /* Typo + Farben */
  --font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --color-text: #111827;
  --color-muted: #6b7280;
  --color-text-negative: #111827;
  --border-color: rgba(0, 0, 0, .10);

  /* Flächen */
  --color-surface: #ffffff;
  --color-surface-2: #f3f3f3;

  /* Hintergrundbild + Overlay */
  --bg-image: url(/assets/img/default-background.jpg);
  --bg-overlay: rgba(0, 0, 0, .02);

  /* Glass */
  --glass-blur: 8px;
  --glass-bg: rgba(255, 255, 255, .45);
  --glass-border: 1px solid rgba(255, 255, 255, .35);
  --glass-shadow: 0 10px 30px rgba(2, 6, 23, .08);

  /* User-Dropdown */
  --udrop-blur: 12px;
  --udrop-sat: 120%;
  --udrop-bg: rgba(255, 255, 255, .95);
  --udrop-brd: rgba(255, 255, 255, .35);

  /* Hovers */
  --hover-bg: rgba(0, 0, 0, .05);

  /* Video */
  --video-radius: 12px;
  --video-shadow: 0 18px 40px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .08);
  /*  --video-border: 1px solid rgb(75, 75, 75, 0.05);  */

  /* Pills (nav-pills) */
  --pill-size: 42px;
  --pill-radius: 10px;

  /* Logos (optional CSS-Switch) */
  --logo-light: url("/assets/img/logo-light.svg");
  --logo-dark: url("/assets/img/logo-dark.svg");
}

/* ---------- Variablen (DARK) ---------- */
html[data-theme="dark"] {
  --accent: #8ab4f8;
  --accent-contrast: #0b1220;
  --bs-primary: var(--accent);

  --color-text: #e5e7eb;
  --color-muted: #a5a5a5;
  --color-text-negative: #e5e7eb;
  --border-color: rgba(255, 255, 255, .12);

  --color-surface: #171a1f;
  --color-surface-2: #0f1117;

  --bg-overlay: rgba(15, 17, 23, .9);

  --glass-bg: rgba(15, 18, 24, 0.99);
  --glass-border: 1px solid rgba(255, 255, 255, .12);
  --glass-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  /* NAV Dropdown */
  --udrop-bg: var(--glass-bg);
  --udrop-brd: rgba(255, 255, 255, .12);

  --hover-bg: rgba(255, 255, 255, .08);

  --video-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, 0.721);
  --video-border: 1px solid rgba(255, 255, 255, .12);
}

/* ---------- Reset / Grundlayout ---------- */
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family);
  color: var(--color-text);
  background: transparent;
  line-height: 1.5;
}

/* Hintergrund + Overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--bg-image) center/cover no-repeat fixed;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg-overlay);
  pointer-events: none;
}

/* ---------- Containerbreite ---------- */
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 16px;
}

@media (min-width:1200px) {

  .container,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: var(--container-max) !important;
  }
}

/* ---------- Glass Utility ---------- */
.glass {
  background: var(--glass-bg) !important;
  background-color: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  color: var(--color-text) !important;
  /* Sicherheit gegen Fremdstyles */
}

/* ---------- Navbar ---------- */
.navbar {
  min-height: 40px;
  padding: 0 1rem;
  z-index: 1500 !important;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.navbar-brand img {
  display: block;
}

.navbar-brand .brand-mark {
  width: 28px;
  height: 28px;
  display: inline-block;
  background: no-repeat center/contain var(--logo-light);
}

html[data-theme="dark"] .navbar-brand .brand-mark {
  background-image: var(--logo-dark);
}

html[data-theme="dark"] img.brand-logo {
  filter: brightness(1.1) invert(.9);
}

.navbar-brand span {
  font-size: 1rem;
  color: var(--color-text-negative);
}

/* Mobile: Navbar FIXED */
@media (max-width:1199.98px) {
  .navbar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
  }

  body {
    padding-top: var(--navbar-h, 56px) !important;
  }
}

/* Icon-Button rechts */
.btn-icon {
  color: inherit;
  text-decoration: none;
  padding: .25rem .5rem;
  border: 0;
}

.btn-icon:hover {
  opacity: .9;
}

/* ---------- Sidebar / rechte Spalte ---------- */
.sticky-right {
  position: static;
  top: auto;
}

.list-scroll {
  max-height: none;
  overflow: visible;
}

/* mobile */

@media (min-width:1200px) {
  .sticky-right {
    position: sticky;
    top: 1rem;
  }

  .list-scroll {
    max-height: 70vh;
    overflow: auto;
  }

  /* helle Scrollbars (Desktop) */
  .list-scroll {
    scrollbar-width: thin;
    scrollbar-color: #bdbdbd #f1f1f1;
  }

  .list-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  .list-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 8px;
  }

  .list-scroll::-webkit-scrollbar-thumb {
    background: #c7c7c7;
    border-radius: 8px;
    border: 2px solid #f1f1f1;
  }

  .list-scroll::-webkit-scrollbar-thumb:hover {
    background: #b0b0b0;
  }
}

/* ---------- Cards (glasig) ---------- */
.card.glass {
  background: var(--glass-bg) !important;
  background-color: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: var(--glass-shadow) !important;
  --bs-card-cap-bg: transparent !important;
  /* Card-Header/Footer neutralisieren */
}

.card.glass .card-header {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--color-text) !important;
}

.card.glass .card-header * {
  color: var(--color-text) !important;
}

/* Liste / Accordion im Glas */
.card.glass .list-group,
.card.glass .list-group-item {
  background: transparent !important;
}

.card.glass .list-group-item {
  border: 0;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0 !important;
  padding: 12px 16px;
}

.card.glass .list-group-item:last-child {
  border-bottom: 0;
}

.card.glass .accordion-item,
.card.glass .accordion-body {
  background: transparent;
  border: 0;
}

.card.glass .accordion-item {
  border-bottom: 1px solid var(--border-color);
}

.card.glass .accordion-item:last-child {
  border-bottom: 0;
}

/* Muted/Times in Agenda rechts */
.card.glass .list-group-item .text-end,
.card.glass .list-group-item .text-end * {
  color: var(--color-muted) !important;
}

/* ---------- Tabs/Pills (Agenda-Top-Navigation) ---------- */
.card.glass .card-header {
  padding: 12px 16px !important;
}

/* angenehme Innenabstände */
.card.glass .nav.nav-pills {
  display: flex;
  gap: 12px;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.card.glass .nav.nav-pills .nav-item {
  margin: 0 !important;
}

.nav.nav-pills .nav-link {
  width: var(--pill-size);
  height: var(--pill-size);
  padding: 0;
  border-radius: var(--pill-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text) !important;
  background: transparent;
  border: 1px solid transparent;
  line-height: 1;
  transition: background-color .15s, color .15s, transform .08s;
}

.nav.nav-pills .nav-link:hover {
  background: var(--hover-bg) !important;
}

.nav.nav-pills .nav-link.active {
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04) inset;
}

.nav.nav-pills .nav-link .bi,
.nav.nav-pills .nav-link svg {
  color: currentColor !important;
  font-size: 1.05rem;
}

.nav.nav-pills .nav-link:active {
  transform: translateY(1px);
}

/* ---------- Typo Hilfen ---------- */
small,
.small,
.lead.text-muted,
p.text-muted,
.subtitle,
.card-subtitle {
  color: var(--color-muted) !important;
}

/* Semibold gut lesbar (z. B. Agenda-Titel) */
html[data-theme="dark"] .fw-semibold {
  color: var(--color-text) !important;
}

/* ---------- Speaker ---------- */
.avatar-56 {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 0 0 6px #f1f3f5, 0 1px 2px rgba(0, 0, 0, .06);
}

.accordion-button {
  background: transparent !important;
  border: 0;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.accordion-button::after {
  display: none !important;
}

.accordion-button .caret {
  transition: transform .2s ease;
}

.accordion-button[aria-expanded="true"] .caret {
  transform: rotate(180deg);
}

.accordion-item {
  background: transparent;
}

/* ---------- Player ---------- */
.player {
  margin-top: 0;
}

.player .ratio {
  border-radius: var(--video-radius);
  overflow: hidden;
  box-shadow: var(--video-shadow);
  border: var(--video-border);
  background: #000;
}

.player .ratio>iframe {
  border: 0;
  display: block;
}

.pin-close {
  display: none !important;
}

@media (max-width:1199.98px) {
  #playerBox {
    position: relative;
    transition: all .25s ease;
  }

  #playerBox.is-mini {
    position: fixed;
    right: 12px;
    top: var(--mini-top, 0);
    width: 360px;
    max-width: 80vw;
    aspect-ratio: 16/9;
    z-index: 1200;
    border-radius: var(--video-radius) !important;
    overflow: hidden;
    background: #000 !important;
    box-shadow: var(--video-shadow) !important;
    border: var(--video-border) !important;
  }

  #playerBox.is-mini .ratio {
    height: 100%;
  }

  #playerBox.is-mini .pin-close {
    display: inline-block !important;
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 1300;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  padding: .5rem 1rem;
  text-align: center;
  background: var(--glass-bg);
  background-color: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-top: var(--glass-border);
  font-size: .8rem;
  color: var(--color-text);
}

main {
  padding-bottom: 60px;
}

@media (max-width:1199.98px) {

  .site-footer,
  .site-footer.glass {
    position: static !important;
    inset: auto !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: 0 !important;
  }

  main {
    padding-bottom: 0 !important;
  }
}

/* ---------- Scroll-to-Top ---------- */
.to-top {
  position: fixed;
  right: 12px;
  bottom: 72px;
  z-index: 1200;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
}

.to-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ---------- Dropdown (User-Menü) – Glas + externer Layer ---------- */
.navbar .dropdown {
  position: static !important;
}

/* JS setzt 'fixed' beim Öffnen */

.dropdown-menu.menu-glass {
  z-index: 1600 !important;
  background: var(--udrop-bg) !important;
  background-color: var(--udrop-bg) !important;
  -webkit-backdrop-filter: blur(var(--udrop-blur)) saturate(var(--udrop-sat)) !important;
  backdrop-filter: blur(var(--udrop-blur)) saturate(var(--udrop-sat)) !important;

  --bs-dropdown-bg: transparent;
  --bs-dropdown-link-hover-bg: rgba(0, 0, 0, .04);

  border: 1px solid var(--udrop-brd) !important;
  border-radius: .75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
  color: var(--color-text) !important;
}

.dropdown-menu.menu-glass .dropdown-header {
  color: var(--color-muted) !important;
  font-weight: 600;
  font-size: .95rem;
  background: transparent !important;
}

.dropdown-menu.menu-glass .dropdown-item-text {
  color: var(--color-text) !important;
  font-size: .9rem;
  opacity: 1;
  background: transparent !important;
}

.dropdown-menu.menu-glass .dropdown-divider {
  border-color: var(--border-color) !important;
}

.dropdown-menu.menu-glass .dropdown-item {
  color: var(--color-text) !important;
  background: transparent;
}

.dropdown-menu.menu-glass .dropdown-item:hover,
.dropdown-menu.menu-glass .dropdown-item:focus {
  background: var(--hover-bg) !important;
}

.dropdown-menu.menu-glass .dropdown-item .bi,
.dropdown-menu.menu-glass .dropdown-item svg {
  color: var(--color-text) !important;
  opacity: .95;
}

/* Fallback ohne (backdrop-)filter */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
  .dropdown-menu.menu-glass {
    background: rgba(255, 255, 255, .92) !important;
  }
}

/* Speaker–Social: nur Icons, dezentes Hover, theme-aware */
.speaker-social {
  gap: .25rem;
}

.speaker-social .btn-icon-only {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--border-color);
}

.speaker-social .btn-icon-only:hover {
  background: var(--hover-bg);
  text-decoration: none;
}

.speaker-social .bi {
  font-size: 1.1rem;
  line-height: 1;
}