/* Fiber23 admin navigation: compact, colorful and independently scrollable. */
.app-shell.admin-mode {
  grid-template-columns: 278px minmax(0, 1fr);
}

.admin-mode .sidebar {
  box-sizing: border-box;
  padding: 17px 13px 12px;
  border-right-color: #e4e8f3;
  background: linear-gradient(180deg, #fff 0%, #faf9ff 58%, #f6f8ff 100%);
  box-shadow: 12px 0 38px rgba(31, 38, 86, .055);
}

.admin-mode .logo {
  flex: 0 0 auto;
  margin: 0 12px 9px;
  padding-bottom: 10px;
  border-bottom: 1px solid #edf0f6;
}

.admin-mode .main-nav {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 7px 18px 2px;
  scrollbar-color: #c8b7f8 transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.admin-mode .main-nav::-webkit-scrollbar { width: 5px; }
.admin-mode .main-nav::-webkit-scrollbar-track { background: transparent; }
.admin-mode .main-nav::-webkit-scrollbar-thumb {
  border-radius: 20px;
  background: linear-gradient(#7c3aed, #ec4899);
}

.admin-mode .main-nav p {
  position: relative;
  margin: 18px 10px 7px;
  padding-left: 10px;
  color: #8b92aa;
  font-size: 8px;
  line-height: 1.2;
  letter-spacing: .18em;
}

.admin-mode .main-nav p::before {
  position: absolute;
  top: 1px;
  left: 0;
  width: 3px;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(#6d28d9, #ec4899);
  content: "";
}

.admin-mode .nav-item {
  --nav-accent: #6d28d9;
  --nav-soft: #f1eaff;
  box-sizing: border-box;
  min-height: 46px;
  margin: 4px 0;
  padding: 6px 9px;
  overflow: hidden;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: #58657e;
  font-size: 11px;
  font-weight: 700;
}

.admin-mode .nav-item > span:first-child {
  display: flex;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--nav-soft);
  color: var(--nav-accent);
  transition: .18s ease;
}

.admin-mode .nav-item > span:first-child svg { width: 15px; height: 15px; }
.admin-mode .nav-item b { min-width: 0; line-height: 1.2; }

.admin-mode .nav-item:hover {
  transform: translateX(2px);
  border-color: #e4d8fb;
  background: #fff;
  color: var(--nav-accent);
  box-shadow: 0 8px 20px rgba(60, 42, 112, .07);
}

.admin-mode .nav-item.active {
  border-color: color-mix(in srgb, var(--nav-accent) 22%, #fff);
  background: linear-gradient(100deg, var(--nav-soft), #fff);
  color: var(--nav-accent);
  box-shadow: 0 9px 24px rgba(91, 55, 160, .1);
}

.admin-mode .nav-item.active::before {
  left: 0;
  width: 4px;
  height: 28px;
  background: var(--nav-accent);
}

.admin-mode .nav-item.active > span:first-child {
  background: var(--nav-accent);
  color: #fff;
  box-shadow: 0 7px 15px color-mix(in srgb, var(--nav-accent) 28%, transparent);
}

.admin-mode .nav-count,
.admin-mode .nav-alert,
.admin-mode .nav-live {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 3px 7px;
  font-size: 8px;
  font-weight: 800;
}

.admin-mode .nav-item[href="#admin-customers"],
.admin-mode .nav-item[href="#admin-services"] {
  --nav-accent: #0f9f7a;
  --nav-soft: #e8faf4;
}

.admin-mode .nav-item[href="#admin-orders"],
.admin-mode .nav-item[href="#admin-billing"],
.admin-mode .nav-item[href="#admin-debts"] {
  --nav-accent: #e97616;
  --nav-soft: #fff3e7;
}

.admin-mode .nav-item[href="#admin-quotes"],
.admin-mode .nav-item[href="#admin-support"],
.admin-mode .nav-item[href="#admin-loa"] {
  --nav-accent: #db2777;
  --nav-soft: #fff0f7;
}

.admin-mode .nav-item[href="#admin-vps"],
.admin-mode .nav-item[href="#admin-nodes"],
.admin-mode .nav-item[href="#admin-plans"],
.admin-mode .nav-item[href="#admin-ipam"],
.admin-mode .nav-item[href="#admin-backups"] {
  --nav-accent: #0878d1;
  --nav-soft: #eaf5ff;
}

.admin-mode .nav-item[href="#admin-contracts"],
.admin-mode .nav-item[href="#admin-minutes"],
.admin-mode .nav-item[href="#admin-datacenter"],
.admin-mode .nav-item[href="#admin-products"],
.admin-mode .nav-item[href="#admin-automation"] {
  --nav-accent: #7c3aed;
  --nav-soft: #f2edff;
}

.admin-mode .nav-item[href="#admin-reports"],
.admin-mode .nav-item[href="#admin-staff"],
.admin-mode .nav-item[href="#admin-settings"],
.admin-mode .nav-item[href="#admin-migration"],
.admin-mode .nav-item[href="#admin-audit"] {
  --nav-accent: #475569;
  --nav-soft: #eef2f7;
}

.admin-mode .sidebar-bottom {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  margin-top: 0;
  padding-top: 9px;
  border-top: 1px solid #e5e9f2;
  background: linear-gradient(180deg, rgba(250, 251, 255, .9), #f8f9ff);
}

.admin-mode .profile-mini {
  margin: 0;
  padding: 8px 9px;
  border: 1px solid #e5e8f2;
  background: #fff;
  box-shadow: 0 8px 24px rgba(50, 46, 92, .06);
}

@media (max-width: 820px) {
  .app-shell.admin-mode { display: block; }
  .admin-mode .sidebar { left: -300px; width: min(278px, 88vw); }
  .admin-mode .sidebar.open { left: 0; }
  .admin-mode .main-nav { padding-bottom: 22px; }
}