/* ═══════════════════════════════════════════════════════════
   sidebar-v3.css — Compliance Suite · Sidebar Component v3
   Verwendet CSS-Variablen der jeweiligen Seite (--bg2, --bg3 …)
   Werkzeug-Farbe wird per JS als --sb3-active gesetzt.
═══════════════════════════════════════════════════════════ */

/* CSS Variable für Module die sie brauchen */
:root {
  --sidebar-width: 200px;
  --sidebar-width-collapsed: 48px;
}

#sidebar {
  /* Fallback-Werte für Seiten die noch kein Design-System haben */
  --sb3-active:     #16A34A;
  --sb3-active-dim: rgba(22,163,74,.12);

  /* KRITISCH: Fixed Positioning für Sidebar - mit !important für alle Eigenschaften */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE/Edge */

  background: #FFFFFF !important;
  border-right: 1px solid var(--sidebar-border, var(--border, var(--b1, rgba(255,255,255,.06)))) !important;
  display: flex !important;
  flex-direction: column !important;
  transition: width .18s ease, min-width .18s ease;
  z-index: 100 !important;
  flex-shrink: 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  box-sizing: border-box !important;

  /* Stabiles Schrift-Rendering ohne Springen */
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: geometricPrecision !important;
}
#sidebar::-webkit-scrollbar { display: none !important; } /* Chrome/Safari */
#sidebar.collapsed { width: 48px !important; min-width: 48px !important; max-width: 48px !important; }

/* Dark Mode für Sidebar */
[data-theme="dark"] #sidebar {
  background: #1A1D27 !important;
  border-right-color: rgba(255,255,255,.07) !important;
}

/* ── Logo-Bereich ─────────────────────────────────────── */
.sb3-logo {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.09));
  flex-shrink: 0;
  height: 72px;
  box-sizing: border-box;
}

.sb3-logo-img {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer;
  flex: 1;
}

.sb3-lux-logo {
  height: 44px;
  width: auto;
  object-fit: contain;
}

