@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

@import 'tailwindcss';

@import 'tw-animate-css';

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

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

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

    --radius-lg: var(--radius);
    --radius-md: calc(var(--radius) - 2px);
    --radius-sm: calc(var(--radius) - 4px);

    --color-background: var(--background);
    --color-foreground: var(--foreground);

    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);

    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);

    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);

    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);

    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);

    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);

    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);

    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);

    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);

    --color-sidebar: var(--sidebar-background);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }
}

@layer utilities {
    body,
    html {
        --font-sans:
            'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
            'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
            'Noto Color Emoji';
    }
}

:root {
    --background: hsl(0 0% 100%);
    --foreground: hsl(0 0% 3.9%);
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(0 0% 3.9%);
    --popover: hsl(0 0% 100%);
    --popover-foreground: hsl(0 0% 3.9%);
    --primary: hsl(0 0% 9%);
    --primary-foreground: hsl(0 0% 98%);
    --secondary: hsl(0 0% 92.1%);
    --secondary-foreground: hsl(0 0% 9%);
    --muted: hsl(0 0% 96.1%);
    --muted-foreground: hsl(0 0% 45.1%);
    --accent: hsl(0 0% 96.1%);
    --accent-foreground: hsl(0 0% 9%);
    --destructive: hsl(0 84.2% 60.2%);
    --destructive-foreground: hsl(0 0% 98%);
    --border: hsl(0 0% 92.8%);
    --input: hsl(0 0% 89.8%);
    --ring: hsl(0 0% 3.9%);
    --chart-1: hsl(12 76% 61%);
    --chart-2: hsl(173 58% 39%);
    --chart-3: hsl(197 37% 24%);
    --chart-4: hsl(43 74% 66%);
    --chart-5: hsl(27 87% 67%);
    --radius: 0.5rem;
    --sidebar-background: hsl(0 0% 98%);
    --sidebar-foreground: hsl(240 5.3% 26.1%);
    --sidebar-primary: hsl(0 0% 10%);
    --sidebar-primary-foreground: hsl(0 0% 98%);
    --sidebar-accent: hsl(0 0% 94%);
    --sidebar-accent-foreground: hsl(0 0% 30%);
    --sidebar-border: hsl(0 0% 91%);
    --sidebar-ring: hsl(217.2 91.2% 59.8%);
    --sidebar: hsl(0 0% 98%);
}

.dark {
    --background: hsl(0 0% 3.9%);
    --foreground: hsl(0 0% 98%);
    --card: hsl(0 0% 3.9%);
    --card-foreground: hsl(0 0% 98%);
    --popover: hsl(0 0% 3.9%);
    --popover-foreground: hsl(0 0% 98%);
    --primary: hsl(0 0% 98%);
    --primary-foreground: hsl(0 0% 9%);
    --secondary: hsl(0 0% 14.9%);
    --secondary-foreground: hsl(0 0% 98%);
    --muted: hsl(0 0% 16.08%);
    --muted-foreground: hsl(0 0% 63.9%);
    --accent: hsl(0 0% 14.9%);
    --accent-foreground: hsl(0 0% 98%);
    --destructive: hsl(0 84% 60%);
    --destructive-foreground: hsl(0 0% 98%);
    --border: hsl(0 0% 14.9%);
    --input: hsl(0 0% 14.9%);
    --ring: hsl(0 0% 83.1%);
    --chart-1: hsl(220 70% 50%);
    --chart-2: hsl(160 60% 45%);
    --chart-3: hsl(30 80% 55%);
    --chart-4: hsl(280 65% 60%);
    --chart-5: hsl(340 75% 55%);
    --sidebar-background: hsl(0 0% 7%);
    --sidebar-foreground: hsl(0 0% 95.9%);
    --sidebar-primary: hsl(360, 100%, 100%);
    --sidebar-primary-foreground: hsl(0 0% 100%);
    --sidebar-accent: hsl(0 0% 15.9%);
    --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
    --sidebar-border: hsl(0 0% 15.9%);
    --sidebar-ring: hsl(217.2 91.2% 59.8%);
    --sidebar: hsl(240 5.9% 10%);
}

