/* Mobile-First Responsive Design for Daily Lock */

/* Base mobile styles (applied to all screen sizes) */
* {
  box-sizing: border-box;
}

/* Ensure touch targets are at least 44x44px for mobile */
button, a, input, select {
  min-height: 44px;
  touch-action: manipulation;
}

/* Prevent text size adjustment on mobile devices */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* Improve tap highlight color on mobile */
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

/* Mobile-specific utilities */
@media (max-width: 768px) {
  /* Reduce padding on mobile for better space utilization */
  .mobile-px-reduced {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .mobile-py-reduced {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  
  /* Mobile header adjustments */
  .mobile-header {
    padding: 0.75rem 1rem !important;
  }
  
  .mobile-header h1 {
    font-size: 1.25rem !important;
  }
  
  .mobile-header .logo-icon {
    font-size: 1.5rem !important;
  }
  
  /* Hide text on mobile, show only icons */
  .mobile-icon-only span:not(.sr-only) {
    display: none !important;
  }
  
  .mobile-icon-only i {
    margin: 0 !important;
  }
  
  /* Stack buttons vertically on mobile */
  .mobile-stack-buttons {
    flex-direction: column !important;
    width: 100% !important;
  }
  
  .mobile-stack-buttons > * {
    width: 100% !important;
    margin: 0 0 0.5rem 0 !important;
  }
  
  /* Better modal sizing on mobile */
  .mobile-modal {
    max-width: 95vw !important;
    max-height: 95vh !important;
    margin: 0.5rem !important;
  }
  
  /* Better table display on mobile */
  .mobile-table-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .mobile-table-scroll table {
    min-width: 100% !important;
  }
  
  .mobile-table-scroll td,
  .mobile-table-scroll th {
    white-space: nowrap !important;
    padding: 0.5rem !important;
    font-size: 0.875rem !important;
  }
  
  /* Compact grid on mobile */
  .mobile-grid-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  
  /* Better card spacing on mobile */
  .mobile-card-compact {
    padding: 1rem !important;
  }
  
  /* Reduce font sizes on mobile */
  .mobile-text-sm {
    font-size: 0.875rem !important;
  }
  
  .mobile-text-xs {
    font-size: 0.75rem !important;
  }
  
  /* Better odds display on mobile */
  .mobile-odds-compact {
    font-size: 0.875rem !important;
    padding: 0.5rem !important;
  }
  
  /* Hide non-essential info on mobile */
  .mobile-hide {
    display: none !important;
  }
  
  /* Improve touch scrolling */
  .mobile-scroll {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Better event card display on mobile */
  .event-card-mobile {
    padding: 1rem !important;
  }
  
  .event-card-mobile .team-name {
    font-size: 0.875rem !important;
  }
  
  /* Profile dropdown positioning on mobile */
  .mobile-profile-dropdown {
    right: 0 !important;
    left: auto !important;
    min-width: 200px !important;
    max-width: calc(100vw - 2rem) !important;
  }
  
  /* Better tab navigation on mobile */
  .mobile-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
  }
  
  .mobile-tabs button {
    flex-shrink: 0 !important;
    min-width: fit-content !important;
    padding: 0.5rem 1rem !important;
  }
  
  /* Better sports filter on mobile */
  .mobile-sports-filter {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    padding-bottom: 0.5rem !important;
  }
  
  .mobile-sports-filter button {
    flex-shrink: 0 !important;
    margin-right: 0.5rem !important;
  }
  
  /* Improve form inputs on mobile */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  select {
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
  
  /* Better market display on mobile */
  .mobile-market-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  
  /* Compact prop bets on mobile */
  .mobile-prop-compact {
    padding: 0.75rem !important;
    font-size: 0.875rem !important;
  }
  
  /* Better league card display */
  .mobile-league-card {
    padding: 1rem !important;
  }
  
  .mobile-league-card h3 {
    font-size: 1.125rem !important;
  }
  
  /* Hamburger menu icon */
  .mobile-menu-icon {
    display: block !important;
  }
  
  /* Sticky header on mobile */
  .mobile-sticky-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
  }
}

/* Tablet adjustments (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .tablet-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  
  .tablet-px-4 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

/* Small mobile devices (max 375px) */
@media (max-width: 375px) {
  .xs-text-xs {
    font-size: 0.75rem !important;
  }
  
  .xs-px-2 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  
  .xs-py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
}

/* Landscape orientation adjustments */
@media (max-height: 500px) and (orientation: landscape) {
  .landscape-modal {
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  
  .landscape-compact {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
}

/* Better scrollbar for mobile */
@media (max-width: 768px) {
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  
  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
  }
}

/* Safe area insets for notched devices (iPhone X, etc.) */
@supports (padding: max(0px)) {
  .safe-area-top {
    padding-top: max(1rem, env(safe-area-inset-top)) !important;
  }
  
  .safe-area-bottom {
    padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
  }
  
  .safe-area-left {
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
  }
  
  .safe-area-right {
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
  }
}

/* Loading spinners - mobile optimized */
@media (max-width: 768px) {
  .fa-spinner {
    font-size: 2rem !important;
  }
}

/* Better touch feedback */
@media (hover: none) and (pointer: coarse) {
  button:active,
  a:active {
    transform: scale(0.98);
    transition: transform 0.1s;
  }
}

/* Prevent horizontal scroll on mobile */
body {
  overflow-x: hidden;
}

/* Better focus states for accessibility */
@media (max-width: 768px) {
  button:focus,
  a:focus,
  input:focus,
  select:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
  }
}