/* ================================================
   RaceMetrics Global Mobile Responsive Fixes
   Shared across all pages
   ================================================ */

/* -----------------------------------------------
   GLOBAL ISSUE 1: Scrollable Table Affordance
   Show visible scrollbar on mobile so users know
   tables can be scrolled horizontally
   ----------------------------------------------- */
@media (max-width: 768px) {
    .overflow-x-auto,
    [style*="overflow-x:auto"],
    [style*="overflow-x: auto"] {
        -webkit-overflow-scrolling: touch;
    }

    /* Visible thin scrollbar as scroll affordance */
    .overflow-x-auto::-webkit-scrollbar,
    [style*="overflow-x:auto"]::-webkit-scrollbar,
    [style*="overflow-x: auto"]::-webkit-scrollbar {
        height: 6px;
    }
    .overflow-x-auto::-webkit-scrollbar-track,
    [style*="overflow-x:auto"]::-webkit-scrollbar-track,
    [style*="overflow-x: auto"]::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 3px;
    }
    .overflow-x-auto::-webkit-scrollbar-thumb,
    [style*="overflow-x:auto"]::-webkit-scrollbar-thumb,
    [style*="overflow-x: auto"]::-webkit-scrollbar-thumb {
        background: #94a3b8;
        border-radius: 3px;
    }
    .overflow-x-auto,
    [style*="overflow-x:auto"],
    [style*="overflow-x: auto"] {
        scrollbar-width: thin;
        scrollbar-color: #94a3b8 #f1f5f9;
    }

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

/* -----------------------------------------------
   GLOBAL ISSUE 2: Touch Target Minimums (44px)
   Date buttons, calendar nav, close buttons,
   toolbar buttons
   ----------------------------------------------- */
@media (max-width: 768px) {
    /* Date navigation pills (dashboard, racecard) */
    .rc-date-tab,
    .rc-results-tab {
        min-height: 44px;
        padding: 12px 16px;
        display: inline-flex;
        align-items: center;
    }

    /* Calendar month nav arrows */
    .rc-calendar-nav {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Racecard menu date/time pills */
    .rp-date-pill,
    .rp-time-pill {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Menu close button */
    .rp-menu-close {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Hamburger button */
    .rp-hamburger-btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Nav buttons (prev/next race) */
    .nav-btn {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* -----------------------------------------------
   GLOBAL ISSUE 3: Navigation Tab Sizing
   Ensure nav tabs are readable and tappable
   on very small screens
   ----------------------------------------------- */
@media (max-width: 414px) {
    .nav-tab {
        padding: 10px 6px;
        font-size: 11px;
    }
}
@media (max-width: 375px) {
    .nav-tab {
        padding: 8px 4px;
        font-size: 10px;
    }
}

/* -----------------------------------------------
   GLOBAL ISSUE 4: Full-Width Dropdowns on Mobile
   Exclude tiny in-table filters (fe-col-filter)
   ----------------------------------------------- */
@media (max-width: 480px) {
    select:not(.fe-col-filter):not(.fe-surface-filter):not(.rc-calendar-select) {
        min-height: 40px;
    }
}

/* -----------------------------------------------
   GLOBAL ISSUE 5: Reduced Container Padding
   Save screen real estate on mobile
   ----------------------------------------------- */
@media (max-width: 480px) {
    main.container {
        padding-left: 6px !important;
        padding-right: 6px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}
@media (max-width: 375px) {
    main.container {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}

/* -----------------------------------------------
   PRICING / COMPARISON TABLE
   Ensure horizontal scroll with min-width
   ----------------------------------------------- */
@media (max-width: 768px) {
    .comparison-table {
        min-width: 700px;
    }
    .comparison-table th,
    .comparison-table td {
        padding: 12px 8px;
        font-size: 12px;
        white-space: nowrap;
    }
}

/* -----------------------------------------------
   HOMEPAGE: Heading Sizes on Mobile
   ----------------------------------------------- */
@media (max-width: 414px) {
    .pricing-card {
        padding: 16px 12px;
    }
    .pricing-card h3 {
        font-size: 16px;
    }
    .pricing-card .text-3xl,
    .pricing-card .text-4xl {
        font-size: 24px;
    }
}

/* -----------------------------------------------
   HOMEPAGE: CTA Buttons Stacking
   ----------------------------------------------- */
@media (max-width: 480px) {
    .cta-btn {
        display: block;
        width: 100%;
        text-align: center;
        padding: 14px 16px;
        min-height: 44px;
    }
}

/* -----------------------------------------------
   DASHBOARD: Movers Grid Spacing
   ----------------------------------------------- */
@media (max-width: 375px) {
    #movers-container .grid {
        gap: 4px;
    }
    #movers-container .grid > div {
        padding: 6px;
    }
}

/* -----------------------------------------------
   DASHBOARD: Filter Controls Stacking
   ----------------------------------------------- */
@media (max-width: 480px) {
    #movers-container + div .grid,
    .grid.grid-cols-2.md\:grid-cols-4 {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
}
@media (max-width: 375px) {
    .grid.grid-cols-2.md\:grid-cols-4 {
        gap: 6px;
    }
}

/* -----------------------------------------------
   DASHBOARD: Stats Cards
   ----------------------------------------------- */
@media (max-width: 375px) {
    .grid.grid-cols-3 {
        gap: 4px;
    }
    .grid.grid-cols-3 > div {
        padding: 8px;
    }
}

/* -----------------------------------------------
   DASHBOARD: Calendar Date Tab Scroll
   ----------------------------------------------- */
@media (max-width: 768px) {
    .rc-date-tabs {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,0.3) transparent;
    }
    .rc-date-tabs::-webkit-scrollbar {
        height: 4px;
    }
    .rc-date-tabs::-webkit-scrollbar-track {
        background: transparent;
    }
    .rc-date-tabs::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.3);
        border-radius: 2px;
    }
}

/* -----------------------------------------------
   DASHBOARD: Race Buttons Grid
   ----------------------------------------------- */
@media (max-width: 480px) {
    .rc-race-grid {
        gap: 6px;
    }
    .rc-race-btn {
        min-width: 110px;
        padding: 10px 12px;
        font-size: 12px;
    }
}

/* -----------------------------------------------
   COMPETITION: Tab Navigation
   Ensure smooth horizontal scroll with
   visible affordance
   ----------------------------------------------- */
@media (max-width: 480px) {
    /* Main competition tabs */
    .flex.gap-1.sm\:gap-2.mb-4.sm\:mb-6.overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        gap: 4px;
        padding-bottom: 6px;
    }

    /* Stats Centre sub-tabs */
    .sc-tab {
        padding: 8px 12px;
        font-size: 12px;
        white-space: nowrap;
    }
}

/* -----------------------------------------------
   COMPETITION: Leaderboard Table
   ----------------------------------------------- */
@media (max-width: 768px) {
    /* Ensure the desktop table scrolls if visible */
    .md\:block.overflow-x-auto table {
        min-width: 500px;
    }
}

/* -----------------------------------------------
   PROFILE LINKS: Tap Target Sizing
   ----------------------------------------------- */
@media (max-width: 480px) {
    a[href*="profile-popup"] {
        display: inline-block;
        padding: 4px 2px;
        min-height: 28px;
        line-height: 1.4;
    }
}

/* -----------------------------------------------
   ACCESSIBILITY: Focus-Visible Rings
   Consistent focus indicators for keyboard navigation
   ----------------------------------------------- */
*:focus-visible {
    outline: 2px solid #E0B422;
    outline-offset: 2px;
    border-radius: 4px;
}