/* assets/css/style.css - Enhanced Professional Light/Dark Background & Clear Readability */
body {
    background: linear-gradient(135deg, #eef2ff 0%, #fae8ff 50%, #fef3c7 100%) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    min-height: 100vh;
    color: #0f172a;
}

/* Unique Cards with Soft Tint & Vibrant Glowing Borders */
.bg-white,
.dark\:bg-gray-800,
.dark\:bg-gray-900,
.fb-card, 
#postsContainer > div, 
#createPostCard, 
#loginPromptCard,
aside > div {
    /* Halka sa blue aur pink ka mix gradient background */
    background: linear-gradient(135deg, rgba(238, 242, 255, 0.9) 0%, rgba(253, 242, 248, 0.9) 100%) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 1.5rem !important;
    box-shadow: 0 10px 30px -5px rgba(79, 70, 229, 0.15), 0 4px 6px -2px rgba(236, 72, 153, 0.1) !important;
    /* Blue-to-Pink Vibrant Glowing Border */
    border: 2px solid rgba(99, 102, 241, 0.3) !important;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

/* Dark mode ke liye blue-pink mix background */
.dark .bg-white,
.dark .dark\:bg-gray-800,
.dark .dark\:bg-gray-900,
.dark .fb-card, 
.dark #postsContainer > div, 
.dark #createPostCard, 
.dark #loginPromptCard,
.dark aside > div {
    background: linear-gradient(135deg, rgba(30, 27, 75, 0.85) 0%, rgba(50, 15, 50, 0.85) 100%) !important;
    border: 2px solid rgba(236, 72, 153, 0.4) !important;
}

/* Professional Card Shine & Hover Effect */
.fb-card::after,
#postsContainer > div::after,
#createPostCard::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: 0.6s;
}

.fb-card:hover::after,
#postsContainer > div:hover::after,
#createPostCard:hover::after {
    left: 100%;
}

/* Hover Effect for Modern Interactive Feel */
.fb-card:hover, 
#postsContainer > div:hover {
    border-color: rgba(236, 72, 153, 0.6) !important;
    box-shadow: 0 15px 35px -5px rgba(79, 70, 229, 0.18) !important;
    transform: translateY(-2px);
}

/* Crystal Clear & Bold Text Styling inside Cards (Light Mode) */
.fb-card p, 
.fb-card span, 
.fb-card div,
#postsContainer p, 
#postsContainer span, 
#postsContainer div,
aside p, 
aside span,
aside div {
    color: #0f172a !important;
    font-weight: 500 !important;
}

/* Headings and Names with Signature Gradient Style */
.fb-card h4, 
#postsContainer h4,
aside h4 {
    background: linear-gradient(to right, #4f46e5, #ec4899) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-weight: 800 !important;
}

/* Action Buttons with Gradient Match */
.fb-btn {
    background: linear-gradient(to right, #4f46e5, #ec4899);
    color: white;
    font-weight: 600;
    border-radius: 0.75rem;
    transition: opacity 0.2s;
}

.fb-btn:hover {
    opacity: 0.9;
}

/* ================= DARK MODE EXCLUSIVE FIXES ================= */
.dark body, html.dark body {
    background: linear-gradient(135deg, #090d16 0%, #16143c 50%, #290c33 100%) !important;
    color: #f1f5f9 !important;
}

.dark .fb-card, 
.dark #postsContainer > div, 
.dark #createPostCard, 
.dark #loginPromptCard,
.dark aside > div {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
    border: 2px solid rgba(168, 85, 247, 0.4) !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.4) !important;
}

.dark .fb-card p, .dark .fb-card span, .dark .fb-card div,
.dark #postsContainer p, .dark #postsContainer span, .dark #postsContainer div,
.dark aside p, .dark aside span, .dark aside div {
    color: #f1f5f9 !important;
}

/* Mobile App-like Smooth Experience */
* {
    -webkit-tap-highlight-color: transparent;
}

body {
    overscroll-behavior-y: none;
    -webkit-font-smoothing: antialiased;
}

/* Smooth scrolling for mobile feeds */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.3);
    border-radius: 4px;
}

