/* CarSearch: a small layer on top of the Radzen material theme. */

html, body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- sign-in --- */

.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f5f7;
    padding: 1.5rem;
}

.login-card {
    width: 100%;
    max-width: 22rem;
    background: #fff;
    border: 1px solid #d9dce2;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(16, 20, 28, .08);
}

.login-title {
    margin: 0 0 .25rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a1e25;
}

.login-subtitle {
    margin: 0 0 1.5rem;
    color: #5b6370;
    font-size: .9rem;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.login-label {
    font-size: .8rem;
    font-weight: 600;
    color: #3c434f;
    margin-top: .6rem;
}

.login-input {
    padding: .55rem .65rem;
    border: 1px solid #c6cad2;
    border-radius: 5px;
    font-size: .95rem;
}

.login-input:focus {
    outline: 2px solid #2440b3;
    outline-offset: 1px;
    border-color: #2440b3;
}

.login-button {
    margin-top: 1.25rem;
    padding: .6rem;
    background: #2440b3;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
}

.login-button:hover { background: #1d3596; }

.login-error {
    background: #fdecea;
    border: 1px solid #f5c2bb;
    color: #93291c;
    padding: .6rem .75rem;
    border-radius: 5px;
    font-size: .875rem;
    margin-bottom: 1rem;
}

/* --- listings --- */

.listing-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px 6px 0 0;
    background: #eceef2;
}

.listing-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #98a0ae;
    font-size: .8rem;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
}

.stat-label {
    font-size: .8rem;
    color: #5b6370;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.price-drop { color: #1f7a4d; font-weight: 600; }

/* --- dashboard --- */

.recent-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem .25rem;
    border-radius: 4px;
    color: inherit;
    text-decoration: none;
}

.recent-row:hover { background: #eceef2; }

.recent-row:focus-visible {
    outline: 2px solid #2440b3;
    outline-offset: -2px;
}

.recent-row-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.recent-row-title {
    font-size: .95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-row-meta {
    font-size: .75rem;
    color: #5b6370;
}

.recent-row-price {
    font-size: .95rem;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* --- listing specs --- */

.spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    column-gap: 2.5rem;
    margin-top: .5rem;
}

.spec {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem 0;
    border-bottom: 1px solid #e6e8ec;
}

.spec-label {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7280;
    white-space: nowrap;
}

.spec-value {
    font-size: .9rem;
    text-align: right;
    overflow-wrap: anywhere;
}

/* --- dashboard stat cards --- */

/* Equal height across the row: the budget card carries a progress bar the others do
   not, and without this it grew taller than its neighbours. */
.stat-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.stat-card-footer {
    margin-top: auto;
    padding-top: .5rem;
}

/* --- a link that has to look like a button --- */

/* "Open original" leaves the site, so it is an anchor. Radzen writes its button styling
   for the <button> element, which the user-agent stylesheet already centres and strips of
   underlines; an anchor wearing the same classes needs both saying out loud. */
a.rz-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

a.rz-button:hover,
a.rz-button:focus {
    text-decoration: none;
}

/* --- photo tiles and the viewer they open --- */

/* A button rather than a bare image: it is a control, so it should take focus and answer
   to Enter and Space without any of that being reimplemented. */
.photo-tile {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 6px;
    overflow: hidden;
    background: none;
    cursor: zoom-in;
}

.photo-tile:focus-visible {
    outline: 2px solid #2440b3;
    outline-offset: 2px;
}

.photo-tile .listing-thumb {
    display: block;
    border-radius: 0;
}

/* Sits over the last tile in the preview and says how much is behind it. */
.photo-tile-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 18, 22, .58);
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.25rem 1rem 1rem;
    background: rgba(14, 16, 20, .94);
}

.lightbox:focus {
    outline: none;
}

.lightbox-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.lightbox-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem .9rem;
}

