/* CapitalMatch Custom Styles - Catalyst Design System */

/* Base styles and utilities */
.catalyst-shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.catalyst-shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Modern card shadows */
.card-shadow {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.card-shadow-hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Gradient backgrounds */
.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.sidebar-gradient {
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
}

/* Custom scrollbar for webkit browsers */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Enhanced Smooth Transitions and Animations */

/* Base transition classes */
.transition-smooth {
    transition: all 0.2s ease-in-out;
}

.transition-fast {
    transition: all 0.15s ease-in-out;
}

.transition-slow {
    transition: all 0.3s ease-in-out;
}

/* Fade transitions */
.fade-in-out {
    transition: opacity 0.2s ease-in-out;
}

.fade-enter {
    @apply transition-opacity duration-200 ease-out opacity-0;
}

.fade-enter-active {
    @apply opacity-100;
}

.fade-leave {
    @apply transition-opacity duration-150 ease-in opacity-100;
}

.fade-leave-active {
    @apply opacity-0;
}

/* Slide transitions */
.slide-in-out {
    transition: transform 0.2s ease-in-out;
}

.slide-up-enter {
    @apply transition-transform duration-200 ease-out transform translate-y-2 opacity-0;
}

.slide-up-enter-active {
    @apply transform translate-y-0 opacity-100;
}

.slide-down-enter {
    @apply transition-transform duration-200 ease-out transform -translate-y-2 opacity-0;
}

.slide-down-enter-active {
    @apply transform translate-y-0 opacity-100;
}

.slide-left-enter {
    @apply transition-transform duration-200 ease-out transform translate-x-2 opacity-0;
}

.slide-left-enter-active {
    @apply transform translate-x-0 opacity-100;
}

.slide-right-enter {
    @apply transition-transform duration-200 ease-out transform -translate-x-2 opacity-0;
}

.slide-right-enter-active {
    @apply transform translate-x-0 opacity-100;
}

/* Scale transitions */
.scale-enter {
    @apply transition-transform duration-200 ease-out transform scale-95 opacity-0;
}

.scale-enter-active {
    @apply transform scale-100 opacity-100;
}

/* Bounce animation for notifications */
@keyframes bounce-in {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-bounce-in {
    animation: bounce-in 0.6s ease-out;
}

/* Hover and focus animations */
.hover-lift {
    @apply transition-transform duration-200 ease-in-out;
}

.hover-lift:hover {
    @apply transform -translate-y-1;
}

.hover-scale {
    @apply transition-transform duration-200 ease-in-out;
}

.hover-scale:hover {
    @apply transform scale-105;
}

/* Button press animation */
.btn-press {
    @apply transition-transform duration-75 ease-in-out;
}

.btn-press:active {
    @apply transform scale-95;
}

/* Enhanced Loading States and Skeleton Screens */

/* Pulse animation for loading states */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Skeleton screen components */
.skeleton {
    @apply animate-pulse bg-gray-200 rounded;
}

.skeleton-text {
    @apply skeleton h-4 mb-2;
}

.skeleton-text-sm {
    @apply skeleton h-3 mb-1;
}

.skeleton-text-lg {
    @apply skeleton h-6 mb-3;
}

.skeleton-avatar {
    @apply skeleton rounded-full;
}

.skeleton-button {
    @apply skeleton h-10 w-24 rounded-md;
}

.skeleton-card {
    @apply skeleton h-32 rounded-lg;
}

.skeleton-table-row {
    @apply skeleton h-12 mb-2 rounded;
}

/* Shimmer effect for enhanced loading */
@keyframes shimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.skeleton-shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200px 100%;
    animation: shimmer 1.5s infinite;
}

/* Loading spinner variations */
.spinner {
    @apply animate-spin rounded-full border-2 border-gray-300 border-t-indigo-600;
}

.spinner-sm {
    @apply w-4 h-4;
}

.spinner-md {
    @apply w-6 h-6;
}

.spinner-lg {
    @apply w-8 h-8;
}

.spinner-xl {
    @apply w-12 h-12;
}

/* Loading overlay */
.loading-overlay {
    @apply absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center z-10;
}

.loading-overlay-dark {
    @apply absolute inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-10;
}

/* Focus styles for accessibility */
.focus-ring:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Button variants - Catalyst Style */
.btn-primary {
    @apply bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-md shadow-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
}

.btn-secondary {
    @apply bg-white hover:bg-gray-50 text-gray-700 font-medium py-2 px-4 rounded-md border border-gray-300 shadow-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
}

.btn-ghost {
    @apply hover:bg-gray-100 text-gray-700 font-medium py-2 px-4 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
}

.btn-sm {
    @apply py-1.5 px-3 text-sm;
}

.btn-lg {
    @apply py-3 px-6 text-base;
}

/* Enhanced Form Styles with Validation */

/* Base form input styles */
.form-input {
    @apply block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm transition-colors duration-200;
}

.form-select {
    @apply block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm transition-colors duration-200;
}

/* Form validation states */
.form-input-valid {
    @apply border-green-300 focus:border-green-500 focus:ring-green-500;
}

.form-input-invalid {
    @apply border-red-300 focus:border-red-500 focus:ring-red-500;
}

.form-input-warning {
    @apply border-yellow-300 focus:border-yellow-500 focus:ring-yellow-500;
}

/* Form validation feedback */
.form-feedback {
    @apply mt-1 text-sm;
}

.form-feedback-valid {
    @apply text-green-600;
}

.form-feedback-invalid {
    @apply text-red-600;
}

.form-feedback-warning {
    @apply text-yellow-600;
}

/* Form field container */
.form-field {
    @apply relative;
}

/* Floating label styles */
.form-floating {
    @apply relative;
}

.form-floating input {
    @apply pt-6 pb-2;
}

.form-floating label {
    @apply absolute left-3 top-2 text-xs text-gray-500 transition-all duration-200;
}

.form-floating input:focus + label,
.form-floating input:not(:placeholder-shown) + label {
    @apply text-xs top-1 text-indigo-600;
}

/* Form validation icons */
.form-icon-valid {
    @apply absolute right-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-green-500;
}

.form-icon-invalid {
    @apply absolute right-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-red-500;
}

/* Real-time validation indicators */
.validation-indicator {
    @apply absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 rounded-full flex items-center justify-center text-xs font-bold text-white;
}

.validation-indicator-valid {
    @apply bg-green-500;
}

.validation-indicator-invalid {
    @apply bg-red-500;
}

.validation-indicator-checking {
    @apply bg-yellow-500 animate-pulse;
}

/* Form progress indicator */
.form-progress {
    @apply w-full bg-gray-200 rounded-full h-2 mb-4;
}

.form-progress-bar {
    @apply bg-indigo-600 h-2 rounded-full transition-all duration-300;
}

/* Mobile form optimizations */
@media (max-width: 640px) {
    .form-input,
    .form-select {
        @apply text-base; /* Prevents zoom on iOS */
        min-height: 44px; /* Touch target size */
    }
    
    .form-button {
        min-height: 44px; /* Touch target size */
        @apply w-full; /* Full width on mobile */
    }
}

/* Card styles */
.card {
    @apply bg-white rounded-lg catalyst-shadow border border-gray-200;
}

.card-header {
    @apply px-6 py-4 border-b border-gray-200;
}

.card-body {
    @apply px-6 py-4;
}

/* Table styles */
.table-auto th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.table-auto td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

/* Enhanced Responsive Design */

/* Mobile-first responsive breakpoints */
@media (max-width: 640px) {
    .mobile-hidden {
        display: none;
    }
    
    /* Mobile-specific layouts */
    .mobile-stack {
        @apply flex-col space-y-2;
    }
    
    .mobile-full-width {
        @apply w-full;
    }
    
    .mobile-text-center {
        @apply text-center;
    }
    
    .mobile-padding {
        @apply px-4 py-2;
    }
    
    /* Mobile navigation adjustments */
    .mobile-nav-item {
        @apply text-base py-3;
    }
    
    /* Mobile form adjustments */
    .mobile-form-input {
        @apply text-base; /* Prevents zoom on iOS */
    }
    
    /* Mobile table adjustments */
    .mobile-table-scroll {
        @apply overflow-x-auto;
    }
    
    .mobile-card-spacing {
        @apply space-y-3;
    }
}

@media (max-width: 768px) {
    /* Tablet adjustments */
    .tablet-hidden {
        @apply hidden;
    }
    
    .tablet-grid-cols-1 {
        @apply grid-cols-1;
    }
    
    .tablet-text-sm {
        @apply text-sm;
    }
    
    /* Compact spacing for tablets */
    .tablet-compact {
        @apply px-3 py-2;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* Desktop tablet range */
    .desktop-tablet-grid-cols-2 {
        @apply grid-cols-2;
    }
}

@media (min-width: 1025px) {
    /* Large desktop adjustments */
    .desktop-grid-cols-4 {
        @apply grid-cols-4;
    }
    
    .desktop-max-w-none {
        @apply max-w-none;
    }
}

/* Navigation styles */
.nav-item {
    @apply group flex items-center px-2 py-2 text-sm font-medium rounded-md transition-colors duration-150;
}

.nav-item.active {
    @apply bg-blue-50 border-r-2 border-blue-600 text-blue-700;
}

.nav-item:not(.active) {
    @apply text-gray-600 hover:bg-gray-50 hover:text-gray-900;
}

.nav-icon {
    @apply mr-3 flex-shrink-0 h-5 w-5;
}

.nav-icon.active {
    @apply text-blue-500;
}

.nav-icon:not(.active) {
    @apply text-gray-400 group-hover:text-gray-500;
}

/* Header styles */
.header-shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* Mobile sidebar overlay */
.sidebar-overlay {
    @apply fixed inset-0 bg-gray-600 bg-opacity-75 z-40;
}

/* Search bar styles */
.search-input {
    @apply block w-full h-full pl-8 pr-3 py-2 border-transparent text-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-0 focus:border-transparent sm:text-sm;
}

/* Notification badge */
.notification-badge {
    @apply absolute -top-1 -right-1 h-4 w-4 bg-red-500 text-white text-xs rounded-full flex items-center justify-center;
}

/* User avatar */
.user-avatar {
    @apply inline-block rounded-full bg-gray-400 flex items-center justify-center text-white font-medium;
}

/* Dropdown menu */
.dropdown-menu {
    @apply origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50;
}

.dropdown-item {
    @apply block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-150;
}

/* Content area */
.main-content {
    @apply flex-1 relative overflow-y-auto focus:outline-none;
}

.content-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 md:px-8;
}

.page-header {
    @apply mb-8;
}

.page-title {
    @apply text-2xl font-semibold text-gray-900;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .sidebar-desktop {
        display: none;
    }
}

@media (min-width: 1024px) {
    .sidebar-mobile {
        display: none;
    }
    
    .mobile-menu-button {
        display: none;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
}

/* Search Engine Specific Styles */

/* Search bar enhancements */
.search-container {
    @apply relative;
}

.search-suggestions {
    @apply absolute z-50 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm;
}

.search-suggestion-item {
    @apply cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-indigo-50 transition-colors duration-150;
}

.search-suggestion-item:hover {
    @apply bg-indigo-50 text-indigo-900;
}

/* Filter chips */
.filter-chip {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800 transition-colors duration-150;
}

.filter-chip:hover {
    @apply bg-indigo-200;
}

.filter-chip-remove {
    @apply ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:outline-none transition-colors duration-150;
}

/* Advanced filters panel */
.filters-panel {
    @apply bg-white shadow-sm rounded-lg border border-gray-200;
}

.filters-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4;
}

/* Results table enhancements */
.results-table {
    @apply min-w-full divide-y divide-gray-200;
}

.results-table th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100 transition-colors duration-150;
}

