/* Dark glass style (no public folder) */
:root{--bg:#0a0f10;--glass:rgba(255,255,255,.06);--border:rgba(255,255,255,.12);--text:#f2f5f7;--muted:#b8c1c8;--primary:#4da3ff;--danger:#ff5c73;--shadow:0 10px 30px rgba(0,0,0,.35)}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--text);text-decoration:none}.container{max-width:1200px;margin:90px auto 60px;padding:0 20px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.full{grid-column:1/-1}
.card{background:var(--glass);border:1px solid var(--border);backdrop-filter:blur(10px);border-radius:16px;padding:16px;box-shadow:var(--shadow)}.big{font-size:42px;font-weight:800}.row{display:flex;gap:8px}
input,select,textarea,button{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#0e1417;color:var(--text)}button{cursor:pointer}
button.primary{background:var(--primary);color:#000;font-weight:700;border-color:transparent}button.secondary{background:#222;border-color:#333}a.danger,button.danger{background:var(--danger);color:#000}
.topbar{position:fixed;top:0;left:0;right:0;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--border);box-shadow:var(--shadow);z-index:10}
.topbar.glass{background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.15));backdrop-filter:blur(12px)}.topbar .logo{width:38px;height:38px;border-radius:10px;margin-right:10px}
.topbar .left{display:flex;align-items:center;gap:10px}.topbar .brand{font-weight:800;letter-spacing:.4px}.topbar .right{display:flex;align-items:center;gap:16px}
.icon-btn{position:relative;background:transparent;border:1px solid var(--border);border-radius:12px;padding:8px 10px}.badge{position:absolute;top:-6px;right:-6px;background:var(--danger);color:#000;border-radius:999px;font-weight:800;padding:2px 6px;font-size:12px;min-width:22px;text-align:center}
.user-btn{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--border);padding:6px 8px;border-radius:12px}.user-btn .avatar{display:inline-block;width:28px;height:28px;border-radius:10px;background-size:cover;background-position:center;background-color:#222}
.dropdown{position:absolute;right:12px;top:72px;background:#0e1417;border:1px solid var(--border);border-radius:14px;min-width:320px;display:none;padding:12px}.dropdown.open{display:block}
.dropdown .section{padding:10px 4px;border-bottom:1px dashed #2a2f33}.dropdown .section:last-child{border-bottom:none}.dropdown .label{font-size:12px;color:var(--muted);margin-bottom:6px}.presence span{font-size:12px;color:var(--muted);margin-right:6px}
.table{width:100%;border-collapse:collapse}.table th,.table td{border-bottom:1px solid #1f2428;padding:8px 10px;text-align:left}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:100}.modal.open{display:flex}.modal .modal-box{background:#0e1417;border:1px solid var(--border);border-radius:16px;padding:20px;min-width:320px;box-shadow:var(--shadow)}
.login-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}.login-wrap{position:relative;z-index:1}.login-card{min-width:340px}.logo-wrap{text-align:center;margin-bottom:14px}.login-logo{width:80px;height:80px;border-radius:16px;box-shadow:var(--shadow)}
.animated-bg{position:fixed;inset:0;background:radial-gradient(600px 600px at 20% 20%, #1a2a6c55, transparent),radial-gradient(600px 600px at 80% 80%, #b21f1f55, transparent),radial-gradient(600px 600px at 50% 50%, #0f202755, transparent);filter:blur(40px);animation:pulse 12s infinite alternate}
@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.1)}}


.dot{width:8px;height:8px;border-radius:999px;display:inline-block}
.dot.online{background:#3ddc84;}   /* Grün */
.dot.away{background:#ffc14d;}     /* Gelb */
.dot.offline{background:#999999;}  /* Grau */


.logout-btn{
  width:44px;height:40px;border-radius:12px;
  border:1px solid #5a1e25;
  background:linear-gradient(180deg,#992b38,#6f1f2a);
  color:#fff;display:inline-grid;place-items:center;
}
.logout-btn:hover{ filter:brightness(1.08) }


/* --- FIX: Brand-Titel soll volle Breite nutzen --- */
.sideheader .brand { display:flex; align-items:center; }
.sideheader .brand .brand-link { flex: 1 1 auto; min-width: 0; }

/* Text darf schrumpfen, kein künstliches Limit */
.sideheader .brand .brand-text{
  display:block;
  flex: 1 1 auto;
  min-width: 0;           /* WICHTIG sonst ellipsed es zu früh */
  max-width: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* nur wenn wirklich zu wenig Platz ist */

/* Deaktiviere Gradient-Schrift (macht in manchen Browsern Probleme) */
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor; /* Safari */
  color: var(--text,#e8eef7);
  font-weight: 800;
  font-size: 16px;        /* wie vorher – gern anpassen */
}

/* Collapse-Button nicht „breit“ werden lassen */
.sideheader .brand .icon-btn.ghost{
  flex: 0 0 auto;
  margin-left: 8px;
  padding: 0 8px;
}


/* killt fremde rote Punkte auf Headern, nur im Chat-Scope */
.chat .card>header::before,
.chat .card>header::after { content: none !important; display: none !important; }

/* NEU: eigene Unread-Pill, kein Konflikt mit global .badge */
.unread-pill{
  display:inline-grid; place-items:center;
  min-width:18px; height:18px; padding:0 6px;
  border-radius:999px; font-size:11px; font-weight:800;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#001018;
}


/* killt fremde rote Punkte auf Headern, nur im Chat-Scope */
.chat .card>header::before,
.chat .card>header::after { content: none !important; display: none !important; }

/* NEU: eigene Unread-Pill, kein Konflikt mit global .badge */
.unread-pill{
  display:inline-grid; place-items:center;
  min-width:18px; height:18px; padding:0 6px;
  border-radius:999px; font-size:11px; font-weight:800;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#001018;
}