/* Import the Google Fonts with proper format */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

/* SUPER ACRYLIC PASTEL DESIGN SYSTEM */
:root {
    /* Pastel Color Palette - Soft & Professional */
    --pastel-lavender: #E8E2FF;
    --pastel-mint: #E0FFF7;
    --pastel-rose: #FFE8F0;
    --pastel-peach: #FFF0E8;
    --pastel-sky: #E8F4FF;
    --pastel-sage: #F0FFF0;
    --pastel-lilac: #F5E8FF;
    --pastel-cream: #FFFEF8;
    
    /* Vibrant Accent Colors */
    --accent-purple: #8B5FFF;
    --accent-teal: #2DD4BF;
    --accent-pink: #EC4899;
    --accent-orange: #FB923C;
    --accent-blue: #3B82F6;
    --accent-green: #10B981;
    --accent-violet: #8B5CF6;
    --accent-amber: #F59E0B;
    
    /* Soft Gradients */
    --gradient-dream: linear-gradient(135deg, #E8E2FF 0%, #E0FFF7 25%, #FFE8F0 50%, #FFF0E8 75%, #E8F4FF 100%);
    --gradient-sunset: linear-gradient(135deg, #FFE8F0 0%, #FFF0E8 50%, #E8F4FF 100%);
    --gradient-ocean: linear-gradient(135deg, #E8F4FF 0%, #E0FFF7 50%, #E8E2FF 100%);
    --gradient-garden: linear-gradient(135deg, #F0FFF0 0%, #E0FFF7 50%, #E8F4FF 100%);
    
    /* Acrylic Properties */
    --acrylic-blur: 40px;
    --acrylic-saturation: 180%;
    --acrylic-brightness: 1.1;
    --acrylic-opacity: 0.85;
    
    /* Typography Scale */
    --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* Spacing Scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    
    /* Border Radius Scale */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 2rem;
    --radius-full: 9999px;
    
    /* Shadow System */
    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-large: 0 8px 32px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.12);
    
    /* Glow Effects */
    --glow-soft: 0 0 20px rgba(139, 95, 255, 0.15);
    --glow-medium: 0 0 40px rgba(139, 95, 255, 0.2);
    --glow-strong: 0 0 60px rgba(139, 95, 255, 0.25);
}

/* Global Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    color: #334155;
    background: var(--gradient-dream);
    background-attachment: fixed;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Typography System */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.3;
    color: #1e293b;
    margin-bottom: var(--space-4);
}

h1 { font-size: 2.5rem; font-weight: 700; }
h2 { font-size: 2rem; font-weight: 600; }
h3 { font-size: 1.5rem; font-weight: 600; }
h4 { font-size: 1.25rem; font-weight: 500; }
h5 { font-size: 1.125rem; font-weight: 500; }
h6 { font-size: 1rem; font-weight: 500; }

p {
    margin-bottom: var(--space-4);
    color: #475569;
}

/* Pastel Utility Classes */
.text-pastel-lavender { color: var(--accent-purple); }
.text-pastel-mint { color: var(--accent-teal); }
.text-pastel-rose { color: var(--accent-pink); }
.text-pastel-peach { color: var(--accent-orange); }
.text-pastel-sky { color: var(--accent-blue); }
.text-pastel-sage { color: var(--accent-green); }

.bg-pastel-lavender { background: var(--pastel-lavender); }
.bg-pastel-mint { background: var(--pastel-mint); }
.bg-pastel-rose { background: var(--pastel-rose); }
.bg-pastel-peach { background: var(--pastel-peach); }
.bg-pastel-sky { background: var(--pastel-sky); }
.bg-pastel-sage { background: var(--pastel-sage); }

/* SUPER ACRYLIC GLASSMORPHISM COMPONENTS */

/* Base Acrylic Glass Material */
.acrylic-glass {
    position: relative;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0.1) 100%);
    backdrop-filter: blur(var(--acrylic-blur)) saturate(var(--acrylic-saturation)) brightness(var(--acrylic-brightness));
    -webkit-backdrop-filter: blur(var(--acrylic-blur)) saturate(var(--acrylic-saturation)) brightness(var(--acrylic-brightness));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-medium);
    overflow: hidden;
}

.acrylic-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 100%);
    border-radius: inherit;
    pointer-events: none;
}

/* Acrylic with Pastel Tints */
.acrylic-lavender {
    background: linear-gradient(135deg, 
        rgba(232, 226, 255, 0.3) 0%,
        rgba(232, 226, 255, 0.1) 100%);
    border-color: rgba(139, 95, 255, 0.2);
    box-shadow: var(--shadow-medium), var(--glow-soft);
}

