/* ==== from index.html <style id="design-system"> (v435 split) ==== */
/* ============================================================
   DESIGN SYSTEM — المرحلة 1+2 (Tokens + Component Library)
   طبقة إضافية (Additive) بالكامل: كل الأسماء تبدأ بـ --ds-* / .ds-*
   لا تستبدل أي CSS قديم · غير مُطبّقة على أي عنصر HTML قائم · جاهزة للاستخدام في المراحل القادمة.
   تتبع الوضع الداكن عبر @media وعبر [data-theme] (نفس آلية التطبيق الحالية).
   ============================================================ */
:root{
  /* Spacing — شبكة 4px */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;  --sp-8:32px;
  /* Radius */
  --ds-radius-lg:16px; --ds-radius-md:12px; --ds-radius-sm:8px; --ds-radius-pill:999px;
  /* Touch target */
  --ds-touch:44px;
  /* ===== محرّك ألوان White-label (HSL مجزّأ) — Light =====
     غيّر قيم H/S/L لأي لون دلالي فتتبدّل الهوية البصرية (والمشتقّات soft) تلقائيًا بسطر واحد. */
  --ds-primary-h:168; --ds-primary-s:76%; --ds-primary-l:36%;
  --ds-primary:hsl(var(--ds-primary-h),var(--ds-primary-s),var(--ds-primary-l));            /* = #16A085 زمردي «واضح» */
  --ds-primary-soft:hsla(var(--ds-primary-h),var(--ds-primary-s),var(--ds-primary-l),.14);
  --ds-primary-contrast:#ffffff;
   --ds-surface:#ffffff; --ds-surface-2:#F1F5F9; --ds-surface-3:#E6ECF2;
  --ds-text:#081F2E; --ds-text-secondary:#334155; --ds-muted:#64748b;
  --ds-border:rgba(8,31,46,0.10); --ds-border-strong:rgba(8,31,46,0.20);
  --ds-danger-h:6; --ds-danger-s:63%; --ds-danger-l:46%;
  --ds-danger:hsl(var(--ds-danger-h),var(--ds-danger-s),var(--ds-danger-l));                /* = #c0392b */

  --ds-success-h:144; --ds-success-s:55%; --ds-success-l:40%;
  --ds-success:hsl(var(--ds-success-h),var(--ds-success-s),var(--ds-success-l));            /* = #2e9e5b */

  --ds-warning-h:35; --ds-warning-s:79%; --ds-warning-l:44%;
  --ds-warning:hsl(var(--ds-warning-h),var(--ds-warning-s),var(--ds-warning-l));            /* = #c77f17 */

  /* Shadows — ناعمة جدًا */
  --ds-shadow-sm:0 2px 8px rgba(0,0,0,0.05);
  --ds-shadow:0 4px 16px rgba(0,0,0,0.07);
  --ds-shadow-lg:0 12px 32px rgba(0,0,0,0.10);
  /* Motion */
  --ds-ease:cubic-bezier(.25,.1,.25,1); --ds-dur:.2s;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    /* ===== محرّك ألوان White-label (HSL مجزّأ) — Dark «واضح» (كحلي + زمردي فاتح) ===== */
    --ds-primary-h:168; --ds-primary-s:58%; --ds-primary-l:50%;
    --ds-primary:hsl(var(--ds-primary-h),var(--ds-primary-s),var(--ds-primary-l));            /* زمردي فاتح للداكن */
    --ds-primary-soft:hsla(var(--ds-primary-h),var(--ds-primary-s),var(--ds-primary-l),.18);
    --ds-primary-contrast:#062018;
     --ds-surface:#0f2a3d; --ds-surface-2:#0c2838; --ds-surface-3:#1d3a49;
    --ds-text:#e6f0f4; --ds-text-secondary:#9fb6c4; --ds-muted:#6c8698;
    --ds-border:rgba(255,255,255,0.09); --ds-border-strong:rgba(255,255,255,0.16);
    --ds-danger-h:8; --ds-danger-s:81%; --ds-danger-l:69%;
    --ds-danger:hsl(var(--ds-danger-h),var(--ds-danger-s),var(--ds-danger-l));                /* = #f08070 */

    --ds-success-h:143; --ds-success-s:51%; --ds-success-l:67%;
    --ds-success:hsl(var(--ds-success-h),var(--ds-success-s),var(--ds-success-l));            /* = #7fd6a0 */

    --ds-warning-h:40; --ds-warning-s:70%; --ds-warning-l:59%;
    --ds-warning:hsl(var(--ds-warning-h),var(--ds-warning-s),var(--ds-warning-l));            /* = #e0b04e */

    --ds-shadow-sm:0 2px 8px rgba(0,0,0,0.40);
    --ds-shadow:0 8px 24px rgba(0,0,0,0.50);
    --ds-shadow-lg:0 16px 40px rgba(0,0,0,0.60);
  }
}
[data-theme="dark"]{
  /* ===== محرّك ألوان White-label (HSL مجزّأ) — Dark «واضح» (يدوي عبر [data-theme]) ===== */
  --ds-primary-h:168; --ds-primary-s:58%; --ds-primary-l:50%;
  --ds-primary:hsl(var(--ds-primary-h),var(--ds-primary-s),var(--ds-primary-l));            /* زمردي فاتح للداكن */
  --ds-primary-soft:hsla(var(--ds-primary-h),var(--ds-primary-s),var(--ds-primary-l),.18);
  --ds-primary-contrast:#062018;
   --ds-surface:#0f2a3d; --ds-surface-2:#0c2838; --ds-surface-3:#1d3a49;
  --ds-text:#e6f0f4; --ds-text-secondary:#9fb6c4; --ds-muted:#6c8698;
  --ds-border:rgba(255,255,255,0.09); --ds-border-strong:rgba(255,255,255,0.16);
  --ds-danger-h:8; --ds-danger-s:81%; --ds-danger-l:69%;
  --ds-danger:hsl(var(--ds-danger-h),var(--ds-danger-s),var(--ds-danger-l));                /* = #f08070 */

  --ds-success-h:143; --ds-success-s:51%; --ds-success-l:67%;
  --ds-success:hsl(var(--ds-success-h),var(--ds-success-s),var(--ds-success-l));            /* = #7fd6a0 */

  --ds-warning-h:40; --ds-warning-s:70%; --ds-warning-l:59%;
  --ds-warning:hsl(var(--ds-warning-h),var(--ds-warning-s),var(--ds-warning-l));            /* = #e0b04e */

  --ds-shadow-sm:0 2px 8px rgba(0,0,0,0.40);
  --ds-shadow:0 8px 24px rgba(0,0,0,0.50);
  --ds-shadow-lg:0 16px 40px rgba(0,0,0,0.60);
}
/* أداة الأرقام الجدولية للمبالغ */
.ds-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* ---------- Buttons ---------- */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--ds-touch);padding:0 var(--sp-4);border-radius:var(--ds-radius-sm);
  border:1px solid transparent;background:var(--ds-surface-2);color:var(--ds-text);
  font-family:inherit;font-weight:700;font-size:.95rem;line-height:1;cursor:pointer;
  font-variant-numeric:tabular-nums;transition:background var(--ds-dur) var(--ds-ease),transform var(--ds-dur) var(--ds-ease),box-shadow var(--ds-dur) var(--ds-ease);
  -webkit-user-select:none;user-select:none}
