/* ========================================================================
   PropertyHub - Scout Design System (Page-Specific Scoping)
   Each page has its own scoped CSS with media queries preserved
   ======================================================================== */

/* ========================================================================
   GLOBAL STYLES - Apply to ALL pages
   ======================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--gray-900);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ========================================================================
   SHARED COMPONENTS - Apply to ALL pages
   ======================================================================== */

/* TREC Compliance Footer */
.trec-footer {
  background: var(--gray-50);
  padding: var(--space-12) 32px;
  border-top: 1px solid var(--gray-200);
  margin-top: 80px;
}

.trec-content {
  max-width: var(--container-xl);
  margin: 0 auto;
  text-align: center;
}

.trec-content-text {
  color: var(--gray-500);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  margin-bottom: 8px;
}

.trec-content-text:first-child {
  font-weight: var(--font-weight-semibold);
  color: var(--navy-primary);
  font-size: var(--font-size-base);
}

.trec-content-link {
  color: var(--navy-primary);
  text-decoration: none;
}

.trec-content-link:hover {
  text-decoration: underline;
}

/* ========================================================================
   UNIFIED TYPOGRAPHY SYSTEM
   ======================================================================== */

/* Primary Headings (Hero titles, Page titles) */
h1 {
  font-family: 'Playfair Display', serif;
  font-size: 3.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--navy-primary);
  line-height: 1.1;
  margin-bottom: 24px;
}

/* Section Headings */
h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--navy-primary);
  line-height: 1.2;
  margin-bottom: 16px;
}

/* Card/Component Headings */
h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  color: var(--navy-primary);
  line-height: 1.3;
  margin-bottom: 12px;
}

/* Body Text */
p {
  font-family: 'Inter', sans-serif;
  font-size: var(--font-size-base);
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: 16px;
}

/* Links */
a {
  color: var(--navy-primary);
  text-decoration: none;
  transition: all 0.2s ease;
}

a:hover {
  color: var(--navy-primary);
}

/* Responsive Typography */
@media (max-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }
  
  h2 {
    font-size: 2rem;
  }
  
  h3 {
    font-size: 1.125rem;
  }
}

/* ========================================================================
   UNIFIED LAYOUT & SPACING SYSTEM
   ======================================================================== */

/* Common Section Containers */
.section {
  padding: 80px 0;
}

.container {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

/* Header Component */
.header {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--space-8);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--navy-primary);
  font-family: 'Playfair Display', serif;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xl);
}

.logo-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-dark) 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
  color: var(--white);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

/* Navigation Links */
.nav-link {
  color: var(--navy-primary);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--navy-primary);
}

.nav-link.active {
  color: var(--gold-primary);
  font-weight: var(--font-weight-semibold);
}

/* Button styles defined in design-tokens.css */

/* ========================================================================
   CONSUMER BUTTON OVERRIDES - Gold Gradient for Consumer Pages
   Overrides admin navy buttons on consumer-facing pages
   ======================================================================== */

/* Consumer Primary Button - Gold Gradient */
.page-homepage .btn-primary,
.page-properties .btn-primary,
.page-property-detail .btn-primary,
.page-about .btn-primary,
.page-contact .btn-primary,
.page-booking .btn-primary {
    background: linear-gradient(135deg, #c4a962, #a08d5f);
    color: white;
    border: none;
    padding: 10px 20px;  /* Correct spec: 10px 20px, not 12px 20px */
    font-size: 14px;     /* Correct spec: 14px, not 15px */
    font-weight: 600;
    border-radius: 8px;
    transition: all 200ms ease;
}

.page-homepage .btn-primary:hover,
.page-properties .btn-primary:hover,
.page-property-detail .btn-primary:hover,
.page-about .btn-primary:hover,
.page-contact .btn-primary:hover,
.page-booking .btn-primary:hover {
    background: linear-gradient(135deg, #a08d5f, #8a7850);  /* Darker gold */
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Consumer Secondary Button - Keep as outline */
.page-homepage .btn-secondary,
.page-properties .btn-secondary,
.page-property-detail .btn-secondary,
.page-about .btn-secondary,
.page-contact .btn-secondary,
.page-booking .btn-secondary {
    background: transparent;
    color: #1b3559;  /* Navy text */
    border: 1px solid #1b3559;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 200ms ease;
}

.page-homepage .btn-secondary:hover,
.page-properties .btn-secondary:hover,
.page-property-detail .btn-secondary:hover,
.page-about .btn-secondary:hover,
.page-contact .btn-secondary:hover,
.page-booking .btn-secondary:hover {
    background: #1b3559;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Responsive Layout */
@media (max-width: 768px) {
  .nav {
    padding: 0 20px;
  }
  
  .nav-menu {
    display: none;
  }
  
  .section {
    padding: 60px 0;
  }
}


/* ========================================================================
/* ========================================================================
   HOMEPAGE PAGE - Scoped to .page-homepage
   100% Design Token Compliant - No Hardcoded Values
   ======================================================================== */

/* Base Page Styles */
body.page-homepage {
  font-family: var(--font-family-secondary);
  color: var(--gray-900);
  background: var(--gray-50);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
}

/* ========================================================================
   HEADER & NAVIGATION
   ======================================================================== */

.page-homepage .header {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: var(--z-index-sticky);
}

.page-homepage .nav {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--space-8);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-homepage .logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--navy-primary);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xl);
}

.page-homepage .logo-icon {
  width: var(--space-8);
  height: var(--space-8);
  background: var(--navy-primary);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
  color: var(--white);
}

/* Navigation uses global .nav-menu and .nav-link classes from above */

/* ========================================================================
   HERO SECTION
   ======================================================================== */

.page-homepage .hero {
  background: var(--white);
  padding: var(--space-20) 0;
  position: relative;
}

.page-homepage .hero-container {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

.page-homepage .hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
  align-items: center;
}

.page-homepage .hero-text-heading {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  color: var(--navy-primary);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-6);
}

.page-homepage .hero-text-text {
  font-size: var(--font-size-xl);
  color: var(--gray-600);
  margin-bottom: var(--space-8);
  line-height: var(--line-height-relaxed);
}

.page-homepage .hero-actions {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.page-homepage .hero-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

/* ========================================================================
   PROPERTY CARDS
   ======================================================================== */

.page-homepage .property-grid {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: var(--space-16) var(--space-8);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}

.page-homepage .property-card {
  background: var(--white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
  border: 1px solid var(--gray-200);
  position: relative;
}

.page-homepage .property-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--navy-primary);
}

.page-homepage .property-badges {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-index-dropdown);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.page-homepage .property-image {
  width: 100%;
  height: 200px;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.page-homepage .property-image-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

.page-homepage .property-image:hover img {
  transform: scale(1.05);
}

/* Image hover indicator */
.page-homepage .property-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.2s ease-in-out;
  pointer-events: none;
}

.page-homepage .property-image:hover::after {
  background: rgba(0, 0, 0, 0.3);
}

/* Magnifying glass icon handled by property-image-clickable class in scout-components.css */

.page-homepage .property-details {
  padding: var(--card-padding-base);
}

.page-homepage .property-address {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--navy-primary);
  margin-bottom: var(--space-2);
}

.page-homepage .property-price {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--navy-primary);
  margin-bottom: var(--space-3);
  font-family: var(--font-family-primary);
}

.page-homepage .property-specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--gray-600);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--gray-200);
}

.page-homepage .property-specs-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.page-homepage .property-availability {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  margin-bottom: var(--space-4);
}

/* ========================================================================
   FEATURES SECTION
   ======================================================================== */

.page-homepage .features {
  padding: var(--space-24) 0;
  background: var(--white);
}

.page-homepage .features-container {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

.page-homepage .features-header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.page-homepage .features-header-heading {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--navy-primary);
  margin-bottom: var(--space-4);
}

.page-homepage .features-header-text {
  font-size: var(--font-size-lg);
  color: var(--gray-600);
  max-width: 600px;
  margin: 0 auto;
}

.page-homepage .features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
}

.page-homepage .feature-card {
  text-align: center;
  padding: var(--space-10) var(--space-6);
  border-radius: var(--radius-2xl);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  transition: all 0.2s ease-in-out;
}

.page-homepage .feature-card:hover {
  transform: translateY(-4px);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.page-homepage .feature-icon {
  width: var(--space-16);
  height: var(--space-16);
  background: var(--gold-primary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-2xl);
  margin: 0 auto var(--space-6);
  color: var(--white);
}

.page-homepage .feature-card-heading {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--navy-primary);
  margin-bottom: var(--space-4);
}

.page-homepage .feature-card-text {
  color: var(--gray-600);
  line-height: var(--line-height-relaxed);
}

/* ========================================================================
   FOOTER
   ======================================================================== */

.page-homepage .trec-footer {
  background: var(--gray-50);
  padding: var(--space-12) var(--space-8);
  border-top: 1px solid var(--gray-200);
  margin-top: var(--space-20);
}

.page-homepage .trec-content {
  max-width: var(--container-xl);
  margin: 0 auto;
  text-align: center;
}

.page-homepage .trec-content-text {
  color: var(--gray-600);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-2);
}

.page-homepage .trec-content-text:first-child {
  font-weight: var(--font-weight-semibold);
  color: var(--navy-primary);
  font-size: var(--font-size-base);
}

/* ========================================================================
   RESPONSIVE - MOBILE
   ======================================================================== */

@media (max-width: 768px) {
  .page-homepage .nav {
    padding: 0 var(--space-5);
  }

  .page-homepage .nav-menu {
    display: none;
  }

  .page-homepage .hero {
    padding: var(--space-12) 0;
  }

  .page-homepage .hero-container {
    padding: 0 var(--space-5);
  }

  .page-homepage .hero-content {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    text-align: center;
  }

  .page-homepage .hero-text-heading {
    font-size: var(--font-size-4xl);
  }

  .page-homepage .hero-text-text {
    font-size: var(--font-size-lg);
  }

  .page-homepage .hero-actions {
    justify-content: center;
    flex-wrap: wrap;
  }

  .page-homepage .property-grid {
    grid-template-columns: 1fr;
    padding: var(--space-12) var(--space-5);
    gap: var(--space-6);
  }

  .page-homepage .features {
    padding: var(--space-16) 0;
  }

  .page-homepage .features-container {
    padding: 0 var(--space-5);
  }

  .page-homepage .features-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .page-homepage .features-header-heading {
    font-size: var(--font-size-3xl);
  }
}

   ABOUT PAGE - Scoped to .page-about
   ======================================================================== */

body.page-about {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--gray-900);
  background: var(--gray-50);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.page-about .header {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 50;
}

.page-about .nav {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--space-8);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-about .logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--navy-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xl);
}

.page-about .logo-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-dark) 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
  color: var(--white);
}

/* Navigation uses global .nav-menu and .nav-link classes */

.page-about .hero {
  background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-dark) 100%);
  color: var(--white);
  padding: var(--space-16) 0;
  text-align: center;
}

.page-about .hero-content {
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

.page-about .hero-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-6);
}

.page-about .hero-subtitle {
  font-size: var(--font-size-xl);
  line-height: 1.6;
  opacity: 0.9;
  max-width: 700px;
  margin: 0 auto;
}

.page-about .main-content {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: var(--space-8) var(--space-8);
}

.page-about .stats-section {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-sm);
}

.page-about .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-6);
}

.page-about .stat-item {
  text-align: center;
  padding: var(--space-6);
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  transition: all 0.3s ease;
}

.page-about .stat-item:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  background: var(--gold-light);
}

.page-about .stat-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-dark) 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--font-size-2xl);
  margin: 0 auto var(--space-4);
}

.page-about .stat-value {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--navy-primary);
  margin-bottom: var(--space-2);
}

.page-about .stat-label {
  color: var(--gray-600);
  font-weight: var(--font-weight-medium);
}

.page-about .team-section {
  margin-bottom: var(--space-8);
}

.page-about .section-header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.page-about .section-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--navy-primary);
  margin-bottom: var(--space-4);
}

.page-about .section-subtitle {
  color: var(--gray-500);
  font-size: var(--font-size-lg);
  max-width: 600px;
  margin: 0 auto;
}

.page-about .team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
}

.page-about .team-member {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.page-about .team-member:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-2xl);
  border-color: var(--gold-primary);
}

.page-about .member-photo {
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-light) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-6);
  color: var(--white);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
}

.page-about .member-name {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--navy-primary);
  margin-bottom: var(--space-2);
}

.page-about .member-title {
  color: var(--gold-primary);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-4);
}

.page-about .member-bio {
  color: var(--gray-600);
  margin-bottom: var(--space-4);
  line-height: 1.6;
}

.page-about .member-credentials {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.page-about .credential-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

.page-about .credential-item:last-child {
  margin-bottom: 0;
}

.page-about .credential-badge {
  width: 16px;
  height: 16px;
  background: var(--success);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--font-size-xs);
}

.page-about .values-section {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-sm);
}

.page-about .values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-6);
}

.page-about .value-item {
  text-align: center;
  padding: var(--space-6);
}

.page-about .value-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-dark) 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--font-size-2xl);
  margin: 0 auto var(--space-4);
}

.page-about .value-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--navy-primary);
  margin-bottom: var(--space-3);
}

.page-about .value-description {
  color: var(--gray-600);
  line-height: 1.6;
}

.page-about .certifications {
  background: var(--navy-primary);
  color: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
}

.page-about .certifications-heading {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-6);
}

.page-about .cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-6);
}

.page-about .cert-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.page-about .cert-logo {
  width: 48px;
  height: 48px;
  background: var(--gold-primary);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-3);
  color: var(--white);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.page-about .cert-name {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-1);
}

.page-about .cert-number {
  font-size: var(--font-size-sm);
  opacity: 0.8);
}

@media (max-width: 1024px) {
.page-about .main-content {
  padding: var(--space-6) var(--space-4);
}

.page-about .hero-content {
  padding: 0 var(--space-4);
}

}


/* ========================================================================
   ADMIN-LOGIN PAGE - Scoped to .page-login
   ======================================================================== */

body.page-login {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--gray-900);
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.page-login .login-container {
  width: 100%;
  max-width: 420px;
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-12) 40px;
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--gray-100);
  position: relative;
}

.page-login .login-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-dark) 100%);
  border-radius: var(--radius-2xl) 20px 0 0;
}

