@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&display=swap');

/**
 * Tutor ctrlDesign — 2026 Edition
 * Glassmorphism · Outfit · Warm palette
 */

/* ===========================================
   DESIGN TOKENS
   =========================================== */

:root {
	--ctrl-font: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;

	/*
	 * ========  EDIT YOUR COLORS HERE  ========
	 * Change --ctrl-accent to any hex color.
	 * The other accent values are derived from it.
	 */
	--ctrl-accent: #7142F2;          /* ← main accent               */
	--ctrl-accent-dark: #5B30D1;     /* ← darker shade (hover)       */
	--ctrl-accent-glow: rgba(113, 66, 242, 0.08); /* ← light tint */
	--ctrl-amber: #F59E0B;           /* ← in-progress color          */
	--ctrl-emerald: #10B981;         /* ← completed color            */

	/* surfaces */
	--ctrl-bg: #ffffff;
	--ctrl-glass: rgba(255, 255, 255, 0.65);
	--ctrl-glass-hover: rgba(255, 255, 255, 0.85);
	--ctrl-glass-border: rgba(0, 0, 0, 0.06);
	--ctrl-glass-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 4px 16px rgba(0, 0, 0, 0.02);
	--ctrl-glass-blur: blur(14px);

	/* text */
	--ctrl-text: #1C1917;
	--ctrl-text-muted: #78716C;
	--ctrl-text-faint: #A8A29E;

	/* radii */
	--ctrl-radius: 16px;
	--ctrl-radius-sm: 10px;
	--ctrl-radius-xs: 8px;

	/* motion */
	--ctrl-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===========================================
   BASE & LAYOUT
   =========================================== */

.tutor-wrap.tutor-dashboard.tutor-frontend-dashboard,
.tutor-wrap.tutor-dashboard.tutor-frontend-dashboard * {
	font-family: var(--ctrl-font) !important;
}

/* preserve Tutor icon font */
.tutor-wrap.tutor-dashboard.tutor-frontend-dashboard [class^="tutor-icon-"],
.tutor-wrap.tutor-dashboard.tutor-frontend-dashboard [class*=" tutor-icon-"] {
	font-family: tutor !important;
}

.tutor-wrap.tutor-dashboard.tutor-frontend-dashboard {
	background: var(--ctrl-bg) !important;
	min-height: 100vh;
	position: relative;
	overflow-x: hidden;
	padding-top: 20px !important;
	padding-bottom: 40px !important;
	--tutor-border-color: transparent;
	--tutor-border-radius: 0;
}


.tutor-frontend-dashboard .tutor-container {
	position: relative;
	z-index: 1;
}

/* ===========================================
   HEADER
   =========================================== */

.tutor-frontend-dashboard .tutor-frontend-dashboard-header {
	background: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 16px 4px !important;
	margin-top: 12px !important;
	margin-bottom: 0 !important;
}

.tutor-frontend-dashboard .tutor-dashboard-header-avatar {
	display: none !important;
}

.tutor-frontend-dashboard .tutor-user-info {
	margin-left: 0 !important;
}

.tutor-frontend-dashboard .tutor-dashboard-header-display-name {
	display: flex !important;
	align-items: baseline !important;
	gap: 6px !important;
}

.tutor-frontend-dashboard .tutor-dashboard-header-greetings {
	font-size: 0.95rem !important;
	font-weight: 400 !important;
	color: var(--ctrl-text-muted) !important;
}

.tutor-frontend-dashboard .tutor-dashboard-header-username {
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	color: var(--ctrl-text) !important;
}

.tutor-frontend-dashboard .tutor-header-right-side {
	display: none !important;
}

/* ===========================================
   SIDEBAR  →  HORIZONTAL NAV
   =========================================== */

.tutor-frontend-dashboard .tutor-frontend-dashboard-maincontent {
	flex-direction: column !important;
}

.tutor-frontend-dashboard .tutor-frontend-dashboard-maincontent > * {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
}

.tutor-frontend-dashboard .tutor-dashboard-left-menu {
	background: var(--ctrl-glass) !important;
	backdrop-filter: var(--ctrl-glass-blur) !important;
	-webkit-backdrop-filter: var(--ctrl-glass-blur) !important;
	border: 1px solid var(--ctrl-glass-border) !important;
	box-shadow: var(--ctrl-glass-shadow) !important;
	border-radius: var(--ctrl-radius) !important;
	padding: 6px 8px !important;
	margin-bottom: 24px !important;
}

.tutor-frontend-dashboard .tutor-dashboard-permalinks {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 4px !important;
	justify-content: center !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.tutor-frontend-dashboard .tutor-dashboard-menu-item {
	list-style: none !important;
	margin: 0 !important;
}

.tutor-frontend-dashboard .tutor-dashboard-menu-item-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 10px 22px !important;
	border-radius: 100px !important;
	font-size: 0.85rem !important;
	font-weight: 500 !important;
	color: var(--ctrl-text-muted) !important;
	text-decoration: none !important;
	transition: all 0.25s var(--ctrl-ease) !important;
	white-space: nowrap !important;
}

.tutor-frontend-dashboard .tutor-dashboard-menu-item-link:hover {
	background: var(--ctrl-accent-glow) !important;
	color: var(--ctrl-accent) !important;
	text-decoration: none !important;
}

.tutor-frontend-dashboard .tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-link,
.tutor-frontend-dashboard .tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-link:hover {
	background: var(--ctrl-accent) !important;
	color: #fff !important;
	font-weight: 600 !important;
	box-shadow: 0 2px 12px rgba(113, 66, 242, 0.25) !important;
}

.tutor-frontend-dashboard .tutor-dashboard-menu-item-icon {
	font-size: 1rem !important;
	color: var(--ctrl-text-muted) !important;
	transition: color 0.25s var(--ctrl-ease) !important;
}

.tutor-frontend-dashboard .tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-icon,
.tutor-frontend-dashboard .tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-link:hover .tutor-dashboard-menu-item-icon {
	color: #fff !important;
}

.tutor-frontend-dashboard .tutor-dashboard-menu-item-link:hover .tutor-dashboard-menu-item-icon {
	color: var(--ctrl-accent) !important;
}

.tutor-frontend-dashboard .tutor-dashboard-menu-item-text {
	margin-left: 0 !important;
}

.tutor-frontend-dashboard .tutor-dashboard-menu-divider,
.tutor-frontend-dashboard .tutor-dashboard-menu-divider-header {
	display: none !important;
}

/* settings + logout — pushed to the right */
.tutor-frontend-dashboard li.tutor-dashboard-menu-settings {
	margin-left: auto !important;
}

.tutor-frontend-dashboard .tutor-dashboard-menu-logout .tutor-dashboard-menu-item-link:hover {
	color: #EF4444 !important;
	background: rgba(239, 68, 68, 0.06) !important;
}

.tutor-frontend-dashboard .tutor-dashboard-menu-logout .tutor-dashboard-menu-item-link:hover .tutor-dashboard-menu-item-icon {
	color: #EF4444 !important;
}


/* ===========================================
   CONTENT AREA
   =========================================== */

.tutor-frontend-dashboard .tutor-dashboard-content {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 4px !important;
}

.tutor-frontend-dashboard .tutor-dashboard-content-inner {
	padding: 0 !important;
}

.tutor-dashboard .tutor-dashboard-title {
	display: none !important;
}

/* page titles are redundant — horizontal nav shows active page */
.tutor-dashboard-content > .tutor-fs-5.tutor-fw-medium {
	display: none !important;
}

/* ===========================================
   STATS ROW
   =========================================== */

.ctrl-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 28px;
}

