/* ===================================
   Garage Manager Styles
   =================================== */

/* ── Page layout (footer clearance) ── */
.garage-plugin {
  overflow: visible;
  padding-bottom: 2rem;
}

.garage-vehicle-detail {
  padding-bottom: 1rem;
}

.garage-community-layout > [class*="col-"] {
  align-self: flex-start;
}

@media (max-width: 767px) {
  .garage-plugin.sg-offcanvas {
    overflow: hidden;
    padding-bottom: 6rem;
  }

  /* Theme default sidebar z-index (100) — lift only above garage tabs/cards, not over header */
  .garage-plugin.sg-offcanvas .sg-offcanvas-sidebar {
    z-index: 110;
  }

  .garage-plugin.sg-offcanvas .sg-offcanvas-mainbar {
    z-index: 1;
  }
}

/* ── Garage Vehicle Cards ── */
.garage-vehicle-grid {
  --garage-card-media-ratio: 4 / 3;
}

.garage-vehicle-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #e3e7eb;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}

.garage-vehicle-card:hover {
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.12);
  transform: translateY(-3px);
  border-color: #d0d7de;
}

.garage-vehicle-card--public {
  border-radius: 10px;
  box-shadow: none;
}
.garage-vehicle-card--public:hover {
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.08);
  transform: none;
}
.garage-vehicle-card--public .garage-vehicle-card-body {
  padding: 0.7rem 0.8rem 0.8rem;
  gap: 0.25rem;
}
.garage-vehicle-card--public .garage-vehicle-card-model {
  font-size: 0.95rem;
  line-height: 1.3;
  color: #1f2937;
}
.garage-vehicle-card-brand-inline {
  font-weight: 700;
  color: #6b7280;
}
.garage-vehicle-card-meta--minimal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: #6b7280;
}
.garage-vehicle-card-meta--minimal .garage-meta-dot {
  opacity: 0.55;
}
.garage-vehicle-card--public .garage-vehicle-card-owner {
  margin-top: 0.15rem;
  font-size: 0.8rem;
}
.garage-vehicle-card--public .garage-vehicle-card-owner i {
  display: none;
}
.garage-vehicle-card--public .garage-vehicle-card-actions {
  margin-top: auto;
  padding-top: 0.45rem;
  border-top: 0;
}
.garage-vehicle-card-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
}
.garage-vehicle-card-link:hover {
  text-decoration: underline;
}

.garage-explore-card {
  border: 1px solid #e8ecf0;
  box-shadow: none;
}
.garage-explore-head {
  background: transparent;
  border-bottom: 1px solid #eef1f4;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75rem 1rem;
}
.garage-explore-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.garage-explore-brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  text-decoration: none;
  color: #111827;
  font-size: 0.82rem;
  background: #fafafa;
}
.garage-explore-brand-chip:hover {
  background: #f3f4f6;
  color: #111827;
  text-decoration: none;
}
.garage-explore-brand-chip img {
  max-height: 16px;
  width: auto;
}
.garage-explore-brand-chip em {
  font-style: normal;
  color: #6b7280;
  font-size: 0.75rem;
}
.garage-explore-models li + li {
  border-top: 1px solid #f0f2f5;
}
.garage-explore-model-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  text-decoration: none;
  color: #111827;
}
.garage-explore-model-row:hover {
  background: #f8fafc;
  color: #111827;
  text-decoration: none;
}
.garage-explore-model-name {
  font-size: 0.9rem;
  min-width: 0;
}
.garage-explore-model-count {
  flex-shrink: 0;
  color: #6b7280;
  font-size: 0.78rem;
  font-weight: 600;
}

.garage-vehicle-card-media {
  position: relative;
  aspect-ratio: var(--garage-card-media-ratio);
  background: linear-gradient(165deg, #f6f8fb 0%, #e9eef5 100%);
  overflow: hidden;
}

.garage-vehicle-card-photo-link {
  display: block;
  width: 100%;
  height: 100%;
}

.garage-vehicle-card-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 14px 16px 10px;
  transition: transform 0.28s ease;
}

.garage-vehicle-card:hover .garage-vehicle-card-photo {
  transform: scale(1.04);
}

.garage-vehicle-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 52%, #0f3460 100%);
  color: rgba(255, 255, 255, 0.92);
}

.garage-vehicle-card-placeholder i {
  font-size: 2.35rem;
  opacity: 0.92;
}

.garage-vehicle-card-placeholder-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  opacity: 0.85;
}

.garage-vehicle-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.garage-vehicle-card-badge-primary {
  background: #ffc107;
  color: #4a3900;
}

.garage-vehicle-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0.85rem 0.95rem 0.95rem;
}

.garage-vehicle-card-brand {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  color: #6c757d;
  margin-bottom: 0.15rem;
}

.garage-vehicle-card-model {
  font-size: 1.02rem;
  font-weight: 700;
  color: #212529;
  line-height: 1.25;
}

.garage-vehicle-card-title-link:hover .garage-vehicle-card-model {
  color: #0d6efd;
}

.garage-vehicle-card-nickname {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: #6c757d;
}

.garage-vehicle-card-nickname i {
  margin-right: 0.25rem;
  opacity: 0.75;
}

.garage-vehicle-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
}

.garage-vehicle-card-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.18rem 0.48rem;
  border-radius: 999px;
  background: #f1f3f5;
  color: #495057;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
}

.garage-vehicle-card-chip-status-active {
  background: #d1e7dd;
  color: #0f5132;
}

.garage-vehicle-card-chip-status-sold {
  background: #e2e3e5;
  color: #41464b;
}

.garage-vehicle-card-chip-status-scrapped {
  background: #f8d7da;
  color: #842029;
}

.garage-vehicle-card-owner {
  margin-top: 0.55rem;
  font-size: 0.78rem;
  color: #6c757d;
}

.garage-vehicle-card-owner i {
  margin-right: 0.25rem;
}

.garage-vehicle-card-owner a {
  color: #495057;
  font-weight: 600;
}

.garage-vehicle-card-owner a:hover {
  color: #0d6efd;
}

.garage-vehicle-card-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.75rem;
}

.garage-vehicle-card-actions .garage-btn.flex-fill {
  justify-content: center;
}

/* ── Profile tab (showcase cards) ── */
.garage-profile-tab {
  margin-bottom: 0;
}

.garage-profile-tab-shell {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.garage-profile-tab-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid #eef1f4;
  background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
}

.garage-profile-tab-heading {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.garage-profile-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(94, 114, 228, 0.12);
  color: #5e72e4;
  flex-shrink: 0;
  font-size: 1rem;
}

.garage-profile-tab-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #212529;
  line-height: 1.2;
}

.garage-profile-tab-subtitle {
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: #6c757d;
}

.garage-profile-tab-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.garage-profile-grid {
  padding: 1rem 1.15rem 1.15rem;
}

.garage-profile-card {
  height: 100%;
}

.garage-profile-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.garage-profile-card-link:hover {
  color: inherit;
  text-decoration: none;
  transform: translateY(-3px);
  border-color: rgba(94, 114, 228, 0.28);
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.1);
}

.garage-profile-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, #f8f9fb 0%, #eef2f7 100%);
  overflow: hidden;
}

.garage-profile-card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.28s ease;
}

.garage-profile-card-link:hover .garage-profile-card-photo {
  transform: scale(1.04);
}

.garage-profile-card-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1rem;
  text-align: center;
}

.garage-profile-card-fallback--logo {
  background: linear-gradient(180deg, #f8f9fb 0%, #eef2f7 100%);
}

.garage-profile-card-fallback-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(94, 114, 228, 0.12);
  color: #5e72e4;
  font-size: 1.35rem;
}

.garage-profile-card-fallback-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  color: #6c757d;
}

.garage-profile-card-brand-logo {
  width: auto;
  max-width: 68%;
  max-height: 52%;
  object-fit: contain;
}

.garage-profile-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  background: #ffc107;
  color: #4a3900;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.garage-profile-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 0.95rem 1rem;
  flex: 1 1 auto;
}

.garage-profile-card-brand {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.45px;
  text-transform: uppercase;
  color: #6c757d;
}

.garage-profile-card-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
  color: #212529;
}

.garage-profile-card-link:hover .garage-profile-card-title {
  color: #5e72e4;
}

.garage-profile-card-nickname {
  font-size: 0.78rem;
  color: #6c757d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.garage-profile-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  margin-top: 0.35rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: #495057;
}

.garage-profile-card-meta span:not(:last-child)::after {
  content: "·";
  margin: 0 0.45rem;
  color: #adb5bd;
  font-weight: 700;
}

.garage-vehicle-card-placeholder--logo {
  background: linear-gradient(165deg, #f6f8fb 0%, #e9eef5 100%);
  color: #495057;
}

.garage-vehicle-card-brand-logo {
  width: auto;
  max-width: 72%;
  max-height: 58%;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(16, 24, 40, 0.12));
}

body.night-mode .garage-profile-tab-shell {
  background: var(--card-dark-color);
  border-color: var(--card-dark-divider);
}

body.night-mode .garage-profile-tab-toolbar {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--card-dark-divider);
}

body.night-mode .garage-profile-tab-title,
body.night-mode .garage-profile-card-title {
  color: var(--body-color-dark);
}

body.night-mode .garage-profile-tab-subtitle,
body.night-mode .garage-profile-card-brand,
body.night-mode .garage-profile-card-nickname,
body.night-mode .garage-profile-card-meta {
  color: var(--body-color-dark);
  opacity: 0.78;
}

body.night-mode .garage-profile-card-link {
  background: var(--card-dark-color);
  border-color: var(--card-dark-divider);
}

body.night-mode .garage-profile-card-media,
body.night-mode .garage-profile-card-fallback--logo {
  background: rgba(255, 255, 255, 0.04);
}

body.night-mode .garage-profile-card-fallback-icon {
  background: rgba(94, 114, 228, 0.18);
  color: #aebaff;
}

body.night-mode .garage-vehicle-card {
  background: var(--card-dark-color);
  border-color: var(--card-dark-divider);
}

body.night-mode .garage-vehicle-card-model {
  color: var(--body-color-dark);
}

body.night-mode .garage-vehicle-card-brand,
body.night-mode .garage-vehicle-card-nickname,
body.night-mode .garage-vehicle-card-owner {
  color: var(--body-color-dark);
  opacity: 0.75;
}

body.night-mode .garage-vehicle-card-chip {
  background: rgba(255, 255, 255, 0.08);
  color: var(--body-color-dark);
}

body.night-mode .garage-vehicle-card-placeholder--logo {
  background: rgba(255, 255, 255, 0.04);
}

body.night-mode .garage-vehicle-card-placeholder--logo {
  background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 575px) {
  .garage-profile-tab-toolbar {
    padding: 0.85rem;
  }

  .garage-profile-grid {
    padding: 0.85rem;
  }

  .garage-profile-tab-actions {
    width: 100%;
  }

  .garage-profile-tab-actions .btn {
    flex: 1 1 auto;
  }

  .garage-profile-card-title {
    font-size: 0.92rem;
  }
}

/* Legacy aliases (older templates) */
.garage-vehicle-card .vehicle-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 14px 16px 10px;
  background: transparent;
}

.garage-vehicle-card .vehicle-photo-placeholder {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 52%, #0f3460 100%);
  color: #fff;
  font-size: 2.35rem;
}

.garage-vehicle-card .card-body {
  padding: 0.85rem 0.95rem 0.95rem;
}

.garage-vehicle-card .vehicle-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: #212529;
  margin-bottom: 0.25rem;
}

.garage-vehicle-card .vehicle-subtitle {
  font-size: 0.78rem;
  color: #6c757d;
}

.garage-vehicle-card .vehicle-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}

/* ── Stat Cards ── */
.garage-stat-card-wrap {
  border: 1px solid #e9ecef;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.garage-stat-card-wrap:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.garage-stat-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: #212529;
  line-height: 1.2;
  margin-bottom: 4px;
  word-break: break-word;
}

.garage-stat-subvalue {
  font-size: 0.82rem;
  font-weight: 600;
  color: #495057;
  line-height: 1.3;
  margin-bottom: 6px;
  word-break: break-word;
}

.garage-stat-label {
  font-size: 0.78rem;
  color: #6c757d;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1.3;
}