.page-login .login-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-login .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--navy-primary);
  font-family: 'Playfair Display', serif;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-2xl);
  margin-bottom: 24px;
  text-decoration: none;
}

.page-login .logo-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-dark) 100%);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  color: var(--white);
}

.page-login .login-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--navy-primary);
  margin-bottom: 8px;
}

.page-login .login-subtitle {
  color: var(--gray-500);
  font-size: var(--font-size-base);
}

.page-login .login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.page-login .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.page-login .form-label {
  font-weight: var(--font-weight-semibold);
  color: var(--gray-900);
  font-size: var(--font-size-sm);
}

.page-login .form-input {
  padding: var(--space-4);
  border: 2px solid var(--gray-100);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-base);
  transition: all 0.2s ease;
  background: var(--white);
  color: var(--gray-900);
}

.page-login .form-input:focus {
  outline: none;
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 4px rgba(194, 168, 117, 0.1);
}

.page-login .form-input::placeholder {
  color: var(--gray-400);
}

.page-login .password-field {
  position: relative;
}

.page-login .password-toggle {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-500);
  cursor: pointer;
  font-size: var(--font-size-base);
  transition: all 0.2s ease;
}

.page-login .password-toggle:hover {
  color: var(--navy-primary);
}

.page-login .form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-sm);
}

.page-login .remember-me {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.page-login .remember-me-input {
  width: 16px;
  height: 16px;
  accent-color: var(--gold-primary);
}

.page-login .forgot-password {
  color: var(--gold-primary);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: all 0.2s ease;
}

.page-login .forgot-password:hover {
  color: var(--gold-dark);
  text-decoration: underline;
}

.page-login .login-btn {
  background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-dark) 100%);
  color: var(--white);
  padding: 18px 24px;
  border: 1px solid var(--gold-dark);
  border-radius: var(--radius-xl);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.page-login .login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 25px rgba(194, 168, 117, 0.25);
}

.page-login .login-btn:active {
  transform: translateY(0);
}

.page-login .login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.page-login .security-notice {
  background: rgba(43, 75, 115, 0.05);
  border: 1px solid rgba(43, 75, 115, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-top: 24px;
  text-align: center;
}

.page-login .security-notice-heading {
  color: var(--navy-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.page-login .security-notice-text {
  color: var(--gray-500);
  font-size: var(--font-size-xs);
  line-height: 1.4;
}

.page-login .login-footer {
  text-align: center;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-100);
}

.page-login .login-footer-text {
  color: var(--gray-500);
  font-size: var(--font-size-xs);
  line-height: 1.4;
}

.page-login .login-footer-link {
  color: var(--gold-primary);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}

.page-login .login-footer-link:hover {
  text-decoration: underline;
}

.page-login .error-message {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-lg);
  padding: var(--space-3) 16px;
  font-size: var(--font-size-sm);
  text-align: center;
  margin-bottom: 24px;
  display: none;
}

.page-login .error-message.show {
  display: block;
}

.page-login .success-message {
  background: rgba(5, 150, 105, 0.1);
  color: var(--success);
  border: 1px solid rgba(5, 150, 105, 0.2);
  border-radius: var(--radius-lg);
  padding: var(--space-3) 16px;
  font-size: var(--font-size-sm);
  text-align: center;
  margin-bottom: 24px;
  display: none;
}

.page-login .success-message.show {
  display: block;
}

.page-login .login-btn.loading {
  position: relative;
  color: transparent;
}

.page-login .login-btn.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid var(--white);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.page-login-to {
  transform: translate(-50%, -50%) rotate(360deg);
}

@media (max-width: 767px) {
.page-login .login-container {
  padding: var(--space-8) 24px;
  margin: 0 16px;
}

.page-login .login-title {
  font-size: var(--font-size-2xl);
}

.page-login .logo {
  font-size: var(--font-size-xl);
}

.page-login .logo-icon {
  width: 40px;
  height: 40px;
  font-size: var(--font-size-lg);
}

}


/* ========================================================================
   ANALYTICS PAGE - Scoped to .page-analytics
   ======================================================================== */

body.page-analytics {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--gray-900);
  background: var(--gray-50);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.page-analytics .analytics-layout {
  display: flex;
  min-height: 100vh;
}

.page-analytics .sidebar {
  width: 280px;
  background: var(--white);
  border-right: 1px solid var(--gray-200);
  flex-shrink: 0;
}

.page-analytics .sidebar-header {
  padding: var(--space-6);
  border-bottom: 1px solid var(--gray-100);
}

.page-analytics .logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--navy-primary);
  font-family: 'Playfair Display', serif;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xl);
  text-decoration: none;
}

.page-analytics .logo-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-dark) 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
  color: var(--white);
}

.page-analytics .nav-menu {
  padding: var(--space-6) 0;
}

.page-analytics .nav-group {
  margin-bottom: 32px;
}

.page-analytics .nav-group-title {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-500);
  margin-bottom: 12px;
  padding: 0 24px;
}

.page-analytics .nav-item {
  display: block;
  padding: var(--space-3) 24px;
  color: var(--gray-500);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.page-analytics .nav-item:hover {
  background: var(--gray-50);
  color: var(--navy-primary);
}

.page-analytics .nav-item.active {
  background: rgba(194, 168, 117, 0.1);
  color: var(--navy-primary);
  border-right: 3px solid var(--gold-primary);
}

.page-analytics .nav-icon {
  width: 20px;
  text-align: center;
}

.page-analytics .main-content {
  flex: 1;
  overflow: hidden;
}

.page-analytics .header {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: 0 var(--space-8);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-analytics .page-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--navy-primary);
}

.page-analytics .date-range {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.page-analytics .date-select {
  padding: var(--space-2) 16px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--gray-900);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.page-analytics .refresh-btn {
  background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-dark) 100%);
  color: var(--white);
  padding: var(--space-2) 16px;
  border: 1px solid var(--gold-dark);
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all 0.3s ease;
}

.page-analytics .refresh-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(194, 168, 117, 0.25);
}

.page-analytics .dashboard-content {
  padding: var(--space-8);
  height: calc(100vh - 72px);
  overflow-y: auto;
}

.page-analytics .executive-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-bottom: 32px;
}

.page-analytics .executive-kpi {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: 28px 24px;
  border: 1px solid var(--gray-100);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.page-analytics .executive-kpi:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.page-analytics .executive-kpi::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-dark) 100%);
}

.page-analytics .kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.page-analytics .kpi-title {
  font-size: var(--font-size-sm);
  color: var(--gray-500);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.page-analytics .kpi-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
  color: var(--white);
}

.page-analytics .kpi-icon.revenue {
  background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-dark) 100%);
}

.page-analytics .kpi-icon.occupancy {
  background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-dark) 100%);
}

.page-analytics .kpi-icon.bookings {
  background: linear-gradient(135deg, var(--success) 0%, #047857 100%);
}

.page-analytics .kpi-icon.conversion {
  background: linear-gradient(135deg, #7C3AED 0%, var(--navy-primary) 100%);
}

.page-analytics .kpi-value {
  /* Make KPI values animated counters */
            display: inline-block;
  font-size: 2.25rem;
  font-weight: var(--font-weight-bold);
  color: var(--navy-primary);
  font-family: 'Playfair Display', serif;
  margin-bottom: 8px;
  line-height: 1;
}

.page-analytics .kpi-change {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.page-analytics .kpi-change.positive {
  color: var(--success);
}

.page-analytics .kpi-change.negative {
  color: var(--error);
}

.page-analytics .kpi-period {
  color: var(--gray-400);
  font-size: 11px;
  margin-top: 4px;
}

.page-analytics .charts-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-6);
  margin-bottom: 32px;
}

.page-analytics .chart-card {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  border: 1px solid var(--gray-100);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.page-analytics .chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.page-analytics .chart-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--navy-primary);
}

.page-analytics .chart-options {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.page-analytics .chart-period {
  color: var(--gray-500);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.page-analytics .chart-export {
  color: var(--gold-primary);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.page-analytics .chart-export:hover {
  background: rgba(194, 168, 117, 0.1);
}

.page-analytics .chart-container {
  height: 320px;
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-200) 100%);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  font-size: var(--font-size-5xl);
  position: relative;
}

.page-analytics .chart-container.small {
  height: 240px;
}

.page-analytics .chart-overlay {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--gray-500);
}

.page-analytics .table-section {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  border: 1px solid var(--gray-100);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 32px;
}

.page-analytics .table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.page-analytics .section-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--navy-primary);
}

.page-analytics .performance-table {
  width: 100%;
  border-collapse: collapse;
}

.page-analytics .performance-table-th {
  text-align: left;
  padding: var(--space-4) 12px;
  border-bottom: 2px solid var(--gray-100);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-900);
  font-size: var(--font-size-sm);
}

.page-analytics .performance-table-td {
  padding: var(--space-4) 12px;
  border-bottom: 1px solid var(--gray-100);
  font-size: var(--font-size-sm);
}

.page-analytics .performance-table-tr:hover {
  background: var(--gray-50);
}

.page-analytics .property-name {
  font-weight: var(--font-weight-semibold);
  color: var(--navy-primary);
}

.page-analytics .metric-value {
  font-weight: var(--font-weight-bold);
  color: var(--gold-primary);
  font-family: 'Playfair Display', serif;
}

.page-analytics .trend-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.page-analytics .trend-indicator.up {
  color: var(--success);
}

.page-analytics .trend-indicator.down {
  color: var(--error);
}

.page-analytics .trend-indicator.stable {
  color: var(--gray-500);
}

.page-analytics .bottom-analytics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: 32px;
}

@media (max-width: var(--container-lg)) {
.page-analytics .sidebar {
  width: 240px;
}

.page-analytics .dashboard-content {
  padding: var(--space-6);
}

.page-analytics .executive-kpis {
  grid-template-columns: repeat(2, 1fr);
}

.page-analytics .charts-section {
  grid-template-columns: 1fr;
}

.page-analytics .bottom-analytics {
  grid-template-columns: 1fr;
}

}

@media (max-width: 768px) {
.page-analytics .analytics-layout {
  flex-direction: column;
}

.page-analytics .sidebar {
  width: 100%;
  height: auto;
}

.page-analytics .nav-menu {
  padding: 0;
}

.page-analytics .nav-group {
  margin-bottom: 16px;
}

.page-analytics .dashboard-content {
  height: auto;
  padding: var(--space-5);
}

.page-analytics .executive-kpis {
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.page-analytics .header {
  padding: 0 20px;
  height: 60px;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  height: auto;
  padding: var(--space-4) 20px;
}

.page-analytics .page-title {
  font-size: var(--font-size-2xl);
}

.page-analytics .date-range {
  justify-content: center;
}

.page-analytics .trec-footer {
  background: var(--gray-50);
  padding: var(--space-12) 32px;
  border-top: 1px solid var(--gray-200);
  margin-top: 80px;
}

.page-analytics .trec-content {
  max-width: var(--container-xl);
  margin: 0 auto;
  text-align: center;
}

.page-analytics .trec-content-text {
  color: var(--gray-500);
  font-size: var(--font-size-sm);
  line-height: 1.8;
  margin-bottom: var(--space-2);
}

.page-analytics .trec-content-text:last-child {
  margin-bottom: 0;
}

}
/* ============================================================================
   PHASE 1 UX ENHANCEMENTS - Scout CSS Additions
   Add these to scout-components.css
   ============================================================================ */

/* Property Status Badges */
.property-badges {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    right: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    z-index: 10;
}

.property-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
}

.property-badge-new {
    background: linear-gradient(135deg, #51cf66 0%, #37b24d 100%);
}

.property-badge-popular {
    background: linear-gradient(135deg, #4c6ef5 0%, #364fc7 100%);
}

.property-badge-hot {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    animation: pulse-badge 2s ease-in-out infinite;
}

.property-badge-available {
    background: linear-gradient(135deg, rgba(27, 54, 93, 0.95) 0%, rgba(27, 54, 93, 0.85) 100%);
}

@keyframes pulse-badge {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

/* Availability Preview */
.property-availability {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    margin-top: var(--space-3);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
    border-left: 3px solid var(--gold-primary);
    border-radius: var(--radius-md);
    color: var(--gray-700);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

/* Enhanced CTA Button */
.btn-book {
    padding: var(--space-4) var(--space-8);
    font-size: 1.125rem;
    font-weight: var(--font-weight-bold);
    box-shadow: 0 4px 12px rgba(27, 54, 93, 0.2);
    transition: all 0.3s ease;
    margin-top: var(--space-4);
    width: 100%;
}

.btn-book:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(27, 54, 93, 0.3);
}

/* Property Card Enhancements */
.page-homepage .property-card {
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-homepage .property-card:hover {
    border: 1px solid var(--navy-primary);
}

.page-homepage .property-card:active {
    border: 1px solid var(--navy-primary);
}

/* Property Image Container */
.page-homepage .property-image {
    position: relative;
    overflow: hidden;
}

.page-homepage .property-image-image {
    transition: transform 0.5s ease;
}

.page-homepage .property-card:hover .property-image-image {
    transform: scale(1.05);
}

/* Property Price Enhancement */
.page-homepage .property-price {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--navy-primary);
    margin-bottom: var(--space-3);
    margin-top: var(--space-2);
}

/* Property Address Enhancement */
.page-homepage .property-address {
    font-family: var(--font-serif);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--navy-primary);
    margin-bottom: var(--space-2);
}

/* Property Specs Enhancement */
.page-homepage .property-specs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    color: var(--gray-600);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--gray-200);
}

/* Hero Section Enhancement */
.page-homepage .hero {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 250, 250, 0.95) 100%);
    padding: var(--space-20) 0 var(--space-16) 0;
}

.page-homepage .hero-text-heading {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: var(--space-6);
}