.results-table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

.results-table tr:hover {
    @apply bg-gray-50;
}

/* Sortable column headers */
.sortable-header {
    @apply flex items-center space-x-1 select-none;
}

.sort-icon {
    @apply w-4 h-4 text-gray-400;
}

.sort-icon.active {
    @apply text-gray-600;
}

/* Card view styles */
.results-card {
    @apply bg-white shadow-sm rounded-lg border border-gray-200 p-6 hover:shadow-md transition-shadow duration-200;
}

.results-card:hover {
    @apply shadow-md;
}

/* Pagination styles */
.pagination-container {
    @apply flex items-center justify-between;
}

.pagination-info {
    @apply text-sm text-gray-700;
}

.pagination-nav {
    @apply relative z-0 inline-flex rounded-md shadow-sm -space-x-px;
}

.pagination-button {
    @apply relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 transition-colors duration-150;
}

.pagination-button.active {
    @apply z-10 bg-indigo-50 border-indigo-500 text-indigo-600;
}

.pagination-button:disabled {
    @apply opacity-50 cursor-not-allowed;
}

/* View mode toggle */
.view-toggle {
    @apply flex rounded-md shadow-sm;
}

.view-toggle-button {
    @apply relative inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 transition-colors duration-150;
}

.view-toggle-button.active {
    @apply bg-indigo-600 text-white border-indigo-600;
}

