/* ═══════════════════════════════════════════════════════════════
   KOJAK · كوجك  —  Design System
   ───────────────────────────────────────────────────────────────
   فلسفة التصميم: "الذهب الهامس" (Quiet Luxury)
   • الفخامة الحقيقية تُلمَح، لا تصرخ
   • الذهب يُستخدم بقطرات لا ببرك
   • العين ترتاح ساعات بدون إجهاد

   ملف واحد يحكم كل شيء.
   تغيير لون هنا = تغيير لون في كل النظام.
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. Font Import ────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');

/* ─── 2. Design Tokens (المفاتيح المحورية) ──────────────────── */
:root {

    /* ━━━ الألوان الأساسية للهوية ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    /* الذهبي - يُستخدم بقطرات */
    --kj-gold:           #E0C79F;
    --kj-gold-soft:      #F4E5C8;   /* ذهبي ناعم للخلفيات */
    --kj-gold-deep:      #C9A876;   /* ذهبي عميق للنصوص */
    --kj-gold-cream:     #FAF7F0;   /* خلفية البطاقات الذهبية */

    /* الكحلي - للنصوص والأزرار */
    --kj-dark:           #303949;
    --kj-dark-soft:      #4A5568;   /* كحلي ناعم */
    --kj-dark-deep:      #1F2937;   /* أعمق للنصوص الرئيسية */

    /* الأبيض والرمادي */
    --kj-white:          #FFFFFF;
    --kj-bg:             #F8F8F9;   /* خلفية الصفحة - Off-white راقي */
    --kj-bg-elevated:    #FFFFFF;   /* خلفية البطاقات */
    --kj-cream-bg:       #FAF7F0;   /* الكريمي للبطاقات الفاخرة */

    /* درجات الرمادي */
    --kj-gray-50:        #F9F9F7;
    --kj-gray-100:       #F2EFE8;
    --kj-gray-200:       #E5E5E0;
    --kj-gray-300:       #D1D1CC;
    --kj-gray-400:       #9CA3AF;
    --kj-gray-500:       #888888;   /* للنصوص الثانوية */
    --kj-gray-600:       #6B7280;
    --kj-gray-700:       #4B5563;
    --kj-gray-800:       #303949;
    --kj-gray-900:       #1F2937;

    /* ━━━ الألوان الدلالية (Semantic) ━━━━━━━━━━━━━━━━━━━━━━━━━ */
    --kj-success:        #10B981;
    --kj-success-soft:   #D1FAE5;
    --kj-success-deep:   #065F46;

    --kj-danger:         #EF4444;
    --kj-danger-soft:    #FEE2E2;
    --kj-danger-deep:    #991B1B;

    --kj-warning:        #F59E0B;
    --kj-warning-soft:   #FEF3C7;
    --kj-warning-deep:   #854F0B;

    --kj-info:           #3B82F6;
    --kj-info-soft:      #DBEAFE;
    --kj-info-deep:      #1E40AF;

    /* ━━━ الطباعة (Typography) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    --kj-font:           'Tajawal', -apple-system, BlinkMacSystemFont,
                         'Segoe UI', Tahoma, sans-serif;

    /* أحجام الخطوط */
    --kj-text-xs:        10px;
    --kj-text-sm:        11px;
    --kj-text-base:      13px;
    --kj-text-md:        14px;
    --kj-text-lg:        16px;
    --kj-text-xl:        18px;
    --kj-text-2xl:       22px;
    --kj-text-3xl:       28px;
    --kj-text-4xl:       36px;
    --kj-text-5xl:       48px;

    /* أوزان الخطوط */
    --kj-weight-light:   300;
    --kj-weight-normal:  400;
    --kj-weight-medium:  500;
    --kj-weight-bold:    700;

    /* ━━━ المسافات (Spacing) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    --kj-space-1:        4px;
    --kj-space-2:        8px;
    --kj-space-3:        12px;
    --kj-space-4:        14px;
    --kj-space-5:        16px;
    --kj-space-6:        18px;
    --kj-space-7:        20px;
    --kj-space-8:        24px;
    --kj-space-10:       32px;
    --kj-space-12:       40px;
    --kj-space-16:       56px;

    /* ━━━ الانحناءات (Border Radius) ━━━━━━━━━━━━━━━━━━━━━━━━━ */
    --kj-radius-sm:      6px;
    --kj-radius-md:      10px;
    --kj-radius-lg:      12px;
    --kj-radius-xl:      14px;
    --kj-radius-2xl:     16px;
    --kj-radius-3xl:     20px;
    --kj-radius-full:    9999px;

    /* ━━━ الحدود (Borders) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    --kj-border-thin:    0.5px solid var(--kj-gray-200);
    --kj-border-soft:    1px solid var(--kj-gray-200);
    --kj-border-gold:    0.5px solid var(--kj-gold);
    --kj-border-gold-bold: 1px solid var(--kj-gold);
    --kj-border-dark:    1px solid var(--kj-dark);

    /* ━━━ الظلال (Shadows) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    /* ظلال هادئة جداً - فاخرة، لا تطغى */
    --kj-shadow-xs:      0 1px 2px rgba(48, 57, 73, 0.04);
    --kj-shadow-sm:      0 1px 3px rgba(48, 57, 73, 0.06);
    --kj-shadow-md:      0 4px 12px rgba(48, 57, 73, 0.08);
    --kj-shadow-lg:      0 10px 30px rgba(48, 57, 73, 0.12);
    --kj-shadow-gold:    0 4px 16px rgba(224, 199, 159, 0.3);

    /* ━━━ الانتقالات (Transitions) ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    --kj-ease-luxury:    cubic-bezier(0.4, 0, 0.2, 1);
    --kj-ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);

    --kj-transition-fast:    150ms var(--kj-ease-luxury);
    --kj-transition-normal:  250ms var(--kj-ease-luxury);
    --kj-transition-slow:    400ms var(--kj-ease-luxury);

    /* ━━━ Z-Index Layers ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    --kj-z-base:         1;
    --kj-z-dropdown:     1000;
    --kj-z-sticky:       1100;
    --kj-z-drawer:       1200;
    --kj-z-modal:        1300;
    --kj-z-toast:        1400;
    --kj-z-tooltip:      1500;
}


/* ─── 3. Reset & Base ─────────────────────────────────────── */

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

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--kj-font);
    font-size: var(--kj-text-md);
    font-weight: var(--kj-weight-normal);
    line-height: 1.5;
    color: var(--kj-dark);
    background: var(--kj-bg);
    direction: rtl;
    text-align: right;
    -webkit-tap-highlight-color: transparent;
}

