/* Mobile-specific fixes for account page order table */
@media (max-width: 479px) {
    /* Override the hiding of order-action column */
    .order-action, .order-table thead th:last-child {
        display: table-cell !important;
    }
    
    /* Make the order table more mobile-friendly */
    .order-table {
        font-size: 1.2rem;
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
    }
    
    /* Adjust column widths for mobile */
    .order-table th,
    .order-table td {
        padding: 0.5rem 0.2rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        vertical-align: middle;
    }
    
    /* Make order number column narrower */
    .order-number {
        width: 12% !important;
    }
    
    /* Make date column narrower */
    .order-date {
        width: 22% !important;
    }
    
    /* Make status column narrower */
    .order-status {
        width: 18% !important;
    }
    
    /* Make total column narrower */
    .order-total {
        width: 20% !important;
    }
    
    /* Make actions column narrower but visible */
    .order-action {
        width: 28% !important;
        text-align: center;
    }
    
    /* Style the Detail button for mobile */
    .order-action .btn {
        font-size: 0.9rem;
        padding: 0.3rem 0.4rem;
        white-space: nowrap;
        min-width: 50px;
        display: inline-block;
        margin: 0.1rem;
    }
    
    /* Hide the Review button on very small screens to save space */
    .order-action .btn:not(:first-child) {
        display: none;
    }
    
    /* Make the table scrollable horizontally if needed */
    .order-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    
    /* Ensure the table header is visible */
    .order-table thead {
        display: table-header-group;
    }
    
    /* Style the status spans to be more compact */
    .order-status span {
        font-size: 0.8rem;
        padding: 0.2rem 0.3rem;
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* Make order total text more compact */
    .order-total span {
        font-size: 0.9rem;
        line-height: 1.2;
        display: block;
    }
    
    /* Make order number more compact */
    .order-number a {
        font-size: 0.9rem;
        font-weight: 600;
    }
    
    /* Make date more compact */
    .order-date time {
        font-size: 0.8rem;
        line-height: 1.2;
    }
}

/* For slightly larger mobile screens (480px - 576px) */
@media (min-width: 480px) and (max-width: 575px) {
    .order-action, .order-table thead th:last-child {
        display: table-cell !important;
    }
    
    .order-table {
        font-size: 1.3rem;
        table-layout: fixed;
    }
    
    /* Adjust column widths for medium mobile */
    .order-number {
        width: 15% !important;
    }
    
    .order-date {
        width: 25% !important;
    }
    
    .order-status {
        width: 20% !important;
    }
    
    .order-total {
        width: 20% !important;
    }
    
    .order-action {
        width: 20% !important;
        text-align: center;
    }
    
    .order-action .btn {
        font-size: 1rem;
        padding: 0.4rem 0.6rem;
        display: inline-block;
        margin: 0 0.2rem;
        min-width: 60px;
    }
    
    /* Show both Detail and Review buttons on slightly larger screens */
    .order-action .btn {
        display: inline-block;
        margin: 0 0.2rem;
    }
    
    /* Make status spans more readable */
    .order-status span {
        font-size: 0.9rem;
        padding: 0.3rem 0.4rem;
    }
    
    /* Make other text more readable */
    .order-total span {
        font-size: 1rem;
    }
    
    .order-number a {
        font-size: 1rem;
    }
    
    .order-date time {
        font-size: 0.9rem;
    }
}

/* Ensure the table is responsive and doesn't break layout */
@media (max-width: 767px) {
    .order-table {
        min-width: 100%;
        border-collapse: collapse;
    }
    
    /* Make sure text doesn't overflow */
    .order-table td {
        max-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Special handling for order status */
    .order-status span {
        font-size: 1rem;
        padding: 0.2rem 0.4rem;
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* Special handling for order total */
    .order-total span {
        font-size: 1.1rem;
        display: block;
        line-height: 1.2;
    }
    
    /* Ensure action buttons are always visible and clickable */
    .order-action {
        min-width: 80px;
    }
    
    .order-action .btn {
        min-height: 32px;
        line-height: 1.2;
        text-align: center;
        display: inline-block;
        vertical-align: middle;
    }
    
    /* Make sure the table container allows horizontal scrolling if needed */
    .order-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        margin: 0;
        padding: 0;
    }
}

/* Additional fixes for very small screens */
@media (max-width: 360px) {
    .order-action .btn {
        font-size: 0.8rem;
        padding: 0.2rem 0.3rem;
        min-width: 45px;
    }
    
    .order-table {
        font-size: 1rem;
    }
    
    .order-table th,
    .order-table td {
        padding: 0.3rem 0.1rem;
    }
    
    .order-status span {
        font-size: 0.7rem;
        padding: 0.1rem 0.2rem;
    }
    
    .order-total span {
        font-size: 0.8rem;
    }
    
    .order-number a {
        font-size: 0.8rem;
    }
    
    .order-date time {
        font-size: 0.7rem;
    }
}