/**
 * Homepage Queue Table - Mobile Enhancements
 *
 * Improves mobile display of the live queue table.
 * Does NOT change HTML structure (used by PM2 image generators).
 * Load after home_v2.min.css
 */

/* ==========================================================================
   VERY SMALL SCREENS (< 360px) - e.g., iPhone SE, older devices
   ========================================================================== */
@media (max-width: 359px) {
    /* Reduce padding to maximize content space */
    .v2-queue__header {
        padding: 10px 12px;
        gap: 4px;
        grid-template-columns: 1fr 60px 60px;
        font-size: 10px;
    }

    .v2-queue__row {
        padding: 10px 12px;
        gap: 6px;
        grid-template-columns: 1fr auto 55px 55px;
    }

    /* Stack checkpoint info vertically */
    .v2-queue__inline {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    /* Keep flags and times on one row */
    .v2-queue__inline > .v2-queue__flag:first-child,
    .v2-queue__inline > .v2-queue__time-inline:first-of-type,
    .v2-queue__inline > .v2-queue__arrow,
    .v2-queue__inline > .v2-queue__flag:nth-child(4),
    .v2-queue__inline > .v2-queue__time-inline:nth-of-type(2) {
        display: inline-flex;
    }

    /* Smaller flags */
    .v2-queue__flag {
        width: 20px;
        height: 14px;
    }

    /* Smaller times */
    .v2-queue__time-inline {
        font-size: 9px;
    }

    /* Smaller checkpoint name */
    .v2-queue__name {
        font-size: 12px;
        max-width: 100%;
    }

    /* More compact wait time badge */
    .v2-queue__wait {
        padding: 6px 8px;
        min-width: 50px;
        border-radius: 8px;
    }

    .v2-queue__wait-value {
        font-size: 14px;
    }

    .v2-queue__wait-label {
        font-size: 8px;
    }

    /* Compact car/bus count cells */
    .v2-queue__cell--cars,
    .v2-queue__cell--buses {
        padding: 0 2px;
    }

    .v2-queue__count {
        font-size: 15px;
    }

    .v2-queue__label {
        font-size: 9px;
    }

    /* Smaller trend arrow */
    .v2-queue__trend {
        width: 12px;
        height: 12px;
    }
}

/* ==========================================================================
   SMALL SCREENS (360px - 479px) - Most common mobile range
   ========================================================================== */
@media (min-width: 360px) and (max-width: 479px) {
    .v2-queue__header {
        padding: 12px 14px;
        grid-template-columns: 1fr 75px 75px;
    }

    .v2-queue__row {
        padding: 10px 14px;
        gap: 8px;
        grid-template-columns: 1fr auto 60px 60px;
    }

    /* Better inline wrapping */
    .v2-queue__inline {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 3px 4px;
        row-gap: 4px;
    }

    /* Group route info (flags + times) on its own line */
    .v2-queue__inline::before {
        content: '';
        flex-basis: 100%;
        height: 0;
        order: 5;
    }

    /* Make name appear on second line */
    .v2-queue__name {
        order: 6;
        width: 100%;
        font-size: 13px;
        margin-top: 2px;
    }

    .v2-queue__flag {
        width: 22px;
        height: 15px;
    }

    .v2-queue__time-inline {
        font-size: 10px;
    }

    .v2-queue__arrow {
        font-size: 12px;
        margin: 0 1px;
    }

    /* Compact wait badge */
    .v2-queue__wait {
        padding: 6px 10px;
        min-width: 65px;
    }

    .v2-queue__wait-value {
        font-size: 15px;
    }

    .v2-queue__count {
        font-size: 16px;
    }

    .v2-queue__label {
        font-size: 9px;
    }
}

/* ==========================================================================
   MEDIUM-SMALL SCREENS (480px - 599px) - Large phones, small tablets
   ========================================================================== */
@media (min-width: 480px) and (max-width: 599px) {
    .v2-queue__header {
        padding: 14px 18px;
        grid-template-columns: 1fr 85px 85px;
    }

    .v2-queue__row {
        padding: 12px 18px;
        grid-template-columns: 1fr auto 70px 70px;
        gap: var(--v2-space-sm);
    }

    .v2-queue__inline {
        flex-wrap: nowrap;
        gap: 5px;
    }

    .v2-queue__name {
        font-size: 14px;
    }

    .v2-queue__flag {
        width: 24px;
        height: 16px;
    }

    .v2-queue__wait {
        min-width: 75px;
    }
}

/* ==========================================================================
   TOUCH TARGETS - Ensure minimum 44px tap targets (WCAG)
   ========================================================================== */
@media (max-width: 767px) {
    /* Make entire row tappable with good touch area */
    .v2-queue__row {
        min-height: 56px;
    }

    /* Ensure link areas are finger-friendly */
    .v2-queue__link {
        display: block;
        padding: 4px 0;
    }
}

/* ==========================================================================
   FILTER CHIPS - Mobile improvements
   ========================================================================== */
@media (max-width: 479px) {
    .v2-filter-row {
        gap: 6px;
        padding: 0 4px;
    }

    .v2-filter-chip {
        padding: 6px 10px;
        font-size: 12px;
    }

    /* Allow horizontal scroll for filter chips */
    .v2-filters {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .v2-filters::-webkit-scrollbar {
        display: none;
    }

    .v2-filter-row {
        flex-wrap: nowrap;
        min-width: max-content;
    }
}

/* ==========================================================================
   LANDSCAPE MOBILE - When phone is rotated
   ========================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .v2-queue__row {
        min-height: 48px;
        padding: 8px 16px;
    }

    .v2-queue__wait {
        padding: 4px 8px;
    }

    /* Allow more items visible in landscape */
    .v2-queue {
        min-height: 300px;
    }
}

/* ==========================================================================
   STATUS BORDERS - More visible on mobile
   ========================================================================== */
@media (max-width: 599px) {
    .v2-queue__row[data-status="good"] {
        border-left-width: 4px;
    }

    .v2-queue__row[data-status="busy"] {
        border-left-width: 4px;
    }

    .v2-queue__row[data-status="normal"] {
        border-left-width: 4px;
    }
}

/* ==========================================================================
   DARK MODE MOBILE ADJUSTMENTS
   ========================================================================== */
@media (max-width: 599px) {
    [data-theme="dark"] .v2-queue__row:hover {
        transform: none; /* Disable hover transform on mobile (no hover anyway) */
    }

    [data-theme="dark"] .v2-queue__inline {
        gap: 3px 5px;
    }
}

/* ==========================================================================
   SECTION HEADER - Mobile improvements
   ========================================================================== */
@media (max-width: 479px) {
    .v2-section__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .v2-section__title {
        font-size: 18px;
    }

    .v2-section__subtitle {
        font-size: 12px;
    }

    .v2-section__header-controls {
        width: 100%;
    }

    .v2-share-dropdown__trigger {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   QUEUE PANEL FOOTER - Mobile improvements
   ========================================================================== */
@media (max-width: 479px) {
    .v2-queue-panel__footer {
        flex-direction: column;
        gap: 8px;
        padding: 12px;
    }

    .v2-queue-panel__footer a,
    .v2-queue-panel__footer .v2-report-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}