@import 'tailwindcss';

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

/* ============================================================
   DESIGN TOKENS — StudyFlash
   Dark-first, violet → cyan brand with amber/gold gamification.
   ============================================================ */
@theme {
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Space Grotesk', 'Inter', ui-sans-serif, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

    /* Surfaces */
    --color-bg: #07070d;
    --color-bg-soft: #0b0b14;
    --color-surface: #12121f;
    --color-surface-2: #191930;
    --color-surface-3: #22223e;
    --color-line: #ffffff12;
    --color-line-strong: #ffffff26;

    /* Text */
    --color-ink: #f6f8fc;
    --color-ink-soft: #aeb8d0;
    --color-ink-faint: #79849e;

    /* Brand */
    --color-primary: #8b5cf6;
    --color-primary-strong: #7c3aed;
    --color-primary-soft: #b9a5fb;
    --color-accent: #22d3ee;
    --color-accent-strong: #06b6d4;

    /* Gamification + status */
    --color-gold: #fbbf24;
    --color-gold-strong: #f59e0b;
    --color-success: #34d399;
    --color-success-strong: #10b981;
    --color-danger: #fb7185;
    --color-danger-strong: #f43f5e;
    --color-warning: #fbbf24;

    /* Radii */
    --radius-xl: 1rem;
    --radius-2xl: 1.25rem;
    --radius-3xl: 1.75rem;

    /* Named animations */
    --animate-fade-up: fade-up 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    --animate-fade: fade 0.4s ease both;
    --animate-pop: pop 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    --animate-float: float 9s ease-in-out infinite;
    --animate-shimmer: shimmer 1.6s linear infinite;
    --animate-spin-slow: spin 0.9s linear infinite;
    --animate-pulse-glow: pulse-glow 2.4s ease-in-out infinite;
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes pop {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -22px, 0); }
}
@keyframes shimmer {
    from { background-position: -200% 0; }
    to { background-position: 200% 0; }
}
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.35); }
    50% { box-shadow: 0 0 36px 4px rgba(139, 92, 246, 0.35); }
}

/* ============================================================
   BASE
   ============================================================ */
@layer base {
    * {
        border-color: var(--color-line);
    }

    html {
        -webkit-text-size-adjust: 100%;
        scroll-behavior: smooth;
        background-color: var(--color-bg);
    }

    body {
        color: var(--color-ink);
        font-family: var(--font-sans);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        min-height: 100dvh;
    }

    h1, h2, h3, h4, h5 {
        font-family: var(--font-display);
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1.12;
    }

    ::selection {
        background: color-mix(in oklab, var(--color-primary) 40%, transparent);
        color: #fff;
    }

    :focus-visible {
        outline: 2px solid var(--color-primary-soft);
        outline-offset: 2px;
        border-radius: 4px;
    }

    ::-webkit-scrollbar { width: 9px; height: 9px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
        background: var(--color-line-strong);
        border-radius: 999px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }
    ::-webkit-scrollbar-thumb:hover { background: var(--color-ink-faint); }

    [x-cloak] { display: none !important; }

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.001ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.001ms !important;
            scroll-behavior: auto !important;
        }
    }
}

/* ============================================================
   UTILITIES
   ============================================================ */