/* Fix for Verified Badge Text Visibility inside Headings */
h4 span[style*="background-color"], 
h4 span[style*="color"],
.dark h4 span[style*="background-color"] {
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
}



/* Mobile Responsive Dropdown Fix for Janta Junction */
@media screen and (max-width: 768px) {
    #notificationDropdown,
    #friendReqDropdown {
        position: fixed !important;
        top: 65px !important;
        left: 5% !important;
        right: 5% !important;
        width: 90vw !important;
        max-width: none !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
    }
}

/* Home Feed ke Charo Top Navigation Buttons ke liye Professional 3D Styling (Light & Dark Mode Fixed) */
header .hidden.md\:flex button,
header #createDropdownMenu button {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(236, 72, 153, 0.12)) !important;
    border: 1px solid rgba(79, 70, 229, 0.35) !important;
    box-shadow: 0 3px 0 0 rgba(79, 70, 229, 0.4) !important;
    border-radius: 0.85rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    transition: all 0.25s ease !important;
}

.dark header .hidden.md\:flex button,
.dark header #createDropdownMenu button {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(236, 72, 153, 0.2)) !important;
    border: 1px solid rgba(236, 72, 153, 0.4) !important;
    box-shadow: 0 3px 0 0 rgba(168, 85, 247, 0.4) !important;
    color: #f1f5f9 !important;
}

header .hidden.md\:flex button:hover,
header #createDropdownMenu button:hover {
    background: linear-gradient(to right, #4f46e5, #ec4899) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 5px 15px rgba(79, 70, 229, 0.4) !important;
    transform: translateY(-1px);
}

header .hidden.md\:flex button:active,
header #createDropdownMenu button:active {
    transform: translateY(2px);
    box-shadow: none !important;
}

/* Active Nav Button Special Highlight */
header .hidden.md\:flex button.nav-btn-active {
    background: linear-gradient(to right, #4f46e5, #ec4899) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4) !important;
}



/* --- LEFT SIDEBAR CARDS & BUTTONS 3D STYLING --- */

/* 1. Left Profile Card */
#leftProfileCard {
    background: linear-gradient(135deg, rgba(238, 242, 255, 0.95) 0%, rgba(253, 242, 248, 0.95) 100%) !important;
    backdrop-filter: blur(16px) !important;
    border-radius: 1.5rem !important;
    box-shadow: 0 10px 30px -5px rgba(79, 70, 229, 0.15) !important;
    border: 2px solid rgba(99, 102, 241, 0.3) !important;
    margin-bottom: 1rem !important; /* Dono cards ke beech me gap ke liye */
}

.dark #leftProfileCard {
    background: linear-gradient(135deg, rgba(30, 27, 75, 0.9) 0%, rgba(50, 15, 50, 0.9) 100%) !important;
    border: 2px solid rgba(236, 72, 153, 0.4) !important;
}

/* 2. Left Sidebar Navigation Links (Home Feed, Messenger, Profile) ko 3D Button look dena */
#leftProfileCard nav a {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(236, 72, 153, 0.08)) !important;
    border: 1px solid rgba(79, 70, 229, 0.25) !important;
    box-shadow: 0 3px 0 0 rgba(79, 70, 229, 0.3) !important;
    border-radius: 0.85rem !important;
    margin-bottom: 0.5rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    transition: all 0.25s ease !important;
}

.dark #leftProfileCard nav a {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(236, 72, 153, 0.15)) !important;
    border: 1px solid rgba(236, 72, 153, 0.3) !important;
    box-shadow: 0 3px 0 0 rgba(168, 85, 247, 0.3) !important;
    color: #f1f5f9 !important;
}

#leftProfileCard nav a:hover {
    background: linear-gradient(to right, #4f46e5, #ec4899) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 5px 15px rgba(79, 70, 229, 0.4) !important;
    transform: translateY(-1px);
}

#leftProfileCard nav a:active {
    transform: translateY(2px);
    box-shadow: none !important;
}



/* --- WARD WISE ACTIVE USERS: CLEAR HEADING & PROFILE BUTTON STYLE WARD LIST --- */

