@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Fonts */
@font-face {
    font-family: 'skyquakesymbols';
    src: url('/Fonts/symbols_skyquake.ttf');
    font-display: block;
}

@layer base {
    * {
        @apply m-0 p-0 box-border;
    }

    body {
        @apply font-sans leading-relaxed text-white overflow-x-hidden min-h-screen antialiased;
        background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/images/toothless_face.webp');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        -webkit-overflow-scrolling: touch;
    }

    html {
        @apply scroll-smooth;
    }
}

@layer components {
    /* ========================================
       COLOR SCHEME:
       - Background: Dark earth green (#1C1E1D) to graphite (#0A0B0A)
       - Accent/Primary text: Cream (#F5F5DC)
       - Secondary/Muted text: Mint green (#90EE90)
       ======================================== */
    
    /* Vehicle, Squadron, and Player names use custom font */
    .vehicle-name,
    .squadron-name,
    .squadron-tag,
    .player-name,
    .player-nick {
        @apply font-skyquake;
    }

    /* Primary Button - Cream gradient */
    .btn-primary {
        @apply inline-flex items-center justify-center px-6 py-3 font-bold rounded-lg 
               transition-all duration-300 relative overflow-hidden;
        background: linear-gradient(135deg, #F5F5DC 0%, #E8E8D0 100%);
        color: #1E1E1E;
        box-shadow: 0 4px 20px rgba(245, 245, 220, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
    
    .btn-primary:hover {
        box-shadow: 0 8px 25px rgba(245, 245, 220, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
        transform: translateY(-2px);
    }
    
    .btn-primary:active {
        transform: translateY(0);
    }

    /* Navigation callouts */
    .nav-premium {
        color: #f4d35e;
    }

    .nav-premium:hover {
        color: #ffe08a;
    }

    .nav-rainbow {
        color: #ff9b8a;
    }

    .nav-rainbow:hover {
        color: #ffc0b4;
    }

    .nav-donate {
        background: linear-gradient(90deg, #ff7a7a 0%, #ffd166 25%, #90ee90 50%, #8fd3ff 75%, #c79bff 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

    .nav-donate:hover {
        filter: brightness(1.12);
    }

    .nav-donate i {
        -webkit-text-fill-color: initial;
        color: #ffd166;
    }

    /* Secondary Button */
    .btn-secondary {
        @apply inline-flex items-center justify-center px-6 py-3 
               bg-white/10 text-white font-semibold rounded-lg border-2 border-primary-400/50
               transition-all duration-300 backdrop-blur-sm
               hover:-translate-y-0.5 hover:bg-primary-400/20 hover:border-primary-400
               active:translate-y-0;
    }
    
    /* Feature Card - used on homepage */
    .feature-card {
        background: linear-gradient(135deg, rgba(62, 78, 62, 0.2) 0%, rgba(44, 44, 44, 0.2) 100%);
        border: 1px solid rgba(245, 245, 220, 0.08);
        backdrop-filter: blur(12px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .card-hover:hover {
        transform: translateY(-3px);
        background: linear-gradient(135deg, rgba(62, 78, 62, 0.3) 0%, rgba(44, 44, 44, 0.3) 100%);
        border-color: rgba(144, 238, 144, 0.3);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    }
    
    .card-hover:hover i {
        color: #F5F5DC;
        transform: scale(1.1);
        transition: transform 0.3s ease;
    }
    
    /* Search Input - Glass effect */
    .search-input-glass {
        background: rgba(30, 30, 30, 0.6);
        border: 1px solid rgba(245, 245, 220, 0.1);
        backdrop-filter: blur(10px);
        transition: all 0.3s ease;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
    }

    .search-input-glass:focus {
        background: rgba(40, 40, 40, 0.8);
        border-color: rgba(144, 238, 144, 0.4);
        box-shadow: 0 0 0 2px rgba(144, 238, 144, 0.1), inset 0 2px 4px rgba(0,0,0,0.2);
    }

    /* Card Component */
    .card {
        @apply bg-dark-100/80 backdrop-blur-md rounded-2xl border border-primary-400/20 
               p-6 transition-all duration-300
               hover:border-primary-400/40 hover:shadow-lg hover:shadow-primary-400/10;
    }

    /* Glass Card (more transparent) */
    .glass-card {
        @apply bg-dark-100/60 backdrop-blur-xl rounded-2xl border border-primary-400/20 
               p-6 transition-all duration-300;
    }

    /* Stat Card */
    .stat-card {
        @apply card text-center relative overflow-hidden
               hover:-translate-y-1 hover:border-primary-400;
    }

    /* Input Field */
    .input-field {
        @apply w-full px-4 py-3 bg-dark-200/80 border-2 border-primary-400/30 
               rounded-lg text-white placeholder-white/50
               transition-all duration-300 backdrop-blur-sm
               focus:outline-none focus:border-primary-400 focus:shadow-lg focus:shadow-primary-400/20;
    }

    /* Select Dropdown */
    .select-field {
        @apply input-field cursor-pointer appearance-none pr-10;
        background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2339ff14%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3e%3cpolyline points=%226 9 12 15 18 9%22%3e%3c/polyline%3e%3c/svg%3e');
        background-position: right 0.75rem center;
        background-size: 1.25rem;
        background-repeat: no-repeat;
    }

    /* Table Styles */
    .data-table {
        @apply w-full border-collapse bg-dark-200/80 rounded-xl overflow-hidden 
               shadow-xl border border-primary-400/10;
    }

    .data-table thead {
        @apply bg-gradient-to-r from-primary-400/20 to-primary-500/20;
    }

    .data-table th {
        @apply px-4 py-3 text-white font-semibold text-center border-b-2 border-primary-400/30;
    }

    .data-table td {
        @apply px-4 py-3 text-center text-white/90 border-b border-primary-400/10;
    }

    .data-table tbody tr {
        @apply transition-all duration-300 hover:bg-gradient-to-r hover:from-primary-400/10 
               hover:to-primary-500/10 hover:scale-[1.01];
    }

    /* Loading Spinner */
    .spinner {
        @apply border-4 border-primary-400/30 border-t-primary-400 rounded-full 
               w-10 h-10 animate-spin mx-auto;
    }

    /* Badge */
    .badge {
        @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold
               bg-primary-400/10 text-primary-400 border border-primary-400/30;
    }

    /* Navbar */
    .navbar {
        @apply fixed top-0 w-full bg-dark-300/95 backdrop-blur-md z-50 
               border-b border-primary-400/20 transition-all duration-300;
    }

    /* Container */
    .container-custom {
        @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
    }

    /* Section Title */
    .section-title {
        @apply text-4xl font-bold text-center mb-4 bg-gradient-to-r from-primary-400 via-primary-500 to-primary-400 
               bg-clip-text text-transparent bg-[length:200%_auto] animate-gradient-shift;
    }

    /* Link Hover Effect */
    .link-hover {
        @apply relative text-white transition-colors duration-300 
               hover:text-primary-400
               after:content-[''] after:absolute after:bottom-0 after:left-0 
               after:w-0 after:h-0.5 after:bg-gradient-to-r after:from-primary-400 after:to-primary-500
               after:transition-all after:duration-300
               hover:after:w-full;
    }

    /* Date Filter Styles */
    .date-filter-container {
        @apply glass-card space-y-4;
    }

    .filter-button {
        @apply px-4 py-2 rounded-lg border border-primary-400/30 bg-dark-100/50
               text-white font-medium transition-all duration-300
               hover:border-primary-400 hover:bg-primary-400/10
               focus:outline-none focus:ring-2 focus:ring-primary-400/50;
    }

    .filter-button-active {
        @apply filter-button border-primary-400 bg-primary-400/20 text-primary-400 shadow-lg shadow-primary-400/20;
    }
}

@layer utilities {
    /* Text Gradient */
    .text-gradient {
        @apply bg-gradient-to-r from-primary-400 via-primary-500 to-primary-600 
               bg-clip-text text-transparent;
    }

    /* Glass Effect */
    .glass {
        @apply bg-white/5 backdrop-blur-md;
    }

    /* Glow Effect */
    .glow {
        @apply shadow-lg shadow-primary-400/30;
    }

    /* Scrollbar Styles */
    .custom-scrollbar::-webkit-scrollbar {
        @apply w-2 h-2;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
        @apply bg-dark-200 rounded;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
        @apply bg-primary-400/30 rounded hover:bg-primary-400/50;
    }
}

/* Additional custom animations */
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes scrollRight {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Row link overlay - makes entire table row clickable with native right-click support */
tr.row-link {
  position: relative;
  cursor: pointer;
}
tr.row-link a.row-link-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
tr.row-link td a:not(.row-link-overlay),
tr.row-link td button,
tr.row-link td [tabindex],
tr.row-link td input,
tr.row-link td select,
tr.row-link td textarea {
  position: relative;
  z-index: 1;
}