/* =============================================
   MOBILE.CSS - OPTIMIZED FOR F1 CLASH MANAGER
   ============================================= 
   
   Contents:
   1. Base Mobile Responsive Settings
   2. Navigation & Tab Controls
   3. Content Layout & Grid Adjustments
   4. Logo & Branding Adjustments
   5. Form Elements & Interactive Components
   6. Mobile Menu System
   7. Calculator-Specific Mobile Styling
   8. Visual Effects & Animations
   9. Utility Classes
   10. Media Query Breakpoints
*/

/* ==============================================
   1. BASE MOBILE RESPONSIVE SETTINGS
   ============================================== */

   @media (max-width: 768px) {
    /* Core container adjustments */
    #app .content-container {
      padding: 10px;
    }
  
    /* Set base font sizing for better mobile readability */
    body {
      font-size: 14px;
    }
    
    /* Ensure proper touch target size (44px is Apple's recommended minimum) */
    button, 
    select,
    input[type="checkbox"],
    input[type="radio"],
    .clickable-element {
      min-height: 44px;
      min-width: 44px;
    }
  }
  
  /* ==============================================
     2. NAVIGATION & TAB CONTROLS
     ============================================== */
  
  @media (max-width: 768px) {
    /* Horizontal scrollable tabs container */
    .tabs-container {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
      scrollbar-width: none; /* Hide scrollbar in Firefox */
      -ms-overflow-style: none; /* Hide scrollbar in IE/Edge */
      white-space: nowrap;
      padding-bottom: 5px;
      margin-bottom: 10px;
    }
  
    /* Hide scrollbar in WebKit browsers but keep functionality */
    .tabs-container::-webkit-scrollbar {
      display: none;
    }
  
    /* Individual tab styling for touch */
    .tab-item {
      min-width: 80px;
      display: inline-block;
      white-space: nowrap;
      padding: 12px 15px; /* Larger touchpoint */
      font-size: 14px;
    }
    
    /* Back-to-top button for long scrolling pages */
    .back-to-top-btn {
      display: flex;
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background-color: var(--color-primary);
      color: white;
      border: none;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      z-index: 99;
      align-items: center;
      justify-content: center;
      transition: opacity 0.3s, transform 0.3s;
      opacity: 0;
      transform: translateY(20px);
      pointer-events: none;
    }
    
    /* Show back-to-top button when visible */
    .back-to-top-btn.visible {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    
    .back-to-top-btn i {
      font-size: 24px;
    }
  
    /* Hide sidebar on mobile devices */
    .sidebar {
      display: none;
    }
  }
  
  /* ==============================================
     3. CONTENT LAYOUT & GRID ADJUSTMENTS
     ============================================== */
  
  @media (max-width: 768px) {
    /* Tab pane display control - CRITICAL for fixing tab visibility issues */
    
    /* Ensure hidden tab panes remain hidden (highest specificity) */
    .tab-pane[style*="display: none"] {
      display: none !important;
    }
    
    /* When tab panes are visible, adjust their layout */
    .tab-pane[style*="display: block"] {
      display: block !important;
      width: 100%;
    }
    
    /* Grid layout adjustments for various card types */
    .driver-grid, 
    .track-grid, 
    .brake-grid, 
    .gearbox-grid, 
    .rearwing-grid, 
    .frontwing-grid, 
    .suspension-grid, 
    .engine-grid, 
    .boost-grid {
      display: grid !important;
      grid-template-columns: 1fr !important; /* Single column on mobile */
      width: 100%;
      gap: 15px; /* More spacing between items */
    }
    
    /* Flex layout adjustments */
    .driver-inputs, 
    .stats-grid, 
    .track-and-actions {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
    }
    
    /* Card content overflow prevention */
    .card-content {
      overflow-x: hidden;
      word-break: break-word;
    }
  }
  
  /* ==============================================
     4. LOGO & BRANDING ADJUSTMENTS
     ============================================== */
  
  @media (max-width: 768px) {
    /* F1 Modern Logo scaling */
    .f1-modern-logo {
      transform: scale(0.9);
      padding: var(--space-2) 0;
    }
  
    /* Logo text elements */
    .f1-text {
      font-size: 20px;
    }
  
    .clash-text {
      font-size: 16px;
    }
  
    .manager-text {
      font-size: 9px;
    }
  
    .season-text {
      font-size: 6px;
      margin-top: 2px;
      padding: 1px 3px;
    }
  }
  
  /* ==============================================
     5. FORM ELEMENTS & INTERACTIVE COMPONENTS
     ============================================== */
  
  @media (max-width: 768px) {
    /* Card header touch target sizing */
    .driver-card h2, 
    .part-card h2,
    .track-card h2 {
      min-height: 44px;
      display: flex;
      align-items: center;
    }
  
    /* Enhanced select dropdown styling */
    select {
      appearance: none; /* Remove default styling */
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url('data:image/svg+xml;utf8,<svg fill="gray" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
      background-repeat: no-repeat;
      background-position: right 8px center;
      padding-right: 30px !important;
      background-color: var(--input-bg);
      border: 1px solid var(--color-border);
      border-radius: var(--border-radius-md);
      padding: 10px 12px;
      width: 100%;
      max-width: 100%;
    }
    
    /* Focus states for better accessibility */
    select:focus,
    button:focus,
    input:focus {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }
  }
  
  /* ==============================================
     6. MOBILE MENU SYSTEM
     ============================================== */
  
  /* Mobile menu components default hidden on desktop */
  .mobile-menu-button {
    display: none;
    padding: 10px;
    font-size: 24px;
    cursor: pointer;
  }
  
  .mobile-tabs {
    display: none;
  }
  
  .mobile-theme-toggle {
    margin-top: 20px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-card);
    border-radius: var(--border-radius-md);
  }
  
  /* Mobile menu activation */
  @media (max-width: 768px) {
    /* Hamburger menu button */
    .mobile-menu-button {
      display: block;
      position: fixed;
      top: 10px;
      right: 10px;
      z-index: 1000;
      background: var(--color-card);
      border-radius: 50%;
      box-shadow: var(--shadow-md);
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  
    /* Sliding menu panel */
    .mobile-tabs {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--color-background);
      z-index: 999;
      transform: translateX(100%);
      transition: transform 0.3s ease;
      padding: 60px 20px 20px;
      overflow-y: auto;
    }
  
    /* Open state for mobile menu */
    .mobile-tabs-open {
      transform: translateX(0);
    }
  
    /* Individual mobile tab items */
    .mobile-tab-item {
      padding: 15px;
      margin-bottom: 10px;
      border-radius: var(--border-radius-md);
      background-color: var(--color-card);
      display: flex;
      align-items: center;
      font-size: 16px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
  
    /* Icon styling in mobile menu */
    .mobile-tab-item i {
      margin-right: 10px;
      font-size: 20px;
    }
    
    /* Active tab in mobile menu */
    .mobile-tab-item.active {
      background-color: var(--color-primary);
      color: white;
    }
  }
  
  /* ==============================================
     7. CALCULATOR-SPECIFIC MOBILE STYLING
     ============================================== */
  
  @media (max-width: 768px) {
    /* Calculator layout */
    .calculator-container {
      display: block !important;
      width: 100% !important;
    }
  
    /* Calculator panels */
    .calculator-container .setup-panel,
    .calculator-container .stats-summary-panel {
      width: 100% !important;
      margin-bottom: 20px;
    }
  
    /* Calculator form elements */
    .calculator-container select,
    .calculator-container input {
      width: 100% !important;
    }
  
    /* Track and actions layout */
    .calculator-container .track-and-actions {
      flex-direction: column-reverse !important;
    }
  
    .calculator-container .track-and-actions .team-actions,
    .calculator-container .track-selection {
      width: 100% !important;
      margin: 0 0 10px 0 !important;
    }
  
    /* Setup management buttons */
    .calculator-container .setup-buttons {
      flex-wrap: wrap;
    }
  
    .calculator-container .save-btn, 
    .calculator-container .load-btn, 
    .calculator-container .share-btn,
    .calculator-container .export-btn,
    .calculator-container .import-btn {
      flex-basis: 48%;
      margin-bottom: 8px;
    }
    
    /* Dark mode fix for team actions background */
    .dark-mode .calculator-container .team-actions {
      background: linear-gradient(to right, rgba(231, 76, 60, 0.05), rgba(40, 44, 52, 0.7), rgba(231, 76, 60, 0.05));
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    
    /* Dark mode fix for score display */
    .dark-mode .calculator-container .track-and-actions .team-actions .score-display {
      background-color: rgba(231, 76, 60, 0.1);
      border-color: rgba(231, 76, 60, 0.4);
    }
  }
  
  /* ==============================================
     8. VISUAL EFFECTS & ANIMATIONS
     ============================================== */
  
  /* Content highlight effect animation */
  @keyframes highlight-pulse {
    0% { background-color: transparent; }
    50% { background-color: rgba(var(--color-primary-rgb, 255, 30, 0), 0.1); }
    100% { background-color: transparent; }
  }
  
  /* Apply highlight animation to selected content */
  .highlight-tab-content {
    animation: highlight-pulse 1s ease-in-out;
  }
  
  /* Smoother transitions for interactive elements */
  @media (max-width: 768px) {
    .tab-pane {
      transition: opacity 0.15s ease-out;
    }
    
    .mobile-tab-item {
      transition: background-color 0.2s ease;
    }
    
    .mobile-tab-item:active {
      transform: scale(0.98);
    }
  }
  
  /* ==============================================
     9. UTILITY CLASSES
     ============================================== */
  
  @media (max-width: 768px) {
    /* Mobile-specific spacing adjustments */
    .m-0-mobile { margin: 0 !important; }
    .p-0-mobile { padding: 0 !important; }
    .mt-2-mobile { margin-top: 0.5rem !important; }
    .mb-2-mobile { margin-bottom: 0.5rem !important; }
    
    /* Visibility helpers */
    .hide-on-mobile { display: none !important; }
    .show-on-mobile { display: block !important; }
    
    /* Alignment helpers */
    .text-center-mobile { text-align: center !important; }
    .flex-column-mobile { flex-direction: column !important; }
  }
  
  /* ==============================================
     10. MEDIA QUERY BREAKPOINTS
     ============================================== */
  
  /* Small phones */
  @media (max-width: 375px) {
    body {
      font-size: 13px;
    }
    
    .mobile-tab-item {
      padding: 12px;
      font-size: 15px;
    }
  }
  
  /* Large phones and small tablets */
  @media (min-width: 481px) and (max-width: 768px) {
    .calculator-container .save-btn, 
    .calculator-container .load-btn, 
    .calculator-container .share-btn,
    .calculator-container .export-btn,
    .calculator-container .import-btn {
      flex-basis: 31%; /* Three buttons per row */
    }
  }
  
  /* Prevent mobile styles from affecting larger screens */
  @media (min-width: 769px) {
    .show-on-mobile {
      display: none !important;
    }
  }

  /* ==============================================
   11. MOBILE LOGO & FOOTER ADJUSTMENTS
   ============================================== */

@media (max-width: 768px) {
  /* Fix app container layout */
  #app, .app-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }
  
  /* Fix content positioning */
  .content {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 0 10px !important;
  }
  
  /* Ensure mobile header is full width and properly positioned */
  .mobile-header {
    width: 100% !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  
  /* Fix for driver grid layout issue */
  .driver-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Ensure cards take full width */
  .driver-card, .track-card, .part-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ==============================================
   12. MOBILE LAYOUT FIXES
   ============================================== */

   @media (max-width: 768px) {
    /* Fix app container layout */
    #app, .app-container {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow-x: hidden !important;
    }
    
    /* Fix content positioning */
    .content {
      margin-left: 0 !important;
      width: 100% !important;
      padding: 0 10px !important;
      overflow-x: hidden !important;
    }
    
    /* Round the main content header container */
    .content-header {
      position: relative !important;
      width: calc(100% - 20px) !important;
      left: 0 !important;
      padding: 15px !important;
      margin: 10px !important; /* Margin all around */
      border-radius: 12px !important; /* Add rounded corners */
      background-color: white !important; /* Ensure white background */
      box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important; /* Subtle shadow */
      overflow: hidden !important; /* Ensure content respects rounded corners */
    }
    
    /* Dark mode adjustments */
    .dark-mode .content-header {
      background-color: var(--color-card) !important; /* Use card color instead of white */
    }
    
    /* Title alignment and styling */
    .content-header h2 {
      font-size: 24px !important;
      font-weight: 700 !important;
      margin: 0 0 15px 10px !important; /* Add left margin to align with cards */
      padding: 0 !important;
      text-align: left !important;
    }
    
    /* Search bar container improvements */
    .search-bar {
      margin: 0 10px !important; /* Match alignment with the title */
      width: calc(100% - 20px) !important; /* Full width minus margins */
      border-radius: 100px !important; /* Fully rounded corners */
      overflow: hidden !important;
      background-color: var(--color-card-alt) !important;
      border: 1px solid var(--color-border) !important;
      display: flex !important;
      align-items: center !important;
      height: 44px !important;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    }
    
    /* Search input styling */
    .search-bar input {
      padding: 12px 15px 12px 40px !important; /* More padding for touch */
      font-size: 16px !important; /* Better for mobile input */
      border-radius: 100px !important;
    }
    
    /* Search icon positioning */
    .search-bar i.bx-search {
      left: 15px !important;
      font-size: 18px !important;
    }
    
    /* Clear button positioning */
    .search-bar .clear-btn {
      right: 10px !important;
    }
    
    /* Search input focus state */
    .search-bar input:focus {
      background-color: var(--input-bg) !important;
      box-shadow: 0 0 0 2px var(--color-primary) !important;
    }
    
    /* Version tag positioning and styling */
    .version-tag {
      margin: 5px 10px 15px 10px !important;
      text-align: center !important;
      padding: 8px !important;
      border-radius: 8px !important;
      background-color: var(--color-card-alt) !important;
      color: var(--color-text-secondary) !important;
      font-size: 14px !important;
    }
    
    /* Improve mobile header layout */
    .mobile-header {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      width: 100% !important;
      padding: 15px 0 !important;
      margin: 0 0 15px 0 !important;
      background-color: var(--color-card) !important;
      border-bottom: 1px solid var(--color-border) !important;
      box-shadow: var(--shadow-sm) !important;
      position: relative !important;
      left: 0 !important;
      overflow: visible !important;
    }
    
    /* Fix logo centering */
    .mobile-header .f1-modern-logo {
      transform: scale(0.8) !important;
      margin: 0 auto !important;
      position: relative !important;
      left: 0 !important;
    }
    
    /* Reset any grid/flex layouts at the app level */
    .app-container {
      display: block !important;
      grid-template-columns: 1fr !important;
      grid-template-areas: none !important;
    }
    
    /* Ensure the tab content area is properly sized */
    .tab-content-area {
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow-x: hidden !important;
    }
    
    /* Tab pane positioning */
    .tab-pane {
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      left: 0 !important;
      position: relative !important;
    }
    
    /* Card grid fixes */
    .driver-grid, 
    .track-grid, 
    .brake-grid, 
    .gearbox-grid, 
    .rearwing-grid, 
    .frontwing-grid, 
    .suspension-grid, 
    .engine-grid, 
    .boost-grid {
      display: grid !important;
      grid-template-columns: 1fr !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      position: relative !important;
      left: 0 !important;
    }
    
    /* Also round any card containers */
    .tab-pane > .driver-card,
    .tab-pane > .brake-card,
    .tab-pane > .gearbox-card,
    .tab-pane > .track-card,
    .tab-pane > .rearwing-card,
    .tab-pane > .frontwing-card,
    .tab-pane > .suspension-card,
    .tab-pane > .engine-card,
    .tab-pane > .boost-card {
      border-radius: 12px !important;
      overflow: hidden !important;
      margin-bottom: 15px !important;
    }
    
    /* Ensure cards take full width */
    .driver-card, 
    .track-card, 
    .brake-card,
    .gearbox-card,
    .rearwing-card,
    .frontwing-card,
    .suspension-card,
    .engine-card,
    .boost-card {
      width: 100% !important;
      max-width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    
    /* Card header alignment to match title */
    .driver-card h2, 
    .brake-card h2,
    .gearbox-card h2,
    .track-card h2,
    .rearwing-card h2,
    .frontwing-card h2,
    .suspension-card h2,
    .engine-card h2,
    .boost-card h2 {
      padding-left: 15px !important;
      padding-right: 15px !important;
    }
    
    /* Card body alignment to match title */
    .card-section {
      padding-left: 15px !important;
      padding-right: 15px !important;
    }
    
    /* Search results and no-results message styling */
    .search-no-results {
      margin: 15px 10px !important;
      padding: 15px !important;
      border-radius: 12px !important;
      background-color: var(--color-card) !important;
      text-align: center !important;
    }
    
    .search-no-results .clear-search {
      margin-top: 10px !important;
      padding: 8px 15px !important;
      border-radius: 100px !important;
      background-color: var(--color-primary) !important;
      color: white !important;
      border: none !important;
      font-weight: 600 !important;
    }
    
    /* Completely remove sidebar from layout flow */
    .sidebar {
      display: none !important;
      width: 0 !important;
      min-width: 0 !important;
      max-width: 0 !important;
      position: absolute !important;
      left: -9999px !important;
      visibility: hidden !important;
    }
  }