/* ═══════════════════════════════════════════════════════════════════════════════
   MILESTONES & ACHIEVEMENTS — WORLD CLASS UX/UI STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

#milestones-wrapper {
    font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif !important;
    background-color: #f8fafc !important;
    color: #1e293b !important;
    line-height: 1.65;
}

/* ── Sidebar Navigation ── */
#milestones-wrapper .sidebar-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
}

#milestones-wrapper .sidebar-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    color: #475569 !important;
    text-decoration: none !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    font-size: 0.88rem !important;
    transition: all 0.2s ease !important;
}

#milestones-wrapper .sidebar-link:hover {
    background: #f1f5f9 !important;
    color: #4f0071 !important;
    transform: translateX(4px) !important;
}

#milestones-wrapper .sidebar-link.active {
    background: #4f0071 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(79, 0, 113, 0.25) !important;
}

/* ── Main Content Container ── */
.milestones-main-content {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    border: 1px solid #e2e8f0;
}

/* ── Stats Dashboard Grid ── */
.stat-metric-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 16px;
    text-align: center;
    border: 1.5px solid #e2e8f0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.stat-metric-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.08);
}

.stat-metric-card.purple {
    background: linear-gradient(180deg, #faf5ff 0%, #f3e8ff 100%);
    border-color: #d8b4fe;
}
.stat-metric-card.blue {
    background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
    border-color: #bae6fd;
}
.stat-metric-card.amber {
    background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #fde68a;
}
.stat-metric-card.green {
    background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #bbf7d0;
}

.stat-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 10px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.stat-metric-card.purple .stat-icon-wrap { color: #4f0071; }
.stat-metric-card.blue .stat-icon-wrap { color: #0284c7; }
.stat-metric-card.amber .stat-icon-wrap { color: #d97706; }
.stat-metric-card.green .stat-icon-wrap { color: #16a34a; }

.stat-number {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
    display: block;
}

.stat-metric-card.purple .stat-number { color: #4f0071; }
.stat-metric-card.blue .stat-number { color: #0284c7; }
.stat-metric-card.amber .stat-number { color: #b45309; }
.stat-metric-card.green .stat-number { color: #15803d; }

.stat-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.2px;
    margin: 0;
    line-height: 1.3;
}

/* ── Timeline Styles ── */
.timeline-modern {
    position: relative;
    padding-left: 0;
}

.timeline-modern-item {
    position: relative;
    display: flex;
    gap: 20px;
    margin-bottom: 28px;
}

.timeline-modern-item:last-child {
    margin-bottom: 0;
}

.timeline-node-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.timeline-node-badge {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #ffffff;
    background: #4f0071;
    box-shadow: 0 4px 14px rgba(79, 0, 113, 0.25);
    z-index: 2;
    transition: transform 0.2s ease;
}

.timeline-modern-item:hover .timeline-node-badge {
    transform: scale(1.08);
}

.timeline-modern-item.node-blue .timeline-node-badge {
    background: #0284c7;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25);
}

.timeline-modern-item.node-green .timeline-node-badge {
    background: #16a34a;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.25);
}

.timeline-modern-item.node-amber .timeline-node-badge {
    background: #d97706;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.25);
}

.timeline-connector-line {
    width: 2px;
    background: #e2e8f0;
    flex-grow: 1;
    margin: 8px 0;
    min-height: 50px;
}

.timeline-card-content {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 22px 24px;
    flex-grow: 1;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    transition: all 0.25s ease;
}

.timeline-card-content:hover {
    border-color: #cbd5e1;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    transform: translateY(-2px);
}

.timeline-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.timeline-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.01em;
}

.timeline-tag-pill {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 4px 12px;
    border-radius: 20px;
}

.timeline-tag-purple {
    background: #f3e8ff;
    color: #6b21a8;
}
.timeline-tag-blue {
    background: #e0f2fe;
    color: #0369a1;
}
.timeline-tag-green {
    background: #dcfce7;
    color: #15803d;
}
.timeline-tag-amber {
    background: #fef3c7;
    color: #b45309;
}

.timeline-card-desc {
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 12px;
}

.timeline-pill-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.timeline-feature-chip {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ── Impact Highlights Banner ── */
.impact-banner-box {
    background: linear-gradient(135deg, #4f0071 0%, #2e0043 100%);
    border-radius: 16px;
    color: #ffffff;
    padding: 28px 24px;
    margin-top: 36px;
}

.impact-feature-col {
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 767.98px) {
    .timeline-modern-item {
        gap: 12px;
    }
    .timeline-node-badge {
        width: 38px;
        height: 38px;
        font-size: 1rem;
        border-radius: 10px;
    }
    .timeline-card-content {
        padding: 16px;
    }
    .stat-number {
        font-size: 1.6rem;
    }
}