.view-toggle-button:not(.active) {
    @apply bg-white text-gray-700 hover:bg-gray-50;
}

.view-toggle-button:first-child {
    @apply rounded-l-md;
}

.view-toggle-button:last-child {
    @apply -ml-px rounded-r-md;
}

/* Loading states */
.search-loading {
    @apply flex items-center justify-center py-8;
}

.loading-spinner {
    @apply animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600;
}

/* Empty states */
.empty-state {
    @apply text-center py-8;
}

.empty-state-icon {
    @apply mx-auto h-12 w-12 text-gray-400;
}

.empty-state-title {
    @apply mt-2 text-sm font-medium text-gray-900;
}

.empty-state-description {
    @apply mt-1 text-sm text-gray-500;
}

/* Modal enhancements */
.modal-overlay {
    @apply fixed inset-0 z-50 overflow-y-auto;
}

.modal-container {
    @apply flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0;
}

.modal-backdrop {
    @apply fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity;
}

.modal-content {
    @apply inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6;
}

/* Status badges */
.status-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.status-badge.active {
    @apply bg-green-100 text-green-800;
}

.status-badge.matured {
    @apply bg-gray-100 text-gray-800;
}

.status-badge.refinanced {
    @apply bg-blue-100 text-blue-800;
}

