/* FERP UI Theme + Dropdown هدف النسخة: قراءة أوضح + Navbar أبيض + حل مشكلة قصّ القوائم. Version: 20260111_ui2 */ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap'); :root{ --ferp-bg: #0b1320; --ferp-surface: #ffffff; --ferp-surface-2: #f8fafc; --ferp-text: #111827; --ferp-muted: #4b5563; --ferp-muted-2: #374151; --ferp-success: #16a34a; --ferp-warning: #d97706; --ferp-danger: #dc2626; --ferp-info: #0284c7; --ferp-focus: rgba(37,99,235,.18); --ferp-font: "Tajawal", "Cairo", "Segoe UI", Tahoma, Arial, sans-serif; --ferp-font-size: 16px; --ferp-line: 1.6; --ferp-border: rgba(15, 23, 42, 0.12); --ferp-primary: #2563eb; } /* ===== Typography ===== */ html{ font-size: var(--ferp-font-size); } body{ font-family: var(--ferp-font); line-height: var(--ferp-line); color: var(--ferp-text); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .small, small{ font-size: .875rem; } h1,h2,h3,h4,h5,h6{ font-weight: 700; letter-spacing: 0; } .fw-semibold{ font-weight: 600 !important; } .tabular-nums{ font-variant-numeric: tabular-nums; } /* Forms: clearer borders + focus */ .form-control, .form-select, .input-group-text{ font-family: var(--ferp-font); border-color: rgba(15, 23, 42, 0.18); } .form-control::placeholder{ color: rgba(55, 65, 81, 0.70); } .form-control:focus, .form-select:focus{ border-color: var(--ferp-primary); box-shadow: 0 0 0 .2rem var(--ferp-focus); } .btn{ font-weight: 600; } .btn:focus{ box-shadow: 0 0 0 .2rem var(--ferp-focus); } /* Muted text: keep readable (scoped) */ .card .text-muted, .table .text-muted, body.bg-light .text-muted{ color: var(--ferp-muted) !important; } /* ===== Shell ===== */ body.ferp-app{ background: var(--ferp-bg); color: #e5e7eb; } /* Content surfaces should be readable even if body is dark */ body.ferp-app .card, body.ferp-app .table, body.ferp-app .table * { color: var(--ferp-text); } body.ferp-app .card{ border-radius: 18px; border: 1px solid var(--ferp-border); background: var(--ferp-surface); } /* Alerts (readable) */ .alert-danger{ border-color: rgba(220, 38, 38, 0.25); background: rgba(220, 38, 38, 0.08); color: #7f1d1d; } .alert-warning{ border-color: rgba(217, 119, 6, 0.25); background: rgba(217, 119, 6, 0.08); color: #7c2d12; } /* Fix common low-contrast cases */ body.ferp-app .card .text-muted, body.ferp-app .card .small.text-muted{ color: var(--ferp-muted) !important; } /* ===== Navbar (Light) ===== */ .ferp-navbar{ background: #fff !important; border-bottom: 1px solid var(--ferp-border); } .ferp-navbar .navbar-brand, .ferp-navbar .nav-link, .ferp-navbar .navbar-text{ color: var(--ferp-text) !important; } .ferp-navbar .nav-link:hover{ color: var(--ferp-primary) !important; } .ferp-navbar .nav-link.active{ color: var(--ferp-primary) !important; font-weight: 700; } /* Toggler icon for light navbar */ .ferp-navbar .navbar-toggler{ border-color: rgba(15,23,42,.18); } /* ===== Dropdown (Light + readable) ===== */ .ferp-dropdown{ min-width: 260px; /* حتى لو لم يعمل portal JS: اجعل القائمة قابلة للتمرير داخل الشاشة */ max-height: calc(100vh - 84px); overflow-y: auto; overflow-x: hidden; background: #fff; border-radius: 12px; padding: 8px; border: 1px solid var(--ferp-border); box-shadow: 0 12px 28px rgba(0,0,0,.18); } /* When portal moves the menu to */ .ferp-portal-menu{ scrollbar-width: thin; } .ferp-portal-menu::-webkit-scrollbar{ width: 10px; } .ferp-portal-menu::-webkit-scrollbar-thumb{ background: rgba(17,24,39,0.28); border-radius: 999px; } .ferp-portal-menu::-webkit-scrollbar-track{ background: rgba(17,24,39,0.08); } .ferp-dropdown .dropdown-header{ color: var(--ferp-muted); font-size: 12px; margin: 6px 10px; } .ferp-dropdown .dropdown-item{ color: var(--ferp-text); border-radius: 8px; padding: 8px 12px; } .ferp-dropdown .dropdown-item:hover{ background: rgba(37,99,235,0.10); color: var(--ferp-primary); } /* Sections divider */ .ferp-dropdown .dropdown-divider{ opacity: .35; } /* Brand logo in navbar */ .ferp-org-logo{ width: 28px; height: 28px; object-fit: contain; border-radius: 8px; border: 1px solid rgba(15,23,42,.10); background: #fff; } /* Ensure dropdowns are not clipped by navbar containers */ .navbar, .navbar .container, .navbar .navbar-collapse{ overflow: visible !important; }