/* Hosting Portal - Sidebar theme overrides (match design mock) */
:root {
  --hp-sidebar-start: var(--brand-sidebar-start, #131126);
  --hp-sidebar-end: var(--brand-sidebar-end, #2948fa);
  --hp-sidebar-border: rgba(255, 255, 255, 0.08);
  --hp-sidebar-text: #ffffff;
  --hp-sidebar-text-strong: #ffffff;
  --hp-sidebar-muted: rgba(255, 255, 255, 0.62);
  --hp-sidebar-active: rgba(255, 255, 255, 0.14);
  --hp-accent: var(--brand-accent, #2948fa);
}

/* Base sidebar container (portal uses raw <nav>) */
nav {
  background: linear-gradient(180deg, var(--hp-sidebar-start) 0%, var(--hp-sidebar-end) 100%) !important;
  border-right: 1px solid var(--hp-sidebar-border);
  box-shadow: 0 18px 44px rgba(16, 11, 36, 0.35);
  overflow: hidden;
}

nav::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.65;
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.18) 0 1px, transparent 2px) 0 0 / 42px 42px,
    radial-gradient(circle at 82% 52%, rgba(255, 255, 255, 0.12) 0 1px, transparent 2px) 0 0 / 56px 56px,
    radial-gradient(circle at 45% 82%, color-mix(in srgb, var(--hp-accent) 35%, transparent), transparent 56%);
  mix-blend-mode: screen;
}

nav > * {
  position: relative;
  z-index: 1;
}

/* Logo + divider */
nav .app-logo {
  border-right: 0 !important;
}

nav .app-logo .logo {
  padding: 1.1rem 1.1rem 0.75rem 1.1rem;
}

nav .app-logo .logo img {
  width: 172px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
}

nav .app-logo .nav-profile {
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}

nav .nav-profile h6,
nav .nav-profile .text-primary {
  color: var(--hp-sidebar-text-strong) !important;
}

nav .nav-profile p,
nav .nav-profile .text-muted {
  color: var(--hp-sidebar-muted) !important;
}

/* Menu items */
nav .main-nav > li > a,
nav .main-nav .no-sub > a,
nav .main-nav .collapse > li > a {
  border-radius: 12px;
  margin: 0.12rem 0.85rem;
  color: var(--hp-sidebar-text) !important;
  background: transparent;
  transition: background-color 0.16s ease, transform 0.12s ease, color 0.16s ease;
}

/* Sub-menu panel should follow same brand sidebar palette */
nav .app-nav .main-nav > li:not(.menu-title) ul,
nav .app-nav .main-nav > li:not(.menu-title) ul li.another-level ul,
.app-wrapper .semi-nav:hover .app-nav .main-nav > li:not(.menu-title) ul {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--hp-sidebar-start) 84%, #ffffff 16%),
    color-mix(in srgb, var(--hp-sidebar-end) 86%, #ffffff 14%)
  ) !important;
  border: 1px solid color-mix(in srgb, #ffffff 18%, transparent) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, #000000 20%, transparent) !important;
}

nav .app-nav .main-nav > li:not(.menu-title) ul li a,
nav .app-nav .main-nav > li:not(.menu-title) ul li a i,
nav .app-nav .main-nav > li:not(.menu-title) ul li a i.ti,
nav .app-nav .main-nav > li:not(.menu-title) ul li a svg,
nav .app-nav .main-nav > li:not(.menu-title) ul li a::after {
  color: #ffffff !important;
}

nav .app-nav .main-nav > li:not(.menu-title) ul li a:hover,
nav .app-nav .main-nav > li:not(.menu-title) ul li.active > a {
  background: color-mix(in srgb, #ffffff 12%, transparent) !important;
  color: #ffffff !important;
}

nav .app-nav .main-nav > li:not(.menu-title) ul li a::before {
  background-color: color-mix(in srgb, #ffffff 55%, transparent) !important;
}

nav .main-nav > li > a:hover,
nav .main-nav .no-sub > a:hover,
nav .main-nav .collapse > li > a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--hp-sidebar-text-strong) !important;
  transform: translateY(-1px);
}

nav .main-nav > li > a.active,
nav .main-nav .no-sub > a.active {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--hp-accent) 95%, #000000),
    color-mix(in srgb, var(--hp-accent) 55%, #ffffff)
  );
  color: var(--hp-sidebar-text-strong) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--hp-accent) 22%, transparent);
}

/* Icons + chevrons */
nav .main-nav i {
  color: #ffffff !important;
}

/* Force white icons in all sidebar states, including collapsed/semi-nav */
nav .app-nav .main-nav > li > a i,
nav .app-nav .main-nav > li > a svg,
nav .app-nav .main-nav > li > a i.ph-light,
nav .app-nav .main-nav > li > a i.ph-duotone,
nav .app-nav .main-nav > li > a i.ph-bold,
nav .app-nav .main-nav > li > a i.ph,
nav .app-nav .main-nav > li > a i.ti,
.app-wrapper .semi-nav .app-nav .main-nav li a i,
.app-wrapper .semi-nav .app-nav .main-nav li a svg,
.app-wrapper .semi-nav:hover .app-nav .main-nav li a i,
.app-wrapper .semi-nav:hover .app-nav .main-nav li a svg {
  color: #ffffff !important;
  opacity: 1 !important;
}

nav .main-nav a .menu-arrow,
nav .main-nav a[aria-expanded]::after {
  color: #ffffff !important;
}

/* Footer actions */
nav .logout-btn,
nav a[href*="logout"] {
  color: var(--hp-sidebar-text) !important;
}

/* Ensure semi-nav toggle doesn't clash visually */
nav .toggle-semi-nav {
  background-color: rgba(255, 255, 255, 0.14) !important;
  color: var(--hp-sidebar-text-strong) !important;
}

@media screen and (max-width: 768px) {
  /* Keep icon + label + arrow aligned and prevent arrow/text overlap */
  nav.semi-nav .app-nav .main-nav > li:not(.menu-title) > a,
  .app-wrapper nav.semi-nav .app-nav .main-nav > li:not(.menu-title) > a {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    width: 100% !important;
    padding-right: 2.2rem !important; /* reserve space for chevron */
    min-height: 44px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
  }

  nav.semi-nav .app-nav .main-nav > li:not(.menu-title) > a::after,
  .app-wrapper nav.semi-nav .app-nav .main-nav > li:not(.menu-title) > a::after {
    right: 0.85rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  nav.semi-nav .app-nav .main-nav > li:not(.menu-title) > a i,
  nav.semi-nav .app-nav .main-nav > li:not(.menu-title) > a svg {
    flex: 0 0 1.375rem;
    margin-right: 0 !important;
  }
}