/* CSS Reset for overlay elements only */
.overlay-condition-report-open,
.overlay-condition-report-open *,
.overlay-condition-report-open a,
.overlay-condition-report-open button,
.overlay-condition-report-open input,
.overlay-condition-report-open select,
.overlay-condition-report-open h1,
.overlay-condition-report-open h2,
.overlay-condition-report-open h3,
.overlay-condition-report-open h4,
.overlay-condition-report-open h5 {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    text-decoration: none;
    background: none;
    -webkit-font-smoothing: antialiased;
}

.overlay-condition-report-open menu, 
.overlay-condition-report-open ol, 
.overlay-condition-report-open ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* ===============================================
   OVERLAY COMMON STYLES
   =============================================== */
.overlay-condition-report-open {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    backdrop-filter: blur(2px);
    padding: 5vh 5vw;
}

/* Modal content wrapper */
.overlay-condition-report-open .modal-content-wrapper {
    display: flex;
    flex-direction: row;
    width: 95vw;
    height: 92vh;
    max-width: none;
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* ===============================================
   MENU STYLES
   =============================================== */
.overlay-condition-report-open .menu {
    background: #f5f7fa;
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-end;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    transition: width 0.3s ease-in-out;
    width: 360px;
}

/* Collapsed state */
.overlay-condition-report-open .menu.collapsed {
    width: 52px;
}

/* Navigation styles */
.overlay-condition-report-open .nav {
    padding: 8px 0px 8px 0px;
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: center;
    justify-content: flex-end;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}

/* Tabs layout */
.overlay-condition-report-open .tabs-layout {
    padding: 0px 8px 0px 8px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    position: relative;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Hidden tabs when collapsed */
.overlay-condition-report-open .menu.collapsed .tabs-layout {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Tab styles */
.overlay-condition-report-open .tabs {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.overlay-condition-report-open .all {
    color: #3a3f44;
    text-align: left;
    font-family: var(--text-normal-bold-font-family, "NunitoSans-Bold", sans-serif);
    font-size: var(--text-normal-bold-font-size, 16px);
    line-height: var(--text-normal-bold-line-height, 22.4px);
    font-weight: var(--text-normal-bold-font-weight, 700);
    position: relative;
    align-self: stretch;
    cursor: pointer;
}

.overlay-condition-report-open .tabs2 {
    border-style: solid;
    border-color: #00a5e6;
    border-width: 0px 0px 1.5px 0px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.overlay-condition-report-open .all2 {
    color: #121417;
    text-align: left;
    font-family: var(--text-normal-bold-font-family, "NunitoSans-Bold", sans-serif);
    font-size: var(--text-normal-bold-font-size, 16px);
    line-height: var(--text-normal-bold-line-height, 22.4px);
    font-weight: var(--text-normal-bold-font-weight, 700);
    position: relative;
    align-self: stretch;
    cursor: pointer;
}

/* Menu button styles */
.overlay-condition-report-open .menu-button {
    border-radius: 5px 0px 0px 5px;
    padding: 8px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    position: absolute;
    right: 0;
    top: 8px;
    cursor: pointer;
    background: #f5f7fa;
    border: none;
    outline: none;
    z-index: 10;
}

.overlay-condition-report-open .material-symbols-menu-open-rounded {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    position: relative;
    overflow: visible;
    aspect-ratio: 1;
    transition: transform 0.3s ease-in-out;
}

/* Icon rotation when collapsed */
.overlay-condition-report-open .menu.collapsed .material-symbols-menu-open-rounded {
    transform: rotate(180deg);
}

/* Scroll area */
.overlay-condition-report-open .scroll {
    align-self: stretch;
    flex: 1;
    position: relative;
    overflow-y: auto;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.overlay-condition-report-open .menu.collapsed .scroll {
    opacity: 0;
    visibility: hidden;
}

.overlay-condition-report-open .vert-layout {
    padding: 8px 16px 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;
    width: 360px;
    position: relative;
    min-height: min-content;
}

/* ===============================================
   IMAGE CARDS STYLES
   =============================================== */
.overlay-condition-report-open .image-cards,
.overlay-condition-report-open .image-cards2 {
    background: #fbfcfd;
    border-radius: 5px;
    border-style: solid;
    border-color: #dde3e9;
    border-width: 1px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 328px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.overlay-condition-report-open .image-cards {
    background: #ffffff;
    border-color: #c7dde9;
    box-shadow: 0px 0px 4px 0px rgba(43, 47, 51, 0.25);
}

.overlay-condition-report-open .image-cards.state-selected {
    background: #ffffff;
    border-color: #c7dde9;
    box-shadow: 0px 0px 4px 0px rgba(43, 47, 51, 0.25);
    transform: scale(1.02);
}

.overlay-condition-report-open .image-cards:hover,
.overlay-condition-report-open .image-cards2:hover {
    background: #fdfdfe;
    border-color: #d2e0e9;
    box-shadow: 0px 0px 2px 0px rgba(43, 47, 51, 0.25);
}

.overlay-condition-report-open .image-cards .image,
.overlay-condition-report-open .image-cards2 .image {
    align-self: stretch;
    flex-shrink: 0;
    height: 234px;
    position: relative;
    object-fit: cover;
    aspect-ratio: 4/3;
}

.overlay-condition-report-open .image-cards .format,
.overlay-condition-report-open .image-cards2 .format {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}

.overlay-condition-report-open .image-cards .severity,
.overlay-condition-report-open .image-cards2 .severity {
    background: linear-gradient(to left, rgba(221, 227, 233, 0.5), rgba(221, 227, 233, 0.5)),
                linear-gradient(to left, #f5f7fa, #f5f7fa);
    border-radius: 5px;
    padding: 4px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}

.overlay-condition-report-open .image-cards .status,
.overlay-condition-report-open .image-cards2 .status {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    position: relative;
    aspect-ratio: 1;
}

/* Fix layout alignment for all image cards - desktop and mobile */
.overlay-condition-report-open .image-cards .layout,
.overlay-condition-report-open .image-cards2 .layout,
.overlay-condition-report-open .image-cards.state-selected .layout {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    text-align: center;
}

/* Severity status indicators */
.overlay-condition-report-open .image-cards .severity .status .status-damage-green,
.overlay-condition-report-open .image-cards2 .severity .status .status-damage-green,
.overlay-condition-report-open .caption .severity2 .status .status-damage-green {
    background: var(--color-green, #4caf50);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0%;
    left: 0%;
    bottom: 0%;
    top: 0%;
}

.overlay-condition-report-open .image-cards .severity .status .status-damage-red,
.overlay-condition-report-open .image-cards2 .severity .status .status-damage-red,
.overlay-condition-report-open .caption .severity2 .status .status-damage-red {
    background: var(--color-red, #e63946);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0%;
    left: 0%;
    bottom: 0%;
    top: 0%;
}

.overlay-condition-report-open .image-cards .severity .status .status-damage-yellow,
.overlay-condition-report-open .image-cards2 .severity .status .status-damage-yellow,
.overlay-condition-report-open .caption .severity2 .status .status-damage-yellow {
    background: var(--color-yello, #f4d35e);
    border-radius: 50%;
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0%;
    left: 0%;
    bottom: 0%;
    top: 0%;
}

.overlay-condition-report-open .image-cards .item,
.overlay-condition-report-open .image-cards2 .item {
    color: #3a3f44;
    text-align: center;
    font-family: var(--text-normal-bold-font-family, "NunitoSans-Bold", sans-serif);
    font-size: var(--text-normal-bold-font-size, 16px);
    line-height: var(--text-normal-bold-line-height, 22.4px);
    font-weight: var(--text-normal-bold-font-weight, 700);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.overlay-condition-report-open .image-cards .type,
.overlay-condition-report-open .image-cards2 .type {
    color: #3a3f44;
    text-align: center;
    font-family: var(--text-normal-font-family, "NunitoSans-Medium", sans-serif);
    font-size: var(--text-normal-font-size, 16px);
    line-height: var(--text-normal-line-height, 22.4px);
    font-weight: var(--text-normal-font-weight, 500);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay-condition-report-open .image-cards .description,
.overlay-condition-report-open .image-cards2 .description {
    color: #3a3f44;
    text-align: center;
    font-family: var(--text-normal-font-family, "NunitoSans-Medium", sans-serif);
    font-size: var(--text-normal-font-size, 16px);
    line-height: var(--text-normal-bold-line-height, 22.4px);
    font-weight: var(--text-normal-font-weight, 500);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===============================================
   IMAGES AREA STYLES
   =============================================== */
.overlay-condition-report-open .images {
    background: #001c43;
    padding: 8px 16px 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    flex: 1;
    position: relative;
    transition: margin-left 0.3s ease-in-out;
}

.overlay-condition-report-open .menu.collapsed ~ .images {
    margin-left: 0;
}

.overlay-condition-report-open .top-bar {
    padding: 0px 0px 8px 0px;
    display: flex;
    flex-direction: row;
    gap: 0px;
    justify-content: flex-end;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}

.overlay-condition-report-open .layout2 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1;
    position: relative;
}

.overlay-condition-report-open .vehicle {
    color: var(--color-white, #ffffff);
    text-align: left;
    font-family: var(--heading-h2-font-family, "NunitoSans-ExtraBold", sans-serif);
    font-size: var(--heading-h2-font-size, 32px);
    line-height: var(--heading-h2-line-height, 35.2px);
    font-weight: var(--heading-h2-font-weight, 800);
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.overlay-condition-report-open .vin {
    color: #f5f7fa;
    text-align: left;
    font-family: var(--text-large-font-family, "NunitoSans-Regular", sans-serif);
    font-size: var(--text-large-font-size, 20px);
    line-height: var(--text-large-line-height, 28px);
    font-weight: var(--text-large-font-weight, 400);
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.overlay-condition-report-open .close-button {
    display: flex;
    flex-direction: row;
    gap: 10px;
    /*align-items: center;*/
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
}

.overlay-condition-report-open .close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    position: relative;
    overflow: visible;
    aspect-ratio: 1;
}

/* Main image container */
.overlay-condition-report-open .image2 {
    border-radius: 5px;
    border-style: solid;
    border-color: transparent;
    border-width: 2px 2px 0px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0px 0px 8px 0px rgba(18, 20, 23, 0.25);
    overflow: hidden;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    height: calc(90vh - 120px);
    aspect-ratio: 1048/785.74;
}

/* Navigation buttons */
.overlay-condition-report-open .button-layout {
    padding: 8px 16px 8px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    flex: 1;
    position: relative;
}

.overlay-condition-report-open .left {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    cursor: pointer;
}

.overlay-condition-report-open .arrow-button {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    position: relative;
    aspect-ratio: 1;
    cursor: pointer;
}

.overlay-condition-report-open .background {
    background: #2f4666;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 0px;
    aspect-ratio: 1;
}

.overlay-condition-report-open .background2 {
    background: #2f4666;
    border-radius: 50%;
    opacity: 0.9;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 0px;
    box-shadow: 0px 0px 5px 0px rgba(43, 47, 51, 0.5);
    aspect-ratio: 1;
}

.overlay-condition-report-open .material-symbols-navigate-next {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 40px;
    top: 40px;
    transform: translate(-40px, -40px);
    overflow: visible;
    aspect-ratio: 1;
}

.overlay-condition-report-open .material-symbols-navigate-next2 {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 0px;
    overflow: visible;
    aspect-ratio: 1;
}

/* Caption styles */
.overlay-condition-report-open .caption {
    background: linear-gradient(to left, #2f4666, #2f4666);
    border-style: solid;
    border-width: 0px 1px 1px 1px;
    padding: 8px 16px 8px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    border-color: transparent;
}

.overlay-condition_report-open .item2 {
    background: linear-gradient(to left, #f5f7fa, #f5f7fa);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-family: var(--text-large-font-family, "NunitoSans-Regular", sans-serif);
    font-size: var(--text-large-font-size, 20px);
    line-height: var(--text-large-line-height, 28px);
    font-weight: var(--text-large-font-weight, 400);
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay-condition-report-open .divider2 {
    margin-top: -1px;
    border-style: solid;
    border-color: #b0b8c1;
    border-width: 1px 0 0 0;
    flex-shrink: 0;
    width: 23px;
    height: 0px;
    position: relative;
    transform: rotate(-90deg) scale(1, 1);
}

.overlay-condition-report-open .description2 {
    background: linear-gradient(to left, #f5f7fa, #f5f7fa);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-family: var(--text-large-font-family, "NunitoSans-Regular", sans-serif);
    font-size: var(--text-large-font-size, 20px);
    line-height: var(--text-large-line-height, 28px);
    font-weight: var(--text-large-font-weight, 400);
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay-condition-report-open .type2 {
    background: linear-gradient(to left, #f5f7fa, #f5f7fa);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-family: var(--text-large-font-family, "NunitoSans-Regular", sans-serif);
    font-size: var(--text-large-font-size, 20px);
    line-height: var(--text-large-line-height, 28px);
    font-weight: var(--text-large-font-weight, 400);
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay-condition-report-open .severity2 {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex: 1;
    position: relative;
}

.overlay-condition-report-open .severity-description {
    background: linear-gradient(to left, #f5f7fa, #f5f7fa);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-family: var(--text-large-font-family, "NunitoSans-Regular", sans-serif);
    font-size: var(--text-large-font-size, 20px);
    line-height: var(--text-large-line-height, 28px);
    font-weight: var(--text-large-font-weight, 400);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* Pagination */
.overlay-condition-report-open .layout-pag {
    padding: 8px 0px 8px 0px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}

.overlay-condition-report-open .count-of-total {
    color: #f5f7fa;
    text-align: center;
    font-family: var(--text-small-font-family, "NunitoSans-Regular", sans-serif);
    font-size: var(--text-small-font-size, 14px);
    line-height: var(--text-small-line-height, 19.6px);
    font-weight: var(--text-small-font-weight, 400);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===============================================
   RESPONSIVE STYLES
   =============================================== */
@media (max-width: 768px) {
    .overlay-condition-report-open {
        padding: 0;
    }
    
    .overlay-condition-report-open .modal-content-wrapper {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
        /* Force column layout to show only menu on mobile */
        flex-direction: column;
    }
    
    .overlay-condition-report-open .menu {
        width: 100%;
        height: 100vh; /* Take full height on mobile */
        /* Remove collapse functionality on mobile */
        transition: none;
    }
    
    .overlay-condition-report-open .menu.collapsed {
        width: 100%;
        height: 100vh;
    }

    /* Hide menu button on mobile */
    .overlay-condition-report-open .menu-button {
        display: none !important;
    }

    /* Show mobile close button on mobile with proper styling */
    .overlay-condition-report-open .mobile-close-button {
        display: flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 8px;
        border-radius: 5px;
        background: #f5f7fa;
        border: none !important;
        color: #000000 !important;
    }

    /* Ensure tabs-layout is always visible on mobile */
    .overlay-condition-report-open .tabs-layout {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: none;
    }

    /* COMPLETELY HIDE the images section on mobile - no exceptions */
    .overlay-condition-report-open .images {
        display: none !important;
    }

    /* Adjust top-bar to be more compact */
    .overlay-condition-report-open .top-bar {
        padding: 8px 0;
        justify-content: flex-end;
    }
    
    .overlay-condition-report-open .vert-layout {
        width: 100%;
        padding: 8px;
    }
    
    .overlay-condition-report-open .image-cards,
    .overlay-condition-report-open .image-cards2 {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }

    /* Since images section is hidden, we don't need these caption styles */
    .overlay-condition-report-open .caption {
        display: none !important;
    }

    .overlay-condition-report-open .layout-pag {
        display: none !important;
    }
}

/* Desktop styles - hide mobile close button */
@media (min-width: 769px) {
    .overlay-condition-report-open .mobile-close-button {
        display: none !important;
    }
}

/* ===============================================
   SMALL MOBILE/IPHONE RESPONSIVE STYLES (480px and below)
   =============================================== */
@media (max-width: 480px) {
    .overlay-condition-report-open .modal-content-wrapper {
        width: 100vw;
        height: 100vh;
    }

    /* Continue hiding images section */
    .overlay-condition-report-open .images {
        display: none !important;
    }

    /* Adjust image cards for very small screens */
    .overlay-condition-report-open .image-cards,
    .overlay-condition-report-open .image-cards2 {
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
    }

    /* Reduce image card height for small screens */
    .overlay-condition-report-open .image-cards .image,
    .overlay-condition-report-open .image-cards2 .image {
        height: 180px;
    }
}

/* ===============================================
   EXTRA SMALL SCREENS/OLDER IPHONES (400px and below)
   =============================================== */
@media (max-width: 400px) {
    .overlay-condition-report-open .image-cards,
    .overlay-condition-report-open .image-cards2 {
        width: 100%;
        max-width: 300px;
        padding: 6px;
    }

    .overlay-condition-report-open .image-cards .image,
    .overlay-condition-report-open .image-cards2 .image {
        height: 150px;
    }

    .overlay-condition-report-open .vert-layout {
        padding: 6px;
        gap: 12px;
    }

    /* Ensure images section remains hidden */
    .overlay-condition-report-open .images {
        display: none !important;
    }
}

/* ===============================================
   TABLET AND LARGER SCREENS (769px and above)
   =============================================== */
@media (min-width: 769px) {
    /* Ensure images section is visible on larger screens */
    .overlay-condition-report-open .images {
        display: flex !important;
    }

    /* Restore row layout for larger screens */
    .overlay-condition-report-open .modal-content-wrapper {
        flex-direction: row;
    }

    .overlay-condition-report-open .menu {
        width: 360px;
        height: auto;
    }

    .overlay-condition-report-open .menu.collapsed {
        width: 52px;
    }

    /* Show menu button on larger screens */
    .overlay-condition-report-open .menu-button {
        display: flex !important;
    }

    /* Keep both tabs-layout and layout2 visible on larger screens */
    .overlay-condition-report-open .tabs-layout,
    .overlay-condition_report-open .layout2 {
        display: flex;
    }

    /* Show all image section elements on desktop */
    .overlay-condition-report-open .caption {
        display: flex !important;
    }

    .overlay-condition-report-open .layout-pag {
        display: flex !important;
    }
}

/* ===============================================
   NARROW DESKTOP GAP FIX (769px – 890px)
   Keep the flex layout intact (menu stays at its
   default width). Only scale down text so the
   close-button and nav arrows always stay visible.
   =============================================== */
@media (min-width: 769px) and (max-width: 890px) {

    /* Reduce the vehicle heading so it does not crowd the close-button */
    .overlay-condition-report-open .vehicle {
        font-size: 18px;
        line-height: 22px;
    }

    .overlay-condition-report-open .vin {
        font-size: 14px;
        line-height: 18px;
    }

    /* Reduce nav arrow padding so both buttons stay within the panel */
    .overlay-condition-report-open .button-layout {
        padding: 8px;
    }

    /* Tighten caption padding */
    .overlay-condition-report-open .caption {
        padding: 6px 8px;
    }

    /* Scale down caption text to fit the narrower images panel */
    .overlay-condition-report-open .item2,
    .overlay-condition-report-open .description2,
    .overlay-condition-report-open .type2,
    .overlay-condition-report-open .severity-description {
        font-size: 13px;
        line-height: 18px;
    }

    /* Hide decorative dividers to keep the caption row compact */
    .overlay-condition-report-open .divider2 {
        display: none;
    }
}

/* ===============================================
   MOBILE-ONLY IMAGE CARDS ENHANCEMENTS
   =============================================== */
@media (max-width: 768px) and (orientation: portrait) {
    /* Remove the automatic header message */
    .overlay-condition-report-open .nav::before {
        display: none;
    }

    /* Make image cards more touch-friendly on mobile */
    .overlay-condition-report-open .image-cards,
    .overlay-condition-report-open .image-cards2 {
        padding: 12px;
        margin-bottom: 16px;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .overlay-condition-report-open .image-cards:active,
    .overlay-condition-report-open .image-cards2:active {
        transform: scale(0.98);
        background: #f0f4f8;
    }

    .overlay-condition-report-open .image-cards.state-selected {
        background: #e8f4fd;
        border-color: #0084b8;
        box-shadow: 0px 0px 8px 0px rgba(0, 132, 184, 0.3);
        transform: scale(1.02);
    }

    /* Add better spacing for mobile scrolling */
    .overlay-condition-report-open .vert-layout {
        padding: 16px;
        gap: 20px;
    }

    /* Enhance image card format section */
    .overlay-condition-report-open .image-cards .format,
    .overlay-condition-report-open .image-cards2 .format {
        gap: 12px;
    }

    /* Make severity indicators more prominent on mobile */
    .overlay-condition-report-open .image-cards .severity,
    .overlay-condition-report-open .image-cards2 .severity {
        padding: 6px 8px;
        border-radius: 6px;
    }

    .overlay-condition-report-open .image-cards .status,
    .overlay-condition-report-open .image-cards2 .status {
        width: 16px;
        height: 16px;
    }

    /* Improve text readability on mobile */
    .overlay-condition-report-open .image-cards .item,
    .overlay-condition-report-open .image-cards2 .item {
        font-size: 17px;
        line-height: 1.4;
        font-weight: 700;
    }

    .overlay-condition-report-open .image-cards .type,
    .overlay-condition-report-open .image-cards2 .type,
    .overlay-condition-report-open .image-cards .description,
    .overlay-condition-report-open .image-cards2 .description {
        font-size: 15px;
        line-height: 1.3;
    }

    /* Ensure scroll container has proper height */
    .overlay-condition-report-open .scroll {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Images section must remain hidden */
    .overlay-condition-report-open .images {
        display: none !important;
    }

    /* Add close button for mobile with proper navigation layout */
    .overlay-condition-report-open .nav {
        justify-content: space-between;
    }

    .overlay-condition-report-open .mobile-close-button {
        display: flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 8px;
        border-radius: 5px;
        background: #f5f7fa;
        border: none !important;
        color: #000000 !important;
        box-shadow: none !important;
    }
}

/* ===============================================
   LANDSCAPE ORIENTATION - STILL MOBILE FIRST
   =============================================== */
@media (max-width: 768px) and (orientation: landscape) {
    /* Remove the header message in landscape too */
    .overlay-condition-report-open .nav::before {
        display: none;
    }

    /* Even in landscape on mobile, keep images hidden */
    .overlay-condition-report-open .images {
        display: none !important;
    }

    .overlay-condition-report-open .modal-content-wrapper {
        flex-direction: column;
    }

    .overlay-condition-report-open .menu {
        width: 100%;
        height: 100vh;
    }

    .overlay-condition_report_open .caption {
        display: none !important;
    }

    .overlay-condition-report-open .layout-pag {
        display: none !important;
    }

    /* Add close button for landscape mobile too */
    .overlay-condition-report-open .nav {
        justify-content: space-between;
    }

    .overlay-condition-report-open .mobile-close-button {
        display: flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 8px;
        border-radius: 5px;
        background: #f5f7fa;
        border: none !important;
        color: #000000 !important;
        box-shadow: none !important;
    }
}

/* Fix item2 alignment issue */
.overlay-condition-report-open .item2 {
    background: linear-gradient(to left, #f5f7fa, #f5f7fa);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-family: var(--text-large-font-family, "NunitoSans-Regular", sans-serif);
    font-size: var(--text-large-font-size, 20px);
    line-height: var(--text-large-line-height, 28px);
    font-weight: var(--text-large-font-weight, 400);
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===============================================
   RESPONSIVE FIX: ALWAYS-VISIBLE NAVIGATION CONTROLS
   ===============================================
   Problem 1 — Nav arrows disappear:
     .image2 uses height: calc(90vh - 120px) + aspect-ratio: 1048/785.74,
     which forces width = height × 1.333 (e.g. ~760px at a 700px tall viewport).
     Combined with flex-shrink: 0, the element overflows .images on any viewport
     narrower than ~1214px. The nav arrows sit at the left/right edges of .image2,
     so they fall outside the overflow: hidden clip boundary on .modal-content-wrapper.
   Fix: aspect-ratio: auto + width: 100% keeps .image2 inside .images at all widths.
        background-size: contain (already set) handles correct image display.

   Problem 2 — Close button disappears:
     .layout2 has flex: 1 but no min-width: 0. Long vehicle names (32px bold font)
     can be wider than the available .images area, preventing .layout2 from shrinking
     and pushing .close-button (flex-shrink: 0) off the right edge of the container.
   Fix: min-width: 0 on .layout2 allows it to shrink; ellipsis on .vehicle and .vin
        truncates long text gracefully instead of overflowing.
   =============================================== */

.overlay-condition-report-open .image2 {
    aspect-ratio: auto;
    width: 100%;
    flex-shrink: 1;
}

.overlay-condition-report-open .layout2 {
    min-width: 0;
}

.overlay-condition-report-open .vehicle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.overlay-condition-report-open .vin {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}