:root {
  /* Brand Colors */
  --color-black: #161616;
  --color-orange: var(--earthy-accent-orange, #b98654);
  --color-light: #ccbeb1;
  --color-gray: #ededed;
  --color-brown: #846d5e;
  --color-purple: var(--earthy-accent-purple, #7a5f58);
  --color-cyan: #0097b2;
  --color-white: #ffffff;

  /* Semantic Theme Variables (Light Mode) */
  --md-background: #f8f9fa;
  --md-background-solid: #ffffff;
  --md-surface: #ffffff;
  --md-on-surface: #161616;
  --md-muted: #6c757d;
  --md-border: rgba(0, 0, 0, 0.12);
  --md-error: #dc3545;

  /* Bootstrap variable overrides */
  --bs-primary: var(--color-brown);
  --bs-primary-rgb: 132, 109, 94;
  --bs-body-font-family: var(--md-font-family);
  
  /* Primary variables used in components */
  --md-primary: var(--color-brown);
  --md-on-primary: var(--color-white);
  --md-primary-variant: #a38c7b;
  --bs-secondary: var(--color-black);
  --bs-secondary-rgb: 22, 22, 22;
  --bs-body-bg: var(--md-background);
  --bs-body-color: var(--md-on-surface);
  --bs-link-color: #cbbd93;
  --bs-link-hover-color: #80775c;

  /* Variant for darker black */
  --color-black-variant: #2c2c2c;

  /* Spacing scale (8px grid) */
  --md-space-0: 0px;
  --md-space-1: 4px;
  --md-space-2: 8px;
  --md-space-3: 16px;
  --md-space-4: 24px;
  --md-space-5: 32px;
  --md-space-6: 40px;
  --md-space-7: 48px;

  /* Border radius */
  --md-radius-sm: 6px;
  --md-radius-md: 10px;
  --md-radius-lg: 16px;

  /* Elevation (shadows) */
  --md-elevation-0: none;
  --md-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --md-elevation-2: 0 4px 8px rgba(0, 0, 0, 0.08);
  --md-elevation-3: 0 12px 24px rgba(0, 0, 0, 0.1);
  --md-elevation-4: 0 16px 32px rgba(0, 0, 0, 0.12);

  /* Typography — Urbanist primary, Roboto fallback */
  --md-font-family: "Urbanist", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --md-font-size-base: 16px;
  --md-font-size-sm: 14px;
  --md-font-size-lg: 18px;
  --md-font-size-xl: 20px;
  --md-font-size-h1: 32px;
  --md-font-size-h2: 28px;
  --md-font-size-h3: 24px;
  --md-font-size-h4: 20px;

  --md-font-weight-light: 300;
  --md-font-weight-regular: 400;
  --md-font-weight-medium: 500;
  --md-font-weight-bold: 700;

  /* Transitions */
  --md-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --md-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --md-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index layers */
  --md-z-dropdown: 1000;
  --md-z-modal: 1050;
  --md-z-tooltip: 1070;
  --md-z-fab: 1040;
}

[data-theme="dark"] {
  /* Semantic Theme Variables (Dark Mode) */
  --md-background: #121212;
  --md-background-solid: #1e1e1e;
  --md-surface: #1e1e1e;
  --md-on-surface: #f0f0f0;
  --md-muted: #a0a0a0;
  --md-border: rgba(255, 255, 255, 0.12);
  --md-error: #ff6b6b;

  --bs-body-bg: var(--md-background);
  --bs-body-color: var(--md-on-surface);
  
  --color-black-variant: #2a2a2a;
  
  /* Brighten some shadows for dark mode */
  --md-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.5);
  --md-elevation-2: 0 4px 8px rgba(0, 0, 0, 0.6);
  --md-elevation-3: 0 12px 24px rgba(0, 0, 0, 0.7);
  --md-elevation-4: 0 16px 32px rgba(0, 0, 0, 0.8);
}

/* ============================================================
   UTILITY CLASSES (Colors)
   ============================================================ */
.bg-black { background-color: var(--color-black); }
.bg-brown { background-color: var(--color-brown); }
.bg-orange { background-color: var(--color-orange); }
.bg-light-custom { background-color: var(--color-light); }
.bg-gray { background-color: var(--color-gray); }
.bg-purple { background-color: var(--color-purple); }
.bg-cyan { background-color: var(--color-cyan); }

.text-black { color: var(--color-black); }
.text-brown { color: var(--color-brown); }
.text-orange { color: var(--color-orange); }
.text-purple { color: var(--color-purple); }
.text-cyan { color: var(--color-cyan); }
.text-gray { color: var(--color-gray); }

/* ============================================================
   GLOBAL RESETS & BASE STYLES
   ============================================================ */
body {
  font-family: var(--md-font-family);
  font-size: var(--md-font-size-base);
  color: var(--md-on-surface);
  background: var(--md-background);
  background-attachment: fixed;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--md-font-weight-medium);
  line-height: 1.3;
  margin-bottom: var(--md-space-3);
  color: var(--md-on-surface);
}

