/* ============================================================================ نظام التصميم — مشتقّ من نظام التسجيل والتحضير لمؤتمر مجمع الملك سلمان العالمي للغة العربية. عربيّ، من اليمين إلى اليسار (RTL) وحده. الألوان الأساسية : #9436C4 بنفسجي الهيئة العامة للترفيه · #474747 رمادي داكن الألوان الثانوية : #009624 أخضر الهيئة · #CECECE رمادي فاتح الخط : SF Mada بوزنين (400 و700) — الوحيد المعتمد الأيقونات : assets/js/icons.js — الدليل الكامل: DESIGN.md بجوار مجلد assets. لا تُكتب ألوان أو ظلال أو حواف بقيم حرفية في الصفحات — من الرموز (--*) وحدها. ========================================================================== */ /* ── 1) الخطوط ──────────────────────────────────────────────────────────── */ @font-face{ font-family:'SF Mada'; src:url('../fonts/SFMada-Regular.otf') format('opentype'), url('../fonts/SFMada-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'SF Mada'; src:url('../fonts/SFMada-Bold.otf') format('opentype'), url('../fonts/SFMada-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; } /* ── 2) الرموز ──────────────────────────────────────────────────────────── */ :root{ /* سُلّم البنفسجي — مأخوذ بالعيّنة من شعار الهيئة #9436C4 أسماء الرموز --navy-* مُبقاة كما هي ليبقى النظام متوافقاً مع الحقيبة */ --navy-950:#2B0E3D; --navy-900:#3D1457; --navy-800:#6A2491; --navy:#9436C4; --navy-700:#9436C4; --navy-600:#A24FCF; --navy-500:#B36DDA; --navy-400:#C795E6; --navy-200:#E6D2F3; --navy-50:#F7F0FB; /* سُلّم التركوازي — مشتقّ من #009624 */ --teal-700:#006B1A; --teal-600:#00801F; --teal:#009624; --teal-400:#33AB50; --teal-300:#7FCB91; --teal-100:#DDF2E2; --teal-50:#F1FAF3; /* المحايد — مثبّت على #474747 و #CECECE من الدليل */ --n-0:#FFFFFF; --n-25:#FBFCFC; --n-50:#F6F7F8; --n-100:#EFF1F2; --n-200:#E3E6E8; --n-300:#CECECE; --n-400:#AAAEB1; --n-500:#82878B; --n-600:#5F6469; --n-700:#474747; --n-800:#333638; --n-900:#212325; /* الدلالة — مشبعة بما يناسب لوحة الهوية لا بما تفرضه المكتبات */ --ok:#2F8F6B; --ok-bg:#E4F3ED; --ok-ink:#1D5C45; --warn:#B8791A; --warn-bg:#FBF0DC; --warn-ink:#7A4E0C; --danger:#B84A42; --danger-bg:#FAE8E7;--danger-ink:#7D2F29; --info:#009624; --info-bg:#DDF2E2; --info-ink:#006B1A; /* التدرّجات */ --grad-brand:linear-gradient(135deg,#A24FCF 0%,#9436C4 100%); --grad-teal:linear-gradient(135deg,#33AB50 0%,#009624 100%); --grad-side:linear-gradient(190deg,#A040D0 0%,#9436C4 45%,#4A1670 100%); --grad-sheen:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.14) 50%,transparent 70%); /* الحواف */ --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-pill:999px; /* الظلال */ --sh-xs:0 1px 2px rgba(43,14,61,.05); --sh-sm:0 1px 3px rgba(43,14,61,.07),0 1px 2px rgba(43,14,61,.04); --sh-md:0 4px 14px rgba(43,14,61,.07); --sh-lg:0 12px 32px rgba(43,14,61,.10); --sh-pop:0 24px 60px rgba(10,26,39,.22); --sh-teal:0 6px 18px rgba(0,150,36,.30); --sh-navy:0 6px 18px rgba(25,61,88,.28); /* المخططات — لونٌ واحد للمقدار، مُنتقى من سُلّم الشعار ومُتحقَّقٌ منه لا مُقدَّرٌ بالعين: داخلَ نطاق الإضاءة، وتبايُنُه على الأبيض فوق ٣:١، وفصلُه عن جاره تحت عمى الألوان الأحمر‑الأخضر مقيسٌ بـΔE في OKLab. وأخضرُ الشعار وتركوازيُّه مكتومان بقرارٍ في الهوية، فلا يُجمعان سلسلتين على رسمٍ واحد: الهويّةُ حينها من المسمّى المكتوب لا من اللون. */ --viz-ink:#A24FCF; --viz-wash:rgba(148,54,196,.10); --viz-rule:var(--n-200); --viz-track:var(--n-100); /* الحركة */ --e-out:cubic-bezier(.16,1,.3,1); --e-soft:cubic-bezier(.4,0,.2,1); --e-spring:cubic-bezier(.34,1.4,.64,1); --t-fast:.16s var(--e-soft); --t:.26s var(--e-out); --t-slow:.42s var(--e-out); --ornament:url("data:image/svg+xml,"); --side-w:266px; --top-h:66px; } /* ── 3) الأساس ──────────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden} body{ /* SF Mada أولاً في الاتجاهين: خطّ الهوية، وتغطيته اللاتينية كافية للواجهة. وما بعده احتياطٌ للمحارف التي ينقصها (انظر FontCoverage في البطاقة). */ font-family:'SF Mada','Noto Naskh Arabic','Segoe UI',Tahoma,sans-serif; font-size:15px; line-height:1.75; color:var(--n-700); /* clip لا hidden: hidden تجعل body حاوية تمرير فيتعطّل ثبات الشريط العلوي (sticky) */ background:var(--n-50); overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3,h4,h5{font-weight:700;line-height:1.4;color:var(--navy)} h1{font-size:26px} h2{font-size:21px} h3{font-size:18px} h4{font-size:16px} a{color:var(--teal-600);text-decoration:none;transition:color var(--t-fast)} a:hover{color:var(--teal-700)} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer} img,svg{display:block;max-width:100%} ul,ol{list-style:none} table{border-collapse:collapse;width:100%} :focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px} ::selection{background:var(--teal-100);color:var(--navy)} /* الأرقام في الجداول والبطاقات — عرض ثابت حتى لا ترقص الأعمدة */ .num,.data-table td,.kpi-val,.stat-val{font-variant-numeric:tabular-nums} .mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.88em;letter-spacing:-.02em} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--n-300);border-radius:9px;border:2px solid transparent;background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background:var(--n-400);background-clip:content-box} /* إخفاءٌ بصريّ لا إزاحةٌ خارج الشاشة: `right:-9999px` يوسّع مساحة التمرير في RTL فيظهر شريط أفقي وهمي على الجوال. */ .skip-link{ position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap; top:8px;inset-inline-start:8px;z-index:999; background:var(--navy);color:#fff;padding:10px 18px;border-radius:var(--r-sm); } .skip-link:focus{width:auto;height:auto;clip-path:none;overflow:visible} /* ── 4) القشرة ──────────────────────────────────────────────────────────── */ .app{min-height:100vh} .side{ position:fixed;inset-block:0;inset-inline-start:0;width:var(--side-w); background:var(--grad-side);color:#fff;z-index:60; display:flex;flex-direction:column;overflow:hidden; box-shadow:1px 0 0 rgba(255,255,255,.06); transition:transform var(--t-slow); } /* صورة الفعالية خلف الشريط: ليلة حفلٍ حقيقية، لا زخرفة مكرَّرة. طبقتان — الصورة، ثم تدرّج أخضر يفتح في الأسفل فيبقى النص مقروءاً. */ .side::before{ content:'';position:absolute;inset:0;z-index:0;pointer-events:none; background:url(../img/side-bg.jpg) center/cover no-repeat; opacity:.62; } .side::after{ content:'';position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(to bottom, rgba(148,54,196,.95) 0%, rgba(148,54,196,.90) 30%, rgba(106,36,145,.82) 58%, rgba(74,22,112,.70) 82%, rgba(43,14,61,.74) 100%); } /* المحتوى فوق الطبقتين */ .side-head,.side-scroll,.side-foot{position:relative;z-index:1} .side-head{ padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,.09);position:relative; } /* الشعار الرسمي بنسخته البيضاء — ملفٌّ مستقل لا مرشّح CSS: المرشّح يُعيد حساب كل بكسل عند كل رسم، ويسقط في الطباعة عند بعض المتصفّحات. */ .side-head{display:flex;align-items:center;gap:13px} .side-mark{ width:46px;height:auto;flex:none; filter:drop-shadow(0 2px 7px rgba(0,0,0,.28)); } .side-logo{width:100%;max-width:212px;height:auto} .side-name{min-width:0} .side-name b{display:block;font-size:15.5px;font-weight:700;line-height:1.35;color:#fff} .side-sub{ margin-top:1px;font-size:11.5px;color:var(--teal-300); letter-spacing:.03em;font-weight:400; } .side-scroll{flex:1;overflow-y:auto;padding:14px 12px 20px;position:relative;z-index:1} .side-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);background-clip:content-box} .nav-grp{margin-bottom:4px} .nav-mod{ width:100%;display:flex;align-items:center;gap:11px; padding:10px 12px;border-radius:var(--r-md); color:rgba(255,255,255,.62);font-size:12.5px;font-weight:700; letter-spacing:.03em;transition:all var(--t-fast);text-align:start; } .nav-mod:hover{background:rgba(255,255,255,.07);color:#fff} .nav-mod.has-active{color:#fff} .nav-mod .ic{width:17px;height:17px;opacity:.9} .nav-mod .mt{flex:1} .nav-mod .chev{width:13px;height:13px;transition:transform var(--t);opacity:.5} .nav-mod.open .chev{transform:rotate(180deg)} .nav-sub{display:none;padding:2px 0 6px} .nav-mod.open+.nav-sub{display:block;animation:navIn .3s var(--e-out)} @keyframes navIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .nav-leaf{ display:flex;align-items:center;gap:10px;position:relative; padding-block:9px;padding-inline:30px 12px;margin:1px 0;border-radius:var(--r-sm); color:rgba(255,255,255,.74);font-size:13.5px;transition:all var(--t-fast); } .nav-leaf:hover{background:rgba(255,255,255,.08);color:#fff} .nav-leaf .ic{width:15px;height:15px;opacity:.75} .nav-leaf.active{background:rgba(0,150,36,.24);color:#fff;font-weight:700} .nav-leaf.active .ic{opacity:1;color:var(--teal-300)} .nav-leaf.active::before{ content:'';position:absolute;inset-inline-end:0;top:50%;transform:translateY(-50%); width:3px;height:20px;border-radius:3px;background:var(--teal-300); } .nav-leaf .cnt{ margin-inline-start:auto;font-size:11px;font-weight:700; min-width:20px;text-align:center;padding:1px 6px;border-radius:var(--r-pill); background:rgba(255,255,255,.14); } .nav-leaf .cnt.hot{background:var(--danger);color:#fff} .nav-leaf .cnt.warm{background:var(--warn);color:#fff} .side-foot{ padding:12px 16px;border-top:1px solid rgba(255,255,255,.09); font-size:11px;color:rgba(255,255,255,.4);position:relative;z-index:1; display:flex;justify-content:space-between;align-items:center; } .env-dot{display:inline-flex;align-items:center;gap:5px;color:var(--teal-300)} .env-dot i{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(51,171,80,.2)} /* ── 4ب) مساحات العمل في القائمة الجانبية ───────────────────────────────── */ /* اللوحة البيضاء: طبقتان كطبقتَي الشريط — صورة الفعالية ثم تدرّج — إلا أن التدرّج هنا أبيض لا أخضر. ولأن الأرضية انقلبت، ينقلب معها كل لون نصٍّ وحدٍّ داخلها: الأبيض على أبيض لا يُقرأ. */ .ws-panel{ position:relative;isolation:isolate;overflow:hidden; border-radius:var(--r-lg);margin:2px 0 10px; box-shadow:0 1px 0 rgba(255,255,255,.14),0 6px 18px rgba(0,0,0,.18); } .ws-panel::before{ content:'';position:absolute;inset:0;z-index:0;pointer-events:none; background:url(../img/side-bg.jpg) center/cover no-repeat; opacity:.62; } .ws-panel::after{ content:'';position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(to bottom, rgba(255,255,255,.96) 0%, rgba(255,255,255,.93) 30%, rgba(255,255,255,.90) 58%, rgba(255,255,255,.93) 82%, rgba(255,255,255,.96) 100%); } .ws-panel > *{position:relative;z-index:1} .ws-panel .nav-mod{color:var(--navy);padding:9px 11px} .ws-panel .nav-mod:hover,.ws-panel .nav-mod.has-active{background:rgba(148,54,196,.07);color:var(--navy)} .ws-panel .nav-mod .chev{opacity:.45} .ws-panel .nav-sub{padding:0 4px 6px} .ws-panel .nav-leaf{color:var(--n-700)} .ws-panel .nav-leaf:hover{background:rgba(148,54,196,.08);color:var(--navy)} .ws-panel .nav-leaf.active{background:var(--teal-50);color:var(--navy)} .ws-panel .nav-leaf.active::before{background:var(--teal-600)} .ws-panel .ws-leaf.closed{color:var(--n-400)} .nav-mod .ws-n{ font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:var(--r-pill); background:rgba(148,54,196,.1);color:var(--teal-700); } .ws-filter{ display:flex;align-items:center;gap:7px;margin:3px 2px 7px;padding:0 10px;height:30px; border-radius:var(--r-pill);background:rgba(255,255,255,.72); border:1px solid var(--n-200);transition:all var(--t-fast); } .ws-filter:focus-within{background:#fff;border-color:var(--teal-300);box-shadow:0 0 0 3px var(--teal-50)} .ws-filter .ic{width:14px;height:14px;color:var(--n-400)} .ws-filter input{ flex:1;min-width:0;border:0;outline:none;background:none;color:var(--navy); font-family:inherit;font-size:12.5px; } .ws-filter input::placeholder{color:var(--n-400)} .ws-cat{margin-bottom:3px} .ws-cat[hidden]{display:none} .ws-cat-h{ display:flex;align-items:center;gap:7px;padding:4px 11px 2px; font-size:10.5px;font-weight:800;letter-spacing:.04em; color:var(--n-500); } .ws-cat-h .sw{width:8px;height:8px;border-radius:2px;flex:0 0 8px} /* السطر: اسم الجهة، ثم ما ينتظر قراراً فيها. واللون على رأس فئتها وحده */ .nav-leaf.ws-leaf{padding-block:4px;padding-inline:17px 11px;margin:0;font-size:12.5px;gap:8px} .ws-leaf.active::before{height:14px} .nav-leaf.ws-leaf[hidden]{display:none} .ws-leaf .ws-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ws-leaf .cnt{margin-inline-start:6px} /* المغلقة تبقى في القائمة ويُرى إغلاقها — لا تُحجب */ .ws-leaf.closed{color:rgba(255,255,255,.4)} .ws-none{padding:7px 11px;font-size:12px;color:var(--n-500)} /* ── 5) الشريط العلوي ───────────────────────────────────────────────────── */ .main{margin-inline-start:var(--side-w);min-height:100vh;display:flex;flex-direction:column} .top{ height:var(--top-h);position:sticky;top:0;z-index:50; background:rgba(255,255,255,.88);backdrop-filter:blur(14px); border-bottom:1px solid var(--n-200); display:flex;align-items:center;gap:14px;padding:0 24px; } .crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--n-500);min-width:0} .crumb b{color:var(--navy);font-size:15.5px;font-weight:700} .crumb .sep{color:var(--n-300)} .top-sp{flex:1} .top-search{ display:flex;align-items:center;gap:9px;height:38px;width:270px; padding:0 13px;border-radius:var(--r-pill); background:var(--n-100);border:1px solid transparent; color:var(--n-500);font-size:13.5px;transition:all var(--t-fast); } .top-search:hover{background:var(--n-50);border-color:var(--n-200)} .top-search:focus-within{background:#fff;border-color:var(--teal-300);box-shadow:0 0 0 3px var(--teal-50)} .top-search input{flex:1;border:0;background:none;outline:none;min-width:0} .top-search kbd{ font-size:10.5px;padding:2px 6px;border-radius:5px; background:var(--n-0);border:1px solid var(--n-200);color:var(--n-500); } .icon-btn{ width:38px;height:38px;border-radius:var(--r-md);display:grid;place-items:center; color:var(--n-600);transition:all var(--t-fast);position:relative; } .icon-btn:hover{background:var(--n-100);color:var(--navy)} .icon-btn .dot{ position:absolute;top:8px;inset-inline-end:8px;width:7px;height:7px; border-radius:50%;background:var(--danger);border:2px solid #fff; } .who{display:flex;align-items:center;gap:10px;padding-block:4px;padding-inline:6px 10px;border-radius:var(--r-pill);transition:background var(--t-fast)} .who:hover{background:var(--n-100)} .who-txt{text-align:start;line-height:1.3} .who-txt b{display:block;font-size:13px;color:var(--navy)} .who-txt span{font-size:11px;color:var(--n-500)} /* الحرفان بديلاً عن الصورة — الدائرة تُقرأ بياضاً على الأخضر، ومركزُها مركزُ الحرف لا مركزُ سطرٍ موروث: `line-height:1` يُسقط الرصاص الذي كان يدفع الحرف العربي إلى أعلى الدائرة. ولا تُلحِق به قاعدةُ حاوية لونَها ولا `display` — الحرفان ليسا سطرَ وصفٍ ثانياً. */ .avatar{ width:34px;height:34px;border-radius:50%;display:grid;place-items:center; background:var(--grad-brand);color:#fff;font-size:13px;font-weight:700;flex:0 0 34px; line-height:1;text-align:center;overflow:hidden;position:relative; } .avatar.teal{background:var(--grad-teal)} /* خانة الصورة في عمودها — نسبة البطاقة ٣×٤ لا دائرة، فالملامح تُقرأ. والصورة تغطّي المربّع الساكن ولا تمحوه: سقوطُها يكشفه ثانيةً بلا سطر برمجة. و`object-fit` هنا متصفّحٌ لا mPDF — البطاقة تُلائم صورتها في GD. */ .photo-cell{ width:46px;height:46px;border-radius:var(--r-sm); display:grid;place-items:center;position:relative;overflow:hidden; background:var(--n-100);color:var(--n-400);flex:0 0 46px; } .photo-cell > img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center top; } .photo-cell [data-ic]{width:18px;height:18px} /* الصورة كما رُفعت: بنسبتها لا مقصوصةً إلى الخانة، والمربّع الساكن تحتها */ .photo-cell.as-is{height:auto;min-height:46px;max-height:72px} .photo-cell.as-is > *{grid-area:1/1} .photo-cell.as-is > img{position:static;width:46px;height:auto;max-height:72px;object-fit:contain} .col-photo{width:62px} /* الصورة وشعارُ حالتها في عمودٍ واحد — الحالة تحتها لا بإزائها، فالعمود ضيّق */ .photo-with-state{display:flex;align-items:center;gap:9px;flex-wrap:wrap} /* مُبدِّل اللغة — زرٌّ واحد يُسمّى باللغة التي ينقل إليها. واسمه بلغته هو (`lang` و`dir` على الـ)، فلا يُقرأ «English» معكوساً في صفحةٍ عربية. */ .lang-form{display:flex;flex:0 0 auto} .lang-btn{width:auto;display:inline-flex;align-items:center;gap:7px;padding:0 11px; font-size:12px;font-weight:700;color:var(--n-600)} .lang-btn > span{line-height:1} .avatar.sm{width:28px;height:28px;flex-basis:28px;font-size:11px} .avatar.lg{width:46px;height:46px;flex-basis:46px;font-size:17px} /* شارة «ما فائدة هذه الشاشة؟» — تُلازم كل شاشة */ .value-chip{ display:inline-flex;align-items:center;gap:7px;max-width:min(52ch,40vw); padding:5px 12px;border-radius:var(--r-pill); background:var(--teal-50);border:1px solid var(--teal-100); color:var(--teal-700);font-size:12px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; transition:all var(--t-fast); } .value-chip:hover{background:var(--teal-100);border-color:var(--teal-300)} .value-chip .ic{width:14px;height:14px;flex:0 0 14px} /* ── 6) الصفحة ──────────────────────────────────────────────────────────── */ /* بلا `max-width`: المحتوى يملأ ما تبقّى بعد الشريط الجانبي مهما اتّسعت الشاشة. والحدّ الأقصى كان يترك فراغاً ميتاً على الشاشات الكبيرة. */ .page{padding:24px;flex:1;width:100%} .page-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px} .page-head .ttl{flex:1;min-width:240px} .page-head h1{display:flex;align-items:center;gap:10px} .page-head p{color:var(--n-500);font-size:13.5px;margin-top:3px} .page-act{display:flex;gap:9px;flex-wrap:wrap} .grid{display:grid;gap:16px} .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} .g-main{grid-template-columns:minmax(0,1fr) 340px;align-items:start} /* شبكات ذات عمود جانبي ثابت — العمود الثابت هو ما يُفيض الشاشة الضيّقة، فتنهار كلها إلى عمود واحد قبل أن يبدأ التمرير الأفقي. */ .g-side{grid-template-columns:minmax(0,1fr) 400px;align-items:start} .g-pick{grid-template-columns:320px minmax(0,1fr);align-items:start} @media(max-width:1200px){ .g4{grid-template-columns:repeat(2,minmax(0,1fr))} .g-main,.g-side,.g-pick{grid-template-columns:minmax(0,1fr)} } @media(max-width:820px){.g2,.g3{grid-template-columns:minmax(0,1fr)}} @media(max-width:640px){.g4{grid-template-columns:minmax(0,1fr)}} .foot{ padding:16px 24px;border-top:1px solid var(--n-200); display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap; font-size:12px;color:var(--n-500); } /* ── 7) البطاقات ────────────────────────────────────────────────────────── */ .card{ background:#fff;border:1px solid var(--n-200);border-radius:var(--r-xl); box-shadow:var(--sh-sm);transition:box-shadow var(--t),transform var(--t),border-color var(--t); } .card.lift:hover{box-shadow:var(--sh-md);transform:translateY(-2px);border-color:var(--n-300)} .card-head{ padding:16px 20px;border-bottom:1px solid var(--n-100); display:flex;align-items:center;gap:12px;flex-wrap:wrap; } .card-head h3{flex:1;min-width:150px;display:flex;align-items:center;gap:9px} .card-head .sub{font-size:12px;color:var(--n-500);font-weight:400} .card-body{padding:20px} .card-body.tight{padding:0} .card-foot{padding:13px 20px;border-top:1px solid var(--n-100);background:var(--n-25); border-radius:0 0 var(--r-xl) var(--r-xl);display:flex;gap:10px;align-items:center;flex-wrap:wrap} .icon-tile{ width:38px;height:38px;flex:0 0 38px;border-radius:var(--r-md); display:grid;place-items:center;background:var(--teal-50);color:var(--teal-600); } .icon-tile.navy{background:var(--navy-50);color:var(--navy)} .icon-tile.ok{background:var(--ok-bg);color:var(--ok-ink)} .icon-tile.warn{background:var(--warn-bg);color:var(--warn-ink)} .icon-tile.danger{background:var(--danger-bg);color:var(--danger-ink)} /* ── كتلة نصٍّ تقنيّ: JSON مُنسَّق أو ترويسةُ نداء — تُقرأ لا تُزيَّن ─── */ .code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px;line-height:1.7;color:var(--n-700); background:var(--n-50);border:1px solid var(--n-200);border-radius:var(--r-md); padding:12px 14px;overflow-x:auto;margin:0; } /* ── 8) بطاقات المؤشرات ─────────────────────────────────────────────────── */ .kpi{ position:relative;overflow:hidden;background:#fff; border:1px solid var(--n-200);border-radius:var(--r-xl); padding:18px 20px;box-shadow:var(--sh-sm); transition:all var(--t); } .kpi::before{ content:'';position:absolute;inset-block-start:0;inset-inline:0;height:3px; background:var(--grad-teal);opacity:.9; } .kpi.navy::before{background:var(--grad-brand)} .kpi.ok::before{background:linear-gradient(135deg,#46A583,var(--ok))} .kpi.warn::before{background:linear-gradient(135deg,#D69B3F,var(--warn))} .kpi:hover{box-shadow:var(--sh-md);transform:translateY(-2px)} .kpi-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px} .kpi-lbl{flex:1;font-size:12.5px;color:var(--n-500);line-height:1.5} .kpi-val{font-size:31px;font-weight:700;color:var(--navy);line-height:1.15;letter-spacing:-.02em} .kpi-val small{font-size:15px;color:var(--n-400);font-weight:400;margin-inline-start:3px} .kpi-meta{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:11.5px;color:var(--n-500)} .trend{display:inline-flex;align-items:center;gap:3px;font-weight:700;padding:1px 7px;border-radius:var(--r-pill)} .trend.up{color:var(--ok-ink);background:var(--ok-bg)} .trend.down{color:var(--danger-ink);background:var(--danger-bg)} .trend.flat{color:var(--n-600);background:var(--n-100)} .meter{height:6px;border-radius:var(--r-pill);background:var(--n-100);overflow:hidden;margin-top:11px} .meter i{display:block;height:100%;border-radius:var(--r-pill);background:var(--grad-teal); transition:width 1s var(--e-out)} .meter.navy i{background:var(--grad-brand)} .meter.ok i{background:linear-gradient(135deg,#46A583,var(--ok))} /* السعة تقترب من الحد ثم تبلغه — اللون يسبق الرقم إلى العين */ .meter.warn i{background:linear-gradient(135deg,#D79B3C,var(--warn))} .meter.danger i{background:linear-gradient(135deg,#CF6A61,var(--danger))} /* ── 9) الأزرار ─────────────────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:7px; height:38px;padding:0 16px;border-radius:var(--r-md); font-size:13.5px;font-weight:700;white-space:nowrap; border:1px solid transparent;transition:all var(--t-fast); position:relative;overflow:hidden; } .btn .ic{width:16px;height:16px;flex:0 0 16px} .btn:active{transform:translateY(1px)} .btn:disabled,.btn.is-disabled{opacity:.5;pointer-events:none} .btn-primary{background:var(--grad-brand);color:#fff;box-shadow:var(--sh-navy)} .btn-primary:hover{filter:brightness(1.12);box-shadow:0 8px 22px rgba(25,61,88,.34)} .btn-teal{background:var(--grad-teal);color:#fff;box-shadow:var(--sh-teal)} .btn-teal:hover{filter:brightness(1.08);box-shadow:0 8px 22px rgba(0,150,36,.38)} .btn-ghost{background:#fff;border-color:var(--n-200);color:var(--n-700)} .btn-ghost:hover{border-color:var(--navy-200);background:var(--navy-50);color:var(--navy)} .btn-soft{background:var(--teal-50);color:var(--teal-700);border-color:var(--teal-100)} .btn-soft:hover{background:var(--teal-100);border-color:var(--teal-300)} .btn-ok{background:var(--ok);color:#fff} .btn-ok:hover{filter:brightness(1.08)} .btn-danger{background:#fff;border-color:var(--danger-bg);color:var(--danger)} .btn-danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)} .btn-lg{height:46px;padding:0 24px;font-size:15px;border-radius:var(--r-lg)} .btn-sm{height:31px;padding:0 11px;font-size:12.5px;border-radius:var(--r-sm)} .btn-sm .ic{width:14px;height:14px;flex-basis:14px} .btn-icon{width:33px;height:33px;padding:0;border-radius:var(--r-sm)} .btn-block{width:100%} /* لمعة تمرّ على الأزرار الأساسية — لمسة حياة بلا ضجيج */ .btn-primary::after,.btn-teal::after{ content:'';position:absolute;inset:0;background:var(--grad-sheen); transform:translateX(-120%);transition:transform .7s var(--e-out); } .btn-primary:hover::after,.btn-teal:hover::after{transform:translateX(120%)} .btn-grp{display:inline-flex;border:1px solid var(--n-200);border-radius:var(--r-md);overflow:hidden;background:#fff} .btn-grp .btn{border-radius:0;border:0;box-shadow:none;background:#fff;color:var(--n-600);height:36px} .btn-grp .btn+.btn{border-inline-start:1px solid var(--n-200)} .btn-grp .btn.on{background:var(--navy);color:#fff} /* ── 10) الوسوم والحالات ────────────────────────────────────────────────── */ .badge{ display:inline-flex;align-items:center;gap:5px; padding:3px 10px;border-radius:var(--r-pill); font-size:11.5px;font-weight:700;line-height:1.7;white-space:nowrap; } .badge .ic{width:12px;height:12px} .badge-ok{background:var(--ok-bg);color:var(--ok-ink)} .badge-warn{background:var(--warn-bg);color:var(--warn-ink)} .badge-danger{background:var(--danger-bg);color:var(--danger-ink)} .badge-info{background:var(--info-bg);color:var(--info-ink)} .badge-navy{background:var(--navy-50);color:var(--navy)} .badge-mute{background:var(--n-100);color:var(--n-600)} .badge-out{background:#fff;border:1px solid var(--n-200);color:var(--n-600)} /* وسوم متجاورة تنكسر إلى أسطر داخل خلية الجدول */ .badge-wrap{display:flex;flex-wrap:wrap;gap:5px;align-items:center} /* الوسم الرابط: لونه من بيانات الصف، وأثر الضغط وحده من هنا */ a.badge{text-decoration:none;cursor:pointer;transition:filter .15s ease,box-shadow .15s ease} a.badge:hover{filter:brightness(.95) saturate(1.1);box-shadow:0 1px 5px rgba(16,24,40,.12)} a.badge:active{filter:brightness(.9)} a.badge:focus-visible{outline:2px solid var(--navy);outline-offset:2px} /* اسم الصفّ رابطاً إلى صفحته: لا لون رابطٍ صارخ داخل الجدول */ .nm-lnk{text-decoration:none;color:inherit} .nm-lnk:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px} .nm-lnk:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:4px} .dot-live{ display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok); box-shadow:0 0 0 0 rgba(47,143,107,.55);animation:pulse 2s infinite; } @keyframes pulse{70%{box-shadow:0 0 0 7px rgba(47,143,107,0)}100%{box-shadow:0 0 0 0 rgba(47,143,107,0)}} /* ── 11) الفلاتر والتبويبات ─────────────────────────────────────────────── */ .tabs{display:flex;gap:3px;border-bottom:1px solid var(--n-200);overflow-x:auto;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tab{ padding:11px 16px;font-size:13.5px;color:var(--n-500);font-weight:700; border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap; transition:all var(--t-fast);display:inline-flex;align-items:center;gap:7px; } .tab:hover{color:var(--navy)} .tab.on{color:var(--navy);border-bottom-color:var(--teal)} .tab .cnt{font-size:11px;padding:1px 7px;border-radius:var(--r-pill);background:var(--n-100);color:var(--n-600)} .tab.on .cnt{background:var(--teal-100);color:var(--teal-700)} .chips{display:flex;gap:7px;flex-wrap:wrap;align-items:center} .chip{ display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px; border-radius:var(--r-pill);background:#fff;border:1px solid var(--n-200); font-size:12.5px;color:var(--n-600);transition:all var(--t-fast); } .chip:hover{border-color:var(--navy-200);color:var(--navy)} .chip.on{background:var(--navy);border-color:var(--navy);color:#fff} .chip .x{opacity:.6} .chip .x:hover{opacity:1} /* ── 12) الجداول ────────────────────────────────────────────────────────── */ .tbl-wrap{overflow-x:auto;border-radius:0 0 var(--r-xl) var(--r-xl)} .data-table{font-size:13.5px} .data-table thead th{ position:sticky;top:0;z-index:2; background:var(--n-50);color:var(--n-600); font-size:12px;font-weight:700;text-align:start;white-space:nowrap; padding:11px 14px;border-bottom:1px solid var(--n-200); } .data-table thead th.sortable{padding:0;cursor:pointer;user-select:none} .data-table thead th.sortable:hover{color:var(--navy);background:var(--n-100)} /* الرأس القابل للترتيب: الرابط (الخادم) والزر (المتصفّح) يملآن الخانة كلها، فمنطقة الضغط هي الرأس لا النصّ. والسهم يظهر بالتمرير إن لم يكن مرتَّباً به. */ .data-table thead th.sortable > a, .data-table thead th.sortable > button{ display:flex;align-items:center;gap:6px;width:100%; padding:11px 14px;color:inherit;font:inherit;font-weight:700;text-align:start; background:none;border:0;cursor:pointer;text-decoration:none;white-space:nowrap; } .data-table thead th.sortable > a:focus-visible, .data-table thead th.sortable > button:focus-visible{outline:2px solid var(--teal);outline-offset:-2px} .data-table thead th.sortable .ic{width:13px;height:13px;opacity:0;transition:opacity var(--t-fast)} .data-table thead th.sortable:hover .ic, .data-table thead th.sortable:focus-within .ic{opacity:.5} .data-table thead th.sorted{color:var(--navy);background:var(--n-100);box-shadow:inset 0 -2px 0 var(--teal)} .data-table thead th.sorted .ic{opacity:1;color:var(--teal)} .data-table thead th.center.sortable > a, .data-table thead th.center.sortable > button{justify-content:center} .data-table tbody td{padding:12px 14px;border-bottom:1px solid var(--n-100);vertical-align:middle} .data-table tbody tr{transition:background var(--t-fast)} .data-table tbody tr:hover{background:var(--teal-50)} .data-table tbody tr.on{background:var(--teal-50);box-shadow:inset 3px 0 0 var(--teal)} .data-table tbody tr:last-child td{border-bottom:0} .data-table .who-cell{display:flex;align-items:center;gap:10px;min-width:0} .data-table .who-cell b{display:block;color:var(--navy);font-size:13.5px;line-height:1.5} .data-table .who-cell span:not(.avatar){display:block;font-size:11.5px;color:var(--n-500)} .row-act{display:flex;gap:5px;justify-content:flex-end} /* خليةُ أفعالٍ كثيرة: الخلية تضيق إلى عرض زرّ فتلتفّ الأزرار عموداً؛ شبكةٌ بأربعة أعمدة تجعلها سطرين على الأكثر */ .row-act-grid{display:grid;grid-template-columns:repeat(4,33px);gap:5px;justify-content:end} .row-act-grid .row-act{display:contents} .tbl-empty td{padding:0!important;border:0!important} .pager{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;width:100%} .pager .info{font-size:12.5px;color:var(--n-500)} .pager .nums{display:flex;gap:4px} .pager .nums button{ min-width:32px;height:32px;padding:0 9px;border-radius:var(--r-sm); font-size:12.5px;color:var(--n-600);border:1px solid transparent;transition:all var(--t-fast); } .pager .nums button:hover{background:var(--n-100);color:var(--navy)} .pager .nums button.on{background:var(--navy);color:#fff} /* ── 13) النماذج ────────────────────────────────────────────────────────── */ .field{margin-bottom:16px} .field.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:600px){.field.row2{grid-template-columns:1fr}} .lbl{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--n-700);margin-bottom:6px} .lbl .req{color:var(--danger)} .lbl .hint{font-weight:400;color:var(--n-400);font-size:11.5px;margin-inline-start:auto} .inp{ width:100%;height:40px;padding:0 13px; border:1px solid var(--n-200);border-radius:var(--r-md); background:#fff;font-size:13.5px;color:var(--n-800); transition:all var(--t-fast); } .inp::placeholder{color:var(--n-400)} .inp:hover{border-color:var(--n-300)} .inp:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-50)} .inp:disabled{background:var(--n-50);color:var(--n-400);cursor:not-allowed} textarea.inp{height:auto;min-height:90px;padding:10px 13px;line-height:1.7;resize:vertical} select.inp{appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2382878B' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;padding-inline-start:34px} /* `background-position` بلا نظيرٍ منطقي، فالسهم يُوضع لكل اتجاه — مرآةً لا تصميماً ثانياً */ [dir="rtl"] select.inp{background-position:left 13px center} [dir="ltr"] select.inp{background-position:right 13px center} .inp-grp{position:relative;display:flex;align-items:center} .inp-grp .ic{position:absolute;inset-inline-start:13px;color:var(--n-400);width:16px;height:16px;pointer-events:none} .inp-grp .inp{padding-inline-start:38px} /* زرّ الإظهار في الطرف الآخر من الحقل. والحقل نفسه `dir="ltr"` دائماً (كلمة المرور لاتينية)، فحشوُه لا ينقلب بلغة الصفحة وإن انقلب جاراه: الأيقونة والزرّ يُوضعان باتجاه الصفحة، فيُكتب الحشو لكل اتجاه. */ .inp-grp .reveal{position:absolute;inset-inline-end:3px;width:34px;height:34px;border-radius:var(--r-md); display:grid;place-items:center;color:var(--n-500);transition:all var(--t-fast)} .inp-grp .reveal:hover{background:var(--n-100);color:var(--navy)} .inp-grp .reveal .ic{position:static} [dir="rtl"] .inp-grp .inp.has-reveal{padding-left:42px;padding-right:38px} [dir="ltr"] .inp-grp .inp.has-reveal{padding-left:38px;padding-right:42px} .help{font-size:11.5px;color:var(--n-500);margin-top:5px;line-height:1.6} .err{font-size:11.5px;color:var(--danger);margin-top:5px;display:flex;align-items:center;gap:5px} .inp.bad{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)} /* مدخلٌ مضغوط لصفّ جدول — بمقياس .btn-sm ليستويا في صفٍّ واحد */ .inp-sm{height:31px;padding:0 10px;font-size:12.5px;border-radius:var(--r-sm)} .sw{display:inline-flex;align-items:center;gap:10px;cursor:pointer} .sw input{position:absolute;opacity:0;pointer-events:none} .sw i{ width:40px;height:23px;flex:0 0 40px;border-radius:var(--r-pill); background:var(--n-300);position:relative;transition:background var(--t-fast); } .sw i::after{ content:'';position:absolute;top:3px;inset-inline-start:3px;width:17px;height:17px; border-radius:50%;background:#fff;box-shadow:var(--sh-xs);transition:transform var(--t) var(--e-spring); } .sw input:checked+i{background:var(--teal)} [dir="rtl"] .sw input:checked+i::after{transform:translateX(-17px)} [dir="ltr"] .sw input:checked+i::after{transform:translateX(17px)} .sw input:focus-visible+i{box-shadow:0 0 0 3px var(--teal-50)} .sw span{font-size:13px} .chk{display:inline-flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:13px;line-height:1.6} .chk input{position:absolute;opacity:0;pointer-events:none} .chk i{ width:18px;height:18px;flex:0 0 18px;margin-top:3px;border-radius:5px; border:1.5px solid var(--n-300);background:#fff;position:relative;transition:all var(--t-fast); } .chk input:checked+i{background:var(--teal);border-color:var(--teal)} .chk input:checked+i::after{ content:'';position:absolute;inset-inline-start:5px;top:1.5px;width:5px;height:10px; border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg); } .chk input:indeterminate+i{background:var(--teal);border-color:var(--teal)} .chk input:indeterminate+i::after{content:'';position:absolute;inset-inline:4px;top:7px;height:2px;background:#fff} .chk input:focus-visible+i{box-shadow:0 0 0 3px var(--teal-50)} /* مربّعٌ لا يقع عليه الإجراء يُرى معطَّلاً: صفٌّ تمّ سلفاً أو لا يصلح للدفعة */ .chk input:disabled+i{background:var(--n-100);border-color:var(--n-200);cursor:not-allowed} .chk input:disabled~span{color:var(--n-400)} .drop{ border:1.5px dashed var(--n-300);border-radius:var(--r-lg); padding:26px;text-align:center;background:var(--n-25); transition:all var(--t-fast);cursor:pointer; } .drop:hover{border-color:var(--teal);background:var(--teal-50)} /* ── 14) النوافذ واللوحات ───────────────────────────────────────────────── */ .ovl{ position:fixed;inset:0;z-index:100;background:rgba(10,26,39,.52); backdrop-filter:blur(3px);display:grid;place-items:center;padding:20px; opacity:0;visibility:hidden;transition:opacity var(--t),visibility var(--t); } .ovl.open{opacity:1;visibility:visible} .modal{ background:#fff;border-radius:var(--r-2xl);width:100%;max-width:560px; max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--sh-pop); transform:translateY(22px) scale(.97);opacity:0; transition:transform var(--t) var(--e-spring),opacity var(--t); } .ovl.open .modal{transform:none;opacity:1} .modal.wide{max-width:820px} .modal.xwide{max-width:1080px} /* نافذة تحمل شبكة بطاقات لا حقولاً */ .modal.slim{max-width:430px} .modal-head{ padding:18px 22px;border-bottom:1px solid var(--n-100); display:flex;align-items:center;gap:12px; } .modal-head h3{flex:1;min-width:0} .modal-head .sub{font-size:12px;color:var(--n-500);font-weight:400;margin-top:2px} .modal-body{padding:22px;overflow-y:auto;flex:1} /* البطاقة بيضاء، فلا تُقرأ على أرضية بيضاء: ما حمل بطاقاتٍ يأخذ أرضية الصفحة */ .modal-body.sheet{background:var(--n-25);border-radius:0 0 var(--r-2xl) var(--r-2xl)} .modal-foot{ padding:15px 22px;border-top:1px solid var(--n-100);background:var(--n-25); border-radius:0 0 var(--r-2xl) var(--r-2xl); display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap; } .modal-foot .start{margin-inline-end:auto} /* نافذة التأكيد — بدل confirm() المتصفّح (partials/confirm-delete) */ .btn-danger.solid{background:var(--danger);border-color:var(--danger);color:#fff;box-shadow:0 6px 18px rgba(184,74,66,.28)} .btn-danger.solid:hover{filter:brightness(1.08)} .confirm-top{padding:28px 24px 4px;text-align:center} .confirm-top h3{font-size:18px} .confirm-top p{margin:5px 0 0} .confirm-ic{ width:58px;height:58px;margin:0 auto 14px;border-radius:50%; display:grid;place-items:center;background:var(--danger-bg);color:var(--danger); box-shadow:0 0 0 8px rgba(184,74,66,.07); } .confirm-ic .ic{width:25px;height:25px} /* نبرات نافذة التأكيد — الإجراء غير المُهلِك لا يُلوَّن بلون الخطر */ .confirm-ic.ok{background:var(--ok-bg);color:var(--ok-ink);box-shadow:0 0 0 8px rgba(47,143,107,.07)} .confirm-ic.warn{background:var(--warn-bg);color:var(--warn-ink);box-shadow:0 0 0 8px rgba(184,121,26,.07)} .confirm-ic.teal{background:var(--teal-50);color:var(--teal-700);box-shadow:0 0 0 8px rgba(0,150,36,.07)} .confirm-ic.navy{background:var(--navy-50);color:var(--navy);box-shadow:0 0 0 8px rgba(25,61,88,.06)} .btn-warn{background:var(--warn);border-color:var(--warn);color:#fff} .btn-warn:hover{filter:brightness(1.08)} .btn-ok.solid{box-shadow:0 6px 18px rgba(47,143,107,.26)} .btn-warn.solid{box-shadow:0 6px 18px rgba(184,121,26,.26)} /* الزرّ المُرسِل أثناء انتظار الخادم */ .btn.is-busy{opacity:.6;cursor:progress} .ovl.open .confirm-ic{animation:hitIn .35s var(--e-spring) .08s both} .confirm-box .modal-body{padding-top:16px} .confirm-who{ display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:12px 14px; border:1px solid var(--n-100);border-radius:var(--r-lg);background:var(--n-25); } .confirm-who b{display:block;font-size:14.5px;color:var(--navy);overflow-wrap:anywhere} .confirm-who .tiny:empty{display:none} .confirm-points{list-style:none;margin:0;padding:0;display:grid;gap:10px} .confirm-points li{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.75;color:var(--n-700)} .confirm-points li[hidden]{display:none} .confirm-points .ic{width:16px;height:16px;flex:0 0 16px;margin-top:4px;color:var(--teal-600)} .confirm-box .modal-foot .btn{flex:1} .drawer-ovl{position:fixed;inset:0;z-index:100;background:rgba(10,26,39,.45); opacity:0;visibility:hidden;transition:all var(--t)} .drawer-ovl.open{opacity:1;visibility:visible} .drawer{ position:fixed;inset-block:0;inset-inline-end:0;width:min(440px,92vw);z-index:101; background:#fff;box-shadow:var(--sh-pop);display:flex;flex-direction:column; transition:transform var(--t-slow); } /* اللوحة على حافة النهاية، و`translateX` بالجهة لا بالمنطق: تُخفى بإزاحتها نحو تلك الحافة — يساراً في RTL ويميناً في LTR. */ [dir="rtl"] .drawer{transform:translateX(-100%)} [dir="ltr"] .drawer{transform:translateX(100%)} .drawer.open{transform:none} .drawer-head{padding:18px 20px;border-bottom:1px solid var(--n-100);display:flex;align-items:center;gap:12px} .drawer-body{flex:1;overflow-y:auto;padding:20px} .drawer-foot{padding:15px 20px;border-top:1px solid var(--n-100);background:var(--n-25);display:flex;gap:10px} /* ── 15) التنبيهات العائمة ──────────────────────────────────────────────── */ .toasts{position:fixed;bottom:22px;inset-inline-start:22px;z-index:200;display:flex;flex-direction:column;gap:10px} .toast{ display:flex;align-items:flex-start;gap:11px;min-width:290px;max-width:400px; padding:13px 16px;border-radius:var(--r-lg);background:var(--navy-900);color:#fff; box-shadow:var(--sh-pop);font-size:13.5px; animation:toastIn .38s var(--e-spring); } @keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:none}} .toast.out{animation:toastOut .3s var(--e-soft) forwards} /* الخروج نحو الحافة التي عليها التنبيه (`inset-inline-start`) — وهي اليمين في RTL واليسار في LTR، فالإزاحة تنقلب معها. */ @keyframes toastOut{to{opacity:0;transform:translateX(30px)}} [dir="ltr"] .toast.out{animation-name:toastOutLtr} @keyframes toastOutLtr{to{opacity:0;transform:translateX(-30px)}} .toast .ic{width:18px;height:18px;flex:0 0 18px;margin-top:2px} .toast.ok .ic{color:#6FD0AC} .toast.err .ic{color:#F0918A} .toast.warn .ic{color:#E9BC6A} .toast b{display:block;line-height:1.5} .toast small{opacity:.72;font-size:12px} /* ── 16) حالات الفراغ والتحميل ──────────────────────────────────────────── */ .empty{padding:48px 24px;text-align:center} .empty .ring{ width:76px;height:76px;margin:0 auto 16px;border-radius:50%; display:grid;place-items:center;background:var(--teal-50);color:var(--teal-400); box-shadow:0 0 0 10px var(--n-25); } .empty .ring .ic{width:32px;height:32px} .empty h4{color:var(--navy);margin-bottom:6px} .empty p{color:var(--n-500);font-size:13.5px;max-width:44ch;margin:0 auto 16px;line-height:1.8} .note{ display:flex;gap:11px;padding:13px 15px;border-radius:var(--r-lg); font-size:13px;line-height:1.75;border:1px solid; } .note .ic{width:17px;height:17px;flex:0 0 17px;margin-top:4px} .note b{display:block;margin-bottom:2px} .note-info{background:var(--info-bg);border-color:#BFE5C8;color:var(--info-ink)} .note-warn{background:var(--warn-bg);border-color:#EBD7A8;color:var(--warn-ink)} .note-ok{background:var(--ok-bg);border-color:#B9E0D0;color:var(--ok-ink)} .note-danger{background:var(--danger-bg);border-color:#EFC4C0;color:var(--danger-ink)} .note-navy{background:var(--navy-50);border-color:var(--navy-200);color:var(--navy)} .sk{background:linear-gradient(90deg,var(--n-100) 25%,var(--n-50) 50%,var(--n-100) 75%); background-size:200% 100%;animation:sk 1.4s infinite;border-radius:var(--r-sm)} @keyframes sk{to{background-position:-200% 0}} /* ── 17) الخط الزمني ────────────────────────────────────────────────────── */ .tl{position:relative;padding-inline-start:26px} .tl::before{content:'';position:absolute;inset-inline-start:7px;top:6px;bottom:6px;width:2px;background:var(--n-200)} .tl-item{position:relative;padding-bottom:18px} .tl-item:last-child{padding-bottom:0} .tl-item::before{ content:'';position:absolute;inset-inline-start:-23px;top:5px;width:10px;height:10px; border-radius:50%;background:#fff;border:2px solid var(--n-300); } .tl-item.ok::before{border-color:var(--ok);background:var(--ok)} .tl-item.err::before{border-color:var(--danger);background:var(--danger)} .tl-item.teal::before{border-color:var(--teal);background:var(--teal)} .tl-item b{font-size:13.5px;color:var(--navy);display:block;line-height:1.6} .tl-item span{font-size:12px;color:var(--n-500)} @keyframes hitIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}} /* ── 18) الدخول ─────────────────────────────────────────────────────────── */ .auth{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr} @media(max-width:940px){.auth{grid-template-columns:1fr}.auth-art{display:none}} .auth-art{ background:var(--grad-side);color:#fff;position:relative;overflow:hidden; display:flex;flex-direction:column;justify-content:center;padding:56px; } /* صورة السايدبار نفسها — لا الزخرفة المكرَّرة */ .auth-art::before{ content:'';position:absolute;inset:0;z-index:0;pointer-events:none; background:url(../img/side-bg.jpg) center/cover no-repeat; opacity:.62; } .auth-art::after{ content:'';position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(to bottom, rgba(148,54,196,.94) 0%, rgba(148,54,196,.86) 30%, rgba(106,36,145,.76) 58%, rgba(74,22,112,.68) 82%, rgba(43,14,61,.76) 100%); } .auth-art > *{position:relative;z-index:1} .auth-art .lead{font-size:31px;font-weight:700;line-height:1.55;max-width:15ch;position:relative} .auth-art .lead em{color:var(--teal-300);font-style:normal} .auth-art p{margin-top:16px;color:rgba(255,255,255,.7);font-size:14.5px;max-width:42ch;line-height:1.9;position:relative} .auth-art .pts{margin-top:32px;display:flex;flex-direction:column;gap:13px;position:relative} .auth-art .pts div{display:flex;align-items:center;gap:11px;font-size:13.5px;color:rgba(255,255,255,.85)} .auth-art .pts .ic{width:17px;height:17px;color:var(--teal-300);flex:0 0 17px} .auth-form{position:relative;display:grid;place-items:center;padding:40px 24px;background:var(--n-25)} .auth-box{width:100%;max-width:392px} /* مُبدِّل اللغة في زاوية نهاية النموذج — خارج الشبكة فلا يزيح البطاقة عن مركزها */ .auth-lang{position:absolute;top:18px;inset-inline-end:20px} .auth-logo{color:var(--navy);width:250px;margin:0 auto 30px} /* ── 19) صفحات الزائر — بلا قشرة ولا تنقّل ────────────────────────────────── ترويسة كحلية بالزخرفة، وبطاقة المحتوى تتداخل معها من الأسفل. */ .pub-top{background:var(--grad-side);color:#fff;position:relative;overflow:hidden;padding:34px 24px 40px} /* مُبدِّل اللغة في زاوية الترويسة — على الخلفية الكحلية فلونه أبيض */ .pub-lang{position:absolute;top:16px;inset-inline-end:20px;z-index:2} .pub-lang .lang-btn{color:rgba(255,255,255,.8)} .pub-lang .lang-btn:hover{background:rgba(255,255,255,.14);color:#fff} .pub-top::after{content:'';position:absolute;inset:0;background:#fff;opacity:.06;pointer-events:none; -webkit-mask:var(--ornament) center/auto 62% repeat; mask:var(--ornament) center/auto 62% repeat} .pub-wrap{max-width:720px;margin:0 auto;position:relative} .pub-logo{width:290px;max-width:78%;margin-bottom:22px} .pub-top h1{color:#fff;font-size:26px;line-height:1.65;max-width:30ch} .pub-top .pub-sub{color:var(--teal-300);font-size:16px;margin-top:8px} .pub-meta{display:flex;flex-wrap:wrap;gap:18px;margin-top:20px;color:rgba(255,255,255,.82);font-size:13.5px} .pub-meta span{display:inline-flex;align-items:center;gap:7px} .pub-body{max-width:720px;margin:-26px auto 40px;padding:0 20px;position:relative;z-index:1} /* ── 20) أدوات ──────────────────────────────────────────────────────────── */ .ic{width:1em;height:1em;display:inline-block;flex-shrink:0;vertical-align:-.13em; fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .row{display:flex;align-items:center;gap:10px} .row.wrap{flex-wrap:wrap} .col{display:flex;flex-direction:column;gap:10px} .between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .sp{flex:1} .mut{color:var(--n-500)} .tiny{font-size:11.5px} .sm{font-size:12.5px} .b{font-weight:700} .navy{color:var(--navy)} .teal{color:var(--teal-600)} .ok-t{color:var(--ok-ink)} .warn-t{color:var(--warn-ink)} .danger-t{color:var(--danger)} .center{text-align:center} .mt8{margin-top:8px} .mt16{margin-top:16px} .mt24{margin-top:24px} .mb8{margin-bottom:8px} .mb16{margin-bottom:16px} .mb24{margin-bottom:24px} .hr{height:1px;background:var(--n-200);margin:18px 0;border:0} .nowrap{white-space:nowrap} .hidden{display:none!important} /* ── 21) المخططات ─────────────────────────────────────────────────────────── قواعدُ هذه الكتلة ليست ذوقاً: هي ما يجعل الشكل يُقرأ لا يُزيَّن. • **لونٌ واحد للمقدار** (`--viz-ink`). فطولُ الشريط هو القيمة، وتلوينُ كلِّ شريطٍ بدرجةٍ على مقداره يُنفق قناةَ الهويّة على ما قيل سلفاً. والمتعدّد يُلوَّن حيث اللونُ **دلالةٌ** لا هويّةٌ: حالاتُ المسار وحدها. • **النصّ يلبس رموز النصّ** لا لون البيانات: الأخضر الفاتح شريطٌ مقروء وحرفٌ غير مقروء، والهويّةُ من المربّع بجانب الكلمة لا من لون الكلمة. • **الفصل فجوةٌ بلون الأرضية** لا إطارٌ حول العلامة: الإطار حِبرٌ ليس بياناً. ونقطةُ الطرف تحمل حلقةً بلون الأرضية لتبقى مقروءةً حيث تعبر الخط. • **الشبكةُ شَعرةٌ سادة** درجةً عن الأرضية، ولا تُقطَّع: التقطيع يُقرأ حدَّاً أو توقّعاً وهو شبكة. ومحورٌ واحد دائماً — لا مقياسان على رسمٍ واحد. • **ولا تلميحَ يحمل قيمةً وحده**: كلُّ شكلٍ هنا معه جدولُه (`viz-data`)، فالقيمة تُنتقى وتُنسخ ويقرؤها قارئ الشاشة. و`translateX` لا نظير منطقيَّ له، فله قاعدةٌ لكل اتجاه: المحور المُعلَّق بـ`inset-inline-start` يُتوسَّط بإزاحةٍ **إلى** مُعلَّقه، وجهتُها تنقلب بانقلاب السطر. ──────────────────────────────────────────────────────────────────────── */ .viz{display:flex; flex-direction:column} .viz-frame{display:flex; gap:10px; align-items:flex-start} .viz-yaxis{position:relative; flex:0 0 36px; min-width:36px} .viz-tick{ position:absolute; inset-inline-end:0; transform:translateY(-50%); font-size:10.5px; color:var(--n-400); white-space:nowrap; font-variant-numeric:tabular-nums; } .viz-plot{position:relative; flex:1 1 auto; min-width:0} /* الرسم يُمطَّط أفقياً وحده: ارتفاع `viewBox` هو ارتفاعه بالبكسل، فلا تشويهَ رأسياً. والخطوط `non-scaling-stroke` فتبقى على سُمكها. */ .viz-svg{position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible} .viz-rule{stroke:var(--viz-rule); stroke-width:1; fill:none} .viz-rule-h{position:absolute; inset-inline:0; height:1px; background:var(--viz-rule)} .viz-wash{fill:var(--viz-wash); stroke:none} .viz-line{fill:none; stroke:var(--viz-ink); stroke-width:2; stroke-linejoin:round; stroke-linecap:round} .viz-dot{ position:absolute; width:9px; height:9px; border-radius:var(--r-pill); background:var(--viz-ink); box-shadow:0 0 0 2px #fff; transform:translate(-50%,-50%); pointer-events:none; } [dir="rtl"] .viz-dot{transform:translate(50%,-50%)} .viz-tag{ position:absolute; inset-inline-end:13px; transform:translateY(-50%); padding:1px 7px; border-radius:var(--r-sm); background:#fff; border:1px solid var(--n-200); font-size:11.5px; font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums; pointer-events:none; white-space:nowrap; } /* مساحةُ الإمساك أوسعُ من العلامة: شَعرةٌ بعرض بكسل لا تُلتقَط بالمؤشّر، فالعمودُ الشفّاف فوقها هو ما يُلمَس — ويُركَّز بالمفتاح فيُقرأ كما يُقرأ بالمؤشّر. */ .viz-hits{position:absolute; inset:0} .viz-hit{position:absolute; inset-block:0; display:block} .viz-hit::before{ content:''; position:absolute; inset-block:0; inset-inline-start:50%; width:1px; background:var(--navy-200); opacity:0; transition:opacity var(--t-fast); } .viz-hit::after{ content:attr(data-tip); position:absolute; inset-block-start:4px; inset-inline-start:50%; transform:translateX(-50%); z-index:3; padding:3px 8px; border-radius:var(--r-sm); background:var(--n-900); color:#fff; font-size:11px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity var(--t-fast); } [dir="rtl"] .viz-hit::after{transform:translateX(50%)} .viz-hit:hover::before,.viz-hit:focus-visible::before, .viz-hit:hover::after,.viz-hit:focus-visible::after{opacity:1} .viz-hit:focus-visible{outline:none} /* ── أعمدة ── طرفٌ مستدير وقاعدةٌ قائمة، وسقفٌ ٢٤ بكسلاً: العمود العريض يُقرأ كتلةً لا قيمة. و**النطاق** هو ما يُمسَك لا العمود: يومٌ بصفرٍ عمودُه لا شيء، ويومٌ بواحدٍ عمودُه ثلاثُ بكسلات — ولا تُلتقَط واحدةٌ منهما بمؤشّر. فالخليّة بكامل الارتفاع تحمل التلميح والتركيز، والعمود فيها مركوزٌ على قاعدته. */ .viz-cols{position:absolute; inset:0; display:flex; align-items:stretch; gap:2px} .viz-col{ position:relative; flex:1 1 0; min-width:0; display:flex; align-items:flex-end; } .viz-col b{ /* مُعلَّقٌ بنفسه لا بخليّته: التلميح يُنسَب إلى طرف العمود، فيعلو مع علوّ القيمة ولا يثبت في سقف النطاق. */ position:relative; display:block; inline-size:100%; max-inline-size:24px; margin-inline:auto; background:var(--viz-ink); border-radius:4px 4px 0 0; transition:filter var(--t-fast); } .viz-col b::after{ content:attr(data-tip); position:absolute; inset-block-end:100%; inset-inline-start:50%; transform:translateX(-50%); z-index:3; margin-block-end:5px; padding:3px 8px; border-radius:var(--r-sm); background:var(--n-900); color:#fff; font-size:11px; font-weight:400; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity var(--t-fast); } [dir="rtl"] .viz-col b::after{transform:translateX(50%)} .viz-col:focus-visible{outline:none} .viz-col:hover b,.viz-col:focus-visible b{filter:brightness(1.22)} .viz-col:hover b::after,.viz-col:focus-visible b::after{opacity:1} /* خليّةٌ بإزاء كلِّ عمود بنفس قاعدته، فالعلامة فوق عمودها لا بإزائه */ .viz-xband{display:flex; gap:2px; flex:1 1 auto; min-width:0; margin-block-start:7px} .viz-xband span{ flex:1 1 0; min-width:0; text-align:center; font-size:10px; color:var(--n-400); white-space:nowrap; font-variant-numeric:tabular-nums; } /* ── محورُ المنحنى ── الطرفان مُلصَقان بحدَّيهما فلا يفيضان، والوسطُ متوسَّط */ .viz-xaxis{position:relative; height:15px; margin-block-start:7px; margin-inline-start:46px} .viz-xtick{ position:absolute; transform:translateX(-50%); font-size:10px; color:var(--n-400); white-space:nowrap; font-variant-numeric:tabular-nums; } [dir="rtl"] .viz-xtick{transform:translateX(50%)} .viz-xtick.at-start{inset-inline-start:0; transform:none} .viz-xtick.at-end{inset-inline-end:0; transform:none} /* ── صفوفٌ وأشرطة ── المسمّى فوق شريطه، والقيمة بإزاء مسمّاها */ .viz-rows{display:flex; flex-direction:column; gap:13px} .viz-srow{display:flex; flex-direction:column; gap:5px; min-width:0} .viz-srow-top{display:flex; align-items:center; gap:8px; min-width:0; font-size:12.5px} .viz-srow-lbl{flex:1 1 auto; min-width:0; color:var(--n-700); overflow-wrap:anywhere} .viz-srow-top b{color:var(--navy); font-variant-numeric:tabular-nums} .viz-srow-pct{flex:0 0 auto; width:46px; text-align:end; font-size:11px; color:var(--n-400)} .viz-bar-track{ display:block; block-size:8px; border-radius:var(--r-pill); background:var(--viz-track); overflow:hidden; } .viz-bar-fill{ display:block; block-size:100%; border-radius:var(--r-pill); background:var(--viz-ink); transition:inline-size 1s var(--e-out); } .viz-key{ flex:0 0 9px; width:9px; height:9px; border-radius:var(--r-pill); background:var(--viz-ink); } /* الدلالةُ لونُها محجوز: أخضرٌ تمَّ، وكهرمانٌ ينتظر، وأحمرُ رُدَّ، ورماديٌّ خارجَ المسار — ولا تُستعار واحدةٌ منها لسلسلةٍ رابعة. */ .viz-ok{background:var(--ok)} .viz-warn{background:var(--warn)} .viz-danger{background:var(--danger)} .viz-mut{background:var(--n-300)} .viz-inert{background:var(--n-500)} /* ── الجدول بإزاء الشكل ── مطويٌّ فلا يُزاحم، حاضرٌ فلا يُحتجَب */ .viz-data{margin-block-start:15px; border-block-start:1px solid var(--n-100)} .viz-data summary{ display:flex; align-items:center; gap:7px; cursor:pointer; padding-block:9px 2px; font-size:11.5px; color:var(--n-500); } .viz-data summary:hover{color:var(--navy)} .viz-data summary .ic{width:13px; height:13px} .viz-data summary::marker{content:''} .viz-data .tbl-wrap{margin-block-start:7px} .viz-data .data-table td,.viz-data .data-table th{padding:7px 10px; font-size:12px} .viz-none{ display:flex; align-items:center; justify-content:center; min-height:96px; font-size:12.5px; color:var(--n-400); text-align:center; } /* الحلقة: جزءٌ من كل. القوسُ خطٌّ عريض على دائرة، يبدأ من الأعلى ويدور باتجاه السطر — فينقلب في العربية مرآةً لا تصميماً ثانياً. */ .viz-pie{display:flex; align-items:center; gap:22px; flex-wrap:wrap} .viz-pie-ring{position:relative; flex:0 0 140px; inline-size:140px; block-size:140px} .viz-pie-svg{inline-size:100%; block-size:100%; display:block; transform:rotate(-90deg); overflow:visible} [dir="rtl"] .viz-pie-svg{transform:rotate(-90deg) scaleY(-1)} .viz-pie-track{fill:none; stroke:var(--viz-track); stroke-width:15} .viz-pie-arc{fill:none; stroke:var(--viz-ink); stroke-width:15; cursor:default; transition:stroke-width .18s var(--e-out)} .viz-pie-arc:hover{stroke-width:19} .viz-s-ok{stroke:var(--ok)} .viz-s-warn{stroke:var(--warn)} .viz-s-danger{stroke:var(--danger)} .viz-s-mut{stroke:var(--n-300)} .viz-s-inert{stroke:var(--n-500)} .viz-pie-mid{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none} .viz-pie-mid b{font-size:22px; color:var(--navy); line-height:1.1; font-variant-numeric:tabular-nums} .viz-pie-mid span{font-size:11px; color:var(--n-500)} .viz-pie-keys{flex:1 1 170px; min-width:0; display:flex; flex-direction:column; gap:9px; list-style:none; margin:0; padding:0} .viz-pie-keys li{display:flex; align-items:center; gap:8px; font-size:12.5px; min-width:0} .viz-pie-keys b{color:var(--navy); font-variant-numeric:tabular-nums} .viz-pie-keys li.is-out{opacity:.7; padding-block-start:8px; border-block-start:1px solid var(--n-100)} .viz-hatched{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.55) 0 1.2px,transparent 1.2px 3.5px)} @media(max-width:560px){ .viz-yaxis{flex-basis:28px; min-width:28px} .viz-xaxis{margin-inline-start:38px} .viz-srow-pct{display:none} } /* الورق يُسقط التلميح ويُبقي الحِبر: ما يُقرأ على الشاشة بالمرور يُقرأ عليه في الجدول. */ @media print{ .viz-hit,.viz-col::after{display:none} .viz-col,.viz-bar-fill,.viz-wash,.viz-pie-svg,.viz-key{print-color-adjust:exact; -webkit-print-color-adjust:exact} .viz-data{display:block} .viz-data summary{display:none} } /* ── 22) الاستجابة ──────────────────────────────────────────────────────── */ .side-toggle{display:none} .side-scrim{display:none} @media(max-width:1024px){ /* الشريط خارج الشاشة من ناحيته: يميناً في RTL ويساراً في LTR */ [dir="rtl"] .side{transform:translateX(100%)} [dir="ltr"] .side{transform:translateX(-100%)} .side.open{transform:none} .main{margin-inline-start:0} .side-toggle{display:grid} .side-scrim{position:fixed;inset:0;background:rgba(10,26,39,.5);z-index:55;display:block; opacity:0;visibility:hidden;transition:all var(--t)} .side-scrim.open{opacity:1;visibility:visible} .top-search{width:auto;flex:1;max-width:220px} /* زرّ الشرح لا يختفي على اللوحيّ — ينكمش إلى أيقونة */ .value-chip{width:34px;padding:0;justify-content:center;flex:0 0 auto} .value-chip > span{display:none} .lang-btn{width:38px;padding:0;justify-content:center} .lang-btn > span{display:none} } @media(max-width:640px){ .page{padding:16px} .top{padding:0 14px;gap:9px} .top-search{display:none} .who-txt{display:none} .kpi-val{font-size:26px} } /* ── 23) الطباعة — المحتوى وحده ──────────────────────────────────────────── */ @media print{ .side,.top,.foot,.page-act,.no-print,.toasts{display:none!important} .main{margin:0} .page{padding:0} body{background:#fff} .card,.kpi{box-shadow:none;break-inside:avoid} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} } /* ── شارة الجرس ─────────────────────────────────────────────────────── عدد غير المقروء فوق الأيقونة. يختفي عند الصفر — شارةٌ دائمة تُصبح جزءاً من الأثاث فلا تُرى. */ .bell-dot{ position:absolute; inset-block-start:2px; inset-inline-end:2px; min-inline-size:16px; block-size:16px; padding-inline:4px; display:grid; place-items:center; background:var(--danger,#C0392B); color:#fff; font-size:10px; font-weight:700; line-height:1; border-radius:9px; border:2px solid var(--surface,#fff); } /* ── لوحة الجرس ─────────────────────────────────────────────────────── تنسدل من الجرس في طرفه المنطقي، فتنقلب مع الاتجاه بلا قاعدةٍ ثانية. وعرضها لا يتجاوز الشاشة على الهاتف. */ .bell-wrap{position:relative} .bell-panel{ position:absolute; inset-block-start:calc(100% + 8px); inset-inline-end:0; z-index:60; inline-size:min(380px, calc(100vw - 24px)); max-block-size:min(520px, 75vh); display:flex; flex-direction:column; background:var(--n-0,#fff); border:1px solid var(--n-200); border-radius:var(--r-lg); box-shadow:var(--sh-pop); overflow:hidden; } .bell-head{display:flex; align-items:center; gap:8px; padding:12px 14px; border-block-end:1px solid var(--n-200)} .bell-head b{color:var(--navy); font-size:14px} .bell-list{overflow-y:auto; flex:1} .bell-list form{display:block} .bell-item{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:flex-start; gap:10px; inline-size:100%; padding:10px 14px; border-block-end:1px solid var(--n-100); } .bell-item:hover, .bell-item:focus-visible{background:var(--n-50)} .bell-item:focus-visible{outline:2px solid var(--teal); outline-offset:-2px} .bell-item .icon-tile{flex:0 0 auto; inline-size:30px; block-size:30px} .bell-txt{flex:1; min-inline-size:0; display:flex; flex-direction:column; gap:2px} .bell-txt b{font-size:13px; color:var(--n-800); font-weight:500; line-height:1.5} .bell-item.is-new .bell-txt b{color:var(--navy); font-weight:700} .bell-txt span{font-size:12px; color:var(--n-600)} .bell-txt small{font-size:11px; color:var(--n-500)} .bell-item.is-done{opacity:.6} .bell-empty{padding:28px 16px; text-align:center; color:var(--n-500); font-size:13px; display:flex; flex-direction:column; align-items:center; gap:8px} .bell-empty .sk{display:block; block-size:12px; border-radius:6px} .bell-foot{display:flex; align-items:center; justify-content:center; gap:6px; padding:10px; font-size:13px; color:var(--teal-700); border-block-start:1px solid var(--n-200)} .bell-foot:hover{background:var(--teal-50)} .bell-foot .ic{inline-size:14px; block-size:14px} [dir="ltr"] .bell-foot .ic{transform:scaleX(-1)} /* ── قائمة الإشعارات ────────────────────────────────────────────────── الجديد بنقطةٍ وخطٍّ أعرض، والمحسوم باهتٌ بشارته: «انتهى ما كان ينتظره» يُقرأ بنظرة دون أن يختفي. */ .icon-tile.info{background:var(--info-bg); color:var(--info-ink)} .icon-tile.mute{background:var(--n-100); color:var(--n-500)} .ntf-all{padding:12px 20px 0} .ntf-day{padding:14px 20px 6px; font-size:12px; font-weight:700; color:var(--n-500)} .ntf{display:flex; align-items:flex-start; gap:12px; padding:12px 20px; border-block-end:1px solid var(--n-100)} .ntf:hover{background:var(--n-25,#fafbfc)} .ntf.is-new{background:var(--teal-50)} .ntf.is-done .ntf-main{opacity:.65} .ntf .chk{margin-block-start:6px} .ntf .icon-tile{flex:0 0 auto} .ntf-main{flex:1; min-inline-size:0; display:flex; flex-direction:column; gap:3px} .ntf-main form{display:block} .ntf-title{all:unset; cursor:pointer; font-size:14px; font-weight:500; color:var(--n-800); line-height:1.6; display:inline-flex; align-items:center; gap:6px} .ntf.is-new .ntf-title{font-weight:700; color:var(--navy)} .ntf-title:hover{color:var(--teal-700); text-decoration:underline} .ntf-title:focus-visible{outline:2px solid var(--teal); outline-offset:2px; border-radius:4px} .ntf-body{font-size:12.5px; color:var(--n-600)} .ntf-meta{font-size:11.5px; color:var(--n-500); display:flex; flex-wrap:wrap; align-items:center; gap:6px} .ntf-act{display:flex; gap:4px; align-items:center} /* تفضيلات الجرس — صفٌّ لكل نوع: النصّ يأخذ ما بقي ويلتفّ، والمفتاح بجانبه لا يُزاح. و`min-inline-size:0` هو ما يجعل النصّ يلتفّ داخل العمود بدل أن يدفعه إلى خارج البطاقة. */ .prefs{display:flex; flex-direction:column; padding-block:6px} .pref{ display:flex; align-items:flex-start; gap:12px; inline-size:100%; box-sizing:border-box; padding:12px 20px; cursor:pointer; border-block-start:1px solid var(--n-100); } .pref:hover{background:var(--n-25,#fafbfc)} .pref .icon-tile{flex:0 0 auto; inline-size:32px; block-size:32px} .pref-txt{flex:1 1 auto; min-inline-size:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px; overflow-wrap:anywhere} .pref-txt b{font-size:13px; color:var(--navy); line-height:1.5} .pref-txt small{font-size:11.5px; color:var(--n-500); line-height:1.6} .pref .sw{flex:0 0 auto; margin-block-start:4px} .ntf-dot{display:inline-block; flex:0 0 auto; inline-size:8px; block-size:8px; border-radius:50%; background:var(--teal)} .bell-item .ntf-dot{margin-block-start:6px} @media(max-width:640px){ .ntf{padding-inline:14px; flex-wrap:wrap} .ntf-act{inline-size:100%; justify-content:flex-end} } /* ── الصفّ المحذوف ──────────────────────────────────────────────────── الحذف ناعم: الصفّ يبقى في القاعدة ويخرج من القائمة. ومن ضمّ المحذوف إلى شاشته يراه باهتاً مشطوب الاسم بإزاء أخويه الحيَّين — لا في شاشةٍ ثانية تقطعه عن سياقه، فالاستعادة تُقرَّر على بيّنة. والبهتان يُرفَع عند التحويم: ما يُقرأ ليُقرَّر فيه لا يبقى على ٥٥٪. */ tr.is-trashed{background:var(--n-50,#F9FAFB);opacity:.62} tr.is-trashed:hover,tr.is-trashed:focus-within{opacity:1} tr.is-trashed>td:not(:last-child){text-decoration:line-through;text-decoration-color:var(--n-300,#D0D5DD)} tr.is-trashed .badge{filter:saturate(.5)} /* والبطاقة كالصفّ: شاشةٌ تعرض كياناتها بطاقاتٍ لا جدولاً تُبهت بطاقتها */ .card.is-trashed{opacity:.62;border-style:dashed} .card.is-trashed:hover,.card.is-trashed:focus-within{opacity:1} /* ── منتقي الجهات — فئاتٌ مطويّة ────────────────────────────────────── أربعٌ وعشرون جهةً مرصوفةً مربّعاتٍ في صفٍّ واحد جدارٌ لا يُقرأ. وفئتُها تجميعها الطبيعي: لها لونٌ تعرفه العين من كل شاشة، وعددُها ثلاثةٌ لا يزيد. فالمغلق ثمانية أسطر، والمفتوح ما يحتاجه القرار وحده. والطيّ يُسنَد بسمة `data-open` على `.pk-cat` — لا بصنفٍ يُضاف، فالحالة الأولى تُرسَم من الخادم (الفئة التي فيها اختيارٌ تُفتح) بلا وميضٍ. */ .pk{ border:1px solid var(--n-200); border-radius:var(--r-lg); background:var(--n-25); overflow:hidden; } .pk-cat + .pk-cat{border-block-start:1px solid var(--n-200)} .pk-cat-h{display:flex; align-items:center; gap:2px; padding-inline-start:12px; background:#fff} .pk-cat[data-open] > .pk-cat-h{background:var(--n-50)} .pk-all{padding:0; margin:0} .pk-all i{margin:0} .pk-cat-t{ flex:1; min-width:0; display:flex; align-items:center; gap:9px; padding:11px 10px; border:0; background:none; cursor:pointer; font-family:inherit; font-size:13.5px; color:var(--navy); text-align:start; } .pk-cat-t:hover{background:rgba(148,54,196,.05)} .pk-cat-t:focus-visible{outline:2px solid var(--teal-300); outline-offset:-2px} .pk-cat-t b{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700} /* لون الفئة: مربّعٌ صغير كما في منتقي الجهات في القائمة الجانبية */ .pk-dot{width:9px; height:9px; flex:0 0 9px; border-radius:3px; box-shadow:var(--sh-xs)} .pk-n{ font-size:11px; font-weight:700; padding:1px 8px; border-radius:var(--r-pill); background:var(--n-100); color:var(--n-600); font-variant-numeric:tabular-nums; } .pk-cat[data-open] .pk-n{background:var(--teal-50); color:var(--teal-700)} .pk-chev{width:15px; height:15px; color:var(--n-400); transition:transform var(--t-fast)} .pk-cat[data-open] .pk-chev{transform:rotate(180deg)} /* الجسم: مطويٌّ افتراضاً. والعرض `grid` لأن الثلاثة تسع صفّاً على الشاشة الواسعة وتتراكم على الضيّقة بلا قاعدةٍ ثانية. */ .pk-cat-b{display:none; padding:4px 30px 12px; gap:4px 18px} .pk-cat[data-open] > .pk-cat-b{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr))} .pk-leaf{ align-items:center; gap:9px; padding:6px 8px; border-radius:var(--r-md); min-width:0; transition:background var(--t-fast); } .pk-leaf:hover{background:#fff} .pk-leaf i{margin-top:0} .pk-leaf .pk-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap} /* المحجوزة بتصميمٍ آخر: تُعرَض وتُختار، ويُسمّى حاجزُها. الأقدم يغلب عند الطباعة، فإخفاء ذلك يجعله يُكتشف على الورق. */ .pk-held{ display:inline-flex; align-items:center; gap:4px; flex:0 0 100%; font-size:11px; color:var(--warn-ink); } .pk-held .ic{width:12px; height:12px} .pk-state{display:flex; align-items:center; gap:8px; padding-block-end:6px} .pk-state .badge b{font-variant-numeric:tabular-nums} /* ── نافذة الصورة: الأصل كاملاً وإطارٌ مربّع فوقه ───────────────────────── الصورة كما رُفعت بنسبتها، والإطار يُحرَّك ويُكبَّر من أركانه، وما خارجه معتم — فما يُقطع يُرى قبل أن يُقطع. */ .pstudio{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:22px;align-items:start} /* العمود يُقاس ولا يُقاس عليه: المسرح بعرضٍ مثبَّت، فلو حدّد عمودَه لما صغُر مع النافذة */ .pstudio > *{min-width:0} /* الحوض يحمل المسرح في وسطه، والمسرح بمقاس الصورة نفسها يضبطه app.js — فلا حاشيةٌ تُحسَب صورةً ولا صورةٌ تُقصّ في العرض */ .pstudio-well{ display:grid;place-items:center;min-height:120px;border-radius:var(--r-md);padding:8px;overflow:hidden; background:repeating-conic-gradient(var(--n-100) 0 25%, #fff 0 50%) 0 0/18px 18px; box-shadow:inset 0 0 0 1px var(--n-200); } /* إحداثيات الإطار فيزيائية: الصورة لا تنقلب بلغة الواجهة */ .pstudio-stage{position:relative;direction:ltr;overflow:hidden;min-width:120px;min-height:120px;touch-action:none;user-select:none} .pstudio-stage canvas{position:absolute;top:0;left:0;display:block} .pstudio-frame{ position:absolute;top:0;left:0;cursor:move;outline:none;display:none; box-shadow:0 0 0 2px #fff, 0 0 0 9999px rgba(10,26,39,.55); } .pstudio-stage.ready .pstudio-frame{display:block} .pstudio-frame:focus-visible{box-shadow:0 0 0 3px var(--teal), 0 0 0 9999px rgba(10,26,39,.55)} /* شبكة الأثلاث داخل الإطار — دليلٌ للعين لا يُطبع */ .pstudio-frame::after{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.55; background: linear-gradient(to right, transparent calc(33.333% - .5px), #fff 0 calc(33.333% + .5px), transparent 0 calc(66.666% - .5px), #fff 0 calc(66.666% + .5px), transparent 0), linear-gradient(to bottom, transparent calc(33.333% - .5px), #fff 0 calc(33.333% + .5px), transparent 0 calc(66.666% - .5px), #fff 0 calc(66.666% + .5px), transparent 0); } /* الأركان داخل الإطار لا على حدّه: المسرح يقصّ ما يخرج منه، فركنٌ على حافة الصورة يُمسَك كاملاً */ .pstudio-handle{position:absolute;width:14px;height:14px;background:#fff;border:2px solid var(--teal);border-radius:3px;z-index:1} .pstudio-handle.nw{top:-2px;left:-2px;cursor:nwse-resize} .pstudio-handle.se{bottom:-2px;right:-2px;cursor:nwse-resize} .pstudio-handle.ne{top:-2px;right:-2px;cursor:nesw-resize} .pstudio-handle.sw{bottom:-2px;left:-2px;cursor:nesw-resize} .pstudio-stage.grabbing,.pstudio-stage.grabbing *{cursor:grabbing} .pstudio-stage .pstudio-wait{position:absolute;inset:0;display:grid;place-items:center;color:var(--n-500);font-size:13px} .pstudio-stage.ready .pstudio-wait{display:none} .pstudio-stage .pstudio-fail{display:none} .pstudio-stage.failed .pstudio-wait{display:none} .pstudio-stage.failed .pstudio-fail{position:absolute;inset:0;display:grid;place-items:center;color:var(--danger);font-size:13px;padding:20px;text-align:center} .pstudio-tools{display:flex;align-items:center;gap:6px;margin-top:10px} .pstudio-tools .sp{flex:1;text-align:center} .pstudio-side{display:flex;flex-direction:column;gap:16px;min-width:0} .pstudio-meta{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;margin:0} .pstudio-meta dt{color:var(--n-500)} .pstudio-meta dd{margin:0;min-width:0} .pstudio-now{display:flex;align-items:center;gap:10px} .pstudio-now img{width:64px;height:64px;border-radius:var(--r-sm);object-fit:cover;box-shadow:0 0 0 1px var(--n-200)} .pstudio-acts{display:flex;flex-wrap:wrap;gap:8px} .pstudio-acts form{display:contents} .pstudio-panel{border:1px solid var(--n-100);border-radius:var(--r-md);padding:14px;display:flex;flex-direction:column;gap:12px;background:var(--n-25)} .pstudio-panel[hidden]{display:none} /* الصورة في عمود الجدول زرٌّ يفتح نافذتها — بلا إطار زرٍّ يزاحم الخانة */ .photo-open{padding:0;border:0;background:none;cursor:zoom-in;border-radius:var(--r-sm);line-height:0} .photo-open:focus-visible{outline:2px solid var(--teal);outline-offset:2px} .photo-open:hover .photo-cell{box-shadow:0 0 0 2px var(--teal)} @media (max-width:760px){.pstudio{grid-template-columns:minmax(0,1fr)}}