/* _content/TeamTasks.Web/Views/Auth/VerifyEmail.cshtml.rz.scp.css */

/* OTP Input Styling */
.otp-container[b-4bj4mmfikt] {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 24px 0;
}

.otp-input[b-4bj4mmfikt] {
    width: 56px;
    height: 64px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    background: #f7fafc;
    color: #1a202c;
    transition: all 0.3s;
    caret-color: #667eea;
}

    .otp-input:focus[b-4bj4mmfikt] {
        outline: none;
        border-color: #667eea;
        background: white;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
        transform: translateY(-2px);
    }

    .otp-input.filled[b-4bj4mmfikt] {
        border-color: #667eea;
        background: white;
    }

    .otp-input.error[b-4bj4mmfikt] {
        border-color: #dc2626;
        background: #fef2f2;
        animation: shake-b-4bj4mmfikt 0.5s ease-in-out;
    }

    .otp-input.success[b-4bj4mmfikt] {
        border-color: #22c55e;
        background: #f0fdf4;
    }

@keyframes shake-b-4bj4mmfikt {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-8px);
    }

    75% {
        transform: translateX(8px);
    }
}

/* Timer & Resend */
.verification-timer[b-4bj4mmfikt] {
    text-align: center;
    margin: 16px 0;
}

.timer-text[b-4bj4mmfikt] {
    font-size: 14px;
    color: #64748b;
}

.timer-countdown[b-4bj4mmfikt] {
    font-weight: 700;
    color: #667eea;
}

.resend-btn[b-4bj4mmfikt] {
    background: none;
    border: none;
    color: #667eea;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.3s;
}

    .resend-btn:hover:not(:disabled)[b-4bj4mmfikt] {
        background: #eef2ff;
        color: #4f46e5;
    }

    .resend-btn:disabled[b-4bj4mmfikt] {
        color: #94a3b8;
        cursor: not-allowed;
    }

/* Email display */
.email-display[b-4bj4mmfikt] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    color: #475569;
    margin-bottom: 20px;
}

    .email-display i[b-4bj4mmfikt] {
        color: #667eea;
    }

/* Loading state */
.loading-spinner[b-4bj4mmfikt] {
    display: none;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-4bj4mmfikt 0.8s linear infinite;
}

.auth-btn-primary.loading .loading-spinner[b-4bj4mmfikt] {
    display: inline-block;
}

.auth-btn-primary.loading .btn-text[b-4bj4mmfikt] {
    display: none;
}

@keyframes spin-b-4bj4mmfikt {
    to {
        transform: rotate(360deg);
    }
}

/* Success message */
.success-animation[b-4bj4mmfikt] {
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 30px 0;
}

    .success-animation.show[b-4bj4mmfikt] {
        display: flex;
    }

.success-checkmark[b-4bj4mmfikt] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    animation: scaleIn-b-4bj4mmfikt 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

    .success-checkmark i[b-4bj4mmfikt] {
        font-size: 40px;
        color: white;
    }

@keyframes scaleIn-b-4bj4mmfikt {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

.verification-form-container.hidden[b-4bj4mmfikt] {
    display: none;
}
/* _content/TeamTasks.Web/Views/Home/help.cshtml.rz.scp.css */
/* _content/TeamTasks.Web/Views/Home/Index.cshtml.rz.scp.css */
/* ========================
   🎨 Home Page Styling (Full)
   ======================== */

/* 1. Global Sections */
.py-section[b-u9dz8pl6xf] {
    padding: 80px 0;
}

.bg-light[b-u9dz8pl6xf] {
    background-color: #F8FAFC !important;
}

/* 2. Hero Section - Enhanced */
.hero-section[b-u9dz8pl6xf] {
    padding: 120px 0 100px;
    position: relative;
    background: linear-gradient(135deg, #F8FAFC 0%, #EEF2FF 100%);
    overflow: hidden;
}

.hero-section .container[b-u9dz8pl6xf] {
    padding: 60px 80px;
}

/* Particles Canvas */
.particles-canvas[b-u9dz8pl6xf] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.text-gradient[b-u9dz8pl6xf] {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #10B981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
    animation: gradientShift-b-u9dz8pl6xf 3s ease infinite;
}

/* ✅ FIX: Stable Typing Text Container - Prevents Layout Shift */
.typing-text[b-u9dz8pl6xf] {
    display: inline-block;
    /* Reserve space for longest text: 'boosts productivity.' or 'simplifies teamwork.' */
    min-height: 1.2em; /* Base line height */
    min-width: 0; /* Allow text truncation if needed */
    vertical-align: top;
    /* Ensure container doesn't collapse */
    position: relative;
}

/* Hero title container - fixed height to prevent shift */
.hero-title[b-u9dz8pl6xf] {
    /* Reserve space for 2 lines max (in case of wrap) */
    min-height: calc(1.2em * 2); /* 2 lines minimum */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

/* Typing text span - fixed height */
#typingText[b-u9dz8pl6xf] {
    display: inline-block;
    min-height: 1.2em;
    vertical-align: top;
    /* Prevent text from wrapping unexpectedly */
    white-space: nowrap;
    /* Fallback: if text is too long, truncate */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes gradientShift-b-u9dz8pl6xf {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Typing Cursor */
.typing-cursor[b-u9dz8pl6xf] {
    display: inline-block;
    width: 3px;
    animation: blink-b-u9dz8pl6xf 1s step-end infinite;
    margin-left: 2px;
}

@keyframes blink-b-u9dz8pl6xf {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Animated Blobs - Enhanced */
.hero-blob[b-u9dz8pl6xf] {
    position: absolute;
    width: 600px;
    height: 600px;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.15) 0%, rgba(124, 58, 237, 0.1) 100%);
    border-radius: 50%;
    filter: blur(120px);
    z-index: 1;
    animation: blob-bounce-b-u9dz8pl6xf 15s infinite alternate ease-in-out;
}

.blob-1[b-u9dz8pl6xf] {
    top: -200px;
    left: -200px;
}

.blob-2[b-u9dz8pl6xf] {
    bottom: -200px;
    right: -200px;
    animation-delay: -7.5s;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(79, 70, 229, 0.1) 100%);
}

@keyframes blob-bounce-b-u9dz8pl6xf {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    100% {
        transform: translate(50px, 70px) scale(1.15) rotate(180deg);
    }
}

/* Badge - Enhanced */
.badge-pill[b-u9dz8pl6xf] {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background: white;
    border: 2px solid #E0E7FF;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #4F46E5;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15);
    animation: badgePulse-b-u9dz8pl6xf 2s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

@keyframes badgePulse-b-u9dz8pl6xf {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(79, 70, 229, 0.25);
    }
}

.pulse-dot[b-u9dz8pl6xf] {
    width: 10px;
    height: 10px;
    background-color: #10B981;
    border-radius: 50%;
    margin-right: 10px;
    position: relative;
    animation: pulse-b-u9dz8pl6xf 2s ease-in-out infinite;
}

.pulse-dot[b-u9dz8pl6xf]::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #10B981;
    top: 0;
    left: 0;
    animation: pulseRing-b-u9dz8pl6xf 2s ease-out infinite;
}

@keyframes pulse-b-u9dz8pl6xf {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

@keyframes pulseRing-b-u9dz8pl6xf {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.badge-sparkle[b-u9dz8pl6xf] {
    font-size: 1.1rem;
    margin-left: 6px;
    animation: sparkle-b-u9dz8pl6xf 1.5s ease-in-out infinite;
}

@keyframes sparkle-b-u9dz8pl6xf {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-10deg) scale(1.2); }
    75% { transform: rotate(10deg) scale(1.2); }
}

/* Trust Badges */
.trust-badges[b-u9dz8pl6xf] {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.trust-item[b-u9dz8pl6xf] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    padding: 12px 20px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid #F1F5F9;
    transition: all 0.3s;
    /* ✅ Fixed width to prevent movement */
    min-width: 180px;
    max-width: 220px;
    width: 200px;
    flex-shrink: 0;
}

.trust-item:hover[b-u9dz8pl6xf] {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.15);
    border-color: #E0E7FF;
}

.trust-icon[b-u9dz8pl6xf] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4F46E5;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.trust-content[b-u9dz8pl6xf] {
    display: flex;
    flex-direction: column;
    min-width: 0; /* Allow text truncation */
    flex: 1;
    overflow: hidden;
}

.trust-number[b-u9dz8pl6xf] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1E293B;
    line-height: 1;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trust-label[b-u9dz8pl6xf] {
    font-size: 0.75rem;
    color: #64748B;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ripple Effect for Buttons */
.btn-ripple[b-u9dz8pl6xf] {
    position: relative;
    overflow: hidden;
}

.ripple-effect[b-u9dz8pl6xf] {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: ripple-b-u9dz8pl6xf 0.6s ease-out;
    pointer-events: none;
}

@keyframes ripple-b-u9dz8pl6xf {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Download App Buttons */
.download-apps-section[b-u9dz8pl6xf] {
    margin-top: 24px;
}

.app-download-btn[b-u9dz8pl6xf] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid #E2E8F0;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.app-download-btn[b-u9dz8pl6xf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(79, 70, 229, 0.08), transparent);
    transition: left 0.5s;
}

.app-download-btn:hover[b-u9dz8pl6xf]::before {
    left: 100%;
}

.app-download-btn:hover[b-u9dz8pl6xf] {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    border-color: #CBD5E1;
}

.app-download-btn i[b-u9dz8pl6xf] {
    font-size: 32px;
    flex-shrink: 0;
    transition: transform 0.3s;
}

.app-download-btn:hover i[b-u9dz8pl6xf] {
    transform: scale(1.1);
}

.app-download-text[b-u9dz8pl6xf] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.app-download-label[b-u9dz8pl6xf] {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    opacity: 0.7;
}

.app-download-name[b-u9dz8pl6xf] {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

/* Android (Google Play) */
.app-download-android[b-u9dz8pl6xf] {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.app-download-android i[b-u9dz8pl6xf] {
    color: #3DDC84;
}

.app-download-android .app-download-label[b-u9dz8pl6xf],
.app-download-android .app-download-name[b-u9dz8pl6xf] {
    color: #1E293B;
}

.app-download-android:hover[b-u9dz8pl6xf] {
    border-color: #3DDC84;
}

/* iOS (App Store) */
.app-download-ios[b-u9dz8pl6xf] {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.app-download-ios i[b-u9dz8pl6xf] {
    color: #000000;
}

.app-download-ios .app-download-label[b-u9dz8pl6xf],
.app-download-ios .app-download-name[b-u9dz8pl6xf] {
    color: #1E293B;
}

.app-download-ios:hover[b-u9dz8pl6xf] {
    border-color: #64748B;
}

/* 3. App Mockup Glassmorphism - Enhanced */
.app-mockup-wrapper[b-u9dz8pl6xf] {
    position: relative;
    padding: 30px;
    perspective: 1000px;
}

.app-mockup-glass[b-u9dz8pl6xf] {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 32px;
    padding: 16px;
    box-shadow: 0 32px 64px -12px rgba(79, 70, 229, 0.2);
    transition: transform 0.3s;
}

.app-mockup-glass:hover[b-u9dz8pl6xf] {
    transform: translateY(-10px);
}

.floating-animation[b-u9dz8pl6xf] {
    animation: float-main-b-u9dz8pl6xf 8s ease-in-out infinite;
}

@keyframes float-main-b-u9dz8pl6xf {
    0%, 100% {
        transform: translateY(0) rotateY(0deg);
    }
    50% {
        transform: translateY(-15px) rotateY(2deg);
    }
}

/* Floating Cards - Multiple */
.floating-card[b-u9dz8pl6xf] {
    position: absolute;
    background: white;
    padding: 14px 20px;
    border-radius: 18px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    z-index: 10;
    border: 2px solid #F1F5F9;
    transition: all 0.3s;
    /* ✅ Fixed width to prevent movement */
    min-width: 200px;
    max-width: 240px;
    width: 220px;
    box-sizing: border-box;
}

.floating-card:hover[b-u9dz8pl6xf] {
    transform: translateY(-5px) !important;
    box-shadow: 0 30px 50px rgba(0,0,0,0.15);
}

.floating-card .icon-box[b-u9dz8pl6xf] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.floating-card:hover .icon-box[b-u9dz8pl6xf] {
    transform: scale(1.1) rotate(5deg);
}

.floating-card .fw-bold[b-u9dz8pl6xf] {
    color: #1E293B;
    /* ✅ Text truncation for title */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

.floating-card .x-small[b-u9dz8pl6xf] {
    font-size: 0.75rem;
    /* ✅ Text truncation for subtitle */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

/* ✅ Ensure text container doesn't expand */
.floating-card > div[b-u9dz8pl6xf] {
    min-width: 0;
    overflow: hidden;
}

.floating-card > div > div:last-child[b-u9dz8pl6xf] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.card-1[b-u9dz8pl6xf] {
    bottom: 60px;
    left: -30px;
    animation: float-card-1-b-u9dz8pl6xf 6s ease-in-out infinite;
}

.card-2[b-u9dz8pl6xf] {
    top: 80px;
    right: -40px;
    animation: float-card-2-b-u9dz8pl6xf 7s ease-in-out infinite;
}

.card-3[b-u9dz8pl6xf] {
    bottom: 180px;
    right: -50px;
    animation: float-card-3-b-u9dz8pl6xf 8s ease-in-out infinite;
}

.card-4[b-u9dz8pl6xf] {
    top: 200px;
    left: -40px;
    animation: float-card-4-b-u9dz8pl6xf 7.5s ease-in-out infinite;
}

@keyframes float-card-1-b-u9dz8pl6xf {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(2deg); }
}

@keyframes float-card-2-b-u9dz8pl6xf {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(-3deg); }
}

@keyframes float-card-3-b-u9dz8pl6xf {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(3deg); }
}

@keyframes float-card-4-b-u9dz8pl6xf {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-18px) rotate(-2deg); }
}

/* 4. Features & Cards - Enhanced */
.feature-card[b-u9dz8pl6xf] {
    background: white;
    padding: 40px 32px;
    border-radius: 24px;
    border: 1px solid #F1F5F9;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    height: 100%;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
}

.feature-card.animate-in[b-u9dz8pl6xf] {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.6s ease-out;
}

.feature-card[b-u9dz8pl6xf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(79, 70, 229, 0.05), transparent);
    transition: left 0.5s;
}

.feature-card:hover[b-u9dz8pl6xf]::before {
    left: 100%;
}

.feature-card:hover[b-u9dz8pl6xf] {
    transform: translateY(-12px) scale(1.02);
    border-color: #C7D2FE;
    box-shadow: 0 24px 48px rgba(79, 70, 229, 0.12);
}

.feature-icon[b-u9dz8pl6xf] {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 24px auto;
    transition: all 0.3s;
    position: relative;
}

.feature-card:hover .feature-icon[b-u9dz8pl6xf] {
    transform: scale(1.1) rotate(5deg);
}

.feature-card h3[b-u9dz8pl6xf] {
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 14px;
    color: #0F172A;
    letter-spacing: -0.3px;
}

.feature-card p[b-u9dz8pl6xf] {
    line-height: 1.7;
    color: #64748B;
}

/* 5. Testimonials - Enhanced & Dynamic */
.testimonials-container[b-u9dz8pl6xf] {
    position: relative;
}

.testimonial-item[b-u9dz8pl6xf] {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.testimonial-item.animate-in[b-u9dz8pl6xf] {
    opacity: 1;
    transform: translateY(0);
}

.testimonial-card[b-u9dz8pl6xf] {
    background: white;
    padding: 36px;
    border-radius: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    border: 1px solid #F1F5F9;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
}

.testimonial-card:hover[b-u9dz8pl6xf] {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.1);
    border-color: #E0E7FF;
}

.testimonial-quote-icon[b-u9dz8pl6xf] {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #4F46E5;
    opacity: 0.6;
    transition: all 0.3s;
}

.testimonial-card:hover .testimonial-quote-icon[b-u9dz8pl6xf] {
    opacity: 1;
    transform: scale(1.1);
}

.avatar-circle[b-u9dz8pl6xf] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s;
    flex-shrink: 0;
}

.testimonial-card:hover .avatar-circle[b-u9dz8pl6xf] {
    transform: scale(1.1) rotate(5deg);
}

.testimonial-date[b-u9dz8pl6xf] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #F1F5F9;
    opacity: 0.7;
}

.testimonial-date i[b-u9dz8pl6xf] {
    font-size: 0.75rem;
    margin-right: 4px;
}

/* Additional Avatar Colors */
.bg-purple[b-u9dz8pl6xf] {
    background: linear-gradient(135deg, #9333EA 0%, #7C3AED 100%) !important;
}

.bg-teal[b-u9dz8pl6xf] {
    background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%) !important;
}

.bg-pink[b-u9dz8pl6xf] {
    background: linear-gradient(135deg, #EC4899 0%, #DB2777 100%) !important;
}

.bg-indigo[b-u9dz8pl6xf] {
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%) !important;
}

.bg-orange[b-u9dz8pl6xf] {
    background: linear-gradient(135deg, #F97316 0%, #EA580C 100%) !important;
}

.bg-cyan[b-u9dz8pl6xf] {
    background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%) !important;
}

