/* MobilStyle.css - Styling for mobile version */

/* To ensure higher level than LapMasterStyle */
@media (max-width: 768px) {
    /* Reset of base-style to avoid enheritance from LapMasterStyle.css */
    #mobile-version, 
    #mobile-version * {
      box-sizing: border-box;
    }
    
    html, 
    body, 
    #mobile-version {
      font-family: Arial, Sans-serif !important;
      margin: 0 !important;
      padding: 0 !important;
      background-color: #222 !important;
      color: #fff !important;
    }
    
    /* Base style for the mobile version */
    #mobile-version body {
      font-family: Arial, Sans-serif !important;
      margin: 0 !important;
      padding: 0 !important;
      background-color: #222 !important;
      color: #fff !important;
    }
    
    #mobile-version .header {
      background-color: #333 !important;
      padding: 10px !important;
      text-align: center !important;
      position: sticky !important;
      top: 0 !important;
      z-index: 100 !important;
    }
    
    #mobile-version .header h2 {
      display: block !important;
      margin: 0 0 5px 0 !important;
      font-size: 20px !important;
      color: #fff !important;
    }
    
    #mobile-version .links {
      font-size: 14px !important;
      margin-bottom: 5px !important;
    }
    
    #mobile-version .links a,
    #mobile-version a {
      color: #fff !important;
      text-decoration: none !important;
    }
    
    #mobile-version .links a:hover {
      text-decoration: underline !important;
    }
  
    #mobile-version .date-info {
      background-color: #333 !important;
      padding: 5px !important;
      text-align: center !important;
      font-size: 14px !important;
      margin-bottom: 2px !important;
      color: #fff !important;
    }
    
    #mobile-version .race-info {
      background-color: #444 !important;
      padding: 8px !important;
      margin-bottom: 10px !important;
      font-size: 16px !important;
      text-align: center !important;
      color: #fff !important;
    }
    
    #mobile-version .race-time {
      font-size: 14px !important;
      color: #fff !important;
    }
    
    #mobile-version .standings {
      width: 100% !important;
      border-collapse: collapse !important;
      background-color: transparent !important;
    }
    
    #mobile-version .standings th {
      background-color: #555 !important;
      padding: 8px 4px !important;
      text-align: center !important;
      font-size: 16px !important;
      position: sticky !important;
      top: 50px !important;
      color: #fff !important;
    }
    
    #mobile-version .standings td {
      padding: 8px 4px !important;
      text-align: center !important;
      font-size: 16px !important;
      border-bottom: 1px solid #444 !important;
      color: #fff !important;
      background-color: transparent !important;
    }
    
    #mobile-version .active-row {
      background-color: #333 !important;
    }
    
    #mobile-version .inactive-row {
      background-color: #222 !important;
      color: #aaa !important;
    }
  
    #mobile-version tr.active-row:nth-child(even) {
      background-color: #444 !important;
    }
    
    #mobile-version tr.inactive-row:nth-child(even) {
      background-color: #2a2a2a !important;
    }
    
    #mobile-version .lane-color-marker {
      display: inline-block !important;
      width: 15px !important;
      height: 15px !important;
      border-radius: 50% !important;
      margin-left: 3px !important;
      vertical-align: middle !important;
    }
    
    /* Ensure all links in the mobile version are white */
    #mobile-version a,
    #mobile-version a:link,
    #mobile-version a:visited,
    #mobile-version a:hover,
    #mobile-version a:active {
      color: #fff !important;
      text-decoration: none !important;
    }
    
    /* Ensure all table cells have the correct bacgground color */
    #mobile-version table,
    #mobile-version tr,
    #mobile-version tbody,
    #mobile-version thead {
      background-color: transparent !important;
    }
    
    /* Responsive layout - adjust for smaller screens */
    @media (max-width: 480px) {
      #mobile-version .standings th, 
      #mobile-version .standings td {
        padding: 6px 2px !important;
        font-size: 16px !important;
      }
      
      /* Ensure text doesn't overflow on small screens */
      #mobile-version td {
        max-width: 80px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }
    }
  }