/* ========================================
   نظام التصميم الموحد - الأوقاف السنية
   Design System - Awqaf
   ======================================== */

/* ========================================
   1. CSS Variables - المتغيرات
   ======================================== */
:root {
    /* Primary Colors - الألوان الأساسية */
    --color-primary:        #1e475d;
    --color-primary-hover:  #163445;
    --color-primary-active: #0f2a35;
    --color-primary-light:  #e8f0f4;
    --color-primary-lighter:#d0e2eb;

    /* Secondary Colors - الألوان الثانوية */
    --color-secondary:      #2a5a73;
    --color-secondary-dark: #1e475d;
    --color-secondary-light:#eef5f8;

    /* Neutral Colors - الألوان المحايدة */
    --color-white:     #ffffff;
    --color-black:     #000000;
    --color-gray-50:   #f9fafb;
    --color-gray-100:  #f3f4f6;
    --color-gray-200:  #e5e7eb;
    --color-gray-300:  #d1d5db;
    --color-gray-400:  #9ca3af;
    --color-gray-500:  #6b7280;
    --color-gray-600:  #4b5563;
    --color-gray-700:  #374151;
    --color-gray-800:  #1f2937;
    --color-gray-900:  #111827;

    /* Semantic Colors - الألوان الدلالية */
    --color-success:       #16a34a;
    --color-success-light: #dcfce7;
    --color-warning:       #f59e0b;
    --color-warning-light: #fef3c7;
    --color-error:         #dc2626;
    --color-error-light:   #fee2e2;
    --color-info:          #0ea5e9;
    --color-info-light:    #e0f2fe;

    /* Spacing - المسافات */
    --ds-spacing-xs:  0.25rem;
    --ds-spacing-sm:  0.5rem;
    --ds-spacing-md:  1rem;
    --ds-spacing-lg:  1.5rem;
    --ds-spacing-xl:  2rem;
    --ds-spacing-2xl: 3rem;

    /* Border Radius - انحناء الحواف */
    --ds-radius-sm:   0.375rem;
    --ds-radius-md:   0.5rem;
    --ds-radius-lg:   0.75rem;
    --ds-radius-xl:   1rem;
    --ds-radius-full: 9999px;

    /* Shadows - الظلال */
    --ds-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
    --ds-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --ds-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --ds-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);

    /* Transitions - الانتقالات */
    --ds-transition-fast: 150ms cubic-bezier(0.4,0,0.2,1);
    --ds-transition-base: 200ms cubic-bezier(0.4,0,0.2,1);
    --ds-transition-slow: 300ms cubic-bezier(0.4,0,0.2,1);

    /* Typography - الطباعة */
    --ds-font-base:    'Tajawal', sans-serif;
    --ds-font-heading: 'Cairo', sans-serif;

    --ds-text-xs:   0.75rem;
    --ds-text-sm:   0.875rem;
    --ds-text-base: 1rem;
    --ds-text-lg:   1.125rem;
    --ds-text-xl:   1.25rem;
    --ds-text-2xl:  1.5rem;
    --ds-text-3xl:  1.875rem;

    --ds-font-normal:    400;
    --ds-font-medium:    500;
    --ds-font-semibold:  600;
    --ds-font-bold:      700;
    --ds-font-extrabold: 800;
}

/* ========================================
   2. Base Styles
   ======================================== */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ========================================
   3. Buttons - الأزرار
   ======================================== */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 calc(0.75rem - 1px);
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-font-medium);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--ds-radius-md);
    cursor: pointer;
    transition: box-shadow 0.15s, background-color 0.15s, border-color 0.15s;
    user-select: none;
    outline: none;
}
.btn:focus-visible {
    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
}
.btn:disabled, .btn[disabled] {
    opacity: 0.64;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    box-shadow: 0 1px 2px rgba(30,71,93,0.24), inset 0 1px 0 rgba(255,255,255,0.16);
}
.btn-primary:hover:not(:disabled) {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}
.btn-primary:active:not(:disabled) {
    background-color: var(--color-primary-active);
    border-color: var(--color-primary-active);
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.08);
}

.btn-secondary {
    background-color: var(--color-white);
    color: var(--color-gray-700);
    border-color: var(--color-gray-300);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 1px 0 rgba(0,0,0,0.04);
}
.btn-secondary:hover:not(:disabled) {
    background-color: var(--color-gray-50);
    border-color: var(--color-gray-400);
}
.btn-secondary:active:not(:disabled) {
    background-color: var(--color-gray-100);
    box-shadow: none;
}

.btn-danger {
    background-color: var(--color-error);
    color: var(--color-white);
    border-color: var(--color-error);
    box-shadow: 0 1px 2px rgba(220,38,38,0.24), inset 0 1px 0 rgba(255,255,255,0.16);
}
.btn-danger:hover:not(:disabled) { background-color: #b91c1c; border-color: #b91c1c; }
.btn-danger:active:not(:disabled) { box-shadow: inset 0 1px 0 rgba(0,0,0,0.08); }

.btn-success {
    background-color: var(--color-success);
    color: var(--color-white);
    border-color: var(--color-success);
    box-shadow: 0 1px 2px rgba(22,163,74,0.24), inset 0 1px 0 rgba(255,255,255,0.16);
}
.btn-success:hover:not(:disabled) { background-color: #15803d; border-color: #15803d; }
.btn-success:active:not(:disabled) { box-shadow: inset 0 1px 0 rgba(0,0,0,0.08); }

.btn-warning {
    background-color: var(--color-warning);
    color: var(--color-white);
    border-color: var(--color-warning);
    box-shadow: 0 1px 2px rgba(245,158,11,0.24), inset 0 1px 0 rgba(255,255,255,0.16);
}
.btn-warning:hover:not(:disabled) { background-color: #d97706; border-color: #d97706; }
.btn-warning:active:not(:disabled) { box-shadow: inset 0 1px 0 rgba(0,0,0,0.08); }

.btn-ghost {
    background-color: transparent;
    color: var(--color-gray-700);
    border-color: transparent;
}
.btn-ghost:hover:not(:disabled) { background-color: var(--color-gray-100); }
.btn-ghost:active:not(:disabled) { background-color: var(--color-gray-200); }

.btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-gray-300);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 1px 0 rgba(0,0,0,0.04);
}
.btn-outline:hover:not(:disabled) { background-color: var(--color-primary-light); border-color: var(--color-primary); }
.btn-outline:active:not(:disabled) { box-shadow: none; }

/* Sizes */
.btn-sm  { height: 2rem; padding: 0 calc(0.625rem - 1px); gap: 0.375rem; font-size: var(--ds-text-xs); }
.btn-lg  { height: 2.5rem; padding: 0 calc(0.875rem - 1px); font-size: var(--ds-text-base); }
.btn-xs  { height: 1.75rem; padding: 0 calc(0.5rem - 1px); gap: 0.25rem; font-size: var(--ds-text-xs); border-radius: var(--ds-radius-sm); }
.btn-icon { padding: 0; width: 2.25rem; height: 2.25rem; }
.btn-icon.btn-sm { width: 2rem; height: 2rem; }
.btn-icon.btn-lg { width: 2.5rem; height: 2.5rem; }

/* ========================================
   4. Cards - البطاقات
   ======================================== */
.card {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-sm);
    overflow: hidden;
}
.card-header {
    padding: var(--ds-spacing-lg);
    border-bottom: 1px solid var(--color-gray-200);
}
.card-header-title {
    font-size: var(--ds-text-lg);
    font-weight: var(--ds-font-bold);
    color: var(--color-gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--ds-spacing-sm);
}
.card-body   { padding: var(--ds-spacing-lg); }
.card-footer {
    padding: var(--ds-spacing-lg);
    border-top: 1px solid var(--color-gray-200);
    background-color: var(--color-gray-50);
}
.card-hover  { transition: all var(--ds-transition-base); }
.card-hover:hover { box-shadow: var(--ds-shadow-lg); transform: translateY(-2px); }

/* ========================================
   5. Forms - النماذج
   ======================================== */
.form-group  { margin-bottom: var(--ds-spacing-lg); }
.form-label  {
    display: block;
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-font-medium);
    color: var(--color-gray-700);
    margin-bottom: var(--ds-spacing-sm);
}
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--ds-spacing-sm) var(--ds-spacing-md);
    font-size: var(--ds-text-sm);
    line-height: 1.5;
    color: var(--color-gray-900);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--ds-radius-md);
    transition: all var(--ds-transition-base);
    font-family: var(--ds-font-base);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(30,71,93,0.12);
}
.form-input::placeholder { color: var(--color-gray-400); }
.form-error {
    display: block;
    margin-top: var(--ds-spacing-xs);
    font-size: var(--ds-text-xs);
    color: var(--color-error);
}
.form-input.error,
.form-select.error,
.form-textarea.error { border-color: var(--color-error); }