.bg-rose[b-u9dz8pl6xf] {
    background: linear-gradient(135deg, #F43F5E 0%, #E11D48 100%) !important;
}

/* 6. Statistics Section - Enhanced */
.stats-section[b-u9dz8pl6xf] {
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
}

.stat-item[b-u9dz8pl6xf] {
    padding: 32px 24px;
    border-radius: 20px;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: all 0.3s;
    opacity: 0;
    transform: translateY(20px);
}

.stat-item.animate-in[b-u9dz8pl6xf] {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.6s ease-out;
}

.stat-item:hover[b-u9dz8pl6xf] {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.stat-icon-wrapper[b-u9dz8pl6xf] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 28px;
    transition: transform 0.3s;
}

.stat-item:hover .stat-icon-wrapper[b-u9dz8pl6xf] {
    transform: scale(1.1) rotate(5deg);
}

.stat-number[b-u9dz8pl6xf] {
    font-size: 3.5rem;
    font-weight: 900;
    letter-spacing: -2px;
    transition: all 0.3s;
}

/* 7. FAQ & CTA - Enhanced */
.max-w-800[b-u9dz8pl6xf] {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item[b-u9dz8pl6xf] {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.4s ease-out;
}

.faq-item.animate-in[b-u9dz8pl6xf] {
    opacity: 1;
    transform: translateX(0);
}

.accordion-button:not(.collapsed)[b-u9dz8pl6xf] {
    background-color: #F8FAFC;
    color: var(--primary);
    box-shadow: none;
}

.accordion-button[b-u9dz8pl6xf] {
    font-size: 1.1rem;
    padding: 1.5rem 1.25rem;
    border: none;
    transition: all 0.3s;
}

.accordion-button i[b-u9dz8pl6xf] {
    font-size: 1.2rem;
}

.accordion-button:not(.collapsed) i[b-u9dz8pl6xf] {
    color: var(--primary);
}

.accordion-button:hover[b-u9dz8pl6xf] {
    background-color: #F8FAFC;
    color: var(--primary);
}

.accordion-button:focus[b-u9dz8pl6xf] {
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
    border-color: transparent;
}

.accordion-body[b-u9dz8pl6xf] {
    padding-left: 3.5rem;
    line-height: 1.7;
}

.cta-box[b-u9dz8pl6xf] {
    background: linear-gradient(135deg, var(--primary) 0%, #6366F1 50%, #4338CA 100%);
    border-radius: 32px;
    padding: 80px 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 32px 64px -12px rgba(79, 70, 229, 0.4);
}

.cta-pattern[b-u9dz8pl6xf] {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    opacity: 0.5;
    animation: patternMove-b-u9dz8pl6xf 20s ease-in-out infinite;
}

@keyframes patternMove-b-u9dz8pl6xf {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, 20px) scale(1.1); }
}

.cta-content[b-u9dz8pl6xf] {
    position: relative;
    z-index: 1;
}

.cta-icon-wrapper[b-u9dz8pl6xf] {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 36px;
    animation: float-icon-b-u9dz8pl6xf 3s ease-in-out infinite;
}

@keyframes float-icon-b-u9dz8pl6xf {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

.cta-box h2[b-u9dz8pl6xf] {
    font-size: 2.5rem;
    letter-spacing: -1px;
}

.cta-box .btn[b-u9dz8pl6xf] {
    padding: 16px 40px;
    font-size: 1.1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* 7. Utility & Animations */
.btn-hover-lift[b-u9dz8pl6xf] {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .btn-hover-lift:hover[b-u9dz8pl6xf] {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(79, 70, 229, 0.25) !important;
    }

.grayscale-logos i[b-u9dz8pl6xf] {
    transition: all 0.3s;
    cursor: pointer;
    color: #94A3B8;
}

    .grayscale-logos i:hover[b-u9dz8pl6xf] {
        color: #1E293B;
        transform: scale(1.1);
    }

.fade-up[b-u9dz8pl6xf] {
    animation: fadeUp-b-u9dz8pl6xf 1s ease-out forwards;
    opacity: 0;
    transform: translateY(30px);
}

.fade-in-right[b-u9dz8pl6xf] {
    animation: fadeInRight-b-u9dz8pl6xf 1s ease-out forwards;
    opacity: 0;
    transform: translateX(30px);
    animation-delay: 0.2s;
}

@keyframes fadeUp-b-u9dz8pl6xf {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight-b-u9dz8pl6xf {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 8. Responsive Design */
@media (max-width: 768px) {
    .hero-section[b-u9dz8pl6xf] {
        padding: 60px 0 40px;
    }

    .hero-section .container[b-u9dz8pl6xf] {
        padding: 40px 20px;
    }

    .particles-canvas[b-u9dz8pl6xf] {
        display: none; /* Hide particles on mobile */
    }

    .trust-badges[b-u9dz8pl6xf] {
        justify-content: center;
        gap: 12px;
    }

    .trust-item[b-u9dz8pl6xf] {
        padding: 10px 16px;
    }

    .trust-icon[b-u9dz8pl6xf] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .trust-number[b-u9dz8pl6xf] {
        font-size: 1.1rem;
    }

    .app-download-btn[b-u9dz8pl6xf] {
        padding: 10px 18px;
        gap: 10px;
    }

    .app-download-btn i[b-u9dz8pl6xf] {
        font-size: 28px;
    }

    .app-download-name[b-u9dz8pl6xf] {
        font-size: 14px;
    }

    .floating-card.card-2[b-u9dz8pl6xf],
    .floating-card.card-4[b-u9dz8pl6xf] {
        display: none; /* Hide some floating cards on tablet */
    }

    .floating-card.card-3[b-u9dz8pl6xf] {
        bottom: 100px;
        right: -30px;
    }

    .py-section[b-u9dz8pl6xf] {
        padding: 60px 0;
    }

    .feature-card[b-u9dz8pl6xf] {
        margin-bottom: 24px;
    }

    .stat-item[b-u9dz8pl6xf] {
        margin-bottom: 24px;
    }

    .cta-box[b-u9dz8pl6xf] {
        padding: 60px 20px;
    }

    .cta-box h2[b-u9dz8pl6xf] {
        font-size: 2rem;
    }

    .cta-icon-wrapper[b-u9dz8pl6xf] {
        width: 64px;
        height: 64px;
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .hero-section[b-u9dz8pl6xf] {
        padding: 40px 0 30px;
    }

    .hero-section .container[b-u9dz8pl6xf] {
        padding: 40px 20px;
    }

    .hero-title[b-u9dz8pl6xf] {
        font-size: 2rem;
        /* ✅ Maintain min-height on mobile - reserve space for 2 lines */
        min-height: calc(1.2em * 2);
    }
    
    /* ✅ Responsive typing text - allow wrapping on mobile but maintain height */
    .typing-text[b-u9dz8pl6xf] {
        min-width: 0; /* Allow flexibility on mobile */
        min-height: calc(1.2em * 2); /* Reserve 2 lines for wrapping */
    }
    
    #typingText[b-u9dz8pl6xf] {
        /* On mobile, allow wrapping if needed but maintain container height */
        white-space: normal;
        word-break: break-word;
        min-height: calc(1.2em * 2); /* Reserve 2 lines */
        max-width: 100%;
    }

    .badge-pill[b-u9dz8pl6xf] {
        font-size: 0.8rem;
        padding: 8px 16px;
    }

    .trust-badges[b-u9dz8pl6xf] {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .trust-item[b-u9dz8pl6xf] {
        width: 100%;
        justify-content: center;
    }

    .app-download-btn[b-u9dz8pl6xf] {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
    }

    .floating-card.card-1[b-u9dz8pl6xf],
    .floating-card.card-3[b-u9dz8pl6xf] {
        display: none; /* Hide all floating cards on mobile */
    }

    .app-mockup-wrapper[b-u9dz8pl6xf] {
        padding: 20px;
    }

    .py-section[b-u9dz8pl6xf] {
        padding: 40px 0;
    }

    .feature-card[b-u9dz8pl6xf] {
        padding: 32px 24px;
    }

    .testimonial-card[b-u9dz8pl6xf] {
        padding: 28px;
    }

    .stat-number[b-u9dz8pl6xf] {
        font-size: 2.5rem;
    }

    .cta-box h2[b-u9dz8pl6xf] {
        font-size: 1.75rem;
    }

    .hero-description[b-u9dz8pl6xf] {
        font-size: 1rem;
    }
}
/* _content/TeamTasks.Web/Views/Home/privacy.cshtml.rz.scp.css */
/* _content/TeamTasks.Web/Views/Home/terms.cshtml.rz.scp.css */
/* _content/TeamTasks.Web/Views/Onboarding/Welcome.cshtml.rz.scp.css */
/* ============================================
   ✨ TeamTasks Premium Onboarding Design
   🎨 Ultra-Modern & Creative Layout
   ⚠️ هذا الملف مخصص فقط لصفحة Welcome/Onboarding
   ⚠️ This file is scoped to Welcome/Onboarding page only
   ⚠️ No conflicts with other CSS files
   ============================================ */

/* استيراد الخط - يتم تحميله من HTML مباشرة لتجنب مشاكل @import */

/* ============================================
   🔥 إجبار الوضع النهاري - Force Light Mode
   ============================================ */

/* تثبيت الخلفية والألوان بغض النظر عن إعدادات المتصفح */
html[b-nb8nsdjfup],
body[b-nb8nsdjfup] {
    background-color: #F4F7FE !important;
    color: #2B3674 !important;
    margin: 0;
    overflow-x: hidden !important;
}

/* إلغاء Dark Mode من المتصفح */
@media (prefers-color-scheme: dark) {
    html[b-nb8nsdjfup],
    body[b-nb8nsdjfup] {
        background-color: #F4F7FE !important;
        color: #2B3674 !important;
    }
}

:root[b-nb8nsdjfup] {
    /* الألوان الأساسية - متطابقة تماماً مع المشروع */
    --onb-primary: #4318FF;
    --onb-primary-hover: #3311CC;
    --onb-primary-gradient: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    --onb-secondary-gradient: linear-gradient(135deg, #10B981 0%, #059669 100%);
    --onb-success-gradient: linear-gradient(135deg, #10B981 0%, #059669 100%);
    --onb-bg-app: #F4F7FE;
    --onb-bg-light: #F8FAFC;
    --onb-white: #ffffff;
    --onb-text-primary: #2B3674;
    --onb-text-secondary: #707EAE;
    --onb-text-muted: #A3AED0;
    
    /* الظلال */
    --onb-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.05);
    --onb-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
    --onb-shadow-md: 0 10px 40px rgba(0, 0, 0, 0.12);
    --onb-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);
    --onb-shadow-glow: 0 0 40px rgba(79, 70, 229, 0.4);
    
    /* الانتقالات */
    --onb-transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --onb-transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --onb-transition-bounce: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* الأحجام */
    --onb-radius-sm: 12px;
    --onb-radius-md: 16px;
    --onb-radius-lg: 24px;
    --onb-radius-xl: 32px;
}

/* Backward compatibility - keep old variable names */
.onboarding-container[b-nb8nsdjfup] {
    --primary: var(--onb-primary);
    --primary-hover: var(--onb-primary-hover);
    --primary-gradient: var(--onb-primary-gradient);
    --secondary-gradient: var(--onb-secondary-gradient);
    --success-gradient: var(--onb-success-gradient);
    --bg-app: var(--onb-bg-app);
    --bg-light: var(--onb-bg-light);
    --white: var(--onb-white);
    --text-primary: var(--onb-text-primary);
    --text-secondary: var(--onb-text-secondary);
    --text-muted: var(--onb-text-muted);
    --shadow-xs: var(--onb-shadow-xs);
    --shadow-sm: var(--onb-shadow-sm);
    --shadow-md: var(--onb-shadow-md);
    --shadow-lg: var(--onb-shadow-lg);
    --shadow-glow: var(--onb-shadow-glow);
    --transition-fast: var(--onb-transition-fast);
    --transition-smooth: var(--onb-transition-smooth);
    --transition-bounce: var(--onb-transition-bounce);
    --radius-sm: var(--onb-radius-sm);
    --radius-md: var(--onb-radius-md);
    --radius-lg: var(--onb-radius-lg);
    --radius-xl: var(--onb-radius-xl);
}

/* إعادة تعيين عامة - محدود لهذه الصفحة فقط */
.onboarding-container *[b-nb8nsdjfup] {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ============================================
   الحاوية الرئيسية
   ============================================ */

.onboarding-container[b-nb8nsdjfup] {
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 20px;
    font-family: 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #F4F7FE !important;
    color: #2B3674 !important;
    overflow: hidden;
}

/* ============================================
   الخلفية المتحركة الاحترافية
   ============================================ */

.animated-background[b-nb8nsdjfup] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    background: linear-gradient(135deg, #F8FAFC 0%, #EEF2FF 100%);
}

.gradient-orb[b-nb8nsdjfup] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    animation: float-b-nb8nsdjfup 20s ease-in-out infinite;
    transition: transform 0.3s ease-out;
}

.orb-1[b-nb8nsdjfup] {
    width: 500px;
    height: 500px;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.15), rgba(124, 58, 237, 0.1));
    top: -10%;
    right: -10%;
    animation-delay: 0s;
}

.orb-2[b-nb8nsdjfup] {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.1));
    bottom: -5%;
    left: -5%;
    animation-delay: 5s;
}

.orb-3[b-nb8nsdjfup] {
    width: 350px;
    height: 350px;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(16, 185, 129, 0.08));
    top: 40%;
    left: 50%;
    animation-delay: 10s;
}

@keyframes float-b-nb8nsdjfup {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(50px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-50px, 50px) scale(0.9);
    }
}

.grid-overlay[b-nb8nsdjfup] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(79, 70, 229, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(79, 70, 229, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.5;
    pointer-events: none;
}

/* ============================================
   المحتوى الرئيسي
   ============================================ */

.content-wrapper[b-nb8nsdjfup] {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* ============================================
   القسم الأيسر
   ============================================ */

.left-section[b-nb8nsdjfup] {
    padding: 40px;
}

/* الشعار والعلامة التجارية */
.brand-section[b-nb8nsdjfup] {
    margin-bottom: 48px;
}

.logo-container[b-nb8nsdjfup] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.logo-icon[b-nb8nsdjfup] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(79, 70, 229, 0.3);
    animation: pulse-glow-b-nb8nsdjfup 3s ease-in-out infinite;
}

@keyframes pulse-glow-b-nb8nsdjfup {
    0%, 100% {
        box-shadow: 0 0 20px rgba(79, 70, 229, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(79, 70, 229, 0.5);
    }
}

.logo-icon svg[b-nb8nsdjfup] {
    width: 28px;
    height: 28px;
    color: white;
}

.brand-name[b-nb8nsdjfup] {
    font-size: 32px;
    font-weight: 900;
    color: #2B3674 !important;
    letter-spacing: -0.5px;
}

.brand-name span[b-nb8nsdjfup] {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Fallback للضمان */
    color: #4318FF !important;
}

.tagline[b-nb8nsdjfup] {
    font-size: 14px;
    color: #707EAE !important;
    font-weight: 500;
    margin-right: 64px;
}

/* المحتوى البطولي */
.hero-content[b-nb8nsdjfup] {
    margin-bottom: 48px;
}

.main-heading[b-nb8nsdjfup] {
    font-size: 56px;
    font-weight: 900;
    line-height: 1.5;
    color: #2B3674 !important;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.highlight-text[b-nb8nsdjfup] {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    display: inline-block;
    /* Fallback للضمان */
    color: #4318FF !important;
}

.highlight-text[b-nb8nsdjfup]::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    opacity: 0.3;
    border-radius: 2px;
}

.main-description[b-nb8nsdjfup] {
    font-size: 18px;
    line-height: 1.7;
    color: #707EAE !important;
    max-width: 500px;
}

/* ============================================
   شبكة الخيارات
   ============================================ */

.options-grid[b-nb8nsdjfup] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 32px;
}

.option-input[b-nb8nsdjfup] {
    display: none;
}

.option-box[b-nb8nsdjfup] {
    position: relative;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px);
    border: 2px solid rgba(163, 174, 208, 0.2);
    border-radius: var(--radius-lg);
    padding: 24px;
    cursor: pointer;
    transition: all var(--transition-smooth);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.option-box[b-nb8nsdjfup]::before {
    content: '';
    position: absolute;
    top: var(--mouse-y, 50%);
    left: var(--mouse-x, 50%);
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s, height 0.5s;
    pointer-events: none;
}

.option-box:hover[b-nb8nsdjfup]::before {
    width: 300px;
    height: 300px;
}

.option-box:hover[b-nb8nsdjfup] {
    transform: translateY(-4px);
    border-color: #4318FF;
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(79, 70, 229, 0.15);
}

.option-input:checked + .option-box[b-nb8nsdjfup] {
    border-color: #4318FF;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.05) 0%, rgba(124, 58, 237, 0.03) 100%) !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1), 0 10px 30px rgba(79, 70, 229, 0.15);
}

/* العلامة الشعبية */
.popular-tag[b-nb8nsdjfup] {
    position: absolute;
    top: -12px;
    right: 24px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white !important;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    z-index: 2;
    animation: bounce-b-nb8nsdjfup 2s ease-in-out infinite;
}

@keyframes bounce-b-nb8nsdjfup {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* رأس الخيار */
.option-header[b-nb8nsdjfup] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.option-icon[b-nb8nsdjfup] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--transition-smooth);
}

.option-box:hover .option-icon[b-nb8nsdjfup] {
    transform: scale(1.1) rotate(5deg);
}

.option-icon svg[b-nb8nsdjfup] {
    width: 28px;
    height: 28px;
    color: white;
}

.option-icon.personal[b-nb8nsdjfup] {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
}

.option-icon.team[b-nb8nsdjfup] {
    background: linear-gradient(135deg, #EC4899 0%, #F43F5E 100%);
}

.option-icon.enterprise[b-nb8nsdjfup] {
    background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%);
}

.option-title-group[b-nb8nsdjfup] {
    flex: 1;
}

.option-title[b-nb8nsdjfup] {
    font-size: 20px;
    font-weight: 700;
    color: #2B3674 !important;
    margin-bottom: 4px;
}

.option-subtitle[b-nb8nsdjfup] {
    font-size: 13px;
    color: #707EAE !important;
    font-weight: 500;
}

/* قائمة الميزات */
.option-features[b-nb8nsdjfup] {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.option-features li[b-nb8nsdjfup] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #707EAE !important;
    font-weight: 500;
}

.check-icon[b-nb8nsdjfup] {
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white !important;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* شارة الخيار */
.option-badge[b-nb8nsdjfup] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(79, 70, 229, 0.1);
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 12px;
    color: #4318FF !important;
    font-weight: 600;
}

.badge-icon[b-nb8nsdjfup] {
    font-size: 14px;
}

/* علامة الاختيار */
.selection-checkmark[b-nb8nsdjfup] {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 32px;
    height: 32px;
    background: rgba(163, 174, 208, 0.1);
    border: 2px solid rgba(163, 174, 208, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-smooth);
}

.selection-checkmark svg[b-nb8nsdjfup] {
    width: 18px;
    height: 18px;
    color: #ffffff !important;
    fill: currentColor;
    opacity: 0;
    transform: scale(0);
    transition: all var(--transition-smooth);
}

.option-input:checked + .option-box .selection-checkmark[b-nb8nsdjfup] {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    border-color: #4318FF;
    box-shadow: 0 0 20px rgba(79, 70, 229, 0.4);
}

.option-input:checked + .option-box .selection-checkmark svg[b-nb8nsdjfup] {
    opacity: 1;
    transform: scale(1);
}

/* ============================================
   الأزرار
   ============================================ */

.action-buttons[b-nb8nsdjfup] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-primary[b-nb8nsdjfup] {
    position: relative;
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    color: #ffffff !important;
    border: none;
    padding: 18px 36px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all var(--transition-smooth);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.3);
}

.btn-primary[b-nb8nsdjfup]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.btn-primary:hover[b-nb8nsdjfup]::before {
    left: 100%;
}

.btn-primary:hover[b-nb8nsdjfup] {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(79, 70, 229, 0.4);
}

.btn-primary:active[b-nb8nsdjfup] {
    transform: translateY(0);
}

.btn-text[b-nb8nsdjfup] {
    position: relative;
    z-index: 1;
    color: #ffffff !important;
}

.btn-arrow[b-nb8nsdjfup] {
    font-size: 20px;
    transition: transform var(--transition-smooth);
    color: #ffffff !important;
}

/* تأكيد لون النص الأبيض داخل الزر الرئيسي */
.btn-primary[b-nb8nsdjfup],
.btn-primary span[b-nb8nsdjfup],
.btn-primary .btn-text[b-nb8nsdjfup],
.btn-primary .btn-arrow[b-nb8nsdjfup] {
    color: #ffffff !important;
}

.btn-primary:hover .btn-arrow[b-nb8nsdjfup] {
    transform: translateX(-4px);
}

.btn-secondary[b-nb8nsdjfup] {
    background: transparent;
    color: #707EAE !important;
    border: 2px solid rgba(163, 174, 208, 0.2);
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-smooth);
}

.btn-secondary:hover[b-nb8nsdjfup] {
    border-color: rgba(163, 174, 208, 0.4);
    color: #2B3674 !important;
    background: rgba(163, 174, 208, 0.05);
}

.spinner[b-nb8nsdjfup] {
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-nb8nsdjfup 0.6s linear infinite;
}

@keyframes spin-b-nb8nsdjfup {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   القسم الأيمن - المعاينة
   ============================================ */

.right-section[b-nb8nsdjfup] {
    position: relative;
    padding: 40px;
}

.preview-card[b-nb8nsdjfup] {
    position: relative;
    background: #ffffff !important;
    backdrop-filter: blur(30px);
    border: 1px solid rgba(163, 174, 208, 0.2);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: 0 20px 60px rgba(43, 54, 116, 0.1);
    transition: all var(--transition-smooth);
}

.preview-glow[b-nb8nsdjfup] {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.15) 0%, transparent 70%);
    pointer-events: none;
    animation: rotate-b-nb8nsdjfup 15s linear infinite;
}

@keyframes rotate-b-nb8nsdjfup {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.preview-header[b-nb8nsdjfup] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(163, 174, 208, 0.2);
}

.preview-dots[b-nb8nsdjfup] {
    display: flex;
    gap: 6px;
}

.preview-dots span[b-nb8nsdjfup] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.preview-dots span:nth-child(1)[b-nb8nsdjfup] {
    background: #ef4444 !important;
}

.preview-dots span:nth-child(2)[b-nb8nsdjfup] {
    background: #f59e0b !important;
}

.preview-dots span:nth-child(3)[b-nb8nsdjfup] {
    background: #10b981 !important;
}

.preview-title[b-nb8nsdjfup] {
    font-size: 14px;
    font-weight: 600;
    color: #2B3674 !important;
}

.preview-content[b-nb8nsdjfup] {
    min-height: 400px;
}

.preview-placeholder[b-nb8nsdjfup] {
    text-align: center;
    padding: 60px 20px;
    color: #A3AED0 !important;
}

.preview-placeholder svg[b-nb8nsdjfup] {
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
    opacity: 0.3;
    stroke: #A3AED0 !important;
}

.preview-placeholder p[b-nb8nsdjfup] {
    font-size: 16px;
    font-weight: 600;
    color: #707EAE !important;
}

/* ============================================
   الإحصائيات العائمة
   ============================================ */

.floating-stats[b-nb8nsdjfup] {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 16px;
    width: 100%;
    max-width: 600px;
}

.stat-item[b-nb8nsdjfup] {
    flex: 1;
    background: #ffffff !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(163, 174, 208, 0.2);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(43, 54, 116, 0.08);
}

.stat-icon[b-nb8nsdjfup] {
    font-size: 28px;
}

.stat-data[b-nb8nsdjfup] {
    display: flex;
    flex-direction: column;
}

.stat-number[b-nb8nsdjfup] {
    font-size: 20px;
    font-weight: 800;
    color: #2B3674 !important;
}

.stat-label[b-nb8nsdjfup] {
    font-size: 11px;
    color: #707EAE !important;
    font-weight: 600;
}

/* ============================================
   شريط الثقة
   ============================================ */

.trust-bar[b-nb8nsdjfup] {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: 60px;
    padding: 20px;
    background: #ffffff !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(163, 174, 208, 0.2);
    border-radius: 50px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 12px rgba(43, 54, 116, 0.08);
}

.trust-text[b-nb8nsdjfup] {
    font-size: 14px;
    color: #707EAE !important;
    font-weight: 500;
}

.trust-number[b-nb8nsdjfup] {
    font-size: 18px;
    font-weight: 800;
    color: #4318FF !important;
    margin: 0 6px;
}

/* ============================================
   استجابة الشاشات
   ============================================ */

@media (max-width: 1200px) {
    .content-wrapper[b-nb8nsdjfup] {
        gap: 60px;
    }
    
    .main-heading[b-nb8nsdjfup] {
        font-size: 48px;
    }
}

