/* ============================================================
   VinBook — Custom CSS
   Stack: Bootstrap 5 + custom properties
   ============================================================ */

/* --- Variables --- */
:root {
  --vb-primary:       #2563eb;
  --vb-primary-dark:  #1d4ed8;
  --vb-primary-light: #eff6ff;
  --vb-success:       #059669;
  --vb-success-light: #ecfdf5;
  --vb-warning:       #d97706;
  --vb-warning-light: #fffbeb;
  --vb-danger:        #dc2626;
  --vb-danger-light:  #fef2f2;
  --vb-bg:            #f8fafc;
  --vb-surface:       #ffffff;
  --vb-border:        #e2e8f0;
  --vb-text:          #1e293b;
  --vb-muted:         #64748b;
  --vb-nav-bg:        #0f172a;
  --vb-radius:        0.75rem;
  --vb-radius-sm:     0.5rem;
  --vb-shadow:        0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --vb-shadow-md:     0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.05);
  --vb-shadow-lg:     0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.05);
}

/* --- Dark theme overrides --- */
[data-theme="dark"] {
  --vb-primary:        #60a5fa;
  --vb-primary-dark:   #3b82f6;
  --vb-primary-light:  #1e3a5f;
  --vb-success:        #34d399;
  --vb-success-light:  #052e16;
  --vb-warning:        #fbbf24;
  --vb-warning-light:  #431407;
  --vb-danger:         #f87171;
  --vb-danger-light:   #450a0a;
  --vb-bg:             #0f172a;
  --vb-bg-alt:         #1e293b;
  --vb-surface:        #1e293b;
  --vb-card-bg:        #1e293b;
  --vb-border:         #334155;
  --vb-text:           #f1f5f9;
  --vb-muted:          #94a3b8;
  --vb-nav-bg:         #0f172a;
  --vb-input-bg:       #1e293b;
  --vb-input-border:   #334155;
  color-scheme: dark;
}

/* Base */
[data-theme="dark"] body {
  background-color: var(--vb-bg);
  color: var(--vb-text);
}

/* Cards & surfaces */
[data-theme="dark"] .vb-card,
[data-theme="dark"] .vb-form-section,
[data-theme="dark"] .dropdown-menu {
  background-color: var(--vb-card-bg);
  color: var(--vb-text);
  border-color: var(--vb-border);
}
[data-theme="dark"] .vb-vehicle-card {
  background-color: var(--vb-surface);
  border-color: var(--vb-border);
  color: var(--vb-text);
}
[data-theme="dark"] .vb-timeline-card {
  background-color: var(--vb-surface);
  border-color: var(--vb-border);
}
[data-theme="dark"] .vb-vehicle-header {
  background-color: var(--vb-surface);
  border-color: var(--vb-border);
}
[data-theme="dark"] .vb-auth-card {
  background-color: var(--vb-surface);
}
[data-theme="dark"] .vb-form-section {
  background-color: #0f172a;
}

/* Forms */
[data-theme="dark"] .vb-form-control {
  background-color: var(--vb-input-bg);
  border-color: var(--vb-input-border);
  color: var(--vb-text);
}

/* Dropdowns */
[data-theme="dark"] .dropdown-item { color: var(--vb-text); }
[data-theme="dark"] .dropdown-item:hover { background-color: var(--vb-primary-light); }

/* Borders & muted text */
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom { border-color: var(--vb-border) !important; }
[data-theme="dark"] .text-vb-muted { color: var(--vb-muted) !important; }

