/* ===== SAFE ENTERPRISE UPGRADE FOR FASTRACK MEDICAL BILLING ===== */
/*
 * 🛡️ SAFETY FIRST APPROACH
 * This file allows you to gradually test enterprise features
 * WITHOUT breaking your existing website
 * 
 * HOW TO USE:
 * 1. Add this file to your HTML AFTER your existing stylesheets
 * 2. Test one section at a time
 * 3. Gradually replace main.css with enterprise system
 */

/* ===== ENTERPRISE DESIGN TOKENS (SAFE OVERRIDE) ===== */
/* These enhance your existing CSS without breaking anything */

:root {
    /* Enhanced color tokens that work with your existing system */
    --enterprise-primary: var(--primary-color, #3b82f6);
    --enterprise-secondary: var(--secondary-color, #10b981);
    --enterprise-success: var(--color-success, #10b981);
    --enterprise-warning: var(--color-warning, #f59e0b);
    --enterprise-danger: var(--color-danger, #ef4444);
    
    /* Enhanced spacing tokens */
    --enterprise-space-xs: 0.25rem;
    --enterprise-space-sm: 0.5rem;
    --enterprise-space-md: 1rem;
    --enterprise-space-lg: 1.5rem;
    --enterprise-space-xl: 2rem;
    --enterprise-space-2xl: 3rem;
    
    /* Enhanced animation tokens */
    --enterprise-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --enterprise-transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --enterprise-transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Enterprise shadows (enhanced) */
    --enterprise-shadow-subtle: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --enterprise-shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --enterprise-shadow-strong: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --enterprise-shadow-glow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ===== ENTERPRISE UTILITY CLASSES (SAFE ADDITIONS) ===== */
/* These add functionality without changing existing elements */

.enterprise-text-gradient {
    background: linear-gradient(135deg, var(--enterprise-primary), var(--enterprise-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.enterprise-glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.enterprise-hover-lift {
    transition: all var(--enterprise-transition-base);
}

.enterprise-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--enterprise-shadow-strong);
}

.enterprise-focus-ring {
    transition: box-shadow var(--enterprise-transition-fast);
}

.enterprise-focus-ring:focus {
    outline: none;
    box-shadow: var(--enterprise-shadow-glow);
}

/* ===== SAFE PERFORMANCE ENHANCEMENTS ===== */
/* These improve performance without changing appearance */

.enterprise-gpu-hint {
    transform: translateZ(0);
    backface-visibility: hidden;
}

.enterprise-will-animate {
    will-change: transform, opacity;
}

.enterprise-contain-layout {
    contain: layout style;
}

/* ===== ENTERPRISE ACCESSIBILITY ENHANCEMENTS ===== */
/* These improve accessibility without changing design */

@media (prefers-reduced-motion: reduce) {
    .enterprise-respect-motion,
    .enterprise-respect-motion *,
    .enterprise-respect-motion::before,
    .enterprise-respect-motion::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: high) {
    .enterprise-high-contrast {
        border-width: 2px;
        font-weight: 600;
    }
}

/* ===== SAFE COMPONENT ENHANCEMENTS ===== */
/* These enhance existing components without breaking them */

/* Enhanced buttons (only applies to elements with class) */
.enterprise-button {
    position: relative;
    overflow: hidden;
    transition: all var(--enterprise-transition-base);
}

.enterprise-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.enterprise-button:hover::before {
    left: 100%;
}

/* Enhanced cards */
.enterprise-card {
    border-radius: 1rem;
    box-shadow: var(--enterprise-shadow-soft);
    transition: all var(--enterprise-transition-base);
    overflow: hidden;
}

.enterprise-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--enterprise-shadow-strong);
}

/* Enhanced form inputs */
.enterprise-input {
    transition: all var(--enterprise-transition-base);
    border-radius: 0.5rem;
}

.enterprise-input:focus {
    transform: translateY(-1px);
    box-shadow: var(--enterprise-shadow-glow);
}

/* ===== CRITICAL CSS OPTIMIZATION (SAFE) ===== */
/* These optimize loading without changing appearance */

.enterprise-critical {
    /* Mark critical above-the-fold content */
    content-visibility: auto;
    contain-intrinsic-size: 1px 1000px;
}

.enterprise-lazy {
    /* Mark non-critical content for lazy loading */
    content-visibility: auto;
    contain-intrinsic-size: 1px 500px;
}

/* ===== ENTERPRISE DOCUMENTATION CLASSES ===== */
/* These help document your components */

.enterprise-component {
    /* Base class for all enterprise components */
    position: relative;
}

.enterprise-component[data-component]::before {
    /* Development helper - shows component names */
    content: attr(data-component);
    position: absolute;
    top: -20px;
    left: 0;
    font-size: 10px;
    color: #666;
    background: #f0f0f0;
    padding: 2px 4px;
    border-radius: 2px;
    display: none; /* Show only in development */
}

/* ===== SAFE RESPONSIVE ENHANCEMENTS ===== */
/* These improve mobile experience without breaking layout */

@media (max-width: 768px) {
    .enterprise-mobile-stack {
        flex-direction: column;
    }
    
    .enterprise-mobile-center {
        text-align: center;
    }
    
    .enterprise-mobile-full {
        width: 100%;
    }
}

/* ===== INTEGRATION INSTRUCTIONS ===== */
/*
 * TO SAFELY UPGRADE YOUR WEBSITE:
 * 
 * 1. Add this CSS file to your HTML:
 *    <link rel="stylesheet" href="styles/enterprise/safe-upgrade.css">
 * 
 * 2. Start adding enterprise classes to test:
 *    <button class="btn btn--primary enterprise-button enterprise-hover-lift">
 * 
 * 3. Test each enhancement individually:
 *    - Add .enterprise-glass-effect to cards
 *    - Add .enterprise-hover-lift to interactive elements  
 *    - Add .enterprise-focus-ring to form inputs
 * 
 * 4. Once satisfied, gradually replace main.css imports with:
 *    <link rel="stylesheet" href="styles/enterprise/enterprise.css">
 * 
 * 5. Your existing classes will continue to work!
 * 
 * BENEFITS:
 * ✅ No breaking changes to existing design
 * ✅ Enhanced accessibility automatically
 * ✅ Better performance with GPU hints
 * ✅ Professional enterprise-grade code structure
 * ✅ Easy to revert if needed
 * ✅ Gradual migration path
 */

/* ===== ENTERPRISE QUALITY INDICATORS ===== */
.enterprise-quality-badge::after {
    content: '✨ Enterprise Grade';
    position: absolute;
    top: -10px;
    right: -10px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

/* ===== SUCCESS MESSAGE ===== */
.enterprise-success-message {
    background: linear-gradient(135deg, #10b981, #34d399);
    color: white;
    padding: 1rem;
    border-radius: 0.5rem;
    margin: 1rem 0;
    box-shadow: var(--enterprise-shadow-soft);
}

.enterprise-success-message::before {
    content: '🎉 ';
    font-size: 1.2em;
}

/* Add this class to body to see the upgrade in action */
.enterprise-upgraded {
    --primary-color: var(--enterprise-primary);
    --secondary-color: var(--enterprise-secondary);
}

.enterprise-upgraded .btn {
    transition: var(--enterprise-transition-base);
}

.enterprise-upgraded .service__card {
    transition: var(--enterprise-transition-base);
}

.enterprise-upgraded .contact__card {
    transition: var(--enterprise-transition-base);
}