/**
 * File: dashboard.css
 * Purpose: Styling for User Dashboard and 10-Step Form
 * Project: Matrimony Portal
 */

/* ==========================================
   SECTION 1: GLOBAL VARIABLES & LAYOUT
   কাজের ধরণ: কালার সেট করা এবং ড্যাশবোর্ডের মূল 
   পেজ লেআউট ঠিক করা।
   ========================================== */
:root {
    --mp-primary: #7d3c98;
    --mp-secondary: #c026d3;
    --mp-bg: #f3f4f6;
}

.mp-dashboard-container {
    display: flex;
    background: var(--mp-bg);
    min-height: 800px;
    font-family: 'Hind Siliguri', sans-serif;
    gap: 20px;
    padding: 20px 0;
}


/* ==========================================
   SECTION 2: SIDEBAR & NAVIGATION
   কাজের ধরণ: বাম পাশের প্রোফাইল বক্স এবং 
   মেনু আইটেমগুলোর ডিজাইন।
   ========================================== */
.mp-dashboard-sidebar {
    width: 300px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    padding: 20px;
}

/* User Profile Box */
.mp-user-profile-box {
    text-align: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.mp-user-avatar {
    width: 80px;
    height: 80px;
    background: var(--mp-primary);
    border-radius: 50%;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mp-user-avatar i { font-size: 50px; color: #fff; width: 50px; height: 50px; }

/* Status Badges & Buttons */
.mp-status-badge {
    display: inline-block;
    padding: 3px 15px;
    border-radius: 5px;
    font-size: 13px;
    margin-top: 5px;
}
.status-badge.incomplete { background: #00a8ff; color: #fff; }

.mp-btn-complete {
    background: linear-gradient(to right, #7d3c98, #c026d3);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    margin-top: 15px;
    cursor: pointer;
}

/* Sidebar Nav Menu Items */
.mp-dashboard-nav ul { list-style: none; padding: 0; }
.mp-dashboard-nav li {
    padding: 12px 15px;
    cursor: pointer;
    border-radius: 8px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
}
.mp-dashboard-nav li.active, .mp-dashboard-nav li:hover {
    background: #fdf2f9;
    color: var(--mp-secondary);
}


/* ==========================================
   SECTION 3: STATS GRID & CARDS
   কাজের ধরণ: ড্যাশবোর্ডের মূল পাতায় যে ডাটা কার্ডগুলো 
   (কানেকশন সংখ্যা, ভিজিট) থাকে তার ডিজাইন।
   ========================================== */
.mp-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.mp-stat-card {
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.mp-stat-card.primary { background: #4a148c; color: #fff; }
.mp-stat-card.white { background: #fff; color: #333; }

.mp-stat-num { font-size: 40px; font-weight: bold; }
.mp-btn-buy { 
    background: #00d2d3; 
    color: #fff; 
    border: none; 
    padding: 8px 20px; 
    border-radius: 5px; 
    cursor: pointer;
}


/* ==========================================
   SECTION 4: BIODATA FORM STEPPER (1-10 Steps)
   কাজের ধরণ: বায়োডাটা এডিট করার সময় বাম পাশের 
   স্টেপ লিস্ট এবং স্টেপ নাম্বারগুলোর ডিজাইন।
   ========================================== */
.mp-biodata-stepper { 
    display: flex; 
    gap: 30px; 
    background: #fff; 
    padding: 30px; 
    border-radius: 10px; 
}

.mp-step-list { width: 200px; border-right: 1px solid #eee; }

.mp-step-list li {
    padding: 10px 0;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    color: #888;
    cursor: pointer;
}

.mp-step-list li.active { color: var(--mp-primary); font-weight: bold; }

/* Circular Step Numbers */
.mp-step-no {
    width: 25px;
    height: 25px;
    border: 1px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.active .mp-step-no { background: var(--mp-secondary); color: #fff; border: none; }


/* ==========================================
   SECTION 5: FORM BUTTONS (Next, Prev, Submit)
   কাজের ধরণ: ফরমের নিচে থাকা নেক্সট, প্রিভিয়াস 
   এবং ফাইনাল সাবমিট বাটনের ডিজাইন।
   ========================================== */
.mp-step-buttons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.mp-prev-btn {
    background: #fff;
    border: 1px solid #ddd;
    color: #666;
    padding: 10px 30px;
    border-radius: 5px;
    cursor: pointer;
}
.mp-prev-btn:hover { background: #f5f5f5; }

/* Final Submit Green Button */
.mp-submit-btn {
    background: linear-gradient(to right, #27ae60, #2ecc71);
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}

.mp-submit-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(46, 204, 113, 0.4);
}