/**
 * Fantazy Arena Custom Styles
 * Elite 007T Clan Management Platform
 */

/* Font Imports */
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800;900&display=swap');

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

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

/* Root Variables */
:root {
    --brand-black: #000000;
    --brand-white: #FFFFFF;
    --arena-blue: #1DB3E8;
    --arena-orange: #FA7844;
    --brand-pink: #FF7883;
    --brand-purple: #D33DA9;
    
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/* Base Styles */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Albert Sans', sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Arabic RTL Support */
[dir="rtl"] {
    font-family: 'Araboto', 'Albert Sans', sans-serif;
}

[dir="rtl"] .font-jost {
    font-family: 'Araboto', 'Jost', sans-serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--gray-900);
}

::-webkit-scrollbar-thumb {
    background: var(--arena-blue);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--arena-orange);
}

/* Button Styles */
.btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 bg-gradient-to-r from-arena-blue to-arena-orange text-white font-semibold rounded-lg hover:opacity-90 focus:opacity-90 focus:outline-none focus:ring-2 focus:ring-arena-blue focus:ring-offset-2 focus:ring-offset-gray-900 transition-all duration-300 transform hover:scale-105 active:scale-95;
}

.btn-secondary {
    @apply inline-flex items-center justify-center px-6 py-3 bg-gray-800 text-white font-semibold rounded-lg hover:bg-gray-700 focus:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-gray-900 transition-all duration-300;
}

.btn-outline {
    @apply inline-flex items-center justify-center px-6 py-3 border-2 border-arena-blue text-arena-blue font-semibold rounded-lg hover:bg-arena-blue hover:text-white focus:bg-arena-blue focus:text-white focus:outline-none focus:ring-2 focus:ring-arena-blue focus:ring-offset-2 focus:ring-offset-gray-900 transition-all duration-300;
}

.btn-danger {
    @apply inline-flex items-center justify-center px-6 py-3 bg-red-600 text-white font-semibold rounded-lg hover:bg-red-700 focus:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-gray-900 transition-all duration-300;
}

.btn-success {
    @apply inline-flex items-center justify-center px-6 py-3 bg-green-600 text-white font-semibold rounded-lg hover:bg-green-700 focus:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-gray-900 transition-all duration-300;
}

.btn-sm {
    @apply px-4 py-2 text-sm;
}

.btn-lg {
    @apply px-8 py-4 text-lg;
}

/* Form Styles */
.form-input {
    @apply w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:border-arena-blue focus:ring-2 focus:ring-arena-blue focus:ring-opacity-50 focus:outline-none transition-all duration-300;
}

.form-select {
    @apply w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg text-white focus:border-arena-blue focus:ring-2 focus:ring-arena-blue focus:ring-opacity-50 focus:outline-none transition-all duration-300 cursor-pointer;
}

.form-textarea {
    @apply w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:border-arena-blue focus:ring-2 focus:ring-arena-blue focus:ring-opacity-50 focus:outline-none transition-all duration-300 resize-vertical min-h-[120px];
}

.form-checkbox {
    @apply w-5 h-5 bg-gray-800 border border-gray-600 rounded text-arena-blue focus:ring-arena-blue focus:ring-2 focus:ring-opacity-50;
}

.form-radio {
    @apply w-5 h-5 bg-gray-800 border border-gray-600 text-arena-blue focus:ring-arena-blue focus:ring-2 focus:ring-opacity-50;
}

/* Card Styles */
.card {
    @apply bg-gray-900 border border-gray-700 rounded-xl p-6 shadow-lg;
}

.card-header {
    @apply border-b border-gray-700 pb-4 mb-6;
}

.card-title {
    @apply text-2xl font-jost font-bold text-white;
}

.card-subtitle {
    @apply text-gray-400 mt-1;
}

/* Badge Styles */
.badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium;
}

.badge-primary {
    @apply bg-arena-blue text-white;
}

.badge-secondary {
    @apply bg-gray-700 text-gray-300;
}

.badge-success {
    @apply bg-green-600 text-white;
}

.badge-warning {
    @apply bg-yellow-600 text-white;
}

.badge-danger {
    @apply bg-red-600 text-white;
}

.badge-info {
    @apply bg-blue-600 text-white;
}

/* Navigation Styles */
.nav-link {
    @apply text-gray-300 hover:text-white transition-colors duration-300 font-medium;
}

.nav-link.active {
    @apply text-arena-blue;
}

/* Table Styles */
.table {
    @apply w-full text-left border-collapse;
}

.table th {
    @apply px-6 py-4 text-xs font-medium text-gray-400 uppercase tracking-wider border-b border-gray-700;
}

.table td {
    @apply px-6 py-4 text-sm text-gray-300 border-b border-gray-800;
}

.table tr:hover {
    @apply bg-gray-800;
}

/* Alert Styles */
.alert {
    @apply p-4 rounded-lg border flex items-start space-x-3;
}