.page-homepage .hero-text-text {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: var(--space-8);
    max-width: 600px;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .property-badges {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .property-badge {
        font-size: 0.7rem;
        padding: var(--space-1) var(--space-2);
    }
    
    .btn-book {
        padding: var(--space-3) var(--space-6);
        font-size: 1rem;
    }
    
    .page-homepage .hero-text-heading {
        font-size: 2.5rem;
    }
    
    .page-homepage .hero-text-text {
        font-size: 1.125rem;
    }
    
    .property-availability {
        font-size: 0.8rem;
        padding: var(--space-2);
    }
}

/* Touch Target Enhancement for Mobile */
@media (max-width: 768px) {
    .page-homepage .property-card {
        min-height: 48px; /* Minimum touch target */
    }
    
    .btn-book {
        min-height: 48px; /* Minimum touch target */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .page-homepage .nav-link {
        padding: var(--space-3) var(--space-4);
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* Loading State (Optional - for future use) */
.property-card.loading {
    opacity: 0.6;
    pointer-events: none;
}

.property-card.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* ========================================
   BOOKING WIZARD ENHANCEMENTS
   Add to /opt/propertyhub/web/static/css/scout-components.css
   ======================================== */

/* Pre-Qualification Step */
.prequalification-card {
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    max-width: 800px;
    margin: 0 auto;
}

.prequalification-instructions {
    text-align: center;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--color-gray-100);
}

.prequalification-requirements {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.requirement-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    min-height: 80px;
}

.requirement-item:hover {
    border-color: var(--color-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.requirement-item.checked {
    border-color: var(--color-gold);
    background: linear-gradient(135deg, var(--color-gold-light, #fff9e6) 0%, #ffffff 100%);
}

.requirement-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.requirement-checkmark {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 2px solid var(--color-gray-400);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    transition: all 0.3s ease;
}

.requirement-checkmark svg {
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    color: white;
}

.requirement-item.checked .requirement-checkmark {
    background: var(--color-gold);
    border-color: var(--color-gold);
}

.requirement-item.checked .requirement-checkmark svg {
    opacity: 1;
    transform: scale(1);
}

.requirement-checkmark-label {
    color: white;
    font-size: 20px;
    font-weight: bold;
    opacity: 0;
    transform: scale(0) rotate(-45deg);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.requirement-item.checked .requirement-checkmark-label {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.requirement-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.requirement-text {
    flex: 1;
}

.requirement-text-strong {
    display: block;
    color: var(--color-navy);
    font-size: 1.05em;
    margin-bottom: 4px;
}

.requirement-text-text {
    margin: 0;
    color: var(--color-gray-600);
    font-size: 0.9em;
}

.prequalification-note {
    background: var(--color-gray-50);
    border-left: 4px solid var(--color-gold);
    padding: var(--space-4);
    border-radius: var(--radius-md);
}

/* Enhanced Form Sections */
.form-section {
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.form-section:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.form-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-gray-100);
}

.form-section-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-gold-light, #fff9e6) 0%, #fffbf0 100%);
    border-radius: var(--radius-md);
    border: 2px solid var(--color-gold);
}

.form-section-title {
    margin: 0;
    color: var(--color-navy);
    font-size: 1.15em;
    font-weight: 600;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.input-with-icon {
    position: relative;
}

.input-icon {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    pointer-events: none;
    z-index: 2;
    transition: transform 0.2s ease;
}

.input-icon.textarea-icon {
    top: var(--space-4);
    transform: none;
}

.input-with-icon .form-input,
.input-with-icon .form-textarea {
    padding-left: calc(var(--space-4) * 2 + 24px);
}

.form-input:focus ~ .input-icon {
    transform: translateY(-50%) scale(1.1);
}

.form-textarea:focus ~ .input-icon.textarea-icon {
    transform: scale(1.1);
}

/* Enhanced Communication Notice */
.communication-notice {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-6);
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
    border: 2px solid var(--gold-primary);
    border-radius: var(--radius-lg);
    margin: var(--space-6) 0;
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.1);
}

.notice-icon-wrapper {
    flex-shrink: 0;
}

.notice-icon {
    font-size: 32px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.notice-content {
    flex: 1;
}

.notice-title {
    font-weight: 700;
    color: var(--color-navy);
    margin: 0 0 8px 0;
    font-size: 1.05em;
}

.notice-text {
    margin: 0;
    color: #1e40af;
    font-size: 0.95em;
    line-height: 1.6;
}

/* Custom Checkboxes */
.consent-section {
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
}

.custom-checkbox-group {
    margin-bottom: var(--space-4);
}

.custom-checkbox-group:last-child {
    margin-bottom: 0;
}

.custom-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.custom-checkbox:hover {
    background: white;
}

.custom-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 24px;
    height: 24px;
    margin: 0;
    cursor: pointer;
}

.checkbox-box {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-gray-400);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 2px;
}

.checkbox-check {
    color: white;
    font-size: 16px;
    font-weight: bold;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

.custom-checkbox input[type="checkbox"]:checked + .checkbox-box {
    background: var(--color-gold);
    border-color: var(--color-gold);
    transform: rotate(5deg);
}

.custom-checkbox input[type="checkbox"]:checked + .checkbox-box .checkbox-check {
    opacity: 1;
    transform: scale(1);
}

.checkbox-label {
    flex: 1;
    color: var(--color-gray-700);
    font-size: 0.95em;
    line-height: 1.6;
}

.checkbox-label-strong {
    color: var(--color-navy);
}

.checkbox-label-link {
    color: var(--color-gold);
    text-decoration: underline;
    font-weight: 600;
}

.checkbox-label-link:hover {
    color: #c9a647;
}

.required-checkbox {
    border: 2px solid var(--color-gold);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    background: linear-gradient(135deg, #fff9e6 0%, #ffffff 100%);
}

.required-checkbox .custom-checkbox {
    padding: 0;
}

.required-checkbox .custom-checkbox:hover {
    background: transparent;
}

/* CAPTCHA Slider */
.captcha-slider {
    background: white;
    border: 2px solid var(--gold-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-top: var(--space-6);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
}

.slider-container {
    position: relative;
    width: 100%;
    height: 60px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 2px solid var(--gold-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    user-select: none;
}

.slider-track {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.slider-container.completed .slider-track {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.slider-thumb {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-dark) 100%);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
    transition: all 0.3s ease;
    z-index: 10;
}

.slider-thumb:active {
    cursor: grabbing;
    transform: translateY(-50%) scale(1.05);
}

.slider-container.completed .slider-thumb {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.slider-arrow {
    color: white;
    font-size: 24px;
    font-weight: bold;
    pointer-events: none;
}

.slider-container.completed .slider-arrow::before {
    content: "✓";
}

.slider-text {
    color: #1e40af;
    font-weight: 600;
    font-size: 16px;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.slider-container.completed .slider-text {
    color: white;
    opacity: 0.9;
}

/* Availability Preview */
.availability-preview {
    background: linear-gradient(135deg, var(--color-gold-light, #fff9e6) 0%, #fffbf0 100%);
    border-left: 4px solid var(--color-gold);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-top: var(--space-4);
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .slider-container {
        height: 64px;
    }
    
    .slider-thumb {
        width: 56px;
        height: 56px;
    }
    
    .requirement-item {
        min-height: 72px;
    }
}

/* Booking Wizard Components */
.requirement-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    min-height: 80px;
}

.requirement-item:hover {
    border-color: var(--gold-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.requirement-item.checked {
    border-color: var(--gold-primary);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(255, 255, 255, 1) 100%);
}

.requirement-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.requirement-checkmark {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 2px solid var(--gray-400);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    transition: all 0.3s ease;
}

.requirement-checkmark svg {
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    color: white;
}

.requirement-item.checked .requirement-checkmark {
    background: var(--gold-primary);
    border-color: var(--gold-primary);
}

.requirement-item.checked .requirement-checkmark svg {
    opacity: 1;
    transform: scale(1);
}

.requirement-checkmark-label {
    color: white;
    font-size: 20px;
    font-weight: bold;
    opacity: 0;
    transform: scale(0) rotate(-45deg);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.requirement-item.checked .requirement-checkmark-label {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.slider-container {
    position: relative;
    width: 100%;
    height: 60px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 2px solid var(--gold-primary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    user-select: none;
}

.slider-track {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.slider-container.completed .slider-track {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.slider-thumb {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-dark) 100%);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
    transition: all 0.3s ease;
    z-index: 10;
}

.slider-thumb:active {
    cursor: grabbing;
    transform: translateY(-50%) scale(1.05);
}

.slider-container.completed .slider-thumb {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.slider-arrow {
    color: white;
    font-size: 24px;
    font-weight: bold;
    pointer-events: none;
}

.slider-container.completed .slider-arrow::before {
    content: "✓";
}

.slider-text {
    color: #1e40af;
    font-weight: 600;
    font-size: 16px;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.slider-container.completed .slider-text {
    color: white;
    opacity: 0.9;
}

@media (max-width: 768px) {
    .slider-container {
        height: 64px;
    }
    
    .slider-thumb {
        width: 56px;
        height: 56px;
    }
    
    .requirement-item {
        min-height: 72px;
    }
}

/* ============================================================================
   BOOKING WIZARD - Premium Polish (Phase 2)
   ============================================================================ */

/* Enhanced requirement boxes */
.requirement-item {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    background: white;
}

.requirement-item:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.requirement-item .text-4xl {
    filter: grayscale(0.3);
    transition: filter 0.3s ease;
}

.requirement-item.checked .text-4xl {
    filter: grayscale(0);
}

/* Availability preview animation */
.property-availability {
    animation: fadeIn 0.5s ease;
}

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

/* Premium button interactions */
.page-booking .btn-primary {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-booking .btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}

.page-booking .btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

/* Step transitions */
.wizard-step {
    animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Active step indicator pulse */
.step-circle {
    transition: all 0.3s ease;
}

.step.active .step-circle {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(212, 175, 55, 0);
    }
}

/* Calendar premium interactions */
.calendar-date:hover:not(.disabled):not(.empty) {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.calendar-date {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Time slot premium interactions */
.time-slot:hover:not(:disabled) {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.time-slot {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Form input premium interactions */
.form-input:focus,
.form-textarea:focus {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
}

.form-input,
.form-textarea {
    transition: all 0.3s ease;
}

/* Card hover effects */
.page-booking .card {
    transition: all 0.3s ease;
}

.page-booking .card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Mobile touch targets */
@media (min-width: 768px) {
    .requirement-item {
        min-height: 88px;
    }
    
    .page-booking .btn-primary {
        min-height: 52px;
    }
    
    .time-slot {
        min-height: 64px;
    }
    
    .calendar-date {
        min-height: 52px;
    }
}

@media (max-width: 767px) {
    .requirement-item {
        min-height: 80px;
        padding: var(--space-4);
    }
    
    .page-booking .btn-primary,
    .page-booking .btn-secondary {
        min-height: 48px;
        font-size: 16px;
    }
    
    .time-slot {
        min-height: 60px;
    }
}


/* ============================================================================
   BOOKING WIZARD - Visual Polish Improvements
   ============================================================================ */

/* Improved CAPTCHA Slider */
.slider-container {
    position: relative;
    width: 100%;
    height: 64px !important;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid var(--gold-primary);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.slider-track {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.1) 100%);
    border-radius: var(--radius-xl);
    transition: all 0.3s ease;
}

.slider-container.completed .slider-track {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.slider-thumb {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 56px !important;
    height: 56px !important;
    background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-dark) 100%);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
    transition: all 0.3s ease;
    z-index: 10;
}

.slider-thumb:active {
    cursor: grabbing;
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 6px 16px rgba(212, 175, 55, 0.5);
}

.slider-container.completed .slider-thumb {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.slider-arrow {
    color: white;
    font-size: 24px;
    font-weight: bold;
    pointer-events: none;
}

.slider-container.completed .slider-arrow::before {
    content: "✓";
}

.slider-text {
    color: var(--navy-primary);
    font-weight: 600;
    font-size: 16px;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.slider-container.completed .slider-text {
    color: white;
    opacity: 0.9;
}

/* Time Slots - Calendly Style (Single Column) */
.time-slots {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-6);
    max-width: 400px;
}

.time-slot {
    background: white;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.time-slot:hover:not(:disabled) {
    border-color: var(--navy-primary);
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.time-slot.selected {
    background: linear-gradient(135deg, rgba(59, 82, 115, 0.05) 0%, rgba(255, 255, 255, 1) 100%);
    border-color: var(--navy-primary);
    border-width: 3px;
}

.time-slot:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.time-slot-time {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--navy-primary);
    margin-bottom: var(--space-1);
}

.time-slot-availability {
    font-size: var(--font-size-sm);
    color: var(--gray-500);
}

@media (max-width: 768px) {
    .slider-container {
        height: 72px !important;
    }
    
    .slider-thumb {
        width: 64px !important;
        height: 64px !important;
    }
}
/* Properties Page Components */

/* Search Bar */
.properties-search {
    display: flex;
    gap: var(--space-3);
    max-width: 600px;
    margin-top: var(--space-6);
}

.search-input {
    flex: 1;
    padding: var(--space-4);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--navy-primary);
    box-shadow: 0 0 0 3px rgba(59, 82, 115, 0.1);
}

.search-button {
    padding: var(--space-4) var(--space-6);
    background: var(--gold-primary);
    border: none;
    border-radius: var(--radius-lg);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.search-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

/* Filter Pills */
.properties-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.filter-pill {
    padding: var(--space-3) var(--space-5);
    background: white;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-pill:hover {
    border-color: var(--navy-primary);
    transform: translateY(-2px);
}

.filter-pill.active {
    background: var(--navy-primary);
    border-color: var(--navy-primary);
    color: white;
}

/* Advanced Filters */
.properties-advanced-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.filter-group-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
}

.filter-select {
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 150px;
}

.filter-select:focus {
    outline: none;
    border-color: var(--navy-primary);
}

/* Properties Section */
.properties-section {
    padding: var(--space-12) 0;
}

.properties-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.properties-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.properties-count {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.count-number {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--navy-primary);
}

.count-label {
    font-size: var(--font-size-base);
    color: var(--gray-600);
}

.properties-controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Properties Grid */
.properties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-6);
}

@media (min-width: 768px) {
    .properties-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .properties-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Property Card already exists in scout-components.css, just ensure it works */
.property-card .property-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    background: var(--gray-100);
    min-height: 240px;
}
/* Properties Page Components - Fixed Spacing */

/* Reduce hero padding */
.page-homepage .hero {
    padding: var(--space-12) 0 var(--space-8) 0;
}

/* Search Bar */
.properties-search {
    display: flex;
    gap: var(--space-3);
    max-width: 600px;
    margin-top: var(--space-6);
}

.search-input {
    flex: 1;
    padding: var(--space-4);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--navy-primary);
    box-shadow: 0 0 0 3px rgba(59, 82, 115, 0.1);
}

.search-button {
    padding: var(--space-4) var(--space-6);
    background: var(--gold-primary);
    border: none;
    border-radius: var(--radius-lg);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.search-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

/* Reduce features section padding for filters */
.page-homepage .features {
    padding: var(--space-8) 0;
}

/* Filter Pills */
.properties-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.filter-pill {
    padding: var(--space-3) var(--space-5);
    background: white;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-pill:hover {
    border-color: var(--navy-primary);
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.filter-pill.active {
    background: var(--gold-primary);
    border-color: var(--gold-primary);
    color: white;
}

/* Advanced Filters */
.properties-advanced-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.filter-group-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
}

.filter-select {
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 150px;
}

.filter-select:focus {
    outline: none;
    border-color: var(--navy-primary);
}

/* Properties Section */
.properties-section {
    padding: var(--space-8) 0 var(--space-12) 0;
}

.properties-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.properties-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.properties-count {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.count-number {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--navy-primary);
}

.count-label {
    font-size: var(--font-size-base);
    color: var(--gray-600);
}

.properties-controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Properties Grid */
.properties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-6);
}

@media (min-width: 768px) {
    .properties-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .properties-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Property Card Placeholder */
.property-card .property-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    background: var(--gray-100);
    min-height: 240px;
}
/* Sitemap Page Components */

.sitemap-section {
    margin-bottom: var(--space-12);
}

.sitemap-section-heading {
    font-size: 1.75rem;
    font-weight: var(--font-weight-bold);
    color: var(--navy-primary);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--gold-primary);
}

.sitemap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-5);
}

@media (min-width: 768px) {
    .sitemap-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .sitemap-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.sitemap-card {
    padding: var(--space-6);
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sitemap-card:hover {
    border-color: var(--gold-primary);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.sitemap-card-heading {
    font-size: 1.25rem;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-3);
}

.sitemap-card h3 a {
    color: var(--navy-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.sitemap-card h3 a:hover {
    color: var(--gold-primary);
}

.sitemap-card-text {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}
/* Properties Page - Complete Styling */

/* Compact Hero */
.properties-hero-compact {
    padding: var(--space-10) 0 var(--space-6) 0;
}

/* Compact Search Bar */
.properties-search-compact {
    display: flex;
    gap: var(--space-2);
    max-width: 700px;
    margin-top: var(--space-5);
}

.properties-search-compact .search-input {
    flex: 1;
    padding: var(--space-4) var(--space-5);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    transition: all 0.3s ease;
}

.properties-search-compact .search-input:focus {
    outline: none;
    border-color: var(--gold-primary);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.properties-search-compact .search-button {
    padding: var(--space-4) var(--space-6);
    background: var(--gold-primary);
    border: none;
    border-radius: var(--radius-lg);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 60px;
}

.properties-search-compact .search-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}

/* Filters Section */
.properties-filters-section {
    padding: var(--space-6) 0;
    background: var(--gray-50);
}

/* Filter Pills */
.properties-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    justify-content: center;
}

.filter-pill {
    padding: var(--space-3) var(--space-5);
    background: white;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.filter-pill:hover {
    border-color: var(--gold-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.filter-pill.active {
    background: var(--gold-primary);
    border-color: var(--gold-primary);
    color: white;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

/* Advanced Filters */
.properties-advanced-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-end;
    justify-content: center;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 160px;
}

.filter-group-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--navy-primary);
}

.filter-select {
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--navy-primary);
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%233b5273' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-8);
}

.filter-select:hover {
    border-color: var(--gold-primary);
}

.filter-select:focus {
    outline: none;
    border-color: var(--gold-primary);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.clear-filters-btn {
    align-self: flex-end;
    min-width: 120px;
}

/* Properties Section */
.properties-section {
    padding: var(--space-10) 0 var(--space-12) 0;
}

.properties-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.properties-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.properties-count {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.count-number {
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--navy-primary);
}

.count-label {
    font-size: var(--font-size-base);
    color: var(--gray-600);
}

/* Properties Grid */
.properties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-6);
}

@media (min-width: 768px) {
    .properties-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .properties-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Property Card Placeholder */
.property-card .property-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    background: var(--gray-100);
    min-height: 240px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .properties-filters {
        justify-content: flex-start;
    }
    
    .properties-advanced-filters {
        justify-content: flex-start;
    }
    
    .filter-group {
        flex: 1 1 calc(50% - var(--space-2));
        min-width: 140px;
    }
    
    .clear-filters-btn {
        width: 100%;
    }
}
/* Fix search button alignment */
.properties-search-compact .search-button {
    padding: var(--space-4) var(--space-6);
    background: var(--gold-primary);
    border: none;
    border-radius: var(--radius-lg);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.properties-search-compact .search-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}

/* Equal Housing Opportunity Logo */
.equal-housing-logo {
    height: 20px;
    vertical-align: middle;
    margin-right: 8px;
}

/* Booking Confirmation - Calendly Clean Style */

.confirmation-main {
    background: var(--gray-50);
    min-height: 60vh;
}

.confirmation-success {
    text-align: center;
    margin-bottom: var(--space-8);
}

.success-checkmark {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: white;
    margin: 0 auto var(--space-4);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
}

.confirmation-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    margin-bottom: var(--space-6);
}

.confirmation-header {
    margin-bottom: var(--space-6);
}

.confirmation-divider {
    height: 1px;
    background: var(--gray-200);
    margin: var(--space-6) 0;
}

.confirmation-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) 0;
}

.detail-label {
    font-size: var(--text-body-sm);
    color: var(--gray-600);
    font-weight: 500;
}

.detail-value {
    font-size: var(--text-body);
    color: var(--navy);
    font-weight: 600;
    text-align: right;
}

.confirmation-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.confirmation-actions .btn {
    flex: 1;
    min-width: 200px;
    justify-content: center;
}

.confirmation-help {
    text-align: center;
    padding: var(--space-6) 0;
}

.confirmation-help-link {
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.confirmation-help-link:hover {
    opacity: 0.8;
}

@media (max-width: 768px) {
    .confirmation-card {
        padding: var(--space-6);
    }
    
    .confirmation-actions {
        flex-direction: column;
    }
    
    .confirmation-actions .btn {
        width: 100%;
    }
    
    .detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }
    
    .detail-value {
        text-align: left;
    }
}

/* Booking Confirmation - Calendly Clean Style */

.confirmation-main {
    background: var(--gray-50);
    min-height: 60vh;
}

.confirmation-success {
    text-align: center;
    margin-bottom: var(--space-8);
    padding-top: var(--space-4);
}

.success-checkmark {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: white;
    margin: 0 auto var(--space-6);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
}

.confirmation-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    margin-bottom: var(--space-6);
}

.confirmation-header {
    margin-bottom: var(--space-6);
}

.confirmation-divider {
    height: 1px;
    background: var(--gray-200);
    margin: var(--space-6) 0;
}

.confirmation-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) 0;
}

.detail-label {
    font-size: var(--text-body-sm);
    color: var(--gray-600);
    font-weight: 500;
}

.detail-value {
    font-size: var(--text-body);
    color: var(--navy);
    font-weight: 600;
    text-align: right;
}

.confirmation-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.confirmation-actions .btn {
    flex: 1;
    min-width: 200px;
    justify-content: center;
}

.confirmation-help {
    text-align: center;
    padding: var(--space-6) 0;
}

.confirmation-help-link {
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.confirmation-help-link:hover {
    opacity: 0.8;
}

@media (max-width: 768px) {
    .confirmation-card {
        padding: var(--space-6);
    }
    
    .confirmation-actions {
        flex-direction: column;
    }
    
    .confirmation-actions .btn {
        width: 100%;
    }
    
    .detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }
    
    .detail-value {
        text-align: left;
    }
}

/* Property Detail Page Components */

.property-description {
    line-height: 1.8;
}

/* Property Detail Page Components */

.property-description {
    line-height: 1.8;
}

/* Property Detail - Contact Button Spacing */
.contact-buttons {
    display: flex;
    gap: var(--space-4);
}

.sidebar-card .contact-buttons {
    margin-top: var(--space-3);
}

.contact-buttons .btn {
    flex: 1;
    min-width: 100px;
}

/* Neighborhoods Page Components */

.neighborhoods-hero {
    background: var(--gray-50);
    padding: var(--space-12) 0 var(--space-8);
}

.neighborhoods-main {
    padding: var(--space-8) 0;
}

.neighborhoods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-12);
}

.neighborhood-card-large {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s-ease, box-shadow 0.2s ease;
}

.neighborhood-card-large:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.neighborhood-image {
    height: 200px;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
}

.neighborhood-placeholder {
    font-size: 64px;
}

.neighborhood-content {
    padding: var(--space-6);
}

.neighborhood-stats {
    display: flex;
    gap: var(--space-6);
    padding: var(--space-4) 0;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.stat-label {
    font-size: var(--text-body-sm);
    color: var(--gray-600);
    font-weight: 500;
}

.stat-value {
    font-size: var(--text-heading-4);
    color: var(--navy);
    font-weight: 700;
}

.neighborhoods-cta {
    background: linear-gradient(135deg, var(--navy) 0%, #1e3a5f 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-12) var(--space-8);
    text-align: center;
}

.neighborhoods-cta-heading,
.neighborhoods-cta-text {
    color: white;
}

.neighborhoods-cta .btn-primary {
    background: var(--gold);
    color: var(--navy);
}

.neighborhoods-cta .btn-primary:hover {
    background: #d4a574;
}

@media (max-width: 768px) {
    .neighborhoods-grid {
        grid-template-columns: 1fr;
    }
    
    .neighborhood-stats {
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .neighborhoods-cta {
        padding: var(--space-8) var(--space-4);
    }
}

/* Contact Page Components */

.contact-hero {
    background: var(--gray-50);
    padding: var(--space-12) 0 var(--space-8);
}

.contact-main {
    padding: var(--space-8) 0;
}

.contact-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-8);
    max-width: 1200px;
    margin: 0 auto;
}

.contact-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Contact Form */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.form-label {
    font-size: var(--text-body-sm);
    font-weight: 600;
    color: var(--navy);
}

.form-input,
.form-select,
.form-textarea {
    padding: var(--space-3);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: var(--text-body);
    font-family: inherit;
    transition: border-color 0.2s-ease, box-shadow 0.2s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(198, 162, 107, 0.1);
}

.form-select {
    padding-right: var(--space-10);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 16px;
    cursor: pointer;
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

/* Contact Info */
.contact-info-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--gray-200);
}

.contact-info-item:last-child {
    border-bottom: none;
}

.contact-info-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.contact-info-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.contact-info-label {
    font-size: var(--text-body-sm);
    color: var(--gray-600);
    font-weight: 500;
}

.contact-info-value {
    font-size: var(--text-body);
    color: var(--navy);
    font-weight: 600;
    text-decoration: none;
}

.contact-info-value:hover {
    color: var(--gold);
}

/* Quick Links */
.contact-quick-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.contact-quick-link {
    padding: var(--space-3);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--navy);
    font-weight: 500;
    transition: background 0.2s ease;
}

.contact-quick-link:hover {
    background: var(--gray-100);
}

@media (max-width: 768px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .contact-card {
        padding: var(--space-6);
    }
}
/* ===================================
   Admin Dashboard Extensions
   Extends Scout CSS components
   =================================== */

/* Admin Layout - Sidebar + Main */
.admin-layout {
    display: flex;
    min-height: 100vh;
    background: var(--gray-50);
}

.admin-sidebar {
    width: 240px;
    background: white;
    border-right: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
}

.admin-main {
    flex: 1;
    margin-left: 240px;
    display: flex;
    flex-direction: column;
}

/* Sidebar Header - Extends .logo */
.sidebar-header {
    padding: var(--space-6);
    border-bottom: 1px solid var(--gray-200);
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
    color: var(--navy-primary);
    font-family: 'Playfair Display', serif;
}

.sidebar-logo-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-dark) 100%);
    color: white;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* Admin Navigation */
.admin-sidebar-nav {
    flex: 1;
    padding: var(--space-4) 0;
}

.nav-section {
    margin-bottom: var(--space-2);
}

.nav-section-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-700);
    transition: all 0.2s;
    text-align: left;
}

.nav-section-header:hover {
    background: var(--gray-100);
    color: var(--navy-primary);
}

.nav-section-header.active {
    color: var(--navy-primary);
    background: rgba(27, 53, 89, 0.05);
}

.nav-section-icon {
    width: 24px;
    height: 24px;
    background: var(--gray-200);
    color: var(--gray-700);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}

.nav-section-header.active .nav-section-icon {
    background: var(--navy-primary);
    color: white;
}

.nav-section-title {
    flex: 1;
}

.nav-section-badge {
    background: var(--gray-200);
    color: var(--gray-700);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.nav-section-toggle {
    font-size: 12px;
    color: var(--gray-500);
    transition: transform 0.2s;
}

.nav-section-header.active .nav-section-toggle {
    transform: rotate(90deg);
}

.nav-section-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    padding-left: var(--space-4);
}

.nav-section-items.expanded {
    display: block;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    color: var(--gray-600);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
}

.nav-item:hover {
    background: var(--gray-100);
    color: var(--navy-primary);
}

.nav-item.active {
    color: var(--navy-primary);
    background: rgba(27, 53, 89, 0.05);
    font-weight: 500;
}

.nav-item-text {
    flex: 1;
}

.nav-item-badge {
    background: var(--gray-200);
    color: var(--gray-700);
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

/* Admin Top Bar */
.admin-top-bar {
    background: white;
    border-bottom: 1px solid var(--gray-200);
    padding: var(--space-5) var(--space-8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

.admin-actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

/* Admin User Menu */
.admin-user-button {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: none;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s;
}

.admin-user-button:hover {
    border-color: var(--navy-primary);
    background: rgba(27, 53, 89, 0.05);
}

.admin-user-avatar {
    width: 32px;
    height: 32px;
    background: var(--navy-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

.admin-user-info {
    text-align: left;
}

.admin-user-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--navy-primary);
    display: block;
    line-height: 1.2;
}

.admin-user-role {
    font-size: 12px;
    color: var(--gray-600);
    display: block;
    line-height: 1.2;
}

/* Admin Content Area */
.admin-content {
    flex: 1;
    padding: var(--space-8);
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.admin-page-header {
    margin-bottom: var(--space-8);
}

.admin-page-title {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--navy-primary);
    margin: 0;
}

/* Stat Cards - Extends card pattern */
.stat-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}

.stat-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    transition: all 0.2s;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.stat-card:hover {
    border-color: var(--navy-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.stat-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.stat-card-icon {
    width: 40px;
    height: 40px;
    background: rgba(27, 53, 89, 0.1);
    color: var(--navy-primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.stat-card-label {
    font-size: 14px;
    color: var(--gray-600);
    font-weight: 500;
    margin-bottom: var(--space-3);
}

.stat-card-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--navy-primary);
    margin: var(--space-2) 0;
    font-family: 'Playfair Display', serif;
    line-height: 1.2;
}

.stat-card-change {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 14px;
}

.stat-card-change.positive {
    color: #059669;
}

.stat-card-change.negative {
    color: #DC2626;
}

.stat-card-meta {
    font-size: 12px;
    color: var(--gray-500);
    margin-top: var(--space-2);
}

/* Chart Cards */
.chart-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}

.chart-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
}

.chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--gray-100);
}

.chart-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--navy-primary);
}

.chart-subtitle {
    font-size: 14px;
    color: var(--gray-600);
    margin: 0;
}

.chart-body {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-placeholder {
    text-align: center;
    color: var(--gray-400);
    font-size: 14px;
}

/* Alert Cards */
.alerts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
}

.alert-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
}

.alert-card.warning {
    border-left: 4px solid #F59E0B;
}

.alert-card.error {
    border-left: 4px solid #DC2626;
}

.alert-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.alert-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--navy-primary);
}