.lightbox-count {
    color: #e7eaf0;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

.lightbox-control {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.lightbox-control:hover {
    background: rgba(255, 255, 255, .22);
}

.lightbox-control:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.lightbox-step {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.75rem;
    height: 2.75rem;
    font-size: 2rem;
}

.lightbox-previous { left: .75rem; }
.lightbox-next { right: .75rem; }

/* On a phone the arrows would sit on top of the photo, so put them under it instead. */
@media (max-width: 40rem) {
    .lightbox { padding: 3.25rem .5rem 4.5rem; }
    .lightbox-step { top: auto; bottom: .75rem; transform: none; }
    .lightbox-previous { left: 25%; }
    .lightbox-next { right: 25%; }
}

/* --- the listings on a phone ---

   Nine columns cannot be read on a 390px screen, and the grid does not fail by scrolling:
   the table is laid out fixed at 100% width, so the one flexible column — the title —
   collapses to nothing and the fixed ones run off the edge. A row showed a photo, a year
   and a price, with no way to reach the car's name or the block button. So below the
   breakpoint these cards stand in for the table. The grid itself stays mounted rather
   than being swapped out: it owns the loading, the sorting and the pager, and the pager
   still drives LoadData, which is what refills the cards. */

.listing-cards { display: none; }

.listing-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .625rem;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 8px;
}

.listing-card-photo {
    flex: 0 0 5.5rem;
    width: 5.5rem;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 5px;
    background: #eceef2;
}

.listing-card-main {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1 1 auto;
    /* Without this a long title refuses to shrink and pushes the buttons off the card. */
    min-width: 0;
}

/* The whole card is the tap target. The link stretches over it with a pseudo-element
   rather than by wrapping it, because an <a> may not contain a <button> and the favourite
   and block buttons sit inside the card. */
.listing-card-link {
    font-size: .95rem;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.listing-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
}

.listing-card-link:focus-visible::after {
    outline: 2px solid #2440b3;
    outline-offset: -2px;
}

.listing-card-price {
    font-size: .95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.listing-card-meta {
    font-size: .75rem;
    color: #5b6370;
    overflow-wrap: anywhere;
}

/* Above the stretched link, or the card would swallow every tap meant for them. */
.listing-card-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

/* --- the detail page header ---

   Title and actions on one line where there is room for it. On a phone the title wrapped
   to eight lines at H4 and the buttons were clipped against the right edge, which put
   "Open original" off the screen entirely — the one control you want when you have
   arrived from a notification. */

.detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.detail-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

/* --- grids too wide for the window ---

   A Radzen grid lays its table out fixed at 100% of the container, so a table that does
   not fit does not scroll: the fixed columns keep their widths and the flexible ones are
   squeezed, to nothing if that is what is left. On the listings grid at 1280px with the
   sidebar open that ate the whole title column — a row of photo, year and price with the
   car's name reduced to one letter.

   A min-width per grid is what makes the overflow real, and each is the sum of that grid's
   own fixed columns plus room for its flexible ones. Below these widths the table scrolls
   inside the card instead of collapsing. */

.rz-data-grid-data { overflow-x: auto; }

.listings-grid .rz-data-grid-data > table { min-width: 68rem; }   /* 870px fixed + the title */
.runs-grid .rz-data-grid-data > table { min-width: 74rem; }       /* 1160px fixed + the search name */
.searches-grid .rz-data-grid-data > table { min-width: 46rem; }   /* 630px fixed + name and criteria */

/* --- phones ---

   768px throughout, because that is Radzen's own ResponsiveMaxWidth: below it the sidebar
   collapses itself, and anything here that disagreed would be a second opinion about what
   a phone is. */

@media (max-width: 768px) {
    /* rz-p-4 is 1.5rem a side, a quarter of a 390px screen spent on gutters. */
    .rz-body > .rz-p-4 { padding: .75rem; }

    /* Inside RadzenLayout the sidebar is a static column of the layout grid, so opening it
       on a phone takes its 250px out of the body rather than covering it: the screen is
       left showing the menu beside a 140px strip of the page. Fixed, it covers, which is
       what tapping a hamburger means everywhere else. The dimmed page behind it is the
       shadow's spread rather than a second element. */
    .rz-layout > .rz-sidebar-expanded {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 2;
        box-shadow: 0 0 0 100vmax rgba(16, 18, 22, .45);
    }

    .listing-cards {
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }

    /* The table goes, the grid stays: see the note on .listing-cards above. Its own frame
       goes with the table, or the hidden grid leaves a stray rule under the cards; what
       remains to be seen is the pager. */
    .listings-grid .rz-data-grid-data { display: none; }
    .listings-grid { border: 0; background: none; }

    .detail-header {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
    }

    /* H4 is about 2.1rem, which is eight lines of a listing title on a 390px screen. */
    .detail-title {
        font-size: 1.35rem;
        line-height: 1.25;
    }

    /* Three buttons sharing the width, rather than a row that runs off the edge. */
    .detail-actions > * { flex: 1 1 auto; }

    /* A seller who pastes an unbroken URL into the description should not widen the page. */
    .detail-description { overflow-wrap: anywhere; }
}