.garage-overview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.garage-overview-stat {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--garage-border, #e9ecef);
  border-radius: 18px;
  background: var(--garage-surface, #fff);
  box-shadow: var(--garage-shadow, 0 1px 2px rgba(0, 0, 0, 0.04));
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.garage-overview-stat:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  border-color: rgba(255, 107, 44, 0.28);
  color: inherit;
}

.garage-overview-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 107, 44, 0.1);
  color: var(--garage-accent, #ff6b2c);
  flex: 0 0 auto;
}

.garage-overview-stat-icon--total {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}

.garage-overview-stat-icon--installed {
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
}

.garage-overview-stat-icon--pending {
  background: rgba(148, 163, 184, 0.16);
  color: #64748b;
}

.garage-overview-stat-body {
  min-width: 0;
}

.garage-overview-stat-value {
  display: block;
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--garage-text, #212529);
}

.garage-overview-stat-sub {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--garage-muted, #6c757d);
}

.garage-overview-stat-label {
  display: block;
  margin-top: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--garage-muted, #6c757d);
}

.garage-quick-mileage-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
}

.garage-quick-mileage-field {
  flex: 1 1 220px;
  min-width: 0;
  margin: 0;
}

.garage-quick-mileage-field > span {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--garage-muted, #6c757d);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.garage-quick-mileage-input {
  max-width: 280px;
  font-size: 1.1rem;
  font-weight: 700;
}

