/* ============================================================
   CloudHub Sidebar & Navbar Redesign — sidebar-redesign.css
   Font: Plus Jakarta Sans
   Strategy: override Vuexy .main-menu.menu-light and .header-navbar
   without touching core CSS files.
   ============================================================ */

/* ── Font ──────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ── Sidebar shell ─────────────────────────────────────────── */
.main-menu.menu-light {
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  box-shadow: none !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.main-menu.menu-dark {
  background: #252d40;
  border-right: 1px solid #2e3a52;
  box-shadow: none !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ── Brand header (ch-sb-brand) ──────────────────────────── */
.main-menu.menu-light .navbar-header,
.main-menu.menu-dark .navbar-header {
  background: var(--ch-brand-primary, #1c3f76);
  padding: 0;
  height: 4.45rem;
  display: flex;
  align-items: stretch;
  border-bottom: none;
}

.main-menu.menu-light .navbar-header .nav-item.me-auto,
.main-menu.menu-dark .navbar-header .nav-item.me-auto {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
}

.main-menu.menu-light .navbar-header .ch-sb-brand,
.main-menu.menu-dark .navbar-header .ch-sb-brand {
  display: flex !important;
  align-items: center !important;
  gap: .625rem !important;
  padding: 0 1rem !important;
  margin: 0 !important;
  text-decoration: none !important;
  width: 100%;
  min-width: 0;
}

.ch-sb-brand__icon {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ch-sb-brand__icon svg {
  width: 17px;
  height: 17px;
  color: #ffffff;
  stroke: #ffffff;
}

.ch-sb-brand__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}

.ch-sb-brand__name {
  display: block;
  color: #ffffff;
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.ch-sb-brand__sub {
  display: block;
  color: rgba(255, 255, 255, 0.62);
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1;
  margin-top: 2px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.main-menu.menu-light .navbar-header .brand-text,
.main-menu.menu-light .navbar-header .brand-logo,
.main-menu.menu-light .navbar-header .brand-logo img,
.main-menu.menu-dark .navbar-header .brand-text,
.main-menu.menu-dark .navbar-header .brand-logo,
.main-menu.menu-dark .navbar-header .brand-logo img {
  display: none !important;
}

.main-menu.menu-light .navbar-header .modern-nav-toggle i,
.main-menu.menu-light .navbar-header .modern-nav-toggle svg,
.main-menu.menu-dark .navbar-header .modern-nav-toggle i,
.main-menu.menu-dark .navbar-header .modern-nav-toggle svg {
  color: rgba(255, 255, 255, 0.7) !important;
  stroke: rgba(255, 255, 255, 0.7) !important;
}

.main-menu.menu-light .navbar-header .modern-nav-toggle:hover i,
.main-menu.menu-light .navbar-header .modern-nav-toggle:hover svg,
.main-menu.menu-dark .navbar-header .modern-nav-toggle:hover i,
.main-menu.menu-dark .navbar-header .modern-nav-toggle:hover svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.main-menu.menu-light .shadow-bottom,
.main-menu.menu-dark .shadow-bottom {
  display: none;
}

/* ── Navigation background ─────────────────────────────────── */
.main-menu.menu-light .navigation {
  background: #ffffff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  padding: .5rem 0;
}

/* ── Section headers ───────────────────────────────────────── */
.main-menu.menu-light .navigation .navigation-header,
.main-menu.menu-light .navigation-header {
  color: #9ca3af !important;
  font-size: .62rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  margin: 1.25rem 0 .25rem 1.125rem !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.main-menu.menu-light .navigation .navigation-header span,
.main-menu.menu-light .navigation-header span {
  font-weight: 800 !important;
}

/* Hide the feather more-horizontal icon on section headers */
.main-menu.menu-light .navigation .navigation-header .feather-more-horizontal {
  display: none !important;
}

/* ── Top-level nav items ───────────────────────────────────── */
.main-menu.menu-light .navigation > li > a {
  margin: 1px .75rem !important;
  padding: .525rem .875rem !important;
  border-radius: 8px !important;
  color: #4b5563 !important;
  font-size: .8125rem !important;
  font-weight: 600 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  transition: background-color 140ms ease, color 140ms ease !important;
  line-height: 1.45 !important;
}

/* Icon sizing */
.main-menu.menu-light .navigation > li > a svg,
.main-menu.menu-light .navigation > li > a i {
  width: 16px !important;
  height: 16px !important;
  margin-right: .625rem !important;
  flex-shrink: 0 !important;
  color: #9ca3af !important;
  stroke: #9ca3af;
  font-size: 1rem !important;
  top: 0 !important;
  transition: color 140ms ease !important;
}

/* Hover state */
.main-menu.menu-light .navigation > li.nav-item > a:hover,
.main-menu.menu-light .navigation > li.nav-item a:hover {
  background: rgba(28, 63, 118, .07) !important;
  color: var(--ch-brand-primary, #1c3f76) !important;
}

.main-menu.menu-light .navigation li.nav-item a:hover > *,
.main-menu.menu-light .navigation li.nav-item ul.menu-content li a:hover > * {
  transform: none !important;
}

.main-menu.menu-light .navigation > li.nav-item > a:hover svg,
.main-menu.menu-light .navigation > li.nav-item > a:hover i {
  color: var(--ch-brand-primary, #1c3f76) !important;
  stroke: var(--ch-brand-primary, #1c3f76) !important;
}

/* Active state */
.main-menu.menu-light .navigation > li.active > a,
.main-menu.menu-light .navigation > li.active > a:hover {
  background: var(--ch-brand-primary, #1c3f76) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(28, 63, 118, .22) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}

.main-menu.menu-light .navigation > li.active > a svg,
.main-menu.menu-light .navigation > li.active > a i {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* Open (has-sub expanded) state */
.main-menu.menu-light .navigation > li.open:not(.menu-item-closing) > a,
.main-menu.menu-light .navigation > li.sidebar-group-active > a {
  background: rgba(28, 63, 118, .07) !important;
  color: var(--ch-brand-primary, #1c3f76) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.main-menu.menu-light .navigation > li.open:not(.menu-item-closing) > a svg,
.main-menu.menu-light .navigation > li.open:not(.menu-item-closing) > a i {
  color: var(--ch-brand-primary, #1c3f76) !important;
  stroke: var(--ch-brand-primary, #1c3f76) !important;
}

/* ── Sub-menu items ────────────────────────────────────────── */
.main-menu.menu-light .navigation > li > ul.menu-content {
  background: transparent !important;
  padding: .125rem 0 .375rem !important;
}

.main-menu.menu-light .navigation > li > ul li:first-of-type {
  margin-top: 0 !important;
}

.main-menu.menu-light .navigation > li > ul li.has-sub > a,
.main-menu.menu-light .navigation > li > ul li:not(.has-sub),
.main-menu.menu-light .navigation > li > ul li.has-sub > ul > li {
  margin: 1px .75rem !important;
}

.main-menu.menu-light .navigation .menu-content > li > a {
  padding: .45rem .875rem .45rem 2.375rem !important;
  font-size: .7875rem !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  border-radius: 7px !important;
  transition: background-color 140ms ease, color 140ms ease !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Sub-item icon (small circle) */
.main-menu.menu-light .navigation .menu-content > li > a svg,
.main-menu.menu-light .navigation .menu-content > li > a i {
  width: 6px !important;
  height: 6px !important;
  margin-right: .75rem !important;
  color: #d1d5db !important;
  stroke: #d1d5db;
  font-size: 6px !important;
}

/* Sub-item hover */
.main-menu.menu-light .navigation .menu-content > li > a:hover {
  background: rgba(28, 63, 118, .06) !important;
  color: var(--ch-brand-primary, #1c3f76) !important;
}

.main-menu.menu-light .navigation .menu-content > li > a:hover svg,
.main-menu.menu-light .navigation .menu-content > li > a:hover i {
  color: var(--ch-brand-primary, #1c3f76) !important;
  stroke: var(--ch-brand-primary, #1c3f76) !important;
}

/* Sub-item active */
.main-menu.menu-light .navigation .menu-content .active > a,
.main-menu.menu-light .navigation .menu-content li.active > a {
  background: rgba(28, 63, 118, .09) !important;
  color: var(--ch-brand-primary, #1c3f76) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  border-radius: 7px !important;
}

.main-menu.menu-light .navigation .menu-content .active > a svg,
.main-menu.menu-light .navigation .menu-content .active > a i {
  color: var(--ch-brand-primary, #1c3f76) !important;
  stroke: var(--ch-brand-primary, #1c3f76) !important;
}

/* Remove background-only active highlight */
.main-menu.menu-light .navigation > li .active {
  background: transparent !important;
  box-shadow: none !important;
}

/* ── Chevron (has-sub arrow) ───────────────────────────────── */
.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation li.has-sub > a:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") !important;
  width: 14px !important;
  height: 14px !important;
  right: 14px !important;
  top: 13px !important;
}

.main-menu.menu-light .navigation > li.active > a:after,
.main-menu.menu-light .navigation > li.open > a:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") !important;
}

.main-menu.menu-light .navigation > li.open:not(.active) > a:after,
.main-menu.menu-light .navigation > li.sidebar-group-active:not(.active) > a:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c3f76' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") !important;
}

/* ── Menu item text ────────────────────────────────────────── */
.main-menu.menu-light .navigation > li > a .menu-title,
.main-menu.menu-light .navigation .menu-content > li > a .menu-item {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* ── User footer (injected by JS in some Vuexy themes) ─────── */
.main-menu.menu-light .main-menu-footer {
  border-top: 1px solid #e5e7eb;
  padding: .875rem 1rem;
}

/* ── Collapsed state ───────────────────────────────────────── */
.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu .navigation > li > a {
  border-radius: 8px !important;
}

.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu .navigation > li.active a {
  background: var(--ch-brand-primary, #1c3f76) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(28, 63, 118, .22) !important;
}

/* ── Scroll area ───────────────────────────────────────────── */
.main-menu.menu-light .main-menu-content {
  padding-bottom: 1rem;
}

.main-menu.menu-light .ps__rail-y,
.main-menu.menu-light .ps__thumb-y {
  background: transparent !important;
}

.main-menu.menu-light .ps__thumb-y {
  background: #e5e7eb !important;
  border-radius: 99px;
}


/* ══════════════════════════════════════════════════════════════
   NAVBAR (top bar) redesign
   ══════════════════════════════════════════════════════════════ */

.header-navbar.navbar-shadow,
.header-navbar.floating-nav,
.header-navbar {
  min-height: 4.45rem !important;
  height: 4.45rem !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  box-shadow: none !important;
}

.header-navbar .navbar-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Floating nav shadow override */
.header-navbar.floating-nav {
  box-shadow: 0 4px 16px rgba(28, 63, 118, .06) !important;
  border-bottom: none !important;
}

/* ── Wallet balance pill in navbar ─────────────────────────── */
.header-navbar .navbar-container .nav-link .badge.bg-primary {
  background: var(--ch-brand-primary, #1c3f76) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  padding: .28rem .6rem !important;
  border-radius: 99px !important;
  letter-spacing: .01em;
}

/* Cart badge */
.header-navbar .navbar-container .badge-up.cart-item-count {
  background: var(--ch-brand-primary, #1c3f76) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: .62rem !important;
  font-weight: 800 !important;
  min-width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  border-radius: 99px !important;
}

/* Nav icons */
.header-navbar .navbar-container .nav-link .ficon,
.header-navbar .navbar-container .nav-link svg {
  color: #6b7280 !important;
  stroke: #6b7280;
  transition: color 140ms ease !important;
}

.header-navbar .navbar-container .nav-link:hover .ficon,
.header-navbar .navbar-container .nav-link:hover svg {
  color: var(--ch-brand-primary, #1c3f76) !important;
  stroke: var(--ch-brand-primary, #1c3f76) !important;
}

/* User name */
.header-navbar .navbar-container .user-name {
  font-size: .8125rem !important;
  font-weight: 700 !important;
  color: #1a1f2e !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* User role badge */
.header-navbar .navbar-container .user-status.badge-light-info,
.header-navbar .navbar-container .user-status {
  font-size: .68rem !important;
  font-weight: 700 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  background: rgba(8, 145, 178, .1) !important;
  color: #164e63 !important;
  border-radius: 99px !important;
  padding: .125rem .5rem !important;
}

/* Avatar */
.header-navbar .navbar-container .avatar img.round {
  border-radius: 50% !important;
  border: 2px solid #e5e7eb;
  width: 34px !important;
  height: 34px !important;
}

/* Dropdown menu */
.header-navbar .dropdown-menu {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .1) !important;
  padding: .375rem !important;
}

.header-navbar .dropdown-header {
  font-size: .7rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: #9ca3af !important;
  padding: .5rem .75rem .25rem !important;
}

.header-navbar .dropdown-item {
  border-radius: 7px !important;
  font-size: .8125rem !important;
  font-weight: 600 !important;
  color: #374151 !important;
  padding: .5rem .75rem !important;
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
  transition: background-color 120ms ease !important;
}

.header-navbar .dropdown-item:hover {
  background: rgba(28, 63, 118, .07) !important;
  color: var(--ch-brand-primary, #1c3f76) !important;
}

.header-navbar .dropdown-item svg,
.header-navbar .dropdown-item i {
  width: 14px !important;
  height: 14px !important;
  color: #9ca3af !important;
}

.header-navbar .dropdown-item:hover svg,
.header-navbar .dropdown-item:hover i {
  color: var(--ch-brand-primary, #1c3f76) !important;
}

.header-navbar .dropdown-divider {
  border-color: #f3f4f6 !important;
  margin: .25rem .375rem !important;
}

/* Mobile hamburger */
.header-navbar .bookmark-wrapper .menu-toggle {
  color: #6b7280 !important;
}

/* ── Dark layout adjustments ───────────────────────────────── */
.dark-layout .main-menu.menu-dark {
  background: #252d40 !important;
  border-right-color: #2e3a52 !important;
}

.dark-layout .main-menu.menu-dark .navigation {
  background: #252d40 !important;
}

.dark-layout .main-menu.menu-dark .navigation > li > a {
  color: #94a3b8 !important;
}

.dark-layout .main-menu.menu-dark .navigation > li > a svg,
.dark-layout .main-menu.menu-dark .navigation > li > a i {
  color: #64748b !important;
  stroke: #64748b;
}

.dark-layout .main-menu.menu-dark .navigation > li.nav-item > a:hover {
  background: rgba(255, 255, 255, .06) !important;
  color: #e2e8f0 !important;
}

.dark-layout .main-menu.menu-dark .navigation > li.nav-item > a:hover svg,
.dark-layout .main-menu.menu-dark .navigation > li.nav-item > a:hover i {
  color: #e2e8f0 !important;
  stroke: #e2e8f0 !important;
}

.dark-layout .main-menu.menu-dark .navigation > li.active > a {
  background: var(--ch-brand-primary, #1c3f76) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(28, 63, 118, .35) !important;
}

.dark-layout .main-menu.menu-dark .navigation > li.active > a svg,
.dark-layout .main-menu.menu-dark .navigation > li.active > a i {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.dark-layout .main-menu.menu-dark .navigation > li.open:not(.menu-item-closing) > a {
  background: rgba(255, 255, 255, .06) !important;
  color: #cbd5e1 !important;
}

.dark-layout .main-menu.menu-dark .navigation .menu-content > li > a {
  color: #64748b !important;
}

.dark-layout .main-menu.menu-dark .navigation .menu-content > li > a:hover {
  background: rgba(255, 255, 255, .06) !important;
  color: #e2e8f0 !important;
}

.dark-layout .main-menu.menu-dark .navigation .menu-content .active > a {
  background: rgba(255, 255, 255, .08) !important;
  color: #cbd5e1 !important;
}

.dark-layout .main-menu.menu-dark .navigation .navigation-header,
.dark-layout .main-menu.menu-dark .navigation-header {
  color: #475569 !important;
}

.dark-layout .header-navbar {
  background: #1e2638 !important;
  border-bottom-color: #2e3a52 !important;
}

.dark-layout .header-navbar .user-name {
  color: #e2e8f0 !important;
}

.dark-layout .header-navbar .dropdown-menu {
  background: #252d40 !important;
  border-color: #2e3a52 !important;
}

.dark-layout .header-navbar .dropdown-item {
  color: #94a3b8 !important;
}

.dark-layout .header-navbar .dropdown-item:hover {
  background: rgba(255, 255, 255, .06) !important;
  color: #e2e8f0 !important;
}

/*
 * Sidebar offset: target ONLY .app-content. Do NOT use bare .content — Vuexy's
 * main wrapper is <div class="app-content content"> but admin pages also use
 * an inner <div class="content"> (.ch-admin-dashboard .content). Matching both
 * applies margin twice and creates a huge gap.
 */
html body.vertical-layout.vertical-menu-modern .app-content {
  margin-left: 260px !important;
  padding-left: 0 !important;
}

html body.vertical-layout.vertical-menu-modern.menu-collapsed .app-content {
  margin-left: 80px !important;
}

.ch-admin-dashboard > .main > .content {
  margin-left: 0 !important;
}

@media (max-width: 1199.98px) {
  html body.vertical-layout.vertical-menu-modern .app-content {
    margin-left: 0 !important;
  }
}