h1 {
  font-size: var(--md-font-size-h1);
}
h2 {
  font-size: var(--md-font-size-h2);
}
h3 {
  font-size: var(--md-font-size-h3);
}
h4 {
  font-size: var(--md-font-size-h4);
}

p {
  margin-bottom: var(--md-space-3);
}

a {
  color: var(--color-black);
  text-decoration: none;
  transition: color var(--md-transition-fast);
}

a:hover {
  color: var(--color-brown);
}

/* ============================================================
   BOOTSTRAP OVERRIDES - Cards & Surfaces
   ============================================================ */
.card {
  background-color: var(--md-surface) !important;
  border: none !important;
  border-radius: var(--md-radius-md) !important;
  box-shadow: var(--md-elevation-2) !important;
  transition: box-shadow var(--md-transition-normal),
    transform var(--md-transition-normal);
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--md-elevation-3) !important;
  transform: translateY(-2px);
}

.card-body {
  padding: var(--md-space-4);
}

.card-footer {
  background-color: transparent;
  border-top: 1px solid var(--md-border);
  padding: var(--md-space-3) var(--md-space-4);
}

/* Keep card titles resilient for very long values across search + dashboard cards. */
.listing-card .card-title,
.wanted-card .card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.listing-card .vehicle-details,
.wanted-card .vehicle-details,
.listing-card .location-info,
.wanted-card .location-info,
.listing-card .spec-item span,
.wanted-card .spec-item span {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ============================================================
   BUTTONS - Material Design Style
   ============================================================ */
.btn {
  font-family: var(--md-font-family);
  font-weight: var(--md-font-weight-medium);
  font-size: var(--md-font-size-base);
  padding: var(--md-space-2) var(--md-space-4);
  border-radius: var(--md-radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all var(--md-transition-fast);
  position: relative;
  overflow: hidden;
  box-shadow: var(--md-elevation-1);
}

.btn:hover {
  box-shadow: var(--md-elevation-2);
  transform: translateY(-1px);
}

.btn:active {
  box-shadow: var(--md-elevation-1);
  transform: translateY(0);
}

/* Text Button (no background) */
.btn-text {
  background-color: transparent;
  color: var(--color-black);
  box-shadow: none;
  text-transform: none;
}

.btn-text:hover {
  background-color: rgba(203, 189, 147, 0.1);
}

/* Success Button */
.btn-success,
.create-listing-btn,
button.btn-success,
a.btn-success {
  background-color: #2e7d32 !important;
  color: white !important;
  border-color: #2e7d32 !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.create-listing-btn:hover,
button.btn-success:hover,
a.btn-success:hover {
  background-color: #1b5e20 !important;
  color: white !important;
  border-color: #1b5e20 !important;
}

/* Icon Button */
.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* FAB (Floating Action Button) */
.btn-fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  position: fixed;
  bottom: var(--md-space-4);
  right: var(--md-space-4);
  box-shadow: var(--md-elevation-3);
  z-index: var(--md-z-fab);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background-color: var(--color-black);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  transition: all var(--md-transition-normal);
}

.btn-fab:hover {
  box-shadow: var(--md-elevation-4);
  transform: scale(1.1);
}

/* Ripple effect container */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width var(--md-transition-normal),
    height var(--md-transition-normal);
}

.btn-ripple:active::after {
  width: 300px;
  height: 300px;
}

/* ============================================================
   FORMS - Floating Labels & Material Inputs
   ============================================================ */
.form-control,
.form-select {
  border: 1px solid var(--md-border);
  border-radius: var(--md-radius-sm);
  padding: var(--md-space-3) var(--md-space-3);
  font-size: var(--md-font-size-base);
  transition: all var(--md-transition-fast);
  background-color: var(--md-background-solid);
  color: var(--md-on-surface);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--color-black);
  box-shadow: 0 0 0 3px rgba(203, 189, 147, 0.1);
  outline: none;
  background-color: var(--md-background);
}

/* Floating label wrapper */
.form-floating {
  position: relative;
}

.form-floating > label {
  position: absolute;
  top: 50%;
  left: var(--md-space-3);
  transform: translateY(-50%);
  font-size: var(--md-font-size-base);
  color: var(--md-muted);
  pointer-events: none;
  transition: all var(--md-transition-fast);
  background-color: var(--md-surface);
  padding: 0 var(--md-space-1);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  top: 0;
  font-size: var(--md-font-size-sm);
  color: var(--color-black);
}

/* Override violet gradient from custom.css */
.bg-gradient,
#hero.bg-gradient,
section.bg-gradient {
  background: var(--md-background) !important;
  background-attachment: fixed;
}

