/* ============================================================================
   masar-theme.css  —  ثيم «مسار» المحيطي (Ocean)  ·  v2
   يُركَّب فوق styles.css بدون لمس أي بيانات. للتراجع: احذف سطري الثيم من index.html
   ============================================================================ */
:root{
  --brand:#0e8f9e; --brand-dark:#0b6f7c; --brand-50:#e5f5f6;
  --ocean:      linear-gradient(90deg,#122d54 0%, #135a86 52%, #17a0a0 100%);
  --ocean-soft: linear-gradient(120deg,#0f2c50 0%, #12557f 50%, #159a9a 100%);
  --tbh: 66px;               /* ارتفاع الشريط العلوي */
}

/* ============ 1) الشريط العلوي ممتد بعرض الصفحة كامل + لون محيطي ============ */
.topbar{
  position:fixed !important; top:0; inset-inline:0; width:100% !important; height:var(--tbh);
  z-index:60 !important; padding:0 16px !important; gap:10px !important;
  background:var(--ocean) !important; backdrop-filter:none !important; border-bottom:0 !important;
  color:#fff !important; box-shadow:0 2px 16px rgba(11,44,68,.30) !important;
}
/* دفع الشجرة والمحتوى أسفل الشريط الثابت */
.sidebar{ top:var(--tbh) !important; }
.main{ padding-top:var(--tbh); }
#sidebarShow{ top:calc(var(--tbh) + 12px) !important; }
/* إخفاء عنوان الصفحة القديم (بجوار مسار) */
#pageTitle{ display:none !important; }

/* هوية النظام: مسار */
.tb-brand{ display:flex; align-items:center; gap:11px; }
.tb-mark{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.26); font-size:22px; }
.tb-brandtxt{ display:flex; flex-direction:column; line-height:1.08; }
.tb-bname{ font-size:19px; font-weight:800; }
.tb-bsub{ font-size:11.5px; opacity:.8; font-weight:500; }

/* شريحة الشركة (اسم الشركة أعلى النظام) */
.tb-company{ margin-inline:auto; display:flex; align-items:center; gap:12px; padding:8px 18px;
  border-radius:14px; max-width:440px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2); cursor:pointer; transition:background .16s; }
.tb-company:hover{ background:rgba(255,255,255,.2); }
.tb-lead{ font-size:20px; opacity:.9; }
.tb-cn{ display:flex; flex-direction:column; line-height:1.15; }
.tb-cn b{ font-size:13.5px; font-weight:700; }
.tb-cn span{ font-size:12px; opacity:.82; display:flex; align-items:center; gap:4px; }

/* أيقونات بدون خلفية، تفاعلية */
.tb-tools{ display:flex; align-items:center; gap:2px; }
.tb-ic, .topbar .icon-btn{
  position:relative; width:40px; height:40px; border:0 !important; background:transparent !important;
  color:#fff !important; cursor:pointer; display:grid; place-items:center; font-size:20px; opacity:.9;
  padding:0 !important; border-radius:10px;
  transition:transform .16s ease, opacity .16s ease, filter .16s ease !important;
}
.tb-ic:hover, .topbar .icon-btn:hover{
  background:transparent !important; transform:translateY(-2px) scale(1.14); opacity:1;
  filter:drop-shadow(0 3px 8px rgba(255,255,255,.35)); color:#fff !important;
}
.tb-ic:active, .topbar .icon-btn:active{ transform:scale(.94); }
.tb-en{ font-size:14px; font-weight:800; }
.topbar .notif-badge{ box-shadow:0 0 0 2px rgba(15,44,80,.55); }