/* روابط بدون ديكور افتراضي */
a {
    color: inherit;
    text-decoration: none;
    transition: color var(--kj-transition-fast);
}

/* أزرار بدون ستايل افتراضي */
button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    border: 0;
    background: transparent;
    color: inherit;
}

/* حقول الإدخال */
input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* قوائم بدون نقاط */
ul, ol {
    list-style: none;
}

/* صور متجاوبة */
img, svg {
    max-width: 100%;
    display: block;
}


/* ─── 4. Typography Classes ───────────────────────────────── */

.kj-display {
    font-size: var(--kj-text-5xl);
    font-weight: var(--kj-weight-medium);
    line-height: 1;
    letter-spacing: -1.5px;
    color: var(--kj-dark);
}

.kj-h1 {
    font-size: var(--kj-text-4xl);
    font-weight: var(--kj-weight-medium);
    line-height: 1.1;
    letter-spacing: -1px;
    color: var(--kj-dark);
}

.kj-h2 {
    font-size: var(--kj-text-3xl);
    font-weight: var(--kj-weight-medium);
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--kj-dark);
}

.kj-h3 {
    font-size: var(--kj-text-2xl);
    font-weight: var(--kj-weight-medium);
    line-height: 1.3;
    color: var(--kj-dark);
}

.kj-h4 {
    font-size: var(--kj-text-xl);
    font-weight: var(--kj-weight-medium);
    color: var(--kj-dark);
}

.kj-body {
    font-size: var(--kj-text-md);
    color: var(--kj-dark);
}

.kj-caption {
    font-size: var(--kj-text-base);
    color: var(--kj-gray-500);
}

.kj-label {
    font-size: var(--kj-text-xs);
    color: var(--kj-gray-500);
    letter-spacing: 1.5px;
    text-transform: none;
}


/* ─── 5. Components ───────────────────────────────────────── */


/* ━━━ Card (البطاقة الأساسية) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.kj-card {
    background: var(--kj-white);
    border: var(--kj-border-thin);
    border-radius: var(--kj-radius-xl);
    padding: var(--kj-space-6);
    transition: border-color var(--kj-transition-fast);
}

.kj-card:hover {
    border-color: var(--kj-gray-300);
}


/* ━━━ Hero Card (البطاقة الرئيسية مع الشعار) ━━━━━━━━━━━━━━ */
.kj-hero-card {
    background: var(--kj-cream-bg);
    border: var(--kj-border-gold);
    border-radius: var(--kj-radius-xl);
    padding: var(--kj-space-8) var(--kj-space-7);
    position: relative;
    overflow: hidden;
    min-height: 130px;
}

