/**
 * Newton Premium Design System
 * Reusable component patterns for consistent UI across the CRM
 * Based on Glassmorphism aesthetic with soft gradients and geometric typography
 */

/* ========================================
   GLASS CARD COMPONENTS
   ======================================== */

.newton-glass-card {
    @apply bg-white/70 backdrop-blur-xl rounded-3xl shadow-glass border border-white/50 p-6;
}

.newton-glass-card-sm {
    @apply bg-white/70 backdrop-blur-xl rounded-2xl shadow-glass border border-white/50 p-4;
}

.newton-glass-card-lg {
    @apply bg-white/70 backdrop-blur-xl rounded-3xl shadow-glass-lg border border-white/50 p-8;
}

/* Hover state for interactive cards */
.newton-glass-card-hover {
    @apply bg-white/70 backdrop-blur-xl rounded-3xl shadow-glass border border-white/50 p-6;
    @apply hover:shadow-glass-lg hover:bg-white/80 transition-all duration-300;
}

/* ========================================
   BUTTONS
   ======================================== */

.newton-btn-primary {
    @apply bg-[#7c3aed] hover:bg-[#6d28d9] text-white font-semibold py-3 px-6 rounded-2xl;
    @apply shadow-lg shadow-violet-500/25 hover:shadow-violet-500/40;
    @apply transition-all duration-300 transform hover:-translate-y-1;
}

.newton-btn-secondary {
    @apply bg-white/70 backdrop-blur-xl hover:bg-white text-gray-700 font-semibold py-3 px-6 rounded-2xl;
    @apply border border-gray-200 hover:border-gray-300;
    @apply shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1;
}

.newton-btn-ghost {
    @apply text-gray-700 hover:text-violet-600 font-medium py-2 px-4 rounded-xl;
    @apply hover:bg-violet-50/50 transition-all duration-200;
}

/* Small button variant */
.newton-btn-sm {
    @apply py-2 px-4 text-sm rounded-xl;
}

/* ========================================
   FORM INPUTS
   ======================================== */

.newton-input {
    @apply w-full bg-slate-50 border-0 rounded-xl px-4 py-3 text-slate-700 font-medium;
    @apply ring-1 ring-slate-200 focus:ring-2 focus:ring-violet-500 outline-none;
    @apply transition-shadow duration-200;
}

.newton-input-sm {
    @apply w-full bg-slate-50 border-0 rounded-lg px-3 py-2 text-sm text-slate-700 font-medium;
    @apply ring-1 ring-slate-200 focus:ring-2 focus:ring-violet-500 outline-none;
    @apply transition-shadow duration-200;
}

.newton-select {
    @apply w-full bg-slate-50 border-0 rounded-xl px-4 py-3 text-slate-700 font-medium;
    @apply ring-1 ring-slate-200 focus:ring-2 focus:ring-violet-500 outline-none;
    @apply appearance-none transition-shadow duration-200;
}

.newton-textarea {
    @apply w-full bg-slate-50 border-0 rounded-xl px-4 py-3 text-slate-700 font-medium;
    @apply ring-1 ring-slate-200 focus:ring-2 focus:ring-violet-500 outline-none;
    @apply transition-shadow duration-200 resize-none;
}

/* ========================================
   BADGES
   ======================================== */

.newton-badge {
    @apply px-3 py-1 rounded-full text-xs font-bold border inline-flex items-center;
}

.newton-badge-violet {
    @apply bg-violet-100 text-violet-600 border-violet-200;
}

.newton-badge-indigo {
    @apply bg-indigo-100 text-indigo-600 border-indigo-200;
}

.newton-badge-green {
    @apply bg-green-100 text-green-600 border-green-200;
}

.newton-badge-yellow {
    @apply bg-yellow-100 text-yellow-600 border-yellow-200;
}

.newton-badge-red {
    @apply bg-red-100 text-red-600 border-red-200;
}

.newton-badge-gray {
    @apply bg-gray-100 text-gray-600 border-gray-200;
}

.newton-badge-blue {
    @apply bg-blue-100 text-blue-600 border-blue-200;
}

/* ========================================
   BACKGROUND DECORATIONS
   ======================================== */

.newton-bg-spheres {
    @apply fixed inset-0 overflow-hidden -z-10 pointer-events-none;
}

.newton-sphere-violet {
    @apply absolute top-0 left-0 w-96 h-96 bg-violet-400/30 rounded-full blur-3xl;
    @apply -translate-x-1/2 -translate-y-1/2;
}

.newton-sphere-indigo {
    @apply absolute bottom-0 right-0 w-[500px] h-[500px] bg-indigo-400/30 rounded-full blur-3xl;
    @apply translate-x-1/3 translate-y-1/3;
}

/* Animated sphere variant */
.newton-sphere-animated {
    animation: float 6s ease-in-out infinite;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Global gradient background */
.newton-bg-gradient {
    @apply bg-gradient-to-br from-violet-50 via-purple-50 to-indigo-50;
}

/* Glass surface for sidebar/navigation */
.newton-glass-sidebar {
    @apply bg-white/80 backdrop-blur-xl border-r border-gray-200/50;
}

/* Glass header */
.newton-glass-header {
    @apply bg-white/80 backdrop-blur-sm border-b border-gray-200/50;
}

/* Modal overlay */
.newton-modal-overlay {
    @apply fixed inset-0 bg-black/60 backdrop-blur-sm z-50;
    @apply flex items-center justify-center p-4;
}

/* Modal content */
.newton-modal-content {
    @apply bg-white/95 backdrop-blur-xl rounded-3xl shadow-2xl;
    @apply border border-white/20 max-w-2xl w-full max-h-[90vh] overflow-hidden;
}

/* Loading overlay */
.newton-loading-overlay {
    @apply fixed inset-0 bg-black/40 backdrop-blur-sm z-50;
    @apply flex items-center justify-center;
}

.newton-loading-spinner {
    @apply bg-white/90 backdrop-blur-xl rounded-2xl px-8 py-6;
    @apply flex items-center space-x-4 border border-white/20 shadow-2xl;
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */

@media (max-width: 768px) {
    .newton-glass-card,
    .newton-glass-card-lg {
        @apply p-4 rounded-2xl;
    }
    
    .newton-btn-primary,
    .newton-btn-secondary {
        @apply py-2.5 px-5 text-sm;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* GPU acceleration for blur effects */
.newton-glass-card,
.newton-glass-sidebar,
.newton-glass-header,
.newton-modal-content {
    transform: translateZ(0);
    will-change: transform;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .newton-btn-primary,
    .newton-btn-secondary,
    .newton-btn-ghost {
        @apply transition-none transform-none;
    }
    
    .newton-sphere-animated {
        animation: none;
    }
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Focus visible styles */
.newton-input:focus-visible,
.newton-select:focus-visible,
.newton-textarea:focus-visible {
    @apply ring-2 ring-violet-500 ring-offset-2;
}

.newton-btn-primary:focus-visible,
.newton-btn-secondary:focus-visible {
    @apply outline-none ring-2 ring-violet-500 ring-offset-2;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .newton-glass-card,
    .newton-glass-sidebar,
    .newton-glass-header {
        @apply bg-white border-2 border-gray-300;
        backdrop-filter: none;
    }
}