/* =============================================================================
   Vehicle Comparison Engine — AutomobileHive
   Aesthetic: Dark-mode editorial with electric-orange accents
   ========================================================================== */

/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
    --vce-bg:           #0d0f14;
    --vce-surface:      #161920;
    --vce-surface-2:    #1e2229;
    --vce-border:       rgba(255,255,255,.07);
    --vce-text:         #e8eaf0;
    --vce-text-muted:   #7a7f8e;
    --vce-accent:       #ff6b2b;          /* electric orange */
    --vce-accent-glow:  rgba(255,107,43,.25);
    --vce-winner:       #00e5a0;          /* green for winner cells */
    --vce-winner-bg:    rgba(0,229,160,.08);
    --vce-radius:       12px;
    --vce-radius-sm:    6px;
    --vce-transition:   .2s cubic-bezier(.4,0,.2,1);
    --vce-font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --vce-font-body:    'DM Sans', 'Segoe UI', sans-serif;
    --vce-shadow:       0 8px 32px rgba(0,0,0,.5);
    --vce-header-h:     220px;   /* height of sticky header row */
}

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700&family=DM+Sans:wght@300;400;500&display=swap');

/* ── Wrapper ────────────────────────────────────────────────────────────────── */
.vce-wrapper {
    font-family:    var(--vce-font-body);
    background:     var(--vce-bg);
    color:          var(--vce-text);
    border-radius:  var(--vce-radius);
    overflow:       hidden;
    box-shadow:     var(--vce-shadow);
    position:       relative;
}

/* ── Toolbar ────────────────────────────────────────────────────────────────── */
.vce-toolbar {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         14px 22px;
    background:      var(--vce-surface);
    border-bottom:   1px solid var(--vce-border);
}

.vce-toolbar__logo {
    color: var(--vce-accent);
    display: flex;
    align-items: center;
}

.vce-toolbar__title {
    font-family:  var(--vce-font-display);
    font-size:    1.1rem;
    font-weight:  700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin:       0;
    flex:         1;
    color:        var(--vce-text);
}

.vce-toolbar__count {
    font-size:    .75rem;
    font-weight:  500;
    color:        var(--vce-accent);
    background:   var(--vce-accent-glow);
    padding:      3px 10px;
    border-radius: 999px;
    border:       1px solid var(--vce-accent);
    letter-spacing: .04em;
}

/* ── Grid layout ────────────────────────────────────────────────────────────── */
/*  Column 0 = spec labels, Columns 1-N = vehicle data                         */
.vce-grid {
    display:               grid;
    grid-template-columns: 160px repeat(var(--vce-cols), 1fr);
    /* no gap: borders handle separation */
}

/* ── Generic cell ───────────────────────────────────────────────────────────── */
.vce-cell {
    padding:        16px 18px;
    border-right:   1px solid var(--vce-border);
    border-bottom:  1px solid var(--vce-border);
    transition:     background var(--vce-transition);
    position:       relative;
}

.vce-cell:last-child { border-right: none; }

/* ── Label column ───────────────────────────────────────────────────────────── */
.vce-cell--label {
    background:   var(--vce-surface);
    display:      flex;
    flex-direction: column;
    justify-content: center;
    gap:          3px;
}

