/* ===================================================== ASHRAF EL SAKKA PLATFORM — Custom CSS (RTL) ===================================================== */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=Tajawal:wght@300;400;500;700;800&display=swap'); :root { --primary: #1a56db; --primary-dark: #1e429f; --primary-light: #ebf5ff; --accent: #f59e0b; --accent-dark: #d97706; --success: #10b981; --danger: #ef4444; --warning: #f59e0b; --dark-bg: #0f172a; --dark-card: #1e293b; --dark-border: #334155; --sidebar-width: 280px; --header-height: 70px; /* ── Semantic tokens (light mode defaults) ── */ --card-bg: #ffffff; --card-border: #e2e8f0; --input-bg: #f8fafc; --text-primary: #1e293b; --text-secondary: #64748b; --border-color: #e2e8f0; --page-bg: #f1f5f9; --hover-bg: #f8fafc; } /* ── Dark theme overrides (toggled via class on ) ── */ .dark-theme { --card-bg: #1e293b; --card-border: #334155; --input-bg: #0f172a; --text-primary: #f1f5f9; --text-secondary: #94a3b8; --border-color: #334155; --page-bg: #0f172a; --hover-bg: #0f172a; } /* ── Missing-students card dark/light compatibility ── */ .missing-student-card { background: var(--card-bg) !important; border-color: var(--border-color) !important; transition: box-shadow 0.2s, transform 0.15s; } .missing-student-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-1px); } /* Select in missing panel */ #hw-missing-list select { background: var(--input-bg) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } /* Missing panel box */ #hw-missing-panel { background: var(--card-bg); border-color: #fca5a5; } .dark-theme #hw-missing-panel { background: rgba(127, 29, 29, 0.15); border-color: #7f1d1d50; } /* ===================================================== GLOBAL IMAGE OPTIMIZATION — object-fit: contain Ensures ALL uploaded/content images are fully visible, never cropped, never stretched, aspect-ratio preserved. ===================================================== */ /* ── Base rule: all images in content areas use contain ── */ .card img, .card-dark img, .modal-box img, main img, section img, article img, [id$="-list"] img, [id$="-grid"] img, [id$="-preview"] img, #admin-books-list img, #admin-student-books-list img, #admin-videos-list img, #admin-exams-list img, #admin-hw-list img, #admin-courses-grid img, #student-books-list img, #homework-list img, #books-grid img, #models-grid img { object-fit: contain; width: 100%; height: 100%; } /* ── Exceptions: elements that intentionally need cover ── */ /* Gallery items: always fill the frame edge-to-edge */ .gallery-item img, /* Video thumbnails: should fill the 16:9 black frame */ .aspect-video img, [class*="aspect-video"] img, /* Hero background-style images */ .hero-gradient img, .animate-hero-img, /* Student dashboard course cover images on cards */ #admin-courses-grid img, /* Landing page hero / section covers */ .object-cover { object-fit: cover !important; } /* ── Ensure container integrity: images never overflow ── */ img { max-width: 100%; display: block; } /* ── Book covers: contain within their fixed-ratio boxes ── */ .aspect-\[3\/4\] img, [style*="aspect-ratio: 3/4"] img, [style*="aspect-ratio:3/4"] img { object-fit: contain; background: #f8fafc; /* neutral background shows behind letterboxed images */ } /* ── Admin book cover thumbnail (56×72px strip) ── */ #admin-books-list img { object-fit: contain; background: #eff6ff; } /* ── Dark mode: use dark neutral for letterbox background ── */ html.dark .aspect-\[3\/4\] img, html.dark #admin-books-list img { background: #1e293b; } html { direction: rtl; scroll-behavior: smooth; } body { font-family: 'Cairo', 'Tajawal', sans-serif; background: #f1f5f9; color: #1e293b; overflow-x: hidden; } /* ---- Scrollbar ---- */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary); } /* ---- Sidebar Layout ---- */ .sidebar { width: var(--sidebar-width); height: 100vh; height: 100dvh; padding-bottom: 80px; padding-top: 0; position: fixed; right: 0; top: 0; z-index: 40; background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%); border-left: 1px solid #334155; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; overflow-x: hidden; transform: translateX(100%); /* Start hidden on mobile */ } .sidebar.open { transform: translateX(0); } @media (min-width: 1025px) { .sidebar { transform: translateX(0); /* Always show on desktop */ padding-top: var(--header-height); /* Push nav below the fixed top-header */ } } .main-content { margin-right: 0; min-height: 100vh; transition: margin-right 0.3s ease; padding-top: var(--header-height); } @media (min-width: 1025px) { .main-content { margin-right: var(--sidebar-width); } } /* ---- Sidebar Nav Items ---- */ .nav-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; color: #94a3b8; border-radius: 12px; margin: 4px 12px; cursor: pointer; transition: all 0.2s ease; text-decoration: none; font-weight: 500; } .nav-item:hover, .nav-item.active { background: rgba(26, 86, 219, 0.15); color: #60a5fa; } .nav-item.active { background: rgba(26, 86, 219, 0.25); color: #93c5fd; border-right: 3px solid #3b82f6; } .nav-item svg, .nav-item .nav-icon { font-size: 20px; min-width: 24px; } /* ---- Cards ---- */ .card { background: #fff; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 20px rgba(0,0,0,.04); transition: box-shadow 0.2s ease, transform 0.2s ease; } .card:hover { box-shadow: 0 8px 30px rgba(0,0,0,.12); } .card-dark { background: var(--dark-card); border: 1px solid var(--dark-border); border-radius: 16px; } /* ---- Stat Cards ---- */ .stat-card { border-radius: 16px; padding: 24px; color: white; position: relative; overflow: hidden; } .stat-card::after { content: ''; position: absolute; top: -20px; left: -20px; width: 100px; height: 100px; border-radius: 50%; background: rgba(255,255,255,0.07); } /* ---- Buttons ---- */ .btn-primary { background: linear-gradient(135deg, #1a56db, #1e429f); color: white; border: none; padding: 12px 24px; border-radius: 12px; font-family: 'Cairo', sans-serif; font-weight: 600; font-size: 15px; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(26,86,219,0.35); } .btn-secondary { background: #f1f5f9; color: #1e293b; border: 1px solid #e2e8f0; padding: 10px 20px; border-radius: 10px; font-family: 'Cairo', sans-serif; font-weight: 600; cursor: pointer; transition: all 0.2s; } .btn-secondary:hover { background: #e2e8f0; } .btn-danger { background: #fef2f2; color: #ef4444; border: 1px solid #fecaca; padding: 8px 16px; border-radius: 8px; font-family: 'Cairo', sans-serif; font-weight: 600; cursor: pointer; transition: all 0.2s; } .btn-danger:hover { background: #ef4444; color: white; } .btn-success { background: linear-gradient(135deg, #10b981, #059669); color: white; border: none; padding: 10px 20px; border-radius: 10px; font-family: 'Cairo', sans-serif; font-weight: 600; cursor: pointer; transition: all 0.2s; } .btn-success:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(16,185,129,0.35); } /* ---- Form Inputs ---- */ .form-input { width: 100%; padding: 12px 16px; border: 2px solid #e2e8f0; border-radius: 12px; font-family: 'Cairo', sans-serif; font-size: 15px; color: #1e293b; background: #f8fafc; transition: border-color 0.2s, box-shadow 0.2s; direction: rtl; } .form-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.15); background: white; } .form-label { display: block; font-weight: 600; color: #374151; margin-bottom: 6px; font-size: 14px; } /* ---- Badge ---- */ .badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 50px; font-size: 12px; font-weight: 700; } .badge-blue { background: #eff6ff; color: #1d4ed8; } .badge-green { background: #f0fdf4; color: #16a34a; } .badge-red { background: #fef2f2; color: #dc2626; } .badge-yellow { background: #fefce8; color: #ca8a04; } .badge-gray { background: #f1f5f9; color: #475569; } /* ---- Modal ---- */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .modal-overlay.open { opacity: 1; pointer-events: all; } .modal-box { background: white; border-radius: 20px; width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; padding: 32px; transform: scale(0.95); transition: transform 0.2s; direction: rtl; } .modal-overlay.open .modal-box { transform: scale(1); } /* ---- Tables ---- */ .data-table { width: 100%; border-collapse: collapse; } .data-table th { background: #f8fafc; padding: 12px 16px; text-align: right; font-weight: 700; color: #475569; font-size: 13px; border-bottom: 2px solid #e2e8f0; } .data-table td { padding: 14px 16px; border-bottom: 1px solid #f1f5f9; font-size: 14px; color: #374151; } .data-table tr:hover td { background: #f8fafc; } /* ---- Toast Notifications ---- */ .toast-container { position: fixed; bottom: 24px; left: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 12px; } .toast { background: white; border-radius: 12px; padding: 16px 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 12px; min-width: 300px; animation: slideInLeft 0.3s ease; border-right: 5px solid; direction: rtl; color: #1e293b; font-weight: 600; } .toast.success { border-color: #10b981; background: #f0fdf4; color: #065f46; } .toast.error { border-color: #ef4444; background: #fef2f2; color: #991b1b; } .toast.info { border-color: #3b82f6; background: #eff6ff; color: #1e40af; } /* Dark Mode Toasts */ html.dark .toast { box-shadow: 0 10px 40px rgba(0,0,0,0.5); } html.dark .toast.success { background: #064e3b; color: #a7f3d0; border-color: #10b981; } html.dark .toast.error { background: #7f1d1d; color: #fecaca; border-color: #ef4444; } html.dark .toast.info { background: #1e3a8a; color: #bfdbfe; border-color: #3b82f6; } @keyframes slideInLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ---- Progress Bar ---- */ .progress-bar { height: 8px; background: #e2e8f0; border-radius: 50px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, #1a56db, #3b82f6); border-radius: 50px; transition: width 0.6s ease; } /* ---- Video Player ---- */ .video-container { position: relative; background: #000; border-radius: 16px; overflow: hidden; aspect-ratio: 16/9; } .video-container video { width: 100%; height: 100%; } /* Plyr YouTube embed — standard 16:9, click-proof */ .plyr__video-wrapper.plyr__video-embed { position: relative !important; aspect-ratio: 16 / 9 !important; } .plyr__video-wrapper.plyr__video-embed iframe { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; pointer-events: none !important; /* CRITICAL: Keeps YouTube UI unclickable */ } /* ---- Anti-Piracy Dynamic Watermark ---- */ .watermark-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; /* CRITICAL: never block player controls */ overflow: hidden; z-index: 20; } .dynamic-watermark { position: absolute; color: rgba(255, 255, 255, 0.4); font-size: 13px; font-weight: 700; font-family: 'Cairo', sans-serif; text-shadow: 0 1px 3px rgba(0,0,0,0.6); user-select: none; white-space: nowrap; letter-spacing: 0.5px; /* Use top/left transitions — these work with %-based positioning */ transition: top 4s linear, left 4s linear; top: 10%; left: 10%; } /* ---- Notification Bell ---- */ .notif-bell { position: relative; cursor: pointer; } .notif-badge { position: absolute; top: -6px; left: -6px; background: #ef4444; color: white; border-radius: 50%; width: 20px; height: 20px; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } /* ---- Leaderboard ---- */ .rank-gold { color: #f59e0b; } .rank-silver { color: #94a3b8; } .rank-bronze { color: #b45309; } .rank-1 { background: linear-gradient(135deg, #FFF9C4, #FFF176); border: 2px solid #f59e0b; } .rank-2 { background: linear-gradient(135deg, #F5F5F5, #E0E0E0); border: 2px solid #9e9e9e; } .rank-3 { background: linear-gradient(135deg, #FFE8D6, #FFCCBC); border: 2px solid #b45309; } /* ---- Section Animations ---- */ .section-panel { display: none; } .section-panel.active { display: block; animation: fadeInUp 0.3s ease; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ---- Landing Page Hero ---- */ .hero-gradient { background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #1e429f 100%); position: relative; overflow: hidden; } .hero-gradient::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='10'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* ---- Gallery Grid ---- */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; } .gallery-item { border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; cursor: pointer; transition: transform 0.3s ease; } .gallery-item:hover { transform: scale(1.03); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; } /* ---- File Upload ---- */ .file-drop { border: 2px dashed #cbd5e0; border-radius: 12px; padding: 32px; text-align: center; cursor: pointer; transition: all 0.2s; } .file-drop:hover, .file-drop.dragover { border-color: #3b82f6; background: #eff6ff; } /* ---- Quiz / Exam ---- */ .quiz-option { padding: 14px 20px; border: 2px solid #e2e8f0; border-radius: 12px; cursor: pointer; transition: all 0.2s; font-size: 15px; } .quiz-option:hover { border-color: #3b82f6; background: #eff6ff; } .quiz-option.selected { border-color: #3b82f6; background: #eff6ff; color: #1d4ed8; font-weight: 600; } .quiz-option.correct { border-color: #10b981; background: #f0fdf4; color: #065f46; } .quiz-option.wrong { border-color: #ef4444; background: #fef2f2; color: #991b1b; } /* ---- Loading Spinner ---- */ .spinner { width: 40px; height: 40px; border: 4px solid #e2e8f0; border-top-color: #3b82f6; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---- Empty State ---- */ .empty-state { text-align: center; padding: 64px 24px; color: #94a3b8; } .empty-state svg { margin: 0 auto 16px; opacity: 0.4; } /* ---- Header ---- */ .top-header { height: var(--header-height); background: white; border-bottom: 1px solid #e2e8f0; position: fixed; top: 0; left: 0; right: 0; z-index: 50; /* above sidebar z-40 so header always on top */ display: flex; align-items: center; padding: 0 24px; gap: 16px; } /* ---- Q&A Thread ---- */ .qa-thread { border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden; } .qa-question { padding: 20px; background: #f8fafc; } .qa-answer { padding: 20px; background: white; border-top: 1px solid #e2e8f0; } .qa-answer-badge { background: linear-gradient(135deg, #1a56db, #1e429f); color: white; padding: 2px 12px; border-radius: 50px; font-size: 12px; font-weight: 700; } /* ---- Responsive: Tablet ---- */ @media (max-width: 1024px) { .sidebar { transform: translateX(100%); } .sidebar.open { transform: translateX(0); } .main-content { margin-right: 0 !important; } .top-header { right: 0 !important; width: 100% !important; } } /* ---- Responsive: Mobile ---- */ @media (max-width: 768px) { :root { --header-height: 56px; } .main-content { padding: 12px; padding-top: calc(var(--header-height) + 12px); } .top-header { padding: 0 12px; height: var(--header-height); } .stat-card { padding: 14px; } .card { border-radius: 14px; } .modal-box { padding: 18px; margin: 10px; max-height: 90vh; width: calc(100% - 20px); } /* Course video modal: fix grid on mobile */ #add-course-video-modal .grid-cols-3, #add-course-video-modal .grid-cols-2 { grid-template-columns: 1fr !important; } #add-course-video-modal .col-span-2 { grid-column: span 1 !important; } /* Grid adjustments (Targeted) */ #admin-courses-grid, #landing-courses-grid, #books-grid, #features-grid { grid-template-columns: 1fr !important; } /* Table scroll */ .overflow-x-auto { -webkit-overflow-scrolling: touch; } .data-table { font-size: 13px; } .data-table th, .data-table td { padding: 8px 10px; white-space: nowrap; } /* Flex alignment issues fixed by removing global wrap */ .flex.items-start { gap: 8px; } /* Buttons */ .btn-primary, .btn-secondary, .btn-success, .btn-danger { padding: 8px 14px; font-size: 13px; } /* Typography */ h2 { font-size: 1.25rem !important; } h3 { font-size: 1rem !important; } /* Form inputs slightly bigger for touch */ .form-input { padding: 10px 14px; font-size: 15px; min-height: 44px; } select.form-input { min-height: 44px; } /* Gallery mobile grid */ .gallery-item { width: 100%; height: auto; aspect-ratio: 4/3; } /* Video player */ .aspect-video { aspect-ratio: 16/9; } /* Toast mobile */ .toast { max-width: calc(100vw - 24px); left: 12px; } } /* ---- Responsive: Small Phones ---- */ @media (max-width: 420px) { .main-content { padding: 8px; padding-top: calc(var(--header-height) + 8px); } .grid.grid-cols-2 { grid-template-columns: 1fr !important; } .stat-card { padding: 12px; } .card { padding: 12px; } .modal-box { padding: 14px; margin: 6px; } h2 { font-size: 1.1rem !important; } .btn-primary, .btn-secondary, .btn-success, .btn-danger { padding: 7px 12px; font-size: 12px; } .data-table th, .data-table td { padding: 6px 8px; font-size: 12px; } } /* Mobile sidebar toggle button */ .mobile-menu-btn { display: none; width: 40px; height: 40px; border-radius: 10px; background: white; border: 1px solid #e2e8f0; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } @media (max-width: 1024px) { .mobile-menu-btn { display: flex; } } /* ===================================================== PRINT STYLES ===================================================== */ @media print { body { background: white; } .no-print, .sidebar, .top-header { display: none !important; } .main-content { margin: 0 !important; padding: 0 !important; } } html.dark select option { background-color: #1e1e1e !important; color: #e5e7eb !important; } /* ===================================================== GLOBAL HIGH-END DARK MODE ===================================================== */ html.dark body, html.dark { background: #121212 !important; color: #e5e7eb !important; } html.dark .card, html.dark .modal-box, html.dark .section-panel, html.dark .form-input, html.dark .top-header, html.dark .bg-white { background-color: #1e1e1e !important; border-color: #333 !important; color: #e5e7eb !important; } html.dark .sidebar { background: linear-gradient(180deg, #121212 0%, #1a1a1a 100%) !important; border-left-color: #333 !important; } /* Typography Overrides */ html.dark .text-slate-800, html.dark .text-slate-700, html.dark .text-gray-800, html.dark .text-gray-700, html.dark .text-slate-900 { color: #f3f4f6 !important; } html.dark .text-slate-500, html.dark .text-slate-600, html.dark .text-gray-500, html.dark .text-gray-600, html.dark .text-slate-400 { color: #9ca3af !important; } /* Backgrounds & Borders */ html.dark .bg-slate-50, html.dark .bg-slate-100, html.dark .bg-gray-50, html.dark .bg-slate-200 { background-color: #262626 !important; border-color: #333 !important; } html.dark .border-slate-100, html.dark .border-slate-200, html.dark .border-gray-200, html.dark .border-b { border-color: #333 !important; } /* Tables & Lists */ html.dark .hover\:bg-slate-50:hover, html.dark .hover\:bg-slate-100:hover, html.dark .hover\:bg-blue-50:hover { background-color: #2a2a2a !important; } /* Gradients that break dark mode */ html.dark .bg-gradient-to-r.from-slate-50 { background-image: none !important; background-color: #1e1e1e !important; } /* Specialized Overrides */ html.dark .qa-thread { border-color: #333 !important; } html.dark .qa-question { background-color: #262626 !important; } html.dark .qa-answer { background-color: #1e1e1e !important; border-top-color: #333 !important; } html.dark .btn-secondary { background-color: #262626 !important; color: #e5e7eb !important; border-color: #444 !important; } html.dark .btn-secondary:hover { background-color: #333 !important; } /* Keep Primary colors intact, just update any local conflicting logic */ html.dark .nav-item:hover, html.dark .nav-item.active { background: rgba(26, 86, 219, 0.25) !important; } /* ===================================================== YOUTUBE PLYR PLAYER — Anti-Branding Masks ===================================================== */ .plyr__video-wrapper { position: relative !important; z-index: 1 !important; overflow: hidden !important; background: #000; } .plyr__video-wrapper iframe { z-index: 1 !important; pointer-events: none !important; /* Prevents clicks going into YouTube native UI */ } /* Top mask: hides YouTube title bar */ .plyr__video-wrapper::before { content: '' !important; display: block !important; position: absolute !important; top: -2% !important; left: -2% !important; /* overspill slightly */ width: 104% !important; height: 15% !important; min-height: 55px !important; max-height: 85px !important; background: #000000 !important; /* Solid black to completely cover */ z-index: 10 !important; pointer-events: none !important; } /* Bottom mask: hides YouTube logo/watermark */ .plyr__video-wrapper::after { content: '' !important; display: block !important; position: absolute !important; bottom: -2% !important; left: -2% !important; width: 104% !important; height: 12% !important; min-height: 45px !important; max-height: 70px !important; background: #000000 !important; /* Solid black to completely cover */ z-index: 10 !important; pointer-events: none !important; } /* Removed the fade out to keep branding permanently hidden! We also removed the fixed opacity transitions so it sticks properly. */ /* Controls above masks */ .plyr__controls { z-index: 200 !important; } /* Watermark above everything */ .watermark-wrapper { z-index: 999999 !important; } /* ===================================================== EXAM QUIZ OPTIONS (Instant Feedback) ===================================================== */ .quiz-option { padding: 16px; border: 1px solid #e2e8f0; border-radius: 12px; background: white; transition: all 0.2s; color: #1e293b; } .quiz-option.clickable:hover { background: #f8fafc; } .quiz-state-correct { border-color: #10b981 !important; background: #ecfdf5 !important; color: #047857 !important; } .quiz-state-wrong { border-color: #ef4444 !important; background: #fef2f2 !important; color: #b91c1c !important; } .quiz-state-disabled { opacity: 0.6; pointer-events: none; } /* Dark Mode Quiz Overrides */ html.dark .quiz-option { background: #262626; border-color: #444; color: #e5e7eb; } html.dark .quiz-option.clickable:hover { background: #333; } html.dark .quiz-state-correct { background: rgba(16, 185, 129, 0.15) !important; border-color: #10b981 !important; color: #34d399 !important; } html.dark .quiz-state-wrong { background: rgba(239, 68, 68, 0.15) !important; border-color: #ef4444 !important; color: #f87171 !important; } /* ===================================================== PREMIUM PLYR YOUTUBE PLAYER — Professional Redesign Inspired by TutorLMS / Modern E-learning Platforms ===================================================== */ /* ---- Poster image (thumbnail shown before play) ---- */ .plyr__poster { background-size: cover !important; background-position: center !important; } /* ---- THE OVERLAID PLAY BUTTON — Big, Solid, Stunning ---- */ .plyr__control--overlaid { background-color: #1a2744 !important; /* Deep dark navy — fully opaque 100% */ background: #1a2744 !important; /* Force override completely */ opacity: 1 !important; width: 90px !important; height: 90px !important; border-radius: 50% !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; cursor: pointer !important; /* Very subtle shadow, no transparency to background */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important; transition: transform 0.2s ease, background-color 0.2s ease !important; /* Force it dead center */ position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 100 !important; } .plyr__control--overlaid:hover { background-color: #1a56db !important; /* Brighter blue on hover */ background: #1a56db !important; transform: translate(-50%, -50%) scale(1.1) !important; } .plyr__control--overlaid:active { transform: translate(-50%, -50%) scale(0.95) !important; } .plyr__control--overlaid svg { width: 36px !important; height: 36px !important; fill: #ffffff !important; position: relative !important; left: 4px !important; /* Optical centering for play triangle */ } /* Hide the native YouTube play button by ensuring our poster and button are solid */ .plyr.plyr--youtube.plyr--paused .plyr__poster, .plyr.plyr--youtube.plyr--stopped .plyr__poster { opacity: 1 !important; z-index: 99 !important; background-color: #000 !important; } /* ---- Bottom Controls Bar — Sleek Gradient ---- */ .plyr__controls { background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%) !important; padding: 32px 16px 12px !important; border-radius: 0 0 12px 12px !important; z-index: 200 !important; } /* Control buttons hover state */ .plyr__controls .plyr__control { background: transparent !important; border-radius: 6px !important; transition: background 0.18s ease !important; } .plyr__controls .plyr__control:hover { background: rgba(255, 255, 255, 0.18) !important; } /* ---- Progress / Seek Bar ---- */ .plyr--full-ui input[type=range] { color: #3b82f6 !important; } .plyr__progress input[type=range]::-webkit-slider-thumb { width: 14px !important; height: 14px !important; } /* ---- Volume Control ---- */ .plyr__volume input[type=range] { color: #3b82f6 !important; } /* ---- Time display ---- */ .plyr__time { font-family: 'Cairo', monospace !important; font-size: 13px !important; color: rgba(255,255,255,0.9) !important; } /* ---- Full Player wrapper border ---- */ .plyr--video { border-radius: 12px !important; overflow: hidden !important; background: #000 !important; } /* ========================================================= HOMEWORK RESPONSIVE RULES ========================================================= */ /* Submissions table: horizontally scrollable on small screens */ .card.overflow-hidden { overflow-x: auto; } /* Mobile padding for section panels */ @media (max-width: 640px) { .section-panel { padding-left: 1rem !important; padding-right: 1rem !important; } /* Submissions header buttons stack on mobile */ #hw-submissions-view .flex.flex-wrap { gap: 0.5rem; } /* Admin homework card action row full-width on very small screens */ #admin-hw-list .flex.flex-wrap.gap-2.mt-3 button { flex: 1 1 calc(33% - 0.5rem); min-width: 0; } /* Student homework page title */ #section-homework h2 { font-size: 1.25rem; } } /* Ensure the hw submit modal is not wider than the screen */ #hw-submit-modal .modal-box { max-width: min(440px, 96vw); } /* Resend HW modal mobile fix */ #resend-hw-modal .modal-box { max-width: min(440px, 96vw); margin: 1rem; } /* Hero Image Animation */ @keyframes floatHero { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-12px) scale(1.015); } } .animate-hero-img { animation: floatHero 6s ease-in-out infinite; transform-origin: bottom center; } /* ═══════════════════════════════════════════════ Admin Course-Videos Section — Playlist Cards ═══════════════════════════════════════════════ */ .cv-custom-scrollbar::-webkit-scrollbar { width: 5px; } .cv-custom-scrollbar::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 99px; } .cv-custom-scrollbar::-webkit-scrollbar-track { background: transparent; } /* Compact playlist card */ .cv-playlist-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; cursor: pointer; border: 1.5px solid transparent; transition: background 0.18s, border-color 0.18s, box-shadow 0.18s; background: #fff; } .cv-playlist-item:hover { background: #eef2ff; border-color: #c7d2fe; } .cv-playlist-item.active { background: linear-gradient(135deg, #eef2ff, #e0e7ff); border-color: #818cf8; box-shadow: 0 2px 8px rgba(99,102,241,0.15); } .cv-playlist-item .cv-thumb { width: 64px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #e2e8f0; } .cv-playlist-item .cv-thumb-placeholder { width: 64px; height: 44px; border-radius: 8px; flex-shrink: 0; background: linear-gradient(135deg,#e0e7ff,#c7d2fe); display: flex; align-items: center; justify-content: center; } .cv-playlist-item .cv-num { width: 24px; height: 24px; border-radius: 50%; background: #e2e8f0; color: #64748b; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .cv-playlist-item.active .cv-num { background: #6366f1; color: #fff; } .cv-playlist-item .cv-info { flex: 1; min-width: 0; } .cv-playlist-item .cv-info .cv-title { font-size: 12px; font-weight: 700; color: #1e293b; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .cv-playlist-item.active .cv-info .cv-title { color: #4338ca; } .cv-playlist-item .cv-info .cv-date { font-size: 10px; color: #94a3b8; margin-top: 2px; } /* Dark mode for playlist */ html.dark .cv-playlist-item { background: var(--dark-card, #1e293b) !important; border-color: #334155 !important; } html.dark .cv-playlist-item:hover { background: #2a3548 !important; border-color: #475569 !important; } html.dark .cv-playlist-item.active { background: rgba(99, 102, 241, 0.15) !important; border-color: #6366f1 !important; } html.dark .cv-playlist-item .cv-thumb { background: #334155 !important; } html.dark .cv-playlist-item .cv-num { background: #334155 !important; color: #cbd5e1 !important; } html.dark .cv-playlist-item.active .cv-num { background: #6366f1 !important; color: #fff !important; } html.dark .cv-playlist-item .cv-info .cv-title { color: #f1f5f9 !important; } html.dark .cv-playlist-item.active .cv-info .cv-title { color: #818cf8 !important; } @media (min-width: 1280px) { #course-videos-list-wrapper { max-height: 680px !important; } } @media (min-width: 768px) and (max-width: 1279px) { #course-videos-list-wrapper { max-height: 460px !important; } } /* Student Videos Playlist — responsive heights */ @media (min-width: 768px) { #section-videos #videos-list { max-height: 480px !important; } } @media (min-width: 1280px) { #section-videos #videos-list { max-height: 680px !important; } } /* Active lesson row indicator (RTL: border on right) */ .lesson-item-row.border-r-4 { border-right: 4px solid #2563eb !important; padding-right: calc(0.75rem - 4px); } /* Fix: remove white background flash when clicking lesson buttons */ #videos-list button:focus, #videos-list button:active { outline: none; background-color: transparent !important; }