/**
 * HomeBid - Application Styles & Typography
 *
 * Integra font Inter (Google Fonts), modular type scale,
 * e stili applicazione globali.
 *
 * Requirements: 57.2, 57.6
 *
 * WCAG 2.1 AA contrast ratio:
 *   - Normal text (< 18px): 4.5:1 minimum
 *   - Large text (>= 18px bold or >= 24px): 3:1 minimum
 *
 * Type scale: 12px - 36px con classi hb-text-*
 */

/* ============================================================
   1. FONT IMPORT - Inter from Google Fonts
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   2. MODULAR TYPE SCALE
   ============================================================ */
.hb-text-xs {
  font-size: 0.75rem;     /* 12px */
  line-height: 1rem;      /* 16px */
}

.hb-text-sm {
  font-size: 0.875rem;    /* 14px */
  line-height: 1.25rem;   /* 20px */
}

.hb-text-base {
  font-size: 1rem;        /* 16px */
  line-height: 1.5rem;    /* 24px */
}

.hb-text-lg {
  font-size: 1.125rem;    /* 18px */
  line-height: 1.75rem;   /* 28px */
}

.hb-text-xl {
  font-size: 1.25rem;     /* 20px */
  line-height: 1.75rem;   /* 28px */
}

.hb-text-2xl {
  font-size: 1.5rem;      /* 24px */
  line-height: 2rem;      /* 32px */
}

.hb-text-3xl {
  font-size: 1.875rem;    /* 30px */
  line-height: 2.25rem;   /* 36px */
}

.hb-text-4xl {
  font-size: 2.25rem;     /* 36px */
  line-height: 2.5rem;    /* 40px */
}

/* ============================================================
   3. FONT WEIGHT UTILITIES
   ============================================================ */
.hb-font-light    { font-weight: 300; }
.hb-font-normal   { font-weight: 400; }
.hb-font-medium   { font-weight: 500; }
.hb-font-semibold { font-weight: 600; }
.hb-font-bold     { font-weight: 700; }

/* ============================================================
   4. WCAG 2.1 AA COMPLIANT TEXT COLORS
   ============================================================
   Light mode:
     --hb-gray-900 (#111827) on white → ~18.4:1 ✓
     --hb-gray-700 (#374151) on white → ~9.7:1  ✓
     --hb-gray-500 (#6b7280) on white → ~5.0:1  ✓ (normal text)
     --hb-primary-600 (#2563eb) on white → ~4.6:1 ✓ (large text / UI)
   Dark mode:
     --hb-gray-900 (#f1f5f9) on #0f172a → ~14.5:1 ✓
     --bs-body-color (#e2e8f0) on #0f172a → ~12.1:1 ✓
*/

.hb-text-primary   { color: var(--hb-gray-900); }
.hb-text-secondary { color: var(--hb-gray-700); }
.hb-text-muted     { color: var(--hb-gray-500); }
.hb-text-accent    { color: var(--hb-primary-600); }
.hb-text-success   { color: var(--hb-success-600); }
.hb-text-warning   { color: var(--hb-warning-600); }
.hb-text-error     { color: var(--hb-error-600); }

/* ============================================================
   5. GLOBAL APPLICATION STYLES
   ============================================================ */

/* Selection color */
::selection {
  background-color: var(--hb-primary-100);
  color: var(--hb-primary-900);
}
[data-theme="dark"] ::selection {
  background-color: var(--hb-primary-800);
  color: var(--hb-primary-100);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--hb-gray-300);
  border-radius: var(--bs-border-radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--hb-gray-400);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--hb-gray-200);
}

/* Focus visible ring for accessibility */
:focus-visible {
  outline: 2px solid var(--hb-primary-500);
  outline-offset: 2px;
}

/* ============================================================
   6. LAYOUT HELPERS
   ============================================================ */

/* SPA content container */
#hb-content {
  min-height: calc(100vh - 64px - 60px); /* header + footer */
}

/* Navigation progress bar */
#hb-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hb-primary-500), var(--hb-primary-400));
  z-index: calc(var(--hb-z-toast) + 1);
  transition: width var(--hb-transition-base);
  pointer-events: none;
}
#hb-progress.active {
  width: 70%;
  transition: width 2s cubic-bezier(0.1, 0.5, 0.3, 1);
}
#hb-progress.done {
  width: 100%;
  transition: width var(--hb-transition-fast);
  opacity: 0;
  transition: width var(--hb-transition-fast), opacity 0.3s 0.1s;
}

/* ============================================================
   7. HOMEBID COMPONENT BASE STYLES
   ============================================================ */

/* Property card */
.hb-property-card {
  border-radius: var(--bs-border-radius-lg);
  transition: transform var(--hb-transition-base), box-shadow var(--hb-transition-base);
  cursor: pointer;
  overflow: hidden;
}
.hb-property-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bs-box-shadow-lg);
}
.hb-card-img {
  transition: transform var(--hb-transition-slow);
}
.hb-property-card:hover .hb-card-img {
  transform: scale(1.05);
}

/* Pulse dot for live auctions */
.hb-pulse-dot {
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  display: inline-block;
  animation: hb-pulse 2s infinite;
}
@keyframes hb-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ============================================================
   8. RESPONSIVE ADJUSTMENTS (Mobile-First)
   Requirements: 60.1, 60.2, 60.4, 60.5, 60.6
   ============================================================ */

