/* ========================================
   Quanta Platform - Unified Theme System
   نظام موحد للألوان والتدرجات
   ======================================== */

:root {
    /* ========== Primary Colors - الأزرق السماوي الفاتح ========== */
    --primary-darkest: #0B1426;
    /* أزرق غامق جداً - الخلفية */
    --primary-darker: #0EA5E9;
    /* أزرق سماوي - الرمز */
    --primary-dark: #0EA5E9;
    --primary: #38BDF8;
    /* أزرق سماوي فاتح مريح - التدرج */
    --primary-light: #7DD3FC;
    --primary-lighter: #BAE6FD;
    --primary-lightest: #E0F2FE;

    /* ========== Accent Colors - السيان ========== */
    --accent-dark: #0891B2;
    --accent: #00D4FF;
    /* سيان لامع - التأثيرات */
    --accent-light: #67E8F9;

    /* ========== Secondary Colors - السيان الثانوي ========== */
    --secondary-dark: #0891B2;
    /* سيان غامق - الظلال */
    --secondary: #00D4FF;
    /* سيان لامع - النقطة */
    --secondary-light: #67E8F9;
    /* سيان فاتح - الهالة */
    --secondary-lighter: #A5F3FC;

    /* ========== Neutral Colors - الرمادي ========== */
    --neutral-darkest: #0B1426;
    /* خلفية أساسية */
    --neutral-darker: #1A1A1A;
    /* أسود - الطباعة */
    --neutral-dark: #343A40;
    /* رمادي غامق */
    --neutral: #6C757D;
    /* رمادي متوسط */
    --neutral-light: #ADB5BD;
    --neutral-lighter: #DEE2E6;
    --neutral-lightest: #F8F9FA;
    /* رمادي فاتح جداً */

    /* ========== Success, Warning, Danger ========== */
    --success: #10B981;
    --success-light: #34D399;
    --warning: #F59E0B;
    --warning-light: #FBBF24;
    --danger: #EF4444;
    --danger-light: #F87171;

    /* ========== Background Colors ========== */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8F9FA;
    --bg-tertiary: #E2E8F0;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-card-hover: rgba(255, 255, 255, 1);
    --bg-glass: rgba(255, 255, 255, 0.8);

    /* ========== Text Colors ========== */
    --text-primary: #1A202C;
    /* أسود - النص الأساسي */
    --text-secondary: #4A5568;
    /* رمادي غامق */
    --text-muted: #718096;
    /* رمادي متوسط */
    --text-inverse: #FFFFFF;
    /* أبيض */

    /* Border Colors ========== */
    --border-primary: rgba(56, 189, 248, 0.3);
    --border-secondary: rgba(125, 211, 252, 0.3);
    --border-neutral: rgba(108, 117, 125, 0.3);
    --border-light: rgba(255, 255, 255, 0.1);

    /* ========== Gradients - التدرجات الموحدة ========== */
    /* Primary Sky Blue Gradients */
    --gradient-primary: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 100%);
    --gradient-primary-light: linear-gradient(135deg, #38BDF8 0%, #7DD3FC 100%);
    --gradient-primary-accent: linear-gradient(135deg, #38BDF8 0%, #7DD3FC 100%);

    /* Secondary Cyan Gradients */
    --gradient-secondary: linear-gradient(135deg, #0891B2 0%, #00D4FF 100%);
    --gradient-secondary-light: linear-gradient(135deg, #00D4FF 0%, #67E8F9 100%);

    /* Combined Gradients - تدرجات مدمجة */
    --gradient-hero: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 50%, #7DD3FC 100%);
    --gradient-sunset: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 50%, #7DD3FC 100%);

    /* Background Gradients */
    --gradient-bg-main: linear-gradient(180deg, #0B1426 0%, #1A1A1A 100%);
    --gradient-bg-card: linear-gradient(145deg, rgba(26, 26, 26, 0.9) 0%, rgba(52, 58, 64, 0.8) 100%);

    /* Text Gradients - للعناوين */
    --gradient-text-primary: linear-gradient(135deg, #38BDF8 0%, #7DD3FC 100%);
    --gradient-text-secondary: linear-gradient(135deg, #38BDF8 0%, #7DD3FC 100%);

    /* ========== Shadows - الظلال الموحدة ========== */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.4);

    /* Colored Shadows */
    --shadow-primary: 0 8px 30px rgba(56, 189, 248, 0.3);
    --shadow-primary-lg: 0 10px 40px rgba(56, 189, 248, 0.4);
    --shadow-secondary: 0 8px 30px rgba(125, 211, 252, 0.3);
    --shadow-secondary-lg: 0 10px 40px rgba(125, 211, 252, 0.4);

    /* ========== Border Radius ========== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* ========== Spacing ========== */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* ========== Transitions ========== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* ========== Z-Index ========== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ========================================
   Global Styles - الأنماط العامة
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Cairo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #F8FAFC;
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    direction: rtl;
    text-align: right;
}

/* ========================================
   Typography - الخطوط
   ======================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: var(--space-4);
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

/* Gradient Text */
.text-gradient-primary {
    background: var(--gradient-text-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-secondary {
    background: var(--gradient-text-secondary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ========================================
   Buttons - الأزرار الموحدة
   ======================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-normal);
    border: 2px solid transparent;
    white-space: nowrap;
}

.btn-primary {
    background: var(--gradient-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-primary);
}

.btn-primary:hover {
    background: var(--gradient-primary-accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary-lg);
    border-color: var(--accent);
}

.btn-secondary {
    background: var(--gradient-secondary);
    color: var(--text-primary);
    box-shadow: var(--shadow-secondary);
}

.btn-secondary:hover {
    background: var(--gradient-secondary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-secondary-lg);
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    border-color: var(--border-primary);
}

.btn-outline:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--primary);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}

.btn-ghost:hover {
    background: var(--bg-glass);
}

/* Button Sizes */
.btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: 0.875rem;
}

.btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: 1.125rem;
}

/* ========================================
   Cards - الكروت الموحدة
   ======================================== */

.card {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    border: 2px solid var(--border-primary);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-primary);
    border-color: var(--primary);
}

.card-header {
    background: rgba(30, 58, 138, 0.3);
    padding: var(--space-4);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-4);
    border-bottom: 1px solid var(--border-primary);
}

.card-glass {
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
}

/* ========================================
   Forms - النماذج الموحدة
   ======================================== */

.form-group {
    margin-bottom: var(--space-4);
}

.form-label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: rgba(52, 58, 64, 0.6);
    border: 2px solid var(--border-neutral);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 1rem;
    transition: all var(--transition-normal);
    font-family: inherit;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(52, 58, 64, 0.8);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-muted);
}