@media (max-width: 992px) {
    .content-wrapper[b-nb8nsdjfup] {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .right-section[b-nb8nsdjfup] {
        order: -1;
    }
    
    .floating-stats[b-nb8nsdjfup] {
        position: relative;
        bottom: 0;
        transform: none;
        margin-top: 20px;
    }
    
    .main-heading[b-nb8nsdjfup] {
        font-size: 42px;
    }
}

@media (max-width: 768px) {
    .left-section[b-nb8nsdjfup],
    .right-section[b-nb8nsdjfup] {
        padding: 20px;
    }
    
    .main-heading[b-nb8nsdjfup] {
        font-size: 36px;
    }
    
    .main-description[b-nb8nsdjfup] {
        font-size: 16px;
    }
    
    .options-grid[b-nb8nsdjfup] {
        gap: 12px;
    }
    
    .option-box[b-nb8nsdjfup] {
        padding: 20px;
    }
    
    .option-features[b-nb8nsdjfup] {
        grid-template-columns: 1fr;
    }
    
    .floating-stats[b-nb8nsdjfup] {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .onboarding-container[b-nb8nsdjfup] {
        padding: 20px 10px;
    }
    
    .main-heading[b-nb8nsdjfup] {
        font-size: 28px;
    }
    
    .brand-name[b-nb8nsdjfup] {
        font-size: 24px;
    }
    
    .option-title[b-nb8nsdjfup] {
        font-size: 18px;
    }
    
    .action-buttons[b-nb8nsdjfup] {
        gap: 10px;
    }
    
    .btn-primary[b-nb8nsdjfup],
    .btn-secondary[b-nb8nsdjfup] {
        padding: 14px 24px;
        font-size: 14px;
    }
    
    .trust-bar[b-nb8nsdjfup] {
        margin-top: 40px;
    }
}

/* ============================================
   تحسينات الأداء
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *[b-nb8nsdjfup],
    *[b-nb8nsdjfup]::before,
    *[b-nb8nsdjfup]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   🔥 تثبيت إضافي للألوان - Critical CSS Fix
   ============================================ */

/* 🚨 ULTRA HIGH PRIORITY - Override ALL global styles */

/* تأكيد مطلق أن body لا يغير الألوان */
html body .onboarding-container[b-nb8nsdjfup],
body .onboarding-container[b-nb8nsdjfup],
.onboarding-container[b-nb8nsdjfup] {
    background: #F4F7FE !important;
    color: #2B3674 !important;
}

/* تثبيت جميع عناصر النص بقوة */
html body .onboarding-container *[b-nb8nsdjfup],
body .onboarding-container *[b-nb8nsdjfup],
.onboarding-container *[b-nb8nsdjfup] {
    color: inherit !important;
}

/* تثبيت الخلفيات البيضاء */
html body .onboarding-container .option-box[b-nb8nsdjfup],
html body .onboarding-container .preview-card[b-nb8nsdjfup],
html body .onboarding-container .stat-item[b-nb8nsdjfup],
html body .onboarding-container .trust-bar[b-nb8nsdjfup],
body .onboarding-container .option-box[b-nb8nsdjfup],
body .onboarding-container .preview-card[b-nb8nsdjfup],
body .onboarding-container .stat-item[b-nb8nsdjfup],
body .onboarding-container .trust-bar[b-nb8nsdjfup],
.onboarding-container .option-box[b-nb8nsdjfup],
.onboarding-container .preview-card[b-nb8nsdjfup],
.onboarding-container .stat-item[b-nb8nsdjfup],
.onboarding-container .trust-bar[b-nb8nsdjfup] {
    background-color: rgba(255, 255, 255, 0.95) !important;
}

/* 🔥 تأكيد ألوان النصوص الرئيسية - MAXIMUM SPECIFICITY */
html body .onboarding-container .brand-name[b-nb8nsdjfup],
html body .onboarding-container .main-heading[b-nb8nsdjfup],
html body .onboarding-container .option-title[b-nb8nsdjfup],
html body .onboarding-container .stat-number[b-nb8nsdjfup],
html body .onboarding-container .preview-title[b-nb8nsdjfup],
html body .onboarding-container h1[b-nb8nsdjfup],
html body .onboarding-container h2[b-nb8nsdjfup],
html body .onboarding-container h3[b-nb8nsdjfup],
body .onboarding-container .brand-name[b-nb8nsdjfup],
body .onboarding-container .main-heading[b-nb8nsdjfup],
body .onboarding-container .option-title[b-nb8nsdjfup],
body .onboarding-container .stat-number[b-nb8nsdjfup],
body .onboarding-container .preview-title[b-nb8nsdjfup],
body .onboarding-container h1[b-nb8nsdjfup],
body .onboarding-container h2[b-nb8nsdjfup],
body .onboarding-container h3[b-nb8nsdjfup],
.onboarding-container .brand-name[b-nb8nsdjfup],
.onboarding-container .main-heading[b-nb8nsdjfup],
.onboarding-container .option-title[b-nb8nsdjfup],
.onboarding-container .stat-number[b-nb8nsdjfup],
.onboarding-container .preview-title[b-nb8nsdjfup],
.onboarding-container h1[b-nb8nsdjfup],
.onboarding-container h2[b-nb8nsdjfup],
.onboarding-container h3[b-nb8nsdjfup] {
    color: #2B3674 !important;
}

/* 🔥 تأكيد ألوان النصوص الثانوية - MAXIMUM SPECIFICITY */
html body .onboarding-container .tagline[b-nb8nsdjfup],
html body .onboarding-container .main-description[b-nb8nsdjfup],
html body .onboarding-container .option-subtitle[b-nb8nsdjfup],
html body .onboarding-container .option-features li[b-nb8nsdjfup],
html body .onboarding-container .stat-label[b-nb8nsdjfup],
html body .onboarding-container .trust-text[b-nb8nsdjfup],
html body .onboarding-container .preview-placeholder p[b-nb8nsdjfup],
html body .onboarding-container p[b-nb8nsdjfup],
html body .onboarding-container span:not(.badge-icon):not(.check-icon)[b-nb8nsdjfup],
body .onboarding-container .tagline[b-nb8nsdjfup],
body .onboarding-container .main-description[b-nb8nsdjfup],
body .onboarding-container .option-subtitle[b-nb8nsdjfup],
body .onboarding-container .option-features li[b-nb8nsdjfup],
body .onboarding-container .stat-label[b-nb8nsdjfup],
body .onboarding-container .trust-text[b-nb8nsdjfup],
body .onboarding-container .preview-placeholder p[b-nb8nsdjfup],
body .onboarding-container p[b-nb8nsdjfup],
body .onboarding-container span:not(.badge-icon):not(.check-icon)[b-nb8nsdjfup],
.onboarding-container .tagline[b-nb8nsdjfup],
.onboarding-container .main-description[b-nb8nsdjfup],
.onboarding-container .option-subtitle[b-nb8nsdjfup],
.onboarding-container .option-features li[b-nb8nsdjfup],
.onboarding-container .stat-label[b-nb8nsdjfup],
.onboarding-container .trust-text[b-nb8nsdjfup],
.onboarding-container .preview-placeholder p[b-nb8nsdjfup],
.onboarding-container p[b-nb8nsdjfup],
.onboarding-container span:not(.badge-icon):not(.check-icon)[b-nb8nsdjfup] {
    color: #707EAE !important;
}

/* 🔥 تأكيد الأرقام والعناصر البارزة */
html body .onboarding-container .trust-number[b-nb8nsdjfup],
html body .onboarding-container .brand-name span[b-nb8nsdjfup],
html body .onboarding-container .highlight-text[b-nb8nsdjfup],
body .onboarding-container .trust-number[b-nb8nsdjfup],
body .onboarding-container .brand-name span[b-nb8nsdjfup],
body .onboarding-container .highlight-text[b-nb8nsdjfup],
.onboarding-container .trust-number[b-nb8nsdjfup],
.onboarding-container .brand-name span[b-nb8nsdjfup],
.onboarding-container .highlight-text[b-nb8nsdjfup] {
    color: #4318FF !important;
}

/* 🔥 تأكيد وضوح الأزرار */
    html body .onboarding-container .btn-primary[b-nb8nsdjfup],
    body .onboarding-container .btn-primary[b-nb8nsdjfup],
    .onboarding-container .btn-primary[b-nb8nsdjfup] {
        color: #707EAE !important;
        background: transparent !important;
    }

html body .onboarding-container .btn-secondary[b-nb8nsdjfup],
body .onboarding-container .btn-secondary[b-nb8nsdjfup],
.onboarding-container .btn-secondary[b-nb8nsdjfup] {
    color: #707EAE !important;
    background: transparent !important;
}

/* 🔥 تأكيد وضوح الشارات */
html body .onboarding-container .popular-tag[b-nb8nsdjfup],
body .onboarding-container .popular-tag[b-nb8nsdjfup],
.onboarding-container .popular-tag[b-nb8nsdjfup] {
    color: #ffffff !important;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
}

html body .onboarding-container .option-badge[b-nb8nsdjfup],
body .onboarding-container .option-badge[b-nb8nsdjfup],
.onboarding-container .option-badge[b-nb8nsdjfup] {
    color: #4318FF !important;
    background: rgba(79, 70, 229, 0.1) !important;
}

html body .onboarding-container .option-badge span[b-nb8nsdjfup],
body .onboarding-container .option-badge span[b-nb8nsdjfup],
.onboarding-container .option-badge span[b-nb8nsdjfup] {
    color: #4318FF !important;
}

/* 🔥 تأكيد وضوح الأيقونات */
html body .onboarding-container .check-icon[b-nb8nsdjfup],
body .onboarding-container .check-icon[b-nb8nsdjfup],
.onboarding-container .check-icon[b-nb8nsdjfup] {
    color: #ffffff !important;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
}

/* حل مشكلة النصوص غير المرئية على الخلفية */
html body .onboarding-container .option-box *[b-nb8nsdjfup],
body .onboarding-container .option-box *[b-nb8nsdjfup],
.onboarding-container .option-box *[b-nb8nsdjfup] {
    text-shadow: none !important;
}

/* 🔥 إلغاء أي تأثيرات من site.css */
html body .onboarding-container[b-nb8nsdjfup],
html body .onboarding-container *:not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(polygon)[b-nb8nsdjfup],
body .onboarding-container[b-nb8nsdjfup],
body .onboarding-container *:not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(polygon)[b-nb8nsdjfup] {
    font-family: 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* إزالة أي تأثيرات dark mode */
@media (prefers-color-scheme: dark) {
    html body .onboarding-container[b-nb8nsdjfup],
    body .onboarding-container[b-nb8nsdjfup],
    .onboarding-container[b-nb8nsdjfup] {
        background: #F4F7FE !important;
        color: #2B3674 !important;
    }
    
    html body .onboarding-container .option-box[b-nb8nsdjfup],
    html body .onboarding-container .preview-card[b-nb8nsdjfup],
    html body .onboarding-container .stat-item[b-nb8nsdjfup],
    html body .onboarding-container .trust-bar[b-nb8nsdjfup],
    body .onboarding-container .option-box[b-nb8nsdjfup],
    body .onboarding-container .preview-card[b-nb8nsdjfup],
    body .onboarding-container .stat-item[b-nb8nsdjfup],
    body .onboarding-container .trust-bar[b-nb8nsdjfup],
    .onboarding-container .option-box[b-nb8nsdjfup],
    .onboarding-container .preview-card[b-nb8nsdjfup],
    .onboarding-container .stat-item[b-nb8nsdjfup],
    .onboarding-container .trust-bar[b-nb8nsdjfup] {
        background-color: rgba(255, 255, 255, 0.95) !important;
    }
}
/* _content/TeamTasks.Web/Views/Profile/Index.cshtml.rz.scp.css */
/* ============================================
   ✨ TeamTasks Professional Profile Page
   🎨 Modern & Premium Design
   🔥 FINAL FIX - توحيد شكل جميع الـ Inputs
   ============================================ */

/* ============================================
   🚨🚨🚨 ULTRA CRITICAL - إزالة المربع الحاد نهائياً
   هذا القسم يجب أن يكون في البداية بأعلى أولوية
   ============================================ */

/* 
   المشكلة: Bootstrap + jQuery Validation يضيفون:
   - .form-control (من ASP.NET Tag Helpers)  
   - .input-validation-error (من jQuery Validation)
   - .valid / .invalid (من Bootstrap Validation)
   
   الحل: نستهدف كل هذه الكلاسات بأعلى specificity ممكن
*/

/* 🔥 NUCLEAR OPTION - Override Everything */
html body .profile-container .profile-input-box input[b-5witvvw3lq],
html body .profile-container .profile-input-box input.form-control[b-5witvvw3lq],
html body .profile-container .profile-input-box input.profile-input[b-5witvvw3lq],
html body .profile-container .profile-input-box input.valid[b-5witvvw3lq],
html body .profile-container .profile-input-box input.invalid[b-5witvvw3lq],
html body .profile-container .profile-input-box input.input-validation-error[b-5witvvw3lq],
html body .profile-container .profile-input-box input[type="text"][b-5witvvw3lq],
html body .profile-container .profile-input-box input[type="email"][b-5witvvw3lq],
html body .profile-container .profile-input-box input[type="password"][b-5witvvw3lq],
body .profile-input-box input[b-5witvvw3lq],
body .profile-input-box input.form-control[b-5witvvw3lq],
.profile-input-box input[b-5witvvw3lq],
.profile-input-box input.form-control[b-5witvvw3lq],
.profile-input-box .form-control[b-5witvvw3lq],
.profile-form-group input[b-5witvvw3lq],
.profile-form-group input.form-control[b-5witvvw3lq],
.profile-form-section input[b-5witvvw3lq],
.profile-form-section input.form-control[b-5witvvw3lq] {
    /* 🔥 إزالة كل الحدود */
    border: none !important;
    border: 0 !important;
    border: 0px !important;
    border: 0px solid transparent !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    
    /* 🔥 إزالة الخلفية */
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    
    /* 🔥 إزالة الظلال والـ outline */
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    outline: none !important;
    outline-width: 0 !important;
    
    /* 🔥 إزالة أي تأثيرات validation */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* 🔥 Focus State - لا حدود أبداً */
html body .profile-input-box input:focus[b-5witvvw3lq],
html body .profile-input-box input.form-control:focus[b-5witvvw3lq],
.profile-input-box input:focus[b-5witvvw3lq],
.profile-input-box input.form-control:focus[b-5witvvw3lq] {
    border: none !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* 🔥 Validation States - لا حدود أبداً */
html body .profile-input-box input.input-validation-error[b-5witvvw3lq],
html body .profile-input-box input.valid[b-5witvvw3lq],
html body .profile-input-box input.invalid[b-5witvvw3lq],
html body .profile-input-box input:valid[b-5witvvw3lq],
html body .profile-input-box input:invalid[b-5witvvw3lq],
.profile-input-box input.input-validation-error[b-5witvvw3lq],
.profile-input-box input.valid[b-5witvvw3lq],
.profile-input-box input.invalid[b-5witvvw3lq] {
    border: none !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}


/* ============================================
   الحاوية الرئيسية
   ============================================ */
.profile-container[b-5witvvw3lq] {
    min-height: calc(100vh - 80px);
    padding: 40px 20px;
    background: linear-gradient(135deg, #F4F7FE 0%, #EEF2FF 100%);
    position: relative;
}

.profile-container[b-5witvvw3lq]::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.profile-wrapper[b-5witvvw3lq] {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ============================================
   رأس الصفحة
   ============================================ */
.profile-page-header[b-5witvvw3lq] {
    margin-bottom: 32px;
    animation: fadeInDown-b-5witvvw3lq 0.6s ease-out;
}

@keyframes fadeInDown-b-5witvvw3lq {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.profile-page-title[b-5witvvw3lq] {
    font-size: 32px;
    font-weight: 800;
    color: #2B3674;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-page-title i[b-5witvvw3lq] {
    font-size: 28px;
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.profile-page-subtitle[b-5witvvw3lq] {
    font-size: 16px;
    color: #707EAE;
    font-weight: 500;
}

/* ============================================
   البطاقة الرئيسية
   ============================================ */
.profile-main-card[b-5witvvw3lq] {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(43, 54, 116, 0.08);
    overflow: hidden;
    animation: fadeInUp-b-5witvvw3lq 0.6s ease-out;
}

@keyframes fadeInUp-b-5witvvw3lq {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   قسم الأفاتار والمعلومات الرئيسية
   ============================================ */
.profile-hero-section[b-5witvvw3lq] {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.profile-hero-section[b-5witvvw3lq]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.profile-hero-section[b-5witvvw3lq]::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.profile-hero-content[b-5witvvw3lq] {
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    z-index: 1;
}

.profile-avatar-container[b-5witvvw3lq] {
    position: relative;
    flex-shrink: 0;
}

.profile-avatar[b-5witvvw3lq] {
    width: 100px;
    height: 100px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 800;
    color: #ffffff;
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.profile-avatar-img[b-5witvvw3lq] {
    width: 100px;
    height: 100px;
    border-radius: 24px;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.profile-avatar:hover[b-5witvvw3lq],
.profile-avatar-img:hover[b-5witvvw3lq] {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}

.profile-avatar-edit-btn[b-5witvvw3lq] {
    position: absolute;
    bottom: -8px;
    right: -8px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    border: none;
    color: #4F46E5;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    z-index: 2;
}

.profile-avatar-edit-btn:hover[b-5witvvw3lq] {
    background: #4F46E5;
    color: #ffffff;
    transform: scale(1.1);
}

.profile-user-info[b-5witvvw3lq] {
    flex: 1;
}

.profile-user-name[b-5witvvw3lq] {
    font-size: 28px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 6px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.profile-user-email[b-5witvvw3lq] {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-user-email i[b-5witvvw3lq] {
    font-size: 14px;
}

.profile-user-badge[b-5witvvw3lq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 50px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
}

.profile-user-badge i[b-5witvvw3lq] {
    color: #10B981;
}

/* ============================================
   قسم النماذج
   ============================================ */
.profile-form-section[b-5witvvw3lq] {
    padding: 40px;
}

.profile-section-header[b-5witvvw3lq] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #F4F7FE;
}

.profile-section-icon[b-5witvvw3lq] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.profile-section-icon.info[b-5witvvw3lq] {
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
    color: #4F46E5;
}

.profile-section-icon.security[b-5witvvw3lq] {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    color: #D97706;
}

.profile-section-icon.danger[b-5witvvw3lq] {
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
    color: #DC2626;
}

.profile-section-title[b-5witvvw3lq] {
    font-size: 18px;
    font-weight: 700;
    color: #2B3674;
    margin: 0;
}

.profile-section-subtitle[b-5witvvw3lq] {
    font-size: 13px;
    color: #707EAE;
    margin: 0;
}

/* ============================================
   🎨 حقول النموذج - UNIFIED DESIGN
   جميع الـ Inputs بنفس الشكل المنحني
   ============================================ */
.profile-form-grid[b-5witvvw3lq] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.profile-form-group[b-5witvvw3lq] {
    position: relative;
}

.profile-form-group.full-width[b-5witvvw3lq] {
    grid-column: span 2;
}

.profile-form-label[b-5witvvw3lq] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #2B3674;
    margin-bottom: 10px;
    letter-spacing: 0.3px;
}

/* ============================================
   🎨 MAIN INPUT CONTAINER - Curved Box
   المربع الخارجي الوحيد المنحني
   ============================================ */
.profile-input-box[b-5witvvw3lq] {
    /* Layout */
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    height: 56px;
    
    /* 🎨 Background - واحد فقط */
    background: #F8FAFC;
    
    /* 🎨 Border - واحد فقط منحني */
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    
    /* Effects */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

/* Hover */
.profile-input-box:hover[b-5witvvw3lq] {
    border-color: #CBD5E1;
    background: #FFFFFF;
}

/* Focus State - على الحاوية فقط */
.profile-input-box:focus-within[b-5witvvw3lq] {
    border-color: #4318FF;
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(67, 24, 255, 0.1);
}

/* ============================================
   🎨 ICON - الأيقونة
   ============================================ */
.profile-input-box .input-icon[b-5witvvw3lq] {
    font-size: 18px;
    color: #A3AED0;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.profile-input-box:focus-within .input-icon[b-5witvvw3lq] {
    color: #4318FF;
    transform: scale(1.1);
}

/* ============================================
   🎨 INPUT FIELD - الحقل الداخلي
   MUST BE COMPLETELY INVISIBLE (no borders!)
   ============================================ */
.profile-input-box input[b-5witvvw3lq],
.profile-input-box input.form-control[b-5witvvw3lq],
.profile-input-box input.profile-input[b-5witvvw3lq] {
    /* Layout */
    flex: 1 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    
    /* Reset Everything */
    all: unset !important;
    
    /* Re-apply needed styles after unset */
    flex: 1 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    
    /* Typography */
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #2B3674 !important;
    font-family: inherit !important;
    line-height: normal !important;
    
    /* Text */
    direction: ltr !important;
    text-align: left !important;
    cursor: text !important;
    
    /* CRITICAL: No visual decoration */
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}



/* Placeholder */
.profile-input-box input[b-5witvvw3lq]::placeholder {
    color: #A3AED0;
    font-weight: 400;
    opacity: 1;
}

.profile-input-box input:focus[b-5witvvw3lq]::placeholder {
    color: #CBD5E1;
}

/* Autofill */
.profile-input-box input:-webkit-autofill[b-5witvvw3lq],
.profile-input-box input:-webkit-autofill:hover[b-5witvvw3lq],
.profile-input-box input:-webkit-autofill:focus[b-5witvvw3lq] {
    -webkit-text-fill-color: #2B3674 !important;
    -webkit-box-shadow: 0 0 0 1000px #F8FAFC inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* ============================================
   🎨 SPECIAL STATES
   ============================================ */

/* Read-only / Disabled - لون مختلف ليظهر أنه غير قابل للتعديل */
.profile-input-box.readonly-box[b-5witvvw3lq],
.profile-input-box:has(input:read-only)[b-5witvvw3lq],
.profile-input-box:has(input:disabled)[b-5witvvw3lq] {
    background: #F1F5F9 !important;
    border-color: #E2E8F0 !important;
    cursor: not-allowed !important;
}

.profile-input-box.readonly-box input[b-5witvvw3lq],
.profile-input-box input:read-only[b-5witvvw3lq],
.profile-input-box input:disabled[b-5witvvw3lq] {
    cursor: not-allowed !important;
    color: #64748B !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

.profile-input-box.readonly-box .input-icon[b-5witvvw3lq],
.profile-input-box:has(input:read-only) .input-icon[b-5witvvw3lq],
.profile-input-box:has(input:disabled) .input-icon[b-5witvvw3lq] {
    color: #94A3B8 !important;
}

/* Error State */
.profile-form-group.has-error .profile-input-box[b-5witvvw3lq] {
    border-color: #EF4444;
    background: #FEF2F2;
}

.profile-form-group.has-error .profile-input-box:focus-within[b-5witvvw3lq] {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
}

.profile-form-group.has-error .input-icon[b-5witvvw3lq] {
    color: #EF4444;
}

/* Success State */
.profile-form-group.has-success .profile-input-box[b-5witvvw3lq] {
    border-color: #10B981;
    background: #ECFDF5;
}

.profile-form-group.has-success .profile-input-box:focus-within[b-5witvvw3lq] {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

.profile-form-group.has-success .input-icon[b-5witvvw3lq] {
    color: #10B981;
}

/* Validation Message */
.profile-form-group .text-danger[b-5witvvw3lq] {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #EF4444;
}

/* ============================================
   قسم تغيير كلمة المرور
   ============================================ */
.profile-password-section[b-5witvvw3lq] {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 2px solid #F4F7FE;
}

/* ============================================
   الأزرار
   ============================================ */
.profile-actions[b-5witvvw3lq] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid #F4F7FE;
}

.profile-btn[b-5witvvw3lq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-family: inherit;
}

.profile-btn-primary[b-5witvvw3lq] {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3);
}

.profile-btn-primary:hover[b-5witvvw3lq] {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(79, 70, 229, 0.4);
}

.profile-btn-primary:active[b-5witvvw3lq] {
    transform: translateY(0);
}

.profile-btn-secondary[b-5witvvw3lq] {
    background: #F4F7FE;
    color: #707EAE;
    border: 2px solid #E9ECF4;
}

.profile-btn-secondary:hover[b-5witvvw3lq] {
    background: #E9ECF4;
    color: #2B3674;
}

/* ============================================
   منطقة الخطر
   ============================================ */
.profile-danger-section[b-5witvvw3lq] {
    margin-top: 32px;
    padding: 24px;
    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
    border-radius: 16px;
    border: 2px solid #FECACA;
}

.profile-danger-header[b-5witvvw3lq] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.profile-danger-icon[b-5witvvw3lq] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.profile-danger-title[b-5witvvw3lq] {
    font-size: 18px;
    font-weight: 700;
    color: #DC2626;
    margin: 0;
}

.profile-danger-description[b-5witvvw3lq] {
    font-size: 14px;
    color: #7F1D1D;
    margin-bottom: 16px;
    line-height: 1.6;
}

.profile-btn-danger[b-5witvvw3lq] {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.profile-btn-danger:hover[b-5witvvw3lq] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.4);
}

/* ============================================
   رسائل النجاح والخطأ
   ============================================ */
.profile-alert[b-5witvvw3lq] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    animation: slideInDown-b-5witvvw3lq 0.4s ease-out;
}

@keyframes slideInDown-b-5witvvw3lq {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.profile-alert-success[b-5witvvw3lq] {
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    border: 2px solid #6EE7B7;
    color: #065F46;
}

.profile-alert-success i[b-5witvvw3lq] {
    color: #10B981;
    font-size: 20px;
}

.profile-alert-error[b-5witvvw3lq] {
    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
    border: 2px solid #FECACA;
    color: #991B1B;
}

.profile-alert-error i[b-5witvvw3lq] {
    color: #DC2626;
    font-size: 20px;
}

/* ============================================
   Global Upload Loader
   ============================================ */
.global-upload-loader[b-5witvvw3lq] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-box[b-5witvvw3lq] {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    padding: 32px 48px;
    border-radius: 20px;
    text-align: center;
    color: #ffffff;
    box-shadow: 0 20px 60px rgba(79, 70, 229, 0.4);
}

.loader-box .spinner-border[b-5witvvw3lq] {
    width: 48px;
    height: 48px;
    border-width: 4px;
}

.loader-text[b-5witvvw3lq] {
    font-size: 16px;
    font-weight: 600;
    margin-top: 16px;
}

/* ============================================
   Modal تأكيد حذف الحساب
   ============================================ */
.delete-account-modal-content[b-5witvvw3lq] {
    border-radius: 24px;
    overflow: hidden;
    border: none;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2);
}

.delete-account-modal-header[b-5witvvw3lq] {
    border: none;
    padding: 20px 24px 0 24px;
    position: relative;
}

.delete-account-modal-header .btn-close[b-5witvvw3lq] {
    position: absolute;
    top: 20px;
    right: 24px;
    z-index: 10;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.delete-account-modal-header .btn-close:hover[b-5witvvw3lq] {
    opacity: 1;
}

.delete-account-modal-body[b-5witvvw3lq] {
    padding: 0 32px 24px 32px;
    text-align: center;
}

.delete-account-icon-wrapper[b-5witvvw3lq] {
    margin-bottom: 24px;
}

.delete-account-icon[b-5witvvw3lq] {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(220, 38, 38, 0.2);
    animation: pulse-b-5witvvw3lq 2s ease-in-out infinite;
}

@keyframes pulse-b-5witvvw3lq {
    0%, 100% {
        box-shadow: 0 10px 30px rgba(220, 38, 38, 0.2);
    }
    50% {
        box-shadow: 0 10px 40px rgba(220, 38, 38, 0.35);
    }
}

.delete-account-icon i[b-5witvvw3lq] {
    font-size: 40px;
    color: #DC2626;
}

.delete-account-title[b-5witvvw3lq] {
    color: #111827;
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 12px;
    line-height: 1.3;
}

.delete-account-question[b-5witvvw3lq] {
    font-size: 16px;
    color: #4B5563;
    margin-bottom: 8px;
    line-height: 1.5;
}

.delete-account-warning[b-5witvvw3lq] {
    font-size: 15px;
    color: #DC2626;
    margin-bottom: 24px;
    line-height: 1.5;
}

.delete-account-warning strong[b-5witvvw3lq] {
    font-weight: 700;
}

.delete-account-info-box[b-5witvvw3lq] {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border-left: 4px solid #3B82F6;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 12px;
    text-align: right;
}

.delete-info-item[b-5witvvw3lq] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.6;
}

.delete-info-item i[b-5witvvw3lq] {
    color: #3B82F6;
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

.delete-info-item span[b-5witvvw3lq] {
    color: #1E40AF;
    font-size: 14px;
    flex: 1;
}

.delete-account-modal-footer[b-5witvvw3lq] {
    border: none;
    padding: 20px 32px 32px 32px;
    background: #F9FAFB;
}

.delete-account-actions[b-5witvvw3lq] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    width: 100%;
}

.btn-cancel[b-5witvvw3lq] {
    padding: 12px 28px;
    border: 2px solid #E5E7EB;
    background: #ffffff;
    color: #6B7280;
    font-weight: 600;
    font-size: 15px;
    border-radius: 12px;
    transition: all 0.3s;
    min-width: 120px;
}

.btn-cancel:hover[b-5witvvw3lq] {
    background: #F9FAFB;
    border-color: #D1D5DB;
    color: #374151;
    transform: translateY(-1px);
}

.btn-delete-confirm[b-5witvvw3lq] {
    padding: 12px 28px;
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
    border: none;
    color: #ffffff;
    font-weight: 600;
    font-size: 15px;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.35);
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
    justify-content: center;
}

.btn-delete-confirm:hover[b-5witvvw3lq] {
    background: linear-gradient(135deg, #B91C1C 0%, #991B1B 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.45);
}

.btn-delete-confirm i[b-5witvvw3lq] {
    font-size: 18px;
}

.btn-delete-confirm span[b-5witvvw3lq] {
    white-space: nowrap;
}

/* ============================================
   استجابة الشاشات
   ============================================ */
@media (max-width: 768px) {
    .profile-container[b-5witvvw3lq] {
        padding: 20px 16px;
    }

    .profile-hero-section[b-5witvvw3lq] {
        padding: 32px 24px;
    }

    .profile-hero-content[b-5witvvw3lq] {
        flex-direction: column;
        text-align: center;
    }

    .profile-user-email[b-5witvvw3lq] {
        justify-content: center;
    }

    .profile-user-badge[b-5witvvw3lq] {
        margin: 12px auto 0;
    }

    .profile-form-section[b-5witvvw3lq] {
        padding: 24px;
    }

    .profile-form-grid[b-5witvvw3lq] {
        grid-template-columns: 1fr;
    }

    .profile-form-group.full-width[b-5witvvw3lq] {
        grid-column: span 1;
    }

    .profile-actions[b-5witvvw3lq] {
        flex-direction: column;
    }

    .profile-btn[b-5witvvw3lq] {
        width: 100%;
    }

    .profile-page-title[b-5witvvw3lq] {
        font-size: 24px;
    }

    .delete-account-actions[b-5witvvw3lq] {
        flex-direction: column;
    }

    .btn-cancel[b-5witvvw3lq],
    .btn-delete-confirm[b-5witvvw3lq] {
        width: 100%;
        min-width: unset;
    }
}

@media (max-width: 480px) {
    .profile-avatar[b-5witvvw3lq],
    .profile-avatar-img[b-5witvvw3lq] {
        width: 80px;
        height: 80px;
        border-radius: 20px;
    }

    .profile-avatar[b-5witvvw3lq] {
        font-size: 32px;
    }

    .profile-avatar-edit-btn[b-5witvvw3lq] {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .profile-user-name[b-5witvvw3lq] {
        font-size: 22px;
    }

    .profile-input-box[b-5witvvw3lq] {
        padding: 0 14px;
        height: 52px;
    }

    .profile-input-box input[b-5witvvw3lq] {
        font-size: 14px;
    }

    .profile-input-box .input-icon[b-5witvvw3lq] {
        font-size: 16px;
    }
}
/* _content/TeamTasks.Web/Views/Shared/_Layout.cshtml.rz.scp.css */


/* =========================================
   🎨 GLOBAL THEME
   ========================================= */
:root[b-f8sequopma] {
    --primary: #4F46E5;
    --primary-hover: #4338CA;
    --text-main: #1E293B;
    --text-muted: #64748B;
    --border-color: #E2E8F0;
    --bg-light: #F8FAFC;
    --nav-height: 72px;
}

body[b-f8sequopma] {
    font-family: 'Inter', sans-serif;
    color: var(--text-main);
    background-color: var(--bg-light);
}

body[b-f8sequopma] {
    padding-top: var(--nav-height);
}

h1[b-f8sequopma], h2[b-f8sequopma], h3[b-f8sequopma], h4[b-f8sequopma], h5[b-f8sequopma], h6[b-f8sequopma], .brand-name[b-f8sequopma] {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* =========================================
   🚀 NAVBAR STYLES
   ========================================= */
.navbar-floating[b-f8sequopma] {
    position: sticky;
    top: 0;
    z-index: 1100; /* أعلى من أي بانر */
    background: transparent;
}

.navbar-glass[b-f8sequopma] {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    transition: all 0.3s ease;
    padding: 12px 0;
}

.brand-icon[b-f8sequopma] {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--primary), #818CF8);
    color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 10px rgba(94, 92, 230, 0.2);
}

.brand-name[b-f8sequopma] {
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--text-main);
    letter-spacing: -0.5px;
}



/* =========================
   🦁 LOGO CONTROLS (FIXED)
   ========================= */

/* 1. إعدادات الصورة العامة */
.brand-logo[b-f8sequopma] {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}


/* 2. حجم اللوجو في الهيدر (Navbar) */
header .brand-logo-wrapper[b-f8sequopma] {
    width: 40px; /* حجم ثابت وصغير للهيدر */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* 3. حجم اللوجو في الفوتر (Footer) */
footer .brand-logo-wrapper[b-f8sequopma] {
    width: 50px; /* أكبر قليلاً في الفوتر ليكون واضحاً */
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* 🔥 New Icon-Only Navigation Styles 🔥 */
.nav-icons-only .nav-link[b-f8sequopma] {
    width: 40px; /* حجم الأيقونة المربعة */
    height: 40px;
    border-radius: 10px; /* زوايا ناعمة */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted) !important;
    font-size: 1.25rem; /* حجم الرمز */
    transition: all 0.2s ease;
    background-color: transparent;
}

    .nav-icons-only .nav-link:hover[b-f8sequopma] {
        background-color: #F1F5F9;
        color: var(--primary) !important;
        transform: translateY(-1px);
    }

    .nav-icons-only .nav-link.active[b-f8sequopma] {
        background-color: rgba(79, 70, 229, 0.1);
        color: var(--primary) !important;
    }

/* =========================================
   🔔 ICONS & AVATAR
   ========================================= */
.btn-icon[b-f8sequopma] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted) !important;
    transition: background 0.2s;
}

    .btn-icon:hover[b-f8sequopma] {
        background-color: #F1F5F9;
        color: var(--primary) !important;
    }

.badge-dot[b-f8sequopma] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 8px;
    height: 8px;
    background-color: #EF4444;
    border-radius: 50%;
    border: 2px solid white;
}

/* Avatar Logic */
.avatar-container[b-f8sequopma] {
    position: relative;
    cursor: pointer;
    transition: transform 0.2s;
}

    .avatar-container:hover[b-f8sequopma] {
        transform: scale(1.05);
    }

.avatar-img[b-f8sequopma] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
    box-shadow: 0 0 0 1px var(--border-color);
}

.avatar-initials[b-f8sequopma] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #6366F1);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    border: 2px solid white;
    box-shadow: 0 0 0 1px var(--border-color);
}

.status-indicator[b-f8sequopma] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background-color: #10B981;
    border: 2px solid white;
    border-radius: 50%;
}

/* =========================================
   ⬇️ DROPDOWN STYLING
   ========================================= */
.profile-menu-width[b-f8sequopma] {
    min-width: 260px;
}

.bg-subtle[b-f8sequopma] {
    background-color: #F8FAFC;
}

.dropdown-item[b-f8sequopma] {
    font-weight: 500;
    font-size: 0.95rem;
    padding: 10px 16px;
    color: var(--text-main);
    transition: all 0.2s;
}

    .dropdown-item:hover[b-f8sequopma] {
        background-color: #F1F5F9;
        color: var(--primary);
    }

.logout-item[b-f8sequopma] {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none;
    width: 100%;
    color: #DC2626 !important;
    font-weight: 600;
}

    .logout-item:hover[b-f8sequopma] {
        background-color: #FEF2F2 !important;
        color: #B91C1C !important;
    }

/* =========================================
   🦶 FOOTER
   ========================================= */
.footer[b-f8sequopma] {
    background-color: white;
}

.hover-primary:hover[b-f8sequopma] {
    color: var(--primary) !important;
}


/* =========================================
   ✅ UNIFIED NAV ICON STYLE (FINAL FIX)
   ========================================= */

.nav-icon .nav-link[b-f8sequopma] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted) !important;
    background-color: transparent;
    transition: all 0.2s ease;
}

    /* Hover – نفس التأثير للجميع */
    .nav-icon .nav-link:hover[b-f8sequopma] {
        background-color: #F1F5F9;
        color: var(--primary) !important;
        transform: translateY(-1px);
    }

    /* Active (لو حبيت تستخدمه لاحقًا) */
    .nav-icon .nav-link.active[b-f8sequopma] {
        background-color: rgba(79, 70, 229, 0.1);
        color: var(--primary) !important;
    }

/* الجرس + البادچ من غير ما يكسر الشكل */
.nav-icon .badge-dot[b-f8sequopma] {
    top: 8px;
    right: 8px;
}


.navbar-glass[b-f8sequopma] {
    min-height: var(--nav-height);
}

/* =========================================
   📱 MOBILE RESPONSIVE FIXES
   ========================================= */

/* Mobile Navbar */
@media (max-width: 991px) {
    .navbar-collapse[b-f8sequopma] {
        background: white;
        border-radius: 16px;
        margin-top: 12px;
        padding: 16px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }

    .navbar-nav[b-f8sequopma] {
        gap: 8px !important;
    }

    .navbar-nav .nav-item[b-f8sequopma] {
        width: 100%;
    }

    .navbar-nav .btn[b-f8sequopma] {
        width: 100%;
        justify-content: center;
    }

    .navbar-nav .btn-link[b-f8sequopma] {
        text-align: center;
    }
}

/* Mobile Footer */
@media (max-width: 576px) {
    .footer .row[b-f8sequopma] {
        text-align: center;
    }

    .footer .d-flex.gap-3[b-f8sequopma] {
        justify-content: center;
    }

    .footer .border-top.d-flex[b-f8sequopma] {
        flex-direction: column;
        gap: 12px !important;
        text-align: center;
    }

    .footer .d-flex.gap-3:last-child[b-f8sequopma] {
        justify-content: center;
    }
}

/* Very small screens */
@media (max-width: 400px) {
    .brand-name[b-f8sequopma] {
        font-size: 1.1rem !important;
    }
    
    .navbar-glass[b-f8sequopma] {
        padding: 8px 0;
    }
}
/* _content/TeamTasks.Web/Views/TeamMembers/Index.cshtml.rz.scp.css */
/* =========================================
   👥 TEAM MEMBERS PAGE - PROFESSIONAL STYLE
   ========================================= */

.members-wrapper[b-vl4bl0c3hx] {
    max-width: 1400px;
    margin: 28px auto 40px;
    padding: 0 24px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #1E293B;
}

/* =========================================
   🎨 PROFESSIONAL HERO HEADER
   ========================================= */

.members-hero[b-vl4bl0c3hx] {
    position: relative;
    border-radius: 22px;
    padding: 28px 28px 24px;
    background: linear-gradient(135deg, #F8FAFF 0%, #FFFFFF 45%, #F5F3FF 100%);
    border: 1px solid #E2E8F0;
    box-shadow: 0 20px 50px -32px rgba(15, 23, 42, 0.3),
                0 8px 16px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    margin-bottom: 28px;
}

.members-hero-bg[b-vl4bl0c3hx] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 15%, rgba(99, 102, 241, 0.12), transparent 35%),
        radial-gradient(circle at 85% 20%, rgba(14, 165, 233, 0.12), transparent 40%),
        radial-gradient(circle at 20% 85%, rgba(124, 58, 237, 0.08), transparent 35%);
    pointer-events: none;
}

.members-header[b-vl4bl0c3hx] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 20px;
}

.members-title-wrap[b-vl4bl0c3hx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.members-badge[b-vl4bl0c3hx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #4338CA;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.page-title[b-vl4bl0c3hx] {
    font-size: 30px;
    font-weight: 800;
    color: #0F172A;
    margin: 0;
    letter-spacing: -0.4px;
}

.sub-text[b-vl4bl0c3hx] {
    font-size: 14px;
    color: #64748B;
    margin: 0;
}

/* Header Actions */
.header-actions[b-vl4bl0c3hx] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Stats Row */
.members-stats[b-vl4bl0c3hx] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.member-stat-card[b-vl4bl0c3hx] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    box-shadow: 0 10px 26px -20px rgba(15, 23, 42, 0.25);
}

.stat-icon[b-vl4bl0c3hx] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
}

.stat-icon.stat-total[b-vl4bl0c3hx] {
    color: #6366F1;
    background: #EEF2FF;
}

.stat-icon.stat-online[b-vl4bl0c3hx] {
    color: #10B981;
    background: #ECFDF5;
}

.stat-content[b-vl4bl0c3hx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-label[b-vl4bl0c3hx] {
    font-size: 12px;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.stat-value[b-vl4bl0c3hx] {
    font-size: 18px;
    font-weight: 800;
    color: #0F172A;
}

/* Invite Button */
.btn-invite[b-vl4bl0c3hx] {
    background: linear-gradient(135deg, #667EEA 0%, #4318FF 100%);
    color: white;
    border: none;
    padding: 11px 22px;
    border-radius: 13px;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(67, 24, 255, 0.4),
                0 2px 8px rgba(67, 24, 255, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-invite .btn-icon[b-vl4bl0c3hx] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.btn-invite .btn-text[b-vl4bl0c3hx] {
    font-weight: 700;
    letter-spacing: 0.3px;
}

.btn-invite:hover[b-vl4bl0c3hx] {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(67, 24, 255, 0.5),
                0 4px 12px rgba(67, 24, 255, 0.25);
}

.btn-invite:active[b-vl4bl0c3hx] {
    transform: translateY(-1px);
}

/* Delete Board Button */
.btn-delete-board[b-vl4bl0c3hx] {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    color: white;
    border: none;
    padding: 11px 22px;
    border-radius: 13px;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4),
                0 2px 8px rgba(239, 68, 68, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-delete-board .btn-icon[b-vl4bl0c3hx] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.btn-delete-board .btn-text[b-vl4bl0c3hx] {
    font-weight: 700;
    letter-spacing: 0.3px;
}

.btn-delete-board:hover[b-vl4bl0c3hx] {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(239, 68, 68, 0.5),
                0 4px 12px rgba(239, 68, 68, 0.25);
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
}

.btn-delete-board:active[b-vl4bl0c3hx] {
    transform: translateY(-1px);
}

/* --- Table Card --- */
.members-card[b-vl4bl0c3hx] {
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 16px 40px -30px rgba(15, 23, 42, 0.3),
                0 4px 12px rgba(15, 23, 42, 0.05);
    border: 1px solid #E2E8F0;
    overflow: hidden;
}

.table-responsive[b-vl4bl0c3hx] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive[b-vl4bl0c3hx]::-webkit-scrollbar {
    height: 8px;
}

.table-responsive[b-vl4bl0c3hx]::-webkit-scrollbar-track {
    background: #F1F5F9;
    border-radius: 4px;
}

.table-responsive[b-vl4bl0c3hx]::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
}

.table-responsive[b-vl4bl0c3hx]::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

.members-table[b-vl4bl0c3hx] {
    width: 100%;
    border-collapse: collapse;
}

    .members-table thead[b-vl4bl0c3hx] {
        background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
        border-bottom: 2px solid #E2E8F0;
    }

    .members-table th[b-vl4bl0c3hx] {
        padding: 18px 24px;
        text-align: left;
        font-size: 11px;
        font-weight: 800;
        color: #64748B;
        text-transform: uppercase;
        letter-spacing: 0.8px;
    }

    .members-table th.text-end[b-vl4bl0c3hx] {
        text-align: right;
    }

    .members-table td[b-vl4bl0c3hx] {
        padding: 18px 24px;
        border-bottom: 1px solid #F1F5F9;
        vertical-align: middle;
        transition: background-color 0.2s ease;
    }

    .members-table td.text-muted[b-vl4bl0c3hx] {
        color: #64748B;
        font-size: 14px;
    }

    .members-table tr:last-child td[b-vl4bl0c3hx] {
        border-bottom: none;
    }

    .members-table tbody tr[b-vl4bl0c3hx] {
        transition: all 0.2s ease;
    }

    .members-table tbody tr:hover[b-vl4bl0c3hx] {
        background-color: #F8FAFC;
    }

    .members-table tbody tr:hover td[b-vl4bl0c3hx] {
        background-color: transparent;
    }

    .members-table .empty-members[b-vl4bl0c3hx] {
        padding: 60px 24px;
        text-align: center;
    }

.empty-state-content[b-vl4bl0c3hx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #94A3B8;
}

.empty-state-content i[b-vl4bl0c3hx] {
    font-size: 48px;
    opacity: 0.4;
}

.empty-state-content p[b-vl4bl0c3hx] {
    font-size: 14px;
    margin: 0;
    font-weight: 500;
}

/* --- User Info Styling --- */
.user-info[b-vl4bl0c3hx] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar-container[b-vl4bl0c3hx] {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.avatar-img[b-vl4bl0c3hx] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #FFFFFF;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1),
                0 0 0 1px rgba(0, 0, 0, 0.05);
    display: block;
    transition: transform 0.2s ease;
}

.avatar-img:hover[b-vl4bl0c3hx] {
    transform: scale(1.05);
}

.avatar-circle[b-vl4bl0c3hx] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667EEA 0%, #4318FF 100%);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #FFFFFF;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1),
                0 0 0 1px rgba(0, 0, 0, 0.05);
    text-transform: uppercase;
    transition: transform 0.2s ease;
}

.avatar-circle:hover[b-vl4bl0c3hx] {
    transform: scale(1.05);
}

.status-dot[b-vl4bl0c3hx] {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid #FFFFFF;
    background: #94A3B8;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    animation: pulseDot-b-vl4bl0c3hx 2s ease-in-out infinite;
}

.status-dot.online[b-vl4bl0c3hx] {
    background: #10B981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2),
                0 2px 4px rgba(0, 0, 0, 0.15);
}

@keyframes pulseDot-b-vl4bl0c3hx {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.9;
    }
}

.user-details[b-vl4bl0c3hx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-name[b-vl4bl0c3hx] {
    font-weight: 700;
    color: #0F172A;
    font-size: 15px;
    line-height: 1.4;
}

.you-badge[b-vl4bl0c3hx] {
    color: #6366F1;
    font-weight: 600;
    font-size: 13px;
    margin-left: 4px;
}

/* --- Role Badges & Selects --- */
.role-badge[b-vl4bl0c3hx] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.role-badge.leader[b-vl4bl0c3hx] {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    color: #D97706;
    border: 1px solid rgba(217, 119, 6, 0.2);
}

.role-badge.moderator[b-vl4bl0c3hx] {
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    color: #4338CA;
    border: 1px solid rgba(67, 56, 202, 0.2);
}

.role-badge.member[b-vl4bl0c3hx] {
    background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%);
    color: #475569;
    border: 1px solid rgba(71, 85, 105, 0.2);
}

/* Role Select */
.select-wrap[b-vl4bl0c3hx] {
    position: relative;
    width: 140px;
}

.role-select[b-vl4bl0c3hx] {
    width: 100%;
    padding: 8px 32px 8px 12px;
    border-radius: 10px;
    border: 1px solid #E2E8F0;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    background-color: #FFFFFF;
    outline: none;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.role-select:hover[b-vl4bl0c3hx] {
    border-color: #CBD5E1;
    background-color: #F8FAFC;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.role-select:focus[b-vl4bl0c3hx] {
    border-color: #6366F1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1),
                0 2px 6px rgba(0, 0, 0, 0.08);
    background-color: #FFFFFF;
}

.role-select.leader[b-vl4bl0c3hx] {
    background-color: #FFFBEB;
    border-color: #FDE68A;
    color: #D97706;
}

.role-select.moderator[b-vl4bl0c3hx] {
    background-color: #EEF2FF;
    border-color: #C7D2FE;
    color: #4338CA;
}

.role-select.member[b-vl4bl0c3hx] {
    background-color: #F8FAFC;
    border-color: #E2E8F0;
    color: #475569;
}

/* Form Styling */
.role-form[b-vl4bl0c3hx] {
    margin: 0;
    padding: 0;
}

.action-form[b-vl4bl0c3hx] {
    margin: 0;
    padding: 0;
    display: inline-block;
}

.text-end[b-vl4bl0c3hx] {
    text-align: right;
}

/* Loading States */
.btn-invite:disabled[b-vl4bl0c3hx],
.btn-delete-board:disabled[b-vl4bl0c3hx] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Focus States for Accessibility */
.btn-invite:focus-visible[b-vl4bl0c3hx],
.btn-delete-board:focus-visible[b-vl4bl0c3hx] {
    outline: 3px solid rgba(99, 102, 241, 0.5);
    outline-offset: 2px;
}

.btn-action-del:focus-visible[b-vl4bl0c3hx],
.btn-action-leave:focus-visible[b-vl4bl0c3hx] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* --- Action Buttons (Delete / Leave) --- */
.btn-action-del[b-vl4bl0c3hx] {
    background: #FEF2F2;
    color: #EF4444;
    border: 1px solid #FEE2E2;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
}

.btn-action-del:hover[b-vl4bl0c3hx] {
    background: #FEE2E2;
    border-color: #FECACA;
    color: #DC2626;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

.btn-action-del:active[b-vl4bl0c3hx] {
    transform: translateY(0) scale(1);
}

.btn-action-leave[b-vl4bl0c3hx] {
    background: #FFF7ED;
    color: #EA580C;
    border: 1px solid #FFEDD5;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
}

.btn-action-leave:hover[b-vl4bl0c3hx] {
    background: #FFEDD5;
    border-color: #FED7AA;
    color: #C2410C;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.2);
}

.btn-action-leave:active[b-vl4bl0c3hx] {
    transform: translateY(0) scale(1);
}

/* --- Glass Modal Styling --- */
.glass-modal[b-vl4bl0c3hx] {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2),
                0 0 0 1px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.invite-icon-box[b-vl4bl0c3hx] {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
    color: #6366F1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.25);
    border: 3px solid rgba(99, 102, 241, 0.15);
}

.code-box-wrapper[b-vl4bl0c3hx] {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.code-input[b-vl4bl0c3hx] {
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    border: 2px dashed #CBD5E1;
    border-radius: 14px;
    padding: 16px 20px;
    font-size: 26px;
    font-family: 'Courier New', monospace;
    font-weight: 800;
    color: #0F172A;
    text-align: center;
    width: 240px;
    letter-spacing: 3px;
    outline: none;
    transition: all 0.2s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.code-input:focus[b-vl4bl0c3hx] {
    border-color: #6366F1;
    border-style: solid;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1),
                inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-copy[b-vl4bl0c3hx] {
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    border: none;
    color: #FFFFFF;
    border-radius: 14px;
    width: 56px;
    height: 56px;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn-copy:hover[b-vl4bl0c3hx] {
    background: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}

.btn-copy:active[b-vl4bl0c3hx] {
    transform: translateY(0);
}

/* Leave Board Modal Styling */
.leave-modal .modal-content[b-vl4bl0c3hx] {
    border-radius: 24px;
    border: 1px solid #FEF3C7;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(245, 158, 11, 0.15);
}

.leave-modal .modal-header[b-vl4bl0c3hx] {
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    padding: 24px 24px 20px;
}

.leave-modal .modal-title[b-vl4bl0c3hx] {
    display: flex;
    align-items: center;
    font-size: 20px;
    color: #D97706;
}

.leave-modal .modal-body[b-vl4bl0c3hx] {
    padding: 28px 28px 24px;
    text-align: center;
}

.leave-warning-icon[b-vl4bl0c3hx] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.2);
}

.leave-warning-icon i[b-vl4bl0c3hx] {
    font-size: 36px;
    color: #D97706;
}

.leave-title[b-vl4bl0c3hx] {
    font-size: 18px;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 12px;
}

.leave-message[b-vl4bl0c3hx] {
    color: #64748B;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.leave-consequences[b-vl4bl0c3hx] {
    background: #F8FAFC;
    border-radius: 12px;
    padding: 16px;
    text-align: left;
    border: 1px solid #E2E8F0;
}

.consequence-item[b-vl4bl0c3hx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    color: #475569;
}

.consequence-item i[b-vl4bl0c3hx] {
    color: #EF4444;
    font-size: 16px;
    flex-shrink: 0;
}

.consequence-item:not(:last-child)[b-vl4bl0c3hx] {
    border-bottom: 1px solid #E2E8F0;
}

.leave-modal .modal-footer[b-vl4bl0c3hx] {
    padding: 16px 24px 24px;
    gap: 12px;
    background: #FAFAFA;
}

.leave-modal .btn-secondary[b-vl4bl0c3hx] {
    background: #FFFFFF;
    color: #64748B;
    border: 1px solid #E2E8F0;
    padding: 11px 22px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.leave-modal .btn-secondary:hover[b-vl4bl0c3hx] {
    background: #F8FAFC;
    border-color: #CBD5E1;
    color: #334155;
}

.leave-modal .btn-warning[b-vl4bl0c3hx] {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: white;
    border: none;
    padding: 11px 22px;
    border-radius: 12px;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
    transition: all 0.3s ease;
}

.leave-modal .btn-warning:hover[b-vl4bl0c3hx] {
    background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45);
}

.leave-modal .btn-warning:active[b-vl4bl0c3hx] {
    transform: translateY(0);
}

/* Delete Board Modal Styling */
#deleteBoardModal .modal-content[b-vl4bl0c3hx] {
    border-radius: 20px;
    border: 1px solid #FEE2E2;
    overflow: hidden;
}

#deleteBoardModal .modal-header[b-vl4bl0c3hx] {
    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
    padding: 20px 24px;
}

#deleteBoardModal .modal-title[b-vl4bl0c3hx] {
    display: flex;
    align-items: center;
    font-size: 18px;
}

#deleteBoardModal .modal-body[b-vl4bl0c3hx] {
    padding: 24px;
}

#deleteBoardModal .modal-footer[b-vl4bl0c3hx] {
    padding: 16px 24px 24px;
    gap: 12px;
}

#deleteBoardModal .btn-secondary[b-vl4bl0c3hx] {
    background: #F1F5F9;
    color: #475569;
    border: 1px solid #E2E8F0;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.2s ease;
}

#deleteBoardModal .btn-secondary:hover[b-vl4bl0c3hx] {
    background: #E2E8F0;
    border-color: #CBD5E1;
}

#deleteBoardModal .btn-danger[b-vl4bl0c3hx] {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    transition: all 0.2s ease;
}

#deleteBoardModal .btn-danger:hover[b-vl4bl0c3hx] {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

#deleteErrorAlert[b-vl4bl0c3hx] {
    border-radius: 12px;
    border: 1px solid #FECACA;
    background: #FEF2F2;
}

