/*
  الملف ده مسؤول عن شكل البرنامج كله.
  التصميم على طريقة الآيفون الحديثة: شريط سفلي عايم زجاجي وزوايا دايرية.
  كل المقاسات بوحدة مرتبطة بأساس الصفحة، عشان تكبير الشاشة يشتغل.
  مقاسات الكتابة مضروبة في متغير حجم النص، عشان يتحكم في الكتابة لوحدها.
  الألوان كلها متغيرات، ومفيش أي درجة أصفر في البرنامج.
*/

/* ===== ألوان المظهر الداكن، وده الافتراضي ===== */
:root {
  --tk: 1;
  --font: -apple-system, "SF Arabic", "Geeza Pro", Calibri, "Segoe UI", sans-serif;
  --bg: #0b0f17;
  --surface: #161c28;
  --surface-2: #202838;
  --line: rgba(255, 255, 255, .09);
  --text: #eef2f8;
  --muted: #98a4b8;
  --accent: #5b9dff;
  --accent-ink: #06121f;
  --in: #38d6ae;
  --flag: #ff7b93;
  --danger: #ff6b7f;
  --glass: rgba(30, 37, 51, .72);
  color-scheme: dark;
}

/* ===== ألوان المظهر الفاتح ===== */
:root[data-theme="light"] {
  --bg: #f2f4f8;
  --surface: #ffffff;
  --surface-2: #e9edf4;
  --line: rgba(15, 25, 45, .1);
  --text: #141b28;
  --muted: #5f6b7e;
  --accent: #1f6fe0;
  --accent-ink: #ffffff;
  --in: #0b8a6c;
  --flag: #c9304f;
  --danger: #c9304f;
  --glass: rgba(255, 255, 255, .72);
  color-scheme: light;
}

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

/* الحدود بتتحسب جوه العرض عشان ما يحصلش خروج عن الشاشة */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: calc(1rem * var(--tk));
  line-height: 1.5;
  /* بنحجز مكان لشريط التنقل العايم تحت */
  padding: calc(env(safe-area-inset-top) + .5rem) max(1rem, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 7rem) max(1rem, env(safe-area-inset-left));
  overflow-x: hidden;
}

main { max-width: 44rem; margin: 0 auto; }

/* الأزرار والخانات بتورث خط البرنامج */
button, input, select, textarea { font: inherit; color: inherit; }

/* الآيفون بيكبر الصفحة لو خط الخانة أقل من ١٦، فبنمنع ده */
input, select, textarea { font-size: max(16px, calc(1rem * var(--tk))); }

h1 { font-size: calc(2.1rem * var(--tk)); line-height: 1.2; margin: 0; font-weight: 800; }
h2 { font-size: calc(1.15rem * var(--tk)); margin: 0 0 .6rem; }
p { margin: 0 0 .6rem; }
svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.muted { color: var(--muted); font-size: calc(.9rem * var(--tk)); }
.center { text-align: center; margin-top: .5rem; }

/* ===== رأس الشاشة ===== */
.top { display: flex; align-items: center; justify-content: space-between; padding: .6rem 0 1rem; }

.icon-btn {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--surface-2);
  cursor: pointer;
}

/* ===== الأزرار ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.9rem; padding: .55rem 1.1rem;
  border: 0; border-radius: 1.45rem;
  background: var(--surface-2);
  font-weight: 700; cursor: pointer; text-align: center;
}
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.ghost { background: transparent; border: 1px solid var(--line); }
.btn.danger { background: transparent; color: var(--danger); border: 1px solid var(--line); }
.btn.wide { width: 100%; margin-top: .6rem; }

/* زر اختيار الملف: الخانة الأصلية مخفية والزرار هو اللي ظاهر */
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 16px; }

/* ===== الفلاتر ===== */
.chips { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .75rem; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; min-height: 2.5rem; padding: .35rem 1rem;
  border: 0; border-radius: 1.25rem;
  background: var(--surface-2); cursor: pointer;
  font-size: calc(.92rem * var(--tk));
}
.chip.on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }

.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; }

.field { display: block; margin-bottom: .6rem; }
.field > span { display: block; font-size: calc(.82rem * var(--tk)); color: var(--muted); margin-bottom: .2rem; }

/* شكل موحد لكل خانات الإدخال */
.field input:not([type="range"]), .field select, textarea {
  width: 100%; min-height: 2.75rem; padding: .45rem .75rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: .85rem;
  outline: none;
}
.field input:focus, .field select:focus, textarea:focus { border-color: var(--accent); }
.field input[type="range"] { width: 100%; accent-color: var(--accent); min-height: 2.75rem; }
textarea { min-height: 8rem; resize: vertical; margin-bottom: .2rem; }

/* ===== التنبيه والإجماليات ===== */
.banner {
  width: 100%; min-height: 2.75rem; margin-bottom: .75rem; padding: .55rem .9rem;
  border: 1px solid var(--flag); border-radius: 1rem;
  background: transparent; color: var(--flag);
  font-weight: 700; text-align: right; cursor: pointer;
}

