@import 'tailwindcss';

@import 'tw-animate-css';

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

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

@theme inline {
    --font-sans:
        'Plus Jakarta Sans', 'Outfit', ui-sans-serif, system-ui, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
        'Noto Color Emoji';

    --radius-lg: var(--radius);
    --radius-md: calc(var(--radius) - 2px);
    --radius-sm: calc(var(--radius) - 4px);

    --color-background: var(--background);
    --color-foreground: var(--foreground);

    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);

    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);

    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);

    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);

    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);

    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);

    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);

    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);

    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);

    --color-sidebar: var(--sidebar-background);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);
    --color-sidebar-ring: var(--sidebar-ring);

    /* Dashboard UI Custom Colors */
    --color-brand-green: hsl(var(--brand-green));
    --color-brand-green-foreground: hsl(var(--brand-green-foreground));
    --color-card-pink-bg: hsl(var(--card-pink-bg));
    --color-card-pink-fg: hsl(var(--card-pink-fg));
    --color-card-mint-bg: hsl(var(--card-mint-bg));
    --color-card-mint-fg: hsl(var(--card-mint-fg));
    --color-card-peach-bg: hsl(var(--card-peach-bg));
    --color-card-peach-fg: hsl(var(--card-peach-fg));
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {

    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }
}

@layer utilities {

    body,
    html {
        --font-sans:
            'Plus Jakarta Sans', 'Outfit', ui-sans-serif, system-ui, sans-serif,
            'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
            'Noto Color Emoji';
    }
}

:root {
    --background: hsl(0 0% 100%);
    --foreground: hsl(0 0% 3.9%);
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(0 0% 3.9%);
    --popover: hsl(0 0% 100%);
    --popover-foreground: hsl(0 0% 3.9%);
    --primary: hsl(0 0% 9%);
    --primary-foreground: hsl(0 0% 98%);
    --secondary: hsl(0 0% 92.1%);
    --secondary-foreground: hsl(0 0% 9%);
    --muted: hsl(0 0% 96.1%);
    --muted-foreground: hsl(0 0% 45.1%);
    --accent: hsl(0 0% 96.1%);
    --accent-foreground: hsl(0 0% 9%);
    --destructive: hsl(0 84.2% 60.2%);
    --destructive-foreground: hsl(0 0% 98%);
    --border: hsl(0 0% 92.8%);
    --input: hsl(0 0% 89.8%);
    --ring: hsl(0 0% 3.9%);
    --chart-1: hsl(12 76% 61%);
    --chart-2: hsl(173 58% 39%);
    --chart-3: hsl(197 37% 24%);
    --chart-4: hsl(43 74% 66%);
    --chart-5: hsl(27 87% 67%);
    --radius: 0.5rem;
    --sidebar-background: transparent;
    --sidebar-foreground: hsl(240 5.3% 26.1%);
    --sidebar-primary: hsl(0 0% 10%);
    --sidebar-primary-foreground: hsl(0 0% 98%);
    --sidebar-accent: hsl(0 0% 94%);
    --sidebar-accent-foreground: hsl(0 0% 30%);
    --sidebar-border: hsl(0 0% 91%);
    --sidebar-ring: hsl(217.2 91.2% 59.8%);
    --sidebar: transparent;

    /* Light Mode Custom Colors */
    --brand-green: 155 100% 39%;
    --brand-green-foreground: 0 0% 100%;
    --card-pink-bg: 351 100% 96%;
    --card-pink-fg: 350 85% 65%;
    --card-mint-bg: 156 68% 92%;
    --card-mint-fg: 159 72% 42%;
    --card-peach-bg: 33 100% 94%;
    --card-peach-fg: 32 92% 56%;
}

