/* filepath: static/css/mobile.css */

/*
FineRide Mobile Styles

This stylesheet contains mobile-specific overrides and enhancements for the FineRide application,
ensuring a responsive and touch-friendly experience across various mobile and tablet devices.

Key features:
- Enhanced mobile navigation and dashboard optimizations
- Touch-friendly action cards and buttons
- Responsive environmental data grids (Weather, YouBike, AQI)
- Accessibility-focused font size and badge scaling
- iOS safe area support and smooth scroll indicators

Dependencies:
- style.css (base application styles)
- variables.css (color palette, typography, spacing - if applicable)

Browser Support:
- Modern mobile browsers (Chrome for Android, Safari on iOS, Firefox Mobile)

Last Updated: 2025-12-20
Author: HowToolHelp/Intelligent
*/

/* =============================================================================
   NAVIGATION, DASHBOARD, AND MOBILE BREAKPOINTS (CONSOLIDATED)
   ============================================================================= */

/* Consolidated mobile rules for `max-width: 768px`.
   This groups navigation, dashboard, component and typography overrides
   to reduce cascade surprises and make intent explicit. */
@media (max-width: 768px) {
  /* Navigation */
  .navbar { padding: 0.5rem 1rem; }
  .navbar-brand { font-size: 1.25rem; } /* consolidated: prefer larger readable brand */
  .nav-link { padding: 0.5rem; font-size: 0.9rem; }

  /* Dashboard */
  .dashboard-welcome { margin-bottom: 1.5rem; padding: 1.5rem 1rem; }
  .dashboard-welcome h1 { font-size: 1.75rem; }
  .dashboard-welcome .lead { font-size: 1rem; }

  /* Layout helpers */
  .env-info-grid { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.5rem; }

  /* Component: Action Card */
  /* Makes action cards more touch-friendly by increasing padding and minimum height.
     Structure: .action-card > i, h5, p */
  .action-card { padding: 1.25rem 1rem; min-height: 120px; }
  .action-card i { font-size: 1.75rem; margin-bottom: 0.75rem; }
  .action-card h5 { font-size: 1rem; margin-bottom: 0.5rem; }
  .action-card p { font-size: 0.85rem; }

  /* Quick actions grid on medium/smaller phones */
  .quick-actions { grid-template-columns: 1fr; }

  /* Filters stack */
  .filters { flex-direction: column; align-items: stretch; }

  /* Slightly larger primary controls */
  .cta-btn.primary, .btn-primary { padding: 0.85rem 1.25rem; font-size: 1rem; }

  /* Environmental & YouBike card enhancements (tablet/large-phone view) */
  .card-subtitle { font-size: 1.2rem; font-weight: 700; gap: 0.6rem; margin-bottom: 0.25rem; }
  .env-city-badge { font-size: 1.1rem; padding: 0.5rem 1.2rem; border-radius: 50px; box-shadow: 0 4px 12px rgba(15,98,254,0.3); }

  /* Badge defaults for this breakpoint */
  .status-pill { font-size: 1rem; padding: 0.5rem 1rem; min-height: 32px; }
  .card-eyebrow, .suitability-eyebrow { font-size: 1rem; font-weight: 600; }
  .env-card .icon { font-size: 1.7rem; width: 56px; height: 56px; }
  .env-card.aqi-good .icon, .env-card.aqi-moderate .icon, .env-card.aqi-unhealthy-sensitive .icon { font-size: 1.8rem; }

  /* Typographic scale for medium phones / tablets */
  html { font-size: 16px; }
  body { font-size: 1rem; line-height: 1.4; }
  .quick-actions .action-card h5 { font-size: 1.05rem; }
  .quick-actions .action-card p { font-size: 0.95rem; }
  .primary-value { font-size: 2.8rem; }
  .value-label { font-size: 1rem; }
}

/* Extra small screens (phones in portrait)
   ------------------------------------ */
@media (max-width: 576px) {
  .dashboard-welcome {
    padding: 1rem 0.75rem;
    margin-bottom: 1rem;
  }

  .dashboard-welcome h1 {
    font-size: 1.5rem;
  }

  .dashboard-welcome .lead {
    font-size: 0.9rem;
  }

  /* Enhanced card spacing for small screens */
  .env-card {
    padding: 1rem;
    margin-bottom: 0.75rem;
  }

  .suitability-card {
    padding: 1.25rem;
  }

  /* Better button sizing for touch */
  .btn-primary,
  .btn-secondary {
    padding: 0.625rem 1.25rem;
    font-size: 0.9rem;
    min-height: 44px; /* iOS touch target minimum */
  }

  /* Form elements optimization */
  .form-select {
    font-size: 1rem; /* Prevent zoom on iOS */
    padding: 0.5rem;
    min-height: 44px;
  }

  /* Station list improvements */
  .station-item {
    padding: 0.75rem;
  }

  .station-name {
    font-size: 0.9rem;
  }

  .station-dist {
    font-size: 0.8rem;
  }
}