/* ============================================================
   NAVBAR - Material AppBar Style (Night Sands)
   ============================================================ */
.navbar,
.navbar-earthy,
.navbar-dark,
.navbar-light {
  background: #161616 !important;
  box-shadow: var(--md-elevation-2);
  padding: var(--md-space-3) var(--md-space-4);
  border-bottom: none;
}

/* Brand */
.navbar .navbar-brand,
.navbar-earthy .navbar-brand {
  color: var(--color-white) !important;
  font-weight: var(--md-font-weight-bold);
  transition: opacity var(--md-transition-fast);
}

.navbar .navbar-brand:hover,
.navbar-earthy .navbar-brand:hover {
  opacity: 0.85;
}

/* Navigation links - consistent styling */
.navbar .nav-link,
.navbar-earthy .nav-link {
  position: relative;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: var(--md-font-weight-medium);
  padding: var(--md-space-2) var(--md-space-3);
  border-radius: var(--md-radius-sm);
  transition: all var(--md-transition-fast);
  border: none !important;
  background: transparent !important;
}

.navbar .nav-link:hover,
.navbar-earthy .nav-link:hover {
  background-color: rgba(250, 232, 180, 0.15) !important;
  color: white !important;
  transform: translateY(-1px);
}

.navbar .nav-link.active,
.navbar-earthy .nav-link.active {
  background-color: var(--color-black-variant) !important;
  color: var(--color-white) !important;
}

/* Buttons in navbar - unified styling */
.navbar .btn,
.navbar-earthy .btn {
  position: relative;
  overflow: hidden;
  border: none !important;
  box-shadow: none !important;
  font-weight: var(--md-font-weight-medium);
  transition: all var(--md-transition-fast);
}

/* Theme toggle button */
.navbar .btn-outline-primary,
.navbar-earthy .btn-outline-primary {
  color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: transparent !important;
}

.navbar .btn-outline-primary:hover,
.navbar-earthy .btn-outline-primary:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: white !important;
}

/* Success button (Create Listing) */
.navbar .btn-success,
.navbar-earthy .btn-success {
  background-color: rgba(76, 175, 80, 0.9) !important;
  color: white !important;
  border: none !important;
}

.navbar .btn-success:hover,
.navbar-earthy .btn-success:hover {
  background-color: rgba(76, 175, 80, 1) !important;
  transform: translateY(-2px);
  box-shadow: var(--md-elevation-3) !important;
}

/* Logout button - remove border and match nav-link style */
.navbar .btn-link,
.navbar-earthy .btn-link {
  color: rgba(255, 255, 255, 0.95) !important;
  border: none !important;
  background: transparent !important;
  padding: var(--md-space-2) var(--md-space-3) !important;
  border-radius: var(--md-radius-sm) !important;
  text-decoration: none !important;
}

.navbar .btn-link:hover,
.navbar-earthy .btn-link:hover {
  background-color: rgba(250, 232, 180, 0.15) !important;
  color: white !important;
  transform: translateY(-1px);
}

/* Navbar toggler for mobile */
.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.3) !important;
  padding: var(--md-space-2);
  position: relative;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25) !important;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-mobile-unread-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.35rem;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #dc3545;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2rem;
  text-align: center;
  border: 2px solid rgba(28, 25, 22, 0.95);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}

/* ============================================================
   LIST GROUPS - Material List Style
   ============================================================ */
.list-group {
  border-radius: var(--md-radius-md);
  overflow: hidden;
  box-shadow: var(--md-elevation-1);
}

.list-group-item {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: var(--md-space-3) var(--md-space-4);
  transition: background-color var(--md-transition-fast);
}

.list-group-item:last-child {
  border-bottom: none;
}

.list-group-item:hover {
  background-color: rgba(203, 189, 147, 0.05);
}

.list-group-item-action:active {
  background-color: rgba(203, 189, 147, 0.1);
}

/* ============================================================
   MODALS - Material Dialog Style
   ============================================================ */
.modal-content {
  border: none;
  border-radius: var(--md-radius-lg);
  box-shadow: var(--md-elevation-4);
}

.modal-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: var(--md-space-4);
}

.modal-title {
  font-weight: var(--md-font-weight-medium);
  font-size: var(--md-font-size-xl);
}

.modal-body {
  padding: var(--md-space-4);
}

.modal-footer {
  border-top: 1px solid var(--md-border);
  padding: var(--md-space-3) var(--md-space-4);
  gap: var(--md-space-2);
}

/* ============================================================
   ALERTS - Material Snackbar Style
   ============================================================ */
.alert {
  border: none;
  border-radius: var(--md-radius-sm);
  padding: var(--md-space-3) var(--md-space-4);
  box-shadow: var(--md-elevation-2);
  font-size: var(--md-font-size-base);
}

.alert-primary {
  background-color: var(--color-black-variant);
  color: var(--color-white);
}