.kj-hero-card__logo {
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 200px;
    height: 200px;
    opacity: 0.16;
    pointer-events: none;
    z-index: 1;
}

.kj-hero-card__content {
    position: relative;
    z-index: 2;
    text-align: right;
}

.kj-hero-card__label {
    font-size: var(--kj-text-sm);
    color: var(--kj-gray-500);
    letter-spacing: 1.5px;
    margin: 0 0 var(--kj-space-2);
}

.kj-hero-card__value {
    font-size: var(--kj-text-3xl);
    font-weight: var(--kj-weight-medium);
    color: var(--kj-dark);
    margin: 0;
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.kj-hero-card__currency {
    font-size: var(--kj-text-base);
    color: var(--kj-gold-deep);
    font-weight: var(--kj-weight-normal);
}

.kj-hero-card__hint {
    font-size: var(--kj-text-sm);
    color: var(--kj-gray-500);
    margin: var(--kj-space-2) 0 0;
}


/* ━━━ Stat Card (البطاقة الصغيرة) ━━━━━━━━━━━━━━━━━━━━━━━━━ */
.kj-stat {
    background: var(--kj-white);
    border: var(--kj-border-thin);
    border-radius: var(--kj-radius-md);
    padding: var(--kj-space-3) var(--kj-space-2);
    text-align: center;
    transition: var(--kj-transition-fast);
}

.kj-stat:hover {
    border-color: var(--kj-gold);
    transform: translateY(-1px);
}

.kj-stat__label {
    font-size: var(--kj-text-xs);
    color: var(--kj-gray-500);
    margin: 0 0 var(--kj-space-1);
    letter-spacing: 0.5px;
}

.kj-stat__value {
    font-size: var(--kj-text-xl);
    font-weight: var(--kj-weight-medium);
    color: var(--kj-dark);
    margin: 0;
}

.kj-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--kj-space-2);
}

.kj-stats-row--2 { grid-template-columns: repeat(2, 1fr); }
.kj-stats-row--4 { grid-template-columns: repeat(4, 1fr); }


/* ━━━ Header (شريط الترحيب) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.kj-header {
    background: var(--kj-white);
    border: var(--kj-border-thin);
    border-radius: var(--kj-radius-lg);
    padding: var(--kj-space-4) var(--kj-space-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--kj-space-4);
}

.kj-header__greeting {
    font-size: var(--kj-text-base);
    color: var(--kj-gray-500);
    margin: 0;
}

.kj-header__greeting-emoji {
    font-size: var(--kj-text-md);
    vertical-align: middle;
    margin-left: var(--kj-space-1);
}

.kj-header__name {
    font-size: var(--kj-text-lg);
    font-weight: var(--kj-weight-medium);
    color: var(--kj-dark);
    margin: var(--kj-space-1) 0 0;
}

.kj-header__logo {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}


/* ━━━ Buttons ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.kj-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kj-space-2);
    padding: var(--kj-space-4) var(--kj-space-6);
    border-radius: var(--kj-radius-lg);
    font-size: var(--kj-text-md);
    font-weight: var(--kj-weight-medium);
    font-family: inherit;
    cursor: pointer;
    transition: all var(--kj-transition-fast);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    border: 0;
    line-height: 1.4;
}

.kj-btn:active {
    transform: scale(0.98);
}

.kj-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* الزر الأساسي - ذهبي ناعم */
.kj-btn--primary {
    background: var(--kj-gold);
    color: var(--kj-dark);
}

.kj-btn--primary:hover:not(:disabled) {
    background: var(--kj-gold-deep);
    box-shadow: var(--kj-shadow-gold);
}

/* زر ثانوي - شفاف بإطار كحلي */
.kj-btn--secondary {
    background: var(--kj-white);
    color: var(--kj-dark);
    border: 1px solid var(--kj-dark);
}

.kj-btn--secondary:hover:not(:disabled) {
    background: var(--kj-dark);
    color: var(--kj-white);
}

/* زر ثالث - شفاف بدون إطار */
.kj-btn--ghost {
    background: transparent;
    color: var(--kj-dark);
}

