/* Hinweisfenster (Installieren, Benachrichtigungen) und Glocke in der Kopfzeile, im Stil des Portals. */
.uge-toast {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 1090; width: min(24rem, calc(100vw - 2rem));
    background: #fff; color: #111827; border-radius: 1rem; box-shadow: 0 18px 40px -12px rgba(17, 24, 39, .35);
    border-top: 5px solid #339933; font-size: .92rem; line-height: 1.5; animation: uge-toast-rein .25s ease-out;
}
.dark .uge-toast { background: #1f2937; color: #f3f4f6; }
.uge-toast-kopf { display: flex; align-items: center; gap: .55rem; padding: .85rem 1rem .25rem; }
.uge-toast-kopf > .bi { color: #203D4C; font-size: 1.1rem; }
.dark .uge-toast-kopf > .bi { color: #93c5fd; }
.uge-toast-kopf strong { flex: 1; }
.uge-toast-zu { border: 0; background: transparent; color: #6B7280; padding: .25rem; border-radius: .5rem; cursor: pointer; }
.uge-toast-zu:hover { background: #F3F4F6; color: #111827; }
.uge-toast-text { padding: .25rem 1rem .9rem; white-space: pre-line; }
.uge-toast-fuss { padding: 0 1rem 1rem; }
.uge-toast-knopf {
    border: 0; border-radius: 999px; background: #277a27; color: #fff; font-weight: 600; padding: .5rem 1.1rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: .4rem;
}
.uge-toast-knopf:hover { background: #203D4C; }
@keyframes uge-toast-rein { from { transform: translateY(1rem); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .uge-toast { animation: none; } }
.fi-modal-open .uge-toast { display: none; }

.uge-glocke {
    display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px;
    border: 0; background: transparent; color: #6B7280; cursor: pointer; font-size: 1.15rem;
}
.uge-glocke:hover { background: #F3F4F6; color: #203D4C; }
.uge-glocke[data-stand="an"] { color: #203D4C; }
.uge-glocke[data-stand="aus"] { opacity: .55; }
.uge-glocke[data-stand="gesperrt"] { color: #b91c1c; }
.uge-glocke[data-stand="arbeitet"] { opacity: .5; cursor: progress; }
.dark .uge-glocke:hover { background: rgba(255, 255, 255, .08); color: #fff; }
/* Dunkelmodus: kein Blau auf Grau, sondern helle Töne */
.dark .uge-glocke { color: #E5E7EB; }
.dark .uge-glocke[data-stand="an"] { color: #93C5FD; }
.dark .uge-glocke[data-stand="aus"] { opacity: .7; }
.dark .uge-glocke[data-stand="gesperrt"] { color: #F87171; }

/* Startseite: Liste "Zu tun" (App\Support\Zutun) */
.uge-zutun { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.uge-zutun-punkt { display: flex; align-items: center; gap: .75rem; padding: .65rem .85rem; border-radius: .75rem; background: #F3F4F6; color: #111827; text-decoration: none; }
.uge-zutun-punkt:hover { background: #E6EDF0; }
.dark .uge-zutun-punkt { background: rgba(255,255,255,.05); color: #f3f4f6; }
.dark .uge-zutun-punkt:hover { background: rgba(255,255,255,.1); }
.uge-zutun-icon { width: 1.4rem; height: 1.4rem; color: #203D4C; flex: 0 0 auto; }
.dark .uge-zutun-icon { color: #93c5fd; }
.uge-zutun-text { flex: 1; font-size: .9rem; line-height: 1.3; }

/* Handy und Tablet: Menüknopf rechts (mit dem Daumen gut erreichbar), Menü fährt von rechts herein */
@media (max-width: 63.999rem) {
  .fi-topbar .fi-topbar-open-sidebar-btn,
  .fi-topbar .fi-topbar-close-sidebar-btn { order: 99; margin-inline-start: .25rem; }
  .fi-sidebar { inset-inline-start: auto; inset-inline-end: 0; }
  .fi-sidebar:not(.fi-sidebar-open) { --tw-translate-x: 100%; translate: 100% 0; }
}
/* Schmale Handys: Kopfzeile enger, damit Suche, Symbole, Profil und Menüknopf nebeneinander passen */
@media (max-width: 29.999rem) {
  .fi-topbar { padding-inline: .75rem; }
  .fi-topbar .fi-topbar-end { gap: .35rem; min-width: 0; }
  .fi-topbar .fi-global-search-ctn { min-width: 0; flex: 1 1 auto; }
  .fi-topbar .fi-global-search-field { min-width: 0; }
  .fi-topbar .uge-kopfknopf, .fi-topbar .uge-glocke { width: 2rem; height: 2rem; }
  .fi-topbar .uge-punkt { top: .05rem; right: .05rem; }
  .fi-topbar .uge-zahl { right: -.4rem; }
  .fi-topbar .fi-user-menu, .fi-topbar .fi-topbar-open-sidebar-btn { flex: 0 0 auto; }
}

/* Tabellen, Fehler und Hinweise auf System-Seiten (z. B. Nextcloud) */
.uge-sg-tabelle { width: 100%; border-collapse: collapse; font-size: .875rem; }
.uge-sg-tabelle th { text-align: left; font-weight: 600; color: #6B7280; padding: .4rem .6rem; border-bottom: 1px solid #E5E7EB; }
.uge-sg-tabelle td { vertical-align: top; padding: .5rem .6rem; border-bottom: 1px solid #F3F4F6; overflow-wrap: anywhere; }
.uge-sg-tabelle small { color: #6B7280; }
.dark .uge-sg-tabelle th { color: #9CA3AF; border-color: rgba(255,255,255,.1); }
.dark .uge-sg-tabelle td { border-color: rgba(255,255,255,.06); }
.dark .uge-sg-tabelle small { color: #9CA3AF; }
.uge-sg-fehler { color: #B91C1C; margin-bottom: .75rem; }
.dark .uge-sg-fehler { color: #F87171; }
.uge-sg-hinweis { color: #6B7280; font-size: .875rem; flex: 1 1 20rem; }
.dark .uge-sg-hinweis { color: #9CA3AF; }
/* Suchfeld über Tabellen breit genug für den Hinweis "Suchen (mehrere Wörter möglich)" (App\Filament\Tabellen) */
@media (min-width: 40rem) { .fi-ta-search-field { min-width: 19rem; } }
/* System → Nextcloud */
.uge-nc-werte th { width: 13rem; white-space: nowrap; vertical-align: top; }
.uge-nc-werte code, .uge-nc-geheim code { font-size: .8rem; background: #F3F4F6; padding: .1rem .35rem; border-radius: .3rem; word-break: break-all; }
.dark .uge-nc-werte code, .dark .uge-nc-geheim code { background: rgba(255,255,255,.08); }
.uge-nc-geheim { display: grid; gap: .3rem; padding: .8rem 1rem; margin-bottom: 1rem; border-radius: .7rem; background: #FEF3C7; color: #78350F; }
.dark .uge-nc-geheim { background: rgba(180,83,9,.15); color: #FCD34D; }
.uge-nc-knopf { margin-top: 1rem; }
/* Veranstaltung teilen (filament/termin/teilen.blade.php) */
.uge-teilen { display: grid; gap: .6rem; }
.uge-teilen-bild { width: 100%; max-height: 14rem; object-fit: cover; border-radius: .7rem; }
.uge-teilen-label { font-size: .8rem; font-weight: 600; color: #6B7280; }
.uge-teilen-text { width: 100%; font: inherit; font-size: .875rem; padding: .6rem .7rem; border: 1px solid #D1D5DB; border-radius: .6rem; background: #F9FAFB; color: #111827; resize: vertical; }
.dark .uge-teilen-text { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); color: #F3F4F6; }
.uge-teilen-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }
.uge-teilen-knopf { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .8rem; border: 1px solid #D1D5DB; border-radius: .6rem; background: #fff; color: #111827; font-size: .875rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.uge-teilen-knopf:hover { border-color: #203D4C; color: #203D4C; }
.uge-teilen-knopf small { font-weight: 400; opacity: .8; }
.uge-teilen-haupt { flex: 1 1 100%; justify-content: center; background: #203D4C; border-color: #203D4C; color: #fff; }
.uge-teilen-haupt:hover { background: #162b36; color: #fff; }
.dark .uge-teilen-knopf:not(.uge-teilen-haupt) { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.15); color: #F3F4F6; }
.uge-teilen-hinweis { font-size: .8rem; color: #6B7280; margin: 0; }
/* Oben rechts: Glocke (Filament) und Haken (filament/kopf-knoepfe.blade.php) nebeneinander */
.uge-kopf-rechts { display: flex; align-items: center; margin-inline-start: .25rem; }
/* Fuß der Seitenleiste wie in der vsuite (filament/seitenfuss.blade.php): unter Name und Profilmenü die Symbolreihe */
.uge-fuss { display: flex; align-items: center; gap: .15rem; padding: .25rem .75rem .75rem; }
.uge-fuss-luecke { flex: 1 1 auto; }
.uge-fuss-form { display: contents; }
.uge-fuss-knopf, .uge-fuss .uge-glocke {
    position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
    border-radius: .6rem; border: 0; background: transparent; color: #4B5563; cursor: pointer; font-size: 1.1rem;
}
.uge-fuss-knopf:hover, .uge-fuss .uge-glocke:hover { background: #F3F4F6; color: #203D4C; }
.dark .uge-fuss-knopf { color: #D1D5DB; }
.dark .uge-fuss-knopf:hover, .dark .uge-fuss .uge-glocke:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.uge-fuss .uge-punkt { top: .3rem; right: .3rem; }
.dark .uge-fuss .uge-punkt { box-shadow: 0 0 0 2px #18181b; }
/* Eingeklappte Seitenleiste (Desktop): Symbole untereinander, Abmelden ohne Lücke */
.uge-fuss.ist-zu { flex-direction: column; padding-inline: 0; }
.uge-fuss.ist-zu .uge-fuss-luecke { flex: 0 0 .35rem; }
@media (max-width: 63.999rem) { .uge-fuss.ist-zu { flex-direction: row; padding-inline: .75rem; } }
/* Zeile 1 im Seitenfuß: wer bin ich (Link aufs Profil, kein Menü) */
.uge-fuss-wer { border-top: 1px solid #E5E7EB; padding: .6rem .75rem .1rem; }
.dark .uge-fuss-wer { border-top-color: rgba(255, 255, 255, .1); }
.uge-fuss-ich { display: flex; align-items: center; gap: .65rem; padding: .35rem .5rem; border-radius: .6rem; color: #111827; text-decoration: none; min-width: 0; }
.uge-fuss-ich:hover { background: #F3F4F6; }
.dark .uge-fuss-ich { color: #F3F4F6; }
.dark .uge-fuss-ich:hover { background: rgba(255, 255, 255, .06); }
.uge-fuss-avatar { flex: 0 0 2rem; width: 2rem; height: 2rem; border-radius: 50%; background: #203D4C; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 600; }
.uge-fuss-ich-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.uge-fuss-name { font-size: .875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uge-fuss-rolle { font-size: .75rem; color: #6B7280; }
.dark .uge-fuss-rolle { color: #9CA3AF; }
.uge-fuss-wer.ist-zu { padding-inline: 0; display: flex; justify-content: center; }
.uge-fuss-wer.ist-zu .uge-fuss-ich-text { display: none; }
@media (max-width: 63.999rem) { .uge-fuss-wer.ist-zu { padding-inline: .75rem; display: block; } .uge-fuss-wer.ist-zu .uge-fuss-ich-text { display: flex; } }
.dark .uge-fuss-avatar { background: #2E5A70; }
/* Passkeys: Anmeldeseite und Profil (filament/passkey-anmelden, filament/passkeys/profil) */
.uge-passkey-anmelden { margin-top: 1rem; display: grid; gap: .6rem; }
.uge-passkey-anmelden .uge-passkey-knopf { width: 100%; }
.uge-passkey-oder { display: flex; align-items: center; gap: .75rem; color: #6B7280; font-size: .8rem; }
.uge-passkey-oder::before, .uge-passkey-oder::after { content: ""; flex: 1; border-top: 1px solid #E5E7EB; }
.dark .uge-passkey-oder::before, .dark .uge-passkey-oder::after { border-color: rgba(255,255,255,.1); }
.uge-passkey-hinweis, .uge-passkey-text, .uge-login-hinweis { font-size: .8rem; color: #6B7280; line-height: 1.45; }
.dark .uge-passkey-hinweis, .dark .uge-passkey-text, .dark .uge-login-hinweis { color: #9CA3AF; }
.uge-passkey-meldung { font-size: .85rem; color: #B91C1C; }
.dark .uge-passkey-meldung { color: #F87171; }
.uge-passkeys { display: grid; gap: .75rem; }
.uge-passkey-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.uge-passkey-liste li { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: .75rem; background: #F3F4F6; }
.dark .uge-passkey-liste li { background: rgba(255,255,255,.05); }
.uge-passkey-symbol { width: 1.4rem; height: 1.4rem; color: #203D4C; flex: 0 0 auto; }
.dark .uge-passkey-symbol { color: #93C5FD; }
.uge-passkey-name { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.uge-passkey-name small { color: #6B7280; font-size: .75rem; }
/* Mitgliedsantrag: Abstimmung im Vorstand (filament/mitgliedsantrag/abstimmung) */
.uge-abst { display: grid; gap: .75rem; font-size: .9rem; }
.uge-abst-stand { padding: .7rem .9rem; border-radius: .7rem; background: #F3F4F6; line-height: 1.5; }
.uge-abst-stand.ist-fest { background: #e9f4e9; border-left: 4px solid #339933; }
.dark .uge-abst-stand { background: rgba(255,255,255,.05); }
.dark .uge-abst-stand.ist-fest { background: rgba(51,153,51,.2); }
.uge-abst-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.uge-abst-liste li { display: flex; gap: .6rem; align-items: flex-start; overflow-wrap: anywhere; }
.uge-abst-liste li > .fi-badge { flex: 0 0 auto; margin-top: .1rem; }
.uge-abst-liste small, .uge-abst-fehlen { color: #6B7280; }
.dark .uge-abst-liste small, .dark .uge-abst-fehlen { color: #9CA3AF; }
.uge-login-hinweis { margin-top: 1rem; text-align: center; }
/* Handy: Suche steht jetzt in der Menüleiste, links in der Kopfleiste deshalb das Logo (ohne Einklapp-Knopf) */
@media (max-width: 63.999rem) {
  .fi-topbar .fi-topbar-start { display: flex; align-items: center; margin-inline-end: auto; }
  .fi-topbar .fi-topbar-start .fi-topbar-collapse-sidebar-btn-ctn { display: none; }
  .fi-topbar .fi-topbar-start .fi-logo { height: 2rem !important; }
}