/**
 * AB Quick Search - Isolated Tailwind CSS Utilities
 * This file replaces the global Tailwind CSS CDN to prevent layout widening issues.
 * All rules are scoped under .abqs and .abqs-results.
 */

/* Visibility */
.abqs .hidden, .abqs-results .hidden, #abqs-mobile-overlay.hidden, #abqs-results-inline.hidden {
  display: none !important;
}

/* Layout & Flexbox */
.abqs .flex, .abqs-results .flex, .abqs-results-list .flex {
  display: flex !important;
}
.abqs .flex-col, .abqs-results .flex-col, .abqs-results-list .flex-col {
  flex-direction: column !important;
}
.abqs .flex-wrap, .abqs-results .flex-wrap, .abqs-results-list .flex-wrap {
  flex-wrap: wrap !important;
}
.abqs .flex-1, .abqs-results .flex-1, .abqs-results-list .flex-1 {
  flex: 1 1 0% !important;
}
.abqs .flex-shrink-0, .abqs-results .flex-shrink-0, .abqs-results-list .flex-shrink-0 {
  flex-shrink: 0 !important;
}
.abqs .items-center, .abqs-results .items-center, .abqs-results-list .items-center {
  align-items: center !important;
}
.abqs .justify-center, .abqs-results .justify-center, .abqs-results-list .justify-center {
  justify-content: center !important;
}
.abqs .justify-between, .abqs-results .justify-between, .abqs-results-list .justify-between {
  justify-content: space-between !important;
}

/* Spacing (Padding & Margin) */
.abqs .p-2, .abqs-results .p-2 { padding: 0.5rem !important; }
.abqs .p-3, .abqs-results .p-3 { padding: 0.75rem !important; }
.abqs .p-4, .abqs-results .p-4 { padding: 1rem !important; }
.abqs .p-6, .abqs-results .p-6 { padding: 1.5rem !important; }
.abqs .px-3, .abqs-results .px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.abqs .py-1, .abqs-results .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.abqs .py-2, .abqs-results .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }

.abqs .mr-3, .abqs-results .mr-3, .abqs-results-list .mr-3 { margin-right: 0.75rem !important; }
.abqs .mb-1, .abqs-results .mb-1, .abqs-results-list .mb-1 { margin-bottom: 0.25rem !important; }
.abqs .mb-2, .abqs-results .mb-2, .abqs-results-list .mb-2 { margin-bottom: 0.5rem !important; }
.abqs .mb-3, .abqs-results .mb-3, .abqs-results-list .mb-3 { margin-bottom: 0.75rem !important; }
.abqs .mb-4, .abqs-results .mb-4, .abqs-results-list .mb-4 { margin-bottom: 1rem !important; }
.abqs .mt-0, .abqs-results .mt-0, .abqs-results-list .mt-0 { margin-top: 0px !important; }
.abqs .mt-auto, .abqs-results .mt-auto, .abqs-results-list .mt-auto { margin-top: auto !important; }
.abqs .mx-4, .abqs-results .mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; }

.abqs .gap-4, .abqs-results .gap-4 { gap: 1rem !important; }
.abqs .space-y-4 > * + *, .abqs-results .space-y-4 > * + * { margin-top: 1rem !important; }
.abqs .space-y-1 > * + *, .abqs-results .space-y-1 > * + * { margin-top: 0.25rem !important; }

/* Sizing */
.abqs .w-full, .abqs-results .w-full { width: 100% !important; }
.abqs .h-full, .abqs-results .h-full { height: 100% !important; }
.abqs .w-12, .abqs-results .w-12, .abqs-results-list .w-12 { width: 3rem !important; }
.abqs .h-12, .abqs-results .h-12, .abqs-results-list .h-12 { height: 3rem !important; }
.abqs .w-16, .abqs-results .w-16, .abqs-results-list .w-16 { width: 4rem !important; }
.abqs .h-16, .abqs-results .h-16, .abqs-results-list .h-16 { height: 4rem !important; }
.abqs .h-24, .abqs-results .h-24, .abqs-results-list .h-24 { height: 6rem !important; }
.abqs .h-36, .abqs-results .h-36, .abqs-results-list .h-36 { height: 9rem !important; }

.abqs .max-w-2xl, .abqs-results .max-w-2xl { max-width: 42rem !important; }
.abqs .max-h-\[80vh\], .abqs-results .max-h-\[80vh\] { max-height: 80vh !important; }
.abqs .min-w-0, .abqs-results .min-w-0, .abqs-results-list .min-w-0 { min-width: 0px !important; }

/* Typography */
.abqs .font-medium, .abqs-results .font-medium, .abqs-results-list .font-medium { font-weight: 500 !important; }
.abqs .font-semibold, .abqs-results .font-semibold, .abqs-results-list .font-semibold { font-weight: 600 !important; }
.abqs .font-bold, .abqs-results .font-bold, .abqs-results-list .font-bold { font-weight: 700 !important; }

.abqs .text-sm, .abqs-results .text-sm, .abqs-results-list .text-sm { font-size: 0.875rem !important; }
.abqs .text-xs, .abqs-results .text-xs, .abqs-results-list .text-xs { font-size: 0.75rem !important; }
.abqs .text-lg, .abqs-results .text-lg, .abqs-results-list .text-lg { font-size: 1.125rem !important; }
.abqs .text-xl, .abqs-results .text-xl, .abqs-results-list .text-xl { font-size: 1.25rem !important; }