.totals {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  background: var(--surface); border-radius: 1.4rem;
  padding: 1rem 1.1rem; margin: .3rem 0 .7rem;
}
.total-list { display: grid; gap: .7rem; min-width: 0; }
.total span { display: block; color: var(--muted); font-size: calc(.82rem * var(--tk)); }
.total strong { font-size: calc(1.55rem * var(--tk)); line-height: 1.25; font-weight: 800; display: block; }
.total small { font-size: calc(.88rem * var(--tk)); }
.in { color: var(--in); }
.count { color: var(--muted); font-size: calc(.85rem * var(--tk)); white-space: nowrap; }

.export { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .5rem; }

/* ===== قايمة العمليات ===== */
.day { font-size: calc(.86rem * var(--tk)); color: var(--muted); font-weight: 600; margin: 1rem .3rem .4rem; }
.group { background: var(--surface); border-radius: 1.25rem; overflow: hidden; }

.row {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  min-height: 3.6rem; padding: .7rem 1rem;
  border: 0; background: transparent; text-align: right; cursor: pointer;
}
.row + .row { border-top: 1px solid var(--line); }
.row:active { background: var(--surface-2); }

/* أقل عرض صفر بيخلي الأسماء الطويلة تتقص بدل ما تزق المبلغ */
.row-main { min-width: 0; flex: 1; display: block; }
.place { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub { display: block; color: var(--muted); font-size: calc(.82rem * var(--tk)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flag { display: block; color: var(--flag); font-size: calc(.8rem * var(--tk)); font-weight: 600; }

.row-amt { flex: none; text-align: left; }
.row-amt strong { display: block; font-size: calc(1rem * var(--tk)); white-space: nowrap; }
.row-amt small { display: block; color: var(--muted); font-size: calc(.78rem * var(--tk)); white-space: nowrap; }
.row-amt.in strong { color: var(--in); }

/* ===== البطاقات والاستيراد ===== */
.card { background: var(--surface); border-radius: 1.4rem; padding: 1.1rem; margin-top: .9rem; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; text-align: center; margin-bottom: .5rem; }
.stats strong { display: block; font-size: calc(1.5rem * var(--tk)); line-height: 1.2; }
.stats span { color: var(--muted); font-size: calc(.76rem * var(--tk)); }

/* نص الرسالة الأصلي بيتعرض زي ما هو وبيلف على السطور */
.raw {
  background: var(--surface-2); border-radius: .85rem; padding: .6rem .75rem;
  font-size: calc(.88rem * var(--tk)); white-space: pre-wrap; overflow-wrap: anywhere;
}
.unknown + .unknown { border-top: 1px solid var(--line); margin-top: .8rem; padding-top: .8rem; }
.row-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

details summary { cursor: pointer; font-weight: 700; min-height: 2.2rem; }
.guide ol { padding-inline-start: 1.3rem; margin: .5rem 0 0; }
.guide li { margin-bottom: .8rem; }
.guide li p { margin-bottom: .25rem; }

/* الأسماء الإنجليزية في سطر لوحدها عشان اتجاه العربي ما يتكسرش */
code {
  display: block; text-align: left; direction: ltr;
  background: var(--surface-2); border-radius: .6rem; padding: .35rem .6rem;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: calc(.84rem * var(--tk)); overflow-wrap: anywhere;
}

/* ===== حالة الكشف الفاضي ===== */
.empty { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.empty h2 { color: var(--text); }

/* ===== الشريط السفلي العايم، وده الجزء الزجاجي الوحيد ===== */
.tabbar {
  position: fixed; z-index: 20;
  left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + .6rem);
  width: min(26rem, calc(100vw - 1.5rem));
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: .3rem;
  border-radius: 2.1rem;
  background: var(--glass);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  box-shadow: 0 .6rem 1.8rem rgba(0, 0, 0, .35);
}
.tabbar button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 3.3rem; padding: .15rem;
  border: 0; border-radius: 1.8rem; background: transparent;
  color: var(--muted); cursor: pointer;
  font-size: calc(.72rem * var(--tk)); font-weight: 600;
}
.tabbar button.on { color: var(--accent); background: var(--surface-2); }

/* ===== النافذة السفلية ===== */
#sheet { display: none; position: fixed; inset: 0; z-index: 30; }
#sheet.open { display: block; }
.sheet-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.sheet-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-width: 44rem; margin: 0 auto;
  max-height: 90dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--bg);
  border-radius: 1.8rem 1.8rem 0 0;
  padding: 1.2rem 1rem calc(env(safe-area-inset-bottom) + 1.2rem);
  animation: rise .22s ease-out;
}
@keyframes rise { from { transform: translateY(1.5rem); opacity: .4; } }

/* بنحترم اختيار المستخدم لو قافل الحركة من إعدادات الجهاز */
@media (prefers-reduced-motion: reduce) { .sheet-body { animation: none; } }

.sheet-close {
  position: absolute; top: .8rem; left: .8rem;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--surface-2); cursor: pointer;
}
.sheet-body h2 { font-size: calc(1.3rem * var(--tk)); margin: .3rem 0 1rem; padding-left: 3rem; }

/* ===== الرسالة القصيرة ===== */
#toast {
  position: fixed; z-index: 40;
  left: 50%; transform: translate(-50%, 1rem);
  bottom: calc(env(safe-area-inset-bottom) + 5.6rem);
  max-width: calc(100vw - 2rem);
  padding: .55rem 1.1rem; border-radius: 1.4rem;
  background: var(--text); color: var(--bg);
  font-weight: 700; font-size: calc(.92rem * var(--tk));
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }