:root{
  /* Helles Theme (Standard) */
  color-scheme:light;
  --bg:#eef2f7; --bg2:#e7edf4; --card:#ffffff; --surface2:#f6f9fc; --surface3:#eef3f9; --surface-hover:#e3eaf2;
  --input-bg:#ffffff;
  --line:#dbe3ec; --line-strong:#c5d1de;
  --text:#1f2a37; --text-soft:#445566; --muted:#6b7c8f;
  --accent:#2563eb; --accent-soft:#e8f0ff; --accent2:#eef3f9;
  --danger:#b42318;
  --ring:#dbe7ff;
  --shadow:0 1px 2px rgba(16,24,40,.06), 0 6px 18px rgba(16,24,40,.06);
  --sidebar-w:268px; --sidebar-collapsed-w:52px; --topbar-h:56px;
}
html[data-theme="dark"]{
  /* Dunkles Theme */
  color-scheme:dark;
  --bg:#0b1623; --bg2:#0f2030; --card:#11212f; --surface2:#152a3b; --surface3:#1a3247; --surface-hover:#21405a;
  --input-bg:#0c1b29;
  --line:#27465f; --line-strong:#395977;
  --text:#eaf2fb; --text-soft:#bccfdf; --muted:#90a6bb;
  --accent:#3ba0ff; --accent-soft:#16334d; --accent2:#16334d;
  --danger:#ef6a5e;
  --ring:rgba(59,160,255,.28);
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 22px rgba(0,0,0,.4);
}
*{ box-sizing:border-box }
body.app-body-root{ margin:0; font-family:'Segoe UI',system-ui,Roboto,Arial,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }

/* Topbar + shell */
.app-topbar{ display:flex; align-items:center; justify-content:space-between; height:var(--topbar-h); padding:0 16px 0 10px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:400; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.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 8px;
  border-radius:6px;
  border:1px solid transparent;
  color:var(--muted);
  text-decoration:none;
  line-height:1.2;
}
.lang-link:hover{ color:var(--text); border-color:var(--line); background:var(--surface3); }
.lang-link-active{
  color:var(--accent);
  border-color:var(--accent);
  background:var(--accent-soft);
  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:8px; background:transparent; color:var(--text); cursor:pointer; }
.sidebar-toggle:hover{ background:var(--surface3); }
.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:8px; }
.app-brand-logo{ border-radius:8px; object-fit:contain; }
.app-brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.app-brand-title{ font-weight:700; 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:var(--surface2); border:1px solid var(--line-strong); border-radius:8px; padding:7px 12px; }
.topbar-search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.topbar-search-icon{ width:14px; height:14px; opacity:.6; background:currentColor; border-radius:50%; color:var(--muted); }
.topbar-search-input{ flex:1; border:none; background:transparent; color:var(--text); font-size:.875rem; min-width:0; outline:none; }
.topbar-search-input::placeholder{ color:var(--muted); }
.btn.btn-topbar{ background:var(--card); border:1px solid var(--line-strong); color:var(--text-soft); padding:7px 12px; border-radius:8px; cursor:pointer; font-weight:600; }
.btn.btn-topbar:hover{ background:var(--surface3); }

/* Hell/Dunkel-Umschalter */
.theme-toggle{ width:38px; height:38px; padding:0; margin:0; border:1px solid var(--line-strong); border-radius:8px; background:var(--card); color:var(--text-soft); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:16px; line-height:1; }
.theme-toggle:hover{ background:var(--surface-hover); filter:none; }
.theme-toggle::before{ content:'\263E'; }
html[data-theme="dark"] .theme-toggle::before{ content:'\2600'; }