.garage-quick-mileage-status {
  min-height: 24px;
  font-size: 13px;
  font-weight: 600;
  color: var(--garage-muted, #6c757d);
}

.garage-quick-mileage-status.is-saving,
.garage-quick-mileage-status.is-pending {
  color: var(--garage-accent, #ff6b2c);
}

.garage-quick-mileage-status.is-saved {
  color: var(--garage-success, #16a34a);
}

.garage-quick-mileage-status.is-error {
  color: var(--garage-danger, #dc2626);
}

/* Ownership / ruhsat verification */
.garage-ownership-panel .garage-section-head {
  align-items: center;
}

.garage-ownership-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid transparent;
}

.garage-ownership-badge--unverified {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}

.garage-ownership-badge--pending {
  background: #fff7ed;
  color: #c2410c;
  border-color: #fed7aa;
}

.garage-ownership-badge--verified {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.garage-ownership-badge--rejected {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

.garage-vehicle-hero-badges .garage-ownership-badge {
  background: rgba(255, 255, 255, 0.92);
}

.garage-ownership-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px;
  border: 1.5px dashed var(--garage-border, #ced4da);
  border-radius: 12px;
  background: var(--garage-surface-2, #f8f9fa);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.garage-ownership-drop:hover {
  border-color: var(--garage-accent, #ff6b2c);
  background: var(--garage-accent-soft, rgba(255, 107, 44, 0.08));
}

.garage-ownership-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.garage-ownership-drop-icon {
  color: var(--garage-accent, #ff6b2c);
  font-size: 1.25rem;
  margin-bottom: 4px;
}

.garage-ownership-drop-title {
  font-weight: 700;
  color: var(--garage-text, #212529);
  font-size: 0.9rem;
}

.garage-ownership-drop-meta {
  font-size: 0.8rem;
  color: var(--garage-muted, #6c757d);
}

.garage-ownership-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.garage-ownership-feedback {
  font-size: 0.85rem;
  color: var(--garage-muted, #6c757d);
}

.garage-ownership-feedback.is-error {
  color: var(--garage-danger, #dc2626);
}

.garage-ownership-feedback.is-ok {
  color: var(--garage-success, #16a34a);
}

.garage-ownership-doc-link a {
  font-weight: 600;
  color: var(--garage-accent, #ff6b2c);
  text-decoration: none;
}

.garage-ownership-doc-link a:hover {
  text-decoration: underline;
}


.garage-depreciation-grid,
.garage-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.garage-depreciation-item,
.garage-info-item {
  padding: 14px;
  border: 1px solid var(--garage-border, #e9ecef);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}

.garage-depreciation-item strong,
.garage-info-item strong {
  display: block;
  font-size: 1.1rem;
  line-height: 1.2;
  color: var(--garage-text, #212529);
}

.garage-depreciation-item span,
.garage-info-item span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--garage-muted, #6c757d);
}

.garage-depreciation-meta {
  margin-top: 14px;
  font-size: 13px;
  color: var(--garage-muted, #6c757d);
}

.garage-stat-card {
  text-align: center;
  padding: 1rem;
  border-radius: 8px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
}

.garage-stat-card .stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #333;
}

.garage-stat-card .stat-label {
  font-size: 0.8rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Vehicle Detail Tabs ── */
.garage-detail-tabs .nav-link {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  color: #666;
  border-bottom: 2px solid transparent;
}

.garage-detail-tabs .nav-link.active {
  color: #E91E63;
  border-bottom-color: #E91E63;
  background: transparent;
}

.garage-detail-tabs .nav-link i {
  margin-right: 5px;
}

/* ── Records Table ── */
.garage-records-table {
  font-size: 0.9rem;
}

.garage-records-table th {
  background: #f8f9fa;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #666;
}

.garage-records-table .record-cost {
  font-weight: 600;
  color: #E91E63;
}

.record-cost {
  font-weight: 600;
  color: #E91E63;
  white-space: nowrap;
}

/* ── Media Gallery ── */
.garage-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.garage-gallery-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
}

.garage-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.garage-gallery-item:hover img {
  transform: scale(1.05);
}

.garage-gallery-item .gallery-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  color: #fff;
  padding: 8px;
  font-size: 0.8rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.garage-gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.garage-gallery-item .video-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ── Privacy Settings ── */
.garage-privacy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.garage-privacy-row:last-child {
  border-bottom: none;
}

.garage-privacy-label {
  font-weight: 500;
  color: #333;
}

/* ── Community ── */
.garage-user-card {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  transition: background 0.2s ease;
}

.garage-user-card:hover {
  background: #f8f9fa;
}

.garage-user-card .user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.garage-user-card .user-info {
  flex: 1;
}

.garage-user-card .user-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.garage-user-card .user-vehicle {
  font-size: 0.8rem;
  color: #888;
}

.garage-match-group {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #eef1f4;
}

.garage-match-group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.garage-match-group-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #343a40;
  margin-bottom: 0.5rem;
}

/* ── Forms ── */
.garage-form .form-label {
  font-weight: 500;
  font-size: 0.85rem;
  color: #555;
}

.garage-form .form-control:focus,
.garage-form .form-select:focus {
  border-color: #E91E63;
  box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.15);
}

/* Searchable select (brand / model picker) */
.garage-search-select {
  position: relative;
  display: block;
  width: 100%;
}

.garage-form .garage-vehicle-picker-row > [class*="col-"] {
  min-width: 0;
}

/* ── Add / Edit vehicle form ── */
.garage-vehicle-form-page {
  max-width: 920px;
}

.garage-vf-alert {
  margin-bottom: 16px;
}

.garage-vf-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.garage-vf-section {
  margin-bottom: 16px;
  padding: 18px 18px 20px;
  border: 1px solid var(--garage-border, #e9ecef);
  border-radius: 16px;
  background: var(--garage-surface, #fff);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.garage-vf-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.garage-vf-step {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
  color: #fff;
  background: var(--garage-accent, #ff6b2c);
  margin-top: 2px;
}

.garage-vf-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--garage-text, #212529);
  line-height: 1.3;
}

.garage-vf-desc {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: var(--garage-muted, #6c757d);
  line-height: 1.4;
}

.garage-vf-photo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 88px;
  padding: 10px 12px;
  border: 1.5px dashed var(--garage-border, #ced4da);
  border-radius: 12px;
  background: var(--garage-surface-2, #f8f9fa);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.garage-vf-photo:hover {
  border-color: var(--garage-accent, #ff6b2c);
  background: var(--garage-accent-soft, rgba(255, 107, 44, 0.08));
}

.garage-vf-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.garage-vf-photo-preview {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background: #e9ecef center/cover no-repeat;
  border: 1px solid var(--garage-border, #dee2e6);
}

.garage-vf-photo-preview.has-image {
  background-color: #111;
}

.garage-vf-photo-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--garage-text, #343a40);
  min-width: 0;
}

.garage-vf-photo-meta i {
  color: var(--garage-accent, #ff6b2c);
}

.garage-vf-photo-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.garage-vf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
  padding: 14px 4px 4px;
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, transparent, var(--garage-surface, #fff) 28%);
  z-index: 2;
}

.garage-vf-submit {
  min-width: 180px;
}

/* Stepped variant picker — high visibility */
.garage-variant-picker {
  display: none;
  margin-top: 18px;
  padding: 16px;
  border: 2px solid var(--garage-accent, #ff6b2c);
  border-radius: 14px;
  background:
    linear-gradient(135deg, var(--garage-accent-soft, rgba(255, 107, 44, 0.14)), transparent 42%),
    var(--garage-surface, #fff);
  box-shadow: 0 8px 24px rgba(255, 107, 44, 0.12);
  animation: garage-variant-in 0.28s ease;
}

.garage-variant-picker.is-open {
  display: block;
}

.garage-variant-picker.is-attention {
  animation: garage-variant-pulse 0.9s ease 1;
}

@keyframes garage-variant-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@keyframes garage-variant-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(255, 107, 44, 0.12); }
  40% { box-shadow: 0 0 0 4px rgba(255, 107, 44, 0.28), 0 10px 28px rgba(255, 107, 44, 0.18); }
}

.garage-variant-picker-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 14px;
}

.garage-variant-picker-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.garage-variant-picker-badge {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--garage-accent, #ff6b2c);
  color: #fff;
  font-size: 0.95rem;
}

.garage-variant-picker-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--garage-text, #212529);
  line-height: 1.25;
}

.garage-variant-hint {
  margin: 3px 0 0;
  font-size: 0.8rem;
  color: var(--garage-muted, #6c757d);
  line-height: 1.35;
}

.garage-variant-breadcrumb {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--garage-accent, #ff6b2c);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 107, 44, 0.25);
  border-radius: 999px;
  padding: 4px 10px;
  max-width: 100%;
}

.garage-variant-breadcrumb:empty {
  display: none;
}

.garage-variant-level + .garage-variant-level {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 107, 44, 0.28);
}

.garage-variant-level-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--garage-accent, #ff6b2c);
  margin-bottom: 10px;
}

.garage-variant-masonry {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.garage-variant-chip {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #d7dde3;
  border-radius: 12px;
  background: #fff;
  color: #1f2937;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.garage-variant-chip-label {
  min-width: 0;
}

.garage-variant-chip-more {
  flex: 0 0 auto;
  color: #9aa3ad;
  font-size: 0.75rem;
}

.garage-variant-chip:hover {
  border-color: var(--garage-accent, #ff6b2c);
  color: var(--garage-accent, #ff6b2c);
  transform: translateY(-1px);
}

.garage-variant-chip.is-active {
  border-color: var(--garage-accent, #ff6b2c);
  background: var(--garage-accent, #ff6b2c);
  color: #fff;
  box-shadow: 0 6px 16px rgba(255, 107, 44, 0.28);
}

.garage-variant-chip.is-active .garage-variant-chip-more {
  color: rgba(255, 255, 255, 0.85);
}

.garage-variant-skip {
  margin-top: 8px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--garage-muted, #6c757d);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.garage-variant-skip:hover {
  color: var(--garage-accent, #ff6b2c);
}

@media (max-width: 575.98px) {
  .garage-vf-section {
    padding: 14px;
    border-radius: 14px;
  }

  .garage-variant-chip {
    width: 100%;
  }

  .garage-vf-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .garage-vf-submit {
    width: 100%;
    min-width: 0;
  }
}

.garage-search-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.garage-search-select-input:disabled {
  background-color: #e9ecef;
  cursor: not-allowed;
}

.garage-search-select-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 1060;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
}

.garage-search-select-option {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 0.9rem;
  color: #212529;
  cursor: pointer;
}

.garage-search-select-option:hover,
.garage-search-select-option:focus {
  background: rgba(233, 30, 99, 0.08);
  outline: none;
}

.garage-search-select-option.is-selected {
  background: rgba(233, 30, 99, 0.12);
  font-weight: 600;
}

.garage-search-select-empty {
  padding: 0.65rem 0.75rem;
  font-size: 0.85rem;
}

.garage-search-select.is-open .garage-search-select-input {
  border-color: #E91E63;
  box-shadow: 0 0 0 0.2rem rgba(233, 30, 99, 0.15);
}

/* ── Empty State ── */
.garage-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #999;
}

.garage-empty i {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: block;
  color: #ddd;
}

/* ===================================================
   GARAGE BUTTON SYSTEM
   Soft-colored, modern, consistent buttons
   =================================================== */

/* ── Base Button ── */
.garage-plugin .garage-btn,
.garage-plugin a.garage-btn,
.garage-plugin button.garage-btn,
.garage-btn {
  border: none !important;
  outline: none !important;
  cursor: pointer !important;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: all .18s ease !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  line-height: 1 !important;
}
.garage-btn:hover {
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}
.garage-btn:active {
  transform: scale(.97) !important;
}
.garage-btn i { font-size: 13px !important; }

/* ── Small variant ── */
.garage-btn-sm {
  height: 30px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  gap: 5px !important;
}
.garage-btn-sm i { font-size: 12px !important; }

/* ── Extra small (card actions) ── */
.garage-btn-xs {
  height: 26px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
  gap: 4px !important;
  font-weight: 600 !important;
}

.garage-btn-xs i { font-size: 10px !important; }

/* ── Icon-Only Button ── */
.garage-icon-btn {
  width: 34px !important;
  height: 34px !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .18s ease !important;
  padding: 0 !important;
}
.garage-icon-btn:hover { transform: translateY(-1px) !important; }
.garage-icon-btn:active { transform: scale(.95) !important; }
.garage-icon-btn i { font-size: 13px !important; }

.garage-icon-btn-sm {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
}
.garage-icon-btn-sm i { font-size: 11px !important; }

/* ── Outline modifier ── */
.garage-outline {
  background: transparent !important;
  border: 1px solid !important;
}

/* ── Action group ── */
.garage-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.garage-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  width: 100%;
}

.garage-card-actions-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.garage-card-actions-primary .garage-btn {
  width: auto !important;
  flex: 0 0 auto;
}

.garage-card-actions-sort {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
  padding-left: 4px;
  border-left: 1px solid #e9ecef;
}

.garage-sort-btn {
  width: 22px;
  height: 18px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: #f8fafc;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.garage-sort-btn:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #4338ca;
}

.garage-sort-btn i {
  font-size: 9px;
  line-height: 1;
}

.garage-card-actions-with-sort .garage-card-actions-primary {
  padding-right: 2px;
}

.garage-card-actions-inline {
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.garage-form-footer {
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
  padding: 1rem 1.25rem;
}

.garage-form-footer-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #6c757d;
  margin-bottom: 8px;
}

.garage-inline-empty {
  text-align: center;
  padding: 2rem 1rem;
  border: 1px dashed #dee2e6;
  border-radius: 10px;
  background: #fafbfc;
}

.garage-inline-empty-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #495057;
  margin-bottom: 6px;
}

.garage-inline-empty-desc {
  font-size: 0.85rem;
  color: #6c757d;
  line-height: 1.5;
  max-width: 320px;
  margin: 0 auto;
}

/* ── Soft Color Palette ── */
.garage-blue    { background: #e8f0ff !important; color: #2563eb !important; }
.garage-blue:hover { background: #dbe7ff !important; color: #2563eb !important; }
.garage-outline.garage-blue { border-color: #bfd3ff !important; }

.garage-red     { background: #ffe9e9 !important; color: #dc2626 !important; }
.garage-red:hover { background: #ffdcdc !important; color: #dc2626 !important; }
.garage-outline.garage-red { border-color: #ffc6c6 !important; }

.garage-green   { background: #e8fff1 !important; color: #16a34a !important; }
.garage-green:hover { background: #d9ffe8 !important; color: #16a34a !important; }
.garage-outline.garage-green { border-color: #bff4cf !important; }

.garage-orange  { background: #fff3e1 !important; color: #ea580c !important; }
.garage-orange:hover { background: #ffe9cb !important; color: #ea580c !important; }
.garage-outline.garage-orange { border-color: #ffd7a4 !important; }

.garage-purple  { background: #f3e8ff !important; color: #9333ea !important; }
.garage-purple:hover { background: #ead7ff !important; color: #9333ea !important; }
.garage-outline.garage-purple { border-color: #e2c8ff !important; }

.garage-pink    { background: #ffe8f3 !important; color: #db2777 !important; }
.garage-pink:hover { background: #ffd8ea !important; color: #db2777 !important; }
.garage-outline.garage-pink { border-color: #ffc4de !important; }

.garage-cyan    { background: #e6fbff !important; color: #0891b2 !important; }
.garage-cyan:hover { background: #d5f8ff !important; color: #0891b2 !important; }
.garage-outline.garage-cyan { border-color: #b7f2ff !important; }

.garage-yellow  { background: #fff9dc !important; color: #ca8a04 !important; }
.garage-yellow:hover { background: #fff3bb !important; color: #ca8a04 !important; }
.garage-outline.garage-yellow { border-color: #ffed9a !important; }

.garage-dark    { background: #eef2f7 !important; color: #334155 !important; }
.garage-dark:hover { background: #e2e8f0 !important; color: #334155 !important; }
.garage-outline.garage-dark { border-color: #d7e0ea !important; }

/* ── Badges ── */
.garage-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.garage-badge-success { background: #e8fff1; color: #16a34a; }
.garage-badge-warning { background: #fff7df; color: #d97706; }
.garage-badge-danger  { background: #ffe9e9; color: #dc2626; }
.garage-badge-info    { background: #e8f0ff; color: #2563eb; }

.garage-document-card .garage-document-icon {
  width: 44px;
  text-align: center;
  line-height: 1;
}

.garage-document-card .document-meta div + div {
  margin-top: 4px;
}

/* ── Document Cards ── */
.document-card {
  height: 100%;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
  transition: all 0.15s ease-in-out;
  background: #fff;
  overflow: hidden;
}

.document-card:hover {
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

.document-card .card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.document-card .card-title {
  font-size: 1rem;
  font-weight: 600;
  color: #212529;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.document-card .document-meta {
  font-size: 0.875rem;
  line-height: 1.4;
  margin-bottom: 1rem;
}

.document-card .document-actions {
  margin-top: auto;
  padding-top: 1rem;
}

.document-card .btn-group {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.document-card .btn-group .btn {
  flex: 1;
  font-size: 0.75rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.25rem;
  white-space: nowrap;
  min-width: 0;
  font-weight: 500;
}

/* ── Accessory Cards ── */
.accessory-stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 1.2rem;
  color: white;
}

.accessory-stat-icon.total {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.accessory-stat-icon.installed {
  background: linear-gradient(135deg, #10b981, #059669);
}

.accessory-stat-icon.pending {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.accessory-stat-icon.cost {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.accessory-stat-content h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: #212529;
}

.accessory-stat-content p {
  margin-bottom: 0;
  color: #6c757d;
  font-weight: 500;
}

.accessory-card {
  transition: all 0.3s ease;
  border: 1px solid #dee2e6;
}

.accessory-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.accessory-name {
  font-size: 1rem;
  font-weight: 600;
  color: #212529;
  margin-bottom: 8px;
  line-height: 1.3;
}

.accessory-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.accessory-brand {
  font-size: 0.875rem;
  color: #6c757d;
}

.accessory-rating {
  margin: 10px 0;
  color: #f59e0b;
  font-size: 0.9rem;
}

.accessory-review {
  font-size: 0.875rem;
  color: #495057;
  margin: 10px 0;
  line-height: 1.4;
}

.accessory-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 15px;
}

.price-tag {
  font-weight: 600;
  color: #10b981;
  font-size: 1rem;
}

/* ── Empty State ── */
.garage-empty-state {
  text-align: center;
  padding: 60px 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  border: 2px dashed #dee2e6;
  margin: 20px 0;
  transition: all 0.3s ease;
}

.garage-empty-state:hover {
  border-color: #007bff;
  background: linear-gradient(135deg, #f8f9ff 0%, #e3f2fd 100%);
}

.garage-empty-icon {
  font-size: 64px;
  color: #6c757d;
  margin-bottom: 20px;
  opacity: 0.6;
  transition: all 0.3s ease;
}

.garage-empty-state:hover .garage-empty-icon {
  color: #007bff;
  opacity: 1;
  transform: scale(1.1);
}

.garage-empty-title {
  color: #495057;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 15px;
}

.garage-empty-description {
  color: #6c757d;
  font-size: 16px;
  margin-bottom: 25px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.garage-empty-state-compact {
  padding: 24px 12px;
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.garage-empty-state-compact:hover {
  border: none;
  background: transparent;
}

.garage-empty-state-compact .garage-empty-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.garage-empty-state-compact .garage-empty-title {
  font-size: 18px;
  margin-bottom: 8px;
}

.garage-empty-state-compact .garage-empty-description {
  font-size: 14px;
  margin-bottom: 0;
}

/* ── File Type Icons ── */
.garage-file-pdf { color: #dc3545; }
.garage-file-word { color: #007bff; }
.garage-file-excel { color: #28a745; }
.garage-file-image { color: #fd7e14; }
.garage-file-alt { color: #6c757d; }
.garage-file-video { color: #6f42c1; }
.garage-file-audio { color: #fd7e14; }
.garage-file-archive { color: #6c757d; }

/* ── Record Cards ── */
.garage-record-card {
  border: 1px solid #dee2e6;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.garage-record-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.garage-add-form-card .card-header {
  cursor: pointer;
}

/* ── Thumbnails & Media ── */
.garage-thumb-link {
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1;
}

.garage-thumb-img {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.2s ease;
}

.garage-thumb-link:hover .garage-thumb-img {
  transform: scale(1.05);
}

.garage-media-thumb-wrap {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: #f1f3f5;
}

.garage-media-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.garage-media-thumb-wrap video.garage-media-thumb {
  object-fit: cover;
}

.garage-receipt-thumb {
  max-height: 80px;
  cursor: pointer;
}

.garage-upload-dropzone {
  border: 2px dashed #dee2e6;
  border-radius: 10px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #f8f9fa;
}

.garage-upload-dropzone:hover {
  border-color: #2563eb;
  background: #f0f4ff;
}

.garage-marketplace-results {
  max-height: 240px;
  overflow-y: auto;
  display: none;
  background: #fff;
}

.garage-marketplace-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #e9ecef;
  cursor: pointer;
  transition: background 0.15s ease;
}

.garage-marketplace-result:hover {
  background: #f8f9fa;
}

.garage-marketplace-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  border: 1px solid #e9ecef;
}

.garage-marketplace-info {
  min-width: 0;
  flex: 1;
}

.garage-marketplace-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: #212529;
  line-height: 1.3;
}

.garage-marketplace-meta {
  font-size: 0.8rem;
  color: #6c757d;
  margin-top: 2px;
}

.garage-accessory-thumb-wrap {
  border-bottom: 1px solid #e9ecef;
}

.garage-accessory-thumb {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.garage-accessory-files {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.garage-accessory-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  background: #fafbfc;
}

.garage-accessory-file-link {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  color: #334155;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.garage-accessory-file-link:hover {
  color: #2563eb;
}

.garage-accessory-file-delete {
  border: 0;
  background: transparent;
  color: #dc2626;
  padding: 0 4px;
  line-height: 1;
}

.min-w-0 {
  min-width: 0;
}

/* ── Vehicle Detail Header ── */
.garage-vehicle-header-photo {
  max-height: 120px;
  object-fit: cover;
  border-radius: 8px;
}

.garage-vehicle-detail .vehicle-photo-placeholder {
  width: 100%;
  max-width: 160px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  font-size: 2rem;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .garage-gallery {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .garage-vehicle-card-media {
    aspect-ratio: 4 / 3;
  }

  .garage-vehicle-card-photo {
    padding: 10px 12px 8px;
  }

  .garage-vehicle-card-body {
    padding: 0.75rem 0.8rem 0.85rem;
  }

  .garage-vehicle-card-model {
    font-size: 0.95rem;
  }

  .garage-empty-state {
    padding: 40px 15px;
  }

  .garage-empty-icon {
    font-size: 48px;
  }

  .garage-empty-title {
    font-size: 20px;
  }

  .garage-empty-description {
    font-size: 14px;
  }

  .accessory-stat-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    margin-right: 10px;
  }

  .accessory-stat-content h3 {
    font-size: 1.2rem;
  }

  .accessory-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .document-card .btn-group {
    flex-direction: column;
  }

  .document-card .btn-group .btn {
    width: 100%;
  }

  .garage-card-actions-primary {
    width: 100%;
  }

  .garage-card-actions-with-sort {
    flex-wrap: wrap;
  }

  .garage-stat-value {
    font-size: 1.1rem;
  }

  .accessory-stat-content h3 {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .garage-detail-tabs .nav-link {
    padding: 0.45rem 0.75rem;
    font-size: 0.8rem;
  }

  .garage-empty-state {
    padding: 32px 16px;
  }

  .garage-empty-title {
    font-size: 18px;
  }
}

/* Model page */
.garage-model-hero-image {
  width: 120px;
  max-height: 90px;
  object-fit: contain;
  flex-shrink: 0;
}

.garage-model-hero-image--logo {
  max-height: 72px;
  padding: 8px;
  background: #f8f9fa;
}

.garage-model-hero-logo-link {
  display: block;
  line-height: 0;
}

.garage-model-description p:last-child {
  margin-bottom: 0;
}

.garage-model-description p {
  margin-bottom: 0.35rem;
}

.garage-model-specs {
  border: 1px solid #e9ecef;
  border-radius: 10px;
  overflow: hidden;
}

.garage-model-specs-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.65rem 0.9rem;
  background: #f8f9fa;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  user-select: none;
}

.garage-model-specs-toggle[aria-expanded="true"] {
  border-bottom-color: #e9ecef;
}

.garage-model-specs-toggle[aria-expanded="true"] .garage-model-specs-chevron {
  transform: rotate(180deg);
}

.garage-model-specs-chevron {
  transition: transform 0.2s ease;
  font-size: 0.75rem;
  color: #6c757d;
}

.garage-model-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.5rem 1rem;
  padding: 0.85rem 0.9rem;
}

.garage-model-spec-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.garage-model-spec-label {
  font-size: 0.75rem;
  color: #6c757d;
}

.garage-model-spec-value {
  font-size: 0.875rem;
  font-weight: 600;
  word-break: break-word;
}

.garage-model-accessory-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid #eef1f4;
}

.garage-model-accessory-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.garage-model-accessory-card:first-child {
  padding-top: 0;
}

/* ===================================================
   STOLEN ALERTS PAGE
   =================================================== */

.garage-stolen-page {
  padding-bottom: 1rem;
}

/* ── Hero banner ── */
.garage-stolen-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.25rem;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff5f5 0%, #fff 55%, #fff9f0 100%);
  border: 1px solid #fecaca;
  box-shadow: 0 2px 12px rgba(220, 38, 38, 0.06);
}

.garage-stolen-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}

.garage-stolen-hero-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(145deg, #dc2626 0%, #b91c1c 100%);
  color: #fff;
  font-size: 1.35rem;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.28);
}

.garage-stolen-hero-text h2 {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.3;
}

.garage-stolen-hero-text p {
  margin: 0;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.55;
  max-width: 640px;
}

.garage-stolen-city-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: #e8f0ff;
  color: #2563eb;
  font-size: 0.8rem;
  font-weight: 600;
}

.garage-stolen-city-pill strong {
  font-weight: 700;
}

.garage-stolen-hero-stat {
  flex-shrink: 0;
  text-align: center;
  padding: 0.65rem 1.1rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #fecaca;
  min-width: 90px;
}

.garage-stolen-hero-stat-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  color: #dc2626;
  line-height: 1.1;
}

.garage-stolen-hero-stat-label {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  color: #9ca3af;
}

/* ── Disabled state ── */
.garage-stolen-disabled {
  text-align: center;
  padding: 3rem 1.5rem;
  border-radius: 16px;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
}

.garage-stolen-disabled-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e5e7eb;
  color: #9ca3af;
  font-size: 1.75rem;
}

.garage-stolen-disabled h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #374151;
  margin-bottom: 0.5rem;
}

.garage-stolen-disabled p {
  margin: 0;
  color: #6b7280;
  font-size: 0.9rem;
}

/* ── Alert card ── */
.garage-stolen-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #fecaca;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.06);
  transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}

.garage-stolen-card:hover {
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.12);
  transform: translateY(-2px);
  border-color: #fca5a5;
}

.garage-stolen-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(165deg, #fef2f2 0%, #fee2e2 100%);
  overflow: hidden;
}

.garage-stolen-card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.28s ease;
}

.garage-stolen-card:hover .garage-stolen-card-photo {
  transform: scale(1.03);
}

.garage-stolen-card-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(145deg, #1a1a2e 0%, #450a0a 100%);
  color: rgba(255, 255, 255, 0.9);
}

.garage-stolen-card-photo-placeholder i {
  font-size: 2.5rem;
  opacity: 0.85;
}

.garage-stolen-card-photo-placeholder span {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  opacity: 0.8;
}

.garage-stolen-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  background: #dc2626;
  color: #fff;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35);
}

.garage-stolen-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem 1.1rem 1.1rem;
  gap: 0.75rem;
}

.garage-stolen-card-header {
  min-width: 0;
}

.garage-stolen-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
}

.garage-stolen-card-subtitle {
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: #6b7280;
  font-weight: 500;
}

.garage-stolen-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.garage-stolen-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: #f3f4f6;
  color: #4b5563;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
}

.garage-stolen-chip i {
  font-size: 0.65rem;
  opacity: 0.75;
}

.garage-stolen-plate {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  background: #1f2937;
  color: #fff;
}

.garage-stolen-plate-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9ca3af;
}

.garage-stolen-plate-value {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.garage-stolen-description {
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  background: #fef2f2;
  border-left: 3px solid #dc2626;
  font-size: 0.82rem;
  color: #374151;
  line-height: 1.55;
}

.garage-stolen-section-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #6b7280;
  margin-bottom: 0.45rem;
}

.garage-stolen-notes-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e8f0ff;
  color: #2563eb;
  font-size: 0.65rem;
  font-weight: 700;
}

/* ── Attachments ── */
.garage-stolen-attachment-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.garage-stolen-attachment-grid-sm .garage-stolen-attachment {
  width: 52px;
  height: 52px;
}

.garage-stolen-attachment {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.garage-stolen-attachment:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.garage-stolen-attachment img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.garage-stolen-attachment-video {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  background: #1f2937;
  color: #fff;
  text-decoration: none;
  font-size: 0.6rem;
  font-weight: 600;
}

.garage-stolen-attachment-video i {
  font-size: 1.25rem;
}

/* ── Community notes ── */
.garage-stolen-notes {
  padding-top: 0.5rem;
  border-top: 1px solid #f3f4f6;
}

.garage-stolen-notes-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 2px;
}

.garage-stolen-note {
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  background: #f9fafb;
  border: 1px solid #f3f4f6;
}

.garage-stolen-note-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.garage-stolen-note-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.garage-stolen-note-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e5e7eb;
  color: #9ca3af;
  font-size: 0.7rem;
}

.garage-stolen-note-author {
  min-width: 0;
  line-height: 1.25;
}

.garage-stolen-note-author strong {
  display: block;
  font-size: 0.78rem;
  color: #111827;
}

.garage-stolen-note-author strong a {
  color: inherit;
}

.garage-stolen-note-author strong a:hover {
  color: #2563eb;
}

.garage-stolen-note-date {
  display: block;
  font-size: 0.68rem;
  color: #9ca3af;
  font-weight: 500;
}

.garage-stolen-note-text {
  font-size: 0.8rem;
  color: #374151;
  line-height: 1.5;
}

/* ── Card footer & note form ── */
.garage-stolen-card-footer {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.garage-stolen-note-form-wrap {
  padding-top: 0.65rem;
  border-top: 1px dashed #e5e7eb;
  animation: garageStolenFormIn 0.2s ease;
}

@keyframes garageStolenFormIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.garage-stolen-note-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.garage-stolen-note-input {
  border-radius: 10px !important;
  border-color: #e5e7eb !important;
  font-size: 0.82rem !important;
  resize: vertical;
}

.garage-stolen-note-input:focus {
  border-color: #fca5a5 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 38, 38, 0.1) !important;
}

.garage-stolen-file-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  border: 1px dashed #d1d5db;
  background: #f9fafb;
  font-size: 0.78rem;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  margin: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.garage-stolen-file-label:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.garage-stolen-file-input {
  display: none;
}

.garage-stolen-note-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .garage-stolen-hero {
    flex-direction: column;
    padding: 1.1rem 1.15rem;
  }

  .garage-stolen-hero-stat {
    align-self: flex-start;
  }

  .garage-stolen-hero-icon {
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
  }

  .garage-stolen-hero-text h2 {
    font-size: 1.1rem;
  }

  .garage-stolen-card-footer {
    flex-wrap: wrap;
  }

  .garage-stolen-card-footer .garage-btn.flex-fill {
    flex: 1 1 100% !important;
  }
}

/* ── Share modal ── */
.garage-share-modal-content {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(16, 24, 40, 0.18);
}

.garage-share-modal-header {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  color: #fff;
  border-bottom: none;
  padding: 1rem 1.25rem;
}

.garage-share-modal-header .modal-title {
  font-size: 1rem;
  font-weight: 700;
}

.garage-share-modal-header .btn-close {
  filter: invert(1);
  opacity: 0.85;
}

.garage-share-modal-body {
  padding: 1.25rem;
}

.garage-share-modal-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1.25rem;
  align-items: start;
}

.garage-share-modal-qr-col {
  text-align: center;
}

.garage-share-qr-wrap {
  padding: 0.65rem;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  display: inline-block;
}

.garage-share-qr {
  display: block;
  width: 130px;
  height: 130px;
  border-radius: 8px;
}

.garage-share-modal-qr-hint {
  margin: 0.65rem 0 0;
  font-size: 0.72rem;
  color: #6b7280;
  line-height: 1.45;
}

.garage-share-modal-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #6b7280;
  margin-bottom: 0.45rem;
}

.garage-share-url-row {
  display: flex;
  align-items: stretch;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.garage-share-url-row .garage-share-url-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 0.82rem;
  background: #fff;
  padding: 0 0.75rem;
}

.garage-share-url-row .garage-share-url-input:focus {
  box-shadow: none !important;
}

.garage-share-copy-btn {
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 0 !important;
  flex-shrink: 0;
  padding: 0 14px !important;
  gap: 6px !important;
  white-space: nowrap;
  border-left: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.garage-share-copy-btn.is-copied {
  background: #e8fff1 !important;
  color: #16a34a !important;
}

.garage-share-social-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #6b7280;
  margin-bottom: 0.55rem;
}

.garage-share-social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.garage-share-social-btn {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  text-decoration: none;
  font-size: 1.05rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.garage-share-social-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  text-decoration: none;
}

.garage-share-facebook { background: #e8f0ff; color: #2563eb; }
.garage-share-x { background: #f3f4f6; color: #111827; }
.garage-share-whatsapp { background: #e8fff1; color: #16a34a; }
.garage-share-linkedin { background: #e8f0ff; color: #0a66c2; }

@media (max-width: 575px) {
  .garage-share-modal-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .garage-share-url-row {
    flex-direction: column;
  }

  .garage-share-copy-btn {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 0 0 10px 10px !important;
    justify-content: center !important;
  }

  .garage-share-url-row .garage-share-url-input {
    border-radius: 10px 10px 0 0 !important;
  }
}

.garage-stolen-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.65rem;
  flex-shrink: 0;
}

.garage-stolen-hero-share {
  align-self: flex-end;
  flex-shrink: 0;
}

/* ── Stolen report detail (full container width, matches garage.vehicle-detail) ── */
.garage-stolen-alert-ribbon {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #fef2f2 0%, #fff5f5 100%);
  border: 1px solid #fecaca;
}

.garage-stolen-alert-ribbon-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #dc2626;
  color: #fff;
  font-size: 1.1rem;
}

.garage-stolen-alert-ribbon-text {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.garage-stolen-alert-ribbon-text strong {
  display: block;
  font-size: 0.9rem;
  color: #991b1b;
  margin-bottom: 0.15rem;
}

.garage-stolen-alert-ribbon-text span {
  font-size: 0.8rem;
  color: #6b7280;
}

.garage-stolen-report-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.25;
}

.garage-stolen-report-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.garage-stolen-report-header-media {
  flex: 0 0 auto;
}

.garage-stolen-report-header-info {
  flex: 1;
  min-width: 0;
}

.garage-stolen-report-thumb {
  width: 96px;
  max-width: none;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: center;
  background: #f8f9fa;
  padding: 8px;
  border: 1px solid #e9ecef;
}

.garage-stolen-report-thumb-placeholder {
  width: 96px;
  max-width: none;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.75rem;
}

.garage-stolen-plate-inline {
  display: inline-flex;
  margin: 0;
}

.garage-stolen-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.65rem;
}

.garage-stolen-gallery-item {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid #e9ecef;
  background: #f8f9fa;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.garage-stolen-gallery-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}

.garage-stolen-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.garage-stolen-gallery-video {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  background: #1f2937;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
}

.garage-stolen-gallery-video i {
  font-size: 1.75rem;
}

.garage-stolen-gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.35rem 0.5rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.garage-stolen-description-text {
  font-size: 0.9rem;
  color: #374151;
  line-height: 1.6;
}

.garage-stolen-notes-list-page {
  max-height: none;
  padding: 0.15rem 0;
}

.garage-stolen-note-item {
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid #eef0f3;
}

.garage-stolen-note-item:last-child {
  border-bottom: none;
}

.garage-stolen-note-item.is-reply {
  padding: 0.65rem 0 0;
  border-bottom: none;
}

.garage-stolen-note-bubble {
  background: #f8fafc;
  border: 1px solid #e8ecf1;
  border-radius: 12px;
  padding: 0.85rem 1rem;
}

.garage-stolen-notes-list-page .garage-stolen-note-avatar {
  width: 36px;
  height: 36px;
}

.garage-stolen-notes-list-page .garage-stolen-note-author strong {
  font-size: 0.85rem;
}

.garage-stolen-notes-list-page .garage-stolen-note-date {
  font-size: 0.72rem;
}

.garage-stolen-notes-list-page .garage-stolen-note-text {
  font-size: 0.88rem;
  margin-top: 0.35rem;
}

.garage-stolen-note-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px solid #eef0f3;
}

.garage-stolen-reply-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  color: #2563eb;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}

.garage-stolen-reply-toggle:hover {
  color: #1d4ed8;
}

.garage-stolen-note-replies {
  margin-top: 0.65rem;
  margin-left: 0.75rem;
  padding-left: 0.85rem;
  border-left: 2px solid #e5e7eb;
}

.garage-stolen-reply-form-wrap {
  margin-top: 0.65rem;
  padding: 0.75rem;
  background: #fff;
  border: 1px dashed #d1d5db;
  border-radius: 10px;
  animation: garageStolenFormIn 0.2s ease;
}

.garage-stolen-note-page {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #f3f4f6;
  border-radius: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid #f3f4f6;
}

.garage-stolen-note-page:last-child {
  border-bottom: none;
}

.garage-stolen-signin-notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.85rem;
}

.garage-stolen-owner-banner {
  padding: 1rem 1.15rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
  border: 1px solid #fecaca;
}

.garage-stolen-owner-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}

/* ── Garage toast notifications ── */
.garage-toast-container {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1090;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: min(420px, calc(100vw - 2rem));
  pointer-events: none;
}

.garage-toast {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.16);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.garage-toast-show {
  opacity: 1;
  transform: translateY(0);
}

.garage-toast-hide {
  opacity: 0;
  transform: translateY(8px);
}

.garage-toast-success {
  border-color: #bbf4cf;
  background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);
}

.garage-toast-error {
  border-color: #fecaca;
  background: linear-gradient(135deg, #fef2f2 0%, #fff 100%);
}

.garage-toast-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 1rem;
}

.garage-toast-success .garage-toast-icon {
  background: #dcfce7;
  color: #16a34a;
}

.garage-toast-error .garage-toast-icon {
  background: #fee2e2;
  color: #dc2626;
}

.garage-toast-message {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.35;
}

.garage-toast-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.garage-toast-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #374151;
}

.garage-form-feedback {
  font-size: 0.85rem;
  border-radius: 10px;
  margin-bottom: 0.75rem;
}

/* ── Feedback modal (errors / forced modal only) ── */
.garage-feedback-modal-content {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(16, 24, 40, 0.18);
}

.garage-feedback-modal-body {
  padding: 1.5rem 1.25rem 0.5rem;
}

.garage-feedback-modal-icon-wrap {
  width: 56px;
  height: 56px;
  margin: 0 auto 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a;
  font-size: 1.75rem;
}

.garage-feedback-modal-icon-wrap.is-error {
  background: #fee2e2;
  color: #dc2626;
}

.garage-feedback-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #111827;
}

.garage-feedback-body {
  font-size: 0.875rem;
}

.garage-feedback-modal-footer {
  padding: 0.75rem 1.25rem 1.25rem;
}

@media (max-width: 767px) {
  .garage-toast-container {
    bottom: 5.5rem;
  }
}

/* ── Stolen owner contact ── */
.garage-stolen-owner-contact {
  margin-bottom: 0.85rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e8ecf1;
}

.garage-stolen-owner-contact-compact {
  margin-bottom: 0.65rem;
  padding: 0.65rem 0.75rem;
}

.garage-stolen-owner-contact-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.garage-stolen-owner-profile {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.garage-stolen-owner-profile:hover {
  color: #2563eb;
  text-decoration: none;
}

.garage-stolen-owner-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.garage-stolen-owner-info {
  min-width: 0;
  line-height: 1.25;
}

.garage-stolen-owner-info strong {
  display: block;
  font-size: 0.85rem;
  color: #111827;
}

.garage-stolen-owner-info span {
  display: block;
  font-size: 0.72rem;
  color: #6b7280;
}

.garage-stolen-owner-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* ── Stolen analytics ── */
.garage-stolen-analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.75rem;
}

.garage-stolen-analytics-metric {
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #eef0f3;
  text-align: center;
}

.garage-stolen-analytics-metric__value {
  font-size: 1.35rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

.garage-stolen-analytics-metric__label {
  font-size: 0.72rem;
  color: #6b7280;
  margin-top: 0.2rem;
  line-height: 1.3;
}

.garage-stolen-analytics-metric__hint {
  font-size: 0.68rem;
  margin-top: 0.15rem;
}

/* ===================================
   Garage Plugin Layout (fitness-style)
   =================================== */

.garage-plugin {
  --gp-ink: #14171a;
  --gp-surface: #ffffff;
  --gp-surface-2: #f4f6f8;
  --gp-surface-3: #e8ecef;
  --gp-text: #1c2025;
  --gp-text-dim: #6b7280;
  --gp-accent: #ff6b2c;
  --gp-accent-bright: #ff9a3c;
  --gp-moss: #5c8f6e;
  --gp-line: rgba(20, 23, 26, 0.09);
  --gp-line-strong: rgba(20, 23, 26, 0.16);
  --gp-radius: 16px;
  --gp-radius-sm: 10px;
  --gp-shadow: 0 8px 24px -12px rgba(20, 23, 26, 0.18);
  --gp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --garage-border: var(--gp-line);
  --garage-surface: var(--gp-surface);
  --garage-surface-2: var(--gp-surface-2);
  --garage-text: var(--gp-text);
  --garage-muted: var(--gp-text-dim);
  --garage-accent: var(--gp-accent);
  --garage-accent-soft: rgba(255, 107, 44, 0.12);
  --garage-shadow: var(--gp-shadow);
  --garage-success: #16a34a;
  --garage-warning: #d97706;
}

body.night-mode .garage-plugin {
  --gp-surface: #1c2025;
  --gp-surface-2: #242a30;
  --gp-surface-3: #2c333a;
  --gp-text: #edeae2;
  --gp-text-dim: #9da19b;
  --gp-line: rgba(237, 234, 226, 0.09);
  --gp-line-strong: rgba(237, 234, 226, 0.18);
  --gp-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.45);
}

.garage-plugin .display {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.garage-shell {
  background: var(--gp-surface);
  border: 1px solid var(--gp-line);
  border-radius: var(--gp-radius);
  box-shadow: var(--gp-shadow);
  position: relative;
}

.garage-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 60% 40% at 0% 0%, rgba(255, 107, 44, 0.08), transparent 55%),
    radial-gradient(ellipse 50% 35% at 100% 100%, rgba(92, 143, 110, 0.08), transparent 50%);
}

.garage-app-content {
  position: relative;
  z-index: 1;
  padding: 16px 20px 24px;
  color: var(--gp-text);
}

@media (max-width: 767px) {
  .garage-app-content {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

.garage-side-nav-card {
  border-radius: var(--gp-radius);
  border: 1px solid var(--gp-line);
  box-shadow: var(--gp-shadow);
  overflow: hidden;
}

.garage-side-nav-card .card-body {
  padding: 18px 14px;
}

.garage-side-brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--gp-text);
}

.garage-side-brand-link:hover {
  text-decoration: none;
  color: var(--gp-text);
}

.garage-side-brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gp-accent-bright), var(--gp-moss));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
}

.garage-side-brand-text {
  font-size: 18px;
  line-height: 1;
}

.garage-side-nav li {
  margin-bottom: 4px;
}

.garage-side-nav li a {
  margin: 0 6px;
  padding: 9px 12px !important;
  border-radius: 10px;
  transition: background 0.18s var(--gp-ease), color 0.18s var(--gp-ease);
  display: flex;
  align-items: center;
}

.garage-side-nav li.active > a {
  background: rgba(255, 107, 44, 0.12);
}

.garage-side-nav li a:hover {
  background: rgba(255, 107, 44, 0.08);
  text-decoration: none;
}

.garage-nav-count {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--gp-surface-2);
  color: var(--gp-text-dim);
  font-variant-numeric: tabular-nums;
}

.garage-side-nav li.active .garage-nav-count {
  background: var(--gp-accent);
  color: #fff;
}

.garage-side-vehicle-meta {
  list-style: none;
}

.garage-side-vehicle-box {
  margin: 0 12px 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--gp-surface-2);
  border: 1px solid var(--gp-line);
}

.garage-side-vehicle-box strong {
  display: block;
  font-size: 13px;
  color: var(--gp-text);
}

.garage-side-vehicle-box span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--gp-text-dim);
}

.garage-status-card {
  margin-top: 16px;
  padding: 14px;
  border-radius: 12px;
  background: var(--gp-surface-2);
  border: 1px solid var(--gp-line);
}

.garage-status-title {
  font-size: 13px;
  color: var(--gp-accent);
}

.garage-status-text {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--gp-text-dim);
}

.garage-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--gp-line);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  border-radius: var(--gp-radius) var(--gp-radius) 0 0;
}

body.night-mode .garage-topbar {
  background: rgba(28, 32, 37, 0.82);
}

.garage-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.garage-sidebar-toggle {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--gp-line);
  background: var(--gp-surface-2);
  color: var(--gp-text);
}

.garage-topbar-title {
  margin: 0;
  font-size: clamp(18px, 2.5vw, 22px);
  line-height: 1.1;
  color: var(--gp-text);
}

.garage-topbar-subtitle {
  margin-top: 4px;
  font-size: 13px;
  color: var(--gp-text-dim);
}

.garage-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.btn-garage-primary {
  background: linear-gradient(135deg, var(--gp-accent-bright), var(--gp-accent));
  border: 0;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 10px;
  box-shadow: 0 6px 18px -6px rgba(255, 107, 44, 0.45);
  transition: transform 0.18s var(--gp-ease), box-shadow 0.18s var(--gp-ease);
}

.btn-garage-primary:hover {
  transform: translateY(-1px);
  color: #fff;
  box-shadow: 0 10px 22px -6px rgba(255, 107, 44, 0.55);
}

.garage-btn-sm {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 12px;
}

.garage-sidebar-backdrop {
  display: none;
}

body.garage-sidebar-lock {
  overflow: hidden;
}

@media (max-width: 767px) {
  .garage-plugin {
    overflow: visible;
  }

  .garage-plugin .garage-main-col {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  .garage-plugin .garage-sidebar-col {
    position: fixed !important;
    top: 70px;
    left: 0;
    bottom: 0;
    width: min(86vw, 300px);
    max-width: 300px;
    margin: 0;
    padding: 12px 10px calc(80px + env(safe-area-inset-bottom));
    background: var(--gp-surface, #fff);
    z-index: 1200;
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: none;
    border-right: 1px solid var(--gp-line-strong);
  }

  .garage-plugin .garage-sidebar-col .garage-side-nav-card {
    box-shadow: none;
    border: none;
    border-radius: 0;
  }

  body.n_activated .garage-plugin .garage-sidebar-col,
  body.n_live .garage-plugin .garage-sidebar-col {
    top: 120px;
  }

  .garage-plugin.sidebar-open .garage-sidebar-col {
    transform: translateX(0);
  }

  .garage-sidebar-backdrop {
    display: block;
    position: fixed;
    top: 70px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1190;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }

  body.n_activated .garage-sidebar-backdrop,
  body.n_live .garage-sidebar-backdrop {
    top: 120px;
  }

  .garage-plugin.sidebar-open .garage-sidebar-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

@media (min-width: 768px) {
  .garage-sidebar-toggle,
  .garage-sidebar-close,
  .garage-sidebar-backdrop {
    display: none !important;
  }
}

.garage-plugin .garage-app-content .garage-vehicle-detail,
.garage-plugin .garage-app-content > .mt20 {
  margin-top: 0 !important;
}

body.night-mode .garage-plugin .garage-app-content .card {
  background: var(--gp-surface);
  border-color: var(--gp-line);
  color: var(--gp-text);
}

body.night-mode .garage-plugin .garage-app-content .text-muted {
  color: var(--gp-text-dim) !important;
}

body.night-mode .garage-plugin .garage-app-content .badge.bg-light {
  background: var(--gp-surface-2) !important;
  color: var(--gp-text) !important;
}

body.night-mode .garage-plugin .garage-app-content .garage-vehicle-card {
  background: var(--gp-surface);
  border-color: var(--gp-line);
}

/* Dashboard */
.garage-dash-alerts {
  display: grid;
  gap: 12px;
}

.garage-dash-alert {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--garage-border);
  background: var(--garage-surface);
}

.garage-dash-alert-warning {
  border-color: rgba(217, 119, 6, 0.25);
}

.garage-dash-alert-info {
  border-color: rgba(59, 130, 246, 0.25);
}

.garage-dash-alert-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.garage-dash-tag {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--garage-surface-2);
  font-size: 12px;
}

.garage-hero {
  position: relative;
  min-height: 280px;
  margin-bottom: 0;
  padding: 28px;
  border: 1px solid var(--garage-border);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(7, 9, 12, 0.96), rgba(20, 25, 40, 0.88) 40%, rgba(255, 107, 44, 0.10) 90%),
    linear-gradient(220deg, rgba(59, 130, 246, 0.08), transparent 60%),
    var(--garage-surface-2);
  overflow: hidden;
}

.garage-hero-carousel {
  position: relative;
  margin-bottom: 20px;
}

.garage-hero-track {
  position: relative;
}

.garage-hero-slide {
  display: none;
  animation: garageHeroFade 0.35s ease;
}

.garage-hero-slide.is-active {
  display: block;
}

@keyframes garageHeroFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.garage-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.garage-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.garage-hero-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(7, 9, 12, 0.55);
  color: #fff;
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: 0.2s ease;
}

.garage-hero-nav:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
}

.garage-hero-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.garage-hero-prev { left: 14px; }
.garage-hero-next { right: 14px; }

.garage-hero-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.garage-hero-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: 0.2s ease;
}

.night-mode .garage-hero-dot,
[data-bs-theme="dark"] .garage-hero-dot {
  background: rgba(255, 255, 255, 0.22);
}

.garage-hero-dot.is-active {
  width: 22px;
  background: var(--garage-accent, #ff6b2c);
}

.garage-dash-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.garage-dash-overview .garage-side-card {
  height: 100%;
}

.garage-dash-sections {
  display: grid;
  gap: 20px;
}

.garage-hero-carousel .garage-hero {
  padding-left: 64px;
  padding-right: 64px;
}

@media (max-width: 991px) {
  .garage-dash-overview {
    grid-template-columns: 1fr;
  }

  .garage-hero-carousel .garage-hero {
    padding-left: 48px;
    padding-right: 48px;
  }

  .garage-hero-nav {
    width: 36px;
    height: 36px;
  }

  .garage-hero-prev { left: 8px; }
  .garage-hero-next { right: 8px; }
}

.garage-hero--has-photo {
  background:
    linear-gradient(90deg, rgba(7, 9, 12, 0.94), rgba(7, 9, 12, 0.62) 52%, rgba(7, 9, 12, 0.2)),
    var(--garage-hero-image) center/cover;
}

.garage-hero-badge {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 107, 44, 0.2);
  background: rgba(255, 107, 44, 0.1);
  color: #ff9a3c;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.garage-hero-title {
  max-width: 620px;
  margin: 16px 0 8px;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
}

.garage-hero-desc {
  max-width: 580px;
  margin: 0;
  color: #c2c8d0;
  line-height: 1.65;
}

.garage-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.garage-meta-chip {
  padding: 10px 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
}

.garage-meta-chip strong {
  display: block;
  color: #fff;
  font-size: 14px;
}

.garage-meta-chip span {
  display: block;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
}

/* Vehicle carousel */
.garage-vehicle-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
}

.garage-carousel-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 0;
  flex: 1;
  min-width: 0;
}

.garage-carousel-track::-webkit-scrollbar {
  display: none;
}

.garage-carousel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  cursor: pointer;
  transition: 0.2s ease;
  backdrop-filter: blur(6px);
}

.garage-carousel-arrow:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.38);
}

.garage-carousel-arrow:disabled {
  opacity: 0.28;
  cursor: default;
}

.garage-vehicle-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 78px;
  min-width: 78px;
  min-height: 64px;
  padding: 6px 4px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0.72;
  transition: 0.2s ease;
  text-decoration: none;
  overflow: hidden;
  scroll-snap-align: start;
  flex: 0 0 auto;
}

.garage-vehicle-thumb-photo {
  display: block;
  width: 100%;
  height: 34px;
  border-radius: 8px;
  background: var(--garage-thumb-image) center/cover no-repeat;
}

.garage-vehicle-thumb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
}

.garage-vehicle-thumb-label {
  max-width: 100%;
  color: rgba(255, 255, 255, 0.88);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.garage-vehicle-thumb.is-active {
  border-color: var(--garage-accent);
  background: rgba(255, 107, 44, 0.16);
  opacity: 1;
  box-shadow: 0 4px 14px rgba(255, 107, 44, 0.22);
}

.garage-vehicle-thumb:hover {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.42);
}

.garage-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.garage-stat-card,
.garage-panel {
  border: 1px solid var(--garage-border);
  background: var(--garage-surface);
  box-shadow: var(--garage-shadow);
}

.garage-stat-card {
  padding: 18px;
  border-radius: 18px;
  text-align: left;
}

.garage-stat-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--garage-muted);
  font-size: 12px;
}

.garage-stat-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--garage-accent-soft);
  color: var(--garage-accent);
}

.garage-stat-card strong {
  display: block;
  margin-top: 10px;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--garage-text);
}

.garage-stat-trend {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--garage-success);
}

.garage-stat-trend-warning {
  color: var(--garage-warning);
}

.garage-dash-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
  gap: 20px;
  align-items: start;
}

.garage-dash-fullwidth {
  margin-top: 24px;
}

.garage-vehicle-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid var(--garage-border);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 107, 44, 0.06), transparent 42%),
    var(--garage-surface);
  box-shadow: var(--garage-shadow);
}

.garage-vehicle-hero--has-photo {
  background:
    linear-gradient(120deg, rgba(7, 9, 12, 0.9), rgba(7, 9, 12, 0.55) 55%, rgba(7, 9, 12, 0.2)),
    var(--garage-vehicle-hero-image) center/cover;
}

.garage-vehicle-hero-main {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  flex: 1 1 320px;
  min-width: 0;
}

.garage-vehicle-hero-media {
  flex: 0 0 auto;
}

.garage-vehicle-hero-photo,
.garage-vehicle-hero-placeholder {
  width: 112px;
  height: 112px;
  border-radius: 18px;
  object-fit: cover;
}

.garage-vehicle-hero-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--garage-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--garage-muted);
  font-size: 2rem;
}

.garage-vehicle-hero--has-photo .garage-vehicle-hero-placeholder,
.garage-vehicle-hero--has-photo .garage-vehicle-hero-photo {
  border: 2px solid rgba(255, 255, 255, 0.18);
}

.garage-vehicle-hero-info {
  flex: 1 1 220px;
  min-width: 0;
}

.garage-vehicle-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.garage-vehicle-hero-status,
.garage-vehicle-hero-sale,
.garage-vehicle-hero-alert {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.garage-vehicle-hero-status-active {
  background: rgba(22, 163, 74, 0.12);
  color: var(--garage-success);
}

.garage-vehicle-hero-status-sold {
  background: rgba(100, 116, 139, 0.14);
  color: var(--garage-muted);
}

.garage-vehicle-hero-status-scrapped {
  background: rgba(220, 38, 38, 0.12);
  color: var(--garage-danger);
}

.garage-vehicle-hero-sale {
  background: rgba(255, 107, 44, 0.12);
  color: var(--garage-accent);
}

.garage-vehicle-hero-alert {
  background: rgba(234, 179, 8, 0.16);
  color: #b45309;
}

.garage-vehicle-hero-title {
  margin: 0;
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  line-height: 1.15;
  color: var(--garage-text);
}

.garage-vehicle-hero--has-photo .garage-vehicle-hero-title,
.garage-vehicle-hero--has-photo .garage-vehicle-hero-nickname,
.garage-vehicle-hero--has-photo .garage-vehicle-hero-chip {
  color: #fff;
}

.garage-vehicle-hero-year {
  margin-left: 6px;
  color: var(--garage-muted);
  font-size: 0.72em;
  font-weight: 600;
}

.garage-vehicle-hero--has-photo .garage-vehicle-hero-year {
  color: rgba(255, 255, 255, 0.72);
}

.garage-vehicle-hero-nickname {
  margin: 6px 0 0;
  color: var(--garage-muted);
  font-size: 14px;
}

.garage-vehicle-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.garage-vehicle-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--garage-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--garage-text);
  font-size: 12px;
}

.garage-vehicle-hero--has-photo .garage-vehicle-hero-chip {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
}

.garage-vehicle-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.garage-vehicle-hero-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.garage-dash-section + .garage-dash-section {
  margin-top: 20px;
}

.garage-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.garage-section-head h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--garage-text);
}

