/* ── Base layout ──────────────────────────────────────────────────────────── */

html,
body {
    margin: 0;
    /* No height/overflow here — mobile scrolls naturally by default.
       Desktop overrides these inside the min-width media query below. */
}

/* ── Parts table ──────────────────────────────────────────────────────────── */

table {
    margin: 0 auto;
    font-size: large;
    border: 1px solid black;
    width: 100%;
}

td {
    background-color: #E4F5D4;
    border: 1px solid black;
}

#table tbody tr:nth-child(even) td {
    background-color: #C8E6B2;
}

th,
td {
    font-weight: bold;
    border: 1px solid black;
    padding: 4px;
    text-align: center;
}

td {
    font-weight: lighter;
}

tr.highlight td {
    background-color: #FFF3A0 !important;
}

#table tbody tr {
    cursor: pointer;
}

/* ── Diagram panel ────────────────────────────────────────────────────────── */

#img {
    position: sticky;
    top: 0;
    align-self: flex-start;
    overflow: visible;
}

.img-wrapper {
    position: relative;
    display: inline-block;
    overflow: visible;
    /* let the highlight circle render outside image bounds */
}

/* display:block removes the inline baseline gap that offsets the SVG overlay */
#img img {
    display: block;
    width: auto;
    max-width: 100%;
}

/* ── Section dropdown header rows ─────────────────────────────────────────── */

option.section-header {
    font-weight: bold;
    text-decoration: underline;
}

/* ── In-line info text (footnotes, serial numbers) ───────────────────────── */

.line-info {
    color: #1000ff;
}

/* ── VIN summary + catalogue search results ───────────────────────────────── */

.vin-info {
    font-size: 0.85rem;
}

.find-table tbody tr {
    cursor: pointer;
}

/* ── Desktop (md+): fixed-height viewport, each panel scrolls on its own ──── */

/* was: min-width: 768px */
@media (min-width: 992px) {

    html,
    body {
        height: 100vh;
        overflow: hidden;
    }

    /* 130px = the two toolbar rows */
    #img img {
        max-height: calc(100vh - 130px);
    }

    #textlines {
        max-height: calc(100vh - 130px);
        overflow-y: auto;
    }
}

/* ── Mobile (< md): page scrolls, image capped so table stays visible ──────── */

@media (max-width: 991.98px) {
    body {
        padding-top: env(safe-area-inset-top, 0px);
    }

    #app {
        padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
    }

    .form-select.form-select-lg {
        min-height: 3.25rem;
        font-size: 1.1rem;
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }

    #app .row.g-2.mb-2 {
        row-gap: 0.5rem;
    }

    #img {
        position: static;
        text-align: center;
    }

    #img img {
        max-height: 45vh;
    }

    #textlines {
        max-height: calc(55vh - 70px);
        overflow-y: auto;
    }

    #searchModal .modal-dialog {
        margin: 5vh auto;
        max-width: 90%;
        height: 90vh;
    }

    #searchModal .modal-content {
        height: 100%;
        border-radius: 8px;
    }
}

/* ── Search result cards ──────────────────────────────────────────────────── */

.search-result-card {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    transition: box-shadow 0.15s, transform 0.15s;
    overflow: hidden;
}

.search-result-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.13);
    transform: translateY(-2px);
}

.search-result-img-wrap {
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
    overflow: hidden;
}

.search-result-img {
    max-height: 160px;
    max-width: 100%;
    object-fit: contain;
}

.search-result-img-placeholder {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}