/* Landscape orientation adjustments */
@media (max-width: 768px) and (orientation: landscape) {
  .dashboard-welcome { padding: 1rem; }
  .env-info-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; }
}

/* =============================================================================
   TABLET AND TOUCH OPTIMIZATIONS
   ============================================================================= */

/* iPad and Tablet Layout Fixes
   ------------------------------------ */
@media (min-width: 769px) and (max-width: 1366px) {
  /* On tablets where cards are still side-by-side, 
     the internal 2-column grid is too cramped.
     Switch to 1-column for better readability. */
  .env-data-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .weather-metrics {
    gap: 0.75rem;
  }

  .primary-value {
    font-size: 3rem; /* Slightly smaller than desktop for tablet cards */
  }
}

/* Touch device optimizations
   ------------------------------------ */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects on touch devices */
  .card:hover,
  .action-card:hover,
  .env-card:hover {
    transform: none;
    box-shadow: var(--shadow);
  }

  /* Ensure buttons are clearly tappable */
  .btn-primary,
  .btn-secondary,
  .action-card,
  .card-action-btn {
    min-height: 44px;
  }
}

/* =============================================================================
   COMPONENT-SPECIFIC MOBILE OVERRIDES
   ============================================================================= */

/* (max-width:768px) rules consolidated above */

/* (max-width:576px) rules consolidated below */

/* (suitability widget consolidated into small-phone block) */

/* (enhanced card consolidated into small-phone block) */

/* Quick-actions scroller indicators
   ------------------------------------ */
/* quick-actions indicator & arrows handled inside small-phone block and larger breakpoints */

/* =============================================================================
   MOBILE UX AND ACCESSIBILITY IMPROVEMENTS
   ============================================================================= */

/* Extra mobile UX improvements
   ------------------------------------ */

/* Respect iOS safe area and provide bottom padding for fixed elements */
.app-shell {
  padding-bottom: env(safe-area-inset-bottom, 0.75rem);
}

/* Utility class to hide elements cleanly (used by JS) */
.hidden {
  display: none;
}

/* Improve quick-actions on narrow phones: make horizontally scrollable */
@media (max-width: 576px) {
  .quick-actions {
    display: flex;
    overflow-x: auto; /* Enable horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth momentum scrolling on iOS */
    gap: 0.75rem;
    padding: 0.5rem 0.5rem;
  }

  .quick-actions .action-card {
    min-width: 200px; /* Ensure cards don't shrink too much in the scroller */
    flex: 0 0 auto; /* Prevent cards from growing or shrinking */
    margin: 0;
  }

  /* hide native scrollbars for cleaner look */
  .quick-actions::-webkit-scrollbar { display: none; }
  .quick-actions { -ms-overflow-style: none; scrollbar-width: none; }

  /* Larger tappable area and visible focus for accessibility */
  .action-card:focus {
    outline: 3px solid rgba(0,168,204,0.18);
    outline-offset: 4px;
  }

  /* Adjust arrow positions for small screens */
  .quick-actions-arrow {
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
    top: 45%; /* Center relative to cards, accounting for dots below */
  }

  .quick-actions-arrow.left {
    left: 5px;
  }

  .quick-actions-arrow.right {
    right: 5px;
  }
}

/* Slightly larger primary controls on small screens */
@media (max-width: 768px) {
  .cta-btn.primary, .btn-primary {
    padding: 0.85rem 1.25rem;
    font-size: 1rem;
  }
}

/* Ensure station nav buttons are easier to tap */
.station-nav-btn {
  padding: 0.5rem;
  border-radius: 8px;
}

/* Improve contrast for small text on mobile */
@media (max-width: 576px) {
  .station-dist, .station-name {
    color: #2d3436;
  }
}