/* ========================================
   Badges & Tags - الشارات
   ======================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-primary {
    background: rgba(59, 130, 246, 0.2);
    color: var(--accent);
    border: 1px solid var(--border-primary);
}

.badge-secondary {
    background: rgba(255, 107, 53, 0.2);
    color: var(--secondary-light);
    border: 1px solid var(--border-secondary);
}

.badge-success {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success-light);
    border: 1px solid var(--success);
}

.badge-warning {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning-light);
    border: 1px solid var(--warning);
}

/* ========================================
   Animations - الحركات الموحدة
   ======================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

/* ========================================
   Utility Classes - فئات مساعدة
   ======================================== */

/* Spacing */
.mt-1 {
    margin-top: var(--space-1);
}

.mt-2 {
    margin-top: var(--space-2);
}

.mt-3 {
    margin-top: var(--space-3);
}

.mt-4 {
    margin-top: var(--space-4);
}

.mt-6 {
    margin-top: var(--space-6);
}

.mt-8 {
    margin-top: var(--space-8);
}

.mb-1 {
    margin-bottom: var(--space-1);
}

.mb-2 {
    margin-bottom: var(--space-2);
}

.mb-3 {
    margin-bottom: var(--space-3);
}

.mb-4 {
    margin-bottom: var(--space-4);
}

.mb-6 {
    margin-bottom: var(--space-6);
}

.mb-8 {
    margin-bottom: var(--space-8);
}

/* Text Alignment */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* Display */
.d-none {
    display: none;
}

.d-block {
    display: block;
}

.d-flex {
    display: flex;
}

.d-inline-flex {
    display: inline-flex;
}

/* Flex */
.flex-column {
    flex-direction: column;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.align-center {
    align-items: center;
}

.gap-2 {
    gap: var(--space-2);
}

.gap-4 {
    gap: var(--space-4);
}

/* Responsive */
@media (max-width: 768px) {
    .mobile-hidden {
        display: none;
    }
}

@media (min-width: 769px) {
    .desktop-hidden {
        display: none;
    }
}