/* ================================================================
   HomeBid Design System — Theme Override per Bootstrap 5
   Versione: 1.0

   Questo file sovrascrive completamente l'aspetto Bootstrap di default
   per creare un'identità visiva premium stile Stripe/Airbnb.

   Caricamento: DOPO bootstrap.min.css e DOPO bootstrap-custom.css
   ================================================================ */

/* ── 1. CSS Custom Properties (Design Tokens) ────────────────── */

:root {
  /* === Brand Colors === */
  --hb-brand-50:  #f0f7ff;
  --hb-brand-100: #dbeafe;
  --hb-brand-200: #bfd5f7;
  --hb-brand-300: #93b8ed;
  --hb-brand-400: #6090de;
  --hb-brand-500: #3b6fd4;
  --hb-brand-600: #2756b8;  /* PRIMARY — Slate Blue professionale */
  --hb-brand-700: #1e4393;
  --hb-brand-800: #1c3a78;
  --hb-brand-900: #1a3264;
  --hb-brand-950: #111f3f;

  /* === Neutrals (warm gray) === */
  --hb-neutral-0:   #ffffff;
  --hb-neutral-25:  #fcfcfd;
  --hb-neutral-50:  #f8f9fb;
  --hb-neutral-100: #f1f3f6;
  --hb-neutral-200: #e3e6ec;
  --hb-neutral-300: #cdd2db;
  --hb-neutral-400: #9da5b4;
  --hb-neutral-500: #6b7486;
  --hb-neutral-600: #515a6b;
  --hb-neutral-700: #3d4556;
  --hb-neutral-800: #2a3041;
  --hb-neutral-900: #1a1f2e;
  --hb-neutral-950: #0f1219;

  /* === Semantici === */
  --hb-success-50:  #ecfdf5; --hb-success-500: #10b981; --hb-success-700: #047857;
  --hb-warning-50:  #fffbeb; --hb-warning-500: #f59e0b; --hb-warning-700: #b45309;
  --hb-error-50:    #fef2f2; --hb-error-500:   #ef4444; --hb-error-700:   #b91c1c;
  --hb-info-50:     #eff6ff; --hb-info-500:    #3b82f6; --hb-info-700:    #1d4ed8;

  /* === Alias per componenti === */
  --hb-bg:          var(--hb-neutral-0);
  --hb-bg-subtle:   var(--hb-neutral-50);
  --hb-bg-muted:    var(--hb-neutral-100);
  --hb-text:        var(--hb-neutral-900);
  --hb-text-muted:  var(--hb-neutral-500);
  --hb-text-subtle: var(--hb-neutral-400);
  --hb-border:      var(--hb-neutral-200);
  --hb-border-subtle: rgba(0,0,0,0.06);
  --hb-ring:        var(--hb-brand-500);

  /* === Shadows === */
  --hb-shadow-xs:   0 1px 2px rgba(16,24,40,0.05);
  --hb-shadow-sm:   0 1px 3px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04);
  --hb-shadow-md:   0 4px 8px -2px rgba(16,24,40,0.06), 0 2px 4px -2px rgba(16,24,40,0.04);
  --hb-shadow-lg:   0 12px 24px -4px rgba(16,24,40,0.08), 0 4px 8px -2px rgba(16,24,40,0.04);
  --hb-shadow-xl:   0 20px 40px -8px rgba(16,24,40,0.12), 0 8px 16px -4px rgba(16,24,40,0.06);

  /* === Radius === */
  --hb-radius-sm:   6px;
  --hb-radius-md:   10px;
  --hb-radius-lg:   14px;
  --hb-radius-xl:   20px;
  --hb-radius-full: 9999px;

  /* === Spacing (4px base) === */
  --hb-sp-0:  0;       --hb-sp-1:  0.25rem; --hb-sp-2:  0.5rem;
  --hb-sp-3:  0.75rem; --hb-sp-4:  1rem;    --hb-sp-5:  1.25rem;
  --hb-sp-6:  1.5rem;  --hb-sp-8:  2rem;    --hb-sp-10: 2.5rem;
  --hb-sp-12: 3rem;    --hb-sp-16: 4rem;    --hb-sp-20: 5rem;
  --hb-sp-24: 6rem;

  /* === Typography === */
  --hb-font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hb-font-body:    'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hb-font-mono:    'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* Type scale (clamp per fluid responsive) */
  --hb-text-xs:   clamp(0.6875rem, 0.65rem + 0.1vw, 0.75rem);
  --hb-text-sm:   clamp(0.8125rem, 0.78rem + 0.1vw, 0.875rem);
  --hb-text-base: clamp(0.875rem, 0.85rem + 0.15vw, 1rem);
  --hb-text-lg:   clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --hb-text-xl:   clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --hb-text-2xl:  clamp(1.375rem, 1.2rem + 0.5vw, 1.5rem);
  --hb-text-3xl:  clamp(1.625rem, 1.4rem + 0.8vw, 1.875rem);
  --hb-text-4xl:  clamp(2rem, 1.6rem + 1.2vw, 2.5rem);
  --hb-text-5xl:  clamp(2.5rem, 2rem + 1.5vw, 3.25rem);

  /* === Transition === */
  --hb-ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --hb-ease-out:  cubic-bezier(0, 0, 0.2, 1);
  --hb-duration:  200ms;

  /* === Layout === */
  --hb-max-width: 1240px;
  --hb-content-padding: clamp(1rem, 3vw, 3rem);
}

/* ── 2. Dark Mode ─────────────────────────────────────────────── */

[data-theme="dark"] {
  --hb-bg: var(--hb-neutral-950);
  --hb-bg-subtle: var(--hb-neutral-900);
  --hb-bg-muted: var(--hb-neutral-800);
  --hb-text: var(--hb-neutral-100);
  --hb-text-muted: var(--hb-neutral-400);
  --hb-text-subtle: var(--hb-neutral-500);
  --hb-border: var(--hb-neutral-700);
  --hb-border-subtle: rgba(255,255,255,0.06);
}