/* Mobile font-size optimizations - Increased for better readability
   ------------------------------------ 
   Larger base font sizes for mobile viewports to improve accessibility and readability
*/
@media (max-width: 768px) {
  /* Increased base font size for tablet/large-phone viewports */
  html { font-size: 16px; }  /* Increased from 15px */
  body { font-size: 1rem; line-height: 1.4; }  /* Increased from 0.98rem */

  /* Action card text sizing for clarity */
  .quick-actions .action-card h5 { font-size: 1.05rem; }  /* Increased from 1rem */
  .quick-actions .action-card p { font-size: 0.95rem; }  /* Increased from 0.92rem */

  /* Prominent numeric values remain readable but slightly larger */
  .primary-value { font-size: 2.8rem; }  /* Increased from 2.6rem */
  .value-label { font-size: 1rem; }  /* Increased from 0.95rem */

  /* Environmental card eyebrow and subtitles */
  .card-eyebrow, .suitability-eyebrow { font-size: 0.9rem; }  /* Increased from 0.85rem */
}

@media (max-width: 576px) {
  /* Increased base font size for small phones */
  html { font-size: 15px; }  /* Increased from 14px */
  body { font-size: 0.96rem; line-height: 1.35; }  /* Increased from 0.94rem */

  .dashboard-welcome h1 { font-size: 1.45rem; }  /* Increased from 1.35rem */
  .dashboard-welcome .lead { font-size: 1rem; }  /* Increased from 0.95rem */

  /* Action cards: slightly larger text */
  .quick-actions .action-card h5 { font-size: 1.02rem; }  /* Increased from 0.98rem */
  .quick-actions .action-card p { font-size: 0.88rem; }  /* Increased from 0.84rem */

  /* Main data numbers scale up modestly */
  .primary-value { font-size: 2.4rem; }  /* Increased from 2.2rem */
  .value-label { font-size: 0.92rem; }  /* Increased from 0.88rem */

  /* Station list readability */
  .station-name { font-size: 0.96rem; }  /* Increased from 0.92rem */
  .station-dist { font-size: 0.82rem; }  /* Increased from 0.78rem */

  /* Ensure form controls don't trigger zoom on iOS */
  .form-select { font-size: 1.02rem; }  /* Increased from 0.98rem */
}

/*------------------------------------*\
  #BADGE-COMPONENT-MOBILE-ENHANCEMENTS
\*------------------------------------*/

/* Badge sizing and font enhancements for mobile
   
   Further increased size and font size for badges in weather, YouBike, and AQI cards
   to enhance readability and touch targets on small screens.
   
   Structure:
   .status-pill
   .card-eyebrow
   .suitability-eyebrow
   .env-card .icon
   .youbike-status
   
   Usage:
   <span class="status-pill">Active</span>
   <div class="card-eyebrow">Weather</div>
   
   Design rationale:
   - Larger font sizes for improved accessibility (WCAG AA compliance)
   - Increased padding for better touch targets (min 44px recommended)
   - Progressive enhancement for smaller screens
*/
@media (max-width: 768px) {
  /* General badge enhancements for tablet/large-phone viewports - further increased */
  .status-pill {
    font-size: 1rem;                /* Further increased from 0.9rem for better readability */
    padding: 0.5rem 1rem;           /* Increased padding for enhanced touch targets */
    min-height: 32px;               /* Increased minimum height for consistent appearance */
  }

  .card-eyebrow,
  .suitability-eyebrow {
    font-size: 1rem;                /* Further increased from 0.95rem for prominence */
    font-weight: 600;               /* Enhanced weight for better contrast */
  }

  /* Environmental card specific badge enhancements - further increased */
  .env-card .icon {
    font-size: 1.7rem;              /* Further increased from 1.5rem for weather/YouBike/AQI indicators */
    width: 56px;                    /* Increased container size for better visibility */
    height: 56px;                   /* Increased container size for better visibility */
  }

  /* AQI card badge improvements - further increased */
  .env-card.aqi-good .icon,
  .env-card.aqi-moderate .icon,
  .env-card.aqi-unhealthy-sensitive .icon {
    font-size: 1.8rem;              /* Further increased from 1.6rem for AQI status visibility */
  }

  /* Weather card badge enhancements - further increased */
  .weather-metrics .metric-label {
    font-size: 1rem;                /* Further increased from 0.9rem for weather data */
    font-weight: 500;               /* Medium weight for readability */
  }

  /* YouBike card badge improvements - further increased */
  .youbike-status {
    font-size: 1rem;                /* Further increased from 0.9rem for status text */
    padding: 0.4rem 0.8rem;         /* Increased padding for better touch targets */
  }
}

