/* detail.css */

/* ── header area: title + price + actions above gallery ─────────────── */
.detail-header{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:1.25rem;box-shadow:var(--shadow-sm)}
.detail-header__top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.detail-header__title{font-size:1.5rem;font-weight:800;line-height:1.25;letter-spacing:-.02em}
.detail-header__fav{flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--bg-raised);border:1px solid var(--border);border-radius:50%;color:var(--text-muted);cursor:pointer;transition:all var(--fast)}
.detail-header__fav:hover,.detail-header__fav--active{color:var(--danger);border-color:var(--danger)}
.detail-header__fav--active svg{fill:var(--danger)}
.detail-header__prices{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.25rem;margin-bottom:.75rem}
.detail-header__price-main{font-size:1.75rem;font-weight:800;color:var(--accent);letter-spacing:-.01em}
.detail-header__price-secondary{font-size:.9375rem;color:var(--text-muted)}
.detail-header__price-approx{font-size:.625rem;color:var(--text-dim);font-weight:400;margin-left:.125rem}
.detail-header__price-note{font-size:.6875rem;color:var(--text-dim);line-height:1.5}
.detail-header__actions{margin-top:1rem}

/* ── layout: gallery full width, specs below ────────────────────────── */
.detail-layout{display:flex;flex-direction:column;gap:1.25rem}

/* ── gallery ──────────────────────────────────────────────────────── */
.detail-gallery{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:.75rem;box-shadow:var(--shadow-sm)}
.detail-gallery__main{position:relative;aspect-ratio:16/9;background:var(--bg-raised);border-radius:var(--radius);overflow:hidden;cursor:zoom-in}
.detail-gallery__main-img{width:100%;height:100%;object-fit:cover;transition:opacity .15s ease}
.detail-gallery__counter{position:absolute;bottom:.5rem;right:.5rem;font-size:.7rem;font-weight:600;color:#fff;background:rgba(0,0,0,.5);padding:.2rem .5rem;border-radius:4px;backdrop-filter:blur(4px);pointer-events:none}
.detail-gallery__nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.85);border:1px solid var(--border);border-radius:50%;color:var(--text);cursor:pointer;backdrop-filter:blur(4px);transition:background var(--fast);box-shadow:var(--shadow-sm);z-index:2}
.detail-gallery__nav:hover{background:rgba(255,255,255,1)}
.detail-gallery__nav--prev{left:.5rem}
.detail-gallery__nav--next{right:.5rem}
.detail-gallery__thumbs{display:flex;gap:.375rem;margin-top:.5rem;overflow-x:auto;padding-bottom:.25rem;scrollbar-width:thin}
.detail-gallery__thumb{flex-shrink:0;width:60px;height:40px;border-radius:4px;overflow:hidden;border:2px solid transparent;cursor:pointer;opacity:.5;transition:all var(--fast);background:none;padding:0}
.detail-gallery__thumb:hover,.detail-gallery__thumb--active{opacity:1;border-color:var(--accent)}
.detail-gallery__thumb img{width:100%;height:100%;object-fit:cover}
.detail-gallery__empty{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-lg);color:var(--text-dim);font-size:.875rem}

/* ── zoom overlay ─────────────────────────────────────────────────── */
.zoom-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;cursor:grab;backdrop-filter:blur(4px);opacity:0;transition:opacity .2s ease}
.zoom-overlay--active{opacity:1}
.zoom-overlay--dragging{cursor:grabbing}
.zoom-overlay__img{max-width:none;max-height:none;transform-origin:0 0;user-select:none;-webkit-user-select:none;pointer-events:none}
.zoom-overlay__close{position:fixed;top:1rem;right:1rem;z-index:201;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:50%;color:#fff;cursor:pointer;font-size:1.25rem;backdrop-filter:blur(4px);transition:background var(--fast)}
.zoom-overlay__close:hover{background:rgba(255,255,255,.3)}
.zoom-overlay__hint{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:201;font-size:.75rem;color:rgba(255,255,255,.6);background:rgba(0,0,0,.5);padding:.35rem .75rem;border-radius:4px;pointer-events:none;white-space:nowrap}
.zoom-overlay__nav{position:fixed;top:50%;transform:translateY(-50%);z-index:201;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:50%;color:#fff;cursor:pointer;backdrop-filter:blur(4px);transition:background var(--fast)}
.zoom-overlay__nav:hover{background:rgba(255,255,255,.3)}
.zoom-overlay__nav--prev{left:1rem}
.zoom-overlay__nav--next{right:1rem}

/* ── specs panel ────────────────────────────────────────────────────── */
.detail-specs{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.detail-specs__title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);padding:.875rem 1rem;border-bottom:1px solid var(--border);background:var(--bg-raised);margin:0}
.specs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0}
.spec-item{padding:.75rem 1rem;border-bottom:1px solid var(--border);border-right:1px solid var(--border)}
.spec-item__label{display:block;font-size:.625rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.125rem}
.spec-item__value{font-size:.875rem;font-weight:500;color:var(--text);word-break:break-word}