[dir="rtl"] .alert {
    @apply space-x-reverse;
}

.alert-success {
    @apply bg-green-500/20 border-green-500/50 text-green-400;
}

.alert-error {
    @apply bg-red-500/20 border-red-500/50 text-red-400;
}

.alert-warning {
    @apply bg-yellow-500/20 border-yellow-500/50 text-yellow-400;
}

.alert-info {
    @apply bg-blue-500/20 border-blue-500/50 text-blue-400;
}

/* Loading Spinner */
.spinner {
    @apply inline-block w-6 h-6 border-2 border-gray-300 border-t-arena-blue rounded-full animate-spin;
}

/* Gradient Text */
.gradient-text {
    @apply bg-gradient-to-r from-arena-blue to-arena-orange bg-clip-text text-transparent;
}

/* Glow Effects */
.glow-blue {
    box-shadow: 0 0 20px rgba(29, 179, 232, 0.3);
}

.glow-orange {
    box-shadow: 0 0 20px rgba(250, 120, 68, 0.3);
}

.glow-pink {
    box-shadow: 0 0 20px rgba(255, 120, 131, 0.3);
}

.glow-purple {
    box-shadow: 0 0 20px rgba(211, 61, 169, 0.3);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

/* Animation Classes */
.animate-fadeIn {
    animation: fadeIn 0.5s ease-out;
}

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

.animate-fadeInDown {
    animation: fadeInDown 0.6s ease-out;
}

.animate-slideInLeft {
    animation: slideInLeft 0.6s ease-out;
}

.animate-slideInRight {
    animation: slideInRight 0.6s ease-out;
}

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

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.hover-glow:hover {
    box-shadow: 0 0 30px rgba(29, 179, 232, 0.5);
}

/* Text Effects */
.text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.text-shadow-lg {
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
}

/* Clan Rank Colors */
.rank-bronze {
    color: #CD7F32;
}

.rank-gold {
    color: #FFD700;
}

.rank-diamond {
    color: #B9F2FF;
}

.rank-elite {
    color: #8B5CF6;
}

.rank-champion {
    color: #F59E0B;
}

.rank-unreal {
    color: #EF4444;
}

/* Status Colors */
.status-pending {
    @apply text-yellow-400;
}

.status-approved {
    @apply text-green-400;
}

.status-rejected {
    @apply text-red-400;
}

.status-banned {
    @apply text-red-600;
}

/* Tournament Status Colors */
.tournament-upcoming {
    @apply text-blue-400;
}

.tournament-registration-open {
    @apply text-green-400;
}

.tournament-registration-closed {
    @apply text-yellow-400;
}

.tournament-active {
    @apply text-arena-blue;
}

.tournament-completed {
    @apply text-gray-400;
}

.tournament-cancelled {
    @apply text-red-400;
}

/* Platform Icons */
.platform-pc::before {
    content: "🖥️";
}

.platform-xbox::before {
    content: "🎮";
}

.platform-playstation::before {
    content: "🎮";
}

.platform-nintendo::before {
    content: "🎮";
}

.platform-mobile::before {
    content: "📱";
}

/* Responsive Utilities */
@media (max-width: 640px) {
    .btn-primary,
    .btn-secondary,
    .btn-outline {
        @apply w-full justify-center;
    }
    
    .card {
        @apply p-4;
    }
    
    .table {
        @apply text-xs;
    }
    
    .table th,
    .table td {
        @apply px-3 py-2;
    }
}

/* Dark Mode Adjustments */
@media (prefers-color-scheme: dark) {
    /* Already dark by default */
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .btn-primary {
        @apply bg-white text-black border-2 border-white;
    }
    
    .btn-secondary {
        @apply bg-transparent text-white border-2 border-white;
    }
    
    .form-input,
    .form-select,
    .form-textarea {
        @apply border-2 border-white;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }
}

/* Focus Visible */
.focus-visible:focus {
    outline: 2px solid var(--arena-blue);
    outline-offset: 2px;
}

/* Selection */
::selection {
    background-color: var(--arena-blue);
    color: white;
}

::-moz-selection {
    background-color: var(--arena-blue);
    color: white;
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.not-sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Custom Properties for JavaScript */
:root {
    --header-height: 80px;
    --sidebar-width: 280px;
    --border-radius: 8px;
    --transition-speed: 0.3s;
}

/* Utility Classes */
.glass-effect {
    backdrop-filter: blur(10px);
    background-color: rgba(17, 24, 39, 0.8);
}

.border-gradient {
    background: linear-gradient(var(--gray-900), var(--gray-900)) padding-box,
                linear-gradient(45deg, var(--arena-blue), var(--arena-orange)) border-box;
    border: 2px solid transparent;
}

.text-gradient {
    background: linear-gradient(45deg, var(--arena-blue), var(--arena-orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Mobile-First Responsive Design */
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
        padding: 0 2rem;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: 1536px;
    }
}