/* Retter-Portal v1.3.5 – restrained liquid-glass visual refresh.
   Layout, navigation order and application structure remain unchanged. */

:root{
  --glass-bg:rgba(255,255,255,.66);
  --glass-bg-strong:rgba(255,255,255,.79);
  --glass-bg-soft:rgba(248,250,252,.50);
  --glass-line:rgba(255,255,255,.72);
  --glass-line-soft:rgba(100,116,139,.18);
  --glass-shadow:0 20px 58px rgba(15,23,42,.10),inset 0 1px 0 rgba(255,255,255,.76);
  --glass-shadow-soft:0 10px 30px rgba(15,23,42,.075),inset 0 1px 0 rgba(255,255,255,.64);
  --glass-red:rgba(200,16,46,.14);
  --glass-blue:rgba(37,99,235,.12);
  --glass-teal:rgba(15,159,143,.10);
}
body[data-theme="dark"]{
  --glass-bg:rgba(12,21,36,.66);
  --glass-bg-strong:rgba(16,27,45,.80);
  --glass-bg-soft:rgba(24,38,60,.42);
  --glass-line:rgba(255,255,255,.105);
  --glass-line-soft:rgba(255,255,255,.075);
  --glass-shadow:0 22px 64px rgba(0,0,0,.31),inset 0 1px 0 rgba(255,255,255,.075);
  --glass-shadow-soft:0 12px 34px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.055);
  --glass-red:rgba(225,29,72,.14);
  --glass-blue:rgba(59,130,246,.12);
  --glass-teal:rgba(45,212,191,.09);
}
@media (prefers-color-scheme:dark){
  body[data-theme="system"]{
    --glass-bg:rgba(12,21,36,.66);
    --glass-bg-strong:rgba(16,27,45,.80);
    --glass-bg-soft:rgba(24,38,60,.42);
    --glass-line:rgba(255,255,255,.105);
    --glass-line-soft:rgba(255,255,255,.075);
    --glass-shadow:0 22px 64px rgba(0,0,0,.31),inset 0 1px 0 rgba(255,255,255,.075);
    --glass-shadow-soft:0 12px 34px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.055);
    --glass-red:rgba(225,29,72,.14);
    --glass-blue:rgba(59,130,246,.12);
    --glass-teal:rgba(45,212,191,.09);
  }
}

/* A calmer, premium background without changing content dimensions. */
html body{
  background:
    radial-gradient(circle at 12% -5%,var(--glass-red),transparent 31rem),
    radial-gradient(circle at 88% 0,var(--glass-blue),transparent 35rem),
    radial-gradient(circle at 55% 102%,var(--glass-teal),transparent 34rem),
    linear-gradient(145deg,var(--bg),var(--bg2))!important;
}
html body:before{
  opacity:.58;
  background-size:56px 56px!important;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.72),transparent 88%)!important;
}

/* Main glass surfaces. */
html body :is(
  .card,.stat-card,.toolbar,.pagination,.page-head,.page-hero,.login-card,
  .rp55-focus-card,.rp55-own-card,.rp55-table-card,.rp55-kpi-card,
  .admin-panel,.admin-card,.admin-account-card,.admin-overview-card,
  .form-subcard,.smart-person-picker,.detail-item,.info-grid>div
){
  background:
    linear-gradient(145deg,var(--glass-bg-strong),var(--glass-bg)),
    radial-gradient(circle at 0 0,var(--glass-red),transparent 42%),
    radial-gradient(circle at 100% 0,var(--glass-blue),transparent 44%)!important;
  border-color:var(--glass-line)!important;
  box-shadow:var(--glass-shadow)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.18)!important;
  backdrop-filter:blur(20px) saturate(1.18)!important;
}

