/* ============================================================================= نظام كوادر البصري — الطبقة الأساسية ----------------------------------------------------------------------------- مبني على AI_DESIGN_GUIDE.md: إداري هادئ + دقّة تقنية. خط الواجهة: Cairo. الأرقام والمعرّفات: JetBrains Mono (الدليل §3.3). كل لون من متغيّر. لا إطار CSS. RTL أولاً. ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Readex+Pro:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700;800&display=swap'); /* ============================================================================= 1) اللوحات — أربعة عشر متغيّراً لكل لوحة، لا تُزاد ولا تُنقص. تُبدَّل عبر ============================================================================= */ [data-palette="sky"]{ --bg:#eef5fa; --bg-2:#e0eef7; --bg-3:#cee3f0; --ink:#0c2340; --ink-soft:#2f4a6a; --muted:#6b8199; --primary:#0369a1; --primary-hover:#025282; --primary-soft:#d3e7f2; --accent:#f59e0b; --accent-soft:#fdecc8; --line:#b8cfe0; --line-soft:#d3e0ea; --card:#ffffff; } [data-palette="olive"]{ --bg:#f6f5ec; --bg-2:#eceadb; --bg-3:#dddcbf; --ink:#2a2f14; --ink-soft:#4a5233; --muted:#7a7d62; --primary:#556b2f; --primary-hover:#3f5122; --primary-soft:#e1e6d0; --accent:#b8860b; --accent-soft:#f0e1b8; --line:#c8c6a8; --line-soft:#d8d7be; --card:#ffffff; } [data-palette="coral"]{ --bg:#fdf2f1; --bg-2:#f7e2df; --bg-3:#efccc6; --ink:#3f1918; --ink-soft:#6b2e2b; --muted:#8b6763; --primary:#c44536; --primary-hover:#9d3528; --primary-soft:#f0d1cc; --accent:#1e3a5f; --accent-soft:#ccd6e3; --line:#d9bfbb; --line-soft:#e5d1cd; --card:#ffffff; } [data-palette="sand"]{ --bg:#faf5ec; --bg-2:#f0e7d3; --bg-3:#e2d3b5; --ink:#3a2810; --ink-soft:#614a26; --muted:#857a5e; --primary:#8b6914; --primary-hover:#6b500d; --primary-soft:#eddfbe; --accent:#5c3317; --accent-soft:#e0cfc0; --line:#d2c2a0; --line-soft:#e0d4b8; --card:#ffffff; } [data-palette="slate"]{ --bg:#f4f5f7; --bg-2:#e6e8ed; --bg-3:#d4d7e0; --ink:#0f172a; --ink-soft:#334155; --muted:#64748b; --primary:#334155; --primary-hover:#1f2937; --primary-soft:#dde1e8; --accent:#0d9488; --accent-soft:#c8e6e2; --line:#cdd2dc; --line-soft:#dde1e8; --card:#ffffff; } [data-palette="mint"]{ --bg:#edfdf4; --bg-2:#d8f3e4; --bg-3:#bbe3ce; --ink:#0c3a2e; --ink-soft:#2b5a4c; --muted:#6a8478; --primary:#047857; --primary-hover:#035e45; --primary-soft:#c5e5d7; --accent:#7c3aed; --accent-soft:#e0d2fa; --line:#b8d4c6; --line-soft:#cce0d5; --card:#ffffff; } [data-palette="amber"]{ --bg:#fefce8; --bg-2:#faf5cc; --bg-3:#efe3a6; --ink:#3d2e0a; --ink-soft:#63481c; --muted:#8b7742; --primary:#a16207; --primary-hover:#7d4b05; --primary-soft:#f3e3b8; --accent:#9a3412; --accent-soft:#f0cec3; --line:#d9cc9a; --line-soft:#e5dcb4; --card:#ffffff; } [data-palette="navy"]{ --bg:#eef2f7; --bg-2:#dde5ef; --bg-3:#c5d2e3; --ink:#0f1e3a; --ink-soft:#2a3b5e; --muted:#657389; --primary:#1e3a8a; --primary-hover:#152a6b; --primary-soft:#d5ddee; --accent:#c2410c; --accent-soft:#f0d1c3; --line:#b9c4d6; --line-soft:#d0d8e3; --card:#ffffff; } [data-palette="plum"]{ --bg:#faf3fa; --bg-2:#f0e1f0; --bg-3:#e2c8e4; --ink:#3a0f3e; --ink-soft:#5c2b63; --muted:#8d6d91; --primary:#86198f; --primary-hover:#6b1471; --primary-soft:#efd6f0; --accent:#ca8a04; --accent-soft:#f3e3b8; --line:#d5bcd8; --line-soft:#e3cee5; --card:#ffffff; } [data-palette="forest"]{ --bg:#eef6ef; --bg-2:#dcebde; --bg-3:#c2dbc6; --ink:#0f2915; --ink-soft:#2c4a33; --muted:#6a8371; --primary:#14532d; --primary-hover:#0d3d20; --primary-soft:#cfe4d5; --accent:#b45309; --accent-soft:#f2ddc2; --line:#bcd3c0; --line-soft:#d3e2d6; --card:#ffffff; } [data-palette="sunset"]{ --bg:#fef4ed; --bg-2:#fbe5d6; --bg-3:#f5cdb2; --ink:#3d1c08; --ink-soft:#6b3618; --muted:#8f6b52; --primary:#c2410c; --primary-hover:#9a3208; --primary-soft:#f7d9c5; --accent:#1e3a8a; --accent-soft:#ccd6ee; --line:#e3c3aa; --line-soft:#eed7c4; --card:#ffffff; } [data-palette="purple"]{ --bg:#f5f3fc; --bg-2:#e8e3f8; --bg-3:#d5cdef; --ink:#241553; --ink-soft:#43307a; --muted:#7a6fa0; --primary:#5b21b6; --primary-hover:#461a8e; --primary-soft:#ded4f5; --accent:#d4a373; --accent-soft:#f2e3d0; --line:#c9c0e3; --line-soft:#ded8ef; --card:#ffffff; } [data-palette="teal"]{ --bg:#eef7f6; --bg-2:#dcefec; --bg-3:#c0e0db; --ink:#0a2e2b; --ink-soft:#245049; --muted:#5f8580; --primary:#0f766e; --primary-hover:#0b5a54; --primary-soft:#cfe7e3; --accent:#ea580c; --accent-soft:#fadbc7; --line:#b4d6d1; --line-soft:#d0e4e1; --card:#ffffff; } [data-palette="burgundy"]{ --bg:#f9f1f1; --bg-2:#f0dedf; --bg-3:#e2c2c4; --ink:#3a1414; --ink-soft:#5e2a2a; --muted:#8b6666; --primary:#7c2d2d; --primary-hover:#5e2020; --primary-soft:#eed3d3; --accent:#b8860b; --accent-soft:#f0e1b8; --line:#d9bcbd; --line-soft:#e8d0d1; --card:#ffffff; } /* عيّنات اللوحات في المبدّل — تعرض لوحة غير الفعّالة فتلزمها قيمها الصريحة */ .theme-swatch.sky{background:linear-gradient(135deg,#0369a1 50%,#f59e0b 50%);} .theme-swatch.olive{background:linear-gradient(135deg,#556b2f 50%,#b8860b 50%);} .theme-swatch.coral{background:linear-gradient(135deg,#c44536 50%,#1e3a5f 50%);} .theme-swatch.sand{background:linear-gradient(135deg,#8b6914 50%,#5c3317 50%);} .theme-swatch.slate{background:linear-gradient(135deg,#334155 50%,#0d9488 50%);} .theme-swatch.mint{background:linear-gradient(135deg,#047857 50%,#7c3aed 50%);} .theme-swatch.amber{background:linear-gradient(135deg,#a16207 50%,#9a3412 50%);} .theme-swatch.navy{background:linear-gradient(135deg,#1e3a8a 50%,#c2410c 50%);} .theme-swatch.plum{background:linear-gradient(135deg,#86198f 50%,#ca8a04 50%);} .theme-swatch.forest{background:linear-gradient(135deg,#14532d 50%,#b45309 50%);} .theme-swatch.sunset{background:linear-gradient(135deg,#c2410c 50%,#1e3a8a 50%);} .theme-swatch.purple{background:linear-gradient(135deg,#5b21b6 50%,#d4a373 50%);} .theme-swatch.teal{background:linear-gradient(135deg,#0f766e 50%,#ea580c 50%);} .theme-swatch.burgundy{background:linear-gradient(135deg,#7c2d2d 50%,#b8860b 50%);} /* ============================================================================= 2) الثوابت — لا تتبدّل مع اللوحة ============================================================================= */ :root{ /* الدليل §3.3 — ثلاثة خطوط لا رابع لها */ --font-body:'IBM Plex Sans Arabic',system-ui,sans-serif; --font-display:'Readex Pro','IBM Plex Sans Arabic',system-ui,sans-serif; --font-mono:'JetBrains Mono','IBM Plex Sans Arabic',monospace; /* ألوان الحالات — ثابتة عبر كل اللوحات (الدليل §3.2) */ --ok:#10b981; --ok-ink:#047857; --ok-bg:rgba(16,185,129,.12); --warn:#f59e0b; --warn-ink:#b45309; --warn-bg:rgba(245,158,11,.12); --danger:#dc2626; --danger-ink:#b91c1c; --danger-bg:rgba(220,38,38,.10); --info:#0e7490; --info-ink:#0e7490; --info-bg:rgba(14,116,144,.10); --neutral:#9ca3af; /* ألوان التصنيف للرسوم */ --cat-1:#0369a1; --cat-2:#0d9488; --cat-3:#7c3aed; --cat-4:#f59e0b; --cat-5:#be123c; --cat-6:#15803d; --cat-7:#c2410c; --cat-8:#4f46e5; --r-pill:999px; --r-xl:20px; --r-lg:18px; --r-md:16px; --r-sm:14px; --r-btn:11px; --r-field:10px; --r-tag:6px; --sh-card:0 1px 3px rgba(15,23,42,.03); --sh-menu:0 20px 50px rgba(0,0,0,.15); --sh-modal:0 25px 70px rgba(0,0,0,.30); --sh-panel:30px 0 60px rgba(0,0,0,.15); --sh-float:0 15px 40px rgba(0,0,0,.25); --t-fast:.15s ease; --t-base:.22s ease; --t-panel:.35s cubic-bezier(.32,.72,0,1); --sidebar-w:278px; --content-max:1400px; --pad-x:32px; --row-h:44px; --cell-y:11px; --z-side:40; --z-head:35; --z-float:300; --z-panel:1000; --z-modal:999; --z-confirm:1100; --z-toast:1200; } /* الكثافة المضغوطة — تقلّص الإيقاع دون تغيير الهوية */ [data-density="compact"]{ --pad-x:22px; --row-h:34px; --cell-y:6px; } /* ============================================================================= 3) الأساس والطبقة الجوّية ============================================================================= */ *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;} body{ margin:0; min-height:100vh; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:13.5px; font-weight:400; line-height:1.7; -webkit-font-smoothing:antialiased; } /* تدرّجان شعاعيان + حبيبات — اللمسة التوقيعية الأولى */ body::before{ content:''; position:fixed; inset:0; z-index:-2; pointer-events:none; background: radial-gradient(1100px 620px at 88% -8%, color-mix(in srgb,var(--primary) 13%,transparent), transparent 62%), radial-gradient(900px 520px at 4% 102%, color-mix(in srgb,var(--accent) 10%,transparent), transparent 58%); } body::after{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.03; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } img,svg{display:block; max-width:100%;} svg{flex:none;} a{color:inherit; text-decoration:none;} button,input,select,textarea{font-family:inherit; font-size:inherit; color:inherit;} button{cursor:pointer;} :focus-visible{outline:2px solid var(--primary); outline-offset:2px; border-radius:4px;} ::selection{background:var(--primary-soft); color:var(--ink);} ::-webkit-scrollbar{width:10px; height:10px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:var(--line); border-radius:var(--r-pill); border:3px solid var(--bg);} ::-webkit-scrollbar-thumb:hover{background:var(--muted);} /* ============================================================================= 4) النصوص ============================================================================= */ .num,.mono{font-family:var(--font-mono); direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums;} .ltr{direction:ltr; unicode-bidi:isolate; text-align:right;} .muted{color:var(--muted);} .soft{color:var(--ink-soft);} .ok{color:var(--ok-ink);} .warn{color:var(--warn-ink);} .err{color:var(--danger-ink);} .info{color:var(--info-ink);} .t-2xs{font-size:11px;} .t-xs{font-size:12px;} .t-sm{font-size:13px;} .t-md{font-size:14px;} .b{font-weight:700;} .sb{font-weight:600;} .truncate{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .eyebrow{ font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } /* ============================================================================= 5) هيكل التطبيق — مطابق لمواصفات الدليل §4 حرفياً السايدبار: سطح --card صلب، حدّ على الحافة الداخلية، ٢٧٨px، لاصق بارتفاع الشاشة. ============================================================================= */ .app{display:flex; min-height:100vh; align-items:flex-start;} /* ---- السايدبار ---- */ .sidebar{ width:var(--sidebar-w); flex:0 0 var(--sidebar-w); background:var(--card); border-inline-end:1px solid var(--line-soft); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; z-index:var(--z-side); } .sidebar-header{padding:18px 18px 16px; border-block-end:1px solid var(--line-soft);} .sb-logo-row{display:flex; align-items:center; gap:11px; margin-bottom:14px;} .sb-logo-mark{ width:42px; height:42px; border-radius:11px; flex:none; background:var(--ink); color:var(--card); display:grid; place-items:center; box-shadow:0 4px 10px rgba(0,0,0,.12); font-size:17px; font-weight:800; letter-spacing:-.02em; } .sb-logo-mark svg{width:21px; height:21px;} .sb-logo-text{flex:1; min-width:0;} .sb-logo-text .facility{ font-size:13px; font-weight:700; color:var(--ink); line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sb-logo-text .system{font-size:11px; color:var(--muted); margin-top:3px; font-weight:500;} /* زر الإجراء الرئيسي في السايدبار (الدليل §4) */ .side-action{ width:100%; padding:11px 14px; background:var(--ink); color:var(--card); border:none; border-radius:11px; font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; transition:all var(--t-base); box-shadow:0 2px 6px rgba(0,0,0,.08); } .side-action:hover{background:var(--primary); transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.14);} .side-action svg{width:15px; height:15px;} .side-action kbd{ margin-inline-start:auto; font-family:var(--font-mono); font-size:10px; font-weight:700; opacity:.6; } .sidebar-nav{flex:1; padding:14px 10px; overflow-y:auto; scrollbar-width:thin;} .sidebar-nav::-webkit-scrollbar{width:6px;} .sidebar-nav::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px; border:none;} .nav-section{margin-bottom:18px;} .nav-section-title{ font-size:10.5px; color:var(--muted); font-weight:700; letter-spacing:.12em; padding:0 12px 6px; text-transform:uppercase; } .nav-item{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:9px; color:var(--ink-soft); cursor:pointer; text-decoration:none; font-size:13.5px; font-weight:500; margin-bottom:2px; position:relative; transition:all var(--t-fast); } .nav-item:hover:not(.active){background:var(--bg-2); color:var(--ink);} .nav-item.active{ background:var(--primary); color:var(--card); font-weight:700; box-shadow:0 4px 10px rgba(0,0,0,.12); } /* شريط الـaccent على الحافة الخارجية — اللمسة التوقيعية الثانية */ .nav-item.active::before{ content:''; position:absolute; inset-inline-start:-10px; top:25%; bottom:25%; width:4px; background:var(--accent); border-radius:2px; } .nav-item svg.lead{width:17px; height:17px; flex:none;} .nav-count{ margin-inline-start:auto; background:var(--danger); color:var(--card); font-family:var(--font-mono); font-size:10px; font-weight:700; border-radius:var(--r-pill); padding:1px 7px; min-width:19px; text-align:center; } .nav-count.soft{background:var(--bg-2); color:var(--muted);} .nav-item.active .nav-count.soft{background:rgba(255,255,255,.22); color:var(--card);} .sidebar-footer{border-block-start:1px solid var(--line-soft); padding:10px;} .user-card{ display:flex; align-items:center; gap:10px; width:100%; padding:8px; border-radius:11px; border:none; background:transparent; cursor:pointer; text-align:start; transition:background var(--t-base); } .user-card:hover{background:var(--bg-2);} .user-avatar{ width:38px; height:38px; border-radius:50%; flex:none; background:linear-gradient(135deg,var(--primary),var(--accent)); color:var(--card); display:grid; place-items:center; font-weight:700; font-size:13px; } .user-info-text{flex:1; min-width:0;} .user-info-text .uname{font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .user-info-text .uemail{font-size:11px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .user-card .user-chev{width:14px; height:14px; color:var(--muted);} .sidebar-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:calc(var(--z-side) - 1); opacity:0; visibility:hidden; transition:all var(--t-base); } .sidebar-backdrop.open{opacity:1; visibility:visible;} /* ---- العمود الرئيسي والترويسة ---- */ .main{flex:1; min-width:0; display:flex; flex-direction:column;} .app-header{ background:var(--card); border-block-end:1px solid var(--line-soft); padding:11px 22px; display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:var(--z-head); } .header-breadcrumb{display:flex; align-items:center; gap:8px; font-size:13px; min-width:0;} .header-breadcrumb a{color:var(--muted); display:flex; align-items:center; gap:6px; white-space:nowrap;} .header-breadcrumb a:hover{color:var(--ink);} .header-breadcrumb a svg{width:14px; height:14px;} .header-breadcrumb .sep{color:var(--line); font-size:14px; margin:0 2px;} .header-breadcrumb .current{color:var(--ink); font-weight:700; white-space:nowrap;} .header-search{flex:1; max-width:420px; margin:0 auto; position:relative;} .header-search input{ width:100%; padding:9px; padding-inline-start:38px; padding-inline-end:52px; background:var(--bg-2); border:1px solid var(--line-soft); border-radius:9px; font-family:inherit; font-size:13px; color:var(--ink); transition:all var(--t-base); cursor:pointer; } .header-search input:focus{outline:none; border-color:var(--primary); background:var(--card); box-shadow:0 0 0 3px var(--primary-soft);} .header-search input::placeholder{color:var(--muted);} .header-search .search-ic{ position:absolute; inset-inline-start:12px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--muted); pointer-events:none; } .header-search .hotkey{ position:absolute; inset-inline-end:8px; top:50%; transform:translateY(-50%); display:flex; gap:3px; pointer-events:none; } .header-search .hotkey kbd{ font-family:var(--font-mono); font-size:10.5px; padding:2px 6px; background:var(--card); border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; color:var(--muted); font-weight:600; } .header-actions{display:flex; align-items:center; gap:6px;} .icon-btn{ width:38px; height:38px; border-radius:9px; flex:none; border:1px solid transparent; background:transparent; color:var(--ink-soft); cursor:pointer; display:grid; place-items:center; position:relative; transition:all var(--t-base); } .icon-btn:hover{background:var(--bg-2); color:var(--ink);} .icon-btn svg{width:18px; height:18px;} .icon-btn .nbadge{ position:absolute; top:5px; inset-inline-end:5px; min-width:17px; height:17px; padding:0 4px; background:var(--accent); color:var(--card); font-family:var(--font-mono); font-size:10px; font-weight:700; border-radius:10px; display:grid; place-items:center; border:2px solid var(--card); } .icon-btn .nbadge.zero{display:none;} .sb-toggle{display:none;} /* ---- القوائم المنسدلة في الترويسة ---- */ .hdr-pop{position:relative;} .pop-panel{ position:absolute; top:calc(100% + 10px); inset-inline-end:0; background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-menu); z-index:var(--z-float); overflow:hidden; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity var(--t-base), visibility var(--t-base), transform var(--t-base); } .pop-panel.open{opacity:1; visibility:visible; transform:translateY(0);} .pop-panel.from-start{inset-inline-end:auto; inset-inline-start:0;} .pop-head{ padding:13px 16px; border-block-end:1px solid var(--line-soft); background:var(--bg); display:flex; align-items:center; justify-content:space-between; gap:12px; } .pop-head .t{font-size:13.5px; font-weight:700; color:var(--ink);} .pop-foot{padding:10px 16px; border-block-start:1px solid var(--line-soft); background:var(--bg); text-align:center;} .pop-link{ background:none; border:none; font-family:inherit; font-size:12.5px; font-weight:700; color:var(--primary); cursor:pointer; padding:2px 4px; border-radius:6px; } .pop-link:hover{text-decoration:underline;} /* مبدّل نطاق الفرع */ .branch-btn{ display:flex; align-items:center; gap:9px; max-width:230px; background:var(--bg-2); border:1px solid var(--line-soft); color:var(--ink); padding:7px 12px 7px 10px; border-radius:var(--r-pill); cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:600; transition:all var(--t-base); } .branch-btn:hover{border-color:var(--primary); background:var(--card);} .branch-btn svg.pin{width:14px; height:14px; color:var(--primary); flex:none;} .branch-btn svg.cv{width:12px; height:12px; color:var(--muted); flex:none;} .branch-btn .bname{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .branch-list{width:300px; max-height:380px; overflow-y:auto; padding:8px;} .branch-opt{ display:flex; align-items:center; gap:11px; width:100%; text-align:start; padding:9px 11px; border-radius:var(--r-sm); border:1px solid transparent; background:transparent; font-family:inherit; cursor:pointer; transition:all var(--t-fast); } .branch-opt:hover{background:var(--bg-2);} .branch-opt.on{background:var(--primary-soft); border-color:var(--primary);} .branch-opt .bo-ic{ width:32px; height:32px; border-radius:9px; flex:none; background:var(--bg-2); color:var(--ink-soft); display:grid; place-items:center; } .branch-opt.on .bo-ic{background:var(--card); color:var(--primary);} .branch-opt .bo-ic svg{width:15px; height:15px;} .branch-opt .bo-t{flex:1; min-width:0;} .branch-opt .bo-name{font-size:13px; font-weight:700; color:var(--ink);} .branch-opt .bo-sub{font-family:var(--font-mono); direction:ltr; text-align:start; font-size:10.5px; color:var(--muted); margin-top:2px;} .branch-opt .bo-num{ font-family:var(--font-mono); font-size:11.5px; font-weight:700; color:var(--ink-soft); background:var(--bg); border-radius:var(--r-tag); padding:3px 7px; } /* ساعة الترويسة */ .hdr-clock{ display:flex; align-items:center; gap:8px; padding:6px 12px; background:var(--bg-2); border:1px solid var(--line-soft); border-radius:var(--r-pill); } .hdr-clock .ck-time{font-family:var(--font-mono); direction:ltr; font-size:12.5px; font-weight:700; color:var(--ink);} .hdr-clock .ck-day{font-size:11.5px; color:var(--muted); font-weight:600;} /* لوحة اختيار الألوان */ .theme-selector{position:relative;} .theme-btn{ display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line-soft); color:var(--ink-soft); padding:7px 14px 7px 10px; border-radius:var(--r-pill); cursor:pointer; font-family:inherit; font-size:13px; font-weight:500; transition:all var(--t-base); } .theme-btn:hover{border-color:var(--primary); color:var(--ink); background:var(--bg-2);} .theme-btn .theme-preview{ width:16px; height:16px; border-radius:50%; flex:none; background:conic-gradient(var(--primary) 0 50%, var(--accent) 50% 100%); border:1.5px solid var(--card); box-shadow:0 0 0 1px var(--line); } .theme-dropdown{ position:absolute; top:calc(100% + 10px); inset-inline-end:0; background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); padding:18px; width:320px; box-shadow:var(--sh-menu); z-index:var(--z-float); opacity:0; visibility:hidden; transform:translateY(-8px); transition:all var(--t-base); } .theme-dropdown.open{opacity:1; visibility:visible; transform:translateY(0);} .theme-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;} .theme-cell{cursor:pointer; padding:4px; border-radius:12px; border:none; background:transparent; transition:all var(--t-fast);} .theme-cell:hover{background:var(--bg-2);} .theme-cell.active{background:var(--primary-soft);} .theme-swatch{ width:100%; aspect-ratio:1; border-radius:10px; border:2px solid var(--card); box-shadow:0 0 0 1px var(--line), 0 2px 4px rgba(0,0,0,.08); transition:all var(--t-fast); } .theme-cell.active .theme-swatch{box-shadow:0 0 0 2px var(--primary), 0 4px 8px rgba(0,0,0,.12);} .theme-cell-label{display:block; font-size:10px; text-align:center; margin-top:5px; color:var(--ink-soft); font-weight:500;} .theme-cell.active .theme-cell-label{color:var(--primary); font-weight:700;} /* الإشعارات */ .notif-list{width:380px; max-height:420px; overflow-y:auto;} .notif-item{ display:flex; gap:11px; width:100%; text-align:start; padding:13px 16px; border:none; border-block-end:1px solid var(--line-soft); background:transparent; font-family:inherit; cursor:pointer; transition:background var(--t-fast); } .notif-item:hover{background:var(--bg);} .notif-item.unread{background:var(--primary-soft);} .notif-item .nf-ic{width:32px; height:32px; border-radius:9px; display:grid; place-items:center; flex:none;} .notif-item .nf-ic svg{width:15px; height:15px;} .nf-ic.ok{background:var(--ok-bg); color:var(--ok-ink);} .nf-ic.warn{background:var(--warn-bg); color:var(--warn-ink);} .nf-ic.err{background:var(--danger-bg); color:var(--danger-ink);} .nf-ic.info{background:var(--info-bg); color:var(--info-ink);} .notif-item .nf-t{flex:1; min-width:0;} .notif-item .nf-title{display:block; font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.45;} .notif-item .nf-body{display:block; font-size:11.5px; color:var(--ink-soft); margin-top:3px; line-height:1.6;} .notif-item .nf-time{display:block; font-family:var(--font-mono); direction:ltr; text-align:start; font-size:10px; color:var(--muted); margin-top:5px;} /* قائمة المستخدم */ .user-btn{ display:flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; background:transparent; border:1px solid var(--line-soft); border-radius:var(--r-pill); cursor:pointer; font-family:inherit; transition:all var(--t-base); } .user-btn:hover{background:var(--bg-2); border-color:var(--line);} .user-btn .ub-av{ width:30px; height:30px; border-radius:50%; flex:none; background:linear-gradient(135deg,var(--primary),var(--accent)); color:var(--card); display:grid; place-items:center; font-size:11.5px; font-weight:700; } .user-btn .ub-n{font-size:12.5px; font-weight:700; color:var(--ink);} .user-btn svg.cv{width:12px; height:12px; color:var(--muted); flex:none;} .user-menu{width:280px;} .um-head{padding:15px 16px; border-block-end:1px solid var(--line-soft); background:var(--bg);} .um-head .n{font-size:13.5px; font-weight:700; color:var(--ink);} .um-head .r{font-size:11.5px; color:var(--muted); margin-top:3px;} .um-head .e{font-family:var(--font-mono); direction:ltr; text-align:start; font-size:11px; color:var(--muted); margin-top:5px;} .um-body{padding:6px; max-height:340px; overflow-y:auto;} .um-sec{ font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; padding:9px 11px 5px; } .um-item{ display:flex; align-items:center; gap:10px; width:100%; text-align:start; padding:9px 11px; border-radius:var(--r-sm); border:none; background:transparent; font-family:inherit; font-size:12.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; transition:all var(--t-fast); } .um-item:hover{background:var(--bg-2); color:var(--ink);} .um-item svg{width:15px; height:15px;} .um-item.on{background:var(--primary-soft); color:var(--ink); font-weight:700;} .um-item.danger{color:var(--danger-ink);} .um-item.danger:hover{background:var(--danger-bg);} .app-content{ flex:1; width:100%; max-width:var(--content-max); margin:0 auto; padding:28px var(--pad-x) 48px; } /* ============================================================================= 6) عنوان الصفحة ============================================================================= */ .page-title-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:22px; } .page-title{ font-family:var(--font-display); font-size:28px; font-weight:700; letter-spacing:-.02em; line-height:1.25;} .page-subtitle{font-size:14px; color:var(--muted); margin-top:3px;} .page-actions{display:flex; align-items:center; gap:9px; flex-wrap:wrap;} .page-hero{ padding:22px 24px; margin-bottom:22px; background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-lg); box-shadow:var(--sh-card); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; } .page-hero-greet{ font-family:var(--font-display);font-size:27px; font-weight:700; letter-spacing:-.02em; line-height:1.25;} .page-hero-sub{font-size:13px; color:var(--muted); margin-top:4px;} /* ============================================================================= 7) الأزرار ============================================================================= */ .btn-add,.btn-secondary,.btn-danger,.toolbar-btn,.btn-primary{ display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:var(--r-btn); font-family:inherit; font-weight:700; white-space:nowrap; transition:all var(--t-base); border:1px solid transparent; } .btn-add{background:var(--ink); color:var(--card); border-color:var(--ink); padding:9px 16px; font-size:13px;} .btn-add:hover{background:var(--primary); border-color:var(--primary); transform:translateY(-1px);} .btn-secondary{background:transparent; color:var(--ink-soft); border-color:var(--line); padding:9px 16px; font-size:13px;} .btn-secondary:hover{background:var(--bg-2); color:var(--ink); border-color:var(--muted);} .btn-danger{background:var(--danger); color:var(--card); border-color:var(--danger); padding:9px 16px; font-size:13px;} .btn-danger:hover{filter:brightness(.92); transform:translateY(-1px);} .btn-primary{background:var(--ink); color:var(--card); border-color:var(--ink); padding:14px 18px; font-size:14.5px; width:100%;} .btn-primary:hover{background:var(--primary); border-color:var(--primary);} .toolbar-btn{ background:var(--card); color:var(--ink-soft); border-color:var(--line-soft); padding:7px 12px; font-size:12.5px; font-weight:600; } .toolbar-btn:hover{border-color:var(--line); color:var(--ink); transform:translateY(-1px);} .toolbar-btn.on{background:var(--primary-soft); border-color:var(--primary); color:var(--ink);} .toolbar-btn svg{color:var(--muted);} .toolbar-btn.on svg{color:var(--primary);} .toolbar-btn-count{ padding:1px 6px; border-radius:var(--r-pill); background:var(--primary); color:var(--card); font-family:var(--font-mono); font-size:10px; font-weight:700; min-width:18px; text-align:center; } button[disabled],.btn-add[disabled],.toolbar-btn[disabled]{opacity:.45; pointer-events:none;} /* ============================================================================= 8) البطاقة ============================================================================= */ .card{ background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-md); box-shadow:var(--sh-card); overflow:hidden; /* بطاقات الصف الواحد تتساوى ارتفاعاً، والجسم يأخذ ما تبقّى — فلا يبقى بياض معلّق تحت البطاقة الأقصر */ display:flex; flex-direction:column; } .card-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:15px 18px; border-block-end:1px solid var(--line-soft); } .card-title-block{min-width:0;} .card-title{display:flex; align-items:center; gap:9px; font-size:16px; font-weight:700; letter-spacing:-.01em;} .card-title svg{width:17px; height:17px; color:var(--primary);} .card-subtitle{font-size:12px; color:var(--muted); margin-top:2px; font-weight:500;} .card-body{padding:18px; flex:1 1 auto; min-height:0;} .card-body > .chart{height:100%;} .card-body > .chart.donut-chart{align-items:center; justify-content:center;} .card-body.flush{padding:0;} .card-foot{padding:12px 18px; border-block-start:1px solid var(--line-soft); background:var(--bg);} /* ============================================================================= 9) بطاقات المؤشرات ============================================================================= */ .kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:13px;} .kpi-grid.g3{grid-template-columns:repeat(3,1fr);} .kpi-grid.g6{grid-template-columns:repeat(6,1fr);} .kpi{ position:relative; padding:15px 16px 14px; background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-sm); box-shadow:var(--sh-card); transition:transform var(--t-base), border-color var(--t-base); } a.kpi:hover{transform:translateY(-1px); border-color:var(--line);} .kpi-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:9px;} .kpi-label{ font-family:var(--font-mono); font-size:10.5px; font-weight:700; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; line-height:1.5; } .kpi-ic{width:32px; height:32px; flex:none; border-radius:10px; display:grid; place-items:center;} .kpi-ic svg{width:16px; height:16px;} .kpi-ic.t-ok{background:var(--ok-bg); color:var(--ok-ink);} .kpi-ic.t-warn{background:var(--warn-bg); color:var(--warn-ink);} .kpi-ic.t-err{background:var(--danger-bg); color:var(--danger-ink);} .kpi-ic.t-info{background:var(--info-bg); color:var(--info-ink);} .kpi-ic.t-accent{background:var(--accent-soft); color:var(--ink);} .kpi-ic.t-primary{background:var(--primary-soft); color:var(--primary);} .kpi-val{ font-family:var(--font-mono); font-size:30px; font-weight:800; line-height:1; letter-spacing:-.03em; direction:ltr; unicode-bidi:isolate; text-align:right; } .kpi-val .cur{font-family:var(--font-body); font-size:12.5px; font-weight:600; color:var(--muted); letter-spacing:0;} .kpi-foot{margin-top:8px; font-size:11.5px; color:var(--muted); font-weight:500; display:flex; align-items:center; gap:6px;} .kpi-trend{ display:inline-flex; align-items:center; gap:3px; padding:1px 7px; border-radius:var(--r-pill); font-family:var(--font-mono); font-size:10.5px; font-weight:700; } .kpi-trend.up{background:var(--ok-bg); color:var(--ok-ink);} .kpi-trend.down{background:var(--danger-bg); color:var(--danger-ink);} .kpi-trend.flat{background:var(--bg-2); color:var(--muted);} .kpi.highlight{border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft);} .kpi.urgent::before{ content:''; position:absolute; inset-inline:0; top:0; height:3px; background:var(--accent); border-radius:var(--r-sm) var(--r-sm) 0 0; } /* ============================================================================= 10) الجدول ============================================================================= */ .table-shell{ background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-md); box-shadow:var(--sh-card); overflow:hidden; } .table-tools{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:12px 14px; border-block-end:1px solid var(--line-soft); } .table-search{ display:flex; align-items:center; gap:8px; flex:1; min-width:200px; padding:7px 12px; background:var(--bg); border:1px solid var(--line-soft); border-radius:var(--r-field); transition:border-color var(--t-fast), background var(--t-fast); } .table-search:focus-within{background:var(--card); border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft);} .table-search svg{color:var(--muted); width:15px; height:15px;} .table-search input{flex:1; border:none; background:transparent; outline:none; font-size:13px;} .table-head-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 14px; background:var(--bg); border-block-end:1px solid var(--line-soft); font-size:12px; color:var(--muted); } .table-head-bar strong{color:var(--ink); font-weight:700; font-family:var(--font-mono);} .table-scroll{overflow-x:auto;} .data-table{width:100%; border-collapse:collapse; font-size:13px;} .data-table thead th{ background:var(--bg); text-align:start; white-space:nowrap; padding:9px 12px; border-block-end:1px solid var(--line-soft); font-family:var(--font-mono); font-size:10.5px; font-weight:700; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; } .data-table thead th.sortable{cursor:pointer; user-select:none;} .data-table thead th.sortable:hover{color:var(--ink);} .data-table thead th .sort-ic{display:inline-block; margin-inline-start:4px; opacity:.35; font-size:9px;} .data-table thead th.sorted .sort-ic{opacity:1; color:var(--primary);} .data-table tbody td{ padding:var(--cell-y) 12px; border-block-end:1px solid var(--line-soft); vertical-align:middle; height:var(--row-h); } .data-table tbody tr{transition:background var(--t-fast);} .data-table tbody tr:hover{background:var(--bg);} .data-table tbody tr.clickable{cursor:pointer;} .data-table tbody tr.is-selected{background:var(--primary-soft);} .data-table tbody tr:last-child td{border-block-end:none;} .data-table td.align-c,.data-table th.align-c{text-align:center;} .data-table td.align-num,.data-table th.align-num{text-align:start; font-family:var(--font-mono); direction:ltr; unicode-bidi:isolate;} .col-check{width:40px;} .cell-id{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; padding:2px 8px; background:var(--bg-2); border-radius:var(--r-tag); font-family:var(--font-mono); font-size:11.5px; font-weight:700; color:var(--ink-soft); direction:ltr; unicode-bidi:isolate; } .cell-person{display:flex; align-items:center; gap:10px; min-width:0;} .cell-person .who{min-width:0;} .cell-person b{display:block; font-size:13px; font-weight:600; line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .cell-person span{display:block; font-size:11px; color:var(--muted); line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .avatar{ flex:none; border-radius:50%; display:grid; place-items:center; font-family:var(--font-body); font-weight:700; color:var(--card); letter-spacing:-.01em; } .avatar.xs{width:26px; height:26px; font-size:10px;} .avatar.sm{width:32px; height:32px; font-size:11.5px;} .avatar.md{width:36px; height:36px; font-size:12.5px;} .avatar.lg{width:56px; height:56px; font-size:19px;} .avatar.xl{width:76px; height:76px; font-size:26px;} .row-menu-btn{ width:28px; height:28px; border:none; background:transparent; border-radius:8px; display:grid; place-items:center; color:var(--muted); opacity:0; transition:all var(--t-fast); } tr:hover .row-menu-btn{opacity:1;} .row-menu-btn:hover{background:var(--bg-2); color:var(--ink);} .table-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:11px 14px; border-block-start:1px solid var(--line-soft); background:var(--bg); font-size:12px; color:var(--muted); } .pager{display:flex; align-items:center; gap:5px;} .pager button{ min-width:30px; height:30px; padding:0 8px; border:1px solid var(--line-soft); background:var(--card); border-radius:9px; font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--ink-soft); transition:all var(--t-fast); } .pager button:hover{border-color:var(--line); color:var(--ink);} .pager button.on{background:var(--ink); border-color:var(--ink); color:var(--card);} .pager button[disabled]{opacity:.35; pointer-events:none;} /* لوحة الفلترة */ .filter-panel{ display:none; gap:18px; flex-wrap:wrap; padding:14px; border-block-end:1px solid var(--line-soft); background:var(--bg); } .filter-panel.on{display:flex;} .filter-group{min-width:150px;} .filter-group-title{ font-family:var(--font-mono); font-size:10.5px; font-weight:700; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; margin-bottom:7px; } .filter-chips{display:flex; flex-wrap:wrap; gap:6px;} .chip{ display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border:1px solid var(--line-soft); border-radius:var(--r-pill); background:var(--card); font-size:12px; font-weight:600; color:var(--ink-soft); transition:all var(--t-fast); } .chip:hover{border-color:var(--line); color:var(--ink);} .chip.on{background:var(--primary-soft); border-color:var(--primary); color:var(--ink);} .chip .n{font-family:var(--font-mono); font-size:10px; color:var(--muted);} .chip.on .n{color:var(--primary);} /* شريط التحديد الجماعي */ .bulk-bar{ position:fixed; inset-inline:0; bottom:22px; z-index:var(--z-float); width:fit-content; margin:0 auto; display:flex; align-items:center; gap:12px; padding:10px 16px; background:var(--ink); color:var(--card); border-radius:var(--r-pill); box-shadow:var(--sh-float); animation:rise var(--t-base); } .bulk-bar b{font-family:var(--font-mono); font-size:13px;} .bulk-bar button{ background:rgba(255,255,255,.12); color:var(--card); border:none; border-radius:9px; padding:6px 13px; font-size:12.5px; font-weight:600; transition:background var(--t-fast); } .bulk-bar button:hover{background:rgba(255,255,255,.22);} @keyframes rise{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}} /* ============================================================================= 11) الحالات والوسوم ============================================================================= */ .status-pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--r-pill); font-size:11.5px; font-weight:600; white-space:nowrap; } .status-pill .dot{width:6px; height:6px; border-radius:50%; flex:none;} .st-active{background:var(--ok-bg); color:var(--ok-ink);} .st-active .dot{background:var(--ok);} .st-pending{background:var(--warn-bg); color:var(--warn-ink);} .st-pending .dot{background:var(--warn);} .st-rejected{background:var(--danger-bg); color:var(--danger-ink);} .st-rejected .dot{background:var(--danger);} .st-info{background:var(--info-bg); color:var(--info-ink);} .st-info .dot{background:var(--info);} .st-inactive{background:var(--bg-2); color:var(--muted);} .st-inactive .dot{background:var(--neutral);} /* الحالة الحيّة فقط تنبض */ .status-pill.live .dot{box-shadow:0 0 0 0 currentColor; animation:pulse 2s infinite;} @keyframes pulse{ 0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 55%,transparent);} 70%{box-shadow:0 0 0 6px transparent;} 100%{box-shadow:0 0 0 0 transparent;} } .tag{ display:inline-flex; align-items:center; gap:5px; padding:2px 8px; background:var(--bg-2); border-radius:var(--r-tag); font-size:11px; font-weight:600; color:var(--ink-soft); white-space:nowrap; } .tag.t-ok{background:var(--ok-bg); color:var(--ok-ink);} .tag.t-warn{background:var(--warn-bg); color:var(--warn-ink);} .tag.t-err{background:var(--danger-bg); color:var(--danger-ink);} .tag.t-info{background:var(--info-bg); color:var(--info-ink);} .tag.t-accent{background:var(--accent-soft); color:var(--ink);} /* شريط تقدّم */ .meter{height:6px; border-radius:var(--r-pill); background:var(--bg-2); overflow:hidden;} .meter > i{display:block; height:100%; border-radius:var(--r-pill); background:var(--primary); transition:width var(--t-base);} .meter.t-ok > i{background:var(--ok);} .meter.t-warn > i{background:var(--warn);} .meter.t-err > i{background:var(--danger);} /* ============================================================================= 12) النماذج ============================================================================= */ .form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;} .form-field{display:flex; flex-direction:column; gap:6px; min-width:0;} .form-field.span-all{grid-column:1 / -1;} .form-field label{font-size:12px; font-weight:700; color:var(--ink-soft);} .req{color:var(--accent); margin-inline-start:3px;} .form-input,.form-select,.form-textarea{ width:100%; padding:9px 12px; background:var(--bg); color:var(--ink); border:1px solid var(--line-soft); border-radius:var(--r-field); font-size:13px; outline:none; transition:all var(--t-fast); } .form-textarea{min-height:86px; resize:vertical; line-height:1.7;} .form-input:hover,.form-select:hover,.form-textarea:hover{border-color:var(--line);} .form-input:focus,.form-select:focus,.form-textarea:focus{ background:var(--card); border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); } .form-input.err,.form-select.err{border-color:var(--danger);} .field-error{font-size:11.5px; color:var(--danger-ink); font-weight:600;} .field-hint{font-size:11.5px; color:var(--muted);} .form-select{appearance:none; background-image:none; padding-inline-end:30px;} .select-wrap{position:relative;} .select-wrap::after{ content:''; position:absolute; inset-inline-end:13px; top:calc(50% - 4px); width:7px; height:7px; border-inline-start:1.6px solid var(--muted); border-block-end:1.6px solid var(--muted); transform:rotate(-45deg); pointer-events:none; transition:transform var(--t-fast); } .toggle-switch{ position:relative; width:40px; height:22px; flex:none; border-radius:var(--r-pill); background:var(--bg-3); border:none; transition:background var(--t-base); } .toggle-switch::after{ content:''; position:absolute; top:3px; inset-inline-end:3px; width:16px; height:16px; border-radius:50%; background:var(--card); box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform var(--t-base); } .toggle-switch.on{background:var(--primary);} .toggle-switch.on::after{transform:translateX(-18px);} .radio-card{ display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--card); cursor:pointer; transition:all var(--t-fast); } .radio-card:hover{border-color:var(--line);} .radio-card.on{border-color:var(--primary); background:var(--primary-soft);} .radio-card b{display:block; font-size:13px; font-weight:700;} .radio-card span{display:block; font-size:11.5px; color:var(--muted); line-height:1.55;} input[type="checkbox"]{ width:15px; height:15px; accent-color:var(--primary); cursor:pointer; margin:0; } /* ============================================================================= 13) الطبقات — نافذة، لوحة منزلقة، تأكيد، رسالة عابرة ============================================================================= */ .overlay{ position:fixed; inset:0; background:rgba(8,15,26,.45); display:grid; place-items:center; padding:24px; opacity:0; pointer-events:none; transition:opacity var(--t-base); } .overlay.on{opacity:1; pointer-events:auto;} .overlay-modal{z-index:var(--z-modal);} .overlay-confirm{z-index:var(--z-confirm);} .modal{ width:100%; max-width:660px; max-height:88vh; display:flex; flex-direction:column; background:var(--card); border-radius:var(--r-xl); box-shadow:var(--sh-modal); transform:translateY(10px) scale(.99); transition:transform var(--t-base); } .overlay.on .modal{transform:none;} .modal.wide{max-width:900px;} .modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:18px 20px; border-block-end:1px solid var(--line-soft); } .modal-head h3{margin:0; font-size:17px; font-weight:700; letter-spacing:-.01em;} .modal-head p{margin:2px 0 0; font-size:12.5px; color:var(--muted);} .modal-body{padding:20px; overflow-y:auto;} .modal-foot{ display:flex; align-items:center; justify-content:flex-end; gap:9px; padding:14px 20px; border-block-start:1px solid var(--line-soft); background:var(--bg); border-radius:0 0 var(--r-xl) var(--r-xl); } .confirm-dialog{max-width:440px;} .confirm-dialog .modal-body{text-align:center; padding:26px 24px 20px;} .confirm-ic{ width:52px; height:52px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center; background:var(--danger-bg); color:var(--danger); } .confirm-dialog h3{font-size:17px; font-weight:700; margin:0 0 6px;} .confirm-dialog p{margin:0; font-size:13px; color:var(--muted); line-height:1.7;} .confirm-name{ display:inline-block; margin-top:11px; padding:5px 12px; background:var(--bg-2); border-radius:var(--r-tag); font-family:var(--font-mono); font-size:12.5px; font-weight:700; } .slide-panel{ position:fixed; inset-block:0; inset-inline-end:0; z-index:var(--z-panel); width:560px; max-width:94vw; display:flex; flex-direction:column; background:var(--card); box-shadow:var(--sh-panel); transform:translateX(-100%); transition:transform var(--t-panel); } .slide-panel.on{transform:none;} .slide-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:18px 20px; border-block-end:1px solid var(--line-soft); } .slide-head h3{margin:0; font-size:17px; font-weight:700;} .slide-head p{margin:2px 0 0; font-size:12.5px; color:var(--muted);} .slide-body{flex:1; overflow-y:auto; padding:20px;} .slide-foot{ display:flex; align-items:center; justify-content:flex-end; gap:9px; padding:14px 20px; border-block-start:1px solid var(--line-soft); background:var(--bg); } .panel-backdrop{ position:fixed; inset:0; z-index:calc(var(--z-panel) - 1); background:rgba(8,15,26,.45); opacity:0; pointer-events:none; transition:opacity var(--t-base); } .panel-backdrop.on{opacity:1; pointer-events:auto;} .toast-stack{ position:fixed; top:16px; inset-inline-start:16px; z-index:var(--z-toast); display:flex; flex-direction:column; gap:9px; pointer-events:none; } .toast{ display:flex; align-items:flex-start; gap:11px; min-width:290px; max-width:400px; padding:12px 14px; background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-sm); box-shadow:var(--sh-menu); animation:slidein var(--t-base); border-inline-start:3px solid var(--primary); } .toast.t-ok{border-inline-start-color:var(--ok);} .toast.t-warn{border-inline-start-color:var(--warn);} .toast.t-err{border-inline-start-color:var(--danger);} .toast .ic{width:20px; height:20px; flex:none; margin-top:1px;} .toast.t-ok .ic{color:var(--ok-ink);} .toast.t-warn .ic{color:var(--warn-ink);} .toast.t-err .ic{color:var(--danger-ink);} .toast b{display:block; font-size:13px; font-weight:700; line-height:1.5;} .toast span{display:block; font-size:12px; color:var(--muted); line-height:1.6;} @keyframes slidein{from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:none;}} /* قائمة منسدلة للصفوف — تُبنى فوق .pop-panel نفسها */ .pop-body{max-height:60vh; overflow-y:auto;} .pop-row{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 14px; border:none; background:transparent; text-align:start; font-size:12.5px; color:var(--ink-soft); font-family:inherit; cursor:pointer; transition:background var(--t-fast); } .pop-row:hover{background:var(--bg);} .pop-row.on{background:var(--primary-soft); color:var(--ink); font-weight:700;} .pop-row svg{color:var(--muted);} /* ============================================================================= 14) الحالة الفارغة ============================================================================= */ .empty-state{padding:52px 24px; text-align:center;} .empty-state-ic{ width:72px; height:72px; margin:0 auto 16px; border-radius:50%; display:grid; place-items:center; background:var(--bg-2); color:var(--muted); } .empty-state-ic svg{width:28px; height:28px;} .empty-state b{display:block; font-size:16px; font-weight:700; margin-bottom:6px;} .empty-state p{margin:0 auto 16px; max-width:400px; font-size:13px; color:var(--muted); line-height:1.75;} /* ============================================================================= 15) قوالب صغيرة متكرّرة ============================================================================= */ .list-row{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-block-end:1px solid var(--line-soft); transition:background var(--t-fast); } .list-row:last-child{border-block-end:none;} a.list-row:hover{background:var(--bg);} .list-row .grow{flex:1; min-width:0;} .list-row b{display:block; font-size:13px; font-weight:600; line-height:1.5;} .list-row span{display:block; font-size:11.5px; color:var(--muted); line-height:1.5;} .info-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px;} .info-item .k{ font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; margin-bottom:3px; } .info-item .v{font-size:13.5px; font-weight:600; line-height:1.6;} .timeline{position:relative; padding-inline-start:20px;} .timeline::before{content:''; position:absolute; inset-block:4px; inset-inline-start:5px; width:1px; background:var(--line-soft);} .tl-item{position:relative; padding-bottom:16px;} .tl-item::before{ content:''; position:absolute; inset-inline-start:-19px; top:6px; width:9px; height:9px; border-radius:50%; background:var(--card); border:2px solid var(--primary); } .tl-when{font-family:var(--font-mono); direction:ltr; unicode-bidi:isolate; font-size:11px; color:var(--muted);} .tl-what{font-size:13px; font-weight:600; line-height:1.6;} .tl-note{font-size:12px; color:var(--muted); line-height:1.6;} .segmented{display:inline-flex; padding:3px; background:var(--bg-2); border-radius:var(--r-btn); gap:2px;} .segmented button{ padding:6px 14px; border:none; background:transparent; border-radius:9px; font-size:12.5px; font-weight:600; color:var(--muted); transition:all var(--t-fast); } .segmented button:hover{color:var(--ink);} .segmented button.on{background:var(--card); color:var(--ink); font-weight:700; box-shadow:var(--sh-card);} .tabs{display:flex; gap:2px; border-block-end:1px solid var(--line-soft); margin-bottom:20px; overflow-x:auto;} .tabs button{ padding:10px 15px; border:none; background:transparent; white-space:nowrap; font-size:13px; font-weight:600; color:var(--muted); border-block-end:2px solid transparent; transition:all var(--t-fast); } .tabs button:hover{color:var(--ink);} .tabs button.on{color:var(--ink); font-weight:700; border-block-end-color:var(--primary);} .note{ display:flex; align-items:flex-start; gap:11px; padding:13px 15px; border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--card); border-inline-start:3px solid var(--info); font-size:12.5px; line-height:1.7; } .note.t-warn{border-inline-start-color:var(--warn); background:var(--warn-bg); border-color:transparent;} .note.t-err{border-inline-start-color:var(--danger); background:var(--danger-bg); border-color:transparent;} .note.t-ok{border-inline-start-color:var(--ok); background:var(--ok-bg); border-color:transparent;} .note svg{width:17px; height:17px; flex:none; margin-top:2px; color:var(--info);} .note.t-warn svg{color:var(--warn-ink);} .note.t-err svg{color:var(--danger-ink);} .note.t-ok svg{color:var(--ok-ink);} .note b{font-weight:700;} /* لوحة الأوامر */ .cmdk{ position:fixed; inset:0; z-index:var(--z-confirm); padding:12vh 20px 20px; background:rgba(8,15,26,.45); opacity:0; pointer-events:none; transition:opacity var(--t-base); } .cmdk.on{opacity:1; pointer-events:auto;} .cmdk-box{ max-width:620px; margin:0 auto; background:var(--card); border-radius:var(--r-lg); box-shadow:var(--sh-modal); overflow:hidden; } .cmdk-search{display:flex; align-items:center; gap:11px; padding:15px 18px; border-block-end:1px solid var(--line-soft);} .cmdk-search svg{color:var(--muted);} .cmdk-search input{flex:1; border:none; outline:none; background:transparent; font-size:15px;} .cmdk-list{max-height:56vh; overflow-y:auto; padding:6px;} .cmdk-sec{ font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; padding:9px 12px 5px; } .cmdk-row{ display:flex; align-items:center; gap:11px; width:100%; padding:9px 12px; border:none; background:transparent; border-radius:var(--r-field); text-align:start; font-size:13px; color:var(--ink-soft); transition:background var(--t-fast); } .cmdk-row:hover,.cmdk-row.cur{background:var(--bg-2); color:var(--ink);} .cmdk-row svg{width:16px; height:16px; color:var(--muted);} .cmdk-row .sub{margin-inline-start:auto; font-size:11px; color:var(--muted);} .cmdk-empty{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:26px 16px; color:var(--muted); font-size:13px; text-align:center; } .cmdk-empty svg{width:22px; height:22px;} /* ============================================================================= 16) الشبكات والمساعدات ============================================================================= */ .grid{display:grid; gap:16px;} .g-main{grid-template-columns:1.15fr .85fr;} .g-2{grid-template-columns:1fr 1fr;} .g-3{grid-template-columns:repeat(3,1fr);} .stack{display:flex; flex-direction:column; gap:16px;} .row{display:flex; align-items:center; gap:9px;} .row.wrap{flex-wrap:wrap;} .spacer{flex:1;} .mb-4{margin-bottom:16px;} .mb-5{margin-bottom:20px;} .mb-6{margin-bottom:24px;} .mt-3{margin-top:12px;} .mt-4{margin-top:16px;} .hidden{display:none !important;} /* ============================================================================= 17) الاستجابة — 1100 · 1024 · 900 · 720 · 600 · 500 ============================================================================= */ @media (max-width:1200px){ .kpi-grid.g6{grid-template-columns:repeat(3,1fr);} } @media (max-width:1100px){ .g-main{grid-template-columns:1fr;} .hide-1100{display:none !important;} } @media (max-width:1420px){ .hdr-clock{display:none;} } @media (max-width:1280px){ .user-btn .ub-n{display:none;} } @media (max-width:1180px){ .branch-btn .bname{max-width:92px;} } @media (max-width:1024px){ .sidebar{ position:fixed; inset-block:0; inset-inline-start:0; transform:translateX(100%); transition:transform var(--t-panel); box-shadow:var(--sh-panel); } .sidebar.open{transform:none;} .sb-toggle{display:grid;} .header-search{max-width:none;} .kpi-grid,.kpi-grid.g3,.kpi-grid.g6{grid-template-columns:repeat(2,1fr);} .g-2,.g-3{grid-template-columns:1fr;} :root{--pad-x:22px;} } @media (max-width:900px){ .hide-900{display:none !important;} .branch-btn .bname,.theme-btn > span:not(.theme-preview){display:none;} .branch-btn,.theme-btn{padding:7px 10px;} .header-search .hotkey{display:none;} .header-search input{padding-inline-end:12px;} } @media (max-width:720px){ .form-row{grid-template-columns:1fr;} .hide-720{display:none !important;} .page-title{font-size:23px;} .page-hero-greet{font-size:22px;} .app-content{padding:20px 16px 40px;} } @media (max-width:600px){ .header-breadcrumb .sep,.header-breadcrumb a span{display:none;} .hide-600{display:none !important;} } @media (max-width:500px){ .kpi-grid,.kpi-grid.g3,.kpi-grid.g6{grid-template-columns:1fr;} .kpi-val{font-size:26px;} .palette-grid{grid-template-columns:repeat(5,1fr);} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important;} } @media print{ .sidebar,.app-header,.table-tools,.bulk-bar,.toast-stack,.page-actions,.sidebar-backdrop{display:none !important;} body::before,body::after{display:none;} .card,.table-shell{border-color:var(--line); box-shadow:none;} .app-content{padding:0; max-width:none;} } /* ============================================================================= 18) شاشة ما قبل الدخول — لا شل لها (الدليل §4) ============================================================================= */ .topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 30px; border-block-end:1px solid var(--line-soft); background:color-mix(in srgb,var(--card) 70%,transparent); backdrop-filter:blur(12px); } .topbar .brand{display:flex; align-items:center; gap:11px;} .topbar .brand b{font-size:16px; font-weight:700; letter-spacing:-.01em;} .topbar .brand span{font-size:11.5px; color:var(--muted);} .auth-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; max-width:1180px; margin:0 auto; padding:56px 30px 70px; min-height:calc(100vh - 66px); } .auth-pitch h1{margin:0; font-size:38px; font-weight:700; letter-spacing:-.03em; line-height:1.25;} .auth-pitch p.lead{margin:14px 0 0; font-size:15px; color:var(--ink-soft); line-height:1.85; max-width:47ch;} .auth-points{display:grid; gap:13px; margin-top:30px;} .auth-point{display:flex; align-items:flex-start; gap:12px;} .auth-point .ic{ width:34px; height:34px; flex:none; border-radius:11px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary); } .auth-point b{display:block; font-size:13.5px; font-weight:700;} .auth-point span{display:block; font-size:12.5px; color:var(--muted); line-height:1.7;} .auth-stats{ display:flex; gap:26px; flex-wrap:wrap; margin-top:32px; padding-top:22px; border-block-start:1px solid var(--line-soft); } .auth-stat .v{font-family:var(--font-mono); font-size:23px; font-weight:800; letter-spacing:-.02em; direction:ltr;} .auth-stat .k{font-size:11.5px; color:var(--muted); font-weight:500;} .auth-card{ background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-xl); box-shadow:0 18px 46px rgba(15,23,42,.07); padding:28px; } .auth-card h2{margin:0 0 4px; font-size:20px; font-weight:700; letter-spacing:-.01em;} .auth-card .sub{margin:0 0 20px; font-size:12.5px; color:var(--muted);} .auth-sep{ display:flex; align-items:center; gap:12px; margin:22px 0 16px; font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; } .auth-sep::before,.auth-sep::after{content:''; flex:1; height:1px; background:var(--line-soft);} .role-list{display:grid; gap:8px; max-height:264px; overflow-y:auto; padding-inline-end:4px;} @media (max-width:900px){ .auth-grid{grid-template-columns:1fr; gap:32px; padding:34px 20px 50px;} .auth-pitch h1{font-size:29px;} } /* ============================================================================= 19) الكثافة المضغوطة — ما لا تكفيه التوكنز وحدها الفرق يجب أن يُرى: حشوات أضيق وعناوين أصغر، والهوية كما هي. ============================================================================= */ [data-density="compact"] .app-content{padding-top:20px; padding-bottom:36px;} [data-density="compact"] .page-title{font-size:24px;} [data-density="compact"] .page-title-row{margin-bottom:16px;} [data-density="compact"] .page-hero{padding:16px 18px; margin-bottom:16px;} [data-density="compact"] .page-hero-greet{font-size:23px;} [data-density="compact"] .card-header{padding:11px 14px;} [data-density="compact"] .card-body{padding:13px 14px;} [data-density="compact"] .card-foot{padding:9px 14px;} [data-density="compact"] .kpi{padding:11px 12px 10px;} [data-density="compact"] .kpi-val{font-size:25px;} [data-density="compact"] .kpi-grid{gap:9px;} [data-density="compact"] .grid{gap:12px;} [data-density="compact"] .stack{gap:12px;} [data-density="compact"] .data-table{font-size:12.5px;} [data-density="compact"] .data-table tbody td{padding-inline:10px;} [data-density="compact"] .table-tools{padding:9px 11px;} [data-density="compact"] .list-row{padding:8px 12px;} [data-density="compact"] .nav-item{padding:6px 11px;} [data-density="compact"] .mb-5{margin-bottom:14px;} /* ============================================================================= 20) مستند للطباعة — كشف راتب، شهادة، أو أي ورقة رسمية تُبنى في الصفحة نفسها وتُخفى على الشاشة، وعند الطباعة تُخفى الصفحة وتظهر هي. ============================================================================= */ .print-doc{display:none;} .print-doc-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-block-end:16px; margin-block-end:20px; border-block-end:2px solid var(--ink); } .print-doc-head .org b{display:block; font-size:17px; font-weight:800; letter-spacing:-.01em;} .print-doc-head .org span{display:block; font-size:11px; color:var(--muted); margin-top:2px;} .print-doc-head .doc{text-align:end;} .print-doc-head .doc b{display:block; font-size:15px; font-weight:700;} .print-doc-head .doc span{display:block; font-size:11px; color:var(--muted); margin-top:2px;} .print-doc h4{margin:18px 0 8px; font-size:12px; font-weight:800; letter-spacing:.04em;} .print-doc table{width:100%; border-collapse:collapse; font-size:12px;} .print-doc table th{ text-align:start; padding:6px 8px; background:var(--bg-2); font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border-block-end:1px solid var(--line); } .print-doc table td{padding:6px 8px; border-block-end:1px solid var(--line-soft);} .print-doc table td.n{font-family:var(--font-mono); direction:ltr; text-align:start;} .print-doc .total-row td{font-weight:800; border-block-start:2px solid var(--ink); border-block-end:none;} .print-doc-foot{ margin-block-start:26px; padding-block-start:12px; border-block-start:1px solid var(--line-soft); display:flex; justify-content:space-between; gap:20px; font-size:10.5px; color:var(--muted); } .print-doc-sign{display:flex; gap:40px; margin-block-start:32px;} .print-doc-sign > div{flex:1; text-align:center; font-size:11px;} .print-doc-sign .line{margin-block-start:34px; border-block-start:1px solid var(--ink); padding-block-start:5px;} @media print{ body.has-print-doc > *{display:none !important;} body.has-print-doc > .print-doc{ display:block !important; padding:0; margin:0; color:#000; background:#fff; } body.has-print-doc{background:#fff;} .print-doc{page-break-inside:avoid;} } @page{size:A4; margin:16mm;} /* ============================================================================= 21) المعالِج — نموذج طويل على خطوات الدليل §5.7 يحصر المودال في ثمانية حقول. ما زاد يحتاج سطحاً أوسع: مسار خطوات على الحافة، لوح واحد ظاهر، وتحقّق لا يسمح بالتقدّم قبل اكتماله. مقيس على .modal و.nav-item و.card بتوكنز الدليل وحدها. ============================================================================= */ .wizard{ position:fixed; inset:0; z-index:var(--z-modal); background:rgba(8,15,26,.45); padding:4vh 20px; display:grid; place-items:center; opacity:0; pointer-events:none; transition:opacity var(--t-base); } .wizard.on{opacity:1; pointer-events:auto;} .wizard-box{ width:100%; max-width:1060px; height:min(92vh, 780px); display:flex; flex-direction:column; background:var(--card); border-radius:var(--r-xl); box-shadow:var(--sh-modal); overflow:hidden; transform:translateY(10px) scale(.99); transition:transform var(--t-base); } .wizard.on .wizard-box{transform:none;} .wizard-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:18px 22px; border-block-end:1px solid var(--line-soft); } .wizard-head h3{margin:0; font-size:18px; font-weight:700; letter-spacing:-.01em;} .wizard-head p{margin:3px 0 0; font-size:12.5px; color:var(--muted);} .wizard-body{flex:1; display:grid; grid-template-columns:262px 1fr; min-height:0;} /* ---- مسار الخطوات ---- */ .wizard-rail{ border-inline-end:1px solid var(--line-soft); background:var(--bg); padding:16px 12px; overflow-y:auto; } .wz-step{ display:flex; align-items:flex-start; gap:11px; width:100%; text-align:start; padding:10px 12px; margin-bottom:3px; border:none; background:transparent; border-radius:var(--r-btn); cursor:pointer; font-family:inherit; transition:background var(--t-fast); position:relative; } .wz-step:disabled{cursor:default; opacity:.55;} .wz-step:not(:disabled):hover{background:var(--bg-2);} .wz-step .n{ width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center; font-family:var(--font-mono); font-size:11.5px; font-weight:700; background:var(--bg-2); color:var(--muted); border:1px solid var(--line-soft); transition:all var(--t-fast); } .wz-step .t{min-width:0;} .wz-step .t b{display:block; font-size:13px; font-weight:600; color:var(--ink-soft); line-height:1.4;} .wz-step .t span{display:block; font-size:11px; color:var(--muted); line-height:1.5;} .wz-step.is-done .n{background:var(--ok-bg); color:var(--ok-ink); border-color:transparent;} .wz-step.is-done .t b{color:var(--ink);} .wz-step.is-current{background:var(--primary-soft);} .wz-step.is-current .n{background:var(--primary); color:var(--card); border-color:var(--primary);} .wz-step.is-current .t b{color:var(--ink); font-weight:700;} /* خيط يصل الخطوات ببعضها */ .wz-step::after{ content:''; position:absolute; inset-inline-start:24px; top:36px; bottom:-3px; width:1px; background:var(--line-soft); } .wz-step:last-child::after{display:none;} /* ---- اللوح ---- */ .wizard-main{overflow-y:auto; padding:22px 24px 26px;} .wz-pane{display:none;} .wz-pane.on{display:block; animation:slidein var(--t-base);} .wz-pane-head{margin-bottom:18px;} .wz-pane-head b{display:block; font-size:16px; font-weight:700; letter-spacing:-.01em;} .wz-pane-head span{display:block; font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.7;} .wz-section{ font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; margin:22px 0 10px; padding-block-end:6px; border-block-end:1px solid var(--line-soft); } .wz-section:first-child{margin-top:0;} /* ---- ملخّص المراجعة ---- */ .wz-review{display:grid; gap:14px;} .wz-review-group{border:1px solid var(--line-soft); border-radius:var(--r-sm); overflow:hidden;} .wz-review-group > b{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 13px; background:var(--bg); border-block-end:1px solid var(--line-soft); font-size:12.5px; font-weight:700; } .wz-review-group > b button{ border:none; background:transparent; font-family:inherit; font-size:11.5px; font-weight:700; color:var(--primary); cursor:pointer; } .wz-review-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; padding:13px;} /* ---- التذييل ---- */ .wizard-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:14px 22px; border-block-start:1px solid var(--line-soft); background:var(--bg); } .wz-count{font-family:var(--font-mono); font-size:11.5px; font-weight:700; color:var(--muted);} .wz-error{ display:none; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--danger-ink); } .wz-error.on{display:flex;} @media (max-width:900px){ .wizard{padding:0;} .wizard-box{max-width:none; height:100vh; border-radius:0;} .wizard-body{grid-template-columns:1fr; grid-template-rows:auto 1fr;} .wizard-rail{ display:flex; gap:6px; overflow-x:auto; padding:11px 12px; border-inline-end:none; border-block-end:1px solid var(--line-soft); } .wz-step{width:auto; flex:0 0 auto; padding:7px 11px;} .wz-step .t{display:none;} .wz-step::after{display:none;} .wizard-main{padding:18px 16px 24px;} } /* ---- المعالِج كصفحة: نفس الهيكل بلا طبقة ولا صندوق ---- */ .wizard-page{ background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r-md); box-shadow:var(--sh-card); overflow:hidden; } .wizard-page .wizard-body{min-height:460px;} .wizard-page .wizard-main{padding:24px 26px 30px;} .wizard-page .wizard-foot{position:sticky; bottom:0; z-index:2;} @media (max-width:900px){ .wizard-page .wizard-main{padding:18px 16px 24px;} } /* ============================================================================= شريط التقسيم — نسبة تُقرأ بلمحة قبل قراءة الأرقام ========================================================================== */ .split-bar{display:flex; gap:2px; height:9px; border-radius:5px; overflow:hidden;} .sb-seg{display:block; min-width:3px; border-radius:2px; transition:filter var(--t-fast);} .sb-seg:hover{filter:brightness(1.12);} .sb-seg.t-ok{background:var(--ok);} .sb-seg.t-warn{background:var(--warn);} .sb-seg.t-err{background:var(--danger);} .sb-seg.t-info{background:var(--info);} .sb-seg.t-accent{background:var(--accent);} .sb-seg.t-primary{background:var(--primary);} .legend-swatch.t-ok{background:var(--ok);} .legend-swatch.t-warn{background:var(--warn);} .legend-swatch.t-err{background:var(--danger);} .legend-swatch.t-info{background:var(--info);} .legend-swatch.t-accent{background:var(--accent);} .legend-swatch.t-primary{background:var(--primary);} /* ============================================================================= الإجراءات السريعة — من اللوحة إلى العمل بنقرة ========================================================================== */ .quick-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px;} .quick-item{ display:flex; align-items:center; gap:11px; padding:12px 13px; border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--card); color:inherit; text-decoration:none; transition:border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); } .quick-item:hover{ border-color:var(--primary); box-shadow:var(--sh-card); transform:translateY(-1px); } .quick-item .qi-ic{ width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:10px; background:var(--primary-soft); color:var(--primary); } .quick-item:hover .qi-ic{background:var(--primary); color:var(--card);} .quick-item .qi-t{min-width:0; flex:1;} .quick-item .qi-t b{display:block; font-size:13.5px; font-weight:600;} .quick-item .qi-t span{ display:block; font-size:11.5px; color:var(--ink-3); margin-block-start:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } [data-density="compact"] .quick-item{padding:9px 11px;} [data-density="compact"] .quick-item .qi-ic{width:31px; height:31px;} /* ============================================================================= شريط الوردية — أربع حقائق يقرأها الموظف قبل أن يسأل أحداً ========================================================================== */ .shift-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-sm); overflow:hidden; } .ss-block{ background:var(--card); padding:13px 15px; display:flex; flex-direction:column; gap:3px; } .ss-block b{font-size:16px; font-weight:600; line-height:1.3;} .ss-block .eyebrow{margin-block-end:1px;} [data-density="compact"] .ss-block{padding:10px 12px;} [data-density="compact"] .ss-block b{font-size:14.5px;} /* ============================================================================= صفّ الرقائق وقائمة القواعد — تشرح آلية لا تعرض بيانات ========================================================================== */ .chip-row{display:flex; flex-wrap:wrap; gap:6px;} .rule-list{display:flex; flex-direction:column; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-sm); overflow:hidden;} .rule-item{ display:flex; align-items:flex-start; gap:10px; padding:11px 13px; background:var(--card); color:inherit; text-decoration:none; transition:background var(--t-fast); } .rule-item:hover{background:var(--bg);} .rule-item .ri-ic{ width:28px; height:28px; flex:none; display:grid; place-items:center; border-radius:8px; background:var(--bg-2); color:var(--ink-2); } .rule-item:hover .ri-ic{background:var(--primary-soft); color:var(--primary);} .rule-item .ri-t{min-width:0;} .rule-item .ri-t b{display:block; font-size:12.5px; font-weight:600;} .rule-item .ri-t span{display:block; font-size:11.5px; color:var(--ink-3); margin-block-start:2px;} [data-density="compact"] .rule-item{padding:8px 11px;} /* ============================================================================= صفّ الهرم — مستوى إداري بعرضه ونسبته ========================================================================== */ .pyramid-row{ display:flex; align-items:center; gap:10px; padding:6px 0; font-size:12.5px; } .pyramid-row .pr-l{flex:none; width:64px; color:var(--ink-2); font-weight:500;} .pyramid-row .pr-bar{ flex:1; height:16px; border-radius:var(--r-xs); background:var(--bg-2); overflow:hidden; } .pyramid-row .pr-bar > i{ display:block; height:100%; border-radius:var(--r-xs); background:linear-gradient(90deg,var(--primary),var(--accent)); } .pyramid-row .pr-n{flex:none; min-width:34px; text-align:end; font-weight:600;} .pyramid-row .pr-p{flex:none; min-width:42px; text-align:end; font-size:11px;} /* ============================================================================= المخطّط التنظيمي — يُقرأ كما يُقرأ الهيكل في الواقع: سلسلة الرؤساء فوق، المسؤول في الوسط، تابعوه المباشرون تحته. ========================================================================== */ .org-chain{ display:flex; align-items:center; flex-wrap:wrap; gap:4px; padding-block-end:14px; margin-block-end:16px; border-block-end:1px dashed var(--line); } .oc-crumb{ display:flex; align-items:center; gap:7px; padding:5px 9px; border-radius:var(--r-pill); background:var(--bg); border:1px solid var(--line-soft); font-family:inherit; font-size:12px; color:var(--ink-2); cursor:pointer; transition:background var(--t-fast), border-color var(--t-fast), color var(--t-fast); } .oc-crumb:hover{background:var(--primary-soft); border-color:var(--primary); color:var(--primary);} .oc-crumb .muted{display:none;} @media (min-width:900px){ .oc-crumb .muted{display:inline;} } .oc-sep{color:var(--ink-4); display:inline-flex;} .oc-here{ padding:5px 11px; border-radius:var(--r-pill); background:var(--primary); color:var(--card); font-size:12px; font-weight:600; } .org-head{display:flex; justify-content:center;} .org-head .org-card{max-width:420px; width:100%;} /* الخيط الواصل بين المسؤول وصفّ تابعيه */ .org-branch{position:relative; margin-block-start:26px;} .org-branch::before{ content:''; position:absolute; inset-block-start:-26px; inset-inline-start:50%; width:2px; height:26px; background:var(--line); transform:translateX(50%); } .org-branch-label{ display:flex; justify-content:center; margin-block-end:14px; } .org-branch-label span{ background:var(--bg-2); color:var(--ink-3); padding:3px 11px; border-radius:var(--r-pill); font-size:11px; font-weight:600; } .org-kids{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; } .org-card{ display:flex; align-items:center; gap:11px; padding:12px 13px; border:1px solid var(--line-soft); border-radius:var(--r-md); background:var(--card); cursor:pointer; text-align:start; transition:border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); } .org-card:hover, .org-card:focus-visible{ border-color:var(--primary); box-shadow:var(--sh-card); transform:translateY(-1px); outline:none; } .org-card.is-head{ border-color:var(--primary); border-width:2px; background:linear-gradient(180deg,var(--primary-soft),var(--card)); padding:16px 17px; cursor:default; } .org-card.is-head:hover{transform:none;} .org-card .oc-t{flex:1; min-width:0;} .org-card .oc-t b{display:block; font-size:13.5px; font-weight:600;} .org-card .oc-t > span{ display:block; font-size:11.5px; color:var(--ink-3); margin-block-start:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .org-card.is-head .oc-t b{font-size:16.5px;} .org-card .oc-n{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:3px; } .org-card .oc-go{flex:none; display:flex; align-items:center; gap:2px;} @media (max-width:640px){ .org-card .oc-n{display:none;} } .org-peers{margin-block-start:22px; padding-block-start:16px; border-block-start:1px dashed var(--line);} .chip.is-btn{ cursor:pointer; font-family:inherit; border:1px solid var(--line-soft); background:var(--bg); transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .chip.is-btn:hover{background:var(--primary-soft); border-color:var(--primary); color:var(--primary);} /* البحث داخل المخطّط */ .search-mini{position:relative;} .search-mini .form-input{min-width:230px; height:32px; font-size:12.5px;} .find-pop{ position:absolute; inset-block-start:calc(100% + 5px); inset-inline-end:0; min-width:290px; z-index:var(--z-pop); background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--sh-pop); overflow:hidden; } .find-hit{ display:flex; align-items:center; gap:9px; width:100%; padding:9px 11px; background:none; border:none; cursor:pointer; font-family:inherit; text-align:start; color:inherit; } .find-hit:hover{background:var(--bg);} .find-hit b{display:block; font-size:12.5px;} [data-density="compact"] .org-card{padding:9px 11px;} [data-density="compact"] .org-kids{gap:9px;} /* ============================================================================= تقويم الكثافة — الشهر في مربّعات، غمقُها حجم الغياب ========================================================================== */ .cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:5px;} .cal-dow{ font-size:10.5px; font-weight:700; color:var(--ink-4); text-align:center; letter-spacing:.02em; padding-block-end:3px; } .cal-cell{ aspect-ratio:1/1; border-radius:var(--r-xs); border:1px solid var(--line-soft); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; background:var(--card); transition:transform var(--t-fast), box-shadow var(--t-fast); } .cal-cell:hover{transform:scale(1.06); box-shadow:var(--sh-card); z-index:1;} .cal-cell.is-pad{background:none; border:none;} .cal-cell b{font-size:11.5px; font-weight:600; color:var(--ink-2);} .cal-cell i{font-size:10px; font-style:normal; font-weight:700; color:var(--ink-3);} .cal-cell.is-today{border-color:var(--primary); border-width:2px;} .cal-cell.is-holiday{border-style:dashed; border-color:var(--accent);} .cal-cell.lv-0{background:var(--card);} .cal-cell.lv-1{background:color-mix(in srgb,var(--info) 12%,var(--card));} .cal-cell.lv-2{background:color-mix(in srgb,var(--info) 28%,var(--card));} .cal-cell.lv-3{background:color-mix(in srgb,var(--warn) 34%,var(--card));} .cal-cell.lv-4{background:color-mix(in srgb,var(--danger) 38%,var(--card));} .cal-cell.lv-3 b, .cal-cell.lv-4 b, .cal-cell.lv-3 i, .cal-cell.lv-4 i{color:var(--ink);} .cal-key{width:13px; height:13px; border-radius:3px; border:1px solid var(--line-soft); display:inline-block;} .cal-key.lv-0{background:var(--card);} .cal-key.lv-1{background:color-mix(in srgb,var(--info) 12%,var(--card));} .cal-key.lv-2{background:color-mix(in srgb,var(--info) 28%,var(--card));} .cal-key.lv-3{background:color-mix(in srgb,var(--warn) 34%,var(--card));} .cal-key.lv-4{background:color-mix(in srgb,var(--danger) 38%,var(--card));} /* ============================================================================= جدول مصغّر تحت رسم — يملأ البطاقة بحقائق لا ببياض ========================================================================== */ .type-stats{margin-block-start:16px; border-block-start:1px solid var(--line-soft); padding-block-start:12px;} .ts-head, .ts-row{ display:grid; grid-template-columns:1.6fr .7fr 1fr .8fr; gap:8px; align-items:center; padding:6px 0; } .ts-head{ font-size:10.5px; font-weight:700; letter-spacing:.06em; color:var(--ink-4); text-transform:uppercase; font-family:var(--font-mono); } .ts-head span:not(:first-child), .ts-row span:not(:first-child){text-align:end;} .ts-row{font-size:12px; border-block-start:1px solid var(--line-soft);} .ts-row .ts-n{font-weight:500; color:var(--ink-2);} /* ============================================================================= صفّ المهارة ومصفوفتها — الجاهزية تُقرأ صفّاً وخليةً ========================================================================== */ .skill-row{padding:11px 0; border-block-end:1px solid var(--line-soft);} .skill-row:last-child{border-block-end:none;} .skill-row .sr-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-block-end:7px; } .skill-row .sr-head b{font-size:13px; font-weight:600;} .skill-row .sr-head span{font-size:11.5px; color:var(--ink-3);} .skill-row .sr-foot{ display:flex; align-items:center; gap:7px; margin-block-start:7px; flex-wrap:wrap; } .skill-row .sr-foot .num.b{margin-inline-start:auto; font-size:13px;} .data-table.matrix th{white-space:nowrap; font-size:10px;} .data-table.matrix td{padding-block:6px;} .mx-cell{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:7px; font-family:var(--font-mono); font-size:11.5px; font-weight:700; } .mx-cell.mx-0{background:var(--bg-2); color:var(--ink-4); font-weight:400;} .mx-cell.mx-ok{background:var(--ok-bg); color:var(--ok-ink);} .mx-cell.mx-soon{background:var(--warn-bg); color:var(--warn-ink);} .mx-cell.mx-bad{background:var(--danger-bg); color:var(--danger-ink);} /* ============================================================================= الرقم البطل — مؤشّر واحد يحمل البطاقة ========================================================================== */ .stat-hero{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 0 4px; text-align:center; } .stat-hero b{ font-family:var(--font-mono); font-size:38px; font-weight:700; line-height:1; letter-spacing:-.02em; color:var(--primary); } .stat-hero span{font-size:12px; color:var(--ink-3);} [data-density="compact"] .stat-hero b{font-size:32px;}