/* ===== نظام ألوان واصل =====
   كل الألوان متغيّرات CSS، فتبديل الثيم يغيّر القيم لا الأصناف.
   الوضع الليلي هو الافتراضي، والنهاري يُفعَّل بـ data-theme="light". */

:root {
  /* الهوية */
  --primary:      #4338ca;
  --primary-soft: #4f46e5;
  --accent:       #0891b2;
  --accent-soft:  #0891b2;

  /* الحالات */
  --ok:     #10b981;
  --warn:   #f59e0b;
  --danger: #ef4444;
  --info:   #3b82f6;

  /* الأسطح — ليلي */
  --bg:        #0a0f1c;
  --bg-soft:   #0f1626;
  --card:      #131c2e;
  --border:    #1f2b42;
  --glass:     rgba(19, 28, 46, .72);
  --glass-brd: rgba(255, 255, 255, .07);
  /* سطح غائر داخل الكرت: أفتح قليلاً في الليلي، أغمق قليلاً في النهاري
     (كان bg-darkbg فوق كرت أبيض = أبيض على أبيض لا يُرى) */
  --inset:     rgba(255, 255, 255, .045);
  --inset-brd: rgba(255, 255, 255, .08);

  /* النص — ليلي */
  --t1: #f1f5f9;   /* عناوين */
  --t2: #cbd5e1;   /* نص أساسي */
  --t3: #94a3b8;   /* ثانوي */
  --t4: #64748b;   /* خافت */
  --t5: #475569;   /* شديد الخفوت */

  --shadow:    0 1px 2px rgba(0, 0, 0, .20);
  --shadow-lg: 0 6px 20px rgba(0, 0, 0, .24);
  /* إيقاع المسافات: مضاعفات 4 — يمنع الأرقام العشوائية
     اللي بتخلي الصفحة تبدو غير مرتّبة */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px;  --sp-6: 32px;

  --r-card: 16px;
  --r-el:   12px;
}

:root[data-theme="light"] {
  --primary:      #4338ca;
  --primary-soft: #4f46e5;
  --accent:       #0891b2;
  --accent-soft:  #0891b2;

  --ok:     #059669;
  --warn:   #d97706;
  --danger: #dc2626;
  --info:   #2563eb;

  --bg:        #f1f5f9;
  --bg-soft:   #e9eef5;
  --card:      #ffffff;
  --border:    #dbe3ee;
  --glass:     rgba(255, 255, 255, .82);
  --glass-brd: rgba(15, 23, 42, .08);
  --inset:     #eef2f8;
  --inset-brd: #dde5f0;

  --t1: #0f172a;
  --t2: #1e293b;
  --t3: #475569;
  --t4: #64748b;
  --t5: #94a3b8;

  --shadow:    0 1px 2px rgba(15, 23, 42, .06);
  --shadow-lg: 0 4px 16px rgba(15, 23, 42, .08);
}

/* انتقال ناعم عند التبديل، مع استثناء ما يجب أن يبقى فورياً */
html.theme-ready body,
html.theme-ready .glass,
html.theme-ready .inp,
html.theme-ready table,
html.theme-ready th,
html.theme-ready td {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

body {
  background: var(--bg);
  color: var(--t3);
}

/* البطاقة: سطح مصمت بحدّ واضح وظلّ خفيف — الوضوح قبل الزخرفة */
.glass {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--r-card);
}

/* ===== نظام الحقول =====
   تعريف واحد لكل المنصة: نفس الانحناء والحشو والحجم في كل صفحة. */
.inp,
input[type="text"].inp,
input[type="search"].inp,
input[type="password"].inp,
input[type="number"].inp,
input[type="tel"].inp,
input[type="url"].inp,
select.inp,
textarea.inp {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--t1);
  border-radius: 14px;
  padding: .8rem .95rem;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}

.inp:hover:not(:focus):not(:disabled) { border-color: var(--t5); }

.inp:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
  background: var(--card);
}

.inp::placeholder { color: var(--t5); font-weight: 500; }
.inp:disabled { opacity: .55; cursor: not-allowed; }

