/* ============================================================
   Public Desktop Sidebar – Modern UI overrides (CSS-only)
   Scoped to: .lw-public-master #accordionSidebar
   ============================================================ */

/* ── Token layer ── */
:root {
	--sb-primary:  var(--lw-primary-color, #e10b2d);
	--sb-dark-1:   #1a1a2e;
	--sb-dark-2:   #16213e;
	--sb-dark-3:   #0f3460;
	--sb-text:     rgba(255,255,255,0.82);
	--sb-muted:    rgba(255,255,255,0.40);
	--sb-hover-bg: rgba(255,255,255,0.07);
	--sb-active-bg:rgba(255,255,255,0.12);
	--sb-radius:   10px;
	--sb-ease:     0.17s cubic-bezier(0.4,0,0.2,1);
}

/* ── Sidebar shell ─────────────────────────────────────────
   Selector list covers bg-light utility + every AJAX repaint
   so the dark gradient is applied immediately, no flicker.
   ─────────────────────────────────────────────────────────── */
.lw-public-master #accordionSidebar,
.lw-public-master #accordionSidebar.sidebar,
.lw-public-master #accordionSidebar.sidebar.bg-light,
.lw-public-master ul#accordionSidebar {
	background-color: var(--sb-dark-1) !important;
	background: linear-gradient(180deg,
		var(--sb-dark-1)  0%,
		var(--sb-dark-2) 55%,
		var(--sb-dark-3) 100%) !important;
	border-right:   1px solid rgba(255,255,255,0.06) !important;
	box-shadow:     4px 0 28px rgba(0,0,0,0.22) !important;
	position:       sticky !important;
	top:            0 !important;
	height:         100vh !important;
	max-height:     100vh !important;
	width:          240px !important;
	padding:        0 0 28px !important;
	display:        flex !important;
	flex-direction: column !important;
	overflow-y:     auto !important;
	overflow-x:     hidden !important;
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.lw-public-master #accordionSidebar::-webkit-scrollbar       { width: 4px; }
.lw-public-master #accordionSidebar::-webkit-scrollbar-track  { background: transparent; }
.lw-public-master #accordionSidebar::-webkit-scrollbar-thumb  {
	background: rgba(255,255,255,0.14);
	border-radius: 4px;
}

/* ── Brand / Logo area ─────────────────────────────────────
   Big centered logo; hide the small_logo variants that the
   blade renders alongside the main logo img.
   ─────────────────────────────────────────────────────────── */
.lw-public-master #accordionSidebar > li:first-child {
	width: 100%;
}
.lw-public-master #accordionSidebar .sidebar-brand,
.lw-public-master #accordionSidebar > li:first-child > a {
	display:         flex !important;
	flex-direction:  column !important;
	align-items:     center !important;
	justify-content: center !important;
	padding:         28px 20px 22px !important;
	border-bottom:   1px solid rgba(255,255,255,0.09) !important;
	margin-bottom:   6px;
	text-decoration: none !important;
	width:           100%;
}
/* Hide the second/third logo imgs (small_logo variants) */
.lw-public-master #accordionSidebar .sidebar-brand > img.lw-logo-img,
.lw-public-master #accordionSidebar > li:first-child > a > img.lw-logo-img {
	display: none !important;
}
/* Center the brand-icon wrapper */
.lw-public-master #accordionSidebar .sidebar-brand-icon {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           100%;
}
/* The main logo image – bigger, centered, with soft glow */
.lw-public-master #accordionSidebar .sidebar-brand-icon img.lw-logo-img {
	display:    block !important;
	max-height: 58px !important;
	max-width:  180px !important;
	width:      auto;
	height:     auto;
	object-fit: contain;
	filter:     brightness(1.15) drop-shadow(0 2px 10px rgba(0,0,0,0.35));
}

