/* ============================================
   VALCODE UNIFIED THEME SYSTEM
   Complete Dark/White Mode + Purple/Blue Modern Design
   Optimized for all pages: Main, Dashboard, Auth
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700;800;900&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ============================================
   CSS VARIABLES - Modern Purple/Blue System
   ============================================ */
:root {
    /* Modern Purple/Blue Color Palette */
    --primary-purple: #8b5cf6;
    --primary-purple-dark: #7c3aed;
    --primary-purple-light: #a78bfa;
    --secondary-blue: #3b82f6;
    --secondary-blue-dark: #2563eb;
    --secondary-blue-light: #60a5fa;
    --accent-cyan: #06b6d4;
    --accent-cyan-dark: #0891b2;
    --accent-pink: #ec4899;
    /* Backgrounds */
    --dark-bg: #0f172a;
    --darker-bg: #020617;
    --bg-card: rgba(30, 41, 59, 0.4);
    --bg-card-hover: rgba(30, 41, 59, 0.6);
    /* Borders */
    --border-purple: rgba(139, 92, 246, 0.3);
    --border-blue: rgba(59, 130, 246, 0.3);
    /* Text Colors - Dark Mode */
    --text-primary: rgba(255, 255, 255, 0.95);
    --text-secondary: rgba(255, 255, 255, 0.75);
    --text-muted: rgba(255, 255, 255, 0.55);
    /* Legacy compatibility */
    --primary-gold: #8b5cf6;
    --border-gold: rgba(139, 92, 246, 0.3);
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    /* Border Radius */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;
    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   LIGHT MODE THEME OVERRIDES
   ============================================ */
[data-theme="light"] {
    /* Backgrounds */
    --dark-bg: #ffffff;
    --darker-bg: #f8fafc;
    --bg-card: rgba(255, 255, 255, 0.7);
    --bg-card-hover: rgba(255, 255, 255, 0.9);
    /* Text Colors - Light Mode */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    /* Borders */
    --border-purple: rgba(139, 92, 246, 0.3);
    --border-blue: rgba(59, 130, 246, 0.3);
    --border-gold: rgba(139, 92, 246, 0.3);
}

/* ============================================
   BASE STYLES
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--darker-bg);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="light"] body {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

/* ============================================
   CONTAINER & LAYOUT
   ============================================ */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    position: relative;
    z-index: 3;
}

@media (min-width: 768px) {
    .container {
        padding: 0 var(--spacing-xl);
    }
}

/* ============================================
   HEADER ZEYRA STYLE
   ============================================ */
.header-zeyra {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: rgba(10, 14, 26, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 2px solid var(--border-purple);
    transition: all 0.3s ease;
}

[data-theme="light"] .header-zeyra {
    background: rgba(255, 255, 255, 0.95);
    border-bottom-color: rgba(139, 92, 246, 0.3);
}

.header-zeyra.scrolled {
    box-shadow: 0 20px 60px rgba(139, 92, 246, 0.3);
    border-bottom-color: var(--primary-purple);
}

/* Logo Zeyra Style */
.logo-zeyra {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.75rem;
    font-weight: 900;
    font-family: 'Rajdhani', sans-serif;
    background: linear-gradient(135deg, var(--primary-purple), var(--accent-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.3s ease;
    text-decoration: none;
}

.logo-icon-zeyra {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-purple), var(--accent-cyan));
    border-radius: 0.5rem;
    animation: rotate-logo 20s linear infinite;
    transition: all 0.3s ease;
}

@keyframes rotate-logo {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.logo-zeyra:hover .logo-icon-zeyra {
    animation: rotate-logo-fast 2s linear infinite;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}

@keyframes rotate-logo-fast {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
}

/* Navigation Zeyra */
.nav-zeyra {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-link-zeyra {
    position: relative;
    padding: 0.75rem 1.25rem;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    overflow: hidden;
}

.nav-link-zeyra::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-purple), var(--accent-cyan));
    transition: left 0.3s ease;
    z-index: -1;
    opacity: 0.15;
}

.nav-link-zeyra:hover::before,
.nav-link-zeyra.active::before {
    left: 0;
}

.nav-link-zeyra:hover,
.nav-link-zeyra.active {
    color: var(--primary-purple);
    transform: translateY(-2px);
}

.nav-link-zeyra.active {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid var(--border-purple);
}

[data-theme="light"] .nav-link-zeyra {
    color: var(--text-secondary);
}

[data-theme="light"] .nav-link-zeyra:hover,
[data-theme="light"] .nav-link-zeyra.active {
    color: var(--secondary-blue);
}

/* Buttons Zeyra */
.btn-zeyra-primary {
    position: relative;
    padding: 0.875rem 2rem;
    background: linear-gradient(135deg, var(--primary-purple), var(--accent-cyan));
    color: white;
    font-weight: 700;
    font-size: 1rem;
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-zeyra-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);
}

.btn-zeyra-outline {
    padding: 0.875rem 2rem;
    background: transparent;
    color: var(--primary-purple);
    font-weight: 700;
    font-size: 1rem;
    border: 2px solid var(--primary-purple);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-zeyra-outline:hover {
    background: var(--primary-purple);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);
}

[data-theme="light"] .btn-zeyra-outline {
    color: var(--secondary-blue);
    border-color: var(--secondary-blue);
}

[data-theme="light"] .btn-zeyra-outline:hover {
    background: var(--secondary-blue);
    color: white;
}

/* ============================================
   GAMING CARDS - Universal Design
   ============================================ */