/* القوائم: سهم مرسوم بدل سهم النظام الذي لا يتبع الثيم */
select.inp {
  padding-inline-end: 2.1rem;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left .9rem center;
  background-size: 11px;
  cursor: pointer;
}
html[dir="rtl"] select.inp { background-position: left .9rem center; }
:root[data-theme="light"] select.inp option { background: #fff; color: #0f172a; }

textarea.inp { min-height: 92px; resize: vertical; line-height: 1.7; }

/* خانة البحث: نزيل زخارف المتصفح الافتراضية حتى لا تكسر الشكل */
input[type="search"].inp { -webkit-appearance: none; }
input[type="search"].inp::-webkit-search-decoration,
input[type="search"].inp::-webkit-search-cancel-button,
input[type="search"].inp::-webkit-search-results-button { -webkit-appearance: none; display: none; }

/* الحقل ذو الأيقونة الجانبية يحتاج فسحة لها */
.inp.pl-9  { padding-inline-start: 2.4rem; }
.inp.pl-11 { padding-inline-end: 2.9rem; }

/* عناوين الحقول */
.genlbl {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--t4);
  margin-bottom: 6px;
}

/* تعبئة تلقائية من المتصفح تفرض خلفية بيضاء — نعيدها للثيم */
.inp:-webkit-autofill,
.inp:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--t1);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-soft) inset;
  caret-color: var(--t1);
}

/* زر تبديل الثيم */
#thBtn {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  background: var(--glass); border: 1px solid var(--glass-brd);
  color: var(--t3); cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: all .2s;
}
#thBtn:hover { color: var(--t1); border-color: var(--primary); }
#thBtn.floating { position: fixed; top: 14px; left: 62px; z-index: 70; }

/* ===== ألوان دلالية تتكيّف مع الثيم =====
   درجات Tailwind الفاتحة (300/400) مصمّمة لخلفية داكنة، وتختفي على
   الأبيض. هذه الأصناف تحمل درجتين: فاتحة لليلي وغامقة للنهاري. */