/* Lender type badges */
.lender-type-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium capitalize;
}

.lender-type-badge.bank {
    @apply bg-blue-100 text-blue-800;
}

.lender-type-badge.cmbs {
    @apply bg-purple-100 text-purple-800;
}

.lender-type-badge.life-company {
    @apply bg-green-100 text-green-800;
}

.lender-type-badge.debt-fund {
    @apply bg-orange-100 text-orange-800;
}

/* Verified badge */
.verified-badge {
    @apply inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800;
}

/* Rating display */
.rating-display {
    @apply flex items-center;
}

.rating-star {
    @apply w-4 h-4 text-yellow-400 ml-1;
}

/* Action buttons */
.action-button {
    @apply text-indigo-600 hover:text-indigo-900 font-medium transition-colors duration-150;
}

.action-button.secondary {
    @apply text-gray-600 hover:text-gray-900;
}

/* Responsive table */
@media (max-width: 768px) {
    .results-table {
        @apply text-xs;
    }
    
    .results-table th,
    .results-table td {
        @apply px-3 py-2;
    }
    
    .mobile-hidden {
        @apply hidden;
    }
}

/* Focus improvements for accessibility */
.search-input:focus {
    @apply ring-2 ring-indigo-500 border-indigo-500;
}

.filter-select:focus {
    @apply ring-2 ring-indigo-500 border-indigo-500;
}

/* Smooth animations */
.fade-enter {
    @apply transition-opacity duration-200 ease-out;
}

.fade-enter-start {
    @apply opacity-0;
}

.fade-enter-end {
    @apply opacity-100;
}

.fade-leave {
    @apply transition-opacity duration-150 ease-in;
}

.fade-leave-start {
    @apply opacity-100;
}

.fade-leave-end {
    @apply opacity-0;
}

