:root{
  --primary:#1e3a8a;      /* نفس نيفي ZE */
  --primary-dark:#152a63;
  --gold:#c9a84c;
  --gold-text:#8a6d1f;    /* نص زرار "تصدير" — كان ثابت بره نظام المتغيرات، بقى متغيّر عشان يتظبط في الليلي */
  --violet:#8a5cf6;       /* لون زرار "معلومات" (حدود) */
  --violet-text:#5b3fae;  /* نص زرار "معلومات" — نفس سبب --gold-text */
  --success:#1f9d55;
  --error:#d64545;
  --warning:#d98c1f;
  --bg:#f3f5f9;
  --card:#ffffff;
  --text:#1c2333;
  --muted:#707b8f;
  --border:#e1e5ec;
  --radius:12px;
  --date-scheme:light;
}
/* نفس قيم الوضع الليلي الحقيقية من نظام ZE الأساسي — ألوان أهدأ احترافية بدل التشبّع الزائد */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14161a;
    --card:#1d2026;
    --text:#e7e9ec;
    --muted:#a0a6b0;
    --border:#2f343d;
    --border-strong:#454c58;
    /* 🔴 إصلاح باج حي: --primary/--primary-dark كانت فاضلة نيفي غامق (#1e3a8a/#152a63) حتى في
       الوضع الليلي — نص/أرقام بلون نيفي غامق فوق خلفية شبه سودة (#14161a/#1d2026) كانت شبه
       مختفية (أرصدة الحسابات، مبالغ الكروت، شيبات "المبلغ"...). نفس فئة باج 738 في نظام ZE
       الأساسي. الحل: أزرق أفتح وأوضح مخصّص للوضع الليلي بس، صفر تغيير في الوضع النهاري. */
    --primary:#6d93f5;
    --primary-dark:#4d74e0;
    --gold-text:#e3c173;
    --violet:#a98cf8;
    --violet-text:#b79cf7;
    --success:#52c46a;
    --error:#f4818a;
    --warning:#e3a848;
    --shadow-sm:0 1px 2px rgba(0,0,0,.45);
    --shadow-md:0 2px 8px rgba(0,0,0,.55);
    --date-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#14161a;
  --card:#1d2026;
  --text:#e7e9ec;
  --muted:#a0a6b0;
  --border:#2f343d;
  --border-strong:#454c58;
  --primary:#6d93f5;
  --primary-dark:#4d74e0;
  --gold-text:#e3c173;
  --violet:#a98cf8;
  --violet-text:#b79cf7;
  --success:#52c46a;
  --error:#f4818a;
  --warning:#e3a848;
  --shadow-sm:0 1px 2px rgba(0,0,0,.45);
  --shadow-md:0 2px 8px rgba(0,0,0,.55);
  --date-scheme:dark;
}
html{font-size:calc(16px * var(--app-font-scale, 1))}
*{box-sizing:border-box}
/* إخفاء شريط التمرير في كل مكان مع إبقاء السكرول شغال */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{width:0;height:0;display:none}
body{
  margin:0;font-family:"Cairo",sans-serif;background:var(--bg);color:var(--text);
  min-height:100vh;
}
.screen{min-height:100vh}
.muted{color:var(--muted);font-size:13px}

/* ===== شارة ZE الذهبية ===== */
/* طلب صريح: لوجو العميل الحقيقي (frontend/assets/logo.png) بدل الحرفين "ZE" المرسومين بـCSS —
   نفس الدايرة في كل مكان، الصورة بتملا الدايرة بالكامل (object-fit:cover). */