.dark {
    --background: hsl(222, 47%, 4%);
    --foreground: hsl(0 0% 98%);
    --card: hsl(222, 47%, 5%);
    --card-foreground: hsl(0 0% 98%);
    --popover: hsl(222, 47%, 4%);
    --popover-foreground: hsl(0 0% 98%);
    --primary: hsl(0 0% 98%);
    --primary-foreground: hsl(0 0% 9%);
    --secondary: hsl(222, 30%, 12%);
    --secondary-foreground: hsl(0 0% 98%);
    --muted: hsl(222, 30%, 10%);
    --muted-foreground: hsl(215 20.2% 65.1%);
    --accent: hsl(222, 30%, 12%);
    --accent-foreground: hsl(0 0% 98%);
    --destructive: hsl(0 84% 60%);
    --destructive-foreground: hsl(0 0% 98%);
    --border: hsl(222, 30%, 13%);
    --input: hsl(222, 30%, 13%);
    --ring: hsl(224, 76.3% 48%);
    --chart-1: hsl(220 70% 50%);
    --chart-2: hsl(160 60% 45%);
    --chart-3: hsl(30 80% 55%);
    --chart-4: hsl(280 65% 60%);
    --chart-5: hsl(340 75% 55%);
    --sidebar-background: transparent;
    --sidebar-foreground: hsl(210 40% 98%);
    --sidebar-primary: hsl(224, 76.3% 48%);
    --sidebar-primary-foreground: hsl(0 0% 100%);
    --sidebar-accent: hsl(222, 30%, 15%, 0.5);
    --sidebar-accent-foreground: hsl(210 40% 98%);
    --sidebar-border: hsl(222, 30%, 15%, 0.4);
    --sidebar-ring: hsl(224, 76.3% 48%);
    --sidebar: transparent;

    /* Dark Mode Custom Colors */
    --brand-green: 155 100% 39%;
    --brand-green-foreground: 0 0% 100%;
    --card-pink-bg: 351 40% 16%;
    --card-pink-fg: 350 85% 75%;
    --card-mint-bg: 156 40% 14%;
    --card-mint-fg: 159 72% 52%;
    --card-peach-bg: 33 40% 18%;
    --card-peach-fg: 32 92% 66%;
}

@layer base {
    * {
        @apply border-border outline-ring/50;
    }

    body {
        @apply bg-background text-foreground;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }

    /* Premium Headings Typography Setup */
    h1, h2, h3, h4, h5, h6 {
        font-family: 'Outfit', sans-serif;
        letter-spacing: -0.02em;
    }
    
    h1 {
        @apply font-black tracking-tight text-slate-800 dark:text-slate-100;
    }
    
    h2 {
        @apply font-extrabold tracking-tight text-slate-900 dark:text-slate-200;
    }
    
    h3 {
        @apply font-bold tracking-tight text-slate-800 dark:text-slate-200;
    }
    
    /* Custom Ultra-Slim World-Class Scrollbars */
    ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }
    ::-webkit-scrollbar-track {
        background: transparent;
    }
    ::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.18); /* Light mode translucent slate */
        border-radius: 99px;
        border: 1px solid transparent;
        background-clip: padding-box;
        transition: background 0.3s ease;
    }
    .dark ::-webkit-scrollbar-thumb {
        background: rgba(30, 41, 59, 0.28); /* Dark mode transparent slate */
    }
    ::-webkit-scrollbar-thumb:hover {
        background: rgba(99, 102, 241, 0.45); /* Soft indigo glow on hover */
        border: 1px solid transparent;
        background-clip: padding-box;
    }
}

/* ==========================================================================
   FUTURISTIC HOLOGRAM GLASS POD SYSTEM (REUSABLE COMPONENT DESIGN SYSTEM)
   ========================================================================== */

.hologram-card {
    position: relative;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transform-style: preserve-3d;
    perspective: 1000px;
}

.hologram-card:hover {
    transform: scale(1.02);
}

.hologram-card-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 26px;
    opacity: 0;
    filter: blur(20px);
    transition: all 0.5s ease;
    z-index: -10;
}

.hologram-card:hover .hologram-card-glow {
    opacity: 0.3;
    transform: scale(1.01);
}

.hologram-card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.5s ease;
}

/* Apple Reflective Glass Light Sweep Effect */
.glass-light-sweep {
    position: absolute;
    inset: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2) 50%, transparent);
    transform: skewX(-12deg) translateX(-100%);
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 15;
}

.hologram-card:hover .glass-light-sweep {
    transform: skewX(-12deg) translateX(100%);
}

/* Glass Details Plate */
.glass-details-plate {
    backdrop-filter: blur(24px);
    border-radius: 18px;
    padding: 1.125rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateZ(0);
}

.hologram-card:hover .glass-details-plate {
    transform: translateY(-4px);
}

/* ==========================================================================
   WORLD'S BEST GRADIENT NEON GLASSMORPHIC BUTTON SYSTEM (CYBER GLOW SERIES)
   ========================================================================== */

.glass-btn {
    height: 2.25rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid transparent;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.glass-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5) 50%, transparent);
    transform: skewX(-20deg) translateX(-110%);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 2;
}

.glass-btn:hover::after {
    transform: skewX(-20deg) translateX(110%);
}

.glass-btn:active {
    transform: scale(0.94) translateY(0) !important;
}

