/* Web fonts: Montserrat / Roboto Slab for LTR, Cairo / Tajawal / Almarai for RTL */
@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Cairo:wght@200..1000&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto+Slab:wght@100..900&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
@import 'tailwindcss';

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

@custom-variant dark (&:where(.dark, .dark *));

@theme {
    --font-sans: 'Montserrat', 'Inter', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-serif: 'Roboto Slab', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
    --font-arabic: 'Cairo', 'Tajawal', 'Almarai', 'Montserrat', 'Inter', ui-sans-serif, system-ui, sans-serif;

    --color-brand-50: #eef4ff;
    --color-brand-100: #dbe6ff;
    --color-brand-200: #bdd0ff;
    --color-brand-300: #8eafff;
    --color-brand-400: #5b86ff;
    --color-brand-500: #3563ff;
    --color-brand-600: #1f43f5;
    --color-brand-700: #1a33d8;
    --color-brand-800: #1c2cae;
    --color-brand-900: #1d2c89;
    --color-brand-950: #131a4f;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* LTR languages: Montserrat for body, Roboto Slab for headings */
html[dir="ltr"],
html[dir="ltr"] body {
    font-family: 'Montserrat', 'Inter', ui-sans-serif, system-ui, sans-serif;
}
html[dir="ltr"] h1,
html[dir="ltr"] h2,
html[dir="ltr"] h3,
html[dir="ltr"] h4,
html[dir="ltr"] h5,
html[dir="ltr"] h6 {
    font-family: 'Roboto Slab', 'Montserrat', ui-serif, Georgia, serif;
}

/* Apply the Arabic-friendly font stack only when the document is RTL.
   Headings get Cairo, body uses Tajawal/Almarai for legibility,
   Latin characters fall through to Montserrat / Inter. */
html[dir="rtl"] {
    font-family: var(--font-arabic);
    letter-spacing: 0;
}
html[dir="rtl"] body { font-family: var(--font-arabic); }
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    font-family: 'Cairo', 'Tajawal', 'Montserrat', 'Inter', sans-serif;
    font-weight: 700;
}
html[dir="rtl"] .font-mono,
html[dir="rtl"] code,
html[dir="rtl"] pre { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; }

@utility btn {
    @apply inline-flex items-center justify-center gap-2 font-medium rounded-xl px-4 py-2 text-sm transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-brand-500 disabled:opacity-50 disabled:cursor-not-allowed;
}
@utility btn-primary {
    @apply inline-flex items-center justify-center gap-2 font-medium rounded-xl px-4 py-2 text-sm transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-brand-500 disabled:opacity-50 disabled:cursor-not-allowed bg-brand-600 text-white hover:bg-brand-700 active:bg-brand-800 shadow-sm;
}
@utility btn-secondary {
    @apply inline-flex items-center justify-center gap-2 font-medium rounded-xl px-4 py-2 text-sm transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-brand-500 disabled:opacity-50 disabled:cursor-not-allowed bg-white text-slate-700 border border-slate-200 hover:bg-slate-50 dark:bg-slate-800 dark:text-slate-100 dark:border-slate-700 dark:hover:bg-slate-700;
}
@utility btn-danger {
    @apply inline-flex items-center justify-center gap-2 font-medium rounded-xl px-4 py-2 text-sm transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-brand-500 disabled:opacity-50 disabled:cursor-not-allowed bg-rose-600 text-white hover:bg-rose-700;
}
@utility btn-ghost {
    @apply inline-flex items-center justify-center gap-2 font-medium rounded-xl px-3 py-2 text-sm transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-brand-500 text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800;
}

@utility card {
    @apply bg-white dark:bg-slate-900 border border-slate-200/70 dark:border-slate-800 rounded-2xl shadow-sm;
}
@utility card-pad {
    @apply bg-white dark:bg-slate-900 border border-slate-200/70 dark:border-slate-800 rounded-2xl shadow-sm p-6;
}

@utility form-label {
    @apply block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5;
}
@utility form-input {
    @apply block w-full rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 px-3.5 py-2.5 text-sm text-slate-900 dark:text-slate-100 placeholder:text-slate-400 shadow-sm focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition;
}
@utility form-select {
    @apply block w-full rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 px-3.5 py-2.5 pr-10 text-sm text-slate-900 dark:text-slate-100 placeholder:text-slate-400 shadow-sm focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition;
}
@utility form-error {
    @apply mt-1 text-xs text-rose-600 dark:text-rose-400;
}

@utility badge-success {
    @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-50 text-emerald-700 ring-1 ring-emerald-600/20 dark:bg-emerald-900/30 dark:text-emerald-300 dark:ring-emerald-400/20;
}
@utility badge-warn {
    @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-amber-50 text-amber-700 ring-1 ring-amber-600/20 dark:bg-amber-900/30 dark:text-amber-300 dark:ring-amber-400/20;
}
@utility badge-info {
    @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-sky-50 text-sky-700 ring-1 ring-sky-600/20 dark:bg-sky-900/30 dark:text-sky-300 dark:ring-sky-400/20;
}
@utility badge-neutral {
    @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-700 ring-1 ring-slate-400/20 dark:bg-slate-800 dark:text-slate-300 dark:ring-slate-500/30;
}
@utility badge-danger {
    @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-rose-50 text-rose-700 ring-1 ring-rose-600/20 dark:bg-rose-900/30 dark:text-rose-300 dark:ring-rose-400/20;
}

@utility nav-link {
    @apply flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white transition;
}
@utility nav-link-active {
    @apply bg-brand-50 text-brand-700 hover:bg-brand-50 dark:bg-brand-600/15 dark:text-brand-300 dark:hover:bg-brand-600/20;
}

/* Thin scrollbar — Firefox + WebKit. Track stays invisible until hover. */
.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.35) transparent; /* slate-500/35 */
}
.scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: rgba(100, 116, 139, 0.25);
    border-radius: 999px;
}
.scrollbar-thin:hover::-webkit-scrollbar-thumb {
    background-color: rgba(100, 116, 139, 0.55);
}
.dark .scrollbar-thin {
    scrollbar-color: rgba(148, 163, 184, 0.30) transparent; /* slate-400/30 */
}
.dark .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.20);
}
.dark .scrollbar-thin:hover::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.50);
}

.glass {
    background: color-mix(in oklab, white 70%, transparent);
    backdrop-filter: saturate(140%) blur(8px);
}
.dark .glass {
    background: color-mix(in oklab, oklab(0.18 0 0) 65%, transparent);
}

.bg-app {
    background-image:
        radial-gradient(60% 80% at 100% 0%, rgba(53, 99, 255, 0.06) 0%, transparent 50%),
        radial-gradient(60% 60% at 0% 100%, rgba(53, 99, 255, 0.05) 0%, transparent 50%);
}
.dark .bg-app {
    background-image:
        radial-gradient(60% 80% at 100% 0%, rgba(53, 99, 255, 0.10) 0%, transparent 50%),
        radial-gradient(60% 60% at 0% 100%, rgba(53, 99, 255, 0.08) 0%, transparent 50%);
}