.ze-badge{
  width:52px;height:52px;border-radius:50%;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.ze-badge-img{width:100%;height:100%;object-fit:cover;display:block}
.ze-badge.small{width:40px;height:40px;margin-bottom:10px}
.ze-badge.tiny{width:32px;height:32px}
.ze-badge.topbar-logo{width:38px;height:38px}
.ze-badge.xl{width:72px;height:72px;margin-bottom:18px}

/* ===== شاشة الدخول (تصميم احترافي ملوّن بعمودين) ===== */
.login-screen{
  display:flex;align-items:stretch;justify-content:center;
  background:linear-gradient(135deg,#eef1fb 0%,#f7f3fb 100%);
}
.login-split{
  display:flex;width:100%;max-width:1120px;margin:auto;min-height:600px;
  border-radius:22px;overflow:hidden;box-shadow:0 30px 80px rgba(60,40,120,.18);
}
.login-form-panel{
  flex:1;background:#fff;display:flex;align-items:center;justify-content:center;padding:40px;
}
.login-card{width:100%;max-width:320px}
.login-card-head{display:flex;align-items:center;gap:12px}
.login-card form{text-align:right}
.login-card label{display:block;font-size:13px;color:var(--muted);margin:12px 0 4px}
.login-card input{
  width:100%;padding:10px 12px;border:1px solid #e4e6f5;border-radius:9px;
  font-family:inherit;font-size:14px;background:#f6f7fd;color:var(--text);
}
.error-text{color:var(--error);font-size:13px;min-height:18px;margin-top:6px}
.login-card .btn-primary{
  background:linear-gradient(90deg,#6a4cf0,#c23fb0);border:none;
}
.login-card .btn-primary:hover{filter:brightness(1.07)}

.login-brand-panel{
  flex:1.15;position:relative;overflow:hidden;color:#fff;padding:52px 48px;
  background:linear-gradient(150deg,#4c3bd6 0%,#6d3fc9 45%,#9b3fb8 100%);
  display:flex;align-items:center;
}
.blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.35}
.blob-1{width:220px;height:220px;background:#ffffff;top:-60px;right:-60px;opacity:.12}
.blob-2{width:260px;height:260px;background:#ffb3e0;bottom:-90px;left:-70px;opacity:.18}
.brand-inner{position:relative;z-index:1;width:100%}
.login-brand-panel h1{font-size:28px;margin:0 0 10px;letter-spacing:.3px}
.login-brand-panel p{margin:0 0 22px;color:#ece7fb;font-size:14px}

.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.feature-tile{
  display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:12px;
  backdrop-filter:blur(4px);
}
.feature-tile .feature-icon{
  width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;
}
.feature-tile b{display:block;font-size:12.5px}
.feature-tile small{display:block;font-size:11px;color:#e6defa;opacity:.85}

.mock-dashboard{background:rgba(20,15,45,.3);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:14px}
.mock-kpis{display:flex;gap:8px;margin-bottom:12px}
.mock-kpi{flex:1;border-radius:9px;padding:8px 10px;font-size:11px;color:#fff}
.mock-kpi b{display:block;font-size:15px;margin-top:2px}
.mock-kpi-gold{background:linear-gradient(135deg,#e2a43a,#c9862a)}
.mock-kpi-green{background:linear-gradient(135deg,#2bb673,#1f9d55)}
.mock-kpi-blue{background:linear-gradient(135deg,#4a6cf0,#3453c9)}
.mock-bars{display:flex;align-items:flex-end;gap:7px;height:60px}
.mock-bars span{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#ffb3e0,#8a5cf6)}
.brand-footer{margin:16px 0 0;font-size:11px;color:#dcd3f5;opacity:.8}

@media (max-width:860px){
  .login-split{flex-direction:column;border-radius:0;min-height:100vh}
  .login-brand-panel{padding:34px 26px;order:-1}
  .feature-grid{grid-template-columns:1fr 1fr}
}

.btn-primary{
  width:100%;margin-top:14px;padding:11px;border:none;border-radius:8px;
  background:var(--primary);color:#fff;font-weight:700;font-size:15px;cursor:pointer;
  transition:background .15s;
}
.btn-primary:hover{background:var(--primary-dark)}
.btn-ghost{
  background:transparent;border:1px solid var(--border);color:var(--text);
  border-radius:8px;padding:7px 14px;cursor:pointer;font-family:inherit;
}
.btn-ghost:hover{background:var(--border)}
/* طلب صريح: الأزرار تبقى احترافية بلمسة عمق خفيفة (مش مسطّحة تمامًا) + حواف أنعم تتناسق مع
   شكل الأيقونات الدائرية الجديدة — ظل خفيف ثابت بدل ما يظهر بس وقت hover */
.btn-sm{
  padding:5px 10px;font-size:13px;border-radius:9px;border:1px solid var(--border);background:var(--card);
  cursor:pointer;font-family:inherit;color:var(--text);font-weight:600;transition:transform .1s,box-shadow .1s;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.btn-sm:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.14)}
.btn-danger{color:var(--error);border-color:var(--error);background:color-mix(in srgb, var(--error) 8%, var(--card))}
.btn-approve,.btn-success{color:var(--success);border-color:var(--success);background:color-mix(in srgb, var(--success) 8%, var(--card))}
.btn-export{color:var(--gold-text);border-color:var(--gold);background:color-mix(in srgb, var(--gold) 14%, var(--card))}
.btn-info{color:var(--violet-text);border-color:var(--violet);background:color-mix(in srgb, var(--violet) 10%, var(--card))}
.btn-toggle-on{color:var(--warning);border-color:var(--warning);background:color-mix(in srgb, var(--warning) 10%, var(--card))}
.btn-toggle-off{color:var(--success);border-color:var(--success);background:color-mix(in srgb, var(--success) 10%, var(--card))}

/* ===== زرار التصدير الاحترافي (menu مخصّص بدل <select> خام)، نقطة واحدة: exportChoiceHtml/wireExportDropdown ===== */
.ze-export-dd{position:relative;display:inline-block}
/* طلب صريح: نفس حجم زرار "+ تذكير جديد" (.btn-primary) بالظبط — بس بلون مميّز لفعل التصدير بدل النيفي */
.ze-export-toggle{background:linear-gradient(90deg,var(--gold),#e0bd63);color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.ze-export-toggle:hover{filter:brightness(1.06)}
.ze-export-caret{font-size:10px;margin-right:2px;opacity:.85}
.ze-export-menu{
  display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:50;min-width:150px;
  background:var(--card);border:1px solid var(--border);border-radius:11px;
  box-shadow:0 8px 24px rgba(0,0,0,.16);padding:6px;overflow:hidden;
}
.ze-export-dd.open .ze-export-menu{display:block}
.ze-export-item{
  display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border:none;background:none;
  border-radius:8px;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--text);
  text-align:right;transition:background .12s;
}
.ze-export-item:hover{background:var(--bg)}
.ze-export-ic{
  width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  flex:none;
}
.ze-export-ic svg{display:block}
.ze-export-ic-xlsx{background:color-mix(in srgb, #1D6F42 16%, var(--card))}
.ze-export-ic-pdf{background:color-mix(in srgb, #D63737 14%, var(--card))}

/* ===== حاسبة الالتزامات — ترتيب احترافي بخطوات واضحة (طلب صريح "ترتيبه بطريقة احترافية") ===== */
.calc-step{
  border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:12px;background:var(--bg);
}
.calc-step-head{font-weight:800;font-size:14.5px;margin-bottom:8px;color:var(--primary)}
.calc-items-box{
  max-height:420px;overflow-y:auto;border:1px solid var(--border);border-radius:10px;
  background:var(--card);padding:4px;
}
.calc-item-row{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;
  transition:background .12s;
}
.calc-item-row:hover{background:var(--bg)}
.calc-item-row:not(:last-child){border-bottom:1px solid var(--border)}
.calc-item-title{flex:1 1 auto;font-weight:700;display:flex;flex-direction:column;gap:2px}
.calc-period-active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ===== اختيار الشركة ===== */
/* 🔴 إصلاح باج حي: `.ze-badge` عنصرها `display:flex` (مش inline)، فـ`text-align:center` بتاعة
   `.picker-wrap` ملهاش أي تأثير عليها — كانت بتفضل ملزّقة في حافة البداية (يمين في RTL) بدل ما
   تتوسّط فوق "اختر الشركة"، فحاسّة إنها طايرة في الركن لوحدها. `margin:0 auto` بتوسّطها فعليًا. */
.picker-wrap{max-width:640px;margin:60px auto;text-align:center}
.picker-wrap .ze-badge{margin:0 auto 14px}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:20px}
.pick-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;cursor:pointer;font-weight:700;font-size:16px;transition:transform .12s,box-shadow .12s;
}
.pick-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.1);border-color:var(--primary)}

/* ===== الشاشة الرئيسية — واجهة فاتحة أنيقة بسايدبار بنفسجي (استلهام من مرجع العميل) ===== */
.app-screen{display:flex;flex-direction:column;height:100vh;max-height:100vh;overflow:hidden;background:var(--bg)}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--card);color:var(--text);padding:12px 24px;flex-shrink:0;
  border-bottom:1px solid var(--border);
}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:10px}
.topbar .muted{color:var(--muted)}
.company-name{font-weight:700}
#branch-switcher{
  padding:6px 10px;border-radius:8px;border:1px solid var(--border);font-family:inherit;background:var(--card);color:var(--text);
}
.topbar .btn-ghost{color:var(--text);border-color:var(--border)}
.topbar .btn-ghost:hover{background:var(--bg)}

/* 🔴 إصلاح باج حي مزدوج (طلبات صريحة متتالية):
   (1) المحتوى يفضل ثابت تمامًا، صفر تحريك حتى عند الطيّ الدائم — القائمة الجانبية out-of-flow
   (position:absolute) طول الوقت على الديسك توب.
   (2) `.content` يتوسّط بالظبط في الشاشة الكاملة، مش بس في المساحة المتبقية بعد خصم عرض
   القائمة — لو حجزنا المساحة بـpadding-right على `.layout` نفسها، الـmax-width+margin:auto
   بتتمركز جوّه مسار (track) مش متماثل حول وسط الشاشة الحقيقي (فرق واضح بين الفراغ يمين
   ويسار لما الشاشة عريضة)، فده كان بيبين "مش متوسّط". الحل: `.layout` بلا أي padding (تاخد
   العرض الكامل)، والتوسيط (`margin:0 auto`) بيحصل على أساس العرض الكامل فعلًا (متماثل تمامًا
   حول وسط الشاشة)، وحجز مكان القائمة بقى `padding-right` **جوّه `.content` نفسها**
   (`box-sizing:border-box` يحافظ على max-width الحقيقي) — بيدّي نفس نتيجة عدم التصادم مع
   القائمة، بس التوسيط بيحصل قبل الحجز مش بعده. */
/* طلب صريح: المحتوى متوسّط بنفس الشكل بالظبط لو القائمة مفرودة أو مطوية — حجز المساحة
   (padding-right) ثابت دايمًا بعرض القائمة **المفرودة الكاملة** (236px) بغض النظر عن حالة
   الطيّ الفعلية؛ القائمة المطوية (60px) بتاخد جزء بس من نفس المساحة المحجوزة فايل، فمركز
   التوسيط نفسه (ومكان المحتوى بالكامل) صفر تغيير بين الحالتين. */
.layout{display:flex;flex:1;min-height:0;position:relative}
/* ⚠️ طلب صريح أخير: "خليها زي النظام اللي سويناها قبل كده" (نظام ZE الأساسي) — رجّعنا نفس
   أسلوبه بالظبط: `max-width` ثابت + `margin:0 auto` (مش edge-to-edge كامل زي المحاولة اللي
   قبل كده). الرقم (1280px) نفس القيمة المستخدمة هناك (`--sdf-doc-form-max-w`-type token) بدل
   ما نخترع رقم تاني. الحجز (`padding-right`) فضل زي ما هو عشان القائمة عندنا افتراضيًا مفرودة
   236px (مختلفة عن نظام ZE الأساسي اللي قائمته مطوية افتراضيًا 56px)، فلازم نحجز لها مكان
   زيادة عن مجرد هامش التوسيط الطبيعي. */
/* طلب صريح: يمين/شمال = 250px، وبعدها طلب صريح تاني "الشاشة متصغرش لو فتحت القائمة" — يعني
   عرض المحتوى **ثابت دايمًا** (أهم من تطابق الفجوتين بالظبط في الحالتين). الحل النهائي:
   - شمال: margin-left ثابت 250px.
   - يمين: padding-right ثابت **310px** (عرض القائمة المطوية 60px + 250px) دايمًا — بيدّي فجوة
   250px بالظبط لما القائمة مطوية (حالتها الافتراضية)، وفجوة أصغر (74px) لما تتفرد (مفيش تصادم
   أبدًا لأن 236px < 310px المحجوزة)، بس عرض المحتوى نفسه **صفر تغيير** بين الحالتين. */
/* طلب صريح بسكرين شوت: الفراغ فوق المحتوى (بين الهيدر العلوي وأول حاجة في الشاشة) كان واسع —
   قلّلناه من 22px لـ8px. */
/* 🔴 طلب صريح متابعة بسكرين شوت: "لا عايزها هنا، في الآخر مش هنا" — شريط التمرير (جولة 88) كان
   بيظهر عند حافة صندوق `.content` نفسه (margin-left:250px)، يعني في نص الفراغ المحجوز قبل بداية
   المحتوى الفعلي، مش في الحافة الحقيقية لنافذة المتصفح. الحل: نفس مقدار الإزاحة (250+22=272px)
   بقى `padding-left` بدل `margin-left` — صندوق `.content` (وبالتالي شريط تمريره) بقى يبدأ من
   x=0 الحافة الحقيقية، وموضع المحتوى الفعلي جوّه (بعد الـpadding) **صفر تغيير بصري**. */
.content{
  flex:1;box-sizing:border-box;overflow-y:auto;width:100%;margin:0;
  padding:8px 310px 90px 272px;
}
/* طلب صريح متابعة بسكرين شوت: "ضيف هنا بردو اسكرول في الجنب في الشاشة الرئيسية اللي برا" — نفس
   فكرة `.overlay-card` (133)، الشاشة الرئيسية (`.content`) كمان مفيها شريط تمرير ظاهر بسبب
   القاعدة العامة المخفية سطر 67. */
.content{scrollbar-width:thin;scrollbar-color:var(--primary) transparent}
.content::-webkit-scrollbar{width:8px;display:block}
.content::-webkit-scrollbar-thumb{background:var(--primary);border-radius:10px}
.content::-webkit-scrollbar-track{background:transparent}

/* طلب صريح: "ضيف خلفيات احترافية لكل الشاشات على حسب كل شاشة" + تعديل تالي "الخلفيات تكون مالية
   على حسب كل شاشة" — خلفية مميّزة لكل شاشة بنفس لون أيقونتها (`--panel-accent`) + أيقونة مالية
   عملاقة شفافة جدًا بنفس أيقونة الشاشة في القائمة الجانبية بالظبط (`--panel-icon`، نقطة واحدة
   لكل `#tab-X`) — دلالة مالية واضحة لكل شاشة (💰 نقدية، 🧮 حاسبة، 📑 مصروفات مقدمة...) بدل
   تدرّج لوني مجرّد بس. الأيقونة خلف المحتوى تمامًا (`z-index:-1`) فصفر تأثير على القراءة، وشغّالة
   في الوضعين الفاتح/الليلي لأنها `color-mix` نسبي مش لون ثابت. */
.tab-panel{
  position:relative;min-height:calc(100vh - 140px);border-radius:18px;
  background:
    radial-gradient(900px 480px at 100% 0%, color-mix(in srgb, var(--panel-accent, var(--primary)) 14%, transparent), transparent 62%),
    radial-gradient(760px 420px at 0% 100%, color-mix(in srgb, var(--panel-accent, var(--primary)) 10%, transparent), transparent 58%);
}
.tab-panel::before{
  /* 🔴 درس: ::before بـz-index سالب بيتغطّى بالكامل لو وقع تحت أي كارت/عنصر صلد الخلفية — الحل
     يثبّته في أقصى أسفل الشاشة (bottom:0) حيث مفيش أي محتوى تقريبًا لأي شاشة، بدل أي نسبة % بتقع
     عشوائيًا تحت أول صف كروت. */
  content:var(--panel-icon, "");
  position:absolute;bottom:0;left:0;font-size:min(34vw, 230px);line-height:1;
  opacity:.1;z-index:0;pointer-events:none;user-select:none;
  filter:grayscale(.25) saturate(.6);
}
#tab-home{--panel-accent:#1e3a8a;--panel-icon:"🏠"}
#tab-reminders{--panel-accent:#d98c1f;--panel-icon:"🔔"}
#tab-calculator{--panel-accent:#0f766e;--panel-icon:"🧮"}
#tab-cash{--panel-accent:#1f9d55;--panel-icon:"💰"}
#tab-transfers{--panel-accent:#c9a84c;--panel-icon:"🔁"}
#tab-prepaid{--panel-accent:#e2983a;--panel-icon:"📑"}
#tab-depreciation{--panel-accent:#8a5cf6;--panel-icon:"🏷️"}
#tab-commitments-monthly{--panel-accent:#d64545;--panel-icon:"📆"}
#tab-commitments-annual{--panel-accent:#c0392b;--panel-icon:"📅"}
#tab-commitments-contract{--panel-accent:#a93226;--panel-icon:"📄"}
#tab-tasks{--panel-accent:#0ea5a5;--panel-icon:"✅"}
#tab-closings{--panel-accent:#b8860b;--panel-icon:"📅"}
#tab-companies{--panel-accent:#1e3a8a;--panel-icon:"🏢"}
#tab-users{--panel-accent:#2d4a9e;--panel-icon:"👥"}
#tab-settings{--panel-accent:#707b8f;--panel-icon:"⚙️"}

/* ===== القائمة الجانبية — بنفسجي ZE، عنصر فعّال = حبّة مملوءة بظل، زي المرجع ===== */
.sidenav{
  position:absolute;top:0;bottom:0;right:0;z-index:55;
  width:236px;background:var(--card);border-left:1px solid var(--border);
  display:flex;flex-direction:column;padding:16px 12px;overflow-y:auto;gap:3px;
  transition:width .18s ease;
}
.nav-item{
  display:flex;align-items:center;gap:10px;text-align:right;padding:11px 14px;border:none;
  background:none;font-family:inherit;font-size:14px;color:var(--text);cursor:pointer;
  border-radius:12px;white-space:nowrap;transition:background .12s,color .12s,box-shadow .12s;
  overflow:hidden;
}
.nav-item:hover{background:var(--bg)}
.nav-item.active{
  background:var(--primary);color:#fff;font-weight:700;
  box-shadow:0 4px 12px color-mix(in srgb, var(--primary) 45%, transparent);
}
.nav-item.active .nav-icon{transform:scale(1.05);box-shadow:none;background:rgba(255,255,255,.22)}

/* طلب صريح: كليك على شارة "ZE" بالهيدر يطوي القائمة الجانبية لأيقونات بس (زي نظام ZE الأساسي)،
   والوقوف عليها بالماوس (hover) يفردها مؤقتًا فوق المحتوى (flyout) من غير ما يزحلق الصفحة. */
.ze-badge.topbar-logo{cursor:pointer}
.layout.sidenav-collapsed .sidenav{width:60px;padding:16px 8px}
.layout.sidenav-collapsed .sidenav .nav-item{justify-content:center;padding:11px 0;gap:0}
.layout.sidenav-collapsed .sidenav .nav-label{display:none}
.layout.sidenav-collapsed .sidenav:hover{
  width:236px;z-index:60;padding:16px 12px;box-shadow:-10px 0 24px rgba(0,0,0,.25);
}
.layout.sidenav-collapsed .sidenav:hover .nav-item{justify-content:flex-start;padding:11px 14px;gap:10px}
.layout.sidenav-collapsed .sidenav:hover .nav-label{display:inline}

/* طلب صريح: كل الأيقونات تبقى دوائر كاملة ("مفيهاش حواف") بدل مربعات بزوايا دائرية — نقطة
   واحدة (133)، border-radius:50% بدل 9px/7px السابقين، بتتطبّق تلقائيًا على أي مكان مستخدم
   .nav-icon أو .icon-3d (بادچات العناوين، القائمة الجانبية، أزرار الإجراءات السريعة...). */
/* أيقونة شبه-3D: تدرّج لوني + إضاءة علوية + ظل، بدون أي صورة خارجية */
.nav-icon{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--c) 92%, white 8%) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 80%, black 20%) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.55),
    inset 0 -2px 3px rgba(0,0,0,.25),
    0 3px 6px color-mix(in srgb, var(--c) 45%, transparent);
  transition:transform .15s;
}
.nav-icon.icon-sm{width:22px;height:22px;border-radius:50%;font-size:11px;vertical-align:middle;margin-left:4px}

/* زرار القائمة (☰) — يظهر على الموبايل بس */
.sidenav-toggle-btn{display:none}
.sidenav-backdrop{display:none}

/* ===== تصميم موبايل احترافي كامل — إعادة بناء، مش مجرّد تصغير شاشة الديسك توب =====
   بدل الشريط الأفقي القديم (overflow-x قابل للنسيان إنه بيتسكرول): قائمة جانبية حقيقية
   Drawer بتنزلق من جنب (زي أي تطبيق موبايل احترافي)، بتتفتح بزرار ☰ في الشريط العلوي،
   مع خلفية معتمة تقفلها بالكليك عليها، وصفر أثر على شكل الديسك توب خالص. */
@media (max-width:880px){
  .topbar{padding:10px 14px}
  .sidenav-toggle-btn{display:flex;align-items:center;justify-content:center}
  .company-name{font-size:13.5px;max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ze-badge.topbar-logo{width:32px;height:32px;font-size:12px}

  .layout{flex-direction:column;position:relative;padding-right:0}
  .sidenav-backdrop{
    display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:399;
    opacity:0;pointer-events:none;transition:opacity .2s;
  }
  .sidenav-backdrop.open{opacity:1;pointer-events:auto}
  .sidenav{
    position:fixed;top:0;bottom:0;right:0;width:78vw;max-width:300px;z-index:400;
    flex-direction:column;border-left:1px solid var(--border);border-bottom:none;
    padding:70px 14px 20px;overflow-y:auto;box-shadow:-8px 0 30px rgba(0,0,0,.25);
    transform:translateX(100%);transition:transform .22s ease;
  }
  .sidenav.open{transform:translateX(0)}
  .nav-item{border-radius:12px;padding:12px 14px;font-size:14.5px}
  .content{padding:14px;padding-bottom:90px}
  /* الطي بزرار "ZE" ميزة ديسك توب بس — على الموبايل القائمة أصلًا Drawer بتتفتح/تتقفل بزرار ☰ */
  .layout.sidenav-collapsed .sidenav,.layout.sidenav-collapsed .sidenav:hover{width:78vw;max-width:300px;padding:70px 14px 20px;position:fixed}
  .layout.sidenav-collapsed .sidenav .nav-item,.layout.sidenav-collapsed .sidenav:hover .nav-item{justify-content:flex-start;padding:12px 14px;gap:10px}
  .layout.sidenav-collapsed .sidenav .nav-label,.layout.sidenav-collapsed .sidenav:hover .nav-label{display:inline}
  /* 🔴 إصلاح باج موبايل حي: الأزرار العائمة (حجم خط/وضع ليلي/رسائل) كانت بتتغطّى على آخر كارت
     في الشاشة بالكامل — تصغير + شفافية خفيفة لحد اللمس (نفس نمط ZE، قسم 1057) + حجز مساحة أسفل
     المحتوى (`padding-bottom` فوق) عشان آخر صف/كارت ميتغطّيش خالص. */
  .floating-bar{gap:8px;bottom:14px;left:12px}
  .float-btn{width:38px;height:38px;font-size:14px;opacity:.6}
  .float-btn:active,.float-btn:focus{opacity:1}

  /* شريط أزرار سريعة بالرئيسية — سكرول أفقي بمظهر chips احترافي مع إشارة وضوح إنه قابل للتمرير */
  .quick-actions-bar{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .quick-actions-bar .quick-action{scroll-snap-align:start}

  /* كروت KPI عمود واحد مريح للمس بدل شبكة ضيقة */
  .kpi-row{grid-template-columns:1fr 1fr;gap:8px}
  .kpi-card{padding:12px 14px}
  .kpi-card .kpi-value{font-size:19px}

  /* النوافذ المنبثقة تاخد الشاشة كاملة تقريبًا بدل كارت صغير عائم — 5 سم فراغ هنا هتاكل الشاشة
     كلها على موبايل، فبتترجع لمسافة صغيرة معقولة بس على العرض الضيق ده */
  .overlay{padding:12px}
  .overlay-card{width:94vw;max-height:92vh}

  /* شريط أزرار أي كارت (تعديل/حذف/...) ياخد عرض كامل باللمس بدل أزرار مضغوطة */
  .record-actions .btn-sm, .bank-row .btn-sm{min-height:36px}
}

/* ===== أيقونة شبه-3D عامة (نفس وصفة .nav-icon: تدرّج + إضاءة علوية + ظل) — تُستخدم على أي دايرة أيقونة في النظام ===== */
.icon-3d{
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--c, var(--primary)) 92%, white 8%) 0%, var(--c, var(--primary)) 55%, color-mix(in srgb, var(--c, var(--primary)) 80%, black 20%) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.55),
    inset 0 -2px 3px rgba(0,0,0,.25),
    0 3px 7px color-mix(in srgb, var(--c, var(--primary)) 45%, transparent);
  color:#fff;border:none;transition:transform .15s;
}
.icon-3d:hover{transform:translateY(-1px) scale(1.04)}

/* ===== جرس الإشعارات في الشريط العلوي ===== */
.icon-btn{
  position:relative;border-radius:50%;
  width:36px;height:36px;font-size:16px;cursor:pointer;
}
.icon-btn:hover{filter:brightness(1.08)}
.bell-badge{
  position:absolute;top:-5px;left:-5px;background:var(--error);color:#fff;font-size:10px;
  font-weight:700;border-radius:999px;min-width:16px;height:16px;display:flex;align-items:center;
  justify-content:center;padding:0 3px;
}

/* ===== قائمة المستخدم المنسدلة ===== */
.user-menu-wrap{position:relative}
.user-avatar-btn{background:none;border:none;cursor:pointer;padding:0}
.user-avatar{
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#f3e2a8,var(--gold) 55%,#a3842f);color:var(--primary-dark);
  font-weight:800;font-size:14px;border:2px solid rgba(255,255,255,.5);
}
.user-avatar.lg{width:44px;height:44px;font-size:17px}
.user-dropdown{
  position:absolute;top:calc(100% + 10px);left:0;width:250px;background:var(--card);color:var(--text);
  border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 36px rgba(0,0,0,.2);
  z-index:200;overflow:hidden;
}
.user-dropdown-head{display:flex;align-items:center;gap:10px;padding:14px}
.user-dropdown-name{font-weight:700;font-size:14.5px}
.user-dropdown-section{padding:0 14px 10px;border-bottom:1px solid var(--border)}
.dd-row{display:flex;justify-content:space-between;font-size:12.5px;padding:3px 0;color:var(--muted)}
.dd-row b{color:var(--text);font-weight:700}
.dd-item{
  display:block;width:100%;text-align:right;padding:11px 14px;border:none;background:none;
  font-family:inherit;font-size:13.5px;color:var(--text);cursor:pointer;border-top:1px solid var(--border);
}
.dd-item:first-of-type{border-top:none}
.dd-item:hover{background:var(--bg)}
.dd-danger{color:var(--error);font-weight:700}

/* ===== جرس الإشعارات (📢) — مختلف عن التذكيرات (🔔 استحقاقات تواريخ): حوالات محتاجة تعميد/
   نتيجة تعميد/مرفقات جديدة على سجل ===== */
.notif-dropdown{
  position:absolute;top:calc(100% + 10px);left:0;width:340px;max-height:420px;background:var(--card);color:var(--text);
  border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 36px rgba(0,0,0,.2);
  z-index:200;overflow:hidden;display:flex;flex-direction:column;
}
.notif-dropdown-head{
  display:flex;align-items:center;justify-content:space-between;padding:12px 14px;
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.notif-dropdown-head h4{margin:0;font-size:14.5px}
#notif-list{overflow-y:auto;max-height:360px}
.notif-item{
  display:block;width:100%;text-align:right;padding:11px 14px;border:none;background:none;
  font-family:inherit;color:var(--text);cursor:pointer;border-top:1px solid var(--border);
}
.notif-item:first-of-type{border-top:none}
.notif-item:hover{background:var(--bg)}
.notif-item.unread{background:color-mix(in srgb, var(--primary) 7%, var(--card))}
.notif-item-title{font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:6px}
.notif-item-title .dot{width:7px;height:7px;border-radius:50%;background:var(--primary);flex-shrink:0}
.notif-item-body{font-size:12.5px;color:var(--muted);margin-top:3px}
.notif-item-time{font-size:11px;color:var(--muted);margin-top:4px}

.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;margin-bottom:16px;
}
.card h3{margin:0 0 14px;font-size:16px}
/* 🔴 طلب صريح: "رتّب شاشة الإعدادات" — كروت الإعدادات كانت كومة واحدة طويلة بلا تصنيف، بقت
   متقسّمة تحت عناوين أقسام واضحة (حسابي/الإدارة/النظام/تليجرام/سير الاعتماد)، نقطة CSS واحدة. */
.settings-section{margin-bottom:28px}
.settings-section-title{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:800;margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--border)}
/* 🔴 طلب صريح: "ظبط الشاشة هنا" (قسم "حسابي") — flex-wrap بلا عرض ثابت للصف كان بيخلّي الكروت
   تتكسّر في أماكن غير متوازنة ويتمدّد ارتفاعها مع بعض. Grid بعرض عمود أدنى ثابت بيوزّع الكروت
   بالتساوي، وalign-items:start بيمنع تمدّد ارتفاع كارت صغير عشان يطابق جاره الأطول. */
.settings-section-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start}
.settings-section-cards .card{margin-bottom:0;max-width:none;width:100%}
/* "الشركات والفروع"/"المستخدمون والصلاحيات" بقوا كارت رابط جوّه الإعدادات بدل عنصر قائمة جانبية
   مستقل — تأثير hover بسيط يوضّح إنهم قابلين للكليك. */
.settings-link-card:hover{border-color:var(--primary);background:color-mix(in srgb, var(--primary) 6%, var(--card))}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
/* طلب صريح: "ضبط الأزرار تبقى في نفس الحجم والعرض... زي حجم زر حوالة جديدة" — أزرار شريط
   عنوان أي شاشة قايمة (📊 تقرير/⚙️ إعدادات/+ جديد) كانت مقاسات مختلفة (`.btn-sm` أصغر من
   `.btn-primary` المضبوط يدويًا بـpadding:8px 16px) — نقطة واحدة بتوحّدهم كلهم بنفس الحجم. */
.section-head .btn-sm,.section-head .btn-primary{padding:8px 16px;font-size:14px;width:auto}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:9px 10px;text-align:right;border-bottom:1px solid var(--border)}
th{color:var(--muted);font-weight:600;font-size:13px}
tr:hover td{background:var(--bg)}

.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700}
/* طلب صريح: الوضع الليلي يبقى احترافي ومتطابق — كانت الخلفيات هنا ألوان فاتحة ثابتة بغض النظر
   عن الوضع (شارات باستيل فاتحة عايمة فوق واجهة غامقة)؛ بقت color-mix نسبي فوق var(--card)
   عشان تتكيّف تلقائيًا مع أي وضع (فاتح/ليلي) — نفس فكرة .chip-amount (133) */
.badge-in{background:color-mix(in srgb, var(--success) 18%, var(--card));color:var(--success)}
.badge-out{background:color-mix(in srgb, var(--error) 18%, var(--card));color:var(--error)}
.badge-warn{background:color-mix(in srgb, var(--warning) 20%, var(--card));color:var(--warning)}
.badge-soon{background:color-mix(in srgb, var(--warning) 12%, var(--card));color:var(--warning)}

/* طلب صريح متابعة: "قلل الطول بردوا" — margin-bottom نزل من 12px لـ9px (صفوف أكتر بتتراكم فوق بعض) */
.form-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.form-row > div{flex:1;min-width:140px}
/* طلب صريح: "قلل عرض المكان اللي بيدخل فيه البيانات" — سقف max-width جديد عشان حقل input/select
   ميتمططش لآخر العمود الفاضي لما يكون الصف فيه عنصر أو اتنين بس، بيفضل بعرض معقول ثابت.
   استثناء textarea عمدًا (ملاحظات لازم تفضل عرض كامل، طلب صريح سابق). */
.form-row > div:has(> input),.form-row > div:has(> select){max-width:320px}
.form-row label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;font-weight:600}
/* طلب صريح: "كل البيانات في النظام تتوسط في نص الحقل... احترافية في طريقة عرضها" — نقطة واحدة
   مشتركة لكل حقول الفورم في النظام (textarea استثناء عمدًا — نص متعدد الأسطر لو اتوسّط بيبقى
   صعب القراءة، بيفضل محاذي لليمين زي الطبيعي). */
.form-row input,.form-row select{
  width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:9px;
  font-family:inherit;font-size:14px;background:var(--bg);color:var(--text);
  transition:border-color .15s,box-shadow .15s;text-align:center;
}
.form-row textarea{
  width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:9px;
  font-family:inherit;font-size:14px;background:var(--bg);color:var(--text);
  transition:border-color .15s,box-shadow .15s;
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

/* ⚠️ طلب صريح متابعة: تلوين popup المتصفح الأصلي (color-scheme) مكانش كافي — العميل عايز شكل
   احترافي بالكامل (أسماء شهور/أيام عربي، تصميم نفس هوية النظام)، ومفيش تحكم CSS في محتوى
   التقويم الأصلي اللي المتصفح بيرسمه (مفروض عليه إنجليزي Su/Mo/Tu...). الحل الجذري: تقويم
   مخصّص بالكامل مبني بـJS/CSS (زي `.ze-datepicker` تحت) بيستبدل تقويم المتصفح نهائيًا —
   `input[type=date]` فضل زي ما هو (نفس تنسيق format/قراءة .value) بس بقى readonly وبيفتح
   التقويم المخصّص بدل الأصلي؛ نقطة ترقية واحدة مشتركة (133) في app.js بتشتغل على أي حقل تاريخ
   في النظام تلقائيًا (MutationObserver)، صفر تعديل مطلوب في أي فورم موجود. */
input[type="date"],input[type="time"],input[type="datetime-local"]{color-scheme:var(--date-scheme)}
input[type="date"].ze-date-input{cursor:pointer}
input[type="date"].ze-date-input::-webkit-calendar-picker-indicator{
  pointer-events:none;padding:5px;border-radius:50%;background:color-mix(in srgb, var(--primary) 14%, transparent);
  filter:var(--date-icon-filter, none);
}
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator{--date-icon-filter:invert(1)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) input[type="date"]::-webkit-calendar-picker-indicator{--date-icon-filter:invert(1)}
}

/* ===== تقويم مخصّص احترافي (ze-datepicker) — بديل تقويم المتصفح الأصلي بالكامل ===== */
.ze-datepicker{
  position:fixed;z-index:700;background:var(--card);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.3);padding:12px;width:270px;font-family:inherit;
  animation:zdp-pop .12s ease;
}
@keyframes zdp-pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.zdp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
/* طلب صريح: كليك على عنوان الشهر/السنة يفتح اختيار سريع بدل تقليب شهر شهر — بقى زرار حقيقي */
.zdp-title{
  font-weight:800;font-size:14.5px;color:var(--text);border:none;background:none;font-family:inherit;
  cursor:pointer;border-radius:8px;padding:4px 10px;transition:background .12s;
}
.zdp-title:hover{background:color-mix(in srgb, var(--primary) 12%, var(--bg))}
.zdp-months{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.zdp-month{
  padding:10px 4px;border:1px solid var(--border);border-radius:9px;background:var(--bg);
  font-family:inherit;font-size:13px;color:var(--text);cursor:pointer;transition:background .12s;
}
.zdp-month:hover{background:color-mix(in srgb, var(--primary) 16%, var(--bg))}
.zdp-month.zdp-selected{background:var(--primary);color:#fff;font-weight:800;border-color:var(--primary)}
.zdp-nav{
  width:28px;height:28px;border-radius:50%;border:1px solid var(--border);background:var(--bg);
  color:var(--text);cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;
  transition:background .12s;
}
.zdp-nav:hover{background:color-mix(in srgb, var(--primary) 16%, var(--bg))}
.zdp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:4px}
.zdp-weekdays span{font-size:11.5px;color:var(--muted);font-weight:700;padding:4px 0}
.zdp-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.zdp-day{
  width:100%;aspect-ratio:1;border:none;background:none;border-radius:50%;cursor:pointer;
  font-family:inherit;font-size:13px;color:var(--text);display:flex;align-items:center;justify-content:center;
  transition:background .12s;
}
.zdp-day:hover{background:color-mix(in srgb, var(--primary) 16%, var(--bg))}
.zdp-day.zdp-empty{cursor:default;pointer-events:none}
.zdp-day.zdp-today{border:1.5px solid var(--primary);font-weight:800}
.zdp-day.zdp-selected{background:var(--primary);color:#fff;font-weight:800}
.zdp-foot{display:flex;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.zdp-foot .btn-sm{flex:1;padding:7px}

.empty-state{text-align:center;color:var(--muted);padding:30px 0}

.toast{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  background:var(--primary-dark);color:#fff;padding:10px 20px;border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:999;font-size:14px;
}
.toast.error{background:var(--error)}

.chip{
  display:inline-block;padding:3px 10px;border-radius:999px;background:var(--bg);
  border:1px solid var(--border);font-size:12px;margin-left:4px;color:var(--muted);text-align:center;
}
/* طلب صريح: المبلغ يبقى ظاهر وواضح في أي كارت سجل — نقطة واحدة مشتركة بدل تمويه المبلغ
   جوّه شيب عادي رمادي زي باقي التفاصيل الثانوية (نوع/فرع/تاريخ...) */
.chip-amount{
  font-size:14px;font-weight:800;color:var(--primary);background:color-mix(in srgb, var(--primary) 12%, var(--card));
  border-color:color-mix(in srgb, var(--primary) 35%, var(--border));padding:4px 12px;
}
.account-balance{font-size:20px;font-weight:800;color:var(--primary)}

.attachment-list{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.attachment-chip{
  display:flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--border);
  border-radius:8px;padding:4px 8px;font-size:12px;
}
.attachment-chip button{border:none;background:none;color:var(--error);cursor:pointer;font-size:14px}

/* ===== شريط الأزرار العائمة (حجم خط/وضع ليلي/رسائل) ===== */
.floating-bar{
  position:fixed;bottom:24px;left:20px;display:flex;flex-direction:column;gap:10px;z-index:300;
}
.float-btn{
  width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;font-size:16px;font-weight:700;
  display:flex;align-items:center;justify-content:center;position:relative;
  background:var(--card);color:var(--text);box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:transform .15s;
}
.float-btn:hover{transform:scale(1.08)}
/* .icon-3d معرّفة قبل .float-btn في الملف — نعيد تأكيدها هنا بعد التعريف الأساسي عشان الكاسكيد يطبّقها صح */
.float-btn.icon-3d, .icon-btn.icon-3d{
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--c, var(--primary)) 92%, white 8%) 0%, var(--c, var(--primary)) 55%, color-mix(in srgb, var(--c, var(--primary)) 80%, black 20%) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.55),
    inset 0 -2px 3px rgba(0,0,0,.25),
    0 3px 7px color-mix(in srgb, var(--c, var(--primary)) 45%, transparent);
  color:#fff;
}

/* ===== بلاطات مجموعات الحسابات (بنوك/خزائن/محافظ) — نقطة دخول قابلة للكليك بدل قايمة مسطّحة ===== */
.kind-tile-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:16px}
.kind-tile{
  cursor:pointer;text-align:center;padding:24px 14px;border-radius:14px;border:1px solid var(--border);
  background:var(--card);transition:transform .15s,box-shadow .15s;position:relative;overflow:hidden;
}
.kind-tile::before{content:"";position:absolute;inset:0;background:var(--tile-color);opacity:.07;pointer-events:none}
.kind-tile:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.18)}
.kind-tile-icon{font-size:36px;display:block;margin-bottom:8px;position:relative}
.kind-tile-title{font-weight:800;font-size:15px;margin-bottom:8px;position:relative}
.kind-tile-balance{font-size:20px;font-weight:800;color:var(--tile-color);position:relative}
.kind-tile-meta{font-size:12px;color:var(--muted);margin-top:5px;position:relative}
.kind-tile-warn{
  position:absolute;top:10px;left:10px;background:var(--warning);color:#1c1300;font-size:11px;
  font-weight:800;padding:2px 8px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.kind-back-btn{
  display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--border);
  border-radius:8px;padding:7px 14px;cursor:pointer;color:var(--text);font-family:inherit;
  font-size:13px;font-weight:700;margin-bottom:12px;transition:background .15s;
}
.kind-back-btn:hover{background:var(--bg)}

