/**
 * ============================================================================
 * SNOOKER PRO THEME - Tailwind-like Utility Classes
 * ============================================================================
 * Custom utility classes that complement TailwindCSS CDN
 * These utilities follow Tailwind naming conventions but are theme-specific
 * 
 * @version 2.0.0
 * @author JKcuetips
 * ============================================================================
 */

/* ============================================================================
   SNOOKER COLOR UTILITIES
   ============================================================================ */

/* Background Colors */
.bg-snooker-table { background-color: var(--snooker-table) !important; }
.bg-snooker-table-light { background-color: var(--snooker-table-light) !important; }
.bg-snooker-table-dark { background-color: var(--snooker-table-dark) !important; }
.bg-snooker-felt { background-color: var(--snooker-felt) !important; }
.bg-snooker-rail { background-color: var(--snooker-rail) !important; }
.bg-snooker-cushion { background-color: var(--snooker-cushion) !important; }

.bg-gold { background-color: var(--gold-primary) !important; }
.bg-gold-light { background-color: var(--gold-light) !important; }
.bg-gold-dark { background-color: var(--gold-dark) !important; }

.bg-ball-red { background-color: var(--ball-red) !important; }
.bg-ball-yellow { background-color: var(--ball-yellow) !important; }
.bg-ball-green { background-color: var(--ball-green) !important; }
.bg-ball-brown { background-color: var(--ball-brown) !important; }
.bg-ball-blue { background-color: var(--ball-blue) !important; }
.bg-ball-pink { background-color: var(--ball-pink) !important; }
.bg-ball-black { background-color: var(--ball-black) !important; }
.bg-ball-white { background-color: var(--ball-white) !important; }

/* Text Colors */
.text-snooker-table { color: var(--snooker-table) !important; }
.text-snooker-table-light { color: var(--snooker-table-light) !important; }
.text-snooker-table-dark { color: var(--snooker-table-dark) !important; }

.text-gold { color: var(--gold-primary) !important; }
.text-gold-light { color: var(--gold-light) !important; }
.text-gold-dark { color: var(--gold-dark) !important; }

.text-ball-red { color: var(--ball-red) !important; }
.text-ball-yellow { color: var(--ball-yellow) !important; }
.text-ball-green { color: var(--ball-green) !important; }
.text-ball-brown { color: var(--ball-brown) !important; }
.text-ball-blue { color: var(--ball-blue) !important; }
.text-ball-pink { color: var(--ball-pink) !important; }

/* Border Colors */
.border-snooker-table { border-color: var(--snooker-table) !important; }
.border-snooker-table-light { border-color: var(--snooker-table-light) !important; }
.border-snooker-table-dark { border-color: var(--snooker-table-dark) !important; }
.border-gold { border-color: var(--gold-primary) !important; }
.border-gold-light { border-color: var(--gold-light) !important; }

/* ============================================================================
   GRADIENT UTILITIES
   ============================================================================ */

.bg-gradient-snooker {
    background: linear-gradient(135deg, var(--snooker-table-light), var(--snooker-table), var(--snooker-table-dark)) !important;
}

.bg-gradient-snooker-horizontal {
    background: linear-gradient(90deg, var(--snooker-table-dark), var(--snooker-table), var(--snooker-table-light)) !important;
}

.bg-gradient-gold {
    background: linear-gradient(135deg, var(--gold-light), var(--gold-primary), var(--gold-dark)) !important;
}

.bg-gradient-championship {
    background: linear-gradient(135deg, var(--snooker-table), var(--gold-primary)) !important;
}

.bg-gradient-dark {
    background: linear-gradient(145deg, var(--neutral-800), var(--neutral-900), var(--neutral-950)) !important;
}

.bg-gradient-glass {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)) !important;
}

/* ============================================================================
   GLASSMORPHISM UTILITIES
   ============================================================================ */