.alert-danger {
  background-color: #ffebee;
  color: var(--md-error);
}

.alert-success {
  background-color: #e8f5e9;
  color: #2e7d32;
}

/* ============================================================
   TABLES - Material Data Table Style
   ============================================================ */
.table {
  border-collapse: separate;
  border-spacing: 0;
}

.table thead th {
  background-color: var(--md-surface);
  border-bottom: 2px solid rgba(0, 0, 0, 0.12);
  font-weight: var(--md-font-weight-medium);
  color: var(--md-on-surface);
  padding: var(--md-space-3) var(--md-space-3);
  text-transform: uppercase;
  font-size: var(--md-font-size-sm);
  letter-spacing: 0.5px;
}

.table tbody tr {
  transition: background-color var(--md-transition-fast);
}

.table tbody tr:hover {
  background-color: rgba(203, 189, 147, 0.05);
}

.table tbody td {
  padding: var(--md-space-3) var(--md-space-3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* ============================================================
   DROPDOWNS - Material Menu Style
   ============================================================ */
.dropdown-menu {
  border: none;
  border-radius: var(--md-radius-md);
  box-shadow: var(--md-elevation-3);
  padding: var(--md-space-2) 0;
  margin-top: var(--md-space-2);
}

.dropdown-item {
  padding: var(--md-space-2) var(--md-space-4);
  transition: background-color var(--md-transition-fast);
  font-size: var(--md-font-size-base);
}

.dropdown-item:hover {
  background-color: rgba(203, 189, 147, 0.1);
  color: var(--color-black);
}

.dropdown-item:active {
  background-color: rgba(203, 189, 147, 0.2);
  color: var(--color-white);
}

/* ============================================================
   PAGINATION - Material Style
   ============================================================ */
.pagination {
  gap: var(--md-space-1);
}

.page-link {
  border: none;
  border-radius: var(--md-radius-sm);
  color: var(--md-on-surface);
  padding: var(--md-space-2) var(--md-space-3);
  transition: all var(--md-transition-fast);
  margin: 0 2px;
}

.page-link:hover {
  background-color: rgba(203, 189, 147, 0.1);
  color: var(--color-black);
}

.page-item.active .page-link {
  background-color: var(--color-black);
  color: var(--color-white);
  box-shadow: var(--md-elevation-1);
}

.page-item.disabled .page-link {
  color: var(--md-muted);
  opacity: 0.5;
}

/* Small badge variant for compact display */
.badge-sm,
.badge.badge-sm {
  font-size: 0.7rem !important;
  padding: 0.25rem 0.5rem !important;
}

/* ============================================================
   BREADCRUMBS - Material Style
   ============================================================ */
.breadcrumb {
  background-color: transparent;
  padding: var(--md-space-3) 0;
  margin-bottom: var(--md-space-3);
}

.breadcrumb-item {
  font-size: var(--md-font-size-sm);
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: var(--md-muted);
  padding: 0 var(--md-space-2);
}

.breadcrumb-item.active {
  color: var(--md-muted);
}

/* ============================================================
   PROGRESS BARS - Material Style
   ============================================================ */
.progress {
  height: 4px;
  border-radius: var(--md-radius-sm);
  background-color: rgba(203, 189, 147, 0.2);
  overflow: hidden;
}

.progress-bar {
  background-color: var(--color-black);
  transition: width var(--md-transition-normal);
}

/* ============================================================
   TOOLTIPS - Material Style
   ============================================================ */
.tooltip-inner {
  background-color: var(--md-on-surface);
  color: var(--md-surface);
  padding: var(--md-space-2) var(--md-space-3);
  border-radius: var(--md-radius-sm);
  font-size: var(--md-font-size-sm);
  box-shadow: var(--md-elevation-2);
}
/* ============================================================
   FILTER PANEL - Material Side Sheet Style
   ============================================================ */
.filter-panel {
  background-color: var(--md-surface);
  border-radius: var(--md-radius-md);
  box-shadow: var(--md-elevation-2);
  padding: var(--md-space-4);
  margin-bottom: var(--md-space-4);
  position: sticky;
  top: var(--md-space-4);
}

.filter-panel-title {
  font-size: var(--md-font-size-lg);
  font-weight: var(--md-font-weight-medium);
  margin-bottom: var(--md-space-4);
  color: var(--md-on-surface);
}

.filter-group {
  margin-bottom: var(--md-space-4);
}

.filter-group-title {
  font-size: var(--md-font-size-base);
  font-weight: var(--md-font-weight-medium);
  margin-bottom: var(--md-space-2);
  color: var(--md-on-surface);
}

.filter-divider {
  height: 1px;
  background-color: rgba(0, 0, 0, 0.06);
  margin: var(--md-space-3) 0;
}

/* ============================================================
   SEARCH BAR - Material Design
   ============================================================ */

.search-container {
  background-color: var(--md-surface);
  border-radius: var(--md-radius-lg);
  box-shadow: var(--md-elevation-2);
  padding: var(--md-space-3) var(--md-space-4);
  display: flex;
  align-items: center;
  gap: var(--md-space-3);
  margin-bottom: var(--md-space-4);
}

.search-container input {
  border: none;
  outline: none;
  flex: 1;
  font-size: var(--md-font-size-base);
  background-color: transparent;
}

.search-container button {
  background-color: var(--color-black);
  color: var(--color-white);
  border: none;
  padding: var(--md-space-2) var(--md-space-4);
  border-radius: var(--md-radius-sm);
  cursor: pointer;
  transition: all var(--md-transition-fast);
}

.search-container button:hover {
  background-color: var(--color-brown);
  box-shadow: var(--md-elevation-1);
}

/* .chip and .chip-dark classes removed - not used in HTML */

.chip-removable {
  cursor: pointer;
}

.chip-remove {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--md-transition-fast);
}

.chip-remove:hover {
  background-color: rgba(0, 0, 0, 0.4);
}

/* ============================================================
   DIVIDERS
   ============================================================ */
.divider {
  height: 1px;
  background-color: rgba(0, 0, 0, 0.06);
  margin: var(--md-space-4) 0;
}

.divider-vertical {
  width: 1px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.06);
  margin: 0 var(--md-space-3);
}

