/* ================================================================ KAYANAC DESIGN SYSTEM · v1 · design-system.css ---------------------------------------------------------------- هوية موحّدة: أحمر (هوية) + كحلي (هيكل) + رمادي دافئ (محتوى). خلفية بيضا. الوضع: Light فقط حالياً — مُهيّأ للـ Dark مستقبلاً. طريقة التطبيق (opt-in آمن): 1) ضع الكلاس ks-scope على في الصفحة المطلوبة فقط: (يفعّل سكين الحقول و select2 والجداول على هذه الصفحة فقط) 2) استخدم مكوّنات .ks-* في الماركب. باقي النظام لا يتأثر إطلاقاً (كل شيء إمّا متغيّر، إمّا بادئة ks-، إمّا مقيّد داخل body.ks-scope). الوضع الليلي مستقبلاً = بلوك واحد فقط، دون لمس أي مكوّن: :root[data-theme="dark"]{ --bg:#1a1717; --ink:#f2efed; --surface:#232020; ... } لا تضف @media(prefers-color-scheme:dark) قبل أن يصبح النظام جاهزاً. ================================================================ */ :root{ /* ---- Brand (من شعار كيانك) ---- */ --ks-brand:#ed1c24; --ks-brand-strong:#c1121f; --ks-brand-deep:#791c24; --ks-brand-soft:#fdecec; --ks-brand-grad:linear-gradient(120deg,#791c24 0%,#c1121f 48%,#ed1c24 100%); /* ---- Navy chrome (الهيكل: سايدبار/توبار/فوتر) ---- */ --ks-navy:#1b2233; --ks-navy-2:#232c40; --ks-navy-3:#2a344c; --ks-navy-line:#2f3a56; --ks-navy-ink:#eef1f8; --ks-navy-muted:#98a2bd; /* ---- Neutrals (رمادي دافئ) — الخلفية بيضا ---- */ --ks-bg:#ffffff; --ks-surface:#ffffff; --ks-surface-2:#f7f6f5; /* لمسة خفيفة: حقول ورؤوس جداول */ --ks-ink:#2d2d2d; --ks-ink-2:#514d49; --ks-muted:#6f6a66; --ks-faint:#a5a09b; --ks-line:#e8e4e1; --ks-line-2:#f1eeeb; /* ---- Semantic ---- */ --ks-ok:#16a34a; --ks-ok-soft:#e6f6ec; --ks-warn:#d97706; --ks-warn-soft:#fdf1dd; --ks-danger:#dc2626; --ks-danger-soft:#fdeaea; --ks-info:#2563eb; --ks-info-soft:#e8effd; /* ---- Elevation ---- */ --ks-shadow-sm:0 1px 2px rgba(40,30,28,.06),0 1px 3px rgba(40,30,28,.05); --ks-shadow:0 2px 6px rgba(40,30,28,.06),0 10px 26px rgba(40,30,28,.08); --ks-shadow-lg:0 14px 44px rgba(40,30,28,.16); --ks-ring:0 0 0 3px rgba(237,28,36,.18); --ks-ring-navy:0 0 0 3px rgba(27,34,51,.18); /* ---- Shape ---- */ --ks-r:14px; --ks-r-sm:10px; --ks-r-xs:8px; --ks-r-pill:999px; /* ---- Spacing scale (4px) ---- */ --ks-1:4px; --ks-2:8px; --ks-3:12px; --ks-4:16px; --ks-5:20px; --ks-6:24px; --ks-8:32px; /* ---- Type ---- */ --ks-font:"Tajawal","Cairo",system-ui,"Segoe UI",Tahoma,sans-serif; --ks-mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,monospace; /* ---- Motion / z ---- */ --ks-t:.16s cubic-bezier(.4,0,.2,1); --ks-z-side:1030; --ks-z-top:1020; --ks-z-modal:1060; --ks-z-toast:1080; } /* ================================================================ BASE (مقيّد على الصفحات المفعّلة فقط) ================================================================ */ body.ks-scope{ background:var(--ks-bg); } .ks-scope .ks-num, .ks-num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; } .ks-mono{ font-family:var(--ks-mono); font-variant-numeric:tabular-nums; } /* حاوية الصفحة */ .ks-page{ padding:var(--ks-5); } @media(max-width:768px){ .ks-page{ padding:var(--ks-4) var(--ks-3); } } /* ================================================================ PAGE HEADER + BREADCRUMB ================================================================ */ .ks-crumbs{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12.5px; color:var(--ks-muted); font-weight:600; margin-bottom:var(--ks-3); } .ks-crumbs a{ color:var(--ks-muted); text-decoration:none; transition:color var(--ks-t); } .ks-crumbs a:hover{ color:var(--ks-brand); } .ks-crumbs .sep{ color:var(--ks-faint); } .ks-crumbs .cur{ color:var(--ks-ink); font-weight:700; } /* كسوة breadcrumb الخاص بـ Bootstrap داخل الصفحات المفعّلة */ body.ks-scope .breadcrumb{ background:transparent; padding:0; margin-bottom:10px; font-size:12.5px; font-weight:600; } body.ks-scope .breadcrumb-item a{ color:var(--ks-muted); text-decoration:none; transition:color var(--ks-t); } body.ks-scope .breadcrumb-item a:hover{ color:var(--ks-brand); } body.ks-scope .breadcrumb-item.active{ color:var(--ks-ink); font-weight:700; } .ks-page-head{ display:flex; align-items:flex-start; gap:var(--ks-4); flex-wrap:wrap; margin-bottom:var(--ks-5); } .ks-page-head .ks-ph-ic{ width:52px; height:52px; border-radius:var(--ks-r-sm); flex:none; display:grid; place-items:center; color:#fff; font-size:22px; background:var(--ks-brand-grad); box-shadow:0 6px 16px rgba(237,28,36,.28); } .ks-page-head h1{ font-size:22px; font-weight:800; letter-spacing:-.01em; margin:0; color:var(--ks-ink); } .ks-page-head p{ color:var(--ks-muted); font-size:13px; margin:3px 0 0; max-width:60ch; } .ks-page-head .ks-ph-actions{ margin-inline-start:auto; display:flex; gap:var(--ks-2); flex-wrap:wrap; } /* ================================================================ CARD / PANEL / SECTION ================================================================ */ .ks-card{ background:var(--ks-surface); border:1px solid var(--ks-line); border-radius:var(--ks-r); box-shadow:var(--ks-shadow-sm); } .ks-card--flat{ box-shadow:none; } .ks-card__head{ display:flex; align-items:center; gap:var(--ks-3); padding:var(--ks-4) var(--ks-5); border-bottom:1px solid var(--ks-line-2); } .ks-card__head h3{ font-size:15px; font-weight:800; margin:0; color:var(--ks-ink); } .ks-card__head .sub{ font-size:12px; color:var(--ks-faint); font-weight:500; } .ks-card__head .actions{ margin-inline-start:auto; display:flex; gap:var(--ks-2); } .ks-card__body{ padding:var(--ks-5); } /* عنوان قسم داخلي بشريط أحمر */ .ks-section-title{ display:flex; align-items:center; gap:var(--ks-2); font-size:14px; font-weight:800; color:var(--ks-ink); margin:0 0 var(--ks-4); padding-inline-start:var(--ks-3); border-inline-start:3px solid var(--ks-brand); line-height:1.3; } .ks-section-title i,.ks-section-title .ico{ color:var(--ks-brand); font-size:15px; } .ks-section-title .sub{ font-size:12px; font-weight:500; color:var(--ks-faint); margin-inline-start:auto; } /* بانر رأس (بديل invoice-header القديم) */ .ks-banner{ position:relative; overflow:hidden; border-radius:var(--ks-r); background:var(--ks-brand-grad); color:#fff; padding:var(--ks-6); box-shadow:0 10px 30px rgba(121,28,36,.25); display:flex; align-items:center; gap:var(--ks-4); } .ks-banner::after{ content:""; position:absolute; inset-inline-start:-40px; bottom:-70px; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,.08); } .ks-banner .ks-banner-ic{ width:56px; height:56px; border-radius:16px; flex:none; position:relative; display:grid; place-items:center; font-size:26px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); } .ks-banner h1{ font-size:22px; font-weight:800; margin:0; position:relative; } .ks-banner p{ margin:3px 0 0; opacity:.9; font-size:13px; position:relative; } /* ================================================================ BUTTONS ================================================================ */ .ks-btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--ks-2); border:1px solid transparent; border-radius:var(--ks-r-xs); padding:9px 16px; font-family:inherit; font-weight:700; font-size:13.5px; line-height:1; cursor:pointer; transition:background var(--ks-t),border-color var(--ks-t),color var(--ks-t),box-shadow var(--ks-t),transform var(--ks-t); white-space:nowrap; text-decoration:none; } .ks-btn:active{ transform:translateY(1px); } .ks-btn:focus-visible{ outline:none; box-shadow:var(--ks-ring); } .ks-btn i,.ks-btn svg{ font-size:15px; } .ks-btn svg{ width:16px; height:16px; } .ks-btn--primary{ background:var(--ks-brand); color:#fff; box-shadow:0 4px 12px rgba(237,28,36,.24); } .ks-btn--primary:hover{ background:var(--ks-brand-strong); color:#fff; } .ks-btn--soft{ background:var(--ks-brand-soft); color:var(--ks-brand-strong); } .ks-btn--soft:hover{ background:var(--ks-brand); color:#fff; } .ks-btn--ghost{ background:var(--ks-surface); border-color:var(--ks-line); color:var(--ks-ink); } .ks-btn--ghost:hover{ border-color:var(--ks-brand); color:var(--ks-brand); background:var(--ks-brand-soft); } .ks-btn--ok{ background:var(--ks-ok); color:#fff; } .ks-btn--ok:hover{ filter:brightness(.94); color:#fff; } .ks-btn--ok-soft{ background:var(--ks-ok-soft); color:var(--ks-ok); } .ks-btn--danger{ background:var(--ks-danger); color:#fff; } .ks-btn--danger:hover{ filter:brightness(.94); color:#fff; } .ks-btn--danger-soft{ background:var(--ks-danger-soft); color:var(--ks-danger); } .ks-btn--danger-soft:hover{ background:var(--ks-danger); color:#fff; } .ks-btn--navy{ background:var(--ks-navy); color:#fff; } .ks-btn--navy:hover{ background:var(--ks-navy-2); color:#fff; } .ks-btn--warn{ background:var(--ks-warn); color:#fff; } .ks-btn--warn:hover{ filter:brightness(.94); color:#fff; } .ks-btn--warn-soft{ background:var(--ks-warn-soft); color:var(--ks-warn); } .ks-btn--warn-soft:hover{ background:var(--ks-warn); color:#fff; } .ks-btn--info{ background:var(--ks-info); color:#fff; } .ks-btn--info:hover{ filter:brightness(.94); color:#fff; } .ks-btn--info-soft{ background:var(--ks-info-soft); color:var(--ks-info); } .ks-btn--info-soft:hover{ background:var(--ks-info); color:#fff; } .ks-btn--lg{ padding:12px 22px; font-size:14.5px; } .ks-btn--sm{ padding:7px 12px; font-size:12.5px; } .ks-btn--block{ width:100%; } .ks-btn--icon{ padding:0; width:36px; height:36px; } .ks-btn:disabled,.ks-btn.is-disabled{ opacity:.55; cursor:not-allowed; } /* زر أيقونة صغير محايد (تعديل/حذف داخل الجداول) */ .ks-icon-btn{ width:32px; height:32px; border-radius:var(--ks-r-xs); border:1px solid var(--ks-line); background:var(--ks-surface); display:inline-grid; place-items:center; color:var(--ks-muted); cursor:pointer; transition:all var(--ks-t); } .ks-icon-btn:hover{ border-color:var(--ks-brand); color:var(--ks-brand); background:var(--ks-brand-soft); } .ks-icon-btn--danger:hover{ border-color:var(--ks-danger); color:var(--ks-danger); background:var(--ks-danger-soft); } /* ================================================================ FORM FIELDS ---------------------------------------------------------------- نُقدّم مكوّن .ks-field الجديد، ونُعيد كسوة عناصر Bootstrap الموجودة (.form-control/.form-select/textarea) داخل body.ks-scope حتى تتبنّى الشكل الجديد دون تغيير الماركب. ================================================================ */ .ks-field{ display:block; margin-bottom:var(--ks-3); } .ks-field > label,.ks-label{ display:block; font-size:12.5px; font-weight:700; color:var(--ks-ink); margin-bottom:6px; } .ks-field .req,.ks-label .req{ color:var(--ks-danger); margin-inline-start:2px; } .ks-field .ks-hint{ font-size:11.5px; color:var(--ks-faint); margin-top:5px; } .ks-control, body.ks-scope .form-control, body.ks-scope .form-select, body.ks-scope textarea.form-control{ width:100%; border:1px solid var(--ks-line); background-color:var(--ks-surface-2); color:var(--ks-ink); border-radius:var(--ks-r-xs); padding:9px 12px; font-family:inherit; font-size:13.5px; line-height:1.5; outline:none; transition:border-color var(--ks-t),background var(--ks-t),box-shadow var(--ks-t); } .ks-control::placeholder, body.ks-scope .form-control::placeholder{ color:var(--ks-faint); } .ks-control:focus, body.ks-scope .form-control:focus, body.ks-scope .form-select:focus, body.ks-scope textarea.form-control:focus{ border-color:var(--ks-brand); background-color:var(--ks-surface); box-shadow:var(--ks-ring); } body.ks-scope .form-control:disabled, body.ks-scope .form-select:disabled, body.ks-scope .form-control[readonly]{ background-color:var(--ks-line-2); color:var(--ks-muted); cursor:not-allowed; } /* داخل input-group: يجب أن يتمدّد الإنبت كـ flex لا أن يأخذ 100% (وإلا تلتفّ العناصر) */ body.ks-scope .input-group > .form-control, body.ks-scope .input-group > .form-select{ width:1%; flex:1 1 auto; } /* سهم للـ select الأصلي (native) */ body.ks-scope select.form-select, .ks-control.ks-select{ appearance:none; -webkit-appearance:none; cursor:pointer; background-image: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='%236f6a66' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left 12px center; padding-left:36px; padding-right:12px; } /* checkbox / radio */ .ks-check{ display:inline-flex; align-items:center; gap:var(--ks-2); cursor:pointer; font-size:13px; font-weight:600; color:var(--ks-ink); } body.ks-scope .form-check-input:checked, .ks-check input:checked{ background-color:var(--ks-brand); border-color:var(--ks-brand); } body.ks-scope .form-check-input:focus, .ks-check input:focus{ box-shadow:var(--ks-ring); border-color:var(--ks-brand); } /* toggle switch — keep the switch and its label on one inline row in BOTH directions. The bundled Bootstrap is the LTR build, so .form-check-input floats left with a negative margin; inside an RTL page that floats the switch away and wraps the label underneath it. Flex layout is direction-agnostic and drops the float that caused the wrap. */ body.ks-scope .form-check.form-switch{ display:flex; align-items:center; gap:10px; padding-inline-start:0; } body.ks-scope .form-check.form-switch .form-check-input{ float:none; margin:0; flex-shrink:0; cursor:pointer; } body.ks-scope .form-check.form-switch .form-check-label{ margin:0; cursor:pointer; } /* حالات تحقق (JS يبدّلها) */ body.ks-scope .border-success{ border-color:var(--ks-ok)!important; box-shadow:0 0 0 3px var(--ks-ok-soft)!important; } body.ks-scope .border-danger{ border-color:var(--ks-danger)!important; box-shadow:0 0 0 3px var(--ks-danger-soft)!important; } /* ================================================================ SELECT2 SKIN (v4.x) — مقيّد على body.ks-scope يُحسّن شكل select2 السيئ الحالي دون لمس أي JS. ================================================================ */ body.ks-scope .select2-container--default .select2-selection--single{ height:40px; border:1px solid var(--ks-line); background:var(--ks-surface-2); border-radius:var(--ks-r-xs); display:flex; align-items:center; padding:0 12px; transition:border-color var(--ks-t),box-shadow var(--ks-t),background var(--ks-t); } body.ks-scope .select2-container--default:not(.select2-container--disabled):not(.select2-container--open) .select2-selection--single:hover{ border-color:var(--ks-faint); background:var(--ks-surface); } body.ks-scope .select2-container--default .select2-selection--single .select2-selection__rendered{ color:var(--ks-ink); line-height:38px; padding:0; font-size:13.5px; font-weight:600; } body.ks-scope .select2-container--default .select2-selection--single .select2-selection__placeholder{ color:var(--ks-faint); font-weight:500; } body.ks-scope .select2-container--default .select2-selection--single .select2-selection__arrow{ height:100%; top:0; inset-inline-start:auto; inset-inline-end:10px; } body.ks-scope .select2-container--default .select2-selection--single .select2-selection__arrow b{ border-color:var(--ks-muted) transparent transparent; } body.ks-scope .select2-container--default.select2-container--open .select2-selection__arrow b{ border-color:transparent transparent var(--ks-brand); } body.ks-scope .select2-container--default.select2-container--open .select2-selection--single, body.ks-scope .select2-container--default.select2-container--focus .select2-selection--single{ border-color:var(--ks-brand); background:var(--ks-surface); box-shadow:var(--ks-ring); } body.ks-scope .select2-container--default .select2-selection--single .select2-selection__clear{ color:var(--ks-faint); font-weight:400; font-size:17px; line-height:1; margin-inline-start:6px; } body.ks-scope .select2-container--default .select2-selection--single .select2-selection__clear:hover{ color:var(--ks-danger); } /* multiple */ body.ks-scope .select2-container--default .select2-selection--multiple{ min-height:40px; border:1px solid var(--ks-line); background:var(--ks-surface-2); border-radius:var(--ks-r-xs); } body.ks-scope .select2-container--default .select2-selection--multiple .select2-selection__choice{ background:var(--ks-brand-soft); border:1px solid transparent; color:var(--ks-brand-strong); border-radius:var(--ks-r-xs); padding:2px 8px; font-size:12px; font-weight:700; } /* dropdown (يُلحق بالـ body — لذلك يُقيّد بـ body.ks-scope) */ body.ks-scope .select2-dropdown, body.ks-scope.select2-dropdown{ border:1px solid var(--ks-line); border-radius:var(--ks-r-sm); box-shadow:var(--ks-shadow); background:var(--ks-surface); overflow:hidden; } body.ks-scope .select2-search--dropdown{ padding:8px; } body.ks-scope .select2-search--dropdown .select2-search__field{ border:1px solid var(--ks-line); border-radius:var(--ks-r-xs); padding:8px 10px; background:var(--ks-surface-2); color:var(--ks-ink); font-family:inherit; font-size:13px; outline:none; } body.ks-scope .select2-search--dropdown .select2-search__field:focus{ border-color:var(--ks-brand); box-shadow:var(--ks-ring); background:var(--ks-surface); } body.ks-scope .select2-results > .select2-results__options{ padding:5px; } body.ks-scope .select2-results__option{ padding:9px 11px; margin:1px 0; border-radius:var(--ks-r-xs); font-size:13px; color:var(--ks-ink); transition:background var(--ks-t),color var(--ks-t); } body.ks-scope .select2-results__option--highlighted[aria-selected], body.ks-scope .select2-container--default .select2-results__option--highlighted[aria-selected]{ background:var(--ks-brand-soft); color:var(--ks-brand-strong); } body.ks-scope .select2-container--default .select2-results__option[aria-selected=true]{ background:var(--ks-brand); color:#fff; } body.ks-scope .select2-results__message{ color:var(--ks-muted); padding:10px 12px; font-size:13px; } body.ks-scope .select2-results__option .select2-results__group{ color:var(--ks-faint); font-weight:700; font-size:12px; } /* حاوية الحقل اللي القايمة بتترسم جوّها (`dropdownParent`). 🔴 ليه لازم `position:relative` مش أي حاجة تانية — من كود select2 4.0.8: var p = this.$dropdownParent; if ("static" === p.css("position")) p = p.offsetParent(); var h = p.offset(); d.top -= h.top; d.left -= h.left; `jQuery.offsetParent()` بيمشي على `position` بس، لكن المتصفح بيعتبر أي أب فيه `transform`/`filter`/`backdrop-filter`/`perspective` حاوية حتى لو `static`. لما الاتنين يختلفوا بتتطرح إزاحة عنصر غير اللي المتصفح بيحسب منه ⇒ القايمة تتزاح بمقدار إزاحة الأب المتحوَّل. خلّي الحاوية `relative` فالاتنين يتطابقوا. 🔴 وليه هنا مش جوّه `