.ds-btn:active{transform:scale(.98)}
.ds-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.ds-btn svg{width:18px;height:18px;flex:0 0 auto}
.ds-btn-primary{background:var(--ds-primary);color:var(--ds-primary-contrast);box-shadow:var(--ds-shadow-sm)}
.ds-btn-primary:hover{filter:brightness(1.04)}
.ds-btn-ghost{background:transparent;border-color:var(--ds-border-strong);color:var(--ds-text)}
.ds-btn-ghost:hover{background:var(--ds-surface-2)}
.ds-btn-danger{background:var(--ds-danger);color:#fff;box-shadow:var(--ds-shadow-sm)}
.ds-btn-danger:hover{filter:brightness(1.04)}
.ds-btn-icon{width:var(--ds-touch);min-width:var(--ds-touch);height:var(--ds-touch);padding:0;border-radius:var(--ds-radius-md);background:var(--ds-surface-2);color:var(--ds-text)}
.ds-btn-block{display:flex;width:100%}
/* ---------- Cards ---------- */
.ds-card{background:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-radius-lg);
  padding:var(--sp-4);box-shadow:var(--ds-shadow-sm)}
.ds-stat-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);
  background:var(--ds-surface-2);border:1px solid var(--ds-border);border-radius:var(--ds-radius-md);
  padding:var(--sp-3) var(--sp-2);text-align:center}