.slide-enter {
    @apply transition-transform duration-200 ease-out;
}

.slide-enter-start {
    @apply transform -translate-y-2;
}

.slide-enter-end {
    @apply transform translate-y-0;
}

.slide-leave {
    @apply transition-transform duration-150 ease-in;
}

.slide-leave-start {
    @apply transform translate-y-0;
}

.slide-leave-end {
    @apply transform -translate-y-2;
}
/
* Touch Interaction Optimizations */

/* Touch target sizing */
.touch-target {
    min-height: 44px;
    min-width: 44px;
}

.touch-target-sm {
    min-height: 36px;
    min-width: 36px;
}

.touch-target-lg {
    min-height: 56px;
    min-width: 56px;
}

/* Touch feedback */
.touch-feedback {
    @apply transition-all duration-150 ease-in-out;
}

.touch-feedback:active {
    @apply transform scale-95 bg-gray-100;
}

.touch-feedback-primary:active {
    @apply transform scale-95 bg-indigo-700;
}

/* Swipe gestures */
.swipeable {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.swipe-indicator {
    @apply absolute top-2 left-1/2 transform -translate-x-1/2 w-8 h-1 bg-gray-300 rounded-full;
}

/* Mobile navigation enhancements */
.mobile-nav-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 z-40;
    backdrop-filter: blur(4px);
}

.mobile-nav-panel {
    @apply fixed inset-y-0 left-0 w-80 max-w-full bg-white shadow-xl z-50 transform transition-transform duration-300 ease-in-out;
}

.mobile-nav-panel.closed {
    @apply -translate-x-full;
}

.mobile-nav-panel.open {
    @apply translate-x-0;
}

/* Pull-to-refresh indicator */
.pull-to-refresh {
    @apply absolute top-0 left-0 right-0 h-16 flex items-center justify-center bg-gray-50 transform -translate-y-full transition-transform duration-200;
}

.pull-to-refresh.active {
    @apply translate-y-0;
}

/* Mobile-specific button styles */
.mobile-button {
    @apply w-full py-3 px-4 text-base font-medium rounded-lg transition-colors duration-200;
}

.mobile-button-primary {
    @apply bg-indigo-600 text-white hover:bg-indigo-700 active:bg-indigo-800;
}

.mobile-button-secondary {
    @apply bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-300;
}

/* Mobile card interactions */
.mobile-card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 p-4 transition-all duration-200;
}

.mobile-card:active {
    @apply shadow-md transform scale-98;
}

/* Sticky elements for mobile */
.mobile-sticky-header {
    @apply sticky top-0 z-30 bg-white border-b border-gray-200;
    backdrop-filter: blur(8px);
    background-color: rgba(255, 255, 255, 0.95);
}

.mobile-sticky-footer {
    @apply sticky bottom-0 z-30 bg-white border-t border-gray-200 p-4;
    backdrop-filter: blur(8px);
    background-color: rgba(255, 255, 255, 0.95);
}

/* Safe area handling for iOS */
@supports (padding: max(0px)) {
    .safe-area-top {
        padding-top: max(1rem, env(safe-area-inset-top));
    }
    
    .safe-area-bottom {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
    
    .safe-area-left {
        padding-left: max(1rem, env(safe-area-inset-left));
    }
    
    .safe-area-right {
        padding-right: max(1rem, env(safe-area-inset-right));
    }
}

/* Accessibility improvements */
.focus-visible-only:focus:not(:focus-visible) {
    outline: none;
}

.focus-visible-only:focus-visible {
    @apply outline-2 outline-offset-2 outline-indigo-500;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .form-input,
    .form-select {
        @apply border-2 border-gray-900;
    }
    
    .btn-primary {
        @apply border-2 border-indigo-900;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .transition-smooth,
    .transition-fast,
    .transition-slow,
    .fade-in-out,
    .slide-in-out,
    .hover-lift,
    .hover-scale,
    .btn-press {
        transition: none;
    }
    
    .animate-pulse,
    .animate-bounce-in,
    .spinner {
        animation: none;
    }
}

/* Dark mode preparations (not implemented in demo) */
@media (prefers-color-scheme: dark) {
    .dark-mode-ready {
        /* Placeholder for future dark mode implementation */
    }
}

/* Print optimizations */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-break-before {
        page-break-before: always;
    }
    
    .print-break-after {
        page-break-after: always;
    }
    
    .print-break-inside-avoid {
        page-break-inside: avoid;
    }
}

/* Performance optimizations */
.gpu-accelerated {
    transform: translateZ(0);
    will-change: transform;
}

.contain-layout {
    contain: layout;
}

.contain-paint {
    contain: paint;
}

/* Custom scrollbars for mobile */
@media (max-width: 768px) {
    .custom-scrollbar {
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 #f1f5f9;
    }
    
    .custom-scrollbar::-webkit-scrollbar {
        width: 4px;
    }
    
    .custom-scrollbar::-webkit-scrollbar-track {
        background: #f1f5f9;
    }
    
    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 2px;
    }
}

