/* A complete visual reset for the portal navigation. */
.sidebar {
  --sidebar-bg: #101a2b;
  --sidebar-panel: #17253a;
  --sidebar-line: #263750;
  --sidebar-text: #e8effa;
  --sidebar-muted: #8fa1bb;
  width: 264px;
  flex: 0 0 264px;
  color: var(--sidebar-text);
  background:
    radial-gradient(ellipse at 0 0, rgba(48, 105, 184, .18), transparent 42%),
    linear-gradient(180deg, #111d30 0%, var(--sidebar-bg) 48%, #0d1727 100%);
  border-right: 1px solid #24334a;
  box-shadow: 12px 0 36px rgba(17, 30, 51, .08);
  scrollbar-color: #344962 transparent;
  scrollbar-width: thin;
}

.sidebar-top {
  min-height: 96px;
  padding: 22px 20px 18px;
  border-bottom: 1px solid rgba(133, 160, 197, .12);
  display: flex;
  align-items: center;
}

.sidebar-logo-wrap { gap: 13px; }
.sidebar-logo {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,.17);
  box-shadow: 0 8px 22px rgba(0,0,0,.28), 0 0 0 4px rgba(255,255,255,.035);
}
.portal-label {
  color: #f5f8ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
}
.portal-label::after {
  content: "TEAM PORTAL";
  display: block;
  margin-top: 5px;
  color: #8195b1;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .2em;
}

.main-nav {
  flex: 1;
  gap: 4px;
  padding: 18px 12px 20px;
}
.nav-section-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 17px 9px 7px;
  color: #7086a4;
  font-size: 9px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.nav-section-label:first-child { margin-top: 3px; }
.nav-section-label:not(:first-child)::before {
  content: "";
  width: 13px;
  height: 1px;
  background: #344761;
}

.nav-item {
  position: relative;
  width: 100%;
  min-height: 45px;
  gap: 12px;
  padding: 8px 11px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #a7b5c9;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .005em;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.nav-item:hover {
  color: #f3f7ff;
  background: rgba(143, 169, 204, .09);
  border-color: rgba(143, 169, 204, .1);
  transform: translateX(2px);
}
.nav-item:focus-visible {
  outline: 2px solid #79b7ff;
  outline-offset: 2px;
}
.nav-item.active {
  color: #fff;
  background: linear-gradient(105deg, rgba(50, 119, 220, .3), rgba(39, 93, 160, .17));
  border-color: rgba(105, 165, 244, .27);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 7px 18px rgba(4, 12, 25, .12);
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: #61a9ff;
  box-shadow: 0 0 12px rgba(73, 155, 255, .62);
}
.nav-icon {
  display: grid;
  place-items: center;
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  border-radius: 9px;
  color: #9fb4cf;
  background-color: rgba(137, 164, 201, .1) !important;
  border: 1px solid rgba(154, 180, 215, .1);
  background-size: 19px !important;
}
.nav-item.active .nav-icon {
  color: #a9d3ff;
  background-color: rgba(80, 151, 241, .22) !important;
  border-color: rgba(123, 184, 255, .2);
}

.sidebar-bottom {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: 13px 13px 15px;
  color: var(--sidebar-muted);
  background: linear-gradient(180deg, rgba(16,26,43,.93), #0d1727 24%);
  border-top: 1px solid rgba(133, 160, 197, .13);
  backdrop-filter: blur(14px);
}
.sidebar-user {
  min-height: 66px;
  margin: 0 0 9px;
  padding: 10px 11px;
  gap: 11px;
  border: 1px solid rgba(143, 169, 204, .15);
  border-radius: 13px;
  background: linear-gradient(115deg, rgba(53, 85, 127, .3), rgba(30, 48, 73, .48));
  color: var(--sidebar-text);
}
.sidebar-user img {
  width: 38px;
  height: 38px;
  border: 2px solid rgba(255,255,255,.18);
  background: #243a56;
}
.sidebar-user strong { color: #f1f5fc; font-size: 11px; }
.sidebar-user small { color: #91a4bf; font-size: 10px; }
.sidebar-user > svg { color: #91a4bf; }
.sidebar-rule { height: 1px; margin: 0 7px 9px; background: rgba(133, 160, 197, .13); }
.logout-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #a0afc4;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  transition: .18s ease;
}
.logout-btn .ui-icon { width: 16px; height: 16px; }
.logout-btn:hover {
  color: #ffd4d7;
  background: rgba(198, 72, 83, .12);
  border-color: rgba(227, 103, 112, .18);
}

@media (min-width: 761px) and (max-width: 1100px) {
  .sidebar { width: 230px; flex-basis: 230px; }
  .sidebar-top { padding-left: 16px; }
  .main-nav { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 760px) {
  .sidebar {
    width: 270px;
    flex-basis: 270px;
    left: -280px;
    border-right-color: #2a3b55;
  }
  .sidebar.open { left: 0; }
  .sidebar-bottom { padding-bottom: max(15px, env(safe-area-inset-bottom)); }
}

/* Light palette requested for the redesigned sidebar. */
#sidebar.sidebar {
  --sidebar-text: #202b45;
  --sidebar-muted: #8490a8;
  color: #202b45;
  background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
  border-right: 1px solid #e8edf5;
  box-shadow: 8px 0 28px rgba(39, 56, 100, .035);
  scrollbar-color: #d5deeb transparent;
}
#sidebar .sidebar-top { border-bottom-color: #eef1f6; }
#sidebar .portal-label { color: #202b45; }
#sidebar .portal-label::after { color: #9aa5b8; }
#sidebar .nav-section-label { color: #9aa4b7; }
#sidebar .nav-section-label:not(:first-child)::before { background: #e3e8f0; }
#sidebar .nav-item { color: #78859b; }
#sidebar .nav-item:hover { color: #26344d; background: #f5f7fb; border-color: #edf0f6; }
#sidebar .nav-item.active {
  color: #075fc4;
  background: linear-gradient(105deg, #eaf2ff, #f4f7ff);
  border-color: #d8e6fb;
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(44, 92, 162, .07);
}
#sidebar .nav-icon { background-color: #f0f3f8 !important; border-color: #e9edf4; }
#sidebar .nav-item.active .nav-icon { color: #527be5; background-color: #fff !important; border-color: #e1e9f6; }
#sidebar .sidebar-bottom {
  color: #8490a8;
  background: linear-gradient(180deg, rgba(255,255,255,.96), #fbfcff 24%);
  border-top-color: #e8edf5;
}
#sidebar .sidebar-user { border-color: #e5eaf2; background: linear-gradient(115deg, #f3f7fc, #fff); }
#sidebar .sidebar-user img { border-color: #fff; background: #f1f3f6; }
#sidebar .sidebar-user strong { color: #26344d; }
#sidebar .sidebar-user small, #sidebar .sidebar-user > svg { color: #8996ab; }
#sidebar .sidebar-rule { background: #e8edf5; }
#sidebar .logout-btn { color: #7d899e; }
#sidebar .logout-btn:hover { color: #b63737; background: #fff4f3; border-color: #f2dada; }