/* Facade-Ergänzungen zum Original-Lachschon-CSS (ehemals Inline-<style> in
   base.html): Popup-Optik (Alerts/Nachrichten/Login), dynamische
   Sidebar-Boxen, Mentionbox. Muss NACH den Original-Stylesheets geladen
   werden — die :where()-Regel unten schlägt main.css' *-Regel nur durch
   spätere Reihenfolge. */

/* main.css setzt color auf JEDEM Element (* { color: #666666 }) —
   Farbvererbung ist damit tot. Die Facade-Widgets/-Fragmente (Shoutbox,
   Wochenthema-Popup, PeLT/Feedback in .ls-fragment) verlassen sich aber
   auf geerbte Farben (weiß auf blauem/grünem Header, Spenden-Bereich).
   :where() hält die Spezifität bei 0: diese Regel schlägt die *-Regel
   nur durch spätere Reihenfolge, jede eigene Widget-Regel gewinnt. */
:where(#gwn-shoutbox, #sb-tab, #gwn-wochenthema, #wt-tab, .ls-fragment) * { color: inherit; }
/* Eingeloggte Login-Box (Spec 03-Followup): Brief-/Glocken-Icon und
   Online-Zähler haben keine Regeln im Original-CSS — Farben nach
   specs/logged_in.jpg. Brief (Nachrichten) und Glocke (Hinweise)
   teilen sich dieselbe Badge-Optik (Spec 02-Followup Punkt 6). */
#box_login a#mailicon, #box_login a#bellicon { color: #FFFFFF; text-decoration: none; margin-left: 6px; font-size: 14px; position: relative; }
#box_login a#mailicon em, #box_login a#bellicon em { position: absolute; top: -6px; right: -10px; background: #cc0000; color: #FFFFFF; font: bold 9px Verdana, Arial, sans-serif; font-style: normal; line-height: 9px; padding: 2px 4px; border-radius: 8px; }
#box_login a#bellicon { margin-left: 12px; }
/* XF-Brief und -Glocke (Font-Awesome-5.15.3-regular-Pfade wie in XFs
   Header, als Inline-SVG weiß) statt ✉-Entity/🔔-Emoji (Nachbesserung) */
#box_login a#mailicon svg, #box_login a#bellicon svg { width: 13px; height: 13px; fill: #FFFFFF; vertical-align: -1px; }
/* Glocken-Popup (XFs Alerts, ap_*) und Nachrichten-Popup (XFs
   Konversationen, cp_*) im Lachschon-Look (Farben aus box_login:
   #98BBE5 / #1c4283). Achtung: sidebar.css hat ein generisches
   "#box_login span" (weiß/bold/padding) — die Overrides unten müssen
   deshalb jede betroffene Eigenschaft zurücksetzen. */
#box_login { position: relative; }
#alertspopup, #convpopup { display: none; position: absolute; top: 34px; right: 2px; width: 320px; background: #FFFFFF; border: 2px solid #98BBE5; border-radius: 6px; z-index: 1001; text-align: left; font-family: Verdana, Arial, sans-serif; box-shadow: 0 3px 8px rgba(0,0,0,0.35); }
#alertspopup span, #convpopup span { color: inherit; font-weight: inherit; font-size: inherit; padding: 0; display: inline; }
#alertspopup .ap_head, #convpopup .cp_head { background: #98BBE5; color: #FFFFFF; font-size: 12px; font-weight: bold; padding: 5px 10px; border-radius: 3px 3px 0 0; }
#alertspopup .ap_list, #convpopup .cp_list { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; }
#alertspopup .ap_alert, #convpopup .cp_conv { padding: 6px 10px; border-bottom: 1px solid #E5EEF9; font-size: 11px; color: #333333; line-height: 1.5; overflow: hidden; }
#alertspopup .ap_unread, #convpopup .cp_unread { background: #EAF2FC; }
#alertspopup a, #convpopup a { color: #1c4283; text-decoration: none; }
#alertspopup .ap_alert a, #convpopup .cp_conv a { font-weight: bold; }
/* Usernamen im Galerie-Grün (main.css .username), nicht im Link-Blau */
#alertspopup .ap_alert a.username, #convpopup .cp_conv a.username { color: #9ec630; }
#alertspopup .ap_avatar, #convpopup .cp_avatar { float: left; }
#alertspopup .ap_avatar .avatar, #convpopup .cp_avatar .avatar { display: block; width: 24px; height: 24px; overflow: hidden; border-radius: 3px; text-align: center; }
#alertspopup .ap_avatar .avatar img, #convpopup .cp_avatar .avatar img { width: 24px; height: 24px; }
#alertspopup .ap_avatar .avatar span, #convpopup .cp_avatar .avatar span { display: block; line-height: 24px; font-weight: bold; font-size: 13px; }
#alertspopup .ap_main, #convpopup .cp_main { display: block; margin-left: 34px; font-weight: normal; }
#alertspopup .ap_time, #convpopup .cp_time { display: block; color: #999999; font-style: normal; font-size: 10px; margin-top: 2px; }
#alertspopup .ap_main .reaction img { width: 16px; height: 16px; vertical-align: text-bottom; }
#alertspopup .ap_empty, #convpopup .cp_empty { padding: 12px 10px; font-size: 11px; color: #666666; font-weight: normal; }
#alertspopup .ap_foot, #convpopup .cp_foot { padding: 6px 10px; font-size: 11px; text-align: center; background: #F2F7FD; border-top: 1px solid #E5EEF9; border-radius: 0 0 3px 3px; }
/* Login-Popup für Gäste: Optik wie alertspopup (Farben aus
   box_login), zentriert überm greylayer (main.css: z-index 9998).
   Felder/Aufbau wie XFs Login-Overlay. main.css setzt color auf
   jedem Element — deshalb hier überall explizite Farben. */
#loginpopup { display: none; position: fixed; top: 30%; left: 50%; width: 240px; margin-left: -120px; background: #FFFFFF; border: 2px solid #98BBE5; border-radius: 6px; z-index: 9999; text-align: left; font-family: Verdana, Arial, sans-serif; box-shadow: 0 3px 8px rgba(0,0,0,0.35); }
#loginpopup .lp_head { background: #98BBE5; color: #FFFFFF; font-size: 12px; font-weight: bold; padding: 6px 10px; border-radius: 3px 3px 0 0; }
#loginpopup .lp_head a { float: right; color: #FFFFFF; text-decoration: none; font-size: 14px; line-height: 12px; }
#loginpopup form { margin: 10px 12px 12px; }
#loginpopup label { display: block; font-size: 11px; color: #1c4283; font-weight: bold; margin: 8px 0 3px; }
#loginpopup label a.lp_lost { float: right; font-weight: normal; color: #1c4283; }
#loginpopup input[type=text], #loginpopup input[type=password] { width: 204px; border: 1px solid #98BBE5; color: #666666; font-size: 12px; padding: 3px; }
#loginpopup label.lp_remember { font-weight: normal; color: #666666; margin: 8px 0; }
#loginpopup input.login { display: block; border: none; cursor: pointer; margin-top: 4px; }
/* Dynamische Sidebar-Boxen (Spec 02-Followup Punkte 3/4): die
   Original-Box #box_newmembers ist 284px breit (sidebar.css), unsere
   Sidebar aber 224px (main.css #sidebar) — auf 208px + 2x8px Padding
   eingepasst; die li-Kacheln (48px) auf 52px gestaucht = 4 pro Reihe.
   #box_activitystream gibt es im Original-CSS nicht — Optik wie
   box_newmembers, Einträge nutzen die #stream-li-Regeln. */
div#box_newmembers { width: 208px; float: none; border-radius: 6px; }
#newmembers li { padding: 4px 0 4px 2px; margin-right: 2px; }
#newmembers img.avatar { width: 48px; height: 48px; }
/* Nachbesserung Punkt 7 (specs/logged_in.jpg): hellblauer Rahmen,
   innen weiß — 194px + 2x8 Padding + 2x5 Rahmen = 224px Sidebar. */
#box_activitystream { background-color: #FFFFFF; border: 5px solid #D9E4F6; width: 194px; padding: 8px; margin-top: 10px; border-radius: 6px; }
#box_activitystream h2 { font-size: 12pt; color: #1C4283; font-weight: bold; padding: 0 0 5px; }
#box_activitystream ul#stream { list-style: none; margin: 0; padding: 0; font-size: 11px; color: #333333; }
#stream .avatar img { width: 40px; height: 40px; }
/* Pelt-Balken unterm 40px-Stream-Avatar (Nachbesserung: überall) */
#stream .avatar span.pelt-length { max-width: 40px; }
/* Mod/RDW unterm Stream-Avatar: main.css deckelt div.avatar auf 50px
   Höhe — mit overflow:hidden auf dem li (s.u.) wurde die Rolle halb
   abgeschnitten. Höhe freigeben; das li wächst als BFC mit. Der
   leere role-Span normaler User bleibt als Block 0px hoch. */
#stream .avatar { height: auto; }
#stream .avatar span.role { display: block; white-space: nowrap; }
/* Nachbesserung Punkt 14: lange Usernamen (z.B. DieguteEntevonSzechuan)
   dürfen nie eine horizontale Scrollbar erzeugen (sidebar.css setzt
   overflow:auto auf #stream li) — stattdessen hart umbrechen. */
#stream li { overflow: hidden; }
/* margin-left 53px statt 48: "Mod/RDW" (Verdana 10px) ist einen
   Tick breiter als die 48px-Avatarspalte aus main.css. */
#stream .text { margin-left: 53px; min-height: 42px; overflow-wrap: anywhere; word-break: break-word; }
/* Vorschlags-Dropdown unterm aktiven Textfeld (@-Mentions und
   :smilie:-Codes), Optik wie die Editorleiste (_editor.html
   ls-editorbar) — Auswahl invertiert in Seiten-Grau. main.css färbt
   jedes Element per *-Regel, daher überall explizite Farben. */
#mentionbox { display: none; position: absolute; z-index: 10000; min-width: 160px; background: #FFFFFF; border: 1px solid #CCCCCC; box-shadow: 0 2px 6px rgba(0,0,0,0.25); font-family: Verdana, Arial, sans-serif; font-size: 11px; }
#mentionbox a { display: block; padding: 3px 8px; color: #666666; text-decoration: none; cursor: pointer; white-space: nowrap; }
#mentionbox a img { width: 16px; height: 16px; vertical-align: text-bottom; margin-right: 6px; border-radius: 2px; }
/* Smilie-Grafiken sind selten quadratisch — nicht auf 16x16 zerren */
#mentionbox.smilie a img { width: auto; max-width: 32px; }
#mentionbox a .desc { color: #999999; margin-left: 6px; }
#mentionbox a.sel { background-color: #666666; color: #FFFFFF; }
#mentionbox a.sel .desc { color: #DDDDDD; }