/* المستخدم */
.tb-user{ display:flex; align-items:center; gap:10px; padding:5px 6px 5px 14px; border-radius:40px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); }
.tb-un{ font-size:14px; font-weight:600; color:#fff; }
.tb-uav{ width:36px; height:36px; border-radius:50%; background:#fff; color:var(--brand);
  display:grid; place-items:center; font-size:15px; font-weight:700; }

/* ============ 2) الشجرة — لوحة بيضاء + كل موديول داخل إطار مستقل ============ */
.sidebar{ background:#ffffff !important; color:var(--ink) !important; border-inline-start:1px solid var(--line); }
.brand-name{ color:var(--ink) !important; } .brand-sub{ color:var(--ink-soft) !important; }
.sidebar-brand:hover{ background:var(--brand-50) !important; }
.sidebar-ctl button{ background:#f1f4f9 !important; color:var(--ink-soft) !important; border:1px solid var(--line) !important; }
.sidebar-ctl button:hover{ background:var(--brand-50) !important; color:var(--brand-dark) !important; }
.nav{ padding-inline:0 !important; }

/* إطار كل موديول */
.nav-group{
  border:1px solid var(--line); border-radius:14px; background:#fff; margin:0 8px 10px !important;
  overflow:hidden; box-shadow:0 1px 2px rgba(20,40,70,.04);
  transition:box-shadow .18s, border-color .18s;
}
.nav-group:hover{ border-color:#cfe3e6; }
.nav-group:not(.collapsed){ box-shadow:0 8px 22px rgba(15,44,80,.10); }

.nav-grouphead{ color:var(--ink) !important; border-radius:0 !important; padding:12px 13px !important;
  transition:background .16s ease !important; }
.ngh-label{ color:inherit !important; font-weight:600; font-size:14.5px; }
.nav-grouphead:hover{ background:var(--brand-50) !important; }
.ngh-ic{ transition:transform .18s ease, box-shadow .18s ease; }
.nav-grouphead:hover .ngh-ic{ transform:scale(1.08); box-shadow:0 4px 12px rgba(0,0,0,.14); }

/* رأس الموديول المفتوح: تدرّج محيطي متناسق */
.nav-group:not(.collapsed) > .nav-grouphead{ background:var(--ocean-soft) !important; color:#fff !important; }
.nav-group:not(.collapsed) > .nav-grouphead .ngh-chev{ color:#fff !important; opacity:1; }
.nav-group:not(.collapsed) > .nav-grouphead .ngh-ic{ background:rgba(255,255,255,.18) !important; }

/* جسم الموديول مفصول بخط علوي داخل الإطار */
.nav-groupbody{ padding:7px !important; border-top:1px solid var(--line); }
.nav-subhead{ color:var(--ink-soft) !important; }
.nav-item{ color:var(--ink) !important; border-radius:9px !important; margin:1px 0 !important;
  transition:background .15s ease, color .15s, transform .12s ease !important; }
.nav-item span{ font-weight:500; }
.nav-item:hover{ background:var(--brand-50) !important; color:var(--brand-dark) !important; transform:translateX(-3px); }
.nav-item.active{ background:var(--brand-50) !important; color:var(--brand-dark) !important; font-weight:600; }
.nav-item.active::after{ content:""; position:absolute; inset-inline-end:2px; top:8px; bottom:8px;
  width:3px; border-radius:3px; background:var(--brand); }
.nav-item i{ transition:transform .15s ease; } .nav-item:hover i{ transform:scale(1.06); }

/* تذييل المستخدم على الأبيض */
.sidebar-foot{ border-top:1px solid var(--line) !important; }
.user-meta > span:first-child{ color:var(--ink) !important; }
.role-tag{ color:var(--brand) !important; }
.sidebar-foot .btn-ghost{ color:var(--ink-soft) !important; }
.sidebar-foot .btn-ghost:hover{ background:var(--brand-50) !important; color:var(--brand-dark) !important; }

/* ============ 3) مربّعات الموديولات في الرئيسية + تفاعل ============ */
.launcher{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)) !important; gap:22px 18px !important; }
.launch-tile{ background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:6px 4px !important; gap:14px !important; transition:transform .2s ease !important; }
.launch-ic{ width:104px !important; height:104px !important; border-radius:26px !important; font-size:44px !important;
  position:relative; overflow:hidden;
  box-shadow:0 10px 22px rgba(20,40,70,.16), inset 0 1px 0 rgba(255,255,255,.35) !important;
  transition:transform .22s cubic-bezier(.2,.8,.25,1), box-shadow .22s ease !important; }
.launch-ic i{ font-size:44px; }
.launch-ic::after{ content:""; position:absolute; top:0; inset-inline-start:-120%; width:60%; height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg); transition:inset-inline-start .55s ease; }
.launch-lb{ font-size:14.5px !important; font-weight:600 !important; color:var(--ink) !important; }
.launch-tile:hover{ transform:translateY(-8px) !important; }
.launch-tile:hover .launch-ic{ transform:scale(1.06) rotate(-2deg) !important;
  box-shadow:0 20px 38px rgba(20,40,70,.26), inset 0 1px 0 rgba(255,255,255,.4) !important; }
.launch-tile:hover .launch-ic::after{ inset-inline-start:130%; }
.launch-tile:active .launch-ic{ transform:scale(.98) !important; }

/* ============ 4) بوابة الدخول — ثيم محيطي زجاجي ============ */
#loginScreen{ background:linear-gradient(135deg,#0c2545 0%, #114f79 48%, #12908f 100%) !important; }
.login-card{ background:rgba(255,255,255,.10) !important; border:1px solid rgba(255,255,255,.22) !important;
  color:#fff !important; backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 30px 70px rgba(0,0,0,.35) !important; border-radius:22px !important; }
.login-card h1, .login-sub, .login-card label{ color:#fff !important; }
.login-sub{ opacity:.82; }
.login-mark{ background:rgba(255,255,255,.16) !important; color:#fff !important; border:1px solid rgba(255,255,255,.26); }
.login-card input{ background:rgba(255,255,255,.14) !important; border:1px solid rgba(255,255,255,.22) !important; color:#fff !important; }
.login-card input::placeholder{ color:rgba(255,255,255,.6) !important; }
.login-card .btn-primary{ background:linear-gradient(90deg,#12908f,#1466a6) !important; }
.login-card .btn-primary:hover{ filter:brightness(1.08); }

/* ============ 5) لمسات تفاعلية + إعدادات الوصول ============ */
.kpi{ transition:transform .18s ease, box-shadow .18s ease; }
.kpi:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(20,40,70,.10); }
.card{ transition:border-color .18s ease, box-shadow .18s ease; }
.card:hover{ border-color:#cfe3e6; box-shadow:0 8px 22px rgba(20,40,70,.06); }
.tb-ic:focus-visible, .nav-grouphead:focus-visible, .nav-item:focus-visible, .launch-tile:focus-visible{
  outline:2px solid #17a0a0; outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  .tb-ic, .topbar .icon-btn, .nav-grouphead, .nav-item, .launch-tile, .launch-ic, .kpi, .card, .ngh-ic{ transition:none !important; }
  .launch-ic::after{ display:none; }
}

/* ============================================================================
   v3 — خلفية الشجرة، إزالة شعار مسار، خانة بحث، رأس أخضر→أزرق، سكرول لكل موديول
   ============================================================================ */
:root{ --tree-bg:#eaf0f5; --grp-open:linear-gradient(95deg,#0f7d6e 0%, #14618f 60%, #135a86 100%); }

/* خلفية الشاشة خلف الشجرة بنفس لون اللقطة، مع بطاقات بيضاء للموديولات */
.sidebar{ background:var(--tree-bg) !important; }

/* إزالة شعار «مسار» من أعلى الشجرة */
.sidebar-brand{ display:none !important; }
.sidebar-ctl{ padding-top:12px !important; }

/* خانة البحث أعلى الشجرة */
.tree-search{ padding:8px 14px 8px; }
.tree-search .ts-box{ display:flex; align-items:center; gap:8px; padding:10px 13px; border:1px solid #d7e0ea;
  border-radius:12px; background:#fff; transition:border-color .15s, box-shadow .15s; }
.tree-search .ts-box:focus-within{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-50); }
.tree-search .ts-box i{ color:var(--ink-soft); font-size:17px; }
.tree-search .ts-box input{ border:0; outline:0; background:transparent; flex:1; font:inherit; font-size:13.5px; color:var(--ink); }
.sidebar.collapsed .tree-search{ display:none; }   /* تختفي في الوضع المطويّ */

/* سكرول عام للشجرة */
.nav{ flex:1 1 auto; min-height:0; overflow-y:auto; }
.nav::-webkit-scrollbar{ width:9px; } .nav::-webkit-scrollbar-thumb{ background:#c4d0dd; border-radius:8px; }
.nav::-webkit-scrollbar-track{ background:transparent; }

/* رأس الموديول المفتوح: تدرّج أخضر→أزرق مثل اللقطة */
.nav-group:not(.collapsed) > .nav-grouphead{ background:var(--grp-open) !important; }

/* سكرول داخلي لمحتوى كل موديول (ارتفاع مريح محدود) */
.nav-groupbody{ max-height:320px; overflow-y:auto; }
.nav-groupbody::-webkit-scrollbar{ width:7px; } .nav-groupbody::-webkit-scrollbar-thumb{ background:#d5dee8; border-radius:7px; }

/* ============================================================================
   v4 — تنظيف أزرار الشريط + أيقونات آبل شفافة وتفاعلية في كل الشاشات
   ============================================================================ */
/* إخفاء زر اللغة المكرّر الذي يُنشئه محرّك الترجمة (نكتفي بزر EN/ع في الشريط) */
#dirToggle, .dir-toggle, #hadanLangBtn{ display:none !important; }

/* أيقونات آبل عبر كل الشاشات: خلفية شفافة تماماً + تفاعل */
.icon-btn{ background:transparent !important; }
.icon-btn:hover{ background:transparent !important; transform:translateY(-1px) scale(1.12);
  filter:brightness(1.06); transition:transform .16s ease, filter .16s ease; }
.icon-btn:active{ transform:scale(.94); }

/* أزرار إطار «ثيم آبل» في النوافذ (config0) — شفافة مع تفاعل */
.hwc-b{ background:transparent !important; box-shadow:none !important; transition:transform .16s ease, background .16s ease; }
.hwc-b:hover{ background:rgba(18,70,127,.10) !important; transform:scale(1.10); }
.hadan-xclose{ background:transparent !important; box-shadow:none !important; transition:transform .16s ease, background .16s ease, color .16s ease; }
.hadan-xclose:hover{ background:#ff5f57 !important; color:#fff !important; transform:scale(1.08); }

/* أزرار أيقونية ناعمة أخرى تُستخدم في الشاشات */
.btn-ghost{ background:transparent !important; transition:transform .16s ease, color .16s ease; }
.btn-ghost:hover{ background:transparent !important; transform:translateY(-1px) scale(1.08); color:var(--brand-dark) !important; }

/* ============================================================================
   v5 — بطاقات الشجرة أوضح وأجمل + إزالة الإطار الأبيض عن كل أيقونات آبل + تنسيق الشريط
   ============================================================================ */

/* --- (١) بطاقات الموديولات: لون/إطار مميّز عن خلفية الشجرة قبل وبعد الانسدال --- */
.nav-group{
  background:#ffffff !important; border:1px solid #c9d7e6 !important; border-radius:16px !important;
  margin:0 8px 12px !important; box-shadow:0 2px 7px rgba(20,40,70,.07) !important;
}
.nav-group:hover{ border-color:#a9c7d6 !important; box-shadow:0 5px 14px rgba(20,40,70,.10) !important; }
.nav-group:not(.collapsed){ border-color:#8fb9c7 !important; box-shadow:0 12px 28px rgba(15,44,80,.14) !important; }

/* رأس مطويّ: نص داكن على أبيض؛ رأس مفتوح: تدرّج أخضر→أزرق (كما في اللقطة الثانية) */
.nav-grouphead{ padding:13px 14px !important; }
.ngh-label{ font-size:15px !important; font-weight:700 !important; }

/* منطقة الشاشات بعد الانسدال: لوح بإطار داخلي ولون مختلف عن الخلفية + تنسيق أنظف */
.nav-group:not(.collapsed) .nav-groupbody{
  background:#f6f9fc !important; border-top:1px solid #dde7f0 !important;
  max-height:330px; overflow-y:auto; padding:8px !important;
}
.nav-groupbody .nav-item{
  padding:10px 12px !important; margin:2px 4px !important; border-radius:11px !important;
  font-size:14px !important;
}
.nav-groupbody .nav-item:hover{ background:#e5f5f6 !important; }
.nav-groupbody .nav-item.active{ background:#d9f0f2 !important; }   /* حبّة تمييز مثل اللقطة */

/* --- (٢) كل أيقونات آبل بدون إطار أبيض + تفاعلية (الرئيسية وبقية الشاشات) --- */
.launch-ic, .ngh-ic, .kpi-icon, .sc-ic, .tile-ic{
  border:0 !important;
  box-shadow:0 10px 22px rgba(20,40,70,.16) !important;   /* بدون لمعة/إطار أبيض داخلي */
}
.launch-ic::after{ background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent) !important; } /* لمعة أخف بلا حافة */
.launch-tile{ border:0 !important; }
/* تفاعل أيقونات مؤشرات KPI وأيقونات الشجرة */
.kpi-icon{ transition:transform .18s ease, box-shadow .18s ease; }
.kpi:hover .kpi-icon{ transform:scale(1.08) rotate(-2deg); box-shadow:0 12px 24px rgba(20,40,70,.22) !important; }

/* --- (٣) تنسيق أزرار الشريط العلوي: تباعد + فاصل قبل المستخدم + تفاعل --- */
.tb-tools{ gap:4px !important; }
.tb-user{ margin-inline-start:6px; }
.tb-user{ position:relative; }
.tb-user::before{ content:""; position:absolute; inset-inline-start:-9px; top:8px; bottom:8px; width:1px; background:rgba(255,255,255,.22); }
.tb-user{ transition:background .16s ease, transform .16s ease; }
.tb-user:hover{ background:rgba(255,255,255,.2); transform:translateY(-1px); }

/* ============================================================================
   v6 — إزالة الأزرار الزائدة + أيقونات شاشة الرئيسية (#homex) بلا خلفية بيضاء
   ============================================================================ */
/* حذف مجموعة الأزرار المكرّرة (سهم + نجمة + مرجعية + مستخدم) من config10 */
#hadanTopExtra, .htx{ display:none !important; }
/* تحييد تنسيق config10 للشريط (نُبقي شريطنا المحيطي الممتد) */
body.hadan-fixed-top .topbar{ position:fixed !important; border-radius:0 !important; border-bottom:0 !important;
  background:var(--ocean) !important; padding:0 16px !important; margin-bottom:0 !important; box-shadow:0 2px 16px rgba(11,44,68,.30) !important; }

/* بطاقات شاشة «الرئيسية» (#homex): بدون خلفية/إطار أبيض + تفاعلية */
#homex .hp-tile, #homex .hp-tile.hp-big{ background:transparent !important; border:0 !important; box-shadow:none !important; }
#homex .hp-tile:hover{ transform:translateY(-6px) scale(1.03) !important; box-shadow:none !important; border-color:transparent !important; }
#homex .hp-ic{ box-shadow:0 10px 22px rgba(20,40,70,.20) !important; transition:transform .2s cubic-bezier(.2,.8,.25,1), box-shadow .2s ease; }
#homex .hp-tile:hover .hp-ic{ transform:scale(1.07) rotate(-2deg); box-shadow:0 20px 40px rgba(20,40,70,.30) !important; }
#homex .hp-tile:active .hp-ic{ transform:scale(.98); }
#homex .hp-lb{ color:#243447 !important; }

/* ============================================================================
   v7 — مرونة السكرول: ارتفاع الموديول يتكيّف مع حجم الشاشة/التكبير + سكرول موثوق
   ============================================================================ */
/* الشجرة كلها: سكرول عام موثوق مع منع تسرّب العجلة */
.sidebar #nav, .nav{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }

/* محتوى الموديول المفتوح: ارتفاع مرن (يكبر/يصغر مع الشاشة) بدل الرقم الثابت */
.nav-group:not(.collapsed) .nav-groupbody,
.nav-groupbody{
  max-height:clamp(200px, 55vh, 640px) !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* شاشات قصيرة جداً (أو تكبير عالٍ): اجعل الموديول أقصر ليبقى قابلاً للتمرير كاملاً */
@media (max-height:620px){
  .nav-group:not(.collapsed) .nav-groupbody, .nav-groupbody{ max-height:42vh !important; }
}
@media (max-height:460px){
  .nav-group:not(.collapsed) .nav-groupbody, .nav-groupbody{ max-height:38vh !important; }
}

/* ============================================================================
   v7b — احتواء الشريط: منع اقتطاع المستخدم/الخروج + مسافة كافية بعد الأزرار
   ============================================================================ */
.topbar{ padding-inline-start:16px !important; padding-inline-end:22px !important; gap:8px !important; }
.tb-brand{ flex:0 0 auto; }
#topbarActions{ flex:0 1 auto; min-width:0; overflow:hidden; }
/* اسم الشركة يتقلّص بنقاط بدل دفع الأزرار خارج الشاشة */
.tb-company{ max-width:min(400px, 30vw) !important; min-width:0 !important; overflow:hidden; }
.tb-company .tb-cn{ min-width:0; overflow:hidden; }
.tb-company .tb-cn b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
/* الأدوات + المستخدم + الخروج: ثابتة ولا تُقتطع */
.tb-tools{ flex:0 0 auto !important; }
.tb-user{ flex:0 0 auto !important; max-width:190px; }
.tb-user .tb-un{ max-width:130px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* آخر زر (الخروج) يبقى داخل الشاشة مع هامش */
.topbar > .tb-ic:last-child{ flex:0 0 auto; margin-inline-start:2px; }

/* ============================================================================
   v10 — منع انضغاط بطاقات الموديولات (تحتفظ بحجمها فتعمل الشجرة سكرول)
   ============================================================================ */
.sidebar #nav > .nav-group{ flex:0 0 auto !important; }
.nav-grouphead{ flex:0 0 auto !important; }

/* ============================================================================
   OCEAN LEDGER THEME — إعادة تصميم المصفوفات (فواتير/طلبات/تتبّع/دفعات)
   تصميم فقط: لا مساس بالبيانات أو الأعمدة أو المنطق. إضافة CSS بحتة.
   ============================================================================ */

/* حاوية الجدول: إطار وحواف ناعمة بثيم Ocean */
.table-wrap{
  border:1px solid #dbe6ef !important;
  border-radius:16px !important;
  box-shadow:0 6px 22px rgba(11,74,124,.08) !important;
  overflow:hidden !important;
}

/* رأس الجدول — تدرّج Ocean */
.ledger thead th{
  background:linear-gradient(90deg,#122d54,#135a86,#17a0a0) !important;
  color:#fff !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  border-bottom:0 !important;
  text-transform:none !important;
}

/* صفوف: تناوب خفيف + تظليل عند التمرير */
.ledger tbody tr{ transition:background .13s ease !important; }
.ledger tbody tr:nth-child(even) td{ background:#f9fcfd; }
.ledger tbody tr:hover td{ background:var(--brand-50) !important; }
.ledger td{ border-bottom:1px solid #eef3f7 !important; }

/* عمود المسدّد (Paid) بالأحمر — يُحدّد بموقعه لكل جدول */
#invoicesTable tbody td:nth-child(5),
#ordersTable   tbody td:nth-child(8){
  color:#c0392b !important; font-weight:800 !important;
}
/* عمود المتبقّي (Balance) بالأخضر المميّز */
#invoicesTable tbody td:nth-child(6),
#ordersTable   tbody td:nth-child(9){
  color:#0f9d6e !important; font-weight:800 !important;
}
/* فئات عامة (لأي جدول يُضاف لاحقاً أو يُبنى ديناميكياً) */
.ledger td.col-paid{ color:#c0392b !important; font-weight:800 !important; }
.ledger td.col-remain{ color:#0f9d6e !important; font-weight:800 !important; }

/* شارات الحالة — بنفس نمط الصورة */
.ledger .pill{
  display:inline-flex !important; align-items:center; gap:4px;
  border-radius:999px !important; font-weight:700 !important;
  text-transform:none !important; letter-spacing:0 !important;
}

/* روابط أرقام الفواتير */
.ledger a{ color:#1b5fae; font-weight:700; }

/* أزرار الإجراءات — أيقونات آبل تفاعلية + تلميح نصّي */
.ledger .row-actions .btn-mini{
  position:relative;
  border-radius:9px !important;
  transition:transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .14s, background .14s, color .14s !important;
}
.ledger .row-actions .btn-mini:hover{
  transform:translateY(-2px);
  box-shadow:0 5px 13px rgba(11,111,124,.16);
  background:var(--brand-50) !important;
  color:var(--brand-dark) !important;
}
/* تلميح نصّي يظهر عند التمرير — يقرأ نص data-tip (أو title) */
.ledger .row-actions .btn-mini[data-tip]::after{
  content:attr(data-tip);
  position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%) translateY(4px);
  background:#122d54; color:#fff; font-size:11px; font-weight:600;
  padding:5px 9px; border-radius:7px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:.15s; z-index:40;
  box-shadow:0 4px 14px rgba(0,0,0,.2);
}
.ledger .row-actions .btn-mini[data-tip]:hover::after{
  opacity:1; transform:translateX(-50%) translateY(0);
}

/* ============================================================================
   KPI CARDS + FILTERS — بطاقات ملوّنة بنمط الهوية + فلاتر محسّنة
   تصميم فقط: لا مساس بالبيانات أو المحتوى. CSS إضافي بحت.
   يشمل تلقائياً: الفواتير · الطلبات · تتبّع الطلبات · سندات القبض
   (جميعها تستخدم .kpi / .kpi-icon).
   ============================================================================ */

/* البطاقة: خلفية ملوّنة ناعمة + رفعة عند التمرير */
.kpi{
  border-radius:18px !important;
  border:1px solid transparent !important;
  justify-content:space-between !important;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .16s !important;
}
.kpi:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(18,45,84,.1); }

/* أيقونة البطاقة: مربّع متدرّج بظل */
.kpi .kpi-icon{
  width:48px !important; height:48px !important; border-radius:14px !important;
  color:#fff !important; font-size:24px !important;
  box-shadow:0 6px 16px rgba(0,0,0,.12) !important;
  order:2; /* الأيقونة على الجانب */
}
.kpi > div{ order:1; }

/* الرقم أكبر + التسمية أوضح */
.kpi .kpi-value{ font-size:24px !important; font-weight:800 !important; }
.kpi .kpi-label{ font-size:13px !important; font-weight:700 !important; }

/* أخضر — المُحصّل */
.kpi:has(.i-green){ background:linear-gradient(160deg,#eafaf3,#f2fdf8) !important; border-color:#c9edda !important; }
.kpi:has(.i-green) .kpi-label,.kpi:has(.i-green) .kpi-value{ color:#0f7a52 !important; }
.kpi .kpi-icon.i-green{ background:linear-gradient(160deg,#2fc98b,#0f9d6e) !important; }
/* كهرماني — يستحق قريباً */
.kpi:has(.i-amber){ background:linear-gradient(160deg,#fef6e7,#fffaf0) !important; border-color:#f5e2bd !important; }
.kpi:has(.i-amber) .kpi-label,.kpi:has(.i-amber) .kpi-value{ color:#a35d08 !important; }
.kpi .kpi-icon.i-amber{ background:linear-gradient(160deg,#f5b544,#d97706) !important; }
/* أحمر — متأخر */
.kpi:has(.i-red){ background:linear-gradient(160deg,#fdeeed,#fff5f4) !important; border-color:#f6d2ce !important; }
.kpi:has(.i-red) .kpi-label,.kpi:has(.i-red) .kpi-value{ color:#c0392b !important; }
.kpi .kpi-icon.i-red{ background:linear-gradient(160deg,#ef6b5e,#d23b3b) !important; }
/* أزرق — إجمالي المستحق */
.kpi:has(.i-blue){ background:linear-gradient(160deg,#eaf2fe,#f4f9ff) !important; border-color:#cfe0fa !important; }
.kpi:has(.i-blue) .kpi-label,.kpi:has(.i-blue) .kpi-value{ color:#1b5fae !important; }
.kpi .kpi-icon.i-blue{ background:linear-gradient(160deg,#4a9eff,#1b5fae) !important; }
/* رمادي — قيمة إجمالية محايدة */
.kpi:has(.i-gray){ background:linear-gradient(160deg,#f3f6fa,#f9fbfd) !important; border-color:#e2e8f0 !important; }
.kpi:has(.i-gray) .kpi-label,.kpi:has(.i-gray) .kpi-value{ color:#44556b !important; }
.kpi .kpi-icon.i-gray{ background:linear-gradient(160deg,#94a3b8,#5b6678) !important; }

/* احتياط للمتصفّحات القديمة بلا :has — تبقى البطاقة نظيفة بحدّها الأدنى */
@supports not (selector(:has(*))){
  .kpi{ background:#fff !important; }
}

/* ---------- الفلاتر المحسّنة ---------- */
.filters{
  background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:14px 16px; gap:10px !important;
  box-shadow:0 2px 10px rgba(18,45,84,.04);
}
.filter select,.filter input{
  border-radius:11px !important;
  background:#f8fbfc !important;
  border:1px solid #dbe6ef !important;
  transition:.14s !important;
}
.filter select:focus,.filter input:focus{
  outline:none !important;
  border-color:var(--brand) !important;
  background:#fff !important;
  box-shadow:0 0 0 3px rgba(14,143,158,.12) !important;
}

/* ---------- أزرار الإجراءات كأيقونات تفاعلية + تلميح ---------- */
.row-actions .btn-mini.icon-act{
  width:34px; height:34px; padding:0 !important;
  border-radius:10px !important; border:1px solid transparent !important;
  background:transparent !important; color:#5b6b80 !important;
  display:inline-grid !important; place-items:center;
  position:relative;
  transition:transform .14s cubic-bezier(.34,1.56,.64,1), background .14s, color .14s, box-shadow .14s !important;
}
.row-actions .btn-mini.icon-act i{ font-size:18px; margin:0 !important; }
.row-actions .btn-mini.icon-act:hover{
  transform:translateY(-2px);
  background:var(--brand-50) !important; color:var(--brand-dark) !important;
  box-shadow:0 5px 13px rgba(11,111,124,.16);
}
/* لون مميّز للحذف */
.row-actions .btn-mini.icon-act.danger:hover{
  background:#fdeceb !important; color:#c0392b !important;
  box-shadow:0 5px 13px rgba(192,57,43,.18);
}
/* التلميح (اسم الرمز) عند التمرير — يقرأ data-tip */
.row-actions .btn-mini.icon-act[data-tip]::after{
  content:attr(data-tip);
  position:absolute; bottom:calc(100% + 8px); inset-inline-start:50%;
  transform:translateX(50%) translateY(4px);
  background:#122d54; color:#fff; font-size:11px; font-weight:600;
  padding:5px 9px; border-radius:7px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:.15s; z-index:40;
  box-shadow:0 4px 14px rgba(0,0,0,.2);
}
html[dir=ltr] .row-actions .btn-mini.icon-act[data-tip]::after{ transform:translateX(-50%) translateY(4px); }
.row-actions .btn-mini.icon-act[data-tip]:hover::after{
  opacity:1; transform:translateX(50%) translateY(0);
}
html[dir=ltr] .row-actions .btn-mini.icon-act[data-tip]:hover::after{ transform:translateX(-50%) translateY(0); }