@import url('./tokens.css');

/* أنماط الأساس.

   **ما في بطاقات.** ولا استدارة على حاويات، ولا ظلال، ولا شبكة بطاقات.
   الفصل بمسافة وبمحاذاة الأرقام وبس. السبب: بطاقة حوالين كل رقم بتقول
   «هدول أشياء منفصلة»، والشلال بيقول العكس تماماً — **رقم واحد
   بيتفكّك**. */

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--face-body);
  font-size: var(--size-md);
  line-height: 1.6;
  /* الأرقام اللاتينية بالمال بتحتاج تراصفاً؛ النص عربي فبيمشي RTL */
  font-variant-numeric: tabular-nums;
}

:where(a) { color: inherit; }

:where(button) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* حلقة تركيز واحدة لكل شي قابل للتفاعل — شرط أرضية الجودة */
:where(a, button, [tabindex]):focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-gap);
  border-radius: var(--r-press);
}

/* ---------- الترويسة: جواب السؤال الأول ---------- */

.due {
  display: grid;
  gap: var(--s1);
  margin-bottom: var(--s8);
}

.due__label {
  font-family: var(--face-display);
  font-size: var(--size-sm);
  font-weight: 500;
  color: var(--quiet);
  letter-spacing: 0.02em;
}

.due__amount {
  font-family: var(--face-money);
  font-size: var(--size-hero);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* العملة ثابتة دائماً (EUR وحدها)، فما بتستاهل نفس وزن الرقم */
.due__currency {
  font-size: 0.45em;
  color: var(--quiet);
  margin-inline-start: 0.25em;
  font-weight: 400;
}

.due__late {
  font-size: var(--size-sm);
  color: var(--debt);
}

.due__late[data-late='0'] { display: none; }

/* ---------- الشلال: بطل الشاشة ---------- */

.fall {
  display: grid;
  gap: var(--s3);
}

.fall__title {
  font-family: var(--face-display);
  font-size: var(--size-sm);
  font-weight: 500;
  color: var(--quiet);
  margin: 0 0 var(--s2);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
}

.stage {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  text-align: start;
  padding: var(--s2) var(--s1);
  border-radius: var(--r-press);
  transition: background var(--t-fast) var(--ease);
}

.stage:hover { background: var(--raised); }

.stage__name {
  font-size: var(--size-sm);
  color: var(--quiet);
}

/* الشريط بيبلّش من وين خلص اللي قبله — شلال حقيقي لا أعمدة متجاورة.
   `--from` و`--to` بينحطّوا من mount عبر style.setProperty. */
.stage__track {
  position: relative;
  height: 0.625rem;
  background: color-mix(in oklab, var(--line) 60%, transparent);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.stage__bar {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--from, 0%);
  inline-size: var(--span, 0%);
  background: var(--fill, var(--cool-fill));
  border-radius: var(--r-pill);
  transition: inline-size var(--t-mid) var(--ease),
              inset-inline-start var(--t-mid) var(--ease);
}

.stage__value {
  font-family: var(--face-money);
  font-size: var(--size-sm);
  font-variant-numeric: tabular-nums;
  color: var(--tone, var(--ink));
  min-inline-size: 5.5rem;
  text-align: end;
}

.stage[data-tone='warm'] { --fill: var(--warm-fill); --tone: var(--warm); }
.stage[data-tone='cool'] { --fill: var(--cool-fill); --tone: var(--cool); }
.stage[data-tone='debt'] { --fill: var(--debt-fill); --tone: var(--debt); }

/* الباقي: آخر سطر، وبيتفصل بخط لأنه نتيجة لا مرحلة */
.stage--rest {
  margin-top: var(--s2);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}

.stage--rest .stage__name,
.stage--rest .stage__value {
  font-size: var(--size-md);
  font-weight: 600;
  color: var(--warm);
}

/* ---------- الحالة الفاضية: دعوة للفعل لا مزاج ---------- */

.empty {
  color: var(--quiet);
  font-size: var(--size-sm);
  padding: var(--s6) 0;
}

/* **المقاس ما بينقص على الجوال — العمود بينقص.**

   كانت `.stage__value` بتنزل لـ`--size-xs` (١٢px) تحت ٣٠rem، يعني
   **الرقم بيصير أصغر نص بالشاشة** بالضبط على الجهاز اللي بيُسأل عليه
   السؤال. القياس بيقول إن ما في داعٍ: `1.234,56` بالمونو على ١٤px
   بتاخد ٦٧٫٢px، والعمود ٤٫٥rem = ٧٢px. فالتصغير كان بيدفع ثمناً بلا
   مقابل. */
@media (max-width: 30rem) {
  .stage { grid-template-columns: 5.5rem 1fr auto; gap: var(--s2); }
  .stage__value { min-inline-size: 4.5rem; }
}

/* ---------- القشرة ---------- */

/* **بلوك لا flex.** `.app` بتستعمل `margin: 0 auto` مع `max-width`،
   وجوّا حاوية flex بيصير الهامش التلقائي بيبلع الفراغ فبتنكمش لعرض
   محتواها — والشلال بيطلع بلا أشرطة. القشرة لازم تكون **محايدة**:
   بتضيف شريطاً فوق وبس. */
.shell { min-block-size: 100dvh; }

/* **مقاس واحد لكل الشاشات.** كانت الرئيسية بـ`max-width: 46rem`
   ومتوسّطة، والخمسة الباقيات بـ`padding` وبس — فالنص بيمتدّ لعرض
   الشاشة كامل على سطح المكتب بينما الشلال بيقف عند حدّه. سطر بعرض
   ١٢٠٠px ما بينقرا، والاختلاف بين شاشة وشاشة بيقول «هدول تطبيقان». */
.app, .form, .entries, .sync, .login {
  max-inline-size: 46rem;
  margin-inline: auto;
  padding: var(--s6) var(--s4) var(--s12);
}

.bar {
  display: flex; gap: var(--s1); align-items: center;
  padding: var(--s1) var(--s2);
  background: var(--raised); border-block-end: 1px solid var(--line);
  position: sticky; inset-block-start: 0; z-index: 1;
  /* الشريط بيلفّ بدل ما يفيض: خمسة أزرار + الحالة على ٣٩٠px بتوصل
     الحافة، والزرّ اللي بيطلع برّا الشاشة زرّ مش موجود. */
  flex-wrap: wrap;
}
.bar__gap { flex: 1; }
.bar__link {
  padding: var(--s2);
  min-block-size: 2.75rem;
  display: inline-flex; align-items: center;
  font-size: var(--size-sm);
  border-radius: var(--r-press);
}
.bar__link:hover { background: var(--ground); }
.bar__link[data-active="true"] { font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); }
.bar__state[data-pending="true"] { color: var(--warm); font-weight: 600; }
.bar__alert { color: var(--debt); font-weight: 600; }

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

/* **الحقل بيبان إنه حقل.** المتصفح بيعطي إطاراً افتراضياً بيتغيّر بين
   نظام ونظام، وبالوضع الغامق بيطلع أبيض ناصع. التنسيق الصريح بيخلّي
   الشاشة وحدة على كل جهاز — وبيوصل الحقل لـ٤٤px متل الأزرار. */
:where(input, select, textarea) {
  font: inherit;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r-press);
  min-block-size: 2.75rem;
  padding-inline: var(--s3);
  inline-size: 100%;
}
/* `:focus-visible` متل الأزرار — الحلقة للوحة المفاتيح لا للفأرة.

   > **`input[type="date"]` إله أربع محطات تاب** (يوم · شهر · سنة ·
   > زرّ التقويم)، والرابعة زرّ جوّا الظلّ فالمضيف بيرجّع `:focus=false`
   > عندها. المسح اللي بيحتفظ بآخر حالة لكل عنصر بيقرا هاد «حقل بلا
   > حلقة» — وهو **عطل بالمسح لا بالتنسيق**. التلات محطات الحقيقية
   > كلها بحلقة. */
:where(input, select, textarea):focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-gap);
  border-color: var(--quiet);
}
/* الأرقام والتواريخ بالمونو — بتتراصف وبتنقرا كبيانات لا كنثر */
input[name="amount"], input[type="date"], .conflict__third input {
  font-family: var(--face-money);
  font-variant-numeric: tabular-nums;
}
input[type="color"] { inline-size: 4rem; padding: var(--s1); }
input[type="checkbox"] { inline-size: 1.25rem; min-block-size: 1.25rem; accent-color: var(--ink); }

.form { display: flex; flex-direction: column; gap: var(--s4); }
.form__title, .entries__title, .sync__head h1, .login h1 {
  font-family: var(--face-display);
  font-size: var(--size-lg);
  font-weight: 600;
  margin: 0;
}
.form__field { display: flex; flex-direction: column; gap: var(--s1); }
.form__field > span { font-size: var(--size-sm); color: var(--quiet); font-weight: 500; }
.form__actions { display: flex; gap: var(--s2); margin-block-start: var(--s2); }
.form__error, .shell__error, .login__error { color: var(--debt); font-weight: 500; }
.shell__error { padding-inline: var(--s4); }

.login { display: flex; flex-direction: column; gap: var(--s4); }
.login form { display: flex; flex-direction: column; gap: var(--s4); }
.login label { display: flex; flex-direction: column; gap: var(--s1); }
.login label > span { font-size: var(--size-sm); color: var(--quiet); font-weight: 500; }
.login__hint { color: var(--quiet); font-size: var(--size-sm); }

.sync { display: flex; flex-direction: column; gap: var(--s4); }
.sync__head { display: flex; flex-direction: column; gap: var(--s1); }
.sync__state { color: var(--quiet); margin: 0; }
.sync__facts {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4);
  margin: 0; padding-block: var(--s3);
  border-block: 1px solid var(--line);
}
.sync__facts dt { color: var(--quiet); font-size: var(--size-sm); }
.sync__facts dd {
  margin: 0; font-family: var(--face-money); font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.sync__actions, .conflict__choices, .conflict__third { display: flex; flex-wrap: wrap; gap: var(--s2); }
.sync__conflicts { display: flex; flex-direction: column; gap: var(--s4); }
.sync__clear { color: var(--quiet); margin: 0; }
.conflict {
  display: flex; flex-direction: column; gap: var(--s3);
  border-inline-start: 2px solid var(--debt);
  padding-inline-start: var(--s3);
}
.conflict__what { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; }
.conflict__entity { font-family: var(--face-money); font-weight: 600; }
.conflict__where { color: var(--quiet); font-size: var(--size-sm); margin: 0; }
.conflict__third { align-items: end; }
.conflict__third label { display: flex; flex-direction: column; gap: var(--s1); flex: 1; }
.conflict__third label > span { font-size: var(--size-sm); color: var(--quiet); }

.form__check { display: flex; gap: var(--s2); align-items: center; }
.form__check input { inline-size: auto; }
.backup__pass { display: contents; }
.backup__warn {
  color: var(--debt); font-weight: 600; margin: 0;
  border-inline-start: 2px solid var(--debt); padding-inline-start: var(--s3);
}
.backup__hint, .backup__note { color: var(--quiet); font-size: var(--size-sm); margin: 0; }

/* ---------- الأزرار — عيلة وحدة لكل الشاشات ----------

   `:where(button)` فوق بتجرّد كل زرّ من شكله، وهاد كان مقصوداً وقت
   القشرة الهيكلية. مع م٥-٣ صار في **ثلاثة أدوار** لازم تنميّز:
   المضي (دفعت · احفظ) · الثانوي (رجوع) · الهدّام (احذف).

   **والتمييز بالوزن والحدود لا باللون** — اللون بهالنظام بيرمّز
   التدفّق (ADR-021)، فزرّ أخضر «للنجاح» بيكسر المحور. الاستثناء
   الوحيد الهدّام: `--debt` هو لون «الشي اللي بتحاربه»، والحذف منه.

   وارتفاع ٤٤px مش تجميلاً — هو أصغر هدف لمس موصى فيه، والتطبيق
   بينسأل عليه وأنت واقف بالدكانة (ب‑٦). */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s1);
  min-block-size: 2.75rem;
  padding-inline: var(--s3);
  border-radius: var(--r-press);
  font-size: var(--size-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.btn--go { background: var(--ink); color: var(--ground); font-weight: 600; }
.btn--go:hover { background: var(--quiet); }
.btn--go:disabled { background: var(--line); color: var(--quiet); cursor: default; }

.btn--quiet { color: var(--quiet); border: 1px solid var(--line); }
.btn--quiet:hover { background: var(--raised); color: var(--ink); }

/* **الرابط مش زرّاً ناقصاً — دور تالت.** الفعل النادر والهدّام
   (احذف) بيقعد جوّا سطر السياق، وهدف لمس ٤٤px هناك بيفجّر ارتفاع
   السطر ويعطي الحذف وزن «دفعت». ٢٤px هي العتبة الدنيا بـWCAG 2.2
   §2.5.8، والهدف الأصغر **بصالحنا** هون: الضغطة الغلط بتحذف بنداً. */
.link {
  padding: var(--s1) var(--s2);
  min-block-size: 1.5rem;
  font-size: var(--size-sm);
  border-radius: var(--r-press);
}
.link--danger { color: var(--debt); }
.link--danger:hover { background: var(--raised); text-decoration: underline; }

/* ---------- البنود ---------- */

.entries { display: flex; flex-direction: column; gap: var(--s4); }
.entries__list { display: flex; flex-direction: column; }

/* **سطران بثلاثة أعمدة، والفعل بيمتدّ عليهم.**

   كانت ستة أعمدة بسطر واحد: على ٣٩٠px بيصير عرض الصفحة ٥٠٦px
   و**زرّا «دفعت» و«احذف» بينطلعوا برّا الشاشة** — لا بينضغطوا ولا
   بينشافوا. مقيس لا مقدَّر.

   والشكل الأول للإصلاح (عمودان × سطرين) حلّ الفيض وخلق عطلاً تاني:
   الفعل تحت المبلغ، فارتفاع السطر قفز فوق ١٦٠px وصار عشرة بنود عشرة
   كتل سودا. **اللقطة هي اللي مسكته** — نفس درس المرحلة ٤.

   الآن: عمود مرن للاسم، عمود للمبلغ، وعمود للفعل بيمتدّ على السطرين
   فبينحاذى بمنتصفهم. الارتفاع بيرجع لسطرين نص. */
.entry {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    'label money act'
    'meta  meta  act';
  align-items: center;
  gap: var(--s1) var(--s3);
  padding-block: var(--s3);
  border-block-end: 1px solid var(--line);
}

.entry__label { grid-area: label; font-weight: 500; align-self: end; }
.entry__act { grid-area: act; align-self: center; }

.entry__money {
  grid-area: money;
  align-self: end;
  font-family: var(--face-money);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  justify-self: end;
}
.entry__cur { font-size: 0.75em; color: var(--quiet); margin-inline-start: 0.25em; font-weight: 400; }

/* الدخل دافي — نفس محور الشلال، فالسطر بيقول «داخل» بلا ما يكتبها */
.entry[data-tone="warm"] .entry__money { color: var(--warm); }

.entry__meta {
  grid-area: meta;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2);
  font-size: var(--size-sm); color: var(--quiet);
  /* «احذف» بيقعد بآخر السطر لا بجنب التصنيف — الفعل بيتبع المعلومة */
  justify-content: start;
}
.entry__meta .link { margin-inline-start: auto; }
.entry__date { font-variant-numeric: tabular-nums; }
.entry__due { font-weight: 600; }
.entry[data-due="late"] .entry__due { color: var(--debt); }

/* **المدفوع بيهدا، ما بينطمس.** كان `opacity: 0.55` على السطر كله،
   وهاد بيهبط تباين المبلغ لـ٢٫٤:١ تقريباً — تحت العتبة، وبلا ما
   تشوفه قاعدة التباين لأنه شفافية لا لون. البند المدفوع نتيجة
   بتنقرا، مش شي بينتشال من الشاشة. */
.entry[data-paid="true"] .entry__label,
.entry[data-paid="true"] .entry__money { color: var(--quiet); }
.entry__done { font-weight: 600; }

/* ---------- حالة الانتظار ----------

   كان `busy` بيعطّل الزرّ وبس: الضغطة بتصير بلا أثر مرئي، والمستخدم
   بيضغط تاني. الخيط بيقول «عم يشتغل» **بلا ما يقطع** — ولا نافذة ولا
   قفل شاشة (Offline.md: «ما في نافذة بتقطعك»).

   وتحت `prefers-reduced-motion` بيصير خطاً ثابتاً بعرض الشاشة: نفس
   المعلومة بلا حركة. الحركة اللي ما إلها بديل ساكن بتصير حاجزاً. */
[aria-busy="true"]::before {
  content: '';
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: var(--ink);
  transform-origin: inline-end;
  animation: wait-line 1.2s var(--ease) infinite;
  z-index: 2;
}