.kj-btn--ghost:hover:not(:disabled) {
    background: var(--kj-gray-100);
}

/* زر خطر */
.kj-btn--danger {
    background: var(--kj-danger);
    color: var(--kj-white);
}

.kj-btn--danger:hover:not(:disabled) {
    background: var(--kj-danger-deep);
}

/* أحجام الأزرار */
.kj-btn--sm {
    padding: var(--kj-space-2) var(--kj-space-4);
    font-size: var(--kj-text-base);
    border-radius: var(--kj-radius-md);
}

.kj-btn--lg {
    padding: var(--kj-space-5) var(--kj-space-8);
    font-size: var(--kj-text-lg);
}

/* زر بعرض كامل */
.kj-btn--block {
    width: 100%;
}


/* ━━━ Inputs ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.kj-input {
    width: 100%;
    padding: var(--kj-space-4) var(--kj-space-5);
    font-size: var(--kj-text-md);
    font-family: inherit;
    color: var(--kj-dark);
    background: var(--kj-white);
    border: 1.5px solid var(--kj-gray-200);
    border-radius: var(--kj-radius-lg);
    transition: var(--kj-transition-fast);
    -webkit-appearance: none;
    appearance: none;
}

.kj-input:focus {
    outline: none;
    border-color: var(--kj-gold);
    box-shadow: 0 0 0 3px rgba(224, 199, 159, 0.15);
}

.kj-input::placeholder {
    color: var(--kj-gray-400);
}

.kj-input--error {
    border-color: var(--kj-danger);
}

.kj-input--error:focus {
    box-shadow: 0 0 0 3px var(--kj-danger-soft);
}

/* Label للحقول */
.kj-form-label {
    display: block;
    font-size: var(--kj-text-md);
    font-weight: var(--kj-weight-medium);
    color: var(--kj-dark);
    margin-bottom: var(--kj-space-2);
}

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


/* ━━━ Avatar ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.kj-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--kj-radius-full);
    background: var(--kj-cream-bg);
    border: var(--kj-border-gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--kj-text-base);
    font-weight: var(--kj-weight-medium);
    color: var(--kj-dark);
    overflow: hidden;
}

.kj-avatar--md {
    width: 44px;
    height: 44px;
    font-size: var(--kj-text-lg);
}

.kj-avatar--lg {
    width: 64px;
    height: 64px;
    font-size: var(--kj-text-2xl);
}


/* ━━━ Badge ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.kj-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--kj-space-1) var(--kj-space-3);
    border-radius: var(--kj-radius-full);
    font-size: var(--kj-text-xs);
    font-weight: var(--kj-weight-medium);
    line-height: 1.4;
}

.kj-badge--gold {
    background: var(--kj-gold-soft);
    color: var(--kj-gold-deep);
}

.kj-badge--success {
    background: var(--kj-success-soft);
    color: var(--kj-success-deep);
}

.kj-badge--danger {
    background: var(--kj-danger-soft);
    color: var(--kj-danger-deep);
}

.kj-badge--warning {
    background: var(--kj-warning-soft);
    color: var(--kj-warning-deep);
}

.kj-badge--info {
    background: var(--kj-info-soft);
    color: var(--kj-info-deep);
}


/* ━━━ List Item (عنصر قائمة كآخر الفواتير) ━━━━━━━━━━━━━━━ */
.kj-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--kj-space-3) 0;
    border-bottom: 0.5px solid var(--kj-gray-100);
    transition: padding var(--kj-transition-fast);
}

.kj-list-item:last-child {
    border-bottom: 0;
}

.kj-list-item:hover {
    padding-right: var(--kj-space-2);
}

.kj-list-item__title {
    font-size: var(--kj-text-base);
    font-weight: var(--kj-weight-medium);
    color: var(--kj-dark);
    margin: 0;
}

.kj-list-item__meta {
    font-size: var(--kj-text-sm);
    color: var(--kj-gray-500);
    margin: var(--kj-space-1) 0 0;
}

.kj-list-item__value {
    font-size: var(--kj-text-base);
    font-weight: var(--kj-weight-medium);
    color: var(--kj-dark);
    margin: 0;
    flex-shrink: 0;
}