/* ========================================
   6. Tables - الجداول
   ======================================== */
.table { width: 100%; border-collapse: collapse; }
.table thead { background-color: var(--color-gray-50); border-bottom: 2px solid var(--color-gray-200); }
.table th {
    padding: var(--ds-spacing-md);
    text-align: right;
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-font-semibold);
    color: var(--color-gray-700);
}
.table td {
    padding: var(--ds-spacing-md);
    border-bottom: 1px solid var(--color-gray-200);
    font-size: var(--ds-text-sm);
    color: var(--color-gray-900);
}
.table tbody tr:hover          { background-color: var(--color-gray-50); }
.table tbody tr:last-child td  { border-bottom: none; }

/* ========================================
   7. Badges - الشارات
   ======================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-spacing-xs);
    padding: 0.25rem 0.75rem;
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-font-semibold);
    border-radius: var(--ds-radius-full);
}
.badge-primary   { background-color: var(--color-primary-light);   color: var(--color-primary);   }
.badge-secondary { background-color: var(--color-secondary-light); color: var(--color-secondary); }
.badge-success   { background-color: var(--color-success-light);   color: var(--color-success);   }
.badge-warning   { background-color: var(--color-warning-light);   color: var(--color-warning);   }
.badge-error,
.badge-danger    { background-color: var(--color-error-light);     color: var(--color-error);     }
.badge-info      { background-color: var(--color-info-light);      color: var(--color-info);      }
.badge-gray      { background-color: var(--color-gray-100);        color: var(--color-gray-700);  }

/* ========================================
   8. Alerts - التنبيهات
   ======================================== */
.alert {
    padding: var(--ds-spacing-md);
    border-radius: var(--ds-radius-md);
    border: 1px solid transparent;
    display: flex;
    align-items: flex-start;
    gap: var(--ds-spacing-md);
}
.alert-success { background-color: var(--color-success-light); border-color: var(--color-success); color: var(--color-success); }
.alert-warning { background-color: var(--color-warning-light); border-color: var(--color-warning); color: var(--color-warning); }
.alert-error   { background-color: var(--color-error-light);   border-color: var(--color-error);   color: var(--color-error);   }
.alert-info    { background-color: var(--color-info-light);    border-color: var(--color-info);    color: var(--color-info);    }

/* ========================================
   9. Icons - الأيقونات
   ======================================== */
.icon         { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-xs      { width: 1rem;    height: 1rem;    }
.icon-sm      { width: 1.25rem; height: 1.25rem; }
.icon-md      { width: 1.5rem;  height: 1.5rem;  }
.icon-lg      { width: 2rem;    height: 2rem;    }
.icon-xl      { width: 2.5rem;  height: 2.5rem;  }
.icon-wrapper { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ds-radius-md); padding: var(--ds-spacing-sm); }
.icon-wrapper-primary { background-color: var(--color-primary-light); color: var(--color-primary); }
.icon-wrapper-success { background-color: var(--color-success-light); color: var(--color-success); }
.icon-wrapper-error   { background-color: var(--color-error-light);   color: var(--color-error);   }
.icon-wrapper-warning { background-color: var(--color-warning-light); color: var(--color-warning); }
.icon-wrapper-info    { background-color: var(--color-info-light);    color: var(--color-info);    }

/* ========================================
   10. Stat Cards - بطاقات الإحصائيات
   ======================================== */
.stat-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--ds-radius-lg);
    padding: var(--ds-spacing-lg);
    box-shadow: var(--ds-shadow-sm);
    transition: all var(--ds-transition-base);
}
.stat-card:hover { box-shadow: var(--ds-shadow-md); transform: translateY(-2px); }
.stat-card-icon  {
    width: 3rem; height: 3rem;
    border-radius: var(--ds-radius-lg);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--ds-spacing-md);
}
.stat-card-value {
    font-size: var(--ds-text-3xl);
    font-weight: var(--ds-font-bold);
    color: var(--color-gray-900);
    line-height: 1;
    margin-bottom: var(--ds-spacing-xs);
}
.stat-card-label { font-size: var(--ds-text-sm); color: var(--color-gray-600); font-weight: var(--ds-font-medium); }

/* ========================================
   10b. Overview Card - بطاقة النظرة العامة
   ======================================== */
.overview-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--ds-radius-xl);
    box-shadow: var(--ds-shadow-sm);
    overflow: hidden;
    margin-bottom: var(--ds-spacing-lg);
}

