/* ========================================================= site.css (UNIFIED) - يجمع theme.css + rwd-tables.css + تحسينات عامة - لون الهوية: #087241 ========================================================= */ /* ---------- 1) Variables & Bootstrap bridge ---------- */ :root { /* Layout */ --sidebar-width: 280px; --header-height: 70px; --transition-speed: .3s; /* Brand */ --brand-hero: #087241; /* اللون الأساسي الموحد */ --brand-hero-rgb: 8,114,65; /* RGB للظلال */ /* Surfaces */ --app-bg: #f6f8fb; --app-surface: #ffffff; --app-text: #1f2937; --app-muted: #64748b; --app-border: #e5e7eb; --app-shadow: 0 2px 10px rgba(16,24,40,.06); /* Bootstrap bridge */ --bs-body-bg: var(--app-bg); --bs-body-color: var(--app-text); --bs-border-color: var(--app-border); --bs-card-bg: var(--app-surface); --bs-card-border-color: var(--app-border); --bs-primary: var(--brand-hero); --bs-primary-rgb: var(--brand-hero-rgb); --bs-link-color: var(--brand-hero); --bs-link-hover-color: color-mix(in srgb, var(--brand-hero) 85%, #000); /* Footer height */ --footer-height: 56px; } /* Dark mode (عند استخدام data-theme="dark" على ) */ [data-theme="dark"] { --app-bg: #0b1220; --app-surface: #0f172a; --app-text: #e5e7eb; --app-muted: #94a3b8; --app-border: rgba(255,255,255,.12); --app-shadow: 0 2px 12px rgba(0,0,0,.4); --bs-body-bg: var(--app-bg); --bs-body-color: var(--app-text); --bs-border-color: var(--app-border); --bs-card-bg: var(--app-surface); --bs-card-border-color: var(--app-border); } /* ---------- 2) Global layout ---------- */ body { direction: rtl; background: var(--app-bg); color: var(--app-text); min-height: 100vh; display: flex; flex-direction: column; } header { position: fixed; top: 0; right: 0; left: 0; height: var(--header-height); background: var(--app-surface) !important; border-bottom: 1px solid var(--app-border); z-index: 1040; } header nav { height: 100%; padding: .25rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .sidebar { position: fixed; top: var(--header-height); right: 0; bottom: 0; width: var(--sidebar-width); min-width: var(--sidebar-width); background: var(--app-surface) !important; border-inline-start: 1px solid var(--app-border); overflow-y: auto; padding: 1rem; z-index: 1030; } .main-content { margin-right: var(--sidebar-width); margin-top: var(--header-height); padding: 1.5rem; background: var(--app-bg); min-height: calc(100vh - var(--header-height)); padding-bottom: calc(var(--footer-height) + 16px); } .footer { margin-right: var(--sidebar-width); background: var(--app-surface); border-top: 1px solid var(--app-border); padding: .75rem 1rem; } /* ---------- 3) Cards ---------- */ .card { background: var(--bs-card-bg); border: 1px solid var(--bs-card-border-color); box-shadow: var(--app-shadow); border-radius: 12px; overflow: hidden; } .card-header { background: var(--brand-hero) !important; color: #fff !important; border: 0; padding: 1rem 1.25rem; } /* ---------- 4) Buttons (موحّدة على #087241 وأغمق عند التحويم) ---------- */ .btn-success, .btn-success { --bs-btn-bg: var(--brand-hero); --bs-btn-border-color: var(--brand-hero); --bs-btn-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--brand-hero) 88%, #000); --bs-btn-hover-border-color: var(--bs-btn-hover-bg); --bs-btn-active-bg: color-mix(in srgb, var(--brand-hero) 80%, #000); --bs-btn-active-border-color: var(--bs-btn-active-bg); } .btn-outline-primary, .btn-outline-success { --bs-btn-color: var(--brand-hero); --bs-btn-border-color: var(--brand-hero); --bs-btn-hover-bg: var(--brand-hero); --bs-btn-hover-border-color: var(--brand-hero); --bs-btn-hover-color: #fff; } .btn:focus, .btn:focus-visible { box-shadow: 0 0 0 .25rem rgba(var(--brand-hero-rgb), .25) !important; } /* ---------- 5) Tables (Responsive + unified) ---------- */ .table { margin-bottom: 0; color: var(--app-text); border-collapse: separate; border-spacing: 0; } .table thead, .table thead tr, .table thead th, .table thead td { background: var(--brand-hero) !important; color: #fff !important; border-color: rgba(255,255,255,.18) !important; background-image: none !important; } .table > :not(caption) > * > * { background: var(--bs-card-bg) !important; color: var(--app-text) !important; border-color: var(--app-border) !important; padding: .875rem 1rem; vertical-align: middle; } /* حدود واضحة */ .table-bordered, .table-bordered > :not(caption) > * { border-color: var(--app-border) !important; } /* تحويم لطيف على الصف */ .table.table-hover > tbody > tr:hover { background: color-mix(in srgb, var(--bs-card-bg) 92%, var(--app-text) 8%) !important; } @supports not (color-mix: in srgb, white 50%, black 50%) { .table.table-hover > tbody > tr:hover { background: rgba(0,0,0,.03) !important; } } /* إلغاء أي فئات داكنة أو table-light قديمة */ .table-light, .table.table-dark, .table thead.bg-dark, .table thead.table-dark { background: var(--brand-hero) !important; color: #fff !important; background-image: none !important; } /* مغلّف الاستجابة */ .table-responsive { border: 1px solid var(--app-border); border-radius: 10px; overflow: auto; box-shadow: var(--app-shadow); } /* نمط بديل: تحويل الجدول إلى بطاقات على الشاشات الصغيرة (table--stack) */ @media (max-width: 576px) { .table.table--stack thead { display: none; } .table.table--stack tbody, .table.table--stack tr, .table.table--stack td { display: block; width: 100%; } .table.table--stack tr { border: 1px solid var(--app-border); border-radius: 10px; margin-bottom: .75rem; box-shadow: var(--app-shadow); overflow: hidden; } .table.table--stack td { display: grid; grid-template-columns: 40% 1fr; gap: .5rem; border-bottom: 1px solid var(--app-border); padding: .75rem .875rem; } .table.table--stack td:last-child { border-bottom: 0; } .table.table--stack td::before { content: attr(data-label); color: var(--app-muted); font-weight: 600; } } /* ---------- 6) Forms & Utilities ---------- */ .form-control, .form-select { border-radius: 8px; padding: .75rem 1rem; background: var(--app-surface); color: var(--app-text); border: 1px solid var(--app-border); } .form-control:focus, .form-select:focus { border-color: var(--brand-hero); box-shadow: 0 0 0 .25rem rgba(var(--brand-hero-rgb), .25); } .text-muted { color: var(--app-muted) !important; } .border { border-color: var(--app-border) !important; } /* ---------- 7) Plugins minor tuning ---------- */ /* SweetAlert2 */ .swal2-popup { background: var(--app-surface) !important; color: var(--app-text) !important; } .swal2-title { color: var(--app-text) !important; } .swal2-html-container { color: var(--app-muted) !important; } .swal2-styled.swal2-confirm { background-color: var(--brand-hero) !important; border-color: var(--brand-hero) !important; } .swal2-styled.swal2-cancel { background-color: var(--app-border) !important; color: var(--app-text) !important; } /* Select2 */ .select2-container--default .select2-selection--single { background: var(--app-surface); color: var(--app-text); border-color: var(--app-border); } .select2-dropdown { background: var(--app-surface); color: var(--app-text); border-color: var(--app-border); } /* DataTables inputs/pagination */ .dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input { background: var(--app-surface); color: var(--app-text); border: 1px solid var(--app-border); border-radius: 8px; padding: .5rem .75rem; } .dataTables_wrapper .dataTables_paginate .pagination .page-link { color: var(--brand-hero); border-color: var(--app-border); } .dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link { background: var(--brand-hero); border-color: var(--brand-hero); color: #fff; } .thead-match-card, .thead-match-card tr, .thead-match-card th { background-color: var(--bs-card-bg) !important; color: var(--app-text) !important; border-color: var(--app-border) !important; } /* ✅ طباعة نظيفة بدون تغيير الـ DOM */ @media print { body * { visibility: hidden !important; } .print-area, .print-area * { visibility: visible !important; } .print-area { position: absolute; inset: 0; } .d-print-none { display: none !important; } } /* ---------- 8) Masonry & gallery helpers ---------- */ .masonry { column-count: 1; column-gap: 1rem; } @media (min-width: 576px) { .masonry { column-count: 2; } } @media (min-width: 992px) { .masonry { column-count: 3; } } @media (min-width: 1400px) { .masonry { column-count: 4; } } .masonry-item { break-inside: avoid; display: block; margin-bottom: 1rem; text-decoration: none; } .img-wrap { position: relative; border-radius: 1rem; overflow: hidden; background: #f8f9fa; aspect-ratio: 4 / 3; } .img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; } .img-wrap:hover img { transform: scale(1.03); } .overlay { position: absolute; inset: 0; background: rgba(0,0,0,.15); opacity: 0; transition: opacity .2s ease; display: flex; align-items: center; justify-content: center; } .img-wrap:hover .overlay { opacity: 1; } .zoom { color: #fff; background: rgba(0,0,0,.5); padding: .25rem .5rem; border-radius: .5rem; font-size: .9rem; } @media (max-width: 575.98px) { .img-wrap { aspect-ratio: 1 / 1; } } #lightboxImg { max-height: 85vh; object-fit: contain; background: #000; } .fab-back { position: fixed; right: 1rem; bottom: 1rem; z-index: 1080; width: 48px; height: 48px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: #0d6efd; color: #fff; text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: transform .15s ease; } .fab-back:hover { transform: translateY(-2px); } /* ---------- 9) Footer & nav colors ---------- */ footer { background-color: #2c5530; color: white; text-align: center; padding: 1.5rem; margin-top: 3rem; } .nav .nav-link { color: #2c5530; } .nav .nav-link:hover { text-decoration: underline; } .nav .nav-link.active { border-bottom: 2px solid #2c5530; }