/**
 * Tour Booking Table - Mobile Compact Styles
 * แสดงอย่างน้อย 4 รายการบน mobile
 */

/* ========================================
   MOBILE COMPACT VIEW (max-width: 768px)
   ======================================== */
@media (max-width: 768px) {
    /* Container - ลด margin */
    .booking-table-container-tbl419 {
        margin-bottom: 1rem;
    }

    /* Card Row - ลด padding และ margin ให้กระชับ */
    .booking-table-tbl419 tbody tr {
        margin-bottom: 10px;
        padding: 12px;
        border-radius: 10px;
    }

    /* Cell base - ลด padding */
    .booking-table-tbl419 tbody td {
        padding: 0;
    }

    /* ========== DATES SECTION ========== */
    .dates-cell-tbl419 {
        padding-bottom: 8px !important;
        margin-bottom: 8px;
    }

    /* Flight Route - Compact */
    .flight-route-tbl419 {
        margin-bottom: 6px;
        padding-bottom: 6px;
        gap: 2px;
    }

    .route-codes-tbl419 {
        gap: 4px;
    }

    .route-code-tbl419 {
        font-size: 0.9rem;
    }

    .route-plane-tbl419 {
        font-size: 0.75rem;
    }

    .route-cities-tbl419 {
        font-size: 0.7rem;
    }

    /* Dates Grid - Inline Compact */
    .dates-grid-tbl419 {
        gap: 12px;
    }

    .date-col-tbl419 {
        gap: 1px;
    }

    .date-label-tbl419 {
        font-size: 0.6rem;
        letter-spacing: 0.2px;
    }

    .date-day-tbl419 {
        font-size: 0.8rem;
    }

    .date-month-tbl419 {
        font-size: 0.85rem;
    }

    /* ========== PRICES SECTION ========== */
    .prices-cell-tbl419 {
        padding: 8px 0 !important;
        margin-top: 8px;
        gap: 6px !important;
        align-items: center !important;
    }

    .price-row-tbl419 {
        gap: 3px;
    }

    .price-label-tbl419 {
        font-size: 0.7rem;
    }

    .price-label-tbl419 i {
        font-size: 0.65rem;
    }

    .label-text-tbl419 {
        display: inline !important;
    }

    .original-price-tbl419 {
        font-size: 0.6rem;
    }

    .current-price-tbl419 {
        font-size: 0.95rem;
    }

    .price-row-child-tbl419::before {
        margin: 0 4px;
    }

    /* ========== SUPPLEMENT SECTION ========== */
    .supplement-cell-tbl419 {
        padding: 6px 0 !important;
        margin-top: 6px;
        gap: 4px;
    }

    .supplement-label-tbl419 {
        font-size: 0.7rem;
    }

    .supplement-label-tbl419 i {
        font-size: 0.65rem;
    }

    .label-text-supp-tbl419 {
        display: inline !important;
    }

    .supplement-value-tbl419 {
        font-size: 0.95rem;
    }

    /* ========== STATUS SECTION ========== */
    .status-cell-tbl419 {
        padding: 6px 0 !important;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .status-badge-tbl419 {
        padding: 3px 8px;
        font-size: 0.7rem;
        border-radius: 4px;
    }

    .seats-info-tbl419 {
        margin-top: 0;
        font-size: 0.68rem;
    }

    .seats-info-tbl419 i {
        font-size: 0.7rem;
    }

    /* ========== ACTION BUTTON ========== */
    .action-cell-tbl419 {
        padding-top: 8px !important;
        margin-top: 8px;
    }

    .book-now-btn-tbl419,
    .fully-booked-btn-tbl419 {
        min-height: 40px;
        padding: 8px 16px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

    .book-now-btn-tbl419 i,
    .fully-booked-btn-tbl419 i {
        font-size: 0.8rem;
    }
}

/* ========================================
   ULTRA COMPACT - หน้าจอเล็กมาก (max-width: 400px)
   ======================================== */
@media (max-width: 400px) {
    .booking-table-tbl419 tbody tr {
        margin-bottom: 8px;
        padding: 10px;
        border-radius: 8px;
    }

    /* Dates - Super Compact */
    .dates-cell-tbl419 {
        padding-bottom: 6px !important;
        margin-bottom: 6px;
    }

    .flight-route-tbl419 {
        margin-bottom: 4px;
        padding-bottom: 4px;
    }

    .route-code-tbl419 {
        font-size: 0.85rem;
    }

    .route-cities-tbl419 {
        font-size: 0.65rem;
    }

    .dates-grid-tbl419 {
        gap: 10px;
    }

    .date-label-tbl419 {
        font-size: 0.55rem;
    }

    .date-day-tbl419 {
        font-size: 0.75rem;
    }

    .date-month-tbl419 {
        font-size: 0.8rem;
    }

    /* Prices - Super Compact */
    .prices-cell-tbl419 {
        padding: 6px 0 !important;
        margin-top: 6px;
        gap: 4px !important;
    }

    .price-label-tbl419 {
        font-size: 0.65rem;
    }

    .original-price-tbl419 {
        font-size: 0.55rem;
    }

    .current-price-tbl419 {
        font-size: 0.88rem;
    }

    /* Supplement - Super Compact */
    .supplement-cell-tbl419 {
        padding: 4px 0 !important;
        margin-top: 4px;
    }

    .supplement-label-tbl419 {
        font-size: 0.65rem;
    }

    .supplement-value-tbl419 {
        font-size: 0.88rem;
    }

    /* Status */
    .status-cell-tbl419 {
        padding: 4px 0 !important;
    }

    .status-badge-tbl419 {
        padding: 2px 6px;
        font-size: 0.65rem;
    }

    .seats-info-tbl419 {
        font-size: 0.62rem;
    }

    /* Action Button */
    .action-cell-tbl419 {
        padding-top: 6px !important;
        margin-top: 6px;
    }

    .book-now-btn-tbl419,
    .fully-booked-btn-tbl419 {
        min-height: 36px;
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}

/* ========================================
   HORIZONTAL COMPACT LAYOUT OPTION
   สำหรับหน้าจอ 480px+ - แสดงแบบ 2 คอลัมน์
   ======================================== */
@media (min-width: 481px) and (max-width: 768px) {
    /* ปรับ layout ให้ information อยู่ในแนวนอนมากขึ้น */
    .booking-table-tbl419 tbody tr {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Prices และ Supplement อยู่บรรทัดเดียวกัน */
    .prices-cell-tbl419 {
        display: flex;
        flex-wrap: wrap;
        border-top: 1px solid var(--tour-border-tbl419);
    }

    .supplement-cell-tbl419 {
        border-top: none;
        padding-left: 12px !important;
    }

    /* Status และ Action อยู่บรรทัดเดียวกัน */
    .status-cell-tbl419 {
        border-top: 1px solid var(--tour-border-tbl419);
    }
}

/* ========================================
   ALTERNATIVE: INLINE PRICES & SUPPLEMENT
   ========================================  */
@media (max-width: 768px) {
    /* รวม Price และ Supplement ในบรรทัดเดียว */
    .prices-cell-tbl419 {
        flex-wrap: wrap;
    }

    /* ถ้ามี supplement ให้แสดง inline กับ price */
    .supplement-cell-tbl419:not(:empty) {
        border-top: none !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Combine row for prices and supplement */
    .booking-table-tbl419 tbody tr .prices-cell-tbl419 + .supplement-cell-tbl419:not(:empty) {
        display: inline-flex;
        padding-left: 12px !important;
    }
}

/* ========================================
   DARK MODE - COMPACT
   ======================================== */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
    .booking-table-tbl419 tbody tr {
        background: #1e293b;
        border-color: #334155;
    }

    .dates-cell-tbl419,
    .prices-cell-tbl419,
    .supplement-cell-tbl419,
    .action-cell-tbl419,
    .status-cell-tbl419 {
        border-color: #334155;
    }
}

/* ========================================
   ANIMATION - Smooth transitions
   ======================================== */
@media (max-width: 768px) {
    .booking-table-tbl419 tbody tr {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .booking-table-tbl419 tbody tr:active {
        transform: scale(0.99);
    }
}

/* ========================================
   EXPIRED ROW - Compact adjustments
   ======================================== */
@media (max-width: 768px) {
    .expired-row-tbl419 {
        opacity: 0.5;
        padding: 8px !important;
    }

    .expired-row-tbl419 .action-cell-tbl419 {
        padding-top: 6px !important;
        margin-top: 6px;
    }
}

/* ========================================
   SAFE AREA - iPhone X+ support
   ======================================== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .booking-table-container-tbl419 {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}