/* ===================================================================
   ALPHA AI TRADING - LIGHT THEME DASHBOARD LAYOUT (v3 - FINAL FIX)
   Author: Gemini
   Description: A modern, light-themed, animated dashboard layout.
   * FIX: Corrected mobile responsive rules to ALWAYS show user info.
   =================================================================== */

/* --- CSS Variables for Light Theming --- */
:root {
    --bg-main: #f0f2f5; /* Light grey background */
    --bg-content: #ffffff; /* White content area */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 90px;
    --header-height: 80px;
    
    /* Light Glassmorphism Effect */
    --glass-bg: rgba(255, 255, 255, 0.6);
    --glass-blur: 10px;
    --glass-border: 1px solid rgba(0, 0, 0, 0.07);

    /* Text Colors */
    --text-primary: #1e293b; /* Dark blue for main text */
    --text-secondary: #64748b; /* Grey for secondary text */
    --text-accent: #0284c7; /* A slightly darker blue for links */

    /* Accent & Interactive Colors */
    --accent-primary: #0ea5e9; /* Sky blue */
    --accent-secondary: #6366f1; /* Indigo */
    --accent-danger: #ef4444; /* Red */
    --accent-success: #22c55e; /* Green */
    --accent-glow: 0 0 15px rgba(14, 165, 233, 0.3);

    /* Transitions */
    --transition-fast: all 0.2s ease-in-out;
    --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- Base & Scrollbar --- */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
body { background-color: var(--bg-main); color: var(--text-primary); overflow-x: hidden; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* --- Main Layout Grid --- */
.dashboard-grid { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: 100vh; transition: grid-template-columns var(--transition-smooth); }

/* --- Sidebar --- */
.sidebar { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border-right: var(--glass-border); display: flex; flex-direction: column; padding: 25px; transition: var(--transition-smooth); position: fixed; height: 100vh; left: 0; top: 0; width: var(--sidebar-width); z-index: 1000; }
.sidebar-header .logo { display: flex; align-items: center; gap: 15px; text-decoration: none; color: var(--text-primary); padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid rgba(0,0,0,0.05); }
.logo-icon { font-size: 36px; color: var(--accent-primary); transition: transform 0.3s ease; }
.logo:hover .logo-icon { transform: rotate(180deg); }
.logo-text h1 { font-size: 24px; font-weight: 600; line-height: 1; }
.logo-text span { font-size: 10px; letter-spacing: 2px; color: var(--text-secondary); }

/* Sidebar Navigation */
.sidebar-nav { flex-grow: 1; }
.sidebar-nav ul { list-style: none; }
.nav-item { margin-bottom: 8px; }
.nav-link { display: flex; align-items: center; padding: 14px 20px; border-radius: 8px; text-decoration: none; color: var(--text-secondary); font-weight: 500; gap: 15px; position: relative; overflow: hidden; transition: var(--transition-fast); }
.nav-link i { font-size: 18px; width: 20px; text-align: center; }
.nav-link:hover, .nav-link.active { color: var(--text-accent); background: rgba(14, 165, 233, 0.1); }
.nav-link.active { color: var(--accent-primary); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent-primary); }
.nav-link:hover { transform: translateX(5px); }

/* Sidebar Footer */
.sidebar-footer { padding-top: 20px; border-top: 1px solid rgba(0,0,0,0.05); }
.logout-btn { background: rgba(239, 68, 68, 0.1); color: var(--accent-danger); font-weight: 600; }
.logout-btn:hover { background: var(--accent-danger); color: white; box-shadow: 0 0 15px rgba(239, 68, 68, 0.4); }

/* --- Main Content Area --- */
.main-wrapper { grid-column: 2 / 3; background-color: var(--bg-main); padding-top: var(--header-height); }
.page-content { padding: 40px; }

/* --- Top Header Bar --- */
.top-header { display: flex; justify-content: space-between; align-items: center; padding: 0 40px; height: var(--header-height); background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); border-bottom: var(--glass-border); position: fixed; width: calc(100% - var(--sidebar-width)); top: 0; z-index: 900; transition: width var(--transition-smooth); }
.header-left, .header-right { display: flex; align-items: center; gap: 20px; }
.header-title { font-size: 24px; font-weight: 600; }

/* Mobile Toggle */
.mobile-menu-toggle { display: none; background: none; border: none; color: var(--text-primary); font-size: 24px; cursor: pointer; }