.t-strong { color: var(--t1); }            /* بديل text-white */
.t-ok     { color: #6ee7b7; }
.t-info   { color: #7dd3fc; }
.t-warn   { color: #fbbf24; }
.t-danger { color: #fca5a5; }
.t-money  { color: #fbbf24; }              /* الاستهلاك والرصيد */

:root[data-theme="light"] .t-ok     { color: #047857; }
:root[data-theme="light"] .t-info   { color: #0369a1; }
:root[data-theme="light"] .t-warn   { color: #b45309; }
:root[data-theme="light"] .t-danger { color: #b91c1c; }
:root[data-theme="light"] .t-money  { color: #854d0e; }

/* الشارات: خلفية شفافة تحتاج تغميقاً في الوضع النهاري */
:root[data-theme="light"] .chip.text-green-300,
:root[data-theme="light"] .chip.t-ok     { color: #047857; background: rgba(5,150,105,.12); border-color: rgba(5,150,105,.35); }
:root[data-theme="light"] .chip.text-sky-300,
:root[data-theme="light"] .chip.t-info   { color: #0369a1; background: rgba(3,105,161,.12); border-color: rgba(3,105,161,.35); }
:root[data-theme="light"] .chip.text-yellow-300,
:root[data-theme="light"] .chip.t-warn   { color: #b45309; background: rgba(180,83,9,.12);  border-color: rgba(180,83,9,.35); }
:root[data-theme="light"] .chip.text-red-300,
:root[data-theme="light"] .chip.t-danger { color: #b91c1c; background: rgba(185,28,28,.12); border-color: rgba(185,28,28,.35); }

/* جدول: صف مميّز وحدود تناسب الخلفية الفاتحة */
:root[data-theme="light"] thead { background: var(--bg-soft) !important; }
:root[data-theme="light"] tbody tr:hover { background: rgba(15,23,42,.03) !important; }

/* الهيكل العظمي للتحميل يجب أن يُرى على الأبيض */
:root[data-theme="light"] .skel {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
}

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

/* زر أساسي واحد بدل تدرّجات متفرّقة في كل صفحة */
.bg-gradient-to-l.from-primary,
.bg-gradient-to-r.from-primary,
.bg-gradient-to-br.from-primary,
.bg-gradient-to-l.from-accent,
.bg-gradient-to-l.from-green-600,
.bg-gradient-to-l.from-accent.to-primary {
  background-image: none !important;
  background-color: var(--primary) !important;
  box-shadow: none !important;
}

/* الأيقونة الشبح خلف بطاقات الإحصاء — زخرفة تشوّش الرقم */
.statcard .ic { display: none !important; }

/* البطاقات: انحناء سخيّ وموحّد */
.rounded-3xl { border-radius: var(--r-card) !important; }
.rounded-2xl { border-radius: var(--r-el) !important; }

/* الرفع عند المرور: إزاحة خفيفة بدل ظل ثقيل */
.lift { transition: transform .16s ease, border-color .16s ease; }
.lift:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: none; }

/* عناوين الأقسام: صغيرة، هادئة، بلا أيقونات ملوّنة صارخة */
h3 > i.fas, h2 > i.fas { color: var(--t4) !important; }

/* الشريط السفلي: نفس لغة البطاقات بالضبط */
nav.glass {
  box-shadow: var(--shadow-lg);
  border-radius: var(--r-card);
}

/* الترويسة الملتصقة: حدّ سفلي بدل ظل ضبابي */
header.glass {
  border-radius: 0;
  border-inline: 0;
  border-top: 0;
  box-shadow: none;
}

/* الجداول: تباعد أوسع وحدود أخف — أهم ما يميّز المرجع */
table { border-collapse: collapse; width: 100%; }
th {
  font-size: 10.5px; font-weight: 800; color: var(--t4);
  text-align: start; padding: .85rem .8rem;
  border-bottom: 1px solid var(--border); background: transparent;
}
td {
  padding: .85rem .8rem; font-size: 11.5px;
  border-bottom: 1px solid var(--border); color: var(--t2);
}
tbody tr:last-child td { border-bottom: 0; }

/* gray-50 غير مربوط في إعداد Tailwind (المربوط 100→900) فيبقى أبيض
   مائلاً ويختفي على الخلفية الفاتحة. مستخدم 255 مرة، فيُربط هنا مرة واحدة.
   text-white يبقى كما هو — فهو على أزرار ملوّنة والأبيض صحيح عليها. */
.text-gray-50 { color: var(--t1) !important; }

/* حارس: الرسم البياني لا يتجاوز حاويته فيدفع الصفحة أفقياً */
canvas { max-width: 100% !important; }

/* ===== أزرار الإجراءات =====
   فعل أساسي واحد ملوّن في الشاشة، والباقي محايد بحدّ — هكذا يعرف
   المستخدم أين ينظر. */
.btn-main, .btn-ghost {
  padding: .78rem 1.25rem; border-radius: var(--r-el);
  font-family: inherit; font-size: 11.5px; font-weight: 800;
  cursor: pointer; transition: all .18s; border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: .45rem;
}
.btn-main  { background: var(--primary); color: #fff; }
.btn-main:hover  { filter: brightness(1.08); }
.btn-ghost { background: var(--card); color: var(--t2); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--primary); color: var(--t1); }
.btn-main:active, .btn-ghost:active { transform: scale(.96); }

/* شريط التمرير الافتراضي أبيض فاقع داخل البطاقات الداكنة */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--t5); }
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

/* سطح غائر موحّد — يستبدل bg-darkbg داخل الكروت */
.inset{background:var(--inset);border:1px solid var(--inset-brd)}

/* شارة حالة صغيرة — كانت معرّفة داخل كل صفحة على حدة */
.chip{padding:.3rem .75rem;border-radius:9999px;font-size:11px;font-weight:800;border:1px solid;display:inline-block}

/* ===== مكوّنات مشتركة — نفس تركيب التطبيق =====
   كل صفحة كانت بتعيد بناء الشريط والعنوان وصف القائمة بكلاسات خام، فتطلع
   كل صفحة بمقاس مختلف. دي التعريفات الموحّدة: الصفحة بتستعملها وخلاص.
   (أصناف جديدة فقط — ما بتلمس أي شكل قائم، فالتحويل بيتم صفحة صفحة.) */

/* الحشو والحدّ داخل العرض — المكوّنات ما بتعتمد على preflight حق Tailwind */
.wbar, .wpage, .wsec, .wrow, .wrow-body, .whero, .wempty, .wnav, .wnav a,
.tile, .iconbtn, .btn-main.block, .btn-ghost.block { box-sizing: border-box; }

/* الشريط العلوي: لوغو واسم الصفحة يمين، وأزرار أيقونات شمال */
.wbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  background: var(--card); border-bottom: 1px solid var(--border);
}
.wbar-id { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.wbar-logo {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 17px;
}
.wbar-title { font-size: 13.5px; font-weight: 900; color: var(--t1); line-height: 1.3; }
.wbar-sub   { font-size: 10.5px; font-weight: 700; color: var(--t4); }
.wbar-act { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }

/* زر أيقونة: مربّع غائر بحدّ — نفس مقاس أزرار التطبيق */
.iconbtn {
  width: 40px; height: 40px; border-radius: var(--r-el); flex-shrink: 0;
  background: var(--inset); border: 1px solid var(--inset-brd); color: var(--t3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: color .18s, border-color .18s;
}
.iconbtn:hover { color: var(--t1); border-color: var(--primary); }
.iconbtn .badge {
  position: absolute; transform: translate(-14px, -14px);
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 900; line-height: 18px; text-align: center;
}

/* جسم الصفحة: عرض واحد وإيقاع رأسي واحد في كل الصفحات */
.wpage {
  flex: 1; width: 100%; max-width: 560px; margin-inline: auto;
  padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4);
}
.wpage.wide { max-width: 1100px; }

/* عنوان قسم: اسم وتحتو سطر بيقول القسم دا شنو — زي التطبيق بالظبط */
.wsec { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.wsec h3 { font-size: 14px; font-weight: 900; color: var(--t1); margin: 0; }
.wsec p  { font-size: 10.5px; font-weight: 700; color: var(--t4); margin: 2px 0 0; }
.wsec a  { font-size: 10.5px; font-weight: 800; color: var(--primary); white-space: nowrap; margin-top: 3px; }

/* صف قائمة: أيقونة + نص + نهاية. المكوّن الأكتر تكراراً في التطبيق */
.wrow {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow);
  text-align: start; width: 100%;
}
.wrow + .wrow { margin-top: var(--sp-2); }
.wrow-body { flex: 1; min-width: 0; }
.wrow-t { font-size: 13px; font-weight: 800; color: var(--t1); }
.wrow-s { font-size: 10.5px; font-weight: 700; color: var(--t4); margin-top: 2px; }
.wrow-end { flex-shrink: 0; display: flex; align-items: center; gap: var(--sp-2); }
a.wrow, button.wrow { cursor: pointer; transition: border-color .16s, transform .16s; }
a.wrow:hover, button.wrow:hover { border-color: var(--primary); }
a.wrow:active, button.wrow:active { transform: scale(.985); }

/* مربّع الأيقونة الملوّن — اللون بيجي من --tint */
.tile {
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  background: color-mix(in srgb, var(--tint, var(--primary)) 14%, transparent);
  color: var(--tint, var(--primary));
  border: 1px solid color-mix(in srgb, var(--tint, var(--primary)) 28%, transparent);
}
.tile.sm { width: 36px; height: 36px; border-radius: 11px; font-size: 13px; }
.tint-ok     { --tint: var(--ok); }
.tint-warn   { --tint: var(--warn); }
.tint-danger { --tint: var(--danger); }
.tint-info   { --tint: var(--info); }
.tint-mute   { --tint: var(--t4); }

/* الكرت البارز: الرقم الواحد البيفتح الزبون الصفحة عشانو */
.whero {
  background: var(--primary); color: #fff;
  border-radius: var(--r-card); padding: var(--sp-5);
  box-shadow: var(--shadow-lg);
}
.whero .lbl { font-size: 11px; font-weight: 900; opacity: .85; }
.whero .big { font-size: 34px; font-weight: 900; line-height: 1.1; margin-top: 2px; }
.whero .pill {
  background: rgba(255,255,255,.16); border-radius: 999px;
  padding: 6px 12px; font-size: 11px; font-weight: 900;
}

/* حالة فاضية: أيقونة وسطر يقول شنو الناقص وزر واحد */
.wempty { text-align: center; padding: var(--sp-6) var(--sp-4); }
.wempty i { font-size: 34px; color: var(--t5); }
.wempty h4 { font-size: 13px; font-weight: 900; color: var(--t2); margin: var(--sp-3) 0 0; }
.wempty p  { font-size: 11px; font-weight: 700; color: var(--t4); margin: 6px 0 0; line-height: 1.8; }

/* زر عرض كامل — الفعل الأساسي في آخر الصفحة زي التطبيق */
.btn-main.block, .btn-ghost.block {
  width: 100%; justify-content: center; padding: .95rem 1rem; font-size: 12.5px;
}

/* الشريط السفلي */
.wnav {
  position: fixed; bottom: 12px; inset-inline: 12px; z-index: 50;
  max-width: 420px; margin-inline: auto;
  display: flex; justify-content: space-around; align-items: center;
  padding: 8px; border-radius: var(--r-card);
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
}
.wnav a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 9px; font-weight: 800; color: var(--t4);
  padding: 6px 12px; border-radius: var(--r-el); transition: color .16s;
}
.wnav a i { font-size: 15px; }
.wnav a:hover { color: var(--t2); }
.wnav a.on { background: var(--primary); color: #fff; }