/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* JS toggles visibility via the `hidden` attribute (.hidden = true/false)
   in several places (feedback correction box, results pagination rows) --
   several of those elements also carry their own `display: flex`
   class rule for when they ARE shown, which is equal-or-higher specificity
   than the browser's own [hidden] rule and can silently win, leaving the
   element visible when it shouldn't be. This forces [hidden] to always
   actually hide, regardless of what else targets the same element. */
[hidden] { display: none !important; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f5f7fa;
    color: #1a1a2e;
    line-height: 1.6;
}

/* ---- Header ---- */
header {
    background: #1a1a2e;
    padding: 1rem 2rem;
}
.logo {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #fff;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 700;
}
.logo-img {
    height: 28px;
    width: auto;
    /* Source logo is small (110x29) -- a plain browser upscale on a dark
       header background can fringe at the edges; a subtle white backing
       plate keeps it crisp without visibly looking like a swatch. */
    background: #fff;
    border-radius: 4px;
    padding: 2px 6px;
}
.logo-divider {
    color: #455a70;
    font-weight: 300;
}
.logo-text {
    color: #4fc3f7;
    font-weight: 400;
    font-size: 1.1rem;
}
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.header-nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.header-nav a {
    color: #b0bec5;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}
.header-nav a:hover {
    color: #fff;
}
.header-user {
    color: #78909c;
    font-size: 0.85rem;
}

/* ---- Main ---- */
main {
    max-width: 1100px;
    margin: 1rem auto;
    padding: 0 1rem;
}
/* Results need room for a side-by-side list + detail layout; the upload
   page uses its own two-column grid (photo | details) below. */
main:has(.results-section) {
    max-width: 1400px;
}

/* ---- Flash messages ---- */
.flash {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}
.flash p { margin: 0; }

/* ---- Upload Section ----
   No card chrome (background/radius/shadow) here on purpose -- it was
   pure decoration that only added vertical padding without helping the
   page read any better, and every added pixel is scroll on a page meant
   to have none. Content sits directly on the page background instead. */
.upload-section {
    padding-top: 0.25rem;
}
.upload-section h2 {
    margin-bottom: 0.5rem;
}
.upload-section > p {
    color: #555;
    margin-bottom: 1.5rem;
}

/* Upload guidance -- collapsed by default so it doesn't compete with the
   drop zone itself, but easy to find right above it. */
.upload-tips {
    background: #e3f2fd;
    border-radius: 10px;
    padding: 0.75rem 1.1rem;
    margin-bottom: 1.25rem;
}
.upload-tips[open] { padding-bottom: 1rem; }
.upload-tips summary {
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    font-size: 0.92rem;
}
.upload-tips summary::-webkit-details-marker { display: none; }
.upload-tips summary::before {
    content: "\25B8";
    display: inline-block;
    margin-right: 0.4rem;
    transition: transform 0.15s;
}
.upload-tips[open] summary::before { transform: rotate(90deg); }
.upload-tips ul {
    margin: 0.65rem 0 0;
    padding-left: 1.3rem;
    font-size: 0.88rem;
    color: #333;
}
.upload-tips li { margin-bottom: 0.4rem; }
.upload-tips li:last-child { margin-bottom: 0; }

/* Photo on the left, vehicle/details form on the right -- uses the page's
   width instead of stacking everything into one narrow column, and
   shortens the page enough that the whole form usually fits without
   scrolling on a typical laptop screen. */
.upload-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}
@media (max-width: 760px) {
    .upload-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
}
/* Align the top of the right column with the drop-zone in the left one
   instead of inheriting .textarea-label's normal top margin (meant for
   when it follows another field, not when it opens a column). */
.upload-details-col > .textarea-label:first-child {
    margin-top: 0;
}

