/* Mobile Navigation Modern Update - "Sleeper" Aesthetic */

/* --- Variables --- */
:root {
  --mn-bg-light: rgba(255, 255, 255, 0.95);
  --mn-bg-dark: rgba(20, 20, 20, 0.95); /* Deep black/grey */
  --mn-backdrop-blur: 16px;
  --mn-text-primary-light: #111827;
  --mn-text-primary-dark: #F9FAFB;
  --mn-text-secondary-light: #6B7280;
  --mn-text-secondary-dark: #9CA3AF;
  --mn-accent-color: #E76F51;
  --mn-border-light: rgba(0, 0, 0, 0.05);
  --mn-border-dark: rgba(255, 255, 255, 0.08);
  --mn-item-hover-light: rgba(0, 0, 0, 0.03);
  --mn-item-hover-dark: rgba(255, 255, 255, 0.05);
  --mn-shadow: -10px 0 30px rgba(0,0,0,0.15);
  --mn-transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  --mn-font-family: 'Poppins', 'Inter', -apple-system, sans-serif;
}

/* --- Mobile Menu Container --- */
@media (max-width: 991px) {
  .mobile-menu {
    background: var(--mn-bg-light) !important;
    backdrop-filter: blur(var(--mn-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--mn-backdrop-blur));
    box-shadow: var(--mn-shadow);
    border-left: 1px solid var(--mn-border-light);
    width: 300px !important; /* Fixed width sidebar style instead of full screen if possible, but keeping full width for safety if layout depends on it. Let's stick to user request "cleaner". Full width is often cleaner on mobile. */
    width: 85% !important; /* Sleek side drawer */
    max-width: 400px !important;
    right: 0 !important;
    left: auto !important; /* Slide from right */
    transform: translateX(100%) !important; /* Start off-screen right */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.4s, opacity 0.4s ease !important;
    padding: 0 !important; /* Remove default padding */
    z-index: 10000 !important;
  }

  /* Overlay Backdrop */
  .mobile-menu::before {
    content: '';
    position: fixed;
    top: 0;
    left: -100vw; /* Extend to cover the rest of the screen */
    width: 200vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: -1;
  }

  .mobile-menu.active {
    transform: translateX(0) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s, opacity 0.4s ease !important;
  }

  .mobile-menu.active::before {
    opacity: 1;
    pointer-events: auto;
  }

  /* --- Navigation List --- */
  .mobile-nav {
    margin-top: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    padding: 80px 0 40px 0 !important; /* Space for close button at top */
    /* Scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: var(--mn-text-secondary-light) transparent;
  }

  .mobile-nav-list {
    padding: 0 16px !important;
  }

  /* --- Navigation Items --- */
  .mobile-nav-list > li {
    margin-bottom: 8px !important;
  }

  .mobile-nav-list > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 14px 16px !important;
    font-family: var(--mn-font-family) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--mn-text-primary-light) !important;
    border-radius: 12px !important;
    transition: var(--mn-transition) !important;
    border: 1px solid #e5e7eb !important;
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    text-decoration: none !important;
  }

  .mobile-nav-list > li > a i {
    width: 24px !important;
    margin-right: 12px !important;
    font-size: 18px !important;
    color: var(--mn-text-secondary-light) !important;
    transition: color 0.2s ease !important;
    text-align: center !important;
  }

  /* Hover State */
  .mobile-nav-list > li > a:hover,
  .mobile-nav-list > li > a:active {
    background-color: var(--mn-item-hover-light) !important;
    color: var(--mn-accent-color) !important;
    transform: translateX(4px);
  }

  .mobile-nav-list > li > a:hover i,
  .mobile-nav-list > li > a:active i {
    color: var(--mn-accent-color) !important;
  }

  /* Active State */
  .mobile-nav-item.active a {
    background-color: rgba(231, 111, 81, 0.1) !important;
    color: var(--mn-accent-color) !important;
    font-weight: 600 !important;
    box-shadow: inset 4px 0 0 var(--mn-accent-color) !important;
  }

  .mobile-nav-item.active a i {
    color: var(--mn-accent-color) !important;
  }

  /* --- Sections --- */
  .mobile-nav-section {
    margin-top: 24px !important;
    margin-bottom: 8px !important;
    padding: 0 16px !important;
  }

  .mobile-nav-section h3 {
    font-family: var(--mn-font-family) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: var(--mn-text-secondary-light) !important;
    font-weight: 600 !important;
    opacity: 0.8 !important;
  }

  /* --- Featured Button (Generate Workout) --- */
  .mobile-nav-item.featured {
    margin-bottom: 24px !important;
  }

  .mobile-nav-item.featured a {
    background: linear-gradient(135deg, #111827, #374151) !important; /* Sleeper dark gradient */
    color: #FFFFFF !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    padding: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
  }

  .mobile-nav-item.featured a i {
    color: #FFFFFF !important;
  }

  .mobile-nav-item.featured a:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
    background: linear-gradient(135deg, #000000, #1f2937) !important;
  }

  /* --- Close Button --- */
  .close-menu {
    top: 20px !important;
    right: 20px !important;
    width: 40px !important;
    height: 40px !important;
    background: transparent !important;
    border: 1px solid var(--mn-border-light) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--mn-text-primary-light) !important;
    transition: var(--mn-transition) !important;
    box-shadow: none !important;
  }

  .close-menu:hover {
    background: var(--mn-item-hover-light) !important;
    transform: rotate(90deg) !important;
  }

  /* --- User Profile Header --- */
  /* Sits in its own rounded card so it reads as an intentional header
     rather than floating above the nav buttons. */
  #mobileAuthHeader {
    margin-bottom: 16px !important;
    padding: 14px 16px !important;
    background: var(--mn-item-hover-light) !important;
    border: 1px solid var(--mn-border-light) !important;
    border-radius: 14px !important;
  }

  #mobileAuthHeader a {
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--mn-text-primary-light) !important;
    border: none !important;
    box-shadow: none !important;
  }

  #mobileAuthHeader i {
    font-size: 32px !important; /* Larger avatar icon */
    color: var(--mn-text-primary-light) !important;
    background: var(--mn-item-hover-light);
    width: 48px !important;
    height: 48px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 16px !important;
  }

  /* --- Dark Mode Support --- */
  [data-theme="dark"] .mobile-menu {
    background: var(--mn-bg-dark) !important;
    border-left: 1px solid var(--mn-border-dark);
  }

  [data-theme="dark"] .mobile-nav-list > li > a {
    color: var(--mn-text-primary-dark) !important;
    background-color: #1f2937 !important;
    border-color: #374151 !important;
  }

  [data-theme="dark"] .mobile-nav-list > li > a i {
    color: var(--mn-text-secondary-dark) !important;
  }

  [data-theme="dark"] .mobile-nav-list > li > a:hover,
  [data-theme="dark"] .mobile-nav-list > li > a:active {
    background-color: var(--mn-item-hover-dark) !important;
    color: #FFFFFF !important;
  }

  /* Active State Dark Mode */
  [data-theme="dark"] .mobile-nav-item.active a {
    background-color: rgba(231, 111, 81, 0.2) !important;
    color: #FFFFFF !important;
    box-shadow: inset 4px 0 0 var(--mn-accent-color) !important;
    border-color: rgba(231, 111, 81, 0.3) !important;
  }

  [data-theme="dark"] .mobile-nav-item.active a i {
    color: var(--mn-accent-color) !important;
  }

  [data-theme="dark"] .mobile-nav-section h3 {
    color: var(--mn-text-secondary-dark) !important;
  }

  [data-theme="dark"] .close-menu {
    border-color: var(--mn-border-dark) !important;
    color: var(--mn-text-primary-dark) !important;
  }

  [data-theme="dark"] .close-menu:hover {
    background: var(--mn-item-hover-dark) !important;
  }

  [data-theme="dark"] #mobileAuthHeader {
    background: var(--mn-item-hover-dark) !important;
    border-color: var(--mn-border-dark) !important;
  }

  [data-theme="dark"] #mobileAuthHeader a {
    color: var(--mn-text-primary-dark) !important;
  }

  [data-theme="dark"] #mobileAuthHeader i {
    background: var(--mn-item-hover-dark);
    color: var(--mn-text-primary-dark) !important;
  }

  [data-theme="dark"] .mobile-nav-item.featured a {
    background: linear-gradient(135deg, #E76F51, #C75A3F) !important; /* Pop of color in dark mode */
    box-shadow: 0 4px 15px rgba(231, 111, 81, 0.3) !important;
  }

  /* Scrollbar Dark Mode */
  [data-theme="dark"] .mobile-nav {
    scrollbar-color: var(--mn-text-secondary-dark) transparent;
  }
}