/* Basecoat UI Integration for OpHire Frappe App */
/* Following official Basecoat installation guide */

/* 
 * Note: Basecoat CSS and Tailwind are loaded via CDN in base template
 * This file contains only custom OpHire theme overrides and utilities
 */

/* Custom OpHire theme overrides */
:root {
  /* OpHire brand colors */
  --primary: #3b82f6;
  --primary-foreground: #ffffff;
  --secondary: #64748b;
  --secondary-foreground: #ffffff;
  --accent: #f1f5f9;
  --accent-foreground: #0f172a;
  
  /* OpHire specific styling */
  --operhire-blue: #3b82f6;
  --operhire-gray: #64748b;
  --operhire-light: #f8fafc;
}

/* Custom button styling for OpHire brand */
.btn-operhire {
  @apply bg-blue-500 text-white hover:bg-blue-600 transition-colors;
}

/* Job card styling with Basecoat components */
.job-card-basecoat {
  @apply border rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow;
}

/* Search styling with Basecoat */
.search-basecoat {
  @apply w-full max-w-md mx-auto;
}

/* Enhanced card hover effects */
.card-hover {
  @apply shadow-lg transform scale-105;
}

/* Job card specific styling */
.job-card-enhanced {
  @apply transition-all duration-300 hover:shadow-lg;
}

/* Badge enhancements */
.badge {
  @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
}

.badge-outline {
  @apply border border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground;
}

/* AI score circles */
.ai-score-circle {
  @apply flex items-center justify-center w-8 h-8 rounded-full font-bold text-sm;
}

/* Loading skeleton animations */
.skeleton-pulse {
  @apply animate-pulse bg-accent/50;
}

/* Filter enhancement */
.filter-chip {
  @apply inline-flex items-center px-3 py-1 rounded-full text-sm bg-primary/10 text-primary border border-primary/20;
}

.filter-chip-removable {
  @apply cursor-pointer hover:bg-primary/20 transition-colors;
}

/* Quick filter tags enhancement */
.quick-filter-tag {
  @apply transition-all duration-200 hover:scale-105;
}

/* Line clamp utility for descriptions */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Responsive utilities for OpHire */
@media (max-width: 768px) {
  .mobile-stack {
    @apply flex flex-col space-y-4;
  }
  
  .mobile-card-compact {
    @apply p-4;
  }
  
  .mobile-hide-secondary {
    @apply hidden;
  }
}