/* Drop zone */
.drop-zone {
    border: 2px dashed #b0bec5;
    border-radius: 12px;
    padding: 1.75rem 1rem;
    text-align: center;
    color: #78909c;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.drop-zone:hover, .drop-zone.drag-over {
    border-color: #4fc3f7;
    background: #e1f5fe;
}
.drop-zone svg {
    margin-bottom: 0.5rem;
    color: #90a4ae;
}
.drop-zone input[type="file"] {
    /* display: none breaks synthetic .click() in Safari, which silently
       fails to open the file picker. Keep the input in the render tree but
       visually hidden instead. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Preview (shown inside the drop zone once a photo is picked, so the same
   click/drag targets keep working to replace it) */
#drop-zone-filled {
    position: relative;
}
.preview-img {
    max-width: 100%;
    max-height: 220px;
    border-radius: 8px;
    object-fit: contain;
}
.replace-hint {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #90a4ae;
}
#remove-photo {
    position: absolute;
    top: -0.75rem;
    right: -0.75rem;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: #455a64;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
#remove-photo:hover {
    background: #263238;
}

/* Checkbox */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    font-size: 0.92rem;
    color: #444;
    cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #1a73e8;
    cursor: pointer;
}

/* Details textarea */
.textarea-label {
    display: block;
    margin: 1rem 0 0.4rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: #444;
}
.textarea-hint {
    display: block;
    font-weight: 400;
    font-size: 0.82rem;
    color: #90a4ae;
    margin-top: 0.15rem;
}
.textarea-label--sub {
    margin-top: 1.1rem;
    font-size: 0.85rem;
    color: #666;
}

/* Vehicle info (Make / Model / Year) */
.vehicle-fields {
    display: grid;
    /* Year's column used to assume a wide single-column form; now that it
       shares a narrower half-width column with Make/Model (see
       .upload-grid), 0.6fr clipped "Select Year" to "Select Ye" -- a fixed
       floor keeps it readable at any container width. */
    grid-template-columns: 1fr 1fr minmax(105px, 0.8fr);
    gap: 0.75rem;
}
.field-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.field-group label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #666;
}
.required-mark {
    color: #e53935;
}
.field-group input[type="text"],
.field-group input[type="email"],
.field-group input[type="password"],
.field-group select {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-family: inherit;
    font-size: 0.95rem;
    color: #1a1a2e;
    background: #fff;
    border: 1px solid #b0bec5;
    border-radius: 8px;
    transition: border-color 0.2s;
}
.field-group select {
    cursor: pointer;
}
.field-group input[type="text"]:focus,
.field-group input[type="email"]:focus,
.field-group input[type="password"]:focus,
.field-group select:focus {
    outline: none;
    border-color: #4fc3f7;
}
.login-section {
    max-width: 380px;
    margin: 0 auto;
}
.login-section > p {
    margin-bottom: 1.5rem;
}
@media (max-width: 520px) {
    .vehicle-fields {
        grid-template-columns: 1fr;
    }
}

textarea#part_details {
    width: 100%;
    padding: 0.7rem 0.85rem;
    font-family: inherit;
    font-size: 0.95rem;
    color: #1a1a2e;
    border: 1px solid #b0bec5;
    border-radius: 8px;
    resize: vertical;
    transition: border-color 0.2s;
}
textarea#part_details:focus {
    outline: none;
    border-color: #4fc3f7;
}

