/* v50: clearer navigation, account security and calmer schedule emphasis. */

.sidebar{
  background:
    radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--primary) 9%,transparent),transparent 44%),
    color-mix(in srgb,var(--card) 96%,var(--bg));
  border-right-color:color-mix(in srgb,var(--border) 75%,var(--primary) 25%);
}
.sidebar>.navList{
  flex:1 1 auto;
  align-content:start;
  gap:5px;
  padding:3px 2px 12px;
}
.sidebar .navButton{
  min-height:47px;
  gap:10px;
  padding:6px 9px;
  border:1px solid transparent;
  border-radius:15px;
  color:var(--muted);
  font-size:14px;
  font-weight:650;
  letter-spacing:-.01em;
}
.sidebar .navButton .navIcon{
  width:35px;
  height:35px;
  flex:0 0 35px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:color-mix(in srgb,var(--surface) 75%,transparent);
  color:var(--muted);
  font-size:18px;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.sidebar .navButton .navIcon .iconSvg{width:19px;height:19px}
.sidebar .navButton:hover .navIcon{color:var(--primary);transform:scale(1.04)}
.sidebar .navButton.active{
  border-color:color-mix(in srgb,var(--primary) 27%,var(--border));
  background:linear-gradient(100deg,color-mix(in srgb,var(--primary) 16%,var(--card)),color-mix(in srgb,var(--primary) 6%,var(--card)));
  box-shadow:inset 3px 0 var(--primary),0 8px 24px color-mix(in srgb,var(--primary) 8%,transparent);
  color:var(--text);
}
.sidebar .navButton.active .navIcon{
  background:linear-gradient(145deg,var(--primary),var(--primary-2));
  color:var(--accentText,#fff);
  box-shadow:0 5px 14px color-mix(in srgb,var(--primary) 27%,transparent);
}
#desktopAdminMenu{margin-top:10px!important;padding-top:15px!important}
#desktopAdminMenu:before{left:5px!important;right:5px!important;border-color:color-mix(in srgb,var(--primary) 24%,var(--border))!important}
#desktopAdminMenu.active{background:linear-gradient(100deg,color-mix(in srgb,#7b82ff 17%,var(--card)),color-mix(in srgb,var(--primary) 7%,var(--card)))}
#desktopAdminMenu.active .navIcon{background:linear-gradient(145deg,#7786ff,#5964df)}
.sidebarProfile{min-height:53px}
.sidebarProfileText strong{font-size:13px!important}
.sidebarProfileText small{font-size:11px!important}
.pointsSide{border-radius:15px}
.mobileMenuPanel{
  width:min(360px,90vw);
  padding-left:16px;
  padding-right:16px;
  background:
    radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--primary) 10%,transparent),transparent 40%),
    var(--card);
}
.mobileMenuHead{padding-bottom:16px}
.mobileMenuHead strong{font-size:18px}
.mobileNav{gap:6px}
.mobileNav button{
  min-height:49px;
  padding:7px 10px;
  gap:11px;
  border:1px solid transparent;
  border-radius:15px;
  color:var(--text);
  font-size:14px;
  font-weight:650;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.mobileNav button>svg:first-child{
  width:35px;
  height:35px;
  flex:0 0 35px;
  padding:8px;
  border-radius:12px;
  background:var(--surface);
  color:var(--muted);
}
.mobileNav button.active{
  border-color:color-mix(in srgb,var(--primary) 28%,var(--border));
  background:color-mix(in srgb,var(--primary) 11%,var(--card));
  box-shadow:inset 3px 0 var(--primary);
}
.mobileNav button.active>svg:first-child{
  background:linear-gradient(145deg,var(--primary),var(--primary-2));
  color:var(--accentText,#fff);
}
.mobileNav button.adminNavSeparated{margin-top:10px;padding-top:7px;border-top:1px solid var(--border)}
.mobileProfileFooter{padding-top:12px}

.service.serviceToday{
  border-color:color-mix(in srgb,#54c6a5 45%,var(--border));
  background:
    radial-gradient(ellipse at 100% 0,color-mix(in srgb,#54c6a5 10%,transparent),transparent 56%),
    linear-gradient(145deg,color-mix(in srgb,var(--primary) 6%,var(--card)),var(--card) 72%);
  box-shadow:inset 3px 0 color-mix(in srgb,#54c6a5 85%,var(--primary)),0 10px 26px color-mix(in srgb,#54c6a5 8%,transparent);
}
.service.serviceToday:after{content:none}
.service.serviceToday .serviceTop{padding-right:0}
.service.serviceToday .serviceDate:after{
  content:'DZIŚ';
  display:inline-flex;
  align-items:center;
  margin:0 0 1px 7px;
  padding:3px 7px;
  border:1px solid color-mix(in srgb,#54c6a5 40%,var(--border));
  border-radius:999px;
  background:color-mix(in srgb,#54c6a5 12%,var(--card));
  color:color-mix(in srgb,#54c6a5 82%,var(--text));
  font-size:9px;
  font-weight:850;
  letter-spacing:.08em;
  vertical-align:middle;
}
.service.serviceToday .serviceDate{color:var(--text)}

#settings .accountAccessGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid color-mix(in srgb,var(--border) 74%,transparent);
}
#settings .settingsMiniCard{
  min-width:0;
  margin:0;
  padding:16px;
  border:1px solid color-mix(in srgb,var(--border) 80%,var(--primary) 20%);
  border-radius:18px;
  background:color-mix(in srgb,var(--surface) 68%,var(--card));
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
#settings .settingsMiniCard:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--primary) 40%,var(--border));box-shadow:0 14px 30px rgba(0,0,0,.1)}
#settings .settingsMiniCard .settingsCardHeader{gap:10px;padding:0 0 12px;margin:0 0 12px}
#settings .settingsMiniCard .settingsSectionIcon{width:37px;height:37px;flex-basis:37px;border-radius:12px}
#settings .settingsMiniCard .settingsSectionIcon .iconSvg{width:18px;height:18px}
#settings .settingsMiniCard .settingsCardHeader h2{font-size:16px}
#settings .settingsMiniCard .settingsCardHeader p{font-size:11px;line-height:1.45}
#settings .settingsMiniCard .settingsSectionTag{font-size:10px;padding:5px 8px}
#settings .settingsMiniCard .formGrid{gap:10px}
#settings .settingsMiniCard .field{grid-column:1/-1}
#settings .settingsMiniCard .formActions{margin-top:10px}
#settings .settingsMiniCard .button{min-height:39px}
#settings .totpStatusNotice{margin-bottom:12px;padding:10px 12px;font-size:12px}
#settings .totpEnrollmentPasswordStep{margin-top:12px;padding-top:13px;border-top:1px solid var(--border);animation:settingsCardEnter .24s ease both}
#settings .passwordChangeStep{padding-top:4px}
#settings .accountAccessGrid [hidden]{display:none!important}

.button,.input,.select,.textarea{transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
.button:focus-visible,.navButton:focus-visible,.mobileNav button:focus-visible,.closeMenu:focus-visible{
  outline:2px solid color-mix(in srgb,var(--primary) 75%,white);
  outline-offset:2px;
}
#admin .adminSection{scroll-margin-top:24px}
#admin .adminSection.open{border-color:color-mix(in srgb,var(--border) 72%,var(--primary) 28%)}
#admin .adminSectionHeader{transition:background .2s ease,border-color .2s ease}
#admin .adminSectionHeader:hover{background:color-mix(in srgb,var(--primary) 5%,var(--surface))}
#admin .adminSectionHeader h2{letter-spacing:-.025em}
#deleteMonthScheduleButton{border-color:color-mix(in srgb,var(--danger,#dc6670) 34%,var(--border))}
.adminLoadStatus{border-radius:14px}

@media(max-width:850px){
  #settings .accountAccessGrid{grid-template-columns:1fr;gap:10px;margin-top:16px;padding-top:15px}
  #settings .settingsMiniCard{padding:14px;border-radius:16px}
}
@media(max-width:560px){
  .mobileMenuPanel{width:min(380px,94vw);padding-left:14px;padding-right:14px}
  .mobileNav button{min-height:51px;font-size:15px}
  .sidebarProfileText strong{font-size:13px!important}
  .service.serviceToday:after{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
  #settings .settingsMiniCard,#settings .totpEnrollmentPasswordStep,.sidebar .navButton .navIcon,.mobileNav button,.button{transition:none!important;animation:none!important}
  #settings .settingsMiniCard:hover,.sidebar .navButton:hover .navIcon{transform:none}
}