/**
 * 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: 8px 8px;
        gap: 4px;
        grid-template-columns: 1fr 45px 45px;
        font-size: 9px;
    }

    .v2-queue__row {
        padding: 8px 8px;
        gap: 4px;
        grid-template-columns: 1fr 60px 38px 38px;
    }

    /* Keep inline but very compact */
    .v2-queue__inline {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2px;
        row-gap: 2px;
    }

    /* Smaller flags */
    .v2-queue__flag {
        width: 16px;
        height: 11px;
        border-radius: 1px;
    }

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

    /* Smaller arrow */
    .v2-queue__arrow {
        font-size: 9px;
        margin: 0;
        opacity: 0.5;
    }

    /* Smaller checkpoint name */
    .v2-queue__name {
        font-size: 11px;
        font-weight: 600;
        width: 100%;
    }

    /* Very compact wait time badge */
    .v2-queue__wait {
        padding: 3px 5px;
        min-width: 48px;
        border-radius: 5px;
    }

    .v2-queue__wait-value {
        font-size: 12px;
        font-weight: 700;
    }

    .v2-queue__wait-label {
        font-size: 6px;
        letter-spacing: 0.2px;
    }

    /* Very compact car/bus cells */
    .v2-queue__cell--cars,
    .v2-queue__cell--buses {
        padding: 0;
        text-align: center;
    }

    .v2-queue__count {
        font-size: 13px;
        font-weight: 600;
    }

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

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

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

    .v2-queue__row {
        padding: 8px 10px;
        gap: 6px;
        grid-template-columns: 1fr 70px 44px 44px;
    }

    /* Compact inline layout - all on one line */
    .v2-queue__inline {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2px 3px;
        row-gap: 3px;
    }

    /* Smaller flags */
    .v2-queue__flag {
        width: 18px;
        height: 12px;
        border-radius: 2px;
    }

    /* Smaller times */
    .v2-queue__time-inline {
        font-size: 9px;
        color: var(--v2-text-muted);
    }

    /* Compact arrow */
    .v2-queue__arrow {
        font-size: 10px;
        margin: 0;
        opacity: 0.6;
    }

    /* Checkpoint name styling */
    .v2-queue__name {
        font-size: 12px;
        font-weight: 600;
        width: 100%;
        margin-top: 1px;
    }

    /* Much more compact wait badge */
    .v2-queue__wait {
        padding: 4px 6px;
        min-width: 55px;
        border-radius: 6px;
    }

    .v2-queue__wait-value {
        font-size: 13px;
        font-weight: 700;
    }

    .v2-queue__wait-label {
        font-size: 7px;
        letter-spacing: 0.3px;
    }

    /* Compact car/bus cells */
    .v2-queue__cell--cars,
    .v2-queue__cell--buses {
        text-align: center;
        padding: 0;
    }

    .v2-queue__count {
        font-size: 14px;
        font-weight: 600;
    }

    .v2-queue__label {
        font-size: 8px;
        text-transform: uppercase;
    }

    /* Trend arrow smaller */
    .v2-queue__trend {
        width: 10px;
        height: 10px;
    }
}

/* ==========================================================================
   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;
    }
}