.vce-spec-label {
    font-size:    .8rem;
    font-weight:  500;
    color:        var(--vce-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.vce-spec-unit {
    font-size:    .7rem;
    color:        var(--vce-text-muted);
    opacity:      .6;
}

.vce-spec-group-label {
    font-family:  var(--vce-font-display);
    font-size:    .85rem;
    font-weight:  700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:        var(--vce-text-muted);
}

/* ── Header row (STICKY — Requirement 4) ──────────────────────────────────── */
.vce-row--header {
    display:  contents;   /* participates in parent grid */
}

.vce-row--header .vce-cell {
    position:   sticky;
    top:        0;
    z-index:    20;
    background: var(--vce-surface-2);
    border-bottom: 2px solid var(--vce-accent);
    padding:    0;
}

.vce-row--header .vce-cell--label {
    z-index:    21;   /* sit above vehicle cells */
    padding:    16px 18px;
}

/* ── Vehicle card (inside header cell) ─────────────────────────────────────── */
.vce-vehicle-card {
    position:   relative;
    display:    flex;
    flex-direction: column;
    align-items: center;
    gap:        8px;
    padding:    18px 14px 14px;
    height:     100%;
    text-align: center;
}

.vce-remove-btn {
    position:   absolute;
    top:        8px;
    right:      8px;
    background: rgba(255,255,255,.06);
    border:     1px solid var(--vce-border);
    border-radius: 999px;
    color:      var(--vce-text-muted);
    cursor:     pointer;
    padding:    4px;
    line-height: 0;
    transition: all var(--vce-transition);
    z-index:    2;
}

.vce-remove-btn:hover {
    background: rgba(255,107,43,.15);
    border-color: var(--vce-accent);
    color:      var(--vce-accent);
}

.vce-vehicle-card__image-wrap {
    width:          90px;
    height:         60px;
    border-radius:  var(--vce-radius-sm);
    overflow:       hidden;
    background:     var(--vce-surface);
    border:         1px solid var(--vce-border);
    flex-shrink:    0;
}

.vce-vehicle-card__image {
    width:    100%;
    height:   100%;
    object-fit: cover;
    display:  block;
}

.vce-vehicle-card__image-placeholder {
    width:    100%;
    height:   100%;
    display:  flex;
    align-items: center;
    justify-content: center;
    color:    var(--vce-text-muted);
    opacity:  .4;
}

.vce-vehicle-card__meta {
    display:  flex;
    flex-direction: column;
    align-items: center;
    gap:      2px;
}

.vce-vehicle-card__year {
    font-size:  .7rem;
    font-weight: 600;
    color:      var(--vce-accent);
    letter-spacing: .08em;
}

.vce-vehicle-card__title {
    font-family: var(--vce-font-display);
    font-size:   .95rem;
    font-weight: 700;
    letter-spacing: .02em;
    margin:      0;
    line-height: 1.2;
}

.vce-vehicle-card__title a {
    color:          var(--vce-text);
    text-decoration: none;
    transition:     color var(--vce-transition);
}

.vce-vehicle-card__title a:hover { color: var(--vce-accent); }

.vce-vehicle-card__make {
    font-size:  .72rem;
    color:      var(--vce-text-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
}

/* ── Data rows ───────────────────────────────────────────────────────────────── */
.vce-row--spec {
    display: contents;
}

.vce-row--spec:hover .vce-cell {
    background: rgba(255,255,255,.02);
}

.vce-cell--data {
    display:    flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--vce-bg);
}

.vce-value {
    font-size:    .95rem;
    font-weight:  500;
    color:        var(--vce-text);
    font-variant-numeric: tabular-nums;
    transition:   color var(--vce-transition), background var(--vce-transition);
    padding:      4px 8px;
    border-radius: var(--vce-radius-sm);
}

.vce-value--placeholder {
    color: var(--vce-text-muted);
    opacity: .4;
}

.vce-na {
    color:    var(--vce-text-muted);
    opacity:  .5;
    font-size: .85rem;
}

/* ── WINNER highlight (Requirement 3) ─────────────────────────────────────── */
.vce-cell--data.is-winner {
    background: var(--vce-winner-bg);
}

.vce-cell--data.is-winner .vce-value {
    color:        var(--vce-winner);
    font-weight:  700;
    position:     relative;
}

.vce-cell--data.is-winner .vce-value::after {
    content:    '▲';
    font-size:  .55rem;
    vertical-align: super;
    margin-left: 3px;
    color:      var(--vce-winner);
}

/* For "low wins" (price, acceleration) the arrow flips */
.vce-cell--data.is-winner[data-winner-rule="low"] .vce-value::after {
    content: '▼';
    color:   var(--vce-winner);
}

/* ── Empty column ───────────────────────────────────────────────────────────── */
.vce-cell--empty.vce-cell--header {
    background: rgba(255,255,255,.02);
}

.vce-cell--empty.vce-cell--data {
    background: rgba(255,255,255,.01);
}

/* ── Search slot (Requirement 5) ─────────────────────────────────────────── */
.vce-search-slot {
    display:      flex;
    flex-direction: column;
    align-items:  center;
    gap:          10px;
    padding:      20px 14px 16px;
    min-height:   var(--vce-header-h);
    justify-content: center;
}

.vce-search-slot__icon {
    color:    var(--vce-accent);
    opacity:  .6;
    line-height: 0;
}

.vce-search-slot__prompt {
    font-size:  .78rem;
    color:      var(--vce-text-muted);
    margin:     0;
    text-align: center;
    line-height: 1.4;
}

.vce-search-slot__input-wrap {
    width:    100%;
    position: relative;
}

.vce-search-input {
    width:          100%;
    background:     var(--vce-surface);
    border:         1px solid var(--vce-border);
    border-radius:  var(--vce-radius-sm);
    color:          var(--vce-text);
    font-family:    var(--vce-font-body);
    font-size:      .82rem;
    padding:        9px 34px 9px 12px;
    outline:        none;
    transition:     border-color var(--vce-transition), box-shadow var(--vce-transition);
    box-sizing:     border-box;
}

.vce-search-input:focus {
    border-color: var(--vce-accent);
    box-shadow:   0 0 0 3px var(--vce-accent-glow);
}

.vce-search-input::placeholder { color: var(--vce-text-muted); opacity: .6; }

/* Spinner */
.vce-search-spinner {
    position:    absolute;
    right:       10px;
    top:         50%;
    transform:   translateY(-50%);
    width:       14px;
    height:      14px;
    border:      2px solid var(--vce-border);
    border-top-color: var(--vce-accent);
    border-radius: 50%;
    display:     none;
}

.vce-search-slot--loading .vce-search-spinner {
    display:    block;
    animation:  vce-spin .7s linear infinite;
}

@keyframes vce-spin { to { transform: translateY(-50%) rotate(360deg); } }

/* Dropdown results */
.vce-search-results {
    list-style:     none;
    margin:         4px 0 0;
    padding:        0;
    background:     var(--vce-surface-2);
    border:         1px solid var(--vce-border);
    border-radius:  var(--vce-radius-sm);
    overflow:       hidden;
    max-height:     220px;
    overflow-y:     auto;
    display:        none;
    position:       absolute;
    left:           0;
    right:          0;
    z-index:        100;
    box-shadow:     0 16px 32px rgba(0,0,0,.6);
}

.vce-search-results.is-open { display: block; }

.vce-search-results__item {
    display:      flex;
    align-items:  center;
    gap:          10px;
    padding:      9px 12px;
    cursor:       pointer;
    transition:   background var(--vce-transition);
    font-size:    .82rem;
}

.vce-search-results__item:hover,
.vce-search-results__item.is-focused {
    background: rgba(255,107,43,.1);
}

.vce-search-results__thumb {
    width:        36px;
    height:       26px;
    object-fit:   cover;
    border-radius: 3px;
    flex-shrink:  0;
    background:   var(--vce-surface);
    border:       1px solid var(--vce-border);
}

.vce-search-results__thumb--placeholder {
    display:      flex;
    align-items:  center;
    justify-content: center;
    color:        var(--vce-text-muted);
    opacity:      .4;
    font-size:    .7rem;
}

.vce-search-results__name { color: var(--vce-text); font-weight: 500; }
.vce-search-results__year { color: var(--vce-accent); font-size: .72rem; }

.vce-search-results__empty {
    padding:    12px;
    text-align: center;
    color:      var(--vce-text-muted);
    font-size:  .8rem;
    font-style: italic;
}

/* ── Column enter animation ─────────────────────────────────────────────────── */
@keyframes vce-col-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.vce-cell--animating {
    animation: vce-col-in .35s cubic-bezier(.4,0,.2,1) forwards;
}

/* ── Scrollbar styling ──────────────────────────────────────────────────────── */
.vce-grid::-webkit-scrollbar       { height: 4px; }
.vce-grid::-webkit-scrollbar-track { background: var(--vce-surface); }
.vce-grid::-webkit-scrollbar-thumb { background: var(--vce-accent); border-radius: 2px; }

/* =============================================================================
   RESPONSIVE
   ========================================================================== */

/* ── Medium: shrink label column ────────────────────────────────────────────── */
@media (max-width: 900px) {
    .vce-grid {
        grid-template-columns: 120px repeat(var(--vce-cols), 1fr);
    }
    .vce-cell { padding: 12px 10px; }
    .vce-vehicle-card__image-wrap { width: 70px; height: 46px; }
    .vce-vehicle-card__title { font-size: .88rem; }
}

/* ── Mobile: horizontal scroll + sticky label column ──────────────────────── */
@media (max-width: 640px) {
    .vce-wrapper {
        border-radius: 8px;
    }

    .vce-grid {
        /* allow horizontal scroll */
        overflow-x:            auto;
        -webkit-overflow-scrolling: touch;
        /* label col fixed, vehicle cols min 140px */
        grid-template-columns: 100px repeat(var(--vce-cols), minmax(140px, 1fr));
    }

    /* Sticky label column on mobile */
    .vce-cell--label {
        position:   sticky;
        left:       0;
        z-index:    10;
        background: var(--vce-surface);
        box-shadow: 2px 0 8px rgba(0,0,0,.4);
    }

    /* Header cells sticky both top AND label sticky left */
    .vce-row--header .vce-cell--label {
        z-index: 30;
    }

    .vce-spec-label  { font-size: .72rem; }
    .vce-spec-unit   { font-size: .65rem; }
    .vce-cell        { padding: 10px 8px; }

    .vce-vehicle-card {
        padding: 12px 8px 10px;
        gap:     6px;
    }

    .vce-vehicle-card__image-wrap { width: 56px; height: 38px; }
    .vce-vehicle-card__title      { font-size: .8rem; }
    .vce-vehicle-card__year       { font-size: .65rem; }

    .vce-search-slot  { padding: 12px 8px; gap: 8px; }
    .vce-search-input { font-size: .78rem; }

    .vce-toolbar__title { font-size: .95rem; }
}

/* ── Utility ────────────────────────────────────────────────────────────────── */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}