.gaming-card {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-purple);
    border-radius: 1rem;
    padding: 2rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.gaming-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-purple), transparent);
    transition: left 0.4s ease;
}

.gaming-card:hover::before {
    left: 0;
}

.gaming-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-purple);
    box-shadow: 0 20px 60px rgba(139, 92, 246, 0.3);
}

/* ============================================
   FOOTER ZEYRA STYLE
   ============================================ */
.footer-zeyra {
    background: rgba(10, 14, 26, 0.95);
    border-top: 2px solid var(--border-purple);
    padding: 4rem 0 2rem;
    position: relative;
}

.footer-zeyra::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-purple), transparent);
    animation: shimmer 3s ease-in-out infinite;
}

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

[data-theme="light"] .footer-zeyra {
    background: #ffffff;
    border-top-color: rgba(139, 92, 246, 0.3);
}

.footer-valcode-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

@media (max-width: 1024px) {
    .footer-valcode-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

@media (max-width: 640px) {
    .footer-valcode-grid {
        grid-template-columns: 1fr;
    }
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.footer-desc {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 1rem;
}

.footer-social-links {
    display: flex;
    gap: 1rem;
}

.footer-social-link {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border-purple);
    border-radius: 50%;
    color: var(--primary-purple);
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-social-link:hover {
    background: var(--primary-purple);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(139, 92, 246, 0.4);
}

.footer-valcode-heading {
    color: var(--primary-purple);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    font-family: 'Rajdhani', sans-serif;
}

.footer-valcode-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0;
    margin: 0;
}

.footer-valcode-links a,
.footer-valcode-links li {
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    display: inline-block;
}

.footer-valcode-links a:hover {
    color: var(--primary-purple);
    transform: translateX(5px);
}

.footer-valcode-bottom {
    padding-top: 2rem;
    border-top: 1px solid var(--border-purple);
}

.footer-valcode-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.footer-valcode-bottom-content p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.footer-bottom-links-valcode {
    display: flex;
    gap: 2rem;
}

.footer-bottom-links-valcode a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.footer-bottom-links-valcode a:hover {
    color: var(--primary-purple);
}

/* ============================================
   DASHBOARD SYSTEM
   ============================================ */
.dashboard-container {
    display: flex;
    min-height: 100vh;
    position: relative;
    z-index: 3;
}

.dashboard-main {
    flex: 1;
    margin-left: 280px;
    padding: 2rem;
    min-height: 100vh;
}

@media (max-width: 1024px) {
    .dashboard-main {
        margin-left: 0;
        padding: 1rem;
    }
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 2rem;
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-purple);
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(139, 92, 246, 0.2);
}

.dashboard-header h1 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 900;
    color: var(--text-primary);
    margin: 0;
    font-family: 'Rajdhani', sans-serif;
}

.dashboard-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(20px);
    border-right: 1px solid var(--border-purple);
    padding: 2rem 1.5rem;
    overflow-y: auto;
    z-index: 1000;
    transition: all 0.3s ease;
}

[data-theme="light"] .dashboard-sidebar {
    background: rgba(255, 255, 255, 0.98);
    border-right-color: rgba(139, 92, 246, 0.3);
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 0.75rem;
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 0.95rem;
    border-left: 3px solid transparent;
}

.sidebar-link:hover,
.sidebar-link.active {
    background: rgba(139, 92, 246, 0.15);
    color: var(--primary-purple);
    border-left-color: var(--primary-purple);
    transform: translateX(5px);
}

[data-theme="light"] .sidebar-link {
    color: #475569;
}

[data-theme="light"] .sidebar-link:hover,
[data-theme="light"] .sidebar-link.active {
    background: rgba(59, 130, 246, 0.1);
    color: var(--secondary-blue);
    border-left-color: var(--secondary-blue);
}

/* ============================================
   FORMS
   ============================================ */
.form-modern-group {
    margin-bottom: 1.5rem;
}

.form-modern-group label {
    display: block;
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.form-modern-group input,
.form-modern-group textarea,
.form-modern-group select {
    width: 100%;
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    border: 2px solid var(--border-purple);
    border-radius: 0.75rem;
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-modern-group input:focus,
.form-modern-group textarea:focus,
.form-modern-group select:focus {
    outline: none;
    border-color: var(--primary-purple);
    background: var(--bg-card-hover);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.form-modern-group input::placeholder,
.form-modern-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

[data-theme="light"] .form-modern-group input::placeholder,
[data-theme="light"] .form-modern-group textarea::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

.form-modern-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* ============================================
   ALERTS
   ============================================ */
.alert {
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
    border: 2px solid;
}

.alert-success {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.5);
    color: #10b981;
}

.alert-error {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.5);
    color: #ef4444;
}

.alert-warning {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.5);
    color: #f59e0b;
}

.alert-info {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.5);
    color: #3b82f6;
}

/* ============================================
   STATUS BADGES
   ============================================ */
.status-badge {
    display: inline-flex;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.status-badge.status-online {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-badge.status-offline {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.gradient-text {
    background: linear-gradient(135deg, var(--primary-purple), var(--accent-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .gradient-text {
    background: linear-gradient(135deg, var(--secondary-blue), var(--primary-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1024px) {
    .nav-zeyra {
        display: none;
    }
    .dashboard-sidebar {
        transform: translateX(-100%);
    }
    .dashboard-sidebar.active {
        transform: translateX(0);
    }
}

@media (max-width: 640px) {
    .footer-valcode-bottom-content {
        flex-direction: column;
        text-align: center;
    }
    .footer-bottom-links-valcode {
        justify-content: center;
    }
}