/* ══════════════════════════════════════════════════════════════════ إنابة المتكاملة — الأساس: الرموز التصميمية، التهيئة، الطباعة ملاحظة: متغيّرات الهوية (--brand ...) تُحقن من الإعدادات في ══════════════════════════════════════════════════════════════════ */ :root { /* احتياطي في حال عدم حقن متغيّرات الهوية */ --brand: #701421; --brand-rgb: 112, 20, 33; --brand-on: #FFFFFF; --brand-900: #3E0B12; --brand-800: #540F19; --brand-700: #701421; --brand-600: #7C2432; --brand-500: #8D3B47; --brand-300: #B98A91; --brand-200: #DBC2C6; --brand-100: #EBDCDE; --brand-50: #FAF4F5; --accent2: #8A4A22; --accent2-rgb: 138, 74, 34; --accent2-on: #FFFFFF; --accent2-700: #713C1C; --accent2-100: #E8D9CE; --accent2-50: #F6EFEA; --gold: #C9A227; --gold-rgb: 201, 162, 39; --gold-on: #1A1113; --gold-100: #F0E4BE; --ink: #2A1A1D; --ink-rgb: 42, 26, 29; --sidebar: #3B1118; --sidebar-900: #260B0F; --sidebar-700: #4A1F26; --sidebar-on: #FFFFFF; --surface-tint: #FBF8F6; --radius: 14px; --radius-sm: 8px; --radius-lg: 22px; /* محايدات دافئة مشتقّة من الحبر */ --paper: #FBF8F6; --paper-2: #F5EFEC; --paper-3: #EFE6E4; --line: #E7DCD9; --line-soft: #F0E8E5; --text: var(--ink); --text-2: #6A575B; --text-3: #7A686C; --white: #FFFFFF; /* حالات */ --ok: #1F7A4D; --ok-bg: #E7F4EC; --warn: #9A6206; --warn-bg: #FBF0DC; --danger:#A32232; --danger-bg:#FBE9EB; --info: #1D5E86; --info-bg: #E6F1F7; /* الخطوط */ --font-display: "Amiri", "Scheherazade New", "Times New Roman", serif; --font-body: "IBM Plex Sans Arabic", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* مقياس الحجم */ --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-base: 0.9375rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; --fs-4xl: 3rem; --fs-5xl: 4rem; /* المسافات */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* الظلال — دافئة، مشتقة من الحبر */ --sh-1: 0 1px 2px rgba(var(--ink-rgb), .05), 0 1px 3px rgba(var(--ink-rgb), .04); --sh-2: 0 2px 6px rgba(var(--ink-rgb), .06), 0 6px 16px rgba(var(--ink-rgb), .05); --sh-3: 0 8px 24px rgba(var(--ink-rgb), .09), 0 2px 8px rgba(var(--ink-rgb), .05); --sh-4: 0 18px 48px rgba(var(--ink-rgb), .14); --ring: 0 0 0 3px rgba(var(--brand-rgb), .28); --ease: cubic-bezier(.22, .61, .36, 1); --dur: .22s; --container: 1180px; } /* ── التهيئة ───────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.75; color: var(--text); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--sp-3); font-weight: 700; line-height: 1.3; color: var(--text); letter-spacing: 0; } p { margin: 0 0 var(--sp-4); } p:last-child { margin-bottom: 0; } a { color: var(--accent2-700); text-decoration: none; transition: color var(--dur) var(--ease); } a:hover { color: var(--brand); } img, svg, video { max-width: 100%; height: auto; display: block; } ul, ol { margin: 0 0 var(--sp-4); padding-inline-start: 1.4em; } li { margin-bottom: var(--sp-1); } hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; } small { font-size: var(--fs-sm); } code, kbd, pre, .mono, .num { font-family: var(--font-mono); font-feature-settings: "tnum" 1; } /* الأرقام في الجداول والمبالغ تُحاذى عمودياً */ .num, td.num, th.num { font-variant-numeric: tabular-nums; direction: ltr; text-align: start; unicode-bidi: plaintext; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; } ::selection { background: rgba(var(--brand-rgb), .16); color: var(--brand-900); } /* شريط التمرير */ * { scrollbar-width: thin; scrollbar-color: var(--brand-200) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--brand-200); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--brand-300); background-clip: content-box; } /* ── تخطيط عام ─────────────────────────────────────────────────── */ .container { width: min(100% - 40px, var(--container)); margin-inline: auto; } @media (max-width: 640px) { .container { width: min(100% - 32px, var(--container)); } } .stack > * + * { margin-top: var(--sp-4); } .row { display: flex; gap: var(--sp-3); align-items: center; } .row-between { display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between; flex-wrap: wrap; } .row-end { display: flex; gap: var(--sp-2); align-items: center; justify-content: flex-end; flex-wrap: wrap; } .grow { flex: 1 1 auto; min-width: 0; } .wrap { flex-wrap: wrap; } .grid { display: grid; gap: var(--sp-4); } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1000px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); } } /* ── الشريط الهندسي (القط العسيري) — التوقيع البصري ───────────────── الأشكال تأتي من قناع SVG بلا لون، والألوان كلها من متغيّرات الهوية، حتى يتبدّل الشريط مع ألوان المكتب المحفوظة في الإعدادات. */ :root { /* مثلثات القط: 48×10 للشريط العريض، 24×4 للشريط الرفيع */ --qatt-mask-48: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10' viewBox='0 0 48 10'%3E%3Cpath d='M0 10 6 0l6 10zM12 0h12l-6 10zM24 10 30 0l6 10zM36 0h12l-6 10z' fill='%23000'/%3E%3C/svg%3E"); --qatt-mask-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='4' viewBox='0 0 24 4'%3E%3Cpath d='M0 4 3 0l3 4zM6 0h6l-3 4zM12 4 15 0l3 4zM18 0h6l-3 4z' fill='%23000'/%3E%3C/svg%3E"); } .qatt-band { position: relative; height: 10px; background-image: linear-gradient(var(--gold), var(--gold)); background-size: 100% 2px; background-position: bottom left; background-repeat: repeat-x; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .qatt-band::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient( 90deg, var(--brand) 0 12px, var(--accent2) 12px 24px, var(--brand) 24px 36px, var(--accent2) 36px 48px ); background-size: 48px 10px; background-position: top left; background-repeat: repeat-x; -webkit-mask-image: var(--qatt-mask-48); mask-image: var(--qatt-mask-48); -webkit-mask-size: 48px 10px; mask-size: 48px 10px; -webkit-mask-position: top left; mask-position: top left; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .qatt-band.is-light::before { background-image: linear-gradient( 90deg, rgba(255, 255, 255, .9) 0 12px, var(--gold) 12px 24px, rgba(255, 255, 255, .9) 24px 36px, var(--gold) 36px 48px ); } /* نسخة رفيعة تُستخدم كحد علوي للبطاقات والمطبوعات */ .qatt-rule { height: 4px; background-image: linear-gradient( 90deg, var(--brand) 0 6px, var(--accent2) 6px 12px, var(--brand) 12px 18px, var(--gold) 18px 24px ); background-size: 24px 4px; background-position: top left; background-repeat: repeat-x; -webkit-mask-image: var(--qatt-mask-24); mask-image: var(--qatt-mask-24); -webkit-mask-size: 24px 4px; mask-size: 24px 4px; -webkit-mask-position: top left; mask-position: top left; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* ── الأزرار ───────────────────────────────────────────────────── */ .btn { --btn-bg: var(--brand); --btn-fg: var(--brand-on); --btn-bd: var(--brand); display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 10px 20px; min-height: 42px; font: inherit; font-size: var(--fs-base); font-weight: 600; line-height: 1.2; color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .btn:hover { color: var(--btn-fg); transform: translateY(-1px); box-shadow: var(--sh-2); } .btn:active { transform: translateY(0); box-shadow: none; } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; } .btn .ic { flex: none; } .btn-primary { --btn-bg: var(--brand); --btn-bd: var(--brand); --btn-fg: var(--brand-on); } .btn-primary:hover { --btn-bg: var(--brand-800); --btn-bd: var(--brand-800); } .btn-copper { --btn-bg: var(--accent2); --btn-bd: var(--accent2); --btn-fg: var(--accent2-on); } .btn-copper:hover { --btn-bg: var(--accent2-700); --btn-bd: var(--accent2-700); } .btn-ghost { --btn-bg: transparent; --btn-bd: var(--line); --btn-fg: var(--text); } .btn-ghost:hover { --btn-bg: var(--paper-2); --btn-bd: var(--brand-200); --btn-fg: var(--brand); } .btn-outline { --btn-bg: transparent; --btn-bd: var(--brand); --btn-fg: var(--brand); } .btn-outline:hover { --btn-bg: var(--brand); --btn-fg: var(--brand-on); } .btn-light { --btn-bg: var(--white); --btn-bd: var(--white); --btn-fg: var(--brand); } .btn-light:hover { --btn-bg: var(--brand-50); --btn-bd: var(--brand-50); } .btn-onbrand { --btn-bg: transparent; --btn-bd: rgba(255,255,255,.45); --btn-fg: #fff; } .btn-onbrand:hover { --btn-bg: rgba(255,255,255,.12); --btn-bd: #fff; --btn-fg: #fff; } .btn-danger { --btn-bg: var(--danger); --btn-bd: var(--danger); --btn-fg: #fff; } .btn-danger:hover { --btn-bg: #8B1B29; --btn-bd: #8B1B29; } .btn-danger-soft { --btn-bg: var(--danger-bg); --btn-bd: transparent; --btn-fg: var(--danger); } .btn-danger-soft:hover { --btn-bg: var(--danger); --btn-fg: #fff; } .btn-wa { --btn-bg: #1FA855; --btn-bd: #1FA855; --btn-fg: #fff; } .btn-wa:hover { --btn-bg: #17914A; --btn-bd: #17914A; } .btn-lg { padding: 14px 28px; min-height: 52px; font-size: var(--fs-md); } .btn-sm { padding: 6px 12px; min-height: 32px; font-size: var(--fs-sm); border-radius: 6px; } .btn-icon { padding: 0; width: 34px; min-height: 34px; border-radius: 8px; } .btn-block { width: 100%; } /* ── الشارات ───────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-size: var(--fs-xs); font-weight: 600; line-height: 1.7; white-space: nowrap; background: var(--paper-3); color: var(--text-2); } .badge-brand { background: var(--brand-100); color: var(--brand-800); } .badge-copper { background: var(--accent2-100); color: var(--accent2-700); } .badge-gold { background: var(--gold-100); color: #7A6112; } .badge-ok { background: var(--ok-bg); color: var(--ok); } .badge-warn { background: var(--warn-bg); color: var(--warn); } .badge-danger { background: var(--danger-bg); color: var(--danger); } .badge-info { background: var(--info-bg); color: var(--info); } .badge-muted { background: var(--paper-3); color: var(--text-3); } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } /* ── النماذج ───────────────────────────────────────────────────── */ .field { margin-bottom: var(--sp-4); } .field:last-child { margin-bottom: 0; } .label { display: block; margin-bottom: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); } .label .req { color: var(--danger); margin-inline-start: 2px; } .label .opt { color: var(--text-3); font-weight: 400; font-size: var(--fs-xs); margin-inline-start: 4px; } .input, .select, .textarea { display: block; width: 100%; padding: 10px 14px; min-height: 44px; font: inherit; font-size: var(--fs-base); color: var(--text); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease); appearance: none; } .textarea { min-height: 110px; line-height: 1.8; resize: vertical; padding-top: 12px; } .input:hover, .select:hover, .textarea:hover { border-color: var(--brand-200); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); } .input::placeholder, .textarea::placeholder { color: var(--text-3); opacity: 1; } .input:disabled, .select:disabled, .textarea:disabled { background: var(--paper-2); color: var(--text-3); cursor: not-allowed; } .input[readonly] { background: var(--paper-2); } .select { padding-inline-end: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236A575B' stroke-width='2.2' 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 14px center; background-size: 14px; } .hint { margin-top: 6px; font-size: var(--fs-xs); color: var(--text-3); line-height: 1.7; } .err-text { margin-top: 6px; font-size: var(--fs-xs); color: var(--danger); font-weight: 600; } .input.is-error, .select.is-error, .textarea.is-error { border-color: var(--danger); } .check { display: inline-flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: var(--fs-base); line-height: 1.6; user-select: none; } .check input[type="checkbox"], .check input[type="radio"] { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--brand); flex: none; cursor: pointer; } /* حقل الملف */ .filefield { display: flex; align-items: center; gap: var(--sp-3); padding: 12px 14px; border: 1px dashed var(--brand-200); border-radius: var(--radius-sm); background: var(--brand-50); cursor: pointer; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); } .filefield:hover { border-color: var(--brand); background: var(--brand-100); } .filefield input[type="file"] { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); cursor: pointer; } .filefield .ic { color: var(--brand); flex: none; } /* ── البطاقات ──────────────────────────────────────────────────── */ .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--sh-1); } .card-pad { padding: var(--sp-5); } .card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line-soft); } .card-head h2, .card-head h3 { margin: 0; font-size: var(--fs-lg); font-weight: 700; } .card-body { padding: var(--sp-5); } .card-foot { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line-soft); background: var(--paper); border-radius: 0 0 var(--radius) var(--radius); } /* ── التنبيهات ─────────────────────────────────────────────────── */ .alert { display: flex; align-items: flex-start; gap: var(--sp-3); padding: 14px 16px; border-radius: var(--radius-sm); border-inline-start: 3px solid currentColor; font-size: var(--fs-base); line-height: 1.7; } .alert .ic { flex: none; margin-top: 3px; } .alert > div { flex: 1 1 auto; min-width: 0; } .alert-success { background: var(--ok-bg); color: var(--ok); } .alert-danger { background: var(--danger-bg); color: var(--danger); } .alert-warning { background: var(--warn-bg); color: var(--warn); } .alert-info { background: var(--info-bg); color: var(--info); } .alert strong { color: inherit; } /* ── أدوات ─────────────────────────────────────────────────────── */ .muted { color: var(--text-2); } .dim { color: var(--text-3); } .tiny { font-size: var(--fs-xs); } .sm { font-size: var(--fs-sm); } .lg { font-size: var(--fs-lg); } .bold { font-weight: 700; } .semi { font-weight: 600; } .center { text-align: center; } .end { text-align: end; } .start { text-align: start; } .nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); } .mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); } .mb-6 { margin-bottom: var(--sp-6); } .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 999; padding: 10px 18px; background: var(--brand); color: #fff; border-radius: 0 0 8px 8px; font-weight: 600; transition: top var(--dur) var(--ease); } .skip-link:focus { top: 0; color: #fff; } /* ── حركة ──────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }