/* ==========================================================================
   محسوب — نظام التصميم
   أخضر كناري + أبيض. RTL أصيل. تباين يحقق WCAG AA.
   ========================================================================== */

:root {
  /* --- الهوية ---------------------------------------------------------
     الأخضر الكناري فاتح ومشبع، فهو ممتاز خلفيةً لكن كارثي نصًا على أبيض
     (تباين 1.4:1). لذلك تُفصل درجة "العلامة" عن درجة "النص":
       brand-500  للمساحات والخلفيات
       brand-700  للنصوص والأيقونات على الأبيض  (4.8:1)
       brand-900  للعناوين                        (8.1:1)
  */
  --brand-50:  #f2fbe7;
  --brand-100: #e2f6c9;
  --brand-200: #c8ee9c;
  --brand-300: #a9e267;
  --brand-400: #8fd63e;
  --brand-500: #74c520;   /* الأخضر الكناري — خلفيات فقط */
  --brand-600: #5aa016;
  --brand-700: #457a15;   /* الحد الأدنى الآمن للنص على أبيض */
  --brand-800: #386116;
  --brand-900: #2f5116;

  /* --- المحايدات ------------------------------------------------------ */
  --white: #ffffff;
  --gray-50:  #f8faf7;   /* مائل قليلًا للأخضر ليتناغم مع الهوية */
  --gray-100: #f1f4ef;
  --gray-200: #e3e8e0;
  --gray-300: #cbd3c7;
  --gray-400: #9aa595;
  --gray-500: #6f7a6a;
  --gray-600: #545e50;
  --gray-700: #3d453a;
  --gray-800: #2a3027;
  --gray-900: #1a1e18;

  /* --- الدلالات ------------------------------------------------------- */
  --success: #15803d;
  --success-bg: #dcfce7;
  --warning: #a16207;
  --warning-bg: #fef3c7;
  --danger: #b91c1c;
  --danger-bg: #fee2e2;
  --info: #1d4ed8;
  --info-bg: #dbeafe;

  /* الأرقام المالية: المدين والدائن يجب أن يُميَّزا بلا اعتماد على اللون
     وحده (عمى الألوان)، فيُضاف دائمًا وسم نصي أو موضع عمود. */
  --debit: #b91c1c;
  --credit: #15803d;

  /* --- الأسطح --------------------------------------------------------- */
  --surface: var(--white);
  --surface-sunken: var(--gray-50);
  --surface-raised: var(--white);
  --border: var(--gray-200);
  --border-strong: var(--gray-300);

  --text: var(--gray-900);
  --text-muted: var(--gray-600);
  --text-subtle: var(--gray-500);
  --text-on-brand: #10240a;   /* نص داكن على الأخضر الكناري — 9.2:1 */

  /* --- الطباعة -------------------------------------------------------- */
  --font-ar: 'IBM Plex Sans Arabic', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num: 'IBM Plex Sans Arabic', ui-monospace, 'Cascadia Mono', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  /* --- المسافات (سلّم 4px) -------------------------------------------- */
  --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;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* ظلال خفيفة: الواجهة فاتحة، والظل الثقيل عليها يبدو متسخًا */
  --shadow-sm: 0 1px 2px rgba(26, 30, 24, 0.05);
  --shadow: 0 2px 8px rgba(26, 30, 24, 0.06);
  --shadow-lg: 0 8px 24px rgba(26, 30, 24, 0.08);

  --sidebar-width: 264px;
  --topbar-height: 60px;
}

/* ==========================================================================
   الوضع الليلي — اختياري لا تلقائي
   ==========================================================================
   محسوب فاتح افتراضيًا حتى لو كان نظام المستخدم داكنًا.

   السبب محاسبي لا ذوقي: الجداول المالية الطويلة والتقارير المطبوعة صُمِّمت
   على خلفية فاتحة، والمستخدم يقارن الشاشة بالورق باستمرار. قلب الألوان
   تلقائيًا لأن هاتفه في الوضع الليلي يكسر هذا التطابق بلا أن يطلبه.

   الوضع الداكن متاح لمن يختاره صراحةً عبر [data-theme="dark"].
   -------------------------------------------------------------------- */

:root[data-theme='dark'] {
  --surface: #171a16;
  --surface-sunken: #101210;
  --surface-raised: #1e221d;
  --border: #2c322a;
  --border-strong: #3d453a;
  --text: #eef1ec;
  --text-muted: #a8b2a4;
  --text-subtle: #8b9487;
  --brand-700: var(--brand-400);
  --brand-900: var(--brand-300);
  --success: #4ade80;
  --success-bg: #14321f;
  --warning: #fbbf24;
  --warning-bg: #332611;
  --danger: #f87171;
  --danger-bg: #331717;
  --info: #60a5fa;
  --info-bg: #15243d;
  --debit: #f87171;
  --credit: #4ade80;
}

/* ==========================================================================
   الأساسيات
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-ar);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text);
  background: var(--surface-sunken);
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
}

/* الأرقام المالية بعرض ثابت حتى تصطف الخانات عموديًا في الجداول */
.num, td.num, .amount {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  direction: ltr;
  unicode-bidi: plaintext;
  text-align: end;
}

.debit  { color: var(--debit); }
.credit { color: var(--credit); }

h1, h2, h3, h4 {
  margin: 0 0 var(--space-3);
  line-height: 1.35;
  font-weight: 700;
  color: var(--text);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-base); }

a { color: var(--brand-700); text-decoration: none; }
a:hover { text-decoration: underline; }

/* حلقة تركيز واضحة على كل عنصر تفاعلي — إلزامية للوصولية */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   المكوّنات
   ========================================================================== */

.card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.5rem 1rem;
  font: inherit;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
}

.btn:hover { background: var(--gray-100); }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--brand-500);
  border-color: var(--brand-600);
  color: var(--text-on-brand);
}

.btn--primary:hover { background: var(--brand-400); }

.btn--danger {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}

.btn--ghost { background: transparent; border-color: transparent; }
.btn--sm { padding: 0.3rem 0.65rem; font-size: var(--text-xs); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  border: 1px solid transparent;
}

.badge--success { background: var(--success-bg); color: var(--success); border-color: currentColor; }
.badge--warning { background: var(--warning-bg); color: var(--warning); border-color: currentColor; }
.badge--danger  { background: var(--danger-bg);  color: var(--danger);  border-color: currentColor; }
.badge--info    { background: var(--info-bg);    color: var(--info);    border-color: currentColor; }
.badge--brand   { background: var(--brand-100);  color: var(--brand-800); border-color: var(--brand-300); }

.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border-inline-start: 3px solid;
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

.alert--success { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.alert--warning { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); }
.alert--danger  { background: var(--danger-bg);  border-color: var(--danger);  color: var(--danger); }
.alert--info    { background: var(--info-bg);    border-color: var(--info);    color: var(--info); }

/* --- الجداول --------------------------------------------------------- */

.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

thead th {
  position: sticky;
  top: 0;
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-weight: 700;
  font-size: var(--text-xs);
  text-align: start;
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}

tbody td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
}

tbody tr:hover { background: var(--surface-sunken); }

tr.is-total td {
  font-weight: 700;
  background: var(--brand-50);
  border-top: 2px solid var(--brand-300);
}

/* --- الحقول ---------------------------------------------------------- */

label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-1); }

input, select, textarea {
  width: 100%;
  padding: 0.5rem 0.7rem;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--brand-500);
  outline: 2px solid var(--brand-200);
  outline-offset: 0;
}

input[type='number'] { font-family: var(--font-num); direction: ltr; text-align: end; }

.field { margin-bottom: var(--space-4); }
.field__error { color: var(--danger); font-size: var(--text-xs); margin-top: var(--space-1); }

/* --- التخطيط --------------------------------------------------------- */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--surface-raised);
  border-inline-start: 0;
  border-inline-end: 1px solid var(--border);
  padding: var(--space-4);
}

.main { flex: 1; min-width: 0; padding: var(--space-6); }

.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .sidebar { position: fixed; inset-inline-start: -100%; z-index: 50; height: 100vh; transition: inset-inline-start .2s; }
  .sidebar.is-open { inset-inline-start: 0; }
  .main { padding: var(--space-4); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* --- بطاقة مؤشر ------------------------------------------------------ */

.kpi {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  border-top: 3px solid var(--brand-500);
}

.kpi__label { font-size: var(--text-xs); color: var(--text-muted); font-weight: 600; }
.kpi__value { font-family: var(--font-num); font-size: var(--text-2xl); font-weight: 700; direction: ltr; text-align: start; }
.kpi__hint  { font-size: var(--text-xs); color: var(--text-subtle); }

.kpi--success { border-top-color: var(--success); }
.kpi--warning { border-top-color: var(--warning); }
.kpi--danger  { border-top-color: var(--danger); }

/* --- الطباعة --------------------------------------------------------- */

@media print {
  .sidebar, .topbar, .no-print { display: none !important; }
  .shell { display: block; }
  .main { padding: 0; }
  body { background: #fff; color: #000; }
  .card { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  thead th { background: #eee; color: #000; }
  a { color: #000; text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   الشريط العلوي والقائمة الجانبية
   ========================================================================== */

.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.topbar h1 { margin: 0; font-size: var(--text-xl); }

.topbar__actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.topbar__user { font-size: var(--text-sm); color: var(--text-muted); }

/* زر القائمة يظهر على الشاشات الصغيرة فقط */
#menuToggle { display: none; }
@media (max-width: 820px) { #menuToggle { display: inline-flex; } }

.sidebar__brand {
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.sidebar__heading {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-subtle);
  margin: var(--space-4) 0 var(--space-1);
  padding-inline-start: var(--space-2);
}

.sidebar__link {
  display: block;
  padding: 0.45rem var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--text-sm);
  text-decoration: none;
  border-inline-start: 3px solid transparent;
}

.sidebar__link:hover { background: var(--surface-sunken); text-decoration: none; }

.sidebar__link.is-active {
  background: var(--brand-50);
  color: var(--brand-800);
  border-inline-start-color: var(--brand-500);
  font-weight: 600;
}

/* الروابط غير المبنية بعد: مرئية لكنها لا تُغري بالنقر */
.sidebar__link.is-disabled {
  color: var(--text-subtle);
  cursor: default;
  opacity: .55;
}

/* خمسة أعمدة لفئات أعمار الديون */
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   لوحة التحكم — إجراءات وبنود
   ========================================================================== */

.quick-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.quick-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.6rem 1.1rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  transition: border-color .15s, transform .12s, box-shadow .15s;
}

.quick-action:hover {
  text-decoration: none;
  border-color: var(--brand-500);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.quick-action__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  background: var(--brand-100);
  color: var(--brand-800);
  font-weight: 700;
}

.actions-list { display: flex; flex-direction: column; }

.action-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
  border-inline-start: 3px solid transparent;
  color: var(--text);
  text-decoration: none;
  transition: background .14s, padding-inline-start .14s;
}

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

.action-item:hover {
  text-decoration: none;
  background: var(--surface-sunken);
  padding-inline-start: var(--space-4);
}

/* شدة الحد تسبق اللون في نقل الأولوية، فتُقرأ حتى بلا تمييز ألوان */
.action-item--danger  { border-inline-start-color: var(--danger); }
.action-item--warning { border-inline-start-color: var(--warning); }
.action-item--info    { border-inline-start-color: var(--info); }

/* ==========================================================================
   لوحة التشغيل
   ========================================================================== */

.work-tabs {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.work-tab {
  padding: var(--space-2) var(--space-4);
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.work-tab:hover { text-decoration: none; color: var(--text); }

.work-tab.is-active {
  color: var(--brand-800);
  border-bottom-color: var(--brand-500);
}

/* الأعمدة تُمرَّر أفقيًا: عدد المراحل يختلف بين القطاعات، وإجبارها
   على عرض الشاشة يضغط البطاقات حتى تصير غير مقروءة. */
.board {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-3);
  align-items: flex-start;
}

.board__col {
  flex: 0 0 260px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
}

/* مراحل الإلغاء تُخفَّت: موجودة للمرجع لا للمتابعة اليومية */
.board__col--muted { opacity: .7; }

.board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}

.board__card {
  display: block;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--brand-300);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  color: var(--text);
  text-decoration: none;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}

.board__card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* التأخر يُميَّز بالحد واللون معًا — لا باللون وحده */
.board__card--late { border-inline-start-color: var(--danger); }

.board__empty {
  text-align: center;
  color: var(--text-subtle);
  font-size: var(--text-xs);
  padding: var(--space-4) 0;
}

/* جرس التنبيهات */
.bell { position: relative; }

.bell__dot {
  position: absolute;
  inset-block-start: -2px;
  inset-inline-start: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: var(--radius-full);
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}