@layer utilities {
    .text-gradient {
        background-image: linear-gradient(120deg, var(--color-primary-soft), var(--color-accent));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .text-gold-gradient {
        background-image: linear-gradient(120deg, var(--color-gold), var(--color-gold-strong));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .glass {
        background: color-mix(in oklab, var(--color-surface) 78%, transparent);
        backdrop-filter: blur(16px) saturate(140%);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
    }

    .glow { box-shadow: 0 0 50px -12px var(--color-primary); }
    .glow-accent { box-shadow: 0 0 50px -12px var(--color-accent); }
    .glow-gold { box-shadow: 0 0 50px -12px var(--color-gold); }

    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

    /* Animated mesh-gradient backdrop, fixed behind everything */
    .bg-mesh::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
            radial-gradient(60% 50% at 18% -8%, rgba(124, 58, 237, 0.26), transparent 70%),
            radial-gradient(50% 45% at 92% 0%, rgba(6, 182, 212, 0.18), transparent 70%),
            radial-gradient(55% 50% at 80% 100%, rgba(139, 92, 246, 0.16), transparent 72%),
            radial-gradient(45% 45% at 5% 95%, rgba(34, 211, 238, 0.12), transparent 70%);
    }
    .bg-grid::after {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        opacity: 0.5;
        background-image:
            linear-gradient(var(--color-line) 1px, transparent 1px),
            linear-gradient(90deg, var(--color-line) 1px, transparent 1px);
        background-size: 56px 56px;
        mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
    }

    .tabular { font-variant-numeric: tabular-nums; }

    .stagger > * { animation: fade-up 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    .stagger > *:nth-child(1) { animation-delay: 0.02s; }
    .stagger > *:nth-child(2) { animation-delay: 0.06s; }
    .stagger > *:nth-child(3) { animation-delay: 0.10s; }
    .stagger > *:nth-child(4) { animation-delay: 0.14s; }
    .stagger > *:nth-child(5) { animation-delay: 0.18s; }
    .stagger > *:nth-child(6) { animation-delay: 0.22s; }
    .stagger > *:nth-child(7) { animation-delay: 0.26s; }
    .stagger > *:nth-child(8) { animation-delay: 0.30s; }
}

/* ============================================================
   COMPONENTS
   ============================================================ */
@layer components {
    /* ---------- Buttons ---------- */
    .btn {
        @apply inline-flex items-center justify-center gap-2 rounded-xl px-5 py-3 text-sm font-semibold;
        @apply transition duration-200 ease-out select-none whitespace-nowrap;
        min-height: 44px;
        cursor: pointer;
    }
    .btn:disabled,
    .btn[aria-disabled='true'] { @apply opacity-40 pointer-events-none; }

    .btn-primary {
        color: #fff;
        background-image: linear-gradient(135deg, var(--color-primary-strong), var(--color-accent-strong));
        box-shadow: 0 10px 28px -12px var(--color-primary);
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -14px var(--color-primary); }
    .btn-primary:active { transform: translateY(0); }

    .btn-gold {
        color: #1a1206;
        background-image: linear-gradient(135deg, var(--color-gold), var(--color-gold-strong));
        box-shadow: 0 10px 28px -12px var(--color-gold);
    }
    .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -14px var(--color-gold); }

    .btn-success { color: #04130d; background-image: linear-gradient(135deg, var(--color-success), var(--color-success-strong)); }
    .btn-success:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px var(--color-success); }

    .btn-danger { color: #fff; background-color: var(--color-danger-strong); }
    .btn-danger:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -14px var(--color-danger); }

    .btn-secondary {
        color: var(--color-ink);
        background: color-mix(in oklab, var(--color-surface-2) 80%, transparent);
        border: 1px solid var(--color-line-strong);
    }
    .btn-secondary:hover { background: var(--color-surface-3); transform: translateY(-1px); }

    .btn-ghost { color: var(--color-ink-soft); background: transparent; }
    .btn-ghost:hover { color: var(--color-ink); background: color-mix(in oklab, #fff 6%, transparent); }

    .btn-sm { @apply px-3.5 py-2 text-xs; min-height: 38px; border-radius: 0.7rem; }
    .btn-lg { @apply px-7 py-4 text-base; min-height: 52px; border-radius: var(--radius-2xl); }
    .btn-block { @apply w-full; }
    .btn-icon { @apply p-0; width: 44px; height: 44px; }

    /* ---------- Cards ---------- */
    .card {
        background: linear-gradient(160deg, color-mix(in oklab, var(--color-surface) 92%, transparent), color-mix(in oklab, var(--color-bg-soft) 92%, transparent));
        border: 1px solid var(--color-line);
        border-radius: var(--radius-2xl);
        backdrop-filter: blur(10px);
    }
    .card-hover { transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
    .card-hover:hover {
        transform: translateY(-4px);
        border-color: color-mix(in oklab, var(--color-primary) 45%, transparent);
        box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.8), 0 0 0 1px color-mix(in oklab, var(--color-primary) 18%, transparent);
    }
    .card-pad { padding: clamp(1.1rem, 2.6vw, 1.6rem); }

    /* gradient top hairline used on feature cards */
    .card-accent { position: relative; overflow: hidden; }
    .card-accent::before {
        content: '';
        position: absolute; inset: 0 0 auto 0; height: 3px;
        background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
        opacity: 0; transition: opacity 0.25s ease;
    }
    .card-accent:hover::before { opacity: 1; }

    /* ---------- Badges & chips ---------- */
    .badge {
        @apply inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-semibold;
        border: 1px solid transparent;
    }
    .badge-primary { color: var(--color-primary-soft); background: color-mix(in oklab, var(--color-primary) 16%, transparent); border-color: color-mix(in oklab, var(--color-primary) 32%, transparent); }
    .badge-accent { color: var(--color-accent); background: color-mix(in oklab, var(--color-accent) 14%, transparent); border-color: color-mix(in oklab, var(--color-accent) 30%, transparent); }
    .badge-gold { color: var(--color-gold); background: color-mix(in oklab, var(--color-gold) 15%, transparent); border-color: color-mix(in oklab, var(--color-gold) 32%, transparent); }
    .badge-success { color: var(--color-success); background: color-mix(in oklab, var(--color-success) 15%, transparent); border-color: color-mix(in oklab, var(--color-success) 30%, transparent); }
    .badge-danger { color: var(--color-danger); background: color-mix(in oklab, var(--color-danger) 15%, transparent); border-color: color-mix(in oklab, var(--color-danger) 30%, transparent); }
    .badge-muted { color: var(--color-ink-soft); background: color-mix(in oklab, #fff 6%, transparent); border-color: var(--color-line); }

    .chip {
        @apply inline-flex items-center justify-center rounded-xl;
        width: 2.75rem; height: 2.75rem; font-size: 1.4rem;
        background: color-mix(in oklab, var(--color-surface-2) 85%, transparent);
        border: 1px solid var(--color-line);
    }
    .chip-lg { width: 3.5rem; height: 3.5rem; font-size: 1.8rem; border-radius: var(--radius-xl); }

    /* ---------- Forms ---------- */
    .label { @apply mb-1.5 block text-sm font-medium; color: var(--color-ink-soft); }
    .field {
        @apply w-full rounded-xl px-4 text-base;
        min-height: 48px;
        color: var(--color-ink);
        background: color-mix(in oklab, #fff 4%, transparent);
        border: 1px solid var(--color-line-strong);
        transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    }
    .field::placeholder { color: var(--color-ink-faint); }
    .field:focus {
        outline: none;
        border-color: var(--color-primary);
        background: color-mix(in oklab, var(--color-primary) 8%, transparent);
        box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-primary) 18%, transparent);
    }
    .field-hint { @apply mt-1 text-xs; color: var(--color-ink-faint); }
    .field-error { @apply mt-1.5 flex items-center gap-1 text-xs font-medium; color: var(--color-danger); }
    textarea.field { min-height: 130px; padding-top: 0.85rem; line-height: 1.6; resize: vertical; }

    /* ---------- Alerts ---------- */
    .alert { @apply flex items-start gap-3 rounded-xl p-3.5 text-sm; border: 1px solid transparent; }
    .alert-danger { color: #fecdd3; background: color-mix(in oklab, var(--color-danger) 14%, transparent); border-color: color-mix(in oklab, var(--color-danger) 34%, transparent); }
    .alert-success { color: #bbf7d0; background: color-mix(in oklab, var(--color-success) 14%, transparent); border-color: color-mix(in oklab, var(--color-success) 32%, transparent); }
    .alert-info { color: var(--color-primary-soft); background: color-mix(in oklab, var(--color-primary) 12%, transparent); border-color: color-mix(in oklab, var(--color-primary) 30%, transparent); }

    /* ---------- Progress ---------- */
    .progress-track { @apply w-full overflow-hidden rounded-full; height: 8px; background: color-mix(in oklab, #fff 8%, transparent); }
    .progress-fill {
        @apply h-full rounded-full;
        background-image: linear-gradient(90deg, var(--color-primary), var(--color-accent));
        box-shadow: 0 0 14px -2px var(--color-primary);
        transition: width 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
    }
    .progress-fill-gold { background-image: linear-gradient(90deg, var(--color-gold), var(--color-gold-strong)); box-shadow: 0 0 14px -2px var(--color-gold); }

    /* ---------- Stat tiles ---------- */
    .stat {
        @apply flex flex-col gap-1 rounded-2xl p-5;
        background: linear-gradient(160deg, color-mix(in oklab, var(--color-surface) 90%, transparent), color-mix(in oklab, var(--color-bg-soft) 90%, transparent));
        border: 1px solid var(--color-line);
    }
    .stat-value { @apply text-3xl font-extrabold leading-none; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
    .stat-label { @apply text-sm font-medium; color: var(--color-ink-faint); }

    /* ---------- Nav ---------- */
    .nav-link {
        @apply inline-flex items-center gap-2 rounded-full px-3.5 py-2 text-sm font-medium transition;
        color: var(--color-ink-soft);
        min-height: 40px;
    }
    .nav-link:hover { color: var(--color-ink); background: color-mix(in oklab, #fff 6%, transparent); }
    .nav-link[aria-current='page'] {
        color: var(--color-ink);
        background: color-mix(in oklab, var(--color-primary) 18%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-primary) 34%, transparent);
    }

    .mobile-tab {
        @apply flex flex-1 flex-col items-center justify-center gap-1 text-[0.68rem] font-medium;
        color: var(--color-ink-faint);
        min-height: 56px;
    }
    .mobile-tab[aria-current='page'] { color: var(--color-primary-soft); }

    /* ---------- Mode tiles ---------- */
    .mode-tile {
        @apply flex flex-col items-start gap-3 rounded-2xl p-5 text-left;
        background: linear-gradient(160deg, color-mix(in oklab, var(--color-surface) 90%, transparent), color-mix(in oklab, var(--color-bg-soft) 92%, transparent));
        border: 1px solid var(--color-line);
        transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
        cursor: pointer;
    }
    .mode-tile:hover {
        transform: translateY(-4px);
        border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
        box-shadow: 0 22px 50px -26px var(--color-primary);
    }

    /* ---------- QCM options ---------- */
    .qcm-option {
        @apply flex w-full items-center gap-3 rounded-xl p-4 text-left text-sm;
        min-height: 56px;
        color: var(--color-ink);
        background: color-mix(in oklab, #fff 4%, transparent);
        border: 1px solid var(--color-line-strong);
        transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
        cursor: pointer;
    }
    .qcm-option:not(:disabled):hover { transform: translateX(4px); border-color: color-mix(in oklab, var(--color-primary) 50%, transparent); background: color-mix(in oklab, var(--color-primary) 10%, transparent); }
    .qcm-option:disabled { cursor: default; }
    .qcm-option.is-correct { color: var(--color-success); background: color-mix(in oklab, var(--color-success) 16%, transparent); border-color: var(--color-success); }
    .qcm-option.is-wrong { color: var(--color-danger); background: color-mix(in oklab, var(--color-danger) 16%, transparent); border-color: var(--color-danger); }
    .qcm-letter { @apply inline-flex shrink-0 items-center justify-center rounded-lg text-sm font-bold; width: 2rem; height: 2rem; background: color-mix(in oklab, #fff 8%, transparent); }

    /* ---------- Flip card (3D) ---------- */
    .flip-scene { perspective: 1600px; }
    .flip-card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
    .flip-card.is-flipped { transform: rotateY(180deg); }
    .flip-face {
        position: absolute; inset: 0;
        backface-visibility: hidden; -webkit-backface-visibility: hidden;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        padding: clamp(1.5rem, 4vw, 2.5rem); text-align: center;
        border-radius: var(--radius-3xl); border: 1px solid var(--color-line-strong);
    }
    .flip-front { background: linear-gradient(155deg, var(--color-surface-2), var(--color-surface)); box-shadow: 0 30px 70px -40px #000, 0 0 70px -30px rgba(139, 92, 246, 0.45); }
    .flip-back { transform: rotateY(180deg); background: linear-gradient(155deg, color-mix(in oklab, var(--color-primary) 20%, var(--color-surface)), color-mix(in oklab, var(--color-accent) 12%, var(--color-surface))); border-color: color-mix(in oklab, var(--color-primary) 38%, transparent); box-shadow: 0 30px 70px -40px #000, 0 0 70px -30px rgba(34, 211, 238, 0.4); }

    /* ---------- Tables (admin) ---------- */
    .table { @apply w-full border-collapse text-sm; }
    .table th { @apply px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider; color: var(--color-ink-faint); border-bottom: 1px solid var(--color-line); }
    .table td { @apply px-4 py-3.5; border-bottom: 1px solid var(--color-line); vertical-align: middle; }
    .table tbody tr { transition: background 0.15s ease; }
    .table tbody tr:hover td { background: color-mix(in oklab, #fff 3%, transparent); }
    .table tbody tr:last-child td { border-bottom: none; }

    /* ---------- Avatar ---------- */
    .avatar {
        @apply inline-flex shrink-0 items-center justify-center rounded-full font-bold uppercase text-white;
        width: 2.5rem; height: 2.5rem; font-size: 0.8rem;
        background-image: linear-gradient(135deg, var(--color-primary-strong), var(--color-accent-strong));
    }

    /* ---------- Skeleton ---------- */
    .skeleton {
        background: linear-gradient(90deg, color-mix(in oklab, #fff 5%, transparent) 25%, color-mix(in oklab, #fff 11%, transparent) 37%, color-mix(in oklab, #fff 5%, transparent) 63%);
        background-size: 200% 100%;
        animation: shimmer 1.6s linear infinite;
        border-radius: 0.75rem;
    }
}