/**
 * member-dark-theme.css v1.0
 * Dark Mode NUR fuer Member-Community-Ansicht (WA-Shell, Feed, Spaces).
 * Additiv - keine Bestandsdatei wird geaendert.
 * Aktiv nur bei: body.dark
 * Admin/SuperAdmin bleibt unberuehrt (kein .wa-shell dort).
 */

body.dark {
  --wad-bg:        #0b141a;
  --wad-panel:     #111b21;
  --wad-panel-2:   #202c33;
  --wad-hover:     #2a3942;
  --wad-bdr:       #222d34;
  --wad-text:      #e9edef;
  --wad-muted:     #8696a0;
  --wad-bub-in:    #202c33;
  --wad-bub-out:   #005c4b;
  --wad-accent:    #00a884;
}

/* ── SEITEN-HINTERGRUND ────────────────────────────────
   app.php setzt inline "html,body{background:#F9FAFB}" und fuegt
   html.light-mode hinzu. Beides muss hier ueberstimmt werden, sonst
   blitzt weiss hinter der Shell durch (v.a. beim Scroll-Bounce iOS). */
html:has(body.dark),
body.dark{background:var(--wad-bg)!important;color:var(--wad-text)}
html.light-mode:has(body.dark){background:var(--wad-bg)!important}
body.dark #gl-loading-overlay{background:var(--wad-bg)}
body.dark #gl-loading-overlay p{color:var(--wad-muted)}