/* ── collapsible sections ───────────────────────────────────────────── */
.detail-section{margin-top:1.25rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.detail-section__title{font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text);padding:1rem 1.25rem;border-bottom:1px solid var(--border);margin:0;background:var(--bg-raised)}
.detail-section__content{padding:1.25rem}
.detail-section__content--hidden{display:none}

/* collapsible toggle — the entire header bar is the button */
.detail-section--collapsible .detail-section__toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:var(--bg-raised);border:none;cursor:pointer;color:var(--text);padding:0;text-align:left;font-family:var(--font);outline:none}
.detail-section--collapsible .detail-section__toggle:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.detail-section--collapsible .detail-section__toggle .detail-section__title{flex:1;border-bottom:none;pointer-events:none}
.detail-section--collapsible .detail-section__toggle svg{margin-right:1.25rem;transition:transform var(--fast);flex-shrink:0;color:var(--text-muted);pointer-events:none}
.detail-section--collapsible .detail-section__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
/* when expanded, add separator between toggle and content */
.detail-section--collapsible .detail-section__toggle[aria-expanded="true"]{border-bottom:1px solid var(--border)}

/* ── diagnosis panel items ──────────────────────────────────────────── */
.diag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem}
.diag-item{display:flex;flex-direction:column;padding:.75rem;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius)}
.diag-item__key{font-size:.625rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.03em;margin-bottom:.125rem}
.diag-item__val{font-size:.8125rem;color:var(--text);word-break:break-word}
.diag-item--normal{border-left:3px solid var(--success)}
.diag-item--replacement{border-left:3px solid var(--warning)}
.diag-item--repair{border-left:3px solid var(--danger)}
.diag-item--comment{grid-column:1/-1;background:var(--accent-light);border-color:#d4dffc}

/* ── inspection section ─────────────────────────────────────────────── */
.inspection-group{margin-bottom:1.5rem}
.inspection-group:last-child{margin-bottom:0}
.inspection-group__title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text);margin-bottom:.75rem;padding-bottom:.375rem;border-bottom:1px solid var(--border)}
.inspection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.5rem}
.inspection-item{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);font-size:.8125rem}
.inspection-item__label{color:var(--text-muted);font-size:.75rem}
.inspection-item__status{font-weight:600;font-size:.75rem}
.inspection-item__status--good{color:var(--success)}
.inspection-item__status--bad{color:var(--danger)}

/* ── accident history ─────────────────────────────────────────────── */
.accident-summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem;margin-bottom:1.25rem}
.accident-stat{padding:.75rem;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);text-align:center}
.accident-stat__label{font-size:.625rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.25rem}
.accident-stat__value{font-size:1.125rem;font-weight:700;color:var(--text)}
.accident-stat__value--danger{color:var(--danger)}
.accident-stat__value--success{color:var(--success)}

.accident-table{width:100%;border-collapse:collapse;font-size:.8125rem}
.accident-table th{text-align:left;font-size:.625rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;padding:.5rem .75rem;border-bottom:2px solid var(--border);background:var(--bg-raised)}
.accident-table td{padding:.5rem .75rem;border-bottom:1px solid var(--border);color:var(--text)}
.accident-table tr:last-child td{border-bottom:none}
.accident-table__type{font-weight:600}
.accident-table__type--my{color:var(--danger)}
.accident-table__type--other{color:var(--warning)}

/* ── vehicle info grid (master.detail) ────────────────────────────── */
.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.5rem}
.info-item{padding:.625rem .75rem;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius)}
.info-item__label{font-size:.625rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.125rem}
.info-item__value{font-size:.8125rem;font-weight:500;color:var(--text)}
.info-item--wide{grid-column:1/-1}

/* ── owner changes ────────────────────────────────────────────────── */
.owner-timeline{display:flex;flex-wrap:wrap;gap:.5rem}
.owner-timeline__item{padding:.375rem .75rem;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);font-size:.75rem;color:var(--text-muted)}

/* ── raw json ───────────────────────────────────────────────────────── */
.raw-json{font-family:'JetBrains Mono','SF Mono',monospace;font-size:.75rem;line-height:1.6;color:var(--text-muted);background:var(--bg-raised);padding:1rem;border-radius:var(--radius);overflow-x:auto;white-space:pre-wrap;word-break:break-word;max-height:500px;overflow-y:auto;border:1px solid var(--border)}