.glass {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-dark {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-snooker {
    background: rgba(10, 107, 58, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(10, 107, 58, 0.2);
}

.glass-gold {
    background: rgba(212, 175, 55, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.backdrop-blur { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.backdrop-blur-lg { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.backdrop-blur-xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }

/* ============================================================================
   SHADOW UTILITIES
   ============================================================================ */

.shadow-snooker { box-shadow: var(--shadow-snooker) !important; }
.shadow-snooker-lg { box-shadow: var(--shadow-snooker-lg) !important; }
.shadow-gold { box-shadow: var(--shadow-gold) !important; }
.shadow-gold-lg { box-shadow: var(--shadow-gold-lg) !important; }

.shadow-glow-green {
    box-shadow: 0 0 20px rgba(10, 107, 58, 0.4), 0 0 40px rgba(10, 107, 58, 0.2) !important;
}

.shadow-glow-gold {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4), 0 0 40px rgba(212, 175, 55, 0.2) !important;
}

/* ============================================================================
   BORDER UTILITIES
   ============================================================================ */

.border-glass { border: 1px solid rgba(255, 255, 255, 0.1) !important; }
.border-glass-strong { border: 1px solid rgba(255, 255, 255, 0.2) !important; }
.border-snooker-glow { border: 1px solid rgba(10, 107, 58, 0.5) !important; }
.border-gold-glow { border: 1px solid rgba(212, 175, 55, 0.5) !important; }

/* ============================================================================
   ANIMATION UTILITIES
   ============================================================================ */

/* Transitions */
.transition-fast { transition: all var(--transition-fast) var(--ease-out); }
.transition-normal { transition: all var(--transition-normal) var(--ease-out); }
.transition-slow { transition: all var(--transition-slow) var(--ease-out); }

/* Hover Transforms */
.hover-scale:hover { transform: scale(1.02); }
.hover-scale-lg:hover { transform: scale(1.05); }
.hover-lift:hover { transform: translateY(-4px); }
.hover-lift-sm:hover { transform: translateY(-2px); }

/* Pulse Animation */
.animate-pulse-slow {
    animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-slow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Glow Animation */
.animate-glow-green {
    animation: glow-green 2s ease-in-out infinite alternate;
}

@keyframes glow-green {
    from { box-shadow: 0 0 10px rgba(10, 107, 58, 0.3); }
    to { box-shadow: 0 0 25px rgba(10, 107, 58, 0.6); }
}

.animate-glow-gold {
    animation: glow-gold 2s ease-in-out infinite alternate;
}

@keyframes glow-gold {
    from { box-shadow: 0 0 10px rgba(212, 175, 55, 0.3); }
    to { box-shadow: 0 0 25px rgba(212, 175, 55, 0.6); }
}

/* Float Animation */
.animate-float {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Shimmer Animation */
.animate-shimmer {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.03) 100%
    );
    background-size: 200% 100%;
    animation: skeleton 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

@keyframes skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================================
   LAYOUT UTILITIES
   ============================================================================ */

/* Flex Gap Extensions */
.gap-snooker-sm { gap: var(--space-2); }
.gap-snooker { gap: var(--space-4); }
.gap-snooker-lg { gap: var(--space-6); }
.gap-snooker-xl { gap: var(--space-8); }

/* Aspect Ratios */
.aspect-product { aspect-ratio: 1 / 1; }
.aspect-banner { aspect-ratio: 21 / 9; }
.aspect-card { aspect-ratio: 4 / 3; }
.aspect-thumbnail { aspect-ratio: 4 / 5; }

/* Container Extensions */
.container-narrow {
    max-width: var(--container-md);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.container-wide {
    max-width: var(--container-2xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

/* Section Spacing */
.section-padding {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}

.section-padding-sm {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
}

.section-padding-lg {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
}

@media (max-width: 767px) {
    .section-padding {
        padding-top: var(--space-10);
        padding-bottom: var(--space-10);
    }
    
    .section-padding-lg {
        padding-top: var(--space-16);
        padding-bottom: var(--space-16);
    }
}

/* ============================================================================
   TYPOGRAPHY UTILITIES
   ============================================================================ */

.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }
.font-accent { font-family: var(--font-accent); }
.font-mono { font-family: var(--font-mono); }

.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================================
   INTERACTIVE UTILITIES
   ============================================================================ */

.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }

.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }

.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* ============================================================================
   SCROLL UTILITIES
   ============================================================================ */

.scroll-smooth { scroll-behavior: smooth; }
.scroll-snap-x { scroll-snap-type: x mandatory; }
.scroll-snap-y { scroll-snap-type: y mandatory; }
.scroll-snap-start { scroll-snap-align: start; }
.scroll-snap-center { scroll-snap-align: center; }
.scroll-snap-end { scroll-snap-align: end; }

.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-hidden { overflow: hidden; }

/* Custom Scrollbar */
.scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-full);
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.scrollbar-snooker::-webkit-scrollbar-thumb {
    background: rgba(10, 107, 58, 0.5);
}

.scrollbar-snooker::-webkit-scrollbar-thumb:hover {
    background: rgba(10, 107, 58, 0.7);
}

/* ============================================================================
   IMAGE UTILITIES
   ============================================================================ */

.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.img-grayscale {
    filter: grayscale(100%);
    transition: filter var(--transition-normal);
}

.img-grayscale:hover {
    filter: grayscale(0%);
}

/* ============================================================================
   POSITION UTILITIES
   ============================================================================ */

.inset-0 { inset: 0; }
.inset-x-0 { left: 0; right: 0; }
.inset-y-0 { top: 0; bottom: 0; }

/* Z-Index */
.z-dropdown { z-index: var(--z-dropdown); }
.z-sticky { z-index: var(--z-sticky); }
.z-fixed { z-index: var(--z-fixed); }
.z-modal { z-index: var(--z-modal); }
.z-tooltip { z-index: var(--z-tooltip); }
.z-max { z-index: var(--z-max); }

/* ============================================================================
   SNOOKER-SPECIFIC COMPONENTS
   ============================================================================ */

/* Ball Indicator */
.ball-indicator {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    display: inline-block;
}

.ball-indicator.red { background: var(--ball-red); }
.ball-indicator.yellow { background: var(--ball-yellow); }
.ball-indicator.green { background: var(--ball-green); }
.ball-indicator.brown { background: var(--ball-brown); }
.ball-indicator.blue { background: var(--ball-blue); }
.ball-indicator.pink { background: var(--ball-pink); }
.ball-indicator.black { background: var(--ball-black); }
.ball-indicator.white { background: var(--ball-white); border: 1px solid var(--neutral-400); }

/* Cue Divider */
.cue-divider {
    position: relative;
    height: 4px;
    background: linear-gradient(90deg,
        var(--snooker-cushion) 0%,
        var(--snooker-rail) 20%,
        var(--gold-primary) 50%,
        var(--snooker-rail) 80%,
        var(--snooker-cushion) 100%
    );
    border-radius: var(--radius-full);
    margin: var(--space-8) 0;
}

.cue-divider::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: var(--ball-white);
    border: 3px solid var(--gold-primary);
    border-radius: var(--radius-full);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* Table Felt Background */
.felt-bg {
    background: 
        radial-gradient(ellipse at center, var(--snooker-felt) 0%, var(--snooker-table) 50%, var(--snooker-table-dark) 100%);
}

/* Championship Banner */
.championship-banner {
    background: linear-gradient(135deg, var(--snooker-table-dark), var(--snooker-table), var(--snooker-table-dark));
    border: 2px solid var(--gold-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-6) var(--space-8);
    position: relative;
    overflow: hidden;
}

.championship-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
    animation: championship-shine 3s ease-in-out infinite;
}

@keyframes championship-shine {
    0% { left: -100%; }
    100% { left: 200%; }
}

/* Trophy Card */
.trophy-card {
    position: relative;
    background: linear-gradient(145deg, rgba(38, 38, 38, 0.9), rgba(23, 23, 23, 0.95));
    border: 2px solid transparent;
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    overflow: hidden;
}

.trophy-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, var(--gold-light), var(--gold-primary), var(--gold-dark), var(--gold-primary), var(--gold-light));
    background-size: 200% 200%;
    border-radius: inherit;
    z-index: -1;
    animation: trophy-border 4s linear infinite;
}

@keyframes trophy-border {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Score Display */
.score-display {
    font-family: var(--font-accent);
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    color: var(--neutral-50);
    background: rgba(0, 0, 0, 0.5);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-lg);
    border: 2px solid var(--gold-primary);
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* ============================================================================
   DARK MODE ADJUSTMENTS (if needed for contrast)
   ============================================================================ */

.dark-contrast {
    --snooker-table: #0d8247;
    --gold-primary: #e5c76b;
}

/* ============================================================================
   RTL SUPPORT
   ============================================================================ */

[dir="rtl"] {
    .ml-auto { margin-left: 0; margin-right: auto; }
    .mr-auto { margin-right: 0; margin-left: auto; }
    .text-left { text-align: right; }
    .text-right { text-align: left; }
    .pl-4 { padding-left: 0; padding-right: var(--space-4); }
    .pr-4 { padding-right: 0; padding-left: var(--space-4); }
    .border-l { border-left: 0; border-right-width: 1px; }
    .border-r { border-right: 0; border-left-width: 1px; }
}

/* ============================================================================
   PRINT UTILITIES
   ============================================================================ */

@media print {
    .print-hidden { display: none !important; }
    .print-block { display: block !important; }
    .print-text-black { color: black !important; }
    .print-bg-white { background: white !important; }
}