/* ============================================================
   bf-overrides.css — legacy class -> BadFox theme overrides.
   Load AFTER style.css, style_steps.css, blend.css, and AFTER
   bf-theme.css. Do NOT edit those files; this layer wins via
   !important so legacy markup picks up the new dark/orange look.
   ============================================================ */

/* ---------- BASE / SHELL ---------- */
html, body { background: var(--bf-bg) !important; }

body, .app-screen {
  background: var(--bf-grad-page-bg) !important;
  color: var(--bf-text) !important;
  font-family: var(--bf-font-display) !important;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   RESPONSIVE LAYOUT (single source of truth)
   ============================================================ */

/* Kill legacy locks that prevent scroll & break layout */
html { height: auto !important; overflow-x: hidden !important; overscroll-behavior: none; }
body.bf-body {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 100dvh !important;
  width: 100% !important;
  max-width: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  justify-content: initial !important;
  align-items: initial !important;
}
.bf-app {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}
.bf-page {
  min-height: 100dvh !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  padding-top: max(12px, env(safe-area-inset-top)) !important;
  padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  box-sizing: border-box !important;
}

/* Legacy wrappers — break their height: 100% */
.bf-body .app-screen, .bf-body .app-content,
body.bf-body > .app-screen, body.bf-body .app-main {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Tab bar — pinned to viewport bottom, above home indicator (single rule) */
.bf-tabbar {
  position: fixed !important;
  left: max(16px, env(safe-area-inset-left)) !important;
  right: max(16px, env(safe-area-inset-right)) !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  z-index: 50 !important;
}

/* Map sheet & toast — clear of tab bar + home indicator */
.bf-sheet, #bike-info-card.bf-sheet { bottom: calc(86px + env(safe-area-inset-bottom)) !important; }
#card-saved-toast, .bf-toast { bottom: calc(86px + env(safe-area-inset-bottom)) !important; }

/* Bottom-sheet modals (tariff etc.) get bottom safe area */
.bf-modal-overlay > .bf-modal-content,
.bf-modal-overlay > .modal-content,
.bf-modal-sheet > .bf-modal-content,
.bf-modal-sheet > .modal-content {
  padding-bottom: max(22px, env(safe-area-inset-bottom)) !important;
}

/* iOS auto-zoom kill on inputs */
@media (max-width: 480px) {
  input, textarea, select { font-size: 16px !important; }
}

/* Tap responsiveness */
button, a, .bf-btn-primary, .bf-btn-secondary, .bf-btn-icon, .bf-btn-icon-44,
.bf-tab, .bf-chip, .bf-list-row, .bf-modal-close, .bf-menu-item,
.bike-list-item, .tariff-option, .tariff-option-item, .period-option {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* No selection on chrome */
.bf-tab, .bf-tabbar, .bf-pill, .bf-chip, .bf-modal-close, .bf-menu-close,
.bf-btn-icon, .bf-btn-icon-44, .bf-back-btn, .bf-segmented-btn, .bf-step-dots {
  -webkit-user-select: none; user-select: none;
}

/* Form chrome (Android Chrome native styling) */
input, select, textarea { -webkit-appearance: none; appearance: none; }
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A7A85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 18px !important;
  padding-right: 40px !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ─── NO-SCROLL PAGES ─── (everything except map)
   Only the body itself stops scrolling; the tab bar (position:fixed) and
   any other child with its own scroll container still work. */
body.bf-no-scroll {
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

/* Stats: page is locked, only the history list scrolls inside its own box */
body.bf-no-scroll #history-list-container {
  max-height: calc(100dvh - 360px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
}

/* Profile — content occupies full available width.
   profile.html is wrapped in legacy .app-screen > .app-content > .app-main.profile-main
   which adds padding & max-width from style.css. We zero those out here. */
body.bf-page-profile .app-screen,
body.bf-page-profile .app-content,
body.bf-page-profile .app-main,
body.bf-page-profile .profile-main {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.bf-page-profile .bf-app {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-left: none !important;
  border-right: none !important;
}

/* Tablet (≥768px) — center column, 480px wide, like a phone window */
@media (min-width: 768px) {
  .bf-app {
    max-width: 480px !important;
    margin: 0 auto !important;
    border-left: 1px solid rgba(255,255,255,0.06) !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
  }
  .bf-tabbar {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(min(480px, 100vw) - 32px) !important;
  }
  .bf-sheet, #bike-info-card.bf-sheet {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(min(480px, 100vw) - 24px) !important;
  }
  #bike-info-card.bf-sheet.visible { transform: translateX(-50%) translateY(0) !important; }
  #bike-info-card.bf-sheet:not(.visible) { transform: translateX(-50%) translateY(140%) !important; }
  #card-saved-toast, .bf-toast {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(min(480px, 100vw) - 32px) !important;
  }
}

/* Landscape phones — compact tab bar */
@media (max-height: 480px) and (orientation: landscape) {
  .bf-tabbar { padding: 4px !important; }
  .bf-tab { padding: 6px 4px !important; }
  .bf-tab span { font-size: 8.5px !important; }
}

.app-content {
  background: transparent !important;
  color: var(--bf-text) !important;
}

.app-main, .profile-main, .registration-main {
  background: transparent !important;
  color: var(--bf-text) !important;
}

.app-header {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--bf-text) !important;
}
.app-header h1, .app-title {
  font-family: var(--bf-font-display) !important;
  font-weight: 800 !important;
  font-size: 24px !important;
  letter-spacing: -0.8px !important;
  color: var(--bf-text) !important;
}
.app-main h2, .app-main h2.tg-centered-title {
  font-family: var(--bf-font-display) !important;
  font-weight: 800 !important;
  color: var(--bf-text) !important;
  letter-spacing: -0.6px !important;
}

/* ---------- BUTTONS ---------- */
.btn-primary, .btn.btn-primary {
  background: linear-gradient(180deg, var(--bf-accent) 0%, var(--bf-accent-deep) 100%) !important;
  color: #0A0A0B !important;
  border: none !important;
  border-radius: var(--bf-r-xl) !important;
  font-family: var(--bf-font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px !important;
  padding: 16px !important;
  box-shadow: var(--bf-shadow-glow) !important;
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.5 !important; box-shadow: none !important; }
.btn-primary.btn-accent { background: linear-gradient(180deg, var(--bf-accent) 0%, var(--bf-accent-deep) 100%) !important; }

.btn-secondary, .btn.btn-secondary {
  background: var(--bf-surface) !important;
  color: var(--bf-text) !important;
  border: 1px solid var(--bf-stroke-2) !important;
  border-radius: var(--bf-r-xl) !important;
  font-family: var(--bf-font-display) !important;
  font-weight: 600 !important;
  padding: 14px !important;
}
.btn-secondary:hover { background: var(--bf-surface-2) !important; }
.btn-secondary svg { stroke: var(--bf-accent) !important; }

.btn-danger {
  background: rgba(240,58,58,0.12) !important;
  color: #FF8585 !important;
  border: 1px solid rgba(240,58,58,0.4) !important;
  border-radius: var(--bf-r-xl) !important;
  font-family: var(--bf-font-display) !important;
  font-weight: 700 !important;
}

.btn-sbp {
  background: var(--bf-surface) !important;
  border: 1px solid var(--bf-stroke-2) !important;
  color: var(--bf-text) !important;
  border-radius: var(--bf-r-xl) !important;
}

.action-buttons { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.action-buttons .btn { width: 100% !important; }

/* ---------- CARDS ---------- */
.card:not(.bf-card) {
  background: var(--bf-surface) !important;
  border: 1px solid var(--bf-stroke-soft) !important;
  border-radius: var(--bf-r-3xl) !important;
  color: var(--bf-text) !important;
  box-shadow: none !important;
}
.action-card {
  background: var(--bf-surface) !important;
  border: 1px solid var(--bf-stroke-soft) !important;
  border-radius: var(--bf-r-2xl) !important;
  color: var(--bf-text) !important;
}
.action-card .icon-wrapper {
  background: var(--bf-grad-accent-135) !important;
  box-shadow: 0 4px 12px rgba(255,106,26,0.33) !important;
}
.action-card .icon-wrapper svg { color: #0A0A0B !important; stroke: #0A0A0B !important; }

/* ---------- MODALS ---------- */
.modal-overlay:not(.bf-modal-overlay) {
  background: rgba(0,0,0,0.65) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}
.modal-content:not(.bf-modal-content) {
  background: var(--bf-surface) !important;
  color: var(--bf-text) !important;
  border: 1px solid var(--bf-stroke-2) !important;
  border-radius: var(--bf-r-4xl) var(--bf-r-4xl) 0 0 !important;
  box-shadow: var(--bf-shadow-sheet) !important;
}
@media (min-width: 480px) {
  .modal-content:not(.bf-modal-content) { border-radius: var(--bf-r-4xl) !important; }
}
.modal-content h2 {
  font-family: var(--bf-font-display) !important;
  font-weight: 800 !important;
  color: var(--bf-text) !important;
  letter-spacing: -0.6px !important;
}
.modal-close {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--bf-stroke) !important;
  color: var(--bf-text) !important;
  border-radius: var(--bf-r-sm) !important;
}
.modal-info, .modal-info span { color: var(--bf-text-2) !important; }
.modal-info span strong { color: var(--bf-text) !important; }

/* ---------- BOTTOM NAV (legacy) ---------- */
.bottom-nav:not(.bf-tabbar) {
  background: rgba(15,15,18,0.92) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  backdrop-filter: blur(24px) !important;
  border: 1px solid var(--bf-stroke-2) !important;
  border-radius: var(--bf-r-4xl) !important;
  box-shadow: var(--bf-shadow-tab) !important;
}
.nav-item { color: var(--bf-text-muted) !important; }
.nav-item.active { color: var(--bf-accent) !important; }
.nav-item svg { stroke: currentColor !important; }
.nav-item.active svg { stroke-width: 2.2 !important; }

/* ---------- PROFILE ---------- */
.profile-header {
  background: radial-gradient(120% 100% at 50% 0%, rgba(255,106,26,0.13), transparent 60%), var(--bf-surface) !important;
  border: 1px solid var(--bf-stroke) !important;
  border-radius: var(--bf-r-4xl) !important;
  color: var(--bf-text) !important;
}
.profile-header .avatar, .profile-header .user-avatar {
  background: var(--bf-grad-accent-135) !important;
  border: none !important;
  box-shadow: 0 12px 28px rgba(255,106,26,0.33) !important;
}
.profile-header .user-name, .profile-header h2 {
  font-family: var(--bf-font-display) !important;
  font-weight: 800 !important;
  color: var(--bf-text) !important;
  letter-spacing: -0.6px !important;
}
.profile-menu {
  background: var(--bf-surface) !important;
  border: 1px solid var(--bf-stroke-soft) !important;
  border-radius: var(--bf-r-3xl) !important;
}
.profile-menu .menu-item, .menu-item:not(.bf-menu-item) {
  background: transparent !important;
  color: var(--bf-text) !important;
  border-bottom: 1px solid var(--bf-stroke-faint) !important;
}
.menu-item-text { color: var(--bf-text) !important; font-family: var(--bf-font-display) !important; }
.menu-item-chevron { color: var(--bf-text-muted) !important; }
.menu-item-icon { color: var(--bf-accent) !important; }
.menu-divider, .profile-menu hr { border-top-color: var(--bf-stroke-faint) !important; background: var(--bf-stroke-faint) !important; }

/* ---------- BURGER MENU OVERLAY ---------- */
.menu-overlay:not(.bf-menu-overlay) {
  background: rgba(0,0,0,0.72) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}
.menu-container, .menu-overlay > div {
  background: var(--bf-surface) !important;
  border: 1px solid var(--bf-stroke-2) !important;
  border-radius: var(--bf-r-4xl) var(--bf-r-4xl) 0 0 !important;
  box-shadow: var(--bf-shadow-sheet) !important;
}
.menu-close-btn {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--bf-stroke) !important;
  color: var(--bf-text) !important;
  border-radius: var(--bf-r-sm) !important;
}
.menu-item-btn {
  background: var(--bf-surface-2) !important;
  border: 1px solid var(--bf-stroke-2) !important;
  color: var(--bf-text) !important;
  font-family: var(--bf-font-display) !important;
  border-radius: var(--bf-r-xl) !important;
  font-weight: 600 !important;
}
.menu-item-btn.primary {
  background: var(--bf-grad-accent) !important;
  color: #0A0A0B !important;
  border-color: transparent !important;
  font-weight: 800 !important;
}
.menu-item-btn.secondary {
  background: var(--bf-surface) !important;
}

/* ---------- FORMS ---------- */
input:not(.bf-input):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
select, textarea {
  background: var(--bf-surface) !important;
  border: 1px solid var(--bf-stroke-2) !important;
  color: var(--bf-text) !important;
  border-radius: var(--bf-r-md) !important;
  font-family: var(--bf-font-display) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--bf-accent) !important;
  outline: none !important;
  background: var(--bf-surface-2) !important;
}
input::placeholder, textarea::placeholder { color: var(--bf-text-muted) !important; }
label:not(.bf-label) {
  color: var(--bf-text-muted) !important;
  font-family: var(--bf-font-mono) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
}

/* ---------- TOAST / MESSAGES ---------- */
.toast-container, .toast {
  background: var(--bf-surface-2) !important;
  border: 1px solid var(--bf-stroke-2) !important;
  color: var(--bf-text) !important;
  border-radius: var(--bf-r-md) !important;
  font-family: var(--bf-font-display) !important;
  box-shadow: var(--bf-shadow-tab) !important;
}
.toast-container.toast-success, .toast-success, .toast.success { border-color: rgba(80,210,140,0.4) !important; }
.toast-container.toast-error, .toast-error, .toast.error { border-color: rgba(240,58,58,0.4) !important; }
.toast-message { color: var(--bf-text) !important; }
.toast-message strong { color: var(--bf-text) !important; }

.error-message:not(.bf-toast) {
  background: rgba(240,58,58,0.10) !important;
  color: #FF8585 !important;
  border: 1px solid rgba(240,58,58,0.30) !important;
  border-radius: var(--bf-r-md) !important;
  padding: 12px 14px !important;
  font-family: var(--bf-font-display) !important;
}
.success-message:not(.bf-toast) {
  background: rgba(80,210,140,0.10) !important;
  color: #7BE0A8 !important;
  border: 1px solid rgba(80,210,140,0.30) !important;
  border-radius: var(--bf-r-md) !important;
  padding: 12px 14px !important;
  font-family: var(--bf-font-display) !important;
}

/* ---------- SCROLLBAR HIDE ---------- */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }

/* ============================================================
   AUDIT FIX PASS 2 — JS-injected legacy classes
   ============================================================ */

/* 1. Active rental views (ui.js -> #app-main) */
.bike-image-wrapper:not(.bf-card) {
  background: var(--bf-surface) !important;
  border: 1px solid var(--bf-stroke-soft) !important;
  border-radius: var(--bf-r-3xl) !important;
  overflow: hidden !important;
  padding: 12px !important;
}
.bike-image { border-radius: var(--bf-r-2xl) !important; background: transparent !important; }
.info-cards { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.info-cards .card,
.bike-code-card:not(.bf-card),
.card.bike-code-card {
  background: var(--bf-surface) !important;
  border: 1px solid var(--bf-stroke-soft) !important;
  border-radius: var(--bf-r-2xl) !important;
  color: var(--bf-text) !important;
  padding: 14px !important;
}
.text-content span { color: var(--bf-text-muted) !important; font-family: var(--bf-font-mono) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.6px !important; }
.text-content strong { color: var(--bf-text) !important; font-family: var(--bf-font-display) !important; font-weight: 800 !important; }
.icon-wrapper.bike-icon-wrapper, .icon-wrapper.dollar {
  background: var(--bf-grad-accent-135) !important;
  color: #0A0A0B !important;
  border-radius: var(--bf-r-md) !important;
  box-shadow: 0 4px 12px rgba(255,106,26,0.33) !important;
}
.icon-wrapper.bike-icon-wrapper svg { stroke: #0A0A0B !important; }
.progress-section { margin: 14px 0 !important; }
.progress-bar-container { background: var(--bf-surface-2) !important; border: 1px solid var(--bf-stroke-faint) !important; border-radius: 999px !important; height: 8px !important; overflow: hidden !important; }
.progress-bar { background: var(--bf-grad-accent) !important; box-shadow: 0 0 12px rgba(255,106,26,0.5) !important; height: 100% !important; }
.progress-labels { display: flex !important; justify-content: space-between !important; margin-top: 6px !important; color: var(--bf-text-muted) !important; font-family: var(--bf-font-mono) !important; font-size: 12px !important; }
.battery-chips { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 12px 0 !important; }
.battery-widget { background: var(--bf-surface) !important; border: 1px solid var(--bf-stroke-soft) !important; border-radius: var(--bf-r-md) !important; padding: 8px 12px !important; display: flex !important; align-items: center !important; gap: 8px !important; color: var(--bf-text) !important; }
.battery-number { color: var(--bf-text) !important; font-family: var(--bf-font-mono) !important; font-size: 12px !important; font-weight: 700 !important; }
.empty-message { color: var(--bf-text-muted) !important; font-family: var(--bf-font-mono) !important; font-size: 12px !important; padding: 8px !important; }
.secondary-actions, .secondary-actions-split { display: flex !important; gap: 10px !important; margin-top: 10px !important; }
.secondary-actions-split > .btn { flex: 1 !important; }
.text-btn.btn-secondary { background: transparent !important; border: 1px solid var(--bf-stroke-2) !important; color: var(--bf-text) !important; }

/* Pending / verification / contract overlay screens */
.pending-screen, .verification-container, .contract-signing-screen {
  background: var(--bf-grad-page-bg) !important;
  color: var(--bf-text) !important;
}
.pending-content, .verification-status-card, .verification-status-info, .contract-content, .contract-document {
  background: var(--bf-surface) !important;
  border: 1px solid var(--bf-stroke-soft) !important;
  border-radius: var(--bf-r-3xl) !important;
  color: var(--bf-text) !important;
}
.pending-spinner, .verification-loader { border-top-color: var(--bf-accent) !important; }
.verification-icon { color: var(--bf-accent) !important; }
.verification-loader.warning, .verification-animation.warning { border-top-color: #FFB347 !important; color: #FFB347 !important; }
.signature-line { background: var(--bf-stroke-2) !important; }
.signature-animation { color: var(--bf-accent) !important; }

/* 2. Tariff option cards / bike list (main.js) */
.bike-list-item:not(.bf-card),
.tariff-option-item,
.tariff-option {
  background: var(--bf-surface) !important;
  border: 1px solid var(--bf-stroke-soft) !important;
  border-radius: var(--bf-r-2xl) !important;
  color: var(--bf-text) !important;
  font-family: var(--bf-font-display) !important;
  padding: 14px 16px !important;
  margin: 8px 0 !important;
}
.bike-list-item strong, .tariff-option-item strong { color: var(--bf-text) !important; font-weight: 700 !important; }
.tariff-option-item.selected, .tariff-option.selected {
  border-color: var(--bf-accent) !important;
  background: rgba(255,106,26,0.08) !important;
  box-shadow: 0 0 0 1px var(--bf-accent) inset !important;
}
.option-details { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.option-duration { color: var(--bf-text) !important; font-family: var(--bf-font-display) !important; font-weight: 700 !important; }
.option-price { color: var(--bf-accent) !important; font-family: var(--bf-font-mono) !important; font-weight: 800 !important; }
.buyout-summary-card { background: var(--bf-surface) !important; border: 1px solid var(--bf-accent) !important; border-radius: var(--bf-r-2xl) !important; color: var(--bf-text) !important; }
.extension-item, .extension-row, .extend-option-item, .extend-container {
  background: var(--bf-surface-2) !important;
  border: 1px solid var(--bf-stroke-soft) !important;
  border-radius: var(--bf-r-md) !important;
  color: var(--bf-text) !important;
  padding: 10px 12px !important;
}

/* 3. History rows (profile.js) */
.history-item, .info-row {
  background: var(--bf-surface) !important;
  border: 1px solid var(--bf-stroke-soft) !important;
  border-radius: var(--bf-r-md) !important;
  color: var(--bf-text) !important;
  padding: 12px 14px !important;
}
.history-title { color: var(--bf-text) !important; font-family: var(--bf-font-display) !important; font-weight: 700 !important; }
.history-subtitle { color: var(--bf-text-muted) !important; font-family: var(--bf-font-mono) !important; font-size: 12px !important; }
.history-info { color: var(--bf-text-muted) !important; }
.history-cost { color: var(--bf-accent) !important; font-family: var(--bf-font-mono) !important; font-weight: 800 !important; }

/* 4. Notifications (profile.js) */
.notification-item, .notification-item-alt {
  background: var(--bf-surface) !important;
  border: 1px solid var(--bf-stroke-soft) !important;
  border-radius: var(--bf-r-2xl) !important;
  color: var(--bf-text) !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 14px !important;
  margin: 8px 0 !important;
}
.notification-item { border-color: var(--bf-accent) !important; background: rgba(255,106,26,0.06) !important; }
.notification-bell-icon { color: var(--bf-accent) !important; stroke: var(--bf-accent) !important; flex-shrink: 0 !important; }
.notification-content { flex: 1 !important; color: var(--bf-text) !important; }
.notification-content p { color: var(--bf-text) !important; font-family: var(--bf-font-display) !important; margin: 0 0 8px !important; }

/* 5. Chat / support */
.chat-message {
  background: transparent !important;
  color: var(--bf-text) !important;
  font-family: var(--bf-font-display) !important;
  margin: 6px 0 !important;
}
.chat-message.user-message .message-bubble,
.chat-message.user-message > .message-text {
  background: var(--bf-grad-accent) !important;
  color: #0A0A0B !important;
  border-radius: var(--bf-r-2xl) var(--bf-r-2xl) var(--bf-r-sm) var(--bf-r-2xl) !important;
}
.chat-message.support-message .message-bubble,
.chat-message.admin-message .message-bubble,
.chat-message.support-message > .message-text,
.chat-message.admin-message > .message-text {
  background: var(--bf-surface-2) !important;
  color: var(--bf-text) !important;
  border: 1px solid var(--bf-stroke-soft) !important;
  border-radius: var(--bf-r-2xl) var(--bf-r-2xl) var(--bf-r-2xl) var(--bf-r-sm) !important;
}
.message-text { padding: 10px 14px !important; line-height: 1.4 !important; }
.message-meta { color: var(--bf-text-muted) !important; font-family: var(--bf-font-mono) !important; font-size: 11px !important; }
.message-time, .message-timestamp { color: var(--bf-text-muted) !important; font-family: var(--bf-font-mono) !important; font-size: 11px !important; }
.message-status { color: var(--bf-text-muted) !important; }
.message-status.read { color: var(--bf-accent) !important; }
.date-separator { color: var(--bf-text-muted) !important; font-family: var(--bf-font-mono) !important; font-size: 11px !important; text-align: center !important; margin: 16px 0 8px !important; text-transform: uppercase !important; letter-spacing: 0.6px !important; }
.chat-error { color: #FF8585 !important; background: rgba(240,58,58,0.10) !important; border: 1px solid rgba(240,58,58,0.30) !important; border-radius: var(--bf-r-md) !important; padding: 10px 12px !important; }
.chat-empty, .chat-placeholder { color: var(--bf-text-muted) !important; text-align: center !important; padding: 24px !important; }
.chat-typing { color: var(--bf-accent) !important; font-style: italic !important; font-size: 12px !important; }
.chat-list-item { background: var(--bf-surface) !important; border: 1px solid var(--bf-stroke-soft) !important; border-radius: var(--bf-r-md) !important; color: var(--bf-text) !important; padding: 12px !important; }
.chat-info, .chat-name { color: var(--bf-text) !important; font-family: var(--bf-font-display) !important; }
.chat-unread-badge { background: var(--bf-accent) !important; color: #0A0A0B !important; border-radius: 999px !important; font-family: var(--bf-font-mono) !important; font-weight: 800 !important; padding: 2px 8px !important; font-size: 11px !important; }
.chat-file-content { padding: 6px !important; }
.chat-file-link { color: var(--bf-text) !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; }
.chat-image-preview, .chat-video-preview { border-radius: var(--bf-r-md) !important; max-width: 240px !important; }

/* 6. Form validation */
.form-error, .input-error, input.invalid, .invalid:not(button) {
  border-color: rgba(240,58,58,0.6) !important;
  background: rgba(240,58,58,0.05) !important;
  color: #FF8585 !important;
}
.form-success, input.valid, .valid:not(button) {
  border-color: rgba(80,210,140,0.6) !important;
}
.form-group { margin-bottom: 14px !important; }

/* 7. File upload */
.file-label {
  background: var(--bf-surface) !important;
  border: 1px dashed var(--bf-stroke-2) !important;
  border-radius: var(--bf-r-md) !important;
  color: var(--bf-text-muted) !important;
  font-family: var(--bf-font-display) !important;
  padding: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}
.file-label.has-file { border-style: solid !important; border-color: var(--bf-accent) !important; color: var(--bf-text) !important; background: rgba(255,106,26,0.06) !important; }
.file-info { color: var(--bf-text-muted) !important; font-family: var(--bf-font-mono) !important; font-size: 11px !important; }
.file-preview { border-radius: var(--bf-r-md) !important; border: 1px solid var(--bf-stroke-soft) !important; }
.upload-progress { background: var(--bf-surface-2) !important; border-radius: 999px !important; overflow: hidden !important; height: 6px !important; }
.upload-progress > * { background: var(--bf-grad-accent) !important; height: 100% !important; }

/* 8. Booking list (extra) */
.bike-list-item:hover { background: var(--bf-surface-2) !important; border-color: var(--bf-accent) !important; }
.bike-distance { color: var(--bf-text-muted) !important; font-family: var(--bf-font-mono) !important; font-size: 12px !important; }
.bike-price { color: var(--bf-accent) !important; font-family: var(--bf-font-mono) !important; font-weight: 800 !important; }

/* 9. Payment flow */
.payment-row, .payment-method, .payment-bonus, .payment-balance, .payment-final, .payment-info, .payment-summary, .payment-detail-row {
  background: var(--bf-surface) !important;
  border: 1px solid var(--bf-stroke-soft) !important;
  border-radius: var(--bf-r-md) !important;
  color: var(--bf-text) !important;
  padding: 12px 14px !important;
  margin: 6px 0 !important;
}
.payment-final { border-color: var(--bf-accent) !important; background: rgba(255,106,26,0.06) !important; }
.payment-detail-label { color: var(--bf-text-muted) !important; font-family: var(--bf-font-mono) !important; font-size: 12px !important; }
.payment-detail-value { color: var(--bf-text) !important; font-family: var(--bf-font-display) !important; font-weight: 700 !important; }
.payment-method-badge { background: var(--bf-surface-2) !important; color: var(--bf-text) !important; border: 1px solid var(--bf-stroke-soft) !important; border-radius: var(--bf-r-sm) !important; padding: 2px 8px !important; font-family: var(--bf-font-mono) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; }

/* 10. Photo control flow */
.photo-control-step, .photo-step-1, .photo-step-2, .photo-step-3, .photo-step-4 {
  background: var(--bf-surface) !important;
  border: 1px solid var(--bf-stroke-soft) !important;
  border-radius: var(--bf-r-2xl) !important;
  color: var(--bf-text) !important;
  padding: 16px !important;
}
.photo-step-indicator { display: flex !important; gap: 6px !important; justify-content: center !important; margin: 12px 0 !important; }
.photo-step-dot { background: var(--bf-stroke-2) !important; border-radius: 999px !important; height: 6px !important; width: 22px !important; transition: background .2s ease !important; }
.photo-step-dot.photo-step-active, .photo-step-dot.active { background: var(--bf-accent) !important; }
.photo-trigger { background: var(--bf-grad-accent) !important; color: #0A0A0B !important; border: none !important; border-radius: var(--bf-r-xl) !important; font-family: var(--bf-font-display) !important; font-weight: 800 !important; padding: 14px !important; box-shadow: var(--bf-shadow-glow) !important; }
.photo-preview, .photo-thumb, .client-photo-thumb, .client-video-thumb { border-radius: var(--bf-r-md) !important; border: 1px solid var(--bf-stroke-soft) !important; background: var(--bf-surface-2) !important; }

/* 11. QR scanner */
.qr-scanner-frame, .qr-scanner-overlay { background: rgba(0,0,0,0.72) !important; }
.scanner-corners { border-color: var(--bf-accent) !important; }
.scanner-line { background: var(--bf-grad-accent) !important; box-shadow: 0 0 12px var(--bf-accent) !important; }
.qr-bike-info { background: var(--bf-surface) !important; border: 1px solid var(--bf-accent) !important; border-radius: var(--bf-r-md) !important; color: var(--bf-text) !important; padding: 10px 12px !important; }

/* 12. Toast variants & misc helpers */
.toast.warning, .toast-warning { border-color: rgba(255,179,71,0.4) !important; }
.toast.info, .toast-info { border-color: rgba(106,158,255,0.4) !important; }
.toast-icon { color: var(--bf-accent) !important; flex-shrink: 0 !important; }
.toast-body { color: var(--bf-text) !important; font-family: var(--bf-font-display) !important; }

/* Bonus / loyalty / referral */
.bonus-row, .referral-row {
  background: var(--bf-surface) !important;
  border: 1px solid var(--bf-stroke-soft) !important;
  border-radius: var(--bf-r-md) !important;
  color: var(--bf-text) !important;
  padding: 12px 14px !important;
}
.bonus-meta { color: var(--bf-text-muted) !important; font-family: var(--bf-font-mono) !important; font-size: 11px !important; }
.referral-code {
  background: var(--bf-surface-2) !important;
  border: 1px dashed var(--bf-accent) !important;
  border-radius: var(--bf-r-sm) !important;
  color: var(--bf-accent) !important;
  font-family: var(--bf-font-mono) !important;
  font-weight: 800 !important;
  padding: 6px 10px !important;
  letter-spacing: 1px !important;
}
.copy-btn {
  background: var(--bf-surface-2) !important;
  border: 1px solid var(--bf-stroke-2) !important;
  border-radius: var(--bf-r-sm) !important;
  color: var(--bf-text) !important;
  font-family: var(--bf-font-display) !important;
  padding: 6px 10px !important;
  cursor: pointer !important;
}
.copy-btn:hover { border-color: var(--bf-accent) !important; color: var(--bf-accent) !important; }

/* Battery checkbox / chips */
.battery-checkbox-item, .chip {
  background: var(--bf-surface) !important;
  border: 1px solid var(--bf-stroke-soft) !important;
  border-radius: var(--bf-r-sm) !important;
  color: var(--bf-text) !important;
  font-family: var(--bf-font-mono) !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
}

/* Skeletons (loading-skeletons.js) — soft surface tones */
.skeleton-bar, .skeleton-bar-item, .skeleton-text, .skeleton-image, .skeleton-icon, .skeleton-button, .skeleton-chart, .skeleton-table {
  background: linear-gradient(90deg, var(--bf-surface) 0%, var(--bf-surface-2) 50%, var(--bf-surface) 100%) !important;
  border-radius: var(--bf-r-sm) !important;
  border: none !important;
}
.card.skeleton-card, .stat-card.skeleton-stat, .dashboard-revenue-card.skeleton-revenue {
  background: var(--bf-surface) !important;
  border: 1px solid var(--bf-stroke-soft) !important;
  border-radius: var(--bf-r-2xl) !important;
}