/* ═══════════════════════════════════════════════════════════════════ --border-strong · v405 ───────────────────────────────────────────────────────────────── `--border` في كل ثيم تحت عتبة التباين ٣٫٠ مقابل الخلفية — القياس: الصحيفة ١٫٢٤ · المجلة ١٫١٧ · الفاتح ١٫١٧ · الحبر والذهب ١٫٣٥ · وحتى الداكن ١٫٣٩. فحدود العناصر موجودة في الشيفرة وغير مرئية على الشاشة. ظهر ذلك في شبكة الصلاحيات: بدت كلماتٍ عائمة بلا مربّعات، وحدها الشريحة الحمراء `deny` كانت تُرى لأنّ لونها مشبع. لم نغيّر `--border` نفسه: مستعمَل في مئات المواضع، وتقويته يعيد رسم البرنامج كلّه ويمسّ هوية الثيمات. بدلاً منه متغيّر ثانٍ يُستعمل في **العناصر التفاعلية وحدها** — ما يُكبَس يجب أن يُرى. القيم محسوبة لا مقدَّرة: كل واحدة رُفعت حتى بلغت ٣٫٠٠ بالضبط مقابل خلفية ثيمها. والثيمان الزجاجيان أُعطيا شفافية أقوى لا لوناً صلباً، وإلا انكسر الزجاج. ═══════════════════════════════════════════════════════════════════ */ /* TakeFlow Tv - تصميم وتطوير محمد قندقلي */ /* ═══════════════════════════════════════════════════════════════════ tf-app.css — v371 انفصل عن index.html: ٦٥٨KB من أصل ٨٠٢KB كانت أنماط جوّا الصفحة. الفايدة: المتصفح بيكاشها لحالها (ما بتتحمّل مع كل فتحة)، والتعديل عليها ما بيلمس الماركب، والغلاس صار قابل للتغيير من مطرح واحد. ═══════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&family=Inter:wght@400;600;700;900&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&family=Share+Tech+Mono&family=Markazi+Text:wght@500;600;700&family=Almarai:wght@400;700;800&family=Alexandria:wght@500;700;800&display=swap'); /* v621 — متغيّرات الثيمات الثمانية عشر انتقلت كلّها إلى tf-themes.css (يُحمَّل قبل هذا الملفّ) */ body[data-theme="glass"]::before { content: ''; position: fixed; inset: 0; z-index: -2; background: radial-gradient(circle at 15% 15%, rgba(240,173,46,0.26), transparent 45%), radial-gradient(circle at 85% 10%, rgba(100,181,246,0.26), transparent 45%), radial-gradient(circle at 50% 95%, rgba(170,110,230,0.24), transparent 50%), radial-gradient(circle at 78% 68%, rgba(62,224,160,0.14), transparent 44%), radial-gradient(circle at 25% 78%, rgba(240,120,180,0.10), transparent 40%), linear-gradient(140deg, #070c18 0%, #0e1428 55%, #0a1020 100%); background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 100% 100%; animation: glassDrift 28s ease-in-out infinite alternate; } @keyframes glassDrift { 0% { background-position: 0% 0%, 100% 0%, 50% 100%, 80% 70%, 25% 80%, 0 0; } 100% { background-position: 10% 12%, 88% 8%, 45% 88%, 72% 62%, 32% 70%, 0 0; } } body[data-theme="glasslight"]::before { content: ''; position: fixed; inset: 0; z-index: -2; background: radial-gradient(circle at 14% 16%, rgba(240,173,46,0.26), transparent 46%), radial-gradient(circle at 86% 12%, rgba(100,181,246,0.30), transparent 46%), radial-gradient(circle at 48% 94%, rgba(170,110,230,0.24), transparent 50%), radial-gradient(circle at 80% 72%, rgba(62,224,160,0.20), transparent 44%), radial-gradient(circle at 22% 80%, rgba(240,140,190,0.16), transparent 42%), linear-gradient(140deg, #eff4fd 0%, #dfe8f8 55%, #e9f0fc 100%); background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 100% 100%; animation: glassDrift 30s ease-in-out infinite alternate; } /* Glass treatment — SPLIT for performance: STRONG blur on the few overlay surfaces (modals, popups, panels, navbar), LIGHT blur on the many repeated cards (grids/lists) so scrolling stays fast. */ body[data-theme="glass"] .modal, body[data-theme="glass"] .navbar, body[data-theme="glass"] .bottom-nav, body[data-theme="glass"] .msg-sidebar, body[data-theme="glass"] .shift-picker, body[data-theme="glass"] .login-box, body[data-theme="glasslight"] .modal, body[data-theme="glasslight"] .navbar, body[data-theme="glasslight"] .bottom-nav, body[data-theme="glasslight"] .msg-sidebar, body[data-theme="glasslight"] .shift-picker, body[data-theme="glasslight"] .login-box { backdrop-filter: blur(var(--glass-blur-strong)) saturate(200%); -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(200%); } body[data-theme="glass"] .card, body[data-theme="glass"] /* v427 — البطاقات المتكرّرة بلا blur (100 بطاقة بـblur = بطء): الغلاس البصري بيجيها من الطبقة الأساسية، والـblur للتحكّم فقط. */ body[data-theme="glass"] .stat-card, body[data-theme="glass"] .canvas-card, body[data-theme="glass"] .role-group, body[data-theme="glass"] .arch-item, body[data-theme="glass"] .folder-card, body[data-theme="glass"] .type-card, body[data-theme="glasslight"] .card, body[data-theme="glasslight"] .stat-card, body[data-theme="glasslight"] .canvas-card, body[data-theme="glasslight"] .role-group, body[data-theme="glasslight"] .arch-item, body[data-theme="glasslight"] .folder-card, body[data-theme="glasslight"] .type-card { backdrop-filter: blur(var(--glass-blur-light)) saturate(150%); -webkit-backdrop-filter: blur(var(--glass-blur-light)) saturate(150%); } /* depth + soft inner highlight (Windows 11 Acrylic feel) */ body[data-theme="glass"] .card, body[data-theme="glass"] .modal, body[data-theme="glass"] .canvas-card, body[data-theme="glass"] .login-box { box-shadow: 0 10px 40px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.16); backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%); /* v207 — blur أقوى */ } body[data-theme="glasslight"] .card, body[data-theme="glasslight"] .req-card, body[data-theme="glasslight"] .modal, body[data-theme="glasslight"] .canvas-card, body[data-theme="glasslight"] .login-box { box-shadow: 0 10px 36px rgba(80,110,170,0.16), inset 0 1px 0 rgba(255,255,255,0.75); } body[data-theme="glass"] .navbar { background: rgba(10, 15, 30, 0.40); border-bottom: 1px solid rgba(255,255,255,0.08); } body[data-theme="glasslight"] .navbar { background: rgba(255, 255, 255, 0.55); border-bottom: 1px solid rgba(255,255,255,0.7); } /* rounded, floating cards for the glass look */ body[data-theme="glass"] .card, body[data-theme="glasslight"] .card, body[data-theme="glass"] .req-card, body[data-theme="glasslight"] .req-card, body[data-theme="glass"] .canvas-card, body[data-theme="glasslight"] .canvas-card { border-radius: 18px; } /* subtle top highlight edge */ body[data-theme="glass"] .card, body[data-theme="glasslight"] .card, body[data-theme="glass"] .modal, body[data-theme="glasslight"] .modal { border-top-color: rgba(255,255,255,0.35); } /* smooth hover lift on glass cards */ body[data-theme="glass"] .req-card, body[data-theme="glasslight"] .req-card { transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, border-color .2s ease; } body[data-theme="glass"] .req-card:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.22); } body[data-theme="glasslight"] .req-card:hover { transform: translateY(-3px); box-shadow: 0 16px 44px rgba(80,110,170,0.24), inset 0 1px 0 rgba(255,255,255,0.9); } /* frosted inputs & selects for a cohesive glass feel */ body[data-theme="glass"] .field input, body[data-theme="glass"] .field select, body[data-theme="glass"] .field textarea, body[data-theme="glasslight"] .field input, body[data-theme="glasslight"] .field select, body[data-theme="glasslight"] .field textarea { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* softer, glassy buttons */ body[data-theme="glass"] .btn-submit.secondary, body[data-theme="glasslight"] .btn-submit.secondary { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } * { box-sizing: border-box; margin: 0; padding: 0; } /* ── ON AIR BOARD (TV fullscreen) — v559: لوحة مراقبةٍ يوميّة ── الأرقام · التالي على الهواء · أعمدة المراحل · ذهب للبثّ اليوم · شريط العاجل. الكروت غلاسٌ بصريّ بلا blur. اللون المشبع لما يحتاج انتباهاً الآن وحده. */ #onair-board { display: none; } body.onair-mode #onair-board { display: flex; flex-direction: column; min-height: 100vh; padding: 22px 32px 78px; gap: 16px; } body.onair-mode #login-screen, body.onair-mode #app-shell, body.onair-mode .chat-widget { display: none !important; } .onair-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 2px solid var(--accent); padding-bottom: 14px; } .onair-logo { font-size: 30px; font-weight: 700; color: var(--accent-fg); } /* v183 — زر لغة لوحة الهوا (للشاشات الأجنبية بالاستوديو) */ .onair-lang { background: transparent; border: 2px solid var(--accent); border-radius: 12px; color: var(--accent-fg); font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 900; padding: 8px 18px; cursor: pointer; letter-spacing: 1px; transition: all .16s; } .onair-lang:hover { background: var(--accent); color: var(--accent-ink, #14141f); } .onair-lang:active { transform: scale(.965); } .onair-clock { font-family: var(--tf-mono, 'IBM Plex Mono', monospace); font-size: 44px; font-weight: 600; color: var(--text); letter-spacing: 1px; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; } .onair-clock small { font-size: .45em; opacity: .55; margin-inline-start: 4px; } .oab-colon { font-style: normal; animation: oab-blink 1s steps(1) infinite; } @keyframes oab-blink { 50% { opacity: .25; } } .oab-hright { display: flex; align-items: center; gap: 16px; } .oab-live { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-muted); padding: 5px 11px; border: 1px solid var(--border); border-radius: 20px; } .oab-live[hidden] { display: none; } .oab-live.stale { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); } .oab-bulletin { display: flex; align-items: baseline; gap: 10px; font-size: 15px; color: var(--text-muted); } .oab-bulletin b { color: var(--text); font-size: 20px; font-weight: 700; } .oab-hm, .oab-cd { font-family: var(--tf-mono, 'IBM Plex Mono', monospace); font-variant-numeric: tabular-nums; unicode-bidi: isolate; } .oab-hm { font-weight: 600; direction: ltr; } /* العدّ بحروفٍ عربية (١س ٥٩د) يبقى باتّجاه الصفحة؛ الساعة وحدها ltr */ .oab-cd { color: var(--text-muted); } .oab-bulletin .oab-hm { font-size: 20px; color: var(--text); } /* LED — لون المرحلة للتعريف فقط، صغيرٌ وخافت */ .oab-led { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; } .oab-led.on, .oab-led.l-ready, .oab-led.l-aired { background: var(--success); box-shadow: 0 0 8px color-mix(in srgb, var(--success) 60%, transparent); } .oab-led.l-new { background: var(--info); } .oab-led.l-design { background: var(--accent); animation: oab-pulse 2s ease-in-out infinite; } .oab-led.l-montage { background: var(--violet, #8b5cf6); animation: oab-pulse 2s ease-in-out infinite; } @keyframes oab-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* الأرقام ومقياس إنجاز اليوم */ .oab-stats { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; } .oab-stat { display: flex; flex-direction: column; justify-content: center; min-width: 130px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--surface) 88%, transparent); } .oab-stat b { font-family: var(--tf-mono, 'IBM Plex Mono', monospace); font-size: 34px; font-weight: 600; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; } .oab-stat span { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-top: 6px; } .oab-stat.attn { border-color: var(--danger); } .oab-stat.attn b { color: var(--danger); } .oab-vu { flex: 1; min-width: 260px; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--surface) 88%, transparent); } .oab-vu > span { font-size: 13px; font-weight: 600; color: var(--text-muted); white-space: nowrap; } .oab-vu-bar { flex: 1; display: flex; gap: 3px; height: 16px; } .oab-vu-bar i { flex: 1; border-radius: 2px; background: color-mix(in srgb, var(--text-muted) 22%, transparent); transition: background .6s ease; } .oab-vu-bar i.on { background: var(--success); } .oab-vu em { font-style: normal; font-family: var(--tf-mono, 'IBM Plex Mono', monospace); font-weight: 600; color: var(--text); min-width: 48px; text-align: end; direction: ltr; unicode-bidi: isolate; } .oab-later { align-self: center; font-size: 13px; color: var(--text-muted); padding: 0 6px; } /* التالي على الهواء */ .oab-next { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; } .oab-next-lbl { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--text); padding: 0 6px; } .oab-next-empty { align-self: center; font-size: 14px; color: var(--text-muted); } .oab-nx { flex: 1 1 260px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-inline-start: 4px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--surface) 88%, transparent); min-width: 0; } .oab-nx.ok { border-inline-start-color: var(--success); } .oab-nx.risk, .oab-nx.late { border-color: var(--danger); border-inline-start-color: var(--danger); } .oab-nx-hm { font-family: var(--tf-mono, 'IBM Plex Mono', monospace); font-size: 24px; font-weight: 600; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; } .oab-nx-t { display: flex; flex-direction: column; min-width: 0; gap: 2px; } .oab-nx-t b { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: clip; text-overflow: ellipsis; } .oab-nx-t em { font-style: normal; font-size: 12.5px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; } .oab-nx-cd { font-family: var(--tf-mono, 'IBM Plex Mono', monospace); font-size: 20px; font-weight: 600; unicode-bidi: isolate; font-variant-numeric: tabular-nums; } .oab-nx.late .oab-nx-cd, .oab-nx.risk .oab-nx-cd { color: var(--danger); } /* أعمدة المراحل وعمود «ذهب للبثّ» */ .oab-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 22%); gap: 16px; min-height: 0; } .onair-grid.oab-lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; } .oab-aired:empty { display: none; } .oab-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; } /* v616 — ذهب للبثّ وقيد التحضير */ .oab-main:has(.oab-aired:empty):has(.oab-prep:empty) { grid-template-columns: minmax(0, 1fr); } .oab-lane, .oab-aired { border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--surface) 82%, transparent); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .oab-lane > header, .oab-aired > header { display: flex; align-items: center; gap: 8px; padding: 4px 4px 8px; border-bottom: 1px dashed var(--border); } .oab-lane > header b, .oab-aired > header b { font-size: 16px; font-weight: 700; color: var(--text); } .oab-n { margin-inline-start: auto; font-family: var(--tf-mono, 'IBM Plex Mono', monospace); font-size: 15px; font-weight: 600; color: var(--text-muted); } .oab-cards { display: flex; flex-direction: column; gap: 8px; } .oab-none { font-size: 13px; color: var(--text-muted); padding: 10px 6px; text-align: center; } .oab-card { padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); display: flex; flex-direction: column; gap: 6px; } .oab-card.urgent { border-inline-start: 3px solid var(--danger); } .oab-card.risk, .oab-card.late { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger), 0 0 18px color-mix(in srgb, var(--danger) 22%, transparent); } .oab-card.bad { opacity: .55; font-size: 13px; } .oab-top { display: flex; align-items: flex-start; gap: 8px; } .oab-title { font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--text); } .oab-urg { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--danger); padding: 2px 8px; border: 1px solid color-mix(in srgb, var(--danger) 50%, var(--border)); border-radius: 10px; } .oab-urg i { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); animation: oab-pulse 1.4s ease-in-out infinite; } .oab-types { font-size: 13px; color: var(--text-muted); } .oab-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .oab-air { display: inline-flex; align-items: baseline; gap: 8px; font-size: 13px; } .oab-air .oab-hm { font-size: 16px; color: var(--text); } .oab-air.none { color: var(--text-muted); } .oab-card.late .oab-cd, .oab-card.risk .oab-cd { color: var(--danger); font-weight: 600; } .oab-meter { display: inline-flex; gap: 3px; } .oab-meter i { width: 14px; height: 5px; border-radius: 2px; background: color-mix(in srgb, var(--text-muted) 25%, transparent); } .oab-meter i.on { background: var(--text-muted); } .oab-card[data-stage="ready"] .oab-meter i.on { background: var(--success); } .oab-state { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--danger); } .oab-note { font-size: 12.5px; color: var(--text-muted); } .oab-people { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--text-muted); } .oab-people span { display: inline-flex; align-items: center; gap: 4px; } .oab-card.oab-in { animation: oab-in .55s ease-out both; } .oab-card.oab-moved { animation: oab-moved 1.6s ease-out both; } @keyframes oab-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes oab-moved { 0% { box-shadow: 0 0 0 2px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } } .oab-aired-list { display: flex; flex-direction: column; gap: 6px; } .oab-aired-it { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2); } .oab-aired-it .oab-hm { font-size: 15px; color: var(--text); } .oab-aired-t { display: flex; flex-direction: column; min-width: 0; } .oab-aired-t b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: clip; text-overflow: ellipsis; } .oab-aired-t em { font-style: normal; font-size: 12px; color: var(--text-muted); } .oab-check { color: var(--success); display: inline-flex; } .oab-aired-it.oab-stamp { animation: oab-stamp .9s cubic-bezier(.2, 1.3, .4, 1) both; } @keyframes oab-stamp { 0% { transform: scale(1.25) rotate(-3deg); opacity: 0; box-shadow: 0 0 0 3px var(--success); } 60% { opacity: 1; } 100% { transform: none; box-shadow: 0 0 0 0 transparent; } } /* شريط العاجل — يدخل من اليسار ويمضي يميناً في العربية، ومن اليمين في الإنكليزية. overflow: clip لا hidden: لا حاوية تمرير تحت الماوس */ .oab-ticker { position: fixed; inset-inline: 0; bottom: 0; height: 52px; display: flex; align-items: stretch; background: color-mix(in srgb, var(--surface) 94%, #000 6%); border-top: 2px solid var(--border); z-index: 5; } .oab-ticker:empty { display: none; } .oab-tk-lbl { display: flex; align-items: center; padding: 0 20px; font-size: 18px; font-weight: 700; color: var(--text); background: var(--surface2); border-inline-end: 2px solid var(--border); flex-shrink: 0; } .oab-tk-lbl.urg { background: var(--danger); color: var(--danger-ink, #fff); border-color: var(--danger); } .oab-tk-win { flex: 1; overflow: clip; display: flex; align-items: center; min-width: 0; } /* v609 — بلا min-width:0 تمدّدت النافذة بطول المسار (clip ليست حاوية تمرير) فخرج الشريط عن الشاشة */ .oab-tk-track { display: flex; width: max-content; animation: oab-tk var(--oab-tk-dur, 40s) linear infinite; } .oab-tk-seq { display: flex; align-items: center; flex-shrink: 0; } .oab-tk-it { font-size: 18px; font-weight: 600; color: var(--text); white-space: nowrap; padding: 0 4px; } .oab-tk-it.k-urg, .oab-tk-it.k-late, .oab-tk-it.k-risk { color: var(--danger); } .oab-tk-sep { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); margin: 0 22px; flex-shrink: 0; } @keyframes oab-tk { from { transform: translateX(0); } to { transform: translateX(-50%); } } [dir="rtl"] .oab-tk-track { animation-name: oab-tk-rtl; } @keyframes oab-tk-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } } /* بلا جلسة · خطأ القراءة · الفراغ */ .onair-grid { display: grid; gap: 12px; } .onair-empty { grid-column: 1/-1; text-align: center; padding: 60px 20px; font-size: 22px; color: var(--text-muted); } .onair-empty small { display: block; font-size: 15px; margin-top: 8px; } .oab-err { color: var(--danger); } .oab-gate { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 640px; margin: 40px auto; line-height: 1.8; } .oab-gate b { font-size: 24px; color: var(--text); } .oab-gate p { font-size: 16px; } .oab-gate-ico { color: var(--accent-fg); } .oab-gate-btn { display: inline-flex; align-items: center; padding: 12px 22px; border-radius: 12px; background: var(--accent); color: var(--accent-ink, #14141f); font-weight: 700; text-decoration: none; } .oab-gate-btn:active { transform: scale(.965); } @media (max-width: 1280px) { .oab-main { grid-template-columns: minmax(0, 1fr); } .onair-grid.oab-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { body.onair-mode #onair-board { padding: 14px 14px 70px; } .onair-grid.oab-lanes { grid-template-columns: minmax(0, 1fr); } .onair-header { flex-wrap: wrap; } .onair-logo { font-size: 22px; } .onair-clock { font-size: 30px; } .oab-stat { min-width: calc(50% - 6px); } } /* v609 — لوحة الهواء شاشة عرضٍ على الحائط لا واجهة تفاعل: «تقليل الحركة» في ويندوز كان يجمّد شريطها (animation:none على كلّ ما فيها) فبدا «واقفاً». الحركة هنا تحمل المعلومة — فلا تُطفأ في اللوحة. */ body[data-lang="ar"] { font-family: 'Cairo', sans-serif; } body[data-lang="en"] { font-family: 'Inter', sans-serif; } body { background: var(--bg); color: var(--text); min-height: 100vh; font-size: 15px; line-height: 1.6; overflow-x: hidden; transition: background .25s ease, color .25s ease; } html { overflow-x: hidden; } html[dir="ltr"] body { direction: ltr; } /* ── LOGIN SCREEN ── */ .login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } .login-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 28px; max-width: 420px; width: 100%; text-align: center; } @media (max-width: 440px) { .login-box { padding: 24px 16px; border-radius: 0; min-height: 100vh; justify-content: center; display: flex; flex-direction: column; border: none; } .login-screen { padding: 0; align-items: stretch; } } .login-logo { font-size: 40px; margin-bottom: 10px; } .login-title { font-size: 22px; font-weight: 900; margin-bottom: 6px; } .login-sub { color: var(--text-muted); font-size: 13px; margin-bottom: 28px; } /* v571 — شاشة الدخول المقسومة (v203: login-split · login-visual · lv-*) أُزيلت: الجديدة (.ln-*) آخر الملفّ. وكان صنفها .lv-dot يتسرّب إلى نقطة «البثّ المباشر» في الطلبات (lv-badge) فيجعلها مطلقةً مزاحة. */ .role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; } .role-card { background: var(--surface2); border: 2px solid var(--border); border-radius: var(--radius); padding: 18px 10px; cursor: pointer; transition: all .2s; } .role-card:hover { border-color: var(--accent); } .role-card.selected { border-color: var(--accent); background: #231a08; } .role-icon { font-size: 26px; margin-bottom: 6px; } .role-name { font-size: 13px; font-weight: 700; } .login-input { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: inherit; font-size: 18px; padding: 12px 16px; text-align: center; letter-spacing: 4px; margin-bottom: 14px; } .login-input:focus { outline: none; border-color: var(--accent); } .name-select { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: inherit; font-size: 14px; padding: 12px 16px; margin-bottom: 14px; display: none; } .btn-login { width: 100%; padding: 14px; background: var(--accent); color: var(--accent-ink, #0a0e1a); border: none; border-radius: var(--radius); font-family: inherit; font-size: 15px; font-weight: 900; cursor: pointer; } .login-error { color: var(--danger); font-size: 13px; margin-top: 10px; display: none; } /* ═══ v524 — فحص صفحة الدخول: زرّ الإظهار وتنبيه Caps Lock ═══ */ .login-pw { position: relative; } .login-pw .login-input { padding-inline-end: 46px; } .login-eye { position: absolute; top: 50%; inset-inline-end: 10px; transform: translateY(-50%); margin-top: -7px; width: 32px; height: 32px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color .12s, border-color .12s; } .login-eye:hover, .login-eye:focus-visible { color: var(--text); border-color: var(--border); outline: none; } .login-eye[aria-pressed="true"] { color: var(--accent-fg); } .login-caps { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-top: -6px; margin-bottom: 8px; } .login-caps[hidden] { display: none; } #login-btn[disabled] { opacity: .7; cursor: progress; } .lang-toggle-login { position: absolute; top: 20px; inset-inline-end: 20px; background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; padding: 6px 14px; color: var(--text); font-size: 12px; cursor: pointer; font-family: inherit; } /* ── APP SHELL ── */ #app-shell { display: none; } .topnav { background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 28px; height: 60px; position: sticky; top: 0; z-index: 100; flex-wrap: wrap; gap: 10px; } .logo { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 16px; color: var(--accent-fg); } .logo-dot { width: 8px; height: 8px; background: var(--success); border-radius: 50%; animation: pulse 2s infinite; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} } .nav-tabs { display: flex; gap: 4px; flex-wrap: wrap; } .nav-tab { padding: 7px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-muted); border: none; background: transparent; font-family: inherit; display: inline-flex; align-items: center; gap: 7px; } .nav-tab:hover { color: var(--text); background: var(--surface2); } .nav-tab.active { background: var(--accent); color: var(--accent-ink, #0a0e1a); } .nav-ico { width: 17px; height: 17px; flex-shrink: 0; } .bn-icon .nav-ico { width: 20px; height: 20px; } .nav-right { display: flex; align-items: center; gap: 10px; } /* v552 — زرّ «المزيد» ولوحته (الهاتف فقط؛ على الكمبيوتر الأزرار ظاهرة كلّها) */ .nav-more { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--surface2); border: 1px solid var(--border); color: var(--text); cursor: pointer; } .nav-more:active { transform: scale(.965); } .nav-more-panel { position: fixed; top: 56px; inset-inline-start: 10px; inset-inline-end: 10px; z-index: 260; background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 8px; /* معتمٌ: السطح الزجاجيّ يُظهر ما خلفه */ box-shadow: 0 14px 40px -10px color-mix(in srgb, #000 55%, transparent); max-height: calc(100vh - 70px); overflow-y: auto; } .nav-more-panel[hidden] { display: none; } /* v552 — بطاقة «للشاشة الكبيرة» */ .tf-deskonly { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 48px 20px; color: var(--text); } .tf-deskonly b { font-size: 16px; font-weight: 700; } .tf-deskonly p { font-size: 13px; color: var(--text-muted); max-width: 32ch; line-height: 1.7; } .tf-deskonly svg { color: var(--text-muted); } .nmp-it { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border-radius: 10px; border: 0; background: none; color: var(--text); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: start; min-height: 44px; } .nmp-it:active { background: var(--surface2); } .nmp-h { display: flex; align-items: center; gap: 7px; padding: 10px 12px 4px; font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: .04em; } .nmp-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .nmp-theme { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 9px; border: 1px solid transparent; background: none; color: var(--text); font-family: inherit; font-size: 12.5px; cursor: pointer; text-align: start; min-height: 40px; } .nmp-theme.on { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: var(--surface2); font-weight: 700; } .nmp-theme .theme-dot { width: 14px; height: 14px; } .nav-user-avatar { width: 30px; height: 30px; border-radius: 50%; background-size: cover; background-position: center; display: inline-block; vertical-align: middle; border: 2px solid var(--accent); margin-inline-start: 10px; } .profile-avatar { width: 110px; height: 110px; border-radius: 50%; background: var(--surface2); border: 3px solid var(--accent); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; transition: transform .15s; } .profile-avatar:hover { transform: scale(1.04); } .profile-avatar-edit { position: absolute; bottom: 2px; inset-inline-end: 2px; width: 32px; height: 32px; background: var(--accent); color: var(--accent-ink, #0a0e1a); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; border: 2px solid var(--surface); } .mini-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background-size: cover; background-position: center; vertical-align: middle; flex-shrink: 0; background-color: var(--surface2); font-size: 12px; } .mini-avatar-icon { border: 1px solid var(--border); } /* presence status dot on avatars */ .avatar-wrap { position: relative; display: inline-flex; vertical-align: middle; flex-shrink: 0; } .pres-dot { position: absolute; bottom: -1px; inset-inline-end: -1px; border-radius: 50%; border: 2px solid var(--surface); box-sizing: border-box; } .pres-dot.online { background: #2ecc71; box-shadow: 0 0 0 1px rgba(46,204,113,.4); animation: pres-pulse 1.8s ease-in-out infinite; } .pres-dot.offline { background: #8a8a9a; animation: none; } @keyframes pres-pulse { 0% { box-shadow: 0 0 0 0 rgba(46,204,113,.6), 0 0 0 1px rgba(46,204,113,.4); } 70% { box-shadow: 0 0 0 6px rgba(46,204,113,0), 0 0 0 1px rgba(46,204,113,.4); } 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0), 0 0 0 1px rgba(46,204,113,.4); } } .online-label { color: var(--success); font-weight: 800; animation: online-blink 2s ease-in-out infinite; } @keyframes online-blink { 0%,100% { opacity: 1; } 50% { opacity: .55; } } .member-avatar-wrap .pres-dot { position: absolute; bottom: -2px; inset-inline-end: -2px; } .user-badge-dot { position: absolute; top: -2px; inset-inline-start: -2px; width: 10px; height: 10px; } /* ═══ SCHEDULE / DUTY ROSTER ═══ */ .sched-today { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 20px; } .sched-today-head { font-size: 16px; font-weight: 800; color: var(--accent-fg); margin-bottom: 12px; } .sched-today-body { display: flex; flex-wrap: wrap; gap: 20px; } .sched-today-dept { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .sched-today-people { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .sched-today-deptname { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; } .sched-today-person { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; background: color-mix(in srgb, var(--surface2) 60%, transparent); padding: 5px 10px 5px 5px; border-radius: 22px; white-space: nowrap; flex-shrink: 0; } .sched-today-name { font-weight: 700; } .sched-today-shift { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 12px; } .sched-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px; } .sched-dept-tabs { display: flex; gap: 6px; flex-wrap: wrap; } .sched-dept-tab { padding: 8px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s; } .sched-dept-tab.active { background: var(--accent); color: var(--accent-ink, #0a0e1a); border-color: var(--accent); } .sched-week-nav { display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1.5px solid var(--border); border-radius: 999px; padding: 4px 6px; box-shadow: 0 2px 10px rgba(0,0,0,.06); } /* v170: كبسولة موحّدة */ .sched-week-nav .sched-nav-btn { border: none; background: transparent; border-radius: 999px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; color: var(--text-muted); transition: all .18s; } .sched-week-nav .sched-nav-btn:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-fg); transform: scale(1.12); } .sched-week-nav .sched-nav-btn:active { transform: scale(.92); } .sched-week-label.is-current-week::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; margin-inline-end: 7px; vertical-align: middle; animation: weekPulse 2s ease-in-out infinite; } @keyframes weekPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(46,204,113,.5); } 50% { box-shadow: 0 0 0 5px rgba(46,204,113,0); } } .sched-nav-btn { min-width: 34px; height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; } .sched-nav-btn:hover { border-color: var(--accent); color: var(--accent-fg); } .sched-week-label { font-size: 13px; font-weight: 800; color: var(--text); min-width: 140px; text-align: center; padding: 6px 12px; border-radius: 999px; transition: all .18s; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)); } .sched-week-label:hover { background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, var(--accent) 14%, transparent)); } .sched-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; padding: 10px 14px; background: var(--surface2); border-radius: 10px; } .sched-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; } .sched-legend-drag { cursor: grab; padding: 4px 8px; border-radius: 8px; border: 1px dashed transparent; transition: border-color .15s, background .15s; } .sched-legend-drag:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } .sched-legend-drag.dragging { opacity: .5; } .sched-legend-hint { font-size: 11px; color: var(--text-muted); font-style: italic; margin-inline-start: 6px; } .shift-del-btn { width: 16px; height: 16px; border-radius: 50%; border: none; background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); font-size: 9px; cursor: pointer; margin-inline-start: 2px; display: inline-flex; align-items: center; justify-content: center; } .shift-del-btn:hover { background: var(--danger); color: var(--danger-ink); } .sched-chip { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; font-size: 12px; } .sched-grid-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); } .sched-table { width: 100%; border-collapse: collapse; min-width: 640px; } /* v200 — انتقال ناعم بين أقسام الدوام بدل الـCUT الجاف */ #sched-grid { transition: opacity .18s ease, transform .18s ease; } #sched-grid.sched-leaving { opacity: 0; transform: translateY(6px); } #sched-grid.sched-entering { animation: schedIn .4s cubic-bezier(.22,.9,.3,1) both; } @keyframes schedIn { from { opacity: 0; transform: translateY(10px) scale(.995); } to { opacity: 1; transform: none; } } .sched-table th, .sched-table td { border: 1px solid var(--border); padding: 8px 6px; text-align: center; font-size: 12.5px; } .sched-table th { background: var(--surface2); font-weight: 700; color: var(--text); position: sticky; top: 0; } .sched-daynum { font-size: 10px; color: var(--text-muted); font-weight: 400; } .sched-name-col { text-align: start !important; white-space: nowrap; font-weight: 700; } .sched-name-col span { vertical-align: middle; } .sched-today-col { background: color-mix(in srgb, var(--accent) 20%, var(--surface2)) !important; color: var(--accent-fg); } /* ── STAGE 1: holidays ── */ .sched-holiday-col { background: color-mix(in srgb, #c0504d 16%, var(--surface2)) !important; } /* v406 — كان: max-width 90px + nowrap + ellipsis + خطّ 9.5px. فاسم «حسين المصري» يُقصّ إلى «حسين الم…» في خانة العطلة، وهي الخانة التي يُضغط عليها لطلب التبديل. المستخدم لا يرى لمن يبدّل. الآن: سطران بدل القصّ، وخطّ مقروء، والعرض يتبع الخانة. */ .sched-holiday-head { font-size: 10.5px; font-weight: 800; color: #c0504d; margin-top: 3px; line-height: 1.35; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } @media (max-width: 768px) { .sched-holiday-head { font-size: 11px; -webkit-line-clamp: 3; } } .sched-worked-holiday { font-size: 9px; font-weight: 800; color: #c0504d; background: color-mix(in srgb, #c0504d 14%, transparent); border-radius: 5px; padding: 1px 4px; margin-top: 3px; display: inline-block; } .sched-holidays-bar { margin-top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; } .sched-holidays-bar:empty { display: none; } .hol-bar-head { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 10px; } .hol-chips { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .hol-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; background: color-mix(in srgb, #c0504d 10%, var(--surface2)); border: 1px solid color-mix(in srgb, #c0504d 30%, var(--border)); border-radius: 20px; padding: 6px 12px; color: var(--text); } .hol-drag { cursor: grab; } .hol-drag.dragging { opacity: .5; } .hol-date { font-size: 11px; color: var(--text-muted); font-weight: 700; } .hol-del { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 0 2px; } .hol-del:hover { color: var(--danger); } .hol-add-btn { background: color-mix(in srgb, #c0504d 12%, transparent); color: var(--danger); border: 1px dashed color-mix(in srgb, #c0504d 40%, transparent); border-radius: 20px; padding: 6px 14px; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; } .hol-add-btn:hover { background: color-mix(in srgb, #c0504d 20%, transparent); } .hol-hint { display: block; font-size: 11px; color: var(--text-muted); font-style: italic; margin-top: 8px; } .hol-empty { font-size: 12.5px; color: var(--text-muted); } /* ── STAGE 2: highlight the viewer's own row ── */ .sched-my-row > td { background: color-mix(in srgb, #2ecc71 9%, transparent); } .sched-my-row > td.sched-name-col { box-shadow: inset 3px 0 0 #2ecc71; } html[dir="ltr"] .sched-my-row > td.sched-name-col { box-shadow: inset -3px 0 0 #2ecc71; } .sched-me-tag { font-size: 9.5px; font-weight: 800; background: #2ecc71; color: #fff; border-radius: 6px; padding: 1px 6px; margin-inline-start: 4px; vertical-align: middle; } /* ── STAGE 3: swap/leave requests ── */ .sched-requests-bar { margin-top: 14px; } .sched-requests-bar:empty { display: none; } .sr-head { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .sr-count { background: var(--accent); color: var(--accent-ink, #0a0e1a); font-size: 11px; font-weight: 800; min-width: 20px; height: 20px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; } .sr-list { display: flex; flex-direction: column; gap: 8px; } .sr-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; } .sr-info { flex: 1; min-width: 0; } .sr-who { font-size: 13.5px; font-weight: 700; color: var(--text); } .sr-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; } .sr-note { font-style: italic; } .sr-actions { display: flex; gap: 6px; flex-shrink: 0; } .sr-approve, .sr-reject { border: none; border-radius: 8px; padding: 7px 12px; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } .sr-approve { background: color-mix(in srgb, #2ecc71 18%, transparent); color: var(--success); } .sr-approve:hover { background: #2ecc71; color: #fff; } .sr-reject { background: color-mix(in srgb, #e04545 15%, transparent); color: var(--danger); } .sr-reject:hover { background: #e04545; color: #fff; } .req-type-row { display: flex; gap: 10px; } .req-type-btn { flex: 1; background: var(--surface2); border: 1.5px solid var(--border); border-radius: 10px; padding: 12px; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--text-muted); cursor: pointer; } .req-type-btn.active { border-color: var(--accent); color: var(--accent-fg); background: color-mix(in srgb, var(--accent) 10%, transparent); } .req-select { background: var(--surface2); border: 1.5px solid var(--border); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 14px; padding: 10px; width: 100%; } /* ── STAGE 4: weekly load strip ── */ .sched-weekstats { margin-top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; } .sched-weekstats:empty { display: none; } .sws-head { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 10px; } .sws-chips { display: flex; gap: 10px; flex-wrap: wrap; } .sws-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--surface2); border: 1px solid var(--border); border-radius: 22px; padding: 5px 12px 5px 6px; } .sws-top { border-color: color-mix(in srgb, #e8a020 45%, var(--border)); background: color-mix(in srgb, #e8a020 8%, var(--surface2)); } .sws-name { font-size: 12.5px; font-weight: 700; color: var(--text); } .sws-count { font-size: 11px; font-weight: 800; color: var(--text-muted); } .sws-fire { font-size: 14px; } /* v558 — الإجازات بجانب رقم الدوام: رماديّةٌ لا تنافس الرقم */ .sws-leave { font-size: 11px; font-weight: 600; color: var(--text-muted); padding: 1px 7px; border-radius: 10px; border: 1px dashed var(--border); white-space: nowrap; } /* ── m3: fullscreen report editor ── */ .nr-expand-btn { position: absolute; top: 8px; inset-inline-end: 8px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted); font-size: 15px; width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; z-index: 2; } .nr-expand-btn:hover { background: var(--accent); color: var(--accent-ink, #0a0e1a); border-color: var(--accent); } .report-fs-overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--bg) 96%, transparent); z-index: 3500; display: none; padding: 24px; box-sizing: border-box; } .report-fs-overlay.open { display: flex; animation: fadeIn .18s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .report-fs-inner { max-width: 1000px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; } .report-fs-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .report-fs-title { font-size: 18px; font-weight: 900; color: var(--text); } .report-fs-close { background: var(--accent); color: var(--accent-ink, #0a0e1a); border: none; border-radius: 10px; padding: 10px 20px; font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; } .report-fs-close:hover { filter: brightness(1.1); } .report-fs-text { flex: 1; width: 100%; box-sizing: border-box; background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px; color: var(--text); font-family: inherit; font-size: 16px; line-height: 1.9; padding: 22px; resize: none; } .report-fs-text:focus { outline: none; border-color: var(--accent); } /* ── m4: editor greeting + step progress ── */ .nr-editor-pulse { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 15px; } .nr-editor-pulse:empty { display: none; } .nrp-emoji { font-size: 22px; } .nrp-text { font-weight: 700; color: var(--text); } .nr-progress { max-width: 100%; margin-bottom: 18px; position: sticky; top: 6px; z-index: 60; /* v173: بيلحق المحرر وهو نازل */ backdrop-filter: blur(10px); border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.10); } .nr-progress:empty { display: none; } .nrpg-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: 8px; } .nrpg-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #2ecc71); border-radius: 3px; transition: width .4s ease; } .nrpg-steps { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .nrpg-step { font-size: 12px; font-weight: 700; color: var(--text-muted); } .nrpg-step.done { color: var(--success); } .nrpg-pct { margin-inline-start: auto; font-size: 12px; font-weight: 800; color: var(--text-muted); } /* ── m5: smart readiness meter ── */ .nr-readiness { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; margin-bottom: 18px; } .nr-readiness:empty { display: none; } .rr-ring-wrap { position: relative; width: 52px; height: 52px; flex-shrink: 0; } .rr-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; } .rr-info { flex: 1; min-width: 0; } .rr-mood { font-size: 14px; font-weight: 800; } .rr-gap { font-size: 12px; color: var(--text-muted); margin-top: 3px; } /* ── m6: urgency pulse ── */ .nr-urgency { margin-bottom: 16px; } .nr-urgency:empty { display: none; } .nru-banner { border-radius: 12px; padding: 12px 16px; font-size: 14px; font-weight: 800; text-align: center; } .nru-calm { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); color: var(--text-muted); border: 1px solid var(--border); } .nru-warm { background: color-mix(in srgb, #e8a020 12%, var(--surface)); color: var(--accent-fg); border: 1px solid color-mix(in srgb, #e8a020 30%, transparent); } .nru-hot { background: color-mix(in srgb, #e04545 14%, var(--surface)); color: var(--danger); border: 1px solid color-mix(in srgb, #e04545 40%, transparent); animation: nruPulse 1.5s ease-in-out infinite; } .nru-past { background: color-mix(in srgb, #e04545 10%, var(--surface)); color: var(--danger); border: 1px solid color-mix(in srgb, #e04545 30%, transparent); } @keyframes nruPulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, #e04545 40%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } } /* urgent mode: subtle red edge on the whole form */ .nr-urgent-mode { position: relative; } .nr-urgent-mode::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; box-shadow: inset 0 0 0 3px color-mix(in srgb, #e04545 35%, transparent); animation: nruEdge 2s ease-in-out infinite; } @keyframes nruEdge { 0%,100% { opacity: .4; } 50% { opacity: .9; } } /* ── m7: designer preview ── */ .dp-preview-note { font-size: 12.5px; color: var(--text-muted); background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; } /* ── m8: journalist checker ── */ .nr-checker { margin-top: 10px; } .nr-checker:empty { display: none; } .jc-head { font-size: 12px; font-weight: 800; color: var(--text-muted); margin-bottom: 6px; } .jc-hint { font-size: 12.5px; font-weight: 600; color: var(--accent-fg); background: color-mix(in srgb, #e8a020 8%, transparent); border-inline-start: 3px solid #e8a020; border-radius: 6px; padding: 7px 11px; margin-bottom: 6px; } .jc-ok { font-size: 12.5px; font-weight: 700; color: var(--success); } /* ── m9: report fingerprint ── */ .nr-fingerprint { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .nr-fingerprint:empty { display: none; } .nr-fp-chip { font-size: 13px; font-weight: 800; color: var(--fp); background: color-mix(in srgb, var(--fp) 12%, transparent); border: 1px solid color-mix(in srgb, var(--fp) 35%, transparent); border-radius: 20px; padding: 5px 14px; } .nr-fp-note { font-size: 11.5px; color: var(--text-muted); } /* ── m10: quick draft ── */ .nr-quick-btn { background: linear-gradient(120deg, #e04545, #e8a020); color: #fff; border: none; border-radius: 12px; padding: 11px 20px; font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; margin-bottom: 14px; box-shadow: 0 3px 14px color-mix(in srgb, #e04545 25%, transparent); transition: transform .15s; } .nr-quick-btn:hover { transform: translateY(-2px); } .qd-note { font-size: 12.5px; color: var(--text-muted); background: color-mix(in srgb, #e04545 8%, transparent); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; } .qd-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .qd-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; white-space: nowrap; } /* ═══ v524 — العاجل: طلبٌ سريعٌ مصغَّر ═══ نصٌّ متعدّد الأسطر، الوجهة رقاقاتٌ تُضغط بإصبع، والحزمة تظهر حين تلزم. الإرسال أسفل يمين، والعجلة إلى جانبه. */ .qd-body { display: flex; flex-direction: column; gap: 12px; } /* v526 — أوسع ليُقرأ: ٨ أسطر بالحدّ الأدنى، ويكبر مع النصّ (field-sizing حيث يُدعم) */ .qd-body textarea { width: 100%; box-sizing: border-box; min-height: 200px; max-height: 52vh; resize: vertical; font: inherit; font-size: 14.5px; line-height: 1.95; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); field-sizing: content; } .qd-body textarea:focus { outline: none; border-color: var(--accent); } .qd-parts { min-height: 16px; margin-top: 4px; font-size: 11px; color: var(--text-muted); } .qd-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .qd-row3 { display: grid; grid-template-columns: 1.1fr .8fr 1.6fr; gap: 12px; } .qd-row3 .field label, .qd-body .field > label { display: inline-flex; align-items: center; gap: 6px; } .qd-ic { display: inline-flex; align-items: center; color: var(--text-muted); line-height: 0; } .qd-chip .qd-ic, .btn-submit .qd-ic { color: currentColor; } .qd-chips { display: flex; gap: 6px; flex-wrap: wrap; } .qd-chip { font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); transition: transform .12s, border-color .12s, color .12s; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); } /* قسم كلّ فقرة */ .qd-plist { border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; background: color-mix(in srgb, var(--surface2) 60%, transparent); } .qd-pl-h { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; } .qd-pl-row { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 9px; border-inline-start: 3px solid var(--border); margin-bottom: 4px; background: var(--surface); } .qd-pl-row.lane-g { border-inline-start-color: var(--lane-g); } .qd-pl-row.lane-m { border-inline-start-color: var(--lane-m); } .qd-pl-row.lane-b { border-inline-start-color: var(--lane-b); } /* v621 — من الثيم */ .qd-pl-row > b { font-size: 10.5px; color: var(--text-muted); width: 18px; text-align: center; } .qd-pl-t { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qd-pl-lane { display: inline-flex; flex-shrink: 0; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--surface); } .qd-ln { --lc: var(--lane-g); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; font: inherit; transition: background .12s, color .12s; } .qd-ln + .qd-ln { border-inline-start: 1px solid var(--border); } .qd-ln.m { --lc: var(--lane-m); } .qd-ln.b { --lc: var(--lane-b); } /* v621 — ألوان الأقسام من الثيم */ .qd-ln.on { color: var(--lc); background: color-mix(in srgb, var(--lc) 18%, transparent); } .qd-ln:active { transform: scale(.965); } .qd-need { font-size: 11px; color: var(--text-muted); flex: 1 1 auto; text-align: start; } .qd-need.on { color: color-mix(in srgb, var(--tf-warn, #e8a33d) 75%, var(--text)); } .qd-foot .btn-submit { display: inline-flex; align-items: center; gap: 7px; } .qd-foot .btn-submit.blocked, .qd-foot .btn-submit[disabled] { opacity: .45; cursor: not-allowed; } @media (max-width: 720px) { .qd-row3 { grid-template-columns: 1fr 1fr; } .qd-row3 .field.wide { grid-column: 1 / -1; } .qd-ln { min-width: 44px; min-height: 44px; } } .qd-chip:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); color: var(--text); } .qd-chip:active { transform: scale(.965); } .qd-chip.on { color: var(--text); border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); background: color-mix(in srgb, var(--accent) 12%, transparent); } .qd-pkg { border: 1px dashed color-mix(in srgb, var(--lane-m) 40%, var(--border)); border-radius: 12px; padding: 10px 12px; background: color-mix(in srgb, var(--lane-m) 5%, transparent); } /* v621 — لون المونتاج من الثيم */ .qd-pkg > b { display: block; font-size: 12px; margin-bottom: 8px; color: var(--text); } .qd-pkg-g { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .qd-pkg-g input, .qd-pkg-g select { width: 100%; box-sizing: border-box; font: inherit; font-size: 12.5px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); } .qd-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .qd-foot .btn-submit { margin-inline-start: auto; width: auto; } @media (max-width: 520px) { .qd-row2, .qd-pkg-g { grid-template-columns: 1fr; } .qd-chip { min-height: 44px; flex: 1 1 auto; } } /* ── m11: request journey strip ── */ .request-journey { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 16px 8px; margin-bottom: 16px; background: var(--surface2); border-radius: 14px; } .rj-stage { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; } .rj-dot { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; background: var(--surface); border: 2px solid var(--border); transition: all .3s; } .rj-label { font-size: 11px; font-weight: 700; color: var(--text-muted); } .rj-line { flex: 1; height: 3px; min-width: 18px; max-width: 60px; background: var(--border); border-radius: 2px; } .rj-line-done { background: #2ecc71; } .rj-done .rj-dot { background: color-mix(in srgb, #2ecc71 18%, var(--surface)); border-color: #2ecc71; } .rj-done .rj-label { color: var(--success); } .rj-current .rj-dot { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); border-color: var(--accent); animation: rjPulse 1.8s ease-in-out infinite; } .rj-current .rj-label { color: var(--accent-fg); font-weight: 800; } @keyframes rjPulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; } } .sched-cell { font-weight: 700; border: 1px solid var(--border); transition: all .12s; } .sched-cell.editable { cursor: pointer; } .sched-cell.editable:hover { filter: brightness(1.15); box-shadow: inset 0 0 0 2px var(--accent); } .sched-cell.sched-emg { position: relative; } .sched-cell.sched-emg::after { content: '⚡'; position: absolute; top: 1px; inset-inline-end: 3px; font-size: 9px; } .sched-mgr-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface2); font-size: 14px; cursor: pointer; opacity: .4; transition: all .15s; } .sched-mgr-btn.on { opacity: 1; background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: var(--accent); } .sched-mgr-btn:hover { opacity: 1; } /* draft autosave banner */ .draft-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: var(--radius); padding: 12px 18px; margin-bottom: 16px; font-size: 14px; font-weight: 600; } .draft-btn { padding: 7px 16px; border-radius: 8px; border: none; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .draft-btn.restore { background: var(--accent); color: var(--accent-ink, #0a0e1a); } .draft-btn.discard { background: var(--surface2); color: var(--text-muted); border: 1px solid var(--border); } #draft-indicator { font-size: 11px; color: var(--text-muted); opacity: 0.5; transition: opacity .3s; } .sched-add-shift { padding: 6px 14px; border-radius: 8px; border: 1px dashed var(--accent); background: transparent; color: var(--accent-fg); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } .sched-add-shift:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } /* emoji picker for custom shifts */ .emoji-picker { display: flex; flex-wrap: wrap; gap: 6px; } .emoji-opt { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface2); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .12s; } .emoji-opt:hover { border-color: var(--accent); } .emoji-opt.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 20%, transparent); transform: scale(1.05); } /* v552 — منتقي الأيقونات الخطّية لأنواع الجرافيك */ .ico-opt { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .ico-opt:hover { border-color: var(--accent); } .ico-opt.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-fg); } .ico-opt:active { transform: scale(.965); } .type-icon-btn svg, .type-row-ico svg { display: block; } .card-title > i[data-ico] { display: inline-flex; vertical-align: -3px; margin-inline-end: 4px; } .type-row-ico { display: inline-flex; align-items: center; justify-content: center; width: 28px; color: var(--text); } .type-icon-btn { width: 48px; height: 44px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2); font-size: 20px; cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--text); } .type-icon-btn:hover { border-color: var(--accent); } #type-emoji-picker { flex-wrap: wrap; gap: 6px; } /* shift picker popup */ .shift-picker { position: fixed; z-index: 9999; width: 240px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,.45); padding: 12px; animation: shiftpop .14s ease-out; } .shift-picker-backdrop { position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fadein .15s ease-out; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } .shift-picker.centered { top: 50%; left: 50%; transform: translate(-50%,-50%); } @keyframes shiftpop { from { opacity: 0; transform: scale(.94) translateY(-4px); } to { opacity: 1; } } .shift-picker.centered { animation: none; } .shift-picker-title { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 10px; text-align: center; } .shift-picker-opts { display: flex; flex-direction: column; gap: 6px; } .shift-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface2); cursor: pointer; font-family: inherit; transition: all .12s; text-align: start; } .shift-opt:hover { filter: brightness(1.15); transform: translateX(-2px); } .shift-opt-emoji { font-size: 18px; } .shift-opt-name { font-size: 14px; font-weight: 700; flex: 1; } .shift-opt-time { font-size: 10px; color: var(--text-muted); } .shift-opt-clear { justify-content: center; color: var(--danger); font-weight: 700; font-size: 13px; border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); } /* richer glass look for the shift picker when a glass theme is active */ body[data-theme="glass"] .shift-picker { background: rgba(20, 28, 48, 0.55); border-color: rgba(255,255,255,0.14); box-shadow: 0 20px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.18); } body[data-theme="glasslight"] .shift-picker { background: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.85); box-shadow: 0 20px 60px rgba(80,110,170,0.22), inset 0 1px 0 rgba(255,255,255,0.9); } /* AI plan preview */ .ai-plan-row { margin-bottom: 8px; font-size: 13.5px; line-height: 1.6; } .ai-plan-row b { color: var(--accent-fg); } .ai-plan-row ul { margin: 4px 0 0; padding-inline-start: 20px; } .ai-plan-row li { font-size: 13px; margin-bottom: 2px; } /* AI report plan (color-coded) */ .plan-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); margin-bottom: 14px; } .plan-legend span { display: inline-flex; align-items: center; gap: 5px; } .plan-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } .plan-segs { display: flex; flex-direction: column; gap: 14px; } .plan-seg { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; background: var(--surface2); } .plan-seg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .plan-seg-num { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-ink, #0a0e1a); font-weight: 800; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .plan-type { background: color-mix(in srgb, #e8a020 22%, transparent); color: var(--accent-fg); font-weight: 800; font-size: 12px; padding: 3px 10px; border-radius: 10px; } .plan-original { font-size: 13px; line-height: 1.7; color: var(--text-muted); background: color-mix(in srgb, #8a8a9a 12%, transparent); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; white-space: pre-wrap; } .plan-points-wrap { display: flex; flex-direction: column; gap: 6px; } .plan-point { font-size: 13.5px; font-weight: 600; color: var(--text); background: color-mix(in srgb, #2ecc71 15%, transparent); border-inline-start: 3px solid #2ecc71; border-radius: 6px; padding: 7px 11px; } .plan-note { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--text); background: color-mix(in srgb, #4a90e2 15%, transparent); border-inline-start: 3px solid #4a90e2; border-radius: 6px; padding: 8px 11px; line-height: 1.6; } /* ══════════════════════════════════════════════════════════ TakeFlow v12 — "Breathing" New Request flow ══════════════════════════════════════════════════════════ */ .nr-header { text-align: center; } .nr-logo { max-width: 110px; height: auto; margin-bottom: 12px; } .nr-card { position: relative; } /* ── v14 two-column request layout ── */ .nr-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(330px, 1fr); gap: 18px; align-items: start; } /* v416 — «نوسّع الحر ونخلي اليمين أوسع» حرفياً: العمود الرئيسي (يمين الـRTL) 2fr */ .nr-col-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; } .nr-col-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--topbar-h, 56px) + 14px); } /* v584 — كانت top: 16px فتنزلق تحت الشريط العلويّ الثابت */ .nr-col-main > .nr-card, .nr-col-main > .ai-box, .nr-col-side > .nr-card { margin: 0; } /* the report card fills the tall left column and breathes */ .nr-col-main .nr-content-card { display: flex; flex-direction: column; } .nr-col-main .nr-report-area { min-height: 320px; flex: 1; } /* condense side-panel step spacing */ .nr-col-side .nr-step-head { font-size: 15px; } .nr-col-side .nr-step-sub { margin-bottom: 10px; } /* MOBILE / narrow: stack — report FIRST, controls after (most familiar pattern) */ @media (max-width: 900px) { .nr-grid { grid-template-columns: 1fr; } .nr-col-side { position: static; } .nr-col-main .nr-report-area { min-height: 200px; } } .nr-step-head { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 4px; } .nr-step-dot { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #000)); color: var(--accent-ink, #0a0e1a); font-weight: 900; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); } .nr-step-sub { font-size: 12px; color: var(--text-muted); margin: 0 0 14px 36px; } html[dir="rtl"] .nr-step-sub { margin: 0 36px 14px 0; } .nr-select { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: inherit; font-size: 14px; padding: 11px 12px; width: 100%; } .nr-bulletin-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; } .nr-airtime { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: inherit; font-size: 14px; padding: 10px 12px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } /* content-first report area */ .nr-content-card { border-color: color-mix(in srgb, var(--accent) 25%, var(--border)); } .nr-report-area { width: 100%; background: var(--surface2); border: 1.5px solid var(--border); border-radius: 12px; color: var(--text); font-family: inherit; font-size: 15px; line-height: 1.8; padding: 16px; resize: vertical; min-height: 180px; transition: border-color .2s, box-shadow .2s; } .nr-report-area:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); } /* auto title — slides in */ .nr-title-wrap { margin-top: 14px; animation: nrSlideDown .28s ease; } .nr-title-label { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-weight: 700; font-size: 13px; margin-bottom: 6px; } .nr-title-hint { font-size: 11px; color: var(--text-muted); font-weight: 500; } .nr-title-input { width: 100%; background: color-mix(in srgb, var(--accent) 8%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 10px; color: var(--text); font-family: inherit; font-size: 15px; font-weight: 700; padding: 12px 14px; } /* v109: agency-footage block — the montage-only counterpart of .nr-type-block */ .nr-agency-block { margin-top: 14px; animation: nrSlideDown .28s ease; } .nr-agency-hint { font-size: 12px; color: var(--text-muted); margin: -4px 0 10px; } .nr-agency-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 600px) { .nr-agency-grid { grid-template-columns: 1fr; } } .nr-title-input:focus { outline: none; border-color: var(--accent); } /* v107: title + suggest button on one row. NOTE: .btn-submit carries width:100%, which ate the whole row and squeezed the input to nothing — so the button MUST be given width:auto here, and the input needs flex-basis 0 (not auto) to actually claim the leftover space. */ .nr-title-row { display: flex; gap: 8px; align-items: stretch; } .nr-title-row .nr-title-input { flex: 1 1 0; min-width: 0; width: auto; } .nr-title-row .nr-title-sugg { flex: 0 0 auto; width: auto; padding: 0 16px; font-size: 13px; font-weight: 800; white-space: nowrap; border-radius: 10px; } @media (max-width: 560px) { .nr-title-row { flex-wrap: wrap; } .nr-title-row .nr-title-input { flex: 1 1 100%; } .nr-title-row .nr-title-sugg { flex: 1 1 100%; padding: 10px 16px; } } /* route cards */ .nr-route-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } /* v137: صُغّرت — كانت مربعات كبيرة عالفاضي. صارت صف أفقي مدمج: أيقونة + اسم جنب بعض، والوصف تحت صغير. نص المساحة، ونفس الوضوح. */ .nr-route-card { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; background: var(--surface2); border: 2px solid var(--border); border-radius: 11px; padding: 11px 10px; cursor: pointer; font-family: inherit; transition: all .18s; text-align: center; flex-wrap: wrap; } .nr-route-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); transform: translateY(-1px); } .nr-route-card.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface2)); box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 22%, transparent); } .nr-route-icon { font-size: 19px; line-height: 1; } .nr-route-name { font-weight: 800; font-size: 13px; color: var(--text); } .nr-route-desc { font-size: 10px; color: var(--text-muted); flex-basis: 100%; } /* v137: أزرار نص التقرير — أساسي بارز فوق، ثانوية صغيرة مدمجة تحته */ .nr-report-actions { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; } .nr-ra-primary { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; } .nr-ra-primary .btn-submit { width: auto; padding: 11px 20px; } .nr-ra-provider { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 12px; padding: 10px 8px; } .nr-ra-secondary { display: flex; gap: 7px; flex-wrap: wrap; } .nr-ra-btn { padding: 7px 13px; border-radius: 8px; background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s; } .nr-ra-btn:hover { border-color: var(--accent); color: var(--text); } .nr-type-block { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border); } .nr-sub-label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 10px; } /* adaptive fields slide-in */ /* ═══ v184 — الموجة ٢: منتقي الأنواع + المحطات المطوية ═══ */ .nr-newstype { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border); } .nr-newstype:empty { display: none; } .nt-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .nt-title { font-size: 14px; font-weight: 900; color: var(--accent-fg); } .nt-hint { font-size: 11px; color: var(--text-muted); } .nt-grid { display: grid; gap: 9px; margin-bottom: 10px; } .nt-grid-big { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); } .nt-grid-mid, .nt-grid-rare { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); } .nt-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: start; background: var(--surface2); border: 1.5px solid var(--border); border-radius: 15px; padding: 13px; cursor: pointer; font-family: inherit; color: var(--text); transition: all .16s; position: relative; } .nt-card .nt-ic { font-size: 20px; transition: transform .22s cubic-bezier(.34,1.56,.64,1); } .nt-card:hover { border-color: var(--accent); transform: translateY(-2px); } .nt-card:hover .nt-ic { transform: scale(1.16) rotate(-6deg); } .nt-card.mid { flex-direction: row; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; } .nt-card.mid .nt-ic { font-size: 16px; } .nt-name { font-size: 13px; font-weight: 800; } .nt-card.mid .nt-name { font-size: 12px; } .nt-desc { font-size: 10.5px; color: var(--text-muted); line-height: 1.6; } .nt-card.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface2)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); } .nt-card.on::after { content: "✓"; position: absolute; top: 8px; inset-inline-end: 10px; font-size: 12px; font-weight: 900; color: var(--accent-fg); } .nt-more { background: none; border: none; color: var(--text-muted); font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; padding: 5px 2px; display: inline-flex; align-items: center; gap: 5px; } .nt-more:hover { color: var(--accent-fg); } .nt-more.open { color: var(--accent-fg); } .nt-more.open::first-letter { display: none; } .nt-fields-inner { animation: nrSlideDown .3s ease; margin-top: 14px; padding: 14px; background: color-mix(in srgb, var(--accent) 5%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border)); border-radius: 15px; } .nt-fields-title { font-size: 13px; font-weight: 900; color: var(--accent-fg); margin-bottom: 11px; } /* المحطات المطوية */ .nr-step-toggle { cursor: pointer; user-select: none; } .nr-step-sum { font-size: 11.5px; font-weight: 700; color: var(--text-muted); margin-inline-start: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46%; } .nr-step-chev { font-size: 12px; color: var(--text-muted); transition: transform .22s; flex-shrink: 0; } .nr-card.step-folded .nr-step-chev { transform: rotate(-90deg); } [dir="rtl"] .nr-card.step-folded .nr-step-chev { transform: rotate(90deg); } .nr-card.step-folded > *:not(.nr-step-head) { display: none !important; } .nr-card.step-folded { padding-bottom: 14px; } .nr-card:not(.step-folded) .nr-step-sum { display: none; } /* v187 — شريط الطي القديم انشال: الأزرار انتقلت لشريط أدوات الطاولة */ /* ═══ v186 — طاولة التقسيم الحرة ═══ */ /* v186 — «ابدأ بنوع» */ .ts-modal { max-width: 620px; max-height: 92vh; } .ts-modal .mlc-body { overflow-y: auto; max-height: 78vh; } .ts-tier { font-size: 11px; font-weight: 900; color: var(--accent-fg); margin: 12px 0 6px; } .ts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: 7px; } .ts-card { display: flex; align-items: center; gap: 7px; background: var(--surface2); border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 12px; cursor: pointer; font-family: inherit; color: var(--text); transition: all .14s; text-align: start; } .ts-card:hover { border-color: var(--accent); transform: translateY(-1px); } .ts-card.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--surface2)); } .ts-ic { font-size: 16px; } .ts-nm { font-size: 12px; font-weight: 800; } .ts-foot { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--border); } .ts-sum { font-size: 12.5px; font-weight: 700; color: var(--text-muted); margin-bottom: 10px; line-height: 1.8; } .ts-sum b { color: var(--text); } .ts-actions { display: flex; gap: 8px; flex-wrap: wrap; } .ts-actions .btn-submit { flex: 1; min-width: 150px; padding: 11px; } .lb-door.lb-bytype:hover { border-color: #7b8cff; } /* ═══ v187 — الشريط اللاصق ═══ */ .nr-sticky { position: sticky; top: 0; z-index: 90; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 10px 14px; margin: 0 0 14px; border-radius: 0 0 16px 16px; background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(14px); border: 1px solid var(--border); border-top: none; box-shadow: 0 6px 22px color-mix(in srgb, var(--bg) 40%, transparent); } .nr-sticky.ready { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); } .nrs-chip { font-size: 11.5px; font-weight: 800; background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: all .14s; white-space: nowrap; max-width: 210px; overflow: hidden; text-overflow: ellipsis; } .nrs-chip:hover { border-color: var(--accent); color: var(--accent-fg); } .nrs-chip.nrs-cards { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); color: var(--accent-fg); } .nrs-prog { flex: 1; min-width: 40px; height: 4px; background: var(--surface2); border-radius: 999px; overflow: hidden; } .nrs-prog i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--success)); transition: width .3s; } .nrs-acts { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; } .nrs-ico, .nrs-urgent { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2); cursor: pointer; font-size: 14px; line-height: 1; transition: all .14s; } .nrs-ico:hover { border-color: var(--accent); } .nrs-urgent { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); color: var(--danger); } .nrs-urgent:hover { background: color-mix(in srgb, var(--danger) 14%, var(--surface2)); transform: scale(1.06); } .nrs-send { background: var(--accent); border: none; border-radius: 11px; color: var(--accent-ink, #0a0e1a); font-family: inherit; font-size: 12.5px; font-weight: 900; padding: 8px 16px; cursor: pointer; transition: all .15s; } .nrs-send:hover { filter: brightness(1.08); transform: translateY(-1px); } .nrs-flash { animation: nrsFlash 1s ease; } @keyframes nrsFlash { 0%,100% { box-shadow: none; } 35% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 42%, transparent); } } @media (max-width: 640px) { .nrs-chip { max-width: 120px; font-size: 10.5px; padding: 4px 9px; } .nrs-prog { display: none; } } /* ═══ v187 — شريط الرَّن-داون ═══ */ .nr-ribbon { margin-bottom: 12px; } .nr-ribbon:empty { display: none; } .rb-head { font-size: 11.5px; font-weight: 900; color: var(--text-muted); margin-bottom: 7px; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; } .rb-hint { font-size: 10px; font-weight: 700; opacity: .75; } .rb-track { display: flex; gap: 3px; height: 46px; border-radius: 12px; overflow: hidden; background: var(--surface2); border: 1px solid var(--border); padding: 3px; } .rb-block { position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 34px; border-radius: 9px; cursor: pointer; overflow: hidden; background: color-mix(in srgb, var(--c) 26%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--c) 62%, transparent); transition: all .16s; } .rb-block:hover { background: color-mix(in srgb, var(--c) 42%, var(--surface)); transform: translateY(-2px); } .rb-n { position: absolute; top: 2px; inset-inline-start: 5px; font-size: 8.5px; font-weight: 900; opacity: .65; } .rb-ic { font-size: 14px; } .rb-t { font-size: 10px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rb-block.pv-dragging { opacity: .4; } /* ═══ v187 — شريط التحديد → بطاقة ═══ */ .sel-bar { position: fixed; z-index: 13800; display: flex; align-items: center; gap: 5px; background: var(--surface); border: 1.5px solid var(--accent); border-radius: 999px; padding: 5px 9px; box-shadow: 0 8px 26px rgba(0,0,0,.24); opacity: 0; visibility: hidden; transform: translateY(6px) scale(.96); transition: opacity .16s, transform .16s, visibility .16s; } .sel-bar.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .sel-lbl { font-size: 10px; font-weight: 800; color: var(--text-muted); padding-inline-end: 4px; } .sel-btn { background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-family: inherit; font-size: 11.5px; font-weight: 800; padding: 5px 11px; cursor: pointer; white-space: nowrap; transition: all .13s; } .sel-btn:hover { border-color: var(--accent); color: var(--accent-fg); transform: translateY(-1px); } .sel-btn.plain { border-style: dashed; } /* ═══ v187 — المقبض العائم ═══ */ .pv-menu-btn { width: 28px; height: 26px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted); cursor: pointer; font-size: 15px; line-height: 1; letter-spacing: 1px; transition: all .13s; } .pv-menu-btn:hover { border-color: var(--accent); color: var(--accent-fg); } .pvp-item.danger:hover { border-color: var(--danger); color: var(--danger); } /* ═══ v187 — عين المصمم ═══ */ .dsg-modal { max-width: 720px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; } .dsg-modal .mlc-body { overflow-y: auto; } .dsg-meta { font-size: 12.5px; font-weight: 700; color: var(--text-muted); padding-bottom: 10px; border-bottom: 1px dashed var(--border); margin-bottom: 12px; } .dsg-warns { background: color-mix(in srgb, #e8a020 9%, var(--surface2)); border: 1.5px solid color-mix(in srgb, #e8a020 40%, var(--border)); border-radius: 13px; padding: 11px 14px; margin-bottom: 14px; } .dsg-w-head { font-size: 12.5px; font-weight: 900; color: #b8791a; margin-bottom: 6px; } .dsg-w { font-size: 11.5px; font-weight: 700; line-height: 1.9; color: var(--text); } .dsg-ok { background: color-mix(in srgb, #2ecc71 10%, var(--surface2)); border: 1.5px solid color-mix(in srgb, #2ecc71 38%, var(--border)); border-radius: 13px; padding: 12px 14px; margin-bottom: 14px; font-size: 13px; font-weight: 800; color: #23a55a; } .dsg-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-bottom: 9px; } .dsg-card.empty { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); } .dsg-c-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .dsg-seq { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-ink, #0a0e1a); font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; } .dsg-tag { font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 2px 9px; border: 1px solid var(--border); background: var(--surface); } .dsg-tag.nt { border-color: color-mix(in srgb, #7b8cff 42%, var(--border)); color: #7b8cff; } .dsg-tag.gt { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); color: var(--accent-fg); } .dsg-body { font-family: 'IBM Plex Sans Arabic','Cairo',sans-serif; font-size: 12.5px; line-height: 1.9; white-space: pre-wrap; margin: 0; color: var(--text); } .dsg-extra { font-size: 11px; font-weight: 800; color: #b8791a; margin-top: 7px; } /* ═══ v187 — أوراق LVO المتعددة + زر التأكيد ═══ */ .hl-pages { display: flex; gap: 4px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px dashed var(--border); } .hl-pg { position: relative; min-width: 30px; height: 28px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-family: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer; transition: all .13s; padding: 0 8px; } .hl-pg:hover { border-color: var(--accent); } .hl-pg.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface2)); color: var(--accent-fg); } .hl-pg b { position: absolute; top: -5px; inset-inline-end: -4px; background: var(--accent); color: var(--accent-ink, #0a0e1a); font-size: 8.5px; border-radius: 999px; padding: 0 4px; } .hl-pg.add { border-style: dashed; } .hl-pg.del:hover { border-color: var(--danger); color: var(--danger); } .mc-ack-btn { width: 100%; margin-bottom: 8px; background: linear-gradient(135deg, #9c5ad0, #7b4ab0); border: none; border-radius: 11px; color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 900; padding: 10px; cursor: pointer; animation: editorGlowPulse 1.8s ease-in-out infinite; } .mc-ack-btn:hover { filter: brightness(1.1); } /* v188 — رقاقات النوع بنافذة الإضافة و«طلب من رسالة» */ .ac-nt-row { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-bottom: 9px; } .ac-nt-lbl { font-size: 11px; font-weight: 800; color: var(--text-muted); } .ac-nt-chip { background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-family: inherit; font-size: 11px; font-weight: 800; padding: 4px 10px; cursor: pointer; transition: all .13s; } .ac-nt-chip:hover { border-color: #7b8cff; color: #7b8cff; } .ac-nt-chip.on { border-color: #7b8cff; color: #7b8cff; background: color-mix(in srgb, #7b8cff 13%, var(--surface2)); } .ac-nt-fields:empty { display: none; } .ac-nt-block { margin-top: 10px; padding: 11px 13px; border-radius: 12px; background: color-mix(in srgb, #7b8cff 6%, var(--surface2)); border: 1px solid color-mix(in srgb, #7b8cff 26%, var(--border)); } .ac-nt-title { font-size: 12px; font-weight: 900; color: #7b8cff; margin-bottom: 8px; } .ac-f { margin-bottom: 7px; } .ac-f label { display: block; font-size: 11px; font-weight: 800; color: var(--text-muted); margin-bottom: 3px; } .ac-f input { width: 100%; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-family: inherit; font-size: 12.5px; padding: 7px 10px; } .m2r-prio, .m2r-nt { background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-family: inherit; font-size: 11.5px; font-weight: 800; padding: 6px 12px; cursor: pointer; transition: all .13s; } .m2r-prio.active, .m2r-nt.active { border-color: var(--accent); color: var(--accent-fg); background: color-mix(in srgb, var(--accent) 13%, var(--surface2)); } .m2r-nts { display: flex; gap: 5px; flex-wrap: wrap; } /* v188 — زر مسؤول الدوام يبيّن معلّم بوضوح */ .member-icon-btn.tc-sm.on { border-color: #20b2aa !important; color: #20b2aa !important; background: color-mix(in srgb, #20b2aa 18%, var(--surface2)) !important; box-shadow: 0 0 0 2px color-mix(in srgb, #20b2aa 24%, transparent); } /* v188 — منتقي الشهر/السنة كان هنا؛ أُلغي مع منتقي v182 (v545 — تقويمٌ واحد #tf-datepick) */ /* ═══════════ v189 — قسم البريد 📧 ═══════════ */ /* v190 — البريد صار أوسع: لائحة أعرض شوي، وخط القراءة أوضح. */ /* v194 — البريد صار أوسع (بلا سقف عرض) واللائحة أعرض للعناوين الطويلة */ /* ═══ v199 · مرحلة ١ — الأساس البصري ═══ نظام ألوان دلالي واحد: كل معنى إلو لون ثابت بكل قسم البريد — ما في لون عشوائي جديد مع كل ميزة بعد اليوم. والتباعد عالسلّم 8/12/16/24. */ /* v633 — ألوان البريد على الجذر: ١٨ نافذةً للبريد (القوالب · الكتابة · الأوامر…) تُلحق بـbody خارج .mail-shell، فكانت var(--m-work) فارغة — أزرارٌ شفّافة بنصٍّ أبيض على خلفيّةٍ فاتحة («القوالب خربانة والنصّ أبيض») */ :root { --m-work: #7b8cff; /* مربوط بالعمل (طلب/بطاقة/دوام) */ --m-ok: #2ecc71; /* موافقة / جاهز / انقرأت */ --m-wait: #e8a020; /* بانتظار / مجدول / مميّز */ --m-urgent: var(--danger); } /* عاجل / خطر */ .mail-shell { display: grid; grid-template-columns: 190px minmax(320px, 430px) minmax(0,1fr); gap: 12px; /* v206 — لستة أعرض */ height: calc(100vh - 150px - var(--tf-chrome-h, 0px)); min-height: 620px; } @media (min-width: 1600px) { .mail-shell { grid-template-columns: 210px 460px minmax(0,1fr); } } /* v206 */ /* أيقونات TakeFlow — خط واحد، محاذاة نصية مضبوطة */ .tfi { vertical-align: -2px; flex-shrink: 0; } .mf-ic .tfi, .mrt-btn .tfi, .mr-back .tfi { vertical-align: middle; } .mail-folders { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 12px; overflow-y: auto; } .mail-compose { display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 8px; background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #ff8c42)); border: none; border-radius: 14px; color: var(--accent-ink, #0a0e1a); font-family: inherit; font-size: 13.5px; font-weight: 900; padding: 12px; cursor: pointer; transition: all .16s; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 32%, transparent); } .mail-compose:hover { transform: translateY(-2px); box-shadow: 0 7px 22px color-mix(in srgb, var(--accent) 42%, transparent); } .mf-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: start; background: none; border: none; border-radius: 11px; color: var(--text-muted); font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 12px; cursor: pointer; transition: all .13s; } .mf-item:hover { background: var(--surface2); color: var(--text); } .mf-item.on { background: color-mix(in srgb, var(--accent) 14%, var(--surface2)); color: var(--accent-fg); font-weight: 900; } .mf-ic { display: inline-flex; align-items: center; flex-shrink: 0; } .mf-n { flex: 1; } .mf-c { font-size: 10px; font-weight: 900; background: var(--surface2); border-radius: 999px; padding: 1px 7px; } .mf-c.hot { background: var(--accent); color: var(--accent-ink, #0a0e1a); } .mf-sep { height: 1px; background: var(--border); margin: 8px 2px; } .mail-list { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; } .ml-search { display: flex; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid var(--border); position: relative; } .ml-search-ic { position: absolute; inset-inline-start: 24px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; display: inline-flex; } .ml-search input { flex: 1; min-width: 0; background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-family: inherit; font-size: 12px; padding: 7px 12px; padding-inline-start: 32px; } .ml-search input:focus { border-color: var(--accent); outline: none; } .ml-count { font-size: 10.5px; font-weight: 800; color: var(--text-muted); } .ml-rows { flex: 1; overflow-y: auto; } .ml-row { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; border-inline-start: 3px solid var(--mc, transparent); } .ml-row:hover { background: var(--surface2); } .ml-row.on { background: color-mix(in srgb, var(--accent) 10%, var(--surface2)); box-shadow: inset 3px 0 0 var(--accent); } .ml-row.unread .ml-who, .ml-row.unread .ml-subj { font-weight: 900; color: var(--text); } .ml-row.unread .ml-subj::before { content: "●"; color: var(--accent-fg); font-size: 9px; margin-inline-end: 5px; vertical-align: 2px; } .ml-star { color: var(--text-muted); flex-shrink: 0; line-height: 1.4; display: inline-flex; padding-top: 2px; } .ml-star:hover { color: var(--m-wait); } .ml-star.on { color: var(--m-wait); } .ml-star.on .tfi polygon { fill: currentColor; } .ml-mid { flex: 1; min-width: 0; } .ml-top { display: flex; justify-content: space-between; gap: 8px; } /* ═══ v311 — وضوح البريد: مين بعت وشو ما قريتو ═══ الشكوى: الموظف ضاع وهو يفتّش عن رسالة. الصف كلّو كان بنفس الوزن. */ .ml-av { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 12.5px; font-weight: 900; color: var(--mc, var(--accent)); background: color-mix(in srgb, var(--mc, var(--accent)) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--mc, var(--accent)) 32%, transparent); } .ml-row.unread .ml-av { color: #fff; background: var(--mc, var(--accent)); border-color: var(--mc, var(--accent)); } .ml-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } /* الشريط الجانبي الملوّن للرسائل غير المقروءة — يشدّ العين */ .ml-row.unread { border-inline-start: 3px solid var(--mc, var(--accent)); background: color-mix(in srgb, var(--mc, var(--accent)) 5%, transparent); } .ml-row.unread .ml-subj { color: var(--text); } .ml-who { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ml-when { font-size: 10px; color: var(--text-muted); flex-shrink: 0; } .ml-subj { font-size: 12.5px; font-weight: 700; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ml-hi { margin-inline-end: 3px; } .ml-prev { font-size: 11px; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ml-link, .ml-att { display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 800; border-radius: 999px; padding: 1px 7px; margin-top: 5px; margin-inline-end: 4px; background: color-mix(in srgb, var(--m-work) 13%, transparent); color: var(--m-work); } .ml-att { background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent-fg); } .ml-empty, .mr-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; min-height: 200px; font-size: 12.5px; color: var(--text-muted); text-align: center; } .mail-read { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; } /* v199 — كانت هالقاعدة مكرّرة مرتين بالملف وتتضارب بصمت — توحّدت هون */ .mr-head { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); } .mr-subj { flex: 1; font-size: 17px; font-weight: 900; line-height: 1.6; border-inline-start: 4px solid var(--mc, var(--accent)); padding-inline-start: 11px; } .mr-back { display: none; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); cursor: pointer; flex-shrink: 0; } [dir="rtl"] .mr-back .tfi, [dir="rtl"] .mr-qr-send .tfi { transform: scaleX(-1); } .mr-acts { display: flex; gap: 4px; flex-shrink: 0; } .mr-btn { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted); cursor: pointer; font-size: 13px; transition: all .13s; } .mr-btn:hover { border-color: var(--accent); color: var(--accent-fg); } .mr-btn.danger:hover { border-color: var(--m-urgent); color: var(--m-urgent); } .mr-thread { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; } .mr-msg { background: var(--surface2); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; } .mr-msg.mine { background: color-mix(in srgb, var(--accent) 7%, var(--surface2)); border-color: color-mix(in srgb, var(--accent) 26%, var(--border)); } .mr-m-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; padding-bottom: 7px; border-bottom: 1px dashed var(--border); } .mr-from { font-size: 12.5px; font-weight: 900; } .mr-to { font-size: 10.5px; color: var(--text-muted); } .mr-when { font-size: 10px; color: var(--text-muted); margin-inline-start: auto; } .mr-b { font-family: 'IBM Plex Sans Arabic','Cairo',sans-serif; font-size: 14.5px; line-height: 2.05; white-space: pre-wrap; color: var(--text); } .mr-atts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .mr-att-img { max-width: 160px; max-height: 120px; border-radius: 10px; border: 1px solid var(--border); } .mr-att-f { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; text-decoration: none; color: var(--text); } .mr-att-f:hover { border-color: var(--accent); color: var(--accent-fg); } .mr-seen { font-size: 10px; color: var(--m-ok); margin-top: 7px; text-align: end; } .mr-foot { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--border); } .mr-foot .btn-submit { padding: 8px 15px; font-size: 12.5px; } /* 🆕 البطاقة الحيّة للشي المربوط */ .mr-link { margin: 12px 16px 0; background: color-mix(in srgb, var(--m-work) 8%, var(--surface2)); border: 1.5px solid color-mix(in srgb, var(--m-work) 32%, var(--border)); border-radius: 15px; padding: 12px 16px; } .mr-l-head { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; } .mr-l-tag { font-size: 9.5px; font-weight: 900; background: var(--m-work); color: #fff; border-radius: 999px; padding: 1px 8px; margin-inline-start: auto; } .mr-l-line { font-size: 11.5px; color: var(--text); line-height: 1.9; } .mr-l-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; } .mr-l-go { background: var(--m-work); border: none; border-radius: 10px; color: #fff; font-family: inherit; font-size: 11.5px; font-weight: 800; padding: 7px 13px; cursor: pointer; margin-top: 9px; } .mr-l-btns .mr-l-go { margin-top: 0; } .mr-l-go:hover { filter: brightness(1.1); } .mr-l-go.alt { background: var(--m-ok); color: #0a2818; } /* ═══ v199 · مرحلة ٢ — نبض الغرفة 🫀 ═══ شريط حي فوق الخيط المربوط بطلب: نقطة نابضة + الحالة + عدّاد البث. المزاج بيغيّر اللون: هادي → ذهبي (أقل من ٩٠ د) → أحمر (أقل من ٣٠ د). */ .m-pulse { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 16px 0; padding: 8px 14px; border-radius: 12px; font-size: 11.5px; --pc: var(--text-muted); background: color-mix(in srgb, var(--pc) 7%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--pc) 26%, var(--border)); } .m-pulse.p-calm { --pc: var(--m-ok); } .m-pulse.p-warm { --pc: var(--m-wait); } .m-pulse.p-hot { --pc: var(--m-urgent); } .m-pulse.p-past { --pc: var(--text-muted); } .m-pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pc); flex-shrink: 0; animation: mPulseBeat 2s ease-in-out infinite; } .m-pulse.p-hot .m-pulse-dot { animation-duration: .85s; } @keyframes mPulseBeat { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pc) 45%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } } .m-pulse-st { font-weight: 900; } .m-pulse-st.st-ok { color: var(--m-ok); } .m-pulse-st.st-busy { color: var(--m-work); } .m-pulse-st.st-wait { color: var(--m-wait); } .m-pulse-who { color: var(--text-muted); font-weight: 700; } .m-pulse-cd { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto; font-weight: 900; color: var(--pc); background: color-mix(in srgb, var(--pc) 13%, transparent); border-radius: 999px; padding: 3px 11px; } .m-pulse.p-hot .m-pulse-cd { animation: mPulseUrgent 1.1s ease-in-out infinite; } @keyframes mPulseUrgent { 0%,100% { opacity: 1; } 50% { opacity: .55; } } /* النبض المصغّر بلائحة الرسايل */ .ml-pulse { display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 900; border-radius: 999px; padding: 1px 8px; margin-top: 5px; margin-inline-end: 4px; --pc: var(--text-muted); background: color-mix(in srgb, var(--pc) 13%, transparent); color: var(--pc); } .ml-pulse.p-calm { --pc: var(--m-ok); } .ml-pulse.p-warm { --pc: var(--m-wait); } .ml-pulse.p-hot { --pc: var(--m-urgent); animation: mPulseUrgent 1.1s ease-in-out infinite; } .ml-pulse.p-past { --pc: var(--text-muted); } /* ═══ v199 · مرحلة ٣ — تقسيم الوارد ═══ */ .ml-splits { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; } .ml-splits::-webkit-scrollbar { display: none; } .ml-split { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; background: none; border: 1px solid transparent; border-radius: 999px; color: var(--text-muted); font-family: inherit; font-size: 11px; font-weight: 800; padding: 4px 11px; cursor: pointer; transition: all .13s; } .ml-split:hover { background: var(--surface2); color: var(--text); } .ml-split.on { background: color-mix(in srgb, var(--accent) 14%, var(--surface2)); border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent-fg); } .ml-split b { font-size: 9px; background: var(--accent); color: var(--accent-ink, #0a0e1a); border-radius: 999px; padding: 0 5px; margin-inline-start: 2px; } /* ═══ v199 · مرحلة ٤ — لوحة الأوامر ⌘K ═══ */ .ml-cmd-hint { width: auto; padding: 0 8px; } .ml-cmd-hint kbd { font-family: inherit; font-size: 9px; font-weight: 900; letter-spacing: .5px; } .mailcmd-overlay { position: fixed; inset: 0; z-index: 12500; display: none; background: color-mix(in srgb, #000 45%, transparent); backdrop-filter: blur(3px); align-items: flex-start; justify-content: center; padding-top: 14vh; } .mailcmd-overlay.open { display: flex; animation: cmdIn .16s ease; } @keyframes cmdIn { from { opacity: 0; } to { opacity: 1; } } .mailcmd { width: min(520px, 92vw); background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.5); animation: cmdPop .18s cubic-bezier(.2,.9,.3,1.15); } @keyframes cmdPop { from { transform: translateY(-10px) scale(.98); opacity: .6; } to { transform: none; opacity: 1; } } .mailcmd-in-wrap { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text-muted); } .mailcmd-in { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 14.5px; font-weight: 700; } .mailcmd-esc { font-size: 9.5px; font-weight: 900; color: var(--text-muted); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; } .mailcmd-list { max-height: 340px; overflow-y: auto; padding: 6px; } .mailcmd-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: start; background: none; border: none; border-radius: 11px; color: var(--text); font-family: inherit; font-size: 13px; font-weight: 700; padding: 10px 12px; cursor: pointer; } .mailcmd-item.sel { background: color-mix(in srgb, var(--accent) 14%, var(--surface2)); color: var(--accent-fg); } .mailcmd-ic { display: inline-flex; color: var(--text-muted); flex-shrink: 0; } .mailcmd-item.sel .mailcmd-ic { color: var(--accent-fg); } .mailcmd-n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mailcmd-k { font-family: inherit; font-size: 10px; font-weight: 900; color: var(--text-muted); border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; } .mailcmd-none { padding: 20px; text-align: center; font-size: 12.5px; color: var(--text-muted); } /* v200 — ⌨️ ورقة الاختصارات المرجعية */ .mk-sec { font-size: 11px; font-weight: 900; color: var(--accent-fg); text-transform: uppercase; letter-spacing: .5px; margin: 14px 0 6px; } .mk-sec:first-child { margin-top: 0; } .mk-row { display: flex; align-items: center; gap: 12px; padding: 7px 2px; font-size: 13px; } .mk-row + .mk-row { border-top: 1px dashed color-mix(in srgb, var(--border) 60%, transparent); } .mk-keys { display: inline-flex; gap: 4px; min-width: 86px; } .mk-keys kbd { font-family: inherit; font-size: 11px; font-weight: 900; color: var(--text); background: var(--surface2); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 7px; padding: 3px 9px; } .mk-txt { color: var(--text); font-weight: 700; } /* ═══ v199 · مرحلة ٥ — خلاصة AI ═══ */ .m-sum { display: flex; align-items: baseline; gap: 7px; margin: 12px 16px 0; padding: 10px 14px; border-radius: 12px; font-size: 12px; line-height: 1.9; color: var(--text); background: color-mix(in srgb, var(--accent) 7%, var(--surface2)); border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--border)); } .m-sum .tfi { color: var(--accent-fg); flex-shrink: 0; align-self: center; } .m-sum-ask { margin: 12px 16px 0; } .m-sum-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 999px; color: var(--accent-fg); font-family: inherit; font-size: 11.5px; font-weight: 800; padding: 6px 14px; cursor: pointer; transition: all .14s; } .m-sum-btn:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); } .m-sum-btn:disabled { opacity: .6; cursor: wait; } .mail-setup { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 380px; text-align: center; padding: 30px; } .mail-setup .ms-ic { font-size: 44px; } .mail-setup .ms-t { font-size: 16px; font-weight: 900; } .mail-setup .ms-s { font-size: 12.5px; color: var(--text-muted); line-height: 1.9; max-width: 460px; } /* نافذة الإنشاء */ .cmp-modal { max-width: 660px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; } .cmp-body { padding: 14px 16px; overflow-y: auto; flex: 1; } .cmp-field { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px solid var(--border); } .cmp-field > label { font-size: 11.5px; font-weight: 800; color: var(--text-muted); min-width: 40px; } .cmp-chips { display: flex; gap: 5px; flex-wrap: wrap; flex: 1; min-width: 0; } .cmp-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; } .cmp-chip b { cursor: pointer; opacity: .5; font-size: 10px; } .cmp-chip b:hover { opacity: 1; color: var(--danger); } .cmp-chip.link { border-color: color-mix(in srgb, #7b8cff 40%, var(--border)); color: #7b8cff; } .cmp-chip.sched { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); color: var(--accent-fg); } .cmp-none { font-size: 11px; color: var(--text-muted); } /* ═══ v194 — حقل المستلمين متل أوت-لوك: شرائح جوّا نفس الصندوق ═══ */ /* ═══════════ v196 — البريد: عمق وحيوية ═══════════ */ /* شريط الأدوات فوق (أوت-لوك) */ .mr-toolbar { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface2) 60%, transparent); } .mrt-main { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); border: none; border-radius: 10px; color: var(--accent-ink, #0a0e1a); font-family: inherit; font-size: 12.5px; font-weight: 900; padding: 8px 18px; cursor: pointer; } .mrt-main:hover { filter: brightness(1.08); } .mrt-btn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; background: var(--surface); color: var(--text-muted); cursor: pointer; transition: all .13s; } .mrt-btn:hover { border-color: var(--accent); color: var(--accent-fg); } .mrt-btn.on { color: var(--m-wait); border-color: var(--m-wait); } .mrt-btn.on .tfi polygon { fill: currentColor; } .mrt-btn.danger:hover { border-color: var(--m-urgent); color: var(--m-urgent); } .mrt-sep { width: 1px; height: 20px; background: var(--border); margin: 0 3px; } /* v199 — قاعدة .mr-head المكرّرة انشالت (توحّدت فوق) */ /* الردّ السريع تحت */ .mr-quickreply { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--border); } .mr-qr-in { flex: 1; min-width: 0; background: var(--surface2); border: 1.5px solid var(--border); border-radius: 999px; color: var(--text); font-family: inherit; font-size: 13px; padding: 10px 16px; } .mr-qr-in:focus { border-color: var(--accent); outline: none; } .mr-qr-send { width: 40px; height: 40px; border-radius: 50%; border: none; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #ff8c42)); color: var(--accent-ink, #0a0e1a); cursor: pointer; transition: transform .16s; } .mr-qr-send:hover { filter: brightness(1.1); } /* طيّ المجلدات + التوسيع */ .mf-collapse { align-self: flex-end; width: 24px; height: 24px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted); cursor: pointer; font-size: 12px; margin-bottom: 4px; } .mf-collapse:hover { color: var(--accent-fg); border-color: var(--accent); } .mail-shell.folders-collapsed { grid-template-columns: 58px 340px minmax(0,1fr); } .mail-shell.folders-collapsed .mf-n, .mail-shell.folders-collapsed .mail-compose span { display: none; } .mail-shell.folders-collapsed .mail-compose { padding: 11px 0; } .mail-shell.folders-collapsed .mf-item { justify-content: center; padding: 9px 4px; } .mail-shell.wide { grid-template-columns: 190px 232px minmax(0,1fr); } .mail-shell.wide.folders-collapsed { grid-template-columns: 58px 232px minmax(0,1fr); } .mail-shell.wide .ml-prev { display: none; } /* v198 — قراءة بعرض كامل متل Gmail: فتحت رسالة؟ اللائحة بتختفي والرسالة بتاخد كل العرض. زر ‹ بشريط الأدوات بيرجّعك للائحة. */ @media (min-width: 901px) { .mail-shell.reading { grid-template-columns: 190px minmax(0,1fr); } .mail-shell.reading.folders-collapsed { grid-template-columns: 58px minmax(0,1fr); } .mail-shell.reading .mail-list { display: none; } .mail-shell.reading .mr-thread, .mail-shell.reading .mr-quickreply { max-width: 1020px; } .mail-shell.reading .mr-back { display: inline-flex; align-items: center; justify-content: center; } } /* v198 — بطاقة الربط صارت سطر مضغوط بدل بلوك كبير: العنوان والمعلومات والأزرار بنفس السطر — بياخدوا ربع المساحة القديمة. */ .mr-link { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 8px 12px; } .mr-link .mr-l-head { margin-bottom: 0; } .mr-link .mr-l-line { display: inline-flex; align-items: center; } .mr-link .mr-l-line + .mr-l-line::before { content: '·'; margin-inline-end: 10px; opacity: .45; } .mr-link .mr-l-btns { display: inline-flex; gap: 6px; margin-inline-start: auto; margin-top: 0; } .mr-link .mr-l-go { padding: 4px 10px; font-size: 11px; } /* v198 — الاقتباس المكرّر (———) مطوي متل Gmail: نقطة ⋯ بتفتحو عالطلب */ .mr-quote-toggle { display: inline-block; margin-top: 8px; padding: 1px 12px; border-radius: 10px; background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted); font-size: 13px; letter-spacing: 2px; cursor: pointer; user-select: none; } .mr-quote-toggle:hover { color: var(--accent-fg); border-color: var(--accent); } .mr-quote { display: none; opacity: .75; border-inline-start: 2px solid var(--border); padding-inline-start: 10px; margin-top: 8px; } .mr-quote.open { display: block; } .mf-item.on { background: color-mix(in srgb, var(--accent) 14%, var(--surface2)); color: var(--accent-fg); } /* أفعال سريعة */ .mqa-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 16px 0; padding: 9px 12px; border-radius: 13px; background: color-mix(in srgb, var(--accent) 8%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); } .mqa-lbl { font-size: 11px; font-weight: 900; color: var(--accent-fg); margin-inline-end: 4px; } .mqa { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-family: inherit; font-size: 11.5px; font-weight: 800; padding: 6px 12px; cursor: pointer; transition: all .13s; } .mqa:hover { border-color: var(--accent); color: var(--accent-fg); } .mqa.ok { border-color: color-mix(in srgb, #2ecc71 45%, var(--border)); color: var(--success); } .mqa.no { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); color: var(--danger); } .mlb-sep { width: 1px; height: 16px; background: var(--border); margin: 0 2px; } .mlb-b.hot { border-color: var(--accent); color: var(--accent-fg); font-weight: 900; } /* بوكس الدوام الذكي */ .msb { margin: 10px 16px 0; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, #20b2aa 8%, var(--surface2)); border: 1.5px solid color-mix(in srgb, #20b2aa 34%, var(--border)); } .msb-head { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 9px; } .msb-tag { font-size: 9.5px; font-weight: 900; background: #20b2aa; color: #06231f; border-radius: 999px; padding: 1px 8px; margin-inline-start: auto; } .msb-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; } .msb-who { font-size: 12.5px; font-weight: 900; } .msb-date { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-family: inherit; font-size: 12px; padding: 6px 10px; } .msb-guess { font-size: 11px; color: #20b2aa; font-weight: 800; } .msb-shifts { display: flex; gap: 5px; flex-wrap: wrap; } .msb-s { background: var(--surface); border: 1.5px solid var(--border); border-radius: 999px; color: var(--text); font-family: inherit; font-size: 11.5px; font-weight: 800; padding: 6px 12px; cursor: pointer; transition: all .13s; } .msb-s:hover { border-color: var(--sc); color: var(--sc); transform: translateY(-1px); } .msb-note { font-size: 10.5px; color: var(--text-muted); margin-top: 8px; } .msb-note.ok { color: var(--success); font-weight: 800; } /* v198 — مسار طلب الدوام الرسمي */ .msb-s.on { border-color: var(--sc); color: var(--sc); background: color-mix(in srgb, var(--sc) 14%, var(--surface)); box-shadow: 0 0 0 1px var(--sc) inset; } .msb.msb-done { display: flex; align-items: center; gap: 8px; font-size: 12.5px; background: color-mix(in srgb, #2ecc71 10%, var(--surface2)); border-color: color-mix(in srgb, #2ecc71 40%, var(--border)); } .msb.msb-no { display: flex; align-items: center; gap: 8px; font-size: 12.5px; background: color-mix(in srgb, var(--danger) 9%, var(--surface2)); border-color: color-mix(in srgb, var(--danger) 38%, var(--border)); } #cmp-shift-btn.on { border-color: #20b2aa; color: #20b2aa; background: color-mix(in srgb, #20b2aa 12%, var(--surface2)); } #cmp-shift-panel .msb { margin: 10px 0 0; } /* القواعد الذكية */ .mrule-new { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 6px; margin-bottom: 12px; } @media (max-width: 560px) { .mrule-new { grid-template-columns: 1fr 1fr; } } .mrule-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--surface2); border: 1px solid var(--border); border-radius: 11px; padding: 9px 12px; margin-bottom: 6px; font-size: 12px; font-weight: 700; } /* لوحة البريد */ .ms-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px,1fr)); gap: 8px; margin-bottom: 14px; } .ms-stat { background: var(--surface2); border: 1.5px solid var(--border); border-radius: 13px; padding: 11px 8px; text-align: center; } .ms-stat.hot { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .ms-stat.warn { border-color: color-mix(in srgb, #e8a020 45%, var(--border)); } .ms-n { font-size: 16px; font-weight: 900; } .ms-l { font-size: 10px; color: var(--text-muted); font-weight: 700; margin-top: 3px; } .ms-sec { font-size: 12px; font-weight: 900; color: var(--accent-fg); margin: 14px 0 8px; } .ms-spark { display: flex; align-items: flex-end; gap: 6px; height: 84px; background: var(--surface2); border: 1px solid var(--border); border-radius: 13px; padding: 10px; } .ms-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; } .ms-bar i { display: block; width: 100%; min-height: 3px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 55%, transparent)); } .ms-bar span { font-size: 9px; color: var(--text-muted); font-weight: 800; } .ms-top { display: flex; flex-direction: column; gap: 6px; } .ms-t-row { display: flex; align-items: center; gap: 9px; font-size: 12px; } .ms-t-n { min-width: 92px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ms-t-bar { flex: 1; height: 7px; background: var(--surface2); border-radius: 999px; overflow: hidden; } .ms-t-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; } .ms-t-c { font-size: 11px; font-weight: 900; color: var(--text-muted); min-width: 22px; text-align: end; } /* الخط الزمني */ .mtl { border-top: 1px solid var(--border); max-height: 40%; display: flex; flex-direction: column; } .mtl-head { font-size: 11.5px; font-weight: 900; padding: 9px 13px 6px; display: flex; align-items: baseline; gap: 8px; } .mtl-hint { font-size: 9.5px; color: var(--text-muted); font-weight: 700; } .mtl-list { overflow-y: auto; padding: 0 8px 8px; } .mtl-ev { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; cursor: pointer; font-size: 11px; border-inline-start: 3px solid var(--border); margin-bottom: 3px; } .mtl-ev:hover { background: var(--surface2); } .mtl-ev.air { border-inline-start-color: var(--accent); } .mtl-ev.mail { border-inline-start-color: #7b8cff; } .mtl-ev.future { opacity: .72; border-style: dashed; } .mtl-t { font-size: 9.5px; color: var(--text-muted); font-weight: 800; min-width: 38px; } .mtl-x { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; } .mtl-w { font-size: 9.5px; color: var(--text-muted); } .cmp-row { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--border); cursor: text; } .cmp-row-lbl { font-size: 11.5px; font-weight: 800; color: var(--text-muted); min-width: 38px; padding-top: 7px; } .cmp-box { position: relative; flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 5px 9px; min-height: 34px; transition: border-color .15s; } .cmp-box:focus-within { border-color: var(--accent); } .cmp-inline-chips { display: contents; } .cmp-chip.in { background: var(--surface); border-color: color-mix(in srgb, var(--accent) 34%, var(--border)); } .cmp-inline-in { flex: 1; min-width: 96px; background: none; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 12.5px; padding: 4px 2px; } .cmp-box .cmp-combo-drop { top: calc(100% + 6px); inset-inline-start: 0; width: 260px; } .cmp-combo-item.kb { background: color-mix(in srgb, var(--accent) 14%, var(--surface2)); } /* ═══ v194 — لائحة البريد: تحديد متعدد + كثافة ═══ */ .ml-pick { font-size: 13px; color: var(--text-muted); flex-shrink: 0; line-height: 1.4; opacity: .5; transition: opacity .14s; } .ml-row:hover .ml-pick, .ml-row.picked .ml-pick { opacity: 1; } .ml-row.picked { background: color-mix(in srgb, var(--accent) 13%, var(--surface2)); } .ml-dense { background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; color: var(--text-muted); font-size: 13px; padding: 4px 9px; cursor: pointer; flex-shrink: 0; } .ml-dense:hover { border-color: var(--accent); color: var(--accent-fg); } .ml-bulk { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding: 8px 12px; background: color-mix(in srgb, var(--accent) 11%, var(--surface2)); border-bottom: 1px solid var(--border); } .mlb-n { font-size: 11px; font-weight: 900; color: var(--accent-fg); margin-inline-end: 4px; } .mlb-b { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-family: inherit; font-size: 11.5px; font-weight: 800; padding: 5px 10px; cursor: pointer; } .mlb-b:hover { border-color: var(--accent); color: var(--accent-fg); } .mlb-b.danger:hover { border-color: var(--danger); color: var(--danger); } /* الكثافة: سطور أضيق وخط أصغر لما يكون في كتير رسائل */ .mail-shell.dense .ml-row { padding: 7px 11px; } .mail-shell.dense .ml-subj { font-size: 11.5px; } .mail-shell.dense .ml-who { font-size: 11px; } .mail-shell.dense .ml-prev { display: none; } .mail-shell.dense .ml-link, .mail-shell.dense .ml-att { margin-top: 2px; } /* ═══ v194 — شريط الردّ سطر واحد ═══ */ .mr-foot { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .mrf-main { background: var(--accent); border: none; border-radius: 11px; color: var(--accent-ink, #0a0e1a); font-family: inherit; font-size: 12.5px; font-weight: 900; padding: 9px 20px; cursor: pointer; } .mrf-main:hover { filter: brightness(1.08); } .mrf-btn { background: var(--surface2); border: 1px solid var(--border); border-radius: 11px; color: var(--text); font-family: inherit; font-size: 12px; font-weight: 800; padding: 9px 14px; cursor: pointer; } .mrf-btn:hover { border-color: var(--accent); color: var(--accent-fg); } /* بوب أب الرسالة */ .mailpop { max-width: 860px; width: 94vw; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; border-top: 4px solid var(--mc, var(--accent)); } .mailpop .mlc-body { overflow-y: auto; } .mailpop .mr-foot { padding: 12px 16px; border-top: 1px solid var(--border); } .cmp-to-field { position: relative; } .cmp-combo { position: relative; flex: 1; min-width: 110px; } .cmp-combo-in { width: 100%; box-sizing: border-box; background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-family: inherit; font-size: 11.5px; padding: 5px 12px; } .cmp-combo-in:focus { border-color: var(--accent); outline: none; } .cmp-combo-drop { position: absolute; top: calc(100% + 5px); inset-inline-start: 0; width: 240px; z-index: 30; background: var(--surface); border: 1.5px solid var(--accent); border-radius: 13px; padding: 6px; box-shadow: 0 10px 28px rgba(0,0,0,.24); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .14s, transform .14s, visibility .14s; max-height: 220px; overflow-y: auto; } .cmp-combo-drop.open { opacity: 1; visibility: visible; transform: translateY(0); } .cmp-combo-item { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; border-radius: 9px; color: var(--text); font-family: inherit; font-size: 12px; font-weight: 700; padding: 7px 10px; cursor: pointer; text-align: start; } .cmp-combo-item:hover { background: var(--surface2); } .cco-role { font-size: 9.5px; color: var(--text-muted); } .cmp-combo-none { font-size: 11px; color: var(--text-muted); padding: 8px 10px; } .cmp-add { background: none; border: 1px dashed var(--border); border-radius: 999px; color: var(--text-muted); font-family: inherit; font-size: 11px; font-weight: 800; padding: 3px 10px; cursor: pointer; } .cmp-add:hover { border-color: var(--accent); color: var(--accent-fg); } .cmp-subj { width: 100%; box-sizing: border-box; background: none; border: none; border-bottom: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 15px; font-weight: 800; padding: 11px 2px; } .cmp-subj:focus { outline: none; border-color: var(--accent); } .cmp-text { width: 100%; box-sizing: border-box; background: var(--surface2); border: 1px solid var(--border); border-radius: 14px; color: var(--text); font-family: 'IBM Plex Sans Arabic','Cairo',sans-serif; font-size: 13.5px; line-height: 1.9; padding: 12px 14px; margin-top: 11px; resize: vertical; } .cmp-text:focus { border-color: var(--accent); outline: none; } .cmp-extras { display: flex; flex-direction: column; gap: 6px; margin-top: 9px; } .cmp-extras:empty { display: none; } .cmp-ex { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; } .cmp-tools { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--border); } .cmp-tool { display: inline-flex; align-items: center; gap: 5px; background: var(--surface2); border: 1px solid var(--border); border-radius: 11px; color: var(--text-muted); font-family: inherit; font-size: 11.5px; font-weight: 800; padding: 7px 12px; cursor: pointer; transition: all .13s; } .cmp-tool:hover { border-color: var(--accent); color: var(--accent-fg); } .cmp-tool.on { border-color: var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface2)); } .cmp-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); } .tpl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 13px; margin-bottom: 6px; } .tpl-n { font-size: 12.5px; font-weight: 900; } .tpl-s { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; } @media (max-width: 1100px) { .mail-shell { grid-template-columns: 160px 1fr; } .mail-read { display: none; } .mail-shell.reading .mail-list { display: none; } .mail-shell.reading .mail-read { display: flex; } .mr-back { display: inline-flex; align-items: center; justify-content: center; } } @media (max-width: 700px) { .mail-shell { grid-template-columns: 1fr; height: calc(100vh - 210px); } .mail-folders { flex-direction: row; overflow-x: auto; flex-wrap: nowrap; } .mf-n { display: none; } .mf-item { padding: 9px; flex-shrink: 0; } .mail-shell:not(.reading) .mail-read { display: none; } .mail-shell.reading .mail-list { display: none; } .mail-shell.reading .mail-read { display: flex; } } /* ═══════════ v191 — الموجة ٣ ═══════════ */ /* 📡 مركز القيادة */ .wr-modal { max-width: 900px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; } .wr-modal .mlc-body { overflow-y: auto; } .wr-clock { font-family: 'Inter', monospace; font-size: 15px; font-weight: 900; color: var(--accent-fg); margin-inline-start: auto; margin-inline-end: 12px; } .wr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 8px; margin-bottom: 14px; } .wr-stat { background: var(--surface2); border: 1.5px solid var(--border); border-radius: 14px; padding: 12px 10px; text-align: center; } .wr-stat.hot { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); background: color-mix(in srgb, var(--danger) 8%, var(--surface2)); } .wr-stat.warn { border-color: color-mix(in srgb, #e8a020 48%, var(--border)); background: color-mix(in srgb, #e8a020 8%, var(--surface2)); } .wr-stat.bad { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface2)); animation: freshNote 1.6s ease-in-out infinite; } .wr-s-n { font-size: 19px; font-weight: 900; } .wr-s-l { font-size: 10.5px; color: var(--text-muted); font-weight: 700; margin-top: 3px; } .wr-clean { text-align: center; padding: 34px 14px; font-size: 14px; font-weight: 800; color: var(--success); background: color-mix(in srgb, #2ecc71 9%, var(--surface2)); border: 1px solid color-mix(in srgb, #2ecc71 30%, var(--border)); border-radius: 15px; } .wr-busy { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .wr-b-chip { font-size: 11px; font-weight: 800; background: color-mix(in srgb, #2ecc71 11%, var(--surface2)); border: 1px solid color-mix(in srgb, #2ecc71 32%, var(--border)); border-radius: 999px; padding: 4px 11px; } .wr-list { display: flex; flex-direction: column; gap: 6px; } .wr-row { display: flex; align-items: center; gap: 12px; background: var(--surface2); border: 1px solid var(--border); border-inline-start: 4px solid var(--border); border-radius: 12px; padding: 10px 13px; cursor: pointer; transition: all .14s; flex-wrap: wrap; } .wr-row:hover { transform: translateX(-2px); border-color: var(--accent); } [dir="ltr"] .wr-row:hover { transform: translateX(2px); } .wr-row.warn { border-inline-start-color: #e8a020; } .wr-row.bad { border-inline-start-color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--surface2)); } .wr-row.ok { border-inline-start-color: #2ecc71; } .wr-r-main { flex: 1; min-width: 140px; } .wr-r-title { font-size: 13px; font-weight: 900; } .wr-r-meta { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; } .wr-r-bar { position: relative; width: 110px; height: 18px; background: var(--surface); border-radius: 999px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--border); } .wr-r-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #2ecc71); transition: width .4s; } .wr-r-bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 900; color: var(--text); } .wr-r-cd { font-size: 11px; font-weight: 900; min-width: 76px; text-align: end; flex-shrink: 0; color: var(--text-muted); } .wr-r-cd.warn { color: var(--accent-fg); } .wr-r-cd.bad { color: var(--danger); } .wr-r-cd.ok { color: var(--success); } /* ⏮️ الإعادة الزمنية */ .rp-modal { max-width: 640px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; } .rp-modal .mlc-body { overflow-y: auto; } .rp-sum { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; } .rp-chip { font-size: 11.5px; font-weight: 800; background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; } .rp-chip.bad { border-color: color-mix(in srgb, var(--danger) 42%, var(--border)); color: var(--danger); } .rp-line { position: relative; padding-inline-start: 26px; } .rp-line::before { content: ""; position: absolute; inset-inline-start: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--border); } .rp-ev { position: relative; display: flex; gap: 10px; margin-bottom: 10px; } .rp-dot { position: absolute; inset-inline-start: -26px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 9.5px; } .rp-ev.send .rp-dot { border-color: var(--accent); } .rp-ev.card .rp-dot { border-color: #7b8cff; } .rp-e-body { flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: 11px; padding: 8px 12px; } .rp-e-txt { font-size: 12.5px; font-weight: 700; line-height: 1.7; } .rp-e-meta { font-size: 10px; color: var(--text-muted); margin-top: 3px; } .rp-gap { font-size: 10.5px; font-weight: 800; color: var(--text-muted); margin: 4px 0 10px; padding: 3px 11px; background: var(--surface2); border: 1px dashed var(--border); border-radius: 999px; display: inline-block; } .rp-gap.big { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); } /* 🏆 الإنجازات */ .ach-pop { position: fixed; bottom: 26px; inset-inline-start: 26px; z-index: 13200; display: flex; align-items: center; gap: 12px; max-width: 300px; padding: 14px 18px; border-radius: 16px; cursor: pointer; background: var(--surface); border: 2px solid #e8a020; box-shadow: 0 12px 40px rgba(0,0,0,.26), 0 0 0 6px color-mix(in srgb, #e8a020 12%, transparent); opacity: 0; transform: translateY(20px) scale(.9); transition: opacity .3s, transform .38s cubic-bezier(.18,1.35,.36,1); } .ach-pop.show { opacity: 1; transform: translateY(0) scale(1); } .ach-ic { font-size: 30px; animation: nbPulse 1.5s ease-in-out infinite; } .ach-txt { font-size: 12.5px; font-weight: 800; line-height: 1.7; } .ach-head { font-size: 12.5px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.8; } .ach-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 8px; } .ach-card { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; background: var(--surface2); border: 1.5px solid var(--border); border-radius: 14px; padding: 13px 9px; opacity: .55; } .ach-card.on { opacity: 1; border-color: #e8a020; background: color-mix(in srgb, #e8a020 9%, var(--surface2)); } .ach-c-ic { font-size: 24px; } .ach-c-n { font-size: 11.5px; font-weight: 900; } .ach-c-d { font-size: 9.5px; color: var(--text-muted); } /* 🌙 لمسة الليل */ /* v350: كان filter عالجسم — وأي filter عالسلف بيكسر position:fixed (الدرس المدفوع حقّو): منتقي التاريخ والرِيل الجانبي كانوا بينكسروا بين ١ و٥ الصبح بس. البديل: حجاب خفيف بطبقة مستقلة — نفس الإحساس، بلا ما يلمس أي تموضع. */ body.late-night::after { content: ''; position: fixed; inset: 0; z-index: 99999; pointer-events: none; background: #0b0e14; opacity: .06; mix-blend-mode: multiply; } /* ✨ حيوية شاشة الدخول */ #login-screen { position: relative; overflow: hidden; } #login-screen::before, #login-screen::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; } #login-screen::before { width: 46vw; height: 46vw; inset-inline-start: -12vw; top: -12vw; background: color-mix(in srgb, var(--accent) 34%, transparent); animation: loginDrift1 20s ease-in-out infinite alternate; } #login-screen::after { width: 40vw; height: 40vw; inset-inline-end: -10vw; bottom: -12vw; background: color-mix(in srgb, #7b8cff 30%, transparent); animation: loginDrift2 26s ease-in-out infinite alternate; } @keyframes loginDrift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(6vw,8vh) scale(1.14); } } @keyframes loginDrift2 { from { transform: translate(0,0) scale(1.1); } to { transform: translate(-7vw,-6vh) scale(1); } } #login-screen > * { position: relative; z-index: 1; } .login-card, #login-screen .card { animation: loginRise .6s cubic-bezier(.16,.84,.28,1) both; } @keyframes loginRise { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .login-logo img { animation: loginLogo .8s cubic-bezier(.18,1.3,.36,1) both .1s; } @keyframes loginLogo { from { opacity: 0; transform: translateY(-12px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } } .login-greet { font-size: 12.5px; font-weight: 800; color: var(--text-muted); text-align: center; margin-bottom: 4px; } @media (prefers-reduced-motion: reduce) { #login-screen::before, #login-screen::after, .login-card, .login-logo img { animation: none !important; } } .pv-grip { cursor: grab; color: var(--text-muted); font-size: 15px; user-select: none; letter-spacing: -2px; } .pv-grip:active { cursor: grabbing; } .nr-pv-card.pv-dragging { opacity: .45; transform: scale(.985); } .nr-pv-card.pv-drop-before { box-shadow: 0 -3px 0 0 var(--accent); } .nr-pv-card.pv-drop-after { box-shadow: 0 3px 0 0 var(--accent); } .pv-chips-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 10px; } .pv-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 3px 10px; border: 1px solid var(--border); background: var(--surface2); } .pv-chip b { cursor: pointer; opacity: .5; font-size: 10px; } .pv-chip b:hover { opacity: 1; color: var(--danger); } .pv-chip-gt { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); color: var(--accent-fg); } /* v526 — النوع المقترح من الذكاء: حدٌّ منقّط وشارة «مقترح» حتّى يؤكّده المحرر */ .pv-chip-gt.ai { border-style: dashed; } .pv-chip-gt.ai small { font-size: 9px; font-weight: 800; letter-spacing: .2px; margin-inline-end: 5px; padding: 1px 5px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-fg); } .pv-chip-nt { border-color: color-mix(in srgb, #7b8cff 42%, var(--border)); color: #7b8cff; } .pv-chip-add { background: transparent; border: 1px dashed var(--border); border-radius: 999px; color: var(--text-muted); font-family: inherit; font-size: 11px; font-weight: 800; padding: 3px 11px; cursor: pointer; } .pv-chip-add:hover { border-color: var(--accent); color: var(--accent-fg); } .pv-chip-add.nt:hover { border-color: #7b8cff; color: #7b8cff; } .pv-rt-group { display: inline-flex; gap: 3px; margin-inline-start: 6px; } .pv-rt { width: 26px; height: 24px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface2); cursor: pointer; font-size: 12px; line-height: 1; opacity: .5; transition: all .13s; } .pv-rt:hover { opacity: 1; } .pv-rt.on { opacity: 1; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface2)); } .pv-insert { display: block; width: 100%; background: transparent; border: none; color: var(--text-muted); font-size: 14px; font-weight: 900; cursor: pointer; padding: 2px 0; opacity: 0; transition: opacity .15s; line-height: 1; } .nr-pv-cards:hover .pv-insert, .pv-insert:hover, .pv-insert-top:hover { opacity: .8; } .pv-insert:hover { color: var(--accent-fg); } .pv-insert-top { opacity: .35; } .pv-nt-block { margin-top: 10px; padding: 11px 13px; border-radius: 13px; background: color-mix(in srgb, #7b8cff 6%, var(--surface2)); border: 1px solid color-mix(in srgb, #7b8cff 26%, var(--border)); } .pv-nt-title { font-size: 12px; font-weight: 900; color: #7b8cff; margin-bottom: 8px; } .pv-hl-btn { width: 100%; margin-top: 8px; background: color-mix(in srgb, #e8a020 14%, var(--surface2)); border: 1.5px solid color-mix(in srgb, #e8a020 42%, var(--border)); border-radius: 11px; color: #b8791a; font-family: inherit; font-size: 12.5px; font-weight: 800; padding: 9px; cursor: pointer; } .pv-hl-btn:hover { background: color-mix(in srgb, #e8a020 22%, var(--surface2)); } .pv-hl-status { font-size: 10.5px; color: var(--text-muted); margin-top: 6px; text-align: center; } /* ═══ v346 · عناوين النشرة ═══ */ .hl-modal { max-width: 640px; } .hl-live { font-size: 10px; color: var(--danger); margin-inline-start: 8px; animation: hlPulse 1.6s infinite; } @keyframes hlPulse { 50% { opacity: .35; } } .hl-meta { font-size: 12px; color: var(--text-muted); margin: 4px 0 12px; } .hl-list { display: flex; flex-direction: column; gap: 7px; max-height: 52vh; overflow-y: auto; } .hl-row { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--bg-card) 55%, transparent); backdrop-filter: blur(10px); } /* v348: غلاس تحكم — النص واضح فوقو */ .hl-grip { cursor: grab; color: var(--text-muted); font-size: 13px; padding: 0 2px; user-select: none; } .hl-grip:active { cursor: grabbing; } .hl-updn { display: flex; flex-direction: column; gap: 2px; } .hl-updn button { width: 20px; height: 15px; font-size: 9px; line-height: 1; border-radius: 5px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; } .hl-updn button:hover:not(:disabled) { color: var(--accent-fg); border-color: var(--accent); } .hl-updn button:disabled { opacity: .25; cursor: default; } /* v350: منتقي النشرة + بطاقة الاستلام + التجهيز السريع */ .hl-shows { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .hl-showcard { display: flex; flex-direction: column; gap: 3px; padding: 14px 15px; border-radius: 12px; text-align: start; border: 1px solid var(--border); background: var(--bg-input); color: var(--text); cursor: pointer; } .hl-showcard:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); } .hl-showcard b { font-size: 14px; font-weight: 700; } .hl-showcard span { font-family: var(--tf-mono, 'IBM Plex Mono', monospace); font-size: 11px; color: var(--accent-fg); } /* v529 — خطّ الأرقام الواحد */ .hl-claim { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 11px; padding: 10px 13px; border-radius: 11px; border: 1px dashed var(--border); background: color-mix(in srgb, var(--bg-card) 55%, transparent); font-size: 12.5px; } .hl-claim.on { border-style: solid; border-color: var(--success); background: color-mix(in srgb, var(--success) 11%, transparent); } .hl-claim.wait { color: var(--text-muted); } .hl-claim small { color: var(--text-muted); font-size: 10.5px; } .hl-claim-btn { margin-inline-start: auto; font-size: 11px; padding: 5px 11px; border-radius: 8px; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text-muted); } .hl-take { flex: 1; } .hl-quick { display: flex; gap: 8px; margin-top: 10px; } .hl-quick .hl-add { flex: 1; margin-top: 0; } .hl-prep { padding: 9px 14px; border-radius: 10px; font-size: 12px; font-weight: 700; cursor: pointer; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); } .hl-prep:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); } /* v349: شريط الأيام — التنقل بين نشرات الأيام بلا ما تفتح السجل */ .hl-days { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; } .hl-day-nav { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-muted); cursor: pointer; font-size: 10px; } .hl-day-nav:hover { color: var(--accent-fg); border-color: var(--accent); } .hl-day-cur { flex: 1; padding: 6px 12px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer; } .hl-day-cur:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); } .hl-lastedit { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; } .hl-histbtn { margin-inline-start: auto; font-size: 11px; padding: 5px 11px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; } .hl-histbtn:hover { color: var(--accent-fg); border-color: var(--accent); } .hl-histrow { display: flex; flex-direction: column; gap: 3px; text-align: start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-input); cursor: pointer; } .hl-histrow:hover { border-color: var(--accent); } .hl-histrow b { font-size: 13px; } .hl-histrow small { font-size: 11px; color: var(--text-muted); } .hl-histrow i { font-style: normal; } .lb-hl .lb-door-icon { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 50%, transparent)); } .hl-row.hl-flash { animation: hlFlash 1.4s; } @keyframes hlFlash { 0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: none; } } .hl-n { font-family: 'Share Tech Mono', monospace; font-size: 13px; color: var(--accent-fg); min-width: 20px; text-align: center; } .hl-txt { flex: 2; background: transparent; border: none; border-bottom: 1px dashed var(--border); color: var(--text); font-size: 13.5px; font-weight: 700; padding: 4px 2px; } .hl-brief { flex: 1.2; background: transparent; border: none; border-bottom: 1px dashed var(--border); color: var(--text-muted); font-size: 12px; padding: 4px 2px; } .hl-txt:focus, .hl-brief:focus { outline: none; border-bottom-color: var(--accent); } .hl-view { flex: 1; } .hl-view b { display: block; font-size: 13.5px; } .hl-view small { color: var(--text-muted); font-size: 11.5px; } .hl-del { background: none; border: none; cursor: pointer; opacity: .55; } .hl-del:hover { opacity: 1; } .hl-recv { width: 26px; height: 26px; border-radius: 50%; border: 1.6px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; flex-shrink: 0; } .hl-recv.on { border-color: var(--success); color: var(--success); font-weight: 900; } .hl-add { width: 100%; margin-top: 10px; } .hl-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .hl-urgent { background: linear-gradient(135deg, #e05555, #b03030) !important; color: #fff !important; } .lb-kind-hl { border-color: color-mix(in srgb, var(--accent) 55%, transparent) !important; } #hl-pill { position: fixed; bottom: 86px; inset-inline-end: 18px; z-index: 12000; display: flex; align-items: center; gap: 7px; padding: 10px 15px; border-radius: 999px; border: 1px solid var(--accent); background: var(--bg-card); color: var(--text); font-size: 12.5px; box-shadow: 0 8px 26px #0008; cursor: pointer; } #hl-pill span { font-family: 'Share Tech Mono', monospace; background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 1px 8px; font-size: 11px; } #hl-pill:active { transform: scale(.965); } .nr-pv-card.collapsed > *:not(.nr-pv-head) { display: none; } /* v346: طي — الرأس بس، بيسهّل السحب والترتيب */ .nr-pv-card.collapsed { padding-bottom: 8px; } .pv-collapsed-title { font-size: 12px; font-weight: 700; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46%; } .pv-picker { position: fixed; z-index: 2147483300; /* v346: فوق نافذة الطلب السريع — القائمة كانت بتفتح وراها */ width: 252px; max-height: 300px; overflow-y: auto; background: var(--surface); border: 1.5px solid var(--accent); border-radius: 15px; padding: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.26); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s, transform .16s, visibility .16s; } .pv-picker.open { opacity: 1; visibility: visible; transform: translateY(0); } .pvp-head { font-size: 11.5px; font-weight: 900; color: var(--text-muted); margin-bottom: 8px; } .pvp-tier { font-size: 10px; font-weight: 800; color: var(--accent-fg); margin: 7px 0 4px; } .pvp-item { display: flex; align-items: center; justify-content: space-between; width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 7px 11px; margin-bottom: 4px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--text); } .pvp-item:hover { border-color: var(--accent); } .pvp-item.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface2)); } .pvp-check { opacity: 0; color: var(--accent-fg); font-weight: 900; } .pvp-item.on .pvp-check { opacity: 1; } /* ═══ v186 — مُعلّم الورقة (LVO) ═══ */ .hl-modal { max-width: 1000px; width: 96vw; max-height: 94vh; display: flex; flex-direction: column; overflow: hidden; } .hl-body { display: flex; gap: 14px; padding: 14px 16px; overflow: hidden; flex: 1; min-height: 0; } .hl-stage { flex: 1; min-width: 0; overflow: auto; background: var(--surface2); border: 1px solid var(--border); border-radius: 14px; padding: 10px; display: flex; justify-content: center; } .hl-canvas { position: relative; display: inline-block; max-width: 100%; cursor: crosshair; user-select: none; } .hl-canvas img { display: block; max-width: 100%; height: auto; border-radius: 8px; pointer-events: none; } .hl-layer { position: absolute; inset: 0; } .hl-mark { position: absolute; border: 2.5px solid; border-radius: 5px; cursor: pointer; transition: filter .13s; } .hl-mark:hover { filter: brightness(1.12); } .hl-mark.hl-draft { border-style: dashed; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); pointer-events: none; } .hl-num { position: absolute; top: -11px; inset-inline-start: -11px; width: 21px; height: 21px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.28); } .hl-side { width: 262px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; } .hl-side-head { font-size: 12.5px; font-weight: 900; color: var(--text-muted); } .hl-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; } .hl-item { display: flex; align-items: center; gap: 7px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 7px 9px; transition: border-color .14s; } .hl-item.on { border-color: var(--accent); } .hl-item-n { width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 10.5px; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hl-item-in { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 11.5px; padding: 5px 8px; } .hl-item-note { flex: 1; font-size: 11.5px; font-weight: 700; line-height: 1.6; } .hl-item-del { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 11px; } .hl-item-del:hover { color: var(--danger); } .hl-empty { font-size: 11.5px; color: var(--text-muted); text-align: center; padding: 20px 8px; line-height: 1.8; } .hl-drop { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 2px dashed var(--border); border-radius: 16px; padding: 34px 18px; text-align: center; } .hl-drop-ic { font-size: 34px; } .hl-drop-t { font-size: 13.5px; font-weight: 800; } .hl-drop-s { font-size: 11.5px; color: var(--text-muted); } .hl-drop-btn { margin-top: 6px; background: var(--accent); border-radius: 12px; color: var(--accent-ink, #0a0e1a); font-size: 12.5px; font-weight: 900; padding: 9px 18px; cursor: pointer; } .hl-foot { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--border); flex-wrap: wrap; } .mc-hl-open { width: 100%; margin-bottom: 8px; background: color-mix(in srgb, #e8a020 12%, var(--surface2)); border: 1.5px solid color-mix(in srgb, #e8a020 40%, var(--border)); border-radius: 11px; color: #b8791a; font-family: inherit; font-size: 12.5px; font-weight: 800; padding: 9px; cursor: pointer; } .mc-hl-open:hover { background: color-mix(in srgb, #e8a020 20%, var(--surface2)); } @media (max-width: 820px) { .hl-body { flex-direction: column; } .hl-side { width: auto; max-height: 34vh; } } /* v192 — كلمة القسم جنب اللوغو: صغيرة وأنيقة بلا تشويش */ .nr-logo-wrap { display: inline-flex; align-items: center; gap: 7px; } .nr-logo-dept { font-size: 10px; font-weight: 900; letter-spacing: .5px; color: var(--text-muted); background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; opacity: .85; } .mc-nt-badge { font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 2px 10px; background: color-mix(in srgb, #7b8cff 13%, var(--surface2)); border: 1px solid color-mix(in srgb, #7b8cff 34%, var(--border)); color: var(--text); white-space: nowrap; } .nr-adaptive-wrap { overflow: hidden; } .nr-adaptive-inner { animation: nrSlideDown .3s ease; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--border); } .nr-adaptive-title { font-weight: 700; font-size: 13px; color: var(--accent-fg); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; } @keyframes nrSlideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* smart urgent box */ .nr-urgent-box { margin-top: 14px; padding: 14px; border-radius: 12px; background: color-mix(in srgb, var(--danger) 10%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border)); animation: nrSlideDown .28s ease; } .nr-urgent-q { font-weight: 800; font-size: 13.5px; color: var(--danger); margin-bottom: 10px; } .nr-urgent-hint { font-size: 11px; color: var(--text-muted); margin-top: 8px; } /* editable preview cards — mirror the designer task-card look */ .nr-preview-box { animation: nrSlideDown .3s ease; } .nr-pv-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; } .nr-pv-count { font-weight: 800; font-size: 13px; color: var(--accent-fg); } .nr-pv-cards { display: flex; flex-direction: column; gap: 12px; } .nr-pv-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; transition: border-color .15s, box-shadow .15s; } .nr-pv-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .nr-pv-card.pv-warn { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); } .nr-pv-card.pv-manual { border-color: color-mix(in srgb, #9c5ad0 50%, var(--border)); border-inline-start: 4px solid #9c5ad0; } .nr-pv-manual-tag { font-size: 10.5px; font-weight: 700; background: #9c5ad0; color: #fff; border-radius: 8px; padding: 2px 8px; } /* production-spirit workload strip (designer/montage pages) */ .workload-strip { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .workload-item { flex: 1; min-width: 90px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; text-align: center; } .workload-icon { font-size: 22px; margin-bottom: 4px; } .workload-num { font-size: 28px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; } .workload-label { font-size: 12px; color: var(--text-muted); font-weight: 600; margin-top: 4px; } .nr-pv-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .nr-pv-seq { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-ink, #0a0e1a); font-weight: 800; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .nr-pv-type-select { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-fg); font-weight: 800; font-size: 12px; padding: 4px 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); font-family: inherit; cursor: pointer; } .nr-pv-actions { margin-inline-start: auto; display: flex; gap: 4px; } .nr-pv-iconbtn { background: var(--surface2); border: 1px solid var(--border); border-radius: 7px; color: var(--text-muted); font-size: 13px; padding: 4px 8px; cursor: pointer; transition: all .15s; } .nr-pv-iconbtn:hover { border-color: var(--accent); color: var(--accent-fg); } .nr-pv-iconbtn.danger:hover { border-color: var(--danger); color: var(--danger); } .nr-pv-original { font-size: 13px; line-height: 1.7; color: var(--text-muted); background: color-mix(in srgb, #8a8a9a 12%, transparent); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; white-space: pre-wrap; border: 1px solid transparent; } .nr-pv-original[contenteditable="true"]:focus { outline: none; border-color: var(--accent); background: var(--surface2); color: var(--text); } .nr-pv-points { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; } .nr-pv-point { font-size: 13.5px; font-weight: 600; color: var(--text); background: color-mix(in srgb, var(--success) 15%, transparent); border-inline-start: 3px solid var(--success); border-radius: 6px; padding: 7px 11px; white-space: pre-wrap; } .nr-pv-point[contenteditable="true"]:focus { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 40%, transparent); } .nr-pv-point-row { display: flex; align-items: stretch; gap: 6px; margin-bottom: 5px; } .nr-pv-point-row .nr-pv-point { flex: 1; margin: 0; } .nr-pv-point-del { flex-shrink: 0; width: 30px; background: color-mix(in srgb, var(--danger) 8%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--border)); border-radius: 6px; color: var(--danger); font-size: 13px; cursor: pointer; } .nr-pv-point-del:hover { background: var(--danger); color: var(--danger-ink); } /* montage report-level finish */ .montage-finish-bar { margin-top: 12px; padding: 14px; background: color-mix(in srgb, #9c5ad0 10%, var(--surface)); border: 1px solid color-mix(in srgb, #9c5ad0 30%, var(--border)); border-radius: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .mfb-text { font-size: 13px; font-weight: 700; color: var(--text); } .mfb-btn { background: #9c5ad0; color: #fff; border: none; border-radius: 10px; padding: 10px 18px; font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap; } .mfb-btn:hover { filter: brightness(1.1); } .montage-start-bar { margin-bottom: 12px; padding: 14px; background: color-mix(in srgb, #3a90e0 10%, var(--surface)); border: 1px solid color-mix(in srgb, #3a90e0 30%, var(--border)); border-radius: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .msb-btn { background: #3a90e0; color: #fff; border: none; border-radius: 10px; padding: 10px 18px; font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; white-space: nowrap; } .msb-btn:hover { filter: brightness(1.1); } .mfr-report-name { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 10px; } .mc-stamp.working { color: var(--violet); } /* keywords + guests under report text */ #nr-keywords-wrap { margin-top: 12px; } .nr-guests-wrap { margin-top: 14px; } .nr-guests-wrap .guest-row { display: flex; gap: 8px; margin-bottom: 8px; } .nr-guests-wrap .guest-row input { flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 13px; padding: 8px 12px; } .nr-guests-wrap .guest-del { background: color-mix(in srgb, var(--danger) 10%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--border)); border-radius: 8px; color: var(--danger); width: 34px; cursor: pointer; } /* archive lock banner */ .arch-lock-banner { width: 100%; text-align: center; font-size: 13px; font-weight: 800; color: var(--accent-fg); background: color-mix(in srgb, #e8a020 10%, transparent); border: 1px solid color-mix(in srgb, #e8a020 30%, transparent); border-radius: 10px; padding: 10px; margin-bottom: 8px; } /* demo account banner */ #demo-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 5000; background: linear-gradient(90deg, #9c5ad0, #6b3fa0); color: #fff; text-align: center; font-size: 13px; font-weight: 800; padding: 8px 16px; box-shadow: 0 -2px 12px rgba(0,0,0,.25); } body.has-demo-banner { padding-bottom: 38px; } @media (max-width: 768px) { #demo-banner { bottom: calc(54px + env(safe-area-inset-bottom, 8px)); font-size: 11px; padding: 6px 12px; } /* v217 — فوق الناف، مش فوق الأيقونات */ } /* smart idle warning + lock screen */ #idle-warning { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 5500; background: #e8a020; color: var(--accent-ink, #0a0e1a); border-radius: 12px; padding: 12px 18px; display: none; align-items: center; gap: 14px; font-size: 13px; font-weight: 700; box-shadow: 0 6px 24px rgba(0,0,0,.3); } #idle-warning.open { display: flex; animation: fadeIn .2s ease; } #idle-warning button { background: #14141f; color: #fff; border: none; border-radius: 8px; padding: 8px 14px; font-family: inherit; font-weight: 800; cursor: pointer; white-space: nowrap; } /* v568 — شاشة القفل القديمة (#lock-screen) أُزيلت: القفل واحدٌ في tf-touch.js (#tf-lock) */ /* HR dashboard */ .hr-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 20px; } .hr-stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; text-align: center; } .hr-stat-icon { font-size: 22px; margin-bottom: 6px; } .hr-stat-num { font-size: 28px; font-weight: 900; line-height: 1; } .hr-stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-weight: 600; } .hr-people { display: flex; flex-direction: column; gap: 8px; } .hr-person { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--surface2); border-radius: 10px; } .hr-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; opacity: .4; } .hr-dot.on { background: #2ecc71; opacity: 1; box-shadow: 0 0 6px #2ecc71; } .hr-avatar { width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .hr-name { font-weight: 700; font-size: 13.5px; color: var(--text); flex: 1; } .hr-role { font-size: 12px; color: var(--text-muted); font-weight: 600; } .hr-workflow-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; } .hr-wf-stage { text-align: center; flex: 1; min-width: 60px; } .hr-wf-count { font-size: 26px; font-weight: 900; line-height: 1; } .hr-wf-label { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; font-weight: 600; } .hr-wf-arrow { color: var(--text-muted); font-size: 16px; opacity: .5; } .hr-prod-list { display: flex; flex-direction: column; gap: 8px; } .hr-prod-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--surface2); border-radius: 10px; } .hr-prod-count { font-size: 13px; font-weight: 800; color: var(--accent-fg); } /* card ownership lock */ .mc-lock { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-muted); background: var(--surface2); border: 1px dashed var(--border); border-radius: 8px; padding: 8px 14px; } .mc-btn.pause { background: color-mix(in srgb, #e8a020 15%, var(--surface2)); color: var(--accent-fg); border: 1px solid color-mix(in srgb, #e8a020 40%, var(--border)); } .mc-btn.pause:hover { background: #e8a020; color: #fff; } .ct-work.paused { opacity: .7; } .ct-paused-tag { font-size: 11px; color: var(--accent-fg); font-weight: 800; } /* "my focus now" priority panel */ .myfocus-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; margin-bottom: 16px; } .mf-head { font-size: 14px; font-weight: 900; color: var(--text); margin-bottom: 10px; } .mf-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface2); margin-bottom: 8px; cursor: pointer; transition: transform .12s, box-shadow .12s; border-inline-start: 3px solid var(--border); } .mf-row:last-child { margin-bottom: 0; } .mf-row:hover { transform: translateX(-3px); box-shadow: 0 3px 12px rgba(0,0,0,.12); } .mf-row.mf-hot { border-inline-start-color: #e04545; background: color-mix(in srgb, #e04545 7%, var(--surface2)); } .mf-row.mf-warm { border-inline-start-color: #e8a020; background: color-mix(in srgb, #e8a020 6%, var(--surface2)); } .mf-main { flex: 1; min-width: 0; } .mf-title { font-size: 13.5px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mf-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; } .mf-snippet { font-size: 11.5px; color: var(--text); opacity: .75; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* editor edit-requests banner (designer) */ .edit-banner { background: linear-gradient(160deg, color-mix(in srgb, #e8a020 12%, var(--surface)), var(--surface)); border: 1.5px solid color-mix(in srgb, #e8a020 40%, var(--border)); border-radius: 16px; padding: 14px 16px; margin-bottom: 16px; animation: ebPulse 2.5s ease-in-out infinite; } @keyframes ebPulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, #e8a020 30%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, #e8a020 8%, transparent); } } .eb-head { font-size: 14px; font-weight: 900; color: var(--accent-fg); margin-bottom: 10px; } .eb-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface2); border-radius: 11px; margin-bottom: 7px; cursor: pointer; transition: transform .12s; } .eb-row:last-child { margin-bottom: 0; } .eb-row:hover { transform: translateX(-3px); } .eb-main { flex: 1; min-width: 0; } .eb-title { font-size: 13px; font-weight: 800; color: var(--text); } .eb-snippet { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .eb-go { font-size: 12px; font-weight: 800; color: var(--accent-fg); white-space: nowrap; } .mf-time { font-size: 12px; font-weight: 800; white-space: nowrap; } .mf-go { color: var(--text-muted); font-size: 16px; font-weight: 900; } /* bottleneck alerts (admin & producer) */ .bottleneck-panel { background: color-mix(in srgb, #e04545 6%, var(--surface)); border: 1px solid color-mix(in srgb, #e04545 25%, var(--border)); border-radius: 16px; padding: 14px 16px; margin-bottom: 16px; } .bn-head { font-size: 14px; font-weight: 900; color: var(--text); margin-bottom: 10px; } .bn-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--surface2); margin-bottom: 7px; } .bn-row:last-child { margin-bottom: 0; } .bn-row.bn-hot { background: color-mix(in srgb, #e04545 12%, var(--surface2)); } .bn-icon { font-size: 15px; flex-shrink: 0; } .bn-text { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); } .bn-go { color: var(--text-muted); font-size: 15px; font-weight: 900; } /* message reactions */ .msg-col { display: flex; flex-direction: column; } .msg-col.mine { align-items: flex-end; } .msg-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; align-items: center; } .msg-react-chip { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 1px 8px; font-size: 12px; cursor: pointer; line-height: 1.6; transition: all .12s; } .msg-react-chip:hover { border-color: var(--accent); } .msg-react-chip.mine { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: var(--accent); font-weight: 700; } .msg-react-add { background: transparent; border: none; color: var(--text-muted); font-size: 12px; cursor: pointer; opacity: 0; transition: opacity .15s; padding: 1px 4px; border-radius: 8px; } .msg-row:hover .msg-react-add, .msg-bubble:hover .msg-react-add, .msg-reactions:hover .msg-react-add { opacity: .7; } /* v181 */ .msg-react-add:hover { opacity: 1 !important; background: var(--surface2); } .reaction-popover { position: absolute; z-index: 6000; background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 6px 8px; display: flex; gap: 4px; box-shadow: 0 6px 24px rgba(0,0,0,.25); } .reaction-popover button { background: transparent; border: none; font-size: 20px; cursor: pointer; padding: 4px 6px; border-radius: 50%; transition: transform .1s, background .1s; } .reaction-popover button:hover { transform: scale(1.3); background: var(--surface2); } /* reply to a message */ .msg-reply-btn { cursor: pointer; font-size: 11px; opacity: 0; margin-inline-start: 6px; transition: opacity .15s; } .msg-bubble:hover .msg-reply-btn { opacity: .7; } .msg-reply-btn:hover { opacity: 1 !important; } .msg-reply-quote { border-inline-start: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 6px; padding: 4px 8px; margin-bottom: 5px; font-size: 12px; opacity: .85; } .msg-reply-quote b { display: block; font-size: 11px; color: var(--accent-fg); } .reply-compose-bar { background: var(--surface2); border-radius: 10px 10px 0 0; padding: 8px 12px; border-inline-start: 3px solid var(--accent); margin-bottom: -2px; } .rcb-inner { display: flex; align-items: center; gap: 8px; } .rcb-icon { font-size: 14px; } .rcb-text { flex: 1; min-width: 0; font-size: 12px; } .rcb-text b { display: block; color: var(--accent-fg); font-size: 11px; } .rcb-text span { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .rcb-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; } /* saved AI images gallery */ .ig-gallery { margin-top: 14px; } .ig-gallery-head { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 8px; } .ig-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; } .ig-gallery-item { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 1; border: 1px solid var(--border); } .ig-gallery-item img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; transition: transform .15s; } .ig-gallery-item img:hover { transform: scale(1.05); } .ig-gallery-dl { position: absolute; bottom: 4px; inset-inline-end: 4px; background: rgba(0,0,0,.6); color: #fff; border-radius: 6px; padding: 2px 6px; font-size: 12px; text-decoration: none; } /* report visual identity (storyboard consistency) */ .vi-panel { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); border-radius: 16px; padding: 14px 16px; margin: 14px 0; } .vi-head { font-size: 14px; font-weight: 900; color: var(--text); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .vi-auto { font-size: 11px; font-weight: 600; color: var(--accent-fg); background: color-mix(in srgb, #e8a020 12%, transparent); padding: 2px 8px; border-radius: 8px; } .vi-saved { font-size: 11px; font-weight: 700; color: var(--success); } .vi-desc { font-size: 12px; color: var(--text-muted); margin: 4px 0 12px; } .vi-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; } .vi-label { font-size: 12.5px; font-weight: 800; color: var(--text); min-width: 60px; padding-top: 5px; } .vi-opts { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; } .vi-chip { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 5px 11px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: all .12s; } .vi-chip:hover { border-color: var(--accent); } .vi-chip.on { background: var(--accent); color: var(--accent-ink, #0a0e1a); border-color: var(--accent); font-weight: 800; } .vi-actions { display: flex; gap: 8px; margin-top: 12px; } .vi-save { flex: 1; background: var(--accent); color: var(--accent-ink, #0a0e1a); border: none; border-radius: 10px; padding: 9px; font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; } .vi-save:hover { filter: brightness(1.08); } .vi-reset { background: var(--surface2); color: var(--text-muted); border: 1px solid var(--border); border-radius: 10px; padding: 9px 14px; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; } /* v110: guidance/visual are editable now (were display-only and hidden when empty, so manual cards had nowhere to describe the task). */ .nr-pv-field { margin-top: 8px; } .nr-pv-field label { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-muted); margin-bottom: 4px; } .nr-pv-editable { font-size: 12.5px; color: var(--text); background: color-mix(in srgb, var(--info) 10%, transparent); border: 1px solid color-mix(in srgb, var(--info) 25%, transparent); border-inline-start: 3px solid var(--info); border-radius: 6px; padding: 8px 11px; line-height: 1.6; min-height: 34px; white-space: pre-wrap; outline: none; } .nr-pv-editable:focus { border-color: var(--accent); border-inline-start-color: var(--accent); } .nr-pv-editable:empty::before { content: attr(data-ph); color: var(--text-muted); opacity: .6; } .nr-pv-guide { font-size: 12.5px; color: var(--text); background: color-mix(in srgb, var(--info) 14%, transparent); border-inline-start: 3px solid var(--info); border-radius: 6px; padding: 8px 11px; line-height: 1.6; margin-top: 6px; } .nr-pv-warn { font-size: 11.5px; color: var(--danger); margin-bottom: 8px; font-weight: 600; } .nr-pv-route-badge { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 10px; background: var(--surface2); color: var(--text-muted); } /* collapse (extra details) */ .nr-collapse-head { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-weight: 800; font-size: 15px; color: var(--text); } .nr-collapse-arrow { font-size: 11px; transition: transform .2s; color: var(--accent-fg); } .nr-collapse-arrow.open { transform: rotate(90deg); } .nr-collapse-sub { font-size: 11.5px; font-weight: 500; color: var(--text-muted); margin-inline-start: auto; } .nr-extra-body { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--border); animation: nrSlideDown .25s ease; } /* sticky-ish submit bar with confident summary */ .nr-submit-bar { margin-top: 20px; padding: 18px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); display: flex; flex-direction: column; gap: 12px; } .nr-summary { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.6; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .nr-summary .nr-sum-chip { background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; padding: 4px 12px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; } .nr-submit-btn { width: 100%; padding: 15px; font-size: 16px; } @media (max-width: 640px) { .nr-route-grid { gap: 8px; } .nr-route-card { padding: 14px 6px; } .nr-route-icon { font-size: 24px; } .nr-bulletin-row { flex-direction: column; align-items: stretch; } } .plan-warn { font-size: 12px; font-weight: 700; color: var(--accent-fg); background: color-mix(in srgb, #e8a020 12%, transparent); border-radius: 6px; padding: 6px 10px; margin-bottom: 10px; } /* Collapsible detailed fields */ .dyn-collapse { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface2); overflow: hidden; margin: 4px 0; } .dyn-collapse-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; user-select: none; transition: background .15s; } .dyn-collapse-head:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); } .dyn-collapse-arrow { font-size: 11px; color: var(--accent-fg); transition: transform .2s; display: inline-block; } .dyn-collapse-arrow.open { transform: rotate(90deg); } .dyn-collapse-title { font-weight: 700; font-size: 13.5px; flex: 1; } .dyn-collapse-count { background: var(--accent); color: var(--accent-ink, #0a0e1a); font-weight: 800; font-size: 11px; min-width: 20px; height: 20px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; } .dyn-collapse-body { padding: 4px 14px 14px; } .dyn-collapse-hint { font-size: 11.5px; color: var(--text-muted); line-height: 1.6; margin-top: 4px; } /* Report mode selector (auto / statement / report) */ .rmode-btn { background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-family: inherit; font-size: 11px; font-weight: 700; padding: 4px 10px; cursor: pointer; transition: all .15s; } /* v188 — نوع التقرير بصف الضيوف، ورقاقات صغيرة بدل أزرار كبيرة */ .nr-guest-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .nr-rmode-inline { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-inline-start: auto; } .nr-rmode-lbl { font-size: 11px; font-weight: 800; color: var(--text-muted); } /* v188 — قائمة الموديل صارت صغيرة ومدمجة (كانت بارزة ومزعجة) */ .nr-ra-provider { max-width: 148px; font-size: 11px !important; padding: 6px 8px !important; border-radius: 999px !important; opacity: .8; transition: opacity .15s; } .nr-ra-provider:hover, .nr-ra-provider:focus { opacity: 1; } .rmode-btn:hover { border-color: var(--accent); } .rmode-btn.selected { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: var(--accent); color: var(--accent-fg); } /* Live dashboard */ .dash-banner { border-radius: var(--radius-lg); padding: 16px 20px; margin-bottom: 16px; border: 1px solid var(--border); background: var(--surface); } .dash-banner.critical { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); } .dash-banner.calm { border-color: color-mix(in srgb, #2ecc71 40%, var(--border)); } .dash-banner-head { font-weight: 800; font-size: 15px; margin-bottom: 10px; } .dash-urgent-list { display: flex; flex-direction: column; gap: 8px; } .dash-urgent-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface2); border-radius: 10px; cursor: pointer; transition: transform .12s; } .dash-urgent-item:hover { transform: translateX(-3px); } .dash-fire { animation: firepulse 1.2s infinite; } @keyframes firepulse { 0%,100%{opacity:1} 50%{opacity:.4} } .dash-urgent-name { font-weight: 700; flex: 1; } .dash-urgent-status { font-size: 12px; color: var(--text-muted); background: var(--surface); padding: 3px 10px; border-radius: 10px; } .dash-cd { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 10px; } .dash-cd-over { background: color-mix(in srgb, var(--danger) 25%, transparent); color: var(--danger); } .dash-cd-now { background: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent-fg); } /* v557 — الصبغة من الثيم لا #e8a020 */ .dash-cd-ok { background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success); } .dash-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; } .dash-card { background: var(--surface); border: 1px solid var(--border); border-inline-start: 3px solid var(--c); border-radius: var(--radius); padding: 16px; cursor: pointer; transition: transform .12s; } .dash-card:hover { transform: translateY(-2px); } .dash-card-num { font-size: 30px; font-weight: 800; color: var(--c); line-height: 1; } .dash-card-label { font-size: 13px; color: var(--text-muted); margin-top: 6px; } .dash-today-title { font-weight: 800; font-size: 14px; margin-bottom: 10px; } .dash-today-wrap { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .dash-today-dept { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .dash-today-deptname { font-size: 12px; color: var(--text-muted); font-weight: 700; min-width: 70px; } .dash-today-person { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; background: var(--surface2); padding: 4px 8px; border-radius: 16px; } .dash-today-shift { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 10px; } .dash-today-empty, .dash-today-dept:empty { font-size: 13px; color: var(--text-muted); } @media (max-width: 640px) { .dash-cards { grid-template-columns: repeat(2, 1fr); } } /* system diagnostics */ .diag-summary { padding: 12px 16px; border-radius: 10px; font-weight: 800; margin-bottom: 14px; } .diag-ok { background: color-mix(in srgb, #2ecc71 15%, var(--surface2)); color: var(--success); } .diag-bad { background: color-mix(in srgb, var(--danger) 15%, var(--surface2)); color: var(--danger); } .diag-section { margin-bottom: 16px; } .diag-section-title { font-weight: 800; font-size: 14px; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border); } .diag-row { font-size: 13px; padding: 5px 8px; line-height: 1.6; border-radius: 6px; } .diag-row:hover { background: var(--surface2); } /* AI chat drawer */ .ai-chat-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 998; } .ai-chat-backdrop.open { opacity: 1; pointer-events: auto; } .ai-chat-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(560px, 94vw); min-width: 340px; max-width: 96vw; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -8px 0 40px rgba(0,0,0,.4); transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); z-index: 999; display: flex; flex-direction: column; } .ai-chat-drawer.open { transform: translateX(0); } /* drag handle to widen the drawer with the mouse */ .ai-chat-resize { position: absolute; top: 0; left: 0; width: 8px; height: 100%; cursor: ew-resize; z-index: 5; background: transparent; } .ai-chat-resize:hover { background: color-mix(in srgb, var(--accent) 30%, transparent); } .ai-chat-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .ai-chat-body { display: flex; flex: 1; min-height: 0; } .ai-chat-sidebar { width: 150px; border-inline-end: 1px solid var(--border); overflow-y: auto; padding: 8px; flex-shrink: 0; } .ai-chat-new { width: 100%; padding: 8px; border-radius: 8px; border: 1px dashed var(--accent); background: transparent; color: var(--accent-fg); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; margin-bottom: 8px; } .ai-chat-item { display: flex; align-items: center; gap: 4px; padding: 8px; border-radius: 8px; cursor: pointer; font-size: 12px; margin-bottom: 4px; background: var(--surface2); } .ai-chat-item.active { background: color-mix(in srgb, var(--accent) 20%, var(--surface2)); } .ai-chat-item-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ai-chat-item-del { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 11px; } .ai-chat-item-del:hover { color: var(--danger); } .ai-chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .ai-chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .ai-msg { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; } .ai-msg-user { align-self: flex-start; background: var(--accent); color: var(--accent-ink, #0a0e1a); border-bottom-inline-start-radius: 4px; } .ai-msg-ai { align-self: flex-end; background: var(--surface2); color: var(--text); border-bottom-inline-end-radius: 4px; } .ai-chat-input-row { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); align-items: flex-end; } .ai-chat-input-row textarea { flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-family: inherit; font-size: 14px; padding: 12px 14px; resize: none; min-height: 52px; max-height: 160px; line-height: 1.5; box-sizing: border-box; } .ai-chat-send { width: 44px; height: 44px; border-radius: 12px; border: none; background: var(--accent); color: var(--accent-ink, #0a0e1a); font-size: 18px; cursor: pointer; flex-shrink: 0; } body[data-theme="glass"] .ai-chat-drawer, body[data-theme="glasslight"] .ai-chat-drawer { backdrop-filter: blur(var(--glass-blur-strong)) saturate(200%); -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(200%); } @media (max-width: 640px) { .ai-chat-sidebar { width: 110px; } } .sched-move { display: inline-flex; flex-direction: column; gap: 1px; margin-inline-end: 4px; vertical-align: middle; } .sched-move button { width: 18px; height: 15px; padding: 0; border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted); font-size: 8px; cursor: pointer; border-radius: 3px; line-height: 1; } .sched-move button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-fg); } .sched-move button:disabled { opacity: .3; cursor: default; } /* guests on a request */ .guest-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; } .guest-row .guest-name { flex: 0 0 35%; } .guest-row .guest-role { flex: 1; } .guest-row input { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 13px; padding: 9px 12px; } .guest-del { width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px; border: 1px solid var(--border); background: var(--surface2); color: var(--danger); cursor: pointer; font-size: 13px; } .guest-del:hover { background: var(--danger); color: var(--danger-ink); } .guests-box { background: color-mix(in srgb, #b070e0 10%, var(--surface2)); border: 1px solid color-mix(in srgb, #b070e0 30%, var(--border)); border-radius: var(--radius); padding: 14px 16px; margin: 12px 0; } .guests-box-head { font-weight: 800; color: var(--violet); margin-bottom: 8px; font-size: 14px; } .guest-item { font-size: 14px; padding: 3px 0; } /* schedule cell tasks */ .sched-cell { position: relative; } .cell-shift-label { font-weight: 700; } .cell-task-btn { position: absolute; top: 2px; inset-inline-start: 2px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 11px; padding: 1px 4px; opacity: .55; line-height: 1.3; z-index: 2; } .cell-task-btn:hover { opacity: 1; border-color: var(--accent); } /* v128 — زر حذف المهمة من الخانة رأساً. باهت لحد ما تمرّر عليه: المهمة هي المحتوى، مش الزر. على الموبايل بيضل ظاهر (ما في hover). */ .cell-task, .sched-shift-task { position: relative; padding-inline-end: 16px; } .cell-task-x { position: absolute; inset-inline-end: 1px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: var(--text-muted); font-size: 11px; line-height: 1; cursor: pointer; padding: 2px 3px; opacity: 0; transition: opacity .15s, color .15s; border-radius: 4px; } .cell-task:hover .cell-task-x, .sched-shift-task:hover .cell-task-x { opacity: .7; } .cell-task-x:hover { opacity: 1 !important; color: #e05252; background: color-mix(in srgb, #e05252 14%, transparent); } @media (hover: none) { .cell-task-x { opacity: .55; } } .cell-task-count, .cell-task-badge { font-size: 9px; background: var(--accent); color: var(--accent-ink, #0a0e1a); border-radius: 8px; padding: 0 4px; font-weight: 800; margin-inline-start: 1px; } /* mission chips on schedule cells — visible, colored, global style */ .cell-tasks { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; } .cell-task { font-size: 10px; font-weight: 700; line-height: 1.5; background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-inline-start: 3px solid var(--accent); color: var(--text); border-radius: 6px; padding: 2px 6px; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .cell-task b { color: var(--accent-fg); } /* today-strip mission chips */ .sched-today-task { font-size: 10.5px; font-weight: 700; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-fg); border-radius: 10px; padding: 2px 8px; } .cell-task-badge { position: absolute; top: 2px; inset-inline-start: 2px; } .cell-tasks { margin-top: 5px; display: flex; flex-direction: column; gap: 2px; } .cell-task { font-size: 10px; background: color-mix(in srgb, var(--accent) 12%, var(--surface2)); color: var(--text); border-radius: 5px; padding: 2px 5px; text-align: start; line-height: 1.3; } .cell-task b { color: var(--accent-fg); } .task-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface2); border-radius: 8px; margin-bottom: 6px; } .task-item-time { font-weight: 800; color: var(--accent-fg); font-size: 12px; min-width: 42px; } .task-item-text { flex: 1; font-size: 13px; } .task-item-del { background: transparent; border: none; color: var(--danger); cursor: pointer; font-size: 13px; } #tasks-modal .field input { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 13px; padding: 9px 12px; } .dtb-route { float: inline-end; } .route-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; padding: 2px 10px; border-radius: 20px; margin-inline-start: 5px; } .person-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); padding: 3px 9px 3px 4px; border-radius: 20px; font-weight: 700; } /* Unified role colors used across the whole system: reporter / designer / montage */ .chip-reporter { background: color-mix(in srgb, #55a8f0 16%, transparent); color: var(--info); } .chip-designer { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-fg); } .chip-montage { background: color-mix(in srgb, #b070e0 18%, transparent); color: var(--violet); } .req-card-people { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 4px; } .user-badge-avatar { width: 26px; height: 26px; border-radius: 50%; background-size: cover; background-position: center; display: inline-block; vertical-align: middle; border: 1.5px solid var(--accent); margin-inline-end: 4px; } .user-badge { background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; padding: 5px 14px; font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 6px; } .lang-toggle, .logout-btn { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; color: var(--text-muted); font-size: 12px; cursor: pointer; font-family: inherit; } .notif-bell { position: relative; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; transition: all .18s; } .notif-bell:hover { border-color: var(--accent); transform: translateY(-1px); } /* v172 — لما في غير مقروء: الجرس بيتوهّج وبينبض بهدوء */ .notif-bell.has-unread { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface2)); animation: bellGlow 2.4s ease-in-out infinite; } @keyframes bellGlow { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } } /* v172 — رنّة الجرس لما يوصل إشعار جديد */ .notif-bell.ringing .nav-ico { animation: bellRing .9s ease-in-out; transform-origin: top center; } @keyframes bellRing { 0%,100% { transform: rotate(0); } 15% { transform: rotate(18deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-7deg); } 75% { transform: rotate(4deg); } } .notif-dot { position: absolute; top: -5px; inset-inline-end: -5px; background: var(--danger); color: white; font-size: 10px; font-weight: 900; border-radius: 10px; min-width: 17px; height: 17px; display: none; align-items: center; justify-content: center; padding: 0 4px; box-shadow: 0 2px 6px rgba(224,82,82,.45); } .notif-dot.show { display: flex; animation: dotPop .3s ease; } @keyframes dotPop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } } /* v172 — المعاينة المنزلقة: بطاقة إشعار بتنزل من فوق */ .notif-toast { position: fixed; top: 14px; inset-inline-end: 16px; z-index: 2147483200; /* v321 — فوق المودالات (--asst-z 2147482800): التوست كان يختفي خلف نافذة المصادر */ background: var(--surface); border: 1.5px solid var(--accent); border-radius: 14px; padding: 12px 16px; max-width: 330px; box-shadow: 0 12px 40px rgba(0,0,0,.35); display: flex; align-items: flex-start; gap: 10px; cursor: pointer; animation: toastIn .35s cubic-bezier(.2,.9,.3,1.2); } .notif-toast.urgent { border-color: var(--danger); animation: toastIn .35s cubic-bezier(.2,.9,.3,1.2), bellGlow 1.2s ease-in-out infinite; } .notif-toast.hide { animation: toastOut .3s ease forwards; } @keyframes toastIn { from { transform: translateY(-80px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes toastOut { to { transform: translateY(-80px); opacity: 0; } } .notif-toast-ic { font-size: 20px; } .notif-toast-txt { font-size: 12.5px; line-height: 1.5; font-weight: 600; } .notif-toast-x { margin-inline-start: auto; opacity: .5; font-size: 13px; } .notif-toast-x:hover { opacity: 1; } .notif-bell svg, .notif-bell .nav-ico { pointer-events: none; } .notif-panel { position: absolute; top: 50px; inset-inline-end: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 340px; max-height: 400px; overflow-y: auto; z-index: 150; display: none; box-shadow: 0 10px 40px rgba(0,0,0,.5); } .notif-panel.open { display: block; } /* v623 — الفئة من النوع (tfNotifCat): أيقونةٌ خطّيّة بلون فئتها وحدٌّ رفيع — الخلفيّة محايدة، وغير المقروء أعلى قليلاً من السطح، والعاجل وحده بالأحمر. كانت صبغةً كاملة بألوانٍ مكتوبة تخمّن النوع من النصّ */ .notif-item { --nc: var(--text-muted); display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid var(--border); border-inline-start: 3px solid color-mix(in srgb, var(--nc) 70%, transparent); font-size: 13px; cursor: pointer; } .notif-item:last-child { border-bottom: none; } .notif-item.unread { background: var(--surface2); } .notif-item.unread .notif-line { font-weight: 600; } .notif-item.nc-work { --nc: var(--accent-fg); } .notif-item.nc-decide { --nc: var(--info); } .notif-item.nc-talk { --nc: var(--lane-g, var(--info)); } .notif-item.nc-shift { --nc: var(--success); } .notif-item.nc-thanks { --nc: var(--violet, var(--accent)); } .notif-item.nc-system { --nc: var(--text-muted); } .notif-item.notif-urgent { --nc: var(--danger); } .notif-item.notif-urgent.unread { background: color-mix(in srgb, var(--danger) 10%, var(--surface2)); } .notif-ic { flex: 0 0 auto; display: inline-flex; margin-top: 2px; color: var(--nc); } .notif-tx { flex: 1; min-width: 0; } .notif-urg { font-weight: 700; color: var(--danger); } /* team ratings in stats */ .rating-stat-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } .rating-stat-row:last-child { border-bottom: none; } .rating-stat-name { flex: 1; font-weight: 700; font-size: 13.5px; min-width: 0; } .rating-stat-stars { color: #f5c518; font-size: 16px; letter-spacing: 1px; white-space: nowrap; } .rating-stat-num { color: var(--text); font-weight: 800; font-size: 13px; margin-inline-start: 4px; } .rating-stat-count { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; } .notif-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; } .theme-picker { position: relative; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; } .theme-panel { position: absolute; top: 42px; inset-inline-end: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 200px; z-index: 150; display: none; padding: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.5); } .theme-panel.open { display: block; } .theme-opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 13px; cursor: pointer; transition: background .15s; } .theme-opt:hover { background: var(--surface2); } .theme-opt.active { background: var(--surface2); font-weight: 700; color: var(--accent-fg); } .theme-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid; flex-shrink: 0; } .page { display: none; padding: 28px; max-width: 1200px; margin: 0 auto; } /* v95: the kanban boards need real width — other pages keep the 1200px cap */ #page-designer, #page-montage { max-width: min(1600px, 100%); } /* v183 — نقلة أنعم بين الأقسام: انسياب خفيف مع تكبير بسيط بدل قفزة عمودية */ /* v569 — fill: backwards لا both. «both» يُبقي آخر إطار (transform + filter:blur(0)) على الصفحة للأبد: كلّ position:fixed داخلها ينحبس فيها (شريط الكتابة والنوافذ على الهاتف)، والرسوم تغلب :hover و:active فلا يعمل انكماش الضغط على البطاقات. الإطار الأخير هو الحال الطبيعيّ أصلاً. */ .page.active { display: block; animation: pageIn .42s cubic-bezier(.16,.84,.28,1) backwards; } @keyframes pageIn { from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(2px); } 60% { opacity: 1; filter: blur(0); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } /* أول أربع بطاقات بالصفحة بتوصل بتتابع لطيف — بيعطي إحساس حياة */ .page.active > *:nth-child(1) { animation: pageIn .44s cubic-bezier(.16,.84,.28,1) backwards .02s; } .page.active > *:nth-child(2) { animation: pageIn .44s cubic-bezier(.16,.84,.28,1) backwards .06s; } .page.active > *:nth-child(3) { animation: pageIn .44s cubic-bezier(.16,.84,.28,1) backwards .10s; } .page.active > *:nth-child(4) { animation: pageIn .44s cubic-bezier(.16,.84,.28,1) backwards .14s; } @media (prefers-reduced-motion: reduce) { .page.active, .page.active > * { animation: none !important; } } .form-header { margin-bottom: 24px; } .form-header h1 { font-size: 22px; font-weight: 900; } .form-header p { color: var(--text-muted); font-size: 13px; margin-top: 4px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; margin-bottom: 18px; } .card-title { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } /* collapsible settings cards */ .settings-card-toggle { cursor: pointer; user-select: none; margin-bottom: 16px; } /* ═══════════════════════════════════════════════════════════════ v311 — قشرة المساعدين الموحّدة 🤖 كل مساعد بالبرنامج (أونلاين · أخبار · دوامات · بريد) بياخد نفس القياس ونفس زر الإغلاق ونفس السلوك — والمهام بتضل مختلفة لكل قسم. المتغيرات هون = مصدر الحقيقة الوحيد؛ أي مساعد جديد بيرثها. ═══════════════════════════════════════════════════════════════ */ :root { --asst-w: min(1060px, 96vw); /* عرض موحّد — أوسع من قبل */ --asst-h: min(86vh, 860px); --asst-side: 232px; /* عمود المحادثات */ --asst-radius: 16px; --asst-z: 2147482800; } @media (max-width: 900px) { :root { --asst-w: 96vw; --asst-side: 0px; } } /* زر الإغلاق الموحّد — كان إكس أبيض على فاتح، مش باين */ .asst-x, .ol-x, .nw-x, .scb-x { display: inline-flex !important; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; cursor: pointer; font-size: 0; line-height: 0; color: var(--text) !important; background: color-mix(in srgb, var(--surface) 92%, transparent) !important; border: 1px solid var(--border) !important; transition: all .14s; } .asst-x::before, .ol-x::before, .nw-x::before, .scb-x::before { content: ''; width: 13px; height: 13px; background: currentColor; -webkit-mask: no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); mask: no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); } .asst-x:hover, .ol-x:hover, .nw-x:hover, .scb-x:hover { color: var(--danger) !important; border-color: var(--danger) !important; background: color-mix(in srgb, var(--danger) 10%, transparent) !important; } /* ═══════════════════════════════════════════════════════════════ v310 — إصلاحات عامة بالواجهة ═══════════════════════════════════════════════════════════════ */ /* ١) مؤشر حفظ المفتاح — بتشوف إنو انحفظ فوراً */ .key-saving { border-color: var(--accent) !important; opacity: .7; } .key-saved { border-color: var(--success, #28a745) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--success, #28a745) 25%, transparent) !important; transition: box-shadow .3s, border-color .3s; } /* ٢) منع تسرّب السكرول للخلفية — لما يخلص سكرول البوب أب كانت الصفحة يلي ورا تبلّش تنزل. overscroll-behavior بتوقفها. */ .modal, .modal-content, .overlay, .sheet, .drawer, [class*="-modal"], [class*="-overlay"], [class*="-reader"], [class*="-body"], [class*="-scroll"], [class*="-list"] { overscroll-behavior: contain; } body.modal-open { overflow: hidden; } /* ٣) توسيط مضمون لأي طبقة نوافذ + احترام الشاشات الصغيرة */ .overlay, [id$="-overlay"], [class$="-back"] { align-items: center; justify-content: center; } @media (max-width: 640px) { /* v543 — .hlr-sheet ورقة العناوين في الصفحة لا نافذة: كانت تُحشر بـ560px و88vh على الهاتف فتنقطع الصفوف */ .modal-content, [class*="-reader"], [class*="-sheet"]:not(.hlr-sheet) { max-height: 88vh !important; width: min(96vw, 560px) !important; } } /* ٤) أزرار الإغلاق: تباين مضمون بكل الثيمات كان الإكس أبيض على خلفية فاتحة = مش باين */ .ol-x, .nw-x, .close-btn, [class$="-close"], [class*="-x-btn"] { color: var(--text) !important; background: var(--surface2) !important; border: 1px solid var(--border) !important; } .ol-x:hover, .nw-x:hover, .close-btn:hover { color: var(--danger) !important; border-color: var(--danger) !important; } /* ═══ v306 — تحكّم بالأقسام: رقاقات أدوار بنمط أزرار الكونسول ═══ */ .sec-ctl-list { display: flex; flex-direction: column; gap: 10px; } .sec-ctl-row { padding: 11px 13px; border-radius: 11px; background: var(--surface2); border: 1px solid var(--border); } .sec-ctl-row.customized { border-inline-start: 3px solid var(--accent); } .sec-ctl-name { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font-size: 13px; } .sec-ctl-name svg { width: 16px; height: 16px; color: var(--text-muted); } .sec-ctl-reset { margin-inline-start: auto; font-family: inherit; font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 7px; cursor: pointer; color: var(--accent-fg); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); } .sec-ctl-roles { display: flex; flex-wrap: wrap; gap: 5px; } .sec-ctl-chip { font-family: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer; padding: 5px 11px; border-radius: 8px; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); transition: all .13s; } .sec-ctl-chip::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-inline-end: 5px; background: var(--border); transition: all .13s; } .sec-ctl-chip.on { color: var(--text); border-color: color-mix(in srgb, var(--success, #28a745) 45%, var(--border)); background: color-mix(in srgb, var(--success, #28a745) 7%, var(--surface)); } .sec-ctl-chip.on::before { background: var(--success, #28a745); box-shadow: 0 0 6px color-mix(in srgb, var(--success, #28a745) 70%, transparent); } .sec-ctl-chip:hover { border-color: var(--accent); } .sec-ctl-chip:active { transform: translateY(1px); } .settings-card-toggle .sct-chevron { margin-inline-start: auto; transition: transform .25s; font-size: 13px; } .sc-collapsed .settings-card-toggle { margin-bottom: 0; } .sc-collapsed .settings-card-toggle .sct-chevron { transform: rotate(-90deg); } .sc-collapsed .settings-card-body { display: none; } .settings-card-toggle:hover { color: var(--accent-fg); } /* ═══ v163 — أقسام الحساب العادي ═══ */ /* شبكة الثيمات */ .ms-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 9px; } .ms-theme-opt { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 11px; border: 1.5px solid var(--border); background: var(--surface2); cursor: pointer; font-size: 13px; font-weight: 600; transition: all .15s; } .ms-theme-opt:hover { border-color: var(--accent); transform: translateY(-1px); } .ms-theme-opt.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface2)); font-weight: 800; color: var(--accent-fg); } .ms-theme-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid; flex-shrink: 0; } /* شبكة الإحصائيات */ .ms-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; } .ms-stat-box { background: var(--surface2); border: 1px solid var(--border); border-radius: 13px; padding: 16px 12px; text-align: center; transition: transform .15s; } .ms-stat-box:hover { transform: translateY(-2px); } .ms-stat-ic { font-size: 24px; margin-bottom: 6px; } .ms-stat-val { font-size: 28px; font-weight: 800; color: var(--text); line-height: 1; } .ms-stat-lbl { font-size: 12px; color: var(--text-muted); margin-top: 5px; font-weight: 600; } /* عن البرنامج */ .ms-about { text-align: center; padding: 10px 0; } .ms-about-logo { font-size: 44px; margin-bottom: 6px; } .ms-about-name { font-size: 22px; font-weight: 800; color: var(--accent-fg); letter-spacing: .5px; } .ms-about-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; } .ms-about-ver { display: inline-block; margin-top: 10px; padding: 3px 12px; border-radius: 20px; background: var(--surface2); border: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--text); } .ms-about-dev { font-size: 12px; color: var(--text-muted); margin-top: 12px; } .card-title::after { content: ''; flex: 1; height: 1px; background: var(--border); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-grid.cols3 { grid-template-columns: 1fr 1fr 1fr; } .form-full { grid-column: 1 / -1; } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 13px; font-weight: 600; color: var(--text-muted); } .field input, .field select, .field textarea { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: inherit; font-size: 14px; padding: 10px 14px; width: 100%; box-sizing: border-box; min-width: 0; max-width: 100%; } .field input, .field select, .field textarea { transition: border-color .15s, box-shadow .15s; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); } .field textarea { resize: vertical; min-height: 90px; } /* v125: نوع الجرافيك انخبّى من شاشة الطلب — صار بالبطاقات. ⚠️ الشبكة بتضل بالـDOM و`selectedTypes` بيضل شغّال: بيغذّي renderAdaptiveFields + الـAI prompt (ai.js:60)، والـAI بيعبّيه لحاله (core.js:1555,1715). خبّيه، ما تحذفه — درس مدفوع الثمن. */ #nr-type-block { display: none !important; } .type-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } /* v125: رقم الخبر + منتج النشرة — صف واحد بقسم النشرة */ .nr-bulletin-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .nr-bulletin-meta .field { flex: 1; min-width: 160px; } .type-card { background: var(--surface2); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 10px 6px; cursor: pointer; text-align: center; transition: all .2s; } .type-card:hover { border-color: var(--accent); background: var(--surface); } .type-card.selected { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px rgba(232,160,32,.2); } .type-icon { font-size: 16px; margin-bottom: 4px; display: flex; justify-content: center; color: var(--text); } /* v552 — SVG */ .type-name { font-size: 10.5px; font-weight: 700; color: var(--text); line-height: 1.3; } .priority-row { display: flex; gap: 10px; } .priority-btn { flex: 1; padding: 10px; border-radius: var(--radius); border: 2px solid var(--border); background: var(--surface2); color: var(--text-muted); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .priority-btn.p-urgent.selected { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 15%, var(--surface)); color: var(--danger); } .priority-btn.p-normal.selected { border-color: var(--success); background: color-mix(in srgb, var(--success) 15%, var(--surface)); color: var(--success); } .priority-btn.p-tomorrow.selected { border-color: var(--info); background: color-mix(in srgb, var(--info) 15%, var(--surface)); color: var(--info); } /* v137: عدة أيام — بنفسجي، وخانة اختيار الأيام */ .priority-btn.p-multiday.selected { border-color: #8b5cf6; background: color-mix(in srgb, #8b5cf6 15%, var(--surface)); color: #8b5cf6; } .nr-multiday-box { margin-top: 12px; padding: 12px 14px; background: color-mix(in srgb, #8b5cf6 8%, var(--surface2)); border: 1px solid color-mix(in srgb, #8b5cf6 28%, transparent); border-radius: 11px; animation: nrSlideDown .3s ease; } .nr-multiday-box > label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 9px; color: var(--text); } .nr-days-row { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; } .nr-day-chip { padding: 7px 14px; border-radius: 8px; background: var(--surface); border: 1.5px solid var(--border); color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all .15s; } .nr-day-chip:hover { border-color: #8b5cf6; } .nr-day-chip.selected { background: #8b5cf6; border-color: #8b5cf6; color: #fff; } .nr-days-input { width: 110px; padding: 7px 11px; border-radius: 8px; background: var(--surface); border: 1.5px solid var(--border); color: var(--text); font-family: inherit; font-size: 12.5px; } /* step number chip on new-request card titles */ .step-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-ink, #0a0e1a); font-size: 14px; font-weight: 800; margin-inline-end: 8px; flex-shrink: 0; } /* route (designer / montage / both) selector */ .route-row { display: flex; gap: 10px; } .route-btn { flex: 1; padding: 12px 10px; border-radius: var(--radius); border: 2px solid var(--border); background: var(--surface2); color: var(--text-muted); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s; } .route-btn.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, var(--surface)); color: var(--accent-fg); } .upload-zone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 20px; text-align: center; cursor: pointer; background: var(--surface2); } .upload-zone:hover { border-color: var(--accent); } .upload-zone p { font-size: 13px; color: var(--text-muted); margin-top: 6px; } .upload-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } /* ── REFERENCE IMAGES: distinctive treatment ── */ .ref-card { border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); position: relative; } .ref-card::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--accent), var(--accent2)); border-radius: var(--radius-lg) 0 0 var(--radius-lg); } .ref-upload-zone { border: 2px dashed color-mix(in srgb, var(--accent) 50%, var(--border)); padding: 28px 20px; transition: all .2s; } .ref-upload-zone:hover, .ref-upload-zone.drag-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface2)); transform: scale(1.01); } .ref-layout { display: flex; gap: 14px; align-items: stretch; } .ref-layout .ref-upload-zone { flex: 1; min-width: 0; margin: 0; } .ref-gallery-side { display: flex; flex-direction: column; gap: 10px; margin-top: 0; overflow-y: auto; max-height: 220px; width: 200px; flex-shrink: 0; padding: 0 4px; } .ref-gallery-side:empty { display: none; } .ref-gallery-side .ref-gallery-item { width: 100%; height: 90px; } @media (max-width: 640px) { .ref-layout { flex-direction: column; } .ref-gallery-side { width: 100%; flex-direction: row; overflow-x: auto; max-height: none; } .ref-gallery-side .ref-gallery-item { width: 90px; flex-shrink: 0; } } .ref-gallery { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; padding-bottom: 4px; } .ref-gallery:empty { margin-top: 0; } .ref-gallery-item { position: relative; width: 90px; height: 90px; flex-shrink: 0; border-radius: 10px; overflow: hidden; border: 2px solid var(--border); transition: transform .15s, border-color .15s; cursor: pointer; } .ref-gallery-item:hover { transform: scale(1.05); border-color: var(--accent); } .ref-gallery-item img { width: 100%; height: 100%; object-fit: cover; } .ref-gallery-item .ref-remove { position: absolute; top: 3px; inset-inline-end: 3px; width: 18px; height: 18px; background: rgba(0,0,0,.75); color: white; border-radius: 50%; font-size: 11px; display: flex; align-items: center; justify-content: center; } .ref-gallery-item .ref-remove:hover { background: var(--danger); } .upload-thumb { width: 70px; height: 70px; border-radius: 8px; object-fit: cover; border: 2px solid var(--border); } .ai-box { background: color-mix(in srgb, var(--success) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 18px; display: none; } .ai-box.visible { display: block; } .ai-box-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .ai-badge { background: var(--success); color: var(--success-ink, #0a0e1a); font-size: 11px; font-weight: 900; padding: 3px 10px; border-radius: 20px; } .ai-content { font-size: 14px; color: var(--text); line-height: 1.8; } .ai-loading { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 14px; } .spinner { width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--success); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* v201 — «الكبسة الفيزيائية»: الزر الأساسي صار بحافة سفلية بتغوص وقت الكبس (نفس إحساس زر الـCue على كونسول البث) — هوية TakeFlow الجديدة المتفق عليها */ .btn-submit { width: 100%; padding: 15px; background: var(--accent); color: var(--accent-ink, #0a0e1a); border: none; border-radius: var(--radius-lg); font-family: inherit; font-size: 16px; font-weight: 900; cursor: pointer; box-shadow: 0 4px 0 0 color-mix(in srgb, var(--accent) 50%, #000); transition: background .15s, transform .1s, box-shadow .1s; } .btn-submit:hover { background: var(--accent2); box-shadow: 0 4px 0 0 color-mix(in srgb, var(--accent) 50%, #000), 0 9px 18px -6px color-mix(in srgb, var(--accent) 45%, transparent); } .btn-submit:active { transform: scale(.965); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, #000); } /* v571 — الضغط انكماشٌ لا نزول (هويّة التصميم) */ .btn-submit.secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border); box-shadow: 0 4px 0 0 color-mix(in srgb, var(--border) 55%, #000); } .btn-submit.secondary:hover { box-shadow: 0 4px 0 0 color-mix(in srgb, var(--border) 55%, #000); } .btn-submit.secondary:active { box-shadow: 0 0 0 0 transparent; } .btn-submit.danger-btn { background: var(--danger); color: white; box-shadow: 0 4px 0 0 color-mix(in srgb, var(--danger) 45%, #000); } .btn-submit.danger-btn:active { box-shadow: 0 0 0 0 transparent; } .btn-submit:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; } /* ═══════════ v201 — نظام المظهر الشخصي (لكل مستخدم، محفوظ عالجهاز) ═══════════ */ /* حواف حادة — بس المستخدم يختارها من «إعداداتي» */ html[data-corners="sharp"] body { --radius: 6px; --radius-lg: 8px; } /* كثافة مضغوطة — معلومات أكتر بمساحة أقل */ html[data-density="compact"] .card { padding: 14px; margin-bottom: 12px; } html[data-density="compact"] .btn-submit { padding: 11px; font-size: 14.5px; } html[data-density="compact"] .stat-card { padding: 12px; } /* ملمس فيلمي خفيف جداً (حبيبات فيلم — إحساس مادة بث) */ #tf-grain { position: fixed; inset: 0; pointer-events: none; z-index: 2000; opacity: 0; mix-blend-mode: overlay; transition: opacity .3s; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; } html[data-texture="grain"] #tf-grain { opacity: .05; } /* حلقة تركيز بهوية البرنامج — بتبيّن بس بالتنقل بالكيبورد (:focus-visible) */ :where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* شريط تمرير بلون الهوية — القواعد الأدق للمكوّنات بتغلب هالقاعدة العامة */ html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 50%, var(--border)) transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 8px; } *::-webkit-scrollbar-track { background: transparent; } /* خط أرقام البث الحية — إحساس شاشة استوديو رقمية */ .tf-digi, .stat-num { font-family: 'Share Tech Mono', 'Inter', monospace; font-variant-numeric: tabular-nums; letter-spacing: .5px; } /* ═══════════ v202 — لون القسم + ومضة السكان + حواف الأزرار الصغيرة ═══════════ */ /* كل قسم إلو لون هوية خفيف — الافتراضي لون الثيم نفسو (صفر تعارض مع الثيمات) */ body { --section-accent: var(--accent); } body[data-section="designer"] { --section-accent: #2bb8a8; } body[data-section="montage"] { --section-accent: #a86ae0; } body[data-section="schedule"] { --section-accent: #4a9de0; } body[data-section="hr"] { --section-accent: #4a9de0; } /* علامة القسم جنب عنوان التوب بار — بتاخد لون القسم الحالي */ .topbar-title::before { content: ""; display: inline-block; width: 4px; height: 15px; border-radius: 2px; background: var(--section-accent); margin-inline-end: 9px; vertical-align: -2px; transition: background .3s; } /* ومضة «سكان» توقيعية عند تبديل الأقسام — بتتلوّن بلون القسم الجديد */ #tf-scan { position: fixed; inset: 0; pointer-events: none; z-index: 900; opacity: 0; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--section-accent) 14%, rgba(255,255,255,.10)) 46%, rgba(255,255,255,.02) 52%, transparent 60%); } #tf-scan.play { animation: tfScanSweep .38s linear; } @keyframes tfScanSweep { 0% { opacity: 0; transform: translateY(-100%); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(100%); } } @media (prefers-reduced-motion: reduce) { #tf-scan.play { animation: none; } } /* الأزرار الصغيرة (إضافة/حذف) — نفس الكبسة الفيزيائية بس أخف */ .btn-add { box-shadow: 0 3px 0 0 color-mix(in srgb, var(--accent) 50%, #000); transition: background .15s, transform .1s, box-shadow .1s; } .btn-add:active { transform: translateY(3px); box-shadow: 0 0 0 0 transparent; } .btn-del { transition: color .15s, border-color .15s, transform .1s; } .btn-del:hover { color: var(--danger); border-color: var(--danger); } .btn-del:active { transform: translateY(1px); } /* v212 — «انقرأت» صارت شارة واضحة بدل نص باهت */ .mr-seen { display: inline-flex; align-items: center; gap: 5px; width: fit-content; margin-top: 8px; font-size: 11px; font-weight: 800; color: var(--success, #3ee0a0); background: color-mix(in srgb, var(--success, #3ee0a0) 13%, transparent); border: 1px solid color-mix(in srgb, var(--success, #3ee0a0) 45%, transparent); border-radius: 999px; padding: 3px 11px; } /* v212 — ملخص الجلسات + زر البوب أب */ .sess-sum { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; } .sess-sum b { font-family: 'Share Tech Mono', monospace; } /* ═══════════ v203 ═══════════ */ /* تبويبات الإعدادات */ .st-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; padding: 6px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-lg); width: fit-content; max-width: 100%; } .st-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: none; background: transparent; color: var(--text-muted); font-family: inherit; font-size: 13.5px; font-weight: 700; border-radius: var(--radius); cursor: pointer; transition: background .15s, color .15s; } .st-tab:hover { color: var(--text); } .st-tab.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px color-mix(in srgb, #000 18%, transparent); } .st-tab.active > span:first-child { filter: none; } #page-settings.st-ready .st-panel { display: none; } #page-settings.st-ready .st-panel.st-on { display: block; animation: pageIn .3s cubic-bezier(.16,.84,.28,1) backwards; } /* أزرار اقتراح البطاقات — كانت تتكدّس عمودياً لأن btn-submit عرضو 100% */ .nr-pv-toolbar .btn-submit { width: auto; } /* شريط أدوات الدوام: قائمة «المزيد» */ .sched-more-wrap { position: relative; display: inline-flex; } .sched-more-menu { display: none; position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 60; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 6px; min-width: 210px; box-shadow: 0 12px 30px -8px color-mix(in srgb, #000 45%, transparent); flex-direction: column; gap: 4px; } .sched-more-menu, .sched-more-wrap.open { z-index: 900; } /* v205 — كانت 60 فبتنغطى بالشريط اللاصق */ .sched-more-wrap.open .sched-more-menu { display: flex; animation: pageIn .18s ease both; } .sched-more-menu .sched-tool-btn { width: 100%; justify-content: flex-start; } /* v552 — عناوين المجموعات وفاصل المسح داخل القائمة */ .smm-grp { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--text-muted); padding: 6px 10px 2px; } .smm-sep { height: 1px; background: var(--border); margin: 4px 6px; } .sched-more-menu .sched-tool-btn.danger { background: transparent; border-color: transparent; color: var(--text); } .sched-more-menu .sched-tool-btn.danger:hover { border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); color: var(--danger); background: var(--surface2); } .sched-tool-btn .stb-ic svg { display: block; } /* دليل الشيفتات قابل للطي */ #sched-legend.legend-collapsed { display: none; } /* حركة ناعمة بين تبويبات مركز الدوامات */ .sc-fade { animation: scFadeIn .22s ease both; } @keyframes scFadeIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } /* لمسة توسّع السايدبار: خيط ضو بلون الثيم عالحافة وقت التوسّع عالماوس */ .sidebar.auto-hover.collapsed:hover { border-inline-end-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 6px 0 24px -12px color-mix(in srgb, var(--accent) 35%, transparent); } [dir="rtl"] .sidebar.auto-hover.collapsed:hover { box-shadow: -6px 0 24px -12px color-mix(in srgb, var(--accent) 35%, transparent); } /* ═══════════ v204 ═══════════ */ /* 🗒️ نوتات الفريق */ .nt-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; } .nt-colorbar { display: inline-flex; gap: 7px; align-items: center; } .nt-cdot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; background: var(--c, var(--surface2)); transition: transform .12s, border-color .12s; padding: 0; } .nt-cdot.all { background: var(--surface2); color: var(--text-muted); font-size: 12px; } .nt-cdot:hover { transform: scale(1.12); } .nt-cdot.on { border-color: var(--text); transform: scale(1.12); } .nt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; } .nt-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--nc); border-radius: var(--radius-lg); padding: 14px 16px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; min-height: 130px; transition: transform .15s, box-shadow .15s; } .nt-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--nc) 45%, #000); } .nt-card.pinned { border-top-width: 5px; } .nt-pin { position: absolute; top: -9px; inset-inline-end: 12px; font-size: 15px; filter: drop-shadow(0 2px 3px #0006); } .nt-title { font-weight: 800; font-size: 14.5px; color: var(--text); } .nt-body { font-size: 12.5px; color: var(--text-muted); white-space: pre-wrap; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; flex: 1; } .nt-foot { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--text-muted); border-top: 1px dashed var(--border); padding-top: 7px; flex-wrap: wrap; } .nt-owner { font-weight: 700; } .nt-week { color: var(--nc); font-weight: 700; } .nt-when { margin-inline-start: auto; } .nt-del { background: none; border: none; cursor: pointer; font-size: 12px; opacity: 0; transition: opacity .15s; padding: 0 2px; } .nt-card:hover .nt-del { opacity: .8; } /* 📧 بريد: بطاقات المحادثة الحقيقية */ .mr-msg { position: relative; box-shadow: 0 2px 8px -4px color-mix(in srgb, #000 30%, transparent); } .mr-m-head { display: flex; align-items: center; gap: 10px; } .mr-av { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-weight: 900; font-size: 14px; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--avc) 85%, #fff), var(--avc)); } .mr-m-id { display: flex; flex-direction: column; min-width: 0; flex: 1; } .mr-m-id .mr-from { font-weight: 800; } .mr-m-id .mr-to { font-size: 11px; } /* 📧 صندوق الردّ الاحترافي */ .mr-composer { border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: var(--radius-lg); background: var(--surface); padding: 12px 14px; margin-top: 12px; display: flex; flex-direction: column; gap: 9px; box-shadow: 0 6px 20px -10px color-mix(in srgb, var(--accent) 30%, transparent); } .mr-c-top { display: flex; align-items: center; gap: 9px; } .mr-c-lbl { font-weight: 800; font-size: 13px; } .mr-c-hint { margin-inline-start: auto; font-size: 10.5px; color: var(--text-muted); } .mr-composer .mr-qr-in { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface2); color: var(--text); font-family: inherit; font-size: 13.5px; padding: 10px 12px; resize: none; } .mr-composer .mr-qr-in:focus { outline: none; border-color: var(--accent); } .mr-c-bar { display: flex; gap: 8px; align-items: center; } .mr-c-tool { background: transparent; border: 1px dashed var(--border); border-radius: 8px; color: var(--text-muted); font-family: inherit; font-size: 11.5px; font-weight: 700; padding: 7px 11px; cursor: pointer; transition: .15s; display: inline-flex; align-items: center; gap: 5px; } .mr-c-tool:hover { color: var(--text); border-color: var(--accent); } .mr-composer .mr-qr-send { margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: var(--accent); color: var(--accent-ink, #14161f); border: none; border-radius: 13px; cursor: pointer; box-shadow: 0 3px 0 0 color-mix(in srgb, var(--accent) 50%, #000); transition: .1s; } .mr-composer .mr-qr-send:active { transform: translateY(3px); box-shadow: none; } /* 📤 شريط التراجع عن الإرسال */ /* v551 — كان inset-inline-start (يصير right في RTL) مع translateX(-50%) الذي لا ينقلب، وpageIn بملء «both» يستبدل transform كلّه في آخره: فيقف الشريط بين الوسط والطرف. المركز بـleft الفيزيائيّ، والظهور بـtuIn الذي يعود إلى transform العنصر نفسه. */ #mail-undo { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 24px); box-sizing: border-box; z-index: 12000; display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 700; box-shadow: 0 14px 34px -10px #000a; animation: tuIn .25s ease both; } body:has(#tf-quickbar) #mail-undo { bottom: 78px; } @media (max-width: 768px) { body #mail-undo, body:has(#tf-quickbar) #mail-undo { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } } #mail-undo.bye { opacity: 0; transition: opacity .3s; } #mail-undo button { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent2, var(--accent)); border: 1px solid var(--accent); border-radius: 999px; font-family: inherit; font-weight: 800; font-size: 12px; padding: 5px 13px; cursor: pointer; } /* ═══════════ v209 — 🎨 «لوحتي»: اللوحة الحرّة الفاخرة ═══════════ */ .nb-upgrade { background: color-mix(in srgb, var(--wait, #e0c040) 14%, var(--surface)); border: 1px dashed color-mix(in srgb, #e0c040 60%, var(--border)); border-radius: var(--radius); padding: 10px 14px; font-size: 12.5px; margin-bottom: 12px; } .nb-duebar { background: color-mix(in srgb, #e8b93d 16%, var(--surface)); border: 1px solid color-mix(in srgb, #e8b93d 50%, var(--border)); border-radius: var(--radius); padding: 9px 14px; font-size: 13px; margin-bottom: 12px; animation: nbGlowP 2s ease-in-out infinite; } .nb-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; } .nb-vtabs { display: inline-flex; gap: 4px; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 4px; } .nb-vtab { border: none; background: transparent; color: var(--text-muted); font-family: inherit; font-size: 12.5px; font-weight: 800; padding: 8px 14px; border-radius: 9px; cursor: pointer; transition: .15s; } .nb-vtab.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px #0004; } .nb-search { flex: 1; min-width: 170px; } .nb-newwrap { position: relative; } .nb-newbtn { width: auto; padding: 10px 18px; } .nb-newmenu { display: none; position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 700; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 6px; min-width: 190px; box-shadow: 0 14px 34px -10px #000a; flex-direction: column; gap: 3px; } .nb-newwrap.open .nb-newmenu { display: flex; animation: pageIn .16s ease both; } .nb-newmenu button { border: none; background: transparent; color: var(--text); font-family: inherit; font-size: 13px; font-weight: 700; text-align: start; padding: 9px 12px; border-radius: 8px; cursor: pointer; } .nb-newmenu button:hover { background: var(--surface2); } /* شريط أدوات اللوحة */ .nb-boardbar { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; } .nb-tools, .nb-zoom { display: inline-flex; gap: 5px; align-items: center; background: var(--surface2); border: 1px solid var(--border); border-radius: 11px; padding: 4px 6px; } .nb-tool { border: none; background: transparent; font-size: 15px; padding: 6px 9px; border-radius: 8px; cursor: pointer; color: var(--text); transition: .12s; font-family: inherit; } .nb-tool.on, .nb-tool:hover { background: var(--surface); } .nb-tool.on { box-shadow: inset 0 0 0 1.5px var(--accent); } .nb-inkcolors { display: inline-flex; gap: 5px; margin-inline: 5px; } .nb-ink { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; background: var(--c); cursor: pointer; padding: 0; } .nb-ink.on { border-color: var(--text); transform: scale(1.15); } .nb-zoom button { border: none; background: transparent; color: var(--text); font-size: 16px; font-weight: 900; width: 28px; cursor: pointer; font-family: inherit; } #nb-zlbl { font-family: 'Share Tech Mono', monospace; font-size: 11.5px; color: var(--text-muted); min-width: 42px; text-align: center; } .nb-tpl { border: 1.5px dashed color-mix(in srgb, var(--accent) 50%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 800; border-radius: 11px; padding: 9px 14px; cursor: pointer; } /* الكانفاس */ .nb-canvas { position: relative; height: calc(100vh - 305px - var(--tf-chrome-h, 0px)); min-height: 460px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface2); touch-action: none; cursor: grab; background-image: radial-gradient(color-mix(in srgb, var(--text-muted) 22%, transparent) 1px, transparent 1px); background-size: 26px 26px; } .nb-canvas:active { cursor: grabbing; } .nb-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; } /* v212 — left فيزيائي: بالعربي inset-inline-start كانت يمين فاللوحة كلها تنزاح برّا الشاشة وتبيّن فاضية */ .nb-inklayer { position: absolute; inset: 0; pointer-events: none; } .nb-inklayer.erasing polyline, .nb-inklayer.erasing line, .nb-inklayer.erasing rect, .nb-inklayer.erasing ellipse, .nb-inklayer.erasing g { pointer-events: stroke; cursor: crosshair; } /* v228 */ .nb-abs.link-src .nt-card { outline: 2.5px dashed var(--accent); outline-offset: 3px; } /* v219 */ .nb-tool svg { vertical-align: -2px; } .nb-abs { position: absolute; width: 235px; user-select: none; } .nb-abs .nt-card { cursor: grab; box-shadow: 0 8px 22px -10px #0008; } .nb-abs.dragging { z-index: 50; } .nb-abs.dragging .nt-card { cursor: grabbing; transform: scale(1.03) rotate(.6deg); box-shadow: 0 18px 40px -12px #000c; } .nb-hint { font-size: 11px; color: var(--text-muted); margin-top: 8px; text-align: center; } /* توهّج التذكير المستحق */ .nb-glow { animation: nbGlowP 1.8s ease-in-out infinite; border-color: #e8b93d !important; } @keyframes nbGlowP { 0%,100% { box-shadow: 0 0 0 0 #e8b93d33; } 50% { box-shadow: 0 0 18px 3px #e8b93d55; } } /* أنواع البطاقات */ .nbk-sh { font-size: 11px; margin-inline-start: 5px; } .nbk-tasks { display: flex; flex-direction: column; gap: 4px; } .nbk-task { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text); cursor: pointer; } .nbk-task.done span { text-decoration: line-through; color: var(--text-muted); } .nbk-more { font-size: 10.5px; color: var(--text-muted); } .nbk-prog { font-family: 'Share Tech Mono', monospace; font-size: 10px; color: var(--nc); margin-top: 2px; } .nbk-rem { font-family: 'Share Tech Mono', monospace; font-size: 12px; color: var(--text); } .nbk-rem.due { color: #e8b93d; font-weight: 700; } .nbk-remok { color: var(--success); font-size: 10.5px; } .nbk-ack { align-self: flex-start; border: 1px solid #2ecc71; background: color-mix(in srgb, #2ecc71 12%, transparent); color: var(--success); border-radius: 8px; font-family: inherit; font-size: 11px; font-weight: 800; padding: 4px 10px; cursor: pointer; } .nbk-img { width: 100%; max-height: 150px; object-fit: cover; border-radius: 9px; border: 1px solid var(--border); } .nbk-req { display: flex; flex-direction: column; gap: 6px; } .nbk-req-st { font-family: 'Share Tech Mono', monospace; font-size: 9.5px; border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; width: fit-content; color: var(--text-muted); } .nbk-req-t { font-size: 12px; color: var(--text); } .nbk-open { align-self: flex-start; border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); border-radius: 8px; font-family: inherit; font-size: 11px; font-weight: 800; padding: 4px 10px; cursor: pointer; } .nb-reqrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; text-align: start; border: 1px solid var(--border); background: var(--surface2); color: var(--text); border-radius: 10px; font-family: inherit; font-size: 12.5px; padding: 10px 12px; cursor: pointer; } .nb-reqrow:hover { border-color: var(--accent); } /* التايم لاين */ .nb-tlbar { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; } .nb-tlmonth { font-weight: 900; font-size: 15px; } .nb-tlhint { font-size: 11px; color: var(--text-muted); margin-inline-start: auto; } .nb-tlstrip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; } .nb-tlday { flex: 0 0 130px; min-height: 150px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; } .nb-tlday.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } .nb-tld { font-family: 'Share Tech Mono', monospace; font-size: 11px; color: var(--text-muted); } .nb-tlday.today .nb-tld { color: var(--accent-fg); font-weight: 700; } .nb-tlcard { border-inline-start: 3px solid var(--nc); background: var(--surface2); border-radius: 7px; font-size: 11px; padding: 6px 8px; cursor: pointer; color: var(--text); } /* مودال: مهام وصورة */ .nt-m-items { display: flex; flex-direction: column; gap: 6px; } .nt-m-item { display: flex; gap: 7px; align-items: center; } .nt-m-item .ms-input { flex: 1; padding: 8px 10px; } .nt-m-item .nt-del { opacity: .7; font-size: 12px; } .nt-m-lbl { display: flex; align-items: center; gap: 8px; font-size: 13px; } .nt-m-imgrow { display: flex; flex-direction: column; gap: 8px; } #nt-m-imgprev { max-height: 170px; object-fit: contain; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2); } .nt-m-imgbtns { display: flex; gap: 8px; flex-wrap: wrap; } .nb-assetgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; max-height: 55vh; overflow: auto; } .nb-assetgrid img { width: 100%; height: 84px; object-fit: cover; border-radius: 9px; border: 2px solid transparent; cursor: pointer; } .nb-assetgrid img:hover { border-color: var(--accent); } .nt-m-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .nt-m-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; } .nt-m-actions { display: flex; gap: 8px; } #page-notes.page { max-width: none; } /* v212 — اللوحة بعرض الشاشة كامل */ @media (max-width: 760px) { .nb-canvas { height: 58vh; } .nb-abs { width: 210px; } } /* ═══════════ v210 ═══════════ */ /* 🖥️ الجلسات المفتوحة */ .sess-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: 11px; margin-bottom: 8px; font-size: 12.5px; } .sess-dot { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 7px 1px #2ecc71aa; flex-shrink: 0; } .sess-row.stale .sess-dot { background: var(--text-muted); box-shadow: none; } .sess-name { font-weight: 800; } .sess-role { font-family: 'Share Tech Mono', monospace; font-size: 10px; border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; color: var(--text-muted); } .sess-row.demo { border-color: color-mix(in srgb, #e8b93d 55%, var(--border)); background: color-mix(in srgb, #e8b93d 8%, var(--surface2)); } .sess-row.demo .sess-role { color: #b8860b; border-color: #e8b93d; } .sess-meta { color: var(--text-muted); font-size: 11px; } .sess-last.on { color: var(--success); font-weight: 700; } .sess-lock { margin-inline-start: auto; border: 1px solid var(--border); background: transparent; color: var(--text-muted); border-radius: 8px; padding: 5px 10px; cursor: pointer; font-family: inherit; font-size: 11.5px; } .sess-lock:hover { color: var(--danger); border-color: var(--danger); } .sess-refresh { width: auto; padding: 8px 16px; font-size: 12.5px; margin-bottom: 10px; } /* 🎨 لوحتي — مستوى Caleicen: بطاقات بيضا هادية + نقطة لون بدل الحد السميك */ .nt-card { background: var(--surface); border: 1px solid var(--border); border-top: 1px solid var(--border); border-radius: 14px; padding: 13px 15px 9px; box-shadow: 0 1px 3px #0003; } .nt-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -12px #0007; border-color: color-mix(in srgb, var(--nc) 45%, var(--border)); } .nbk-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--nc); margin-inline-end: 7px; vertical-align: 1px; flex-shrink: 0; } .nt-title { display: flex; align-items: center; font-size: 13.5px; } .nbk-kind { font-size: 10px; opacity: .75; } /* 📅 تايم لاين بروح التقويم الجدي */ .nb-tld { display: flex; align-items: baseline; gap: 5px; padding-bottom: 6px; border-bottom: 2px solid transparent; } .nb-tld b { font-size: 15px; color: var(--text); font-family: 'Share Tech Mono', monospace; } .nb-tld-w { font-size: 10px; color: var(--text-muted); font-weight: 700; } .nb-tlday.today .nb-tld { border-bottom-color: var(--accent); } .nb-tlday.today .nb-tld b { color: var(--accent-fg); } .nb-tlcard { border: 1px solid var(--border); border-inline-start: 1px solid var(--border); background: var(--surface); border-radius: 9px; padding: 7px 9px; box-shadow: 0 1px 2px #0002; display: flex; flex-direction: column; gap: 3px; } .nb-tlcard:hover { border-color: color-mix(in srgb, var(--nc) 50%, var(--border)); } .nb-tlc-t { display: flex; align-items: center; font-size: 11px; font-weight: 700; color: var(--text); } .nb-tlc-m { font-family: 'Share Tech Mono', monospace; font-size: 9.5px; color: var(--text-muted); } /* تبويبات أقسام الدوام → segmented track موحّد (جدي متل المرجع) */ .sched-dept-tabs { display: inline-flex; gap: 4px; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 4px; flex-wrap: wrap; } .sched-dept-tab { border: none; background: transparent; color: var(--text-muted); border-radius: 9px; padding: 8px 15px; font-size: 12.5px; } .sched-dept-tab.active { background: var(--surface); color: var(--text); border: none; box-shadow: 0 1px 4px #0005; } .dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; text-align: center; } .stat-num { font-size: 28px; font-weight: 900; color: var(--accent-fg); } .stat-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-weight: 600; } .filter-bar { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; } .filter-btn { padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .filter-btn.active { background: var(--accent); color: var(--accent-ink, #0a0e1a); border-color: var(--accent); } .req-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 12px; cursor: pointer; transition: border .2s, background .3s, box-shadow .3s; content-visibility: auto; contain-intrinsic-size: auto 120px; } .req-card:hover { border-color: var(--accent); } /* Status-based card styles */ .req-card[data-status="new"] { border-color: var(--info); } .req-card[data-status="approved"] { border-color: #e0c040; animation: card-pulse-gold 2.5s ease-in-out infinite; } .req-card[data-status="progress"] { border-color: var(--accent); animation: card-pulse-orange 2.5s ease-in-out infinite; } .req-card[data-status="designer_done"] { border-color: #40d0c0; animation: card-pulse-teal 2.5s ease-in-out infinite; } .req-card[data-status="montage"] { border-color: #b070e0; animation: card-pulse-purple 2.5s ease-in-out infinite; } .req-card[data-status="done"] { border-color: var(--success); background: color-mix(in srgb, var(--success) 8%, var(--surface)); } @keyframes card-pulse-gold { 0%,100%{box-shadow:0 0 0 0 rgba(224,192,64,.0)} 50%{box-shadow:0 0 0 3px rgba(224,192,64,.25)} } @keyframes card-pulse-orange { 0%,100%{box-shadow:0 0 0 0 rgba(232,160,32,.0)} 50%{box-shadow:0 0 0 3px rgba(232,160,32,.25)} } @keyframes card-pulse-teal { 0%,100%{box-shadow:0 0 0 0 rgba(64,208,192,.0)} 50%{box-shadow:0 0 0 3px rgba(64,208,192,.25)} } @keyframes card-pulse-purple { 0%,100%{box-shadow:0 0 0 0 rgba(176,112,224,.0)} 50%{box-shadow:0 0 0 3px rgba(176,112,224,.25)} } .req-card-overdue { border-color: var(--danger); animation: overdue-blink 1.6s ease-in-out infinite; } @keyframes overdue-blink { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,80,80,0); border-color: var(--border); } 50% { box-shadow: 0 0 0 4px rgba(224,80,80,.25); border-color: var(--danger); } } .overdue-tag { display: inline-block; background: var(--danger); color: white; font-size: 10px; font-weight: 900; padding: 2px 8px; border-radius: 10px; margin-inline-start: 6px; vertical-align: middle; } .req-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .req-card-title { font-weight: 700; font-size: 15px; } .req-card-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .req-card-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; } .card-msg-btn { margin-inline-start: auto; width: 32px; height: 32px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); background: color-mix(in srgb, var(--accent) 12%, var(--surface2)); color: var(--accent-fg); font-size: 15px; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: all .15s; flex-shrink: 0; } .card-msg-btn:hover { background: var(--accent); color: var(--accent-ink, #0a0e1a); } .status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; } .status-new { background: color-mix(in srgb, var(--info) 15%, var(--surface)); color: var(--info); border: 1px solid color-mix(in srgb, var(--info) 40%, transparent); } .status-approved { background: color-mix(in srgb, #e0c040 15%, var(--surface)); color: #c0a030; border: 1px solid color-mix(in srgb, #e0c040 40%, transparent); } .status-progress { background: color-mix(in srgb, var(--accent) 15%, var(--surface)); color: var(--accent-fg); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); } .status-designer_done { background: color-mix(in srgb, #40d0c0 15%, var(--surface)); color: #30a090; border: 1px solid color-mix(in srgb, #40d0c0 40%, transparent); } .status-montage { background: color-mix(in srgb, #b070e0 15%, var(--surface)); color: #9050c0; border: 1px solid color-mix(in srgb, #b070e0 40%, transparent); } .status-done { background: color-mix(in srgb, var(--success) 15%, var(--surface)); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 40%, transparent); } .prio-badge { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; } .prio-urgent { background: color-mix(in srgb, var(--danger) 15%, var(--surface)); color: var(--danger); } .prio-normal { background: color-mix(in srgb, var(--success) 15%, var(--surface)); color: var(--success); } .prio-tomorrow { background: color-mix(in srgb, var(--info) 15%, var(--surface)); color: var(--info); } .action-btn { padding: 7px 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } .action-btn:hover { border-color: var(--accent); } .action-btn.go { background: var(--accent); color: var(--accent-ink, #0a0e1a); border-color: var(--accent); } .action-btn.go-green { background: var(--success); color: var(--success-ink, #0a0e1a); border-color: var(--success); } .action-btn.danger { color: var(--danger); } .action-btn.danger:hover { border-color: var(--danger); } .action-btn.del-btn { background: color-mix(in srgb, var(--danger) 14%, var(--surface2)); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); } .action-btn.del-btn:hover { background: var(--danger); color: var(--danger-ink); border-color: var(--danger); } .trash-days { font-size: 12px; font-weight: 800; padding: 4px 12px; border-radius: 12px; background: var(--surface2); color: var(--text-muted); border: 1px solid var(--border); } .trash-days.urgent { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: color-mix(in srgb, var(--danger) 12%, var(--surface2)); } /* ═══ v297 — سلة مجمّعة بالتواريخ ═══ */ .trash-group { border: 1px solid var(--border); border-radius: 14px; margin-bottom: 12px; background: var(--surface); overflow: hidden; } .trash-g-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; font-size: 13.5px; font-weight: 800; color: var(--text); list-style: none; user-select: none; background: color-mix(in srgb, var(--accent) 5%, var(--surface2)); } .trash-g-head::-webkit-details-marker { display: none; } .trash-g-head:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface2)); } .trash-g-count { font-family: var(--ol-mono, monospace); font-size: 11.5px; font-weight: 800; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 2px 9px; color: var(--text-muted); } .trash-g-arrow { margin-inline-start: auto; font-size: 12px; color: var(--text-muted); transition: transform .18s; } .trash-group[open] .trash-g-arrow { transform: rotate(180deg); } .trash-g-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; } .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75); display: none; align-items: center; justify-content: center; z-index: 200; padding: 20px; } .modal-overlay.open { display: flex; } /* ═══ v97: MODAL STACKING ORDER (one place, so nothing opens behind) ═══ Base modals sit at 200. Anything that can be launched from INSIDE another modal must sit above it, or it opens behind and looks like a dead click. 200 → base modals (report view, settings, schedule…) 1400 → opened from the report modal (single card, edit report) 1500 → opened from a card (deliver, finish, AI gen, preview, rating) 1600 → discussion (can be opened from a card popup) 1800 → confirm/prompt — must always win, it can be raised from anywhere */ #cardpop-overlay, #editreport-overlay { z-index: 1400; } #cardedit-overlay { z-index: 1700; } #finish-design-modal-overlay, #deliver-modal-overlay, #montage-deliver-overlay, #montage-finish-overlay, #imggen-overlay, #designer-preview-overlay, /* v519 — غطاء «طلب تعديل» انشال مع مساره كلّه */ #edit-modal-overlay, #rating-modal-overlay { z-index: 1500; } #confirm-overlay { z-index: 2147483100; } /* v415: التأكيد فوق كل شي — كان 11000 فبيختفي خلف نوافذ البريد (11400+) والمساعد (2147482800). التوست أعلى منه عمداً. */ .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; max-width: min(880px, 94vw); /* v415 — البوب أوسع ككل */ width: 100%; max-height: 85vh; overflow-y: auto; position: relative; } .modal-close { position: absolute; top: 16px; inset-inline-start: 16px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; } /* header that keeps the title and ✕ neatly on the same line */ .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .modal-header h2 { margin: 0; font-size: 18px; } .modal-header .modal-close { position: static; flex-shrink: 0; } .modal-title { font-size: 17px; font-weight: 900; margin-bottom: 18px; padding-inline-start: 44px; } .detail-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; flex-wrap: wrap; } /* ── STATUS BOXES ROW (airtime / priority / status) ── */ .status-boxes-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; } .status-box { border-radius: 12px; padding: 10px 12px; text-align: center; border: 1.5px solid var(--border); background: var(--surface2); } .sb-label { font-size: 11px; color: var(--text-muted); font-weight: 700; margin-bottom: 4px; } .sb-value { font-size: 13px; font-weight: 800; } .status-box.sb-ok { border-color: color-mix(in srgb, var(--success) 45%, transparent); background: color-mix(in srgb, var(--success) 10%, var(--surface2)); } .status-box.sb-ok .sb-value { color: var(--success); } .status-box.sb-warn { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 12%, var(--surface2)); } .status-box.sb-warn .sb-value { color: var(--accent-fg); } .status-box.sb-danger { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, var(--surface2)); animation: pulse-danger 1.4s infinite; } .status-box.sb-danger .sb-value { color: var(--danger); } @keyframes pulse-danger { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 40%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } } .status-box.sb-prio-urgent { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface2)); } .status-box.sb-prio-urgent .sb-value { color: var(--danger); } .status-box.sb-prio-normal { border-color: color-mix(in srgb, var(--success) 45%, transparent); background: color-mix(in srgb, var(--success) 10%, var(--surface2)); } .status-box.sb-prio-normal .sb-value { color: var(--success); } .status-box.sb-prio-tomorrow { border-color: color-mix(in srgb, var(--info) 50%, transparent); background: color-mix(in srgb, var(--info) 10%, var(--surface2)); } .status-box.sb-prio-tomorrow .sb-value { color: var(--info); } .status-box.sb-status { border-color: color-mix(in srgb, var(--info) 40%, transparent); background: color-mix(in srgb, var(--info) 8%, var(--surface2)); } @media (max-width: 640px) { .status-boxes-row { grid-template-columns: 1fr; } } /* ── DESIGNER TASK BOX (gold — what to produce) ── */ .designer-task-box { margin: 14px 0; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 9%, var(--surface2)); border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); border-inline-start: 5px solid var(--accent); } .dtb-head { font-size: 13px; font-weight: 900; color: var(--accent-fg); margin-bottom: 8px; } .designer-task-box .detail-row { border-bottom-color: color-mix(in srgb, var(--accent) 18%, transparent); } .designer-task-box .detail-row:last-child { border-bottom: none; } /* ── REPORT READING BOX (blue — context) ── */ .report-read-box { margin: 14px 0; padding: 16px 18px; border-radius: 16px; font-size: 13px; background: color-mix(in srgb, var(--accent) 10%, var(--surface2)); border: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); border-inline-start: 6px solid var(--accent); box-shadow: 0 3px 14px color-mix(in srgb, var(--accent) 10%, transparent); } .rrb-head { font-size: 14px; font-weight: 900; color: var(--accent-fg); margin-bottom: 8px; } .report-read-box .rrb-parent-tag { font-size: 10.5px; font-weight: 700; background: var(--accent); color: var(--accent-ink, #0a0e1a); border-radius: 8px; padding: 2px 8px; margin-inline-start: 6px; } /* ══════════════════════════════════════════════════════════ TakeFlow v13 — Card system (modal cards, timers, pipeline) ══════════════════════════════════════════════════════════ */ /* collapsible report box */ .report-read-box.collapsed .rrb-body { display: none; } .rrb-arrow { display: inline-block; transition: transform .2s; font-size: 12px; } .rrb-arrow.open { transform: rotate(0deg); } .report-read-box.collapsed .rrb-arrow { transform: rotate(-90deg); } .mt-head { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 14px; margin: 18px 0 10px; } .mt-progress { color: var(--text-muted); font-weight: 600; font-size: 12px; } /* pipeline strip */ .mt-pipeline { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; margin-bottom: 12px; } .pl-stage { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--text-muted); border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px; opacity: .55; } .pl-stage.active { opacity: 1; } .pl-dot { width: 7px; height: 7px; border-radius: 50%; } .pl-arrow { color: var(--text-muted); font-size: 12px; opacity: .5; } /* accept-all button */ .mt-accept-all-btn { width: 100%; padding: 12px; font-size: 14px; margin-bottom: 6px; } .mt-accept-hint { text-align: center; font-size: 11px; color: var(--text-muted); margin-bottom: 12px; } /* modal card */ .mc-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 13px 14px; margin-bottom: 10px; } /* ── Stage 1: collapsible tree card ── */ .mc-tree { padding: 0; overflow: hidden; } .mc-tree-head { display: flex; align-items: center; gap: 9px; padding: 12px 14px; cursor: pointer; user-select: none; transition: background .15s; } .mc-tree-head:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); } .mc-tree-arrow { font-size: 12px; color: var(--text-muted); transition: transform .2s; flex-shrink: 0; } .mc-tree.open .mc-tree-arrow { transform: rotate(90deg); } .mc-tree-preview { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mc-tree-status { flex-shrink: 0; } /* v116: a finished card recedes — the designer's eye should land on what's still theirs, not on what already left. Only the collapsed head fades; once you open the card it's fully readable again, because you may be checking it. */ .mc-card.mc-done { opacity: .6; } /* v179 — بطاقة واصلة من الجرافيك عند المونتير: شغل جديد بيلمع، مش خلصانة باهتة */ .mc-card.mc-incoming { opacity: 1; border-color: color-mix(in srgb, #e8a020 45%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, #e8a020 25%, transparent), 0 4px 14px color-mix(in srgb, #e8a020 12%, transparent); } .mc-card.mc-incoming .mc-tree-preview { text-decoration: none; opacity: 1; } /* v179 — المحرر/المنتج عدّل بطاقة عم تنشتغل: توهّج بنفسجي بينادي صاحبها */ .mc-card.mc-editor-glow { border-color: color-mix(in srgb, #9c5ad0 55%, var(--border)); animation: editorGlowPulse 1.8s ease-in-out infinite; } @keyframes editorGlowPulse { 0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, #9c5ad0 25%, transparent); } 50% { box-shadow: 0 0 0 2px color-mix(in srgb, #9c5ad0 45%, transparent), 0 4px 18px color-mix(in srgb, #9c5ad0 22%, transparent); } } /* v136: بطاقة زميل تاني شغّال عليها — باهتة و«مقفولة» بصرياً، بس مش مخفية. محمد بيعرف إنها موجودة بس مش إلو. البهتان أقل من mc-done عشان يضل مقروء. */ .mc-card.mc-peer-busy { opacity: .5; background: color-mix(in srgb, var(--surface2) 50%, transparent); border-inline-start-style: dashed !important; } .mc-card.mc-peer-busy:hover { opacity: .72; } .mc-peer-stamp { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; color: #7a8ba0; background: color-mix(in srgb, #7a8ba0 15%, transparent); padding: 2px 8px; border-radius: 6px; margin-inline-start: 6px; white-space: nowrap; } .mc-card.mc-done:hover { opacity: .85; } .mc-card.mc-done.open { opacity: 1; } .mc-card.mc-done .mc-tree-preview { text-decoration: line-through; text-decoration-thickness: 1px; opacity: .75; } .mc-card.mc-done.open .mc-tree-preview { text-decoration: none; opacity: 1; } /* v118: name + that person's own clock on one line. They used to sit on two separate rows, so you read "نور هاشم" and then hunted for which timer was hers. Wrapping them makes the pairing obvious at a glance. */ .mc-idrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .mc-idrow .mc-head-inner { margin-bottom: 0; } .mc-idrow .mc-timers { margin: 0; } .mc-tree-body { display: none; padding: 0 14px 13px; } .mc-tree.open .mc-tree-body { display: block; animation: mcExpand .2s ease; } /* ═══ v112: THE CARD, IN TWO PANES ═══ The card body was one long stacked column — the designer opened it and met ten sections with equal weight. Nothing here changes the markup or the logic: every section already had its own class, and mc-work already wrapped the task side, so a grid is enough to answer one question at a glance: "what am I making?" (mc-work — the wide side) "why / where?" (the original text, paths — the quiet side) Below 900px (phones, portrait) it stays a single column exactly as before. Turn the phone sideways and you get the desktop layout. */ /* ═══ v176 — الإصلاح الجذري: شبكة v112 انشالت بالكامل ═══ v175 لفّ mc-work و mc-original-wrap بحاوية mc-body-cols ، فقواعد ‎.mc-tree-body > …‎ ما عادت تمسك ولادها المباشرين — الشبكة صارت تحشر المحتوى بعمود ضيّق وتترك التاني فاضي (التشوّه يلي بالصور). هلق: البطاقة المفتوحة بالطي = عمود واحد بعرض كامل (mc-body-cols هي المرجع الوحيد للتوزيع)، والبوب أب = عمودين (قاعدة ‎#cardpop-body‎ تحت). */ .mc-tree-body .mc-original-wrap { background: color-mix(in srgb, var(--surface) 60%, transparent); border-radius: 10px; padding-inline: 11px; padding-bottom: 9px; } /* ═══ v120: THE REQUEST, IN TWO PANES ═══ Same idea that worked for the card in v112 — but the modal is NOT the card: #modal-body has ~14 flat children (detail-row x10, identity, report text...) with no class telling "work" apart from "background". So a bare grid can't know what goes where. Two wrapper divs (.rq-work / .rq-bg) are added around the EXISTING markup — the content itself is untouched, only where it sits. .rq-work (2fr) → what am I making? (cards, accept, my actions) .rq-bg (1fr) → why / where? (report text, identity, timeline) Per role: the panes are filled by whatever renderModalTasks/viewRequest already build for that role — designer sees their cards, montage theirs. Below 900px it collapses to one column, exactly as before. Phones unchanged. ⚠️ grid rules come AFTER any display:block on #modal-body or they're voided. */ @media (min-width: 900px) { /* v134: مودال الطلب فيه عمودين — 680px بيخنقهن فالتقرير بيطلع ضيّق ومزعج للعين. بس مودال الطلب يصير أعرض (اللي جوّاه rq-split)، الباقي يضل 680. الربط بوجود .rq-split عشان ما نلمس باقي المودالات. */ /* v541 — العرض صار قاعدةً واحدة في كتلة v541 (كانت ثلاث قيمٍ تتغالب: 1040 · 1100 · وما يغلب منهما) */ #modal-body.rq-split { display: grid; grid-template-columns: 1.7fr 1fr; gap: 20px; align-items: start; } #modal-body.rq-split > .rq-work { grid-column: 1; min-width: 0; } #modal-body.rq-split > .rq-bg { grid-column: 2; min-width: 0; } /* quiet the background side so the work side leads the eye (v112 rule) */ #modal-body.rq-split > .rq-bg { background: color-mix(in srgb, var(--surface) 55%, transparent); border-radius: 10px; padding: 12px; } #modal-body.rq-split > .rq-bg .detail-row { font-size: 12.5px; } /* ═══ v499 — صفّ الحالة إلى العمود الجانبيّ ═══ ═══ v517 — ولم يكن ينتقل إطلاقاً ═══ المحدِّد `#modal-body.rq-split > .status-boxes-row` يشترط أن يكون الصفّ **ابناً مباشراً** لـ#modal-body — وهو منذ v120 داخل `.rq-work`. فالقاعدة لم تُطابِق يوماً، والصفّ ظلّ حيث كان يشقّ عمود العمل. محدِّدٌ ميّت يقرؤه القارئ فيظنّ المشكلة محلولة. وv517 نقله فعلاً — في الـDOM لا بالـgrid — إلى لوح القرار أعلى عمود العمل، مع المدّة والعدّاد ومن يمسك الطلب. ونيّة v499 (صفٌّ مضغوط لا يزاحم) تبقى، منقولةً إلى اللوح حيث يسكن الصفّ. */ } /* ═══════════════════════════════════════════════════════════════ v517 · لوح القرار — ما يحتاج انتباهك الآن، في مكانٍ واحد كانت خمسة صناديق متفرّقة تقول الوقت والحالة ومن يمسكها، بعضها يناقض بعضاً وبينها متن الطلب. صارت شريطاً واحداً يتصدّر عمود العمل. لا backdrop-filter هنا: هذه طبقةُ محتوى داخل طبقة تحكّم، وتعشيش الغلاس ممنوع — ولأنّ position:fixed ينكسر تحت سلفٍ عليه filter، فلا نضع فلتراً فوق شيءٍ قد يحمل نافذة. ═══════════════════════════════════════════════════════════════ */ .rq-deck { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid color-mix(in srgb, var(--border) 65%, transparent); } .rq-deck:empty { display: none; } .rq-deck > .status-boxes-row { margin: 0; gap: 8px; } .rq-deck > .status-boxes-row .status-box { padding: 9px 11px; } .rq-deck > .status-boxes-row .sb-label { font-size: 10px; } .rq-deck > .status-boxes-row .sb-value { font-size: 12.5px; } .rq-deck > .co-bar, .rq-deck > .co-badge { margin: 0; } .rq-deck > .eta-box, .rq-deck > .eta-sum { margin: 0; } /* ═══════════════════════════════════════════════════════════════ v519 · الصفحة الكاملة عمودان — كالنافذة تماماً قواعد v120 كلّها معلَّقة على `#modal-body.rq-split`، و**الصفحة وعاءٌ آخر** (`#rv-body`) لا سطرَ له في هذا الملفّ إطلاقاً. فكانت الصفحة — وهي الأوسع — تُرسم عموداً واحداً طويلاً بينما النافذة الأضيق عمودان. نفس القواعد، محدِّدٌ ثانٍ: ولا تكرارَ لقاعدة. ═══════════════════════════════════════════════════════════════ */ @media (min-width: 900px) { #rv-body.rq-split { display: grid; grid-template-columns: 1.7fr 1fr; gap: 20px; align-items: start; } #rv-body.rq-split > .rq-work { grid-column: 1; min-width: 0; } #rv-body.rq-split > .rq-bg { grid-column: 2; min-width: 0; background: color-mix(in srgb, var(--surface) 55%, transparent); border-radius: 10px; padding: 12px; } #rv-body.rq-split > .rq-bg .detail-row { font-size: 12.5px; } } /* the moved timeline keeps its look inside the background pane */ .rq-bg > .timeline { margin-top: 4px; } @keyframes mcExpand { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .mc-head-inner { margin-bottom: 8px; min-height: 0; } .mc-head-inner:empty { display: none; } .mc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .mc-seq { color: #0a0e1a; font-weight: 800; font-size: 12px; min-width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; } .mc-status { font-weight: 800; font-size: 12.5px; } .mc-type { font-size: 11.5px; font-weight: 700; color: var(--accent-fg); background: color-mix(in srgb, var(--accent) 15%, transparent); padding: 2px 9px; border-radius: 10px; } .mc-who-wrap { margin-inline-start: auto; display: flex; gap: 6px; flex-wrap: wrap; } .mc-who { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 10px; } .mc-who-d { color: var(--accent-fg); background: color-mix(in srgb, var(--accent) 14%, transparent); } .mc-who-m { color: var(--violet); background: color-mix(in srgb, #9c5ad0 16%, transparent); } /* v123 — المؤقت العام: مؤقت واحد برا البطاقات، بيجمع شغلك على الطلب كله. ذهبي = شغلك (قاعدة اللون الواحد) · بنفسجي = مونتاج · باهت = موقّف. */ .rt-wrap { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 2px 0 12px; } .rt-chip { font-size: 15px; font-weight: 800; padding: 7px 14px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-fg); font-variant-numeric: tabular-nums; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .rt-chip.montage { background: color-mix(in srgb, #9c5ad0 14%, transparent); color: var(--violet); border-color: color-mix(in srgb, #9c5ad0 30%, transparent); } .rt-chip.live { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); } .rt-chip.montage.live { box-shadow: 0 0 0 3px color-mix(in srgb, #9c5ad0 12%, transparent); } .rt-chip.paused { opacity: .55; } .rt-label { font-size: 11.5px; font-weight: 600; color: var(--muted); } /* v124 — أزرار الطلب (توقّف الكل / نقل الكل) + منتقي الزميل */ .rt-acts { display: flex; gap: 7px; flex-wrap: wrap; width: 100%; margin-top: 6px; } .pick-peer-list { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; } .pick-peer { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 12px; border-radius: 10px; cursor: pointer; background: var(--surface2, rgba(255,255,255,.05)); border: 1px solid var(--border, rgba(255,255,255,.1)); color: var(--text); font-size: 13.5px; font-weight: 700; text-align: start; } .pick-peer:hover { border-color: var(--accent); } /* v127 — الحمل: أخضر فاضي · أصفر شغّال · أحمر غارق. بيلوّن، ما بيمنع. */ .pick-peer-name { flex: none; } .pick-peer-load { margin-inline-start: auto; font-size: 11px; font-weight: 600; color: var(--text-muted); } .pick-peer.pl-free { border-color: color-mix(in srgb, var(--success) 30%, transparent); } .pick-peer.pl-busy { border-color: color-mix(in srgb, #e05252 32%, transparent); } .pick-peer.pl-busy .pick-peer-load { color: #e05252; } .pick-peer .tp-avatar { width: 26px; height: 26px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 12px; } /* v126 — تقدير الوقت: رمادي = فيه وقت · ذهبي = ضيّق · أحمر = ما بيلحق. اللون ما بيكذب — وما بيطلع أبداً إذا ما في داتا كافية. */ .nr-est { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 12px; padding: 10px 13px; border-radius: 10px; background: var(--surface2); border: 1px solid var(--border); } .nr-est-num { font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; } .nr-est-verdict { font-weight: 700; font-size: 12.5px; } .nr-est-note, .nr-est-src { font-size: 11px; color: var(--text-muted); } .nr-est-src { margin-inline-start: auto; opacity: .75; } .nr-est.est-tight { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 32%, transparent); } .nr-est.est-tight .nr-est-num, .nr-est.est-tight .nr-est-verdict { color: var(--accent-fg); } .nr-est.est-late { background: color-mix(in srgb, #e05252 12%, transparent); border-color: color-mix(in srgb, #e05252 38%, transparent); } .nr-est.est-late .nr-est-num, .nr-est.est-late .nr-est-verdict { color: #e05252; } /* الزر نفسه بيحذّر — عين المحرر عليه */ .nr-submit-btn.nr-submit-warn { background: #e05252 !important; color: #fff !important; } /* v133 — الموديلات المخصّصة */ .mag-custom-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 800; margin-bottom: 10px; } .mag-custom-item { display: flex; align-items: center; gap: 9px; padding: 9px 11px; background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; margin-bottom: 7px; } .mag-cm-kind { font-size: 17px; flex: none; } .mag-cm-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .mag-cm-body b { font-size: 12.5px; } .mag-cm-ep { font-size: 10.5px; color: var(--text-muted); direction: ltr; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mag-cm-blend { font-size: 9.5px; font-weight: 800; color: var(--accent-fg); flex: none; background: color-mix(in srgb, var(--accent) 14%, transparent); padding: 2px 7px; border-radius: 5px; } .mag-cm-x { flex: none; background: transparent; border: 0; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 3px 5px; border-radius: 5px; } .mag-cm-x:hover { color: #e05252; background: color-mix(in srgb, #e05252 12%, transparent); } .mag-cm-none { font-size: 11.5px; color: var(--text-muted); padding: 10px; text-align: center; background: var(--surface2); border-radius: 8px; } .mag-cm-hint { font-size: 10.5px; color: var(--text-muted); margin-top: 8px; line-height: 1.6; } .am-test-result { margin-top: 10px; font-size: 12.5px; font-weight: 700; min-height: 20px; } .am-ok { color: var(--success); } .am-bad { color: #e05252; } .am-testing { color: var(--accent-fg); } /* v132 — منطقة رفع بستايل البرنامج (بدل Choose Files) */ .ig-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 14px; border: 2px dashed var(--border); border-radius: 12px; background: color-mix(in srgb, var(--surface2) 60%, transparent); cursor: pointer; transition: border-color .15s, background .15s; text-align: center; } .ig-drop:hover, .ig-drop.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } .ig-drop-icon { font-size: 26px; } .ig-drop-main { font-size: 13px; font-weight: 700; color: var(--text); } .ig-drop-sub { font-size: 11px; color: var(--text-muted); } /* v142 — الشريط الجانبي العمودي (بدل التبويبات الأفقية). معيار عالمي (Figma/PS): بيتوسّع لأي عدد أقسام بلا زحمة، المصمم بيشوف الكل بلمحة. عملناه بالـCSS بس — ما لمسنا بنية HTML، فالمحادثة والمعمل ضلّوا صح. الفكرة: page-ai صار flex أفقي — الشريط يمين، المحتوى ياخد الباقي. */ #page-ai .ai-page-wrap { } @media (min-width: 860px) { /* الحاوية اللي بعد الهيرو تصير صف: شريط + محتوى */ #page-ai .ai-page-wrap { display: grid; grid-template-columns: 210px 1fr; grid-template-areas: "hero hero" "tabs content"; gap: 0 18px; align-items: start; } #page-ai .ai-page-hero { grid-area: hero; } #page-ai #ai-tabs { grid-area: tabs; } /* كل الأقسام (chat/lab/assets...) بتروح لعمود المحتوى */ /* v183 — الشل الجديد (سايد بار المحادثات + كرت الشات) لازم ياخد عمود المحتوى: بلا هالسطر كان بينزل خارج الشبكة والتصميم ينكسر ويتضغّط. */ #page-ai .ai-page-shell, #page-ai .ai-page-chat, #page-ai #ai-lab, #page-ai #ai-assets, #page-ai .ai-keys-section, #page-ai [id^="ai-section-"] { grid-area: content; } #page-ai .ai-page-shell > .ai-page-chat { grid-area: auto; } #page-ai #ai-tabs { position: sticky; top: 12px; } } /* التبويبات: عمود على الشاشات الكبيرة، صف أفقي قابل للتمرير على الموبايل */ .ai-tabs { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; } @media (max-width: 859px) { .ai-tabs { flex-direction: row; overflow-x: auto; padding-bottom: 4px; } .ai-tab { flex: 0 0 auto; } } .ai-tab { padding: 12px 14px; border-radius: 11px; background: var(--surface2); border: 1.5px solid var(--border); color: var(--text-muted); font-family: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; transition: all .15s; text-align: start; display: flex; align-items: center; gap: 8px; white-space: nowrap; } .ai-tab:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); color: var(--text); } .ai-tab.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #0a0e1a); } /* v143 — معرض الأصول */ .assets-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; } .assets-search { flex: 1; min-width: 160px; display: flex; align-items: center; gap: 8px; background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px; } .assets-search input { flex: 1; background: none; border: 0; color: var(--text); font-family: inherit; font-size: 13px; outline: none; } .assets-filters { display: flex; gap: 6px; flex-wrap: wrap; } .assets-chip { padding: 7px 13px; border-radius: 8px; background: var(--surface2); border: 1.5px solid var(--border); color: var(--text-muted); font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s; } .assets-chip:hover { border-color: var(--accent); } .assets-chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #0a0e1a); } .assets-chip.fav.active { background: #8b5cf6; border-color: #8b5cf6; color: #fff; } .assets-zoom { display: flex; gap: 5px; } .assets-zoom-btn { width: 34px; height: 34px; border-radius: 8px; background: var(--surface2); border: 1.5px solid var(--border); color: var(--text); font-size: 14px; cursor: pointer; } .assets-zoom-btn:hover { border-color: var(--accent); } .assets-stats { display: flex; gap: 16px; margin-bottom: 14px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; } .assets-stats b { color: var(--text); } .assets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; } .assets-loading, .assets-empty { grid-column: 1 / -1; text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 13px; } .asset { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; overflow: hidden; transition: all .18s; cursor: pointer; position: relative; } .asset:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.4); } .asset-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: linear-gradient(135deg,#2a2a40,#1a1a28); } .asset-fav { position: absolute; top: 8px; inset-inline-start: 8px; width: 30px; height: 30px; border-radius: 8px; background: rgba(0,0,0,.55); border: 0; color: #fff; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); opacity: .6; } .asset-fav.on { color: #8b5cf6; opacity: 1; } .asset-fav:hover { opacity: 1; } .asset-kind { position: absolute; top: 8px; inset-inline-end: 8px; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,.6); font-size: 10px; font-weight: 800; backdrop-filter: blur(4px); } .asset-kind.video { color: #60a5fa; } .asset-kind.image { color: var(--success); } .asset-body { padding: 10px 12px; } .asset-prompt { font-size: 11.5px; color: var(--text); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 7px; min-height: 34px; } .asset-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 10px; color: var(--text-muted); } .asset-model { background: var(--surface2); padding: 2px 7px; border-radius: 5px; font-weight: 700; color: var(--accent-fg); } .asset-src { padding: 2px 7px; border-radius: 5px; font-weight: 700; } .asset-src.card { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); } .asset-src.free { background: color-mix(in srgb, #8b5cf6 15%, transparent); color: #8b5cf6; } .asset-actions { display: flex; gap: 5px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border); } .aa-btn { flex: 1; padding: 6px; border-radius: 7px; background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted); font-size: 11px; font-weight: 700; cursor: pointer; transition: all .15s; text-align: center; text-decoration: none; } .aa-btn:hover { border-color: var(--accent); color: var(--text); } .aa-btn.aa-del { flex: 0 0 auto; } /* v155 */ .aa-btn.aa-del:hover { border-color: #e05252; color: #e05252; background: color-mix(in srgb, #e05252 10%, var(--surface2)); } /* v144 — الستوري بورد */ .sb-pick { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; flex-wrap: wrap; } .sb-pick label { font-size: 13px; font-weight: 700; color: var(--text-muted); } .sb-pick select { flex: 1; min-width: 200px; background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-family: inherit; font-size: 13px; padding: 9px 12px; } .sb-total { font-size: 12px; color: var(--text-muted); } .sb-total b { color: var(--accent-fg); } .sb-report-title { font-size: 15px; font-weight: 800; margin-bottom: 4px; } .sb-report-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; } .sb-scenes { display: flex; flex-direction: column; gap: 12px; } .scene { display: grid; grid-template-columns: 44px 200px 1fr auto; gap: 14px; align-items: stretch; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px; transition: all .18s; } .scene:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); } .scene.approved { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); } .sc-num { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .sc-seq { width: 34px; height: 34px; border-radius: 10px; background: var(--accent); color: var(--accent-ink, #0a0e1a); font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; } .sc-drag { color: var(--text-muted); font-size: 15px; cursor: grab; } .sc-visual { border-radius: 10px; overflow: hidden; background: linear-gradient(135deg,#2a2a40,#1a1a28); display: flex; align-items: center; justify-content: center; position: relative; min-height: 124px; } .sc-visual img { width: 100%; height: 100%; object-fit: cover; } .sc-visual .ph { font-size: 34px; } .sc-visual .empty { display: flex; flex-direction: column; gap: 6px; align-items: center; color: var(--text-muted); font-size: 11px; } .sc-visual .gen-btn { padding: 6px 12px; border-radius: 7px; background: var(--accent); color: var(--accent-ink, #0a0e1a); border: 0; font-size: 11px; font-weight: 800; cursor: pointer; } .sc-dur { position: absolute; bottom: 6px; inset-inline-end: 6px; background: rgba(0,0,0,.7); padding: 2px 8px; border-radius: 5px; font-size: 10px; font-weight: 700; backdrop-filter: blur(4px); } .sc-badge { position: absolute; top: 6px; inset-inline-start: 6px; font-size: 14px; } .sc-body { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .sc-title { font-size: 13.5px; font-weight: 800; } .sc-type { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--accent-fg); background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 3px 9px; border-radius: 6px; align-self: flex-start; } .sc-text { font-size: 11.5px; color: var(--text-muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .sc-shot { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; } .sc-shot span { font-size: 10px; color: var(--text-muted); background: var(--surface2); padding: 2px 8px; border-radius: 5px; } .sc-actions { display: flex; flex-direction: column; gap: 6px; justify-content: center; } .sc-btn { padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: all .15s; } .sc-btn:hover { border-color: var(--accent); } .sc-btn.ok { color: var(--success); } .sc-btn.ok:hover { border-color: var(--success); } .sc-btn.regen { color: #8b5cf6; } .sc-btn.regen:hover { border-color: #8b5cf6; } @media (max-width: 640px) { .scene { grid-template-columns: 40px 1fr; } .sc-visual, .sc-actions { grid-column: 1 / -1; } } /* v146 — الستوري بورد الحر */ .sb-mode-switch { display: flex; gap: 8px; margin-bottom: 14px; } .sb-mode { flex: 1; padding: 11px; border-radius: 11px; background: var(--surface2); border: 1.5px solid var(--border); color: var(--text-muted); font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: all .15s; } .sb-mode:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .sb-mode.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #0a0e1a); } .sc-title-input { background: var(--surface2); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-family: inherit; font-size: 13px; font-weight: 700; padding: 7px 10px; width: 100%; } .sc-desc-input { background: var(--surface2); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-family: inherit; font-size: 11.5px; padding: 7px 10px; width: 100%; min-height: 54px; resize: vertical; line-height: 1.6; } .sb-add-scene { margin-top: 12px; width: 100%; padding: 12px; border-radius: 11px; background: color-mix(in srgb, var(--accent) 10%, var(--surface2)); border: 1.5px dashed color-mix(in srgb, var(--accent) 40%, var(--border)); color: var(--accent-fg); font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: all .15s; } .sb-add-scene:hover { background: color-mix(in srgb, var(--accent) 16%, var(--surface2)); } /* v147 — الخط الزمني */ .tl-track { display: flex; gap: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px; overflow-x: auto; min-height: 150px; } .tl-block { display: flex; flex-direction: column; background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; overflow: hidden; min-width: 90px; transition: all .18s; } .tl-block.approved { border-color: color-mix(in srgb, var(--success) 50%, var(--border)); } .tl-block-img { width: 100%; height: 68px; object-fit: cover; } .tl-block-ph { width: 100%; height: 68px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: linear-gradient(135deg,#2a2a40,#1a1a28); } .tl-block-body { padding: 7px 8px; display: flex; flex-direction: column; gap: 5px; } .tl-block-seq { width: 20px; height: 20px; border-radius: 6px; background: var(--accent); color: var(--accent-ink, #0a0e1a); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .tl-block-title { font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tl-block-dur { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--accent-fg); } .tl-dur-btn { width: 22px; height: 22px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 13px; font-weight: 800; cursor: pointer; line-height: 1; } .tl-dur-btn:hover { border-color: var(--accent); } .tl-ruler { display: flex; justify-content: space-between; margin-top: 8px; padding: 0 6px; font-size: 11px; color: var(--text-muted); font-weight: 700; } .tl-ruler-end { color: var(--accent-fg); } .tl-hint { margin-top: 10px; font-size: 11.5px; color: var(--text-muted); text-align: center; } /* v148 — مركز التصدير */ .ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .ex-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px 16px; cursor: pointer; transition: all .18s; text-align: center; position: relative; } .ex-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.35); } .ex-icon { font-size: 34px; margin-bottom: 10px; } .ex-title { font-size: 14px; font-weight: 800; margin-bottom: 6px; } .ex-desc { font-size: 11.5px; color: var(--text-muted); line-height: 1.6; margin-bottom: 12px; } .ex-fmt { display: inline-block; font-size: 10.5px; font-weight: 800; color: var(--accent-fg); background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 3px 12px; border-radius: 6px; } /* v149 — اقتراح الموديل بالمعمل */ .ig-model-hint { font-size: 12px; color: var(--accent-fg); margin: 8px 0 4px; background: color-mix(in srgb, var(--accent) 9%, transparent); border-radius: 8px; padding: 7px 11px; line-height: 1.6; } .ig-model-hint:empty { display: none; } /* v161 — بوب-أب اختيار صورة للمشهد */ .sb-pick-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(3px); } .sb-pick-overlay.open { display: flex; } .sb-pick-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; max-width: 640px; width: 100%; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.5); } .sb-pick-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); font-weight: 800; font-size: 14px; } .sb-pick-close { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; width: 30px; height: 30px; cursor: pointer; color: var(--text); font-size: 15px; } .sb-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; padding: 16px; overflow-y: auto; } .sb-pick-item { border-radius: 10px; overflow: hidden; cursor: pointer; border: 2px solid transparent; background: var(--surface2); transition: all .15s; position: relative; } .sb-pick-item:hover { border-color: var(--accent); transform: translateY(-2px); } .sb-pick-item img { width: 100%; height: 110px; object-fit: cover; display: block; } .sb-pick-label { font-size: 10px; padding: 4px 6px; color: var(--text-muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* v151 — كانبان الطلبات + الحيوية */ .req-view-toggle { display: inline-flex; gap: 4px; margin-bottom: 14px; background: var(--surface2); padding: 4px; border-radius: 10px; border: 1px solid var(--border); } .rv-btn { padding: 7px 16px; border-radius: 7px; background: none; border: 0; color: var(--text-muted); font-family: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; transition: all .15s; } .rv-btn.active { background: var(--accent); color: var(--accent-ink, #0a0e1a); } /* v519 — العمود الخامس كان ينزل سطراً وحده: العدد كان مثبَّتاً على أربعة منذ v151، فزدتُ مرحلةً في v518 ولم تكبر الشبكة. الآن تُملأ بعدد الأعمدة الفعليّ مهما تغيّر — لا رقمَ يُعدَّل مرّةً أخرى. */ .req-kanban-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 12px; align-items: start; } @media (max-width: 1100px) { .req-kanban-board { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .req-kanban-board { grid-template-columns: 1fr; } } .req-kanban-col { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; border-top: 3px solid var(--col-color); } .req-kanban-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: color-mix(in srgb, var(--col-color) 8%, var(--surface)); border-bottom: 1px solid var(--border); } .req-kanban-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--col-color); box-shadow: 0 0 8px color-mix(in srgb, var(--col-color) 60%, transparent); } .req-kanban-label { font-size: 13px; font-weight: 800; flex: 1; } .req-kanban-count { background: var(--col-color); color: #14141f; font-size: 12px; font-weight: 800; min-width: 22px; height: 22px; border-radius: 11px; display: flex; align-items: center; justify-content: center; padding: 0 7px; } .req-kanban-body { padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 60px; max-height: 70vh; overflow-y: auto; } .req-kanban-empty { text-align: center; color: var(--text-muted); font-size: 20px; padding: 20px 0; opacity: .3; } /* الكروت جوّا الكانبان — أصغر وأنعم، مع حيوية بالمرور */ .req-kanban-body .req-card { margin: 0; animation: reqCardIn .35s ease backwards; } .req-kanban-body .req-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.3); border-color: var(--col-color); } @keyframes reqCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .ex-note { margin-top: 16px; font-size: 11.5px; color: var(--text-muted); line-height: 1.7; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; } .lab-grid { display: grid; grid-template-columns: 260px 1fr; gap: 14px; align-items: start; } @media (max-width: 900px) { .lab-grid { grid-template-columns: 1fr; } } .lab-side { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px; position: sticky; top: 12px; } .lab-side-head { font-size: 13px; font-weight: 800; margin-bottom: 9px; } .lab-cards { display: flex; flex-direction: column; gap: 7px; max-height: 62vh; overflow: auto; } .lab-card { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px; border-radius: 9px; background: var(--surface2); border: 1.5px solid var(--border); cursor: pointer; text-align: start; font-family: inherit; color: var(--text); } .lab-card:hover { border-color: var(--accent); } .lab-card.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } /* v138: زر التصميم الحر — مميّز فوق اللستة */ .lab-card.lab-free { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); margin-bottom: 4px; } .lab-card.lab-free .lab-card-seq { background: transparent; font-size: 16px; } .lab-card.lab-free.sel { border-style: solid; } .lab-card-seq { flex: none; width: 21px; height: 21px; border-radius: 6px; background: var(--accent); color: var(--accent-ink, #0a0e1a); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .lab-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .lab-card-show { font-size: 12px; font-weight: 700; } .lab-card-txt { font-size: 10.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lab-card-n { flex: none; font-size: 10px; color: var(--success); font-weight: 700; } .lab-main { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; } .lab-empty { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 56px 16px; text-align: center; } .lab-empty-t { font-size: 14.5px; font-weight: 800; } .lab-empty-s { font-size: 12px; color: var(--text-muted); } .lab-none, .lab-loading { font-size: 12px; color: var(--text-muted); padding: 14px 4px; text-align: center; } .lab-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .lab-head-seq { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: var(--accent-ink, #0a0e1a); font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; } .lab-head-t { font-size: 14.5px; font-weight: 800; } .lab-head-s { font-size: 11.5px; color: var(--text-muted); } /* v131 — المعمل: صور متعددة + مقاس + مؤشّر وضع */ .ig-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } @media (max-width: 700px) { .ig-row3 { grid-template-columns: 1fr; } } .ig-up-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .ig-up-item { position: relative; width: 74px; height: 74px; border-radius: 9px; overflow: hidden; border: 1.5px solid var(--border); background: var(--surface2); } .ig-up-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .ig-up-n { position: absolute; top: 2px; inset-inline-start: 2px; background: var(--accent); color: var(--accent-ink, #0a0e1a); font-size: 10px; font-weight: 800; width: 16px; height: 16px; border-radius: 5px; display: flex; align-items: center; justify-content: center; } .ig-up-x { position: absolute; top: 2px; inset-inline-end: 2px; background: rgba(0,0,0,.6); color: #fff; border: 0; border-radius: 5px; width: 17px; height: 17px; font-size: 10px; cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center; } .ig-up-x:hover { background: #e05252; } .ig-mode { margin-top: 9px; font-size: 12px; font-weight: 700; color: var(--text-muted); background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 11px; } .ig-mode.on { color: var(--accent-fg); border-color: color-mix(in srgb, var(--accent) 32%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent); } .ig-mode.warn { color: #e05252; border-color: color-mix(in srgb, #e05252 32%, transparent); background: color-mix(in srgb, #e05252 9%, transparent); } /* timers row */ .mc-timers { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .ct-work { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-fg); font-variant-numeric: tabular-nums; } .ct-work.montage { background: color-mix(in srgb, #9c5ad0 14%, transparent); color: var(--violet); } .ct-work.live { animation: ctPulse 2s ease-in-out infinite; } @keyframes ctPulse { 0%,100%{opacity:1} 50%{opacity:.65} } .ct-air { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 8px; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ct-air-time { color: var(--text-muted); font-weight: 700; } /* ══════════════════════════════════════════════════════════ STAGE B — roহiya: smart greeting + live pulse + hero card ══════════════════════════════════════════════════════════ */ .prod-pulse { max-width: 900px; margin: 0 auto 4px; } .prod-pulse:empty { display: none; } .pp-greet { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .pp-emoji { font-size: 26px; line-height: 1; } .pp-greet-text { font-size: 17px; font-weight: 700; color: var(--text); } .pp-greet-text b { font-weight: 900; } .pp-mood { font-weight: 600; color: var(--text-muted); font-size: 15px; } .pp-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .pp-chip { font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 20px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid transparent; } .pp-work { background: color-mix(in srgb, #3a90e0 14%, transparent); color: var(--info); border-color: color-mix(in srgb, #3a90e0 30%, transparent); } .pp-wait { background: color-mix(in srgb, #e8a020 14%, transparent); color: var(--accent-fg); border-color: color-mix(in srgb, #e8a020 30%, transparent); } .pp-air { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-fg); border-color: color-mix(in srgb, var(--accent) 30%, transparent); } .pp-urgent { background: color-mix(in srgb, #e04545 16%, transparent); color: var(--danger); border-color: color-mix(in srgb, #e04545 35%, transparent); animation: ppPulse 2s ease-in-out infinite; } @keyframes ppPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } } /* hero card — most-urgent report surfaced at top */ .hero-card { max-width: 900px; margin: 0 auto 16px; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; cursor: pointer; position: relative; overflow: hidden; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface)); border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 14%, transparent); transition: transform .15s, box-shadow .15s; } .hero-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px color-mix(in srgb, var(--accent) 22%, transparent); } .hero-urgent { background: linear-gradient(120deg, color-mix(in srgb, #e04545 18%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, #e04545 50%, var(--border)); box-shadow: 0 4px 20px color-mix(in srgb, #e04545 18%, transparent); animation: heroGlow 2.4s ease-in-out infinite; } @keyframes heroGlow { 0%,100% { box-shadow: 0 4px 20px color-mix(in srgb, #e04545 18%, transparent); } 50% { box-shadow: 0 4px 30px color-mix(in srgb, #e04545 38%, transparent); } } .hero-badge { position: absolute; top: 0; inset-inline-start: 0; background: var(--accent); color: var(--accent-ink, #0a0e1a); font-size: 10.5px; font-weight: 800; padding: 3px 10px; border-end-end-radius: 10px; } .hero-urgent .hero-badge { background: #e04545; color: #fff; } .hero-main { flex: 1; min-width: 0; padding-top: 8px; } .hero-title { font-size: 16.5px; font-weight: 900; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hero-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; } .hero-meta > span { font-size: 12px; font-weight: 700; } .hero-urgent-tag { color: var(--danger); } .hero-air { padding: 2px 8px; border-radius: 7px; } .hero-reporter { color: var(--text-muted); } .hero-cta { flex-shrink: 0; font-size: 13px; font-weight: 800; color: var(--accent-fg); } .hero-urgent .hero-cta { color: var(--danger); } /* ══ STAGE C-1 — micro-celebration + today's progress ══ */ .celebrate-layer { position: fixed; inset: 0; pointer-events: none; z-index: 4000; overflow: hidden; } .celebrate-bit { position: absolute; top: -30px; font-size: 22px; animation: celebFall linear forwards; } @keyframes celebFall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(105vh) rotate(360deg); opacity: 0; } } .celebrate-toast { position: absolute; top: 26%; left: 50%; transform: translateX(-50%); background: linear-gradient(120deg, var(--accent), #2ecc71); color: var(--accent-ink, #0a0e1a); font-weight: 900; font-size: 18px; padding: 14px 26px; border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.35); animation: celebPop .5s cubic-bezier(.2,1.4,.4,1); } @keyframes celebPop { 0% { transform: translateX(-50%) scale(.5); opacity: 0; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } } .day-progress { max-width: 900px; margin: 0 auto 16px; display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; position: relative; } .day-progress:empty { display: none; } .dp-ring { flex-shrink: 0; } .dp-bg { fill: none; stroke: var(--border); stroke-width: 6; } .dp-fg { fill: none; stroke: url(#dpgrad); stroke: var(--accent); stroke-width: 6; stroke-linecap: round; transition: stroke-dasharray .6s ease; } .dp-center { position: absolute; inset-inline-start: 16px; width: 64px; text-align: center; font-size: 19px; font-weight: 900; color: var(--text); } .dp-total { font-size: 12px; color: var(--text-muted); font-weight: 700; } .dp-nudge { font-size: 14px; font-weight: 800; color: var(--text); } /* personal insight strip (C-2 + C-3) */ .personal-insight { max-width: 900px; margin: 0 auto 16px; display: flex; gap: 8px; flex-wrap: wrap; } .personal-insight:empty { display: none; } .pi-bit { font-size: 12px; font-weight: 700; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 6px 12px; } .pi-bit b { color: var(--text); font-weight: 900; } .pi-good { color: var(--success); border-color: color-mix(in srgb, #2ecc71 35%, var(--border)); background: color-mix(in srgb, #2ecc71 8%, var(--surface)); } /* airtime timeline (C-3) */ .airtime-timeline { max-width: 900px; margin: 0 auto 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px 26px; } .airtime-timeline:empty { display: none; } .atl-head { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 18px; display: flex; align-items: center; gap: 8px; } .atl-count { background: var(--accent); color: var(--accent-ink, #0a0e1a); font-size: 11px; font-weight: 800; min-width: 20px; height: 20px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; } .atl-track { position: relative; height: 36px; margin: 0 12px; } .atl-line { position: absolute; top: 6px; inset-inline: -12px; height: 3px; background: var(--border); border-radius: 2px; } .atl-dot { position: absolute; top: 0; transform: translateX(50%); display: flex; flex-direction: column; align-items: center; } html[dir="ltr"] .atl-dot { transform: translateX(-50%); } .atl-dot-mark { width: 15px; height: 15px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--border); } .atl-upcoming .atl-dot-mark { background: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent); } .atl-past .atl-dot-mark { background: var(--text-muted); } .atl-done .atl-dot-mark { background: #2ecc71; } .atl-dot-label { font-size: 10.5px; font-weight: 700; color: var(--text-muted); margin-top: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; } .atl-now { position: absolute; top: -3px; transform: translateX(50%); z-index: 2; } html[dir="ltr"] .atl-now { transform: translateX(-50%); } .atl-now::before { content: ''; display: block; width: 2px; height: 20px; background: #e04545; margin: 0 auto; } .atl-now-label { font-size: 9.5px; font-weight: 800; color: var(--danger); } /* team pulse (C-4) — positive, non-ranked */ .team-pulse { max-width: 900px; margin: 0 auto 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px; } .team-pulse:empty { display: none; } .tp-head { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tp-momentum { font-size: 12px; font-weight: 700; color: var(--success); } .tp-peers { display: flex; gap: 10px; flex-wrap: wrap; } .tp-peer { display: flex; align-items: center; gap: 7px; background: var(--surface2); border: 1px solid var(--border); border-radius: 22px; padding: 5px 12px 5px 6px; } .tp-peer.tp-active { border-color: color-mix(in srgb, #2ecc71 40%, var(--border)); background: color-mix(in srgb, #2ecc71 7%, var(--surface2)); } .tp-avatar { width: 26px; height: 26px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .tp-name { font-size: 12.5px; font-weight: 700; color: var(--text); } .tp-stat { font-size: 11px; font-weight: 700; color: var(--text-muted); } .tp-active .tp-stat { color: var(--success); } /* ══════════════════════════════════════════════════════════ STAGE A — grouped "طلباتي": vertical sections + report cards ══════════════════════════════════════════════════════════ */ /* ═══ v93: WORKSPACE — team rail + kanban columns ═══ */ /* ═══ v94: who's on this report — editor + whoever picked it up ═══ */ .grc-who { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 7px; white-space: nowrap; } .grc-who-ed { background: color-mix(in srgb, #64748B 18%, transparent); color: var(--text); } .grc-who-wk { background: color-mix(in srgb, var(--sec-color, #E8A020) 20%, transparent); color: var(--text); } /* ═══ v98: editor edited this card + add-card button ═══ */ .mc-edited { font-size: 10.5px; font-weight: 800; background: color-mix(in srgb, #E8A020 22%, transparent); color: var(--accent-fg); border-radius: 7px; padding: 2px 7px; white-space: nowrap; flex-shrink: 0; } .mc-addcard { margin-top: 10px; padding: 11px; border: 1.5px dashed var(--border); border-radius: 10px; text-align: center; font-size: 13px; font-weight: 700; color: var(--accent-fg); cursor: pointer; transition: all .15s; } .mc-addcard:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } /* ═══ v94: expand-to-popup buttons ═══ */ .gr-expand-btn, .mc-expand-btn { background: transparent; border: 1px solid var(--border); color: var(--text-muted); border-radius: 7px; width: 26px; height: 26px; flex-shrink: 0; cursor: pointer; font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: all .15s; } .gr-expand-btn:hover, .mc-expand-btn:hover { color: var(--accent-fg); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); } #cardpop-body .mc-card { border: 1px solid var(--border); } /* v135: البطاقة المكبّرة كانت 640px فالمحتوى (نقاط + نص أصلي + هوية) بينكدّس عمودي ضيّق ومبعثر. صارت 820 + تنفّس داخلي أحسن للعرض. */ #cardpop-body { font-size: 13.5px; } #cardpop-body .mc-card { padding: 16px 18px; } #cardpop-body .mc-points-list > * { margin-bottom: 7px; } #cardpop-body .mc-original, #cardpop-body .mc-guidance { line-height: 1.9; } /* v137: البطاقة المكبّرة عمودين — الشغل (نقاط/إرشاد/تسليم) يمين، النص الأصلي يسار جنبه بدل ما ينكدّس تحت بالزاوية (كان بيبان مبعثر بصورة العرض). بس للبطاقة المكبّرة (#cardpop-body) — البطاقة العادية بالطلب ما بتتأثر. */ /* v139 — التقسيمة الصحيحة (بأسماء البنية الحقيقية هالمرة): mc-work = شغل المصمم (عنوان الشاشة، النقاط، الإرشاد) → عمود يمين mc-original-wrap = نص التقرير الأصلي (شغل المحرر) → عمود يسار mc-idrow (المؤقتات) + mc-actions (الأزرار) = عرض كامل فوق/تحت. غلطة v137: استهدفت mc-original-wrap صح بس نسيت mc-media-edit جوّا mc-actions، وما ضبطت الترتيب. هالمرة كل شي محدّد صح. */ /* v176 — بوب أب البطاقة: عمودين نظاف عالحاوية الصح (mc-body-cols). شبكة v139 القديمة كانت على mc-tree-body بمناطق مسمّاة، بس الشغل والنص صاروا أحفاد (جوّا mc-body-cols) فالمناطق ما عادت تنطبق والمحتوى انحشر فوق بعضه. هلق التقسيمة عالحاوية المباشرة: mc-work = شغل المصمم (عنوان الشاشة، النقاط، الإرشاد) → واسع mc-original-wrap = نص التقرير الأصلي (شغل المحرر) → جنبه، لاصق المؤقتات فوق والأزرار تحت بعرض كامل (برّات الحاوية أصلاً). */ @media (min-width: 720px) { #cardpop-body .mc-body-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px 20px; align-items: start; } #cardpop-body .mc-work { min-width: 0; } #cardpop-body .mc-original-wrap { min-width: 0; margin: 0; align-self: start; border-top: none; background: color-mix(in srgb, var(--surface2) 45%, transparent); border: 1px solid var(--border); border-radius: 10px; padding: 4px 12px 12px; position: sticky; top: 0; } /* شارة صغيرة فوق كل عمود — رمز محايد (CSS ما بيتغيّر مع اللغة) */ #cardpop-body .mc-work::before { content: "🎨"; display: block; font-size: 15px; margin-bottom: 6px; opacity: .7; } #cardpop-body .mc-original-wrap::before { content: "📄"; display: block; font-size: 13px; margin-bottom: 2px; opacity: .6; } } #cardpop-body .mc-tree-head { cursor: default; } #cardpop-body .mc-tree-arrow, #cardpop-body .mc-expand-btn { display: none; } .tf-workspace { max-width: min(1600px, calc(100vw - 40px)); margin: 0 auto 18px; display: flex; gap: 14px; align-items: flex-start; } .grouped-reports .grc-air, .grouped-reports .grc-id, .grouped-reports .grc-who { white-space: nowrap; } .grouped-reports .gr-report-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .tf-rail { width: 172px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px; position: sticky; top: 12px; } .tf-rail:empty { display: none; } .tf-rail-head { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 10px; } .tf-mate { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 10px; cursor: pointer; transition: background .15s; } .tf-mate:hover { background: var(--surface2); } .tf-mate-av { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; background: var(--surface2); color: var(--text); overflow: hidden; } .tf-mate-av img { width: 100%; height: 100%; object-fit: cover; } .tf-mate-main { min-width: 0; flex: 1; } .tf-mate-name { font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tf-mate-role { font-size: 10.5px; color: var(--text-muted); } .tf-mate-dot { width: 7px; height: 7px; border-radius: 50%; background: #cfcfcf; flex-shrink: 0; } .tf-mate-dot.on { background: #2ecc71; box-shadow: 0 0 0 3px rgba(46,204,113,.18); } .tf-rail-group { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--accent-fg); cursor: pointer; padding-inline: 6px; border-radius: 8px; } .tf-rail-group:hover { background: var(--surface2); } .tf-board { flex: 1; min-width: 0; } /* ═══ v93: DAY BAR ═══ */ .tf-daybar { max-width: min(1600px, calc(100vw - 40px)); margin: 0 auto 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; border-inline-start: 4px solid var(--db-color, #E8A020); padding: 11px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .tf-daybar:empty { display: none; } .tf-db-left { display: flex; align-items: center; gap: 10px; min-width: 0; } .tf-db-icon { font-size: 20px; line-height: 1; } .tf-db-title { font-size: 14px; font-weight: 800; color: var(--text); } .tf-db-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; } .tf-db-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .tf-db-count { text-align: center; } .tf-db-count-n { font-size: 15px; font-weight: 800; color: var(--db-color, #E8A020); font-variant-numeric: tabular-nums; } .tf-db-count-l { font-size: 10px; color: var(--text-muted); } .tf-db-sep { width: 1px; height: 26px; background: var(--border); } .tf-db-prog { min-width: 96px; } .tf-db-prog-top { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-muted); margin-bottom: 3px; } .tf-db-prog-bar { height: 5px; background: var(--surface2); border-radius: 4px; overflow: hidden; } .tf-db-prog-fill { height: 100%; background: var(--db-color, #E8A020); border-radius: 4px; transition: width .5s ease; } .tf-db-streak { display: flex; align-items: center; gap: 4px; background: var(--surface2); border-radius: 9px; padding: 3px 9px; font-size: 11.5px; font-weight: 700; color: var(--text); } .tf-daybar.hot { border-inline-start-color: #e24b4a; animation: dbPulse 2s ease-in-out infinite; } @keyframes dbPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(226,75,74,0); } 50% { box-shadow: 0 0 0 4px rgba(226,75,74,.12); } } @media (prefers-reduced-motion: reduce) { .tf-daybar.hot { animation: none; } } /* card settles into its new column */ @keyframes grSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .gr-report.just-moved { animation: grSlideIn .45s ease; } @media (prefers-reduced-motion: reduce) { .gr-report.just-moved { animation: none; } } .grouped-reports { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; max-width: 100%; margin: 0; } @media (max-width: 1000px) { .tf-workspace { flex-direction: column; } .tf-rail { width: 100%; position: static; } .grouped-reports { grid-template-columns: 1fr; } } .grouped-reports-legacy { display: flex; flex-direction: column; gap: 18px; max-width: 900px; margin: 0 auto; } .gr-section { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; border-top: 3px solid var(--sec-color, var(--accent)); } .grouped-reports .gr-section-head { padding: 11px 12px; } .grouped-reports .gr-sec-label { font-size: 13.5px; } .grouped-reports .gr-section-body { padding: 0 9px 11px; } .grouped-reports .gr-report { border-radius: 10px; border-inline-start: 3px solid var(--sec-color, var(--accent)); } .grouped-reports .gr-report-head { padding: 11px 12px; gap: 9px; } .gr-section-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; user-select: none; transition: background .15s; } .gr-section-head:hover { background: color-mix(in srgb, var(--sec-color) 6%, transparent); } .gr-sec-arrow { font-size: 13px; color: var(--text-muted); transition: transform .2s; } .gr-section.collapsed .gr-sec-arrow { transform: rotate(-90deg); } .gr-sec-label { font-size: 15px; font-weight: 800; color: var(--text); flex: 1; } .gr-sec-count { background: var(--sec-color, var(--accent)); color: #fff; font-weight: 800; font-size: 12.5px; min-width: 24px; height: 24px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; } .gr-section-body { padding: 0 12px 14px; display: flex; flex-direction: column; gap: 10px; } .gr-section.collapsed .gr-section-body { display: none; } .gr-sec-empty { color: var(--text-muted); font-size: 13px; text-align: center; padding: 12px; } /* report card (collapsed → expandable) */ .gr-report { background: var(--surface2); border: 1px solid var(--border); border-radius: 13px; overflow: hidden; transition: border-color .15s, box-shadow .15s; } .gr-report:hover { border-color: color-mix(in srgb, var(--sec-color) 40%, var(--border)); box-shadow: 0 3px 14px color-mix(in srgb, var(--sec-color) 10%, transparent); } .gr-report-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; } .gr-report-arrow { font-size: 13px; color: var(--text-muted); transition: transform .2s; flex-shrink: 0; } .gr-report.open .gr-report-arrow { transform: rotate(90deg); } .gr-report-main { flex: 1; min-width: 0; } .gr-report-title { font-size: 15px; font-weight: 800; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gr-report-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 5px; } .gr-report-meta > span { font-size: 11.5px; font-weight: 700; } .grc-id { color: var(--text-muted); font-family: monospace; } .grc-air { padding: 2px 8px; border-radius: 7px; } .grc-cards { color: var(--text-muted); } .gr-report-progress { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; min-width: 82px; } .grc-bar { width: 82px; height: 7px; background: var(--border); border-radius: 4px; overflow: hidden; } .grc-bar-fill { height: 100%; background: linear-gradient(90deg, var(--sec-color, var(--accent)), color-mix(in srgb, var(--sec-color) 60%, #2ecc71)); border-radius: 4px; transition: width .5s ease; } .grc-pct { font-size: 11px; font-weight: 800; color: var(--text-muted); font-variant-numeric: tabular-nums; } .gr-report-body { display: none; padding: 0 14px 12px; } .gr-report.open .gr-report-body { display: block; animation: mcExpand .2s ease; } .ct-air-green { color: var(--success); background: color-mix(in srgb, var(--success) 13%, transparent); padding: 4px 10px; border-radius: 8px; } .ct-air-orange { color: var(--accent-fg); background: color-mix(in srgb, #e8a020 15%, transparent); padding: 4px 10px; border-radius: 8px; } .ct-air-red { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); padding: 4px 10px; border-radius: 8px; animation: ctPulse 1.2s ease-in-out infinite; } /* designer work block */ .mc-work { margin-bottom: 8px; } .mc-points-label { font-size: 11.5px; font-weight: 800; color: var(--text-muted); margin-bottom: 6px; } .mc-screen-title { font-size: 14px; font-weight: 700; color: var(--text); background: transparent; border-inline-start: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 4px 10px; margin-bottom: 10px; } .mc-figures { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; } .mc-fig { font-size: 12px; font-weight: 800; font-family: monospace; color: var(--accent-fg); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 7px; padding: 3px 9px; } /* ═══ v113: ONE BOLD COLOUR, ONE MEANING ═══ The points were GREEN — but green means "done" everywhere else in the app, and these points are the work that hasn't started yet. The guidance was BLUE — blue means "montage". The colours were telling the designer the wrong story, and six of them competed for attention at once. Now: gold = your work. Everything else is quiet grey and supports it. */ .mc-point { font-size: 13px; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-inline-start: 3px solid var(--accent); border-radius: 6px; padding: 6px 10px; margin-bottom: 5px; } .mc-guide { font-size: 12.5px; color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 7%, transparent); border-inline-start: 2px solid var(--border-strong, var(--border)); border-radius: 6px; padding: 6px 10px; margin-top: 5px; line-height: 1.6; } .mc-guide.mc-note { background: color-mix(in srgb, #e8a020 12%, transparent); border-inline-start-color: #e8a020; } /* original paragraph (collapsible, second) */ .mc-original-wrap { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 8px; } .mc-original-head { font-size: 12px; font-weight: 700; color: var(--text-muted); cursor: pointer; user-select: none; } .mc-original-arrow { display: inline-block; transition: transform .2s; font-size: 10px; } .mc-original-wrap.open .mc-original-arrow { transform: rotate(90deg); } .mc-original-body { display: none; font-size: 12.5px; line-height: 1.7; color: var(--text-muted); background: color-mix(in srgb, #8a8a9a 10%, transparent); border-radius: 8px; padding: 9px 11px; margin-top: 7px; white-space: pre-wrap; } .mc-original-wrap.open .mc-original-body { display: block; } .mc-link { display: inline-block; font-size: 12.5px; color: var(--info); margin-top: 6px; word-break: break-all; } .mc-path { font-size: 11.5px; font-family: monospace; color: var(--text-muted); margin-top: 3px; word-break: break-all; } .mc-deliverables { background: color-mix(in srgb, var(--success) 8%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--success) 25%, var(--border)); border-radius: 10px; padding: 8px 12px; margin: 8px 0; } .mc-deliverables .mc-link { margin-top: 0; font-weight: 700; } /* editable media ID field (montage/admin) */ .mc-media-edit { display: flex; flex-direction: column; gap: 5px; max-width: 300px; } .mc-media-label { font-size: 11.5px; font-weight: 700; color: var(--text-muted); } .mc-media-input { background: var(--surface); border: 1.5px solid var(--border); border-radius: 8px; color: var(--text); font-family: monospace; font-size: 13px; padding: 8px 11px; width: 100%; box-sizing: border-box; direction: ltr; text-align: left; transition: border-color .15s; } .mc-media-input:focus { outline: none; border-color: var(--accent); } /* card action buttons */ .mc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .mc-btn { border: none; border-radius: 9px; font-family: inherit; font-weight: 800; font-size: 12.5px; padding: 9px 16px; cursor: pointer; transition: filter .15s, transform .1s; } .mc-btn:active { transform: scale(.97); } .mc-btn.go { background: var(--accent); color: var(--accent-ink, #0a0e1a); } .mc-btn.start { background: var(--info); color: #fff; } .mc-btn.done { background: var(--success); color: var(--success-ink); } .mc-btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--text-muted); } .mc-btn.ghost:hover { border-color: var(--accent); color: var(--accent-fg); } .mc-btn:hover { filter: brightness(1.08); } .mc-stamp { font-size: 12px; font-weight: 700; color: var(--success); } /* v121 — الختم بيقول وين وصلت البطاقة، مش بس «انبعتت». قاعدة اللون الواحد: ذهبي = لسا بانتظار · أزرق/بنفسجي = عند المونتاج · أخضر = خلصت. */ .mc-stamp-wait { color: var(--accent-fg); } .mc-stamp-mont { color: var(--violet); } .mc-stamp-done { color: var(--success); } /* ── themed deliver modals ── */ .dv-modal { max-width: 460px; width: 92%; } .dv-field { margin-bottom: 14px; } .dv-field label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; color: var(--text); } .dv-field input, .dv-field textarea { width: 100%; box-sizing: border-box; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-family: inherit; font-size: 14px; padding: 11px 12px; } .dv-field input:focus, .dv-field textarea:focus { outline: none; border-color: var(--accent); } .dv-actions { display: flex; gap: 10px; margin-top: 6px; } /* ── AI page (independent, all roles) ── */ #page-ai .ai-page-wrap { max-width: 1150px; margin: 0 auto; } .ai-page-hero { text-align: center; padding: 20px 0 8px; } .ai-page-hero h1 { font-size: 24px; margin-bottom: 4px; } .ai-page-hero p { color: var(--text-muted); font-size: 13px; } .ai-page-chat { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; min-height: 340px; display: flex; flex-direction: column; } .ai-page-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 8px; min-height: 56vh; max-height: 70vh; } /* v180: مساحة محادثة أوسع */ .aip-msg { max-width: 82%; padding: 11px 14px; border-radius: 14px; font-size: 14px; line-height: 1.7; white-space: pre-wrap; } .aip-msg.user { align-self: flex-end; background: var(--accent); color: var(--accent-ink, #0a0e1a); border-bottom-right-radius: 4px; } .aip-msg.ai { align-self: flex-start; background: var(--surface2); border: 1px solid var(--border); border-bottom-left-radius: 4px; } .aip-msg.thinking { opacity: .7; font-style: italic; } .ai-page-input-row { display: flex; gap: 10px; align-items: stretch; margin-top: 12px; border-top: 1px solid var(--border); padding-top: 14px; } .ai-page-input-row textarea { flex: 1 1 auto; width: 100%; min-width: 0; background: var(--surface2); border: 1.5px solid var(--border); border-radius: 14px; color: var(--text); font-family: inherit; font-size: 15px; padding: 15px 18px; resize: none; min-height: 58px; max-height: 200px; line-height: 1.55; box-sizing: border-box; } .ai-page-input-row textarea:focus { border-color: var(--accent); outline: none; } .ai-page-input-row .btn-submit { flex: 0 0 auto; width: auto; min-width: 110px; max-width: 140px; padding: 0 26px !important; font-size: 15px; } /* v169 — زر توسيع الكتابة + popup كبير */ .ai-expand-btn { flex: 0 0 auto; width: 42px; align-self: stretch; background: var(--surface2); border: 1.5px solid var(--border); border-radius: 12px; color: var(--text-muted); font-size: 17px; cursor: pointer; transition: all .15s; display: flex; align-items: center; justify-content: center; } .ai-expand-btn:hover { border-color: var(--accent); color: var(--accent-fg); } .ai-chat-input-row .ai-expand-btn { width: 38px; font-size: 15px; } .write-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 10000; display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(4px); } .write-modal-overlay.open { display: flex; animation: pageIn .2s ease; } .write-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; width: 100%; max-width: 760px; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(0,0,0,.55); overflow: hidden; } .write-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); } .write-modal-head span { font-weight: 800; font-size: 15px; } .write-modal-close { background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; width: 34px; height: 34px; cursor: pointer; color: var(--text); font-size: 16px; } .write-modal textarea { flex: 1; min-height: 340px; background: var(--surface2); border: none; color: var(--text); font-family: inherit; font-size: 16px; padding: 20px; resize: none; line-height: 1.7; outline: none; box-sizing: border-box; } .write-modal-foot { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); justify-content: flex-end; } .write-modal-foot .btn-submit { width: auto; min-width: 130px; padding: 12px 24px; } /* v169 — بطاقة الموظّف: الرصيد + الأرشيف */ .mlc-body { padding: 18px 20px; overflow-y: auto; max-height: 70vh; } .mlc-balances { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; } .mlc-balances.mlc-three { grid-template-columns: 1fr 1fr 1fr 1fr; } /* v179: أربع أرصدة (+ البدل) */ @media (max-width: 680px) { .mlc-balances.mlc-three { grid-template-columns: 1fr 1fr; } } @media (max-width: 420px) { .mlc-balances.mlc-three { grid-template-columns: 1fr; } } .mlc-hint { font-size: 11.5px; color: var(--text-muted); background: var(--surface2); border: 1px dashed var(--border); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; } /* v170 — شارة النوتات على اسم الموظّف */ .sched-note-badge { display: inline-flex; align-items: center; gap: 2px; margin-inline-start: 6px; padding: 2px 7px; background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 999px; font-size: 10.5px; font-weight: 800; cursor: pointer; transition: all .15s; vertical-align: middle; } .sched-note-badge:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); transform: scale(1.08); } .sched-note-badge-empty { opacity: 0; } tr:hover .sched-note-badge-empty { opacity: .55; } .sched-note-badge-empty:hover { opacity: 1 !important; } /* v170 — بطاقة نوتات الموظّف */ .mn-note { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; transition: all .15s; } .mn-note:hover { border-color: var(--accent); transform: translateX(-2px); } .mn-note.mn-faded { opacity: .55; } .mn-note.mn-faded:hover { opacity: .9; } .mn-note-text { font-size: 13px; line-height: 1.5; margin-bottom: 5px; } .mn-note-meta { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; } .mn-go { color: var(--accent-fg); font-weight: 700; margin-inline-start: auto; } /* v170 — شرح آلية الحساب */ .mlc-how { color: var(--accent-fg); font-weight: 800; cursor: pointer; text-decoration: underline; } .lhw-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; } .lhw-ic { font-size: 22px; } .lhw-txt { display: flex; flex-direction: column; gap: 2px; font-size: 13px; } .lhw-txt b { font-size: 13.5px; } .lhw-txt span { color: var(--text-muted); font-size: 12px; } .lhw-txt small { color: var(--accent-fg); font-size: 11.5px; font-weight: 700; } /* v171 — منتقي الأسابيع المخصّص */ .wp-body { padding: 12px 16px; overflow-y: auto; max-height: 62vh; display: flex; flex-direction: column; gap: 7px; } .wp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; background: var(--surface2); border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; transition: all .15s; } .wp-row:hover { border-color: var(--accent); transform: translateX(-3px); } .wp-row.wp-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface2)); } .wp-row.wp-current .wp-label::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; margin-inline-end: 8px; vertical-align: middle; animation: weekPulse 2s ease-in-out infinite; } .wp-label { font-size: 13px; font-weight: 800; } .wp-now { font-size: 10.5px; font-weight: 800; color: var(--success); background: color-mix(in srgb, #2ecc71 14%, transparent); padding: 3px 9px; border-radius: 999px; } .wp-past, .wp-future { font-size: 10.5px; color: var(--text-muted); } /* v171 — دبّوس النوت جوّا خانة اليوم */ .cell-notes { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; } .cell-note-pin { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 7px; border: 1px solid; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; transition: transform .15s; } .cell-note-pin:hover { transform: scale(1.05); } /* v171 — نبضة النوت الجديدة (أقل من يومين) — بتلفت العين */ .sched-note-fresh { animation: freshNote 1.8s ease-in-out infinite; } @keyframes freshNote { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } } /* v171 — نبض التغطية: كم شغّال كل يوم */ .sched-cov { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; } .sched-cov.cov-ok { color: var(--success); background: color-mix(in srgb, #2ecc71 12%, transparent); } .sched-cov.cov-low { color: var(--accent-fg); background: color-mix(in srgb, #e8a020 14%, transparent); } .sched-cov.cov-none { color: #e05252; background: color-mix(in srgb, #e05252 14%, transparent); animation: freshNote 1.5s ease-in-out infinite; } /* ═══ v172 — ترقية الرسايل ═══ */ /* v183 — أيقونات SVG بدل الإيموجي: واضحة بكل الثيمات، وحجم اللمس 42px (المعيار العالمي 44 — قريب منو مع الفراغات). */ .msgs-icon-btn { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; background: var(--surface); border: 1.5px solid var(--border); cursor: pointer; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; transition: all .16s; } .msgs-icon-btn svg { width: 20px; height: 20px; } .msgs-icon-btn:hover { border-color: var(--accent); color: var(--accent-fg); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); transform: translateY(-1px); } .msgs-icon-btn:active { transform: translateY(0) scale(.96); } /* زر الإرسال: بارز، دائري، بحركة إطلاق لطيفة */ .msgs-send-btn { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; border: none; background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #ff8c42)); color: var(--accent-ink, #0a0e1a); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); transition: all .18s; } .msgs-send-btn svg { width: 21px; height: 21px; transition: transform .2s; } .msgs-send-btn:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 7px 22px color-mix(in srgb, var(--accent) 45%, transparent); } [dir="rtl"] .msgs-send-btn svg { transform: scaleX(-1); } .msgs-send-btn:hover svg { transform: translateX(2px) rotate(-6deg); } [dir="rtl"] .msgs-send-btn:hover svg { transform: scaleX(-1) translateX(2px) rotate(-6deg); } .msgs-send-btn:active { transform: scale(.94); } .msgs-icon-btn.urgent-on { border-color: var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 15%, transparent); animation: freshNote 1.2s ease-in-out infinite; } /* v183 — الأيقونة نفسها بتصير حمرا */ /* v325 — نقطة الحضور الحي */ .pres-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; background: var(--border); transition: background .2s, box-shadow .2s; } .pres-dot.on { background: var(--success); box-shadow: 0 0 7px var(--success); } /* v325 — الأوامر السريعة */ .dm-cmds { position: absolute; bottom: 62px; inset-inline-start: 16px; z-index: 40; display: none; min-width: 262px; max-height: 220px; overflow: auto; padding: 5px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--border); box-shadow: 0 18px 44px -18px rgba(0,0,0,.6); } .dm-cmds.on { display: block; } .dmc-i { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 12.5px; } .dmc-i:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); } .dmc-i b { color: var(--accent-fg); font-family: 'IBM Plex Mono', monospace; font-size: 12px; } .dmc-i small { color: var(--text-muted); font-size: 10.5px; margin-inline-start: auto; } .msg-thread-input { position: relative; } .msgs-typing { padding: 4px 18px; font-size: 12px; color: var(--accent-fg); font-weight: 700; animation: pageIn .2s ease; } .msgs-attach-preview { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--surface2); border-top: 1px solid var(--border); } .msgs-attach-preview img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; } .map-ic { font-size: 22px; } .map-name { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; } .map-x { margin-inline-start: auto; cursor: pointer; opacity: .6; font-size: 14px; } .map-x:hover { opacity: 1; } .msg-att-img { max-width: 220px; max-height: 180px; border-radius: 12px; display: block; margin-bottom: 6px; cursor: zoom-in; } .msg-att-file { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 10px; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; text-decoration: none; color: var(--text); } .msg-att-file:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); } .msg-bubble.msg-urgent { border: 1.5px solid var(--danger); box-shadow: 0 0 12px color-mix(in srgb, var(--danger) 30%, transparent); } .msg-urgent-tag { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; color: var(--danger); margin-bottom: 4px; } /* v543 — LED لا 🔴: الأيقونات رسومٌ لا إيموجي، والضوء يقول «الآن» */ .msg-urgent-led { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent); } .pinned-bar { display: flex; flex-direction: column; gap: 4px; padding: 8px 14px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border-bottom: 1px solid var(--border); } .pinned-item { font-size: 12px; cursor: pointer; padding: 4px 8px; border-radius: 8px; display: flex; gap: 6px; align-items: center; transition: background .15s; } .pinned-item:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } .msg-flash { animation: msgFlash 1.5s ease; } @keyframes msgFlash { 0%,60% { background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 12px; } 100% { background: transparent; } } .m2r-quote { font-size: 12.5px; color: var(--text-muted); background: var(--surface2); border-inline-start: 3px solid var(--accent); border-radius: 8px; padding: 9px 12px; margin-bottom: 12px; } .m2r-label { display: block; font-size: 12px; font-weight: 800; margin: 10px 0 6px; } .m2r-input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-family: inherit; box-sizing: border-box; } .m2r-routes { display: flex; gap: 8px; } .m2r-route { flex: 1; padding: 10px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface2); color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all .15s; } .m2r-route.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .msg-search-title { font-size: 11px; font-weight: 800; color: var(--text-muted); padding: 10px 14px 4px; } .msg-search-hit { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background .15s; } .msg-search-hit:hover { background: var(--surface2); } .msg-search-hit b { font-size: 12px; } .msg-search-hit span { font-size: 11.5px; color: var(--text-muted); } /* ═══ v173 — التقويم الشهري الذكي ═══ */ .wpc-body { padding: 14px 18px 18px; } .wpc-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .wpc-nav-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); cursor: pointer; font-size: 15px; } .wpc-nav-btn:hover { border-color: var(--accent); color: var(--accent-fg); } .wpc-month { font-weight: 900; font-size: 14px; flex: 1; text-align: center; } .wpc-today-btn { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; } .wpc-grid { display: grid; grid-template-columns: 26px repeat(7, 1fr); gap: 3px; margin-bottom: 4px; } .wpc-head { text-align: center; font-size: 10px; font-weight: 800; color: var(--text-muted); padding: 4px 0; } .wpc-weeks { display: flex; flex-direction: column; gap: 3px; } .wpc-week { display: grid; grid-template-columns: 26px repeat(7, 1fr); gap: 3px; align-items: center; border-radius: 10px; padding: 2px; border: 1.5px solid transparent; transition: all .15s; } .wpc-week.wpc-old { opacity: .55; } /* أسابيع ماضية باهتة */ .wpc-week.wpc-cur { border-color: #2ecc71; background: color-mix(in srgb, #2ecc71 6%, transparent); } /* الأسبوع الحالي أخضر */ .wpc-week.wpc-sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } /* المعروض حالياً */ .wpc-go { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 7px; cursor: pointer; font-size: 12px; color: var(--text-muted); transition: all .15s; } .wpc-go:hover { background: var(--accent); color: var(--accent-ink); transform: scale(1.12); } .wpc-cur .wpc-go { color: var(--success); } .wpc-day { text-align: center; padding: 7px 0; border-radius: 8px; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all .12s; } .wpc-day:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); transform: scale(1.1); } .wpc-day.wpc-out { opacity: .28; } .wpc-day.wpc-past { color: var(--text-muted); } .wpc-day.wpc-today { background: var(--danger); color: var(--danger-ink); font-weight: 900; } /* اليوم معلّم أحمر */ .wpc-hint { margin-top: 12px; font-size: 11px; color: var(--text-muted); background: var(--surface2); border: 1px dashed var(--border); border-radius: 10px; padding: 8px 12px; } /* مركز اليوم */ .dh-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface2); border: 1px solid var(--border); margin-bottom: 6px; } .dh-name { font-size: 12.5px; font-weight: 800; flex: 1; } .dh-shift { font-size: 11.5px; } .dh-none { color: var(--text-muted); opacity: .6; } .dh-acts { display: flex; gap: 4px; } .dh-act { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: 13px; transition: all .12s; } .dh-act:hover { border-color: var(--accent); transform: scale(1.1); } .mn-del { margin-inline-start: 8px; cursor: pointer; opacity: .55; } .mn-del:hover { opacity: 1; } /* v174 — نبض الفريق: شو عم يشتغل الزميل هلق */ .tf-mate-pulse { font-size: 10px; font-weight: 700; color: var(--accent-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 118px; animation: pageIn .3s ease; } /* ═══ v176 — توزيع البطاقة: بالطي عمود واحد بعرض كامل، وبالبوب أب عمودين (قاعدة ‎#cardpop-body .mc-body-cols‎ فوق هي الوحيدة المسؤولة عن البوب أب — قاعدة ‎#cardpop-overlay‎ القديمة بعمود 240px انشالت لأنها كانت تتضارب معها) ═══ */ .mc-body-cols { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .mc-body-cols > * { min-width: 0; } .mc-body-cols .mc-work { width: 100%; } .mc-body-cols .mc-original-wrap { width: 100%; } /* بالطي: تحت البطاقات بعرض كامل */ /* ═══ v176 — عدسة الدور: كل حساب بيشوف شغله مضوّي ═══ */ .mc-lens { font-size: 12.5px; font-weight: 700; border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; line-height: 1.7; border: 1px solid transparent; animation: pageIn .25s ease; } .mc-lens b { font-weight: 900; } .mc-lens-d { color: #c98a20; background: color-mix(in srgb, #e8a020 9%, transparent); border-color: color-mix(in srgb, #e8a020 30%, transparent); } .mc-lens-m { color: var(--violet); background: color-mix(in srgb, #9c5ad0 9%, transparent); border-color: color-mix(in srgb, #9c5ad0 30%, transparent); } .mc-lens-p { color: #20b2aa; background: color-mix(in srgb, #20b2aa 9%, transparent); border-color: color-mix(in srgb, #20b2aa 30%, transparent); } .mc-lens-wait { font-size: 11px; font-weight: 800; color: #e5484d; margin-inline-start: 6px; } /* خيط ملكية ملوّن لكل قسم: ذهبي = شغل الجرافيك، رمادي هادي = نص المحرر */ .lens-designer .mc-point { border-inline-start-color: #e8a020; } .lens-montage .mc-guide { border-inline-start: 3px solid #9c5ad0; padding-inline-start: 10px; border-radius: 6px; } /* تعتيم لطيف لغير شغلك — بيضل مقروء (الشفافية موجودة) بس عينك بتروح عالمهم */ .lens-designer .mc-original-wrap, .lens-montage .mc-original-wrap { opacity: .78; transition: opacity .2s; } .lens-designer .mc-original-wrap:hover, .lens-designer .mc-original-wrap:focus-within, .lens-montage .mc-original-wrap:hover, .lens-montage .mc-original-wrap:focus-within { opacity: 1; } .lens-montage .mc-point { opacity: .82; transition: opacity .2s; } .lens-montage .mc-point:hover { opacity: 1; } /* الشرائط الفوقية: لينك + رقم المادة — صغار مدمجين فوق العنوان */ .mc-deliverables { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 8px; } .mc-media-edit { background: color-mix(in srgb, #2ecc71 7%, transparent); border: 1px solid color-mix(in srgb, #2ecc71 25%, transparent); border-radius: 10px; padding: 6px 10px; } .mc-media-label { font-size: 10.5px; font-weight: 800; white-space: nowrap; } .mc-media-input { width: 130px; padding: 5px 9px; font-size: 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: inherit; } /* v175 — الطي الموحّد للبوكسات */ .tb-fold .tb-arrow { display: inline-block; transition: transform .2s; font-size: 12px; margin-inline-end: 4px; } .tb-fold.open .tb-arrow { transform: rotate(90deg); } .tb-fold .tb-body { display: none; } .tb-fold.open .tb-body { display: block; animation: pageIn .2s ease; } /* بوكس مهمة المونتاج البنفسجي */ .montage-task-box { border-color: #9c5ad0 !important; background: color-mix(in srgb, #9c5ad0 6%, var(--surface)) !important; } .montage-task-box .dtb-head { color: var(--violet); } /* v175 — توسيع مودال الطلب */ .modal { max-width: 840px; } /* v175 — بوكسات الهوية أصغر */ .vi-panel .vi-chip { padding: 4px 10px !important; font-size: 11px !important; border-radius: 8px !important; } /* v175 — توحيد عناصر المتصفح مع ثيمنا */ select, input[type="date"], input[type="time"], input[type="datetime-local"] { background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; font-family: inherit; padding: 8px 10px; } input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(.5); cursor: pointer; } * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 35%, transparent) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 8px; } *::-webkit-scrollbar-track { background: transparent; } /* ═══ v174 — إحياء طلباتي ═══ */ /* أولوية اليوم 🔥 */ .tps-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; background: linear-gradient(120deg, color-mix(in srgb, #e8a020 8%, var(--surface)), var(--surface)); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 14px; } .tps-title { font-size: 12px; font-weight: 900; } .tps-chip { font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--border); cursor: pointer; transition: all .15s; } .tps-chip:hover { border-color: var(--accent); transform: translateY(-1px); } .tps-chip.tps-warm { border-color: #e8a020; color: var(--accent-fg); } .tps-chip.tps-hot { border-color: var(--danger); background: var(--danger); color: var(--danger-ink, #0a0e1a); animation: freshNote 1.4s ease-in-out infinite; } /* v557 — كان أحمرَ نصّاً (٣٫٠–٤٫٤ في الثيمات): صار حبراً على صبغته */ /* وضع الليستة — v192: بيشتغل عالحاويات الحقيقية بكل الأقسام */ #designer-list.list-mode, #designer-kanban.list-mode, #montage-list.list-mode, #montage-kanban.list-mode { display: block !important; } /* v341 — «ليستة» للبنية الحالية (grouped-reports شبكة ٣ أعمدة): القواعد القديمة كانت تستهدف kanban-board يلي ما عاد موجود — فزر ليستة عند المصمم والمونتاج كان بلا أي مفعول بصري. */ .grouped-reports.list-mode { display: flex !important; flex-direction: column; gap: 14px; max-width: 980px; margin: 0 auto; } .list-mode .kanban-board { display: block !important; } .list-mode .kanban-col { width: 100% !important; max-width: none !important; margin-bottom: 14px; } .view-toggle { display: inline-flex; gap: 4px; } /* البوكسات القابلة للضغط */ .workload-item.wl-click { cursor: pointer; transition: all .15s; } .workload-item.wl-click:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.12); } .workload-item.wl-click:active { transform: scale(.97); } /* توهّج الطلب الجديد (أول دقيقة) */ .req-card.rc-new-glow, .mc-card.rc-new-glow { animation: newGlow 2s ease-in-out infinite; border-color: #e8c020 !important; } @keyframes newGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(232,192,32,.35); } 50% { box-shadow: 0 0 18px 4px rgba(232,192,32,.18); } } /* ثيم المونتاج البنفسجي */ .mc-card.mc-montage-theme { border-inline-start: 3px solid #9c5ad0 !important; background: linear-gradient(120deg, color-mix(in srgb, #9c5ad0 6%, var(--surface)), var(--surface)); } .mt-early-badge { display: flex; align-items: center; gap: 8px; padding: 9px 14px; margin-top: 8px; background: color-mix(in srgb, #9c5ad0 10%, transparent); border: 1px dashed #9c5ad0; border-radius: 10px; font-size: 12px; font-weight: 700; color: #b98ae0; } .mlc-bal-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 14px; padding: 14px; } .mlc-bal-top { font-size: 13px; font-weight: 800; margin-bottom: 8px; } .mlc-bal-nums { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; } .mlc-bal-nums b { font-size: 26px; color: var(--text); } .mlc-bal-used { font-size: 11px; color: var(--text-muted); margin-top: 6px; } .mlc-edit-btn { width: 100% !important; margin-bottom: 16px; padding: 10px !important; } .mlc-archive-title { font-size: 13px; font-weight: 800; margin-bottom: 10px; padding-top: 6px; border-top: 1px solid var(--border); padding-top: 14px; } .mlc-archive { display: flex; flex-direction: column; gap: 6px; } .mlc-rec { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; font-size: 13px; } .mlc-rec-ic { font-size: 16px; } .mlc-rec-label { font-weight: 700; } .mlc-rec-date { margin-inline-start: auto; color: var(--text-muted); font-size: 12px; } .mlc-empty { text-align: center; color: var(--text-muted); padding: 20px; font-size: 13px; } .sched-name-click { cursor: pointer; transition: color .15s; } .sched-name-click:hover { color: var(--accent-fg); text-decoration: underline; } /* v169 — منتقي القوالب (thumbnails) */ .tpl-picker-body { padding: 18px 20px; overflow-y: auto; max-height: 72vh; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .tpl-card { position: relative; background: var(--surface2); border: 1.5px solid var(--border); border-radius: 14px; padding: 14px; cursor: pointer; transition: all .15s; } .tpl-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.15); } .tpl-card-name { font-weight: 800; font-size: 13px; margin-bottom: 8px; padding-inline-end: 24px; } .tpl-card-preview { font-size: 15px; letter-spacing: 2px; line-height: 1.5; min-height: 24px; color: var(--text); opacity: .85; word-break: break-all; } .tpl-card-meta { font-size: 11px; color: var(--text-muted); margin-top: 8px; } .tpl-card-del { position: absolute; top: 10px; inset-inline-end: 10px; background: transparent; border: none; cursor: pointer; font-size: 14px; opacity: .6; transition: opacity .15s; } .tpl-card-del:hover { opacity: 1; } /* v169 — أزرار أدوات الدوام: مدمجة وأنيقة */ .sched-tools-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .sched-tool-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; background: var(--surface2); border: 1.5px solid var(--border); border-radius: 10px; color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all .15s; white-space: nowrap; } .sched-tool-btn:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.12); } .sched-tool-btn:active { transform: scale(.97); } .sched-tool-btn .stb-ic { font-size: 15px; display: inline-flex; } .sched-tool-btn.primary { background: var(--accent); color: var(--accent-ink, #0a0e1a); border-color: var(--accent); } .sched-tool-btn.primary:hover { background: var(--accent2); } .sched-tool-btn.danger:hover { border-color: #e05252; color: #e05252; } @media (max-width: 600px) { .sched-tool-btn .stb-tx { display: none; } /* بالموبايل: أيقونة بس (أنظف) */ .sched-tool-btn { padding: 9px 11px; } } /* v180 — التولبار صار جوّا كرت الشات (كان عايم برّاه وبيتشوّه بالشبكة) */ .ai-page-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dashed var(--border); } .ai-tb-label { font-size: 12px; font-weight: 800; color: var(--text-muted); } /* v181 — سايد بار محادثات المساعد (محفوظة بقاعدة البيانات) */ .ai-page-shell { display: flex; gap: 14px; align-items: stretch; } .ai-page-shell > .ai-page-chat { flex: 1; min-width: 0; } .ai-page-side { width: 216px; flex-shrink: 0; display: flex; flex-direction: column; gap: 9px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 13px; } .aps-head { font-size: 12.5px; font-weight: 900; color: var(--text-muted); } .aps-new { background: color-mix(in srgb, var(--accent) 12%, var(--surface2)); border: 1.5px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: 11px; color: var(--accent-fg); font-family: inherit; font-size: 12.5px; font-weight: 800; padding: 9px; cursor: pointer; transition: all .15s; } .aps-new:hover { background: color-mix(in srgb, var(--accent) 20%, var(--surface2)); } .apc-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; max-height: 62vh; } .apc-empty { font-size: 11.5px; color: var(--text-muted); text-align: center; padding: 18px 6px; line-height: 1.8; } .apc-item { position: relative; background: var(--surface2); border: 1px solid var(--border); border-radius: 11px; padding: 9px 11px; cursor: pointer; transition: all .13s; } .apc-item:hover { border-color: var(--accent); } .apc-item.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface2)); } .apc-t { font-size: 12px; font-weight: 800; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .apc-m { font-size: 10px; color: var(--text-muted); margin-top: 2px; } .apc-del { position: absolute; top: 7px; inset-inline-end: 8px; font-size: 10.5px; opacity: 0; transition: opacity .15s; } .apc-item:hover .apc-del { opacity: .75; } @media (max-width: 900px) { .ai-page-shell { flex-direction: column; } .ai-page-side { width: auto; } .apc-list { max-height: 190px; } } .ai-page-empty { text-align: center; color: var(--text-muted); font-size: 14px; margin: auto; padding: 40px 20px; } .ai-page-future { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .ai-future-chip { font-size: 12px; color: var(--text-muted); background: var(--surface2); border: 1px dashed var(--border); border-radius: 20px; padding: 5px 12px; } /* discussion count badge on cards */ .mc-disc-badge { font-size: 11px; font-weight: 700; color: var(--info); background: color-mix(in srgb, var(--info) 14%, transparent); border-radius: 10px; padding: 2px 8px; margin-inline-start: 6px; } /* batch handoff */ .batch-handoff { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: color-mix(in srgb, var(--success) 8%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--success) 30%, var(--border)); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; } .batch-progress { font-weight: 800; font-size: 14px; color: var(--success); } .batch-wait { font-size: 11.5px; font-weight: 700; color: var(--text-muted); width: 100%; } /* v179 — سطر عدّ المونتير */ .montage-counts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; font-weight: 700; color: var(--text); background: color-mix(in srgb, #9c5ad0 7%, var(--surface2)); border: 1px solid color-mix(in srgb, #9c5ad0 25%, var(--border)); border-radius: 11px; padding: 8px 13px; margin-bottom: 10px; line-height: 1.8; } .montage-counts b { color: var(--violet); } /* v179 — رقاقات مصدر المادة */ .nr-src-chips { display: flex; gap: 7px; flex-wrap: wrap; } .nr-src-chip { background: var(--surface2); border: 1.5px solid var(--border); border-radius: 10px; color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 800; padding: 8px 13px; cursor: pointer; transition: all .15s; } .nr-src-chip:hover { border-color: #9c5ad0; } .nr-src-chip.selected { border-color: #9c5ad0; color: var(--violet); background: color-mix(in srgb, #9c5ad0 11%, transparent); } /* v181 — اختيار متعدد للمصدر + خانة «وين المادة» لكل مصدر */ .nr-src-boxes { display: flex; flex-direction: column; gap: 7px; margin-top: 9px; } .nr-src-boxes:empty { display: none; } .nr-src-box { display: flex; align-items: center; gap: 9px; background: color-mix(in srgb, #9c5ad0 6%, var(--surface2)); border: 1px solid color-mix(in srgb, #9c5ad0 28%, var(--border)); border-radius: 11px; padding: 8px 12px; animation: pageIn .22s ease both; } .nr-src-box-tag { font-size: 11.5px; font-weight: 900; color: var(--violet); flex-shrink: 0; min-width: 74px; } .nr-src-box input { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-family: inherit; font-size: 12.5px; padding: 7px 11px; } .nr-src-box input:focus { border-color: #9c5ad0; outline: none; } /* v182 — بانر الإشعار: بنص الشاشة من فوق، كبير وما بينغفل */ .notif-banner { position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%); z-index: 13000; max-width: min(560px, 92vw); display: flex; align-items: center; gap: 12px; background: var(--surface); border: 2px solid var(--accent); border-top: none; border-radius: 0 0 18px 18px; padding: 14px 20px; cursor: pointer; box-shadow: 0 14px 44px rgba(0,0,0,.28); opacity: 0; overflow: hidden; transition: transform .38s cubic-bezier(.22,1.2,.36,1), opacity .3s; } .notif-banner.show { transform: translate(-50%, 0); opacity: 1; } .notif-banner .nb-ic { font-size: 20px; flex-shrink: 0; animation: nbPulse 1.4s ease-in-out infinite; } @keyframes nbPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.22); } } .notif-banner .nb-txt { font-size: 14px; font-weight: 800; line-height: 1.7; flex: 1; min-width: 0; color: var(--text); } .notif-banner .nb-open { font-size: 11.5px; font-weight: 900; color: var(--accent-fg); flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 999px; padding: 4px 12px; } .notif-banner .nb-x { font-size: 12px; color: var(--text-muted); flex-shrink: 0; padding: 2px 4px; } .notif-banner .nb-x:hover { color: var(--text); } .notif-banner .nb-bar { position: absolute; bottom: 0; inset-inline-start: 0; height: 3px; background: var(--accent); width: 100%; transform-origin: inline-start; animation: nbCount 6s linear forwards; } .notif-banner.urgent { border-color: #e5484d; } .notif-banner.urgent .nb-open { color: #e5484d; border-color: color-mix(in srgb, #e5484d 45%, var(--border)); } .notif-banner.urgent .nb-bar { background: #e5484d; animation-duration: 9s; } @keyframes nbCount { from { transform: scaleX(1); } to { transform: scaleX(0); } } @media (max-width: 560px) { .notif-banner { padding: 12px 14px; gap: 9px; } .notif-banner .nb-txt { font-size: 13px; } .notif-banner .nb-open { display: none; } } /* v179 — فورم الإجازة الرسمي */ /* v200 — لستات القسم والمسمى الوظيفي بنفس هوية حقول الفورم */ .hrf-select { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-family: inherit; font-size: 13px; font-weight: 700; padding: 10px 12px; cursor: pointer; } .hrf-select:focus { border-color: var(--accent); outline: none; } .hrf-open-btn { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 12px; color: var(--accent-fg); font-family: inherit; font-size: 13px; font-weight: 800; padding: 9px 16px; cursor: pointer; transition: all .15s; } .hrf-open-btn:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); } .hrf-section { font-size: 12.5px; font-weight: 900; color: var(--accent-fg); margin: 14px 0 8px; padding-bottom: 5px; border-bottom: 1px dashed var(--border); } .hrf-types { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; } .sr-row.sr-hrform { border-inline-start: 3px solid var(--accent); } .hrf-arc-btn { border-color: color-mix(in srgb, #9c5ad0 45%, var(--border)); color: var(--violet); margin-inline-start: 8px; } .hrf-arc-btn:hover { background: color-mix(in srgb, #9c5ad0 9%, transparent); } .hrf-search-btn { border-color: color-mix(in srgb, #20b2aa 45%, var(--border)); color: #20b2aa; margin-inline-start: 8px; } .hrf-search-btn:hover { background: color-mix(in srgb, #20b2aa 9%, transparent); } .hra-group { margin-bottom: 14px; } .hra-name { font-size: 13.5px; font-weight: 900; color: var(--text); margin-bottom: 7px; display: flex; align-items: center; gap: 8px; } .hra-count { font-size: 10.5px; font-weight: 800; background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; padding: 1px 8px; color: var(--text-muted); } .hra-dept { font-size: 10.5px; color: var(--text-muted); } .hra-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--surface2); border: 1px solid var(--border); border-radius: 11px; padding: 9px 12px; margin-bottom: 7px; } .hra-type { font-size: 12.5px; font-weight: 800; } .hra-meta { font-size: 11px; color: var(--text-muted); margin: 2px 0 4px; } .hra-st { font-size: 10.5px; font-weight: 800; border-radius: 8px; padding: 2px 8px; } .hra-pending { color: var(--accent-fg); background: color-mix(in srgb, #e8a020 11%, transparent); } .hra-approved { color: var(--success); background: color-mix(in srgb, #2ecc71 11%, transparent); } .hra-sent { color: var(--info); background: color-mix(in srgb, #3a90e0 11%, transparent); } .hra-rejected { color: #e5484d; background: color-mix(in srgb, #e5484d 11%, transparent); } .hra-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .hra-send { background: #3a90e0; border: none; border-radius: 9px; color: #fff; font-family: inherit; font-size: 11.5px; font-weight: 800; padding: 6px 12px; cursor: pointer; } .hra-send:hover { filter: brightness(1.1); } /* v180 — بحث الدوامات */ .schs-filters { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 12px; } @media (max-width: 640px) { .schs-filters { grid-template-columns: 1fr 1fr; } } .schs-sum { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px; font-weight: 700; margin-bottom: 10px; color: var(--text); line-height: 2; } .schs-chip { border: 1px solid var(--border); border-radius: 9px; padding: 2px 9px; font-size: 11px; background: var(--surface2); } .schs-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; } .schs-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; } .schs-name { font-size: 12.5px; font-weight: 900; min-width: 110px; } .schs-date { font-size: 11.5px; color: var(--text-muted); font-weight: 700; } .schs-shift { font-size: 11px; font-weight: 800; border: 1px solid; border-radius: 8px; padding: 2px 9px; background: transparent; } .schs-emg { font-size: 10.5px; font-weight: 800; color: #e5484d; } .schs-dept { font-size: 10.5px; color: var(--text-muted); margin-inline-start: auto; } /* ═══ v181 — مركز الدوامات ═══ */ .sc-modal { max-width: 860px; max-height: 94vh; display: flex; flex-direction: column; overflow: hidden; } .sc-modal .mlc-body { overflow-y: auto; } .sc-tabs { display: flex; gap: 6px; padding: 12px 16px 0; flex-wrap: wrap; border-bottom: 1px solid var(--border); } .sc-tab { background: var(--surface2); border: 1px solid var(--border); border-bottom: none; border-radius: 11px 11px 0 0; color: var(--text-muted); font-family: inherit; font-size: 12px; font-weight: 800; padding: 9px 14px; cursor: pointer; transition: all .14s; } .sc-tab:hover { color: var(--text); } .sc-tab.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #0a0e1a); } .sc-profile { background: color-mix(in srgb, var(--accent) 7%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); border-radius: 14px; padding: 13px 15px; margin-bottom: 12px; } .sc-p-head { font-size: 14px; font-weight: 900; margin-bottom: 9px; } .sc-p-bal { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; } .sc-p-forms { font-size: 12px; color: var(--text-muted); font-weight: 700; line-height: 1.9; } .sc-clean { text-align: center; padding: 26px 14px; font-size: 13.5px; font-weight: 800; color: var(--success); background: color-mix(in srgb, #2ecc71 9%, var(--surface2)); border: 1px solid color-mix(in srgb, #2ecc71 30%, var(--border)); border-radius: 14px; } .sc-issue { display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px; border-radius: 11px; font-size: 12.5px; font-weight: 700; line-height: 1.8; border: 1px solid var(--border); background: var(--surface2); } .sc-issue.bad { border-color: color-mix(in srgb, #e5484d 45%, var(--border)); background: color-mix(in srgb, #e5484d 8%, var(--surface2)); } .sc-issue.warn { border-color: color-mix(in srgb, #e8a020 45%, var(--border)); background: color-mix(in srgb, #e8a020 7%, var(--surface2)); } .sc-i-ic { flex-shrink: 0; font-size: 14px; } .sc-fair { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; } .sc-f-row { display: flex; align-items: center; gap: 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; } .sc-f-row.over { border-color: color-mix(in srgb, #e8a020 50%, var(--border)); } .sc-f-name { font-size: 12.5px; font-weight: 900; min-width: 116px; } .sc-f-flag { font-size: 11px; } .sc-f-bar { flex: 1; height: 8px; background: var(--surface); border-radius: 999px; overflow: hidden; min-width: 60px; } .sc-f-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #20b2aa, #9c5ad0); } .sc-f-nums { font-size: 11px; color: var(--text-muted); font-weight: 700; flex-shrink: 0; } .sc-log-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; font-size: 12px; } .sc-l-when { font-size: 10.5px; color: var(--text-muted); font-weight: 700; min-width: 74px; } .sc-l-who { font-weight: 900; min-width: 104px; } .sc-l-what { color: var(--text-muted); font-weight: 700; } .sc-l-st { margin-inline-start: auto; font-size: 10.5px; font-weight: 800; border-radius: 8px; padding: 2px 9px; background: var(--surface); border: 1px solid var(--border); } .sc-l-st.st-approved { color: var(--success); border-color: color-mix(in srgb, #2ecc71 40%, var(--border)); } .sc-l-st.st-rejected { color: #e5484d; border-color: color-mix(in srgb, #e5484d 40%, var(--border)); } .sc-l-st.st-sent_hr { color: var(--info); border-color: color-mix(in srgb, #3a90e0 40%, var(--border)); } .sc-l-st.st-pending { color: var(--accent-fg); border-color: color-mix(in srgb, #e8a020 40%, var(--border)); } @media (max-width: 620px) { .sc-tab { font-size: 11px; padding: 8px 10px; } .sc-f-name { min-width: 88px; } } /* v180 — هوية المنصة بالفوتر */ .powered-by { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 8px; font-size: 10.5px; font-weight: 700; color: var(--text-muted); opacity: .85; } .powered-by img { height: 18px; width: auto; } /* ══════════════════════════════════════════════════════════ v16 HOME PAGE — living landing ══════════════════════════════════════════════════════════ */ /* ═══ v177 — بهو الطلب · v200 — 🗞️ مطبخ الأخبار (Bento) ═══ */ /* البهو المفتوح بيغطّي الفورم بلا أي تغيير ببنيته */ #page-form.lobby-open > :not(#req-lobby) { display: none !important; } #page-form:not(.lobby-open) #req-lobby { display: none; } .req-lobby { max-width: 860px; margin: 0 auto; padding-top: 8px; } /* v200 — شبكة Bento: بطل كبير بيمتد عمودين وصفّين، والباقي حواليه أصغر */ .lb-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(96px, auto); gap: 12px; } .lb-bento .lb-hero { grid-column: span 2; grid-row: span 2; justify-content: center; padding: 24px; border-width: 2px; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface)); } .lb-bento .lb-hero .lb-door-icon { font-size: 42px; } .lb-bento .lb-hero .lb-door-title { font-size: 20px; } .lb-bento .lb-hero .lb-door-desc { font-size: 13px; } .lb-bento .lb-mini { grid-column: span 2; padding: 14px 16px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-content: center; align-items: center; text-align: start; } .lb-bento .lb-mini .lb-door-icon { font-size: 22px; grid-row: span 2; } .lb-bento .lb-mini .lb-door-title { font-size: 13.5px; } .lb-bento .lb-mini .lb-door-desc { font-size: 11px; } @media (max-width: 760px) { .lb-bento { grid-template-columns: 1fr; } .lb-bento .lb-hero, .lb-bento .lb-mini { grid-column: span 1; grid-row: span 1; } } /* v200 — شريط الأنواع المباشر (رقاقات تعليم متعدد) */ .lb-kinds-box { margin-top: 16px; background: var(--surface); border: 1.5px solid var(--border); border-radius: 18px; padding: 14px 16px; animation: pageIn .4s ease both .15s; } .lb-kinds-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; font-weight: 900; margin-bottom: 10px; } .lb-kinds-hint { font-size: 10.5px; font-weight: 700; color: var(--text-muted); background: var(--surface2); border-radius: 999px; padding: 2px 9px; } .lb-kinds { display: flex; gap: 7px; flex-wrap: wrap; } .lb-kind { display: inline-flex; align-items: center; gap: 5px; background: var(--surface2); border: 1.5px solid var(--border); border-radius: 999px; color: var(--text); font-family: inherit; font-size: 12px; font-weight: 800; padding: 7px 14px; cursor: pointer; transition: all .15s cubic-bezier(.34,1.56,.64,1); } .lb-kind:hover { border-color: var(--accent); transform: translateY(-1px); } .lb-kind.on { border-color: var(--accent); color: var(--accent-fg); background: color-mix(in srgb, var(--accent) 13%, var(--surface)); box-shadow: 0 0 0 1px var(--accent) inset; transform: scale(1.04); } .lb-kind-more { border-style: dashed; color: var(--text-muted); } .lb-kinds-cta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 0; } .lb-kinds-cta:not(:empty) { margin-top: 12px; animation: suggestPop .35s cubic-bezier(.34,1.56,.64,1) both; } .lb-kinds-cta .btn-submit { flex: 0 0 auto; padding: 9px 18px; font-size: 13px; } /* v178 — زر الرجوع للمطبخ: دايم بأعلى الفورم، بينخبّى لحالو لما البهو مفتوح */ .nr-lab-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; color: var(--text-muted); font-family: inherit; font-size: 12.5px; font-weight: 800; padding: 7px 13px; cursor: pointer; margin-bottom: 12px; transition: all .15s; } .nr-lab-btn:hover { border-color: var(--accent); color: var(--accent-fg); transform: translateX(2px); } [dir="rtl"] .nr-lab-btn:hover { transform: translateX(-2px); } .lb-head { text-align: center; margin-bottom: 22px; } .lb-title { font-size: 24px; font-weight: 900; color: var(--text); } .lb-sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; } .lb-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; } .lb-door { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: start; background: var(--surface); border: 1.5px solid var(--border); border-radius: 18px; padding: 18px; cursor: pointer; font-family: inherit; color: var(--text); transition: transform .18s, border-color .18s, box-shadow .18s; animation: pageIn .35s ease backwards; position: relative; } /* v180 — روح المعمل */ .lb-greet { font-size: 15px; font-weight: 800; color: var(--text-muted); margin-bottom: 4px; animation: pageIn .4s ease both; } .lb-pulse { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; font-size: 12px; font-weight: 700; color: var(--text-muted); margin-top: 10px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); border-radius: 12px; padding: 7px 14px; line-height: 1.9; } .lb-pulse b { color: var(--accent-fg); } .lb-door .lb-door-icon { transition: transform .25s cubic-bezier(.34,1.56,.64,1); display: inline-block; } .lb-door:hover .lb-door-icon { transform: translateY(-4px) scale(1.18) rotate(-6deg); } .lb-suggest { position: absolute; top: 10px; inset-inline-end: 12px; font-size: 10px; font-weight: 900; color: #0a0e1a; background: linear-gradient(120deg, #ffd75e, #ffb74d); border-radius: 9px; padding: 3px 9px; animation: suggestPop .5s cubic-bezier(.34,1.56,.64,1) both .35s; } @keyframes suggestPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } } .lb-door:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 12%, transparent); } .lb-door-icon { font-size: 26px; } .lb-door-title { font-size: 15.5px; font-weight: 900; } .lb-door-desc { font-size: 12px; color: color-mix(in srgb, var(--text-muted) 80%, var(--text)); line-height: 1.6; } /* v552 — على صبغة الباب الدافئة كان ٤٫٣ */ .lb-door.lb-draft { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); } .lb-door.lb-quick:hover { border-color: #e5484d; box-shadow: 0 8px 24px color-mix(in srgb, #e5484d 14%, transparent); } .lb-door.lb-tpl:hover { border-color: #3a90e0; } .lb-door.lb-ai:hover { border-color: #2ecc71; } .lb-door.lb-clone:hover { border-color: #9c5ad0; } .lb-skip { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; font-size: 12px; color: var(--text-muted); cursor: pointer; user-select: none; } .lb-foot { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; } .lb-back, .lb-build { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-family: inherit; font-size: 13px; font-weight: 800; padding: 9px 16px; cursor: pointer; } .lb-back:hover { border-color: var(--accent); color: var(--accent-fg); } .lb-build { border-color: color-mix(in srgb, #9c5ad0 45%, transparent); color: var(--violet); } .lb-build:hover { background: color-mix(in srgb, #9c5ad0 10%, transparent); } /* معرض القوالب */ .lbt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; } .lbt-card { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; text-align: start; background: var(--surface); border: 1.5px solid var(--border); border-radius: 15px; padding: 14px; cursor: pointer; font-family: inherit; color: var(--text); transition: transform .15s, border-color .15s; animation: pageIn .3s ease backwards; min-width: 0; } .lbt-card:hover { transform: translateY(-2px); border-color: #3a90e0; } .lbt-emoji { font-size: 22px; } .lbt-name { font-size: 14px; font-weight: 900; } .lbt-types { font-size: 11px; color: var(--text-muted); } .lbt-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; } .lbt-time { font-weight: 800; color: var(--success); background: color-mix(in srgb, #2ecc71 10%, transparent); border-radius: 8px; padding: 2px 7px; } .lbt-time.lbt-dim { color: var(--text-muted); background: var(--surface2); font-weight: 600; } .lbt-built { font-weight: 800; color: var(--violet); background: color-mix(in srgb, #9c5ad0 10%, transparent); border-radius: 8px; padding: 2px 7px; } .lbt-by { font-size: 10.5px; color: var(--text-muted); opacity: .8; } .lbt-empty { grid-column: 1 / -1; text-align: center; color: var(--text-muted); font-size: 13px; padding: 26px 0; } /* فحص الواقعية */ .nr-reality { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; border-radius: 12px; padding: 9px 14px; margin-bottom: 10px; line-height: 1.7; border: 1px solid transparent; animation: pageIn .3s ease; } .rc-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: currentColor; box-shadow: 0 0 8px currentColor; } .nr-reality.rc-green { color: var(--success); background: color-mix(in srgb, #2ecc71 8%, transparent); border-color: color-mix(in srgb, #2ecc71 28%, transparent); } .nr-reality.rc-amber { color: var(--accent-fg); background: color-mix(in srgb, #e8a020 8%, transparent); border-color: color-mix(in srgb, #e8a020 28%, transparent); } .nr-reality.rc-red { color: #e5484d; background: color-mix(in srgb, #e5484d 8%, transparent); border-color: color-mix(in srgb, #e5484d 30%, transparent); } /* شريط المداومين + التفضيل */ .nr-onduty-inner { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; margin-bottom: 12px; animation: pageIn .3s ease; } .nrod-label { font-size: 11.5px; font-weight: 800; color: var(--text-muted); } .nrod-role { font-size: 13px; margin-inline-start: 4px; } .nrod-chip { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-family: inherit; font-size: 11.5px; font-weight: 700; padding: 4px 10px; cursor: pointer; transition: all .15s; } .nrod-chip:hover { border-color: #e8a020; } .nrod-chip.starred { border-color: #e8a020; color: #c98a20; background: color-mix(in srgb, #e8a020 12%, transparent); } .nrod-hint { font-size: 10.5px; color: var(--text-muted); opacity: .75; margin-inline-start: auto; } /* شارة التفضيل عالبطاقة */ .mc-pref-stamp { font-size: 10.5px; font-weight: 800; color: #c98a20; white-space: nowrap; background: color-mix(in srgb, #e8a020 13%, transparent); border: 1px solid color-mix(in srgb, #e8a020 35%, transparent); border-radius: 9px; padding: 2px 8px; animation: pageIn .3s ease; } /* نافذة النسخ */ .clp-search { width: 100%; box-sizing: border-box; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-family: inherit; font-size: 13px; padding: 9px 12px; margin-bottom: 10px; } .clp-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; } .clp-row { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: start; background: var(--surface2); border: 1px solid var(--border); border-radius: 11px; padding: 9px 12px; cursor: pointer; font-family: inherit; color: var(--text); transition: border-color .15s; min-width: 0; width: 100%; box-sizing: border-box; } .clp-row:hover { border-color: #9c5ad0; } .clp-name { font-size: 13.5px; font-weight: 800; } .clp-meta { font-size: 11px; color: var(--text-muted); } .clp-note { font-size: 11px; color: var(--text-muted); margin-top: 10px; line-height: 1.7; } /* v178 — نوافذ تحويل/إضافة البطاقة */ .cm-standalone { width: 100%; background: color-mix(in srgb, #9c5ad0 12%, var(--surface2)); border: 1.5px solid color-mix(in srgb, #9c5ad0 40%, var(--border)); border-radius: 12px; color: var(--text); font-family: inherit; font-size: 13.5px; font-weight: 800; padding: 13px; cursor: pointer; margin-bottom: 14px; transition: all .15s; } .cm-standalone:hover { background: color-mix(in srgb, #9c5ad0 20%, var(--surface2)); } .cm-or { text-align: center; font-size: 11.5px; color: var(--text-muted); margin-bottom: 12px; font-weight: 700; } .ac-textarea { width: 100%; box-sizing: border-box; background: var(--surface2); border: 1.5px solid var(--border); border-radius: 12px; color: var(--text); font-family: inherit; font-size: 14px; padding: 12px 14px; resize: vertical; min-height: 110px; line-height: 1.7; margin-bottom: 10px; } .ac-textarea:focus { border-color: var(--accent); outline: none; } /* منشئ القوالب */ .tplb-body .field { margin-bottom: 12px; } .tplb-emojis, .tplb-types { display: flex; flex-wrap: wrap; gap: 7px; } .tplb-emoji { font-size: 17px; background: var(--surface2); border: 1.5px solid var(--border); border-radius: 10px; padding: 5px 9px; cursor: pointer; transition: all .15s; } .tplb-emoji.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .tplb-type { background: var(--surface2); border: 1.5px solid var(--border); border-radius: 10px; color: var(--text); font-family: inherit; font-size: 12px; font-weight: 700; padding: 6px 11px; cursor: pointer; transition: all .15s; } .tplb-type.selected { border-color: #3a90e0; color: var(--info); background: color-mix(in srgb, #3a90e0 10%, transparent); } .tplb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 560px) { .tplb-two { grid-template-columns: 1fr; } } .tplb-seg { display: flex; gap: 6px; flex-wrap: wrap; } .tplb-seg button { background: var(--surface2); border: 1.5px solid var(--border); border-radius: 10px; color: var(--text); font-family: inherit; font-size: 12px; font-weight: 700; padding: 6px 11px; cursor: pointer; } .tplb-seg button.selected { border-color: var(--accent); color: var(--accent-fg); background: color-mix(in srgb, var(--accent) 10%, transparent); } .home-wrap { max-width: 1100px; margin: 0 auto; } /* ═══ v622 — الرئيسية: غرفة التحكّم ═══ شريط التحكّم (الساعة · النشرة القادمة · مصابيح الصحّة) · «دورك الآن» بجانب أرقام اليوم · خط اليوم بالنشرات · على الدوام وما أُنجز ونبض الفريق بجانب مفاتيح كأزرار الكونسول. اللوحة محايدة؛ اللون المشبع لمصباح النشرة حين تقترب، وللعاجل في «دورك الآن» — لا للزينة. بلا تدرّجٍ متحرّك ولا إيموجي يطفو (كانا للزينة). الكروت المتكرّرة بلا blur. */ .home-hero.hx-console { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr); grid-template-areas: "id clock next" "health health health"; align-items: center; gap: 14px 22px; border-radius: 18px; padding: 20px 22px 14px; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--border); } .hx-id { grid-area: id; min-width: 0; } .home-greet-text { font-size: 22px; font-weight: 700; color: var(--text); } .home-greet-sub { font-size: 13px; color: var(--text-muted); margin-top: 3px; } .home-brief { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); line-height: 1.8; } .hx-clock { grid-area: clock; font-size: 46px; font-weight: 600; line-height: 1; letter-spacing: .5px; color: var(--text); font-variant-numeric: tabular-nums; direction: ltr; padding: 10px 16px; border-radius: 12px; background: color-mix(in srgb, var(--text) 5%, var(--surface2)); border: 1px solid var(--border); } .hx-clock small { font-size: 22px; color: var(--text-muted); margin-inline-start: 2px; } .hx-next { grid-area: next; min-width: 0; padding-inline-start: 18px; border-inline-start: 1px solid var(--border); } .hx-next-l { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .hx-next-n { margin-top: 4px; font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hx-next-n .mono { font-weight: 500; color: var(--text-muted); font-size: 13px; } .hx-next-c { margin-top: 2px; font-size: 20px; font-weight: 700; color: var(--text); } .hx-next-c.hx-warn { color: var(--accent-fg); } .hx-next-c.hx-bad { color: var(--danger); } .hx-next-s { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; } .hx-health { grid-area: health; display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 10px; border-top: 1px solid var(--border); } /* المصباح: نقطةٌ بلون الحال وحلقةٌ خافتة — والنصّ بجانبه بلون النصّ (المعنى في النقطة وفي الكلمة) */ .hx-led { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text); } .hx-led i { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--text-muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-muted) 18%, transparent); } .hx-led.ok i { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 20%, transparent); } .hx-led.warn i { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .hx-led.bad i { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent); animation: hxBlink 1.2s ease-in-out infinite; } .hx-led.off i { background: transparent; border: 1.5px solid var(--text-muted); box-shadow: none; width: 8px; height: 8px; } @keyframes hxBlink { 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .hx-led.bad i { animation: none; } } .hx-quiet { color: var(--text-muted); font-size: 12.5px; } /* «دورك الآن» بجانب أرقام اليوم */ .hx-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; margin-bottom: 16px; align-items: stretch; } .hx-focus { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .hx-prime { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 12px; width: 100%; text-align: start; cursor: pointer; padding: 14px 16px; border-radius: 14px; font: inherit; color: var(--text); background: var(--surface2); border: 1px solid var(--border); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 9%, transparent); transition: transform .08s, border-color .15s; } .hx-prime:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .hx-prime:active { transform: scale(.965); } .hx-prime .hm-ic { color: var(--text-muted); display: inline-flex; } .hx-prime b { font-size: 34px; font-weight: 600; line-height: 1; } .hx-prime-t { font-size: 15px; font-weight: 600; } .hx-go { font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); } .hx-focus.u .hx-prime { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); } .hx-focus.u .hx-prime b, .hx-focus.u .hx-prime .hm-ic { color: var(--danger); } .hx-calm { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--text); padding: 6px 2px; } .hx-calm-sub { font-size: 12.5px; color: var(--text-muted); line-height: 1.7; } .hx-row .home-stats { margin-bottom: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .hx-row .home-stat { padding: 12px; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ic num" "ic lab"; align-items: center; column-gap: 12px; text-align: start; } .hx-row .home-stat-icon { grid-area: ic; margin-bottom: 0; width: 40px; height: 40px; } .hx-row .home-stat-num { grid-area: num; font-size: 28px; font-weight: 600; } .hx-row .home-stat-label { grid-area: lab; margin-top: 2px; } .home-live { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 16px; } .home-live-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; min-width: 0; } /* داخل عمود الفريق: أقسامٌ بخطٍّ فاصل لا كروتٌ داخل كرت (ولا غلاسٌ داخل غلاس) */ .home-col-pulse .home-live-card, body.tf-on .home-col-pulse .home-live-card { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0 0 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border); } .hx-row .home-mine { margin: 0; } .hl-title { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 8px; } .hl-skeleton, .hl-empty { font-size: 12.5px; color: var(--text-muted); padding: 6px 0; } .hl-sub { font-size: 11.5px; color: var(--text-muted); } .hl-sub-inline { font-size: 11px; color: var(--text-muted); font-weight: 600; } .hl-myshift { font-size: 13.5px; color: var(--text); margin-bottom: 8px; line-height: 1.7; } .hl-myshift.hl-off { color: var(--text-muted); } .hl-mates { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11.5px; color: var(--text-muted); margin-bottom: 8px; } .hl-mate { display: inline-flex; align-items: center; gap: 6px; background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; padding: 3px 9px; font-size: 11.5px; font-weight: 600; color: var(--text); white-space: nowrap; } .hl-mate .hx-led i { width: 7px; height: 7px; box-shadow: none; } .hl-goto { background: transparent; border: none; color: var(--accent-fg); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 2px 0; min-height: 28px; } .hl-goto:hover { text-decoration: underline; } .hl-achv-total, .hl-star, .hl-mine { font-size: 13px; color: var(--text); line-height: 1.9; } .hl-star b { color: var(--accent-fg); } .hl-mine { color: var(--success-ink, var(--text)); font-weight: 600; } .home-timeline { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 18px 8px; margin-bottom: 16px; } .htl-track { position: relative; height: 30px; background: color-mix(in srgb, var(--border) 40%, transparent); border-radius: 8px; margin: 4px 6px 6px; } .htl-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--surface); cursor: pointer; padding: 0; transition: transform .15s; z-index: 1; } [dir="rtl"] .htl-dot { transform: translate(50%, -50%); } .htl-dot:hover { transform: translate(-50%, -50%) scale(1.45); z-index: 2; } [dir="rtl"] .htl-dot:hover { transform: translate(50%, -50%) scale(1.45); } .htl-now { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--accent); border-radius: 2px; } /* علامة النشرة الثابتة: خطٌّ رأسيّ واسمها فوقه مختصراً */ .htl-bul { position: absolute; top: 0; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: auto; } [dir="rtl"] .htl-bul { transform: translateX(50%); } .htl-bul i { width: 2px; flex: 1; background: color-mix(in srgb, var(--text) 35%, transparent); border-radius: 1px; } .htl-bul em { position: absolute; bottom: calc(100% + 2px); font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; } .htl-bul.r1 em { bottom: calc(100% + 16px); } .home-timeline .hl-title { margin-bottom: 36px; } /* الهاتف: الأسماء في التلميح وحده — لا تتّسع لها الشاشة */ @media (max-width: 560px) { .htl-bul em { display: none; } .home-timeline .hl-title { margin-bottom: 10px; } } .htl-marks { position: relative; height: 16px; margin: 0 6px; } .htl-mark { position: absolute; transform: translateX(-50%); font-size: 10px; color: var(--text-muted); } [dir="rtl"] .htl-mark { transform: translateX(50%); } /* stat cards */ .home-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; } .home-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px; text-align: center; animation: homeRise .5s ease backwards; } @keyframes homeRise { from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} } .home-stat-icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 10px; } .home-stat-num { font-size: 32px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; } .home-stat-label { font-size: 12.5px; color: var(--text-muted); margin-top: 6px; font-weight: 600; } /* two-column body */ .home-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: start; } .home-section-title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--text-muted); margin-bottom: 12px; } /* مفاتيح سريعة: أزرار كونسول — مربّعة، حدٌّ لمّاع داخليّ، والضغط انكماش */ .home-col-actions { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; } .home-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; } .home-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 86px; padding: 12px 8px; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; font-family: inherit; text-align: center; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent), 0 1px 0 color-mix(in srgb, #000 18%, transparent); transition: transform .08s, border-color .15s; animation: homeRise .5s ease backwards; } .home-action:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .home-action:active { transform: scale(.965); } .home-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .home-action-icon { display: inline-flex; color: var(--text-muted); } .home-action:hover .home-action-icon { color: var(--accent-fg); } .home-action-title { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.4; } /* team pulse */ .home-col-pulse { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; } .home-online-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 10px; } .home-online-avatars { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .home-online-more { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface2); border: 1px solid var(--border); font-size: 11px; font-weight: 700; color: var(--text-muted); } .home-pulse-feed { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--border); padding-top: 10px; } .home-pulse-item { display: flex; align-items: center; gap: 9px; padding: 7px 4px; font-size: 12.5px; border-radius: 8px; transition: background .15s; } .home-pulse-item:hover { background: var(--surface2); } .home-pulse-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .home-pulse-text { flex: 1; min-width: 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .home-pulse-time { font-size: 11px; color: var(--text-muted); flex-shrink: 0; } @media (max-width: 860px) { .home-hero.hx-console { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id clock" "next next" "health health"; padding: 16px; } .hx-next { padding-inline-start: 0; border-inline-start: 0; padding-top: 10px; border-top: 1px solid var(--border); } .hx-clock { font-size: 30px; padding: 8px 10px; } .hx-clock small { font-size: 15px; } .hx-row { grid-template-columns: 1fr; } .home-stats { grid-template-columns: repeat(2, 1fr); } .home-grid { grid-template-columns: 1fr; } .home-greet-text { font-size: 19px; } } @media (max-width: 420px) { .home-hero.hx-console { grid-template-columns: 1fr; grid-template-areas: "id" "clock" "next" "health"; } .hx-clock { justify-self: start; } .home-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (pointer: coarse) { .home-action { min-height: 88px; } .hm-i, .hx-prime, .hl-goto { min-height: 44px; } } /* ── v17 Magnific image/video generation ── */ .mc-btn.ai-gen { background: linear-gradient(120deg, #9c5ad0, #3a90e0); color: #fff; border: none; font-weight: 700; } .mc-btn.ai-gen:hover { filter: brightness(1.08); } .ig-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; } .ig-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; } .ig-actions .btn-submit { flex: 1; min-width: 150px; } .ig-status { margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--text); min-height: 18px; text-align: center; } .ig-result { margin-top: 12px; display: flex; flex-direction: column; gap: 14px; } .ig-out { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 10px; } .ig-out-img { width: 100%; border-radius: 8px; display: block; max-height: 360px; object-fit: contain; background: #000; } .ig-out-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .ig-uploaded { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12.5px; color: var(--text-muted); } .ig-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); } .ig-costnote { margin-top: 14px; font-size: 12px; color: var(--text-muted); background: color-mix(in srgb, #e8a020 10%, transparent); border: 1px solid color-mix(in srgb, #e8a020 25%, var(--border)); border-radius: 10px; padding: 10px 12px; } /* admin Magnific settings model toggles */ .mag-model-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; background: var(--surface2); } .mag-model-row label { flex: 1; font-size: 13px; } .mag-test-btn { background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 4px 9px; font-size: 13px; cursor: pointer; transition: all .15s; flex: 0 0 auto; } .mag-test-btn:hover { border-color: var(--accent); transform: scale(1.1); } .mag-edit-btn:hover { border-color: #4a9; } .mag-del-btn:hover { border-color: #e05252; } .mag-hidden-title { font-size: 12px; font-weight: 800; color: var(--text-muted); margin: 10px 0 6px; } .mag-hidden-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 11px; background: var(--surface2); border: 1px dashed var(--border); border-radius: 9px; margin-bottom: 5px; font-size: 12.5px; opacity: .75; } .mag-model-note { font-size: 11px; color: var(--text-muted); } /* themed confirm dialog */ .confirm-icon { font-size: 44px; text-align: center; margin-top: 4px; } .confirm-msg { text-align: center; font-size: 14.5px; color: var(--text); line-height: 1.7; margin-top: 10px; white-space: pre-wrap; } #confirm-overlay .modal { animation: confirmPop .2s ease; } @keyframes confirmPop { from{transform:scale(.94); opacity:0} to{transform:scale(1); opacity:1} } /* ── v15 assigned-task cards ── */ .at-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; margin-bottom: 10px; } .at-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .at-kind { font-size: 12px; font-weight: 700; color: var(--accent-fg); background: color-mix(in srgb, var(--accent) 14%, transparent); padding: 3px 10px; border-radius: 10px; } .at-status { font-size: 12.5px; font-weight: 800; } .at-urgent { font-size: 11.5px; font-weight: 800; color: var(--danger); } .at-who { margin-inline-start: auto; font-size: 11.5px; color: var(--text-muted); } .at-title { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 4px; } .at-details { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: 8px; white-space: pre-wrap; } .at-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .due-chip { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 10px; } .due-green { color: var(--success); background: color-mix(in srgb, var(--success) 13%, transparent); } .due-orange { color: var(--accent-fg); background: color-mix(in srgb, #e8a020 15%, transparent); } .due-red { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); } .at-show { font-size: 12px; font-weight: 700; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); padding: 3px 10px; border-radius: 10px; } .at-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* schedule notes + shift task chips (v15) */ .sched-note-pill { font-size: 11px; font-weight: 700; border-radius: 8px; padding: 3px 8px; margin: 2px; display: inline-block; } .sched-notes-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .sched-shift-task { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-fg); font-size: 10px; font-weight: 700; border-radius: 6px; padding: 1px 5px; margin-top: 2px; display: block; } .sched-cell.drag-over { outline: 2px dashed var(--accent); outline-offset: -2px; } .sched-cell[draggable="true"] { cursor: grab; } .sched-cell.dragging { opacity: .4; } .detail-label { color: var(--text-muted); min-width: 130px; font-weight: 600; } .detail-value { color: var(--text); flex: 1 1 200px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; min-width: 0; } /* On phones the 130px label squeezed the value down to a single letter per line. Stack them instead, and let the label shrink. */ @media (max-width: 640px) { .detail-row { flex-direction: column; align-items: stretch; gap: 4px; } .detail-label { min-width: 0; } .detail-value { flex: 1 1 auto; } } .brief-block { overflow-wrap: anywhere; word-break: break-word; max-width: 100%; box-sizing: border-box; } /* timeline */ .timeline { margin-top: 16px; } .timeline-item { display: flex; gap: 12px; padding: 10px 0; position: relative; } .timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-top: 4px; flex-shrink: 0; } .timeline-content { flex: 1; font-size: 13px; } .timeline-who { font-weight: 700; } .timeline-time { font-size: 11px; color: var(--text-muted); } /* v183 — التوست: كان لون أخضر ساكن بالزاوية وبيمرق بلا ما تحسّ فيه. هلق بيطلع بحركة نابضة، بحلقة ضوء، وبشريط تقدّم — بيلفت النظر وبيختفي بنعومة. */ /* v416 — محمد لقطها بالصور: التوست كان أسفل الطرف (بالـRTL = يسار) شبه مقصوص، وطبقته 12500 تحت نوافذ أعلى. صار أسفل الوسط — ما في حافة يتقصّ عليها — وطبقته فوق التأكيد نفسه، فلا يغيب خلف شيء. */ .toast { position: fixed; bottom: 26px; inset-inline: 0; margin-inline: auto; width: max-content; z-index: 2147483250; display: none; max-width: min(440px, 92vw); padding: 15px 20px 15px 18px; border-radius: 16px; overflow: hidden; /* v187 — الخلفية كانت var(--surface) وهي نص شفافة ببعض الثيمات فيبيّن الأبيض من تحت. هلق طبقتين: لون معتم مضمون + الحدود الملوّنة. */ background: color-mix(in srgb, var(--surface) 100%, transparent); background-color: var(--bg); background-image: linear-gradient(var(--surface), var(--surface)); border: 2px solid var(--success); color: var(--text); backdrop-filter: blur(10px); font-weight: 800; font-size: 13.5px; line-height: 1.7; box-shadow: 0 12px 40px rgba(0,0,0,.24), 0 0 0 6px color-mix(in srgb, var(--success) 12%, transparent); } .toast.show { display: block; animation: toastPop .42s cubic-bezier(.18,1.35,.36,1) both; } .toast.leaving { animation: toastGo .3s ease forwards; } .toast::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 5px; background: var(--success); } .toast::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 0; height: 3px; width: 100%; background: var(--success); opacity: .55; transform-origin: inline-start; animation: toastBar 2.6s linear forwards; } .toast.is-error { border-color: var(--danger); box-shadow: 0 12px 40px rgba(0,0,0,.24), 0 0 0 6px color-mix(in srgb, var(--danger) 12%, transparent); } .toast.is-error::before, .toast.is-error::after { background: var(--danger); } @keyframes toastPop { 0% { opacity: 0; transform: translateY(26px) scale(.9); } 60% { opacity: 1; transform: translateY(-4px) scale(1.03); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes toastGo { to { opacity: 0; transform: translateY(16px) scale(.96); } } @keyframes toastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } } @media (max-width: 560px) { .toast { max-width: 94vw; bottom: 16px; } } .toast.show { display: block; animation: slideUp .3s ease; } .toast.error { border-color: var(--danger); } /* v183 — التلوين صار عالحدود والشريط */ @keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} } .types-manager { display: flex; flex-direction: column; gap: 10px; } .type-row { display: flex; align-items: center; gap: 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; } /* v20: clean team member row — full name on top, @username below, no overlap */ .member-row { align-items: center; gap: 10px; flex-wrap: nowrap; } .member-idcol { flex: 1 1 auto; min-width: 120px; display: flex; flex-direction: column; gap: 2px; } .member-name-input { font-size: 13.5px; font-weight: 700; width: 100%; box-sizing: border-box; min-width: 100px; } .gender-toggle { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; font-size: 15px; width: 34px; height: 34px; cursor: pointer; flex-shrink: 0; } .gender-toggle:hover { border-color: var(--accent); } /* member row: info line + actions line so nothing overflows */ .member-row { flex-direction: column; align-items: stretch; gap: 10px; } .member-main { display: flex; align-items: center; gap: 10px; } .member-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-inline-start: 46px; } .member-pass-input { max-width: 110px; font-family: monospace; font-size: 12.5px; } .member-icon-btn { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; font-size: 15px; width: 36px; height: 36px; cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; transition: all .15s; } .member-icon-btn:hover { border-color: var(--accent); } .member-icon-btn.sched-mgr-btn.on { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: var(--accent); } .btn-del-icon:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); } .member-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-inline-start: 8px; } .member-username { font-size: 11px; color: var(--text-muted); direction: ltr; } .member-row .online-label { font-size: 10.5px; color: var(--success); font-weight: 700; white-space: nowrap; } .member-pass-input { flex: 0 0 auto; width: 96px; max-width: 96px; font-family: monospace; direction: ltr; box-sizing: border-box; } .member-row .member-avatar-wrap { flex-shrink: 0; } .member-row .sched-mgr-btn, .member-row .btn-del { flex-shrink: 0; } @media (max-width: 620px) { .member-row { flex-wrap: wrap; } .member-pass-input { width: 100%; max-width: 100%; } } .type-row .type-row-name { flex: 1; font-weight: 600; } .add-type-form { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .add-type-form input { flex: 1; min-width: 150px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: inherit; font-size: 14px; padding: 10px 14px; } .btn-add { padding: 10px 20px; background: var(--accent); color: var(--accent-ink, #0a0e1a); border: none; border-radius: var(--radius); font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; } .btn-del { padding: 6px 12px; background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); font-family: inherit; font-size: 12px; cursor: pointer; } .btn-del:hover { border-color: var(--danger); color: var(--danger); } .member-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; flex-shrink: 0; transition: border .2s; } .member-avatar:hover { border-color: var(--accent); } .inline-edit-input { background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--text); font-family: inherit; font-size: 13px; font-weight: 700; padding: 5px 8px; width: 100%; transition: all .15s; } .inline-edit-input:hover { background: var(--surface); border-color: var(--border); } .inline-edit-input:focus { outline: none; background: var(--surface); border-color: var(--accent); } /* ── ROLE GROUPS (Team Management) ── */ /* team manager: each role = a column (global masonry-style layout) */ #team-manager { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; align-items: start; } #team-manager .role-group { margin-bottom: 0; } @media (max-width: 700px) { #team-manager { grid-template-columns: 1fr; } } .role-group { margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .role-group-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--surface2); cursor: pointer; user-select: none; } .role-group-icon { font-size: 18px; } .role-group-title { font-weight: 700; font-size: 14px; flex: 1; } .role-group-count { background: var(--accent); color: var(--accent-ink, #0a0e1a); font-size: 11px; font-weight: 900; padding: 2px 9px; border-radius: 12px; } .role-group-chevron { font-size: 14px; color: var(--text-muted); transition: transform .2s; } .role-group-chevron.collapsed { transform: rotate(-90deg); } /* v182 — كان max-height:2000px فيقصّ الأقسام الكبيرة (١٣ شخص وأكتر). هلق بلا سقف لما يكون مفتوح — العدد ما بيهم. */ .role-group-body { display: flex; flex-direction: column; gap: 8px; padding: 10px; max-height: none; overflow: visible; transition: padding .25s ease; } .role-group-body.collapsed { max-height: 0; padding: 0 10px; overflow: hidden; } .types-manager-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .type-row-grid { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 10px; text-align: center; position: relative; } .type-row-grid .btn-del { font-size: 10px; padding: 3px 8px; } @media (max-width: 700px) { .types-manager-grid { grid-template-columns: repeat(2, 1fr); } } /* ═══ PLAYOUT (البث) CARDS ═══ */ .playout-card.is-ready { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); } .status-badge.sb-incoming { background: color-mix(in srgb, #e8a020 18%, transparent); color: var(--accent-fg); } .status-badge.sb-ready { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); } .playout-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; } .pm-field { display: flex; flex-direction: column; gap: 3px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; min-width: 0; } .pm-field.pm-full { grid-column: 1 / -1; } .pm-label { font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; } .pm-value { font-size: 13px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; } .pm-value.pm-mono { font-family: ui-monospace, monospace; font-size: 12px; direction: ltr; text-align: start; } .playout-from { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; } .playout-done-stamp { font-size: 12.5px; font-weight: 700; color: var(--success); } @media (max-width: 640px) { .playout-media-grid { grid-template-columns: 1fr; } } /* ═══ COLLAPSIBLE SECTION (settings cards) ═══ */ /* v182 — كان سقف 2000px يقصّ البطاقات الطويلة (إدارة الفريق بـ١٣ شخص وأكتر كانت تنقصّ). بلا سقف لما تكون مفتوحة — والطي بيضل يشتغل. */ .collapsible-body { overflow: visible; transition: opacity .2s; max-height: none; opacity: 1; } .collapsible-body.collapsed { max-height: 0; opacity: 0; margin: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; } .collapse-chevron { transition: transform .25s; font-size: 14px; color: var(--text-muted); } .collapse-chevron.collapsed { transform: rotate(-90deg); } /* ═══ MY SETTINGS (per-account) ═══ */ .my-settings-grid { display: flex; flex-direction: column; gap: 20px; max-width: 560px; } .ms-field { display: flex; flex-direction: column; gap: 7px; } .ms-label { font-size: 12.5px; font-weight: 700; color: var(--text-muted); } .ms-input { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: inherit; font-size: 14px; padding: 10px 12px; width: 100%; } @media (max-width: 700px) { .my-settings-grid { grid-template-columns: 1fr; } } /* ═══ KANBAN BOARD (paragraph-tasks) ═══ */ .kanban-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; align-items: start; } .kanban-col { background: var(--surface2); border: 1px solid var(--border); border-radius: 14px; padding: 12px; min-height: 90px; } .kanban-col-head { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .kanban-count { background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; } .kanban-col-body { display: flex; flex-direction: column; gap: 10px; } .kanban-empty { color: var(--text-muted); font-size: 12px; text-align: center; padding: 14px 0; opacity: .6; } .task-card { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 12px; transition: border-color .15s, box-shadow .15s; } .task-card.is-mine { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); } .task-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .task-seq { background: var(--accent); color: var(--accent-ink, #0a0e1a); font-weight: 800; font-size: 11px; min-width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; } .task-show { font-weight: 700; font-size: 13px; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .task-type { font-size: 10.5px; font-weight: 700; color: var(--accent-fg); background: color-mix(in srgb, var(--accent) 14%, transparent); padding: 2px 8px; border-radius: 10px; } .task-brief { font-size: 12.5px; line-height: 1.7; color: var(--text-muted); white-space: pre-wrap; max-height: 130px; overflow: hidden; margin-bottom: 8px; } /* v18: timers + deliverables shown ON the card, outside the request */ .task-timers { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 8px; } .task-timers span { font-size: 11.5px; font-weight: 700; border-radius: 8px; padding: 3px 9px; } .tc-work { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-fg); font-variant-numeric: tabular-nums; } .tc-work.montage { background: color-mix(in srgb, #9c5ad0 15%, transparent); color: var(--violet); } .tc-work.live::after { content: ' ●'; color: var(--success); } .task-deliver { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11.5px; margin-bottom: 8px; background: color-mix(in srgb, var(--success) 8%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--success) 22%, var(--border)); border-radius: 8px; padding: 6px 9px; } .task-deliver a { color: var(--info); font-weight: 700; text-decoration: none; } .task-deliver span { color: var(--text-muted); } .task-assignee { font-size: 11.5px; color: var(--text-muted); margin-bottom: 6px; } .task-link { display: inline-block; font-size: 12px; color: var(--accent-fg); text-decoration: none; margin-bottom: 8px; } .task-link:hover { text-decoration: underline; } .task-stamp { font-size: 12px; font-weight: 700; color: var(--success); } .task-card-actions { display: flex; gap: 8px; flex-wrap: wrap; } @media (max-width: 900px) { .kanban-board { grid-template-columns: 1fr; } } /* ═══ BENTO DASHBOARD GRID ═══ */ .bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 12px; margin-bottom: 16px; } .bento-card { background: var(--surface); border: 1px solid var(--border); border-inline-start: 3px solid var(--c); border-radius: 14px; padding: 18px; cursor: pointer; transition: transform .12s, box-shadow .12s; display: flex; flex-direction: column; justify-content: center; } .bento-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.18); } .bento-num { font-size: 32px; font-weight: 800; color: var(--c); line-height: 1; } .bento-label { font-size: 13px; color: var(--text-muted); margin-top: 6px; } /* hero: spans 2×2 */ .bento-hero { grid-column: span 2; grid-row: span 2; border-inline-start-width: 4px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 12%, var(--surface)), var(--surface)); } .bento-hero-num { font-size: 64px; font-weight: 900; color: var(--c); line-height: 1; } .bento-hero-label { font-size: 18px; font-weight: 700; color: var(--text); margin-top: 8px; } .bento-hero-sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; } @media (max-width: 800px) { .bento-grid { grid-template-columns: repeat(2, 1fr); } .bento-hero { grid-column: span 2; grid-row: span 1; } .bento-hero-num { font-size: 46px; } } .empty-state { text-align: center; padding: 50px 20px; color: var(--text-muted); } .empty-state .empty-icon { font-size: 44px; margin-bottom: 10px; } /* ── STATS PAGE ── */ .stat-bar-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } .stat-bar-row:last-child { border-bottom: none; } .stat-bar-label { min-width: 130px; font-size: 13px; font-weight: 600; display:flex; align-items:center; gap:6px; } .stat-bar-track { flex: 1; height: 22px; background: var(--surface2); border-radius: 6px; overflow: hidden; position: relative; } .stat-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 6px; display:flex; align-items:center; padding-inline-end:8px; justify-content:flex-end; transition: width .5s ease; } .stat-bar-fill span { font-size: 11px; font-weight: 900; color: #0a0e1a; } .stat-bar-val { min-width: 70px; text-align: end; font-size: 12px; color: var(--text-muted); font-weight: 700; } .log-table { width: 100%; border-collapse: collapse; font-size: 12px; } .log-table th { text-align: start; padding: 8px 10px; color: var(--text-muted); font-weight: 700; border-bottom: 1px solid var(--border); } .log-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); } .log-table tr:hover td { background: var(--surface2); } .log-online { color: var(--success); font-weight: 700; } .log-offline { color: var(--text-muted); } /* ── STARS ── */ .stars-row { display: flex; gap: 4px; margin: 6px 0; } .star { font-size: 22px; cursor: pointer; transition: transform .1s; color: var(--border); } .star:hover, .star.active { color: var(--accent-fg); transform: scale(1.15); } .star-display { font-size: 14px; color: var(--accent-fg); } /* ── RATING BLOCK ── */ .rating-block { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; } .rating-block-title { font-size: 13px; font-weight: 700; margin-bottom: 8px; } .rating-comment { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 13px; padding: 8px 12px; margin-top: 8px; resize: none; } /* ── URGENT NOTE ── */ .urgent-note-banner { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border: 1px solid var(--danger); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 10px; font-size: 13px; color: var(--danger); animation: overdue-blink 2s ease-in-out infinite; } .urgent-note-banner b { color: var(--danger); } /* ── ARCHIVE ITEM ── */ .arch-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 18px; margin-bottom: 10px; cursor: pointer; transition: border .2s; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; content-visibility: auto; contain-intrinsic-size: auto 70px; } .arch-item:hover { border-color: var(--accent); } .arch-item-left { flex: 1; } .arch-item-title { font-weight: 700; font-size: 14px; } .arch-item-sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; } .arch-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .arch-tag { font-size: 11px; padding: 3px 10px; border-radius: 12px; cursor: pointer; background: color-mix(in srgb, var(--accent) 14%, var(--surface2)); color: var(--accent-fg); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); transition: all .15s; } .arch-tag:hover { background: var(--accent); color: var(--accent-ink, #0a0e1a); } .sub-req-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-top: 8px; background: color-mix(in srgb, var(--info) 8%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--info) 25%, var(--border)); border-radius: 10px; cursor: pointer; transition: all .15s; } .sub-req-item:hover { border-color: var(--info); transform: translateX(-2px); } .sub-req-parent { padding: 12px 14px; margin-bottom: 14px; background: color-mix(in srgb, var(--info) 10%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--info) 30%, var(--border)); border-radius: 10px; cursor: pointer; font-size: 13px; } .sub-req-parent:hover { border-color: var(--info); } /* ── SUB-REQUEST TREE (nested edits) ── */ .sub-count-badge { font-size: 12px; font-weight: 900; padding: 2px 10px; border-radius: 12px; background: var(--surface2); color: var(--text-muted); border: 1px solid var(--border); } .edit-count-chip { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 11px; background: color-mix(in srgb, var(--info) 18%, transparent); color: var(--info); border: 1px solid color-mix(in srgb, var(--info) 35%, transparent); vertical-align: middle; } /* ── CARD SUB-TREE (nested edits shown directly on the card) ── */ .card-sub-tree { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--info) 6%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--info) 20%, var(--border)); } .card-sub-tree-head { font-size: 12px; font-weight: 800; color: var(--info); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; } .card-sub-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; transition: background .15s; border-inline-start: 3px solid transparent; } .card-sub-item:hover { background: var(--surface); } .card-sub-branch { font-family: monospace; color: var(--text-muted); opacity: .5; font-size: 13px; } .card-sub-text { flex: 1; min-width: 0; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-sub-item.sub-status-new { border-inline-start-color: var(--info); } .card-sub-item.sub-status-approved { border-inline-start-color: #e0c040; } .card-sub-item.sub-status-progress { border-inline-start-color: var(--accent); } .card-sub-item.sub-status-designer_done { border-inline-start-color: #40d0c0; } .card-sub-item.sub-status-montage { border-inline-start-color: #b070e0; } .card-sub-item.sub-status-done { border-inline-start-color: var(--success); background: color-mix(in srgb, var(--success) 7%, transparent); } .mini-act { font-size: 11px; font-weight: 800; padding: 4px 12px; border-radius: 8px; border: none; cursor: pointer; flex-shrink: 0; color: #0a0e1a; } .mini-act.go { background: var(--accent); } .mini-act.done { background: var(--success); color: var(--success-ink); } .mini-act:hover { filter: brightness(1.1); } .sub-count-badge.all-done { background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); } .sub-tree { margin-top: 8px; padding-inline-start: 6px; } .sub-tree-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 6px; border-radius: 10px; cursor: pointer; transition: all .15s; border: 1px solid var(--border); border-inline-start-width: 4px; background: var(--surface2); } .sub-tree-item:hover { transform: translateX(-3px); } .sub-tree-branch { font-family: monospace; color: var(--text-muted); font-size: 14px; opacity: .6; } .sub-tree-body { flex: 1; min-width: 0; } .sub-tree-text { font-size: 13px; font-weight: 600; } .sub-tree-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; display: flex; align-items: center; gap: 4px; } /* status colors on the left border */ .sub-tree-item.sub-status-new { border-inline-start-color: var(--info); } .sub-tree-item.sub-status-approved { border-inline-start-color: #e0c040; } .sub-tree-item.sub-status-progress { border-inline-start-color: var(--accent); } .sub-tree-item.sub-status-designer_done { border-inline-start-color: #40d0c0; } .sub-tree-item.sub-status-montage { border-inline-start-color: #b070e0; } .sub-tree-item.sub-status-done { border-inline-start-color: var(--success); background: color-mix(in srgb, var(--success) 8%, var(--surface2)); } .arch-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .arch-empty { text-align: center; padding: 40px; color: var(--text-muted); font-size: 14px; } /* ── ARCHIVE FOLDERS ── */ .folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; } .folder-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 16px; text-align: center; cursor: pointer; transition: all .2s; } .folder-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.2); } .folder-icon { font-size: 42px; margin-bottom: 8px; } .folder-label { font-weight: 700; font-size: 15px; margin-bottom: 4px; } .folder-count { font-size: 12px; color: var(--text-muted); } /* ── COUNTDOWN TIMER ── */ .countdown-bar { font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 8px; margin: 8px 0; text-align: center; letter-spacing: .3px; } .countdown-orange { background: color-mix(in srgb, #e8a020 18%, var(--surface)); color: var(--accent-fg); border: 1px solid color-mix(in srgb, #e8a020 40%, transparent); } .countdown-red { background: color-mix(in srgb, var(--danger) 11%, var(--surface)); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); animation: countdown-flash 1.5s ease-in-out infinite; } @keyframes countdown-flash { 0%,100%{box-shadow:0 0 0 0 transparent} 50%{box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 28%, transparent)} } /* v552 — الوميض بالهالة لا بالشفافيّة: النصّ لا يهبط تحت الحدّ */ /* ── TEMPLATE BAR ── */ .template-bar { border-color: color-mix(in srgb, var(--info) 35%, var(--border)); padding: 14px 18px; } /* ── WORK TIMER ── */ .work-timer { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 6px; font-family: 'Inter', monospace; letter-spacing: .5px; } .work-timer.live { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--accent-fg); animation: countdown-flash 2s ease-in-out infinite; } .work-timer.done { background: color-mix(in srgb, var(--success) 18%, var(--surface)); color: var(--success); } /* v519 — المتوقّف: محايدٌ وساكن. لا وميض لأنّ الوميض يعني «الآن»، ولا أخضر لأنّ الأخضر يعني «انتهى» — وهذا لا هذا ولا ذاك. */ .work-timer.held { background: color-mix(in srgb, var(--text-muted) 14%, var(--surface)); color: var(--text-muted); animation: none; } .work-timer.live.montage { background: color-mix(in srgb, #b070e0 20%, var(--surface)); color: #b070e0; } .work-timer.done.montage { background: color-mix(in srgb, #b070e0 16%, var(--surface)); color: var(--violet); } .sub-edit-timer { display: inline-flex; gap: 4px; transform: scale(.88); transform-origin: center; } .sub-edit-timer .work-timer { font-size: 11px; padding: 2px 8px; } /* ── IMAGE PREVIEW ── */ .preview-item { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface2); } .preview-item img { width: 100%; object-fit: cover; display: block; background: repeating-conic-gradient(#1a1a1a 0% 25%, #222 0% 50%) 50% / 16px 16px; } .preview-name { font-size: 11px; padding: 6px 8px; color: var(--text-muted); font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; } /* ── IMAGE TOOL ── */ .canvas-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .canvas-card-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 10px; } .canvas-card-title { font-weight: 900; font-size: 15px; } .canvas-card-size { font-size: 12px; color: var(--text-muted); font-family: monospace; } .canvas-card-body { display: flex; gap: 0; } /* v428 — «بريفيو المقاس صغير»: يلي عم يعدّل لازم يشوف شغله بحجم حقيقي — المعاينة تاخد أكبر مساحة متاحة وتتكيّف مع نسبة المقاس. */ .canvas-card-body > .canvas-stage, .canvas-card-body > .canvas-area, .canvas-card-body > .stage-wrap { flex: 1 1 auto; min-width: 0; } /* ═══ v432 — لوحة الاستوديو: السكرول والأزرار والمزالج ═══ */ .canvas-tools { overflow-y: auto; max-height: min(78vh, 900px); overscroll-behavior: contain; padding-bottom: 26px; scrollbar-width: thin; } .canvas-tools::-webkit-scrollbar { width: 8px; } .canvas-tools::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; } /* الأزرار: صندوق واضح بدل نص عائم — ولا كلمات عمودية */ .canvas-tools .tfs-pbtn, .canvas-tools button:not(.tfs-x) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: max-content; width: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); color: var(--text); font: inherit; font-size: 12px; font-weight: 600; padding: 8px 14px; cursor: pointer; line-height: 1.2; } .canvas-tools .tfs-pbtn:hover, .canvas-tools button:not(.tfs-x):hover { border-color: var(--accent); color: var(--accent-fg); } .canvas-tools .tfs-pbtn.gold { background: var(--accent); color: var(--accent-ink, #0a0e1a); border-color: var(--accent); } @media (min-width: 641px) { .canvas-tools .tfs-pbtn, .canvas-tools button:not(.tfs-x) { white-space: nowrap; } } /* ═══ v433 — أزرار الاستوديو أينما كانت: الكلام بالعرض لا بالطول ═══ */ .tfs-pbtn, .tfs-lbtn, .tfs-mo-abtn { white-space: nowrap !important; word-break: keep-all; min-width: max-content; width: auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px; line-height: 1.25; } .tfs-pbtn.wide { flex: 1 1 100%; padding: 9px 14px; } .tfs-prow { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; } /* التايملاين: الاسم واضح وزرّ الإخراج ظاهر */ .tfs-mo-name { display: inline-flex !important; align-items: center; gap: 7px; min-width: 168px; max-width: 220px; padding-inline-end: 6px; } .tfs-mo-name em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; } .tfs-mo-x { cursor: pointer; font-size: 12px; color: var(--text-muted); padding: 0 4px; border-radius: 6px; flex-shrink: 0; } .tfs-mo-x:hover { color: var(--danger); background: color-mix(in srgb, #e04545 12%, transparent); } /* ═══ v434 — توسيع الواجهة وتضييق «تفاصيل إضافية» ═══ */ /* v447 — قواعد v446 نُقلت بعد القاعدة الأصلية (كانت تُدهَس) */ .fr-btn.sendraw { border-color: color-mix(in srgb,#1fa06a 55%,var(--border)) !important; background: color-mix(in srgb,#1fa06a 12%,var(--surface)) !important; color: color-mix(in srgb,#1fa06a 78%,var(--text)) !important; font-weight: 700; } .fr-btn.sendraw:hover { background: color-mix(in srgb,#1fa06a 20%,var(--surface)) !important; } @media (max-width: 480px) { .fri-mg, .fri-sp { min-height: 44px; min-width: 44px; } } /* v445 — نوع التقرير ملاصق فعلاً لزرّ الضيف: كان بالماركب بجانبه لكنّ الصفّ يلفّه لسطر تالٍ فيبدو بعيداً. */ .nr-guest-row { display: flex !important; align-items: center; gap: 10px; flex-wrap: nowrap; } .nr-guest-row > .nr-rmode-inline { display: inline-flex !important; align-items: center; gap: 6px; margin-inline-start: 4px; flex-wrap: nowrap; } .nr-guest-row .nr-rmode-lbl { font-size: 11.5px; color: var(--text-muted); } .nr-guest-row .rmode-btn { padding: 6px 12px; font-size: 11.5px; } @media (min-width: 701px) { .nr-guest-row .rmode-btn, .nr-guest-row .nr-rmode-lbl { white-space: nowrap; } } @media (max-width: 700px) { .nr-guest-row { flex-wrap: wrap !important; } } /* v444 — انتظار المونتير: مسار متوقّف مؤقّتاً بلا لوم */ .rq-lane.wait { border-style: solid; border-color: color-mix(in srgb,#8a5cd6 40%,var(--border)); background: color-mix(in srgb,#8a5cd6 6%,transparent); } .rqmg-wait { color: color-mix(in srgb,#8a5cd6 78%,var(--text)); font-weight: 700; font-size: 11.5px; } /* v443 — شارة «للمصمّم» داخل صفّ الفقرة */ .fri-badge { display: inline-block; margin-inline-start: 8px; font-size: 10px; font-weight: 700; color: color-mix(in srgb,#8a5cd6 80%,var(--text)); border: 1px solid color-mix(in srgb,#8a5cd6 45%,var(--border)); background: color-mix(in srgb,#8a5cd6 10%,transparent); border-radius: 999px; padding: 2px 9px; } /* v442 — زرّ التقسيم بلون خاصّ يميّزه عن «أرسِل النصّ فقط» */ .fr-btn.split { border-color: color-mix(in srgb,#8a5cd6 55%,var(--border)) !important; background: color-mix(in srgb,#8a5cd6 14%,var(--surface)) !important; color: color-mix(in srgb,#8a5cd6 75%,var(--text)) !important; font-weight: 700; } .fr-btn.split:hover { background: color-mix(in srgb,#8a5cd6 22%,var(--surface)) !important; } /* ═══════════ v441 — بوابة الفقرة · النصّ الكامل · وسم الجرافيك ═══════════ */ .rqp-gs { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--text-muted); border: 1px dashed var(--border); border-radius: 8px; padding: 4px 10px; width: max-content; max-width: 100%; } .rqp-gs.on { color: var(--ok, #1fa06a); border-style: solid; border-color: color-mix(in srgb, var(--ok, #1fa06a) 45%, var(--border)); background: color-mix(in srgb, var(--ok, #1fa06a) 7%, transparent); } .rqp-chk:disabled, .rqp-chk[disabled] { opacity: .35; cursor: not-allowed; } .rqp-st { cursor: default; } .rq-full { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); margin: 0 0 12px; overflow: hidden; } .rq-full > summary { list-style: none; cursor: pointer; padding: 11px 14px; font-size: 12.5px; font-weight: 700; background: var(--surface2); display: flex; align-items: center; gap: 10px; } .rq-full > summary::-webkit-details-marker { display: none; } .rq-full > summary button { margin-inline-start: auto; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text-muted); font: inherit; font-size: 11px; font-weight: 600; padding: 5px 12px; cursor: pointer; } .rq-full > summary button:hover { border-color: var(--accent); color: var(--accent-fg); } .rq-full-b { padding: 14px 16px; font-size: 13.5px; line-height: 1.95; max-height: 340px; overflow: auto; } /* ═══ v526 — القسم زرّ ثلاثيّ (جرافيك · مونتاج · الاثنين) بأيقونات خطية بدل مفتاحَي إيموجي ═══ */ .fri-lane { display: inline-flex; flex-shrink: 0; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--surface); } .fri-ln { --lc: var(--lane-g); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px; cursor: pointer; border: none; background: transparent; color: var(--text-muted); font: inherit; transition: background .12s, color .12s; } .fri-ln + .fri-ln { border-inline-start: 1px solid var(--border); } .fri-ln.m { --lc: var(--lane-m); } .fri-ln.b { --lc: var(--lane-b); } /* v621 — ألوان الأقسام من الثيم */ .fri-ln:hover { color: var(--text); } .fri-ln.on { color: var(--lc); background: color-mix(in srgb, var(--lc) 18%, transparent); } .fri-ln:active { transform: scale(.965); } .fri-kico { display: inline-flex; color: var(--kc, var(--accent)); flex: 0 0 auto; } .fri-kdesc { font-size: 10px; color: var(--text-muted); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%; } .fri-row.gfx { background: color-mix(in srgb,#8a5cd6 4%,transparent); } @media (max-width: 480px) { .fri-ln { min-height: 44px; min-width: 44px; } } /* ═══════════ v440 — الفقرات والأفكار داخل صفحة الإرسال ═══════════ */ .fri-wrap { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); margin: 12px 0; overflow: hidden; } .fri-h { display: flex; align-items: center; gap: 9px; padding: 10px 14px; font-size: 12.5px; font-weight: 700; border-bottom: 1px solid var(--border); background: var(--surface2); } .fri-n { margin-inline-start: auto; font-size: 11px; font-weight: 700; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; } .fri-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px 14px; border-bottom: 1px solid var(--border); border-inline-start: 3px solid transparent; } .fri-row:last-of-type { border-bottom: 0; } /* ═══ v447 — الصفّ: عمود عريض للنصّ لا ينعصر، وأزرار جانبية ═══ */ /* v454 — مطبخ النصّ */ .fr-kitchen { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 10px; padding: 5px 8px; background: var(--surface2); } /* v455 — المطبخ شريط أدوات فوق الصندوق مباشرة */ .fr-kitchen.top { border-radius: 12px 12px 0 0; border-bottom: 0; margin-bottom: 0; } .fr-kitchen.top + #fr-editor { border-radius: 0 0 12px 12px !important; border-top-color: var(--border) !important; } .frk-lbl { font-size: 11.5px; font-weight: 700; color: var(--text-muted); margin-inline-end: 4px; } .frk-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; } /* v457 — قراءة حجم خطّ الصندوق بجانب زرّي A− وA+ */ .frk-fs { font-size: 11px; color: var(--text-muted); min-width: 18px; text-align: center; opacity: .85; } .frk-stat { margin-inline-start: auto; font-size: 11px; color: var(--text-muted); font-family: "IBM Plex Mono", monospace; } .frk { border: none; background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; padding: 5px 8px; border-radius: 7px; cursor: pointer; line-height: 1; } .frk:hover { background: var(--surface); color: var(--accent-fg); } .frk.undo { color: color-mix(in srgb,#e8a020 80%,var(--text)); } @media (max-width: 480px) { .frk { min-height: 40px; min-width: 36px; } } /* v454 — طبقة الثقة: أين المادة · تأكيد الاستلام · الاعتذار */ .rq-where { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 14px; border: 1px solid color-mix(in srgb,var(--accent) 35%,var(--border)); border-radius: 12px; background: color-mix(in srgb,var(--accent) 6%,var(--surface)); font-size: 12.5px; font-weight: 600; } .rq-where b { color: var(--text); } .rq-where b.hot { color: var(--danger); } .rq-ackbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 13px; border: 1px dashed color-mix(in srgb,#3a90e0 45%,var(--border)); border-radius: 12px; background: color-mix(in srgb,#3a90e0 6%,transparent); font-size: 12.5px; } .rq-ackbar span { flex: 1 1 auto; } .rq-ackbar button { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-weight: 700; font-size: 12px; padding: 8px 14px; cursor: pointer; } .rq-ackbar .ok { border-color: color-mix(in srgb,var(--ok,#1fa06a) 55%,var(--border)); color: var(--ok,#1fa06a); } .rq-ackbar .no { border-color: color-mix(in srgb,#e04545 55%,var(--border)); color: var(--danger); } .rq-ackline { font-size: 11.5px; font-weight: 700; border-radius: 10px; padding: 7px 12px; margin: 0 0 12px; } .rq-ackline.ok { color: var(--ok,#1fa06a); border: 1px solid color-mix(in srgb,var(--ok,#1fa06a) 40%,var(--border)); } .rq-ackline.no { color: var(--danger); border: 1px solid color-mix(in srgb,#e04545 40%,var(--border)); } .rq-decline { display: block; width: 100%; margin: 0 0 12px; border: 1px dashed var(--border); border-radius: 12px; background: var(--surface2); color: var(--text-muted); font: inherit; font-weight: 600; font-size: 12px; padding: 10px; cursor: pointer; } .rq-decline:hover { border-color: #e04545; color: var(--danger); } /* ═══ v519 — صفٌّ واحد لفعلَي التسليم والاعتذار ═══ كان كلٌّ منهما `display:block; width:100%` فيأخذ سطراً بعرض الشاشة، وهما زرّان صغيران متقابلان. داخل الصفّ يتقاسمان العرض، وخارجه يبقيان كما كانا — فلا يتأثّر أيّ موضعٍ آخر يستعملهما. */ .rq-handrow { display: flex; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; } .rq-handrow > .rq-pathbtn, .rq-handrow > .rq-decline { display: block; width: auto; flex: 1 1 160px; margin: 0; } @media (max-width: 480px) { .rq-handrow { flex-direction: column; } } @media (max-width: 480px) { .rq-ackbar button, .rq-decline { min-height: 44px; } } /* v452 — رقم المادة يتصدّر · التسليم للبثّ */ .rq-matno { font-size: 16px !important; font-weight: 700; color: var(--text); border: 1px solid color-mix(in srgb,var(--accent) 45%,var(--border)); border-radius: 9px; padding: 3px 12px; background: color-mix(in srgb,var(--accent) 10%,transparent); margin-inline-end: 10px; letter-spacing: .5px; } .rq-airbtn { display: block; width: 100%; margin: 0 0 12px; border: 1px solid color-mix(in srgb,#3a90e0 55%,var(--border)); border-radius: 12px; background: color-mix(in srgb,#3a90e0 10%,var(--surface)); color: color-mix(in srgb,#3a90e0 80%,var(--text)); font: inherit; font-weight: 700; font-size: 12.5px; padding: 11px 14px; cursor: pointer; } .rq-airbtn.on { border-color: color-mix(in srgb,var(--ok,#1fa06a) 50%,var(--border)); color: var(--ok,#1fa06a); background: color-mix(in srgb,var(--ok,#1fa06a) 8%,transparent); } .rq-airline { font-size: 11.5px; color: var(--ok,#1fa06a); border: 1px solid color-mix(in srgb,var(--ok,#1fa06a) 40%,var(--border)); border-radius: 10px; padding: 7px 12px; margin: 0 0 12px; word-break: break-all; } @media (max-width: 480px) { .rq-airbtn { min-height: 44px; } } /* v450 — الحزمة القديمة تختفي بالنصّي: الجديدة أدقّ وفيها الصوت والمسار */ .rv-raw .mtp { display: none !important; } /* v450 — الحزمة القديمة */ .rq-wc { margin-inline-start: 10px; font-size: 11px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; } .rqp-gs.mont { color: color-mix(in srgb,var(--lane-m) 78%,var(--text)); /* v621 — من الثيم */ border-color: color-mix(in srgb,var(--lane-m) 45%,var(--border)); background: color-mix(in srgb,var(--lane-m) 7%,transparent); border-style: solid; } /* v449 — الشبكة كانت تُسقط الجسم في عمود الـ30px إن ظهر عنصر ثالث، فينعصر النصّ كلمةً بسطر. ألغيناها: الصفّ كتلة عادية والرقم عائم — يستحيل معها أي انزلاق أعمدة مهما تغيّر الماركب. */ .fri-row { display: block !important; grid-template-columns: none !important; padding: 12px 14px !important; overflow: hidden; } .fri-row > .fri-i { float: inline-start; margin-inline-end: 10px; margin-top: 2px; } .fri-row > .fri-body { display: block !important; width: auto !important; min-width: 0 !important; } .fri-row > .fri-mg, .fri-body > .fri-mg { clear: both; } .fri-badge.mont { color: color-mix(in srgb,#e04545 80%,var(--text)); border-color: color-mix(in srgb,#e04545 45%,var(--border)); background: color-mix(in srgb,#e04545 10%,transparent); } .fri-body { min-width: 0 !important; } .fri-t { white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; word-wrap: break-word; line-height: 1.9; font-size: 13.5px; display: block !important; width: auto !important; } .fri-mg, .fri-sp { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-muted); font-size: 11px; padding: 3px 8px; cursor: pointer; flex-shrink: 0; line-height: 1.2; } /* v526 — أيقونات خطية داخل الأزرار الصغيرة: مربّعٌ واضح بدل رمزٍ صغير */ .fri-sp { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; padding: 0; } .fri-sp:active, .fri-del:active { transform: scale(.965); } .fri-mg { margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; text-align: center; } .fri-del, .fri-mlb { display: inline-flex; align-items: center; justify-content: center; } .tf-svg { flex: 0 0 auto; vertical-align: middle; } .fri-mg:hover, .fri-sp:hover { border-color: var(--accent); color: var(--accent-fg); } .fri-i { width: 24px; height: 24px; border: 1.5px solid var(--border); border-radius: 7px; display: grid; place-items: center; font-size: 11px; color: var(--text-muted); font-family: "IBM Plex Mono", monospace; } .fri-body { min-width: 0; } .fri-t { font-size: 13px; line-height: 1.7; margin-bottom: 7px; } /* v526 — «أسماء ضيوف»: سطرٌ لكلّ ضيف يبقى سطراً */ .fri-t.list { white-space: pre-line !important; } .fri-in { display: flex; align-items: center; gap: 9px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface2); padding: 6px 11px; } .fri-in input { flex: 1 1 auto; min-width: 0; border: none; background: transparent; color: var(--text); font: inherit; font-size: 12px; outline: none; padding: 2px 0; } .fri-f { padding: 9px 14px; font-size: 11px; color: var(--text-muted); background: var(--surface2); border-top: 1px solid var(--border); } @media (max-width: 480px) { .fri-in { flex-wrap: wrap; } } /* ═══════════ v439 — حزمة المونتير · مسار التسليم · تحكّم المحرر ═══════════ */ .rq-montcard { border: 1px solid color-mix(in srgb,#8a5cd6 40%,var(--border)); border-radius: 14px; background: color-mix(in srgb,#8a5cd6 5%,var(--surface)); margin: 0 0 12px; overflow: hidden; } .rq-mc-h { padding: 9px 14px; font-size: 12.5px; font-weight: 700; border-bottom: 1px solid color-mix(in srgb,#8a5cd6 25%,var(--border)); } .rq-mc-g { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 1px; background: color-mix(in srgb,#8a5cd6 18%,var(--border)); } .rq-mc-g > div { background: var(--surface); padding: 10px 13px; } .rq-mc-g span { display: block; font-size: 10.5px; color: var(--text-muted); font-weight: 700; } .rq-mc-g b { display: block; font-size: 13px; margin: 3px 0 1px; } .rq-mc-g i { font-style: normal; font-size: 11px; color: var(--text-muted); word-break: break-all; } .rq-mc-g > div.ok b { color: var(--ok,#1fa06a); } .rq-pathbtn { display: block; width: 100%; margin: 0 0 12px; border: 1px dashed var(--border); border-radius: 12px; background: var(--surface2); color: var(--text); font: inherit; font-weight: 600; font-size: 12.5px; padding: 11px 14px; cursor: pointer; } .rq-pathbtn:hover { border-color: var(--accent); color: var(--accent-fg); } .rq-pathbtn.on { border-style: solid; border-color: color-mix(in srgb,var(--ok,#1fa06a) 45%,var(--border)); color: var(--ok,#1fa06a); } .rqp-add { margin-inline-start: auto; border: 1px dashed var(--border); border-radius: 9px; background: var(--surface2); color: var(--text-muted); font: inherit; font-size: 11px; font-weight: 700; padding: 5px 12px; cursor: pointer; } .rqp-add:hover { border-color: var(--accent); color: var(--accent-fg); } @media (max-width: 480px) { .rq-pathbtn, .rqp-add { min-height: 44px; } } /* ═══════════ v437 — شريط الأوامر والاختصارات ═══════════ */ #tfc-ov, #tfh-ov { position: fixed; inset: 0; z-index: 2147483300; background: rgba(12,14,22,.5); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; } #tfh-ov { align-items: center; padding: 16px; } .tfc-box { width: min(560px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 28px 70px -30px rgba(0,0,0,.6); } #tfc-q { width: 100%; border: none; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; font-size: 15px; padding: 15px 18px; outline: none; } #tfc-list { max-height: 46vh; overflow: auto; } .tfc-row { display: flex; align-items: center; gap: 11px; padding: 10px 18px; cursor: pointer; font-size: 13px; } .tfc-row.on, .tfc-row:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } .tfc-ic { font-size: 15px; width: 20px; text-align: center; } .tfc-t { flex: 1 1 auto; min-width: 0; } .tfc-k { font-size: 10.5px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; } .tfc-empty { padding: 18px; text-align: center; font-size: 12.5px; color: var(--text-muted); } .tfc-foot { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; padding: 9px 18px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); background: var(--surface2); } .tfc-foot b { border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; margin-inline-end: 4px; } .tfc-help { margin-inline-start: auto; cursor: pointer; color: var(--accent-fg); font-weight: 700; } .tfh-box { width: min(680px, 100%); max-height: 84vh; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; } .tfh-head { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); } .tfh-head b { font-size: 14.5px; } .tfh-head button { margin-inline-start: auto; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface2); color: var(--text-muted); cursor: pointer; } .tfh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 18px; } @media (max-width: 640px) { .tfh-grid { grid-template-columns: 1fr; } } .tfh-sec > span { display: block; font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: .3px; margin-bottom: 9px; } .tfh-r { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 12.5px; } .tfh-r b { border: 1px solid var(--border); border-radius: 7px; padding: 3px 9px; font-size: 11px; background: var(--surface2); white-space: nowrap; } .tfh-r i { font-style: normal; color: var(--text-muted); } .tfh-tip { padding: 12px 18px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); background: var(--surface2); } /* ═══════════ v436 — الاستباقي · البحث · إدارة الأخبار ═══════════ */ #tf-watch-bar { display: grid; gap: 8px; margin: 0 0 14px; } .twb-row { display: flex; align-items: center; gap: 11px; padding: 10px 14px; border: 1px solid color-mix(in srgb, #e8a020 40%, var(--border)); border-radius: 13px; background: color-mix(in srgb, #e8a020 7%, var(--surface)); font-size: 12.5px; } .twb-ic { font-size: 15px; flex-shrink: 0; } .twb-txt { flex: 1 1 auto; min-width: 0; color: var(--text); } .twb-act { border: 1px solid var(--accent); border-radius: 9px; background: var(--accent); color: var(--accent-ink, #0a0e1a); font: inherit; font-weight: 700; font-size: 11.5px; padding: 6px 14px; cursor: pointer; white-space: nowrap; } .twb-x { border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 4px 6px; border-radius: 7px; } .twb-x:hover { color: var(--danger, #e04545); } .twd-wrap { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); margin-bottom: 16px; overflow: hidden; } .twd-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); backdrop-filter: blur(14px) saturate(1.15); background: color-mix(in srgb, var(--surface) 74%, transparent); } .twd-head b { font-size: 14px; } .twd-ref { margin-inline-start: auto; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface2); color: var(--text-muted); cursor: pointer; } .twd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--border); } .twd-cell { background: var(--surface); padding: 14px 12px; text-align: center; } .twd-cell b { display: block; font-size: 22px; font-weight: 700; line-height: 1.2; } .twd-cell span { font-size: 11px; color: var(--text-muted); } .twd-cell.ok b { color: var(--ok, #1fa06a); } .twd-cell.warn b { color: var(--accent-fg); } .twd-cell.hot b { color: var(--danger); } .twd-load { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--border); } .twd-lt { font-size: 11.5px; font-weight: 700; color: var(--text-muted); } .twd-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; font-size: 12px; } .twd-chip i { font-style: normal; font-weight: 700; color: var(--accent-fg); } .twd-search { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); } .twd-search input { flex: 1 1 auto; min-width: 0; border: 1px solid var(--border); border-radius: 11px; background: var(--surface2); color: var(--text); font: inherit; font-size: 13px; padding: 10px 13px; } .twd-search button { border: 1px solid var(--accent); border-radius: 11px; background: var(--accent); color: var(--accent-ink, #0a0e1a); font: inherit; font-weight: 700; padding: 10px 20px; cursor: pointer; white-space: nowrap; } .tws-list { border-top: 1px solid var(--border); max-height: 340px; overflow: auto; } .tws-row { padding: 10px 16px; border-bottom: 1px solid var(--border); cursor: pointer; } .tws-row:hover { background: var(--surface2); } .tws-row b { display: block; font-size: 12.5px; font-weight: 600; } .tws-meta { font-size: 11px; color: var(--text-muted); } .tws-empty { padding: 16px; font-size: 12px; color: var(--text-muted); text-align: center; border-top: 1px solid var(--border); } @media (max-width: 480px) { .twb-act, .twd-search button { min-height: 44px; } } /* ═══ v435 — الفكرة البصرية تحت الفقرة ═══ */ .rqp-idea { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; margin: 6px 0 2px; padding: 7px 11px; border-radius: 10px; border: 1px dashed var(--border); background: var(--surface2); font-size: 12px; } .rqp-idea b { font-weight: 600; color: var(--text); } .rqi-in { flex: 1 1 auto; min-width: 0; border: none; background: transparent; color: var(--text); font: inherit; font-size: 12px; padding: 2px 0; outline: none; } .rqi-in::placeholder { color: var(--text-muted); } /* v619 — نقاط الألوان أُزيلت (نصّ الفكرة وحده) */ /* v438 — العمود الأول (nr-col-main) هو صاحب النصّ والأرقام: يوسَّع. كان الترتيب مقلوباً في رأسي مرّتين — الأول في الماركب هو الأساس. */ .nr-grid { grid-template-columns: minmax(0, 1.42fr) minmax(0, 0.58fr) !important; gap: 18px; align-items: start; } .nr-grid > .nr-col-main { min-width: 0; } .page, .page-inner, #page-newrequest .page-inner { max-width: min(1680px, 96vw) !important; } @media (max-width: 1024px) { .nr-grid { grid-template-columns: 1fr !important; } } /* أزرار الورقة الرسمية: صفّ واحد داخل صندوق واحد */ .hrf-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; border: 1px solid var(--border); border-radius: 14px; padding: 11px 13px; background: var(--surface2); margin-top: 12px; } .hrf-actions > button { flex: 1 1 auto; min-width: max-content; white-space: nowrap; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: 12.5px; padding: 10px 16px; cursor: pointer; } .hrf-actions > button:hover { border-color: var(--accent); color: var(--accent-fg); } .hrf-actions > button.primary { background: var(--accent); color: var(--accent-ink, #0a0e1a); border-color: var(--accent); font-weight: 700; } @media (max-width: 640px) { .tfs-mo-name { min-width: 110px; max-width: 140px; } .tfs-mo-name em { white-space: normal; word-break: break-word; font-size: 10.5px; line-height: 1.25; } } .canvas-tools .tfs-prow, .canvas-tools .tfs-pgrid { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* المزلج + رقمه القابل للتعديل */ .canvas-tools .tfs-srow { display: grid; grid-template-columns: 1fr 56px; gap: 10px; align-items: center; } .canvas-tools input[type="range"] { width: 100%; } .tfs-numin { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 12px; text-align: center; padding: 5px 4px; width: 100%; } .tfs-numin:focus { border-color: var(--accent); outline: none; } /* v433 — «عرض الصورة لازم يكون كبير من الأساس»: المسرح يأخذ كل الارتفاع المتاح والصورة تُملأ داخله — بلا هوامش ضائعة. */ .canvas-area { margin: auto; width: 100%; height: 100%; } .canvas-stage { padding: 6px; height: min(84vh, 1000px) !important; min-height: 520px !important; } .canvas-card-body { align-items: stretch; } .canvas-tools { max-height: min(84vh, 1000px); } /* حقول المونتاج الإضافية والصوت */ .fr-montrow.snd { grid-template-columns: 1fr 1fr 1fr 1fr; margin-top: 8px; } @media (max-width: 640px) { .fr-montrow.snd { grid-template-columns: 1fr 1fr; } } .fr-mplus, .fr-mdel { border: 1px dashed var(--border); border-radius: 9px; background: var(--surface); color: var(--text-muted); font: inherit; font-size: 11.5px; font-weight: 600; padding: 7px 12px; cursor: pointer; } .fr-mplus:hover, .fr-mdel:hover { border-color: var(--accent); color: var(--accent-fg); } .rq-matled.dur { border-style: solid; } .rqe-box.hold { width: min(640px, 100%); } .rqh-hint { font-size: 12px; color: var(--text-muted); line-height: 1.7; margin: 0; } .canvas-stage canvas, .canvas-area canvas, .stage-wrap canvas { max-width: 100% !important; max-height: min(76vh, 900px) !important; width: auto !important; height: auto !important; object-fit: contain; } @media (min-width: 1024px) { .canvas-card-body { min-height: min(72vh, 820px); align-items: stretch; } } .canvas-tools { width: 200px; flex-shrink: 0; border-inline-end: 1px solid var(--border); padding: 14px; display: flex; flex-direction: column; gap: 12px; } .canvas-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px; background: repeating-conic-gradient(#1a1a1a 0% 25%, #222 0% 50%) 50% / 24px 24px; height: min(78vh, 900px); min-height: 420px; border-radius: 0; box-sizing: border-box; /* v428 — معاينة بحجم حقيقي */ } .canvas-area { position: relative; background: #0d0d0d; overflow: hidden; cursor: grab; display: block; box-shadow: 0 4px 24px rgba(0,0,0,.5); max-height: 100%; max-width: 100%; height: 100%; } .canvas-area.drag-over { outline: 3px dashed var(--accent); outline-offset: -6px; } .canvas-area canvas { display: block; position: absolute; top: 0; left: 0; } .thumb-strip-side { display: flex; flex-direction: column; gap: 8px; padding: 12px 10px; overflow-y: auto; border-inline-start: 1px solid var(--border); background: var(--surface); width: 84px; flex-shrink: 0; } .thumb-strip-side:empty { display: none; } .thumb-strip-side .thumb-item { width: 60px; height: 60px; } /* horizontal thumbnail strip below the canvas — works for all orientations */ .thumb-strip-bottom { display: flex; flex-direction: row; gap: 10px; padding: 12px; overflow-x: auto; border-top: 1px solid var(--border); background: var(--surface); width: 100%; } .thumb-strip-bottom:empty { display: none; } .thumb-strip-bottom .thumb-item { width: 66px; height: 66px; flex-shrink: 0; } .canvas-area canvas { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .canvas-drop-hint { text-align: center; pointer-events: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 90%; } .canvas-drop-hint .drop-icon { font-size: 44px; margin-bottom: 10px; opacity: .85; } .canvas-drop-hint .drop-main { font-size: 16px; font-weight: 800; color: #ccc; margin-bottom: 4px; } .canvas-drop-hint .drop-sub { font-size: 12px; color: var(--accent-fg); } .canvas-card-footer { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .tool-section { } .tool-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .8px; font-weight: 700; margin-bottom: 6px; } .tool-row { display: flex; gap: 4px; flex-wrap: wrap; } .tool-btn { padding: 6px 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 12px; cursor: pointer; transition: all .15s; font-family: inherit; } .tool-btn:hover { border-color: var(--accent); color: var(--accent-fg); } .tool-btn.active { background: var(--accent); color: var(--accent-ink, #0a0e1a); border-color: var(--accent); } .slider-row { display: flex; flex-direction: column; gap: 4px; } .slider-row label { font-size: 11px; color: var(--text-muted); display: flex; justify-content: space-between; } .slider-row input[type=range] { width: 100%; accent-color: var(--accent); cursor: pointer; } .color-pick { width: 100%; height: 32px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; padding: 2px; background: var(--surface2); } @media (max-width: 700px) { .canvas-card-body { flex-direction: column; } .canvas-tools { width: 100%; border-inline-end: none; border-bottom: 1px solid var(--border); } .canvas-stage { height: 46vh; min-height: 240px; padding: 10px; } .canvas-area { max-height: 100%; } .thumb-strip-side { flex-direction: row; width: 100%; border-inline-start: none; border-top: 1px solid var(--border); overflow-x: auto; } } /* ── THUMBNAIL STRIP (multi-image) ── */ .thumb-strip { display: flex; gap: 8px; padding: 10px; overflow-x: auto; border-top: 1px solid var(--border); background: var(--surface); min-height: 0; } .thumb-strip:empty { display: none; } .thumb-item { position: relative; width: 56px; height: 56px; flex-shrink: 0; border-radius: 8px; overflow: hidden; border: 2px solid var(--border); cursor: pointer; transition: border .15s; } .thumb-item:hover { border-color: var(--accent); } .thumb-item.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(232,160,32,.3); } .thumb-item img { width: 100%; height: 100%; object-fit: cover; } .thumb-remove { position: absolute; top: 2px; inset-inline-end: 2px; width: 16px; height: 16px; background: rgba(0,0,0,.7); color: white; border-radius: 50%; font-size: 10px; display: flex; align-items: center; justify-content: center; line-height: 1; } .thumb-remove:hover { background: var(--danger); } /* ── FLOATING CHAT WIDGET ── */ /* ═══ v296 — منتقي التاريخ بهوية TakeFlow ═══ */ /* ═══ v301 — سد باغ «تقويمين بنفس الوقت» ═══ منتقي TakeFlow بيعترض pointerdown، بس هيدا ما بيوقف أيقونة التقويم المدمجة بالمتصفح (::-webkit-calendar-picker-indicator) — الكبسة عليها بتفتح تقويم كروم الأصلي فوق تقويمنا. الحل الجذري: نشيل الأيقونة المدمجة نهائياً، فما يضل إلا منتقي واحد. ملاحظة: الحقل بيضل input[type=date] عادي — القيمة والأحداث ما تغيّروا. */ input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator { display: none !important; -webkit-appearance: none; opacity: 0; pointer-events: none; } input[type="date"], input[type="datetime-local"] { -webkit-appearance: none; appearance: none; cursor: pointer; } /* أيقونة بديلة من عنا — نفس المكان، بس بتفتح منتقي TakeFlow */ input[type="date"]:not(.tf-nodpi), input[type="datetime-local"]:not(.tf-nodpi) { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-size: 15px 15px; background-position: left 10px center; padding-inline-start: 32px; } [dir="rtl"] input[type="date"]:not(.tf-nodpi), [dir="rtl"] input[type="datetime-local"]:not(.tf-nodpi) { background-position: right 10px center; } /* v359: كان z-index 12000 — المنتقي كان يفتح مدفون ورا نافذة الطلب السريع (2147483000) فالحقل يبيّن ميت. صار فوق كل النوافذ (وتحت نوافذ التأكيد 2147483600 بس). */ #tf-datepick { position: fixed; z-index: 2147483350; width: 282px; display: none; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.35); padding: 10px; direction: rtl; } #tf-datepick.open { display: block; animation: tfdpIn .14s ease-out; } @keyframes tfdpIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .tfdp-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 8px; } .tfdp-title { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text); } .tfdp-title .tfdp-y { font-family: var(--ol-mono, monospace); font-size: 12px; color: var(--text-muted); letter-spacing: 1px; } .tfdp-led { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); animation: tfdpLed 2.2s infinite; } @keyframes tfdpLed { 0%,100% { opacity: 1; } 50% { opacity: .45; } } .tfdp-nav { background: var(--surface2); border: 1px solid var(--border); color: var(--text); width: 30px; height: 30px; border-radius: 9px; cursor: pointer; font-size: 15px; font-family: inherit; } .tfdp-nav:hover { border-color: var(--accent); } .tfdp-dow { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; padding: 0 2px 4px; font-size: 9.5px; color: var(--text-muted); text-align: center; font-weight: 800; } .tfdp-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; padding: 0 2px; } .tfdp-c { height: 32px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--text); font-family: var(--ol-mono, monospace); font-size: 12.5px; cursor: pointer; } .tfdp-c:hover:not(.dis):not(.off) { background: var(--surface2); border-color: var(--border); } .tfdp-c.today { border-color: var(--accent); } .tfdp-c.sel { background: var(--accent); color: var(--accent-ink, #0a0e1a); font-weight: 800; } .tfdp-c.dis { opacity: .25; cursor: default; } .tfdp-c.off { pointer-events: none; } .tfdp-time { display: flex; align-items: center; gap: 8px; margin: 8px 2px 0; padding: 8px; background: var(--surface2); border-radius: 10px; font-size: 11.5px; color: var(--text-muted); } /* v545 — الوقت بقائمتين بلغة البرنامج (كان حقلاً أصليّاً بلغة المتصفّح) */ .tfdp-tl { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; } .tfdp-hm { flex: 1; display: flex; align-items: center; gap: 6px; } .tfdp-hm b { color: var(--text-muted); font-weight: 700; } .tfdp-tsel { flex: 1; min-width: 0; min-height: 34px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: var(--ol-mono, monospace); padding: 5px 6px; font-size: 13px; cursor: pointer; } .tfdp-tsel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .tfdp-foot { display: flex; gap: 6px; padding: 8px 2px 0; } .tfdp-btn { flex: 1; padding: 8px 0; border-radius: 9px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-family: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer; } .tfdp-btn:hover { border-color: var(--accent); } .tfdp-btn.ghost { color: var(--text-muted); } .tfdp-btn.pri { background: var(--accent); color: var(--accent-ink, #0a0e1a); border-color: var(--accent); } /* v294 — flex-shrink:0 حتى ما تنضغط التبويبات لما القائمة تطول */ .msg-side-tabs { display: flex; gap: 6px; padding: 10px 10px 0; flex-shrink: 0; } /* v294 — بحث الأشخاص بتبويب «جديد» (بيظهر منّو بس) */ .msg-side-search { padding: 10px 10px 0; flex-shrink: 0; } .msg-side-search input { width: 100%; padding: 9px 13px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-family: inherit; font-size: 12.5px; } /* ── MESSAGES PANEL (corner-anchored, like the chat widget) ── */ .msg-overlay { display: none; } .msg-sidebar { position: fixed; bottom: 20px; inset-inline-end: 20px; z-index: 460; width: 360px; max-width: calc(100vw - 40px); height: 520px; max-height: calc(100vh - 120px); background: var(--surface); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border: 1px solid var(--border); border-radius: 18px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 16px 50px rgba(0,0,0,.35); transform: translateY(20px) scale(.97); opacity: 0; pointer-events: none; transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s; } .msg-sidebar.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; } .msg-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 800; flex-shrink: 0; } .msg-new-btn { background: var(--accent); color: var(--accent-ink, #0a0e1a); border: none; width: 30px; height: 30px; border-radius: 9px; cursor: pointer; font-size: 14px; } .msg-close { cursor: pointer; font-size: 17px; color: var(--text-muted); } #msg-list-view { flex: 1; min-height: 0; display: flex; flex-direction: column; } /* v294 — min-height:0 ضرورية: بدونها الـflex item ما بينضغط تحت حجم محتواه، فالقائمة بتمدّد لطولها الكامل والسكرول ما بينفعّل أبداً. */ .msg-conv-list { overflow-y: auto; flex: 1; min-height: 0; } .msg-conv-item { display: flex; align-items: center; gap: 11px; padding: 11px 13px; margin: 4px 8px; border-radius: 14px; cursor: pointer; transition: background .15s, transform .12s; } .msg-conv-item:hover { background: var(--surface2); transform: translateX(-2px); } .msg-conv-item.unread { background: color-mix(in srgb, var(--accent) 8%, transparent); } .msg-conv-item.active-conv { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 3px 0 0 var(--accent); } .msg-conv-body { flex: 1; min-width: 0; } .msg-conv-name { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .msg-conv-preview { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .msg-conv-time { font-size: 10px; color: var(--text-muted); flex-shrink: 0; font-weight: 400; } .msg-conv-badge { background: var(--danger); color: var(--danger-ink); border-radius: 10px; font-size: 10px; font-weight: 800; padding: 1px 7px; flex-shrink: 0; } #msg-thread-view, #msg-new-view { display: flex; flex-direction: column; flex: 1; min-height: 0; } .msg-thread-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 800; font-size: 14px; flex-shrink: 0; } .msg-back { background: none; border: none; color: var(--text); font-size: 19px; cursor: pointer; } .msg-thread-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 7px; } .msg-row { display: flex; align-items: flex-end; gap: 6px; } .msg-row.mine { flex-direction: row-reverse; } .msg-row.theirs { flex-direction: row; } .msg-row .mini-avatar { width: 26px; height: 26px; margin-bottom: 2px; flex-shrink: 0; } .msg-thread-body[data-bg="warm"] { background: linear-gradient(160deg, color-mix(in srgb, #e8a020 8%, transparent), transparent); } .msg-thread-body[data-bg="cool"] { background: linear-gradient(160deg, color-mix(in srgb, #55a8f0 10%, transparent), transparent); } .msg-thread-body[data-bg="mint"] { background: linear-gradient(160deg, color-mix(in srgb, #3ee0a0 10%, transparent), transparent); } .msg-thread-body[data-bg="rose"] { background: linear-gradient(160deg, color-mix(in srgb, #e070b0 10%, transparent), transparent); } .msg-bg-picker { display: flex; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--border); align-items: center; } .msg-bg-label { font-size: 11px; color: var(--text-muted); margin-inline-end: 4px; } .msg-bg-dot { width: 20px; height: 20px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; } .msg-bg-dot.active { border-color: var(--accent); transform: scale(1.15); } /* ═══ v181 — مصنع الرسائل: فقاعات مجمّعة بذيول ومحاذاة صحيحة وخط جدي ═══ */ /* v543 — كبسولة كونسول: سطحٌ محايد بحدٍّ لمّاع داخليّ، وفقاعتي مُلوَّنةٌ بلمسةٍ من الأكسنت لا مغموسةٌ فيه. كانت برتقاليّةً مشبعة (ورقمٌ مثبّت #ff8c42) بحبرٍ ثابت #12121c: الاقتباس والرابط والعلامة تذوب فيها، واللون المشبع يُصرف على كلّ رسالة لا على ما يطلب الانتباه. */ .msg-bubble { max-width: 100%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.75; word-wrap: break-word; overflow-wrap: anywhere; position: relative; font-family: 'IBM Plex Sans Arabic', 'Cairo', sans-serif; font-weight: 500; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent), 0 1px 2px rgba(0,0,0,.05); transition: box-shadow .15s; } .msg-bubble:hover { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent), 0 3px 10px rgba(0,0,0,.10); } .msg-bubble.mine { align-self: flex-end; background: color-mix(in srgb, var(--accent) 15%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--border)); color: var(--text); } .msg-bubble.theirs { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); } /* زوايا التجميع: أول/وسط/آخر فقاعة بالمجموعة */ .msg-bubble.mine.b-first { border-end-end-radius: 7px; } .msg-bubble.mine.b-mid { border-end-end-radius: 7px; border-start-end-radius: 7px; } .msg-bubble.mine.b-last { border-start-end-radius: 7px; } .msg-bubble.theirs.b-first { border-end-start-radius: 7px; } .msg-bubble.theirs.b-mid { border-end-start-radius: 7px; border-start-start-radius: 7px; } .msg-bubble.theirs.b-last { border-start-start-radius: 7px; } /* v543 — الذيل زاوية الفقاعة الأخيرة (v461: border-radius) وحدها. المثلّث ::after كان يُرسم معها — ذيلان، والمثلّث بإحداثيّاتٍ فيزيائيّة لا تنقلب في RTL فيظهر مربّعاً ملوّناً عند الزاوية. */ .msg-bubble-time { font-size: 10.5px; opacity: 1; color: var(--text-muted); margin-top: 4px; display: flex; align-items: center; gap: 4px; font-family: inherit; font-variant-numeric: tabular-nums; } /* مجموعة رسائل: أفاتار واحد ملاصق + فقاعات متلاصقة */ .msg-grp { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 10px; } .msg-grp.mine { flex-direction: row-reverse; } .msg-grp-av { width: 32px; flex-shrink: 0; } .msg-grp-av .mini-avatar { width: 32px; height: 32px; } .msg-grp-bubbles { display: flex; flex-direction: column; gap: 3px; max-width: min(72%, 560px); min-width: 0; } .msg-grp.mine .msg-grp-bubbles { align-items: flex-end; } .msg-grp-sender { font-size: 11px; font-weight: 800; color: var(--accent-fg); margin-bottom: 3px; padding-inline: 4px; } /* فاصل الأيام */ .msg-daysep { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; } .msg-daysep::before, .msg-daysep::after { content: ""; flex: 1; height: 1px; background: var(--border); } .msgs-tsearch-wrap { position: relative; flex-shrink: 0; } .msgs-tsearch { width: 168px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-family: inherit; font-size: 12px; transition: width .2s; } .msgs-tsearch:focus { width: 220px; outline: none; border-color: var(--accent); } .msgs-tsearch-clear { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 11px; } /* v181 — المجموعات */ .grp-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 19px; background: linear-gradient(140deg, color-mix(in srgb, #7b8cff 30%, var(--surface2)), color-mix(in srgb, #9c5ad0 25%, var(--surface2))); border: 1.5px solid color-mix(in srgb, #7b8cff 40%, var(--border)); } .msgs-thread-head .grp-avatar { width: 38px; height: 38px; font-size: 17px; } .msgs-tab-grp { flex: 0 0 auto !important; padding: 9px 12px !important; font-size: 13px !important; } .msgs-tab-grp:hover { border-color: #7b8cff; color: #7b8cff; } .ng-people { display: flex; flex-direction: column; gap: 5px; max-height: 40vh; overflow-y: auto; margin-bottom: 10px; } .ng-person { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; background: var(--surface2); border: 1.5px solid var(--border); border-radius: 12px; padding: 8px 12px; cursor: pointer; font-family: inherit; color: var(--text); transition: all .13s; } .ng-person:hover { border-color: #7b8cff; } .ng-person.selected { border-color: #7b8cff; background: color-mix(in srgb, #7b8cff 12%, var(--surface2)); } .ng-p-name { font-size: 13px; font-weight: 800; flex: 1; } .ng-p-role { font-size: 10.5px; color: var(--text-muted); } .ng-p-check { opacity: 0; color: #7b8cff; font-weight: 900; } .ng-person.selected .ng-p-check { opacity: 1; } /* ═══ v182 — مركز الفريق ═══ */ .tc-open-btn { background: var(--surface2); border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 11px; color: var(--accent-fg); font-family: inherit; font-size: 12px; font-weight: 800; padding: 7px 14px; cursor: pointer; transition: all .15s; } .tc-open-btn:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface2)); } .tc-modal { max-width: 820px; max-height: 94vh; display: flex; flex-direction: column; overflow: hidden; } .tc-modal .mlc-body { overflow-y: auto; } .tc-quick { display: flex; gap: 7px; flex-wrap: wrap; padding: 12px 16px; background: color-mix(in srgb, var(--accent) 6%, var(--surface2)); border-bottom: 1px solid var(--border); } .tc-in { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-family: inherit; font-size: 12.5px; padding: 8px 11px; min-width: 0; flex: 1; } .tc-in:focus { border-color: var(--accent); outline: none; } /* v297 — القوائم المنسدلة بفورم الإضافة كانت تنعصر لشرحة صغيرة («ذ ♂») فما تقرا شو مكتوب — خاصة عالموبايل. عرض أدنى بيخليها مقروءة دايماً، والصف بيلف لسطر جديد لما يضيق (flex-wrap موجودة أصلاً). */ .tc-quick select.tc-in { flex: 0 1 auto; min-width: 122px; } .tc-quick input.tc-in { min-width: 130px; } .tc-role-sel { min-width: 112px; } .tc-add { background: var(--accent); border: none; border-radius: 10px; color: var(--accent-ink, #0a0e1a); font-family: inherit; font-size: 12.5px; font-weight: 900; padding: 8px 16px; cursor: pointer; flex-shrink: 0; } .tc-add:hover { filter: brightness(1.08); } .tc-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 11px 16px; border-bottom: 1px solid var(--border); } .tc-chips { display: flex; gap: 5px; flex-wrap: wrap; } .tc-chip { background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); font-family: inherit; font-size: 11px; font-weight: 700; padding: 5px 11px; cursor: pointer; transition: all .13s; } .tc-chip b { color: var(--text); } .tc-chip:hover { border-color: var(--accent); } .tc-chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #0a0e1a); } .tc-chip.on b { color: #14141f; } .tc-group { margin-bottom: 13px; } .tc-g-head { font-size: 12.5px; font-weight: 900; color: var(--accent-fg); margin-bottom: 7px; display: flex; align-items: center; gap: 7px; } .tc-row { display: flex; align-items: center; gap: 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 11px; padding: 8px 12px; margin-bottom: 5px; } .tc-av { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; background: var(--surface); border: 1px solid var(--border); } .tc-idcol { display: flex; flex-direction: column; flex: 1; min-width: 0; } .tc-name { font-size: 12.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tc-on { color: var(--success); font-size: 9px; } .tc-user { font-size: 10.5px; color: var(--text-muted); direction: ltr; text-align: start; } .tc-role-sel { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-family: inherit; font-size: 11.5px; padding: 5px 8px; cursor: pointer; flex-shrink: 0; max-width: 132px; } .tc-acts { display: flex; gap: 4px; flex-shrink: 0; } @media (max-width: 620px) { .tc-role-sel { max-width: 96px; } .tc-user { display: none; } } /* ═══ v182 — شريط أدوات الفقاعة: واضح وجدي بدل إيموجي صغير ═══ */ .msg-bubble { padding-top: 10px; } /* ═══ v601 — الشريط داخل الفقاعة لا فوقها ═══ كان يطفو ١٣ بكسل فوق حرف الفقاعة (v182)، فيُقصّ عند حافّة جسم المحادثة ويبدو «خارج الصندوق» (محمد: «بيطلع برا البوكس بطريقة غلط»). صار يسكن أسفل الفقاعة من الداخل فوق سطر الوقت، ويلتفّ إن ضاقت الفقاعة. */ .msg-tools { position: absolute; bottom: 3px; inset-inline-end: 5px; display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 2px; box-shadow: 0 3px 12px rgba(0,0,0,.16); opacity: 0; visibility: hidden; transform: translateY(3px) scale(.96); transform-origin: center; transition: opacity .16s, transform .16s, visibility .16s; z-index: 4; } .msg-bubble:hover .msg-tools, .msg-tools:hover { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } /* الفقاعة القصيرة تتّسع عند المرور بقدر الشريط — فيبقى داخلها لا خارجها */ .msg-bubble:hover, .msg-bubble:focus-within { min-width: min(340px, 70vw); } /* النسبة المئويّة تدور على عرض عمودٍ يُقاس من محتواه — فالقياس بالشاشة */ /* v458 — كانت ٢٥px والأيقونة محرفاً بحجم ١٢٫٥. القاعدة: الأيقونة الوظيفية لا تقلّ عن ١٦px ومحيط اللمس لا يقلّ عن ٣٢px — ما دون ذلك يخطئه الإصبع. */ .msg-tools .mt-btn { width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent; color: var(--text-muted); font-size: 12.5px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .12s; font-family: inherit; } .msg-tools .mt-btn svg { width: 18px; height: 18px; } /* الضغط انكماش لا نزول — هويّة التصميم */ .msg-tools .mt-btn:active { transform: scale(.965); } /* بديل ظاهر إن غاب اسم الأيقونة — الزرّ الفارغ لا يُرى ولا يُشتكى منه */ .mt-fallback { font-size: 15px; opacity: .8; } .msg-tools .mt-btn:hover { background: var(--surface2); color: var(--accent-fg); transform: scale(1.14); } .msg-tools .mt-btn.on { color: var(--accent-fg); } .msg-tools .mt-btn.danger:hover { background: color-mix(in srgb, #e5484d 16%, transparent); color: #e5484d; } /* v182 — أزرار المرفق والعاجل: بارزة وواضحة مع تسمية عالهوفر */ .msgs-icon-btn { position: relative; } .msgs-icon-btn::after { content: attr(title); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 7px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; } .msgs-icon-btn:hover::after { opacity: .95; } /* ═══ v182 — منتقي التاريخ بثيم البرنامج ═══ */ .tfd-wrap { min-width: 0; } .tfd-btn { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 9px 12px; cursor: pointer; transition: all .14s; text-align: start; } .tfd-btn:hover { border-color: var(--accent); } .tfd-ic { flex-shrink: 0; font-size: 13px; } .tfd-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* نافذة v182 (tfd-pop) أُلغيت في v545 — الزرّ أعلاه صار واجهة كلّ خانة تاريخ، والتقويم #tf-datepick */ .sc-est-note { font-size: 11.5px; line-height: 1.9; color: var(--text); margin-bottom: 11px; background: color-mix(in srgb, #3a90e0 8%, var(--surface2)); border: 1px solid color-mix(in srgb, #3a90e0 30%, var(--border)); border-radius: 12px; padding: 10px 13px; } .sc-est-note b { color: var(--info); } mark.msg-hl { background: color-mix(in srgb, #ffd75e 65%, transparent); color: inherit; border-radius: 4px; padding: 0 2px; } .msg-bubble .msg-reactions { margin-top: 5px; } .msg-daysep span { font-size: 10.5px; font-weight: 800; color: var(--text-muted); background: color-mix(in srgb, var(--surface) 85%, transparent); border: 1px solid var(--border); border-radius: 999px; padding: 3px 13px; } .msg-del { cursor: pointer; opacity: 0; transition: opacity .15s; font-size: 10px; } .msg-bubble:hover .msg-del { opacity: .7; } .msg-del:hover { opacity: 1 !important; } .msg-thread-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); flex-shrink: 0; } .msg-thread-input input { flex: 1; padding: 9px 14px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-family: inherit; font-size: 13px; } .msg-thread-input button { background: var(--accent); color: var(--accent-ink, #0a0e1a); border: none; width: 38px; border-radius: 50%; cursor: pointer; font-size: 14px; flex-shrink: 0; } .msg-person-list { margin-top: 10px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; } .msg-person-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; cursor: pointer; transition: background .15s; } .msg-person-item:hover { background: var(--surface2); } .msg-person-role { font-size: 11px; color: var(--text-muted); } /* ── MESSAGES PAGE (Slack-style two-pane) ── */ .msgs-layout { display: flex; gap: 0; height: calc(100vh - 168px - var(--tf-chrome-h, 0px)); min-height: 560px; /* v181: بوكس أوسع */ background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.08); } .msgs-side { width: 268px; flex-shrink: 0; border-inline-end: 1px solid var(--border); display: flex; flex-direction: column; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, var(--surface)), var(--surface)); } .msgs-side-tabs { display: flex; gap: 6px; padding: 10px 12px 0; } .msgs-tab { flex: 1; padding: 9px 8px; border-radius: 12px 12px 0 0; border: 1px solid var(--border); border-bottom: none; background: var(--surface2); color: var(--text-muted); font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all .15s; } .msgs-tab.active { background: var(--accent); color: var(--accent-ink, #0a0e1a); border-color: var(--accent); } .msgs-side-head { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--border); } .msgs-side-head input { flex: 1; padding: 9px 13px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-family: inherit; font-size: 13px; min-width: 0; } .msgs-convs { flex: 1; overflow-y: auto; } .msgs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--surface2); } .msgs-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text-muted); font-size: 14px; text-align: center; padding: 20px; } .msgs-empty > div:first-child { animation: gentleBob 3s ease-in-out infinite; } @keyframes gentleBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .msgs-thread { display: flex; flex-direction: column; flex: 1; min-height: 0; } .msgs-thread-head { display: flex; align-items: center; gap: 11px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, var(--surface)), var(--surface)); flex-shrink: 0; } .msgs-thread-head .mini-avatar { width: 38px; height: 38px; } /* v181 — خلفية هوية TakeFlow: موجات ناعمة متكرّرة بألوان البرنامج */ .msgs-thread-body { flex: 1; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; background-color: var(--surface2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='150' viewBox='0 0 420 150'%3E%3Cg fill='none' stroke='%237b8cff' stroke-opacity='0.10' stroke-width='2.2'%3E%3Cpath d='M-20 92c40-46 86-46 126 0s86 46 126 0 86-46 126 0 86 46 126 0'/%3E%3Cpath d='M-20 126c40-46 86-46 126 0s86 46 126 0 86-46 126 0 86 46 126 0'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: repeat; background-size: 420px 150px; } .msgs-thread-body[data-bg="warm"] { background-color: color-mix(in srgb, #e8a020 7%, var(--surface2)); } .msgs-thread-body[data-bg="cool"] { background-color: color-mix(in srgb, #55a8f0 8%, var(--surface2)); } .msgs-thread-body[data-bg="mint"] { background-color: color-mix(in srgb, #3ee0a0 8%, var(--surface2)); } .msgs-thread-body[data-bg="rose"] { background-color: color-mix(in srgb, #e070b0 8%, var(--surface2)); } .msgs-thread-body[data-bg="plain"] { background-image: none; } @media (max-width: 768px) { .msgs-layout { height: calc(100vh - 260px); } .msgs-side { width: 100%; border-inline-end: none; } .msgs-layout.thread-open .msgs-side { display: none; } .msgs-main { display: none; } .msgs-layout.thread-open .msgs-main { display: flex; } .msgs-mobile-back { display: inline-block !important; } } .chat-widget { position: fixed; bottom: 90px; inset-inline-end: 24px; z-index: 400; } .chat-bubble-btn { width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--surface) 55%, transparent); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); color: var(--text); border: 1.5px solid color-mix(in srgb, var(--text) 22%, transparent); font-size: 22px; cursor: pointer; box-shadow: 0 8px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; position: relative; transition: transform .2s, border-color .2s; margin-inline-start: auto; } .chat-bubble-btn:hover { transform: scale(1.08); border-color: var(--accent); } .onair-nav-btn { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)) !important; color: var(--accent-fg) !important; display: inline-flex !important; align-items: center; gap: 6px; } .onair-nav-btn .nav-ico { width: 17px; height: 17px; flex-shrink: 0; } .onair-nav-btn span { line-height: 1; } .onair-nav-btn:hover { background: color-mix(in srgb, var(--accent) 15%, transparent) !important; } .chat-unread-badge { position: absolute; top: -4px; inset-inline-end: -4px; background: var(--danger); color: white; font-size: 11px; font-weight: 900; border-radius: 10px; min-width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; padding: 0 5px; border: 2px solid var(--bg); } @media (max-width: 500px) { .chat-widget { bottom: 78px; inset-inline-end: 14px; } } .footer-sig { text-align: center; padding: 30px 20px 20px; color: var(--text-muted); font-size: 12px; border-top: 1px solid var(--border); margin-top: 30px; } .footer-sig b { color: var(--accent-fg); } .duration-badge { font-size: 11px; color: var(--text-muted); background: var(--surface2); padding: 2px 8px; border-radius: 6px; } /* ══════════════════════════════ MOBILE RESPONSIVE ══════════════════════════════ */ /* ═══════════════════════════════════════════════════════ SIDEBAR NAVIGATION (global UI 2026 — Linear/Notion style) Desktop ≥769px: fixed vertical sidebar (collapsible) Tablet/mid 769–1099px: auto-collapsed to icons Mobile ≤768px: sidebar hidden, bottom-nav takes over (untouched) RTL: sidebar on the right (inset-inline flips automatically on lang switch) ═══════════════════════════════════════════════════════ */ :root { --sidebar-w: 236px; --sidebar-w-collapsed: 68px; --topbar-h: 56px; } .sidebar { display: none; /* shown only on desktop via media query below */ position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: var(--sidebar-w); background: var(--surface); border-inline-end: 1px solid var(--border); z-index: 200; flex-direction: column; transition: width .22s cubic-bezier(.4,0,.2,1); overflow: hidden; } .sidebar-head { display: flex; align-items: center; gap: 10px; height: var(--topbar-h); flex-shrink: 0; padding: 0 14px; border-bottom: 1px solid var(--border); overflow: hidden; } .sidebar-logo-img { height: 24px; width: auto; max-width: 72px; object-fit: contain; flex-shrink: 0; } .channel-logo-slot { max-width: 92px; object-fit: contain; } /* v201 — لوغو القناة جوّا رأس الشريط كان بياكل مساحة الاسم (92px) فكان «TakeFlow» ينقص ويطلع «eFlow...» — هلق محدود بـ56px جوّا الرأس بس */ .sidebar-head .channel-logo-slot { max-width: 56px; } /* v192 — الاسم كان ينقطش: هلق بياخد المساحة المتاحة والسطر التاني بينقص بأدب (ellipsis) بدل ما يتقطّع، والدبوس والسهم ما ياخدوا من مساحتو. */ .sidebar-head .sidebar-logo-txt { flex: 1; min-width: 0; } .sidebar-logo-txt .st-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; direction: ltr; unicode-bidi: isolate; text-align: start; } /* v201 — بيدي فيكس: القص صار من آخر الكلمة مش من أولها */ .sidebar-logo-txt .st-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .sidebar-logo-txt { display: flex; flex-direction: column; justify-content: center; line-height: 1.25; white-space: nowrap; overflow: hidden; min-width: 0; flex: 1; opacity: 1; transition: opacity .15s; } .sidebar-logo-txt .st-name { font-weight: 900; letter-spacing: .3px; color: var(--accent-fg); font-size: 15px; } .sidebar-logo-txt .st-sub { font-size: 9px; font-weight: 600; color: var(--text-muted); overflow: visible; padding-bottom: 1px; } /* English sub-label is longer — shrink slightly so it never clips */ body[data-lang="en"] .sidebar-logo-txt .st-sub { font-size: 8px; letter-spacing: -0.1px; } /* v180 — الوضع التلقائي: الأساس مطوي، وعالهوفر بيتوسّع طافي فوق المحتوى (المحتوى ما بينقز — الشريط بيعلى فوقو بظل ناعم) */ .sidebar.auto-hover.collapsed:hover { width: var(--sidebar-w); box-shadow: 0 0 44px rgba(0,0,0,.30); z-index: 260; } .sidebar.auto-hover.collapsed:hover .sidebar-logo-txt, .sidebar.auto-hover.collapsed:hover .si-label, .sidebar.auto-hover.collapsed:hover .sf-label { max-width: 200px; opacity: 1; flex: 1; } /* v206 */ .sidebar.auto-hover.collapsed:hover .si-badge { display: none; } .sidebar.auto-hover.collapsed:hover .si-badge.show { display: inline-flex; } .sidebar.auto-hover.collapsed:hover .sidebar-head { justify-content: flex-start; padding: 16px 14px; gap: 10px; } .sidebar.auto-hover.collapsed:hover .sidebar-logo-img { display: block; } .sidebar.auto-hover.collapsed:hover .sidebar-pin-btn { display: flex; margin-inline-start: auto; } /* v201 — بالوضع التلقائي سهم الطي فايض (الفلّ عن الماوس بيطويه لحالو) — تخبيته حرّر مساحة الاسم الكامل «TakeFlow · منصّة الإنتاج التلفزيوني» */ .sidebar.auto-hover.collapsed:hover .sidebar-collapse-btn { display: none; } .sidebar.auto-hover.collapsed:hover .sidebar-nav { padding: 10px 10px; } .sidebar.auto-hover.collapsed:hover .sidebar-foot { padding: 10px 10px; } .sidebar.auto-hover.collapsed:hover .sidebar-item, .sidebar.auto-hover.collapsed:hover .sidebar-foot-btn { justify-content: flex-start; gap: 12px; padding: 10px 12px; } .sidebar.auto-hover.collapsed:hover .sidebar-item .si-badge.show { position: static; width: auto; min-width: 18px; height: auto; padding: 1px 7px; border-radius: 9px; font-size: 10.5px; } .sidebar.auto-hover.collapsed:hover .sidebar-item::after, .sidebar.auto-hover.collapsed:hover .sidebar-foot-btn::after { display: none; } body.sidebar-auto.sidebar-collapsed #app-shell { padding-inline-start: var(--sidebar-w-collapsed) !important; } .sidebar-pin-btn { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; transition: all .15s; } /* v192 — الدبوس صار مخبّى، بيبيّن بس لما تمرّ عالشريط — ولونو بيتبدّل بحركة */ .sidebar-pin-btn { opacity: 0; transform: scale(.85); transition: opacity .2s, transform .25s cubic-bezier(.34,1.56,.64,1), color .18s, border-color .18s, background .18s; } .sidebar:hover .sidebar-pin-btn { opacity: .75; transform: scale(1); } .sidebar-pin-btn:hover { opacity: 1 !important; color: var(--accent-fg); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface2)); } .sidebar-pin-btn.active { opacity: 1 !important; } .sidebar-pin-btn.active { color: var(--accent-fg); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface2)); transform: rotate(35deg); } .sidebar.collapsed .sidebar-pin-btn { display: none; } /* collapse toggle button */ .sidebar-collapse-btn { margin-inline-start: auto; flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color .15s, background .15s; } .sidebar-collapse-btn:hover { color: var(--accent-fg); background: color-mix(in srgb, var(--accent) 12%, var(--surface2)); } .sidebar-collapse-btn svg { width: 16px; height: 16px; transition: transform .22s; display: block; } /* flip the chevron when collapsed so it always points "outward" */ .sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); } /* nav items list */ .sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 10px; display: flex; flex-direction: column; gap: 3px; scrollbar-width: thin; } .sidebar-nav::-webkit-scrollbar { width: 6px; } .sidebar-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .sidebar-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; color: var(--text-muted); background: transparent; border: none; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; width: 100%; text-align: start; white-space: nowrap; overflow: hidden; transition: background .15s, color .15s; position: relative; } /* v194 — ترتيب الأقسام بالسحب */ .sidebar-item { cursor: pointer; } .sidebar-item.nav-dragging { opacity: .55; transform: scale(.97); background: color-mix(in srgb, var(--accent) 16%, var(--surface2)) !important; box-shadow: 0 6px 20px rgba(0,0,0,.22); } .sidebar-nav.nav-reordering { touch-action: none; } .sidebar-nav.nav-reordering .sidebar-item { transition: transform .16s; } .sidebar-item[draggable="true"]:active { cursor: grabbing; } /* v192 — روحية الشريط: خط ضوء بيمشي عالحرف، والعنصر بينزلق بلطف عالهوفر. ⚠️ ملاحظة مهمة: الشريط `position: fixed` من تعريفو الأصلي — ممنوع نكتب فوقو `relative` (كنت عملتها وكسّرت التخطيط: الشريط صار عنصر عادي فدفع كل المحتوى تحتو). الـ::after بيشتغل عادي مع fixed بلا أي تعديل. */ .sidebar::after { content: ""; position: absolute; inset-inline-end: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 55%, transparent), transparent); background-size: 100% 220%; animation: sbGlow 7s ease-in-out infinite alternate; pointer-events: none; opacity: .5; } [dir="ltr"] .sidebar::after { inset-inline-end: auto; inset-inline-start: 0; } @keyframes sbGlow { from { background-position: 0 -60%; } to { background-position: 0 160%; } } .sidebar-item { transition: background .16s, color .16s, transform .18s, padding .18s; } .sidebar-item:hover { color: var(--text); background: var(--surface2); transform: translateX(-3px); } [dir="ltr"] .sidebar-item:hover { transform: translateX(3px); } .sidebar-item .nav-ico { transition: transform .22s cubic-bezier(.34,1.56,.64,1); } .sidebar-item:hover .nav-ico { transform: scale(1.14); } .sidebar-item.active .nav-ico { transform: scale(1.06); } @media (prefers-reduced-motion: reduce) { .sidebar::after { animation: none; } .sidebar-item:hover { transform: none; } } .sidebar-item.active { background: var(--accent); color: var(--accent-ink, #0a0e1a); } .sidebar-item.active .nav-ico { color: #0a0e1a; } .sidebar-item .nav-ico { width: 19px; height: 19px; flex-shrink: 0; } .sidebar-item .si-label { flex: 1; overflow: hidden; text-overflow: ellipsis; } /* per-item badge (e.g. unread) */ .sidebar-item .si-badge { background: var(--danger); color: var(--danger-ink); font-size: 10px; font-weight: 900; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px; display: none; align-items: center; justify-content: center; flex-shrink: 0; } .sidebar-item .si-badge.show { display: inline-flex; } /* footer: theme + lang live here (settings that are rarely touched) */ .sidebar-foot { flex-shrink: 0; border-top: 1px solid var(--border); padding: 10px; display: flex; flex-direction: column; gap: 6px; } .sidebar-foot-btn { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 9px; background: transparent; border: 1px solid transparent; color: var(--text-muted); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; width: 100%; text-align: start; white-space: nowrap; overflow: hidden; position: relative; transition: background .15s, color .15s; } .sidebar-foot-btn:hover { color: var(--text); background: var(--surface2); } .sidebar-foot-btn .nav-ico, .sidebar-foot-btn svg:first-child { width: 19px; height: 19px; flex-shrink: 0; } .sidebar-foot-btn .sf-label { flex: 1; overflow: hidden; text-overflow: ellipsis; } /* ─── COLLAPSED STATE (icons only) ─── */ .sidebar.collapsed { width: var(--sidebar-w-collapsed); } /* fully remove labels from layout so icons truly center (not just hidden) */ .sidebar.collapsed .sidebar-logo-txt, .sidebar.collapsed .si-label, .sidebar.collapsed .sf-label { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; flex: 0 0 auto; transition: opacity .16s ease .04s; } /* v206 */ .sidebar.collapsed .si-badge { display: none; } /* head: center the collapse button, hide the logo image */ .sidebar.collapsed .sidebar-head { justify-content: center; padding: 0; gap: 0; } .sidebar.collapsed .sidebar-logo-img { display: none; } .sidebar.collapsed .sidebar-collapse-btn { margin-inline-start: 0; } /* nav + footer padding tightens to center icons perfectly in the 68px rail */ /* v206 — كانت الأيقونات «تقفز»: بالمطوي متوسّطة وبالتوسّع بتنط لأول السطر، والليبلات تطبش فجأة (display:none→block). هلق: الأيقونة ثابتة بنفس النقطة بالحالتين، والليبل بيبيّن بتلاشي ناعم مع التوسّع. */ .sidebar.collapsed .sidebar-item, .sidebar.collapsed .sidebar-foot-btn { justify-content: flex-start; gap: 12px; padding: 10px 12px; width: 100%; } .sidebar.collapsed .sidebar-nav { padding: 10px 10px; } .sidebar.collapsed .sidebar-foot { padding: 10px 10px; } .sidebar.collapsed .sidebar-item .nav-ico, .sidebar.collapsed .sidebar-foot-btn .nav-ico { margin: 0; } /* small dot indicator on collapsed items that have a badge */ .sidebar.collapsed .sidebar-item .si-badge.show { display: block; width: 8px; min-width: 8px; height: 8px; padding: 0; border-radius: 50%; position: absolute; top: 5px; inset-inline-end: 12px; font-size: 0; } /* tooltip when collapsed */ .sidebar.collapsed .sidebar-item::after, .sidebar.collapsed .sidebar-foot-btn::after { content: attr(data-tip); position: absolute; inset-inline-start: calc(100% + 8px); top: 50%; transform: translateY(-50%); background: var(--surface2); color: var(--text); border: 1px solid var(--border); padding: 5px 10px; border-radius: 7px; font-size: 12px; font-weight: 600; white-space: nowrap; z-index: 300; pointer-events: none; opacity: 0; transition: opacity .12s; box-shadow: 0 6px 20px rgba(0,0,0,.35); } .sidebar.collapsed .sidebar-item:hover::after, .sidebar.collapsed .sidebar-foot-btn:hover::after { opacity: 1; } /* ─── SLIM TOP BAR (messages, notifications, on-air, profile — the live stuff) ─── */ .topbar { display: none; /* shown only on desktop */ position: fixed; top: 0; inset-inline-start: var(--sidebar-w); inset-inline-end: 0; height: var(--topbar-h); background: var(--surface); border-bottom: 1px solid var(--border); z-index: 150; align-items: center; padding: 0 22px; gap: 10px; transition: inset-inline-start .22s cubic-bezier(.4,0,.2,1); } body.sidebar-collapsed .topbar { inset-inline-start: var(--sidebar-w-collapsed); } .topbar-title { font-weight: 800; font-size: 15px; color: var(--text); } .topbar-spacer { flex: 1; } .topbar-right { display: flex; align-items: center; gap: 10px; } /* content offset so pages clear the fixed sidebar + topbar on desktop */ @media (min-width: 769px) { body.has-sidebar #app-shell { padding-inline-start: var(--sidebar-w); padding-top: var(--topbar-h); transition: padding-inline-start .22s cubic-bezier(.4,0,.2,1); } body.has-sidebar.sidebar-collapsed #app-shell { padding-inline-start: var(--sidebar-w-collapsed); } body.has-sidebar .sidebar { display: flex; } body.has-sidebar .topbar { display: flex; } /* old horizontal top navbar is replaced by sidebar+topbar on desktop */ body.has-sidebar .topnav { display: none; } /* auto-collapse to icons in the mid range (tablet / small laptop) */ } @media (min-width: 769px) and (max-width: 1099px) { body.has-sidebar .sidebar:not(.user-expanded) { width: var(--sidebar-w-collapsed); } body.has-sidebar:not(.sidebar-user-expanded) #app-shell { padding-inline-start: var(--sidebar-w-collapsed); } body.has-sidebar:not(.sidebar-user-expanded) .topbar { inset-inline-start: var(--sidebar-w-collapsed); } } @media (max-width: 768px) { /* ── MESSAGES PANEL: full-width sheet on mobile ── */ .msg-sidebar { bottom: 0; inset-inline-end: 0; inset-inline-start: 0; width: 100%; max-width: 100%; height: 80vh; max-height: 80vh; border-radius: 18px 18px 0 0; border-inline: none; } /* notif & theme panels: fixed to viewport on mobile so they never overflow */ .notif-panel { position: fixed !important; top: 58px !important; inset-inline-end: 12px !important; inset-inline-start: 12px !important; width: auto !important; max-width: none !important; } .theme-panel { position: fixed !important; top: 58px !important; inset-inline-end: 12px !important; width: 200px !important; } .broadcast-modal, .modal { max-width: calc(100vw - 24px) !important; } /* ── FORM GRIDS ── */ .form-grid, .form-grid.cols3 { grid-template-columns: 1fr; } .type-grid { grid-template-columns: repeat(3,1fr); } .dash-stats { grid-template-columns: repeat(2,1fr); } .role-grid { grid-template-columns: 1fr 1fr; } /* ── SIDEBAR/TOPBAR: hidden on mobile (bottom-nav takes over) ── */ .sidebar, .topbar { display: none !important; } body.has-sidebar #app-shell { padding-inline-start: 0 !important; padding-top: 0 !important; } body.has-sidebar .topnav { display: flex !important; } /* restore mobile header */ /* ── TOPNAV: hide desktop tabs, simplify header ── */ .topnav { padding: 0 14px; height: 52px; flex-wrap: nowrap; justify-content: space-between; } .logo { font-size: 14px; gap: 7px; } .logo-dot { width: 7px; height: 7px; } .nav-tabs { display: none !important; } /* hidden on mobile — replaced by bottom nav */ .user-badge { padding: 4px 10px; font-size: 11px; } .lang-toggle span, .logout-btn span { display: none; } .lang-toggle { padding: 5px 9px; font-size: 11px; } .logout-btn { padding: 5px 9px; font-size: 11px; } .theme-picker { width: 30px; height: 30px; font-size: 13px; } /* v552 — الهاتف: أربعة أزرار تُطوى في «المزيد» */ .topnav .theme-picker, .topnav #broadcast-btn, .topnav .onair-nav-btn, .topnav #lang-btn, .topnav #warroom-btn, .topnav #tour-btn { display: none !important; } /* v555 — والدليل في «المزيد» */ .topnav .nav-more { display: inline-flex; } .topnav .nav-right { gap: 6px; } /* ── PAGES: add bottom padding for bottom nav ── */ .page { padding: 14px 12px 90px 12px; } .card { padding: 16px 14px; } /* ── BOTTOM NAVIGATION ── */ .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--border); z-index: 150; padding-bottom: env(safe-area-inset-bottom, 8px); overflow-x: auto; /* v217 — كل الأقسام بتبيّن بالسحب */ -webkit-overflow-scrolling: touch; scrollbar-width: none; } .bottom-nav::-webkit-scrollbar { display: none; } .bottom-nav-item { flex: 0 0 auto; min-width: 66px; /* v217 — بدل الانضغاط */ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 4px 6px; cursor: pointer; border: none; background: transparent; color: var(--text-muted); font-family: inherit; font-size: 9px; font-weight: 600; gap: 3px; transition: color .2s; min-height: 56px; -webkit-tap-highlight-color: transparent; } .bottom-nav-item .bn-icon { font-size: 20px; line-height: 1; } .bottom-nav-item .bn-label { font-size: 9px; line-height: 1; white-space: nowrap; } .bottom-nav-item.active { color: var(--accent-fg); } .bottom-nav-item.active .bn-icon { transform: scale(1.1); } /* ── MODAL: full screen on mobile ── */ .modal-overlay { padding: 0; align-items: flex-end; } .modal { border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 90vh; width: 100%; max-width: 100%; padding: 20px 16px; } .modal-close { top: 12px; inset-inline-start: 12px; } /* ── CARDS & BUTTONS ── */ .req-card { padding: 14px 12px; } .req-card-top { flex-direction: column; gap: 6px; } .btn-submit { padding: 14px; font-size: 15px; } .action-btn { padding: 6px 10px; font-size: 11px; } .stat-card { padding: 14px 10px; } .stat-num { font-size: 24px; } /* ── TYPE GRID ── */ .type-card { padding: 12px 8px; } .type-icon { font-size: 18px; } .type-name { font-size: 11px; } /* ── PRIORITY ROW ── */ .priority-row { gap: 6px; } .priority-btn { padding: 8px 6px; font-size: 11px; } /* ── THEME PANEL ── */ .theme-panel { width: 180px; } /* ── STATS ── */ .stat-bar-label { min-width: 90px; font-size: 11px; } /* ── LOG TABLE ── */ .log-table { font-size: 11px; } .log-table th, .log-table td { padding: 6px 6px; } /* ── SUBMIT BUTTON: sticky on mobile ── */ .btn-submit-wrap { position: sticky; bottom: 70px; z-index: 50; padding: 8px 0; background: linear-gradient(to top, var(--bg) 70%, transparent); } /* ── UPLOAD ── */ .upload-thumb { width: 55px; height: 55px; } .upload-zone { padding: 16px; } } /* Desktop: hide bottom nav */ @media (min-width: 769px) { .bottom-nav { display: none !important; } } .form-header h1, .card-title, .topbar-title, .sidebar-logo-txt .st-name, .login-greet, .write-modal-head > span:first-child { font-family: var(--font-head, inherit); } .form-header h1 { font-weight: 800; letter-spacing: -.2px; } /* v214 — الخلفية الحيّة: بقعتان ضوئيتان بلون الثيم/القسم بتنفّس بطيء جداً */ #tf-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } #app-shell { position: relative; z-index: 1; } #tf-aurora span { position: absolute; width: 62vw; height: 62vw; border-radius: 50%; filter: blur(90px); opacity: .5; } #tf-aurora span:first-child { top: -22vw; inset-inline-start: -14vw; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 70%); animation: tfAur1 26s ease-in-out infinite alternate; } #tf-aurora span:last-child { bottom: -26vw; inset-inline-end: -16vw; background: radial-gradient(circle, color-mix(in srgb, var(--section-accent, var(--accent)) 13%, transparent) 0%, transparent 70%); animation: tfAur2 32s ease-in-out infinite alternate; } @keyframes tfAur1 { to { transform: translate(7vw, 5vh) scale(1.12); } } @keyframes tfAur2 { to { transform: translate(-6vw, -5vh) scale(1.08); } } @media (prefers-reduced-motion: reduce) { #tf-aurora span { animation: none; } } @media (max-width: 768px) { #tf-aurora { display: none; } } /* v217 — iOS بلا blur كانت تبيّن أشكال حادة عالدخول */ /* v214 — لمعة الزجاج المصقول عالبطاقات (خط ضو داخلي علوي + ظل مدروس) */ .card, .nt-card, .stat-card { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent), 0 1px 3px color-mix(in srgb, #000 18%, transparent); } /* v214 — فاصل قسم التمبلتات بلوحة الثيم الفوقانية */ .theme-sep { font-size: 10px; font-weight: 800; color: var(--text-muted); letter-spacing: 1px; padding: 8px 10px 4px; border-top: 1px dashed var(--border); margin-top: 6px; } /* v214 — أدوات اللوحة صارت عايمة جوّا بوكس الرسم (ثابتة، ما بتتأثر بالحركة/الزوم) */ .nb-float { position: absolute; z-index: 6; display: inline-flex; gap: 5px; align-items: center; background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: 999px; padding: 5px 8px; box-shadow: 0 10px 26px -12px #0009; } .nb-float-tools { top: 12px; inset-inline-end: 12px; } .nb-float-zoom { bottom: 12px; inset-inline-end: 12px; } .nb-float-tpl { top: 12px; inset-inline-start: 12px; border-radius: 12px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 800; color: var(--text); padding: 8px 14px; } .nb-float-tpl:hover { border-color: var(--accent); } /* ═══════════ v215 ═══════════ */ /* 📧 سلاسل البريد المطوية */ .mr-msg.mr-clps { padding-block: 9px; cursor: pointer; opacity: .88; } .mr-msg.mr-clps:hover { opacity: 1; border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); } .mr-msg .mr-snip { display: none; } .mr-msg.mr-clps .mr-snip { display: block; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60ch; } .mr-msg.mr-clps .mr-to, .mr-msg.mr-clps .mr-b, .mr-msg.mr-clps .mr-seen, .mr-msg.mr-clps .mr-att, .mr-msg.mr-clps .mr-acts { display: none; } /* 🎫 السيريال — بصمة أمر الإنتاج على بطاقة الطلب */ .req-card { position: relative; } .tf-serial { position: absolute; top: 9px; inset-inline-start: 12px; font-family: 'Share Tech Mono', monospace; font-size: 9.5px; letter-spacing: 1px; color: color-mix(in srgb, var(--text-muted) 75%, transparent); pointer-events: none; } /* 📅 فواصل الأيام بلستة البريد — لاصقة أثناء التمرير */ .ml-daysep { position: sticky; top: 0; z-index: 3; font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 1.5px; color: var(--text-muted); padding: 7px 14px 5px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px dashed var(--border); } /* ⭕ حلقة حالة الطلب — بتعبّي مع تقدّم المراحل */ .tf-ring { position: absolute; top: 7px; inset-inline-end: 10px; pointer-events: none; } .tf-ring[data-st="new"] { color: var(--info); } .tf-ring[data-st="approved"] { color: #64c8f0; } .tf-ring[data-st="progress"] { color: var(--accent-fg); } .tf-ring[data-st="designer_done"] { color: #8ad0a0; } .tf-ring[data-st="montage"] { color: #b070e0; } .tf-ring[data-st="done"] { color: var(--success); } /* 🔢 الأرقام البطولية بكروت الإحصاء */ .stat-num { font-size: 34px; font-weight: 900; color: var(--accent-fg); letter-spacing: .5px; text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 28%, transparent); } /* إعادة تأكيد خيار «حواف حادة» بعد التمبلتات (حتى يضل يغلبها لما المستخدم يختارو) */ html[data-corners="sharp"] body { --radius: 6px; --radius-lg: 8px; } /* ═══════════ v218 ═══════════ */ /* ⚡ شريط الإنشاء السريع العائم — توقيع TakeFlow */ #tf-quickbar { position: fixed; bottom: 18px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 140; display: flex; gap: 6px; align-items: center; background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid var(--border); border-radius: 999px; padding: 6px 8px; box-shadow: 0 14px 34px -12px #000b, inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent); animation: tfQbIn .35s cubic-bezier(.34,1.56,.64,1) both; } [dir="rtl"] #tf-quickbar { transform: translateX(50%); } @keyframes tfQbIn { from { opacity: 0; transform: translateX(-50%) translateY(14px); } } [dir="rtl"] #tf-quickbar { animation-name: tfQbInR; } @keyframes tfQbInR { from { opacity: 0; transform: translateX(50%) translateY(14px); } } .tfq-btn { display: inline-flex; align-items: center; gap: 7px; border: none; cursor: pointer; background: transparent; color: var(--text-muted); font-family: inherit; font-size: 12.5px; font-weight: 800; padding: 9px 15px; border-radius: 999px; transition: .15s; } .tfq-btn:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 10%, transparent); } .tfq-btn.tfq-main { background: var(--accent); color: var(--accent-ink, #14161f); box-shadow: 0 3px 0 0 color-mix(in srgb, var(--accent) 50%, #000); } .tfq-btn.tfq-main:active { transform: translateY(3px); box-shadow: none; } body.has-demo-banner #tf-quickbar { bottom: 58px; } @media (max-width: 768px) { #tf-quickbar { display: none; } } /* 🫧 نطّة المودالات النابضة — micro-motion من خطة الهوية */ .write-modal-overlay.open .write-modal { animation: tfPop .24s cubic-bezier(.34,1.56,.64,1) both; } @keyframes tfPop { from { transform: scale(.94) translateY(10px); opacity: 0; } } /* ═══════════ v220 — 🎬 هوية الدوامات: غرفة البث ═══════════ */ /* بطاقة دوام اليوم → كرت ON AIR بتخريم تذكرة */ .sched-today { position: relative; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, var(--surface)), var(--surface) 62%); border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border)); border-radius: var(--radius-lg); padding: 16px 20px 14px; margin-bottom: 20px; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent), 0 10px 26px -16px color-mix(in srgb, var(--accent) 55%, #000); } .sched-today::before, .sched-today::after { content: ''; position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); transform: translateY(-50%); } .sched-today::before { inset-inline-start: -10px; } .sched-today::after { inset-inline-end: -10px; } .st-onair { display: inline-flex; align-items: center; gap: 6px; font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 2.5px; color: var(--accent-fg); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 999px; padding: 3px 10px 3px 8px; margin-inline-end: 9px; vertical-align: 2px; background: color-mix(in srgb, var(--accent) 10%, transparent); } .st-led { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px 1px var(--accent); animation: stLed 1.6s ease-in-out infinite; } @keyframes stLed { 0%,100% { opacity: 1; } 50% { opacity: .35; } } .sched-today-head { font-family: var(--font-head, inherit); font-size: 16.5px; } .sched-today-person { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent); } /* شريط الأسبوع → كونسول رقمي */ .sched-week-label { font-family: 'Share Tech Mono', monospace; font-size: 12.5px; letter-spacing: .5px; } .sched-week-nav { background: color-mix(in srgb, var(--surface) 85%, transparent); border: 1px solid var(--border); border-radius: 999px; padding: 4px 6px; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent); } /* رؤوس الأيام → اسم صغير + رقم رقمي كبير (روح Caleicen) */ .sched-grid th { font-size: 11px; } .sched-daynum { font-family: 'Share Tech Mono', monospace; font-size: 19px; font-weight: 700; color: var(--text); line-height: 1.15; } .sched-today-col { position: relative; background: color-mix(in srgb, var(--accent) 10%, transparent) !important; } .sched-today-col .sched-daynum { color: var(--accent-fg); text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent); } th.sched-today-col::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 3px; background: var(--accent); border-radius: 0 0 3px 3px; } /* الجدول: إطار فاخر + تكبير تفاعل الخلايا */ .sched-grid-wrap { border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent), 0 1px 4px #0004; } .sched-cell { border-radius: 7px; } .sched-cell.editable:hover { transform: scale(1.04); z-index: 2; } /* شارة «أنت» بلمعة */ .sched-me-tag { background: linear-gradient(135deg, #2ecc71, #1faa5c); box-shadow: 0 0 10px #2ecc7166; } /* العطل الرسمية بروح البطاقات */ .sched-holidays-bar { border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent), 0 1px 3px #0003; } /* ═══════════════════════════════════════════════ v221 — المسح الشامل للموبايل: ولا عنصر بيطلع برا الشاشة ═══════════════════════════════════════════════ */ /* قفل التمرير الأفقي نهائياً — clip أقوى من hidden: بيمنع حتى السحب بالإصبع على iOS */ html, body { overflow-x: clip; } .login-screen { overflow: clip; width: 100%; } /* قائمة «جديدة» بلوحتي: المرساة صارت من جهة البداية فبتفتح لجوّا الشاشة مش لبرّا */ .nb-newmenu { inset-inline-end: auto; inset-inline-start: 0; max-width: calc(100vw - 32px); } /* حقول التعديل السريع جوا flex كانت ترفض تنكمش (min-width:auto) — سبب فيضان صفوف النشرات */ .inline-edit-input { min-width: 0; } .card input, .card select { max-width: 100%; } /* الشريط السريع: منطقة آمنة للآيفون + بينخبى قرب آخر الصفحة (qb-hide من ui.js) حتى ما يغطي التوقيع */ #tf-quickbar { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 20px); transition: transform .28s ease, opacity .28s ease; } #tf-quickbar.qb-hide { transform: translateX(-50%) translateY(160%); opacity: 0; pointer-events: none; } [dir="rtl"] #tf-quickbar.qb-hide { transform: translateX(50%) translateY(160%); } /* v558 — مسافةٌ تحت التوقيع على الشاشة العريضة أيضاً: الصفحة القصيرة لا تمرير فيها يُخفي الشريط */ body:has(#tf-quickbar) .footer-sig { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } @media (max-width: 700px) { /* الشريط السريع عالموبايل: أيقونات بس — أنحف وما بيفيض */ #tf-quickbar .tfq-btn span { display: none; } #tf-quickbar .tfq-btn { padding: 10px 13px; } /* توقيعك بآخر الصفحة: مسافة أمان تحتو */ .footer-sig { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } /* صفوف النشرات بالإعدادات: بتلتف بدل ما تفيض */ .type-row { flex-wrap: wrap; } .type-row .inline-edit-input { flex: 1 1 44%; } .type-row input[type="time"] { max-width: none; flex: 1 1 30%; } /* فورم إضافة نشرة: صفّين عالموبايل بدل صف واحد مكبوس */ /* v551 — «1fr» حدّه الأدنى عرض الحقل الطبيعيّ (~٢٢٠px) فيفيض العمود الثاني خارج الهاتف؛ minmax(0, 1fr) يقسم ما هو متاح فعلاً */ .add-show-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; } .add-show-form > * { min-width: 0; width: 100%; box-sizing: border-box; } .add-show-form > .btn-add { grid-column: 1 / -1; } } /* ═══════════════════════════════════════════════ v222 — السايدبار «كونسول ريل»: طابقين (ريل LED + بانل channel strips) الطي = الريل بس · التوسّع/التلقائي عالماوس = نفس منطق v180 بلا تغيير ═══════════════════════════════════════════════ */ :root { --rail-w: 58px; --sidebar-w: 296px; --sidebar-w-collapsed: 58px; } .sidebar { padding-inline-start: var(--rail-w); } /* البانل بعرض ثابت — الطي بيقصّو (clip) بدل ما يعصرو، فما في نطّة بالعناصر */ .sidebar-head, .sidebar-nav, .sidebar-foot { width: calc(var(--sidebar-w) - var(--rail-w)); flex-shrink: 0; box-sizing: border-box; } /* ── الريل ── */ /* v349: كان absolute جوّا .sidebar المثبّتة — وأي سلف عليه filter بيكسر الfixed فالرِيل كان يمشي مع السكرول ويسيب أبيض تحت. صار fixed بحالو + سكرول داخلي حتى الأيقونات ما تنقص لما تكتر. */ .side-rail { position: fixed; inset-inline-start: 0; top: 0; bottom: 0; width: var(--rail-w); z-index: 201; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; background: color-mix(in srgb, #000 20%, var(--surface)); border-inline-end: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; padding: 10px 0 18px; gap: 2px; } .side-rail::-webkit-scrollbar { width: 0; } .rail-logo { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; margin-bottom: 8px; font-family: 'Share Tech Mono', monospace; font-size: 11px; color: var(--accent-fg); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, var(--surface2)), var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); } /* v350: كل قسم صار ببوكس واضح — حدّ خفيف وخلفية، والفعّال بلون قسمو */ .rail-item { width: 46px; flex-shrink: 0; padding: 7px 0 5px; cursor: pointer; border-radius: 11px; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--text-muted); background: color-mix(in srgb, var(--surface2) 55%, transparent); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent); transition: color .16s, background .16s, border-color .16s, transform .08s; --c: var(--accent); font-family: inherit; } .rail-item:active { transform: scale(.965); } .rail-item .nav-ico { width: 18px; height: 18px; } .rail-item .rail-led { width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--text-muted) 22%, transparent); transition: background .2s; } .rail-item:hover { color: var(--text); background: color-mix(in srgb, #fff 4%, transparent); } .rail-item.active { color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); border-color: color-mix(in srgb, var(--c) 55%, transparent); } .rail-item.active .rail-led { background: var(--c); box-shadow: 0 0 7px 1px var(--c); } .rail-item.hot:not(.active) .rail-led { background: var(--c); box-shadow: 0 0 7px 1px var(--c); animation: railBlink 1.6s steps(2) infinite; } @keyframes railBlink { 50% { opacity: .25; } } .rail-spacer { flex: 1; } .rail-expand { width: 34px; height: 30px; flex-shrink: 0; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); border-radius: 8px; cursor: pointer; display: grid; place-items: center; margin-bottom: 6px; transition: .16s; font-family: inherit; } .rail-expand:hover { color: var(--accent-fg); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .rail-expand svg { width: 15px; height: 15px; transition: transform .22s; display: block; } .sidebar.collapsed .rail-expand svg { transform: rotate(180deg); } [dir="ltr"] .rail-expand svg { transform: rotate(180deg); } [dir="ltr"] .sidebar.collapsed .rail-expand svg { transform: none; } .rail-avatar { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 900; color: var(--accent-fg); background: var(--surface2); border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); } /* ── البانل: channel strips بلون كل قسم ── */ .sidebar-item { --c: var(--accent); border: 1px solid transparent; } .sidebar-item::before { content: ''; flex-shrink: 0; width: 3px; height: 16px; border-radius: 3px; background: color-mix(in srgb, var(--text-muted) 22%, transparent); transition: background .18s, height .18s, box-shadow .18s; } .sidebar-item:hover::before { background: color-mix(in srgb, var(--c) 55%, transparent); } .sidebar-item.active { background: color-mix(in srgb, var(--c) 10%, var(--surface2)); color: var(--text); border-color: color-mix(in srgb, var(--c) 30%, transparent); } .sidebar-item.active .nav-ico { color: var(--c); } .sidebar-item.active::before { background: var(--c); height: 22px; box-shadow: 0 0 8px color-mix(in srgb, var(--c) 60%, transparent); } /* مؤشر VU حي عالقسم النشط — والشارة بتختفي (أنت أصلاً جوّاتو) */ .sidebar-item .si-vu { display: none; } .sidebar-item.active .si-vu { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; } .sidebar-item.active .si-vu i { width: 3px; border-radius: 2px; background: var(--c); animation: siVu .9s ease-in-out infinite alternate; } .sidebar-item.active .si-vu i:nth-child(1) { height: 36%; animation-delay: 0s; } .sidebar-item.active .si-vu i:nth-child(2) { height: 92%; animation-delay: .15s; } .sidebar-item.active .si-vu i:nth-child(3) { height: 58%; animation-delay: .3s; } @keyframes siVu { from { transform: scaleY(.45); } to { transform: scaleY(1); } } .sidebar-item.active .si-badge.show { display: none; } @media (prefers-reduced-motion: reduce) { .sidebar-item.active .si-vu i, .rail-item.hot .rail-led { animation: none !important; } } /* ── ألوان الأقسام (نفس عائلة section-accent + إضافات منسجمة) ── */ .sidebar-item[data-page="designer"], .rail-item[data-page="designer"] { --c: #2bb8a8; } .sidebar-item[data-page="montage"], .rail-item[data-page="montage"] { --c: #a86ae0; } .sidebar-item[data-page="schedule"], .rail-item[data-page="schedule"], .sidebar-item[data-page="hr"], .rail-item[data-page="hr"] { --c: #4a9de0; } .sidebar-item[data-page="mail"], .rail-item[data-page="mail"] { --c: #e06aa0; } .sidebar-item[data-page="messages"], .rail-item[data-page="messages"] { --c: #37c6dd; } .sidebar-item[data-page="notes"], .rail-item[data-page="notes"] { --c: #e0b23c; } .sidebar-item[data-page="headlines"],.rail-item[data-page="headlines"]{ --c: #ff5470; } /* v543 — سقف ٩٠٠ للعرض القديم وحده: كان يحبس ورقة العناوين (hlr-on) فيبقى للعنوان نحو ٢٩٠px مهما اتّسعت الشاشة */ #hl-page-body .hl-modal, #page-headlines:not(.hlr-on) #hl-page-body { max-width: 900px; margin: 0 auto; } /* v357: رؤوس أقلام المصمم */ .dsp { border: 1px solid color-mix(in srgb, #9a7ce0 40%, transparent); border-radius: 14px; margin-bottom: 16px; overflow: hidden; background: color-mix(in srgb, var(--bg-card) 60%, transparent); backdrop-filter: blur(10px); } .dsp-h { display: flex; align-items: center; gap: 9px; padding: 10px 14px; font-weight: 700; font-size: 13.5px; background: color-mix(in srgb, #9a7ce0 13%, transparent); border-bottom: 1px solid var(--border); } .dsp-count { margin-inline-start: auto; font-family: 'Share Tech Mono', monospace; font-size: 11px; color: var(--text-muted); } .dsp-list { display: flex; flex-direction: column; gap: 6px; padding: 11px 13px; } /* v370 · شارة مرحلة الطلب الحيّ */ .lv-badge { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding: 9px 13px; border-radius: 11px; font-size: 11.5px; background: color-mix(in srgb, #9b7dd4 10%, var(--surface2)); border: 1px solid color-mix(in srgb, #9b7dd4 32%, transparent); } .lv-badge.feed { background: color-mix(in srgb, var(--accent) 10%, var(--surface2)); border-color: color-mix(in srgb, var(--accent) 32%, transparent); } .lv-dot { width: 8px; height: 8px; border-radius: 50%; background: #9b7dd4; flex-shrink: 0; animation: coPulse 1.8s ease-in-out infinite; } .lv-badge.feed .lv-dot { background: var(--accent); } .lv-badge b { font-weight: 700; color: var(--text); } .lv-badge em { font-style: normal; font-size: 10.5px; color: var(--text-muted); } .lv-fin { margin-inline-start: auto; padding: 5px 12px; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 10.5px; font-weight: 700; color: var(--success); background: color-mix(in srgb, #2ecc8f 15%, var(--surface)); border: 1px solid color-mix(in srgb, #2ecc8f 42%, transparent); transition: transform .08s; } .lv-fin:active { transform: scale(.965); } /* v370 · طابور اليوم */ .tf-queue { margin: 14px 0; } .tf-queue:empty { display: none; } .q-head { display: flex; align-items: center; gap: 12px; padding: 11px 15px; border-radius: 12px 12px 0 0; background: var(--surface); border: 1px solid var(--border); border-bottom: 0; } .q-head > b { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; color: var(--accent-fg); } .q-load { margin-inline-start: auto; font-size: 10.5px; color: var(--text-muted); } .q-load b { font-family: var(--mono, monospace); color: var(--text); } .q-load.over { color: var(--danger); } .q-load.over b { color: var(--danger); } .q-refresh { width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 13px; background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted); } .q-refresh:hover { color: var(--accent-fg); border-color: var(--accent); } .q-warn { padding: 10px 15px; font-size: 11.5px; line-height: 1.7; color: var(--danger); background: color-mix(in srgb, #ff5470 10%, var(--surface2)); border: 1px solid color-mix(in srgb, #ff5470 32%, transparent); border-top: 0; } .q-grp { border: 1px solid var(--border); border-top: 0; background: var(--surface2); } .q-grp:last-child { border-radius: 0 0 12px 12px; overflow: hidden; } .q-grp-h { display: flex; align-items: center; gap: 8px; padding: 8px 15px; font-size: 10.5px; font-weight: 700; color: var(--text-muted); background: var(--surface); border-bottom: 1px solid var(--border); } .q-grp-h em { font-style: normal; padding: 1px 7px; border-radius: 99px; font-size: 9.5px; background: var(--surface2); border: 1px solid var(--border); } .q-grp.hot .q-grp-h { color: var(--danger); } .q-grp.today .q-grp-h { color: var(--accent-fg); } .q-row { display: flex; align-items: center; gap: 11px; padding: 10px 15px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background .12s; } .q-row:last-child { border-bottom: 0; } .q-row:hover { background: var(--surface); } .q-row.urgent { box-shadow: inset 3px 0 0 #ff5470; } .q-row.rt-montage .q-name { border-inline-start: 3px solid #ff5470; padding-inline-start: 8px; } .q-row.rt-designer .q-name { border-inline-start: 3px solid #4aa3e0; padding-inline-start: 8px; } .q-row.rt-both .q-name { border-inline-start: 3px solid #9b7dd4; padding-inline-start: 8px; } .q-air { font-family: var(--mono, monospace); font-size: 11.5px; font-weight: 700; color: var(--text); direction: ltr; min-width: 52px; } .q-eta { font-size: 10px; color: var(--text-muted); min-width: 46px; } .q-name { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .q-mat { font-family: var(--mono, monospace); font-size: 9.5px; font-weight: 700; direction: ltr; padding: 2px 7px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); } /* v621 — كان #111 */ .q-who { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; } .q-who i { font-style: normal; color: var(--text-muted); } /* v552 — كانت opacity .6 */ .q-st { width: 9px; height: 9px; border-radius: 50%; background: var(--border); flex-shrink: 0; } .q-st.claim { background: var(--accent); } .q-st.work { background: #4aa3e0; animation: coPulse 1.6s ease-in-out infinite; } .q-st.done { background: #2ecc8f; } .q-empty { padding: 22px; text-align: center; font-size: 12px; color: var(--text-muted); background: var(--surface2); border: 1px solid var(--border); border-radius: 0 0 12px 12px; } /* v369 · «الغرافيك يلي جايي معك» — للمونتير */ .mt-gx { margin-top: 10px; padding: 11px 13px; border-radius: 11px; background: color-mix(in srgb, #4aa3e0 7%, var(--surface2)); border: 1px solid color-mix(in srgb, #4aa3e0 28%, transparent); } .mt-gx-h { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font-size: 10px; font-weight: 700; letter-spacing: .05em; color: #4aa3e0; } .mt-gx-n { font-style: normal; padding: 1px 7px; border-radius: 99px; font-size: 9.5px; background: #4aa3e0; color: #fff; } .mt-gx-st { margin-inline-start: auto; padding: 2px 9px; border-radius: 99px; font-size: 9.5px; font-weight: 700; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); } .mt-gx-st.work { color: #4aa3e0; border-color: color-mix(in srgb, #4aa3e0 45%, transparent); } .mt-gx-st.ok { color: var(--success); border-color: color-mix(in srgb, #2ecc8f 45%, transparent); } .mt-gx-st.claim { color: var(--accent-fg); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .mt-gx-list { display: flex; flex-direction: column; gap: 5px; } .mt-gx-it { display: flex; align-items: center; gap: 9px; padding: 7px 11px; border-radius: 9px; font-size: 11.5px; background: var(--surface); border: 1px solid var(--border); } .mt-gx-it b { font-weight: 700; white-space: nowrap; color: var(--text); } .mt-gx-it span { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mt-gx-note { margin-top: 8px; font-size: 10.5px; line-height: 1.7; color: var(--text-muted); } /* v368 · لون البطاقة حسب وجهتها — المونتاج أحمر، المصمم أزرق، التنين بنفسجي */ .nr-pv-card.rt-montage { border-inline-start: 4px solid #ff5470; } .nr-pv-card.rt-designer { border-inline-start: 4px solid #4aa3e0; } .nr-pv-card.rt-both { border-inline-start: 4px solid #9b7dd4; } .nr-pv-card.rt-montage .nr-pv-seq { background: #ff5470; color: #fff; } .nr-pv-card.rt-both .nr-pv-seq { background: #9b7dd4; color: #fff; } /* اللقطات المطلوبة */ .pv-shots { width: 100%; min-height: 60px; padding: 9px 11px; border-radius: 9px; resize: vertical; font-family: inherit; font-size: 12px; line-height: 1.7; background: var(--surface); border: 1px solid var(--border); color: var(--text); } .pv-shots:focus { border-color: #ff5470; outline: none; } /* v368 · وضع البطاقة المكبّر */ .pv-zoom-back { position: fixed; inset: 0; z-index: 2147483400; display: flex; flex-direction: column; background: color-mix(in srgb, var(--bg, #0d0d0d) 92%, #000); backdrop-filter: blur(6px); } .pv-zoom-bar { display: flex; align-items: center; gap: 12px; padding: 12px 20px; flex-shrink: 0; background: var(--surface); border-bottom: 1px solid var(--border); } .pv-zoom-bar b { font-size: 14px; font-weight: 700; color: var(--accent-fg); } .pv-zoom-hint { font-size: 11px; color: var(--text-muted); margin-inline-end: auto; } .pv-zoom-x { width: 32px; height: 32px; border-radius: 9px; cursor: pointer; font-size: 14px; background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted); transition: transform .08s; } .pv-zoom-x:active { transform: scale(.965); } .pv-zoom-x:hover { border-color: #ff5470; color: var(--danger); } .pv-zoom-body { flex: 1; min-height: 0; overflow-y: auto; padding: 24px; display: flex; justify-content: center; } .nr-pv-card.pv-zoomed { width: min(1000px, 100%); align-self: flex-start; font-size: 15px; } .nr-pv-card.pv-zoomed .nr-pv-original { min-height: 150px; font-size: 15px; line-height: 2; } .nr-pv-card.pv-zoomed .nr-pv-editable { min-height: 64px; font-size: 14px; line-height: 1.9; } .nr-pv-card.pv-zoomed .pv-shots { min-height: 110px; font-size: 14px; } .nr-pv-card.pv-zoomed .pv-src { padding: 9px 15px; font-size: 12.5px; } .nr-pv-card.pv-zoomed .pv-mini { padding: 10px 13px; font-size: 13px; } .nr-pv-card.pv-zoomed .nr-pv-points input { font-size: 14px; padding: 10px 12px; } /* v367 · لوح مصادر المونتاج بالبطاقة — خيارات بكبسة مش نص حر */ .pv-mont { margin-top: 10px; padding: 11px 13px; border-radius: 11px; background: color-mix(in srgb, #ff5470 7%, var(--surface2)); border: 1px solid color-mix(in srgb, #ff5470 26%, transparent); } .pv-mont-h { font-size: 10px; font-weight: 700; letter-spacing: .05em; color: var(--danger); margin-bottom: 7px; display: flex; align-items: center; gap: 7px; } .pv-mont-h:not(:first-child) { margin-top: 11px; } .pv-req { font-style: normal; font-size: 9.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: #ff5470; color: #fff; } .pv-src-grid { display: flex; flex-wrap: wrap; gap: 5px; } .pv-src { padding: 6px 11px; border-radius: 9px; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 600; background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); transition: transform .08s; } .pv-src:active { transform: scale(.965); } .pv-src:hover { border-color: #ff5470; color: var(--danger); } .pv-src.on { background: color-mix(in srgb, #ff5470 17%, var(--surface)); border-color: #ff5470; color: var(--danger); font-weight: 700; box-shadow: inset 0 0 0 1px color-mix(in srgb, #ff5470 40%, transparent); } .pv-src-grid.snd .pv-src.on { background: color-mix(in srgb, #4aa3e0 17%, var(--surface)); border-color: #4aa3e0; color: #4aa3e0; box-shadow: inset 0 0 0 1px color-mix(in srgb, #4aa3e0 40%, transparent); } .pv-mont-row { display: flex; align-items: center; gap: 8px; margin-top: 11px; flex-wrap: wrap; } .pv-mont-row label { font-size: 10px; font-weight: 600; color: var(--text-muted); } .pv-mini { flex: 1; min-width: 120px; padding: 7px 10px; border-radius: 8px; font-family: inherit; font-size: 11.5px; background: var(--surface); border: 1px solid var(--border); color: var(--text); } .pv-mini.sm { flex: 0 0 92px; min-width: 0; } /* رقم المادة — بارز للمونتاج */ .pv-mat { font-family: var(--mono, monospace); font-size: 10px; font-weight: 700; direction: ltr; padding: 2px 8px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); } /* v621 — كان #111 */ .rq-mat { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding: 9px 13px; border-radius: 10px; font-size: 10.5px; font-weight: 700; color: var(--text-muted); background: color-mix(in srgb, var(--accent) 10%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); } .rq-mat b { font-family: var(--mono, monospace); font-size: 15px; direction: ltr; color: var(--accent-fg); } /* v367 · درج المرفقات */ .rq-att { margin-top: 10px; padding: 10px 12px; border-radius: 11px; background: var(--surface2); border: 1px solid var(--border); } .rq-att-h { font-size: 10px; font-weight: 700; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 7px; } .rq-att-h em { font-style: normal; padding: 1px 7px; border-radius: 99px; font-size: 9.5px; background: var(--surface); border: 1px solid var(--border); } .rq-att-grid { display: flex; flex-wrap: wrap; gap: 7px; } .rq-att-img { display: block; width: 66px; height: 66px; border-radius: 9px; overflow: hidden; border: 1px solid var(--border); transition: transform .1s, border-color .12s; } .rq-att-img:hover { transform: translateY(-2px); border-color: var(--accent); } .rq-att-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .rq-att-file { display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border-radius: 9px; font-size: 10.5px; font-weight: 600; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--border); } .rq-att-file:hover { border-color: var(--accent); color: var(--accent-fg); } .rq-att-file.link { color: #9b7dd4; border-color: color-mix(in srgb, #9b7dd4 40%, transparent); } /* v507 · زرّ حذف المرفق — محايد حتّى اللمس، واللون للمعنى لا للزينة */ .rq-att-w { position: relative; display: inline-flex; } .rq-att-x { position: absolute; inset-block-start: -5px; inset-inline-end: -5px; width: 19px; height: 19px; padding: 0; line-height: 1; border-radius: 99px; cursor: pointer; font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); opacity: 0; transition: opacity .12s, color .12s, border-color .12s, transform .1s; } .rq-att-w:hover .rq-att-x, .rq-att-x:focus-visible { opacity: 1; } .rq-att-x:hover { color: var(--danger, #ff5470); border-color: color-mix(in srgb, var(--danger, #ff5470) 45%, transparent); } .rq-att-x:active { transform: scale(.965); } @media (hover: none) { .rq-att-x { opacity: 1; } } /* رأس البطاقة قابل للطي بالكبس */ .nr-pv-head { cursor: pointer; } .nr-pv-head button, .nr-pv-head input, .nr-pv-head .pv-grip { cursor: default; } .nr-pv-head .pv-grip { cursor: grab; } /* v366 · التعاون — شارة الحضور وشريط الأدوات (غلاس بصري بلا blur متل الكروت) */ .co-badge { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 12px; border-radius: 11px; font-size: 11.5px; background: color-mix(in srgb, var(--accent) 9%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); } .co-badge.work { background: color-mix(in srgb, #4aa3e0 11%, var(--surface2)); border-color: color-mix(in srgb, #4aa3e0 38%, transparent); } .co-badge.done { background: color-mix(in srgb, #2ecc8f 11%, var(--surface2)); border-color: color-mix(in srgb, #2ecc8f 38%, transparent); } .co-badge.mine { box-shadow: inset 3px 0 0 var(--accent); } .co-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .co-badge.work .co-dot { background: #4aa3e0; animation: coPulse 1.6s ease-in-out infinite; } .co-badge.done .co-dot { background: #2ecc8f; animation: none; } @keyframes coPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.78); } } .co-badge b { font-weight: 700; color: var(--text); } .co-badge em { font-style: normal; color: var(--text-muted); font-size: 10.5px; } .co-with { margin-inline-start: auto; padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 700; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); } .co-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .co-note { font-size: 10.5px; color: var(--text-muted); margin-inline-end: auto; } .co-btn { padding: 7px 12px; border-radius: 9px; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 700; background: var(--surface2); color: var(--text-muted); border: 1px solid var(--border); transition: transform .08s; } .co-btn:active { transform: scale(.965); } .co-btn:hover { border-color: var(--accent); color: var(--accent-fg); } .co-btn.go { background: color-mix(in srgb, var(--accent) 16%, var(--surface2)); color: var(--accent-fg); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .co-btn.done { background: color-mix(in srgb, #2ecc8f 15%, var(--surface2)); color: var(--success); border-color: color-mix(in srgb, #2ecc8f 42%, transparent); } .co-btn.off { color: var(--text-muted); } .dsp-item { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 10px; cursor: pointer; background: var(--bg-input); border: 1px solid var(--border); font-size: 12.5px; } .dsp-item b { flex: 1; font-weight: 600; } .dsp-item em { font-style: normal; font-size: 10.5px; color: var(--text-muted); background: var(--bg-card); border-radius: 999px; padding: 2px 9px; } .dsp-item.on { border-color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); } .dsp-item.on b { text-decoration: line-through; opacity: .6; } /* v351: حزمة المونتير */ .mtp { border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); border-radius: 14px; margin-bottom: 16px; overflow: hidden; background: color-mix(in srgb, var(--bg-card) 60%, transparent); backdrop-filter: blur(10px); } .mtp-h { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-weight: 700; font-size: 13.5px; background: color-mix(in srgb, var(--accent) 12%, transparent); border-bottom: 1px solid var(--border); } .mtp-meta { font-family: 'Share Tech Mono', monospace; font-size: 11px; color: var(--text-muted); } .mtp-copy { margin-inline-start: auto; font-size: 11px; padding: 5px 11px; border-radius: 8px; cursor: pointer; border: 1px solid var(--border); background: var(--bg-input); color: var(--text); } .mtp-copy:hover { border-color: var(--accent); color: var(--accent-fg); } .mtp-copy:active { transform: scale(.965); } .mtp-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; padding: 13px 14px; } @media (max-width: 780px) { .mtp-grid { grid-template-columns: 1fr; } } .mtp-cell span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; color: var(--text-muted); margin-bottom: 5px; } .mtp-cell p { font-size: 12.5px; margin: 0; } .mtp-cell i { color: var(--text-muted); font-size: 12px; } .mtp-txt { font-size: 13px; line-height: 1.9; white-space: pre-wrap; max-height: 230px; overflow-y: auto; padding: 10px 12px; border-radius: 10px; background: var(--bg-input); border: 1px solid var(--border); } .mtp-side { display: flex; flex-direction: column; gap: 11px; } .mtp-ok { color: var(--success); } .mtp-no { color: #e0a03c; } .mtp-src { font-style: normal; display: inline-block; font-size: 11.5px; padding: 3px 9px; margin: 2px 3px 2px 0; border-radius: 999px; background: var(--bg-input); border: 1px solid var(--border); } /* v355: قسم العناوين — عمود أيام جانبي + قائمة محتوى */ .hl-page-grid { display: grid; grid-template-columns: 260px 1fr; gap: 18px; max-width: 1180px; margin: 0 auto; align-items: start; } @media (max-width: 900px) { .hl-page-grid { grid-template-columns: 1fr; } } .hl-side { border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--bg-card) 55%, transparent); backdrop-filter: blur(10px); padding: 12px; position: sticky; top: 16px; } .hl-side-h { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; margin-bottom: 9px; } .hl-side-h em { margin-inline-start: auto; font-style: normal; font-family: 'Share Tech Mono', monospace; font-size: 11px; background: var(--bg-input); border-radius: 999px; padding: 1px 8px; color: var(--text-muted); } .hl-search { width: 100%; padding: 8px 11px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text); font-size: 12px; font-family: inherit; margin-bottom: 9px; } .hl-search.sm { padding: 6px 9px; font-size: 11.5px; } .hl-side-list { display: flex; flex-direction: column; gap: 5px; max-height: 52vh; overflow-y: auto; } .hl-sideitem { display: flex; flex-direction: column; gap: 2px; text-align: start; padding: 8px 10px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; background: var(--bg-input); position: relative; } .hl-sideitem:hover { border-color: var(--border); } .hl-sideitem.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .hl-sideitem b { font-size: 12px; } .hl-sideitem span { font-size: 10.5px; color: var(--text-muted); } .hl-sideitem i { position: absolute; inset-inline-end: 8px; top: 8px; font-style: normal; font-size: 9px; } .hl-sideitem i.live { color: var(--danger); } .hl-sideitem i.del, .hl-histdel { position: absolute; inset-inline-end: 8px; bottom: 7px; font-style: normal; font-size: 12px; opacity: .45; cursor: pointer; transition: opacity .14s, transform .1s; } /* v357: ظاهر دايماً */ .hl-sideitem:hover i.del, .hl-histrow:hover .hl-histdel { opacity: .9; } .hl-sideitem i.del:active, .hl-histdel:active { transform: scale(.9); } .hl-side-new { width: 100%; margin-bottom: 9px; padding: 9px; border-radius: 10px; cursor: pointer; font-size: 12px; font-weight: 700; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); } .hl-side-new:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); } .hl-sideitem i.del:hover, .hl-histdel:hover { opacity: 1; } .hl-histrow { position: relative; } .hl-side-arch { width: 100%; margin-top: 9px; padding: 8px; border-radius: 9px; cursor: pointer; font-size: 11.5px; border: 1px dashed var(--border); background: transparent; color: var(--text-muted); display: flex; gap: 6px; justify-content: center; } .hl-side-arch:hover { color: var(--accent-fg); border-color: var(--accent); } .hl-empty.sm { font-size: 11.5px; padding: 12px 0; } .hl-row.dragging { opacity: .45; } .hl-row.over { border-color: var(--accent); box-shadow: 0 -2px 0 var(--accent) inset; } .hl-blank { text-align: center; padding: 60px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .hl-blank b { font-size: 19px; } .hl-blank p { color: var(--text-muted); font-size: 13px; margin-bottom: 8px; } .hl-blank .btn-submit { max-width: 300px; } .sidebar-item[data-page="playout"], .rail-item[data-page="playout"] { --c: #e05a5f; } .sidebar-item[data-page="ai"], .rail-item[data-page="ai"] { --c: #9a7ce0; } .sidebar-item[data-page="stats"], .rail-item[data-page="stats"] { --c: #5a9de0; } .sidebar-item[data-page="archive"], .rail-item[data-page="archive"], .sidebar-item[data-page="trash"], .rail-item[data-page="trash"] { --c: #93a0b8; } /* ── وضع الطي: البانل بينقص بالتقصيص — نفس التخطيط بالحالتين = صفر نط ── */ .sidebar.collapsed .sidebar-logo-txt, .sidebar.collapsed .si-label, .sidebar.collapsed .sf-label { max-width: none; opacity: 1; flex: 1 1 auto; } .sidebar.collapsed .sidebar-head { justify-content: flex-start; padding: 16px 14px; gap: 10px; } .sidebar.collapsed .sidebar-logo-img { display: block; } .sidebar.collapsed .sidebar-item, .sidebar.collapsed .sidebar-foot-btn { justify-content: flex-start; } .sidebar.collapsed .sidebar-item .si-badge.show { display: inline-flex; position: static; width: auto; min-width: 18px; height: auto; padding: 1px 7px; border-radius: 9px; font-size: 10.5px; } .sidebar.collapsed .sidebar-item::after, .sidebar.collapsed .sidebar-foot-btn::after { display: none; } /* ═══════════════════════════════════════════════ v225 — الفقاعة بس جوّا البرنامج + ثيم/لغة الدخول بمحلن الصح عالموبايل ═══════════════════════════════════════════════ */ #chat-bubble-btn { display: none; } body.in-app #chat-bubble-btn { display: flex; } .login-themes { position: absolute; top: 20px; inset-inline-start: 20px; display: flex; gap: 6px; z-index: 60; } .lang-toggle-login { z-index: 60; } @media (max-width: 900px) { .login-themes { top: calc(10px + env(safe-area-inset-top, 0px)); inset-inline-start: 12px; } .lang-toggle-login { top: calc(10px + env(safe-area-inset-top, 0px)); inset-inline-end: 12px; inset-inline-start: auto; } } /* ═══════════════════════════════════════════════ v227 — قفلة صفحة الدخول: شريط ثيمات بهوية + حلقة الثيم الفعّال ═══════════════════════════════════════════════ */ .login-themes { padding: 7px 10px; border-radius: 999px; align-items: center; background: color-mix(in srgb, var(--surface) 62%, transparent); border: 1px solid var(--border); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); box-shadow: 0 8px 26px -14px #000a; } .login-themes .theme-dot { transition: transform .16s ease, box-shadow .16s ease; } .login-themes .theme-dot:hover { transform: scale(1.18); } body:not([data-theme]) .login-themes .theme-dot[data-t="dark"], body[data-theme="blue"] .login-themes .theme-dot[data-t="blue"], body[data-theme="light"] .login-themes .theme-dot[data-t="light"], body[data-theme="breaking"] .login-themes .theme-dot[data-t="breaking"], body[data-theme="glass"] .login-themes .theme-dot[data-t="glass"], body[data-theme="glasslight"] .login-themes .theme-dot[data-t="glasslight"] { transform: scale(1.14); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent), 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent); } .lang-toggle-login { backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); } @media (max-width: 900px) { .login-themes { padding: 6px 8px; } } /* ═══════════════════════════════════════════════ v228 — لوحتي مرحلة أ: أشكال وفريمات + شريط أدوات ميرو للموبايل ═══════════════════════════════════════════════ */ .nb-shapewrap { position: relative; display: inline-flex; } .nb-shapemenu { display: none; position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 9; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 5px; gap: 3px; box-shadow: 0 14px 34px -12px #000a; } .nb-shapemenu.open { display: inline-flex; } .nb-shapemenu button { border: none; background: transparent; color: var(--text); font-family: inherit; font-size: 15px; width: 34px; height: 32px; border-radius: 8px; cursor: pointer; transition: .12s; } .nb-shapemenu button:hover { background: var(--surface2); } .nb-shapemenu button.on { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-fg); } .nb-frame { border: 2px dashed color-mix(in srgb, var(--fc, var(--accent)) 55%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--fc, var(--accent)) 5%, transparent); cursor: grab; } .nb-frame .nb-frame-label { position: absolute; top: -13px; inset-inline-start: 12px; background: color-mix(in srgb, var(--fc, var(--accent)) 88%, #000); color: var(--accent-ink, #0a0e1a); font-size: 11.5px; font-weight: 800; padding: 2px 11px; border-radius: 999px; white-space: nowrap; box-shadow: 0 3px 10px -4px #000a; } .nb-frame.dragging { opacity: .8; cursor: grabbing; } @media (max-width: 760px) { /* شريط الأدوات صار سفلي بالنص متل ميرو — أصابع مرتاحة وأدوات أكبر */ .nb-float-tools { top: auto; bottom: 12px; inset-inline-end: auto; inset-inline-start: 50%; transform: translateX(50%); max-width: calc(100% - 16px); overflow-x: auto; padding: 7px 9px; } [dir="ltr"] .nb-float-tools { transform: translateX(-50%); } .nb-float-tools .nb-tool { font-size: 17px; padding: 9px 11px; } .nb-float-zoom { bottom: auto; top: 12px; } .nb-shapemenu { top: auto; bottom: calc(100% + 10px); } } /* ═══════════════════════════════════════════════ v229 — لوحات متعددة + صفوف النقاط + مقبض تكبير الفريم ═══════════════════════════════════════════════ */ .nb-boardwrap { position: relative; } .nb-boardbtn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: var(--radius); background: var(--surface2); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: .15s; } .nb-boardbtn:hover { border-color: var(--accent); } .nb-bcaret { font-size: 10px; opacity: .6; } .nb-boardmenu { display: none; position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 30; min-width: 255px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 6px; box-shadow: 0 18px 44px -14px #000c; } .nb-boardmenu.open { display: block; } .nb-brow { display: flex; align-items: center; gap: 4px; width: 100%; border: none; background: none; color: var(--text); font-family: inherit; font-size: 13px; padding: 8px 10px; border-radius: 9px; cursor: pointer; text-align: start; } div.nb-brow { padding: 2px 4px; cursor: default; } button.nb-brow:hover { background: var(--surface2); } .nb-brow.on, .nb-brow.on .nb-bname { color: var(--accent-fg); font-weight: 800; } .nb-bname { flex: 1; border: none; background: none; color: inherit; font: inherit; padding: 8px; border-radius: 8px; cursor: pointer; text-align: start; } .nb-bname:hover { background: var(--surface2); } .nb-bname small { color: var(--text-muted); font-size: 10.5px; font-weight: 400; } .nb-bacts { display: inline-flex; gap: 1px; } .nb-bacts button { border: none; background: none; cursor: pointer; font-size: 12px; padding: 5px 6px; border-radius: 7px; opacity: .7; transition: .12s; } .nb-bacts button:hover { background: var(--surface2); opacity: 1; } .nb-bnew { color: var(--accent-fg); font-weight: 800; margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0; } .nb-frame-resize { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; cursor: nwse-resize; border-right: 3px solid color-mix(in srgb, var(--fc, var(--accent)) 85%, transparent); border-bottom: 3px solid color-mix(in srgb, var(--fc, var(--accent)) 85%, transparent); border-radius: 0 0 12px 0; transition: transform .12s; } .nb-frame-resize:hover { transform: scale(1.25); } .ce-rows { display: flex; flex-direction: column; gap: 7px; } .ce-prow { display: flex; align-items: center; gap: 8px; } .ce-pn { flex: 0 0 auto; width: 23px; height: 23px; border-radius: 7px; display: grid; place-items: center; font-family: 'Share Tech Mono', monospace; font-size: 11px; color: var(--accent-fg); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .ce-prow .ce-pinput { flex: 1; background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-family: inherit; font-size: 13.5px; padding: 8px 12px; min-width: 0; } .ce-prow .ce-pinput:focus { outline: none; border-color: var(--accent); } .ce-pdel { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 4px 7px; border-radius: 7px; transition: .12s; } .ce-pdel:hover { color: var(--tf-red); background: color-mix(in srgb, #f00 10%, transparent); } .ce-addrow { margin-top: 7px; border: 1px dashed var(--border); background: none; color: var(--text-muted); font-family: inherit; font-size: 12.5px; padding: 8px; border-radius: 9px; cursor: pointer; width: 100%; transition: .15s; } .ce-addrow:hover { color: var(--accent-fg); border-color: var(--accent); } /* ═══════════════════════════════════════════════ v230 — خريطة مصغّرة + خلفيات اللوحة ═══════════════════════════════════════════════ */ .nb-world.bg-plain { background-image: none !important; } .nb-world.bg-grid { background-image: linear-gradient(color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px) !important; background-size: 48px 48px !important; } .nb-minimap { position: absolute; bottom: 66px; inset-inline-start: 12px; /* v232 — فوق عوامة الزوم بدل ما يتراكبوا */ z-index: 6; width: 150px; height: 103px; border-radius: 12px; overflow: hidden; direction: ltr; background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px solid var(--border); box-shadow: 0 10px 26px -12px #000a; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .nb-minimap canvas { display: block; width: 100%; height: 100%; } .nb-mmview { position: absolute; border: 1.5px solid var(--accent); border-radius: 3px; pointer-events: none; background: color-mix(in srgb, var(--accent) 10%, transparent); } @media (max-width: 760px) { .nb-minimap { display: none; } } /* ═══════════════════════════════════════════════ v231 — نافذة الطلب V5 + غرفة العمليات (طبقة تصميم بحتة) ═══════════════════════════════════════════════ */ /* بلوك المهمة الموحّد */ .rqm { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .rqm-line { display: flex; align-items: center; gap: 11px; padding: 11px 15px; border-radius: 13px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); position: relative; overflow: hidden; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 11%, var(--surface2)), var(--surface2)); } .rqm-line::before { content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); box-shadow: 0 0 14px var(--accent); } .rqm-line.late { border-color: color-mix(in srgb, #ff3b3b 45%, transparent); } .rqm-line.late::before { background: #ff3b3b; box-shadow: 0 0 14px #ff3b3b; } .rqm-led { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: rqmPulse 1.8s ease-in-out infinite; flex: 0 0 auto; } .rqm-line.late .rqm-led { background: #ff3b3b; box-shadow: 0 0 10px #ff3b3b; } @keyframes rqmPulse { 50% { opacity: .35; } } .rqm-line b { flex: 1; font-size: 13.5px; line-height: 1.6; } .rqm-tag { font-size: 9px; letter-spacing: 2px; color: color-mix(in srgb, var(--accent) 80%, var(--text)); } .rqm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; } .rqm-cell { border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); padding: 9px 13px; display: flex; flex-direction: column; gap: 2px; border-top: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); } .rqm-cell b { font-size: 19px; line-height: 1.15; color: color-mix(in srgb, var(--accent) 85%, var(--text)); } .rqm-cell span { font-size: 10px; color: var(--text-muted); font-weight: 700; } .rqm-cell.hot { border-color: color-mix(in srgb, #ff3b3b 40%, transparent); border-top-color: color-mix(in srgb, #ff3b3b 60%, transparent); } .rqm-cell.hot b { color: var(--tf-red); } .rqm-next { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); text-align: start; background: color-mix(in srgb, var(--accent) 6%, transparent); color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; } .rqm-bx { width: 16px; height: 16px; border-radius: 6px; border: 1.5px solid var(--accent); flex: 0 0 auto; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); animation: rqmPulse 2s infinite; } .rqm-cr { margin-inline-start: auto; font-size: 10px; color: var(--text-muted); transition: transform .25s; } .rqm-cr.rot { transform: rotate(180deg); } .rqm-listwrap { max-height: 0; overflow: hidden; transition: max-height .35s ease; } .rqm-listwrap.open { max-height: 380px; } .rqm-listin { padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); } .rqm-s { display: flex; align-items: center; gap: 10px; padding: 5px 2px; font-size: 12.5px; color: var(--text-muted); } .rqm-sbx { width: 16px; height: 16px; border-radius: 6px; border: 1.5px solid var(--border); display: grid; place-items: center; font-size: 9px; flex: 0 0 auto; } .rqm-s.done { color: color-mix(in srgb, var(--text) 55%, transparent); text-decoration: line-through; } .rqm-s.done .rqm-sbx { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: var(--accent); color: var(--accent-fg); } .rqm-s.next { color: var(--text); font-weight: 800; } .rqm-s.next .rqm-sbx { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); animation: rqmPulse 2s infinite; } .rqm-bar { height: 4px; border-radius: 4px; background: var(--surface); margin-top: 9px; overflow: hidden; } .rqm-bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; box-shadow: 0 0 8px var(--accent); transition: width .4s; } /* معاينات الطيّات */ .rrb-preview { flex: 1; min-width: 0; font-weight: 400; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .report-read-box:not(.collapsed) .rrb-preview { display: none; } .vi-preview { font-weight: 400; font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46%; } .vi-panel.open .vi-preview { display: none; } /* نبض الإنتاج */ .ops-pulse { display: grid; grid-template-columns: repeat(4, 1fr) 1.35fr; gap: 10px; margin-bottom: 13px; } .ops-cell { border: 1px solid var(--border); border-radius: 13px; background: var(--surface2); padding: 10px 13px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; transition: .15s; position: relative; border-top: 2px solid color-mix(in srgb, var(--pc, var(--accent)) 55%, transparent); font-family: inherit; color: var(--text); text-align: start; } .ops-cell:hover { border-color: color-mix(in srgb, var(--pc, var(--accent)) 45%, var(--border)); } .ops-cell.on { border-color: color-mix(in srgb, var(--pc) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--pc) 30%, transparent) inset; } .ops-cell b { font-size: 21px; line-height: 1.1; color: color-mix(in srgb, var(--pc, var(--accent)) 88%, var(--text)); } /* v552 — على الفاتح: لون العمود صافياً كان ٢٫١ (الذهبيّ) — يُمزج بالحبر أكثر */ body[data-theme="light"] .ops-cell b, body[data-theme="glasslight"] .ops-cell b, body[data-theme="paper"] .ops-cell b, body[data-theme="magazine"] .ops-cell b, body[data-theme="script"] .ops-cell b, body[data-theme="dawn"] .ops-cell b { color: color-mix(in srgb, var(--pc, var(--accent)) 45%, var(--text)); } .ops-cell span { font-size: 10px; color: var(--text-muted); font-weight: 700; } .ops-led { position: absolute; top: 9px; inset-inline-end: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--pc, var(--accent)); box-shadow: 0 0 8px var(--pc, var(--accent)); } .ops-air { border-color: color-mix(in srgb, #ff3b3b 40%, transparent); cursor: default; background: linear-gradient(150deg, color-mix(in srgb, #ff3b3b 9%, var(--surface2)), var(--surface2)); border-top-color: color-mix(in srgb, #ff3b3b 65%, transparent); } .ops-air.calm { border-color: var(--border); background: var(--surface2); border-top-color: color-mix(in srgb, var(--accent) 35%, transparent); } .ops-nx { font-size: 10px; color: var(--tf-red); font-weight: 800; display: flex; align-items: center; gap: 6px; } .ops-nx i { width: 6px; height: 6px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b; animation: rqmPulse 1.4s steps(2) infinite; } .ops-air b { color: var(--tf-red); text-shadow: 0 0 16px color-mix(in srgb, #ff3b3b 40%, transparent); } .ops-air.calm b { color: var(--text-muted); text-shadow: none; } .ops-tt { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ops-latew { font-size: 10px; color: var(--tf-red); font-weight: 800; } /* الرَن داون */ .ops-rundown { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; } .ops-rd-top { display: flex; align-items: center; padding: 10px 16px; background: color-mix(in srgb, #000 14%, var(--surface)); border-bottom: 1px solid var(--border); font-size: 9px; letter-spacing: 3px; color: var(--text-muted); } .ops-slot { border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); } .ops-slot:last-child { border-bottom: none; } .ops-sl-head { width: 100%; display: flex; align-items: center; gap: 11px; padding: 10px 16px; text-align: start; background: color-mix(in srgb, #000 8%, var(--surface)); border: none; color: var(--text); font-family: inherit; cursor: pointer; transition: .13s; } .ops-sl-head:hover { background: color-mix(in srgb, #000 14%, var(--surface)); } .ops-sl-time { font-size: 14px; } .ops-slot.haslate .ops-sl-time { color: var(--tf-red); } .ops-sl-name { font-size: 12px; font-weight: 800; } .ops-sl-n { font-size: 10px; color: var(--accent-fg); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 7px; padding: 1px 8px; } .ops-sl-flag { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 800; color: var(--tf-red); } .ops-sl-flag i { width: 5px; height: 5px; border-radius: 50%; background: #ff3b3b; animation: rqmPulse 1.4s steps(2) infinite; } .ops-cr { margin-inline-start: auto; font-size: 10px; color: var(--text-muted); transition: transform .25s; } .ops-slot.closed .ops-cr { transform: rotate(180deg); } .ops-sl-body { max-height: 1200px; overflow: hidden; transition: max-height .3s; } .ops-slot.closed .ops-sl-body { max-height: 0; } .ops-row { display: flex; align-items: center; gap: 13px; padding: 10px 16px; cursor: pointer; border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent); transition: .13s; position: relative; } .ops-row:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); } .ops-row::before { content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 3px; background: transparent; } .ops-row.late::before { background: #ff3b3b; box-shadow: 0 0 10px color-mix(in srgb, #ff3b3b 60%, transparent); } .ops-mj { display: inline-flex; align-items: center; flex: 0 0 auto; direction: rtl; } .ops-mj i { width: 8px; height: 8px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--border); } .ops-mj s { width: 10px; height: 1.5px; background: var(--border); text-decoration: none; } .ops-mj i.d { background: color-mix(in srgb, var(--mc) 25%, var(--surface)); border-color: var(--mc); } .ops-mj s.d { background: color-mix(in srgb, var(--mc) 55%, var(--border)); } .ops-mj i.n { background: var(--mc); border-color: var(--mc); box-shadow: 0 0 7px var(--mc); animation: rqmPulse 2s steps(2) infinite; } .ops-ri { flex: 1; min-width: 0; } .ops-ti { display: block; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ops-me { display: block; font-size: 10.5px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ops-lt { color: var(--tf-red); } .ops-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: 12.5px; } @media (max-width: 860px) { .ops-pulse { grid-template-columns: 1fr 1fr; } .ops-pulse .ops-air { grid-column: 1 / -1; } .rqm-stats { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .rqm-cell b { font-size: 16px; } .ops-cell b { font-size: 18px; } .ops-mj { display: none; } } /* ═══════════════════════════════════════════════ v232 — هوية سلكتات · شريط اليوم · مركز المراقبة · جدار الشاشات ═══════════════════════════════════════════════ */ .vi-select { flex: 1; min-width: 0; background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 12px; cursor: pointer; transition: .15s; } .vi-select:hover, .vi-select:focus { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); outline: none; } .ops-daybar { border: 1px solid var(--border); border-radius: 13px; background: var(--surface); margin-bottom: 13px; overflow: hidden; position: relative; } .ops-db-expand { position: absolute; top: 5px; inset-inline-end: 40px; z-index: 3; font-size: 10.5px; font-weight: 800; color: var(--text-muted); border: 1px solid var(--border); border-radius: 8px; padding: 3px 10px; background: var(--surface2); cursor: pointer; font-family: inherit; transition: .15s; } .ops-db-expand:hover { color: var(--accent-fg); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); } .ops-db-head { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 14px; text-align: start; border: none; background: none; color: var(--text); font-family: inherit; cursor: pointer; } .ops-db-t { font-size: 8.5px; letter-spacing: 2.5px; color: var(--text-muted); } .ops-db-head .ops-cr { margin-inline-start: auto; } .ops-daybar.closed .ops-db-head .ops-cr { transform: rotate(180deg); } .ops-db-body { max-height: 84px; overflow: hidden; transition: max-height .3s; padding: 0 14px; } .ops-daybar.closed .ops-db-body { max-height: 0; } .ops-db-in { position: relative; height: 56px; direction: ltr; margin-bottom: 10px; } .ops-db-axis { position: absolute; left: 0; right: 0; top: 30px; height: 2px; background: var(--border); border-radius: 2px; } .ops-db-now { position: absolute; top: 10px; bottom: 2px; width: 2px; background: #ff3b3b; box-shadow: 0 0 9px #ff3b3b; z-index: 2; } .ops-db-now::before { content: 'NOW'; position: absolute; top: -8px; left: 4px; font-family: 'Share Tech Mono', monospace; font-size: 7px; letter-spacing: 1.5px; color: var(--tf-red); } .ops-db-slot { position: absolute; top: 19px; transform: translateX(-50%); width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; font-family: 'Share Tech Mono', monospace; font-size: 10px; cursor: pointer; z-index: 3; transition: .15s; background: var(--surface2); border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent-fg); } .ops-db-slot:hover { transform: translateX(-50%) scale(1.2); } .ops-db-slot.late { border-color: #ff3b3b; color: var(--tf-red); animation: rqmPulse 1.4s steps(2) infinite; } .ops-db-slot.soon { box-shadow: 0 0 0 4px color-mix(in srgb, #ff3b3b 15%, transparent); } .ops-db-lb { position: absolute; top: -16px; font-size: 8px; color: var(--text-muted); white-space: nowrap; } .ops-mc { position: fixed; inset: 0; z-index: 220; display: none; padding: 20px; background: color-mix(in srgb, #000 62%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .ops-mc.open { display: flex; align-items: center; justify-content: center; } .mc-in { width: min(1120px, 100%); max-height: 92vh; display: flex; flex-direction: column; background: var(--bg); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); border-radius: 20px; overflow: hidden; box-shadow: 0 40px 100px -30px #000; } .mc-top { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: color-mix(in srgb, #000 18%, var(--surface)); border-bottom: 1px solid var(--border); } .mc-t { font-size: 9.5px; letter-spacing: 3px; color: var(--accent-fg); } .mc-lv { display: inline-flex; align-items: center; gap: 6px; font-family: 'Share Tech Mono', monospace; font-size: 8.5px; letter-spacing: 2px; color: var(--tf-red); } .mc-lv i { width: 6px; height: 6px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 7px #ff3b3b; animation: rqmPulse 1.4s steps(2) infinite; } .mc-clock { margin-inline-start: auto; font-size: 13px; } .mc-x { font-size: 15px; color: var(--text-muted); padding: 4px 9px; border-radius: 8px; border: none; background: none; cursor: pointer; transition: .15s; } .mc-x:hover { color: var(--text); background: var(--surface2); } .mc-grid { flex: 1; display: grid; grid-template-columns: 1fr 262px; min-height: 0; } .mc-main { padding: 15px 17px; overflow: auto; min-width: 0; } .mc-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 12px; align-items: start; } .mc-slot { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; } .mc-sl-head { display: flex; align-items: center; gap: 9px; padding: 10px 13px; background: color-mix(in srgb, #000 10%, var(--surface)); border-bottom: 1px solid var(--border); } .mc-sl-tm { font-size: 13px; } .mc-slot.haslate .mc-sl-tm { color: var(--tf-red); } .mc-sl-head b { font-size: 11.5px; flex: 1; } .mc-sl-cd { font-size: 9.5px; color: var(--text-muted); } .mc-sl-cd.hot { color: var(--tf-red); } .mc-sl-body { padding: 10px; display: flex; flex-direction: column; gap: 9px; } .mc-tile { border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; position: relative; overflow: hidden; } .mc-tile.late { border-color: color-mix(in srgb, #ff3b3b 40%, var(--border)); } .mc-tile.late::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 2px; background: #ff3b3b; box-shadow: 0 0 10px #ff3b3b; } .mc-ti { font-size: 12px; font-weight: 800; line-height: 1.55; } .mc-who { display: flex; align-items: center; gap: 7px; font-size: 11px; } .mc-who i { width: 7px; height: 7px; border-radius: 50%; background: var(--wc); box-shadow: 0 0 7px var(--wc); animation: rqmPulse 2s steps(2) infinite; flex: 0 0 auto; } .mc-who.idle i { animation: none; opacity: .45; box-shadow: none; } .mc-ago { font-size: 9px; color: var(--text-muted); } .mc-prog { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--text-muted); } .mc-bar { flex: 1; height: 4px; border-radius: 4px; background: var(--surface); overflow: hidden; } .mc-bar i { display: block; height: 100%; background: var(--wc, var(--accent)); border-radius: 4px; box-shadow: 0 0 7px var(--wc, var(--accent)); } .mc-acts { display: flex; gap: 6px; } .mc-acts button { font-size: 10.5px; font-weight: 800; padding: 5px 11px; border-radius: 8px; border: 1px solid var(--border); background: none; color: var(--text-muted); cursor: pointer; font-family: inherit; transition: .13s; } .mc-acts button:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .mc-feed { border-inline-start: 1px solid var(--border); background: color-mix(in srgb, #000 12%, var(--surface)); display: flex; flex-direction: column; min-height: 0; } .mc-fh { font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 3px; color: color-mix(in srgb, var(--text) 80%, transparent); font-weight: 700; padding: 14px 15px 8px; display: flex; align-items: center; gap: 8px; } .mc-fh i { width: 6px; height: 6px; border-radius: 50%; background: #30c87a; box-shadow: 0 0 7px #30c87a; animation: rqmPulse 2s steps(2) infinite; } .mc-flist { flex: 1; overflow: auto; padding: 4px 15px 14px; display: flex; flex-direction: column; gap: 11px; } .mc-fit { display: flex; gap: 9px; font-size: 11.5px; line-height: 1.7; color: var(--text); } .mc-fdot { width: 8px; height: 8px; border-radius: 50%; background: var(--fc, var(--accent)); flex: 0 0 auto; margin-top: 6px; box-shadow: 0 0 6px color-mix(in srgb, var(--fc, var(--accent)) 60%, transparent); } .mc-ftm { display: block; font-size: 9px; color: var(--text-muted); } .ops-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; } .ops-mont { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #05070d; cursor: pointer; transition: .18s; position: relative; } .ops-mont:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 16px 34px -16px color-mix(in srgb, var(--accent) 30%, #000); } .ops-mt-screen { min-height: 118px; padding: 13px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; position: relative; background: radial-gradient(120% 130% at 50% 0%, color-mix(in srgb, var(--tc) 14%, #070a12), #05070d); } .ops-mt-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.012) 2px 3px); } .ops-mt-ty { font-size: 8px; letter-spacing: 2.5px; color: color-mix(in srgb, var(--tc) 75%, #fff); } .ops-mt-ti { font-size: 12.5px; font-weight: 800; line-height: 1.55; color: #e8ecf5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ops-mt-umd { display: flex; align-items: center; gap: 9px; padding: 8px 12px; background: color-mix(in srgb, #000 20%, var(--surface)); border-top: 1px solid var(--border); } .ops-mt-tally { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--tc); box-shadow: 0 0 9px var(--tc); } .ops-mont.late .ops-mt-tally { background: #ff3b3b; box-shadow: 0 0 10px #ff3b3b; animation: rqmPulse 1.2s steps(2) infinite; } .ops-mt-st { font-size: 10px; font-weight: 800; color: var(--text-muted); flex: 1; } .ops-mt-tm { font-size: 12px; color: var(--text); } .ops-mont.late .ops-mt-tm { color: var(--tf-red); } .ops-mt-late { position: absolute; top: 9px; inset-inline-start: 9px; z-index: 2; font-size: 7.5px; letter-spacing: 1.5px; color: var(--tf-red); border: 1px solid color-mix(in srgb, #ff3b3b 45%, transparent); border-radius: 999px; padding: 2px 8px; background: color-mix(in srgb, #ff3b3b 14%, #0008); } @media (max-width: 860px) { .mc-grid { grid-template-columns: 1fr; } .mc-feed { display: none; } .ops-wall { grid-template-columns: 1fr 1fr; } .ops-mc { padding: 8px; } } @media (max-width: 560px) { .ops-wall { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════ v233 — منتقي التاريخ TakeFlow · أجندة لوحتي · مؤشرات الزملاء ═══════════════════════════════════════════════ */ input[type="datetime-local"] { cursor: pointer; caret-color: transparent; } input[type="datetime-local"]::-webkit-calendar-picker-indicator { display: none; } /* v359: CSS منتقي v233 (tf-dtp/tfdtp-*) انشال مع الكود الميت من ui.js — المنتقي الوحيد صار #tf-datepick (v296) */ .nb-agenda { display: flex; flex-direction: column; gap: 13px; max-width: 720px; margin: 0 auto; padding: 4px 2px 20px; } .nb-ag-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .nb-ag-head b { font-size: 15px; } .nb-ag-day { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; } .nb-ag-day.today { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); } .nb-ag-dh { display: flex; align-items: center; gap: 9px; padding: 9px 14px; background: color-mix(in srgb, #000 7%, var(--surface)); border-bottom: 1px solid var(--border); } .nb-ag-day.today .nb-ag-dh b { color: var(--accent-fg); } .nb-ag-dh b { font-size: 12.5px; } .nb-ag-n { font-family: 'Share Tech Mono', monospace; font-size: 10px; color: var(--accent-fg); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 7px; padding: 1px 8px; } .nb-ag-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 14px; border: none; background: none; color: var(--text); font-family: inherit; text-align: start; cursor: pointer; border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent); transition: .12s; } .nb-ag-row:first-of-type { border-top: none; } .nb-ag-row:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); } .nb-ag-t { font-family: 'Share Tech Mono', monospace; font-size: 11.5px; color: var(--accent-fg); width: 42px; flex: 0 0 auto; } .nb-ag-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--nc, var(--accent)); flex: 0 0 auto; box-shadow: 0 0 7px color-mix(in srgb, var(--nc, var(--accent)) 55%, transparent); } .nb-ag-ti { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nb-ag-k { font-size: 12px; opacity: .8; } .nb-ag-empty { padding: 26px; text-align: center; color: var(--text-muted); font-size: 12.5px; border: 1px dashed var(--border); border-radius: 14px; } .nb-ag-past .nb-ag-ph { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 14px; background: none; color: var(--text-muted); font-family: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; } .nb-ag-cr { margin-inline-start: auto; font-size: 10px; transition: transform .25s; } .nb-ag-past.open .nb-ag-cr { transform: rotate(180deg); } .nb-ag-pb { display: none; flex-direction: column; gap: 13px; margin-top: 13px; opacity: .75; } .nb-ag-past.open .nb-ag-pb { display: flex; } .nb-cursor { position: absolute; top: 0; left: 0; z-index: 5; pointer-events: none; display: flex; align-items: center; gap: 5px; transition: transform .12s linear; } .nb-cur-dot { width: 11px; height: 11px; border-radius: 50% 50% 50% 0; background: var(--cc, var(--accent)); box-shadow: 0 0 9px color-mix(in srgb, var(--cc, var(--accent)) 60%, transparent); transform: rotate(-45deg); } .nb-cur-name { font-size: 10px; font-weight: 800; color: var(--accent-ink, #0a0e1a); background: var(--cc, var(--accent)); border-radius: 999px; padding: 1px 8px; white-space: nowrap; box-shadow: 0 3px 9px -3px #0009; } /* ═══════════════════════════════════════════════ v234 — قابلية القراءة بكل الثيمات: الأحمر متكيّف مع لون النص (غامق عالثيمات الفاتحة، فاتح عالغامقة) — تدقيق شامل ═══════════════════════════════════════════════ */ :root { --tf-red: color-mix(in srgb, #ff3b3b 74%, var(--text)); } /* ═══════════════════════════════════════════════ v236 — المراحل ١→٥: النطاق · الكرو كول · البريد · المساعد · الحارس ═══════════════════════════════════════════════ */ .cc-wrap { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; } .cc-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 900; flex: 0 0 auto; background: var(--surface2); color: var(--accent-fg); border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent); } .cc-av.sm { width: 22px; height: 22px; font-size: 9.5px; border-color: color-mix(in srgb, var(--sc, var(--accent)) 55%, transparent); color: var(--sc, var(--accent)); } .cc-mine { display: flex; align-items: center; gap: 13px; padding: 13px 16px; border-radius: 15px; flex-wrap: wrap; border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent); position: relative; overflow: hidden; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 12%, var(--surface2)), var(--surface2)); } .cc-mine::before { content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); box-shadow: 0 0 14px var(--accent); } .cc-mt { flex: 1; min-width: 165px; } .cc-mt b { display: block; font-size: 13.5px; } .cc-mt span { font-size: 11px; color: var(--text-muted); } .cc-btn { padding: 7px 14px; border-radius: 9px; font-size: 11.5px; font-weight: 800; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: inherit; transition: .13s; } .cc-btn:hover { border-color: var(--accent); } .cc-btn.ai { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--text); /* v552 — الذهبيّ نصّاً على صبغةٍ ذهبيّة كان ٣٫٨ */ background: color-mix(in srgb, var(--accent) 10%, transparent); } .cc-hero { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; } .cc-bar { display: flex; align-items: center; gap: 12px; padding: 9px 15px; flex-wrap: wrap; background: color-mix(in srgb, #000 14%, var(--surface)); border-bottom: 1px solid var(--border); } .cc-t { font-size: 8.5px; letter-spacing: 2.5px; color: var(--text-muted); } .cc-live { display: inline-flex; align-items: center; gap: 6px; font-family: 'Share Tech Mono', monospace; font-size: 8px; letter-spacing: 2px; color: var(--tf-red); } .cc-live i { width: 6px; height: 6px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b; animation: rqmPulse 1.4s steps(2) infinite; } .cc-clock { margin-inline-start: auto; font-size: 13px; } .cc-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 11px; padding: 13px; } .cc-lane { border: 1px solid var(--border); border-radius: 13px; background: var(--surface2); overflow: hidden; border-top: 2px solid color-mix(in srgb, var(--sc) 60%, transparent); } .cc-lane.on { border-color: color-mix(in srgb, var(--sc) 42%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sc) 20%, transparent) inset; } .cc-lh { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border); } .cc-lh b { font-size: 12px; flex: 1; } .cc-tm { font-size: 10px; color: color-mix(in srgb, var(--sc) 85%, var(--text)); } .cc-tally { width: 8px; height: 8px; border-radius: 50%; background: var(--sc); box-shadow: 0 0 8px var(--sc); opacity: .3; } .cc-lane.on .cc-tally { opacity: 1; animation: rqmPulse 2s steps(2) infinite; } .cc-lb { padding: 9px; display: flex; flex-direction: column; gap: 6px; min-height: 52px; } .cc-p { display: flex; align-items: center; gap: 8px; font-size: 11.5px; } .cc-role { font-size: 9.5px; color: var(--text-muted); margin-inline-start: auto; } .cc-gap { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 9px; font-size: 10px; font-weight: 800; color: var(--tf-red); border: 1px dashed color-mix(in srgb, #ff3b3b 45%, transparent); background: color-mix(in srgb, #ff3b3b 7%, transparent); } .gd-wrap { margin-bottom: 14px; } .gd-card { border: 1px solid var(--border); border-radius: 15px; background: var(--surface); overflow: hidden; } .gd-h { width: 100%; display: flex; align-items: center; gap: 13px; padding: 12px 15px; text-align: start; border: none; background: none; color: var(--text); font-family: inherit; cursor: pointer; } .gd-ring { width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; position: relative; background: conic-gradient(var(--gc) calc(var(--p) * 1%), color-mix(in srgb, var(--border) 100%, transparent) 0); } .gd-ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface); } .gd-ring b { position: relative; font-size: 13px; } .gd-t { flex: 1; min-width: 0; } .gd-t b { display: block; font-size: 12.5px; } .gd-t span { font-size: 11px; color: var(--text-muted); } .gd-cov { font-size: 10px; color: var(--text-muted); } .gd-cr { font-size: 10px; color: var(--text-muted); transition: transform .25s; } .gd-wrap.open .gd-cr { transform: rotate(180deg); } .gd-b { max-height: 0; overflow: hidden; transition: max-height .3s; padding: 0 15px; } .gd-wrap.open .gd-b { max-height: 620px; padding-bottom: 14px; } .gd-a { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: 12px; margin-bottom: 8px; border: 1px solid color-mix(in srgb, var(--ac2) 32%, var(--border)); background: color-mix(in srgb, var(--ac2) 6%, transparent); } .gd-ic { font-size: 15px; flex: 0 0 auto; } .gd-ab { flex: 1; min-width: 0; } .gd-ab b { display: block; font-size: 12px; } .gd-ab span { font-size: 10.5px; color: var(--text-muted); } .gd-sev { font-size: 8px; letter-spacing: 2px; color: color-mix(in srgb, var(--ac2) 85%, var(--text)); } .gd-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 10px; } .gd-d { border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); padding: 7px 4px; text-align: center; } .gd-d b { display: block; font-size: 14px; color: var(--accent-fg); } .gd-d span { font-size: 9px; color: var(--text-muted); } .gd-d.zero { border-color: color-mix(in srgb, #ff3b3b 45%, transparent); } .gd-d.zero b { color: var(--tf-red); } .gd-d.thin { border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .mp-wrap { display: flex; flex-direction: column; gap: 10px; margin-bottom: 13px; } .mp-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 9px; } .mp-c { border: 1px solid var(--border); border-radius: 13px; background: var(--surface2); padding: 10px 13px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; transition: .14s; text-align: start; font-family: inherit; color: var(--text); border-top: 2px solid color-mix(in srgb, var(--pc, var(--accent)) 55%, transparent); } .mp-c:hover { border-color: color-mix(in srgb, var(--pc, var(--accent)) 45%, var(--border)); } .mp-c b { font-size: 20px; line-height: 1.15; color: color-mix(in srgb, var(--pc, var(--accent)) 88%, var(--text)); } .mp-c span { font-size: 10px; color: var(--text-muted); font-weight: 700; } .mp-c.ai { --pc: var(--accent); } .mp-c.ai b { font-size: 17px; } .mp-vip { border: 1px solid color-mix(in srgb, #f0b429 35%, transparent); border-radius: 14px; overflow: hidden; background: linear-gradient(150deg, color-mix(in srgb, #f0b429 8%, var(--surface)), var(--surface)); } .mp-vt { display: block; font-size: 8.5px; letter-spacing: 2.5px; padding: 9px 14px 5px; color: #e0a92b; } .mp-vr { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 14px; text-align: start; border: none; background: none; color: var(--text); font-family: inherit; cursor: pointer; border-top: 1px solid color-mix(in srgb, var(--border) 45%, transparent); transition: .13s; } .mp-vr:hover { background: color-mix(in srgb, #f0b429 7%, transparent); } .mp-av { width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 900; flex: 0 0 auto; background: var(--surface2); color: #e0a92b; border: 1.5px solid color-mix(in srgb, #f0b429 50%, transparent); } .mp-vb { flex: 1; min-width: 0; } .mp-vb b { display: block; font-size: 12px; } .mp-vb span { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .mp-new { font-size: 9.5px; font-weight: 800; color: var(--tf-red); flex: 0 0 auto; } .tf-asst { position: fixed; inset: 0; z-index: 240; display: none; padding: 20px; background: color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* v529 — من الثيم */ .tf-asst.open { display: flex; align-items: center; justify-content: center; } .ta-in { width: min(680px, 100%); max-height: 90vh; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--tf-gl, var(--border)); border-radius: 18px; overflow: hidden; box-shadow: inset 0 1px 0 0 var(--tf-ghi, transparent), 0 34px 80px -34px color-mix(in srgb, var(--text) 55%, transparent); } /* v529 */ .ta-h { display: flex; align-items: center; gap: 11px; padding: 12px 15px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); } .ta-orb { width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; flex: 0 0 auto; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--accent) 13%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); animation: rqmPulse 3s ease-in-out infinite; } .ta-t { flex: 1; min-width: 0; } .ta-t b { font-size: 12.5px; } .ta-t span { display: block; font-size: 10.5px; color: var(--text-muted); } .ta-x { font-size: 15px; color: var(--text-muted); padding: 4px 9px; border-radius: 8px; border: none; background: none; cursor: pointer; } .ta-x:hover { color: var(--text); background: var(--surface2); } .ta-b { flex: 1; overflow: auto; padding: 15px; display: flex; flex-direction: column; gap: 12px; min-height: 190px; } .ta-bb { display: flex; gap: 9px; max-width: 92%; } .ta-bb.me { margin-inline-start: auto; flex-direction: row-reverse; } .ta-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; flex: 0 0 auto; background: var(--surface2); border: 1.5px solid color-mix(in srgb, var(--accent) 50%, transparent); } .ta-av.u { font-size: 10px; font-weight: 900; color: var(--accent-fg); border-color: color-mix(in srgb, var(--accent) 50%, transparent); } .ta-bub { border: 1px solid var(--border); border-radius: 13px; background: var(--surface2); padding: 10px 13px; font-size: 12.5px; line-height: 1.95; min-width: 0; } .ta-bb.me .ta-bub { background: color-mix(in srgb, var(--accent) 11%, var(--surface2)); border-color: color-mix(in srgb, var(--accent) 30%, transparent); } .ta-bb.ai .ta-bub { border-color: color-mix(in srgb, var(--accent) 26%, transparent); } .ta-tbl { margin-top: 8px; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; } /* v257 — كان flex بلا min-width عالـspan، فعالتلفون النص بيطفح فوق النص التاني («فضل مرجي» كانت بتفوت بكلمة تانية). صار grid بأعمدة مضبوطة وكسر أسطر آمن. */ .ta-tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) auto; gap: 9px; padding: 7px 10px; font-size: 11.5px; align-items: start; border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent); } .ta-tr:last-child { border-bottom: none; } .ta-tr > * { min-width: 0; overflow-wrap: anywhere; word-break: break-word; line-height: 1.65; } .ta-tr b { font-weight: 800; } .ta-tr span { color: var(--text-muted); } @media (max-width: 620px) { .ta-tr { grid-template-columns: 1fr auto; } .ta-tr b { grid-column: 1 / -1; font-size: 11px; } .ta-tr b:empty { display: none; } } /* ترويسات «رح ينمسح» / «رح ينحطّ» */ .ta-hd { font-size: 9.5px; font-weight: 900; letter-spacing: 1.4px; padding: 6px 10px; border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent); } .ta-hd.del { color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, transparent); } .ta-hd.add { color: var(--success, var(--accent)); background: color-mix(in srgb, var(--success, var(--accent)) 9%, transparent); } .ta-tr.is-del { background: color-mix(in srgb, var(--danger) 5%, transparent); } .ta-tr.is-del span:not(.mono) { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--danger) 65%, transparent); } .ta-do { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; } .ta-do button { padding: 5px 12px; border-radius: 8px; font-size: 10.5px; font-weight: 800; cursor: pointer; font-family: inherit; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent-fg); background: color-mix(in srgb, var(--accent) 8%, transparent); } .ta-do button.p { background: var(--accent); color: var(--tf-accent-ink, #fff); border-color: transparent; font-weight: 900; } .ta-sug { display: flex; gap: 5px; padding: 0 14px 10px; flex-wrap: wrap; } .ta-sug button { padding: 5px 11px; border-radius: 999px; font-size: 10.5px; cursor: pointer; font-family: inherit; border: 1px dashed color-mix(in srgb, var(--accent) 38%, transparent); color: var(--accent-fg); background: none; } .ta-sug button:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); } .ta-f { border-top: 1px solid var(--border); padding: 10px 13px; display: flex; gap: 7px; } .ta-go { padding: 9px 17px; border-radius: 10px; font-size: 11.5px; font-weight: 900; cursor: pointer; font-family: inherit; color: var(--tf-accent-ink, #fff); background: var(--accent); } .ta-go:active { transform: scale(.965); } .ta-manual { padding: 9px 14px 12px; font-size: 10.5px; color: var(--text-muted); text-align: center; } .ta-manual b { color: var(--text); } @media (max-width: 760px) { .cc-lanes { grid-template-columns: 1fr; } .tf-asst { padding: 8px; } .ta-caps { display: none; } .gd-cov { display: none; } } /* ═══════════════════════════════════════════════ v237 — مساعد أوسع · جدول الدوام بلغة النموذج · مركز الدوامات صفحة ═══════════════════════════════════════════════ */ /* ١) نافذة المساعد صارت واسعة ومريحة */ .ta-in { width: min(940px, 100%) !important; max-height: 92vh !important; } .ta-b { min-height: 320px !important; max-height: 52vh; } .ta-bb { max-width: 84% !important; } .ta-bub { font-size: 13px !important; } .ta-mail { margin-top: 9px; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border)); border-radius: 12px; overflow: hidden; background: var(--surface); } .ta-mh { padding: 8px 12px; font-size: 11px; color: var(--text-muted); background: color-mix(in srgb, var(--accent) 8%, transparent); border-bottom: 1px solid var(--border); } .ta-mh b { color: var(--text); } .ta-mb { padding: 11px 13px; font-size: 12.5px; line-height: 1.95; } .ta-mini { padding: 3px 10px; margin: 2px; border-radius: 7px; font-size: 10.5px; font-weight: 800; cursor: pointer; font-family: inherit; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent-fg); background: color-mix(in srgb, var(--accent) 8%, transparent); } /* ٢) خانات جدول الدوام بلغة النموذج: اسم الشيفت فوق ووقتو مونو تحت */ .sched-cell .sc-name, .sched-cell .cellname { font-weight: 800; } .sched-cell .sc-time, .sched-cell .celltime, .sched-cell small { font-family: 'Share Tech Mono', monospace; font-size: 8.5px; opacity: .72; display: block; } .sched-grid td .sched-cell, .sched-cell { border-radius: 9px !important; transition: transform .12s, box-shadow .12s; } .sched-cell:hover { transform: translateY(-1px); } .sched-grid th { letter-spacing: .2px; } /* ٣) مركز الدوامات — صفحة واسعة بدل بوب أب */ .write-modal-overlay.sc-fullpage { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; } .sc-fullpage .sc-modal { width: 100% !important; max-width: 100% !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; display: flex; flex-direction: column; } .sc-fullpage .mlc-body { flex: 1; max-height: none !important; } .sc-head { position: relative; } .sc-back { border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-family: inherit; font-size: 12px; font-weight: 800; padding: 7px 15px; border-radius: 9px; cursor: pointer; margin-inline-end: 12px; transition: .14s; } .sc-back:hover { border-color: var(--accent); color: var(--accent-fg); } .sc-fullpage .sc-tabs { padding-inline: 18px; } @media (max-width: 760px) { .ta-in { width: 100% !important; max-height: 96vh !important; } .ta-b { max-height: 46vh; } .sc-back { padding: 6px 11px; font-size: 11px; } } /* ═══════════════════════════════════════════════ v238 — خانة الجدول بلغة النموذج · بطاقة الشخص · أزرار البحث ═══════════════════════════════════════════════ */ .cell-shift-label { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.35; } .cell-shift-label .cs-name { font-weight: 800; font-size: 12px; } .cell-shift-label .cs-time { font-family: 'Share Tech Mono', monospace; font-size: 8.5px; opacity: .72; letter-spacing: .3px; } .sched-cell { border-radius: 9px !important; } .sched-cell.editable:hover { transform: translateY(-1px); } .schs-acts { display: inline-flex; gap: 4px; margin-inline-start: auto; } .schs-act { border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted); border-radius: 8px; padding: 3px 9px; font-size: 11px; cursor: pointer; transition: .13s; font-family: inherit; } .schs-act:hover { color: var(--accent-fg); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); } .scb-ov { position: fixed; inset: 0; z-index: 10900; display: none; padding: 20px; background: color-mix(in srgb, #000 58%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .scb-ov.open { display: flex; align-items: center; justify-content: center; } .scb-in { width: min(480px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px -25px #000; } .scb-h { display: flex; align-items: center; gap: 11px; padding: 13px 16px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); } .scb-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 900; flex: 0 0 auto; background: var(--surface2); color: var(--accent-fg); border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent); } .scb-t { flex: 1; min-width: 0; } .scb-t b { display: block; font-size: 13.5px; } .scb-t span { font-size: 10.5px; color: var(--text-muted); } .scb-x { border: none; background: none; color: var(--text-muted); font-size: 15px; cursor: pointer; padding: 4px 8px; border-radius: 8px; } .scb-x:hover { color: var(--text); background: var(--surface2); } .scb-b { padding: 14px 16px; } .scb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; } .scb-c { border: 1px solid var(--border); border-radius: 11px; background: var(--surface2); padding: 9px 6px; text-align: center; } .scb-c b { display: block; font-size: 17px; color: var(--accent-fg); } .scb-c span { font-size: 9.5px; color: var(--text-muted); font-weight: 700; } .scb-days { display: flex; flex-wrap: wrap; gap: 6px; } .scb-d { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); } .scb-d b { font-size: 11px; } .scb-d span { font-size: 9.5px; color: var(--text-muted); } .scb-none { font-size: 11.5px; color: var(--text-muted); } .scb-f { display: flex; gap: 7px; padding: 12px 16px; border-top: 1px solid var(--border); flex-wrap: wrap; } .scb-btn { flex: 1; min-width: 110px; padding: 9px; border-radius: 10px; font-size: 11.5px; font-weight: 800; cursor: pointer; font-family: inherit; border: 1px solid var(--border); background: none; color: var(--text-muted); transition: .13s; } .scb-btn:hover { color: var(--text); } .scb-btn.p { background: var(--accent); color: var(--accent-ink, #0a0e1a); border-color: transparent; font-weight: 900; box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 55%, #000); } @media (max-width: 560px) { .scb-grid { grid-template-columns: 1fr 1fr; } } /* ═══════════════════════════════════════════════ v239 — إضافات مركز الدوامات: شريط الأدوات · التنبيهات · المقارنة ═══════════════════════════════════════════════ */ .scq-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 13px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); } .scq-i { font-size: 11.5px; color: var(--text-muted); margin-inline-end: auto; } .scq-i b { color: var(--accent-fg); font-family: 'Share Tech Mono', monospace; } .scq-b { padding: 6px 13px; border-radius: 9px; font-size: 11.5px; font-weight: 800; cursor: pointer; font-family: inherit; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); transition: .13s; } .scq-b:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .scq-b.p { background: var(--accent); color: var(--accent-ink, #0a0e1a); border-color: transparent; font-weight: 900; box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 55%, #000); } .scs-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .scs-flag.hot { color: var(--tf-red); border: 1px solid color-mix(in srgb, #ff3b3b 40%, transparent); background: color-mix(in srgb, #ff3b3b 9%, transparent); } .scs-flag.warm { color: var(--accent-fg); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent); } .scc-list { display: flex; flex-direction: column; gap: 8px; } .scc-row { display: flex; align-items: center; gap: 10px; font-size: 12px; } .scc-n { width: 132px; flex: 0 0 auto; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .scc-n small { display: block; font-size: 9.5px; color: var(--text-muted); font-weight: 600; } .scc-bar { flex: 1; height: 9px; border-radius: 6px; background: var(--surface2); overflow: hidden; border: 1px solid var(--border); } .scc-bar i { display: block; height: 100%; border-radius: 6px; background: var(--accent); box-shadow: 0 0 9px color-mix(in srgb, var(--accent) 55%, transparent); transition: width .4s; } .scc-v { width: 38px; text-align: center; flex: 0 0 auto; color: var(--accent-fg); font-size: 11.5px; } .scc-x { width: 82px; flex: 0 0 auto; font-size: 10px; color: var(--text-muted); text-align: end; } @media (max-width: 560px) { .scc-n { width: 92px; } .scc-x { display: none; } } /* ═══════════════════════════════════════════════ v240 — بوكسات الجدول · نوت واضحة · عدّاد · عمودين · موبايل · وضوح شامل ═══════════════════════════════════════════════ */ /* ١) الجدول: بوكسات عائمة بلا خطوط قفص */ .sched-table { border-collapse: separate !important; border-spacing: 5px !important; } .sched-table th, .sched-table td { border: none !important; } .sched-table th { background: transparent !important; padding: 6px 4px !important; } .sched-table th.sched-today-col, .sched-table th.sched-holiday-col { background: color-mix(in srgb, var(--accent) 9%, transparent) !important; border-radius: 12px; } .sched-cell { border: 1px solid color-mix(in srgb, currentColor 26%, transparent) !important; border-radius: 11px !important; box-shadow: 0 2px 8px -5px #0007; padding: 7px 5px !important; } .sched-cell.editable:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -7px #0009; filter: brightness(1.08); } .sched-name-col, .sched-table td:first-child { background: color-mix(in srgb, #000 8%, var(--surface)) !important; border-radius: 11px !important; } /* ٢) النوت — الخيار (ج): حافة ملونة + نص مصغّر واضح */ .sched-cell.has-note { position: relative; } .sched-cell.has-note::before { content: ''; position: absolute; inset-inline-start: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 4px; background: var(--nclr, var(--accent)); box-shadow: 0 0 9px color-mix(in srgb, var(--nclr, var(--accent)) 65%, transparent); } .cell-notes { margin-top: 5px; display: flex; flex-direction: column; gap: 3px; } .cell-note-pin { font-size: 10px !important; font-weight: 800 !important; line-height: 1.5; padding: 3px 8px !important; border-radius: 7px !important; border-width: 1px !important; border-style: solid; color: var(--text) !important; text-align: start; } .cell-note-pin:hover { filter: brightness(1.2); } /* ٣) عدّاد اليوم أوضح */ .sched-cov { display: inline-flex !important; align-items: center; gap: 5px; margin-top: 4px; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); border: 1px solid var(--border); } .sched-cov .cov-ic { font-size: 10px; opacity: .9; } .sched-cov .cov-n { font-family: 'Share Tech Mono', monospace; font-size: 14px; font-weight: 400; color: var(--accent-fg); line-height: 1; } .sched-cov.cov-none { border-color: color-mix(in srgb, #ff3b3b 45%, transparent); background: color-mix(in srgb, #ff3b3b 12%, transparent); } .sched-cov.cov-none .cov-n { color: var(--tf-red); } .sched-cov.cov-low { border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .sched-daynum { font-size: 17px !important; font-weight: 900; line-height: 1.2; } /* ٤) تقسيم الصفحة عمودين */ .sched-split { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; } .sched-aside { display: flex; flex-direction: column; gap: 12px; order: 2; position: sticky; top: 12px; } .sched-main { order: 1; min-width: 0; } .sched-aside-late { order: 3; grid-column: 2; } .sched-aside .cc-lanes { grid-template-columns: 1fr !important; } .sched-aside .cc-mine { flex-direction: column; align-items: stretch; text-align: start; } .sched-aside .cc-mine .cc-btn { width: 100%; } @media (max-width: 1100px) { .sched-split { grid-template-columns: 1fr; } .sched-aside, .sched-main, .sched-aside-late { order: initial; position: static; grid-column: auto; } .sched-aside .cc-lanes { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; } .sched-aside .cc-mine { flex-direction: row; align-items: center; } .sched-aside .cc-mine .cc-btn { width: auto; } } /* ٥) وضوح شامل — النصوص الباهتة ترتفع لحد مقروء */ .cc-btn { color: var(--text) !important; font-weight: 800; } .cc-btn.ai { color: color-mix(in srgb, var(--accent-fg) 40%, var(--text)) !important; /* v552 — ٥٥٪ ذهبيّ كان ٣٫٨ على الفاتح */ border-color: color-mix(in srgb, var(--accent) 55%, transparent) !important; background: color-mix(in srgb, var(--accent) 14%, transparent) !important; } .cc-role, .cc-t, .ops-tt, .mp-vb span, .scb-t span, .ta-t span { color: color-mix(in srgb, var(--text) 62%, transparent) !important; } .cc-mt span, .rqm-cell span, .ops-cell span, .mp-c span { color: color-mix(in srgb, var(--text) 66%, transparent) !important; } .ta-cap { color: color-mix(in srgb, var(--text) 72%, transparent) !important; } .schs-act, .scq-b { color: color-mix(in srgb, var(--text) 70%, transparent) !important; } /* ٦) الموبايل — إصلاح شامل */ @media (max-width: 760px) { .sched-split { gap: 12px; } .sched-aside .cc-lanes { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 9px; padding-bottom: 4px; } .sched-aside .cc-lane { flex: 0 0 82%; scroll-snap-align: start; } .cc-mine { flex-direction: column; align-items: stretch; } .cc-mine .cc-btn { width: 100%; } .cc-bar { gap: 8px; } .cc-clock { margin-inline-start: 0; } .sched-cov .cov-n { font-size: 12px; } .sched-daynum { font-size: 15px !important; } .sched-table { border-spacing: 4px !important; } .cell-note-pin { font-size: 9px !important; padding: 2px 6px !important; } .ta-caps { display: flex !important; overflow-x: auto; flex-wrap: nowrap; } .ta-cap { flex: 0 0 auto; } .mp-cells { grid-template-columns: 1fr 1fr; } } /* الموبايل بالعرض (landscape): ارتفاع قليل → ترويسات أنحف */ @media (max-height: 520px) and (orientation: landscape) { .form-header { margin-bottom: 8px !important; } .form-header h1 { font-size: 17px !important; } .form-header p { display: none; } .cc-hero, .cc-mine { margin-bottom: 6px; } .ta-in { max-height: 98vh !important; } .ta-b { min-height: 120px !important; max-height: 38vh; } .ta-caps, .ta-manual { display: none !important; } .sc-fullpage .sc-modal { height: 100vh !important; } } /* منع أي طفح أفقي عالموبايل */ @media (max-width: 900px) { .sched-grid-wrap, .sched-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .mail-shell, .mail2, .mail-d { max-width: 100%; } .scq-bar { gap: 6px; } .scq-b { flex: 1; min-width: 46%; } } /* ═══════════════════════════════════════════════ v241 — تقسيم صحيح: الأقسام والتاريخ فوق الجدول · «دوام اليوم» جانبي · بلا قصّ ═══════════════════════════════════════════════ */ .sched-split { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; } .sched-main { order: 1; min-width: 0; } .sched-aside { order: 2; position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 24px); overflow-y: auto; overflow-x: hidden; padding-inline-end: 2px; } .sched-aside-late { order: 3; grid-column: 2; } .sched-aside::-webkit-scrollbar { width: 5px; } .sched-aside::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 4px; } /* العمود الجانبي: كل شي بينزل عمودي وبلا قصّ */ .sched-aside .cc-lanes { grid-template-columns: 1fr !important; } .sched-aside .cc-mine { flex-direction: column; align-items: stretch; } .sched-aside .cc-mine .cc-btn { width: 100%; } .sched-aside .cc-hero, .sched-aside .cc-mine, .sched-aside .sched-today { width: 100%; } /* «دوام اليوم» كان بيقصّ محتواه — صار بيلفّ وبيتمدد */ .sched-today { overflow: visible !important; } .sched-today .std-list, .sched-today > div { flex-wrap: wrap !important; overflow: visible !important; } .sched-today [style*="overflow"] { overflow: visible !important; } .sched-aside .sched-today { max-height: none; } /* الجدول صار أعرض وواخد راحتو */ .sched-main .sched-table { width: 100%; } .sched-main .sched-table-wrap, .sched-main .sched-grid-wrap { overflow-x: auto; } /* الأقسام والتاريخ والتصدير فوق الجدول — بسطر مرتب */ .sched-main .sched-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; } .sched-main .sched-dept-tabs { flex: 1 1 100%; } .sched-main .sched-week-nav { margin-inline-end: auto; } .sched-main .sched-tools-row { margin-inline-start: auto; } @media (max-width: 1180px) { .sched-split { grid-template-columns: 1fr; } .sched-aside, .sched-main, .sched-aside-late { position: static; order: initial; grid-column: auto; max-height: none; overflow: visible; } .sched-aside .cc-lanes { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; } .sched-aside .cc-mine { flex-direction: row; align-items: center; } .sched-aside .cc-mine .cc-btn { width: auto; } .sched-main .sched-controls { margin-bottom: 10px; } } /* ═══════════════════════════════════════════════ v242 — الجدول عريض بلا سحب · حمل الأسبوع تحت · بلا تراكب ═══════════════════════════════════════════════ */ .sched-split { grid-template-columns: 1fr 270px; } .sched-weekstats { margin-top: 14px; } /* الجدول: أعمدة متساوية تتقلّص لتوسع الأسبوع كلو — بلا سكرول أفقي */ .sched-main .sched-table { table-layout: fixed; width: 100%; min-width: 0 !important; } .sched-main .sched-table th.sched-name-col, .sched-main .sched-table td:first-child { width: 118px; } .sched-main .sched-table th:not(.sched-name-col) { width: auto; } .sched-main .sched-cell { padding: 6px 3px !important; } .sched-main .cell-shift-label .cs-name { font-size: 11px; } .sched-main .cell-shift-label .cs-time { font-size: 8px; } .sched-main .cell-note-pin { font-size: 8.5px !important; padding: 2px 5px !important; } .sched-main .sched-table-wrap, .sched-main .sched-grid-wrap { overflow-x: visible; } .sched-main .sched-daynum { font-size: 15px !important; } .sched-main .sched-cov { padding: 1px 7px; } .sched-main .sched-cov .cov-n { font-size: 12px; } .sched-main .cell-task-btn, .sched-main .cell-task-badge { transform: scale(.85); } /* الجانبي: بلا تراكب أبداً */ .sched-aside { z-index: 1; } .sched-aside > * { flex: 0 0 auto; } .sched-today { position: relative; z-index: 2; } @media (max-width: 1300px) { .sched-main .sched-table { table-layout: auto; } .sched-main .sched-table-wrap, .sched-main .sched-grid-wrap { overflow-x: auto; } } @media (max-width: 1180px) { .sched-split { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════ v243 — أزرار اختيار الأشخاص · شريط السلة ═══════════════════════════════════════════════ */ .ta-people { gap: 7px !important; } .ta-people button { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 13px !important; line-height: 1.4; } .ta-people button small { font-size: 9px; opacity: .72; font-weight: 600; } .mtrash-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px; border-radius: 12px; font-size: 12px; font-weight: 700; border: 1px solid color-mix(in srgb, #ff3b3b 32%, var(--border)); background: color-mix(in srgb, #ff3b3b 7%, transparent); } .mtrash-btn { margin-inline-start: auto; padding: 7px 15px; border-radius: 9px; font-size: 11.5px; font-weight: 900; cursor: pointer; font-family: inherit; color: #fff; border: none; background: color-mix(in srgb, #ff3b3b 85%, #000); box-shadow: 0 3px 0 color-mix(in srgb, #ff3b3b 55%, #000); } .mtrash-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, #ff3b3b 55%, #000); } /* ═══════════════════════════════════════════════ v244 — أسماء ما بتطلع برا · أيقونات واضحة · نطاق المساعد · الحد الأدنى ═══════════════════════════════════════════════ */ /* ١) عمود الأسماء: أوسع والاسم بيلفّ جوّا الخانة */ .sched-main .sched-table th.sched-name-col, .sched-main .sched-table td:first-child { width: 158px; } .sched-table td:first-child, .sched-name-col { white-space: normal !important; overflow: hidden; word-break: break-word; line-height: 1.45; } .sched-table td:first-child > * { max-width: 100%; } .sched-table td:first-child .sm-name, .sched-table td:first-child span { overflow-wrap: anywhere; } /* ٢) أيقونات المهام والنوت — واضحة مش باهتة */ .cell-task-btn, .cell-task-badge { opacity: 1 !important; transform: none !important; background: color-mix(in srgb, var(--accent) 16%, transparent) !important; border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent) !important; border-radius: 7px !important; padding: 1px 5px !important; font-size: 11px !important; color: var(--text) !important; } .cell-task-btn:hover { background: color-mix(in srgb, var(--accent) 30%, transparent) !important; } .cell-task-count { background: var(--accent) !important; color: var(--accent-ink, #0a0e1a) !important; font-weight: 900; font-size: 9px !important; border-radius: 999px; padding: 0 4px; } .sched-main .cell-note-pin { font-size: 10px !important; padding: 3px 7px !important; font-weight: 800 !important; border-width: 1.5px !important; } .sched-cell.has-note::before { width: 5px; } /* ٣) العدّاد مع الحد الأدنى */ .sched-cov .cov-min { font-family: 'Share Tech Mono', monospace; font-size: 10px; color: color-mix(in srgb, var(--text) 55%, transparent); } .sched-cov.cov-low { background: color-mix(in srgb, var(--accent) 14%, transparent); } .sched-cov.cov-low .cov-n { color: var(--accent-fg); } /* ٤) شريط نطاق المساعد — واضح بدل الشيبس الباهتة */ .ta-scope { padding: 10px 15px; font-size: 11.5px; line-height: 1.85; border-bottom: 1px solid var(--border); color: color-mix(in srgb, var(--text) 82%, transparent); background: color-mix(in srgb, var(--accent) 6%, transparent); } .ta-scope b { color: var(--accent-fg); font-weight: 900; } /* البنفسجي كلّو أوضح */ .ta-do button, .ta-sug button, .ta-mini { color: var(--accent-fg) !important; font-weight: 800 !important; border-color: color-mix(in srgb, var(--accent) 55%, transparent) !important; } .ta-do button.p { color: var(--tf-accent-ink, #fff) !important; background: var(--accent) !important; } .ta-people button { background: color-mix(in srgb, var(--accent) 12%, transparent) !important; } .ta-people button small { color: color-mix(in srgb, var(--accent) 82%, var(--text)) !important; opacity: 1; } .ta-bub { color: var(--text) !important; } .ta-tr span { color: color-mix(in srgb, var(--text) 78%, transparent) !important; } /* ٥) مودال الحد الأدنى */ .ms-list { display: flex; flex-direction: column; gap: 7px; } .ms-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface2); } .ms-n { flex: 1; font-size: 12.5px; font-weight: 800; } .ms-ctl { display: inline-flex; align-items: center; gap: 8px; } .ms-ctl button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 15px; font-weight: 900; cursor: pointer; } .ms-ctl button:hover { border-color: var(--accent); color: var(--accent-fg); } .ms-ctl b { min-width: 26px; text-align: center; font-size: 16px; color: var(--accent-fg); } .ms-hint { margin-top: 12px; font-size: 11px; color: var(--text-muted); line-height: 1.8; } /* ═══════════════════════════════════════════════ v245 — دوام اليوم فوق · أيقونة المهام ما بتركب عالنص ═══════════════════════════════════════════════ */ .sched-today-top { margin-bottom: 14px; width: 100%; } .sched-aside:empty { display: none; } .sched-split:has(.sched-aside:empty) { grid-template-columns: 1fr; } /* v247 — الإصلاح الصحيح: الخانة تبقى خانة جدول، والتخطيط بغلاف داخلي */ .sched-cell { display: table-cell !important; position: relative; vertical-align: middle; padding: 6px 5px !important; } .cell-in { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; } .cell-in .cell-task-btn, .cell-in .cell-task-badge { position: static !important; order: -1; align-self: flex-end; flex: 0 0 auto; display: inline-flex !important; align-items: center; gap: 3px; line-height: 1 !important; } .cell-in .cell-shift-label { order: 0; flex: 0 0 auto; } .cell-in .cell-tasks, .cell-in .cell-task-list { order: 1; } .cell-in .cell-notes { order: 2; margin-top: 0; } .cell-task-count { position: static !important; margin-inline-start: 2px; } /* شريط النطاق: سطر واحد مرتب بلا كسر */ .ta-scope { display: block; white-space: normal; } /* v246 — حمل الأسبوع: أسماء ما بتتلخبط + وضوح */ .sws-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; color: var(--text) !important; } .sws-chip { gap: 7px !important; } .sws-count { font-family: 'Share Tech Mono', monospace; color: var(--accent-fg) !important; font-weight: 400; } /* v247 — إدارة محادثات المساعد: أُزيلت في v529 — العمود الجانبيّ .ta-side/.ta-chat في كتلة v529 */ /* ═══════════════════════════════════════════════ v248 — بوكس المحادثة أوسع · حقل متعدد الأسطر ═══════════════════════════════════════════════ */ .ta-b { min-height: 420px !important; max-height: 62vh !important; } .ta-in { max-height: 94vh !important; } .ta-f { align-items: flex-end; } .ta-f textarea { flex: 1; min-width: 0; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-family: inherit; font-size: 12.5px; line-height: 1.7; padding: 10px 14px; outline: none; resize: none; max-height: 140px; overflow-y: auto; } .ta-f textarea:focus { border-color: color-mix(in srgb, var(--accent) 55%, transparent); } .ta-go { align-self: flex-end; } @media (max-height: 700px) { .ta-b { min-height: 260px !important; max-height: 46vh !important; } } @media (max-width: 760px) { .ta-b { min-height: 300px !important; max-height: 52vh !important; } } /* v249 — لوحة محادثات المساعد (بوب أب): أُزيلت في v529 — المحادثات صارت عموداً داخل النافذة (.ta-side) */ /* ═══════════════════════════════════════════════ v250 — إنذار التغطية · التفضيلات · المايك ═══════════════════════════════════════════════ */ .sched-staff-alert { margin-bottom: 12px; } .pf-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); } .pf-row b { min-width: 108px; font-size: 12.5px; } .pf-notes { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; } .pf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent); } .pf-chip button { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 10px; padding: 0; } .pf-chip button:hover { color: var(--tf-red); } .pf-add { display: flex; gap: 6px; margin-top: 12px; } .pf-add input { flex: 1; min-width: 0; background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-family: inherit; font-size: 12px; padding: 8px 12px; outline: none; } .pf-add button { padding: 8px 14px; border-radius: 9px; border: none; cursor: pointer; font-size: 13px; color: var(--tf-accent-ink, #fff); background: var(--accent); font-weight: 900; } .ta-mic { flex: 0 0 auto; align-self: flex-end; width: 42px; height: 40px; border-radius: 11px; cursor: pointer; border: 1px solid var(--border); background: var(--surface2); font-size: 15px; transition: .15s; } .ta-mic:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); } .ta-mic.rec { background: color-mix(in srgb, var(--danger) 22%, transparent); border-color: color-mix(in srgb, var(--danger) 60%, transparent); animation: rqmPulse 1.1s steps(2) infinite; } /* ═══════════════════════════════════════════════ v251 — إنذار التغطية: سطر واحد + بوب أب ذكي ═══════════════════════════════════════════════ */ .sa-slim { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 12px; font-size: 12px; flex-wrap: wrap; } .sa-slim.ok { border: 1px solid color-mix(in srgb, #30c87a 28%, var(--border)); background: color-mix(in srgb, #30c87a 6%, transparent); color: color-mix(in srgb, var(--text) 85%, transparent); } .sa-slim.warn { border: 1px solid color-mix(in srgb, #ff3b3b 34%, var(--border)); background: color-mix(in srgb, #ff3b3b 6%, transparent); } .sa-s-ic { font-size: 15px; } .sa-s-t { flex: 1; min-width: 0; font-weight: 700; } .sa-s-t b { color: var(--accent-fg); } .sa-s-sub { display: block; font-size: 10.5px; font-weight: 500; color: color-mix(in srgb, var(--text) 60%, transparent); } .sa-s-btn { padding: 7px 15px; border-radius: 9px; font-size: 11.5px; font-weight: 900; cursor: pointer; font-family: inherit; color: var(--accent-ink, #0a0e1a); background: var(--accent); border: none; box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 55%, #000); } .sa-s-btn:active { transform: translateY(2px); box-shadow: none; } .sa-s-min { width: 34px; height: 32px; border-radius: 9px; cursor: pointer; font-size: 13px; border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted); } .sa-s-min:hover { color: var(--accent-fg); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .sf-day { border: 1px solid var(--border); border-radius: 13px; background: var(--surface2); padding: 11px 13px; margin-bottom: 9px; } .sf-h { display: flex; align-items: baseline; gap: 9px; margin-bottom: 9px; flex-wrap: wrap; } .sf-h b { font-size: 12.5px; } .sf-h .mono { font-size: 10.5px; color: var(--text-muted); } .sf-cnt { font-size: 13px !important; color: var(--tf-red) !important; font-weight: 700; } .sf-need { font-size: 10.5px; color: color-mix(in srgb, var(--text) 62%, transparent); margin-inline-start: auto; } .sf-cands { display: flex; gap: 6px; flex-wrap: wrap; } .sf-c { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 7px 12px; border-radius: 10px; cursor: pointer; font-family: inherit; text-align: start; transition: .13s; border: 1px solid var(--border); background: var(--surface); color: var(--text); } .sf-c:hover { transform: translateY(-1px); } .sf-c.free { border-color: color-mix(in srgb, #30c87a 45%, transparent); background: color-mix(in srgb, #30c87a 9%, transparent); } .sf-c.off { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); } .sf-c.leave, .sf-c.holiday { opacity: .62; } .sf-nm { font-size: 12px; font-weight: 800; } .sf-meta { display: inline-flex; gap: 7px; font-size: 9.5px; color: color-mix(in srgb, var(--text) 62%, transparent); } .sf-c.free .sf-st { color: #4dbd7c; font-weight: 800; } /* v252 — أزرار ترويسة المساعد بنص واضح */ .ta-hbtn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 9px; font-size: 11.5px; font-weight: 800; cursor: pointer; font-family: inherit; transition: .14s; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-fg); } .ta-hbtn:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: var(--accent); } .ta-hbtn span { font-size: 11px; } @media (max-width: 560px) { .ta-hbtn span { display: none; } .ta-hbtn { padding: 6px 9px; } } /* ═══════════════════════════════════════════════ v253 — «مكتب البريد»: مسارات ذكية · لوحة السياق · تعليقات داخلية ═══════════════════════════════════════════════ */ .ml-lanes { display: flex; flex-direction: column; gap: 3px; margin-bottom: 4px; } .ml-lh { font-size: 8px; letter-spacing: 2.5px; color: var(--text-muted); padding: 4px 11px 6px; } .ml-lane { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 9px; font-size: 11.5px; font-weight: 700; text-align: start; transition: .13s; border: 1px solid transparent; background: none; color: color-mix(in srgb, var(--text) 76%, transparent); cursor: pointer; font-family: inherit; } .ml-lane:hover { background: var(--surface2); color: var(--text); } .ml-lane.on { color: var(--text); border-color: color-mix(in srgb, var(--lc) 50%, transparent); background: color-mix(in srgb, var(--lc) 12%, transparent); } .ml-ic { font-size: 13px; } .ml-n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ml-c { font-family: 'Share Tech Mono', monospace; font-size: 10px; color: color-mix(in srgb, var(--lc) 88%, var(--text)); } .ml-clear { margin-top: 4px; padding: 6px 11px; border-radius: 8px; font-size: 10.5px; font-weight: 800; border: 1px dashed var(--border); background: none; color: var(--text-muted); cursor: pointer; font-family: inherit; } .ml-clear:hover { color: var(--text); } .mail-shell.folders-collapsed .ml-lh, .mail-shell.folders-collapsed .ml-n, .mail-shell.folders-collapsed .ml-c, .mail-shell.folders-collapsed .ml-clear { display: none; } /* لوحة السياق */ /* v254 — التخطيط الصح: ٤ أعمدة بلا ضغط، والصفحة بعرض كامل */ #page-mail .form-header { max-width: 100%; } #mail-body { width: 100%; } .mail-shell { grid-template-columns: 196px minmax(300px, 400px) minmax(340px, 1fr) 290px !important; gap: 12px; width: 100%; } .mail-shell.folders-collapsed { grid-template-columns: 58px minmax(300px, 400px) minmax(340px, 1fr) 290px !important; } .mail-shell:not(.reading) { grid-template-columns: 196px minmax(320px, 430px) minmax(0, 1fr) !important; } .mail-shell.folders-collapsed:not(.reading) { grid-template-columns: 58px minmax(320px, 430px) minmax(0, 1fr) !important; } .mail-ctx { border-inline-start: 1px solid var(--border); background: color-mix(in srgb, #000 9%, var(--surface)); padding: 13px; display: flex; flex-direction: column; gap: 11px; overflow: auto; min-width: 0; } .mc-card { border: 1px solid var(--border); border-radius: 13px; background: var(--surface2); padding: 11px 13px; } .mc-h { display: flex; align-items: center; gap: 8px; font-family: 'Share Tech Mono', monospace; font-size: 8.5px; letter-spacing: 2px; color: var(--text-muted); margin-bottom: 9px; } .mc-sla { margin-inline-start: auto; font-family: 'Share Tech Mono', monospace; font-size: 9px; padding: 2px 8px; border-radius: 7px; border: 1px solid var(--border); color: var(--text-muted); } .mc-sla.warm { color: var(--accent-fg); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); } .mc-sla.hot { color: var(--tf-red); border-color: color-mix(in srgb, #ff3b3b 42%, transparent); background: color-mix(in srgb, #ff3b3b 10%, transparent); animation: rqmPulse 1.8s steps(2) infinite; } .mc-sum { font-size: 12px; line-height: 1.9; color: color-mix(in srgb, var(--text) 90%, transparent); } .mc-go { width: 100%; padding: 8px; border-radius: 9px; font-size: 11.5px; font-weight: 800; cursor: pointer; font-family: inherit; border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent-fg); } .mc-go:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); } .mc-wait { font-size: 11.5px; color: var(--accent-fg); } .mc-qr { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; } .mc-qr button { padding: 5px 11px; border-radius: 8px; font-size: 10.5px; font-weight: 800; cursor: pointer; font-family: inherit; border: 1px solid var(--border); background: var(--surface); color: color-mix(in srgb, var(--text) 78%, transparent); } .mc-qr button:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .mc-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; padding: 5px 0; } .mc-row .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dc, var(--accent)); flex: 0 0 auto; box-shadow: 0 0 7px color-mix(in srgb, var(--dc, var(--accent)) 55%, transparent); } .mc-s { color: var(--text-muted); font-size: 10px; } .mc-mini { margin-inline-start: auto; padding: 3px 9px; border-radius: 7px; font-size: 10px; font-weight: 800; cursor: pointer; font-family: inherit; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); } .mc-mini:hover { color: var(--accent-fg); } .mc-empty { font-size: 11px; color: var(--text-muted); } .mc-notes { display: flex; flex-direction: column; gap: 7px; max-height: 190px; overflow: auto; } .mc-note { border: 1px dashed color-mix(in srgb, #30c87a 42%, transparent); border-radius: 10px; background: color-mix(in srgb, #30c87a 7%, transparent); padding: 7px 10px; font-size: 11.5px; line-height: 1.75; } .mc-note b { display: block; font-size: 10.5px; color: #7de0a6; } .mc-add { display: flex; gap: 5px; margin-top: 9px; } .mc-add input { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-family: inherit; font-size: 11.5px; padding: 8px 11px; outline: none; } .mc-add input:focus { border-color: color-mix(in srgb, #30c87a 50%, transparent); } .mc-add button { padding: 8px 12px; border-radius: 9px; border: none; cursor: pointer; font-size: 13px; color: #0a0e1a; background: #4dbd7c; font-weight: 900; } @media (max-width: 1280px) { .mail-shell { grid-template-columns: auto 1fr 1.15fr !important; } .mail-ctx { display: none; } } /* ═══════════════════════════════════════════════ v254 — طي المجلدات الأنيق · لوحة الأوامر · البندلات · الفرز · الدعم · الموبايل ═══════════════════════════════════════════════ */ /* ١) الشريط المطوي: أيقونات واضحة ومرتّبة */ .mail-shell.folders-collapsed .mail-folders { padding: 10px 7px; gap: 5px; align-items: center; } .mail-shell.folders-collapsed .mf-item, .mail-shell.folders-collapsed .ml-lane { width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 12px; } .mail-shell.folders-collapsed .mf-ic, .mail-shell.folders-collapsed .ml-ic { font-size: 17px; margin: 0; } .mail-shell.folders-collapsed .mail-compose { width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 13px; } .mail-shell.folders-collapsed .mail-compose span { display: none; } .mail-shell.folders-collapsed .mf-badge, .mail-shell.folders-collapsed .mf-count { position: absolute; top: 2px; inset-inline-end: 2px; font-size: 8.5px; padding: 0 4px; } .mail-shell.folders-collapsed .mf-item, .mail-shell.folders-collapsed .ml-lane { position: relative; } .mail-shell.folders-collapsed .mf-item.active, .mail-shell.folders-collapsed .ml-lane.on { background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); } .mail-shell.folders-collapsed .mf-sep { width: 26px; margin: 4px auto; } /* ٢) شريط «شو بدّو ردّك اليوم» */ .md-today { display: flex; align-items: center; gap: 11px; padding: 11px 15px; border-radius: 13px; margin-bottom: 12px; flex-wrap: wrap; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border)); background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 9%, var(--surface2)), var(--surface2)); } .md-ring { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; position: relative; background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--surface) 0); } .md-ring::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface2); } .md-ring b { position: relative; font-family: 'Share Tech Mono', monospace; font-size: 11px; } .md-t { flex: 1; min-width: 160px; } .md-t b { display: block; font-size: 13px; } .md-t span { font-size: 11px; color: var(--text-muted); } .md-acts { display: flex; gap: 6px; flex-wrap: wrap; } .md-acts button { padding: 7px 14px; border-radius: 9px; font-size: 11.5px; font-weight: 800; cursor: pointer; font-family: inherit; border: 1px solid var(--border); background: var(--surface); color: color-mix(in srgb, var(--text) 80%, transparent); } .md-acts button.p { background: var(--accent); color: var(--accent-ink, #0a0e1a); border-color: transparent; font-weight: 900; box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 55%, #000); } .md-acts button:hover { color: var(--text); } /* ٣) البندلات */ .mb-wrap { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .mb { border: 1px solid var(--border); border-radius: 13px; background: var(--surface); overflow: hidden; } .mb-h { width: 100%; display: flex; align-items: center; gap: 11px; padding: 10px 14px; text-align: start; border: none; background: none; color: var(--text); font-family: inherit; cursor: pointer; transition: .13s; } .mb-h:hover { background: color-mix(in srgb, var(--bc) 6%, transparent); } .mb-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 14px; flex: 0 0 auto; background: color-mix(in srgb, var(--bc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--bc) 32%, transparent); } .mb-bd { flex: 1; min-width: 0; } .mb-bd b { display: block; font-size: 12.5px; } .mb-bd span { font-size: 10.5px; color: var(--text-muted); } .mb-n { font-family: 'Share Tech Mono', monospace; font-size: 10.5px; color: color-mix(in srgb, var(--bc) 88%, var(--text)); background: color-mix(in srgb, var(--bc) 13%, transparent); border: 1px solid color-mix(in srgb, var(--bc) 32%, transparent); border-radius: 7px; padding: 1px 8px; } .mb-one { padding: 5px 12px; border-radius: 8px; font-size: 10.5px; font-weight: 900; cursor: pointer; border: none; color: #0a0e1a; background: var(--bc); font-family: inherit; } /* ٤) فرز المرسلين الجداد */ .msc { border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border)); border-radius: 14px; overflow: hidden; margin-bottom: 12px; background: color-mix(in srgb, var(--accent) 5%, transparent); } .msc-h { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); } .msc-h b { flex: 1; font-size: 12.5px; } .msc-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid color-mix(in srgb, var(--border) 42%, transparent); } .msc-bd { flex: 1; min-width: 0; } .msc-bd b { display: block; font-size: 12px; } .msc-bd span { font-size: 10.5px; color: var(--text-muted); } .msc-btns { display: flex; gap: 5px; } .msc-btns button { padding: 6px 12px; border-radius: 8px; font-size: 10.5px; font-weight: 800; cursor: pointer; font-family: inherit; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); } .msc-btns button.yes { background: color-mix(in srgb, #30c87a 16%, transparent); border-color: color-mix(in srgb, #30c87a 45%, transparent); color: #7de0a6; } .msc-btns button.no { background: color-mix(in srgb, #ff3b3b 12%, transparent); border-color: color-mix(in srgb, #ff3b3b 40%, transparent); color: var(--tf-red); } /* ٥) v573 — لوحة الأوامر الثانية (.mk-ov) أُزيلت مع دالّتها: اللوحة الواحدة openMailCmd */ /* ٦) الموبايل — بلا أي خلل */ @media (max-width: 1280px) { .mail-shell, .mail-shell.folders-collapsed { grid-template-columns: 196px minmax(280px, 420px) minmax(0, 1fr) !important; } .mail-shell.folders-collapsed { grid-template-columns: 58px minmax(280px, 420px) minmax(0, 1fr) !important; } } @media (max-width: 900px) { .mail-shell, .mail-shell.folders-collapsed, .mail-shell:not(.reading), .mail-shell.folders-collapsed:not(.reading) { grid-template-columns: 1fr !important; gap: 10px; } .mail-ctx { display: none !important; } .mail-folders { flex-direction: row !important; overflow-x: auto; gap: 6px !important; padding: 9px !important; } .ml-lanes { flex-direction: row !important; gap: 5px; } .ml-lh, .ml-clear { display: none; } .ml-lane { flex: 0 0 auto; white-space: nowrap; } .mf-sep { display: none; } .md-today { flex-direction: column; align-items: stretch; text-align: start; } .md-acts button { flex: 1; } } /* ═══════════════════════════════════════════════ v255 — مركز الدعم ═══════════════════════════════════════════════ */ .st-support { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; margin-bottom: 14px; border-radius: 15px; cursor: pointer; font-family: inherit; text-align: start; transition: .15s; border: 1px solid color-mix(in srgb, #ff5a5f 30%, var(--border)); background: linear-gradient(120deg, color-mix(in srgb, #ff5a5f 8%, var(--surface2)), var(--surface2)); color: var(--text); } .st-support:hover { border-color: color-mix(in srgb, #ff5a5f 55%, transparent); transform: translateY(-1px); } .sts-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-size: 19px; flex: 0 0 auto; background: color-mix(in srgb, #ff5a5f 14%, transparent); border: 1px solid color-mix(in srgb, #ff5a5f 32%, transparent); } .sts-t { flex: 1; min-width: 0; } .sts-t b { display: block; font-size: 14px; } .sts-t span { font-size: 11.5px; color: var(--text-muted); } .sts-go { font-size: 16px; color: var(--text-muted); } .sup-ov { position: fixed; inset: 0; z-index: 300; display: none; padding: 22px; background: color-mix(in srgb, #000 64%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .sup-ov.open { display: flex; align-items: center; justify-content: center; } .sup-in { width: min(760px, 100%); max-height: 92vh; display: flex; flex-direction: column; background: var(--tf-glass, var(--bg)); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid color-mix(in srgb, #ff5a5f 26%, var(--tf-gl, var(--border))); border-radius: 20px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0,0,0,.55), inset 0 1px 0 0 var(--tf-ghi, transparent); } .sup-h { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, #ff5a5f 7%, var(--surface)); } .sup-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-size: 19px; flex: 0 0 auto; background: color-mix(in srgb, #ff5a5f 14%, transparent); border: 1px solid color-mix(in srgb, #ff5a5f 34%, transparent); } .sup-t { flex: 1; min-width: 0; } .sup-t b { display: block; font-size: 15px; } .sup-t span { font-size: 11.5px; color: var(--text-muted); } .sup-x { border: none; background: none; color: var(--text-muted); font-size: 16px; cursor: pointer; padding: 5px 10px; border-radius: 9px; } .sup-x:hover { color: var(--text); background: var(--surface2); } .sup-tabs { display: flex; gap: 6px; padding: 11px 16px; border-bottom: 1px solid var(--border); } .sup-tb { padding: 8px 15px; border-radius: 10px; font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); } .sup-tb.on { color: var(--text); border-color: color-mix(in srgb, #ff5a5f 50%, transparent); background: color-mix(in srgb, #ff5a5f 12%, transparent); } .sup-tb b { font-family: 'Share Tech Mono', monospace; color: #ff8f92; } .sup-b { flex: 1; overflow: auto; padding: 16px 18px 20px; } .sup-step { display: flex; align-items: center; gap: 9px; margin: 4px 0 10px; font-size: 13px; } .sup-n { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-family: 'Share Tech Mono', monospace; font-size: 11px; color: var(--accent-fg); background: color-mix(in srgb, var(--accent) 13%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); } .sup-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 9px; margin-bottom: 16px; } .sup-cat { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 14px; border-radius: 13px; cursor: pointer; font-family: inherit; text-align: start; transition: .14s; border: 1px solid var(--border); background: var(--surface2); color: var(--text); } .sup-cat:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--cc) 45%, transparent); } .sup-cat.on { border-color: var(--cc); background: color-mix(in srgb, var(--cc) 12%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cc) 30%, transparent) inset; } .sup-cic { font-size: 19px; } .sup-cat b { font-size: 12.5px; } .sup-cat span { font-size: 10.5px; color: var(--text-muted); line-height: 1.55; } .sup-ta { width: 100%; min-height: 120px; resize: vertical; background: var(--surface2); border: 1px solid var(--border); border-radius: 13px; color: var(--text); font-family: inherit; font-size: 13px; line-height: 1.9; padding: 13px 15px; outline: none; } .sup-ta:focus { border-color: color-mix(in srgb, #ff5a5f 45%, transparent); } .sup-ai { margin-top: 12px; } .sup-wait, .sup-hint { font-size: 12px; color: var(--text-muted); padding: 10px 0; } .sup-ans { border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); border-radius: 13px; background: color-mix(in srgb, var(--accent) 8%, transparent); padding: 12px 14px; font-size: 12.5px; line-height: 1.95; } .sup-ah { font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 2px; color: var(--accent-fg); margin-bottom: 7px; } .sup-arow { display: flex; gap: 6px; margin-top: 11px; flex-wrap: wrap; } .sup-mini { padding: 6px 13px; border-radius: 9px; font-size: 11px; font-weight: 800; cursor: pointer; font-family: inherit; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); } .sup-mini:hover { color: var(--text); } .sup-mini.ok { background: color-mix(in srgb, #30c87a 16%, transparent); border-color: color-mix(in srgb, #30c87a 45%, transparent); color: #7de0a6; } .sup-mini.done { background: color-mix(in srgb, #30c87a 22%, transparent); color: #7de0a6; } .sup-diag { margin-top: 13px; padding: 9px 12px; border-radius: 10px; font-size: 10px; line-height: 1.8; border: 1px dashed var(--border); background: var(--surface2); color: var(--text-muted); white-space: pre-line; } /* v558 — كلّ حقلٍ في سطره */ .sup-f { display: flex; gap: 8px; margin-top: 15px; flex-wrap: wrap; } .sup-btn { flex: 1; min-width: 170px; padding: 12px; border-radius: var(--radius, 12px); font-size: 12.5px; font-weight: 900; cursor: pointer; font-family: inherit; border: 1px solid var(--tf-gl, var(--border)); background: var(--tf-glass, var(--surface2)); color: var(--text); box-shadow: inset 0 1px 0 0 var(--tf-ghi, transparent); transition: transform .13s cubic-bezier(.2,.9,.3,1), border-color .15s, filter .15s; } .sup-btn:hover { border-color: var(--accent); } .sup-btn:active { transform: scale(.965); } .sup-btn.ai { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-fg); } .sup-btn.p { background: #ff5a5f; color: #fff; border-color: transparent; box-shadow: inset 0 1px 0 0 rgba(255,255,255,.3), 0 8px 22px -10px color-mix(in srgb, #ff5a5f 65%, transparent); } .sup-btn.p:active { transform: scale(.965); } .sup-tk { border: 1px solid var(--border); border-radius: 14px; background: var(--surface2); padding: 12px 14px; margin-bottom: 10px; border-inline-start: 3px solid var(--sc); } .sup-tkh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .sup-tcat { font-size: 10.5px; font-weight: 800; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--cc) 13%, transparent); color: color-mix(in srgb, var(--cc) 85%, var(--text)); border: 1px solid color-mix(in srgb, var(--cc) 32%, transparent); } .sup-num { font-size: 10px; color: var(--text-muted); } .sup-st { font-size: 10.5px; font-weight: 800; color: var(--sc); } .sup-who { font-size: 10.5px; color: var(--text-muted); } .sup-date { font-size: 9.5px; color: var(--text-muted); margin-inline-start: auto; } .sup-body { font-size: 12.5px; line-height: 1.9; color: color-mix(in srgb, var(--text) 90%, transparent); } .sup-reps { margin-top: 9px; display: flex; flex-direction: column; gap: 6px; } .sup-rep { border: 1px dashed color-mix(in srgb, #30c87a 40%, transparent); border-radius: 10px; background: color-mix(in srgb, #30c87a 7%, transparent); padding: 8px 11px; font-size: 11.5px; line-height: 1.8; } .sup-rep b { display: block; font-size: 10.5px; color: #7de0a6; } .sup-acts { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; } .sup-rin { flex: 1; min-width: 160px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-family: inherit; font-size: 11.5px; padding: 8px 11px; outline: none; } .sup-note { margin-top: 9px; font-size: 11px; color: var(--text-muted); } .sup-empty { padding: 40px 16px; text-align: center; font-size: 12.5px; color: var(--text-muted); } @media (max-width: 760px) { .sup-ov { padding: 8px; } .sup-cats { grid-template-columns: 1fr 1fr; } .sup-btn { min-width: 100%; } } /* ═══════════════════════════════════════════════ v256 — إصلاح تخطيط القراءة · هيكل بصري متين · إجراءات ذكية ═══════════════════════════════════════════════ */ /* ١) اللستة بتضل ظاهرة عالديسكتوب وقت القراءة (قاعدة الموبايل كانت تسرّب) */ @media (min-width: 901px) { .mail-shell.reading .mail-list { display: flex !important; } .mail-shell, .mail-shell.reading { grid-template-columns: 196px minmax(260px, 330px) minmax(360px, 1fr) minmax(0, 288px) !important; } .mail-shell.folders-collapsed, .mail-shell.folders-collapsed.reading { grid-template-columns: 58px minmax(260px, 330px) minmax(360px, 1fr) minmax(0, 288px) !important; } .mail-shell:not(.reading), .mail-shell.folders-collapsed:not(.reading) { grid-template-columns: 196px minmax(300px, 420px) minmax(0, 1fr) !important; } .mail-shell.folders-collapsed:not(.reading) { grid-template-columns: 58px minmax(300px, 420px) minmax(0, 1fr) !important; } } .mail-shell > * { min-width: 0; } @media (min-width: 901px) and (max-width: 1400px) { .mail-shell.reading .mail-ctx { display: none; } .mail-shell.reading, .mail-shell.folders-collapsed.reading { grid-template-columns: 196px minmax(260px, 340px) minmax(0, 1fr) !important; } .mail-shell.folders-collapsed.reading { grid-template-columns: 58px minmax(260px, 340px) minmax(0, 1fr) !important; } } /* ٢) هيكل بصري متين للرسالة المفتوحة */ .mail-read { position: relative; } .mail-read .mrt-subject, .mail-read h2, .mail-read .mr-subject { font-size: 17px !important; font-weight: 900 !important; line-height: 1.6 !important; } .mail-read .mr-head, .mail-read .mrt-head { border-bottom: 2px solid color-mix(in srgb, var(--accent) 28%, var(--border)) !important; padding-bottom: 12px !important; margin-bottom: 4px; } .mail-read .mrt-msg, .mail-read .mr-msg, .mail-read .mm-body { border-inline-start: 3px solid color-mix(in srgb, var(--accent) 34%, transparent) !important; } .mail-read .mm-from, .mail-read .mr-from { font-size: 13px !important; font-weight: 900 !important; } .mail-read .mm-text, .mail-read .mr-text, .mail-read .mm-body p { font-size: 13.5px !important; line-height: 2.05 !important; } /* شريط نوع الرسالة فوق القراءة */ .mr-kind { display: flex; align-items: center; gap: 9px; padding: 9px 14px; margin: 0 0 10px; border-radius: 11px; font-size: 11.5px; font-weight: 800; flex-wrap: wrap; border: 1px solid color-mix(in srgb, var(--kc, var(--accent)) 34%, transparent); background: color-mix(in srgb, var(--kc, var(--accent)) 8%, transparent); } .mr-kind .kic { font-size: 15px; } .mr-kind .kt { flex: 1; min-width: 0; } .mr-kind .kt b { color: color-mix(in srgb, var(--kc, var(--accent)) 88%, var(--text)); } .mr-kind .kt span { display: block; font-size: 10.5px; font-weight: 500; color: var(--text-muted); } /* ٣) اختيار نوع البريد بنافذة الإنشاء */ .mc-kinds { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .mc-kind { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: 11.5px; font-weight: 800; cursor: pointer; font-family: inherit; transition: .13s; border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted); } .mc-kind:hover { color: var(--text); } .mc-kind.on { color: var(--text); border-color: color-mix(in srgb, var(--kc) 55%, transparent); background: color-mix(in srgb, var(--kc) 13%, transparent); } .mc-kinds-lbl { font-size: 11px; color: var(--text-muted); font-weight: 700; margin-bottom: 7px; display: block; } /* ═══════════════════════════════════════════════════════════════════ v258 — تمشيط التلفون: يوم واحد بالمرة + سدّ كل مصادر الطفح ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ v259 — البريد العالمي: ٣ أعمدة · درج · ٦٨ch · ٣ ألوان · تدرّج البهتان ═══════════════════════════════════════════════════════════════════ */ /* ── ١) ٣ أعمدة والقراءة بتاخد كل الباقي ── */ .mail-shell { grid-template-columns: 200px 360px minmax(0, 1fr) !important; position: relative; } .mail-shell.folders-collapsed { grid-template-columns: 60px 360px minmax(0, 1fr) !important; } @media (min-width: 1600px) { .mail-shell { grid-template-columns: 210px 400px minmax(0, 1fr) !important; } } /* ── ٢) لوحة السياق = درج بينزلق فوق القراءة ── */ .mail-shell .mail-ctx { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: 310px; z-index: 12; border-radius: 18px 0 0 18px; border-inline-start: 1px solid var(--border); transform: translateX(100%); transition: transform .26s cubic-bezier(.32,.72,0,1); box-shadow: -18px 0 44px -22px #000c; overflow-y: auto; padding-top: 40px; } [dir="rtl"] .mail-shell .mail-ctx { transform: translateX(-100%); } .mail-shell.ctx-open .mail-ctx { transform: translateX(0) !important; } .mctx-x { position: absolute; top: 10px; inset-inline-start: 10px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted); cursor: pointer; z-index: 3; } .mctx-x:hover { color: var(--text); } .mrt-btn.mrt-drawer.on { color: var(--accent-fg); border-color: var(--accent); } /* ── ٣) عرض السطر ٦٨ch — المعيار العالمي ٤٥–٧٥ حرف ── */ .mr-thread > * { max-width: 68ch; margin-inline: auto; } .mr-b { line-height: 1.95; } .mail-shell .mr-reply, .mail-shell .mr-qr { max-width: 68ch; margin-inline: auto; } /* ── ٤) تدرّج البهتان: عينك بتروح على آخر رد ── */ .mr-msg { opacity: var(--f, 1); transition: opacity .25s, border-color .25s, background .25s; } .mr-msg:hover, .mr-msg:focus-within { opacity: 1; } .mr-msg.mr-latest { opacity: 1; background: color-mix(in srgb, var(--accent) 6%, var(--surface2)); border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); } .mr-msg::after { content: attr(data-seq); position: absolute; top: 12px; inset-inline-end: 14px; font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 1.4px; color: var(--text-muted); opacity: .55; pointer-events: none; } .mr-msg { position: relative; } /* ── ٥) تنظيف الألوان: رمادي · ذهبي · أحمر وبس ── */ .ml-lane { --lc: var(--text-muted) !important; } .ml-lane .ml-ic { color: var(--text-muted); display: inline-flex; align-items: center; } .ml-lane.on { background: color-mix(in srgb, var(--accent) 13%, var(--surface2)) !important; border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important; color: var(--accent-fg) !important; } .ml-lane.on .ml-ic { color: var(--accent-fg); } .ml-lane .ml-c { color: var(--text-muted); } .ml-row { border-inline-start: none !important; } /* شرائط ملوّنة عالصفوف = ضجيج */ .mr-subj { border-inline-start: none !important; padding-inline-start: 0 !important; } /* ═══ v260 — الخدمات: أفاتار بحرف ولون هادي + فواصل زمنية ═══ */ .mr-av, .ml-av { background: var(--surface3, var(--surface2)) !important; color: var(--text) !important; } .ml-tsep { font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 2.5px; color: var(--text-muted); padding: 13px 14px 7px; position: sticky; top: 0; z-index: 2; background: linear-gradient(var(--surface) 72%, transparent); backdrop-filter: blur(3px); } /* ═══════════ البريد عالتلفون ═══════════ */ @media (max-width: 900px) { .mail-shell, .mail-shell.folders-collapsed { grid-template-columns: 1fr !important; } .mail-shell .mail-ctx { width: min(320px, 88vw); } /* المسارات: شريط chips نحيف بدل صف إيموجي كبار */ .ml-lanes { display: flex !important; gap: 6px; overflow-x: auto; padding: 10px 12px; scrollbar-width: none; } .ml-lanes::-webkit-scrollbar { display: none; } .ml-lh { display: none; } .ml-lane { flex: 0 0 auto; padding: 7px 12px !important; border-radius: 999px !important; font-size: 11.5px !important; white-space: nowrap; min-height: 0 !important; } .ml-lane .ml-ic { width: 15px; height: 15px; font-size: 13px !important; } .ml-lane .ml-n { font-size: 11.5px !important; } /* صف الرسالة: ارتفاع لمس مريح ونص مقروء */ .ml-row { padding: 13px 14px !important; min-height: 76px; align-items: center; } .ml-who { font-size: 13px !important; } .ml-subj { font-size: 13px !important; } .ml-prev { font-size: 11.5px !important; white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* القراءة: شاشة وحدة والرد جوّاتها بالآخر */ .mr-thread > * { max-width: none; } .mr-b { font-size: 15.5px !important; line-height: 1.9 !important; } .mr-msg { padding: 13px 15px !important; } .mr-msg::after { display: none; } .mr-head { padding: 13px 14px !important; } .mr-subj { font-size: 18px !important; line-height: 1.5 !important; } /* صندوق الرد كان بشاشة تالتة — هلق جوّا نفس الشاشة تحت آخر رسالة */ .mail-shell .mr-reply, .mail-shell .mr-qr { position: static !important; max-width: none; margin: 12px 14px 20px !important; border-radius: 15px !important; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)) !important; } .mail-shell .mr-reply textarea, .mail-shell .mr-qr textarea { font-size: 15px !important; line-height: 1.85 !important; min-height: 84px; } .mail-read { overflow-y: auto; } .mrt-btn, .mr-btn, .mr-back { min-width: 44px; min-height: 44px; } .ml-dense, .ml-cmd-hint { display: none; } /* اختصارات الكيبورد ما إلها معنى عالتلفون */ } /* ═══ v260 — «ما تزعجني» ═══ */ .mdnd-g { font-family: 'Share Tech Mono', monospace; font-size: 8.5px; letter-spacing: 2px; color: var(--text-muted); margin: 14px 0 7px; } .mdnd-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; padding: 12px 13px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); margin-bottom: 7px; cursor: pointer; font-family: inherit; color: var(--text); transition: border-color .14s, background .14s; } .mdnd-opt:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); } .mdnd-opt.on { border-color: color-mix(in srgb, var(--accent) 52%, transparent); background: color-mix(in srgb, var(--accent) 10%, var(--surface2)); } .mdnd-opt.danger { border-color: color-mix(in srgb, var(--danger) 42%, transparent); color: var(--danger); } .mdnd-t { flex: 1; min-width: 0; } .mdnd-t b { display: block; font-size: 12.5px; font-weight: 800; } .mdnd-t span { display: block; font-size: 10.5px; color: var(--text-muted); margin-top: 2px; } .mdnd-ch { color: var(--text-muted); font-size: 16px; } .mdnd-air { font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 1.5px; color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 38%, transparent); border-radius: 6px; padding: 1px 6px; margin-inline-start: 6px; font-style: normal; } .mdnd-sw { width: 42px; height: 24px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); position: relative; flex-shrink: 0; transition: background .18s; } .mdnd-sw::after { content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-muted); transition: all .18s; } .mdnd-opt.on .mdnd-sw { background: color-mix(in srgb, var(--accent) 28%, transparent); border-color: var(--accent); } .mdnd-opt.on .mdnd-sw::after { background: var(--accent); inset-inline-start: 22px; } [dir="rtl"] .mdnd-opt.on .mdnd-sw::after { inset-inline-start: 2px; transform: translateX(-18px); } .mdnd-live { display: inline-flex; align-items: center; font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 1.5px; color: var(--danger); margin-bottom: 10px; border: 1px solid color-mix(in srgb, var(--danger) 38%, transparent); border-radius: 999px; padding: 3px 10px; } .mdnd-note { font-size: 11px; color: var(--text-muted); line-height: 1.8; text-align: center; margin-top: 14px; } .mf-item.mf-dnd.on { color: var(--danger); } .mf-item.mf-dnd.on .mf-ic { color: var(--danger); } @media (max-width: 900px) { .mdnd-opt { min-height: 56px; } } /* ═══════════════════════════════════════════════════════════════════ v261 — إصلاحات ما بعد التجربة ═══════════════════════════════════════════════════════════════════ */ /* ── ١) بوكس الرسالة أوسع ────────────────────────────────────────── كانت القراءة مخنوقة: لوحة السياق ضلّت آخدة عمود بالـgrid رغم إنها صارت درج، فانخلق عمود رابع ضمني وأكل المساحة. هلق منجبرها تطلع من الفلو نهائياً، والقراءة بتاخد كل الباقي. */ .mail-shell { width: 100%; position: relative !important; grid-template-columns: 200px 340px minmax(0, 1fr) !important; grid-auto-columns: 0 !important; /* ما بينخلق عمود ضمني */ grid-auto-flow: row !important; } .mail-shell.folders-collapsed { grid-template-columns: 58px 340px minmax(0, 1fr) !important; } .mail-shell.reading, .mail-shell.reading.folders-collapsed, .mail-shell.wide, .mail-shell.wide.folders-collapsed { grid-template-columns: var(--mfold, 200px) 320px minmax(0, 1fr) !important; } .mail-shell.folders-collapsed { --mfold: 58px; } @media (min-width: 1500px) { .mail-shell, .mail-shell.reading { grid-template-columns: 210px 380px minmax(0, 1fr) !important; } .mail-shell.folders-collapsed, .mail-shell.folders-collapsed.reading { grid-template-columns: 58px 380px minmax(0, 1fr) !important; } } /* الدرج: خارج الـgrid نهائياً */ .mail-shell .mail-ctx { position: absolute !important; grid-area: unset !important; grid-column: unset !important; grid-row: unset !important; } /* كانت قواعد قديمة بتخبّي الدرج بشاشات معيّنة فما كان يفتح */ @media (min-width: 901px) { .mail-shell.reading .mail-ctx, .mail-shell .mail-ctx { display: block !important; } } /* النص بيضل ٦٨ch متمركز حتى لو البوكس صار عريض */ .mail-read .mr-thread { padding-inline: clamp(14px, 4vw, 46px); } /* ── ٢) شريط الفلاتر: كان بينقطع لما تفتح الرسالة ──────────────── */ .ml-splits { display: flex !important; flex-wrap: nowrap !important; gap: 5px; overflow-x: auto; scrollbar-width: none; padding: 9px 11px !important; scroll-snap-type: x proximity; } .ml-splits::-webkit-scrollbar { display: none; } .ml-split { flex: 0 0 auto !important; white-space: nowrap !important; scroll-snap-align: start; max-width: none !important; } .ml-split > * { flex-shrink: 0; } /* تلميح إنو في كمان تبويبات عالجنب */ .ml-splits { -webkit-mask-image: linear-gradient(to left, #000 88%, transparent 100%); } [dir="ltr"] .ml-splits { -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%); } /* ── ٣) نموذج التوقيع ──────────────────────────────────────────── */ .msig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .msig-f { display: block; margin-bottom: 9px; } .msig-f > span { display: block; font-size: 10.5px; font-weight: 800; color: var(--text-muted); margin-bottom: 4px; } .msig-f input, .msig-f select { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-family: inherit; font-size: 12.5px; padding: 9px 11px; outline: none; } .msig-f input:focus, .msig-f select:focus { border-color: var(--accent); } .msig-prev-h { font-family: 'Share Tech Mono', monospace; font-size: 8.5px; letter-spacing: 2px; color: var(--text-muted); margin: 13px 0 6px; } .msig-prev { background: var(--surface2); border: 1px dashed var(--border); border-radius: 11px; padding: 12px 14px; font-family: inherit; font-size: 12.5px; line-height: 1.9; color: var(--text); white-space: pre-wrap; margin: 0; max-height: 150px; overflow-y: auto; } .msig-do { display: flex; gap: 8px; margin-top: 14px; } .msig-save { flex: 1; background: var(--accent); color: var(--accent-ink, #0a0e1a); border: none; border-radius: 11px; padding: 11px; font-family: inherit; font-size: 13px; font-weight: 900; cursor: pointer; } .msig-clear { border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted); border-radius: 11px; padding: 11px 16px; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; } .msig-clear:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); } @media (max-width: 620px) { .msig-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════ v262 — التلفون: كتلة واحدة بآخر الملف تحسم كل تعارض ─────────────────────────────────────────────────────────────────── الدرس: قواعد !important بلا media بآخر الملف بتغلب قواعد الموبايل مهما كانت. فبدل ما نرقّع، منحسمها من هون — آخر كتلة، داخل media. ═══════════════════════════════════════════════════════════════════ */ .smob { display: none; } @media (max-width: 900px) { /* ─────────── ١) الدوام: بطاقات بدل الجدول ─────────── */ .smob { display: block; margin-bottom: 14px; } .sched-grid-wrap, .sched-main .sched-grid-wrap { display: none !important; } .smob-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; padding: 6px; background: var(--surface2); border: 1px solid var(--border); border-radius: 15px; margin-bottom: 12px; } .smob-d { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; border: none; border-radius: 11px; background: transparent; color: var(--text-muted); font-family: inherit; cursor: pointer; padding: 6px 2px; transition: background .15s, color .15s; } .smob-d span { font-size: 10px; font-weight: 800; white-space: nowrap; } .smob-d b { font-family: 'Share Tech Mono', monospace; font-size: 14px; } .smob-d.now b { color: var(--accent-fg); } .smob-d.on { background: var(--accent); color: var(--accent-ink, #0a0e1a); } .smob-d.on b, .smob-d.on span { color: #14141f; } .smob-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 0 3px; } .smob-date { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .smob-date b { font-size: 16px; font-weight: 900; } .smob-date span { font-family: 'Share Tech Mono', monospace; font-size: 10.5px; color: var(--text-muted); } .smob-date em { font-style: normal; font-size: 9.5px; font-weight: 900; color: var(--accent-fg); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; padding: 1px 8px; } .smob-cov { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; flex-shrink: 0; } .smob-cov b { font-size: 14px; } .smob-cov.ok { color: var(--success); border-color: color-mix(in srgb, #2ecc71 40%, transparent); } .smob-cov.low { color: var(--accent-fg); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .smob-cov.none { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); } .smob-hol { font-size: 12px; font-weight: 700; color: var(--accent-fg); padding: 8px 12px; background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 11px; margin-bottom: 10px; } .smob-list { display: flex; flex-direction: column; gap: 8px; } .smob-c { display: flex; align-items: center; gap: 11px; padding: 11px 13px; min-height: 64px; background: var(--surface); border: 1px solid var(--border); border-radius: 15px; } .smob-c.me { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); } .smob-who { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; } .smob-nm { min-width: 0; } .smob-nm b { display: block; font-size: 13.5px; font-weight: 800; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .smob-nm span { display: block; font-size: 10.5px; color: var(--text-muted); } .smob-nm em { font-style: normal; font-size: 9px; font-weight: 900; color: var(--accent-fg); margin-inline-start: 5px; } .smob-sh { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; flex-shrink: 0; font-size: 12px; font-weight: 800; white-space: nowrap; padding: 7px 12px; border-radius: 11px; text-align: center; color: var(--sc, var(--text-muted)); background: color-mix(in srgb, var(--sc, var(--border)) 15%, transparent); border: 1px solid color-mix(in srgb, var(--sc, var(--border)) 40%, transparent); } .smob-sh i { font-size: 9.5px; font-style: normal; opacity: .8; } .smob-sh.empty { color: var(--text-muted); background: transparent; border-style: dashed; font-weight: 600; } .smob-empty { padding: 34px 18px; text-align: center; color: var(--text-muted); font-size: 13px; } /* ─────────── ٢) البريد: عمود واحد، حسم نهائي ─────────── */ .mail-shell, .mail-shell.dense, .mail-shell.wide, .mail-shell.reading, .mail-shell.folders-collapsed, .mail-shell.folders-collapsed.reading, .mail-shell.wide.folders-collapsed { display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: minmax(0, 1fr) !important; grid-auto-columns: 0 !important; height: calc(100vh - 190px) !important; min-height: 0 !important; gap: 0 !important; } /* المجلدات: درج بيفتح بزر، مش عمود دائم */ .mail-shell .mail-folders { position: fixed !important; top: 0; bottom: 0; inset-inline-start: 0; width: min(285px, 84vw) !important; z-index: 9000; border-radius: 0 18px 18px 0 !important; overflow-y: auto; transform: translateX(-100%); transition: transform .26s cubic-bezier(.32,.72,0,1); box-shadow: 18px 0 44px -20px #000d; } /* v264 — inset-inline-start بينعكس لحالو بالـRTL؛ العكس اليدوي كان بيحطّو بالجهة الغلط. منعكس الـtransform بس، والزوايا. */ [dir="rtl"] .mail-shell .mail-folders { border-radius: 18px 0 0 18px !important; transform: translateX(100%); } .mail-shell.mfold-open .mail-folders { transform: translateX(0) !important; } .mail-shell .mail-folders .mf-n, .mail-shell .mail-folders .mail-compose span { display: inline !important; } .mail-shell .mail-compose { width: auto !important; height: auto !important; padding: 13px !important; border-radius: 14px !important; } .mail-shell .mf-collapse { display: none !important; } /* (الخلفية معرّفة عامّة تحت — بتلزم على كل الشاشات) */ .mfold-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-family: inherit; font-size: 12.5px; font-weight: 800; } /* شاشتين: لستة ← قراءة */ .mail-shell .mail-list, .mail-shell .mail-read { grid-column: 1 !important; grid-row: 1 !important; border-radius: 16px !important; min-width: 0 !important; } .mail-shell:not(.reading) .mail-read { display: none !important; } .mail-shell.reading .mail-list { display: none !important; } .mail-shell.reading .mail-read { display: flex !important; } .mail-shell .mr-back { display: inline-flex !important; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } /* الدرج فوق كل شي */ .mail-shell .mail-ctx { position: fixed !important; top: 0; bottom: 0; width: min(320px, 88vw) !important; z-index: 9000; border-radius: 0 !important; height: 100vh !important; } /* المسارات chips نحيفة */ .mail-shell .ml-lanes { display: flex !important; flex-direction: row !important; gap: 6px; overflow-x: auto; padding: 10px 12px !important; } .mail-shell .ml-lane { flex: 0 0 auto !important; border-radius: 999px !important; padding: 8px 13px !important; min-height: 0 !important; } } @media (max-width: 420px) { .smob-d span { font-size: 9px; } .smob-d { min-height: 48px; } .smob-sh { font-size: 11px; padding: 6px 9px; } .smob-nm b { font-size: 12.5px; } } /* v262 — التواريخ والأرقام بخط الكونسول ورمادي، فالعين تمشي عالأسماء */ .mr-when, .ml-when, .mr-m-head .mr-when, .mr-to { font-family: 'Share Tech Mono', monospace !important; letter-spacing: .3px; color: var(--text-muted) !important; } .mr-from, .ml-who { font-family: inherit; } /* طيّة التفاصيل التقنية */ .mr-tech { margin-top: 12px; border: 1px dashed var(--border); border-radius: 11px; background: color-mix(in srgb, var(--surface2) 60%, transparent); } .mr-tech > summary { cursor: pointer; list-style: none; padding: 8px 13px; font-size: 11px; font-weight: 800; color: var(--text-muted); user-select: none; } .mr-tech > summary::-webkit-details-marker { display: none; } .mr-tech > summary::before { content: '⌄'; display: inline-block; margin-inline-end: 7px; transition: transform .18s; } .mr-tech[open] > summary::before { transform: rotate(180deg); } .mr-tech > div { padding: 0 13px 11px; font-family: 'Share Tech Mono', monospace; font-size: 10.5px; line-height: 1.9; color: var(--text-muted); word-break: break-word; white-space: pre-line; } /* v558 */ /* ═══════════════════════════════════════════════════════════════════ v263 — السايدبار · محدّد الشيفت · الممحاة ═══════════════════════════════════════════════════════════════════ */ /* ── ١) أسفل السايدبار ما بينقطع أبداً ────────────────────────── .sidebar عندها overflow:hidden، فإذا المحتوى طال بينقصّ الأسفل بصمت. هلق: الـnav هي يلي بتسكرول، والفوتر ملصوق بالأسفل بضمانة. */ .sidebar { display: flex; flex-direction: column; } body.has-sidebar .sidebar { display: flex; } .sidebar-nav { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overscroll-behavior: contain; padding-bottom: 6px !important; } .sidebar-foot { flex: 0 0 auto !important; position: sticky; bottom: 0; z-index: 2; background: var(--surface); padding-bottom: max(10px, env(safe-area-inset-bottom)) !important; } /* ── ٢) أيقونات أكبر وأوضح ────────────────────────────────────── */ .sidebar-item .nav-ico, .sidebar-item > svg:first-child, .sidebar-foot-btn .nav-ico, .sidebar-foot-btn > svg:first-child { width: 22px !important; height: 22px !important; stroke-width: 1.9; } .sidebar-item { min-height: 42px; } .sidebar-foot-btn { min-height: 42px; } .sidebar.collapsed .sidebar-item .nav-ico, .sidebar.collapsed .sidebar-foot-btn .nav-ico { width: 23px !important; height: 23px !important; } /* ── ٣) محدّد الشيفت: مستحيل يطلع برا الشاشة ──────────────────── */ .shift-picker { max-height: calc(100vh - 24px); display: flex; flex-direction: column; overflow: hidden; } .shift-picker .shift-picker-title { flex: 0 0 auto; } .shift-picker .shift-picker-opts { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .shift-picker.centered { max-height: 84vh; } /* ── ٤) الممحاة بالبالتة ──────────────────────────────────────── */ .sched-eraser { border: 1px dashed var(--border2, var(--border)) !important; } .sched-eraser:hover { border-color: var(--danger) !important; color: var(--danger); } .sched-chip.erase { background: transparent !important; border: 1px dashed var(--text-muted); } .sched-eraser.dragging { opacity: .5; } /* الخانة لما الممحاة فوقها */ .sched-cell.drag-over { outline: 2px dashed var(--accent); outline-offset: -2px; } /* ═══════════════════════════════════════════════════════════════════ v264 — إصلاح الدرجين: الاستجابة للضغط + اتجاه RTL ─────────────────────────────────────────────────────────────────── غلطتين مني: ١) لوحة السياق: خبّيتها بـpointer-events مربوطة بكلاس. لو الكلاس ما لحقت تتحدّث، الدرج بيبيّن وما بيستجيب. الصح: visibility — بتخبّي وبتلغي التقاط النقر بضمانة، وبترجع مع الانزلاق. ٢) درج المجلدات: عكست inset-inline-* بالـRTL — وهي أصلاً بتنعكس لحالها. النتيجة صار الدرج بالجهة الغلط. الصح: نترك الـinset منطقي ونعكس الـtransform بس. ═══════════════════════════════════════════════════════════════════ */ /* ── ١) لوحة السياق: fixed فوق كل شي، وبتستجيب أكيد ── */ @media (min-width: 901px) { .mail-shell .mail-ctx { position: fixed !important; top: 0 !important; bottom: 0 !important; inset-inline-end: 0 !important; inset-inline-start: auto !important; width: min(340px, 92vw) !important; height: 100vh !important; z-index: 9500 !important; border-radius: 0 !important; padding-top: 52px !important; background: var(--surface) !important; box-shadow: -22px 0 52px -24px #000c; visibility: hidden; pointer-events: auto !important; transform: translateX(100%); transition: transform .26s cubic-bezier(.32,.72,0,1), visibility 0s .26s; } [dir="rtl"] .mail-shell .mail-ctx { transform: translateX(-100%); } .mail-shell.ctx-open .mail-ctx { visibility: visible; transform: translateX(0) !important; transition: transform .26s cubic-bezier(.32,.72,0,1), visibility 0s; } .mctx-x { top: 13px !important; inset-inline-start: 13px !important; width: 34px !important; height: 34px !important; z-index: 5 !important; } } /* ── ٢) البريد عالتلفون: درج مجلدات عمودي وبالجهة الصح ── */ @media (max-width: 900px) { .mail-shell .mail-folders { flex-direction: column !important; /* قواعد قديمة كانت بتخليها صف */ flex-wrap: nowrap !important; overflow-x: hidden !important; overflow-y: auto !important; align-items: stretch !important; gap: 4px !important; padding: 14px 12px !important; inset-inline-start: 0 !important; inset-inline-end: auto !important; transform: translateX(-100%); } [dir="rtl"] .mail-shell .mail-folders { transform: translateX(100%); } .mail-shell.mfold-open .mail-folders { transform: translateX(0) !important; } /* الأحجام: كانت «الوارد» بتطلع ضخمة لأن تنسيق «المطوي» كان لسا فعّال */ .mail-shell .mail-folders .mf-item { justify-content: flex-start !important; width: 100% !important; padding: 11px 13px !important; font-size: 13px !important; min-height: 44px; flex-shrink: 0 !important; } .mail-shell .mail-folders .mf-ic, .mail-shell .mail-folders .ml-ic { font-size: 15px !important; width: 18px; height: 18px; display: inline-flex !important; align-items: center; justify-content: center; margin: 0 !important; flex-shrink: 0; } .mail-shell .mail-folders .mf-n { display: inline !important; font-size: 13px !important; font-weight: 700; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mail-shell .mail-folders .mf-c { font-size: 10.5px !important; flex-shrink: 0; } .mail-shell .mail-folders .mf-sep { display: block !important; height: 1px; width: 100%; margin: 8px 0 !important; } .mail-shell .mail-folders .ml-lanes { flex-direction: column !important; overflow: visible !important; padding: 0 !important; gap: 4px !important; width: 100%; } .mail-shell .mail-folders .ml-lane { width: 100% !important; justify-content: flex-start !important; border-radius: 11px !important; padding: 10px 13px !important; font-size: 12.5px !important; min-height: 44px; } .mail-shell .mail-folders .ml-lh { display: block !important; font-size: 9px; letter-spacing: 2px; padding: 6px 4px 3px; } .mail-shell .mail-folders .mail-compose { width: 100% !important; height: auto !important; justify-content: center !important; padding: 13px !important; font-size: 13.5px !important; margin-bottom: 10px; } .mail-shell .mail-folders .mail-compose span { display: inline !important; } /* لوحة السياق عالتلفون */ .mail-shell .mail-ctx { position: fixed !important; top: 0 !important; bottom: 0 !important; inset-inline-end: 0 !important; inset-inline-start: auto !important; width: min(320px, 88vw) !important; height: 100vh !important; z-index: 9500 !important; border-radius: 0 !important; padding-top: 52px !important; background: var(--surface) !important; visibility: hidden; transform: translateX(100%); transition: transform .26s cubic-bezier(.32,.72,0,1), visibility 0s .26s; } [dir="rtl"] .mail-shell .mail-ctx { transform: translateX(-100%); } .mail-shell.ctx-open .mail-ctx { visibility: visible; transform: translateX(0) !important; transition: transform .26s cubic-bezier(.32,.72,0,1), visibility 0s; } } /* v264 — خلفية الدرج: عامّة، مش محصورة بالموبايل */ .mfold-back { display: none; position: fixed; inset: 0; background: #040711aa; backdrop-filter: blur(3px); z-index: 9400; } .mfold-back.on { display: block; } /* ═══════════════════════════════════════════════════════════════════ v265 — الدرج بيرجع absolute + بيبيّن عالتلفون ─────────────────────────────────────────────────────────────────── السبب الجذري يلي كشفو محاكي الـcascade: ١) body.late-night عندها filter — وأي filter على أب بيكسر position:fixed ويخلّيه نسبةً لهالأب. فالدرج انزاح لمكان مش موجود. الحل: absolute نسبةً لـ.mail-shell (عندها position:relative). ٢) قاعدة قديمة .mail-ctx { display:none !important } كانت بتخفي اللوحة كلياً عالتلفون — فحتى الزر ما كان بينفع. ═══════════════════════════════════════════════════════════════════ */ .mail-shell { position: relative !important; } .mail-shell .mail-ctx { display: block !important; position: absolute !important; top: 0 !important; bottom: 0 !important; height: auto !important; inset-inline-end: 0 !important; inset-inline-start: auto !important; width: min(320px, 88%) !important; z-index: 60 !important; border-radius: 18px 0 0 18px !important; padding-top: 52px !important; background: var(--surface) !important; border-inline-start: 1px solid var(--border2, var(--border)) !important; box-shadow: -22px 0 52px -24px #000c; overflow-y: auto; visibility: hidden; transform: translateX(100%); transition: transform .26s cubic-bezier(.32,.72,0,1), visibility 0s .26s; } [dir="rtl"] .mail-shell .mail-ctx { transform: translateX(-100%); border-radius: 0 18px 18px 0 !important; } .mail-shell.ctx-open .mail-ctx { visibility: visible !important; transform: translateX(0) !important; transition: transform .26s cubic-bezier(.32,.72,0,1), visibility 0s; } .mctx-x { position: absolute; top: 13px !important; inset-inline-start: 13px !important; width: 34px !important; height: 34px !important; z-index: 5 !important; display: grid !important; place-items: center; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted); cursor: pointer; } .mctx-x:hover { color: var(--text); } /* درج المجلدات عالتلفون: نفس العلّة، نفس الحل */ @media (max-width: 900px) { .mail-shell .mail-folders { position: absolute !important; top: 0 !important; bottom: 0 !important; height: auto !important; z-index: 70 !important; } .mail-shell .mail-ctx { width: min(300px, 90%) !important; z-index: 72 !important; } } /* الخلفية: جوّا الشل، فما بتتأثر بفلاتر الصفحة */ .mail-shell .mfold-back { position: absolute !important; inset: 0 !important; z-index: 55 !important; border-radius: 18px; } /* ═══════════════════════════════════════════════════════════════════ v266 — اللوحة عمود مش غطا · والرسالة بعرضها الكامل ─────────────────────────────────────────────────────────────────── غلطتي: خلّيت اللوحة تعوم فوق القراءة (absolute) — فصارت تغطي الرسالة وما عاد فيك تقراها. الصح: لما تفتح، **تزحّط** عمود القراءة وتاخد عمودها الخاص. ما في تغطية، وما في مشاكل fixed/absolute أصلاً. ═══════════════════════════════════════════════════════════════════ */ @media (min-width: 1101px) { .mail-shell .mail-ctx { position: static !important; transform: none !important; visibility: visible !important; width: auto !important; height: auto !important; inset: auto !important; z-index: auto !important; border-radius: 18px !important; padding-top: 14px !important; box-shadow: none !important; border: 1px solid var(--border) !important; overflow-y: auto; } /* مسكّرة = ما إلها عمود أصلاً */ .mail-shell:not(.ctx-open) .mail-ctx { display: none !important; } .mail-shell.ctx-open .mail-ctx { display: block !important; } /* العمود الرابع بيطلع بس لما تفتح */ .mail-shell.ctx-open, .mail-shell.ctx-open.reading { grid-template-columns: var(--mfold, 200px) 320px minmax(0, 1fr) 300px !important; } .mail-shell.ctx-open.folders-collapsed, .mail-shell.ctx-open.folders-collapsed.reading { grid-template-columns: 58px 320px minmax(0, 1fr) 300px !important; } .mail-shell .mctx-x { position: absolute; top: 10px; inset-inline-start: 10px; } .mail-shell .mfold-back { display: none !important; } /* ما بلزم عتمة */ } @media (min-width: 1500px) { .mail-shell.ctx-open, .mail-shell.ctx-open.reading { grid-template-columns: 210px 360px minmax(0, 1fr) 320px !important; } .mail-shell.ctx-open.folders-collapsed, .mail-shell.ctx-open.folders-collapsed.reading { grid-template-columns: 58px 360px minmax(0, 1fr) 320px !important; } } /* تحت 1100px ما في مساحة لعمود رابع → بتضل درج عائم (متل ما هي) */ /* ── الرسالة بعرض البوكس الكامل ────────────────────────────────── كان max-width:68ch عالبوكس نفسو، فكل رسالة بتطلع مربّع صغير. الصح: البوكس بعرضو الكامل، والثريد كلو محدود بعرض مريح. */ .mail-read .mr-thread { max-width: 1040px; margin-inline: auto; width: 100%; } .mail-read .mr-thread > * { max-width: none !important; margin-inline: 0 !important; } .mr-msg { width: 100%; box-sizing: border-box; } .mr-b { line-height: 1.95; } .mail-shell .mr-reply, .mail-shell .mr-qr { max-width: none !important; margin-inline: 0 !important; width: 100%; } /* ═══════════════════════════════════════════════════════════════════ v267 — السبب الجذري: .page { max-width: 1200px } ─────────────────────────────────────────────────────────────────── كل الصفحات محدودة بـ١٢٠٠px متمركزة — منيح لصفحة نص، كارثة لتطبيق بأربع أعمدة. على شاشة ١٨٦٠ بيصير ٣٣٠px فراغ من كل جهة، والبريد محشور بـ١١٤٤px. من هون طلعت: الفراغ الضخم · القراءة الضيقة · «دوام» يلي بتنقص من شريط الفلاتر · واللوحة يلي ما إلها محل. ═══════════════════════════════════════════════════════════════════ */ #page-mail { max-width: min(1760px, 100%) !important; padding-inline: 20px !important; } @media (max-width: 900px) { #page-mail { padding-inline: 12px !important; } } /* ── الحالة الفاضية: كانت بوكس أبيض ضخم فيه أيقونة وبس ────────── لما ما في رسالة مفتوحة، اللستة هي البطلة — منعطيها العرض، ومنخلّي الفراغ الباقي هادي بلا بوكس ضخم. */ @media (min-width: 1101px) { /* اللستة بتاخد الباقي، والحالة الفاضية بتضل شريط هادي عالجنب */ .mail-shell:not(.reading), .mail-shell:not(.reading).folders-collapsed { grid-template-columns: var(--mfold, 200px) minmax(0, 1fr) minmax(0, 400px) !important; } .mail-shell:not(.reading).folders-collapsed { --mfold: 58px; } .mail-shell:not(.reading) .mail-read { background: transparent !important; border: 1px dashed var(--border) !important; box-shadow: none !important; } } .mail-empty, .mr-empty, .mail-read .empty-state { font-size: 13px; } /* v552 — كانت opacity .55 فوق نصٍّ خافت أصلاً (٢٫٤:١) */ .mail-empty img, .mail-empty .emoji, .mr-empty .emoji { font-size: 30px !important; } /* ── شريط الفلاتر: ولا عنصر بينقص، مهما ضاق العمود ───────────── */ .ml-splits { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; gap: 5px !important; padding: 9px 11px !important; } .ml-splits::-webkit-scrollbar { display: none; } .ml-split { flex: 0 0 auto !important; white-space: nowrap !important; display: inline-flex !important; align-items: center; gap: 5px; } /* ── اللوحة بتاخد راحتها لما في مساحة ──────────────────────────── */ @media (min-width: 1600px) { .mail-shell.ctx-open, .mail-shell.ctx-open.reading { grid-template-columns: 210px minmax(340px, 400px) minmax(0, 1fr) 340px !important; } .mail-shell.ctx-open.folders-collapsed, .mail-shell.ctx-open.folders-collapsed.reading { grid-template-columns: 58px minmax(340px, 400px) minmax(0, 1fr) 340px !important; } } /* ═══════════════════════════════════════════════════════════════════ v268 — قفلة ملف البريد: الرسالة أوسع · الشريط كامل · اللوحة واضحة ═══════════════════════════════════════════════════════════════════ */ /* ── ١) الرسالة بعرضها الحقيقي ──────────────────────────────────── padding-inline كان 4vw = ٧٤px من كل جهة على شاشة ١٨٦٠ = ١٤٨px مأكولة من عرض الرسالة بلا فايدة. صار ثابت ومعقول. */ .mail-read .mr-thread { max-width: 1180px !important; padding-inline: 22px !important; } @media (min-width: 1600px) { .mail-read .mr-thread { max-width: 1280px !important; padding-inline: 26px !important; } } .mr-msg { padding-inline: 20px !important; } /* ── ٢) شريط الفلاتر: اللستة توسّع لتسعو كامل ──────────────────── الشريط بدو ~٤٥٠px لخمس تبويبات. كانت اللستة ٣٨٠ فـ«دوام» بتنقص. */ @media (min-width: 1101px) { .mail-shell.reading, .mail-shell.reading.folders-collapsed { grid-template-columns: var(--mfold, 200px) minmax(440px, 470px) minmax(0, 1fr) !important; } .mail-shell.reading.folders-collapsed { --mfold: 58px; } .mail-shell.ctx-open, .mail-shell.ctx-open.reading { grid-template-columns: var(--mfold, 200px) minmax(430px, 460px) minmax(0, 1fr) 320px !important; } .mail-shell.ctx-open.folders-collapsed, .mail-shell.ctx-open.folders-collapsed.reading { --mfold: 58px; } } @media (min-width: 1600px) { .mail-shell.ctx-open, .mail-shell.ctx-open.reading { grid-template-columns: var(--mfold, 210px) minmax(450px, 480px) minmax(0, 1fr) 340px !important; } } /* chips أنحف — بتوفّر ~٥٠px */ .ml-split { padding: 6px 10px !important; font-size: 11px !important; gap: 4px !important; } .ml-splits { gap: 4px !important; padding: 8px 10px !important; -webkit-mask-image: linear-gradient(to left, #000 92%, transparent 100%); } [dir="ltr"] .ml-splits { -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%); } /* ── ٣) زر اللوحة: نص واضح بدل أيقونة عين غامضة ─────────────── */ .mrt-btn.mrt-drawer { width: auto !important; padding: 0 11px !important; gap: 6px; font-size: 11.5px; font-weight: 800; white-space: nowrap; } .mrt-btn.mrt-drawer .mrt-lbl { display: inline; } .mrt-btn.mrt-drawer.on { background: color-mix(in srgb, var(--accent) 16%, transparent) !important; border-color: var(--accent) !important; color: var(--accent-fg) !important; } @media (max-width: 1100px) { .mrt-btn.mrt-drawer .mrt-lbl { display: none; } } /* ── ٤) الرد عالتلفون: مقاس مضبوط ───────────────────────────── */ @media (max-width: 900px) { .mail-read .mr-thread { max-width: none !important; padding-inline: 12px !important; } .mr-msg { padding-inline: 14px !important; } .mail-shell .mr-reply, .mail-shell .mr-qr { margin: 12px 12px calc(18px + env(safe-area-inset-bottom)) !important; border-radius: 15px !important; } .mail-shell .mr-reply textarea, .mail-shell .mr-qr textarea { min-height: 96px !important; max-height: 40vh; font-size: 16px !important; /* ١٦px بيمنع iOS من تكبير الصفحة */ line-height: 1.85 !important; padding: 13px 14px !important; } .mail-shell .mr-c-tools, .mail-shell .mr-reply-f { display: flex !important; flex-wrap: wrap; gap: 7px; padding: 10px 12px !important; } .mail-shell .mr-c-tools button, .mail-shell .mr-reply-f button { min-height: 44px; } .mail-shell .mr-send, .mail-shell .mr-reply .send { flex: 1 1 auto; justify-content: center; } } /* v268b — تحت ١٥٠٠px ما في مساحة لأربع أعمدة. بدل ما ننضغط الكل، الملخّص بياخد مكان اللستة — وإنت أصلاً عم تقرا رسالة، فاللستة مش لازمة هلق. القراءة بتضل عريضة والشريط ما بينقص. */ /* v569 — «عمود المجلّدات ٥٨px والأسماء مقصوصة»: هنا كان يُفرض ٥٨px على عمودٍ لم يُطوَ (بلا الصنف folders-collapsed) — فتُرسم الأسماء كاملةً في عرض أيقونة («ر»، «II»، «بريد جديد» على سطرين). العرض الآن عرض العمود كما اختاره صاحبه: ٢٠٠ مفتوحاً، و٥٨ حين يطويه بنفسه (القاعدة .folders-collapsed { --mfold: 58px } تتولّاه). */ @media (min-width: 1101px) and (max-width: 1499px) { .mail-shell.ctx-open.reading, .mail-shell.ctx-open.reading.folders-collapsed { grid-template-columns: var(--mfold, 200px) minmax(0, 1fr) 320px !important; } .mail-shell.ctx-open.reading .mail-list { display: none !important; } } /* ═══════════ v415 — الطلب النصّي: فقرات وتعاون ═══════════ */ /* v541 — عرض .rv-wide انتقل إلى القاعدة الواحدة في كتلة v541 */ .rqp-box { border: 1px solid var(--border); border-radius: 14px; background: var(--surface2); padding: 14px 16px; margin: 4px 0 16px; } .rqp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .rqp-t { font-size: 13px; font-weight: 700; } .rqp-n { font-size: 11px; color: var(--text-muted); } .rqp-who { margin-inline-start: auto; font-size: 11.5px; color: var(--text-muted); display: inline-flex; gap: 6px; align-items: baseline; } .rq-live { color: var(--accent-fg); font-weight: 700; } .rqp-rows { display: flex; flex-direction: column; gap: 8px; } .rqp-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); padding: 10px 12px; } .rqp-row.done .rqp-txt { text-decoration: line-through; color: var(--text-muted); } /* v621 — الخفوت بلون النصّ لا بالشفافيّة: الشفافيّة تُنزل النصّ الخافت تحت ٣:١ (tf-view v621 · كلّ الثيمات) */ /* v417 — أدوات الفقرة جوّاها: يد التوزيع وقائمة الزملاء الإنلاين */ .rqp-row { position: relative; flex-wrap: wrap; } .rqp-row.asg .rqp-txt { color: var(--text-muted); } /* v621 — بلونه لا بالشفافيّة */ .rqp-hand { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform .12s, border-color .12s; } .rqp-hand:hover { border-color: var(--accent); color: var(--accent-fg); } .rqp-hand:active { transform: scale(.965); } .rqp-menu { display: none; flex-basis: 100%; align-items: center; gap: 7px; flex-wrap: wrap; padding: 8px 10px; margin-top: 6px; border: 1px dashed var(--border); border-radius: 10px; background: color-mix(in srgb, var(--surface2) 70%, transparent); font-size: 11.5px; color: var(--text-muted); } .rqp-menu.open { display: flex; } .rqp-menu button { border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font-family: inherit; font-size: 11.5px; font-weight: 600; padding: 6px 12px; cursor: pointer; } .rqp-menu button:hover { border-color: var(--accent); color: var(--accent-fg); } /* v621 — كان .rqp-box.ro .rqp-head { opacity: .85 }: أعداد الأقسام بألوانها تحت ٤٫٥ في الفاتحة — الرأس كما هو */ /* ═══════════════════════════════════════════════════════════════ v417 · ورقة الإجازة — طبق الأصل بالخطوط والجداول الرندر screen كان حقول تطبيق عادية؛ محمد: «بدي نفس الورقة يلي بعتلك ياها بالظبط». كل شي هون محصور بـ.hrf-paper فما بيلمس التطبيق. ═══════════════════════════════════════════════════════════════ */ .hrf-paper { background: #fff; color: #111; font-family: 'IBM Plex Sans Arabic', Arial, sans-serif; border: 1px solid #c9ccd2; box-shadow: 0 8px 30px -16px rgba(0,0,0,.3); padding: 24px 26px 16px; margin: 0 auto; max-width: 840px; font-size: 12px; line-height: 1.5; } .hrf-paper * { box-sizing: border-box; } .hrf-paper .hrp-head { display: flex; border: 1.5px solid #333; } .hrf-paper .hrp-hl { flex: 1; padding: 12px 14px; } .hrf-paper .hrp-hl h1 { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: .2px; line-height: 1.45; white-space: pre-line; } .hrf-paper .hrp-logo-cell { width: 168px; border-inline-start: 1.5px solid #333; display: flex; align-items: center; justify-content: center; padding: 8px; } .hrf-paper .hrp-logo { max-width: 140px; max-height: 54px; object-fit: contain; } .hrf-paper .hrp-hr { display: flex; border: 1.5px solid #333; border-top: 0; font-size: 10.5px; font-weight: 700; } .hrf-paper .hrp-hr span { padding: 6px 12px; } .hrf-paper .hrp-hr .hrp-hrv { flex: 1; border-inline: 1.5px solid #333; font-weight: 600; } .hrf-paper .hrp-hr .hrp-ver { width: 168px; text-align: center; white-space: pre-line; font-weight: 600; } .hrf-paper .tplb-sec { font-size: 12.5px; font-weight: 700; text-decoration: underline; margin: 14px 0 6px; color: #111; } .hrf-paper .hrf-grid { display: grid; grid-template-columns: repeat(var(--cols, 1), 1fr); border: 1.5px solid #333; border-inline-end: 0; } .hrf-paper .hrf-grid .field { border-inline-end: 1.5px solid #333; margin: 0; } .hrf-paper .hrf-grid .field label { display: block; text-align: center; font-size: 11px; font-weight: 700; color: #111; padding: 6px 6px; border-bottom: 1.5px solid #333; background: #fff; } .hrf-paper .ac-input, .hrf-paper .ac-textarea { width: 100%; border: none; outline: none; border-radius: 0; background: #fff; color: #111; font: inherit; font-size: 12px; padding: 8px 9px; } .hrf-paper .hrf-sb { border: 1.5px solid #333; padding: 12px 16px 4px; } .hrf-paper .tplb-types { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto); gap: 2px 26px; padding: 0 0 6px; } .hrf-paper .tplb-type { display: flex; align-items: center; gap: 9px; border: none; background: none; color: #111; font: inherit; font-size: 12px; padding: 4px 0; cursor: pointer; text-align: start; } .hrf-paper .tplb-type::before { content: ""; width: 14px; height: 14px; border: 1.5px solid #333; border-radius: 2px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; color: #111; } .hrf-paper .tplb-type.selected::before { content: "✕"; } .hrf-paper .clp-note { font-size: 10.5px; font-style: italic; color: #333; margin: 4px 0 10px; } .hrf-paper .field:not(.hrf-grid .field) { margin: 4px 0 10px; } .hrf-paper .field:not(.hrf-grid .field) > label { font-size: 11.5px; font-weight: 700; text-decoration: underline; color: #111; } .hrf-paper .field .ac-textarea { border: 1.5px solid #333; min-height: 54px; margin-top: 4px; resize: vertical; } .hrf-paper .field:not(.hrf-grid .field) .ac-input { border: 1.5px solid #333; margin-top: 4px; } .hrf-paper .tplb-two { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 8px 18px; align-items: center; margin: 10px 0; } .hrf-paper .tplb-two .field { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 8px; margin: 0 !important; } .hrf-paper .tplb-two .field > label { text-decoration: none !important; font-weight: 600 !important; font-size: 11px !important; } .hrf-paper .tplb-two .field .ac-input { margin-top: 0 !important; } .hrf-paper .tplb-two > div:first-child { font-size: 11.5px !important; font-weight: 700 !important; text-decoration: underline; opacity: 1 !important; align-self: center; grid-column: auto !important; } .hrf-paper .hrf-banner { border: 1.5px solid #333; border-top: 0; background: #e9e9e9; text-align: center; font-size: 11.5px; font-weight: 700; padding: 6px; margin: 0; } .hrf-paper .hrf-banner + .field { border: 1.5px solid #333; border-top: 0; padding: 6px 10px 10px; margin: 0 0 8px !important; } .hrf-paper .hrf-banner + .field > label { text-decoration: underline !important; } .hrf-paper .hrf-banner + .field .ac-textarea { border-width: 1px; min-height: 30px; } .hrf-paper .hrf-sign { display: grid; grid-template-columns: 1fr 1.1fr 1.1fr; border: 1.5px solid #333; border-inline-end: 0; margin-top: 14px; margin-bottom: 0; } .hrf-paper .hrf-sc { border-inline-end: 1.5px solid #333; padding: 10px 12px; } .hrf-paper .hrf-sc > b { display: block; text-align: center; font-size: 11.5px; border-bottom: 1.5px solid #333; margin: -10px -12px 10px; padding: 7px; } .hrf-paper .hrf-ap { display: flex; gap: 16px; margin-bottom: 8px; font-size: 11.5px; } .hrf-paper .hrf-ap label { display: flex; align-items: center; gap: 6px; cursor: pointer; } .hrf-paper .hrf-ap input { accent-color: #111; } .hrf-paper .hrf-sr { display: grid; grid-template-columns: 62px 1fr auto; gap: 7px; align-items: center; margin: 7px 0; } .hrf-paper .hrf-sr label { font-size: 11px; font-weight: 600; } .hrf-paper .hrf-sr .ac-input { border: 1.5px solid #333; padding: 6px 8px; font-size: 11.5px; } .hrf-paper .hrf-pad { width: 100%; height: 46px; border: 1.5px solid #333; background: #fff; border-radius: 0; grid-column: 2; } .hrf-paper .hrf-sig-clr { border: 1px solid #999; background: #f4f4f4; color: #333; font: inherit; font-size: 10px; padding: 3px 8px; cursor: pointer; border-radius: 3px; } .hrf-paper .hrp-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; color: #333; margin-top: 20px; border-top: 3px solid #2b3a8f; padding-top: 5px; } .hrf-langs { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; flex: 0 0 auto; } .hrf-langbtn { border: none; background: var(--surface2); color: var(--text-muted); font-family: inherit; font-size: 11.5px; font-weight: 700; padding: 8px 14px; cursor: pointer; } .hrf-langbtn.on { background: var(--accent); color: var(--accent-ink, #0a0e1a); } /* v419 — بادج الاطّلاع للمونتاج + تركيز بطاقات الحر */ .rw-view { font-size: 11px; font-weight: 700; color: var(--text-muted); border: 1px dashed var(--border); border-radius: 9px; padding: 6px 12px; white-space: nowrap; } .fr-card { border-inline-start: 3px solid var(--cc, var(--border)); } .fr-card > b, .fr-card .fr-t { font-weight: 700; } /* ═══ v420 · الطلب النصّي — «الورقة والهامش» (النموذج المعتمد) ═══ */ .rq-margin { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; padding: 10px 14px; margin: 0 0 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface2); font-size: 12px; color: var(--text-muted); } .rq-margin b { color: var(--text); font-weight: 700; } .rq-margin .rqmg-sp { flex: 1; } .rq-margin .rqmg-ok { color: var(--ok, #1fa06a); font-weight: 600; } .rq-margin .rqmg-air b { color: var(--danger, #e04545); } .rq-led { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); flex-shrink: 0; } .rq-led.go { background: var(--ok, #1fa06a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok, #1fa06a) 20%, transparent); } .rq-accept { display: block; margin: 14px auto 6px; border: none; border-radius: 12px; background: var(--accent); color: var(--accent-ink, #0a0e1a); font-family: inherit; font-weight: 700; font-size: 13.5px; padding: 12px 30px; cursor: pointer; box-shadow: 0 10px 24px -12px var(--accent); transition: transform .13s ease, filter .13s; } .rq-accept:hover { filter: brightness(1.07); } .rq-accept:active { transform: scale(.965); } /* الورقة: النصّ هو البطل — بلا صندوق جوّا صندوق */ .rv-raw .rqp-box { border: none; background: none; padding: 0; } .rv-raw .rqp-row { border-bottom: 1px dashed var(--border); border-radius: 0; background: none; padding: 11px 2px; } .rv-raw .rqp-row:last-child { border-bottom: 0; } .rv-raw .rqp-txt { font-size: 14.5px; line-height: 1.75; } .rv-raw .rqp-idx { width: 22px; height: 22px; border: 1.5px solid var(--border); border-radius: 7px; display: inline-grid; place-items: center; font-size: 11px; } /* v421 — الدفعة الأولى من نقاش محمد */ .rv-raw #report-read-box { display: none; } .rq-margin.done { border-color: color-mix(in srgb, var(--ok, #1fa06a) 45%, var(--border)); background: color-mix(in srgb, var(--ok, #1fa06a) 7%, var(--surface2)); } .rq-margin .rqmg-done { color: var(--ok, #1fa06a); font-weight: 700; } .rq-led.ok { background: var(--ok, #1fa06a); box-shadow: none; } .rq-mini { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; margin-bottom: 8px; background: var(--surface2); } .rq-mini b, .rq-mini .mono { color: var(--text); } .rq-mini.done { border-color: color-mix(in srgb, var(--ok, #1fa06a) 40%, var(--border)); color: var(--ok, #1fa06a); } .req-card { position: relative; } .rc-pop { position: absolute; top: 8px; inset-inline-start: 8px; width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-muted); cursor: pointer; font-size: 13px; line-height: 1; z-index: 2; } .rc-pop:hover { color: var(--accent-fg); border-color: var(--accent); } .rqp-menu { flex-direction: column; align-items: stretch; } .rqp-menu > span { font-weight: 700; color: var(--text); } .rqp-names { display: flex; flex-wrap: wrap; gap: 7px; } .rqp-names button { position: relative; padding-inline-start: 22px; } .rqp-names button::before { content: ""; position: absolute; inset-inline-start: 9px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--ok, #1fa06a); } .rqp-names button.busy::before { background: #e8a020; } .rqe-ov { position: fixed; inset: 0; z-index: 2147483200; background: rgba(14, 16, 26, .45); display: grid; place-items: center; padding: 18px; } .rqe-box { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px; width: min(560px, 100%); display: grid; gap: 12px; box-shadow: 0 24px 60px -28px rgba(0,0,0,.5); } .rqe-old { font-size: 12px; color: var(--text-muted); border: 1px dashed var(--border); border-radius: 10px; padding: 9px 11px; line-height: 1.7; max-height: 120px; overflow: auto; } .rqe-old span { display: block; font-weight: 700; margin-bottom: 4px; } .rqe-ta { border: 1px solid var(--border); border-radius: 11px; background: var(--surface2); color: var(--text); font: inherit; font-size: 13.5px; line-height: 1.7; padding: 10px 12px; resize: vertical; } .rqe-btns { display: flex; gap: 9px; justify-content: flex-end; } .rqe-btns button { border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); color: var(--text); font: inherit; font-weight: 600; padding: 9px 18px; cursor: pointer; } .rqe-btns .rqe-save { background: var(--accent); color: var(--accent-ink, #0a0e1a); border-color: var(--accent); font-weight: 700; } .ai-key-sv { display: inline-block; margin-top: 5px; font-size: 11px; font-weight: 700; color: var(--text-muted); } .ai-key-sv.on { color: var(--ok, #1fa06a); } /* v422 — زر إغلاق نافذة الرسائل بنمط أزرار البرنامج، مش ✕ نظامية */ .msg-close { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; transition: transform .12s, border-color .12s; } .msg-close:hover { border-color: var(--accent); color: var(--accent-fg); } .msg-close:active { transform: scale(.965); } /* v423 — المساران المتوازيان: سطرا المسارات والشطب المزدوج */ .rq-lanes { display: grid; gap: 8px; margin: 0 0 12px; } .rq-lane { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); border: 1px dashed var(--border); border-radius: 11px; padding: 8px 12px; } .rq-lane b { color: var(--text); } .rq-lane.work { border-style: solid; } .rq-lane.done { border-style: solid; border-color: color-mix(in srgb, var(--ok, #1fa06a) 40%, var(--border)); background: color-mix(in srgb, var(--ok, #1fa06a) 6%, transparent); } .rq-accept.sm { display: inline-block; margin: 0 0 0 auto; padding: 7px 16px; font-size: 12px; box-shadow: none; } .rqp-duo { display: inline-flex; gap: 5px; flex-shrink: 0; } .rqp-duo .rqp-chk { width: 30px; font-size: 13px; } .rqp-st { width: 26px; height: 30px; display: inline-grid; place-items: center; font-size: 13px; opacity: .25; } .rqp-st.on { opacity: 1; } /* v424 — دفعة النقاش الثانية */ .rqp-txt { flex: 1 1 auto; min-width: 220px; } .rqp-menu { order: 9; } .rq-lanes { grid-template-columns: 1fr 1fr; } @media (max-width: 640px) { .rq-lanes { grid-template-columns: 1fr; } } .rqp-row.mine-done .rqp-txt { text-decoration: line-through; color: var(--text-muted); } /* v621 — بلونه لا بالشفافيّة */ .rqp-legend { font-size: 10.5px; color: var(--text-muted); font-weight: 600; } .rq-lane.paused { border-color: color-mix(in srgb, #e8a020 45%, var(--border)); background: color-mix(in srgb, #e8a020 7%, transparent); } .rq-pausebtn { margin-inline-start: auto; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text-muted); cursor: pointer; } .rq-pausebtn:hover { border-color: var(--accent); color: var(--accent-fg); } .rqmg-pri { color: var(--danger); font-weight: 700; } /* ═══ v524 — مسار المونتاج وحدةً واحدة + باب المصمّم النادر ═══ عمودٌ واحد (لا شبكة المسارين)، وزرّا التسليم والردّ يتقاسمان صفّاً: التسليم يمين والردّ يسار. باب التجاوز محايد اللون ومعزول في طرف الصفّ — قاعدة الأزرار: ما يُتراجَع عنه بصعوبة لا يُلوَّن ولا يُقرَّب. */ .rq-mlane { grid-template-columns: 1fr; margin-top: 4px; } .rq-mlane .rq-handrow { margin: 0; } .rq-mlane .rq-handrow > .rq-airbtn { display: block; width: auto; flex: 2 1 200px; margin: 0; } .rq-mlane .rq-handrow > .rq-decline { flex: 1 1 140px; } .rq-gate { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); border: 1px dashed color-mix(in srgb, #8a5cd6 40%, var(--border)); border-radius: 11px; padding: 8px 12px; } .rq-gate-t { font-weight: 600; color: color-mix(in srgb, #8a5cd6 78%, var(--text)); } .rq-gate-skip { margin-inline-start: auto; border: 1px dashed var(--border); border-radius: 10px; background: transparent; color: var(--text-muted); font: inherit; font-weight: 600; font-size: 11.5px; padding: 6px 12px; cursor: pointer; transition: transform .12s, border-color .12s, color .12s; } .rq-gate-skip:hover { border-color: color-mix(in srgb, var(--text) 45%, var(--border)); color: var(--text); } .rq-gate-skip:active { transform: scale(.965); } .rq-mlane-cards { margin: 10px 0 0; } @media (max-width: 480px) { .rq-gate-skip { min-height: 44px; margin-inline-start: 0; width: 100%; } } .rv-raw .vi-panel { display: none; } .rq-team { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; } .rq-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); padding: 6px 12px 6px 8px; } .rq-chip img, .rq-chip i { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--accent); color: var(--accent-ink, #0a0e1a); display: inline-grid; place-items: center; font-style: normal; font-weight: 700; font-size: 13px; flex-shrink: 0; } .rq-chip b { display: block; font-size: 12px; line-height: 1.2; } .rq-chip small { font-size: 10px; color: var(--text-muted); } .rq-mats { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 12px; } .rq-matled { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); border: 1px dashed var(--border); border-radius: 10px; padding: 6px 11px; } .rq-matled::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--border); } .rq-matled.on { color: var(--text); border-style: solid; border-color: color-mix(in srgb, var(--ok, #1fa06a) 40%, var(--border)); } .rq-matled.on::before { background: var(--ok, #1fa06a); } .rq-matled button { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 10.5px; padding: 3px 9px; cursor: pointer; } /* v425 — «النص برا البوكس»: الصف شبكة بأعمدة محمية — ولا شي بيطلع برّا */ .rqp-row { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; } .rqp-row .rqp-txt { min-width: 0; } .rqp-row .rqp-menu { grid-column: 1 / -1; order: unset; } .rqp-row:has(.rqp-menu.open) .rqp-hand, .rqp-hand:active { background: var(--accent); color: var(--accent-ink, #0a0e1a); border-color: var(--accent); } /* v425 — كتلة المونتاج بالإرسال: معنونة وواضحة بمحلّها */ .fr-montbox { border: 1px dashed color-mix(in srgb, #8a5cd6 45%, var(--border)); border-radius: 13px; padding: 11px 14px; margin: 10px 0; } .fr-montbox > b { display: block; font-size: 12px; margin-bottom: 8px; } .fr-montrow { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } @media (max-width: 640px) { .fr-montrow { grid-template-columns: 1fr; } } .fr-montrow select, .fr-montrow input { border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); color: var(--text); font: inherit; font-size: 12.5px; padding: 9px 11px; } /* v425 — «المحرر والمنتج والعنوان بمكان واحد فقط»: صفوف الجانب المكررة تختفي بالنصّي */ .rv-raw .detail-row { display: none; } /* ═══ v427 — الصور والعدّادات · الغلاس · لون العمود ═══ */ .rq-wks { display: inline-flex; gap: 7px; flex-wrap: wrap; align-items: center; } .rq-wk { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px 3px 3px; background: var(--surface); position: relative; } .rq-wk img, .rq-wk i { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--accent); color: var(--accent-ink, #0a0e1a); display: inline-grid; place-items: center; font-style: normal; font-weight: 700; font-size: 12px; } .rq-wk .rq-live { font-size: 11.5px; font-weight: 700; } .rq-wk.fin { border-color: color-mix(in srgb, var(--ok, #1fa06a) 55%, var(--border)); background: color-mix(in srgb, var(--ok, #1fa06a) 8%, var(--surface)); } .rq-wk.fin img, .rq-wk.fin i { box-shadow: 0 0 0 2px var(--ok, #1fa06a); } .rq-wk.fin .rq-live { color: var(--ok, #1fa06a); } .rq-lane-t { font-weight: 700; color: var(--text); } .rqp-start { border: 1px solid var(--accent); border-radius: 9px; background: var(--accent); color: var(--accent-ink, #0a0e1a); font: inherit; font-weight: 700; font-size: 11px; padding: 5px 12px; cursor: pointer; white-space: nowrap; } .rqp-asg.mine { border-color: var(--accent); color: var(--text); font-weight: 700; } /* لوحة المصمم: صور المنفّذين بعدّاداتهم */ .grc-who { display: inline-flex !important; align-items: center; gap: 5px; padding: 2px 8px 2px 2px !important; } .grc-who img, .grc-who i { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: var(--accent); color: var(--accent-ink, #0a0e1a); display: inline-grid; place-items: center; font-style: normal; font-weight: 700; font-size: 11px; } .grc-who .rq-live { font-size: 10.5px; font-weight: 700; } .grc-who.fin { border-color: color-mix(in srgb, var(--ok, #1fa06a) 50%, var(--border)); } .grc-who.fin .rq-live { color: var(--ok, #1fa06a); } /* ═══ v429 — رنداون اليوم: المنتج والبث بيعرفوا بنظرة ═══ */ .rd-wrap { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); margin-bottom: 16px; overflow: hidden; } .rd-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); background: color-mix(in srgb, var(--surface) 74%, transparent); position: sticky; top: 0; z-index: 2; } .rd-head b { font-size: 14px; } .rd-sum { font-size: 12px; font-weight: 700; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; } .rd-sum.all { color: var(--ok, #1fa06a); border-color: color-mix(in srgb, var(--ok, #1fa06a) 45%, var(--border)); } .rd-refresh { margin-inline-start: auto; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface2); color: var(--text-muted); cursor: pointer; } .rd-empty { font-size: 12px; color: var(--text-muted); } .rd-bul-h { font-size: 12px; font-weight: 700; color: var(--text-muted); padding: 10px 16px 6px; display: flex; gap: 8px; align-items: center; } .rd-row { display: grid; grid-template-columns: 28px 22px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 16px; border-top: 1px solid var(--border); cursor: pointer; font-size: 12.5px; transition: background .12s; } .rd-row:hover { background: var(--surface2); } .rd-row .rd-n, .rd-row .rd-air { color: var(--text-muted); font-size: 11.5px; } .rd-row .rd-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rd-row .rd-st { font-size: 11px; font-weight: 700; color: var(--text-muted); white-space: nowrap; } .rd-row.ready .rd-ic, .rd-row.ready .rd-st { color: var(--ok, #1fa06a); } .rd-row.work .rd-ic, .rd-row.work .rd-st { color: var(--accent-fg); } .rd-row.late { background: color-mix(in srgb, #e04545 8%, transparent); } .rd-row.late .rd-st, .rd-row.late .rd-air { color: var(--danger); font-weight: 700; } @media (max-width: 640px) { .rd-row { grid-template-columns: 24px 20px minmax(0, 1fr); row-gap: 4px; } .rd-row .rd-st, .rd-row .rd-air { grid-column: 3; } } /* ═══ الغلاس: طبقة التحكّم فقط (blur)، والبطاقات غلاس بصري بلا blur ═══ */ .req-kanban-col > .rqk-head, .kanban-col > .kb-head, .board-head, .rqk-head { backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); background: color-mix(in srgb, var(--surface) 72%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--col-color, var(--border)) 40%, var(--border)); position: sticky; top: 0; z-index: 3; border-radius: 13px 13px 0 0; } .req-kanban-col, .kanban-col { background: linear-gradient(180deg, color-mix(in srgb, var(--col-color, var(--border)) 7%, var(--surface)) 0%, var(--surface) 42%) !important; border-top: 2px solid color-mix(in srgb, var(--col-color, var(--border)) 65%, transparent) !important; box-shadow: 0 16px 40px -30px rgba(0, 0, 0, .45); } .req-card, .task-card, .gr-report { background: color-mix(in srgb, var(--surface) 88%, transparent) !important; border: 1px solid color-mix(in srgb, var(--border) 85%, transparent) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent), 0 10px 24px -20px rgba(0,0,0,.4); } .req-card:hover, .task-card:hover, .gr-report:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)) !important; } @media (max-width: 480px) { .rq-pausebtn, .rc-pop { width: 44px; height: 44px; } .rq-chip { min-height: 44px; } .rq-chip img, .rq-chip i { width: 44px; height: 44px; } .rq-matled button { min-height: 44px; padding: 8px 14px; } .rqp-st { min-width: 44px; min-height: 44px; } } /* ═══ v417 · الإعدادات: طيّ موحّد لكل بطاقة — بلا مساحات فاضية ═══ */ .card.tfs-fold > .card-title { display: flex; align-items: center; gap: 8px; user-select: none; } .tfs-arrow { font-size: 10px; color: var(--text-muted); transition: transform .18s; flex-shrink: 0; } .card.tfs-fold.folded .tfs-arrow { transform: rotate(-90deg); } .card.tfs-fold.folded > *:not(.card-title) { display: none !important; } .card.tfs-fold.folded { padding-bottom: 14px; } /* v417 — الطلب الخام النصّي: الفقرات هي المهمة — صناديق المهام الفارغة و«خطوتك الجاية» بتختفي، فيهدى الوجه ويتوحّد عند الكل */ .rv-raw #dtb-designer, .rv-raw #dtb-montage, .rv-raw .rqm-next, .rv-raw .rqm-listwrap, .rv-raw .co-bar, .rv-raw .rqm-line { display: none !important; } .rqp-row.edited { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } /* v461 — شارة نوع الوسم: تُقرأ قبل النصّ فيعرف القسمُ ما هو مطلوب منه قبل أن يقرأ الفقرة. محايدة اللون: اللون للمعنى العاجل وحده. */ .rqp-kind { display: inline-flex; align-items: center; gap: 5px; margin-inline-end: 7px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; color: var(--text-muted); border: 1px solid var(--border); background: color-mix(in srgb, var(--surface2) 60%, transparent); vertical-align: middle; } .rqp-kest { font-style: normal; font-size: 10px; } /* v621 — بلا شفافيّة (كانت .75: ٢٫٨ على الفاتحة) */ /* ═══ v524 — هويّة الفقرة وعقدها ═══ الرصيف بلون القسم على الصفّ (أزرق جرافيك · أحمر مونتاج · بنفسجي للقسمين) — اللون للمعنى: مَن صاحبُ الفقرة. الشارة تقول القسم ثمّ النوع، ورقاقتا المادّة والصوت تجيبان سؤال المونتير قبل أن يسأله. */ .rqp-row.lane-g { border-inline-start: 3px solid var(--lane-g); } /* v621 — ألوان الأقسام من الثيم (tf-themes.css) */ .rqp-row.lane-m { border-inline-start: 3px solid var(--lane-m); } .rqp-row.lane-b { border-inline-start: 3px solid var(--lane-b); } .rqp-kind.kg { border-color: color-mix(in srgb, var(--lane-g) 50%, var(--border)); color: color-mix(in srgb, var(--lane-g) 65%, var(--text)); } /* v621 — ألوان الأقسام من الثيم */ .rqp-kind.km { border-color: color-mix(in srgb, var(--lane-m) 50%, var(--border)); color: color-mix(in srgb, var(--lane-m) 65%, var(--text)); } .rqp-kind.kb { border-color: color-mix(in srgb, var(--lane-b) 50%, var(--border)); color: color-mix(in srgb, var(--lane-b) 65%, var(--text)); } .rqp-dept { font-weight: 700; } .rqp-contract { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .rqp-contract i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--text); border: 1px solid color-mix(in srgb, var(--lane-m) 40%, var(--border)); border-radius: 8px; padding: 3px 9px; background: color-mix(in srgb, var(--lane-m) 6%, transparent); } /* v621 — من الثيم */ .rqp-contract.miss i { color: var(--text-muted); border-style: dashed; background: transparent; } /* v526 — ما اكتمل صلب، وما ينقص منقّط بلون التنبيه — كلٌّ باسمه */ .rqp-contract i { display: inline-flex; align-items: center; gap: 4px; } .rqp-contract i.ok { color: var(--text); border-style: solid; background: color-mix(in srgb, var(--lane-m) 6%, transparent); } /* v621 — لون المونتاج من الثيم */ .rqp-contract i.no { color: color-mix(in srgb, var(--tf-warn, #e8a33d) 70%, var(--text)); border-style: dashed; border-color: color-mix(in srgb, var(--tf-warn, #e8a33d) 55%, var(--border)); background: transparent; } .rq-mpg, .rq-mpm, .rq-mps { display: inline-flex; align-items: center; gap: 4px; } .rq-mparts { border-top: 1px solid color-mix(in srgb,#8a5cd6 25%,var(--border)); background: var(--surface); } .rq-mph { display: flex; align-items: center; gap: 8px; padding: 8px 13px 4px; font-size: 11px; font-weight: 700; color: var(--text-muted); } .rq-mph em { font-style: normal; font-size: 10.5px; color: var(--text); } .rq-mp { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 6px 13px; font-size: 11.5px; border-top: 1px dashed color-mix(in srgb, var(--text) 10%, transparent); border-inline-start: 3px solid transparent; } .rq-mp.kg { border-inline-start-color: var(--lane-g); } /* v621 — من الثيم */ .rq-mp.km { border-inline-start-color: var(--lane-m); } .rq-mp.kn { border-inline-start-color: color-mix(in srgb, var(--text-muted) 45%, transparent); opacity: .8; } /* v601 — سرد */ .rq-mp.kb { border-inline-start-color: var(--lane-b); } .rq-mp > b { width: 18px; font-size: 10.5px; color: var(--text-muted); } .rq-mpl { font-weight: 700; color: var(--text); } .rq-mpt { flex: 1 1 200px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rq-mpg, .rq-mpm, .rq-mps { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--text-muted); border: 1px dashed var(--border); border-radius: 7px; padding: 1px 7px; white-space: nowrap; } .rq-mpg.on { color: var(--ok, #1fa06a); border-style: solid; border-color: color-mix(in srgb, var(--ok, #1fa06a) 45%, var(--border)); } .rq-mpm.on, .rq-mps.on { color: var(--text); border-style: solid; } .rq-mp.miss .rq-mpm:not(.on), .rq-mp.miss .rq-mps:not(.on) { color: color-mix(in srgb, #e8a020 75%, var(--text)); border-color: color-mix(in srgb, #e8a020 50%, var(--border)); } .rqp-idx { width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: var(--text-muted); } .rqp-chk { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--border); background: transparent; color: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .12s; } .rqp-chk.on { background: var(--success, #3f9d6e); border-color: var(--success, #3f9d6e); color: var(--success-ink); } .rqp-chk:active { transform: scale(.9); } .rqp-txt { font-size: 13px; line-height: 1.95; white-space: pre-wrap; } .rqp-side { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; } .rqp-asg { font-size: 9.5px; border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; color: var(--text-muted); } .rqp-ed { display: inline-flex; align-items: center; gap: 5px; font-family: inherit; font-size: 9.5px; font-weight: 700; color: var(--accent-fg); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 999px; padding: 2px 9px; cursor: pointer; } .rqp-led { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: rqLed 1.2s ease-in-out infinite; } @keyframes rqLed { 0%,100%{opacity:1} 50%{opacity:.3} } /* v619 — أزرار الفقرة (▲ ▼ ✎ 🗑 🎨/🎬) صارت «⋯» ومقبض سحب — الأنماط في كتلة v619 */ .rqp-actions { margin-top: 12px; display: flex; gap: 8px; } .rqp-accept { flex: 1; border: none; border-radius: 12px; background: var(--accent); color: var(--accent-ink, #0a0e1a); font-family: inherit; font-size: 13px; font-weight: 700; padding: 11px 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: transform .12s, filter .12s; } .rqp-accept:hover { filter: brightness(1.07); } .rqp-accept:active { transform: scale(.965); } .rqp-split { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font-family: inherit; font-size: 12px; font-weight: 600; padding: 9px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .rqp-split:hover { border-color: var(--accent); color: var(--accent-fg); } .rqp-diff { display: flex; flex-direction: column; gap: 10px; text-align: start; } .rqp-diff > div { border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; line-height: 1.9; } .rqp-old { color: var(--text-muted); } /* v621 — بلونه لا بالشفافيّة */ .rqp-old div { text-decoration: line-through; } .rqp-new { border-color: color-mix(in srgb, var(--success,#3f9d6e) 50%, var(--border)) !important; } .rqp-meta { font-size: 10.5px; color: var(--text-muted); border: none !important; padding: 0 !important; } .rqs-h { font-size: 12px; font-weight: 700; margin: 10px 0 7px; } .rqs-parts { display: flex; flex-direction: column; gap: 6px; max-height: 30vh; overflow-y: auto; } .rqs-p { display: flex; gap: 9px; align-items: flex-start; border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px; font-size: 12px; cursor: pointer; } .rqs-p input { margin-top: 3px; } .rqs-peers { display: flex; gap: 7px; flex-wrap: wrap; } .rqs-peer { border: 1px solid var(--border); border-radius: 999px; background: var(--surface2); color: var(--text); font-family: inherit; font-size: 12px; font-weight: 600; padding: 7px 15px; cursor: pointer; } .rqs-peer:hover { border-color: var(--accent); color: var(--accent-fg); } .rqs-note { margin-top: 12px; font-size: 11px; color: var(--text-muted); } .rqs-none { font-size: 11.5px; color: var(--text-muted); } /* ═══════════════════════════════════════════════════════════════ v458 · رفّ المزوّدين — قسم الذكاء في الإعدادات بطاقات متكرّرة: غلاس بصريّ **بلا** backdrop-filter. الدرس المدفوع: مئة بطاقة بـblur = بطء حقيقي، والضباب لطبقة التحكّم وحدها. واللون للمعنى: المشبع الوحيد هو الكهرماني — الحالة التي تطلب انتباهاً. ═══════════════════════════════════════════════════════════════ */ .ai-rack-bar{display:flex;align-items:center;justify-content:space-between; gap:12px;flex-wrap:wrap;margin-bottom:14px} .ai-rack-live{display:flex;align-items:center;gap:8px;min-width:0} .ai-rack-live-label{font-size:13px;color:var(--text-muted)} .ai-rack-live-name{font-size:14px;font-weight:600;color:var(--text); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ai-rack-test-all{background:var(--surface2);border:1px solid var(--border); border-radius:var(--radius);color:var(--text);font-family:inherit; font-size:13px;font-weight:600;padding:7px 14px;cursor:pointer; transition:transform .12s ease,border-color .12s ease} .ai-rack-test-all:hover{border-color:var(--accent)} .ai-rack-test-all:active{transform:scale(.965)} .ai-rack-test-all[disabled]{opacity:.55;cursor:default} /* مؤشّر الحالة */ .ai-led{width:9px;height:9px;border-radius:50%;flex:0 0 auto;display:inline-block} .ai-led-ready{background:#3fb950} .ai-led-live{background:#3fb950;animation:aiLedPulse 1.7s ease-in-out infinite} .ai-led-failed{background:#d29922} .ai-led-empty{background:transparent;border:1px solid var(--border)} @keyframes aiLedPulse{0%,100%{opacity:1}50%{opacity:.35}} /* وحدة الرفّ */ .ai-rack{display:flex;flex-direction:column;gap:8px} .ai-unit{background:var(--surface2);border:1px solid var(--border); border-radius:var(--radius);padding:11px 13px} .ai-unit.is-failed{border-color:color-mix(in srgb,#d29922 45%,var(--border))} .ai-unit.is-dragging{opacity:.5} .ai-unit.is-over{border-color:var(--accent)} .ai-unit-head{display:flex;align-items:center;gap:10px} .ai-unit-grip{cursor:grab;color:var(--text-muted);font-size:15px; line-height:1;user-select:none;flex:0 0 auto} .ai-unit-grip:active{cursor:grabbing} .ai-unit-num{font-family:var(--font-mono,monospace);font-size:13px; color:var(--text-muted);min-width:16px;text-align:center;flex:0 0 auto} .ai-unit-name{font-size:15px;font-weight:600;flex:1;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ai-unit-badge{font-size:12px;padding:3px 9px;border-radius:var(--radius); white-space:nowrap;flex:0 0 auto} .ai-badge-ready{color:#3fb950;background:color-mix(in srgb,#3fb950 12%,transparent)} .ai-badge-failed{color:#d29922;background:color-mix(in srgb,#d29922 14%,transparent)} .ai-badge-empty{color:var(--text-muted)} .ai-unit-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap; margin-top:9px;padding-inline-start:52px;font-size:12px;color:var(--text-muted)} .ai-unit-model{font-family:var(--font-mono,monospace);font-size:12px} .ai-unit-reason{font-size:12px;color:#d29922;line-height:1.7; margin-top:7px;padding-inline-start:52px;word-break:break-word} .ai-unit-body{margin-top:10px;padding-inline-start:52px;display:none} .ai-unit.is-open .ai-unit-body{display:block} .ai-unit-btn{background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);color:var(--text);font-family:inherit; font-size:12px;font-weight:600;padding:4px 11px;cursor:pointer; transition:transform .12s ease,border-color .12s ease} .ai-unit-btn:hover{border-color:var(--accent)} .ai-unit-btn:active{transform:scale(.965)} /* الحقول الأصلية: مخزَن مخفيّ يستعيرها الرفّ */ .ai-legacy{display:none} .ai-key-input{background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);color:var(--text);font-family:inherit; font-size:14px;padding:9px 13px;width:100%;text-align:left} .ai-model-select{background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);color:var(--text);font-family:inherit; font-size:13px;padding:7px 11px;max-width:100%} .ai-rack-foot{display:flex;gap:10px;flex-wrap:wrap; margin-top:14px;align-items:center} /* v459 — زرّ الفحص: نقطة حالة + دوران أثناء العمل. لا نصّ متغيّر داخل الزرّ (كان يقفز عرضه)، بل النقطة وحدها تدور. */ .ai-rack-test-all{display:inline-flex;align-items:center;gap:8px} .ai-test-all-dot{width:7px;height:7px;border-radius:50%; background:var(--text-muted);flex:0 0 auto;transition:background .2s ease} .ai-rack-test-all:hover .ai-test-all-dot{background:var(--accent)} .ai-rack-test-all.is-busy .ai-test-all-dot{background:var(--accent); animation:aiLedPulse 1s ease-in-out infinite} .ai-rack-test-all[disabled]{opacity:.7} /* لائحة الموديلات المتاحة — تظهر عند فشل الموديل لا المفتاح */ .ai-unit-models{margin-top:8px;padding-inline-start:52px} .ai-unit-models summary{font-size:12px;color:var(--text-muted); cursor:pointer;list-style:none;user-select:none} .ai-unit-models summary::-webkit-details-marker{display:none} .ai-unit-models summary:hover{color:var(--accent-fg)} .ai-unit-models-list{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px} .ai-model-chip{font-family:var(--font-mono,monospace);font-size:11px; background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);padding:3px 8px;color:var(--text-muted)} .ai-badge-external{color:var(--text-muted)} .ai-led-external{background:var(--text-muted);opacity:.5} /* v460 — نموذج المزوّد الجديد */ .ai-add-wrap{margin-top:12px} .ai-add-form{display:none;margin-top:10px;padding:12px 13px; background:var(--surface2);border:1px solid var(--border); border-radius:var(--radius);gap:8px;flex-direction:column} .ai-add-form.is-open{display:flex} .ai-add-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px} .ai-add-status{font-size:12px;color:var(--text-muted)} .ai-add-status.is-err{color:#d29922} .ai-unit-custom{font-size:11px;color:var(--text-muted); border:1px solid var(--border);border-radius:var(--radius);padding:2px 7px} /* ═══════════════════════════════════════════════════════════════ v461 · الرسائل — الشكل يبني على أصناف موجودة فعلاً في messages.js (تُبعث في السطر ١١٤١): mine/theirs · b-solo/b-first/b-mid/b-last · b-tail — لا صنف وهميّ. والذيل زاوية مربّعة على border-radius لا مثلّث ::after: أرخص، ولا ينكسر في RTL لأنّ الانعكاس تلقائيّ (بخلاف transform). ── حالة التنفيذ ── يعمل الآن بلا أيّ تعديل JS (الأصناف موجودة في messages.js:1141): .b-tail · .b-solo/.b-first/.b-mid/.b-last · .mine/.theirs ينتظر JS في المرحلة القادمة (أصناف مكتوبة مسبقاً عن قصد، لا وهميّة): .msg-quote* (الردّ باقتباس) · .msg-edited · .msg-body · .msg-reply-bar* .msg-acts/.msg-act (إجراءات الرسالة) · .msg-find* (البحث) وهذه تحتاج أعمدة MESSAGES_1_columns.sql قبل أن تُوصَل. ═══════════════════════════════════════════════════════════════ */ /* الذيل: الفقاعة الأخيرة في المجموعة وحدها */ #page-messages .msg-bubble.b-tail.mine{border-end-end-radius:4px} #page-messages .msg-bubble.b-tail.theirs{border-end-start-radius:4px} /* التجميع: زوايا داخلية أضيق فتبدو الرسائل سلسلة واحدة */ #page-messages .msg-bubble.mine.b-first{border-end-end-radius:5px} #page-messages .msg-bubble.mine.b-mid{border-start-end-radius:5px;border-end-end-radius:5px} #page-messages .msg-bubble.mine.b-last{border-start-end-radius:5px} #page-messages .msg-bubble.theirs.b-first{border-end-start-radius:5px} #page-messages .msg-bubble.theirs.b-mid{border-start-start-radius:5px;border-end-start-radius:5px} #page-messages .msg-bubble.theirs.b-last{border-start-start-radius:5px} /* علامة القراءة: ✓ وصلت · ✓✓ قُرئت */ #page-messages .msg-tick{display:inline-flex;align-items:center; gap:1px;margin-inline-start:4px;vertical-align:-1px;line-height:1} #page-messages .msg-tick svg{width:13px;height:13px; stroke:currentColor;stroke-width:1.7;fill:none; stroke-linecap:round;stroke-linejoin:round;opacity:.72} /* v457 — كان اللون رقماً مثبَّتاً (#3fb950) فلا يتبع الثيم. */ #page-messages .msg-tick.is-read svg{opacity:1;stroke:var(--success)} /* الاقتباس داخل الفقاعة — لا فوقها، فلا يكسر التجميع */ #page-messages .msg-quote{border-inline-start:2.5px solid currentColor; padding-inline-start:8px;margin-bottom:6px;opacity:.82;cursor:pointer} #page-messages .msg-quote-who{font-size:11px;font-weight:600;line-height:1.5} #page-messages .msg-quote-txt{font-size:11.5px;line-height:1.5; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* وسم التعديل والحذف — الحالة تُقال كما هي */ #page-messages .msg-edited{font-size:10px;opacity:.62;margin-inline-end:5px} #page-messages .msg-bubble.is-deleted{opacity:.6;font-style:italic} #page-messages .msg-bubble.is-deleted .msg-body{font-size:12.5px} /* شريط الردّ فوق حقل الكتابة */ #page-messages .msg-reply-bar{display:none;align-items:center;gap:9px; background:var(--surface2);border:1px solid var(--border); border-radius:var(--radius);padding:7px 11px;margin-bottom:7px} #page-messages .msg-reply-bar.is-open{display:flex} #page-messages .msg-reply-mark{width:2.5px;height:26px; background:var(--accent);border-radius:2px;flex:0 0 auto} #page-messages .msg-reply-meta{flex:1;min-width:0} #page-messages .msg-reply-who{font-size:10.5px;font-weight:600;color:var(--text)} #page-messages .msg-reply-txt{font-size:11.5px;color:var(--text-muted); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* إجراءات الرسالة: تظهر عند المرور، وبالّمس تبقى ظاهرة */ #page-messages .msg-acts{position:absolute;top:2px;inset-inline-end:6px; display:flex;gap:3px;opacity:0;transition:opacity .12s ease;pointer-events:none} #page-messages .msg-bubble{position:relative} #page-messages .msg-bubble:hover .msg-acts, #page-messages .msg-bubble.is-acts .msg-acts{opacity:1;pointer-events:auto} @media (hover:none){#page-messages .msg-acts{opacity:1;pointer-events:auto}} #page-messages .msg-act{background:var(--panel);border:1px solid var(--border); border-radius:var(--radius);width:22px;height:22px;display:flex; align-items:center;justify-content:center;cursor:pointer; font-size:11px;color:var(--text-muted);transition:transform .12s ease} #page-messages .msg-act:hover{color:var(--accent-fg);border-color:var(--accent)} #page-messages .msg-act:active{transform:scale(.9)} /* البحث داخل المحادثة */ #page-messages .msg-find{display:none;align-items:center;gap:8px; padding:8px 12px;border-bottom:1px solid var(--border)} #page-messages .msg-find.is-open{display:flex} #page-messages .msg-find input{flex:1;background:var(--surface); border:1px solid var(--border);border-radius:var(--radius); color:var(--text);font-family:inherit;font-size:13px;padding:6px 11px} #page-messages .msg-find-count{font-size:11px;color:var(--text-muted);white-space:nowrap} #page-messages .msg-find-hit{background:color-mix(in srgb,var(--accent) 26%,transparent); border-radius:3px} /* v466 — بانتظار تأكيد البثّ: التسليم إعلانٌ حتّى يؤكّده المستقبِل */ .rq-airwait { color: var(--warn, #e0803a); font-weight: 600; font-size: 11px; } /* v467 — المسار قابل للضغط: ينسخ في المتصفّح، ويفتح المجلّد في النسخة المكتبية. المؤشّر يد لأنّه فعل لا نصّ. */ .rq-pathv { cursor: pointer; border-radius: 6px; padding: 1px 5px; border: 1px dashed color-mix(in srgb, var(--border) 90%, transparent); transition: background .12s, border-color .12s; } .rq-pathv:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: var(--accent); color: var(--accent-fg); } .rq-pathv:active { transform: scale(.985); } .rq-pathi { font-style: normal; opacity: .55; font-size: 10px; } /* v530 — قلم التحرير بالمكان: صغير، محايد، يظهر بوضوح عند التحويم */ .rq-qe { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-inline-start: 6px; border-radius: 6px; vertical-align: middle; border: 1px solid transparent; background: none; color: var(--text-muted); cursor: pointer; opacity: .6; transition: opacity .12s, border-color .12s, transform .08s; } .rq-qe:hover { opacity: 1; color: var(--accent-fg); border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .rq-qe:active { transform: scale(.94); } /* الكرت الإعدادات ليس زرّاً: صنف ts-card مشترك مع منتقي القوالب (v186) فيتسرّب المؤشّر والرفع */ .card.ts-card[data-tfs] { cursor: auto; display: block; } .card.ts-card[data-tfs]:hover { transform: none; } /* v468 — خليّة القيادة: الرقم والمربّع معاً في عمود واحد. كانا عنصرين منفصلين في شبكة من ثلاثة أعمدة، فانحشر الرابع داخل عمود النصّ وظهر المربّع وسط الكلام. */ .rqp-lead { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; } .rqp-lead .rqp-idx { flex: 0 0 auto; } /* v470 — زرّ تحويل الفقرة بين المسارين */ /* v472 — سطر المسارات: أين المادة، يراه الجميع لا المونتير وحده */ .rq-paths { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0; padding: 8px 10px; border-radius: 10px; font-size: 11.5px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface2) 55%, transparent); } .rq-paths span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; } .rq-paths i { font-style: normal; opacity: .8; } /* v480 — الوقت الفعليّ للفقرة جنب المقدَّر */ .rqp-spent { font-style: normal; font-size: 10px; margin-inline-start: 4px; padding: 1px 5px; border-radius: 5px; opacity: .8; background: color-mix(in srgb, var(--success) 16%, transparent); } .rqp-spent.over { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); opacity: 1; font-weight: 600; } /* v481 — رقاقة المرجع البصريّ للفقرة */ .fri-ref { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 3px 7px; border-radius: 8px; cursor: pointer; font-size: 12px; border: 1px dashed var(--border); background: transparent; color: var(--text-muted); transition: all .13s; max-width: 130px; } .fri-ref:hover { border-color: var(--accent); color: var(--accent-fg); } .fri-ref.on { border-style: solid; border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); } .fri-ref:active { transform: scale(.965); } .fri-ref-nm { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* v481 — المرجع كما يراه القسم */ .rqp-ref { display: inline-flex; align-items: center; gap: 4px; margin-inline-end: 6px; padding: 1px 7px; border-radius: 6px; font-size: 10.5px; vertical-align: middle; border: 1px solid color-mix(in srgb, var(--info, #4a9eff) 40%, var(--border)); background: color-mix(in srgb, var(--info, #4a9eff) 10%, transparent); } /* v482 — شريط التحديث: لا يُغلَق ولا يختفي، فتجاهله يعني العمل على نسخة قديمة */ #tf-upd-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 11px 16px; font-size: 13px; font-weight: 600; color: var(--tf-accent-ink, #fff); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, transparent), var(--accent)); box-shadow: 0 -8px 26px -12px rgba(0,0,0,.5); animation: tfUpdIn .28s cubic-bezier(.22,.9,.3,1) both; } @keyframes tfUpdIn { from { transform: translateY(100%) } to { transform: none } } #tf-upd-bar button { padding: 6px 16px; border-radius: 9px; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700; border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.18); color: inherit; transition: background .13s; } #tf-upd-bar button:hover { background: rgba(255,255,255,.3); } #tf-upd-bar button:active { transform: scale(.965); } @media (prefers-reduced-motion: reduce) { #tf-upd-bar { animation: none } } /* ═══ v483 — بوكس المونتاج يخرج من إطاره ═══ أعمدته ثابتة (1fr×3 و1fr×4 للصوت)، وحين ضاق العمود بعد أن صارت الشاشة ثلاثة أعمدة لم يعد للحقول مكان فخرجت عن حدّ الصندوق. minmax مع auto-fit يطوي الحقول سطراً سطراً بدل أن تفيض. */ .fr-montbox { max-width: 100%; overflow: hidden; box-sizing: border-box; } /* v484 — auto-fit بحدٍّ أدنى 150px جعل العمود الضيّق يعرض حقلاً واحداً في كلّ سطر، فصار الصندوق شريطاً طويلاً — تشوّهٌ أسوأ من الفيضان. الحدّ الأدنى نزل إلى ما يسع حقلاً مقروءاً، فيبقى صفّان أو ثلاثة. */ .fr-montrow { grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)) !important; } .fr-montrow.snd { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important; } .fr-montrow select, .fr-montrow input { font-size: 11.5px !important; padding: 7px 9px !important; } .fr-montrow select, .fr-montrow input { min-width: 0; max-width: 100%; box-sizing: border-box; } /* الأعمدة الجانبية لا تفيض بمحتواها مهما ضاقت */ #fr-ideas-box, #fr-plan-box { min-width: 0; } #fr-ideas-box *, #fr-plan-box * { max-width: 100%; box-sizing: border-box; } /* v484 — سحب الطلب: تراجع لا خطر، فوزنه محايد */ .sr-cancel { margin-inline-start: 8px; padding: 5px 11px; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 600; border: 1px solid var(--border); background: transparent; color: var(--text-muted); transition: all .13s; } .sr-cancel:hover { border-color: var(--danger, #e5484d); color: var(--danger, #e5484d); } .sr-cancel:active { transform: scale(.965); } /* ═══ v486 — شريط مطبخ النصّ: أكبر وأوضح ═══ كان 12px بمساحة لمسٍ 5px، وأزراره رموزٌ متلاصقة يصعب تمييزها والإصبع يخطئها. المحرر يعمل عليه ساعاتٍ يومياً. */ .fr-kitchen.top { gap: 3px !important; padding: 7px 10px !important; } .fr-kitchen.top .frk { font-size: 14px; padding: 7px 10px; min-width: 34px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; } .fr-kitchen.top .frk.wide { font-size: 12px; padding-inline: 11px; } .fr-kitchen.top .frk:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } .fr-kitchen.top .frk-lbl { font-size: 12.5px; } .fr-kitchen.top .frk-sep { height: 22px; margin-inline: 6px; } .fr-kitchen.top .frk-fs { font-size: 12px; font-weight: 700; min-width: 22px; } .fr-kitchen.top .frk-saved { font-size: 11px; } /* العدّاد أوضح: رقمٌ يُقرأ لا نصٌّ باهت */ .fr-kitchen.top .frk-stat { font-size: 12px; padding: 4px 11px; } /* ═══ v487 — رقم المادة في البطاقة: أصغر وأهدأ ═══ موضعه الأصليّ في الطلب نفسه (حقل رقم المادة أعلى النموذج). حضوره في كلّ بطاقة بحجمٍ كامل كرّر المعلومة وأثقل البطاقة. يبقى — لأنّ المونتير يصحّحه من هنا — لكن بوزنٍ يليق بحقلٍ نادر الاستعمال. */ .mc-media-edit { padding: 6px 9px !important; margin-top: 6px; } .mc-media-label { font-size: 10px !important; opacity: .6; } .mc-media-input { font-size: 11.5px !important; padding: 5px 8px !important; max-width: 190px; } .mc-path.mc-copy { font-size: 10.5px; opacity: .75; padding: 3px 8px; } /* عدّاد البثّ: يُقرأ بنظرة */ .pulse-cd, .mc-countdown { font-weight: 700; letter-spacing: .2px; } /* ═══ v488 — رقم المادة في رأس الطلب ═══ سطرٌ واحد بدل كتلةٍ في كلّ بطاقة: يُكتب مرّة ويُقرأ كثيراً. */ .rq-matrow { display: flex; align-items: center; gap: 9px; margin: 8px 0; padding: 7px 11px; border-radius: 10px; font-size: 12px; border: 1px dashed color-mix(in srgb, var(--border) 95%, transparent); background: color-mix(in srgb, var(--surface2) 40%, transparent); } .rq-matrow.has { border-style: solid; border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); } .rq-matlb { font-size: 11px; opacity: .65; font-weight: 600; white-space: nowrap; } .rq-matin { flex: 1; min-width: 0; max-width: 220px; padding: 5px 9px; font-size: 12.5px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 600; } .rq-matin:focus { border-color: var(--accent); outline: none; } .rq-matval { font-size: 13px; font-weight: 700; cursor: pointer; padding: 2px 9px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 12%, transparent); } .rq-matval:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); } /* العدّاد لا ينقلب في RTL: الأرقام اللاتينية تُعزل */ .pulse-cd, .mc-countdown, .rq-cd, .ov-num { direction: ltr; unicode-bidi: isolate; } /* v488 — قسم المونتاج حين يكون مطلوباً: يُبرز نفسه فلا يُبحث عن سبب القفل */ .fr-montbox.required { border-style: solid !important; border-color: color-mix(in srgb, var(--accent) 55%, var(--border)) !important; background: color-mix(in srgb, var(--accent) 5%, transparent); } .fr-montbox.required > b em { font-style: normal; color: var(--accent-fg); font-weight: 700; } .fr-montbox .req-on { border-color: color-mix(in srgb, var(--danger,#e5484d) 45%, var(--border)) !important; background: color-mix(in srgb, var(--danger,#e5484d) 6%, transparent) !important; } /* v488 — سطر النقص يدلّ على مكانه */ .fr-warn.go { cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all .13s; } .fr-warn.go:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent); } .fr-warn.go:active { transform: scale(.99); } .fr-warn-go { margin-inline-start: auto; font-style: normal; opacity: .45; font-size: 11px; } /* وميض الحقل الذي قُصد */ .fr-flash { animation: frFlashField 1.4s ease; } @keyframes frFlashField { 0%, 100% { box-shadow: none; } 15%, 60% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 42%, transparent); } } @media (prefers-reduced-motion: reduce) { .fr-flash { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 42%, transparent); } } /* v495 — حذف البطاقة وتراجعه */ .nr-pv-iconbtn.pv-del:hover { border-color: var(--danger, #e5484d) !important; color: var(--danger, #e5484d) !important; } /* v551 — translateX(50%) مع inset-inline-start يصحّ في RTL وحده: بالإنجليزيّة يقف يمين الوسط. المركز بـleft الفيزيائيّ */ .pv-undo { position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; width: max-content; max-width: calc(100vw - 24px); box-sizing: border-box; z-index: 99998; padding: 10px 20px; border-radius: 12px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; border: 1px solid var(--border); background: var(--panel); color: var(--text); box-shadow: 0 12px 30px -10px rgba(0,0,0,.45); animation: pvUndoIn .22s cubic-bezier(.22,.9,.3,1) both; } @keyframes pvUndoIn { from { opacity: 0; transform: translateX(-50%) translateY(14px) } } .pv-undo:hover { border-color: var(--accent); color: var(--accent-fg); } .pv-undo:active { transform: translateX(-50%) scale(.97); } body:has(#tf-quickbar) .pv-undo { bottom: 78px; } @media (max-width: 768px) { body .pv-undo, body:has(#tf-quickbar) .pv-undo { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } } @media (prefers-reduced-motion: reduce) { .pv-undo { animation: none } } /* ═══ v495 — بطاقات الطلب في صفحته ═══ كان الرأس يعرض عددها ولا يعرضها، فيفتح المصمّم الصفحة ولا يجد شغله. */ .rq-cards { margin: 10px 0; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface2) 45%, transparent); } .rq-cards-h { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font-size: 13px; } .rq-cards-n { margin-inline-start: auto; font-size: 11px; font-weight: 700; opacity: .6; padding: 2px 9px; border-radius: 20px; border: 1px solid var(--border); } .rq-cards-load { font-size: 11.5px; opacity: .55; } .rq-cards-b { display: flex; flex-direction: column; gap: 6px; } .rq-card { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 9px; cursor: pointer; font-size: 12px; border: 1px solid var(--border); background: var(--surface); border-inline-start: 3px solid var(--accent); transition: all .13s; } .rq-card:hover { border-color: var(--accent); transform: translateX(-2px); } .rq-card.rt-M { border-inline-start-color: #8b5cf6; } .rq-card.rt-B { border-inline-start-color: #e0803a; } .rq-card-n { flex: 0 0 auto; width: 20px; font-size: 11px; font-weight: 700; opacity: .5; } .rq-card-t { flex: 0 0 auto; font-weight: 600; white-space: nowrap; } .rq-card-x { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .7; font-size: 11.5px; } .rq-card-m { flex: 0 0 auto; font-size: 10px; padding: 2px 7px; border-radius: 5px; background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 700; } /* «استلمتها» في صفّ رقم المادة */ .rq-mat-claim { margin-inline-start: auto; padding: 6px 14px; border-radius: 9px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border)); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); transition: all .13s; } .rq-mat-claim:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); } .rq-mat-claim:active { transform: scale(.965); } /* v497 — نوع المادّة يُميَّز عمّا كُتب حوله */ .mtp-src.kind { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); font-weight: 700; } /* ═══ v498 — عدّاد المدّة: أنماطه لم تُحقن أصلاً ═══ كُتبت في v495 داخل سلسلة أنماط freereq فلم تصل — فظهر العدّاد بلا تنسيق: أزراره تتراكب فوق بعضها والصندوق ينتفخ حوله. هنا في الملفّ الذي يُحمَّل فعلاً، بارتفاعٍ ثابت لا يتمدّد. */ .fr-durbox { display: inline-flex; align-items: center; gap: 2px; padding: 0 7px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); height: 38px; box-sizing: border-box; flex: 0 0 auto; white-space: nowrap; max-width: 100%; overflow: hidden; } .fr-durbox:focus-within { border-color: var(--accent); } .fr-dur-b { width: 22px; height: 22px; min-width: 22px; border-radius: 6px; cursor: pointer; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: transparent; color: var(--text); font-size: 14px; line-height: 1; padding: 0; font-family: inherit; transition: all .12s; } .fr-dur-b:hover { border-color: var(--accent); color: var(--accent-fg); } .fr-dur-b:active { transform: scale(.9); } .fr-dur-in { width: 46px; min-width: 46px; flex: 0 0 auto; text-align: center; font-size: 12px; font-weight: 700; font-family: inherit; border: none; background: transparent; color: var(--text); outline: none; padding: 0; direction: ltr; unicode-bidi: isolate; } .fr-dur-lb { font-size: 9px; opacity: .5; font-style: normal; white-space: nowrap; flex: 0 0 auto; margin-inline-end: 3px; max-width: 64px; overflow: hidden; text-overflow: ellipsis; } /* حقول المونتاج بارتفاعٍ واحد — وإلّا مطّت الشبكةُ الأطولَ وانتفخ الصندوق */ .fr-montrow > * { height: 38px; box-sizing: border-box; } .fr-montrow textarea { height: auto; } .fr-montrow input, .fr-montrow select { padding: 0 10px !important; font-size: 12px !important; } .fr-montbox .fr-montrow { align-items: center; gap: 7px; } /* v498 — «ابدأ من جديد»: تراجعٌ خطر، فلونه محايد ومكانه الطرف */ .fr-btn.fr-reset { margin-inline-start: auto; opacity: .65; } .fr-btn.fr-reset:hover { opacity: 1; border-color: var(--danger, #e5484d); color: var(--danger, #e5484d); } /* v499 — تنبيه البطاقة الفارغة عند تكبيرها */ .pv-zoom-empty { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; font-size: 12.5px; font-weight: 600; text-align: center; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--text-muted); } /* ═══ v507 → v530 · لوحة التخزين — تقول ما يجري بنظرة، وتحذف بأمان ═══ الأرقام والمسارات بخطّ مونو لأنّها تُقارَن بالعين. ولا لون مشبع إلّا على «الفائض» — هو وحده ما يحتاج انتباهاً الآن. القراءة أسفل اليمين، والحذف معزول أسفل اليسار بلون محايد يصطبغ عند اللمس فقط. v530: رأسٌ بحلقة استهلاك وثلاثة أرقام وشرائط تصنيف، صورةٌ مصغّرة واسمٌ بلغة الغرفة، تحديدٌ مرسوم من الثيم — ولا عنصر متصفّح خام. */ .tfsto-head { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; align-items: center; margin-bottom: 12px; padding: 12px 14px; border-radius: 12px; background: var(--tf-glass, var(--surface2)); border: 1px solid var(--tf-gl, var(--border)); } .tfsto-ringbox { position: relative; display: grid; place-items: center; width: 72px; grid-row: 1 / 3; color: var(--text); } .tfsto-ring { width: 64px; height: 64px; } .tfsto-ringbox b { position: absolute; top: 20px; font-size: 13px; } .tfsto-ringbox span { font-size: 9.5px; color: var(--text-muted); margin-top: 2px; text-align: center; } .tfsto-kpis { display: flex; flex-wrap: wrap; gap: 8px 22px; } .tfsto-kpi b { display: block; font-size: 18px; font-weight: 600; line-height: 1.2; } .tfsto-kpi span { font-size: 10.5px; color: var(--text-muted); } .tfsto-kpi.hot b { color: var(--accent-fg); } .tfsto-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 14px; } .tfsto-kind { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 8px; font-size: 10.5px; } .tfsto-kind span { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tfsto-kind i { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; } .tfsto-kind i b { display: block; height: 100%; border-radius: 3px; background: color-mix(in srgb, var(--text) 45%, transparent); } .tfsto-kind em { font-style: normal; color: var(--text-muted); font-size: 10px; white-space: nowrap; } .tfsto-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 9px; } .tfsto-sep { width: 1px; height: 18px; background: var(--border); margin-inline: 4px; } .tfsto-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; cursor: pointer; font-size: 11px; font-weight: 600; font-family: inherit; color: var(--text-muted); background: var(--surface2); border: 1px solid var(--border); transition: color .12s, border-color .12s, transform .1s; } .tfsto-chip:hover { color: var(--text); border-color: var(--text-muted); } .tfsto-chip:active { transform: scale(.965); } .tfsto-chip.on { color: var(--text); border-color: var(--text); background: var(--surface); } .tfsto-chip em { font-style: normal; font-size: 10px; opacity: .7; } .tfsto-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-muted); margin-bottom: 8px; } .tfsto-sum b { color: var(--text); font-weight: 700; } .tfsto-mini { padding: 4px 10px; font-size: 10.5px; font-weight: 600; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; } .tfsto-mini em { font-style: normal; color: var(--accent-fg); } .tfsto-q { margin-inline-start: auto; min-width: 200px; padding: 6px 10px; border-radius: 9px; font-family: inherit; font-size: 11.5px; color: var(--text); background: var(--surface2); border: 1px solid var(--border); outline: none; } .tfsto-q:focus { border-color: var(--accent); } .tfsto-list { max-height: 420px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); scrollbar-width: thin; } .tfsto-row { display: grid; grid-template-columns: 22px 34px minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 9px; padding: 6px 11px; cursor: pointer; font-size: 11.5px; border-bottom: 1px solid var(--border); } .tfsto-row:last-child { border-bottom: 0; } .tfsto-row:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); } .tfsto-row.on { background: var(--surface); } /* التحديد مرسوم من الثيم — لا صندوق متصفّح */ .tfsto-ck { position: relative; width: 18px; height: 18px; display: grid; place-items: center; } .tfsto-ck input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .tfsto-ck i { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--text-muted); background: var(--surface); display: grid; place-items: center; transition: border-color .12s, background .12s; } .tfsto-ck input:checked + i { border-color: var(--accent); background: var(--accent); } .tfsto-ck input:checked + i::after { content: ''; width: 5px; height: 9px; border: solid var(--tf-accent-ink, #fff); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); } .tfsto-ck input:focus-visible + i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } .tfsto-th { width: 34px; height: 34px; border-radius: 7px; display: grid; place-items: center; overflow: hidden; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-muted); } .tfsto-th img { width: 100%; height: 100%; object-fit: cover; display: block; } .tfsto-nm { min-width: 0; } .tfsto-nm b { display: block; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; } .tfsto-nm small { display: block; font-size: 9.5px; color: var(--text-muted); direction: ltr; text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tfsto-open { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; cursor: pointer; color: var(--text-muted); background: none; border: 1px solid transparent; } .tfsto-open:hover { color: var(--accent-fg); border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .tfsto-sz, .tfsto-ag { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; } .tfsto-st { font-size: 10px; font-weight: 700; color: var(--text-muted); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; } .tfsto-row.surplus .tfsto-st { color: var(--accent-fg); } .tfsto-empty { padding: 18px 12px; text-align: center; font-size: 12px; color: var(--text-muted); } .tfsto-warn { margin: 8px 0 0; padding: 8px 11px; border-radius: 9px; font-size: 11px; color: var(--text-muted); background: var(--surface2); border: 1px solid var(--border); } .tfsto-log { margin-top: 10px; font-size: 11px; color: var(--text-muted); } .tfsto-log summary { cursor: pointer; font-weight: 600; color: var(--text); list-style: none; display: inline-flex; align-items: center; gap: 6px; } .tfsto-log summary::-webkit-details-marker { display: none; } .tfsto-log summary::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); } .tfsto-log[open] summary::before { background: var(--accent); } .tfsto-log summary em { font-style: normal; color: var(--text-muted); } .tfsto-logrow { display: grid; grid-template-columns: auto auto 1fr auto; gap: 10px; padding: 5px 2px; border-bottom: 1px dashed var(--border); align-items: center; } .tfsto-logrow b { color: var(--text); font-weight: 600; } .tfsto-logrow small { color: var(--text-muted); direction: ltr; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; } /* القراءة أسفل اليمين (أوّل الصفّ في RTL)، والخطر معزول أسفل اليسار بلون محايد */ .tfsto-actions { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-top: 11px; } .tfsto-read { padding: 9px 16px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .tfsto-dz { display: inline-flex; gap: 6px; } .tfsto-danger { padding: 8px 14px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; transition: color .12s, border-color .12s, transform .1s, opacity .12s; } .tfsto-danger:hover:not(:disabled) { color: var(--danger, #ff5470); border-color: color-mix(in srgb, var(--danger, #ff5470) 45%, transparent); } .tfsto-danger:disabled { opacity: .4; cursor: default; } @media (max-width: 760px) { .tfsto-row { grid-template-columns: 22px 34px minmax(0, 1fr) auto; } .tfsto-ag, .tfsto-st, .tfsto-open { display: none; } .tfsto-head { grid-template-columns: 1fr; } .tfsto-ringbox { grid-row: auto; } } /* ═══ v513 · التقدير على البطاقة — رقمٌ واحد، وشرائح تُلمَس ═══ محايدة كلّها: اللون للمعنى، والمعنى الوحيد هنا «تجاوزتَ وقتك». */ .mc-eta-ask { display: inline-flex; align-items: center; gap: 5px; margin-inline-end: 8px; font-size: 10.5px; font-weight: 600; color: var(--text-muted); } .mc-eta-c { padding: 4px 9px; border-radius: 8px; cursor: pointer; font-family: var(--mono, monospace); font-size: 10.5px; font-weight: 700; color: var(--text-muted); background: var(--surface2); border: 1px solid var(--border); transition: color .12s, border-color .12s, transform .1s; } .mc-eta-c:hover { color: var(--text); border-color: var(--text-muted); } .mc-eta-c:active { transform: scale(.965); } .mc-eta-of { font-style: normal; font-family: var(--mono, monospace); font-size: 10px; opacity: .75; } .ct-left { font-family: var(--mono, monospace); font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 99px; margin-inline-start: 6px; background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted); } .ct-left.over { color: var(--danger, #ff5470); border-color: color-mix(in srgb, var(--danger, #ff5470) 45%, transparent); } /* ═══ v513 · ملخّص مدّة الطلب — محسوبٌ من البطاقات ═══ سطرٌ واحد بدل صندوق إدخال. الأرقام مونو لأنّها تُقارَن بالعين، واللون المشبع محجوزٌ لحالةٍ واحدة: لن تلحق الهواء. */ .eta-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; padding: 8px 13px; border-radius: 10px; font-size: 11.5px; color: var(--text-muted); background: var(--surface2); border: 1px solid var(--border); } .eta-sum b { font-family: var(--mono, monospace); font-size: 13px; color: var(--text); font-weight: 700; } .eta-s-air { font-family: var(--mono, monospace); font-size: 10.5px; } .eta-sum.tight { border-color: color-mix(in srgb, var(--danger, #ff5470) 45%, transparent); } .eta-sum.tight .eta-s-air { color: var(--danger, #ff5470); font-weight: 700; } .eta-s-rest { font-style: normal; font-size: 10px; opacity: .8; } /* ═══ v514 · «المزيد» — زرٌّ محايد يفتح الثانويّ ═══ الفعل الرئيسيّ يبقى وحده ملوّناً؛ هذا محايدٌ حتّى اللمس. والانكماش scale(.965) لا نزول — كما في بقيّة أزرار البرنامج. */ .mc-more { display: inline-block; position: relative; } .mc-more-s { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 7px 13px; border-radius: 9px; list-style: none; font-size: 11.5px; font-weight: 600; color: var(--text-muted); background: var(--surface2); border: 1px solid var(--border); transition: color .12s, border-color .12s, transform .1s; } .mc-more-s::-webkit-details-marker { display: none; } .mc-more-s:hover { color: var(--text); border-color: var(--text-muted); } .mc-more-s:active { transform: scale(.965); } .mc-more-s em { font-style: normal; font-family: var(--mono, monospace); font-size: 10px; opacity: .7; } .mc-more[open] .mc-more-s { color: var(--text); border-color: var(--text-muted); } .mc-more-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; padding: 9px 11px; border-radius: 10px; background: var(--surface2); border: 1px solid var(--border); } /* ═══════════════════════════════════════════════════════════════════ v521 · الرن داون — ورقةُ نشرةٍ حيّة ───────────────────────────────────────────────────────────────── الهويّة نصفان: **توثيق البثّ** (أرقامٌ تسلسلية · أعمدةٌ متحاذية · تثقيبٌ على الحافّة · ختمٌ في الذيل) و**طاقة الكونسول الحيّ** (فيوميترُ النشرة · LED للمادّة الجارية · رصيفُ حالة). سلّمتُ في v520 النصف الأوّل وحده فخرجت ناشفة. ═══ كلّ لونٍ هنا يُشتقّ من --text ═══ بنيتُ الفصل البصري أوّلاً على `--surface2` و`--border` و`--text-muted`، ثمّ قِسْتُ التباين على الاثني عشر ثيماً فسقط أربعة: • glasslight — السطحان متطابقان (١٫٠٠) والحدّ أبيضُ على أبيض • blue · night — خلفية المتأخّر ٧٪ تحت عتبة الرؤية (١٫٠٥) • magazine — النصّ الخافت ٤٫١٣ تحت ٤٫٥ و`--text` وحده تضبطه كلّ الثيمات صحيحاً لأنّه **يجب** أن يُقرأ. فمنه تُشتقّ الخطوط والهوفر والنصّ الخافت ودرجاتُ الفيوميتر. ═══ اللون للمعنى ═══ المشبَع لثلاثةٍ لا غير: المتأخّر · التجاوز · «الآن» والمادّة الجارية. وما عداه تدرّجُ حبرٍ واحد — الأولوية بالكثافة لا بالصبغة. TakeFlow Tv - تصميم وتطوير محمد قندقلي ═══════════════════════════════════════════════════════════════════ */ .tfr-wrap { padding: 16px; /* الحبر: مصدرٌ واحد تُشتقّ منه كلّ الدرجات، فلا يكذب ثيمٌ على آخر */ --tfr-ink: var(--text, #14181f); --tfr-hair: color-mix(in srgb, var(--tfr-ink) 11%, transparent); --tfr-dim: color-mix(in srgb, var(--tfr-ink) 80%, transparent); /* v552 — كان ٥٨٪ (٤٫١) و٣٨٪ (٢٫٣) */ --tfr-dimmer: color-mix(in srgb, var(--tfr-ink) 66%, transparent); --tfr-hov: color-mix(in srgb, var(--tfr-ink) 5%, transparent); --tfr-hot: var(--accent, #d68910); } .tfr-shell { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; } @media (max-width: 900px) { .tfr-shell { grid-template-columns: 1fr; } } /* ═══ الشجرة: اليوم مجلّد، ونشراته تحته ═══ */ .tfr-tree { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 2px; } @media (max-width: 900px) { .tfr-tree { position: static; } } .tfr-tree-head { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--tfr-dimmer); padding: 0 8px 7px; } .tfr-day { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 9px; border: 0; background: none; border-radius: 7px; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--tfr-dim); text-align: start; } .tfr-day:hover { background: var(--tfr-hov); color: var(--tfr-ink); } .tfr-day.on { background: var(--tfr-hov); color: var(--tfr-ink); } .tfr-day:active { transform: scale(.965); } .tfr-day-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tfr-day-c { margin-inline-start: auto; font-size: 10.5px; font-weight: 600; color: var(--tfr-dimmer); } .tfr-store { margin-top: 9px; } .tfr-store .tfr-day-n { font-weight: 600; } .tfr-bul-t { display: flex; align-items: center; gap: 7px; width: calc(100% - 12px); margin-inline-start: 12px; padding: 5px 9px; border: 0; background: none; cursor: pointer; border-inline-start: 1px solid var(--tfr-hair); border-radius: 0; font-family: inherit; font-size: 11.5px; color: var(--tfr-dimmer); text-align: start; } .tfr-bul-t:hover { color: var(--tfr-ink); border-inline-start-color: var(--tfr-dim); } .tfr-bul-t i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .55; } .tfr-bul-t span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tfr-bul-t b { margin-inline-start: auto; font-size: 10px; font-weight: 600; } .tfr-bul-t.warn { color: var(--danger, #d63838); border-inline-start-color: var(--danger, #d63838); } /* ═══ ترويسة اليوم ═══ */ .tfr-head { display: flex; align-items: baseline; gap: 11px; padding: 0 2px 13px; flex-wrap: wrap; } .tfr-head-day { font-size: 18px; font-weight: 700; color: var(--tfr-ink); } .tfr-head-meta { font-size: 11.5px; font-weight: 500; color: var(--tfr-dimmer); letter-spacing: .03em; } /* ═══ مجلّد النشرة ═══ */ .tfr-bul { margin: 0 0 15px; border: 1px solid var(--tfr-hair); border-radius: 11px; background: var(--surface); overflow: hidden; } .tfr-bul.unknown { border-color: color-mix(in srgb, var(--danger, #d63838) 40%, transparent); } .tfr-bul.flash { animation: tfrFlash 1.1s ease-out 1; } @keyframes tfrFlash { 0% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--tfr-hot) 55%, transparent); } 100% { box-shadow: 0 0 0 2px transparent; } } .tfr-bul-head { display: flex; align-items: center; gap: 11px; padding: 11px 14px 9px; flex-wrap: wrap; } .tfr-bul-name { font-size: 13.5px; font-weight: 700; color: var(--tfr-ink); } .tfr-bul-warn { font-size: 10.5px; font-weight: 600; color: var(--danger, #d63838); border: 1px solid color-mix(in srgb, var(--danger, #d63838) 45%, transparent); border-radius: 5px; padding: 1px 7px; } .tfr-bul-time { font-size: 12px; font-weight: 600; color: var(--tfr-dimmer); } .tfr-bul-dur { margin-inline-start: auto; font-size: 12.5px; font-weight: 700; color: var(--tfr-dim); } .tfr-bul-dur.ov { color: var(--tfr-ink); } .tfr-bul-dur i { font-style: normal; font-size: 10px; font-weight: 600; color: var(--tfr-dimmer); margin-inline-start: 5px; } .tfr-bul-n { font-size: 10.5px; font-weight: 600; color: var(--tfr-dimmer); } /* ═══ الفيوميتر — النشرة كلّها في شريطٍ واحد ═══ قطعةٌ لكلّ مادّة بعرض مدّتها، وكثافةُ حبرها بمرحلتها. أربع درجاتٍ لحبرٍ واحد لا أربعةُ ألوان — والمشبَع للتجاوز وحده. */ .tfr-vu { position: relative; display: flex; gap: 1.5px; height: 7px; margin: 0 14px 10px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--tfr-ink) 7%, transparent); } /* علامةُ الحدّ: حيث تنتهي مدّة النشرة حين تتجاوزها المواد */ .tfr-vu-lim { position: absolute; inset-block: -2px; width: 2px; border-radius: 1px; background: var(--tfr-ink); opacity: .55; } .tfr-vu i { display: block; height: 100%; font-style: normal; min-width: 1px; } .tfr-vu i.s1 { background: repeating-linear-gradient(115deg, color-mix(in srgb, var(--tfr-ink) 20%, transparent) 0 3px, transparent 3px 6px); } .tfr-vu i.s2 { background: color-mix(in srgb, var(--tfr-ink) 30%, transparent); } .tfr-vu i.s3 { background: color-mix(in srgb, var(--tfr-ink) 50%, transparent); } .tfr-vu i.s4 { background: color-mix(in srgb, var(--tfr-ink) 74%, transparent); } .tfr-vu i.over { background: var(--danger, #d63838); } /* ═══ رؤوس الأعمدة — كانت غائبةً تماماً في v520 ═══ */ .tfr-cols, .tfr-row { display: grid; align-items: center; gap: 9px; padding: 0 14px; grid-template-columns: 34px minmax(0, 1fr) 78px 64px 46px 66px 74px 52px; } .tfr-cols { height: 25px; font-size: 9.5px; font-weight: 600; letter-spacing: .06em; color: var(--tfr-dimmer); border-bottom: 1px solid var(--tfr-hair); } .tfr-cols span:last-child { text-align: end; } /* ═══ الصفوف + شريط التثقيب ═══ التثقيب حافّةُ شريط الفيلم: نقطةٌ كلّ صفّ على جانب الأرقام. زخرفةٌ واحدة تقول «هذه ورقةُ بثّ» ولا تزاحم أيّ بيان. */ .tfr-rows { position: relative; } .tfr-rows::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 22px; pointer-events: none; opacity: .8; background: radial-gradient(circle at center, color-mix(in srgb, var(--tfr-ink) 14%, transparent) 1.6px, transparent 1.7px) 0 0 / 22px 17px; } .tfr-row { position: relative; min-height: 42px; cursor: pointer; border-bottom: 1px solid var(--tfr-hair); } .tfr-row:last-child { border-bottom: 0; } .tfr-row:hover { background: var(--tfr-hov); } .tfr-row:active { transform: scale(.995); } /* رصيفُ الحالة: كثافةُ الحبر نفسها التي في الفيوميتر */ .tfr-row::after { content: ''; position: absolute; inset-block: 5px; inset-inline-start: 0; width: 2.5px; border-radius: 2px; background: transparent; } .tfr-row.s1::after { background: color-mix(in srgb, var(--tfr-ink) 14%, transparent); } .tfr-row.s2::after { background: color-mix(in srgb, var(--tfr-ink) 30%, transparent); } .tfr-row.s3::after { background: color-mix(in srgb, var(--tfr-ink) 50%, transparent); } .tfr-row.s4::after { background: color-mix(in srgb, var(--tfr-ink) 74%, transparent); } .tfr-c { min-width: 0; font-size: 12.5px; color: var(--tfr-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tfr-c.seq { font-size: 11.5px; font-weight: 600; color: var(--tfr-dimmer); } .tfr-c.ttl { font-size: 13.5px; font-weight: 600; color: var(--tfr-ink); } .tfr-c.kind { font-size: 11px; color: var(--tfr-dimmer); } .tfr-c.dur { font-size: 12.5px; font-weight: 600; } .tfr-c.at { text-align: end; font-size: 12.5px; font-weight: 600; } .tfr-c.mat { font-size: 11.5px; } .tfr-ask { font-style: normal; font-size: 10px; color: var(--tfr-dimmer); margin-inline-start: 4px; } /* النقاط عناصر لا محارف — فلا يقلبها اتجاهٌ ولا يبهتها خطّ */ .tfr-c.dots { display: flex; align-items: center; gap: 3.5px; } .tfr-c.dots u { width: 5.5px; height: 5.5px; border-radius: 50%; text-decoration: none; background: color-mix(in srgb, var(--tfr-ink) 16%, transparent); } .tfr-c.dots u.on { background: color-mix(in srgb, var(--tfr-ink) 62%, transparent); } /* المبثوث يخفت — مضى دورُه */ .tfr-row.aired .tfr-c.ttl { color: var(--tfr-dim); font-weight: 500; } /* ═══ المشبَع لثلاثةٍ لا غير ═══ */ .tfr-row.late { background: color-mix(in srgb, var(--danger, #d63838) 9%, transparent); } .tfr-row.late::after { background: var(--danger, #d63838); } .tfr-row.late .tfr-c.at { color: var(--danger, #d63838); font-weight: 700; } /* الفائت: مضى وقته بعيداً ولم يُبَثّ. يُقال بخفوتٍ لا بصراخ — فلو صرخ كلُّ فائتٍ في يومٍ ماضٍ لصارت الشاشة حمراء كلّها وضاع معنى اللون. لا خلفيةَ له، ورصيفُه متقطّع. */ .tfr-row.missed .tfr-c.ttl { color: var(--tfr-dim); font-weight: 500; } .tfr-row.missed .tfr-c.at { color: var(--tfr-dimmer); } .tfr-row.missed::after { background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--tfr-ink) 40%, transparent) 0 3px, transparent 3px 6px); } /* المادّة الجارية: LED نابض — واحدٌ في الشاشة */ .tfr-row.air { background: color-mix(in srgb, var(--tfr-hot) 8%, transparent); } .tfr-row.air::after { background: var(--tfr-hot); } .tfr-row.air .tfr-c.seq { visibility: hidden; } /* الجاري يغلب المتأخّر: مادّةٌ على الهواء الآن حالتُها «الآن» لا «تأخّرت». صفٌّ بلونين يُقرأ مرّتين ويعني مرّةً واحدة. */ .tfr-row.air.late { background: color-mix(in srgb, var(--tfr-hot) 8%, transparent); } .tfr-row.air.late::after { background: var(--tfr-hot); } .tfr-row.air.late .tfr-c.at { color: var(--tfr-hot); } .tfr-row.air::before { content: ''; position: absolute; inset-inline-start: 7px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--tfr-hot); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tfr-hot) 26%, transparent); animation: tfrLed 1.7s ease-in-out infinite; } @keyframes tfrLed { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .tfr-row.air::before { animation: none; } .tfr-bul.flash { animation: none; } } @media (max-width: 760px) { .tfr-cols, .tfr-row { grid-template-columns: 28px minmax(0, 1fr) 62px 44px 50px; } .tfr-c.kind, .tfr-c.mat, .tfr-c.who, .tfr-cols span:nth-child(3), .tfr-cols span:nth-child(6), .tfr-cols span:nth-child(7) { display: none; } } /* ═══ خطّ «الآن» ═══ */ .tfr-now { position: relative; z-index: 2; display: flex; align-items: center; gap: 7px; height: 0; padding: 0 14px; } .tfr-now i { flex: 1; height: 1.5px; border-radius: 2px; background: var(--tfr-hot); } .tfr-now b { font-size: 9.5px; font-weight: 700; color: var(--accent-fg); background: var(--surface); padding: 1px 5px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--tfr-hot) 35%, transparent); } /* ═══ الختم — ذيلُ الورقة ═══ */ .tfr-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 14px; border-top: 1px solid var(--tfr-hair); } .tfr-f-sum, .tfr-f-left { font-size: 12px; color: var(--tfr-dim); } .tfr-f-sum b, .tfr-f-left b { color: var(--tfr-ink); font-weight: 700; } .tfr-f-left.over, .tfr-f-left.over b { color: var(--danger, #d63838); } .tfr-f-warn { margin-inline-start: auto; font-size: 11px; color: var(--tfr-dimmer); border: 1px dashed var(--tfr-hair); border-radius: 5px; padding: 2px 8px; } .tfr-empty { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; padding: 54px 20px; } .tfr-empty b { font-size: 15px; color: var(--tfr-ink); } .tfr-empty span { font-size: 13px; color: var(--tfr-dim); max-width: 380px; } /* ═══ v522 · السحب للترتيب والمدّة القابلة للتحرير ═══ المقبض هو الصفّ كلّه لا أيقونةٌ صغيرة: في غرفة أخبارٍ يُسحَب بسرعة، ومقبضٌ ٨px يُخطِئه الإصبع. والمؤشّر وحده يقول «هذا يُسحَب» — بلا زخرفةٍ زائدة. TakeFlow Tv - تصميم وتطوير محمد قندقلي */ .tfr-row.movable { cursor: grab; } .tfr-row.movable:active { cursor: grabbing; } .tfr-row.drag { opacity: .45; } /* خطّ الإفلات: حيث ستهبط المادّة، لا تلوينُ الصفّ كلّه */ .tfr-row.over { box-shadow: inset 0 2px 0 0 var(--tfr-hot); } /* خانة المدّة قابلة للتحرير: تُعلَن بحدٍّ متقطّع لا بلون */ .tfr-c.dur.edit { cursor: text; border-radius: 5px; padding: 1px 4px; margin-inline-start: -4px; border: 1px dashed transparent; } .tfr-c.dur.edit:hover, .tfr-c.dur.edit:focus-visible { border-color: color-mix(in srgb, var(--tfr-ink) 30%, transparent); color: var(--tfr-ink); outline: none; } /* ═══ v524 · المرحلة الثالثة — المباشر · خطّ القطع · التأجيل · مدّة اليوم ═══ المشبَع لشيءٍ واحد: LED المباشر ينبض بالأحمر لأنّه هواءٌ حيّ لا يُؤجَّل؛ وخطّ القطع حبرٌ مثبَّت لا لون — يُقرأ كتثقيبٍ على ورقة النشرة. ما بعد القطع يبهت لا يحمرّ: معلومةٌ لا إنذار. TakeFlow Tv - تصميم وتطوير محمد قندقلي */ .tfr-cut { display: flex; align-items: center; gap: 10px; padding: 4px 14px; margin: 2px 0; border-top: 2px dashed color-mix(in srgb, var(--tfr-ink) 55%, transparent); color: var(--tfr-ink); font-size: 11px; } .tfr-cut i { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--tfr-ink); flex: 0 0 auto; background: var(--surface); margin-inline-start: -18px; } .tfr-cut b { font-weight: 700; letter-spacing: .2px; } .tfr-cut span { color: var(--tfr-dim); } .tfr-row.pastcut .tfr-c { opacity: .62; } .tfr-row.live { background: color-mix(in srgb, var(--danger, #d63838) 5%, transparent); border-inline-start: 3px solid color-mix(in srgb, var(--danger, #d63838) 70%, transparent); } .tfr-row.live .tfr-c.ttl { font-weight: 700; color: var(--tfr-ink); } .tfr-row.live .tfr-c.kind { color: color-mix(in srgb, var(--danger, #d63838) 75%, var(--tfr-ink)); font-weight: 700; } .tfr-live-led { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--danger, #d63838); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger, #d63838) 22%, transparent); animation: tfrLive 1.4s ease-in-out infinite; } @keyframes tfrLive { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .tfr-live-led { animation: none; } } .tfr-vu i.live { background: var(--danger, #d63838); opacity: .85; } .tfr-live-acts { display: inline-flex; gap: 3px; } .tfr-live-acts button, .tfr-defer-btn { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--tfr-hair); background: var(--surface); color: var(--tfr-dim); font: inherit; font-size: 10px; cursor: pointer; transition: transform .12s, border-color .12s, color .12s; } .tfr-live-acts button:hover, .tfr-defer-btn:hover { border-color: color-mix(in srgb, var(--tfr-ink) 45%, transparent); color: var(--tfr-ink); } .tfr-live-acts button:active, .tfr-defer-btn:active { transform: scale(.965); } .tfr-live-acts button.del { border-style: dashed; } .tfr-defer-btn { margin-inline-start: 6px; opacity: 0; } .tfr-row:hover .tfr-defer-btn, .tfr-defer-btn:focus-visible { opacity: 1; } .tfr-defer { display: inline-block; margin-inline-start: 8px; font-style: normal; font-size: 10px; font-weight: 700; color: var(--tfr-dim); border: 1px dashed var(--tfr-hair); border-radius: 5px; padding: 1px 6px; vertical-align: middle; } .tfr-row.deferred .tfr-c.at { color: var(--tfr-dimmer); text-decoration: line-through; } .tfr-bul-dur.edit { cursor: text; border-radius: 5px; padding: 1px 6px; border: 1px dashed transparent; } .tfr-bul-dur.edit:hover, .tfr-bul-dur.edit:focus-visible { border-color: color-mix(in srgb, var(--tfr-ink) 30%, transparent); color: var(--tfr-ink); outline: none; } .tfr-add-live { margin-inline-start: auto; font: inherit; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 7px; border: 1px dashed var(--tfr-hair); background: transparent; color: var(--tfr-dim); cursor: pointer; transition: transform .12s, border-color .12s, color .12s; } .tfr-add-live:hover { border-color: color-mix(in srgb, var(--tfr-ink) 45%, transparent); color: var(--tfr-ink); } .tfr-add-live:active { transform: scale(.965); } .tfr-f-warn + .tfr-add-live { margin-inline-start: 0; } .tfr-pick .tfr-pick-l { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; } .tfr-pick-o { font: inherit; font-size: 13px; font-weight: 600; text-align: start; padding: 10px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); background: var(--surface); color: var(--text); cursor: pointer; transition: transform .12s, border-color .12s; } /* الهاتف: أهداف اللمس ٤٠px فما فوق — الزرّ الصغير يكبر لا يختفي */ @media (max-width: 480px) { .tfr-defer-btn, .tfr-live-acts button { width: 40px; height: 40px; min-height: 40px; font-size: 13px; } .tfr-defer-btn { opacity: 1; } } .tfr-pick-o:hover { border-color: var(--accent); } .tfr-pick-o:active { transform: scale(.965); } /* ═══ v522 · ختم نسخة الستايل — آخر سطرٍ في الملفّ عن قصد ═══ الستايل لا ختمَ له، فكان يمكن أن يصل ناقصاً أو قديماً ولا أحد يعلم: الشاشة تبدو «شبه صحيحة» وتُقرأ كعطل تصميمٍ لا كملفٍّ لم يصل. المتغيّر يُقرأ من tfVer()، وإن انقطع اللصق قبل هذا السطر رجع فارغاً. TakeFlow Tv - تصميم وتطوير محمد قندقلي */ /* ═══════════════════════════════════════════════════════════════════ v526 — الحركة بمعنى: طاقة الكونسول الحيّ لا الزينة ───────────────────────────────────────────────────────────────── محمد: «لازم يكون في طريقة تتحرّك بعض الأمور بشكل حلو». كلّ حركةٍ هنا تشرح حدثاً: الفقرات تدخل متتابعةً بعد التقسيم، الرقاقة تتبدّل بتلاشٍ لا بقفزة، الزرّ يتنفّس مرّةً حين يصير جاهزاً، العدّاد يومض حين يتغيّر. transform وopacity فقط، تحت ٢٠٠ms، وتنطفئ مع «تقليل الحركة». TakeFlow Tv - تصميم وتطوير محمد قندقلي */ .fri-row, .qd-pl-row, .rq-mp { animation: tfRowIn .2s cubic-bezier(.2,.9,.3,1) both; } .fri-row:nth-child(2), .qd-pl-row:nth-child(3), .rq-mp:nth-child(3) { animation-delay: .04s; } .fri-row:nth-child(3), .qd-pl-row:nth-child(4), .rq-mp:nth-child(4) { animation-delay: .08s; } .fri-row:nth-child(4), .qd-pl-row:nth-child(5), .rq-mp:nth-child(5) { animation-delay: .12s; } .fri-row:nth-child(n+5), .qd-pl-row:nth-child(n+6), .rq-mp:nth-child(n+6) { animation-delay: .15s; } @keyframes tfRowIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } .rqp-contract i, .rq-mpg, .rq-mpm, .rq-mps, .fri-ln, .qd-ln, .fr-need-b { transition: color .16s, background-color .16s, border-color .16s; } .fr-mk em { transition: transform .16s; } .fr-mk em.tick { animation: tfTick .28s cubic-bezier(.2,.9,.3,1); } @keyframes tfTick { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } } #fr-send:not([disabled]) { animation: tfReady .5s ease-out 1; } @keyframes tfReady { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } } .qd-plist:not([hidden]), .qd-pkg:not([hidden]) { animation: tfRowIn .2s cubic-bezier(.2,.9,.3,1) both; } @media (prefers-reduced-motion: reduce) { .fri-row, .qd-pl-row, .rq-mp, .fr-mk em.tick, #fr-send:not([disabled]), .qd-plist:not([hidden]), .qd-pkg:not([hidden]) { animation: none !important; } } /* ═══════════════════════════════════════════════════════════════════ v529 — مساعد المحطة: من الثيم لا فوقه ───────────────────────────────────────────────────────────────── محمد: «يتغيّر حسب الثيم — مميّز بس يشبه الثيم». كانت النافذة بألوانٍ مكتوبة يدوياً (أسود ثابت، حبر أزرار ثابت، أحمر وأخضر ثابتان) وزرّ الإرسال «ينزل» لا ينكمش. الآن كلّ لونٍ من رموز الثيم (‎--tf-glass · ‎--tf-gl · ‎--tf-ghi · ‎--tf-accent-ink · ‎--accent)، والضغط scale(.965)، والعلامة الوحيدة المشبَعة نقطة LED في الرأس. وعمود المحادثات داخل النافذة لا طبقةً فوقها (غلاسٌ فوق غلاس ممنوع). ═══════════════════════════════════════════════════════════════════ */ .ta-in { width: min(1080px, 100%) !important; max-height: 92vh !important; height: min(760px, 92vh); background: var(--bg); } .ta-h { background: var(--tf-glass, var(--surface2)); border-bottom: 1px solid var(--tf-gl, var(--border)); } .ta-orb { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; animation: none; background: var(--tf-glass, var(--surface2)); border: 1px solid var(--tf-gl, var(--border)); box-shadow: inset 0 1px 0 0 var(--tf-ghi, transparent); } .ta-led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 8px var(--accent); animation: tfLed 2.4s ease-in-out infinite; } @keyframes tfLed { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } @media (prefers-reduced-motion: reduce) { .ta-led { animation: none; } } .ta-hbtn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 9px; font-family: inherit; font-size: 11px; font-weight: 600; color: var(--text); background: var(--tf-glass, var(--surface2)); border: 1px solid var(--tf-gl, var(--border)); cursor: pointer; box-shadow: inset 0 1px 0 0 var(--tf-ghi, transparent); transition: transform .12s, border-color .15s; } .ta-hbtn:hover { border-color: var(--accent); } .ta-hbtn:active { transform: scale(.965); } .ta-hbtn[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--accent-fg); } .ta-scope { padding: 6px 15px; font-size: 10.5px; color: var(--text-muted); border-bottom: 1px solid var(--tf-gl, var(--border)); } .ta-cols { display: grid; grid-template-columns: 0 minmax(0, 1fr); flex: 1 1 auto; min-height: 0; transition: grid-template-columns .2s ease; } .ta-in.side-on .ta-cols { grid-template-columns: 250px minmax(0, 1fr); } .ta-side { min-height: 0; overflow: hidden; display: flex; flex-direction: column; border-inline-end: 1px solid var(--tf-gl, var(--border)); background: color-mix(in srgb, var(--surface2) 55%, transparent); visibility: hidden; } .ta-in.side-on .ta-side { visibility: visible; } .ta-side-h { display: flex; align-items: center; gap: 7px; padding: 10px 12px; font-size: 12px; border-bottom: 1px solid var(--tf-gl, var(--border)); } .ta-side-h .mono { color: var(--text-muted); font-size: 10.5px; } .ta-side-new { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 8px; font-family: inherit; font-size: 10.5px; font-weight: 600; color: var(--accent-fg); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); cursor: pointer; } .ta-side-new:active { transform: scale(.965); } .ta-side-b { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 6px; scrollbar-width: thin; } .ta-side-g { font-size: 9.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--text-muted); padding: 8px 8px 3px; } .ta-chat { display: flex; align-items: center; gap: 2px; border-radius: 10px; border: 1px solid transparent; } .ta-chat:hover { background: var(--tf-glass, var(--surface2)); border-color: var(--tf-gl, var(--border)); } .ta-chat.cur { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); } .ta-chat-o { flex: 1 1 auto; min-width: 0; text-align: start; padding: 7px 9px; background: none; border: 0; cursor: pointer; font-family: inherit; color: var(--text); } .ta-chat-o b { display: block; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ta-chat-o span { display: block; font-size: 10px; color: var(--text-muted); font-family: var(--tf-mono); margin-top: 2px; } .ta-chat-acts { display: none; gap: 2px; padding-inline-end: 4px; } .ta-chat:hover .ta-chat-acts, .ta-chat.cur .ta-chat-acts { display: inline-flex; } .ta-chat-acts button { width: 24px; height: 24px; border-radius: 7px; border: 1px solid transparent; background: none; color: var(--text-muted); cursor: pointer; display: grid; place-items: center; } .ta-chat-acts button:hover { color: var(--text); border-color: var(--tf-gl, var(--border)); background: var(--tf-glass, var(--surface2)); } .ta-chat-acts button.del:hover { color: var(--danger); } .ta-chat-acts button:active { transform: scale(.94); } .ta-side-empty { padding: 14px 10px; font-size: 11px; color: var(--text-muted); line-height: 1.8; text-align: center; } .ta-side-f { padding: 8px; border-top: 1px solid var(--tf-gl, var(--border)); } .ta-side-clear { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px; border-radius: 8px; font-family: inherit; font-size: 10.5px; color: var(--text-muted); background: none; border: 1px solid var(--tf-gl, var(--border)); cursor: pointer; } .ta-side-clear:hover { color: var(--danger); border-color: var(--danger); } .ta-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; } .ta-b { min-height: 0 !important; max-height: none; flex: 1 1 auto; } .ta-av { background: var(--tf-glass, var(--surface2)); border: 1px solid var(--tf-gl, var(--border)); } .ta-av .ta-led { width: 6px; height: 6px; } .ta-bub { background: var(--tf-glass, var(--surface2)); border: 1px solid var(--tf-gl, var(--border)); box-shadow: inset 0 1px 0 0 var(--tf-ghi, transparent); } .ta-bb.me .ta-bub { background: color-mix(in srgb, var(--accent) 10%, var(--tf-glass, var(--surface2))); border-color: color-mix(in srgb, var(--accent) 30%, transparent); } .ta-bb.ai .ta-bub { border-color: var(--tf-gl, var(--border)); } .ta-hd.add { color: var(--success, var(--accent)); background: color-mix(in srgb, var(--success, var(--accent)) 9%, transparent); } .ta-do button { transition: transform .12s; } .ta-do button:active { transform: scale(.965); } .ta-do button.p, .ta-go { color: var(--tf-accent-ink, #fff) !important; background: var(--accent); border-color: transparent; box-shadow: inset 0 1px 0 0 color-mix(in srgb, #fff 25%, transparent); } .ta-go { border: 0; transition: transform .12s, filter .15s; } .ta-go:hover { filter: brightness(1.06); } .ta-go:active { transform: scale(.965); box-shadow: none; } .ta-f { border-top: 1px solid var(--tf-gl, var(--border)); } .ta-f textarea { background: var(--tf-glass, var(--surface2)); border: 1px solid var(--tf-gl, var(--border)); color: var(--text); } .ta-f textarea:focus { border-color: var(--accent); } .ta-mic { display: grid; place-items: center; width: 38px; border-radius: 10px; border: 1px solid var(--tf-gl, var(--border)); background: var(--tf-glass, var(--surface2)); color: var(--text); cursor: pointer; } .ta-mic:active { transform: scale(.94); } .ta-mic.rec { color: var(--danger); border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); } .ta-manual { border-top: 1px dashed var(--tf-gl, var(--border)); } .ta-people button, .ta-mini { transition: transform .12s; } .ta-people button:active, .ta-mini:active { transform: scale(.965); } @media (max-width: 760px) { .ta-in.side-on .ta-cols { grid-template-columns: minmax(0, 1fr); } .ta-in.side-on .ta-side { position: absolute; inset: 0; z-index: 3; background: var(--bg); } } /* ═══════════════════════════════════════════════════════════════════ v531 · عناوين النشرة — ورقةٌ حيّة لكلّ نشرة (headlines.js) ───────────────────────────────────────────────────────────────── لغة الرن داون نفسها: الحبر يُشتقّ من --text (يصمد على الثيمات الاثني عشر)، الأرقام Mono، شريط التثقيب على حافّة الصفوف، والفيوميتر حبرٌ واحد بخمس درجات. اللون المشبع لشيءين لا ثالث لهما: • «قيد التنفيذ» — المادّة الجارية الآن (LED مضيء) • «عُدِّل بعد التثبيت» — ما يطلب انتباه المونتير الآن والأولوية بالحجم: عادي ← مهمّ ← رئيسيّ يكبر خطّه لا يتلوّن. TakeFlow Tv - تصميم وتطوير محمد قندقلي ═══════════════════════════════════════════════════════════════════ */ #page-headlines.hlr-on .hl-page-grid { display: block; max-width: min(1560px, 100%); } /* v543 — أعرض (كان 1260) */ #page-headlines.hlr-on #hl-side { display: none; } .hlr-setup-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 9px 12px; border-radius: 9px; font-size: 12px; font-weight: 500; line-height: 1.7; color: var(--text); border: 1px solid color-mix(in srgb, var(--danger, #d63838) 40%, transparent); background: color-mix(in srgb, var(--danger, #d63838) 7%, transparent); } .hlr-setup-note .tf-svg { flex: none; margin-top: 3px; color: var(--danger, #d63838); } /* v532 — الحبر نفسه للنافذة والزرّ العائم: هما على body لا داخل الصفحة */ .hlr-wrap, .hlr-mw, .hlr-pill { --hlr-ink: var(--text, #14181f); --hlr-hair: color-mix(in srgb, var(--hlr-ink) 11%, transparent); --hlr-dim: color-mix(in srgb, var(--hlr-ink) 60%, transparent); --hlr-dimmer: color-mix(in srgb, var(--hlr-ink) 40%, transparent); --hlr-hov: color-mix(in srgb, var(--hlr-ink) 5%, transparent); --hlr-hot: var(--accent, #d68910); --hlr-alarm: var(--danger, #d63838); } .hlr-wrap { padding: 4px 0 16px; } .hlr-mw .mono, .hlr-pill .mono, .hlr-wrap .mono { font-family: var(--tf-mono, 'IBM Plex Mono', ui-monospace, monospace); font-variant-numeric: tabular-nums; } .hlr-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 18px; align-items: start; } /* ابن الشبكة بلا min-width:0 يتّسع لأطول عنوان ويفيض عن الصفحة */ .hlr-main, .hlr-board { min-width: 0; } /* ═══ الشجرة ═══ */ .hlr-tree { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 2px; } .hlr-tree-head { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--hlr-dimmer); padding: 0 8px 7px; } .hlr-tree-sub { font-size: 10px; font-weight: 600; letter-spacing: .06em; color: var(--hlr-dimmer); padding: 11px 8px 4px; } .hlr-daynav { display: flex; align-items: stretch; gap: 4px; margin-bottom: 8px; } .hlr-nav { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; border: 1px solid var(--hlr-hair); border-radius: 8px; background: none; color: var(--hlr-dim); cursor: pointer; transition: transform .08s; } .hlr-nav:hover { color: var(--hlr-ink); background: var(--hlr-hov); } .hlr-nav:active { transform: scale(.965); } .hlr-daylbl { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border: 1px solid var(--hlr-hair); border-radius: 8px; background: none; cursor: pointer; font-family: inherit; color: var(--hlr-ink); } .hlr-daylbl b { font-size: 13px; font-weight: 700; } .hlr-daylbl span { font-size: 10.5px; font-weight: 500; color: var(--hlr-dimmer); white-space: nowrap; overflow: clip; text-overflow: ellipsis; max-width: 100%; } .hlr-daylbl:not(.today) { border-color: color-mix(in srgb, var(--hlr-hot) 45%, transparent); } .hlr-daylbl:active { transform: scale(.965); } .hlr-fold { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 9px; border: 0; background: none; border-radius: 8px; cursor: pointer; font-family: inherit; text-align: start; color: var(--hlr-dim); transition: transform .08s; } .hlr-fold:hover, .hlr-fold.on { background: var(--hlr-hov); color: var(--hlr-ink); } .hlr-fold.on { box-shadow: inset 2px 0 0 var(--hlr-ink); } .hlr-fold:active { transform: scale(.965); } .hlr-fname { min-width: 0; flex: 1; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: clip; text-overflow: ellipsis; } .hlr-fold.none .hlr-fname { font-weight: 500; } .hlr-ftime { font-size: 10.5px; font-weight: 500; color: var(--hlr-dimmer); white-space: nowrap; } .hlr-fn { min-width: 30px; text-align: end; font-size: 10.5px; font-weight: 600; color: var(--hlr-dimmer); } .hlr-fled { flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--hlr-dimmer); background: transparent; } .hlr-fold.has .hlr-fled { border-color: transparent; background: color-mix(in srgb, var(--hlr-ink) 45%, transparent); } .hlr-fold.shut .hlr-fled { background: color-mix(in srgb, var(--hlr-ink) 18%, transparent); } .hlr-fold.wait .hlr-fled { background: var(--hlr-hot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hlr-hot) 22%, transparent); animation: hlrPulse 1.6s ease-in-out infinite; } @keyframes hlrPulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--hlr-hot) 8%, transparent); } } .hlr-adhoc { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding: 8px 9px; border: 1px dashed var(--hlr-hair); border-radius: 8px; background: none; cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--hlr-dim); text-align: start; } .hlr-adhoc:hover { color: var(--hlr-ink); border-color: var(--hlr-dim); } .hlr-adhoc:active { transform: scale(.965); } /* ═══ الفراغ والترويسة ═══ */ .hlr-head { display: flex; align-items: baseline; gap: 11px; padding: 0 2px 13px; flex-wrap: wrap; } .hlr-head-day { font-size: 18px; font-weight: 700; color: var(--hlr-ink); } .hlr-head-meta { font-size: 12px; font-weight: 500; color: var(--hlr-dimmer); } .hlr-empty { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 46px 18px; text-align: center; color: var(--hlr-dim); } .hlr-empty b { font-size: 15px; font-weight: 700; color: var(--hlr-ink); } .hlr-empty span { font-size: 12.5px; font-weight: 500; max-width: 440px; line-height: 1.8; } .hlr-empty.in { padding: 32px 18px; } .hlr-empty-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; } /* ═══ الأزرار — من الثيم (g-btn) بمقاساتٍ محلّية ═══ */ .hlr-wrap .g-btn, .hlr-mw .g-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; font-size: 12px; font-weight: 600; } .hlr-wrap .g-btn.hlr-sm, .hlr-mw .g-btn.hlr-sm { padding: 5px 10px; font-size: 11.5px; } .hlr-wrap .g-btn.hlr-pri { border-color: color-mix(in srgb, var(--hlr-ink) 38%, transparent); } .hlr-wrap .g-btn.hlr-pri b { font-size: 11px; font-weight: 700; } .hlr-wrap .g-btn.hlr-danger { color: var(--hlr-dim); } .hlr-wrap .g-btn.hlr-danger:hover { color: var(--hlr-alarm); border-color: color-mix(in srgb, var(--hlr-alarm) 45%, transparent); } /* ═══ لوحة اليوم ═══ */ .hlr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .hlr-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 13px 14px 12px; min-height: 118px; border: 1px solid var(--hlr-hair); border-radius: 12px; background: var(--surface, transparent); cursor: pointer; font-family: inherit; text-align: start; color: var(--hlr-ink); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent); transition: transform .08s, border-color .14s; } .hlr-card:hover { border-color: color-mix(in srgb, var(--hlr-ink) 30%, transparent); } .hlr-card:active { transform: scale(.965); } .hlr-card.empty { border-style: dashed; background: none; box-shadow: none; } .hlr-card:disabled { cursor: default; opacity: .7; } .hlr-card:disabled:active { transform: none; } .hlr-card.shut { opacity: .72; } .hlr-card-time { font-size: 11.5px; font-weight: 600; color: var(--hlr-dimmer); } .hlr-card-name { font-size: 16px; font-weight: 700; } .hlr-card em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--hlr-dimmer); } .hlr-card-cta { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; font-size: 11.5px; font-weight: 700; color: var(--hlr-dim); } .hlr-card-meta { display: flex; flex-wrap: wrap; gap: 4px 11px; margin-top: auto; font-size: 11px; font-weight: 600; color: var(--hlr-dim); } .hlr-card-meta span { display: inline-flex; align-items: center; gap: 4px; } .hlr-card .hlr-vu { width: 100%; margin: 2px 0 0; } /* ═══ الفيوميتر — حبرٌ واحد بخمس درجات ═══ */ .hlr-vu { display: flex; gap: 2px; height: 7px; margin: 0 14px 10px; border-radius: 4px; overflow: clip; background: color-mix(in srgb, var(--hlr-ink) 7%, transparent); } .hlr-vu.empty { opacity: .6; } .hlr-vu i { flex: 1; min-width: 2px; font-style: normal; } .hlr-vu i.v-draft { background: repeating-linear-gradient(115deg, color-mix(in srgb, var(--hlr-ink) 20%, transparent) 0 3px, transparent 3px 6px); } .hlr-vu i.v-confirmed { background: color-mix(in srgb, var(--hlr-ink) 30%, transparent); } .hlr-vu i.v-work { background: var(--hlr-hot); } .hlr-vu i.v-done { background: color-mix(in srgb, var(--hlr-ink) 70%, transparent); } .hlr-vu i.v-air { background: color-mix(in srgb, var(--hlr-ink) 88%, transparent); } /* ═══ الورقة ═══ */ .hlr-sheet { border: 1px solid var(--hlr-hair); border-radius: 13px; background: var(--surface, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent); } .hlr-sh-head { display: flex; align-items: center; gap: 11px; padding: 12px 14px 10px; flex-wrap: wrap; } .hlr-sh-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .hlr-sh-name { font-size: 19px; font-weight: 700; color: var(--hlr-ink); } .hlr-sh-meta { font-size: 12px; font-weight: 500; color: var(--hlr-dimmer); } .hlr-chip { font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--hlr-hair); color: var(--hlr-dim); } .hlr-chip.b-open { color: var(--hlr-ink); border-color: color-mix(in srgb, var(--hlr-ink) 30%, transparent); } .hlr-sh-count { font-size: 15px; font-weight: 700; color: var(--hlr-ink); } .hlr-bar { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 0 14px 11px; } .hlr-holder { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--hlr-dim); } .hlr-holder.on { color: var(--hlr-ink); } .hlr-holder b { font-weight: 700; } .hlr-imgs { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; flex-wrap: wrap; } .hlr-imgst { font-size: 11.5px; font-weight: 600; color: var(--hlr-dim); } .hlr-imgst.s-zd { color: var(--hlr-ink); } .hlr-tog { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px; border: 1px solid var(--hlr-hair); border-radius: 999px; background: none; cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--hlr-dim); } .hlr-tog i { width: 22px; height: 12px; border-radius: 999px; position: relative; background: color-mix(in srgb, var(--hlr-ink) 16%, transparent); } .hlr-tog i::after { content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--hlr-ink); opacity: .55; } .hlr-tog.on { color: var(--hlr-ink); } .hlr-tog.on i { background: color-mix(in srgb, var(--hlr-ink) 55%, transparent); } .hlr-tog.on i::after { inset-inline-start: auto; inset-inline-end: 2px; opacity: 1; background: var(--surface, #fff); } .hlr-tog:active { transform: scale(.965); } /* ═══ الصفوف ═══ */ .hlr-cols, .hlr-row { display: grid; align-items: center; gap: 9px; padding: 0 14px; grid-template-columns: 18px 30px minmax(0, 1fr) 66px 128px minmax(40px, auto); } .hlr-cols { height: 25px; font-size: 9.5px; font-weight: 600; letter-spacing: .06em; color: var(--hlr-dimmer); border-bottom: 1px solid var(--hlr-hair); } .hlr-rows { position: relative; } .hlr-rows::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 20px; pointer-events: none; opacity: .8; background: radial-gradient(circle at center, color-mix(in srgb, var(--hlr-ink) 13%, transparent) 1.6px, transparent 1.7px) 0 0 / 20px 17px; } .hlr-row { position: relative; min-height: 50px; border-bottom: 1px solid var(--hlr-hair); } .hlr-row:hover { background: var(--hlr-hov); } .hlr-row::after { content: ''; position: absolute; inset-block: 6px; inset-inline-start: 0; width: 2.5px; border-radius: 2px; background: transparent; } .hlr-row.st-confirmed::after { background: color-mix(in srgb, var(--hlr-ink) 30%, transparent); } .hlr-row.st-work::after { background: var(--hlr-hot); } .hlr-row.st-done::after, .hlr-row.st-air::after { background: color-mix(in srgb, var(--hlr-ink) 70%, transparent); } .hlr-row.amended::after { background: var(--hlr-alarm); } .hlr-row.dragging { opacity: .45; } .hlr-row.over { box-shadow: inset 0 2px 0 var(--hlr-ink); } .hlr-row.flash { animation: hlrFlash 1.6s ease-out 1; } @keyframes hlrFlash { 0% { background: color-mix(in srgb, var(--hlr-hot) 22%, transparent); } 100% { background: transparent; } } .hlr-grip { display: inline-flex; align-items: center; justify-content: center; color: var(--hlr-dimmer); cursor: grab; } .hlr-grip:hover { color: var(--hlr-ink); } .hlr-seq { font-size: 13px; font-weight: 600; color: var(--hlr-dimmer); } .hlr-ttl { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 6px 0; } /* v543 — خطّ العنوان أكبر: ١٥ · ١٦٫٥ · ١٨٫٥ (كان ١٣٫٥ · ١٤٫٥ · ١٦) — والأولويّة بالحجم كما كانت */ .hlr-txt, .hlr-txt-v { width: 100%; min-width: 0; font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.65; color: var(--hlr-ink); } .hlr-txt { display: block; padding: 5px 7px; border: 1px solid transparent; border-radius: 7px; background: transparent; outline: none; resize: none; } .hlr-txt:hover { border-color: var(--hlr-hair); } .hlr-txt:focus { border-color: color-mix(in srgb, var(--hlr-ink) 35%, transparent); background: var(--bg-input, transparent); } .hlr-txt::placeholder { color: var(--hlr-dimmer); } .hlr-txt-v { display: block; padding: 5px 0; white-space: normal; overflow-wrap: anywhere; } /* الأولوية بالحجم */ .hlr-row.p1 .hlr-txt, .hlr-row.p1 .hlr-txt-v { font-size: 16.5px; font-weight: 600; } .hlr-row.p2 .hlr-txt, .hlr-row.p2 .hlr-txt-v { font-size: 18.5px; font-weight: 700; } .hlr-row.p2 { min-height: 58px; } .hlr-row.st-air .hlr-txt, .hlr-row.st-air .hlr-txt-v { color: var(--hlr-dim); } .hlr-moved { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--hlr-dimmer); padding-inline-start: 7px; } .hlr-prio { justify-self: start; padding: 3px 9px; border: 1px solid var(--hlr-hair); border-radius: 999px; background: none; font-family: inherit; font-size: 11px; font-weight: 600; color: var(--hlr-dim); cursor: pointer; white-space: nowrap; } .hlr-prio:hover { color: var(--hlr-ink); border-color: var(--hlr-dim); } .hlr-prio:active { transform: scale(.965); } .hlr-prio.ro { cursor: default; border-color: transparent; padding-inline: 0; } .hlr-row.p1 .hlr-prio { font-weight: 700; color: var(--hlr-ink); } .hlr-row.p2 .hlr-prio { font-weight: 700; color: var(--hlr-ink); border-color: color-mix(in srgb, var(--hlr-ink) 40%, transparent); } .hlr-st { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .hlr-st-l { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--hlr-dim); } .hlr-led { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--hlr-dimmer); } .hlr-row.st-confirmed .hlr-led { border-color: transparent; background: color-mix(in srgb, var(--hlr-ink) 50%, transparent); } .hlr-row.st-work .hlr-led { border-color: transparent; background: var(--hlr-hot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hlr-hot) 22%, transparent); animation: hlrPulse 1.6s ease-in-out infinite; } .hlr-row.st-work .hlr-st-l { color: var(--hlr-ink); } .hlr-row.st-done .hlr-led { border-color: transparent; background: color-mix(in srgb, var(--hlr-ink) 80%, transparent); } .hlr-row.st-air .hlr-led { border-color: color-mix(in srgb, var(--hlr-ink) 80%, transparent); background: radial-gradient(circle, var(--hlr-ink) 0 2px, transparent 2.5px); } .hlr-who { display: block; padding-inline-start: 15px; font-size: 10.5px; font-weight: 500; color: var(--hlr-dimmer); white-space: nowrap; overflow: clip; text-overflow: ellipsis; } .hlr-acts { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; } .hlr-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--hlr-ink) 28%, transparent); background: linear-gradient(180deg, color-mix(in srgb, #fff 7%, transparent), transparent 60%), var(--surface2, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent); font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--hlr-ink); cursor: pointer; transition: transform .08s, border-color .14s; } .hlr-btn:hover { border-color: color-mix(in srgb, var(--hlr-hot) 60%, transparent); } .hlr-btn:active { transform: scale(.965); } .hlr-btn.ok { border-color: color-mix(in srgb, var(--hlr-ink) 50%, transparent); } .hlr-btn.hot { border-color: var(--hlr-alarm); color: var(--hlr-alarm); } .hlr-mini { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; border: 1px solid transparent; background: none; color: var(--hlr-dimmer); cursor: pointer; } .hlr-mini:hover { color: var(--hlr-ink); border-color: var(--hlr-hair); } .hlr-mini:active { transform: scale(.965); } /* ═══ «عُدِّل بعد التثبيت» — ما تغيّر كلمةً كلمة ═══ */ .hlr-amend { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 9px 14px 10px 14px; padding-inline-start: 57px; border-bottom: 1px solid var(--hlr-hair); background: color-mix(in srgb, var(--hlr-alarm) 7%, transparent); } .hlr-amend-h { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--hlr-alarm); } .hlr-diff { flex: 1 1 320px; min-width: 0; font-size: 13.5px; font-weight: 500; line-height: 1.9; color: var(--hlr-ink); } .hlr-diff s { color: var(--hlr-dimmer); text-decoration-thickness: 1.5px; } .hlr-diff u { text-decoration: none; font-weight: 700; box-shadow: inset 0 -2px 0 var(--hlr-alarm); } .hlr-amend em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--hlr-dim); } /* ═══ الذيل: الموجب يميناً والخطر معزولٌ يساراً ═══ */ .hlr-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; } .hlr-foot-pos, .hlr-foot-dz { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; } /* الخطر يبقى يساراً حتى حين يلتفّ الذيل سطرين — لا يقفز إلى جانب الحفظ */ .hlr-foot-dz { margin-inline-start: auto; } /* ═══ السجلّ ═══ */ .hlr-log { border-top: 1px solid var(--hlr-hair); padding: 0 14px; } .hlr-log summary { cursor: pointer; padding: 10px 0; font-size: 12px; font-weight: 600; color: var(--hlr-dim); list-style: none; display: flex; gap: 7px; align-items: center; } .hlr-log summary::-webkit-details-marker { display: none; } .hlr-log summary b { font-size: 10.5px; color: var(--hlr-dimmer); } .hlr-log ol { list-style: none; margin: 0; padding: 0 0 12px; display: flex; flex-direction: column; gap: 5px; } .hlr-log li { display: grid; grid-template-columns: 44px 76px minmax(0, 1fr); gap: 8px; font-size: 12px; font-weight: 500; color: var(--hlr-dim); } .hlr-log li time { color: var(--hlr-dimmer); } .hlr-log li b { font-weight: 700; color: var(--hlr-ink); white-space: nowrap; overflow: clip; text-overflow: ellipsis; } .hlr-log-empty { padding: 0 0 12px; font-size: 12px; color: var(--hlr-dimmer); } /* هدف اللمس ٤٠ على الهاتف، ويصغر على الشاشة الكبيرة وحدها */ @media (min-width: 901px) { .hlr-nav { min-width: 30px; min-height: 30px; } } @media (max-width: 900px) { .hlr-shell { grid-template-columns: 1fr; } .hlr-mini { width: 40px; height: 40px; } .hlr-btn { min-height: 40px; padding-inline: 13px; } .hlr-prio { min-height: 34px; } .hlr-tree { position: static; } .hlr-cols { display: none; } /* الموبايل: سطرٌ للعنوان وسطرٌ لما حوله — لا خانةٌ فوق خانة */ .hlr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; padding-block: 5px; } .hlr-row > .hlr-ttl { flex: 1 1 calc(100% - 64px); } .hlr-row > .hlr-acts { margin-inline-start: auto; } .hlr-row > .hlr-st { flex-direction: row; align-items: center; gap: 8px; } .hlr-row .hlr-who { padding-inline-start: 0; } .hlr-amend { padding-inline-start: 14px; } /* v543 — tf-mobile.css يفرض ١٦px على كلّ حقلٍ (كي لا يقرّب iOS الصفحة) فتتساوى الأولويّات الثلاث في يد المنتج. ١٦ حدٌّ أدنى، والأولويّة فوقه بالحجم */ .hlr-row.p1 .hlr-txt { font-size: 17px !important; } .hlr-row.p2 .hlr-txt { font-size: 19px !important; } } /* ═══════════════════════════════════════════════════════════════════ v532 · نافذة المونتاج + الزرّ العائم خلفيّةٌ مصمتة بلا blur (ولا زجاجَ داخل زجاج)، وبطاقاتٌ كبيرة: الرقم، النصّ بحجم أولويّته، وزرٌّ واحد هو الفعل التالي. المشبع: «قيد التنفيذ» الجاري، و«عُدِّل» الذي ينتظر إقراراً، واقتراب الهواء. ═══════════════════════════════════════════════════════════════════ */ .hlr-mw { position: fixed; inset: 0; z-index: 12500; overflow-y: auto; background: var(--bg, #f4f5f7); color: var(--hlr-ink); } .hlr-mw-in { max-width: 1240px; margin: 0 auto; padding: 0 18px 28px; min-height: 100%; display: flex; flex-direction: column; } .hlr-mw-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 14px 0 12px; background: var(--bg, #f4f5f7); border-bottom: 1px solid var(--hlr-hair); } .hlr-mw-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .hlr-mw-t b { font-size: 20px; font-weight: 700; } .hlr-mw-t span { font-size: 12.5px; font-weight: 500; color: var(--hlr-dimmer); } .hlr-mw-air { font-size: 13px; font-weight: 700; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--hlr-hair); color: var(--hlr-dim); } .hlr-mw-air.soon { color: var(--hlr-alarm); border-color: var(--hlr-alarm); background: color-mix(in srgb, var(--hlr-alarm) 8%, transparent); } .hlr-ring { position: relative; flex: none; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; } .hlr-ring svg { position: absolute; inset: 0; } .hlr-ring-bg { fill: none; stroke: color-mix(in srgb, var(--hlr-ink) 12%, transparent); stroke-width: 4; } .hlr-ring-fg { fill: none; stroke: color-mix(in srgb, var(--hlr-ink) 82%, transparent); stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray .4s; } .hlr-ring b { position: relative; font-size: 11.5px; font-weight: 700; } .hlr-mw-bar { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 12px 0; } .hlr-mw-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; } .hlr-mw-chip { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--hlr-hair); color: var(--hlr-dim); } .hlr-mw-chip.wait { color: var(--hlr-hot); border-color: var(--hlr-hot); } .hlr-mw-chip.am { color: var(--hlr-alarm); border-color: color-mix(in srgb, var(--hlr-alarm) 60%, transparent); } .hlr-seg { margin-inline-start: auto; display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--hlr-hair); border-radius: 11px; } .hlr-seg button { min-height: 36px; padding: 6px 13px; border: 0; border-radius: 8px; background: none; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--hlr-dim); } .hlr-seg button b { font-size: 11px; } .hlr-seg button.on { background: var(--hlr-hov); color: var(--hlr-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hlr-ink) 20%, transparent); } .hlr-seg button:active { transform: scale(.965); } .hlr-mw-body { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; flex: 1; } .hlr-mw-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .hlr-mc { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--hlr-hair); border-radius: 14px; background: var(--surface, #fff); cursor: pointer; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent); } .hlr-mc::after { content: ''; position: absolute; inset-block: 12px; inset-inline-start: -1px; width: 3px; border-radius: 3px; background: transparent; } .hlr-mc.st-confirmed::after { background: color-mix(in srgb, var(--hlr-ink) 35%, transparent); } .hlr-mc.st-work::after { background: var(--hlr-hot); } .hlr-mc.st-done::after, .hlr-mc.st-air::after { background: color-mix(in srgb, var(--hlr-ink) 70%, transparent); } .hlr-mc.amended::after { background: var(--hlr-alarm); } .hlr-mc.sel { box-shadow: 0 0 0 2px color-mix(in srgb, var(--hlr-ink) 45%, transparent); } .hlr-mc.flash { animation: hlrFlash 1.6s ease-out 1; } .hlr-mc.st-done, .hlr-mc.st-air { opacity: .8; } .hlr-mc-no { font-size: 26px; font-weight: 700; text-align: center; color: var(--hlr-dimmer); } .hlr-mc.st-work .hlr-mc-no { color: var(--hlr-ink); } .hlr-mc-b { min-width: 0; } .hlr-mc-t { font-size: 18px; font-weight: 600; line-height: 1.65; color: var(--hlr-ink); overflow-wrap: anywhere; } .hlr-mc.p1 .hlr-mc-t { font-size: 20px; font-weight: 700; } .hlr-mc.p2 .hlr-mc-t { font-size: 23px; font-weight: 700; } .hlr-mc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--hlr-dim); } .hlr-mc.st-work .hlr-led { border-color: transparent; background: var(--hlr-hot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hlr-hot) 22%, transparent); animation: hlrPulse 1.6s ease-in-out infinite; } .hlr-mc.st-confirmed .hlr-led { border-color: transparent; background: color-mix(in srgb, var(--hlr-ink) 50%, transparent); } .hlr-mc.st-done .hlr-led, .hlr-mc.st-air .hlr-led { border-color: transparent; background: color-mix(in srgb, var(--hlr-ink) 80%, transparent); } .hlr-mc-prio { font-weight: 700; color: var(--hlr-ink); } .hlr-mc-am { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--hlr-alarm) 35%, transparent); background: color-mix(in srgb, var(--hlr-alarm) 7%, transparent); } /* flex-basis ‎320px من الورقة يصير «ارتفاعاً» داخل عمود — فيطول المربّع بلا نصّ */ .hlr-mc-am .hlr-diff { flex: none; font-size: 16px; } .hlr-mc-act { display: flex; flex-direction: column; align-items: stretch; gap: 7px; min-width: 176px; } .hlr-mbtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 10px 16px; border-radius: 11px; border: 1px solid color-mix(in srgb, var(--hlr-ink) 30%, transparent); background: linear-gradient(180deg, color-mix(in srgb, #fff 8%, transparent), transparent 60%), var(--surface2, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent); font-family: inherit; font-size: 14px; font-weight: 700; color: var(--hlr-ink); cursor: pointer; transition: transform .08s, border-color .14s; } .hlr-mbtn:hover { border-color: color-mix(in srgb, var(--hlr-hot) 60%, transparent); } .hlr-mbtn:active { transform: scale(.965); } .hlr-mbtn.go { border-color: color-mix(in srgb, var(--hlr-ink) 48%, transparent); } .hlr-mbtn.ok { border-color: color-mix(in srgb, var(--hlr-ink) 62%, transparent); background: color-mix(in srgb, var(--hlr-ink) 7%, var(--surface2, transparent)); } .hlr-mbtn.hot { border-color: var(--hlr-alarm); color: var(--hlr-alarm); } .hlr-mc-ok { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--hlr-dim); } .hlr-mc-act .hlr-mini { align-self: center; } .hlr-mw-feed { position: sticky; top: 92px; max-height: calc(100vh - 120px); overflow-y: auto; padding: 12px 14px; border: 1px solid var(--hlr-hair); border-radius: 13px; background: var(--surface, #fff); } .hlr-mw-fh { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--hlr-dimmer); margin-bottom: 9px; } .hlr-mw-feed ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .hlr-mw-feed li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 1px 8px; font-size: 12px; font-weight: 500; line-height: 1.6; color: var(--hlr-dim); } .hlr-mw-feed li time { grid-row: span 2; color: var(--hlr-dimmer); } .hlr-mw-feed li b { font-weight: 700; color: var(--hlr-ink); } .hlr-mw-feed li span { grid-column: 2; overflow-wrap: anywhere; } .hlr-mw-feed li.live { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--hlr-ink) 30%, transparent); padding-inline-start: 6px; } .hlr-mw-feed li.k-amend span { color: var(--hlr-alarm); } .hlr-mw-keys { margin-top: 18px; font-size: 11px; font-weight: 500; color: var(--hlr-dimmer); text-align: center; } .hlr-mw-open { margin-inline-start: 4px; } /* الزرّ العائم */ .hlr-pill { position: fixed; bottom: 86px; inset-inline-end: 18px; z-index: 12000; display: flex; align-items: stretch; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--hlr-ink) 18%, transparent); background: var(--surface, #fff); box-shadow: 0 10px 28px color-mix(in srgb, #000 26%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent); } .hlr-pill.hot { border-color: var(--hlr-hot); } .hlr-pill-go { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-block: 0; padding-inline: 14px 10px; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--hlr-ink); } .hlr-pill-go b { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--hlr-ink) 10%, transparent); } .hlr-pill-go b i { font-style: normal; } .hlr-pill.hot .hlr-pill-go b { background: var(--hlr-hot); color: #141414; } .hlr-pill-x { min-width: 40px; min-height: 44px; border: 0; border-inline-start: 1px solid var(--hlr-hair); background: none; cursor: pointer; color: var(--hlr-dimmer); border-start-end-radius: 999px; border-end-end-radius: 999px; } .hlr-pill-go:active, .hlr-pill-x:active { transform: scale(.965); } @media (max-width: 900px) { .hlr-mw-in { padding: 0 12px 22px; } .hlr-mw-head { flex-wrap: wrap; } .hlr-mw-body { grid-template-columns: 1fr; } .hlr-mw-feed { position: static; max-height: none; } .hlr-mc { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 13px 14px; } .hlr-mc-no { font-size: 20px; } .hlr-mc-act { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; min-width: 0; } .hlr-mc-act .hlr-mbtn { flex: 1 1 auto; } .hlr-seg { margin-inline-start: 0; } } /* ═══════════════════════════════════════════════════════════════════ v533 · يوم · أسبوع · شهر · أرشيف · بحث الأسبوع جدولٌ: النشرات صفوف والأيام أعمدة من الاثنين، والخليّة فيوميترٌ صغير وعدّ. الشهر تقويم. الأرشيف قائمةٌ بالشهر. واليوم الحاليّ إطارٌ بالحبر لا لون — المشبع يبقى لما يطلب الانتباه. ═══════════════════════════════════════════════════════════════════ */ .hlr-seg.hlr-views { margin: 0 0 9px; width: 100%; } .hlr-seg.hlr-views button { flex: 1; padding-inline: 6px; } .hlr-qwrap { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; padding: 0 10px; min-height: 40px; border: 1px solid var(--hlr-hair); border-radius: 9px; color: var(--hlr-dimmer); } .hlr-qwrap:focus-within { border-color: color-mix(in srgb, var(--hlr-ink) 35%, transparent); color: var(--hlr-ink); } .hlr-q { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--hlr-ink); padding: 8px 0; } .hlr-q::placeholder { color: var(--hlr-dimmer); } .hlr-head { align-items: center; } .hlr-head-x { margin-inline-start: auto; } .hlr-scrollx { overflow-x: auto; padding-bottom: 4px; } /* بعرض محتواه وأوسع إن اتّسعت الشاشة — والهاتف يمرّره أفقياً داخل صندوقه لا الصفحة */ .hlr-week { display: grid; grid-template-columns: 116px repeat(7, minmax(62px, 1fr)); gap: 4px; width: max-content; min-width: 100%; } .hlr-wh { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border-radius: 8px; font-size: 11.5px; color: var(--hlr-dim); } .hlr-wh b { font-weight: 700; } .hlr-wh span { font-size: 11px; color: var(--hlr-dimmer); } .hlr-wh.today { color: var(--hlr-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hlr-ink) 35%, transparent); } .hlr-wr { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 8px; min-width: 0; } .hlr-wr b { font-size: 12.5px; font-weight: 700; color: var(--hlr-ink); overflow-wrap: anywhere; } .hlr-wr span { font-size: 10.5px; font-weight: 500; color: var(--hlr-dimmer); } .hlr-wc { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; min-height: 58px; padding: 8px; border-radius: 9px; border: 1px solid var(--hlr-hair); background: var(--surface, transparent); font-family: inherit; color: var(--hlr-ink); cursor: pointer; } .hlr-wc.has:hover { border-color: color-mix(in srgb, var(--hlr-ink) 32%, transparent); } .hlr-wc b { font-size: 12px; font-weight: 700; text-align: center; } .hlr-wc.shut { opacity: .7; } .hlr-wc.empty { align-items: center; border-style: dashed; background: none; color: var(--hlr-dimmer); } .hlr-wc.empty:hover { color: var(--hlr-ink); border-color: var(--hlr-dim); } .hlr-wc.none { border-color: transparent; background: color-mix(in srgb, var(--hlr-ink) 3%, transparent); cursor: default; } .hlr-wc.today { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hlr-ink) 28%, transparent); } .hlr-wc:active:not(.none) { transform: scale(.965); } .hlr-vu.sm { height: 5px; margin: 0; } .hlr-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .hlr-mh { padding: 6px 2px; text-align: center; font-size: 11px; font-weight: 600; color: var(--hlr-dimmer); } .hlr-md { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-height: 86px; padding: 8px; border-radius: 10px; border: 1px solid var(--hlr-hair); background: var(--surface, transparent); font-family: inherit; text-align: start; color: var(--hlr-ink); cursor: pointer; } .hlr-md:hover { border-color: color-mix(in srgb, var(--hlr-ink) 30%, transparent); } .hlr-md:active { transform: scale(.965); } .hlr-md.out { opacity: .45; } .hlr-md.today { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--hlr-ink) 45%, transparent); } .hlr-md-n { font-size: 14px; font-weight: 700; color: var(--hlr-dim); } .hlr-md.has .hlr-md-n { color: var(--hlr-ink); } .hlr-md-b { font-size: 11px; font-weight: 600; color: var(--hlr-dim); } .hlr-md-bar { height: 4px; border-radius: 3px; background: color-mix(in srgb, var(--hlr-ink) 9%, transparent); overflow: clip; } .hlr-md-bar i { display: block; height: 100%; background: color-mix(in srgb, var(--hlr-ink) 70%, transparent); } .hlr-md-c { font-size: 10.5px; font-weight: 600; color: var(--hlr-dimmer); } .hlr-alist { display: flex; flex-direction: column; gap: 6px; } .hlr-am { display: flex; align-items: center; gap: 8px; padding: 12px 4px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--hlr-dimmer); } .hlr-am b { font-size: 10.5px; } .hlr-arow { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--hlr-hair); border-radius: 10px; background: var(--surface, transparent); font-family: inherit; text-align: start; color: var(--hlr-ink); cursor: pointer; } .hlr-arow:hover { border-color: color-mix(in srgb, var(--hlr-ink) 30%, transparent); } .hlr-arow:active { transform: scale(.965); } .hlr-arow b { font-size: 15px; font-weight: 700; min-width: 0; } .hlr-arow-d, .hlr-arow-t { font-size: 12px; font-weight: 500; color: var(--hlr-dim); } .hlr-arow .mono { font-size: 12px; font-weight: 600; color: var(--hlr-dim); } .hlr-more { display: flex; justify-content: center; padding: 12px 0; } .hlr-sres { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border: 1px solid var(--hlr-hair); border-radius: 10px; background: var(--surface, transparent); font-family: inherit; text-align: start; color: var(--hlr-ink); cursor: pointer; } .hlr-sres:hover { border-color: color-mix(in srgb, var(--hlr-ink) 30%, transparent); } .hlr-sres:active { transform: scale(.965); } .hlr-sres-t { font-size: 14px; font-weight: 600; line-height: 1.7; } .hlr-sres-t mark { background: color-mix(in srgb, var(--hlr-hot) 28%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; } .hlr-sres-m { font-size: 11.5px; font-weight: 500; color: var(--hlr-dimmer); } @media (max-width: 900px) { .hlr-arow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 3px; } .hlr-arow-d { grid-column: 1 / -1; } .hlr-md { min-height: 64px; padding: 5px; } .hlr-md-b, .hlr-md-c { display: none; } } /* ═══════════════════════════════════════════════════════════════════ v534 · الرسائل ونقاش الطلب ───────────────────────────────────────────────────────────────── • درج النقاش على body (لا داخل سلفٍ عليه filter): الغلاس على الدرج وحده — طبقة التحكّم — والرسائل داخله بصريّة بلا blur. • الأفاتار بالحروف محايد: هويّة لا تنبيه. • اللون المشبع لشيءٍ واحد: شارة غير المقروء. TakeFlow Tv - تصميم وتطوير محمد قندقلي ═══════════════════════════════════════════════════════════════════ */ .rt-drawer, .rt-cnt, .tf-mono { /* v537 — التباين: الحبر الثانويّ والحدود كانت أخفت من أن تُقرأ فوق ستارة النافذة */ --rt-ink: var(--text, #14181f); --rt-hair: color-mix(in srgb, var(--rt-ink) 16%, transparent); --rt-dim: color-mix(in srgb, var(--rt-ink) 74%, transparent); --rt-dimmer: color-mix(in srgb, var(--rt-ink) 58%, transparent); --rt-hov: color-mix(in srgb, var(--rt-ink) 7%, transparent); } /* ── الأفاتار بالحروف ── */ .mini-avatar.tf-mono { font-family: 'IBM Plex Sans Arabic', inherit; font-weight: 700; line-height: 1; letter-spacing: 0; color: var(--rt-ink); background: color-mix(in srgb, var(--surface2, #eef0f3) 82%, var(--rt-ink) 8%); border: 1px solid var(--rt-hair); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent); user-select: none; } /* ── الشارات ── */ .rt-cnt { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-inline-start: 6px; border-radius: 9px; font-size: 10.5px; font-weight: 700; line-height: 1; font-family: 'IBM Plex Mono', ui-monospace, monospace; color: var(--danger-ink); background: var(--danger, #d63838); } .rt-cnt[hidden], .mc-disc-badge[hidden] { display: none; } /* ── الدرج ── */ .rt-drawer { position: fixed; z-index: 1700; inset-block: 12px; inset-inline-end: 12px; width: min(430px, calc(100vw - 24px)); display: none; flex-direction: column; color: var(--rt-ink); border-radius: 18px; /* v537 — سطحٌ مُصمَت: الدرج يُفتح فوق ستارة النافذة السوداء، والسطح الشفّاف (وهو في ثيم الزجاج شفّافٌ أصلاً) كان يأخذ لونها فيبدو كلّه رمادياً باهتاً. السطح فوق الخلفية — لون الثيم نفسه، بلا شفافية. */ background: linear-gradient(color-mix(in srgb, var(--surface, #fff) 90%, transparent), color-mix(in srgb, var(--surface, #fff) 90%, transparent)), var(--bg, #f4f5f7); border: 1px solid var(--rt-hair); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent), 0 24px 60px -18px rgba(0, 0, 0, .45); } .rt-drawer.open { display: flex; animation: rtIn .18s ease-out; } @keyframes rtIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .rt-drawer.open { animation: none; } } .rt-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px 12px; border-bottom: 1px solid var(--rt-hair); } .rt-head-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--rt-dim); border: 1px solid var(--rt-hair); } .rt-titles { flex: 1; min-width: 0; } .rt-kicker { font-size: 11px; font-weight: 600; color: var(--rt-dimmer); white-space: nowrap; overflow: clip; text-overflow: ellipsis; } .rt-title { font-size: 15px; font-weight: 700; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: clip; } .rt-mono, .rt-time { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; } .rt-iconbtn { flex: none; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--rt-hair); background: transparent; color: var(--rt-dim); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .1s, color .12s; } .rt-iconbtn:hover { color: var(--rt-ink); background: var(--rt-hov); } .rt-iconbtn:active { transform: scale(.965); } .rt-people { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 9px 14px; border-bottom: 1px solid var(--rt-hair); } .rt-people-lbl { font-size: 11px; font-weight: 600; color: var(--rt-dimmer); } .rt-people-more { font-size: 11px; font-weight: 600; color: var(--rt-dimmer); font-family: 'IBM Plex Mono', ui-monospace, monospace; } .rt-person { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 3px 10px 3px 4px; border-radius: 999px; border: 1px solid var(--rt-hair); background: transparent; color: var(--rt-ink); cursor: pointer; font-family: inherit; transition: transform .1s; } .rt-person:hover { background: var(--rt-hov); } .rt-person:active { transform: scale(.965); } .rt-person-n { font-size: 12px; font-weight: 600; } .rt-person-r { font-size: 10.5px; font-weight: 500; color: var(--rt-dimmer); } .rt-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 4px; } /* الفاصل ثابتٌ لا لاصق: اللاصق يجلس فوق سطر الرسالة الأولى في درجٍ قصير */ .rt-day { display: flex; justify-content: center; padding: 6px 0; } .rt-day span { font-size: 10.5px; font-weight: 600; color: var(--rt-dim); padding: 3px 11px; border-radius: 999px; border: 1px solid var(--rt-hair); background: color-mix(in srgb, var(--surface, #fff) 94%, transparent); } .rt-msg { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; padding: 7px 6px; border-radius: 12px; } .rt-msg:hover, .rt-msg:focus-within { background: var(--rt-hov); } .rt-msg:focus { outline: none; } .rt-msg:focus-visible { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rt-ink) 30%, transparent); } .rt-av { padding-top: 2px; } .rt-bub { min-width: 0; } .rt-meta { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 2px; } .rt-who { font-size: 12.5px; font-weight: 700; } .rt-role { font-size: 10.5px; font-weight: 500; color: var(--rt-dimmer); } .rt-time { font-size: 10.5px; color: var(--rt-dimmer); } .rt-state { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 500; color: var(--rt-dimmer); } .rt-tag { font-size: 10.5px; font-weight: 600; padding: 1px 8px; border-radius: 6px; border: 1px solid var(--rt-hair); color: var(--rt-dim); } .rt-txt { font-size: 13.5px; font-weight: 500; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; text-align: start; } .rt-msg.is-pending .rt-txt, .rt-msg.is-pending .rt-who { opacity: .6; } .rt-msg.is-legacy { opacity: .82; } .rt-msg.is-deleted .rt-txt { font-size: 12.5px; font-style: italic; color: var(--rt-dimmer); } .rt-msg .msg-reply-quote { margin: 3px 0 5px; border-inline-start-color: var(--rt-dimmer); background: var(--rt-hov); opacity: 1; } .rt-msg .msg-reply-quote b { color: var(--rt-ink); } .rt-tools { position: absolute; top: -14px; inset-inline-end: 8px; z-index: 2; display: none; gap: 2px; padding: 2px; border-radius: 10px; border: 1px solid var(--rt-hair); background: var(--surface, #fff); box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .4); } .rt-msg:hover .rt-tools, .rt-msg:focus-within .rt-tools { display: inline-flex; } .rt-tool { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--rt-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .rt-tool:hover { color: var(--rt-ink); background: var(--rt-hov); } .rt-tool.danger:hover { color: var(--danger, #d63838); } .rt-tool:active { transform: scale(.965); } .rt-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 18px; text-align: center; color: var(--rt-dimmer); } .rt-empty p { margin: 0; font-size: 12.5px; font-weight: 500; line-height: 1.8; max-width: 300px; } .rt-skel { display: flex; flex-direction: column; gap: 12px; padding: 12px 4px; } .rt-skel i { display: block; height: 42px; border-radius: 12px; background: var(--rt-hov); animation: rtSk 1.2s ease-in-out infinite; } .rt-skel i:nth-child(2) { width: 78%; } .rt-skel i:nth-child(3) { width: 58%; } @keyframes rtSk { 50% { opacity: .45; } } .rt-foot { border-top: 1px solid var(--rt-hair); padding: 9px 12px 12px; display: flex; flex-direction: column; gap: 7px; } .rt-ctx { display: flex; align-items: center; gap: 5px; overflow-x: auto; scrollbar-width: none; } .rt-ctx::-webkit-scrollbar { display: none; } .rt-ctx[hidden] { display: none; } .rt-ctx-lbl { flex: none; font-size: 11px; font-weight: 600; color: var(--rt-dimmer); } .rt-chip { flex: none; min-height: 30px; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--rt-hair); background: transparent; font-family: inherit; font-size: 11.5px; font-weight: 600; color: var(--rt-dim); cursor: pointer; } .rt-chip.on { color: var(--rt-ink); background: var(--rt-hov); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rt-ink) 26%, transparent); } .rt-chip:active { transform: scale(.965); } #rt-reply .reply-compose-bar { margin: 0; border-radius: 10px; } /* v537 — صندوق الكتابة يُرى: حدٌّ واضح وسطحٌ أفتح من الدرج، ويضيء عند التركيز */ .rt-shell { display: flex; align-items: flex-end; gap: 6px; padding: 4px 4px 4px 6px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--rt-ink) 24%, transparent); background: color-mix(in srgb, var(--rt-ink) 4%, var(--bg, #fff)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent); } .rt-shell:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent); } #rt-input { flex: 1; min-width: 0; resize: none; border: 0; outline: none; background: transparent; color: var(--rt-ink); font-family: inherit; font-size: 13.5px; font-weight: 500; line-height: 1.8; padding: 7px 8px; max-height: 150px; overflow-y: auto; min-height: 39px; } /* v537 — سطرٌ كاملٌ أبداً: لا يُقصّ ولو قيس مخفيّاً */ #rt-input::placeholder { color: var(--rt-dim); opacity: 1; } .rt-send { flex: none; width: 40px; height: 40px; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--tf-accent-ink, #fff); border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--rt-hair)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff 6%), var(--accent)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 24%, transparent); transition: transform .1s, filter .12s; } .rt-send:hover { filter: brightness(1.06); } .rt-send:active { transform: scale(.965); } .rt-send.is-empty { opacity: .45; filter: saturate(.6); } /* v537 — فارغ: خافت · جاهز: كامل */ @media (max-width: 700px) { /* على الهاتف الدرج شاشةٌ كاملة: لا شيء خلفه يُرى، فالخلفية مصمتة */ .rt-drawer { inset: 0; width: auto; border-radius: 0; border: 0; background: var(--bg, #f4f5f7); backdrop-filter: none; -webkit-backdrop-filter: none; padding-bottom: env(safe-area-inset-bottom, 0); } .rt-tool { width: 40px; height: 40px; } .rt-chip { min-height: 40px; } .rt-person { min-height: 40px; } /* رأس المحادثة على الهاتف: حقل البحث بعرضٍ ثابت (١٦٨) كان يعصر الاسم إلى ٢٣ بكسل — فالمجموعة بلا اسمٍ ظاهر. البحث ينزل سطراً كاملاً تحت الرأس. */ #page-messages .msgs-thread-head { flex-wrap: wrap; row-gap: 8px; } #page-messages .msgs-tsearch-wrap { order: 9; flex: 1 1 100%; } #page-messages .msgs-tsearch, #page-messages .msgs-tsearch:focus { width: 100%; } } /* ── قائمة الرسائل ── */ .rt-inbox-ic { flex: none; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); border: 1px solid var(--border); background: var(--surface2); } .msg-search-title .tf-svg { vertical-align: -2px; } .msgs-list-empty { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 30px 16px; text-align: center; color: var(--text-muted); font-size: 13px; font-weight: 500; } .msgs-list-empty small { font-size: 11.5px; opacity: .8; } .msgs-empty-ic { color: var(--text-muted); opacity: .7; line-height: 0; } .msgs-empty-ic .tf-svg { width: 38px; height: 38px; } .msgs-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .msgs-tab .tf-svg { flex: none; } .msgs-tab-plus .tf-svg { width: 11px; height: 11px; margin-inline-start: -4px; } .msgs-del-conv { width: 36px; height: 36px; display: none; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; } .msgs-del-conv:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); } .msgs-del-conv:active { transform: scale(.965); } .msgs-tsearch-clear { display: inline-flex; align-items: center; justify-content: center; } .msg-person-name { font-weight: 700; font-size: 13px; } .msg-deleted-txt { font-style: italic; opacity: .7; } .msg-pin-mark { display: inline-flex; vertical-align: -2px; margin-inline-start: 4px; opacity: .8; } button.msg-close { background: transparent; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; color: var(--text-muted); cursor: pointer; } #msg-sidebar-title { display: inline-flex; align-items: center; gap: 6px; } .msg-thread-input button .tf-svg { width: 18px; height: 18px; } .rcb-icon { display: inline-flex; color: var(--accent-fg); } .rcb-close { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; border-radius: 8px; } .mc-btn .tf-svg { vertical-align: -3px; } /* ═══════════════════════════════════════════════════════════════════ v535 · الكتابة والتنقّل — الذكر · القفز · إعادة التوجيه · المسودّة · المحفوظة · Ctrl+K النوافذ الثلاث (الذكر · إعادة التوجيه · التنقّل) على body، والغلاس على الصندوق وحده — الغطاء خلفه بلا blur. TakeFlow Tv - تصميم وتطوير محمد قندقلي ═══════════════════════════════════════════════════════════════════ */ .ms-men-pop, .ms-ov, .ms-men { --ms-ink: var(--text, #14181f); --ms-hair: color-mix(in srgb, var(--ms-ink) 12%, transparent); --ms-dim: color-mix(in srgb, var(--ms-ink) 60%, transparent); --ms-hov: color-mix(in srgb, var(--ms-ink) 6%, transparent); } /* الذكر داخل الرسالة: وزنٌ لا لون — واسمي أنا وحده يُبرَز */ .ms-men { font-weight: 700; color: inherit; border-bottom: 1.5px solid color-mix(in srgb, currentColor 35%, transparent); } .ms-men.me { color: var(--accent-fg); border-bottom-color: var(--accent); } .msg-bubble.mine .ms-men.me { color: inherit; } /* قائمة الذكر */ .ms-men-pop { position: fixed; z-index: 1850; display: none; flex-direction: column; gap: 2px; min-width: 220px; padding: 6px; border-radius: 14px; border: 1px solid var(--ms-hair); color: var(--ms-ink); /* v536 — كان color-mix من --surface، وهي شفّافةٌ في ثيم الزجاج (٧٢٪): القائمة بلا blur فكان نصّ القائمة خلفها يُقرأ من خلالها. السطح فوق --bg = معتم. */ background: linear-gradient(var(--surface, #fff), var(--surface, #fff)), var(--bg, #fff); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent), 0 18px 40px -16px rgba(0, 0, 0, .45); } .ms-men-pop.on { display: flex; } .ms-men-h { display: flex; align-items: center; gap: 6px; padding: 4px 8px 6px; font-size: 11px; font-weight: 600; color: var(--ms-dim); } .ms-men-i { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 5px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--ms-ink); cursor: pointer; font-family: inherit; text-align: start; } .ms-men-i.on, .ms-men-i:hover { background: var(--ms-hov); } .ms-men-n { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; } .ms-men-i small { font-size: 10.5px; font-weight: 500; color: var(--ms-dim); } /* الغطاء والصندوق (إعادة التوجيه · التنقّل) */ .ms-ov { position: fixed; inset: 0; z-index: 1900; display: none; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; background: rgba(0, 0, 0, .42); } .ms-ov.open { display: flex; } .ms-box { width: min(480px, 100%); max-height: 72vh; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; color: var(--ms-ink); border: 1px solid var(--ms-hair); background: color-mix(in srgb, var(--surface, #fff) 90%, transparent); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent), 0 30px 70px -24px rgba(0, 0, 0, .55); } .ms-box-h { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; } .ms-box-h > span { display: inline-flex; align-items: center; gap: 7px; flex: 1; } .ms-x { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--ms-hair); background: transparent; color: var(--ms-dim); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .ms-x:hover { color: var(--ms-ink); background: var(--ms-hov); } .ms-x:active { transform: scale(.965); } .ms-fwd-src { display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border-radius: 12px; background: var(--ms-hov); border-inline-start: 3px solid var(--ms-dim); } .ms-fwd-src b { font-size: 12px; font-weight: 700; } .ms-fwd-src span { font-size: 12.5px; font-weight: 500; color: var(--ms-dim); line-height: 1.7; } .ms-q { width: 100%; min-height: 42px; padding: 9px 13px; border-radius: 12px; border: 1px solid var(--ms-hair); background: transparent; color: var(--ms-ink); font-family: inherit; font-size: 13.5px; font-weight: 500; } .ms-q:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 55%, var(--ms-hair)); } .ms-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; } .ms-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px; border: 0; border-radius: 11px; background: transparent; color: var(--ms-ink); cursor: pointer; font-family: inherit; text-align: start; } .ms-row:hover, .ms-row.on { background: var(--ms-hov); } .ms-row:active { transform: scale(.985); } .ms-row .grp-avatar { width: 30px; height: 30px; } .ms-row-n { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; } .ms-row small { font-size: 11px; font-weight: 500; color: var(--ms-dim); } .ms-sw-box { gap: 8px; } .ms-sw-q { display: flex; align-items: center; gap: 8px; color: var(--ms-dim); } .ms-sw-q .ms-q { flex: 1; } .ms-sw-foot { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; font-weight: 500; color: var(--ms-dim); padding: 2px 4px; } .ms-sw-foot kbd { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; padding: 1px 6px; margin-inline-end: 3px; border-radius: 5px; border: 1px solid var(--ms-hair); } /* علامة إعادة التوجيه · الاقتباس القافز · المعلّقة */ .ms-fwd-lbl { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; font-size: 11px; font-weight: 600; font-style: italic; opacity: .75; } .msg-reply-quote.is-jump { cursor: pointer; } .msg-reply-quote.is-jump:hover { filter: brightness(1.06); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent); } .msg-reply-quote.is-jump:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 1px; } .msg-bubble.is-pending { opacity: .7; } .msg-tick.is-pending { display: inline-flex; vertical-align: -2px; margin-inline-start: 4px; opacity: .8; } .rt-msg.msg-flash { animation: msgFlash 1.5s ease; } /* المسودّة · المحفوظة */ .ms-draft-k { font-weight: 700; color: var(--warning, #c98a10); } .ms-saved { position: relative; } .ms-unsave { flex: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .ms-unsave:hover { border-color: var(--border); color: var(--text); } .ms-unsave:active { transform: scale(.965); } .msgs-tab-saved { flex: 0 0 auto; min-width: 44px; } /* عنوان نقاشٍ طويل كان يلتفّ أربعة أسطر في عمودٍ ضيّق بجانب الوقت — سطرٌ بنقاط */ .msg-conv-name > span:first-child { flex: 1; min-width: 0; white-space: nowrap; overflow: clip; text-overflow: ellipsis; } /* الشريط السريع العائم كان يغطّي صندوق الكتابة في صفحة الرسائل */ body:has(#page-messages.active) #tf-quickbar { display: none; } @media (max-width: 700px) { .ms-ov { padding: 10px; align-items: flex-end; } .ms-box { max-height: 82vh; } } /* ═══════════════════════════════════════════════════════════════════ v536 · الحضور والصوت — حالة العمل · الكتم والأرشفة · الملاحظة الصوتية · من قرأ في المجموعة · من رسالة إلى عنوان اللون للمعنى: الأخضر متاح · الكهرماني مشغول · الأحمر على الهواء وحده (والتسجيل) · الأزرق الرماديّ استراحة · الحلقة الفارغة خارج الدوام · الرماديّ الباهت غير متّصل. والفرق بالشكل أيضاً لا باللون وحده. TakeFlow Tv - تصميم وتطوير محمد قندقلي ═══════════════════════════════════════════════════════════════════ */ .ms-st-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; background: var(--success); vertical-align: middle; } .ms-st-dot.st-busy { background: var(--warning, #d99a1c); } .ms-st-dot.st-air { background: var(--danger, #e05050); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger, #e05050) 22%, transparent); animation: msAirLed 1.6s ease-in-out infinite; } .ms-st-dot.st-brk { background: color-mix(in srgb, #5d7fa8 85%, var(--text-muted)); } .ms-st-dot.st-off { background: transparent; border: 2px solid var(--text-muted); } .ms-st-dot.st-away { background: color-mix(in srgb, var(--text-muted) 38%, transparent); } @keyframes msAirLed { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger, #e05050) 0%, transparent); } } /* على صورة الزميل في القائمة */ .ms-av { position: relative; flex: none; display: inline-flex; line-height: 0; } .ms-av .ms-st-dot { position: absolute; bottom: 0; inset-inline-end: 0; width: 12px; height: 12px; border: 2px solid var(--surface); } .ms-av .ms-st-dot.st-off { border-color: var(--text-muted); box-shadow: 0 0 0 2px var(--surface); } .ms-av .ms-st-dot.st-away { display: none; } /* غير المتّصل بلا نقطة: الغياب لا يُعلَن في كلّ سطر */ /* رأس المحادثة: الحالة تحت الدور */ .ms-thread-st { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--text-muted); } .ms-thread-st .ms-st-dot { width: 8px; height: 8px; } .ms-thread-st .ms-st-dot.st-off { border-width: 1.5px; } /* تنبيه قبل الكتابة لزميلٍ على الهواء أو مشغول */ .ms-st-warn { display: flex; align-items: center; gap: 8px; margin: 0 14px 6px; padding: 8px 12px; border-radius: 11px; font-size: 12px; font-weight: 500; line-height: 1.6; color: var(--text); background: color-mix(in srgb, var(--text-muted) 9%, var(--surface)); border: 1px solid var(--border); border-inline-start: 3px solid var(--text-muted); } .ms-st-warn.st-air { border-inline-start-color: var(--danger, #e05050); } .ms-st-warn.st-busy { border-inline-start-color: var(--warning, #d99a1c); } /* زرّ حالتي — بجانب البحث */ .ms-st-btn { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 11px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent); } .ms-st-btn:hover { border-color: color-mix(in srgb, var(--text) 25%, var(--border)); } .ms-st-btn:active { transform: scale(.965); } .ms-st-btn:empty { display: none; } .ms-st-btn .tf-svg { opacity: .6; } .ms-st-menu { position: fixed; z-index: 1850; display: none; flex-direction: column; gap: 2px; min-width: 230px; padding: 6px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); background: linear-gradient(var(--surface, #fff), var(--surface, #fff)), var(--bg, #fff); /* معتمة في ثيم الزجاج أيضاً */ box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent), 0 18px 40px -16px rgba(0, 0, 0, .45); } .ms-st-menu.on { display: flex; } .ms-st-h { padding: 5px 9px 7px; font-size: 11px; font-weight: 600; color: var(--text-muted); } .ms-st-i { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; text-align: start; } .ms-st-i > span { flex: 1; } .ms-st-i:hover, .ms-st-i:focus-visible, .ms-st-i.on { background: color-mix(in srgb, var(--text) 6%, transparent); outline: none; } .ms-st-i:active { transform: scale(.985); } /* الكتم والأرشفة */ .ms-mute-ic { display: inline-flex; flex: none; color: var(--text-muted); opacity: .85; } .msg-conv-item.is-muted .msg-conv-badge { background: color-mix(in srgb, var(--text-muted) 55%, transparent); color: var(--surface); } .msg-conv-item.is-muted.unread { background: transparent; } button.ms-arch-h { display: flex; align-items: center; gap: 6px; width: calc(100% - 16px); margin: 10px 8px 4px; min-height: 40px; padding: 0 12px; border: 1px dashed var(--border); border-radius: 11px; background: transparent; color: var(--text-muted); cursor: pointer; font-family: inherit; text-align: start; } button.ms-arch-h:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 1px; } button.ms-arch-h:hover { color: var(--text); } button.ms-arch-h:active { transform: scale(.985); } .ms-arch-chev { margin-inline-start: auto; display: inline-flex; transition: transform .18s; } .ms-arch-h.open .ms-arch-chev { transform: rotate(180deg); } .ms-head-acts { display: inline-flex; align-items: center; gap: 6px; flex: none; } .ms-head-acts + .msgs-del-conv { margin-inline-start: 10px; } /* الحذف معزولٌ عن الكتم والأرشفة */ .ms-head-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; } .ms-head-btn:hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 25%, var(--border)); } .ms-head-btn:active { transform: scale(.965); } .ms-head-btn.on, .rt-iconbtn.on { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); border-color: color-mix(in srgb, var(--text) 28%, var(--border)); } /* الملاحظة الصوتية — شريط التسجيل */ #msgs-mic-btn.is-rec { border-color: var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); } #msgs-mic-btn[hidden] { display: none; } .ms-rec { display: flex; align-items: center; gap: 10px; margin: 0 14px 8px; padding: 7px 8px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface2); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent); } .ms-rec-x, .ms-rec-stop { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; } .ms-rec-x:hover, .ms-rec-stop:hover { color: var(--text); } .ms-rec-x:active, .ms-rec-stop:active, .ms-rec-send:active { transform: scale(.965); } .ms-rec-led { flex: none; width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--text-muted) 45%, transparent); } .ms-rec.is-rec .ms-rec-led { background: var(--danger, #e05050); box-shadow: 0 0 8px var(--danger, #e05050); animation: msRecBlink 1s steps(2, start) infinite; } @keyframes msRecBlink { to { opacity: .25; } } .ms-rec-t { flex: none; min-width: 42px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; } .ms-rec-vu { flex: 1; min-width: 60px; display: flex; align-items: flex-end; gap: 3px; height: 22px; direction: ltr; } .ms-rec-vu i { flex: 1; max-width: 8px; height: 100%; border-radius: 2px; background: color-mix(in srgb, var(--text-muted) 22%, transparent); } .ms-rec-vu i.on { background: var(--success); } .ms-rec-vu i:nth-child(n+9).on { background: var(--warning, #d99a1c); } .ms-rec-vu i:nth-child(n+12).on { background: var(--danger, #e05050); } .ms-rec-cap { flex: 0 1 auto; min-width: 0; font-size: 11px; font-weight: 500; color: var(--text-muted); white-space: nowrap; overflow: clip; text-overflow: ellipsis; } .ms-rec-send { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-ink, #0a0e1a); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent), 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent); } [dir="rtl"] .ms-rec-send .tf-svg { transform: scaleX(-1); } /* الملاحظة في الفقاعة */ .msg-voice { display: flex; align-items: center; gap: 9px; min-width: 200px; max-width: 280px; padding: 2px 0 4px; } .msg-voice-play { flex: none; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); background: color-mix(in srgb, currentColor 8%, transparent); color: inherit; cursor: pointer; } .msg-voice-play:active { transform: scale(.965); } .msg-voice-play .tf-svg { fill: currentColor; } .msg-voice-track { flex: 1; height: 4px; border-radius: 3px; overflow: clip; background: color-mix(in srgb, currentColor 18%, transparent); } .msg-voice-track i { display: block; height: 100%; width: 0; border-radius: 3px; background: currentColor; transition: width .2s linear; } .msg-voice-t { flex: none; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; opacity: .85; max-width: 120px; overflow: clip; text-overflow: ellipsis; white-space: nowrap; } /* من قرأ في المجموعة */ .msg-seen { position: relative; display: inline-flex; align-items: center; gap: 3px; padding: 0 2px; border: 0; background: transparent; color: inherit; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9.5px; font-weight: 600; cursor: pointer; opacity: .85; } .msg-seen::after { content: ''; position: absolute; inset: -12px -6px; } /* مساحة لمسٍ أوسع بلا أن يكبر السطر */ .msg-seen.is-all { opacity: 1; color: var(--accent-fg); } .msg-bubble.mine .msg-seen.is-all { color: inherit; } .msg-seen:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 4px; } .ms-seen-row { cursor: default; } .ms-seen-row:active { transform: none; } .ms-seen-empty { padding: 6px 10px 10px; font-size: 12px; font-weight: 500; color: var(--text-muted); } /* من رسالة إلى عنوان */ .ms-hl-l { font-size: 11.5px; font-weight: 600; color: var(--ms-dim); padding: 0 2px; } .ms-hl-txt { min-height: 78px; resize: vertical; line-height: 1.7; } .ms-hl-list { max-height: 34vh; } .ms-hl-time { flex: none; min-width: 58px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; font-weight: 600; color: var(--ms-dim); } .ms-hl-row.on { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 60%, transparent); } .ms-hl-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px; text-align: center; font-size: 12.5px; font-weight: 500; color: var(--ms-dim); } .ms-hl-link { min-height: 40px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--ms-hair); background: transparent; color: var(--ms-ink); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .ms-hl-link:active { transform: scale(.965); } .ms-hl-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; } .ms-hl-note { flex: 1; min-width: 160px; font-size: 11px; font-weight: 500; color: var(--ms-dim); } .ms-hl-go { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-ink, #0a0e1a); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent), 0 4px 14px color-mix(in srgb, var(--accent) 28%, transparent); } .ms-hl-go:active { transform: scale(.965); } .ms-hl-go:disabled { opacity: .45; cursor: default; box-shadow: none; } @media (max-width: 700px) { .ms-head-btn { width: 40px; height: 40px; } .msg-voice-play { width: 40px; height: 40px; } .ms-rec { flex-wrap: wrap; margin: 0 8px 8px; } .ms-rec-vu { order: 5; flex-basis: 100%; } .ms-rec-cap { display: none; } .ms-rec-send { margin-inline-start: auto; } .ms-st-btn .ms-st-l { display: none; } /* الهاتف: النقطة وحدها، والاسم في القائمة وفي وصف الزرّ */ .ms-st-warn { margin: 0 8px 6px; } /* القاعدة العامّة (كلّ زرّ ٤٤ على الهاتف) كانت تمطّ سطر الوقت في الفقاعة؛ مساحة اللمس هنا من ::after لا من ارتفاع الزرّ */ .msg-seen { min-height: 0; } .msg-seen::after { inset: -14px -8px; } } /* حبّة «عناوين النشرة» العائمة (z 12000) كانت تعلو نوافذ الرسائل فتغطّي صفوفها، وعلى الهاتف تجلس فوق شريط التسجيل وصندوق الكتابة — درس الشريط السريع في v535 */ body:has(.ms-ov.open) .hlr-pill { visibility: hidden; } @media (max-width: 700px) { body:has(#page-messages.active .msgs-layout.thread-open) .hlr-pill { visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .ms-st-dot.st-air, .ms-rec.is-rec .ms-rec-led { animation: none; } .msg-voice-track i, .ms-arch-chev { transition: none; } } /* ═══════════════════════════════════════════════════════════════════ v538 · الإجازات — التاريخ يُرى، والخطّة تُرى قبل أن تُنفَّذ ───────────────────────────────────────────────────────────────── نافذة الطلب: اليوم المضغوط في رأسها، و«من · إلى» وتحتهما ما يُحتسب وما يبقى. نافذة الموافقة: يومٌ بيوم ما كان وما يصير، ومن يبقى على الدوام. الأرشيف مجمّعٌ بالسنة. اللون للمعنى: الأخضر ليومٍ يُكتب، والتحذير لتغطيةٍ دون الحدّ — وما عداهما محايد. TakeFlow Tv - تصميم وتطوير محمد قندقلي ═══════════════════════════════════════════════════════════════════ */ .req-when { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; font-weight: 500; padding: 10px 13px; border-radius: 12px; border: 1px solid var(--border); background: color-mix(in srgb, var(--text) 3%, var(--surface2)); } .req-when:empty { display: none; } .req-when b { font-weight: 700; } .req-when-sh { color: var(--text-muted); font-size: 12.5px; } .req-dates { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: 8px 10px; } .req-dates input[type=date] { min-width: 0; padding: 10px 11px; border-radius: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; background: var(--surface); border: 1px solid var(--border); color: var(--text); } .req-dates input[type=date]:focus { border-color: var(--accent); outline: none; } .req-leave-sum { font-size: 13px; line-height: 1.8; min-height: 22px; } .req-leave-sum:empty { display: none; } .req-leave-sum b { font-weight: 700; } .rls-skip, .rls-load { color: var(--text-muted); font-size: 12px; } .rls-bal { color: var(--text-muted); font-size: 12.5px; } .sla-box { max-width: 560px; } .sla-when { font-size: 14px; font-weight: 600; margin-bottom: 8px; } .sla-why { font-size: 13px; line-height: 1.8; color: var(--text-muted); padding: 8px 12px; margin-bottom: 10px; border-inline-start: 3px solid var(--border); background: var(--surface2); border-radius: 8px; white-space: pre-wrap; } .sla-kind { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; margin-bottom: 12px; } .sla-kind select { padding: 10px 12px; border-radius: 10px; font-family: inherit; font-size: 13.5px; background: var(--surface); border: 1px solid var(--border); color: var(--text); } .sla-kind select:focus { border-color: var(--accent); outline: none; } .sla-plan { display: flex; flex-direction: column; gap: 6px; } .sla-day { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 2px 12px; align-items: center; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2); font-size: 13px; } .sla-day.set { border-color: color-mix(in srgb, #2ecc71 45%, var(--border)); } .sla-day.skip { opacity: .72; } .sla-d { font-weight: 600; } .sla-w { color: var(--text-muted); } .sla-w b { color: var(--text); font-weight: 700; } .sla-cov { grid-column: 1 / -1; font-size: 11.5px; color: var(--text-muted); } .sla-cov.low { color: var(--warning, #e8a020); font-weight: 600; } .sla-sum { margin-top: 12px; font-size: 13px; line-height: 1.8; } .sla-sum:empty { display: none; } .sla-sum b { font-weight: 700; } /* الحفظ أسفل يمين: أوّل الأزرار في RTL يقع يميناً، والإلغاء بجانبه — لا خطر هنا */ .sla-foot { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); justify-content: flex-start; } .sla-foot .btn-submit { width: auto; min-width: 120px; padding: 11px 20px; } .sla-foot .btn-submit:active { transform: scale(.965); } .sla-foot .btn-submit:disabled { opacity: .5; cursor: default; } .mlc-year { display: flex; align-items: baseline; gap: 8px; margin: 10px 2px 2px; font-size: 12px; font-weight: 700; color: var(--text-muted); } .mlc-year:first-child { margin-top: 0; } .mlc-year em { font-style: normal; font-family: 'IBM Plex Mono', monospace; font-size: 11px; } @media (max-width: 700px) { .req-dates { grid-template-columns: auto 1fr; } .req-dates input[type=date] { min-height: 40px; } .sla-day { grid-template-columns: 1fr; } .sla-kind select { min-height: 40px; } .sla-foot .btn-submit { min-height: 44px; flex: 1; } } /* ═══════════════════════════════════════════════════════════════════ v539 · دورة طلب الدوام — الحال بكلمة، والفعل بجانبها ───────────────────────────────────────────────────────────────── «طلباتي» بحالها كلّها: ينتظر (كهرمانيّ) · قُبل (أخضر) · رُفض (أحمر) · أُلغي (محايد). الإلغاء والتغيير أزرارٌ محايدة الوزن — تراجعٌ لا خطر. TakeFlow Tv - تصميم وتطوير محمد قندقلي ═══════════════════════════════════════════════════════════════════ */ .sr-st { display: inline-flex; align-items: center; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; vertical-align: middle; border: 1px solid var(--border); color: var(--text-muted); } .sr-st.st-wait { color: var(--accent-fg); border-color: color-mix(in srgb, #e8a020 40%, var(--border)); } .sr-st.st-ok { color: var(--success); border-color: color-mix(in srgb, #2ecc71 40%, var(--border)); } .sr-st.st-no { color: var(--danger); border-color: color-mix(in srgb, #e04545 40%, var(--border)); } .sr-change { margin-inline-start: 6px; padding: 5px 11px; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 600; border: 1px solid var(--border); background: transparent; color: var(--text-muted); transition: all .13s; } .sr-change:hover { border-color: var(--accent); color: var(--accent-fg); } .sr-change:active { transform: scale(.965); } .req-change { display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.7; padding: 10px 13px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, transparent); } .req-change[hidden] { display: none; } .req-change small { color: var(--text-muted); font-size: 12px; } #sched-request-overlay.is-change .req-type-row { display: none; } .sla-repl { font-size: 13px; line-height: 1.7; margin-bottom: 10px; padding: 8px 12px; border-radius: 10px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border)); } @media (max-width: 700px) { /* الوصف سطرٌ كامل والأزرار تحته — كان الوصف ينضغط عموداً ضيّقاً بجانب زرّين */ .sr-row { flex-wrap: wrap; } .sr-info { flex: 1 1 100%; } .sr-actions { flex: 1 1 100%; flex-wrap: wrap; } .sr-cancel, .sr-change, .sr-approve, .sr-reject { min-height: 40px; } } /* ═══════════════════════════════════════════════════════════════════ v540 · ما لك وما عليك — بطاقة الإجازات وأرصدة الفريق وسياسة الأدمن ───────────────────────────────────────────────────────────────── الرقم الكبير لما يهمّ الآن (المتبقّي من السنوية)، وتفصيله سطراً سطراً بخطّ الكونسول. اللون للمعنى: تجاوز الرصيد أحمر، والمرحَّل الذي يسقط كهرمانيّ — وما عداهما محايد. لا غلاس على الصفوف المتكرّرة. TakeFlow Tv - تصميم وتطوير محمد قندقلي ═══════════════════════════════════════════════════════════════════ */ .mlc-yr { margin-inline-start: 10px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .mlc-yr b { color: var(--text); font-weight: 600; } .mlc-sec { font-size: 13px; font-weight: 700; margin: 16px 0 8px; color: var(--text); } .mlc-sec:first-child { margin-top: 0; } .mlc-main { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 6px 18px; align-items: start; padding: 14px 16px; margin-bottom: 12px; border-radius: 14px; background: var(--surface2); border: 1px solid var(--border); } .mlc-main-n { display: flex; flex-direction: column; gap: 2px; } .mlc-main-n b { font-size: 40px; line-height: 1; font-weight: 600; color: var(--text); } .mlc-main-n span { font-size: 12px; font-weight: 600; color: var(--text-muted); } .mlc-main.over .mlc-main-n b, .mlc-bal-nums b.over, .tl-c b.over { color: var(--danger); } .mlc-main-rows { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .mlc-mr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 12.5px; } .mlc-mr span { color: var(--text-muted); font-weight: 600; min-width: 108px; } .mlc-mr b { font-weight: 600; } .mlc-card bdi { unicode-bidi: isolate; } .mlc-mr em { flex-basis: 100%; font-style: normal; font-size: 11.5px; color: #c98a14; } .mlc-warn { grid-column: 1 / -1; font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-radius: 10px; color: #c98a14; border: 1px solid color-mix(in srgb, #e8a020 40%, var(--border)); background: color-mix(in srgb, #e8a020 7%, transparent); } .mlc-card .mlc-balances.mlc-three { grid-template-columns: repeat(3, 1fr); } .mlc-rules { margin: 0 0 8px; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; line-height: 1.7; } .mlc-policy-text { white-space: pre-wrap; font-size: 12.5px; line-height: 1.8; padding: 10px 12px; border-radius: 10px; border-inline-start: 3px solid var(--accent); background: var(--surface2); margin-bottom: 8px; } .mlc-adj { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; } .mlc-adj-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 12px; border-radius: 10px; background: var(--surface2); border: 1px solid var(--border); font-size: 12.5px; } .mlc-adj-row b { font-weight: 600; min-width: 34px; } .mlc-adj-row b.pos, .mlc-hist-row .pos { color: #2e9e5b; } .mlc-adj-row b.neg, .mlc-hist-row .neg { color: var(--danger); } .mlc-adj-k { font-weight: 600; } .mlc-adj-why { flex: 1 1 160px; min-width: 0; } .mlc-adj-row em { font-style: normal; font-size: 11px; color: var(--text-muted); } .mlc-adj-del { margin-inline-start: auto; border: 1px solid var(--border); background: transparent; color: var(--text-muted); border-radius: 8px; width: 28px; height: 28px; cursor: pointer; font-family: inherit; } .mlc-adj-del:hover { color: var(--text); border-color: var(--text-muted); } .mlc-adj-del:active { transform: scale(.965); } .mlc-adj-form { display: grid; grid-template-columns: 1fr 90px 1fr; gap: 8px; margin-bottom: 8px; } .mlc-adj-form select, .mlc-adj-form input { background: var(--surface2); border: 1.5px solid var(--border); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 13px; padding: 8px 10px; min-width: 0; } .mlc-adj-form input[type="number"] { font-family: 'IBM Plex Mono', monospace; } .mlc-adj-form #mlc-adj-reason { grid-column: 1 / -1; } .mlc-adj-form .btn-submit { grid-column: 1 / -1; justify-self: start; padding-inline: 18px; } .mlc-adj-form .btn-submit:active, .mlc-foot .btn-submit:active, .tl-box .mlc-foot .btn-submit:active { transform: scale(.965); } .mlc-hist { margin: 4px 0 12px; font-size: 12.5px; } .mlc-hist summary { cursor: pointer; font-weight: 700; padding: 6px 0; } .mlc-hist-row { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 2px; border-bottom: 1px dashed var(--border); color: var(--text-muted); } .mlc-hist-row b { color: var(--text); font-weight: 600; } .mlc-foot { display: flex; justify-content: flex-start; margin-top: 14px; } .mlc-foot .mlc-edit-btn { width: auto !important; margin-bottom: 0; } /* أرصدة الفريق — صفٌّ لكلّ موظّف، والأرقام بعمودٍ ثابت */ .tl-box { max-width: 780px; } .tl-head, .tl-row { display: grid; grid-template-columns: minmax(140px, 2fr) repeat(6, minmax(52px, 1fr)); gap: 6px; align-items: center; } .tl-head { font-size: 11.5px; font-weight: 600; color: var(--text-muted); padding: 0 12px 6px; } .tl-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .tl-row { width: 100%; text-align: start; padding: 9px 12px; border-radius: 12px; cursor: pointer; font-family: inherit; font-size: 13px; background: var(--surface2); border: 1px solid var(--border); color: var(--text); transition: border-color .13s; } .tl-row:hover { border-color: var(--accent); } .tl-row:active { transform: scale(.965); } .tl-c { min-width: 0; } .tl-c b { font-weight: 600; } .tl-c small { color: var(--text-muted); font-family: 'IBM Plex Mono', monospace; } .tl-name { display: flex; align-items: center; gap: 8px; font-weight: 600; } .tl-exp b { color: #c98a14; } /* سياسة الإجازات */ .lp-box { max-width: 560px; } .lp-f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; margin-bottom: 14px; } .lp-f input, .lp-f select, .lp-f textarea { background: var(--surface2); border: 1.5px solid var(--border); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 14px; font-weight: 500; padding: 9px 11px; } .lp-f input[type="number"] { font-family: 'IBM Plex Mono', monospace; max-width: 140px; } .lp-f textarea { resize: vertical; line-height: 1.8; } .lp-f small { font-size: 11.5px; font-weight: 500; color: var(--text-muted); } .lp-chk, .lp-radio { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; cursor: pointer; } .lp-chk { margin-bottom: 12px; } /* العطل الرسمية: التسجيل لمن لا دوام له · والعمود كلّه يُرى عطلة */ .hol-give { margin-inline-start: 6px; padding: 3px 9px; border-radius: 7px; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 600; border: 1px solid var(--border); background: transparent; color: var(--text-muted); } .hol-give:hover { border-color: #c0504d; color: #c0504d; } .hol-give:active { transform: scale(.965); } .sched-cell.sched-hol-day { box-shadow: inset 0 3px 0 color-mix(in srgb, #c0504d 60%, transparent); } .lv-my-btn { margin-inline-start: 8px; } .lv-team-btn { margin-inline-start: 8px; } @media (max-width: 700px) { .mlc-main { grid-template-columns: 1fr; } .mlc-card .mlc-balances.mlc-three { grid-template-columns: 1fr 1fr; } .mlc-adj-form { grid-template-columns: 1fr 1fr; } .mlc-adj-form select, .mlc-adj-form input, .mlc-adj-form .btn-submit, .mlc-adj-del, .hol-give { min-height: 40px; } .tl-head { display: none; } .tl-row { grid-template-columns: repeat(3, 1fr); row-gap: 8px; } .tl-name { grid-column: 1 / -1; } .tl-c[data-l]::before { content: attr(data-l); display: block; font-size: 10.5px; font-weight: 600; color: var(--text-muted); } .tl-row, .lp-f input, .lp-f select { min-height: 44px; } } /* ═══════════════════════════════════════════════════════════════════ v541 · نافذة الطلب — البطاقات فوق، والتفاصيل في العمود الثاني، والنافذة أعرض ───────────────────────────────────────────────────────────────── طلب محمد: «البطاقات لفوق، والتفاصيل بالعمود التاني، والبوكس أعرض». عمود العمل: اللافتات وفعل اللحظة وعدّاد المهمة ثمّ البطاقات مباشرةً. عمود المرجع: الحزمة والجرافيك ورؤوس الأقلام وصندوقا المهمة، ثمّ رقم المادة والحالة والرحلة. والعرض قاعدةٌ واحدة بثلاثة مداخل — كانت ثلاث قيمٍ تتغالب (:has بـ1040 يغلب rv-wide بـ1100 فلا يتّسع شيء). TakeFlow Tv - تصميم وتطوير محمد قندقلي ═══════════════════════════════════════════════════════════════════ */ #modal-overlay .modal:has(#modal-body.rq-split), #modal-overlay .modal.modal-wide, #modal-overlay .modal.rv-wide { max-width: min(1240px, 96vw); } @media (min-width: 900px) { #modal-body.rq-split, #rv-body.rq-split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } } /* الحزمة في عمودٍ أضيق: عمودٌ واحد لا اثنان */ .rq-bg .mtp-grid { grid-template-columns: 1fr; } .rq-bg > .mtp, .rq-bg > .dsp, .rq-bg > .designer-task-box { margin-bottom: 12px; } /* ═══════════════════════════════════════════════════════════════════ v544 — مصادر المساعد تحت ردّه: ما استشهد به فعلاً، كلّ خبرٍ برقمه ومصدره ووقته ورابطه. مرجعٌ هادئ تحت النصّ لا بطاقةٌ فوقه — محايد اللون، والرقم بخطّ الأرقام. وإن لم يستشهد ردٌّ عن الأخبار بشيء قيل ذلك كما هو. TakeFlow Tv - تصميم وتطوير محمد قندقلي ═══════════════════════════════════════════════════════════════════ */ .aip-msg .aip-srcs { white-space: normal; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 4px; } .aip-srcs-h { font-size: 11.5px; font-weight: 600; color: var(--text-muted); letter-spacing: .2px; } .aip-srcs-h.aip-srcs-none { font-weight: 500; font-style: normal; } .aip-src { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: baseline; padding: 5px 8px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 12.5px; line-height: 1.55; } a.aip-src:hover { background: var(--surface); } a.aip-src:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .aip-src-n { grid-row: span 2; font-family: var(--tf-mono, 'IBM Plex Mono', monospace); font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .aip-src-t { font-weight: 500; overflow-wrap: anywhere; } .aip-src-m { grid-column: 2; font-size: 11px; color: var(--text-muted); } .aip-src-w { font-family: var(--tf-mono, 'IBM Plex Mono', monospace); } @media (pointer: coarse) { a.aip-src { min-height: 40px; } } /* v544 — الهاتف كان يخسر ٥٨px من يمينه في كلّ صفحة: الشريط الجانبيّ مخفيّ هناك (الشريط السفليّ مكانه)، لكنّ قاعدة «الطيّ التلقائيّ» — المفعّل للجميع منذ v337 — تحجز له مكانه بـ!important وبخصوصيّةٍ أعلى من قاعدة الهاتف (body.has-sidebar #app-shell). الخصوصيّة نفسها هنا، والترتيب بعدها يغلب. */ @media (max-width: 768px) { body.sidebar-auto.sidebar-collapsed #app-shell, body.has-sidebar #app-shell { padding-inline-start: 0 !important; } } /* ═══════════════════════════════════════════════════════════════════ v545 — التنظيف: الشعار يظهر في معاينته · العدّاد والمقاس بترتيبهما · الشعار والهويّة يصلان الجميع حيّاً. كلّ قاعدةٍ هنا تسدّ عطلاً رآه محمد. TakeFlow Tv - تصميم وتطوير محمد قندقلي ═══════════════════════════════════════════════════════════════════ */ /* المعاينة: tf-glass.css يخفي الصورة (display:none) ولا شيء يُظهرها */ .lg-box.has img { display: block; } /* العدّاد «٢٠س ٤٢د»: كان direction:ltr فيُقلب النصّ العربيّ «س ٤٢د ٢٠» */ html[dir="rtl"] .ac-pill { direction: rtl; unicode-bidi: isolate; } .br-force { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; font-size: 12.5px; font-weight: 500; color: var(--text-muted); cursor: pointer; } .br-force input { width: 16px; height: 16px; accent-color: var(--accent); } .ms-about-logo img { max-width: 120px; max-height: 44px; object-fit: contain; } /* خانة التاريخ: الأصليّة تحمل القيمة مخفيّة، والزرّ يعرضها بلغة البرنامج */ input.tfd-native { display: none !important; } .tfd-btn.tfd-auto { min-height: 40px; } /* هدف لمسٍ لا يقلّ عن ٤٠ */ .tfd-btn.tfd-auto .tfd-ic { display: inline-flex; color: var(--text-muted); } .tfd-btn.tfd-auto.is-empty .tfd-val { color: var(--text-muted); font-weight: 500; } .tfd-btn.tfd-auto:disabled { opacity: .55; cursor: default; } .tfd-btn.tfd-auto:active:not(:disabled) { transform: scale(.965); } /* مطبخ الأخبار وأنواع الخبر: أيقونات خطّية بلون النصّ (كانت إيموجي) */ .nt-svg { vertical-align: -2px; flex-shrink: 0; } .lb-door-icon .tf-svg { display: block; color: var(--text-muted); } .lb-bento .lb-hero .lb-door-icon .tf-svg { width: 44px; height: 44px; color: var(--accent-fg); } .lb-door:hover .lb-door-icon .tf-svg { color: var(--accent-fg); } .lb-title { display: inline-flex; align-items: center; gap: 10px; } .lb-title .tf-svg { color: var(--accent-fg); } .lb-pulse .tf-svg, .lb-kinds-head .tf-svg, .lb-suggest .tf-svg { vertical-align: -2px; } .nt-ic .nt-svg, .ts-ic .nt-svg, .rb-ic .nt-svg { display: block; } /* قاعدة الأزرار: الخطر (حذف · تفريغ) محايدٌ معزولٌ في طرف السطر (يسار العربية)، ويحمرّ عند المرور فقط — الأحمر الدائم يسرق الانتباه ممّا يحتاجه الآن */ .tf-danger-quiet { display: flex; width: auto; max-width: 280px; margin-inline-start: auto; padding: 10px 16px; background: var(--surface2) !important; color: var(--text-muted) !important; border: 1px solid var(--border) !important; box-shadow: none !important; } .tf-danger-quiet:hover { color: var(--danger) !important; border-color: color-mix(in srgb, var(--danger) 50%, var(--border)) !important; } .tf-danger-zone { border-color: var(--border); } .action-btn.del-btn { background: var(--surface2); color: var(--text-muted); border-color: var(--border); margin-inline-start: auto; } .action-btn.del-btn:hover { background: var(--surface2); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); } .btn-submit.danger-btn { background: var(--surface2); color: var(--text); border: 1px solid var(--border); order: 99; box-shadow: 0 4px 0 0 color-mix(in srgb, var(--border) 55%, #000); } /* v552 — كان بحبرٍ خافت وبلا عمق فبدا معطَّلاً بين إخوته */ .btn-submit.danger-btn:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); background: var(--surface2); box-shadow: 0 4px 0 0 color-mix(in srgb, var(--border) 55%, #000); } .btn-submit.danger-btn:active { box-shadow: 0 0 0 0 transparent; } /* صفحة العناوين: الخافت كان ٤٠٪ من الحبر — دون حدّ التباين (٤٫٥:١) في الفاتح والداكن على نصوصٍ من ١٠ إلى ١٢ بكسل (أوقات النشرات · رؤوس الأعمدة · «لم يتولَّها أحد»). والاسم الطويل («نشرة منتصف الليل») كان يُقصّ «نشرة …» — الآن ينزل الوقت سطراً ويبقى الاسم كاملاً */ .hlr-wrap, .hlr-mw, .hlr-pill { --hlr-dim: color-mix(in srgb, var(--hlr-ink) 84%, transparent); /* v552 — ٦٠٪ كانت ٤٫٢ على الفاتح */ --hlr-dimmer: color-mix(in srgb, var(--hlr-ink) 70%, transparent); } .hlr-fold { flex-wrap: wrap; row-gap: 1px; } .hlr-fname { flex: 1 0 auto; max-width: calc(100% - 20px); } /* الاسم بعرضه، والوقت ينزل سطراً حين لا يتّسع الاثنان */ /* كانبان إدارة الطلبات: تمريرٌ واحد لا تمريرات متداخلة. كان كلّ عمودٍ يتمرّر داخل الصفحة المتمرّرة (٧٠vh) — عجلة الفأرة فوق عمودٍ تحرّكه هو لا الصفحة، وأربعة أشرطة تمرير في شاشةٍ واحدة. الآن يطول العمود والصفحة تتمرّر، ورأس العمود يلتصق تحت الشريط العلويّ (clip لا hidden: hidden يقتل الالتصاق) */ @media (min-width: 641px) { .req-kanban-col { overflow: clip; } .req-kanban-body { max-height: none; overflow: visible; } .req-kanban-col > .req-kanban-head { position: sticky; top: 56px; z-index: 3; } } /* الشريط السفليّ (الهاتف واللوح): كانت التسمية تُقصّ بالحرف (slice ٦) فتظهر «الرسائ · الرن د · الداشب». الآن الاسم كاملاً في سطرين كحدٍّ أقصى، بلا قصّ كلمة */ .bottom-nav-item .bn-label { max-width: 64px; line-height: 1.2; text-align: center; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: normal; word-break: keep-all; } /* تسميات بأيقونةٍ خطّية (نافذة تكليف المهمة) */ .lbl-ico { display: inline-flex; vertical-align: -2px; margin-inline-end: 6px; color: var(--text-muted); } .lbl-ico:empty { display: none; } .btn-submit .lbl-ico { color: inherit; } /* شاشة الهواء: شعار القناة مكان 🎬 */ .onair-logo { display: flex; align-items: center; gap: 12px; color: var(--brand-1, var(--accent)); } /* لون المحطّة الأوّل */ .onair-chlogo { height: 44px; width: auto; max-width: 160px; object-fit: contain; flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════════ v546 — رقم المادّة يلزم حيث يلزم، وتأجيله قرارٌ صريح «لاحقاً» زرٌّ داخل خانة الرقم (الطلب السريع · العاجل): يظهر حين يمرّ الطلب على المونتاج والخانة فارغة، ويختفي حين يُكتب رقم (tfMatLaterSync). ═══════════════════════════════════════════════════════════════════ */ .tf-matw { position: relative; display: block; } .tf-matw > input { width: 100%; box-sizing: border-box; } .tf-matlater { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); font: inherit; font-size: 10.5px; font-weight: 600; line-height: 1; padding: 5px 8px; border-radius: 99px; cursor: pointer; color: var(--text-muted); background: var(--surface2, var(--surface)); border: 1px solid var(--border); transition: transform .08s, color .12s, border-color .12s; } .tf-matlater[hidden] { display: none !important; } .tf-matlater:hover { color: var(--text); border-color: var(--border-strong, var(--border)); } .tf-matlater:active { transform: translateY(-50%) scale(.965); } .tf-matlater[aria-pressed="true"] { color: var(--text); background: color-mix(in srgb, var(--text) 10%, var(--surface2, var(--surface))); border-color: var(--border-strong, var(--border)); } .tf-matlater[aria-pressed="true"]::before { content: '✓'; margin-inline-end: 4px; } @media (pointer: coarse) { .tf-matw > input { min-height: 44px; } .tf-matlater { min-height: 36px; min-width: 56px; } } /* «لمن العمل» يعرض وجهة الوسوم ولا يبدّلها: إطارٌ متقطّع، والمختار وحده واضح */ .fr-tgt.from-tags { border-style: dashed; } /* v552 — حين تقرّر الوسوم لا أزرار: جملةٌ واحدة تقول العدد والوجهة (كانت ثلاثة أزرارٍ مطفأة تُقرأ «معلّمة على الاثنين») */ .fr-tgt.from-tags .fr-tbtn { display: none; } .fr-tgt-why { font-size: 11.5px; font-weight: 600; color: var(--text); padding: 4px 8px; white-space: nowrap; } .fr-tgt-why[hidden] { display: none; } .qd-chips.from-tags .qd-chip { cursor: help; } .qd-chips.from-tags .qd-chip:not(.on) { opacity: .45; } .qd-chips.from-tags .qd-chip:active { transform: none; } .fr-need-note { font-size: 11px; color: var(--text-muted); } /* رأس الطلب: الرقم المؤجَّل يُقال لمن يفتحه */ .rq-matlater { font-size: 12px; color: var(--text-muted); } /* التسليم للبثّ يطلب الرقم إن غاب */ .rqe-lb { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-muted); margin: 10px 0 4px; } .rqe-lb em { font-style: normal; font-weight: 500; } .rqe-mat { width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface2, var(--surface)); color: var(--text); font-size: 14px; } .rqe-mat.bad { border-color: var(--danger, #e5484d); } .rqe-err { font-size: 11.5px; color: var(--danger, #e5484d); margin-top: 4px; min-height: 1em; } /* ═══════════════════════════════════════════════════════════════════ v547–v548 — أوامر العمل: النموذج · العرض بمساره المضاء · اللوحة · الكتالوج الهويّة: المسار أضواء (LED) — المحطّة الحاليّة وحدها مشبعة، والمنجَز هادئ، والآتي محايد. الأزرار زجاجٌ بحدٍّ لامع والضغط انكماش. لا زجاج في زجاج: النافذة طبقة تحكّم، والبطاقات داخلها أسطحٌ بلا ضباب. ═══════════════════════════════════════════════════════════════════ */ .wo-ov { position: fixed; inset: 0; z-index: 2147482000; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px 24px; background: rgba(6, 8, 14, .55); overflow-y: auto; } .wo-box { width: min(880px, 100%); border-radius: 18px; color: var(--text); background: linear-gradient(var(--surface, #16181f), var(--surface, #16181f)), var(--bg, #0f1115); /* سطحٌ فوق أرضيّةٍ صمّاء: لا يظهر ما خلفه في السمات الزجاجيّة */ border: 1px solid var(--border-strong, var(--border)); box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); } .wo-bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); } .wo-bar > b { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; } .wo-hint { font-size: 12px; color: var(--text-muted); flex: 1; min-width: 0; } .wo-x { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; padding: 8px; border-radius: 10px; } .wo-x:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); } .wo-restored { margin: 10px 18px 0; font-size: 12px; color: var(--text-muted); } .wo-body { padding: 14px 18px 6px; display: flex; flex-direction: column; gap: 12px; } .wo-row { display: flex; flex-wrap: wrap; gap: 12px; } .wo-row > .wo-f { flex: 1 1 200px; min-width: 0; } .wo-row > .wo-f.sm { flex: 0 1 150px; } .wo-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .wo-f > label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .wo-f input, .wo-f select, .wo-f textarea, .wo-bhead select, .wo-ct-row input, .wo-ct-row select, .wo-cp-row input, .wo-cp-row select { font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2, var(--surface)); color: var(--text); min-width: 0; box-sizing: border-box; } .wo-f textarea { resize: vertical; min-height: 90px; line-height: 1.7; } .wo-sub { font-size: 11px; color: var(--text-muted); font-style: normal; } .wo-static { font-size: 13px; padding: 8px 0; color: var(--text-muted); } .wo-types { display: flex; flex-direction: column; gap: 8px; } .wo-tg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .wo-tg > span { font-size: 11px; font-weight: 600; color: var(--text-muted); min-width: 64px; } .wo-chip, .wo-seg button, .wo-day { font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 99px; cursor: pointer; color: var(--text-muted); background: var(--surface2, var(--surface)); border: 1px solid var(--border); transition: transform .08s, color .12s, border-color .12s; } .wo-chip:hover, .wo-seg button:hover, .wo-day:hover { color: var(--text); border-color: var(--border-strong, var(--border)); } .wo-chip:active, .wo-seg button:active, .wo-day:active { transform: scale(.965); } .wo-chip.on, .wo-seg button.on, .wo-day.on { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface2, var(--surface))); } .wo-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; } .wo-days { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; } .wo-day { padding: 5px 9px; font-size: 11.5px; } .wo-tog { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text); cursor: pointer; } .wo-tog input { width: 16px; height: 16px; accent-color: var(--accent); } .wo-path { border: 1px solid var(--border); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: color-mix(in srgb, var(--text) 3%, transparent); } .wo-path-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; } .wo-steps { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; } .wo-steps i { font-style: normal; color: var(--text-muted); } .wo-step { font-size: 12px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--border); color: var(--text-muted); } .wo-step.first { color: var(--text); border-color: var(--accent); } .wo-need { font-size: 12px; color: var(--text-muted); min-height: 1.2em; } .wo-need.miss { color: var(--text); } .wo-foot, .wo-acts, .wo-cat-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .wo-foot { padding: 12px 18px 16px; border-top: 1px solid var(--border); } .wo-sp { flex: 1 1 auto; } /* الزرّ: زجاجٌ بحدٍّ لامعٍ داخليّ، والضغط انكماش لا نزول */ .wo-btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; font-weight: 600; padding: 9px 15px; border-radius: 12px; cursor: pointer; color: var(--text); background: linear-gradient(180deg, color-mix(in srgb, var(--text) 7%, transparent), color-mix(in srgb, var(--text) 3%, transparent)); border: 1px solid var(--border-strong, var(--border)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent); transition: transform .08s, border-color .12s; } .wo-btn:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .wo-btn:active { transform: scale(.965); } .wo-btn:disabled, .wo-btn.blocked { opacity: .5; cursor: not-allowed; transform: none; } .wo-btn.pri { background: var(--accent); color: var(--accent-ink, #0a0e1a); border-color: color-mix(in srgb, var(--accent) 70%, #fff); } /* v552 — أبيض على الذهبيّ ٢٫٢:١ */ .wo-btn.quiet { color: var(--text-muted); background: transparent; box-shadow: none; } /* الخطر محايد ومعزول آخر السطر */ .wo-btn.sm { padding: 6px 8px; } .wo-btn.busy { opacity: .7; pointer-events: none; } @media (pointer: coarse) { .wo-btn, .wo-chip, .wo-seg button, .wo-day { min-height: 40px; } } /* المسار أضواء */ .wo-leds { display: inline-flex; align-items: center; gap: 0; } .wo-leds > u { display: inline-block; width: 12px; height: 1px; background: var(--border-strong, var(--border)); text-decoration: none; } .wo-led { display: inline-flex; align-items: center; gap: 6px; } .wo-led > i { width: 9px; height: 9px; border-radius: 50%; flex: none; border: 1.5px solid var(--border-strong, var(--border)); background: transparent; } .wo-led.done > i { border-color: color-mix(in srgb, var(--success, #2ecc71) 70%, transparent); background: color-mix(in srgb, var(--success, #2ecc71) 45%, transparent); } .wo-led.on > i { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent), 0 0 10px var(--accent); } .wo-leds.big { display: flex; flex-wrap: wrap; row-gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; } .wo-leds.big > u { width: 22px; } .wo-leds.big .wo-led { flex-direction: column; align-items: center; gap: 3px; min-width: 64px; text-align: center; } .wo-leds.big .wo-led > i { width: 12px; height: 12px; } .wo-leds.big .wo-led b { font-size: 12px; font-weight: 600; } .wo-leds.big .wo-led em { font-size: 11px; font-style: normal; color: var(--text-muted); } .wo-leds.big .wo-led.wait b { color: var(--text-muted); } @media (prefers-reduced-motion: no-preference) { .wo-led.on > i { animation: woPulse 1.8s ease-in-out infinite; } } @keyframes woPulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent), 0 0 4px var(--accent); } } /* العرض */ .wo-view { display: flex; flex-direction: column; gap: 12px; } .wo-vhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; } .wo-state { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--border-strong, var(--border)); } .wo-vmeta { color: var(--text-muted); } .wo-vmeta b { color: var(--text); font-weight: 600; } .wo-vdue { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); } .wo-back { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; font-size: 13px; border: 1px solid color-mix(in srgb, var(--tf-warn, #e8a33d) 55%, var(--border)); background: color-mix(in srgb, var(--tf-warn, #e8a33d) 8%, transparent); } .wo-brief { white-space: pre-wrap; line-height: 1.8; font-size: 14px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--text) 4%, transparent); } .wo-kvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; } .wo-kv { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; min-width: 0; } .wo-kv span { font-size: 11px; color: var(--text-muted); } .wo-kv b { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; } .wo-tl { display: flex; flex-direction: column; gap: 4px; font-size: 12px; } .wo-tl > div { display: flex; gap: 8px; align-items: baseline; } .wo-tl b { font-weight: 600; flex: none; } .wo-tl span { color: var(--text-muted); flex: 1; min-width: 0; } .wo-tl em { font-style: normal; color: var(--text-muted); font-size: 11px; } /* اللوحة */ .wo-page { padding: 4px 0 24px; } .wo-board { display: flex; flex-direction: column; gap: 14px; } .wo-bhead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--border); } .wo-bhead > b { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; } .wo-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: start; } /* ستّ حالاتٍ في صفٍّ واحد على الشاشة العريضة */ .wo-col { border: 1px solid var(--border); border-radius: 16px; padding: 10px; background: color-mix(in srgb, var(--text) 2.5%, transparent); min-width: 0; } .wo-col h3 { display: flex; align-items: center; justify-content: space-between; margin: 2px 4px 10px; font-size: 13px; font-weight: 700; } .wo-col h3 em { font-style: normal; font-size: 12px; color: var(--text-muted); } .wo-col-b { display: flex; flex-direction: column; gap: 8px; } .wo-row-c { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: start; font: inherit; color: var(--text); cursor: pointer; padding: 10px 11px; border-radius: 12px; border: 1px solid var(--border); background: linear-gradient(180deg, color-mix(in srgb, var(--text) 5%, transparent), color-mix(in srgb, var(--text) 2%, transparent)); transition: transform .08s, border-color .12s; } .wo-row-c:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .wo-row-c:active { transform: scale(.985); } .wo-row-c.late { border-color: color-mix(in srgb, var(--danger, #e5484d) 55%, var(--border)); } .wo-rc-top { display: flex; align-items: baseline; gap: 7px; min-width: 0; } .wo-rc-top b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .wo-tchip { font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 99px; border: 1px solid var(--border); color: var(--text-muted); flex: none; } .wo-rc-mid { font-size: 12px; color: var(--text-muted); } .wo-rc-bot { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .wo-rc-bot em { font-style: normal; font-size: 11px; color: var(--text-muted); } .wo-none { font-size: 12px; color: var(--text-muted); padding: 8px 4px; } .wo-stats { border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; } .wo-stats summary { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; font-weight: 600; } .wo-stats table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12.5px; } .wo-stats th, .wo-stats td { text-align: start; padding: 6px 8px; border-bottom: 1px solid var(--border); } .wo-stats th { font-weight: 600; color: var(--text-muted); font-size: 11.5px; } /* الكتالوج في الإعدادات */ .wo-ct, .wo-cp { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 10px; } .wo-ct-row { display: grid; grid-template-columns: minmax(130px, 1.4fr) repeat(3, minmax(110px, 1fr)) auto 76px auto auto; gap: 6px; align-items: center; } .wo-cp-row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(200px, 2fr) auto auto; gap: 6px; align-items: center; } .wo-ct-row.off, .wo-cp-row.off { opacity: .55; } .wo-owners { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .wo-own { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 4px 3px 9px; border-radius: 99px; border: 1px solid var(--border); } .wo-own button { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; padding: 2px; display: inline-flex; } .wo-cat-foot { margin-top: 12px; } .wo-dirty { font-size: 12px; color: var(--text-muted); } @media (max-width: 820px) { .wo-ct-row { grid-template-columns: 1fr 1fr; } .wo-cp-row { grid-template-columns: 1fr; } .wo-ov { padding: 0; } .wo-box { border-radius: 0; min-height: 100%; } } /* ═══════════════════════════════════════════════════════════════════ v549 — مسودّة للنقاش: فقراتٌ بأقفالها، واقتراحاتٌ بلون أصحابها لون الكاتب هويّةٌ لا زينة: حدٌّ جانبيّ رفيع يقول «من» — والباقي محايد. ═══════════════════════════════════════════════════════════════════ */ .sd-view { display: flex; flex-direction: column; gap: 12px; } .sd-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 13px; } .sd-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--border-strong, var(--border)); } .sd-with-lb, .sd-bul { color: var(--text-muted); } .sd-people { display: inline-flex; flex-wrap: wrap; gap: 5px; } .sd-p { font-style: normal; font-size: 12px; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--border); border-inline-start: 3px solid var(--sd, var(--border)); } .sd-note { font-size: 12px; color: var(--text-muted); padding: 8px 12px; border-radius: 10px; border: 1px dashed var(--border); } .sd-parts { display: flex; flex-direction: column; gap: 10px; } .sd-part { border: 1px solid var(--border); border-inline-start: 3px solid var(--sd, var(--border)); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: color-mix(in srgb, var(--text) 3%, transparent); } .sd-part.locked .sd-t { opacity: .7; } .sd-part.editing { border-color: var(--accent); } .sd-ph { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .sd-ph > b { font-size: 12px; color: var(--text-muted); min-width: 18px; } .sd-lanes { display: inline-flex; gap: 3px; } .sd-ln { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; border-radius: 8px; cursor: pointer; color: var(--text-muted); background: transparent; border: 1px solid var(--border); transition: transform .08s; } .sd-ln:active { transform: scale(.965); } .sd-ln.on { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); } .sd-ln:disabled { opacity: .45; cursor: not-allowed; } .sd-lock { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-muted); } .sd-lock.mine { color: var(--text); } .sd-t { white-space: pre-wrap; line-height: 1.8; font-size: 14px; } .sd-ta { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; line-height: 1.8; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--accent); background: var(--surface2, var(--surface)); color: var(--text); resize: vertical; min-height: 96px; } .sd-ea { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .sd-sg { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); border-inline-start: 3px solid var(--sd, var(--border)); font-size: 13px; } .sd-sg-by { font-size: 12px; font-weight: 600; } .sd-sg-t { white-space: pre-wrap; line-height: 1.7; } .sd-sg-n { font-size: 12px; color: var(--text-muted); } .sd-sg-a { display: inline-flex; gap: 6px; } .sd-addrow { display: flex; } .sd-ask .sd-with, .sd-ask .sd-ppl { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; } .sd-ppl-h { font-size: 12px; color: var(--text-muted); margin-top: 6px; } .sd-with { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } /* المداخل: الرئيسية ولوحتا القسمين وطلباتي */ .sd-home { margin: 12px 0; } .sd-list, .sd-strip { display: flex; flex-wrap: wrap; gap: 8px; } .sd-strip { align-items: center; padding: 8px 10px; margin: 8px 0 12px; border-radius: 12px; border: 1px dashed var(--border-strong, var(--border)); } .sd-strip[hidden] { display: none !important; } .sd-strip-h { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--text-muted); } .sd-item { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12.5px; color: var(--text); cursor: pointer; padding: 7px 11px; border-radius: 10px; border: 1px solid var(--border); background: color-mix(in srgb, var(--text) 4%, transparent); transition: transform .08s; } .sd-item:active { transform: scale(.965); } .sd-item b { font-weight: 600; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sd-item em { font-style: normal; font-size: 11.5px; color: var(--text-muted); } .sd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sd, var(--accent)); flex: none; } @media (pointer: coarse) { .sd-ln { width: 40px; height: 40px; } .sd-item { min-height: 40px; } } /* ═════════════════════════════════════════════════════════════════ v550 — الفريق: بطاقة العضو · المعالج · الدمج · الصفة الأدوار أزرار ضغطٍ بـLED (المضاء محدَّد)، والنقل المجدول وحده يلفت الانتباه، والحذف محايدٌ معزول آخر السطر. النافذة صمّاء فوق أرضيّتها. ═════════════════════════════════════════════════════════════════ */ .tm-ov { position: fixed; inset: 0; z-index: 2147482000; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px 24px; background: rgba(6, 8, 14, .55); overflow-y: auto; } .tm-box { width: min(760px, 100%); border-radius: 18px; color: var(--text); background: linear-gradient(var(--surface, #16181f), var(--surface, #16181f)), var(--bg, #0f1115); border: 1px solid var(--border-strong, var(--border)); box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); } .tm-wbox { width: min(640px, 100%); } .tm-bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); } .tm-bar > b { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; min-width: 0; } .tm-bar > b > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tm-hint { font-size: 12px; color: var(--text-muted); flex: 1; min-width: 0; } .tm-x { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; padding: 8px; border-radius: 10px; } .tm-x:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); } .tm-body { padding: 14px 18px 8px; display: flex; flex-direction: column; gap: 14px; } .tm-pad { margin: 12px 18px 0; } .tm-sec { display: flex; flex-direction: column; gap: 9px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .tm-sec:last-child { border-bottom: 0; padding-bottom: 0; } .tm-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .tm-h > b { font-size: 13.5px; font-weight: 700; } .tm-h > em { font-style: normal; font-size: 12px; color: var(--text-muted); } .tm-row { display: flex; flex-wrap: wrap; gap: 12px; } .tm-row > .tm-f { flex: 1 1 200px; min-width: 0; } .tm-row > .tm-f.sm { flex: 0 1 180px; } .tm-row > .tm-f-act { flex: 0 0 auto; } .tm-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .tm-f > label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .tm-f input, .tm-f select { font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2, var(--surface)); color: var(--text); min-width: 0; box-sizing: border-box; width: 100%; } .tm-inline { display: flex; gap: 6px; align-items: center; } .tm-inline input { flex: 1 1 auto; } .tm-chips { display: flex; flex-wrap: wrap; gap: 6px; } .tm-rc, .tm-seg button { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 99px; cursor: pointer; color: var(--text-muted); background: var(--surface2, var(--surface)); border: 1px solid var(--border); transition: transform .08s, color .12s, border-color .12s; } .tm-rc:hover, .tm-seg button:hover { color: var(--text); border-color: var(--border-strong, var(--border)); } .tm-rc:active, .tm-seg button:active { transform: scale(.965); } .tm-rc.on, .tm-seg button.on { color: var(--text); border-color: var(--border-strong, var(--border)); background: color-mix(in srgb, var(--text) 8%, var(--surface2, var(--surface))); } .tm-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; } .tm-led { width: 7px; height: 7px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--text) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent); } .tm-rc.on .tm-led, .tm-hat-menu button.on .tm-led, .tm-steps li.on .tm-led { background: var(--accent); box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 70%, transparent); } .tm-steps li.done .tm-led { background: color-mix(in srgb, var(--text) 55%, transparent); } .tm-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; } .tm-acts, .tm-foot, .tm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .tm-foot { padding: 12px 18px 16px; border-top: 1px solid var(--border); } .tm-sp { flex: 1 1 auto; } .tm-tools { margin: 0 0 12px; } .tm-btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; font-weight: 600; padding: 9px 15px; border-radius: 12px; cursor: pointer; color: var(--text); background: linear-gradient(180deg, color-mix(in srgb, var(--text) 7%, transparent), color-mix(in srgb, var(--text) 3%, transparent)); border: 1px solid var(--border-strong, var(--border)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent); transition: transform .08s, border-color .12s; } .tm-btn:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .tm-btn:active { transform: scale(.965); } .tm-btn:disabled, .tm-btn.blocked { opacity: .5; cursor: not-allowed; transform: none; } .tm-btn.pri { background: var(--accent); color: var(--accent-ink, #0a0e1a); border-color: color-mix(in srgb, var(--accent) 70%, #fff); } /* v552 — أبيض على الذهبيّ ٢٫٢:١ */ .tm-btn.quiet { color: var(--text-muted); background: transparent; box-shadow: none; } .tm-btn.sm { padding: 6px 10px; font-size: 12px; } .tm-btn.busy { opacity: .7; pointer-events: none; } .tm-muted { font-size: 12px; color: var(--text-muted); } .tm-warn { font-size: 12px; color: var(--text); padding: 6px 10px; border-radius: 10px; border: 1px dashed var(--border-strong, var(--border)); } .tm-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border-strong, var(--border)); background: color-mix(in srgb, var(--text) 4%, transparent); } .tm-next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; padding: 8px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border)); } /* النقل المجدول: الشيء الوحيد الذي ينتظر */ .tm-need { padding: 0 18px; font-size: 12px; color: var(--text-muted); min-height: 1.2em; } .tm-need.miss { color: var(--text); } .tm-diff, .tm-sum { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13px; } .tm-diff li { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); } .tm-sum li { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); } .tm-sum li > span { min-width: 80px; color: var(--text-muted); font-size: 12px; } .tm-hist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; } .tm-hist li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 12.5px; padding: 6px 0; border-bottom: 1px dashed var(--border); } .tm-hist em { font-style: normal; color: var(--text-muted); } .tm-pvs, .tm-pv-key { display: flex; flex-wrap: wrap; gap: 5px; } .tm-pv-key { margin-top: 6px; opacity: .8; } .tm-pv { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--border); } .tm-pv em { font-style: normal; font-size: 10.5px; color: var(--text-muted); } .tm-pv.add { border-style: dashed; border-color: var(--border-strong, var(--border)); font-weight: 600; } .tm-pv.deny { text-decoration: line-through; color: var(--text-muted); } .tm-steps { display: flex; gap: 6px; margin: 12px 18px 0; padding: 0; list-style: none; } .tm-steps li { flex: 1 1 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); padding: 6px 8px; border-radius: 10px; border: 1px solid var(--border); min-width: 0; } .tm-steps li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tm-steps li.on { color: var(--text); border-color: var(--border-strong, var(--border)); } .tm-tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .tm-tbl td { padding: 6px 4px; border-bottom: 1px solid var(--border); } .tm-tbl td.mono { text-align: end; } .tm-tbl tr.tm-del td { color: var(--text-muted); } /* سطر العضو في مركز الفريق */ .tm-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .tm-chip.nx { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .tm-plus { font-style: normal; font-size: 11px; color: var(--text-muted); margin-inline-start: 4px; } .tm-xrow { opacity: .92; } .tm-xname { font-size: 13px; font-weight: 600; } .tm-tag { font-size: 11px; color: var(--text-muted); } /* الصفة */ .tm-hat { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 99px; cursor: pointer; color: var(--text); background: transparent; border: 1px solid var(--border-strong, var(--border)); transition: transform .08s; white-space: nowrap; } .tm-hat:active { transform: scale(.965); } .tm-hat-menu { position: fixed; z-index: 2147482100; display: flex; flex-direction: column; gap: 2px; padding: 6px; min-width: 190px; border-radius: 12px; background: linear-gradient(var(--surface, #16181f), var(--surface, #16181f)), var(--bg, #0f1115); border: 1px solid var(--border-strong, var(--border)); box-shadow: 0 18px 50px -20px rgba(0,0,0,.6); } .tm-hat-menu button { display: flex; align-items: center; gap: 8px; font: inherit; font-size: 13px; padding: 9px 10px; border-radius: 8px; border: 0; cursor: pointer; color: var(--text); background: transparent; text-align: start; } .tm-hat-menu button:hover { background: color-mix(in srgb, var(--text) 7%, transparent); } .tm-hat-menu button em { font-style: normal; font-size: 11px; color: var(--text-muted); margin-inline-start: auto; } @media (max-width: 640px) { .tm-ov { padding: 0; } .tm-box { border-radius: 0; min-height: 100%; } .tm-steps li span { display: none; } } @media (pointer: coarse) { .tm-btn, .tm-rc, .tm-seg button, .tm-hat, .tm-hat-menu button { min-height: 40px; } } /* v550 — المهامّ: الضوء للحال — المتأخّرة وحدها مشبعة، والمنجزة هادئة */ .tk-top { margin: 0 0 12px; } .tk-list { display: flex; flex-direction: column; gap: 10px; } .tk-empty { color: var(--text-muted); font-size: 13px; padding: 8px 0; } .tk-card { display: flex; flex-direction: column; gap: 7px; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--border); background: color-mix(in srgb, var(--text) 3%, transparent); } .tk-card.st-late { border-color: color-mix(in srgb, var(--danger, #e5484d) 60%, var(--border)); } .tk-card.st-done { opacity: .72; } .tk-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; } .tk-st { font-weight: 700; } .tk-kind, .tk-who { color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; } .tk-who { margin-inline-start: auto; } .tk-urg { font-weight: 700; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--border-strong, var(--border)); } .tk-title { font-size: 14.5px; font-weight: 600; line-height: 1.6; } .tk-details { font-size: 13px; color: var(--text-muted); white-space: pre-wrap; line-height: 1.7; } .tk-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-muted); } .tk-meta > span { display: inline-flex; align-items: center; gap: 4px; } .tk-note { font-size: 12.5px; padding: 6px 10px; border-radius: 8px; border: 1px dashed var(--border); white-space: pre-wrap; } .tk-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .tk-led { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; background: color-mix(in srgb, var(--text) 25%, transparent); } .st-ack .tk-led { background: color-mix(in srgb, var(--text) 60%, transparent); } .st-done .tk-led { background: color-mix(in srgb, var(--success, #2ecc71) 70%, transparent); } .st-late .tk-led { background: var(--danger, #e5484d); box-shadow: 0 0 6px color-mix(in srgb, var(--danger, #e5484d) 70%, transparent); } .tk-late-n { font-size: 12px; font-weight: 700; color: var(--danger, #e5484d); } .tk-home { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border-strong, var(--border)); font-size: 13px; } .tk-home.late { border-color: color-mix(in srgb, var(--danger, #e5484d) 55%, var(--border)); } .tk-home[hidden] { display: none !important; } /* خانة الدوام: مهمّتها بضوء حالها */ .cell-task { display: flex; align-items: baseline; gap: 5px; } .cell-task .tk-led { width: 6px; height: 6px; transform: translateY(-1px); } .cell-task.st-done { text-decoration: line-through; opacity: .7; } /* التكليف: دوام المكلَّف في يوم الموعد */ .at-duty { font-size: 13px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); min-height: 20px; color: var(--text-muted); } .at-duty.on { color: var(--text); } .at-duty.off { color: var(--text); border-color: color-mix(in srgb, var(--danger, #e5484d) 50%, var(--border)); } /* الدوام: في قسمٍ آخر هذا اليوم · قبل النقل أو بعده */ .sched-other { font-size: 10.5px; line-height: 1.4; padding: 1px 6px; margin-top: 3px; border-radius: 6px; border: 1px dashed var(--border-strong, var(--border)); color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); } .sched-other.side { border-style: solid; color: var(--text-muted); } @media (pointer: coarse) { .tk-acts .tm-btn { min-height: 40px; } } /* ═════════════════════════════════════════════════════════════════ v551 — الإعدادات: الختم التسلسليّ · آخر تعديل · القاموس · المعاينة · القوالب · المغادرة. الختم وثيقة بثّ (رقمٌ بخطّ Plex Mono على حدٍّ متقطّع)، و«آخر تعديل» همسٌ في رأس البطاقة، والتنبيه الوحيد الملوَّن هو ما ينتظر قراراً: «على هذا الجهاز وحده» و«لم يُحفظ». ═════════════════════════════════════════════════════════════════ */ .ts-stamp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 12px; border-radius: 12px; font-size: 12px; color: var(--text-muted); border: 1px dashed var(--border-strong, var(--border)); background: color-mix(in srgb, var(--text) 3%, transparent); } .ts-stamp-no { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 600; } .ts-stamp-no b { font-family: var(--tf-mono, 'IBM Plex Mono', monospace); font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: .04em; } .ts-stamp-by b { color: var(--text); font-weight: 600; } .ts-stamp-by time { font-variant-numeric: tabular-nums; } .ts-stamp-note { flex: 1 1 100%; color: var(--text); padding: 6px 10px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border)); } .ts-stamp-off { display: inline-flex; align-items: center; gap: 6px; } .ts-stamp-log { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 10px; cursor: pointer; color: var(--text-muted); background: transparent; border: 1px solid var(--border); transition: transform .08s, color .12s, border-color .12s; } .ts-stamp-log:hover { color: var(--text); border-color: var(--border-strong, var(--border)); } .ts-stamp-log:active { transform: scale(.965); } .ts-mod { margin-inline-start: 8px; font-size: 10.5px; font-weight: 500; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42ch; } .tsl-no { font-family: var(--tf-mono, 'IBM Plex Mono', monospace); font-size: 10.5px; color: var(--text-muted); white-space: nowrap; } .tsl-tabs { display: flex; gap: 6px; margin-bottom: 10px; } /* v552 — سجلّ المحطة: الإعدادات · الفريق */ .tsl-tab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 9px; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; background: var(--surface2); color: var(--text-muted); border: 1px solid var(--border); } .tsl-tab.on { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, var(--surface2)); } .tsl-tab:active { transform: scale(.965); } .tsl-pane[hidden] { display: none; } /* ═══ v553 — مصفوفة الصلاحيات ═══ */ .tp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; } .tp-q { flex: 1 1 180px; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-family: inherit; font-size: 13px; } .tp-roles { display: flex; flex-wrap: wrap; gap: 5px; } .tp-rb { padding: 6px 11px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted); font-family: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; min-height: 32px; } .tp-rb.on { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, var(--surface2)); } .tp-rb:active { transform: scale(.965); } .tp-key { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); flex-basis: 100%; } .tp-key .tp-c { width: 14px; height: 14px; min-width: 14px; min-height: 14px; margin-inline-start: 6px; cursor: default; } .tp-mxwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; } .tp-mx { display: flex; flex-direction: column; gap: 4px; min-width: max-content; } .tp-row { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 10px; background: var(--surface2); } .tp-row.tp-head { background: transparent; align-items: flex-end; position: sticky; top: 0; z-index: 2; } .tp-who { width: 170px; flex: 0 0 170px; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; } .tp-who b { font-weight: 600; color: var(--text); } .tp-who em { font-style: normal; font-size: 10.5px; color: var(--text-muted); } .tp-head .tp-who { font-size: 11px; font-weight: 700; color: var(--text-muted); } .tp-grp { display: flex; flex-direction: column; gap: 4px; padding-inline-end: 10px; border-inline-end: 1px solid var(--border); } .tp-grp:last-of-type { border-inline-end: 0; } .tp-grp > b { font-size: 10.5px; font-weight: 700; color: var(--text-muted); } .tp-cols { display: grid; grid-template-columns: repeat(var(--n), 30px); gap: 4px; align-items: end; } .tp-col { font-size: 10px; color: var(--text-muted); writing-mode: vertical-rl; transform: rotate(180deg); height: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 30px; text-align: start; } .tp-c { width: 30px; height: 30px; min-width: 30px; min-height: 30px; border-radius: 8px; border: 1px solid var(--border-strong, var(--border)); background: transparent; cursor: pointer; padding: 0; position: relative; } .tp-c::after { content: ''; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: 50%; background: transparent; } .tp-c.role::after { background: color-mix(in srgb, var(--text) 45%, transparent); } .tp-c.add { border-color: color-mix(in srgb, var(--success) 60%, var(--border)); background: color-mix(in srgb, var(--success) 14%, transparent); } .tp-c.add::after { background: var(--success); } .tp-c.deny { border-color: color-mix(in srgb, var(--danger) 60%, var(--border)); background: color-mix(in srgb, var(--danger) 12%, transparent); } .tp-c.deny::after { width: 10px; height: 2px; border-radius: 2px; background: var(--danger); } .tp-c:hover { border-color: var(--accent); } .tp-c:active { transform: scale(.9); } .tp-act { display: flex; align-items: center; gap: 8px; margin-top: 3px; flex-wrap: wrap; } .tp-view { padding: 3px 8px; font-size: 10.5px; display: inline-flex; align-items: center; gap: 4px; border-radius: 7px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-family: inherit; cursor: pointer; min-height: 24px; } .tp-view:hover { color: var(--text); border-color: var(--accent); } .tp-view:active { transform: scale(.965); } @media (pointer: coarse) { .tp-view { min-height: 40px; padding: 6px 12px; } } .tp-st { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; } .tp-st.ok { color: var(--success); } .tp-st.err { color: var(--danger); } .tp-side { display: flex; flex-direction: column; gap: 3px; margin: 10px 0; padding: 8px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--border); max-width: 320px; } .tp-side-it { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--text); } .tp-side-it svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--text-muted); } .tp-side-it em { font-style: normal; margin-inline-start: auto; font-size: 10.5px; color: var(--text-muted); } .tp-side-it.add { background: color-mix(in srgb, var(--success) 10%, transparent); } .tp-side-it.add em { color: var(--success); } .tp-side-it.deny { opacity: 1; color: var(--text-muted); text-decoration: line-through; background: color-mix(in srgb, var(--danger) 8%, transparent); } .tp-side-it.deny em { color: var(--danger); text-decoration: none; } @media (pointer: coarse) { .tp-c { width: 40px; height: 40px; min-width: 40px; min-height: 40px; } .tp-cols { grid-template-columns: repeat(var(--n), 40px); } .tp-col { line-height: 40px; } } .tsl-serial { margin-inline-start: 6px; font-family: var(--tf-mono, 'IBM Plex Mono', monospace); font-size: 12px; font-weight: 600; color: var(--text-muted); } .ts-local { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 9px 12px; border-radius: 11px; font-size: 12.5px; color: var(--text); border: 1px solid color-mix(in srgb, var(--warning, #e8a33d) 60%, var(--border)); background: color-mix(in srgb, var(--warning, #e8a33d) 8%, transparent); } .ts-local > span { flex: 1 1 220px; min-width: 0; } .types-manager-grid > .types-local { grid-column: 1 / -1; } .tw-tpl { display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; font: inherit; cursor: pointer; padding: 11px 13px; border-radius: 12px; color: var(--text); background: var(--surface2, var(--surface)); border: 1px dashed var(--border-strong, var(--border)); transition: transform .08s, border-color .12s; } .tw-tpl:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .tw-tpl:active { transform: scale(.965); } .tw-tpl > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tw-tpl b { font-size: 13px; font-weight: 700; } .tw-tpl em { font-style: normal; font-size: 11.5px; color: var(--text-muted); } /* القاموس — أعمدة الحقول والمعاينة جنبها (تنزل تحتها على الشاشة الضيّقة) */ .td-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 16px; align-items: start; } .td-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px 18px; min-width: 0; } .td-sec { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .td-sec .ts-sub { margin: 4px 0 4px; } .td-row { display: grid; grid-template-columns: minmax(0, 9ch) minmax(0, 1fr) auto; align-items: center; gap: 8px; } .td-orig { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .td-row.on .td-orig { color: var(--text); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text) 35%, transparent); } .td-in, .td-q { font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--border); min-width: 0; width: 100%; box-sizing: border-box; background: var(--surface2, var(--surface)); color: var(--text); } .td-in::placeholder { color: color-mix(in srgb, var(--text-muted) 70%, transparent); } .td-row.on .td-in { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .td-x { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; cursor: pointer; color: var(--text-muted); background: transparent; border: 1px solid var(--border); visibility: hidden; transition: transform .08s; } .td-row.on .td-x { visibility: visible; } .td-x:active { transform: scale(.965); } .td-hits { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; max-height: 320px; overflow-y: auto; } .td-hint { font-size: 11.5px; color: var(--text-muted); padding: 4px 2px; } .td-prev { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: linear-gradient(var(--surface, #16181f), var(--surface, #16181f)), var(--bg, #0f1115); border: 1px solid var(--border); } .td-prev-h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--text-muted); } .td-side { display: flex; flex-direction: column; gap: 2px; } .td-side-it { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; font-size: 12.5px; color: var(--text-muted); min-width: 0; } .td-side-it i { display: inline-flex; width: 16px; height: 16px; flex: none; } .td-side-it i svg { width: 16px; height: 16px; } .td-side-it span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .td-side-it.on { color: var(--text); background: color-mix(in srgb, var(--accent) 12%, transparent); } .td-chips { display: flex; flex-wrap: wrap; gap: 5px; } .td-chip { font-size: 11.5px; padding: 3px 9px; border-radius: 99px; color: var(--text-muted); border: 1px solid var(--border); } .td-chip.on { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .td-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); } .td-n { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .td-sp { flex: 1 1 auto; } .td-reset { color: var(--text-muted) !important; } @media (max-width: 860px) { .td-wrap { grid-template-columns: minmax(0, 1fr); } .td-prev { position: static; } } /* المعاينة: الفرق يُرى قبل أن يُطبَّق */ .tsp { display: flex; flex-direction: column; gap: 10px; } .tsp-sub { font-size: 12px; color: var(--text-muted); } .tsp-sum { display: flex; flex-wrap: wrap; gap: 6px; } .tsp-c { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--border); color: var(--text-muted); } .tsp-c b { font-family: var(--tf-mono, 'IBM Plex Mono', monospace); color: var(--text); } .tsp-c.chg { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .tsp-g { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--border); } .tsp-gh { display: flex; align-items: center; gap: 8px; cursor: pointer; } .tsp-gh b { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; } .tsp-gh em { font-style: normal; font-size: 11.5px; color: var(--text-muted); margin-inline-start: auto; } .tsp-r { display: grid; grid-template-columns: auto minmax(0, 20ch) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; font-size: 12.5px; cursor: pointer; } .tsp-r:hover { background: color-mix(in srgb, var(--text) 4%, transparent); } .tsp-r b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tsp-st { font-size: 10.5px; font-weight: 600; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; } .tsp-r.chg .tsp-st { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .tsp-r.new .tsp-st { color: var(--text); } .tsp-r.same { opacity: .55; cursor: default; } .tsp-v { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 11.5px; color: var(--text-muted); } .tsp-v s, .tsp-v i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; min-width: 0; } .tsp-v i { color: var(--text); } [dir="rtl"] .tsp-v svg { transform: scaleX(-1); } /* السهم من القديم إلى الجديد — يُقلب يدويّاً في RTL */ .tsp-skip { font-size: 12px; color: var(--text-muted); } .tsp-skip summary { cursor: pointer; } .tsp-skip div { padding: 3px 0; } .tsp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); } .tsp-go b { font-family: var(--tf-mono, 'IBM Plex Mono', monospace); margin-inline-start: 4px; } .tsp-go:disabled { opacity: .5; cursor: not-allowed; } @media (max-width: 640px) { .tsp-r { grid-template-columns: auto minmax(0, 1fr) auto; } .tsp-v { grid-column: 2 / -1; } } /* القوالب */ .tsq { display: flex; flex-direction: column; gap: 8px; } .tsq-it { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 3px; align-items: center; text-align: start; font: inherit; cursor: pointer; padding: 13px 14px; border-radius: 13px; color: var(--text); background: var(--surface2, var(--surface)); border: 1px solid var(--border); transition: transform .08s, border-color .12s; } .tsq-it:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .tsq-it:active { transform: scale(.965); } .tsq-it i { grid-row: 1 / 3; display: inline-flex; color: var(--text-muted); } .tsq-it b { font-size: 14px; font-weight: 700; } .tsq-it em { font-style: normal; font-size: 12px; line-height: 1.7; color: var(--text-muted); } /* المغادرة وفي الإعدادات ما لم يُحفظ — نافذةٌ صمّاء */ /* v579 — نافذة «لم تُحفظ» أُزيلت: المسودّة المحلّيّة (.ts-draft) بدلها */ @media (pointer: coarse) { .td-x, .ts-stamp-log, .tsp-foot .g-btn { min-height: 40px; min-width: 40px; } } /* ═══ v554 — قنوات الإشعارات · البريد الخارجيّ ═══ صفٌّ لكلّ قناة: التسمية وحالتها يميناً، والفعل يساراً. الحالة نصٌّ لا لون: اللون المشبع لـ«مفعّل» وحده (معنىً واحد على الشاشة). رمز الربط بخطّ الأرقام. */ .tfn-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 12px 0; border-bottom: 1px solid var(--border); } .tfn-row:last-child { border-bottom: 0; } .tfn-lab { display: flex; align-items: center; gap: 10px; min-width: 0; } .tfn-lab svg { flex: 0 0 auto; color: var(--text-muted); } .tfn-lab b { font-weight: 600; } .tfn-st { font-style: normal; font-size: 12px; color: var(--text-muted); padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; white-space: nowrap; } .tfn-st.on { color: var(--success-ink, #0a0e1a); background: var(--success, #2ecc71); border-color: transparent; font-weight: 600; } .tfn-st.denied, .tfn-st.unsupported { opacity: .8; } .tfn-act { display: flex; gap: 8px; flex-wrap: wrap; } .tfn-act .btn-submit { width: auto; max-width: none; padding: 8px 14px; } .tfn-code { flex: 1 0 100%; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 10px; background: color-mix(in srgb, var(--bg) 60%, transparent); } .tfn-codebox { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .tfn-num { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 26px; font-weight: 700; letter-spacing: .18em; direction: ltr; color: var(--accent-fg); } .tfn-codebox .btn-submit { width: auto; max-width: none; padding: 8px 14px; text-decoration: none; display: inline-flex; align-items: center; } /* v558 — لوحة دليل البرنامج: الفعل الأساسيّ أوّلاً فيقع يميناً في RTL (قاعدة الأزرار) */ .tfg-act { display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap; margin-top: 12px; } .tfg-act .btn-submit { width: auto; max-width: none; padding: 9px 16px; } @media (pointer: coarse) { .tfg-act .btn-submit { min-height: 40px; } } /* v558 — سطر المسؤول حين لا تُجيب الدالّة: الأمر كاملاً ويلتفّ على الشاشة الضيّقة */ .tfn-admin { margin: 10px 0 0; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; } .tfn-admin code { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; direction: ltr; unicode-bidi: isolate; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid var(--border); overflow-wrap: anywhere; } @media (pointer: coarse) { .tfn-act .btn-submit, .tfn-codebox .btn-submit { min-height: 40px; } } @media (max-width: 640px) { .tfn-row { flex-direction: column; align-items: stretch; } .tfn-act { justify-content: flex-end; } } /* ═══ v555 — دليل الصفحة ═══ بقعةٌ فوق العنصر تنبض (الوميض) وظلٌّ يعتم الباقي، وبطاقةٌ تشرح. الطبقة فوق كلّ شيء وخارج أيّ سلفٍ عليه filter (تُلحق بـbody). اللون المشبع للبقعة وحدها. */ #tour-btn { position: relative; } #tour-btn .tour-new-icon { display: none; position: absolute; top: 4px; inset-inline-end: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); } #tour-btn.new .tour-new-icon { display: block; } #tf-tour { position: fixed; inset: 0; z-index: 100000; } #tf-tour .tft-mask { position: absolute; inset: 0; } #tf-tour .tft-spot { position: fixed; border-radius: 10px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(6, 8, 14, .58); outline: 2px solid var(--accent); transition: top .28s ease, left .28s ease, width .28s ease, height .28s ease; animation: tft-pulse 1.4s ease-in-out infinite; } @keyframes tft-pulse { 0%, 100% { outline-offset: 0; outline-color: var(--accent); } 50% { outline-offset: 6px; outline-color: color-mix(in srgb, var(--accent) 35%, transparent); } } #tf-tour .tft-card { position: fixed; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px 12px; box-shadow: 0 18px 48px rgba(0, 0, 0, .35); font-family: inherit; } #tf-tour .tft-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } #tf-tour .tft-count { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: var(--text-muted); font-weight: 600; } #tf-tour .tft-x { background: none; border: 0; color: var(--text-muted); font-size: 15px; cursor: pointer; padding: 4px 6px; border-radius: 6px; min-width: 32px; min-height: 32px; } #tf-tour .tft-x:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); } #tf-tour .tft-txt { margin: 0 0 12px; font-size: 14px; line-height: 1.8; font-weight: 500; } #tf-tour .tft-foot { display: flex; justify-content: flex-end; gap: 8px; } #tf-tour .tft-btn { border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: 9px; padding: 8px 14px; font-weight: 600; font-family: inherit; cursor: pointer; min-height: 36px; transition: transform .12s ease; } #tf-tour .tft-btn:active { transform: scale(.965); } #tf-tour .tft-btn:disabled { opacity: .45; cursor: default; } #tf-tour .tft-btn.primary { background: var(--accent); color: var(--tf-accent-ink, #1a1305); border-color: transparent; } @media (max-width: 640px) { #tf-tour .tft-card { left: 12px !important; right: 12px; width: auto !important; top: auto !important; bottom: calc(12px + env(safe-area-inset-bottom)); } } @media (pointer: coarse) { #tf-tour .tft-btn { min-height: 40px; } #tf-tour .tft-x { min-width: 40px; min-height: 40px; } } @media (prefers-reduced-motion: reduce) { #tf-tour .tft-spot { animation: none; transition: none; } } /* ═══ v556 — شريط محطة العرض ═══ */ .tf-demo-strip { position: relative; z-index: 1200; text-align: center; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; padding: 6px 12px; background: var(--accent); color: var(--tf-accent-ink, #1a1305); } .tf-demo-strip[hidden] { display: none; } /* ═══ v562 — الإعدادات بطبقتين · صفوف · التكاملات · السعة ═══ */ /* القائمة: عنوان الطبقة · العنصر النشط بحدٍّ منطقيّ (يتبع اتّجاه الكتابة) · ضوء «صحّة النظام» */ .ts-tier { margin: 10px 4px 2px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: var(--text-muted); } .ts-tier:first-of-type { margin-top: 2px; } #page-settings .ts-g.on { box-shadow: none; border-inline-start: 3px solid var(--accent, #cf9f52); padding-inline-start: 10px; } .ts-g i svg, .ts-hit i svg { display: block; } .ts-g .ts-led { margin-inline-start: auto; } .ts-led { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; text-decoration: none; background: var(--text-muted); box-shadow: 0 0 0 2px color-mix(in srgb, var(--text-muted) 18%, transparent); } .ts-led.ok { background: var(--success, #2fbf71); box-shadow: 0 0 0 2px color-mix(in srgb, var(--success, #2fbf71) 22%, transparent), 0 0 6px color-mix(in srgb, var(--success, #2fbf71) 55%, transparent); } .ts-led.warn { background: var(--warning, #e8a020); box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning, #e8a020) 25%, transparent), 0 0 7px color-mix(in srgb, var(--warning, #e8a020) 60%, transparent); } .ts-led.off { opacity: .55; } .ts-hit em { white-space: normal; } .tfs-ic { display: inline-flex; vertical-align: -2px; font-style: normal; color: var(--text-muted); } .ts-back { display: none; } /* صفّ الإعداد: التسمية وشرحها جهة، والتحكّم جهة */ .tfs-rows { display: flex; flex-direction: column; } .tfs-row { display: grid; grid-template-columns: minmax(180px, 38%) minmax(0, 1fr); gap: 8px 22px; align-items: center; padding: 13px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); } .tfs-row:last-child { border-bottom: 0; } .tfs-row.wide { grid-template-columns: 1fr; } .tfs-rl { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; min-width: 0; } .tfs-rl b, .tfs-rl label b { font-size: 13px; font-weight: 600; color: var(--text); } .tfs-rl label { cursor: pointer; } .tfs-rl em { flex: 1 1 100%; font-style: normal; font-size: 11.5px; font-weight: 500; line-height: 1.7; color: var(--text-muted); } .tfs-rl em code, .ts-hint code { font-family: var(--tf-mono, 'IBM Plex Mono', monospace); font-size: 10.5px; direction: ltr; unicode-bidi: isolate; padding: 1px 5px; border-radius: 5px; background: var(--surface2); border: 1px solid var(--border); } .tfs-rc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; } .tfs-in { max-width: 420px; width: 100%; } select.tfs-in { max-width: 260px; } .tfs-inrow { display: flex; gap: 6px; align-items: center; width: 100%; max-width: 420px; } .tfs-inrow .tfs-in { flex: 1; } .tfs-ico-btn { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .tfs-ro { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tfs-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 600; color: var(--text-muted); background: var(--surface2); border: 1px solid var(--border); } .tfs-chip.on { color: var(--text); border-color: color-mix(in srgb, var(--success, #2fbf71) 50%, var(--border)); } .tfs-av-wrap { display: flex; align-items: center; gap: 14px; } .tfs-av { width: 64px; height: 64px; font-size: 22px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .tfs-av:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* المقسّم والخطوة والمفتاح */ .tfs-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 11px; background: var(--surface2); border: 1px solid var(--border); } .tfs-seg-b { min-height: 34px; padding: 6px 14px; border-radius: 8px; border: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: transform .08s, background .12s; } .tfs-seg-b:active { transform: scale(.965); } .tfs-seg-b.on { color: var(--text); background: var(--surface, #fff); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent), 0 1px 3px rgba(0,0,0,.14); } .tfs-segs { display: flex; flex-wrap: wrap; gap: 8px; } .tfs-step { display: inline-flex; align-items: center; gap: 10px; } .tfs-step .g-btn { min-width: 40px; min-height: 40px; padding: 0 12px; font-size: 16px; font-weight: 700; } .tfs-step b { min-width: 52px; text-align: center; font-family: var(--tf-mono, 'IBM Plex Mono', monospace); font-weight: 600; } .tfs-sw { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-muted); } .tfs-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; } .tfs-sw i { position: relative; width: 42px; height: 24px; border-radius: 99px; background: var(--surface2); border: 1px solid var(--border); transition: background .15s; } .tfs-sw i::after { content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-muted); transition: inset-inline-start .15s, background .15s; } .tfs-sw input:checked + i { background: color-mix(in srgb, var(--accent) 30%, var(--surface2)); border-color: var(--accent); } .tfs-sw input:checked + i::after { inset-inline-start: 20px; background: var(--accent); } .tfs-sw input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; } /* v622 — لائحة الاختيار المتعدّد: المختار وحده (✕ لإزالته) + «أضف…» تفتح بحثاً داخل البطاقة. حلّت محلّ رقاقات كلّ الأسماء (.tfs-pick) التي كانت تطيل البطاقة بطول الفريق. لا غلاس: بطاقةٌ مكرّرة */ .tfs-cho { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .tfs-cho-on { display: flex; flex-wrap: wrap; gap: 6px; } .tfs-cho-c { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding-block: 4px; padding-inline: 12px 6px; border-radius: 99px; font-size: 12.5px; font-weight: 600; color: var(--text); background: color-mix(in srgb, var(--accent) 12%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border)); } .tfs-cho-c b { font-weight: 600; } .tfs-cho-c em, .tfs-cho-opt em { font-style: normal; font-weight: 500; font-size: 11px; color: var(--text-muted); } .tfs-cho-x { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border-radius: 50%; cursor: pointer; color: var(--text-muted); background: transparent; border: 1px solid var(--border); transition: transform .08s, color .12s; } .tfs-cho-x:hover { color: var(--text); } .tfs-cho-x:active, .tfs-cho-addb:active, .tfs-cho-opt:active { transform: scale(.965); } .tfs-cho-x:focus-visible, .tfs-cho-addb:focus-visible, .tfs-cho-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .tfs-cho-add { display: flex; flex-direction: column; gap: 8px; width: 100%; } .tfs-cho-addb { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 14px; border-radius: 99px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-muted); background: transparent; border: 1px dashed var(--border); transition: transform .08s, color .12s, border-color .12s; } .tfs-cho-addb:hover, .tfs-cho-add.open .tfs-cho-addb { color: var(--text); border-color: var(--text-muted); } .tfs-cho-pop { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 620px; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--surface2) 45%, transparent); border: 1px solid var(--border); } .tfs-cho-pop[hidden] { display: none; } .tfs-cho-q { display: flex; align-items: center; gap: 8px; color: var(--text-muted); } .tfs-cho-q input { flex: 1; max-width: none; } .tfs-cho-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; } .tfs-cho-opt { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-height: 36px; padding: 6px 12px; border-radius: 9px; cursor: pointer; text-align: start; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--border); transition: transform .08s, border-color .12s; } .tfs-cho-opt:hover { border-color: var(--accent); } .tfs-cho-opt[hidden] { display: none; } .tfs-cho-more { font-size: 12px; color: var(--text-muted); } .tfs-cho-more:empty { display: none; } .tfs-scms { display: flex; flex-direction: column; gap: 10px; } .tfs-scm { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--surface2) 55%, transparent); border: 1px solid var(--border); } .tfs-scm-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .tfs-scm-h em { font-style: normal; font-size: 11.5px; color: var(--text-muted); } .tfs-none { font-size: 12.5px; color: var(--text-muted); } @media (pointer: coarse) { .tfs-cho-c, .tfs-cho-addb, .tfs-cho-opt { min-height: 44px; } .tfs-cho-c { padding-block: 2px; padding-inline-end: 2px; } .tfs-cho-x { width: 40px; height: 40px; } } .tfs-row.wide .tfs-rc > * { flex: 1 1 100%; min-width: 0; } #page-settings .tfs-theme-grid { display: grid; width: 100%; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .tfs-theme-grid .ms-theme-opt { font: inherit; text-align: start; } /* فوتر البطاقة: الحفظ أوّلاً (يمين) · الخطر معزولٌ في الطرف الآخر بلونٍ محايد */ .tfs-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); } .tfs-foot-sp { flex: 1 1 auto; } .tfs-foot .g-btn { min-height: 40px; } .tfs-save { background: var(--accent) !important; color: var(--tf-accent-ink, #111) !important; border-color: transparent !important; font-weight: 700; } .tfs-danger { color: var(--text-muted) !important; } .tfs-danger:hover { color: var(--text) !important; } /* الحالة والاختبار */ .tfs-state { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted); } .tfs-state.ok { color: var(--text); } .tfs-state.warn { color: var(--text); border-color: color-mix(in srgb, var(--warning, #e8a020) 55%, var(--border)); } .tfs-test { min-height: 34px; padding: 5px 13px; font-size: 12px; } .tfs-wait { padding: 14px 0; font-size: 12px; color: var(--text-muted); } .tfs-at { margin: 8px 0 0; } .tfs-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; } .tfs-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--border); } .tfs-stat i { font-style: normal; color: var(--text-muted); } .tfs-stat b { font-size: 20px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } .tfs-stat span { font-size: 11.5px; color: var(--text-muted); } /* السعة — فيومتر من ٢٤ مقطعاً: اللون للعتبة وحدها (٧٠ · ٨٥ · ٩٥) */ .tfs-cap-ms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 4px 0 6px; } .tfs-cap-m { padding: 12px 14px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--border); } .tfs-cap-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; } .tfs-cap-h b { font-size: 13px; font-weight: 600; } .tfs-cap-h span { font-size: 11px; color: var(--text-muted); unicode-bidi: isolate; } .tfs-cap-h em { margin-inline-start: auto; font-style: normal; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } .tfs-vu { display: flex; gap: 3px; direction: ltr; } .tfs-vu i { flex: 1 1 0; min-width: 0; height: 12px; border-radius: 2px; background: color-mix(in srgb, var(--text-muted) 16%, transparent); } .tfs-vu i.on { background: var(--success, #2fbf71); } .tfs-vu i.on.z1 { background: var(--warning, #e8a020); } .tfs-vu i.on.z2, .tfs-vu i.on.z3 { background: var(--danger, #e5484d); } [dir="rtl"] .tfs-vu { direction: rtl; } .tfs-cap-m.crit { border-color: color-mix(in srgb, var(--danger, #e5484d) 60%, var(--border)); } .tfs-cap-m.hot { border-color: color-mix(in srgb, var(--danger, #e5484d) 35%, var(--border)); } .tfs-cap-m.warm { border-color: color-mix(in srgb, var(--warning, #e8a020) 45%, var(--border)); } .tfs-grow { display: block; flex: 1 1 100%; font-size: 11.5px; color: var(--text); } .tfs-cap-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 10px; } .tfs-cap-list { display: flex; flex-direction: column; gap: 5px; } .tfs-cap-list > b { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 2px; } .tfs-cap-it { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; font-size: 12px; background: var(--surface2); } .tfs-cap-it span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tfs-cap-it i { position: absolute; inset-block: auto 0; inset-inline-start: 0; height: 2px; width: var(--w, 0%); background: color-mix(in srgb, var(--accent) 70%, transparent); border-radius: 2px; } .tfs-cap-it em { font-style: normal; font-size: 11px; color: var(--text-muted); unicode-bidi: isolate; white-space: nowrap; } /* شريط «تغييرات لم تُحفظ» أسفل اليمين (قاعدة الأزرار) — كان في المنتصف */ body .ts-bar { left: auto; right: 22px; transform: none; } /* الجرس ← إعدادات الإشعارات */ .notif-set { display: flex; align-items: center; gap: 7px; width: 100%; padding: 9px 14px; border: 0; border-bottom: 1px solid var(--border); background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; text-align: start; } .notif-set:hover { color: var(--text); background: var(--surface2); } /* الهاتف: القائمة شاشةٌ أولى والصفحة ثانية — بدل رقائق أفقيّة */ @media (max-width: 900px) { #page-settings .ts-nav { flex-direction: column; overflow: visible; gap: 3px; } #page-settings .ts-nav .ts-g em { display: block; } #page-settings .ts-g { flex: 0 0 auto; min-height: 48px; } .ts-shell.ts-mob-list .ts-body { display: none; } .ts-shell:not(.ts-mob-list) .ts-nav { display: none; } .ts-back { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 100%; min-height: 40px; padding: 0 4px; border: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-muted); cursor: pointer; } .ts-back svg { transform: rotate(90deg); } [dir="rtl"] .ts-back svg { transform: rotate(-90deg); } /* «رجوع» يشير إلى بداية السطر: يمين في العربيّة */ .tfs-row { grid-template-columns: 1fr; gap: 8px; } .tfs-in, select.tfs-in, .tfs-inrow { max-width: none; } body .ts-bar { right: 12px; left: 12px; width: auto; } } @media (pointer: coarse) { .tfs-seg-b { min-height: 40px; } .tfs-test { min-height: 40px; } } /* ═══ v563 — المساعد: تنسيق الردّ · الأوضاع · الأدوات · الأفعال · البدايات ═══ */ /* الردّ منسّقٌ (ماركداون آمن) لا نصٌّ خام — والفقاعة لا تفرض pre-wrap على الوسوم */ .aip-msg.ai:not(.thinking) { white-space: normal; } .aip-msg.ai p { margin: 0 0 .7em; } .aip-msg.ai p:last-child { margin-bottom: 0; } .aip-msg.ai h3, .aip-msg.ai h4, .aip-msg.ai h5, .aip-msg.ai h6 { margin: .9em 0 .4em; font-weight: 700; line-height: 1.5; } .aip-msg.ai h3 { font-size: 16px; } .aip-msg.ai h4 { font-size: 15px; } .aip-msg.ai h5, .aip-msg.ai h6 { font-size: 14px; } .aip-msg.ai ul, .aip-msg.ai ol { margin: .3em 0 .8em; padding-inline-start: 1.4em; } .aip-msg.ai li { margin: .15em 0; } .aip-msg.ai code { font-family: var(--tf-mono, 'IBM Plex Mono', monospace); font-size: .9em; padding: 1px 6px; border-radius: 6px; background: var(--surface2); border: 1px solid var(--border); unicode-bidi: isolate; } .aip-msg.ai pre { margin: .6em 0; padding: 12px 14px; border-radius: 10px; background: var(--surface2); border: 1px solid var(--border); overflow-x: auto; white-space: pre; } .aip-msg.ai pre code { padding: 0; border: 0; background: transparent; } .aip-msg.ai blockquote { margin: .6em 0; padding: 4px 12px; border-inline-start: 3px solid var(--border); color: var(--text-muted); } .aip-msg.ai a { color: var(--accent-fg, var(--accent)); text-decoration: underline; text-underline-offset: 3px; } .aip-msg .aip-ref { font-size: .72em; font-weight: 600; color: var(--text-muted); font-family: var(--tf-mono, 'IBM Plex Mono', monospace); unicode-bidi: isolate; } .aip-tbl { overflow-x: auto; margin: .6em 0; } .aip-tbl table { border-collapse: collapse; font-size: 13px; min-width: 60%; } .aip-tbl th, .aip-tbl td { padding: 6px 10px; border: 1px solid var(--border); text-align: start; vertical-align: top; } .aip-tbl th { background: var(--surface2); font-weight: 600; } .aip-caret { display: inline-block; width: 8px; height: 1em; margin-inline-start: 2px; vertical-align: -2px; background: var(--accent); border-radius: 1px; animation: aipBlink 1s steps(2) infinite; } @keyframes aipBlink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .aip-caret { animation: none; } } .aip-msg.stopped { opacity: .92; } .aip-msg.thinking.streaming { font-style: normal; opacity: 1; white-space: normal; } @media (pointer: coarse) { .apc-del { opacity: .75; } .aip-chip button { width: 40px; height: 40px; } .aip-mode, .aip-tool { min-height: 40px; } } .apc-del:focus-visible { opacity: 1; } .aip-file { display: inline-flex; align-items: center; margin: 0 0 6px; margin-inline-end: 6px; padding: 2px 9px; border-radius: 99px; font-size: 11px; font-weight: 600; background: color-mix(in srgb, #000 10%, transparent); } /* أدوات الردّ: نسخ · أعد التوليد — هادئة حتّى الحاجة */ .aip-tools { display: flex; gap: 4px; margin-top: 8px; opacity: .72; transition: opacity .12s; } .aip-msg:hover .aip-tools, .aip-tools:focus-within { opacity: 1; } .aip-tool { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 4px 10px; border-radius: 8px; border: 1px solid transparent; background: transparent; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: transform .08s, background .12s; } .aip-tool:hover { background: var(--surface2); border-color: var(--border); color: var(--text); } .aip-tool:active { transform: scale(.965); } /* بطاقات الأفعال: ما سيحدث بالضبط · «نفّذ» أوّلاً و«تجاهل» في الطرف الآخر */ .aip-acts { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; white-space: normal; } .aip-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 11px; background: var(--surface); border: 1px solid var(--border); } .aip-act-l { display: inline-flex; align-items: center; gap: 7px; flex: 1 1 220px; min-width: 0; font-size: 12.5px; } .aip-act-l b { font-weight: 600; } .aip-act-sp { flex: 0 0 auto; } .aip-act .g-btn { min-height: 40px; padding: 5px 14px; font-size: 12px; } .aip-act-go { background: var(--accent) !important; color: var(--tf-accent-ink, #111) !important; border-color: transparent !important; font-weight: 700; } .aip-act-no { color: var(--text-muted) !important; } .aip-act em { font-style: normal; font-size: 11.5px; color: var(--text-muted); } .aip-act.st-ran { border-color: color-mix(in srgb, var(--success, #2fbf71) 45%, var(--border)); } .aip-act.st-skip { opacity: .6; } .aip-srcs button.aip-src { font: inherit; text-align: start; background: transparent; border: 0; padding: 0; cursor: pointer; color: inherit; } /* شريط الأوضاع والسياق فوق الكتابة */ .aip-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; } .aip-modes { display: inline-flex; gap: 3px; padding: 3px; border-radius: 11px; background: var(--surface2); border: 1px solid var(--border); } .aip-mode { min-height: 32px; padding: 5px 13px; border-radius: 8px; border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: transform .08s; } .aip-mode:active { transform: scale(.965); } .aip-mode.on { color: var(--text); background: var(--surface, #fff); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent), 0 1px 3px rgba(0,0,0,.14); } .aip-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 6px; padding-inline-start: 10px; border-radius: 99px; font-size: 11.5px; background: color-mix(in srgb, var(--accent) 10%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); } .aip-chip b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; } .aip-chip button { width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; font-size: 15px; line-height: 1; cursor: pointer; color: var(--text-muted); } .aip-chip button:hover { color: var(--text); background: var(--surface2); } #page-ai .aip-attach svg { display: block; } /* زرّ الإرسال يصير «أوقف» أثناء التوليد — مربّعٌ لا سهم */ #page-ai .ai-page-input-row .btn-submit.aip-stop::before { content: ''; width: 13px; height: 13px; border-radius: 3px; background: var(--tf-accent-ink, #fff); transform: none; } /* حالة البداية */ #page-ai .ai-page-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; } .aip-hello { color: var(--accent-fg, var(--accent)); opacity: .9; } .aip-hello-t { font-size: 18px; font-weight: 700; color: var(--text); } .aip-hello-s { font-size: 12.5px; color: var(--text-muted); max-width: 520px; line-height: 1.8; } .aip-starters { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; width: min(640px, 100%); margin-top: 10px; } .aip-starter { min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 500; color: var(--text); text-align: start; line-height: 1.6; cursor: pointer; transition: transform .08s, border-color .12s; } .aip-starter:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .aip-starter:active { transform: scale(.965); } .aps-new::before { content: '+'; margin-inline-end: 6px; font-weight: 700; } .apc-tag { display: inline-block; margin-inline-end: 6px; padding: 0 7px; border-radius: 99px; font-size: 10px; font-weight: 600; color: var(--text-muted); border: 1px solid var(--border); vertical-align: 1px; } .aip-bar { align-self: stretch; justify-content: flex-start; } .ai-msg-ai p { margin: 0 0 .6em; } .ai-msg-ai p:last-child { margin: 0; } .ai-msg-ai ul, .ai-msg-ai ol { margin: .3em 0 .6em; padding-inline-start: 1.3em; } .ai-msg-ai code { font-family: var(--tf-mono, 'IBM Plex Mono', monospace); font-size: .9em; } .apc-del { border: 0; background: transparent; cursor: pointer; color: var(--text-muted); padding: 4px; border-radius: 6px; } .apc-del:hover { color: var(--text); background: var(--surface); } @media (pointer: coarse) { .aip-chip button { width: 40px; height: 40px; } } /* ═══ v565 — البريد إلى الخارج: العنوان الخارجيّ بحدٍّ منقّط لا بلونٍ جديد (اللون للمعنى) ═══ */ .cmp-chip.ext { border-style: dashed; } .cmp-chip.ext bdi { font-family: 'IBM Plex Mono', monospace; font-weight: 500; letter-spacing: 0; } .cmp-combo-item.ext bdi { font-family: 'IBM Plex Mono', monospace; } .mr-ext { display: inline-flex; align-items: center; gap: 3px; color: var(--text-muted, inherit); } /* ═══ v566 — مجلّد «الخارجيّ» ═══ */ .mx-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-muted); } .mx-bar .mx-st { flex: 1; font-family: 'IBM Plex Mono', monospace; } .mx-sync { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; } .mx-sync:active { transform: scale(.965); } .mx-sync[disabled] { opacity: .5; cursor: default; } .mx-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; } .mx-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; } .mx-meta .mono, .mx-addr { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--text-muted); } .mx-via { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text-muted); } .mx-to { font-size: 12px; color: var(--text-muted); margin: 4px 0 10px; } .mx-wait { padding: 18px 4px; color: var(--text-muted); } .mx-body { line-height: 1.7; overflow-wrap: anywhere; } .mx-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .mx-att { cursor: pointer; min-height: 32px; } @media (pointer: coarse) { .mx-sync, .mx-att { min-height: 40px; } } /* ═══════════════════════════════════════════════════════════════════ v569 · الهاتف — الورقة السفليّة · «المزيد» · بريد جديد · المجلّدات ═══════════════════════════════════════════════════════════════════ */ /* الورقة: الخلفيّة ستارةٌ معتمة بلا filter، والغلاس على الورقة وحدها (طبقة التحكّم) */ .tf-bs-ov { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: flex-end; justify-content: center; background: color-mix(in srgb, #000 0%, transparent); transition: background .2s ease; } .tf-bs-ov.on { background: color-mix(in srgb, #000 42%, transparent); } .tf-bs { width: min(560px, 100%); max-height: min(82dvh, 720px); display: flex; flex-direction: column; border-radius: 22px 22px 0 0; border: 1px solid var(--tf-gl, var(--border)); border-bottom: 0; background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 -18px 50px -20px rgba(0, 0, 0, .45), inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent); padding-bottom: env(safe-area-inset-bottom, 0px); outline: none; transform: translateY(100%); transition: transform .24s cubic-bezier(.2, .9, .3, 1); } .tf-bs-ov.on .tf-bs { transform: translateY(0); } .tf-bs-grab { flex: none; width: 40px; height: 5px; border-radius: 3px; margin: 9px auto 4px; background: color-mix(in srgb, var(--text-muted) 55%, transparent); } .tf-bs-h { flex: none; padding: 6px 20px 10px; font-size: 13px; font-weight: 700; color: var(--text-muted); } .tf-bs-b { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px 14px; } @media (prefers-reduced-motion: reduce) { .tf-bs, .tf-bs-ov { transition: none; } } /* قائمة أفعال: صفوفٌ بارتفاع ٥٠ — تُلمس بالإبهام */ .tf-bs-list { display: flex; flex-direction: column; } .tf-bs-list > button { display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 0 12px; border: 0; background: transparent; color: var(--text); font-family: inherit; font-size: 15px; font-weight: 500; text-align: start; border-radius: 12px; cursor: pointer; transition: transform .12s ease, background .12s; } .tf-bs-list > button:active { transform: scale(.965); background: var(--surface2); } .tf-bs-list > button > i { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); font-style: normal; } .tf-bs-list > button > i svg { width: 20px; height: 20px; } /* الحذف معزولٌ آخر القائمة بخطٍّ فاصل — بلونٍ محايد */ .tf-bs-list > button.tf-bs-sep { margin-top: 6px; border-top: 1px solid var(--border); border-radius: 0 0 12px 12px; } .tf-bs-react { display: flex; justify-content: space-between; gap: 6px; padding: 4px 6px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border); } .tf-bs-react > button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface2); font-size: 22px; cursor: pointer; transition: transform .12s ease; } .tf-bs-react > button:active { transform: scale(.965); } /* «المزيد»: شبكة الأقسام */ .tf-more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; } .tf-more-i { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 84px; padding: 10px 6px; border-radius: 16px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface2) 70%, transparent); color: var(--text); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-align: center; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent); transition: transform .12s ease, border-color .12s; } .tf-more-i:active { transform: scale(.965); } .tf-more-i.on { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); color: var(--accent-fg); } .tf-more-ic .nav-ico { width: 24px; height: 24px; } .tf-more-l { line-height: 1.3; overflow-wrap: anywhere; } /* الشريط السفليّ: خمس خاناتٍ متساوية، بلا سحبٍ أفقيّ */ @media (max-width: 768px) { .bottom-nav { overflow-x: visible !important; justify-content: space-around !important; } .bottom-nav-item { flex: 1 1 0 !important; min-width: 0 !important; min-height: 58px; } .bottom-nav-item.active .bn-icon { transform: none; } .bottom-nav-item:active { transform: scale(.965); } .bottom-nav-item .bn-label { font-size: 10.5px; max-width: 100%; } .bottom-nav-item .bn-icon .nav-ico, .bottom-nav-item .bn-icon .tf-svg { width: 22px; height: 22px; } } /* «بريد جديد»: زرّ الفعل الأساسيّ أسفل اليمين، في لائحة البريد على الهاتف وحدها */ .mail-fab { display: none; } @media (max-width: 768px) { body.in-app:has(#page-mail.active .mail-shell:not(.reading)):not(.tf-bs-open) .mail-fab { display: inline-flex; align-items: center; gap: 8px; position: fixed; z-index: 160; inset-inline-start: 16px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); height: 52px; padding: 0 20px; border-radius: 26px; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--tf-accent-ink, #fff); border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 90%, transparent), var(--accent)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent), 0 12px 26px -12px color-mix(in srgb, var(--accent) 80%, transparent); transition: transform .12s ease; } .mail-fab:active { transform: scale(.965); } body:has(#page-mail.active) #chat-widget { display: none !important; } /* المجلّدات: زرٌّ باسمه لا أيقونةٌ صمّاء */ .mail-shell .mfold-btn { gap: 6px; padding-inline: 12px !important; width: auto !important; min-height: 40px; font-family: inherit; font-weight: 600; } /* القراءة على الهاتف: الشريط السفليّ يُخلي المكان لصندوق الردّ */ body:has(#page-mail.active .mail-shell.reading) #bottom-nav { display: none !important; } body:has(#page-mail.active .mail-shell.reading) #page-mail { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; } } .mfold-lbl { display: none; } @media (max-width: 768px) { .mail-shell .mfold-btn .mfold-lbl { display: inline; font-size: 13px; } } /* القراءة على الهاتف: شاشةٌ كاملة كالمحادثة — رأسٌ واحد (رجوع · ردّ · التنقّل · ⋯) والرسالة تأخذ الباقي، وصندوق الردّ أسفلها فوق لوحة المفاتيح. كانت الرسالة تنضغط إلى ٥٥px تحت صفّين من الأزرار وشريط الذكاء. */ .mrt-mob-more { display: none; } @media (max-width: 768px) { #page-mail .mail-shell.reading .mail-read { position: fixed !important; inset-inline: 0 !important; top: var(--vvtop, 0px) !important; height: var(--vvh, 100dvh) !important; max-height: none !important; z-index: 320 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; transform: none !important; background: var(--bg) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #page-mail .mail-shell.reading .mail-read > .mr-kind, #page-mail .mail-shell.reading .mail-read > .mr-acts { display: none !important; } #page-mail .mail-shell.reading .mr-toolbar { flex: none !important; display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 6px !important; padding: max(8px, env(safe-area-inset-top)) 10px 8px !important; background: var(--surface) !important; border-bottom: 1px solid var(--border); overflow: hidden; } #page-mail .mail-shell.reading .mr-toolbar > .mrt-btn, #page-mail .mail-shell.reading .mr-toolbar > .mrt-sep, #page-mail .mail-shell.reading .mr-toolbar > .mr-pos, #page-mail .mail-shell.reading .mr-toolbar > .mr-nav-sep { display: none !important; } #page-mail .mail-shell.reading .mr-toolbar > .mr-back, #page-mail .mail-shell.reading .mr-toolbar > .mr-nb, #page-mail .mail-shell.reading .mr-toolbar > .mrt-mob-more { min-width: 44px; min-height: 44px; } #page-mail .mail-shell.reading .mr-toolbar > .mr-nav-sp { flex: 1; } #page-mail .mail-shell.reading .mrt-mob-more { display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid var(--border); background: var(--tf-glass, var(--surface2)); color: var(--text); cursor: pointer; } #page-mail .mail-shell.reading .mrt-mob-more:active { transform: scale(.965); } #page-mail .mail-shell.reading .mr-head { flex: none !important; padding: 12px 16px 8px !important; } #page-mail .mail-shell.reading .mr-subj { font-size: 18px !important; line-height: 1.5; } #page-mail .mail-shell.reading .mr-thread { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; max-height: none !important; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } #page-mail .mail-shell.reading .mr-qr, #page-mail .mail-shell.reading .mr-reply { flex: none !important; margin: 0 !important; border-radius: 0 !important; border-inline: 0 !important; border-bottom: 0 !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; } #page-mail .mail-shell.reading .mr-qr textarea { min-height: 44px !important; max-height: 30vh; } body:has(#page-mail.active .mail-shell.reading) { overflow: hidden; } } @media (max-width: 768px) { #page-mail .mail-shell.reading .mr-c-hint { display: none !important; } } /* ═══════════════════════════════════════════════════════════════════ v570 · إحساس اللمس — أهداف ٤٤ · الانكماش عند الضغط · السحب ═══════════════════════════════════════════════════════════════════ */ @media (pointer: coarse) { /* أزرار الشريط العلويّ: ٣٦ لا تُلمس بثقة بالإبهام */ .topnav .notif-bell { width: 40px !important; height: 40px !important; min-width: 40px; } /* ٤٤ تُخرج «⋮» من شاشة ٣٩٠ */ .topnav .user-badge { min-height: 40px; } } /* الهواتف الضيّقة (٣٦٠–٤٠٠): الاسم في الشارة يُخرج «⋮» من الشاشة — تبقى الأيقونة/الصورة والحالة، والاسم في ملفّك بلمسة */ @media (max-width: 400px) { .topnav #user-badge-name { display: none; } .topnav .user-badge { padding-inline: 8px; min-width: 40px; justify-content: center; } /* التأشير والتمييز في لائحة البريد: الشكل كما هو، ومساحة اللمس ٤٤ */ .ml-pick, .ml-star { position: relative; } .ml-pick::after, .ml-star::after { content: ''; position: absolute; inset: -14px; } /* الضغط انكماشٌ لا نزول — على اللمس أيضاً (سفاري لا يُظهر :active بلا مستمع لمس، وهو موجود) */ .g-btn:not(:disabled):active, .tfs-seg-b:active, .msgs-tab:active, .mc-mini:active, .mr-act:active, .mrt-main:active, .ml-split:active, .notif-bell:active, .user-badge:active, .mfold-btn:active, .ml-row:active { transform: scale(.965); } .ml-row { transition: transform .12s ease, background .12s; } /* كروم أندرويد يعيد تحميل الصفحة كلّها بالسحب للأسفل — نمنعه ونحدّث القسم وحده */ html, body { overscroll-behavior-y: contain; } } /* مؤشّر السحب للتحديث */ .tf-ptr { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 6px); left: 50%; z-index: 330; width: 40px; height: 40px; border-radius: 50%; display: none; align-items: center; justify-content: center; transform: translate(-50%, 0); color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .45); } .tf-ptr.on { display: flex; } .tf-ptr.armed { color: var(--accent-fg); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .tf-ptr.busy svg { animation: spin .8s linear infinite; } /* السحب الأفقيّ: العنصر يتبع الإصبع، وعند العتبة يُعلَن بحدٍّ ولون */ .sw-on { transition: none !important; will-change: transform; } .msg-bubble.sw-armed { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent); } .ml-row.sw-armed { background: color-mix(in srgb, var(--accent) 12%, var(--surface)) !important; } /* ═══════════════════════════════════════════════════════════════════ v571 · شاشة الدخول — وثيقة بثٍّ وكونسولٌ حيّ اللوحة (النموذج) طبقة التحكّم الوحيدة بغلاس. الكونسول غرفة تحكّمٍ داكنة في كلّ الثيمات. لونٌ مشبعٌ واحد: «ادخل». مفتاح المرور زجاجيٌّ محايد. ═══════════════════════════════════════════════════════════════════ */ .ln.login-screen { min-height: 100dvh; padding: 0; align-items: stretch; justify-content: stretch; overflow: clip; } .ln-panel { flex: 0 0 min(540px, 46vw); display: flex; flex-direction: column; min-width: 0; padding: 26px clamp(24px, 4vw, 60px) 22px; box-sizing: border-box; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(22px) saturate(1.15); -webkit-backdrop-filter: blur(22px) saturate(1.15); border-inline-end: 1px solid var(--tf-gl, var(--border)); box-shadow: 0 0 60px -20px rgba(0, 0, 0, .35); } .ln-head { display: flex; align-items: center; gap: 12px; } .ln-mark { width: 40px; height: 40px; flex: none; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface2); border: 1px solid var(--border); overflow: hidden; } .ln-mark img { width: 100%; height: 100%; object-fit: contain; } .ln-mark img:not([hidden]) + b { display: none; } .ln-mark b { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 600; font-size: 14px; color: var(--text); } .ln-brand { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .ln-brand b { font-size: 16px; font-weight: 700; color: var(--text); } .ln-brand span { font-size: 12px; font-weight: 500; color: var(--text-muted); } .ln .ln-lang { position: static; margin-inline-start: auto; min-height: 36px; padding: 0 14px; border-radius: 10px; font-size: 12.5px; font-weight: 600; background: var(--surface2); border: 1px solid var(--border); color: var(--text); } .ln .ln-lang:active { transform: scale(.965); } .ln-body { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 400px; margin-inline: auto; padding-block: 28px; text-align: start; } .ln .login-greet { text-align: start; font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin: 0 0 10px; } .ln-title { font-size: clamp(24px, 2.3vw, 30px); font-weight: 700; line-height: 1.35; margin: 0 0 6px; color: var(--text); } .ln-sub { font-size: 14px; font-weight: 500; color: var(--text-muted); margin: 0 0 26px; } .ln-form { display: flex; flex-direction: column; gap: 16px; } .ln-field { display: flex; flex-direction: column; gap: 7px; } .ln-field > label { font-size: 13px; font-weight: 600; color: var(--text-muted); } .ln .ln-in { width: 100%; box-sizing: border-box; height: 50px; padding: 0 16px; border-radius: 13px; font-size: 16px; font-weight: 500; letter-spacing: 0; text-align: start; background: color-mix(in srgb, var(--surface2) 80%, transparent); border: 1px solid var(--border); color: var(--text); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent); transition: border-color .14s, box-shadow .14s; } .ln .ln-in:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); } .ln .ln-pw .ln-in { padding-inline-end: 52px; } .ln .ln-pw .login-eye { margin-top: 0; width: 40px; height: 40px; inset-inline-end: 5px; } .ln .login-caps { margin: 0; } .ln .login-error { margin: 0; font-size: 13px; font-weight: 600; } .ln .ln-go { width: 100%; height: 52px; border-radius: 14px; font-size: 16px; font-weight: 600; margin-top: 4px; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent), 0 14px 30px -16px color-mix(in srgb, var(--accent) 85%, transparent); } .ln .ln-go:hover { transform: none; } .ln .ln-go:active { transform: scale(.965); } .ln-pk-wrap[hidden] { display: none; } .ln-or { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; color: var(--text-muted); font-size: 12px; font-weight: 600; } .ln-or::before, .ln-or::after { content: ''; flex: 1; height: 1px; background: var(--border); } .ln-pk { width: 100%; min-height: 50px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; color: var(--text); background: color-mix(in srgb, var(--surface2) 75%, transparent); border: 1px solid var(--border); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent); transition: transform .12s ease, border-color .12s; } .ln-pk:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .ln-pk:active { transform: scale(.965); } .ln-pk[disabled] { opacity: .6; cursor: progress; } .ln-pk-hint { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--text-muted); } .ln-foot { display: flex; flex-direction: column; gap: 12px; align-items: center; padding-top: 16px; border-top: 1px solid var(--border); } .ln .ln-themes { position: static; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; align-items: center; } .ln .ln-themes .theme-dot { flex: none; width: 22px !important; height: 22px !important; min-height: 0 !important; min-width: 0 !important; box-sizing: border-box; } @media (pointer: coarse) { .ln .ln-themes { gap: 10px; } .ln .ln-themes .theme-dot { width: 30px !important; height: 30px !important; } } .ln-credit { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; font-size: 11.5px; color: var(--text-muted); } /* ── الكونسول: غرفة التحكّم ── */ .ln-console { flex: 1; min-width: 0; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 40px; color: #e7ebf5; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 48px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 48px), radial-gradient(700px 480px at 70% 30%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%), linear-gradient(160deg, #0a0e18, #111827 55%, #0a0e18); } .ln-slate { position: relative; width: min(460px, 86%); padding: 34px 26px 26px; border-radius: 16px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .08); } /* التثقيب: ثقوب الشريط على الحافّتين — توثيق البثّ */ .ln-slate::before, .ln-slate::after { content: ''; position: absolute; inset-inline: 18px; height: 8px; background: radial-gradient(circle, rgba(0, 0, 0, .55) 0 2.6px, transparent 3px) 0 0 / 18px 8px repeat-x; opacity: .9; } .ln-slate::before { top: 10px; } .ln-slate::after { bottom: 8px; } .ln-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ln-onair { display: inline-flex; align-items: center; gap: 8px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; letter-spacing: 2px; color: #f3b1b1; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255, 90, 90, .35); background: rgba(255, 60, 60, .08); } .ln-onair i { width: 7px; height: 7px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 8px 1px rgba(255, 77, 77, .8); animation: lnLed 1.4s steps(2) infinite; } @keyframes lnLed { 50% { opacity: .3; } } .ln-tc { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: clamp(26px, 2.6vw, 38px); font-weight: 500; letter-spacing: .04em; direction: ltr; color: #f1f4fa; text-shadow: 0 0 18px rgba(120, 170, 255, .18); } .ln-meters { display: flex; flex-direction: column; gap: 7px; margin: 24px 0 22px; direction: ltr; } /* الكونسول للشاشة العريضة وحدها (تحت ٩٠٠ يُخفى) — شبكاته هنا لا تمسّ الهاتف */ @media (min-width: 901px) { .ln-vu { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; height: 10px; } } .ln-vu i { border-radius: 2px; background: rgba(255, 255, 255, .08); animation: lnVu 1.3s ease-in-out infinite; } .ln-vu i:nth-child(-n+9) { --on: #3fb97c; } .ln-vu i:nth-child(n+10):nth-child(-n+12) { --on: #e8b53a; } .ln-vu i:nth-child(n+13) { --on: #ff5a5a; } .ln-vu i:nth-child(1) { animation-delay: -.1s } .ln-vu i:nth-child(2) { animation-delay: -.15s } .ln-vu i:nth-child(3) { animation-delay: -.22s } .ln-vu i:nth-child(4) { animation-delay: -.3s } .ln-vu i:nth-child(5) { animation-delay: -.38s } .ln-vu i:nth-child(6) { animation-delay: -.45s } .ln-vu i:nth-child(7) { animation-delay: -.52s } .ln-vu i:nth-child(8) { animation-delay: -.6s } .ln-vu i:nth-child(9) { animation-delay: -.68s } .ln-vu i:nth-child(10) { animation-delay: -.76s } .ln-vu i:nth-child(11) { animation-delay: -.84s } .ln-vu i:nth-child(12) { animation-delay: -.92s } .ln-vu i:nth-child(13) { animation-delay: -1s } .ln-vu i:nth-child(14) { animation-delay: -1.08s } .ln-vu.r i { animation-duration: 1.7s; } .ln-vu i:nth-child(n+13) { animation-name: lnVuPeak; } @keyframes lnVu { 0%, 100% { background: rgba(255, 255, 255, .08); } 40%, 60% { background: var(--on); } } @keyframes lnVuPeak { 0%, 86%, 100% { background: rgba(255, 255, 255, .08); } 90% { background: var(--on); } } @media (min-width: 901px) { .ln-doc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0; direction: ltr; } } .ln-doc > div { padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .07); } .ln-doc dt { font-size: 9.5px; letter-spacing: .18em; color: rgba(231, 235, 245, .55); } .ln-doc dd { margin: 4px 0 0; font-size: 16px; font-weight: 500; color: #f1f4fa; } .ln-stamp { position: absolute; inset-inline-end: 22px; bottom: -18px; transform: rotate(-7deg); padding: 6px 14px; border: 2px solid rgba(232, 181, 58, .75); border-radius: 8px; color: #f0c860; font-size: 13px; font-weight: 700; letter-spacing: .02em; background: rgba(10, 14, 24, .85); } [dir="rtl"] .ln-stamp { transform: rotate(7deg); } .ln-tag { margin: 18px 0 0; font-size: 15px; font-weight: 600; color: rgba(231, 235, 245, .78); text-align: center; } @media (prefers-reduced-motion: reduce) { .ln-vu i, .ln-onair i { animation: none; } } /* ── الهاتف واللوح: النموذج وحده بعرض الشاشة، والكونسول شريطٌ نحيل فوقه ── */ @media (max-width: 900px) { .ln.login-screen { flex-direction: column; } .ln-panel { flex: 1 1 auto; border-inline-end: 0; padding: max(16px, env(safe-area-inset-top)) 20px max(16px, env(safe-area-inset-bottom)); } .ln-console { display: none; } .ln-body { padding-block: 22px; } } /* الشريط الأخير في القفل: فتحٌ ببصمة الجهاز */ .tl-pk { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; margin-top: 8px; border-radius: 12px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface2) 75%, transparent); color: var(--text); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform .12s ease; } .tl-pk:active { transform: scale(.965); } .tl-pk[disabled] { opacity: .6; } /* عرض مفتاح المرور بعد الدخول: شريطٌ صغير أسفل الشاشة، يُغلق ولا يعود */ .pk-offer { position: fixed; z-index: 2600; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); inset-inline: 0; margin-inline: auto; width: min(560px, calc(100vw - 24px)); display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; box-sizing: border-box; border-radius: 16px; border: 1px solid var(--tf-gl, var(--border)); color: var(--text); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .5); animation: pageIn .3s ease backwards; } @media (max-width: 768px) { .pk-offer { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } } .pk-offer-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface2); color: var(--text-muted); } .pk-offer-t { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.5; } .pk-offer-go { flex: none; min-height: 40px; padding: 0 16px; border-radius: 11px; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border)); background: var(--accent); color: var(--accent-ink, #0a0e1a); font-family: inherit; font-weight: 600; cursor: pointer; } .pk-offer-go:active, .pk-offer-x:active { transform: scale(.965); } .pk-offer-x { flex: none; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } /* الإعدادات: مفاتيحي */ .tfs-pk { display: flex; flex-direction: column; gap: 8px; align-items: stretch; width: 100%; } .tfs-pk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .tfs-pk-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface2); } .tfs-pk-ic { color: var(--text-muted); display: inline-flex; } .tfs-pk-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .tfs-pk-t b { font-size: 13px; font-weight: 600; } .tfs-pk-t em { font-style: normal; font-size: 11.5px; color: var(--text-muted); } .tfs-pk-rm { width: 38px; height: 38px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); } .tfs-pk-add { align-self: flex-start; } .tfs-pk-note { font-size: 12.5px; color: var(--text-muted); } /* ═══════════════════════════════════════════════════════════════════ v573 · قارئ البريد — هادئ، كمحادثة ───────────────────────────────────────────────────────────────── الترتيب: الأدوات · الموضوع · أفعال الذكاء (سطرٌ هادئ) · ما يخصّ الرسالة · الخيط (يأخذ الباقي ويُمرَّر وحده) · الردّ السريع. الرسائل الأقدم سطرٌ واحد (من · مقتطف · وقت) تُفتح بلمسة؛ الأحدث مفتوحة. بطاقاتٌ محايدة بحدٍّ رفيع — لا تعبئةٌ ملوّنة. «ردّ · ردّ على الكلّ · حوّلها» تحت الخيط كانت تكراراً لشريط الأدوات — أُزيلت. ═══════════════════════════════════════════════════════════════════ */ #page-mail .mail-shell.reading .mail-read { display: flex !important; flex-direction: column !important; min-height: 0; overflow: hidden !important; background: var(--surface) !important; } #page-mail .mail-read > * { order: 3; } #page-mail .mail-read > .mr-toolbar { order: 0; } #page-mail .mail-read > .mr-head { order: 1; } #page-mail .mail-read > .mr-kind { order: 2; } #page-mail .mail-read > .mr-thread { order: 4; flex: 1 1 auto !important; min-height: 120px; overflow-y: auto !important; } #page-mail .mail-read > .mr-composer, #page-mail .mail-read > .mr-qr, #page-mail .mail-read > .mr-reply { order: 6; flex: none !important; } #page-mail .mail-read > .mr-acts { display: none !important; } /* الأدوات: أيقوناتٌ هادئة، و«ردّ» وحده بالأكسنت */ #page-mail .mr-toolbar { background: var(--surface) !important; border-bottom: 1px solid var(--border) !important; box-shadow: none !important; padding: 10px 16px !important; gap: 6px !important; } #page-mail .mr-toolbar .mrt-btn { background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: var(--text-muted) !important; } #page-mail .mr-toolbar .mrt-btn:hover { background: var(--surface2) !important; border-color: var(--border) !important; color: var(--text) !important; } #page-mail .mr-toolbar .mrt-btn:active, #page-mail .mr-toolbar .mrt-main:active { transform: scale(.965); } #page-mail .mr-toolbar .mrt-btn.danger:hover { color: var(--text) !important; } #page-mail .mr-toolbar .mrt-drawer { color: var(--text) !important; } /* الموضوع */ #page-mail .mr-head { background: none !important; border: 0 !important; padding: 18px 22px 6px !important; box-shadow: none !important; } #page-mail .mr-subj { font-size: 21px !important; font-weight: 700 !important; line-height: 1.5 !important; color: var(--text) !important; } /* أفعال الذكاء: سطرٌ هادئ تحت الموضوع — لا شريطٌ ملوّن فوق كلّ شيء */ #page-mail .mail-read > .mr-kind { background: none !important; border: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 2px 22px 10px !important; gap: 6px !important; flex-wrap: wrap; align-items: center; } #page-mail .mr-kind .kic { display: none !important; } #page-mail .mr-kind .kt { font-size: 12px !important; font-weight: 600 !important; color: var(--text-muted) !important; margin-inline-end: 6px; } #page-mail .mr-kind .kt span { display: none !important; } #page-mail .mr-kind .mc-mini { height: 30px !important; padding: 0 11px !important; border-radius: 9px !important; font-size: 12px !important; font-weight: 500 !important; background: transparent !important; border: 1px solid var(--border) !important; color: var(--text) !important; box-shadow: none !important; } #page-mail .mr-kind .mc-mini:hover { background: var(--surface2) !important; } /* الخيط */ #page-mail .mr-thread { padding: 6px 22px 16px !important; display: flex; flex-direction: column; gap: 8px; } #page-mail .mr-msg { opacity: 1 !important; background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 14px !important; box-shadow: none !important; margin: 0 !important; } #page-mail .mr-msg.mr-latest { border-color: color-mix(in srgb, var(--text) 16%, var(--border)) !important; } #page-mail .mr-msg.mr-clps { padding-block: 10px !important; background: color-mix(in srgb, var(--surface2) 45%, var(--surface)) !important; } #page-mail .mr-msg.mr-clps .mr-people { display: none !important; } #page-mail .mr-msg.mr-clps:hover { border-color: color-mix(in srgb, var(--text) 22%, var(--border)) !important; } #page-mail .mr-av { background: var(--surface2) !important; color: var(--text-muted) !important; border: 1px solid var(--border) !important; } #page-mail .mr-from { font-weight: 600 !important; font-size: 14px !important; } #page-mail .mr-b { font-size: 14.5px !important; line-height: 1.85 !important; color: var(--text) !important; } /* الردّ السريع: صندوقٌ واحد أسفل القارئ */ #page-mail .mail-read > .mr-composer, #page-mail .mail-read > .mr-qr { margin: 0 !important; border-radius: 0 !important; border-inline: 0 !important; border-bottom: 0 !important; border-top: 1px solid var(--border) !important; box-shadow: none !important; background: var(--surface) !important; padding: 10px 16px 12px !important; } #page-mail .mr-qr textarea { min-height: 44px !important; border-radius: 12px !important; } /* الشاشة العريضة: صفحة البريد بارتفاع ما تحت الشريط العلويّ، والصندوق يأخذ الباقي — كان 100vh ناقص ٩٦ ثابتة والعنوان أطول، فيفيض القارئ ويُدفع صندوق الردّ تحت الشاشة (الخلل نفسه الذي أُصلح في الرسائل v569). العنوان في الشريط العلويّ أصلاً. */ @media (min-width: 769px) { #page-mail .form-header { display: none; } #page-mail.active { display: flex !important; flex-direction: column; box-sizing: border-box; height: calc(100dvh - var(--topbar-h, 56px) - var(--tf-chrome-h, 0px)); padding-block: 16px 14px !important; } #page-mail #mail-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } #page-mail .mail-shell { flex: 1 1 auto; height: auto !important; min-height: 0 !important; } /* شريط الإنشاء السريع العائم يغطّي صندوق الردّ أثناء القراءة */ body:has(#page-mail.active .mail-shell.reading) #tf-quickbar { display: none !important; } } /* شريط الأدوات سطرٌ واحد: تحت ١٥٠٠px تختفي التسمية «الملخّص» ورقم الموضع (الأسهم تبقى) */ @media (min-width: 769px) { #page-mail .mr-toolbar { flex-wrap: nowrap !important; overflow: hidden; } } @media (min-width: 769px) and (max-width: 1499px) { #page-mail .mr-toolbar .mrt-lbl, #page-mail .mr-toolbar .mr-pos, #page-mail .mr-toolbar .mr-nav-sep { display: none !important; } } /* الهاتف: القارئ شاشةٌ كاملة معتمة (السطح في الثيمات الزجاجيّة شفّاف فيظهر ما خلفه) */ @media (max-width: 768px) { #page-mail .mail-shell.reading .mail-read, #page-mail .mail-shell.reading .mr-toolbar, #page-mail .mail-shell.reading .mail-read > .mr-composer { background: var(--bg) !important; } } /* ═══════════════════════════════════════════════════════════════════ v574 — صور النشرة: مكانٌ واحد لكلّ نشرةٍ في يومها الهويّة: ورقة توثيق (فاصلٌ مثقّب بين التقارير، أبعادٌ بخطٍّ أحاديّ) ولوحة حيّة (LED لكلّ صورة). اللون المشبع لشيءٍ واحد: ما ينتظر هذا الشخص الآن (للمصمّم ما لم يُجهَّز، وللبثّ ما جهز ولم يُستلم). التحديد حلقةٌ محايدة لا لون. البطاقات أسطحٌ بلا ضباب، والشريط العائم وحده طبقة تحكّم. لا overflow:hidden (فخّ التمرير) — clip. ═══════════════════════════════════════════════════════════════════ */ .bi-page { padding: 4px 0 110px; } .bi-wrap { display: flex; flex-direction: column; gap: 12px; } .bi-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; } .bi-title { display: flex; flex-direction: column; gap: 3px; flex: 1 1 260px; min-width: 0; } .bi-title h1 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 20px; font-weight: 700; } .bi-sub { font-size: 12.5px; color: var(--text-muted); } .bi-day { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px; border: 1px solid var(--border); } .bi-day-l { font-size: 13.5px; font-weight: 600; padding: 0 6px; min-width: 7.5em; text-align: center; } html[dir="ltr"] .bi-chev { transform: scaleX(-1); } .bi-ib { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; padding: 0; border-radius: 10px; cursor: pointer; color: var(--text-muted); background: transparent; border: 1px solid transparent; transition: transform .08s, color .12s, border-color .12s; } .bi-ib:hover { color: var(--text); border-color: var(--border); background: color-mix(in srgb, var(--text) 5%, transparent); } .bi-ib:active { transform: scale(.965); } .bi-ib.sm { width: 26px; height: 26px; border-radius: 8px; } .bi-shows { display: flex; flex-wrap: wrap; gap: 8px; } .bi-show { display: inline-flex; align-items: baseline; gap: 7px; font: inherit; font-size: 13px; padding: 8px 12px; border-radius: 12px; cursor: pointer; color: var(--text-muted); background: var(--surface2, var(--surface)); border: 1px solid var(--border); transition: transform .08s, color .12s, border-color .12s; } .bi-show b { font-weight: 600; } .bi-show-t { font-size: 11.5px; } .bi-show em { font-style: normal; font-size: 11px; font-weight: 600; min-width: 1.6em; text-align: center; padding: 1px 6px; border-radius: 99px; border: 1px solid var(--border-strong, var(--border)); color: var(--text); } .bi-show:hover { color: var(--text); border-color: var(--border-strong, var(--border)); } .bi-show:active { transform: scale(.965); } .bi-show.on { color: var(--text); border-color: color-mix(in srgb, var(--text) 55%, var(--border)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent), 0 0 0 1px color-mix(in srgb, var(--text) 25%, transparent); } .bi-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .bi-sp { flex: 1 1 auto; } .bi-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 12px; border: 1px solid var(--border); } .bi-seg button { font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; color: var(--text-muted); background: transparent; transition: transform .08s, color .12s; } .bi-seg button em { font-style: normal; font-family: 'IBM Plex Mono', monospace; font-size: 11px; opacity: .85; } .bi-seg button:hover { color: var(--text); } .bi-seg button:active { transform: scale(.965); } .bi-seg button.on { color: var(--text); border-color: var(--border-strong, var(--border)); background: var(--surface2, var(--surface)); } /* الزرّ: زجاجٌ بحدٍّ لامعٍ داخليّ، والضغط انكماش لا نزول */ .bi-btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 12px; cursor: pointer; color: var(--text); background: linear-gradient(180deg, color-mix(in srgb, var(--text) 7%, transparent), color-mix(in srgb, var(--text) 3%, transparent)); border: 1px solid var(--border-strong, var(--border)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent); transition: transform .08s, border-color .12s; } .bi-btn:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); } .bi-btn:active { transform: scale(.965); } .bi-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } .bi-btn.pri { background: var(--accent); color: var(--accent-ink, #0a0e1a); border-color: color-mix(in srgb, var(--accent) 70%, #fff); } .bi-btn.quiet { color: var(--text-muted); background: transparent; box-shadow: none; border-color: transparent; } .bi-btn.quiet:hover { color: var(--text); border-color: var(--border); } .bi-btn.sm { padding: 6px 10px; font-size: 12.5px; } .bi-btn.busy { opacity: .7; pointer-events: none; } /* التقارير: فاصلٌ مثقّب كورقة النشرة */ .bi-main { display: flex; flex-direction: column; gap: 16px; } .bi-grp { padding-top: 12px; border-top: 1px dashed var(--border-strong, var(--border)); } .bi-grp-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--text-muted); } .bi-grp-h b { color: var(--text); font-weight: 700; font-size: 14px; min-width: 0; overflow-wrap: anywhere; } .bi-grp-h em { margin-inline-start: auto; font-style: normal; font-size: 12px; } .bi-grp.gen .bi-grp-h b { font-weight: 600; color: var(--text-muted); } .bi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-top: 10px; align-items: start; } .bi-card { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 14px; overflow: clip; border: 1px solid var(--border); background: linear-gradient(180deg, color-mix(in srgb, var(--text) 4.5%, transparent), color-mix(in srgb, var(--text) 1.5%, transparent)); transition: border-color .12s, box-shadow .12s; } .bi-card:hover { border-color: var(--border-strong, var(--border)); } .bi-card.on { border-color: color-mix(in srgb, var(--text) 70%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 30%, transparent); } .bi-card.up { opacity: .72; } .bi-th { position: relative; aspect-ratio: 16 / 10; background: #0b0d12; cursor: pointer; display: grid; place-items: center; } .bi-th img { width: 100%; height: 100%; object-fit: contain; display: block; } .bi-dim { position: absolute; bottom: 6px; inset-inline-end: 6px; font-size: 10px; padding: 2px 6px; border-radius: 4px; color: #e9e9ea; background: rgba(0, 0, 0, .62); } .bi-pick { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 1; width: 26px; height: 26px; padding: 0; display: grid; place-items: center; cursor: pointer; border-radius: 7px; border: 1.5px solid rgba(255, 255, 255, .75); background: rgba(0, 0, 0, .38); color: transparent; transition: transform .08s; } .bi-pick:active { transform: scale(.965); } .bi-card.on .bi-pick { background: var(--text); border-color: var(--text); color: var(--bg, #0f1115); } .bi-m { display: flex; flex-direction: column; gap: 6px; padding: 10px 11px 4px; min-width: 0; flex: 1; } .bi-nm { display: flex; align-items: center; gap: 4px; min-width: 0; } .bi-nm b { font-size: 13.5px; font-weight: 600; min-width: 0; flex: 1; white-space: nowrap; overflow: clip; text-overflow: ellipsis; } .bi-nm-in { font: inherit; font-size: 13px; width: 100%; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--accent); background: var(--surface2, var(--surface)); color: var(--text); box-sizing: border-box; } .bi-st { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-muted); } .bi-led { width: 8px; height: 8px; border-radius: 50%; flex: none; border: 1.5px solid var(--border-strong, var(--border)); background: transparent; } .bi-card.st-ready .bi-led { border-color: color-mix(in srgb, var(--success, #2ecc71) 70%, transparent); background: color-mix(in srgb, var(--success, #2ecc71) 40%, transparent); } .bi-card.st-taken .bi-led { border-color: var(--text-muted); background: var(--text-muted); } .bi-card.attn .bi-led { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 8px var(--accent); } .bi-card.attn .bi-st span { color: var(--text); } @media (prefers-reduced-motion: no-preference) { .bi-card.attn .bi-led { animation: woPulse 1.8s ease-in-out infinite; } } /* المقاسات سطورٌ كجدول مواصفات: الاسم أوّل السطر والأبعاد آخره — لا تلتفّ */ .bi-szs { display: flex; flex-direction: column; gap: 4px; } .bi-sz { display: flex; align-items: center; gap: 6px; width: 100%; box-sizing: border-box; font: inherit; font-size: 11.5px; padding: 5px 8px; border-radius: 8px; cursor: pointer; white-space: nowrap; text-align: start; color: var(--text); background: var(--surface2, var(--surface)); border: 1px solid var(--border); transition: transform .08s, border-color .12s; } .bi-sz span { font-weight: 600; min-width: 0; overflow: clip; text-overflow: ellipsis; } .bi-sz bdi { margin-inline-start: auto; color: var(--text-muted); font-size: 11px; flex: none; } .bi-sz:hover { border-color: var(--border-strong, var(--border)); } .bi-sz:active { transform: scale(.965); } .bi-note { font-size: 12px; line-height: 1.6; padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--text) 5%, transparent); overflow-wrap: anywhere; } .bi-by { font-size: 11px; color: var(--text-muted); } .bi-acts { display: flex; justify-content: flex-end; gap: 2px; padding: 0 6px 6px; } .bi-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 16px; text-align: center; border-radius: 16px; border: 1px dashed var(--border-strong, var(--border)); color: var(--text-muted); font-size: 13px; } .bi-empty b { color: var(--text); font-size: 14.5px; font-weight: 600; } .bi-empty.sm { padding: 18px 16px; } .bi-noimg { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--border); font-size: 12.5px; } .bi-noimg > b { font-weight: 600; color: var(--text-muted); } .bi-noimg > div { display: flex; flex-wrap: wrap; gap: 6px; } .bi-noimg span { padding: 4px 9px; border-radius: 99px; border: 1px solid var(--border); overflow-wrap: anywhere; } .bi-skel .bi-card { height: 236px; border-style: dashed; background: color-mix(in srgb, var(--text) 3%, transparent); } @media (prefers-reduced-motion: no-preference) { .bi-skel .bi-card { animation: biSkel 1.4s ease-in-out infinite; } } @keyframes biSkel { 50% { opacity: .45; } } /* الشريط العائم — طبقة التحكّم الوحيدة في الصفحة */ .bi-selbar { position: fixed; z-index: 150; bottom: 18px; inset-inline: 0; margin-inline: auto; width: fit-content; max-width: calc(100% - 32px); box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--border-strong, var(--border)); background: color-mix(in srgb, var(--surface, #16181f) 88%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent), 0 18px 40px -18px rgba(0, 0, 0, .6); } .bi-selbar[hidden] { display: none; } body.bi-sel-on:has(#page-bimages.active) #tf-quickbar { display: none !important; } /* شريط التحديد مكان شريط الإنشاء السريع ما دام التحديد قائماً */ .bi-selbar > b { font-size: 13px; font-weight: 600; padding-inline: 4px; } /* النوافذ */ .bi-ov { position: fixed; inset: 0; z-index: 2147482000; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 24px; background: rgba(6, 8, 14, .55); overflow-y: auto; } .bi-box { width: min(760px, 100%); border-radius: 18px; color: var(--text); background: linear-gradient(var(--surface, #16181f), var(--surface, #16181f)), var(--bg, #0f1115); border: 1px solid var(--border-strong, var(--border)); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6); } .bi-box.sm { width: min(560px, 100%); } .bi-box-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 14px 16px 14px 18px; border-bottom: 1px solid var(--border); } .bi-box-h > b { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; min-width: 0; } .bi-hint { font-size: 12px; color: var(--text-muted); flex: 1 1 200px; min-width: 0; } .bi-box-m { padding: 14px 18px 8px; display: flex; flex-direction: column; gap: 12px; } .bi-box-f { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--border); } .bi-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; } .bi-f > label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .bi-f > label i { font-style: normal; font-weight: 500; } .bi-f input, .bi-f select { font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2, var(--surface)); color: var(--text); min-width: 0; box-sizing: border-box; width: 100%; } .bi-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 14px; border-radius: 14px; cursor: pointer; text-align: center; border: 1.5px dashed var(--border-strong, var(--border)); color: var(--text-muted); font-size: 12px; transition: border-color .12s, background .12s; } .bi-drop b { color: var(--text); font-size: 13.5px; font-weight: 600; } .bi-drop:hover, .bi-drop.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); } .bi-flist { display: flex; flex-direction: column; gap: 8px; } .bi-flist:empty { display: none; } .bi-fr { display: flex; align-items: flex-end; gap: 10px; padding: 8px; border-radius: 12px; border: 1px solid var(--border); } .bi-fr > img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; background: #0b0d12; } .bi-zs { display: flex; flex-wrap: wrap; gap: 8px; } .bi-zc { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; padding: 8px 12px; border-radius: 12px; cursor: pointer; color: var(--text-muted); background: var(--surface2, var(--surface)); border: 1px solid var(--border); transition: transform .08s, color .12s, border-color .12s; } .bi-zc > i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong, var(--border)); color: transparent; } .bi-zc b { font-weight: 600; } .bi-zc bdi { font-size: 12px; } .bi-zc:active { transform: scale(.965); } .bi-zc.on { color: var(--text); border-color: color-mix(in srgb, var(--text) 55%, var(--border)); } .bi-zc.on > i { background: var(--text); border-color: var(--text); color: var(--bg, #0f1115); } .bi-zadd { display: flex; align-items: center; gap: 6px; direction: ltr; justify-content: flex-end; } /* العرض × الارتفاع يُقرآن كما تُكتب الأبعاد في كلّ مكان: من اليسار */ .bi-zadd input { width: 92px; flex: none; } .bi-steps, .bi-sh-note { margin: 0; font-size: 12px; line-height: 1.7; color: var(--text-muted); } .bi-sh-note { padding: 4px 16px 12px; } .bi-phone { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); } @media (pointer: coarse) { .bi-btn, .bi-show, .bi-seg button, .bi-zc { min-height: 42px; } .bi-ib { width: 42px; height: 42px; } .bi-sz { min-height: 40px; } .bi-ib.sm { width: 40px; height: 40px; } .bi-pick { width: 40px; height: 40px; top: 4px; inset-inline-start: 4px; } } @media (max-width: 768px) { /* الرأس على الهاتف: سطرٌ للعنوان واليوم، وسطرٌ للنشرات، وسطرٌ للحال، وسطرٌ للأفعال — والصور تبدأ أعلى */ .bi-head { flex-wrap: nowrap; } .bi-title { flex: 1 1 auto; } .bi-title h1 { font-size: 18px; } .bi-sub { display: none; } .bi-day-l { min-width: 4.5em; font-size: 13px; } .bi-seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; box-sizing: border-box; } .bi-seg::-webkit-scrollbar { display: none; } .bi-seg button { flex: none; white-space: nowrap; } .bi-bar .bi-sp { display: none; } .bi-bar > .bi-btn { flex: 1 1 auto; justify-content: center; padding: 8px 10px; font-size: 12.5px; } .bi-shows { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; } .bi-shows::-webkit-scrollbar { display: none; } .bi-show { flex: none; } .bi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .bi-m { padding: 8px 9px 2px; } .bi-selbar { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } body:has(#page-bimages.active) #chat-widget { display: none !important; } /* كما في البريد: الفقاعة كانت تغطّي أفعال البطاقة */ .bi-ov { padding: 0; } .bi-box, .bi-box.sm { border-radius: 0; min-height: 100%; width: 100%; } } @media (max-width: 400px) { .bi-grid { grid-template-columns: minmax(0, 1fr); } } /* ═══════════════════════════════════════════════════════════════════ v575 — الطلب الحرّ وLVO: إفصاحٌ تدريجيّ · ذاكرة · لصقٌ ذكيّ · إبرازٌ سريع الإفصاح: أزرارٌ صغيرة محايدة مكان الحقول الفارغة. اللصق الذكيّ: شريطٌ هادئ تحت النصّ بفعلٍ واحد. الإبراز: قلم تعليمٍ حقيقيّ — لونه للمعنى (هذا يُقرأ) لا للزينة، والنصّ فوقه بلونه. ═══════════════════════════════════════════════════════════════════ */ #nr-extra-body [data-pd][hidden] { display: none !important; } .nr-pd-wait { display: none !important; } .nr-pd-add { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; } .nr-pd-add[hidden] { display: none; } .nr-pd-chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 99px; cursor: pointer; color: var(--text-muted); background: transparent; border: 1px dashed var(--border-strong, var(--border)); transition: transform .08s, color .12s, border-color .12s; } .nr-pd-chip:hover { color: var(--text); border-style: solid; } .nr-pd-chip:active { transform: scale(.965); } .nr-mem-hint { display: block; margin-top: 4px; font-size: 11px; color: var(--text-muted); } .nr-mem-hint::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-inline-end: 6px; vertical-align: 1px; border: 1.5px solid var(--border-strong, var(--border)); } /* اللصق الذكيّ */ .nr-smart { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border-strong, var(--border)); background: color-mix(in srgb, var(--text) 4%, transparent); font-size: 12.5px; } .nr-smart[hidden] { display: none; } .nr-smart-t { display: inline-flex; align-items: center; gap: 6px; } .nr-smart-t b { font-weight: 600; } .nr-smart-c { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--border); color: var(--text); } .nr-smart-c bdi { font-size: 11.5px; } .nr-smart-sp { flex: 1 1 auto; } .nr-smart-go { font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 10px; cursor: pointer; color: var(--accent-ink, #0a0e1a); background: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 70%, #fff); transition: transform .08s; } .nr-smart-go:active, .nr-smart-no:active { transform: scale(.965); } .nr-smart-no { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; cursor: pointer; color: var(--text-muted); background: transparent; border: 1px solid transparent; } .nr-smart-no:hover { color: var(--text); border-color: var(--border); } /* بطاقة LVO */ .pv-lvo { padding-bottom: 9px; } .pv-lvo-hl { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .pv-lvo-hl .pv-hl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: 0; } .pv-lvo-more { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 8px; } .pv-lvo-more > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; cursor: pointer; list-style: none; font-size: 12px; font-weight: 600; color: var(--text-muted); } .pv-lvo-more > summary::-webkit-details-marker { display: none; } .pv-lvo-more > summary::before { content: '+'; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--border-strong, var(--border)); font-size: 12px; line-height: 1; } .pv-lvo-more[open] > summary::before { content: '−'; } .pv-lvo-more > summary em { font-style: normal; font-weight: 500; font-size: 11.5px; } .pv-mem { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; } .pv-mem button { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; font: inherit; font-size: 11.5px; padding: 4px 9px; border-radius: 99px; cursor: pointer; color: var(--text-muted); background: transparent; border: 1px dashed var(--border-strong, var(--border)); transition: transform .08s; } .pv-mem button bdi { overflow: clip; text-overflow: ellipsis; white-space: nowrap; min-width: 0; direction: ltr; } .pv-mem button:hover { color: var(--text); border-style: solid; } .pv-mem button:active { transform: scale(.965); } /* المُعلّم: الوضعان والنصّ */ .hl-modes { display: inline-flex; gap: 3px; padding: 3px; margin-inline-start: auto; margin-inline-end: 8px; border-radius: 11px; border: 1px solid var(--border); } .hl-mode { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 8px; cursor: pointer; color: var(--text-muted); background: transparent; border: 1px solid transparent; transition: transform .08s; } .hl-mode:active { transform: scale(.965); } .hl-mode.on { color: var(--text); background: var(--surface2); border-color: var(--border-strong, var(--border)); } .hl-tx-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; } .hl-tx-in { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; } .hl-tx-in > label { font-size: 12px; font-weight: 600; color: var(--text-muted); } .hl-tx-in textarea { flex: 1; min-height: 220px; resize: vertical; font: inherit; font-size: 14px; line-height: 1.9; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); box-sizing: border-box; } .hl-tx-in .btn-submit { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; } .hl-tx-warn { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--text-muted); } .hl-tx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px; color: var(--text-muted); } .hl-tx-bar > span { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 260px; } .hl-tx-b { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 9px; cursor: pointer; color: var(--text); background: transparent; border: 1px solid var(--border); transition: transform .08s; } .hl-tx-b:active { transform: scale(.965); } .hl-tx { flex: 1; min-height: 200px; overflow-y: auto; overscroll-behavior: contain; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 2.05; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); cursor: text; outline: none; } .hl-tx:focus-visible { border-color: var(--border-strong, var(--border)); } .hl-tx::selection, .hl-tx *::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); } .hl-tx-m { color: inherit; background: color-mix(in srgb, var(--accent) 34%, transparent); border-radius: 3px; padding: 1px 0; cursor: pointer; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .hl-tx-m:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text) 45%, transparent); } .hl-tx-item { align-items: flex-start; } .hl-tx-item .hl-item-n { background: color-mix(in srgb, var(--accent) 70%, #000); color: var(--accent-ink, #0a0e1a); } .hl-tx-item .hl-item-note { font-weight: 500; } .hl-modal-tx .hl-foot .hl-save { width: auto; display: inline-flex; align-items: center; gap: 7px; padding: 9px 20px; } /* الحفظ أسفل يمين، بعرض فعله */ @media (pointer: coarse) { .nr-pd-chip, .hl-mode, .hl-tx-b, .nr-smart-go, .pv-mem button { min-height: 40px; } .nr-smart-no { width: 40px; height: 40px; } } /* ═══════════════════════════════════════════════════════════════════ v576 — المساعد بمعيارٍ عالميّ: عمودٌ في الوسط · كاتبٌ بطل · أختام · ضوء التفكير · لوح · مكتبة التسلسل: قواعد AIP_CSS تُحقن وقت التشغيل بعد هذا الملفّ، فالمحدِّد هنا يبدأ بـbody ليغلب بلا !important. طبقة التحكّم الوحيدة زجاجاً: الكاتب — والمحادثة سطحٌ مفتوح بلا زجاج (لا زجاج داخل زجاج). اللون المشبع لشيءٍ واحد: زرّ الإرسال وضوء التفكير. فقاعتك محايدة. ═══════════════════════════════════════════════════════════════════ */ body:has(#page-ai.active) #tf-quickbar { display: none !important; } /* «مساعد» في صفحة المساعد نفسها — ويغطّي الكاتب */ @media (max-width: 768px) { body:has(#page-ai.active) #chat-widget { display: none !important; } } body.aip-canvas-on:has(#page-ai.active) #chat-widget { display: none !important; } /* اللوح في الزاوية نفسها */ /* فقاعة الدردشة تغطّي زرّ الإرسال على الهاتف — كما في البريد */ body #page-ai .ai-page-hero { display: none; } body #page-ai .ai-page-chat { background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0 0 12px; gap: 12px; min-height: calc(100dvh - var(--topbar-h, 56px) - 40px - var(--tf-chrome-h, 0px)); display: flex; flex-direction: column; } body #page-ai .ai-page-messages { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; gap: 22px; padding: 18px max(8px, calc((100% - 820px) / 2)) 8px; } /* الرسائل: ردّ المساعد نصٌّ مفتوح بعرض العمود، ورسالتك فقاعةٌ محايدة */ body #page-ai .aip-msg { max-width: 100%; font-size: 14.5px; line-height: 2; } body #page-ai .aip-msg.ai { align-self: stretch; background: transparent; border: 0; padding: 0; border-radius: 0; } body #page-ai .aip-msg.user { align-self: flex-start; max-width: min(620px, 88%); padding: 10px 14px 12px; border-radius: 16px; background: var(--surface2, var(--surface)); color: var(--text); border: 1px solid var(--border-strong, var(--border)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent); } [dir="ltr"] body #page-ai .aip-msg.user { align-self: flex-end; } body #page-ai .aip-msg.thinking { font-style: normal; opacity: 1; } /* الختم التسلسليّ — لغة توثيق البثّ */ .aip-stamp { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 10.5px; line-height: 1.4; color: var(--text-muted); white-space: nowrap; } .aip-stamp b { font-weight: 600; letter-spacing: .3px; } .aip-stamp span + span::before { content: '·'; margin-inline-end: 8px; opacity: .6; } .aip-led { width: 7px; height: 7px; border-radius: 50%; flex: none; border: 1.5px solid var(--border-strong, var(--border)); background: transparent; } .aip-msg.streaming .aip-stamp .aip-led, .aip-msg.thinking .aip-stamp .aip-led, .aip-led.on { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent), 0 0 8px var(--accent); } .aip-think { display: inline-flex; align-items: center; gap: 9px; color: var(--text-muted); font-size: 13px; } .aip-think .aip-led { display: none; } .aip-vu { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; } .aip-vu i { display: block; width: 3px; height: 30%; border-radius: 1px; background: color-mix(in srgb, var(--accent) 75%, var(--text)); } @media (prefers-reduced-motion: no-preference) { .aip-msg.streaming .aip-stamp .aip-led, .aip-msg.thinking .aip-stamp .aip-led { animation: woPulse 1.6s ease-in-out infinite; } .aip-vu i { animation: aipVu 1s ease-in-out infinite; } .aip-vu i:nth-child(2) { animation-delay: .15s; } .aip-vu i:nth-child(3) { animation-delay: .3s; } .aip-vu i:nth-child(4) { animation-delay: .45s; } } @keyframes aipVu { 0%, 100% { height: 25%; } 50% { height: 100%; } } /* الكاتب: كبسولةٌ واحدة — الكتابة بعرضها كاملاً، وتحتها شريط أدوات: المرفق والمكتبة والتوسيع والأوضاع في البداية، والمحرّك والإرسال في النهاية. رقائق السياق (الطلب · الملفّ) فوق الكتابة. الصفّ والشريط يذوبان في الكبسولة (display: contents) فيبقى الماركب وكلّ ما يستعلم عنه كما هو. */ body #page-ai .aip-composer { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: min(820px, 100%); margin-inline: auto; box-sizing: border-box; padding: 10px 10px 8px; border-radius: 22px; border: 1px solid var(--border-strong, var(--border)); background: color-mix(in srgb, var(--surface, #fff) 86%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent), 0 16px 40px -24px rgba(0, 0, 0, .45); transition: border-color .15s; } body #page-ai .aip-composer:focus-within { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); } body #page-ai .aip-composer > .ai-page-input-row, body #page-ai .aip-composer > .aip-bar { display: contents; } body #page-ai .aip-composer .aip-chip { order: 0; } body #page-ai .aip-composer #ai-page-input { order: 1; flex: 1 1 100%; width: 100%; box-sizing: border-box; min-height: 52px; max-height: 220px; margin: 0; padding: 6px 8px 4px; height: 52px; font-size: 14.5px; line-height: 1.9; background: transparent; border: 0; box-shadow: none; resize: none; } body #page-ai .aip-composer .aip-attach, body #page-ai .aip-composer .aip-libbtn, body #page-ai .aip-composer .ai-expand-btn { width: 40px; height: 40px; flex: none; align-self: center; margin: 0; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 1px dashed var(--border); background: transparent; color: var(--text-muted); font-size: 0; transition: transform .08s, color .12s, border-color .12s; } body #page-ai .aip-composer .aip-attach { order: 2; } body #page-ai .aip-composer .aip-libbtn { order: 3; } body #page-ai .aip-composer .ai-expand-btn { order: 4; } body #page-ai .aip-composer .aip-attach:hover, body #page-ai .aip-composer .aip-libbtn:hover, body #page-ai .aip-composer .ai-expand-btn:hover { color: var(--text); border-style: solid; border-color: var(--border-strong, var(--border)); } body #page-ai .aip-composer .aip-attach:active, body #page-ai .aip-composer .aip-libbtn:active, body #page-ai .aip-composer .ai-expand-btn:active { transform: scale(.965); } body #page-ai .aip-composer .aip-modes { order: 5; margin-inline-start: 4px; } body #page-ai .aip-composer .aip-eng { order: 6; margin: 0; margin-inline-start: auto; align-self: center; width: auto; max-width: 220px; min-height: 36px; font-size: 11.5px; } body #page-ai .aip-composer .btn-submit { order: 7; align-self: center; margin: 0; } /* الكاتب البطل: المحادثة فارغة — التحيّة ثمّ الكاتب ثمّ البدايات، في الوسط */ body #page-ai .ai-page-chat.aip-hero { justify-content: center; gap: 14px; } body #page-ai .ai-page-chat.aip-hero #ai-page-messages, body #page-ai .ai-page-chat.aip-hero #ai-page-empty { display: contents; } body #page-ai .aip-hero .aip-hello { order: 1; align-self: center; margin-top: 4vh; } body #page-ai .aip-hero .aip-hello-t { order: 2; align-self: center; font-size: 26px; font-weight: 700; text-align: center; } body #page-ai .aip-hero .aip-hello-s { order: 3; align-self: center; text-align: center; margin-bottom: 8px; } body #page-ai .aip-hero .aip-composer { order: 4; } body #page-ai .aip-hero .aip-starters { order: 5; align-self: center; width: min(820px, 100%); grid-template-columns: repeat(2, minmax(0, 1fr)); } body #page-ai .aip-hero .aip-composer #ai-page-input { min-height: 76px; } /* الأوامر المائلة */ .aip-slash { position: absolute; inset-inline: 10px; bottom: calc(100% + 8px); z-index: 30; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 14px; border: 1px solid var(--border-strong, var(--border)); background: linear-gradient(var(--surface, #fff), var(--surface, #fff)), var(--bg, #fff); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .5); } .aip-slash[hidden] { display: none; } .aip-sl { display: grid; grid-template-columns: minmax(88px, auto) auto 1fr; align-items: baseline; gap: 10px; width: 100%; text-align: start; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--text); } .aip-sl b { font-size: 12px; font-weight: 600; color: var(--text-muted); direction: ltr; unicode-bidi: isolate; text-align: start; } .aip-sl span { font-weight: 600; white-space: nowrap; } .aip-sl em { font-style: normal; font-size: 12px; color: var(--text-muted); overflow: clip; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .aip-sl.on, .aip-sl:hover { background: var(--surface2, var(--surface)); border-color: var(--border); } .aip-sl-foot { padding: 6px 10px 2px; font-size: 11px; color: var(--text-muted); border-top: 1px solid var(--border); margin-top: 4px; } /* اللوح */ .aip-canvas { position: fixed; z-index: 120; top: calc(var(--topbar-h, 56px) + 14px); bottom: 16px; inset-inline-end: 16px; width: min(460px, 38vw); display: flex; flex-direction: column; gap: 8px; padding: 12px; box-sizing: border-box; border-radius: 18px; border: 1px solid var(--border-strong, var(--border)); background: linear-gradient(var(--surface, #fff), var(--surface, #fff)), var(--bg, #fff); box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .55); } body.aip-canvas-on #page-ai .ai-page-wrap { padding-inline-end: calc(min(460px, 38vw) + 18px); } .aip-canvas.min { display: none; } body #page-ai .aip-composer .aip-cvchip { order: 0; display: inline-flex; align-items: center; gap: 2px; max-width: 100%; border-radius: 99px; border: 1px solid var(--border-strong, var(--border)); background: var(--surface2, var(--surface)); } .aip-cvchip-o { display: inline-flex; align-items: center; gap: 6px; min-width: 0; min-height: 30px; padding: 3px 11px; border: 0; background: transparent; border-radius: 99px; font: inherit; font-size: 11.5px; color: var(--text); cursor: pointer; transition: transform .08s; } .aip-cvchip-o b { font-weight: 600; overflow: clip; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; } .aip-cvchip-x { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; margin-inline-end: 2px; border-radius: 50%; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; transition: transform .08s; } .aip-cvchip-x:hover { color: var(--text); background: var(--surface, #fff); } .aip-cvchip-o:active, .aip-cvchip-x:active { transform: scale(.965); } .aip-cv-h { display: flex; align-items: center; gap: 8px; } .aip-cv-title { flex: 1; min-width: 0; font: inherit; font-size: 14px; font-weight: 700; padding: 6px 8px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text); } .aip-cv-title:hover, .aip-cv-title:focus { border-color: var(--border); background: var(--surface2, var(--surface)); outline: none; } .aip-cv-n { font-size: 11px; color: var(--text-muted); white-space: nowrap; } .aip-cv-x { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border-radius: 10px; cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--text-muted); transition: transform .08s; } .aip-cv-x:hover { color: var(--text); border-color: var(--border); } .aip-cv-x:active { transform: scale(.965); } .aip-cv-ta { flex: 1; min-height: 0; resize: none; font: inherit; font-size: 15px; line-height: 2; padding: 14px 16px; border-radius: 12px; box-sizing: border-box; border: 1px solid var(--border); background: var(--surface2, var(--surface)); color: var(--text); } .aip-cv-ta:focus { outline: none; border-color: var(--border-strong, var(--border)); } .aip-cv-note { font-size: 11.5px; line-height: 1.7; color: var(--text-muted); } .aip-cv-f { display: flex; flex-wrap: wrap; gap: 8px; } .aip-cv-b { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-radius: 11px; cursor: pointer; color: var(--text); background: linear-gradient(180deg, color-mix(in srgb, var(--text) 7%, transparent), color-mix(in srgb, var(--text) 3%, transparent)); border: 1px solid var(--border-strong, var(--border)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent); transition: transform .08s; } .aip-cv-b:active { transform: scale(.965); } .aip-cv-b.pri { background: var(--accent); color: var(--accent-ink, #0a0e1a); border-color: color-mix(in srgb, var(--accent) 70%, #fff); } /* المكتبة */ .aip-lib-ov { position: fixed; inset: 0; z-index: 2147482000; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 24px; background: rgba(6, 8, 14, .5); overflow-y: auto; } .aip-lib { width: min(660px, 100%); max-height: 80vh; display: flex; flex-direction: column; border-radius: 18px; overflow: clip; border: 1px solid var(--border-strong, var(--border)); background: linear-gradient(var(--surface, #fff), var(--surface, #fff)), var(--bg, #fff); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6); } .aip-lib-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); } .aip-lib-h > b { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; white-space: nowrap; } .aip-lib-h input { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2, var(--surface)); color: var(--text); } .aip-lib-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 4px; } .aip-lib-tab { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 99px; cursor: pointer; color: var(--text-muted); background: transparent; border: 1px solid var(--border); transition: transform .08s; } .aip-lib-tab em { font-style: normal; font-size: 10.5px; font-weight: 500; padding: 0 6px; border-radius: 99px; border: 1px solid var(--border); } .aip-lib-tab.on { color: var(--text); border-color: color-mix(in srgb, var(--text) 50%, var(--border)); background: var(--surface2, var(--surface)); } .aip-lib-tab:active, .aip-lib-it:active { transform: scale(.965); } .aip-lib-list { display: flex; flex-direction: column; gap: 6px; padding: 8px 14px 14px; overflow-y: auto; overscroll-behavior: contain; } .aip-lib-it { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: start; font: inherit; font-size: 13.5px; line-height: 1.7; padding: 10px 12px; border-radius: 12px; cursor: pointer; color: var(--text); background: transparent; border: 1px solid var(--border); transition: transform .08s, border-color .12s; } .aip-lib-it:hover { border-color: var(--border-strong, var(--border)); background: var(--surface2, var(--surface)); } .aip-lib-it em { font-style: normal; font-size: 11px; color: var(--text-muted); } .aip-lib-none { padding: 20px; text-align: center; font-size: 13px; color: var(--text-muted); } @media (pointer: coarse) { .aip-sl, .aip-lib-tab, .aip-lib-it, .aip-cv-b { min-height: 44px; } .aip-cv-x { width: 44px; height: 44px; } .aip-cvchip-o { min-height: 40px; } .aip-cvchip-x { width: 40px; height: 40px; } } @media (max-width: 900px) { .aip-canvas { top: 0; bottom: 0; inset-inline: 0; width: auto; border-radius: 0; z-index: 2147481000; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); } body.aip-canvas-on #page-ai .ai-page-wrap { padding-inline-end: 0; } body #page-ai .ai-page-messages { padding-inline: 4px; } body #page-ai .aip-composer .aip-modes { order: 0; flex: 1 1 100%; margin: 0; } body #page-ai .aip-composer .aip-mode { flex: 1; } body #page-ai .aip-composer .aip-eng { max-width: 132px; } body #page-ai .aip-hero .aip-starters { grid-template-columns: minmax(0, 1fr); } } /* تحت ٨٦٠ ينتهي عمود الشريط (الشبكة في v142) — فوقها يبقى عموداً */ @media (max-width: 859px) { /* الشريط الجانبيّ صفٌّ واحد فوق المحادثة لا عمودٌ يدفع الكاتب خارج الشاشة */ body #page-ai .ai-tabs, body.aip-fold #page-ai .ai-tabs { position: relative; top: auto; flex-direction: row; flex-wrap: wrap; align-items: center; min-width: 0; width: auto; padding: 6px; gap: 6px; margin-bottom: 10px; border-radius: 14px; } body #page-ai .ai-tab { flex: 1 1 0; width: auto; min-width: 0; justify-content: center; padding: 8px 10px; min-height: 40px; } body.aip-fold #page-ai .ai-tab span { display: inline; } body #page-ai .aip-foldbtn { width: 40px; height: 40px; flex: none; padding: 0; } body #page-ai .aip-foldbtn span { display: none; } /* الاسم في aria-label — الصفّ لا يتّسع لثلاث تسميات */ /* محادثاتي: الرأس و«جديدة» في سطرٍ واحد، والقائمة تحتهما بسقفٍ منخفض */ body #page-ai .ai-page-side { order: 5; flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 0; } body #page-ai .ai-page-side .aps-head { flex: 1 1 auto; } body #page-ai .ai-page-side .aps-new { width: auto; flex: none; min-height: 40px; padding-inline: 14px; } body #page-ai .ai-page-side .apc-list { flex: 1 1 100%; max-height: 132px; } body #page-ai .ai-page-chat { min-height: 0; } /* اللوح اللوحيّ بلا شريطٍ سفليّ: الرسائل تتمرّر داخلها فيبقى الكاتب تحتها على الشاشة */ body #page-ai .ai-page-chat:not(.aip-hero) .ai-page-messages { max-height: calc(100dvh - 460px); min-height: 240px; } .aip-sl { grid-template-columns: auto 1fr; } .aip-sl em { grid-column: 1 / -1; } .aip-lib-ov { padding: 0; } .aip-lib { max-height: none; min-height: 100%; border-radius: 0; } } /* الهاتف: الصفحة لا تتمرّر في حاويةٍ تلتصق بها العناصر (html وbody كلاهما overflow) — فالكاتب ثابتٌ فوق الشريط السفليّ، والمحادثة تُخلي له مكانه. في البداية (الكاتب البطل) يبقى في مجراه تحت التحيّة. */ @media (max-width: 768px) { body #page-ai .ai-page-chat:not(.aip-hero) .ai-page-messages { max-height: none; min-height: 0; } body #page-ai .ai-page-chat:not(.aip-hero) { padding-bottom: 196px; } body #page-ai .ai-page-chat:not(.aip-hero) .aip-composer { position: fixed; z-index: 150; inset-inline: 10px; width: auto; margin: 0; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(var(--surface, #fff), var(--surface, #fff)), var(--bg, #fff); } } /* ═══════════════════════════════════════════════════════════════════ v578 — تطبيق سطح المكتب 1.2: أدوات المسار في نافذتي التسليم · المعاينة · إلى Avid تظهر في التطبيق وحده (tfDesktop.caps). الأزرار محايدة — المشبع في النافذة زرّ الإرسال. ═══════════════════════════════════════════════════════════════════ */ .dpt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; } .dpt-b { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 11px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--text); background: linear-gradient(180deg, color-mix(in srgb, var(--text) 7%, transparent), color-mix(in srgb, var(--text) 3%, transparent)); border: 1px solid var(--border-strong, var(--border)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent); transition: transform .08s; } .dpt-b:active { transform: scale(.965); } .dpt-b[aria-pressed="true"] { border-color: color-mix(in srgb, var(--text) 45%, var(--border)); background: var(--surface2, var(--surface)); } .dpt-s { flex: 1 1 100%; min-height: 1em; font-size: 12px; font-weight: 600; color: var(--text-muted); overflow-wrap: anywhere; } .dpt-s.ok { color: var(--success, #2ecc71); } .dpt-s.warn { color: var(--accent-fg, var(--accent)); } .dpt-s.err { color: var(--danger, #e04545); } .rq-pathx { display: inline-flex; gap: 3px; margin-inline-start: 4px; vertical-align: middle; } .rq-px { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border-radius: 8px; cursor: pointer; color: var(--text-muted); background: transparent; border: 1px solid var(--border); transition: transform .08s, color .12s; } .rq-px:hover { color: var(--text); border-color: var(--border-strong, var(--border)); } .rq-px:active { transform: scale(.965); } /* المعاينة: خلفيّةٌ مصمتة على الجسم مباشرةً — لا زجاج ولا سلفٌ عليه مرشِّح */ .rqm-ov { position: fixed; inset: 0; z-index: 2147482500; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(6, 8, 14, .78); } .rqm-ov[hidden] { display: none; } .rqm { width: min(960px, 100%); max-height: 92vh; display: flex; flex-direction: column; border-radius: 16px; border: 1px solid var(--border-strong, var(--border)); background: linear-gradient(var(--surface, #111), var(--surface, #111)), var(--bg, #000); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7); } .rqm-h { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); } .rqm-h b { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: clip; text-overflow: ellipsis; text-align: start; } .rqm-x { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--text-muted); transition: transform .08s; } .rqm-x:hover { color: var(--text); border-color: var(--border); } .rqm-x:active { transform: scale(.965); } .rqm-b { padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 180px; justify-content: center; } .rqm-m { display: block; max-width: 100%; max-height: 72vh; border-radius: 10px; background: #000; } audio.rqm-m { width: 100%; background: transparent; } .rqm-wait, .rqm-err { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--text-muted); text-align: center; line-height: 1.8; } .rqm-err { color: var(--text); } .rqm-bar { width: min(360px, 80vw); height: 6px; border-radius: 3px; background: var(--surface2, var(--border)); } .rqm-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--accent); transition: width .3s; } .rqm-note { font-size: 11.5px; color: var(--text-muted); } .rqa-chip { position: fixed; z-index: 2147482400; inset-inline-start: 18px; bottom: 18px; padding: 9px 14px; border-radius: 12px; font-size: 12.5px; font-weight: 600; color: var(--text); border: 1px solid var(--border-strong, var(--border)); background: linear-gradient(var(--surface, #111), var(--surface, #111)), var(--bg, #000); box-shadow: 0 16px 40px -20px rgba(0, 0, 0, .6); font-variant-numeric: tabular-nums; } .rqa-chip[hidden] { display: none; } @media (pointer: coarse) { .dpt-b { min-height: 44px; } .rq-px { width: 40px; height: 40px; } .rqm-x { width: 44px; height: 44px; } } /* ═══════════════════════════════════════════════════════════════════ v579 — المساعد: الصفحة بارتفاع الشاشة، والتمرير داخل المحادثة وحدها محمد: «بوكس التشات بينزل تحت والسكرول بتحسّو للبرنامج مش داخل التشات». كانت المحادثة تطول مع الرسائل فتطول الصفحة ويهرب الكاتب. الآن على المكتب ارتفاع المحادثة = الشاشة ناقص الشريط وهامش الصفحة، الرسائل تمرّر داخلها، والكاتب ثابتٌ تحت. زرّ «↓ الأحدث» يظهر حين تصعد تقرأ ويأتي جديد. ═══════════════════════════════════════════════════════════════════ */ @media (min-width: 860px) { body #page-ai .ai-page-chat { height: calc(100dvh - var(--topbar-h, 56px) - 56px - var(--tf-chrome-h, 0px)); max-height: calc(100dvh - var(--topbar-h, 56px) - 56px - var(--tf-chrome-h, 0px)); min-height: 0; position: relative; } body #page-ai .ai-page-shell { align-items: stretch; } body #page-ai .ai-page-side { max-height: calc(100dvh - var(--topbar-h, 56px) - 56px - var(--tf-chrome-h, 0px)); overflow-y: auto; overscroll-behavior: contain; } } body #page-ai .ai-page-chat { position: relative; } #aip-jump { position: absolute; z-index: 6; inset-inline-end: 22px; bottom: 132px; min-height: 40px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--text); border: 1px solid var(--border-strong, var(--border)); background: var(--surface, #111); box-shadow: 0 10px 28px -14px rgba(0, 0, 0, .55); transition: transform .08s, opacity .15s; } #aip-jump:active { transform: scale(.965); } #aip-jump[hidden] { display: none; } #aip-jump svg { width: 15px; height: 15px; } /* ═══ v579 — الحفظ في الإعدادات: شريطٌ أهدأ بضوءٍ نابض · مسودّةٌ خارج الصفحة · ✓ بجانب ما حفظ نفسه ═══ */ body .ts-bar { padding: 8px 10px 8px 14px; gap: 10px; border-radius: 999px; } body .ts-bar::before { content: ''; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); animation: tsLed 1.4s ease-in-out infinite; } body .ts-bar b { font-size: 12px; font-weight: 600; color: var(--text); } body .ts-bar button { padding: 6px 13px; min-height: 32px; border-radius: 999px; } @keyframes tsLed { 0%, 100% { opacity: .5; } 50% { opacity: 1; } } /* v584 — المعرّف لا الصنف: tf-glass.css يُحمَّل بعد هذا الملفّ و«.g-ctl { position: relative }» فيه كان يغلب «.ts-draft { position: fixed }» (الوزن نفسه والأخير يغلب) — فيقع الشريط في آخر الصفحة تحت التذييل */ #ts-draft { position: fixed; bottom: 22px; inset-inline-start: 22px; z-index: 2147483430; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer; animation: tuIn .22s var(--g-ease); transition: transform .08s; } #ts-draft .ts-led { animation: tsLed 1.4s ease-in-out infinite; } #ts-draft:active { transform: scale(.965); } .ts-tick { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 8px; vertical-align: middle; font-size: 11px; font-weight: 600; color: var(--success); animation: tsTick 1.8s ease forwards; } .ts-tick svg { width: 12px; height: 12px; } @keyframes tsTick { 0% { opacity: 0; transform: translateY(2px); } 12% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } } @media (max-width: 900px) { #ts-draft { inset-inline: 12px; justify-content: center; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } } /* ═══ v580 — قائمة ☰ في رأس الصفحة · الإعدادات نافذةً · شريط التحديث ═══ */ .tf-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-inline-end: 4px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text-muted); cursor: pointer; transition: background .12s, color .12s, transform .08s; } .tf-menu-btn:hover, .tf-menu-btn[aria-expanded="true"] { background: var(--surface2); color: var(--text); border-color: var(--border); } .tf-menu-btn:active { transform: scale(.965); } /* ═══ v594 — ☰ درجٌ جانبيّ بطول الشاشة من جهة زرّه (يميناً بالعربيّة) ═══ #tf-menu بالمعرّف لا بالصنف: «.g-ctl { position: relative }» في tf-glass.css (يُحمَّل بعد هذا الملفّ) يغلب الصنف (v584). الزجاج على الدرج وحده (طبقة تحكّم) · البنود مسطّحة بلا زجاج · الإزاحة يدويّة لكلّ اتّجاه (transform لا ينقلب وحده). اللون للمعنى: العدّاد محايد، وتسجيل الخروج محايدٌ معزولٌ في الطرف الآخر من الأسفل. */ #tf-menu-scrim { position: fixed; inset: 0; z-index: 2147483340; background: rgba(8, 10, 16, .34); opacity: 0; transition: opacity .18s var(--g-ease, ease); } #tf-menu-scrim.in { opacity: 1; } /* v615 — ☰ انتقل إلى بطاقة الحساب في الطرف الآخر من الشريط، فالدرج معه: حافّته inline-end */ #tf-menu { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; z-index: 2147483350; width: min(360px, calc(100vw - 48px)); display: flex; flex-direction: column; border-radius: 0; border-start-start-radius: 16px; border-end-start-radius: 16px; border-block: 0; border-inline-end: 0; background: color-mix(in srgb, var(--surface, #14161a) 90%, transparent); transform: translateX(-100%); transition: transform .2s var(--g-ease, ease); } html[dir="ltr"] #tf-menu { transform: translateX(100%); } #tf-menu.in, html[dir="ltr"] #tf-menu.in { transform: none; } .tfm-hd { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 16px; padding-inline-end: 10px; border-bottom: 1px solid var(--border); } .tfm-who { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; } .tfm-who b { font-size: 14px; font-weight: 700; color: var(--text); overflow: clip; text-overflow: ellipsis; white-space: nowrap; } .tfm-who em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .tfm-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 10px; } .tfm-s + .tfm-s { margin-top: 6px; padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); } .tfm-h { margin: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--text-muted); } .tfm-list { display: flex; flex-direction: column; gap: 1px; } .tfm-it { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 500; text-align: start; cursor: pointer; transition: background .12s, transform .08s; } .tfm-it:hover, .tfm-it:focus-visible { background: var(--surface2); outline: none; } .tfm-it:focus-visible, .tfm-fb:focus-visible, .tfm-th:focus-visible, .tfm-zv:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent); } .tfm-it:active, .tfm-fb:active, .tfm-th:active, .tfm-zv:active { transform: scale(.965); } .tfm-it.on { font-weight: 600; background: color-mix(in srgb, var(--surface2) 70%, transparent); } .tfm-ic { display: inline-flex; flex: 0 0 auto; width: 20px; justify-content: center; color: var(--text-muted); } .tfm-ic svg { width: 16px; height: 16px; } .tfm-it:hover .tfm-ic, .tfm-it.on .tfm-ic { color: var(--text); } .tfm-t { flex: 1 1 auto; min-width: 0; overflow: clip; text-overflow: ellipsis; white-space: nowrap; } .tfm-n { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 99px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); background: var(--surface2); border: 1px solid var(--border); } .tfm-k { direction: ltr; unicode-bidi: isolate; flex: 0 0 auto; padding: 1px 7px; border: 1px solid var(--border); border-radius: 6px; font-size: 10.5px; color: var(--text-muted); background: var(--surface); } .tfm-zoom { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 2px 10px; } .tfm-zoom .tfb.icon { font-size: 16px; font-weight: 700; } .tfm-zv { min-width: 64px; min-height: 40px; padding: 0 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: transform .08s; } .tfm-themes { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 6px 6px; } .tfm-th { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; transition: background .12s, transform .08s; } .tfm-th i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid; } .tfm-th:hover { background: var(--surface2); } .tfm-th.on { border-color: var(--text); } .tfm-ft { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-top: 1px solid var(--border); } .tfm-help { display: flex; flex-direction: column; gap: 1px; margin-bottom: 4px; padding-bottom: 6px; border-bottom: 1px dashed var(--border); } .tfm-help[hidden] { display: none; } .tfm-ft-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .tfm-sp { flex: 1 1 auto; } .tfm-fb { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 7px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .12s, transform .08s; } .tfm-fb:hover, .tfm-fb[aria-expanded="true"] { background: var(--surface2); border-color: var(--border); } .tfm-fb:focus-visible { outline: none; } .tfm-out { color: var(--text-muted); margin-inline-start: auto; } /* يلتفّ الصفّ على العرض الضيّق: الخروج يبقى في الطرف الآخر معزولاً */ .tfm-out:hover { color: var(--text); } @media (pointer: coarse) { .tfm-it, .tfm-fb { min-height: 44px; } .tfm-th { width: 44px; height: 44px; } } @media (prefers-reduced-motion: reduce) { #tf-menu, #tf-menu-scrim { transition: none; } } @media (max-width: 900px) { .tf-menu-btn, #tf-menu, #tf-menu-scrim { display: none; } } /* الإعدادات نافذةً — الصفحة نفسها فوق ستار (الشاشة الكبيرة) */ @media (min-width: 901px) { /* v584 — الستار يُركَّب داخل #app-shell قبل الصفحة (tf-menu.js): #app-shell { z-index: 1 } سياقُ تكديس، فستارٌ في body بـ299 كان يعلو النافذة كلّها — كلّ ضغطةٍ داخل الإعدادات تصيب الستار فتُغلقها. والعرض: «.page { max-width: min(1680px, 96vw) !important }» القديم كان يغلب max-width: none فتلتصق النافذة يميناً. والخلفيّة طبقتان: بعض السمات --surface فيها شفّافة فكان التذييل يظهر من خلالها. */ #tf-set-scrim { position: fixed; inset: 0; z-index: 299; background: rgba(8, 10, 16, .48); animation: tfUpdIn .16s var(--g-ease); } body.tf-set-win #page-settings.page.active { position: fixed; inset: 16px 26px; z-index: 300; display: flex; flex-direction: column; max-width: none !important; width: auto !important; margin: 0; padding: 0; border-radius: 18px; background: linear-gradient(var(--surface), var(--surface)), var(--bg); border: 1px solid var(--border); box-shadow: 0 30px 80px rgba(0, 0, 0, .38); overflow: clip; animation: tsWinIn .22s var(--g-ease); } body.tf-set-win #page-settings > .form-header, body.tf-set-win #page-settings > .st-tabs { display: none; } body.tf-set-win #app-shell > .footer-sig, body.tf-set-win .chat-widget { visibility: hidden; } body.tf-set-win #page-settings .tf-set-head { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; padding: 12px 18px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface2) 60%, transparent); } body.tf-set-win #page-settings .tf-set-head b { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto; font-size: 14px; font-weight: 700; } /* v591 — لوحتان متجاورتان لا واحدةٌ داخل الأخرى. كانت القشرة كلّها تتمرّر وعمود الصفحات «لاصقٌ» فيها بطول 812 بكسل في نافذةٍ ارتفاعها 669 (1366×768): آخر ثلاث خاناتٍ تبقى تحت الحافّة حتّى ينتهي تمرير القسم. الآن القشرة لا تتمرّر؛ العمود يتمرّر وحده إن طال، والمحتوى يتمرّر وحده. */ body.tf-set-win #page-settings .ts-shell { flex: 1 1 auto; min-height: 0; display: flex; padding: 0 22px; } body.tf-set-win #page-settings.ts-mode .ts-shell { max-width: none; } body.tf-set-win #page-settings .ts-wrap { flex: 1 1 auto; min-height: 0; width: 100%; max-width: 1180px; margin-inline: auto; grid-template-rows: minmax(0, 1fr); } /* v584 — المحتوى في وسط النافذة لا ملتصقاً بطرفها */ body.tf-set-win #page-settings .ts-nav { position: static; align-self: start; max-height: calc(100% - 32px); margin-block: 16px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } body.tf-set-win #page-settings .ts-body { align-self: stretch; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 4px 28px; scrollbar-width: thin; } body.tf-set-win #page-settings .ts-g { min-height: 40px; padding: 8px 12px; } @media (max-height: 820px) { body.tf-set-win #page-settings .ts-g em { display: none; } } body.tf-set-win .modal-overlay { z-index: 320; } @keyframes tsWinIn { from { opacity: 0; transform: translateY(8px) scale(.992); } } } #page-settings .tf-set-head { display: none; } /* شريط «إصدارٌ جديد جاهز» (التطبيق المكتبيّ) */ /* v584 — #tf-upd لا .tf-upd (انظر #ts-draft) · في الوسط: الزاوية للمسودّة والدردشة */ #tf-upd { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2147483430; display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text); animation: tfUpdIn .18s var(--g-ease); } @keyframes tfUpdIn { from { opacity: 0; } } /* v580 — بطاقة تطبيق سطح المكتب في «عن البرنامج» */ .tfs-desk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .tfs-desk-row b { font-size: 13px; font-weight: 600; } a.tfs-desk-dl { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .tfs-desk-sha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; word-break: break-all; } .tfs-copy { padding: 2px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface2); color: var(--text-muted); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; } .tfs-desk-admin { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 8px; } .tfs-desk-admin .tfs-in { max-width: none; } /* ═══ v581 — قالب النوع تحت الفقرة · عمود الخلاصة · القالب في صفحة الطلب ═══ */ .frt { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--border); border-inline-start: 3px solid var(--kc, var(--accent)); border-radius: 10px; background: var(--surface); } .frt.miss { border-inline-start-color: var(--warning, #e8a020); } .frt-h { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: 12px; color: var(--text-muted); } .frt-h b { flex: 1 1 auto; font-weight: 600; color: var(--text); } .frt-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .frt-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .frt-f.wide { grid-column: 1 / -1; } .frt-f b { color: var(--warning, #e8a020); font-weight: 700; } .frt-f.need .frt-in { border-color: color-mix(in srgb, var(--warning, #e8a020) 55%, var(--border)); } .frt-in { width: 100%; box-sizing: border-box; min-height: 34px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); color: var(--text); font: inherit; font-size: 13px; font-weight: 500; resize: vertical; } .frt-in:focus { outline: none; border-color: var(--accent); } .frt-btn { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 4px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface2); color: var(--text-muted); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: transform .08s; } .frt-btn:hover { color: var(--text); } .frt-btn:active, .frt-pick:active, .frs-gap:active { transform: scale(.965); } .frt-photo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; } .frt-photo img, .frt-pick img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; display: block; } .frt-pick { padding: 0; border: 2px solid transparent; border-radius: 10px; background: none; cursor: pointer; } .frt-pick:hover { border-color: var(--accent); } .frt-x { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); color: var(--text-muted); cursor: pointer; } .frt-wait { color: var(--text-muted); } @media (max-width: 700px) { .frt-g { grid-template-columns: 1fr; } } @media (pointer: coarse) { .frt-btn, .frt-x { min-height: 40px; } .frt-x { min-width: 40px; } } /* v591 — الخلاصة صارت في عمود الملاحظات الثابت (#fr-tsum داخل .fr-notes — freereq.js) بدل عمودٍ رابع يولد بعد التقسيم على الشاشات ≥ 1440 وحدها: على لابتوب 1366 لم يكن يظهر أبداً */ #fr-tsum { display: flex; flex-direction: column; gap: 8px; } #fr-tsum[hidden] { display: none; } .frs-h { font-size: 12.5px; font-weight: 700; } .frs-n { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .frs-n span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 8px; background: var(--surface2); font-size: 10.5px; color: var(--text-muted); } .frs-n b { font-size: 17px; color: var(--text); } .frs-t { display: flex; flex-wrap: wrap; gap: 5px; } .frs-t i { font-style: normal; padding: 3px 9px; border-radius: 999px; background: var(--surface2); font-size: 11px; color: var(--text-muted); } .frs-t b { color: var(--text); } .frs-gh { font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .frs-gaps { display: flex; flex-direction: column; gap: 4px; } .frs-gap { text-align: start; padding: 6px 9px; min-height: 32px; border: 1px solid color-mix(in srgb, var(--warning, #e8a020) 40%, var(--border)); border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 11.5px; cursor: pointer; transition: transform .08s; } .fri-row.frs-flash { box-shadow: 0 0 0 2px var(--accent); transition: box-shadow .3s; } .rqt { margin: 8px 0 0; padding: 8px 10px; border-radius: 9px; background: var(--surface2); display: grid; gap: 5px; font-size: 12.5px; } .rqt-r { display: grid; grid-template-columns: 110px 1fr; gap: 8px; align-items: start; } .rqt dt { margin: 0; font-weight: 600; color: var(--text-muted); font-size: 11.5px; } .rqt dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } .rqt ul { margin: 0; padding-inline-start: 16px; } .rqt-ph { display: inline-flex; align-items: center; gap: 7px; color: var(--text); text-decoration: none; } .rqt-ph img { width: 36px; height: 36px; object-fit: cover; border-radius: 7px; } /* ═══ v585 — نظام الأزرار الواحد (.tfb) ═══ محمد: «بتحس اليو اي على الكمبيوتر غير — لازم تتحسّن الأزرار». كان لكلّ مكوّنٍ جديد زرّه (g-btn بلا حشوة · bi-btn · bag-go · tfs-copy · tf-upd button…) فتفاوتت الأحجام والوزن. الهويّة: زجاجٌ بحدٍّ لامعٍ داخليّ · الضغط انكماش scale(.965) لا نزول · اللون للمعنى: .pri للفعل الواحد المطلوب الآن · .danger محايدٌ لا يحمرّ إلّا عند المرور · والحجم ≥40 (44 باللمس). .tfb-foot: الحفظ أسفل يمين، والخطر معزولٌ أسفل يسار — بالعربيّة والإنكليزيّة معاً. */ .tfb { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 12px; font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; text-decoration: none; color: var(--text); background: linear-gradient(180deg, color-mix(in srgb, var(--text) 6%, transparent), color-mix(in srgb, var(--text) 2%, transparent)), var(--surface); border: 1px solid var(--border-strong, var(--border)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent), 0 1px 2px rgba(0, 0, 0, .06); transition: transform .08s, border-color .12s, background-color .12s, color .12s; } .tfb:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .tfb:active { transform: scale(.965); } .tfb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .tfb[disabled], .tfb.is-off { opacity: .45; cursor: not-allowed; transform: none; } .tfb svg { width: 16px; height: 16px; flex: 0 0 auto; } .tfb.pri { color: var(--accent-ink, #14110a); background: linear-gradient(180deg, color-mix(in srgb, #fff 18%, var(--accent)), var(--accent)); border-color: color-mix(in srgb, var(--accent) 70%, #000); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent), 0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent); font-weight: 700; } .tfb.pri:hover { border-color: color-mix(in srgb, var(--accent) 50%, #000); } .tfb.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-muted); } .tfb.ghost:hover { color: var(--text); border-color: var(--border); background: var(--surface2); } .tfb.danger { color: var(--text-muted); } .tfb.danger:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); } .tfb.sm { min-height: 34px; padding: 0 12px; font-size: 12.5px; border-radius: 10px; } .tfb.icon { width: 40px; padding: 0; } .tfb.icon.sm { width: 34px; } .tfb.busy { opacity: .7; pointer-events: none; } @media (pointer: coarse) { .tfb, .tfb.sm { min-height: 44px; } .tfb.icon, .tfb.icon.sm { width: 44px; } } .tfb-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } html[dir="ltr"] .tfb-foot { flex-direction: row-reverse; } .tfb-main, .tfb-side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } html[dir="ltr"] .tfb-main { flex-direction: row-reverse; } /* ═══ v586 — نشر إصدار التطبيق المكتبيّ من «حول» ═══ */ .rel { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; padding: 16px; border-radius: 14px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface2) 45%, transparent); } .rel-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .rel-h b { font-size: 14px; font-weight: 700; } .rel-cur { margin-inline-start: auto; font-size: 12px; color: var(--text-muted); } .rel-cur b { color: var(--text); font-weight: 600; } .rel-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rel-file { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--border); background: var(--surface); } .rel-kv { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 30px; } .rel-kv > span { font-size: 12px; font-weight: 600; color: var(--text-muted); } .rel-kv > b { font-size: 12.5px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; } .rel-kv > em { font-style: normal; font-size: 12px; color: var(--text-muted); } .rel-kv .rel-bad { grid-column: 2 / -1; color: var(--danger); } .rel-sha { font-size: 11px !important; color: var(--text-muted); } .rel-in { width: 100%; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border-strong, var(--border)); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; box-sizing: border-box; } .rel-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } .rel-kv .rel-in { max-width: 160px; } .rel-prog { height: 8px; border-radius: 99px; background: var(--surface2); border: 1px solid var(--border); overflow: clip; } .rel-prog i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent)); transition: width .2s; } .rel-phase { margin: 0; font-variant-numeric: tabular-nums; } .rel-err { display: flex; align-items: center; gap: 7px; margin: 0; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); } .rel-adv { border-top: 1px dashed var(--border); padding-top: 10px; } .rel-adv > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-muted); list-style: none; min-height: 32px; display: flex; align-items: center; } .rel-adv > summary::-webkit-details-marker { display: none; } .rel-adv[open] > summary { color: var(--text); margin-bottom: 6px; } .rel-adv .tfs-inrow { display: flex; gap: 8px; margin: 8px 0; } .rel-feed { display: flex; gap: 8px; align-items: center; } .rel-foot { padding-top: 4px; } .tfs-desk-old { margin: 4px 0 0; color: var(--text); } .tfs-desk-sha .tfb { vertical-align: middle; } /* ═══ v587 — لوحة مراجعة القصّ (TFCrop) ═══ */ .tfb-seg { display: inline-flex; gap: 0; padding: 3px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); } .tfb-seg .tfb { border-color: transparent; background: transparent; box-shadow: none; color: var(--text-muted); } .tfb-seg .tfb.on { background: var(--surface); color: var(--text); border-color: var(--border-strong, var(--border)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent), 0 1px 3px rgba(0, 0, 0, .12); } .tcr-ov { position: fixed; inset: 0; z-index: 2147483200; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(8, 10, 16, .55); } .tcr-ov[hidden] { display: none; } /* #tcr-ov لا .tcr-box وحده: .g-modal في tf-glass.css (يُحمَّل بعده) يغلب الصنف بالوزن نفسه — والمراجعة تحتاج خلفيّةً صلبة (لا زجاجاً يُرى ما خلفه عبر الصورة) */ #tcr-ov .tcr-box { width: min(1320px, 100%); height: min(880px, calc(100vh - 36px)); display: flex; flex-direction: column; overflow: clip; background: linear-gradient(var(--surface), var(--surface)), var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } .tcr-h { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); } .tcr-h > b { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; } .tcr-sub { flex: 1 1 auto; font-size: 12.5px; color: var(--text-muted); } .tcr-m { flex: 1 1 auto; min-height: 0; display: flex; } .tcr-list { flex: 0 0 210px; overflow-y: auto; padding: 10px; border-inline-end: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; } .tcr-li { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 58px; padding: 5px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--text); font: inherit; text-align: start; cursor: pointer; } .tcr-li:hover { background: var(--surface2); } .tcr-li.on { background: var(--surface2); border-color: var(--border-strong, var(--border)); } .tcr-li span { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; } .tcr-li b { font-size: 12.5px; font-weight: 600; min-width: 0; overflow: clip; text-overflow: ellipsis; white-space: nowrap; } .tcr-th { flex: 0 0 auto; width: 72px; height: 48px; border-radius: 7px; background: #111; } .tcr-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--success); } .tcr-dot.warn { background: var(--warning, #d9a21b); } .tcr-dot.bad { background: var(--danger); } .tcr-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; } .tcr-stage { position: relative; flex: 1 1 auto; min-height: 220px; border-radius: 12px; background: repeating-conic-gradient(color-mix(in srgb, var(--text) 6%, transparent) 0 25%, transparent 0 50%) 0 0 / 18px 18px; overflow: clip; } .tcr-stage canvas { position: absolute; } .tcr-crop { position: absolute; box-sizing: border-box; border: 2px solid #fff; border-radius: 3px; cursor: grab; touch-action: none; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .52), 0 0 0 1px rgba(0, 0, 0, .6) inset; outline: none; } .tcr-crop:focus-visible { border-color: var(--accent); } .tcr-crop.drag { cursor: grabbing; } .tcr-crop.fit { cursor: default; border-style: dashed; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6) inset; } .tcr-safe { position: absolute; inset: 5%; border: 1px dashed rgba(255, 255, 255, .55); pointer-events: none; } .tcr-l3 { position: absolute; inset-inline: 5%; bottom: 5%; height: 21%; border-top: 1px dashed rgba(255, 206, 84, .75); background: rgba(255, 206, 84, .08); pointer-events: none; } .tcr-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tcr-zoom { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); } .tcr-zoom input { width: 150px; accent-color: var(--accent); } .tcr-zoom[hidden] { display: none; } .tcr-eng { margin-inline-start: auto; font-size: 11px; color: var(--text-muted); } .tcr-sizes { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; } .tcr-sz { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 176px; padding: 8px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; text-align: start; cursor: pointer; transition: transform .08s, border-color .12s; } .tcr-sz:active { transform: scale(.965); } .tcr-sz.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); } .tcr-sz.bad:not(.on) { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); } .tcr-pv { display: block; height: 90px; width: auto; max-width: 160px; border-radius: 6px; background: #111; } .tcr-szn { display: flex; align-items: baseline; gap: 8px; } .tcr-szn b { font-size: 12.5px; font-weight: 700; } .tcr-szn em { font-style: normal; font-size: 11px; color: var(--text-muted); } .tcr-ws { display: flex; flex-wrap: wrap; gap: 4px; max-width: 220px; } .tcr-w { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; font-style: normal; color: var(--text-muted); background: var(--surface2); border: 1px solid var(--border); } .tcr-w svg { width: 11px; height: 11px; } .tcr-w.ok { color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, var(--border)); } .tcr-w.warn { color: color-mix(in srgb, var(--warning, #d9a21b) 85%, var(--text)); border-color: color-mix(in srgb, var(--warning, #d9a21b) 45%, var(--border)); } .tcr-w.bad { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); } .tcr-f { padding: 12px 16px; border-top: 1px solid var(--border); } .tcr-prog { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .bi-prog { margin: 6px 0 0; font-size: 12.5px; color: var(--text-muted); min-height: 1.2em; } @media (max-width: 760px) { .tcr-ov { padding: 0; } .tcr-box { height: 100vh; border-radius: 0; } .tcr-m { flex-direction: column; } .tcr-list { flex: 0 0 auto; flex-direction: row; overflow-x: auto; border-inline-end: 0; border-bottom: 1px solid var(--border); } .tcr-li { min-width: 180px; } .tcr-stage { min-height: 200px; } } /* ═══ v588 — صور النشرة: لوحة الأدمن · نافذة الوكيل · المراجعة في الصفحة · حال البطاقة ═══ (حلّ محلّ كتلة v583: حقولٌ بحجمٍ حقيقيّ وتسمياتٌ فوقها، وأزرار .tfb، والحفظ يميناً والافتراضيّ يساراً) */ .bag-set { display: flex; flex-direction: column; gap: 16px; } .bag-sec { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); } .bag-sec h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 700; } .bag-list { display: flex; flex-direction: column; gap: 8px; } .bag-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); } .bag-dest { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); } .bag-dest .bag-row { padding: 0; border: 0; background: transparent; } .bag-fl { display: flex; flex-direction: column; gap: 5px; flex: 1 1 150px; min-width: 0; } .bag-fl.wide { flex: 2 1 260px; } .bag-fl.n { flex: 0 1 96px; } .bag-fl > span { font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .bag-in { width: 100%; min-height: 40px; padding: 0 12px; box-sizing: border-box; border-radius: 10px; border: 1px solid var(--border-strong, var(--border)); background: var(--surface2); color: var(--text); font: inherit; font-size: 13px; } select.bag-in { padding-inline-end: 28px; } .bag-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } .bag-in[disabled] { opacity: .7; } .bag-sw { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); cursor: pointer; } .bag-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; } .bag-sw i { position: relative; flex: 0 0 auto; width: 36px; height: 22px; border-radius: 99px; background: var(--surface2); border: 1px solid var(--border-strong, var(--border)); transition: background .12s; } .bag-sw i::after { content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-muted); transition: inset-inline-start .14s, background .12s; } .bag-sw input:checked + i { background: color-mix(in srgb, var(--accent) 30%, var(--surface2)); border-color: var(--accent); } .bag-sw input:checked + i::after { inset-inline-start: 16px; background: var(--accent); } .bag-sw input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; } .bag-add { align-self: flex-start; } .bag-cr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); } .bag-cr > span { min-width: 70px; font-weight: 600; } .bag-cr em { font-style: normal; } .bag-chip { min-height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface2); color: var(--text-muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: transform .08s; } .bag-chip:active { transform: scale(.965); } .bag-chip.on { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); } .bag-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; } .bag-ex { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--surface2); border: 1px dashed var(--border); font-size: 12px; color: var(--text-muted); } .bag-ex code { color: var(--text); overflow-wrap: anywhere; font-size: 12px; text-align: left; } .bag-err { color: var(--danger); font-size: 12.5px; font-weight: 600; min-height: 1em; } .bag-foot { padding: 12px 16px; border-top: 1px solid var(--border); } .bag-hb { gap: 8px; } /* نافذة الوكيل */ .bag-ov { position: fixed; inset: 0; z-index: 2147483300; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(8, 10, 16, .55); } .bag-ov[hidden] { display: none; } .bag-box { width: min(760px, 100%); max-height: min(90vh, 820px); display: flex; flex-direction: column; border-radius: 18px; overflow: clip; background: linear-gradient(var(--surface), var(--surface)), var(--bg); border: 1px solid var(--border); box-shadow: 0 30px 80px rgba(0, 0, 0, .38); } .bag-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); } .bag-h b { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; } .bag-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; } .bag-body section { display: flex; flex-direction: column; gap: 10px; } .bag-body h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 700; color: var(--text-muted); } .bag-me { padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface2); } .bag-st { display: flex; align-items: center; gap: 10px; } .bag-st .ts-led { width: 10px; height: 10px; } .bag-st b { display: block; font-size: 14px; font-weight: 700; } .bag-st em { display: block; font-style: normal; font-size: 12px; color: var(--text-muted); } .bag-warn { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: color-mix(in srgb, var(--warning, #d9a21b) 80%, var(--text)); background: color-mix(in srgb, var(--warning, #d9a21b) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warning, #d9a21b) 35%, transparent); } .bag-kv { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; } .bag-kv > span:first-child { font-size: 12px; font-weight: 600; color: var(--text-muted); } .bag-kv code { font-size: 12px; overflow-wrap: anywhere; text-align: left; } .bag-kv em { font-style: normal; font-size: 12px; color: var(--text-muted); } .bag-kvb { display: inline-flex; gap: 6px; flex-wrap: wrap; } .bag-chips { display: flex; flex-wrap: wrap; gap: 6px; } .bag-w summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-muted); min-height: 28px; } .bag-w code { display: block; font-size: 11.5px; color: var(--text-muted); overflow-wrap: anywhere; text-align: left; } .bag-rm { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--surface2); font-size: 12.5px; } .bag-rm b { font-weight: 700; } .bag-rm em { font-style: normal; color: var(--text-muted); font-size: 11.5px; } .bag-rm span { color: var(--text-muted); font-size: 12px; text-align: end; } .bag-log { display: flex; flex-direction: column; gap: 6px; } .bag-l { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); } .bag-l img, .bag-ph { width: 48px; height: 32px; border-radius: 6px; object-fit: cover; background: var(--surface2); display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); } .bag-lm, .bag-ls { display: flex; flex-direction: column; min-width: 0; } .bag-lm b { font-size: 12.5px; font-weight: 600; overflow: clip; text-overflow: ellipsis; white-space: nowrap; } .bag-lm em, .bag-ls em { font-style: normal; font-size: 11.5px; color: var(--text-muted); overflow: clip; text-overflow: ellipsis; white-space: nowrap; } .bag-ls { align-items: flex-end; text-align: end; } .bag-ls .mono { font-size: 11px; color: var(--text-muted); } .bag-ls b { font-size: 12px; font-weight: 700; } .bag-l.ok .bag-ls b { color: var(--success); } .bag-l.warn .bag-ls b { color: color-mix(in srgb, var(--warning, #d9a21b) 85%, var(--text)); } .bag-l.bad .bag-ls b, .bag-l.bad .bag-ls em { color: var(--danger); } .bag-empty { margin: 0; } .bag-f { padding: 12px 16px; border-top: 1px solid var(--border); } /* شريط المراجعة في صفحة صور النشرة */ .bag-rv { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 10px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--warning, #d9a21b) 45%, var(--border)); background: color-mix(in srgb, var(--warning, #d9a21b) 8%, var(--surface)); } .bag-rv > span { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; } .bag-rv b { font-size: 13px; font-weight: 700; } .bag-rv em { font-style: normal; font-size: 12px; color: var(--danger); font-weight: 600; } /* حال الوكيل على البطاقة */ .bag-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; color: var(--text-muted); background: var(--surface2); border: 1px solid var(--border); } .bag-badge.warn { color: color-mix(in srgb, var(--warning, #d9a21b) 85%, var(--text)); border-color: color-mix(in srgb, var(--warning, #d9a21b) 45%, var(--border)); } .bag-badge.ok { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, var(--border)); } .bag-badge.bad { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); } .bag-badge svg { width: 12px; height: 12px; } @media (max-width: 700px) { .bag-ov { padding: 0; } .bag-box { max-height: 100vh; height: 100vh; border-radius: 0; } .bag-kv { grid-template-columns: 1fr; } .bag-fl.n { flex: 1 1 40%; } } .bi-bar .bag-rv { flex: 1 1 100%; margin-bottom: 2px; } .bi-ag { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; } /* ═══ v589 — قالب النوع في بطاقة الطلب: الحقول نفسها (.frt) تحت نصّ البطاقة · وفي بطاقة المصمّم للقراءة ═══ */ .nr-pv-card .nrt { margin-top: 10px; } .nr-pv-card .nrt .frt-h b { font-size: 12.5px; } .mc-tpl { margin-top: 8px; } .mc-tpl-h { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); } .mc-tpl-h b { font-weight: 600; color: var(--text); } .mc-tpl .rqt { margin-top: 4px; } @media (max-width: 520px) { .mc-tpl .rqt-r { grid-template-columns: 1fr; gap: 2px; } } /* ═══ v591 — ملاحظة المحرر للفريق على صفحة الطلب (عمود الملاحظات في الطلب السريع) ═══ */ .rq-note { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); } .rq-note b { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); } .rq-note p { margin: 6px 0 0; font-size: 13px; line-height: 1.8; white-space: pre-wrap; color: var(--text); } /* ═══ v592 — قواعد الأسماء: النصّ بجانب «جرّب اسماً»، والقواعد مقروءةً تحته سطراً سطراً ═══ اللون للمعنى: الخطأ وحده أحمر، وما سواه محايد. لا إخفاء للفائض (فخّ التمرير) ولا تثبيت. */ .bag-h4e { font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--text-muted); margin-inline-start: 6px; } .bag-rgrid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 12px; align-items: start; } @media (max-width: 900px) { .bag-rgrid { grid-template-columns: minmax(0, 1fr); } } .bag-rtx { flex: none; } .bag-ta { min-height: 196px; padding: 10px 12px; line-height: 1.75; resize: vertical; font-size: 12.5px; text-align: left; white-space: pre; overflow-wrap: normal; tab-size: 2; } .bag-rside { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .bag-rhelp { margin: 0; font-size: 12px; line-height: 1.8; color: var(--text-muted); padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--border); } .bag-try { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; } .bag-tryout:empty { display: none; } .bag-m { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2); font-size: 12.5px; } .bag-m.bad { flex-direction: row; align-items: flex-start; gap: 8px; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); } .bag-m.bad b { font-weight: 700; } .bag-mkv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 10px; align-items: baseline; } .bag-mkv > span { font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .bag-mkv > b { font-weight: 600; min-width: 0; overflow-wrap: anywhere; } .bag-mkv code { font-size: 12px; } .bag-mkv em { font-style: normal; font-size: 11px; color: var(--text-muted); margin-inline-start: 6px; font-weight: 500; } .bag-mkv em.bad, .bag-rsum em.bad, .bag-sr em.bad { color: var(--danger); } .bag-mis { display: flex; align-items: flex-start; gap: 6px; margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--text); } .bag-scanb { align-self: flex-start; } .bag-rlist, .bag-scan { display: flex; flex-direction: column; gap: 4px; } .bag-scan[hidden] { display: none; } .bag-rsum { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; padding: 2px 2px 4px; } .bag-rsum b { font-weight: 700; } .bag-rsum em { font-style: normal; font-weight: 600; color: var(--text-muted); } .bag-rempty { margin: 0; font-size: 12.5px; color: var(--text-muted); padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--border); } .bag-r { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 34px; padding: 5px 10px; border-radius: 9px; background: var(--surface2); font-size: 12.5px; } .bag-r.bad { color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--surface2)); font-weight: 600; } .bag-rl { min-width: 2ch; font-size: 11px; color: var(--text-muted); text-align: end; } .bag-r code { font-size: 12px; color: var(--text); } .bag-ra { font-style: normal; color: var(--text-muted); } .bag-r b { font-weight: 600; } .bag-r bdi { color: var(--text-muted); font-size: 11.5px; } .bag-rsub { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-muted); } .bag-rsec { margin-inline-start: auto; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--border-strong, var(--border)); color: var(--text-muted); } .bag-sr { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1.4fr); gap: 10px; align-items: center; padding: 6px 10px; border-radius: 9px; background: var(--surface2); font-size: 12px; } .bag-sr b { font-weight: 600; min-width: 0; overflow-wrap: anywhere; } .bag-sr span { min-width: 0; color: var(--text-muted); overflow-wrap: anywhere; } .bag-sr em { font-style: normal; font-weight: 600; } @media (max-width: 640px) { .bag-sr { grid-template-columns: minmax(0, 1fr); gap: 2px; } } .bag-ex em { font-style: normal; font-size: 12px; color: var(--text-muted); } /* منتقي القاعدة (الورقة السفليّة) */ .bag-pick button > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; } .bag-pick code { font-size: 12.5px; } .bag-pick b { font-weight: 600; } .bag-pick bdi, .bag-pick em { font-style: normal; font-size: 11.5px; color: var(--text-muted); } .bag-pick .bag-now { color: var(--text); font-weight: 600; padding: 0 7px; border-radius: 99px; border: 1px solid var(--border-strong, var(--border)); } /* ═══ v592 — صور النشرة: القاعدة ← المقاس ← الوجهة على البطاقة ═══ اللون المشبع لشيءٍ واحد: المصدر أصغر من المقاس كثيراً — لا يصلح للشاشة. والباقي محايد. */ .bi-rl { display: flex; flex-direction: column; gap: 4px; padding: 7px 8px; border-radius: 9px; border: 1px solid var(--border); font-size: 11.5px; min-width: 0; } .bi-rl.none { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; color: var(--text); border-style: dashed; } .bi-rl.none > span { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; } .bi-rl-r { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; min-width: 0; } .bi-rl-r code { font-size: 11.5px; color: var(--text-muted); } .bi-rl-r i { font-style: normal; color: var(--text-muted); } .bi-rl-r b { font-weight: 700; } .bi-rl-r bdi { color: var(--text-muted); font-size: 11px; } .bi-rl-d { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--text-muted); font-size: 11px; } .bi-rl-d span { min-width: 0; overflow: clip; text-overflow: ellipsis; white-space: nowrap; } .bi-rl-w { font-size: 11.5px; font-weight: 600; color: var(--text); } .bi-up { font-size: 11.5px; color: var(--text-muted); } .bi-up.bad { color: var(--danger); font-weight: 700; } .bi-who { font-size: 11px; color: var(--text-muted); } .bi-gone { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; text-align: center; font-size: 11.5px; line-height: 1.6; color: #c9ccd3; } .bi-sz:disabled, .bi-ib:disabled { opacity: .45; cursor: not-allowed; transform: none; } .bi-rlz { display: flex; flex-direction: column; gap: 4px; } .bi-rlz span { display: flex; align-items: baseline; gap: 6px; padding: 5px 9px; border-radius: 8px; background: var(--surface2, var(--surface)); font-size: 12.5px; min-width: 0; } .bi-rlz b { font-weight: 600; min-width: 0; overflow-wrap: anywhere; } .bi-rlz i, .bi-rlz bdi { font-style: normal; color: var(--text-muted); } .bi-rlz em { font-style: normal; font-weight: 600; } .bi-rlz .more { color: var(--text-muted); } /* ═══ v592 — سجلّ الشغل: جدول توثيقٍ لا لوحة — أرقامٌ بخطٍّ أحاديّ، واليوم الحاليّ بحدٍّ لا بلون ═══ */ .bi-views { flex: none; } /* الصور تُخفى تحت السجلّ: display المؤلَّف يغلب [hidden] إن لم يُقل هنا */ #bi-shows[hidden], #bi-bar[hidden], #bi-main[hidden] { display: none; } .bi-log { display: flex; flex-direction: column; gap: 12px; } .bi-log[hidden] { display: none; } .bi-lg-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .bi-lg-note { margin: 0; font-size: 12px; color: var(--text-muted); } .bi-lg-sec { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--border-strong, var(--border)); } .bi-lg-sec h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 700; } .bi-lg-sec h2 em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--text-muted); } .bi-lg-tw { overflow-x: auto; overscroll-behavior-x: contain; border-radius: 12px; border: 1px solid var(--border); } .bi-lg-t { width: 100%; border-collapse: collapse; font-size: 12.5px; } .bi-lg-t th, .bi-lg-t td { padding: 8px 10px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--border); white-space: nowrap; } .bi-lg-t thead th { font-size: 11.5px; font-weight: 600; color: var(--text-muted); background: var(--surface2, var(--surface)); } .bi-lg-t tbody tr:last-child > * { border-bottom: 0; } .bi-lg-t td b { font-weight: 600; } .bi-lg-t td em { display: block; font-style: normal; font-size: 11px; color: var(--text-muted); } .bi-lg-t td.sz bdi { display: block; } .bi-lg-t td.path { max-width: 320px; overflow: clip; text-overflow: ellipsis; color: var(--text-muted); font-size: 11.5px; } .bi-lg-t.tot td, .bi-lg-t.tot th { text-align: center; } .bi-lg-t.tot tbody th { text-align: start; font-weight: 600; } .bi-lg-t.tot td i { font-style: normal; color: var(--text-muted); opacity: .6; } .bi-lg-t.tot .sum { font-weight: 700; } .bi-lg-t .now { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 35%, transparent); } .bi-lg-t tr.bad td:last-child { color: var(--danger); font-weight: 600; } .bi-lg-t tr.warn td:last-child { font-weight: 600; } /* ═══ v593 — بوت تيليغرام والفريق: أسماءٌ مقسومةٌ بالقسم، وجدول ما لم يُجب عنه — توثيقٌ محايد، والرقم بخطٍّ أحاديّ ═══ */ .tfs-tg-n { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; } .tfs-tg-of { font-size: 12px; color: var(--text-muted); } .tfs-tg-of b { font-weight: 600; color: var(--text); } .tfs-tg-list { display: flex; flex-direction: column; gap: 6px; } .tfs-tg-g { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr); gap: 4px 12px; align-items: baseline; padding: 7px 10px; border-radius: 10px; background: var(--surface2); font-size: 12.5px; } .tfs-tg-g b { font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .tfs-tg-g span { min-width: 0; line-height: 1.8; overflow-wrap: anywhere; } @media (max-width: 640px) { .tfs-tg-g { grid-template-columns: minmax(0, 1fr); } } .tfs-tg-det { padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); } .tfs-tg-det summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-size: 13px; font-weight: 600; } .tfs-tg-det[open] summary { margin-bottom: 6px; } .tfs-tg-tw { overflow-x: auto; overscroll-behavior-x: contain; border-radius: 12px; border: 1px solid var(--border); } .tfs-tgq { width: 100%; border-collapse: collapse; font-size: 12.5px; } .tfs-tgq th, .tfs-tgq td { padding: 8px 10px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--border); } .tfs-tgq thead th { font-size: 11.5px; font-weight: 600; color: var(--text-muted); background: var(--surface2); } .tfs-tgq tbody tr:last-child > * { border-bottom: 0; } .tfs-tgq td.mono { color: var(--text-muted); font-size: 11.5px; } .tfs-tgq td em { display: block; margin-top: 3px; font-style: normal; font-size: 11.5px; color: var(--text-muted); } .tfs-test:disabled { opacity: .5; cursor: not-allowed; transform: none; } /* ═══ v601 — رحلة الطلب: الرأس (رقم المادّة أوّلاً) · ورقة المونتاج · السرد و«لك» · العدّاد بالاسم ═══ */ .rq-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0; } .rq-hmat { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 17px; font-weight: 700; letter-spacing: .04em; padding: 4px 11px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--accent, #cf9f52) 55%, var(--border)); background: color-mix(in srgb, var(--accent, #cf9f52) 12%, var(--surface)); color: var(--text); line-height: 1.3; flex: 0 0 auto; } .rq-hmat.later, .rq-hmat.none { font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--text-muted); border-style: dashed; background: transparent; } .rq-htitle { flex: 1 1 240px; min-width: 0; font-size: 15px; font-weight: 700; overflow: clip; text-overflow: ellipsis; white-space: nowrap; } .rq-hst { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--st, var(--border)) 55%, var(--border)); color: color-mix(in srgb, var(--st, var(--text)) 70%, var(--text)); background: color-mix(in srgb, var(--st, var(--surface)) 10%, transparent); white-space: nowrap; } .rq-hby { font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; } .rq-hby::before { content: '—'; margin-inline-end: 6px; } @media (max-width: 760px) { .rq-htitle { white-space: normal; flex-basis: 100%; } .rq-hmat { font-size: 15px; } } /* السرد: صفٌّ باهتٌ بلا مربّع — للمونتير نصّه وللمصمّم سياقه */ .rqp-row.lane-n { border-inline-start: 3px solid var(--lane-n); } .rqp-kind.kn, .rqp-cnt i.kn { border-color: var(--border); color: var(--text-muted); } /* v621 — السياق يخفت بحجمه ولون نصّه لا بالشفافيّة (كانت .62: الرقم والقسم ٢٫٤ على الفاتحة) */ .rqp-row.rqp-ctx .rqp-txt { font-size: 12.5px; color: var(--text-muted); } .rqp-row.rqp-ctx:hover .rqp-txt, .rqp-row.rqp-ctx:focus-within .rqp-txt { color: var(--text); } /* «لك»: اللون المشبع الواحد — لما يحتاج انتباهك الآن */ .rqp-row.for-me { background: color-mix(in srgb, var(--accent, #cf9f52) 6%, transparent); } .rqp-forme { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-inline-end: 7px; background: var(--accent, #cf9f52); color: var(--accent-ink); vertical-align: middle; } /* العدّاد بالاسم في رأس الفقرات */ .rqp-cnt { display: inline-flex; flex-wrap: wrap; gap: 6px; } .rqp-cnt i { font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; } .rqp-cnt i.kg { border-color: color-mix(in srgb, var(--lane-g) 50%, var(--border)); color: color-mix(in srgb, var(--lane-g) 65%, var(--text)); } /* v621 — من الثيم */ .rqp-cnt i.km { border-color: color-mix(in srgb, var(--lane-m) 50%, var(--border)); color: color-mix(in srgb, var(--lane-m) 65%, var(--text)); } .rqp-cnt b { font-weight: 700; } /* ورقة المونتاج: الصوت | الشاشة */ .rq-msheet { margin: 10px 0 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); } .rq-msheet > summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; font-size: 13px; list-style: none; } .rq-msheet > summary::-webkit-details-marker { display: none; } .rq-msheet > summary::before { content: ''; width: 7px; height: 7px; border-inline-end: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(-45deg); transition: transform .15s; margin-inline-end: 4px; } .rq-msheet[open] > summary::before { transform: rotate(45deg); } .rq-ms-sum { margin-inline-start: auto; font-size: 11px; color: var(--text-muted); } .rq-ms-strip { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; } .rq-ms-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface2); } .rq-ms-chip i { font-style: normal; color: var(--text-muted); } .rq-ms-chip b { font-weight: 700; } .rq-ms-chip.miss b { color: var(--text-muted); font-weight: 600; } .rq-ms-head, .rq-ms-row { display: grid; grid-template-columns: 30px minmax(0, 1.6fr) minmax(170px, 1fr); gap: 0 12px; align-items: start; } .rq-ms-head { padding: 7px 14px; font-size: 11px; font-weight: 700; color: var(--text-muted); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface2); } .rq-ms-row { padding: 10px 14px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); } .rq-ms-row:last-child { border-bottom: 0; } .rq-ms-n { font-size: 11px; color: var(--text-muted); padding-top: 3px; } .rq-ms-txt { font-size: 13.5px; line-height: 1.85; white-space: pre-wrap; } .rq-ms-scr { display: flex; flex-direction: column; gap: 3px; font-size: 12px; line-height: 1.6; padding: 6px 9px; border-radius: 8px; border-inline-start: 3px solid var(--border); background: color-mix(in srgb, var(--surface2) 70%, transparent); } .rq-ms-scr b { font-weight: 700; } .rq-ms-scr em { font-style: normal; color: var(--text-muted); } .rq-ms-scr em.ok { color: var(--success); } .rq-ms-scr i { font-style: normal; font-size: 11px; color: var(--text-muted); } .rq-ms-scr .muted { color: var(--text-muted); } .rq-ms-row.g .rq-ms-scr { border-inline-start-color: var(--lane-g); } /* v621 — من الثيم */ .rq-ms-row.g.done .rq-ms-scr { border-inline-start-color: var(--success); } .rq-ms-row.m .rq-ms-scr { border-inline-start-color: var(--lane-m); } @media (max-width: 760px) { .rq-ms-head { display: none; } .rq-ms-row { grid-template-columns: 24px minmax(0, 1fr); } .rq-ms-scr { grid-column: 2; } } /* بطاقة الكانبان: رقم المادّة ومسطرة الرحلة */ .rc-mat { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; padding: 2px 8px; border-radius: 7px; border: 1px solid color-mix(in srgb, var(--accent, #cf9f52) 55%, var(--border)); background: color-mix(in srgb, var(--accent, #cf9f52) 12%, var(--surface)); color: var(--text); margin-inline-start: auto; } .rc-mat.later { font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--text-muted); border-style: dashed; background: transparent; } .rq-rail { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: -2px 0 9px; } .rq-rs { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: var(--text-muted); padding: 2px 7px 2px 5px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface2); white-space: nowrap; } .rq-rs i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--text-muted); flex: 0 0 auto; } .rq-rs em { font-style: normal; font-weight: 500; opacity: .85; } .rq-rs.done { color: var(--text); } .rq-rs.done i { background: var(--success); border-color: var(--success); } .rq-rs.active { color: var(--text); border-color: color-mix(in srgb, var(--accent, #cf9f52) 55%, var(--border)); background: color-mix(in srgb, var(--accent, #cf9f52) 12%, transparent); } .rq-rs.active i { background: var(--accent, #cf9f52); border-color: var(--accent, #cf9f52); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #cf9f52) 25%, transparent); } .rq-rs.later { opacity: .55; } .rq-rsep { width: 10px; height: 1px; background: var(--border); flex: 0 0 auto; } /* بطاقة الأرشيف */ .arch-item.v601 .arch-item-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; } .arch-mat { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; font-weight: 700; letter-spacing: .04em; padding: 2px 9px; border-radius: 7px; border: 1px solid color-mix(in srgb, var(--accent, #cf9f52) 55%, var(--border)); background: color-mix(in srgb, var(--accent, #cf9f52) 12%, var(--surface)); } .arch-mat.none { font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--text-muted); border-style: dashed; background: transparent; } .arch-flag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--tf-warn, #e8a33d) 55%, var(--border)); color: color-mix(in srgb, var(--tf-warn, #e8a33d) 70%, var(--text)); } .arch-flag.bad { border-color: color-mix(in srgb, var(--danger, #e5484d) 55%, var(--border)); color: var(--danger, #e5484d); } .arch-people { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; font-size: 12px; color: var(--text-muted); } .arch-times { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; font-size: 11px; color: var(--text-muted); text-align: end; } .arch-times b { color: var(--text); font-weight: 700; } .msg-att-fail { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 600; padding: 8px 12px; border-radius: 10px; border: 1px dashed var(--border); background: var(--surface2); color: var(--text-muted); cursor: pointer; } .msg-att-fail:active { transform: scale(.965); } /* ═══ v604 — «كلّف»: مسؤول القسم يوزّع — الرقاقة حالةٌ محايدة، والقائمة فوق السطر لا تحت سلفٍ عليه مرشِّح ═══ */ .rq-asg { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--text-muted); padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--border); white-space: nowrap; } .rq-asg b { font-weight: 700; color: var(--text); } .rq-asgbtn { font: inherit; font-size: 11.5px; font-weight: 600; padding: 5px 12px; border-radius: 9px; cursor: pointer; color: var(--text); background: var(--surface); border: 1px solid var(--border); min-height: 40px; transition: transform .12s; } .rq-asgbtn:active { transform: scale(.965); } .rq-lane .rq-asgbtn, .rq-margin .rq-asgbtn { margin-inline-start: 6px; } .rq-asgpick { position: relative; flex: 0 0 100%; grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; margin-top: 6px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 10px 28px -14px rgba(0, 0, 0, .5); } .rq-asgh { flex: 0 0 100%; display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--text); } .rq-asgx { font: inherit; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; min-width: 32px; min-height: 32px; border-radius: 8px; } .rq-asgo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; font: inherit; font-size: 12.5px; font-weight: 600; min-height: 40px; padding: 4px 12px; border-radius: 999px; cursor: pointer; color: var(--text); background: var(--surface2); border: 1px solid var(--border); line-height: 1.25; transition: transform .12s; } .rq-asgo small { font-size: 10.5px; font-weight: 500; color: var(--text-muted); } .rq-asgo.on { border-color: color-mix(in srgb, var(--success) 60%, var(--border)); } .rq-asgo[aria-selected="true"] { border-color: var(--accent, #cf9f52); box-shadow: inset 0 0 0 1px var(--accent, #cf9f52); } .rq-asgo:disabled { opacity: .45; cursor: not-allowed; } .rq-asgo:active { transform: scale(.965); } .rq-asgo.clear { color: var(--text-muted); background: transparent; border-style: dashed; } .rq-asgnone { font-size: 12px; color: var(--text-muted); } .rq-rs em.asg { opacity: .7; text-decoration: underline dotted; text-underline-offset: 2px; } /* ═══ v605 — التقييم: نافذةٌ واحدة (tm-ov) · الصفّ عضوٌ ونجومه واتّجاهه · النجوم أزرارٌ بحجم لمس · الحفظ يمين والإلغاء يسار ═══ */ .rg-box { width: min(820px, 100%); } .rg-depts { margin-bottom: 2px; } .rg-list { display: flex; flex-direction: column; gap: 6px; } .rg-row { border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--text) 3%, transparent); } .rg-row.open { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } .rg-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px; min-height: 48px; } .rg-name { font: inherit; font-size: 13.5px; font-weight: 700; color: var(--text); background: transparent; border: 0; padding: 4px 0; cursor: pointer; text-align: start; min-height: 40px; } .rg-name:hover { text-decoration: underline dotted; text-underline-offset: 3px; } .rg-role { font-size: 11.5px; color: var(--text-muted); } .rg-stars { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; letter-spacing: .5px; color: var(--text); margin-inline-start: auto; } .rg-stars b { font-size: 12.5px; } .rg-stars small { font-size: 11px; color: var(--text-muted); } .rg-tr { font-style: normal; font-size: 11px; font-weight: 600; color: var(--text-muted); } .rg-tr.up { color: var(--success); } .rg-tr.down { color: var(--danger); } .rg-form { display: flex; flex-direction: column; gap: 8px; padding: 4px 12px 12px; border-top: 1px dashed var(--border); } .rg-team .rg-form { border-top: 0; padding: 0; } .rg-starpick { display: inline-flex; align-items: center; gap: 2px; } .rg-st { font: inherit; font-size: 24px; line-height: 1; min-width: 44px; min-height: 44px; border: 0; background: transparent; cursor: pointer; color: color-mix(in srgb, var(--text) 28%, transparent); transition: transform .08s, color .12s; } .rg-st.on { color: var(--accent-fg, var(--accent)); } /* الذهبيّ نصّاً عبر --accent-fg (v552) */ .rg-st:active { transform: scale(.9); } .rg-stlb { font-size: 12px; color: var(--text-muted); margin-inline-start: 6px; } .rg-cmt { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 10px; min-height: 44px; resize: vertical; background: var(--surface2, var(--surface)); color: var(--text); border: 1px solid var(--border); } .rg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .rg-hist { list-style: none; margin: 0; padding: 4px 12px 10px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; } .rg-hist li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 4px 0; border-top: 1px dashed var(--border); } .rg-when { font-size: 11px; color: var(--text-muted); } .rg-by { font-weight: 600; } .rg-cm { flex: 1 1 240px; color: var(--text); } .rg-lnk { font: inherit; font-size: 11.5px; border: 0; background: transparent; color: var(--text-muted); text-decoration: underline dotted; cursor: pointer; padding: 2px 4px; } .rg-sh { font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; border: 1px dashed var(--border); color: var(--text-muted); } .rg-sh.on { border-style: solid; color: var(--text); } .tm-chip.rg-chip { font: inherit; font-size: 11px; cursor: pointer; background: transparent; color: var(--text); } /* ═══ v609 — العدّاد الموقوف · حزمة المونتير سطرٌ لكلّ مادّة ═══ */ .rq-frozen { color: var(--text-muted); } .rq-wk.held { border-color: color-mix(in srgb, var(--warning, #e8a020) 45%, var(--border)); } .rq-wk.held .rq-live { color: var(--text-muted); } .rq-margin.paused { border-color: color-mix(in srgb, var(--warning, #e8a020) 45%, var(--border)); background: color-mix(in srgb, var(--warning, #e8a020) 6%, transparent); } .rq-margin.paused .rq-pausebtn, .rq-margin.work .rq-pausebtn { margin-inline-start: 0; } .rq-pkg { display: grid; } .rq-pkg-sum { display: flex; flex-wrap: wrap; gap: 6px; padding: 9px 14px; font-size: 12px; font-weight: 600; border-bottom: 1px solid color-mix(in srgb, #8a5cd6 18%, var(--border)); } .rq-pkg-sum span { padding: 2px 9px; border-radius: 999px; background: var(--surface2); color: var(--text); } .rq-pkg-r { display: grid; grid-template-columns: 118px minmax(0, 1fr) minmax(0, 1.2fr) auto auto; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid color-mix(in srgb, #8a5cd6 12%, var(--border)); font-size: 12.5px; } .rq-pkg-r:last-child { border-bottom: 0; } .rq-pkg-l { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-weight: 600; font-size: 11.5px; } .rq-pkg-v { font-weight: 700; color: var(--text); min-width: 0; overflow-wrap: anywhere; } .rq-pkg-v em { font-style: normal; font-weight: 500; color: var(--text-muted); } .rq-pkg-w { font-size: 11.5px; color: var(--text-muted); overflow-wrap: break-word; min-width: 0; } .rq-pkg-w.none { font-style: normal; opacity: .8; } .rq-pkg-st { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; } .rq-pkg-st i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong, var(--border)); } .rq-pkg-r.ok .rq-pkg-st { color: var(--text); } .rq-pkg-r.ok .rq-pkg-st i { background: var(--ok, #1fa06a); } .rq-pkg-r.wait .rq-pkg-st i { background: var(--warning, #e8a020); } .rq-pkg-r.na .rq-pkg-st i { background: transparent; } .rq-pkg-act { font: inherit; font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 9px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: transform .12s; } .rq-pkg-act:active { transform: scale(.965); } @media (max-width: 760px) { .rq-pkg-r { grid-template-columns: 1fr auto; } .rq-pkg-l { grid-column: 1 / -1; } .rq-pkg-w { grid-column: 1 / -1; } } @media (pointer: coarse) { .rq-pkg-act { min-height: 44px; padding: 8px 14px; } } /* v609 — صور النشرة: خطوات التشغيل · الأمثلة تبدو أمثلة */ .bag-steps { border: 1px solid color-mix(in srgb, var(--warning, #e8a020) 40%, var(--border)); border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; background: color-mix(in srgb, var(--warning, #e8a020) 6%, var(--surface)); } .bag-steps.done { border-color: color-mix(in srgb, var(--ok, #1fa06a) 40%, var(--border)); background: color-mix(in srgb, var(--ok, #1fa06a) 5%, var(--surface)); } .bag-steps > b { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; } .bag-steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .bag-steps li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--text-muted); } .bag-steps li i { flex: 0 0 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; font-weight: 700; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-family: 'IBM Plex Mono', monospace; } .bag-steps li.ok { color: var(--text); } .bag-steps li.ok i { background: var(--ok, #1fa06a); border-color: var(--ok, #1fa06a); color: #fff; } .bag-set .bag-in::placeholder { color: color-mix(in srgb, var(--text-muted) 70%, transparent); font-style: italic; } /* v609 — المزوّد الجديد: شرحٌ واحد تحت الحقول · الخطأ بلون الخطر */ .ai-add-help { margin: 2px 0 4px; font-size: 11.5px; line-height: 1.6; color: var(--text-muted); } .ai-add-status.is-err { color: var(--danger); font-weight: 600; } /* v609 — بوت تيليغرام: بطاقة لكلّ قسم · LED لكلّ اسم · ما لم يُجب عنه بفلاتر وصفحات */ .tfs-tgm { display: grid; gap: 12px; padding: 4px 0 8px; } .tfs-tgm-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; } .tfs-tgm-sum { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 4px 10px; flex: 1 1 280px; min-width: 0; } .tfs-tgm-sum > b { font-size: 26px; font-weight: 700; line-height: 1; } .tfs-tgm-sum > span { font-size: 12.5px; color: var(--text-muted); } .tfs-tgm-sum em { grid-column: 1 / -1; font-style: normal; font-size: 11.5px; color: var(--text-muted); } .tfs-tgm-bar { display: block; height: 6px; border-radius: 999px; background: var(--surface2); overflow: clip; min-width: 80px; } .tfs-tgm-bar > i { display: block; height: 100%; background: var(--ok, #1fa06a); border-radius: inherit; } .tfs-tgm-f { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--surface2); } .tfs-tgm-fb { font: inherit; font-size: 12px; font-weight: 600; border: 0; background: transparent; color: var(--text-muted); padding: 6px 12px; border-radius: 8px; cursor: pointer; } .tfs-tgm-fb.on { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); } .tfs-tgm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } .tfs-tgm-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 10px 12px; display: grid; gap: 8px; align-content: start; } .tfs-tgm-card > header { display: flex; align-items: center; gap: 8px; } .tfs-tgm-card > header b { font-size: 13px; font-weight: 700; } .tfs-tgm-card > header .mono { font-size: 12px; color: var(--text-muted); } .tfs-tgm-rem { margin-inline-start: auto; font-size: 11.5px; padding: 4px 10px; } .tfs-tgm-cs { display: flex; flex-wrap: wrap; gap: 6px; } .tfs-tgm-c { font: inherit; font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); cursor: pointer; transition: transform .12s; } .tfs-tgm-c:active:not([disabled]) { transform: scale(.965); } .tfs-tgm-c[disabled] { cursor: default; } .tfs-tgm-c i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong, var(--text-muted)); } .tfs-tgm-c.on i { background: var(--ok, #1fa06a); box-shadow: 0 0 6px color-mix(in srgb, var(--ok, #1fa06a) 60%, transparent); } .tfs-tgm-c.sent i { background: var(--warning, #e8a020); } .tfs-tgm-card.all { opacity: .85; } .tfs-tgq2 { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); } .tfs-tgq2-h { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; } .tfs-tgq2-cards { display: flex; flex-wrap: wrap; gap: 8px; } .tfs-tgq2-k { font: inherit; display: grid; gap: 2px; min-width: 110px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; text-align: start; transition: transform .12s; } .tfs-tgq2-k:active { transform: scale(.965); } .tfs-tgq2-k b { font-size: 18px; font-weight: 700; } .tfs-tgq2-k span { font-size: 11.5px; color: var(--text-muted); font-weight: 600; } .tfs-tgq2-k.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .tfs-tgq2-p { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); font-weight: 600; } .tfs-tgq2-p select { font: inherit; font-size: 12.5px; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); } .tfs-tgq2-list { display: grid; border: 1px solid var(--border); border-radius: 12px; } .tfs-tgq2-r { font: inherit; display: grid; grid-template-columns: 112px 120px 140px minmax(0, 1fr); align-items: start; gap: 4px 12px; padding: 9px 12px; text-align: start; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; font-size: 12.5px; } .tfs-tgq2-r:last-child { border-bottom: 0; } .tfs-tgq2-r > .mono { color: var(--text-muted); font-size: 11.5px; } .tfs-tgq2-r > em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .tfs-tgq2-t { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: clip; min-width: 0; } .tfs-tgq2-a { display: none; grid-column: 4; font-size: 11.5px; color: var(--text-muted); } .tfs-tgq2-r.open .tfs-tgq2-t { -webkit-line-clamp: unset; display: block; } .tfs-tgq2-r.open .tfs-tgq2-a { display: block; } .tfs-tgq2-more { justify-self: center; } @media (max-width: 760px) { .tfs-tgq2-r { grid-template-columns: 1fr 1fr; } .tfs-tgq2-t, .tfs-tgq2-a { grid-column: 1 / -1; } } /* ═══ v610 — لوحة الهواء حيّة: نبض الأرقام · شرائح تُضاء تباعاً · التالي يقترب · المتأخّر يتنفّس · ختم البثّ · العاجل بمؤشّر ═══ */ #onair-board .oab-card { position: relative; will-change: transform; } #onair-board .oab-card.late::after, #onair-board .oab-card.risk::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; border: 2px solid var(--danger); animation: oab-breathe 3s ease-in-out infinite; } @keyframes oab-breathe { 0%, 100% { opacity: .15; box-shadow: 0 0 0 0 transparent; } 50% { opacity: 1; box-shadow: 0 0 22px color-mix(in srgb, var(--danger) 35%, transparent); } } #onair-board .oab-stat.bump-up b { animation: oab-bump-up 1.1s cubic-bezier(.2, 1.4, .4, 1) both; } #onair-board .oab-stat.bump-down b { animation: oab-bump-down .9s ease-out both; } @keyframes oab-bump-up { 0% { transform: scale(1); } 30% { transform: scale(1.22); color: var(--success); text-shadow: 0 0 18px color-mix(in srgb, var(--success) 55%, transparent); } 100% { transform: scale(1); } } @keyframes oab-bump-down { 0% { opacity: 1; } 40% { opacity: .35; transform: translateY(3px); } 100% { opacity: 1; transform: none; } } #onair-board .oab-vu-bar i.fresh { animation: oab-seg .5s ease-out var(--d, 0ms) both; } @keyframes oab-seg { 0% { background: var(--surface2); box-shadow: none; } 60% { box-shadow: 0 0 10px color-mix(in srgb, var(--success) 70%, transparent); } } #onair-board .oab-nx.soon { border-color: color-mix(in srgb, var(--warning, #e8a020) 70%, var(--border)); animation: oab-soon 2s ease-in-out infinite; } #onair-board .oab-nx.soon .oab-nx-cd, #onair-board .oab-nx.now .oab-nx-cd { color: var(--warning, #e8a020); font-weight: 700; } #onair-board .oab-nx.now { border-color: var(--warning, #e8a020); background: color-mix(in srgb, var(--warning, #e8a020) 10%, var(--surface)); animation: oab-soon .9s ease-in-out infinite; } @keyframes oab-soon { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning, #e8a020) 28%, transparent); } } #onair-board .oab-aired-it { position: relative; } #onair-board .oab-seal { position: absolute; inset-inline-end: 12px; top: 50%; display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; pointer-events: none; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .5px; color: var(--success); border: 2px solid var(--success); border-radius: 6px; background: color-mix(in srgb, var(--success) 8%, var(--surface)); transform: translateY(-50%) rotate(-8deg); animation: oab-seal 5s ease-out both; } #onair-board .oab-seal b { font-family: var(--tf-mono, 'IBM Plex Mono', monospace); font-weight: 700; direction: ltr; unicode-bidi: isolate; } @keyframes oab-seal { 0% { opacity: 0; transform: translateY(-50%) rotate(-8deg) scale(1.9); } 12% { opacity: 1; transform: translateY(-50%) rotate(-8deg) scale(.94); } 18% { transform: translateY(-50%) rotate(-8deg) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50%) rotate(-8deg) scale(1); } } #onair-board .oab-tk-lbl.urg { gap: 8px; } #onair-board .oab-tk-lbl.urg::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; animation: oab-pulse 1s ease-in-out infinite; } /* ═══ v610 — الفقرات في الطلب: بطاقاتٌ طائرة بظلٍّ خفيف · مسح ضوءٍ مرّةً عند الوصول · ما لك أوضح وما للسياق أخفت ═══ غلاسٌ بصريّ بلا blur (كروتٌ متكرّرة) — حدٌّ لمّاعٌ داخليّ وتدرّجٌ هادئ، ولون القسم على الحافّة. */ .rv-raw .rqp-rows { gap: 10px; } .rv-raw .rqp-row { border: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 14px; padding: 13px 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #fff 4%), var(--surface)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 9%, transparent), 0 6px 18px rgba(0, 0, 0, .07), 0 1px 3px rgba(0, 0, 0, .06); transition: box-shadow .2s, transform .2s; } .rv-raw .rqp-row:last-child { border-bottom: 1px solid var(--border); } .rv-raw .rqp-row.lane-g { border-inline-start: 3px solid var(--lane-g); } .rv-raw .rqp-row.lane-m { border-inline-start: 3px solid var(--lane-m); } .rv-raw .rqp-row.lane-b { border-inline-start: 3px solid var(--lane-b); } .rv-raw .rqp-row.lane-n { border-inline-start: 3px solid var(--lane-n); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent); } .rv-raw .rqp-row:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent), 0 10px 26px rgba(0, 0, 0, .1), 0 2px 4px rgba(0, 0, 0, .06); } .rv-raw .rqp-row.for-me { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 10px 26px color-mix(in srgb, var(--accent) 14%, transparent); } .rv-raw .rqp-row.rqp-ctx { box-shadow: none; background: transparent; } .rv-raw .rqp-row.done, .rv-raw .rqp-row.mine-done { box-shadow: none; background: color-mix(in srgb, var(--surface2) 70%, transparent); } .rv-raw .rqp-row.sweep::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, #fff 26%, transparent) 48%, transparent 66%); background-size: 260% 100%; animation: rqp-sweep 1.15s ease-out calc(var(--i, 0) * 90ms) 1 both; } [dir="rtl"] .rv-raw .rqp-row.sweep::before { animation-name: rqp-sweep-rtl; } @keyframes rqp-sweep { from { background-position: 130% 0; } to { background-position: -30% 0; } } @keyframes rqp-sweep-rtl { from { background-position: -30% 0; } to { background-position: 130% 0; } } @media (prefers-reduced-motion: reduce) { .rv-raw .rqp-row.sweep::before { animation: none; } .rv-raw .rqp-row:hover { transform: none; } } /* ═══ v611 — مسار الطلب: غيِّر المسار · خطّة القسم · طلب التعديل ═══ اللون للمعنى: التعديل المفتوح وحده يأخذ لون الانتباه (ينتظر عملاً الآن)، والباقي محايد. TakeFlow Tv - تصميم وتطوير محمد قندقلي */ .rq-flow { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--surface2) 70%, transparent); font-size: 12.5px; } .rq-flow p { margin: 6px 0 0; color: var(--text-muted); line-height: 1.7; } .rq-flow-h { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .rq-flow-h b { font-weight: 700; color: var(--text); } .rq-flow-h em { margin-inline-start: auto; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .rq-flow-h em.ok, .rq-ed-h em.ok { color: var(--success); } .rq-flow-h svg { flex: 0 0 auto; color: var(--text-muted); } .rq-flow.plan.wait { border-style: dashed; } .rq-flow.edits.open { border-color: color-mix(in srgb, var(--warning) 55%, var(--border)); } .rq-flow.edits.open > .rq-flow-h svg { color: var(--warning); } .rq-flow-a { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .rq-flow-a button, .rq-flow-bar button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); transition: transform .12s ease, border-color .15s ease; } .rq-flow-a button:active, .rq-flow-bar button:active { transform: scale(.965); } .rq-flow-a button:hover, .rq-flow-bar button:hover { border-color: var(--border-strong, var(--accent)); } .rq-flow-a .rq-flow-pri { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #0a0e1a); font-weight: 700; } .rq-flow-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; } .rq-pref, .rq-plan-pref span { display: inline-block; margin-inline-start: 5px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 11px; font-weight: 600; } .rq-ed { margin-top: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); } .rq-ed.done { opacity: .72; } .rq-ed-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rq-ed-h span { color: var(--text-muted); font-size: 11.5px; } .rq-ed-h em { margin-inline-start: auto; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--warning); } .rq-ed-d { display: grid; gap: 4px; margin-top: 6px; font-size: 12px; line-height: 1.7; } .rq-ed-d del { color: var(--text-muted); text-decoration-color: color-mix(in srgb, var(--danger) 70%, transparent); } .rq-ed-d ins { text-decoration: none; color: var(--text); border-inline-start: 2px solid var(--success); padding-inline-start: 7px; } /* النوافذ: غيِّر المسار · اطلب تعديلاً · الخطّة */ .rqe-box.rq-steer, .rqe-box.rq-plan { width: min(560px, 100%); } .rqe-box.rq-plan { width: min(760px, 100%); max-height: min(86vh, 900px); display: flex; flex-direction: column; } .rq-steer-o { display: grid; gap: 8px; margin: 10px 0; } .rq-steer-o label { display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px; border: 1px solid var(--border); border-radius: 11px; cursor: pointer; background: var(--surface2); } .rq-steer-o label:has(input:checked) { border-color: var(--accent); } .rq-steer-o label.off { opacity: .5; cursor: not-allowed; } .rq-steer-o span { display: grid; gap: 2px; } .rq-steer-o b { font-weight: 700; } .rq-steer-o em { font-style: normal; font-size: 12px; color: var(--text-muted); line-height: 1.6; } .rq-steer-w { display: grid; gap: 5px; margin: 8px 0; font-size: 12px; font-weight: 600; color: var(--text-muted); } .rq-steer-w select { padding: 7px 9px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font: inherit; } .rq-steer-hint { margin: 4px 0 8px; font-size: 11.5px; color: var(--text-muted); } .rq-steer-err { min-height: 1em; margin: 4px 0; font-size: 12px; font-weight: 600; color: var(--danger); } .rq-plan-pref { margin: 6px 0 8px; font-size: 12px; color: var(--text-muted); } .rq-plan-rows { display: grid; gap: 8px; overflow: auto; min-height: 0; flex: 1 1 auto; padding-inline-end: 2px; } .rq-plan-r { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface2); } .rq-plan-r p { margin: 0; font-size: 12.5px; line-height: 1.75; white-space: pre-wrap; } .rq-plan-n { font-size: 11px; color: var(--text-muted); padding-top: 2px; } .rq-plan-f { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .rq-plan-f select, .rq-plan-f input { padding: 6px 8px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 12px; } .rq-plan-f input { flex: 1 1 180px; min-width: 0; } .rq-plan-f select:disabled, .rq-plan-f input:disabled { opacity: .5; } .rq-plan-m { padding: 5px 9px; border-radius: 9px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font: inherit; font-size: 11.5px; cursor: pointer; } /* الطلب السريع — خيار «دع القسم يقسّم» */ .fr-crew { margin: 0 0 8px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 10px; } .fr-crew[hidden] { display: none; } .fr-crew.on { border-style: solid; border-color: var(--accent); } .fr-crew-t { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; } .fr-crew-t span { display: grid; gap: 2px; } .fr-crew-t b { font-size: 12.5px; font-weight: 700; } .fr-crew-t em { font-style: normal; font-size: 11.5px; color: var(--text-muted); line-height: 1.6; } .fr-crew-pref { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; align-items: center; } .fr-crew-k { flex: 1 0 100%; font-size: 11px; font-weight: 600; color: var(--text-muted); } .fr-crew-c { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: transform .12s ease; } .fr-crew-c:active { transform: scale(.965); } .fr-crew-c.on { border-color: var(--c, var(--accent)); box-shadow: inset 0 0 0 1px var(--c, var(--accent)); } /* ═══ v612 — «علِّمه» تحت سطر ما لم يُجب عنه: يظهر مع فتح السطر ═══ */ .tfs-tgq2-teach { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; padding: 8px 12px 10px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface2) 70%, transparent); } .tfs-tgq2-teach[hidden] { display: none; } .tfs-tgq2-teach label { display: grid; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .tfs-tgq2-teach select, .tfs-tgq2-teach input { font: inherit; font-size: 12.5px; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); min-width: 160px; } /* ═══════════════════════════════════════════════════════════════════ v615 — TakeFlow Tv - تصميم وتطوير محمد قندقلي ═══════════════════════════════════════════════════════════════════ */ /* الحال الموقوفة على بطاقة الكانبان: محايدة لا لون عمل */ .status-badge.is-held { background: var(--surface2); color: var(--text-muted); border: 1px dashed var(--border); } .grc-who-wk.held .rq-live { opacity: .75; } /* ═══ النوافذ في ثيمَي الزجاج: سطحٌ مُصمَت ═══ سطح الزجاج الفاتح أبيض ٧٢٪ والغامق ٥٥٪ — يصلح فوق الخلفية الملوّنة، لا فوق ستارة النافذة السوداء (٦٠–٧٥٪): يأخذ لونها فتبدو النافذة كلّها رماديّة باهتة (مهامّ الخانة · بطاقة الإجازات · وسبعون غيرها). داخل الستارة يصير السطح لونَه نفسه فوق خلفية الثيم مدموجاً — بلا شفافية — كما صُلح الدرج في v537. والـblur خلف سطحٍ مُصمَت كلفةٌ بلا أثر. */ body[data-theme="glasslight"] :is(.modal-overlay, .write-modal-overlay, .rqe-ov, .tm-ov, .ms-ov, .scb-ov, .bi-ov, .wo-ov, .tw-ov, .tl-ov, .tf-bs-ov, .tcr-ov, .tc-ov, .sup-ov, .sb-pick-overlay, .rqm-ov, .mailcmd-overlay, .bag-ov, .aip-lib-ov, .report-fs-overlay, .rqp-pop) { --surface: #fafcfe; } body[data-theme="glass"] :is(.modal-overlay, .write-modal-overlay, .rqe-ov, .tm-ov, .ms-ov, .scb-ov, .bi-ov, .wo-ov, .tw-ov, .tl-ov, .tf-bs-ov, .tcr-ov, .tc-ov, .sup-ov, .sb-pick-overlay, .rqm-ov, .mailcmd-overlay, .bag-ov, .aip-lib-ov, .report-fs-overlay, .rqp-pop) { --surface: #13192c; } body[data-theme="glass"] .modal-overlay > .modal, body[data-theme="glasslight"] .modal-overlay > .modal { -webkit-backdrop-filter: none; backdrop-filter: none; } /* ═══ صفحة الطلب: شريط إجراءاته وحده أسفل الشاشة ═══ الشريط لاصقٌ أسفل الشاشة (12px · z 40) والكبسولة ثابتةٌ في الحزام نفسه (16px · z 140): تغطّي «نقاش الطلب» طوال التمرير وتختفي عند آخر الصفحة وحده. رفعُ الشريط فوقها جرّبتُه فاصطدم بفقاعة الدردشة (#chat-widget · 90px) — ثلاث طبقاتٍ في زاويةٍ واحدة. والصفحة لها شريطها الكامل، فالكبسولة تغيب هنا كما تغيب في الرسائل والمساعد. */ body:has(#page-reqview.active) #tf-quickbar { display: none !important; } /* ═══ ☰ داخل بطاقة الحساب، والدرج من جهتها ═══ الزرّ في طرف البطاقة بخيطٍ فاصل؛ الضغط عليه لا يفتح «ملفّي». والدرج من جهته (#tf-menu أعلاه). */ @media (min-width: 901px) { /* ☰ مخفيٌّ تحت ٩٠٠ (قائمة الهاتف السفليّة) — الحجم للمكتب وحده */ .user-badge > .tf-menu-btn { width: 30px; height: 30px; margin: -3px 0; margin-inline-start: 2px; margin-inline-end: -8px; border-radius: 0 999px 999px 0; border: 0; border-inline-start: 1px solid var(--border); color: var(--text-muted); } html[dir="ltr"] .user-badge > .tf-menu-btn { border-radius: 999px 0 0 999px; } .user-badge > .tf-menu-btn:hover, .user-badge > .tf-menu-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--text) 8%, transparent); border-color: var(--border); color: var(--text); } } /* ═══ مركز الدعم: اللوحة محايدة — المشبع لزرّ الإرسال وحده ═══ الرأس والتبويبات والإطار كانت بالأحمر الزهريّ كلّها، فلا يُعرف ما يحتاج الانتباه. و«انحلّت» كان أخضر فاتحاً على الأبيض (يُقرأ معطّلاً). الحذف للأدمن: محايدٌ معزولٌ في الطرف الآخر من الصفّ. */ .sup-in { border-color: var(--border); } .sup-h { background: var(--surface); } .sup-ic { background: var(--surface2); border-color: var(--border); color: var(--text-muted); } .sup-tb.on { color: var(--text); border-color: var(--border-strong, var(--border)); background: var(--surface2); } .sup-tb b { color: var(--text-muted); } .sup-mini.ok, .sup-mini.done { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); background: color-mix(in srgb, var(--success) 10%, var(--surface)); } .sup-mini.sup-del { margin-inline-start: auto; color: var(--text-muted); } .sup-mini.sup-del:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); } .sup-rep b { color: var(--success); } .sup-dev { margin-top: 8px; font-size: 11px; color: var(--text-muted); } .sup-dev summary { cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; } .sup-dev pre { margin: 6px 0 0; padding: 8px 10px; border-radius: 9px; border: 1px dashed var(--border); background: var(--surface); font: 500 10.5px/1.8 'IBM Plex Mono', ui-monospace, monospace; white-space: pre-wrap; word-break: break-word; } .sup-log { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 10.5px; color: var(--text-muted); } .sup-tk.sup-flash { box-shadow: 0 0 0 2px var(--accent); transition: box-shadow .3s; } /* ═══ عدّاد تنزيل التحديث: كبسولةٌ أسفل الشاشة وسطرٌ في بطاقة التطبيق المكتبيّ ═══ */ .tf-updm { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .tf-updm-t { white-space: nowrap; } .tf-updm-bar { position: relative; flex: 0 0 160px; height: 7px; border-radius: 99px; background: var(--surface2); border: 1px solid var(--border); overflow: clip; } .tf-updm-bar i { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; border-radius: inherit; background: var(--accent); transition: width .35s var(--g-ease, ease); } .tf-updm-n { min-width: 3.2em; text-align: end; font-size: 12px; } .tfs-desk-upd:empty { display: none; } .tfs-desk-upd { margin-top: 10px; } .tf-updm.in-card { display: flex; } .tf-updm.in-card .tf-updm-bar { flex: 1 1 auto; } @media (prefers-reduced-motion: reduce) { .tf-updm-bar i { transition: none; } } /* ملاحظة مصدر التحديث الخارجيّ: محايدة — ليست خطأ */ .rel-note { display: flex; align-items: flex-start; gap: 7px; margin: 0; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 500; line-height: 1.8; color: var(--text-muted); background: var(--surface2); border: 1px solid var(--border); } .rel-note svg { flex: none; margin-top: 3px; } /* ═══════════════════════════════════════════════════════════════════ v616 — مصير الطلب المتأخّر · لوحة الهواء: المتأخّر مطويّ · قيد التحضير · الهدوء جملةٌ ثابتة ═══════════════════════════════════════════════════════════════════ */ .rq-late { margin: 0 0 12px; padding: 11px 13px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border)); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); } .rq-late.stop { border-color: var(--border); background: var(--surface2); } .rq-late-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rq-late-h b { font-size: 13.5px; font-weight: 700; color: var(--text); } .rq-late:not(.stop) .rq-late-h svg { color: var(--danger); } .rq-late-h em { font-style: normal; font-size: 12px; color: var(--text-muted); margin-inline-start: auto; } .rq-late p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--text-muted); } .rq-late-a { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .rq-late-a button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: transform .1s; } .rq-late-a button:active { transform: scale(.965); } .rq-late-a .rq-late-pri { background: var(--accent); border-color: transparent; color: var(--accent-ink, #14141f); } .rq-late-box .rq-late-was { margin: 4px 0 10px; font-size: 12.5px; color: var(--text-muted); line-height: 1.8; } .rq-late-dt { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .rq-late-dt label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-muted); flex: 1 1 140px; } .rq-late-dt .rqe-in { padding: 8px 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; } .countdown-bar.countdown-stop { background: var(--surface2); color: var(--text-muted); border: 1px dashed var(--border); } .arch-flag.stop { color: var(--text-muted); border-color: var(--border); background: var(--surface2); } /* لوحة الهواء */ .oab-od:empty { display: none; } .oab-od-box { border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--surface) 88%, transparent); } .oab-od-box > summary { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; list-style: none; min-height: 40px; } .oab-od-box > summary::-webkit-details-marker { display: none; } .oab-od-box > summary b { font-size: 15px; font-weight: 700; color: var(--danger); } .oab-od-box > summary .oab-n { margin-inline-start: 0; color: var(--danger); } .oab-od-box > summary em { font-style: normal; font-size: 13px; color: var(--text-muted); min-width: 0; white-space: nowrap; overflow: clip; text-overflow: ellipsis; } .oab-od-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px; padding: 0 10px 10px; } .oab-od-it { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2); } .oab-od-t { display: flex; flex-direction: column; min-width: 0; } .oab-od-t b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: clip; text-overflow: ellipsis; } .oab-od-t em { font-style: normal; font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; } .oab-od-ago { font-size: 12.5px; font-weight: 600; color: var(--danger); white-space: nowrap; } .oab-led.l-late { background: var(--danger); animation: oab-pulse 2s ease-in-out infinite; } .oab-led.l-prep { background: var(--text-muted); } .oab-prep:empty { display: none; } .oab-prep { border: 1px dashed var(--border); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; background: transparent; } .oab-prep > header { display: flex; align-items: center; gap: 8px; padding: 4px 4px 6px; } .oab-prep > header b { font-size: 14px; font-weight: 700; color: var(--text-muted); } .oab-prep > header .oab-n { font-size: 13px; } .oab-fold { margin-inline-start: 6px; padding: 3px 10px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; cursor: pointer; } .oab-prep-list { display: flex; flex-direction: column; gap: 5px; } .oab-prep-it { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; border: 1px solid var(--border); } .oab-prep-t { display: flex; flex-direction: column; min-width: 0; flex: 1; } .oab-prep-t b { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: clip; text-overflow: ellipsis; } .oab-prep-t em { font-style: normal; font-size: 11.5px; color: var(--text-muted); } .oab-pin { color: var(--text-muted); display: inline-flex; } .oab-tk-calm { justify-content: center; } .oab-tk-calm .oab-tk-it { color: var(--text-muted); } /* ═══════════════════════════════════════════════════════════════════ v617 — إدارة غرفة الأخبار · من يدير أيّ قسم · علامة «دعم» · الملاحظة الإداريّة ═══════════════════════════════════════════════════════════════════ */ .rqe-box.sched-dir { width: min(460px, 100%); } .sched-dir > b { font-size: 15px; font-weight: 700; color: var(--text); } .sched-dir > p { margin: 0; font-size: 13px; line-height: 1.85; color: var(--text-muted); } .rqe-btns button:active { transform: scale(.965); } /* المصفوفة: القسم ← من يديره (قراءة) */ .tfs-mx { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: clip; } .tfs-mx-r { display: grid; grid-template-columns: minmax(110px, 30%) 1fr; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--border); } .tfs-mx-r:first-child { border-top: 0; } .tfs-mx-r > b { font-size: 13px; font-weight: 600; color: var(--text); } .tfs-mx-r > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; } .tfs-mx-r em { font-style: normal; font-size: 12px; color: var(--text-muted); } .tfs-mx-n { font-style: normal; font-size: 12.5px; font-weight: 600; padding: 2px 10px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); } .tfs-mx-n.own { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .tfs-mx-r.none > b { color: var(--text-muted); } .tfs-mx-r.dir { background: color-mix(in srgb, var(--surface2) 60%, transparent); } .tfs-scm-h .tfs-scm-x { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; cursor: pointer; } .tfs-scm-h .tfs-scm-x:active { transform: scale(.965); } .tfs-scm-add { margin-top: 10px; max-width: 360px; } .tfs-esc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; } .tfs-esc-f { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); } .tfs-esc-f input { width: 74px; text-align: center; } .tfs-esc-f em { font-style: normal; font-weight: 500; } /* الملاحظة الإداريّة في مركز الدعم: محايدة — لمن تصل يُقال بالاسم */ .sup-priv { margin: -4px 0 14px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface2); display: grid; gap: 7px; } .sup-chk { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; } .sup-chk input { width: 16px; height: 16px; accent-color: var(--accent); } .sup-priv-to { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.8; color: var(--text-muted); } .sup-priv-to svg { flex: none; margin-top: 4px; } .sup-priv-to b { color: var(--text); font-weight: 600; } /* ═══════════════════════════════════════════════════════════════════ v618 — بطاقة الإجازات بتبويبات · السجلّ يقود إلى أسبوعه · نافذة مهامّ الخانة · ملفّ الموظّف ═══════════════════════════════════════════════════════════════════ */ .mlc-tabs { display: flex; gap: 4px; padding: 8px 14px 0; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; } .mlc-tabs::-webkit-scrollbar { display: none; } .mlc-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; } .mlc-tab em { font-style: normal; font-size: 11.5px; color: var(--text-muted); } .mlc-tab.on { color: var(--text); border-bottom-color: var(--accent); } .mlc-tab:active { transform: scale(.965); } @media (max-width: 560px) { .mlc-tabs { padding: 6px 8px 0; gap: 2px; } .mlc-tab { flex: 1 1 0; min-width: 0; justify-content: center; padding: 8px 4px; font-size: 13px; gap: 4px; } } .mlc-pane[hidden] { display: none; } .mlc-pane > .mlc-sec:first-child, .mlc-pane > .mlc-archive-title:first-child { margin-top: 0; border-top: 0; padding-top: 0; } button.mlc-rec { width: 100%; font: inherit; color: var(--text); text-align: start; cursor: pointer; } button.mlc-rec:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } button.mlc-rec:active { transform: scale(.985); } .mlc-rec-ic { display: inline-flex; } .mlc-rec-go { color: var(--text-muted); display: inline-flex; } .mlc-arc-hint { font-size: 11.5px; font-weight: 500; color: var(--text-muted); margin-inline-start: 6px; } .mlc-bal-top svg { vertical-align: -2px; } .sched-jump { outline: 2px solid var(--accent); outline-offset: -2px; animation: sched-jump 1.2s ease-in-out 2; } @keyframes sched-jump { 50% { outline-color: transparent; } } @media (prefers-reduced-motion: reduce) { .sched-jump { animation: none; } } .hrf-open-btn [data-ico] { display: inline-flex; } .req-hr-link { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 4px; padding: 6px 10px; border-radius: 9px; border: 1px dashed var(--border); background: transparent; color: var(--text-muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .req-hr-link:active { transform: scale(.965); } /* نافذة مهامّ الخانة */ .modal.tkm { display: flex; flex-direction: column; gap: 12px; } .tkm-list { display: flex; flex-direction: column; gap: 6px; } .tkm-it { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 10px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface2); } .tkm-it .tk-led { margin-top: 6px; } .tkm-it.st-late { border-color: color-mix(in srgb, var(--danger, #e5484d) 55%, var(--border)); } .tkm-it.st-done .tkm-t { color: var(--text-muted); } .tkm-main { min-width: 0; display: grid; gap: 4px; } .tkm-t { font-size: 14px; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; } .tkm-t b { color: var(--text-muted); font-weight: 600; } .tkm-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-muted); } .tkm-meta b { color: var(--text); font-weight: 600; } .tkm-st { font-weight: 600; } .tkm-it.st-late .tkm-st { color: var(--danger, #e5484d); } .tkm-note { font-size: 12.5px; line-height: 1.7; color: var(--text); padding: 6px 9px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); } .tkm-acts { display: flex; align-items: center; gap: 6px; } .tkm-b, .tkm-x { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 5px 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; } .tkm-x { color: var(--text-muted); padding: 5px 8px; } .tkm-b:active, .tkm-x:active { transform: scale(.965); } .tkm-clear { display: flex; justify-content: flex-end; } .tkm-empty { color: var(--text-muted); font-size: 13px; padding: 6px 0; } .tkm-add { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); } .tkm-add .field { margin: 0; } .tkm-add .field label { font-size: 12px; } .tkm-add input, .tkm-add select { width: 100%; } .tkm-row { display: grid; grid-template-columns: 96px minmax(120px, 1fr) auto; gap: 8px; align-items: end; } .tkm-go { margin: 0; width: auto; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; white-space: nowrap; } @media (max-width: 520px) { .tkm-row { grid-template-columns: 1fr 1fr; } .tkm-go { grid-column: 1 / -1; justify-content: center; min-height: 44px; } .tkm-it { grid-template-columns: auto 1fr; } .tkm-acts { grid-column: 2; } .tkm-b, .tkm-x { min-height: 40px; } } /* ملفّ الموظّف */ .write-modal.mp-card { max-width: 720px; width: 100%; display: flex; flex-direction: column; max-height: 90vh; } .mp-roles { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-inline-start: 6px; } .mp-body { padding: 16px 18px 18px; overflow-y: auto; min-height: 0; } .mp-pane[hidden] { display: none; } .mp-sec { font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin: 0 0 8px; } .mp-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; } .mp-day { display: grid; gap: 3px; padding: 8px 6px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2); text-align: center; min-width: 0; } .mp-day span { font-size: 11.5px; color: var(--text-muted); } .mp-day b { font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; } .mp-day.now { border-color: var(--accent); } .mp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 14px; } .mp-tile { display: grid; gap: 2px; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); } .mp-tile b { font-size: 22px; font-weight: 700; } .mp-tile span { font-size: 12px; color: var(--text-muted); } .mp-tile.late b { color: var(--danger, #e5484d); } .mp-acts { display: flex; flex-wrap: wrap; gap: 8px; } .mp-acts .btn-submit { width: auto; margin: 0; display: inline-flex; align-items: center; gap: 6px; } .mp-tools { display: grid; gap: 8px; margin-bottom: 10px; } .mp-tools input { width: 100%; } .mp-seg { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2); justify-self: start; } .mp-seg button { min-height: 32px; padding: 4px 12px; border-radius: 8px; border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .mp-seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.12); } .mp-seg button:active { transform: scale(.965); } .mp-wl { display: flex; flex-direction: column; gap: 6px; } .mp-w { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font: inherit; text-align: start; cursor: pointer; } .mp-w:active { transform: scale(.985); } .mp-w-r { font-size: 11.5px; font-weight: 600; color: var(--text-muted); padding: 2px 8px; border-radius: 99px; border: 1px solid var(--border); } .mp-w-t { min-width: 0; font-size: 13.5px; font-weight: 600; overflow: clip; text-overflow: ellipsis; white-space: nowrap; } .mp-w-s { font-size: 12px; color: var(--text-muted); } .mp-w.st-stop .mp-w-s { color: var(--text-muted); text-decoration: line-through; } .mp-w-d { font-size: 12px; color: var(--text-muted); } .mp-more { align-self: center; padding: 7px 14px; border-radius: 9px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font: inherit; font-size: 12.5px; cursor: pointer; } @media (max-width: 560px) { .mp-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mp-w { grid-template-columns: 1fr auto; } .mp-w-r { grid-column: 1 / -1; justify-self: start; } .mp-w-d { display: none; } } /* ═══════════════════════════════════════════════════════════════════ v619 — بطاقة الفقرة: النوع بأيقونته · المصدر رقاقة · الفكرة نصٌّ حرّ · «⋯» والحذف معزول · مقبض السحب ═══════════════════════════════════════════════════════════════════ */ .rqp-kico { display: inline-flex; margin-inline-end: 4px; vertical-align: -2px; } .rqp-src { display: inline-flex; align-items: center; gap: 4px; margin-inline-end: 6px; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 11.5px; font-weight: 600; vertical-align: 1px; } .rqp-ref svg { vertical-align: -2px; } .rqp-idea .rqi-ic { display: inline-flex; color: var(--text-muted); flex-shrink: 0; } .rqp-idea b { font-weight: 600; } .rqp-auth { display: inline-flex; align-items: center; gap: 2px; } .rqp-grip { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 32px; border-radius: 8px; color: var(--text-muted); cursor: grab; opacity: .6; } .rqp-grip:hover { opacity: 1; background: var(--surface2); } .rqp-grip.off { cursor: not-allowed; opacity: .25; } .rqp-more { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; } .rqp-more:hover, .rqp-more:focus-visible { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .rqp-more:active { transform: scale(.965); } @media (max-width: 480px) { .rqp-more { width: 44px; height: 44px; } .rqp-grip { display: none; } } /* الهاتف: الترتيب من «⋯» — السحب للفأرة */ .rqp-row.dragging { opacity: .45; } .rqp-row.drop-on { outline: 2px dashed var(--accent); outline-offset: 2px; } .rqp-pop { position: fixed; z-index: 2147483300; min-width: 230px; max-width: min(320px, calc(100vw - 20px)); max-height: min(72vh, 540px); overflow-y: auto; padding: 6px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 18px 44px -16px rgba(0,0,0,.45); } .rqp-pop.wide { max-width: min(480px, calc(100vw - 20px)); } .rqp-mi { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; text-align: start; cursor: pointer; } .rqp-mi svg { flex: none; color: var(--text-muted); } .rqp-mi span { display: flex; flex-direction: column; min-width: 0; } .rqp-mi em { font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--text-muted); } .rqp-mi:hover:not([disabled]), .rqp-mi:focus-visible { background: var(--surface2); outline: none; } .rqp-mi[disabled] { opacity: .45; cursor: not-allowed; } .rqp-mi.on { background: color-mix(in srgb, var(--accent) 12%, transparent); } .rqp-mi.del, .rqp-mi.del svg { color: var(--text-muted); } .rqp-msep { height: 1px; margin: 6px 4px; background: var(--border); } .rqp-mback { display: inline-flex; align-items: center; gap: 6px; margin: 2px 2px 6px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font: inherit; font-size: 12.5px; cursor: pointer; } .rqp-mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6px; } .rqp-mcol { min-width: 0; } .rqp-mg { font-size: 11.5px; font-weight: 600; color: var(--text-muted); padding: 6px 10px 2px; } @media (max-width: 480px) { .rqp-mgrid { grid-template-columns: 1fr; } .rqp-mi { min-height: 44px; } } .fri-src { flex: 0 1 auto; min-width: 0; max-width: 130px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 12px; padding: 3px 6px; } /* ═══════════════════════════════════════════════════════════════════ v620 — رسالة الصباح في إعدادات البوت: الساعة قائمةٌ لا رقمٌ يُكتب ═══════════════════════════════════════════════════════════════════ */ .tfs-esc-f select { width: auto; min-width: 92px; text-align: center; } /* مهامّ ملفّ الموظّف — أصنافه وحده: ضوء الحال ونصّ المهمّة (بلا عمود أزرار — الإنجاز من نافذة المهامّ) */ .mp-tks { display: flex; flex-direction: column; gap: 8px; } .mp-tk { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface2); } .mp-tk .tk-led { margin-top: 6px; } .mp-tk.st-late { border-color: color-mix(in srgb, var(--danger, #e5484d) 55%, var(--border)); } .mp-tk.st-done .mp-tk-t { color: var(--text-muted); } .mp-tk-main { min-width: 0; display: grid; gap: 4px; } .mp-tk-t { font-size: 14px; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; } .mp-tk-t b { color: var(--text-muted); font-weight: 600; } .mp-tk-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-muted); } .mp-tk-meta b { color: var(--text); font-weight: 600; } .mp-tk-st { font-weight: 600; } .mp-tk.st-late .mp-tk-st { color: var(--danger, #e5484d); } .mp-tk-note { font-size: 12.5px; line-height: 1.7; color: var(--text); padding: 6px 9px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); } .mp-tk-empty { padding: 18px 8px; text-align: center; font-size: 13px; color: var(--text-muted); } /* ════════════════════════════════════════════════════════════════════ v621 — جلود بطاقة الفقرة (rqk-*): سجلّ البثّ · أمر العمل · يُقال ويُرى الذرّات (المفتاح · قبول وبدء · مع فلان · «⋯» · المقبض · الفكرة · العقد) أصنافها الكلاسيكيّة نفسها — فالزرّ واحدٌ في الجلود الأربعة. كلّ لونٍ هنا من متغيّر ثيم (tf-themes.css): لا رقم مكتوب — فتلبس الثمانية عشر ثيماً. التخطيط بعرض البطاقة نفسها (container) لا الشاشة: البطاقة في نافذةٍ ضيّقة على المكتب تأخذ شكل الهاتف. ════════════════════════════════════════════════════════════════════ */ .rqk-box { container: rqk / inline-size; } .rqk-box .rqp-head { flex-wrap: wrap; row-gap: 8px; } .rqk-box .rqp-t { white-space: nowrap; } .rqk-sum { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: -2px 0 10px; font-size: 12px; color: var(--text-muted); } .rqk-sum b { color: var(--text); font-weight: 600; font-family: var(--tf-mono); } .rqk-row { position: relative; min-width: 0; } .rqk-row.dragging { opacity: .45; } .rqk-row.drop-on { outline: 2px dashed var(--accent); outline-offset: 2px; } /* v621 — السياق يخفت بلون نصّه لا بالشفافيّة (كانت .72: ٢٫٩ على الفاتحة — tf-view v621) */ .rqk-row.is-ctx .rqk-t { color: var(--text-muted); } .rqk-row.is-ctx:hover .rqk-t, .rqk-row.is-ctx:focus-within .rqk-t { color: var(--text); } .rqk-row.is-forme { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); } .rqk-t { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--text); overflow-wrap: break-word; } .rqk-row.done .rqk-t, .rqk-row.mine-done .rqk-t { color: var(--text-muted); } .rqk-lane { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex: none; background: var(--lane-g); } .rqk-row.lane-m .rqk-lane { background: var(--lane-m); } .rqk-row.lane-b .rqk-lane { background: var(--lane-b); } .rqk-row.lane-n .rqk-lane { background: var(--lane-n); } .rqk-kn { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text); } .rqk-kn b { font-weight: 600; } .rqk-ico { display: inline-flex; flex: none; font-style: normal; color: var(--text-muted); } .rqk-sub { font-size: 12px; color: var(--text-muted); } .rqk-est, .rqk-read { font-style: normal; font-family: var(--tf-mono); font-size: 11.5px; font-weight: 500; color: var(--text-muted); } .rqk-read { display: inline-flex; align-items: center; gap: 3px; } .rqp-txt .rqk-read { margin-inline-end: 6px; vertical-align: middle; } /* الكلاسيكيّ: بعد الشارة */ .rqk-st { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); white-space: nowrap; } .rqk-st b { font-weight: 600; } .rqk-led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-muted); } .rqk-st.st-wip .rqk-led { background: var(--info); box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 18%, transparent); } .rqk-st.st-taken .rqk-led { background: var(--info); } .rqk-st.st-wait { color: var(--text-muted); } .rqk-st.st-wait .rqk-led { width: 9px; height: 9px; box-sizing: border-box; background: transparent; border: 1.5px solid var(--text-muted); } .rqk-st.st-none { color: var(--text-muted); } .rqk-st.st-none b { font-weight: 500; } .rqk-st.st-none .rqk-led { display: none; } .rqk-st.st-done .tf-svg { color: var(--success); } .rqk-who { display: block; font-size: 12px; color: var(--text-muted); } .rqk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .rqk-meta { margin-top: 6px; } .rqk-row .rqp-idea { margin-top: 8px; background: transparent; } /* الفكرة سطرٌ منقّط لا صندوقٌ مصبوغ (الصبغة للكلاسيكيّ) */ .rqk-row .rqp-menu { grid-column: 1 / -1; } /* الشيء الواحد المشبع في البطاقة: مرجع مادّة المونتاج الناقص */ .rqk-row .rqp-contract.miss i.no:first-child { color: var(--accent-fg); border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .rqk-only-sm { display: none; } /* أ · سجلّ البثّ */ .rqk-box[data-skin="log"] .rqk-rows { gap: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); } .rqk-lg-cols, .rqk-lg { display: grid; grid-template-columns: 72px 136px minmax(0, 1fr) 156px auto; column-gap: 12px; } .rqk-lg-cols { padding: 0 12px 6px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .rqk-lg-cols span:first-child { padding-inline-start: 32px; } .rqk-lg { align-items: start; padding: 11px 12px; border-top: 1px solid var(--border); } .rqk-lg:first-child { border-top: 0; } .rqk-lg-n { display: flex; align-items: center; gap: 4px; min-height: 34px; } .rqk-hole { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface2); box-shadow: inset 0 1.5px 3px color-mix(in srgb, var(--text) 22%, transparent); font-size: 12.5px; font-weight: 600; color: var(--text); } .rqk-lg-k { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding-top: 6px; } .rqk-lg-k .rqk-sub, .rqk-lg-k .rqk-read { padding-inline-start: 15px; } .rqk-lg-t { min-width: 0; padding-top: 5px; } .rqk-lg-s { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding-top: 6px; } .rqk-lg-a { display: flex; align-items: center; gap: 4px; } @container rqk (max-width: 620px) { .rqk-lg-cols { display: none; } .rqk-lg { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 8px; } .rqk-lg-k { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-top: 0; align-self: center; } .rqk-lg-k .rqk-sub, .rqk-lg-k .rqk-read { padding-inline-start: 0; } .rqk-lg-t { grid-column: 1 / -1; grid-row: 2; padding-top: 0; } .rqk-lg-s { grid-column: 1 / -1; grid-row: 3; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-top: 0; } } /* ب · أمر العمل */ .rqk-box[data-skin="ticket"] .rqk-rows { gap: 12px; } .rqk-tk { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent), 0 6px 16px -12px color-mix(in srgb, var(--text) 35%, transparent); } .rqk-tk.is-narr { background: transparent; border-style: dashed; box-shadow: none; } .rqk-tk-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 46px; padding: 4px 8px; border-bottom: 1px solid var(--border); } .rqk-tk.is-narr .rqk-tk-strip { border-bottom: 0; } .rqk-serial { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border: 1.5px solid var(--text); border-radius: 5px; font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; } .rqk-serial b { font-weight: 600; font-size: 13px; } .rqk-tk.is-narr .rqk-serial { border-color: var(--border-strong); color: var(--text-muted); } .rqk-sep { display: inline-block; width: 1px; height: 18px; background: var(--border); } .rqk-fill { flex: 1 1 auto; } .rqk-tk-body { padding: 12px 16px 14px; } .rqk-tk.is-narr .rqk-tk-body { padding-top: 0; } .rqk-tk .rqk-t { font-size: 15.5px; } .rqk-tk.is-narr .rqk-t { font-size: 14.5px; color: var(--text-muted); } /* التثقيب: خطٌّ متقطّع بثقبين داخل التذكرة (لا يعتمد على لون ما خلفها) */ .rqk-perf { position: relative; height: 0; margin: 0 26px; border-top: 1.5px dashed var(--border-strong); } .rqk-perf::before, .rqk-perf::after { content: ''; position: absolute; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface2); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--text) 30%, transparent); } .rqk-perf::before { inset-inline-start: -19px; } .rqk-perf::after { inset-inline-end: -19px; } .rqk-tk-spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 132px; gap: 10px 16px; align-items: start; padding: 14px 16px 16px; } .rqk-cell { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .rqk-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .rqk-val { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; font-size: 13.5px; color: var(--text); } .rqk-val .rqp-idea, .rqk-val .rqp-contract { margin-top: 0; } .rqk-val > * { max-width: 100%; } .rqk-val .rqp-idea, .rqk-sc-info .rqp-idea, .rqk-lg-t .rqp-idea { align-self: stretch; box-sizing: border-box; } .rqk-stamp-w { align-self: stretch; display: flex; align-items: center; justify-content: center; } .rqk-stamp { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 2px solid var(--text-muted); border-radius: 6px; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--text-muted); transform: rotate(-5deg); color: var(--text-muted); font-size: 13px; font-weight: 700; white-space: nowrap; } [dir="ltr"] .rqk-stamp { transform: rotate(5deg); } /* الإمالة تُقلب يدوياً — transform لا يتبع الاتّجاه */ .rqk-stamp.st-done { border-color: var(--text); color: var(--text); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--text); } .rqk-stamp.st-miss { border-color: var(--accent); color: var(--accent-fg); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent); } @container rqk (max-width: 620px) { .rqk-tk-spec { grid-template-columns: minmax(0, 1fr); } .rqk-stamp-w { justify-content: flex-end; padding-inline-end: 6px; } } /* ج · يُقال ويُرى */ .rqk-box[data-skin="script"] .rqk-rows { gap: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); } .rqk-sc-cols, .rqk-sc { display: grid; grid-template-columns: minmax(0, 1fr) 64px 248px; } .rqk-sc-cols { padding-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); } .rqk-sc-cols span { display: flex; align-items: center; gap: 6px; padding: 0 16px; } .rqk-sc-cols span:nth-child(2) { justify-content: center; padding: 0; } .rqk-sc { border-top: 1px solid var(--border); } .rqk-sc:first-child { border-top: 0; } .rqk-sc-say { min-width: 0; padding: 14px 16px; } .rqk-sc .rqk-t { font-size: 15.5px; line-height: 1.85; } .rqk-sc-gut { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 10px; background: var(--surface2); border-inline: 1px solid var(--border); } .rqk-num { font-size: 13px; font-weight: 600; color: var(--text); } .rqk-sc-see { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; } .rqk-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; border: 1.5px dashed var(--border-strong); border-radius: 8px; background: var(--surface2); color: var(--text-muted); text-align: center; } .rqk-frame b { font-size: 13px; font-weight: 600; color: var(--text); } .rqk-frame small { font-size: 11.5px; } .rqk-frame.f-done { border-style: solid; background: var(--surface); } .rqk-frame.f-done .rqk-ico { color: var(--text); } .rqk-frame.f-narr { border: 1px solid var(--border); } .rqk-frame.f-miss { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface2)); } .rqk-ftag { position: absolute; top: 7px; inset-inline-start: 7px; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); font-size: 11px; font-weight: 600; color: var(--text); } .rqk-fok { position: absolute; top: 8px; inset-inline-end: 8px; color: var(--success); } .rqk-sc-info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; } .rqk-acts { display: flex; gap: 4px; } .rqk-acts:empty { display: none; } @container rqk (max-width: 620px) { .rqk-sc-cols { display: none; } .rqk-sc { grid-template-columns: minmax(0, 1fr); } .rqk-sc-gut { order: -1; flex-direction: row; justify-content: flex-start; gap: 10px; padding: 2px 12px; border-inline: 0; border-bottom: 1px solid var(--border); } .rqk-sc-gut .rqp-more { margin-inline-start: auto; } .rqk-sc-say { padding: 12px 14px 4px; } .rqk-sc-see { flex-direction: row; align-items: flex-start; padding: 8px 14px 14px; } .rqk-sc-see .rqk-frame { width: 112px; flex: none; padding: 4px; } .rqk-frame b, .rqk-frame small, .rqk-ftag { display: none; } .rqk-only-sm { display: inline-flex; } } /* الهاتف: مفاتيح الإنجاز ٤٤ في كلّ الجلود */ @container rqk (max-width: 480px) { .rqk-row .rqp-chk, .rqk-row .rqp-st { min-width: 44px; min-height: 44px; border-radius: 12px; } } /* ═══ v621 — الإعدادات ← الواجهة: نموذجٌ لكلّ قسم بمعاينةٍ حيّة ═══ */ .tfu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 14px; } .tfu-tile { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); } .tfu-tile.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .tfu-tile.off .tfu-prev { opacity: .6; } .tfu-prev { position: relative; display: block; width: 100%; height: 214px; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); overflow: clip; cursor: zoom-in; font: inherit; color: inherit; text-align: start; } .tfu-prev:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .tfu-prev-in { position: absolute; top: 10px; inset-inline-start: 10px; display: block; width: 860px; transform: scale(.37); transform-origin: top right; pointer-events: none; } [dir="ltr"] .tfu-prev-in { transform-origin: top left; } /* transform لا يتبع الاتّجاه — يُقلب يدوياً */ .tfu-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; } .tfu-meta b { font-size: 14px; font-weight: 700; color: var(--text); } .tfu-meta span { flex-basis: 100%; font-size: 12.5px; line-height: 1.6; color: var(--text-muted); } .tfu-badge { font-style: normal; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 99px; color: var(--accent-fg); border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border)); } .tfu-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; } .tfu-pick, .tfu-hide { min-height: 40px; padding: 0 16px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: transform .08s; } .tfu-pick { border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); } .tfu-hide { border: 1px solid var(--border-strong); background: transparent; color: var(--text-muted); margin-inline-start: auto; } .tfu-pick:active, .tfu-hide:active { transform: scale(.965); } .tfu-pick[disabled], .tfu-hide[disabled] { opacity: .45; cursor: not-allowed; } .tfu-cur { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); } .tfu-cur .tf-svg { color: var(--success); } .tfu-hidden { margin-top: 14px; } .tfu-hidden summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-muted); padding: 6px 0; } .tfu-hidden summary b { font-weight: 600; margin-inline-start: 4px; } .tfu-ov { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 16px; background: color-mix(in srgb, var(--bg) 72%, transparent); } .tfu-win { width: min(940px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; min-height: 0; } .tfu-wh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--border); } [dir="rtl"] .tfu-wh { padding: 12px 16px 12px 12px; } .tfu-wh b { font-size: 15px; font-weight: 700; color: var(--text); } .tfu-wh span { flex: 1 1 200px; font-size: 12.5px; line-height: 1.6; color: var(--text-muted); } .tfu-x { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 12px; background: transparent; color: var(--text-muted); cursor: pointer; } .tfu-x:active { transform: scale(.965); } .tfu-wb { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px; } .tfu-wf { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border); } /* v622 — نافذة كلمة المرور: الخطأ داخلها · القاعدة تحت الحقل · «اخرج» في الطرف الآخر محايداً */ .pw-lead { margin: 12px 0 0; font-size: 13px; line-height: 1.7; color: var(--text); } .pw-rule { display: block; margin-top: 6px; font-size: 11.5px; color: var(--text-muted); } .pw-err { margin: 12px 0 0; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 600; line-height: 1.6; color: var(--text); background: color-mix(in srgb, var(--danger) 12%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border)); } .pw-err[hidden], .pw-lead[hidden], .pw-out[hidden], #pw-old-f[hidden], #pw-x[hidden], #pw-cancel[hidden] { display: none; } .pw-foot { display: flex; align-items: center; gap: 10px; margin-top: 18px; } .pw-foot .btn-submit { flex: 0 1 auto; min-width: 110px; } .pw-foot .pw-sp { flex: 1; } .pw-foot .btn-submit:active { transform: scale(.965); } /* v622 — علامة TakeFlow في السكّة: الأيقونة نفسها (لوحُها ملوّن) — لا إطار ولا خلفيّة فوقها */ .side-rail .rail-logo:has(img) { background: none; border: 0; padding: 0; } .rail-logo img { width: 30px; height: 30px; border-radius: 8px; display: block; } /* ═══ v622 — تطبيق الكمبيوتر (الغلاف 1.4): شريط العنوان والقوائم ═══ أزرار النافذة من ويندوز فوق الزاوية؛ الشريط يمتدّ على ما بقي (env(titlebar-area-*) من الغلاف — في المتصفّح العرض كلّه). كلّ ما يلتصق بأعلى الشاشة ينزل بارتفاعه (--tf-chrome-h) — صفرٌ خارج التطبيق فلا يتغيّر شيءٌ في المتصفّح. الشريط سطحٌ عاديّ (لا غلاس)، والقائمة المفتوحة طبقة تحكّم (g-ctl) — لا غلاس داخل غلاس. وهو فوق كلّ شيء كإطار النظام (أعلى z-index): طبقةٌ تغطّيه كانت تصير مقبض سحبٍ للنافذة — ضغطةٌ على ✕ في أعلاها تسحب النافذة ولا تُغلق (السحب يُحسب من الشريط تحتها، لا ممّا يُرسم فوقه). */ :root { --tf-chrome-h: 0px; } body.tf-chrome { --tf-chrome-h: 36px; } .tf-mbar { position: fixed; top: 0; left: env(titlebar-area-x, 0px); width: env(titlebar-area-width, 100%); height: var(--tf-chrome-h); z-index: 2147483647; display: flex; align-items: center; gap: 2px; padding-inline: 8px; box-sizing: border-box; background: var(--surface); color: var(--text); border-bottom: 1px solid var(--border); font-size: 12.5px; user-select: none; -webkit-app-region: drag; app-region: drag; } body.tf-mac .tf-mbar { padding-left: 80px; } /* أزرار ماك الثلاثة على اليسار دائماً */ .tf-mbar-ic { width: 20px; height: 20px; border-radius: 5px; flex: none; margin-inline-end: 6px; } .tf-mbar-m { position: relative; flex: none; } .tf-mbar-b, .tf-mbar-dd, .tf-mbar-slot { -webkit-app-region: no-drag; app-region: no-drag; } .tf-mbar-b { height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--text); font: inherit; font-weight: 600; cursor: default; } .tf-mbar-b:hover, .tf-mbar-m.open .tf-mbar-b { background: color-mix(in srgb, var(--text) 8%, transparent); border-color: var(--border); } .tf-mbar-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .tf-mbar-b:active { transform: scale(.965); } .tf-mbar-t { flex: 1; min-width: 0; text-align: center; font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: clip; text-overflow: ellipsis; padding: 0 10px; } /* clip لا hidden: hidden حاوية تمرير مقفلة */ .tf-mbar-slot { display: flex; align-items: center; flex: none; } .tf-mbar-slot .topbar-right { gap: 4px; transform: scale(.86); transform-origin: center; } /* بالمعرّف لا بالصنف (v584): «.g-ctl { position: relative }» في tf-glass.css يُحمَّل بعد هذا الملفّ فيغلب الصنف — فتصير القائمة في سياق الشريط نفسه وتتوسّطه عموديّاً (نصفها فوق الشاشة) */ #tf-mbar .tf-mbar-dd { position: absolute; top: calc(100% + 4px); inset-inline-start: 0; min-width: 236px; max-height: calc(100vh - var(--tf-chrome-h) - 16px); overflow-y: auto; overscroll-behavior: contain; padding: 6px; border-radius: 12px; display: flex; flex-direction: column; gap: 1px; z-index: 1; } .tf-mbar-it { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 4px 10px; border-radius: 8px; border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 500; text-align: start; cursor: default; } .tf-mbar-it:hover, .tf-mbar-it:focus-visible { background: color-mix(in srgb, var(--accent) 14%, transparent); outline: none; } .tf-mbar-it:active { transform: scale(.985); } .tf-mbar-it .tfm-t { flex: 1; } .tf-mbar-it.on .tfm-t { font-weight: 700; } .tf-mbar-it .tfm-ic { color: var(--text-muted); display: inline-flex; } .tf-mbar-sep { border: 0; border-top: 1px solid var(--border); margin: 4px 6px; } body.tf-chrome .sidebar, body.tf-chrome .side-rail, body.tf-chrome .topbar { top: var(--tf-chrome-h); } /* كلّ طبقةٍ ثابتة تلتصق بأعلى الشاشة تبدأ تحت شريط العنوان وتنتهي عند أسفلها — لا رأسٌ ولا ✕ تحته. القائمة من الملفّات كلّها (CSS وما تحقنه ملفّات js وما يُكتب في style) — وtf-guard يجمعها بنفسه: طبقةٌ جديدة ملتصقة بالأعلى لا تُضاف هنا يصرخ عليها. :is() بوزن أثقل محدِّدٍ فيه فيغلب ما كُتب !important بالصنف. */ body.tf-chrome :is(.report-fs-overlay, .shift-picker-backdrop, .mailcmd-overlay, .ai-chat-drawer, .modal-overlay, .sb-pick-overlay, .write-modal-overlay, .notif-banner, #tfc-ov, #tfh-ov, .pv-zoom-back, .ops-mc, .tf-asst, .scb-ov, .sup-ov, .mail-shell .mail-folders, .mail-shell .mail-ctx, .mfold-back, .rqe-ov, .hlr-mw, .ms-ov, .wo-ov, .tm-ov, #tf-tour, .tf-bs-ov, .bi-ov, .aip-lib-ov, .rqm-ov, #tf-menu-scrim, #tf-menu, #tf-set-scrim, .tcr-ov, .bag-ov, .tfu-ov, .pa-back, .tc-ov, .tl-ov, .tw-ov, .tfs-modal-back, .tf-scrim, .tfp-back, #onair-board.open, .fr-root, .fr-zback, .ma-back, .cmp-modal.cmp-page, .write-modal.mp-full, .ms-card-wrap, .nw-back, #nw-modal-root .nw-back, #nw-ai, .ol-pw-back, .ol-searchveil, .ol-searchbox, .ol-modalback, .tfs-gen, .tfs-fullv, #page-translate.tr-zen, #allthemes-overlay, #__err) { top: var(--tf-chrome-h) !important; max-height: calc(100vh - var(--tf-chrome-h)) !important; } /* وما يبعد عن الأعلى مسافةً ثابتة يبعدها من تحت الشريط */ body.tf-chrome .notif-toast { top: calc(14px + var(--tf-chrome-h)); } body.tf-chrome .aip-canvas { top: calc(var(--topbar-h, 56px) + 14px + var(--tf-chrome-h)); } /* القفل: الشريط يبقى (مقبض النافذة ولونها) بلا قوائم ولا أدوات — tf-menu.js لا يرسم القوائم والقفل قائم */ body.tf-locked #tf-mbar .tf-mbar-slot { visibility: hidden !important; } @media (min-width: 769px) { body.tf-chrome.has-sidebar #app-shell { padding-top: calc(var(--topbar-h) + var(--tf-chrome-h)); } body.tf-chrome.tf-chrome-tb .topbar { display: none !important; } body.tf-chrome.tf-chrome-tb.has-sidebar #app-shell { padding-top: var(--tf-chrome-h); } } @media (max-width: 768px) { body.tf-chrome.has-sidebar #app-shell, body.tf-chrome #app-shell { padding-top: var(--tf-chrome-h) !important; } } /* ═══ v623 — موافقة المنتج الاختياريّة (tf-appr.js) ═══ المنتقي في الطلب السريع: «مباشرةً إلى القسم» أو «للمنتج أوّلاً» باسمه — ولافتة الطلب وأفعالها. اللون للمعنى: ما ينتظر قرارك بحدّ اللكنة، والمُعاد بحدّ التنبيه، والباقي محايد. */ .fr-via { margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; display: grid; gap: 7px; } .fr-via[hidden] { display: none; } .fr-via-k { font-size: 11px; font-weight: 600; color: var(--text-muted); } .fr-via-seg { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--surface2); } .fr-via-b { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; padding: 6px 8px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: transform .12s ease; } .fr-via-b span { overflow: clip; text-overflow: ellipsis; white-space: nowrap; } .fr-via-b:active { transform: scale(.965); } .fr-via-b.on { background: var(--surface); border-color: var(--border); color: var(--text); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent); } .fr-via-to { display: grid; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .fr-via-to select { font: inherit; font-size: 12.5px; font-weight: 500; padding: 6px 9px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); } .fr-via-note { margin: 0; font-size: 11.5px; line-height: 1.7; color: var(--text-muted); } .rq-appr { margin: 0 0 12px; padding: 11px 13px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); } .rq-appr.back { border-color: var(--border); border-inline-start: 3px solid var(--accent); background: var(--surface2); } .rq-appr-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rq-appr-h b { font-size: 13.5px; font-weight: 700; color: var(--text); } .rq-appr-h svg { color: var(--accent-fg); } .rq-appr-h em { font-style: normal; font-size: 12px; color: var(--text-muted); margin-inline-start: auto; } .rq-appr p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--text-muted); } .rq-appr-n { margin: 8px 0 0; padding: 8px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 13px; font-weight: 500; line-height: 1.8; color: var(--text); white-space: pre-wrap; } .rq-appr-old { margin-top: 6px; font-size: 12px; color: var(--text-muted); } .rq-appr-old summary { cursor: pointer; font-weight: 600; } .rq-appr-old p { margin: 4px 0 0; } .rq-appr-a { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .rq-appr-a button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: transform .1s; } .rq-appr-a button:active { transform: scale(.965); } .rq-appr-a button:disabled { opacity: .55; cursor: progress; } .rq-appr-a .rq-appr-pri { background: var(--accent); border-color: transparent; color: var(--accent-ink); } /* القرار الإيجابيّ في البداية والإرجاع معزولٌ في الطرف الآخر بلونٍ محايد */ .rq-appr-a .rq-appr-neg { margin-inline-start: auto; } /* ═══ v623b — الشكر (tf-people.js) · قوالب الصلاحيّات ═══ */ .rq-kudos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 10px; } .rq-kudos-k { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-inline-end: 4px; } .rq-kudos-b { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: transform .12s ease; } .rq-kudos-b:active { transform: scale(.965); } .rq-kudos-b.on { color: var(--text-muted); cursor: default; } .mp-kudos { margin: 10px 0 4px; } .mp-kudos .mp-sec { display: flex; align-items: center; gap: 6px; } .mp-kudos-n { margin: 4px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--text-muted); } .mp-kudos-n b { color: var(--text); font-weight: 600; } .tp-tpl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 10px; } .tp-tpl-k { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-muted); } .tp-tpl-c { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; background: var(--surface); } .tp-tpl-c em { font-style: normal; font-size: 11px; color: var(--text-muted); } .tp-tpl-x { border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 11px; cursor: pointer; padding: 2px 6px; border-radius: 999px; } .tp-tpl-x:hover { color: var(--text); background: var(--surface2); } .tp-tpl-none { font-style: normal; font-size: 12px; color: var(--text-muted); } .tp-tsel { font: inherit; font-size: 11.5px; padding: 3px 6px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); max-width: 150px; } /* ═══ v624 — الدعم التقنيّ (tf-it.js) ═══ الصندوق والنموذج والتذكرة في نافذةٍ واحدة. اللون للمعنى: مصباح الحال صغير ومحايد إلّا ما ينتظر — و«تأخّر الردّ» وحده بلون الخطر. العاجل يُقرأ بوزن الخطّ لا بلونٍ ثانٍ. */ .write-modal.itd-card { max-width: 680px; max-height: 88vh; } .itd-body { padding: 14px 18px 18px; overflow-y: auto; min-height: 0; flex: 1 1 auto; } .itd-empty { padding: 26px 8px; text-align: center; font-size: 13px; line-height: 1.8; color: var(--text-muted); } .itd-list { display: grid; gap: 6px; } .itd-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); color: var(--text); font: inherit; text-align: start; cursor: pointer; transition: transform .12s ease, border-color .12s ease; } .itd-row:hover { border-color: var(--border-strong); } .itd-row:active { transform: scale(.965); } .itd-row.st-closed { opacity: .62; } .itd-led { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); } .itd-row.st-open .itd-led { background: var(--accent); } .itd-row.st-wait .itd-led { background: var(--info); } .itd-row.st-done .itd-led { background: var(--success); } .itd-row.late .itd-led { background: var(--danger); } .itd-ic { display: inline-flex; color: var(--text-muted); } .itd-main { display: grid; gap: 2px; min-width: 0; } .itd-main b { font-size: 13.5px; font-weight: 600; overflow: clip; text-overflow: ellipsis; white-space: nowrap; } .itd-row.urg .itd-main b { font-weight: 700; } .itd-meta { font-size: 11.5px; color: var(--text-muted); overflow-wrap: anywhere; } .itd-side { display: grid; justify-items: end; gap: 2px; font-size: 11.5px; color: var(--text-muted); } .itd-side em { font-style: normal; font-weight: 600; color: var(--text); } .itd-late { font-size: 11.5px; font-weight: 600; color: var(--danger); margin: 0; } .itd-form { display: grid; gap: 12px; } .itd-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 6px; } .itd-cat { display: inline-flex; align-items: center; gap: 7px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); color: var(--text-muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: transform .12s ease; } .itd-cat:active { transform: scale(.965); } .itd-cat.on { color: var(--text); border-color: var(--accent); background: var(--surface); } .itd-hint { margin: -4px 0 0; font-size: 11.5px; color: var(--text-muted); } .itd-f { display: grid; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-muted); } .itd-f input, .itd-f textarea, .itd-reply textarea { font: inherit; font-size: 13.5px; font-weight: 500; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); resize: vertical; min-height: 0; flex: none; line-height: 1.7; } .itd-prio { display: flex; flex-wrap: wrap; gap: 6px; } .itd-pb { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: transform .12s ease; } .itd-pb:active { transform: scale(.965); } .itd-pb.on { color: var(--text); background: var(--surface); border-color: var(--border-strong); } .itd-pb.p-urgent.on { font-weight: 700; border-color: var(--danger); } .itd-foot { display: flex; justify-content: flex-end; } .itd-foot .btn-submit, .itd-acts .btn-submit, .itd-reply .btn-submit { width: auto; margin: 0; display: inline-flex; align-items: center; gap: 6px; } .itd-det { display: grid; gap: 10px; } .itd-back { justify-self: start; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .itd-back:hover { color: var(--text); background: var(--surface2); } .itd-dh { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; } .itd-dh b { font-size: 15px; font-weight: 700; } .itd-st { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; } .itd-desc { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface2); font-size: 13px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; } .itd-who { margin: 0; font-size: 12.5px; color: var(--text-muted); } .itd-who b { color: var(--text); font-weight: 600; } .itd-thread { display: grid; gap: 6px; } .itd-sys { font-size: 11.5px; color: var(--text-muted); padding-inline-start: 10px; } .itd-sys .mono { margin-inline-start: 6px; } .itd-note { padding: 8px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } .itd-note.agent { border-inline-start: 3px solid var(--info); } .itd-note.done { border-inline-start: 3px solid var(--success); } .itd-nh { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); } .itd-nh b { color: var(--text); font-weight: 600; } .itd-nh .mono { margin-inline-start: auto; } .itd-note p { margin: 4px 0 0; font-size: 13px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; } .itd-reply { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; } .itd-acts { display: flex; flex-wrap: wrap; gap: 8px; } .itd-acts:empty { display: none; } .itd-assign { font: inherit; font-size: 12.5px; padding: 7px 9px; border-radius: 10px; max-width: 200px; } @media (max-width: 560px) { .itd-row { grid-template-columns: auto minmax(0, 1fr) auto; } .itd-row .itd-ic { display: none; } .itd-reply { grid-template-columns: 1fr; } } /* ═══ v625 — الملفّ الوظيفيّ والحضور (tf-hr.js) ═══ جدول الحضور سطرٌ لكلّ موظّف بأرقامٍ أحاديّة المسافة، ويُفتح على أيّامه. اللون للمعنى: الغياب وحده بلون الخطر · التأخّر والخروج المبكّر بحدٍّ محايد · المطابقة «باسمٍ قريب» بحدّ التنبيه لأنّها تحتاج نظرة. */ .hra .card-title { flex-wrap: wrap; } .hra-sub { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-inline-start: 6px; } .hra-body { padding-top: 12px; display: grid; gap: 10px; } .hra-empty { padding: 22px 8px; text-align: center; font-size: 13px; line-height: 1.8; color: var(--text-muted); } .hra-note { margin: 0; font-size: 12px; line-height: 1.8; color: var(--text-muted); } .hra-note b { color: var(--text); } .hra-bad { color: var(--danger); font-weight: 600; } .hra-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; } .hra-seg { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--surface2); } .hra-seg button { padding: 6px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: transform .12s ease; } .hra-seg button:active { transform: scale(.965); } .hra-seg button.on { background: var(--surface); border-color: var(--border); color: var(--text); } .hra-f { display: grid; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); min-width: 0; } .hra-f .ms-input, .hra-dept, .hra-p select { font: inherit; font-size: 12.5px; font-weight: 500; padding: 6px 9px; border-radius: 9px; } .hra-x { margin-inline-start: auto; width: auto; display: inline-flex; align-items: center; gap: 6px; } .hra-tbl { display: grid; gap: 4px; } .hra-tr { display: grid; grid-template-columns: minmax(150px, 2.2fr) repeat(7, minmax(52px, 1fr)); align-items: center; gap: 6px; width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); color: var(--text); font: inherit; font-size: 12.5px; text-align: start; cursor: pointer; transition: transform .12s ease, border-color .12s ease; } .hra-tr:hover { border-color: var(--border-strong); } .hra-tr:active { transform: scale(.965); } .hra-tr.warn { border-inline-start: 3px solid var(--danger); } .hra-th { background: transparent; border-color: transparent; cursor: default; font-size: 11px; font-weight: 600; color: var(--text-muted); } .hra-th:active { transform: none; } .hra-nm { display: grid; gap: 1px; min-width: 0; } .hra-nm b { font-weight: 600; overflow: clip; text-overflow: ellipsis; white-space: nowrap; } .hra-nm em, .hra-tr i { font-style: normal; font-size: 11px; color: var(--text-muted); } .hra-days { display: grid; gap: 3px; margin: -2px 0 4px; padding-inline-start: 14px; } .hra-d { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 5px 9px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); font-size: 12px; color: var(--text-muted); } .hra-d b { color: var(--text); font-weight: 600; } .hra-d em { font-style: normal; font-size: 11.5px; } .hra-d.st-absent { border-inline-start: 3px solid var(--danger); } .hra-d.st-late, .hra-d.st-early, .hra-d.st-late_early { border-inline-start: 3px solid var(--border-strong); } .hra-imp0, .hra-imp { display: grid; gap: 10px; } .hra-file { width: auto; justify-self: start; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin: 0; } .hra-imp-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; } .hra-imp-h em { font-style: normal; font-size: 11.5px; color: var(--text-muted); } .hra-imp-h .hra-file { margin-inline-start: auto; } .hra-maps { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; padding: 10px; border: 1px dashed var(--border); border-radius: 10px; } .hra-ppl { display: grid; gap: 4px; } .hra-p { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(140px, 1fr) auto; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); } .hra-p.unk { border-style: dashed; } .hra-pn { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 12.5px; } .hra-pn b { font-weight: 600; overflow: clip; text-overflow: ellipsis; white-space: nowrap; } .hra-pn em, .hra-pn i { font-style: normal; font-size: 11px; color: var(--text-muted); } .hra-how { font-style: normal; font-size: 11px; color: var(--text-muted); } .hra-how.near { color: var(--text); padding: 1px 7px; border-radius: 999px; border: 1px solid var(--accent); } .hra-keep { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); } .hra-foot { display: flex; justify-content: flex-end; } .hra-foot .btn-submit { width: auto; margin: 0; display: inline-flex; align-items: center; gap: 6px; } .hra-cfg { display: grid; gap: 10px; } .hra-grace { grid-template-columns: auto auto auto; align-items: center; justify-content: start; } .hra-grace em { font-style: normal; } .hra-shifts { display: grid; gap: 6px; } .hra-sh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); font-size: 12.5px; } .hra-sh b { min-width: 110px; font-weight: 600; } .hra-sh .ms-input { width: auto; font: inherit; font-size: 12.5px; padding: 5px 8px; border-radius: 8px; } .hra-sh em { font-style: normal; font-size: 11px; color: var(--text-muted); } .hrf { display: grid; gap: 10px; } .hrf-sec { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin: 4px 0 0; } .hrf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; } .hrf-tile { display: grid; gap: 2px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); } .hrf-tile b { font-size: 20px; font-weight: 700; } .hrf-tile span { font-size: 12px; color: var(--text-muted); } .hrf-tile.bad b { color: var(--danger); } .hrf-empty { padding: 14px 6px; text-align: center; font-size: 12.5px; color: var(--text-muted); } .hrf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; } .hrf-priv { font-style: normal; font-size: 11px; font-weight: 500; color: var(--text-muted); margin-inline-start: 6px; } .hrf-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; } .hrf-add textarea { font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 10px; resize: vertical; min-height: 0; flex: none; } .hrf-add .btn-submit { width: auto; margin: 0; display: inline-flex; align-items: center; gap: 6px; } .hrf-notes { display: grid; gap: 6px; } .hrf-n { padding: 8px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } .hrf-n.pend { opacity: .7; } .hrf-nh { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-muted); } .hrf-nh b { color: var(--text); font-weight: 600; } .hrf-nh .mono { margin-inline-start: auto; } .hrf-n p { margin: 4px 0 0; font-size: 13px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; } @media (max-width: 720px) { .hra-tr { grid-template-columns: minmax(0, 1fr) repeat(3, 44px); } .hra-tr > :nth-child(2), .hra-tr > :nth-child(6), .hra-tr > :nth-child(7), .hra-tr > :nth-child(8) { display: none; } .hra-p { grid-template-columns: 1fr; } .hra-x { margin-inline-start: 0; } } /* ═══ v626 — لوحة الإدارة · سياسة المراسلة (tf-exec.js) ═══ أرقامٌ كبيرة أحاديّة المسافة على بطاقاتٍ محايدة. لونٌ واحدٌ مشبع: «تجاوز موعد بثّه» حين لا يكون صفراً — هو وحده ما يحتاج انتباهاً الآن. الأسابيع أعمدةٌ: الطول الطلبات، والداخل ما أُنجز. */ .exb { display: grid; gap: 12px; } .exb-empty { padding: 26px 8px; text-align: center; font-size: 13px; color: var(--text-muted); } .exb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .exb-seg { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--surface2); } .exb-seg button { padding: 6px 12px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: transform .12s ease; } .exb-seg button:active { transform: scale(.965); } .exb-seg button.on { background: var(--surface); border-color: var(--border); color: var(--text); } .exb-note { font-size: 11.5px; color: var(--text-muted); } .exb-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; } .exb-tile { display: grid; gap: 3px; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface2); } .exb-tile b { font-size: 28px; font-weight: 700; line-height: 1.1; } .exb-tile span { font-size: 12.5px; font-weight: 600; color: var(--text); } .exb-tile em { font-style: normal; font-size: 11.5px; color: var(--text-muted); } .exb-sec { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); } .exb-sec em { font-style: normal; font-weight: 500; font-size: 11px; margin-inline-start: 4px; } .exb-pipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; } .exb-pipe span { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font-size: 12px; color: var(--text-muted); } .exb-pipe b { font-size: 20px; font-weight: 700; color: var(--text); } .exb-pipe span.bad { border-color: var(--danger); } .exb-pipe span.bad b { color: var(--danger); } .exb-weeks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); } .exb-wk { display: grid; justify-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); } .exb-wk b { font-size: 13px; color: var(--text); } .exb-bar { position: relative; width: 100%; max-width: 46px; height: 110px; display: flex; align-items: flex-end; justify-content: center; } .exb-bar i { position: absolute; inset-inline: 0; bottom: 0; border-radius: 6px 6px 2px 2px; } .exb-bar i.a { background: var(--border-strong); } .exb-bar i.f { inset-inline: 22%; background: var(--text-muted); } .exb-wk.now b, .exb-wk.now span { color: var(--text); font-weight: 700; } /* هذا الأسبوع بالوزن لا بلونٍ ثانٍ — اللون المشبع للمتأخّر وحده */ .exb-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; } .exb-card { display: grid; gap: 6px; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); } .exb-card p { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--text-muted); } .exb-card p b { color: var(--text); font-weight: 600; } .exp-quiet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; } /* الوقتان بعرضهما لا بعرض السطر — والمرسوم منهما زرّ الوقت (tfd-btn بعد الحقل الأصليّ المخفيّ) */ .exp-quiet .tfs-in, .exp-quiet .tfd-btn { width: 132px; max-width: 132px; flex: none; font-size: 12.5px; } .hra-sh .tfd-btn { width: 116px; max-width: 116px; flex: none; } .exp-quiet .exp-sw { margin-inline-end: 6px; } .exp-sw { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } /* ═══ v627 — إصلاحات (TakeFlow Tv - تصميم وتطوير محمد قندقلي) ═══ */ /* إضافة عضو: «ولّد» جنب حقل كلمة المرور (الاختبار والمعاينة جنب الحقل نفسه) */ .nm-pw { display: flex; gap: 8px; align-items: stretch; } .nm-pw input { flex: 1 1 auto; min-width: 0; } .nm-gen { flex: 0 0 auto; padding: 0 14px; min-height: 40px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface2); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .nm-gen:hover { border-color: var(--accent); } .nm-gen:active { transform: scale(.965); } /* الإعدادات نافذةً: كانت تبدأ على ١٦px من الأعلى وشريط العنوان في تطبيق الكمبيوتر ٣٦px — فرأسها وزواياها تحت الشريط («ضاربة فوق بالشريط»). الطبقات اللاصقة بالأعلى في لائحة tf-chrome، وهذه تبعد ١٦px فلم تدخلها. الآن تبعد عن الشريط ما تبعده عن الجوانب. */ body.tf-chrome.tf-set-win #page-settings.page.active { top: calc(16px + var(--tf-chrome-h)) !important; } /* والعرض واحدٌ للأقسام الأربعة عشر: القشرة كانت بهامشين auto داخل نافذةٍ عموديّة (flex column) فتأخذ عرض محتواها — كلّ قسمٍ بمقاس، وعمود الأقسام يقفز حتّى ١٥٢px. الآن تملأ النافذة، والمحتوى في عرضٍ ثابت (١١٨٠) في وسطها — يتغيّر ما في الداخل ولا يتحرّك الإطار. */ body.tf-set-win #page-settings .ts-shell { align-self: stretch; width: 100%; margin-inline: 0; box-sizing: border-box; } /* تحكّم الأقسام: الأدمن رقاقةٌ مقفلةٌ معلَّمة في كلّ سطر — «إدارة الطلبات» بلا رقاقة كانت تُقرأ «لا أحد يراها» */ .sec-ctl-chip.sec-ctl-adm { cursor: default; opacity: .75; } .sec-ctl-only { font-size: 10.5px; opacity: .8; } /* الحذف: البطاقة تنطوي في مكانها فتنزل الصفحة بسلاسة بدل القفز */ .req-card.tf-gone { overflow: clip; opacity: 0; transform: scale(.97); margin-block: 0 !important; padding-block: 0 !important; transition: height .22s var(--g-ease, ease), opacity .18s ease, transform .18s ease, margin .22s, padding .22s; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .req-card.tf-gone { transition: none; } } /* عدّاد التنزيل: سطر (الاسم · النسبة) فوق شريطٍ بعرضه — في البطاقة وفي الكبسولة */ .tf-updm { display: grid; gap: 6px; min-width: 0; } .tf-updm.in-card { display: grid; } .tf-updm-row { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; min-width: 0; } .tf-updm-t { white-space: nowrap; overflow: clip; text-overflow: ellipsis; min-width: 0; } .tf-updm-n { min-width: 0; flex: none; } .tf-updm-bar, .tf-updm.in-card .tf-updm-bar { flex: none; width: 100%; height: 6px; box-sizing: border-box; } /* الكبسولة: عرضٌ ثابت داخل الشاشة — لا left:50% مع إزاحة (المحتوى لا يخرج منها مهما اتّسع) */ #tf-upd.is-meter { display: block; left: 0; right: 0; transform: none; margin-inline: auto; width: 300px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 10px 16px; border-radius: 16px; } /* رأس الشريط الجانبيّ: ثلاث حالاتٍ بثلاث حشوات — المفتوح ٠، والمطويّ بلوحته وعند المرور ١٦px فوق وتحت داخل رأسٍ طوله ٥٦px: يبقى للاسم وسطره الثاني (٣١px) وللشعار ٢٤px فقط، فيُقصّ الشعار من فوق ويزيح السطر («منصّة الإنتاج التلفزيونيّ زايحة»). الحشوة العموديّة صفرٌ في الحالات كلّها، والشعار يتوسّط بارتفاعٍ محسوب */ .sidebar.collapsed .sidebar-head, .sidebar.auto-hover.collapsed:hover .sidebar-head { padding-block: 0; } .sidebar-head { align-items: center; } .sidebar-head .channel-logo-slot { max-height: calc(var(--topbar-h, 56px) - 22px); height: auto; align-self: center; } .sidebar-head .sidebar-logo-txt { justify-content: center; } /* والاسم وسطره بمحاذاةٍ واحدة: «direction: ltr» (v201 — ليُقصّ «TakeFlow» من آخره) كان يلصق اسم المحطّة العربيّ «قناة الجديد» باليسار بينما سطره «منصّة الإنتاج التلفزيونيّ» باليمين — «زايحين». الآن اتّجاه السطر من محتواه (plaintext: العربيّ يُقصّ من يساره واللاتينيّ من يمينه) والمحاذاة من لغة الواجهة للسطرين معاً */ .sidebar-logo-txt .st-name { direction: inherit; unicode-bidi: plaintext; } html[dir="rtl"] .sidebar-logo-txt .st-name, html[dir="rtl"] .sidebar-logo-txt .st-sub { text-align: right; } html[dir="ltr"] .sidebar-logo-txt .st-name, html[dir="ltr"] .sidebar-logo-txt .st-sub { text-align: left; } /* الشريط الممدود بالمرور يطفو فوق الصفحة: سطح الثيم الزجاجيّ شفّاف (٧٢٪) فكان عنوان الشريط العلويّ يُرى خلف الشعار والاسم. طبقتان كنافذة الإعدادات — بلا فلتر خلفيّة (يكسر الريل الثابت داخله) */ .sidebar.auto-hover.collapsed:hover { background: linear-gradient(var(--surface), var(--surface)), var(--bg); } /* ورقة الإجازة في المستند المطبوع: بلا إطار البطاقة وظلّها وحشوتها — الهامش من @page وحده */ .hrf-paper.hrf-print { box-shadow: none; border: 0; padding: 0; max-width: none; } @media print { .hrf-paper { box-shadow: none !important; } .hrf-paper .hrf-sig-clr { display: none !important; } } /* صلاحيّات الفرد: «من له استثناء ⇄ الكلّ» — زرّان متلاصقان بحجم رقائق الأدوار */ .tp-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 99px; padding: 2px; background: var(--surface2); } .tp-sb { border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 11.5px; font-weight: 600; padding: 5px 12px; min-height: 30px; border-radius: 99px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .tp-sb.on { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, var(--border)); } .tp-sb .mono { font-size: 10.5px; opacity: .75; } .tp-sb:active { transform: scale(.965); } /* شريط «تغييرات لم تُحفظ» داخل نافذة الإعدادات: لاصقٌ أسفل عمود المحتوى (حاوية تمريره) وعلى يمينه — لا فوق عمود الأقسام */ body .ts-bar.in-win { position: sticky; bottom: 12px; right: auto; left: auto; transform: none; z-index: 5; margin: 14px 0 0 auto; max-width: 100%; } body:has(#tf-quickbar) .ts-bar.in-win { bottom: 12px; } /* دخوله بحركته هو: tuIn (لشريط التراجع المتوسّط) فيها translateX(-50%) — فكان الشريط يظهر مزاحاً نصف عرضه يساراً ثمّ يقفز إلى مكانه (يُرى بوضوح على الأجهزة البطيئة) */ @keyframes tsBarIn { from { opacity: 0; transform: translateY(10px); } } body .ts-bar { animation-name: tsBarIn; } /* فحص النظام v627: سطر حكمٍ واحد · الأعطال أوّلاً · السليم مطويٌّ في مجموعات */ .dg-run { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-muted); } .dg { display: grid; gap: 10px; } .dg-led { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-muted); } .dg-led.ok { background: var(--success); } .dg-led.warn { background: var(--tf-warn); } .dg-led.bad { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent); } .dg-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); } .dg-sum > b { font-size: 13.5px; font-weight: 700; } .dg-sum.bad { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); } .dg-cnt { display: inline-flex; gap: 10px; font-size: 11.5px; color: var(--text-muted); margin-inline-start: auto; } .dg-cnt .ok { color: var(--success); } .dg-cnt .warn { color: var(--tf-warn); } .dg-cnt .bad { color: var(--danger); } .dg-copy { border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 11.5px; font-weight: 600; padding: 5px 11px; min-height: 30px; border-radius: 8px; cursor: pointer; } .dg-copy:active { transform: scale(.965); } .dg-list { display: grid; gap: 4px; } .dg-row { display: grid; grid-template-columns: auto minmax(70px, auto) minmax(90px, auto) 1fr; align-items: baseline; gap: 4px 10px; padding: 7px 10px; border-radius: 9px; background: var(--surface2); font-size: 12px; } .dg-row .dg-led { align-self: center; } .dg-g { font-size: 10.5px; color: var(--text-muted); } .dg-d { color: var(--text-muted); min-width: 0; overflow-wrap: anywhere; } .dg-fix { grid-column: 3 / -1; font-style: normal; font-size: 11.5px; color: var(--text); } .dg-ok > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-muted); padding: 4px 2px; list-style-position: inside; } .dg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 8px; } .dg-grp { display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; padding: 8px; border-radius: 9px; border: 1px solid var(--border); } .dg-grp > b { flex: 1 1 100%; font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 2px; } .dg-chip { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--surface2); color: var(--text); } @media (max-width: 600px) { .dg-row { grid-template-columns: auto 1fr; } .dg-row .dg-g { display: none; } .dg-d, .dg-fix { grid-column: 2; } } /* ═══ v628 — الإقلاع والعدالة (TakeFlow Tv - تصميم وتطوير محمد قندقلي) ═══ */ /* شريط فشل الإقلاع (tf-early في index.html): يظهر وحده حين اكتمل التحميل والبرنامج لم يُعرَّف — صغيرٌ أسفل الشاشة ويُغلَق، لا يغطّي شيئاً (بديل طبقة «TEMPORARY DEBUG» التي سوّدت الشاشة) */ .tf-bootbar { position: fixed; inset-inline: 16px; bottom: 16px; z-index: 100000; max-width: 560px; margin-inline: auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-inline-start: 3px solid var(--danger); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); font-size: 13px; } .tf-bootbar-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .tf-bootbar-t b { font-weight: 600; } .tf-bootbar-t span { font-size: 11px; color: var(--text-muted); overflow-wrap: anywhere; direction: ltr; unicode-bidi: plaintext; text-align: start; } .tf-bootbar button { flex: none; min-height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface2); color: inherit; font: inherit; font-weight: 600; cursor: pointer; } .tf-bootbar .tf-bootbar-x { width: 34px; padding: 0; font-size: 18px; line-height: 1; } .tf-bootbar button:active { transform: scale(.965); } /* ميزان العمل (tf-fair.js) — اللون للمعنى: المحايد للعدل · الأحمر لما فوق الحصّة وحده · والعلامة خطّ الحصّة العادلة */ .write-modal.mz-card { max-width: 760px; max-height: 88vh; display: flex; flex-direction: column; } .mz-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 18px 0; } .mz-tabs { flex: 1 1 auto; min-width: 0; } .mz-seg { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--surface2); } .mz-seg button { padding: 6px 12px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .mz-seg button.on { background: var(--surface); border-color: var(--border); color: var(--text); } .mz-seg button:active { transform: scale(.965); } .mz-body { padding: 12px 18px 18px; overflow-y: auto; min-height: 0; flex: 1 1 auto; display: grid; gap: 10px; align-content: start; } .mz-empty { padding: 26px 8px; text-align: center; font-size: 13px; line-height: 1.8; color: var(--text-muted); } .mz-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 13px; } .mz-sum b { font-weight: 700; } .mz-sum span { color: var(--text-muted); font-size: 12px; } .mz-sug { margin: 0; font-size: 12.5px; line-height: 1.7; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .mz-list { display: grid; gap: 8px; } .mz-row { display: grid; grid-template-columns: minmax(120px, 1.1fr) minmax(120px, 2fr) auto; align-items: center; gap: 6px 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); } .mz-row.st-over { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); } .mz-who { display: grid; gap: 2px; min-width: 0; } .mz-who b { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; } .mz-st, .mz-note, .mz-busy { font-size: 11.5px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; } .mz-row.st-over .mz-st { color: var(--danger); font-weight: 600; } .mz-busy { color: var(--text); font-weight: 600; } .mz-vu { position: relative; height: 10px; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); } .mz-fill { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 99px; background: color-mix(in srgb, var(--text) 38%, transparent); transition: width .3s ease; } .mz-fill.st-over { background: var(--danger); } .mz-fill.st-under { background: color-mix(in srgb, var(--text) 20%, transparent); } .mz-mark { position: absolute; inset-block: -4px; width: 2px; margin-inline-start: -1px; border-radius: 2px; background: var(--text); text-decoration: none; } .mz-vu.me { border-color: var(--border-strong); } .mz-num { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--text-muted); white-space: nowrap; } .mz-num b { font-size: 14px; font-weight: 700; color: var(--text); } .mz-num em { font-style: normal; font-weight: 700; color: var(--text); } .mz-row.st-over .mz-num em { color: var(--danger); } .mz-parts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; } .mz-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 11.5px; } .mz-chip.q { color: var(--text-muted); } button.mz-chip { cursor: pointer; } button.mz-chip:active { transform: scale(.965); } .mz-ask { grid-column: 1 / -1; justify-self: end; } .mz-sec { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--text-muted); } .mz-rot { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; } .mz-rot-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; } .mz-rot-l { display: flex; flex-wrap: wrap; gap: 4px; } .mz-blk { padding: 1px 8px; border-radius: 99px; border: 1px solid var(--border-strong); font-size: 11px; font-weight: 600; color: var(--text); } .mz-next { font-size: 12px; color: var(--text-muted); } .mz-next b { color: var(--text); } .mz-mine { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); } .mz-mine.st-over { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); } .mz-mine p { margin: 0; font-size: 13px; line-height: 1.7; } .mz-go { justify-self: end; } .mz-spread { display: grid; gap: 6px; } .mz-anon { display: grid; grid-template-columns: minmax(0, 1fr) 36px; align-items: center; gap: 8px; } .mz-anon em { font-style: normal; font-size: 11.5px; font-weight: 700; } .mz-how { font-size: 12px; color: var(--text-muted); } .mz-how summary { cursor: pointer; font-weight: 600; } .mz-how p { margin: 6px 0 0; line-height: 1.8; } .mz-home { margin-bottom: 16px; display: grid; gap: 6px; } .mz-home[hidden] { display: none; } .mz-hl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: baseline; width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); color: var(--text); font: inherit; font-size: 12.5px; text-align: start; cursor: pointer; } .mz-hl > span:first-child { font-weight: 700; color: var(--text-muted); } .mz-hl.bad { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); } .mz-hl:active { transform: scale(.965); } .mz-hint { display: grid; gap: 4px; margin-top: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); font-size: 12px; line-height: 1.7; } .mz-hint[hidden] { display: none; } .mz-nums { display: flex; flex-wrap: wrap; gap: 8px 14px; } .mz-tasks { display: grid; gap: 8px; } .mz-trow { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(120px, 1.4fr) minmax(110px, 1fr) auto auto auto; align-items: center; gap: 6px; } .mz-tdel { color: var(--text-muted); } .mz-tadd { justify-self: start; } .mz-seen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); } .mz-foot { display: flex; justify-content: space-between; gap: 8px; padding: 0 16px 14px; } .mz-foot .mz-reset { color: var(--text-muted); } @media (max-width: 640px) { .mz-row { grid-template-columns: minmax(0, 1fr) auto; } .mz-row .mz-vu { grid-column: 1 / -1; grid-row: 2; } .mz-trow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* ═══ v629 — مركز المساعدة · منصّة الحاضر · التسمية بالتاريخ (TakeFlow Tv - تصميم وتطوير محمد قندقلي) ═══ */ .hp-q { display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); color: var(--text-muted); } .hp-q input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; box-shadow: none; padding: 10px 0; } .hp-out { margin-top: 10px; } .hp-list { display: grid; gap: 6px; } .hp-art { border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); } .hp-art-h { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: start; cursor: pointer; } .hp-art-h b { font-weight: 600; } .hp-art-h:active { transform: scale(.965); } .hp-art-b { display: grid; gap: 8px; padding: 0 12px 12px; } .hp-art-b p { margin: 0; font-size: 12.5px; line-height: 1.9; color: var(--text); } .hp-art-b .tfb { justify-self: start; } .hp-hit { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; align-items: center; width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); color: var(--text); font: inherit; text-align: start; cursor: pointer; } .hp-hit i { grid-row: span 2; display: inline-flex; color: var(--text-muted); } .hp-hit b { font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; } .hp-hit em { font-style: normal; font-size: 11px; color: var(--text-muted); } .hp-hit:active { transform: scale(.965); } .hp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: hp; } .hp-step { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); color: var(--text); font: inherit; font-size: 13px; text-align: start; cursor: pointer; } .hp-step i { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border-strong); color: var(--text); } .hp-steps li.done .hp-step { color: var(--text-muted); } .hp-steps li.done .hp-step i { background: var(--surface); border-color: var(--success); color: var(--success); } .hp-step:active { transform: scale(.965); } .hp-keys { margin-top: 10px; } .hp-notes { display: grid; gap: 6px; } .hp-note { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; background: var(--surface2); } .hp-note summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; font-size: 12.5px; } .hp-note summary span { color: var(--text-muted); font-size: 11.5px; } .hp-note ul { margin: 8px 0 2px; padding-inline-start: 18px; display: grid; gap: 4px; font-size: 12.5px; line-height: 1.7; } .hp-cats { margin: 8px 0; flex-wrap: wrap; } .hp-vtext { width: 100%; min-height: 96px; resize: vertical; } .hp-diag { margin-top: 8px; } .hp-diagv { margin-top: 6px; font-size: 12px; color: var(--text-muted); } .hp-diagv pre { margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--surface2); font-size: 11px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; text-align: start; } .hp-vfoot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 10px; } /* منصّة الحاضر: أيقونةٌ صغيرة على حافّة الصورة المقابلة لنقطة الحالة */ .ms-pf { display: inline-flex; gap: 1px; vertical-align: middle; } .ms-pf:empty { display: none; } .ms-pf-i { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); } .ms-av .ms-pf, .hx-av .ms-pf { position: absolute; bottom: -2px; inset-inline-start: -2px; } .hx-av { position: relative; display: inline-flex; line-height: 0; } .ms-about-build { margin-top: 4px; font-size: 11.5px; color: var(--text-muted); } /* ═══ v631 — التوليد بموافقة · خطّة الصور · الصور المجّانيّة · صلاحيّة المفاتيح (TakeFlow Tv - تصميم وتطوير محمد قندقلي) ═══ */ .ts-led.bad { background: var(--danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 24%, transparent), 0 0 7px color-mix(in srgb, var(--danger) 55%, transparent); } .sb-plan-btn { margin-inline-start: 10px; vertical-align: middle; } .tg-pm { width: auto; min-width: 120px; margin-inline-start: 8px; } .tg-q { font-size: 15px; margin-inline-end: 8px; } .gp-card { width: min(880px, 100%); max-width: 880px; max-height: min(88vh, 900px); display: flex; flex-direction: column; gap: 12px; padding: 18px; } .gp-head { display: flex; align-items: flex-start; gap: 10px; } .gp-head h3 { flex: 1 1 auto; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 16px; font-weight: 700; } .gp-head h3 small { font-size: 12.5px; font-weight: 500; color: var(--text-muted); } .gp-x { min-width: 40px; min-height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .gp-x:active { transform: scale(.965); } .gp-ctl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; } .gp-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-muted); } .gp-f select { min-width: 150px; } .gp-list { flex: 1 1 auto; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-inline-end: 2px; } .gp-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 96px; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); opacity: .62; } .gp-row.on { opacity: 1; border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); } .gp-chk { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 2px; cursor: pointer; } .gp-chk input { width: 18px; height: 18px; accent-color: var(--accent); } .gp-chk b { font-size: 11px; color: var(--text-muted); } .gp-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; } .gp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; } .gp-meta em { font-style: normal; color: var(--text-muted); font-size: 12px; } .gp-type { padding: 2px 8px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface2); font-size: 11.5px; font-weight: 600; } .gp-txt { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--text-muted); overflow-wrap: anywhere; } .gp-p { width: 100%; min-height: 64px; resize: vertical; font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.55; text-align: left; } .gp-st { min-height: 16px; font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; } .gp-st.ok { color: var(--success); } .gp-st.bad { color: var(--danger); } .gp-thumb { width: 96px; aspect-ratio: 16 / 9; border-radius: 8px; border: 1px dashed var(--border); background: var(--surface2); display: flex; align-items: center; justify-content: center; } .gp-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; } .gp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .gp-sum { flex: 1 1 auto; font-size: 12.5px; color: var(--text-muted); } @media (max-width: 640px) { .gp-card { max-height: 92vh; padding: 14px 12px; border-radius: 16px 16px 0 0; } .gp-row { grid-template-columns: auto minmax(0, 1fr); } .gp-thumb { grid-column: 2; width: 100%; max-width: 220px; } .gp-thumb:empty { display: none; } .gp-foot .tfb { flex: 1 1 auto; } .gp-sum { flex-basis: 100%; } } /* ═══ v632 — شاشة الدخول: رحلة الطلب · دخولٌ متدرّج · بلا رقم إصدار (TakeFlow Tv - تصميم وتطوير محمد قندقلي) ═══ الرحلة تسع ثوانٍ: النقطة تقف عند كلّ محطّة ثمّ تعبر إلى التالية · تُضيء المحطّة حين تصلها وتبقى مضاءة · يُختم «معتمَد للبثّ» عند الهواء. «تقليل الحركة»: الحالة الأخيرة ثابتة — المحطّات مضاءة والختم ظاهر. */ .ln-trip { position: relative; margin: 22px 0 6px; direction: inherit; } .ln-trip-track { position: relative; height: 2px; margin: 0 22px; border-radius: 2px; background: rgba(255, 255, 255, .12); } .ln-trip-pk { position: absolute; top: -4px; inset-inline-start: 0; width: 10px; height: 10px; margin-inline-start: -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent), 0 0 14px 2px color-mix(in srgb, var(--accent) 60%, transparent); animation: lnTripPk 9s cubic-bezier(.55, .05, .25, 1) infinite; } @keyframes lnTripPk { 0% { inset-inline-start: 0%; opacity: 0; } 3%, 12% { inset-inline-start: 0%; opacity: 1; } 26%, 38% { inset-inline-start: 33.333%; } 52%, 64% { inset-inline-start: 66.666%; } 78%, 94% { inset-inline-start: 100%; opacity: 1; } 100% { inset-inline-start: 100%; opacity: 0; } } .ln-trip-st { list-style: none; margin: 12px 0 0; padding: 0; gap: 6px; text-align: center; } /* الكونسول للشاشة العريضة وحدها — شبكته هنا لا تمسّ الهاتف (كما .ln-vu و.ln-doc) */ @media (min-width: 901px) { .ln-trip-st { display: grid; grid-template-columns: repeat(4, 1fr); } } .ln-trip-st li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: rgba(231, 235, 245, .5); } .ln-trip-st li:first-child { align-items: flex-start; text-align: start; } .ln-trip-st li:last-child { align-items: flex-end; text-align: end; } .ln-trip-st b { font-size: 9.5px; font-weight: 500; letter-spacing: .14em; color: rgba(231, 235, 245, .4); } .ln-trip-st s { width: 8px; height: 8px; margin-top: -19px; margin-bottom: 4px; border-radius: 50%; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25); } .ln-trip-st li:first-child s { margin-inline-start: 18px; } .ln-trip-st li:last-child s { margin-inline-end: 18px; } .ln-trip-st li:nth-child(1) s { animation: lnTrip0 9s linear infinite; } .ln-trip-st li:nth-child(2) s { animation: lnTrip1 9s linear infinite; } .ln-trip-st li:nth-child(3) s { animation: lnTrip2 9s linear infinite; } .ln-trip-st li:nth-child(4) s { animation: lnTrip3 9s linear infinite; } .ln-trip-st li:nth-child(1) span { animation: lnTripT0 9s linear infinite; } .ln-trip-st li:nth-child(2) span { animation: lnTripT1 9s linear infinite; } .ln-trip-st li:nth-child(3) span { animation: lnTripT2 9s linear infinite; } .ln-trip-st li:nth-child(4) span { animation: lnTripT3 9s linear infinite; } @keyframes lnTrip0 { 0%, 2% { background: rgba(255, 255, 255, .16); } 4%, 96% { background: var(--accent); box-shadow: 0 0 8px var(--accent); } 100% { background: rgba(255, 255, 255, .16); } } @keyframes lnTrip1 { 0%, 25% { background: rgba(255, 255, 255, .16); } 27%, 96% { background: var(--accent); box-shadow: 0 0 8px var(--accent); } 100% { background: rgba(255, 255, 255, .16); } } @keyframes lnTrip2 { 0%, 51% { background: rgba(255, 255, 255, .16); } 53%, 96% { background: var(--accent); box-shadow: 0 0 8px var(--accent); } 100% { background: rgba(255, 255, 255, .16); } } @keyframes lnTrip3 { 0%, 77% { background: rgba(255, 255, 255, .16); } 79%, 96% { background: var(--success); box-shadow: 0 0 10px var(--success); } 100% { background: rgba(255, 255, 255, .16); } } @keyframes lnTripT0 { 0%, 2%, 26%, 100% { color: rgba(231, 235, 245, .5); } 4%, 13% { color: rgba(241, 244, 250, .95); } } @keyframes lnTripT1 { 0%, 25%, 52%, 100% { color: rgba(231, 235, 245, .5); } 27%, 39% { color: rgba(241, 244, 250, .95); } } @keyframes lnTripT2 { 0%, 51%, 78%, 100% { color: rgba(231, 235, 245, .5); } 53%, 65% { color: rgba(241, 244, 250, .95); } } @keyframes lnTripT3 { 0%, 77%, 100% { color: rgba(231, 235, 245, .5); } 79%, 96% { color: rgba(241, 244, 250, .95); } } /* الختم يُضغط عند وصول الطلب إلى الهواء — الدوران نفسه في الاتّجاهين */ .ln-stamp { --ln-rot: -7deg; animation: lnStamp 9s cubic-bezier(.3, 1.4, .5, 1) infinite; } [dir="rtl"] .ln-stamp { --ln-rot: 7deg; } @keyframes lnStamp { 0%, 77% { opacity: 0; transform: rotate(var(--ln-rot)) scale(1.35); } 81% { opacity: 1; transform: rotate(var(--ln-rot)) scale(.94); } 84%, 96% { opacity: 1; transform: rotate(var(--ln-rot)) scale(1); } 100% { opacity: 0; transform: rotate(var(--ln-rot)) scale(1); } } /* الدخول المتدرّج: العنوان ثمّ الحقول ثمّ الزرّ — مرّةً واحدة */ .ln-body > * { animation: lnIn .55s cubic-bezier(.2, .7, .2, 1) both; } .ln-body > :nth-child(2) { animation-delay: .06s; } .ln-body > :nth-child(3) { animation-delay: .12s; } .ln-body > :nth-child(4) { animation-delay: .18s; } .ln-body > :nth-child(5) { animation-delay: .24s; } .ln-slate { animation: lnIn .7s .15s cubic-bezier(.2, .7, .2, 1) both; } @keyframes lnIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .ln-trip-pk { animation: none; inset-inline-start: 100%; } .ln-trip-st li:nth-child(n) s, .ln-trip-st li:nth-child(n) span { animation: none; } /* خصوصيّة قواعد الحركة نفسها (li:nth-child) — وإلّا تغلب */ .ln-trip-st s { background: var(--accent); } .ln-trip-st li:last-child s { background: var(--success); } .ln-stamp { animation: none; opacity: 1; transform: rotate(var(--ln-rot)); } .ln-body > *, .ln-slate { animation: none; } } /* ═══ v632 — سجلّ الأخطاء (TakeFlow Tv - تصميم وتطوير محمد قندقلي) ═══ */ .elg-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0; } .elg-list { display: flex; flex-direction: column; gap: 8px; } .elg-row { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 6px; } .elg-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .elg-code { padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border)); background: color-mix(in srgb, var(--danger) 8%, transparent); } .elg-what { flex: 1 1 auto; font-size: 13px; font-weight: 600; } .elg-cnt { font-size: 15px; font-weight: 600; } .elg-msg { margin: 0; font-size: 12px; line-height: 1.6; color: var(--text); text-align: left; overflow-wrap: anywhere; } .elg-msg em { font-style: normal; color: var(--text-muted); } .elg-meta, .elg-do { font-size: 12px; color: var(--text-muted); } .elg-do { padding-inline-start: 10px; border-inline-start: 2px solid var(--border); } .elg-act { display: flex; justify-content: flex-end; } /* المحو معزولٌ أسفل اليسار بلونٍ محايد */ .elg-empty { padding: 14px; border-radius: 12px; border: 1px dashed var(--border); text-align: center; font-size: 13px; color: var(--text-muted); } .elg-empty.bad { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); } /* ═══ v633 — الأساس: الهاتف · شريط العنوان · نافذة الفريق · العودة إلى المساعدة · نطاق الحساب (TakeFlow Tv - تصميم وتطوير محمد قندقلي) ═══ */ /* الهاتف: الشعار والأزرار كانت أعرض من الشاشة بـ46px — «المزيد» خارجها يساراً والصفحة تنزلق أفقيّاً (body.scrollWidth 436 على 390) */ @media (max-width: 480px) { .topnav .logo { flex: 0 1 auto; min-width: 0; } .topnav .logo > span { display: none !important; } /* الأسلوب المكتوب في الماركب inline-flex */ .topnav .logo img { height: 24px !important; width: auto !important; max-width: calc(100vw - 268px); object-fit: contain; object-position: center; } /* v644 — «height:auto» صفّر الشعار (٠×٠) على الهاتف: ارتفاعٌ صريح والعرض من نسبته */ .topnav .nav-right { flex: 0 0 auto; gap: 4px; } .topnav #support-btn { display: none; } /* مركز الدعم في «المزيد» على الهاتف — بعدّاده */ } /* صور النشرة على الهاتف: الرأس كان سطراً واحداً — اليوم وأزراره خارج الشاشة يساراً (الصفحة 563 على 390) والعنوان مكسورٌ ثلاثة أسطر */ @media (max-width: 480px) { .bi-head { flex-wrap: wrap; } .bi-day { flex: 1 0 100%; justify-content: space-between; box-sizing: border-box; } } /* درج مجلّدات البريد على الهاتف: المطويّ كان يطلّ ١٢px من حافّة الشاشة — يختفي كلّه حتّى يُفتح */ @media (max-width: 900px) { .mail-shell:not(.mfold-open) .mail-folders { visibility: hidden; transition: transform .26s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .26s; } } /* شريط عنوان التطبيق خارج «حجم الواجهة»: body مكبَّر بـzoom، والشريط يقسم أبعاده على المقياس فيُرسم بحجم إطار النظام */ body.tf-chrome { --tf-chrome-h: calc(36px / var(--tf-uiz, 1)); } .tf-mbar { left: calc(env(titlebar-area-x, 0px) / var(--tf-uiz, 1)); width: calc(env(titlebar-area-width, calc(100% * var(--tf-uiz, 1))) / var(--tf-uiz, 1)); } /* بلا إطار (المتصفّح): العرض كلّه كما كان */ /* نافذة الفريق (النقل · الأدوار): الرأس ثابتٌ أعلى النافذة وما تحته يتمرّر — والشريط ظاهرٌ على الكمبيوتر. top سالبٌ بقدر حشوة الستار (5vh): Chrome يلصق داخل الحشوة، فبـ0 يبقى شريطٌ يمرّ فيه المحتوى فوق الرأس */ .tm-ov { scrollbar-gutter: stable; } .tm-ov .tm-bar { position: sticky; top: -5vh; z-index: 2; background: var(--surface); border-radius: 18px 18px 0 0; } @media (max-width: 640px) { .tm-ov .tm-bar { top: 0; border-radius: 0; } } /* «عُد إلى المساعدة» — زرّ تنقّلٍ يظهر بعد مغادرة المساعدة إلى صفحة، في الطرف المقابل للحفظ */ .hp-back { position: fixed; inset-inline-end: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 900; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border-strong, var(--border)); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--text) 40%, transparent); } .hp-back:active { transform: scale(.965); } @media (max-width: 820px) { .hp-back { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } } /* نطاق كلّ حساب: قسمٌ في كلّ سطر وثلاث حالات */ .sca-pick { max-width: 420px; } .sca-st { margin: 8px 0; font-size: 12px; color: var(--text-muted); } .sca-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px 14px; } .sca-r { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--border); } .sca-r.on { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .sca-r > b { font-size: 13px; font-weight: 600; display: inline-flex; gap: 6px; align-items: baseline; } .sca-r > b em { font-style: normal; font-size: 11px; color: var(--text-muted); font-weight: 500; } .sca-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; padding: 2px; gap: 2px; } .sca-seg button { border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 7px; cursor: pointer; } .sca-seg button.on { background: var(--surface2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); } .sca-seg button:disabled { cursor: default; opacity: .6; } .sca-foot { display: flex; justify-content: flex-end; margin-top: 10px; } /* ═══ v634 — العطل العادلة (TakeFlow Tv - تصميم وتطوير محمد قندقلي) ═══ جدولٌ للمعاينة: صفٌّ لكلّ عضو وعمودٌ لكلّ يوم — المقترح وحده ملوَّن (اللون للمعنى)، والويكند بتدرّج أقوى لا بصبغةٍ أخرى */ .ofp-card { width: min(980px, 96vw); max-height: calc(100vh - 40px - var(--tf-chrome-h, 0px)); display: flex; flex-direction: column; } .ofp-body { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; } .ofp-hint { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--text-muted); } .ofp-opt { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); } .ofp-grid { display: flex; flex-direction: column; gap: 4px; overflow-x: auto; } .ofp-r { display: grid; grid-template-columns: minmax(150px, 1.6fr) repeat(7, minmax(54px, 1fr)) minmax(64px, .8fr); gap: 4px; align-items: center; } .ofp-ds { display: none; } .ofp-hd { font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .ofp-hd .ofp-d { text-align: center; } .ofp-d.wk { color: var(--text); } .ofp-who { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; font-size: 13px; } .ofp-who b { font-weight: 600; overflow-wrap: anywhere; } .ofp-n { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; flex: none; } .ofp-n button { border: 0; background: transparent; color: var(--text-muted); width: 24px; height: 26px; font: inherit; cursor: pointer; border-radius: 7px; } .ofp-n button:active { transform: scale(.965); } .ofp-n i { font-style: normal; font-size: 12px; min-width: 16px; text-align: center; } .ofp-c { height: 34px; border-radius: 8px; border: 1px solid var(--border); background: transparent; font: inherit; font-size: 11.5px; display: flex; align-items: center; justify-content: center; padding: 0 4px; color: var(--text-muted); min-width: 0; overflow-wrap: anywhere; text-align: center; line-height: 1.2; } .ofp-c.cur { background: var(--surface2); } .ofp-c.cur.off { color: var(--text); border-style: dashed; } button.ofp-c { cursor: pointer; } button.ofp-c:active { transform: scale(.965); } .ofp-c.free:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .ofp-c.free.drop { border-style: dashed; } .ofp-c.new { color: var(--text); font-weight: 600; border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 12%, transparent); } .ofp-c.new.wk { background: color-mix(in srgb, var(--accent) 26%, transparent); } .ofp-c.new.man { border-style: dashed; } .ofp-t { font-size: 12px; text-align: center; color: var(--text-muted); } .ofp-r.short .ofp-who b { color: var(--danger); } .ofp-cov { border-top: 1px solid var(--border); padding-top: 6px; font-size: 12px; color: var(--text-muted); } .ofp-cov .ofp-d { text-align: center; } .ofp-cov .ofp-d.low { color: var(--danger); font-weight: 600; } .ofp-warn { margin: 0; font-size: 12.5px; color: var(--danger); } .ofp-empty { padding: 18px; text-align: center; font-size: 13px; color: var(--text-muted); } .ofp-foot { margin-top: 4px; } .ofp-acts { display: inline-flex; gap: 8px; flex-wrap: wrap; } @media (max-width: 640px) { .ofp-body { padding: 12px; } .ofp-r { grid-template-columns: minmax(84px, 1.3fr) repeat(7, minmax(0, 1fr)) 38px; gap: 3px; } .ofp-dl { display: none; } .ofp-ds { display: inline; } .ofp-who { flex-direction: column; align-items: flex-start; gap: 3px; font-size: 12px; } .ofp-c { height: 32px; font-size: 9.5px; padding: 0 1px; } .ofp-t { font-size: 11px; } } /* ═══ v635 — المهامّ: ثلاث نهايات · الأرشيف · الميزان (TakeFlow Tv - تصميم وتطوير محمد قندقلي) ═══ */ .tk-card.st-cant { border-style: dashed; } .st-cant .tk-led { background: color-mix(in srgb, var(--text) 35%, transparent); } .tka-tabs { margin: 0 0 12px; } .tko-card { width: min(520px, 94vw); } .tko-body { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 10px; } .tko-t { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.6; } .tko-hint { margin: 0; font-size: 12.5px; color: var(--text-muted); } .tko-row { display: flex; flex-wrap: wrap; gap: 10px; } .tko-f { display: flex; flex-direction: column; gap: 5px; flex: 1 1 200px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--text-muted); } .tko-f.sm { flex: 0 1 150px; } .write-modal .tko-f textarea { flex: none; min-height: 84px; height: 96px; max-height: 30vh; resize: vertical; } /* القاعدة العامّة للنافذة 340px — تدفع الأزرار خارج الهاتف */ .tko-f input, .tko-f textarea { font: inherit; font-size: 13px; font-weight: 500; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2, var(--surface)); color: var(--text); box-sizing: border-box; width: 100%; } .tka-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .tka-tools select, .tka-q { flex: 0 1 auto; min-width: 0; } .tka-q { flex: 1 1 200px; } .tka-list { display: flex; flex-direction: column; gap: 6px; } .tka-r { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); } .tka-r.o-cant { border-style: dashed; } .tka-o { grid-row: span 3; align-self: start; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; } .tka-r.o-done .tka-o { color: var(--text); border-color: color-mix(in srgb, var(--success) 55%, var(--border)); } .tka-t { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; } .tka-m { font-size: 12px; color: var(--text-muted); } .tka-n { font-size: 12.5px; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; } .tka-hint { margin: 0 0 10px; font-size: 12.5px; line-height: 1.7; color: var(--text-muted); } .tka-fair { display: flex; flex-direction: column; gap: 8px; } .tka-f { display: grid; grid-template-columns: minmax(110px, 160px) minmax(80px, 1fr); grid-template-areas: "n b" "x x"; gap: 4px 12px; align-items: center; } .tka-f > b { grid-area: n; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; } .tka-bar { grid-area: b; height: 8px; border-radius: 99px; background: var(--surface2, var(--surface)); border: 1px solid var(--border); } .tka-bar i { display: block; height: 100%; border-radius: 99px; background: color-mix(in srgb, var(--accent) 70%, transparent); } .tka-f.hi .tka-bar i { background: var(--danger); } .tka-nums { grid-area: x; font-size: 12px; color: var(--text-muted); } /* ═══ v636 — مكتب الإرسال: شريط الإرسال · طاولة المكسر · السجلّ (TakeFlow Tv - تصميم وتطوير محمد قندقلي) ═══ اللوحة محايدة؛ المشبع لما يحتاج الانتباه الآن (في خطر · تجاوز موعده)، والجاهز أخضر خافت. */ .adk-head { margin: 0 0 12px; display: flex; flex-direction: column; gap: 10px; } .adk-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; } .adk-when { font-size: 12.5px; color: var(--text-muted); margin-inline-end: auto; } .adk-stats { display: flex; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); } .adk-st { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 14px; border-inline-start: 1px solid var(--border); min-width: 54px; } .adk-st:first-child { border-inline-start: none; } .adk-st b { font-size: 19px; font-weight: 600; line-height: 1.1; color: var(--text); } .adk-st small { font-size: 11px; font-weight: 600; color: var(--text-muted); white-space: nowrap; } .adk-st.hot b, .adk-st.hot small { color: var(--danger); } .adk-sw { display: inline-flex; gap: 3px; padding: 3px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2, var(--surface)); } .adk-swb { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--text-muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: transform .12s ease, background .15s ease; } .adk-swb:active { transform: scale(.965); } .adk-swb.on { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent); } .adk-fl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .adk-chip { padding: 6px 13px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: transform .12s ease; } .adk-chip:active { transform: scale(.965); } .adk-chip.on { background: var(--text); color: var(--bg); border-color: var(--text); } .adk-chip.hot:not(.on) { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); color: var(--danger); } .adk-legend { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); } .adk-legend i { width: 8px; height: 8px; border-radius: 50%; margin-inline-start: 8px; border: 1.5px solid var(--border-strong, var(--border)); } .adk-legend i.done { background: var(--success); border-color: var(--success); } .adk-legend i.active { background: var(--warning); border-color: var(--warning); } .adk-search { max-width: 420px; margin-bottom: 12px; } .adk-host { display: block; } .adk-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 16px; color: var(--text-muted); text-align: center; border: 1px dashed var(--border); border-radius: 16px; } .adk-empty b { color: var(--text); font-size: 14px; } /* المشترك: الرقم · العنوان · العاجل · النقاط · الحامل · الختم */ .adk-mat { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; direction: ltr; unicode-bidi: isolate; } .adk-mat.none { font-family: inherit; font-style: normal; opacity: .7; direction: rtl; } .adk-ti { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .adk-ti b { font-size: 13.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; } .adk-ti small { font-size: 11.5px; color: var(--text-muted); } .adk-ti small.hot { color: var(--danger); } .adk-urg { align-self: flex-start; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 6px; background: var(--danger); color: var(--danger-ink); } .adk-dots { display: inline-flex; align-items: flex-start; gap: 0; } .adk-dots > b { width: 14px; height: 1.5px; margin-top: 5px; background: var(--border); } .adk-dt { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; } .adk-dt i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--border-strong, var(--border)); background: var(--surface); box-sizing: border-box; } .adk-dt.done i { background: var(--success); border-color: var(--success); } .adk-dt.active i { background: var(--warning); border-color: var(--warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 22%, transparent); } .adk-dt.later i { border-style: dashed; } .adk-dt small { font-size: 10px; color: var(--text-muted); white-space: nowrap; } .adk-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .adk-av { width: 24px; height: 24px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--surface2, var(--surface)); border: 1px solid var(--border); color: var(--text); } .adk-av.none { color: var(--text-muted); } .adk-avn { font-size: 12.5px; color: var(--text); white-space: nowrap; } .adk-stp { justify-self: start; align-self: flex-start; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 7px; border: 1.5px solid var(--border); color: var(--text-muted); white-space: nowrap; } .adk-stp.aired { color: var(--success); border-color: color-mix(in srgb, var(--success) 60%, var(--border)); transform: rotate(-4deg); } .adk-stp.ready { color: var(--text); border-color: var(--text); } .adk-stp.run { border-color: transparent; color: var(--warning); padding-inline: 0; } .adk-stp.idle { border-color: transparent; padding-inline: 0; } .adk-stp.hot { border-color: transparent; color: var(--danger); padding-inline: 0; } .adk-cdb { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 8px; border: 1px solid var(--border); color: var(--text); background: var(--surface); } .adk-cdb.hot { background: var(--danger); border-color: var(--danger); color: var(--danger-ink); } .adk-gn { font-size: 13.5px; font-weight: 700; color: var(--text); } .adk-gt { font-size: 12.5px; color: var(--text-muted); direction: ltr; unicode-bidi: isolate; } .adk-gr { font-size: 12px; color: var(--text-muted); margin-inline-start: auto; } .adk-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent); transition: transform .12s ease; } .adk-btn:active { transform: scale(.965); } .adk-btn.pri { background: var(--text); color: var(--bg); border-color: var(--text); } .adk-btn.hot { background: var(--danger); color: var(--danger-ink); border-color: var(--danger); } .adk-btn.sm { padding: 6px 11px; font-size: 12px; } /* أ — شريط الإرسال */ .adk-strip { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); } .adk-shead, .adk-row { display: grid; grid-template-columns: 84px minmax(160px, 1.2fr) 112px 92px minmax(260px, 2fr); align-items: center; gap: 10px; padding: 0 14px; } .adk-shead { position: sticky; top: 0; z-index: 2; min-height: 54px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); background: var(--surface); border-bottom: 1px solid var(--border); border-radius: 16px 16px 0 0; } .adk-ruler { position: relative; height: 46px; } .adk-tk { position: absolute; bottom: 4px; transform: translateX(50%); font-size: 10.5px; color: var(--text-muted); } [dir="ltr"] .adk-tk, [dir="ltr"] .adk-bm, [dir="ltr"] .adk-nowtag { transform: translateX(-50%); } .adk-bm { position: absolute; top: 2px; transform: translateX(50%); font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--border); background: var(--surface2, var(--surface)); color: var(--text); white-space: nowrap; } .adk-nowtag { position: absolute; top: 2px; transform: translateX(50%); z-index: 1; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: var(--danger); color: var(--danger-ink); white-space: nowrap; } .adk-sbody { max-height: 62vh; overflow-y: auto; } .adk-gh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 14px; background: var(--surface2, var(--surface)); border-bottom: 1px solid var(--border); } .adk-row { min-height: 50px; border-bottom: 1px solid var(--border); cursor: pointer; } .adk-row:hover { background: color-mix(in srgb, var(--text) 4%, transparent); } .adk-row.hot { background: color-mix(in srgb, var(--danger) 8%, transparent); box-shadow: inset -3px 0 0 var(--danger); } [dir="ltr"] .adk-row.hot { box-shadow: inset 3px 0 0 var(--danger); } .adk-row.sel { outline: 2px solid var(--text); outline-offset: -2px; } .adk-tl { position: relative; height: 34px; } .adk-now { position: absolute; top: -9px; bottom: -9px; width: 2px; margin-inline-start: -1px; background: var(--danger); opacity: .85; } .adk-bar { position: absolute; top: 12px; height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--warning) 60%, var(--surface)); } .adk-bar.ok { background: color-mix(in srgb, var(--success) 45%, var(--surface)); } .adk-bar.hot { background: var(--danger); } .adk-bar.idle { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--text) 16%, transparent) 0 5px, transparent 5px 10px); border: 1px solid var(--border); } .adk-dia { position: absolute; top: 11px; width: 10px; height: 10px; margin-inline-start: -5px; transform: rotate(45deg); border: 1.5px solid var(--text-muted); background: var(--surface); } .adk-stamp { position: absolute; top: 5px; margin-inline-start: 10px; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 6px; border: 1.5px solid var(--success); color: var(--success); transform: rotate(-6deg); white-space: nowrap; } .adk-detail { margin-top: 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; } .adk-detail.hot { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); } .adk-dh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .adk-dh > b { font-size: 15px; font-weight: 700; color: var(--text); } .adk-dst { font-size: 12px; font-weight: 600; color: var(--text-muted); } .adk-dst.hot { color: var(--danger); } .adk-dleft { margin-inline-start: auto; font-size: 12.5px; font-weight: 600; color: var(--text-muted); } .adk-dleft.hot { color: var(--danger); } .adk-dcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--border); border-radius: 12px; } .adk-dc { display: flex; flex-direction: column; gap: 4px; padding: 9px 12px; border-inline-start: 1px solid var(--border); } .adk-dc:first-child { border-inline-start: none; } .adk-dc.cur { background: color-mix(in srgb, var(--warning) 10%, transparent); } .adk-dl { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .adk-dl i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--border-strong, var(--border)); } .adk-dc.done .adk-dl i { background: var(--success); border-color: var(--success); } .adk-dc.active .adk-dl i { background: var(--warning); border-color: var(--warning); } .adk-dv { font-size: 13px; color: var(--text); } .adk-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } /* ب — طاولة المكسر */ .adk-mixer { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; } .adk-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .adk-col { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); min-height: 60vh; } .adk-col.hot { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); } .adk-col > header { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 0 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); } .adk-col > header small { grid-column: 1 / -1; font-size: 10.5px; color: var(--text-muted); } .adk-col > header b { font-size: 14px; font-weight: 700; color: var(--text); } .adk-cn { font-size: 22px; font-weight: 600; line-height: 1; color: var(--text); } .adk-cb { flex: 1; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; padding: 10px; } .adk-meter { display: flex; flex-direction: column-reverse; gap: 3px; padding: 3px; border-radius: 8px; background: color-mix(in srgb, var(--text) 82%, var(--bg)); } .adk-meter i { flex: 1; min-height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--bg) 18%, transparent); } .adk-meter i.on { background: var(--success); } .adk-meter i.hot { background: var(--warning); } .adk-cards { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .adk-card { display: flex; flex-direction: column; gap: 5px; text-align: start; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2, var(--surface)); color: var(--text); font: inherit; cursor: pointer; transition: transform .12s ease; } .adk-card:active { transform: scale(.965); } .adk-card.hot { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); } .adk-card > b { font-size: 13px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; } .adk-ch { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .adk-cd { font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .adk-cd.hot { color: var(--danger); } .adk-cf { display: flex; align-items: center; gap: 6px; min-width: 0; } .adk-cf small { font-size: 11px; color: var(--text-muted); overflow-wrap: anywhere; } .adk-none { color: var(--text-muted); text-align: center; padding: 12px 0; } .adk-col > footer { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-muted); } .adk-air { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 18px; background: color-mix(in srgb, var(--text) 92%, var(--bg)); color: var(--bg); } .adk-air small { font-size: 11.5px; opacity: .7; } .adk-an { font-size: 15px; font-weight: 700; } .adk-big { font-size: 40px; font-weight: 600; line-height: 1.1; color: var(--danger); font-variant-numeric: tabular-nums; } .adk-seg { display: flex; gap: 4px; } .adk-seg i { flex: 1; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--bg) 22%, transparent); } .adk-seg i.on { background: var(--success); } .adk-seg i.hot { background: var(--danger); } .adk-ar { font-size: 12px; opacity: .8; } .adk-al { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--bg) 18%, transparent); } .adk-ai { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 4px 7px; padding: 7px 9px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--bg) 18%, transparent); background: transparent; color: inherit; font: inherit; font-size: 12px; text-align: start; cursor: pointer; } .adk-ai i { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); } .adk-ai.ready i, .adk-ai.aired i { background: var(--success); } .adk-ai.hot i { background: var(--danger); } .adk-ai b { grid-row: 2; grid-column: 1 / -1; font-weight: 600; overflow-wrap: anywhere; } .adk-ai small { grid-row: 1; grid-column: 3; justify-self: end; opacity: .75; text-align: end; } .adk-ai .adk-mat { color: inherit; opacity: .7; } .adk-aa { display: flex; flex-wrap: wrap; gap: 8px; } .adk-air .adk-btn:not(.hot) { background: transparent; color: var(--bg); border-color: color-mix(in srgb, var(--bg) 30%, transparent); } .adk-anx { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--bg) 18%, transparent); font-size: 12px; } .adk-anx > span { display: flex; justify-content: space-between; gap: 8px; } .adk-air.calm b { font-size: 13px; font-weight: 600; } /* ج — سجلّ الإرسال */ .adk-ledger { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); padding: 18px 22px 22px; box-shadow: 0 1px 0 var(--border); } .adk-lh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding-bottom: 10px; border-bottom: 2px solid var(--text); } .adk-lh b { font-size: 18px; font-weight: 700; color: var(--text); } .adk-lh span { font-size: 12.5px; color: var(--text-muted); } .adk-sheet { margin-inline-start: auto; padding: 2px 8px; border: 1px solid var(--border); border-radius: 6px; } .adk-lc, .adk-lr { display: grid; grid-template-columns: 110px 56px minmax(180px, 1fr) 110px 220px 150px; align-items: center; gap: 10px; } .adk-lc { padding: 10px 0; font-size: 11.5px; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); } .adk-lgh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 0 8px; border-bottom: 1px solid var(--border); } .adk-lr { width: 100%; padding: 9px 0; border: none; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; text-align: start; cursor: pointer; } .adk-lr:hover { background: color-mix(in srgb, var(--text) 4%, transparent); } .adk-lr.hot { background: linear-gradient(to left, color-mix(in srgb, var(--danger) 12%, transparent), transparent 70%); box-shadow: inset -3px 0 0 var(--danger); } [dir="ltr"] .adk-lr.hot { background: linear-gradient(to right, color-mix(in srgb, var(--danger) 12%, transparent), transparent 70%); box-shadow: inset 3px 0 0 var(--danger); } .adk-lt { font-size: 12.5px; color: var(--text); direction: ltr; unicode-bidi: isolate; } /* الهاتف — السجلّ بطاقاتٍ وبطاقة «التالي على الهواء» */ .adk-phone { display: flex; flex-direction: column; gap: 10px; } .adk-pnext { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 18px; background: color-mix(in srgb, var(--text) 92%, var(--bg)); color: var(--bg); } .adk-pnext small { font-size: 11.5px; opacity: .7; } .adk-pnext b { font-size: 15px; font-weight: 700; } .adk-pnext .adk-big { font-size: 34px; } .adk-pg { display: flex; flex-direction: column; gap: 8px; } .adk-pc { display: flex; flex-direction: column; gap: 8px; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); } .adk-pc.hot { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); } .adk-pcm { display: flex; flex-direction: column; gap: 7px; padding: 0; border: none; background: transparent; color: var(--text); font: inherit; text-align: start; cursor: pointer; } .adk-pcm > b { font-size: 14px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; } .adk-pc .adk-btn { align-self: flex-start; } @media (max-width: 1180px) { .adk-mixer { grid-template-columns: 1fr; } .adk-air { position: static; } .adk-lc, .adk-lr { grid-template-columns: 96px 48px minmax(140px, 1fr) 96px 200px 120px; } } @media (max-width: 900px) { .adk-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .adk-col { min-height: 0; } .adk-shead, .adk-row { grid-template-columns: 70px minmax(140px, 1fr) 100px minmax(200px, 1.4fr); } .adk-shead > span:nth-child(4), .adk-row .adk-who { display: none; } .adk-lc { display: none; } .adk-lr { grid-template-columns: auto auto minmax(0, 1fr); } } @media (max-width: 640px) { .adk-top { gap: 8px; } .adk-when { width: 100%; } .adk-stats { width: 100%; } .adk-st { flex: 1; min-width: 0; padding: 6px 4px; } .adk-st b { font-size: 16px; } .adk-legend { display: none; } .adk-search { max-width: none; } } /* ═══ v637 — الاستوديو: القوالب · خطّ الإنتاج · الوكيل (TakeFlow Tv - تصميم وتطوير محمد قندقلي) ═══ */ .bag-row.sz .bag-code { text-transform: uppercase; max-width: 90px; } .stx-tpl { display: grid; grid-template-columns: 220px minmax(0, 1fr) 320px; gap: 14px; align-items: start; } .stx-list, .stx-form, .stx-prev, .stx-card { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 12px; } .stx-list { display: flex; flex-direction: column; gap: 6px; } .stx-lh { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .stx-lh b { font-size: 13px; font-weight: 700; color: var(--text); } .stx-li { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2, var(--surface)); color: var(--text); font: inherit; text-align: start; cursor: pointer; transition: transform .12s ease; } .stx-li:active { transform: scale(.965); } .stx-li.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .stx-li b { font-size: 12.5px; font-weight: 600; } .stx-li small { font-size: 11px; color: var(--text-muted); } .stx-note { display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0; font-size: 12px; line-height: 1.7; color: var(--text-muted); } .stx-prev { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 8px; } .stx-ph { display: flex; justify-content: center; } .stx-cvw { display: flex; justify-content: center; align-items: center; min-height: 240px; border-radius: 10px; background: color-mix(in srgb, var(--text) 6%, var(--bg)); padding: 10px; } .stx-cvw canvas { display: block; max-width: 100%; max-height: 58vh; height: auto; border-radius: 4px; box-shadow: 0 6px 24px -10px color-mix(in srgb, var(--text) 40%, transparent); } .stx-form { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 220px); overflow-y: auto; } .stx-form h4 { margin: 8px 0 0; font-size: 12px; font-weight: 700; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 10px; } .stx-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-muted); } .stx-f input[type="text"], .stx-f textarea { font: inherit; font-size: 13px; font-weight: 500; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface2, var(--surface)); color: var(--text); box-sizing: border-box; width: 100%; } .stx-fc { flex-direction: row; align-items: center; justify-content: space-between; } .stx-fc input[type="color"] { width: 44px; height: 28px; border: 1px solid var(--border); border-radius: 8px; background: none; padding: 2px; } .stx-nv { display: flex; align-items: center; gap: 8px; } .stx-nv input[type="range"] { flex: 1; min-width: 0; } .stx-nv b { min-width: 52px; text-align: end; font-size: 11.5px; color: var(--text); direction: ltr; unicode-bidi: isolate; } .stx-chk { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); } .stx-seg { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2, var(--surface)); } .stx-seg button { padding: 5px 10px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: transform .12s ease; } .stx-seg button:active { transform: scale(.965); } .stx-seg button.on { background: var(--surface); color: var(--text); border-color: var(--border); } .stx-seg button[disabled] { cursor: default; } .stx-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); } .stx-del { color: var(--text-muted); } .stx-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 16px; border: 1px dashed var(--border); border-radius: 14px; color: var(--text-muted); text-align: center; } .stx-empty b { color: var(--text); } .stx-lnh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; } .stx-st { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 84px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); } .stx-st b { font-size: 20px; font-weight: 600; color: var(--text); } .stx-st small { font-size: 11px; font-weight: 600; color: var(--text-muted); } .stx-st.hot b, .stx-st.hot small { color: var(--danger); } .stx-lnh .tfb { margin-inline-start: auto; } .stx-sh { margin-bottom: 14px; } .stx-sh h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--text); } .stx-sh h4 em { font-style: normal; font-size: 11.5px; color: var(--text-muted); } .stx-rows { display: flex; flex-direction: column; gap: 4px; } .stx-r { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); font-size: 12.5px; color: var(--text); } .stx-r > i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong, var(--border)); } .stx-r b { font-weight: 600; overflow-wrap: anywhere; } .stx-r span { color: var(--text-muted); white-space: nowrap; } .stx-r code { font-size: 11px; overflow-wrap: anywhere; } .stx-r.st-work > i, .stx-r.st-review > i { background: var(--warning); } .stx-r.st-done > i { background: var(--success); } .stx-r.st-failed > i, .stx-r.st-unknown > i { background: var(--danger); } .stx-r.st-failed span, .stx-r.st-unknown span { color: var(--danger); } .stx-ag { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; } .stx-card h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13.5px; font-weight: 700; color: var(--text); } .stx-agst { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; } .stx-row { display: flex; flex-wrap: wrap; gap: 8px; } .stx-test { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; } .stx-test[hidden] { display: none; } .stx-codes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .stx-codes > span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--border); font-size: 12px; color: var(--text); } .stx-set { grid-column: 1 / -1; } @media (max-width: 1180px) { .stx-tpl { grid-template-columns: 200px minmax(0, 1fr); } .stx-form { grid-column: 1 / -1; max-height: none; } } @media (max-width: 760px) { .stx-tpl { grid-template-columns: 1fr; } .stx-prev { position: static; } } /* ═══ v638 — تفضيلاتي تتبعني · لوحة الانتظار على شاشة القفل (TakeFlow Tv - تصميم وتطوير محمد قندقلي) ═══ */ .upf-sync { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 12.5px; color: var(--text-muted); } .upf-sync span { flex: 1 1 220px; line-height: 1.7; } .tl-ov.sby-on { flex-direction: column; justify-content: center; gap: 28px; } .sby { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--text); pointer-events: none; user-select: none; } .sby-st { font-size: 14px; font-weight: 600; color: var(--text-muted); letter-spacing: .02em; } .sby-clock { font-size: clamp(64px, 12vw, 140px); font-weight: 600; line-height: 1; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; } .sby-clock small { font-size: .32em; color: var(--text-muted); margin-inline-start: 4px; } .sby-date { font-size: 15px; font-weight: 500; color: var(--text-muted); } .sby-next { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 14px; padding: 10px 22px; border-radius: 16px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 80%, transparent); } .sby-next small { font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .sby-next b { font-size: 17px; font-weight: 700; } .sby-next .mono { font-size: 22px; font-weight: 600; color: var(--accent-fg, var(--text)); direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; } @media (max-height: 640px) { .sby-next { display: none; } .tl-ov.sby-on { gap: 14px; } } /* ═══ v639 — المساعد في مكانه: درجٌ جانبيّ (TakeFlow Tv - تصميم وتطوير محمد قندقلي) ═══ */ .astd { position: fixed; top: calc(var(--topbar-h, 56px) + 8px); bottom: 12px; inset-inline-end: 12px; z-index: 900; width: min(400px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; border: 1px solid var(--border); background: var(--bg); background-image: linear-gradient(var(--surface), var(--surface)); box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--text) 45%, transparent); } .astd[hidden] { display: none; } .astd-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .astd-h b { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--text); } .astd-ctx { display: flex; align-items: flex-start; gap: 7px; padding: 8px 10px; border-radius: 10px; background: var(--surface2, var(--surface)); border: 1px solid var(--border); font-size: 12.5px; color: var(--text-muted); } .astd-ctx b { color: var(--text); font-weight: 600; overflow-wrap: anywhere; } .astd-acts { display: flex; flex-wrap: wrap; gap: 6px; } .astd-chip { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: transform .12s ease; } .astd-chip:active { transform: scale(.965); } .astd-chip[disabled] { opacity: .5; cursor: default; } .astd-out { flex: 1; min-height: 120px; overflow-y: auto; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); font-size: 13.5px; line-height: 1.9; color: var(--text); white-space: normal; overflow-wrap: anywhere; } .astd-hint { margin: 0; font-size: 12.5px; color: var(--text-muted); } .astd-in textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 52px; max-height: 30vh; padding: 9px 11px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2, var(--surface)); color: var(--text); font: inherit; font-size: 13.5px; } .astd-f { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .astd-full { margin-inline-start: auto; } /* v641 — الدرج فوق الصفحة: في ثيمات الزجاج السطح شفّافٌ فتظهر الصفحة من تحته — الخلفيّة الصلبة تحت السطح */ @media (max-width: 480px) { .topnav #astd-btn { display: none; } /* في «المزيد» على الهاتف */ .astd { inset: auto 8px calc(env(safe-area-inset-bottom, 0px) + 70px) 8px; top: calc(var(--topbar-h, 56px) + 6px); width: auto; } } /* ═══ v640 — هويّة المحطّة: الخطّ والبريد والورقة · مصمّم نموذج الإجازة (TakeFlow Tv - تصميم وتطوير محمد قندقلي) ═══ */ body.tf-on[data-lang][data-tf-font], body[data-tf-font] { font-family: var(--tf-disp); } /* الخطّ للواجهة حين يختاره الأدمن صراحةً */ .hrf-paper { font-family: var(--tf-brand-font, 'IBM Plex Sans Arabic', Arial, sans-serif); } /* الورقة بخطّ المحطّة — الافتراضيّ Plex كما كان */ .bk-fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; } .bk-font { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; text-align: start; transition: transform .12s ease, border-color .12s ease; } .bk-font b { font-size: 16px; font-weight: 700; line-height: 1.5; } .bk-font span { font-family: var(--tf-mono); font-size: 11px; color: var(--text-muted); } .bk-font.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .bk-font:active { transform: scale(.965); } .bk-font[disabled] { cursor: default; opacity: .7; } .bk-chk, .fx-chk { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 10px; font-size: 13px; color: var(--text); cursor: pointer; } .bk-chk input, .fx-chk input { margin-top: 3px; } .bk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 10px; } .bk-f { display: flex; flex-direction: column; gap: 4px; } .bk-f > span { font-size: 12px; font-weight: 600; color: var(--text-muted); } .bk-f textarea { resize: vertical; min-height: 64px; } .bk-pv { border: 1px solid var(--border); border-radius: 14px; padding: 10px; margin-bottom: 12px; background: var(--surface2, var(--surface)); } .bk-pv-h, .fx-pv-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); } .bk-seg, .fx-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 99px; padding: 2px; gap: 2px; } .bk-seg button, .fx-seg button { padding: 4px 12px; border: 0; border-radius: 99px; background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .bk-seg button.on, .fx-seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 18%, transparent); } .bk-pv-f { display: block; width: 100%; height: 400px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } .bk-tpls { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .bk-tpl { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); } .bk-tpl.on { border-color: var(--accent); } .bk-tpl-h { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 9px 12px; border: 0; background: transparent; color: var(--text); font: inherit; text-align: start; cursor: pointer; } .bk-tpl-h b { font-size: 13.5px; font-weight: 700; } .bk-tpl-h span { font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; } .bk-tpl-f { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; } .bk-tpl-do { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .bk-tpl-r { display: inline-flex; gap: 8px; } .bk-del { color: var(--text-muted); } .bk-add { margin-bottom: 6px; } .bk-empty { padding: 10px 12px; border: 1px dashed var(--border); border-radius: 12px; font-size: 12.5px; color: var(--text-muted); } .bk-busy { font-size: 12px; color: var(--text-muted); } .bk-about { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); text-align: center; } .bk-about-n { font-size: 15px; font-weight: 700; color: var(--text); } .bk-about-t { margin: 6px auto 8px; max-width: 46ch; font-size: 13px; line-height: 1.9; color: var(--text-muted); } .bk-about-c { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 12px; color: var(--text-muted); } .tpl-st { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--border); font-size: 10.5px; font-weight: 600; color: var(--text-muted); vertical-align: middle; } .tfb-modal { max-height: 94vh; overflow-y: auto; } .tfb-bd { display: flex; flex-direction: column; gap: 12px; } /* البنّاء: غلافه كان «tfb» صنف الزرّ */ .tfb-meter { display: flex; flex-direction: column; gap: 6px; } .tfb-bar { height: 6px; border-radius: 99px; background: var(--border); } .tfb-bar i { display: block; height: 100%; border-radius: inherit; background: var(--success, var(--accent)); } .tfb-meter.over .tfb-bar i { background: var(--danger); } .tfb-num { font-size: 12.5px; color: var(--text-muted); } .tfb-num b { font-family: var(--tf-mono); color: var(--text); } .tfb-bad, .tfb-warn { color: var(--danger); font-weight: 600; } .tfb-list { display: flex; flex-direction: column; gap: 6px; } .tfb-sec { padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); } .tfb-sh { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .tfb-sh b { min-width: 0; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; } .tfb-ops { display: inline-flex; flex: 0 0 auto; gap: 4px; } .tfb-ops button { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); cursor: pointer; } .tfb-ops button:active { transform: scale(.965); } .tfb-fl { margin-top: 4px; font-size: 11.5px; color: var(--text-muted); overflow-wrap: anywhere; } .fx { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 14px; margin-top: 14px; align-items: start; } .fx-ed { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .fx-h { font-size: 13px; font-weight: 700; color: var(--text); } .fx-g { border: 1px solid var(--border); border-radius: 12px; padding: 4px 10px; background: var(--surface); } .fx-g > summary { padding: 7px 2px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; } .fx-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: center; margin-bottom: 6px; } .fx-l { font-size: 12px; font-weight: 600; color: var(--text-muted); } .fx-fdo { display: flex; gap: 8px; margin: 4px 0 8px; } .fx-pv { position: sticky; top: 0; border: 1px solid var(--border); border-radius: 14px; padding: 10px; background: var(--surface2, var(--surface)); } .fx-pv-pg { max-height: 70vh; overflow: auto; border-radius: 8px; background: var(--surface); } .fx-pv-in { width: 793px; zoom: .44; } @media (max-width: 900px) { .fx { grid-template-columns: minmax(0, 1fr); } .fx-pv { position: static; } .fx-row { grid-template-columns: minmax(0, 1fr); } } /* ═══ v641 — خزنة المفاتيح · الدعم الخارجيّ · إعلان حالة الخدمة (TakeFlow Tv - تصميم وتطوير محمد قندقلي) ═══ */ .ih-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; margin-bottom: 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2, var(--surface)); font-size: 12.5px; line-height: 1.8; color: var(--text); } .ih-note > span { flex: 1 1 240px; min-width: 0; } .ih-note.warn { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); } .ih-note.warn svg { color: var(--warning); } .ih-note.ok svg { color: var(--success, var(--accent)); } .ih-rows .tfs-rc { flex-wrap: wrap; gap: 6px; } .ih-row em .mono { font-family: var(--tf-mono); } .ih-test { display: inline-block; margin-inline-start: 4px; font-style: normal; font-weight: 600; } .ih-test.ok { color: var(--success, var(--text)); } .ih-test.bad { color: var(--danger); } .ih-del { margin-inline-start: 4px; } .ih-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .ih-sup { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; } .ih-sup-h { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text); } .ih-sup-c { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); } .ih-sup-c.sos { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); } .ih-sup-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ih-sup-t b { font-size: 13.5px; font-weight: 700; color: var(--text); } .ih-sup-t span, .ih-sup-t em { font-size: 12px; font-style: normal; color: var(--text-muted); overflow-wrap: anywhere; } .ih-sos { align-self: flex-start; padding: 1px 8px; border-radius: 99px; background: var(--danger); color: var(--danger-ink, var(--text)); font-size: 10.5px; font-weight: 700; } .ih-sup-a { display: flex; flex-wrap: wrap; gap: 6px; } .ih-sup-a a { text-decoration: none; } .ih-sup-ed { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; } .ih-sup-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); } .ih-sup-ro { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; } .ih-chk { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; font-size: 13px; color: var(--text); cursor: pointer; } .ih-chk input { margin-top: 3px; } .ih-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 10px; } .ih-f { display: flex; flex-direction: column; gap: 4px; } .ih-f > span { font-size: 12px; font-weight: 600; color: var(--text-muted); } .ih-empty { padding: 10px 12px; border: 1px dashed var(--border); border-radius: 12px; font-size: 12.5px; color: var(--text-muted); } .ih-banner { position: fixed; top: calc(var(--topbar-h, 56px) + 8px); inset-inline: 12px; margin-inline: auto; max-width: 760px; z-index: 850; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 9px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg); background-image: linear-gradient(var(--surface), var(--surface)); color: var(--text); font-size: 13px; box-shadow: 0 16px 40px -20px color-mix(in srgb, var(--text) 45%, transparent); } .ih-banner b { font-weight: 700; } .ih-bt { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; } .ih-banner em { font-style: normal; font-size: 11.5px; color: var(--text-muted); } .ih-led { display: inline-block; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); text-decoration: none; } .lv-info .ih-led { background: var(--info, var(--accent)); } .lv-warn .ih-led { background: var(--warning); } .lv-down .ih-led { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent); } .lv-ok .ih-led { background: var(--success, var(--accent)); } .ih-banner.lv-down { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); } .ih-cur { display: flex; align-items: center; gap: 8px; padding: 9px 12px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 12px; font-size: 12.5px; color: var(--text); } .ih-lv { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .ih-lvb, .ih-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: transform .12s ease; } .ih-lvb.on, .ih-chip.on { color: var(--text); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .ih-lvb:active, .ih-chip:active { transform: scale(.965); } .ih-dur { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; font-size: 12.5px; color: var(--text-muted); } @media (max-width: 480px) { .ih-banner { top: calc(var(--topbar-h, 56px) + 4px); inset-inline: 8px; } } /* ═══ v642 — الدخول الموحّد · سجلّ التدقيق · الاستخدام · تصدير البيانات (TakeFlow Tv - تصميم وتطوير محمد قندقلي) ═══ */ .ln-sso-wrap[hidden] { display: none; } .ln-sso-btn { display: flex; justify-content: center; min-height: 44px; } .ln-sso-hint { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--text-muted); } .sso-chk { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 10px; font-size: 13px; color: var(--text); cursor: pointer; } .sso-chk input { margin-top: 3px; } .sso-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-bottom: 8px; } .sso-f { display: flex; flex-direction: column; gap: 4px; } .sso-f > span { font-size: 12px; font-weight: 600; color: var(--text-muted); } .sso-st { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface2, var(--surface)); font-size: 12.5px; } .sso-n { display: flex; align-items: baseline; gap: 8px; color: var(--text-muted); } .sso-n b { font-size: 18px; color: var(--text); } .sso-w { color: var(--text-muted); overflow-wrap: anywhere; } .sso-w b { color: var(--text); font-weight: 600; } .sso-w.bad b { color: var(--danger); } .sso-foot, .adt-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .adt-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .adt-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 99px; padding: 2px; gap: 2px; } .adt-seg button { padding: 5px 11px; border: 0; border-radius: 99px; background: transparent; color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .adt-seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 18%, transparent); } .adt-seg button[disabled] { opacity: .45; cursor: default; } .adt-pick { width: auto; min-width: 140px; max-width: 220px; } .adt-q { flex: 1 1 180px; min-width: 0; } .adt-n { font-size: 11.5px; color: var(--text-muted); margin-bottom: 4px; } .adt-list { display: flex; flex-direction: column; max-height: 56vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); } .adt-r { display: grid; grid-template-columns: 10px 112px minmax(80px, 150px) minmax(0, 1fr); align-items: baseline; gap: 4px 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 12.5px; } .adt-r:last-child { border-bottom: 0; } .adt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); text-decoration: none; align-self: center; } .adt-r.k-set .adt-dot { background: var(--accent); } .adt-at { color: var(--text-muted); font-size: 11.5px; } .adt-who { font-weight: 600; color: var(--text); overflow-wrap: anywhere; } .adt-what { color: var(--text); overflow-wrap: anywhere; } .adt-via { grid-column: 4; font-style: normal; font-size: 11.5px; color: var(--text-muted); overflow-wrap: anywhere; } .adt-empty { padding: 12px; text-align: center; font-size: 12.5px; color: var(--text-muted); } .adt-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 12px; } .adt-t { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); } .adt-t b { font-size: 22px; font-weight: 600; color: var(--text); line-height: 1.1; } .adt-t span { font-size: 12px; color: var(--text-muted); } .adt-ch { margin-bottom: 12px; } .adt-ch-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); } .adt-ch-h b { color: var(--text); } .adt-bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); align-items: end; gap: 4px; height: 64px; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } .adt-b { display: flex; align-items: flex-end; height: 100%; } .adt-b i { display: block; width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--accent) 70%, var(--surface)); } .adt-ai { margin-bottom: 8px; } .adt-ai-r { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--text-muted); } .adt-ai-r b { color: var(--text); } .adt-top { margin-top: 6px; font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; } .adt-xs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .adt-x { padding: 7px 13px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: transform .12s ease; } .adt-x.on { color: var(--text); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .adt-x:active { transform: scale(.965); } @media (max-width: 480px) { .adt-r { grid-template-columns: 10px minmax(0, 1fr); } .adt-r .adt-at, .adt-r .adt-who, .adt-r .adt-what, .adt-r .adt-via { grid-column: 2; } } /* ═══ v643 — الترخيص · المقرّ · النطاق (TakeFlow Tv - تصميم وتطوير محمد قندقلي) ═══ */ .lic-st { display: flex; align-items: center; gap: 9px; padding: 10px 12px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface2, var(--surface)); font-size: 13px; color: var(--text); } .lic-led, .hq-led { display: inline-block; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); text-decoration: none; } .lic-st.ok .lic-led, .hq-led.ok { background: var(--success, var(--accent)); } .lic-st.warn .lic-led, .hq-led.warn { background: var(--warning); } .lic-st.bad .lic-led, .hq-led.bad { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent); } .lic-st.bad { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); } .lic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; } .lic-f { display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); } .lic-f span { font-size: 11.5px; color: var(--text-muted); } .lic-f b { font-size: 14px; font-weight: 700; color: var(--text); } .lic-bar { display: block; height: 5px; margin-top: 4px; border-radius: 99px; background: var(--border); } .lic-bar i { display: block; height: 100%; border-radius: inherit; background: var(--success, var(--accent)); } .lic-bar.full i { background: var(--danger); } .lic-in { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); } .lic-in textarea { resize: vertical; min-height: 60px; font-size: 12px; } .lic-foot, .hq-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .tf-nostation { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; background: var(--bg); color: var(--text); font-family: var(--tf-disp); } .tf-nostation b { font-size: 18px; font-weight: 700; } .tf-nostation span { font-size: 13px; color: var(--text-muted); } .hq-page { background: var(--bg); color: var(--text); min-height: 100vh; } .hq-wrap { max-width: 980px; margin: 0 auto; padding: 24px 16px 40px; display: flex; flex-direction: column; gap: 18px; } .hq-top h1 { margin: 0 0 6px; font-size: 22px; font-weight: 700; } .hq-top p, .hq-note { margin: 0; font-size: 13px; line-height: 1.8; color: var(--text-muted); } .hq-sec { padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); } .hq-sec h2 { margin: 0 0 12px; font-size: 15px; font-weight: 700; } .hq-list { display: flex; flex-direction: column; gap: 10px; } .hq-st { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface2, var(--surface)); } .hq-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; } .hq-h b { font-weight: 700; } .hq-h .mono { font-size: 12px; color: var(--text-muted); } .hq-tag { padding: 1px 8px; border-radius: 99px; border: 1px solid var(--border); font-size: 11px; color: var(--text-muted); } .hq-hosts { font-size: 11.5px; color: var(--text-muted); overflow-wrap: anywhere; } .hq-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; } .hq-kv div { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } .hq-kv span { font-size: 11px; color: var(--text-muted); } .hq-kv b { font-size: 13px; font-weight: 700; } .hq-err { font-size: 12.5px; color: var(--danger); } .hq-tokrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .hq-tokrow .ms-input { flex: 1 1 220px; min-width: 0; } .hq-keep { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); } .hq-keyrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 10px 0; } .hq-file { cursor: pointer; } .hq-keyst { font-size: 12px; color: var(--text-muted); } .hq-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 10px; } .hq-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-muted); } .hq-msg { margin-bottom: 8px; font-size: 12.5px; color: var(--text); } .hq-msg[hidden] { display: none; } .hq-out { width: 100%; box-sizing: border-box; font-size: 12px; margin-bottom: 10px; resize: vertical; } .hq-credit { text-align: center; font-size: 11.5px; color: var(--text-muted); } /* ═══ v644 — محطّة العرض: الدخول بدورٍ بضغطة (TakeFlow Tv - تصميم وتطوير محمد قندقلي) ═══ */ .ln-demo[hidden] { display: none; } .ln-demo-roles { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .ln-demo-roles .tfb { flex: 1 1 128px; min-height: 40px; justify-content: center; } /* معالج التهيئة بتسع خطوات: النافذة لا تتجاوز الشاشة — القائمة وحدها تُمرَّر (الهاتف: كان رأسها فوق الحافّة) */ .tw-win { max-height: calc(100dvh - 40px); box-sizing: border-box; } .tw-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } /* ═══ v645 — الترخيص بحاله · الرصد الخادميّ · قائمة الكبسة اليمين · القوالب (TakeFlow Tv - تصميم وتطوير محمد قندقلي) ═══ */ /* المقاعد قرب الامتلاء (٩٠٪) — تنبيهٌ قبل الإقفال */ .lic-bar.near i { background: var(--accent); } /* الأدمن يرى أنّ الرصد الخادميّ متوقّف — اللون للمعنى: خطر */ .nw-srv-down { color: var(--danger); font-weight: 600; cursor: help; } /* قائمة الكبسة اليمين الواحدة — طبقة تحكّمٍ فوق الصفحة بسطحٍ صلب */ .tf-ctx { position: fixed; z-index: 10050; min-width: 196px; max-width: min(320px, calc(100vw - 16px)); padding: 6px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .45), inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent); display: flex; flex-direction: column; gap: 2px; } .tf-ctx-i { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; text-align: start; cursor: pointer; } .tf-ctx-i:hover, .tf-ctx-i:focus-visible { background: var(--surface2); outline: none; } .tf-ctx-i:active { transform: scale(.965); } .tf-ctx-i[disabled] { opacity: .45; cursor: default; } .tf-ctx-i.danger { color: var(--danger); } .tf-ctx-ic { width: 15px; flex: none; } .tf-ctx-sep { height: 1px; margin: 4px 6px; background: var(--border); } @media (pointer: coarse) { .tf-ctx-i { min-height: 44px; } } /* القوالب: الحذف في صفّ القالب نفسه — أيقونةٌ محايدة تصير بلون الخطر عند المرور */ .stx-lrow { display: flex; align-items: stretch; gap: 4px; } .stx-lrow .stx-li { flex: 1 1 auto; min-width: 0; } .stx-lx { flex: none; width: 34px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .stx-lx:hover, .stx-lx:focus-visible { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); } .stx-lx:active { transform: scale(.965); } @media (pointer: coarse) { .stx-lx { width: 44px; } } /* ═══ v646 — عنوان البرنامج · دخول الدعم (TakeFlow Tv - تصميم وتطوير محمد قندقلي) ═══ */ .dm-now { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; font-size: 12px; color: var(--text-muted); } .dm-now b { color: var(--text); font-size: 13px; } .dm-row { display: flex; gap: 6px; align-items: stretch; } .dm-row .ms-input { flex: 1 1 auto; min-width: 0; } .dm-list { margin: 4px 0 12px; padding-inline-start: 18px; font-size: 12.5px; line-height: 1.75; color: var(--text-muted); } /* شريط «انتقل الآن» — طبقة تحكّمٍ ثابتة أسفل الشاشة بسطحٍ صلب، تتّسع للهاتف */ .tf-dm-bar { position: fixed; z-index: 9990; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: 640px; margin-inline: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .45); font-size: 13px; color: var(--text); } .tf-dm-bar > span { flex: 1 1 220px; min-width: 0; } .tf-dm-bar .tfb { min-height: 36px; } @media (pointer: coarse) { .tf-dm-bar .tfb { min-height: 44px; } } @media (max-width: 768px) { .tf-dm-bar { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); } } /* فوق شريط التنقّل السفليّ */ .va-cred { display: grid; gap: 8px; padding: 12px; margin: 8px 0 12px; border-radius: 12px; border: 1px dashed var(--border); background: var(--surface2, var(--surface)); } .va-hrs { margin-bottom: 10px; } /* المقرّ: «بلا حدّ للمقاعد» خانةٌ في سطر الحقول · المفتاح العامّ سطرٌ واحد يُنسخ */ .hq-f.hq-chk { flex-direction: row; align-items: center; gap: 8px; align-self: end; min-height: 40px; } .hq-pub { flex: 1 1 320px; min-width: 0; font-size: 11.5px; } /* ═══ v647 — واجهاتٌ اختياريّة: الطلب السريع المطوَّر · المطبخ المدمج · التفضيلات (TakeFlow Tv - تصميم وتطوير محمد قندقلي) ═══ */ /* معاينة الواجهة: مخطّطٌ بالكتل بألوان الهويّة — لا صورة */ .tfu-prev-sch { display: flex; align-items: stretch; justify-content: stretch; padding: 10px; background: var(--surface2, var(--surface)); cursor: default; } .tfu-sch { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .tfu-sb { display: flex; gap: 5px; min-width: 0; border-radius: 6px; font-style: normal; } .tfu-sch .hd { height: 26px; padding: 4px; background: var(--surface); border: 1px solid var(--border); } .tfu-sch .hd .fd, .tfu-sch .hd .sl { flex: 1 1 0; background: color-mix(in srgb, var(--text) 9%, transparent); } .tfu-sch.fl .hd .sl { background: transparent; border-inline-start: 1px solid var(--border); border-radius: 0; } .tfu-sch.fl .hd .sl:first-child { border-inline-start: 0; } .tfu-sch .bd { flex: 1 1 auto; gap: 6px; } .tfu-sch .rl { width: 18%; flex-direction: column; padding: 5px; background: var(--surface); border: 1px solid var(--border); } .tfu-sch .ln { height: 9px; background: color-mix(in srgb, var(--text) 12%, transparent); } .tfu-sch .ln.a { background: color-mix(in srgb, var(--accent) 55%, transparent); } .tfu-sch .ln.b { background: color-mix(in srgb, var(--success, var(--accent)) 50%, transparent); } .tfu-sch .ln.c { background: color-mix(in srgb, var(--warning) 55%, transparent); } .tfu-sch .ln.d { background: color-mix(in srgb, var(--text) 30%, transparent); } .tfu-sch .tx { flex: 1 1 auto; flex-direction: column; padding: 6px; background: var(--surface); border: 1px solid var(--border); } .tfu-sch .p { height: 8px; background: color-mix(in srgb, var(--text) 14%, transparent); } .tfu-sch .p.s { width: 60%; } .tfu-sch .sd { width: 26%; flex-direction: column; padding: 5px; background: var(--surface); border: 1px solid var(--border); } .tfu-sch .nt { height: 16px; background: color-mix(in srgb, var(--text) 8%, transparent); } .tfu-sch .ck { height: 9px; background: color-mix(in srgb, var(--success, var(--accent)) 40%, transparent); } .tfu-sch .ck.o { background: transparent; border: 1px solid var(--warning); } .tfu-sch .to { height: 18px; margin-top: auto; background: color-mix(in srgb, var(--text) 10%, transparent); } .tfu-sch .ft { height: 20px; justify-content: flex-end; } .tfu-sch .go { width: 30%; background: var(--accent); } .tfu-sch .tl { height: 26px; align-items: center; justify-content: space-between; padding: 0 12px; background: var(--surface); border: 1px solid var(--border); } .tfu-sch .dot { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--text) 25%, transparent); } .tfu-sch .dot.on { background: var(--accent); } .tfu-sch .dr { height: 34px; gap: 6px; } .tfu-sch .door { flex: 1 1 0; background: var(--surface); border: 1px solid var(--border); } .tfu-sch .door.a { border-color: var(--accent); } .tfu-sch .cols { flex: 1 1 auto; gap: 6px; } .tfu-sch .col { flex: 1 1 0; flex-direction: column; gap: 5px; padding: 6px; background: var(--surface); border: 1px solid var(--border); } .tfu-sch .row { height: 14px; background: color-mix(in srgb, var(--text) 9%, transparent); } .tfu-sch .hero { flex: 1 1 auto; background: var(--surface); border: 1.5px solid var(--accent); } /* ── الطلب السريع المطوَّر: الترويسة لوحة قياس — خاناتٌ بفواصل وقيمٌ بارزة ── */ .fr-root.fr-skin-flow .fr-head { gap: 0; padding: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 60%, transparent); } .fr-root.fr-skin-flow .fr-head > .fr-f { padding: 9px 12px; border-inline-start: 1px solid var(--border); min-width: 0; } .fr-root.fr-skin-flow .fr-head > .fr-f:first-child { border-inline-start: 0; } .fr-root.fr-skin-flow .fr-head .fr-f input, .fr-root.fr-skin-flow .fr-head .fr-f select { border-color: transparent; background: transparent; box-shadow: none; padding-inline: 0; font-size: 14.5px; font-weight: 700; color: var(--text); } .fr-root.fr-skin-flow .fr-head .fr-f input:focus, .fr-root.fr-skin-flow .fr-head .fr-f select:focus { border-color: var(--accent); background: var(--surface2, var(--surface)); padding-inline: 6px; } @media (max-width: 760px) { .fr-root.fr-skin-flow .fr-head > .fr-f { border-inline-start: 0; border-top: 1px solid var(--border); } .fr-root.fr-skin-flow .fr-head > .fr-f:first-child { border-top: 0; } } /* الوسوم بأقسامها: نقطةٌ بلون النوع قبل كلّ وسم — اللون للمعنى */ .fr-root.fr-skin-flow .fr-tp::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--tc, var(--accent)); } .fr-root.fr-skin-flow .fr-rail-lb { color: var(--text); font-weight: 700; letter-spacing: 0; text-transform: none; } /* «قبل الإرسال» — قائمةٌ تُشطب، كلّ سطرٍ يأخذ إلى حقله */ .fr-flow { display: flex; flex-direction: column; gap: 8px; } .frf-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; } .frf-n { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); } .frf-n.ok { color: var(--success, var(--accent)); border-color: color-mix(in srgb, var(--success, var(--accent)) 50%, var(--border)); } .frf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .frf-i { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 32px; padding: 4px 6px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; text-align: start; cursor: pointer; } .frf-i:hover, .frf-i:focus-visible { background: var(--surface2, var(--surface)); outline: none; } .frf-i:active { transform: scale(.965); } .frf-i.ok { color: var(--text-muted); } .frf-i em { margin-inline-start: auto; font-style: normal; font-size: 11px; font-weight: 600; color: var(--warning); } /* «ينقص قبل الإرسال» القديم يقوله «قبل الإرسال» نفسه في هذه الواجهة — مصدرٌ واحد على الشاشة */ .fr-root.fr-skin-flow .fr-need { display: none; } .frf-led { width: 9px; height: 9px; border-radius: 50%; flex: none; border: 1.5px solid var(--warning); } .frf-i.ok .frf-led { border-color: var(--success, var(--accent)); background: var(--success, var(--accent)); } @media (pointer: coarse) { .frf-i { min-height: 44px; } } /* ── المطبخ المدمج ── */ .lbb { display: flex; flex-direction: column; gap: 14px; } .lbb-day { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); } .lbb-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .lbb-top > div:first-child { display: flex; flex-direction: column; gap: 2px; } .lbb-top > div:first-child b { font-size: 16px; font-weight: 700; } .lbb-top > div:first-child span { font-size: 12.5px; color: var(--text-muted); } .lbb-next { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .lbb-next > span:first-child { font-size: 12px; color: var(--text-muted); } .lbb-next b { font-size: 14px; } .lbb-cd { font-size: 22px; font-weight: 600; letter-spacing: .5px; color: var(--text); } .lbb-shows { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .lbb-sh { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 4px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2, var(--surface)); font-size: 12.5px; } .lbb-sh b { font-weight: 600; } .lbb-sh em { font-style: normal; color: var(--text-muted); font-size: 11.5px; } .lbb-sh.aired { opacity: .62; } .lbb-sh.next { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); } .lbb-led { width: 8px; height: 8px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--text) 28%, transparent); } .lbb-sh.aired .lbb-led { background: var(--success, var(--accent)); } .lbb-sh.next .lbb-led { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } .lbb-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 10px; } .lbb-door { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: center; min-height: 64px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; text-align: start; cursor: pointer; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 60%, transparent); } .lbb-door > svg { grid-row: 1 / span 2; color: var(--text-muted); } .lbb-door b { font-size: 14.5px; font-weight: 700; } .lbb-door span { font-size: 12px; color: var(--text-muted); } .lbb-door kbd { position: absolute; inset-inline-end: 10px; top: 10px; unicode-bidi: isolate; font-size: 10.5px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--border); color: var(--text-muted); background: var(--surface2, var(--surface)); } .lbb-door:hover, .lbb-door:focus-visible { border-color: var(--accent); outline: none; } .lbb-door:active { transform: scale(.965); } .lbb-door.lbb-fast > svg { color: var(--accent-fg); } .lbb-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: start; } @media (max-width: 900px) { .lbb-cols { grid-template-columns: 1fr; } } .lbb-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .lbb-sec { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); } .lbb-sh-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; } .lbb-sh-h .mono { font-size: 12px; color: var(--text-muted); } .lbb-list { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .lbb-req, .lbb-dr { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2, var(--surface)); color: var(--text); font: inherit; text-align: start; cursor: pointer; } .lbb-req:hover, .lbb-dr:hover, .lbb-req:focus-visible, .lbb-dr:focus-visible { border-color: var(--accent); outline: none; } .lbb-req:active, .lbb-dr:active { transform: scale(.965); } .lbb-rq-h { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .lbb-rq-h b { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; } .lbb-rq-h .mono { font-size: 11.5px; color: var(--text-muted); flex: none; } .lbb-mat.miss { color: var(--warning); } .lbb-dr { flex-direction: row; align-items: center; } .lbb-dr b { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; } .lbb-dr span { font-size: 11.5px; color: var(--text-muted); flex: none; } .lbb-nw { display: flex; flex-direction: column; gap: 4px; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2, var(--surface)); } .lbb-nw b { font-size: 13px; font-weight: 600; } .lbb-nw span { font-size: 11.5px; color: var(--text-muted); } .lbb-nw .tfb { align-self: flex-start; } .lbb-empty { margin: 0; font-size: 12.5px; color: var(--text-muted); } @media (pointer: coarse) { .lbb-sh { min-height: 40px; } .lbb-req, .lbb-dr { min-height: 48px; } .lbb-nw .tfb { min-height: 44px; } } /* ── التفضيلات: أقسامٌ بفهرسها ومعاينةٌ حيّة بجانبها ── */ .upf-card .card-title { flex-wrap: wrap; } .upf-sync { margin-inline-start: auto; font-size: 11.5px; font-weight: 500; color: var(--text-muted); } .upf-idx { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; } .upf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 16px; align-items: start; } @media (max-width: 1100px) { .upf-grid { grid-template-columns: 1fr; } .upf-prev { order: -1; } } .upf-h { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 2px; font-size: 13.5px; font-weight: 700; scroll-margin-top: 80px; } .upf-h:first-child { margin-top: 0; } .upf-h span { font-size: 11.5px; font-weight: 500; color: var(--text-muted); } .upf-inl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .upf-prev { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .upf-prev-l { font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .upf-frame { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg, var(--surface2)); } .upf-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-size: 12px; } .upf-bar span { color: var(--text-muted); } .upf-nx { display: flex; align-items: baseline; gap: 6px; padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-size: 12px; } .upf-nx > span:first-child { color: var(--text-muted); } .upf-nx .mono { margin-inline-start: auto; font-size: 13px; } .upf-door { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); font-size: 12.5px; } .upf-door > svg { grid-row: 1 / span 2; color: var(--accent-fg); } .upf-door span { color: var(--text-muted); font-size: 11.5px; } .upf-row { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-size: 12px; } .upf-row .mono { color: var(--text-muted); font-size: 11px; } .upf-acts { display: flex; justify-content: flex-end; gap: 6px; } .upf-saved { font-size: 11.5px; color: var(--text-muted); } /* ═══ v648 — مسارات العمل · المهمّة بإثباتٍ واعتماد · المونتاج ثمّ الجرافيك (TakeFlow Tv - تصميم وتطوير محمد قندقلي) ═══ */ /* السمة hidden تُخفي دائماً — قاعدةٌ واحدة بدل قاعدةٍ لكلّ صنف: أيّ «display» على صنفٍ كان يغلبها فيظهر المخفيّ (نافذة الإثبات أظهرت حقولها الأربعة معاً · وقبلها ٢٠ قاعدة «‎[hidden]» متفرّقة لنفس العلّة) */ [hidden]:not([hidden="until-found"]) { display: none !important; } .wf-card .card-title { flex-wrap: wrap; } .wf-sub { margin-inline-start: auto; font-size: 11.5px; font-weight: 500; color: var(--text-muted); } .wf-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 6px; margin-bottom: 12px; } .wf-tab { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; min-height: 52px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; text-align: start; cursor: pointer; } .wf-tab > svg { grid-row: 1 / span 2; color: var(--text-muted); } .wf-tab b { font-size: 13px; } .wf-tab span { font-size: 11px; color: var(--text-muted); } .wf-tab.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); } .wf-tab:active { transform: scale(.965); } .wf-map { padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface2, var(--surface)); margin-bottom: 12px; } .wf-map-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; } .wf-map-h span { font-size: 11.5px; color: var(--text-muted); } .wf-nodes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; } .wf-node { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font-size: 12px; } .wf-node b { font-size: 13px; } .wf-node > span { color: var(--text-muted); line-height: 1.6; } .wf-i { font-size: 11px; color: var(--text-muted); } .wf-arr { align-self: center; color: var(--text-muted); font-size: 14px; } .wf-to { display: flex; align-items: center; gap: 6px; margin-top: auto; font-size: 11.5px; color: var(--text-muted); } .wf-to b { font-size: 14px; color: var(--text); min-width: 22px; text-align: center; } .wf-st { min-width: 28px; min-height: 28px; padding: 0; } @media (pointer: coarse) { .wf-st { min-width: 40px; min-height: 40px; } .wf-tab { min-height: 56px; } } .wf-fb { font-style: normal; font-size: 11px; color: var(--warning); } .wf-rules { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; } .wf-rule { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 2px; border-top: 1px solid var(--border); } .wf-rule > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; } .wf-rule > div:first-child b { font-size: 13px; } .wf-rule > div:first-child span { font-size: 11.5px; color: var(--text-muted); } .wf-plain { padding: 12px; border-radius: 12px; border: 1px dashed var(--border); margin-bottom: 4px; font-size: 12px; } .wf-plain span { color: var(--text-muted); } .wf-plain p { margin: 6px 0 0; font-size: 13px; line-height: 1.8; color: var(--text); } .wf-note { font-size: 11.5px; color: var(--text-muted); } /* المهمّة: بانتظار الاعتماد · الإثبات · الإعادة */ .st-review .tk-led { background: var(--warning); } .tk-card.st-review { border-color: color-mix(in srgb, var(--warning) 50%, var(--border)); } .wf-proof { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .wf-proof span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .wf-ret { color: var(--warning); } .wfp-card { width: min(520px, 94vw); } .wfp-body { padding: 14px 18px 8px; display: flex; flex-direction: column; gap: 10px; } .wfp-t { margin: 0; font-weight: 700; font-size: 14px; } .wfp-hint { margin: 0; font-size: 12px; color: var(--text-muted); } .wfp-f { display: flex; flex-direction: column; gap: 4px; } .wfp-f textarea { min-height: 84px; max-height: 30vh; resize: vertical; } .wfp-card { display: flex; flex-direction: column; max-height: min(92dvh, 720px); } .wfp-body { overflow-y: auto; min-height: 0; } .wfp-err { min-height: 16px; font-size: 12px; color: var(--danger); } .wfp-foot { padding: 10px 18px 14px; } /* الطلب السريع: ترتيب القسمين */ .fr-ord { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .fr-ord-seg { flex-wrap: wrap; } .fr-ord-n { font-size: 11.5px; color: var(--text-muted); line-height: 1.6; } .fr-ord-l { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); } /* ═══ v649 — مكتب التكليف: التصوير والمقابلة والاتصال (TakeFlow Tv - تصميم وتطوير محمد قندقلي) ═══ */ .cr-root { display: flex; flex-direction: column; gap: 12px; } .cr-empty { display: flex; flex-direction: column; gap: 4px; padding: 22px; border: 1px dashed var(--border); border-radius: 14px; color: var(--text-muted); text-align: center; } .cr-empty b { color: var(--text); font-size: 14px; } .cr-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cr-tabs .tfs-seg-b { display: inline-flex; align-items: center; gap: 6px; } .cr-sp { flex: 1 1 auto; } .cr-new { display: inline-flex; align-items: center; gap: 6px; } .cr-n { min-width: 18px; padding: 0 5px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--danger) 60%, transparent); background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); font-size: 11px; font-weight: 700; text-decoration: none; text-align: center; } .cr-board-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cr-days, .wfp-seg { flex-wrap: wrap; } .dm-stop { white-space: nowrap; } /* v646 — كان صنفاً بلا قاعدة (لقطه فحص v649: كلّ صنفٍ في الماركب له CSS) */ .cr-hint { font-size: 11.5px; color: var(--text-muted); line-height: 1.7; } .cr-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 10px; align-items: start; } .cr-col { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface2, var(--surface)); min-width: 0; } .cr-col > header { display: flex; align-items: center; gap: 7px; font-size: 12.5px; } .cr-col > header span { margin-inline-start: auto; color: var(--text-muted); font-size: 12px; } .cr-led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--text) 30%, transparent); flex: 0 0 auto; text-decoration: none; } .cr-col-appr .cr-led, .cr-col-assigned .cr-led { background: var(--warning); } .cr-col-open .cr-led { background: var(--accent); } .cr-col-go .cr-led { background: var(--success); } .cr-none { margin: 4px 0; font-size: 12px; color: var(--text-muted); } .cr-card, .cr-job { display: flex; flex-direction: column; gap: 6px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font-size: 12.5px; min-width: 0; } .cr-card.urg, .cr-job.urg { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); } .cr-card.cr-focus, .cr-job.cr-focus { outline: 2px solid var(--accent); outline-offset: 2px; } .cr-top, .cr-job-t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cr-kind { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 12px; color: var(--text-muted); } .cr-urg { padding: 1px 7px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--danger) 60%, transparent); background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); font-size: 11px; font-weight: 700; } .cr-pre { padding: 1px 7px; border-radius: 6px; border: 1px dashed var(--border); font-size: 11px; color: var(--text-muted); } .cr-ser { margin-inline-start: auto; font-size: 10.5px; letter-spacing: .04em; color: var(--text-muted); } .cr-t { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; } .cr-meta, .cr-who { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--text-muted); font-size: 12px; } .cr-meta > *, .cr-guest > * { display: inline-flex; align-items: center; gap: 4px; } .cr-when { color: var(--text); font-weight: 600; } .cr-place { color: inherit; text-decoration: none; min-width: 0; overflow-wrap: anywhere; } .cr-place:hover { text-decoration: underline; } .cr-guest { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; } .cr-guest span { color: var(--text-muted); } .cr-guest a { color: inherit; } .cr-guest em { font-style: normal; font-size: 11px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--border); } .cr-needs { margin-inline-start: auto; } .cr-named, .cr-note, .cr-mat { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 12px; padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--text) 5%, transparent); overflow-wrap: anywhere; } .cr-note { color: var(--warning); } .cr-mat em { font-style: normal; color: var(--text-muted); } .cr-chips { display: flex; flex-wrap: wrap; gap: 5px; } .cr-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); font-size: 11.5px; } .cr-chip em { font-style: normal; color: var(--text-muted); font-size: 10.5px; } .cr-chip.ack .cr-led { background: var(--success); } .cr-chip.out .cr-led { background: var(--success); box-shadow: 0 0 6px color-mix(in srgb, var(--success) 70%, transparent); } .cr-st { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); } .cr-card.st-appr .cr-st .cr-led, .cr-card.st-assigned .cr-st .cr-led, .cr-card.st-returned .cr-st .cr-led { background: var(--warning); } .cr-card.st-acked .cr-st .cr-led, .cr-card.st-out .cr-st .cr-led, .cr-card.st-done .cr-st .cr-led { background: var(--success); } .cr-acts { flex-wrap: wrap; align-items: center; } .cr-q { display: inline-flex; gap: 4px; margin-inline-start: auto; } .cr-dlg-f .g-btn, .wfp-foot .g-btn { flex: 0 0 auto; min-width: 84px; justify-content: center; } /* تكليفاتي — الهاتف أوّلاً */ .cr-claim { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border)); } .cr-claim > header { display: flex; align-items: center; gap: 6px; font-size: 13px; } .cr-mine { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 10px; } .cr-job { gap: 8px; padding: 14px; } .cr-job-t b { font-size: 22px; font-weight: 700; } .cr-job-t span { color: var(--text-muted); } .cr-place.big { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); font-size: 13.5px; color: var(--text); } .cr-big { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; font-size: 15px; } .cr-big:active { transform: scale(.965); } .cr-big-done { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 12px; color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 45%, var(--border)); } .cr-decl { align-self: center; } /* الطاقم */ .cr-roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 10px; } .cr-rs { padding: 10px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); } .cr-rs > header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .cr-rs > header span { margin-inline-start: auto; color: var(--text-muted); } .cr-rs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .cr-r { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 8px; padding: 6px 4px; border-top: 1px solid var(--border); font-size: 12.5px; } .cr-r span { color: var(--text-muted); min-width: 0; overflow-wrap: anywhere; } .cr-r em { font-style: normal; font-size: 11.5px; } .cr-r.on .cr-led { background: var(--success); } .cr-r.job .cr-led { background: var(--warning); } .cr-r.away { opacity: .7; } /* الإعداد */ .cr-desk .cr-hint { margin: 0 0 10px; } .cr-dk-row { display: grid; grid-template-columns: minmax(80px, 120px) 1fr 1fr; gap: 10px; align-items: end; padding: 8px 0; border-top: 1px solid var(--border); } .cr-dk-row label, .cr-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; min-width: 0; } .cr-dk-row label > span, .cr-f > span { color: var(--text-muted); font-size: 11.5px; } .cr-dk-desk { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--border); } .cr-dk-ms { display: flex; flex-wrap: wrap; gap: 6px; } .cr-dk-m { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border); font-size: 12px; cursor: pointer; } @media (max-width: 640px) { .cr-dk-row { grid-template-columns: 1fr; } } /* النوافذ */ .cr-dlg { width: min(600px, 94vw); display: flex; flex-direction: column; max-height: min(92dvh, 860px); } .cr-dlg-b { padding: 14px 18px 8px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; } .cr-dlg-f { padding: 10px 18px 14px; } .cr-f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 560px) { .cr-f2 { grid-template-columns: 1fr; } } .cr-kinds .tfs-seg-b, .cr-venue .tfs-seg-b, .cr-mode .tfs-seg-b { display: inline-flex; align-items: center; gap: 6px; } .cr-venue, .cr-mode { flex-wrap: wrap; } .cr-checks { display: flex; flex-direction: column; gap: 6px; } .cr-route { margin: 0; padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--border); font-size: 12px; line-height: 1.7; color: var(--text-muted); } .cr-as { display: flex; flex-direction: column; gap: 6px; } .cr-as > header { display: flex; align-items: center; gap: 8px; font-size: 13px; } .cr-as > header span { margin-inline-start: auto; color: var(--text-muted); font-size: 12px; } .cr-as ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .cr-as-m { display: grid; grid-template-columns: auto auto auto 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); cursor: pointer; font-size: 12.5px; } .cr-as-m span { color: var(--text-muted); min-width: 0; overflow-wrap: anywhere; } .cr-as-m em { font-style: normal; font-size: 11px; color: var(--warning); } .cr-as-m.on .cr-led { background: var(--success); } .cr-as-m.job .cr-led { background: var(--warning); } .cr-as-m.away { opacity: .75; } @media (pointer: coarse) { .cr-as-m { min-height: 48px; } .cr-dk-m { min-height: 40px; } } /* الطلب السريع: التغطية الميدانيّة */ .fr-cj { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .cr-fr-l { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); } .cr-fr-chips { display: flex; flex-wrap: wrap; gap: 6px; } .cr-fr-add { display: inline-flex; align-items: center; gap: 5px; } .cr-fr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .cr-fr-i { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--border); min-width: 0; } .cr-fr-i b { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .cr-fr-i span { color: var(--text-muted); } /* ═══ v650 — TakeFlow Studio: واجهة «المنصّة» · مكتبة القوالب بخانات الوكيل · القائمة اليمنى في البرنامج (TakeFlow Tv - تصميم وتطوير محمد قندقلي) ═══ */ /* المنصّة: اللوحة بعرض الشاشة والخصائص صفٌّ من المجموعات تحتها — على الشاشات العريضة وحدها (الخصائص مخفيّة تحت ١١٠٠ أصلاً) */ @media (min-width: 1101px) { #page-imgtool .tfs-wrap.tfs-skin-deck .tfs-workarea { grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(190px, 34%); } #page-imgtool .tfs-wrap.tfs-skin-deck .tfs-irail { grid-row: 1 / span 2; } #page-imgtool .tfs-wrap.tfs-skin-deck .tfs-main { grid-column: 2; grid-row: 1; } #page-imgtool .tfs-wrap.tfs-skin-deck .tfs-props { grid-column: 2; grid-row: 2; flex-direction: row; align-items: stretch; gap: 0; padding: 0; min-height: 0; overflow-x: auto; overflow-y: auto; overscroll-behavior: contain; border-inline-start: 0; border-top: 1px solid var(--tfs-line, var(--border)); background: color-mix(in srgb, var(--tfs-bg, var(--surface)) 88%, var(--tfs-ink, var(--text)) 4%); } #page-imgtool .tfs-wrap.tfs-skin-deck .tfs-props > .tfs-pgrp { flex: 0 0 auto; width: min(340px, 34vw); min-height: 0; max-height: 100%; overflow-y: auto; padding: 12px 14px 18px; border-inline-end: 1px solid var(--tfs-line, var(--border)); } #page-imgtool .tfs-wrap.tfs-skin-deck .tfs-props > .tfs-pgrp:first-child { width: min(300px, 30vw); } #page-imgtool .tfs-wrap.tfs-skin-deck .tfs-props > .tfs-pnl-tools { display: none; } } /* مكتبة القوالب: التصفية بخانة الوكيل · شارة الخانة في القائمة · قالب المحطّة في قرار وكيل الريل */ .stx-slots { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; } .stx-slot { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font: inherit; font-size: 11.5px; cursor: pointer; } .stx-slot s { text-decoration: none; font-size: 10.5px; } .stx-slot.on { color: var(--text); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .stx-slot:active { transform: scale(.965); } .stx-slotb { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 10.5px; color: var(--text-muted); } #page-imgtool .tfs-rw-dir em.tfs-rw-stpl { color: var(--tfs-brass, var(--warning)); } :root { --tf-css-ver: "v651"; }