@import "tailwindcss" prefix(ld);

@source '../../views/**/*.blade.php';
@source '../js/**/*.js';

/*
 * Theme - define primary color for Tailwind compilation
 * This is needed for Tailwind to generate the utility classes
 */
@theme {
    --color-primary: #635bff;
}

/*
 * Safelist for dynamic Alpine.js classes that JIT can't detect
 */
@source inline("border-primary border-2 border-gray-200 border-gray-300 border-gray-400");
@source inline("bg-primary bg-primary/5 bg-primary/20 bg-white bg-gray-100 bg-gray-200 bg-gray-700 bg-gray-800");
@source inline("text-primary text-gray-400 text-gray-500 text-gray-600 text-gray-700 text-white");
@source inline("ring-2 ring-primary shadow-md");

/*
 * Runtime color inheritance from core
 * Override the generated --ld-color-primary to use core's --color-primary
 * This allows modules to automatically inherit whatever primary color is set in core/settings
 * Using @layer base to ensure proper cascade order
 */
@layer base {
    :root, :host {
        --ld-color-primary: var(--color-primary, #635bff);
    }
}

/*
 * Prose-like styles for rich text content (feedbacks, comments, etc.)
 * Since typography plugin isn't included with prefix, we add these manually
 */
@layer components {
    .ld\:prose ul,
    .ld\:prose ol {
        padding-left: 1.5em;
        margin: 0.5em 0;
    }

    .ld\:prose ul {
        list-style-type: disc;
    }

    .ld\:prose ol {
        list-style-type: decimal;
    }

    .ld\:prose li {
        margin: 0.25em 0;
    }

    .ld\:prose p {
        margin: 0.5em 0;
    }

    .ld\:prose blockquote {
        border-left: 4px solid #e5e7eb;
        padding-left: 1em;
        margin: 0.5em 0;
        font-style: italic;
        color: #6b7280;
    }

    .ld\:prose pre,
    .ld\:prose code {
        background-color: #f3f4f6;
        border-radius: 0.25rem;
        font-size: 0.875em;
    }

    .ld\:prose pre {
        padding: 0.75em 1em;
        overflow-x: auto;
    }

    .ld\:prose code {
        padding: 0.125em 0.25em;
    }

    .ld\:prose a {
        color: var(--ld-color-primary);
        text-decoration: underline;
    }

    .ld\:prose h1,
    .ld\:prose h2,
    .ld\:prose h3,
    .ld\:prose h4 {
        font-weight: 600;
        margin: 0.75em 0 0.5em;
    }
}