.abqs .text-\[10px\], .abqs-results .text-\[10px\], .abqs-results-list .text-\[10px\] { font-size: 10px !important; }
.abqs .text-\[8px\], .abqs-results .text-\[8px\], .abqs-results-list .text-\[8px\] { font-size: 8px !important; }
.abqs .text-\[6px\], .abqs-results .text-\[6px\], .abqs-results-list .text-\[6px\] { font-size: 6px !important; }
.abqs .text-\[12px\], .abqs-results .text-\[12px\], .abqs-results-list .text-\[12px\] { font-size: 12px !important; }

.abqs .leading-tight, .abqs-results .leading-tight, .abqs-results-list .leading-tight { line-height: 1.25 !important; }
.abqs .truncate, .abqs-results .truncate, .abqs-results-list .truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Colors & Backgrounds */
.abqs .bg-white, .abqs-results .bg-white, .abqs-results-list .bg-white { background-color: #ffffff !important; }
.abqs .bg-gray-50, .abqs-results .bg-gray-50 { background-color: #f9fafb !important; }
.abqs .bg-gray-100, .abqs-results .bg-gray-100, .abqs-results-list .bg-gray-100 { background-color: #f3f4f6 !important; }
.abqs .bg-blue-50, .abqs-results .bg-blue-50 { background-color: #eff6ff !important; }

.abqs .text-gray-800, .abqs-results .text-gray-800, .abqs-results-list .text-gray-800 { color: #1f2937 !important; }
.abqs .text-gray-600, .abqs-results .text-gray-600 { color: #4b5563 !important; }
.abqs .text-gray-500, .abqs-results .text-gray-500, .abqs-results-list .text-gray-500 { color: #6b7280 !important; }
.abqs .text-gray-400, .abqs-results .text-gray-400, .abqs-results-list .text-gray-400 { color: #9ca3af !important; }
.abqs .text-blue-800, .abqs-results .text-blue-800 { color: #1e40af !important; }
.abqs .text-blue-700, .abqs-results .text-blue-700 { color: #1d4ed8 !important; }
.abqs .text-blue-600, .abqs-results .text-blue-600 { color: #2563eb !important; }
.abqs .text-orange-600, .abqs-results .text-orange-600, .abqs-results-list .text-orange-600 { color: #ea580c !important; }

/* Borders & Shadows */
.abqs .border, .abqs-results .border { border: 1px solid #e5e7eb !important; }
.abqs .border-t, .abqs-results .border-t { border-top: 1px solid #e5e7eb !important; }
.abqs .border-b, .abqs-results .border-b { border-bottom: 1px solid #e5e7eb !important; }
.abqs .rounded, .abqs-results .rounded, .abqs-results-list .rounded { border-radius: 0.25rem !important; }
.abqs .rounded-md, .abqs-results .rounded-md, .abqs-results-list .rounded-md { border-radius: 0.375rem !important; }
.abqs .rounded-lg, .abqs-results .rounded-lg { border-radius: 0.5rem !important; }

.abqs .shadow-md, .abqs-results .shadow-md, .abqs-results-list .shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}
.abqs .ring-1, .abqs-results .ring-1, .abqs-results-list .ring-1 {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}
.abqs .ring-gray-300, .abqs-results .ring-gray-300, .abqs-results-list .ring-gray-300 {
  --tw-ring-color: #d1d5db !important;
}

/* Positioning & Layout Utility */
.abqs .fixed, .abqs-results .fixed { position: fixed !important; }
.abqs .inset-0, .abqs-results .inset-0 { top: 0px !important; right: 0px !important; bottom: 0px !important; left: 0px !important; }
.abqs .z-50, .abqs-results .z-50 { z-index: 50 !important; }
.abqs .overflow-hidden, .abqs-results .overflow-hidden, .abqs-results-list .overflow-hidden { overflow: hidden !important; }
.abqs .overflow-y-auto, .abqs-results .overflow-y-auto { overflow-y: auto !important; }

/* Grid columns for search results box layout */
.abqs .grid, .abqs-results .grid {
  display: grid !important;
}
.abqs .grid-cols-1, .abqs-results .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.abqs .grid-cols-2, .abqs-results .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.abqs .grid-cols-3, .abqs-results .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.abqs .grid-cols-4, .abqs-results .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.abqs .grid-cols-6, .abqs-results .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }

/* Responsive Grid columns for desktop (lg:) */
@media (min-width: 1024px) {
  .abqs .lg\:grid-cols-1, .abqs-results .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .abqs .lg\:grid-cols-2, .abqs-results .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .abqs .lg\:grid-cols-3, .abqs-results .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .abqs .lg\:grid-cols-4, .abqs-results .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .abqs .lg\:grid-cols-5, .abqs-results .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .abqs .lg\:grid-cols-6, .abqs-results .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .abqs .lg\:grid-cols-8, .abqs-results .lg\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
  .abqs .lg\:grid-cols-12, .abqs-results .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
}

/* Optimize search box width on desktop */
@media (min-width: 768px) {
  .abqs#abqs-search {
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }
  .abqs #abqs-results-inline {
    width: 130% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

/* Show/hide desktop and mobile parts instantly */
@media (max-width: 767px) {
  .abqs .abqs-desktop-only {
    display: none !important;
  }
  .abqs .abqs-mobile-only {
    display: block !important;
  }
}
@media (min-width: 768px) {
  .abqs .abqs-desktop-only {
    display: block !important;
  }
  .abqs .abqs-mobile-only {
    display: none !important;
  }
}