/* ===== تصميم BCHR — الخيار الثالث: خلفية عاجية، أزرق BCHR البحري، ولمسات مرجانية للتنبيه ===== */
:root{
  --p:#0d4a78; --p2:#155f95; --pd:#0a3a5f; --pl:#e8f0f6; --pl2:#d7e6f1;
  --bg:#f7f4ec; --card:#fffdf9; --tx:#15293c; --mu:#667381; --bd:#e7e0d1; --bd2:#efe9dc;
  --ac:#d9644a; --acl:#fcebe5; --gn:#2d7a52; --gnl:#e3f1e8; --am:#a0650e; --aml:#fbf0da; --rd:#bf3b28; --rdl:#fbe6e1;
  --r:16px; --sh1:0 1px 2px rgba(40,34,20,.05); --sh2:0 1px 2px rgba(40,34,20,.05),0 6px 18px rgba(40,34,20,.06);
  --sh3:0 10px 26px rgba(13,74,120,.22); --ease:cubic-bezier(.2,.8,.2,1);
}
body{background:var(--bg);color:var(--tx)}
main{max-width:720px;padding:10px 14px 8px}
h2{color:var(--p)}h3,.sec-h{color:var(--tx)}

/* ===== الشريط العلوي: شعار BCHR في الوسط، الحساب في البداية، حالة الاتصال في النهاية ===== */
header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;background:rgba(247,244,236,.92);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);box-shadow:0 1px 0 var(--bd);
  padding:calc(6px + env(safe-area-inset-top,0px)) 12px 6px}
header::after{display:none}
.hdr-logo{height:40px;width:auto;justify-self:center;display:block;transition:height .25s var(--ease)}
header.scrolled .hdr-logo{height:30px}
.hdr-btn{width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;background:var(--pl);color:var(--p);border:0;display:grid;place-items:center;font-weight:700;font-size:14px}
.hdr-btn svg{width:20px;height:20px}
.hdr-end{justify-self:end;display:flex;align-items:center}
#net{font-size:11px;padding:2px 9px;line-height:18px}
.on{background:var(--gnl);color:var(--gn)}.off{background:var(--rdl);color:var(--rd)}

/* ===== عنوان الصفحة ===== */
.page-head{text-align:center;margin:6px 0 14px}
.page-head h1{margin:0;font-size:23px;line-height:1.35;color:var(--p);font-weight:700}
.page-head p{margin:2px 0 0;color:var(--mu);font-size:13.5px}