/* ===== لوحة الرسائل ===== */
.chat-panel{
  position:fixed;bottom:24px;left:76px;width:360px;height:460px;max-height:70vh;
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  box-shadow:0 16px 46px rgba(0,0,0,.25);z-index:301;display:flex;flex-direction:column;overflow:hidden;
}
.chat-panel-head{
  display:flex;justify-content:space-between;align-items:center;padding:12px 16px;
  background:var(--primary);color:#fff;
}
.chat-panel-head h3{margin:0;font-size:15px}
.chat-body{display:flex;flex:1;min-height:0}
.chat-users{
  width:110px;flex-shrink:0;border-left:1px solid var(--border);overflow-y:auto;padding:6px 0;
}
.chat-user-item{
  display:block;width:100%;text-align:center;padding:8px 4px;border:none;background:none;
  font-family:inherit;font-size:12px;color:var(--text);cursor:pointer;position:relative;
}
.chat-user-item.active{background:var(--bg);font-weight:700;color:var(--primary)}
.chat-user-item .chat-user-avatar{
  position:relative;width:30px;height:30px;border-radius:50%;margin:0 auto 4px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#f3e2a8,var(--gold));color:var(--primary-dark);font-weight:800;font-size:12px;
}
.chat-unread-dot{
  position:absolute;top:-2px;left:-2px;width:10px;height:10px;border-radius:50%;
  background:var(--error);border:2px solid var(--card);
}
.chat-thread{flex:1;display:flex;flex-direction:column;min-width:0}
.chat-messages{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px}
.chat-bubble{max-width:80%;padding:9px 13px;border-radius:14px;font-size:13px;line-height:1.45;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.chat-bubble.mine{align-self:flex-start;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border-bottom-left-radius:4px}
.chat-bubble.theirs{align-self:flex-end;background:var(--bg);border:1px solid var(--border);border-bottom-right-radius:4px}
.chat-bubble .chat-meta{display:block;font-size:10px;opacity:.7;margin-top:4px}
.chat-attachment-img{max-width:180px;border-radius:8px;display:block;margin-top:4px}
.chat-attachment-file{
  display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:5px 8px;border-radius:7px;
  background:rgba(255,255,255,.15);color:inherit;text-decoration:none;font-size:12px;
}
.chat-bubble.theirs .chat-attachment-file{background:var(--card);border:1px solid var(--border)}
.chat-input-row{display:flex;gap:6px;padding:8px;border-top:1px solid var(--border);align-items:center}
.chat-input-row input{
  flex:1;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg);
  color:var(--text);font-family:inherit;font-size:13px;
}
.chat-input-row button{
  background:var(--primary);color:#fff;border:none;border-radius:8px;padding:0 14px;cursor:pointer;font-weight:700;
}
.chat-attach-btn{
  cursor:pointer;font-size:17px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:8px;transition:background .15s;
}
.chat-attach-btn:hover{background:var(--bg)}
@media (max-width:480px){
  .chat-panel{left:8px;right:8px;width:auto;bottom:76px}
  .floating-bar{left:8px;bottom:8px}
}