.garage-section-head p {
  margin: 4px 0 0;
  color: var(--garage-muted);
  font-size: 13px;
}

.garage-link {
  color: var(--garage-accent);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.garage-panel {
  border-radius: 18px;
  padding: 18px;
}

.garage-maint-list {
  display: grid;
  gap: 12px;
}

.garage-maint-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--garage-border);
  border-radius: 15px;
  background: var(--garage-surface-2);
}

.garage-maint-icon,
.garage-doc-icon,
.garage-mod-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.garage-maint-info strong,
.garage-doc-info strong,
.garage-mod-info strong {
  display: block;
  font-size: 14px;
  color: var(--garage-text);
}

.garage-maint-info span,
.garage-doc-info span,
.garage-mod-info span {
  color: var(--garage-muted);
  font-size: 11px;
}

.garage-progress,
.garage-expense-bar {
  height: 7px;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(127, 127, 127, 0.15);
  overflow: hidden;
}

.garage-progress > span,
.garage-expense-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--garage-accent), #ff9a3c);
}

.garage-maint-status {
  min-width: 92px;
  text-align: right;
}

.garage-maint-status strong {
  display: block;
  font-size: 12px;
  color: var(--garage-text);
}

.garage-maint-status span {
  color: var(--garage-warning);
  font-size: 10px;
}

