/* ============================================================ Social Listen — Vanilla CSS منظّم في أقسام: التوكنز · القواعد العامة · الشِل · المكوّنات · الشاشات · التجاوب الثيم يتحكّم به السمة data-theme="light|dark" على ============================================================ */ /* ---------- 1. التوكنز (متغيّرات الألوان والثيم) ---------- */ :root { --bg: #FBFBFA; --surface: #fff; --surface2: #F8F8F6; --subtle: #F2F2F0; --border: #ECECEA; --border2: #E2E2DE; --inverse: #1C1C1A; --ink: #1C1C1A; --muted: #56564F; --muted2: #6B6B66; --faint: #9B9B95; --faint2: #B0B0AA; --header-bg: rgba(251, 251, 250, .85); /* ألوان ثابتة عبر الثيمين */ --accent: #5B5BD6; --accent-deep: #4A4AC4; --accent-soft: #EEEEFB; --pos: #1F9D6B; --pos-soft: #E7F4EE; --neg: #D6504F; --neg-soft: #FBECEC; --warn: #C0852A; --warn-soft: #FAF1E2; } html[data-theme="dark"] { --bg: #141413; --surface: #1E1E1C; --surface2: #262623; --subtle: #2A2A27; --border: #2F2F2B; --border2: #3A3A34; --inverse: #0E0E0D; --ink: #F2F2EF; --muted: #C2C2BC; --muted2: #A6A6A0; --faint: #86867F; --faint2: #6C6C66; --header-bg: rgba(20, 20, 19, .86); } /* ---------- 2. القواعد العامة ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'IBM Plex Sans Arabic', -apple-system, sans-serif; background: var(--bg); color: var(--ink); min-height: 100vh; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .mono { font-family: 'IBM Plex Mono', monospace; } ::selection { background: var(--accent); color: #fff; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 8px; border: 3px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--faint2); } @keyframes slpulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } } @keyframes slfade { from { transform: translateY(8px); } to { transform: none; } } @keyframes slspin { to { transform: rotate(360deg); } } .pay-spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; display: inline-block; animation: slspin .7s linear infinite; } button { font-family: inherit; cursor: pointer; } input { font-family: inherit; } a { color: inherit; text-decoration: none; } /* أداة إظهار/إخفاء الشاشات الكبرى */ .screen { display: none; } .screen.active { display: block; } .flex-col { display: flex; flex-direction: column; } /* ---------- 3. اللوقو ---------- */ .logo-mark { border-radius: 9px; background: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; } .logo-mark svg { stroke: #fff; } /* ---------- 4. الأزرار ---------- */ .btn { font-size: 14px; font-weight: 600; border-radius: 9px; padding: 10px 18px; border: 1px solid transparent; transition: background .15s, border-color .15s, opacity .15s; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-deep); } .btn-dark { background: var(--inverse); color: #fff; } .btn-dark:hover { opacity: .9; } .btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--border2); } .btn-secondary:hover { border-color: var(--faint2); } .btn-ghost { background: none; color: var(--accent); border: none; font-weight: 500; } .btn-soft { background: var(--accent-soft); color: var(--accent); border: none; font-weight: 600; } /* ---------- 5. البطاقات والمكوّنات ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px; } .eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); } .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 7px; } .chip-pos { color: var(--pos); background: var(--pos-soft); } .chip-neu { color: var(--muted2); background: var(--subtle); } .chip-neg { color: var(--neg); background: var(--neg-soft); } .chip-warn { color: var(--warn); background: var(--warn-soft); } .chip-accent { color: var(--accent); background: var(--accent-soft); } .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } /* مفتاح التبديل (toggle) */ .toggle { width: 40px; height: 22px; border-radius: 11px; background: var(--border2); position: relative; flex: none; cursor: pointer; transition: background .2s; border: none; } .toggle .knob { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: right .2s; } .toggle.on { background: var(--accent); } .toggle.on .knob { right: 20px; } /* حقل إدخال */ .field { width: 100%; font-size: 14px; border: 1px solid var(--border2); border-radius: 9px; padding: 12px 14px; outline: none; background: var(--surface); color: var(--ink); transition: border-color .15s, box-shadow .15s; } .field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* ---------- 6. الشِل: الشريط الجانبي + التوب-بار ---------- */ .app-layout { display: flex; min-height: 100vh; } .sidebar { width: 264px; flex: none; background: var(--surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .sidebar-head { padding: 18px 20px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--subtle); } .sidebar-nav { flex: 1; overflow-y: auto; padding: 14px 12px; } .nav-group { margin-bottom: 18px; } .nav-group-label { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint2); padding: 0 10px; margin-bottom: 7px; } .nav-item { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px; cursor: pointer; margin-bottom: 1px; font-size: 13.5px; font-weight: 500; color: var(--muted); transition: background .12s, color .12s; } .nav-item svg { stroke: var(--faint); } .nav-item:hover { background: var(--subtle); } .nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .nav-item.active svg { stroke: var(--accent); } .nav-item .label { flex: 1; } .nav-badge { font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 10px; } .sidebar-foot { padding: 14px; border-top: 1px solid var(--subtle); } .sidebar-head { position: relative; } .sidebar-collapse { margin-inline-start: auto; width: 30px; height: 30px; } .sidebar-collapse svg { transition: transform .25s; } /* [قرار تصميم] الوضع المطويّ (icon-only) — يُحفظ في localStorage */ html[data-nav2="collapsed"] .sidebar { width: 72px; } html[data-nav2="collapsed"] .sidebar-brand, html[data-nav2="collapsed"] .nav-group-label, html[data-nav2="collapsed"] .nav-item .label, html[data-nav2="collapsed"] .sidebar-foot { display: none; } html[data-nav2="collapsed"] .sidebar-head { justify-content: center; padding: 18px 0; flex-direction: column; gap: 14px; } html[data-nav2="collapsed"] .sidebar-collapse { margin-inline-start: 0; } html[data-nav2="collapsed"] .sidebar-collapse svg { transform: rotate(180deg); } html[data-nav2="collapsed"] .nav-item { justify-content: center; padding: 9px 0; } /* الشارة تتحول لنقطة صغيرة في الزاوية عند الطيّ */ html[data-nav2="collapsed"] .nav-badge { position: absolute; top: 4px; inset-inline-end: 12px; min-width: 0; width: 7px; height: 7px; padding: 0; font-size: 0; border-radius: 50%; line-height: 0; } html[data-nav2="collapsed"] .nav-item { position: relative; } /* تلميح (tooltip) عند المرور — يظهر دائماً للشارات، وللعناصر عند الطيّ */ .nav-item { position: relative; } .nav-item[data-tip]::after { content: attr(data-tip); position: absolute; inset-inline-start: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--inverse); color: #fff; font-size: 12px; font-weight: 500; padding: 6px 10px; border-radius: 7px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .14s; z-index: 100; box-shadow: 0 4px 16px rgba(0,0,0,.18); } html[data-nav2="collapsed"] .nav-item:hover[data-tip]::after { opacity: 1; } html[data-nav2="expanded"] .nav-item[data-tip]::after { display: none; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { height: 64px; flex: none; background: var(--header-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 20; } .topbar h1 { font-size: 16px; font-weight: 600; margin: 0; letter-spacing: -.01em; } .topbar .sub { font-size: 12px; color: var(--faint); } .topbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; } .icon-btn { width: 38px; height: 38px; border: 1px solid var(--border2); background: var(--surface); border-radius: 9px; display: flex; align-items: center; justify-content: center; position: relative; transition: border-color .15s; } .icon-btn:hover { border-color: var(--faint2); } .icon-btn svg { stroke: var(--muted); } .icon-btn .badge-dot { position: absolute; top: 7px; left: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--neg); border: 1.5px solid var(--surface); } .searchbox { display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--border2); border-radius: 9px; padding: 8px 12px; width: 240px; } .searchbox svg { stroke: var(--faint); flex: none; } .searchbox input { border: none; outline: none; font-size: 13px; background: none; flex: 1; min-width: 0; color: var(--ink); } .kbd { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--faint2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; flex: none; } .content { flex: 1; overflow-y: auto; padding: 28px; } .content-inner { max-width: 1280px; margin: 0 auto; } .fade { animation: slfade .4s ease forwards; } /* ---------- 7. الشبكات ---------- */ .grid { display: grid; gap: 16px; } .g4 { grid-template-columns: repeat(4, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g2 { grid-template-columns: 1fr 1fr; } .g-main { grid-template-columns: 1.7fr 1fr; } .mb16 { margin-bottom: 16px; } .row { display: flex; align-items: center; } .between { justify-content: space-between; } .gap { gap: 10px; } /* ---------- 8. بطاقة المؤشّر KPI ---------- */ .kpi-label { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); } .kpi-value { font-family: 'IBM Plex Mono', monospace; font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1; } .delta { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 6px; } .delta svg { display: inline-block; } /* [قرار تصميم] KPI رئيسي عريض vs ثانوي */ .kpi-primary { display: flex; flex-direction: column; justify-content: flex-start; border-color: var(--accent); box-shadow: 0 8px 30px -16px rgba(91,91,214,.4); } .kpi-primary .kpi-label { color: var(--accent); } .kpi-mini { padding: 16px 18px; display: flex; flex-direction: column; } /* ---------- 9. الجداول ---------- */ .tbl-head, .tbl-row { display: grid; gap: 12px; align-items: center; } .tbl-head { padding: 0 12px 10px; border-bottom: 1px solid var(--border); font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); } .tbl-row { padding: 13px 12px; border-bottom: 1px solid var(--subtle); font-size: 13.5px; } .ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* أشرطة التقدّم — [RTL] flex يجعل التعبئة تبدأ من جهة البداية (اليمين) */ .bar-track { height: 6px; background: var(--subtle); border-radius: 4px; overflow: hidden; display: flex; } .bar-fill { height: 100%; border-radius: 4px; } /* ---------- 10. الهبوط ---------- */ .landing { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); scroll-behavior: smooth; } .landing-header { display: flex; align-items: center; gap: 14px; padding: 22px 40px; max-width: 1240px; margin: 0 auto; width: 100%; } .landing-nav { display: flex; gap: 30px; margin-inline-start: 48px; font-size: 14px; color: var(--muted2); font-weight: 500; } .landing-nav a:hover { color: var(--ink); } .hero { max-width: 1240px; margin: 0 auto; width: 100%; padding: 60px 40px 40px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; } .hero h1 { font-size: 54px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; margin: 0 0 22px; } .hero p { font-size: 18px; line-height: 1.65; color: var(--muted); margin: 0 0 16px; max-width: 520px; } .section { max-width: 1240px; margin: 0 auto; width: 100%; } /* ---------- 11. لوحة الإشعارات + الدرج ---------- */ .scrim { position: fixed; inset: 0; z-index: 40; } .notif-panel { position: fixed; top: 60px; left: 24px; z-index: 50; width: 340px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 48px -12px rgba(20,20,18,.22); overflow: hidden; } .drawer-scrim { position: fixed; inset: 0; background: rgba(20,20,18,.32); z-index: 60; } .drawer { position: fixed; top: 0; bottom: 0; left: 0; width: 440px; max-width: 92vw; z-index: 70; background: var(--surface); border-inline-end: 1px solid var(--border); box-shadow: 0 0 60px -10px rgba(20,20,18,.3); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .28s cubic-bezier(.4,0,.2,1); } .drawer.open { transform: translateX(0); } /* ---------- 12. مبدّل العرض التجريبي ---------- */ .demo-switch { position: fixed; bottom: 18px; left: 18px; z-index: 100; display: flex; gap: 5px; background: rgba(28,28,26,.92); backdrop-filter: blur(10px); border-radius: 11px; padding: 5px; box-shadow: 0 8px 28px -8px rgba(0,0,0,.4); } .demo-switch span { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; color: #B0B0AA; padding: 7px 12px; border-radius: 7px; cursor: pointer; } .demo-switch span.active { color: #fff; background: rgba(255,255,255,.16); } /* زر الهامبرغر للجوال */ .burger { display: none; } /* ---------- شاشة تسجيل الدخول ---------- */ .auth-wrap { display: flex; min-height: 100vh; background: var(--bg); } .auth-aside { width: 42%; max-width: 520px; flex: none; background: linear-gradient(150deg, #5B5BD6 0%, #7A6FE0 100%); padding: 48px 44px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } .auth-aside::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 10%, rgba(255,255,255,.14), transparent 45%); pointer-events: none; } .auth-aside > * { position: relative; z-index: 1; } .auth-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; } .auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 36px; box-shadow: 0 12px 40px -16px rgba(20,20,18,.14); } .auth-logo { display: none; align-items: center; gap: 11px; margin-bottom: 24px; } .google-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; border-radius: 10px; padding: 12px; font-size: 14.5px; font-weight: 500; transition: background .15s, box-shadow .15s, border-color .15s; } .google-btn:hover { background: #f8faff; border-color: #d2e3fc; box-shadow: 0 1px 3px rgba(60,64,67,.15); } .google-btn:active { background: #f1f3f4; } .google-ico { display: flex; width: 18px; height: 18px; flex: none; } html[data-theme="dark"] .google-btn { background: #131314; color: #e3e3e3; border-color: #5f6368; } html[data-theme="dark"] .google-btn:hover { background: #2a2a2c; border-color: #6f7378; box-shadow: none; } html[data-theme="dark"] .google-btn:active { background: #1f1f21; } .auth-error { display: none; align-items: center; gap: 9px; background: var(--neg-soft); border: 1px solid #F3D3D3; border-radius: 9px; padding: 10px 12px; margin-top: 14px; font-size: 13px; color: var(--neg); line-height: 1.4; } .auth-error.show { display: flex; animation: slfade .3s ease; } html[data-theme="dark"] .auth-error { border-color: #4A2E2E; } .auth-ok { display: none; align-items: center; gap: 9px; background: var(--pos-soft); border: 1px solid #CDE9DC; border-radius: 9px; padding: 10px 12px; margin-top: 14px; font-size: 13px; color: var(--pos); line-height: 1.4; } .auth-ok.show { display: flex; animation: slfade .3s ease; } html[data-theme="dark"] .auth-ok { border-color: #2C4A3C; } .auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; } .auth-divider span { flex: 1; height: 1px; background: var(--border); } /* نافذة Google (سطح Google — يبقى بألوان Google في الثيمين كالنافذة الحقيقية) */ .goog-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(32,33,36,.6); align-items: center; justify-content: center; padding: 20px; font-family: 'Roboto', 'IBM Plex Sans Arabic', sans-serif; } .goog-overlay.show { display: flex; } .goog-modal { width: 100%; max-width: 400px; background: #fff; border-radius: 8px; box-shadow: 0 4px 24px rgba(0,0,0,.28); overflow: hidden; animation: slpop .2s ease; } @keyframes slpop { from { transform: scale(.96); opacity: .6; } to { transform: scale(1); opacity: 1; } } .goog-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 0; } .goog-x { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .goog-x:hover { background: #f1f3f4; } .goog-body { padding: 8px 24px 24px; } .goog-title { font-size: 22px; font-weight: 400; color: #202124; margin: 12px 0 4px; } .goog-sub { font-size: 14px; color: #5f6368; margin: 0 0 22px; } .goog-accounts { display: flex; flex-direction: column; } .goog-account { display: flex; align-items: center; gap: 14px; width: 100%; text-align: start; padding: 12px 8px; border-top: 1px solid #e8eaed; color: #202124; font-size: 14px; transition: background .12s; } .goog-account:last-of-type { border-bottom: 1px solid #e8eaed; } .goog-account:hover { background: #f8f9fa; } .goog-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; font-weight: 500; flex: none; } .goog-acc-name { font-weight: 500; line-height: 1.2; } .goog-acc-email { font-size: 13px; color: #5f6368; line-height: 1.3; } .goog-other { border-top: 1px solid #e8eaed; border-bottom: none; } .goog-other-ico { width: 34px; height: 34px; border-radius: 50%; background: #f1f3f4; display: flex; align-items: center; justify-content: center; flex: none; } .goog-fine { font-size: 12px; color: #5f6368; line-height: 1.5; margin: 22px 0 0; } .auth-divider em { font-style: normal; font-size: 12px; color: var(--faint); white-space: nowrap; } @media (max-width: 880px) { .auth-aside { display: none; } .auth-logo { display: flex; } } @media (max-width: 460px) { .auth-card { padding: 26px 20px; border: none; box-shadow: none; background: transparent; } .auth-main { padding: 28px 18px; } } /* ---------- شاشة الدفع ---------- */ .pay-wrap { flex: 1; display: flex; align-items: stretch; } .pay-main { flex: 1; display: flex; justify-content: center; padding: 40px 28px; } .pay-summary { width: 380px; flex: none; background: var(--surface); border-inline-start: 1px solid var(--border); padding: 40px 32px; } .pay-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: 0 0 7px; } #pay-form .field { margin-bottom: 4px; } .pay-card-input { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border2); border-radius: 9px; padding: 12px 14px; background: var(--surface); margin-bottom: 4px; transition: border-color .15s, box-shadow .15s; } .pay-card-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .pay-brand { display: flex; align-items: center; gap: 5px; flex: none; min-height: 20px; } .pay-brand svg { display: block; border-radius: 3px; } .pay-field-err { font-size: 11.5px; color: var(--neg); min-height: 16px; margin-bottom: 12px; } .pay-label { margin-top: 4px; } @media (max-width: 900px) { .pay-wrap { flex-direction: column-reverse; } .pay-summary { width: auto; border-inline-start: none; border-bottom: 1px solid var(--border); padding: 28px 24px; } .pay-main { padding: 32px 24px; } } @media (max-width: 460px) { .pay-main { padding: 26px 18px; } .pay-summary { padding: 22px 18px; } } /* ---------- 13. التجاوب ---------- */ @media (max-width: 980px) { .g4 { grid-template-columns: repeat(2, 1fr); } .g-main, .g2 { grid-template-columns: 1fr; } .hero { grid-template-columns: 1fr; gap: 36px; padding: 40px 24px; } .hero h1 { font-size: 40px; } .landing-nav { display: none; } } @media (max-width: 860px) { .burger { display: flex; } .sidebar { position: fixed; top: 0; bottom: 0; right: 0; height: 100vh; z-index: 90; transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1); box-shadow: -12px 0 40px rgba(0,0,0,.22); } html[data-nav="open"] .sidebar { transform: translateX(0); } .nav-scrim { display: none; position: fixed; inset: 0; background: rgba(20,20,18,.4); z-index: 85; } html[data-nav="open"] .nav-scrim { display: block; } .searchbox { width: 150px; } .content { padding: 18px; } .g3 { grid-template-columns: 1fr; } } @media (max-width: 560px) { .g4 { grid-template-columns: 1fr; } .topbar .sub { display: none; } }