/* =========================================
   📱 RESPONSIVE DESIGN
   ========================================= */

@media (max-width: 1024px) {
    .members-hero[b-vl4bl0c3hx] {
        padding: 24px;
    }

    .members-header[b-vl4bl0c3hx] {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .header-actions[b-vl4bl0c3hx] {
        width: 100%;
        justify-content: flex-start;
    }

    .members-stats[b-vl4bl0c3hx] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .members-wrapper[b-vl4bl0c3hx] {
        padding: 0 16px;
    }

    .members-hero[b-vl4bl0c3hx] {
        padding: 20px;
        border-radius: 18px;
    }

    .page-title[b-vl4bl0c3hx] {
        font-size: 24px;
    }

    .header-actions[b-vl4bl0c3hx] {
        flex-direction: column;
        width: 100%;
    }

    .btn-invite[b-vl4bl0c3hx],
    .btn-delete-board[b-vl4bl0c3hx] {
        width: 100%;
        justify-content: center;
    }

    .members-card[b-vl4bl0c3hx] {
        border-radius: 16px;
        overflow-x: auto;
    }

    .members-table[b-vl4bl0c3hx] {
        font-size: 13px;
        min-width: 600px;
    }

    .members-table th[b-vl4bl0c3hx],
    .members-table td[b-vl4bl0c3hx] {
        padding: 12px 16px;
    }

    .user-info[b-vl4bl0c3hx] {
        gap: 10px;
    }

    .select-wrap[b-vl4bl0c3hx] {
        width: 120px;
    }

    .code-box-wrapper[b-vl4bl0c3hx] {
        flex-direction: column;
    }

    .code-input[b-vl4bl0c3hx] {
        width: 100%;
        font-size: 22px;
    }

    .btn-copy[b-vl4bl0c3hx] {
        width: 100%;
        height: 48px;
    }
}

@media (max-width: 480px) {
    .members-table th[b-vl4bl0c3hx],
    .members-table td[b-vl4bl0c3hx] {
        padding: 10px 12px;
        font-size: 12px;
    }

    .members-table th[b-vl4bl0c3hx] {
        font-size: 10px;
    }

    .avatar-img[b-vl4bl0c3hx],
    .avatar-circle[b-vl4bl0c3hx] {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .status-dot[b-vl4bl0c3hx] {
        width: 12px;
        height: 12px;
    }

    /* Leave Modal Responsive */
    .leave-modal .modal-body[b-vl4bl0c3hx] {
        padding: 20px 20px 16px;
    }

    .leave-warning-icon[b-vl4bl0c3hx] {
        width: 64px;
        height: 64px;
        margin-bottom: 16px;
    }

    .leave-warning-icon i[b-vl4bl0c3hx] {
        font-size: 28px;
    }

    .leave-title[b-vl4bl0c3hx] {
        font-size: 16px;
    }

    .leave-message[b-vl4bl0c3hx] {
        font-size: 14px;
    }

    .consequence-item[b-vl4bl0c3hx] {
        font-size: 13px;
    }
}
/* _content/TeamTasks.Web/Views/Teams/Dashboard.cshtml.rz.scp.css */
/* =========================================
   📊 TEAM DASHBOARD - PROFESSIONAL STYLING
   ========================================= */

.dashboard-wrapper[b-ab5hy6xkwe] {
    max-width: 1400px;
    margin: 28px auto 40px;
    padding: 0 20px;
    font-family: system-ui, -apple-system, sans-serif;
    color: #1E293B;
}

/* --- Hero Header --- */
.dash-hero[b-ab5hy6xkwe] {
    position: relative;
    border-radius: 22px;
    padding: 28px 28px 24px;
    background: linear-gradient(135deg, #F8FAFF 0%, #FFFFFF 45%, #F5F3FF 100%);
    border: 1px solid #E2E8F0;
    box-shadow: 0 20px 50px -32px rgba(15, 23, 42, 0.3),
                0 8px 16px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    margin-bottom: 28px;
}

.dash-hero-bg[b-ab5hy6xkwe] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 15%, rgba(99, 102, 241, 0.12), transparent 35%),
        radial-gradient(circle at 85% 20%, rgba(14, 165, 233, 0.12), transparent 40%),
        radial-gradient(circle at 20% 85%, rgba(124, 58, 237, 0.08), transparent 35%);
    pointer-events: none;
}

.dash-header[b-ab5hy6xkwe] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.dash-title-wrap[b-ab5hy6xkwe] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dash-badge[b-ab5hy6xkwe] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #4338CA;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.dash-title[b-ab5hy6xkwe] {
    font-size: 30px;
    font-weight: 800;
    color: #0F172A;
    margin: 0;
    letter-spacing: -0.4px;
}

