:root{--side:#16294a;--side2:#223b69;--side3:#2c4170;--bg:#f4f6fb;--card:#fff;--tx:#17243a;--mut:#69788f;--bd:#e3e8f1;
--blue:#2f5de0;--blue2:#e8eefe;--green:#1c7c46;--green2:#e6f5ec;--orange:#c27410;--orange2:#fff3df;--red:#c62828;--red2:#fdecec;--gold:#b88a2a;
--r:16px;--sh:0 1px 2px rgba(20,35,60,.05),0 6px 20px rgba(20,35,60,.05)}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:-apple-system,"SF Arabic","Segoe UI",Tahoma,Arial,sans-serif;background:var(--bg);color:var(--tx);font-size:15px;line-height:1.55}
button,input,select,textarea{font:inherit;color:inherit}
.hide{display:none!important}
.n{direction:ltr;text-align:right;font-family:-apple-system,"Segoe UI",Arial,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.mut{color:var(--mut)}.red{color:var(--red)}.green{color:var(--green)}.orange{color:var(--orange)}.blue{color:var(--blue)}.b{font-weight:700}

/* ---------- تسجيل الدخول ---------- */
#login{position:fixed;inset:0;background:radial-gradient(1200px 600px at 70% -10%,#274a86 0,var(--side) 55%);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
#login form{width:400px;max-width:100%;background:#fff;border-radius:22px;padding:34px 30px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.35)}
#login img{width:88px;height:88px;border-radius:18px}
#login h2{margin:14px 0 4px;font-size:22px}
#login .sub{color:var(--mut);margin:0 0 22px;font-size:14px}
#login .f{text-align:right}

/* ---------- الهيكل ---------- */
.layout{display:grid;grid-template-columns:290px 1fr;min-height:100vh;direction:ltr}
aside{background:var(--side);color:#fff;padding:24px 20px;display:flex;flex-direction:column;direction:rtl;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;align-items:center;gap:14px;padding:4px 4px 22px;border-bottom:1px solid var(--side3);margin-bottom:20px}
.brand img{width:58px;height:58px;border-radius:12px;object-fit:cover}
.brand b{font-size:20px;display:block;direction:ltr;text-align:right;line-height:1.2}
.brand small{opacity:.78;direction:ltr;display:block;text-align:right;font-size:13px}
.menu button{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:0;color:#cfd9ef;font-size:15.5px;padding:12px 16px;border-radius:12px;cursor:pointer;margin-bottom:4px;direction:ltr;text-align:right}
.menu button span:last-child{direction:rtl}
.menu button i{font-style:normal;opacity:.55;font-size:13px;font-variant-numeric:tabular-nums}
.menu button:hover{background:#1c3158}
.menu button.on{background:var(--side2);color:#fff;box-shadow:inset -3px 0 0 var(--gold)}
.note{margin-top:auto;border:1px solid var(--side3);border-radius:14px;padding:14px;font-size:12.5px;line-height:1.8;color:#b9c6e2}
main{direction:rtl;background:var(--card);min-width:0}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 34px;border-bottom:1px solid var(--bd);background:#fff;position:sticky;top:0;z-index:5}
.top h2{margin:0;font-size:20px;font-weight:600}.top small{color:var(--mut);display:block}
.who{display:flex;align-items:center;gap:10px;border:1px solid var(--bd);border-radius:26px;padding:8px 8px 8px 16px;font-size:14px}
.body{padding:28px 34px 60px;background:var(--bg);min-height:calc(100vh - 78px)}
.ph{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.ph h1{margin:0;font-size:28px;font-weight:650;line-height:1.3}
.ph .eyebrow{color:var(--blue);font-weight:700;letter-spacing:1.4px;font-size:12px;direction:ltr;text-align:right}
.ph .sub{color:var(--mut);margin:4px 0 0}

/* ---------- عناصر ---------- */
.btn{background:var(--blue);color:#fff;border:0;border-radius:12px;padding:10px 18px;font-weight:650;cursor:pointer;white-space:nowrap}
.btn:hover{filter:brightness(1.07)}
.btn.sec{background:#fff;color:var(--tx);border:1px solid var(--bd)}
.btn.sec:hover{background:#f6f8fc}
.btn.red{background:var(--red)}.btn.green{background:var(--green)}
.btn.sm{padding:5px 11px;font-size:13px;border-radius:9px;font-weight:600}
.btn.lg{padding:14px 24px;font-size:17px;border-radius:14px;box-shadow:0 8px 20px rgba(47,93,224,.28)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);margin-bottom:18px}
.card.pad{padding:20px}
.card.p0{padding:0;overflow:hidden}
.hd{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--bd)}
.hd h3{margin:0;font-size:17px}.hd small{color:var(--mut)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px;margin-bottom:18px}
.kpi{background:#fff;border:1px solid var(--bd);border-radius:var(--r);padding:18px 20px;box-shadow:var(--sh)}
.kpi span{color:var(--mut);font-size:14px}
.kpi b{display:block;font-size:23px;margin:12px 0 8px;direction:ltr;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi small{color:var(--mut);font-size:12.5px;display:block}
.kpi.k-blue b{color:var(--blue)}.kpi.k-green b{color:var(--green)}.kpi.k-orange b{color:var(--orange)}.kpi.k-red b{color:var(--red)}
.delta{font-size:12px;font-weight:650;margin-right:6px}
.delta.up{color:var(--green)}.delta.down{color:var(--red)}
.two{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;align-items:start}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{color:var(--mut);font-size:13px;font-weight:600;text-align:right;padding:12px 14px;border-bottom:1px solid var(--bd);background:#fafbfe;white-space:nowrap}
td{padding:12px 14px;border-bottom:1px solid #eef1f7;text-align:right;vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr.click{cursor:pointer}
tbody tr.click:hover td{background:#f8faff}
tr.void td{color:#9aa5b8;text-decoration:line-through}
tfoot td{font-weight:700;background:#fafbfe;border-top:2px solid var(--bd)}
td.num,th.num{direction:ltr;text-align:right}
.badge{display:inline-block;padding:3px 11px;border-radius:12px;font-size:12.5px;background:var(--blue2);color:var(--blue);white-space:nowrap}
.badge.green{background:var(--green2);color:var(--green)}.badge.orange{background:var(--orange2);color:var(--orange)}
.badge.red{background:var(--red2);color:var(--red)}.badge.gray{background:#eef1f6;color:#6b7686}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:14px 20px;border-bottom:1px solid var(--bd)}
.toolbar .grow{flex:1;min-width:200px}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--bd);border-radius:11px;background:#fff;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,93,224,.12)}
input[type=checkbox]{width:auto;accent-color:var(--blue)}
.toolbar input,.toolbar select{width:auto;min-width:130px}
.toolbar input.grow{width:100%}
label{display:block;font-size:13px;color:var(--mut);margin-bottom:5px}
.f{margin-bottom:12px}
.fr{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.err{color:var(--red);font-size:14px;margin:6px 0;min-height:20px}
.hint{color:var(--mut);font-size:13px;margin:0 0 12px;line-height:1.8}
.pager{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-top:1px solid var(--bd);color:var(--mut);font-size:14px;gap:10px;flex-wrap:wrap}
.pager .pb{display:flex;gap:6px}
.empty{text-align:center;color:var(--mut);padding:34px 14px}
.chk{display:flex;align-items:center;gap:8px;margin:0;color:var(--tx);font-size:14px}
.sep{height:1px;background:var(--bd);margin:14px 0}
.kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed #e8ecf4}
.kv:last-child{border-bottom:0}
.kv.tot{font-weight:700;border-top:2px solid var(--bd);border-bottom:0;margin-top:6px;padding-top:12px;font-size:16px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.tabs button{border:1px solid var(--bd);background:#fff;border-radius:22px;padding:8px 18px;cursor:pointer;font-weight:600;color:var(--mut)}
.tabs button.on{background:var(--side);color:#fff;border-color:var(--side)}
.bar{height:8px;background:#eef1f7;border-radius:6px;overflow:hidden;min-width:90px}
.bar i{display:block;height:100%;background:var(--blue);border-radius:6px}

/* ---------- محرر الفواتير ---------- */
.editor{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
.sr{position:relative}
.res{position:absolute;inset-inline:0;top:100%;margin-top:4px;background:#fff;border:1px solid var(--bd);border-radius:12px;box-shadow:0 14px 40px rgba(20,35,60,.18);z-index:20;max-height:360px;overflow:auto}
.res div{padding:10px 14px;cursor:pointer;display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #f0f3f8}
.res div:hover,.res div.on{background:var(--blue2)}
.res small{color:var(--mut)}
.lt input{padding:7px 9px;min-width:80px}
.lt td{padding:8px 10px}
.sum{position:sticky;top:90px}

/* ---------- نوافذ ---------- */
#modal{position:fixed;inset:0;background:rgba(14,24,42,.55);display:flex;align-items:flex-start;justify-content:center;padding:36px 16px;overflow:auto;z-index:60}
.mbox{background:#fff;border-radius:20px;width:760px;max-width:100%;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:pop .15s ease-out}
.mbox.sm{width:480px}.mbox.lg{width:980px}
@keyframes pop{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.mh{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-bottom:1px solid var(--bd)}
.mh h3{margin:0;font-size:18px}
.mh button{border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:var(--mut)}
.mb{padding:20px 22px}
.mf{padding:14px 22px;border-top:1px solid var(--bd);display:flex;gap:10px;justify-content:flex-start;flex-wrap:wrap}
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--side);color:#fff;padding:12px 22px;border-radius:14px;z-index:80;box-shadow:0 10px 30px rgba(0,0,0,.3);font-weight:600}

/* ---------- المطبوعات ---------- */
.doc{background:#fff;padding:6px 4px;color:#111}
.dh{display:flex;justify-content:space-between;gap:20px;border-bottom:3px solid var(--side);padding-bottom:14px;margin-bottom:16px}
.dh .co b{font-size:22px;display:block}.dh .co span{display:block;color:#555;font-size:13px}
.dh .ti{text-align:left;direction:ltr}.dh .ti b{font-size:24px;color:var(--side);display:block}
.meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;margin-bottom:14px;font-size:14px}
.meta div span{color:#666}
.doc table th{background:#f0f3f9;color:#333}
.doc .tot{margin-inline-start:auto;width:330px;margin-top:12px}
.sig{display:flex;justify-content:space-between;margin-top:46px;color:#555;font-size:13px}
.sig div{border-top:1px solid #999;padding-top:6px;width:200px;text-align:center}
.rp{background:#fff}
.ct{display:flex;gap:4px;align-items:flex-end;height:170px;padding:10px 6px 0;direction:ltr}
.ct .g{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.ct .bars{display:flex;gap:3px;align-items:flex-end;height:calc(100% - 22px);width:100%;justify-content:center}
.ct .bars i{display:block;width:42%;max-width:18px;border-radius:5px 5px 0 0;min-height:2px}
.ct .l{font-size:11px;color:var(--mut)}
.lg2{display:flex;gap:16px;font-size:13px;color:var(--mut);padding:0 20px 14px}
.lg2 i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:6px}

@media(max-width:1100px){.layout{grid-template-columns:minmax(0,1fr)}main{min-width:0}
aside{position:sticky;top:0;z-index:20;height:auto;flex-direction:column;padding:8px 10px;overflow:visible}
.brand{padding:0 0 6px;margin:0 0 6px;gap:10px}.brand img{width:34px;height:34px}.brand b{font-size:15px}.brand small{display:none}
.menu{display:flex;flex-wrap:nowrap;gap:4px;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.menu button{width:auto;flex:0 0 auto;padding:8px 14px;font-size:14px;margin:0;white-space:nowrap}.menu button i{display:none}.menu button.on{box-shadow:inset 0 -3px 0 var(--gold)}
.note{display:none}.two,.editor,.three{grid-template-columns:1fr}.body{padding:14px 12px 50px}
.top{padding:8px 12px;position:static}.top small{display:none}.top h2{font-size:17px}.sum{position:static}
.ph h1{font-size:22px}.kpi b{font-size:20px}.mbox{width:100%!important;max-width:100%!important;border-radius:14px}
.toolbar>*{flex:1 1 140px}.tw{overflow-x:auto}table{font-size:13px}th,td{padding:9px 10px}}
@media print{
 @page{size:A4;margin:12mm}
 body{background:#fff;font-size:12.5px}
 aside,.top,.noprint,#toast,.btn,.tabs,.toolbar,.pager{display:none!important}
 .layout{display:block}.body{padding:0;background:#fff;min-height:0}
 .card,.kpi{box-shadow:none;border-color:#ccc}
 .card{break-inside:avoid}
 body.pm .layout{display:none}
 body.pm #modal{position:static;background:none;padding:0;display:block}
 body.pm .mbox{box-shadow:none;width:auto;border-radius:0;animation:none}
 body.pm .mh,body.pm .mf{display:none}
 body.pm .mb{padding:0}
 th{background:#eee!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
 .badge{border:1px solid #bbb;background:none!important;color:#222!important}
 .kpi b{font-size:20px}
 .ct .bars i{-webkit-print-color-adjust:exact;print-color-adjust:exact}
 .pr-only{display:block!important}
}
.pr-only{display:none}

/* ---- English (LTR) ---- */
html[dir=ltr] body{direction:ltr}
html[dir=ltr] aside{direction:ltr}
html[dir=ltr] .menu button span:last-child{direction:ltr}
html[dir=ltr] .menu button.on{box-shadow:inset 3px 0 0 var(--gold)}
html[dir=ltr] .brand b,html[dir=ltr] .brand small,html[dir=ltr] .ph .eyebrow,html[dir=ltr] .kpi b{text-align:left}
html[dir=ltr] th,html[dir=ltr] td{text-align:left}
html[dir=ltr] td.n,html[dir=ltr] th.n,html[dir=ltr] .n{text-align:left}
html[dir=ltr] .langlink{color:var(--blue);cursor:pointer;font-size:14px}
.langlink{color:var(--blue);cursor:pointer;font-size:14px}
html[dir=ltr] .kv{direction:ltr}
html[dir=ltr] .res>div{direction:ltr}
html[dir=ltr] .mh{direction:ltr}
html[dir=ltr] main{direction:ltr}
html[dir=ltr] #login .f{text-align:left}
html[dir=ltr] .who{padding:8px 16px 8px 8px}
html[dir=ltr] .brand{flex-direction:row}
html[dir=ltr] .dh .ti{text-align:right}
html[dir=ltr] .kv.tot,html[dir=ltr] .hd{direction:ltr}

/* ---- sidebar side follows the language: right in Arabic, left in English ---- */
@media(min-width:1101px){
 .layout{grid-template-columns:minmax(0,1fr) 290px}
 aside{grid-column:2;grid-row:1}
 main{grid-column:1;grid-row:1}
 html[dir=ltr] .layout{grid-template-columns:290px minmax(0,1fr)}
 html[dir=ltr] aside{grid-column:1}
 html[dir=ltr] main{grid-column:2}
}
.menu button{direction:rtl;justify-content:flex-start;gap:14px;text-align:right}
.menu button i{min-width:24px;text-align:center}
html[dir=ltr] .menu button{direction:ltr;text-align:left}