/* ==========================================================================
   echoBOS Design System  ·  Corporate Identity: Teal #007676
   Single source of truth for brand tokens + components.
   Verbindliche Referenz: docs/CI.md
   Loaded on every page AFTER Bootstrap so brand overrides win.
   ========================================================================== */

:root {
  /* --- Brand: Teal (CI §3) --- */
  --brand:          #007676;
  --brand-hover:    #006A6A;
  --brand-pressed:  #005C5C;
  --brand-deep:     #004E4E;
  --brand-deep-2:   #003C3C;
  --brand-tint:     #339090;
  --brand-soft:     #E3F1F1;
  --brand-line:     #BFE0E0;
  --brand-on-dark:  #7FCACA;
  --brand-gradient: linear-gradient(135deg, #007676 0%, #005C5C 100%);

  /* --- Neutrals (Airbnb-inspired, CI §3) --- */
  --bg:        #FFFFFF;
  --surface:   #F7F7F7;
  --surface-2: #FCFBFA;
  --text:      #222222;
  --text-2:    #717171;
  --text-3:    #B0B0B0;
  --border:    #DDDDDD;
  --divider:   #EBEBEB;

  /* --- Semantic (unchanged, never brand-swap) --- */
  --success:      #4CAF50;
  --success-soft: #96D35F;
  --error:        #FF385C;

  /* --- Radius (CI §5) --- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-card: 24px;

  /* --- Typography: system stack, no CDN (CI §4) --- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- Back-compat aliases: legacy var(--primary) refs now resolve teal --- */
  --primary:      var(--brand);
  --primary-dark: var(--brand-hover);
  --accent:       var(--brand);
}

/* ==========================================================================
   Base
   ========================================================================== */
body { font-family: var(--font-sans); }

a { color: var(--brand); }
a:hover { color: var(--brand-hover); }

::selection { background: var(--brand-soft); color: var(--brand-deep); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ==========================================================================
   Bootstrap primary/utility overrides -> Teal
   ========================================================================== */
.text-primary { color: var(--brand) !important; }
.bg-primary   { background-color: var(--brand) !important; }
.border-primary { border-color: var(--brand) !important; }
.link-primary { color: var(--brand) !important; }

.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-hover);
  --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-active-bg: var(--brand-pressed);
  --bs-btn-active-border-color: var(--brand-pressed);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  background-image: var(--brand-gradient);
  border-radius: var(--r-md);
  font-weight: 600;
}
.btn-primary:hover { background-image: none; }

.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand-pressed);
  --bs-btn-active-border-color: var(--brand-pressed);
  border-radius: var(--r-md);
  font-weight: 600;
}

.btn-link { color: var(--brand); }

.badge.bg-primary,
.badge.text-bg-primary { background-color: var(--brand) !important; color: #fff !important; }

/* Bootstrap form focus -> teal (replaces default blue glow) */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--brand-line);
  box-shadow: 0 0 0 0.2rem rgba(0, 118, 118, 0.20);
}
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { background-color: var(--brand); }

.page-item.active .page-link { background-color: var(--brand); border-color: var(--brand); }
.page-link { color: var(--brand); }

.progress-bar { background-color: var(--brand); }

.list-group-item.active { background-color: var(--brand); border-color: var(--brand); }

/* ==========================================================================
   echoBOS component layer (opt-in classes for redesigned views)
   ========================================================================== */

/* Buttons */
.bk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 52px; padding: 0 1.5rem; border-radius: var(--r-md);
  font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; transition: all .2s ease;
}
.bk-btn--sm { height: 44px; padding: 0 1.15rem; font-size: .95rem; }
.bk-btn--primary { background: var(--brand-gradient); color: #fff; }
.bk-btn--primary:hover { filter: brightness(1.06); color: #fff; box-shadow: 0 8px 20px rgba(0,118,118,.25); }
.bk-btn--outline { background: #fff; color: var(--brand); border-color: var(--brand); }
.bk-btn--outline:hover { background: var(--brand-soft); color: var(--brand-deep); }
.bk-btn--ghost { background: var(--brand-soft); color: var(--brand-deep); }
.bk-btn--ghost:hover { background: var(--brand-line); }

/* Card */
.bk-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 1.75rem; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.bk-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,.08); border-color: transparent; }

/* Eyebrow / section labels (CI §4 uppercase, letter-spacing) */
.bk-eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand);
}
.bk-eyebrow--on-dark { color: var(--brand-on-dark); }

/* Chips / pills */
.bk-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: var(--brand-soft); color: var(--brand-deep);
}

/* Icon tile (feature/security icons) */
.bk-icon {
  width: 56px; height: 56px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-gradient); color: #fff; font-size: 1.5rem;
}
.bk-icon--soft { background: var(--brand-soft); color: var(--brand); }

