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

@plugin '@tailwindcss/typography';

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

/*
 * Safelist for dynamic color classes used in partner.blade.php
 * These classes are constructed dynamically and need to be explicitly listed.
 *
 * Emerald (Hermes):
 * border-emerald-500/30 from-emerald-900/20 to-emerald-900/20
 * bg-emerald-500/20 text-emerald-400 text-emerald-200/80
 * from-emerald-400 via-emerald-300 to-emerald-400
 * hover:from-emerald-300 hover:via-emerald-200 hover:to-emerald-300
 * text-emerald-700 bg-emerald-500/10 border-emerald-500/20
 * text-emerald-200/90 text-emerald-400/50
 *
 * Amber (Ploutōn) - included for completeness:
 * border-amber-500/30 from-amber-900/20 to-amber-900/20
 * bg-amber-500/20 text-amber-400 text-amber-200/80
 * from-amber-400 via-amber-300 to-amber-400
 * hover:from-amber-300 hover:via-amber-200 hover:to-amber-300
 * text-amber-700 bg-amber-500/10 border-amber-500/20
 * text-amber-200/90 text-amber-400/50
 */

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

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

    /* Stellar Typography Scale */
    --text-xs: 0.75rem;
    --text-xs--line-height: 1.5;
    --text-sm: 0.875rem;
    --text-sm--line-height: 1.5715;
    --text-base: 1rem;
    --text-base--line-height: 1.5;
    --text-base--letter-spacing: -0.017em;
    --text-lg: 1.125rem;
    --text-lg--line-height: 1.5;
    --text-lg--letter-spacing: -0.017em;
    --text-xl: 1.25rem;
    --text-xl--line-height: 1.5;
    --text-xl--letter-spacing: -0.017em;
    --text-2xl: 1.5rem;
    --text-2xl--line-height: 1.415;
    --text-2xl--letter-spacing: -0.017em;
    --text-3xl: 1.875rem;
    --text-3xl--line-height: 1.333;
    --text-3xl--letter-spacing: -0.017em;
    --text-4xl: 2.25rem;
    --text-4xl--line-height: 1.277;
    --text-4xl--letter-spacing: -0.017em;
    --text-5xl: 2.75rem;
    --text-5xl--line-height: 1.1;
    --text-5xl--letter-spacing: -0.017em;
    --text-6xl: 3.5rem;
    --text-6xl--line-height: 1;
    --text-6xl--letter-spacing: -0.017em;

    /* Stellar Animations */
    --animate-endless: endless 20s linear infinite;
    --animate-shine: shine 5s linear 500ms infinite;
    --animate-shine-line: shineLine 5s ease-in-out 500ms infinite;
    --animate-float: float 2s ease-in-out infinite;
    --animate-pulse-slow: pulseLoop 12000ms linear infinite;
    --animate-gradient: gradientMove 6s linear infinite;

    @keyframes endless {
        0% { transform: translateY(0); }
        100% { transform: translateY(-245px); }
    }
    @keyframes shine {
        0% { top: 0; transform: translateY(-100%) scaleY(10); opacity: 0; }
        2% { opacity: 0.5; }
        40% { top: 100%; transform: translateY(0) scaleY(200); opacity: 0; }
        100% { top: 100%; transform: translateY(0) scaleY(1); opacity: 0; }
    }
    @keyframes shineLine {
        0% { top: 0; transform: scaleY(5); opacity: 0; }
        10% { opacity: 0.8; }
        20% { top: 100%; transform: scaleY(10); opacity: 0; }
        100% { top: 100%; transform: scaleY(1); opacity: 0; }
    }
    @keyframes float {
        0% { transform: translateY(3%); }
        50% { transform: translateY(-3%); }
        100% { transform: translateY(3%); }
    }
    @keyframes pulseLoop {
        0% { opacity: 0; transform: scale(.25) translateZ(0); }
        30% { opacity: .4; }
        70% { opacity: 0; }
        80% { transform: scale(1) translateZ(0); }
    }
    @keyframes gradientMove {
        to { background-position: 200% center; }
    }
}

/* Stellar Typography Classes */
.h1 {
    @apply text-5xl font-extrabold;
}
.h2 {
    @apply text-4xl font-extrabold;
}
.h3 {
    @apply text-3xl font-extrabold;
}
.h4 {
    @apply text-2xl font-extrabold;
}

@media (width >= 768px) {
    .h1 { @apply text-6xl; }
    .h2 { @apply text-5xl; }
    .h3 { @apply text-4xl; }
}

