@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';

@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: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Open Sans", "Segoe UI", "Source Sans Pro", "Roboto", "Trebuchet MS", Arial, sans-serif;
    --font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Open Sans", "Segoe UI", "Source Sans Pro", "Roboto", "Trebuchet MS", Arial, sans-serif;
    --color-primary: var(--c-primary);
    --color-secondary: var(--c-secondary);
    --color-gray-50: var(--c-gray-50);
    --color-gray-100: var(--c-gray-100);
    --color-gray-200: var(--c-gray-200);
    --color-gray-300: var(--c-gray-300);
    --color-gray-400: var(--c-gray-400);
    --color-gray-500: var(--c-gray-500);
    --color-gray-600: var(--c-gray-600);
    --color-gray-700: var(--c-gray-700);
    --color-gray-800: var(--c-gray-800);
    --color-gray-900: var(--c-gray-900);
}

:root {
    --c-primary: #00527a;
    --c-secondary: #5fa7c6;
    --c-accent: #f5b301;
    --c-ink: #0b1220;
    --c-ink-soft: #0f172a;
    --c-gray-50: #f7fafc;
    --c-gray-100: #eef3f6;
    --c-gray-200: #dbe6ed;
    --c-gray-300: #c0d3df;
    --c-gray-400: #91acc1;
    --c-gray-500: #5f7e96;
    --c-gray-600: #3f5d74;
    --c-gray-700: #2f485a;
    --c-gray-800: #1d2f3d;
    --c-gray-900: #18181b;
    --c-surface: #f7fafc;
    --c-surface-muted: #eef3f6;
    --c-text: #0f1f2c;
}

/* Dark mode via class toggle */
.dark {
    --c-primary: #66c2ff;
    --c-secondary: #8bd6ff;
    --c-accent: #f6c452;
    --c-ink: #e6f4ff;
    --c-ink-soft: #cfe4f2;
    --c-gray-50: #0a121b;
    --c-gray-100: #0f1b27;
    --c-gray-200: #132233;
    --c-gray-300: #1a2e42;
    --c-gray-400: #244059;
    --c-gray-500: #3a5873;
    --c-gray-600: #4f6f8a;
    --c-gray-700: #82a1b8;
    --c-gray-800: #c3d6e5;
    --c-gray-900: #e6f4ff;
    --c-surface: #0b141f;
    --c-surface-muted: #0f1b27;
    --c-text: #e6f4ff;
}

/* Dark mode via system preference (when no explicit class is set) */
@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        --c-primary: #66c2ff;
        --c-secondary: #8bd6ff;
        --c-accent: #f6c452;
        --c-ink: #e6f4ff;
        --c-ink-soft: #cfe4f2;
        --c-gray-50: #0a121b;
        --c-gray-100: #0f1b27;
        --c-gray-200: #132233;
        --c-gray-300: #1a2e42;
        --c-gray-400: #244059;
        --c-gray-500: #3a5873;
        --c-gray-600: #4f6f8a;
        --c-gray-700: #82a1b8;
        --c-gray-800: #c3d6e5;
        --c-gray-900: #e6f4ff;
        --c-surface: #0b141f;
        --c-surface-muted: #0f1b27;
        --c-text: #e6f4ff;
    }
}

html {
    background-color: #f7fafc;
}

.dark html,
html.dark {
    background-color: #0b141f;
}

body {
    background-color: #f7fafc;
    color: var(--c-text);
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 82, 122, 0.15), transparent),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(245, 179, 1, 0.08), transparent),
        linear-gradient(135deg, rgba(0, 82, 122, 0.06) 0%, rgba(95, 167, 198, 0.04) 50%, rgba(245, 179, 1, 0.03) 100%);
    background-attachment: fixed;
}

.dark body {
    background-color: #0b141f;
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 82, 122, 0.4), transparent),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(245, 179, 1, 0.12), transparent),
        linear-gradient(135deg, rgba(0, 82, 122, 0.25) 0%, rgba(102, 194, 255, 0.1) 50%, rgba(11, 20, 31, 0.95) 100%);
}

.font-display {
    font-family: var(--font-display);
}

.prose {
    @apply max-w-none leading-relaxed text-gray-800 dark:text-gray-100;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
    @apply scroll-mt-24 font-semibold tracking-tight text-gray-900 dark:text-gray-50;
}

.prose a {
    @apply text-primary underline-offset-4 decoration-2 hover:text-primary/80;
}

.prose strong {
    @apply font-semibold;
}

.prose code {
    @apply bg-gray-100 dark:bg-gray-900 px-1.5 py-0.5 rounded text-sm text-gray-900 dark:text-gray-100;
}

.prose pre {
    @apply bg-gray-950 text-gray-50 rounded-lg shadow-inner border border-gray-800 overflow-x-auto;
}

.prose pre code {
    @apply bg-transparent text-inherit p-0;
}