.overview-card-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ds-spacing-sm);
    padding: 0.875rem var(--ds-spacing-lg);
    border-bottom: 1px solid var(--color-gray-100);
    background: var(--color-gray-50);
}

.overview-card-header-title {
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-font-semibold);
    color: var(--color-gray-700);
}

.overview-card-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: var(--color-primary-light);
    border-radius: var(--ds-radius-md);
    color: var(--color-primary);
}

.overview-card-body {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
}

.overview-stat {
    flex: 1;
    min-width: 130px;
    padding: var(--ds-spacing-lg);
    border-right: 1px solid var(--color-gray-100);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

[dir="rtl"] .overview-stat {
    border-right: none;
    border-left: 1px solid var(--color-gray-100);
}

.overview-stat:last-child {
    border-left: none;
    border-right: none;
}

.overview-stat-label {
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-font-medium);
    color: var(--color-gray-500);
    white-space: nowrap;
}

.overview-stat-value {
    font-size: 1.875rem;
    font-weight: var(--ds-font-bold);
    color: var(--color-primary);
    line-height: 1.1;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.overview-stat-value::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f02e"; /* fa-bookmark */
    font-size: 0.7rem;
    opacity: 0.55;
    color: var(--color-primary);
    flex-shrink: 0;
}

.overview-stat-value.success { color: var(--color-success); }
.overview-stat-value.warning { color: var(--color-warning); }
.overview-stat-value.error   { color: var(--color-error);   }
.overview-stat-value.info    { color: var(--color-info);    }
.overview-stat-value.gray    { color: var(--color-gray-700); }

.overview-stat-value.success::after { color: var(--color-success); }
.overview-stat-value.warning::after { color: var(--color-warning); }
.overview-stat-value.error::after   { color: var(--color-error);   }
.overview-stat-value.info::after    { color: var(--color-info);    }
.overview-stat-value.gray::after    { color: var(--color-gray-500); }

/* ── Dynamic stat icons — override ::after content per type ── */
.overview-stat-value.icon-list::after       { content: "\f03a"; } /* fa-list */
.overview-stat-value.icon-new::after        { content: "\f0f3"; } /* fa-bell */
.overview-stat-value.icon-progress::after   { content: "\f013"; } /* fa-cog */
.overview-stat-value.icon-urgent::after     { content: "\f0e7"; } /* fa-bolt */
.overview-stat-value.icon-completed::after  { content: "\f058"; } /* fa-check-circle */
.overview-stat-value.icon-closed::after     { content: "\f023"; } /* fa-lock */
.overview-stat-value.icon-cancelled::after  { content: "\f057"; } /* fa-times-circle */
.overview-stat-value.icon-pending::after    { content: "\f017"; } /* fa-clock */
.overview-stat-value.icon-mosque::after     { content: "\e04b"; } /* fa-mosque */
.overview-stat-value.icon-staff::after      { content: "\f0c0"; } /* fa-users */
.overview-stat-value.icon-ticket::after     { content: "\f3ff"; } /* fa-ticket-alt */
.overview-stat-value.icon-transfer::after   { content: "\f362"; } /* fa-exchange-alt */
.overview-stat-value.icon-violation::after  { content: "\f071"; } /* fa-exclamation-triangle */
.overview-stat-value.icon-training::after   { content: "\f19d"; } /* fa-graduation-cap */
.overview-stat-value.icon-star::after       { content: "\f005"; } /* fa-star */
.overview-stat-value.icon-calendar::after   { content: "\f073"; } /* fa-calendar-alt */
.overview-stat-value.icon-returned::after   { content: "\f0e2"; } /* fa-undo */

.overview-stat-sub {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--ds-text-xs);
    color: var(--color-gray-500);
    white-space: nowrap;
}

.overview-stat-sub .dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--ds-radius-full);
    flex-shrink: 0;
}

.overview-stat-sub .dot-success { background-color: var(--color-success); }
.overview-stat-sub .dot-warning { background-color: var(--color-warning); }
.overview-stat-sub .dot-error   { background-color: var(--color-error);   }
.overview-stat-sub .dot-info    { background-color: var(--color-info);    }
.overview-stat-sub .dot-primary { background-color: var(--color-primary); }

/* Context stat (leftmost - shows name/info) */
.overview-stat-context {
    flex: 0 0 auto;
    min-width: 160px;
    max-width: 200px;
    padding: var(--ds-spacing-lg);
    border-left: 1px solid var(--color-gray-100);
    background: var(--color-gray-50);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.375rem;
}