/* Stellar Button Styles */
.btn,
.btn-sm {
    @apply text-sm font-medium inline-flex items-center justify-center border border-transparent rounded-full whitespace-nowrap transition duration-150 ease-in-out;
}
.btn {
    @apply px-4 py-1.5;
}
.btn-sm {
    @apply px-3 py-1;
}

/* Button Focus Styles (Accessibility) */
.btn:focus-visible,
.btn-sm:focus-visible {
    @apply outline-none ring-2 ring-offset-2 ring-offset-slate-900 ring-cyan-400;
}

/* Stellar Form Styles */
.form-input,
.form-textarea,
.form-multiselect,
.form-select,
.form-checkbox,
.form-radio {
    @apply border border-transparent rounded-sm focus:ring-0 focus:ring-offset-0;
}
.form-input,
.form-textarea,
.form-multiselect,
.form-select {
    @apply bg-slate-800 text-slate-200 text-sm px-3 py-1.5 focus:border-purple-500;
}
.form-input,
.form-textarea {
    @apply placeholder-slate-500;
}
.form-checkbox,
.form-radio {
    @apply bg-slate-800 checked:bg-purple-500 checked:border-transparent text-purple-600;
}

/* Stellar Gradient Text */
.gradient-text {
    @apply bg-clip-text text-transparent bg-linear-to-r from-slate-200/60 via-slate-200 to-slate-200/60;
}

/* Stellar Card with Gradient Border */
.stellar-card {
    @apply relative border border-transparent rounded-2xl;
    background: linear-gradient(var(--color-slate-900), var(--color-slate-900)) padding-box,
                conic-gradient(var(--color-slate-400), var(--color-slate-700) 25%, var(--color-slate-700) 75%, var(--color-slate-400) 100%) border-box;
}
.stellar-card::before {
    @apply absolute inset-0 bg-slate-800/30 rounded-2xl pointer-events-none;
    content: '';
}

/* Stellar Card Focus Styles (for clickable cards) */
a.stellar-card:focus-visible {
    @apply outline-none ring-2 ring-offset-2 ring-offset-slate-950 ring-cyan-400;
}

/* Stellar Pulsing Animation */
.pulse {
    opacity: 0;
    transform-origin: center;
    animation: pulseLoop 12000ms linear infinite;
}
.pulse-1 { animation-delay: -4000ms; }
.pulse-2 { animation-delay: -8000ms; }

/* Animated Gradient Text (Open Pro style) */
.gradient-text-animated {
    @apply bg-clip-text text-transparent;
    background-image: linear-gradient(to right, var(--color-slate-200), var(--color-purple-200), var(--color-slate-50), var(--color-purple-300), var(--color-slate-200));
    background-size: 200% auto;
    animation: gradientMove 6s linear infinite;
}

/* Shine Line Animation (for timeline/vertical lines) */
.shine-line {
    @apply relative;
}
.shine-line::after {
    content: '';
    @apply absolute left-0 top-0 h-4 w-px origin-bottom -translate-y-full opacity-0;
    background: linear-gradient(180deg, transparent, rgb(168 85 247 / 0.5) 25%, rgb(168 85 247) 50%, rgb(168 85 247 / 0.5) 75%, transparent);
    animation: shineLine 5s ease-in-out 500ms infinite;
}

/* Workflow Card Glow Effect */
.glow-card {
    @apply relative overflow-hidden rounded-2xl bg-slate-800 p-px;
}
.glow-card::before,
.glow-card::after {
    content: '';
    @apply pointer-events-none absolute -left-40 -top-40 z-10 h-80 w-80 rounded-full opacity-0 blur-3xl transition-opacity duration-500;
    transform: translate(var(--mouse-x, 0), var(--mouse-y, 0));
}
.glow-card::before {
    @apply bg-purple-500/80;
}
.glow-card::after {
    @apply -left-48 -top-48 z-30 h-64 w-64 bg-purple-500;
}
.glow-card:hover::after {
    @apply opacity-20;
}
.group:hover .glow-card::before {
    @apply opacity-100;
}

/* Hide scrollbar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

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

/* ============================================
 * Navigation Styling (Flux UI)
 * ============================================
 */

/* Main navbar items - larger text, white colour */
[data-flux-navbar-items] {
    color: white !important;
}

[data-flux-navbar-items]:hover {
    color: white !important;
}

/* Override the text-sm on navbar item content */
[data-flux-navbar-items] [data-content] {
    font-size: 1rem !important; /* text-base */
}

/* ============================================
 * Navigation Dropdown Card Styling (Flux UI)
 * ============================================
 * Asymmetric gradient: solid accent left → slate right
 * Each dropdown identified by data-accent attribute
 */