.ctrl-stat-card {
	background: var(--ctrl-glass);
	backdrop-filter: var(--ctrl-glass-blur);
	-webkit-backdrop-filter: var(--ctrl-glass-blur);
	border: 1px solid var(--ctrl-glass-border);
	border-radius: var(--ctrl-radius);
	padding: 22px 26px;
	box-shadow: var(--ctrl-glass-shadow);
	transition: all 0.3s var(--ctrl-ease);
	display: flex;
	flex-direction: column;
	gap: 6px;
	animation: ctrlFadeUp 0.4s var(--ctrl-ease) both;
}

.ctrl-stat-card:nth-child(1) { animation-delay: 0s; }
.ctrl-stat-card:nth-child(2) { animation-delay: 0.06s; }
.ctrl-stat-card:nth-child(3) { animation-delay: 0.12s; }

.ctrl-stat-card:hover {
	background: var(--ctrl-glass-hover);
	transform: translateY(-2px);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

.ctrl-stat-icon {
	width: 36px;
	height: 36px;
	border-radius: var(--ctrl-radius-xs);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 4px;
}

.ctrl-stat-icon svg {
	width: 20px;
	height: 20px;
}

.ctrl-stat-icon.is-total     { background: var(--ctrl-accent-glow); color: var(--ctrl-accent); }
.ctrl-stat-icon.is-active    { background: rgba(245, 158, 11, 0.10); color: var(--ctrl-amber); }
.ctrl-stat-icon.is-completed { background: rgba(16, 185, 129, 0.10); color: var(--ctrl-emerald); }

.ctrl-stat-number {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--ctrl-text);
	line-height: 1;
	letter-spacing: -0.02em;
}