/* Header Right Side: Notifications & User */
.notification-bell { position: relative; font-size: 22px; color: var(--text-secondary); cursor: pointer; transition: var(--transition-fast); }
.notification-bell:hover { color: var(--accent-primary); }
.notification-count { position: absolute; top: -5px; right: -8px; background: var(--accent-danger); color: white; font-size: 10px; font-weight: 600; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-content); }
.notification-dropdown { position: absolute; top: calc(100% + 20px); right: 0; width: 360px; background: #ffffff; border-radius: 12px; border: var(--glass-border); box-shadow: 0 10px 30px rgba(0,0,0,0.1); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.95); transition: all 0.25s ease-out; z-index: 1010; }
.notification-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.notification-header, .notification-footer { padding: 15px 20px; background: #f8f9fa; border-bottom: 1px solid #e5e7eb; }
.notification-footer { border-top: 1px solid #e5e7eb; border-bottom: none; }
.notification-header h3 { font-size: 16px; }
.notification-footer a { color: var(--text-accent); text-decoration: none; font-weight: 500; }
.notification-list { max-height: 350px; overflow-y: auto; }
.notification-item { display: flex; gap: 15px; padding: 15px 20px; border-bottom: 1px solid #e5e7eb; }
.notification-item:last-child { border-bottom: none; }
.notification-icon-wrapper { color: var(--accent-primary); font-size: 18px; }
.notification-content p { font-size: 14px; margin: 0; color: var(--text-primary); }
.notification-content small { color: var(--text-secondary); }
.notification-item-empty { padding: 30px; text-align: center; color: var(--text-secondary); }

/* User Profile */
.user-profile { display: flex; align-items: center; gap: 12px; }
.user-avatar { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent-primary); }
.user-name { font-weight: 600; color: var(--text-primary); }
.user-info { display: block; } /* Ensure user-info is always visible */

/* LIGHT THEME ROLE BADGES */
@keyframes shimmer-gradient { 0% { background-position: -100% 50%; } 100% { background-position: 100% 50%; } }
.user-role-badge { padding: 4px 12px; border-radius: 50px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }
.user-role-badge.role-visitor, .user-role-badge.role-free { background-color: #e2e8f0; color: #475569; }
.user-role-badge.role-plus { background: linear-gradient(120deg, #3b82f6, #60a5fa, #818cf8, #3b82f6); background-size: 200% 200%; color: white; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); animation: shimmer-gradient 4s linear infinite; }
.user-role-badge.role-pro { background: linear-gradient(120deg, #d946ef, #f472b6, #a855f7, #d946ef); background-size: 200% 200%; color: white; box-shadow: 0 2px 8px rgba(217, 70, 239, 0.4); animation: shimmer-gradient 3s linear infinite; }


/* --- Responsive Design --- */
@media (max-width: 992px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .sidebar { transform: translateX(-100%); z-index: 1100; box-shadow: 10px 0 40px rgba(0,0,0,0.1); }
    .sidebar.open { transform: translateX(0); }
    .main-wrapper { grid-column: 1 / -1; }
    .top-header { width: 100%; }
    .mobile-menu-toggle { display: block; }
}

@media (max-width: 576px) {
    .page-content { padding: 20px; }
    .top-header { height: 70px; padding: 0 15px; }
    .main-wrapper { padding-top: 70px; }
    .header-title { display: none; }
    .header-right { gap: 12px; } /* Reduce gap between bell and profile */
    .user-profile { gap: 8px; } /* Reduce gap between avatar and text */
    .user-avatar { width: 40px; height: 40px; }
    .user-name { font-size: 14px; }
    .user-role-badge { margin-top: 2px; padding: 3px 8px; font-size: 10px; }
}
/*
 * Animated Status Badge for the Header
 */
/*
 * Alternative "Breathing" Animation for the Status Badge
 * You can use this to replace the previous pulse animation in your stylesheet.
 *//*
 * Animated Status Badge for the Header
 */

/* This is the new class for your "Automated" badge */
.user-status-badge {
    padding: 3px 9px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 12px;
    vertical-align: middle;
    background-color: rgba(67, 97, 238, 0.1);
    color: #4361ee;
    /* This line applies the animation */
    animation: pulse-animation 2.5s infinite;
}

/* This is the keyframe animation that creates the pulse effect */
@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0 rgba(67, 97, 238, 0.5);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(67, 97, 238, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(67, 97, 238, 0);
    }
}