/* --- 8a. Responsive grid: 1 col mobile → 2 col tablet → 3 col desktop --- */
.hb-responsive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hb-space-4);
}
@media (min-width: 768px) {
  .hb-responsive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .hb-responsive-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- 8b. Touch targets: minimum 44x44px (Req 60.2) --- */
@media (max-width: 767.98px) {
  .btn,
  .nav-link,
  .dropdown-item,
  .form-select,
  .hb-nav-mobile-item,
  [role="button"],
  a[data-spa-link] {
    min-height: 44px;
    min-width: 44px;
  }
  .btn-sm {
    min-height: 44px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .dropdown-item {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }
  .nav-link {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }
  .form-control,
  .form-select {
    min-height: 44px;
  }
}

/* --- 8c. Body padding for mobile bottom nav (Req 60.4) --- */
@media (max-width: 767.98px) {
  body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
}

/* --- 8d. Mobile type scale adjustments --- */
@media (max-width: 575.98px) {
  .hb-text-4xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  .hb-text-3xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .hb-text-2xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

/* --- 8e. Pull-to-refresh indicator (Req 60.5) --- */
.hb-ptr-container {
  position: relative;
  overflow: visible;
}
.hb-ptr-indicator {
  position: absolute;
  top: -48px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--hb-surface);
  box-shadow: var(--bs-box-shadow);
  opacity: 0;
  transition: opacity var(--hb-transition-fast), transform var(--hb-transition-fast);
  pointer-events: none;
  z-index: 10;
}
.hb-ptr-indicator i {
  font-size: 1.25rem;
  color: var(--hb-primary-600);
  transition: transform var(--hb-transition-fast);
}
.hb-ptr-indicator.visible {
  opacity: 1;
}
.hb-ptr-indicator.refreshing i {
  animation: hb-spin 0.8s linear infinite;
}

/* --- 8f. Responsive card layout helpers --- */
@media (max-width: 575.98px) {
  .hb-property-card .card-body {
    padding: var(--hb-space-3);
  }
}

/* --- 8g. Dashboard stats responsive --- */
@media (max-width: 575.98px) {
  .hb-stat-card {
    padding: var(--hb-space-2) !important;
  }
  .hb-stat-card .hb-text-2xl {
    font-size: 1.25rem;
  }
}

/* --- 8h. Scrollable tabs on mobile --- */
@media (max-width: 767.98px) {
  .hb-dashboard-tabs {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hb-dashboard-tabs::-webkit-scrollbar {
    display: none;
  }
}

/* ============================================================
   9. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  #hb-progress {
    transition: none !important;
  }
  .hb-property-card,
  .hb-card-img {
    transition: none !important;
  }
  .hb-property-card:hover {
    transform: none;
  }
  .hb-property-card:hover .hb-card-img {
    transform: none;
  }
  .hb-pulse-dot {
    animation: none;
  }
}

/* ============================================================
   10. OFFLINE BANNER (Requirement 48.3)
   ============================================================ */
.hb-offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: calc(var(--hb-z-toast) + 2);
  background-color: var(--hb-warning-600);
  color: #fff;
  text-align: center;
  padding: var(--hb-space-2) var(--hb-space-4);
  font-size: 0.875rem;
  font-weight: 500;
  transform: translateY(-100%);
  transition: transform var(--hb-transition-base);
}
.hb-offline-banner--visible {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .hb-offline-banner {
    transition: none !important;
  }
}

/* ============================================================
   11. PWA INSTALL BANNER (Requirement 48.6)
   ============================================================ */
.hb-install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: calc(var(--hb-z-toast) + 2);
  background-color: var(--hb-surface, #fff);
  border-top: 1px solid var(--hb-gray-200);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
  padding: var(--hb-space-3) var(--hb-space-4);
  transform: translateY(100%);
  transition: transform var(--hb-transition-base);
}
.hb-install-banner--visible {
  transform: translateY(0);
}
.hb-install-banner__content {
  display: flex;
  align-items: center;
  gap: var(--hb-space-3);
  max-width: 600px;
  margin: 0 auto;
}
.hb-install-banner__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bs-border-radius);
  background-color: var(--hb-primary-100);
  color: var(--hb-primary-600);
  font-size: 1.25rem;
}
.hb-install-banner__text {
  flex: 1;
  min-width: 0;
}
.hb-install-banner__text strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--hb-gray-900);
}
.hb-install-banner__text span {
  display: block;
  font-size: 0.8125rem;
  color: var(--hb-gray-500);
}
.hb-install-banner__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--hb-space-1);
}
.hb-install-banner__dismiss {
  padding: var(--hb-space-1);
  text-decoration: none;
}
[data-theme="dark"] .hb-install-banner {
  background-color: var(--hb-gray-50);
  border-top-color: var(--hb-gray-200);
}
[data-theme="dark"] .hb-install-banner__icon {
  background-color: var(--hb-primary-800, #1e3a5f);
  color: var(--hb-primary-100);
}

/* ============================================================
   12. SW UPDATE NOTIFICATION (Requirement 48.7)
   ============================================================ */
.hb-update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: calc(var(--hb-z-toast) + 3);
  background-color: var(--hb-primary-600);
  color: #fff;
  padding: var(--hb-space-2) var(--hb-space-4);
  transform: translateY(-100%);
  transition: transform var(--hb-transition-base);
}
.hb-update-banner--visible {
  transform: translateY(0);
}
.hb-update-banner__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hb-space-2);
  font-size: 0.875rem;
  font-weight: 500;
  max-width: 600px;
  margin: 0 auto;
}
.hb-update-banner__dismiss {
  padding: var(--hb-space-1);
  text-decoration: none;
  opacity: 0.8;
}
.hb-update-banner__dismiss:hover {
  opacity: 1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hb-install-banner,
  .hb-update-banner {
    transition: none !important;
  }
}