/*
=============================================================================
   Definitive Responsive Styles for Mobile (Max-width: 768px)
==========================================================================
*/

/* Apply a base font size and box-sizing for consistency */
html {
    font-size: 16px;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

@media screen and (max-width: 768px) {
    .header-container {
        padding: 0 1rem;
        flex-direction: column;
        gap: 1rem;
    }

    .logo-image {
        height: 35px;
    }

    nav {
        gap: 1.5rem;
    }

    main {
        padding: 0 1rem;
    }

    /* Hide table headers on mobile */
    table thead {
        display: none;
    }

    /* Reset table elements to behave like simple blocks */
    table, table tbody, table tr, table td {
        display: block;
        width: 100%;
    }

    /* Style each row as a distinct card */
    table tr {
        margin-bottom: 1.5rem;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    /* Core layout for each data cell (label + value) */
    table td {
        display: flex;
        justify-content: space-between; /* Pushes label and value to opposite ends */
        align-items: center;
        padding: 10px 15px;
        border-bottom: 1px solid var(--border-color);
        gap: 1rem; /* Creates space between label and value */
    }

    /* Remove border from the very last cell in a card */
    table tr td:last-of-type {
        border-bottom: none;
    }

    /* Style the data label (e.g., "Factory") */
    table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--primary-color);
        text-align: left;
        flex-shrink: 0; /* Prevents the label from shrinking */
    }

    /* Style the data value (e.g., "VSF") */
    table td > span {
        text-align: right;
        word-break: break-word;
        min-width: 0; /* CRITICAL for preventing flexbox overflow */
    }

    /* Ensure links within values are also aligned and wrap correctly */
    table td a {
        text-align: right;
        word-break: break-all;
    }

    /* === Specific adjustments for the clasp codes table === */
    #clasp-codes-table td[data-label="Factory"],
    #clasp-codes-table td[data-label="Serial Number"],
    #clasp-codes-table td[data-label="Clasp Code"] {
        display: none;
    }

    #clasp-codes-table td[data-col="variations"] {
        display: block;
        padding: 0 !important;
    }

    #clasp-codes-table td[data-col="variations"]::before {
        display: none;
    }

    .mobile-variations {
        display: block;
    }

    .variations-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 0;
        box-shadow: none;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        overflow: hidden;
    }

    #clasp-codes-table .variations-table thead {
        display: table-header-group;
    }

    #clasp-codes-table .variations-table tr {
         display: table-row;
    }

    #clasp-codes-table .variations-table th,
    #clasp-codes-table .variations-table td {
        display: table-cell;
        padding: 8px 12px;
        border-bottom: 1px solid var(--border-color);
    }

    #clasp-codes-table .variations-table tr:last-child td {
        border-bottom: none;
    }

    #clasp-codes-table .variations-table th {
        background-color: #f8f9fa;
        font-weight: 600;
        font-size: 11px;
        color: var(--primary-color);
        text-align: left;
    }

    #clasp-codes-table .variations-table td {
        font-size: 12px;
        background: white;
        text-align: left !important;
        white-space: pre-wrap;
        vertical-align: top;
    }

    #clasp-codes-table .variations-table th:nth-child(1),
    #clasp-codes-table .variations-table td:nth-child(1) {
        width: 20%;
    }

    #clasp-codes-table .variations-table th:nth-child(2),
    #clasp-codes-table .variations-table td:nth-child(2) {
        width: 50%;
    }

    #clasp-codes-table .variations-table th:nth-child(3),
    #clasp-codes-table .variations-table td:nth-child(3) {
        width: 30%;
    }

    #clasp-codes-table .variations-table td {
        text-align: left !important;
        white-space: pre-wrap;
        vertical-align: top;
    }

    /* === Specific adjustments for the reviews table === */

    /* Create a special layout for the image cell that includes brand, model, reference */
    #reviews-table td[data-col="image_url"] {
        padding: 15px;
        display: flex;
        flex-direction: column;
        gap: 15px;
        border-bottom: 1px solid var(--border-color);
    }

    /* Top section with image and basic details */
    .mobile-image-section {
        display: flex;
        align-items: flex-start;
        gap: 15px;
    }

    #reviews-table td[data-col="image_url"]::before {
        display: none; /* No label needed for the image */
    }

    .review-image {
        width: 100px;
        height: 100px;
        flex-shrink: 0;
        border-radius: 6px;
    }

    /* Container for the text details next to the image */
    .mobile-details {
        flex: 1;
        display: flex !important; /* Override desktop display: none */
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    .mobile-details .detail-item {
        font-size: 14px;
        line-height: 1.3;
    }

    .mobile-details .detail-label {
        font-weight: 600;
        color: var(--primary-color);
        margin-right: 6px;
    }

    .mobile-details .detail-value {
        color: var(--text-color);
        word-break: break-word;
    }

    /* Mobile variations table - completely override mobile card styles */
    #reviews-table .mobile-details .mobile-variations {
        margin: 10px auto 0 auto;
        width: 98%;
        border-collapse: collapse;
        font-size: 12px;
        display: table !important;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        overflow: hidden;
    }

    #reviews-table .mobile-details .mobile-variations thead {
        display: table-header-group !important;
    }

    #reviews-table .mobile-details .mobile-variations tbody {
        display: table-row-group !important;
    }

    #reviews-table .mobile-details .mobile-variations tr {
        display: table-row !important;
        margin-bottom: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    #reviews-table .mobile-details .mobile-variations th,
    #reviews-table .mobile-details .mobile-variations td {
        display: table-cell !important;
        border: 1px solid var(--border-color);
        padding: 6px 8px !important;
        text-align: left !important;
        vertical-align: top !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        gap: 0 !important;
        width: auto !important;
        min-width: 0 !important;
    }

    #reviews-table .mobile-details .mobile-variations th {
        background-color: #f8f9fa !important;
        font-weight: 600 !important;
        font-size: 11px !important;
        color: var(--primary-color) !important;
    }

    #reviews-table .mobile-details .mobile-variations td {
        word-break: break-word;
        font-size: 12px !important;
        background: white !important;
    }

    /* Preserve color highlighting in mobile variations table */
    #reviews-table .mobile-details .mobile-variations tr.highlight-gold td {
        background-color: var(--gold-highlight) !important;
    }

    #reviews-table .mobile-details .mobile-variations tr.highlight-green td {
        background-color: var(--green-highlight) !important;
    }

    #reviews-table .mobile-details .mobile-variations .rating-cell {
        text-align: center !important;
        font-weight: 600 !important;
    }

    /* Completely remove mobile card pseudo-elements from variations table */
    #reviews-table .mobile-details .mobile-variations td::before {
        display: none !important;
        content: none !important;
    }

    #reviews-table .mobile-details .mobile-variations td[data-label]::before {
        display: none !important;
        content: none !important;
    }

    /* Hide the separate brand, model, reference rows since they're now in the image cell */
    #reviews-table td[data-col="brand"],
    #reviews-table td[data-col="model"],
    #reviews-table td[data-col="reference_number"] {
        display: none;
    }

    /* Hide ALL factory/version/movement/rating/notes rows on mobile since they're now in the variations table */
    #reviews-table td[data-col="factory"],
    #reviews-table td[data-col="version"],
    #reviews-table td[data-col="movement"],
    #reviews-table td[data-col="rating"],
    #reviews-table td[data-col="notes"] {
        display: none !important;
    }

    /* Hide additional desktop variation rows on mobile to prevent extra lines */
    #reviews-table tr.desktop-only-variation,
    #clasp-codes-table tr.desktop-only-variation {
        display: none !important;
    }

    #clasp-codes-table .desktop-details {
        display: none;
    }

    #clasp-codes-table .mobile-details-container {
        display: block;
    }
}