/* ═══════════════════════════════════════════════════════════════════
زجاجُ زِمام — «د · زجاج» (اعتمده المالك ١٠-١٢)
═══════════════════════════════════════════════════════════════════
الأساسُ المشترك لكلّ قشرة: البيت (قوالب الخادم) · الدفاتر/العلاقات/
الموارد (ui/books) · المهامّ (ui/tasks) · المراجعة (ui/review).
الشرحُ الكامل والأصنافُ بأسمائها في `docs/GLASS_SHELL.md`.
⭐ ثلاثُ طبقات:
١ **الجوّ** (`.z-backdrop`) — بقعٌ لونيّةٌ ضبابيّةٌ ثابتةٌ خلف كلّ شيء.
تُختار بـ`data-backdrop` و`data-intensity` على ``.
٢ **الأسطحُ الزجاجيّة** — إطار · ترويسة · شريطُ أقسام · لوحٌ جانبيّ ·
بطاقة · مقبض. شفّافةٌ بضبابيّةٍ وتشبّعٍ وحافّةٍ بيضاءَ ولمعةٍ علويّة.
٣ **لونُ المنتَج** (`--h-product*` من tokens.css) — التبويبُ الحاليّ
والزرُّ الأساسيّ والعدّاد. ⚠️ **لا يتغيّر مع الجوّ أبداً.**
⚠️⚠️ **هذا الملفُّ لا يلمس عنصراً بلا صنفه**: كلُّ قاعدةٍ على `.z-*`
أو رمزٍ `--g-*`. فاستيرادُه في قشرةٍ لم تنتقل بعد لا يغيّر شيئاً.
⚠️⚠️ **والضبابيّةُ على `::before` لا على العنصر نفسِه.**
`backdrop-filter` يجعل العنصرَ «كتلةً حاوية» لكلّ `position:fixed`
داخله — فنافذةٌ منبثقةٌ أو درجٌ جانبيٌّ داخل الإطار يُرسَم نسبةً
إلى الإطار لا إلى الشاشة. فكلُّ سطحٍ زجاجيٍّ يرسم زجاجَه في
`::before` (`z-index:-1` داخل `isolation:isolate`) ويبقى العنصرُ
نفسُه بلا فلتر. ⟹ **لا تستعمل `::before` على سطحٍ `.z-*` — استعمل
`::after`.**
⚠️ لا `letter-spacing` في هذا الملفّ — العربيّةُ تتقطّع.
═══════════════════════════════════════════════════════════════════ */
/* ── ١. الحبرُ والأسطح — نهار ──────────────────────────────────────── */
:root {
--g-font: 'SaudiRiyal', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
--g-ink: #111827; /* النصّ الأساس */
--g-ink-2: #374151; /* ثانويّ — سطرُ الشرح تحت العنوان */
--g-ink-3: #4B5563; /* تسمية — «الفريق» · «المالك» · placeholder */
--g-line: rgb(17 24 39 / .08); /* فاصلٌ داخل سطح */
/* ⭐ صبغةُ الظلّ تتبع المنتَج (أزرقُ مائلٌ في HR، بنّيٌّ في الدفاتر…). */
--g-tint: 40 60 110;
/* الزجاج — القيمُ منسوخةٌ من النموذج المعتمد حرفاً. */
--g-glass-frame: rgb(255 255 255 / .26);
--g-glass-head: rgb(255 255 255 / .22);
--g-glass-bar: rgb(255 255 255 / .32);
--g-glass-panel: rgb(255 255 255 / .40);
--g-glass-card: rgb(255 255 255 / .62);
--g-glass-chip: rgb(255 255 255 / .45);
--g-glass-well: rgb(255 255 255 / .50);
--g-glass-tabic: rgb(255 255 255 / .60);
--g-edge-frame: rgb(255 255 255 / .70);
--g-edge-head: rgb(255 255 255 / .55);
--g-edge-panel: rgb(255 255 255 / .75);
--g-edge-card: rgb(255 255 255 / .80);
--g-edge-chip: rgb(255 255 255 / .75);
--g-hi: rgb(255 255 255 / .90); /* اللمعةُ العلويّة ١px */
/* البدائلُ الصلبة — «قلّل الشفافية» و«بلا دعمٍ للضبابيّة». */
--g-solid-frame: #F3F5F9;
--g-solid-head: transparent;
--g-solid-bar: #FFFFFF;
--g-solid-panel: #FFFFFF;
--g-solid-card: #FFFFFF;
--g-solid-chip: #FFFFFF;
--g-solid-well: #EEF1F6;
--g-solid-tabic: #F1F3F7;
--g-solid-edge: rgb(17 24 39 / .09);
--g-sel: #FFFFFF; /* الخيارُ المحدَّد في مقطع */
--g-sel-shadow: 0 1px 3px rgb(17 24 39 / .12);
--g-row-on: rgb(255 255 255 / .85); /* بندُ اللوح الحاليّ */
--g-hover: rgb(255 255 255 / .50);
--g-ink-btn: #111827; --g-ink-btn-on: #FFFFFF;
/* الدلالة — شاراتُ التغيّر (+1.8% · −4%) كما في النموذج. */
--g-up-bg: #E2F4E9; --g-up: #146C42;
--g-down-bg: #FCE3E3; --g-down: #A1201A;
--g-warn-bg: #FFEFC9; --g-warn: #7A4F00;
--g-alert: #F0466B; /* نقطةُ التنبيه على الجرس */
--g-count-ink: #A8461A; /* عدّادُ تبويبٍ غيرِ حاليّ */
/* الشكل */
--g-r-frame: 32px; --g-r-panel: 22px; --g-r-card: 22px; --g-r-kpi: 20px;
--g-r-bar: 18px; --g-r-ctl: 14px; --g-r-tab: 13px; --g-r-btn: 12px;
--g-r-row: 10px;
--g-ctl-h: 46px;
/* الضبابيّة */
--g-blur-frame: blur(30px) saturate(170%);
--g-blur-panel: blur(20px);
--g-blur-card: blur(22px) saturate(160%);
/* شدّةُ الجوّ: خفيف .55 · متوسّط 1 · قويّ 1.3 (سقفُ العتامة .95). */
--g-k: 1;
--g-dim: 1; /* الليلُ يخفض البقعَ — انظر أدناه */
/* ── عُدّةُ المكوّنات (المرحلة ٥ · §١٢ أدناه) ─────────────────────
الحقل · الطبقةُ المنبثقة (قائمة/منتقٍ/نافذة/درج/إشعار) · رأسُ الجدول
· التلميح · الحجاب. زجاجٌ وصلبٌ كبقيّة الأسطح، والمُحلِّلُ يختار. */
--g-glass-field: rgb(255 255 255 / .70); /* حقلٌ فوق بطاقة */
--g-glass-field-on: rgb(255 255 255 / .92); /* الحقلُ المركَّز */
--g-glass-pop: rgb(255 255 255 / .84); /* قائمة · منتقٍ · إشعار */
--g-glass-dialog: rgb(255 255 255 / .80); /* نافذة · درج */
--g-glass-th: rgb(255 255 255 / .42); /* رأسُ الجدول */
--g-edge-field: rgb(17 24 39 / .12); /* حدُّ الحقل — يُرى فوق الأبيض */
--g-edge-field-hi: rgb(17 24 39 / .22); /* الحقلُ تحت المؤشّر */
--g-edge-pop: rgb(255 255 255 / .90);
--g-solid-field: #FFFFFF; --g-solid-field-on: #FFFFFF;
--g-solid-pop: #FFFFFF; --g-solid-dialog: #FFFFFF; --g-solid-th: #F6F7FA;
--g-blur-pop: blur(28px) saturate(180%);
--g-scrim: rgb(17 24 39 / .26); /* حجابُ النافذة — يبقى الجوُّ مرئيّاً */
--g-scrim-blur: blur(6px) saturate(120%);
--g-tip-bg: rgb(17 24 39 / .90); --g-tip-ink: #FFFFFF; /* تلميحٌ حبريّ */
--g-hover-2: rgb(255 255 255 / .80); /* زرٌّ زجاجيٌّ تحت المؤشّر */
--g-pop-hover: rgb(17 24 39 / .05); /* بندُ قائمةٍ تحت المؤشّر */
--g-row-hover: rgb(255 255 255 / .55); /* صفُّ جدولٍ تحت المؤشّر */
--g-shadow-pop: 0 2px 6px rgb(var(--g-tint) / .08), 0 22px 54px rgb(var(--g-tint) / .22);
--g-shadow-dialog: 0 2px 8px rgb(var(--g-tint) / .10), 0 40px 90px rgb(var(--g-tint) / .30);
/* الدلالةُ الكاملة — نفسُها في كلّ منتَج (لونُ المنتَج ليس حالة). */
--g-info-bg: #E3ECFC; --g-info: #1D4FB8;
--g-muted-bg: rgb(17 24 39 / .06); --g-muted: #374151;
--g-danger-grad: linear-gradient(160deg, #F0675C, #C42B21);
--g-danger-glow: rgb(196 43 33 / .28);
--g-skel: rgb(17 24 39 / .07); --g-skel-hi: rgb(255 255 255 / .75);
--g-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
--g-r-dialog: 24px; --g-r-pop: 14px; --g-r-field: 12px; --g-r-status: 8px;
--g-field-h: 42px;
}
/* ── ٢. الأسطح — ليل: زجاجٌ داكنٌ فوق بقعٍ خافتة، لا قلبُ ألوان ─────── */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]):not(.light) {
--g-ink: #E8ECF3; --g-ink-2: #C3CAD6; --g-ink-3: #9AA4B5;
--g-line: rgb(255 255 255 / .08);
--g-glass-frame: rgb(16 20 30 / .46);
--g-glass-head: rgb(255 255 255 / .03);
--g-glass-bar: rgb(255 255 255 / .05);
--g-glass-panel: rgb(24 29 41 / .55);
--g-glass-card: rgb(30 36 50 / .58);
--g-glass-chip: rgb(255 255 255 / .07);
--g-glass-well: rgb(255 255 255 / .06);
--g-glass-tabic: rgb(255 255 255 / .08);
--g-edge-frame: rgb(255 255 255 / .11); --g-edge-head: rgb(255 255 255 / .07);
--g-edge-panel: rgb(255 255 255 / .09); --g-edge-card: rgb(255 255 255 / .10);
--g-edge-chip: rgb(255 255 255 / .11); --g-hi: rgb(255 255 255 / .07);
--g-solid-frame: #10141D; --g-solid-bar: #171C27; --g-solid-panel: #171C27;
--g-solid-card: #1B2130; --g-solid-chip: #1B2130; --g-solid-well: #141923;
--g-solid-tabic: #222938; --g-solid-edge: rgb(255 255 255 / .09);
--g-sel: rgb(255 255 255 / .14); --g-sel-shadow: 0 1px 3px rgb(0 0 0 / .45);
--g-row-on: rgb(255 255 255 / .10); --g-hover: rgb(255 255 255 / .06);
--g-ink-btn: #E8ECF3; --g-ink-btn-on: #111827;
--g-up-bg: rgb(67 180 124 / .16); --g-up: #6FD3A0;
--g-down-bg: rgb(226 104 95 / .16); --g-down: #F29A92;
--g-warn-bg: rgb(217 164 65 / .16); --g-warn: #E8BE6A;
--g-count-ink: #F2A27E;
--g-dim: .4;
--g-ground: linear-gradient(160deg,
color-mix(in srgb, var(--g-b1) 13%, #090C13) 0%, #0B0E16 55%,
color-mix(in srgb, var(--g-b3) 11%, #0B0A11) 100%);
/* عُدّةُ المكوّنات — ليلاً (توأمُ الكتلة التالية حرفاً) */
--g-glass-field: rgb(255 255 255 / .06); --g-glass-field-on: rgb(255 255 255 / .10);
--g-glass-pop: rgb(26 31 44 / .88); --g-glass-dialog: rgb(24 29 41 / .86);
--g-glass-th: rgb(255 255 255 / .04);
--g-edge-field: rgb(255 255 255 / .13); --g-edge-field-hi: rgb(255 255 255 / .24);
--g-edge-pop: rgb(255 255 255 / .12);
--g-solid-field: #141923; --g-solid-field-on: #171C27;
--g-solid-pop: #1B2130; --g-solid-dialog: #1B2130; --g-solid-th: #171C27;
--g-scrim: rgb(3 5 10 / .55);
--g-tip-bg: rgb(236 240 246 / .95); --g-tip-ink: #111827;
--g-hover-2: rgb(255 255 255 / .11); --g-pop-hover: rgb(255 255 255 / .07);
--g-row-hover: rgb(255 255 255 / .045);
--g-shadow-pop: 0 2px 6px rgb(0 0 0 / .30), 0 22px 54px rgb(0 0 0 / .50);
--g-shadow-dialog: 0 2px 8px rgb(0 0 0 / .35), 0 40px 90px rgb(0 0 0 / .60);
--g-info-bg: rgb(96 140 230 / .16); --g-info: #9CC2FF;
--g-muted-bg: rgb(255 255 255 / .07); --g-muted: #C3CAD6;
--g-skel: rgb(255 255 255 / .06); --g-skel-hi: rgb(255 255 255 / .11);
--g-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239AA4B5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
}
:root[data-theme="dark"], :root.dark {
--g-ink: #E8ECF3; --g-ink-2: #C3CAD6; --g-ink-3: #9AA4B5;
--g-line: rgb(255 255 255 / .08);
--g-glass-frame: rgb(16 20 30 / .46);
--g-glass-head: rgb(255 255 255 / .03);
--g-glass-bar: rgb(255 255 255 / .05);
--g-glass-panel: rgb(24 29 41 / .55);
--g-glass-card: rgb(30 36 50 / .58);
--g-glass-chip: rgb(255 255 255 / .07);
--g-glass-well: rgb(255 255 255 / .06);
--g-glass-tabic: rgb(255 255 255 / .08);
--g-edge-frame: rgb(255 255 255 / .11); --g-edge-head: rgb(255 255 255 / .07);
--g-edge-panel: rgb(255 255 255 / .09); --g-edge-card: rgb(255 255 255 / .10);
--g-edge-chip: rgb(255 255 255 / .11); --g-hi: rgb(255 255 255 / .07);
--g-solid-frame: #10141D; --g-solid-bar: #171C27; --g-solid-panel: #171C27;
--g-solid-card: #1B2130; --g-solid-chip: #1B2130; --g-solid-well: #141923;
--g-solid-tabic: #222938; --g-solid-edge: rgb(255 255 255 / .09);
--g-sel: rgb(255 255 255 / .14); --g-sel-shadow: 0 1px 3px rgb(0 0 0 / .45);
--g-row-on: rgb(255 255 255 / .10); --g-hover: rgb(255 255 255 / .06);
--g-ink-btn: #E8ECF3; --g-ink-btn-on: #111827;
--g-up-bg: rgb(67 180 124 / .16); --g-up: #6FD3A0;
--g-down-bg: rgb(226 104 95 / .16); --g-down: #F29A92;
--g-warn-bg: rgb(217 164 65 / .16); --g-warn: #E8BE6A;
--g-count-ink: #F2A27E;
--g-dim: .4;
--g-ground: linear-gradient(160deg,
color-mix(in srgb, var(--g-b1) 13%, #090C13) 0%, #0B0E16 55%,
color-mix(in srgb, var(--g-b3) 11%, #0B0A11) 100%);
--g-glass-field: rgb(255 255 255 / .06); --g-glass-field-on: rgb(255 255 255 / .10);
--g-glass-pop: rgb(26 31 44 / .88); --g-glass-dialog: rgb(24 29 41 / .86);
--g-glass-th: rgb(255 255 255 / .04);
--g-edge-field: rgb(255 255 255 / .13); --g-edge-field-hi: rgb(255 255 255 / .24);
--g-edge-pop: rgb(255 255 255 / .12);
--g-solid-field: #141923; --g-solid-field-on: #171C27;
--g-solid-pop: #1B2130; --g-solid-dialog: #1B2130; --g-solid-th: #171C27;
--g-scrim: rgb(3 5 10 / .55);
--g-tip-bg: rgb(236 240 246 / .95); --g-tip-ink: #111827;
--g-hover-2: rgb(255 255 255 / .11); --g-pop-hover: rgb(255 255 255 / .07);
--g-row-hover: rgb(255 255 255 / .045);
--g-shadow-pop: 0 2px 6px rgb(0 0 0 / .30), 0 22px 54px rgb(0 0 0 / .50);
--g-shadow-dialog: 0 2px 8px rgb(0 0 0 / .35), 0 40px 90px rgb(0 0 0 / .60);
--g-info-bg: rgb(96 140 230 / .16); --g-info: #9CC2FF;
--g-muted-bg: rgb(255 255 255 / .07); --g-muted: #C3CAD6;
--g-skel: rgb(255 255 255 / .06); --g-skel-hi: rgb(255 255 255 / .11);
--g-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239AA4B5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
/* ── ٣. المُحلِّل: زجاجٌ أم صلب ──────────────────────────────────────
⭐ كلُّ سطحٍ يقرأ `--g-*-bg` وحدَه، وهذا المقطعُ يقرّر من أين يأتي.
الوضعان (نهار/ليل) يعرّفان الزجاجَ والصلبَ معاً، فقرارُ «قلّل
الشفافية» واحدٌ لهما — لا أربعُ نسخ. */
:root {
--g-frame-bg: var(--g-glass-frame); --g-head-bg: var(--g-glass-head);
--g-bar-bg: var(--g-glass-bar); --g-panel-bg: var(--g-glass-panel);
--g-card-bg: var(--g-glass-card); --g-chip-bg: var(--g-glass-chip);
--g-well-bg: var(--g-glass-well); --g-tabic-bg: var(--g-glass-tabic);
--g-frame-edge: var(--g-edge-frame); --g-head-edge: var(--g-edge-head);
--g-panel-edge: var(--g-edge-panel); --g-card-edge: var(--g-edge-card);
--g-chip-edge: var(--g-edge-chip);
--g-frame-blur: var(--g-blur-frame); --g-panel-blur: var(--g-blur-panel);
--g-card-blur: var(--g-blur-card);
/* عُدّةُ المكوّنات */
--g-field-bg: var(--g-glass-field); --g-field-bg-on: var(--g-glass-field-on);
--g-pop-bg: var(--g-glass-pop); --g-dialog-bg: var(--g-glass-dialog);
--g-th-bg: var(--g-glass-th); --g-pop-edge: var(--g-edge-pop);
--g-pop-blur: var(--g-blur-pop); --g-scrim-filter: var(--g-scrim-blur);
}
/* «قلّل الشفافية» — مفتاحُ المستخدم. */
:root[data-glass="off"] {
--g-frame-bg: var(--g-solid-frame); --g-head-bg: var(--g-solid-head);
--g-bar-bg: var(--g-solid-bar); --g-panel-bg: var(--g-solid-panel);
--g-card-bg: var(--g-solid-card); --g-chip-bg: var(--g-solid-chip);
--g-well-bg: var(--g-solid-well); --g-tabic-bg: var(--g-solid-tabic);
--g-frame-edge: var(--g-solid-edge); --g-head-edge: var(--g-solid-edge);
--g-panel-edge: var(--g-solid-edge); --g-card-edge: var(--g-solid-edge);
--g-chip-edge: var(--g-solid-edge); --g-hi: transparent;
--g-frame-blur: none; --g-panel-blur: none; --g-card-blur: none;
--g-field-bg: var(--g-solid-field); --g-field-bg-on: var(--g-solid-field-on);
--g-pop-bg: var(--g-solid-pop); --g-dialog-bg: var(--g-solid-dialog);
--g-th-bg: var(--g-solid-th); --g-pop-edge: var(--g-solid-edge);
--g-pop-blur: none; --g-scrim-filter: none;
}
/* «اتبع إعداد الجهاز» — يسري ما لم يفرض المستخدمُ الزجاجَ (`data-glass="on"`). */
@media (prefers-reduced-transparency: reduce) {
:root:not([data-glass="on"]) {
--g-frame-bg: var(--g-solid-frame); --g-head-bg: var(--g-solid-head);
--g-bar-bg: var(--g-solid-bar); --g-panel-bg: var(--g-solid-panel);
--g-card-bg: var(--g-solid-card); --g-chip-bg: var(--g-solid-chip);
--g-well-bg: var(--g-solid-well); --g-tabic-bg: var(--g-solid-tabic);
--g-frame-edge: var(--g-solid-edge); --g-head-edge: var(--g-solid-edge);
--g-panel-edge: var(--g-solid-edge); --g-card-edge: var(--g-solid-edge);
--g-chip-edge: var(--g-solid-edge); --g-hi: transparent;
--g-frame-blur: none; --g-panel-blur: none; --g-card-blur: none;
--g-field-bg: var(--g-solid-field); --g-field-bg-on: var(--g-solid-field-on);
--g-pop-bg: var(--g-solid-pop); --g-dialog-bg: var(--g-solid-dialog);
--g-th-bg: var(--g-solid-th); --g-pop-edge: var(--g-solid-edge);
--g-pop-blur: none; --g-scrim-filter: none;
}
}
/* ⚠️ متصفّحٌ بلا ضبابيّة: زجاجٌ شفّافٌ بلا ضبابٍ يُقرأ نصّاً فوق بقع. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
:root {
--g-frame-bg: var(--g-solid-frame); --g-bar-bg: var(--g-solid-bar);
--g-panel-bg: var(--g-solid-panel); --g-card-bg: var(--g-solid-card);
--g-chip-bg: var(--g-solid-chip); --g-well-bg: var(--g-solid-well);
--g-pop-bg: var(--g-solid-pop); --g-dialog-bg: var(--g-solid-dialog);
}
}
/* ── ٤. الجوّ: لوحاتُ «هويّة المنتج» — مقروءةٌ من كلّ نموذج ─────────
خمسُ بقع: ١ أعلى البداية (كبيرة) · ٢ الوسط · ٣ أسفل النهاية (كبيرة)
· ٤ أعلى النهاية · ٥ أسفل البداية. والعتامةُ الأساسُ لكلّ بقعة. */
:root { /* البيت — محايدٌ بخمسة ألوان المنتَجات (P-MyTasks) */
--g-pal-ground: linear-gradient(160deg, #E9EEF8 0%, #EEEDF6 55%, #F5EEF0 100%);
--g-pal-b1: #7FB2FF; --g-pal-b2: #7EDDB4; --g-pal-b3: #B9A4FF; --g-pal-b4: #FFAA7F; --g-pal-b5: #6FD6E4;
--g-pal-o1: .6; --g-pal-o2: .45; --g-pal-o3: .55; --g-pal-o4: .45; --g-pal-o5: .45;
--g-tint: 40 50 90;
}
[data-product="hr"] { /* D-Blend */
--g-pal-ground: linear-gradient(160deg, #E3EDFB 0%, #EEE9F7 55%, #F7ECF2 100%);
--g-pal-b1: #7FB2FF; --g-pal-b2: #B9A4FF; --g-pal-b3: #FFB3D4; --g-pal-b4: #FFD59A; --g-pal-b5: #8FE3D6;
--g-pal-o1: .75; --g-pal-o2: .55; --g-pal-o3: .7; --g-pal-o4: .55; --g-pal-o5: .45;
--g-tint: 40 60 110;
}
[data-product="crm"] { /* P-CRM */
--g-pal-ground: linear-gradient(160deg, #E2F5EE 0%, #EAF3F1 50%, #F4F3E6 100%);
--g-pal-b1: #7EDDB4; --g-pal-b2: #9AD8F0; --g-pal-b3: #D8EE8C; --g-pal-b4: #FFD99A; --g-pal-b5: #8FE3D6;
--g-pal-o1: .75; --g-pal-o2: .5; --g-pal-o3: .6; --g-pal-o4: .45; --g-pal-o5: 0;
--g-tint: 20 70 50;
}
[data-product="books"] { /* P-Books */
--g-pal-ground: linear-gradient(160deg, #FCEDE4 0%, #F8EEEA 50%, #F3EEF6 100%);
--g-pal-b1: #FFAA7F; --g-pal-b2: #FFC98A; --g-pal-b3: #F7A6C0; --g-pal-b4: #C8B6FF; --g-pal-b5: #FFD59A;
--g-pal-o1: .7; --g-pal-o2: .5; --g-pal-o3: .6; --g-pal-o4: .4; --g-pal-o5: 0;
--g-tint: 110 50 20;
}
[data-product="review"] { /* P-Review · R-List */
--g-pal-ground: linear-gradient(160deg, #ECE8FC 0%, #F1EAF8 50%, #F8EAF1 100%);
--g-pal-b1: #A893FF; --g-pal-b2: #FF9ECF; --g-pal-b3: #8EC5FF; --g-pal-b4: #FFC7A8; --g-pal-b5: #B9A4FF;
--g-pal-o1: .75; --g-pal-o2: .5; --g-pal-o3: .6; --g-pal-o4: .4; --g-pal-o5: 0;
--g-tint: 60 40 140;
}
/* ⭐ «المشاريع» (كانت «المهامّ») — و`work` يبقى اسماً مستعاراً إصداراً واحداً. */
[data-product="projects"], [data-product="work"] { /* P-Projects · P-Tasks */
--g-pal-ground: linear-gradient(160deg, #DFF2F6 0%, #E8EEF8 55%, #EFEAF6 100%);
--g-pal-b1: #6FD6E4; --g-pal-b2: #93B7FF; --g-pal-b3: #B8A8FF; --g-pal-b4: #9CEBC8; --g-pal-b5: #8FE3D6;
--g-pal-o1: .72; --g-pal-o2: .5; --g-pal-o3: .5; --g-pal-o4: .45; --g-pal-o5: 0;
--g-tint: 10 70 90;
}
/* الجوُّ الحاليّ = لوحةُ المنتَج، ما لم يُختَر غيرُها. */
:root {
--g-ground: var(--g-pal-ground);
--g-b1: var(--g-pal-b1); --g-b2: var(--g-pal-b2); --g-b3: var(--g-pal-b3);
--g-b4: var(--g-pal-b4); --g-b5: var(--g-pal-b5);
--g-o1: var(--g-pal-o1); --g-o2: var(--g-pal-o2); --g-o3: var(--g-pal-o3);
--g-o4: var(--g-pal-o4); --g-o5: var(--g-pal-o5);
}
/* ⭐ الجوُّ المختار (S-Appearance). البقعُ الخمسُ بعتاماتِ D-Blend. */
[data-backdrop="org"], [data-backdrop="neutral"], [data-backdrop="dawn"],
[data-backdrop="sea"], [data-backdrop="sand"] {
--g-o1: .75; --g-o2: .55; --g-o3: .7; --g-o4: .55; --g-o5: .45;
}
/* «لون منشأتي» — القشرةُ تحقن `--z-org-*` من ألوان شعار المنشأة (المرحلة ٦). */
[data-backdrop="org"] {
--g-ground: var(--z-org-ground, linear-gradient(160deg, #F6ECE6 0%, #F3EEE9 55%, #EEF0EC 100%));
--g-b1: var(--z-org-1, #D98B6A); --g-b2: var(--z-org-2, #C9A27E); --g-b3: var(--z-org-3, #E8C9A0);
--g-b4: var(--z-org-4, #9DB39A); --g-b5: var(--z-org-5, #B8564A);
}
[data-backdrop="neutral"] {
--g-ground: linear-gradient(160deg, #EEF0F3 0%, #F1F2F4 55%, #F4F3F1 100%);
--g-b1: #C9D2DE; --g-b2: #D8D4E2; --g-b3: #E2DAD2; --g-b4: #D5DDD8; --g-b5: #CBD6DA;
}
[data-backdrop="dawn"] {
--g-ground: linear-gradient(160deg, #FCEEE6 0%, #F6ECF4 55%, #ECEEFB 100%);
--g-b1: #FFB49A; --g-b2: #F9A8D4; --g-b3: #C4B5FD; --g-b4: #FFD8A8; --g-b5: #FBC4AB;
}
[data-backdrop="sea"] {
--g-ground: linear-gradient(160deg, #E2F3F7 0%, #E6EEF9 55%, #EAF2F1 100%);
--g-b1: #67C8E0; --g-b2: #7FA8F5; --g-b3: #8FE3D6; --g-b4: #A5D8FF; --g-b5: #5FB7B0;
}
[data-backdrop="sand"] {
--g-ground: linear-gradient(160deg, #F8F1E4 0%, #F4EEE4 55%, #EFEDE6 100%);
--g-b1: #E9C46A; --g-b2: #F4A261; --g-b3: #E8D5B5; --g-b4: #D4B483; --g-b5: #C9B79C;
}
[data-intensity="low"] { --g-k: .55; }
[data-intensity="mid"] { --g-k: 1; }
[data-intensity="high"] { --g-k: 1.3; }
/* ── ٥. عنصرُ الجوّ — واحدٌ في كلّ قشرة ────────────────────────────
::before = البقعة ١ · ::after = البقعة ٣ · والأبناءُ الثلاثة = ٢ ٤ ٥. */
.z-backdrop {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
overflow: hidden; background: var(--g-ground);
}
/* 🔴 **تدرّجٌ دائريّ لا `filter: blur()`**: Safari على الماك يرسم عنصراً ضبابيّاً كبيراً
على بلاطاتٍ في كرت الشاشة، فتنقطع الضبابيّةُ عند حدّ كلّ بلاطة — أشرطةٌ عموديّةٌ حادّةٌ
في الخلفيّة على الشاشات العريضة (رآها المالك على app.omt.sa، ١٠-١٨). المحرّكُ بلا كرت
شاشة ولقطاتُ Chromium لا تُظهرها. فالبقعةُ الآن تدرّجٌ ناعمٌ يُرسم كما هو في كلّ متصفّح،
ويمتدّ `--g-spread` من كلّ جهةٍ مكانَ امتداد الضبابيّة القديمة (≈ ضعفُ نصف قطرها).
وهو أخفُّ على الجهاز أيضاً. */
.z-backdrop { --g-spread: 190px; }
.z-backdrop::before, .z-backdrop::after, .z-backdrop > i {
content: ""; position: absolute; display: block; border-radius: 50%;
margin: calc(var(--g-spread) * -1);
background: radial-gradient(closest-side,
var(--c) 0%, var(--c) 22%,
color-mix(in srgb, var(--c) 62%, transparent) 48%,
color-mix(in srgb, var(--c) 24%, transparent) 72%,
color-mix(in srgb, var(--c) 6%, transparent) 88%,
transparent 100%);
}
.z-backdrop::before { /* ١ */
inset-block-start: -140px; inset-inline-start: -80px; --c: var(--g-b1);
inline-size: calc(min(620px, 78vw) + 2 * var(--g-spread)); block-size: calc(520px + 2 * var(--g-spread));
opacity: min(.95, calc(var(--g-o1) * var(--g-k) * var(--g-dim)));
}
.z-backdrop > i:nth-child(1) { /* ٢ */
inset-block-start: 380px; inset-inline-start: 38%; --c: var(--g-b2);
inline-size: calc(min(420px, 60vw) + 2 * var(--g-spread)); block-size: calc(380px + 2 * var(--g-spread));
opacity: min(.95, calc(var(--g-o2) * var(--g-k) * var(--g-dim)));
}
.z-backdrop::after { /* ٣ */
inset-block-end: -160px; inset-inline-end: -120px; --c: var(--g-b3);
inline-size: calc(min(640px, 80vw) + 2 * var(--g-spread)); block-size: calc(560px + 2 * var(--g-spread));
opacity: min(.95, calc(var(--g-o3) * var(--g-k) * var(--g-dim)));
}
.z-backdrop > i:nth-child(2) { /* ٤ */
inset-block-start: 120px; inset-inline-end: 8%; --c: var(--g-b4);
inline-size: calc(min(360px, 55vw) + 2 * var(--g-spread)); block-size: calc(300px + 2 * var(--g-spread));
opacity: min(.95, calc(var(--g-o4) * var(--g-k) * var(--g-dim)));
}
.z-backdrop > i:nth-child(3) { /* ٥ */
inset-block-end: 120px; inset-inline-start: 6%; --c: var(--g-b5);
inline-size: calc(min(380px, 55vw) + 2 * var(--g-spread)); block-size: calc(320px + 2 * var(--g-spread));
opacity: min(.95, calc(var(--g-o5) * var(--g-k) * var(--g-dim)));
}
@media (max-width: 640px) {
.z-backdrop { --g-spread: 140px; }
}
/* ── ٦. الصفحةُ والإطار ───────────────────────────────────────────── */
/* ⭐ على ``: لونُ الأرض للتمرير الزائد، والخطُّ والحبر. */
.z-page {
margin: 0; min-block-size: 100dvh; background: var(--g-solid-frame);
color: var(--g-ink); font-family: var(--g-font);
font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
/* الحاوي فوق الجوّ — حشوتُه الهامشُ الذي تُرى فيه البقعُ حول الإطار. */
.z-app {
position: relative; z-index: 1; box-sizing: border-box;
min-block-size: 100dvh; padding: 32px 36px;
}
@media (max-width: 1100px) { .z-app { padding: 20px; } }
@media (max-width: 640px) { .z-app { padding: 8px; } }
/* ⭐ السطحُ الزجاجيّ — الضبابيّةُ في `::before` (انظر الرأس). */
.z-frame, .z-tabs, .z-side, .z-card {
position: relative; isolation: isolate; box-sizing: border-box;
}
.z-frame::before, .z-tabs::before, .z-side::before, .z-card::before {
content: ""; position: absolute; inset: 0; z-index: -1;
border-radius: inherit; pointer-events: none;
}
.z-frame {
border-radius: var(--g-r-frame); border: 1px solid var(--g-frame-edge);
box-shadow: 0 40px 90px rgb(var(--g-tint) / .18), inset 0 1px 0 var(--g-hi);
min-block-size: calc(100dvh - 64px);
}
.z-frame::before {
background: var(--g-frame-bg);
-webkit-backdrop-filter: var(--g-frame-blur); backdrop-filter: var(--g-frame-blur);
}
@media (max-width: 1100px) { .z-frame { min-block-size: calc(100dvh - 40px); } }
@media (max-width: 640px) { .z-frame { border-radius: 22px; min-block-size: calc(100dvh - 16px); } }
/* ── ٧. الترويسة ─────────────────────────────────────────────────── */
.z-head {
display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
padding: 16px 22px; background: var(--g-head-bg);
border-block-end: 1px solid var(--g-head-edge);
border-start-start-radius: var(--g-r-frame); border-start-end-radius: var(--g-r-frame);
}
/* العلامة: مربّعُ المنتَج + الاسم + المنشأة — وفاصلٌ بعدها. */
.z-brand {
display: flex; align-items: center; gap: 12px; min-inline-size: 0;
padding-inline-end: 16px; border-inline-end: 1px solid var(--g-line);
color: inherit; text-decoration: none;
}
.z-brand-t { min-inline-size: 0; }
.z-brand-t b { display: block; font-size: 15px; font-weight: 700; line-height: 1.5; }
.z-brand-t small { display: block; font-size: 12px; color: var(--g-ink-3); line-height: 1.5;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 16rem; }
/* مربّعُ المنتَج — تدرّجُ لونه. */
.z-tile {
inline-size: 46px; block-size: 46px; flex: none; box-sizing: border-box;
border-radius: var(--g-r-ctl); display: grid; place-items: center;
background: var(--h-product-grad); color: #FFFFFF;
font-size: 20px; font-weight: 700;
box-shadow: 0 8px 18px var(--h-product-glow), inset 0 1px 0 rgb(255 255 255 / .45);
}
.z-tile svg { inline-size: 22px; block-size: 22px; }
/* ⭐ مربّعُ البيت — ألوانُ المنتَجات الأربعة لا لونٌ خامس. */
.z-tile--hub {
background: rgb(255 255 255 / .75); border: 1px solid rgb(255 255 255 / .9);
grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 9px;
place-items: stretch; box-shadow: 0 6px 16px rgb(var(--g-tint) / .12);
}
.z-tile--hub > b { border-radius: 4px; }
.z-tile--hub > b:nth-child(1) { background: var(--h-p-hr); }
.z-tile--hub > b:nth-child(2) { background: var(--h-p-crm); }
.z-tile--hub > b:nth-child(3) { background: var(--h-p-books); }
.z-tile--hub > b:nth-child(4) { background: var(--h-p-review); }
:root[data-theme="dark"] .z-tile--hub, :root.dark .z-tile--hub {
background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .12); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]):not(.light) .z-tile--hub {
background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .12); }
}
/* المقبضُ الزجاجيّ — بحث · مبدّل · جرس · «مهامّ». */
.z-ctl, .z-search, .z-iconbtn, .z-chip {
box-sizing: border-box; min-block-size: var(--g-ctl-h);
border-radius: var(--g-r-ctl); background: var(--g-chip-bg);
border: 1px solid var(--g-chip-edge); box-shadow: inset 0 1px 0 var(--g-hi);
color: var(--g-ink); font: inherit;
}
.z-search {
flex: 1 1 260px; display: flex; align-items: center; gap: 10px;
padding: 0 16px; color: var(--g-ink-3); font-size: 14px; cursor: text;
}
.z-search svg { inline-size: 18px; block-size: 18px; flex: none; }
.z-search input {
flex: 1; min-inline-size: 0; border: 0; background: transparent; outline: none;
font: inherit; color: var(--g-ink);
/* حقلٌ ضاق (ترويسةُ الدفاتر بالإنجليزيّة) يُختَم بنقاطٍ لا يُقطع وسطَ كلمة. */
text-overflow: ellipsis;
}
.z-search input::placeholder { color: var(--g-ink-3); opacity: 1; text-overflow: ellipsis; }
.z-search:focus-within { box-shadow: inset 0 1px 0 var(--g-hi), 0 0 0 3px color-mix(in srgb, var(--h-product) 22%, transparent); }
.z-iconbtn {
position: relative; inline-size: var(--g-ctl-h); display: grid; place-items: center;
padding: 0; cursor: pointer; text-decoration: none;
}
.z-iconbtn svg { inline-size: 19px; block-size: 19px; }
.z-iconbtn .z-alert {
position: absolute; inset-block-start: 10px; inset-inline-end: 11px;
inline-size: 8px; block-size: 8px; border-radius: 4px;
background: var(--g-alert); border: 2px solid #FFFFFF;
}
.z-chip {
display: inline-flex; align-items: center; gap: 8px; padding: 0 14px;
text-decoration: none; font-size: 13.5px; font-weight: 500; cursor: pointer;
}
.z-chip svg { inline-size: 18px; block-size: 18px; }
/* العدّادُ بلون المنتَج. */
.z-count {
min-inline-size: 20px; block-size: 20px; padding: 0 6px; box-sizing: border-box;
border-radius: 10px; background: var(--h-product); color: var(--h-product-on);
font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center;
justify-content: center; line-height: 1;
}
/* «تبديل المنشأة | الاسم ⌄» — يرسمه `housebar.js` في `[data-house-ws="glass"]`. */
.z-switch {
display: flex; align-items: stretch; overflow: hidden; padding: 0;
}
.z-switch > :first-child {
display: flex; align-items: center; padding: 0 14px; font-size: 13.5px;
font-weight: 600; color: var(--g-switch-ink, var(--h-product-ink)); border-inline-end: 1px solid var(--g-line);
}
/* البيتُ محايد، و«تبديل المنشأة» فيه أزرقُ فعلٍ كما في نموذج «مهامّي». */
[data-product="hub"] { --g-switch-ink: #2453D6; }
/* ⚠️ وفي الليل تبويبُ البيت الحاليُّ فاتح — فأيقونتُه على مربّعها الأبيض حبرٌ داكن. */
:root[data-theme="dark"][data-product="hub"], :root.dark[data-product="hub"] {
--g-switch-ink: #9CC2FF; --g-tab-on-ic: #111827; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]):not(.light)[data-product="hub"] {
--g-switch-ink: #9CC2FF; --g-tab-on-ic: #111827; }
}
/* الحساب — مربّعٌ بحرفٍ + الاسمُ والدور. */
.z-me { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-inline-size: 0; }
.z-me-av {
inline-size: 46px; block-size: 46px; flex: none; border-radius: var(--g-r-ctl);
display: grid; place-items: center; font-size: 18px; font-weight: 600;
background: var(--h-product-soft); color: var(--h-product-ink);
}
/* 🔴 في الليل صبغةُ المنتَج داكنةٌ تكاد تذوب في الترويسة — المربّعُ بلا حافّةٍ بدا
حرفاً عائماً. حافّةُ المقابض نفسُها ولمعتُها تجعله مقبضاً بين المقابض. */
:root[data-theme="dark"] .z-me-av, :root.dark .z-me-av {
box-shadow: inset 0 0 0 1px var(--g-chip-edge), inset 0 1px 0 var(--g-hi);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]):not(.light) .z-me-av {
box-shadow: inset 0 0 0 1px var(--g-chip-edge), inset 0 1px 0 var(--g-hi);
}
}
.z-me-t b { display: block; font-size: 14px; font-weight: 600; line-height: 1.5; }
.z-me-t small { display: block; font-size: 12px; color: var(--g-ink-3); line-height: 1.5; }
/* الهاتف: العلامةُ والحسابُ في سطر · المبدّلُ سطرٌ · البحثُ سطر (المرحلة ٧ تعيد الجوال كلَّه). */
@media (max-width: 760px) {
.z-head { padding: 12px 14px; gap: 10px; }
.z-brand { border: 0; padding: 0; flex: 1; order: 0; }
.z-me { order: 1; }
.z-me-t { display: none; }
.z-head > [data-house-ws] { order: 2; flex-basis: 100%; }
.z-head > [data-house-ws] .hws, .z-head > [data-house-ws] .hws-b { inline-size: 100%; }
.z-head > [data-house-ws] .hws-v { margin-inline-start: auto; }
.z-search { order: 3; flex-basis: 100%; }
.z-head > .z-iconbtn, .z-head > .z-chip, .z-head > [data-house-apps] { order: 1; }
}
/* ── ٨. شريطُ الأقسام (أعلى) — مجموعاتُ المنتَج ───────────────────── */
.z-tabs {
margin: 16px 22px 0; padding: 8px; display: flex; flex-wrap: wrap; gap: 6px;
border-radius: var(--g-r-bar); border: 1px solid var(--g-chip-edge);
box-shadow: inset 0 1px 0 var(--g-hi);
}
.z-tabs::before { background: var(--g-bar-bg); }
.z-tab {
display: inline-flex; align-items: center; gap: 9px; min-block-size: 46px;
padding-inline: 14px 16px; border-radius: var(--g-r-tab); box-sizing: border-box;
text-decoration: none; font: inherit; font-size: 14px; font-weight: 500;
color: var(--g-ink); background: transparent; border: 0; cursor: pointer;
white-space: nowrap;
}
.z-tab:hover { background: var(--g-hover); }
.z-tab-ic {
inline-size: 28px; block-size: 28px; flex: none; border-radius: 9px;
display: grid; place-items: center; background: var(--g-tabic-bg); color: var(--g-ink-2);
}
.z-tab-ic svg { inline-size: 16px; block-size: 16px; }
/* ⭐ أيقونةٌ بلون منتَجها (شريطُ البيت: `data-product` على المربّع). */
.z-tab-ic[data-product] { color: var(--h-product-ink); }
.z-tab-n { font-size: 11px; font-weight: 600; color: var(--g-count-ink); }
/* التبويبُ الحاليّ — تدرّجُ المنتَج وحبرٌ أبيض. */
.z-tab[aria-current="page"], .z-tab.is-on {
background: var(--h-product-grad); color: var(--h-product-on);
box-shadow: 0 8px 18px var(--h-product-glow), inset 0 1px 0 rgb(255 255 255 / .45);
text-shadow: 0 1px 1px rgb(0 0 0 / .12);
}
.z-tab[aria-current="page"] .z-tab-ic, .z-tab.is-on .z-tab-ic {
background: rgb(255 255 255 / .92); color: var(--g-tab-on-ic, var(--h-product));
}
.z-tab[aria-current="page"] .z-tab-n, .z-tab.is-on .z-tab-n { color: inherit; }
@media (max-width: 760px) {
.z-tabs { margin: 10px 10px 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.z-tabs::-webkit-scrollbar { display: none; }
}
/* ── ٩. الجسد: لوحٌ جانبيّ + محتوى ────────────────────────────────── */
.z-body {
padding: 18px 22px 26px; display: flex; flex-wrap: wrap; gap: 16px;
align-items: flex-start;
}
.z-side {
flex: 0 0 244px; max-inline-size: 244px; padding: 18px 12px;
border-radius: var(--g-r-panel); border: 1px solid var(--g-panel-edge);
box-shadow: inset 0 1px 0 var(--g-hi), 0 10px 30px rgb(var(--g-tint) / .08);
}
.z-side::before {
background: var(--g-panel-bg);
-webkit-backdrop-filter: var(--g-panel-blur); backdrop-filter: var(--g-panel-blur);
}
.z-side-h { font-size: 12px; color: var(--g-ink-3); padding: 0 10px 6px; margin: 0; font-weight: 400; }
.z-side-a {
display: flex; align-items: center; gap: 10px; min-block-size: 40px;
padding: 0 10px; border-radius: var(--g-r-row); box-sizing: border-box;
text-decoration: none; font: inherit; font-size: 13.5px; color: var(--g-ink);
background: transparent; border: 0; inline-size: 100%; text-align: start; cursor: pointer;
}
.z-side-a:hover { background: var(--g-hover); }
.z-side-a[aria-current="page"], .z-side-a.is-on {
background: var(--g-row-on); color: var(--h-product-ink); font-weight: 600;
box-shadow: 0 2px 8px rgb(var(--g-tint) / .08);
}
.z-side-a svg { inline-size: 16px; block-size: 16px; flex: none; }
.z-side-a > span:not([class]) { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-side-a--sm { min-block-size: 36px; font-size: 13px; color: var(--g-ink-2); }
.z-side-dot { inline-size: 8px; block-size: 8px; border-radius: 3px; flex: none; background: var(--dot, var(--h-product)); }
.z-side-n { margin-inline-start: auto; font-size: 12px; color: var(--g-ink-3); font-weight: 400; }
.z-side-sep { block-size: 1px; background: var(--g-line); margin: 12px 10px; border: 0; }
/* رأسُ «التقارير» — مربّعٌ بتدرّج المنتَج. */
.z-side-rep { display: flex; align-items: center; gap: 8px; padding: 0 10px 8px; margin: 0; font-size: 14.5px; font-weight: 700; }
.z-side-rep > i {
inline-size: 26px; block-size: 26px; border-radius: 8px; flex: none;
display: grid; place-items: center; background: var(--h-product-grad); color: #FFFFFF;
}
.z-side-rep > i svg { inline-size: 14px; block-size: 14px; }
.z-main { flex: 999 1 640px; min-inline-size: 0; }
@media (max-width: 900px) {
.z-body { padding: 12px 10px 18px; gap: 12px; }
/* ⚠️ المحتوى أوّلاً على الشاشة الضيّقة — الأقسامُ في الشريط الأعلى، واللوحُ بعده. */
.z-side { max-inline-size: none; flex: 1 1 100%; padding: 12px 8px; order: 2; }
}
/* ── ١٠. المحتوى: عنوان · بطاقة · مقطع · أزرار ─────────────────────── */
.z-title { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.45; }
.z-lede { margin: 4px 0 0; font-size: 14px; color: var(--g-ink-2); }
.z-card {
border-radius: var(--g-r-card); padding: 20px; border: 1px solid var(--g-card-edge);
box-shadow: inset 0 1px 0 var(--g-hi), 0 12px 30px rgb(var(--g-tint) / .08);
}
.z-card::before {
background: var(--g-card-bg);
-webkit-backdrop-filter: var(--g-card-blur); backdrop-filter: var(--g-card-blur);
}
.z-card--kpi { border-radius: var(--g-r-kpi); padding: 16px 16px 14px; }
/* بئرٌ داخل بطاقة — صفٌّ أو خانةٌ أفتح. */
.z-well {
border-radius: 15px; background: var(--g-well-bg); border: 1px solid var(--g-card-edge);
}
/* مقطعٌ (قائمة/تقويم · 3 أشهر/السنة). */
.z-seg {
display: inline-flex; gap: 4px; padding: 4px; border-radius: 11px;
background: var(--g-well-bg); border: 1px solid var(--g-card-edge);
}
.z-seg > * {
min-block-size: 34px; padding: 0 14px; border-radius: 8px; border: 0;
background: transparent; color: var(--g-ink-2); font: inherit; font-size: 13px;
cursor: pointer; display: inline-flex; align-items: center; text-decoration: none;
}
.z-seg > [aria-pressed="true"], .z-seg > [aria-selected="true"],
.z-seg > [aria-checked="true"], .z-seg > .is-on {
background: var(--g-sel); color: var(--g-ink); box-shadow: var(--g-sel-shadow);
}
.z-btn {
min-block-size: 44px; display: inline-flex; align-items: center; justify-content: center;
gap: 8px; padding: 0 16px; border-radius: var(--g-r-btn); box-sizing: border-box;
border: 1px solid var(--g-card-edge); background: var(--g-chip-bg);
box-shadow: inset 0 1px 0 var(--g-hi); color: var(--g-ink);
font: inherit; font-size: 14px; text-decoration: none; cursor: pointer;
}
.z-btn svg { inline-size: 17px; block-size: 17px; }
.z-btn--primary {
border: 0; background: var(--h-product-grad); color: var(--h-product-on); font-weight: 500;
box-shadow: 0 8px 18px var(--h-product-glow), inset 0 1px 0 rgb(255 255 255 / .4);
}
.z-btn--ink { border: 0; background: var(--g-ink-btn); color: var(--g-ink-btn-on); box-shadow: none; }
.z-btn:disabled { opacity: .5; cursor: not-allowed; }
/* شارةُ تغيّر — «↗ +1.8%» (اتّجاهُها LTR داخلَ نصٍّ عربيّ). */
.z-delta { font-size: 11.5px; font-weight: 500; padding: 3px 8px; border-radius: 7px; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.z-delta--up { background: var(--g-up-bg); color: var(--g-up); }
.z-delta--down { background: var(--g-down-bg); color: var(--g-down); }
.z-delta--warn { background: var(--g-warn-bg); color: var(--g-warn); }
/* ═══════════════════════════════════════════════════════════════════
١٢. عُدّةُ المكوّنات — كلُّ عنصرٍ داخل الصفحة (المرحلة ٥)
═══════════════════════════════════════════════════════════════════
⭐ مرّةً واحدةً هنا، والقشراتُ الثلاثُ تربط مكوّناتِها بها (`ob-*` في
الدفاتر · shadcn في المهامّ · `dr-*` في المراجعة · قوالبُ البيت).
العقدُ الحرفيُّ لوكلاء الصفحات: `docs/GLASS_SHELL.md` §١٠ «المكوّنات».
⚠️ كلُّ مقاسٍ هنا عبر متغيّر (`--z-h` …) كي تضبطه القشرةُ بلا معركةِ أخصّيّة.
⚠️ لا `letter-spacing` — ولا خطٌّ أحاديّ العرض على شارةٍ عربيّة. */
/* ── ١٢.١ الأزرار ── أساسيّ (تدرّجُ المنتَج) · ثانويّ (زجاج) · شبحيّ · خطر */
.z-btn { min-block-size: var(--z-h, 44px); font-weight: 500; white-space: nowrap; line-height: 1.5; }
.z-btn:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--g-hover-2); }
.z-btn--secondary { /* = .z-btn — الاسمُ للوضوح في المكوّنات */ }
.z-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
background: var(--h-product-grad); filter: saturate(1.06) brightness(1.04);
box-shadow: 0 10px 22px var(--h-product-glow), inset 0 1px 0 rgb(255 255 255 / .4);
}
.z-btn--primary:active:not(:disabled) { filter: brightness(.97); }
.z-btn--primary { text-shadow: 0 1px 1px rgb(0 0 0 / .12); }
.z-btn--ink:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--g-ink-btn); opacity: .9; }
.z-btn--ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--g-ink-2); }
.z-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--g-hover); color: var(--g-ink); }
/* الخطر: صبغةٌ ناعمةٌ ساكناً، وتعبئةٌ حمراءُ تحت المؤشّر — لا أحمرَ صارخاً في الصفحة. */
.z-btn--danger {
background: var(--g-down-bg); color: var(--g-down);
border-color: color-mix(in srgb, var(--g-down) 22%, transparent);
}
.z-btn--danger:hover:not(:disabled):not([aria-disabled="true"]),
.z-btn--danger-fill {
background: var(--g-danger-grad); color: #FFFFFF; border-color: transparent;
box-shadow: 0 8px 18px var(--g-danger-glow), inset 0 1px 0 rgb(255 255 255 / .35);
}
.z-btn--sm { --z-h: 36px; padding: 0 12px; font-size: 13px; border-radius: 10px; gap: 6px; }
.z-btn--lg { --z-h: 52px; padding: 0 20px; font-size: 15px; border-radius: var(--g-r-ctl); }
.z-btn--icon { inline-size: var(--z-h, 44px); padding: 0; }
.z-btn--block { inline-size: 100%; }
.z-btn--sm svg { inline-size: 15px; block-size: 15px; }
.z-btn:disabled, .z-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; filter: none; }
.z-btn[aria-busy="true"] { cursor: progress; }
/* ── ١٢.٢ الحقول ── حقلٌ نصّيّ · قائمةٌ أصليّة · نصٌّ طويل · حقلٌ مركَّب */
.z-field { display: grid; gap: 6px; min-inline-size: 0; }
.z-label { font-size: 13px; font-weight: 500; color: var(--g-ink-2); line-height: 1.6; }
.z-hint { font-size: 12px; color: var(--g-ink-3); line-height: 1.6; margin: 0; }
.z-hint--error { color: var(--g-down); }
.z-input, .z-select, .z-textarea, .z-control {
box-sizing: border-box; inline-size: 100%; min-block-size: var(--z-h, var(--g-field-h));
padding: 0 14px; border-radius: var(--g-r-field);
border: 1px solid var(--g-edge-field); background: var(--g-field-bg);
box-shadow: inset 0 1px 2px rgb(var(--g-tint) / .06);
color: var(--g-ink); font: inherit; font-size: 14px; line-height: 1.6;
transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.z-input::placeholder, .z-textarea::placeholder, .z-control input::placeholder { color: var(--g-ink-3); opacity: 1; }
.z-input:hover:not(:disabled), .z-select:hover:not(:disabled),
.z-textarea:hover:not(:disabled), .z-control:hover:not(.is-disabled) { border-color: var(--g-edge-field-hi); }
/* ⭐ التركيز بلون المنتَج — حدٌّ وهالة (لا يتبع الجوّ). */
.z-input:focus, .z-select:focus, .z-textarea:focus, .z-control:focus-within {
outline: none; background: var(--g-field-bg-on);
border-color: color-mix(in srgb, var(--h-product) 55%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--h-product) 20%, transparent);
}
.z-input[aria-invalid="true"], .z-select[aria-invalid="true"], .z-textarea[aria-invalid="true"],
.z-input.is-error, .z-select.is-error, .z-textarea.is-error, .z-control.is-error {
border-color: color-mix(in srgb, var(--g-down) 60%, transparent);
}
.z-input[aria-invalid="true"]:focus, .z-textarea[aria-invalid="true"]:focus,
.z-control.is-error:focus-within, .z-input.is-error:focus {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-down) 18%, transparent);
}
.z-input:disabled, .z-select:disabled, .z-textarea:disabled, .z-control.is-disabled {
opacity: .55; cursor: not-allowed; background: var(--g-well-bg);
}
.z-input[readonly] { background: var(--g-well-bg); }
.z-textarea { padding: 10px 14px; min-block-size: 96px; resize: vertical; }
/* القائمةُ الأصليّة — سهمٌ مرسومٌ في جهة النهاية (يسارَ العربيّة). */
.z-select {
appearance: none; -webkit-appearance: none; cursor: pointer;
padding-inline-end: 38px; background-image: var(--g-chev);
background-repeat: no-repeat; background-position: right 12px center;
}
.z-select:dir(rtl) { background-position: left 12px center; }
.z-select option { background: var(--g-solid-pop); color: var(--g-ink); }
/* الحقلُ المركَّب: أيقونةٌ/لاحقةٌ + بلا إطار. */
.z-control { display: flex; align-items: center; gap: 8px; }
.z-control > input, .z-control > select {
flex: 1; min-inline-size: 0; block-size: 100%; min-block-size: calc(var(--z-h, var(--g-field-h)) - 2px);
border: 0; outline: none; background: transparent; color: inherit; font: inherit; padding: 0;
}
.z-control > svg { inline-size: 17px; block-size: 17px; flex: none; color: var(--g-ink-3); }
/* التاريخ — الحقلُ نفسُه، ومنتقي المتصفّح بنظام الألوان. */
.z-input[type="date"], .z-input[type="datetime-local"], .z-input[type="month"], .z-input[type="time"] {
font-variant-numeric: tabular-nums;
}
.z-input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.z-input:hover::-webkit-calendar-picker-indicator { opacity: .85; }
/* خانةُ الاختيار والزرُّ الدائريّ بلون المنتَج. */
.z-check { accent-color: var(--h-product); inline-size: 17px; block-size: 17px; cursor: pointer; }
/* مجموعةُ حقولٍ بعنوان — بئرٌ داخل البطاقة لا بطاقةٌ داخل بطاقة. */
.z-fieldset {
margin: 0; padding: 14px 16px 16px; border-radius: 16px; min-inline-size: 0;
border: 1px solid var(--g-card-edge); background: var(--g-well-bg);
}
.z-fieldset > legend { padding: 0 6px; font-size: 13.5px; font-weight: 600; color: var(--g-ink); }
/* ── ١٢.٣ الجدول ── حاويةٌ زجاجيّة · رأسٌ هادئ · تحويمُ صفّ · رأسٌ لاصق · صفُّ مجموع */
/* ⚠️ الحاويةُ بلا `backdrop-filter`: الإطارُ خلفها مُضبَّبٌ أصلاً، والفلترُ
على حاويةٍ تُمرَّر يكسر كلَّ قائمةٍ `position:fixed` داخل صفوفها. */
.z-table-wrap {
box-sizing: border-box; overflow: auto; border-radius: 18px;
background: var(--g-card-bg); border: 1px solid var(--g-card-edge);
box-shadow: inset 0 1px 0 var(--g-hi), 0 12px 30px rgb(var(--g-tint) / .08);
}
.z-table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; color: var(--g-ink); }
.z-table th {
text-align: start; font-size: 12.5px; font-weight: 500; color: var(--g-ink-3);
padding: 11px 16px; background: var(--g-th-bg); border-block-end: 1px solid var(--g-line);
white-space: nowrap; text-transform: none;
}
.z-table td { padding: 13px 16px; border-block-end: 1px solid var(--g-line); vertical-align: middle; }
.z-table tbody tr:last-child td { border-block-end: 0; }
.z-table tbody tr { transition: background-color .12s ease; }
.z-table tbody tr:hover { background: var(--g-row-hover); }
.z-table tbody tr[aria-selected="true"], .z-table tbody tr.is-selected {
background: color-mix(in srgb, var(--h-product) 8%, transparent);
}
.z-table--sticky thead th {
position: sticky; inset-block-start: 0; z-index: 1;
-webkit-backdrop-filter: var(--g-panel-blur); backdrop-filter: var(--g-panel-blur);
}
.z-table--dense th { padding: 8px 14px; }
.z-table--dense td { padding: 9px 14px; font-size: 13.5px; }
/* الأرقامُ في نهاية الخانة، جدوليّةً — والريالُ داخل صندوقها (§٠-٢). */
.z-num, .z-table .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.z-table tfoot td, .z-table tr.is-total td {
background: var(--g-well-bg); font-weight: 600; border-block-start: 1px solid var(--g-line); border-block-end: 0;
}
/* ── ١٢.٤ شارةُ الحالة ── صبغةٌ ناعمةٌ بنقطة؛ المعنى واحدٌ في كلّ المنتَجات */
.z-status {
display: inline-flex; align-items: center; gap: 6px; min-block-size: 24px;
padding: 0 9px; border-radius: var(--g-r-status); box-sizing: border-box;
font-family: inherit; font-size: 12px; font-weight: 500; line-height: 1.4;
white-space: nowrap; background: var(--g-muted-bg); color: var(--g-muted);
}
.z-status::before {
content: ""; inline-size: 6px; block-size: 6px; border-radius: 3px; flex: none;
background: currentColor; opacity: .9;
}
.z-status--plain::before { display: none; }
.z-status--ok { background: var(--g-up-bg); color: var(--g-up); }
.z-status--warn { background: var(--g-warn-bg); color: var(--g-warn); }
.z-status--bad { background: var(--g-down-bg); color: var(--g-down); }
.z-status--info { background: var(--g-info-bg); color: var(--g-info); }
.z-status--neutral { background: var(--g-muted-bg); color: var(--g-muted); }
/* لونُ المنتَج — للوسم والعدّ فقط، **لا للحالة** (لا يعني نجاحاً ولا خطراً). */
.z-status--accent { background: var(--h-product-soft); color: var(--h-product-ink); }
/* ── ١٢.٥ الألسنة والمقاطع ── قرصٌ أبيضُ على زجاج (`.z-seg` في §١٠) */
.z-seg > :hover:not([aria-pressed="true"]):not([aria-selected="true"]):not([aria-checked="true"]):not(.is-on) { color: var(--g-ink); }
.z-seg > [aria-pressed="true"], .z-seg > [aria-selected="true"],
.z-seg > [aria-checked="true"], .z-seg > .is-on { font-weight: 500; }
.z-seg--block { display: flex; }
.z-seg--block > * { flex: 1; justify-content: center; }
.z-seg--lg > * { min-block-size: 40px; font-size: 14px; padding: 0 16px; }
.z-seg-n { font-size: 11.5px; font-weight: 600; color: var(--g-ink-3); margin-inline-start: 6px; font-variant-numeric: tabular-nums; }
.z-seg > [aria-selected="true"] .z-seg-n, .z-seg > .is-on .z-seg-n { color: var(--h-product-ink); }
/* ── ١٢.٦ النافذةُ والدرج ── زجاجٌ قويّ فوق حجابٍ معتّم */
.z-scrim {
position: fixed; inset: 0; z-index: var(--z-scrim-z, 60); border: 0;
background: var(--g-scrim);
-webkit-backdrop-filter: var(--g-scrim-filter); backdrop-filter: var(--g-scrim-filter);
}
/* ⚠️ النافذةُ تحمل ضبابيّتَها على نفسِها (تُمرَّر حين تطول) — فما فيها من
قائمةٍ `position:fixed` يُرسَم بـportal إلى `` لا داخلَها. */
.z-dialog, .z-drawer {
box-sizing: border-box; color: var(--g-ink); font-family: var(--g-font);
background: var(--g-dialog-bg); border: 1px solid var(--g-pop-edge);
-webkit-backdrop-filter: var(--g-pop-blur); backdrop-filter: var(--g-pop-blur);
box-shadow: var(--g-shadow-dialog), inset 0 1px 0 var(--g-hi);
}
.z-dialog {
inline-size: min(var(--z-w, 560px), calc(100vw - 32px)); max-block-size: calc(100dvh - 48px);
overflow: auto; border-radius: var(--g-r-dialog); padding: 24px;
}
.z-dialog-h { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 18px; }
.z-dialog-h > :first-child { flex: 1; min-inline-size: 0; }
.z-dialog-t { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.5; }
.z-dialog-s { margin: 2px 0 0; font-size: 13.5px; color: var(--g-ink-3); }
.z-dialog-f {
display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center;
margin: 22px -24px -24px; padding: 14px 24px; border-block-start: 1px solid var(--g-line);
background: var(--g-well-bg); border-end-start-radius: inherit; border-end-end-radius: inherit;
}
.z-drawer {
position: fixed; z-index: calc(var(--z-scrim-z, 60) + 1);
inset-block: 12px; inset-inline-end: 12px; inline-size: min(var(--z-w, 480px), calc(100vw - 24px));
border-radius: 22px; overflow: auto; padding: 22px;
}
.z-x { /* زرُّ الإغلاق — مربّعٌ زجاجيٌّ صغير */
inline-size: 36px; block-size: 36px; flex: none; display: grid; place-items: center;
border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--g-ink-2);
cursor: pointer; padding: 0;
}
.z-x:hover { background: var(--g-hover); color: var(--g-ink); border-color: var(--g-chip-edge); }
.z-x svg { inline-size: 18px; block-size: 18px; }
@media (max-width: 640px) {
.z-dialog { padding: 18px; border-radius: 20px; }
.z-dialog-f { margin: 18px -18px -18px; padding: 12px 18px; }
.z-drawer { inset: auto 8px 8px 8px; inline-size: auto; max-block-size: 88dvh; border-radius: 20px; }
}
/* ── ١٢.٧ القوائمُ والمنتقياتُ والتلميح ── */
.z-pop {
box-sizing: border-box; min-inline-size: 180px; padding: 6px;
border-radius: var(--g-r-pop); border: 1px solid var(--g-pop-edge);
background: var(--g-pop-bg); color: var(--g-ink); font-family: var(--g-font); font-size: 14px;
-webkit-backdrop-filter: var(--g-pop-blur); backdrop-filter: var(--g-pop-blur);
box-shadow: var(--g-shadow-pop), inset 0 1px 0 var(--g-hi);
}
.z-pop-item {
display: flex; align-items: center; gap: 10px; inline-size: 100%; box-sizing: border-box;
min-block-size: 38px; padding: 0 10px; border-radius: 9px; border: 0;
background: transparent; color: inherit; font: inherit; text-align: start;
text-decoration: none; cursor: pointer; outline: none;
}
.z-pop-item:hover, .z-pop-item:focus-visible, .z-pop-item[data-highlighted],
.z-pop-item[data-selected="true"] { background: var(--g-pop-hover); }
.z-pop-item[aria-current="true"], .z-pop-item[aria-current="page"], .z-pop-item[data-state="checked"],
.z-pop-item[role="option"][aria-selected="true"] {
background: var(--h-product-soft); color: var(--h-product-ink); font-weight: 500;
}
.z-pop-item[data-disabled], .z-pop-item:disabled { opacity: .5; pointer-events: none; }
.z-pop-item--danger { color: var(--g-down); }
.z-pop-item svg { inline-size: 16px; block-size: 16px; flex: none; color: var(--g-ink-3); }
.z-pop-sep { block-size: 1px; background: var(--g-line); margin: 6px 4px; border: 0; }
.z-pop-label { padding: 6px 10px 4px; margin: 0; font-size: 12px; font-weight: 500; color: var(--g-ink-3); }
.z-tip {
box-sizing: border-box; max-inline-size: 280px; padding: 6px 10px; border-radius: 9px;
background: var(--g-tip-bg); color: var(--g-tip-ink); font-family: var(--g-font);
font-size: 12.5px; font-weight: 500; line-height: 1.55;
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
box-shadow: 0 8px 22px rgb(var(--g-tint) / .22);
}
/* ── ١٢.٨ الإشعار (toast) ── */
.z-toast {
display: flex; align-items: flex-start; gap: 10px; box-sizing: border-box;
min-inline-size: 260px; max-inline-size: min(420px, calc(100vw - 32px));
padding: 12px 14px; border-radius: 16px; border: 1px solid var(--g-pop-edge);
background: var(--g-pop-bg); color: var(--g-ink); font-family: var(--g-font); font-size: 14px; line-height: 1.6;
-webkit-backdrop-filter: var(--g-pop-blur); backdrop-filter: var(--g-pop-blur);
box-shadow: var(--g-shadow-pop), inset 0 1px 0 var(--g-hi);
}
.z-toast::before {
content: ""; inline-size: 8px; block-size: 8px; border-radius: 4px; flex: none;
margin-block-start: 8px; background: var(--z-toast-c, var(--h-product));
}
.z-toast--ok { --z-toast-c: var(--g-up); }
.z-toast--bad { --z-toast-c: var(--g-down); }
.z-toast--warn { --z-toast-c: var(--g-warn); }
/* ── ١٢.٩ الحالةُ الفارغة ── سطرٌ واحد + فعلٌ أساسيٌّ واحد */
.z-empty {
display: grid; justify-items: center; gap: 8px; padding: 40px 20px; text-align: center;
}
.z-empty-ic {
inline-size: 52px; block-size: 52px; border-radius: 16px; display: grid; place-items: center;
background: var(--h-product-soft); color: var(--h-product-ink); margin-block-end: 6px;
box-shadow: inset 0 1px 0 var(--g-hi);
}
.z-empty-ic svg { inline-size: 24px; block-size: 24px; }
.z-empty-t { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--g-ink); }
.z-empty-s { margin: 0; font-size: 13.5px; color: var(--g-ink-3); max-inline-size: 46ch; }
.z-empty > .z-btn { margin-block-start: 8px; }
/* ── ١٢.١٠ التقويم (منتقي التاريخ) ── */
.z-cal { display: grid; grid-template-columns: repeat(7, 36px); gap: 2px; font-size: 13px; }
.z-cal-wd { block-size: 28px; display: grid; place-items: center; font-size: 11.5px; color: var(--g-ink-3); }
.z-cal-day {
inline-size: 36px; block-size: 36px; display: grid; place-items: center; border-radius: 10px;
border: 0; background: transparent; color: var(--g-ink); font: inherit; cursor: pointer;
font-variant-numeric: tabular-nums;
}
.z-cal-day:hover { background: var(--g-pop-hover); }
.z-cal-day.is-out { color: var(--g-ink-3); opacity: .6; }
.z-cal-day.is-today { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--h-product) 60%, transparent); }
.z-cal-day[aria-selected="true"], .z-cal-day.is-on {
background: var(--h-product-grad); color: var(--h-product-on); font-weight: 600;
box-shadow: 0 6px 14px var(--h-product-glow);
}
.z-cal-day:disabled { opacity: .35; cursor: not-allowed; }
/* ── ١٢.١١ الترقيم ── */
.z-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--g-ink-3); }
.z-pager-b {
min-inline-size: 36px; block-size: 36px; padding: 0 10px; box-sizing: border-box;
display: inline-grid; place-items: center; border-radius: 10px;
border: 1px solid var(--g-chip-edge); background: var(--g-chip-bg); box-shadow: inset 0 1px 0 var(--g-hi);
color: var(--g-ink); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; text-decoration: none;
}
.z-pager-b:hover:not(:disabled) { background: var(--g-hover-2); }
.z-pager-b[aria-current="page"], .z-pager-b.is-on {
background: var(--g-sel); color: var(--h-product-ink); font-weight: 600; box-shadow: var(--g-sel-shadow);
}
.z-pager-b:disabled { opacity: .45; cursor: not-allowed; }
/* ── ١٢.١٢ الهيكلُ أثناء التحميل ── لمعةٌ تمرّ، وتسكن مع «قلّل الحركة» */
.z-skel {
display: block; border-radius: 8px; min-block-size: 12px;
background: linear-gradient(90deg, var(--g-skel) 0%, var(--g-skel-hi) 45%, var(--g-skel) 90%) var(--g-skel);
background-size: 300% 100%; animation: z-shimmer 1.5s ease-in-out infinite;
}
@keyframes z-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .z-skel { animation: none; background: var(--g-skel); } }
/* ── ١١. التركيز والحركة ──────────────────────────────────────────── */
.z-tab:focus-visible, .z-side-a:focus-visible, .z-btn:focus-visible, .z-chip:focus-visible,
.z-iconbtn:focus-visible, .z-seg > :focus-visible, .z-brand:focus-visible, .z-me:focus-visible,
.z-pager-b:focus-visible, .z-x:focus-visible, .z-cal-day:focus-visible {
outline: 2px solid var(--h-product-ink); outline-offset: 2px;
}
.z-pop-item:focus-visible { outline: 2px solid var(--h-product-ink); outline-offset: -2px; }
.z-tab, .z-side-a, .z-btn, .z-chip, .z-iconbtn, .z-pager-b, .z-pop-item, .z-seg > * {
transition: background-color .15s ease, box-shadow .15s ease, color .15s ease, filter .15s ease;
}
@media (prefers-reduced-motion: reduce) {
.z-tab, .z-side-a, .z-btn, .z-chip, .z-iconbtn, .z-pager-b, .z-pop-item, .z-seg > *,
.z-input, .z-select, .z-textarea, .z-control { transition: none; }
}
@media print {
.z-backdrop, .z-scrim { display: none; }
.z-frame::before, .z-tabs::before, .z-side::before, .z-card::before {
-webkit-backdrop-filter: none; backdrop-filter: none; background: #FFFFFF; }
.z-table-wrap, .z-dialog, .z-pop { background: #FFFFFF; box-shadow: none;
-webkit-backdrop-filter: none; backdrop-filter: none; }
}