:root{
--ink:#0F203B; --ink-2:#1B3156; --ink-3:#2C4979;
--gold:#CF9C51; --gold-2:#E6BC7E; --gold-soft:#F7EEE0;
--text:#0F203B; --text-2:#4C5B72; --text-3:#5A6980;
/* ⚠ --text-3 كان #97A0AE فيعطي تبايناً 2.25:1 على أرضية الحجر الدافئة —
دون حدّ WCAG AA (4.5:1) بمرتين، وهو لون التواريخ والعناوين الفرعية على
هاتفٍ يُقرأ في الشمس. وكان أيضاً رمادياً بارداً من اللوحة المتقاعدة
(#F6F7FA)، فلم يتبع الأرضيةَ حين دفئت. القيمة الجديدة هي الدرجة
التالية على سُلّم --text-2 نفسه (فارق الأقنية محفوظ): 4.76:1.
⚠ --text-3 was #97A0AE — 2.25:1 on the warm stone ground, less than half
the WCAG AA floor of 4.5:1, and it is the colour of every date and
subtitle on a phone read in daylight. It was also a COOL grey left from
the retired #F6F7FA palette: the ground turned warm in the identity pass
and the text ramp never followed. The new value is the next step on
--text-2's own ramp — same channel deltas — and reads 4.76:1. */
--line:#DCDEE3; --line-2:#E8E6E0;
--bg:#EFEDE7; --card:#FFFFFF;
--ok:#2F6B4F; --ok-bg:#E9F1EB; --warn:#9A6B0E; --warn-bg:#FDF4E0;
--bad:#A63A2E; --bad-bg:#F9EDEA;
--r:14px; --r-sm:9px;
--sh:0 1px 2px rgba(15,32,59,.05), 0 6px 20px rgba(15,32,59,.05);
--sh-2:0 2px 6px rgba(15,32,59,.07), 0 18px 40px rgba(15,32,59,.1);
--nav-h:calc(60px + env(safe-area-inset-bottom));
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{font-family:'IBM Plex Sans Arabic',system-ui,-apple-system,sans-serif;background:var(--bg);
color:var(--text);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
overscroll-behavior-y:none;min-height:100vh}
.mono,.num,.fig{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
button,input,select,textarea{font-family:inherit;font-size:16px;color:inherit}
button{cursor:pointer;border:none;background:none;color:inherit}
[hidden]{display:none!important}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#CFD5E0;border-radius:4px}
/* ═══ LOGIN ═══ */
#gate{min-height:100vh;display:grid;place-items:center;padding:24px;
background:radial-gradient(120% 80% at 50% 0%, #2C4979 0%, #162846 55%, #0B1424 100%)}
.gate-card{width:100%;max-width:370px}
.gate-brand{text-align:center;margin-bottom:30px}
.gate-brand .mark{width:56px;height:56px;border-radius:16px;background:linear-gradient(145deg,var(--gold-2),var(--gold));
display:grid;place-items:center;margin:0 auto 16px;font-size:27px;color:#0F203B;font-weight:700;
box-shadow:0 8px 26px rgba(207,156,81,.35)}
.gate-brand h1{font-size:25px;color:#fff;font-weight:700;letter-spacing:-.3px}
/* ═══ قفل العلامة · the wordmark lockup ═══════════════════════════════
بناءٌ من نظام الهوية: الواصف يتباعد ليُحاذي عرض الشعار تماماً، فيُقرأ جزءاً
من القفل لا تعليقاً تحته. والتباعد ناتجُ المحاذاة لا رقمٌ مُقدَّر.
⚠ وكان مضبوطاً بـ IBM Plex Mono: خطُّ الأرقام لا خطُّ علامة. أمّا خطّ الشعار
نفسه (29LT Bukra) فتجاريّ وغير مرخَّصٍ هنا — والشعار صورة لا نصّ حيّ — فلا
سبيل إلى «نفس خطّ الشعار»، والبناء هو ما يجعله ينتمي إليه.
═══ The construction from the identity system: the descriptor letterspaces to
justify to exactly the wordmark's width, so it reads as part of the lockup
rather than a caption beneath it. The tracking is a RESULT of the
justification, not an estimated number.
⚠ It was set in IBM Plex Mono — a figure face used as a wordmark. The logo's
own face (29LT Bukra) is commercial and unlicensed here, and the logo is
artwork rather than live text, so "the same font as the logo" is not
available; the construction is what makes it belong. */
.wm-lock{display:block;width:max-content}
.gate-brand .wm-lock{margin:0 auto}
/* ⚠⚠ direction:ltr إلزاميّ. الحروف عناصرُ مستقلّة في صفٍّ مرن، واتجاه الصفّ
يتبع اتجاه المستند — ففي العربية انعكس ترتيبها وقرأ الشعار «ECAPSKROW».
الواصف كلمةٌ لاتينية دائماً، فاتجاهه لا يتبع الصفحة.
⚠⚠ direction:ltr is mandatory. The letters are separate items in a flex row,
and a flex row follows the document direction — so under RTL they laid out
right-to-left and the lockup read "ECAPSKROW". The descriptor is a Latin
word always; its direction does not follow the page. */
.wm-desc{display:flex;justify-content:space-between;width:100%;direction:ltr;
font-weight:600;color:var(--gold-2);line-height:1}
.wm-desc i{font-style:normal}
.gate-brand .wm-desc{font-size:10px}
.gate-box{background:rgba(255,255,255,.06);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);
border-radius:18px;padding:24px}
.gate-box label{color:rgba(255,255,255,.6)}
.gate-box input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:#fff}
.gate-box input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(207,156,81,.2)}
/* ═══ SHELL ═══ */
#app{min-height:100vh;padding-bottom:var(--nav-h)}
/* ⚠ كانت الأرضية rgba(246,247,250,.88) — أي #F6F7FA، الرمادي البارد الذي
تقاعد في تحوّل الهوية (قاعدة ٣٨) — مكتوبةً بالرقم لا بالرمز، فبقيت شريطاً
بارداً ثابتاً فوق أرضيةٍ دافئة. الآن --bg نفسها.
⚠ This was rgba(246,247,250,.88) — #F6F7FA, the cool grey the identity
pass retired (rule 38) — hardcoded rather than tokenised, so the sticky
bar stayed a cold strip over a warm ground. It is --bg now. */
.topbar{position:sticky;top:0;z-index:40;background:rgba(239,237,231,.88);backdrop-filter:blur(14px);
border-bottom:1px solid var(--line);padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
display:flex;align-items:center;justify-content:space-between;gap:12px}
.topbar h2{font-size:18px;font-weight:700;letter-spacing:-.3px}
.topbar .who{font-size:11.5px;color:var(--text-3);margin-top:-2px}
.tb-actions{display:flex;gap:7px;align-items:center}
.icon-btn{width:40px;height:40px;border-radius:11px;background:var(--card);border:1px solid var(--line);
display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--text-2);transition:.15s}
.icon-btn:active{transform:scale(.93)}
main{padding:16px 16px 24px;max-width:1180px;margin:0 auto}
/* bottom nav (mobile) */
#bnav{position:fixed;bottom:0;inset-inline:0;z-index:50;background:rgba(255,255,255,.94);
backdrop-filter:blur(16px);border-top:1px solid var(--line);display:grid;
grid-template-columns:repeat(var(--bn,5),1fr);padding-bottom:env(safe-area-inset-bottom)}
#bnav button{padding:9px 2px 8px;display:flex;flex-direction:column;align-items:center;gap:3px;
font-size:10.5px;color:var(--text-3);font-weight:500;position:relative;transition:.15s}
#bnav button svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
#bnav button.on{color:var(--ink)}
#bnav button.on::before{content:"";position:absolute;top:0;inset-inline-start:22%;width:56%;height:2.5px;
background:var(--gold);border-radius:0 0 3px 3px}
#bnav .badge{position:absolute;top:5px;inset-inline-end:calc(50% - 20px);background:var(--bad);color:#fff;
font-size:9.5px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:grid;
place-items:center;padding:0 4px;font-family:'IBM Plex Mono',monospace}
/* side nav (desktop) */
#snav{display:none}
/* ═══ HERO ═══ */
.hero{background:linear-gradient(150deg,#223C66 0%,#162846 55%,#0F203B 100%);
border-radius:20px;padding:20px;color:#fff;position:relative;overflow:hidden;
box-shadow:0 10px 34px rgba(15,32,59,.22);margin-bottom:14px}
.hero::after{content:"";position:absolute;inset-inline-end:-52px;top:-52px;width:170px;height:170px;
border-radius:50%;background:radial-gradient(circle,rgba(207,156,81,.22),transparent 68%)}
.hero .lab{font-size:12px;color:rgba(255,255,255,.62);font-weight:500}
.hero .big{font-size:clamp(34px,10vw,46px);font-weight:600;line-height:1.05;margin:4px 0 2px;letter-spacing:-1.5px}
.hero .sub{font-size:12px;color:rgba(255,255,255,.5)}
.hero-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;padding-top:16px;
border-top:1px solid rgba(255,255,255,.13);position:relative;z-index:1}
.hero-split .lab{font-size:11px}
.hero-split .v{font-size:19px;font-weight:600;margin-top:1px;letter-spacing:-.5px}
.hero-split .v.warn{color:var(--gold-2)}
.hero-wide{grid-column:1/-1}
.spark{display:flex;align-items:flex-end;gap:4px;height:36px;margin-top:16px;position:relative;z-index:1}
.spark div{flex:1;background:rgba(255,255,255,.18);border-radius:3px 3px 0 0;min-height:3px;position:relative}
.spark div.hot{background:linear-gradient(180deg,var(--gold-2),var(--gold))}
.spark-x{display:flex;gap:4px;margin-top:5px;position:relative;z-index:1}
.spark-x span{flex:1;text-align:center;font-size:8.5px;color:rgba(255,255,255,.4);
font-family:'IBM Plex Mono',monospace}
/* ═══ SECTIONS ═══ */
.sec{margin-bottom:22px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;padding:0 2px}
.sec-h h3{font-size:14.5px;font-weight:700;letter-spacing:-.2px}
/* هدف اللمس ٤٤ نقطة، وكان ٣٤. الحشو يوسّع المساحة والهامش السالب يلغيه بصرياً،
فيكبر ما تلمسه الإصبع ولا يتحرّك ما تراه العين.
A 44px touch target, up from 34. The padding grows the hit area and the
negative margin cancels it visually: the finger gets more, the eye sees the
same. */
.more{font-size:12.5px;color:var(--ink-3);font-weight:600;
padding:13px 6px;margin:-13px -6px;min-height:44px;display:inline-flex;align-items:center}
.sec-h .cnt{font-size:11.5px;color:var(--text-3);font-family:'IBM Plex Mono',monospace}
/* approval cards */
.appr{background:var(--card);border-radius:var(--r);border:1px solid var(--line);padding:15px;
margin-bottom:10px;box-shadow:var(--sh);position:relative;overflow:hidden}
.appr::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3.5px;background:var(--gold)}
.appr-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:7px}
.appr-purpose{font-size:14.5px;font-weight:600;line-height:1.4;margin-bottom:3px}
.appr-meta{font-size:12px;color:var(--text-3)}
.appr-amt{font-size:26px;font-weight:600;margin:9px 0 13px;letter-spacing:-.9px}
.appr-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.appr-wait{background:var(--warn-bg);color:var(--warn);border-radius:var(--r-sm);padding:9px;
text-align:center;font-size:12.5px;font-weight:600}
/* project cards */
.pcard{background:var(--card);border-radius:var(--r);border:1px solid var(--line);padding:15px;
margin-bottom:10px;box-shadow:var(--sh);transition:.15s;text-align:start;width:100%;display:block}
.pcard:active{transform:scale(.99)}
.pcard-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:11px}
.pcard-n{font-size:15px;font-weight:700;letter-spacing:-.2px}
.pcard-s{font-size:11.5px;color:var(--text-3);margin-top:1px}
.pcard-figs{display:flex;justify-content:space-between;gap:8px;margin-bottom:9px}
.pcard-figs>div{flex:1}
.pcard-figs .l{font-size:10.5px;color:var(--text-3)}
.pcard-figs .v{font-size:15px;font-weight:600;letter-spacing:-.3px;margin-top:-1px}
.track{height:7px;background:var(--line-2);border-radius:5px;overflow:hidden}
.track i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--ink-3),var(--ink));
transition:width .5s cubic-bezier(.4,0,.2,1)}
.track i.over{background:linear-gradient(90deg,#C44,#A63A2E)}
/* الإنجاز بالذهبي والإنفاق بالكحلي · progress in gold against spend in navy.
شريطان متطابقان لوناً يُقارَنان بالقراءة لا بالنظر، وهما موضوعان فوق بعضهما
ليُقارَنا بالنظر — فاللون هو ما يجعل المقارنة لحظية.
Two identically coloured bars must be compared by reading, and they are
stacked precisely so they can be compared by looking: the colour is what makes
the comparison instant. */
.track i.built{background:linear-gradient(90deg,var(--gold-2,#E0BC4A),var(--gold))}
.track-lab{display:flex;justify-content:space-between;font-size:10.5px;color:var(--text-3);margin-top:5px}
/* stat tiles */
/* minmax(0,1fr) لا 1fr: الأخيرة تعني minmax(auto,1fr) فلا ينكمش العمود دون
عرض محتواه الأدنى، فتتجاوز البطاقات حاويتها في المساحات الضيّقة.
minmax(0,1fr), not 1fr: the latter means minmax(auto,1fr), so a track cannot
shrink below its content's min-content width and the tiles overflow a narrow
container — which is what pushed the report page sideways. */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{min-width:0}
.tile .l,.tile .v{overflow-wrap:anywhere}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;box-shadow:var(--sh)}
.tile .l{font-size:11.5px;color:var(--text-2);font-weight:500;line-height:1.3}
.tile .v{font-size:21px;font-weight:600;margin-top:3px;letter-spacing:-.6px}
.tile .v.pos{color:var(--ok)} .tile .v.neg{color:var(--bad)} .tile .v.gold{color:var(--warn)}
.tile .n{font-size:10.5px;color:var(--text-3);margin-top:1px}
/* ═══ CARDS / TABLES ═══ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.card-h{padding:13px 15px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;
justify-content:space-between;gap:10px;flex-wrap:wrap}
.card-h h3{font-size:14px;font-weight:700}
.card-h .hint{font-size:11.5px;color:var(--text-3);font-weight:400}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{background:var(--line-2);color:var(--text-2);font-weight:600;font-size:11px;padding:9px 12px;
text-align:start;white-space:nowrap;letter-spacing:.02em}
td{padding:11px 12px;border-top:1px solid var(--line-2);vertical-align:middle}
td.num,th.num{text-align:end}
tfoot td{background:var(--gold-soft);font-weight:700;border-top:1.5px solid var(--gold)}
.empty{padding:44px 22px;text-align:center;color:var(--text-3);font-size:13.5px}
.empty .ico{width:46px;height:46px;border-radius:14px;background:var(--line-2);margin:0 auto 12px;
display:grid;place-items:center;font-size:21px}
.empty b{display:block;color:var(--text);font-size:15px;margin-bottom:4px;font-weight:600}
/* list rows (mobile-friendly alternative to tables) */
.lrow{display:flex;align-items:center;gap:11px;padding:13px 15px;border-top:1px solid var(--line-2);width:100%;text-align:start}
.lrow:first-of-type{border-top:none}
.lrow:active{background:var(--line-2)}
.lrow-m{flex:1;min-width:0}
.lrow-t{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow-s{font-size:11.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.lrow-v{text-align:end;flex:none}
.lrow-v .a{font-size:14.5px;font-weight:600;letter-spacing:-.3px}
.lrow-v .b{font-size:11px;color:var(--text-3);margin-top:1px}
/* ═══ BITS ═══ */
.code{display:inline-flex;align-items:center;background:var(--ink);color:#fff;padding:2px 8px;
border-radius:6px;font-size:11.5px;font-weight:600;font-family:'IBM Plex Mono',monospace;letter-spacing:0}
.code.d{background:var(--line-2);color:var(--text-2)}
.tag{display:inline-block;padding:2.5px 9px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.t-ok{background:var(--ok-bg);color:var(--ok)} .t-warn{background:var(--warn-bg);color:var(--warn)}
.t-bad{background:var(--bad-bg);color:var(--bad)} .t-mut{background:var(--line-2);color:var(--text-2)}
.t-info{background:#E9EFF9;color:var(--ink-3)}
/* ═══ شبكة الإسناد الشهرية · monthly imputation grid ═══ */
.gwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
border-radius:var(--r);background:var(--card);box-shadow:var(--sh)}
table.ts{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%}
table.ts th,table.ts td{padding:2px;border-bottom:1px solid var(--line-2);white-space:nowrap;
font-size:12px;text-align:center}
table.ts thead th{background:var(--line-2);font-weight:700;font-size:10.5px;color:var(--text-2);
position:sticky;top:0;z-index:2;font-family:'IBM Plex Mono',monospace}
table.ts .c0{position:sticky;inset-inline-start:0;z-index:3;background:var(--card);text-align:start;
min-width:136px;max-width:170px;box-shadow:1px 0 0 var(--line)}
html[dir=rtl] table.ts .c0{box-shadow:-1px 0 0 var(--line)}
table.ts thead .c0{background:var(--line-2);z-index:4}
table.ts .rw-t{font-weight:600;font-size:12.5px;white-space:normal;line-height:1.3}
table.ts .rw-s{font-size:10px;color:var(--text-3);font-family:'IBM Plex Mono',monospace;margin-top:1px}
table.ts td.we,table.ts th.we{background:var(--line-2)}
table.ts td.tot,table.ts th.tot{background:#EDF2FB;font-family:'IBM Plex Mono',monospace;font-weight:600}
table.ts input{width:42px;padding:3px 1px;text-align:center;font-size:16px;border-radius:7px;
border:1px solid var(--line);background:var(--card);font-family:'IBM Plex Mono',monospace;
direction:ltr}
/* أخفِ أسهم الزيادة/النقصان لتوفير عرض الخانة · hide spinners to reclaim cell width */
table.ts input::-webkit-outer-spin-button,table.ts input::-webkit-inner-spin-button{
-webkit-appearance:none;margin:0}
table.ts input[type=number]{-moz-appearance:textfield;appearance:textfield}
table.ts input:focus{outline:2px solid var(--ink-3);outline-offset:-1px}
table.ts tr.sub td,table.ts tr.grand td{background:var(--gold-soft);font-weight:700}
table.ts tr.grand td{background:var(--ink);color:#fff}
table.ts tr.grand .c0{background:var(--ink);color:#fff}
table.ts tr.lv .c0{color:var(--text-2)}
.ts-seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.ts-seg button{padding:7px 14px;font-size:12.5px;font-weight:600;color:var(--text-2);background:var(--card)}
.ts-seg button.on{background:var(--ink);color:#fff}
/* شريطٌ مجزّأ يفيض · a segmented strip with more buttons than the phone is wide.
overflow-x:auto وحده لا يفعل شيئاً هنا: العنصر ابنُ flex، وابن flex لا ينكمش
دون محتواه إلا بـ min-width:0 — فيدفع الصفحةَ عرضاً بدل أن ينزلق في مكانه،
والتمرير الأفقي للصفحة على الهاتف عيبٌ بنصّ المواصفة. نفس نمط .ptabs.
overflow-x:auto alone does nothing here: this is a flex child, and a flex child
will not shrink below its content without min-width:0 — so it pushed the page
wider instead of scrolling in place, and a page that scrolls sideways on a
phone is a defect by our own rule. Same pattern as .ptabs. */
.ts-seg.scrolls{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;min-width:0;max-width:100%}
.ts-seg.scrolls::-webkit-scrollbar{display:none}
.ts-seg.scrolls button{flex:0 0 auto}
.grade{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;width:18px;height:18px;
display:inline-grid;place-items:center;border-radius:5px}
.g-A{background:var(--ok-bg);color:var(--ok)} .g-B{background:#E9EFF9;color:var(--ink-3)}
.g-C{background:var(--warn-bg);color:var(--warn)} .g-D{background:var(--bad-bg);color:var(--bad)}
/* ═══ FORMS ═══ */
label{display:block;font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:5px}
input,select,textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:11px;
background:#fff;transition:.15s;font-size:16px}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%235B6577' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:left 13px center;padding-inline-end:13px;padding-inline-start:34px}
html[dir=ltr] select{background-position:right 13px center;padding-inline-start:13px;padding-inline-end:34px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink-3);box-shadow:0 0 0 3.5px rgba(44,68,113,.11)}
input:disabled,select:disabled{background:var(--line-2);color:var(--text-3)}
.fields{display:grid;grid-template-columns:1fr;gap:14px}
/* الاختيار المتعدّد: رقائق تُلمس، ٤٤ بكسل على الأقلّ · multi-pick chips, 44px tall */
.multi{display:flex;flex-wrap:wrap;gap:6px}
.multi .mopt{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;
border:1px solid var(--line);border-radius:999px;background:var(--bg);cursor:pointer;font-size:13.5px}
.multi .mopt input{width:18px;height:18px;margin:0;accent-color:var(--ink)}
.multi .mopt:has(input:checked){border-color:var(--gold);background:var(--warn-bg)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{padding:12px 18px;border-radius:12px;font-weight:600;font-size:14.5px;transition:.15s;
white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px}
.btn:active{transform:scale(.97)}
.btn-p{background:var(--ink);color:#fff}
.btn-g{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#fff}
.btn-o{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn-ok{background:var(--ok);color:#fff}
.btn-bad{background:var(--bad-bg);color:var(--bad);border:1.5px solid #EFD5D5}
.btn-sm{padding:7px 13px;font-size:13px;min-height:36px;border-radius:9px}
.btn:disabled{opacity:.4;pointer-events:none}
.btn-full{width:100%}
.fab{position:fixed;inset-inline-end:16px;bottom:calc(var(--nav-h) + 14px);z-index:45;
width:54px;height:54px;border-radius:18px;background:var(--ink);color:#fff;font-size:26px;
display:grid;place-items:center;box-shadow:0 8px 26px rgba(15,32,59,.32);font-weight:300}
.fab:active{transform:scale(.92)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.filters select{width:auto;min-width:150px;padding:8px 12px;padding-inline-start:32px;font-size:16px;
border-radius:11px;background-color:var(--card)}
/* ═══ SHEET / MODAL ═══ */
.ov{position:fixed;inset:0;background:rgba(15,32,59,.45);z-index:70;backdrop-filter:blur(3px);
display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--card);width:100%;max-width:560px;border-radius:22px 22px 0 0;
max-height:92vh;max-height:92dvh;display:flex;flex-direction:column;
padding-bottom:env(safe-area-inset-bottom)}
.sheet-grab{width:38px;height:4px;background:var(--line);border-radius:3px;margin:9px auto 0;flex:none}
.sheet-h{padding:12px 20px 13px;border-bottom:1px solid var(--line-2);display:flex;
align-items:center;justify-content:space-between;gap:10px;flex:none}
.sheet-h h3{font-size:17px;font-weight:700;letter-spacing:-.3px}
.sheet-b{padding:18px 20px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.sheet-f{padding:14px 20px 18px;border-top:1px solid var(--line-2);display:flex;gap:9px;flex:none}
.sheet-f .btn{flex:1}
.x{width:34px;height:34px;border-radius:11px;color:var(--text-3);font-size:21px;display:grid;
place-items:center;background:var(--line-2);flex:none}
/* الصفحة تثبت خلف النافذة · the page holds still behind a sheet.
sheet.js يضع `sheet-open` على ما دامت نافذةٌ أو سؤالُ تأكيد قائماً.
overflow:hidden وحده لا يُرجع الصفحة إلى أعلاها — فلا position:fixed هنا،
وهي الحيلة التي تفقد موضع التمرير. و overscroll-behavior على .sheet-b يمنع
iOS من تمرير الصفحة حين يبلغ جسم النافذة طرفه.
sheet.js keeps `sheet-open` on while a sheet or a confirm question
is up. overflow:hidden alone does not scroll the page to the top — so no
position:fixed trick, which is what loses the scroll position — and
overscroll-behavior on .sheet-b stops iOS scrolling the page through when
the sheet body reaches its end. */
html.sheet-open,html.sheet-open body{overflow:hidden}
/* أهداف اللمس · touch targets: 44px where a finger does the pressing, and
the desktop keeps its density. The glyph stays the same size; the box grows.
⚠ table.ts .x sits in a 2px-padded grid cell, and a 44px box there would
stretch every row — its hit area grows through a pseudo-element instead. */
@media (hover:none) and (pointer:coarse){
.x{width:44px;height:44px}
/* ⚠ .icon-btn كان 40px هنا أيضاً — أزرار الشريط العلوي (الجرس، اللغة،
الأمر) وهي أكثر ما تُلمس في اليوم، وقد فاتت هذه الكتلة وحدها.
⚠ .icon-btn was 40px here too — the top-bar buttons (bell, language,
palette), the most-pressed controls of the day, and the only ones this
block missed. */
.icon-btn{width:44px;height:44px}
table.ts .x{width:34px;height:34px;position:relative}
table.ts .x::after{content:"";position:absolute;inset:-5px}
.btn-sm{min-height:44px;padding-top:9px;padding-bottom:9px}
/* a tag used as a button: its rows wrap with a 5–6px gap, so ±6px is the most
the hit area can grow before a later pill's zone covers the row above */
button.tag{position:relative}
button.tag::after{content:"";position:absolute;inset:-6px -3px}
}
/* ═══ سؤال التأكيد · the confirm question ═══
يعلو النافذة المفتوحة (٧٠) ويبقى تحت التنبيه (٩٩) وشريط انتهاء الجلسة (١٢٠)
Stacks above an open sheet (70) and stays under the toast (99) and the idle bar (120). */
#confirm-root .ov{z-index:90}
#confirm-root .sheet{max-width:420px}
.cfm-t{font-size:14.5px;line-height:1.7;color:var(--text-2)}
/* السطور التي تعيد ذكر ما يُعتمد: العدد والمبلغ قبل الزرّ لا بعده
The lines that restate what is being approved — the count and the figure
before the button, not after it. */
.cfm-l{margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cfm-r{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:10px 13px;font-size:13px}
.cfm-r+.cfm-r{border-top:1px solid var(--line-2)}
.cfm-r .k{color:var(--text-3)}
.cfm-r .v{font-weight:700;text-align:end}
.cfm-l.bad{border-color:#EFD5D5;background:var(--bad-bg)}
.cfm-l.bad .cfm-r+.cfm-r{border-top-color:#EFD5D5}
.note{background:var(--gold-soft);border:1px solid #EFE0BA;border-radius:11px;padding:12px 14px;
font-size:13px;color:var(--warn);line-height:1.6}
.note.b{background:#EDF2FB;border-color:#D3E0F2;color:var(--ink-3)}
.note.r{background:var(--bad-bg);border-color:#EFD5D5;color:var(--bad)}
#toast{position:fixed;bottom:calc(var(--nav-h) + 16px);inset-inline:16px;z-index:99;
display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--ink);color:#fff;padding:12px 20px;border-radius:13px;font-size:14px;
font-weight:500;box-shadow:0 10px 30px rgba(0,0,0,.28);max-width:420px}
.toast.err{background:var(--bad)} .toast.ok{background:var(--ok)}
.spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
border-radius:50%;animation:sp .7s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
/* ═══ إنذار انتهاء الجلسة · session-expiry warning ═══
شريطٌ فوق كلّ شيء لأنّه ينذر بفقد ما يُكتب الآن؛ فوق الشريط السفلي في
الهاتف لا تحته. A bar above everything, and above the bottom nav on a
phone — it warns that what is being typed is about to be lost. */
#idlebar{position:fixed;bottom:calc(var(--nav-h) + 16px);inset-inline:16px;z-index:120;
display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
max-width:460px;margin-inline:auto;padding:12px 16px;border-radius:13px;
background:var(--bad);color:#fff;font-size:14px;font-weight:500;
box-shadow:0 10px 30px rgba(0,0,0,.28);
animation:blockIn var(--m-2) var(--ease) both}
#idlebar b{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
#idlebar .btn{min-height:44px;padding-inline:18px;background:#fff;color:var(--bad);border:0}
@media(min-width:900px){#idlebar{bottom:24px}}
#review-flag{position:fixed;top:0;inset-inline-start:0;z-index:80;background:var(--gold);color:#fff;
font-size:9.5px;font-weight:700;padding:2px 10px;border-bottom-right-radius:8px;
border-bottom-left-radius:8px;letter-spacing:.02em}
html[dir=rtl] #review-flag{border-bottom-right-radius:8px;border-bottom-left-radius:8px}
/* ═══ DESKTOP ═══ */
@media(min-width:900px){
body{font-size:14.5px}
#app{display:grid;grid-template-columns:230px 1fr;padding-bottom:0}
#bnav{display:none}
#snav{display:flex;flex-direction:column;background:var(--ink);position:sticky;top:0;height:100vh;
padding:0 0 12px}
.snav-top{padding:22px 18px 18px}
.snav-top .mark{width:38px;height:38px;border-radius:11px;background:linear-gradient(145deg,var(--gold-2),var(--gold));
display:grid;place-items:center;font-size:19px;color:var(--ink);font-weight:700;margin-bottom:11px}
.snav-top h1{font-size:17px;color:#fff;font-weight:700}
.snav-top .wm-desc{font-size:8.5px}
#snav .items{flex:1;overflow-y:auto;padding:6px 9px}
#snav .items button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;
border-radius:10px;color:rgba(255,255,255,.66);font-size:14px;text-align:start;margin-bottom:1px;transition:.13s}
#snav .items button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round;flex:none}
#snav .items button:hover{background:rgba(255,255,255,.07);color:#fff}
#snav .items button.on{background:#fff;color:var(--ink);font-weight:600}
#snav .items .grp{font-size:9px;letter-spacing:.16em;color:rgba(255,255,255,.32);
padding:15px 12px 6px;font-weight:700}
#snav .items .badge{margin-inline-start:auto;background:var(--bad);color:#fff;font-size:10px;
font-weight:700;min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;
padding:0 5px;font-family:'IBM Plex Mono',monospace}
.snav-btm{padding:12px 14px 0;border-top:1px solid rgba(255,255,255,.1);margin:0 9px}
.snav-btm .nm{color:#fff;font-weight:600;font-size:13.5px}
.snav-btm .rl{color:var(--gold-2);font-size:11px;font-family:'IBM Plex Mono',monospace}
.snav-btm .row{display:flex;gap:7px;margin-top:10px}
.snav-btm .row button{flex:1;padding:7px;border-radius:9px;background:rgba(255,255,255,.09);
color:rgba(255,255,255,.75);font-size:12px;font-weight:600}
.topbar{padding:16px 26px 14px;background:transparent;border-bottom:1px solid var(--line);position:sticky}
.topbar h2{font-size:23px}
main{padding:20px 26px 50px}
.fab{display:none}
.hero{padding:26px 28px}
.hero .big{font-size:48px}
.hero-split{grid-template-columns:repeat(3,1fr)}
.hero-wide{grid-column:auto}
.tiles{grid-template-columns:repeat(4,1fr)}
.grid2{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:start}
.fields{grid-template-columns:1fr 1fr}
.fields .full{grid-column:1/-1}
.ov{align-items:center;padding:24px}
.sheet{border-radius:20px;max-height:88vh;max-height:88dvh}
.sheet-grab{display:none}
.sheet-f{justify-content:flex-start}
.sheet-f .btn{flex:none;min-width:110px}
#toast{bottom:24px;inset-inline-start:26px;inset-inline-end:auto;align-items:flex-start}
}
/* ═══ ربط الاعتماد ببند الميزانية · approval → budget line block ═══ */
.ap-bud{display:block;width:100%;text-align:start;margin-top:11px;padding:11px 12px;
background:var(--line-2);border:1px solid var(--line);border-radius:var(--r-sm)}
.ap-bud-t{font-size:12.5px;font-weight:600;color:var(--ink-3);margin-bottom:8px;line-height:1.35}
.ap-bud-g{display:flex;gap:12px;flex-wrap:wrap;margin-top:7px;font-size:11.5px;color:var(--text-2)}
.ap-bud-g b{color:var(--text)}
.ap-after{margin-top:7px;font-size:12.5px;font-weight:600;color:var(--ok)}
.ap-after.bad{color:var(--bad)}
.ap-warn{margin-top:7px;background:var(--bad-bg);color:var(--bad);border-radius:var(--r-sm);
padding:7px 10px;font-size:12px;font-weight:600}
/* ═══ جرس الإشعارات · notification bell ═══ */
.bell{position:relative;display:inline-grid;place-items:center}
.bell .dot{position:absolute;top:-3px;inset-inline-end:-3px;background:var(--bad);color:#fff;
font-size:10px;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:grid;
place-items:center;padding:0 4px;font-family:'IBM Plex Mono',monospace}
.nrow{display:flex;gap:10px;align-items:flex-start;padding:12px 15px;border-bottom:1px solid var(--line-2);
width:100%;text-align:start}
.nrow:last-child{border-bottom:0}
.nrow .ni{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;
background:var(--line-2);font-size:14px}
.nrow .nt{font-size:13.5px;font-weight:600;line-height:1.35}
.nrow .ns{font-size:11.5px;color:var(--text-3);margin-top:2px}
/* ═══ الهوية والانتقالات · brand + transitions ═══ */
.brand-logo{display:block;height:44px;width:auto;margin:0 auto 8px;
filter:drop-shadow(0 2px 10px rgba(207,156,81,.18))}
.gate-brand .brand-logo{height:64px}
/* الهامش على الغلاف لا على الصورة: القناع يغطّي صندوق الغلاف، وهامشٌ داخله
يزيح القناع عن الشعار بنصفه. The margin belongs to the wrapper, not the
image: the mask covers the wrapper's box, and a margin inside it offsets the
mask from the logo by half its height. */
.gate-brand .logo-sheen{margin-bottom:12px}
.gate-brand .logo-sheen>img{margin:0}
#snav .snav-top .brand-logo{height:34px;margin:0 0 7px}
html[dir=rtl] #snav .snav-top .brand-logo{margin-inline-end:auto}
/* شاشة الإقلاع — تمنع وميض شاشة الدخول قبل أن يُعرف المستخدم
splash holds until auth resolves, so the login form never flashes for a signed-in user */
#splash{position:fixed;inset:0;z-index:200;display:grid;place-items:center;gap:20px;
align-content:center;background:linear-gradient(160deg,#0F203B,#1B3156 60%,#0F203B);
transition:opacity .32s ease, visibility .32s}
#splash .logo-sheen{animation:sp-in .5s ease both}
#splash .logo-sheen img{height:62px;width:auto}
#splash.out{opacity:0;visibility:hidden;pointer-events:none}
@keyframes sp-in{from{opacity:0;transform:translateY(8px) scale(.97)}}
/* لمعةٌ ذهبية تعبر الشعار · a gold sheen crosses the logo
─────────────────────────────────────────────────────────────────────────
القناع هو الشعار نفسه، فلا يخرج الضوء عن حدوده. والصورة تبقى بنصّها
البديل تحته: متصفّحٌ لا يعرف mask يُظهر الشعار ساكناً كما كان تماماً، لا
مستطيلاً ذهبياً مكانه. والطبقة اللامعة عنصرٌ مستقلّ لا الغلاف، حتى يبقى
ظلّ الشعار الذهبي خارج القناع بدل أن يُقتطع معه.
الشريط يتحرّك بـ transform وحده؛ القناع نفسه لا يتحرّك أبداً.
The mask is the logo's own alpha, so the light never leaves the shape, and
the stays underneath with its alt text: a browser without mask support
shows exactly the static logo it showed before, not a gold slab in its place.
The shine is its own layer rather than the wrapper, so the logo's gold
drop-shadow lives outside the mask instead of being clipped away with it.
The band moves by transform alone; the mask itself never moves.
الشعار في الشريط الجانبي لا يلمع: ذلك الشريط يُعاد بناؤه مع كل لقطة من
Firestore، فتومض الحركة تحت يد المستخدم. The sidebar logo is deliberately
left out: that nav is rebuilt on every snapshot, so it would flicker. */
.logo-sheen{position:relative;display:inline-block;line-height:0}
.logo-sheen>i{display:none}
@supports ((-webkit-mask-image:url(logo.png)) or (mask-image:url(logo.png))){
.logo-sheen>i{display:block;position:absolute;inset:0;overflow:hidden;pointer-events:none;
-webkit-mask:url(logo.png) center/contain no-repeat;
mask:url(logo.png) center/contain no-repeat}
.logo-sheen>i::after{content:"";position:absolute;top:0;bottom:0;inset-inline-start:0;width:38%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
animation:sheen 2.2s ease-in-out infinite forwards}
/* الشريط يبدأ من حافة البداية، وهي في العربية اليمين — فيسير في الاتجاه
المعاكس. in RTL the band starts at the right edge and must travel the
other way. */
html[dir=rtl] .logo-sheen>i::after{animation-name:sheenR}
}
/* العبور يشغل أوّل ٦٠٪ ثم سكون — لمعةٌ متّصلة بلا انقطاع تصير زخرفة دوّارة.
The pass takes the first 60%, then rests: an unbroken shimmer becomes a
spinning ornament. */
@keyframes sheen{0%{transform:translateX(-160%)}60%,100%{transform:translateX(400%)}}
@keyframes sheenR{0%{transform:translateX(160%)}60%,100%{transform:translateX(-400%)}}
/* على شاشة الدخول تمرّ مرّةً واحدة: تلك الشاشة تنتظر المستخدم لا الشبكة،
واللمعة الدائمة هناك زينةٌ لا تشرح شيئاً. أما شاشة الإقلاع فتنتظر فعلاً،
فتبقى اللمعة دائرةً مكان الشريط الذي كان يقول «ما زلت أعمل».
On the gate it passes once — that screen waits for the user, not for the
network, and a looping shine there would be decoration explaining nothing.
The splash genuinely is waiting, so there the loop stays, in place of the
bar that used to say "still working". */
.gate-brand .logo-sheen>i::after{animation-iteration-count:1;animation-delay:.3s}
/* دخول وخروج أنعم · softer gate ↔ app transition */
#gate,#app{animation:fade-in .3s ease both}
@keyframes fade-in{from{opacity:0}}
.btn,.lrow,.pcard,[data-nav]{transition:background .15s,color .15s,opacity .15s,transform .12s}
.btn:active{transform:scale(.985)}
/* حارس الإقلاع · boot watchdog */
#sp-stuck{display:grid;gap:12px;justify-items:center;max-width:300px;text-align:center;
animation:sp-in .3s ease both}
#sp-stuck p{color:rgba(255,255,255,.78);font-size:13.5px;line-height:1.6}
#sp-stuck button{background:var(--gold);color:var(--ink);font-weight:700;font-size:14px;
padding:10px 22px;border-radius:11px;min-height:44px}
/* ═══ سجل التغييرات · audit log ═══ */
.hist{margin-top:11px;border-top:1px solid var(--line-2);padding-top:9px}
.hist>summary{font-size:11.5px;color:var(--ink-3);font-weight:600;cursor:pointer;
list-style:none;display:flex;align-items:center;gap:6px}
.hist>summary::-webkit-details-marker{display:none}
.hist>summary::before{content:"›";display:inline-block;transition:transform .15s;font-size:15px}
.hist[open]>summary::before{transform:rotate(90deg)}
html[dir=rtl] .hist>summary::before{content:"‹"}
html[dir=rtl] .hist[open]>summary::before{transform:rotate(-90deg)}
.hist-b{margin-top:9px;border-inline-start:2px solid var(--line);padding-inline-start:11px;
display:grid;gap:11px}
.hist-i{position:relative}
.hist-i::before{content:"";position:absolute;inset-inline-start:-15px;top:5px;width:7px;height:7px;
border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px var(--card)}
.hist-t{font-size:12.5px;line-height:1.35}
.hist-d{font-size:10.5px;color:var(--text-3);margin-top:1px}
.hist-c{font-size:11.5px;color:var(--text-2);margin-top:3px;line-height:1.5}
.hist-c s{color:var(--text-3)}
/* عمود المحتوى في تخطيط سطح المكتب لا يجوز أن يتمدّد بعرض محتواه
A CSS grid item defaults to min-width:auto, so a wide table (the timesheet) would
stretch the content column and push the whole page sideways. Pin it to 0 and let
.gwrap do the scrolling it was built for. */
#app>div{min-width:0}
main{min-width:0}
/* ═══ الشعار زرّ للعودة للرئيسية · logo returns home ═══ */
#snav .snav-top{display:block;width:100%;text-align:start;background:none;cursor:pointer}
#snav .snav-top:hover .brand-logo{filter:drop-shadow(0 2px 14px rgba(207,156,81,.4))}
/* ═══ إظهار كلمة المرور · password reveal ═══ */
.pw-wrap{position:relative}
.pw-wrap input{padding-inline-end:51px}
/* ٤٤ نقطة هو الحدّ الأدنى لهدف اللمس، وكان ٣٦ — والأيقونة تبقى بحجمها لأن
الزرّ يتّسع حولها، والحقل ٤٩ نقطة فيسع الزرّ داخله بلا أثر بصري.
44px is the minimum touch target and this was 36. The icon keeps its size —
the button grows around it — and the 49px field swallows the extra height,
so nothing moves visually. */
.pw-wrap button{position:absolute;inset-inline-end:3px;top:50%;transform:translateY(-50%);
width:44px;height:44px;display:grid;place-items:center;border-radius:9px;
color:rgba(255,255,255,.5)}
.pw-wrap button:hover{color:rgba(255,255,255,.85)}
.pw-wrap button.on{color:var(--gold)}
/* ═══ الرئيسية الشخصية · the personal home ═══ */
.hello{background:linear-gradient(150deg,var(--ink),var(--ink-2));color:#fff;border-radius:var(--r);
padding:20px 22px;margin-bottom:16px;box-shadow:var(--sh)}
.hello .hi{font-size:20px;font-weight:600;letter-spacing:-.3px}
.hello .hi b{color:var(--gold-2)}
.hello .ro{font-size:12px;color:rgba(255,255,255,.55);margin-top:3px;
font-family:'IBM Plex Mono',monospace;letter-spacing:.04em}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:18px}
.qbtn{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);
border-radius:var(--r-sm);padding:13px 14px;font-size:13px;font-weight:600;text-align:start;
box-shadow:var(--sh);min-height:52px;color:var(--text)}
.qbtn:hover{border-color:var(--gold);transform:translateY(-1px)}
.qbtn .qi{width:28px;height:28px;border-radius:8px;background:var(--gold-soft);color:var(--warn);
display:grid;place-items:center;font-size:14px;flex:none}
@media(min-width:900px){ .qgrid{grid-template-columns:repeat(4,1fr)} }
/* ═══ PAGE TABS · تبويبات الصفحة ═══
تظهر أعلى الصفحة حين تضمّ المجموعة أكثر من صفحة. تنزلق أفقياً على الهاتف
ولا تُخرج الصفحة عن عرضها. Scrolls inside itself; never widens the page. */
.ptabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
margin:0 0 18px;padding-bottom:2px;border-bottom:1px solid var(--line);max-width:100%}
.ptabs::-webkit-scrollbar{display:none}
/* الانتقال بين التبويبات: الخطّ الذهبي ينزلق ولا يقفز، والصفحة تظهر بلا ارتجاج.
prefers-reduced-motion يُطفئ ذلك كلّه — الحركة تفضيل لا شرط.
Tab transitions: the gold rule slides rather than jumping, and the page fades
in without a jolt. prefers-reduced-motion turns all of it off — motion is a
preference, not a requirement. */
.ptabs button{flex:0 0 auto;padding:9px 14px;font-size:13.5px;font-weight:600;
transition:color .18s ease,border-bottom-color .22s ease;
color:var(--text-2);background:none;border-bottom:2px solid transparent;
margin-bottom:-1px;white-space:nowrap;display:flex;align-items:center;gap:6px;min-height:40px}
.ptabs button:hover{color:var(--text)}
.ptabs button.on{color:var(--ink);border-bottom-color:var(--gold)}
.ptabs .tb{background:var(--gold);color:#fff;font-size:10px;font-weight:700;
min-width:16px;height:16px;border-radius:8px;display:inline-grid;place-items:center;padding:0 4px}
@media(max-width:900px){.ptabs{margin-bottom:14px}}
/* ═══ المُرشِّح داخل الصفحة · the in-page selector ═══════════════════════
⚠⚠ كان `.ptabs` يؤدّي معنيين: التنقّل بين صفحات المجموعة (يرسمه الهيكل)،
واختيار شيءٍ داخل الصفحة (ترسمه الشاشة نفسها). فيقف الشريطان أحدهما فوق
الآخر بالمظهر ذاته — وفي «المهامّ» ثلاثةٌ متطابقة — ولا شيء يقول للقارئ
أيُّها يغيّر الصفحة وأيُّها يُرشّح ما فيها. فيضغط ليُرشّح فيغادر الصفحة.
والفرق ليس تجميلاً: الأوّل تنقّلٌ والثاني حالةُ عرض، وهما فعلان مختلفان.
⚠⚠ `.ptabs` carried two meanings: navigating between the group's pages (drawn
by the shell) and choosing something inside the page (drawn by the view). So
the two strips sat one above the other looking identical — three of them on
Tasks — with nothing telling the reader which one changes the page and which
filters it. You press to filter and you leave the page instead.
The distinction is not decoration: one is navigation and the other is view
state, and they are different acts.
الشكل يقول ذلك: أقراصٌ ممتلئة لا خطٌّ سفليّ، وأصغر، وبلا حدٍّ يفصل الصفحة.
The form says so: filled pills rather than an underline, smaller, and with no
rule beneath separating the page. */
.pfilter{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
margin:0 0 14px;padding:1px 1px 2px;max-width:100%;align-items:center}
.pfilter::-webkit-scrollbar{display:none}
.pfilter > .pf-l{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.04em;
color:var(--text-3);margin-inline-end:2px;white-space:nowrap}
.pfilter button{flex:0 0 auto;padding:6px 12px;font-size:12.5px;font-weight:600;
color:var(--text-2);background:var(--line-2);border:1px solid transparent;border-radius:20px;
white-space:nowrap;display:flex;align-items:center;gap:6px;min-height:34px;
transition:background var(--m-1,.12s) var(--ease,ease),color var(--m-1,.12s) var(--ease,ease)}
.pfilter button:hover{color:var(--text)}
.pfilter button.on{background:var(--ink);color:#fff}
.pfilter .tb{background:var(--gold);color:#fff;font-size:10px;font-weight:700;
min-width:16px;height:16px;border-radius:8px;display:inline-grid;place-items:center;padding:0 4px}
.pfilter button.on .tb{background:#fff;color:var(--ink)}
@media(max-width:900px){.pfilter{margin-bottom:12px}}
/* ═══ TIMESHEET HEAD · رأس الجدول الزمني ═══ */
table.ts thead th .dw{display:block;font-size:9px;font-weight:600;color:var(--text-3);
line-height:1.15;letter-spacing:.04em}
table.ts thead th .dn{display:block;font-size:11px;font-weight:700;line-height:1.2;
font-family:'IBM Plex Mono',monospace}
table.ts thead th.we .dw,table.ts thead th.we .dn{color:var(--text-3)}
table.ts thead .c0 .hd-m{font-size:12px;font-weight:700;color:var(--ink);line-height:1.25}
table.ts thead .c0 .hd-s{font-size:9.5px;font-weight:600;color:var(--text-3);
letter-spacing:.04em;margin-top:1px}
/* ═══ MONTH PICKER · اختيار الشهر ═══ */
.mpick{display:flex;align-items:center;gap:6px;margin-bottom:14px;background:var(--card);
border:1px solid var(--line);border-radius:13px;padding:6px 8px}
.mpick .mp-a{width:38px;height:38px;border-radius:10px;font-size:20px;line-height:1;
color:var(--ink);background:var(--line-2);font-weight:700;flex:0 0 auto}
.mpick .mp-a:hover{background:var(--gold-soft)}
.mpick .mp-l{flex:1;text-align:center;font-size:14.5px;font-weight:700;color:var(--ink);
min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mpick .mp-now{flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--ink-3);
padding:8px 11px;border-radius:9px;background:var(--line-2);min-height:38px}
.mpick .mp-now:hover{background:var(--gold-soft)}
button.tag{cursor:pointer}
button.tag:hover{filter:brightness(.96)}
/* ═══ PROFILE · ملفي ═══ */
.me-top{display:flex;align-items:center;gap:13px;padding:13px 15px;border-bottom:1px solid var(--line-2)}
.me-top .av{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:0 0 auto;
border:2px solid var(--gold-soft)}
.me-top .av-i{display:grid;place-items:center;background:var(--ink);color:var(--gold);
font-size:22px;font-weight:700;font-family:'IBM Plex Mono',monospace}
.me-top .me-n{font-size:16px;font-weight:700;color:var(--ink);line-height:1.3}
.me-top .me-e{font-size:12.5px;color:var(--text-3);margin-top:2px;word-break:break-all}
/* ═══ ADD BUTTON (desktop top bar) · زر الإضافة على الحاسوب ═══
العائم يختفي فوق ٩٠٠ بكسل، فهذا بديله — ولا يظهر الاثنان معاً أبداً.
The floating button is hidden above 900px; this replaces it. Never both at once. */
#tb-add{display:none}
@media(min-width:900px){
#tb-add{display:inline-flex;align-items:center;gap:7px;width:auto;padding:0 15px;
background:var(--ink);color:#fff;border-color:var(--ink);font-weight:700;font-size:13px}
#tb-add:hover{background:var(--ink-3);border-color:var(--ink-3)}
#tb-add svg{stroke:currentColor}
}
/* ═══ ORG TREE · الهيكل الإداري ═══
الإزاحة منطقية لتنقلب مع اتجاه الكتابة · logical inset so it flips with direction */
.tree-row{padding-inline-start:calc(15px + var(--d,0) * 20px);position:relative}
.tree-row .tw{display:inline-block;width:12px;height:1px;background:var(--line);
vertical-align:middle;margin-inline-end:7px}
.tree-row[style*="--d:0"]{padding-inline-start:15px}
/* ═══ EXECUTIVE REPORT & PRINT VIEW · تقرير المستثمرين ═══ */
.rep-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px;flex-wrap:wrap}
/* ⚠ كانت تستعمل --bg-card و--sh-sm وهما غير معرَّفين، فخرج المستند بلا
خلفيةٍ ولا ظلّ — نفس عطل لوحة الأوامر أعلاه، وثالث مرّة يتكرّر فيها الصنف.
والمتغيّر غير المعرَّف لا يُخطئ: يُهمَل بصمت، فلا يُرى إلّا على الشاشة.
⚠ These were --bg-card and --sh-sm, neither of which exists, so the document
rendered with no background and no shadow — the same fault as the command
palette above, and the third time this class has appeared. An undefined
custom property does not error: it is silently dropped, so only the screen
ever says so. */
.report-doc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;margin-bottom:24px;box-shadow:var(--sh)}
/* ═══ المستندات المولَّدة تتبع نظام هوية المجموعة ══════════════════════
الذهب يرسم الخطوط ولا يملأ خلف نصٍّ جارٍ. ومسطرة الترويسة ذهبية كما في
ورق المراسلات والفاتورة في نظام الهوية؛ أمّا خطوط الجداول والأقسام فتبقى
كحلية لأنّها بناءٌ لا هوية.
⚠ ولا تباعد بين حروفٍ عربية أبداً: التتبّع يفكّ الوصل فتخرج الكلمة حروفاً
منفصلة. قواعد «العين» في نظام الهوية لاتينية بطبعها، فتُقيَّد بـ dir=ltr.
═══ Generated documents follow the group identity ════════════════════
Gold draws the lines and never fills behind running text. The letterhead
rule is gold, as it is on the letterhead and the invoice in the identity
system; table and section rules stay navy, because those are structure
rather than identity.
⚠ Never letter-space Arabic: tracking breaks the joining and the word comes
apart into separate letters. The identity's eyebrow rules are Latin by
nature, so they are bound to dir=ltr. */
.rep-header{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:18px;border-bottom:2px solid var(--gold);margin-bottom:20px;gap:16px;flex-wrap:wrap}
.rep-brand{display:flex;align-items:center;gap:14px}
.rep-logo{height:42px;width:auto;object-fit:contain}
.rep-title{font-size:16px;font-weight:600;color:var(--ink)}
html[dir=ltr] .rep-title{letter-spacing:.03em}
.rep-sub{font-size:13px;color:var(--text-2);margin-top:2px}
.rep-meta{font-size:12.5px;color:var(--text-2);text-align:end;line-height:1.6}
.rep-sec{margin-bottom:24px;page-break-inside:avoid}
.rep-sec-h{font-size:14.5px;font-weight:700;color:var(--ink);padding-bottom:6px;border-bottom:1.5px solid var(--ink);margin-bottom:12px}
.rep-tiles{margin-bottom:0}
/* overflow-x وحده لا يكفي: العنصر بلا حدّ عرض يتمدّد ليسع المحتوى بدل أن ينزلق،
فيدفع الصفحة أفقياً — نفس فخّ min-width:auto الذي أصاب جدول الدوام.
overflow-x alone is not enough: with no width bound the element grows to fit its
content instead of scrolling, pushing the page sideways — the same min-width:auto
trap that hit the timesheet grid. */
.rep-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0}
.rep-tbl{min-width:max-content}
.rep-tbl{width:100%;border-collapse:collapse;font-size:13px}
.rep-tbl th{text-align:start;padding:8px 10px;font-weight:600;color:var(--text-2);border-bottom:1px solid var(--line);font-size:12px;background:var(--bg)}
.rep-tbl td{padding:8px 10px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.rep-tbl th.num,.rep-tbl td.num{text-align:end;font-variant-numeric:tabular-nums}
.rep-tbl tr:hover td{background:rgba(15,32,59,.02)}
.rep-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px}
.rep-card-t{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:10px}
.rep-stat{font-size:13px;background:var(--bg);border:1px solid var(--line);padding:6px 12px;border-radius:var(--r-sm)}
.rep-sign{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;padding-top:20px;border-top:1px dashed var(--line);page-break-inside:avoid}
.rep-sign-box{text-align:center}
.rep-sign-box .l{font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:36px}
.rep-sign-box .line{height:1px;background:var(--ink);width:80%;margin:0 auto}
/* ═══ SIMULATOR · محاكاة هبوط العملات ═══ */
.sim-box{background:linear-gradient(180deg,rgba(207,156,81,.06),rgba(207,156,81,.01));border:1px solid rgba(207,156,81,.35);border-radius:var(--r);padding:16px;margin-bottom:16px}
.sim-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.sim-title{font-size:14px;font-weight:700;color:var(--ink)}
/* ثلاث عملات وحقلُ نسبةٍ لكلٍّ منها لا يتّسع لها صفٌّ واحد على هاتف:
المجموعة تأخذ سطرها، والأزرار تلتفّ داخلها، فلا تفيض الصفحة أفقياً.
Three currencies each with a percentage field do not fit one row on a phone:
each group takes its own line and its buttons wrap inside it, so the page
never scrolls sideways. */
.sim-ctrls{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;align-items:stretch}
.sim-grp{display:flex;align-items:center;gap:6px;font-size:13px;flex-wrap:wrap;min-width:0}
.sim-grp>b{flex:0 0 auto}
.sim-btns{display:flex;gap:4px;flex-wrap:wrap;min-width:0;flex:1 1 auto}
.sim-btn{border:1px solid var(--line);background:var(--card);padding:4px 9px;border-radius:6px;font-size:12px;cursor:pointer;transition:.15s}
.sim-btn:hover{border-color:var(--gold)}
.sim-btn.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600}
/* ═══ الطباعة · print ═══════════════════════════════════════════════════
⚠ الطباعة هنا ليست «الشاشة على ورق»: هي المخرَج الذي يُسلَّم إلى بنكٍ أو
مستثمر، والمستند المُسلَّم يلزمه ما لا تلزمه الشاشة — ترويسةٌ على كل صفحة،
وقطعٌ بين الأقسام، وألوانٌ تصمد.
⚠ والمولّد هو المتصفّح نفسه لا مكتبةَ PDF مضافة، وذلك قرارٌ لا تقصير:
التطبيق عربيّ أوّلاً، ومكتبات PDF في الجافاسكربت تكسر تشكيل الحروف العربية
ووصلَها وتخرجها معكوسةً أو مفكّكة. ومحرّك المتصفّح يُشكّل العربية تشكيلاً
صحيحاً، ويحمل خطّ IBM Plex Arabic نفسه، ويُخرج نصّاً قابلاً للتحديد والبحث.
فمخرجُه أفضل، وبلا مئتَي كيلوبايت ولا خطوة بناء.
⚠ Printing here is not "the screen on paper": it is the artefact handed to a
bank or an investor, and a handed document needs what a screen does not — a
header on every page, breaks between sections, and colours that survive.
⚠ And the generator is the browser itself rather than an added PDF library —
a decision, not a shortcut. This application is Arabic-first, and JavaScript
PDF libraries break Arabic shaping and joining, emitting letters reversed or
disconnected. The browser's engine shapes Arabic correctly, already has IBM
Plex Arabic, and produces selectable, searchable text. Its output is better,
with no 200KB and no build step. */
@media print {
/* الهوامش العلوية والسفلية تترك مكاناً للترويسة والتذييل الجاريين */
@page{margin:2.1cm 1.2cm 1.5cm;size:A4 portrait}
body{background:#fff!important;color:#000!important}
/* ⚠ وشريط التبويبات من التنقّل لا من المستند. لم يكن في هذه القائمة، فكان
يُطبع على رأس التقرير المُسلَّم — أزرارُ تنقّلٍ على ورقةٍ تذهب إلى بنك.
⚠ The tab strip is navigation, not document. It was missing from this list,
so it printed at the head of the delivered report — navigation buttons on a
sheet of paper going to a bank. */
#snav,#bnav,.topbar,.fab,#toast,#modal-root,#palette-root,.no-print,#review-flag,#idlebar,
.rep-bar,.ptabs,.pdials,.fhelp{display:none!important}
#app{display:block!important;padding:0!important;margin:0!important}
#view{padding:0!important;margin:0!important;max-width:100%!important}
.report-doc{box-shadow:none!important;border:none!important;padding:0!important;margin:0!important}
/* على الورق: مقاس النقطة الحقيقي من سلّم الهوية — ١٧ نصّاً و١٣ تعليقاً
و١١ عيناً — والمسطرة الذهبية تبقى ذهبية (print-color-adjust أعلاه).
On paper: real point sizes from the identity scale — 17 body, 13 caption,
11 eyebrow — and the gold rule stays gold (print-color-adjust above). */
.rep-header{border-bottom:2pt solid var(--gold)!important}
.report-doc{font-size:11pt}
.rep-title{font-size:13pt}
.rep-sub,.rep-meta{font-size:9pt}
.rep-sec-h{font-size:11pt}
.print-run{font-size:8pt}
.rep-sec-h{border-bottom:1.5px solid #000!important;color:#000!important}
.tile,.rep-card,.rep-stat{border:1px solid #ccc!important;box-shadow:none!important;background:#fff!important}
.rep-tbl th{background:#f5f5f5!important;color:#000!important;border-bottom:1px solid #000!important}
.rep-tbl td{border-bottom:1px solid #e0e0e0!important}
/* ── الجدول يسع الورقة · the table fits the sheet ──────────────────────
جداول التقرير مبنيّة لشاشةٍ عريضة، وصندوق صفحة A4 بعد الهوامش أضيق —
فتُقطع الأعمدة من الحافة. تصغيرٌ طفيف وتفافٌ للكلمات يُبقيها كلّها.
The report's tables are built for a wide screen, and an A4 page box after
its margins is narrower — so columns fall off the edge. A slight reduction
and word wrapping keep all of them on the sheet. */
.rep-tbl{width:100%!important;table-layout:auto!important;font-size:8.5pt!important}
.rep-tbl th,.rep-tbl td{padding:4pt 5pt!important;word-break:break-word!important}
.tiles{gap:8pt!important}
.report-doc,#view,.rep-sec{overflow:visible!important}
.dossier-signatures{page-break-inside:avoid!important;border-top:1.5px solid #000!important}
.ts{font-size:10px!important}
/* ── الأقسام تبدأ صفحاتها · sections start their own page ──────────────
قسمٌ يبدأ على بُعد سنتيمترين من أسفل الورقة ويكمل في التالية يُقرأ مقطوعاً.
والأول لا يُقطع قبله، وإلا خرجت صفحةٌ أولى فارغة.
A section starting two centimetres from the foot of a page and continuing
overleaf reads as interrupted. The first takes no break before it, or the
document opens on a blank page. */
.rep-sec{page-break-inside:auto!important;break-inside:auto!important;
page-break-before:always!important;break-before:page!important}
/* ⚠ الأول لا يُقطع قبله، وإلا فُتح المستند على صفحةٍ بيضاء.
وكان الشرط .rep-sec:first-of-type ولا يعمل: :first-of-type تقارن باسم
الوسم لا بالصنف، وأولُ div بين الإخوة هو الترويسة لا القسم — فلم تنطبق
القاعدة قطّ وخرجت الصفحة الأولى فارغة. والأخُ المجاور للترويسة هو المقصود.
⚠ The first takes no break before it, or the document opens on a blank page.
The rule was .rep-sec:first-of-type, which does not work: :first-of-type
compares TAG names, not classes, and the first div among the siblings is the
letterhead rather than the section — so it never matched and page one came
out empty. The adjacent sibling of the header is what was meant. */
.rep-header + .rep-sec{page-break-before:auto!important;break-before:auto!important}
.rep-sec-h{page-break-after:avoid!important;break-after:avoid!important}
.rep-tbl thead{display:table-header-group!important} /* الرؤوس تتكرّر */
.rep-tbl tr,.lrow,.rep-card,.tile{page-break-inside:avoid!important;break-inside:avoid!important}
/* ── الألوان تصمد · the colours survive ───────────────────────────────
⚠ المتصفّح يُسقط ألوان الخلفية في الطباعة افتراضاً، فتخرج أشرطة الإنفاق
والإنجاز مستطيلاتٍ بيضاء فارغة — أي أنّ الرسم الوحيد في التقرير يختفي،
ويبقى إطارُه يوحي بأنّ القيمة صفر. وهذه أسوأ من غيابه.
⚠ A browser drops background colours when printing, so the spend and
progress bars come out as empty white rectangles — the only chart in the
report vanishes and its frame implies a value of zero, which is worse than
omitting it. */
/* ⚠ تنطبق على المستندات التي فيها أشرطة فعلاً — موجز الفرع وحافظة الدوام
وبطاقات المشاريع. أمّا تقرير المجلس فجداول وأرقام بلا رسم.
⚠ These apply to the documents that actually have bars — the branch brief,
the attendance dossier, the project cards. The board report itself is tables
and figures, with no chart in it. */
.track,.track i,.tag,.code,.chip,.grade{
-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
.track{background:#e8eaf0!important}
.track i{background:var(--ink)!important}
.track i.built{background:var(--gold)!important}
.track i.over{background:#A63A2E!important}
/* ── ترويسةٌ وتذييلٌ على كل صفحة · a running head and foot ─────────────
مستندٌ يُسلَّم إلى بنك، وصفحته الثالثة بلا اسمٍ ولا فترة ورقةٌ مجهولة.
A document handed to a bank whose third page carries no name and no period
is an anonymous sheet of paper. */
.print-run{display:block!important}
.print-run-h{position:fixed;top:-1.55cm;inset-inline:0;
display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
font-size:8.5pt;color:#000;border-bottom:.5pt solid #999;padding-bottom:3pt}
.print-run-f{position:fixed;bottom:-1.05cm;inset-inline:0;
display:flex;justify-content:space-between;gap:12px;
font-size:7.5pt;color:#555;border-top:.5pt solid #ccc;padding-top:3pt}
.print-run b{font-weight:700}
}
/* لا تظهر الترويسة الجارية على الشاشة إطلاقاً · never on screen */
.print-run{display:none}
/* ═══ لوحة الأوامر العامة · Command Palette ═════════════════════════ */
.pal-mask{position:fixed;inset:0;background:rgba(15,32,59,.48);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
z-index:9999;display:flex;justify-content:center;align-items:flex-start;padding:65px 16px}
/* كانت تستعمل --bg-card و --line-3 و --r-md وهي غير معرّفة، فخرجت اللوحة
بلا خلفية ولا حدّ فبان محتوى الصفحة خلفها.
These used --bg-card / --line-3 / --r-md, none of which exist, so the panel had no
background or border and the page showed straight through it. */
.pal-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
box-shadow:0 24px 48px rgba(0,0,0,.26);width:100%;max-width:560px;overflow:hidden;animation:palIn .14s cubic-bezier(.16,1,.3,1)}
@keyframes palIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.pal-header{display:flex;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);gap:10px}
.pal-input{flex:1;border:none;outline:none;background:transparent;font-size:16px;color:var(--text);font-family:inherit}
.pal-esc{font-size:10.5px;font-family:inherit;font-weight:700;border:1px solid var(--line);
padding:2px 6px;border-radius:4px;color:var(--text-3);background:var(--bg);cursor:pointer}
.pal-list{max-height:330px;overflow-y:auto;padding:6px}
.pal-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r-sm);
cursor:pointer;transition:background .1s,border-color .1s;border-inline-start:3px solid transparent}
.pal-item:hover,.pal-item.active{background:var(--gold-soft);border-inline-start-color:var(--gold)}
.pal-i{font-size:16px;width:22px;text-align:center;flex-shrink:0}
.pal-m{flex:1;min-width:0}
.pal-t{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-s{font-size:11.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[dir=rtl] .pal-s[dir=ltr]{text-align:right}
.pal-c{font-size:10.5px;padding:2px 6px;border-radius:4px;background:var(--bg);border:1px solid var(--line);color:var(--text-2);flex-shrink:0}
.pal-empty{padding:26px;text-align:center;color:var(--text-3);font-size:13px}
.pal-footer{display:flex;justify-content:space-between;padding:9px 14px;background:var(--bg);
border-top:1px solid var(--line);font-size:11.5px;color:var(--text-3)}
/* ═══ الحركات · motion — انظر القسم الموحّد في آخر الملف · see the one
consolidated section at the end of this file ═══════════════════════ */
/* ═══ أداة اختيار الموظفين الحديثة · Modern Staff Picker Carousel ═══ */
.staff-picker-wrap {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r);
padding: 12px 14px;
}
.staff-picker-scroll {
display: flex;
gap: 10px;
overflow-x: auto;
padding-bottom: 4px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.staff-pill-btn {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 13px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--r-sm);
cursor: pointer;
flex-shrink: 0;
transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
scroll-snap-align: start;
}
.staff-pill-btn:hover {
border-color: var(--gold);
background: var(--bg);
}
.staff-pill-btn.active {
background: var(--gold-soft);
border-color: var(--gold);
box-shadow: 0 2px 8px rgba(201, 162, 39, 0.18);
}
.staff-pill-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
flex-shrink: 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}
.staff-pill-info {
text-align: start;
}
.staff-pill-name {
font-size: 12.5px;
font-weight: 700;
color: var(--ink);
white-space: nowrap;
}
.staff-pill-role {
font-size: 11px;
color: var(--text-3);
white-space: nowrap;
}
/* ═══ SVG CHARTS · الرسوم البيانية ═══
height:auto صالح في CSS لا كخاصية على