/* ===== كارت سجل (أصل/بند) — بديل الجدول لما التفاصيل كتير، زي شاشات ZE ===== */
.record-card{
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:box-shadow .15s,border-color .15s;
}
.record-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.08);border-color:color-mix(in srgb, var(--primary) 30%, var(--border))}
.record-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.record-card-title{font-weight:700;font-size:15px}
/* طلب صريح: "الرقم يبقى في البداية" — بادئة "TR-00004"/"PE-00249"/إلخ بحروف لاتينية جوّه نص
   عربي (RTL) كانت بتتحرّك فعليًا بخوارزمية bidi (اتجاه النص الثنائي) لآخر السطر بدل أوله رغم
   إنها أول عنصر في الماركأب — `unicode-bidi:isolate` بيعزل الرقم كوحدة مستقلة فيتمركز حسب
   ترتيبه في الـDOM فعليًا، مش حسب أول حرف قوي جوّاه. نقطة واحدة بتأثر على كل أرقام السجلات
   في النظام. */
/* 🔴 طلب صريح: "الترقيم دايمًا في أول الكلام ويبقى بلون، في أي شاشة" — نقطة واحدة، بتتطبّق
   تلقائيًا على كل شاشات النظام اللي بتستخدم .record-serial (مهام/مستندات/مصروفات مقدمة/إهلاك/
   التزامات/حوالات...) بضربة واحدة */
