/* PIONEER Mobile Layout Fixes - Overlapping & Z-Index Issues */

/* ===== CRITICAL Z-INDEX HIERARCHY ===== */
:root {
  --z-toast: 10000;
  --z-modal: 9000;
  --z-header: 1000;
  --z-bottom-nav: 1000;
  --z-dropdown: 2000;
  --z-sidebar: 3000;
  --z-content: 1;
}

/* ===== PREVENT OVERLAPPING ELEMENTS ===== */
@media screen and (max-width: 768px) {
  /* GLOBAL COMPRESSION - Reduce all spacing throughout app */
  * {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Add back minimal essential spacing */
  .page, .page-content, main, .main-content {
    padding: 0.5rem !important;
  }

  /* Cards and containers - compact spacing */
  .card, .stat-card, .metric-card, .info-card,
  .dashboard-card, .profile-card {
    padding: 0.5rem !important;
    margin: 0.25rem !important;
    border-radius: 8px !important;
  }

  /* Stats grid - compress weight/height/streak/goal */
  .stats-grid, .profile-stats, .dashboard-stats,
  .metrics-grid, .quick-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    margin: 0.5rem 0 !important;
  }

  /* Individual stat items - compact */
  .stat-item, .metric-item, .profile-stat,
  .quick-stat-item {
    padding: 0.5rem !important;
    background: rgba(255,255,255,0.05) !important;
    border-radius: 6px !important;
    text-align: center !important;
  }

  .stat-value, .metric-value {
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    margin-bottom: 0.25rem !important;
  }

  .stat-label, .metric-label {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    opacity: 0.7 !important;
  }

  /* Page Titles - Make them white and visible, remove top spacing */
  h1, h2, h3, h4, h5, h6,
  .page-title, .section-title, .card-title,
  .title, .heading {
    color: rgba(255, 255, 255, 0.95) !important;
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
    padding-top: 0 !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  h2 { font-size: 18px !important; }
  h3 { font-size: 16px !important; }
  h4, h5, h6 { font-size: 14px !important; }

  /* Training and Rehabilitation page titles - move to top */
  .page-training h1,
  .page-training .page-title,
  .page-rehabilitation h1,
  .page-rehabilitation .page-title,
  .training-title,
  .rehabilitation-title {
    margin-top: 0 !important;
    padding-top: 0.5rem !important;
  }

  /* Main content area - prevent overlap with nav */
  .page, .page-content, main, .main-content {
    padding-top: 56px !important; /* Space for header - NO BUFFER */
    padding-bottom: 70px !important; /* Reduced space for bottom nav */
    min-height: calc(100vh - 126px) !important;
    position: relative;
    z-index: var(--z-content);
  }

  /* Fixed header - ensure it's on top */
  .mobile-header, header, .top-header, .nav-top {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header) !important;
    background: rgba(10, 22, 40, 0.98) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  }

  /* Bottom navigation - ensure it's on top */
  .bottom-nav, .mobile-footer, .nav-bottom {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-bottom-nav) !important;
    background: rgba(10, 22, 40, 0.98) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
  }

  /* Community Page - Discord-like Mobile Experience */
  .page-community {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    padding-top: 56px !important;
    padding-bottom: 90px !important;
    position: relative !important;
    z-index: var(--z-content) !important;
    background: #0a0e1a !important; /* Dark blue background like Discord */
  }

  .page-community .dc-layout {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent !important;
  }

  .page-community .dc-main {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow-y: auto !important;
    background: transparent !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .page-community .dc-feed {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    padding: 0.5rem !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent !important;
  }

  /* Remove dark grey spot */
  .page-community .dc-feed::before,
  .page-community .dc-feed::after,
  .page-community .dc-layout::before,
  .page-community .dc-layout::after {
    display: none !important;
  }

  .page-community .dc-sidebar {
    display: none !important; /* Hide sidebar on mobile */
  }

  /* Discord-like post styling */
  .page-community .dc-post {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 0.5rem !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 8px !important;
    padding: 0.75rem !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
  }

  /* Discord-like message composer */
  .page-community .dc-composer,
  .page-community .message-composer {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    padding: 0.75rem !important;
    margin: 0.5rem !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .page-community textarea,
  .page-community input[type="text"] {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
  }

  /* Profile Page - Compressed UI */
  .page-profile {
    display: flex !important;
    flex-direction: column !important;
    padding-top: 56px !important;
    padding-bottom: 70px !important;
    position: relative !important;
    z-index: var(--z-content) !important;
  }

  .profile-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 1rem 0.5rem !important;
    background: rgba(255,255,255,0.05) !important;
    border-radius: 8px !important;
    margin: 0.5rem !important;
  }

  /* Profile Avatar - Smaller and more compact */
  .profile-avatar,
  .profile-picture,
  .avatar,
  img.profile-avatar {
    width: 80px !important;
    height: 80px !important;
    border-radius: 40px !important;
    border: 3px solid rgba(255,255,255,0.2) !important;
    margin: 0 auto 0.5rem auto !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .profile-info {
    text-align: center !important;
    width: 100% !important;
  }

  .profile-name {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,0.95) !important;
    margin-bottom: 0.25rem !important;
  }

  /* Profile stats in compact 2x2 grid */
  .profile-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    margin-top: 0.5rem !important;
    padding: 0.5rem !important;
    width: 100% !important;
  }

  .profile-stat {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0.5rem !important;
    background: rgba(255,255,255,0.03) !important;
    border-radius: 6px !important;
  }

  .profile-stat-value {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,0.95) !important;
    line-height: 1.2 !important;
  }

  .profile-stat-label {
    font-size: 10px !important;
    color: rgba(255,255,255,0.6) !important;
    margin-top: 0.25rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }

  /* Profile Edit Form - Compressed */
  .profile-form {
    padding: 0.5rem !important;
  }

  .profile-form .form-group {
    margin-bottom: 0.75rem !important;
  }

  .profile-form label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,0.7) !important;
    margin-bottom: 0.25rem !important;
  }

  .profile-form input,
  .profile-form textarea {
    width: 100% !important;
    padding: 10px !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 6px !important;
    color: rgba(255,255,255,0.95) !important;
    font-size: 14px !important;
  }

  .profile-form button {
    width: 100% !important;
    padding: 12px !important;
    background: #DC143C !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-top: 0.5rem !important;
  }

  /* Compress all buttons globally */
  button, .btn, input[type="button"], input[type="submit"] {
    padding: 10px 16px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  /* Compress list items and links */
  ul, ol {
    padding-left: 1rem !important;
    margin: 0.5rem 0 !important;
  }

  li {
    margin-bottom: 0.25rem !important;
  }

  /* Compress sections */
  section, .section {
    margin-bottom: 1rem !important;
  }

  /* PROGRAMME GRID LAYOUT - 2-3 per row */
  .programmes-container,
  .training-programmes,
  .programme-list,
  .programs-grid,
  .programmes-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 0.75rem !important;
    padding: 0.5rem !important;
  }

  .programme-card,
  .training-programme-card,
  .program-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0.75rem !important;
    background: rgba(255,255,255,0.05) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
  }

  .programme-card h3,
  .programme-card h4,
  .program-card h3,
  .program-card h4 {
    font-size: 14px !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.2 !important;
  }

  .programme-card p,
  .program-card p {
    font-size: 12px !important;
    line-height: 1.3 !important;
    margin-bottom: 0.25rem !important;
  }

  .programme-card button,
  .program-card button {
    width: 100% !important;
    padding: 8px !important;
    font-size: 12px !important;
    margin-top: 0.5rem !important;
  }

  /* Profile Account Section - Fix light blue elements */
  .profile-menu,
  .profile-nav,
  .account-menu,
  .account-nav,
  .settings-menu,
  .settings-list {
    background: transparent !important;
  }

  /* Target all button types in profile/account sections - WITH GAPS */
  .profile-menu-item,
  .profile-nav-item,
  .account-menu-item,
  .account-nav-item,
  .menu-item,
  .settings-item,
  .list-item,
  a.menu-item,
  button.menu-item,
  button[class*="profile"],
  button[class*="account"],
  button[class*="settings"],
  .page-profile button,
  .page-account button,
  .account-section button,
  .profile-section button {
    background: #1e304f !important;          /* navy raised surface */
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    border-radius: 10px !important;
    padding: 0.9rem 1rem !important;
    margin-bottom: 0.6rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;  /* fix label/value overlap */
    width: 100% !important;
    gap: 0.75rem !important;
    text-decoration: none !important;
    font-size: 14px !important;
    box-shadow: none !important;
  }
  /* Settings rows: label left, value+chevron right */
  .settings-item .settings-item-left { display: flex; align-items: center; gap: 0.5rem; }
  .settings-item .settings-item-right { display: flex; align-items: center; gap: 0.4rem; color: #aeb6c2 !important; margin-left: auto; }
  .settings-item .settings-item-text { color: #ffffff !important; }
  .settings-item .chevron { color: #aeb6c2 !important; }

  .profile-menu-item:active,
  .profile-nav-item:active,
  .account-menu-item:active,
  .account-nav-item:active,
  .menu-item:active,
  .settings-item:active,
  a.menu-item:active,
  button.menu-item:active,
  button[class*="profile"]:active,
  button[class*="account"]:active,
  button[class*="settings"]:active,
  .page-profile button:active,
  .page-account button:active {
    background: rgba(255,255,255,0.1) !important;
  }

  /* Override any MUI button colors in profile/account */
  .page-profile .MuiButton-root,
  .page-account .MuiButton-root,
  .account-section .MuiButton-root,
  .profile-section .MuiButton-root {
    background-color: rgba(255,255,255,0.05) !important;
    color: rgba(255,255,255,0.95) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
  }

  .page-profile .MuiButton-root:hover,
  .page-account .MuiButton-root:hover {
    background-color: rgba(255,255,255,0.1) !important;
  }

  /* Specifically target light blue buttons */
  button[style*="rgb(33, 150, 243)"],
  button[style*="rgb(33,150,243)"],
  button[style*="#2196f3"],
  button[style*="#2196F3"],
  .MuiButton-containedPrimary,
  .MuiButton-textPrimary {
    background: rgba(255,255,255,0.05) !important;
    color: rgba(255,255,255,0.95) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
  }

  /* Modal Overlays - Full Screen on Mobile */
  .modal, .overlay, .popup {
    z-index: var(--z-modal) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .modal-backdrop {
    z-index: calc(var(--z-modal) - 1) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
  }

  /* Modal content should be scrollable */
  .modal-content,
  .modal-body {
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Toast Notifications - Above everything */
  .toast, .notification, .alert-floating {
    z-index: var(--z-toast) !important;
  }

  /* Dropdowns */
  .dropdown-menu, select {
    z-index: var(--z-dropdown) !important;
  }

  /* Sidebars/Drawers */
  .sidebar, .drawer, .menu-sidebar {
    z-index: var(--z-sidebar) !important;
  }

  /* Fix any absolute/fixed positioning conflicts */
  .absolute, .fixed {
    position: relative !important; /* Force relative on mobile */
  }

  /* Only allow fixed on nav elements */
  .mobile-header.fixed,
  .bottom-nav.fixed,
  .top-header.fixed,
  .nav-bottom.fixed {
    position: fixed !important;
  }

  /* Prevent content from going under nav */
  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* Scrollable content areas */
  .scrollable-content, .content-scroll {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: calc(100vh - 160px) !important;
  }

  /* Prevent horizontal overflow on all elements */
  * {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  img, video {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Fix tables overflowing */
  table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  /* Loading screens */
  .loading-screen {
    z-index: calc(var(--z-modal) + 100) !important;
  }
}

/* ===== LANDSCAPE ORIENTATION FIXES ===== */
@media screen and (max-width: 768px) and (orientation: landscape) {
  .page, .page-content, main, .main-content {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  .mobile-header {
    height: 50px !important;
  }

  .bottom-nav {
    height: 50px !important;
  }
}

/* ===== TABLET FIXES (iPad, etc) ===== */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .page, .page-content {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
}

/* CORRECT PROGRAMME GRID LAYOUT - 2-3 per row */
.prog-card-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 0.75rem !important;
  padding: 0.5rem 0 !important;
}