@import 'tailwindcss';

@plugin 'tailwindcss-animate';
@plugin "@tailwindcss/typography";

/* 
 * Critical Fonts - Hanya font kecil yang dimasukkan dalam bundle utama
 * Font besar di-load secara lazy via /css/fonts.css
 */

@font-face {
    font-family: 'The Golden Blade';
    src:
        url('../fonts/The Golden Blade.woff2') format('woff2'),
        url('../fonts/The Golden Blade.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BelongFaith';
    src:
        url('../fonts/BelongFaith-Regular.woff2') format('woff2'),
        url('../fonts/BelongFaith-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Circus Age';
    src:
        url('../fonts/Circus Age.woff2') format('woff2'),
        url('../fonts/Circus Age.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Immortal Light';
    src:
        url('../fonts/IMMRTLT_.woff2') format('woff2'),
        url('../fonts/IMMRTLT_.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'RiverHack';
    src:
        url('../fonts/riverhack-syr.woff2') format('woff2'),
        url('../fonts/riverhack-syr.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Small font utility classes */
.font-golden-blade {
    font-family: 'The Golden Blade', sans-serif;
}

.font-belong-faith {
    font-family: 'BelongFaith', sans-serif;
}

.font-circus-age {
    font-family: 'Circus Age', sans-serif;
}

.font-immortal-light {
    font-family: 'Immortal Light', sans-serif;
}

.font-riverhack {
    font-family: 'RiverHack', sans-serif;
}

/* 
 * Large fonts - Di-load secara lazy
 * Gunakan hook useLazyFont() untuk me-load font ini
 */
.font-drunk-millionaire,
.font-storm-gust,
.font-immortal,
.font-shadow-whisper,
.font-grandeven {
    /* Fallback font sampai font besar di-load */
    font-family: 'The Golden Blade', sans-serif;
}

/* Custom animations for performance */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Float animation for event box icons */
@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* Arrow bounce animations */
@keyframes arrowBounceLeft {
    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-4px);
    }
}

@keyframes arrowBounceRight {
    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(4px);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 0.3s ease-out forwards;
}

/* Viewport-triggered animations (use with Intersection Observer) */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    will-change: opacity, transform;
    transition:
        opacity 0.5s ease-out,
        transform 0.5s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.animate-on-scroll-scale {
    opacity: 0;
    transform: scale(0.95);
    will-change: opacity, transform;
    transition:
        opacity 0.5s ease-out,
        transform 0.5s ease-out;
}

.animate-on-scroll-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* Staggered animation delays */
.animate-delay-100 {
    transition-delay: 0.1s;
}

.animate-delay-200 {
    transition-delay: 0.2s;
}

.animate-delay-300 {
    transition-delay: 0.3s;
}

.animate-delay-400 {
    transition-delay: 0.4s;
}

/* Hover lift effect */
.hover-lift {
    transition:
        transform 0.3s ease-out,
        box-shadow 0.3s ease-out;
}

.hover-lift:hover {
    transform: translateY(-3px);
}

/* Smoke Animation */
.smoke {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 484px;
    width: 200%;
    background-image: image-set(url('/img/animations/smoke.webp') 1x, url('/img/animations/smoke.png') 1x);
    background-position: left bottom;
    background-repeat: repeat-x;
    animation: smoke 20s linear infinite;
    animation-fill-mode: forwards;
    pointer-events: none;
    z-index: 1;
    opacity: 1;
}

@keyframes smoke {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes smoke {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Shadow/Smoke Layer Animation */
.smoke-layer-1 {
    animation: shadowFloat 15s ease-in-out infinite;
    background-image: image-set(url('/img/animations/shadow.webp') 1x, url('/img/animations/shadow.png') 1x);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.smoke-layer-2 {
    animation: shadowFloat 20s ease-in-out infinite reverse;
    opacity: 0.7;
    background-image: image-set(url('/img/animations/shadow.webp') 1x, url('/img/animations/shadow.png') 1x);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@keyframes shadowFloat {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.3;
    }

    25% {
        transform: translateY(-20px) scale(1.05);
        opacity: 0.4;
    }

    50% {
        transform: translateY(-10px) scale(1.02);
        opacity: 0.5;
    }

    75% {
        transform: translateY(-30px) scale(1.08);
        opacity: 0.4;
    }

    100% {
        transform: translateY(0) scale(1);
        opacity: 0.3;
    }
}

/* Sparks Animation */
.sparks {
    position: absolute;
    width: 1200px;
    left: 50%;
    bottom: 0;
    z-index: 2;
    transform: translateX(-50%);
    pointer-events: none;
    height: 400px;
}

.sparks > div {
    position: absolute;
}

/* Sparks Animation - Right side (formerly ray position) */
.sparks-spark-1 {
    position: absolute;
    right: 117px;
    bottom: 0;
    width: 300px;
    height: 300px;
    background: url('/img/animations/spark_1.webp') no-repeat;
    background-size: contain;
    z-index: 3;
    pointer-events: none;
    animation: spark-right-1 3s linear infinite;
    animation-delay: 0s;
}

.sparks-spark-2 {
    position: absolute;
    right: 50px;
    bottom: 0;
    width: 200px;
    height: 200px;
    background: url('/img/animations/spark_3.webp') no-repeat;
    background-size: contain;
    z-index: 3;
    pointer-events: none;
    animation: spark-right-2 3.5s linear infinite;
    animation-delay: 1s;
}

.sparks-spark-3 {
    position: absolute;
    right: 180px;
    bottom: 0;
    width: 250px;
    height: 250px;
    background: url('/img/animations/spark_2.webp') no-repeat;
    background-size: contain;
    z-index: 3;
    pointer-events: none;
    animation: spark-right-3 4s linear infinite;
    animation-delay: 2s;
}

/* Additional sparks - Small particles */
.sparks-small {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    pointer-events: none;
}

.spark-small-1 {
    position: absolute;
    left: 10%;
    bottom: 0;
    width: 30px;
    height: 30px;
    background: url('/img/animations/spark_2.webp') no-repeat;
    background-size: contain;
    opacity: 0;
    animation: spark-small 2.5s ease-in infinite;
    animation-delay: 0s;
}

.spark-small-2 {
    position: absolute;
    left: 25%;
    bottom: 0;
    width: 40px;
    height: 40px;
    background: url('/img/animations/spark_1.webp') no-repeat;
    background-size: contain;
    opacity: 0;
    animation: spark-small 3s ease-in infinite;
    animation-delay: 0.5s;
}

.spark-small-3 {
    position: absolute;
    left: 40%;
    bottom: 0;
    width: 25px;
    height: 25px;
    background: url('/img/animations/spark_3.webp') no-repeat;
    background-size: contain;
    opacity: 0;
    animation: spark-small 2.8s ease-in infinite;
    animation-delay: 1s;
}

.spark-small-4 {
    position: absolute;
    left: 55%;
    bottom: 0;
    width: 35px;
    height: 35px;
    background: url('/img/animations/spark_2.webp') no-repeat;
    background-size: contain;
    opacity: 0;
    animation: spark-small 3.2s ease-in infinite;
    animation-delay: 1.5s;
}

.spark-small-5 {
    position: absolute;
    left: 70%;
    bottom: 0;
    width: 28px;
    height: 28px;
    background: url('/img/animations/spark_1.webp') no-repeat;
    background-size: contain;
    opacity: 0;
    animation: spark-small 2.6s ease-in infinite;
    animation-delay: 0.8s;
}

.spark-small-6 {
    position: absolute;
    left: 85%;
    bottom: 0;
    width: 32px;
    height: 32px;
    background: url('/img/animations/spark_3.webp') no-repeat;
    background-size: contain;
    opacity: 0;
    animation: spark-small 3.4s ease-in infinite;
    animation-delay: 2s;
}

.spark-small-7 {
    position: absolute;
    left: 95%;
    bottom: 0;
    width: 22px;
    height: 22px;
    background: url('/img/animations/spark_2.webp') no-repeat;
    background-size: contain;
    opacity: 0;
    animation: spark-small 2.4s ease-in infinite;
    animation-delay: 2.5s;
}

@keyframes spark-right-1 {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(0deg);
    }

    25% {
        opacity: 0.8;
        transform: scale(0.7) rotate(90deg);
    }

    50% {
        opacity: 1;
        transform: scale(0.9) rotate(180deg);
    }

    75% {
        opacity: 0.6;
        transform: scale(1) rotate(270deg);
    }

    100% {
        opacity: 0;
        transform: scale(1.2) rotate(360deg);
    }
}

@keyframes spark-right-2 {
    0% {
        opacity: 0;
        transform: scale(0.4) translateY(20px);
    }

    25% {
        opacity: 0.9;
        transform: scale(0.6) translateY(10px);
    }

    50% {
        opacity: 1;
        transform: scale(0.8) translateY(0px);
    }

    75% {
        opacity: 0.5;
        transform: scale(1) translateY(-10px);
    }

    100% {
        opacity: 0;
        transform: scale(1.1) translateY(-20px);
    }
}

@keyframes spark-right-3 {
    0% {
        opacity: 0;
        transform: scale(0.3) translateX(0);
    }

    25% {
        opacity: 0.8;
        transform: scale(0.5) translateX(-10px);
    }

    50% {
        opacity: 1;
        transform: scale(0.7) translateX(0);
    }

    75% {
        opacity: 0.6;
        transform: scale(0.9) translateX(10px);
    }

    100% {
        opacity: 0;
        transform: scale(1) translateX(0);
    }
}

.sparks .spark_1 {
    background: url('/img/animations/spark_1.webp') no-repeat;
    width: 764px;
    height: 313px;
    right: 0;
    bottom: 0;
    transform: scale(0.6);
    animation: spark-1 4s linear infinite;
    animation-delay: 1s;
}

.sparks .spark_2 {
    background: url('/img/animations/spark_2.webp') no-repeat;
    width: 179px;
    height: 335px;
    right: 230px;
    bottom: 0;
    transform: scale(0.6);
    animation: spark-1 4s linear infinite;
    animation-delay: 2s;
}

.sparks .spark_3 {
    background: url('/img/animations/spark_3.webp') no-repeat;
    width: 128px;
    height: 165px;
    right: 280px;
    bottom: 0;
    transform: scale(0.6);
    animation: spark-3 4s linear infinite;
    animation-delay: 2s;
}

.sparks .spark-big {
    background: image-set(url('/img/animations/spark_4.webp') 1x, url('/img/animations/spark_4.png') 1x) no-repeat;
    width: 794px;
    height: 176px;
    right: 0;
    bottom: 0;
    transform: scale(0.6);
    animation: spark-5 4s linear infinite;
}

.sparks .spark_4 {
    background: image-set(url('/img/animations/spark_4.webp') 1x, url('/img/animations/spark_4.png') 1x) no-repeat;
    width: 794px;
    height: 176px;
    right: 0;
    bottom: 0;
    transform: scale(0.6);
    animation: spark-5 4s linear infinite;
}

.sparks .spark_5 {
    background: image-set(url('/img/animations/spark_4.webp') 1x, url('/img/animations/spark_4.png') 1x) no-repeat;
    width: 794px;
    height: 176px;
    animation-delay: 2s;
    right: 40px;
    bottom: 0;
    animation: spark-5 4s linear infinite;
    transform: scale(0.6);
}

.sparks_2 .spark_1 {
    animation-delay: 2s;
}

.sparks_2 .spark_2 {
    animation-delay: 3s;
}

.sparks_2 .spark_3 {
    animation-delay: 3s;
}

.sparks_2 {
    margin-left: -500px;
}

/* Hero Effect Animations - Rocks and Sparkles */
.hero-effect {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.hero-effect > div {
    position: absolute;
    pointer-events: none !important;
}

/* Rocks - Levitate animation */
.hero-rocks {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: levitate 5s infinite linear;
    background-image: image-set(url('/img/animations/rocks.webp') 1x, url('/img/animations/rocks.png') 1x);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
}

/* Sparkles - Fly animation 1 */
.hero-sparkles-1 {
    animation: fly 20s infinite linear;
    transform: rotate(-20deg);
    background-image: image-set(url('/img/animations/sparkles.webp') 1x, url('/img/animations/sparkles.png') 1x);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    position: absolute;
}

/* Sparkles - Fly animation 2 (delayed) */
.hero-sparkles-2 {
    animation: fly 20s 10s infinite linear;
    transform: rotate(-20deg);
    opacity: 0;
    background-image: image-set(url('/img/animations/sparkles.webp') 1x, url('/img/animations/sparkles.png') 1x);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    position: absolute;
}

@keyframes levitate {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2vh);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes fly {
    0% {
        opacity: 0;
        left: -20%;
        top: 0%;
    }

    10% {
        opacity: 1;
    }

    90% {
        left: 0%;
        top: -90%;
    }

    100% {
        left: 0%;
        top: -100%;
        opacity: 0;
    }
}

@keyframes spark-1 {
    0% {
        transform: scale(0.6) translateY(0);
        opacity: 0;
    }

    25% {
        transform: scale(0.7) translateY(-50px);
        opacity: 1;
    }

    50% {
        transform: scale(0.8) translateY(-100px);
        opacity: 1;
    }

    75% {
        transform: scale(0.9) translateY(-150px);
        opacity: 0.5;
    }

    100% {
        transform: scale(1) translateY(-200px);
        opacity: 0;
    }
}

@keyframes spark-3 {
    0% {
        transform: scale(0.6) translateY(0);
        opacity: 0;
    }

    25% {
        transform: scale(0.7) translateY(-40px);
        opacity: 1;
    }

    50% {
        transform: scale(0.8) translateY(-80px);
        opacity: 1;
    }

    75% {
        transform: scale(0.9) translateY(-120px);
        opacity: 0.5;
    }

    100% {
        transform: scale(1) translateY(-160px);
        opacity: 0;
    }
}

@keyframes spark-5 {
    0% {
        transform: scale(0.6) translateY(0);
        opacity: 0;
    }

    25% {
        transform: scale(0.7) translateY(-40px);
        opacity: 1;
    }

    50% {
        transform: scale(0.8) translateY(-80px);
        opacity: 1;
    }

    75% {
        transform: scale(0.9) translateY(-120px);
        opacity: 0.5;
    }

    100% {
        transform: scale(1) translateY(-160px);
        opacity: 0;
    }
}

/* Optimize transitions */
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

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

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

@theme {
    --font-sans:
        'Instrument Sans', 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);
    --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);
}

/*
  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);
    }
}

:root {
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: oklch(0.205 0 0);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.97 0 0);
    --secondary-foreground: oklch(0.205 0 0);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --accent: oklch(0.97 0 0);
    --accent-foreground: oklch(0.205 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.577 0.245 27.325);
    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: oklch(0.87 0 0);
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --radius: 0.625rem;
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.145 0 0);
    --sidebar-primary: oklch(0.145 0 0);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.93 0 0);
    --sidebar-accent-foreground: oklch(0.145 0 0);
    --sidebar-border: oklch(0.9 0 0);
    --sidebar-ring: oklch(0.87 0 0);
}

.dark {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.145 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.145 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.985 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.396 0.141 25.723);
    --destructive-foreground: oklch(0.637 0.237 25.331);
    --border: oklch(0.269 0 0);
    --input: oklch(0.269 0 0);
    --ring: oklch(0.439 0 0);
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: oklch(0.205 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.985 0 0);
    --sidebar-primary-foreground: oklch(0.145 0 0);
    --sidebar-accent: oklch(0.3 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(0.3 0 0);
    --sidebar-ring: oklch(0.439 0 0);
}

@layer base {
    * {
        @apply border-border;
    }

    body {
        @apply bg-background text-foreground;
    }

    ::selection {
        @apply bg-primary/30 text-primary-foreground;
    }
}

/* ===========================
   Sidebar Theme Styles
   =========================== */

/* Dynamic sidebar theme support */
/* When custom theme is active via inline styles, use those values */
[data-sidebar='sidebar'] {
    background-color: var(--sidebar-background, var(--sidebar)) !important;
    color: var(--sidebar-foreground, var(--sidebar-foreground)) !important;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

/* Force custom theme colors when inline styles are set (overrides dark/light mode) */
:root[style*='--sidebar-background'] [data-sidebar='sidebar'] {
    background-color: var(--sidebar-background) !important;
    color: var(--sidebar-foreground) !important;
}

:root[style*='--sidebar-background'] [data-sidebar='header'] {
    border-color: var(--sidebar-border) !important;
}

:root[style*='--sidebar-background'] [data-sidebar='content'] {
    scrollbar-color: var(--sidebar-border) transparent;
}

:root[style*='--sidebar-background'] [data-sidebar='footer'] {
    border-color: var(--sidebar-border) !important;
}

/* Force custom theme for menu buttons */
:root[style*='--sidebar-background'] [data-sidebar='menu-button'] {
    color: var(--sidebar-foreground) !important;
}

:root[style*='--sidebar-background'] [data-sidebar='menu-button']:hover {
    background-color: var(--sidebar-accent) !important;
    color: var(--sidebar-accent-foreground) !important;
}

:root[style*='--sidebar-background'] [data-sidebar='menu-button'][data-active='true'] {
    background-color: var(--sidebar-primary) !important;
    color: var(--sidebar-primary-foreground) !important;
}

/* Force custom theme for sub items */
:root[style*='--sidebar-background'] [data-sidebar='menu-sub'] {
    border-color: var(--sidebar-border) !important;
}

:root[style*='--sidebar-background'] [data-sidebar='menu-sub-button'] {
    color: var(--sidebar-foreground) !important;
}

:root[style*='--sidebar-background'] [data-sidebar='menu-sub-button']:hover {
    background-color: var(--sidebar-accent) !important;
    color: var(--sidebar-accent-foreground) !important;
}

:root[style*='--sidebar-background'] [data-sidebar='menu-sub-button'][data-active='true'] {
    background-color: var(--sidebar-primary) !important;
    color: var(--sidebar-primary-foreground) !important;
}

/* Force custom theme for separators */
:root[style*='--sidebar-background'] [data-sidebar='separator'] {
    background-color: var(--sidebar-border) !important;
}

/* Force custom theme for group labels */
:root[style*='--sidebar-background'] [data-sidebar='group-label'] {
    color: var(--sidebar-foreground) !important;
    opacity: 0.7;
}

/* Force custom theme for badges */
:root[style*='--sidebar-background'] [data-sidebar='menu-badge'] {
    background-color: var(--sidebar-accent) !important;
    color: var(--sidebar-accent-foreground) !important;
}

[data-sidebar='sidebar'] [data-sidebar='header'] {
    border-color: var(--sidebar-border, var(--sidebar-border)) !important;
}

[data-sidebar='sidebar'] [data-sidebar='content'] {
    scrollbar-color: var(--sidebar-border, var(--sidebar-border)) transparent;
}

[data-sidebar='sidebar'] [data-sidebar='footer'] {
    border-color: var(--sidebar-border, var(--sidebar-border)) !important;
}

/* Sidebar menu items with dynamic theming */
[data-sidebar='menu-button'] {
    transition: all 0.2s ease;
    color: var(--sidebar-foreground, var(--sidebar-foreground)) !important;
}

[data-sidebar='menu-button']:hover {
    background-color: var(--sidebar-accent, var(--sidebar-accent)) !important;
    color: var(--sidebar-accent-foreground, var(--sidebar-accent-foreground)) !important;
    color: var(--sidebar-accent-foreground, var(--sidebar-accent-foreground)) !important;
}

[data-sidebar='menu-button'][data-active='true'] {
    background-color: var(--sidebar-primary, var(--sidebar-primary)) !important;
    color: var(--sidebar-primary-foreground, var(--sidebar-primary-foreground)) !important;
}

/* Sidebar sub items */
[data-sidebar='menu-sub'] {
    border-color: var(--sidebar-border, var(--sidebar-border)) !important;
}

[data-sidebar='menu-sub-button']:hover {
    background-color: var(--sidebar-accent, var(--sidebar-accent)) !important;
    color: var(--sidebar-accent-foreground, var(--sidebar-accent-foreground)) !important;
}

[data-sidebar='menu-sub-button'][data-active='true'] {
    background-color: var(--sidebar-primary, var(--sidebar-primary)) !important;
    color: var(--sidebar-primary-foreground, var(--sidebar-primary-foreground)) !important;
}

/* Sidebar separator */
[data-sidebar='separator'] {
    background-color: var(--sidebar-border, var(--sidebar-border)) !important;
}

/* Sidebar group label */
[data-sidebar='group-label'] {
    color: var(--sidebar-foreground, var(--sidebar-foreground)) !important;
    opacity: 0.7;
}

/* Sidebar menu badge */
[data-sidebar='menu-badge'] {
    background-color: var(--sidebar-accent, var(--sidebar-accent)) !important;
    color: var(--sidebar-accent-foreground, var(--sidebar-accent-foreground)) !important;
}

/* Sidebar rail */
[data-sidebar='rail'] {
    --sidebar-rail-color: var(--sidebar-border, var(--sidebar-border));
}

[data-sidebar='rail']:hover::after {
    background-color: var(--sidebar-primary, var(--sidebar-primary)) !important;
}

/* ===========================
   Game Button Styles
   =========================== */

/* Base game button style */
.btn-game {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    transition:
        filter 0.2s,
        transform 0.2s;
}

.btn-game:hover {
    filter: brightness(1.1);
    transform: scale(1.02);
}

.btn-game:active {
    filter: brightness(0.9);
    transform: scale(0.98);
}

/* Button sizes */
.btn-game-sm {
    height: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 0.875rem;
    min-width: 80px;
}

.btn-game-md {
    height: 2.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-size: 0.875rem;
    min-width: 100px;
}

.btn-game-lg {
    height: 3rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-size: 1rem;
    min-width: 120px;
}

.btn-game-xl {
    height: 6rem;
    padding-left: 5rem;
    padding-right: 5rem;
    font-size: 1.875rem;
    min-width: 280px;
}

/* Full width button for mobile */
.btn-game-full {
    width: 100%;
    height: 3rem;
}

/* Item Icon styling in prose content */
.prose img[item-icon] {
    width: 1.5rem !important;
    height: 1.5rem !important;
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
    /* Ensure tooltips work properly */
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10 !important;
    /* Remove any margins from prose */
    margin: 0 !important;
}

/* Ensure tooltips work on all item icons in prose content */
.prose img[src*='/img/Icons/'] {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10 !important;
    cursor: help;
    /* Ensure tooltip can show above any parent elements */
    transform: none !important;
    opacity: 1 !important;
    /* Remove any margins from prose */
    margin: 0 !important;
}

/* Ensure parent container doesn't block tooltips */
.prose {
    position: relative;
    z-index: 1;
}

/* Prevent any hover animations from interfering with tooltips */
.prose img[src*='/img/Icons/']:hover {
    transform: none !important;
    opacity: 1 !important;
}

/* ===========================
   Rich Text Editor Spacing Fix
   =========================== */

/* Fix spacing in prose editor to be more like Microsoft Word */
.prose-editor {
    /* Use normal line-height like Microsoft Word */
    line-height: 1.5 !important;
}

/* Remove excessive margins from paragraphs */
.prose-editor p {
    margin-top: 0 !important;
    margin-bottom: 0.5em !important;
    line-height: 1.5 !important;
}

/* Tighten spacing between inline elements */
.prose-editor span,
.prose-editor img,
.prose-editor a {
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix inline icon spacing */
.prose-editor .item-icon-tooltip {
    display: inline-flex;
    align-items: center;
    margin: 0 0.1rem !important;
    vertical-align: baseline !important;
}

/* Fix spacing for inline images (including item icons) */
.prose-editor img {
    display: inline-block;
    vertical-align: baseline !important;
    margin: 0 0.1rem !important;
}

/* Fix alignment for images within spans (like item icons) */
.prose-editor .item-icon-tooltip img {
    vertical-align: baseline !important;
    display: inline-block !important;
}

/* Remove excessive spacing around lists */
.prose-editor ul,
.prose-editor ol {
    margin-top: 0.5em !important;
    margin-bottom: 0.5em !important;
    padding-left: 1.5em !important;
}

.prose-editor li {
    margin-top: 0 !important;
    margin-bottom: 0.25em !important;
}

/* Fix heading spacing */
.prose-editor h1,
.prose-editor h2,
.prose-editor h3 {
    margin-top: 1em !important;
    margin-bottom: 0.5em !important;
    line-height: 1.3 !important;
    color: var(--color-foreground) !important;
}

/* Fix bold, italic, and other text formatting colors */
.prose-editor strong,
.prose-editor b {
    color: var(--color-foreground) !important;
}

.prose-editor em,
.prose-editor i {
    color: var(--color-foreground) !important;
}

.prose-editor code {
    color: var(--color-foreground) !important;
}

/* Fix list text color */
.prose-editor ul,
.prose-editor ol,
.prose-editor li {
    color: var(--color-foreground) !important;
}

/* Fix blockquote color */
.prose-editor blockquote {
    color: var(--color-foreground) !important;
}

/* Fix link color to maintain readability but use proper color */
.prose-editor a {
    color: var(--color-primary) !important;
}

.prose-editor a:hover {
    opacity: 0.8 !important;
}

/* Fix blockquote spacing */
.prose-editor blockquote {
    margin: 0.5em 0 !important;
    padding-left: 1em !important;
    border-left-width: 3px !important;
}

/* Fix spacing around horizontal rules */
.prose-editor hr {
    margin: 1em 0 !important;
}

/* Fix table spacing */
.prose-editor table {
    margin: 0.5em 0 !important;
}

.prose-editor td,
.prose-editor th {
    padding: 0.25em 0.5em !important;
}

/* Ensure no extra whitespace between inline elements */
.prose-editor > * + * {
    margin-top: 0.5em !important;
}

/* Fix spacing in paragraph with inline elements */
.prose-editor p span,
.prose-editor p img,
.prose-editor p a {
    vertical-align: baseline !important;
}

/* Scrollbar hide utility */
.scrollbar-hide {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}