.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:var(--card);
  border-right:1px solid var(--line);
  padding:14px 0 24px;
  overflow-y:auto;
}
.sidebar-nav{ padding:0 10px; 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 var(--line); }
.nav-group-label{ font-size:.68rem; font-weight:700; 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:9px; color:var(--text-soft); text-decoration:none; border-left:3px solid transparent; position:relative; font-size:.92rem; }
.nav-item::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--line-strong); flex:0 0 6px; }
.nav-item[data-icon]::after{ margin-left:auto; opacity:.7; font-size:13px; color:var(--muted); }
.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[data-icon="dashboard"]::after{ content:'\25F0'; }
.nav-item[data-icon="price"]::after{ content:'\20AC'; }
.nav-item[data-icon="onboarding"]::after{ content:'\2197'; }
.nav-item[data-icon="renewals"]::after{ content:'\231B'; }
.nav-item[data-icon="costs"]::after{ content:'\2211'; }
.nav-item[data-icon="certs"]::after{ content:'\25C8'; }
.nav-item[data-icon="activity"]::after{ content:'\223F'; }
.nav-item[data-icon="templates"]::after{ content:'\229E'; }
.nav-item[data-icon="reports"]::after{ content:'\25A4'; }
.nav-item[data-icon="branding"]::after{ content:'\25D0'; }
.nav-item[data-icon="support"]::after{ content:'\003F'; }
.nav-item:hover{ background:var(--surface3); color:var(--text); }
.nav-item.active{ background:var(--accent-soft); color:var(--accent); font-weight:600; border-left-color:var(--accent); }
.nav-item.active::before{ background:var(--accent); }
.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 24px; }
.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:19px; letter-spacing:.2px; color:var(--text); }
h3{ color:var(--text); }
#status{ font-size:12px; color:var(--muted) }
section.search{ margin:16px 0 0; padding:14px 16px; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
#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; gap:4px; font-size:12px; font-weight:600; color:var(--text-soft) }
input,select{ padding:9px 11px; border-radius:8px; border:1px solid var(--line-strong); background:var(--input-bg); color:var(--text); min-width:180px; font-size:14px; font-weight:400; outline:none; transition:border-color .15s, box-shadow .15s; }
input:focus,select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
button{ padding:9px 14px; border:none; background:var(--accent); color:#fff; border-radius:8px; cursor:pointer; margin-right:8px; font-weight:600; font-size:13px; transition:filter .15s; }
button:hover{ filter:brightness(.95); }
.source-filter-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.source-chip{ background:var(--card); color:var(--text-soft); border:1px solid var(--line-strong); padding:6px 12px; border-radius:999px; font-size:12px; font-weight:600; margin-right:0; }
.source-chip.active{ background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:none; }
.source-chip:hover{ background:var(--surface3); }
.source-chip.active:hover{ background:var(--accent); filter:brightness(.96); }
.layout{ position:relative; display:block; min-height:calc(100vh - 200px); margin:16px 0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card); box-shadow:var(--shadow); }
#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:var(--card); overflow:auto; box-shadow:0 14px 36px rgba(16,24,40,.14) }

/* (Legacy) Global-Admin-Layout-Klassen – das neue Global-Admin nutzt eigenes CSS. */
.ga-header{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding:14px 16px; margin:16px 0 0; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
}
.ga-header-brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.ga-header-status{ font-size:12px; text-align:right; color:var(--muted); }
.layout.layout-global-admin{
  display:flex; flex-direction:row; align-items:stretch;
  min-height:calc(100vh - 120px); margin:16px 0; 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:var(--surface2);
  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:var(--surface3); color:var(--text); border:1px solid var(--line); }
.ga-reseller-sidebar .reseller-item:hover{ background:var(--surface-hover); }
.ga-reseller-sidebar .reseller-item.ga-reseller-item--active{
  border-color:var(--accent); box-shadow:inset 3px 0 0 var(--accent); background:var(--accent-soft);
}
@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(--surface3); color:var(--text-soft); border:1px solid var(--line); margin-left:6px }
.panel-actions button:hover{ background:var(--surface-hover); filter:none; }
.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:var(--text-soft); word-break:break-all; margin-right:0; font-weight:400; }
.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:var(--surface2); border-bottom:1px solid var(--line); text-align:left; padding:10px 9px; font-size:12px; font-weight:700; color:var(--text-soft); }
tbody td{ padding:9px; border-bottom:1px solid var(--surface3); font-size:12px; vertical-align:top; white-space:nowrap; color:var(--text); }
tbody tr:hover{ background:var(--surface2); cursor:pointer }
.pager{ display:flex; align-items:center; gap:10px; padding:10px 4px 0; color:var(--text-soft); }
#detailOverlay{ display:none; position:fixed; inset:0; background:rgba(15,23,42,.4); z-index:1000 }
#detailPanel{ display:none; position:fixed; right:0; top:0; height:100%; width:min(720px, 96%); background:var(--card); color:var(--text); border-left:1px solid var(--line); overflow:auto; z-index:1001; box-shadow:-16px 0 40px rgba(16,24,40,.16) }
#detailPanel header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line) }
#detailBody{ padding:16px }
.card{ margin:12px 0; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--card); box-shadow:var(--shadow) }
.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:var(--muted) }
.kv > div:last-child{ min-width:0; word-break:break-word; overflow-wrap:anywhere; }
.muted{ color:var(--muted) }
.btn{ display:inline-block; padding:9px 14px; border-radius:8px; background:var(--accent); color:#fff; text-decoration:none; font-weight:600; font-size:13px; }
.btn:hover{ filter:brightness(.95); }
.disabled-link{ pointer-events:none; opacity:.45; }

/* Badges (pastell – funktionieren auf hell & dunkel) */
.source-badge{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; 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:#e8f0ff; color:#1d4ed8; border-color:#bcd3ff; }
.source-badge-xvantage::before{ background:#2563eb; }
.source-badge-manual{ background:#fdf0e3; color:#b76e00; border-color:#f3d9b5; }
.source-badge-manual::before{ background:#d97706; }
.source-badge-xvantage-manual{ background:#f3eaff; color:#6d28d9; border-color:#ddc9f7; }
.source-badge-xvantage-manual::before{ background:#7c3aed; }
.chaos-badge{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; 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:#e7f6ec; color:#1a7f37; border-color:#bfe6cc; }
.chaos-badge-on::before{ background:#16a34a; }
.chaos-badge-off{ background:#fdeceb; color:#c0362c; border-color:#f6c9c5; }
.chaos-badge-off::before{ background:#dc2626; }

/* 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(15,23,42,.45); }
.modal-panel{ position:relative; width:min(640px, 100%); max-height:92vh; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 60px rgba(16,24,40,.22); }
.modal-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding: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:1px solid var(--line); border-radius:8px; background:var(--surface3); color:var(--text-soft); font-size:22px; line-height:1; cursor:pointer; }
.modal-close-btn:hover{ background:var(--surface-hover); filter:none; }
.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 16px 16px; margin-top:4px; border-top:1px solid var(--line); }
.modal-footer button{ margin-right:0; }

/* Login-Overlay */
.login-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:2000; display:flex; align-items:center; justify-content:center; padding:16px; }
.login-box{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px; min-width:360px; max-width:860px; max-height:90vh; overflow:auto; box-shadow:0 24px 60px rgba(16,24,40,.22); }
.login-box h2{ margin:0 0 8px 0; font-size:21px; color:var(--text); }
.login-hint{ font-size:13px; color:var(--muted); 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:#b42318; background:#fef3f2; border:1px solid #fecdca; border-radius:8px; padding:8px 10px; font-size:13px; margin-top:10px; }
.register-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; padding-right:2px; }
.register-grid .register-col-span{ grid-column:1 / -1; }
.register-actions{ position:sticky; bottom:0; background:var(--card); border-top:1px solid var(--line); margin-top:10px; padding-top:12px; }
/* Gruppierte Registrierung */
#registerForm{ max-height:72vh; overflow:auto; padding-right:6px; }
.register-section{ border:1px solid var(--line); border-radius:12px; padding:14px 16px 6px; margin:0 0 14px 0; background:var(--surface2); }
.register-section > legend{ font-size:13px; font-weight:700; color:var(--text); padding:0 8px; display:flex; align-items:center; gap:8px; }
.register-optional{ font-size:11px; font-weight:500; color:var(--muted); }
.register-hint{ font-size:12px; color:var(--muted); margin:0 0 10px 0; }
.help-badge{ width:20px !important; height:20px; min-width:20px; line-height:18px; padding:0 !important; margin:0 !important; border-radius:50%; border:1px solid var(--accent); background:var(--accent-soft); color:var(--accent); font-size:12px; font-weight:700; cursor:pointer; text-align:center; }
.help-badge:hover{ filter:brightness(.97); }
.register-check{ display:flex !important; flex-direction:row !important; align-items:flex-start; gap:8px; margin-bottom:10px; font-size:13px; color:var(--text-soft); font-weight:400; }
.register-check input{ min-width:unset !important; width:auto !important; margin-top:2px; }
.register-check a{ color:var(--accent); text-decoration:underline; }
.register-success{ background:#e7f6ec; border:1px solid #bfe6cc; color:#1a7f37; border-radius:10px; padding:14px 16px; font-size:13px; margin-bottom:12px; line-height:1.45; }
/* Hilfe-Popup (Xvantage) */
.help-modal{ position:fixed; inset:0; z-index:2200; display:flex; align-items:center; justify-content:center; }
.help-modal-backdrop{ position:absolute; inset:0; background:rgba(15,23,42,.45); }
.help-modal-panel{ position:relative; z-index:1; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:0; width:min(560px,92vw); max-height:86vh; overflow:auto; box-shadow:0 24px 60px rgba(16,24,40,.22); }
.help-modal-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px; border-bottom:1px solid var(--line); color:var(--text); }
.help-modal-close{ width:auto !important; min-width:28px; background:var(--surface3) !important; color:var(--text-soft) !important; border:1px solid var(--line); border-radius:8px; padding:2px 10px !important; margin:0 !important; cursor:pointer; font-size:18px; line-height:1; }
.help-modal-body{ padding:16px 18px 18px; color:var(--text-soft); font-size:13px; line-height:1.5; }
.help-steps{ margin:8px 0 12px 18px; padding:0; display:flex; flex-direction:column; gap:6px; }
.help-modal-body a{ color:var(--accent); text-decoration:underline; }

/* Dropdown-Menüs (Benutzer-Menü oben rechts, „Mehr“ in der Werkzeugleiste) */
[hidden]{ display:none !important; }
.user-menu,.more-menu{ position:relative; display:inline-block; }
.user-menu-btn{ display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 8px; border:1px solid var(--line-strong); border-radius:8px; background:var(--card); color:var(--text-soft); cursor:pointer; }
.user-menu-btn:hover{ background:var(--surface-hover); filter:none; }
.user-menu-avatar{ width:26px; height:26px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; }
.user-menu-avatar::before{ content:'\1F464'; }
.user-menu-caret::before{ content:'\25BE'; font-size:10px; color:var(--muted); }
.btn-more{ background:var(--card); color:var(--text-soft); border:1px solid var(--line-strong); }
.btn-more:hover{ background:var(--surface-hover); filter:none; }
.user-menu-pop,.more-menu-pop{ position:absolute; top:calc(100% + 6px); min-width:190px; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:6px; z-index:600; display:flex; flex-direction:column; gap:2px; }
.user-menu-pop{ right:0; }
.more-menu-pop{ left:0; }
.user-menu-item,.more-menu-item{ display:block; width:100%; text-align:left; background:transparent; color:var(--text); border:none; border-radius:7px; padding:9px 12px; font-size:13px; font-weight:500; margin:0; }
.user-menu-item:hover,.more-menu-item:hover{ background:var(--surface3); filter:none; }

/* Dashboard */
#dashboardPage{ margin-top:16px; }
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:16px; }
.kpi-card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px; }
.kpi-card .kpi-label{ font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; display:flex; align-items:center; gap:8px; }
.kpi-card .kpi-value{ font-size:30px; font-weight:800; color:var(--text); line-height:1.05; }
.kpi-card .kpi-sub{ font-size:12px; color:var(--text-soft); }
.kpi-card .kpi-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.kpi-accent{ border-top:3px solid var(--accent); }
.kpi-green{ border-top:3px solid #16a34a; }
.kpi-amber{ border-top:3px solid #d97706; }
.kpi-violet{ border-top:3px solid #7c3aed; }
.kpi-teal{ border-top:3px solid #0d9488; }
.kpi-rose{ border-top:3px solid #e11d48; }
.chart-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; margin-top:14px; }
.chart-card h4{ margin:0 0 12px 0; font-size:14px; color:var(--text); }
.chart-card--wide{ grid-column:span 1; }
.chart-mount{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.donut-legend{ display:flex; flex-direction:column; gap:8px; }
.donut-legend .leg{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-soft); }
.donut-legend .leg b{ color:var(--text); }
.donut-legend .swatch{ width:12px; height:12px; border-radius:3px; flex:0 0 12px; }
.chart-empty{ color:var(--muted); font-size:13px; padding:8px 0; }

/* Balkendiagramme (Top-Kunden) */
.chart-bars{ display:flex; flex-direction:column; gap:10px; }
.bar-row{ display:grid; grid-template-columns:minmax(90px,38%) 1fr auto; align-items:center; gap:10px; }
.bar-label{ font-size:12.5px; color:var(--text-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-track{ background:var(--surface3); border-radius:999px; height:12px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:999px; min-width:3px; transition:width .4s ease; }
.bar-value{ font-size:12.5px; font-weight:700; color:var(--text); white-space:nowrap; }

/* Gruppenzeile (Renewals nach Kunde) */
.table .group-row td{ background:var(--surface3); color:var(--text); border-top:2px solid var(--line); }
.table th.sortable:hover{ color:var(--accent); }

/* Feature-Tabellen (Onboarding, Renewals, Kosten, Zertifikate, Berichte …):
   passen sich an die Containerbreite an, Text bricht um statt ueberzulaufen;
   bei sehr vielen Spalten greift horizontales Scrollen statt Ueberlauf. */
.table-box{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-box table.table{ width:100%; min-width:0; }
.table-box table.table thead th,
.table-box table.table tbody td{ white-space:normal; word-break:break-word; overflow-wrap:anywhere; }

/* Ablauf-/Zertifikats-Badges */
.cert-badge{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; }
.cert-ok{ background:#dcfce7; color:#166534; }
.cert-soon{ background:#dbeafe; color:#1e40af; }
.cert-warn{ background:#fef3c7; color:#92400e; }
.cert-exp{ background:#fee2e2; color:#991b1b; }
.cert-unknown{ background:var(--surface3); color:var(--muted); }
html[data-theme="dark"] .cert-ok{ background:rgba(34,197,94,.18); color:#86efac; }
html[data-theme="dark"] .cert-soon{ background:rgba(59,130,246,.18); color:#93c5fd; }
html[data-theme="dark"] .cert-warn{ background:rgba(217,119,6,.20); color:#fcd34d; }
html[data-theme="dark"] .cert-exp{ background:rgba(239,68,68,.20); color:#fca5a5; }

/* Seitenkopf + gruppierte Formulare (Account/Benutzer) */
.page-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:2px 0 14px; }
.page-head h3{ margin:0; font-size:16px; }
.page-head .page-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.form-sections{ display:grid; gap:0; }
.form-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding-top:4px; }
.role-badge,.state-badge{ display:inline-flex; align-items:center; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700; border:1px solid transparent; }
.role-admin{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.role-user{ background:var(--surface3); color:var(--text-soft); border-color:var(--line-strong); }
.role-read{ background:#f3eaff; color:#6d28d9; border-color:#ddc9f7; }
html[data-theme="dark"] .role-read{ background:rgba(124,58,237,.18); color:#ccb0ff; border-color:rgba(124,58,237,.42); }
.state-on{ background:#e7f6ec; color:#1a7f37; border-color:#bfe6cc; }
.state-off{ background:#fdeceb; color:#c0362c; border-color:#f6c9c5; }
html[data-theme="dark"] .state-on{ background:rgba(22,163,74,.16); color:#7fe0a3; border-color:rgba(22,163,74,.4); }
html[data-theme="dark"] .state-off{ background:rgba(220,38,38,.16); color:#ff9a93; border-color:rgba(220,38,38,.42); }
.account-form-section .register-grid label,.form-sections .register-grid label{ width:100%; }

/* Detail-Panel: Header-Aktionen, Ghost-Buttons, Vollbild */
.detail-head-actions{ display:flex; align-items:center; gap:8px; }
.btn-ghost{ background:var(--surface3); color:var(--text-soft); border:1px solid var(--line); padding:6px 12px; border-radius:8px; cursor:pointer; font-weight:600; font-size:13px; }
.btn-ghost:hover{ background:var(--surface-hover); filter:none; }
#detailPanel.detail-expanded{ width:100%; }
#detailPanel.detail-expanded #detailBody{ max-width:1200px; margin:0 auto; }

/* Badge-Dark-Varianten (passend zum dunklen Modus) */
html[data-theme="dark"] .source-badge-xvantage{ background:rgba(59,130,246,.16); color:#9cc4ff; border-color:rgba(59,130,246,.38); }
html[data-theme="dark"] .source-badge-xvantage::before{ background:#5aa2ff; }
html[data-theme="dark"] .source-badge-manual{ background:rgba(217,119,6,.16); color:#f2c179; border-color:rgba(217,119,6,.38); }
html[data-theme="dark"] .source-badge-manual::before{ background:#e69636; }
html[data-theme="dark"] .source-badge-xvantage-manual{ background:rgba(124,58,237,.18); color:#ccb0ff; border-color:rgba(124,58,237,.42); }
html[data-theme="dark"] .source-badge-xvantage-manual::before{ background:#a984ff; }
html[data-theme="dark"] .chaos-badge-on{ background:rgba(22,163,74,.16); color:#7fe0a3; border-color:rgba(22,163,74,.4); }
html[data-theme="dark"] .chaos-badge-on::before{ background:#3ddc8a; }
html[data-theme="dark"] .chaos-badge-off{ background:rgba(220,38,38,.16); color:#ff9a93; border-color:rgba(220,38,38,.42); }
html[data-theme="dark"] .chaos-badge-off::before{ background:#ff6b61; }
html[data-theme="dark"] .register-success{ background:rgba(22,163,74,.14); color:#9fe7ba; border-color:rgba(22,163,74,.4); }
html[data-theme="dark"] .login-error{ background:rgba(220,38,38,.14); color:#ffb0aa; border-color:rgba(220,38,38,.4); }

/* Global-Admin Sichtbarkeitssteuerung */
.is-platform-hidden{ display:none !important; }

/* Plattform-Banner (Global-Admin Ankuendigung/Wartung) */
.platform-banner-wrap{ display:flex; flex-direction:column; gap:6px; padding:8px 16px 0; }
.platform-banner{ display:flex; align-items:flex-start; gap:10px; padding:10px 14px; border-radius:10px;
  font-size:13.5px; line-height:1.4; border:1px solid transparent; }
.platform-banner .pb-ic{ font-weight:800; flex:0 0 auto; }
.platform-banner.info{ background:#e8f0ff; color:#1e40af; border-color:#bcd3ff; }
.platform-banner.warn{ background:#fef7e6; color:#92590a; border-color:#f3d9b5; }
.platform-banner.critical{ background:#fdeceb; color:#b42318; border-color:#fecdca; }
.platform-banner.success{ background:#e7f6ec; color:#1a7f37; border-color:#b6e2c4; }
html[data-theme="dark"] .platform-banner.info{ background:rgba(37,99,235,.16); color:#bcd3ff; border-color:rgba(37,99,235,.4); }
html[data-theme="dark"] .platform-banner.warn{ background:rgba(217,119,6,.16); color:#fcd9a3; border-color:rgba(217,119,6,.4); }
html[data-theme="dark"] .platform-banner.critical{ background:rgba(220,38,38,.16); color:#ffb0aa; border-color:rgba(220,38,38,.4); }
html[data-theme="dark"] .platform-banner.success{ background:rgba(22,163,74,.16); color:#9fe7ba; border-color:rgba(22,163,74,.4); }