:root { --bg-card: #1a1a2e; --bg-dark: #0f0f1a; /* Defaults — overridden per-tenant in */ --tenant-color: #4F46E5; --tenant-secondary: #1e293b; --tenant-color-dim: #4F46E526; } body { background-color: #0f0f1a; color: #e2e8f0; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; } /* ── Tenant-aware active / accent styling ──────────────────────────────── */ .navbar .nav-link.active, .navbar .nav-link:hover { color: var(--tenant-color) !important; } a { color: var(--tenant-color); } a:hover { color: var(--tenant-color); filter: brightness(1.2); } /* Primary buttons */ .btn-primary, .btn-primary:focus { background-color: var(--tenant-color) !important; border-color: var(--tenant-color) !important; } .btn-primary:hover { filter: brightness(1.15); } .btn-outline-primary { color: var(--tenant-color) !important; border-color: var(--tenant-color) !important; } .btn-outline-primary:hover { background-color: var(--tenant-color) !important; color: #fff !important; } /* Progress bar fill */ .progress-bar.bg-primary { background-color: var(--tenant-color) !important; } .progress-bar { background-color: var(--tenant-color); } /* Badges */ .badge.bg-primary { background-color: var(--tenant-color) !important; } /* Active nav pills / tabs */ .nav-pills .nav-link.active { background-color: var(--tenant-color) !important; } .nav-tabs .nav-link.active { border-bottom-color: var(--tenant-color) !important; color: var(--tenant-color) !important; } /* Admin hub cards on hover */ .admin-hub-card:hover { border-color: var(--tenant-color) !important; box-shadow: 0 0 0 1px var(--tenant-color); } /* Prose content accents */ .prose-content h2, .prose-content h3, .prose-content h4 { color: var(--tenant-color); } .prose-content code { background: var(--tenant-color-dim); color: var(--tenant-color); } .prose-content pre { border-color: var(--tenant-color-dim); } .prose-content blockquote { border-left-color: var(--tenant-color); } /* Quiz options */ .quiz-option:hover:not(:disabled) { background: var(--tenant-color-dim); border-color: var(--tenant-color); color: #e2e8f0; } .navbar { backdrop-filter: blur(8px); z-index: 1030; } /* Cards */ .card { border-radius: 12px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .course-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } /* Progress bars */ .progress { border-radius: 99px; background-color: rgba(255, 255, 255, 0.08); } .progress-bar { border-radius: 99px; } /* Lesson content */ .prose-content { line-height: 1.8; font-size: 1rem; } .prose-content ul, .prose-content ol { padding-left: 1.5rem; } .prose-content pre { background: #1e1e3f; border-radius: 8px; padding: 1rem; overflow-x: auto; } .prose-content pre code { background: none; padding: 0; color: #e2e8f0; } /* Quiz options */ .quiz-option { border-radius: 8px; transition: all 0.15s ease; } /* List group items */ .list-group-item { background-color: #1a1a2e; color: #e2e8f0; transition: background-color 0.15s ease; } .list-group-item:hover { background-color: #252540; } /* Toast */ .toast { min-width: 250px; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #0f0f1a; } ::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; } /* Table */ .table-dark { --bs-table-bg: transparent; } .table-dark th { color: #94a3b8; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .card { animation: fadeInUp 0.3s ease both; } /* ── Rich content image handling ────────────────────────────────────────── Applied to any area that renders Quill / HTML content via | safe. Images are capped at 100% width and gain a zoom-in cursor to signal they're clickable for full-size view. */ .rich-content img, .prose-content img { max-width: 100%; height: auto; border-radius: 6px; cursor: zoom-in; display: block; margin: 0.5rem 0; } /* Lightbox overlay */ #img-lightbox .modal-dialog { max-width: min(90vw, 1200px); } #img-lightbox .modal-content { background: #0f0f1a; border: 1px solid #334155; } #img-lightbox img { max-width: 100%; max-height: 85vh; object-fit: contain; border-radius: 4px; display: block; margin: 0 auto; } #img-lightbox .modal-footer { border-top: 1px solid #334155; }