.garage-expense-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.garage-expense-card span {
  color: var(--garage-muted);
  font-size: 11px;
}

.garage-expense-card strong {
  display: block;
  margin-top: 7px;
  font-size: 1.35rem;
  color: var(--garage-text);
}

.garage-expense-bar {
  height: 8px;
  margin-top: 14px;
}

.garage-timeline {
  position: relative;
}

.garage-timeline::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 54px;
  bottom: 24px;
  width: 2px;
  background: var(--garage-border);
}

.garage-timeline-item {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 14px;
  padding: 12px 0;
}

.garage-timeline-dot {
  z-index: 1;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--garage-accent);
  color: #1b0b03;
  border: 4px solid var(--garage-surface);
}

.garage-timeline-price {
  font-size: 12px;
  font-weight: 800;
  color: var(--garage-text);
}

.garage-dash-side {
  display: grid;
  gap: 16px;
}

.garage-side-card h3 {
  margin: 0 0 14px;
  font-size: 1rem;
  color: var(--garage-text);
}

.garage-side-card h3 small {
  font-weight: 500;
}

/* Health ring */
.garage-health-ring {
  width: 110px;
  height: 110px;
  margin: 4px auto 10px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at center, var(--garage-surface) 60%, transparent 61%),
    conic-gradient(var(--garage-success) 0 var(--garage-health), rgba(127, 127, 127, 0.13) var(--garage-health) 100%);
}