@keyframes wait-line {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  [aria-busy="true"]::before { animation: none; }
}

/* ---------- معالج ما بعد الاستيراد ----------

   نفس بنية سطر البند: اسم ومبلغ فوق، وسياق تحت، وفعل بيمتدّ على
   السطرين. الاقتراح **سطر قرار** لا بطاقة — والبطاقة بتقول «هدول
   أشياء منفصلة» بينما هدول كلهم نفس السؤال. */
.wizard { display: flex; flex-direction: column; gap: var(--s4); }
.wizard__title {
  font-family: var(--face-display);
  font-size: var(--size-lg); font-weight: 600; margin: 0;
}
.wizard__lede { color: var(--quiet); margin: 0; font-size: var(--size-sm); }
.wizard__group {
  font-family: var(--face-display);
  font-size: var(--size-md); font-weight: 600; color: var(--quiet);
  margin: var(--s4) 0 0;
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
}
.wizard__list { display: flex; flex-direction: column; }

.prop {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    'what money acts'
    'why  why   acts';
  align-items: center;
  gap: var(--s1) var(--s3);
  padding-block: var(--s3);
  border-block-end: 1px solid var(--line);
}
.prop__what { grid-area: what; font-weight: 500; align-self: end; }
.prop__money {
  grid-area: money; align-self: end; justify-self: end;
  font-family: var(--face-money); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.prop__why {
  grid-area: why;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2);
  font-size: var(--size-sm); color: var(--quiet);
}
/* اسم الدين أو وصف القالب — هو **جواب السؤال**، فبياخد وزناً */
.prop__target { color: var(--ink); font-weight: 500; }
.prop__period { font-variant-numeric: tabular-nums; }
.prop__acts { grid-area: acts; display: flex; gap: var(--s1); align-self: center; }
.wizard__block { display: flex; flex-direction: column; gap: var(--s2); }
/* «لأ» كلمتان بحرفين — بلا حدّ أدنى بتطلع مربعاً مضغوطاً بيبان مكسوراً */
.btn--no { min-inline-size: 3rem; }

/* ---------- شريط الشهر ---------- */
/* الزرّان بحجم لمس كامل (٤٤px) — السهم حرف واحد، وبلا حدّ أدنى بيصير
   هدفاً بحجم الحرف على شاشة ٣٩٠px. */
.months {
  display: flex; align-items: center; gap: var(--s2);
  margin-block-end: var(--s3);
}
.months__step {
  min-inline-size: 2.75rem; min-block-size: 2.75rem;
  border: 1px solid var(--line); border-radius: var(--r-press);
  background: var(--raised); color: var(--ink);
  font: inherit; font-size: var(--size-lg); line-height: 1;
  cursor: pointer;
}
.months__step:hover { border-color: var(--ink); }
.months__now { flex: 1; text-align: center; font-weight: 600; }
.months__here { color: var(--quiet); font-size: var(--size-sm); }