.dash-sub[b-ab5hy6xkwe] {
    color: #64748B;
    font-size: 14px;
    margin: 0;
}

.dash-actions[b-ab5hy6xkwe] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.live-indicator[b-ab5hy6xkwe] {
    font-size: 12px;
    font-weight: 700;
    color: #059669;
    background: #ECFDF5;
    padding: 7px 14px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.blink[b-ab5hy6xkwe] {
    width: 8px;
    height: 8px;
    background: #10B981;
    border-radius: 50%;
    animation: blinker-b-ab5hy6xkwe 1.5s linear infinite;
}

@keyframes blinker-b-ab5hy6xkwe {
    50% {
        opacity: 0;
    }
}

/* --- Stats Row --- */
.dash-stats[b-ab5hy6xkwe] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.dash-stat-card[b-ab5hy6xkwe] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    box-shadow: 0 10px 26px -20px rgba(15, 23, 42, 0.25);
}

.dash-stat-icon[b-ab5hy6xkwe] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #4F46E5;
    background: rgba(99, 102, 241, 0.12);
}

.dash-stat-icon.stat-total[b-ab5hy6xkwe] {
    color: #6366F1;
    background: #EEF2FF;
}

.dash-stat-icon.stat-team[b-ab5hy6xkwe] {
    color: #0EA5E9;
    background: #ECFEFF;
}

.dash-stat-icon.stat-private[b-ab5hy6xkwe] {
    color: #F43F5E;
    background: #FFF1F2;
}

.dash-stat-content[b-ab5hy6xkwe] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dash-stat-label[b-ab5hy6xkwe] {
    font-size: 12px;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.dash-stat-value[b-ab5hy6xkwe] {
    font-size: 18px;
    font-weight: 800;
    color: #0F172A;
}

/* --- Grid Layout --- */
.dashboard-grid-layout[b-ab5hy6xkwe] {
    display: grid;
    grid-template-columns: 2.5fr 1fr; /* Main content takes more space */
    gap: 30px;
    align-items: start;
}

/* --- Create Goal Card --- */
.create-goal-card[b-ab5hy6xkwe] {
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 16px 40px -30px rgba(15, 23, 42, 0.3);
    margin-bottom: 36px;
    border: 1px solid #E2E8F0;
}

.card-header-clean h4[b-ab5hy6xkwe] {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 800;
    color: #0F172A;
}

.input-row[b-ab5hy6xkwe] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.flex-2[b-ab5hy6xkwe] {
    flex: 2;
}

.flex-1[b-ab5hy6xkwe] {
    flex: 1;
}

.w-auto[b-ab5hy6xkwe] {
    width: auto;
}

.dash-input[b-ab5hy6xkwe], .dash-select[b-ab5hy6xkwe] {
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid #E2E8F0;
    background: #F8FAFC;
    color: #334155;
    outline: none;
    transition: 0.2s;
}

    .dash-input:focus[b-ab5hy6xkwe], .dash-select:focus[b-ab5hy6xkwe] {
        background: #fff;
        border-color: #6366F1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

.btn-add-goal[b-ab5hy6xkwe] {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    color: white;
    border: none;
    padding: 0 22px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
    height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 24px -16px rgba(67, 24, 255, 0.45);
}

    .btn-add-goal:hover[b-ab5hy6xkwe] {
        background: #3311CC;
        transform: translateY(-1px);
    }

/* --- Goals Section --- */
.section-label[b-ab5hy6xkwe] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 800;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 16px;
}

.section-count[b-ab5hy6xkwe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 800;
    color: #4F46E5;
    background: #EEF2FF;
    border-radius: 999px;
}

.goals-container[b-ab5hy6xkwe] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.goal-card[b-ab5hy6xkwe] {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    border: 1px solid #E2E8F0;
    display: flex;
    gap: 16px;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 10px 24px -20px rgba(15, 23, 42, 0.2);
}

    .goal-card:hover[b-ab5hy6xkwe] {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.04);
        border-color: #CBD5E1;
    }

.goal-icon[b-ab5hy6xkwe] {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

    .goal-icon.team[b-ab5hy6xkwe] {
        background: #EEF2FF;
        color: #4318FF;
    }

    .goal-icon.private[b-ab5hy6xkwe] {
        background: #FDF2F8;
        color: #EC4899;
    }

.goal-content[b-ab5hy6xkwe] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.goal-top[b-ab5hy6xkwe] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
}

.goal-name[b-ab5hy6xkwe] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #1E293B;
    line-height: 1.3;
}

.btn-dots[b-ab5hy6xkwe] {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    color: #64748B;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 6px;
    border-radius: 8px;
    transition: 0.2s;
}

    .btn-dots:hover[b-ab5hy6xkwe] {
        color: #1E293B;
    }

.goal-bottom[b-ab5hy6xkwe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.time-badge[b-ab5hy6xkwe] {
    font-size: 11px;
    color: #64748B;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.vis-badge[b-ab5hy6xkwe] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 6px;
}

    .vis-badge.team[b-ab5hy6xkwe] {
        background: #F1F5F9;
        color: #475569;
    }

    .vis-badge.private[b-ab5hy6xkwe] {
        background: #FFF1F2;
        color: #E11D48;
    }

.empty-goals[b-ab5hy6xkwe] {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    background: #F8FAFC;
    border-radius: 16px;
    border: 2px dashed #E2E8F0;
    color: #94A3B8;
}

    .empty-goals i[b-ab5hy6xkwe] {
        font-size: 32px;
        display: block;
        margin-bottom: 10px;
        opacity: 0.5;
    }

/* --- Activity Sidebar (Timeline) --- */
.activity-card[b-ab5hy6xkwe] {
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 16px 40px -30px rgba(15, 23, 42, 0.3);
    position: sticky;
    top: 20px;
}

.activity-header[b-ab5hy6xkwe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

    .activity-header h4[b-ab5hy6xkwe] {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: #1E293B;
    }

.badge-count[b-ab5hy6xkwe] {
    background: #EEF2FF;
    color: #4F46E5;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 999px;
}

.activity-timeline[b-ab5hy6xkwe] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 500px;
    overflow-y: auto;
    padding-right: 5px;
}

    .activity-timeline[b-ab5hy6xkwe]::before {
        content: '';
        position: absolute;
        left: 15px;
        top: 10px;
        bottom: 10px;
        width: 2px;
        background: #F1F5F9;
        z-index: 0;
    }

.timeline-item[b-ab5hy6xkwe] {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 12px;
}

.timeline-icon[b-ab5hy6xkwe] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

    .timeline-icon.blue[b-ab5hy6xkwe] {
        background: #EEF2FF;
        color: #4318FF;
    }

    .timeline-icon.orange[b-ab5hy6xkwe] {
        background: #FFF7ED;
        color: #EA580C;
    }

    .timeline-icon.green[b-ab5hy6xkwe] {
        background: #F0FDF4;
        color: #16A34A;
    }

    .timeline-icon.default[b-ab5hy6xkwe] {
        background: #F1F5F9;
        color: #64748B;
    }

.timeline-content[b-ab5hy6xkwe] {
    flex: 1;
    background: #F8FAFC;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #F1F5F9;
}

.act-text[b-ab5hy6xkwe] {
    margin: 0 0 4px 0;
    font-size: 13px;
    color: #334155;
    line-height: 1.4;
}

.act-desc[b-ab5hy6xkwe] {
    color: #64748B;
    font-weight: 400;
}

.act-task[b-ab5hy6xkwe] {
    color: #4318FF;
    font-weight: 600;
    cursor: pointer;
}

.act-time[b-ab5hy6xkwe] {
    display: block;
    font-size: 11px;
    color: #94A3B8;
    font-weight: 500;
}

.loading-spinner[b-ab5hy6xkwe] {
    text-align: center;
    color: #94A3B8;
    font-size: 13px;
    padding: 20px;
}

.empty-activity[b-ab5hy6xkwe] {
    text-align: center;
    color: #CBD5E1;
    font-size: 13px;
    padding: 20px;
    font-style: italic;
}

/* Responsive */
@media (max-width: 900px) {
    .dash-hero[b-ab5hy6xkwe] {
        padding: 22px;
    }

    .dash-header[b-ab5hy6xkwe] {
        flex-direction: column;
        align-items: flex-start;
    }

    .dash-stats[b-ab5hy6xkwe] {
        grid-template-columns: 1fr;
    }

    .dashboard-grid-layout[b-ab5hy6xkwe] {
        grid-template-columns: 1fr;
    }

    .input-row[b-ab5hy6xkwe] {
        flex-direction: column;
    }

    .input-group[b-ab5hy6xkwe], .btn-add-goal[b-ab5hy6xkwe] {
        width: 100%;
    }
}
/* _content/TeamTasks.Web/Views/Teams/Index.cshtml.rz.scp.css */
/* ========================
   1. Global & Fonts
   ======================== */
.page-wrap[b-4hyw0sub46] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 32px 48px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #1E293B;
    animation: fadeIn-b-4hyw0sub46 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeIn-b-4hyw0sub46 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================
   1.5 Hero Section - Professional
   ======================== */
.workspaces-hero[b-4hyw0sub46] {
    position: relative;
    border-radius: 24px;
    padding: 32px;
    background: linear-gradient(135deg, #F8FAFF 0%, #FFFFFF 45%, #F5F3FF 100%);
    border: 1px solid #E2E8F0;
    box-shadow: 0 20px 50px -32px rgba(15, 23, 42, 0.3),
                0 8px 16px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    margin-bottom: 36px;
}

.hero-bg[b-4hyw0sub46] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 15%, rgba(79, 70, 229, 0.12), transparent 35%),
        radial-gradient(circle at 85% 20%, rgba(14, 165, 233, 0.12), transparent 40%),
        radial-gradient(circle at 20% 85%, rgba(124, 58, 237, 0.08), transparent 35%);
    pointer-events: none;
}

.hero-content[b-4hyw0sub46] {
    position: relative;
}

.hero-badge[b-4hyw0sub46] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #4338CA;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.25);
    margin-bottom: 20px;
}

.hero-badge i[b-4hyw0sub46] {
    font-size: 15px;
}

/* ========================
   2. Header Section - Enhanced
   ======================== */
.head-section[b-4hyw0sub46] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 24px;
}

.head-content[b-4hyw0sub46] {
    flex: 1;
    min-width: 280px;
}

.title-wrapper[b-4hyw0sub46] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.title[b-4hyw0sub46] {
    font-size: 38px;
    font-weight: 900;
    color: #0F172A;
    margin: 0;
    letter-spacing: -1px;
    line-height: 1.1;
    background: linear-gradient(135deg, #1E293B 0%, #4F46E5 50%, #6366F1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
    animation: gradientShift-b-4hyw0sub46 4s ease infinite;
}

@keyframes gradientShift-b-4hyw0sub46 {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

.title-badge[b-4hyw0sub46] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
    padding: 7px 16px;
    border-radius: 24px;
    border: 1px solid #C7D2FE;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.12);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.title-badge:hover[b-4hyw0sub46] {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.18);
}

.badge-count[b-4hyw0sub46] {
    font-size: 16px;
    font-weight: 800;
    color: #4F46E5;
    letter-spacing: -0.3px;
}

.badge-text[b-4hyw0sub46] {
    font-size: 13px;
    font-weight: 700;
    color: #6366F1;
    letter-spacing: 0.2px;
}

.sub[b-4hyw0sub46] {
    font-size: 17px;
    color: #64748B;
    margin: 0;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.1px;
}

.head-actions[b-4hyw0sub46] {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* ========================
   3. Buttons - Enhanced
   ======================== */
.btn[b-4hyw0sub46] {
    padding: 12px 24px;
    border-radius: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    height: 48px;
    position: relative;
    overflow: hidden;
}

.btn[b-4hyw0sub46]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    transform: translate(-50%, -50%);
    transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1), height 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

.btn:hover[b-4hyw0sub46]::before {
    width: 350px;
    height: 350px;
    opacity: 1;
}

.btn:active[b-4hyw0sub46]::before {
    width: 380px;
    height: 380px;
    opacity: 0.5;
    transition: width 0.2s, height 0.2s, opacity 0.2s;
}

.btn-primary[b-4hyw0sub46] {
    background: linear-gradient(135deg, #667EEA 0%, #4318FF 100%);
    color: white;
    box-shadow: 0 6px 20px 0 rgba(67, 24, 255, 0.4),
                0 2px 8px 0 rgba(67, 24, 255, 0.15);
}

.btn-primary:hover[b-4hyw0sub46] {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px 0 rgba(67, 24, 255, 0.5),
                0 4px 12px 0 rgba(67, 24, 255, 0.25);
    background: linear-gradient(135deg, #667EEA 0%, #3311CC 100%);
}

.btn-primary:active[b-4hyw0sub46] {
    transform: translateY(-1px);
}

.btn-create[b-4hyw0sub46] {
    font-weight: 700;
    padding: 12px 28px;
    position: relative;
    z-index: 1;
}

.btn-secondary[b-4hyw0sub46] {
    background-color: white;
    color: #475569;
    border: 2px solid #E2E8F0;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
}

.btn-secondary:hover[b-4hyw0sub46] {
    background-color: #F8FAFC;
    color: #1E293B;
    border-color: #CBD5E1;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.1);
}

.btn-text[b-4hyw0sub46] {
    background: none;
    color: #64748B;
    border: none;
    box-shadow: none;
}

.btn-text:hover[b-4hyw0sub46] {
    background: #F1F5F9;
    color: #334155;
}

/* ========================
   4. Grid System - Enhanced
   ======================== */
.teams-grid[b-4hyw0sub46] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 32px;
    animation: gridFadeIn-b-4hyw0sub46 0.8s ease-out;
}

@keyframes gridFadeIn-b-4hyw0sub46 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered animation for cards */
.team-card:nth-child(1)[b-4hyw0sub46] {
    animation: cardFadeIn-b-4hyw0sub46 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.05s backwards;
}

.team-card:nth-child(2)[b-4hyw0sub46] {
    animation: cardFadeIn-b-4hyw0sub46 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s backwards;
}

.team-card:nth-child(3)[b-4hyw0sub46] {
    animation: cardFadeIn-b-4hyw0sub46 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s backwards;
}

.team-card:nth-child(4)[b-4hyw0sub46] {
    animation: cardFadeIn-b-4hyw0sub46 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards;
}

.team-card:nth-child(5)[b-4hyw0sub46] {
    animation: cardFadeIn-b-4hyw0sub46 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.25s backwards;
}

.team-card:nth-child(n+6)[b-4hyw0sub46] {
    animation: cardFadeIn-b-4hyw0sub46 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards;
}

@keyframes cardFadeIn-b-4hyw0sub46 {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ========================
   5. Cards Design - Professional
   ======================== */
.team-card[b-4hyw0sub46] {
    background: white;
    border-radius: 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 240px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid #F1F5F9;
    overflow: hidden;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05),
                0 1px 3px 0 rgba(0, 0, 0, 0.03);
}

.team-card[b-4hyw0sub46]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(79, 70, 229, 0.03) 0%, 
        rgba(99, 102, 241, 0.03) 50%,
        transparent 100%);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

.team-card:hover[b-4hyw0sub46]::before {
    opacity: 1;
}

.project-card[b-4hyw0sub46] {
    padding: 28px;
    cursor: pointer;
}

.project-card:hover[b-4hyw0sub46] {
    transform: translateY(-10px) scale(1.01);
    box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.18),
                0 8px 16px -4px rgba(0, 0, 0, 0.08);
    border-color: transparent;
}

.card-glow[b-4hyw0sub46] {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 50% 50%, var(--theme-color) 0%, transparent 65%);
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    filter: blur(50px);
    will-change: opacity;
}

.project-card:hover .card-glow[b-4hyw0sub46] {
    opacity: 0.12;
    animation: glowPulse-b-4hyw0sub46 2s ease-in-out infinite;
}

@keyframes glowPulse-b-4hyw0sub46 {
    0%, 100% { opacity: 0.12; }
    50% { opacity: 0.18; }
}

.card-accent[b-4hyw0sub46] {
    height: 6px;
    width: 100%;
    background: linear-gradient(90deg, var(--theme-color) 0%, color-mix(in srgb, var(--theme-color), white 30%) 50%, var(--theme-color) 100%);
    border-radius: 24px 24px 0 0;
    margin: 0;
    position: relative;
    overflow: hidden;
}

.card-accent[b-4hyw0sub46]::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: shimmer-b-4hyw0sub46 3.5s ease-in-out infinite;
}

.project-card:hover .card-accent[b-4hyw0sub46]::after {
    animation: shimmer-b-4hyw0sub46 2s ease-in-out infinite;
}

@keyframes shimmer-b-4hyw0sub46 {
    0% { left: -100%; opacity: 0; }
    50% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

.card-header[b-4hyw0sub46] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-top: 4px;
}

.team-avatar[b-4hyw0sub46] {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--theme-color), white 10%), var(--theme-color));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14), 
                0 0 0 1px rgba(255, 255, 255, 0.3) inset,
                0 6px 16px color-mix(in srgb, var(--theme-color), transparent 45%);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.team-avatar[b-4hyw0sub46]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s;
}

.team-avatar[b-4hyw0sub46]::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, var(--theme-color), color-mix(in srgb, var(--theme-color), white 30%));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s;
    animation: rotateBorder-b-4hyw0sub46 3s linear infinite;
}

@keyframes rotateBorder-b-4hyw0sub46 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.project-card:hover .team-avatar[b-4hyw0sub46] {
    transform: scale(1.08) rotate(3deg);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2), 
                0 0 0 1px rgba(255, 255, 255, 0.4) inset,
                0 8px 20px color-mix(in srgb, var(--theme-color), transparent 35%);
}

.project-card:hover .team-avatar[b-4hyw0sub46]::before {
    opacity: 1;
}

.project-card:hover .team-avatar[b-4hyw0sub46]::after {
    opacity: 0.5;
}

.team-avatar i[b-4hyw0sub46] {
    font-size: 30px;
    color: white;
    opacity: 0.95;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25));
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
}

.project-card:hover .team-avatar i[b-4hyw0sub46] {
    transform: scale(1.15) rotate(-3deg);
}

.team-id[b-4hyw0sub46] {
    font-size: 12px;
    font-weight: 700;
    color: #64748B;
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid #E2E8F0;
    letter-spacing: 0.3px;
    transition: all 0.3s;
}

.project-card:hover .team-id[b-4hyw0sub46] {
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
    border-color: #C7D2FE;
    color: #4F46E5;
    transform: scale(1.05);
}

.card-body[b-4hyw0sub46] {
    flex: 1;
    margin-bottom: 20px;
}

.team-name[b-4hyw0sub46] {
    font-size: 20px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 14px 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s;
}

.project-card:hover .team-name[b-4hyw0sub46] {
    color: var(--theme-color);
}

.team-meta[b-4hyw0sub46] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #64748B;
    flex-wrap: wrap;
}

.role-badge[b-4hyw0sub46] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 16px;
    font-weight: 700;
    font-size: 13px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08),
                0 1px 3px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.role-badge[b-4hyw0sub46]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
}