/* ━━━ Section Title ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.kj-section-title {
    font-size: var(--kj-text-xs);
    color: var(--kj-gray-500);
    letter-spacing: 1.5px;
    margin: 0 0 var(--kj-space-3);
    font-weight: var(--kj-weight-normal);
}


/* ━━━ Section Divider ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.kj-divider {
    height: 0.5px;
    background: var(--kj-gray-100);
    margin: var(--kj-space-5) 0;
    border: 0;
}

.kj-divider--gold {
    background: var(--kj-gold);
}


/* ━━━ Container ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.kj-container {
    max-width: 480px;
    margin: 0 auto;
    padding: var(--kj-space-5);
}

.kj-container--narrow {
    max-width: 380px;
}

.kj-container--wide {
    max-width: 720px;
}


/* ─── 6. Utilities ───────────────────────────────────────── */

/* ألوان النصوص */
.kj-text-gold     { color: var(--kj-gold-deep); }
.kj-text-dark     { color: var(--kj-dark); }
.kj-text-muted    { color: var(--kj-gray-500); }
.kj-text-success  { color: var(--kj-success-deep); }
.kj-text-danger   { color: var(--kj-danger-deep); }

/* محاذاة */
.kj-text-center   { text-align: center; }
.kj-text-right    { text-align: right; }
.kj-text-left     { text-align: left; }

/* أوزان */
.kj-font-light    { font-weight: var(--kj-weight-light); }
.kj-font-normal   { font-weight: var(--kj-weight-normal); }
.kj-font-medium   { font-weight: var(--kj-weight-medium); }
.kj-font-bold     { font-weight: var(--kj-weight-bold); }

/* مسافات */
.kj-mt-1 { margin-top: var(--kj-space-1); }
.kj-mt-2 { margin-top: var(--kj-space-2); }
.kj-mt-3 { margin-top: var(--kj-space-3); }
.kj-mt-4 { margin-top: var(--kj-space-4); }
.kj-mt-5 { margin-top: var(--kj-space-5); }
.kj-mt-6 { margin-top: var(--kj-space-6); }
.kj-mt-8 { margin-top: var(--kj-space-8); }

.kj-mb-1 { margin-bottom: var(--kj-space-1); }
.kj-mb-2 { margin-bottom: var(--kj-space-2); }
.kj-mb-3 { margin-bottom: var(--kj-space-3); }
.kj-mb-4 { margin-bottom: var(--kj-space-4); }
.kj-mb-5 { margin-bottom: var(--kj-space-5); }
.kj-mb-6 { margin-bottom: var(--kj-space-6); }
.kj-mb-8 { margin-bottom: var(--kj-space-8); }

/* عرض كامل */
.kj-block { display: block; }
.kj-flex { display: flex; }
.kj-inline-flex { display: inline-flex; }
.kj-grid { display: grid; }
.kj-hidden { display: none; }


/* ─── 7. Animations ──────────────────────────────────────── */

@keyframes kj-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes kj-spin {
    to { transform: rotate(360deg); }
}

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

.kj-fade-in {
    animation: kj-fade-in 400ms var(--kj-ease-luxury) both;
}

.kj-spin {
    animation: kj-spin 700ms linear infinite;
}


/* ─── 8. Spinner Component ───────────────────────────────── */
.kj-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(48, 57, 73, 0.2);
    border-top-color: var(--kj-dark);
    border-radius: 50%;
    animation: kj-spin 700ms linear infinite;
    vertical-align: middle;
}

.kj-spinner--gold {
    border-color: rgba(224, 199, 159, 0.3);
    border-top-color: var(--kj-gold-deep);
}

.kj-spinner--white {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: var(--kj-white);
}


/* ─── 9. Logo Component (KOJAK SVG) ─────────────────────── */

/* استخدام: ضع <svg class="kj-logo"> ... </svg> */
.kj-logo {
    fill: var(--kj-dark);
    transition: fill var(--kj-transition-fast);
}

.kj-logo--gold {
    fill: var(--kj-gold);
}

.kj-logo--white {
    fill: var(--kj-white);
}


/* ─── 10. Responsive Breakpoints ────────────────────────── */

/* Tablet */
@media (min-width: 768px) {
    .kj-container {
        max-width: 720px;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .kj-container {
        max-width: 960px;
    }
}


/* ─── 11. Scrollbar Styling ─────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--kj-gold);
    border-radius: var(--kj-radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--kj-gold-deep);
}


/* ─── 12. Selection Color ───────────────────────────────── */
::selection {
    background: var(--kj-gold-soft);
    color: var(--kj-dark);
}


/* ═══════════════════════════════════════════════════════════════
   نهاية Design System
   لتعديل هوية النظام بأكملها → عدّل المتغيرات في :root أعلاه
   ═══════════════════════════════════════════════════════════════ */