.record-serial{font-size:11px;color:var(--primary);font-weight:800;background:color-mix(in srgb, var(--primary) 10%, var(--bg));border:1px solid color-mix(in srgb, var(--primary) 30%, var(--border));border-radius:6px;padding:2px 7px;font-family:monospace;unicode-bidi:isolate}
/* طلب صريح بسكرين شوت: المبلغ يبقى ظاهر في هيدر الكارت جمب رقم السجل، مش مدفون وسط باقي
   الشيبات — نقطة واحدة مشتركة لكل كروت السجلات اللي فيها مبلغ رئيسي (حوالات/التزامات/مصروفات
   مقدمة/إهلاك) */
.record-head-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.record-amount-badge{font-size:13.5px;white-space:nowrap}
.record-chips{display:flex;flex-wrap:wrap;gap:6px}
/* طلب صريح: "ظبط طريقة العرض... مرتب بصورة كويسة" — فاصل خفيف فوق شريط الأزرار بدل ما تفضل
   طايرة في فراغ تحت الشيبات مباشرة، نفس نقطة الـCSS دي بتتطبّق على كل كروت السجلات في النظام. */
.record-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}

/* طلب صريح: "ضيف تحديد في كل الشاشات عشان لو عايز أحدد أكتر من بند أحذفهم" — غلاف خارجي
   بسيط (شيك بوكس + الكارت) بدل ما نلمس تصميم الكارت نفسه، نقطة واحدة في renderCardsPaginated() */
