@import 'tailwindcss';

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

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

@theme {
    --font-sans: "Segoe UI", "Noto Sans Arabic", "Geeza Pro", Arial, ui-sans-serif, system-ui, sans-serif;
    --color-gold-50: #fbf8ed;
    --color-gold-100: #f4eccf;
    --color-gold-200: #ead99f;
    --color-gold-300: #ddc067;
    --color-gold-400: #cda43d;
    --color-gold-500: #b78c2e;
    --color-gold-600: #956b25;
    --color-gold-700: #765021;
    --color-gold-800: #634222;
    --color-gold-900: #55391f;
    --color-ink-950: #0c0d0d;
}

@layer base {
    * { border-color: color-mix(in srgb, #a8a29e 24%, transparent); }
    html { scroll-behavior: smooth; }
    body {
        @apply bg-stone-50 text-stone-900 antialiased dark:bg-ink-950 dark:text-stone-100;
        font-family: var(--font-sans);
        font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
        text-rendering: optimizeLegibility;
        background-image:
            radial-gradient(circle at 85% -10%, rgba(202, 164, 61, .09), transparent 30rem),
            radial-gradient(circle at 8% 90%, rgba(120, 113, 108, .05), transparent 28rem);
        background-attachment: fixed;
    }
    input, select, textarea, button { font: inherit; }
    h1, h2, h3, h4 { letter-spacing: -.025em; text-wrap: balance; }
    strong, b, .font-black { letter-spacing: -.012em; }
    [dir="ltr"], .font-mono { font-variant-numeric: tabular-nums; }
    ::selection { @apply bg-gold-300 text-stone-950; }
    [x-cloak] { display: none !important; }
    .grid > * { min-width: 0; }
    :focus-visible { @apply outline-none ring-4 ring-gold-500/20; }
    * { scrollbar-width: thin; scrollbar-color: #cda43d transparent; }
}

@layer components {
    .app-shell { @apply min-h-screen lg:flex; }
    .app-sidebar { box-shadow: -18px 0 60px rgba(12, 13, 13, .12); }
    .app-header { box-shadow: 0 1px 0 rgba(120,113,108,.04), 0 12px 35px rgba(28,25,23,.025); }
    .app-main { @apply p-4 sm:p-7 lg:p-9; }
    .luxury-panel {
        @apply rounded-[1.35rem] border border-stone-200/80 bg-white/95 shadow-[0_12px_45px_rgba(28,25,23,.055)] backdrop-blur-sm dark:border-white/10 dark:bg-white/[.045];
        box-shadow: 0 1px 1px rgba(28,25,23,.03), 0 14px 50px rgba(28,25,23,.055);
    }
    .page-head { @apply mb-7 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between; }
    .page-head h1 { @apply text-2xl font-black text-stone-950 sm:text-[1.75rem] dark:text-white; }
    .page-head p { @apply mt-2 max-w-3xl text-sm leading-7 text-stone-500 dark:text-stone-400; }
    .field-label { @apply mb-2 block text-sm font-extrabold text-stone-700 dark:text-stone-200; }
    .field-input {
        @apply w-full rounded-xl border border-stone-200 bg-stone-50/50 px-4 py-3 text-sm outline-none transition duration-200 placeholder:text-stone-400 hover:border-stone-300 focus:border-gold-500 focus:bg-white focus:ring-4 focus:ring-gold-500/10 dark:border-white/10 dark:bg-white/[.04] dark:text-white dark:hover:border-white/20 dark:focus:bg-white/[.07];
    }
    .btn-primary { @apply inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-l from-gold-500 via-gold-600 to-gold-700 px-5 py-3 text-sm font-extrabold text-white shadow-lg shadow-gold-700/20 transition duration-200 hover:-translate-y-0.5 hover:brightness-110 hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-gold-500/20 active:translate-y-0 disabled:cursor-not-allowed disabled:opacity-60; }
    .btn-secondary { @apply inline-flex items-center justify-center gap-2 rounded-xl border border-stone-200 bg-white px-5 py-3 text-sm font-extrabold text-stone-700 shadow-sm transition duration-200 hover:-translate-y-0.5 hover:border-gold-300 hover:bg-gold-50/60 hover:text-gold-800 dark:border-white/10 dark:bg-white/5 dark:text-stone-200 dark:hover:border-gold-500/40 dark:hover:bg-gold-500/10; }
    .nav-link { @apply relative flex items-center gap-3 rounded-xl px-4 py-2.5 text-[13px] font-semibold text-stone-400 transition duration-200 hover:translate-x-[-2px] hover:bg-white/[.06] hover:text-gold-200; }
    .nav-link span { @apply grid w-5 place-items-center text-gold-500/80; }
    .nav-link-active { @apply bg-gradient-to-l from-gold-500/20 via-gold-500/10 to-transparent text-gold-200 ring-1 ring-inset ring-gold-400/20; }
    .nav-link-active::before { content: ""; @apply absolute inset-y-2 right-0 w-1 rounded-full bg-gold-400 shadow-[0_0_14px_rgba(221,192,103,.7)] ltr:left-0 ltr:right-auto; }
    .badge-success { @apply inline-flex items-center gap-1.5 rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-bold text-emerald-700 dark:bg-emerald-400/10 dark:text-emerald-300; }
    .badge-muted { @apply inline-flex items-center gap-1.5 rounded-full bg-stone-100 px-2.5 py-1 text-xs font-bold text-stone-500 dark:bg-white/5 dark:text-stone-400; }
    .data-table { @apply w-full border-separate border-spacing-0 text-right text-sm; }
    .data-table thead th { @apply whitespace-nowrap border-b border-stone-200 bg-stone-50/80 px-5 py-3.5 text-[11px] font-black uppercase tracking-wide text-stone-500 dark:border-white/10 dark:bg-white/[.025] dark:text-stone-400; }
    .data-table tbody td { @apply border-b border-stone-100 px-5 py-4 align-middle text-stone-700 dark:border-white/[.06] dark:text-stone-200; }
    .data-table tbody tr { @apply transition-colors; }
    .data-table tbody tr:hover { @apply bg-gold-50/45 dark:bg-gold-500/[.045]; }
    .data-table tbody tr:last-child td { @apply border-b-0; }
    .data-table tfoot th, .data-table tfoot td { @apply border-t-2 border-gold-300/50 bg-gold-50/50 px-5 py-4 font-black dark:bg-gold-500/5; }
}

.gold-grid {
    background-image: linear-gradient(rgba(221,192,103,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(221,192,103,.055) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(to bottom, black, transparent 92%);
}

.brand-mark { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 35px rgba(149,107,37,.34); }

@media (min-width: 1024px) {
    .app-main { max-width: 1680px; margin-inline: auto; width: 100%; }
}

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