@media (max-width: 576px) {
  /* Enhanced badge sizing for small phone screens - further increased */
  .status-pill {
    font-size: 1.05rem;             /* Further increased from 0.95rem for very small screens */
    padding: 0.6rem 1.2rem;         /* Larger padding for enhanced touch targets */
    min-height: 36px;               /* Increased minimum height for accessibility */
    border-radius: 6px;             /* Slightly more rounded for modern look */
  }

  .card-eyebrow,
  .suitability-eyebrow {
    font-size: 1.1rem;              /* Further increased from 1rem for prominence on small screens */
    font-weight: 600;               /* Bold for hierarchy */
    margin-bottom: 0.5rem;          /* Better spacing */
  }

  /* Environmental card icon enhancements - further increased */
  .env-card .icon {
    font-size: 2rem;                /* Further increased from 1.7rem for better visibility */
    width: 60px;                    /* Increased container size for prominence */
    height: 60px;                   /* Increased container size for prominence */
    margin-bottom: 0.5rem;          /* Better spacing from text */
  }

  /* AQI specific enhancements - further increased */
  .env-card.aqi-good .icon,
  .env-card.aqi-moderate .icon,
  .env-card.aqi-unhealthy-sensitive .icon {
    font-size: 2.1rem;              /* Further increased from 1.8rem for maximum AQI status visibility */
  }

  /* Weather card metric badges - further increased */
  .weather-metrics .metric-label {
    font-size: 1.05rem;             /* Further increased from 0.95rem for small screens */
    font-weight: 500;               /* Medium weight maintained */
  }

  .weather-metrics .metric-value {
    font-size: 1.2rem;              /* Further increased from 1.1rem for readability */
    font-weight: 600;               /* Bold for emphasis */
  }

  /* YouBike card status badges - further increased */
  .youbike-status {
    font-size: 1.05rem;             /* Further increased from 0.95rem for status indicators */
    padding: 0.5rem 1rem;           /* Increased padding for better touch targets */
    min-width: 70px;                /* Increased minimum width for consistency */
  }

  /* Suitability score ring badge - further increased */
  .score-ring-container {
    width: 150px;                   /* Further increased from 140px for prominence */
    height: 150px;                  /* Further increased from 140px for prominence */
  }

  .score-text {
    font-size: 1.3rem;              /* Further increased from 1.2rem for score text */
    font-weight: 700;               /* Extra bold for emphasis */
  }
}

/* Environmental and YouBike Card Enhancements
   ------------------------------------ */
@media (max-width: 768px) {
  .card-subtitle {
    font-size: 1.2rem;
    font-weight: 700;
    gap: 0.6rem;
    margin-bottom: 0.25rem;
  }

  .env-city-badge {
    font-size: 1.1rem;
    padding: 0.5rem 1.2rem;
    border-radius: 50px; /* Pill shape for modern look */
    box-shadow: 0 4px 12px rgba(15, 98, 254, 0.3);
  }
}

/* -------------------------------------------------------------------------
   AQI Theme variables (mobile)
   Keep mobile styles in sync with base `style.css` so text colors follow
   the AQI badge colors on small viewports as well.
   ------------------------------------------------------------------------- */
.enhanced-card.aqi-good,
.env-card.aqi-good { --aqi-color: #28a745; --aqi-badge-foreground: #ffffff; }
.enhanced-card.aqi-moderate,
.env-card.aqi-moderate { --aqi-color: #ffc107; --aqi-badge-foreground: #222222; }
.enhanced-card.aqi-unhealthy-sensitive,
.env-card.aqi-unhealthy-sensitive { --aqi-color: #fd7e14; --aqi-badge-foreground: #222222; }
.enhanced-card.aqi-unhealthy,
.env-card.aqi-unhealthy { --aqi-color: #dc3545; --aqi-badge-foreground: #ffffff; }
.enhanced-card.aqi-very-unhealthy,
.env-card.aqi-very-unhealthy { --aqi-color: #6f42c1; --aqi-badge-foreground: #ffffff; }
.enhanced-card.aqi-hazardous,
.env-card.aqi-hazardous { --aqi-color: #7e0023; --aqi-badge-foreground: #ffffff; }

/* Make key text elements inherit the AQI color vars when present */
.enhanced-card .aqi-section .status-indicator,
.enhanced-card .aqi-section .value-label,
.enhanced-card .aqi-section .primary-value {
  color: var(--aqi-color, #465162);
}