.role-badge i[b-4hyw0sub46] {
    font-size: 16px !important;
    flex-shrink: 0;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.role-badge.owner[b-4hyw0sub46] {
    background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
    color: #6B21A8;
    border: 2px solid #C4B5FD;
}

.crown-icon[b-4hyw0sub46],
.shield-icon[b-4hyw0sub46],
.person-icon[b-4hyw0sub46] {
    font-size: 18px !important;
    display: inline-block !important;
    transform: translateY(-1px);
}

.crown-icon[b-4hyw0sub46] {
    filter: drop-shadow(0 2px 4px rgba(252, 211, 77, 0.5));
}

.shield-icon[b-4hyw0sub46] {
    filter: drop-shadow(0 2px 4px rgba(37, 99, 235, 0.4));
}

.person-icon[b-4hyw0sub46] {
    filter: drop-shadow(0 2px 4px rgba(100, 116, 139, 0.3));
}

.role-badge.moderator[b-4hyw0sub46] {
    background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
    color: #1E40AF;
    border: 2px solid #93C5FD;
}

.role-badge.moderator i[b-4hyw0sub46] {
    color: #2563EB;
    filter: drop-shadow(0 2px 4px rgba(37, 99, 235, 0.3));
}

.role-badge.member[b-4hyw0sub46] {
    background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%);
    color: #334155;
    border: 2px solid #CBD5E1;
}

.role-badge.member i[b-4hyw0sub46] {
    color: #64748B;
}

.role-badge:hover[b-4hyw0sub46] {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14),
                0 2px 6px rgba(0, 0, 0, 0.08);
}

.role-badge:hover[b-4hyw0sub46]::before {
    opacity: 1;
}

.meta-separator[b-4hyw0sub46] {
    opacity: 0.4;
    font-weight: 300;
}

.updated[b-4hyw0sub46] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #94A3B8;
}

.updated i[b-4hyw0sub46] {
    font-size: 11px;
}

.card-footer[b-4hyw0sub46] {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #F8FAFC;
}

.card-cta[b-4hyw0sub46] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--theme-color) 0%, color-mix(in srgb, var(--theme-color), black 20%) 100%);
    color: white;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--theme-color), transparent 55%),
                0 2px 6px color-mix(in srgb, var(--theme-color), transparent 70%);
    position: relative;
    overflow: hidden;
}

.card-cta[b-4hyw0sub46]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-cta:hover[b-4hyw0sub46]::before {
    left: 100%;
}

.card-cta span[b-4hyw0sub46] {
    position: relative;
    z-index: 1;
    letter-spacing: 0.3px;
}

.card-cta i[b-4hyw0sub46] {
    position: relative;
    z-index: 1;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-size: 16px;
}

.card-cta:hover[b-4hyw0sub46] {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--theme-color), transparent 45%),
                0 4px 12px color-mix(in srgb, var(--theme-color), transparent 60%);
}

.card-cta:hover i[b-4hyw0sub46] {
    transform: translateX(6px);
}

.card-cta:active[b-4hyw0sub46] {
    transform: translateY(-1px) scale(0.99);
}

/* ========================
   6. Empty State - Enhanced
   ======================== */
.empty-state[b-4hyw0sub46] {
    text-align: center;
    padding: 120px 40px;
    background: linear-gradient(135deg, #F8FAFF 0%, #F5F3FF 50%, #FAFAFA 100%);
    border-radius: 32px;
    border: 2px dashed #CBD5E1;
    position: relative;
    overflow: hidden;
}

.empty-state[b-4hyw0sub46]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 40%, rgba(99, 102, 241, 0.08) 0%, transparent 60%),
                radial-gradient(circle at 70% 60%, rgba(124, 58, 237, 0.06) 0%, transparent 50%);
    animation: pulse-b-4hyw0sub46 5s ease-in-out infinite;
    z-index: 0;
}

@keyframes pulse-b-4hyw0sub46 {
    0%, 100% { 
        transform: scale(1) rotate(0deg); 
        opacity: 0.6; 
    }
    50% { 
        transform: scale(1.15) rotate(5deg); 
        opacity: 1; 
    }
}

.empty-state-content[b-4hyw0sub46] {
    position: relative;
    z-index: 2;
}

/* Icon + Blob Wrapper - Isolated Container */
.empty-icon-wrapper[b-4hyw0sub46] {
    position: relative;
    display: inline-block;
    width: 150px;
    height: 150px;
    margin: 0 auto 48px;
    z-index: 1;
}

/* Background Blob - Perfectly Centered Behind Icon */
.empty-icon-bg[b-4hyw0sub46] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    height: 140%;
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 50%, #DDD6FE 100%);
    border-radius: 50%;
    animation: pulse-blob-b-4hyw0sub46 4s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
}

/* تأثير تنفس بسيط جداً للدائرة مع الحفاظ على التمركز */
@keyframes pulse-blob-b-4hyw0sub46 {
    0% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.0); opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.5; }
}

/* Rocket Icon - Always on Top */
.empty-icon[b-4hyw0sub46] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 64px;
    color: #4F46E5;
    filter: drop-shadow(0 6px 12px rgba(79, 70, 229, 0.3));
    animation: float-rocket-b-4hyw0sub46 3s ease-in-out infinite;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* طفو هادئ للأعلى */
@keyframes float-rocket-b-4hyw0sub46 {
    0% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(-12px); }
    100% { transform: translate(-50%, -50%) translateY(0); }
}

.empty-title[b-4hyw0sub46] {
    font-size: 28px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 12px 0;
    letter-spacing: -0.5px;
    position: relative;
    z-index: 1;
}

.empty-desc[b-4hyw0sub46] {
    font-size: 16px;
    color: #64748B;
    margin: 0 0 32px 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.btn-empty[b-4hyw0sub46] {
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

/* ========================
   7. Modal - Enhanced
   ======================== */
.modal-overlay[b-4hyw0sub46] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                backdrop-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-overlay.hidden[b-4hyw0sub46] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    backdrop-filter: blur(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 1, 1),
                backdrop-filter 0.25s cubic-bezier(0.4, 0, 1, 1),
                visibility 0s linear 0.25s;
}

.modal-overlay:not(.hidden)[b-4hyw0sub46] {
    visibility: visible;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                backdrop-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-box[b-4hyw0sub46] {
    background: white;
    width: 100%;
    max-width: 540px;
    border-radius: 28px;
    box-shadow: 0 40px 80px -16px rgba(0, 0, 0, 0.35),
                0 0 0 1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transform: scale(1) translateY(0);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.hidden .modal-box[b-4hyw0sub46] {
    transform: scale(0.92) translateY(20px);
    transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);
}

.modal-header[b-4hyw0sub46] {
    padding: 0;
    background: linear-gradient(135deg, #F8FAFF 0%, #F5F3FF 100%);
    border-bottom: 1px solid #E2E8F0;
    position: relative;
}

.close-icon[b-4hyw0sub46] {
    position: absolute;
    top: 20px;
    right: 20px;
    background: white;
    border: 2px solid #E2E8F0;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 18px;
    color: #94A3B8;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    flex-shrink: 0;
}

.close-icon:hover[b-4hyw0sub46] {
    color: #EF4444;
    border-color: #FCA5A5;
    background: #FEF2F2;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

.modal-header-content[b-4hyw0sub46] {
    padding: 36px 64px 32px 36px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.modal-icon-wrapper[b-4hyw0sub46] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #667EEA 0%, #4318FF 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(67, 24, 255, 0.35),
                0 0 0 1px rgba(255, 255, 255, 0.2) inset;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.modal-icon-wrapper[b-4hyw0sub46]::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shimmer-b-4hyw0sub46 3s infinite;
}

.modal-icon-wrapper i[b-4hyw0sub46] {
    font-size: 30px;
    color: white;
    position: relative;
    z-index: 1;
}

.modal-title-section[b-4hyw0sub46] {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

.modal-header h3[b-4hyw0sub46] {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -0.5px;
    line-height: 1.3;
}

.modal-subtitle[b-4hyw0sub46] {
    margin: 0;
    font-size: 15px;
    color: #64748B;
    line-height: 1.5;
    padding-right: 0;
}

.modal-body[b-4hyw0sub46] {
    padding: 32px;
}

.input-group[b-4hyw0sub46] {
    margin-bottom: 0;
}

.input-group label[b-4hyw0sub46] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #475569;
    text-transform: none;
    letter-spacing: 0;
}

.input-group label i[b-4hyw0sub46] {
    color: #64748B;
    font-size: 16px;
}

.form-input[b-4hyw0sub46] {
    width: 100%;
    padding: 18px 20px;
    border: 2px solid #E2E8F0;
    border-radius: 16px;
    font-size: 16px;
    color: #1E293B;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #F8FAFC;
    font-family: inherit;
    font-weight: 500;
}

.form-input[b-4hyw0sub46]::placeholder {
    color: #94A3B8;
    font-weight: 400;
}

.form-input:focus[b-4hyw0sub46] {
    background: white;
    border-color: #6366F1;
    box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.12),
                0 4px 12px rgba(99, 102, 241, 0.08);
    transform: translateY(-2px);
}

.input-hint[b-4hyw0sub46] {
    margin-top: 8px;
    font-size: 13px;
    color: #94A3B8;
    line-height: 1.4;
}

.modal-actions[b-4hyw0sub46] {
    padding: 28px 36px;
    background: linear-gradient(135deg, #FAFAFA 0%, #F8FAFC 100%);
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    border-top: 1px solid #E2E8F0;
}

.btn-modal-create[b-4hyw0sub46] {
    padding: 16px 32px;
    font-weight: 700;
    font-size: 16px;
}

/* ========================
   8. Alert Box - Enhanced
   ======================== */
.alert[b-4hyw0sub46] {
    border-radius: 16px !important;
    padding: 18px 22px !important;
    margin-bottom: 28px !important;
    font-weight: 600 !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
    animation: slideInDown-b-4hyw0sub46 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInDown-b-4hyw0sub46 {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-danger[b-4hyw0sub46] {
    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%) !important;
    color: #991B1B !important;
    border-left: 4px solid #DC2626 !important;
}

.alert-success[b-4hyw0sub46] {
    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%) !important;
    color: #166534 !important;
    border-left: 4px solid #16A34A !important;
}

.alert i[b-4hyw0sub46] {
    font-size: 20px;
    flex-shrink: 0;
}

.alert .btn-close[b-4hyw0sub46] {
    opacity: 0.6;
    transition: opacity 0.2s;
}

.alert .btn-close:hover[b-4hyw0sub46] {
    opacity: 1;
}

/* ========================
   9. Responsive Design
   ======================== */
@media (max-width: 768px) {
    .page-wrap[b-4hyw0sub46] {
        padding: 20px 16px 32px;
    }

    .workspaces-hero[b-4hyw0sub46] {
        padding: 24px 20px;
        border-radius: 20px;
        margin-bottom: 28px;
    }

    .hero-badge[b-4hyw0sub46] {
        font-size: 12px;
        padding: 6px 14px;
        margin-bottom: 16px;
    }

    .head-section[b-4hyw0sub46] {
        flex-direction: column;
        align-items: flex-start;
    }

    .title[b-4hyw0sub46] {
        font-size: 28px;
    }

    .title-badge[b-4hyw0sub46] {
        font-size: 12px;
        padding: 5px 12px;
    }

    .teams-grid[b-4hyw0sub46] {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 24px;
    }

    .team-card[b-4hyw0sub46] {
        min-height: 230px;
    }

    .project-card[b-4hyw0sub46] {
        padding: 26px;
    }

    .team-avatar[b-4hyw0sub46] {
        width: 60px;
        height: 60px;
    }

    .team-avatar i[b-4hyw0sub46] {
        font-size: 26px;
    }

    .modal-box[b-4hyw0sub46] {
        max-width: 100%;
        margin: 20px;
        border-radius: 24px;
    }

    .modal-header-content[b-4hyw0sub46] {
        padding: 28px 50px 24px 24px;
        gap: 14px;
    }

    .modal-icon-wrapper[b-4hyw0sub46] {
        width: 48px;
        height: 48px;
    }

    .modal-icon-wrapper i[b-4hyw0sub46] {
        font-size: 24px;
    }

    .modal-header h3[b-4hyw0sub46] {
        font-size: 20px;
    }

    .modal-subtitle[b-4hyw0sub46] {
        font-size: 14px;
    }

    .close-icon[b-4hyw0sub46] {
        top: 16px;
        right: 16px;
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .modal-body[b-4hyw0sub46] {
        padding: 24px;
    }

    .modal-actions[b-4hyw0sub46] {
        padding: 20px 24px;
        flex-direction: column-reverse;
    }

    .modal-actions .btn[b-4hyw0sub46] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .page-wrap[b-4hyw0sub46] {
        padding: 16px 16px 28px;
    }

    .workspaces-hero[b-4hyw0sub46] {
        padding: 20px 18px;
        border-radius: 18px;
        margin-bottom: 24px;
    }

    .hero-badge[b-4hyw0sub46] {
        font-size: 11px;
        padding: 6px 12px;
        margin-bottom: 14px;
    }

    .title[b-4hyw0sub46] {
        font-size: 26px;
        letter-spacing: -0.6px;
    }

    .title-badge[b-4hyw0sub46] {
        padding: 4px 10px;
    }

    .badge-count[b-4hyw0sub46] {
        font-size: 14px;
    }

    .badge-text[b-4hyw0sub46] {
        font-size: 12px;
    }

    .sub[b-4hyw0sub46] {
        font-size: 15px;
    }

    .head-actions[b-4hyw0sub46] {
        width: 100%;
    }

    .head-actions .btn[b-4hyw0sub46] {
        flex: 1;
        padding: 11px 18px;
        font-size: 14px;
    }

    .teams-grid[b-4hyw0sub46] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .team-avatar[b-4hyw0sub46] {
        width: 56px;
        height: 56px;
    }

    .team-avatar i[b-4hyw0sub46] {
        font-size: 24px;
    }

    .team-name[b-4hyw0sub46] {
        font-size: 18px;
    }

    .empty-state[b-4hyw0sub46] {
        padding: 70px 24px;
    }

    .empty-title[b-4hyw0sub46] {
        font-size: 22px;
    }

    .empty-desc[b-4hyw0sub46] {
        font-size: 15px;
    }

    .modal-header-content[b-4hyw0sub46] {
        padding: 24px 50px 20px 20px;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
    }

    .modal-icon-wrapper[b-4hyw0sub46] {
        width: 52px;
        height: 52px;
    }

    .modal-icon-wrapper i[b-4hyw0sub46] {
        font-size: 26px;
    }

    .modal-title-section[b-4hyw0sub46] {
        width: 100%;
    }

    .modal-header h3[b-4hyw0sub46] {
        font-size: 19px;
        text-align: center;
    }

    .modal-subtitle[b-4hyw0sub46] {
        text-align: center;
        font-size: 14px;
    }

    .close-icon[b-4hyw0sub46] {
        top: 14px;
        right: 14px;
        width: 32px;
        height: 32px;
    }

    .modal-body[b-4hyw0sub46] {
        padding: 24px 20px;
    }

    .form-input[b-4hyw0sub46] {
        padding: 16px 18px;
        font-size: 15px;
    }

    .modal-actions[b-4hyw0sub46] {
        padding: 20px 20px;
    }
}

/* ========================
   10. Loading States (Future)
   ======================== */
@keyframes skeleton-b-4hyw0sub46 {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

.skeleton[b-4hyw0sub46] {
    background: linear-gradient(90deg, #F1F5F9 25%, #F8FAFC 50%, #F1F5F9 75%);
    background-size: 200px 100%;
    animation: skeleton-b-4hyw0sub46 1.5s ease-in-out infinite;
}
/* _content/TeamTasks.Web/Views/Teams/Join.cshtml.rz.scp.css */
/* =========================================
   🎨 JOIN PAGE STYLES
   ========================================= */

/* Wrapper to center the card vertically and horizontally */
.join-wrapper[b-cp3b7aw0y9] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 20px;
}

/* Main Card */
.join-card[b-cp3b7aw0y9] {
    background: #ffffff;
    width: 100%;
    max-width: 480px;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(226, 232, 240, 0.6);
    position: relative;
    overflow: hidden;
}

/* Decorative Icon Circle */
.icon-circle[b-cp3b7aw0y9] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, rgba(94, 92, 230, 0.1), rgba(94, 92, 230, 0.05));
    color: var(--primary);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto;
    border: 1px solid rgba(94, 92, 230, 0.1);
}

/* Typography Tweaks */
.ls-1[b-cp3b7aw0y9] {
    letter-spacing: 0.5px;
    font-size: 0.75rem;
}

/* Custom Input Field with Icon */
.input-group-custom[b-cp3b7aw0y9] {
    position: relative;
}

.input-icon[b-cp3b7aw0y9] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 1.2rem;
    z-index: 5;
    transition: color 0.2s;
}

.form-control-lg[b-cp3b7aw0y9] {
    height: 56px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    font-size: 1rem;
    background-color: #f8fafc;
    transition: all 0.2s ease;
    color: #334155; /* لون النص الأساسي عند الكتابة */
}

    /* 🔥 التعديل هنا: جعل النص التوضيحي (Placeholder) باهت جداً 🔥 */
    .form-control-lg[b-cp3b7aw0y9]::placeholder {
        color: #cbd5e1; /* لون رمادي فاتح جداً */
        opacity: 1; /* لتوحيد الظهور في كل المتصفحات */
        font-weight: 300; /* خط رفيع */
    }

    .form-control-lg:focus[b-cp3b7aw0y9] {
        background-color: #fff;
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(94, 92, 230, 0.1);
    }

        .form-control-lg:focus + .input-icon[b-cp3b7aw0y9],
        .input-group-custom:focus-within .input-icon[b-cp3b7aw0y9] {
            color: var(--primary);
        }

/* Button Enhancements */
.shadow-primary[b-cp3b7aw0y9] {
    box-shadow: 0 8px 20px -4px rgba(94, 92, 230, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

    .shadow-primary:hover[b-cp3b7aw0y9] {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px -4px rgba(94, 92, 230, 0.5);
    }

/* Animation */
.fade-in-up[b-cp3b7aw0y9] {
    animation: fadeInUp-b-cp3b7aw0y9 0.5s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes fadeInUp-b-cp3b7aw0y9 {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hover-primary:hover[b-cp3b7aw0y9] {
    color: var(--primary) !important;
}
/* _content/TeamTasks.Web/Views/Teams/Tasks.cshtml.rz.scp.css */
/* =========================================
   ✨ TASKS PAGE - PROFESSIONAL STYLING
   ========================================= */

.kanban-wrapper[b-z76nb3l75g] {
    max-width: 1600px;
    margin: 30px auto;
    padding: 0 30px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #2C3E50;
}

/* =========================================
   🎨 PROFESSIONAL BOARD HEADER
   ========================================= */

.board-header-pro[b-z76nb3l75g] {
    position: relative;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    padding: 32px 36px;
    margin-bottom: 32px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.25),
                0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

@media (max-width: 768px) {
    .board-header-pro[b-z76nb3l75g] {
        padding: 24px 20px;
        border-radius: 16px;
    }
}

/* Animated Background Gradient */
.header-bg-gradient[b-z76nb3l75g] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(79, 70, 229, 0.9) 0%, 
        rgba(99, 102, 241, 0.8) 50%, 
        rgba(124, 58, 237, 0.9) 100%);
    animation: gradientShift-b-z76nb3l75g 15s ease infinite;
}

@keyframes gradientShift-b-z76nb3l75g {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* Pattern Overlay */
.header-pattern[b-z76nb3l75g] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 40%);
    animation: patternMove-b-z76nb3l75g 20s ease-in-out infinite;
}

@keyframes patternMove-b-z76nb3l75g {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(10px, 10px); }
}

/* Content Wrapper */
.header-content-wrapper[b-z76nb3l75g] {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 44px;
    align-items: center;
}

@media (max-width: 1024px) {
    .header-content-wrapper[b-z76nb3l75g] {
        grid-template-columns: 1fr;
        gap: 28px;
        align-items: flex-start;
    }
}

/* --- Header Section (OLD - KEEP FOR COMPATIBILITY) --- */
.kanban-header[b-z76nb3l75g] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #F1F5F9;
}

/* ===== LEFT SECTION ===== */
.header-left-pro[b-z76nb3l75g] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

/* Title Section */
.title-section[b-z76nb3l75g] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.board-badge-wrapper[b-z76nb3l75g] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.board-badge[b-z76nb3l75g] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

    .board-badge i[b-z76nb3l75g] {
        font-size: 16px;
        color: white;
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.board-id[b-z76nb3l75g] {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Courier New', monospace;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.board-title[b-z76nb3l75g] {
    font-size: 32px;
    font-weight: 800;
    color: white;
    margin: 0;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
    line-height: 1.3;
}

.status-pills[b-z76nb3l75g] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.status-pill[b-z76nb3l75g] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    background: rgba(16, 185, 129, 0.18);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: #ECFDF5;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}

.pulse-dot[b-z76nb3l75g] {
    width: 8px;
    height: 8px;
    background: #10B981;
    border-radius: 50%;
    animation: pulse-b-z76nb3l75g 2s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
}

@keyframes pulse-b-z76nb3l75g {
    0%, 100% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.2);
        opacity: 0.8;
    }
}

.board-subtitle[b-z76nb3l75g] {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.2px;
}

/* Quick Stats */
.quick-stats[b-z76nb3l75g] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px 28px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 18px;
    width: fit-content;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.stat-item[b-z76nb3l75g] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stat-item i[b-z76nb3l75g] {
    font-size: 24px;
    color: white;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.stat-details[b-z76nb3l75g] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.stat-value[b-z76nb3l75g] {
    font-size: 20px;
    font-weight: 800;
    color: white;
    line-height: 1.2;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.stat-label[b-z76nb3l75g] {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.stat-divider[b-z76nb3l75g] {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.header-content[b-z76nb3l75g] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --- Header Links Styling --- */
.breadcrumbs[b-z76nb3l75g] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 500;
}

/* ===== Team Navigation Below Header ===== */
.team-nav-below[b-z76nb3l75g] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 13px;
    font-weight: 500;
}

    .team-nav-below .nav-link-item[b-z76nb3l75g] {
        color: #64748B;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border-radius: 8px;
        transition: all 0.2s ease;
    }

        .team-nav-below .nav-link-item:hover[b-z76nb3l75g] {
            color: #4318FF;
            background: #EEF2FF;
        }

    .team-nav-below .active-link[b-z76nb3l75g] {
        color: #4318FF;
        font-weight: 700;
        background: #EEF2FF;
    }

    .team-nav-below .sep[b-z76nb3l75g] {
        color: #CBD5E1;
    }


.nav-link-item[b-z76nb3l75g] {
    color: #94A3B8; /* لون رمادي هادي */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    padding: 4px 8px;
    border-radius: 6px;
}

    .nav-link-item:hover[b-z76nb3l75g] {
        color: #4318FF; /* أزرق عند التحويم */
        background: #EEF2FF;
    }

    .nav-link-item.active-link[b-z76nb3l75g] {
        color: #4318FF; /* لون مميز لرابط الداشبورد لأنه مهم */
        font-weight: 600;
    }

    .nav-link-item i[b-z76nb3l75g] {
        font-size: 14px;
    }



.breadcrumbs .sep[b-z76nb3l75g] {
    color: #CBD5E1;
}

.breadcrumbs a[b-z76nb3l75g] {
    color: #6366F1;
    text-decoration: none;
    transition: 0.2s;
}

    .breadcrumbs a:hover[b-z76nb3l75g] {
        color: #4F46E5;
        text-decoration: underline;
    }

.breadcrumbs .sep[b-z76nb3l75g] {
    margin: 0 8px;
    color: #CBD5E1;
}

.breadcrumbs .current[b-z76nb3l75g] {
    color: #64748B;
}

.title-area[b-z76nb3l75g] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-title[b-z76nb3l75g] {
    font-size: 32px;
    font-weight: 800;
    color: #1E293B;
    margin: 0;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

    .page-title .hash[b-z76nb3l75g] {
        color: #CBD5E1;
        font-weight: 400;
    }

.status-badge[b-z76nb3l75g] {
    font-size: 12px;
    font-weight: 600;
    color: #10B981;
    background: #ECFDF5;
    padding: 4px 10px;
    border-radius: 20px;
}

.sub-text[b-z76nb3l75g] {
    font-size: 14px;
    color: #64748B;
    margin: 0;
}

/* =========================================
   🎯 RIGHT SECTION - PROFESSIONAL ACTIONS
   ========================================= */

.header-right-pro[b-z76nb3l75g] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}

.header-actions-pro[b-z76nb3l75g] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

/* =========================================
   🔒 BOARD HEADER ACTIONS - ISOLATED SCOPE
   Prevents CSS conflicts with global styles
   ========================================= */

.board-header-pro .header-actions-pro[b-z76nb3l75g] {
    /* Reset any inherited styles */
    all: unset;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important; /* Allow wrapping on smaller screens */
}

/* =========================================
   📋 SECONDARY ACTION BUTTONS (Team & Dashboard)
   High specificity to override any conflicts
   ========================================= */

.board-header-pro .header-actions-pro .btn-secondary-action[b-z76nb3l75g] {
    /* Reset */
    all: unset;
    box-sizing: border-box !important;
    
    /* Display & Layout */
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    
    /* Sizing */
    padding: 11px 22px !important;
    min-height: 44px !important;
    
    /* Background & Colors - PURE WHITE */
    background: #FFFFFF !important;
    color: #4F46E5 !important;
    
    /* Border - Clearer White Border */
    border: 2px solid #FFFFFF !important;
    border-radius: 13px !important;
    
    /* Typography */
    font-family: inherit !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    
    /* Effects - Same Shadow as Create Task */
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4),
                0 2px 8px rgba(79, 70, 229, 0.15) !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* Visibility - CRITICAL */
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    z-index: 10 !important;
}

/* Secondary Button Icon Container */
.board-header-pro .header-actions-pro .btn-secondary-action .btn-action-icon[b-z76nb3l75g] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    background: transparent !important;
}

/* Secondary Button Icon */
.board-header-pro .header-actions-pro .btn-secondary-action .btn-action-icon i[b-z76nb3l75g] {
    font-size: 16px !important;
    color: #4F46E5 !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Secondary Button Text Label */
.board-header-pro .header-actions-pro .btn-secondary-action .btn-action-text[b-z76nb3l75g] {
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    color: #4F46E5 !important;
    transition: all 0.3s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Secondary Button Hover State */
.board-header-pro .header-actions-pro .btn-secondary-action:hover[b-z76nb3l75g] {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 32px rgba(255, 255, 255, 0.55),
                0 4px 12px rgba(79, 70, 229, 0.25) !important;
    background: #FEFEFE !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
}

.board-header-pro .header-actions-pro .btn-secondary-action:hover .btn-action-icon i[b-z76nb3l75g] {
    transform: scale(1.15) !important;
    color: #3730A3 !important;
}

.board-header-pro .header-actions-pro .btn-secondary-action:hover .btn-action-text[b-z76nb3l75g] {
    letter-spacing: 0.5px !important;
    color: #3730A3 !important;
}

/* Secondary Button Active State */
.board-header-pro .header-actions-pro .btn-secondary-action:active[b-z76nb3l75g] {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3) !important;
}

/* Secondary Button Focus State */
.board-header-pro .header-actions-pro .btn-secondary-action:focus[b-z76nb3l75g] {
    outline: 3px solid rgba(255, 255, 255, 0.5) !important;
    outline-offset: 2px !important;
}

/* =========================================
   ⭐ PRIMARY ACTION BUTTON (Create Task)
   High specificity to override any conflicts
   ========================================= */

.board-header-pro .header-actions-pro .btn-primary-action[b-z76nb3l75g] {
    /* Reset */
    all: unset;
    box-sizing: border-box !important;
    
    /* Display & Layout */
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    
    /* Sizing */
    padding: 11px 22px !important;
    min-height: 44px !important;
    
    /* Background & Colors */
    background: #FFFFFF !important;
    color: #4F46E5 !important;
    
    /* Border */
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 13px !important;
    
    /* Typography */
    font-family: inherit !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    
    /* Effects */
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4),
                0 2px 8px rgba(79, 70, 229, 0.15) !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
    
    /* Visibility - CRITICAL */
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
}

/* Primary Icon Wrapper - CRITICAL FIX for icon visibility */
.board-header-pro .header-actions-pro .btn-primary-action .btn-action-icon-primary[b-z76nb3l75g] {
    width: 26px !important;
    height: 26px !important;
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 12px rgba(79, 70, 229, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Primary Icon - CRITICAL: Override the secondary icon color */
.board-header-pro .header-actions-pro .btn-primary-action .btn-action-icon-primary i[b-z76nb3l75g] {
    color: #FFFFFF !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Primary Button Text */
.board-header-pro .header-actions-pro .btn-primary-action .btn-action-text[b-z76nb3l75g] {
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    color: #4F46E5 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Primary Button Hover Effect */
.board-header-pro .header-actions-pro .btn-primary-action:hover[b-z76nb3l75g] {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 32px rgba(255, 255, 255, 0.55),
                0 4px 12px rgba(79, 70, 229, 0.25) !important;
    background: #FEFEFE !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
}

.board-header-pro .header-actions-pro .btn-primary-action:hover .btn-action-icon-primary[b-z76nb3l75g] {
    transform: rotate(90deg) scale(1.1) !important;
    box-shadow: 0 3px 15px rgba(79, 70, 229, 0.7) !important;
}

.board-header-pro .header-actions-pro .btn-primary-action:hover .btn-action-text[b-z76nb3l75g] {
    letter-spacing: 0.5px !important;
    color: #3730A3 !important;
}

/* Primary Button Active State */
.board-header-pro .header-actions-pro .btn-primary-action:active[b-z76nb3l75g] {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(255, 255, 255, 0.35) !important;
}

/* Primary Button Focus State */
.board-header-pro .header-actions-pro .btn-primary-action:focus[b-z76nb3l75g] {
    outline: 3px solid rgba(255, 255, 255, 0.5) !important;
    outline-offset: 2px !important;
}

/* Glow Effect */
.board-header-pro .header-actions-pro .btn-primary-action .btn-glow[b-z76nb3l75g] {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100% !important;
    height: 100% !important;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.2) 0%, transparent 70%) !important;
    transform: translate(-50%, -50%) scale(0) !important;
    opacity: 0 !important;
    transition: all 0.5s ease !important;
    pointer-events: none !important;
}

.board-header-pro .header-actions-pro .btn-primary-action:hover .btn-glow[b-z76nb3l75g] {
    transform: translate(-50%, -50%) scale(1.5) !important;
    opacity: 1 !important;
}

/* =========================================
   ↩️ BACK BUTTON - TERTIARY ACTION
   High specificity to override any conflicts
   ========================================= */

.board-header-pro .header-actions-pro .btn-back-action[b-z76nb3l75g] {
    /* Reset */
    all: unset;
    box-sizing: border-box !important;
    
    /* Display & Layout */
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Sizing */
    width: 48px !important;
    height: 48px !important;
    flex-shrink: 0 !important;
    
    /* Background & Colors */
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(20px) !important;
    color: white !important;
    
    /* Border */
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 12px !important;
    
    /* Typography */
    text-decoration: none !important;
    font-size: 20px !important;
    
    /* Effects */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* Visibility - CRITICAL */
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
}

/* Back Button Icon Styling */
.board-header-pro .header-actions-pro .btn-back-action i[b-z76nb3l75g] {
    color: white !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Back Button Hover State */
.board-header-pro .header-actions-pro .btn-back-action:hover[b-z76nb3l75g] {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    transform: translateX(-4px) translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

.board-header-pro .header-actions-pro .btn-back-action:hover i[b-z76nb3l75g] {
    transform: translateX(-2px) !important;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.45)) !important;
}

/* Back Button Active State */
.board-header-pro .header-actions-pro .btn-back-action:active[b-z76nb3l75g] {
    transform: translateX(-2px) translateY(0) !important;
    background: rgba(255, 255, 255, 0.32) !important;
}

/* Back Button Focus State */
.board-header-pro .header-actions-pro .btn-back-action:focus[b-z76nb3l75g] {
    outline: 3px solid rgba(255, 255, 255, 0.5) !important;
    outline-offset: 2px !important;
}

/* Back Button Tooltip */
.board-header-pro .header-actions-pro .btn-back-action[b-z76nb3l75g]::after {
    content: attr(title);
    position: absolute !important;
    bottom: -40px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(5px) !important;
    padding: 6px 12px !important;
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    z-index: 1000 !important;
}

/* =========================================
   📋 FALLBACK STYLES (for backward compatibility)
   ========================================= */

.btn-secondary-action[b-z76nb3l75g] {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    background: #FFFFFF !important;
    color: #4F46E5 !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 13px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4) !important;
    cursor: pointer;
    min-height: 44px;
    white-space: nowrap;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Icon Container - Fallback */
.btn-action-icon[b-z76nb3l75g] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.btn-secondary-action .btn-action-icon i[b-z76nb3l75g] {
    font-size: 20px;
    color: #4F46E5 !important;
    font-weight: 700;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1 !important;
}

/* Text Label - Fallback */
.btn-action-text[b-z76nb3l75g] {
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
    color: #4F46E5 !important;
    transition: all 0.3s ease;
    opacity: 1 !important;
}

/* Hover State - Fallback */
.btn-secondary-action:hover[b-z76nb3l75g] {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(255, 255, 255, 0.55) !important;
    background: #FEFEFE !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

.btn-secondary-action:hover .btn-action-icon i[b-z76nb3l75g] {
    transform: scale(1.15);
}

.btn-secondary-action:hover .btn-action-text[b-z76nb3l75g] {
    letter-spacing: 0.5px;
}

/* Active State - Fallback */
.btn-secondary-action:active[b-z76nb3l75g] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3) !important;
}

/* Focus State - Fallback */
.btn-secondary-action:focus[b-z76nb3l75g] {
    outline: 3px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* =========================================
   ⭐ PRIMARY ACTION BUTTON - Fallback
   ========================================= */

.btn-primary-action[b-z76nb3l75g] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    background: white;
    color: #4F46E5;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 13px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4);
    min-height: 44px;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hover Effect - Fallback */
.btn-primary-action:hover[b-z76nb3l75g] {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(255, 255, 255, 0.55);
    background: #FEFEFE;
    border-color: rgba(255, 255, 255, 0.6);
}

/* Active State - Fallback */
.btn-primary-action:active[b-z76nb3l75g] {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(255, 255, 255, 0.35);
}

/* Focus State - Fallback */
.btn-primary-action:focus[b-z76nb3l75g] {
    outline: 3px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* Primary Icon Wrapper - Fallback */
.btn-action-icon-primary[b-z76nb3l75g] {
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%) !important;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(79, 70, 229, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1 !important;
}

/* CRITICAL FIX: Primary icon must be white, not purple */
.btn-action-icon-primary i[b-z76nb3l75g],
.btn-primary-action .btn-action-icon-primary i[b-z76nb3l75g],
.btn-action-icon.btn-action-icon-primary i[b-z76nb3l75g] {
    color: #FFFFFF !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.btn-primary-action:hover .btn-action-icon-primary[b-z76nb3l75g] {
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 3px 15px rgba(79, 70, 229, 0.7);
}

/* Primary Button Text - Fallback */
.btn-primary-action .btn-action-text[b-z76nb3l75g] {
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #4F46E5;
    opacity: 1 !important;
}

.btn-primary-action:hover .btn-action-text[b-z76nb3l75g] {
    letter-spacing: 0.5px;
}

/* Glow Effect - Fallback */
.btn-glow[b-z76nb3l75g] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.2) 0%, transparent 70%);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: all 0.5s ease;
    pointer-events: none;
}

.btn-primary-action:hover .btn-glow[b-z76nb3l75g] {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 1;
}

/* =========================================
   ↩️ BACK BUTTON - Fallback
   ========================================= */

.btn-back-action[b-z76nb3l75g] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    color: white;
    text-decoration: none;
    font-size: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Back Icon Styling - Fallback */
.btn-back-action i[b-z76nb3l75g] {
    color: white !important;
    font-weight: 700;
    font-size: 20px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1 !important;
}

/* Hover State - Fallback */
.btn-back-action:hover[b-z76nb3l75g] {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.45);
    transform: translateX(-4px) translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.btn-back-action:hover i[b-z76nb3l75g] {
    transform: translateX(-2px);
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.45));
}