.overview-stat-context-label {
    font-size: var(--ds-text-xs);
    color: var(--color-gray-500);
    font-weight: var(--ds-font-medium);
}

.overview-stat-context-value {
    font-size: var(--ds-text-base);
    font-weight: var(--ds-font-bold);
    color: var(--color-gray-900);
    line-height: 1.3;
}

/* Responsive */
@media (max-width: 640px) {
    .overview-card-body { flex-wrap: wrap; }
    .overview-stat { min-width: calc(50% - 1px); flex: 0 0 calc(50% - 1px); }
    .overview-stat-context { min-width: 100%; max-width: 100%; border-left: none; border-bottom: 1px solid var(--color-gray-100); }
}

/* ========================================
   11. Pagination - الترقيم
   ======================================== */
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--ds-spacing-xs); }
.pagination-item {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.5rem; height: 2.5rem; padding: 0 var(--ds-spacing-sm);
    font-size: var(--ds-text-sm); font-weight: var(--ds-font-medium);
    color: var(--color-gray-700); background: var(--color-white);
    border: 1px solid var(--color-gray-300); border-radius: var(--ds-radius-md);
    text-decoration: none; transition: all var(--ds-transition-base);
}
.pagination-item:hover:not(.active):not(:disabled) { background: var(--color-gray-50); border-color: var(--color-gray-400); }
.pagination-item.active  { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.pagination-item:disabled { opacity: 0.5; cursor: not-allowed; }

/* ========================================
   12. Empty State - حالة فارغة
   ======================================== */
.empty-state { padding: var(--ds-spacing-2xl); text-align: center; }
.empty-state-icon {
    width: 4rem; height: 4rem;
    margin: 0 auto var(--ds-spacing-lg);
    background: var(--color-gray-100); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.empty-state-title {
    font-size: var(--ds-text-lg);
    font-weight: var(--ds-font-semibold);
    color: var(--color-gray-900);
    margin-bottom: var(--ds-spacing-sm);
}
.empty-state-description { font-size: var(--ds-text-sm); color: var(--color-gray-600); margin-bottom: var(--ds-spacing-lg); }

/* ========================================
   13. Tabs - التبويبات
   ======================================== */
.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--color-gray-200); background: var(--color-gray-50); }
.tab {
    padding: var(--ds-spacing-md) var(--ds-spacing-lg);
    font-size: var(--ds-text-sm); font-weight: var(--ds-font-medium);
    color: var(--color-gray-600); text-decoration: none;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: all var(--ds-transition-base);
}
.tab:hover       { color: var(--color-primary); background: var(--color-primary-light); }
.tab.active      { color: var(--color-primary); border-bottom-color: var(--color-primary); background: white; font-weight: var(--ds-font-semibold); }

/* ========================================
   14. Search Box - صندوق البحث
   ======================================== */
.search-box   { position: relative; width: 100%; }
.search-input {
    width: 100%; padding: var(--ds-spacing-sm) var(--ds-spacing-md);
    padding-right: 2.5rem; font-size: var(--ds-text-sm);
    color: var(--color-gray-900); background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200); border-radius: var(--ds-radius-md);
    transition: all var(--ds-transition-base);
}
.search-input:focus {
    outline: none; background: white;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(30,71,93,0.12);
}
.search-icon {
    position: absolute; right: var(--ds-spacing-md); top: 50%; transform: translateY(-50%);
    width: 1.25rem; height: 1.25rem; color: var(--color-gray-400); pointer-events: none;
}

/* ========================================
   15. Utilities - أدوات مساعدة
   ======================================== */
.text-primary-color { color: var(--color-primary); }
.text-success-color { color: var(--color-success); }
.text-warning-color { color: var(--color-warning); }
.text-error-color   { color: var(--color-error);   }
.text-info-color    { color: var(--color-info);    }
.text-muted         { color: var(--color-gray-500); }

.bg-primary-color       { background-color: var(--color-primary);       }
.bg-primary-light-color { background-color: var(--color-primary-light); }

.ds-shadow-sm { box-shadow: var(--ds-shadow-sm); }
.ds-shadow-md { box-shadow: var(--ds-shadow-md); }
.ds-shadow-lg { box-shadow: var(--ds-shadow-lg); }

.ds-rounded-sm   { border-radius: var(--ds-radius-sm);   }
.ds-rounded-md   { border-radius: var(--ds-radius-md);   }
.ds-rounded-lg   { border-radius: var(--ds-radius-lg);   }
.ds-rounded-full { border-radius: var(--ds-radius-full); }

