@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';

    --color-ink-950: #07070a;
    --color-ink-900: #0b0b0d;
    --color-ink-800: #131317;
    --color-ink-700: #1c1c22;
    --color-ink-600: #26262e;
    --color-ink-500: #34343d;

    --color-gold-50: #fdf8e7;
    --color-gold-100: #fbecbf;
    --color-gold-200: #f7dd8b;
    --color-gold-300: #f2cb55;
    --color-gold-400: #e9b62b;
    --color-gold-500: #d4af37;
    --color-gold-600: #b8912a;
    --color-gold-700: #8f6f21;
    --color-gold-800: #664f1a;
    --color-gold-900: #3d2f10;
}

@layer base {
    body {
        @apply bg-ink-950 text-gray-100 antialiased;
    }
}

@layer components {
    .panel {
        @apply rounded-2xl border border-white/10 bg-ink-900/80 shadow-lg shadow-black/40 backdrop-blur;
    }

    .panel-gold {
        @apply rounded-2xl border border-gold-500/30 bg-ink-900/80 shadow-lg shadow-black/40;
    }

    .btn,
    .btn-gold,
    .btn-outline,
    .btn-ghost,
    .btn-danger {
        @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-semibold transition disabled:cursor-not-allowed disabled:opacity-50;
    }

    .btn-gold {
        @apply bg-gold-500 text-ink-950 hover:bg-gold-400;
    }

    .btn-outline {
        @apply border border-gold-500/40 text-gold-200 hover:bg-gold-500/10;
    }

    .btn-ghost {
        @apply border border-white/10 text-gray-200 hover:bg-white/5;
    }

    .btn-danger {
        @apply bg-red-600 text-white hover:bg-red-500;
    }

    .btn-sm {
        @apply px-3 py-1.5 text-xs;
    }

    .btn-xs {
        @apply px-2 py-1 text-[11px] leading-none;
    }

    .input {
        @apply w-full rounded-lg border border-white/10 bg-ink-800 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 focus:border-gold-500 focus:outline-none focus:ring-1 focus:ring-gold-500;
    }

    .label {
        @apply mb-1 block text-xs font-medium uppercase tracking-wide text-gray-400;
    }

    .badge,
    .badge-gold,
    .badge-gray,
    .badge-green,
    .badge-red,
    .badge-amber {
        @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold;
    }

    .badge-gold {
        @apply bg-gold-500/15 text-gold-300;
    }

    .badge-gray {
        @apply bg-white/10 text-gray-300;
    }

    .badge-green {
        @apply bg-emerald-500/15 text-emerald-300;
    }

    .badge-red {
        @apply bg-red-500/15 text-red-300;
    }

    .badge-amber {
        @apply bg-amber-500/15 text-amber-300;
    }

    .table {
        @apply w-full text-left text-sm;
    }

    .table thead th {
        @apply border-b border-white/10 px-4 py-3 text-xs font-semibold uppercase tracking-wide text-gray-400;
    }

    .table tbody td {
        @apply border-b border-white/5 px-4 py-3 text-gray-200;
    }

    .table tbody tr:hover {
        @apply bg-white/[0.03];
    }

    .nav-link {
        @apply flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-gray-300 transition hover:bg-white/5 hover:text-white;
    }

    .nav-link-active {
        @apply bg-gold-500/15 text-gold-200;
    }

    .studio-title {
        @apply font-black uppercase tracking-tight text-gold-400;
    }
}

@keyframes pulse-live {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.live-dot {
    animation: pulse-live 1.4s ease-in-out infinite;
}

@keyframes dadka-pop {
    0% { transform: scale(0.4); opacity: 0; }
    60% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.dadka-pop {
    animation: dadka-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes dadka-overlay-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes dadka-badge-in {
    0% { transform: scale(0.2) rotate(-12deg); opacity: 0; }
    55% { transform: scale(1.15) rotate(4deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.dadka-overlay {
    animation: dadka-overlay-in 0.25s ease-out both;
}

.dadka-badge {
    animation: dadka-badge-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes dadka-confetti {
    0% { transform: translate3d(0, -20vh, 0) rotate(0deg); opacity: 1; }
    100% { transform: translate3d(var(--drift, 0), 110vh, 0) rotate(720deg); opacity: 0.9; }
}

.dadka-confetti-piece {
    position: absolute;
    top: 0;
    width: 0.6rem;
    height: 1rem;
    border-radius: 2px;
    animation: dadka-confetti linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .dadka-pop,
    .dadka-overlay,
    .dadka-badge,
    .dadka-confetti-piece {
        animation: none;
    }
}