.prose blockquote {
    @apply border-l-4 border-secondary/70 bg-secondary/10 px-4 py-2 text-gray-700 dark:text-gray-100 dark:border-secondary/60 dark:bg-secondary/10;
}

.heading-permalink {
    @apply text-primary/70 no-underline pr-2 align-middle;
}

.toc a {
    @apply block text-sm text-gray-700 hover:text-primary dark:text-gray-200 dark:hover:text-primary;
}

.toc li {
    @apply py-1;
}

.admonition {
    @apply my-6 rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 text-gray-800 shadow-sm dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100;
}

.admonition-title {
    @apply mb-2 flex items-center gap-2 font-semibold uppercase tracking-wide text-xs text-gray-700 dark:text-gray-300;
}

.admonition-note {
    @apply border-l-4 border-primary/80;
}

.admonition-tip {
    @apply border-l-4 border-emerald-500 bg-emerald-50 dark:bg-emerald-900/30;
}

.admonition-warning {
    @apply border-l-4 border-amber-500 bg-amber-50 dark:bg-amber-900/30;
}

.admonition-danger,
.admonition-caution {
    @apply border-l-4 border-red-500 bg-red-50 dark:bg-red-900/40;
}

.search-box {
    @apply relative;
}

.search-results {
    @apply absolute z-30 mt-2 w-full rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900;
}

.search-results ul {
    @apply divide-y divide-gray-100 dark:divide-gray-800;
}

.search-results a {
    @apply block px-3 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-800;
}

.skip-link {
    @apply sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-50 focus:rounded focus:bg-primary focus:px-3 focus:py-2 focus:text-white;
}

.docs-shell {
    @apply relative flex min-h-screen;
}

.docs-shell::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 2rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 30px 120px rgba(0, 0, 0, 0.15);
}

.dark .docs-shell::before {
    border-color: rgba(255, 255, 255, 0.05);
}

.glass-panel {
    @apply bg-white/85 backdrop-blur border border-white/80 shadow-sm dark:bg-gray-900/70 dark:border-gray-800;
}

.surface-card {
    @apply rounded-2xl border border-gray-200 bg-white/90 shadow-xl shadow-primary/5 dark:border-gray-800 dark:bg-gray-900/70;
    transition: all 0.3s ease;
}

.surface-card:hover {
    @apply shadow-2xl shadow-primary/10;
    transform: translateY(-2px);
}

.feature-card {
    @apply rounded-2xl border border-zinc-200/70 bg-white/85 p-5 backdrop-blur transition-all duration-300;
    @apply dark:border-zinc-800 dark:bg-zinc-900/70;
    box-shadow: 0 4px 24px -4px rgba(0, 82, 122, 0.08);
}

.feature-card:hover {
    border-color: rgba(0, 82, 122, 0.3);
    box-shadow:
        0 8px 32px -4px rgba(0, 82, 122, 0.15),
        0 0 0 1px rgba(0, 82, 122, 0.1) inset;
    transform: translateY(-3px);
}

.dark .feature-card:hover {
    border-color: rgba(102, 194, 255, 0.4);
    box-shadow:
        0 8px 32px -4px rgba(102, 194, 255, 0.2),
        0 0 0 1px rgba(102, 194, 255, 0.15) inset;
}

.feature-card p.font-semibold {
    color: var(--c-primary);
}

.pill {
    @apply inline-flex items-center gap-2 rounded-full border border-gray-200 px-3 py-1 text-sm font-medium shadow-sm dark:border-gray-700;
}

/* ============================================
   Dark Mode Contrast Fixes
   ============================================ */

/* Ensure text has good contrast in dark mode */
.dark .text-zinc-500 {
    color: #a1a1aa !important;
}

.dark .text-zinc-600 {
    color: #d4d4d8 !important;
}

.dark .text-zinc-700 {
    color: #e4e4e7 !important;
}

/* Feature card text improvements */
.dark .feature-card {
    background-color: rgba(24, 24, 27, 0.85);
    border-color: rgba(63, 63, 70, 0.6);
}

.dark .feature-card p {
    color: #d4d4d8;
}

.dark .feature-card .text-sm {
    color: #a1a1aa;
}

/* Ensure all prose-like text is readable */
.dark p {
    color: #e4e4e7;
}

.dark .text-base {
    color: #e4e4e7;
}

/* Headers - Light Mode (explicit) */
h1,
h2,
h3,
h4 {
    color: #18181b !important;
}

.text-zinc-900 {
    color: #18181b !important;
}

/* Headers in dark mode */
.dark h1,
.dark h2,
.dark h3,
.dark h4 {
    color: #fafafa !important;
}

.dark .text-zinc-900 {
    color: #fafafa !important;
}

/* Code blocks in dark mode */
.dark code:not(pre code) {
    background-color: rgba(39, 39, 42, 0.8);
    color: #f4f4f5;
}

/* Table text */
.dark table {
    color: #e4e4e7;
}

.dark th {
    color: #fafafa;
}

.dark td {
    color: #d4d4d8;
}