/* Active State - Fallback */
.btn-back-action:active[b-z76nb3l75g] {
    transform: translateX(-2px) translateY(0);
    background: rgba(255, 255, 255, 0.32);
}

/* Focus State - Fallback */
.btn-back-action:focus[b-z76nb3l75g] {
    outline: 3px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* Tooltip - Fallback */
.btn-back-action[b-z76nb3l75g]::after {
    content: attr(title);
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    padding: 6px 12px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    color: white;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

    .btn-back-action:hover[b-z76nb3l75g]::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

/* Scoped tooltip hover */
.board-header-pro .header-actions-pro .btn-back-action:hover[b-z76nb3l75g]::after {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* =========================================
   📱 RESPONSIVE STYLES FOR HEADER ACTIONS
   ========================================= */

@media (max-width: 768px) {
    .board-header-pro .header-actions-pro[b-z76nb3l75g] {
        gap: 8px !important;
    }
    
    .board-header-pro .header-actions-pro .btn-secondary-action[b-z76nb3l75g],
    .board-header-pro .header-actions-pro .btn-primary-action[b-z76nb3l75g] {
        padding: 8px 14px !important;
        min-height: 40px !important;
        font-size: 13px !important;
    }
    
    .board-header-pro .header-actions-pro .btn-secondary-action .btn-action-text[b-z76nb3l75g],
    .board-header-pro .header-actions-pro .btn-primary-action .btn-action-text[b-z76nb3l75g] {
        display: none !important;
    }
    
    .board-header-pro .header-actions-pro .btn-back-action[b-z76nb3l75g] {
        width: 40px !important;
        height: 40px !important;
    }
}

@media (max-width: 480px) {
    .board-header-pro .header-actions-pro[b-z76nb3l75g] {
        gap: 6px !important;
    }
    
    .board-header-pro .header-actions-pro .btn-secondary-action[b-z76nb3l75g],
    .board-header-pro .header-actions-pro .btn-primary-action[b-z76nb3l75g] {
        padding: 6px 12px !important;
        min-height: 36px !important;
    }
    
    .board-header-pro .header-actions-pro .btn-action-icon-primary[b-z76nb3l75g] {
        width: 22px !important;
        height: 22px !important;
    }
    
    .board-header-pro .header-actions-pro .btn-back-action[b-z76nb3l75g] {
        width: 36px !important;
        height: 36px !important;
    }
}

/* =========================================
   🎯 BOARD CONTROLS - REMOVED
   Buttons moved to header-actions-pro
   ========================================= */

/* OLD CODE REMOVED - Buttons moved to header-actions-pro */

/* Header Right Actions (OLD) */
.header-actions[b-z76nb3l75g] {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Buttons */
.btn-back[b-z76nb3l75g] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    height: 48px;
    border-radius: 12px;
    background: transparent;
    color: #64748B;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

    .btn-back:hover[b-z76nb3l75g] {
        color: #4318FF;
        background: #EEF2FF;
    }

/* 🔥 NEW CREATE BUTTON STYLE */
.btn-create-task[b-z76nb3l75g] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    height: 48px;
    border-radius: 12px;
    background: #4318FF;
    color: white;
    font-weight: 700;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(67, 24, 255, 0.25);
}

    .btn-create-task:hover[b-z76nb3l75g] {
        background: #3311CC;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(67, 24, 255, 0.35);
    }

/* --- GLASS MODAL STYLING --- */
.glass-modal[b-z76nb3l75g] {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 24px;
    border: 1px solid rgba(241, 245, 249, 1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

.modal-header .btn-close[b-z76nb3l75g] {
    background-color: #F1F5F9;
    border-radius: 50%;
    opacity: 0.8;
}

/* Modal Grid */
.widget-grid-modal[b-z76nb3l75g] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.w-group[b-z76nb3l75g] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .w-group label[b-z76nb3l75g] {
        font-size: 11px;
        font-weight: 700;
        color: #94A3B8;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin-left: 4px;
    }

/* Inputs */
.modern-input[b-z76nb3l75g] {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    height: 52px;
    padding: 0 20px;
    font-size: 14px;
    color: #334155;
    outline: none;
    width: 100%;
    transition: all 0.2s;
}

    .modern-input:focus[b-z76nb3l75g] {
        background: #FFFFFF;
        border-color: #6366F1;
        box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
    }

.modern-select[b-z76nb3l75g] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    cursor: pointer;
}

.date-wrap[b-z76nb3l75g] {
    position: relative;
}

    .date-wrap i[b-z76nb3l75g] {
        position: absolute;
        left: 18px;
        top: 50%;
        transform: translateY(-50%);
        color: #6366F1;
        font-size: 18px;
    }

.date-input[b-z76nb3l75g] {
    padding-left: 48px;
    color: #64748B;
}

    .date-input:focus[b-z76nb3l75g], .date-input:valid[b-z76nb3l75g] {
        color: #334155;
    }

.modern-btn[b-z76nb3l75g] {
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    color: white;
    border: none;
    border-radius: 14px;
    height: 52px;
    padding: 0 32px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

    .modern-btn:hover[b-z76nb3l75g] {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
    }

/* --- Progress Section --- */
.progress-section[b-z76nb3l75g] {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    border: 1px solid #F1F5F9;
}

.prog-info[b-z76nb3l75g] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    align-items: center;
}

    .prog-info h4[b-z76nb3l75g] {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: #334155;
    }

.prog-badge[b-z76nb3l75g] {
    background: #EEF2FF;
    color: #6366F1;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.prog-track-container[b-z76nb3l75g] {
    height: 8px;
    background: #F1F5F9;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 24px;
    position: relative;
}

.prog-track[b-z76nb3l75g] {
    height: 100%;
    width: 100%;
    position: relative;
    background: transparent;
}

.prog-fill[b-z76nb3l75g] {
    height: 100%;
    width: 0%;
    min-width: 0;
    background: linear-gradient(90deg, #6366F1 0%, #818CF8 100%);
    background-color: #6366F1; /* Fallback solid color */
    border-radius: 10px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
    opacity: 1;
    box-sizing: border-box;
    /* Ensure inline styles override CSS */
    max-width: 100%;
}

.prog-stats-grid[b-z76nb3l75g] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.stat-card[b-z76nb3l75g] {
    background: #F8FAFC;
    padding: 16px;
    border-radius: 16px;
    text-align: center;
    border: 1px solid #E2E8F0;
    transition: transform 0.2s;
}

    .stat-card:hover[b-z76nb3l75g] {
        transform: translateY(-3px);
        border-color: #CBD5E1;
    }

    .stat-card .lbl[b-z76nb3l75g] {
        display: block;
        font-size: 12px;
        color: #64748B;
        margin-bottom: 4px;
    }

    .stat-card b[b-z76nb3l75g] {
        font-size: 24px;
        color: #1E293B;
        font-weight: 800;
    }

    .stat-card .dot[b-z76nb3l75g] {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 6px;
    }

.dot.todo[b-z76nb3l75g] {
    background: #E2E8F0;
}

.dot.doing[b-z76nb3l75g] {
    background: #6366F1;
}

.dot.done[b-z76nb3l75g] {
    background: #10B981;
}

/* =========================================
   📋 PROFESSIONAL KANBAN BOARD
   ========================================= */

.kanban-board[b-z76nb3l75g] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 8px; /* Reduced since board-controls has margin-bottom */
}

/* Column Styling - Modern Glass Effect */
.kanban-col[b-z76nb3l75g] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.8) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    min-height: 600px;
    border: 1px solid rgba(226, 232, 240, 0.6);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: visible; /* ✅ السماح للقوائم بالظهور خارج حدود العمود */
}

    /* Column Hover Effect */
    .kanban-col:hover[b-z76nb3l75g] {
        box-shadow: 0 15px 50px -15px rgba(0, 0, 0, 0.12);
        border-color: rgba(226, 232, 240, 0.8);
    }

    /* Subtle Background Pattern */
    .kanban-col[b-z76nb3l75g]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, transparent, currentColor, transparent);
        opacity: 0.15;
    }

    /* Color Accent for Each Column */
    .kanban-col[data-status="ToDo"][b-z76nb3l75g]::before {
        color: #F59E0B;
    }

    .kanban-col[data-status="InProgress"][b-z76nb3l75g]::before {
        color: #6366F1;
    }

    .kanban-col[data-status="Done"][b-z76nb3l75g]::before {
        color: #10B981;
    }

/* Column Header */
.col-header[b-z76nb3l75g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 12px 16px 12px;
    margin-bottom: 16px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.04);
    position: relative;
}

.col-title-wrap[b-z76nb3l75g] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Status Dot - Enhanced */
.status-dot[b-z76nb3l75g] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
    animation: dotPulse-b-z76nb3l75g 2s ease-in-out infinite;
}

@keyframes dotPulse-b-z76nb3l75g {
    0%, 100% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.dot-todo[b-z76nb3l75g] {
    background: #F59E0B;
}

.dot-doing[b-z76nb3l75g] {
    background: #6366F1;
}

.dot-done[b-z76nb3l75g] {
    background: #10B981;
}

/* Column Name */
.col-name[b-z76nb3l75g] {
    font-weight: 800;
    font-size: 16px;
    color: #1E293B;
    letter-spacing: -0.3px;
}

/* Column Count Badge */
.col-count[b-z76nb3l75g] {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 800;
    color: #475569;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(226, 232, 240, 0.6);
}

/* Column Body */
.col-body[b-z76nb3l75g] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 400px;
    position: relative;
    overflow: visible; /* ✅ السماح للقوائم بالظهور خارج الحدود */
}

/* Empty State - Enhanced */
.empty-state[b-z76nb3l75g] {
    text-align: center;
    color: #94A3B8;
    padding: 60px 20px;
    border: 2px dashed rgba(226, 232, 240, 0.8);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.5) 0%, rgba(241, 245, 249, 0.3) 100%);
    transition: all 0.3s ease;
}

    .empty-state i[b-z76nb3l75g] {
        font-size: 48px;
        margin-bottom: 12px;
        display: block;
        opacity: 0.3;
    }

    .empty-state:hover[b-z76nb3l75g] {
        border-color: rgba(148, 163, 184, 0.4);
        background: rgba(248, 250, 252, 0.7);
    }

/* =========================================
   🎴 PROFESSIONAL TASK CARDS
   ========================================= */

