/**
 * Tutor LMS - Modern Student Dashboard Skin
 * Version: 2.0.0 — Light Elegant Gradient Theme
 */

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

/* ============================================
   CSS CUSTOM PROPERTIES — Light Elegant Theme
   ============================================ */
:root {
    /* Primary palette */
    --tmd-primary:           #7C3AED;
    --tmd-primary-mid:       #9D5CF6;
    --tmd-primary-light:     #C4B5FD;
    --tmd-primary-dark:      #5B21B6;
    --tmd-primary-glow:      rgba(124, 58, 237, 0.15);

    /* Sidebar — clean white */
    --tmd-sidebar-bg:        #FFFFFF;
    --tmd-sidebar-border:    #EDE9FF;
    --tmd-sidebar-text:      #4C3B8A;
    --tmd-sidebar-text-muted:#9C8CC4;
    --tmd-sidebar-active-bg: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
    --tmd-sidebar-hover-bg:  rgba(124, 58, 237, 0.07);

    /* Header gradient */
    --tmd-header-grad:       linear-gradient(135deg, #6366F1 0%, #8B5CF6 35%, #EC4899 70%, #F97316 100%);

    /* Content area */
    --tmd-bg:                #F5F3FF;
    --tmd-card-bg:           #FFFFFF;
    --tmd-card-radius:       18px;
    --tmd-card-shadow:       0 2px 16px rgba(124, 58, 237, 0.08);
    --tmd-card-shadow-hover: 0 14px 40px rgba(124, 58, 237, 0.16);
    --tmd-border:            #EDE9FF;

    /* Typography */
    --tmd-font:              'Cairo', sans-serif;
    --tmd-text-dark:         #2E1065;
    --tmd-text-body:         #4C3B8A;
    --tmd-text-muted:        #9C8CC4;

    /* Stat card gradients */
    --tmd-grad-1: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    --tmd-grad-2: linear-gradient(135deg, #EC4899 0%, #F97316 100%);
    --tmd-grad-3: linear-gradient(135deg, #06B6D4 0%, #3B82F6 100%);
    --tmd-grad-4: linear-gradient(135deg, #10B981 0%, #06B6D4 100%);
    --tmd-grad-5: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
    --tmd-grad-6: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);

    /* Progress */
    --tmd-progress-track:    #EDE9FF;
    --tmd-progress-fill:     linear-gradient(90deg, #7C3AED, #EC4899, #F97316);

    /* Transitions */
    --tmd-transition:        all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    --tmd-transition-fast:   all 0.16s ease;
}

/* ============================================
   BASE & GLOBAL OVERRIDES
   ============================================ */
.tutor-frontend-dashboard,
.tutor-dashboard-student {
    font-family: var(--tmd-font) !important;
    background-color: var(--tmd-bg) !important;
    min-height: 100vh;
}

.tutor-frontend-dashboard *:not([class*="tutor-icon-"]):not([class*="ttr"]):not(.dashicons) {
    font-family: var(--tmd-font) !important;
}

/* ============================================
   MAIN WRAPPER
   ============================================ */
.tutor-wrap.tutor-dashboard {
    background: var(--tmd-bg);
}

.tutor-wrap.tutor-dashboard > .tutor-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ============================================
   TOP HEADER BAR — Vivid Gradient
   ============================================ */
.tutor-frontend-dashboard-header {
    background: var(--tmd-header-grad) !important;
    margin-bottom: 0 !important;
    padding: 22px 32px !important;
    border-bottom: none !important;
    position: relative;
    overflow: hidden;
    align-items: center !important;
}

/* Soft white shimmer overlay */
.tutor-frontend-dashboard-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 100%);
    pointer-events: none;
}

/* Decorative circle top-right */
.tutor-frontend-dashboard-header::after {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    pointer-events: none;
}

/* Header left: avatar + greeting */
.tutor-header-left-side {
    gap: 16px;
}

.tutor-dashboard-header-avatar img,
.tutor-dashboard-header-avatar .tutor-avatar {
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    border: 3px solid rgba(255,255,255,0.7) !important;
    box-shadow: 0 0 0 5px rgba(255,255,255,0.2), 0 4px 16px rgba(0,0,0,0.2) !important;
    object-fit: cover;
    transition: var(--tmd-transition);
}

.tutor-dashboard-header-avatar img:hover {
    border-color: #fff !important;
    box-shadow: 0 0 0 7px rgba(255,255,255,0.3), 0 4px 20px rgba(0,0,0,0.25) !important;
    transform: scale(1.05);
}

/* Greetings text */
.tutor-user-info .tutor-dashboard-header-greetings,
.tutor-dashboard-header-greetings {
    color: rgba(255,255,255,0.75) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.4px !important;
}

.tutor-user-info .tutor-dashboard-header-username,
.tutor-dashboard-header-username {
    color: #FFFFFF !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px !important;
    line-height: 1.2 !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.15);
}

/* Header buttons */
.tutor-header-right-side .tutor-btn,
.tutor-header-right-side a.tutor-btn {
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 9px 20px !important;
    transition: var(--tmd-transition) !important;
}

.tutor-header-right-side .tutor-btn-outline-primary {
    background: rgba(255,255,255,0.2) !important;
    border: 1.5px solid rgba(255,255,255,0.6) !important;
    color: #FFFFFF !important;
    backdrop-filter: blur(6px);
}

.tutor-header-right-side .tutor-btn-outline-primary:hover {
    background: rgba(255,255,255,0.95) !important;
    border-color: transparent !important;
    color: var(--tmd-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* ============================================
   LAYOUT: SIDEBAR + CONTENT
   ============================================ */
.tutor-frontend-dashboard-maincontent {
    flex-wrap: nowrap !important;
    min-height: calc(100vh - 98px);
}

/* ============================================
   SIDEBAR NAVIGATION — Light White
   ============================================ */
.tutor-dashboard-left-menu {
    background: var(--tmd-sidebar-bg) !important;
    min-height: calc(100vh - 98px) !important;
    padding: 24px 14px !important;
    border-right: 1.5px solid var(--tmd-sidebar-border) !important;
    position: relative;
    flex-shrink: 0;
    box-shadow: 4px 0 20px rgba(124,58,237,0.06);
}

/* Soft violet gradient top glow */
.tutor-dashboard-left-menu::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 140px;
    background: linear-gradient(180deg, rgba(124,58,237,0.06) 0%, transparent 100%);
    pointer-events: none;
}

/* Nav List */
.tutor-dashboard-permalinks {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Nav Item */
.tutor-dashboard-menu-item {
    border-radius: 16px !important;
    overflow: visible !important;
    transition: var(--tmd-transition) !important;
}

/* Nav Link — card style */
.tutor-dashboard-menu-item-link {
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    color: var(--tmd-sidebar-text) !important;
    text-decoration: none !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    transition: var(--tmd-transition) !important;
    position: relative;
    background: transparent !important;
    border: 1px solid transparent !important;
}

.tutor-dashboard-menu-item-link:hover {
    background: rgba(124,58,237,0.05) !important;
    border-color: rgba(124,58,237,0.1) !important;
    color: var(--tmd-primary) !important;
    text-decoration: none !important;
}

/* Active nav item */
.tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-link {
    background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(236,72,153,0.06)) !important;
    border-color: rgba(124,58,237,0.18) !important;
    color: var(--tmd-primary) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 16px rgba(124,58,237,0.1) !important;
}

/* ============================================
   SIDEBAR ICONS — Colorful Gradient Badges
   (inspired by EduVision style)
   ============================================ */

/* Base icon box */
.tutor-dashboard-menu-item-icon {
    font-size: 22px !important;
    flex-shrink: 0 !important;
    width: 48px !important;
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    color: #FFFFFF !important;
    transition: var(--tmd-transition) !important;
    position: relative;
    /* Default fallback gradient */
    background: linear-gradient(145deg, #7C3AED, #EC4899) !important;
    box-shadow:
        0 8px 20px -6px rgba(0,0,0,0.35),
        inset 0 2px 6px rgba(255,255,255,0.3),
        inset 0 -2px 4px rgba(0,0,0,0.15) !important;
}

/* Hover: lift + slight rotate */
.tutor-dashboard-menu-item-link:hover .tutor-dashboard-menu-item-icon {
    transform: translateY(-4px) scale(1.12) rotate(4deg) !important;
    box-shadow:
        0 16px 28px -6px rgba(0,0,0,0.38),
        inset 0 2px 6px rgba(255,255,255,0.35),
        inset 0 -2px 4px rgba(0,0,0,0.12) !important;
    color: #fff !important;
}

/* Active: brighter glow */
.tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-link .tutor-dashboard-menu-item-icon {
    transform: translateY(-2px) scale(1.06) !important;
    box-shadow:
        0 12px 30px -6px rgba(0,0,0,0.4),
        inset 0 2px 8px rgba(255,255,255,0.4),
        inset 0 -2px 4px rgba(0,0,0,0.1) !important;
    color: #fff !important;
}

/* === Per-item gradient colors (nth-child on menu-item) === */
.tutor-dashboard-menu-item:nth-child(1)  .tutor-dashboard-menu-item-icon { background: linear-gradient(145deg, #FF6B6B, #EE5A24) !important; box-shadow: 0 8px 20px -6px rgba(238,90,36,0.5), inset 0 2px 6px rgba(255,255,255,0.3) !important; }
.tutor-dashboard-menu-item:nth-child(2)  .tutor-dashboard-menu-item-icon { background: linear-gradient(145deg, #4ECDC4, #44A08D) !important; box-shadow: 0 8px 20px -6px rgba(68,160,141,0.5), inset 0 2px 6px rgba(255,255,255,0.3) !important; }
.tutor-dashboard-menu-item:nth-child(3)  .tutor-dashboard-menu-item-icon { background: linear-gradient(145deg, #A770EF, #CF8BF3) !important; box-shadow: 0 8px 20px -6px rgba(167,112,239,0.5), inset 0 2px 6px rgba(255,255,255,0.3) !important; }
.tutor-dashboard-menu-item:nth-child(4)  .tutor-dashboard-menu-item-icon { background: linear-gradient(145deg, #F9D423, #FF4E50) !important; box-shadow: 0 8px 20px -6px rgba(249,212,35,0.5), inset 0 2px 6px rgba(255,255,255,0.3) !important; }
.tutor-dashboard-menu-item:nth-child(5)  .tutor-dashboard-menu-item-icon { background: linear-gradient(145deg, #00B4DB, #0083B0) !important; box-shadow: 0 8px 20px -6px rgba(0,131,176,0.5), inset 0 2px 6px rgba(255,255,255,0.3) !important; }
.tutor-dashboard-menu-item:nth-child(6)  .tutor-dashboard-menu-item-icon { background: linear-gradient(145deg, #FF8C42, #F27121) !important; box-shadow: 0 8px 20px -6px rgba(242,113,33,0.5), inset 0 2px 6px rgba(255,255,255,0.3) !important; }
.tutor-dashboard-menu-item:nth-child(7)  .tutor-dashboard-menu-item-icon { background: linear-gradient(145deg, #6A11CB, #2575FC) !important; box-shadow: 0 8px 20px -6px rgba(106,17,203,0.5), inset 0 2px 6px rgba(255,255,255,0.3) !important; }
.tutor-dashboard-menu-item:nth-child(8)  .tutor-dashboard-menu-item-icon { background: linear-gradient(145deg, #11998E, #38EF7D) !important; box-shadow: 0 8px 20px -6px rgba(17,153,142,0.5), inset 0 2px 6px rgba(255,255,255,0.3) !important; }
.tutor-dashboard-menu-item:nth-child(9)  .tutor-dashboard-menu-item-icon { background: linear-gradient(145deg, #FC4A1A, #F7B733) !important; box-shadow: 0 8px 20px -6px rgba(252,74,26,0.5), inset 0 2px 6px rgba(255,255,255,0.3) !important; }
.tutor-dashboard-menu-item:nth-child(10) .tutor-dashboard-menu-item-icon { background: linear-gradient(145deg, #8E2DE2, #4A00E0) !important; box-shadow: 0 8px 20px -6px rgba(74,0,224,0.5), inset 0 2px 6px rgba(255,255,255,0.3) !important; }
.tutor-dashboard-menu-item:nth-child(11) .tutor-dashboard-menu-item-icon { background: linear-gradient(145deg, #FF416C, #FF4B2B) !important; box-shadow: 0 8px 20px -6px rgba(255,65,108,0.5), inset 0 2px 6px rgba(255,255,255,0.3) !important; }
.tutor-dashboard-menu-item:nth-child(12) .tutor-dashboard-menu-item-icon { background: linear-gradient(145deg, #F2994A, #F2C94C) !important; box-shadow: 0 8px 20px -6px rgba(242,153,74,0.5), inset 0 2px 6px rgba(255,255,255,0.3) !important; }
.tutor-dashboard-menu-item:nth-child(13) .tutor-dashboard-menu-item-icon { background: linear-gradient(145deg, #1A2980, #26D0CE) !important; box-shadow: 0 8px 20px -6px rgba(38,208,206,0.5), inset 0 2px 6px rgba(255,255,255,0.3) !important; }
.tutor-dashboard-menu-item:nth-child(14) .tutor-dashboard-menu-item-icon { background: linear-gradient(145deg, #FF512F, #DD2476) !important; box-shadow: 0 8px 20px -6px rgba(221,36,118,0.5), inset 0 2px 6px rgba(255,255,255,0.3) !important; }
.tutor-dashboard-menu-item:nth-child(15) .tutor-dashboard-menu-item-icon { background: linear-gradient(145deg, #00CDAC, #02AABD) !important; box-shadow: 0 8px 20px -6px rgba(2,170,189,0.5), inset 0 2px 6px rgba(255,255,255,0.3) !important; }

/* odd items after 15 fallback to cycling */
.tutor-dashboard-menu-item:nth-child(16) .tutor-dashboard-menu-item-icon { background: linear-gradient(145deg, #FF6B6B, #EE5A24) !important; }
.tutor-dashboard-menu-item:nth-child(17) .tutor-dashboard-menu-item-icon { background: linear-gradient(145deg, #6A11CB, #2575FC) !important; }
.tutor-dashboard-menu-item:nth-child(18) .tutor-dashboard-menu-item-icon { background: linear-gradient(145deg, #11998E, #38EF7D) !important; }
.tutor-dashboard-menu-item:nth-child(19) .tutor-dashboard-menu-item-icon { background: linear-gradient(145deg, #F2994A, #F2C94C) !important; }
.tutor-dashboard-menu-item:nth-child(20) .tutor-dashboard-menu-item-icon { background: linear-gradient(145deg, #8E2DE2, #4A00E0) !important; }

/* Divider items don't get icon styles */
.tutor-dashboard-menu-divider .tutor-dashboard-menu-item-icon,
.tutor-dashboard-menu-divider-header .tutor-dashboard-menu-item-icon {
    display: none !important;
}

/* Nav text */
.tutor-dashboard-menu-item-text {
    margin-left: 0 !important;
    flex: 1;
}

/* Divider */
.tutor-dashboard-menu-divider {
    height: 1px !important;
    background: var(--tmd-sidebar-border) !important;
    margin: 10px 4px !important;
    list-style: none;
    padding: 0 !important;
}

.tutor-dashboard-menu-divider-header {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: var(--tmd-sidebar-text-muted) !important;
    padding: 6px 14px 4px !important;
    list-style: none;
}

/* ============================================
   MAIN CONTENT AREA
   ============================================ */
.tutor-col-12.tutor-col-md-8.tutor-col-lg-9 {
    flex: 1;
    min-width: 0;
}

.tutor-dashboard-content {
    padding: 32px 32px 48px !important;
    background: var(--tmd-bg) !important;
    min-height: calc(100vh - 98px);
}

/* Dashboard title */
.tutor-dashboard-title {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: var(--tmd-text-dark) !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 28px !important;
    position: relative;
    display: inline-block !important;
}

.tutor-dashboard-title::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 48px;
    height: 4px;
    background: var(--tmd-sidebar-active-bg);
    border-radius: 4px;
}

/* ============================================
   STAT CARDS
   ============================================ */
.tutor-dashboard-content-inner .tutor-card {
    border: 1px solid var(--tmd-border) !important;
    border-radius: var(--tmd-card-radius) !important;
    box-shadow: var(--tmd-card-shadow) !important;
    transition: var(--tmd-transition) !important;
    overflow: hidden;
    position: relative;
    background: var(--tmd-card-bg) !important;
}

.tutor-dashboard-content-inner .tutor-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--tmd-card-shadow-hover) !important;
    border-color: rgba(124,58,237,0.2) !important;
}

/* Card inner content */
.tutor-dashboard-content-inner .tutor-card > div {
    padding: 26px !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
}

/* Icon box */
.tutor-dashboard-content-inner .tutor-round-box {
    width: 56px !important;
    height: 56px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 6px !important;
    flex-shrink: 0;
    transition: var(--tmd-transition) !important;
}

.tutor-dashboard-content-inner .tutor-card:hover .tutor-round-box {
    transform: scale(1.1) rotate(-5deg) !important;
}

.tutor-dashboard-content-inner .tutor-round-box i {
    font-size: 22px !important;
    color: #FFFFFF !important;
}

/* Per-card gradient + shadow */
.tutor-dashboard-content-inner .tutor-col-xl-4:nth-child(1) .tutor-round-box {
    background: var(--tmd-grad-1) !important;
    box-shadow: 0 8px 20px rgba(99,102,241,0.4) !important;
}
.tutor-dashboard-content-inner .tutor-col-xl-4:nth-child(2) .tutor-round-box {
    background: var(--tmd-grad-2) !important;
    box-shadow: 0 8px 20px rgba(236,72,153,0.35) !important;
}
.tutor-dashboard-content-inner .tutor-col-xl-4:nth-child(3) .tutor-round-box {
    background: var(--tmd-grad-3) !important;
    box-shadow: 0 8px 20px rgba(6,182,212,0.35) !important;
}
.tutor-dashboard-content-inner .tutor-col-xl-4:nth-child(4) .tutor-round-box {
    background: var(--tmd-grad-4) !important;
    box-shadow: 0 8px 20px rgba(16,185,129,0.35) !important;
}
.tutor-dashboard-content-inner .tutor-col-xl-4:nth-child(5) .tutor-round-box {
    background: var(--tmd-grad-5) !important;
    box-shadow: 0 8px 20px rgba(245,158,11,0.35) !important;
}
.tutor-dashboard-content-inner .tutor-col-xl-4:nth-child(6) .tutor-round-box {
    background: var(--tmd-grad-6) !important;
    box-shadow: 0 8px 20px rgba(139,92,246,0.35) !important;
}

/* Mobile (lg-6) same gradients */
.tutor-dashboard-content-inner .tutor-col-lg-6:nth-child(1) .tutor-round-box { background: var(--tmd-grad-1) !important; }
.tutor-dashboard-content-inner .tutor-col-lg-6:nth-child(2) .tutor-round-box { background: var(--tmd-grad-2) !important; }
.tutor-dashboard-content-inner .tutor-col-lg-6:nth-child(3) .tutor-round-box { background: var(--tmd-grad-3) !important; }
.tutor-dashboard-content-inner .tutor-col-lg-6:nth-child(4) .tutor-round-box { background: var(--tmd-grad-4) !important; }
.tutor-dashboard-content-inner .tutor-col-lg-6:nth-child(5) .tutor-round-box { background: var(--tmd-grad-5) !important; }
.tutor-dashboard-content-inner .tutor-col-lg-6:nth-child(6) .tutor-round-box { background: var(--tmd-grad-6) !important; }

/* Top gradient bar per card */
.tutor-dashboard-content-inner .tutor-col-xl-4:nth-child(1) .tutor-card::before { background: var(--tmd-grad-1); }
.tutor-dashboard-content-inner .tutor-col-xl-4:nth-child(2) .tutor-card::before { background: var(--tmd-grad-2); }
.tutor-dashboard-content-inner .tutor-col-xl-4:nth-child(3) .tutor-card::before { background: var(--tmd-grad-3); }
.tutor-dashboard-content-inner .tutor-col-xl-4:nth-child(4) .tutor-card::before { background: var(--tmd-grad-4); }
.tutor-dashboard-content-inner .tutor-col-xl-4:nth-child(5) .tutor-card::before { background: var(--tmd-grad-5); }
.tutor-dashboard-content-inner .tutor-col-xl-4:nth-child(6) .tutor-card::before { background: var(--tmd-grad-6); }

.tutor-dashboard-content-inner .tutor-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    border-radius: var(--tmd-card-radius) var(--tmd-card-radius) 0 0;
}

/* Stat number */
.tutor-dashboard-content-inner .tutor-fs-3 {
    font-size: 36px !important;
    font-weight: 800 !important;
    color: var(--tmd-text-dark) !important;
    letter-spacing: -1px !important;
    line-height: 1.1 !important;
}

/* Stat label */
.tutor-dashboard-content-inner .tutor-fs-7.tutor-color-secondary {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--tmd-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
}

/* ============================================
   IN PROGRESS COURSES
   ============================================ */
.tutor-frontend-dashboard-course-progress > .tutor-fs-5 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--tmd-text-dark) !important;
    margin-bottom: 20px !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tutor-frontend-dashboard-course-progress > .tutor-fs-5::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 22px;
    background: var(--tmd-sidebar-active-bg);
    border-radius: 4px;
    flex-shrink: 0;
}

.tutor-course-progress-item.tutor-card {
    border-radius: var(--tmd-card-radius) !important;
    border: 1px solid var(--tmd-border) !important;
    box-shadow: var(--tmd-card-shadow) !important;
    overflow: hidden !important;
    transition: var(--tmd-transition) !important;
    margin-bottom: 16px !important;
    background: var(--tmd-card-bg) !important;
}

.tutor-course-progress-item.tutor-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--tmd-card-shadow-hover) !important;
    border-color: rgba(124,58,237,0.2) !important;
}

.tutor-course-progress-item .tutor-card-image-left {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease !important;
}

.tutor-course-progress-item:hover .tutor-card-image-left {
    transform: scale(1.04) !important;
}

.tutor-course-progress-item .tutor-card-body {
    padding: 20px 24px !important;
}

.tutor-course-progress-item-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--tmd-text-dark) !important;
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
}

.tutor-course-progress-item .tutor-color-muted {
    color: var(--tmd-text-muted) !important;
}

/* Progress bar */
.tutor-course-progress-item .tutor-progress-bar {
    height: 7px !important;
    background: var(--tmd-progress-track) !important;
    border-radius: 100px !important;
    overflow: hidden !important;
}

.tutor-course-progress-item .tutor-progress-value {
    background: var(--tmd-progress-fill) !important;
    height: 100% !important;
    border-radius: 100px !important;
    width: var(--tutor-progress-value, 0%) !important;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.progress-percentage .tutor-color-black {
    color: var(--tmd-primary) !important;
    font-weight: 700 !important;
}

/* ============================================
   MY COURSES TABLE SECTION
   ============================================ */
.popular-courses-heading-dashboard > .tutor-fs-5 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--tmd-text-dark) !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

.popular-courses-heading-dashboard > .tutor-fs-5::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 22px;
    background: var(--tmd-grad-2);
    border-radius: 4px;
    flex-shrink: 0;
}

.popular-courses-heading-dashboard .tutor-btn-ghost {
    color: var(--tmd-primary) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border: 1.5px solid rgba(124,58,237,0.25) !important;
    border-radius: 8px !important;
    padding: 7px 16px !important;
    transition: var(--tmd-transition) !important;
}

.popular-courses-heading-dashboard .tutor-btn-ghost:hover {
    background: var(--tmd-sidebar-active-bg) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 18px rgba(124,58,237,0.25);
}

/* Table */
.tutor-table-responsive {
    border-radius: var(--tmd-card-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--tmd-card-shadow) !important;
    border: 1px solid var(--tmd-border) !important;
    background: var(--tmd-card-bg) !important;
}

.tutor-table {
    background: var(--tmd-card-bg) !important;
    border-collapse: collapse !important;
    width: 100%;
}

.tutor-table thead tr {
    background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FF 100%) !important;
    border-bottom: 2px solid var(--tmd-border) !important;
}

.tutor-table thead th {
    color: var(--tmd-text-muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 14px 20px !important;
    border: none !important;
}

.tutor-table tbody tr {
    border-bottom: 1px solid var(--tmd-border) !important;
    transition: var(--tmd-transition-fast) !important;
}

.tutor-table tbody tr:last-child { border-bottom: none !important; }

.tutor-table tbody tr:hover {
    background: rgba(124, 58, 237, 0.03) !important;
}

.tutor-table tbody td {
    padding: 14px 20px !important;
    color: var(--tmd-text-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: none !important;
    vertical-align: middle !important;
}

.tutor-table tbody td a {
    color: var(--tmd-text-dark) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: var(--tmd-transition-fast) !important;
}

.tutor-table tbody td a:hover {
    color: var(--tmd-primary) !important;
}

/* ============================================
   PROFILE COMPLETION CARD
   ============================================ */
.tutor-profile-completion {
    border-radius: var(--tmd-card-radius) !important;
    border: 1px solid rgba(124,58,237,0.12) !important;
    background: linear-gradient(135deg, #FAF8FF 0%, #F5F3FF 100%) !important;
    box-shadow: var(--tmd-card-shadow) !important;
    overflow: hidden !important;
    position: relative;
}

.tutor-profile-completion::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--tmd-sidebar-active-bg);
}

.tutor-profile-completion .tutor-progress-bar {
    background: var(--tmd-progress-track) !important;
    border-radius: 100px !important;
    overflow: hidden !important;
}

.tutor-profile-completion .tutor-progress-value {
    background: var(--tmd-progress-fill) !important;
    border-radius: 100px !important;
    transition: width 0.8s ease !important;
}

/* ============================================
   ALERT STYLES
   ============================================ */
.tutor-alert.tutor-primary {
    border-radius: 12px !important;
    border-left: 4px solid var(--tmd-primary) !important;
    background: rgba(124,58,237,0.05) !important;
    padding: 14px 18px !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

/* ============================================
   ENROLLED COURSES GRID
   ============================================ */
.enrolled-courses .tutor-card.tutor-course-card {
    border-radius: var(--tmd-card-radius) !important;
    border: 1px solid var(--tmd-border) !important;
    box-shadow: var(--tmd-card-shadow) !important;
    transition: var(--tmd-transition) !important;
    overflow: hidden !important;
    background: var(--tmd-card-bg) !important;
}

.enrolled-courses .tutor-card.tutor-course-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--tmd-card-shadow-hover) !important;
    border-color: rgba(124,58,237,0.25) !important;
}

.enrolled-courses .tutor-card-body {
    padding: 18px !important;
}

.enrolled-courses .tutor-course-name a {
    color: var(--tmd-text-dark) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    transition: var(--tmd-transition-fast) !important;
    line-height: 1.4 !important;
}

.enrolled-courses .tutor-course-name a:hover {
    color: var(--tmd-primary) !important;
}

/* Nav tabs */
.tutor-nav {
    border-bottom: 2px solid var(--tmd-border) !important;
}

.tutor-nav-item .tutor-nav-link {
    color: var(--tmd-text-muted) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    border-radius: 0 !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -2px !important;
    transition: var(--tmd-transition-fast) !important;
}

.tutor-nav-item .tutor-nav-link:hover {
    color: var(--tmd-primary) !important;
    border-bottom-color: rgba(124,58,237,0.3) !important;
}

.tutor-nav-item .tutor-nav-link.is-active {
    color: var(--tmd-primary) !important;
    border-bottom-color: var(--tmd-primary) !important;
    background: transparent !important;
}

/* Progress bars global */
.enrolled-courses .tutor-progress-bar {
    height: 6px !important;
    background: var(--tmd-progress-track) !important;
    border-radius: 100px !important;
    overflow: hidden !important;
}

.enrolled-courses .tutor-progress-value {
    background: var(--tmd-progress-fill) !important;
    border-radius: 100px !important;
    height: 100% !important;
    width: var(--tutor-progress-value, 0%) !important;
}

/* ============================================
   MOBILE FOOTER NAV
   ============================================ */
#tutor-dashboard-footer-mobile {
    background: #FFFFFF !important;
    border-top: 1.5px solid var(--tmd-border) !important;
    box-shadow: 0 -4px 20px rgba(124,58,237,0.1) !important;
}

#tutor-dashboard-footer-mobile a {
    color: var(--tmd-text-muted) !important;
    transition: var(--tmd-transition-fast) !important;
}

#tutor-dashboard-footer-mobile a.active,
#tutor-dashboard-footer-mobile a:hover {
    color: var(--tmd-primary) !important;
}

/* ============================================
   RATING STARS
   ============================================ */
.tutor-star-rating-group span,
.tutor-ratings span {
    color: #F59E0B !important;
}

.tutor-ratings-count,
.tutor-rating-count {
    color: var(--tmd-text-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* ============================================
   GENERAL UTILITY OVERRIDES
   ============================================ */
.tutor-frontend-dashboard .tutor-color-black {
    color: var(--tmd-text-dark) !important;
}

.tutor-frontend-dashboard .tutor-color-secondary {
    color: var(--tmd-text-body) !important;
}

.tutor-frontend-dashboard .tutor-color-muted {
    color: var(--tmd-text-muted) !important;
}

/* ============================================
   FADE-IN ANIMATIONS
   ============================================ */
@keyframes tmd-fadeInUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes tmd-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.tutor-dashboard-content {
    animation: tmd-fadeIn 0.35s ease;
}

.tutor-dashboard-content-inner .tutor-col-xl-4,
.tutor-dashboard-content-inner .tutor-col-lg-6 {
    animation: tmd-fadeInUp 0.5s ease both;
}

.tutor-dashboard-content-inner .tutor-col-xl-4:nth-child(1),
.tutor-dashboard-content-inner .tutor-col-lg-6:nth-child(1) { animation-delay: 0.05s; }
.tutor-dashboard-content-inner .tutor-col-xl-4:nth-child(2),
.tutor-dashboard-content-inner .tutor-col-lg-6:nth-child(2) { animation-delay: 0.10s; }
.tutor-dashboard-content-inner .tutor-col-xl-4:nth-child(3),
.tutor-dashboard-content-inner .tutor-col-lg-6:nth-child(3) { animation-delay: 0.15s; }
.tutor-dashboard-content-inner .tutor-col-xl-4:nth-child(4),
.tutor-dashboard-content-inner .tutor-col-lg-6:nth-child(4) { animation-delay: 0.20s; }
.tutor-dashboard-content-inner .tutor-col-xl-4:nth-child(5),
.tutor-dashboard-content-inner .tutor-col-lg-6:nth-child(5) { animation-delay: 0.25s; }
.tutor-dashboard-content-inner .tutor-col-xl-4:nth-child(6),
.tutor-dashboard-content-inner .tutor-col-lg-6:nth-child(6) { animation-delay: 0.30s; }

.tutor-course-progress-item { animation: tmd-fadeInUp 0.45s ease both; }
.tutor-course-progress-item:nth-child(1) { animation-delay: 0.05s; }
.tutor-course-progress-item:nth-child(2) { animation-delay: 0.12s; }
.tutor-course-progress-item:nth-child(3) { animation-delay: 0.19s; }

/* ============================================
   RESPONSIVE — TABLET
   ============================================ */
@media (max-width: 991px) {
    .tutor-dashboard-content { padding: 24px 20px 40px !important; }
    .tutor-frontend-dashboard-header { padding: 16px 20px !important; }
    .tutor-dashboard-left-menu { padding: 16px 10px !important; }
}

/* ============================================
   RESPONSIVE — MOBILE
   ============================================ */
@media (max-width: 767px) {
    .tutor-frontend-dashboard-header { padding: 14px 16px !important; }
    .tutor-dashboard-header-username { font-size: 18px !important; }
    .tutor-dashboard-content { padding: 20px 16px 80px !important; }
    .tutor-dashboard-title { font-size: 21px !important; }

    .tutor-dashboard-content-inner .tutor-card > div {
        flex-direction: row !important;
        text-align: left !important;
        padding: 16px !important;
    }

    .tutor-dashboard-content-inner .tutor-round-box {
        margin-bottom: 0 !important;
        margin-right: 14px !important;
        flex-shrink: 0;
    }

    .tutor-dashboard-content-inner .tutor-fs-3 { font-size: 26px !important; }
    .tutor-d-none.tutor-d-lg-block { display: none !important; }
    .tutor-d-block.tutor-d-lg-none { display: block !important; }
}


/* ============================================================
   FULL UI COMPONENTS UPGRADE — v3.0
   يشمل: أزرار | نماذج | باجات | ترقيم صفحات | 
          قوائم منسدلة | مودال | تبويبات | تنبيهات
   ============================================================ */

/* ============================================================
   BUTTONS
   ============================================================ */

/* Base button reset */
.tutor-frontend-dashboard .tutor-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    font-family: var(--tmd-font) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    padding: 11px 22px !important;
    border-radius: 11px !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: var(--tmd-transition) !important;
    position: relative !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    letter-spacing: 0.2px !important;
}

/* Ripple on click */
.tutor-frontend-dashboard .tutor-btn::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(255,255,255,0) !important;
    transition: background 0.25s ease !important;
    border-radius: inherit !important;
}
.tutor-frontend-dashboard .tutor-btn:active::after {
    background: rgba(255,255,255,0.18) !important;
}

/* Primary button — gradient */
.tutor-frontend-dashboard .tutor-btn-primary {
    background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 20px rgba(124,58,237,0.35) !important;
    border: none !important;
}
.tutor-frontend-dashboard .tutor-btn-primary:hover {
    background: linear-gradient(135deg, #6D28D9 0%, #DB2777 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(124,58,237,0.45) !important;
    color: #fff !important;
}
.tutor-frontend-dashboard .tutor-btn-primary:active {
    transform: translateY(0) !important;
    box-shadow: 0 4px 12px rgba(124,58,237,0.3) !important;
}

/* Outline primary */
.tutor-frontend-dashboard .tutor-btn-outline-primary {
    background: transparent !important;
    color: var(--tmd-primary) !important;
    border: 1.5px solid var(--tmd-primary) !important;
    box-shadow: none !important;
}
.tutor-frontend-dashboard .tutor-btn-outline-primary:hover {
    background: linear-gradient(135deg, #7C3AED, #EC4899) !important;
    color: #fff !important;
    border-color: transparent !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(124,58,237,0.3) !important;
}

/* Ghost button */
.tutor-frontend-dashboard .tutor-btn-ghost {
    background: rgba(124,58,237,0.07) !important;
    color: var(--tmd-primary) !important;
    border: 1.5px solid rgba(124,58,237,0.2) !important;
    box-shadow: none !important;
}
.tutor-frontend-dashboard .tutor-btn-ghost:hover {
    background: linear-gradient(135deg, #7C3AED, #EC4899) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 18px rgba(124,58,237,0.28) !important;
    transform: translateY(-2px) !important;
}

/* Small button */
.tutor-frontend-dashboard .tutor-btn-sm {
    font-size: 12px !important;
    padding: 7px 14px !important;
    border-radius: 8px !important;
    gap: 5px !important;
}

/* Block button */
.tutor-frontend-dashboard .tutor-btn-block {
    width: 100% !important;
    display: flex !important;
}

/* Danger / Secondary variants */
.tutor-frontend-dashboard .tutor-btn-danger {
    background: linear-gradient(135deg, #EF4444, #F97316) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(239,68,68,0.35) !important;
    border: none !important;
}
.tutor-frontend-dashboard .tutor-btn-danger:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(239,68,68,0.45) !important;
    color: #fff !important;
}

/* Success variant */
.tutor-frontend-dashboard .tutor-btn-success {
    background: linear-gradient(135deg, #10B981, #06B6D4) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(16,185,129,0.35) !important;
    border: none !important;
}
.tutor-frontend-dashboard .tutor-btn-success:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(16,185,129,0.45) !important;
    color: #fff !important;
}

/* ============================================================
   BADGES / LABELS / STATUS CHIPS
   ============================================================ */

.tutor-frontend-dashboard .tutor-badge-label,
.tutor-frontend-dashboard [class*="label-"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 11px !important;
    border-radius: 100px !important;
    letter-spacing: 0.5px !important;
    text-transform: capitalize !important;
    white-space: nowrap !important;
}

/* Status colors */
.tutor-frontend-dashboard .tutor-color-success,
.tutor-frontend-dashboard .label-success,
.tutor-frontend-dashboard .tutor-badge-label.label-success {
    background: rgba(16,185,129,0.1) !important;
    color: #059669 !important;
}

.tutor-frontend-dashboard .label-warning,
.tutor-frontend-dashboard .tutor-badge-label.label-warning,
.tutor-frontend-dashboard .tutor-color-warning {
    background: rgba(245,158,11,0.1) !important;
    color: #D97706 !important;
}

.tutor-frontend-dashboard .label-danger,
.tutor-frontend-dashboard .tutor-badge-label.label-danger,
.tutor-frontend-dashboard .tutor-color-danger {
    background: rgba(239,68,68,0.1) !important;
    color: #DC2626 !important;
}

.tutor-frontend-dashboard .label-primary,
.tutor-frontend-dashboard .tutor-badge-label.label-primary,
.tutor-frontend-dashboard .tutor-color-primary {
    background: rgba(124,58,237,0.1) !important;
    color: var(--tmd-primary) !important;
}

.tutor-frontend-dashboard .label-info {
    background: rgba(6,182,212,0.1) !important;
    color: #0891B2 !important;
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */

/* Form group spacing */
.tutor-frontend-dashboard .tutor-form-group {
    margin-bottom: 20px !important;
}

/* Labels */
.tutor-frontend-dashboard .tutor-form-label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--tmd-text-dark) !important;
    margin-bottom: 7px !important;
    letter-spacing: 0.2px !important;
}

/* Help text */
.tutor-frontend-dashboard .tutor-form-help {
    font-size: 12px !important;
    color: var(--tmd-text-muted) !important;
    margin-top: 5px !important;
}

/* Text inputs & textareas */
.tutor-frontend-dashboard .tutor-form-control,
.tutor-frontend-dashboard input[type="text"].tutor-form-control,
.tutor-frontend-dashboard input[type="email"].tutor-form-control,
.tutor-frontend-dashboard input[type="password"].tutor-form-control,
.tutor-frontend-dashboard input[type="number"].tutor-form-control,
.tutor-frontend-dashboard input[type="url"].tutor-form-control,
.tutor-frontend-dashboard textarea.tutor-form-control {
    width: 100% !important;
    padding: 11px 16px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--tmd-text-dark) !important;
    background: #FAFBFF !important;
    border: 1.5px solid var(--tmd-border) !important;
    border-radius: 11px !important;
    transition: var(--tmd-transition) !important;
    outline: none !important;
    font-family: var(--tmd-font) !important;
    box-shadow: 0 2px 8px rgba(124,58,237,0.04) !important;
    appearance: none !important;
}
.tutor-frontend-dashboard .tutor-form-control:focus,
.tutor-frontend-dashboard input[type="text"].tutor-form-control:focus,
.tutor-frontend-dashboard input[type="email"].tutor-form-control:focus,
.tutor-frontend-dashboard input[type="password"].tutor-form-control:focus,
.tutor-frontend-dashboard textarea.tutor-form-control:focus {
    border-color: var(--tmd-primary) !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 4px rgba(124,58,237,0.12), 0 2px 8px rgba(124,58,237,0.08) !important;
}
.tutor-frontend-dashboard .tutor-form-control::placeholder {
    color: var(--tmd-text-muted) !important;
    font-weight: 400 !important;
}

/* Small input */
.tutor-frontend-dashboard .tutor-form-control-sm {
    padding: 7px 12px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
}

/* Select dropdown */
.tutor-frontend-dashboard .tutor-form-select,
.tutor-frontend-dashboard select.tutor-form-control {
    padding: 11px 40px 11px 16px !important;
    font-size: 14px !important;
    color: var(--tmd-text-dark) !important;
    background: #FAFBFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center / 16px !important;
    border: 1.5px solid var(--tmd-border) !important;
    border-radius: 11px !important;
    appearance: none !important;
    cursor: pointer !important;
    transition: var(--tmd-transition) !important;
    font-family: var(--tmd-font) !important;
}
.tutor-frontend-dashboard .tutor-form-select:focus,
.tutor-frontend-dashboard select.tutor-form-control:focus {
    border-color: var(--tmd-primary) !important;
    box-shadow: 0 0 0 4px rgba(124,58,237,0.12) !important;
    outline: none !important;
}

/* Checkbox */
.tutor-frontend-dashboard .tutor-form-check-input {
    width: 18px !important;
    height: 18px !important;
    border: 2px solid var(--tmd-border) !important;
    border-radius: 5px !important;
    background: #fff !important;
    appearance: none !important;
    cursor: pointer !important;
    transition: var(--tmd-transition) !important;
    flex-shrink: 0 !important;
    position: relative !important;
}
.tutor-frontend-dashboard .tutor-form-check-input:checked {
    background: linear-gradient(135deg, #7C3AED, #EC4899) !important;
    border-color: transparent !important;
}
.tutor-frontend-dashboard .tutor-form-check-input:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 4px !important;
    top: 1px !important;
    width: 5px !important;
    height: 9px !important;
    border: 2px solid #fff !important;
    border-top: none !important;
    border-left: none !important;
    transform: rotate(45deg) !important;
}

/* Toggle Switch */
.tutor-frontend-dashboard .tutor-form-toggle-input {
    display: none !important;
}
.tutor-frontend-dashboard .tutor-form-toggle-control {
    display: inline-block !important;
    width: 44px !important;
    height: 24px !important;
    background: #DDD8F9 !important;
    border-radius: 100px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: var(--tmd-transition) !important;
    flex-shrink: 0 !important;
}
.tutor-frontend-dashboard .tutor-form-toggle-control::after {
    content: '' !important;
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
    transition: var(--tmd-transition) !important;
}
.tutor-frontend-dashboard .tutor-form-toggle-input:checked + .tutor-form-toggle-control {
    background: linear-gradient(135deg, #7C3AED, #EC4899) !important;
}
.tutor-frontend-dashboard .tutor-form-toggle-input:checked + .tutor-form-toggle-control::after {
    transform: translateX(20px) !important;
}

/* Input with icon */
.tutor-frontend-dashboard .tutor-form-icon {
    position: relative !important;
}
.tutor-frontend-dashboard .tutor-form-icon .tutor-form-control {
    padding-right: 44px !important;
}
.tutor-frontend-dashboard .tutor-form-icon-reverse .tutor-form-control {
    padding-left: 44px !important;
    padding-right: 16px !important;
}

/* ============================================================
   SECTION TITLES (dashboard sub-pages)
   ============================================================ */

.tutor-frontend-dashboard .tutor-fs-5.tutor-fw-medium.tutor-color-black.tutor-mb-16,
.tutor-frontend-dashboard .tutor-fs-5.tutor-fw-medium.tutor-color-black.tutor-mb-24 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--tmd-text-dark) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid var(--tmd-border) !important;
}
.tutor-frontend-dashboard .tutor-fs-5.tutor-fw-medium.tutor-color-black.tutor-mb-16::before,
.tutor-frontend-dashboard .tutor-fs-5.tutor-fw-medium.tutor-color-black.tutor-mb-24::before {
    content: '' !important;
    width: 4px !important;
    height: 20px !important;
    background: linear-gradient(135deg, #7C3AED, #EC4899) !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}

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

.tutor-frontend-dashboard .tutor-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.tutor-frontend-dashboard .tutor-pagination-hints {
    font-size: 13px !important;
    color: var(--tmd-text-muted) !important;
    font-weight: 500 !important;
}

.tutor-frontend-dashboard .tutor-pagination-hints .tutor-color-black {
    color: var(--tmd-text-dark) !important;
    font-weight: 700 !important;
}

.tutor-frontend-dashboard .tutor-pagination-numbers {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-wrap: wrap !important;
}

.tutor-frontend-dashboard .tutor-pagination-numbers .page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--tmd-text-body) !important;
    background: #FFFFFF !important;
    border: 1.5px solid var(--tmd-border) !important;
    text-decoration: none !important;
    transition: var(--tmd-transition) !important;
}

.tutor-frontend-dashboard .tutor-pagination-numbers .page-numbers:hover {
    background: rgba(124,58,237,0.08) !important;
    border-color: var(--tmd-primary) !important;
    color: var(--tmd-primary) !important;
}

.tutor-frontend-dashboard .tutor-pagination-numbers .page-numbers.current {
    background: linear-gradient(135deg, #7C3AED, #EC4899) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(124,58,237,0.35) !important;
}

.tutor-frontend-dashboard .tutor-pagination-numbers .page-numbers.prev,
.tutor-frontend-dashboard .tutor-pagination-numbers .page-numbers.next {
    font-size: 16px !important;
    background: rgba(124,58,237,0.06) !important;
    border-color: rgba(124,58,237,0.15) !important;
    color: var(--tmd-primary) !important;
}
.tutor-frontend-dashboard .tutor-pagination-numbers .page-numbers.prev:hover,
.tutor-frontend-dashboard .tutor-pagination-numbers .page-numbers.next:hover {
    background: linear-gradient(135deg, #7C3AED, #EC4899) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(124,58,237,0.3) !important;
}

/* ============================================================
   DROPDOWN MENU
   ============================================================ */

.tutor-frontend-dashboard .tutor-dropdown {
    background: #FFFFFF !important;
    border: 1px solid var(--tmd-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 40px rgba(124,58,237,0.14), 0 4px 12px rgba(0,0,0,0.06) !important;
    overflow: hidden !important;
    padding: 6px !important;
    min-width: 180px !important;
}

.tutor-frontend-dashboard .tutor-dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 9px 14px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--tmd-text-body) !important;
    border-radius: 9px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: var(--tmd-transition-fast) !important;
    white-space: nowrap !important;
}
.tutor-frontend-dashboard .tutor-dropdown-item:hover {
    background: rgba(124,58,237,0.07) !important;
    color: var(--tmd-primary) !important;
}
.tutor-frontend-dashboard .tutor-dropdown-item.tutor-color-danger:hover,
.tutor-frontend-dashboard .tutor-dropdown-item[class*="delete"]:hover,
.tutor-frontend-dashboard .tutor-dropdown-item[class*="remove"]:hover {
    background: rgba(239,68,68,0.07) !important;
    color: #DC2626 !important;
}

.tutor-frontend-dashboard .tutor-dropdown-dark {
    background: #1E1040 !important;
    border-color: rgba(124,58,237,0.2) !important;
}
.tutor-frontend-dashboard .tutor-dropdown-dark .tutor-dropdown-item {
    color: #C4B5FD !important;
}
.tutor-frontend-dashboard .tutor-dropdown-dark .tutor-dropdown-item:hover {
    background: rgba(124,58,237,0.2) !important;
    color: #fff !important;
}

/* ============================================================
   MODAL
   ============================================================ */

.tutor-frontend-dashboard .tutor-modal-overlay {
    background: rgba(30,16,64,0.55) !important;
    backdrop-filter: blur(5px) !important;
}

.tutor-frontend-dashboard .tutor-modal-window,
.tutor-frontend-dashboard .tutor-modal-content-white {
    background: #FFFFFF !important;
    border-radius: 20px !important;
    border: 1px solid var(--tmd-border) !important;
    box-shadow: 0 24px 60px rgba(124,58,237,0.2) !important;
    overflow: hidden !important;
}

.tutor-frontend-dashboard .tutor-modal-header,
.tutor-frontend-dashboard .tutor-modal-content-white > div:first-child {
    padding: 20px 24px !important;
    border-bottom: 1.5px solid var(--tmd-border) !important;
    background: linear-gradient(135deg, #FAF8FF, #F5F3FF) !important;
}

.tutor-frontend-dashboard .tutor-modal-body {
    padding: 24px !important;
}

.tutor-frontend-dashboard .tutor-modal-close-o {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(124,58,237,0.07) !important;
    color: var(--tmd-primary) !important;
    cursor: pointer !important;
    transition: var(--tmd-transition-fast) !important;
    border: none !important;
}
.tutor-frontend-dashboard .tutor-modal-close-o:hover {
    background: linear-gradient(135deg, #7C3AED, #EC4899) !important;
    color: #fff !important;
}

.tutor-frontend-dashboard .tutor-modal-btn-edit {
    background: rgba(124,58,237,0.07) !important;
    color: var(--tmd-primary) !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border: 1px solid rgba(124,58,237,0.15) !important;
    cursor: pointer !important;
    transition: var(--tmd-transition-fast) !important;
}
.tutor-frontend-dashboard .tutor-modal-btn-edit:hover {
    background: var(--tmd-primary) !important;
    color: #fff !important;
}

/* ============================================================
   ALERTS / NOTICES
   ============================================================ */

.tutor-frontend-dashboard .tutor-alert {
    border-radius: 12px !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    border: none !important;
    border-left: 4px solid !important;
}

.tutor-frontend-dashboard .tutor-alert-warning {
    background: rgba(245,158,11,0.08) !important;
    border-left-color: #F59E0B !important;
    color: #92400E !important;
}
.tutor-frontend-dashboard .tutor-alert-success {
    background: rgba(16,185,129,0.08) !important;
    border-left-color: #10B981 !important;
    color: #065F46 !important;
}
.tutor-frontend-dashboard .tutor-alert-danger {
    background: rgba(239,68,68,0.08) !important;
    border-left-color: #EF4444 !important;
    color: #991B1B !important;
}
.tutor-frontend-dashboard .tutor-alert-info {
    background: rgba(6,182,212,0.08) !important;
    border-left-color: #06B6D4 !important;
    color: #0E7490 !important;
}

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

.tutor-frontend-dashboard .tutor-empty-state {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 60px 24px !important;
    text-align: center !important;
    background: linear-gradient(135deg, #FAF8FF, #F5F3FF) !important;
    border-radius: var(--tmd-card-radius) !important;
    border: 1.5px dashed var(--tmd-border) !important;
}

.tutor-frontend-dashboard .tutor-empty-state img,
.tutor-frontend-dashboard .tutor-empty-state svg {
    width: 100px !important;
    opacity: 0.7 !important;
    margin-bottom: 16px !important;
}

.tutor-frontend-dashboard .tutor-empty-state p {
    color: var(--tmd-text-muted) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}

/* ============================================================
   SETTINGS TABS NAV (settings/nav-bar)
   ============================================================ */

.tutor-frontend-dashboard .tutor-dashboard-setting-menu-wrap {
    background: #FFFFFF !important;
    border-radius: var(--tmd-card-radius) !important;
    border: 1px solid var(--tmd-border) !important;
    box-shadow: var(--tmd-card-shadow) !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
}

.tutor-frontend-dashboard .tutor-dashboard-setting-menu {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
    padding: 8px !important;
}

.tutor-frontend-dashboard .tutor-dashboard-setting-menu a {
    padding: 9px 18px !important;
    border-radius: 9px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--tmd-text-body) !important;
    text-decoration: none !important;
    transition: var(--tmd-transition-fast) !important;
}
.tutor-frontend-dashboard .tutor-dashboard-setting-menu a:hover {
    background: rgba(124,58,237,0.07) !important;
    color: var(--tmd-primary) !important;
}
.tutor-frontend-dashboard .tutor-dashboard-setting-menu a.is-active {
    background: linear-gradient(135deg, #7C3AED, #EC4899) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(124,58,237,0.3) !important;
}

/* Settings form wrapper */
.tutor-frontend-dashboard .tutor-dashboard-setting-profile {
    background: #FFFFFF !important;
    border-radius: var(--tmd-card-radius) !important;
    border: 1px solid var(--tmd-border) !important;
    box-shadow: var(--tmd-card-shadow) !important;
    padding: 28px !important;
}

/* ============================================================
   COVER PHOTO & AVATAR EDITOR
   ============================================================ */

.tutor-frontend-dashboard #tutor_cover_area {
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden !important;
}

.tutor-frontend-dashboard .tutor_overlay .tutor-btn-primary {
    backdrop-filter: blur(4px) !important;
}

/* ============================================================
   QUIZ ATTEMPT TABLE
   ============================================================ */

.tutor-frontend-dashboard .tutor-attempt-result-wrap {
    background: #FFFFFF !important;
    border-radius: var(--tmd-card-radius) !important;
    border: 1px solid var(--tmd-border) !important;
    box-shadow: var(--tmd-card-shadow) !important;
    overflow: hidden !important;
}

/* Pass/Fail chip */
.tutor-frontend-dashboard .tutor-attempt-result-pass {
    background: rgba(16,185,129,0.1) !important;
    color: #059669 !important;
    border-radius: 100px !important;
    padding: 3px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}
.tutor-frontend-dashboard .tutor-attempt-result-fail {
    background: rgba(239,68,68,0.1) !important;
    color: #DC2626 !important;
    border-radius: 100px !important;
    padding: 3px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* ============================================================
   RADIO SELECT (purchase history / course type filters)
   ============================================================ */

.tutor-frontend-dashboard .tutor-radio-select {
    background: #FFFFFF !important;
    border: 1.5px solid var(--tmd-border) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    cursor: pointer !important;
    transition: var(--tmd-transition) !important;
}
.tutor-frontend-dashboard .tutor-radio-select:hover {
    border-color: var(--tmd-primary) !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.1) !important;
}
.tutor-frontend-dashboard .tutor-radio-select input:checked ~ * {
    color: var(--tmd-primary) !important;
}

/* ============================================================
   SCROLLBAR (sidebar + content)
   ============================================================ */

.tutor-frontend-dashboard .tutor-dashboard-left-menu::-webkit-scrollbar,
.tutor-frontend-dashboard .tutor-dashboard-content::-webkit-scrollbar {
    width: 5px !important;
}
.tutor-frontend-dashboard .tutor-dashboard-left-menu::-webkit-scrollbar-track,
.tutor-frontend-dashboard .tutor-dashboard-content::-webkit-scrollbar-track {
    background: transparent !important;
}
.tutor-frontend-dashboard .tutor-dashboard-left-menu::-webkit-scrollbar-thumb,
.tutor-frontend-dashboard .tutor-dashboard-content::-webkit-scrollbar-thumb {
    background: rgba(124,58,237,0.2) !important;
    border-radius: 100px !important;
}
.tutor-frontend-dashboard .tutor-dashboard-left-menu::-webkit-scrollbar-thumb:hover,
.tutor-frontend-dashboard .tutor-dashboard-content::-webkit-scrollbar-thumb:hover {
    background: rgba(124,58,237,0.4) !important;
}