/* Bootstrap text helpers */
[data-theme="dark"] .text-danger  { color: #f87171 !important; }
[data-theme="dark"] .text-warning { color: #fbbf24 !important; }
[data-theme="dark"] .text-success { color: #34d399 !important; }
[data-theme="dark"] .text-vb-primary { color: var(--vb-primary) !important; }

/* Status badges */
[data-theme="dark"] .vb-badge-active   { background: #052e16; color: #4ade80; }
[data-theme="dark"] .vb-badge-sold     { background: #1e293b; color: #94a3b8; }
[data-theme="dark"] .vb-badge-scrapped { background: #450a0a; color: #f87171; }
[data-theme="dark"] .vb-badge-archived { background: #1e293b; color: #94a3b8; }

/* Source chips */
[data-theme="dark"] .vb-source-mechanic       { background: #1e3a5f; color: #60a5fa; }
[data-theme="dark"] .vb-source-mechanic_guest { background: #0c2d48; color: #38bdf8; }
[data-theme="dark"] .vb-source-owner          { background: #2e1065; color: #c084fc; }
[data-theme="dark"] .vb-source-cepik          { background: #052e16; color: #4ade80; }
[data-theme="dark"] .vb-source-note           { color: #4ade80; }

/* Verified badge */
[data-theme="dark"] .vb-verified { color: #4ade80; }

/* Alert strips */
[data-theme="dark"] .vb-alert-strip.warning { background: rgba(120,53,15,.35); color: #fbbf24; }
[data-theme="dark"] .vb-alert-strip.danger  { background: rgba(127,29,29,.35); color: #f87171; }
[data-theme="dark"] .vb-alert-strip.info    { background: rgba(30,58,95,.55); color: #93c5fd; }

/* Trust bar */
[data-theme="dark"] .vb-trust-bar-wrap { background: #334155; }

/* --- Base --- */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--vb-bg);
  color: var(--vb-text);
  font-size: 0.9375rem;
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s, color .2s;
}

/* --- Navbar --- */
.vb-navbar {
  background-color: var(--vb-nav-bg);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 0.875rem 0;
  position: sticky;
  top: 0;
  z-index: 1030;
}

.vb-brand {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.vb-brand-vin  { color: var(--vb-primary); }
.vb-brand-book { color: #ffffff; }

.vb-navbar .nav-link {
  color: rgba(255,255,255,.65);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.4rem 0.75rem;
  border-radius: var(--vb-radius-sm);
  transition: color .15s, background .15s;
}
.vb-navbar .nav-link:hover,
.vb-navbar .nav-link.active {
  color: #fff;
  background: rgba(255,255,255,.07);
}

.vb-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--vb-primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vb-navbar .dropdown-menu {
  background: var(--vb-nav-bg);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--vb-radius-sm);
  min-width: 13rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
}
.vb-navbar .dropdown-item {
  color: rgba(255,255,255,.75);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  transition: color .15s, background .15s;
}
.vb-navbar .dropdown-item:hover {
  background: rgba(255,255,255,.07);
  color: #fff;
}
.vb-navbar .dropdown-divider {
  border-color: rgba(255,255,255,.1);
  margin: 0.375rem 0;
}

/* --- Main content --- */
.vb-main { min-height: calc(100vh - 62px); }

/* --- Cards --- */
.vb-card {
  background: var(--vb-surface);
  border: 1px solid var(--vb-border);
  border-radius: var(--vb-radius);
  box-shadow: var(--vb-shadow);
}

/* --- Vehicle cards (dashboard) --- */
.vb-vehicle-card {
  background: var(--vb-surface);
  border: 1px solid var(--vb-border);
  border-radius: var(--vb-radius);
  box-shadow: var(--vb-shadow);
  transition: box-shadow .2s, transform .2s, border-color .2s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.vb-vehicle-card:hover {
  box-shadow: var(--vb-shadow-lg);
  transform: translateY(-2px);
  border-color: var(--vb-primary);
  color: inherit;
}

.vb-vehicle-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--vb-radius-sm);
  background: var(--vb-primary-light);
  color: var(--vb-primary);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* --- Status badges --- */
.vb-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.vb-badge-active   { background: var(--vb-success-light); color: var(--vb-success); }
.vb-badge-sold     { background: #f1f5f9; color: var(--vb-muted); }
.vb-badge-scrapped { background: var(--vb-danger-light); color: var(--vb-danger); }
.vb-badge-archived { background: #f1f5f9; color: #94a3b8; }

/* --- Expiry indicators --- */
.vb-expiry {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 500;
}
.vb-expiry-ok      { color: var(--vb-success); }
.vb-expiry-warning { color: var(--vb-warning); }
.vb-expiry-danger  { color: var(--vb-danger); }
.vb-expiry-none    { color: #94a3b8; }

/* --- Page header --- */
.vb-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.vb-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

/* --- Buttons --- */
.btn-vb-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: var(--vb-primary);
  color: #fff;
  border: none;
  border-radius: var(--vb-radius-sm);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.55rem 1.1rem;
  text-decoration: none;
  transition: background .15s, box-shadow .15s;
}
.btn-vb-primary:hover {
  background: var(--vb-primary-dark);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(37,99,235,.3);
}
.btn-vb-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: var(--vb-surface);
  color: var(--vb-text);
  border: 1.5px solid var(--vb-border);
  border-radius: var(--vb-radius-sm);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.5rem 1.05rem;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn-vb-secondary:hover {
  background: var(--vb-primary-light);
  border-color: rgba(37,99,235,.28);
  color: var(--vb-primary-dark);
  box-shadow: var(--vb-shadow);
}
.btn-vb-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: transparent;
  color: var(--vb-primary);
  border: 1.5px solid var(--vb-primary);
  border-radius: var(--vb-radius-sm);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.5rem 1.1rem;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.btn-vb-outline:hover {
  background: var(--vb-primary-light);
  color: var(--vb-primary-dark);
  text-decoration: none;
}
.btn-vb-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: transparent;
  color: var(--vb-muted);
  border: 1.5px solid var(--vb-border);
  border-radius: var(--vb-radius-sm);
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  text-decoration: none;
  transition: color .15s, border-color .15s;
}
.btn-vb-ghost:hover {
  color: var(--vb-text);
  border-color: #cbd5e1;
  text-decoration: none;
}
.btn-vb-ghost:disabled,
.btn-vb-ghost.disabled {
  background: var(--vb-bg);
  border-color: var(--vb-border);
  color: var(--vb-muted);
  cursor: not-allowed;
  opacity: 0.55;
}
.vb-disabled-tooltip {
  cursor: not-allowed;
}

/* --- CEPiK requirements checklist --- */
.vb-cepik-checklist {
  background: var(--vb-surface);
  border: 1px solid var(--vb-border);
  border-radius: var(--vb-radius);
  box-shadow: var(--vb-shadow);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.vb-cepik-checklist-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--vb-text);
  font-size: 0.9rem;
  font-weight: 700;
}
.vb-cepik-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
}
.vb-cepik-status.is-ready {
  background: var(--vb-success-light);
  color: var(--vb-success);
}
.vb-cepik-status.is-missing {
  background: var(--vb-warning-light);
  color: var(--vb-warning);
}
.vb-cepik-checklist-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.85rem;
}
.vb-cepik-checklist-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--vb-bg);
  border: 1px solid var(--vb-border);
  border-radius: var(--vb-radius-sm);
  color: var(--vb-muted);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.55rem 0.7rem;
}
.vb-cepik-checklist-item.is-ready {
  color: var(--vb-success);
}
.vb-cepik-checklist-item.is-missing {
  color: var(--vb-warning);
}

/* --- Workshop panel statuses --- */
.vb-workshop-status {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 700;
  gap: 0.3rem;
  padding: 0.25rem 0.55rem;
}
.vb-workshop-status.status-success {
  background: var(--vb-success-light);
  color: var(--vb-success);
}
.vb-workshop-status.status-warning {
  background: var(--vb-warning-light);
  color: var(--vb-warning);
}
.vb-workshop-status.status-danger {
  background: var(--vb-danger-light);
  color: var(--vb-danger);
}
.vb-workshop-status.status-muted {
  background: var(--vb-bg);
  color: var(--vb-muted);
}

/* --- Mechanic quick service templates --- */
.vb-service-quick {
  background: var(--vb-bg);
  border: 1px solid var(--vb-border);
  border-radius: var(--vb-radius-sm);
  padding: 0.9rem;
}
.vb-service-group {
  background: var(--vb-surface);
  border: 1px solid var(--vb-border);
  border-radius: var(--vb-radius-sm);
  padding: 0.85rem;
}
.vb-service-group-icon {
  align-items: center;
  background: var(--vb-primary-light);
  border-radius: 8px;
  color: var(--vb-primary);
  display: inline-flex;
  height: 1.65rem;
  justify-content: center;
  width: 1.65rem;
}
.vb-service-chip {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.15;
}
.vb-mechanic-priority-input {
  min-height: 2.9rem;
}

/* --- Timeline (service history) --- */
.vb-timeline {
  position: relative;
  padding-left: 2rem;
}
.vb-timeline::before {
  content: '';
  position: absolute;
  left: 0.5625rem;
  top: 0.5rem;
  bottom: 0;
  width: 2px;
  background: var(--vb-border);
  border-radius: 1px;
}

.vb-timeline-item {
  position: relative;
  margin-bottom: 1.25rem;
}
.vb-timeline-item:last-child { margin-bottom: 0; }

.vb-timeline-dot {
  position: absolute;
  left: -1.6rem;
  top: 0.875rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--vb-primary);
  border: 2px solid var(--vb-surface);
  box-shadow: 0 0 0 2px var(--vb-primary);
  z-index: 1;
}
.vb-timeline-dot.dot-success  { background: var(--vb-success); box-shadow: 0 0 0 2px var(--vb-success); }
.vb-timeline-dot.dot-warning  { background: var(--vb-warning); box-shadow: 0 0 0 2px var(--vb-warning); }
.vb-timeline-dot.dot-muted    { background: #94a3b8; box-shadow: 0 0 0 2px #94a3b8; }

.vb-timeline-card {
  background: var(--vb-surface);
  border: 1px solid var(--vb-border);
  border-radius: var(--vb-radius-sm);
  padding: 1rem 1.25rem;
  box-shadow: var(--vb-shadow);
}

.vb-record-type {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--vb-muted);
}
.vb-record-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--vb-text);
  margin: 0.1rem 0 0.4rem;
}
.vb-record-meta {
  font-size: 0.8125rem;
  color: var(--vb-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.vb-record-meta i { opacity: .7; }

/* --- Vehicle detail header --- */
.vb-vehicle-header {
  background: var(--vb-surface);
  border: 1px solid var(--vb-border);
  border-radius: var(--vb-radius);
  box-shadow: var(--vb-shadow);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
}

/* --- Vehicle header: identity + actions row --- */
.vb-hdr-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}
.vb-hdr-identity {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-width: 0;
}
.vb-hdr-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--vb-radius-sm);
  object-fit: cover;
  border: 1px solid var(--vb-border);
  flex-shrink: 0;
}
.vb-hdr-thumb--icon {
  background: var(--vb-primary-light);
  color: var(--vb-primary);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vb-hdr-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}
.vb-hdr-primary,
.vb-hdr-secondary {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.vb-more-actions { position: relative; }
.vb-more-menu {
  min-width: 250px;
  padding: 0.45rem;
  border-color: var(--vb-border);
  box-shadow: var(--vb-shadow-lg);
}
.vb-more-menu .dropdown-item {
  border-radius: 0.45rem;
  font-size: 0.86rem;
  padding: 0.55rem 0.65rem;
}
.vb-more-menu .dropdown-item i {
  color: var(--vb-muted);
}
.vb-more-menu .dropdown-item:active {
  background: var(--vb-primary-light);
  color: var(--vb-primary);
}
.vb-more-form { margin: 0; }
.vb-more-form .dropdown-item {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
}
.vb-more-pdf {
  border-radius: 0.45rem;
}
.vb-more-pdf summary {
  list-style: none;
  cursor: pointer;
  border-radius: 0.45rem;
  color: var(--vb-text);
  font-size: 0.86rem;
  padding: 0.55rem 0.65rem;
}
.vb-more-pdf summary::-webkit-details-marker { display: none; }
.vb-more-pdf summary:hover,
.vb-more-menu .dropdown-item:hover {
  background: var(--vb-bg);
}
.vb-more-pdf-form {
  padding: 0.35rem 0.65rem 0.65rem;
}
.vb-more-pdf-form .vb-form-label {
  font-size: 0.74rem;
  margin-bottom: 0.25rem;
}
@media (max-width: 767.98px) {
  .vb-hdr-row { flex-wrap: wrap; }
  .vb-hdr-actions { width: 100%; align-items: flex-start; }
  .vb-hdr-primary, .vb-hdr-secondary { justify-content: flex-start; }
  .vb-hdr-primary .btn-vb-ghost,
  .vb-hdr-primary .btn-vb-primary,
  .vb-hdr-primary .dropdown,
  .vb-hdr-primary .dropdown-toggle,
  .vb-hdr-secondary .btn-vb-ghost,
  .vb-hdr-secondary form,
  .vb-hdr-secondary .vb-disabled-tooltip { width: 100%; }
  .vb-hdr-primary .btn-vb-ghost,
  .vb-hdr-primary .btn-vb-primary,
  .vb-hdr-primary .dropdown-toggle,
  .vb-hdr-secondary .btn-vb-ghost { justify-content: center; }
  .vb-more-menu {
    width: 100%;
    min-width: 0;
  }
}

.vb-vehicle-name {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
}
.vb-vehicle-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--vb-border);
}
.vb-vehicle-meta-item {
  font-size: 0.8125rem;
  color: var(--vb-muted);
}
.vb-vehicle-meta-item strong {
  color: var(--vb-text);
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 0.1rem;
}

/* --- Expiry alert bar --- */
.vb-alert-strip {
  border-radius: var(--vb-radius-sm);
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.vb-alert-strip.info    { background: var(--vb-primary-light); color: var(--vb-primary); }
.vb-alert-strip.warning { background: var(--vb-warning-light); color: #92400e; }
.vb-alert-strip.danger  { background: var(--vb-danger-light);  color: #991b1b; }

/* --- Empty state --- */
.vb-empty {
  text-align: center;
  padding: 4rem 2rem;
}
.vb-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--vb-primary-light);
  color: var(--vb-primary);
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}
.vb-empty h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.vb-empty p {
  color: var(--vb-muted);
  font-size: 0.9rem;
  max-width: 24rem;
  margin: 0 auto 1.5rem;
}

/* --- Auth pages --- */
.vb-auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 60%, #1e40af 100%);
  padding: 2rem 1rem;
}
.vb-auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--vb-surface);
  border-radius: var(--vb-radius);
  box-shadow: var(--vb-shadow-lg);
  padding: 2.5rem 2.25rem;
}
.vb-auth-brand {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-align: center;
  margin-bottom: 0.35rem;
  text-decoration: none;
}
.vb-auth-brand .vb-brand-book { color: var(--vb-text); }

/* --- Forms --- */
.vb-form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--vb-text);
  margin-bottom: 0.35rem;
}
.vb-form-control {
  border: 1.5px solid var(--vb-border);
  border-radius: var(--vb-radius-sm);
  font-size: 0.9rem;
  padding: 0.6rem 0.875rem;
  transition: border-color .15s, box-shadow .15s;
  color: var(--vb-text);
  background: var(--vb-surface);
  width: 100%;
}
.vb-form-control:focus {
  outline: none;
  border-color: var(--vb-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
select.vb-form-control {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.2rem;
  cursor: pointer;
}
.vb-form-control.is-invalid {
  border-color: var(--vb-danger);
}
.vb-form-section {
  background: var(--vb-bg);
  border: 1px solid var(--vb-border);
  border-radius: var(--vb-radius-sm);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.vb-form-section-title {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--vb-muted);
  margin-bottom: 1rem;
}
.vb-share-purpose-grid {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.vb-share-purpose {
  flex: 1 1 220px;
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.9rem;
  border: 1px solid var(--vb-border);
  border-radius: var(--vb-radius-sm);
  background: var(--vb-surface);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.vb-share-purpose:hover {
  border-color: rgba(37,99,235,.35);
  box-shadow: var(--vb-shadow-sm);
}
.vb-share-purpose input {
  margin-top: 0.25rem;
  accent-color: var(--vb-primary);
}
.vb-share-purpose strong {
  display: block;
  color: var(--vb-text);
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}
.vb-share-purpose small {
  display: block;
  color: var(--vb-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}
.vb-share-purpose:has(input:checked) {
  border-color: rgba(37,99,235,.55);
  background: var(--vb-primary-light);
}
.vb-share-link-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.vb-share-link-qr {
  width: 104px;
  padding: 0.45rem;
  border: 1px solid var(--vb-border);
  border-radius: var(--vb-radius-sm);
  background: #fff;
  box-shadow: var(--vb-shadow-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.vb-share-link-qr img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.vb-share-link-icon-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.vb-share-link-delete {
  color: var(--vb-danger);
  border-color: #fecaca;
}
@media (max-width: 767.98px) {
  .vb-share-link-side {
    width: 100%;
    align-items: flex-start;
  }
}

/* --- QR Public View --- */
.vb-qr-page {
  min-height: 100vh;
  background: var(--vb-bg);
}
.vb-qr-header {
  background: var(--vb-nav-bg);
  padding: 1rem 0;
  margin-bottom: 2rem;
}
.vb-qr-brand {
  font-size: 1.2rem;
  text-decoration: none;
}
.vb-qr-context-label {
  font-size: 0.8rem;
}
/* mobile only: constrain to narrow single column */
@media (max-width: 991px) {
  .vb-qr-shell {
    max-width: 640px;
  }
}
/* desktop (≥992px): no override — Bootstrap .container handles width naturally */
.vb-qr-vehicle-icon {
  width: 44px;
  height: 44px;
  border-radius: 0.75rem;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.vb-qr-vehicle-main {
  min-width: 0;
}
.vb-qr-vehicle-title {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 0.45rem;
  color: var(--vb-text);
}
.vb-qr-vehicle-meta {
  font-size: 0.82rem;
}
.vb-qr-plate-badge {
  background: var(--vb-primary-light);
  color: var(--vb-primary);
}
.vb-qr-vin {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.vb-qr-submeta,
.vb-qr-small-text {
  font-size: 0.8rem;
}
.vb-qr-mechanic-copy {
  min-width: 0;
  flex: 1 1 260px;
}
.vb-qr-kicker,
.vb-qr-section-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.vb-qr-kicker {
  color: var(--vb-muted);
  margin-bottom: 0.3rem;
}
.vb-qr-action-title {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 0.35rem;
  color: var(--vb-text);
}
.vb-qr-action-copy {
  font-size: 0.8rem;
  line-height: 1.45;
  margin: 0;
}
.vb-qr-action-btn {
  flex-shrink: 0;
  padding: 0.45rem 0.85rem;
  font-size: 0.8rem;
}
.vb-qr-score-suffix {
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}
.vb-qr-status-label {
  font-size: 0.78rem;
}
.vb-qr-history-title,
.vb-qr-empty-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}
.vb-qr-empty {
  padding: 2rem;
}
.vb-qr-empty-icon {
  width: 52px;
  height: 52px;
  font-size: 1.5rem;
}
.vb-trust-bar-wrap {
  background: #e2e8f0;
  border-radius: 99px;
  height: 8px;
  overflow: hidden;
}
.vb-trust-bar {
  width: 0;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--vb-primary), var(--vb-success));
  transition: width .6s ease;
}
.vb-trust-score-label {
  font-size: 2rem;
  font-weight: 800;
  color: var(--vb-text);
  line-height: 1;
}
.vb-history-status-icon {
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: var(--vb-bg);
  color: var(--vb-muted);
  border: 1px solid var(--vb-border);
}
.vb-history-status-icon.complete {
  background: var(--vb-success-light);
  color: var(--vb-success);
  border-color: rgba(5,150,105,.18);
}
.vb-history-status-icon.partial {
  background: var(--vb-warning-light);
  color: var(--vb-warning);
  border-color: rgba(217,119,6,.2);
}
.vb-history-status-icon.low {
  background: var(--vb-danger-light);
  color: var(--vb-danger);
  border-color: rgba(220,38,38,.18);
}
.vb-history-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
}
.vb-history-check.ok {
  color: var(--vb-success);
}
.vb-history-check.muted {
  color: var(--vb-muted);
}
.vb-history-check.muted i {
  color: #cbd5e1;
}

/* --- Section divider label (timeline) --- */
.vb-timeline-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vb-muted);
  margin: 1.5rem 0 1rem;
}

/* --- Breadcrumb --- */
.vb-breadcrumb {
  font-size: 0.8125rem;
  color: var(--vb-muted);
  margin-bottom: 1.25rem;
}
.vb-breadcrumb a { color: var(--vb-muted); text-decoration: none; }
.vb-breadcrumb a:hover { color: var(--vb-text); }
.vb-breadcrumb .sep { margin: 0 0.4rem; opacity: .5; }

/* --- Filter bar --- */
.vb-filter-search { position: relative; }
.vb-filter-search i {
  position: absolute; left: .65rem; top: 50%; transform: translateY(-50%);
  color: var(--vb-muted); pointer-events: none; font-size: .85rem;
}
.vb-filter-search input {
  width: 100%; padding: .35rem .75rem .35rem 2rem;
  background: var(--vb-input-bg); border: 1px solid var(--vb-input-border);
  border-radius: var(--vb-radius-sm); color: var(--vb-text);
  font-size: .85rem; outline: none; transition: border-color .15s;
}
.vb-filter-search input:focus { border-color: var(--vb-primary); }
.vb-filter-chip {
  padding: .28rem .7rem; border: 1px solid var(--vb-border);
  background: transparent; color: var(--vb-muted);
  border-radius: 99px; font-size: .78rem; font-weight: 500;
  cursor: pointer; white-space: nowrap; transition: all .15s; line-height: 1.5;
}
.vb-filter-chip:hover { border-color: var(--vb-primary); color: var(--vb-primary); }
.vb-filter-chip.active { background: var(--vb-primary); border-color: var(--vb-primary); color: #fff; }
[data-theme="dark"] .vb-filter-chip.active { color: #0f172a; }

/* --- Source chip --- */
.vb-source {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vb-source-mechanic       { background: #dbeafe; color: #1d4ed8; }
.vb-source-mechanic_guest { background: #e0f2fe; color: #0369a1; }
.vb-source-owner          { background: #f3e8ff; color: #7c3aed; }
.vb-source-cepik          { background: #dcfce7; color: #166534; }
.vb-source-note {
  color: #166534;
  font-weight: 600;
}

/* --- Verified badge --- */
.vb-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--vb-success);
}

/* --- Utilities --- */
.text-vb-primary { color: var(--vb-primary); }
.text-vb-muted   { color: var(--vb-muted); }
.fw-semibold     { font-weight: 600; }
.gap-sm          { gap: 0.5rem; }

/* --- Autocomplete dropdown --- */
.vb-ac-dropdown {
  position: absolute;
  z-index: 200;
  background: var(--vb-surface);
  border: 1.5px solid var(--vb-border);
  border-radius: var(--vb-radius-sm);
  box-shadow: var(--vb-shadow-md);
  max-height: 220px;
  overflow-y: auto;
  min-width: 100%;
  margin-top: 2px;
}
.vb-ac-item {
  padding: .45rem .875rem;
  font-size: .875rem;
  color: var(--vb-text);
  cursor: pointer;
  white-space: nowrap;
}
.vb-ac-item:hover,
.vb-ac-item.active {
  background: var(--vb-primary-light);
  color: var(--vb-primary);
}
.vb-ac-item strong { font-weight: 700; }

/* ── Lightbox ── */
#photo-lightbox {
  background: transparent;
  border: none;
  padding: 0;
  max-width: 95vw;
  max-height: 95vh;
  display: flex;
  align-items: center;
  gap: .75rem;
}
#photo-lightbox:not([open]) {
  display: none;
}
#photo-lightbox::backdrop {
  background: rgba(0, 0, 0, .88);
}
#lb-img {
  max-width: calc(95vw - 5rem);
  max-height: 92vh;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}
#lb-prev, #lb-next {
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  padding: .25rem .6rem;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
#lb-prev:hover, #lb-next:hover { background: rgba(255,255,255,.3); }

/* ── PDF export dropdown ── */
.vb-pdf-details { position: relative; display: inline-block; }
.vb-pdf-details summary { list-style: none; }
.vb-pdf-details summary::-webkit-details-marker { display: none; }
.vb-pdf-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 200;
  background: var(--vb-bg);
  border: 1px solid var(--vb-border);
  border-radius: 10px;
  padding: 12px;
  min-width: 210px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.vb-pdf-all {
  display: block;
  font-size: .82rem;
  font-weight: 500;
  color: var(--vb-text);
  text-decoration: none;
  padding: .3rem .4rem;
  border-radius: 6px;
}
.vb-pdf-all:hover { background: var(--vb-bg-alt); color: var(--vb-text); }

@media (max-width: 767.98px) {
  .vb-cepik-checklist-grid {
    grid-template-columns: 1fr;
  }
  .vb-mechanic-priority-input {
    font-size: 1rem;
    min-height: 3.25rem;
  }
}

/* ── Notification dropdown ──
   .vb-navbar .dropdown-menu specificity (0-2-0) forces dark nav-bg onto all
   dropdowns; use .vb-navbar .vb-notif-dropdown (0-2-0, later = wins) to reset. */
.vb-navbar .vb-notif-dropdown {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #1e293b;
}
.vb-notif-item { display: flex; align-items: flex-start; gap: .5rem;
  padding: .5rem .75rem; text-decoration: none; color: #1e293b; }
.vb-notif-item:hover { background: #f8fafc; color: #1e293b; }
.vb-notif-item.unread { background: #eff6ff; }
.vb-notif-item.unread:hover { background: #dbeafe; }
.vb-notif-title { font-size: .8rem; font-weight: 600; color: #0f172a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-notif-item.unread .vb-notif-title { font-weight: 700; }
.vb-notif-body  { font-size: .75rem; color: #64748b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-notif-time  { font-size: .7rem; color: #94a3b8; margin-top: .15rem; }
.vb-notif-header { border-bottom: 1px solid #e2e8f0; }
.vb-notif-footer { border-top: 1px solid #e2e8f0; }

[data-theme="dark"] .vb-navbar .vb-notif-dropdown {
  background: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}
[data-theme="dark"] .vb-notif-item { color: #f1f5f9; }
[data-theme="dark"] .vb-notif-item:hover { background: #273549; color: #f1f5f9; }
[data-theme="dark"] .vb-notif-item.unread { background: #1e3a5f; }
[data-theme="dark"] .vb-notif-item.unread:hover { background: #1e4976; }
[data-theme="dark"] .vb-notif-title { color: #f8fafc; }
[data-theme="dark"] .vb-notif-body  { color: #94a3b8; }
[data-theme="dark"] .vb-notif-time  { color: #64748b; }
[data-theme="dark"] .vb-notif-header { border-bottom-color: #334155; }
[data-theme="dark"] .vb-notif-footer { border-top-color: #334155; }

/* ── Notification list rows ── */
.vb-notif-row.unread { background: #eff6ff; }
[data-theme="dark"] .vb-notif-row.unread { background: #1e3a5f; }
.vb-notif-row:hover { background: #f8fafc; }
[data-theme="dark"] .vb-notif-row:hover { background: #273549; }
.vb-notif-row.unread:hover { background: #dbeafe; }
[data-theme="dark"] .vb-notif-row.unread:hover { background: #1e4976; }

/* --- PWA Install Banner --- */
#vb-pwa-banner {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 1090;
  background: var(--vb-nav-bg);
  color: #f1f5f9;
  border-radius: var(--vb-radius);
  padding: .875rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  animation: vb-slide-up .3s ease;
  max-width: 480px;
  margin: 0 auto;
}
@keyframes vb-slide-up {
  from { transform: translateY(120%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
#vb-pwa-banner img { flex-shrink: 0; border-radius: 8px; }
#vb-pwa-banner .vb-pwa-text { flex: 1; font-size: .85rem; line-height: 1.35; }
#vb-pwa-banner .vb-pwa-text strong { display: block; font-size: .9rem; margin-bottom: .15rem; }
#vb-pwa-banner .vb-pwa-install { background: var(--vb-primary); color: #fff; border: none; border-radius: var(--vb-radius-sm); padding: .4rem .85rem; font-size: .82rem; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
#vb-pwa-banner .vb-pwa-dismiss { background: none; border: none; color: #94a3b8; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: .1rem .2rem; flex-shrink: 0; }
[data-theme="dark"] #vb-pwa-banner { background: #1e293b; }