.garage-health-ring strong {
  font-size: 1.8rem;
  line-height: 1;
  color: var(--garage-text);
}

.garage-health-ring small {
  font-size: 11px;
  color: var(--garage-muted);
  font-weight: 600;
}

.garage-health-label {
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--garage-muted);
}

/* Expense compact */
.garage-expense-compact {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.garage-expense-total {
  text-align: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--garage-border);
}

.garage-expense-total strong {
  display: block;
  font-size: 1.5rem;
  color: var(--garage-text);
}

.garage-expense-total span {
  font-size: 11px;
  color: var(--garage-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.garage-expense-rows {
  display: grid;
  gap: 8px;
}

.garage-expense-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.garage-expense-row-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.garage-expense-row-label {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--garage-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.garage-expense-row-value {
  font-size: 13px;
  color: var(--garage-text);
  white-space: nowrap;
}

/* Quick actions */
.garage-quick-actions {
  display: grid;
  gap: 8px;
}

.garage-quick-action {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--garage-border);
  border-radius: 14px;
  background: var(--garage-surface-2);
  color: var(--garage-text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.garage-quick-action:hover {
  border-color: rgba(255, 107, 44, 0.28);
  background: rgba(255, 107, 44, 0.04);
  color: var(--garage-text);
}

.garage-quick-action > i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 107, 44, 0.1);
  color: var(--garage-accent);
  font-size: 14px;
  flex: 0 0 auto;
}

.garage-quick-action strong {
  display: block;
  font-size: 13px;
  line-height: 1.2;
}

.garage-quick-action span {
  display: block;
  margin-top: 2px;
  color: var(--garage-muted);
  font-size: 10px;
  font-weight: 500;
}

.garage-quick-action-modal .modal-content {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--garage-border);
  background:
    radial-gradient(circle at top right, rgba(255, 107, 44, 0.1), transparent 42%),
    var(--garage-surface);
  box-shadow: 0 28px 60px -24px rgba(15, 23, 42, 0.35);
}

.garage-quick-action-modal-glow {
  position: absolute;
  inset: 0 0 auto 0;
  height: 120px;
  background: linear-gradient(135deg, rgba(255, 107, 44, 0.14), rgba(59, 130, 246, 0.08));
  pointer-events: none;
}

.garage-quick-action-dialog {
  max-width: 520px;
}

.garage-quick-action-modal-header {
  position: relative;
  z-index: 1;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 22px 10px;
  border-bottom: 0;
}

.garage-quick-action-modal-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

.garage-quick-action-modal-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: linear-gradient(145deg, rgba(255, 107, 44, 0.18), rgba(255, 107, 44, 0.06));
  border: 1px solid rgba(255, 107, 44, 0.22);
  color: var(--garage-accent);
  font-size: 18px;
  box-shadow: 0 10px 24px -14px rgba(255, 107, 44, 0.65);
}