.bulk-select-row{display:flex;align-items:flex-start;gap:8px}
.bulk-select-row .record-card{flex:1;margin-bottom:0}
.bulk-select-cb{width:19px;height:19px;margin-top:16px;cursor:pointer;flex-shrink:0;accent-color:var(--primary)}
.bulk-actions-bar{justify-content:flex-start;margin-top:0;margin-bottom:10px}

/* ===== ترقيم صفحات (renderCardsPaginated) — نقطة CSS واحدة لكل شاشات القوائم ===== */
.pagination-bar{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  margin-top:12px;padding:10px 12px;background:var(--card);border:1px solid var(--border);border-radius:10px;
}
.pagination-bar-top{margin-top:0;margin-bottom:12px;justify-content:flex-end}
/* طلب صريح: "نزّل البحث تحت هنا ويبقى ع نفس الصف بتاع الترتيب" ثم تعديل صريح متابعة:
   "صغّر البحث زي ما كان وخليه ناحية اليمين، وتحديد/ترتيب/الإلغاء الجهة الشمال" — `order`
   بيعكس المكان بصريًا من غير ما يلمس ترتيب الـDOM (البحث `order:1` = يمين في RTL، الترتيب
   `order:2` = شمال)، والبحث رجع لعرض صغير ثابت (مش `flex:1` بياخد المساحة كلها). */
.pagination-bar-top:has(.pagination-search-host){justify-content:space-between}
.pagination-search-host{order:1;flex:0 0 auto;width:220px}
.pagination-sort{order:2}
.pagination-search-host input{width:100%;padding:5px 10px;font-size:13px}
.pagination-size,.pagination-sort{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.pagination-size select,.pagination-sort select{
  padding:4px 8px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:13px;
}
.pagination-sort .pg-sort-dir{padding:4px 10px;font-size:12.5px}
.pagination-nav{display:flex;align-items:center;gap:10px}
.pagination-info{font-size:13px;color:var(--muted);white-space:nowrap}
.pagination-nav button:disabled{opacity:.4;cursor:not-allowed}

/* ===== سير اعتماد الحوالة — عرض مضمّن جوّه كارت الحوالة (📒 سير الاعتماد) ===== */
.approval-trail{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);display:flex;flex-direction:column;gap:6px}
.approval-trail-step{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-size:12.5px}
.approval-trail-order{
  display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  background:var(--primary);color:#fff;font-size:11px;font-weight:800;flex-shrink:0;
}
.approval-trail-name{font-weight:700}

/* طلب صريح: "ظبطها كده" — تصميم سير الاعتماد (إعدادات الحوالات) بشكل خط زمني عمودي زي نظام ZE
   الأساسي (نقطة بداية/مراحل مرقّمة متصلة بخط/نقطة نهاية)، بدل قايمة صفوف مسطّحة. */
/* 🔴 طلب صريح بسكرين شوت: "خليها في الشمال وثبّتها، والاسكرول يطلع وينزل، وزرار تم يبقى
   مثبّت" — الكارت البنفسجي الضخم (عدد مراحل الاعتماد) بقى بادچ صغير جمب منتقي القطاع في صف
   واحد ثابت (sticky) أعلى محتوى النافذة (`#ac2-sticky-row`، `top` بيتحسب ديناميكيًا = ارتفاع
   `.overlay-head` الفعلي وقت الفتح) بدل كارت عريض وسط تدفّق المحتوى. الصف `display:flex` في
   صفحة RTL بيحط أول عنصر (منتقي القطاع) يمين وتاني عنصر (البادچ) شمال تلقائي، بلا float. */