/* Wordmark lockup: BOS = text, kom = teal (CI §2) */
.bk-wordmark { font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.bk-wordmark em { font-style: normal; color: var(--brand); }
.bk-wordmark--on-dark { color: #fff; }
.bk-wordmark--on-dark em { color: var(--brand-on-dark); }
/* Member sidebar brand: beat the per-page `.sidebar-brand span{color:var(--primary)}` */
.sidebar-brand .bk-wordmark { color: var(--text); }
.sidebar-brand .bk-wordmark em { color: var(--brand); }

/* Organisations-Logo: nie verzerren (contain in fester Box) */
.org-logo-preview { max-height: 80px; max-width: 220px; object-fit: contain; }
.sidebar-org-logo {
  padding: .75rem 0; margin-bottom: .5rem;
  border-bottom: 1px solid #e2e8f0; text-align: center;
}
.sidebar-org-logo img { max-height: 40px; max-width: 180px; object-fit: contain; }

/* ==========================================================================
   Print (CI §7): kill shadows so PDF viewers don't render grey boxes
   ========================================================================== */
@media print {
  *, *::before, *::after { box-shadow: none !important; }
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ==========================================================================
   Ladezustände für Buttons (echobos.js): Spinner + preserve/icon-Modus
   ========================================================================== */
@keyframes echobos-spin { to { transform: rotate(360deg); } }
.echobos-spinner {
  display: inline-block; width: 1em; height: 1em; margin-right: .5em; vertical-align: -.125em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: echobos-spin .6s linear infinite;
}
.echobos-spinner:only-child { margin-right: 0; }              /* icon-Modus: keine Textlücke */
.echobos-busy { position: relative; opacity: .65; pointer-events: none; }  /* preserve-Modus */
.echobos-busy::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 1.1em; height: 1.1em;
  margin: -.55em 0 0 -.55em; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: echobos-spin .6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .echobos-spinner, .echobos-busy::after { animation-duration: 1.4s; }
}

/* ==========================================================================
   Hinweise ohne Seitenwechsel (EchoBosUI.hinweis)
   Fest im Sichtfeld, damit die Rückmeldung einer fetch-Aktion nicht davon
   abhängt, wie weit die Seite gerade gescrollt ist.
   ========================================================================== */
.echobos-hinweis-bereich {
  position: fixed; z-index: 1090; left: 50%; transform: translateX(-50%);
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: min(34rem, calc(100vw - 2rem));
  pointer-events: none;                                      /* Seite bleibt bedienbar */
}
.echobos-hinweis {
  display: flex; align-items: center; gap: .75rem; pointer-events: auto;
  padding: .75rem 1rem; border-radius: 12px; font-size: .9375rem; line-height: 1.4;
  background: #004E4E; color: #fff; border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .22);
  animation: echobos-hinweis-auf .18s ease-out;
}
.echobos-hinweis > span { flex: 1 1 auto; min-width: 0; }
.echobos-hinweis-fehler { background: #C2264A; }
.echobos-hinweis-aktion {
  flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, .5); background: transparent;
  color: inherit; border-radius: 8px; padding: .25rem .7rem; font-size: .875rem; cursor: pointer;
}
.echobos-hinweis-aktion:hover { background: rgba(255, 255, 255, .14); }
.echobos-hinweis-zu {
  flex: 0 0 auto; border: 0; background: transparent; color: inherit; cursor: pointer;
  font-size: 1.25rem; line-height: 1; padding: 0 .15rem; opacity: .75;
}
.echobos-hinweis-zu:hover { opacity: 1; }
@keyframes echobos-hinweis-auf { from { opacity: 0; transform: translateY(.5rem); } }
@media (prefers-reduced-motion: reduce) {
  .echobos-hinweis { animation: none; }
}
@media print { .echobos-hinweis-bereich { display: none; } }

/* ==========================================================================
   Mobiles Seitenmenü: die gesamte Sidebar ist der Scrollcontainer
   Zwei Ursachen griffen zusammen:
   1. `height:100vh` ist eine *large viewport unit* — gerechnet wird mit
      eingeklappten Browserleisten. Bei sichtbarer Adressleiste ragte die
      `position:fixed`-Sidebar unter den sichtbaren Rand, und Seitenscroll holt
      ein fixiertes Element nicht zurück.
   2. Scrollbar war nur `.sidebar-nav`. Der Fuß (Nutzerkarte, Einladungs-QR,
      Abmelden) liegt im DOM daneben und war deshalb prinzipiell nie erreichbar.
   Die per-Page-Kopien von `.sidebar` stehen NACH dieser Datei; hier gewinnt die
   höhere Spezifität `aside.sidebar` (0,1,1) über `.sidebar` (0,1,0).
   Desktop bleibt unberührt: Nav scrollt intern, Fuß klebt unten.
   ========================================================================== */
@media (max-width: 991px) {
  aside.sidebar,
  aside.sa-sidebar {
    height: 100vh;                    /* Fallback: Safari <15.4, Chrome <108 */
    height: 100dvh;                   /* dynamische, sichtbare Viewport-Höhe */
    overflow-y: auto;
    overscroll-behavior-y: contain;   /* kein Scroll-Chaining auf die Seite */
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }

  /* Kopf, Org-Logo und Fuß nicht zusammenquetschen */
  aside.sidebar > .sidebar-brand,
  aside.sidebar > .sidebar-org-logo,
  aside.sidebar > .sidebar-footer,
  aside.sa-sidebar > .sa-sidebar-brand,
  aside.sa-sidebar > .sa-sidebar-footer { flex: 0 0 auto; }

  /* Nav wächst bei wenig Inhalt (Fuß bleibt unten), behält bei viel Inhalt ihre
     Inhaltshöhe -> die Sidebar läuft über und scrollt als *eine* Einheit. */
  aside.sidebar > nav.sidebar-nav,
  aside.sa-sidebar > nav.sa-nav {
    flex: 1 0 auto;
    overflow-y: visible;              /* kein verschachtelter Scrollbereich */
  }
}