.alert-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.alert-list-item {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.alert-list-item:last-child {
    border-bottom: none;
}

.alert-list-text {
    font-size: 14px;
    color: var(--gray-700);
}

.alert-list-count {
    background: #DC2626;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.alert-list-link {
    color: var(--navy-primary);
    text-decoration: none;
    font-size: 14px;
}

.alert-list-link:hover {
    text-decoration: underline;
}

/* Activity Feed */
.activity-feed {
    list-style: none;
    padding: 0;
    margin: 0;
}

.activity-item {
    padding: var(--space-4);
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    gap: var(--space-3);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-icon {
    width: 32px;
    height: 32px;
    background: var(--gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.activity-content {
    flex: 1;
}

.activity-text {
    font-size: 14px;
    color: var(--gray-700);
    margin-bottom: var(--space-1);
}

.activity-meta {
    font-size: 12px;
    color: var(--gray-500);
}

/* Button Extensions */
.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

/* .btn-sm defined in design-tokens.css */

/* Loading States */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-200);
    border-top-color: var(--navy-primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 1024px) {
    .admin-sidebar {
        width: 200px;
    }
    
    .admin-main {
        margin-left: 200px;
    }
    
    .stat-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s;
        z-index: 100;
    }
    
    .admin-sidebar.mobile-open {
        transform: translateX(0);
    }
    
    .admin-main {
        margin-left: 0;
    }
    
    .stat-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .chart-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* Admin Top Bar Right Section */
.admin-top-bar-right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* Search */
.admin-search {
    position: relative;
}

.admin-search-input {
    width: 300px;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-10);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    font-size: 14px;
    transition: all 0.2s;
}

.admin-search-input:focus {
    outline: none;
    border-color: var(--navy-primary);
    box-shadow: 0 0 0 3px rgba(0, 40, 85, 0.1);
}

.admin-search-icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 16px;
}

/* Notifications */
.admin-notifications {
    position: relative;
}

.admin-notification-button {
    position: relative;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    transition: all 0.2s;
}

.admin-notification-button:hover {
    border-color: var(--navy-primary);
    background: var(--gray-50);
}

.notification-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--red);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.admin-notification-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    width: 360px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1000;
}

