@import 'tailwindcss';
@import '@fortawesome/fontawesome-free/css/all.min.css';
@import './themes.css';
@import './agent-animations.css';

@plugin "@tailwindcss/typography";

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

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

    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-300: #93c5fd;
    --color-primary-400: #60a5fa;
    --color-primary-500: #3b82f6;
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary-800: #1e40af;
    --color-primary-900: #1e3a8a;

    --color-sidebar: #111827;
    --color-sidebar-hover: #1f2937;

    /* Theme-aware semantic colors (mapped from CSS variables in themes.css) */
    --color-surface: var(--surface);
    --color-surface-alt: var(--surface-alt);
    --color-surface-raised: var(--surface-raised);
    --color-on-surface: var(--on-surface);
    --color-on-surface-muted: var(--on-surface-muted);
    --color-theme-primary: var(--primary);
    --color-theme-primary-hover: var(--primary-hover);
    --color-theme-accent: var(--accent);
    --color-theme-border: var(--border);
    --color-theme-border-strong: var(--border-strong);
    --color-theme-danger: var(--danger);
    --color-theme-success: var(--success);
    --color-theme-warning: var(--warning);
    --color-sidebar: var(--sidebar-bg);
    --color-sidebar-hover: var(--sidebar-hover);
    --color-sidebar-border: var(--sidebar-border);
    --color-header-bg: var(--header-bg);
    --color-header-border: var(--header-border);
    --color-input-bg: var(--input-bg);
    --color-input-border: var(--input-border);
    --color-code-bg: var(--code-bg);
}

/* ─── Global Theme Overrides ───
 * Remap hardcoded Tailwind utilities inside the app content area
 * so that authenticated pages automatically inherit the active theme.
 * Scoped to [data-theme-scope] to avoid breaking the public landing page.
 */

/* Backgrounds */
[data-theme-scope] .bg-white    { background-color: var(--surface-raised) !important; }
[data-theme-scope] .bg-gray-50  { background-color: var(--surface-alt) !important; }
[data-theme-scope] .bg-gray-100 { background-color: var(--surface-alt) !important; }

/* Text */
[data-theme-scope] .text-gray-900 { color: var(--on-surface) !important; }
[data-theme-scope] .text-gray-800 { color: var(--on-surface) !important; }
[data-theme-scope] .text-gray-700 { color: var(--on-surface) !important; }
[data-theme-scope] .text-gray-600 { color: var(--on-surface-muted) !important; }
[data-theme-scope] .text-gray-500 { color: var(--on-surface-muted) !important; }
[data-theme-scope] .text-gray-400 { color: var(--on-surface-muted) !important; }

/* Borders */
[data-theme-scope] .border-gray-200 { border-color: var(--border) !important; }
[data-theme-scope] .border-gray-300 { border-color: var(--border-strong) !important; }
[data-theme-scope] .divide-gray-200 > :not(:last-child) { border-color: var(--border) !important; }

/* Table header backgrounds */
[data-theme-scope] thead .bg-gray-50,
[data-theme-scope] .bg-gray-50.thead { background-color: var(--surface-alt) !important; }

/* Disabled inputs */
[data-theme-scope] .disabled\:bg-gray-100:disabled { background-color: var(--surface-alt) !important; }

/* Hover states */
[data-theme-scope] .hover\:bg-gray-50:hover { background-color: var(--surface-alt) !important; }

/* Placeholder */
[data-theme-scope] .placeholder-gray-400::placeholder { color: var(--on-surface-muted) !important; }

/* AI output rendering — lightweight prose replacement */
.prose-output {
    font-size: 0.875rem;
    line-height: 1.625;
    color: var(--on-surface-muted, #374151);
}
.prose-output p { margin: 0.5em 0; }
.prose-output h1, .prose-output h2, .prose-output h3,
.prose-output h4, .prose-output h5, .prose-output h6 {
    font-weight: 600;
    margin: 1em 0 0.5em;
    color: var(--on-surface, #111827);
}
.prose-output h1 { font-size: 1.25rem; }
.prose-output h2 { font-size: 1.125rem; }
.prose-output h3 { font-size: 1rem; }
.prose-output ul, .prose-output ol { margin: 0.5em 0; padding-left: 1.5em; }
.prose-output ul { list-style-type: disc; }
.prose-output ol { list-style-type: decimal; }
.prose-output li { margin: 0.25em 0; }
.prose-output strong { font-weight: 600; }
.prose-output code { font-size: 0.8125rem; background: var(--code-bg, #f3f4f6); padding: 0.125em 0.25em; border-radius: 0.25rem; }
.prose-output pre { background: var(--code-bg, #f3f4f6); padding: 0.75rem; border-radius: 0.375rem; overflow-x: auto; margin: 0.5em 0; }
.prose-output pre code { background: none; padding: 0; }
.prose-output blockquote { border-left: 3px solid var(--border-strong, #d1d5db); padding-left: 0.75em; color: var(--on-surface-muted, #6b7280); margin: 0.5em 0; }
.prose-output hr { border: none; border-top: 1px solid var(--border, #e5e7eb); margin: 1em 0; }
/* Tables */
.prose-output table { border-collapse: collapse; width: 100%; margin: 0.75em 0; font-size: 0.8125rem; }
.prose-output th,
.prose-output td { border: 1px solid var(--border-strong, #d1d5db); padding: 0.375rem 0.625rem; text-align: left; }
.prose-output th { background-color: var(--surface-alt, #f3f4f6); font-weight: 600; white-space: nowrap; }
.prose-output tr:nth-child(even) td { background-color: var(--surface-alt, #f9fafb); }
.prose-output td:first-child { white-space: normal; }

/* Alpine.js cloak — hide until Alpine initializes to prevent flash of unstyled content */
[x-cloak] { display: none !important; }

/* ─── Landing page ─── */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

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

/* ─── View Transitions API ─── */
/* Smooth page transitions when using wire:navigate + startViewTransition */
@supports (view-transition-name: root) {
    ::view-transition-old(root) {
        animation: 120ms ease-in fleetq-fade-out;
    }

    ::view-transition-new(root) {
        animation: 180ms ease-out fleetq-fade-in;
    }

    @keyframes fleetq-fade-out {
        from { opacity: 1; }
        to   { opacity: 0; }
    }

    @keyframes fleetq-fade-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* Respect prefers-reduced-motion */
    @media (prefers-reduced-motion: reduce) {
        ::view-transition-old(root),
        ::view-transition-new(root) {
            animation: none;
        }
    }
}
