@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: 'Cairo', 'Tajawal', ui-sans-serif, system-ui, sans-serif;
    --color-madar-950: #06080f;
    --color-madar-900: #0c1020;
    --color-madar-800: #12182e;
    --color-madar-accent: #22d3ee;
    --color-madar-violet: #8b5cf6;
}

@layer base {
    body.madar-body {
        @apply min-h-screen bg-madar-950 text-zinc-100 antialiased;
        background-image:
            radial-gradient(ellipse 80% 50% at 50% -20%, rgb(139 92 246 / 0.15), transparent),
            radial-gradient(ellipse 60% 40% at 100% 50%, rgb(34 211 238 / 0.08), transparent);
    }
}

@layer components {
    .glass-card {
        @apply rounded-2xl border border-white/10 bg-white/5 backdrop-blur-xl shadow-xl shadow-black/20;
    }
    .neon-btn {
        @apply inline-flex items-center justify-center rounded-xl bg-gradient-to-l from-violet-600 via-indigo-600 to-cyan-500 px-5 py-2.5 text-sm font-bold text-white shadow-lg shadow-violet-500/25 transition hover:brightness-110;
    }
    .neon-btn-outline {
        @apply inline-flex items-center justify-center rounded-xl border border-white/15 bg-white/5 px-5 py-2.5 text-sm font-bold text-white transition hover:bg-white/10;
    }
    .madar-input {
        @apply w-full rounded-xl border border-white/10 bg-black/30 px-4 py-3 text-sm text-white placeholder:text-zinc-500 focus:border-cyan-500/50 focus:outline-none focus:ring-2 focus:ring-cyan-500/20;
    }
    .sidebar-link {
        @apply flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-zinc-400 transition hover:bg-white/5 hover:text-white;
    }
    .sidebar-link-active {
        @apply bg-gradient-to-l from-violet-600/20 to-cyan-500/10 text-white;
    }

    /* Text analysis studio */
    .ta-chip {
        @apply rounded-full border border-white/10 bg-white/5 px-3 py-1 text-zinc-400;
    }
    .ta-quick-btn {
        @apply rounded-xl border border-white/10 bg-white/5 px-4 py-2 text-xs font-bold text-white transition hover:bg-white/10;
    }
    .ta-quick-btn--primary {
        @apply border-0 bg-gradient-to-l from-violet-600 to-cyan-500 text-white shadow-lg shadow-violet-500/20 hover:brightness-110;
    }
    .ta-quick-btn:disabled {
        @apply cursor-not-allowed opacity-40;
    }
    .ta-counter {
        @apply font-semibold text-zinc-500;
    }
    .ta-error-banner {
        @apply rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-200;
    }
    .ta-skeleton-bar {
        @apply mb-3 h-16 animate-pulse rounded-2xl bg-white/5;
    }
    .ta-score-ring-wrap {
        @apply relative flex flex-col items-center justify-center;
    }
    .ta-ring {
        @apply h-28 w-28 -rotate-90;
    }
    .ta-ring-bg {
        fill: none;
        stroke: rgb(255 255 255 / 0.08);
        stroke-width: 10;
    }
    .ta-ring-fill {
        fill: none;
        stroke-width: 10;
        stroke-linecap: round;
        transition: stroke-dashoffset 0.6s ease;
    }
    .ta-ring-fill--human {
        stroke: #3dff9a;
    }
    .ta-ring-fill--ai {
        stroke: #8b5cf6;
    }
    .ta-ring-value {
        @apply absolute text-xl font-black text-white;
    }
    .ta-ring-label {
        @apply mt-2 text-xs text-zinc-500;
    }
    .ta-bar-block {
        @apply flex flex-col justify-center;
    }
    .ta-bar-label {
        @apply text-xs text-zinc-500;
    }
    .ta-bar-track {
        @apply mt-2 h-2 overflow-hidden rounded-full bg-white/10;
    }
    .ta-bar-fill {
        @apply h-full rounded-full bg-gradient-to-l from-cyan-400 to-violet-500 transition-all duration-500;
        width: 0;
    }
    .ta-bar-value {
        @apply mt-1 text-sm font-bold text-white;
    }
    .ta-tone-badge {
        @apply rounded-xl border border-violet-500/25 bg-violet-500/10 p-4 text-center;
    }
    .ta-tab {
        @apply flex-1 rounded-lg bg-white/5 px-3 py-2 text-xs font-bold text-zinc-400 transition;
    }
    .ta-tab--active {
        @apply bg-gradient-to-l from-violet-600 to-cyan-500 text-madar-950;
    }
    .ta-text-pane {
        @apply min-h-[120px] max-h-72 overflow-y-auto rounded-xl border border-white/10 bg-black/30 p-4 text-sm leading-relaxed text-zinc-200 whitespace-pre-wrap;
    }
    .ta-text-pane--locked::after {
        content: 'معاينة جزئية — ترقية للنسخ الكامل';
        display: block;
        margin-top: 0.75rem;
        font-size: 0.7rem;
        color: #fbbf24;
    }
    .ta-weak-item {
        @apply list-none rounded-lg border border-white/5 bg-white/5 px-3 py-2 before:mr-2 before:inline-block before:h-1.5 before:w-1.5 before:rounded-full before:bg-violet-400 before:content-[''];
    }
    .ta-toast {
        @apply fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-xl border border-cyan-500/30 bg-cyan-500/20 px-5 py-3 text-sm font-bold text-cyan-100 shadow-xl backdrop-blur-md transition;
    }
    .ta-toast--show {
        @apply opacity-100;
    }
}