#ac2-sticky-row{
  position:sticky;z-index:5;background:var(--card);display:flex;align-items:center;
  justify-content:space-between;gap:10px;padding-bottom:10px;
}
.ac-count-card{
  background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;border-radius:10px;
  padding:6px 14px;text-align:center;flex:0 0 auto;box-shadow:0 4px 14px rgba(124,58,237,.35);
}
.ac-count-card .ac-count-label{font-size:10.5px;opacity:.9;white-space:nowrap}
.ac-count-card .ac-count-value{font-size:18px;font-weight:800;line-height:1.1}
.ac-timeline{position:relative;padding-right:4px}
.ac-timeline::before{
  content:"";position:absolute;top:22px;bottom:22px;right:23px;width:2px;background:var(--border);
}
.ac-node{position:relative;display:flex;align-items:center;gap:12px;padding:10px 0;z-index:1}
.ac-node-circle{
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;flex-shrink:0;color:#fff;background:var(--primary);
  box-shadow:0 0 0 4px var(--card);
}
.ac-node-circle.ac-start{background:#3b82f6}
.ac-node-circle.ac-end{background:var(--success)}
.ac-node-circle.ac-reject{background:var(--error)}
.ac-node-body.ac-reject-body{border-color:var(--error)}
.ac-node-reason{font-size:12px;color:var(--error);font-weight:700;margin-top:4px;width:100%}
.ac-node-body{
  flex:1;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:10px 14px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
}
.ac-node-title{font-weight:700;font-size:14px}
.ac-node-sub{font-size:12px;color:var(--muted);margin-top:2px}
.ac-node-tag{font-size:11px;color:var(--muted);background:var(--card);border:1px solid var(--border);border-radius:999px;padding:2px 8px}
/* طلب صريح: "سير الاعتمادات يبقى بلون" — بادچ الحالة في كل خطوة بقى ملوّن حسب نوعها (تم/
   مرفوض/لسه مستني) بدل نفس اللون الرمادي المحايد لكل الحالات */
.ac-tag-done{color:var(--success);background:color-mix(in srgb, var(--success) 14%, var(--card));border-color:var(--success)}
.ac-tag-reject{color:var(--error);background:color-mix(in srgb, var(--error) 14%, var(--card));border-color:var(--error)}
.ac-tag-pending{color:var(--warning);background:color-mix(in srgb, var(--warning) 14%, var(--card));border-color:var(--warning)}

/* ===== تقرير الحوالات — جدول + رسم أعمدة ترتيب بسيط (openTransfersReport) ===== */
.report-table{width:100%;border-collapse:collapse;font-size:13px}
.report-table th,.report-table td{padding:8px 10px;text-align:center;border-bottom:1px solid var(--border)}
.report-table thead th{background:color-mix(in srgb, var(--primary) 10%, var(--card));font-weight:800;white-space:nowrap}
.report-table tfoot td{font-weight:800;background:color-mix(in srgb, var(--success) 10%, var(--card))}
.report-table tbody tr:hover{background:var(--bg)}

.report-rank-chart{
  display:flex;align-items:flex-end;gap:14px;height:140px;padding:10px 6px 0;margin-bottom:14px;
  border-bottom:1px solid var(--border);
}
.report-rank-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.report-rank-bar{width:100%;max-width:42px;border-radius:6px 6px 0 0;transition:height .2s}
.report-rank-bar-amt{font-size:11px;font-weight:700;margin-top:4px;white-space:nowrap}
.report-rank-bar-name{font-size:10.5px;color:var(--muted);margin-top:2px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.report-rank-list{display:flex;flex-direction:column;gap:6px}
.report-rank-row{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;background:var(--bg);font-size:13px}
.report-rank-order{
  display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  color:#fff;font-size:11px;font-weight:800;flex-shrink:0;
}
.report-rank-name{flex:1;font-weight:700}
.report-rank-pct{color:var(--muted);font-size:12px}
.report-rank-amt{font-weight:800;color:var(--primary)}

/* ===== صف بنكي مسطّح (.bank-row) — نفس نمط ZE الحقيقي لحركة الحسابات: صف أفقي بدل جدول/كارت ===== */
.bank-rows-list{display:flex;flex-direction:column;gap:8px}
.bank-row{
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:12px 16px;box-shadow:0 1px 3px rgba(0,0,0,.05);
  transition:box-shadow .15s,border-color .15s;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.bank-row:hover{box-shadow:0 3px 10px rgba(0,0,0,.08);border-color:color-mix(in srgb, var(--primary) 25%, var(--border))}
.bank-row .bank-row-title{display:flex;align-items:center;gap:8px;font-size:14px}
.bank-row .bank-meta{font-size:13px;color:var(--muted)}
.bank-row .amount{font-size:14.5px;white-space:nowrap;color:var(--primary);font-weight:800}

/* ===== كروت KPI — نفس نمط ZE الحقيقي: حد علوي ملوّن + خلفية مسطّحة متلوّنة خفيفة (بدل التدرّج القطري) ===== */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:18px}
.kpi-card{
  position:relative;border:1px solid var(--border);border-top:3px solid var(--primary);
  border-radius:var(--radius);padding:14px 16px;
  background:color-mix(in srgb, var(--primary) 7%, var(--card));
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.kpi-card .kpi-label{font-size:12.5px;color:var(--muted);margin-bottom:6px}
.kpi-card .kpi-value{font-size:22px;font-weight:800;color:var(--text)}
.kpi-card.tone-success{border-top-color:var(--success);background:color-mix(in srgb, var(--success) 8%, var(--card))}
.kpi-card.tone-warning{border-top-color:var(--warning);background:color-mix(in srgb, var(--warning) 8%, var(--card))}
.kpi-card.tone-error{border-top-color:var(--error);background:color-mix(in srgb, var(--error) 8%, var(--card))}
.kpi-card.tone-gold{border-top-color:var(--gold);background:color-mix(in srgb, var(--gold) 10%, var(--card))}
.kpi-card.tone-info{border-top-color:var(--violet);background:color-mix(in srgb, var(--violet) 8%, var(--card))}
.kpi-card-active{box-shadow:0 0 0 2px var(--primary) inset,0 1px 3px rgba(0,0,0,.06)}

/* ===== نافذة عرض موحّدة ===== */
.overlay{
  position:fixed;inset:0;background:rgba(10,14,25,.55);z-index:500;
  display:flex;align-items:center;justify-content:center;
  /* طلب صريح: "خلي فراغ بين الشاشة والحواف 5 سم على الأقل" — مسافة واضحة حوالين أي نافذة
     منبثقة وحواف الشاشة؛ على الموبايل (94vw) اتصغّرت في الـmedia query تحت عشان المساحة
     المحدودة لا تتاكل بالكامل. */
  padding:5cm;
}
.overlay-card{
  background:var(--card);border-radius:14px;width:100%;max-width:560px;
  /* طلب صريح متابعة: "قللت العرض، قلل الطول بردوا" — 85vh نزلت لـ72vh */
  max-height:72vh;overflow-y:auto;box-shadow:0 24px 70px rgba(0,0,0,.4);
  border-top:4px solid var(--primary);
}
/* 🔴 طلب صريح: "ضيف اسكرول في الشاشة دي" (شاشة تقرير الحوالات) — السكرول كان شغال فعليًا
   (overflow-y:auto فوق)، بس القاعدة العامة *{scrollbar-width:none} (سطر 67) بتخفي أي شريط
   تمرير في كل مكان، فمفيش أي دليل بصري إن فيه محتوى تحت. استثناء مقصور على `.overlay-card`
   بس (نقطة واحدة، بتأثر على كل النوافذ المنبثقة في النظام) — شريط رفيع ظاهر دايمًا. */
.overlay-card{scrollbar-width:thin;scrollbar-color:var(--primary) transparent}
.overlay-card::-webkit-scrollbar{width:8px;display:block}
.overlay-card::-webkit-scrollbar-thumb{background:var(--primary);border-radius:10px}
.overlay-card::-webkit-scrollbar-track{background:transparent}
/* طلب صريح: "تظهر بالعرض البيانات والشهور كلها" — جداول فيها أعمدة كتير (معاينة تقرير بعمود
   لكل شهر) محتاجة نافذة أعرض عشان الأعمدة تبان من غير سكرول أفقي على شاشات متوسطة/كبيرة. */
/* طلب صريح: "كبّرتها أوي" — 1200px كانت زيادة عن اللزوم، بقت 960px، وبعدين "شاشات العرض شايفة
   كبيرة صغّر عرضها" — نزلت لـ820px، وبرضو النافذة العادية (غير wide) نزلت من 640px لـ560px. */
.overlay-card.wide{max-width:820px}
/* طلب صريح: "شاشة التقارير هنا أقدر أشوف فيها براحتي كل الداتا وأفلتر — طبق ده ع الشاشات
   التانية بردوا" — شاشات التقارير الحية (KPI+رسم ترتيب+جدول فلترة كامل، مختلفة جوهريًا عن
   فورم إدخال عادي) محتاجة مساحة حقيقية تختلف عن `.wide` (اللي اتصغّرت عمدًا لفورمات الإدخال
   جولة 70) — كلاس مستقل `report` بعرض/ارتفاع أكبر بكتير، مقصور على شاشات التقارير بس. */
.overlay-card.report{max-width:1180px;max-height:88vh}
/* طلب صريح: "زرار الحفظ دايمًا في الجهة الشمال في كل الشاشات الصغيرة" — نقطة واحدة بتستهدف كل
   زرارات الحفظ (id بينتهي بـ"-save") بدون لمس كل فورم لوحده. margin-right:auto فيزيائي (مش
   منطقي/RTL) فبيثبّت الزرار يسار الحاوية دايمًا بغض النظر عن اتجاه النص. */
/* طلب صريح متابعة: "يبقى بعيد عن الحواف" — مسافة واضحة فوقه وتحته وعن الحافة اليسار بدل ما
   يبقى ملزّق في الركن مباشرة (margin-right:auto لازم يفضل هو اللي بيثبّته يسار، مش shorthand). */
/* 🔴 طلب صريح: "ثبت زرار الحفظ، يطلع وينزل، والزرار ثابت" — بيفضل في نفس المكان مرئي دايمًا
   أثناء السكرول جوّه الفورم الطويل بدل ما يتحرك معاه، بـposition:sticky على حافة `.overlay-card`
   السفلية (نفس آلية `.overlay-head` العلوية فوق، sticky top:0) — نقطة CSS واحدة بتستهدف كل
   زرارات الحفظ في النظام بدون لمس كل فورم لوحده. */
button.btn-primary[id$="-save"]{
  display:block;width:fit-content;margin-top:18px;margin-bottom:0;margin-left:10px;margin-right:auto;
  position:sticky;bottom:6px;z-index:2;box-shadow:0 -6px 14px -4px rgba(0,0,0,.35);
}

/* طلب صريح: رسالة تأكيد احترافية (قبول/رفض) بدل confirm() الأصلي — z-index أعلى من .overlay
   العادية عشان تفضل فوق أي نافذة "عرض"/فورم مفتوح أصلًا */
.confirm-overlay{z-index:600}
.confirm-card{
  background:var(--card);border-radius:14px;width:100%;max-width:380px;
  box-shadow:0 24px 70px rgba(0,0,0,.4);border-top:4px solid var(--error);
  padding:22px;text-align:center;
}
#confirm-message{font-size:15px;font-weight:600;line-height:1.6;margin-bottom:18px;white-space:pre-line}
.confirm-actions{display:flex;gap:8px;justify-content:center}
.confirm-actions .btn-sm{flex:1;padding:9px;font-size:14px}
.overlay-head{
  display:flex;justify-content:space-between;align-items:center;
  /* طلب صريح: "خلي مسافة بين الكلام وحواف النافذة، مش ماسك فيها" — padding أفقي أكبر.
     طلب صريح متابعة: "قلل الطول بردوا" — padding الرأسي نزل من 18px لـ12px */
  padding:12px 40px;border-bottom:1px solid var(--border);position:sticky;top:0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 6%, var(--card)), var(--card));
  z-index:1;
}
.overlay-head h3{margin:0;font-size:18px;font-weight:800}
.btn-ghost-dark{background:none;border:1px solid var(--border);border-radius:8px;width:32px;height:32px;cursor:pointer;color:var(--text);font-size:15px;transition:background .15s,transform .15s}
.btn-ghost-dark:hover{background:color-mix(in srgb, var(--error) 12%, transparent);color:var(--error);transform:rotate(90deg)}
/* طلب صريح متابعة: "مش ماسك في الحواف" — فراغ واضح بين محتوى النافذة وحوافها هي نفسها (مش حواف
   الشاشة، اللي اتظبطت قبل كده) */
/* طلب صريح متابعة: "قلل الطول بردوا" — padding الرأسي نزل من 22px لـ14px (الأفقي فضل زي ما هو) */
.overlay-body{padding:14px 40px}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px}
@media (max-width:480px){.detail-grid{grid-template-columns:1fr}}
.detail-row{
  display:flex;flex-direction:column;gap:4px;padding:11px 14px;border-radius:10px;
  background:var(--bg);border:1px solid var(--border);border-right:3px solid color-mix(in srgb, var(--primary) 45%, var(--border));
  font-size:13.5px;transition:box-shadow .15s,border-color .15s;
}
.detail-row:hover{box-shadow:0 2px 8px rgba(0,0,0,.08);border-right-color:var(--primary)}
.detail-row span:first-child{color:var(--muted);font-size:11.5px;font-weight:600}
.detail-row span:last-child{font-weight:800;color:var(--text);font-size:14px}
.detail-row.full-width{grid-column:1 / -1}
/* طلب صريح: "الشاشات الكبيرة خليها نفس الشاشة التانية واعمل اسكرول للبيانات تطلع وتنزل" —
   جدول التوزيع الشهري (12-36+ صف) كان بيكبّر نافذة "عرض" كلها لحد ما العنوان نفسه يتزاحم مع
   زرار الإغلاق على الشاشات المتوسطة/الكبيرة؛ بقى صندوق مستقل بارتفاع ثابت وسكرول داخلي خاص
   بيه بس (رأس الجدول ثابت `sticky` وهو بيتسكرول) — الهيدر وبيانات البند فوقه فضلوا ثابتين
   ومضغوطين، نقطة واحدة (`scheduleTableHtml()`) بتأثر على كل شاشات الجدول الزمني. */