/* ── Nav items ── */
.lw-public-master #accordionSidebar .nav-item {
	margin:        2px 10px;
	border-radius: var(--sb-radius);
	list-style:    none;
}
.lw-public-master #accordionSidebar .nav-item .nav-link {
	display:         flex !important;
	align-items:     center;
	gap:             11px;
	padding:         9px 14px !important;
	color:           var(--sb-text) !important;
	font-size:       0.87rem;
	font-weight:     500;
	letter-spacing:  0.1px;
	border-radius:   var(--sb-radius);
	position:        relative;
	text-decoration: none !important;
	transition:      background var(--sb-ease), color var(--sb-ease);
}
/* Icons – uniform dim, brand-colored on interaction */
.lw-public-master #accordionSidebar .nav-item .nav-link i {
	width:      20px;
	text-align: center;
	font-size:  0.95rem;
	color:      var(--sb-muted) !important;
	flex-shrink:0;
	transition: color var(--sb-ease);
}
/* Hover */
.lw-public-master #accordionSidebar .nav-item .nav-link:hover,
.lw-public-master #accordionSidebar .nav-item .nav-link:focus {
	background: var(--sb-hover-bg) !important;
	color:      #fff !important;
}
.lw-public-master #accordionSidebar .nav-item .nav-link:hover i,
.lw-public-master #accordionSidebar .nav-item .nav-link:focus i {
	color: var(--sb-primary) !important;
}
/* Active */
.lw-public-master #accordionSidebar .nav-item.active > .nav-link,
.lw-public-master #accordionSidebar .nav-item > .nav-link.active {
	background: var(--sb-active-bg) !important;
	color:      #fff !important;
}
.lw-public-master #accordionSidebar .nav-item.active > .nav-link::before,
.lw-public-master #accordionSidebar .nav-item > .nav-link.active::before {
	content:       "";
	position:      absolute;
	left:          0;
	top:           18%;
	bottom:        18%;
	width:         3px;
	border-radius: 0 3px 3px 0;
	background:    var(--sb-primary);
}
.lw-public-master #accordionSidebar .nav-item.active > .nav-link i,
.lw-public-master #accordionSidebar .nav-item > .nav-link.active i {
	color: var(--sb-primary) !important;
}
/* Disabled */
.lw-public-master #accordionSidebar .nav-item .nav-link.disabled,
.lw-public-master #accordionSidebar .nav-item .nav-link[aria-disabled="true"] {
	color:          var(--sb-muted) !important;
	opacity:        0.55;
	pointer-events: none;
}
.lw-public-master #accordionSidebar .nav-item .nav-link.disabled i,
.lw-public-master #accordionSidebar .nav-item .nav-link[aria-disabled="true"] i {
	color: var(--sb-muted) !important;
}

/* ── Notification badge ── */
.lw-public-master #accordionSidebar .badge-danger-sidebar {
	background:     var(--sb-primary);
	color:          #fff;
	border-radius:  999px;
	font-size:      0.63rem;
	padding:        2px 6px;
	margin-left:    4px;
	vertical-align: middle;
}

/* ── Dividers ── */
.lw-public-master #accordionSidebar .sidebar-divider {
	border-color: rgba(255,255,255,0.08) !important;
	margin:       5px 16px !important;
}

/* ── Enable Notifications button ── */
.lw-public-master #accordionSidebar #lwWebPushEnableBtnSidebar {
	margin:        8px 14px !important;
	width:         calc(100% - 28px) !important;
	background:    linear-gradient(135deg, var(--sb-primary), #ff5252) !important;
	border:        none !important;
	border-radius: var(--sb-radius) !important;
	color:         #fff !important;
	font-size:     0.83rem !important;
	font-weight:   600 !important;
	padding:       9px 14px !important;
	box-shadow:    0 4px 14px rgba(225,11,45,0.28) !important;
	transition:    transform var(--sb-ease), box-shadow var(--sb-ease);
}
.lw-public-master #accordionSidebar #lwWebPushEnableBtnSidebar:hover {
	transform:  translateY(-1px);
	box-shadow: 0 6px 18px rgba(225,11,45,0.40) !important;
}

/* ── Sidebar collapse toggle dot ── */
.lw-public-master #accordionSidebar #sidebarToggle {
	background:    rgba(255,255,255,0.10) !important;
	width:         28px;
	height:        28px;
	border-radius: 50%;
	display:       block;
	margin:        4px auto;
	border:        none;
}
.lw-public-master #accordionSidebar #sidebarToggle::after {
	border-color: rgba(255,255,255,0.55) !important;
}

/* ── Collapsed state ── */
.lw-public-master #wrapper.toggled #accordionSidebar {
	width: 88px !important;
}
.lw-public-master #wrapper.toggled #accordionSidebar .nav-item .nav-link span,
.lw-public-master #wrapper.toggled #accordionSidebar .nav-item .nav-link .badge-danger-sidebar {
	display: none !important;
}
.lw-public-master #wrapper.toggled #accordionSidebar .nav-item .nav-link {
	justify-content: center;
	padding:         12px !important;
}
.lw-public-master #wrapper.toggled #accordionSidebar .nav-item .nav-link i {
	width:     auto;
	font-size: 1.1rem;
}
.lw-public-master #wrapper.toggled #accordionSidebar .sidebar-brand,
.lw-public-master #wrapper.toggled #accordionSidebar > li:first-child > a {
	padding: 18px 12px !important;
}
.lw-public-master #wrapper.toggled #accordionSidebar .sidebar-brand-icon img.lw-logo-img {
	max-height: 36px !important;
	max-width:  64px !important;
}
.lw-public-master #wrapper.toggled #accordionSidebar #lwWebPushEnableBtnSidebar {
	font-size:       0 !important;
	padding:         0 !important;
	border-radius:   50% !important;
	width:           40px !important;
	height:          40px !important;
	margin:          8px auto !important;
	display:         flex !important;
	align-items:     center;
	justify-content: center;
}
.lw-public-master #wrapper.toggled #accordionSidebar #lwWebPushEnableBtnSidebar i {
	font-size: 1rem !important;
}

/* ── Mobile – hidden (bottom dock handles navigation) ── */
@media (max-width: 768px) {
	.lw-public-master #accordionSidebar.sidebar {
		display: none !important;
	}
}