/* Base navmenu styling - override Flux defaults for all nav dropdowns */
[data-flux-navmenu].nav-dropdown-menu,
.nav-dropdown [data-flux-navmenu],
[data-accent] [data-flux-navmenu] {
    border: 1px solid rgb(51 65 85 / 0.5) !important;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5) !important;
    backdrop-filter: blur(12px) !important;
    border-radius: 0.75rem !important;
    background-image: none !important; /* Hide any grid/pattern backgrounds */
}

/* All accented dropdowns - force transparent bg so gradient shows */
[data-accent] [data-flux-navmenu] {
    background-color: transparent !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Grid pattern overlay on dropdown menus */
[data-accent] [data-flux-navmenu]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/vendor/stellar/images/grid.svg');
    background-size: auto;
    background-repeat: repeat;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
    mask-image: linear-gradient(to right, black 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);
}

/* Ensure menu content is above grid */
[data-accent] [data-flux-navmenu] > * {
    position: relative;
    z-index: 1;
}

/* Purple accent (Services) */
[data-accent="purple"] [data-flux-navmenu] {
    background-image: linear-gradient(to right, rgb(88 28 135 / 0.6), rgb(15 23 42 / 0.98) 50%) !important;
    border-left: 3px solid rgb(168 85 247 / 0.6) !important;
}

/* Orange accent (For) */
[data-accent="orange"] [data-flux-navmenu] {
    background-image: linear-gradient(to right, rgb(124 45 18 / 0.6), rgb(15 23 42 / 0.98) 50%) !important;
    border-left: 3px solid rgb(251 146 60 / 0.6) !important;
}

/* Indigo accent (AI) */
[data-accent="indigo"] [data-flux-navmenu] {
    background-image: linear-gradient(to right, rgb(49 46 129 / 0.6), rgb(15 23 42 / 0.98) 50%) !important;
    border-left: 3px solid rgb(129 140 248 / 0.6) !important;
}

/* Cyan accent (Tools) */
[data-accent="cyan"] [data-flux-navmenu] {
    background-image: linear-gradient(to right, rgb(21 94 117 / 0.6), rgb(15 23 42 / 0.98) 50%) !important;
    border-left: 3px solid rgb(34 211 238 / 0.6) !important;
}

/* Slate accent (OSS) */
[data-accent="slate"] [data-flux-navmenu] {
    background-image: linear-gradient(to right, rgb(51 65 85 / 0.7), rgb(15 23 42 / 0.98) 50%) !important;
    border-left: 3px solid rgb(148 163 184 / 0.5) !important;
}

/* Amber accent (About) */
[data-accent="amber"] [data-flux-navmenu] {
    background-image: linear-gradient(to right, rgb(120 53 15 / 0.6), rgb(15 23 42 / 0.98) 50%) !important;
    border-left: 3px solid rgb(251 191 36 / 0.6) !important;
}

/* Emerald accent (AI) */
[data-accent="emerald"] [data-flux-navmenu] {
    background-image: linear-gradient(to right, rgb(6 78 59 / 0.6), rgb(15 23 42 / 0.98) 50%) !important;
    border-left: 3px solid rgb(52 211 153 / 0.6) !important;
}

/* Sky accent (Apps) */
[data-accent="sky"] [data-flux-navmenu] {
    background-image: linear-gradient(to right, rgb(12 74 110 / 0.6), rgb(15 23 42 / 0.98) 50%) !important;
    border-left: 3px solid rgb(56 189 248 / 0.6) !important;
}

/* Violet accent (Dashboard) */
[data-accent="violet"] [data-flux-navmenu] {
    background-image: linear-gradient(to right, rgb(76 29 149 / 0.6), rgb(15 23 42 / 0.98) 50%) !important;
    border-left: 3px solid rgb(139 92 246 / 0.6) !important;
}

/* Menu item text and hover - override Flux defaults */
[data-accent] [data-flux-navmenu-item] {
    color: rgb(226 232 240) !important;
}

[data-accent] [data-flux-navmenu-item]:hover {
    background: linear-gradient(90deg, rgb(255 255 255 / 0.08), transparent 80%) !important;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1) !important;
    color: white !important;
}

/* Menu item icons */
[data-accent] [data-flux-navmenu-item] [data-flux-icon] {
    color: rgb(148 163 184) !important;
}

/* Separator styling */
[data-accent] [data-flux-separator] {
    opacity: 0.3 !important;
    border-color: rgb(71 85 105) !important;
}

/* Heading inside menus */
[data-accent] [data-flux-heading] {
    color: rgb(148 163 184) !important;
}