.ds-stat-tile .ds-stat-value{font-size:1.05rem;font-weight:800;color:var(--ds-text);font-variant-numeric:tabular-nums}
.ds-stat-tile .ds-stat-label{font-size:.7rem;color:var(--ds-muted)}
.ds-list-item{display:flex;align-items:center;gap:var(--sp-3);background:var(--ds-surface);
  border:1px solid var(--ds-border);border-radius:var(--ds-radius-md);padding:var(--sp-3) var(--sp-4)}
.ds-list-item .ds-list-title{font-weight:700;color:var(--ds-text)}
.ds-list-item .ds-list-sub{font-size:.78rem;color:var(--ds-muted)}
/* ---------- Inputs ---------- */
.ds-field{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.ds-field .ds-field-label{font-size:.82rem;font-weight:700;color:var(--ds-text-secondary);display:flex;align-items:center;gap:var(--sp-2)}
.ds-input{width:100%;box-sizing:border-box;min-height:var(--ds-touch);padding:0 var(--sp-3);
  border:1px solid var(--ds-border-strong);border-radius:var(--ds-radius-sm);
  background:var(--ds-surface);color:var(--ds-text);font-family:inherit;font-size:.95rem;
  font-variant-numeric:tabular-nums;transition:border-color var(--ds-dur) var(--ds-ease),box-shadow var(--ds-dur) var(--ds-ease)}
.ds-input:focus{outline:none;border-color:var(--ds-primary);box-shadow:0 0 0 3px var(--ds-primary-soft)}
.ds-input::placeholder{color:var(--ds-muted)}
textarea.ds-input{min-height:auto;padding:var(--sp-3);resize:vertical}
/* ---------- Dialog / Overlay ---------- */
.ds-dialog-overlay{position:fixed;inset:0;z-index:100000;background:rgba(15,23,35,.5);
  display:flex;align-items:center;justify-content:center;padding:var(--sp-4)}
.ds-dialog-content{background:var(--ds-surface);border-radius:var(--ds-radius-lg);width:100%;max-width:480px;
  max-height:85vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:var(--sp-5);
  box-shadow:var(--ds-shadow-lg)}
@media(max-width:560px){ .ds-dialog-overlay{align-items:flex-end;padding:0}
  .ds-dialog-content{max-width:none;border-radius:var(--ds-radius-lg) var(--ds-radius-lg) 0 0} }
/* حاوية نافذة قياسية (Dialog) وورقة سفلية (Sheet) — أسطح موحّدة بالـtokens */
.ds-dialog{border-radius:var(--ds-radius-lg);box-shadow:var(--ds-shadow-lg)}
.ds-sheet{border-radius:var(--ds-radius-lg) var(--ds-radius-lg) 0 0;box-shadow:var(--ds-shadow-lg)}
/* ---------- Tables (تقارير مالية نظيفة، أرقام متحاذية) ---------- */
.ds-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--ds-border);border-radius:var(--ds-radius-md)}
.ds-table{width:100%;border-collapse:collapse;background:var(--ds-surface);font-variant-numeric:tabular-nums;font-size:.86rem}
.ds-table th, .ds-table .ds-th{background:var(--ds-surface-2);color:var(--ds-text-secondary);font-weight:800;font-size:.8rem;text-align:right;padding:var(--sp-3);border-bottom:1px solid var(--ds-border);white-space:nowrap}
.ds-table td, .ds-table .ds-td{padding:var(--sp-3);border-bottom:1px solid var(--ds-border);color:var(--ds-text);vertical-align:middle}
.ds-table tbody tr:last-child td, .ds-table tbody tr:last-child .ds-td{border-bottom:none}
.ds-table tbody tr:hover{background:var(--ds-surface-2)}
.ds-table .ds-num, .ds-table td.num{font-variant-numeric:tabular-nums;text-align:left}
/* ---------- Utilities (سطحية/نصية — Additive) ---------- */
.ds-surface{background:var(--ds-surface)}
.ds-surface-2{background:var(--ds-surface-2)}
.ds-text{color:var(--ds-text)}
.ds-muted{color:var(--ds-muted)}
.ds-border-c{border-color:var(--ds-border)}
/* نهاية Design System */