/* ════════════════════════════════════════════════════════════ 🎨 GreenMind Design System v3 — World-Class UI ════════════════════════════════════════════════════════════ Phase 1: Design Tokens + Dark Mode Phase 2: Components (buttons, cards, forms, toasts, skeletons) Phase 5: Micro-interactions يُحمّل بعد main.css. التبديل عبر [data-theme="dark"] على . ════════════════════════════════════════════════════════════ */ /* ╔═══ 1. LIGHT THEME TOKENS ═══╗ */ :root { --green-dark: #0F5132; --green: #1F6E43; --green-mid: #2D8659; --green-light: #E8F3EC; --green-50: #F2F8F4; --gold: #C8A24A; --gold-light: #FBF3DF; --warn: #DC2626; --warn-light: #FEF2F2; --whatsapp: #25D366; --info: #2563EB; --info-light: #EFF6FF; --success: #1D9E75; --success-light: #E1F5EE; --ink: #18181B; --ink-soft: #5F5E5A; --ink-faint: #A1A1AA; --line: #ECECE9; --line-soft: #F4F4F2; --bg: #FAFAF9; --card: #FFFFFF; --surface: #F7F7F5; --overlay: rgba(24,24,27,0.45); --glass: rgba(255,255,255,0.72); --glass-border: rgba(255,255,255,0.55); --shadow-sm: 0 1px 2px rgba(15,81,50,0.04), 0 1px 3px rgba(24,24,27,0.06); --shadow-md: 0 2px 4px rgba(15,81,50,0.04), 0 4px 14px rgba(24,24,27,0.07); --shadow-lg: 0 8px 28px rgba(24,24,27,0.12), 0 2px 8px rgba(15,81,50,0.06); --shadow-xl: 0 18px 50px rgba(24,24,27,0.18), 0 6px 16px rgba(15,81,50,0.08); --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 26px; --r-pill: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --t-fast: 0.12s; --t-base: 0.22s; --t-slow: 0.4s; color-scheme: light; } /* ╔═══ 2. DARK THEME TOKENS ═══╗ */ [data-theme="dark"] { --green-dark: #34D399; --green: #3DB980; --green-mid: #2D9D6B; --green-light: #15302440; --green-50: #14241C; --gold: #E0BC6B; --gold-light: #2E2818; --warn: #F87171; --warn-light: #2A1718; --whatsapp: #25D366; --info: #60A5FA; --info-light: #172033; --success: #34D399; --success-light: #14271F; --ink: #ECECEA; --ink-soft: #A8A8A3; --ink-faint: #6B6B66; --line: #2A2A28; --line-soft: #232321; --bg: #131312; --card: #1C1C1A; --surface: #232321; --overlay: rgba(0,0,0,0.65); --glass: rgba(28,28,26,0.72); --glass-border: rgba(255,255,255,0.08); --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.4); --shadow-md: 0 2px 6px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.5); --shadow-lg: 0 8px 28px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.4); --shadow-xl: 0 18px 50px rgba(0,0,0,0.65), 0 6px 16px rgba(0,0,0,0.5); color-scheme: dark; } /* انتقال ناعم عند تبديل الثيم */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease) !important; } /* ╔═══ 3. BASE ═══╗ */ html, body { font-family: 'Tajawal', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--ink); letter-spacing: -0.01em; } * { -webkit-tap-highlight-color: transparent; } /* ╔═══ 4. CARDS ═══╗ */ .card, .kpi-card, .stat-card, .panel, [class*="-card"] { border-radius: var(--r-lg) !important; border: 1px solid var(--line) !important; background: var(--card) !important; box-shadow: var(--shadow-sm) !important; transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease); } .card:hover, .kpi-card:hover, .stat-card:hover { box-shadow: var(--shadow-md) !important; border-color: var(--green-mid) !important; } /* ╔═══ 5. BUTTONS ═══╗ */ .btn, button.primary, .btn-primary, .btn-main { border-radius: var(--r-md) !important; font-weight: 600 !important; letter-spacing: -0.01em; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease), filter var(--t-base) var(--ease) !important; } .btn:active, button.primary:active, .btn-primary:active, .btn-main:active, .btn-secondary:active, .back-btn:active { transform: scale(0.96); } .btn-primary, .btn-main, button.primary { background: var(--green) !important; color: #fff !important; box-shadow: 0 1px 2px rgba(15,81,50,0.2) !important; } .btn-primary:hover, .btn-main:hover, button.primary:hover { filter: brightness(1.08); box-shadow: 0 2px 10px rgba(31,110,67,0.28) !important; } .btn-secondary, .back-btn { border-radius: var(--r-md) !important; transition: background var(--t-base) var(--ease), transform var(--t-fast) var(--ease), border-color var(--t-base) var(--ease) !important; } /* ╔═══ 6. HUB / APP TILES ═══╗ */ .hub-card, .app-card, .app-tile, [class*="hub"] [class*="card"] { border-radius: var(--r-lg) !important; border: 1px solid var(--line) !important; background: var(--card) !important; box-shadow: var(--shadow-sm) !important; transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease) !important; } .hub-card:hover, .app-card:hover, .app-tile:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-lg) !important; border-color: var(--green-mid) !important; } /* ╔═══ 7. INPUTS ═══╗ */ input, select, textarea { border-radius: var(--r-md) !important; border: 1px solid var(--line) !important; background: var(--card) !important; color: var(--ink) !important; transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease) !important; } input::placeholder, textarea::placeholder { color: var(--ink-faint); } input:focus, select:focus, textarea:focus { outline: none !important; border-color: var(--green-mid) !important; box-shadow: 0 0 0 3px rgba(31,110,67,0.14) !important; } [data-theme="dark"] select option { background: var(--card); color: var(--ink); } /* ╔═══ 8. TABLES ═══╗ */ table { color: var(--ink); } table th { font-weight: 700 !important; color: var(--ink-soft) !important; font-size: 12px !important; letter-spacing: 0 !important; } table tbody tr { transition: background var(--t-fast) var(--ease); } table tbody tr:hover { background: var(--surface) !important; } table td, table th { border-color: var(--line) !important; } /* ╔═══ 9. BADGES / PILLS ═══╗ */ .badge, .pill, .chip, [class*="badge"], [class*="pill"] { border-radius: var(--r-pill) !important; font-weight: 600 !important; } /* ╔═══ 10. MODALS + GLASSMORPHISM ═══╗ */ .modal, .modal-content, [class*="modal"] > div, .bottom-sheet { border-radius: var(--r-xl) !important; box-shadow: var(--shadow-xl) !important; background: var(--card) !important; animation: modalIn var(--t-base) var(--ease-spring); } .modal-overlay, [class*="overlay"], .backdrop { background: var(--overlay) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } @keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* الـ topbar زجاجي */ .topbar, .app-header, header.main-header { box-shadow: var(--shadow-sm) !important; } /* ╔═══ 11. SKELETON LOADING ═══╗ */ .skeleton { background: linear-gradient(90deg, var(--line-soft) 25%, var(--line) 37%, var(--line-soft) 63%); background-size: 400% 100%; animation: skeletonShimmer 1.4s ease infinite; border-radius: var(--r-sm); } @keyframes skeletonShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .skeleton-text { height: 12px; margin-bottom: 8px; } .skeleton-card { height: 90px; border-radius: var(--r-lg); } /* ╔═══ 12. TOAST NOTIFICATIONS ═══╗ */ .toast, #toast, [class*="toast"] { border-radius: var(--r-md) !important; box-shadow: var(--shadow-lg) !important; backdrop-filter: blur(8px); animation: toastIn var(--t-base) var(--ease-spring); } @keyframes toastIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ╔═══ 13. SCROLLBAR ═══╗ */ ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--ink-faint); border-radius: var(--r-pill); border: 2px solid var(--bg); opacity: 0.5; } ::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); } /* ╔═══ 14. PAGE TRANSITIONS ═══╗ */ .page.active { animation: pageIn var(--t-slow) var(--ease); } @keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .spinner, [class*="spinner"] { border-top-color: var(--green) !important; } /* ╔═══ 15. THEME TOGGLE BUTTON ═══╗ */ .theme-toggle { position: relative; width: 42px; height: 42px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; transition: all var(--t-base) var(--ease); flex-shrink: 0; } .theme-toggle:hover { background: var(--surface); transform: scale(1.05); border-color: var(--green-mid); } .theme-toggle:active { transform: scale(0.94); } /* ╔═══ 16. COMMAND PALETTE (Ctrl+K) ═══╗ */ .cmdk-overlay { position: fixed; inset: 0; z-index: 99999; background: var(--overlay); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; opacity: 0; pointer-events: none; transition: opacity var(--t-base) var(--ease); } .cmdk-overlay.open { opacity: 1; pointer-events: auto; } .cmdk-box { width: 92%; max-width: 560px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-xl); overflow: hidden; transform: translateY(-12px) scale(0.98); transition: transform var(--t-base) var(--ease-spring); } .cmdk-overlay.open .cmdk-box { transform: translateY(0) scale(1); } .cmdk-input-wrap { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); } .cmdk-input-wrap .cmdk-icon { font-size: 18px; color: var(--ink-soft); } .cmdk-input { flex: 1; border: none !important; background: transparent !important; font-size: 16px; color: var(--ink); outline: none !important; box-shadow: none !important; font-family: inherit; } .cmdk-input:focus { box-shadow: none !important; } .cmdk-hint { font-size: 11px; color: var(--ink-faint); background: var(--surface); padding: 3px 8px; border-radius: var(--r-sm); border: 1px solid var(--line); } .cmdk-results { max-height: 56vh; overflow-y: auto; padding: 8px; } .cmdk-section-title { font-size: 11px; color: var(--ink-faint); padding: 8px 12px 4px; font-weight: 700; } .cmdk-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-md); cursor: pointer; transition: background var(--t-fast) var(--ease); } .cmdk-item .cmdk-item-icon { font-size: 19px; width: 24px; text-align: center; } .cmdk-item .cmdk-item-text { flex: 1; } .cmdk-item .cmdk-item-title { font-size: 14px; font-weight: 600; color: var(--ink); } .cmdk-item .cmdk-item-desc { font-size: 11.5px; color: var(--ink-soft); margin-top: 1px; } .cmdk-item.active, .cmdk-item:hover { background: var(--green-50); } .cmdk-item.active { box-shadow: inset 3px 0 0 var(--green); } .cmdk-empty { padding: 40px; text-align: center; color: var(--ink-faint); font-size: 14px; } /* ╔═══ 17. MOBILE BOTTOM NAV ═══╗ */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 900; display: none; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); justify-content: space-around; align-items: center; } .bottom-nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: none; cursor: pointer; color: var(--ink-soft); font-family: inherit; padding: 6px 10px; border-radius: var(--r-md); min-width: 56px; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .bottom-nav-item .bn-icon { font-size: 20px; } .bottom-nav-item .bn-label { font-size: 10px; font-weight: 600; } .bottom-nav-item.active { color: var(--green); } .bottom-nav-item:active { background: var(--surface); transform: scale(0.92); } @media (max-width: 768px) { .bottom-nav { display: flex; } body { padding-bottom: 70px; } /* Touch targets 44px+ */ .btn, button.primary, .btn-primary, .btn-secondary, .back-btn { min-height: 44px; } input, select { min-height: 44px; } } /* ╔═══ 18. ACCESSIBILITY ═══╗ */ :focus-visible { outline: 2px solid var(--green-mid); outline-offset: 2px; border-radius: var(--r-xs); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ════════════════════════════════════════════════════════════ 🏆 LEADERBOARD — لوحة المنافسة ════════════════════════════════════════════════════════════ */ .lb-container { padding: 16px; max-width: 1200px; margin: 0 auto; } .lb-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; } .lb-title { font-size: 22px; font-weight: 800; color: var(--green-dark); } .lb-subtitle { font-size: 13px; color: var(--ink-soft); margin-top: 4px; } .lb-controls { display: flex; gap: 8px; flex-wrap: wrap; } .lb-select { padding: 9px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--card); font-family: inherit; font-size: 13px; cursor: pointer; } /* ===== Podium (أول 3) ===== */ .lb-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 12px; align-items: end; margin-bottom: 24px; } .lb-podium-card { background: var(--card); border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-sm); padding: 18px 14px; text-align: center; position: relative; transition: transform .25s ease, box-shadow .25s ease; } .lb-podium-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .lb-podium-card.gold { border-color: var(--gold); box-shadow: 0 4px 20px rgba(200,162,74,0.25); transform: translateY(-10px); } .lb-podium-card.silver { border-color: #C0C0C0; } .lb-podium-card.bronze { border-color: #CD7F32; } .lb-medal { font-size: 34px; line-height: 1; margin-bottom: 6px; } .lb-avatar { width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: #fff; background: var(--green); } .lb-podium-card.gold .lb-avatar { background: var(--gold); width: 64px; height: 64px; font-size: 24px; } .lb-podium-card.silver .lb-avatar { background: #9CA3AF; } .lb-podium-card.bronze .lb-avatar { background: #B45309; } .lb-name { font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 4px; } .lb-rate { font-size: 26px; font-weight: 800; color: var(--green); } .lb-rate-label { font-size: 11px; color: var(--ink-soft); } .lb-podium-meta { display: flex; justify-content: center; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: 11.5px; color: var(--ink-soft); } /* ===== Highlight strip ===== */ .lb-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 12px; margin-bottom: 20px; } .lb-highlight { background: var(--card); border-radius: var(--r-md); border: 1px solid var(--line); padding: 14px; display: flex; gap: 12px; align-items: center; } .lb-highlight-icon { width: 40px; height: 40px; border-radius: var(--r-md); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; } /* ===== Full table ===== */ .lb-table-wrap { background: var(--card); border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-sm); padding: 16px; margin-bottom: 20px; overflow-x: auto; } .lb-table { width: 100%; border-collapse: collapse; font-size: 13px; } .lb-table thead th { text-align: right; padding: 10px 10px; border-bottom: 2px solid var(--line); font-size: 12px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; } .lb-table tbody td { padding: 11px 10px; border-bottom: 1px solid var(--line-soft); } .lb-table tbody tr { transition: background .15s ease; } .lb-table tbody tr:hover { background: var(--surface); } .lb-table tbody tr.is-me { background: var(--green-50); } .lb-table tbody tr.is-me:hover { background: var(--green-light); } .lb-rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 800; font-size: 13px; background: var(--surface); color: var(--ink-soft); } .lb-rank-badge.r1 { background: var(--gold); color: #fff; } .lb-rank-badge.r2 { background: #9CA3AF; color: #fff; } .lb-rank-badge.r3 { background: #B45309; color: #fff; } .lb-row-avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--green-mid); margin-left: 8px; vertical-align: middle; } .lb-bar-track { background: var(--line-soft); border-radius: var(--r-pill); height: 7px; overflow: hidden; min-width: 60px; } .lb-bar-fill { height: 100%; border-radius: var(--r-pill); background: var(--green); } .lb-improve { font-size: 11px; font-weight: 700; } .lb-improve.up { color: var(--success); } .lb-improve.flat { color: var(--ink-faint); } /* ===== Building section ===== */ .lb-building { background: var(--gold-light); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 20px; } .lb-building h4 { font-size: 14px; color: #92400E; margin-bottom: 8px; } .lb-building-chips { display: flex; flex-wrap: wrap; gap: 8px; } .lb-chip { background: #fff; border-radius: var(--r-pill); padding: 6px 12px; font-size: 12px; color: #78350F; border: 1px solid #F0D9A8; } /* ===== Most improved ===== */ .lb-improved-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 12px; } .lb-improved-card { background: var(--success-light); border-radius: var(--r-md); padding: 14px; border: 1px solid #B6E5D4; } @media (max-width: 640px) { .lb-podium { grid-template-columns: 1fr; } .lb-podium-card.gold { transform: none; } .lb-rate { font-size: 22px; } } /* ╔═══ REFERRAL — نظام الإحالة ═══╗ */ .ref-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; } @media(max-width:680px){ .ref-kpis{ grid-template-columns:1fr 1fr; } } .ref-kpi { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; text-align:center; box-shadow:var(--shadow-sm); } .ref-kpi.gold { background:var(--gold-light); border-color:#EAD9A8; } .ref-kpi-val { font-size:28px; font-weight:800; color:var(--green); } .ref-kpi.gold .ref-kpi-val { color:var(--gold); } .ref-kpi-lbl { font-size:12px; color:var(--ink-soft); margin-top:4px; } .ref-table { width:100%; } .ref-table th { font-size:12px; } .ref-code { background:var(--green-50); color:var(--green); padding:3px 10px; border-radius:var(--r-sm); font-family:'Courier New',monospace; font-weight:700; font-size:13px; } .ref-code.big { font-size:20px; padding:6px 16px; display:inline-block; margin-top:6px; } .ref-lookup { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; margin-top:20px; box-shadow:var(--shadow-sm); } .ref-lookup h3 { color:var(--green); font-size:17px; margin:0 0 4px; } .ref-hint { font-size:12.5px; color:var(--ink-soft); margin:0 0 12px; } .ref-lookup-row { display:flex; gap:10px; flex-wrap:wrap; } .ref-lookup-row input { flex:1; min-width:180px; padding:10px 14px; } .ref-result-card { background:var(--green-50); border:1px solid var(--green-mid); border-radius:var(--r-lg); padding:18px; margin-top:16px; } .ref-result-name { font-size:17px; font-weight:700; color:var(--ink); } .ref-result-stats { display:flex; gap:18px; flex-wrap:wrap; margin:12px 0; font-size:14px; color:var(--ink-soft); } .ref-wa-btn { display:inline-block; text-decoration:none; margin-top:8px; } .ref-info { text-align:center; max-width:560px; margin:20px auto; background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); padding:32px; box-shadow:var(--shadow-sm); } .ref-info-icon { font-size:52px; } .ref-info h2 { color:var(--green); font-size:22px; margin:10px 0; } .ref-steps { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0; } @media(max-width:560px){ .ref-steps{ grid-template-columns:1fr; } } .ref-step { background:var(--surface); border-radius:var(--r-md); padding:12px; font-size:13.5px; text-align:right; } .ref-step span { font-size:18px; margin-left:6px; } /* ╔═══ NOTIFICATION CENTER — مركز التنبيهات ═══╗ */ .notif-bell { position:relative; display:inline-block; } .notif-bell-btn { position:relative; width:42px; height:42px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; font-size:19px; display:inline-flex; align-items:center; justify-content:center; transition:all var(--t-base) var(--ease); } .notif-bell-btn:hover { background:var(--surface); transform:scale(1.05); border-color:var(--green-mid); } .notif-badge { position:absolute; top:-4px; left:-4px; min-width:18px; height:18px; padding:0 4px; background:var(--warn); color:#fff; font-size:10px; font-weight:700; border-radius:99px; display:flex; align-items:center; justify-content:center; border:2px solid var(--card); } .notif-panel { position:absolute; top:52px; left:0; width:340px; max-width:90vw; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-xl); z-index:960; overflow:hidden; opacity:0; pointer-events:none; transform:translateY(-8px) scale(.98); transition:all var(--t-base) var(--ease-spring); } .notif-panel.open { opacity:1; pointer-events:auto; transform:translateY(0) scale(1); } .notif-panel-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); font-weight:700; color:var(--ink); } .notif-mark-all { background:none; border:none; color:var(--green); font-size:12px; cursor:pointer; font-family:inherit; } .notif-list { max-height:60vh; overflow-y:auto; } .notif-item { padding:13px 16px; border-bottom:1px solid var(--line-soft); cursor:pointer; transition:background var(--t-fast) var(--ease); } .notif-item:hover { background:var(--surface); } .notif-item.unread { background:var(--green-50); border-right:3px solid var(--green); } .notif-item-title { font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:2px; } .notif-item-body { font-size:12.5px; color:var(--ink-soft); line-height:1.5; } .notif-item-time { font-size:11px; color:var(--ink-faint); margin-top:4px; } .notif-empty { padding:40px 20px; text-align:center; color:var(--ink-faint); font-size:14px; } /* ╔═══ WORKERS: فلتر الموظف + بحث بالاقتراحات ═══╗ */ .agent-filter-select { padding:8px 14px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--card); color:var(--ink); font-family:inherit; font-size:13.5px; cursor:pointer; min-width:150px; transition:border-color var(--t-base) var(--ease); } .agent-filter-select:focus { outline:none; border-color:var(--green-mid); box-shadow:0 0 0 3px rgba(31,110,67,.13); } /* اقتراحات البحث */ .search-suggest { position:absolute; top:calc(100% + 6px); right:0; left:0; z-index:200; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-lg); overflow:hidden; max-height:340px; overflow-y:auto; opacity:0; pointer-events:none; transform:translateY(-6px); transition:all var(--t-fast) var(--ease); } .search-suggest.open { opacity:1; pointer-events:auto; transform:translateY(0); } .suggest-item { display:flex; align-items:center; gap:11px; padding:11px 14px; cursor:pointer; border-bottom:1px solid var(--line-soft); transition:background var(--t-fast) var(--ease); } .suggest-item:last-child { border-bottom:none; } .suggest-item:hover, .suggest-item.active { background:var(--green-50); } .suggest-ic { font-size:18px; flex-shrink:0; } .suggest-text { flex:1; min-width:0; } .suggest-name { font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .suggest-name mark { background:var(--gold-light); color:var(--gold-dark); border-radius:3px; padding:0 2px; } .suggest-meta { font-size:11.5px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }