/**
 * Custom Application Styles - Production Ready
 * 
 * Tailwind CSS classes are loaded from CDN.
 * This file contains only custom CSS variables, animations, and styles.
 */

/* === Custom CSS Variables (Brand Colors & Theme) === */
:root {
    /* Custom Font */
    --font-sans: 'Plus Jakarta Sans', Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

    /* Brand Color Palette */
    --color-brand-50: #faf5ff;
    --color-brand-100: #f3e8ff;
    --color-brand-500: #a855f7;
    --color-brand-600: #9333ea;
    --color-brand-700: #7e22ce;

    /* Primary Palette (mapped to brand colors) */
    --color-primary-50: var(--color-brand-50);
    --color-primary-100: var(--color-brand-100);
    --color-primary-500: var(--color-brand-500);
    --color-primary-600: var(--color-brand-600);
    --color-primary-700: var(--color-brand-700);
}

/* === Custom Animations === */
@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* === Custom Utility Classes === */
.animate-slide-in {
    animation: slide-in 0.3s ease-out;
}

.animate-fade-in {
    animation: fade-in 0.5s ease-out;
}

/* === Brand Color Classes (Custom) === */
.bg-brand-50 {
    background-color: var(--color-brand-50);
}

.bg-brand-100 {
    background-color: var(--color-brand-100);
}

.bg-brand-500 {
    background-color: var(--color-brand-500);
}

.bg-brand-600 {
    background-color: var(--color-brand-600);
}

.bg-brand-700 {
    background-color: var(--color-brand-700);
}

.text-brand-50 {
    color: var(--color-brand-50);
}

.text-brand-100 {
    color: var(--color-brand-100);
}

.text-brand-500 {
    color: var(--color-brand-500);
}

.text-brand-600 {
    color: var(--color-brand-600);
}

.text-brand-700 {
    color: var(--color-brand-700);
}

.border-brand-50 {
    border-color: var(--color-brand-50);
}

.border-brand-100 {
    border-color: var(--color-brand-100);
}

.border-brand-200 {
    border-color: #e9d5ff;
}

.border-brand-500 {
    border-color: var(--color-brand-500);
}

.border-brand-600 {
    border-color: var(--color-brand-600);
}

.border-brand-700 {
    border-color: var(--color-brand-700);
}

.hover\:bg-brand-50:hover {
    background-color: var(--color-brand-50);
}

.hover\:text-brand-700:hover {
    color: var(--color-brand-700);
}

.group-hover\/item\:bg-white:hover {
    background-color: #ffffff;
}

/* === Primary Color Classes (Custom) === */
.bg-primary-50 {
    background-color: var(--color-primary-50);
}

.bg-primary-100 {
    background-color: var(--color-primary-100);
}

.bg-primary-500 {
    background-color: var(--color-primary-500);
}

.bg-primary-600 {
    background-color: var(--color-primary-600);
}

.bg-primary-700 {
    background-color: var(--color-primary-700);
}

.text-primary-500 {
    color: var(--color-primary-500);
}

.text-primary-600 {
    color: var(--color-primary-600);
}

.text-primary-700 {
    color: var(--color-primary-700);
}

.border-primary-100 {
    border-color: var(--color-primary-100);
}

.border-primary-600 {
    border-color: var(--color-primary-600);
}

.hover\:bg-primary-700:hover {
    background-color: var(--color-primary-700);
}

.hover\:text-primary-500:hover {
    color: var(--color-primary-500);
}

.hover\:text-primary-600:hover {
    color: var(--color-primary-600);
}

.hover\:text-primary-700:hover {
    color: var(--color-primary-700);
}

.focus\:ring-primary-600:focus {
    --tw-ring-color: var(--color-primary-600);
}

.focus\:ring-primary-600\/20:focus {
    --tw-ring-color: rgba(147, 51, 234, 0.2);
}

.shadow-primary-600\/30 {
    --tw-shadow-color: rgba(147, 51, 234, 0.3);
}

.shadow-primary-600\/40 {
    --tw-shadow-color: rgba(147, 51, 234, 0.4);
}

.hover\:shadow-primary-600\/40:hover {
    --tw-shadow-color: rgba(147, 51, 234, 0.4);
}

/* === Alpine.js Cloak === */
[x-cloak] {
    display: none !important;
}

/* === Custom Component Styles === */
.group:hover .group-hover-visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* === Global Loading Spinner === */
.spinner {
    width: 56px;
    height: 56px;
    border: 4px solid #e2e8f0;
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* === Responsive Font Family === */
body {
    font-family: var(--font-sans);
}

/* === Responsive / No Horizontal Scroll (Global) === */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

@supports not (overflow: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

pre {
    max-width: 100%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

table {
    width: 100%;
    max-width: 100%;
    table-layout: auto;
}

th,
td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Keep compact columns compact on small laptops+, but allow wrapping on mobile. */
table .whitespace-nowrap {
    white-space: normal;
}

@media (min-width: 640px) {
    table .whitespace-nowrap {
        white-space: nowrap;
    }
}

/* Allow table text to wrap instead of forcing ellipsis/overflow on small screens. */
table .truncate {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

input,
select,
textarea,
button {
    max-width: 100%;
}