.kanban-task-card[b-z76nb3l75g] {
    background: linear-gradient(135deg, #FFFFFF 0%, #FEFEFE 100%);
    border: 1px solid rgba(226, 232, 240, 0.6);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    cursor: grab;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
    z-index: 1;
}

    /* Hover Effect */
    .kanban-task-card:hover[b-z76nb3l75g] {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        transform: translateY(-4px);
        border-color: rgba(148, 163, 184, 0.4);
    }

    /* Active Card (Dropdown Open) */
    .kanban-task-card.card-active[b-z76nb3l75g] {
        z-index: 9998 !important; /* Just below dropdown, but above all other cards */
        position: relative;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
        transform: translateY(-2px);
    }

    /* Dragging State */
    .kanban-task-card[style*="opacity: 0.4"][b-z76nb3l75g] {
        transform: scale(0.95);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }

/* Status Indicator - Left Border with Gradient */
.kanban-task-card[data-status="ToDo"][b-z76nb3l75g] {
    border-left: 4px solid #F59E0B;
    background: linear-gradient(135deg, #FFFBEB 0%, #FFFFFF 20%);
}

    .kanban-task-card[data-status="ToDo"]:hover[b-z76nb3l75g] {
        border-left-color: #D97706;
    }

.kanban-task-card[data-status="InProgress"][b-z76nb3l75g] {
    border-left: 4px solid #6366F1;
    background: linear-gradient(135deg, #EEF2FF 0%, #FFFFFF 20%);
}

    .kanban-task-card[data-status="InProgress"]:hover[b-z76nb3l75g] {
        border-left-color: #4F46E5;
    }

.kanban-task-card[data-status="Done"][b-z76nb3l75g] {
    border-left: 4px solid #10B981;
    background: linear-gradient(135deg, #ECFDF5 0%, #FFFFFF 20%);
}

    .kanban-task-card[data-status="Done"]:hover[b-z76nb3l75g] {
        border-left-color: #059669;
    }

/* Drag Over Column State */
.kanban-col.drag-over[b-z76nb3l75g] {
    background: linear-gradient(135deg, rgba(238, 242, 255, 0.9) 0%, rgba(224, 231, 255, 0.8) 100%);
    border: 2px dashed #6366F1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

/* Task Card Header */
.task-card-header[b-z76nb3l75g] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 10px;
}

.task-card-title-wrap[b-z76nb3l75g] {
    flex: 1;
    min-width: 0;
}

.task-card-title[b-z76nb3l75g] {
    font-size: 15px;
    font-weight: 700;
    color: #0F172A;
    margin: 0;
    line-height: 1.5;
    word-wrap: break-word;
    direction: rtl;
    text-align: right;
    unicode-bidi: plaintext;
    letter-spacing: -0.2px;
}

/* Task Card Menu (Three Dots - Left side for RTL) */
.task-card-menu[b-z76nb3l75g] {
    position: relative;
    flex-shrink: 0;
}

.task-card-menu-btn[b-z76nb3l75g] {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    line-height: 1;
    position: relative;
}

    .task-card-menu-btn:hover[b-z76nb3l75g] {
        background: #f1f5f9;
        color: #475569;
        transform: scale(1.1);
    }

    .task-card-menu-btn:active[b-z76nb3l75g],
    .task-card-menu-btn.active[b-z76nb3l75g] {
        background: #e0e7ff;
        color: #4f46e5;
        transform: scale(0.95);
    }

    .task-card-menu-btn.active[b-z76nb3l75g]::after {
        content: '';
        position: absolute;
        inset: -2px;
        border: 2px solid #4f46e5;
        border-radius: 6px;
        animation: pulseRing-b-z76nb3l75g 1.5s ease-out infinite;
    }

@keyframes pulseRing-b-z76nb3l75g {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.3);
    }
}

/* Dropdown Menu (Fixed Position - Above Everything) */
.task-card-dropdown[b-z76nb3l75g] {
    position: fixed !important; /* 🔥 مهم جدًا - فوق كل شيء */
    min-width: 160px;
    max-width: 200px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2), 
                0 4px 12px rgba(0,0,0,0.15),
                0 0 0 1px rgba(0,0,0,0.05);
    padding: 8px;
    z-index: 10000 !important; /* أعلى من أي Column أو Modal */
    display: none;
    backdrop-filter: blur(10px);
    animation: dropdownFadeIn-b-z76nb3l75g 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
}

@keyframes dropdownFadeIn-b-z76nb3l75g {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.task-card-dropdown-item[b-z76nb3l75g] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    text-decoration: none;
    border-radius: 7px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    background: transparent;
    width: 100%;
    text-align: right;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .task-card-dropdown-item[b-z76nb3l75g]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: currentColor;
        transform: scaleY(0);
        transition: transform 0.2s ease;
    }

    .task-card-dropdown-item:hover[b-z76nb3l75g] {
        background: #f1f5f9;
        color: #1e293b;
        transform: translateX(-2px);
    }

    .task-card-dropdown-item:hover[b-z76nb3l75g]::before {
        transform: scaleY(1);
    }

    .task-card-dropdown-item:active[b-z76nb3l75g] {
        transform: translateX(-2px) scale(0.98);
    }

    .task-card-dropdown-item i[b-z76nb3l75g] {
        font-size: 15px;
        width: 18px;
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }

    .task-card-dropdown-item:hover i[b-z76nb3l75g] {
        transform: scale(1.1);
    }

.task-card-dropdown-delete[b-z76nb3l75g] {
    color: #dc2626;
}

    .task-card-dropdown-delete:hover[b-z76nb3l75g] {
        background: #fef2f2;
        color: #dc2626;
    }

.task-card-dropdown-divider[b-z76nb3l75g] {
    margin: 6px 0;
    border: none;
    border-top: 1px solid #e2e8f0;
}

.task-card-delete-form[b-z76nb3l75g] {
    margin: 0;
    padding: 0;
}

/* Task Card Description */
.task-card-desc[b-z76nb3l75g] {
    font-size: 13px;
    color: #64748B;
    margin: 12px 0;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-wrap: break-word;
    direction: rtl;
    text-align: right;
    unicode-bidi: plaintext;
}

/* Task Card Footer */
.task-card-footer[b-z76nb3l75g] {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(241, 245, 249, 0.8);
}

.task-card-meta[b-z76nb3l75g] {
    display: flex;
    align-items: center;
    gap: 10px; /* Increased spacing between items */
    flex-wrap: wrap;
    direction: ltr; /* Meta items flow left to right */
}

/* Task Card Meta Items (Attachments, Dates) - Interactive Pills */
.task-card-meta-item[b-z76nb3l75g] {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f1f5f9; /* Light gray background */
    border: 1px solid #e2e8f0;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

    .task-card-meta-item:hover[b-z76nb3l75g] {
        background: #e2e8f0; /* Darker gray on hover */
        color: #1e293b;
        border-color: #cbd5e1;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    }

    .task-card-meta-item i[b-z76nb3l75g] {
        font-size: 13px;
        color: #64748b;
        transition: color 0.2s;
    }

    .task-card-meta-item:hover i[b-z76nb3l75g] {
        color: #4f46e5; /* Blue icon on hover */
    }

.task-card-date[b-z76nb3l75g] {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: default;
}

    .task-card-date.overdue[b-z76nb3l75g] {
        background: #fef2f2;
        color: #ef4444;
        border-color: #fecaca;
    }

        .task-card-date.overdue i[b-z76nb3l75g] {
            color: #ef4444;
        }

    .task-card-date.done[b-z76nb3l75g] {
        background: #ecfdf5;
        color: #10b981;
        border-color: #a7f3d0;
    }

        .task-card-date.done i[b-z76nb3l75g] {
            color: #10b981;
        }

.task-card-id[b-z76nb3l75g] {
    font-size: 10px;
    font-weight: 500;
    color: #cbd5e1;
    opacity: 0.7;
    margin-left: auto;
    padding: 4px 6px;
    background: #f8fafc;
    border-radius: 4px;
}

.attach-count[b-z76nb3l75g] {
    font-weight: 600;
    font-size: 12px;
    color: #64748b;
}

/* =========================================
   📋 TASK DETAILS MODAL - GENERAL
   ========================================= */
#attachmentsModal .modal-body[b-z76nb3l75g] {
    padding: 24px;
    overflow: hidden; /* Prevent content overflow */
}

#attachmentsModal .tab-content[b-z76nb3l75g] {
    margin-top: 0;
    overflow: visible;
}

#attachmentsModal .tab-pane[b-z76nb3l75g] {
    overflow: visible;
}

/* =========================================
   💬 TASK DETAILS MODAL - COMMENTS (Chat UI)
   ========================================= */

/* COMMENTS TAB LAYOUT FIX */
.task-comments-layout[b-z76nb3l75g] {
    display: flex;
    flex-direction: column;
    height: 500px;
}

/* Scrollable comments */
.task-comments-container[b-z76nb3l75g] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    padding-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

/* Input always visible */
.task-comment-input-wrapper[b-z76nb3l75g] {
    position: relative;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    padding: 12px 16px;
    flex-shrink: 0;
    z-index: 10;
}

.task-comments-empty[b-z76nb3l75g] {
    text-align: center;
    color: #94a3b8;
    padding: 40px 20px;
    font-size: 14px;
}

.task-comment-item[b-z76nb3l75g] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    width: 100%;
    box-sizing: border-box;
}

.task-comment-item.msg-right[b-z76nb3l75g] {
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: row-reverse;
    margin-left: auto;
    max-width: 100%;
}

.task-comment-item.msg-left[b-z76nb3l75g] {
    justify-content: flex-start;
    align-items: flex-start;
    margin-right: auto;
    max-width: 100%;
}

.task-comment-avatar[b-z76nb3l75g] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.task-comment-avatar-img[b-z76nb3l75g] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.task-comment-avatar-initials[b-z76nb3l75g] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    color: #6366f1;
    background: #eef2ff;
}

.task-comment-content[b-z76nb3l75g] {
    flex: 1;
    max-width: 75%;
    min-width: 0; /* Prevent overflow */
}

.task-comment-author[b-z76nb3l75g] {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 6px;
    padding-left: 4px;
}

.task-comment-bubble[b-z76nb3l75g] {
    padding: 10px 14px;
    border-radius: 18px;
    max-width: 75%;
    word-wrap: break-word;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    margin: 0;
}

.msg-bubble-right[b-z76nb3l75g] {
    background: #3b82f6;
    color: #ffffff;
    border-bottom-right-radius: 4px;
    margin-left: auto;
    margin-right: 0;
}

.msg-bubble-left[b-z76nb3l75g] {
    background: #f1f5f9;
    color: #1e293b;
    border-bottom-left-radius: 4px;
    margin-left: 0;
    margin-right: auto;
}

.task-comment-text[b-z76nb3l75g] {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 4px;
}

.task-comment-time[b-z76nb3l75g] {
    font-size: 11px;
    opacity: 0.7;
    margin-top: 4px;
}


.task-comment-input-container[b-z76nb3l75g] {
    display: flex;
    gap: 8px;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 4px 4px 4px 16px;
    transition: all 0.2s;
}

.task-comment-input-container:focus-within[b-z76nb3l75g] {
    border-color: #3b82f6;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.task-comment-input[b-z76nb3l75g] {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: #1e293b;
    padding: 8px 0;
}

.task-comment-input[b-z76nb3l75g]::placeholder {
    color: #94a3b8;
}

.task-comment-send-btn[b-z76nb3l75g] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #3b82f6;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.task-comment-send-btn:hover[b-z76nb3l75g] {
    background: #2563eb;
    transform: scale(1.05);
}

.task-comment-send-btn:active[b-z76nb3l75g] {
    transform: scale(0.95);
}

.task-comment-send-btn i[b-z76nb3l75g] {
    font-size: 16px;
}

/* =========================================
   📎 TASK DETAILS MODAL - ATTACHMENTS (Grid)
   ========================================= */
.task-attachments-upload-area[b-z76nb3l75g] {
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 24px;
    margin: 0 0 20px 0;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.task-attachments-upload-area:hover[b-z76nb3l75g] {
    border-color: #3b82f6;
    background: #f1f5f9;
}

.task-attachments-upload-area.drag-over[b-z76nb3l75g] {
    border-color: #3b82f6;
    background: #e0f2fe;
    border-style: solid;
    transform: scale(1.02);
}

/* =========================================
   📤 READY FILE DISPLAY (NEW PROFESSIONAL DESIGN)
   ========================================= */
.ready-file-preview[b-z76nb3l75g] {
    margin-top: 0;
    width: 100%;
    animation: fadeInUp-b-z76nb3l75g 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInUp-b-z76nb3l75g {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ready-file-card[b-z76nb3l75g] {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    gap: 16px;
    transition: all 0.2s ease;
}

    /* Accent border line on the left */
    .ready-file-card[b-z76nb3l75g]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: #3B82F6; /* Blue Accent */
    }

    .ready-file-card:hover[b-z76nb3l75g] {
        box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.12);
        border-color: #CBD5E1;
        transform: translateY(-1px);
    }

/* Icon Container */
.ready-card-icon[b-z76nb3l75g] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EFF6FF; /* Light Blue Bg */
    border-radius: 12px;
    font-size: 24px;
    color: #3B82F6;
    flex-shrink: 0;
}

/* Content Info */
.ready-card-info[b-z76nb3l75g] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0; /* Prevents text overflow issues */
}

.ready-card-name[b-z76nb3l75g] {
    font-size: 15px;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ready-card-meta[b-z76nb3l75g] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #64748B;
}

.ready-status-badge[b-z76nb3l75g] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ECFDF5;
    color: #059669;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 11px;
}

/* Remove Button */
.ready-card-remove[b-z76nb3l75g] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #94A3B8;
    cursor: pointer;
    transition: all 0.2s;
}

    .ready-card-remove:hover[b-z76nb3l75g] {
        background: #FEF2F2;
        color: #EF4444;
        border-color: #FEE2E2;
    }

    .ready-card-remove i[b-z76nb3l75g] {
        font-size: 18px;
    }

.ready-file-display[b-z76nb3l75g] {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
    border: 2px solid #10b981;
    border-radius: 12px;
    padding: 16px 18px;
    position: relative;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
    transition: all 0.3s ease;
    margin: 0 4px 4px 4px;
}

.ready-file-display:hover[b-z76nb3l75g] {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
    transform: translateY(-1px);
}

.ready-file-icon[b-z76nb3l75g] {
    font-size: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.1);
}

.ready-file-info[b-z76nb3l75g] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ready-file-name[b-z76nb3l75g] {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.ready-file-meta[b-z76nb3l75g] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #64748b;
    flex-wrap: wrap;
}

.ready-file-meta > span:not(.ready-badge-inline)[b-z76nb3l75g] {
    display: inline-flex;
    align-items: center;
    font-weight: 500;
}

.ready-badge-inline[b-z76nb3l75g] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
    position: relative;
    overflow: hidden;
}

.ready-badge-inline[b-z76nb3l75g]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        transparent 100%);
    animation: shimmer-b-z76nb3l75g 2s infinite;
}

@keyframes shimmer-b-z76nb3l75g {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.ready-file-remove-btn[b-z76nb3l75g] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #fecaca;
    background: #ffffff;
    color: #dc2626;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.1);
}

.ready-file-remove-btn:hover[b-z76nb3l75g] {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
}

.ready-file-remove-btn:active[b-z76nb3l75g] {
    transform: scale(0.95) rotate(90deg);
}

.ready-file-remove-btn i[b-z76nb3l75g] {
    font-size: 16px;
    font-weight: 700;
}

.upload-area-content[b-z76nb3l75g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
}

.task-attachments-upload-area:has(.ready-file-preview[style*="display: block"]) .upload-area-content[b-z76nb3l75g] {
    padding-bottom: 0;
    margin-bottom: 0;
}

.upload-icon[b-z76nb3l75g] {
    font-size: 32px;
    color: #94a3b8;
}

.upload-file-input[b-z76nb3l75g] {
    display: none;
}

.upload-label[b-z76nb3l75g] {
    font-size: 14px;
    color: #64748b;
    cursor: pointer;
    text-align: center;
}

.btn-upload-primary[b-z76nb3l75g] {
    background: #3b82f6;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.btn-upload-primary:hover[b-z76nb3l75g] {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

.task-attachments-grid[b-z76nb3l75g] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    padding: 8px 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Ensure each card is isolated */
.task-attachments-grid > .task-attachment-card[b-z76nb3l75g] {
    margin: 0;
    width: 100%;
}

.task-attachments-empty[b-z76nb3l75g] {
    text-align: center;
    color: #94a3b8;
    padding: 40px 20px;
    font-size: 14px;
}

.task-attachment-card[b-z76nb3l75g] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s;
    position: relative;
    height: 180px;
    min-height: 180px;
    max-height: 180px;
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate; /* Prevent overlapping */
}

.task-attachment-card:hover[b-z76nb3l75g] {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-2px);
    z-index: 1;
}

.task-attachment-icon[b-z76nb3l75g] {
    font-size: 48px;
    text-align: center;
    padding: 12px 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}

.task-attachment-info[b-z76nb3l75g] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.task-attachment-name[b-z76nb3l75g] {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 20px;
}

.task-attachment-meta[b-z76nb3l75g] {
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.task-attachment-actions[b-z76nb3l75g] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 8px;
    flex-shrink: 0;
}

.task-attachment-btn[b-z76nb3l75g] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.task-attachment-btn-view[b-z76nb3l75g] {
    background: #eef2ff;
    color: #3b82f6;
    border-color: #e0e7ff;
}

.task-attachment-btn-view:hover[b-z76nb3l75g] {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

.task-attachment-btn-download[b-z76nb3l75g] {
    background: #f0fdf4;
    color: #10b981;
    border-color: #dcfce7;
}

.task-attachment-btn-download:hover[b-z76nb3l75g] {
    background: #10b981;
    color: #ffffff;
    border-color: #10b981;
}

.task-attachment-btn i[b-z76nb3l75g] {
    font-size: 16px;
}

/* =========================================
   📤 PENDING UPLOAD STYLES
   ========================================= */
/* ملف جاهز للرفع (قبل الضغط على Upload) */
.task-attachment-ready[b-z76nb3l75g] {
    border-color: #10b981 !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
    position: relative;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}

.task-attachment-ready .task-attachment-icon[b-z76nb3l75g] {
    position: relative;
}

.ready-badge[b-z76nb3l75g] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #10b981;
    color: #ffffff;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

/* ملف قيد الرفع (بعد الضغط على Upload) */
.task-attachment-pending[b-z76nb3l75g] {
    opacity: 0.85;
    border-color: #3b82f6 !important;
    background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.task-attachment-pending[b-z76nb3l75g]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(59, 130, 246, 0.1) 50%, 
        transparent 100%);
    animation: shimmer-b-z76nb3l75g 2s infinite;
}

@keyframes shimmer-b-z76nb3l75g {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.task-attachment-pending .task-attachment-icon[b-z76nb3l75g] {
    position: relative;
}

.upload-spinner[b-z76nb3l75g] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.task-attachment-pending .task-attachment-icon i[b-z76nb3l75g] {
    opacity: 0.4;
}

.pending-badge[b-z76nb3l75g] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #3b82f6;
    color: #ffffff;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    animation: pulse-b-z76nb3l75g 1.5s ease-in-out infinite;
}

@keyframes pulse-b-z76nb3l75g {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.task-attachment-btn-cancel[b-z76nb3l75g] {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    border-color: #fecaca !important;
}

.task-attachment-btn-cancel:hover[b-z76nb3l75g] {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}

/* Spinner in upload button */
.btn-upload-primary .spinner-border-sm[b-z76nb3l75g] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

.task-attachment-btn[b-z76nb3l75g] {
    cursor: pointer;
    border: none;
    background: transparent;
}

/* Image View Modal Styles */
#imageViewModal .modal-content[b-z76nb3l75g] {
    background: #1a1a1a;
}

#imageViewModal .modal-body[b-z76nb3l75g] {
    background: #000000;
}

#imageViewModal img[b-z76nb3l75g] {
    border-radius: 8px;
}

/* Task Card Move Menu (Status Options) */
.task-card-move-menu[b-z76nb3l75g] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}

.task-card-status-form[b-z76nb3l75g] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.task-card-status-btn[b-z76nb3l75g] {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}

    .task-card-status-btn:hover[b-z76nb3l75g] {
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #475569;
    }

    .task-card-status-btn.active[b-z76nb3l75g] {
        background: #eef2ff;
        border-color: #6366f1;
        color: #6366f1;
    }

/* =========================================
   📢 PROFESSIONAL ALERTS
   ========================================= */

.kanban-alert[b-z76nb3l75g] {
    padding: 16px 20px;
    border-radius: 16px;
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid;
    backdrop-filter: blur(10px);
}

    .kanban-alert i[b-z76nb3l75g] {
        font-size: 20px;
        flex-shrink: 0;
    }

    .kanban-alert span[b-z76nb3l75g] {
        flex: 1;
    }

.alert-error[b-z76nb3l75g] {
    background: linear-gradient(135deg, rgba(254, 242, 242, 0.95) 0%, rgba(254, 226, 226, 0.9) 100%);
    color: #DC2626;
    border-color: rgba(220, 38, 38, 0.3);
}

    .alert-error i[b-z76nb3l75g] {
        color: #EF4444;
    }

.alert-success[b-z76nb3l75g] {
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.95) 0%, rgba(209, 250, 229, 0.9) 100%);
    color: #059669;
    border-color: rgba(16, 185, 129, 0.3);
}

    .alert-success i[b-z76nb3l75g] {
        color: #10B981;
    }



/* =========================================
   📱 RESPONSIVE DESIGN
   ========================================= */

/* Tablet & Mobile */
@media (max-width: 1024px) {
    .board-header-pro[b-z76nb3l75g] {
        padding: 28px 24px;
        border-radius: 20px;
    }

    .header-content-wrapper[b-z76nb3l75g] {
        gap: 28px;
    }

    .header-left-pro[b-z76nb3l75g] {
        gap: 18px;
    }

    .header-right-pro[b-z76nb3l75g] {
        width: 100%;
        justify-content: flex-start;
    }

    .header-actions-pro[b-z76nb3l75g] {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 10px;
    }

    .quick-stats[b-z76nb3l75g] {
        width: 100%;
        justify-content: space-between;
        gap: 16px;
        padding: 12px 20px;
    }

    .stat-item[b-z76nb3l75g] {
        flex: 1;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
        min-width: 0;
    }

    .stat-divider[b-z76nb3l75g] {
        display: none;
    }

    .board-title[b-z76nb3l75g] {
        font-size: 28px;
    }

    .title-section[b-z76nb3l75g] {
        gap: 8px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .board-header-pro[b-z76nb3l75g] {
        padding: 24px 20px;
        border-radius: 18px;
        margin-bottom: 24px;
    }

    .header-content-wrapper[b-z76nb3l75g] {
        gap: 24px;
    }

    .header-left-pro[b-z76nb3l75g] {
        gap: 16px;
    }

    .board-title[b-z76nb3l75g] {
        font-size: 26px;
    }

    .quick-stats[b-z76nb3l75g] {
        flex-wrap: wrap;
        padding: 14px 20px;
        gap: 14px;
        width: 100%;
    }

    .stat-item[b-z76nb3l75g] {
        min-width: calc(50% - 7px);
    }

    .stat-item i[b-z76nb3l75g] {
        font-size: 22px;
        width: 26px;
        height: 26px;
    }

    .stat-value[b-z76nb3l75g] {
        font-size: 18px;
    }

    /* Header Actions - Mobile */
    .header-actions-pro[b-z76nb3l75g] {
        gap: 8px;
        flex-wrap: wrap;
    }

    /* Secondary Action Buttons - Mobile */
    .btn-secondary-action[b-z76nb3l75g] {
        padding: 10px 14px;
        font-size: 13px;
        gap: 6px;
        min-height: 40px;
        background: #FFFFFF !important;
        color: #4F46E5 !important;
    }

    .btn-action-icon[b-z76nb3l75g] {
        width: 20px;
        height: 20px;
    }

        .btn-action-icon i[b-z76nb3l75g] {
            font-size: 16px;
        }

    .btn-action-text[b-z76nb3l75g] {
        font-size: 13px;
    }

    /* Primary Action Button - Mobile */
    .btn-primary-action[b-z76nb3l75g] {
        padding: 10px 16px;
        font-size: 13px;
        gap: 8px;
        min-height: 40px;
    }

    .btn-action-icon-primary[b-z76nb3l75g] {
        width: 22px;
        height: 22px;
    }

        .btn-action-icon-primary i[b-z76nb3l75g] {
            font-size: 13px;
        }

    /* Back Button - Mobile */
    .btn-back-action[b-z76nb3l75g] {
        width: 44px;
        height: 44px;
        font-size: 18px;
        border-radius: 10px;
    }

        .btn-back-action i[b-z76nb3l75g] {
            font-size: 18px;
        }

    /* Hide Tooltips on Mobile */
    .btn-back-action[b-z76nb3l75g]::after {
        display: none;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .board-badge-wrapper[b-z76nb3l75g] {
        flex-wrap: wrap;
    }

    .status-pills[b-z76nb3l75g] {
        flex-wrap: wrap;
    }

    /* Header Actions - Small Mobile */
    .header-actions-pro[b-z76nb3l75g] {
        gap: 6px;
    }

    /* Hide Text Labels on Small Screens */
    .btn-secondary-action .btn-action-text[b-z76nb3l75g],
    .btn-primary-action .btn-action-text[b-z76nb3l75g] {
        display: none;
    }

    /* Icon-Only Buttons */
    .btn-secondary-action[b-z76nb3l75g] {
        padding: 9px;
        min-width: 40px;
        gap: 0;
        background: #FFFFFF !important;
        color: #4F46E5 !important;
    }

    .btn-primary-action[b-z76nb3l75g] {
        padding: 9px;
        min-width: 40px;
        gap: 0;
    }

    .btn-action-icon[b-z76nb3l75g] {
        width: 22px;
        height: 22px;
    }

    .btn-action-icon-primary[b-z76nb3l75g] {
        width: 22px;
        height: 22px;
    }
}

/* OLD RESPONSIVE (Keep for compatibility) */
@media (max-width: 1024px) {
    .kanban-board[b-z76nb3l75g] {
        grid-template-columns: 1fr;
    }

    .widget-grid-modal[b-z76nb3l75g] {
        flex-direction: column;
        align-items: stretch;
    }

    .w-group[b-z76nb3l75g] {
        width: 100%;
    }

    .kanban-header[b-z76nb3l75g] {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .header-right[b-z76nb3l75g] {
        width: 100%;
        justify-content: space-between;
    }
}

/* =========================================
   🔧 DEBUG ANIMATION (Stats Mismatch Indicator)
   ========================================= */
@keyframes pulse-b-z76nb3l75g {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}