[data-theme="dark"] body {
  background-color: var(--hb-bg) !important;
  color: var(--hb-text) !important;
}

/* Dark mode — comprehensive overrides */
[data-theme="dark"] .card,
[data-theme="dark"] .offcanvas,
[data-theme="dark"] .modal-content {
  background-color: var(--hb-neutral-900) !important;
  color: var(--hb-neutral-100);
  border-color: var(--hb-neutral-700) !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: var(--hb-neutral-800) !important;
  color: var(--hb-neutral-100) !important;
  border-color: var(--hb-neutral-600) !important;
}

[data-theme="dark"] .form-control::placeholder {
  color: var(--hb-neutral-500) !important;
}

[data-theme="dark"] .dropdown-menu {
  background-color: var(--hb-neutral-800) !important;
  border-color: var(--hb-neutral-700) !important;
}

[data-theme="dark"] .dropdown-item {
  color: var(--hb-neutral-200) !important;
}

[data-theme="dark"] .dropdown-item:hover {
  background-color: var(--hb-neutral-700) !important;
}

[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] h5, [data-theme="dark"] h6 {
  color: var(--hb-neutral-100) !important;
}

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

[data-theme="dark"] .card-title {
  color: var(--hb-neutral-100) !important;
}

/* btn-outline-secondary dark → see Section 6 Buttons */

[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top,
[data-theme="dark"] hr {
  border-color: var(--hb-neutral-700) !important;
}

[data-theme="dark"] .table {
  color: var(--hb-neutral-200);
  --bs-table-border-color: var(--hb-neutral-700);
}

[data-theme="dark"] .table thead th {
  background-color: var(--hb-neutral-800) !important;
  color: var(--hb-neutral-400) !important;
}

[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: var(--hb-neutral-800) !important;
}

[data-theme="dark"] .bg-white,
[data-theme="dark"] section[style*="background-color: var(--hb-bg)"],
[data-theme="dark"] section[style*="background: var(--hb-bg)"] {
  background-color: var(--hb-neutral-950) !important;
}

[data-theme="dark"] .hb-section-alt {
  background-color: var(--hb-neutral-900) !important;
}

[data-theme="dark"] .hb-hero {
  background: var(--hb-neutral-950) !important;
}

[data-theme="dark"] .badge {
  color: #fff;
}

[data-theme="dark"] .nav-link {
  color: var(--hb-neutral-300) !important;
}

[data-theme="dark"] .nav-link:hover {
  color: var(--hb-neutral-100) !important;
}

[data-theme="dark"] .form-check-label {
  color: var(--hb-neutral-300);
}

[data-theme="dark"] .alert-danger {
  background: rgba(239,68,68,0.15) !important;
  color: #fca5a5 !important;
}

[data-theme="dark"] .alert-success {
  background: rgba(16,185,129,0.15) !important;
  color: #6ee7b7 !important;
}

/* ── 3. Base ──────────────────────────────────────────────────── */

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--hb-font-body);
  font-size: var(--hb-text-base);
  line-height: 1.6;
  color: var(--hb-text);
  background-color: var(--hb-bg);
  letter-spacing: -0.01em;
}

::selection {
  background-color: var(--hb-brand-100);
  color: var(--hb-brand-900);
}

/* ── 4. Typography ────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--hb-font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--hb-text);
}

h1 { font-size: var(--hb-text-4xl); }
h2 { font-size: var(--hb-text-3xl); }
h3 { font-size: var(--hb-text-2xl); }
h4 { font-size: var(--hb-text-xl); font-weight: 600; }

.hb-display {
  font-size: var(--hb-text-5xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.text-muted { color: var(--hb-text-muted) !important; }

/* ── 5. Links & Interactive ───────────────────────────────────── */

a {
  color: var(--hb-brand-600);
  text-decoration: none;
  transition: color var(--hb-duration) var(--hb-ease);
}

a:hover { color: var(--hb-brand-700); }

a, button, input, textarea, select, .card, .nav-link, .badge, .btn {
  transition: all var(--hb-duration) var(--hb-ease);
}

[role="button"], button, a, label[for] { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--hb-ring);
  outline-offset: 2px;
  border-radius: var(--hb-radius-sm);
}

/* ── 6. Buttons ───────────────────────────────────────────────── */
/*
 * WCAG AA contrast ratios verified:
 * - btn-primary:         #fff on #2756b8 → 5.8:1 ✓ (AA+)
 * - btn-primary:hover:   #fff on #1e4393 → 7.9:1 ✓ (AAA)
 * - btn-outline-primary: #2756b8 on #fff  → 5.8:1 ✓ (AA+)
 * - btn-outline-primary:hover: #1e4393 on #f0f7ff → 7.2:1 ✓ (AAA)
 * - btn-outline-secondary: #1a1f2e on #fff → 15.6:1 ✓ (AAA)
 * - btn-outline-secondary:hover: #1a1f2e on #f1f3f6 → 13.8:1 ✓ (AAA)
 * - btn-light: #1a1f2e on #fff → 15.6:1 ✓ (AAA)
 * - btn-light:hover: #1a1f2e on #f1f3f6 → 13.8:1 ✓ (AAA)
 * - btn-outline-light: #fff on dark bg → depends on container
 * - Dark mode btn-outline-secondary: #e3e6ec on #3d4556 → 5.2:1 ✓ (AA)
 */

.btn {
  font-family: var(--hb-font-body) !important;
  font-weight: 600 !important;
  font-size: var(--hb-text-sm);
  letter-spacing: -0.01em;
  border-radius: var(--hb-radius-md);
  padding: 0.625rem 1.25rem;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid transparent;
  box-shadow: var(--hb-shadow-xs);
}

.btn:hover { transform: translateY(-1px); box-shadow: var(--hb-shadow-sm); }
.btn:active { transform: translateY(0) scale(0.98); box-shadow: none; }