/* Expand-Pfeil im collapsed state */
.sb3-logo-img .wm3-expand {
  display: none; align-items: center; justify-content: center; line-height: 0;
  color: var(--text2, #44526E);
}

/* Collapsed: Logo verstecken, Expand-Pfeil zeigen */
#sidebar.collapsed .sb3-logo { padding: 10px; gap: 0; justify-content: center; height: 56px; }
#sidebar.collapsed .sb3-lux-logo { display: none; }
#sidebar.collapsed .sb3-logo-img .wm3-expand { display: flex; }
#sidebar.collapsed .sb3-logo-img {
  background: var(--bg3, #f4f5f7);
  width: 32px; height: 32px; border-radius: 8px;
}
#sidebar.collapsed .sb3-logo-img:hover { background: var(--sb3-active-dim); }
#sidebar.collapsed .sb3-logo-img:hover .wm3-expand svg { stroke: var(--sb3-active); }

.sb3-toggle {
  margin-left: auto; background: none; border: none;
  cursor: pointer; color: var(--text3, #8590A2); padding: 3px;
  border-radius: 4px; display: flex; flex-shrink: 0;
  transition: color .12s, transform .18s;
}
.sb3-toggle:hover { color: var(--text, #172B4D); }
#sidebar.collapsed .sb3-toggle { display: none; }

/* ── Kundenkontext ────────────────────────────────────── */
.sb3-org-context {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.09));
  flex-shrink: 0;
  height: 50px; box-sizing: border-box;
}
.sb3-org-link {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 6px;
  text-decoration: none;
  font-size: 11.5px;
  cursor: pointer;
  transition: background .12s;
  height: 34px; box-sizing: border-box;
  line-height: 1;
}
.sb3-org-link:hover { background: var(--bg3, #f4f5f7); }

.sb3-org-icon {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sb3-org-name {
  flex: 1; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
  font-weight: 500; line-height: 18px;
}
.sb3-org-arrow {
  flex-shrink: 0; opacity: .5;
  display: flex; align-items: center;
}

/* Kein Kunde: Warnfarbe */
.sb3-org-context.sb3-no-org .sb3-org-link {
  background: rgba(234,88,12,.08);
  color: #EA580C;
}
.sb3-org-context.sb3-no-org .sb3-org-link:hover {
  background: rgba(234,88,12,.15);
}
.sb3-org-context.sb3-no-org .sb3-org-name {
  font-weight: 500;
}

/* Kunde ausgewählt: Akzentfarbe */
.sb3-org-context.sb3-has-org .sb3-org-link {
  color: var(--sb3-active, #16A34A);
  background: var(--sb3-active-dim, rgba(22,163,74,.08));
}
.sb3-org-context.sb3-has-org .sb3-org-link:hover {
  background: var(--sb3-active-dim, rgba(22,163,74,.12));
}

/* Collapsed: nur Icon zeigen */
#sidebar.collapsed .sb3-org-context { padding: 6px; }
#sidebar.collapsed .sb3-org-link { justify-content: center; padding: 6px; }
#sidebar.collapsed .sb3-org-name,
#sidebar.collapsed .sb3-org-arrow { display: none; }
#sidebar.collapsed .sb3-org-icon { width: 22px; height: 22px; }

/* ── Navigation ───────────────────────────────────────── */
.sb3-nav { flex: 1; overflow-y: auto; padding: 6px; }
.sb3-nav::-webkit-scrollbar { display: none; }

.sb3-section {
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text3, #8590A2);
  padding: 8px 6px 3px; white-space: nowrap; overflow: hidden;
  line-height: 1; height: 20px; box-sizing: border-box;
}
#sidebar.collapsed .sb3-section { visibility: hidden; height: 4px; padding: 0; }

.sb3-link {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px;
  text-decoration: none; color: var(--text2, #44526E);
  font-size: 12px; cursor: pointer;
  transition: background .1s, color .1s;
  white-space: nowrap;
  line-height: 1; height: 30px; box-sizing: border-box;
}
.sb3-link:hover { background: var(--bg3, #f4f5f7); color: var(--text, #172B4D); }

/* Aktiver Link: Farbe kommt von --sb3-active (per JS gesetzt) */
.sb3-link.on {
  background: var(--sb3-active-dim);
  color: var(--sb3-active);
}
.sb3-link.on .sb3-icon { background: var(--sb3-active-dim); }

.sb3-icon {
  width: 18px; height: 18px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: inherit;
}

.sb3-label { overflow: hidden; line-height: 18px; }

.sb3-badge {
  margin-left: auto; flex-shrink: 0;
  color: #fff; font-size: 9.5px; font-weight: 700;
  border-radius: 10px; padding: 1px 5px; min-width: 16px;
  text-align: center;
  background: var(--sb3-active);
}

/* Gesperrte Module */
.sb3-link.locked { opacity: .4; pointer-events: none; }
.sb3-lock {
  margin-left: auto; flex-shrink: 0;
  color: var(--text3, #8590A2); opacity: .7;
  display: flex; align-items: center;
}

/* Collapsed: Labels, Badges, Locks ausblenden; Icons zentrieren */
#sidebar.collapsed .sb3-label,
#sidebar.collapsed .sb3-badge,
#sidebar.collapsed .sb3-lock  { display: none; }
#sidebar.collapsed .sb3-link  { justify-content: center; }
#sidebar.collapsed .sb3-icon  { width: 22px; height: 22px; }

.sb3-sep { height: 1px; background: var(--border, rgba(0,0,0,.09)); margin: 5px 6px; }

/* ── User-Bereich (Mandant) ───────────────────────────── */
.sb3-user {
  padding: 8px 6px;
  border-top: 1px solid var(--border, rgba(0,0,0,.09));
  flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  height: 52px; box-sizing: border-box;
}
.sb3-userrow {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 6px;
  flex: 1; min-width: 0;
  height: 36px; box-sizing: border-box;
}

.sb3-avatar {
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--sb3-active, #6B7280);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0;
  line-height: 1;
}

.sb3-userinfo { overflow: hidden; min-width: 0; height: 26px; display: flex; flex-direction: column; justify-content: center; }
.sb3-uname {
  font-size: 11.5px; font-weight: 600;
  color: var(--text, #172B4D);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 14px; height: 14px;
}
.sb3-urole { font-size: 9.5px; color: var(--text3, #8590A2); line-height: 12px; height: 12px; }

#sidebar.collapsed .sb3-userinfo { display: none; }
#sidebar.collapsed .sb3-userrow  { justify-content: center; padding: 5px; }

/* ── Actions (Theme, Logout) ─────────────────────────────── */
.sb3-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.sb3-iconbtn {
  width: 28px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text3, #8590A2);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.sb3-iconbtn:hover {
  background: var(--bg3, #f4f5f7);
  color: var(--text, #172B4D);
}
.sb3-iconbtn svg { flex-shrink: 0; }

.sb3-logout:hover {
  background: rgba(220,38,38,.1);
  color: #DC2626;
}

#sidebar.collapsed .sb3-actions { display: none; }

/* ═══════════════════════════════════════════════════════════
   Global Layout — Fixed Sidebar + Main Content
   Diese Regeln stellen sicher, dass Main-Content direkt neben
   der Sidebar beginnt (kein Gap), unabhängig vom Module-Layout.
   ═══════════════════════════════════════════════════════════ */

/* Main-Content-Elemente: Direktes Sibling nach #sidebar */
#sidebar ~ .main,
#sidebar ~ .sidebar-main,
#sidebar ~ .bcm-main,
#sidebar ~ .wizard-main-wrap,
#sidebar ~ .main-wrap,
#sidebar ~ .shell {
  margin-left: 200px !important;
  padding-left: 0 !important;
}

#sidebar.collapsed ~ .main,
#sidebar.collapsed ~ .sidebar-main,
#sidebar.collapsed ~ .bcm-main,
#sidebar.collapsed ~ .wizard-main-wrap,
#sidebar.collapsed ~ .main-wrap,
#sidebar.collapsed ~ .shell {
  margin-left: 48px !important;
}