/* ============================================================
   Alta Auto Sales — inventory.css
   Inventory page layout, filter sidebar, pagination
   ============================================================ */

/* ===== WRAPPER ===== */
.inventory-wrapper {
  display:flex; gap:28px;
  max-width:1260px; margin:40px auto; padding:0 20px;
}

/* ===== SIDEBAR ===== */
.filter-sidebar {
  width:270px; flex-shrink:0;
  background:var(--white); border:1px solid var(--mid-grey);
  border-radius:10px; padding:22px;
  align-self:flex-start; position:sticky; top:86px;
  box-shadow:0 1px 6px rgba(0,0,0,0.05);
}
.filter-sidebar h3 {
  font-family:'Barlow Condensed',sans-serif; font-size:1.2rem; font-weight:700;
  color:var(--dark); margin-bottom:18px;
  display:flex; align-items:center; gap:8px;
  text-transform:uppercase; letter-spacing:0.5px;
}
.filter-sidebar h3 i { color:var(--primary); }
.filter-sidebar label {
  font-weight:600; font-size:12px; display:block;
  margin:14px 0 5px; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:0.8px;
}
.filter-sidebar select,
.filter-sidebar input[type="number"] {
  width:100%; padding:9px 12px;
  border:1px solid var(--border); border-radius:6px;
  font-size:13px; font-family:'Barlow',sans-serif;
  color:var(--text); background:var(--light-grey); transition:border-color 0.2s;
}
.filter-sidebar select:focus,
.filter-sidebar input[type="number"]:focus { outline:none; border-color:var(--primary); background:var(--white); }
.filter-sidebar input[type="range"] { width:100%; accent-color:var(--primary); margin-top:4px; }
#price-display { font-size:13px; font-weight:700; color:var(--primary); margin-top:4px; display:inline-block; }
.range-row { display:flex; gap:8px; }
.range-row input { width:calc(50% - 4px); }
.filter-divider { border:none; border-top:1px solid var(--mid-grey); margin:16px 0; }

/* ===== LISTING AREA ===== */
.vehicle-listing { flex:1; min-width:0; }
.listing-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:22px; flex-wrap:wrap; gap:12px;
  background:var(--light-grey); border-radius:8px; padding:14px 18px;
}
#results-count { font-weight:700; font-size:15px; color:var(--dark); }
#sort-by {
  padding:9px 14px; border:1px solid var(--border); border-radius:6px;
  font-size:13px; font-family:'Barlow',sans-serif; background:var(--white);
}

/* ===== NO RESULTS ===== */
.no-results { grid-column:1/-1; text-align:center; padding:60px 24px; color:var(--text-muted); }
.no-results i { font-size:3rem; margin-bottom:16px; opacity:0.3; display:block; }
.no-results h3 { font-family:'Barlow Condensed',sans-serif; font-size:1.5rem; font-weight:800; margin-bottom:8px; }

/* ===== PAGINATION ===== */
.pagination { display:flex; gap:8px; flex-wrap:wrap; margin-top:36px; align-items:center; }
.pagination button {
  padding:9px 16px; border:1px solid var(--border);
  background:var(--white); border-radius:6px; cursor:pointer;
  font-size:14px; font-family:'Barlow',sans-serif; font-weight:600; transition:all 0.2s;
}
.pagination button:hover  { border-color:var(--primary); color:var(--primary); }
.pagination button.active { background:var(--primary); color:var(--white); border-color:var(--primary); }

/* ===== MOBILE ===== */
@media (max-width:820px) {
  .inventory-wrapper { flex-direction:column; }
  .filter-sidebar { width:100%; position:static; }
}