/* Borders */
.dark .border-zinc-200 {
    border-color: rgba(63, 63, 70, 0.5);
}

/* Links in dark mode - make them pop */
.dark a:not(.side-link):not(.feature-card) {
    color: #60a5fa;
}

.dark a:not(.side-link):not(.feature-card):hover {
    color: #93c5fd;
}

.side-link {
    @apply relative flex items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium transition duration-200;
}

.side-link::before {
    content: "";
    @apply absolute inset-y-1 left-1 w-1 rounded-full bg-white/60 opacity-0 transition duration-200;
}

.side-link:hover {
    @apply bg-white/10 text-white;
}

.side-link:hover::before {
    @apply opacity-100;
}

.docs-hero {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(0, 82, 122, 0.08), rgba(95, 167, 198, 0.06), rgba(245, 179, 1, 0.05));
    border: 1px solid rgba(0, 82, 122, 0.15);
    box-shadow:
        0 25px 80px rgba(0, 82, 122, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

.dark .docs-hero {
    background: linear-gradient(135deg, rgba(0, 82, 122, 0.2), rgba(95, 167, 198, 0.1), rgba(245, 179, 1, 0.08));
    border: 1px solid rgba(102, 194, 255, 0.2);
    box-shadow:
        0 25px 80px rgba(0, 82, 122, 0.25),
        0 0 0 1px rgba(102, 194, 255, 0.1) inset;
}

.docs-hero::before,
.docs-hero::after {
    content: "";
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at 30% 30%, rgba(0, 82, 122, 0.18), transparent 45%);
    filter: blur(50px);
    z-index: 0;
}

.docs-hero::after {
    background: radial-gradient(circle at 70% 20%, rgba(245, 179, 1, 0.2), transparent 45%);
}

.floating-blur {
    position: absolute;
    pointer-events: none;
    width: 350px;
    height: 350px;
    border-radius: 9999px;
    filter: blur(130px);
    opacity: 0.75;
    animation: float 8s ease-in-out infinite;
}

.floating-blur.blue {
    background: rgba(0, 82, 122, 0.25);
}

.floating-blur.amber {
    background: rgba(245, 179, 1, 0.2);
    animation-delay: -3s;
}

.floating-blur.teal {
    background: rgba(95, 167, 198, 0.2);
    animation-delay: -5s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-20px) scale(1.05);
    }
}

.timeline {
    @apply relative grid gap-4;
}

.timeline::before {
    content: "";
    @apply absolute left-3 top-0 h-full w-px bg-gradient-to-b from-primary/40 via-primary/10 to-transparent;
}

.timeline-step {
    @apply relative flex items-start gap-3 rounded-2xl border border-gray-200 bg-white/80 px-4 py-3 shadow-sm dark:border-gray-800 dark:bg-gray-900/70;
}

.timeline-step::before {
    content: "";
    position: absolute;
    left: 0.625rem;
    top: 1rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    background-color: var(--c-primary);
    box-shadow: 0 0 0 8px rgba(0, 82, 122, 0.1);
}

/* ============================================
   Light Mode Color Fixes
   ============================================ */

/* Ensure colored alert boxes have proper text contrast in light mode */
.bg-green-50 .text-green-800,
.bg-green-50 .text-green-700 {
    color: #166534 !important;
}

.bg-green-50 .text-green-400 {
    color: #15803d !important;
}

.bg-amber-50 .text-amber-800,
.bg-amber-50 .text-amber-700 {
    color: #92400e !important;
}

.bg-amber-50 .text-amber-400 {
    color: #b45309 !important;
}

.bg-blue-50 .text-blue-800,
.bg-blue-50 .text-blue-700 {
    color: #1e40af !important;
}

.bg-blue-50 .text-blue-400 {
    color: #2563eb !important;
}

.bg-red-50 .text-red-800,
.bg-red-50 .text-red-700 {
    color: #991b1b !important;
}

.bg-red-50 .text-red-400 {
    color: #dc2626 !important;
}

.bg-orange-50 .text-orange-800,
.bg-orange-50 .text-orange-700 {
    color: #9a3412 !important;
}

.bg-orange-50 .text-orange-400 {
    color: #ea580c !important;
}

/* Code blocks inside colored boxes */
.bg-green-50 code,
.bg-amber-50 code,
.bg-blue-50 code,
.bg-red-50 code,
.bg-orange-50 code {
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: inherit !important;
}

/* Table text readability in light mode */
table td {
    color: #3f3f46;
}

table th {
    color: #18181b;
}

/* Purple code text for monospace items in tables - light mode fix */
.text-purple-600 {
    color: #7c3aed !important;
}

/* Green code text - light mode fix */
.text-green-600 {
    color: #059669 !important;
}

/* Ensure zinc text colors are readable in light mode */
.text-zinc-600 {
    color: #52525b;
}

.text-zinc-500 {
    color: #71717a;
}

.text-zinc-400 {
    color: #a1a1aa;
}