/* ===== البطاقات والعناصر ===== */
.card{background:var(--card);border:1px solid var(--bd2);border-radius:var(--r);box-shadow:var(--sh1)}
.item{background:var(--card);box-shadow:var(--sh1),0 0 0 1px var(--bd2);border-radius:var(--r)}
.item:hover{box-shadow:var(--sh2),0 0 0 1px var(--bd)}
.ico.blue{background:var(--pl);color:var(--p2)}.ico.amber{background:var(--aml);color:var(--am)}
.ico.green{background:var(--gnl);color:var(--gn)}.ico.red{background:var(--rdl);color:var(--rd)}
.kv{border-top-color:var(--bd2)}
.empty-state{background:var(--card);border-color:var(--bd)}
.stat{background:var(--card);box-shadow:0 0 0 1px var(--bd2)}.stat b{color:var(--p)}
.grp{background:var(--pl);color:var(--p)}
.tbl{background:var(--card);box-shadow:0 0 0 1px var(--bd2)}th{background:#f8f5ee;color:#4d5a67}tbody tr:nth-child(even) td{background:#fcfaf5}

/* ===== الأزرار ===== */
.primary{background:linear-gradient(135deg,var(--p2),var(--pd));color:#fff;box-shadow:0 6px 16px rgba(13,74,120,.22)}
.secondary{background:var(--pl);color:var(--p)}
.ghost{background:var(--card);border:1.5px solid var(--bd);color:var(--tx)}.ghost:hover{background:#fff}
.danger{background:var(--card);color:var(--rd);border:1.5px solid #e9b3a8}.danger:hover{background:var(--rdl)}
.big{border-radius:14px;min-height:54px;font-size:17px}
button:focus-visible,a:focus-visible,[role=button]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #e8a33a;outline-offset:2px}

/* ===== الحقول ===== */
input,select,textarea{background:#fff;border:1.5px solid var(--bd);border-radius:12px}
input:focus,select:focus,textarea:focus{border-color:var(--p2);box-shadow:0 0 0 4px rgba(21,95,149,.13)}
label{color:#44515e}
[aria-invalid=true]{border-color:var(--rd)!important;background:#fffafa!important}
.fe{margin:4px 2px 0;font-size:12.5px;color:var(--rd);font-weight:600}
.fe::before{content:"⚠ "}
/* حقل بأيقونة (الدخول والتسجيل) */
.fld{position:relative;display:block;margin-bottom:12px}
.fld>span{display:block;font-size:13px;font-weight:600;color:#44515e;margin-bottom:4px}
.fld .in{position:relative}
.fld .in>svg{position:absolute;top:50%;right:14px;width:20px;height:20px;transform:translateY(-50%);color:var(--p2);pointer-events:none}
.fld .in input,.fld .in select{margin:0;padding-right:44px;min-height:50px}
.fld .eye{position:absolute;top:50%;left:6px;transform:translateY(-50%);width:40px;height:40px;min-height:40px;padding:0;border-radius:10px;background:none;border:0;color:var(--mu);display:grid;place-items:center}
.fld .eye svg{width:20px;height:20px}
.fld .in input.has-eye{padding-left:48px}

/* ===== الحالات ===== */
.st{border-radius:20px;padding:3px 10px;font-weight:700}
.pending{background:var(--aml);color:var(--am)}.failed{background:var(--rdl);color:var(--rd)}.synced{background:var(--gnl);color:var(--gn)}
.st.draft{background:#eef1f4;color:#4d5a67}.st.sending{background:var(--pl);color:var(--p2)}
.st.sending::before{content:"";display:inline-block;width:9px;height:9px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;margin-inline-end:5px;vertical-align:-1px;animation:spin .8s linear infinite}

/* ===== الرئيسية ===== */
.welcome{text-align:center;margin:4px 0 14px}
.welcome small{display:block;color:var(--mu);font-size:13px}
.welcome h1{margin:0;font-size:24px;color:var(--p);line-height:1.35}
.welcome .role{display:inline-block;margin-top:4px;font-size:12px;font-weight:700;color:var(--p2);background:var(--pl);border-radius:20px;padding:2px 12px}
.welcome .meta{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:12.5px;color:var(--mu)}
.welcome .meta span{display:inline-flex;align-items:center;gap:4px}.welcome .meta svg{width:14px;height:14px}
.welcome .icon-btn{background:var(--pl);color:var(--p);border:0}
.hero-act{width:100%;display:flex;align-items:center;gap:14px;text-align:right;border:0;border-radius:18px;padding:16px 18px;margin-bottom:12px;
  background:linear-gradient(135deg,var(--p2),var(--pd));color:#fff;box-shadow:var(--sh3);min-height:72px}
.hero-act .ti{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}
.hero-act .ti svg{width:26px;height:26px}
.hero-act b{display:block;font-size:19px;line-height:1.3}.hero-act small{display:block;font-size:12.5px;opacity:.88;font-weight:400}
.hero-act .chev{margin-inline-start:auto;font-size:22px;opacity:.9}
.todo{background:var(--card);border-radius:var(--r);box-shadow:var(--sh1),0 0 0 1px var(--bd2);margin-bottom:12px;overflow:hidden}
.todo button{width:100%;display:flex;align-items:center;gap:12px;text-align:right;background:none;border:0;border-radius:0;padding:12px 14px;min-height:62px;color:var(--tx)}
.todo button+button{border-top:1px solid var(--bd2)}
.todo .ti{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--pl);color:var(--p2);flex:none}
.todo .ti svg{width:21px;height:21px}.todo .warn .ti{background:var(--acl);color:var(--ac)}.todo .fail .ti{background:var(--rdl);color:var(--rd)}
.todo b{display:block;font-size:15px}.todo small{display:block;color:var(--mu);font-size:12.5px;font-weight:400}
.todo .chev{margin-inline-start:auto;color:var(--mu);font-size:18px}
.tiles{gap:10px}
.tile{background:var(--card);box-shadow:var(--sh1),0 0 0 1px var(--bd2);min-height:100px}
.tile .ti{background:var(--pl);color:var(--p2)}
.tile.t-coral{background:var(--acl);box-shadow:0 0 0 1px #f5d5cb}.tile.t-coral .ti{background:#fff;color:var(--ac)}
.tile.t-blue{background:var(--pl);box-shadow:0 0 0 1px var(--pl2)}.tile.t-blue .ti{background:#fff;color:var(--p2)}
.tile.has-pend small{color:var(--ac)}
.tile-primary{background:linear-gradient(135deg,var(--p2),var(--pd))}
.notice{background:var(--card);box-shadow:var(--sh1),inset 0 0 0 1.5px #f1c9bd}
.count{background:var(--ac)}.pulse{background:var(--ac)}
/* المشهد الميداني: خفيف في البداية والدخول والرئيسية فقط */
.scene{height:118px;margin:14px -14px -8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M0 64C50 44 96 58 150 46S260 26 320 42 380 50 400 44V120H0Z' fill='%23dde9ee'/%3E%3Cpath d='M0 82C60 66 120 88 190 74S300 58 400 76V120H0Z' fill='%23cadde3'/%3E%3Cg fill='%23ece3cf'%3E%3Crect x='232' y='64' width='14' height='10' rx='1'/%3E%3Crect x='250' y='61' width='18' height='13' rx='1'/%3E%3Crect x='271' y='66' width='11' height='8' rx='1'/%3E%3C/g%3E%3Cpath d='M0 98C90 86 170 106 250 92S360 88 400 96V120H0Z' fill='%23ede6d4'/%3E%3Cpath d='M110 120C150 104 180 100 205 96' stroke='%23f6f1e6' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cg fill='%2387a9b3'%3E%3Cellipse cx='42' cy='76' rx='7' ry='13'/%3E%3Cellipse cx='58' cy='80' rx='5' ry='10'/%3E%3Cellipse cx='330' cy='80' rx='6' ry='12'/%3E%3Cellipse cx='345' cy='84' rx='5' ry='9'/%3E%3Cellipse cx='150' cy='88' rx='5' ry='9'/%3E%3C/g%3E%3Cg stroke='%2387a9b3' stroke-width='1.6'%3E%3Cpath d='M42 88v8M58 90v7M330 92v7M345 93v6M150 97v5'/%3E%3C/g%3E%3Cpath d='M300 20q4-3 8 0q4-3 8 0M322 28q3-2 6 0q3-2 6 0' stroke='%239fb7bf' stroke-width='1.3' fill='none'/%3E%3C/svg%3E") bottom center/cover no-repeat;pointer-events:none}
.fund{display:flex;flex-direction:column;align-items:center;gap:2px;margin:8px 0 4px;color:var(--mu);font-size:12px}
.fund img{height:40px}
.foot{border-top:0;color:var(--mu)}

/* ===== الشاشة الافتتاحية: قصيرة وتتبع جاهزية المحتوى ===== */
#splash{background:var(--bg);justify-content:flex-start;padding-top:22vh;gap:14px}
#splash .org{width:min(230px,60vw)}
#splash .ttl{font-size:24px;color:var(--p)}
#splash .load{width:150px;height:6px;border-radius:4px;background:var(--pl2);overflow:hidden}
#splash .load i{display:block;width:40%;height:100%;border-radius:4px;background:var(--p2);animation:slide 1.1s ease-in-out infinite}
#splash .msg{font-size:13px;color:var(--mu)}
#splash .scene{position:absolute;bottom:88px;left:0;right:0;margin:0;height:150px}
#splash .by{position:absolute;bottom:18px;left:0;right:0;justify-content:center;flex-direction:column;gap:2px}
@keyframes slide{0%{transform:translateX(160%)}100%{transform:translateX(-260%)}}

/* ===== الدخول وانتظار التفعيل ===== */
.auth{max-width:440px;margin:0 auto}
.auth .logo{display:block;width:min(220px,62%);margin:6px auto 8px}
.auth .seg{margin-bottom:12px}
.auth .primary.big{margin-top:4px}
.pend-ico{width:96px;height:96px;margin:6px auto 8px;border-radius:50%;background:var(--pl);color:var(--p);display:grid;place-items:center}
.pend-ico svg{width:46px;height:46px}

/* ===== شريط التنقل ===== */
nav{background:#fffdf9;border-top:1px solid var(--bd)}
nav button{color:#7a8591}
nav button svg{background:none!important;width:44px;height:28px;padding:2px 10px}
nav button.act{color:var(--p);font-weight:700;background:none!important}
nav button.act::after{content:"";position:absolute;bottom:1px;width:26px;height:3px;border-radius:3px;background:var(--p)}
.nbadge{background:var(--ac)}

/* ===== المواد والأصول: بطاقات على الهاتف، وجدول كامل على الشاشات الواسعة ===== */
.m-cards{display:grid;gap:8px}
.m-card{background:var(--card);border-radius:14px;box-shadow:var(--sh1),0 0 0 1px var(--bd2);padding:10px 12px}
.m-card[data-m]{cursor:pointer}
.m-card .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.m-card .top b{font-size:14.5px}.m-card .top small{color:var(--mu);font-size:12px;flex:none}
.m-card .nums{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px;text-align:center}
.m-card .nums div{background:#faf7f0;border-radius:10px;padding:5px 2px}
.m-card .nums span{display:block;font-size:11px;color:var(--mu)}.m-card .nums b{display:block;font-size:15px;direction:ltr;color:var(--tx)}
.m-card .nums .left b{color:var(--ac)}.m-card .nums .neg b{color:var(--rd)}
.m-card .meta{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:4px;font-size:12px;color:var(--mu)}
.m-grp{font-weight:700;color:var(--p);font-size:13.5px;margin:10px 4px 2px}
.wide-only{display:none}
@media (min-width:700px){.wide-only{display:block}.narrow-only{display:none}}

/* ===== خطوات التقرير اليومي ===== */
.wiz{display:flex;margin:4px 0 14px;position:relative;list-style:none;padding:0}
.wiz li{flex:1;position:relative;text-align:center}
.wiz li::before{content:"";position:absolute;top:18px;left:50%;width:100%;height:2px;background:var(--bd)}   /* الخط يصل الخطوة بالسابقة على يمينها */
.wiz li:first-child::before{display:none}
.wiz li.done::before,.wiz li.cur::before{background:var(--p2)}
.wiz button{background:none;border:0;min-height:auto;padding:0;display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;color:var(--mu);font-size:12px;position:relative;z-index:1}
.wiz button span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid #cfd8e1;font-weight:700;font-size:14px;color:var(--mu)}
.wiz li.cur button{color:var(--p);font-weight:700}.wiz li.cur span{background:var(--p2);border-color:var(--p2);color:#fff;box-shadow:0 0 0 5px rgba(21,95,149,.14)}
.wiz li.done span{background:var(--pl);border-color:var(--p2);color:var(--p2)}
.wiz-title{margin:0 0 12px}.wiz-title h2{margin:0;font-size:20px}.wiz-title p{margin:0;color:var(--mu);font-size:13px}
.review{background:var(--card);border-radius:var(--r);box-shadow:var(--sh1),0 0 0 1px var(--bd2);padding:12px 14px;margin-bottom:12px}
.review h3{margin:0 0 6px;color:var(--p)}
.offline-note{display:flex;align-items:center;gap:8px;background:var(--gnl);color:var(--gn);border-radius:12px;padding:9px 12px;font-size:13px;font-weight:600;margin-bottom:10px}

/* ===== الإدارة: كثيفة ومنظمة، والحذف منفصل بصرياً ===== */
.adm-actions{display:flex;gap:8px}.adm-actions button{flex:1}
.adm-danger{margin-top:14px;padding-top:12px;border-top:1px dashed var(--bd);text-align:center}
.adm-danger button{background:none;border:0;color:var(--rd);text-decoration:underline;min-height:40px;font-weight:600}

/* ===== ورقة الحساب ===== */
#acc-sheet{position:fixed;inset:0;z-index:30;background:rgba(15,27,45,.35);display:flex;align-items:flex-end;justify-content:center}
#acc-sheet .sheet{width:100%;max-width:520px;background:var(--card);border-radius:22px 22px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 30px rgba(15,27,45,.2);animation:fadeUp .25s var(--ease)}
#acc-sheet .who{text-align:center;margin-bottom:12px}#acc-sheet .who b{display:block;font-size:18px;color:var(--p)}#acc-sheet .who span{font-size:13px;color:var(--mu)}
#acc-sheet .sheet button{width:100%;margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:8px}
#acc-sheet .sheet button svg{width:18px;height:18px}

#toast{background:#15293c}
@media (max-width:360px){main{padding:8px 10px}.page-head h1{font-size:21px}.hero-act b{font-size:17px}.tile .lbl{font-size:14px}.welcome h1{font-size:21px}}
@media (prefers-reduced-motion:reduce){#splash .load i,.st.sending::before{animation:none}}
@media print{.scene,.fund,#acc-sheet{display:none!important}}

/* ===== الحركة: انتقال انسيابي بين الصفحات، وظهور متتابع للعناصر، وحركة خفيفة للرموز ===== */
@keyframes pgFwd{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}   /* في RTL: الصفحة التالية تأتي من اليسار */
@keyframes pgBack{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.82)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}
main.page-forward{animation:pgFwd .34s var(--ease) both}
main.page-back{animation:pgBack .34s var(--ease) both}
/* العناصر تظهر تباعاً (أول ثمانية فقط حتى لا تتأخر الصفحات الطويلة) */
main.page-forward>*,main.page-back>*{animation:rise .42s var(--ease) both}
main>*:nth-child(2){animation-delay:.03s}main>*:nth-child(3){animation-delay:.06s}main>*:nth-child(4){animation-delay:.09s}
main>*:nth-child(5){animation-delay:.12s}main>*:nth-child(6){animation-delay:.15s}main>*:nth-child(7){animation-delay:.18s}main>*:nth-child(n+8){animation-delay:.2s}
:is(main.page-forward,main.page-back) .tiles>.tile{animation:rise .45s var(--ease) both}
.tiles>.tile:nth-child(2){animation-delay:.05s}.tiles>.tile:nth-child(3){animation-delay:.1s}.tiles>.tile:nth-child(4){animation-delay:.15s}.tiles>.tile:nth-child(n+5){animation-delay:.2s}
/* الرموز */
nav button.act svg{animation:pop .42s var(--ease)}
nav button.act::after{animation:grow .3s var(--ease) both;transform-origin:center}
nav button{transition:color .25s var(--ease)}
.hero-act .chev,.todo .chev{transition:transform .25s var(--ease)}
.hero-act:hover .chev,.todo button:hover .chev{animation:nudge .6s var(--ease)}
.hero-act .ti svg,.tile .ti svg{transition:transform .3s var(--ease)}
.hero-act:hover .ti svg,.tile:hover .ti svg{transform:scale(1.1) rotate(-4deg)}
.tile,.item,.m-card,.hero-act,.todo button{transition:transform .18s var(--ease),box-shadow .25s var(--ease),background .2s}
@media (hover:hover){.tile:hover,.m-card[data-m]:hover{transform:translateY(-2px);box-shadow:var(--sh2),0 0 0 1px var(--bd)}}
.tile:active,.item:active,.m-card:active,.hero-act:active,.todo button:active{transform:scale(.975)}
button{transition:transform .12s var(--ease),box-shadow .2s,background .2s,filter .2s}
.st{transition:background .3s,color .3s}
/* خطوات التقرير */
@keyframes stIn{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes stBack{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
.step-in{animation:stIn .36s var(--ease) both}.step-back{animation:stBack .36s var(--ease) both}
.wiz span{transition:background .3s var(--ease),border-color .3s,color .3s,box-shadow .3s}
.wiz li::before{transition:background .35s var(--ease)}
.wiz li.cur span{animation:pop .4s var(--ease)}
.fe{animation:rise .25s var(--ease) both}
[aria-invalid=true]{animation:shake .3s ease}
@keyframes shake{25%{transform:translateX(3px)}75%{transform:translateX(-3px)}}
/* ورقة الحساب تنزلق من الأسفل */
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
#acc-sheet{animation:fade .2s ease both}#acc-sheet .sheet{animation:sheetUp .32s var(--ease) both}
@keyframes fade{from{opacity:0}to{opacity:1}}
/* الشاشة الافتتاحية تتلاشى بلطف */
#splash{transition:opacity .4s var(--ease),transform .4s var(--ease)}#splash.out{transform:scale(1.03)}
/* بطاقة الإدارة البارزة */
.adm-hot{width:100%;display:flex;align-items:center;gap:12px;text-align:right;border:0;border-radius:18px;padding:14px 16px;margin-bottom:12px;background:var(--acl);color:var(--tx);box-shadow:0 0 0 1px #f3cfc4;min-height:72px}
.adm-hot .ti{width:46px;height:46px;border-radius:50%;background:#fff;color:var(--ac);display:grid;place-items:center;flex:none}.adm-hot .ti svg{width:24px;height:24px}
.adm-hot .tx{flex:1}.adm-hot b{display:block;font-size:16px;color:var(--p)}.adm-hot small{display:block;color:var(--mu);font-size:12.5px;font-weight:400}
.adm-hot strong{font-size:28px;color:var(--ac);direction:ltr}.adm-hot .chev{color:var(--ac);font-size:20px}
@media (prefers-reduced-motion:reduce){
  main.page-forward,main.page-back,main>*,.tiles>.tile,.step-in,.step-back,.fe,[aria-invalid=true],#acc-sheet,#acc-sheet .sheet,nav button.act svg,nav button.act::after,.wiz li.cur span{animation:none!important}
  .tile,.item,.m-card,.hero-act,.todo button,button{transition:none!important}
}

/* ثبات مواضع الشريط العلوي حتى لو اختفى زر الحساب (شاشة الدخول) */
#acc{grid-column:1;justify-self:start}.hdr-logo{grid-column:2}.hdr-end{grid-column:3;justify-self:end}
#net{white-space:nowrap}
/* التركيز البرمجي على عنوان الصفحة لقارئ الشاشة، دون إطار ظاهر */
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
.tiles>.tile.wide{grid-column:1/-1}
@media (min-width:700px){.scene{-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}}

/* ===== حالات التحميل ===== */
.empty.loading{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--mu)}
.empty.loading::before{content:"";width:18px;height:18px;border-radius:50%;border:2.5px solid var(--pl2);border-top-color:var(--p2);animation:spin .8s linear infinite;flex:none}
/* تفصيل البند داخل بطاقته */
.icard[aria-expanded=true]{box-shadow:var(--sh2),0 0 0 1.5px var(--p2)}
.idet-list{margin-top:8px;border-top:1px dashed var(--bd);padding-top:6px;display:grid;gap:4px}
.idet-list div{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:8px;font-size:12.5px}
.idet-list small{grid-column:1/-1;color:var(--mu);margin-top:-2px}
.idet-list b{text-align:left;direction:ltr}
@media (prefers-reduced-motion:reduce){.empty.loading::before{animation:none}}

/* ===== الإنجاز حسب المديرية (الرئيسية) ===== */
.dist-sec{margin-bottom:12px}.dist-sec .sec-h{margin-top:4px}
.dist-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.dist{width:100%;text-align:right;border:0;border-radius:var(--r);padding:14px;background:var(--card);box-shadow:var(--sh1),0 0 0 1px var(--bd2);color:var(--tx);display:block}
.dist-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.dist-top b{font-size:16px;color:var(--p)}.dist-top strong{font-size:24px;color:var(--p2);direction:ltr}
.dist .bar{height:10px;margin:8px 0}
.dist-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:#44515e;font-weight:600}
.dist-meta span{display:inline-flex;align-items:center;gap:5px}.dist-meta svg{width:16px;height:16px;color:var(--p2)}
.dist small{display:block;margin-top:6px;color:var(--am);font-size:11.5px}
:is(main.page-forward,main.page-back) .dist{animation:rise .45s var(--ease) both}
@media (hover:hover){.dist:hover{transform:translateY(-2px);box-shadow:var(--sh2),0 0 0 1px var(--bd)}}
.dist:active{transform:scale(.98)}

.dist-head{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px}.dist-head span{font-weight:700;color:var(--p)}.dist-head strong{font-size:26px;color:var(--p2);direction:ltr}
.a-pct{color:var(--p2);white-space:nowrap;font-size:17px;direction:ltr}