.admin-notification-dropdown.show {
    display: block;
}

.notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    border-bottom: 1px solid var(--gray-200);
}

.notification-header-heading {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--navy-primary);
}

.notification-mark-read {
    background: none;
    border: none;
    color: var(--navy-primary);
    font-size: 13px;
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    transition: background 0.2s;
}

.notification-mark-read:hover {
    background: var(--gray-100);
}

.notification-list {
    max-height: 400px;
    overflow-y: auto;
}

.notification-item {
    padding: var(--space-4);
    border-bottom: 1px solid var(--gray-100);
    cursor: pointer;
    transition: background 0.2s;
}

.notification-item:hover {
    background: var(--gray-50);
}

.notification-item.unread {
    background: var(--blue-50);
}

.notification-content-strong {
    display: block;
    font-size: 14px;
    color: var(--navy-primary);
    margin-bottom: var(--space-1);
}

.notification-content-text {
    font-size: 13px;
    color: var(--gray-700);
    margin: 0 0 var(--space-1);
}

.notification-time {
    font-size: 12px;
    color: var(--gray-500);
}

.notification-footer {
    padding: var(--space-3);
    text-align: center;
    border-top: 1px solid var(--gray-200);
}

.notification-footer-link {
    font-size: 13px;
    color: var(--navy-primary);
    text-decoration: none;
    font-weight: 500;
}

.notification-footer-link:hover {
    text-decoration: underline;
}

/* User Menu Dropdown */
.admin-user-menu {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    min-width: 220px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    padding: var(--space-2);
}

.admin-user-menu.show {
    display: block;
}

.admin-user-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    color: var(--gray-900);
    text-decoration: none;
    border-radius: var(--radius-lg);
    transition: background 0.2s;
    font-size: 14px;
}

.admin-user-menu-item:hover {
    background: var(--gray-100);
}

.admin-user-menu-logout {
    color: var(--red);
}

.admin-user-menu-divider {
    height: 1px;
    background: var(--gray-200);
    margin: var(--space-2) 0;
}

.menu-icon {
    font-size: 16px;
}

/* Alert Cards */
.alert-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-10);
}

.alert-card {
    background: white;
    border: 2px solid;
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    transition: all 0.2s;
}

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

.alert-urgent {
    border-color: var(--red);
    background: rgba(239, 68, 68, 0.02);
}

.alert-warning {
    border-color: var(--gold);
    background: rgba(245, 158, 11, 0.02);
}

.alert-info {
    border-color: var(--blue);
    background: rgba(59, 130, 246, 0.02);
}

.alert-neutral {
    border-color: var(--gray-300);
}

.alert-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.alert-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--navy-primary);
    margin: 0;
}

.alert-badge {
    background: var(--navy-primary);
    color: white;
    font-size: 14px;
    font-weight: 700;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    min-width: 32px;
    text-align: center;
}

.alert-urgent .alert-badge {
    background: var(--red);
}

.alert-warning .alert-badge {
    background: var(--gold);
}

.alert-info .alert-badge {
    background: var(--blue);
}

.alert-description {
    font-size: 14px;
    color: var(--gray-600);
    margin: 0 0 var(--space-4);
}

.alert-action {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    color: var(--navy-primary);
    text-decoration: none;
    transition: color 0.2s;
}

.alert-action:hover {
    color: var(--gold);
}

/* Chart Controls */
.chart-controls {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.chart-date-selector {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 13px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}

.chart-date-selector:hover {
    border-color: var(--navy-primary);
}

.chart-date-selector:focus {
    outline: none;
    border-color: var(--navy-primary);
    box-shadow: 0 0 0 3px rgba(0, 40, 85, 0.1);
}

/* Activity Feed Icons */
.activity-icon-lead {
    background: var(--blue);
}

.activity-icon-call {
    background: var(--green);
}

.activity-icon-text {
    background: var(--purple);
}

.activity-icon-showing {
    background: var(--gold);
}

/* Leaderboard */
.leaderboard {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    transition: all 0.2s;
}

.leaderboard-item:hover {
    background: var(--gray-100);
}

.leaderboard-rank {
    font-size: 20px;
    font-weight: 700;
    color: var(--navy-primary);
    min-width: 32px;
    text-align: center;
}

.leaderboard-agent {
    flex: 1;
}

.leaderboard-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--navy-primary);
    margin-bottom: var(--space-1);
}

.leaderboard-stats {
    font-size: 13px;
    color: var(--gray-600);
}

.leaderboard-score {
    font-size: 18px;
    font-weight: 700;
    color: var(--green);
}

/* Button Icons */
.btn-icon {
    display: inline-block;
    margin-right: var(--space-1);
}

/* Loading States */
.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--gray-300);
    border-top-color: var(--navy-primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.stat-card.loading .stat-card-value,
.alert-card.loading .alert-badge {
    opacity: 0.5;
}

/* Empty States */
.empty-state {
    text-align: center;
    padding: var(--space-8);
    color: var(--gray-500);
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.empty-state-text {
    font-size: 16px;
    margin-bottom: var(--space-2);
}

.empty-state-subtext {
    font-size: 14px;
    color: var(--gray-400);
}

/* Responsive */
@media (max-width: 1200px) {
    .admin-search-input {
        width: 200px;
    }
    
    .stat-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

@media (max-width: 768px) {
    .admin-top-bar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-4);
    }
    
    .admin-actions {
        flex-wrap: wrap;
    }
    
    .admin-search-input {
        width: 100%;
    }
    
    .stat-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .chart-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* Fix alert action links - remove background colors */
.alert-action {
    background: none !important;
    padding: 0 !important;
    border: none !important;
}

/* Fix button badges - hide unwanted badge numbers */
.btn .btn-icon {
    background: none !important;
    color: inherit !important;
    padding: 0 !important;
    border: none !important;
}

/* Ensure stat cards grid works well with 8 cards */
.stat-cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

@media (min-width: 1400px) {
    .stat-cards-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* Analytics Page Additions */

/* Status Badges */
.status-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.status-badge.status-success {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
}

.status-badge.status-warning {
    background: rgba(251, 191, 36, 0.1);
    color: var(--warning);
}

.status-badge.status-error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
}

.status-badge.status-info {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

/* Table Filters */
.table-filters {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.filter-select {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--navy);
    background: var(--white);
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-select:hover {
    border-color: var(--navy);
}

.filter-select:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(0, 32, 63, 0.1);
}

/* Nav Icon Styling for Text Codes */
.nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: inherit;
}

/* KPI Icon Styling for Text */
.kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.kpi-icon.revenue {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
    color: var(--gold-primary);
}

.kpi-icon.occupancy {
    background: linear-gradient(135deg, rgba(0, 32, 63, 0.1) 0%, rgba(0, 32, 63, 0.05) 100%);
    color: var(--navy);
}

/* Performance Table Enhancements */
.performance-table tbody tr {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.performance-table tbody tr:hover {
    background-color: var(--gray-50);
}

/* Responsive Grid for Booking Flow Stats */
@media (max-width: 768px) {
    .table-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-select {
        width: 100%;
    }
}
/* Analytics Page Additions */

/* Status Badges */
.status-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.status-badge.status-success {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
}

.status-badge.status-warning {
    background: rgba(251, 191, 36, 0.1);
    color: var(--warning);
}

.status-badge.status-error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
}

.status-badge.status-info {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

/* Table Filters */
.table-filters {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.filter-select {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--navy);
    background: var(--white);
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-select:hover {
    border-color: var(--navy);
}

.filter-select:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(0, 32, 63, 0.1);
}

/* Nav Icon Styling for Text Codes */
.nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: inherit;
}

/* KPI Icon Styling for Text */
.kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.kpi-icon.revenue {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
    color: var(--gold-primary);
}

.kpi-icon.occupancy {
    background: linear-gradient(135deg, rgba(0, 32, 63, 0.1) 0%, rgba(0, 32, 63, 0.05) 100%);
    color: var(--navy);
}

/* Performance Table Enhancements */
.performance-table tbody tr {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.performance-table tbody tr:hover {
    background-color: var(--gray-50);
}

/* Responsive Grid for Booking Flow Stats */
@media (max-width: 768px) {
    .table-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-select {
        width: 100%;
    }
}

/* ============================================
   ANALYTICS-SPECIFIC ADDITIONS TO SCOUT CSS
   ============================================ */

/* Module Header (for section headers with export buttons) */
.module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--gray-200);
}

/* Chart Container (for fixed height charts) */
.chart-container {
    height: 300px;
    max-height: 300px;
    position: relative;
}

/* Metrics Grid (for conversion funnel metrics) */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.metric-card {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.metric-label {
    font-size: 13px;
    color: var(--gray-600);
    margin-bottom: var(--space-2);
    font-weight: 500;
}

.metric-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: var(--space-3);
}

.metric-bar {
    height: 8px;
    background: var(--gray-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
}

.metric-bar-fill {
    height: 100%;
    border-radius: var(--radius-sm);
    transition: width 0.3s ease;
}

/* Chart Date Selector */
.chart-date-selector {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--navy);
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chart-date-selector:hover {
    border-color: var(--teal);
}

.chart-date-selector:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.1);
}

/* Analytics Module (section wrapper) */
.analytics-module {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ============================================
   ADMIN HEADER IMPROVEMENTS
   ============================================ */

/* Page Title in Header */
.admin-page-title-section {
    display: flex;
    align-items: center;
}

.admin-page-title-section .admin-page-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--navy);
    margin: 0;
}

/* Quick Actions Section (below header) */
.admin-quick-actions {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
}
/* ========================================
   Settings Page Components
   ======================================== */

/* Settings Tabs */
.settings-tabs {
    display: flex;
    gap: var(--space-2);
    border-bottom: 2px solid var(--gray-200);
    margin-bottom: var(--space-8);
}

.settings-tab {
    padding: var(--space-4) var(--space-6);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--gray-600);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: -2px;
}

.settings-tab:hover {
    color: var(--navy-primary);
    background: var(--gray-50);
}

.settings-tab.active {
    color: var(--navy-primary);
    border-bottom-color: var(--navy-primary);
}

/* Settings Panels */
.settings-panel {
    display: none;
}

.settings-panel.active {
    display: block;
}

/* Settings Sections */
.settings-section {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    margin-bottom: var(--space-6);
}

.settings-section-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--navy-primary);
    margin-bottom: var(--space-2);
}

.settings-section-description {
    color: var(--gray-600);
    font-size: 14px;
    margin-bottom: var(--space-6);
}

/* Form Elements */
.form-group {
    margin-bottom: var(--space-6);
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: var(--space-2);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    font-size: 14px;
    transition: all 0.2s;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--navy-primary);
    box-shadow: 0 0 0 3px rgba(75, 98, 132, 0.1);
}

.form-textarea {
    resize: vertical;
    font-family: inherit;
}

.form-group-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    transition: background 0.2s;
}

.form-group-checkbox:hover {
    background: var(--gray-50);
}