/* AI Assistant Specific Styles */
.ai-chat-messages {
    @apply custom-scrollbar;
    scroll-behavior: smooth;
}

.ai-message-bubble {
    @apply max-w-xs lg:max-w-md;
}

.ai-message-user {
    @apply bg-indigo-600 text-white px-4 py-2 rounded-lg;
}

.ai-message-assistant {
    @apply bg-gray-100 text-gray-900 px-4 py-2 rounded-lg;
}

.ai-message-system {
    @apply bg-yellow-100 text-yellow-800 border border-yellow-200 px-4 py-2 rounded-lg;
}

.ai-typing-indicator {
    @apply flex space-x-1;
}

.ai-typing-dot {
    @apply w-2 h-2 bg-gray-400 rounded-full animate-bounce;
}

.ai-typing-dot:nth-child(2) {
    animation-delay: 0.1s;
}

.ai-typing-dot:nth-child(3) {
    animation-delay: 0.2s;
}

.ai-quick-action-grid {
    @apply grid grid-cols-2 gap-2;
}

.ai-quick-action-button {
    @apply p-3 text-left bg-gray-50 hover:bg-gray-100 rounded-lg border border-gray-200 transition-colors;
}

.ai-usage-bar {
    @apply w-full bg-gray-200 rounded-full h-2;
}

.ai-usage-fill {
    @apply h-2 rounded-full transition-all duration-300;
}

.ai-usage-queries {
    @apply bg-indigo-600;
}

.ai-usage-documents {
    @apply bg-green-600;
}

.ai-usage-matches {
    @apply bg-purple-600;
}

.ai-data-card {
    @apply bg-white border border-gray-200 rounded-lg p-4 space-y-3;
}

.ai-lender-recommendation {
    @apply flex items-center justify-between p-3 bg-gray-50 rounded-lg;
}

.ai-match-score {
    @apply text-xs font-medium text-indigo-600;
}

.ai-document-analysis {
    @apply bg-white border border-gray-200 rounded-lg p-4;
}

.ai-extracted-data-grid {
    @apply grid grid-cols-2 gap-4 mb-4;
}

.ai-key-findings {
    @apply space-y-3;
}

.ai-finding-item {
    @apply flex items-start;
}

.ai-finding-bullet {
    @apply w-1.5 h-1.5 bg-green-500 rounded-full mt-2 mr-2 flex-shrink-0;
}

.ai-market-insights {
    @apply bg-white border border-gray-200 rounded-lg p-4 space-y-3;
}

.ai-rate-comparison {
    @apply bg-white border border-gray-200 rounded-lg p-4;
}

.ai-rate-item {
    @apply flex justify-between items-center py-2 border-b border-gray-100 last:border-b-0;
}

/* AI Assistant Mobile Optimizations */
@media (max-width: 768px) {
    .ai-chat-container {
        @apply h-[500px];
    }
    
    .ai-message-bubble {
        @apply max-w-xs;
    }
    
    .ai-quick-action-grid {
        @apply grid-cols-1 gap-2;
    }
    
    .ai-extracted-data-grid {
        @apply grid-cols-1 gap-2;
    }
    
    .ai-sidebar {
        @apply mt-6 space-y-4;
    }
}