@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Components */
@layer components {
    .btn {
        @apply inline-flex items-center justify-center font-semibold py-3 px-6 rounded-lg transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-offset-2 shadow-md hover:shadow-lg;
    }

    .btn-primary {
        @apply bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white focus:ring-blue-500;
    }

    .btn-secondary {
        @apply bg-gradient-to-r from-gray-500 to-gray-600 hover:from-gray-600 hover:to-gray-700 text-white focus:ring-gray-500;
    }

    .btn-success {
        @apply bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white focus:ring-green-500;
    }

    .btn-danger {
        @apply bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white focus:ring-red-500;
    }

    .btn-warning {
        @apply bg-gradient-to-r from-yellow-500 to-yellow-600 hover:from-yellow-600 hover:to-yellow-700 text-white focus:ring-yellow-500;
    }

    .btn-sm {
        @apply py-2 px-4 text-sm;
    }

    .btn-lg {
        @apply py-4 px-8 text-lg;
    }

    .btn-xl {
        @apply py-5 px-10 text-xl;
    }

    .btn-outline-primary {
        @apply border-2 border-blue-500 text-blue-500 bg-transparent hover:bg-blue-500 hover:text-white focus:ring-blue-500;
    }

    .btn-white {
        @apply bg-white text-gray-900 border border-gray-300 hover:bg-gray-50 focus:ring-blue-500 shadow-sm;
    }

    .card {
        @apply bg-white overflow-hidden shadow-lg rounded-lg;
    }

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

    .card-body {
        @apply p-6;
    }

    .status-badge {
        @apply px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full;
    }

    .status-pending {
        @apply bg-yellow-100 text-yellow-800;
    }

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

    .status-rejected {
        @apply bg-red-100 text-red-800;
    }

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

    .form-input {
        @apply mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500;
    }

    .form-select {
        @apply mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500;
    }

    .form-label {
        @apply block text-sm font-medium text-gray-700 mb-1;
    }

    .alert {
        @apply px-4 py-3 rounded mb-4;
    }

    .alert-success {
        @apply bg-green-100 border border-green-400 text-green-700;
    }

    .alert-error {
        @apply bg-red-100 border border-red-400 text-red-700;
    }

    .alert-warning {
        @apply bg-yellow-100 border border-yellow-400 text-yellow-700;
    }

    .alert-info {
        @apply bg-blue-100 border border-blue-400 text-blue-700;
    }
}

/* Custom animations */
@layer utilities {
    .animate-fade-in {
        animation: fadeIn 0.8s ease-in-out;
    }

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

    .animate-slide-up {
        animation: slideUp 0.7s ease-out;
    }

    .animate-slide-down {
        animation: slideDown 0.6s ease-out;
    }

    .animate-slide-left {
        animation: slideLeft 0.6s ease-out;
    }

    .animate-slide-right {
        animation: slideRight 0.6s ease-out;
    }

    .animate-scale-in {
        animation: scaleIn 0.5s ease-out;
    }

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

    .animate-float {
        animation: float 3s ease-in-out infinite;
    }

    .animate-glow {
        animation: glow 2s ease-in-out infinite alternate;
    }

    .animate-rotate-slow {
        animation: rotateSlow 8s linear infinite;
    }

    .animate-pulse-slow {
        animation: pulseSlow 3s ease-in-out infinite;
    }

    /* Hover Animations */
    .hover-lift {
        @apply transform transition-all duration-300 ease-out;
    }

    .hover-lift:hover {
        @apply -translate-y-2 shadow-xl;
    }

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

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

    .hover-glow {
        @apply transition-all duration-300;
    }

    .hover-glow:hover {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
    }

    /* Stagger animation delays */
    .animate-stagger-1 {
        animation-delay: 0.1s;
        animation-fill-mode: both;
    }

    .animate-stagger-2 {
        animation-delay: 0.2s;
        animation-fill-mode: both;
    }

    .animate-stagger-3 {
        animation-delay: 0.3s;
        animation-fill-mode: both;
    }

    .animate-stagger-4 {
        animation-delay: 0.4s;
        animation-fill-mode: both;
    }

    .animate-stagger-5 {
        animation-delay: 0.5s;
        animation-fill-mode: both;
    }

    .animate-stagger-6 {
        animation-delay: 0.6s;
        animation-fill-mode: both;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes slideIn {
        from {
            transform: translateY(-20px);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes slideUp {
        from {
            transform: translateY(30px);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes slideDown {
        from {
            transform: translateY(-30px);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes slideLeft {
        from {
            transform: translateX(30px);
            opacity: 0;
        }

        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes slideRight {
        from {
            transform: translateX(-30px);
            opacity: 0;
        }

        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes scaleIn {
        from {
            transform: scale(0.8);
            opacity: 0;
        }

        to {
            transform: scale(1);
            opacity: 1;
        }
    }

    @keyframes bounceIn {
        0% {
            transform: scale(0.3);
            opacity: 0;
        }

        50% {
            transform: scale(1.05);
            opacity: 0.8;
        }

        70% {
            transform: scale(0.9);
            opacity: 0.9;
        }

        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    @keyframes float {

        0%,
        100% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-10px);
        }
    }

    @keyframes glow {
        from {
            box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
        }

        to {
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 0 30px rgba(59, 130, 246, 0.4);
        }
    }

    @keyframes rotateSlow {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    @keyframes pulseSlow {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.5;
        }
    }

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

    .gradient-bg-2 {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }

    .gradient-bg-3 {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }

    .constructflow-gradient {
        background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 50%, #06B6D4 100%);
    }

    .constructflow-text {
        background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .nav-brand {
        @apply flex items-center space-x-2 font-bold text-xl text-gray-900 hover:text-blue-600 transition-colors duration-200;
    }

    .page-header {
        @apply bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg p-6 shadow-lg;
    }

    .user-avatar {
        @apply w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-bold;
    }

    .cta-button {
        @apply relative inline-flex items-center justify-center px-12 py-4 text-xl font-bold text-blue-600 bg-white rounded-full shadow-2xl transform transition-all duration-300 ease-out;
    }

    .cta-button:hover {
        @apply -translate-y-1 shadow-3xl;
    }

    .shadow-3xl {
        box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.25), 0 10px 20px -5px rgba(0, 0, 0, 0.1);
    }

    .backdrop-blur-sm {
        backdrop-filter: blur(4px);
    }

    /* Advanced visual effects */
    .blur-3xl {
        filter: blur(64px);
    }

    .blur-2xl {
        filter: blur(40px);
    }

    .mix-blend-multiply {
        mix-blend-mode: multiply;
    }

    .bg-clip-text {
        -webkit-background-clip: text;
        background-clip: text;
    }

    .text-transparent {
        color: transparent;
    }

    /* Enhanced gradient animations */
    .animate-gradient-x {
        animation: gradient-x 3s ease infinite;
        background-size: 400% 400%;
    }

    @keyframes gradient-x {

        0%,
        100% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }
    }

    /* Glass morphism effects */
    .glass {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .glass-dark {
        background: rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
}