.ctrl-stat-label {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--ctrl-text-muted);
	letter-spacing: 0.01em;
}

/* ===========================================
   SECTION TITLE
   =========================================== */

.ctrl-design-section-title {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--ctrl-text);
	margin: 0 0 20px 0;
	padding: 0;
	letter-spacing: -0.01em;
}

/* ===========================================
   COURSE TABS
   =========================================== */

.ctrl-design-tabs {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 24px;
	padding: 4px;
	background: var(--ctrl-glass);
	backdrop-filter: var(--ctrl-glass-blur);
	-webkit-backdrop-filter: var(--ctrl-glass-blur);
	border: 1px solid var(--ctrl-glass-border);
	border-radius: 100px;
}

.ctrl-design-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 20px;
	border-radius: 100px;
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--ctrl-text-muted);
	text-decoration: none;
	transition: all 0.25s var(--ctrl-ease);
	white-space: nowrap;
}

.ctrl-design-tab:hover {
	background: rgba(255, 255, 255, 0.50);
	color: var(--ctrl-text);
	text-decoration: none;
}

.ctrl-design-tab.is-active {
	background: var(--ctrl-accent);
	color: #fff;
	font-weight: 600;
	box-shadow: 0 2px 10px rgba(113, 66, 242, 0.20);
}

.ctrl-design-tab.is-active:hover {
	color: #fff;
}

.ctrl-design-tab-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 100px;
	font-size: 0.72rem;
	font-weight: 700;
	background: rgba(0, 0, 0, 0.06);
	color: var(--ctrl-text-muted);
}

.ctrl-design-tab.is-active .ctrl-design-tab-count {
	background: rgba(255, 255, 255, 0.25);
	color: #fff;
}

/* ===========================================
   COURSE GRID
   =========================================== */

.ctrl-design-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	margin-bottom: 28px;
}

/* ===========================================
   COURSE CARD (GLASS)
   =========================================== */

.ctrl-design-card {
	background: var(--ctrl-glass);
	backdrop-filter: var(--ctrl-glass-blur);
	-webkit-backdrop-filter: var(--ctrl-glass-blur);
	border: 1px solid var(--ctrl-glass-border);
	border-radius: var(--ctrl-radius);
	overflow: hidden;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	transition: all 0.35s var(--ctrl-ease);
	box-shadow: var(--ctrl-glass-shadow);
	animation: ctrlFadeUp 0.45s var(--ctrl-ease) both;
}