/* 1. Heading Styling: Solid / Rich Contrast Background taaki Green Dot aur Text Saaf Dikhe */
#wardActivityWidget h3 {
    background: linear-gradient(135deg, #312e81 0%, #831843 100%) !important;
    border: 1px solid rgba(236, 72, 153, 0.5) !important;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3) !important;
    border-radius: 0.85rem !important;
    padding: 10px 14px !important;
    margin-bottom: 0.75rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #ffffff !important;
}

/* Heading text aur icon ko solid white rakhna */
#wardActivityWidget h3 span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* 2. Ward List Rows: Profile Buttons ki tarah Soft Gradient & 3D Styling */
#wardActivityWidget .space-y-2 > div {
    background: linear-gradient(135deg, rgba(238, 242, 255, 0.95) 0%, rgba(253, 242, 248, 0.95) 100%) !important;
    border: 1px solid rgba(79, 70, 229, 0.2) !important;
    box-shadow: 0 3px 0 0 rgba(79, 70, 229, 0.25) !important;
    border-radius: 0.85rem !important;
    padding: 10px 14px !important;
    margin-bottom: 0.5rem !important;
    transition: all 0.25s ease !important;
}

.dark #wardActivityWidget .space-y-2 > div {
    background: linear-gradient(135deg, rgba(30, 27, 75, 0.9) 0%, rgba(50, 15, 50, 0.9) 100%) !important;
    border: 1px solid rgba(236, 72, 153, 0.3) !important;
    box-shadow: 0 3px 0 0 rgba(168, 85, 247, 0.25) !important;
}

/* Hover par profile buttons jaisa solid Blue-Pink gradient */
#wardActivityWidget .space-y-2 > div:hover {
    background: linear-gradient(to right, #4f46e5, #ec4899) !important;
    border-color: transparent !important;
    box-shadow: 0 5px 15px rgba(79, 70, 229, 0.4) !important;
    transform: translateY(-1px);
}

/* Hover par text color white ho jaye */
#wardActivityWidget .space-y-2 > div:hover span:not(.bg-green-50):not(.bg-green-900) {
    color: white !important;
    -webkit-text-fill-color: white !important;
}




/* 3D Blue-Pink Gradient Text Effect */
.text-3d-gradient {
    background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 2px 3px 6px rgba(236, 72, 153, 0.25);
    font-weight: 900;
}

/* --- CREATOR DASHBOARD TRUE 3D GLASS CARDS --- */
main.max-w-6xl {
    perspective: 1000px;
}

/* Bas chote stats cards, milestone box aur main wrapper par 3D depth dena (poore page par nahi) */
.grid > div,
.bg-white.dark\:bg-gray-900.p-6,
#creatorContentList > div {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 247, 255, 0.95) 100%) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 1.5rem !important;
    border: 2px solid rgba(99, 102, 241, 0.3) !important;
    box-shadow: 0 10px 30px -5px rgba(79, 70, 229, 0.15), 0 4px 6px -2px rgba(236, 72, 153, 0.08) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Ab sirf ussi specific card par hover hoga jiske upar mouse jayega */
.grid > div:hover,
.bg-white.dark\:bg-gray-900.p-6:hover,
#creatorContentList > div:hover {
    transform: translateY(-4px) rotateX(1deg) rotateY(-1deg);
    box-shadow: 0 18px 35px -8px rgba(79, 70, 229, 0.25), 0 6px 12px -4px rgba(236, 72, 153, 0.15) !important;
    border-color: rgba(236, 72, 153, 0.5) !important;
}

/* Dark mode ke liye 3D depth */
.dark .grid > div,
.dark .bg-white.dark\:bg-gray-900.p-6,
.dark #creatorContentList > div {
    background: linear-gradient(135deg, rgba(30, 27, 75, 0.9) 0%, rgba(50, 15, 50, 0.9) 100%) !important;
    border: 2px solid rgba(236, 72, 153, 0.4) !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.4) !important;
}


.profile-tab-active {
    background: linear-gradient(to right, #4f46e5, #ec4899) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4) !important;
}