/* Nested elements stay quieter than the main panels. */
html body :is(
  .rp55-own-metrics article,.rp55-focus-grid article,.rp55-priority-list a,
  .timeline-item,.department-chip,.person-choice,.admin-inline-assignment-list article,
  .admin-current-link,.check,.calendar-day,.youth-day
){
  background:linear-gradient(145deg,var(--glass-bg-soft),color-mix(in srgb,var(--glass-bg-soft) 76%,transparent))!important;
  border-color:var(--glass-line-soft)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--glass-line) 72%,transparent),0 8px 22px rgba(15,23,42,.045)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.08)!important;
  backdrop-filter:blur(12px) saturate(1.08)!important;
}
body[data-theme="dark"] :is(.rp55-own-metrics article,.rp55-focus-grid article,.rp55-priority-list a,.timeline-item,.department-chip,.person-choice,.admin-inline-assignment-list article,.admin-current-link,.check,.calendar-day,.youth-day){
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 24px rgba(0,0,0,.13)!important;
}

/* Header and sidebar receive the same material language. */
html body .topbar{
  background:color-mix(in srgb,var(--glass-bg-strong) 90%,transparent)!important;
  border-bottom-color:var(--glass-line-soft)!important;
  box-shadow:0 12px 38px rgba(15,23,42,.07),inset 0 -1px 0 rgba(255,255,255,.16)!important;
  -webkit-backdrop-filter:blur(24px) saturate(1.25)!important;
  backdrop-filter:blur(24px) saturate(1.25)!important;
}
html body .sidebar{
  background:
    radial-gradient(circle at 15% 0,rgba(200,16,46,.13),transparent 25rem),
    radial-gradient(circle at 100% 16%,rgba(37,99,235,.11),transparent 22rem),
    linear-gradient(180deg,#050b16 0%,#08111f 52%,#0c1727 100%)!important;
  border-right-color:rgba(255,255,255,.075)!important;
  box-shadow:20px 0 58px rgba(2,6,23,.26),inset -1px 0 0 rgba(255,255,255,.035)!important;
}
html body .sidebar nav a{
  border-color:transparent!important;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease!important;
}
html body .sidebar nav a:hover{
  transform:translateX(2px);
  background:rgba(255,255,255,.075)!important;
  border-color:rgba(255,255,255,.075)!important;
}
html body .sidebar nav a.active{
  background:linear-gradient(135deg,rgba(200,16,46,.96),rgba(158,19,43,.88))!important;
  border-color:rgba(255,255,255,.12)!important;
  box-shadow:0 14px 34px rgba(200,16,46,.24),inset 0 1px 0 rgba(255,255,255,.16)!important;
}

/* Controls look inset and tactile instead of flat. */
html body :is(input,select,textarea){
  background:linear-gradient(145deg,color-mix(in srgb,var(--surface-2) 82%,transparent),color-mix(in srgb,var(--surface) 72%,transparent))!important;
  border-color:var(--glass-line-soft)!important;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.055),0 1px 0 rgba(255,255,255,.30)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  backdrop-filter:blur(10px)!important;
}
body[data-theme="dark"] :is(input,select,textarea){
  box-shadow:inset 0 1px 3px rgba(0,0,0,.24),0 1px 0 rgba(255,255,255,.035)!important;
}
html body :is(input,select,textarea):focus{
  border-color:color-mix(in srgb,var(--primary) 66%,var(--glass-line-soft))!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 15%,transparent),inset 0 1px 2px rgba(15,23,42,.05)!important;
}