/* ========================================
   16. Loading State - حالة التحميل
   ======================================== */
.ds-loading { position: relative; pointer-events: none; opacity: 0.6; }
.ds-loading::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 1.5rem; height: 1.5rem; margin: -0.75rem 0 0 -0.75rem;
    border: 2px solid var(--color-primary); border-radius: var(--ds-radius-full);
    border-top-color: transparent; animation: ds-spin 0.6s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ========================================
   17. Responsive
   ======================================== */
@media (max-width: 640px) { .ds-mobile-hidden { display: none; } }
@media print { .no-print { display: none !important; } }

/* ========================================
   18. Form Wizard - معالج النماذج المتعددة
   ======================================== */

/* ── Container ── */
.form-wizard {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-sm);
    overflow: hidden;
}

/* ── Progress Bar ── */
.wizard-progress {
    height: 3px;
    background: var(--color-gray-200);
    overflow: hidden;
}
.wizard-progress-bar {
    height: 100%;
    background: var(--color-primary);
    transition: width 0.35s ease;
}

/* ── Stepper (tabs) ── */
.wizard-stepper {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
}
.stepper-container {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.stepper-container::-webkit-scrollbar { display: none; }

.step-item {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.875rem 1rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    user-select: none;
    transition: background var(--ds-transition-fast);
}
.step-item:hover { background: var(--color-gray-50); }
.step-item.active { border-bottom-color: var(--color-primary); }
.step-item.completed { border-bottom-color: transparent; }

.step-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    flex-shrink: 0;
    background: var(--color-gray-100);
    color: var(--color-gray-500);
    transition: all var(--ds-transition-fast);
    position: relative;
}
.step-item.active .step-icon,
.step-item.completed .step-icon {
    background: var(--color-primary);
    color: white;
}
.step-item.completed .step-icon span { display: none; }
.step-item.completed .step-icon::before {
    content: '✓';
    position: absolute;
    font-size: 0.75rem;
    font-weight: 700;
}

.step-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-gray-500);
    transition: color var(--ds-transition-fast);
}
.step-item.active .step-label { color: var(--color-gray-900); font-weight: 600; }
.step-item.completed .step-label { color: var(--color-gray-700); }

/* ── Content Area ── */
.wizard-content {
    padding: 2rem;
    background: var(--color-white);
}

/* ── Navigation Bar ── */
.wizard-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    border-top: 1px solid var(--color-gray-200);
    background: var(--color-gray-50);
    gap: 0.75rem;
    flex-wrap: wrap;
}
.wizard-nav-group { display: flex; gap: 0.5rem; }

/* ── Form Sections ── */
.form-section { display: none; opacity: 0; }
.form-section.active {
    display: block;
    animation: wizardSectionIn 0.2s ease forwards;
}
@keyframes wizardSectionIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Section header */
.section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-gray-100);
    margin-bottom: 1.5rem;
}
.section-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--ds-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light);
    color: var(--color-primary);
    flex-shrink: 0;
}
.section-title {
    font-size: var(--ds-text-base);
    font-weight: var(--ds-font-semibold);
    color: var(--color-gray-900);
    margin: 0;
    line-height: 1.3;
}
.section-subtitle {
    font-size: var(--ds-text-xs);
    color: var(--color-gray-500);
    margin: 0.1rem 0 0;
}

/* ── Form Grid inside wizard ── */
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 768px) {
    .form-grid { grid-template-columns: repeat(2, 1fr); }
    .form-grid-3 { grid-template-columns: repeat(3, 1fr); }
}
.form-grid .full-width  { grid-column: 1 / -1; }

/* ── Form Hint Text ── */
.form-hint {
    display: block;
    margin-top: 0.375rem;
    font-size: var(--ds-text-xs);
    color: var(--color-gray-500);
}
.form-label .required { color: var(--color-error); margin-right: 0.15rem; }

/* ── Responsive ── */
@media (max-width: 768px) {
    .wizard-content { padding: 1.25rem; }
    .wizard-navigation { padding: 0.875rem 1.25rem; flex-direction: column; }
    .wizard-navigation > * { width: 100%; }
    .wizard-nav-group { width: 100%; flex-direction: column; }
    .wizard-nav-group .btn { width: 100%; justify-content: center; }
    .step-label { display: none; }
    .step-item { padding: 0.75rem 0.625rem; min-width: 2.5rem; }
}