.form-group-checkbox input[type="checkbox"] {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.form-group-checkbox-label {
    flex: 1;
    cursor: pointer;
}

.form-group-checkbox label strong {
    display: block;
    color: var(--gray-900);
    margin-bottom: var(--space-1);
}

.form-help-text {
    display: block;
    font-size: 13px;
    color: var(--gray-600);
}

.form-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--gray-200);
}

/* Button styles defined in design-tokens.css */

/* Integration Status */
.integration-status {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
}

.integration-status-badge {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.integration-status-badge.connected {
    background: #D1FAE5;
    color: #065F46;
}

.integration-status-badge.disconnected {
    background: #FEE2E2;
    color: #991B1B;
}

.integration-status-text {
    font-size: 13px;
    color: var(--gray-600);
}

/* Subscription Card */
.subscription-card {
    background: linear-gradient(135deg, var(--navy-primary) 0%, var(--navy-dark) 100%);
    color: white;
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    margin-bottom: var(--space-6);
}

.subscription-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.subscription-header-heading {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

.subscription-price {
    font-size: 36px;
    font-weight: 700;
}

.subscription-price-label {
    font-size: 16px;
    font-weight: 400;
    opacity: 0.8;
}

.subscription-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.subscription-feature {
    font-size: 14px;
    opacity: 0.9;
}

.subscription-status {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.subscription-badge {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.subscription-badge.active {
    background: rgba(255, 255, 255, 0.2);
}

.subscription-renewal {
    font-size: 13px;
    opacity: 0.8;
}

/* Payment Method */
.payment-method {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
}

.payment-method-icon {
    font-size: 32px;
}

.payment-method-info {
    flex: 1;
}

.payment-method-info-strong {
    display: block;
    color: var(--gray-900);
    margin-bottom: var(--space-1);
}

.payment-method-meta {
    font-size: 13px;
    color: var(--gray-600);
}

/* Invoice List */
.invoice-list {
    margin-bottom: var(--space-6);
}

.invoice-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
}

.invoice-info {
    flex: 1;
}

.invoice-info-strong {
    display: block;
    color: var(--gray-900);
    margin-bottom: var(--space-1);
}

.invoice-meta {
    font-size: 13px;
    color: var(--gray-600);
}

.invoice-amount {
    font-size: 18px;
    font-weight: 600;
    color: var(--navy-primary);
    margin-right: var(--space-4);
}

/* Session List */
.session-list {
    margin-bottom: var(--space-6);
}

.session-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
}

.session-info-strong {
    display: block;
    color: var(--gray-900);
    margin-bottom: var(--space-1);
}

.session-meta {
    font-size: 13px;
    color: var(--gray-600);
}

.session-badge {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.session-badge.current {
    background: #D1FAE5;
    color: #065F46;
}
/* Property CRUD Page Polish - Comprehensive Fixes */

/* Fix stat cards grid - ensure all 4 cards show properly */
.property-crud-page .stat-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

/* Remove ugly colored borders from filter dropdowns */
.property-crud-page .filters-section-label {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy-primary);
    margin-bottom: var(--space-2);
    display: block;
}

.property-crud-page .filters-section-select,
.property-crud-page .filters-section input[type="text"] {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    font-size: 14px;
    color: var(--navy-primary);
    background: white;
    transition: all 0.2s;
}

.property-crud-page .filters-section-select:focus,
.property-crud-page .filters-section input[type="text"]:focus {
    outline: none;
    border-color: var(--navy-primary);
    box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.1);
}

/* Fix table layout - use proper column widths */
.property-crud-page .data-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

/* Column widths optimized for content */
.property-crud-page .data-table-th:nth-child(1),
.property-crud-page .data-table-td:nth-child(1) {
    width: 50px;
    text-align: center;
}

.property-crud-page .data-table-th:nth-child(2),
.property-crud-page .data-table-td:nth-child(2) {
    width: 320px; /* Property - needs more space for image + text */
}

.property-crud-page .data-table-th:nth-child(3),
.property-crud-page .data-table-td:nth-child(3) {
    width: 140px; /* MLS ID */
}

.property-crud-page .data-table-th:nth-child(4),
.property-crud-page .data-table-td:nth-child(4) {
    width: 150px; /* Price */
}

.property-crud-page .data-table-th:nth-child(5),
.property-crud-page .data-table-td:nth-child(5) {
    width: 130px; /* Status */
}

.property-crud-page .data-table-th:nth-child(6),
.property-crud-page .data-table-td:nth-child(6) {
    width: 150px; /* Source */
}

.property-crud-page .data-table-th:nth-child(7),
.property-crud-page .data-table-td:nth-child(7) {
    width: 100px; /* Readiness */
}

.property-crud-page .data-table-th:nth-child(8),
.property-crud-page .data-table-td:nth-child(8) {
    width: 140px; /* Updated */
}

.property-crud-page .data-table-th:nth-child(9),
.property-crud-page .data-table-td:nth-child(9) {
    width: 90px; /* Actions */
    text-align: center;
}

/* Table header styling */
.property-crud-page .data-table-th {
    padding: var(--space-4);
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-600);
    background: var(--gray-50);
    border-bottom: 2px solid var(--gray-200);
}

/* Table cell styling */
.property-crud-page .data-table-td {
    padding: var(--space-4);
    vertical-align: middle;
    border-bottom: 1px solid var(--gray-200);
}

/* Property cell - image + info */
.property-crud-page .property-cell {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.property-crud-page .property-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
}

.property-crud-page .property-info {
    flex: 1;
    min-width: 0;
}