#garageQuickActionModal.is-fuel .garage-quick-action-modal-icon {
  background: linear-gradient(145deg, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.06));
  border-color: rgba(59, 130, 246, 0.22);
  color: #3b82f6;
  box-shadow: 0 10px 24px -14px rgba(59, 130, 246, 0.55);
}

#garageQuickActionModal.is-documents .garage-quick-action-modal-icon {
  background: linear-gradient(145deg, rgba(139, 92, 246, 0.18), rgba(139, 92, 246, 0.06));
  border-color: rgba(139, 92, 246, 0.22);
  color: #8b5cf6;
  box-shadow: 0 10px 24px -14px rgba(139, 92, 246, 0.55);
}

#garageQuickActionModal.is-edit .garage-quick-action-modal-icon {
  background: linear-gradient(145deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.06));
  border-color: rgba(34, 197, 94, 0.22);
  color: #22c55e;
  box-shadow: 0 10px 24px -14px rgba(34, 197, 94, 0.55);
}

.garage-quick-action-modal-titles {
  min-width: 0;
}

.garage-quick-action-modal-titles .modal-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--garage-text);
}

.garage-quick-action-modal-desc {
  margin: 6px 0 0;
  color: var(--garage-muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.garage-quick-action-modal-body {
  position: relative;
  z-index: 1;
  padding: 8px 22px 22px;
}

.garage-quick-action-modal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--garage-surface-2);
  border: 1px solid var(--garage-border);
}

.garage-quick-action-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--garage-text);
}

.garage-quick-action-count i {
  color: var(--garage-accent);
}

.garage-quick-action-hint {
  font-size: 0.75rem;
  color: var(--garage-muted);
  white-space: nowrap;
}

.garage-quick-action-vehicle-list {
  display: grid;
  gap: 10px;
  max-height: min(58vh, 420px);
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.garage-quick-action-vehicle {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--garage-border);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 55%),
    var(--garage-surface-2);
  color: var(--garage-text);
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.garage-quick-action-vehicle:hover,
.garage-quick-action-vehicle:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 107, 44, 0.34);
  background:
    linear-gradient(135deg, rgba(255, 107, 44, 0.08), transparent 58%),
    var(--garage-surface-2);
  box-shadow: 0 14px 28px -20px rgba(255, 107, 44, 0.55);
  outline: none;
}

.garage-quick-action-vehicle.is-primary {
  border-color: rgba(255, 107, 44, 0.24);
  background:
    linear-gradient(135deg, rgba(255, 107, 44, 0.1), transparent 60%),
    var(--garage-surface-2);
}

.garage-quick-action-vehicle-media {
  position: relative;
  flex-shrink: 0;
}

.garage-quick-action-vehicle-photo {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: center / cover no-repeat var(--garage-surface);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--garage-muted);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}

.garage-quick-action-vehicle-photo.is-empty {
  background:
    linear-gradient(145deg, rgba(255, 107, 44, 0.16), rgba(59, 130, 246, 0.1)),
    var(--garage-surface);
  font-size: 1.25rem;
  color: var(--garage-accent);
}

.garage-quick-action-vehicle.has-photo .garage-quick-action-vehicle-photo {
  box-shadow: 0 10px 22px -16px rgba(15, 23, 42, 0.45);
}

.garage-quick-action-vehicle-badge {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--garage-accent);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 6px 14px -8px rgba(255, 107, 44, 0.8);
}

.garage-quick-action-vehicle-copy {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
}

.garage-quick-action-vehicle-copy strong {
  font-size: 0.98rem;
  line-height: 1.25;
  font-weight: 800;
}

.garage-quick-action-vehicle-copy em {
  font-style: normal;
  font-size: 0.78rem;
  color: var(--garage-muted);
  line-height: 1.3;
}

.garage-quick-action-vehicle-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.garage-quick-action-vehicle-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid var(--garage-border);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--garage-muted);
}

.garage-quick-action-vehicle-meta i {
  font-size: 0.68rem;
  opacity: 0.8;
}

.garage-quick-action-vehicle-go {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: rgba(255, 107, 44, 0.1);
  color: var(--garage-accent);
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.garage-quick-action-vehicle:hover .garage-quick-action-vehicle-go,
.garage-quick-action-vehicle:focus-visible .garage-quick-action-vehicle-go {
  transform: translateX(2px);
  background: var(--garage-accent);
  color: #fff;
}

@media (max-width: 575px) {
  .garage-quick-action-modal-header,
  .garage-quick-action-modal-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  .garage-quick-action-modal-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .garage-quick-action-hint {
    white-space: normal;
  }

  .garage-quick-action-vehicle {
    grid-template-columns: auto 1fr;
    gap: 12px;
  }

  .garage-quick-action-vehicle-go {
    display: none;
  }
}

#garageQuickActionModal {
  z-index: 100050;
}

#garageQuickActionModal.show .modal-dialog {
  pointer-events: auto;
}

body.modal-open:has(#garageQuickActionModal.show) > .modal-backdrop {
  z-index: 100040;
}

.garage-doc-list,
.garage-mod-list {
  display: grid;
  gap: 10px;
}

.garage-doc-item,
.garage-mod-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--garage-border);
  border-radius: 14px;
  background: var(--garage-surface-2);
}

.garage-doc-info,
.garage-mod-info {
  flex: 1;
  min-width: 0;
}

.garage-status {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.1);
  color: var(--garage-success);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.garage-mod-price {
  font-size: 12px;
  color: var(--garage-text);
}

@media (max-width: 1160px) {
  .garage-expense-grid {
    grid-template-columns: 1fr;
  }

  .garage-dash-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .garage-topbar,
  .garage-app-content {
    padding-left: 16px;
    padding-right: 16px;
  }

  .garage-hero {
    padding: 20px;
  }

  .garage-carousel-arrow {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }

  .garage-vehicle-hero {
    padding: 16px;
  }

  .garage-vehicle-hero-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .garage-stats-grid {
    grid-template-columns: 1fr;
  }

  .garage-maint-item {
    grid-template-columns: 44px 1fr;
  }

  .garage-maint-status {
    grid-column: 2;
    text-align: left;
  }

  .garage-timeline-item {
    grid-template-columns: 38px 1fr;
  }

  .garage-timeline-price {
    grid-column: 2;
  }
}

/* Explore page */
.garage-explore-page {
  display: grid;
  gap: 20px;
}

.garage-explore-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.8fr);
  gap: 20px;
  align-items: stretch;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(255, 107, 44, 0.12), rgba(59, 130, 246, 0.08)),
    var(--garage-surface);
}

.garage-explore-hero h2 {
  margin: 14px 0 8px;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--garage-text);
}

.garage-explore-hero p {
  margin: 0;
  color: var(--garage-muted);
  line-height: 1.65;
  max-width: 620px;
}

.garage-explore-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.garage-btn-secondary {
  color: var(--garage-text) !important;
  background: var(--garage-surface-2) !important;
  border: 1px solid var(--garage-border) !important;
  box-shadow: none !important;
}

.garage-explore-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.garage-explore-stat {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--garage-border);
  background: var(--garage-surface-2);
  text-align: center;
}

.garage-explore-stat strong {
  display: block;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--garage-text);
}

.garage-explore-stat span {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--garage-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.garage-explore-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.garage-plugin .garage-plugin .garage-app-content .garage-explore-card,
.garage-plugin .garage-app-content .card.garage-explore-card {
  border: 1px solid var(--garage-border);
  background: var(--garage-surface);
  border-radius: 18px;
  box-shadow: var(--garage-shadow);
}

.garage-plugin .garage-app-content .garage-explore-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.garage-plugin .garage-app-content .garage-explore-brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--garage-border);
  background: var(--garage-surface-2);
  color: var(--garage-text);
  text-decoration: none;
  transition: 0.2s ease;
}

.garage-plugin .garage-app-content .garage-explore-brand-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 107, 44, 0.35);
  text-decoration: none;
  color: var(--garage-text);
}

.garage-plugin .garage-app-content .garage-explore-brand-chip img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.garage-explore-brand-fallback {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--garage-accent-soft);
  color: var(--garage-accent);
}

.garage-plugin .garage-app-content .garage-explore-brand-name {
  font-weight: 700;
}