.mini-schedule{margin-top:14px}
.mini-schedule-scroll{max-height:260px;overflow-y:auto;border:1px solid var(--border);border-radius:10px}
.mini-schedule table{font-size:13px;margin:0}
.mini-schedule thead th{position:sticky;top:0;background:var(--card);z-index:1;box-shadow:0 1px 0 var(--border)}

/* ===== أزرار إجراءات نافذة العرض — بارزة ومصمتة بألوان دلالية مختلفة لكل فعل ===== */
.overlay-actions{
  /* طلب صريح: "خلي الأزرار في وسط الشاشة" + "خلي مسافة بينها وبين اللي تحتها" */
  display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 6px;padding-top:14px;border-top:1px solid var(--border);
  justify-content:center;
  /* طلب صريح: "الأزرار تبقى ظاهرة دايمًا ولو الداتا كتير يبقى فيه اسكرول جوّه" — نفس فكرة
     `.overlay-head{position:sticky;top:0}` بالظبط بس في آخر النافذة بدل أولها، فالمحتوى
     (سير الاعتماد الطويل مثلًا) بيسكرول لوحده وزرارات حذف/طباعة/تعديل تفضل ظاهرة ثابتة. */
  position:sticky;bottom:0;background:var(--card);z-index:2;
}
.overlay-actions .btn-sm{
  /* طلب صريح: "خلي شكله احترافي" — الأزرار كانت بتتمدد (flex:1) لتملا الصف كامل فبتبان كتل ضخمة
     غير احترافية؛ بقت بحجم محتواها بس (نقطة مشتركة واحدة بتأثر على كل شاشات النظام). */
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 18px;font-size:13px;font-weight:700;border-radius:8px;border:none;color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.overlay-actions .btn-sm:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.2)}
.overlay-actions .btn-sm:active{transform:translateY(0)}
.overlay-actions .btn-info{background:linear-gradient(135deg,#8a5cf6,#6425d6);border-color:transparent}
.overlay-actions .btn-toggle-on{background:linear-gradient(135deg,#e2983a,#c2730f);border-color:transparent}
.overlay-actions .btn-danger{background:linear-gradient(135deg,#ef4444,#b91c1c);border-color:transparent}
.overlay-actions .btn-approve{background:linear-gradient(135deg,#22c55e,#15803d);border-color:transparent}
.overlay-actions .btn-sm:not(.btn-info):not(.btn-toggle-on):not(.btn-danger):not(.btn-approve){background:linear-gradient(135deg,#64748b,#3f4a5c)}

/* ===== توهّج مؤقت لما توصل لسجل جاي من رابط عميق (مثلًا "فتح الشاشة الأصلية" من التذكيرات) ===== */
@keyframes record-highlight-pulse{
  0%,100%{box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 55%, transparent)}
  50%{box-shadow:0 0 0 7px color-mix(in srgb, var(--primary) 20%, transparent)}
}
.record-highlight{animation:record-highlight-pulse 1s ease-in-out 2;border-color:var(--primary) !important}

/* ===== شريط إجراءات سريعة + صف إحصاءات مصغّرة بالرئيسية ===== */
.quick-actions-bar{
  display:flex;gap:10px;overflow-x:auto;padding:4px 2px 14px;-webkit-overflow-scrolling:touch;
}
.quick-action{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;
  border:1px solid var(--border);background:var(--card);border-radius:12px;padding:10px 14px;
  cursor:pointer;font-family:inherit;color:var(--text);min-width:84px;transition:transform .12s,box-shadow .12s;
}
.quick-action:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.1);border-color:color-mix(in srgb, var(--c) 40%, var(--border))}
.quick-action span:last-child{font-size:11.5px;font-weight:700;white-space:nowrap}

.mini-stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:18px}
.mini-stat{
  background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px 14px;
  cursor:pointer;transition:box-shadow .12s;
}
.mini-stat:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}
.mini-stat b{display:block;font-size:20px;color:var(--primary)}
.mini-stat span{font-size:12px;color:var(--muted)}

.home-split-row{display:flex;gap:16px;flex-wrap:wrap}
.home-split-row .card{min-width:280px}
@media (max-width:760px){
  .home-split-row{flex-direction:column}
}

/* طلب صريح: الترحيب + الإجراءات السريعة يفضلوا ثابتين فوق الشاشة الرئيسية وقت السكرول،
   وباقي المحتوى (كروت المؤشرات/الجدول) يسكرول عادي تحتهم */
.home-sticky-top{position:sticky;top:0;z-index:20;background:var(--bg);padding-top:1px;margin-top:-1px}
.hero-welcome{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff;border-radius:var(--radius);padding:24px 28px;margin-bottom:18px;
  display:flex;align-items:center;justify-content:space-between;
}
.hero-welcome h2{margin:0 0 4px}
.hero-welcome p{margin:0;color:#c9d3ec;font-size:14px}
tr.row-clickable{cursor:pointer}

/* ===== التقويم الموحّد (قسم جديد) ===== */
.cal-legend{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px;font-size:12px;color:var(--muted)}
.cal-legend span{display:flex;align-items:center;gap:5px}
.cal-dot{display:inline-block;width:8px;height:8px;border-radius:50%}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-grid-head{margin-bottom:4px}
.cal-cell-head{text-align:center;font-size:12px;font-weight:700;color:var(--muted);padding:4px 0}
.cal-cell{min-height:64px;border:1px solid var(--border);border-radius:8px;padding:6px;position:relative;background:var(--card)}
.cal-cell-empty{border:none;background:transparent}
.cal-cell-today{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary) inset}
.cal-cell-active{background:color-mix(in srgb, var(--primary) 12%, var(--card))}
.cal-cell-num{font-size:13px;font-weight:700}
.cal-cell-dots{display:flex;gap:3px;margin-top:6px;flex-wrap:wrap}
.cal-cell-count{position:absolute;bottom:4px;left:6px;font-size:11px;color:var(--muted)}

/* ===== فولدرات أرشيف المستندات (احترافي، أيقونة بلا صندوق — نفس قرار 156/160) ===== */
.doc-folder-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-bottom:16px}
.doc-folder-tile{
  position:relative;text-align:center;padding:16px 8px 12px;border-radius:14px;cursor:pointer;
  transition:transform .15s,background .15s;
}
.doc-folder-tile:hover{transform:translateY(-3px);background:color-mix(in srgb, var(--primary) 6%, transparent)}
.doc-folder-tile-icon{font-size:44px;display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25))}
.doc-folder-tile-name{font-weight:700;font-size:13px;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-folder-tile-count{font-size:11px;color:var(--muted);margin-top:2px}
.doc-folder-tile-del{
  position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:50%;border:none;
  background:color-mix(in srgb, var(--error) 85%, transparent);color:#fff;font-size:12px;line-height:22px;
  opacity:0;transition:opacity .15s;cursor:pointer;
}
.doc-folder-tile:hover .doc-folder-tile-del{opacity:1}