/* ==========================================================================
   Sidebar
   ========================================================================== */

.wc-sidebar {

	display: flex;
	flex-direction: column;

	width: 280px;
	min-height: 100vh;

	background: var(--wc-color-surface);
	border-right: 1px solid var(--wc-color-border);

	transition: var(--wc-transition);

}

/* ==========================================================================
   Header
   ========================================================================== */

.wc-sidebar__header {

	padding: 2rem;

	border-bottom: 1px solid var(--wc-color-border);

}

.wc-sidebar__brand {

	display: flex;
	align-items: center;
	gap: .75rem;

	font-size: 1.25rem;
	font-weight: 700;

	color: var(--wc-color-text);

}

.wc-sidebar__brand img {

	width: 40px;
	height: 40px;

	object-fit: contain;

}

/* ==========================================================================
   Navigation
   ========================================================================== */

.wc-sidebar__nav {

	flex: 1;

	padding: 1.5rem 1rem;

}

.wc-sidebar__section {

	margin-bottom: 2rem;

}

.wc-sidebar__section-title {

	padding: 0 1rem;
	margin-bottom: .75rem;

	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;

	color: var(--wc-color-text-light);

}

.wc-sidebar__menu {

	list-style: none;

	margin: 0;
	padding: 0;

}

.wc-sidebar__item + .wc-sidebar__item {

	margin-top: .35rem;

}

.wc-sidebar__link {

	display: flex;
	align-items: center;
	gap: .85rem;

	padding: .85rem 1rem;

	border-radius: var(--wc-radius-md);

	color: var(--wc-color-text-light);

	font-weight: 500;

	text-decoration: none;

	transition: var(--wc-transition);

}

.wc-sidebar__link:hover {

	background: rgba(184,144,91,.08);

	color: var(--wc-color-primary);

}

.wc-sidebar__item--active .wc-sidebar__link {

	background: var(--wc-color-primary);

	color: #fff;

	box-shadow: var(--wc-shadow-sm);

}

.wc-sidebar__icon {

	display: flex;
	align-items: center;
	justify-content: center;

	width: 20px;
	height: 20px;

	flex-shrink: 0;

}

.wc-sidebar__badge {

	margin-left: auto;

}

/* ==========================================================================
   Submenu
   ========================================================================== */

.wc-sidebar__submenu {

	list-style: none;

	margin: .5rem 0 0;
	padding-left: 2.5rem;

}

.wc-sidebar__submenu li + li {

	margin-top: .25rem;

}

.wc-sidebar__submenu a {

	display: block;

	padding: .45rem 0;

	font-size: .9rem;

	color: var(--wc-color-text-light);

	text-decoration: none;

	transition: var(--wc-transition);

}

.wc-sidebar__submenu a:hover {

	color: var(--wc-color-primary);

}

/* ==========================================================================
   Footer
   ========================================================================== */

.wc-sidebar__footer {

	padding: 1.5rem;

	border-top: 1px solid var(--wc-color-border);

}

.wc-sidebar__profile {

	display: flex;
	align-items: center;
	gap: .85rem;

	margin-bottom: 1rem;

}

.wc-sidebar__avatar {

	display: flex;
	align-items: center;
	justify-content: center;

	width: 44px;
	height: 44px;

	border-radius: 50%;

	background: var(--wc-color-primary);

	color: #fff;

	font-weight: 700;

	flex-shrink: 0;

}

.wc-sidebar__user {

	display: flex;
	flex-direction: column;

	min-width: 0;

}

.wc-sidebar__user strong {

	font-size: .95rem;

	color: var(--wc-color-text);

}

.wc-sidebar__user span {

	font-size: .8rem;

	color: var(--wc-color-text-light);

}

.wc-sidebar__logout {

	display: flex;
	align-items: center;
	gap: .75rem;

	padding: .85rem 1rem;

	border-radius: var(--wc-radius-md);

	color: var(--wc-color-text-light);

	text-decoration: none;

	transition: var(--wc-transition);

}

.wc-sidebar__logout:hover {

	background: #FEE2E2;

	color: var(--wc-color-danger);

}

/* ==========================================================================
   Collapsed
   ========================================================================== */

.wc-sidebar--collapsed {

	width: 88px;

}

.wc-sidebar--collapsed .wc-sidebar__brand span,
.wc-sidebar--collapsed .wc-sidebar__user,
.wc-sidebar--collapsed .wc-sidebar__section-title,
.wc-sidebar--collapsed .wc-sidebar__badge {

	display: none;

}

.wc-sidebar--collapsed .wc-sidebar__link {

	justify-content: center;

	padding: .85rem;

}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:768px){

	.wc-sidebar{

		width:100%;
		min-height:auto;

	}

	.wc-sidebar__header{

		padding:1.5rem;

	}

	.wc-sidebar__nav{

		padding:1rem;

	}

	.wc-sidebar__footer{

		padding:1rem;

	}

}
.wc-sidebar__header{padding:20px 24px!important}
.wc-sidebar__brand{gap:10px!important}
.wc-sidebar__brand h2{font-size:27px!important;font-weight:700!important;letter-spacing:-.5px}
.wc-sidebar__brand span{font-size:15px!important;max-width:120px}
.wc-sidebar__nav{padding:16px 12px!important}
.wc-sidebar__item + .wc-sidebar__item{margin-top:3px}
.wc-sidebar__link{padding:11px 14px!important;min-height:46px;font-size:13px}
.wc-sidebar__footer{padding:18px 14px!important}
.wc-sidebar__logout{padding:10px 14px!important}
@media(max-width:768px){.wc-sidebar__nav{display:block}.wc-sidebar__menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.wc-sidebar__item + .wc-sidebar__item{margin-top:0}}