/**
 * BanG Dream! Event Calculator - Custom Styles
 * Extends Tailwind CSS with custom animations and component styles
 */

/* ===================================
   ANIMATIONS
   =================================== */

/**
 * Fade in animation with slight upward movement
 * Used for revealing content smoothly
 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/**
 * Slide down animation for expanding panels
 */
@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 500px;
    }
}

/**
 * Shimmer animation for loading states
 * Gentle pulsing effect
 */
@keyframes shimmer {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

/* Animation utility classes */
.animate-fade-in {
    animation: fadeIn 0.4s ease-out;
}

.animate-slide-down {
    animation: slideDown 0.3s ease-out;
}

.loading {
    animation: shimmer 1.5s ease-in-out infinite;
}

/* ===================================
   COMPONENT STYLES
   =================================== */

/**
 * Mode selection cards (Max Points / Target Goal)
 */
.mode-card {
    @apply bg-white dark:bg-slate-800;
    @apply border-2 border-slate-200 dark:border-slate-700;
    @apply rounded-xl p-4;
    @apply transition-all duration-200;
    @apply hover:border-primary-300 dark:hover:border-primary-600;
    @apply hover:shadow-md;
    @apply cursor-pointer;
}

.mode-card.active {
    @apply border-primary-500 dark:border-primary-600;
    @apply bg-primary-50 dark:bg-primary-900/20;
    @apply shadow-md;
    @apply ring-2 ring-primary-100 dark:ring-primary-900/30;
}

/**
 * Character badge styling
 */
.character-badge {
    @apply inline-flex items-center gap-1.5;
    @apply bg-white/20 rounded-lg;
    @apply px-3 py-1.5;
    @apply text-sm font-medium text-white;
}

/**
 * Generic card container
 */
.card-container {
    @apply bg-slate-200/80 dark:bg-slate-700/50;
    @apply rounded-lg p-2;
    @apply hover:bg-slate-300 dark:hover:bg-slate-600/50;
    @apply transition-colors;
    @apply cursor-pointer;
}

/**
 * Primary gradient background
 */
.gradient-primary {
    @apply bg-gradient-to-r;
    @apply from-primary-500 to-primary-600;
    @apply dark:from-primary-600 dark:to-primary-700;
}

/**
 * Results display panel
 */
.results-panel {
    @apply bg-gradient-to-br;
    @apply from-primary-500 to-primary-600;
    @apply dark:from-primary-600 dark:to-primary-700;
    @apply rounded-2xl shadow-lg;
    @apply border border-primary-600 dark:border-primary-700;
}

/**
 * Statistics card
 */
.stat-card {
    @apply bg-white dark:bg-slate-800;
    @apply rounded-xl shadow-sm;
    @apply border border-slate-200 dark:border-slate-700;
    @apply p-5;
}

/**
 * Event banner styling
 */
.event-banner {
    @apply bg-gradient-to-r;
    @apply from-primary-500 to-primary-600;
    @apply dark:from-primary-600 dark:to-primary-700;
    @apply rounded-2xl shadow-sm;
    @apply border border-primary-600 dark:border-primary-700;
}

/**
 * Skeleton loading state
 */
.skeleton {
    @apply animate-pulse;
    @apply bg-slate-200 dark:bg-slate-700;
    @apply rounded;
}

/**
 * Message styles
 */
.error-message {
    @apply bg-red-100 dark:bg-red-500/20;
    @apply border border-red-300 dark:border-red-400/30;
    @apply rounded-lg p-3;
    @apply text-sm font-medium;
    @apply text-red-800 dark:text-red-100;
}

.success-message {
    @apply bg-green-100 dark:bg-green-500/20;
    @apply border border-green-300 dark:border-green-400/30;
    @apply rounded-lg p-3;
    @apply text-sm font-medium;
    @apply text-green-800 dark:text-green-100;
}

/* ===================================
   INTERACTIVE ELEMENTS
   =================================== */

/**
 * Input focus effect - subtle lift
 */
input:focus {
    transform: translateY(-1px);
}

/**
 * Global transition for interactive elements
 */
button,
input,
.mode-card {
    @apply transition-all duration-200;
}

/* ===================================
   SETTINGS PANEL
   =================================== */

/**
 * Settings panel with smooth expand/collapse
 */
#settingsPanel {
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

#settingsPanel.hidden {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

#settingsPanel:not(.hidden) {
    max-height: 1000px;
    opacity: 1;
}

/**
 * Settings icon rotation animation
 */
#settingsIcon {
    transition: transform 0.2s ease-out;
}

#settingsIcon.rotate-180 {
    transform: rotate(180deg);
}

/* ===================================
   SCROLLBAR CUSTOMIZATION
   =================================== */

/**
 * Webkit scrollbar styling - light theme
 */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: rgb(226 232 240); /* slate-200 */
}

::-webkit-scrollbar-thumb {
    background: rgb(148 163 184); /* slate-400 */
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(100 116 139); /* slate-500 */
}

/**
 * Webkit scrollbar styling - dark theme
 * Uses prefers-color-scheme for automatic detection
 */
@media (prefers-color-scheme: dark) {
    ::-webkit-scrollbar-track {
        background: rgb(30 41 59); /* slate-800 */
    }

    ::-webkit-scrollbar-thumb {
        background: rgb(71 85 105); /* slate-600 */
    }

    ::-webkit-scrollbar-thumb:hover {
        background: rgb(100 116 139); /* slate-500 */
    }
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

/**
 * Mobile adjustments (< 640px)
 */
@media (max-width: 640px) {
    .event-banner {
        @apply p-4;
    }

    .mode-card {
        @apply w-full;
    }
}