:root { --bg: #f2f3ee; --panel-bg: #ffffff; --header-bg: #0c5435; --header-text: #f6f8f4; --tab-bg: #e6e9e1; --tab-active-bg: #e2a020; --border: #c9d0c2; --border-dark: #8b968c; --accent: #0c5435; --accent-hover: #147245; --gold: #e2a020; --gold-hover: #c68a12; --text: #232823; --muted: #5c655d; --danger: #8a3b3b; --danger-hover: #a34747; --input-bg: #ffffff; --table-bg: #ffffff; --table-row-alt: #f6f7f5; --table-row-hover: #eaf0ec; --box-bg: #f4f5f3; --highlight-bg: #f1ede1; --success-bg: #e5efe6; --success-border: #7fa588; --danger-bg: #f5e8e8; --danger-border: #b98787; --warning: #a15c00; --warning-hover: #b96c00; --warning-bg: #fbeed9; --warning-border: #d3a24f; } /* الوضع الليلي: بيتفعّل بضبط data-theme="dark" على (يدوياً من الزرار فى القائمة الجانبية، أو تلقائياً حسب إعداد نظام التشغيل أول زيارة - راجع السكريبت فى base.html). كل الألوان معرّفة كمتغيرات فى :root، فأي عنصر بيستخدم var(--...) بيتلوّن صح تلقائياً من غير ما يحتاج قاعدة CSS إضافية. */ html[data-theme="dark"] { --bg: #1a1f1a; --panel-bg: #232823; --header-bg: #0a2e1d; --header-text: #e8ece6; --tab-bg: #2b312a; --tab-active-bg: #c98a1d; --border: #3a4136; --border-dark: #4d564a; --accent: #4caf7d; --accent-hover: #6ac295; --gold: #e2a020; --gold-hover: #f0b13a; --text: #e6eae4; --muted: #9aa398; --danger: #e08a8a; --danger-hover: #e9a3a3; --input-bg: #2b312a; --table-bg: #232823; --table-row-alt: #262b25; --table-row-hover: #2e352c; --box-bg: #2b312a; --highlight-bg: #33301f; --success-bg: #223528; --success-border: #4d7a5c; --danger-bg: #3a2626; --danger-border: #7a4a4a; --warning: #e0a94f; --warning-hover: #ecb968; --warning-bg: #3a2f1a; --warning-border: #7a5c2c; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: "Readex Pro", "Tahoma", "Segoe UI", Arial, sans-serif; font-size: 14px; direction: rtl; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .app-shell { display: flex; min-height: 100vh; align-items: stretch; } .sidebar { width: 210px; flex-shrink: 0; background: var(--header-bg); color: var(--header-text); display: flex; flex-direction: column; border-left: 2px solid var(--gold); } .top-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: var(--header-bg); color: var(--header-text); padding: 10px 20px; border-bottom: 2px solid var(--gold); } .top-header-church { font-size: 12px; opacity: 0.85; justify-self: start; display: inline-flex; align-items: center; gap: 6px; } .top-header-logo { height: 22px; width: auto; border-radius: 3px; } .top-header-group { font-size: 16px; font-weight: bold; justify-self: center; } @media (max-width: 480px) { .top-header { grid-template-columns: 1fr; row-gap: 2px; text-align: center; } .top-header-church, .top-header-group { justify-self: center; } } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; padding: 10px 0; } .sidebar-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: var(--header-text); font-size: 13px; } .sidebar-nav a svg { flex-shrink: 0; opacity: 0.9; } .sidebar-nav a:hover { background: rgba(255,255,255,0.08); text-decoration: none; } .sidebar-nav a.active { background: var(--gold); color: var(--accent); font-weight: bold; } .sidebar-nav a.active svg { opacity: 1; } .sidebar-badge { margin-inline-start: auto; background: var(--danger); color: #fff; font-size: 10px; font-weight: bold; min-width: 18px; height: 18px; line-height: 18px; border-radius: 9px; text-align: center; padding: 0 5px; } .sidebar-nav a.active .sidebar-badge { background: var(--accent); } .sidebar-user { padding: 12px 16px 16px; border-top: 1px solid rgba(255,255,255,0.15); font-size: 12px; } .sidebar-user-name { margin-bottom: 8px; opacity: 0.9; } .sidebar-user a { display: inline-flex; align-items: center; gap: 6px; color: var(--header-text); border: 1px solid rgba(255,255,255,0.4); padding: 4px 10px; border-radius: 6px; } .sidebar-user a:hover { background: rgba(255,255,255,0.1); text-decoration: none; } .main-area { flex: 1; min-width: 0; } /* الهيدر الأخضر والقائمة الجانبية الخضراء ثابتين، والصفحة نفسها (main-area) هى اللى تعمل scroll */ body.app-body { height: 100vh; overflow: hidden; display: flex; flex-direction: column; } body.app-body .top-header { flex-shrink: 0; } body.app-body .app-shell { flex: 1; min-height: 0; overflow: hidden; } body.app-body .sidebar { flex-shrink: 0; overflow-y: auto; } body.app-body .main-area { overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; display: flex; flex-direction: column; } body.app-body .page { flex: 1; min-height: 0; display: flex; flex-direction: column; } /* صفحة الجدول ياخد كامل المساحة المتاحة (تحت الهيدر والقائمة الجانبية فقط): العناصر التانية (فلاتر/بحث/إحصائيات) تفضل ثابتة فوق، وجدول البيانات هو اللى ياخد باقي المساحة ويعمل scroll داخلي هو بس */ .panel-fill { flex: 1; min-height: 0; display: flex; flex-direction: column; } .panel-fill > *:not(.table-scroll) { flex-shrink: 0; } .panel-fill .table-scroll { flex: 1; min-height: 0; max-height: none; } @media (max-width: 800px) { .app-shell { flex-direction: column; } .sidebar { width: 100%; border-left: none; border-bottom: 2px solid var(--gold); } .sidebar-nav { flex-direction: row; flex-wrap: wrap; } .sidebar-nav a span { display: none; } } .tabs { display: flex; gap: 2px; background: var(--tab-bg); padding: 6px 12px 0 12px; border-bottom: 1px solid var(--border-dark); overflow-x: auto; -webkit-overflow-scrolling: touch; } .tabs a { flex-shrink: 0; } .tabs a { display: inline-block; padding: 8px 18px; background: var(--tab-bg); border: 1px solid var(--border-dark); border-bottom: none; border-radius: 4px 4px 0 0; color: var(--text); font-size: 13px; position: relative; top: 1px; } .tabs a.active { background: var(--tab-active-bg); border-bottom: 1px solid var(--tab-active-bg); font-weight: bold; color: #ffffff; } .tabs a:hover { text-decoration: none; background: #eef1ee; } .page { padding: 16px; max-width: 100%; } .panel { background: var(--panel-bg); border: 1px solid var(--border-dark); border-radius: 4px; padding: 14px; } .panel-title { font-weight: bold; color: var(--accent); border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 10px; font-size: 14px; } .field-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .field-row label { width: 130px; flex-shrink: 0; font-size: 13px; color: var(--muted); text-align: right; } @media (max-width: 600px) { .field-row { flex-direction: column; align-items: stretch; gap: 4px; } .field-row label { width: auto; text-align: right; } } .field-row input[type=text], .field-row input[type=date], .field-row input[type=email], .field-row input[type=tel], .field-row input[type=password], .field-row input[type=number], .field-row select, .field-row textarea { flex: 1; padding: 6px 8px; border: 1px solid var(--border-dark); border-radius: 3px; background: var(--input-bg); font-family: inherit; font-size: 13px; color: var(--text); } .field-row textarea { resize: vertical; min-height: 50px; } .form-grid { display: grid; grid-template-columns: 1.3fr 1fr 0.8fr; gap: 14px; align-items: start; } @media screen and (max-width: 900px) { /* screen فقط (مش print) لأن نفس الـ .form-grid مستخدم فى صفحة تقرير الفرد وتحتاج تفضل 3 أعمدة (بيانات يمين ووسط + صورة وQR شمال) عند الطباعة. !important لأن بعض الصفحات (الإعدادات، بريد المستخدمين، تقرير الفرد) تحدد عدد أعمدة مختلف بـ style مباشر على العنصر، ولازم يتكسر لعمود واحد على الموبايل بغض النظر عن ذلك */ .form-grid { grid-template-columns: 1fr !important; } } .photo-box, .qr-box { border: 1px solid var(--border-dark); background: var(--box-bg); border-radius: 4px; padding: 10px; text-align: center; margin-bottom: 10px; } .photo-box img, .qr-box img { max-width: 100%; max-height: 160px; display: block; margin: 0 auto 8px auto; border: 1px solid var(--border); background: #fff; } .photo-placeholder { width: 120px; height: 120px; margin: 0 auto 8px auto; background: var(--box-bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 34px; } .code-label { font-size: 12px; color: var(--muted); margin-top: 4px; } .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border: 1.5px solid var(--gold); border-radius: 8px; background: #ffffff; color: var(--accent); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; } .btn:hover { background: #fdf3e0; text-decoration: none; } .btn-primary { background: var(--gold); color: var(--accent); border-color: var(--gold); font-weight: 600; } .btn-primary:hover { background: var(--gold-hover); border-color: var(--gold-hover); } .btn-danger { background: #ffffff; color: var(--danger); border-color: var(--danger); } .btn-danger:hover { background: var(--danger); color: #fff; } .btn-sm { padding: 4px 12px; font-size: 12px; } .btn-row { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; border-top: 1px solid var(--border); padding-top: 12px; } table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--table-bg); } table.data-table th, table.data-table td { border: 1px solid var(--border-dark); padding: 6px 8px; text-align: right; } table.data-table th { background: var(--tab-bg); color: var(--text); font-weight: bold; } table.data-table tr:nth-child(even) { background: var(--table-row-alt); } table.data-table tr:hover { background: var(--table-row-hover); } @media (max-width: 700px) { table.data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* جدول بيانات الأفراد: يعمل scroll داخلي بدل ما الصفحة كلها تعمل scroll */ .table-scroll { max-height: 65vh; overflow-y: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border-dark); } .table-scroll table.data-table { margin: 0; } .table-scroll table.data-table th { position: sticky; top: 0; z-index: 1; } .toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; } .toolbar input[type=text], .toolbar select, .toolbar input[type=date] { padding: 6px 8px; border: 1px solid var(--border-dark); border-radius: 3px; font-size: 13px; font-family: inherit; } .badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; border: 1px solid var(--border-dark); } .badge-active { background: var(--success-bg); color: var(--accent); border-color: var(--success-border); } .badge-inactive { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); } .badge-warning { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); } .stat-cards { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .stat-card { background: #fff; border: 1px solid var(--border-dark); border-radius: 4px; padding: 10px 18px; min-width: 120px; text-align: center; } .stat-card .num { font-size: 22px; font-weight: bold; color: var(--accent); } .stat-card .lbl { font-size: 12px; color: var(--muted); margin-top: 2px; } /* نسخة من stat-cards بتتفرد فى صف واحد بس (بدل ما تلف على أكتر من صف) - كل كارت بياخد نصيب متساوي من العرض المتاح وبيصغر تلقائياً لو الأعداد كتير */ .stat-cards-row { display: grid; gap: 8px; flex-wrap: initial; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; } .stat-cards-row .stat-card { min-width: 0; padding: 8px 4px; } .stat-cards-row .stat-card .num { font-size: 17px; } .stat-cards-row .stat-card .lbl { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .trend-chart { display: flex; align-items: flex-end; gap: 10px; height: 170px; border-bottom: 1px solid var(--border-dark); padding: 10px 6px 0 6px; background: #fff; border: 1px solid var(--border-dark); border-radius: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .trend-bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; min-width: 34px; height: 100%; } .trend-bar-value { font-size: 11px; color: var(--muted); margin-bottom: 4px; } .trend-bar { width: 55%; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 2px; } .trend-bar-label { font-size: 10px; color: var(--muted); margin-top: 6px; white-space: nowrap; } .absentee-count { display: inline-block; min-width: 22px; text-align: center; padding: 1px 6px; border-radius: 10px; background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); font-size: 12px; } /* درجة تحذير أخف من الخطر - لغياب متكرر بس مش مفرط (نسبة أقل من النصف) */ .absentee-count-warning { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); } .landing { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: linear-gradient(180deg, var(--header-bg) 0%, #083723 100%); color: #fff; padding: 20px; } .landing h1 { font-size: 26px; margin-bottom: 6px; } .landing h2 { font-size: 16px; font-weight: normal; color: #d7ddd8; margin-top: 0; } .landing .btn-primary { margin-top: 22px; padding: 10px 30px; font-size: 15px; } .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 16px; } .login-box { background: var(--panel-bg); border: 1px solid var(--border-dark); border-radius: 6px; padding: 28px 30px; width: 100%; max-width: 320px; } .login-box h2 { text-align: center; color: var(--accent); margin-top: 0; } .login-box .field-row label { width: 90px; } .error-msg { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); padding: 6px 10px; border-radius: 3px; font-size: 12px; margin-bottom: 10px; } .scan-wrap { max-width: 620px; margin: 30px auto; text-align: center; } .scan-input { width: 100%; padding: 18px; font-size: 22px; text-align: center; border: 2px solid var(--border-dark); border-radius: 6px; letter-spacing: 2px; } .scan-hint { color: var(--muted); font-size: 12px; margin-top: 8px; } .confirm-box { margin-top: 20px; padding: 20px; border-radius: 6px; border: 2px solid var(--accent); background: var(--success-bg); display: none; } .confirm-box.show { display: block; } .confirm-box.error { border-color: var(--danger); background: var(--danger-bg); } .confirm-box img { width: 90px; height: 90px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); margin-bottom: 8px; } .confirm-box .name { font-size: 20px; font-weight: bold; } .confirm-box .sub { color: var(--muted); font-size: 13px; margin-top: 2px; } .confirm-box .time { font-size: 15px; margin-top: 8px; color: var(--accent); font-weight: bold; } .settings-section { margin-bottom: 26px; } .inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; } .checkbox-list { display: flex; flex-wrap: wrap; gap: 10px; } .checkbox-list label { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: normal; width: auto; } .bulk-bar { background: var(--highlight-bg); border: 1px solid var(--gold); border-radius: 8px; padding: 8px 10px; } .empty-state { padding: 34px 16px; text-align: center; color: var(--muted); } .empty-state .icon { font-size: 28px; margin-bottom: 6px; opacity: 0.6; } .empty-state .msg { font-size: 13px; } .recent-scans { margin-top: 18px; text-align: right; } .recent-scans-title { font-size: 12px; color: var(--muted); margin-bottom: 6px; } .recent-scan-item { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: 12px; } .recent-scan-item:last-child { border-bottom: none; } .recent-scan-item .rs-name { font-weight: bold; color: var(--text); } .recent-scan-item .rs-time { color: var(--muted); } .recent-scan-item.rs-error .rs-name { color: var(--danger); } /* نافذة تأكيد موحدة بديلة لـ confirm() الافتراضية فى المتصفح - راجع static/js/confirm-modal.js */ .church-confirm-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); align-items: center; justify-content: center; z-index: 1000; } .church-confirm-overlay.show { display: flex; } .church-confirm-box { background: var(--panel-bg); border: 1px solid var(--border-dark); border-radius: 8px; padding: 20px; width: 90%; max-width: 380px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); } .church-confirm-message { font-size: 14px; color: var(--text); margin-bottom: 16px; line-height: 1.6; } .church-confirm-actions { display: flex; gap: 8px; justify-content: flex-end; } /* قائمة إجراءات منسدلة (⋮) لصفوف الجداول - بديل لصف الأزرار الطويل */ .action-menu { position: relative; display: inline-block; } .action-menu-trigger { border: 1.5px solid var(--border-dark); background: var(--panel-bg); color: var(--text); border-radius: 6px; width: 30px; height: 28px; font-size: 16px; line-height: 1; cursor: pointer; } .action-menu-trigger:hover { background: var(--table-row-hover); } .action-menu-list { display: none; position: absolute; inset-inline-end: 0; top: 32px; background: var(--panel-bg); border: 1px solid var(--border-dark); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,0.18); min-width: 130px; z-index: 50; overflow: hidden; } .action-menu-list.open { display: block; } .action-menu-list a, .action-menu-list button { display: block; width: 100%; text-align: right; padding: 8px 12px; font-size: 12px; border: none; background: none; color: var(--text); cursor: pointer; font-family: inherit; } .action-menu-list a:hover, .action-menu-list button:hover { background: var(--table-row-hover); text-decoration: none; } .action-menu-list .action-menu-danger { color: var(--danger); } /* مربعات صغيرة (دونات) لعرض نسبة حضور كل فريق فى سطر واحد فى لوحة المعلومات */ .team-mosaic { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; } .team-mosaic-item { flex: 1 1 0; min-width: 62px; text-align: center; } .team-mosaic-name { font-size: 10px; color: var(--muted); margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .team-mosaic-ring { position: relative; width: 44px; height: 44px; margin: 0 auto; } .team-mosaic-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; } /* ترويسة موحدة للتقارير المطبوعة (شعار + اسم الكنيسة/المجموعة) */ .print-letterhead { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid #333; padding-bottom: 10px; margin-bottom: 14px; } .print-letterhead img { height: 44px; width: auto; } .print-letterhead-church { font-size: 16px; font-weight: bold; } .print-letterhead-group { font-size: 12px; color: #555; } .print-only { display: none; } @media print { .no-print { display: none !important; } .print-only { display: block; } body { background: #fff; } .page { padding: 0; max-width: 100%; } /* إلغاء تثبيت الهيدر/القائمة الجانبية والـ scroll الداخلي عند الطباعة حتى لا يتم قص محتوى الصفحة (overflow:hidden بيقطع المحتوى فى الطباعة) */ body.app-body, body.app-body .app-shell, body.app-body .sidebar, body.app-body .main-area { height: auto; max-height: none; overflow: visible; } }