html body .btn{
  background:linear-gradient(145deg,var(--glass-bg-strong),var(--glass-bg-soft))!important;
  border-color:var(--glass-line-soft)!important;
  box-shadow:var(--glass-shadow-soft)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.12)!important;
  backdrop-filter:blur(14px) saturate(1.12)!important;
}
html body .btn:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--primary) 28%,var(--glass-line-soft))!important;
  box-shadow:0 16px 38px rgba(15,23,42,.12),inset 0 1px 0 rgba(255,255,255,.72)!important;
}
html body .btn.primary{
  color:#fff!important;
  border-color:rgba(255,255,255,.13)!important;
  background:linear-gradient(135deg,#df1237,#b40f2d 58%,#861126)!important;
  box-shadow:0 16px 38px rgba(200,16,46,.25),inset 0 1px 0 rgba(255,255,255,.23)!important;
}
html body .btn.primary:hover{
  box-shadow:0 21px 48px rgba(200,16,46,.32),inset 0 1px 0 rgba(255,255,255,.27)!important;
}
html body .btn.danger{
  background:linear-gradient(145deg,rgba(255,241,242,.90),rgba(255,228,230,.72))!important;
}

html body :is(.pill,.status,.role,.secure-pill){
  background:linear-gradient(145deg,var(--glass-bg-strong),var(--glass-bg-soft))!important;
  border-color:var(--glass-line-soft)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.48),0 6px 18px rgba(15,23,42,.055)!important;
  -webkit-backdrop-filter:blur(12px)!important;
  backdrop-filter:blur(12px)!important;
}
html body :is(.status.Aktiv,.status.Verfügbar,.status.Genehmigt,.ok){
  background:linear-gradient(145deg,rgba(209,250,229,.90),rgba(167,243,208,.66))!important;
  color:#047857!important;
  border-color:rgba(16,185,129,.24)!important;
}
body[data-theme="dark"] :is(.status.Aktiv,.status.Verfügbar,.status.Genehmigt,.ok){
  background:linear-gradient(145deg,rgba(6,95,70,.38),rgba(4,120,87,.22))!important;
  color:#a7f3d0!important;
  border-color:rgba(52,211,153,.20)!important;
}

/* Tables retain structure but gain a cleaner glass hierarchy. */
html body .table-wrap{
  background:color-mix(in srgb,var(--glass-bg) 72%,transparent)!important;
  border-color:var(--glass-line-soft)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32)!important;
  -webkit-backdrop-filter:blur(15px)!important;
  backdrop-filter:blur(15px)!important;
}
html body table thead th{
  background:linear-gradient(180deg,color-mix(in srgb,var(--glass-bg-strong) 86%,transparent),color-mix(in srgb,var(--glass-bg-soft) 84%,transparent))!important;
  border-bottom-color:var(--glass-line-soft)!important;
}
html body table tbody tr:hover td{
  background:color-mix(in srgb,var(--primary) 5%,transparent)!important;
}

/* Dashboard label fix: never split single words into isolated letters. */
html body .dashboard-member-metrics,
html body .dashboard-own-compact{
  grid-template-columns:repeat(auto-fit,minmax(164px,1fr))!important;
}
html body .rp55-own-metrics article span{
  max-width:100%!important;
  font-size:clamp(.66rem,.78vw,.78rem)!important;
  line-height:1.16!important;
  letter-spacing:.055em!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
  white-space:nowrap!important;
}
html body .rp55-own-metrics article.date-metric span{
  white-space:normal!important;
  text-wrap:balance!important;
}
html body .rp55-own-metrics article strong{
  max-width:100%!important;
  overflow:hidden!important;
  font-variant-numeric:tabular-nums!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
}

/* Subtle highlights make the material feel dimensional without visual noise. */
html body :is(.page-head,.page-hero,.rp55-dash-hero,.card,.toolbar){
  position:relative;
  isolation:isolate;
}
html body :is(.page-head,.page-hero,.rp55-dash-hero,.card,.toolbar)::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,.20),transparent 28%,transparent 72%,rgba(255,255,255,.07));
  opacity:.72;
}
body[data-theme="dark"] :is(.page-head,.page-hero,.rp55-dash-hero,.card,.toolbar)::after{
  opacity:.26;
}

@media (max-width:1100px){
  html body .dashboard-member-metrics,
  html body .dashboard-own-compact{
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;
  }
  html body .rp55-own-metrics article span{
    font-size:.68rem!important;
    letter-spacing:.045em!important;
  }
}

@media (max-width:520px){
  html body .dashboard-member-metrics,
  html body .dashboard-own-compact{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  html body .rp55-own-metrics article{
    padding:14px 12px!important;
  }
  html body .rp55-own-metrics article span{
    font-size:.62rem!important;
    letter-spacing:.025em!important;
  }
  html body .rp55-own-metrics article.date-metric span{
    font-size:.60rem!important;
  }
}

@media (prefers-reduced-motion:reduce){
  html body *{scroll-behavior:auto!important}
  html body .btn,
  html body .sidebar nav a{transition:none!important}
}