.acrylic-mint {
    background: linear-gradient(135deg, 
        rgba(224, 255, 247, 0.3) 0%,
        rgba(224, 255, 247, 0.1) 100%);
    border-color: rgba(45, 212, 191, 0.2);
    box-shadow: var(--shadow-medium), 0 0 20px rgba(45, 212, 191, 0.15);
}

.acrylic-rose {
    background: linear-gradient(135deg, 
        rgba(255, 232, 240, 0.3) 0%,
        rgba(255, 232, 240, 0.1) 100%);
    border-color: rgba(236, 72, 153, 0.2);
    box-shadow: var(--shadow-medium), 0 0 20px rgba(236, 72, 153, 0.15);
}

.acrylic-sky {
    background: linear-gradient(135deg, 
        rgba(232, 244, 255, 0.3) 0%,
        rgba(232, 244, 255, 0.1) 100%);
    border-color: rgba(59, 130, 246, 0.2);
    box-shadow: var(--shadow-medium), 0 0 20px rgba(59, 130, 246, 0.15);
}

/* PREMIUM BUTTON SYSTEM */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    text-decoration: none;
    user-select: none;
    white-space: nowrap;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn:focus {
    outline: none;
}

.btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(139, 95, 255, 0.3);
}

/* Primary Acrylic Button */
.btn-primary {
    background: linear-gradient(135deg, 
        rgba(139, 95, 255, 0.9) 0%,
        rgba(139, 95, 255, 0.8) 100%);
    backdrop-filter: blur(20px) saturate(200%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        var(--shadow-medium),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 20px rgba(139, 95, 255, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, 
        rgba(139, 95, 255, 1) 0%,
        rgba(139, 95, 255, 0.9) 100%);
    box-shadow: 
        var(--shadow-large),
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 0 30px rgba(139, 95, 255, 0.4);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 
        var(--shadow-soft),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 15px rgba(139, 95, 255, 0.2);
}

/* Secondary Acrylic Button */
.btn-secondary {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.6) 100%);
    backdrop-filter: blur(20px) saturate(150%);
    color: #334155;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--shadow-medium);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.7) 100%);
    box-shadow: var(--shadow-large);
    transform: translateY(-1px);
}

/* Tinted Buttons */
.btn-mint {
    background: linear-gradient(135deg, 
        rgba(45, 212, 191, 0.9) 0%,
        rgba(45, 212, 191, 0.8) 100%);
    backdrop-filter: blur(20px);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-medium), 0 0 20px rgba(45, 212, 191, 0.3);
}

.btn-rose {
    background: linear-gradient(135deg, 
        rgba(236, 72, 153, 0.9) 0%,
        rgba(236, 72, 153, 0.8) 100%);
    backdrop-filter: blur(20px);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-medium), 0 0 20px rgba(236, 72, 153, 0.3);
}

.btn-sky {
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.9) 0%,
        rgba(59, 130, 246, 0.8) 100%);
    backdrop-filter: blur(20px);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-medium), 0 0 20px rgba(59, 130, 246, 0.3);
}

/* FLOATING LABEL INPUT SYSTEM */
.form-floating {
    position: relative;
    margin-bottom: var(--space-6);
}

.form-input {
    width: 100%;
    padding: var(--space-4) var(--space-4) var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: 1rem;
    color: #1e293b;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.6) 100%);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-lg);
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-soft);
}

.form-input:focus {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.8) 100%);
    border-color: rgba(139, 95, 255, 0.5);
    box-shadow: 
        var(--shadow-medium),
        0 0 0 3px rgba(139, 95, 255, 0.1),
        var(--glow-soft);
}

.form-input:focus + .form-label,
.form-input:not(:placeholder-shown) + .form-label {
    transform: translateY(-50%) scale(0.85);
    color: var(--accent-purple);
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.7) 100%);
    backdrop-filter: blur(10px);
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
}

.form-label {
    position: absolute;
    top: 50%;
    left: var(--space-4);
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    pointer-events: none;
    transform: translateY(-50%);
    transform-origin: left center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

/* Select Input */
.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right var(--space-3) center;
    background-repeat: no-repeat;
    background-size: 1rem;
    padding-right: var(--space-10);
}

/* Textarea */
.form-textarea {
    min-height: 120px;
    resize: vertical;
    padding-top: var(--space-6);
}

