/* Retter-Portal v1.3.21 - neue Sidebar und organisationsgebundener DEV-Modus. */

:root{--sidebar-width:304px;}

/* Sidebar: klare Icon-Navigation ohne Buchstaben-Kaestchen. */
html body .sidebar{
  padding:14px 12px 24px!important;
  background:
    radial-gradient(circle at 15% -5%,rgba(225,29,72,.13),transparent 21rem),
    linear-gradient(180deg,#09111f 0%,#0a1525 48%,#08111f 100%)!important;
  border-right:1px solid rgba(148,163,184,.13)!important;
  box-shadow:18px 0 50px rgba(2,6,23,.22)!important;
  scrollbar-width:thin;
  scrollbar-color:rgba(148,163,184,.28) transparent;
}
html body .sidebar::before{content:none!important;display:none!important;}
html body .sidebar::-webkit-scrollbar{width:6px;}
html body .sidebar::-webkit-scrollbar-track{background:transparent;}
html body .sidebar::-webkit-scrollbar-thumb{background:rgba(148,163,184,.28);border-radius:999px;}
html body .sidebar .brand{
  position:relative!important;
  top:auto!important;
  width:auto!important;
  min-width:0!important;
  margin:0 4px 14px!important;
  padding:10px 8px 18px!important;
  gap:12px!important;
  border:0!important;
  border-bottom:1px solid rgba(148,163,184,.13)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
html body .sidebar .brand-logo-wrap{
  width:44px!important;
  min-width:44px!important;
  height:44px!important;
  border-radius:15px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:0 10px 28px rgba(2,6,23,.28)!important;
}
html body .sidebar .brand-logo{max-width:36px!important;max-height:36px!important;object-fit:contain!important;}
html body .sidebar .brand-text{display:block!important;position:static!important;width:auto!important;height:auto!important;min-width:0!important;overflow:visible!important;clip:auto!important;white-space:normal!important;color:#f8fafc!important;font-size:1.04rem!important;line-height:1.12!important;}
html body .sidebar .brand-text small,
html body .sidebar .brand-context{
  display:block!important;
  width:auto!important;
  margin-top:5px!important;
  color:#8796aa!important;
  font-size:.64rem!important;
  line-height:1.25!important;
  font-weight:900!important;
  letter-spacing:.105em!important;
  text-align:left!important;
  white-space:normal!important;
}
html body .sidebar .brand-context.is-dev{color:#fda4af!important;}
html body .sidebar .sidebar-nav{display:flex!important;flex-direction:column!important;gap:2px!important;min-width:0!important;}
html body .sidebar .nav-section{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin:18px 10px 7px!important;
  color:#74839a!important;
  font-size:.66rem!important;
  font-weight:950!important;
  letter-spacing:.15em!important;
}
html body .sidebar .nav-section::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,rgba(148,163,184,.18),transparent);}
html body .sidebar .nav-section span{width:auto!important;text-align:left!important;white-space:nowrap!important;}
html body .sidebar nav a.sidebar-nav-link > .sidebar-nav-icon,
html body .sidebar nav a.sidebar-nav-link > .sidebar-nav-label{
  flex:none!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  letter-spacing:normal!important;
  text-transform:none!important;
}
html body .sidebar nav a.sidebar-nav-link:hover > .sidebar-nav-icon,
html body .sidebar nav a.sidebar-nav-link:hover > .sidebar-nav-label,
html body .sidebar nav a.sidebar-nav-link.active > .sidebar-nav-icon,
html body .sidebar nav a.sidebar-nav-link.active > .sidebar-nav-label{background:transparent!important;background-image:none!important;box-shadow:none!important;}
html body .sidebar nav a.sidebar-nav-link{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  min-width:0!important;
  min-height:44px!important;
  margin:1px 0!important;
  padding:9px 11px!important;
  border:1px solid transparent!important;
  border-radius:13px!important;
  background:transparent!important;
  color:#c9d4e3!important;
  font-size:.91rem!important;
  font-weight:820!important;
  box-shadow:none!important;
  transform:none!important;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease!important;
}
html body .sidebar nav a.sidebar-nav-link:hover{
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(148,163,184,.12)!important;
  color:#fff!important;
  transform:translateX(2px)!important;
}
html body .sidebar nav a.sidebar-nav-link.active{
  background:linear-gradient(90deg,rgba(225,29,72,.18),rgba(30,41,59,.36))!important;
  border-color:rgba(251,113,133,.22)!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018),0 8px 24px rgba(2,6,23,.16)!important;
}
html body .sidebar nav a.sidebar-nav-link.active::before{
  content:""!important;
  position:absolute!important;
  left:-1px!important;
  top:9px!important;
  bottom:9px!important;
  width:3px!important;
  border-radius:0 999px 999px 0!important;
  background:#fb3153!important;
  box-shadow:0 0 16px rgba(251,49,83,.55)!important;
}
html body .sidebar .sidebar-nav-icon{
  width:22px!important;
  min-width:22px!important;
  height:22px!important;
  display:grid!important;
  place-items:center!important;
  color:#8392a8!important;
  text-align:center!important;
  transition:color .16s ease,transform .16s ease!important;
}
html body .sidebar .sidebar-nav-icon svg{display:block!important;width:20px!important;height:20px!important;}
html body .sidebar nav a.sidebar-nav-link:hover .sidebar-nav-icon{color:#dbe6f5!important;}
html body .sidebar nav a.sidebar-nav-link.active .sidebar-nav-icon{color:#fb7185!important;transform:scale(1.04)!important;}
html body .sidebar .sidebar-nav-label{
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  text-align:left!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
html body .sidebar .nav-count{
  flex:0 0 auto!important;
  margin-left:auto!important;
  min-width:25px!important;
  height:22px!important;
  padding:0 7px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  background:rgba(148,163,184,.22)!important;
  color:#e8eef7!important;
  font-size:.68rem!important;
  font-style:normal!important;
  font-weight:950!important;
  line-height:1!important;
}
html body .sidebar nav a.sidebar-nav-link.active .nav-count{background:rgba(251,113,133,.2)!important;color:#fecdd3!important;}

/* DEV-Organisation eindeutig statt einzelne Accounts markieren. */
html body .dev-organization-chip,
html body .dev-organization-badge{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:0!important;
  padding:7px 10px!important;
  border:1px solid rgba(244,63,94,.24)!important;
  border-radius:999px!important;
  background:rgba(244,63,94,.10)!important;
  color:#e11d48!important;
  font-size:.72rem!important;
  font-weight:950!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
body[data-theme="dark"] .dev-organization-chip,
body[data-theme="dark"] .dev-organization-badge{color:#fda4af!important;border-color:rgba(251,113,133,.3)!important;background:rgba(190,24,93,.16)!important;}
html body .topbar-context{display:flex!important;align-items:center!important;gap:9px!important;min-width:0!important;}
html body .launch-kpi-grid .tone-dev,
html body .launch-organization-card.is-dev-organization{
  border-color:rgba(244,63,94,.24)!important;
  background-image:linear-gradient(135deg,rgba(244,63,94,.055),transparent 52%)!important;
}
html body .launch-health-dot.tone-dev{background:#f43f5e!important;box-shadow:0 0 0 5px rgba(244,63,94,.12)!important;}
html body .pill.tone-dev{background:rgba(244,63,94,.12)!important;color:#be123c!important;}
body[data-theme="dark"] .pill.tone-dev{color:#fda4af!important;}
html body .dev-organization-toggle{
  align-items:flex-start!important;
  padding:14px!important;
  border-color:rgba(244,63,94,.22)!important;
  background:linear-gradient(135deg,rgba(244,63,94,.07),rgba(30,41,59,.025))!important;
}
html body .dev-organization-toggle input{margin-top:3px!important;}
html body .dev-organization-toggle span{display:grid!important;gap:4px!important;min-width:0!important;}
html body .dev-organization-toggle strong{color:var(--text)!important;}
html body .dev-organization-toggle small{color:var(--muted)!important;line-height:1.45!important;font-weight:750!important;}

@media(max-width:1180px){
  html body .topbar-context .dev-organization-chip{font-size:.66rem!important;padding:6px 8px!important;}
}
@media(max-width:980px){
  :root{--sidebar-width:304px;}
  html body .sidebar{width:min(88vw,330px)!important;max-width:330px!important;}
}
@media(max-width:760px){
  html body .sidebar{padding-top:calc(12px + env(safe-area-inset-top))!important;width:min(90vw,326px)!important;}
  html body .sidebar nav a.sidebar-nav-link{min-height:46px!important;padding:10px 11px!important;font-size:.94rem!important;}
  html body .rp-mobile-header__context{display:grid!important;gap:8px!important;}
  html body .dev-organization-chip--mobile{justify-self:start!important;max-width:100%!important;white-space:normal!important;text-align:left!important;line-height:1.25!important;}
}
@media(max-width:420px){
  html body .sidebar .brand{padding-left:5px!important;padding-right:5px!important;}
  html body .sidebar .brand-logo-wrap{width:40px!important;min-width:40px!important;height:40px!important;}
  html body .sidebar .sidebar-nav-label{white-space:normal!important;line-height:1.25!important;}
  html body .sidebar nav a.sidebar-nav-link{align-items:start!important;}
  html body .sidebar .sidebar-nav-icon{margin-top:1px!important;}
}