@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

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

@layer base {
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html {
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    body {
        background-color: #0F1015;
        color: #e2e2ff;
        font-family: 'Inter', system-ui, sans-serif;
        min-height: 100vh;
    }

    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    ::-webkit-scrollbar-track {
        background: #1A1C23;
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(99, 102, 241, 0.3);
        border-radius: 3px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(99, 102, 241, 0.5);
    }
}

@layer components {

    /* Cards */
    .card {
        @apply bg-bg-card rounded-2xl shadow-card;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .card-glow {
        @apply card;
    }

    /* Buttons */
    .btn-primary {
        @apply flex items-center gap-2 px-4 py-2.5 rounded-xl font-medium text-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed bg-accent-cyan text-white border border-accent-cyan/20;
    }

    .btn-primary:hover:not(:disabled) {
        @apply bg-accent-cyan/90 border-accent-cyan/40;
    }

    .btn-danger {
        @apply flex items-center gap-2 px-4 py-2.5 rounded-xl font-medium text-sm transition-all duration-200 disabled:opacity-50 bg-accent-red text-white border border-accent-red/20;
    }

    .btn-danger:hover:not(:disabled) {
        @apply bg-accent-red/90 border-accent-red/40;
    }

    .btn-violet {
        @apply flex items-center gap-2 px-4 py-2.5 rounded-xl font-medium text-sm transition-all duration-200 disabled:opacity-50 bg-accent-violet text-white border border-accent-violet/20;
    }

    .btn-violet:hover:not(:disabled) {
        @apply bg-accent-violet/90 border-accent-violet/40;
    }

    .btn-ghost {
        @apply flex items-center gap-2 px-4 py-2.5 rounded-xl font-medium text-sm text-white/60 border border-transparent transition-all duration-200 hover:bg-white/5 hover:text-white hover:border-white/10 hover:shadow-card;
    }

    /* Inputs */
    .input,
    .input-field {
        @apply w-full px-4 py-3 rounded-xl text-sm text-white bg-bg-secondary border border-white/5 outline-none transition-all duration-300 placeholder-white/20;
    }

    .input:focus,
    .input-field:focus {
        @apply border-accent-cyan/30 bg-bg-card ring-2 ring-accent-cyan/10;
    }

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

    .badge-pending {
        @apply badge bg-white/5 text-white/50 border border-white/10;
    }

    .badge-running {
        @apply badge bg-cyan-500/10 text-cyan-400 border border-cyan-500/20;
    }

    .badge-completed {
        @apply badge bg-emerald-500/10 text-emerald-400 border border-emerald-500/20;
    }

    .badge-failed {
        @apply badge bg-red-500/10 text-red-400 border border-red-500/20;
    }

    .badge-cancelled {
        @apply badge bg-orange-500/10 text-orange-400 border border-orange-500/20;
    }

    .badge-amber {
        @apply badge bg-amber-500/10 text-amber-400 border border-amber-500/20;
    }

    /* Progress bar */
    .progress-bar {
        @apply h-2.5 rounded-full overflow-hidden bg-bg-secondary border border-white/5;
    }

    .progress-fill {
        @apply h-full rounded-full transition-all duration-500 ease-out bg-accent-cyan;
    }

    .progress-fill.done {
        @apply bg-accent-green;
    }

    .progress-fill.failed {
        @apply bg-accent-red;
    }

    /* Section title */
    .section-title {
        @apply text-xs font-semibold text-white/30 uppercase tracking-widest;
    }

    /* Glowing dot (reduced to flat indicator) */
    .dot-live {
        @apply w-2 h-2 rounded-full bg-accent-green;
    }

    /* Custom themed scrollbar */
    .custom-scrollbar::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
        background: transparent;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: rgba(99, 102, 241, 0.25);
        border-radius: 999px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: rgba(99, 102, 241, 0.5);
    }

    /* Secondary button (outlined/ghost style) */
    .btn-secondary {
        @apply flex items-center gap-2 px-4 py-2.5 rounded-xl font-medium text-sm text-white/70 border border-white/10 bg-white/[0.04] transition-all duration-200 hover:bg-white/[0.08] hover:text-white hover:border-white/20;
    }
}

@layer utilities {

    /* Global Entrance Animations */
    .animate-fade-in {
        animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
    }

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

    .animate-stagger-fade>* {
        opacity: 0;
        animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    .animate-stagger-fade>*:nth-child(1) {
        animation-delay: 0.1s;
    }

    .animate-stagger-fade>*:nth-child(2) {
        animation-delay: 0.2s;
    }

    .animate-stagger-fade>*:nth-child(3) {
        animation-delay: 0.3s;
    }

    .animate-stagger-fade>*:nth-child(4) {
        animation-delay: 0.4s;
    }

    .animate-stagger-fade>*:nth-child(5) {
        animation-delay: 0.5s;
    }

    @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);
        }
    }

    /* Skeleton Loading / Lazy Loading Primitives */
    .skeleton {
        position: relative;
        overflow: hidden;
        @apply bg-white/[0.03] rounded-lg;
    }

    .skeleton::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.05) 50%,
                rgba(255, 255, 255, 0) 100%);
        animation: shimmer 1.5s infinite;
    }

    @keyframes shimmer {
        100% {
            transform: translateX(100%);
        }
    }

    /* Thin scrollbar - visible but minimal for filter bars */
    .no-scrollbar {
        -ms-overflow-style: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(99, 102, 241, 0.25) transparent;
    }

    .no-scrollbar::-webkit-scrollbar {
        height: 3px;
    }

    .no-scrollbar::-webkit-scrollbar-track {
        background: transparent;
    }

    .no-scrollbar::-webkit-scrollbar-thumb {
        background: rgba(99, 102, 241, 0.25);
        border-radius: 999px;
    }
}