/* Retter-Portal v1.3.35
   Whitemode übernimmt exakt dieselbe Sidebar-Geometrie und Typografie wie der Darkmode.
   Alte Lightmode-Span-Regeln werden gezielt neutralisiert; Eyebrow-Dekorationen bereinigt. */

/* --------------------------------------------------------------------------
   SIDEBAR: EINE GEMEINSAME GEOMETRIE FÜR BEIDE THEMES
   -------------------------------------------------------------------------- */
html body .sidebar{
  width:286px!important;
  min-width:286px!important;
  max-width:286px!important;
  padding:14px 13px 22px!important;
}
html body .sidebar-brand-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 32px!important;
  align-items:start!important;
  column-gap:7px!important;
  min-height:72px!important;
  padding:0 0 14px!important;
  margin:0 0 14px!important;
}
html body .sidebar .brand{
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:4px 0 0 4px!important;
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
html body .sidebar .brand-logo-wrap,
html body .sidebar .brand-logo{
  width:46px!important;
  min-width:46px!important;
  max-width:46px!important;
  height:46px!important;
  max-height:46px!important;
}
html body .sidebar .brand-text{
  display:block!important;
  min-width:0!important;
  width:auto!important;
  height:auto!important;
  font-size:1.16rem!important;
  line-height:1.05!important;
  letter-spacing:-.022em!important;
  font-weight:950!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  text-transform:none!important;
}
html body .sidebar .brand-context,
html body .sidebar .brand-text small{
  display:block!important;
  width:max-content!important;
  max-width:100%!important;
  height:auto!important;
  margin-top:5px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:.65rem!important;
  line-height:1.15!important;
  letter-spacing:.045em!important;
  font-weight:900!important;
  white-space:nowrap!important;
  text-transform:uppercase!important;
}
html body .sidebar-collapse-toggle{
  position:static!important;
  grid-column:2!important;
  grid-row:1!important;
  align-self:start!important;
  justify-self:end!important;
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  margin:7px 0 0!important;
  padding:0!important;
  border-radius:9px!important;
}
html body .sidebar-collapse-toggle__icon{width:15px!important;height:15px!important;}
html body .sidebar .nav-section{
  margin:18px 10px 8px!important;
  font-size:.72rem!important;
  line-height:1.2!important;
  letter-spacing:.14em!important;
  font-weight:950!important;
  white-space:nowrap!important;
}
html body .sidebar nav a.sidebar-nav-link{
  display:flex!important;
  align-items:center!important;
  min-height:48px!important;
  margin:2px 0!important;
  padding:12px 13px!important;
  gap:11px!important;
  border-radius:15px!important;
  font-size:1.015rem!important;
  line-height:1.18!important;
  font-weight:840!important;
  letter-spacing:-.012em!important;
  text-transform:none!important;
  overflow:hidden!important;
}

/* Alte Regeln wie body[data-theme="light"] .sidebar nav a span hatten ALLE Spans
   auf 30x30px gesetzt. Icon und Text werden deshalb hier explizit getrennt. */
html body .sidebar nav a.sidebar-nav-link > span.sidebar-nav-icon,
html body[data-theme="light"] .sidebar nav a.sidebar-nav-link > span.sidebar-nav-icon{
  display:grid!important;
  place-items:center!important;
  flex:0 0 24px!important;
  width:24px!important;
  min-width:24px!important;
  max-width:24px!important;
  height:24px!important;
  min-height:24px!important;
  max-height:24px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  font-size:inherit!important;
  line-height:1!important;
  letter-spacing:normal!important;
  text-transform:none!important;
}
html body .sidebar nav a.sidebar-nav-link > span.sidebar-nav-icon svg,
html body[data-theme="light"] .sidebar nav a.sidebar-nav-link > span.sidebar-nav-icon svg{
  width:20px!important;
  height:20px!important;
}
html body .sidebar nav a.sidebar-nav-link > span.sidebar-nav-label,
html body[data-theme="light"] .sidebar nav a.sidebar-nav-link > span.sidebar-nav-label{
  display:block!important;
  place-items:initial!important;
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  color:inherit!important;
  font-size:inherit!important;
  line-height:inherit!important;
  font-weight:inherit!important;
  letter-spacing:inherit!important;
  text-align:left!important;
  text-transform:none!important;
  white-space:nowrap!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
html body .sidebar .nav-count,
html body[data-theme="light"] .sidebar .nav-count{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  min-width:26px!important;
  width:auto!important;
  height:26px!important;
  margin-left:auto!important;
  padding:0 8px!important;
  border-radius:999px!important;
  font-size:.74rem!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:0!important;
  text-transform:none!important;
}

/* Lightmode übernimmt für die Sidebar ausschließlich dieselben Farben wie der Darkmode. */
html body[data-theme="light"] .sidebar{
  color:#edf3fb!important;
  background:
    radial-gradient(circle at 0 -8%,rgba(225,29,72,.17),transparent 20rem),
    radial-gradient(circle at 120% 35%,rgba(37,99,235,.10),transparent 22rem),
    linear-gradient(180deg,#091426 0%,#071120 100%)!important;
  border-right-color:rgba(148,163,184,.15)!important;
  box-shadow:16px 0 42px rgba(15,23,42,.18)!important;
}
html body[data-theme="light"] .sidebar .brand-text{color:#f8fafc!important;}
html body[data-theme="light"] .sidebar .brand-context,
html body[data-theme="light"] .sidebar .brand-text small{color:#9baabd!important;}
html body[data-theme="light"] .sidebar .nav-section{color:#8e9eb3!important;}
html body[data-theme="light"] .sidebar nav a.sidebar-nav-link{
  color:#d6e0ec!important;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
html body[data-theme="light"] .sidebar nav a.sidebar-nav-link:hover{
  color:#fff!important;
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(148,163,184,.13)!important;
}
html body[data-theme="light"] .sidebar nav a.sidebar-nav-link.active{
  color:#fff!important;
  background:linear-gradient(90deg,rgba(225,29,72,.19),rgba(37,99,235,.08))!important;
  border-color:rgba(251,113,133,.28)!important;
  box-shadow:inset 3px 0 0 #ef3154,0 10px 24px rgba(2,6,23,.15)!important;
}
html body[data-theme="light"] .sidebar .sidebar-nav-icon{color:#9dacc0!important;}
html body[data-theme="light"] .sidebar nav a.sidebar-nav-link.active .sidebar-nav-icon{color:#fb7185!important;}
html body[data-theme="light"] .sidebar .nav-count{
  color:#eef4fb!important;
  background:rgba(148,163,184,.20)!important;
  border-color:rgba(148,163,184,.15)!important;
}
html body[data-theme="light"] .sidebar-collapse-toggle{
  color:#cbd7e6!important;
  background:rgba(14,31,52,.58)!important;
  border-color:rgba(148,163,184,.10)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 3px 9px rgba(0,0,0,.08)!important;
}

/* Eingeklappte Sidebar bleibt in beiden Themes identisch. */
@media(min-width:1101px){
  html body.sidebar-collapsed .sidebar{
    width:88px!important;
    min-width:88px!important;
    max-width:88px!important;
  }
  html body.sidebar-collapsed .sidebar-brand-row{
    grid-template-columns:1fr!important;
    justify-items:center!important;
    gap:10px!important;
    padding-bottom:12px!important;
  }
  html body.sidebar-collapsed .sidebar-collapse-toggle{
    grid-column:1!important;
    grid-row:2!important;
    justify-self:center!important;
    margin:0!important;
  }
  html body.sidebar-collapsed .sidebar .brand{
    grid-template-columns:46px!important;
    justify-content:center!important;
    padding-left:0!important;
  }
  html body.sidebar-collapsed .sidebar .brand-text,
  html body.sidebar-collapsed .sidebar .nav-section,
  html body.sidebar-collapsed .sidebar .sidebar-nav-label,
  html body.sidebar-collapsed .sidebar .nav-count{display:none!important;}
  html body.sidebar-collapsed .sidebar nav a.sidebar-nav-link{
    justify-content:center!important;
    padding-left:0!important;
    padding-right:0!important;
  }
}

/* --------------------------------------------------------------------------
   PAGE EYEBROW: KEINE THEME-ABHÄNGIGEN KÄSTCHEN ODER LANGEN BALKEN
   -------------------------------------------------------------------------- */
html body .content > .page-head .eyebrow,
html body .content > .page-hero .eyebrow,
html body[data-theme="light"] .content > .page-head .eyebrow,
html body[data-theme="light"] .content > .page-hero .eyebrow{
  display:block!important;
  width:max-content!important;
  min-width:0!important;
  max-width:100%!important;
  height:auto!important;
  margin:0 0 9px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  color:#fb7185!important;
  font-size:.72rem!important;
  line-height:1.2!important;
  font-weight:950!important;
  letter-spacing:.15em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
html body .content > .page-head .eyebrow::before,
html body .content > .page-head .eyebrow::after,
html body .content > .page-hero .eyebrow::before,
html body .content > .page-hero .eyebrow::after,
html body[data-theme="light"] .content > .page-head .eyebrow::before,
html body[data-theme="light"] .content > .page-head .eyebrow::after,
html body[data-theme="light"] .content > .page-hero .eyebrow::before,
html body[data-theme="light"] .content > .page-hero .eyebrow::after{
  display:none!important;
  content:none!important;
}

/* Whitemode darf Layout und Typografie außerhalb der Sidebar ebenfalls nicht verändern. */
/* Exakte Werte verhindern Theme-abhängige Größenänderungen. */
html body[data-theme="light"] .content > :is(.page-head,.page-hero) h1{
  font-size:clamp(2.05rem,2.45vw,2.85rem)!important;
  line-height:1.02!important;
  letter-spacing:-.05em!important;
}
html body[data-theme="light"] .content > :is(.page-head,.page-hero) .muted{
  font-size:.96rem!important;
  line-height:1.55!important;
}
html body[data-theme="light"] .content .stat-card{
  min-height:108px!important;
  padding:20px!important;
  border-radius:20px!important;
}
html body[data-theme="light"] .content .stat-card strong{font-size:2rem!important;line-height:1!important;}
html body[data-theme="light"] .content .card-head h2{font-size:1.22rem!important;line-height:1.2!important;}
html body[data-theme="light"] .content :is(input,select,textarea){font-size:1rem!important;}
html body[data-theme="light"] .content .btn{font-size:.94rem!important;line-height:1.1!important;}

@media(max-width:1100px){
  html body .sidebar,
  html body[data-theme="light"] .sidebar{
    width:min(91vw,318px)!important;
    min-width:min(91vw,318px)!important;
    max-width:min(91vw,318px)!important;
  }
  html body .sidebar-brand-row,
  html body[data-theme="light"] .sidebar-brand-row{
    display:block!important;
    min-height:72px!important;
    padding-right:0!important;
  }
  html body .sidebar-collapse-toggle,
  html body[data-theme="light"] .sidebar-collapse-toggle{display:none!important;}
}

@media(max-width:760px){
  html body .content > :is(.page-head,.page-hero) h1,
  html body[data-theme="light"] .content > :is(.page-head,.page-hero) h1{
    font-size:clamp(1.75rem,8vw,2.25rem)!important;
  }
}