/* ============================================================
   SPINNER / LOADING - Material Circular Progress
   ============================================================ */
.spinner-material {
  border: 3px solid rgba(203, 189, 147, 0.2);
  border-top-color: var(--color-black);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================
   COMPREHENSIVE OVERRIDES - All Violet Gradients (#667eea)
   These overrides ensure Night Sands palette is used across:
   - listing-cards-modern.css
   - wanted-cards.css  
   - dashboard-modern.css
   - listing-details.css (if exists)
   - filter_drawer.css
   ============================================================ */

/* Listings Header - Clean Elevated Card Design */
.listings-header-card {
  background: var(--md-surface);
  border-radius: var(--md-radius-lg);
  box-shadow: var(--md-elevation-2);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .listings-header-card {
    padding: var(--md-space-4);
  }
}

/* Badge styles now globally defined in BADGES section */

/* Dashboard Components */
.dashboard-section-header {
  background: linear-gradient(
    135deg,
    var(--color-black) 0%,
    var(--color-brown) 100%
  ) !important;
}

/* Specific overrides for gradient card headers (base defined in CARDS section) */
.card-header[style*="gradient"],
.card-header.bg-gradient {
  color: white !important;
}

/* Filter Chips — Bootstrap-aligned pill badges */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.55rem;
  border-radius: 50rem;
  font-size: 0.8rem;
  line-height: 1.3;
  background-color: var(--color-black, #212529) !important;
  color: var(--color-white, #fff) !important;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
.filter-chip:hover {
  background-color: var(--color-brown, #6c584c) !important;
}
.filter-chip-label {
  font-weight: 600;
  opacity: 0.8;
}
.filter-chip-value {
  font-weight: 400;
}
.filter-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
  margin-left: 0.15rem;
  cursor: pointer;
  opacity: 0.7;
  font-size: 0.7rem;
  line-height: 1;
  transition: opacity 0.15s;
}
.filter-chip-remove:hover {
  opacity: 1;
}
.filter-chip-bar-empty {
  /* Reserve space so layout doesn't jump when chips appear */
  min-height: 0;
}

/* Results Meta / Pagination */
.results-summary .badge {
  background-color: var(--color-black) !important;
}

/* Equipment Checkboxes (if styled) */
.equipment-checkbox:checked + label {
  background-color: rgba(203, 189, 147, 0.1) !important;
  border-color: var(--color-black) !important;
}

/* Universal Spinner/Loading */
.spinner-border,
.htmx-indicator .spinner-border,
.loading-spinner {
  border-top-color: var(--color-black) !important;
}

.spinner-border-secondary {
  border-top-color: var(--color-brown) !important;
}

/* Universal Alert/Toast */
.alert-primary,
.toast-primary {
  background-color: var(--color-black-variant) !important;
  color: var(--color-white) !important;
  border-color: var(--color-black) !important;
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --md-font-size-base: 14px;
    --md-font-size-h1: 24px;
    --md-font-size-h2: 22px;
    --md-font-size-h3: 20px;
  }

  .btn-fab {
    bottom: var(--md-space-3);
    right: var(--md-space-3);
    width: 48px;
    height: 48px;
  }

  .card-body {
    padding: var(--md-space-3);
  }

  .filter-panel {
    position: static;
  }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.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;
}

/* Focus visible for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

/* styling for favorite-btn on search results cards*/
.favorite-btn {
  z-index: 20 !important; /* Higher than badges (z-index: 10) */
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
  transition: all 0.2s ease !important;
}

.favorite-btn:hover {
  transform: scale(1.2) !important;
}

.favorite-btn .fa-star {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.favorite-btn:hover .fa-star {
  color: #ffd700;
  text-shadow: 0 2px 6px rgba(255, 215, 0, 0.4);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.favorite-btn.favorited .fa-star {
  color: #ffd700 !important;
  text-shadow: 0 2px 6px rgba(255, 215, 0, 0.5);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

/* ============================================================
   VIEW MODE TOGGLE (LIST/GRID)
   ============================================================ */

/* List mode - full width cards with horizontal layout */
.view-mode-list .col-12 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

.view-mode-list .listing-card,
.view-mode-list .wanted-card,
.view-mode-list .md-card {
  display: flex !important;  /* CRITICAL: Must be flex for flex-direction to work */
  flex-direction: row !important;
  max-height: 200px;
}

/* Wrapper for body + footer in list mode (dashboard cards) */
.view-mode-list .card-content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;  /* Prevent content overflow */
}

.view-mode-list .listing-image,
.view-mode-list .card-img-top,
.view-mode-list .card-img-placeholder {
  width: 300px !important;
  height: 200px !important;
  flex-shrink: 0;
  border-radius: var(--md-radius-md) 0 0 var(--md-radius-md) !important;
}

.view-mode-list .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--md-space-3);
  overflow-y: auto;  /* Scroll if content too tall */
  min-height: 0;  /* Allow flex item to shrink below content size */
}

.view-mode-list .card-title {
  font-size: var(--md-font-size-lg);
  margin-bottom: var(--md-space-2);
}

.view-mode-list .specs-grid {
  flex-wrap: nowrap;
  overflow-x: auto;
}

.view-mode-list .footer-meta {
  margin-top: auto !important;
}

/* Card footer in list mode (dashboard action buttons) */
.view-mode-list .card-footer {
  flex-shrink: 0;  /* Don't shrink footer */
  border-top: 1px solid var(--md-border) !important;
}

/* ============================================================
   SWAP LANDING PAGE
   ============================================================ */



/* Choice cards for swap options */
.choice-card {
  transition: transform var(--md-transition-normal), 
              box-shadow var(--md-transition-normal),
              border-color var(--md-transition-normal);
  cursor: pointer;
  border: 1px solid transparent !important;
}

.choice-card:hover {
  transform: translateY(-8px) !important;
  border-color: var(--color-brown) !important;
  box-shadow: var(--md-elevation-4) !important;
}

/* Large icon in choice cards */
.choice-icon {
  font-size: 4rem;
  color: var(--color-brown);
  margin-bottom: 1.5rem;
  transition: transform var(--md-transition-normal);
}

.choice-card:hover .choice-icon {
  transform: scale(1.1);
}

/* Step number circles in "How It Works" */
.step-number {
  width: 56px;
  height: 56px;
  line-height: 56px;
  background: var(--color-brown);
  color: var(--color-white);
  border-radius: 50%;
  display: inline-block;
  font-weight: var(--md-font-weight-bold);
  font-size: var(--md-font-size-xl);
  margin-bottom: 1rem;
  box-shadow: var(--md-elevation-2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .swap-hero {
    padding: 2.5rem 0;
  }
  
  .choice-icon {
    font-size: 3rem;
  }
  
  .step-number {
    width: 48px;
    height: 48px;
    line-height: 48px;
    font-size: var(--md-font-size-lg);
  }
}


/* ============================================================
   GLOBAL BOOTSTRAP OVERRIDES FOR DARK THEME
   Ensures DRY principle by overriding hardcoded Bootstrap classes
   ============================================================ */
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white {
    background-color: var(--md-surface) !important;
}

[data-theme="dark"] .text-dark:not(.badge):not(.btn),
[data-theme="dark"] .text-black:not(.badge):not(.btn),
[data-theme="dark"] .text-body:not(.badge):not(.btn) {
    color: var(--md-on-surface) !important;
}

[data-theme="dark"] .text-muted {
    color: var(--md-muted) !important;
}

[data-theme="dark"] .text-secondary:not(.badge):not(.btn) {
    color: var(--md-muted) !important;
}

[data-theme="dark"] .text-success:not(.badge):not(.btn) {
    color: #81c784 !important;
}

[data-theme="dark"] .text-danger:not(.badge):not(.btn) {
    color: #e57373 !important;
}

[data-theme="dark"] .text-warning:not(.badge):not(.btn) {
    color: #ffd54f !important;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-light {
    border-color: var(--md-border) !important;
}


/* ============================================================
   PLACEHOLDER STYLING (Light & Dark Mode)
   ============================================================ */
.form-control::placeholder,
.form-select::placeholder {
  color: var(--md-muted) !important;
  opacity: 0.8 !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form-select::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
  opacity: 1 !important;
}


/* Disabled inputs dark mode override */
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly],
[data-theme="dark"] .form-select:disabled {
    background-color: var(--md-surface-variant) !important;
    color: var(--md-muted) !important;
    opacity: 0.8;
}


[data-theme="dark"] .input-group-text {
  background-color: var(--md-surface);
  color: var(--md-on-surface);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Buttons styling for dark mode */
[data-theme="dark"] .btn-outline-danger {
  color: #ff6b6b !important;
  border-color: #ff6b6b !important;
}
[data-theme="dark"] .btn-outline-danger:hover {
  background-color: #ff6b6b !important;
  color: var(--md-surface) !important;
}

/* Google social auth buttons */
.btn-google {
  color: #3c4043 !important;
  background-color: #ffffff !important;
  border-color: #080808 !important;
}

.btn-google:hover,
.btn-google:focus,
.btn-google:active,
.btn-google.active {
  color: #202124 !important;
  background-color: #f8f9fa !important;
  border-color: #d2d5da !important;
}

.btn-google:focus,
.btn-google.focus {
  box-shadow: 0 0 0 0.2rem rgba(66, 133, 244, 0.35) !important;
}

[data-theme="dark"] .btn-google {
  color: #202124 !important;
  background-color: #f8f9fa !important;
  border-color: #dadce0 !important;
}

[data-theme="dark"] .btn-google:hover,
[data-theme="dark"] .btn-google:focus,
[data-theme="dark"] .btn-google:active,
[data-theme="dark"] .btn-google.active {
  color: #202124 !important;
  background-color: #ffffff !important;
  border-color: #c6c9ce !important;
}

/* Facebook social auth buttons */
.btn-facebook {
  color: #ffffff !important;
  background-color: #1877f2 !important;
  border-color: #1877f2 !important;
}

.btn-facebook:hover,
.btn-facebook:focus,
.btn-facebook:active,
.btn-facebook.active {
  color: #ffffff !important;
  background-color: #166fe5 !important;
  border-color: #166fe5 !important;
}

.btn-facebook:focus,
.btn-facebook.focus {
  box-shadow: 0 0 0 0.2rem rgba(24, 119, 242, 0.35) !important;
}

[data-theme="dark"] .btn-facebook {
  color: #ffffff !important;
  background-color: #1877f2 !important;
  border-color: #1877f2 !important;
}

[data-theme="dark"] .btn-facebook:hover,
[data-theme="dark"] .btn-facebook:focus,
[data-theme="dark"] .btn-facebook:active,
[data-theme="dark"] .btn-facebook.active {
  color: #ffffff !important;
  background-color: #166fe5 !important;
  border-color: #166fe5 !important;
}

/* Links inside headings in dark mode to not be unreadable blue */
[data-theme="dark"] h1 a, 
[data-theme="dark"] h2 a, 
[data-theme="dark"] h3 a, 
[data-theme="dark"] h4 a, 
[data-theme="dark"] h5 a, 
[data-theme="dark"] h6 a {
  color: var(--md-on-surface);
}
[data-theme="dark"] h1 a:hover, 
[data-theme="dark"] h2 a:hover, 
[data-theme="dark"] h3 a:hover, 
[data-theme="dark"] h4 a:hover, 
[data-theme="dark"] h5 a:hover, 
[data-theme="dark"] h6 a:hover {
  color: var(--md-primary);
}

/* Removed too greedy .text-dark override here to prevent breaking badges/btns */

/* Explicit btn fixes for dark mode */
[data-theme="dark"] .btn-success {
    background-color: #2e7d32 !important;
    color: #ffffff !important;
    border-color: #2e7d32 !important;
}
[data-theme="dark"] .btn-danger {
    background-color: #ff4c4c !important;
    color: #ffffff !important;
    border-color: #ff4c4c !important;
}

/* Base links fix for dark mode */
[data-theme="dark"] a.text-dark:not(.btn), 
[data-theme="dark"] a:not(.btn):not(.nav-link) {
    color: var(--md-on-surface);
}
[data-theme="dark"] a.text-dark:not(.btn):hover, 
[data-theme="dark"] a:not(.btn):not(.nav-link):hover {
    color: var(--md-primary);
}

/* Breadcrumb fixes for dark mode */
[data-theme="dark"] .breadcrumb-item a {
    color: var(--md-on-surface);
    text-decoration: none;
}
[data-theme="dark"] .breadcrumb-item a:hover {
    color: var(--md-primary);
    text-decoration: underline;
}
[data-theme="dark"] .breadcrumb-item.active {
    color: var(--md-muted);
}
[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--md-muted);
}

/* Links and View All buttons */
[data-theme="dark"] .btn-link {
    color: var(--md-primary);
}
[data-theme="dark"] .btn-link:hover {
    color: var(--md-primary-variant, #81c784);
}

/* Card layout fix for swap proposals */
[data-theme="dark"] .border-primary {
    border-color: var(--md-primary) !important;
}

/* Fix disabled buttons so they don't look like outline buttons */
[data-theme="dark"] .btn:disabled {
    background-color: var(--md-surface-variant) !important;
    color: var(--md-muted) !important;
    border: none !important;
}

/* Fix .fw-bold defaulting to dark text in Bootstrap inside certain elements */
[data-theme="dark"] .fw-bold:not([class*="text-"]):not(.btn):not(.badge) {
    color: var(--md-on-surface);
}

/* Fix list group items for dark mode */
[data-theme="dark"] .list-group-item {
    background-color: var(--md-surface) !important;
    color: var(--md-on-surface) !important;
    border-color: var(--md-border) !important;
}
[data-theme="dark"] .list-group-item:hover,
[data-theme="dark"] .list-group-item-action:hover {
    background-color: var(--md-surface-variant) !important;
}

/* Fix upload zone for photo uploads (step 2) in dark mode */
[data-theme="dark"] .upload-zone {
    background-color: var(--md-surface-variant) !important;
    border-color: var(--md-border) !important;
}
[data-theme="dark"] .upload-zone * {
    color: var(--md-on-surface);
}
[data-theme="dark"] .upload-zone:hover:not(.upload-disabled) {
    background-color: var(--md-surface) !important;
    border-color: var(--md-primary) !important;
}
[data-theme="dark"] .upload-zone.dragover {
    background-color: rgba(40, 167, 69, 0.15) !important;
    border-color: #28a745 !important;
}
[data-theme="dark"] .upload-zone.upload-disabled {
    background-color: var(--md-background) !important;
    opacity: 0.5;
}

/* ============================================================
   LISTING DETAIL — PHOTO DISPLAY
   ============================================================ */

/* Main vehicle image: capped height so portrait uploads don't overflow the page.
   object-fit: contain keeps the full vehicle visible (no cropping),
   background fills the letterbox area on portrait photos. */
.main-vehicle-image {
  max-height: 550px;
  width: 100%;
  object-fit: contain;
  background-color: var(--md-surface-variant, #f4f4f4);
  border-radius: var(--md-radius-md);
}

[data-theme="dark"] .main-vehicle-image {
  background-color: var(--md-surface-variant);
}

/* Thumbnail strip: fixed height + cover so all thumbs are uniform */
.thumbnail-image {
  height: 80px;
  width: 100%;
  object-fit: cover;
}

/* ============================================================
   PWA TOAST NOTIFICATIONS
   Bootstrap Toasts positioned bottom-right, safe-area aware.
   ============================================================ */

/* Container: respect device safe areas (notch, home indicator, bottom nav) */
.pwa-toast-container {
  /* z-index: above navbar (1020) and modals (1055), below system UI */
  z-index: 1090 !important;
  /* Safe area insets for notch / home indicator / Android gesture bar */
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
  padding-right:  max(0.75rem, env(safe-area-inset-right))  !important;
}

/* Both toasts: constrained width so they don't span the full screen */
.pwa-toast-install,
.pwa-toast-push {
  min-width: 280px;
  max-width: min(360px, calc(100vw - 1.5rem));
  --bs-toast-bg: #ffffff;
  --bs-toast-header-bg: #ffffff;
  --bs-toast-border-color: rgba(0, 0, 0, 0.12);
  --bs-toast-border-radius: var(--md-radius-md);
  overflow: hidden;
}

.pwa-toast-install .toast-header,
.pwa-toast-push .toast-header {
  border-bottom-color: var(--bs-toast-border-color);
}

/* ---- Dark mode overrides ---- */

[data-theme="dark"] .pwa-toast-install,
[data-theme="dark"] .pwa-toast-push {
  --bs-toast-bg: var(--md-surface);
  --bs-toast-header-bg: var(--md-surface-variant, #2a2a2a);
  --bs-toast-border-color: var(--md-border);
  background-color: var(--md-surface);
  color: var(--md-on-surface);
  border-color: var(--md-border);
}

[data-theme="dark"] .pwa-toast-install .toast-header,
[data-theme="dark"] .pwa-toast-push .toast-header {
  color: var(--md-on-surface);
  border-bottom-color: var(--md-border);
}

[data-theme="dark"] .pwa-toast-install .toast-header .btn-close,
[data-theme="dark"] .pwa-toast-push .toast-header .btn-close {
  filter: invert(1) grayscale(100%);
}

[data-theme="dark"] .pwa-toast-install .text-muted,
[data-theme="dark"] .pwa-toast-push .text-muted {
  color: var(--md-muted) !important;
}

[data-theme="dark"] .pwa-toast-push .toast-body .small {
  color: var(--md-on-surface);
}