.ctrl-design-card:nth-child(1)  { animation-delay: 0.03s; }
.ctrl-design-card:nth-child(2)  { animation-delay: 0.06s; }
.ctrl-design-card:nth-child(3)  { animation-delay: 0.09s; }
.ctrl-design-card:nth-child(4)  { animation-delay: 0.12s; }
.ctrl-design-card:nth-child(5)  { animation-delay: 0.15s; }
.ctrl-design-card:nth-child(6)  { animation-delay: 0.18s; }
.ctrl-design-card:nth-child(7)  { animation-delay: 0.21s; }
.ctrl-design-card:nth-child(8)  { animation-delay: 0.24s; }
.ctrl-design-card:nth-child(9)  { animation-delay: 0.27s; }
.ctrl-design-card:nth-child(10) { animation-delay: 0.30s; }

.ctrl-design-card:hover {
	background: var(--ctrl-glass-hover);
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
	border-color: rgba(113, 66, 242, 0.15);
	text-decoration: none;
}

/* thumbnail */
.ctrl-design-card-thumb {
	position: relative;
	overflow: hidden;
}

.ctrl-design-ratio {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #EEEDEA;
}

.ctrl-design-ratio img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.5s var(--ctrl-ease);
}

.ctrl-design-card:hover .ctrl-design-ratio img {
	transform: scale(1.05);
}

/* progress bar */
.ctrl-design-progress-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: rgba(0, 0, 0, 0.08);
}

.ctrl-design-progress-value {
	height: 100%;
	border-radius: 0 3px 3px 0;
	background: linear-gradient(90deg, var(--ctrl-accent), #9B6FF7);
	transition: width 0.8s var(--ctrl-ease);
}

.ctrl-design-progress-value.is-complete {
	background: linear-gradient(90deg, var(--ctrl-emerald), #34D399);
	border-radius: 0;
}

/* card body */
.ctrl-design-card-body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.ctrl-design-card-title {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--ctrl-text);
	line-height: 1.4;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ctrl-design-card-meta {
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--ctrl-text-muted);
}

/* ===========================================
   BADGE
   =========================================== */

.ctrl-design-badge-complete {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 5px 12px;
	border-radius: 100px;
	background: var(--ctrl-emerald);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	box-shadow: 0 2px 8px rgba(16, 185, 129, 0.30);
}

/* ===========================================
   EMPTY STATE
   =========================================== */

.ctrl-design-empty {
	text-align: center;
	padding: 60px 24px;
	background: var(--ctrl-glass);
	backdrop-filter: var(--ctrl-glass-blur);
	-webkit-backdrop-filter: var(--ctrl-glass-blur);
	border: 1px solid var(--ctrl-glass-border);
	border-radius: var(--ctrl-radius);
}

.ctrl-design-empty p {
	color: var(--ctrl-text-muted);
	font-size: 0.95rem;
	font-weight: 500;
	margin: 0;
}

/* ===========================================
   TUTOR DEFAULTS (OVERRIDES)
   =========================================== */

.tutor-dashboard .tutor-nav {
	display: none !important;
}

.tutor-dashboard .tutor-course-ratings {
	display: none !important;
}

.tutor-dashboard .tutor-course-card,
.tutor-dashboard .tutor-card {
	border-radius: var(--ctrl-radius) !important;
	border: 1px solid var(--ctrl-glass-border) !important;
	box-shadow: var(--ctrl-glass-shadow) !important;
	background: var(--ctrl-glass) !important;
	backdrop-filter: var(--ctrl-glass-blur) !important;
	-webkit-backdrop-filter: var(--ctrl-glass-blur) !important;
}

.tutor-dashboard .tutor-progress-bar {
	height: 3px !important;
	border-radius: 2px !important;
}

/* Tutor CTA buttons (Start Learning, Continue, etc.) */
.tutor-dashboard .tutor-btn {
	border-radius: var(--ctrl-radius-xs) !important;
	font-weight: 600 !important;
	font-size: 0.84rem !important;
	padding: 10px 22px !important;
	transition: all 0.25s var(--ctrl-ease) !important;
	letter-spacing: 0.01em !important;
}

.tutor-dashboard .tutor-btn-outline-primary {
	border: 1.5px solid var(--ctrl-accent) !important;
	color: var(--ctrl-accent) !important;
	background: transparent !important;
}

.tutor-dashboard .tutor-btn-outline-primary:hover {
	background: var(--ctrl-accent) !important;
	color: #fff !important;
	border-color: var(--ctrl-accent) !important;
	box-shadow: 0 2px 12px rgba(113, 66, 242, 0.20) !important;
}

.tutor-dashboard .tutor-btn-primary {
	background: var(--ctrl-accent) !important;
	color: #fff !important;
	border-color: var(--ctrl-accent) !important;
}

.tutor-dashboard .tutor-btn-primary:hover {
	background: var(--ctrl-accent-dark) !important;
	border-color: var(--ctrl-accent-dark) !important;
	box-shadow: 0 2px 12px rgba(113, 66, 242, 0.25) !important;
}

/* ===========================================
   PAGINATION
   =========================================== */

.tutor-pagination {
	display: flex !important;
	gap: 4px !important;
	justify-content: center !important;
}

.tutor-pagination .page-numbers {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 38px !important;
	height: 38px !important;
	border-radius: var(--ctrl-radius-xs) !important;
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	color: var(--ctrl-text-muted) !important;
	background: var(--ctrl-glass) !important;
	border: 1px solid var(--ctrl-glass-border) !important;
	text-decoration: none !important;
	transition: all 0.2s var(--ctrl-ease) !important;
}

.tutor-pagination .page-numbers:hover {
	background: var(--ctrl-glass-hover) !important;
	color: var(--ctrl-text) !important;
}

.tutor-pagination .page-numbers.current {
	background: var(--ctrl-accent) !important;
	color: #fff !important;
	border-color: var(--ctrl-accent) !important;
}

/* hide mobile footer nav */
#tutor-dashboard-footer-mobile {
	display: none !important;
}

