.erp-scope-root { font-family: 'Cairo', sans-serif; } /* ═══════════════════════════════════════════════════════════════════ 🎨 FATOORA AI — FROZEN DESIGN SYSTEM (v2.0 — الهوية المعتمدة من الإدارة) لغة تصميم واحدة دائمة: فاتحة تنفيذية (Light Executive) — كحلي عميق (Navy) + تيل (Teal) + أرضية رمادية باردة شبه بيضاء + بطاقات بيضاء بظلال ناعمة جداً + مساحات بيضاء سخية. الوضع الداكن مُشتق من نفس التوكِنز. ممنوع إعادة التصميم — كل شاشة جديدة تستهلك هذه التوكِنز والكلاسات المشتركة فقط. ─────────────────────────────────────────────────────────────────── */ :root { color-scheme: light; /* ── Brand / primary (deep executive navy) ── */ --primary: #143D77; --primary-hover: #0F3163; --primary-soft: #E8EEF8; --primary-ring: rgba(20,61,119,.22); --ink: #143D77; --ink-hover: #0F3163; /* ── Secondary accent (teal — charts/AI highlights) ── */ --accent: #129BA6; --accent-hover: #0E828C; --accent-soft: #E1F4F5; /* ── Grounds & surfaces (elevation ladder) ── */ --bg-main: #F4F6FA; /* page ground (cool near-white) */ --bg-dark: #14213A; /* inverse (legacy name) */ --sidebar-bg: #FFFFFF; /* rail ground — أبيض زي المرجع المعتمد */ --surface-1: #FFFFFF; /* base card */ --card-bg: #FFFFFF; /* primary card surface */ --surface-2: #F9FAFD; /* raised / header wash */ --surface-3: #EFF3F9; /* hover / active fill */ --surface-inset: #F3F5FA; /* inputs / wells */ --input-bg: #FBFCFE; /* ── Lines ── */ --border: #E5E9F1; /* hairline */ --border-strong: #D2D9E6; /* ── Text ── */ --text-main: #14213A; --text-light: #FFFFFF; /* نص على أرضية كحلي (أزرار/بيلات) */ --text-gray: #5B6A87; --text-dim: #A2ACC0; /* placeholder-ish */ --text-muted: #78829B; /* ── Sidebar text (الرفّ فاتح → نص داكن) ── */ --sidebar-text: #2A3852; --sidebar-text-dim: #5B6A87; --sidebar-hover: #F1F4F9; /* ── Semantic ── */ --success: #178A5B; --success-bg: #E3F4EB; --danger: #CC4138; --danger-bg: #FBEAE8; --warning: #B47B10; --warning-bg: #FAF0DC; --info: #143D77; --info-bg: #E8EEF8; /* ── Module accents (used sparingly — one per module) ── */ --mod-invoiceai: #2F86C9; --mod-finance: #1F9D6F; --mod-sales: #D97A2C; --mod-inventory: #0E9AA0; --mod-reports: #5F6FD1; --mod-neutral: #5B6A87; /* ── Legacy gold (kept for any remaining refs) ── */ --gold-100: #FDECC8; --gold-600: #B45309; /* ── Radius scale ── */ --r-xs: 6px; --r-sm: 9px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px; /* ── Elevation / shadow (ناعمة جداً — زي المرجع) ── */ --shadow-xs: 0 1px 2px rgba(16,24,40,.04); --shadow-sm: 0 2px 8px rgba(16,24,40,.06); --shadow-md: 0 8px 24px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.04); --shadow-lg: 0 20px 48px rgba(16,24,40,.12), 0 6px 14px rgba(16,24,40,.06); --shadow-pop: var(--shadow-lg); /* ── Spacing scale (4pt) ── */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; /* ── Motion ── */ --ease: cubic-bezier(.2,.7,.2,1); --dur-fast: .12s; --dur: .18s; --dur-slow: .28s; /* ── Type ── */ --font-num: "SF Mono", Consolas, "Cascadia Code", ui-monospace, monospace; } /* ── Dark theme: same system, derived (مُشتق من نفس التوكِنز) ── */ [data-theme="dark"] { color-scheme: dark; --primary: #4C7DF0; --primary-hover: #6E97F5; --primary-soft: #17233F; --primary-ring: rgba(76,125,240,.35); --ink: #4C7DF0; --ink-hover: #6E97F5; --accent: #2FB9C4; --accent-hover: #55CBD5; --accent-soft: #0F2B33; --bg-main: #0A101E; --bg-dark: #E9EEF9; --sidebar-bg: #0C1322; --surface-1: #101a2e; --card-bg: #111C31; --surface-2: #16233D; --surface-3: #1C2B49; --surface-inset: #0C1424; --input-bg: #0D1626; --border: #1F2E4C; --border-strong: #2A3C61; --text-main: #E9EEF9; --text-light: #E9EEF9; --text-gray: #93A1C1; --text-dim: #667394; --text-muted: #6B789A; --sidebar-text: #E9EEF9; --sidebar-text-dim: #93A1C1; --sidebar-hover: #16233D; --success: #3DBE86; --success-bg: #10281D; --danger: #E86B62; --danger-bg: #2E1614; --warning: #E4A24C; --warning-bg: #2E2110; --info: #4C7DF0; --info-bg: #17233F; --mod-invoiceai: #4FA3DD; --mod-finance: #38BE8A; --mod-sales: #E2924C; --mod-inventory: #33BCC2; --mod-reports: #9C86E0; --mod-neutral: #93A1C1; --gold-100: #2E2712; --gold-600: #E7B858; --shadow-xs: 0 1px 2px rgba(0,0,0,.30); --shadow-sm: 0 2px 6px rgba(0,0,0,.32); --shadow-md: 0 10px 24px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.30); --shadow-lg: 0 24px 60px rgba(0,0,0,.52), 0 6px 16px rgba(0,0,0,.36); --shadow-pop: var(--shadow-lg); } /* legacy [data-theme="light"] selector: identical to :root (الافتراضي فاتح) */ [data-theme="light"] { color-scheme: light; } * { box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; transition: background-color 0.3s, color 0.3s, border-color 0.3s; } body { margin: 0; /* 🎨 FROZEN DS: الهوية الأساسية داكنة — أرضية كحلي عميق موحّدة */ background: var(--bg-main); color: var(--text-main); display: flex; height: 100vh; overflow: hidden; flex-direction: row; font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } /* 🎨 FROZEN DS v2: أرضية الصفحة الفاتحة — تدرّج بارد خفيف جداً فوق توكِن --bg-main (نفس عائلة اللون، إحساس تنفيذي متنفّس زي المرجع المعتمد) */ /* FROZEN DS v2: أرضية فاتحة بتدرّج ناعم جداً (الافتراضي) + أرضية داكنة للثيم الداكن */ body { background: linear-gradient(160deg, #EEF2F9 0%, var(--bg-main) 45%, #FBFCFE 100%); } [data-theme="dark"] body { background: linear-gradient(160deg, #0B1220 0%, var(--bg-main) 50%, #0A0F1B 100%); } [data-theme="dark"] body { background: var(--bg-main); } html[dir="ltr"] body { flex-direction: row-reverse; } .sidebar { width: 260px; /* FROZEN DS v2: رفّ فاتح (أبيض) بحدّ شعري — زي المرجع المعتمد */ background: var(--sidebar-bg); border-inline-end: 1px solid var(--border); color: var(--sidebar-text); display: flex; flex-direction: column; position: relative; z-index: 40; } .brand { padding: 15px; border-bottom: 1px solid var(--border); display: flex; justify-content: center; align-items: center; background-color: var(--sidebar-bg); } /* 🧭 ERP Stage 6.1 (Enterprise Workspace): القائمة الجانبية الطويلة (كانت 55 عنصر تحت 8 مجموعات) بقت رفّ ضيّق بأيقونات الوحدات الرئيسية بس (~10 وحدات)، وكل وحدة بتفتح لوحة "flyout" منفصلة جنبها بصفحاتها الحقيقية — بالظبط نفس عناصر
  • وonclick="switchTab(...)" الموجودين أصلاً، بس منقولين مكانياً تحت وحدتهم بدل قائمة واحدة طويلة. القائمة الفعلية جوه كل flyout لسه بتستخدم .menu/.menu li (نفس الشكل والسلوك الحالي تماماً) */ /* 🎨 FROZEN DS v2 (المرجع المعتمد): سايدبار نصي أبيض ~216px بمجموعات أكورديون إنلاين — أيقونة + اسم + شيفرون، والعنصر النشط بيل كحلي ممتلئ */ .sidebar { width: 216px; } .workspace-nav { position: relative; flex: 1; min-height: 0; display: flex; } .workspace-rail { list-style: none; margin: 0; padding: 10px 8px; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; } .rail-item { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; margin: 1px 4px; cursor: pointer; text-align: start; color: var(--sidebar-text); font-size: 13px; font-weight: 600; border-radius: var(--r-md); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .rail-item .rail-icon { font-size: 16px; line-height: 1; flex-shrink: 0; } .rail-item .rail-label { font-size: 13px; font-weight: 600; line-height: 1.2; flex: 1; } .rail-item .rail-chev { font-size: 15px; color: var(--text-dim); line-height: 1; transition: transform var(--dur) var(--ease); } .rail-item.expanded .rail-chev { transform: rotate(-90deg); } html[dir="ltr"] .rail-item.expanded .rail-chev { transform: rotate(90deg); } .rail-item:hover, .rail-item.flyout-open { background: var(--sidebar-hover); color: var(--sidebar-text); } /* العنصر النشط = بيل كحلي ممتلئ بنص أبيض — زي "Finance" في المرجع بالظبط */ .rail-item.active { color: #fff; background: var(--primary); box-shadow: var(--shadow-xs); } .rail-item.active .rail-chev { color: rgba(255,255,255,.7); } .rail-item.active:hover { background: var(--primary-hover); color: #fff; } .rail-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } /* مجموعات الأكورديون (نفس عناصر flyout الأصلية منقولة مكانياً وقت الإقلاع) */ /* flex:none — عشان على الموبايل (لما الرفّ يبقى flex column) الغلاف ميتضغطش ويقصّ محتواه */ .rail-sub-wrap { list-style: none; overflow: hidden; max-height: 0; flex: none; transition: max-height var(--dur-slow) var(--ease); } .rail-sub-wrap.open { max-height: 680px; } .menu.rail-sub { padding: 2px 4px 6px; margin: 0; flex: none; overflow: visible; } .menu.rail-sub { padding-inline-start: 18px; } .menu.rail-sub li { padding: 8px 10px; font-size: 12.5px; } .workspace-flyout { position: absolute; top: 0; inset-inline-start: 100%; width: 244px; height: 100%; background: var(--sidebar-bg); border-inline-start: 1px solid var(--border); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateX(-8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur); z-index: 130; display: flex; flex-direction: column; } html[dir="ltr"] .workspace-flyout { transform: translateX(8px); } .workspace-flyout.open { opacity: 1; visibility: visible; transform: translateX(0); } .flyout-panel { display: none; flex-direction: column; height: 100%; min-height: 0; } .flyout-panel.active { display: flex; } .flyout-title { padding: 16px 20px 12px; font-weight: 700; font-size: 13.5px; color: var(--sidebar-text); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .flyout-back-btn { display: none; background: none; border: none; color: var(--sidebar-text); font-size: 15px; cursor: pointer; padding: 0 2px; } .flyout-menu { list-style: none; margin: 0; padding: 8px; flex: 1; min-height: 0; overflow-y: auto; } .flyout-menu li { padding: 10px 12px; margin: 1px 0; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; color: var(--sidebar-text-dim); display: flex; align-items: center; gap: 9px; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .flyout-menu li:hover { background: var(--sidebar-hover); color: var(--sidebar-text); } .flyout-menu li.active { background: var(--primary-soft); color: var(--primary); } .menu { list-style: none; padding: 20px 0; margin: 0; flex: 1; min-height: 0; /* يسمح للقائمة بالانكماش والتمرير بدل دفع أزرار الأسفل خارج الشاشة */ overflow-y: auto; } .menu li { padding: 15px 25px; cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 10px; } .menu li:hover { background: var(--sidebar-hover); color: var(--sidebar-text); } /* ♿ Phase 4 (Accessibility): مؤشر تركيز واضح ومتّسق مع باقي الموقع عند التنقّل بلوحة المفاتيح (Tab) على عناصر القائمة الجانبية وأزرار الوضع الليلي/اللغة/الخروج */ .menu li:focus-visible, .bottom-actions [role="button"]:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; background: var(--sidebar-hover); } .menu li.active { background: var(--primary-soft); color: var(--primary); } /* 🧭 ERP Dashboard (Stage 1): تجميع القائمة الجانبية بعناوين مجموعات — تنظيم بصري فقط، بدون أي تغيير في آلية switchTab/التنقّل تحت كل عنصر */ .menu-group-label { padding: 16px 25px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; color: var(--text-dim); } .menu li:first-child.menu-group-label { padding-top: 4px; } .menu li.coming-soon { cursor: default; opacity: .55; } .menu li.coming-soon:hover { background: none; } .menu li .soon-badge { margin-inline-start: auto; font-size: 9px; font-weight: 700; background: var(--surface-3); color: var(--text-gray); padding: 2px 8px; border-radius: 20px; flex-shrink: 0; } .bottom-actions { border-top: 1px solid var(--border); } .logout-btn, .theme-btn, .lang-btn { padding: 15px 20px; cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 10px; } .theme-btn { color: var(--primary); } .theme-btn:hover { background: rgba(37, 99, 235, 0.1); } .lang-btn { color: var(--text-gray); } .lang-btn:hover { background: rgba(124, 134, 166, 0.1); } .logout-btn { color: var(--danger); } .logout-btn:hover { background: rgba(172, 43, 36, 0.1); } .main-content { flex: 1; padding: 30px; overflow-y: auto; display: flex; flex-direction: column; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 16px; flex-wrap: wrap; } .header h1 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -.015em; color: var(--text-main); } .user-info { background: var(--card-bg); padding: 6px 12px 6px 8px; border-radius: var(--r-pill); box-shadow: var(--shadow-xs); font-weight: 600; font-size: 12.5px; color: var(--text-main); display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); transition: border-color var(--dur-fast) var(--ease); } .user-info:hover { border-color: var(--border-strong); } /* 🧭 ERP Stage 6.1: شريط بحث عام + إنشاء سريع + إشعارات — كل الأزرار بتستدعي أفعال حقيقية موجودة أصلاً (نفس onclick بتاعة "إجراءات سريعة" في لوحة التحكم)؛ لا يوجد أي endpoint جديد هنا */ .workspace-search { position: relative; flex: 1; min-width: 160px; max-width: 340px; } .workspace-search input { width: 100%; padding: 9px 14px 9px 36px; border-radius: 20px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text-main); font-size: 13.5px; } html[dir="rtl"] .workspace-search input { padding: 9px 36px 9px 14px; } .workspace-search .search-icon { position: absolute; top: 50%; inset-inline-start: 12px; transform: translateY(-50%); color: var(--text-gray); font-size: 13px; pointer-events: none; } .workspace-search-results { display: none; position: absolute; top: calc(100% + 6px); inset-inline-start: 0; width: 100%; min-width: 280px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px rgba(15,23,42,0.15); max-height: 360px; overflow-y: auto; z-index: 60; } .workspace-search-results.active { display: block; } .ws-search-group-label { padding: 8px 14px 4px; font-size: 10.5px; font-weight: 700; color: var(--text-gray); text-transform: uppercase; letter-spacing: .05em; } .ws-search-row { padding: 9px 14px; font-size: 13px; cursor: pointer; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; } .ws-search-row:hover { background: var(--input-bg); } .ws-search-empty { padding: 16px; font-size: 12.5px; color: var(--text-gray); text-align: center; } .workspace-header-actions { display: flex; align-items: center; gap: 8px; position: relative; } .ws-icon-btn { width: 36px; height: 36px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--card-bg); color: var(--text-gray); font-size: 15px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; position: relative; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .ws-icon-btn:hover { background: var(--surface-3); color: var(--text-main); border-color: var(--border-strong); } .ws-quick-create-btn { background: var(--primary); color: #fff; border: none; border-radius: var(--r-md); padding: 8px 15px 8px 11px; font-weight: 650; font-size: 12.5px; display: flex; align-items: center; gap: 6px; cursor: pointer; box-shadow: var(--shadow-xs); flex-shrink: 0; transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } html[dir="rtl"] .ws-quick-create-btn { padding: 8px 11px 8px 15px; } .ws-quick-create-btn:hover { background: var(--primary-hover); box-shadow: var(--shadow-sm); } .ws-dropdown-panel { display: none; position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 220px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 30px rgba(15,23,42,0.16); z-index: 70; overflow: hidden; } .ws-dropdown-panel.active { display: block; } .ws-dropdown-panel .ws-dropdown-title { padding: 10px 14px; font-size: 11px; font-weight: 700; color: var(--text-gray); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); } .ws-dropdown-panel button.ws-dropdown-item { width: 100%; background: none; border: none; text-align: start; padding: 10px 14px; font-size: 13.5px; color: var(--text-main); display: flex; align-items: center; gap: 10px; cursor: pointer; } .ws-dropdown-panel button.ws-dropdown-item:hover { background: var(--input-bg); } .ws-notif-empty { padding: 22px 14px; text-align: center; color: var(--text-gray); font-size: 12.5px; } @media (max-width: 900px) { .workspace-search { display: none; } } /* 🧭 ERP Stage 6.1: شريط المسار (Breadcrumb) + عنوان الصفحة/وصفها/أزرار إجراءاتها — فوق محتوى كل صفحة، معبّأ من WORKSPACE_PAGE_META (خريطة صغيرة لكل section موجودة أصلاً، بلا أي بيانات وهمية) */ .ws-breadcrumb { font-size: 12.5px; color: var(--text-gray); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .ws-breadcrumb .crumb-sep { opacity: .5; } .ws-breadcrumb .crumb-current { color: var(--text-main); font-weight: 600; } .ws-page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; } .ws-page-header h2 { margin: 0 0 4px; font-size: 20px; font-weight: 650; letter-spacing: -.015em; color: var(--text-main); } .ws-page-header p { margin: 0; font-size: 13px; color: var(--text-gray); max-width: 60ch; } .ws-page-header-actions { display: flex; gap: 8px; flex-wrap: wrap; } .ws-page-header-actions .btn { width: auto; padding: 9px 16px; font-size: 13.5px; } .section { display: none; animation: fadeIn 0.4s ease; } .section.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .card { background: var(--card-bg); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-sm); margin-bottom: 20px; border: 1px solid var(--border); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .card h2 { margin-top: 0; margin-bottom: 18px; color: var(--text-main); font-size: 16px; font-weight: 650; letter-spacing: -.01em; border-bottom: 1px solid var(--border); padding-bottom: 12px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-main); } .form-control { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; background-color: var(--input-bg); color: var(--text-main); } .form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } .form-control:disabled { background-color: var(--border); color: var(--text-gray); cursor: not-allowed; } [data-theme="dark"] .form-control:disabled { background-color: var(--bg-main); opacity: 0.7; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .file-upload-wrapper { border: 2px dashed var(--border); border-radius: 12px; padding: 30px; text-align: center; background: var(--input-bg); cursor: pointer; position: relative; } .file-upload-wrapper:hover { border-color: var(--primary); } .file-upload-wrapper input[type="file"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .btn { background: var(--ink); color: white; border: none; padding: 11px 20px; border-radius: var(--r-md); font-size: 14px; font-weight: 650; cursor: pointer; width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px; box-shadow: var(--shadow-xs); transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .btn:hover { background: var(--ink-hover); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn:active { transform: translateY(0); } .btn:disabled { background: var(--text-gray); cursor: not-allowed; box-shadow: none; transform: none; } .btn-save-settings { background: var(--success); margin-top: 10px; width: auto; display: inline-block; } .btn-save-settings:hover { filter: brightness(0.92); } /* 📊 شريط التقدم الفخم الجديد الخاص بالخلفية */ .progress-container { display: none; margin-top: 20px; background: var(--input-bg); padding: 15px; border-radius: 8px; border: 1px solid var(--border); } .progress-bar-bg { width: 100%; height: 12px; background: var(--border); border-radius: 6px; overflow: hidden; margin-bottom: 10px; } .progress-bar-fill { height: 100%; width: 0%; background: var(--primary); transition: width 0.4s ease; } .progress-text { font-size: 14px; font-weight: bold; color: var(--text-main); text-align: center; } /* 📈 شبكة لوحة الإحصائيات المالي */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 25px; } .kpi-card { background: var(--input-bg); padding: 20px; border-radius: 12px; border: 1px solid var(--border); text-align: center; transition: box-shadow 0.2s ease, transform 0.2s ease; } .kpi-card:hover { box-shadow: 0 4px 14px rgba(18,25,43,0.08); transform: translateY(-1px); } /* 🎨 FROZEN DS v2 — بطاقات لوحة التحكم التنفيذية (تطابق المرجع المعتمد): بطاقة بيضاء نظيفة، عنوان رمادي صغير بأحرف متباعدة، رقم كبير كحلي بأرقام جدولية، أيقونة/شيّة لونية خفيفة للوحدة، ظل ناعم جداً، رفعة عند المرور */ .erp-scope-root .card.shadow-sm, .erp-scope-root .card.border-0 { border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; box-shadow: var(--shadow-sm) !important; background: var(--card-bg) !important; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease); } /* بطاقات المؤشرات (KPI) — رقم كبير كحلي + عنوان رمادي صغير */ .erp-scope-root .row.g-3 > [class*="col-"] > .card { padding: 16px 18px 14px !important; min-height: 96px; display: flex; flex-direction: column; justify-content: center; gap: 5px; } .erp-scope-root .row.g-3 > [class*="col-"] > .card:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-2px); border-color: var(--border-strong) !important; } .erp-scope-root .card .text-muted.small.fw-bold { color: var(--text-gray) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .02em; text-transform: none; } .erp-scope-root .card .fs-4.fw-bold { font-size: 24px !important; font-weight: 700 !important; letter-spacing: -.02em; color: var(--text-main); font-variant-numeric: tabular-nums; line-height: 1.15; } /* عنوان لوحة الرسم البياني */ .erp-scope-root .card .fw-bold[style*="13.5px"], .erp-scope-root .panel-card-title { font-size: 13px !important; font-weight: 650 !important; color: var(--text-main); letter-spacing: -.01em; } .erp-scope-root .coming-soon { opacity: .62; } .erp-scope-root .coming-soon .fs-4 { font-size: 13px !important; font-weight: 700 !important; color: var(--text-dim) !important; } /* شارة صغيرة أعلى بطاقة KPI (اتجاه/قيمة مساعدة) */ .kpi-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); font-variant-numeric: tabular-nums; width: fit-content; } .kpi-chip.up { color: var(--success); background: var(--success-bg); } .kpi-chip.down { color: var(--danger); background: var(--danger-bg); } .kpi-chip.flat { color: var(--text-gray); background: var(--surface-3); } /* رأس لوحة (عنوان + إجراء) للرسوم */ .ds-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .ds-panel-head .t { font-size: 13px; font-weight: 650; color: var(--text-main); letter-spacing: -.01em; } .ds-panel-head .s { font-size: 11px; color: var(--text-gray); } .ds-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } .ds-donut-center b { font-size: 22px; font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; line-height: 1; } .ds-donut-center span { font-size: 10.5px; color: var(--text-gray); margin-top: 3px; } .ds-legend { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; } .ds-legend .row-l { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-gray); } .ds-legend .row-l i { width: 9px; height: 9px; border-radius: 3px; flex: none; } .ds-legend .row-l b { margin-inline-start: auto; color: var(--text-main); font-variant-numeric: tabular-nums; font-weight: 650; } .kpi-title { font-size: 14px; color: var(--text-gray); margin-bottom: 10px; line-height: 1.4; } .kpi-value { font-size: 26px; font-weight: bold; color: var(--text-main); font-family: var(--font-num); font-variant-numeric: tabular-nums; transition: opacity 0.15s ease; } .kpi-trend { font-size: 11px; font-weight: 700; margin-top: 6px; font-family: var(--font-num); } .kpi-trend.up { color: var(--success); } .kpi-trend.down { color: var(--danger); } /* 🦴 Final Polish (Task 2 — Dashboard Polish): حالة تحميل مؤقتة (skeleton) لقيم لوحات المعلومات أثناء انتظار البيانات — بديل بصري أفضل من إظهار "0" ثابت وكأنها قيمة حقيقية قبل ما تتأكد من السيرفر. تعديل شكلي بحت، مفيش أي تغيير في منطق أو توقيت جلب البيانات نفسه */ .kpi-value.is-loading { color: transparent; position: relative; border-radius: 4px; overflow: hidden; display: inline-block; min-width: 48px; } .kpi-value.is-loading::before { content: ""; position: absolute; inset: 0; border-radius: 4px; background: linear-gradient(90deg, var(--border) 25%, var(--card-bg) 50%, var(--border) 75%); background-size: 200% 100%; animation: dash-skeleton-sweep 1.2s ease-in-out infinite; } @keyframes dash-skeleton-sweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .feed-skeleton-row { height: 42px; border-radius: 8px; margin-bottom: 10px; background: linear-gradient(90deg, var(--border) 25%, var(--card-bg) 50%, var(--border) 75%); background-size: 200% 100%; animation: dash-skeleton-sweep 1.2s ease-in-out infinite; } /* ═══ Stage 6.2 — بطاقة المؤشر التنفيذية الموحَّدة (.ds-kpi) ═══ الكلاس ده هو المصدر الوحيد لشكل أي بطاقة مؤشر في النظام: نفس الارتفاع (h:100% + محتوى مرن)، نفس الحشو، نفس الزوايا، نفس الظل، نفس الخط، نفس الحركة. أي تعديل شكلي مستقبلي يتم هنا فقط. كل الألوان من التوكنز الموجودة أصلاً — مفيش ثيم جديد ولا قيم لونية ثابتة (راجع PART 5/7). */ .ds-kpi { position: relative; height: 100%; display: flex; flex-direction: column; padding: 16px 16px 12px; border-radius: var(--r-md); background: var(--card-bg); border: 1px solid var(--border); box-shadow: var(--shadow-xs); overflow: hidden; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; } /* شريط لوني رفيع على حافة البداية — يفرّق المؤشرات بصرياً بدون ألوان صارخة */ .ds-kpi::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--kpi-accent, var(--primary)); opacity: .85; } .ds-kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-strong); } .ds-kpi-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .ds-kpi-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-sm); font-size: 16px; line-height: 1; flex: none; background: color-mix(in srgb, var(--kpi-accent, var(--primary)) 12%, transparent); } .ds-kpi-chip { display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-pill); font-variant-numeric: tabular-nums; white-space: nowrap; } .ds-kpi-chip.up { color: var(--success); background: var(--success-bg); } .ds-kpi-chip.down { color: var(--danger); background: var(--danger-bg); } .ds-kpi-chip.flat { color: var(--text-gray); background: var(--surface-3); } .ds-kpi-title { font-size: 12px; font-weight: 600; color: var(--text-gray); line-height: 1.35; margin-bottom: 4px; min-height: 2.7em; } .ds-kpi-value { font-size: 24px; font-weight: 700; color: var(--text-main); line-height: 1.15; font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -.02em; word-break: break-word; } /* الشارت المصغَّر: ارتفاع ثابت دايماً — حتى لو مفيش سلسلة بيانات — عشان كل البطاقات في الصف تفضل بنفس الارتفاع بالظبط (PART 5) */ .ds-kpi-spark { height: 30px; margin-top: 10px; } .ds-kpi-spark svg { display: block; width: 100%; height: 100%; } .ds-kpi-note { font-size: 11px; color: var(--text-dim); margin-top: 10px; height: 30px; display: flex; align-items: center; } .ds-kpi[data-kpi-state="empty"] .ds-kpi-value, .ds-kpi[data-kpi-state="error"] .ds-kpi-value { color: var(--text-dim); font-weight: 600; } .ds-kpi[data-kpi-state="error"] .ds-kpi-note { color: var(--danger); } .ds-kpi[data-kpi-state="error"]::before { background: var(--danger); } /* حالة التحميل: نفس أسلوب الـ skeleton المستخدم في باقي اللوحات */ .ds-kpi-value.is-loading { color: transparent; position: relative; border-radius: 4px; overflow: hidden; display: inline-block; min-width: 90px; min-height: 1.15em; } .ds-kpi-value.is-loading::before { content: ""; position: absolute; inset: 0; border-radius: 4px; background: linear-gradient(90deg, var(--border) 25%, var(--card-bg) 50%, var(--border) 75%); background-size: 200% 100%; animation: dash-skeleton-sweep 1.2s ease-in-out infinite; } @media (max-width: 575.98px) { .ds-kpi { padding: 13px 13px 10px; } .ds-kpi-value { font-size: 20px; } .ds-kpi-title { min-height: 2.6em; } } @media (prefers-reduced-motion: reduce) { .ds-kpi, .ds-kpi:hover { transition: none; transform: none; } .ds-kpi-value.is-loading::before { animation: none; } } /* 🗒️ حالة "لا توجد بيانات بعد" / حالة خطأ — نمط بصري موحّد بدل ما كل شاشة تخترع شكل مختلف (أيقونة + نص باهت، بمنتصف المساحة) */ .dashboard-empty-state, .dashboard-error-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px 15px; color: var(--text-gray); font-size: 13px; text-align: center; } .dashboard-empty-state .icon, .dashboard-error-state .icon { font-size: 26px; opacity: 0.6; } .dashboard-error-state { color: var(--danger); } /* 📊 صف الرسمين البيانيين (الاتجاه + التصنيف) للوحة الإحصائيات — نفس التنسيق الحالي بالظبط على الشاشات الكبيرة، بس بيرجع عمود واحد على الموبايل (نفس نقطة الكسر المستخدمة أصلاً للقائمة الجانبية، 900px) */ .chart-row-2col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-top: 30px; } @media (max-width: 900px) { .chart-row-2col { grid-template-columns: 1fr; } } .range-chip { font-size: 12px; font-weight: 600; padding: 8px 14px; border-radius: 8px; background: var(--input-bg); border: 1px solid var(--border); color: var(--text-main); cursor: pointer; } .range-chip.active { background: var(--ink); color: white; border-color: var(--ink); } .alert { padding: 15px; border-radius: 8px; margin-bottom: 20px; display: none; font-weight: 600; } /* 🔗 Stage 9 (Step 5): تنبيهات لوحة التحكم القابلة للضغط — نفس بطاقة .alert، بس بحالة hover/focus خفيفة توضّح إنها تفاعلية */ .alert[role="button"]:hover { filter: brightness(0.97); } .alert[role="button"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } .alert.success { background: var(--success-bg); color: var(--success); display: block; border: 1px solid var(--success); } .alert.error { background: var(--danger-bg); color: var(--danger); display: block; border: 1px solid var(--danger); } /* 🔔 Stage 8 (7.2): warning/info مفقودتين قبل كده — نفس أسلوب success/error بالظبط، بس بألوان الـtokens الموجودة أصلاً (--warning/--primary-soft) */ .alert.warning { background: var(--warning-bg); color: var(--warning); display: block; border: 1px solid var(--warning); } .alert.info { background: var(--primary-soft); color: var(--primary); display: block; border: 1px solid var(--primary); } .badge { padding: 5px 10px; border-radius: 20px; font-size: 12px; font-weight: bold; } .badge.super_admin { background: var(--gold-100); color: var(--gold-600); } .badge.admin { background: var(--border); color: var(--text-main); } .badge.user { background: rgba(124,134,166,0.15); color: var(--text-gray); } .automation-card { border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 20px; display: flex; align-items: flex-start; gap: 20px; background: var(--input-bg); } .auto-icon { font-size: 40px; background: var(--card-bg); padding: 15px; border-radius: 12px; box-shadow: 0 1px 3px rgba(18,25,43,0.05); } .auto-details { flex: 1; } .auto-details h3 { margin: 0 0 10px 0; color: var(--bg-dark); } .auto-details p { margin: 0 0 15px 0; color: var(--text-gray); font-size: 14px; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--border); transition: .4s; border-radius: 34px; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .slider { background-color: var(--primary); } input:checked + .slider:before { transform: translateX(26px); background-color: var(--ink); } .api-key-box { background: var(--card-bg); border: 1px solid var(--border); padding: 20px; border-radius: 8px; margin-top: 15px; display: none; } .system-email-box { background: var(--gold-100); color: var(--gold-600); padding: 8px 12px; border-radius: 6px; font-family: var(--font-num); font-size: 14px; display: inline-block; margin-top: 5px; } .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(18,25,43,0.6); z-index: 1000; justify-content: center; align-items: center; } .modal-content { background: var(--card-bg); padding: 30px; border-radius: 12px; width: 90%; max-width: 550px; max-height: 90vh; overflow-y: auto; border: 1px solid var(--border); } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 15px; } .modal-header h2 { margin: 0; color: var(--bg-dark); } .close-modal { cursor: pointer; font-size: 24px; color: var(--danger); font-weight: bold; } .permission-box { border: 1px solid var(--border); padding: 15px; border-radius: 8px; margin-bottom: 15px; background: var(--input-bg); display: flex; justify-content: space-between; align-items: center; } .perm-title { font-weight: bold; color: var(--bg-dark); } .perm-desc { font-size: 12px; color: var(--text-gray); margin-top: 5px; } .action-btn { padding: 6px 12px; border-radius: 6px; border: none; cursor: pointer; font-weight: bold; font-size: 12px; color: white; display: inline-flex; align-items: center; gap: 5px;} .btn-edit { background: var(--ink); } .feature-tag { display: inline-block; padding: 3px 8px; background: var(--gold-100); color: var(--gold-600); font-size: 11px; border-radius: 4px; margin-left: 5px; font-weight: bold; border: 1px solid var(--border);} html[dir="ltr"] .feature-tag { margin-left: 0; margin-right: 5px; } /* 📱 Task 18: بانر ترويجي احترافي لأداة الالتقاط السريع من الموبايل */ .mobile-capture-promo { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding: 14px 18px; background: linear-gradient(135deg, var(--gold-100), var(--input-bg)); border: 1px solid var(--primary); border-radius: 12px; text-decoration: none; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease; } .mobile-capture-promo:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25); } .mobile-capture-icon { font-size: 28px; width: 50px; height: 50px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--card-bg); border-radius: 50%; border: 1px solid var(--border); } .mobile-capture-title { font-weight: bold; color: var(--bg-dark); font-size: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } .mobile-capture-desc { font-size: 12px; color: var(--text-gray); margin-top: 3px; } .mobile-capture-arrow { margin-inline-start: auto; font-size: 20px; color: var(--primary); flex-shrink: 0; } #quotaText, #kpiTotalInvoices, #kpiTotalValue, #kpiTotalTax { font-family: var(--font-num); font-variant-numeric: tabular-nums; } /* 🎨 Task 19: زر شرائحي (Pill toggle) لاختيار وجهة الحفظ بدل القائمة المنسدلة */ .dest-toggle { display: flex; background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; padding: 4px; gap: 4px; } .dest-pill { flex: 1; padding: 10px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 13px; color: var(--text-gray); transition: all 0.2s ease; font-family: inherit; } .dest-pill.active { background: var(--card-bg); color: var(--bg-dark); box-shadow: 0 2px 6px rgba(0,0,0,0.08); } /* 🧾 Task 19: تخطيط عمودين لتاب الرفع اليدوي + بطاقة آخر الفواتير المعالجة */ .upload-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; } @media (max-width: 900px) { .upload-grid { grid-template-columns: 1fr; } } .batch-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); } .batch-row:last-child { border-bottom: none; } .batch-row-num { width: 30px; height: 30px; border-radius: 8px; background: var(--input-bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; color: var(--text-gray); flex-shrink: 0; font-family: var(--font-num); } .batch-row-info { flex: 1; min-width: 0; } .batch-row-supplier { font-weight: bold; font-size: 13px; color: var(--bg-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .batch-row-date { font-size: 11px; color: var(--text-gray); margin-top: 2px; } .batch-row-amount { font-family: var(--font-num); font-weight: bold; font-size: 14px; text-align: end; white-space: nowrap; } /* 🏷️ Stage 6.3: تعريف .batch-status-pill الخاص اتشال — بقى بياخد شكله من قاعدة .ds-badge الموحَّدة تحت (نفس الحشو/الخط/نصف القطر مع باقي النظام بدل 3px 9px و bold اللي كانت مختلفة شوية). المتبقّي هنا الهامش بس. */ .batch-status-pill { margin-top: 4px; } /* 🧩 ERP Stage 1: تبويبات "جديد/قائمة" الداخلية المتبقية جوه صفحتي التركيبات وعروض الأسعار (بعد ما بقت كل صفحة مبيعات عنصر مستقل في القائمة الجانبية بدل تبويبات فرعية) */ .sales-inner-panel { display: none; } .sales-inner-panel.active { display: block; } /* 🎨 Sales Workflow Redesign: تحسين شكل جداول صفحات المبيعات كلها (عملاء، تركيبات، عروض أسعار، ملف العميل) — رؤوس أوضح، تظليل متبادل خفيف للصفوف، وتأثير عند المرور بالماوس، لمظهر أكتر احترافية بدون أي تغيير في البيانات أو الوظيفة. .sales-module-page موجودة على كل صفحات المبيعات الخمسة المستقلة، فالتأثير بيقتصر عليها فقط ومبيأثرش على باقي الموقع */ .sales-module-page table select.form-control { cursor: pointer; } /* ═══════════════════════════════════════════════════════════════════ 🗂️ Stage 6.3 — جدول ERP الموحَّد (.ds-table) ─────────────────────────────────────────────────────────────────── ده المصدر الوحيد لشكل أي جدول في النظام: المسافات، ارتفاع الصف، الخطوط، الرأس الثابت، الحدود، تأثير المرور، والتحديد. أي جدول جديد بياخد class="ds-table" وخلاص — ممنوع تنسيق جدول بـ inline styles. الأرقام هنا هي نفس قيم نمط FROZEN DS v2 اللي كان مطبَّق على لوحات التحكم وصفحات المبيعات بس؛ Stage 6.3 عمّمها على كل الجداول (فواتير، مخزون، مستودعات، حجوزات، تحويلات، تسويات، مستخدمين، سجلات، تقارير…) بدل 7 أنماط مختلفة كانت موجودة قبل كده. ═══════════════════════════════════════════════════════════════════ */ .ds-table, .erp-scope-root table, .sales-module-page table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .ds-table thead th, .erp-scope-root table thead th, .sales-module-page table thead th { background: var(--surface-2) !important; color: var(--text-gray) !important; font-weight: 700 !important; font-size: 11px !important; letter-spacing: .03em; text-align: start; padding: 11px 12px !important; border: none !important; border-bottom: 1px solid var(--border) !important; white-space: nowrap; position: sticky; top: 0; z-index: 2; } .ds-table tbody td, .erp-scope-root table tbody td, .sales-module-page table tbody td { padding: 11px 12px !important; border: none !important; border-bottom: 1px solid var(--border) !important; color: var(--text-main); vertical-align: middle; font-variant-numeric: tabular-nums; } .ds-table tbody tr, .erp-scope-root table tbody tr, .sales-module-page table tbody tr { transition: background-color .12s var(--ease); background: transparent !important; } .ds-table tbody tr:nth-child(even), .erp-scope-root table tbody tr:nth-child(even), .sales-module-page table tbody tr:nth-child(even) { background: transparent !important; } .ds-table tbody tr:hover, .erp-scope-root table tbody tr:hover, .sales-module-page table tbody tr:hover { background: var(--surface-3) !important; } .ds-table tbody tr:last-child td, .erp-scope-root table tbody tr:last-child td { border-bottom: none !important; } /* صف محدَّد (checkbox) — نفس الشكل في كل الجداول */ .ds-table tbody tr.is-selected, .ds-table tbody tr:has(input[type="checkbox"]:checked) { background: var(--primary-soft) !important; } /* أعمدة رقمية/إجراءات: محاذاة موحَّدة عبر data-attribute بدل inline style */ .ds-table [data-align="center"] { text-align: center !important; } .ds-table [data-align="end"] { text-align: end !important; } /* رأس قابل للفرز */ .ds-table thead th[data-sort] { cursor: pointer; user-select: none; } .ds-table thead th[data-sort]:hover { color: var(--text-main) !important; background: var(--surface-3) !important; } /* 📦 غلاف الجدول: التمرير الأفقي يحصل هنا بس — الصفحة نفسها عمرها ما تتمرّر أفقياً (مطلب Stage 6.3 للموبايل/التابلت) */ .ds-table-wrap { width: 100%; overflow-x: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* 🧰 شريط أدوات الجدول الموحَّد: عنوان + وصف + بحث + فلتر + تصدير + تحديث + أعمدة. الأزرار كلها بنفس المقاس والتباعد في كل الصفحات */ .ds-table-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .ds-table-toolbar .tt-heading { min-width: 0; } .ds-table-toolbar .tt-title { font-size: 15px; font-weight: 650; color: var(--text-main); letter-spacing: -.01em; margin: 0; } .ds-table-toolbar .tt-desc { font-size: 12px; color: var(--text-gray); margin-top: 3px; } .ds-table-toolbar .tt-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ds-tool-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--card-bg); color: var(--text-main); cursor: pointer; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .ds-tool-btn:hover { background: var(--surface-3); border-color: var(--border-strong); } .ds-tool-btn.danger { color: var(--danger); border-color: var(--danger-bg); background: var(--danger-bg); } .ds-tool-btn.danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); } .ds-tool-search { position: relative; display: inline-flex; align-items: center; } .ds-tool-search input { height: 34px; padding: 0 32px 0 12px; width: 220px; max-width: 100%; font-size: 12.5px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--input-bg); color: var(--text-main); } .ds-tool-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); } .ds-tool-search::after { content: "🔍"; position: absolute; inset-inline-end: 10px; font-size: 12px; opacity: .5; pointer-events: none; } /* 🏷️ شارة الحالة الموحَّدة (.ds-badge) — نفس نصف القطر/الحشو/الخط في كل مكان، والألوان من التوكنز الموجودة فقط. النغمة بتتحدَّد بكلاس واحد */ .ds-badge, .ds-pill, .batch-status-pill { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 11px; font-weight: 700; line-height: 1.5; padding: 3px 10px; border-radius: var(--r-pill); } .ds-badge::before, .ds-pill::before, .batch-status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; flex: none; } /* النغمات — كل أسماء الحالات القديمة بتتخريط على نفس الخمس نغمات */ .ds-badge.ok, .ds-pill.ok, .batch-status-compliant { color: var(--success); background: var(--success-bg); } /* مدفوع/مكتمل/نشط */ .ds-badge.warn, .ds-pill.warn, .batch-status-no_qr { color: var(--warning); background: var(--warning-bg); } /* معلَّق/محجوز/مخزون منخفض */ .ds-badge.bad, .ds-pill.bad, .batch-status-duplicate { color: var(--danger); background: var(--danger-bg); } /* ملغي/منتهي/متأخر */ .ds-badge.info, .ds-pill.info { color: var(--primary); background: var(--primary-soft); } /* قيد التنفيذ/مُرسَل */ .ds-badge.neutral, .ds-pill.neutral { color: var(--text-gray); background: var(--surface-3); } /* غير نشط/غير محدَّد */ .ds-badge.plain::before { display: none; } /* شارات Bootstrap القديمة داخل الجداول تاخد نفس الشكل بدل شكل ثالث */ .ds-table .badge, .erp-scope-root table .badge, .sales-module-page table .badge { font-size: 11px !important; font-weight: 700 !important; padding: 3px 10px !important; border-radius: var(--r-pill) !important; color: var(--text-gray) !important; background: var(--surface-3) !important; } /* ⚙️ زر إجراء أيقوني داخل الصف (.ds-act) — نفس المقاس والتباعد والهوفر في كل الجداول. الأزرار بتتلمّ في .ds-act-group */ .ds-act-group { display: inline-flex; align-items: center; gap: 6px; } .ds-act { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; padding: 0; font-size: 13px; line-height: 1; border-radius: var(--r-xs); border: 1px solid transparent; background: transparent; color: var(--text-gray); cursor: pointer; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .ds-act:hover { background: var(--surface-3); color: var(--text-main); border-color: var(--border); } .ds-act.danger:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-bg); } .ds-act.primary:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-soft); } .ds-act:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } .ds-act[disabled] { opacity: .4; cursor: not-allowed; } /* 🔗 توحيد أزرار الإجراءات الموجودة أصلاً داخل صفوف الجداول. النظام فيه 4 أنواع أزرار اتراكموا مع الوقت (.action-btn / .btn / .btn-ghost / .btn-primary) بمقاسات وحشو مختلفة لكل واحد. القاعدة دي بتخليهم كلهم بنفس الارتفاع والحشو والخط والهوفر جوه الجداول بس — من غير ما نحذف نصوص الأزرار (زي "استعادة"/"استهلاك"/"إلغاء") اللي المستخدم محتاجها عشان يفرّق بين إجراءين في نفس الصف. */ .ds-table td button:not(.ds-act), .erp-scope-root table td button:not(.ds-act), .sales-module-page table td button:not(.ds-act) { display: inline-flex !important; align-items: center; justify-content: center; gap: 5px; width: auto !important; height: 28px; padding: 0 10px !important; font-size: 11.5px !important; font-weight: 600; line-height: 1; white-space: nowrap; border-radius: var(--r-xs) !important; border: 1px solid var(--border); cursor: pointer; vertical-align: middle; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } /* مجموعة أزرار في نفس الخلية = نفس التباعد في كل الجداول */ .ds-table td button + button, .erp-scope-root table td button + button, .sales-module-page table td button + button { margin-inline-start: 6px; } /* 📄 ترقيم الصفحات الموحَّد (.ds-pager) — نفس الشكل في كل الجداول */ .ds-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; } .ds-pager button { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 14px; font-size: 12.5px; font-weight: 600; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--card-bg); color: var(--text-main); cursor: pointer; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .ds-pager button:hover:not([disabled]) { background: var(--surface-3); border-color: var(--border-strong); } .ds-pager button[disabled] { opacity: .45; cursor: not-allowed; } .ds-pager .pager-info { font-size: 12.5px; color: var(--text-gray); font-variant-numeric: tabular-nums; } /* 🗒️ حالة "لا توجد بيانات" الموحَّدة: أيقونة + عنوان + وصف. ليها مسارَين في النظام — صف جوه الجدول (.ds-table-empty) لما الجدول بيرسم صف فاضي، أو عنصر مجاور للجدول (.ds-empty) في الشاشات اللي بتخفي الجدول كله. الاتنين بياخدوا نفس الشكل بالظبط من نفس القاعدة. */ .ds-table-empty { padding: 40px 16px !important; text-align: center !important; border-bottom: none !important; } .ds-empty { padding: 40px 16px; text-align: center; } .ds-table-empty .e-icon, .ds-empty .e-icon { font-size: 30px; opacity: .45; line-height: 1; } .ds-table-empty .e-title, .ds-empty .e-title { font-size: 13.5px; font-weight: 650; color: var(--text-main); margin-top: 10px; } .ds-table-empty .e-desc, .ds-empty .e-desc { font-size: 12px; color: var(--text-gray); margin-top: 4px; } /* 🦴 صفوف هيكلية أثناء التحميل — بديل السبينر جوه الجداول */ .ds-skel-cell { padding: 11px 12px !important; } .ds-skel-cell span { display: block; height: 11px; border-radius: 4px; background: linear-gradient(90deg, var(--border) 25%, var(--card-bg) 50%, var(--border) 75%); background-size: 200% 100%; animation: dash-skeleton-sweep 1.2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .ds-skel-cell span { animation: none; } } /* 📱 موبايل: حشو أضيق + أزرار إجراء أصغر شوية، والجدول بيتمرّر جوه غلافه */ @media (max-width: 575.98px) { .ds-table, .erp-scope-root table, .sales-module-page table { font-size: 12px; } .ds-table thead th, .erp-scope-root table thead th, .sales-module-page table thead th { padding: 9px 8px !important; } .ds-table tbody td, .erp-scope-root table tbody td, .sales-module-page table tbody td { padding: 9px 8px !important; } .ds-table-toolbar { align-items: stretch; } .ds-table-toolbar .tt-actions { width: 100%; } .ds-tool-search, .ds-tool-search input { width: 100%; } } /* 🏷️ Stage 6.3: .ds-pill بقى اسم مرادف لنفس شارة .ds-badge بالظبط (كان بلوك منفصل بنفس القيم حرفياً) — قاعدة واحدة، مكوّن واحد. الاسم القديم متسايب شغّال عشان الاستخدامات الحالية ماتحتاجش تتغيّر. */ /* زر إجراء صغير داخل الصف (بيل كحلي) */ .ds-row-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 650; padding: 5px 12px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--card-bg); color: var(--text-main); cursor: pointer; transition: all var(--dur-fast) var(--ease); } .ds-row-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); } .ds-row-btn.solid { background: var(--primary); color: #fff; border-color: var(--primary); } .ds-row-btn.solid:hover { background: var(--primary-hover); color: #fff; } /* 🎨 FROZEN DS v2 — أزرار Bootstrap داخل واجهات ERP بلغة المرجع: مجموعة أزرار = تحكّم مقسَّم نظيف، الأساسي كحلي ممتلئ */ .erp-scope-root .btn-primary { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; border-radius: var(--r-md) !important; font-weight: 650; font-size: 13px; box-shadow: var(--shadow-xs); } .erp-scope-root .btn-primary:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; } .erp-scope-root .btn-outline-secondary, .erp-scope-root .btn-outline-primary { color: var(--text-gray) !important; border-color: var(--border) !important; background: var(--card-bg) !important; font-weight: 600; } .erp-scope-root .btn-outline-secondary:hover, .erp-scope-root .btn-outline-primary:hover { background: var(--surface-3) !important; color: var(--text-main) !important; border-color: var(--border-strong) !important; } .erp-scope-root .btn-group .btn { border-radius: var(--r-sm) !important; } .erp-scope-root .btn-group-sm > .btn { font-size: 11.5px; padding: 5px 12px; } /* التبويب النشط في التحكّم المقسَّم = كحلي ممتلئ (زي "المبيعات/التوقعات" بالمرجع) */ .erp-scope-root .btn-group .btn.active, .erp-scope-root .btn-check:checked + .btn { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; } /* حقول الإدخال داخل ERP */ .erp-scope-root .form-control, .erp-scope-root .form-select { border-radius: var(--r-md) !important; border-color: var(--border) !important; background: var(--input-bg) !important; color: var(--text-main) !important; font-size: 13px; box-shadow: none !important; } .erp-scope-root .form-control:focus, .erp-scope-root .form-select:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-ring) !important; } /* 🎨 FROZEN DS v2 — مودالات فخمة (حواف كبيرة، ظل ناعم، رأس/ذيل شعري) */ .modal-content { border-radius: var(--r-lg) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-lg) !important; background: var(--card-bg) !important; color: var(--text-main) !important; overflow-y: auto; overflow-x: hidden; } .modal-header { border-bottom: 1px solid var(--border) !important; padding: 16px 20px !important; } .modal-header .modal-title { font-size: 15px; font-weight: 650; letter-spacing: -.01em; } .modal-body { padding: 20px !important; } .modal-footer { border-top: 1px solid var(--border) !important; padding: 14px 20px !important; gap: 8px; } .modal-backdrop.show { opacity: .4; } /* مودالات مخصّصة (غير Bootstrap) في النظام */ .modal-overlay .modal-box, .custom-modal, .assistant-panel { border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--shadow-lg); } /* شارات Bootstrap → بيلات ناعمة بلغة المرجع */ .erp-scope-root .badge { font-weight: 700 !important; font-size: 11px !important; padding: 4px 10px !important; border-radius: var(--r-pill) !important; letter-spacing: 0; } .erp-scope-root .badge.bg-success, .erp-scope-root .badge.text-bg-success { background: var(--success-bg) !important; color: var(--success) !important; } .erp-scope-root .badge.bg-danger, .erp-scope-root .badge.text-bg-danger { background: var(--danger-bg) !important; color: var(--danger) !important; } .erp-scope-root .badge.bg-warning, .erp-scope-root .badge.text-bg-warning { background: var(--warning-bg) !important; color: var(--warning) !important; } .erp-scope-root .badge.bg-secondary, .erp-scope-root .badge.text-bg-secondary { background: var(--surface-3) !important; color: var(--text-gray) !important; } .erp-scope-root .badge.bg-primary, .erp-scope-root .badge.text-bg-primary, .erp-scope-root .badge.bg-info, .erp-scope-root .badge.text-bg-info { background: var(--primary-soft) !important; color: var(--primary) !important; } /* حالة فارغة موحّدة + هيكل تحميل (skeleton) بلغة النظام */ .erp-scope-root .dashboard-empty-state, .ds-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px 16px; text-align: center; color: var(--text-gray); } .erp-scope-root .dashboard-empty-state .icon, .ds-empty .icon { font-size: 26px; opacity: .5; } .erp-scope-root .dashboard-empty-state span, .ds-empty span { font-size: 12.5px; } .ds-skeleton { position: relative; overflow: hidden; background: var(--surface-3); border-radius: var(--r-sm); } .ds-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--card-bg) 60%, transparent), transparent); animation: dsShimmer 1.3s infinite; } html[dir="rtl"] .ds-skeleton::after { animation-name: dsShimmerRtl; } @keyframes dsShimmer { 100% { transform: translateX(100%); } } @keyframes dsShimmerRtl { 100% { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .ds-skeleton::after { animation: none !important; } } /* 🔁 Task 19/21: تنبيه الفواتير المكررة القابل للنقر */ .dup-alert { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 10px 14px; background: var(--danger-bg); border: 1px solid var(--danger); border-radius: 10px; cursor: pointer; transition: transform 0.15s ease; } .dup-alert:hover { transform: translateY(-1px); } .dup-alert-text { font-size: 13px; font-weight: bold; color: var(--danger); } .dup-alert-hint { font-size: 11px; color: var(--danger); opacity: 0.8; } .dup-alert-count { font-family: var(--font-num); font-size: 20px; font-weight: bold; color: var(--danger); } .rv-flash { animation: rvFlash 1s ease 2; } @keyframes rvFlash { 0%, 100% { background: transparent; } 50% { background: var(--danger-bg); } } /* 👑 Task 20: قائمة الفريق والصلاحيات — بطاقات أعضاء بدل جدول */ .admin-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; align-items: center; } .admin-filter-chip { font-size: 12px; font-weight: 600; padding: 8px 14px; border-radius: 999px; background: var(--input-bg); border: 1px solid var(--border); color: var(--text-main); cursor: pointer; white-space: nowrap; } .admin-filter-chip.active { background: var(--ink); color: white; border-color: var(--ink); } .admin-search-input { flex: 1; min-width: 180px; } .member-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); margin-bottom: 10px; } .member-avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; color: white; flex-shrink: 0; } .member-info { flex: 1; min-width: 0; } .member-name { font-weight: bold; font-size: 14px; color: var(--bg-dark); } .member-role { font-size: 11px; color: var(--text-gray); margin-top: 2px; } .member-quota-bar { width: 100px; height: 5px; background: var(--border); border-radius: 999px; overflow: hidden; margin-top: 6px; } .member-quota-fill { height: 100%; border-radius: 999px; } .member-last-active { font-size: 11px; color: var(--text-gray); white-space: nowrap; } .member-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; } /* 🎯 Task 20: أزرار اختيار سريع للصلاحيات (Presets) */ .role-preset-toggle { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .role-preset-btn { flex: 1; min-width: 120px; padding: 10px; border: 1px solid var(--border); background: var(--input-bg); border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: bold; color: var(--text-main); transition: all 0.15s ease; } .role-preset-btn.active { background: var(--primary); color: white; border-color: var(--primary); } /* 💰 Task 20: أزرار شرائحية لاختيار فئة رصيد الفواتير */ .quota-tier-toggle { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .quota-pill { flex: 1; min-width: 60px; padding: 8px; border: 1px solid var(--border); background: var(--card-bg); border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: bold; color: var(--text-main); font-family: var(--font-num); } .quota-pill.active { background: var(--gold-600); color: white; border-color: var(--gold-600); } #sidebarPreviewList { font-size: 12px; color: var(--text-gray); list-style: none; padding: 0; margin: 8px 0 0; } #sidebarPreviewList li { padding: 4px 0; } #sidebarPreviewList li::before { content: '✓ '; color: var(--success); font-weight: bold; } .app-footer { margin-top: auto; text-align: center; padding: 20px; color: var(--text-gray); font-size: 13px; border-top: 1px solid var(--border); } /* 📍 تثبيت زر الواتساب إجبارياً على اليسار */ .whatsapp-support-btn { position: fixed; bottom: 30px; left: 30px !important; right: auto !important; background-color: #25d366; color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 15px rgba(0,0,0,0.2); z-index: 1000; text-decoration: none; transition: 0.3s; } .whatsapp-support-btn:hover { transform: scale(1.1); background-color: #1ebe57; } /* 🤖 المساعد الذكي — زر صغير جوه الهيدر جنب "مرحباً" مباشرة (مش عائم فوق الشاشة) بدل الزر العائم القديم */ .assistant-header-btn { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #3b82f6); border: none; color: white; font-size: 18px; display: flex; justify-content: center; align-items: center; box-shadow: 0 3px 10px rgba(37,99,235,0.35); cursor: pointer; flex-shrink: 0; transition: transform 0.2s ease; } .assistant-header-btn:hover { transform: scale(1.08); } /* لوحة المحادثة بتفتح تحت الزر مباشرة (أعلى يسار الشاشة فعلياً، بغض النظر عن اتجاه اللغة) عشان تفضل قريبة من مكان الزر الجديد */ .assistant-panel { display: none; position: fixed; top: 80px; left: 30px !important; right: auto !important; width: 360px; max-width: calc(100vw - 40px); height: 480px; max-height: 70vh; background: var(--card-bg); border-radius: 16px; box-shadow: 0 20px 50px rgba(15,23,42,0.25); border: 1px solid var(--border); z-index: 1001; flex-direction: column; overflow: hidden; } .assistant-panel.open { display: flex; } .assistant-header { background: linear-gradient(135deg, var(--primary), #3b82f6); color: white; padding: 14px 18px; font-weight: 800; display: flex; justify-content: space-between; align-items: center; } .assistant-close { cursor: pointer; font-size: 16px; opacity: 0.85; } .assistant-close:hover { opacity: 1; } .assistant-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; } .assistant-msg { padding: 10px 14px; border-radius: 14px; max-width: 85%; line-height: 1.5; white-space: pre-wrap; } .assistant-msg-bot { background: var(--input-bg); border: 1px solid var(--border); align-self: flex-start; color: var(--text-main); } .assistant-msg-user { background: var(--primary); color: white; align-self: flex-end; } .assistant-msg-loading { background: var(--input-bg); border: 1px solid var(--border); align-self: flex-start; color: var(--text-gray); font-style: italic; } .assistant-input-row { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); } .assistant-input-row .btn { padding: 8px 16px; } @media (max-width: 480px) { .assistant-panel { width: calc(100vw - 24px); left: 12px !important; top: 70px; } } /* 🧩 Phase 4 — AI Experience Layer. Reuses every existing token (--primary/--success/--warning/--danger/--text-gray/--border/ --card-bg/--input-bg/--r-lg/--shadow-lg) — no new palette. */ .assistant-memory-toggle { cursor: pointer; font-size: 15px; opacity: 0.9; } .ai-memory-panel { display: none; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--input-bg); font-size: 11.5px; max-height: 160px; overflow-y: auto; } .ai-memory-panel.open { display: block; } .ai-memory-grid { display: flex; flex-direction: column; gap: 4px; } .ai-memory-row { display: flex; justify-content: space-between; gap: 8px; } .ai-memory-label { color: var(--text-gray); } .ai-memory-value { font-weight: 600; color: var(--text-main); text-align: end; } .ai-memory-empty { color: var(--text-gray); font-style: italic; } .ai-memory-recent-title { margin-top: 8px; font-weight: 700; color: var(--text-gray); } .ai-memory-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .ai-chip { display: inline-block; padding: 2px 8px; border-radius: var(--r-pill, 999px); background: var(--card-bg); border: 1px solid var(--border); font-size: 10.5px; color: var(--text-gray); } .ai-chip-module { color: var(--primary); border-color: var(--primary); } .ai-chip-approval { color: var(--warning); border-color: var(--warning); } .ai-badge { display: inline-block; padding: 1px 8px; border-radius: var(--r-pill, 999px); border: 1px solid; font-weight: 600; font-size: 11px; } .ai-understanding-card { margin: 6px 0; padding: 12px; font-size: 12.5px; } .ai-card-header { font-weight: 700; font-size: 13px; margin-bottom: 8px; } .ai-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-bottom: 8px; } .ai-card-grid > div { display: flex; flex-direction: column; gap: 2px; } .ai-field-label { font-size: 10.5px; color: var(--text-gray); } .ai-estimated-result, .ai-clarification-note { margin: 6px 0; padding: 8px; background: var(--input-bg); border-radius: var(--r-md, 8px); font-size: 12px; } .ai-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .ai-btn-sm { width: auto !important; padding: 5px 12px !important; font-size: 11.5px !important; } .ai-timeline { margin: 10px 0; display: flex; flex-direction: column; } .ai-timeline-step { display: flex; gap: 10px; } .ai-timeline-marker { display: flex; flex-direction: column; align-items: center; } .ai-timeline-icon { font-size: 14px; line-height: 1; color: var(--text-gray); } .ai-timeline-step[data-status="active"] .ai-timeline-icon { color: var(--warning); } .ai-timeline-step[data-status="done"] .ai-timeline-icon { color: var(--success); } .ai-timeline-step[data-status="failed"] .ai-timeline-icon { color: var(--danger); } .ai-timeline-line { flex: 1; width: 1px; min-height: 18px; background: var(--border); margin: 2px 0; } .ai-timeline-body { padding-bottom: 10px; flex: 1; } .ai-timeline-desc { font-size: 12px; color: var(--text-main); } .ai-timeline-tag { font-size: 10px; color: var(--text-gray); font-style: italic; } .ai-timeline-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; } .ai-explain-panel { margin: 8px 0; font-size: 11.5px; border: 1px solid var(--border); border-radius: var(--r-md, 8px); padding: 6px 10px; background: var(--input-bg); } .ai-explain-panel summary { cursor: pointer; font-weight: 600; color: var(--primary); } .ai-explain-row { margin-top: 6px; color: var(--text-gray); } .ai-progress-zone:empty, .ai-result-zone:empty { display: none; } .ai-progress-stage { font-size: 11.5px; color: var(--text-gray); margin-bottom: 4px; } .ai-progress-bar-track { height: 6px; border-radius: 4px; background: var(--input-bg); border: 1px solid var(--border); overflow: hidden; } .ai-progress-bar-fill { height: 100%; background: var(--primary); transition: width .3s ease; } .ai-result-panel { margin-top: 8px; padding: 10px; border: 1px solid var(--border); border-inline-start: 3px solid; border-radius: var(--r-md, 8px); font-size: 12px; } .ai-result-status { font-weight: 700; margin-bottom: 6px; } .ai-result-row { margin-bottom: 4px; } .ai-result-meta { display: flex; gap: 14px; margin-top: 6px; color: var(--text-gray); font-size: 11px; } .ai-result-json { margin-top: 8px; padding: 8px; background: var(--input-bg); border-radius: var(--r-md, 8px); font-size: 10.5px; max-height: 200px; overflow: auto; white-space: pre-wrap; } .ai-suggestions { margin-top: 10px; } .ai-suggestions-title { font-size: 11px; color: var(--text-gray); margin-bottom: 4px; } .ai-suggestions-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ai-suggestion-chip { border: 1px solid var(--primary); color: var(--primary); background: transparent; border-radius: var(--r-pill, 999px); padding: 4px 10px; font-size: 11px; cursor: pointer; } .ai-suggestion-chip:hover { background: var(--primary); color: #fff; } .ai-approval-modal .modal-content { max-width: 420px; } .ai-approval-body { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 14px; font-size: 13px; } .ai-approval-field b { display: block; font-size: 11px; color: var(--text-gray); margin-bottom: 2px; } .ai-approval-actions { display: flex; gap: 8px; justify-content: flex-end; } /* Tablet — deliberately does NOT touch .assistant-panel's width: the existing @media(max-width:480px) rule above already owns that at phone sizes, and overriding it here too (same specificity, later in the cascade) would win over it and break the phone layout. */ @media (max-width: 900px) and (min-width: 481px) { .assistant-panel { width: 320px; } } @media (max-width: 900px) { .ai-card-grid { grid-template-columns: 1fr; } } /* Mobile — the panel already goes full-width via the existing 480px rule above; make the new components readable at that width too */ @media (max-width: 480px) { .ai-card-grid { grid-template-columns: 1fr; } .ai-result-meta { flex-direction: column; gap: 2px; } .ai-approval-modal .modal-content { max-width: calc(100vw - 32px); } } /* 📱 القائمة الجانبية على الموبايل: نفس تنسيق الكمبيوتر بالضبط (عمودية، جنب الشاشة) بدل تحويلها لشريط أفقي فوق — تحافظ على هوية الموقع. بتظهر كـ "درج" (drawer) ينزلق من الجنب فوق المحتوى، بدل ما تضغط عرض الشاشة أو تتحول لتصميم مختلف تماماً */ .menu-toggle-btn { display: none; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; width: 42px; height: 42px; font-size: 20px; align-items: center; justify-content: center; cursor: pointer; color: var(--text-main); } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 150; } .sidebar-overlay.active { display: block; } @media (max-width: 900px) { .menu-toggle-btn { display: flex; } .sidebar { position: fixed; top: 0; right: 0; height: 100vh; /* 🐛 على موبايل، 100vh بتتحسب على ارتفاع الشاشة كاملة (شريط العنوان مخفي)، لكن المساحة الظاهرة فعلياً أقصر لما شريط العنوان يكون ظاهر — فزرار "تسجيل الخروج" في آخر القائمة كان بيطلع تحت حدود الشاشة الفعلية. 100dvh بتاخد في الاعتبار المساحة الظاهرة فعلياً (متصفحات حديثة)، مع 100vh كـ fallback */ height: 100dvh; z-index: 200; transform: translateX(100%); transition: transform 0.3s ease; box-shadow: -20px 0 50px rgba(15,23,42,0.25); } html[dir="ltr"] .sidebar { right: auto; left: 0; transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } .sidebar { width: 280px; } /* 🐛 FROZEN DS v2: ضمان إخفاء الدرج على الموبايل بأولوية id (بيتفوق على أي قاعدة .sidebar لاحقة) — الدرج مخفي افتراضياً ويطلع بـ .open */ #appSidebar { transform: translateX(100%); } html[dir="ltr"] #appSidebar { transform: translateX(-100%); } #appSidebar.open, html[dir="ltr"] #appSidebar.open { transform: translateX(0) !important; } .main-content { width: 100%; } /* 🧭 Stage 6.1: على الموبايل، الرفّ الضيّق + اللوحة الجانبة (beside) مش عمليين على شاشة صغيرة — بدل كده الدرج بيعرض إما قائمة الوحدات أو صفحات الوحدة المفتوحة (تنقّل "push" زي إعدادات iOS)، مش اتنين فوق بعض. زر "‹ رجوع" بيظهر بس هنا عشان يرجع لقائمة الوحدات تاني */ .workspace-rail { display: flex; flex-direction: column; } .sidebar.showing-flyout .workspace-rail { display: none; } .workspace-flyout { position: static; width: 100%; height: auto; flex: 1; min-height: 0; box-shadow: none; border-inline-start: none; opacity: 1; visibility: visible; transform: none; display: none; } .sidebar.showing-flyout .workspace-flyout { display: flex; } .flyout-back-btn { display: inline-flex; } } /* ═══════════════════════════════════════════════════════════════════ 👤 Stage 6.4 — مساحة عمل "العميل 360" (3 أعمدة) ─────────────────────────────────────────────────────────────────── عرض فقط: كل البيانات هنا جاية من نفس نداء GET /api/sales/customers/:id الموجود أصلاً — مافيش أي طلب إضافي. الشبكة: ديسكتوب 3 أعمدة / تابلت عمودين / موبايل عمود واحد. ═══════════════════════════════════════════════════════════════════ */ .c360-wrap { display: grid; gap: 16px; grid-template-columns: 300px minmax(0, 1fr) 320px; align-items: start; } @media (max-width: 1279.98px) { /* تابلت: العمود الأيمن ينزل تحت في عمودين */ .c360-wrap { grid-template-columns: 300px minmax(0, 1fr); } .c360-col-right { grid-column: 1 / -1; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } } @media (max-width: 767.98px) { .c360-wrap { grid-template-columns: minmax(0, 1fr); } .c360-col-right { grid-template-columns: minmax(0, 1fr); } } .c360-col-left, .c360-col-center, .c360-col-right { min-width: 0; } .c360-col-left, .c360-col-right { display: flex; flex-direction: column; gap: 12px; } /* ── الرأس التنفيذي ── */ .c360-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; } .c360-header .h-main { min-width: 0; } .c360-crumb { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-gray); margin-bottom: 6px; flex-wrap: wrap; } .c360-crumb button { background: none; border: none; padding: 0; font: inherit; color: var(--text-gray); cursor: pointer; } .c360-crumb button:hover { color: var(--primary); text-decoration: underline; } .c360-crumb .sep { opacity: .5; } .c360-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .c360-title-row h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--text-main); } .c360-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* ── بطاقة قابلة للطي داخل الأعمدة ── */ .c360-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-xs); overflow: hidden; } .c360-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 11px 14px; background: none; border: none; cursor: pointer; text-align: start; font-size: 12.5px; font-weight: 650; color: var(--text-main); } .c360-card-head:hover { background: var(--surface-2); } .c360-card-head:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } .c360-card-head .h-left { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .c360-card-head .count { font-size: 11px; font-weight: 700; color: var(--text-gray); background: var(--surface-3); border-radius: var(--r-pill); padding: 1px 8px; } .c360-card-head .chev { color: var(--text-dim); font-size: 11px; transition: transform var(--dur-fast) var(--ease); flex: none; } .c360-card[data-open="false"] .chev { transform: rotate(-90deg); } .c360-card[data-open="false"] .c360-card-body { display: none; } .c360-card-body { padding: 12px 14px 14px; border-top: 1px solid var(--border); } /* ── العمود الأيسر: هوية العميل ── */ .c360-identity { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 18px 14px 14px; } .c360-avatar { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; letter-spacing: .02em; color: var(--primary); background: var(--primary-soft); border: 1px solid var(--border); } .c360-identity .nm { font-size: 15px; font-weight: 700; color: var(--text-main); line-height: 1.3; word-break: break-word; } .c360-identity .sub { font-size: 11.5px; color: var(--text-gray); } .c360-fields { display: flex; flex-direction: column; } .c360-field { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12px; } .c360-field:last-child { border-bottom: none; } .c360-field .k { color: var(--text-gray); flex: none; } .c360-field .v { color: var(--text-main); font-weight: 600; text-align: end; word-break: break-word; min-width: 0; } .c360-field .v a { color: var(--primary); text-decoration: none; } .c360-field .v a:hover { text-decoration: underline; } /* ── الخط الزمني الرأسي ── */ .c360-timeline { position: relative; padding-inline-start: 26px; } .c360-timeline::before { content: ""; position: absolute; inset-block: 6px; inset-inline-start: 11px; width: 2px; background: var(--border); } .c360-tl-item { position: relative; padding: 0 0 16px 0; } .c360-tl-item:last-child { padding-bottom: 2px; } .c360-tl-dot { position: absolute; inset-inline-start: -26px; top: 1px; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; background: var(--card-bg); border: 2px solid var(--border); color: var(--text-gray); } /* لون النقطة حسب نوع الحدث — من التوكنز الموجودة فقط، بدون ألوان جديدة */ .c360-tl-item[data-kind="installation"] .c360-tl-dot { border-color: var(--accent); color: var(--accent); } .c360-tl-item[data-kind="quotation"] .c360-tl-dot { border-color: var(--mod-reports); color: var(--mod-reports); } .c360-tl-item[data-kind="note"] .c360-tl-dot { border-color: var(--warning); color: var(--warning); } .c360-tl-item[data-kind="document"] .c360-tl-dot { border-color: var(--mod-invoiceai); color: var(--mod-invoiceai); } .c360-tl-item[data-kind="log"] .c360-tl-dot { border-color: var(--primary); color: var(--primary); } .c360-tl-body { border: 1px solid transparent; border-radius: var(--r-sm); padding: 6px 8px; margin-inline-start: 2px; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .c360-tl-item:hover .c360-tl-body { background: var(--surface-2); border-color: var(--border); } .c360-tl-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .c360-tl-title { font-size: 12.5px; font-weight: 650; color: var(--text-main); } .c360-tl-date { font-size: 11px; color: var(--text-gray); font-variant-numeric: tabular-nums; white-space: nowrap; } .c360-tl-desc { font-size: 12px; color: var(--text-gray); margin-top: 3px; line-height: 1.5; word-break: break-word; } .c360-tl-meta { font-size: 11px; color: var(--text-dim); margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* ── صفوف مدمجة داخل بطاقات العمود الأيمن ── */ .c360-mini { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12px; } .c360-mini:last-child { border-bottom: none; } .c360-mini .m-main { min-width: 0; } .c360-mini .m-title { font-weight: 650; color: var(--text-main); word-break: break-word; } .c360-mini .m-sub { font-size: 11px; color: var(--text-gray); margin-top: 2px; } .c360-mini .m-side { flex: none; text-align: end; } /* مؤشرات مصغَّرة تعيد استخدام .ds-kpi من Stage 6.2 (بدون شارت مصغَّر) */ .c360-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .c360-kpi-grid .ds-kpi { padding: 12px 12px 10px; } .c360-kpi-grid .ds-kpi-title { min-height: 2.4em; font-size: 11px; } .c360-kpi-grid .ds-kpi-value { font-size: 18px; } .c360-kpi-grid .ds-kpi-spark, .c360-kpi-grid .ds-kpi-note { display: none; } /* ═══════════════════════════════════════════════════════════════════ 🧩 Stage 6.5 — مسار المبيعات البصري (Kanban) ─────────────────────────────────────────────────────────────────── عرض فقط: الأعمدة = مراحل pipelineStage الحقيقية التسع الموجودة في الباك إند بالظبط (مفيش مرحلة مخترَعة زي "تفاوض"). البيانات كلها من GET /api/sales/customers + /api/sales/quotations + GET /api/sales/dashboard الموجودين أصلاً — مافيش endpoint جديد. ═══════════════════════════════════════════════════════════════════ */ /* ── شريط رأس الصفحة (نفس نمط .ds-table-toolbar بس بعرض كامل) ── */ .pipeline-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } .pipeline-header h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--text-main); } .pipeline-header .p-desc { font-size: 12px; color: var(--text-gray); margin-top: 4px; } .pipeline-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* ── صف مؤشرات الأداء — يعيد استخدام .ds-kpi من Stage 6.2 بدون تعديل ── */ .pipeline-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; } /* ── شريط الفلاتر (بحث محلي + قوائم فلترة) ── */ .pipeline-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .pipeline-filters select { height: 34px; padding: 0 10px; font-size: 12.5px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--input-bg); color: var(--text-main); } .pipeline-filters select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); } .pipeline-filters .pf-count { font-size: 12px; color: var(--text-gray); margin-inline-start: auto; white-space: nowrap; } /* ── لوح Kanban: أفقي على الديسكتوب/التابلت، والتمرير الأفقي محصور هنا بس — الصفحة نفسها ما بتتمرّرش أفقياً أبداً ── */ .pipeline-board-wrap { overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; -webkit-overflow-scrolling: touch; } .pipeline-board { display: flex; gap: 12px; align-items: flex-start; min-height: 200px; } .pipeline-col { flex: 0 0 272px; width: 272px; display: flex; flex-direction: column; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); max-height: calc(100vh - 340px); min-height: 160px; } .pipeline-col-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); border-inline-start: 3px solid var(--col-accent, var(--primary)); border-start-start-radius: var(--r-md); border-start-end-radius: var(--r-md); background: var(--card-bg); flex: none; } .pipeline-col-head .p-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--col-accent, var(--primary)); flex: none; } .pipeline-col-head .p-name { font-size: 12.5px; font-weight: 650; color: var(--text-main); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pipeline-col-head .p-count { font-size: 11px; font-weight: 700; color: var(--text-gray); background: var(--surface-3); border-radius: var(--r-pill); padding: 1px 8px; flex: none; } .pipeline-col-body { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; } .pipeline-col-foot { padding: 6px 12px; font-size: 11px; color: var(--text-gray); border-top: 1px solid var(--border); flex: none; font-variant-numeric: tabular-nums; } /* عمود مستهدَف أثناء السحب */ .pipeline-col.is-dragover { background: var(--primary-soft); border-color: var(--primary); } .pipeline-col.is-drop-denied { background: var(--danger-bg); border-color: var(--danger); } /* ── كارت العميل ── */ .pipeline-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-xs); padding: 10px 11px; cursor: pointer; border-inline-start: 3px solid var(--col-accent, var(--primary)); transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .pipeline-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .pipeline-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } .pipeline-card.is-dragging { opacity: .5; } .pipeline-card.is-selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-ring); } /* ⏰ Stage 7 (7.2): مؤشر تعثّر بصري خفيف — نفس رمز اللون الأحمر المستخدم في .ds-badge tone=bad، بدون أي لون جديد */ .pipeline-card.is-stuck { box-shadow: inset 3px 0 0 var(--danger); } .pipeline-card .pc-top { display: flex; align-items: center; gap: 8px; } .pipeline-card .pc-avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--primary); background: var(--primary-soft); } .pipeline-card .pc-name { font-size: 12.5px; font-weight: 650; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; } .pipeline-card .pc-preview-btn { flex: none; width: 22px; height: 22px; border-radius: var(--r-xs); border: 1px solid transparent; background: transparent; color: var(--text-gray); font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .pipeline-card .pc-preview-btn:hover { background: var(--surface-3); border-color: var(--border); color: var(--text-main); } .pipeline-card .pc-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; } .pipeline-card .pc-row { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-gray); margin-top: 5px; } .pipeline-card .pc-row b { color: var(--text-main); font-weight: 650; font-variant-numeric: tabular-nums; } .pipeline-card .pc-meta { display: flex; align-items: center; gap: 10px; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border); font-size: 10.5px; color: var(--text-dim); flex-wrap: wrap; } /* ── اللوح الجانبي (معاينة سريعة) — نفس نمط بطاقة .c360-card ── */ .pipeline-panel { position: fixed; inset-block: 0; inset-inline-end: 0; width: 340px; max-width: 92vw; background: var(--card-bg); border-inline-start: 1px solid var(--border); box-shadow: var(--shadow-lg); z-index: 60; display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--dur-med) var(--ease); } :root[dir="rtl"] .pipeline-panel, [dir="rtl"] .pipeline-panel { transform: translateX(-100%); } .pipeline-panel.is-open { transform: translateX(0); } .pipeline-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border); flex: none; } .pipeline-panel-head h3 { margin: 0; font-size: 14px; font-weight: 650; color: var(--text-main); } .pipeline-panel-close { width: 28px; height: 28px; border-radius: var(--r-xs); border: 1px solid var(--border); background: var(--card-bg); color: var(--text-gray); cursor: pointer; } .pipeline-panel-close:hover { background: var(--surface-3); color: var(--text-main); } .pipeline-panel-body { flex: 1; overflow-y: auto; padding: 14px 16px; } .pipeline-panel-backdrop { position: fixed; inset: 0; background: rgba(10, 16, 28, .35); z-index: 59; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease); } .pipeline-panel-backdrop.is-open { opacity: 1; pointer-events: auto; } /* ── حالة السحب غير المدعومة (بدون صلاحية) ── */ .pipeline-dnd-note { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-gray); margin-bottom: 10px; } /* ── تجاوب: تابلت — نفس اللوح الأفقي لكن أعمدة أضيق شوية ── */ @media (max-width: 1279.98px) { .pipeline-col { flex-basis: 240px; width: 240px; } } /* ── موبايل: اللوح يتحوَّل لعمود رأسي واحد — كل مرحلة قسم مستقل بدل عمود أفقي ── */ @media (max-width: 767.98px) { .pipeline-board-wrap { overflow-x: hidden; } .pipeline-board { flex-direction: column; } .pipeline-col { flex-basis: auto; width: 100%; max-height: none; } .pipeline-col-body { max-height: 340px; } .pipeline-panel { width: 100%; max-width: 100%; } } /* ═══════════════════════════════════════════════════════════════════ 🏛️ Stage 6.6 — مراكز تنفيذية (التقارير / المؤشرات / SOP) ─────────────────────────────────────────────────────────────────── عرض فقط. الثلاثة بيشتركوا في نفس اللغة البصرية: رأس تنفيذي + شريط فلاتر/بحث + شبكة بطاقات + لوح جانبي واحد يُعاد استخدامه للثلاثة. كل الألوان من توكنز الوحدات الموجودة أصلاً (--mod-*) بدون أي إضافة. ═══════════════════════════════════════════════════════════════════ */ /* ── الرأس + شريط الأدوات (نفس نمط .pipeline-header/.c360-header) ── */ .exec-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } .exec-header h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--text-main); } .exec-header .e-desc { font-size: 12px; color: var(--text-gray); margin-top: 4px; } .exec-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .exec-toolbar select { height: 34px; padding: 0 10px; font-size: 12.5px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--input-bg); color: var(--text-main); } .exec-toolbar select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); } .exec-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; } .exec-tab-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; font-size: 12.5px; font-weight: 650; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--card-bg); color: var(--text-gray); cursor: pointer; } .exec-tab-btn:hover { background: var(--surface-3); color: var(--text-main); } .exec-tab-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; } /* ── قسم فرعي معنون (المفضّلة/الأحدث/المثبَّت) ── */ .exec-subsection { margin-bottom: 18px; } .exec-subsection-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .exec-subsection-head h3 { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--text-main); } .exec-subsection-head .count { font-size: 11px; font-weight: 700; color: var(--text-gray); background: var(--surface-3); border-radius: var(--r-pill); padding: 1px 8px; } /* ── شبكة البطاقات ── */ .exec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .exec-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-xs); padding: 14px; cursor: pointer; border-inline-start: 3px solid var(--card-accent, var(--primary)); transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .exec-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .exec-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } .exec-card .ec-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .exec-card .ec-icon { font-size: 20px; line-height: 1; flex: none; } .exec-card .ec-fav { flex: none; width: 26px; height: 26px; border-radius: var(--r-xs); border: 1px solid transparent; background: transparent; font-size: 14px; cursor: pointer; color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center; } .exec-card .ec-fav:hover { background: var(--surface-3); } .exec-card .ec-fav.is-fav { color: var(--warning); } .exec-card .ec-name { font-size: 13.5px; font-weight: 650; color: var(--text-main); margin-top: 8px; } .exec-card .ec-desc { font-size: 11.5px; color: var(--text-gray); margin-top: 4px; line-height: 1.5; min-height: 2.2em; } .exec-card .ec-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 10.5px; color: var(--text-dim); } .exec-card .ec-formats { display: flex; gap: 5px; margin-top: 10px; flex-wrap: wrap; } .exec-card .ec-run { margin-top: 10px; width: 100%; height: 30px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-main); font-size: 12px; font-weight: 650; cursor: pointer; } .exec-card .ec-run:hover { background: var(--primary); border-color: var(--primary); color: #fff; } /* ── لوح جانبي تنفيذي مشترك (تقرير/مؤشر/SOP) — نفس هيكل .pipeline-panel ── */ .exec-panel { position: fixed; inset-block: 0; inset-inline-end: 0; width: 360px; max-width: 92vw; background: var(--card-bg); border-inline-start: 1px solid var(--border); box-shadow: var(--shadow-lg); z-index: 60; display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--dur-med) var(--ease); } :root[dir="rtl"] .exec-panel, [dir="rtl"] .exec-panel { transform: translateX(-100%); } .exec-panel.is-open { transform: translateX(0); } .exec-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border); flex: none; } .exec-panel-head h3 { margin: 0; font-size: 14px; font-weight: 650; color: var(--text-main); } .exec-panel-close { width: 28px; height: 28px; border-radius: var(--r-xs); border: 1px solid var(--border); background: var(--card-bg); color: var(--text-gray); cursor: pointer; } .exec-panel-close:hover { background: var(--surface-3); color: var(--text-main); } .exec-panel-body { flex: 1; overflow-y: auto; padding: 14px 16px; } .exec-panel-backdrop { position: fixed; inset: 0; background: rgba(10, 16, 28, .35); z-index: 59; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease); } .exec-panel-backdrop.is-open { opacity: 1; pointer-events: auto; } .exec-panel-section { margin-bottom: 16px; } .exec-panel-section h4 { font-size: 11px; font-weight: 700; color: var(--text-gray); margin: 0 0 8px; } .exec-panel-formula { font-family: var(--font-num); font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; color: var(--text-main); line-height: 1.6; } .exec-hist-row { display: flex; justify-content: space-between; font-size: 12px; padding: 5px 0; border-bottom: 1px solid var(--border); } .exec-hist-row:last-child { border-bottom: none; } .exec-hist-row .h-val { font-weight: 650; color: var(--text-main); font-variant-numeric: tabular-nums; } /* ── مؤشرات KPI Center: مجموعات مقسّمة بحسب القسم ── */ .kpi-center-group { margin-bottom: 22px; } .kpi-center-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .kpi-center-group-head .g-icon { font-size: 15px; } .kpi-center-group-head h3 { margin: 0; font-size: 13px; font-weight: 700; color: var(--text-main); } .kpi-center-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; } .kpi-center-grid .ds-kpi { cursor: pointer; } .kpi-center-grid .ds-kpi:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } /* ── تجاوب ── */ @media (max-width: 767.98px) { .exec-grid, .kpi-center-grid { grid-template-columns: 1fr; } .exec-panel { width: 100%; max-width: 100%; } }