.property-crud-page .property-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--navy-primary);
    margin-bottom: var(--space-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.property-crud-page .property-address {
    font-size: 13px;
    color: var(--gray-600);
    margin-bottom: var(--space-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.property-crud-page .property-details {
    font-size: 12px;
    color: var(--gray-500);
    white-space: nowrap;
}

/* MLS ID cell */
.property-crud-page .data-table-td:nth-child(3) {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: var(--navy-primary);
    font-weight: 500;
}

/* Price cell */
.property-crud-page .price-cell {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.property-crud-page .price-primary {
    font-weight: 700;
    font-size: 15px;
    color: var(--navy-primary);
}

.property-crud-page .price-source {
    font-size: 11px;
    color: var(--gray-500);
}

/* Status badges */
.property-crud-page .status-badge {
    display: inline-block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.property-crud-page .status-active {
    background: #D1FAE5;
    color: #065F46;
}

.property-crud-page .status-pending {
    background: #FEF3C7;
    color: #92400E;
}

.property-crud-page .status-conflict {
    background: #FEE2E2;
    color: #991B1B;
}

/* Source cell */
.property-crud-page .source-cell {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.property-crud-page .source-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--navy-primary);
}

.property-crud-page .source-sync {
    font-size: 11px;
    color: var(--gray-500);
}

/* Readiness bar */
.property-crud-page .readiness-bar {
    position: relative;
    width: 100%;
    height: 28px;
    background: var(--gray-100);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.property-crud-page .readiness-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, #10B981 0%, #059669 100%);
    transition: width 0.3s ease;
}

.property-crud-page .readiness-text {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 12px;
    font-weight: 700;
    color: var(--navy-primary);
    z-index: 1;
}

/* Updated date cell */
.property-crud-page .data-table-td:nth-child(8) {
    font-size: 13px;
    color: var(--gray-600);
    white-space: nowrap;
}

/* Actions cell */
.property-crud-page .table-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    align-items: center;
}

.property-crud-page .btn-icon {
    background: transparent;
    border: none;
    padding: var(--space-2);
    cursor: pointer;
    font-size: 18px;
    transition: transform 0.2s;
}

.property-crud-page .btn-icon:hover {
    transform: scale(1.2);
}

/* Row hover effect */
.property-crud-page .data-table tbody tr:hover {
    background: var(--gray-50);
}

/* Conflict row styling */
.property-crud-page .row-conflict {
    background: #FEF2F2;
}

.property-crud-page .row-conflict:hover {
    background: #FEE2E2;
}
/* Property CRUD Page - Minimal Fixes Only */

/* Fix: Ensure 4 stat cards show in grid */
.property-crud-page .stat-cards-grid {
    grid-template-columns: repeat(4, 1fr) !important;
}

/* Fix: Remove colored borders from filter labels */
.property-crud-page .filters-section-label {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Fix: Table column widths */
.property-crud-page .data-table {
    table-layout: fixed;
}

.property-crud-page .data-table-th:nth-child(2),
.property-crud-page .data-table-td:nth-child(2) { width: 320px; }

.property-crud-page .data-table-th:nth-child(3),
.property-crud-page .data-table-td:nth-child(3) { width: 140px; }

.property-crud-page .data-table-th:nth-child(4),
.property-crud-page .data-table-td:nth-child(4) { width: 150px; }

.property-crud-page .data-table-th:nth-child(6),
.property-crud-page .data-table-td:nth-child(6) { width: 150px; }

/* Fix: Property details don't wrap awkwardly */
.property-crud-page .property-details {
    white-space: nowrap;
}


/* Property CRUD Page - Final Polish Pass */

/* Remove colored backgrounds from filter labels completely */
.property-crud-page .filters-section-label {
    background: none !important;
    color: var(--gray-600, #64748b) !important;
    font-weight: 500 !important;
    padding: 0 0 0.5rem 0 !important;
    display: block !important;
    border: none !important;
}

/* Better spacing for stat cards section */
.property-crud-page .stat-cards-grid {
    gap: 1.25rem !important;
    margin-bottom: 2rem !important;
}

/* Improve table row spacing and readability */
.property-crud-page .data-table tbody td {
    padding: 1.25rem 1rem !important;
    vertical-align: middle !important;
}

/* Better spacing between sections */
.property-crud-page .filters-section {
    margin-bottom: 2rem !important;
    padding: 1.5rem !important;
}

/* Improve filter dropdown styling */
.property-crud-page .filters-section-select {
    border: 1px solid var(--gray-300, #e2e8f0) !important;
    border-radius: 0.5rem !important;
    padding: 0.625rem 1rem !important;
    background-color: white !important;
    font-size: 0.875rem !important;
}

.property-crud-page .filters-section-select:focus {
    outline: none !important;
    border-color: var(--blue-500, #3b82f6) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Better table header styling */
.property-crud-page .data-table thead th {
    padding: 1rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em !important;
    color: var(--gray-600, #64748b) !important;
}

/* Improve action buttons spacing */
.property-crud-page .table-actions {
    gap: 0.5rem !important;
}

.property-crud-page .btn-icon {
    padding: 0.375rem 0.75rem !important;
    border-radius: 0.375rem !important;
}

.property-crud-page .btn-icon:hover {
    background-color: var(--gray-100, #f1f5f9) !important;
}

/* Better bulk actions section */
.property-crud-page .bulk-actions {
    margin-bottom: 1.5rem !important;
    display: flex !important;
    gap: 0.75rem !important;
}


/* ========================================================================
   Property CRUD - Actions Dropdown Menu
   ======================================================================== */

/* Actions dropdown container */
.property-crud-page .property-actions-dropdown {
    position: relative;
    display: inline-block;
}

/* Actions menu button */
.property-crud-page .actions-menu-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: white;
    border: 1px solid var(--gray-300, #e2e8f0);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700, #374151);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.property-crud-page .actions-menu-btn:hover {
    background: var(--gray-50, #f9fafb);
    border-color: var(--gray-400, #9ca3af);
}

.property-crud-page .actions-menu-btn-icon {
    transition: transform 0.2s;
}

.property-crud-page .actions-menu-btn.active-icon {
    transform: rotate(180deg);
}

/* Conflict state button */
.property-crud-page .actions-menu-btn.actions-conflict {
    border-color: var(--orange-300, #fdba74);
    background: var(--orange-50, #fff7ed);
    color: var(--orange-700, #c2410c);
}

.property-crud-page .actions-menu-btn.actions-conflict:hover {
    background: var(--orange-100, #ffedd5);
    border-color: var(--orange-400, #fb923c);
}

/* Dropdown menu */
.property-crud-page .actions-menu {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    min-width: 180px;
    background: white;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 0.5rem 0;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: all 0.2s;
}

.property-crud-page .property-actions-dropdown.active .actions-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Menu items */
.property-crud-page .action-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: var(--gray-700, #374151);
    text-decoration: none;
    transition: background 0.15s;
    cursor: pointer;
}

.property-crud-page .action-item:hover {
    background: var(--gray-50, #f9fafb);
}

.property-crud-page .action-item-icon {
    flex-shrink: 0;
    opacity: 0.6;
}

/* Primary action (Resolve) */
.property-crud-page .action-item.action-primary {
    color: var(--blue-600, #2563eb);
    font-weight: 500;
}

.property-crud-page .action-item.action-primary:hover {
    background: var(--blue-50, #eff6ff);
}

.property-crud-page .action-item.action-primary-icon {
    opacity: 1;
}

/* Danger action (Delete) */
.property-crud-page .action-item.action-danger {
    color: var(--red-600, #dc2626);
}

.property-crud-page .action-item.action-danger:hover {
    background: var(--red-50, #fef2f2);
}

/* Divider */
.property-crud-page .action-divider {
    margin: 0.5rem 0;
    border: none;
    border-top: 1px solid var(--gray-200, #e5e7eb);
}

/* Adjust table actions column width */
.property-crud-page .data-table-th:nth-child(9),
.property-crud-page .data-table-td:nth-child(9) {
    width: 120px !important;
    text-align: center;
}


/* ========================================================================
   Property CRUD - Easy UX Improvements
   ======================================================================== */

/* 1. Sticky table header - stays visible when scrolling */
.property-crud-page .data-table {
    position: relative;
}

.property-crud-page .data-table-thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 2. Better conflict row highlighting */
.property-crud-page .row-conflict {
    background: linear-gradient(90deg, #FEF2F2 0%, #FFF7ED 100%) !important;
    border-left: 3px solid var(--orange-500, #f97316) !important;
}

.property-crud-page .row-conflict:hover {
    background: linear-gradient(90deg, #FEE2E2 0%, #FFEDD5 100%) !important;
}

/* Add pulse animation to conflict badge */
.property-crud-page .row-conflict .badge-conflict {
    animation: pulse-warning 2s ease-in-out infinite;
}

@keyframes pulse-warning {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* 3. Larger thumbnails with hover effect */
.property-crud-page .property-thumb {
    width: 80px !important;
    height: 80px !important;
    transition: transform 0.3s-ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.property-crud-page .property-thumb:hover {
    transform: scale(1.8);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    z-index: 100;
    position: relative;
}

/* 4. Enhanced readiness bar with hover tooltip */
.property-crud-page .readiness-bar {
    cursor: help;
    transition: all 0.2s;
}

.property-crud-page .readiness-bar:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 5. Better status badge styling */
.property-crud-page .badge-active {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.property-crud-page .badge-pending {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

.property-crud-page .badge-conflict {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

/* 6. Improved table row hover effect */
.property-crud-page .data-table tbody tr {
    transition: all 0.2s ease;
}

.property-crud-page .data-table tbody tr:hover {
    background: var(--gray-50) !important;
    transform: translateX(2px);
    box-shadow: -3px 0 0 var(--blue-500, #3b82f6);
}

/* 7. Better price display */
.property-crud-page .property-price {
    font-weight: 600;
    color: var(--navy-primary, #1e3a5f);
    font-size: 1rem;
}

/* 8. Source badge improvements */
.property-crud-page .source-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--gray-100, #f3f4f6);
    color: var(--gray-700, #374151);
}

/* 9. Updated date with relative time feel */
.property-crud-page .updated-date {
    color: var(--gray-500, #6b7280);
    font-size: 0.8125rem;
}

.property-crud-page .updated-date:hover {
    color: var(--gray-700, #374151);
}

/* 10. Smooth transitions everywhere */
.property-crud-page * {
    transition: background-color 0.15s-ease, color 0.15s-ease, border-color 0.15s ease;
}

/* 11. Focus states for accessibility */
.property-crud-page-button:focus,
.property-crud-page-select:focus,
.property-crud-page-input:focus {
    outline: 2px solid var(--blue-500, #3b82f6);
    outline-offset: 2px;
}

/* 12. Loading state for table */
.property-crud-page .data-table.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* 13. Empty state styling */
.property-crud-page .empty-state {
    padding: 4rem 2rem;
    text-align: center;
    color: var(--gray-500, #6b7280);
}

.property-crud-page .empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}


/* ========================================================================
   Lead Management Page - Scout CSS
   ======================================================================== */

/* Page background */
.lead-management-page {
    background: var(--gray-50, #f9fafb);
}

/* Lead Cards */
.lead-management-page .lead-card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200, #e5e7eb);
    transition: all 0.2s ease;
    margin-bottom: 1rem;
    padding: 1.5rem;
}

.lead-management-page .lead-card:hover {
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Lead Status Badges */
.lead-management-page .lead-status {
    padding: 0.25rem 0.75rem;
    border-radius: 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
}

.lead-management-page .status-hot {
    background: #fecaca;
    color: #dc2626;
    border: 1px solid #f87171;
}

.lead-management-page .status-warm {
    background: #fde68a;
    color: #d97706;
    border: 1px solid #fbbf24;
}

.lead-management-page .status-cold {
    background: #e0e7ff;
    color: #4338ca;
    border: 1px solid #a5b4fc;
}

.lead-management-page .status-new {
    background: #d1fae5;
    color: #059669;
    border: 1px solid #6ee7b7;
}

/* Lead Score */
.lead-management-page .lead-score {
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #b8860b 0%, #daa520 50%, #ffd700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Action Buttons */
.lead-management-page .action-btn {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    margin: 0.25rem;
    border: none;
    cursor: pointer;
}

.lead-management-page .btn-call {
    background: var(--navy-primary, #1e3a5f);
    color: white;
}

.lead-management-page .btn-call:hover {
    background: var(--navy-dark, #152e4a);
}

.lead-management-page .btn-email {
    background: var(--gold-primary, #C2A875);
    color: white;
}

.lead-management-page .btn-email:hover {
    background: var(--gold-dark, #b8860b);
}

.lead-management-page .btn-text {
    background: var(--green-500, #10b981);
    color: white;
}

.lead-management-page .btn-text:hover {
    background: var(--green-600, #059669);
}

.lead-management-page .btn-note {
    background: var(--orange-500, #f59e0b);
    color: white;
}

.lead-management-page .btn-note:hover {
    background: var(--orange-600, #d97706);
}

.lead-management-page .btn-task {
    background: var(--purple-500, #8b5cf6);
    color: white;
}

.lead-management-page .btn-task:hover {
    background: var(--purple-600, #7c3aed);
}

/* Filter Buttons */
.lead-management-page .filter-btn {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    border: 2px solid var(--gray-300, #e5e7eb);
    background: white;
    color: var(--gray-700, #374151);
    margin: 0.25rem;
    cursor: pointer;
}

.lead-management-page .filter-btn:hover,
.lead-management-page .filter-btn.active {
    background: var(--navy-primary, #1e3a5f);
    color: white;
    border-color: var(--navy-primary, #1e3a5f);
}

/* Section Cards */
.lead-management-page .section-card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid var(--gray-200, #e5e7eb);
}

/* Bulk Selection */
.lead-management-page .lead-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    margin-right: 1rem;
}

/* Urgency Indicators */
.lead-management-page .urgency-indicator {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    display: inline-block;
    margin-left: 0.5rem;
}

.lead-management-page .urgency-high {
    background: var(--red-500, #ef4444);
    animation: pulse-urgent 2s ease-in-out infinite;
}

.lead-management-page .urgency-medium {
    background: var(--yellow-500, #f59e0b);
}

.lead-management-page .urgency-low {
    background: var(--green-500, #10b981);
}

@keyframes pulse-urgent {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Grid and Spacing Utilities for Lead Management */
.lead-management-page .grid {
    display: grid;
}

.lead-management-page .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.lead-management-page .gap-8 {
    gap: 2rem;
}

.lead-management-page .space-y-4 > * + * {
    margin-top: 1rem;
}

.lead-management-page .mb-8 {
    margin-bottom: 2rem;
}

.lead-management-page .p-6 {
    padding: 1.5rem;
}

.lead-management-page .p-8 {
    padding: 2rem;
}

.lead-management-page .flex {
    display: flex;
}

.lead-management-page .flex-1 {
    flex: 1;
}

.lead-management-page .overflow-auto {
    overflow: auto;
}

.lead-management-page .items-center {
    align-items: center;
}

.lead-management-page .items-start {
    align-items: flex-start;
}

.lead-management-page .justify-between {
    justify-content: space-between;
}

.lead-management-page .space-x-4 > * + * {
    margin-left: 1rem;
}

/* Responsive */
@media (min-width: 1024px) {
    .lead-management-page .lg\\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* Lead Management - Additional Structure Styles */
.lead-management-page .admin-content {
    flex: 1;
    overflow: auto;
}

.lead-management-page .admin-content-inner {
    padding: 2rem;
}

.lead-management-page .lead-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.lead-management-page .lead-header-left h1.lead-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gray-900, #111827);
    margin-bottom: 0.5rem;
}

.lead-management-page .lead-subtitle {
    color: var(--gray-600, #4b5563);
    font-size: 1rem;
}

.lead-management-page .section-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-900, #111827);
}

.lead-management-page .btn {
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.lead-management-page .btn-primary {
    background: var(--blue-600, #2563eb);
    color: white;
}

.lead-management-page .btn-primary:hover {
    background: var(--blue-700, #1d4ed8);
}

.lead-management-page .btn-secondary {
    background: white;
    color: var(--gray-700, #374151);
    border: 2px solid var(--gray-300, #d1d5db);
}


/* Lead Management - Additional Components */
.lead-management-page .admin-content-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.lead-management-page .lead-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.lead-management-page .filter-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.lead-management-page .filter-actions {
    display: flex;
    gap: 0.75rem;
}

.lead-management-page .leads-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.lead-management-page .lead-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.lead-management-page .lead-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.lead-management-page .lead-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900, #111827);
    margin: 0;
}

.lead-management-page .lead-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.lead-management-page .lead-contact {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--gray-600, #4b5563);
}

.lead-management-page .lead-property {
    font-size: 0.875rem;
    color: var(--gray-700, #374151);
}

.lead-management-page .lead-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--gray-500, #6b7280);
}

.lead-management-page .lead-card-actions {
    display: flex;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200, #e5e7eb);
}

.lead-management-page .lead-bottom-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

.lead-management-page .section-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.lead-management-page .section-icon {
    font-size: 1.5rem;
}

.lead-management-page .section-card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lead-management-page .stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.lead-management-page .stat-label {
    color: var(--gray-600, #4b5563);
    font-size: 0.875rem;
}

.lead-management-page .stat-value {
    font-weight: 600;
    color: var(--gray-900, #111827);
}

.lead-management-page .status-success {
    color: var(--green-600, #059669);
}

.lead-management-page .btn-block {
    width: 100%;
    justify-content: center;
    margin-top: 0.5rem;
}

.lead-management-page .status-message {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: all 0.3s ease;
}

.lead-management-page .status-message.hidden {
    opacity: 0;
    transform: translateY(1rem);
    pointer-events: none;
}

.lead-management-page .status-info {
    background: var(--blue-50, #eff6ff);
    color: var(--blue-700, #1d4ed8);
    border: 1px solid var(--blue-200, #bfdbfe);
}

.lead-management-page .status-success {
    background: var(--green-50, #f0fdf4);
    color: var(--green-700, #15803d);
    border: 1px solid var(--green-200, #bbf7d0);
}

.lead-management-page .status-error {
    background: var(--red-50, #fef2f2);
    color: var(--red-700, #b91c1c);
    border: 1px solid var(--red-200, #fecaca);
}

.lead-management-page .empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray-500, #6b7280);
    font-size: 1.125rem;
}

/* Lead Management - Leads Grid */
.leads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-6);
}


/* ========================================================================
   REUSABLE WORKFLOW & STATUS COMPONENTS
   Added from Application Workflow & HAR Sync enhancements
   ======================================================================== */

/* Health Banner - Color-coded status banner with countdown */
.health-banner {
    background: white;
    border-radius: 12px;
    padding: 1.5rem 2rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    border-left: 6px solid;
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.health-banner.healthy { 
    border-left-color: #10b981; 
    background: linear-gradient(90deg, #d1fae5 0%, white 100%); 
}

.health-banner.warning { 
    border-left-color: #f59e0b; 
    background: linear-gradient(90deg, #fef3c7 0%, white 100%); 
}

.health-banner.critical { 
    border-left-color: #ef4444; 
    background: linear-gradient(90deg, #fee2e2 0%, white 100%); 
}

.health-status-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.health-icon {
    font-size: 2rem;
}

.health-text-heading {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.health-text-text {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.health-meta {
    text-align: right;
}

.next-sync-countdown {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.25rem;
}

.next-sync-label {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Alert Banner - Error/warning/info alerts */
.alert-banner {
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 2px solid;
}

.alert-banner.error {
    background: #fee2e2;
    border-color: #ef4444;
}

.alert-banner.warning {
    background: #fef3c7;
    border-color: #f59e0b;
}

.alert-banner.info {
    background: #dbeafe;
    border-color: #3b82f6;
}

.alert-banner.success {
    background: #d1fae5;
    border-color: #10b981;
}

.alert-icon {
    font-size: 1.5rem;
}

.alert-banner.error .alert-icon { color: #ef4444; }
.alert-banner.warning .alert-icon { color: #f59e0b; }
.alert-banner.info .alert-icon { color: #3b82f6; }
.alert-banner.success .alert-icon { color: #10b981; }

.alert-text {
    flex: 1;
    font-weight: 600;
}

.alert-banner.error .alert-text { color: #991b1b; }
.alert-banner.warning .alert-text { color: #92400e; }
.alert-banner.info .alert-text { color: #1e40af; }
.alert-banner.success .alert-text { color: #065f46; }

.alert-action {
    padding: 0.5rem 1rem;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
}

.alert-banner.error .alert-action { background: #ef4444; }
.alert-banner.warning .alert-action { background: #f59e0b; }
.alert-banner.info .alert-action { background: #3b82f6; }
.alert-banner.success .alert-action { background: #10b981; }

/* Status Icons - Success/warning/error circular badges */
.status-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    font-size: 0.875rem;
    font-weight: 700;
}

.status-icon.success { 
    background: #d1fae5; 
    color: #065f46; 
}

.status-icon.warning { 
    background: #fef3c7; 
    color: #92400e; 
}

.status-icon.error { 
    background: #fee2e2; 
    color: #991b1b; 
}

/* Role Badges - Agent/Underwriter/Admin badges */
.role-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 0.5rem;
}

.role-badge.agent { 
    background: #dbeafe; 
    color: #1e40af; 
}

.role-badge.underwriter { 
    background: #fef3c7; 
    color: #92400e; 
}

.role-badge.admin { 
    background: #f3e8ff; 
    color: #6b21a8; 
}

/* Automation Badge - Manual vs Automated indicators */
.automation-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

.automation-badge.manual { 
    background: #f3f4f6; 
    color: #6b7280; 
}

.automation-badge.automated { 
    background: #d1fae5; 
    color: #065f46; 
}

/* SLA Indicator - Time status badges */
.sla-indicator {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

.sla-indicator.on-time { 
    background: #d1fae5; 
    color: #065f46; 
}

.sla-indicator.warning { 
    background: #fef3c7; 
    color: #92400e; 
}

.sla-indicator.overdue { 
    background: #fee2e2; 
    color: #991b1b; 
}

/* Tooltips - Hover tooltips with question mark triggers */
.tooltip-trigger {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-text-secondary);
    color: white;
    text-align: center;
    line-height: 16px;
    font-size: 0.75rem;
    cursor: help;
    margin-left: 0.25rem;
    position: relative;
}

.tooltip-trigger:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 0.5rem;
}

.tooltip-trigger:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #1f2937;
    margin-bottom: 0.25rem;
}

/* Step Tooltip - For workflow steps */
.step-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1000;
    margin-bottom: 0.5rem;
}

.step-item:hover .step-tooltip {
    opacity: 1;
}

.step-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #1f2937;
}

/* Error Badge - Small red error count badges */
.error-badge {
    display: inline-block;
    background: #ef4444;
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: 0.5rem;
}

/* Health Status Dot - Small colored status indicators */
.health-status {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.health-status.healthy { background: #10b981; }
.health-status.warning { background: #f59e0b; }
.health-status.critical { background: #ef4444; }

/* Requirement Warning - Missing requirement alerts */
.requirement-warning {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #92400e;
}

.requirement-warning-icon {
    color: #f59e0b;
    font-weight: 700;
}

/* Enhanced Table - Sortable table with status indicators */
.enhanced-table {
    width: 100%;
    border-collapse: collapse;
}

.enhanced-table-th {
    text-align: left;
    padding: 0.75rem;
    border-bottom: 2px solid var(--color-border-subtle);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    user-select: none;
}

.enhanced-table-th:hover {
    background: #f9fafb;
}

.enhanced-table-td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: 0.875rem;
}

.enhanced-table-tr:hover {
    background: #f9fafb;
    cursor: pointer;
}

/* Workflow Filter Bar */
.workflow-filter-bar {
    background: white;
    border: 1px solid var(--color-border-subtle);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.workflow-filter-bar-input {
    flex: 1;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: 8px;
    font-size: 0.875rem;
}

.workflow-filter-bar-select {
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: 8px;
    font-size: 0.875rem;
}


/* ========================================================================
   BEHAVIORAL INTELLIGENCE COMPONENTS
   ======================================================================== */

/* Intelligence Card - Used for metric displays */
.intelligence-card {
  background: white;
  border-radius: 12px;
  border: 1px solid var(--gray-200);
  padding: 24px;
  transition: all 0.3s ease;
}

.intelligence-card:hover {
  box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* Score Circle - Circular badge with score */
.score-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  font-size: 18px;
  color: white;
}

.score-circle.score-high {
  background: linear-gradient(135deg, #10b981, #059669);
}

.score-circle.score-medium {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.score-circle.score-low {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

/* Behavioral Metric Card */
.behavioral-metric {
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}

/* Progress Bar */
.progress-bar {
  height: 8px;
  background: var(--gray-200);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
}

.progress-fill {
  height: 100%;
  transition: width 0.5s ease;
  border-radius: 4px;
}

.progress-fill.urgency-high {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}

.progress-fill.financial-high {
  background: linear-gradient(90deg, #10b981, #059669);
}

.progress-fill.engagement-high {
  background: linear-gradient(90deg, var(--navy-primary), var(--navy-dark));
}

/* Trend Indicators */
.trend-up {
  color: #10b981;
}

.trend-down {
  color: #ef4444;
}

.trend-stable {
  color: var(--gray-600);
}

/* Intelligence Grid Layout */
.intelligence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

/* Behavioral Table */
.behavioral-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 8px;
  overflow: hidden;
}

.behavioral-table-header {
  background: var(--gray-50);
  padding: 12px 16px;
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-200);
}

.behavioral-table-cell {
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-100);
}

.behavioral-table-row:hover {
  background: var(--gray-50);
}


/* ============================================
   TEAM CARDS - About Page
   ============================================ */

.page-about .team-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.3s ease;
}

.page-about .team-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

.page-about .team-avatar {
    position: relative;
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-200) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-about .team-avatar .badge {
    position: absolute;
    top: 12px;
    left: 12px;
}

.page-about .avatar-circle {
    width: 120px;
    height: 120px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    color: var(--navy-primary);
    font-family: 'Playfair Display', serif;
}

.page-about .team-content {
    padding: var(--space-6);
}

.page-about .team-content-heading {
    font-family: 'Playfair Display', serif;
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--navy-primary);
    margin-bottom: var(--space-2);
}

.page-about .team-content .team-credentials {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    margin-bottom: var(--space-4);
}

.page-about .team-content-text {
    color: var(--gray-700);
    line-height: 1.6;
    margin-bottom: var(--space-5);
}

.page-about .team-content .btn {
    width: 100%;
}

/* ========================================================================
   STANDARDIZED MODAL SYSTEM - Consumer Pages
   Based on working manage-booking.html pattern
   ======================================================================== */

/* Modal Container - The outer fixed overlay */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

/* Modal Backdrop - Semi-transparent black background */
.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

/* Modal Wrapper - Centers the modal content */
.modal-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: var(--space-6);
}

/* Modal Container - The white box */
.modal-container {
  background: var(--white);
  border-radius: var(--radius-lg);
  max-width: 56rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-2xl);
}

/* Modal Header */
.modal-header {
  padding: var(--space-6);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  margin: 0;
}

/* Modal Close Button */
.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: background 0.2s ease;
}

.modal-close:hover {
  background: var(--gray-100);
}

.modal-close-icon {
  color: var(--gray-600);
}

/* Modal Content/Body */
.modal-content {
  padding: var(--space-6);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .modal-wrapper {
    padding: 0;
  }
  
  .modal-container {
    max-height: 100vh;
    border-radius: 0;
  }
}

/* Quick View Gallery */
.quick-view-gallery {
  margin-bottom: var(--space-6);
}

.gallery-main {
  position: relative;
  height: 25rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
}

.gallery-main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  padding: var(--space-2);
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-nav:hover {
  background: white;
}

.gallery-nav-prev {
  left: var(--space-4);
}

.gallery-nav-next {
  right: var(--space-4);
}

.gallery-counter {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
}

.gallery-thumbnails {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
}

.gallery-thumbnail {
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.6;
}

.gallery-thumbnail:hover {
  opacity: 0.8;
}

.gallery-thumbnail.active {
  border-color: var(--gold-primary);
  opacity: 1;
  transform: scale(1.05);
}

.gallery-thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Quick View Header */
.quick-view-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.quick-view-price {
  text-align: right;
}

/* Quick View Stats */
.quick-view-stats {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--font-size-lg);
  color: var(--gray-700);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding: var(--space-4) 0;
  margin-bottom: var(--space-6);
}

.stat-item-strong {
  font-weight: var(--font-weight-semibold);
}

.stat-separator {
  color: var(--gray-400);
}

/* Quick View Features */
.quick-view-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--gray-50);
  border-radius: var(--radius-lg);
}

.feature-label {
  font-weight: var(--font-weight-semibold);
  color: var(--navy-primary);
  font-size: var(--font-size-base);
}

.feature-sublabel {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

/* Quick View Description */
.quick-view-description {
  margin: var(--space-6) 0;
}

.quick-view-description-text {
  line-height: 1.7;
}

/* Quick View Note */
.quick-view-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  border-radius: var(--radius-md);
  margin-top: var(--space-6);
}

/* Button sizes defined in design-tokens.css */

/* Mobile Responsive */
@media (max-width: 768px) {
  .modal-container {
    max-height: 100vh;
    border-radius: 0;
  }

  .gallery-main {
    height: 20rem;
  }

  .quick-view-header {
    flex-direction: column;
  }

  .quick-view-price {
    text-align: left;
  }

  .quick-view-stats {
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--font-size-base);
  }

  .quick-view-features {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================
   QUICK VIEW MODAL - Standardized
   ======================================================================== */

.qv-modal-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: var(--space-6);
}

.qv-modal-content {
  background: var(--white);
  border-radius: var(--radius-2xl);
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
}

.qv-modal-header {
  padding: var(--space-6);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background: var(--white);
  z-index: 10;
}

.qv-modal-body {
  padding: var(--space-6);
}

.qv-gallery-main {
  position: relative;
  height: 200px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-3);
}

.qv-gallery-main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qv-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  padding: var(--space-2);
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background 0.2s ease;
}

.qv-gallery-nav:hover {
  background: var(--white);
}

.qv-gallery-nav-prev {
  left: var(--space-4);
}

.qv-gallery-nav-next {
  right: var(--space-4);
}

.qv-gallery-counter {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: var(--white);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
}

.qv-thumbnails {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
}

.qv-thumbnail {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.2s ease;
}

.qv-thumbnail:hover {
  opacity: 0.8;
}

.qv-thumbnail.active {
  border-color: var(--gold-primary);
  opacity: 1;
}

.qv-thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qv-property-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.qv-property-price {
  text-align: right;
}

.qv-price-amount {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--gold-primary);
}

.qv-price-period {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

.qv-stats {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--font-size-lg);
  color: var(--gray-700);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding: var(--space-4) 0;
  margin-bottom: var(--space-6);
}

.qv-stat-separator {
  color: var(--gray-400);
}

.qv-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

.qv-feature-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--gray-50);
  border-radius: var(--radius-xl);
}

.qv-feature-label {
  font-weight: var(--font-weight-semibold);
  color: var(--navy-primary);
  font-size: var(--font-size-base);
}

.qv-feature-sublabel {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
}

.qv-info-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--info-light);
  border: 1px solid var(--info);
  border-radius: var(--radius-lg);
  margin-top: var(--space-6);
}

@media (max-width: 768px) {
  .qv-modal-wrapper {
    padding: 0;
  }
  
  .qv-modal-content {
    max-height: 100vh;
    border-radius: 0;
  }
  
  .qv-gallery-main {
    height: 180px;
  }
  
  .qv-property-header {
    flex-direction: column;
  }
  
  .qv-property-price {
    text-align: left;
  }
  
  .qv-stats {
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--font-size-base);
  }
  
  .qv-features {
    grid-template-columns: 1fr;
  }
}


/* Property Image Clickable - Quick View Indicator */
.property-image-clickable {
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.property-image-clickable::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.property-image-clickable::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background: var(--white);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23002855" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>');
  background-repeat: no-repeat;
  background-position: center;
}

.property-image-clickable:hover::after {
  background: rgba(0, 0, 0, 0.3);
}

.property-image-clickable:hover::before {
  opacity: 1;
}

.property-image-clickable:hover {
  transform: scale(1.02);
}

/* Quick View Modal Additional Classes */
.property-card-clickable {
  cursor: pointer;
}

.btn-full {
  width: 100%;
  display: flex;
  text-decoration: none;
}

.link-gold-centered {
  display: block;
  text-align: center;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.link-gold-centered:hover {
  text-decoration: none;
}

.icon-inline {
  flex-shrink: 0;
  margin-top: 2px;
}
/* ========== AUTHENTICATION COMPONENTS ========== */

/* Auth Layout */
.auth-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-primary) 100%);
}

.auth-card {
  width: 100%;
  max-width: 480px;
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  padding: var(--space-8);
}

/* Auth Header */
.auth-header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.auth-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--navy-primary), var(--navy-dark));
  border-radius: var(--border-radius-full);
  margin-bottom: var(--space-4);
  color: var(--gold-primary);
}

.auth-icon .icon-lg {
  width: 32px;
  height: 32px;
}

.auth-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--navy-dark);
  margin-bottom: var(--space-2);
}

.auth-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin: 0;
}

/* Auth Steps */
.auth-step {
  animation: fadeIn 0.3s ease-in-out;
}

.auth-step.hidden {
  display: none;
}

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

/* Step Indicator */
.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-gray-200);
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.step-number {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-full);
  background: var(--color-gray-200);
  color: var(--color-gray-500);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  transition: all var(--transition-base);
}

.step.active .step-number {
  background: var(--navy-primary);
  color: var(--gold-primary);
}

.step-label {
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  font-weight: var(--font-weight-medium);
}

.step.active .step-label {
  color: var(--navy-dark);
}

.step-divider {
  width: 60px;
  height: 2px;
  background: var(--color-gray-200);
  margin: 0 var(--space-4);
}

/* MFA Code Inputs */
.mfa-code-inputs {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin-bottom: var(--space-6);
}

.mfa-input {
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  border: 2px solid var(--color-gray-300);
  border-radius: var(--border-radius-md);
  transition: all var(--transition-fast);
}

.mfa-input:focus {
  outline: none;
  border-color: var(--navy-primary);
  box-shadow: 0 0 0 3px rgba(43, 75, 115, 0.1);
}

/* Form Enhancements for Auth */
.form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-6);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.security-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-gray-50);
  border-radius: var(--border-radius-md);
  margin-top: var(--space-6);
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
  text-align: center;
}

.security-badge .icon-sm {
  width: 16px;
  height: 16px;
  color: var(--color-success);
}

/* Back Button */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  color: var(--color-gray-600);
  font-size: var(--font-size-sm);
  cursor: pointer;
  margin-bottom: var(--space-4);
  transition: color var(--transition-fast);
}

.btn-back:hover {
  color: var(--navy-primary);
}

.btn-back .icon-sm {
  width: 16px;
  height: 16px;
}

/* Help Links */
.help-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
}

.link-secondary {
  color: var(--navy-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.link-secondary:hover {
  color: var(--gold-primary);
  text-decoration: underline;
}

/* Error Pages */
.error-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-white) 100%);
}

.error-card {
  width: 100%;
  max-width: 600px;
  text-align: center;
  padding: var(--space-8);
}

.error-code {
  font-size: 120px;
  font-weight: var(--font-weight-bold);
  font-family: var(--font-heading);
  background: linear-gradient(135deg, var(--navy-dark), var(--navy-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: var(--space-4);
}

.error-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--navy-dark);
  margin-bottom: var(--space-3);
}

.error-message {
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  margin-bottom: var(--space-8);
}

.error-suggestions {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--border-radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  text-align: left;
}

.error-suggestions h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--navy-dark);
  margin-bottom: var(--space-4);
}

.error-suggestions ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.error-suggestions li {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-gray-100);
}

.error-suggestions li:last-child {
  border-bottom: none;
}

.error-suggestions a {
  color: var(--navy-primary);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: color var(--transition-fast);
}

.error-suggestions a:hover {
  color: var(--gold-primary);
}

/* Icon Utilities */
.icon-sm {
  width: 20px;
  height: 20px;
}

.icon-md {
  width: 24px;
  height: 24px;
}

.icon-lg {
  width: 32px;
  height: 32px;
}

.icon-xl {
  width: 48px;
  height: 48px;
}

/* Error Page Components */
.error-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-primary) 100%);
}

.error-card {
    background: white;
    border-radius: var(--border-radius-lg);
    padding: var(--space-8);
    max-width: 500px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.error-code {
    font-size: 6rem;
    font-weight: 800;
    font-family: 'Playfair Display', serif;
    color: var(--gold-primary);
    line-height: 1;
    margin-bottom: var(--space-4);
}

.error-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--navy-dark);
    margin-bottom: var(--space-3);
}

.error-message {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    margin-bottom: var(--space-6);
    line-height: 1.6;
}

.error-suggestions {
    background: var(--color-gray-50);
    border-radius: var(--border-radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
    text-align: left;
}

.error-suggestions h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--navy-dark);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.error-suggestions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.error-suggestions li {
    margin-bottom: var(--space-2);
}

.error-suggestions a {
    color: var(--navy-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.error-suggestions a:hover {
    color: var(--gold-primary);
}