/* متابع — Brand Identity V1.0 (M TRACK · Indigo Edition)
   بيتحمّل بعد app.css في وضع الشركات بس، وبيغيّر الألوان والخطوط من غير ما يلمس أي layout.
   Primary Indigo #4F46E5 · Accent Amber #F2AA4C · Readex Pro + Inter */

:root {
  --plane:      #F6F8FC;
  --surface:    #FFFFFF;
  --surface-2:  #F8FAFC;
  --surface-3:  #F1F5F9;
  --ink:        #111827;
  --ink-2:      #374151;
  --muted:      #667085;
  --grid:       #E2E8F0;
  --axis:       #CBD5E1;
  --border:     #D7DDE8;
  --border-2:   #E2E8F0;
  --shadow:     0 1px 2px rgba(17,24,39,.04), 0 6px 20px -6px rgba(17,24,39,.10);

  --brand:       #4F46E5;   /* نص وروابط على الفاتح */
  --brand-2:     #4338CA;
  --brand-soft:  #EEF2FF;
  --brand-solid: #4F46E5;   /* خلفيات الأزرار المليانة (نص أبيض) */
  --brand-hover: #4338CA;
  --accent:      #F2AA4C;   /* نقطة المتابعة — نص غامق عليها بس */
  --on-accent:   #111827;
  --info:        #075985;

  --series-1: #4F46E5;
  --series-2: #F2AA4C;
  --series-3: #10B981;
  --series-4: #0EA5E9;

  --good:     #16A34A;
  --good-ink: #166534;
  --warning:  #D97706;
  --serious:  #C2410C;
  --critical: #B42318;

  --font: "Readex Pro", "Inter", system-ui, -apple-system, "Segoe UI", "Noto Kufi Arabic", sans-serif;
  --font-head: "Readex Pro", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --plane:      #0B1020;
    --surface:    #12192B;
    --surface-2:  #1A2540;
    --surface-3:  #212C49;
    --ink:        #F4F6FF;
    --ink-2:      #D3DBEA;
    --muted:      #A2AEC4;
    --grid:       #26324D;
    --axis:       #33415C;
    --border:     #26324D;
    --border-2:   #1E2840;
    --shadow:     0 1px 2px rgba(0,0,0,.3), 0 12px 30px -8px rgba(0,0,0,.6);
    --brand:       #A5B4FC;
    --brand-2:     #C7D2FE;
    --brand-soft:  rgba(79, 70, 229, .22);
    --brand-solid: #4F46E5;
    --brand-hover: #4338CA;
    --info:        #7DD3FC;
    --series-1: #A5B4FC;
    --series-2: #F2AA4C;
    --series-3: #34D399;
    --series-4: #7DD3FC;
    --good:     #86EFAC;
    --good-ink: #86EFAC;
    --warning:  #FCD34D;
    --serious:  #FDBA74;
    --critical: #FDA4AF;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --plane:      #0B1020;
  --surface:    #12192B;
  --surface-2:  #1A2540;
  --surface-3:  #212C49;
  --ink:        #F4F6FF;
  --ink-2:      #D3DBEA;
  --muted:      #A2AEC4;
  --grid:       #26324D;
  --axis:       #33415C;
  --border:     #26324D;
  --border-2:   #1E2840;
  --shadow:     0 1px 2px rgba(0,0,0,.3), 0 12px 30px -8px rgba(0,0,0,.6);
  --brand:       #A5B4FC;
  --brand-2:     #C7D2FE;
  --brand-soft:  rgba(79, 70, 229, .22);
  --brand-solid: #4F46E5;
  --brand-hover: #4338CA;
  --info:        #7DD3FC;
  --series-1: #A5B4FC;
  --series-2: #F2AA4C;
  --series-3: #34D399;
  --series-4: #7DD3FC;
  --good:     #86EFAC;
  --good-ink: #86EFAC;
  --warning:  #FCD34D;
  --serious:  #FDBA74;
  --critical: #FDA4AF;
  color-scheme: dark;
}

/* الأزرار المليانة: إنديجو صريح ونص أبيض في الوضعين (Flat — من غير gradient) */
.btn--primary {
  background: var(--brand-solid);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand-solid) 55%, transparent);
}
.btn--primary:hover { background: var(--brand-hover); filter: none; }

/* الأرقام والمبالغ: عرض ثابت للأرقام عشان الأعمدة ماتهتزش */
.amount, td, .stat__value, .kpi__value, [dir="ltr"] { font-variant-numeric: tabular-nums; }

/* اللوجو في القايمة الجانبية: الرمز بيتعرض زي ما هو (من غير خلفية إضافية) */
.side-logo__mark { border-radius: 10px; }

/* أي خلفية براند عليها نص أبيض: الإنديجو الصريح في الوضعين (الفاتح للنص بس في الدارك) */
.seg__btn.is-on, .subtabs a.is-active, .avatar, .pic-upload::after { background: var(--brand-solid); color: #fff; }

/* اللوجو المركّب في صفحات الدخول والتسجيل: نسخة للفاتح ونسخة للغامق */
.auth__lockup { display:block; margin:0 auto 6px; width:170px; height:auto; }
.brand-on-dark { display:none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-on-dark { display:block; }
  :root:not([data-theme="light"]) .brand-on-light { display:none; }
}
:root[data-theme="dark"] .brand-on-dark { display:block; }
:root[data-theme="dark"] .brand-on-light { display:none; }