.garage-plugin .garage-app-content .garage-explore-brand-chip em {
  font-style: normal;
  font-size: 11px;
  color: var(--garage-muted);
  margin-left: 2px;
}

.garage-explore-models-panel {
  padding: 0;
  overflow: hidden;
}

.garage-plugin .garage-app-content .garage-explore-models li + li {
  border-top: 1px solid var(--garage-border);
}

.garage-plugin .garage-app-content .garage-explore-model-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  color: var(--garage-text);
  text-decoration: none;
}

.garage-plugin .garage-app-content .garage-explore-model-row:hover {
  background: var(--garage-surface-2);
  text-decoration: none;
  color: var(--garage-text);
}

.garage-plugin .garage-app-content .garage-explore-model-count {
  min-width: 34px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--garage-accent-soft);
  color: var(--garage-accent);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

@media (max-width: 991px) {
  .garage-explore-hero,
  .garage-explore-split {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════
   Statistics Page (modern)
   ═══════════════════════════════════════ */

.garage-stats-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  border-radius: 22px;
  border: 1px solid var(--garage-border);
  background:
    radial-gradient(circle at top right, rgba(255, 107, 44, 0.14), transparent 42%),
    linear-gradient(135deg, rgba(59, 130, 246, 0.08), transparent 55%),
    var(--garage-surface);
  box-shadow: var(--garage-shadow);
}

.garage-stats-hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--garage-accent-soft);
  color: var(--garage-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.garage-stats-hero-title {
  margin: 10px 0 6px;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--garage-text);
}

.garage-stats-hero-desc {
  margin: 0;
  color: var(--garage-muted);
  font-size: 14px;
}

.garage-stats-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.garage-stats-hero-meta .garage-meta-chip {
  border: 1px solid var(--garage-border);
  background: var(--garage-surface-2, #f3f4f6);
  backdrop-filter: none;
}

.garage-stats-hero-meta .garage-meta-chip strong {
  color: var(--garage-text);
}

.garage-stats-hero-meta .garage-meta-chip span {
  color: var(--garage-muted);
}

.garage-stats-kpi-grid .garage-stat-card {
  text-align: left;
}

.garage-stats-kpi-grid .garage-stat-card strong,
.garage-stats-kpi-grid .garage-stat-trend {
  text-align: left;
}

.garage-stats-social-grid {
  margin-top: 4px;
}

.garage-stats-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--garage-border);
  backdrop-filter: blur(8px);
}

.night-mode .garage-stats-toolbar,
[data-bs-theme="dark"] .garage-stats-toolbar {
  background: rgba(255, 255, 255, 0.04);
}

.garage-stats-toolbar-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
}

.garage-stats-toolbar-field--year {
  min-width: 110px;
}

.garage-stats-toolbar-field label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--garage-muted);
}

.garage-stats-toolbar .form-select {
  border-radius: 12px;
  border-color: var(--garage-border);
  background: var(--garage-surface);
  font-size: 14px;
  padding: 10px 12px;
}

.garage-stats-alerts-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.garage-stats-alert-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.garage-stats-alert-pill--warning {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.garage-stats-alert-pill--info {
  background: rgba(59, 130, 246, 0.1);
  color: #1d4ed8;
  border: 1px solid rgba(59, 130, 246, 0.18);
}

.garage-stats-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.garage-stats-kpi-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 991px) {
  .garage-stats-kpi-grid,
  .garage-stats-kpi-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .garage-stats-kpi-grid,
  .garage-stats-kpi-grid--4 {
    grid-template-columns: 1fr;
  }
}

.garage-stat-card--accent {
  background:
    linear-gradient(145deg, rgba(255, 107, 44, 0.12), transparent 55%),
    var(--garage-surface);
  border-color: rgba(255, 107, 44, 0.22);
}

.garage-stat-card strong small {
  font-size: 0.55em;
  font-weight: 700;
  opacity: 0.7;
}

.garage-stats-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 16px;
}

.garage-stats-panel {
  overflow: hidden;
}

.garage-stats-breakdown {
  display: grid;
  gap: 14px;
}

.garage-stats-breakdown-item {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--garage-subtle-bg, rgba(0, 0, 0, 0.02));
  border: 1px solid transparent;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.garage-stats-breakdown-item:hover {
  border-color: var(--garage-border);
  transform: translateY(-1px);
}

.garage-stats-breakdown-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.garage-stats-breakdown-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 14px;
}

.garage-stats-breakdown-icon--blue { background: rgba(59, 130, 246, 0.14); color: #3b82f6; }
.garage-stats-breakdown-icon--orange { background: rgba(245, 158, 11, 0.14); color: #f59e0b; }
.garage-stats-breakdown-icon--purple { background: rgba(139, 92, 246, 0.14); color: #8b5cf6; }
.garage-stats-breakdown-icon--green { background: rgba(34, 197, 94, 0.14); color: #22c55e; }
.garage-stats-breakdown-icon--teal { background: rgba(20, 184, 166, 0.14); color: #14b8a6; }

.garage-stats-breakdown-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.garage-stats-breakdown-meta strong {
  font-size: 14px;
  color: var(--garage-text);
}

.garage-stats-breakdown-meta span {
  font-size: 12px;
  color: var(--garage-muted);
}

.garage-stats-breakdown-head em {
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
  color: var(--garage-accent);
}

.garage-stats-breakdown-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.night-mode .garage-stats-breakdown-track,
[data-bs-theme="dark"] .garage-stats-breakdown-track {
  background: rgba(255, 255, 255, 0.08);
}

.garage-stats-breakdown-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.garage-stats-breakdown-fill--blue { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.garage-stats-breakdown-fill--orange { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.garage-stats-breakdown-fill--purple { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.garage-stats-breakdown-fill--green { background: linear-gradient(90deg, #22c55e, #4ade80); }
.garage-stats-breakdown-fill--teal { background: linear-gradient(90deg, #14b8a6, #2dd4bf); }

.garage-stats-modules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.garage-stats-module {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px;
  border-radius: 14px;
  background: var(--garage-subtle-bg, rgba(0, 0, 0, 0.02));
  border: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.garage-stats-module:hover {
  border-color: var(--garage-border);
}

.garage-stats-module i {
  font-size: 14px;
  color: var(--garage-accent);
}

.garage-stats-module strong {
  font-size: 1.35rem;
  line-height: 1;
  color: var(--garage-text);
}

.garage-stats-module span {
  font-size: 12px;
  color: var(--garage-muted);
}

.garage-stats-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--garage-muted);
}

.garage-stats-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: middle;
}

.garage-stats-dot--blue { background: #3b82f6; }
.garage-stats-dot--orange { background: #f59e0b; }
.garage-stats-dot--purple { background: #8b5cf6; }

.garage-stats-chart {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  min-height: 220px;
  padding-top: 8px;
}

.garage-stats-chart-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 200px;
}

.garage-stats-chart-col.is-empty .garage-stats-chart-bar {
  height: 8px;
  opacity: 0.35;
}

.garage-stats-chart-value {
  min-height: 16px;
  font-size: 10px;
  font-weight: 700;
  color: var(--garage-muted);
}

.garage-stats-chart-bar {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  max-width: 42px;
  height: calc(140px * var(--bar-height, 0) / 100);
  min-height: 4px;
  max-height: 140px;
  border-radius: 10px 10px 4px 4px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
  transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.garage-stats-chart-col:not(.is-empty) .garage-stats-chart-bar {
  background: transparent;
}

.garage-stats-chart-seg {
  width: 100%;
  min-height: 4px;
  transition: flex 0.4s ease;
}

.garage-stats-chart-seg--blue { background: linear-gradient(180deg, #60a5fa, #3b82f6); }
.garage-stats-chart-seg--orange { background: linear-gradient(180deg, #fbbf24, #f59e0b); }
.garage-stats-chart-seg--purple { background: linear-gradient(180deg, #a78bfa, #8b5cf6); }

.garage-stats-chart-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--garage-muted);
}

.garage-stats-vehicle-list {
  display: grid;
  gap: 10px;
}

.garage-stats-vehicle-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  background: var(--garage-subtle-bg, rgba(0, 0, 0, 0.02));
  border: 1px solid transparent;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.garage-stats-vehicle-row:hover {
  border-color: var(--garage-border);
  transform: translateY(-1px);
  box-shadow: var(--garage-shadow);
}

.garage-stats-vehicle-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.garage-stats-vehicle-main strong {
  font-size: 15px;
  color: var(--garage-text);
}

.garage-stats-vehicle-main span {
  font-size: 12px;
  color: var(--garage-muted);
}

.garage-stats-vehicle-main small {
  width: 100%;
  font-size: 12px;
  color: var(--garage-muted);
}

.garage-stats-vehicle-costs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--garage-muted);
}

.garage-stats-vehicle-costs i {
  margin-right: 4px;
  opacity: 0.8;
}

.garage-stats-vehicle-total {
  text-align: right;
}

.garage-stats-vehicle-total strong {
  display: block;
  font-size: 1.1rem;
  color: var(--garage-text);
}

.garage-stats-vehicle-total small {
  font-size: 11px;
  color: var(--garage-muted);
}

.garage-stats-vehicle-arrow {
  color: var(--garage-muted);
  font-size: 12px;
}

.garage-stats-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.garage-stats-service-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border-radius: 14px;
  background: var(--garage-subtle-bg, rgba(0, 0, 0, 0.02));
  border: 1px solid var(--garage-border);
}

.garage-stats-service-name {
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
  color: var(--garage-muted);
}

.garage-stats-service-card strong {
  font-size: 1.1rem;
  color: var(--garage-text);
}

.garage-stats-service-card small {
  font-size: 11px;
  color: var(--garage-muted);
}

@media (max-width: 991px) {
  .garage-stats-layout {
    grid-template-columns: 1fr;
  }

  .garage-stats-vehicle-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "main total"
      "costs arrow";
  }

  .garage-stats-vehicle-main { grid-area: main; }
  .garage-stats-vehicle-costs { grid-area: costs; }
  .garage-stats-vehicle-total { grid-area: total; text-align: right; }
  .garage-stats-vehicle-arrow { grid-area: arrow; justify-self: end; }
}

@media (max-width: 767px) {
  .garage-stats-hero {
    padding: 18px;
  }

  .garage-stats-toolbar {
    width: 100%;
  }

  .garage-stats-toolbar-field,
  .garage-stats-toolbar-field--year {
    flex: 1 1 100%;
    min-width: 0;
  }

  .garage-stats-chart {
    gap: 4px;
  }

  .garage-stats-chart-value {
    display: none;
  }

  .garage-stats-modules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.night-mode .garage-stats-breakdown-item,
.night-mode .garage-stats-module,
.night-mode .garage-stats-vehicle-row,
.night-mode .garage-stats-service-card,
[data-bs-theme="dark"] .garage-stats-breakdown-item,
[data-bs-theme="dark"] .garage-stats-module,
[data-bs-theme="dark"] .garage-stats-vehicle-row,
[data-bs-theme="dark"] .garage-stats-service-card {
  background: rgba(255, 255, 255, 0.03);
}



/* Profile sidebar garage card */
.garage-sidebar-card .card-header {
  padding-bottom: 0;
}
.garage-sidebar-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(94, 114, 228, 0.12);
  color: #5e72e4;
  flex-shrink: 0;
}
.garage-sidebar-thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.garage-sidebar-thumb {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  overflow: hidden;
  background: #eef1f6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #8898aa;
  flex-shrink: 0;
}
.garage-sidebar-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.garage-sidebar-thumb-fallback {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #eef1f6, #e4e8f0);
  color: #8898aa;
  font-size: 1rem;
}
.garage-sidebar-thumb-fallback.is-logo {
  padding: 8px;
  background: #fff;
}
.garage-sidebar-thumb-fallback.is-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.garage-sidebar-thumb-more {
  font-size: 0.8rem;
  font-weight: 700;
  color: #5e72e4;
  background: rgba(94, 114, 228, 0.1);
}
body.night-mode .garage-sidebar-thumb {
  background: rgba(255, 255, 255, 0.06);
}
body.night-mode .garage-sidebar-thumb-fallback {
  background: rgba(255, 255, 255, 0.08);
  color: #adb5bd;
}
body.night-mode .garage-sidebar-icon {
  background: rgba(94, 114, 228, 0.2);
}