/* Primary: bianco su blu — 5.8:1 AA+ */
.btn-primary,
.btn-primary:focus {
  background-color: var(--hb-brand-600) !important;
  border-color: var(--hb-brand-600) !important;
  color: #fff !important;
}
.btn-primary:hover {
  background-color: var(--hb-brand-700) !important;
  border-color: var(--hb-brand-700) !important;
  color: #fff !important;
}
.btn-primary:active {
  background-color: var(--hb-brand-800) !important;
  border-color: var(--hb-brand-800) !important;
  color: #fff !important;
}

/* Outline Primary: blu su bianco → hover: blu scuro su celeste chiaro */
.btn-outline-primary,
.btn-outline-primary:focus {
  background: transparent !important;
  border-color: var(--hb-brand-600) !important;
  color: var(--hb-brand-600) !important;
}
.btn-outline-primary:hover {
  background-color: var(--hb-brand-50) !important;
  border-color: var(--hb-brand-700) !important;
  color: var(--hb-brand-700) !important;
}
.btn-outline-primary:active {
  background-color: var(--hb-brand-100) !important;
  border-color: var(--hb-brand-800) !important;
  color: var(--hb-brand-800) !important;
}

/* Outline Secondary: nero su bianco → hover: nero su grigio chiaro */
.btn-outline-secondary,
.btn-outline-secondary:focus {
  background: var(--hb-bg, #fff) !important;
  border-color: var(--hb-border, #e3e6ec) !important;
  color: var(--hb-text, #1a1f2e) !important;
  box-shadow: none !important;
}
.btn-outline-secondary:hover {
  background-color: var(--hb-neutral-100, #f1f3f6) !important;
  border-color: var(--hb-neutral-300, #cdd2db) !important;
  color: var(--hb-text, #1a1f2e) !important;
}
.btn-outline-secondary:active {
  background-color: var(--hb-neutral-200, #e3e6ec) !important;
  border-color: var(--hb-neutral-400, #9da5b4) !important;
  color: var(--hb-text, #1a1f2e) !important;
}

/* Light: nero su bianco → hover: nero su grigio */
.btn-light,
.btn-light:focus {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--hb-text, #1a1f2e) !important;
}
.btn-light:hover {
  background: var(--hb-neutral-100, #f1f3f6) !important;
  border-color: var(--hb-neutral-100, #f1f3f6) !important;
  color: var(--hb-text, #1a1f2e) !important;
}

/* Outline Light: usato su sfondo scuro — bianco su scuro */
.btn-outline-light,
.btn-outline-light:focus {
  background: transparent !important;
  border-color: rgba(255,255,255,0.3) !important;
  color: #fff !important;
}
.btn-outline-light:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.5) !important;
  color: #fff !important;
}

/* Danger: bianco su rosso */
.btn-danger { background-color: var(--hb-error-500) !important; border-color: var(--hb-error-500) !important; color: #fff !important; }
.btn-danger:hover { background-color: var(--hb-error-700) !important; border-color: var(--hb-error-700) !important; color: #fff !important; }

/* Success: bianco su verde */
.btn-success { background-color: var(--hb-success-500) !important; border-color: var(--hb-success-500) !important; color: #fff !important; }
.btn-success:hover { background-color: var(--hb-success-700) !important; border-color: var(--hb-success-700) !important; color: #fff !important; }

/* Ghost: nessun bordo, hover sottile */
.btn-link,
.btn-link:focus {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--hb-text-muted, #6b7486) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.btn-link:hover {
  background: var(--hb-neutral-100, #f1f3f6) !important;
  color: var(--hb-text, #1a1f2e) !important;
}

/* ── Dark mode buttons ── */
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-outline-secondary:focus {
  background: var(--hb-neutral-800, #2a3041) !important;
  border-color: var(--hb-neutral-600, #515a6b) !important;
  color: var(--hb-neutral-200, #e3e6ec) !important;
}
[data-theme="dark"] .btn-outline-secondary:hover {
  background: var(--hb-neutral-700, #3d4556) !important;
  border-color: var(--hb-neutral-500, #6b7486) !important;
  color: #fff !important;
}

[data-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .btn-outline-primary:focus {
  border-color: var(--hb-brand-400, #6090de) !important;
  color: var(--hb-brand-300, #93b8ed) !important;
}
[data-theme="dark"] .btn-outline-primary:hover {
  background: rgba(59,111,212,0.15) !important;
  border-color: var(--hb-brand-300, #93b8ed) !important;
  color: var(--hb-brand-200, #bfd5f7) !important;
}

[data-theme="dark"] .btn-light {
  background: var(--hb-neutral-100, #f1f3f6) !important;
  color: var(--hb-neutral-900, #1a1f2e) !important;
}
[data-theme="dark"] .btn-light:hover {
  background: #fff !important;
  color: var(--hb-neutral-900, #1a1f2e) !important;
}

[data-theme="dark"] .btn-link {
  color: var(--hb-neutral-400, #9da5b4) !important;
}
[data-theme="dark"] .btn-link:hover {
  background: var(--hb-neutral-700, #3d4556) !important;
  color: #fff !important;
}

/* Warning: bianco su ambra scuro — 4.6:1 AA */
.btn-warning { background-color: var(--hb-warning-700, #b45309) !important; border-color: var(--hb-warning-700, #b45309) !important; color: #fff !important; }
.btn-warning:hover { background-color: #92400e !important; border-color: #92400e !important; color: #fff !important; }
.btn-outline-warning,
.btn-outline-warning:focus { background: transparent !important; border-color: var(--hb-warning-500) !important; color: var(--hb-warning-700) !important; }
.btn-outline-warning:hover { background: var(--hb-warning-50) !important; border-color: var(--hb-warning-700) !important; color: var(--hb-warning-700) !important; }

/* Outline Danger */
.btn-outline-danger,
.btn-outline-danger:focus { background: transparent !important; border-color: var(--hb-error-500) !important; color: var(--hb-error-700) !important; }
.btn-outline-danger:hover { background: var(--hb-error-50) !important; border-color: var(--hb-error-700) !important; color: var(--hb-error-700) !important; }

/* Outline Success */
.btn-outline-success,
.btn-outline-success:focus { background: transparent !important; border-color: var(--hb-success-500) !important; color: var(--hb-success-700) !important; }
.btn-outline-success:hover { background: var(--hb-success-50) !important; border-color: var(--hb-success-700) !important; color: var(--hb-success-700) !important; }

/* Disabled state: all variants */
.btn:disabled,
.btn.disabled {
  opacity: 0.5 !important;
  pointer-events: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Focus-visible ring for all buttons (keyboard nav accessibility) */
.btn:focus-visible {
  outline: 2px solid var(--hb-brand-500, #3b6fd4) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

[data-theme="dark"] .btn:focus-visible {
  outline-color: var(--hb-brand-300, #93b8ed) !important;
}

/* Dark mode: warning/danger/success outlines */
[data-theme="dark"] .btn-outline-warning { border-color: var(--hb-warning-500) !important; color: #fbbf24 !important; }
[data-theme="dark"] .btn-outline-warning:hover { background: rgba(245,158,11,0.15) !important; color: #fcd34d !important; }
[data-theme="dark"] .btn-outline-danger { border-color: var(--hb-error-500) !important; color: #fca5a5 !important; }
[data-theme="dark"] .btn-outline-danger:hover { background: rgba(239,68,68,0.15) !important; color: #fecaca !important; }
[data-theme="dark"] .btn-outline-success { border-color: var(--hb-success-500) !important; color: #6ee7b7 !important; }
[data-theme="dark"] .btn-outline-success:hover { background: rgba(16,185,129,0.15) !important; color: #a7f3d0 !important; }

/* Sizes */
.btn-lg { padding: 0.75rem 1.75rem; font-size: var(--hb-text-base); min-height: 48px; border-radius: var(--hb-radius-lg); }
.btn-sm { padding: 0.375rem 0.875rem; font-size: var(--hb-text-xs); min-height: 34px; border-radius: var(--hb-radius-sm); }

/* ── 7. Cards ─────────────────────────────────────────────────── */

.card {
  background-color: var(--hb-bg);
  border: 1px solid var(--hb-border-subtle);
  border-radius: var(--hb-radius-lg);
  box-shadow: var(--hb-shadow-sm);
  overflow: hidden;
}

.card:hover { box-shadow: var(--hb-shadow-md); }

.hb-property-card {
  border: none;
  border-radius: var(--hb-radius-lg);
  box-shadow: var(--hb-shadow-sm);
  overflow: hidden;
  cursor: pointer;
}

.hb-property-card:hover { transform: translateY(-3px); box-shadow: var(--hb-shadow-lg); }
.hb-property-card:hover .hb-card-img { transform: scale(1.04); }
.hb-card-img { transition: transform 0.4s var(--hb-ease-out); }

.card-body { padding: var(--hb-sp-4); }
.card-title {
  font-family: var(--hb-font-display);
  font-weight: 600;
  font-size: var(--hb-text-base);
  letter-spacing: -0.01em;
  color: var(--hb-text);
  margin-bottom: var(--hb-sp-1);
}

/* ── 8. Forms ─────────────────────────────────────────────────── */

.form-control, .form-select {
  font-family: var(--hb-font-body);
  font-size: var(--hb-text-sm);
  border: 1.5px solid var(--hb-border);
  border-radius: var(--hb-radius-md);
  padding: 0.625rem 0.875rem;
  color: var(--hb-text);
  background-color: var(--hb-bg);
  box-shadow: var(--hb-shadow-xs);
}

.form-control:focus, .form-select:focus {
  border-color: var(--hb-brand-500);
  box-shadow: 0 0 0 3px rgba(59,111,212,0.12);
  outline: none;
}

.form-control::placeholder { color: var(--hb-text-subtle); }
.form-label { font-size: var(--hb-text-sm); font-weight: 600; color: var(--hb-text); margin-bottom: var(--hb-sp-1); }
.form-check-input:checked { background-color: var(--hb-brand-600); border-color: var(--hb-brand-600); }

/* ── 9. Navbar ────────────────────────────────────────────────── */

.navbar, .hb-header {
  height: 68px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--hb-border-subtle);
  padding: 0 var(--hb-content-padding);
  z-index: 1000;
}

[data-theme="dark"] .navbar, [data-theme="dark"] .hb-header {
  background: rgba(15,18,25,0.85);
  border-bottom-color: rgba(255,255,255,0.06);
}

.navbar .nav-link {
  font-size: var(--hb-text-sm); font-weight: 500; color: var(--hb-text-muted);
  padding: var(--hb-sp-2) var(--hb-sp-3); border-radius: var(--hb-radius-sm);
}
.navbar .nav-link:hover { color: var(--hb-text); background-color: var(--hb-bg-muted); }
.hb-header-compact { height: 56px; box-shadow: var(--hb-shadow-xs); }

/* ── 10. Badges ───────────────────────────────────────────────── */

.badge {
  font-family: var(--hb-font-body);
  font-size: var(--hb-text-xs);
  font-weight: 600;
  padding: 0.2em 0.625em;
  border-radius: var(--hb-radius-full);
}

.badge.bg-danger { background-color: var(--hb-error-500) !important; }
.badge.bg-warning { background-color: var(--hb-warning-500) !important; }
.badge.bg-success { background-color: var(--hb-success-500) !important; color: #fff !important; }

/* ── 11. Tables ───────────────────────────────────────────────── */

.table { font-size: var(--hb-text-sm); color: var(--hb-text); }
.table thead th {
  font-size: var(--hb-text-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--hb-text-muted); background-color: var(--hb-bg-subtle);
  border-bottom: 1px solid var(--hb-border); padding: var(--hb-sp-3) var(--hb-sp-4);
}
.table tbody tr:hover { background-color: var(--hb-bg-subtle); }
.table td { padding: var(--hb-sp-3) var(--hb-sp-4); vertical-align: middle; border-bottom: 1px solid var(--hb-border-subtle); }
.table th, .table td { border-left: none; border-right: none; }

/* ── 12. Dropdowns ────────────────────────────────────────────── */

.dropdown-menu {
  border: 1px solid var(--hb-border-subtle); border-radius: var(--hb-radius-md);
  box-shadow: var(--hb-shadow-lg); padding: var(--hb-sp-1); background-color: var(--hb-bg);
  animation: hb-dropdown-in 0.15s var(--hb-ease-out);
}
.dropdown-menu:not(.show) { display: none !important; }
@keyframes hb-dropdown-in { from { opacity: 0; transform: scale(0.95) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.dropdown-item { font-size: var(--hb-text-sm); padding: var(--hb-sp-2) var(--hb-sp-3); border-radius: var(--hb-radius-sm); color: var(--hb-text); }
.dropdown-item:hover { background-color: var(--hb-bg-muted); color: var(--hb-text); }

/* ── 13. Sections ─────────────────────────────────────────────── */

.hb-section { padding: var(--hb-sp-20) 0; }
.hb-section-alt { background-color: var(--hb-bg-subtle); }
@media (max-width: 767.98px) { .hb-section { padding: var(--hb-sp-12) 0; } }
.container { max-width: var(--hb-max-width); padding-left: var(--hb-content-padding); padding-right: var(--hb-content-padding); }

/* ── 14. Hero ─────────────────────────────────────────────────── */

.hb-hero {
  display: flex; align-items: center;
  background: linear-gradient(135deg, var(--hb-brand-50) 0%, var(--hb-bg) 60%);
  position: relative; overflow: hidden;
}
[data-theme="dark"] .hb-hero { background: linear-gradient(135deg, var(--hb-brand-950) 0%, var(--hb-bg) 60%); }

/* ── 15. Footer ───────────────────────────────────────────────── */

.hb-footer a { color: var(--hb-neutral-400); }
.hb-footer a:hover { color: var(--hb-neutral-0) !important; }

/* ── 16. Skeleton ─────────────────────────────────────────────── */

.hb-skeleton {
  background: linear-gradient(90deg, var(--hb-neutral-100) 25%, var(--hb-neutral-200) 50%, var(--hb-neutral-100) 75%);
  background-size: 200% 100%; animation: hb-shimmer 1.5s infinite; border-radius: var(--hb-radius-sm);
}
@keyframes hb-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* ── 17. Animations ───────────────────────────────────────────── */

.hb-animate {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.5s var(--hb-ease-out), transform 0.5s var(--hb-ease-out);
}
.hb-animate.is-visible { opacity: 1; transform: translateY(0); }
.hb-page-enter { animation: hb-page-fade-in 0.3s var(--hb-ease-out) both; }
@keyframes hb-page-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.hb-pulse-dot {
  width: 6px; height: 6px; border-radius: 50%; background-color: #fff;
  display: inline-block; animation: hb-pulse 1.5s infinite;
}
@keyframes hb-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } }

/* ── 18. Scroll to Top ────────────────────────────────────────── */

.hb-scroll-top {
  position: fixed; bottom: var(--hb-sp-6); right: var(--hb-sp-6);
  width: 44px; height: 44px; border-radius: 50%;
  background-color: var(--hb-brand-600); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--hb-shadow-lg); opacity: 0; pointer-events: none;
  transform: translateY(10px); transition: opacity 0.3s, transform 0.3s;
  z-index: 900; border: none; font-size: 1.125rem;
}
.hb-scroll-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.hb-scroll-top:hover { background-color: var(--hb-brand-700); transform: translateY(-2px); }

/* ── 19. Toast Notifications ───────────────────────────────────── */

.hb-toast {
  background: var(--hb-bg, #fff) !important;
  border: 1px solid var(--hb-border, #e3e6ec);
  box-shadow: var(--hb-shadow-xl) !important;
  color: var(--hb-text, #1a1f2e);
  pointer-events: auto;
  font-size: var(--hb-text-sm, 0.875rem);
}

.hb-toast-success {
  background: var(--hb-success-50, #ecfdf5) !important;
  border-color: var(--hb-success-500, #10b981) !important;
  color: var(--hb-success-700, #047857) !important;
}

.hb-toast-error {
  background: var(--hb-error-50, #fef2f2) !important;
  border-color: var(--hb-error-500, #ef4444) !important;
  color: var(--hb-error-700, #b91c1c) !important;
}

.hb-toast-warning {
  background: var(--hb-warning-50, #fffbeb) !important;
  border-color: var(--hb-warning-500, #f59e0b) !important;
  color: var(--hb-warning-700, #b45309) !important;
}

.hb-toast-info {
  background: var(--hb-info-50, #eff6ff) !important;
  border-color: var(--hb-info-500, #3b82f6) !important;
  color: var(--hb-info-700, #1d4ed8) !important;
}

[data-theme="dark"] .hb-toast {
  background: var(--hb-neutral-800, #2a3041) !important;
  border-color: var(--hb-neutral-700, #3d4556);
  color: var(--hb-neutral-100, #f1f3f6);
}

/* ── 20. Mobile Nav ───────────────────────────────────────────── */

.hb-nav-mobile {
  background: rgba(255,255,255,0.92); backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%); border-top: 1px solid var(--hb-border-subtle);
}
[data-theme="dark"] .hb-nav-mobile { background: rgba(15,18,25,0.92); border-top-color: rgba(255,255,255,0.06); }
.hb-nav-mobile-item { font-size: var(--hb-text-xs); font-weight: 500; color: var(--hb-text-muted); }
.hb-nav-mobile-item.active { color: var(--hb-brand-600); }

/* ── 20a. Mobile Burger Menu Background ───────────────────────── */

@media (max-width: 991.98px) {
  .navbar-collapse {
    background: var(--hb-bg, #fff);
    border-top: 1px solid var(--hb-border, #e3e6ec);
    border-bottom: 1px solid var(--hb-border, #e3e6ec);
    padding: var(--hb-sp-4, 1rem);
    margin-top: 0;
    box-shadow: var(--hb-shadow-lg);
    border-radius: 0 0 var(--hb-radius-lg, 14px) var(--hb-radius-lg, 14px);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
  }
  [data-theme="dark"] .navbar-collapse {
    background: var(--hb-neutral-900, #1a1f2e);
    border-color: var(--hb-neutral-700, #3d4556);
  }
}

/* ── 20b. Extended Dark Mode Fixes ────────────────────────────── */

[data-theme="dark"] .hb-hero,
[data-theme="dark"] section[style*="background: var(--hb-bg"] {
  background: var(--hb-neutral-950, #0f1219) !important;
}

[data-theme="dark"] section[style*="background-color: var(--bs-body-bg)"],
[data-theme="dark"] section[style*="background: linear-gradient"] {
  background: var(--hb-neutral-950, #0f1219) !important;
}

[data-theme="dark"] .hb-section-alt,
[data-theme="dark"] section[style*="hb-bg-subtle"],
[data-theme="dark"] section[style*="hb-bg-2"],
[data-theme="dark"] [style*="background: var(--hb-bg-subtle"] {
  background: var(--hb-neutral-900, #1a1f2e) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .offcanvas,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .navbar-collapse {
  background-color: var(--hb-neutral-900, #1a1f2e) !important;
  border-color: var(--hb-neutral-700, #3d4556) !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text {
  background-color: var(--hb-neutral-800, #2a3041) !important;
  color: var(--hb-neutral-100, #f1f3f6) !important;
  border-color: var(--hb-neutral-600, #515a6b) !important;
}

[data-theme="dark"] .form-control::placeholder {
  color: var(--hb-neutral-500, #6b7486) !important;
}

[data-theme="dark"] .dropdown-menu {
  background: var(--hb-neutral-800, #2a3041) !important;
  border-color: var(--hb-neutral-700, #3d4556) !important;
}

[data-theme="dark"] .dropdown-item { color: var(--hb-neutral-200, #e3e6ec) !important; }
[data-theme="dark"] .dropdown-item:hover { background: var(--hb-neutral-700, #3d4556) !important; }

[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] h5, [data-theme="dark"] h6,
[data-theme="dark"] .card-title,
[data-theme="dark"] .hb-display,
[data-theme="dark"] .fw-bold, [data-theme="dark"] .fw-semibold {
  color: var(--hb-neutral-100, #f1f3f6) !important;
}

[data-theme="dark"] p, [data-theme="dark"] span,
[data-theme="dark"] .text-muted, [data-theme="dark"] .hb-text-muted {
  color: var(--hb-neutral-400, #9da5b4) !important;
}

[data-theme="dark"] a:not(.btn):not(.badge):not(.nav-link) {
  color: var(--hb-brand-300, #93b8ed) !important;
}

[data-theme="dark"] .table { color: var(--hb-neutral-200, #e3e6ec); }
[data-theme="dark"] .table thead th { background: var(--hb-neutral-800, #2a3041) !important; color: var(--hb-neutral-400, #9da5b4) !important; }
[data-theme="dark"] .table td { border-color: var(--hb-neutral-700, #3d4556) !important; }
[data-theme="dark"] .table-hover tbody tr:hover { background: var(--hb-neutral-800, #2a3041) !important; }

[data-theme="dark"] hr, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-top {
  border-color: var(--hb-neutral-700, #3d4556) !important;
}

[data-theme="dark"] .badge { color: #fff !important; }
[data-theme="dark"] .badge[style*="background: rgba(255,255,255"] { color: var(--hb-neutral-900, #1a1f2e) !important; }

[data-theme="dark"] .alert-danger { background: rgba(239,68,68,0.15) !important; color: #fca5a5 !important; }
[data-theme="dark"] .alert-success { background: rgba(16,185,129,0.15) !important; color: #6ee7b7 !important; }
[data-theme="dark"] .alert-info { background: rgba(59,130,246,0.15) !important; color: #93c5fd !important; }

[data-theme="dark"] .nav-link { color: var(--hb-neutral-300, #cdd2db) !important; }
[data-theme="dark"] .nav-link:hover { color: #fff !important; background: var(--hb-neutral-800, #2a3041) !important; }
[data-theme="dark"] .nav-link.active { color: var(--hb-brand-300, #93b8ed) !important; }

[data-theme="dark"] .form-check-label { color: var(--hb-neutral-300, #cdd2db) !important; }
[data-theme="dark"] .form-label { color: var(--hb-neutral-200, #e3e6ec) !important; }

[data-theme="dark"] .hb-toast { background: var(--hb-neutral-800, #2a3041) !important; border-color: var(--hb-neutral-600, #515a6b) !important; color: var(--hb-neutral-100, #f1f3f6) !important; }

[data-theme="dark"] [style*="background: var(--hb-bg-subtle"],
[data-theme="dark"] [style*="background: var(--hb-neutral-100"],
[data-theme="dark"] [style*="background: #f8f9fb"],
[data-theme="dark"] [style*="background: var(--hb-bg, #fff)"] {
  background: var(--hb-neutral-800, #2a3041) !important;
}

[data-theme="dark"] [style*="color: var(--hb-text, #1a1f2e)"],
[data-theme="dark"] [style*="color: var(--hb-gray-900"] {
  color: var(--hb-neutral-100, #f1f3f6) !important;
}

/* Dark mode: inline style color overrides for common template patterns */
[data-theme="dark"] [style*="color: var(--hb-gray-700"] {
  color: var(--hb-neutral-300, #cdd2db) !important;
}
[data-theme="dark"] [style*="color: var(--hb-primary-600"] {
  color: var(--hb-brand-300, #93b8ed) !important;
}
[data-theme="dark"] [style*="color: var(--hb-success-600"] {
  color: #6ee7b7 !important;
}
[data-theme="dark"] [style*="color: var(--hb-warning-600"] {
  color: #fbbf24 !important;
}
[data-theme="dark"] [style*="color: var(--hb-warning-500"] {
  color: #fbbf24 !important;
}

/* Dark mode: section backgrounds from inline styles */
[data-theme="dark"] [style*="background-color: var(--hb-gray-50"],
[data-theme="dark"] [style*="background-color: var(--bs-body-bg"],
[data-theme="dark"] section[style*="background-color: var(--hb-gray-50"] {
  background-color: var(--hb-neutral-900, #1a1f2e) !important;
}
[data-theme="dark"] [style*="background: linear-gradient(135deg, var(--hb-primary-50"] {
  background: var(--hb-neutral-950, #0f1219) !important;
}
[data-theme="dark"] [style*="background-color: var(--hb-surface"] {
  background-color: var(--hb-neutral-800, #2a3041) !important;
}

/* Dark mode: nav-tabs (dashboard) */
[data-theme="dark"] .nav-tabs {
  border-bottom-color: var(--hb-neutral-700, #3d4556) !important;
}
[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--hb-neutral-400, #9da5b4) !important;
  border-color: transparent !important;
}
[data-theme="dark"] .nav-tabs .nav-link:hover {
  color: var(--hb-neutral-200, #e3e6ec) !important;
  border-color: var(--hb-neutral-600, #515a6b) var(--hb-neutral-600, #515a6b) transparent !important;
}
[data-theme="dark"] .nav-tabs .nav-link.active {
  color: var(--hb-brand-300, #93b8ed) !important;
  background-color: var(--hb-neutral-950, #0f1219) !important;
  border-color: var(--hb-neutral-700, #3d4556) var(--hb-neutral-700, #3d4556) var(--hb-neutral-950, #0f1219) !important;
}

/* Dark mode: bg-opacity badges (green/success on transparent bg) */
[data-theme="dark"] .badge.bg-success.bg-opacity-10 {
  background-color: rgba(16,185,129,0.2) !important;
  color: #6ee7b7 !important;
}
[data-theme="dark"] .badge.bg-danger.bg-opacity-10 {
  background-color: rgba(239,68,68,0.2) !important;
  color: #fca5a5 !important;
}
[data-theme="dark"] .badge.bg-warning.bg-opacity-10 {
  background-color: rgba(245,158,11,0.2) !important;
  color: #fcd34d !important;
}
[data-theme="dark"] .badge.bg-primary.bg-opacity-10 {
  background-color: rgba(59,111,212,0.2) !important;
  color: #93b8ed !important;
}

/* Dark mode: list-group */
[data-theme="dark"] .list-group-item {
  background-color: var(--hb-neutral-900, #1a1f2e) !important;
  color: var(--hb-neutral-200, #e3e6ec) !important;
  border-color: var(--hb-neutral-700, #3d4556) !important;
}
[data-theme="dark"] .list-group-item:hover {
  background-color: var(--hb-neutral-800, #2a3041) !important;
}
[data-theme="dark"] .list-group-item.active {
  background-color: var(--hb-brand-700) !important;
  border-color: var(--hb-brand-700) !important;
}

/* Dark mode: input-group-text */
[data-theme="dark"] .input-group-text {
  background-color: var(--hb-neutral-700, #3d4556) !important;
  color: var(--hb-neutral-300, #cdd2db) !important;
  border-color: var(--hb-neutral-600, #515a6b) !important;
}

/* Dark mode: pagination */
[data-theme="dark"] .page-link {
  background-color: var(--hb-neutral-800, #2a3041) !important;
  color: var(--hb-neutral-300, #cdd2db) !important;
  border-color: var(--hb-neutral-700, #3d4556) !important;
}
[data-theme="dark"] .page-link:hover {
  background-color: var(--hb-neutral-700, #3d4556) !important;
  color: #fff !important;
}
[data-theme="dark"] .page-item.active .page-link {
  background-color: var(--hb-brand-600) !important;
  border-color: var(--hb-brand-600) !important;
  color: #fff !important;
}

/* Dark mode: breadcrumb */
[data-theme="dark"] .breadcrumb-item { color: var(--hb-neutral-400, #9da5b4) !important; }
[data-theme="dark"] .breadcrumb-item.active { color: var(--hb-neutral-200, #e3e6ec) !important; }
[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--hb-neutral-600, #515a6b) !important; }

/* Dark mode: progress bar */
[data-theme="dark"] .progress {
  background-color: var(--hb-neutral-800, #2a3041) !important;
}

/* Dark mode: accordion */
[data-theme="dark"] .accordion-item {
  background-color: var(--hb-neutral-900, #1a1f2e) !important;
  border-color: var(--hb-neutral-700, #3d4556) !important;
}
[data-theme="dark"] .accordion-button {
  background-color: var(--hb-neutral-900, #1a1f2e) !important;
  color: var(--hb-neutral-100, #f1f3f6) !important;
}
[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: var(--hb-neutral-800, #2a3041) !important;
  color: var(--hb-brand-300, #93b8ed) !important;
}

/* Dark mode: selection highlight */
[data-theme="dark"] ::selection {
  background-color: var(--hb-brand-700);
  color: #fff;
}

/* ── 21. Utility ──────────────────────────────────────────────── */

.bg-primary { background-color: var(--hb-brand-600) !important; }
.text-primary { color: var(--hb-brand-600) !important; }
.bg-light { background-color: var(--hb-bg-subtle) !important; }
.bg-dark { background-color: var(--hb-neutral-900) !important; }
.text-body { color: var(--hb-text) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .hb-animate { opacity: 1; transform: none; }
}

/* ── 21. Legacy Variable Bridge ───────────────────────────────── */
/* Mappa le vecchie variabili Bootstrap-custom alle nuove del design system.
   Questo rende TUTTE le pagine esistenti (dashboard, admin, blog, chat, profilo,
   notification-settings, property-create, static) automaticamente coerenti
   col nuovo design system senza dover riscrivere ogni singolo template. */

:root {
  --hb-primary-50:  var(--hb-brand-50);
  --hb-primary-100: var(--hb-brand-100);
  --hb-primary-500: var(--hb-brand-500);
  --hb-primary-600: var(--hb-brand-600);
  --hb-primary-700: var(--hb-brand-700);

  --hb-gray-50:  var(--hb-neutral-50);
  --hb-gray-100: var(--hb-neutral-100);
  --hb-gray-200: var(--hb-neutral-200);
  --hb-gray-300: var(--hb-neutral-300);
  --hb-gray-400: var(--hb-neutral-400);
  --hb-gray-500: var(--hb-neutral-500);
  --hb-gray-700: var(--hb-neutral-700);
  --hb-gray-900: var(--hb-neutral-900);

  --bs-primary:  var(--hb-brand-600);
  --bs-body-font-family: var(--hb-font-body);
  --bs-body-bg: var(--hb-bg);
  --bs-body-color: var(--hb-text);
  --bs-border-radius: var(--hb-radius-md);
  --bs-border-radius-sm: var(--hb-radius-sm);
  --bs-border-radius-lg: var(--hb-radius-lg);
  --bs-box-shadow: var(--hb-shadow-sm);
  --bs-box-shadow-lg: var(--hb-shadow-lg);

  /* Override variabili usate nelle vecchie pagine */
  --hb-surface: var(--hb-bg);
  --hb-border-color: var(--hb-border);
  --hb-transition-base: 200ms;
  --hb-transition-fast: 150ms;
  --hb-z-sticky: 1000;
  --hb-z-modal: 1050;
  --hb-z-toast: 1100;

  /* Colori semantici legacy */
  --hb-success-600: #059669;
  --hb-warning-600: #d97706;
  --hb-error-600: #dc2626;
  --hb-success-50: #ecfdf5;
  --hb-warning-50: #fffbeb;
  --hb-info-50: #eff6ff;
}

[data-theme="dark"] {
  --hb-surface: var(--hb-neutral-900);
  --hb-border-color: var(--hb-neutral-700);
}

/* ── 22. Global enhancements for ALL pages ────────────────────── */

/* Smoother page background transitions */
body {
  font-family: var(--hb-font-body) !important;
}

/* Tutte le sezioni con padding coerente */
section:not(.hb-hero):not(.hb-nav-mobile) {
  /* non sovrascrivere sezioni che hanno padding inline */
}

/* Heading ovunque: usa il font display */
.hb-text-2xl, .hb-text-3xl, .hb-text-4xl,
.hb-font-bold, .hb-font-semibold {
  font-family: var(--hb-font-display) !important;
}

.hb-text-2xl { font-size: var(--hb-text-2xl) !important; }
.hb-text-3xl { font-size: var(--hb-text-3xl) !important; }
.hb-text-4xl { font-size: var(--hb-text-4xl) !important; }
.hb-text-xl  { font-size: var(--hb-text-xl) !important; }
.hb-text-lg  { font-size: var(--hb-text-lg) !important; }
.hb-text-base { font-size: var(--hb-text-base) !important; }
.hb-text-sm  { font-size: var(--hb-text-sm) !important; }
.hb-text-xs  { font-size: var(--hb-text-xs) !important; }

/* Admin panel: coerenza design system */
.hb-admin-sidebar {
  background: var(--hb-neutral-900) !important;
  font-family: var(--hb-font-body);
}

.hb-admin-sidebar .nav-link {
  font-size: var(--hb-text-sm);
  border-radius: var(--hb-radius-sm);
}

/* Blog cards: design system */
.hb-blog-card {
  border-radius: var(--hb-radius-lg) !important;
}

/* Dashboard stat cards */
.hb-stat-card {
  border-radius: var(--hb-radius-lg) !important;
  border: 1px solid var(--hb-border-subtle) !important;
}

/* Notification settings: toggles */
.hb-notif-row {
  border-radius: var(--hb-radius-md);
  border: 1px solid var(--hb-border-subtle);
  padding: var(--hb-sp-4);
  margin-bottom: var(--hb-sp-3);
  transition: background 0.15s;
}

.hb-notif-row:hover {
  background: var(--hb-bg-subtle);
}

/* Chat: message bubbles */
.hb-msg-sent {
  background: var(--hb-brand-600) !important;
  border-radius: var(--hb-radius-lg) var(--hb-radius-lg) var(--hb-radius-sm) var(--hb-radius-lg) !important;
}

.hb-msg-received {
  background: var(--hb-bg-muted) !important;
  border-radius: var(--hb-radius-lg) var(--hb-radius-lg) var(--hb-radius-lg) var(--hb-radius-sm) !important;
}

/* Property wizard steps */
.hb-wizard-step-indicator {
  font-family: var(--hb-font-display);
}

/* Alert overrides */
.alert {
  border-radius: var(--hb-radius-md);
  font-size: var(--hb-text-sm);
  border: none;
}

.alert-danger { background: var(--hb-error-50); color: var(--hb-error-700); }
.alert-success { background: var(--hb-success-50); color: var(--hb-success-700); }

/* Offcanvas overrides */
.offcanvas { border: none; }
.offcanvas-header { border-bottom: 1px solid var(--hb-border); }
.offcanvas-body { padding: var(--hb-sp-4); }

/* Modal overrides */
.modal-content {
  border: none;
  border-radius: var(--hb-radius-xl);
  box-shadow: var(--hb-shadow-xl);
}
.modal-header { border-bottom: 1px solid var(--hb-border); }
.modal-footer { border-top: 1px solid var(--hb-border); }

/* ── 23. Mobile Fixes ────────────────────────────────────────── */

/* Bug fix: header too much margin on mobile */
@media (max-width: 767.98px) {
  .hb-header {
    height: 52px !important;
  }
  .hb-header .navbar {
    height: 52px !important;
  }
  .hb-header .navbar-brand {
    font-size: 1.1rem !important;
  }

  /* Body padding to account for smaller header + bottom nav */
  body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }

  /* Support widget above bottom nav on mobile */
  .hb-support-widget {
    bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Search filters: ensure offcanvas body scrolls */
  .offcanvas-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Search filter form inside desktop sidebar (when visible) — scroll */
  .hb-search-filters {
    max-height: none;
    overflow: visible;
  }
}

/* Tablet breakpoint */
@media (max-width: 991.98px) {
  /* Ensure burger collapsed content scrolls if too tall */
  .navbar-collapse {
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}