/* ACRYLIC TABLE SYSTEM */
.table-container {
    position: relative;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.2) 100%);
    backdrop-filter: blur(var(--acrylic-blur)) saturate(var(--acrylic-saturation));
    -webkit-backdrop-filter: blur(var(--acrylic-blur)) saturate(var(--acrylic-saturation));
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-large);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
}

.table-header {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.4) 100%);
    backdrop-filter: blur(20px) saturate(200%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.table-header th {
    padding: var(--space-4) var(--space-6);
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.table-row {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.table-row:hover {
    background: linear-gradient(135deg, 
        rgba(139, 95, 255, 0.05) 0%,
        rgba(139, 95, 255, 0.02) 100%);
    backdrop-filter: blur(10px);
}

.table-row td {
    padding: var(--space-4) var(--space-6);
    color: #475569;
    font-size: 0.875rem;
    vertical-align: middle;
}

.table-row-selected {
    background: linear-gradient(135deg, 
        rgba(139, 95, 255, 0.1) 0%,
        rgba(139, 95, 255, 0.05) 100%);
    border-left: 3px solid var(--accent-purple);
}

/* PREMIUM BADGE SYSTEM */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    box-shadow: var(--shadow-soft);
}

.badge-primary {
    background: linear-gradient(135deg, 
        rgba(139, 95, 255, 0.2) 0%,
        rgba(139, 95, 255, 0.1) 100%);
    color: var(--accent-purple);
    border-color: rgba(139, 95, 255, 0.3);
}

.badge-success {
    background: linear-gradient(135deg, 
        rgba(16, 185, 129, 0.2) 0%,
        rgba(16, 185, 129, 0.1) 100%);
    color: var(--accent-green);
    border-color: rgba(16, 185, 129, 0.3);
}

.badge-warning {
    background: linear-gradient(135deg, 
        rgba(245, 158, 11, 0.2) 0%,
        rgba(245, 158, 11, 0.1) 100%);
    color: var(--accent-amber);
    border-color: rgba(245, 158, 11, 0.3);
}

.badge-danger {
    background: linear-gradient(135deg, 
        rgba(236, 72, 153, 0.2) 0%,
        rgba(236, 72, 153, 0.1) 100%);
    color: var(--accent-pink);
    border-color: rgba(236, 72, 153, 0.3);
}

/* PREMIUM CARD SYSTEM */
.card {
    position: relative;
    padding: var(--space-8);
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.2) 100%);
    backdrop-filter: blur(var(--acrylic-blur)) saturate(var(--acrylic-saturation));
    -webkit-backdrop-filter: blur(var(--acrylic-blur)) saturate(var(--acrylic-saturation));
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-large);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.card-header {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.card-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: var(--space-2);
}

.card-subtitle {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 0;
}

.card-body {
    margin-bottom: var(--space-6);
}

.card-footer {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    gap: var(--space-3);
    align-items: center;
    justify-content: flex-end;
}

/* Card Variants */
.card-elevated {
    box-shadow: var(--shadow-xl);
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0.3) 100%);
}

.card-bordered {
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.4) 100%);
}

/* SUBTLE PROFESSIONAL ANIMATIONS */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.animate-fade-in {
    animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-slide-up {
    animation: slideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-scale-in {
    animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* UTILITY CLASSES */
.blur-sm { backdrop-filter: blur(4px); }
.blur-md { backdrop-filter: blur(12px); }
.blur-lg { backdrop-filter: blur(20px); }
.blur-xl { backdrop-filter: blur(40px); }

.glow-purple { box-shadow: var(--glow-soft); }
.glow-mint { box-shadow: 0 0 20px rgba(45, 212, 191, 0.15); }
.glow-rose { box-shadow: 0 0 20px rgba(236, 72, 153, 0.15); }
.glow-sky { box-shadow: 0 0 20px rgba(59, 130, 246, 0.15); }

.gradient-text {
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-teal));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 768px) {
    :root {
        --space-1: 0.125rem;
        --space-2: 0.25rem;
        --space-3: 0.5rem;
        --space-4: 0.75rem;
        --space-6: 1rem;
        --space-8: 1.5rem;
        --acrylic-blur: 20px;
    }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.375rem; }
    
    .card { padding: var(--space-6); }
    .table-header th,
    .table-row td { padding: var(--space-3) var(--space-4); }
}

/* PERFORMANCE OPTIMIZATIONS */
.acrylic-glass,
.card,
.table-container,
.btn {
    contain: layout style;
    will-change: transform, opacity;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}