/* Submit button */
button[type="submit"] {
    display: block;
    width: 100%;
    padding: 0.85rem;
    margin-top: 1rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    background: #1a73e8;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}
button[type="submit"]:hover:not(:disabled) {
    background: #1558b0;
}
button[type="submit"]:disabled {
    background: #b0bec5;
    cursor: not-allowed;
}

/* Loading */
.loading {
    display: none;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    color: #555;
}
.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #e0e0e0;
    border-top-color: #1a73e8;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Results Section ----
   Same call as .upload-section above: no card chrome, no padding to
   speak of -- every pixel here is scroll the customer doesn't need. */
.results-section {
    padding-top: 0.25rem;
}
/* Classification info -- was a collapsible box (product type + method +
   "what we see in your photo" + a background-removal comparison). Removed
   per live feedback that it, and the disambiguation summary banner below,
   were explanatory boxes the layout didn't need: the results themselves
   (images + spec table per candidate) already show what matters, and a
   plain, unboxed "Detected: X" line is enough context to catch an obvious
   misdetection without the extra weight. */
.results-heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.results-heading-row h2 { margin-bottom: 0; }
.detected-line { font-size: 0.9rem; color: #666; }

/* Shared, tighter treatment for every actionable banner (vehicle fitment,
   catalog gaps, type conflicts, disambiguation) -- one info tone, one warn
   tone, instead of each banner defining its own near-identical box. */
.notice-banner {
    background: #e3f2fd;
    border-radius: 8px;
    padding: 0.4rem 0.85rem;
    margin-bottom: 0.4rem;
}
.notice-banner p { margin: 0; font-size: 0.88rem; }
.notice-banner--warn {
    background: #fff3e0;
    border: 1px solid #ffcc80;
}
.notice-banner--warn p { color: #6d4c00; }

/* ---- Results: list (left) + detail (right) ---- */
/* Both panels get their own scrollbar and a height pinned to the viewport,
   so paging through results never scrolls the main page -- only whichever
   panel actually needs it. This is the actual "minimum scroll" mechanism. */
.results-split {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}
/* Every in-scope part is in the one list from the start (see result.html)
   -- no pagination, the panel just scrolls on its own to however many rows
   there are. */
.results-list-panel,
.results-detail-panel {
    /* --split-max-height is set by JS from the split's actual position on
       the page (see result.html) -- a fixed "100vh - 220px" assumed the
       banner stack above it was always about the same height, but it
       varies a lot (disambiguation and catalog-gap notices can add real
       lines) -- when the real stack was taller than assumed, the fixed
       guess made these panels taller than the remaining viewport, forcing
       the whole page to scroll just to reach their bottom instead of only
       scrolling inside them. The calc() here is only a same-idea fallback
       for the instant before that JS runs.
     */
    max-height: var(--split-max-height, calc(100vh - 220px));
    min-height: 320px;
    overflow-y: auto;
}

/* Left: compact, clickable rows */
.results-list-panel {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-right: 0.25rem;
}
.result-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font: inherit;
    text-align: left;
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s, background 0.15s;
}
.result-row:hover {
    border-color: #90a4ae;
}
.result-row.active {
    border-color: #1a73e8;
    background: #e8f0fe;
}
.result-row.best-match {
    border-color: #4caf50;
}
.result-row.best-match.active {
    background: #f1f8e9;
}
.result-row-thumb {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    background: #fafafa;
    border: 1px solid #eee;
}
.result-row-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.result-row-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.result-row-part {
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.result-row-sim {
    font-size: 0.8rem;
    color: #78909c;
}
.badge--row {
    position: static;
    flex-shrink: 0;
    background: #4caf50;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}
.badge--correct, .badge--incorrect {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 10px;
    white-space: nowrap;
}
.badge--correct { background: #e8f5e9; color: #2e7d32; }
.badge--incorrect { background: #ffebee; color: #c62828; }

/* Right: full detail for whichever row is active */
.results-detail-panel {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 1.25rem;
}
.result-detail {
    display: none;
}
.result-detail.active {
    display: block;
}
.result-detail-header h3 {
    font-size: 1.3rem;
    margin-bottom: 0.25rem;
}
.similarity {
    color: #555;
    margin-bottom: 0.5rem;
}

/* Inline per-candidate feedback -- every Reach Cooling employee running
   this demo is a potential labeler, so this stays a single compact line
   at rest (only "No" expands it, to ask what the actual part is). */
.feedback-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #f5f7fa;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.88rem;
}
.feedback-question { color: #444; font-weight: 500; }
.feedback-btn {
    padding: 0.3rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid #b0bec5;
    background: #fff;
    color: #1a1a2e;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.feedback-btn--yes:hover { background: #e8f5e9; border-color: #66bb6a; }
.feedback-btn--no:hover { background: #ffebee; border-color: #ef5350; }
.feedback-correction {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}
.feedback-correction-input {
    flex: 1;
    max-width: 260px;
    padding: 0.35rem 0.6rem;
    font-family: inherit;
    font-size: 0.85rem;
    border: 1px solid #b0bec5;
    border-radius: 6px;
}
.feedback-correction-input:focus {
    outline: none;
    border-color: #4fc3f7;
}
.feedback-correction-submit {
    padding: 0.3rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    background: #1a73e8;
    color: #fff;
    cursor: pointer;
}
.feedback-correction-submit:hover { background: #1558b0; }
.feedback-done { color: #2e7d32; font-weight: 600; }

@media (max-width: 860px) {
    .results-split {
        flex-direction: column;
    }
    .results-list-panel {
        flex: 0 0 auto;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        max-height: none;
        width: 100%;
    }
    .result-row {
        flex: 0 0 220px;
    }
    .results-detail-panel {
        max-height: none;
        width: 100%;
    }
}

/* Muted descriptive line under an admin page heading */
.method-tag {
    color: #78909c;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

/* Image comparison */
.image-comparison {
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
}
.compare-pane {
    flex: 1;
    text-align: center;
}
.compare-pane img {
    width: 100%;
    max-height: 300px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background: #fafafa;
}
.viewer-360 {
    position: relative;
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.viewer-360.dragging { cursor: grabbing; }
.viewer-360 img {
    width: 100%;
    max-height: 300px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background: #fafafa;
    pointer-events: none;
}
.viewer-360-hint {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    pointer-events: none;
}
.compare-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #78909c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.4rem;
}

/* Attributes table */
.attrs-table {
    width: 100%;
    border-collapse: collapse;
}
.attrs-table th,
.attrs-table td {
    padding: 0.4rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.92rem;
}
.attrs-table th {
    color: #555;
    font-weight: 500;
    width: 40%;
}
.attrs-table thead th {
    width: auto;
    color: #78909c;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 2px solid #e0e0e0;
}
.attrs-table tbody th {
    width: 34%;
}
.extracted-match {
    color: #2e7d32;
    font-weight: 600;
}
.extracted-mismatch {
    color: #c62828;
    font-weight: 600;
}
.extracted-empty {
    color: #b0bec5;
}
.extracted-not-recorded {
    color: #444;
}
.not-recorded-hint {
    color: #b0bec5;
    font-weight: normal;
    font-style: italic;
    font-size: 0.85em;
}
.no-attrs {
    color: #999;
    font-style: italic;
}

/* No match */
.no-match {
    text-align: center;
    padding: 2rem 1rem;
    color: #555;
}
.no-match h3 {
    color: #e53935;
    margin-bottom: 0.5rem;
}

/* Plain file input (feedback screenshot -- not the fancy drop zone) */
input[type="file"]#screenshot {
    display: block;
    width: 100%;
    padding: 0.5rem 0;
    font-size: 0.9rem;
}

/* Admin: search log table */
.admin-table-wrap {
    overflow-x: auto;
}
.admin-table {
    white-space: nowrap;
}
.admin-table th, .admin-table td {
    padding: 0.5rem 0.85rem;
}

/* Admin: users */
.new-password {
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    background: #fff;
    border: 1px solid #ffcc80;
    border-radius: 6px;
    padding: 0.15rem 0.5rem;
    font-weight: 700;
}
.reset-password-btn {
    padding: 0.35rem 0.85rem;
    border: 1px solid #b0bec5;
    border-radius: 6px;
    background: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.reset-password-btn:hover { background: #f5f7fa; }

/* Admin: feedback inbox */
.feedback-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.feedback-item {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 1rem 1.25rem;
}
.feedback-item-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}
.feedback-item-user {
    font-weight: 700;
    color: #1a1a2e;
}
.feedback-item-date {
    color: #90a4ae;
}
.feedback-item-message {
    white-space: pre-wrap;
    color: #333;
    margin-bottom: 0.75rem;
}
.feedback-item-screenshot {
    max-width: 320px;
    max-height: 220px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    cursor: pointer;
}

/* Back link */
.back-link {
    display: inline-block;
    margin-top: 1.5rem;
    color: #1a73e8;
    text-decoration: none;
    font-weight: 500;
}
.back-link:hover {
    text-decoration: underline;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
    main { padding: 0 0.5rem; }
    .upload-section, .results-section { padding: 1.25rem; }
    .image-comparison { flex-direction: column; }
}