/**
 * Mobile Responsive Styles for PDI Form
 * Applies only to screens smaller than 768px
 */
@media only screen and (max-width: 768px) {

    /* Wrapper Adjustment */
    .pdi-view-wrapper {
        width: 100% !important;
        height: auto !important;
        padding: 10px !important;
        box-shadow: none !important;
    }

    /* General Table Reset for Layout Tables */
    /* Force tables to behave like divs for responsive stacking */
    .pdi-view-wrapper table,
    .pdi-view-wrapper tbody,
    .pdi-view-wrapper tr {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Ensure cells display as block to stack them */
    .pdi-view-wrapper td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 1. Header Table (Logo & Info) */
    /* It's usually a single row with 2 cells */
    .pdi-header-wrapper table td {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        border: none !important;
    }

    .pdi-header-wrapper img {
        margin: 0 auto !important;
    }

    /* 2. Customer Info (Grid Layout) */
    /* The template uses a table with multiple rows/cols. On mobile, we might want to let them flow or stack */
    /* Since it's compact, we can try to keep it as table but allow scrolling or just ensure it fits */
    /* Or better: Stack the label/value pairs */

    /* Let's target the Customer Info table specifically if we can. It is the 2nd table in the wrapper usually */
    /* Since we can't rely on order efficiently, we'll try a generic approach for the main data tables */

    /* 3. Checklist Layout (3 Columns to 1 Column) */
    /* This table has 3 TDs with width="33%" inside a single TR */
    td[width="33%"] {
        display: block !important;
        width: 100% !important;
        padding-right: 0 !important;
        padding-bottom: 15px !important;
    }

    /* 4. Car Diagrams (2x2 Grid to Stack) */
    /* These are inside a table with TDs width="50%" */
    td[width="50%"] {
        display: block !important;
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #ccc !important;
        padding: 15px 0 !important;
    }

    /* Fix image containers */
    .pdi-view-wrapper div[style*="position: relative"] {
        margin: 0 auto !important;
        /* Ensure they don't overflow */
        max-width: 100% !important;
    }

    /* 5. Footer Signatures */
    /* Also uses width="33%" tds, which we already targetted above to stack */

    /* Utility Overrides */
    .pdi-view-wrapper table {
        width: 100% !important;
    }

    /* Ensure inputs/text fits */
    .pdi-view-wrapper input,
    .pdi-view-wrapper select,
    .pdi-view-wrapper textarea {
        max-width: 100% !important;
    }

    /* Hide desktop-only elements if any (not present currently, but good practice) */
    .desktop-only {
        display: none !important;
    }

    /* Make sure damage markers scale if image scales */
    /* The markers use % positioning, so they should be fine as long as the parent div scales proportionally. */
    /* The parent divs have fixed px widths in inline styles (e.g. 280px). We need to override that for small mobiles */


    /* However, the side view is 320px width. That might be tight on 320px screens. */
    .pdi-view-wrapper div[style*="width: 320px"] {
        max-width: 100% !important;
        /* If we shrink width, height must shrink to maintain ratio. */
        /* Since it's inline style height, we can use: */
        height: auto !important;
        aspect-ratio: 320 / 133;
    }

    .pdi-view-wrapper div[style*="width: 280px"] {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Interior: 280x280 -> 1/1 */
    .pdi-view-wrapper div[style*="width: 280px"][style*="height: 280px"] {
        aspect-ratio: 1 / 1;
    }

    /* Top: 280x350 -> 0.8 */
    .pdi-view-wrapper div[style*="width: 280px"][style*="height: 350px"] {
        aspect-ratio: 280 / 350;
    }

    /* Boot: 280x224 -> 1.25 */
    .pdi-view-wrapper div[style*="width: 280px"][style*="height: 224px"] {
        aspect-ratio: 280 / 224;
    }

}