/* ===========================================
   ANIMATION
   =========================================== */

@keyframes ctrlFadeUp {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ===========================================
   RESPONSIVE
   =========================================== */

@media (max-width: 768px) {
	.tutor-frontend-dashboard .tutor-frontend-dashboard-header {
		padding: 14px 18px !important;
		margin-top: 12px !important;
		border-radius: var(--ctrl-radius-sm) !important;
	}

	.tutor-frontend-dashboard .tutor-dashboard-left-menu {
		border-radius: var(--ctrl-radius-sm) !important;
		padding: 4px 6px !important;
	}

	.tutor-frontend-dashboard .tutor-dashboard-permalinks {
		gap: 2px !important;
	}

	.tutor-frontend-dashboard .tutor-dashboard-menu-item-link {
		padding: 10px 14px !important;
		font-size: 0.8rem !important;
	}

	.tutor-frontend-dashboard .tutor-dashboard-menu-item-text {
		display: none !important;
	}

	.ctrl-stats {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	.ctrl-stats .ctrl-stat-card:last-child {
		grid-column: span 2;
	}

	.ctrl-design-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.ctrl-design-tabs {
		width: 100%;
		border-radius: var(--ctrl-radius-sm);
	}

	.ctrl-design-tab {
		flex: 1;
		justify-content: center;
		padding: 8px 12px;
		font-size: 0.78rem;
	}

	.ctrl-design-section-title {
		font-size: 1.15rem;
	}

	.ctrl-design-card-body {
		padding: 14px 16px 16px;
	}
}

@media (max-width: 480px) {
	.ctrl-stats {
		grid-template-columns: 1fr;
	}

	.ctrl-stats .ctrl-stat-card:last-child {
		grid-column: span 1;
	}
}