/* Green Edit Button - Glass Gradient Border Masterpiece */
.glass-btn-green {
    background: linear-gradient(#070c15, #070c15) padding-box,
                linear-gradient(135deg, #00c774, #6366f1) border-box;
    box-shadow: 0 4px 12px rgba(0, 199, 116, 0.15);
}

.glass-btn-green:hover {
    background: linear-gradient(135deg, #00c774, #6366f1) border-box,
                linear-gradient(135deg, #00c774, #6366f1) padding-box;
    box-shadow: 0 0 25px rgba(0, 199, 116, 0.8), 0 0 12px rgba(99, 102, 241, 0.4);
    transform: translateY(-2px);
}

/* Rose Delete Button - Glass Gradient Border Masterpiece */
.glass-btn-rose {
    background: linear-gradient(#070c15, #070c15) padding-box,
                linear-gradient(135deg, #ef4444, #ec4899) border-box;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

.glass-btn-rose:hover {
    background: linear-gradient(135deg, #ef4444, #ec4899) border-box,
                linear-gradient(135deg, #ef4444, #ec4899) padding-box;
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.8), 0 0 12px rgba(236, 72, 153, 0.4);
    transform: translateY(-2px);
}

/* Premium Cosmic Create Button - Animated Shifting Gradient Masterpiece */
.neon-create-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    height: 2.5rem;
    padding: 0 1.625rem;
    border-radius: 12px;
    font-size: 0.825rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    /* Stunning Animated Liquid Mesh Gradient */
    background: linear-gradient(135deg, #00c774, #00a8ff, #6366f1, #d946ef);
    background-size: 300% 300%;
    animation: neon-gradient-shift 8s ease infinite;
    
    /* 3D Glass Depth Shadows */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 
                0 6px 20px rgba(0, 199, 116, 0.3);
}

@keyframes neon-gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.neon-create-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5) 50%, transparent);
    transform: skewX(-20deg) translateX(-110%);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 2;
}

.neon-create-btn:hover::after {
    transform: skewX(-20deg) translateX(110%);
}

.neon-create-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 
                0 10px 28px rgba(0, 199, 116, 0.55), 
                0 4px 15px rgba(99, 102, 241, 0.35);
}

.neon-create-btn:active {
    transform: scale(0.95) translateY(0) !important;
}

/* ==========================================================================
   GLASS PILLED ACTION BUTTON SYSTEM (SLEEK, CENTERED, VISIBLE)
   ========================================================================== */

.glass-action-btn {
    height: 2.125rem; /* ~34px, perfectly compact */
    width: 100%;
    border-radius: 8px;
    font-size: 0.725rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid transparent;
    backdrop-filter: blur(12px);
}

.glass-action-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3) 50%, transparent);
    transform: skewX(-20deg) translateX(-110%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 2;
}

.glass-action-btn:hover::after {
    transform: skewX(-20deg) translateX(110%);
}

.glass-action-btn:active {
    transform: scale(0.96) !important;
}

/* Green Edit Action Pill */
.glass-action-green {
    color: #00c774;
    background: rgba(0, 199, 116, 0.06);
    border-color: rgba(0, 199, 116, 0.2);
}

.glass-action-green:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #00c774, #059669);
    border-color: #00c774;
    box-shadow: 0 0 15px rgba(0, 199, 116, 0.45);
}

/* Rose Delete Action Pill */
.glass-action-rose {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.2);
}

.glass-action-rose:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #ef4444, #be123c);
    border-color: #ef4444;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.45);
}


/* ==========================================================================
   GLOBAL PREMIUM SYSTEM-WIDE BUTTON UPGRADES (STRIPE & VERCEL STYLE)
   ========================================================================== */

/* Global Transition & Scale rules for all buttons in the software */
button, 
.btn,
[role="button"] {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
}

button:active, 
.btn:active,
[role="button"]:active {
    transform: scale(0.97) !important;
}

/* Upgrade Primary buttons to glassmorphic-border dark/neon style */
.bg-primary {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    border: 1px solid rgba(99, 102, 241, 0.3) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.bg-primary:hover {
    background: linear-gradient(135deg, #4f46e5, #4338ca) !important;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.45) !important;
    transform: translateY(-1px);
}

/* Upgrade Outline buttons to refined translucent glass */
.border-input {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    backdrop-filter: blur(8px) !important;
}

.border-input:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    color: #ffffff !important;
}

/* Upgrade Destructive buttons to glowing rose/ruby gradient */
.bg-destructive {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.bg-destructive:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.45) !important;
    transform: translateY(-1px);
}

/* Upgrade Secondary buttons to soft frosted glass */
.bg-secondary {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    backdrop-filter: blur(8px) !important;
}

.bg-secondary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Glass Badge */
.glass-status-badge {
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    height: 1.5rem;
    padding: 0 0.625rem;
    border-radius: 9999px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Hologram Glass Monogram Pod */
.glass-monogram-pod {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
}

.glass-monogram-tile {
    position: relative;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.hologram-card:hover .glass-monogram-tile {
    transform: scale(1.1) rotate(6deg);
}

.dark .glass-monogram-tile {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}