:root{
  --bg:#050d16; --bg2:#0a1623; --card:#0b1b2a; --line:#1d3448; --text:#e8f1fb; --muted:#93a9bd;
  --accent:#31a4ff; --accent2:#17456a; --sidebar-w:268px; --sidebar-collapsed-w:52px; --topbar-h:50px;
}
*{ box-sizing:border-box }
body.app-body-root{ margin:0; font-family:'Segoe UI',system-ui,Roboto,Arial,sans-serif; background:linear-gradient(180deg,var(--bg),var(--bg2)); color:var(--text); min-height:100vh; }

/* Topbar + shell (CHAOS-like) */
.app-topbar{ display:flex; align-items:center; justify-content:space-between; height:var(--topbar-h); padding:0 12px 0 8px; background:#081623; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:400; }
.app-topbar-left,.app-topbar-right{ display:flex; align-items:center; gap:8px; }
.lang-wrap{ margin:0; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.lang-links{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
.lang-link{
  font-size:0.75rem;
  padding:3px 6px;
  border-radius:4px;
  border:1px solid transparent;
  color:var(--muted,#93a9bd);
  text-decoration:none;
  line-height:1.2;
}
.lang-link:hover{ color:var(--text); border-color:var(--line); background:rgba(255,255,255,0.04); }
.lang-link-active{
  color:var(--text);
  border-color:var(--line);
  background:rgba(255,255,255,0.08);
  font-weight:600;
}
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.app-topbar-center{ flex:1; max-width:560px; margin:0 24px; min-width:0; }
.sidebar-toggle{ width:40px; height:40px; border:none; border-radius:6px; background:transparent; color:var(--text); cursor:pointer; }
.sidebar-toggle::before{ content:'≡'; font-size:22px; line-height:40px; display:block; text-align:center; color:var(--muted); }
.app-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; padding:4px 8px; border-radius:6px; }
.app-brand-logo{ border-radius:6px; object-fit:contain; }
.app-brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.app-brand-title{ font-weight:600; font-size:1rem; color:var(--text); }
.app-brand-sub{ font-size:.72rem; color:var(--muted); }
.topbar-search{ display:flex; align-items:center; gap:8px; background:#0d2335; border:1px solid var(--line); border-radius:6px; padding:6px 12px; }
.topbar-search-icon{ width:16px; height:16px; opacity:.6; background:currentColor; border-radius:50%; color:var(--muted); }
.topbar-search-input{ flex:1; border:none; background:transparent; color:var(--muted); font-size:.875rem; min-width:0; }
.btn.btn-topbar{ background:transparent; border:1px solid var(--line); color:#b9d0e5; padding:6px 10px; border-radius:6px; cursor:pointer; }
.btn.btn-topbar:hover{ background:#112438; }

/* flex-start: Hauptbereich darf hoch sein, ohne die Sidebar mitzustrecken (sonst rutscht
   „Einstellungen“ mit margin-top:auto weit unter den sichtbaren Bereich). */
.app-shell{ display:flex; align-items:flex-start; min-height:calc(100vh - var(--topbar-h)); }
.app-sidebar{
  position:sticky;
  top:var(--topbar-h);
  z-index:50;
  width:var(--sidebar-w);
  flex-shrink:0;
  align-self:flex-start;
  max-height:calc(100vh - var(--topbar-h));
  background:#081623;
  border-right:1px solid var(--line);
  padding:12px 0 24px;
  overflow-y:auto;
}
.sidebar-nav{ padding:0 8px; display:flex; flex-direction:column; min-height:100%; }
.nav-group{ margin-bottom:20px; }
 .nav-group-bottom{ margin-top:auto; margin-bottom:0; padding-top:10px; border-top:1px solid rgba(147,169,189,.28); }
.nav-group-label{ font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:8px 12px 6px; }
.nav-item{ display:flex; align-items:center; gap:12px; padding:9px 12px; margin:3px 0; border-radius:8px; color:#d4e4f2; text-decoration:none; border-left:3px solid transparent; position:relative; }
.nav-item::before{ content:''; width:6px; height:6px; border-radius:50%; background:#355c79; flex:0 0 6px; }
.nav-item[data-icon]::after{ margin-left:auto; opacity:.8; font-size:13px; color:#89a9c4; }
.nav-item[data-icon="home"]::after{ content:'\2302'; }
.nav-item[data-icon="person"]::after{ content:'\25CF'; }
.nav-item[data-icon="roles"]::after{ content:'\2630'; }
.nav-item[data-icon="org"]::after{ content:'\25A6'; }
.nav-item[data-icon="cloud"]::after{ content:'\2601'; }
.nav-item[data-icon="settings"]::after{ content:'\2699'; }
.nav-item:hover{ background:#11253a; }
.nav-item.active{ background:linear-gradient(90deg, rgba(49,164,255,.18), rgba(49,164,255,.06)); color:#76caff; font-weight:600; border-left-color:#31a4ff; }
.nav-item.active::before{ background:#31a4ff; box-shadow:0 0 6px rgba(49,164,255,.45); }
/* Einstellungen sichtbar, aber ohne Bearbeitungsrecht (z. B. ReadOnly-User) */
.nav-item.nav-item--restricted{ opacity:.55; cursor:not-allowed; }
.nav-item.nav-item--restricted:hover{ background:transparent; }
body.sidebar-collapsed .nav-item::after{ display:none; }
.app-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.main-content{ width:100%; max-width:1600px; margin:0 auto; padding:0 18px 20px; }
.sidebar-backdrop{ display:none; }
body.sidebar-collapsed .app-sidebar{ width:var(--sidebar-collapsed-w); padding-left:4px; padding-right:4px; }
body.sidebar-collapsed .nav-group-label{ display:none; }
body.sidebar-collapsed .nav-item span{ display:none; }
body.sidebar-collapsed .nav-item{ justify-content:center; padding:10px 8px; }

/* Content */
h1{ margin:0; font-size:18px; letter-spacing:.2px }
#status{ font-size:12px; color:var(--muted) }
section.search{ margin:12px 0 0; padding:12px 14px; background:var(--card); border:1px solid var(--line); border-radius:12px; }
/* Kunden-Suche: Felder und Buttons auf einer Zeile unten bündig (Inputs stehen unter Labels) */
#searchForm{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 12px; }
#searchForm label{ margin-right:0; }
#searchForm > button{ margin-right:0; }
label{ margin-right:12px; display:inline-flex; flex-direction:column; font-size:12px; color:var(--muted) }
input{ padding:8px 10px; border-radius:8px; border:1px solid #2a4761; background:#081522; color:var(--text); min-width:180px }
button{ padding:8px 12px; border:none; background:var(--accent); color:#03203a; border-radius:8px; cursor:pointer; margin-right:8px; font-weight:600 }
.source-filter-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.source-chip{ background:#0f2436; color:#bdd5ea; border:1px solid #2a4761; padding:5px 10px; border-radius:999px; font-size:12px; font-weight:600; margin-right:0; }
.source-chip.active{ background:#1a3a56; border-color:#3e7aa5; color:#d8efff; box-shadow:inset 0 0 0 1px rgba(110,190,245,.35); }
.source-chip:hover{ background:#173349; }
 .layout{ position:relative; display:block; min-height:calc(100vh - 190px); margin:12px 0 12px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card); }
/* Kunden-Tabelle: Spalten-Panel schwebend rechts */
#columnPanel{ position:absolute; top:10px; right:10px; z-index:30; width:320px; max-height:70vh; border:1px solid var(--line); border-radius:10px; padding:12px; background:#0d2235; overflow:auto; box-shadow:0 10px 28px rgba(0,0,0,.35) }

/* Global Admin (/global-admin): Reseller links, Detail rechts (kein #columnPanel) */
.ga-header{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding:12px 16px; margin:12px 0 0; background:var(--card); border:1px solid var(--line); border-radius:12px;
}
.ga-header-brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.ga-header-status{ font-size:12px; text-align:right; }
.layout.layout-global-admin{
  display:flex; flex-direction:row; align-items:stretch;
  min-height:calc(100vh - 120px); margin:12px 0 12px; padding:0;
  border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card);
}
.ga-reseller-sidebar{
  width:min(400px, 38vw); min-width:260px; flex-shrink:0;
  border-right:1px solid var(--line); background:#081c2e;
  padding:12px; display:flex; flex-direction:column; min-height:0;
}
.ga-reseller-sidebar .panel-head{ margin-bottom:10px; flex-shrink:0; }
.ga-reseller-list{
  flex:1; min-height:0; overflow-y:auto; max-height:none;
  display:grid; gap:8px;
}
.layout-global-admin .ga-detail-wrap{
  flex:1; min-width:0; margin:0; padding:14px 16px 18px;
  overflow:auto; background:var(--card);
}
.layout-global-admin .ga-detail-wrap .card{ margin-top:0; }
.ga-reseller-sidebar .reseller-item{ width:100%; text-align:left; background:#17456a; color:#cce9ff; border:1px solid transparent; }
.ga-reseller-sidebar .reseller-item:hover{ filter:brightness(1.08); }
.ga-reseller-sidebar .reseller-item.ga-reseller-item--active{
  border-color:#31a4ff; box-shadow:inset 3px 0 0 #31a4ff; background:#1a5080;
}
@media (max-width: 900px){
  .layout.layout-global-admin{ flex-direction:column; min-height:auto; }
  .ga-reseller-sidebar{
    width:100%; min-width:0; max-height:42vh; border-right:none; border-bottom:1px solid var(--line);
  }
  .ga-reseller-list{ max-height:36vh; }
}
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px }
.panel-actions button{ background:var(--accent2); color:#cce9ff; margin-left:6px }
.panel-body{ display:grid; gap:6px; max-height:calc(100vh - 280px); overflow:auto }
.col-item{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.col-item label{ display:flex; gap:8px; align-items:center; font-size:12px; color:#c7d6e5; word-break:break-all; margin-right:0 }
.table-wrap{ width:100%; overflow:auto; padding:10px 14px 14px; background:var(--card) }
table{ width:max(1200px,100%); border-collapse:collapse }
thead th{ position:sticky; top:0; background:#102438; border-bottom:1px solid var(--line); text-align:left; padding:9px; font-size:12px }
tbody td{ padding:8px; border-bottom:1px solid #1b2c3c; font-size:12px; vertical-align:top; white-space:nowrap }
tbody tr:hover{ background:#11253a; cursor:pointer }
.pager{ display:flex; align-items:center; gap:10px; padding:10px 4px 0 }
#detailOverlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1000 }
#detailPanel{ display:none; position:fixed; right:0; top:0; height:100%; width:min(720px, 96%); background:#0b1e2d; color:#e6edf3; border-left:1px solid #21374a; overflow:auto; z-index:1001 }
#detailPanel header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #21374a }
#detailBody{ padding:16px }
.card{ margin:10px 0; padding:10px; border:1px solid var(--line); border-radius:10px; background:#0f1b28 }
.card table{ width:100%; min-width:640px; }
#detailBody table tbody td{ white-space:normal; word-break:break-word; overflow-wrap:anywhere; }
.kv{ display:grid; grid-template-columns:minmax(120px,180px) 1fr; gap:8px; align-items:start; }
.kv .k{ min-width:0; color:#9fb3c7 }
.kv > div:last-child{ min-width:0; word-break:break-word; overflow-wrap:anywhere; }
.muted{ color:var(--muted) }
.btn{ display:inline-block; padding:8px 12px; border-radius:6px; background:#2ea0ff; color:#001521; text-decoration:none; }
.disabled-link{ pointer-events:none; opacity:.45; }
.source-badge{ display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px; border:1px solid transparent; font-size:11px; font-weight:700; line-height:1.2; }
.source-badge::before{ content:''; width:7px; height:7px; border-radius:50%; }
.source-badge-xvantage{ background:#102f42; color:#8fd3ff; border-color:#2f607e; }
.source-badge-xvantage::before{ background:#35b1ff; }
.source-badge-manual{ background:#2d2210; color:#ffd48d; border-color:#6d5226; }
.source-badge-manual::before{ background:#ffbe55; }
.source-badge-xvantage-manual{ background:#2a1f36; color:#d5b8ff; border-color:#634886; }
.source-badge-xvantage-manual::before{ background:#ba8dff; }
.chaos-badge{ display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px; border:1px solid transparent; font-size:11px; font-weight:700; line-height:1.2; }
.chaos-badge::before{ content:''; width:7px; height:7px; border-radius:50%; }
.chaos-badge-on{ background:#123225; color:#8cf3c0; border-color:#2f7f5d; }
.chaos-badge-on::before{ background:#43da96; }
.chaos-badge-off{ background:#341a1a; color:#ffbbbb; border-color:#7a3434; }
.chaos-badge-off::before{ background:#ff7d7d; }

/* Modal: manuelle Kunden */
.modal-root{ position:fixed; inset:0; z-index:2100; display:flex; align-items:center; justify-content:center; padding:16px; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); }
.modal-panel{ position:relative; width:min(640px, 100%); max-height:92vh; overflow:auto; background:#0b1e2d; border:1px solid var(--line); border-radius:12px; box-shadow:0 20px 50px rgba(0,0,0,.45); }
.modal-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); }
.modal-header h3{ margin:0; font-size:1.05rem; color:var(--text); }
.modal-close-btn{ width:36px; height:36px; border:none; border-radius:8px; background:#17456a; color:#cce9ff; font-size:24px; line-height:1; cursor:pointer; }
.modal-close-btn:hover{ background:#1f5a85; }
.modal-body{ padding:16px 16px 8px; }
.modal-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
@media (max-width:720px){ .modal-form-grid{ grid-template-columns:1fr; } }
.modal-body label{ margin-right:0; }
.modal-footer{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:12px 0 0; margin-top:12px; border-top:1px solid var(--line); }
.modal-footer button{ margin-right:0; }

/* Login-Overlay */
.login-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:2000; display:flex; align-items:center; justify-content:center; }
.login-box{ background:#0b1e2d; border:1px solid var(--line); border-radius:12px; padding:20px; min-width:360px; max-width:860px; max-height:90vh; overflow:auto; }
.login-box h2{ margin:0 0 8px 0; font-size:20px; color:#e6edf3; }
.login-hint{ font-size:13px; color:#9fb3c7; margin:0 0 20px 0; }
.login-box label{ display:block; margin-bottom:14px; }
.login-box input{ width:100%; min-width:0; }
.login-box button{ width:100%; margin-top:8px; margin-right:0; }
.login-error{ color:#ffb4b4; font-size:13px; margin-top:10px; }
.register-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; max-height:48vh; overflow:auto; padding-right:6px; }
.register-actions{ position:sticky; bottom:0; background:#0b1e2d; border-top:1px solid #21374a; margin-top:10px; padding-top:10px; }