/* ======================================================================
نظام تصميم هادئ — لون أساسي واحد + رمادي محايد. الدلالة اللونية
(نجاح/تحذير/خطر) تظهر كنقطة ونص فقط، لا كتعبئة كاملة لبطاقة أو شارة.
====================================================================== */
:root, [data-theme-mode="light"] {
--primary-rgb: 13, 122, 111; /* تركواز العلامة — يُستخدم بشُح لإجراء واحد بارز بكل شاشة */
--secondary-rgb: 100, 116, 139; /* رمادي محايد بدل لون ثانٍ ينافس */
--success-rgb: 22, 101, 52;
--warning-rgb: 154, 52, 18;
--danger-rgb: 153, 27, 27;
--info-rgb: 10, 91, 83;
/* اللوحة واحدة مع الموقع العام — القيم منقولة من public-rq.css حرفياً
لا مُقارَبة بالعين. الفرق قبلها كان عائلتين: النظام على سليت بارد
(#0F172A/#F7F8FA) والموقع على أخضر عميق وورقٍ دافئ. التركواز وحده
كان متطابقاً، فبدا النظام قريباً من العلامة وليس منها. */
--ink: #10231F; /* = --rq-ink — 14٫75:1 على الورق، 16٫38:1 على البطاقة */
--ink-2: #3A544D; /* = --rq-ink-2 — 7٫40:1 على الورق */
--muted: #4F6259; /* نص ثانوي — 6٫51:1 على الأبيض (كان 6٫12 على السليت) */
--muted-2: #7F9189; /* نص هامشي/أيقونات غير نشطة */
--line: #E3DDCB; /* = --rq-line — حدود زخرفية، لا تحمل معنى */
--line-2: #EDE8DA; /* = --rq-line-2 — فواصل خفيفة */
/* حدّ العناصر التفاعلية — الحقل والزر الثانوي حدّهما هو الإشارة الوحيدة لوجودهما،
فيلزمه 3:1 (WCAG 1.4.11). القياس: #7F9189 على الأبيض = 3٫33:1 */
--line-ui: #7F9189;
--canvas: #F5F3EC; /* = --rq-paper — ورق العلامة، لا رمادي بارد */
--surface: #FFFFFF; /* خلفية البطاقة — بيضاء في اللوحتين */
/* styles.css يبني 249 خلفية على var(--custom-white) — ومنها القوائم
المنسدلة والحقول — لكنه لا يعرّفه في الوضع الفاتح. الإعلان يسقط
لقيمة غير صالحة فتصير الخلفية شفافة، وتظهر القائمة المنسدلة
وكأن نصّها معلّق فوق الصفحة. تعريفٌ واحد يصحّح المواضع كلها. */
--custom-white: #FFFFFF;
--accent: #0D7A6F; /* = --rq-teal — كان متطابقاً قبل التوحيد */
--accent-ink: #0A5B53; /* = --rq-teal-d — 7٫97:1 على الأبيض */
--accent-50: #F1F7F6; /* = --rq-teal-wash */
--accent-100: #DDEBE8;
--success: #166534; --success-dot: #22C55E;
--warning: #9A3412; --warning-dot: #F59E0B;
--danger: #991B1B; --danger-dot: #EF4444;
/* الذهب لونان لا واحد: #E9C46A على الداكن فقط (1٫9:1 على الأبيض — يختفي)،
و#8A6A16 على الفاتح فقط. خلطهما هو أشيع خطأ في نقل لوحةٍ داكنة إلى شاشة بيضاء. */
--gold: #8A6A16; --gold-dot: #C9A227; /* = --rq-gold-ink / --rq-gold-2 */
--accent-dot:#0D7A6F; --mute-dot:#7F9189;
--r-sm:8px; --r-md:10px; --r-lg:12px;
--alert-info-bg:#F1F7F6; --alert-success-bg:#F0FBF4; --alert-warning-bg:#FFF8EE; --alert-danger-bg:#FDF3F3;
--station-bg:#0A2E28; --station-bg-strong:#06201E; /* = --rq-void-2 / --rq-void */
--shadow-card: none;
}
[data-theme-mode="dark"] {
/* primary-rgb يبقى كما هو — يُستخدم كخلفية معبّأة بنص أبيض، وتفتيحه يكسر التباين */
/* الوضع الداكن يصير «القبو» نفسه الذي في الموقع العام، لا سليت أغمق */
--ink:#F2F7F5; --ink-2:#D5E4DF; --muted:#93ADA5; --muted-2:#7A948C;
--line:#1B3C35; --line-2:#15332D; --canvas:#06201E; --surface:#0A2E28;
--line-ui:#7A948C; /* على سطح البطاقة الداكن = 4٫49:1 */
--accent-ink:#2FBFAE; --accent-50:rgba(13,122,111,.20); --accent-100:rgba(13,122,111,.30);
/* الألوان الدلالية كنص: تُستبدل بنسخة فاتحة تُقرأ على خلفية داكنة بدل النسخة الغامقة المخصصة للأبيض */
--success:#4ADE80; --warning:#FBBF24; --danger:#F87171; --gold:#E9C46A;
/* نفس الاستبدال لمتغيرات بوتستراب الخام (text-danger, bg-warning-transparent...) */
--success-rgb: 74, 222, 128; --warning-rgb: 251, 191, 36; --danger-rgb: 248, 113, 113; --info-rgb: 79, 211, 196;
--alert-info-bg:rgba(13,122,111,.14); --alert-success-bg:rgba(34,197,94,.10);
--alert-warning-bg:rgba(245,158,11,.12); --alert-danger-bg:rgba(239,68,68,.12);
--station-bg:#08251F; --station-bg-strong:#041917;
}
/* ---------- الطباعة العربية ---------- */
html, body { background:var(--canvas); }
body, .app-sidebar, .app-header, .btn, .form-control, .form-select,
.table, .card, .dropdown-menu, h1, h2, h3, h4, h5, h6 {
font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif !important;
}
body { font-size: 14px; letter-spacing: 0; color:var(--ink); }
.table { font-size: 13.5px; }
.fs-13 { font-size: 13px !important; }
.fs-12 { font-size: 12.5px !important; }
h1,h2,h3,h4,h5,h6,.fw-semibold { letter-spacing: 0 !important; color:var(--ink-2); }
.text-muted { color:var(--muted) !important; }
a { color:var(--accent-ink); }
.num { font-variant-numeric: tabular-nums; direction: ltr; display: inline-block; unicode-bidi: embed; }
/* .num صُمّمت لعنصر داخل نص عربي: تعزل الرقم باتجاه لاتيني،
ولذلك تحتاج display:inline-block. لكنها تُستعمل كذلك على 80 خلية
عبر الشاشات — وعندها تُخرج الخلية من تخطيط الجدول:
تفقد table-cell فتنشأ فجوات بين الأعمدة لا تغطيها خلية، فتظهر خلفية
البطاقة من خلالها ويبدو تلوين الصف عند التحويم «مقطوعاً».
الخلية تستعيد طبيعتها، والعزل الاتجاهي يبقى. */
td.num, th.num { display: table-cell; }
/* ---------- الشعار — علامة صلبة واحدة بدل تدرّج ---------- */
.rifq-logo { display:flex; align-items:center; gap:.55rem; text-decoration:none; }
.rifq-logo .mark {
width:36px; height:36px; border-radius:9px; display:grid; place-items:center;
background:var(--accent); color:#fff; font-weight:700; font-size:15px; flex:0 0 auto;
}
/*
الشعار المرفوع بدل حرف العلامة (partials/brand-mark.blade.php).
الارتفاع مقيَّد والعرض حرّ: الشعار الإداري أفقيّ عادةً، وتقييد العرض
يضغطه أو يقصّه. وmax-width سقفٌ لا مقاس — الشريط الجانبي عرضه محدود،
وشعارٌ بنسبة 1:6 كان سيدفع النصّ خارجه.
ونسختان لا واحدة: أرضية الشريط الجانبي داكنة **دائماً** بينما الترويسة
تتبع الوضع، فشعارٌ بحروفٍ داكنة يُقرأ في الثانية ويذوب في الأولى.
والتبديل بـCSS لا بسكربتٍ يغيّر src بعد الرسم — ذاك يُنتج ومضة
الشعار الخطأ في كل تحميل، ويُحمّل الملفين معاً.
*/
.rifq-logo .mark-img {
width:auto; height:36px; max-width:150px;
object-fit:contain; flex:0 0 auto;
}
.rifq-logo .mark-img--dark { display:none; }
.app-sidebar .rifq-logo .mark-img--light { display:none; }
.app-sidebar .rifq-logo .mark-img--dark { display:block; }
html[data-theme-mode="dark"] .rifq-logo .mark-img--light { display:none; }
html[data-theme-mode="dark"] .rifq-logo .mark-img--dark { display:block; }
/* لا نسخة فاتحة مرفوعة: الداكنة هي الوحيدة، فتُعرض في الموضعين */
.rifq-logo .mark-img--only { display:block; }
.rifq-logo .txt { line-height:1.15; }
.rifq-logo .txt b { display:block; font-size:16.5px; color:var(--ink-2); font-weight:700; }
.rifq-logo .txt small { font-size:10.5px; color:var(--muted); letter-spacing:.2px; }
[data-toggled="icon-overlay-close"] .rifq-logo .txt { display:none; }
/* ---------- شاشة التحميل — بهوية العلامة بدل لودر القالب البنفسجي ---------- */
#loader{ position:fixed; inset:0; width:100%; height:100%; background:var(--canvas);
display:flex; justify-content:center; align-items:center; z-index:9999; }
.rifq-loader{ text-align:center; }
.rifq-loader-mark{ display:grid; place-items:center; width:52px; height:52px; margin:0 auto 16px;
border-radius:14px; background:var(--accent); color:#fff; font-weight:700; font-size:20px;
animation:rifq-pulse 1.15s ease-in-out infinite; }
.rifq-loader-ring{ display:block; width:26px; height:26px; margin:0 auto; border-radius:50%;
border:3px solid var(--line); border-top-color:var(--accent); animation:rifq-spin .8s linear infinite; }
.rifq-loader-txt{ display:block; margin-top:12px; font-size:12.5px; color:var(--muted); font-weight:600; }
@keyframes rifq-pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(.86); opacity:.75; } }
@keyframes rifq-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .rifq-loader-mark,.rifq-loader-ring{ animation:none; } }
/* ---------- البطاقات — حد رفيع بدل الظل ---------- */
.card.custom-card{ box-shadow:none!important; border:1px solid var(--line)!important;
border-radius:var(--r-md)!important; background:var(--surface); }
.card.custom-card .card-header{ background:transparent; border-bottom:1px solid var(--line-2); padding:.9rem 1.15rem; }
.card.custom-card .card-footer{ background:var(--canvas); border-top:1px solid var(--line-2); }
/* ---------- بطاقات المؤشرات — محايدة، تمايز عبر مقبض علوي رفيع فقط ---------- */
.kpi{ border:1px solid var(--line)!important; border-radius:var(--r-md); overflow:hidden;
position:relative; background:var(--surface); }
.kpi .card-body{ padding:1.05rem 1.15rem; }
.kpi .kpi-val{ font-size:26px; font-weight:700; line-height:1; margin:0; color:var(--ink); }
.kpi .kpi-lbl{ font-size:12px; font-weight:600; color:var(--muted); margin-bottom:.6rem; display:block; }
.kpi .kpi-sub{ font-size:11.5px; color:var(--muted); }
.kpi-icn{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
background:var(--canvas); color:var(--muted); font-size:16px; }
.kpi-ok::before,.kpi-warn::before,.kpi-bad::before,.kpi-info::before,.kpi-neut::before{
content:""; position:absolute; top:0; inset-inline-start:0; width:100%; height:3px; }
.kpi-ok::before{ background:var(--success-dot); }
.kpi-warn::before{ background:var(--warning-dot); }
.kpi-bad::before{ background:var(--danger-dot); }
.kpi-info::before{ background:var(--accent-dot); }
.kpi-neut::before{ background:var(--mute-dot); opacity:.5; }
.kpi-bad .kpi-val{ color:var(--danger); }
.kpi-warn .kpi-val{ color:var(--warning); }
.kpi-ok .kpi-icn{ color:var(--success); }
.kpi-warn .kpi-icn{ color:var(--warning); }
.kpi-bad .kpi-icn{ color:var(--danger); }
.kpi-info .kpi-icn{ color:var(--accent-ink); }
/* ---------- شارة الحالة — نقطة ونص فقط، بلا تعبئة ---------- */
.st{ display:inline-flex; align-items:center; gap:.4rem; padding:.15rem .05rem;
border-radius:20px; font-size:11.5px; font-weight:600; white-space:nowrap; background:transparent; }
.st::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.st-ok{ color:var(--success); }
.st-wait{ color:var(--accent-ink); }
.st-warn{ color:var(--warning); }
.st-bad{ color:var(--danger); }
.st-mute{ color:var(--muted); }
.st-gold{ color:var(--gold); }
/* على خلفية داكنة صلبة (صف مُحدَّد / محطة) يتحول النص والنقطة للأبيض بدل تعارض الألوان.
.table-active كان مشمولاً هنا وهو خطأ: خلفيته --bs-table-active-bg = --accent-100
(#D8ECEC فاتح)، فالأبيض عليه 1٫23:1. وألوان .st-* نفسها تكفي هناك بلا تدخّل —
قِيست: الخطر 5٫36:1 والتحذير 4٫83:1 على الخلفية نفسها. */
.list-group-item.active .st,.station .st{ color:#fff!important; }
/* ---------- التقنيع ---------- */
.masked{ font-family:monospace; letter-spacing:1px; color:var(--muted); }
.reveal{ cursor:pointer; border:0; background:transparent; color:var(--accent-ink);
font-size:11px; padding:0 .3rem; text-decoration:underline; text-underline-offset:2px; }
/* ---------- محطات المال — ليدجر محايد، لا قوس قزح ---------- */
.stations{ display:flex; gap:6px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
.station{ flex:1 1 0; min-width:118px; border-radius:var(--r-sm); padding:.7rem .6rem; text-align:center;
background:var(--station-bg)!important; color:#fff; }
.station:last-child{ background:var(--station-bg-strong)!important; }
.station b{ display:block; font-size:12px; margin-bottom:.25rem; opacity:.85; font-weight:600; }
.station span{ font-size:16px; font-weight:700; }
.station i{ display:block; font-size:10.5px; opacity:.7; margin-top:.2rem; font-style:normal; }
/* ---------- محطة ارتفعت عمّا قبلها ----------
سلسلة المال تنازلية بطبعها: لا يُخصَّص أكثر ممّا حُصِّل، ولا يُصرف أكثر
ممّا خُصِّص. الارتفاع ليس بالضرورة خطأً (رصيد مُرحَّل يفسّره) لكنه الحدث
الوحيد في هذه السلسلة الذي يستحق تفسيراً — وكان يُرسم كصندوق محايد
لا يُميّزه شيء عن التدفق السليم. */
.station-up{ position:relative; box-shadow:inset 0 0 0 1px var(--gold-dot); }
/* العلامة أيقونة حقيقية من عائلة remixicon لا محرف في content:
الأخيرة تعتمد على ترميز الملف وتُسقَط بصمت إن اختلّ، والعلامة هنا
هي كل ما يميّز المحطة المنعكسة فلا تُترك لحظّ الترميز. */
.station-up > .station-flag{
position:absolute; top:4px; inset-inline-end:6px;
font-size:12px; line-height:1; color:var(--gold-dot); }
.station-up b{ opacity:1; }
.stations-note{ display:flex; align-items:flex-start; gap:.5rem; }
/* ---------- درجة التوثيق / شريط تقدم ---------- */
.doc-bar{ height:6px; border-radius:6px; background:var(--line-2); overflow:hidden; width:74px;
display:inline-block; vertical-align:middle; }
.doc-bar > i{ display:block; height:100%; border-radius:6px; }
.mini-prog{ height:5px; border-radius:5px; background:var(--line-2); overflow:hidden; }
.mini-prog > i{ display:block; height:100%; }
/* ---------- تعبئة الشريط بدرجة الخطورة ----------
عرض الشريط قيمة محسوبة لكل صف فيبقى في style ولا مفرّ، أمّا لونه فدلالة
ثابتة كانت تُكتب مضمَّنةً في كل صف من شاشتي الجودة والتدقيق (background:
var(--danger) وأخواتها، عشرات المرّات). أربع درجات تكفيها جميعاً. */
.doc-bar > i.bar-bad, .mini-prog > i.bar-bad { background:var(--danger); }
.doc-bar > i.bar-warn, .mini-prog > i.bar-warn { background:var(--warning); }
.doc-bar > i.bar-gold, .mini-prog > i.bar-gold { background:var(--gold); }
.doc-bar > i.bar-ok, .mini-prog > i.bar-ok { background:var(--accent-ink); }
/* ---------- عناوين الأقسام ---------- */
.sec-title{ display:flex; align-items:center; gap:.5rem; font-size:14.5px; font-weight:600; color:var(--ink-2); }
.sec-title::before{ content:""; width:3px; height:15px; border-radius:3px; background:var(--accent); }
/* ---------- صفوف قوائم زمنية ---------- */
.alert-row{ display:flex; align-items:center; gap:.7rem; padding:.62rem .2rem; border-bottom:1px solid var(--line-2); }
.alert-row:last-child{ border-bottom:0; }
.alert-row .dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
/* ---------- تنبيهات هادئة — حد جانبي رفيع بدل تعبئة صارخة ---------- */
.alert{ border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--canvas);
border-inline-start-width:3px; color:var(--ink-2); }
.alert i:first-child{ opacity:.9; }
.alert-info{ border-inline-start-color:var(--accent); background:var(--alert-info-bg); }
.alert-info i:first-child{ color:var(--accent-ink); }
.alert-success{ border-inline-start-color:var(--success-dot); background:var(--alert-success-bg); }
.alert-success i:first-child{ color:var(--success); }
.alert-warning{ border-inline-start-color:var(--warning-dot); background:var(--alert-warning-bg); }
.alert-warning i:first-child{ color:var(--warning); }
.alert-danger{ border-inline-start-color:var(--danger-dot); background:var(--alert-danger-bg); }
.alert-danger i:first-child{ color:var(--danger); }
.alert-dark{ background:var(--ink-2)!important; color:#fff!important; border:0!important; }
/* ---------- الشريط الجانبي — أبيض هادئ، لون واحد لحالة التفعيل ---------- */
.app-sidebar{ background:var(--surface)!important; border-inline-end:1px solid var(--line)!important; box-shadow:none!important; }
.app-sidebar .main-sidebar-header{ background:var(--surface)!important; border-bottom:1px solid var(--line-2)!important; }
.pagination .page-item.active .page-link{ background:var(--accent)!important; border-color:var(--accent)!important; color:#fff!important; }
.badge.bg-primary-transparent{ color:var(--accent-ink)!important; }
.app-sidebar .side-menu__item{ color:var(--muted)!important; border-radius:8px; margin:1px .5rem; padding-inline:.65rem; }
.app-sidebar .side-menu__item .side-menu__icon{ color:var(--muted-2)!important; font-size:16px; opacity:1!important; }
.app-sidebar .side-menu__item .side-menu__label{ font-size:13.5px; font-weight:500; }
.app-sidebar .side-menu__item:hover{ background:var(--canvas)!important; color:var(--ink-2)!important; }
.app-sidebar .side-menu__item:hover .side-menu__icon{ color:var(--ink-2)!important; }
.app-sidebar .side-menu__item.active,
.app-sidebar .slide.active > .side-menu__item{ background:var(--accent-50)!important; color:var(--accent-ink)!important; font-weight:600; }
.app-sidebar .side-menu__item.active .side-menu__icon,
.app-sidebar .slide.active > .side-menu__item .side-menu__icon,
.app-sidebar .side-menu__item .side-menu__label,
.app-sidebar .side-menu__item.active .side-menu__label,
.app-sidebar .slide.active > .side-menu__item .side-menu__label{ color:inherit!important; }
.app-sidebar .side-menu__item .side-menu__icon{ color:inherit!important; }
.app-sidebar .badge{ background:var(--canvas)!important; color:var(--muted)!important; border:1px solid var(--line); font-weight:600; font-size:10.5px; }
.app-sidebar .side-menu__item.active .badge{ background:var(--surface)!important; color:var(--accent-ink)!important; }
/* شارة/زر تحذير أحمر أو كهرماني معبّأين بلون ثابت وقابل للقراءة في الوضعين معاً بدل الاعتماد على متغيّرات النص الدلالية */
.badge.bg-danger{ background-color:#DC2626!important; color:#fff!important; }
.btn-warning{ background:#C2410C!important; border-color:#C2410C!important; color:#fff!important; }
.btn-warning:hover{ background:#9A3412!important; border-color:#9A3412!important; }
.btn:disabled,.btn.disabled{ opacity:.55; background:var(--line)!important; color:var(--muted)!important; border-color:var(--line)!important; }
/* ---------- المجموعات تُفتح وتُغلق (بنية القالب: has-sub / slide-menu) ----------
القالب يتكفّل بالفتح والطيّ والإزاحة ودوران السهم. ما يُضاف هنا ثلاثة
فروق فقط: اتجاه السهم في صفحة عربية، وأن رأس المجموعة يُقرأ كرأس لا
كشاشة، وعدّادُ ما تخفيه المجموعة وهي مطويّة. */
.app-sidebar .slide.has-sub{ padding:0; }
/* إزاحة البند عن رأس مجموعته — القالب يزيح 1.6rem وهي عريضة على شريط بأيقونات */
.app-sidebar .slide-menu.child1 li{ padding:0; padding-inline-start:.85rem; }
/* rotate(90deg) من القالب يفترض سهماً يشير يميناً؛ سهمُنا يشير أسفل */
.app-sidebar .slide.has-sub.open > .side-menu__item .side-menu__angle{ transform:rotate(180deg); }
.app-sidebar .side-menu__angle{ color:inherit!important; opacity:.7; transition:transform .18s ease; }
/* رأس المجموعة: لا تعبئة تفعيل — التفعيل لبند واحد لا لمجموعة كاملة */
.app-sidebar .slide.has-sub > .side-menu__item{ font-weight:600; }
.app-sidebar .slide.has-sub > .side-menu__item .side-menu__label{ font-size:13px; }
/* عدّاد المجموعة يظهر وهي مطويّة وحدها — مفتوحةً تُغني عنه شارات بنودها */
.app-sidebar .sub-count{ margin-inline-start:auto; margin-inline-end:1.15rem; font-size:10px; }
.app-sidebar .slide.has-sub.open > .side-menu__item .sub-count{ display:none; }
/* ---------- إخفاء الشريط الجانبي بالكامل ---------- */
[data-sidebar="hidden"] .app-sidebar{ display:none!important; }
[data-sidebar="hidden"] .main-content{ margin-inline-end:0!important; margin-right:0!important; }
[data-sidebar="hidden"] .app-header .main-header-container{ padding-inline-end:0!important; }
.sidemenu-toggle{ cursor:pointer; }
/* ---------- الرأس ---------- */
.app-header{ background:var(--surface)!important; border-bottom:1px solid var(--line)!important; box-shadow:none!important; }
.app-header .header-link{ color:var(--muted); }
.app-header .header-link:hover{ color:var(--ink-2); }
.app-header .header-icon-badge{ background:#DC2626!important; color:#fff!important; }
.header-role-label{ color:var(--muted)!important; }
[data-theme-mode="dark"] .text-primary{ color:var(--accent-ink)!important; }
/* ---------- الصور الرمزية — هوية واحدة محايدة بدل قوس قزح ---------- */
.avatar.bg-primary-transparent,.avatar.bg-secondary-transparent,.avatar.bg-success-transparent,
.avatar.bg-warning-transparent,.avatar.bg-danger-transparent,.avatar.bg-info-transparent{
background:var(--accent-50)!important; color:var(--accent-ink)!important; }
/* ---------- الأزرار ----------
القاعدة السابقة سطّحت كل صيغ «light» في مظهر واحد: خلفية بيضاء وحدّ
#8592A3 للجميع. كان قراراً لصالح الهدوء، لكنه ألغى التراتب — فزرّان
بأهمية مختلفة يظهران متطابقَين تماماً، ولا سبيل لقول «هذا أهم».
ثلاث درجات، وكلها ما تزال هادئة:
أساسي ← معبّأ بلون العلامة، واحد لكل شاشة
مُميَّز ← تعبئة تركوازية خافتة وحدّ بلون العلامة
ثانوي ← سطح محايد وحدّ شعري
ومعها إصلاح بنيوي يسري على كل زر في المنصة: المحاذاة كانت بالسطر
فتنحرف الأيقونة 2px فوق المركز البصري، والفجوة margin لا gap،
والأيقونة بحجم النص نفسه فتُقرأ حرفاً لا أيقونة. */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
font-weight:600; border-radius:8px; line-height:1.2;
transition:background-color .16s ease, border-color .16s ease, color .16s ease,
box-shadow .16s ease, transform .1s ease; }
.btn > i{ font-size:1.15em; line-height:1; flex:0 0 auto; margin:0!important; }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; box-shadow:none; }
/* styles.css يعرّف .btn.btn-sm بخصوصية (0,2,0) — تُطابَق لا تُنافَس */
.btn.btn-sm{ min-height:34px; padding:.3rem .8rem; font-size:12.5px; border-radius:8px; }
.btn.btn:not(.btn-sm):not(.btn-icon){ min-height:40px; padding:.45rem 1.05rem; border-radius:8px; }
/* أساسي */
.btn-primary{ background:var(--accent)!important; border-color:var(--accent)!important; color:#fff!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.14); }
.btn-primary:hover{ background:var(--accent-ink)!important; border-color:var(--accent-ink)!important;
box-shadow:0 2px 8px rgba(13,122,111,.22); }
/* مُميَّز — أهمّ من الثانوي، أهدأ من الأساسي */
.btn-primary-light,.btn-info-light{
background:var(--accent-50)!important; border:1px solid var(--accent-100)!important;
color:var(--accent-ink)!important; }
.btn-primary-light:hover,.btn-info-light:hover{
background:var(--accent-100)!important; border-color:var(--accent)!important;
color:var(--accent-ink)!important; }
/* ثانوي — سطح محايد وحدّ شعري لا صارخ */
.btn-light,.btn-secondary-light{
background:var(--surface)!important; border:1px solid var(--line)!important; color:var(--ink-2)!important; }
.btn-light:hover,.btn-secondary-light:hover{
background:var(--canvas)!important; border-color:var(--line-ui)!important; color:var(--ink-2)!important; }
/* دلالي خافت */
.btn-danger-light{ background:var(--alert-danger-bg)!important; border:1px solid rgba(239,68,68,.28)!important;
color:var(--danger)!important; }
.btn-danger-light:hover{ background:var(--alert-danger-bg)!important; border-color:var(--danger-dot)!important; }
.btn-success-light{ background:var(--alert-success-bg)!important; border:1px solid rgba(34,197,94,.28)!important;
color:var(--success)!important; }
.btn-success-light:hover{ border-color:var(--success-dot)!important; }
.btn-warning-light{ background:var(--alert-warning-bg)!important; border:1px solid rgba(245,158,11,.30)!important;
color:var(--warning)!important; }
.btn-warning-light:hover{ border-color:var(--warning-dot)!important; }
/* شبح — للإجراءات الثالثة: بلا حدّ حتى التحويم */
.btn-ghost{ background:transparent!important; border:1px solid transparent!important; color:var(--muted)!important; }
.btn-ghost:hover{ background:var(--canvas)!important; border-color:var(--line)!important; color:var(--ink-2)!important; }
.btn-secondary{ background:var(--muted)!important; border-color:var(--muted)!important; }
.btn.btn-icon.btn-sm{ width:34px; height:34px; padding:0; border-radius:8px; }
@media (prefers-reduced-motion: reduce){ .btn{ transition:none } .btn:active{ transform:none } }
/* ---------- عناصر النموذج ---------- */
.form-control,.form-select{ border-color:var(--line-ui); border-radius:8px; }
.form-control:hover,.form-select:hover{ border-color:var(--muted); }
.form-control:focus,.form-select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-50); }
.form-label{ color:var(--ink-2); font-size:13px; font-weight:600; }
/* خيارات القوائم المنسدلة — إصلاح .form-select option{background:transparent}
في قالب styles.css. قائمة النظام المنسدلة يرسمها المتصفح لا الصفحة، لكنه
يحترم لون خلفية الخيار: فأصبحت شفافةً يُرى خلفها محتوى الصفحة، والأسماء
تُقرأ فوق كلماتٍ أخرى. تظهر العلّة على ويندوز خاصة، وفي كل قائمة في
النظام لا في نموذج الطلب وحده — ولهذا موضع الإصلاح هنا لا في طبقة الزائر. */
.form-select option,
.form-control option{ background-color:var(--surface); color:var(--ink); }
.form-select option:checked,
.form-control option:checked{ background-color:var(--accent-50); color:var(--ink); }
/* الخيار المعطَّل («لا توجد خيارات معرّفة») يبقى مقروءاً لا شبحاً */
.form-select option:disabled,
.form-control option:disabled{ color:var(--muted); }
/* ---------- تبويبات ---------- */
.nav-tabs .nav-link{ color:var(--muted); border:0; border-bottom:2px solid transparent; font-weight:600; font-size:13.5px; }
.nav-tabs .nav-link.active{ color:var(--accent-ink)!important; border-bottom-color:var(--accent); background:transparent!important; }
/* ---------- النوافذ المنبثقة ---------- */
.modal-content{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 10px 40px rgba(15,23,42,.12); }
.modal-content, .modal-content .modal-body, .modal-content .modal-header, .modal-content .modal-footer{ color:var(--ink); }
.modal-header{ border-bottom:1px solid var(--line-2); }
.modal-footer{ border-top:1px solid var(--line-2); }
/* ---------- جدول ---------- */
.table > :not(caption) > * > *{ padding:.72rem .8rem; vertical-align:middle; border-color:var(--line-2); }
.table thead th{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase;
letter-spacing:.3px; white-space:nowrap; border-bottom:1px solid var(--line)!important; }
/* تلوين التحويم كان --canvas — وهو بعينه لون مساحة العمل خلف البطاقة.
فالصف المحوَّم عليه يأخذ لون الصفحة، فيبدو كأن خلفية الجدول انقطعت
بدل أن يُقرأ الصف مُبرَزاً داخل بطاقته. التحويم يحتاج لوناً يتمايز عن
البطاقة وعن الصفحة معاً: تلوين خفيف بلون العلامة. */
.table-hover>tbody>tr:hover>*{ background:var(--accent-50); }
.table .num{ white-space:nowrap; }
/* الصف نفسه — لا الخلايا فقط — قد يحمل خلفية بيضاء صلبة من القالب تتجاوز متغيّر bs-table-bg */
/* التعبئة على الخلايا وحدها: تلوين الصف وخلاياه معاً يضاعف الطبقة
فتغمق الأرضية ويهبط تباين النص الملوّن فوقها تحت 4.5:1 */
tr.table-danger{ background-color:transparent!important; }
.table-danger>*{ background-color:var(--alert-danger-bg)!important; --bs-table-bg:var(--alert-danger-bg)!important; color:var(--ink)!important; }
tr.table-warning{ background-color:transparent!important; }
.table-warning>*{ background-color:var(--alert-warning-bg)!important; --bs-table-bg:var(--alert-warning-bg)!important; color:var(--ink)!important; }
tr.table-light{ background-color:transparent!important; }
.table-light>*{ background-color:var(--canvas)!important; --bs-table-bg:var(--canvas)!important; color:var(--ink)!important; }
/* الجدول يلف داخل صندوقه فقط ولا يدفع الصفحة — إصلاح خلل اللفافة الأفقية */
.tbl-wrap{ overflow-x:auto; min-width:0; }
.tbl-wrap > .table{ min-width:980px; }
/* منع اللفافة الأفقية للصفحة كاملة (الخلل الذي كان في المنصة القديمة) */
.main-content .container-fluid > .row > [class*="col-"]{ min-width:0; }
/* ---------- التركيز بلوحة المفاتيح ----------
شاشة الدخول كانت الوحيدة التي تعرّف حلقة تركيز؛ داخل المنصة كان المستخدم
يعتمد حلقة المتصفح الافتراضية — رفيعة وبلون النظام، تضيع على أرضية فاتحة.
حلقة واحدة بلون العلامة لكل عنصر يمكن بلوغه بالمفتاح. */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.badge:focus-visible, .page-link:focus-visible, .dropdown-item:focus-visible,
[tabindex]:focus-visible, summary:focus-visible{
outline:3px solid var(--accent); outline-offset:2px; border-radius:6px;
box-shadow:none; }
.form-control:focus-visible,.form-select:focus-visible{ outline:none; }
.app-sidebar .side-menu__item:focus-visible{ outline-offset:-2px; }
/* ---------- هدف الوصلة الصغيرة (WCAG 2.5.8) ----------
شارة العدد في ترويسة البطاقة رابط حقيقي يفتح الطابور، وكان ارتفاعها 19px.
لا تُصغَّر مساحة اللمس لأن النص قصير. */
a.badge{ min-height:24px; min-width:24px; display:inline-flex;
align-items:center; justify-content:center; text-decoration:none; }
a.badge:hover{ filter:brightness(.94); }
/* ---------- هدف القفزة تحت الرأس الثابت ----------
الرأس مثبّت بارتفاع 68px، وروابط «#q0» كانت تُنزل البطاقة تحته فيختفي عنوانها. */
:target, [id][class*="col-"], .anchor-target{ scroll-margin-top:88px; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
/* ---------- تثبيت عمود الهوية عند اللف الأفقي ----------
جدول بخمسة أعمدة على شاشة 375px يلفّ أفقياً؛ بلا تثبيت يفقد القارئ
«أيّ صف أقرأ؟» بمجرد أن يسحب. العمود الأول (اسم/رمز البند) يبقى. */
@media (max-width:991.98px){
.tbl-lock thead th:first-child,
.tbl-lock tbody td:first-child{
position:sticky; inset-inline-start:0; z-index:2;
background:var(--surface); box-shadow:-1px 0 0 var(--line); }
.tbl-lock.table-hover>tbody>tr:hover>td:first-child{ background:var(--accent-50); }
}
/* ---------- صف ترتيبي: القدر خلفيةً لا شريطاً منفصلاً ----------
اسمٌ ومبلغٌ وحصةٌ في سطر واحد. الحصة تُرسم تعبئةً خلف السطر نفسه،
فتُقرأ بالمسح البصري ولا تستهلك سطراً ثانياً لكل صف. */
.rank-row{ position:relative; display:flex; align-items:center; gap:.6rem;
padding:.42rem .55rem; border-radius:6px; overflow:hidden;
border-bottom:1px solid var(--line-2); }
.rank-row:last-of-type{ border-bottom:0; }
/* التعبئة وحدها لا تبلغ 3:1 على سطح البطاقة في أي من الوضعين، فالمعنى
لا يُترك لها: حافة بلون العلامة بعرض 2px تحدّ المدى وتحمل الترميز،
والتعبئة تقويةٌ بصرية لا أكثر (WCAG 1.4.11). */
.rank-fill{ position:absolute; inset-block:0; inset-inline-start:0;
background:var(--accent-100); border-inline-end:2px solid var(--accent); z-index:0; }
[data-theme-mode="dark"] .rank-fill{ border-inline-end-color:var(--accent-ink); }
.rank-name,.rank-val{ position:relative; z-index:1; }
.rank-name{ flex:1 1 auto; font-size:12.5px; font-weight:600; color:var(--ink-2);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rank-val{ flex:0 0 auto; font-size:12.5px; color:var(--ink); }
/* ---------- شريط توزيع نسبي + مفتاحه ----------
ست قيم متنافسة على مجموع واحد: السؤال تناسبي، والقائمة المكدّسة لا
تجيبه. شريط واحد يجيب بنظرة، والمفتاح يحفظ الأرقام كاملة تحته. */
.proof-bar{ display:flex; height:12px; border-radius:6px; overflow:hidden;
background:var(--line-2); margin-bottom:.9rem; }
.proof-bar > span{ display:block; height:100%; min-width:3px; }
.proof-bar > span + span{ box-shadow:inset 1px 0 0 var(--surface); }
.proof-legend{ list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:1fr 1fr; gap:.1rem .9rem; }
@media (max-width:1400px){ .proof-legend{ grid-template-columns:1fr; } }
.proof-legend li{ display:flex; align-items:center; gap:.5rem;
padding:.3rem 0; border-bottom:1px solid var(--line-2); }
.proof-legend li:last-child, .proof-legend li:nth-last-child(2):nth-child(odd){ border-bottom:0; }
.proof-dot{ width:9px; height:9px; border-radius:3px; flex:0 0 auto; }
.proof-name{ flex:1 1 auto; font-size:12.5px; font-weight:600; color:var(--ink-2); line-height:1.5; }
.proof-k{ flex:0 0 auto; font-size:14px; font-weight:700; color:var(--ink); }
/* ---------- بطاقة مرجعية مطويّة ----------
مكوّن مشترك: ما يُقرأ مرة ويبقى سارياً (سياسة، تفصيل، مرجع) لا يحتل
الشاشة التشغيلية كل يوم. البطاقة تصير وترويستها ،
فتُطوى بلا JS وتبقى في DOM لقارئ الشاشة والبحث داخل الصفحة. */
details.ref{ border:1px solid var(--line)!important; border-radius:var(--r-md);
background:var(--surface); margin-bottom:.65rem; }
details.ref > summary{ list-style:none; cursor:pointer; display:flex; align-items:center;
justify-content:space-between; gap:.75rem; padding:.8rem 1.1rem; border-radius:var(--r-md);
transition:background-color .15s ease; }
details.ref > summary::-webkit-details-marker{ display:none; }
details.ref > summary::marker{ content:""; }
details.ref > summary:hover{ background:var(--canvas); }
details.ref[open] > summary{ border-bottom:1px solid var(--line-2);
border-radius:var(--r-md) var(--r-md) 0 0; }
details.ref > summary .sec-title{ flex:1 1 auto; }
details.ref > summary .sec-title::after{ content:"›"; margin-inline-start:.35rem;
color:var(--muted-2); font-size:17px; line-height:1; display:inline-block;
transition:transform .2s ease; }
details.ref[open] > summary .sec-title::after{ transform:rotate(90deg); }
details.ref > .card-body, details.ref > .card-footer{
animation:ref-open .2s cubic-bezier(.25,.46,.45,.94) both; }
@keyframes ref-open{ from{ opacity:0 } to{ opacity:1 } }
@media (prefers-reduced-motion: reduce){
details.ref > .card-body, details.ref > .card-footer{ animation:none }
details.ref > summary .sec-title::after{ transition:none }
}
/* ---------- إفصاح مضغوط داخل بطاقة ----------
نظير details.ref لكن داخل جسم بطاقة لا حول بطاقة كاملة: قاعدةٌ ثابتة
ملتصقة ببيانٍ متغيّر (شروط صندوق، قيود حقل) تُطوى دون أن تُنتزع من سياقها. */
details.ref-inline{ border-top:1px solid var(--line-2); margin-top:.7rem; padding-top:.55rem; }
details.ref-inline > summary{ list-style:none; cursor:pointer; display:inline-flex;
align-items:center; gap:.3rem; font-size:11.5px; font-weight:700; color:var(--muted);
min-height:24px; transition:color .15s ease; }
details.ref-inline > summary::-webkit-details-marker{ display:none; }
details.ref-inline > summary::marker{ content:""; }
details.ref-inline > summary::after{ content:"›"; font-size:15px; line-height:1;
display:inline-block; transition:transform .2s ease; }
details.ref-inline[open] > summary::after{ transform:rotate(90deg); }
details.ref-inline > summary:hover{ color:var(--accent-ink); }
details.ref-inline > .ref-body{ margin-top:.5rem;
animation:ref-open .2s cubic-bezier(.25,.46,.45,.94) both; }
@media (prefers-reduced-motion: reduce){
details.ref-inline > .ref-body{ animation:none }
details.ref-inline > summary::after{ transition:none }
}
/* ---------- بطاقة قرار ---------- */
.decide-card{ border:1px solid var(--line); border-radius:var(--r-lg); }
.decide-head{ background:var(--canvas); border-radius:var(--r-lg) var(--r-lg) 0 0; padding:.9rem 1.1rem; border-bottom:1px solid var(--line-2); }
.kv{ display:flex; justify-content:space-between; gap:.6rem; padding:.45rem 0; border-bottom:1px solid var(--line-2); font-size:13px; }
.kv:last-child{ border-bottom:0; }
.kv span:first-child{ color:var(--muted); }
.kv span:last-child{ font-weight:600; color:var(--ink-2); }
/* ======================================================================
html[data-nav-layout] سطح المكتب — نقل هوية شاشة الدخول إلى لوحة التحكم
----------------------------------------------------------------------
شاشة دخول الكافل ليست «وضعاً داكناً»: هي أرضية حبر شبه سوداء تطفو
عليها وثيقة بيضاء، بحافة ذهبية وأرقام تركوازية. البطاقة تبقى بيضاء
لأنها سطح البيانات، والأرضية تحمل الهوية.
ملاحظة معمارية: لم يُمسّ --canvas لأنه يُستعمل في ثلاثة عشر موضعاً
كتعبئة فاتحة داخل البطاقات (تذييل، أيقونة مؤشر، تحويم صف جدول،
زر ثانوي…). قلبه إلى حبرٍ كان سيُسوّد داخل البطاقات كلها. الأرضية
رمز مستقل: --desk.
====================================================================== */
:root, html[data-nav-layout][data-theme-mode="light"]{
--desk: #06201E; /* = --rq-void — أرضية العهد نفسها */
--desk-2: #0A2E28; /* = --rq-void-2 — الرأس والشريط، أفتح درجةً ليُقرأ الفصل */
--desk-ink: #F2F7F5; /* = --rq-onvoid — 15٫73:1 على الأرضية */
--desk-mut: #93ADA5; /* = --rq-onvoid-3 — 7٫11:1 */
--desk-line: rgba(233,196,106,.14); /* الشعرة ذهبية خافتة كما في الموقع، لا بيضاء */
--desk-hover:rgba(255,255,255,.06);
--seal: #E9C46A; /* = --rq-gold — 10٫19:1 على الأرضية، حواف وختم لا تعبئة */
/* الذهب نفسه يكفي هنا الآن: على #0A2E28 يعطي 8٫76:1، فلا حاجة لنسخةٍ
أفتح كما كان يلزم فوق السليت. رمزٌ واحد أوضح من رمزين متقاربين. */
--seal-on-ink: #E9C46A;
--fig: #2FBFAE; /* = --rq-focus-onvoid — 7٫45:1 (كان #14B8A6 = 6٫84) */
}
[data-theme-mode="dark"]{
--desk:#041917; --desk-2:#08251F; --desk-ink:#F2F7F5; --desk-mut:#93ADA5;
}
html[data-nav-layout], html[data-nav-layout] body{ background:var(--canvas); }
/* منطقة العمل فاتحة؛ الحبر يقتصر على الإطار: الرأس والشريط والتذييل */
html[data-nav-layout] .main-content{ background:var(--canvas); }
/* شريط الختم الذهبي — حافة المحضر، نفس تدرّج شاشة الدخول */
html[data-nav-layout] .seal-edge{
position:fixed; top:0; inset-inline:0; height:2px; z-index:1002; pointer-events:none;
background:linear-gradient(90deg, transparent, var(--seal) 20%, var(--seal) 80%, transparent); }
/* ---------- الرأس ---------- */
html[data-nav-layout][data-theme-mode="dark"] .app-header{ background:var(--desk-2)!important; border-bottom:1px solid var(--desk-line)!important; }
html[data-nav-layout][data-theme-mode="dark"] .app-header .header-link{ color:var(--desk-mut); }
html[data-nav-layout][data-theme-mode="dark"] .app-header .header-link:hover{ color:var(--desk-ink); background:var(--desk-hover); }
html[data-nav-layout][data-theme-mode="dark"] .app-header .header-link-icon{ color:inherit!important; }
html[data-nav-layout][data-theme-mode="dark"] .header-role-label{ color:var(--desk-mut)!important; }
html[data-nav-layout][data-theme-mode="dark"] .app-header .rifq-logo .txt b{ color:var(--desk-ink); }
html[data-nav-layout][data-theme-mode="dark"] .app-header .rifq-logo .txt small{ color:var(--desk-mut); }
html[data-nav-layout][data-theme-mode="dark"] .app-header .header-search .input-group{ border-radius:8px; overflow:hidden; }
html[data-nav-layout][data-theme-mode="dark"] .app-header .header-search .form-control, html[data-nav-layout][data-theme-mode="dark"] .app-header .header-search .input-group-text{
background:rgba(255,255,255,.05)!important; border-color:var(--desk-line)!important;
color:var(--desk-ink)!important; }
html[data-nav-layout][data-theme-mode="dark"] .app-header .header-search .form-control::placeholder{ color:var(--desk-mut); }
html[data-nav-layout][data-theme-mode="dark"] .app-header .header-search .form-control:focus{
background:rgba(255,255,255,.09)!important; border-color:var(--fig)!important;
box-shadow:0 0 0 3px rgba(47,191,174,.18); }
html[data-nav-layout][data-theme-mode="dark"] .app-header .animated-arrow span, html[data-nav-layout][data-theme-mode="dark"] .app-header .animated-arrow span::before, html[data-nav-layout][data-theme-mode="dark"] .app-header .animated-arrow span::after{ background:var(--desk-mut)!important; }
/* ---------- الشريط الجانبي ---------- */
html[data-nav-layout] .app-sidebar{ background:var(--desk-2)!important; border-inline-end:1px solid var(--desk-line)!important; }
html[data-nav-layout] .app-sidebar .main-sidebar-header{
background:var(--desk-2)!important; border-bottom:1px solid var(--desk-line)!important; }
html[data-nav-layout] .app-sidebar .rifq-logo .txt b{ color:var(--desk-ink); }
html[data-nav-layout] .app-sidebar .rifq-logo .txt small{ color:var(--desk-mut); }
html[data-nav-layout] .app-sidebar .side-menu__item{ color:var(--desk-mut)!important; }
html[data-nav-layout] .app-sidebar .side-menu__item .side-menu__icon{ color:var(--desk-mut)!important; }
html[data-nav-layout] .app-sidebar .side-menu__item:hover{ background:var(--desk-hover)!important; color:var(--desk-ink)!important; }
html[data-nav-layout] .app-sidebar .side-menu__item:hover .side-menu__icon{ color:var(--desk-ink)!important; }
/* العنصر النشط: ختم ذهبي على الحافة + تعبئة تركوازية خافتة */
html[data-nav-layout] .app-sidebar .side-menu__item.active, html[data-nav-layout] .app-sidebar .slide.active > .side-menu__item{
background:rgba(47,191,174,.14)!important; color:#fff!important;
box-shadow:inset 2px 0 0 var(--seal); }
html[data-nav-layout] .app-sidebar .side-menu__item.active .side-menu__icon, html[data-nav-layout] .app-sidebar .slide.active > .side-menu__item .side-menu__icon{ color:var(--fig)!important; }
html[data-nav-layout] .app-sidebar .badge{
background:rgba(255,255,255,.07)!important; color:var(--desk-mut)!important;
border-color:var(--desk-line)!important; }
html[data-nav-layout] .app-sidebar .side-menu__item.active .badge{
background:rgba(233,196,106,.18)!important; color:var(--seal-on-ink)!important; border-color:transparent!important; }
html[data-nav-layout] .app-sidebar .side-menu__angle{ color:var(--desk-mut)!important; }
html[data-nav-layout] .app-sidebar .side-menu__item:hover .side-menu__angle{ color:var(--desk-ink)!important; }
/* ---------- ما يقع مباشرةً على الأرضية ---------- */
html[data-nav-layout][data-theme-mode="dark"] .footer{ background:var(--desk-2)!important; border-top:1px solid var(--desk-line)!important; }
html[data-nav-layout][data-theme-mode="dark"] .footer .text-muted{ color:var(--desk-mut)!important; }
html[data-nav-layout][data-theme-mode="dark"] .footer b{ color:var(--desk-ink); }
/* ترقيم الصفحات حين يقع خارج بطاقة */
/* شاشة التحميل تتبع الأرضية لا اللوح الفاتح */
/* القاعدة العامة h1..h6,.fw-semibold{color:var(--ink-2)} تسري داخل الرأس
html[data-nav-layout] أيضاً فتضع نصاً غامقاً على أرضية حبر (اسم المستخدم = 1٫2:1). تُقيَّد هنا. */
html[data-nav-layout][data-theme-mode="dark"] .app-header .fw-semibold, html[data-nav-layout][data-theme-mode="dark"] .app-header h1, html[data-nav-layout][data-theme-mode="dark"] .app-header h2, html[data-nav-layout][data-theme-mode="dark"] .app-header h3, html[data-nav-layout][data-theme-mode="dark"] .app-header h4, html[data-nav-layout][data-theme-mode="dark"] .app-header h5, html[data-nav-layout][data-theme-mode="dark"] .app-header h6, html[data-nav-layout] .app-sidebar .fw-semibold, html[data-nav-layout][data-theme-mode="dark"] .footer .fw-semibold{ color:var(--desk-ink)!important; }
/* القوائم المنسدلة تبقى بيضاء — هي أسطح بيانات لا جزء من الأرضية */
html[data-nav-layout][data-theme-mode="dark"] .app-header .dropdown-menu .fw-semibold{ color:var(--ink-2)!important; }
/* .text-white يعني الأبيض بالتعريف، لكن styles.css يعيد تعريفه في الوضع
html[data-nav-layout] الداكن إلى #232226 (رمادي دافئ غريب عن اللوحة). النتيجة: قيم محطات
المال داخل .station كانت 1٫06:1 — غير مرئية إطلاقاً. خلل سابق كشفه
المسح المنهجي لا التغيير الحالي. */
.text-white, html[data-nav-layout] .text-fixed-white, html[data-nav-layout] a.text-white{ color:#fff!important; }
html[data-nav-layout] .station a, html[data-nav-layout] .station a:hover{ color:#fff!important; }
/* ======================================================================
إصلاح رموز الجداول والأسطح في الوضع الداكن
----------------------------------------------------------------------
styles.css يعرّف --custom-white في الوضع الداكن بـ #232226 — رمادي
دافئ غريب عن اللوحة الباردة (--surface:#131E2B) — ويمرّره إلى 249
موضعاً: خلفية الجداول والحقول والقوائم المنسدلة. النتيجة كتلة أفتح
وأدفأ تطفو داخل البطاقة، وهو ما يُرى في سجل الأيتام.
ومعه ثلاثة أخطاء في رموز بوتستراب للجداول تبقى خفيّة حتى تظهر:
--bs-table-color:#000 و--bs-table-hover-color:#000 (نص أسود على
صفٍّ داكن عند التحويم) و--bs-table-border-color:#dee2e6 (حدّ فاتح).
====================================================================== */
[data-theme-mode="dark"]{
--custom-white: #0A2E28; /* = --surface — يصحّح 249 استعمالاً دفعةً واحدة */
}
/* الجدول لا يحمل خلفيته: يُظهر سطح البطاقة تحته، فلا تتكوّن كتلة داخل كتلة */
.table{
--bs-table-bg: transparent;
--bs-table-color: var(--ink);
--bs-table-striped-color: var(--ink);
--bs-table-hover-color: var(--ink);
--bs-table-active-color: var(--ink);
--bs-table-border-color: var(--line-2);
--bs-table-hover-bg: var(--accent-50);
--bs-table-active-bg: var(--accent-100);
color: var(--ink);
}
[data-theme-mode="light"] .table, :root .table{ --bs-table-striped-bg: rgba(15,23,42,.022); }
[data-theme-mode="dark"] .table{ --bs-table-striped-bg: rgba(255,255,255,.032); }
/* الحقول: سطح غائر عن البطاقة بدرجة واحدة، لا رمادي دافئ من القالب */
[data-theme-mode="dark"] .form-control,
[data-theme-mode="dark"] .form-select{ background-color:var(--canvas); color:var(--ink); }
[data-theme-mode="dark"] .form-control:focus,
[data-theme-mode="dark"] .form-select:focus{ background-color:var(--surface); }
/* ======================================================================
بطاقة المؤشر .stat + شريط التصفية .toolbar
----------------------------------------------------------------------
نسخة المكوّن. .kpi القديمة تبقى كما هي حتى تُهاجَر شاشاتها الـ27.
====================================================================== */
/* ---------- بطاقة المؤشر ---------- */
.stat{
position:relative; display:block; text-decoration:none; overflow:hidden;
background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
padding:.95rem 1.1rem .95rem 1.1rem; padding-inline-start:1.35rem; height:100%;
transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
a.stat{ cursor:pointer; }
/* السكّة: عنصر حقيقي على حافة بدء القراءة (اليمين في RTL) */
.stat-rail{ position:absolute; inset-block:0; inset-inline-start:0; width:3px;
background:var(--mute-dot); transition:width .18s ease; }
.stat-ok .stat-rail{ background:var(--success-dot); }
.stat-warn .stat-rail{ background:var(--warning-dot); }
.stat-bad .stat-rail{ background:var(--danger-dot); }
.stat-info .stat-rail{ background:var(--accent-dot); }
.stat-neut .stat-rail{ background:var(--mute-dot); opacity:.55; }
.stat-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.stat-lbl{ font-size:11.5px; font-weight:700; letter-spacing:.3px; color:var(--muted); }
/* الأيقونة علامة خافتة بلا صندوق — العنوان يقول ما تقوله */
.stat-icn{ font-size:17px; color:var(--muted-2); flex:0 0 auto; line-height:1; }
.stat-val{ margin:.45rem 0 0; font-size:28px; font-weight:700; line-height:1.05;
color:var(--ink); display:flex; align-items:baseline; gap:.3rem; }
.stat-unit{ font-size:13px; font-weight:600; color:var(--muted); }
.stat-bad .stat-val{ color:var(--danger); }
.stat-warn .stat-val{ color:var(--warning); }
/* الشرح سطران بحدّ أقصى، ونصّه كاملاً في title */
.stat-sub{ margin:.4rem 0 0; font-size:11.5px; line-height:1.6; color:var(--muted);
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
a.stat:hover{ border-color:var(--muted-2); box-shadow:0 2px 10px rgba(15,23,42,.06); transform:translateY(-1px); }
a.stat:hover .stat-rail{ width:5px; }
a.stat:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
.stat, .stat-rail{ transition:none }
a.stat:hover{ transform:none } }
/* ---------- شريط التصفية ---------- */
.toolbar{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
padding:.85rem 1rem; margin-bottom:.75rem; }
.toolbar-row{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
/* حقل البحث هو البطل: يتمدّد ويحمل أيقونته داخله */
.tb-search{ position:relative; flex:1 1 260px; min-width:220px; }
.tb-search > i{ position:absolute; inset-inline-start:12px; top:50%; transform:translateY(-50%);
font-size:16px; color:var(--muted-2); pointer-events:none; }
.tb-search input{ width:100%; min-height:42px; padding-inline-start:38px; padding-inline-end:12px;
border:1px solid var(--line-ui); border-radius:9px; background:var(--surface);
color:var(--ink); font-size:13.5px;
transition:border-color .15s ease, box-shadow .15s ease; }
.tb-search input::placeholder{ color:var(--muted-2); }
.tb-search input:hover{ border-color:var(--muted); }
.tb-search input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-50); }
/* الحقل المنسدل يعلن حالته: محايد حين «الكل»، ومُعلَّم حين اختير */
.tb-field{ position:relative; flex:0 1 180px; min-width:150px; }
.tb-field select{ width:100%; min-height:42px; padding-inline:12px 32px; border-radius:9px;
border:1px solid var(--line-ui); background:var(--surface); color:var(--ink);
font-size:13px; font-weight:600; appearance:none; cursor:pointer;
transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.tb-field > i{ position:absolute; inset-inline-end:11px; top:50%; transform:translateY(-50%);
font-size:15px; color:var(--muted-2); pointer-events:none; }
.tb-field select:hover{ border-color:var(--muted); }
.tb-field select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-50); }
.tb-field.is-on select{ border-color:var(--accent); background:var(--accent-50); color:var(--accent-ink); }
.tb-field.is-on > i{ color:var(--accent-ink); }
/* ---------- حقل تاريخ داخل شريط التصفية ----------
المدى الزمني فلتر لا غنى عنه في سجلٍّ يُضاف إليه بلا حدّ (سجل الحركة)،
ولم يكن في الشريط إلا منسدل وحقل بحث. و لا يقبل
placeholder، فحقلا «من» و«إلى» بلا وسم يظهران متطابقَين تماماً — ولذلك
الوسم عنصر حقيقي داخل الحقل لا نص مولَّد. وما عدا ذلك: نفس ارتفاع
المنسدل وحدّه وإعلانه عن حالته، فلا يبدو دخيلاً على الصف. */
.tb-date{ position:relative; flex:0 1 180px; min-width:160px; }
.tb-date > span{ position:absolute; inset-inline-start:12px; top:50%; transform:translateY(-50%);
font-size:11.5px; font-weight:700; color:var(--muted-2); pointer-events:none; }
.tb-date input{ width:100%; min-height:42px; padding-inline:46px 12px; border-radius:9px;
border:1px solid var(--line-ui); background:var(--surface); color:var(--ink);
font-size:13px; font-weight:600;
transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.tb-date input:hover{ border-color:var(--muted); }
.tb-date input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-50); }
.tb-date.is-on input{ border-color:var(--accent); background:var(--accent-50); color:var(--accent-ink); }
.tb-date.is-on > span{ color:var(--accent-ink); }
@media (max-width:575.98px){ .tb-date{ flex:1 1 100%; } }
.tb-apply{ min-height:42px; padding-inline:1.15rem; border-radius:9px; border:1px solid var(--accent);
background:var(--accent); color:#fff; font-size:13.5px; font-weight:700; cursor:pointer;
display:inline-flex; align-items:center; gap:.4rem;
transition:background-color .15s ease, border-color .15s ease; }
.tb-apply:hover{ background:var(--accent-ink); border-color:var(--accent-ink); }
.tb-apply:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
/* سطر الحالة: ماذا طُبِّق فعلاً، وكم النتيجة، وإزالة كل فلتر على حدة */
.toolbar-state{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--line-2); }
.tb-state-lbl{ font-size:11.5px; font-weight:700; color:var(--muted); }
.fchip{ display:inline-flex; align-items:center; gap:.35rem; min-height:26px;
padding:.15rem .3rem .15rem .6rem; border-radius:20px; text-decoration:none;
background:var(--accent-50); border:1px solid var(--accent-100);
color:var(--accent-ink); font-size:11.5px; font-weight:600;
transition:background-color .15s ease, border-color .15s ease; }
.fchip:hover{ background:var(--accent-100); border-color:var(--accent); color:var(--accent-ink); }
.fchip:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.fchip i{ font-size:14px; opacity:.75; }
.tb-count{ margin-inline-start:auto; font-size:11.5px; color:var(--muted); }
.tb-clear{ font-size:11.5px; font-weight:600; color:var(--muted); text-decoration:none;
min-height:26px; display:inline-flex; align-items:center; }
.tb-clear:hover{ color:var(--danger); }
@media (max-width:575.98px){
.tb-field{ flex:1 1 100%; }
.tb-apply{ flex:1 1 100%; justify-content:center; }
.tb-count{ margin-inline-start:0; width:100%; }
}
/* ---------- ترويسة عمود قابلة للترتيب ---------- */
.th-sort{ display:inline-flex; align-items:center; gap:.3rem; text-decoration:none;
color:inherit; min-height:24px; border-radius:5px; padding-inline:.15rem;
transition:color .15s ease; }
.th-sort > i{ font-size:13px; opacity:.45; transition:opacity .15s ease; }
.th-sort:hover{ color:var(--accent-ink); }
.th-sort:hover > i{ opacity:.9; }
.th-sort.is-on{ color:var(--accent-ink); }
.th-sort.is-on > i{ opacity:1; }
.th-sort:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
th[aria-sort]:not([aria-sort="none"]){ background:var(--accent-50); }
/* ---------- شارة بيان — «لباجة» هادئة ----------
نظام المنصة يرفض الشارات المعبّأة الصارخة عمداً (الدلالة نقطة ونص).
هذه وسط بينهما: تعبئة خافتة جداً وحدّ رفيع ونقطة — تُقرأ ككتلة واحدة
قابلة للمسح البصري، ولا ترفع صوتها فوق البيان. */
.tag{ display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
padding:.2rem .55rem; border-radius:20px; font-size:11.5px; font-weight:600;
border:1px solid transparent; background:var(--canvas); color:var(--muted); }
.tag::before{ content:""; width:6px; height:6px; border-radius:50%;
background:currentColor; flex:0 0 auto; }
.tag-ok{ background:var(--alert-success-bg); border-color:rgba(34,197,94,.30); color:var(--success); }
.tag-warn{ background:var(--alert-warning-bg); border-color:rgba(245,158,11,.32); color:var(--warning); }
.tag-bad{ background:var(--alert-danger-bg); border-color:rgba(239,68,68,.30); color:var(--danger); }
.tag-wait{ background:var(--accent-50); border-color:var(--accent-100); color:var(--accent-ink); }
.tag-gold{ background:rgba(233,196,106,.12); border-color:rgba(233,196,106,.32); color:var(--gold); }
.tag-mute{ background:var(--canvas); border-color:var(--line); color:var(--muted); }
/* شارة بلا نقطة — للبيانات الوصفية لا الحالات */
.tag-plain::before{ display:none; }
/* ---------- أزرار الإجراء في الجدول ---------- */
.acts{ display:inline-flex; align-items:center; gap:.3rem; }
.act{ width:32px; height:32px; flex:0 0 auto; display:inline-grid; place-items:center;
border-radius:8px; border:1px solid var(--line-ui); background:var(--surface);
color:var(--muted); font-size:16px; text-decoration:none; cursor:pointer;
transition:color .15s ease, border-color .15s ease, background-color .15s ease; }
.act:hover{ color:var(--accent-ink); border-color:var(--accent); background:var(--accent-50); }
.act:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.act-danger:hover{ color:var(--danger); border-color:var(--danger-dot); background:var(--alert-danger-bg); }
/* فعلٌ لم يحن شرطه بعد — يُرى ولا يُضغط، والعنوان يقول لماذا */
.act--off{ opacity:.4; cursor:not-allowed; }
.act--off:hover{ color:var(--muted); border-color:var(--line-ui); background:var(--surface); }
/* ---------- تشريح خلية الجدول ----------
قاعدة واحدة لكل خلية متعددة المعلومات، بدل تكديس أسطر بلا نظام:
سطر رئيسي ← ما تبحث عنه العين أولاً (اسم، محافظة، عدد)
سطر وصفي ← الحقائق الثابتة، سطر واحد مفصولة بـ · (لا سطر لكل حقيقة)
شارة ← الحالة المتغيّرة وحدها، وما يستحق لوناً
الحقيقة الوصفية (جنس، عمر، صلة، جوال) ليست حالة فلا تأخذ شارة؛
والحالة (بيانات منتهية، بلا وصي) ليست وصفاً فلا تُدفن في سطر رمادي. */
.cell{ display:flex; flex-direction:column; gap:.2rem; min-width:0; }
/* text-overflow:ellipsis وحده لا يفعل شيئاً بلا nowrap — وكان هذا حاله هنا،
فعنوان الشكوى الطويل يخرج من عمود الجدول ويختفي تحت الشريط الجانبي.
والالتفاف أولى من القصّ في نصٍّ يُقرأ: عنوان شكوى مقصوصٌ لا يُغني عن فتحها. */
.cell-main{ font-size:13.5px; font-weight:600; color:var(--ink-2); line-height:1.4;
min-width:0; overflow-wrap:anywhere; word-break:break-word; }
.cell-meta{ font-size:11.5px; color:var(--muted); line-height:1.55;
display:flex; align-items:center; flex-wrap:wrap; gap:.3rem;
min-width:0; overflow-wrap:anywhere; }
.cell-meta > span:not(:last-child)::after{ content:"·"; margin-inline-start:.3rem; opacity:.55; }
.cell-tags{ display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.1rem; }
/* الرقم المعياري: القيمة كبيرة ووحدتها ملاصقة، وسندها تحتها */
.cell-figure{ display:flex; align-items:baseline; gap:.25rem; }
.cell-figure b{ font-size:17px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.cell-figure span{ font-size:11px; color:var(--muted); }
/* ---------- حالة التحميل للمنطقة الحيّة ----------
بلا إعادة تحميل تختفي إشارة المتصفح نفسها، فيبقى المستخدم بلا دليل أن
ضغطته وصلت. البيانات تُطمَس ويعلوها لودر: الطمس يقول «هذا قديم، لا تقرأه»
والحجاب يمنع النقر على صفٍّ يوشك أن يتبدّل تحت الإصبع. */
[data-live]{ position:relative; }
[data-live] > *:not(.live-veil){ transition:filter .18s ease, opacity .18s ease; }
[data-live].is-loading > *:not(.live-veil){
filter:blur(2.5px); opacity:.6; pointer-events:none; user-select:none; }
.live-veil{ position:absolute; inset:0; z-index:5; }
.live-spin{ position:sticky; top:38vh; width:max-content; margin-inline:auto;
display:flex; align-items:center; gap:.6rem;
padding:.7rem 1.05rem; border-radius:var(--r-lg);
background:var(--surface); border:1px solid var(--line);
box-shadow:0 10px 30px rgba(15,23,42,.14); }
.live-spin i{ display:block; width:22px; height:22px; flex:0 0 auto; border-radius:50%;
border:3px solid var(--line); border-top-color:var(--accent);
animation:rifq-spin .7s linear infinite; }
.live-spin span{ font-size:12px; font-weight:600; color:var(--ink-2); white-space:nowrap; }
@media (prefers-reduced-motion: reduce){
[data-live] > *:not(.live-veil){ transition:none }
[data-live].is-loading > *:not(.live-veil){ filter:none; opacity:.5 }
.live-spin i{ animation:none; border-top-color:var(--accent); border-color:var(--accent) } }
/* ---------- ترقيم الصفحات ---------- */
.pager{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
.pager-count{ font-size:11.5px; color:var(--muted); }
.pager-nav{ display:inline-flex; align-items:center; gap:.25rem; }
.pager-btn{ min-width:32px; height:32px; padding-inline:.4rem; display:inline-grid; place-items:center;
border-radius:8px; border:1px solid var(--line-ui); background:var(--surface);
color:var(--ink-2); font-size:12.5px; font-weight:600; text-decoration:none; line-height:1;
transition:color .15s ease, border-color .15s ease, background-color .15s ease; }
.pager-btn > i{ font-size:17px; }
.pager-btn:hover{ color:var(--accent-ink); border-color:var(--accent); background:var(--accent-50); }
.pager-btn:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.pager-btn.is-on{ background:var(--accent); border-color:var(--accent); color:#fff; cursor:default; }
.pager-btn.is-off{ opacity:.4; cursor:not-allowed; border-color:var(--line); color:var(--muted-2); }
.pager-btn.is-off:hover{ background:var(--surface); border-color:var(--line); color:var(--muted-2); }
.pager-gap{ padding-inline:.3rem; color:var(--muted-2); font-size:12.5px; }
@media (max-width:575.98px){ .pager{ justify-content:center } .pager-count{ width:100%; text-align:center } }
/* ---------- ترويسة الشاشة ---------- */
.page-head{ margin:.9rem 0 1rem; }
.crumbs{ display:flex; align-items:center; flex-wrap:wrap; gap:.35rem;
font-size:11.5px; color:var(--muted); margin-bottom:.45rem; }
.crumbs a{ color:var(--muted); text-decoration:none; border-radius:4px;
transition:color .15s ease; }
.crumbs a:hover{ color:var(--accent-ink); }
.crumbs a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.crumbs > *:not(:last-child)::after{ content:"›"; margin-inline-start:.35rem;
color:var(--muted-2); font-size:14px; line-height:1; }
.crumbs > [aria-current]{ color:var(--ink-2); font-weight:600; }
.page-head-row{ display:flex; align-items:flex-start; justify-content:space-between;
gap:1rem; flex-wrap:wrap; }
.page-head-main{ min-width:0; flex:1 1 320px; }
.page-title{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
margin:0; font-size:23px; font-weight:700; line-height:1.3; color:var(--ink-2); }
.page-title-rail{ width:3px; height:20px; flex:0 0 auto; border-radius:3px;
background:var(--accent); }
/* العدّاد: الرقم المتغيّر، منفصلاً عن المبدأ الثابت في السطر التالي */
.page-count{ display:inline-flex; align-items:center; gap:.3rem;
padding:.15rem .55rem; border-radius:20px; font-size:11.5px; font-weight:700;
background:var(--accent-50); border:1px solid var(--accent-100); color:var(--accent-ink); }
.page-sub{ margin:.35rem 0 0; padding-inline-start:calc(3px + .55rem);
font-size:12.5px; line-height:1.7; color:var(--muted); max-width:78ch; }
.page-head-acts{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; flex:0 0 auto; }
/* تراتب الإجراءات: الأخير هو الأبرز — بوتستراب يرتّبها بأصنافها،
وهذه ترفع الحدّ الأدنى للمس إلى 34px بدل 29px */
.page-head-acts .btn{ min-height:34px; }
@media (max-width:575.98px){
.page-head-row{ flex-direction:column; align-items:stretch; }
.page-head-acts{ width:100%; }
.page-head-acts .btn{ flex:1 1 auto; justify-content:center; }
.page-title{ font-size:20px; }
}
/* ---------- مفتاح تبديل داخل شريط التصفية ----------
خانة اختيار بمظهر الحقول المجاورة: تعلن حالتها كما يعلنها المنسدل. */
.tb-toggle{ display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
min-height:42px; padding-inline:.85rem; border-radius:9px; margin:0;
border:1px solid var(--line-ui); background:var(--surface);
font-size:12.5px; font-weight:600; color:var(--ink-2);
transition:border-color .15s ease, background-color .15s ease, color .15s ease; }
.tb-toggle input{ width:15px; height:15px; margin:0; accent-color:var(--accent); cursor:pointer; }
.tb-toggle:hover{ border-color:var(--muted); }
.tb-toggle.is-on{ border-color:var(--accent); background:var(--accent-50); color:var(--accent-ink); }
.tb-toggle:focus-within{ outline:3px solid var(--accent); outline-offset:2px; }
/* ---------- لوحة التعليمات الجانبية ----------
درج ينزلق من حافة اليسار. |