/* ── SHELL / RAIL / LIST ───────────────────────────── */
body.dark .wa-shell{background:var(--wad-bg);color:var(--wad-text)}
body.dark .wa-rail{background:var(--wad-panel);border-right:1px solid var(--wad-bdr)}
body.dark .wa-rb{color:var(--wad-muted)}
body.dark .wa-rb:hover{background:var(--wad-hover)}
body.dark .wa-rb.active{background:rgba(0,168,132,.18);color:var(--wad-accent)}
body.dark .wa-list{background:var(--wad-panel);border-right:1px solid var(--wad-bdr)}
body.dark .wa-lh h2{color:var(--wad-text)}
body.dark .wa-lh-btns button{color:var(--wad-muted)}
body.dark .wa-search input{background:var(--wad-panel-2)!important;color:var(--wad-text)!important}
body.dark .wa-search input::placeholder{color:var(--wad-muted)}
body.dark .wa-fb{background:var(--wad-panel-2)!important;color:var(--wad-muted)!important}
body.dark .wa-fb.active{background:rgba(0,168,132,.2)!important;color:#7ae3c3!important}

/* ── LIST ITEMS ────────────────────────────────────── */
body.dark .wa-it{border-bottom:1px solid var(--wad-bdr)}
body.dark .wa-it:hover,
body.dark .wa-it.active{background:var(--wad-hover)}
body.dark .wa-it-name{color:var(--wad-text)}
body.dark .wa-it-msg,
body.dark .wa-it-time{color:var(--wad-muted)}
body.dark .wa-it-av,
body.dark .wa-com-av,
body.dark .wa-ct-head-av,
body.dark .wa-mr-av,
body.dark .wa-fc-av{background:var(--wad-panel-2);color:var(--wad-muted)}
body.dark .wa-com-label{color:var(--wad-muted)}
body.dark .wa-com-members{color:var(--wad-muted)}
body.dark .wa-com-join:hover{background:var(--wad-accent);color:#fff}

/* ── CONTENT PANEL ─────────────────────────────────── */
body.dark .wa-ct{background:var(--wad-bg)}
body.dark .wa-ct-head{background:var(--wad-panel-2)!important;border-bottom:1px solid var(--wad-bdr)!important}
body.dark .wa-ct-head-name{color:var(--wad-text)}
body.dark .wa-ct-head-sub{color:var(--wad-muted)}
body.dark .wa-back{color:var(--wad-muted)}
body.dark .wa-ct-foot{background:var(--wad-panel-2)!important;border-top:1px solid var(--wad-bdr)!important}
body.dark .wa-ct-foot input,
body.dark .wa-ct-foot #wa-input{background:var(--wad-panel)!important;color:var(--wad-text)!important}
body.dark .wa-ct-foot input::placeholder,
body.dark .wa-ct-foot #wa-input::placeholder{color:var(--wad-muted)}
body.dark .wa-ib-btn{color:var(--wad-muted)}

/* ── CHAT BODY / BUBBLES ───────────────────────────── */
body.dark .wa-ct-body{background:var(--wad-bg)!important;background-image:none!important}
body.dark .wa-date-sep span,
body.dark .wa-sys span{background:var(--wad-panel-2);color:var(--wad-muted);box-shadow:none}
body.dark .wa-bub-in,
body.dark .wa-msg-in{background:var(--wad-bub-in);color:var(--wad-text)}
body.dark .wa-bub-out,
body.dark .wa-msg-out{background:var(--wad-bub-out);color:var(--wad-text)}
body.dark .wa-bub-tail-in::after{border-right-color:var(--wad-bub-in)}
body.dark .wa-bub-tail-out::after{border-left-color:var(--wad-bub-out)}
body.dark .wa-bub-time,
body.dark .wa-msg-time{color:var(--wad-muted)}
body.dark .wa-bub-sender{color:#7ae3c3}
body.dark .wa-bub-menu{color:var(--wad-muted)}
body.dark .wa-bub-menu:hover{background:rgba(255,255,255,.08)}
body.dark .wa-bub-file,
body.dark .wa-bub-link{background:rgba(255,255,255,.05)}
body.dark .wa-bub-voice-wave{background:repeating-linear-gradient(90deg,var(--wad-muted) 0 2px,transparent 2px 4px)}

/* ── FEED CARDS ────────────────────────────────────── */
body.dark .wa-fc{background:var(--wad-panel);border-bottom:1px solid var(--wad-bdr)}
body.dark .wa-fc-name{color:var(--wad-text)}
body.dark .wa-fc-text{color:var(--wad-text)}
body.dark .wa-fc-time{color:var(--wad-muted)}
body.dark .wa-fc-menu{color:var(--wad-muted)}
body.dark .wa-fc-menu:hover{background:rgba(255,255,255,.08)}
body.dark .wa-fc-bar{border-top:1px solid var(--wad-bdr)}
body.dark .wa-fc-btn{color:var(--wad-muted)}
body.dark .wa-fc-btn:hover{background:rgba(255,255,255,.06)}
body.dark .wa-fc-cmt{color:var(--wad-text)}
body.dark .wa-fc-cmt-time{color:var(--wad-muted)}
body.dark .wa-fc-cmt-input input{background:var(--wad-panel-2);border:1px solid var(--wad-bdr);color:var(--wad-text)}
body.dark .wa-fc-cmt-input input::placeholder{color:var(--wad-muted)}

/* ── DROPDOWNS / SHEETS / MENUS ────────────────────── */
body.dark .wa-bub-dd,
body.dark .wa-fc-dropdown,
body.dark .wa-ctx-menu,
body.dark .wa-plus-menu,
body.dark .wa-attach-menu{background:var(--wad-panel-2)!important;box-shadow:0 4px 20px rgba(0,0,0,.5)!important;border-color:var(--wad-bdr)}
body.dark .wa-bub-dd button,
body.dark .wa-fc-dropdown button,
body.dark .wa-ctx-item,
body.dark .wa-plus-item{color:var(--wad-text)}
body.dark .wa-bub-dd button:hover,
body.dark .wa-fc-dropdown button:hover,
body.dark .wa-ctx-item:hover,
body.dark .wa-plus-item:hover{background:var(--wad-hover)}
body.dark .wa-plus-sub{color:var(--wad-muted)}
body.dark .wa-ep-wrap{background:var(--wad-panel-2)}

/* ── MOBILE TABS / FAB / MISC ──────────────────────── */
body.dark .wa-mob-tabs{background:var(--wad-panel)!important;border-top:1px solid var(--wad-bdr)!important}
body.dark .wa-mob-tabs button{color:var(--wad-muted)!important}
body.dark .wa-mob-tabs button.active{color:var(--wad-accent)!important}
body.dark .wa-scroll-fab{background:var(--wad-panel-2);color:var(--wad-muted);box-shadow:0 2px 8px rgba(0,0,0,.4)}
body.dark .wa-settings-item{border-bottom:1px solid var(--wad-bdr);color:var(--wad-text)}
body.dark .wa-settings-item:hover{background:var(--wad-hover)}
body.dark .wa-welcome{color:var(--wad-text)}
body.dark .wa-welcome p{color:var(--wad-muted)}
body.dark .wa-empty{color:var(--wad-muted)}
body.dark .wa-pbar{background:var(--wad-panel-2)}

/* ── MOBILE OVERRIDES (schlagen !important der Mobile-CSS) ── */
@media(max-width:768px){
  body.dark .wa-ct{background:var(--wad-bg)!important}
  body.dark .wa-ct-head{background:var(--wad-panel-2)!important}
  body.dark .wa-ct-foot{background:var(--wad-panel-2)!important}
  body.dark .wa-ct-foot #wa-input{background:var(--wad-panel)!important}
  body.dark .wa-bub-dd,
  body.dark .wa-ctx-menu{background:var(--wad-panel-2)!important}
  body.dark .wa-search input{background:var(--wad-panel-2)!important}
}

/* ── SPACES / WIDGETS (Member) ─────────────────────── */
body.dark .gl-space-card,
body.dark .gl-widget,
body.dark .member-card{background:var(--wad-panel);border-color:var(--wad-bdr);color:var(--wad-text)}

/* ── TOGGLE BUTTON ─────────────────────────────────── */
.wa-theme-tgl{
  width:44px;height:44px;border:none;background:none;border-radius:14px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:19px;color:#54656f;transition:background .15s;
  -webkit-tap-highlight-color:transparent;
}
.wa-theme-tgl:hover{background:rgba(0,0,0,.06)}
body.dark .wa-theme-tgl{color:var(--wad-muted)}
body.dark .wa-theme-tgl:hover{background:var(--wad-hover)}