@layer base {
    * {
        @apply border-border outline-ring/50;
    }
    body {
        @apply bg-background text-foreground antialiased;
        overscroll-behavior-y: none;
    }
    html {
        -webkit-text-size-adjust: 100%;
        scroll-padding-top: 6rem;
        scroll-behavior: smooth;
    }
    body,
    .site-shell,
    .admin-shell {
        -webkit-overflow-scrolling: touch;
    }
    ::selection {
        background: color-mix(in oklab, #f59e0b 30%, white);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

@layer components {
    .site-shell {
        font-family:
            'Poppins', ui-sans-serif, system-ui, sans-serif,
            'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
            'Noto Color Emoji';
        background:
            radial-gradient(circle at top, rgba(59, 130, 246, 0.1), transparent 28%),
            linear-gradient(180deg, #f8fafc 0%, #f4f4f5 48%, #f8fafc 100%);
        color: #111827;
    }

    .site-container {
        @apply mx-auto w-full max-w-7xl px-4 sm:px-5 lg:px-8;
    }

    .site-eyebrow {
        @apply text-[0.72rem] font-semibold uppercase tracking-[0.28em] text-blue-700;
    }

    .site-heading-xl {
        @apply text-4xl font-semibold leading-tight tracking-[-0.04em] text-stone-950 sm:text-5xl lg:text-7xl;
    }

    .site-heading-lg {
        @apply text-3xl font-semibold tracking-[-0.035em] text-stone-950 sm:text-4xl lg:text-5xl;
    }

    .site-heading-md {
        @apply text-2xl font-semibold tracking-[-0.03em] text-stone-950 sm:text-3xl lg:text-4xl;
    }

    .site-body-lg {
        @apply text-base leading-8 text-stone-600 sm:text-lg sm:leading-9;
    }

    .site-body {
        @apply text-base leading-8 text-stone-600;
    }

    .site-divider {
        @apply border-t border-stone-200/80;
    }

    .site-button-primary {
        @apply inline-flex items-center justify-center rounded-full bg-blue-700 px-6 py-3 text-sm font-semibold text-white transition hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-100;
    }

    .site-button-secondary {
        @apply inline-flex items-center justify-center rounded-full border border-stone-300 bg-white/80 px-6 py-3 text-sm font-semibold text-stone-700 transition hover:border-blue-200 hover:text-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-100;
    }

    .site-chip {
        @apply inline-flex items-center rounded-full border border-blue-200/80 bg-blue-50/80 px-4 py-1.5 text-[0.72rem] font-semibold uppercase tracking-[0.24em] text-blue-800;
    }

    .site-surface-soft {
        @apply rounded-[1.5rem] border border-white/70 bg-white/70 backdrop-blur-sm sm:rounded-[2rem];
    }

    .site-card-light {
        @apply overflow-hidden rounded-[1.4rem] border border-stone-200/80 bg-white/88 shadow-[0_18px_60px_-42px_rgba(15,23,42,0.28)] transition sm:rounded-[1.75rem];
    }

    .site-link {
        @apply transition hover:text-blue-700;
    }

    .site-form-input,
    .site-form-textarea {
        @apply w-full min-w-0 rounded-[1rem] border border-stone-300/90 bg-white/90 px-4 py-3 text-sm text-stone-900 shadow-sm shadow-stone-950/5 transition placeholder:text-stone-400 focus:border-blue-500 focus:outline-none focus:ring-4 focus:ring-blue-100 sm:rounded-[1.25rem] sm:py-3.5;
    }

    .site-form-textarea {
        @apply leading-7;
    }

    .admin-shell {
        font-family:
            'Poppins', ui-sans-serif, system-ui, sans-serif,
            'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
            'Noto Color Emoji';
        background:
            radial-gradient(circle at top, rgba(59, 130, 246, 0.12), transparent 30%),
            linear-gradient(180deg, #f8fafc 0%, #f5f5f4 48%, #fafaf9 100%);
        color: #1c1917;
    }

    .admin-kicker {
        @apply text-[0.72rem] font-semibold uppercase tracking-[0.24em] text-blue-700;
    }

    .admin-page-header {
        @apply flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between;
    }

    .admin-page-title {
        @apply mt-2 text-3xl font-semibold tracking-[-0.035em] text-stone-950 sm:text-4xl lg:text-5xl;
    }

    .admin-page-description {
        @apply mt-3 max-w-3xl text-sm leading-7 text-stone-600;
    }

    .admin-surface {
        @apply rounded-[1.75rem] border border-white/75 bg-white/88 shadow-[0_22px_70px_-48px_rgba(15,23,42,0.28)] backdrop-blur-sm;
    }

    .admin-muted-surface {
        @apply rounded-[1.5rem] border border-stone-200/80 bg-stone-50/70;
    }

    .admin-card-padding {
        @apply p-5 sm:p-6 lg:p-8;
    }

    .admin-section-title {
        @apply text-2xl font-semibold tracking-[-0.03em] text-stone-950;
    }

    .admin-section-description {
        @apply mt-2 text-sm leading-7 text-stone-600;
    }

    .admin-button-primary {
        @apply inline-flex items-center justify-center rounded-full bg-blue-700 px-5 py-3 text-sm font-semibold text-white transition hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-100 disabled:cursor-not-allowed disabled:opacity-60;
    }

    .admin-button-secondary {
        @apply inline-flex items-center justify-center rounded-full border border-stone-300/90 bg-white/90 px-5 py-3 text-sm font-semibold text-stone-700 transition hover:border-blue-200 hover:text-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-100 disabled:cursor-not-allowed disabled:opacity-60;
    }

    .admin-button-ghost {
        @apply inline-flex items-center gap-2 text-sm font-medium text-stone-700 transition hover:text-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-100;
    }

    .admin-field {
        @apply grid gap-2;
    }

    .admin-field-label {
        @apply text-sm font-semibold text-stone-800;
    }

    .admin-field-helper {
        @apply text-xs leading-5 text-stone-500;
    }

    .admin-input,
    .admin-select,
    .admin-textarea {
        @apply w-full min-w-0 rounded-[1rem] border border-stone-300/90 bg-white/92 px-4 py-3 text-sm text-stone-900 shadow-sm shadow-stone-950/5 transition placeholder:text-stone-400 focus:border-blue-500 focus:outline-none focus:ring-4 focus:ring-blue-100 sm:rounded-[1.25rem] sm:py-3.5;
    }

    .admin-textarea {
        @apply leading-7;
    }

    .admin-select {
        @apply pr-10;
    }

    .admin-checkbox {
        @apply h-4 w-4 rounded border-stone-300 text-blue-700 focus:ring-blue-200;
    }

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

    .admin-table-head {
        @apply bg-stone-50/90 text-xs font-semibold uppercase tracking-[0.22em] text-stone-500;
    }

    .admin-table-head-cell {
        @apply px-6 py-4;
    }

    .admin-table-row {
        @apply border-t border-stone-200/80 transition hover:bg-blue-50/40;
    }

    .admin-table-cell {
        @apply px-6 py-4 align-top text-stone-700;
    }

    .admin-table-title {
        @apply font-semibold text-stone-950 transition hover:text-blue-700;
    }

    .admin-table-meta {
        @apply mt-1 text-xs leading-5 text-stone-500;
    }

    .admin-status-badge {
        @apply inline-flex items-center rounded-full border px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em];
    }

    .admin-empty-state {
        @apply flex flex-col items-start gap-3 rounded-[1.5rem] border border-dashed border-stone-300 bg-stone-50/80 p-6 text-sm text-stone-600;
    }

    .admin-stat-label {
        @apply text-sm font-medium text-stone-600;
    }

    .admin-stat-value {
        @apply mt-4 text-4xl font-semibold tracking-[-0.04em] text-stone-950;
    }

    .admin-nav-link {
        @apply flex items-center gap-3 rounded-[1.15rem] px-4 py-3 text-sm font-medium text-stone-600 transition hover:bg-white/95 hover:text-stone-950 hover:shadow-sm hover:shadow-stone-950/5;
    }

    .admin-nav-link-active {
        @apply bg-white text-blue-700 shadow-sm shadow-stone-950/5 ring-1 ring-blue-100;
    }

    .admin-link-card {
        @apply block rounded-[1.75rem] border border-white/75 bg-white/88 p-6 shadow-[0_22px_70px_-48px_rgba(15,23,42,0.28)] backdrop-blur-sm transition hover:-translate-y-0.5 hover:border-blue-200 hover:shadow-[0_24px_70px_-48px_rgba(37,99,235,0.22)];
    }

    .admin-action-tile {
        @apply block rounded-[1.5rem] border border-stone-200/80 bg-stone-50/70 px-5 py-4 font-medium text-stone-900 transition hover:border-blue-200 hover:bg-white hover:text-blue-700;
    }

    .site-prose {
        @apply text-base leading-8 text-stone-700 sm:text-[1.05rem] sm:leading-9;
    }

    .site-prose > :first-child {
        @apply mt-0;
    }

    .site-prose > :last-child {
        @apply mb-0;
    }

    .site-prose h1,
    .site-prose h2,
    .site-prose h3,
    .site-prose h4,
    .site-prose h5,
    .site-prose h6 {
        @apply scroll-mt-28 font-semibold tracking-[-0.035em] text-stone-950;
    }

    .site-prose h1 {
        @apply mt-10 mb-5 text-4xl leading-tight sm:mt-12 sm:text-5xl;
    }

    .site-prose h2 {
        @apply mt-10 mb-4 text-3xl leading-tight sm:mt-12 sm:text-[2.1rem];
    }

    .site-prose h3 {
        @apply mt-8 mb-4 text-2xl leading-tight sm:mt-10 sm:text-[1.75rem];
    }

    .site-prose h4 {
        @apply mt-8 mb-3 text-xl leading-tight sm:text-[1.35rem];
    }

    .site-prose h5 {
        @apply mt-6 mb-3 text-lg leading-tight;
    }

    .site-prose h6 {
        @apply mt-6 mb-3 text-base leading-tight uppercase tracking-[0.16em] text-stone-600;
    }

    .site-prose p,
    .site-prose ul,
    .site-prose ol,
    .site-prose blockquote,
    .site-prose pre,
    .site-prose table,
    .site-prose figure {
        @apply my-5;
    }

    .site-prose strong {
        @apply font-semibold text-stone-950;
    }

    .site-prose em {
        @apply text-stone-800;
    }

    .site-prose a {
        @apply font-medium text-blue-700 underline decoration-blue-300 underline-offset-4 transition hover:text-blue-800 hover:decoration-blue-500;
    }

    .site-prose ul,
    .site-prose ol {
        @apply space-y-3 pl-6;
    }

    .site-prose ul {
        @apply list-disc marker:text-blue-600;
    }

    .site-prose ol {
        @apply list-decimal marker:font-semibold marker:text-stone-500;
    }

    .site-prose li {
        @apply pl-1;
    }

    .site-prose li > p {
        @apply my-2;
    }

    .site-prose blockquote {
        @apply rounded-[1.75rem] border border-stone-200/80 bg-white/80 px-6 py-5 text-lg leading-8 text-stone-700 shadow-[0_18px_60px_-42px_rgba(15,23,42,0.2)];
    }

    .site-prose hr {
        @apply my-10 border-stone-200/80;
    }

    .site-prose code {
        @apply rounded-lg bg-stone-100 px-2 py-1 text-[0.92em] font-medium text-blue-800;
    }

    .site-prose pre {
        @apply relative overflow-x-auto rounded-[1.6rem] border border-[#1f2b46] bg-[#091120] px-5 pt-14 pb-5 text-sm leading-7 text-slate-100 shadow-[0_28px_70px_-42px_rgba(15,23,42,0.55)];
        background-image:
            radial-gradient(circle at top left, rgba(59, 130, 246, 0.18), transparent 34%),
            linear-gradient(180deg, #101a31 0%, #091120 100%);
        scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
        scrollbar-width: thin;
    }

    .site-prose pre code {
        @apply block min-w-max bg-transparent p-0 font-mono text-[0.92rem] leading-7 text-inherit;
    }

    .site-prose pre[data-language]::before {
        @apply absolute top-4 left-5 rounded-full border border-white/10 bg-white/8 px-3 py-1 text-[0.7rem] font-semibold uppercase tracking-[0.18em] text-blue-100;
        content: attr(data-language);
    }

    .site-prose pre[data-language]::after {
        @apply absolute top-0 right-0 left-0 h-11 rounded-t-[1.6rem] border-b border-white/10;
        content: '';
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
            radial-gradient(circle at 1.5rem 1.35rem, #fb7185 0.28rem, transparent 0.3rem),
            radial-gradient(circle at 2.5rem 1.35rem, #fbbf24 0.28rem, transparent 0.3rem),
            radial-gradient(circle at 3.5rem 1.35rem, #34d399 0.28rem, transparent 0.3rem);
    }

    .site-prose pre::-webkit-scrollbar {
        height: 0.65rem;
    }

    .site-prose pre::-webkit-scrollbar-track {
        background: transparent;
    }

    .site-prose pre::-webkit-scrollbar-thumb {
        border: 2px solid transparent;
        border-radius: 9999px;
        background-color: rgba(148, 163, 184, 0.45);
        background-clip: padding-box;
    }

    .site-prose img {
        @apply my-8 rounded-[2rem] border border-stone-200/80 shadow-[0_24px_80px_-48px_rgba(15,23,42,0.3)];
    }

    .site-prose table {
        @apply w-full overflow-hidden rounded-[1.5rem] border border-stone-200/80 bg-white/90 shadow-[0_18px_60px_-42px_rgba(15,23,42,0.18)];
    }

    .site-prose thead {
        @apply bg-stone-50 text-left;
    }

    .site-prose th,
    .site-prose td {
        @apply border-b border-stone-200/70 px-4 py-3 align-top text-sm sm:px-5;
    }

    .site-prose th {
        @apply font-semibold text-stone-900;
    }

    .site-prose tbody tr:last-child td {
        @apply border-b-0;
    }
}