/* ============================================ LOMS - Learning Outcomes Measurement System Premium Modern Design System — Multi-Theme ============================================ Themes available (set via [data-theme] on ): - "inu" → Irbid National University (Navy + Orange) [DEFAULT] - "indigo" → Royal Indigo (legacy classic) - "emerald" → Emerald Academic (green professional) - "crimson" → Crimson Heritage (deep red / burgundy) - "slate" → Slate Executive (corporate dark slate + amber) ============================================ */ :root { /* ---- Layout / Geometry (theme-independent) ---- */ --sidebar-width: 280px; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.08); --radius: 10px; --radius-sm: 6px; --radius-lg: 14px; --transition: all 0.2s ease; /* ---- Universal status colors (kept stable across themes) ---- */ --success: #15803d; --success-light: #dcfce7; --warning: #b45309; --warning-light: #fef3c7; --danger: #b91c1c; --danger-light: #fee2e2; --info: #1d4ed8; --info-light: #dbeafe; /* ---- Default theme (Irbid National University) ---- */ /* Primary = Navy Blue, Accent = Orange */ --primary: #2B3990; --primary-light: #4453b0; --primary-dark: #1f2a6e; --primary-50: #eef0fa; --primary-100: #d8dcf2; --primary-rgb: 43, 57, 144; --accent: #F37021; --accent-light: #ff8a45; --accent-dark: #d65a10; --accent-50: #fff2eb; --accent-rgb: 243, 112, 33; --bg-body: #f4f5f9; --bg-card: #ffffff; --bg-sidebar: #1f2a6e; /* deeper navy for sidebar */ --bg-sidebar-hover: #2B3990; --sidebar-text: #d6dcf2; --sidebar-active: #F37021; /* orange accent for active state */ --sidebar-border: rgba(255,255,255,0.08); --text-primary: #1e293b; --text-secondary: #5b6478; --text-muted: #94a3b8; --border: #e2e6ee; --login-gradient: linear-gradient(135deg, #1f2a6e 0%, #2B3990 55%, #F37021 130%); --header-gradient: linear-gradient(135deg, var(--primary), var(--primary-dark)); } /* ============ Theme: Royal Indigo (legacy) ============ */ [data-theme="indigo"] { --primary: #6366f1; --primary-light: #818cf8; --primary-dark: #4f46e5; --primary-50: #eef2ff; --primary-100: #e0e7ff; --primary-rgb: 99, 102, 241; --accent: #a855f7; --accent-light: #c084fc; --accent-dark: #7e22ce; --accent-50: #faf5ff; --accent-rgb: 168, 85, 247; --bg-sidebar: #1e1b4b; --bg-sidebar-hover: #312e81; --sidebar-text: #c7d2fe; --sidebar-active: #818cf8; --login-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4f46e5 100%); --header-gradient: linear-gradient(135deg, var(--primary), var(--primary-dark)); } /* ============ Theme: Emerald Academic ============ */ [data-theme="emerald"] { --primary: #047857; --primary-light: #10b981; --primary-dark: #064e3b; --primary-50: #ecfdf5; --primary-100: #d1fae5; --primary-rgb: 4, 120, 87; --accent: #ca8a04; --accent-light: #eab308; --accent-dark: #854d0e; --accent-50: #fefce8; --accent-rgb: 202, 138, 4; --bg-sidebar: #064e3b; --bg-sidebar-hover: #065f46; --sidebar-text: #d1fae5; --sidebar-active: #eab308; --login-gradient: linear-gradient(135deg, #064e3b 0%, #047857 55%, #10b981 100%); --header-gradient: linear-gradient(135deg, var(--primary), var(--primary-dark)); } /* ============ Theme: Crimson Heritage ============ */ [data-theme="crimson"] { --primary: #9f1239; --primary-light: #be123c; --primary-dark: #6b0822; --primary-50: #fff1f2; --primary-100: #ffe4e6; --primary-rgb: 159, 18, 57; --accent: #b45309; --accent-light: #d97706; --accent-dark: #78350f; --accent-50: #fef3c7; --accent-rgb: 180, 83, 9; --bg-sidebar: #4c0519; --bg-sidebar-hover: #6b0822; --sidebar-text: #fecdd3; --sidebar-active: #f59e0b; --login-gradient: linear-gradient(135deg, #4c0519 0%, #9f1239 55%, #b45309 100%); --header-gradient: linear-gradient(135deg, var(--primary), var(--primary-dark)); } /* ============ Theme: Slate Executive ============ */ [data-theme="slate"] { --primary: #1e293b; --primary-light: #334155; --primary-dark: #0f172a; --primary-50: #f1f5f9; --primary-100: #e2e8f0; --primary-rgb: 30, 41, 59; --accent: #f59e0b; --accent-light: #fbbf24; --accent-dark: #b45309; --accent-50: #fef3c7; --accent-rgb: 245, 158, 11; --bg-sidebar: #0f172a; --bg-sidebar-hover: #1e293b; --sidebar-text: #cbd5e1; --sidebar-active: #f59e0b; --login-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #334155 100%); --header-gradient: linear-gradient(135deg, var(--primary-light), var(--primary-dark)); } /* ============================================ Bootstrap CSS Variable Bridge Maps Bootstrap's --bs-* to our theme vars so that Bootstrap classes (text-primary, bg-primary, btn-primary, badge bg-success, .nav-tabs, progress-bar, etc.) all pick up the active theme automatically. ============================================ */ :root, [data-theme="inu"], [data-theme="indigo"], [data-theme="emerald"], [data-theme="crimson"], [data-theme="slate"] { --bs-primary: var(--primary); --bs-primary-rgb: var(--primary-rgb); --bs-link-color: var(--primary); --bs-link-hover-color: var(--primary-dark); --bs-border-radius: var(--radius); --bs-border-radius-sm: var(--radius-sm); --bs-border-radius-lg: var(--radius-lg); } /* ============ Bootstrap Tab Override ============ */ /* Stronger, theme-aware nav tabs */ .nav-tabs { border-bottom: 2px solid var(--border); gap: 2px; } .nav-tabs .nav-link { border: none; border-bottom: 3px solid transparent; border-radius: 0; color: var(--text-secondary); font-weight: 600; font-size: 0.88rem; padding: 10px 18px; margin-bottom: -2px; transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease; background: transparent; } .nav-tabs .nav-link:hover { color: var(--primary); background: var(--primary-50); border-bottom-color: var(--primary-light); } .nav-tabs .nav-link.active { color: var(--primary-dark); font-weight: 700; background: var(--primary-50); border-bottom: 3px solid var(--primary); } .nav-tabs .nav-link .badge { font-size: 0.68rem; padding: 3px 7px; } /* ============ Pill Tabs variant ============ */ .nav-pills .nav-link { border-radius: var(--radius-sm); color: var(--text-secondary); font-weight: 600; font-size: 0.88rem; padding: 8px 16px; transition: var(--transition); } .nav-pills .nav-link:hover { background: var(--primary-50); color: var(--primary); } .nav-pills .nav-link.active { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; box-shadow: 0 3px 10px rgba(var(--primary-rgb), 0.28); } * { margin: 0; padding: 0; box-sizing: border-box; } /* Base type scale — an explicit 17px root lifts every rem-based size (~+6%) for readability (esp. older faculty / accessibility). It is uniform across the app AND reaches inline rem font-sizes (e.g. data tables), and is fully reversible: delete this single rule to fall back to the browser default (16px). The layout is responsive (fluid grid, .table-responsive horizontal scroll, ellipsis on long text) and breakpoints are px-based, so this modest bump causes no reflow. */ html { font-size: 17px; } /* Workflow step arrows (.qstep-arrow) render the ► glyph, which always points right. In RTL the step flow reads right→left, so the arrow must point left. Mirror it once here — covers every report using the component (CLO, coordinator, head-section) and any future one. LTR is untouched. Reversible: delete this rule. */ html[dir="rtl"] .qstep-arrow { display: inline-block; transform: scaleX(-1); } body { font-family: 'Tajawal', 'Inter', sans-serif; background: var(--bg-body); color: var(--text-primary); line-height: 1.6; min-height: 100vh; } body.ltr { font-family: 'Inter', 'Tajawal', sans-serif; } /* Special nav link for docs — uses theme accent colour */ .nav-link-docs { background: rgba(var(--accent-rgb), 0.08); border-inline-end: 3px solid var(--accent); } .nav-link-docs .nav-docs-badge { background: rgba(var(--accent-rgb), 0.18); color: var(--accent-dark); font-size: 0.62rem; padding: 2px 8px; border-radius: 20px; font-weight: 700; margin-inline-start: auto; white-space: nowrap; } .app-wrapper { display: flex; min-height: 100vh; } /* ============ Sidebar ============ */ .sidebar { width: var(--sidebar-width); background: var(--bg-sidebar); position: fixed; top: 0; bottom: 0; z-index: 1040; display: flex; flex-direction: column; transition: transform 0.3s ease; overflow-y: auto; } .rtl .sidebar { right: 0; } .ltr .sidebar { left: 0; } .sidebar-header { padding: 20px 20px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.08); } .logo { display: flex; align-items: center; gap: 10px; color: white; font-weight: 700; font-size: 1rem; } .logo i { font-size: 1.5rem; color: var(--sidebar-active); } .logo-text { line-height: 1.3; } .sidebar-nav { flex: 1; padding: 12px 12px; overflow-y: auto; } .nav-section-title { color: var(--text-muted); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 16px 12px 6px; margin-top: 4px; } .nav-link-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: var(--sidebar-text); text-decoration: none; border-radius: var(--radius-sm); transition: var(--transition); font-size: 0.9rem; margin-bottom: 2px; } .nav-link-item:hover { background: var(--bg-sidebar-hover); color: white; } .nav-link-item.active { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: white; font-weight: 700; box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.35); } .nav-link-item.active i { color: #fff; } .nav-link-item i { font-size: 1.1rem; width: 22px; text-align: center; } .sidebar-footer { padding: 16px; border-top: 1px solid rgba(255,255,255,0.08); } .user-info { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .user-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; } .user-details { flex: 1; min-width: 0; } .user-name { color: white; font-weight: 600; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-role { color: var(--sidebar-text); font-size: 0.75rem; } .sidebar-actions { display: flex; gap: 6px; } .btn-icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--sidebar-text); text-decoration: none; transition: var(--transition); } .btn-icon:hover { background: var(--bg-sidebar-hover); color: white; } .sidebar-toggle { background: none; border: none; color: white; font-size: 1.3rem; cursor: pointer; padding: 4px; } /* ============ Main Content ============ */ .main-content { flex: 1; display: flex; flex-direction: column; min-height: 100vh; } .rtl .main-content { margin-right: var(--sidebar-width); } .ltr .main-content { margin-left: var(--sidebar-width); } .top-bar { background: var(--bg-card); padding: 14px 24px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 100; } .breadcrumb-area { display: flex; align-items: center; font-size: 0.85rem; color: var(--text-secondary); } .breadcrumb-area a { color: var(--primary); text-decoration: none; } .breadcrumb-area .current { color: var(--text-primary); font-weight: 600; } .content-area { padding: 24px; flex: 1; } /* ============ Cards ============ */ .card { background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); transition: var(--transition); } .card:hover { box-shadow: var(--shadow-md); } .card-header { padding: 18px 24px; border-bottom: 1px solid var(--border); background: transparent; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .card-header h5, .card-header h4 { margin: 0; font-weight: 700; color: var(--text-primary); } .card-body { padding: 24px; } /* ============ Stat Cards ============ */ .stat-card { background: var(--bg-card); border-radius: var(--radius); padding: 20px 24px; border: 1px solid var(--border); box-shadow: var(--shadow); display: flex; align-items: center; gap: 16px; transition: var(--transition); } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .stat-icon { width: 52px; height: 52px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; } .stat-icon.purple { background: var(--primary-50); color: var(--primary); } .stat-icon.green { background: var(--success-light); color: var(--success); } .stat-icon.blue { background: var(--info-light); color: var(--info); } .stat-icon.orange { background: var(--warning-light); color: var(--warning); } .stat-icon.red { background: var(--danger-light); color: var(--danger); } .stat-info { flex: 1; } .stat-value { font-size: 1.7rem; font-weight: 800; color: var(--text-primary); line-height: 1.2; } .stat-label { font-size: 0.8rem; color: var(--text-secondary); margin-top: 2px; } /* ============ Page Header ============ */ .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; } .page-title { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); } .page-subtitle { font-size: 0.9rem; color: var(--text-secondary); margin-top: 2px; } /* ============ Tables ============ */ .table { margin-bottom: 0; } .table thead th { background: var(--bg-body); border-bottom: 2px solid var(--border); font-weight: 700; font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; padding: 12px 16px; white-space: nowrap; } .table tbody td { padding: 14px 16px; vertical-align: middle; border-bottom: 1px solid var(--border); font-size: 0.9rem; } .table tbody tr:hover { background: var(--primary-50); } .table tbody tr:last-child td { border-bottom: none; } /* ============ Buttons ============ */ .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); border: none; border-radius: var(--radius-sm); padding: 10px 20px; font-weight: 600; font-size: 0.85rem; transition: var(--transition); box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.25); color: #fff; } .btn-primary:hover { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.35); color: #fff; } .btn-accent { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); border: none; border-radius: var(--radius-sm); padding: 10px 20px; font-weight: 600; font-size: 0.85rem; color: #fff; box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.25); transition: var(--transition); } .btn-accent:hover { color:#fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.35); } .btn-outline-primary { color: var(--primary); border-color: var(--primary); border-radius: var(--radius-sm); font-weight: 600; font-size: 0.85rem; } .btn-success { background: linear-gradient(135deg, var(--success), #059669); border: none; border-radius: var(--radius-sm); font-weight: 600; } .btn-danger { background: linear-gradient(135deg, var(--danger), #dc2626); border: none; border-radius: var(--radius-sm); font-weight: 600; } .btn-sm { padding: 6px 12px; font-size: 0.8rem; } /* ============ Forms ============ */ .form-control, .form-select { border-radius: var(--radius-sm); border: 1.5px solid var(--border); padding: 10px 14px; font-size: 0.9rem; transition: var(--transition); } .form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15); } .form-label { font-weight: 600; font-size: 0.85rem; color: var(--text-primary); margin-bottom: 6px; } /* ============ Badges ============ */ .badge { padding: 5px 12px; border-radius: 20px; font-weight: 600; font-size: 0.75rem; } .badge-achieved { background: var(--success-light); color: #065f46; } .badge-not-achieved { background: var(--danger-light); color: #991b1b; } .badge-domain { background: var(--primary-50); color: var(--primary-dark); } .badge-bloom { background: var(--info-light); color: #1e40af; } /* ============ Achievement Bar ============ */ .achievement-bar { height: 10px; border-radius: 5px; background: var(--bg-body); overflow: hidden; position: relative; } .achievement-fill { height: 100%; border-radius: 5px; transition: width 0.8s ease; background: linear-gradient(90deg, var(--primary), var(--primary-light)); } .achievement-fill.success { background: linear-gradient(90deg, var(--success), #34d399); } .achievement-fill.danger { background: linear-gradient(90deg, var(--danger), #f87171); } .achievement-fill.warning { background: linear-gradient(90deg, var(--warning), #fbbf24); } .achievement-value { font-weight: 700; font-size: 0.95rem; } /* ============ Modals ============ */ .modal-content { border-radius: var(--radius-lg); border: none; box-shadow: var(--shadow-lg); } .modal-header { border-bottom: 1px solid var(--border); padding: 18px 24px; } .modal-body { padding: 24px; } .modal-footer { border-top: 1px solid var(--border); padding: 16px 24px; } /* ============ Mapping Matrix ============ */ .matrix-table { font-size: 0.85rem; } .matrix-table th { text-align: center; } .matrix-table td { text-align: center; vertical-align: middle; } .matrix-cell { cursor: pointer; width: 36px; height: 36px; } .matrix-cell.active { background: var(--primary) !important; color: white; font-weight: 700; } .matrix-cell:hover { background: var(--primary-100) !important; } /* ============ Responsive ============ */ @media (max-width: 991.98px) { .sidebar { transform: translateX(100%); } .rtl .sidebar { transform: translateX(100%); } .ltr .sidebar { transform: translateX(-100%); } .sidebar.show { transform: translateX(0); } .rtl .main-content { margin-right: 0; } .ltr .main-content { margin-left: 0; } .sidebar-overlay.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1030; } .content-area { padding: 16px; } } .sidebar-overlay { display: none; } /* ============ Login Page ============ */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--login-gradient); padding: 20px; } .login-card { background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 440px; padding: 40px; } .login-logo { text-align: center; margin-bottom: 30px; } .login-logo i { font-size: 3rem; color: var(--primary); } .login-logo h2 { margin-top: 12px; font-weight: 800; font-size: 1.3rem; color: var(--text-primary); } /* ============ Empty State ============ */ .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); } .empty-state i { font-size: 3rem; margin-bottom: 12px; } .empty-state p { font-size: 1rem; } /* ============ Section Card ============ */ .section-card { background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border); padding: 24px; transition: var(--transition); text-decoration: none; color: inherit; display: block; } .section-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--primary-light); color: inherit; } .section-card .course-code { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; padding: 6px 16px; border-radius: 20px; font-weight: 700; font-size: 0.85rem; display: inline-block; margin-bottom: 12px; } .section-card .course-name { font-weight: 700; font-size: 1.1rem; margin-bottom: 8px; } .section-card .meta { display: flex; gap: 16px; flex-wrap: wrap; color: var(--text-secondary); font-size: 0.85rem; } .section-card .meta i { margin-left: 4px; } .ltr .section-card .meta i { margin-left: 0; margin-right: 4px; } /* ============ Animations ============ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .card, .stat-card, .section-card { animation: fadeInUp 0.4s ease forwards; } .stat-card:nth-child(2) { animation-delay: 0.05s; } .stat-card:nth-child(3) { animation-delay: 0.1s; } .stat-card:nth-child(4) { animation-delay: 0.15s; } /* Grade table input */ .grade-input { width: 70px; text-align: center; border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 6px; font-weight: 600; transition: var(--transition); } .grade-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.18); outline: none; } /* ============================================ Theme Switcher (sidebar footer) ============================================ */ .theme-switcher { position: relative; } .theme-switcher-toggle { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--sidebar-text); background: none; border: none; cursor: pointer; transition: var(--transition); } .theme-switcher-toggle:hover { background: var(--bg-sidebar-hover); color: #fff; } .theme-menu { position: fixed; /* NOT absolute — sidebar overflow+transform clips absolute children */ background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); min-width: 240px; padding: 8px; z-index: 9999; display: none; } .theme-menu.show { display: block; animation: fadeInUp 0.15s ease; } .theme-menu-title { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 10px 8px; } .theme-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; background: transparent; border-radius: var(--radius-sm); cursor: pointer; text-align: start; color: var(--text-primary); font-size: 0.85rem; font-weight: 500; transition: var(--transition); } .theme-option:hover { background: var(--primary-50); } .theme-option.active { background: var(--primary-50); color: var(--primary-dark); font-weight: 700; } .theme-option .swatch { width: 28px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.1); background: linear-gradient(90deg, var(--sw-a, #2B3990) 0 60%, var(--sw-b, #F37021) 60% 100%); flex-shrink: 0; } .theme-option .check { margin-inline-start: auto; color: var(--primary); opacity: 0; } .theme-option.active .check { opacity: 1; } /* Top bar accent stripe (subtle brand band) */ .top-bar { border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box, var(--header-gradient) border-box; border-top: 3px solid transparent; } /* Logo accent dot */ .logo i { color: var(--sidebar-active); } /* Achievement bar default uses primary brand */ .achievement-fill { background: linear-gradient(90deg, var(--primary), var(--primary-light)); } /* Section card hover border */ .section-card:hover { border-color: var(--primary-light); } /* Accent badge for "new" labels & links */ .badge-accent { background: var(--accent-50); color: var(--accent-dark); border:1px solid var(--accent-light); } /* Soft-print mode kept brand-neutral */ @media print { .sidebar, .top-bar, .theme-menu { display: none !important; } .main-content { margin: 0 !important; } } /* ============ Collapsible Section Chevron ============ */ .collapse-chevron { transition: transform 0.25s ease; font-size: 0.85rem; } .collapsed .collapse-chevron, [aria-expanded="false"] .collapse-chevron { transform: rotate(-90deg); } [data-bs-toggle="collapse"][aria-expanded="false"] .collapse-chevron { transform: rotate(-90deg); } /* ============ Quick Action Cards (Section Detail) ============ */ /* --- Management action cards --- */ .qa-action-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 22px 14px 18px; border-radius: var(--radius); background: var(--bg-card); border: 1.5px solid var(--border); box-shadow: var(--shadow); transition: all 0.25s cubic-bezier(.4,0,.2,1); color: var(--text-primary); position: relative; overflow: hidden; text-align: center; min-height: 120px; } .qa-action-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: var(--text-primary); } .qa-action-card .qa-action-arrow { position: absolute; top: 10px; left: 10px; opacity: 0; font-size: 0.85rem; color: var(--text-muted); transition: all 0.25s ease; } .rtl .qa-action-card .qa-action-arrow { left: 10px; right: auto; } .ltr .qa-action-card .qa-action-arrow { left: auto; right: 10px; } .ltr .qa-action-card .qa-action-arrow i { transform: rotate(180deg); } .qa-action-card:hover .qa-action-arrow { opacity: 1; color: var(--primary); } .qa-action-icon { width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.3); transition: transform 0.25s ease; } .qa-action-card:hover .qa-action-icon { transform: scale(1.08); } .qa-action-icon-outline { background: var(--primary-50) !important; color: var(--primary) !important; box-shadow: none !important; border: 1.5px solid var(--primary-100); } .qa-action-icon-accent { background: linear-gradient(135deg, var(--accent), var(--accent-dark)) !important; box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.3) !important; } .qa-action-label { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; } /* Primary variant */ .qa-action-primary { border-color: rgba(var(--primary-rgb), 0.15); background: linear-gradient(180deg, var(--bg-card) 0%, var(--primary-50) 100%); } .qa-action-primary:hover { border-color: var(--primary-light); } /* Accent variant */ .qa-action-accent { border-color: rgba(var(--accent-rgb), 0.15); background: linear-gradient(180deg, var(--bg-card) 0%, var(--accent-50) 100%); } .qa-action-accent:hover { border-color: var(--accent-light); } /* Outline variant */ .qa-action-outline { border-style: dashed; border-color: var(--border); } .qa-action-outline:hover { border-color: var(--primary); border-style: solid; background: var(--primary-50); } /* --- Report / Document cards --- */ .qa-report-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--border); border-inline-start: 4px solid var(--qa-accent, var(--primary)); box-shadow: var(--shadow-sm); transition: all 0.25s cubic-bezier(.4,0,.2,1); color: var(--text-primary); min-height: 78px; } .qa-report-card:hover { transform: translateY(-2px) translateX(-2px); box-shadow: var(--shadow-md); border-inline-start-width: 5px; background: var(--qa-accent-light, var(--primary-50)); color: var(--text-primary); } .qa-report-icon-wrap { width: 44px; height: 44px; min-width: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; transition: transform 0.25s ease; } .qa-report-card:hover .qa-report-icon-wrap { transform: scale(1.08); } .qa-report-body { flex: 1; min-width: 0; } .qa-report-title { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; margin-bottom: 2px; } .qa-report-desc { font-size: 0.75rem; color: var(--text-muted); line-height: 1.3; } .qa-report-badges { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .qa-report-chevron { color: var(--text-muted); font-size: 0.8rem; transition: transform 0.25s ease, color 0.25s ease; } .qa-report-card:hover .qa-report-chevron { color: var(--qa-accent, var(--primary)); transform: translateX(-3px); } .ltr .qa-report-card:hover .qa-report-chevron { transform: translateX(3px); } .ltr .qa-report-chevron { transform: rotate(180deg); } .ltr .qa-report-card:hover .qa-report-chevron { transform: rotate(180deg) translateX(-3px); } /* Responsive adjustments */ @media (max-width: 575.98px) { .qa-action-card { padding: 16px 10px 14px; min-height: 100px; } .qa-action-icon { width: 42px; height: 42px; font-size: 1.2rem; border-radius: 12px; } .qa-action-label { font-size: 0.78rem; } .qa-report-card { padding: 12px 14px; gap: 10px; } .qa-report-icon-wrap { width: 38px; height: 38px; min-width: 38px; font-size: 1rem; border-radius: 10px; } .qa-report-title { font-size: 0.82rem; } .qa-report-desc { display: none; } } /* =================================================================== DDAP — Department-Driven Assessment Plan Unified visual identity for the per-semester assessment plan feature. Used by: section detail banner, sections list badge, plan-coverage view, CLOs list, questions/CLO picker, readiness panel. =================================================================== */ :root { /* DDAP brand color (purple) — distinct from primary/accent so it never collides with theme switching. Hard-coded so the feature looks the same regardless of which theme the institution picks. */ --ddap-primary: #7c3aed; --ddap-primary-dark: #6d28d9; --ddap-primary-light: #8b5cf6; --ddap-soft: #ddd6fe; --ddap-soft-bg: rgba(124, 58, 237, 0.05); --ddap-soft-border: rgba(124, 58, 237, 0.15); --ddap-text: #6b21a8; } /* ── Banner shown on section detail when a plan is active ─────────────── */ .plan-banner { background: var(--ddap-soft-bg); border: 1px solid var(--ddap-soft-border); border-left: 4px solid var(--ddap-primary); border-radius: 12px; padding: 14px 16px; margin-bottom: 1.5rem; } html[dir="rtl"] .plan-banner { border-left: none; border-right: 4px solid var(--ddap-primary); } .plan-banner-title { font-weight: 700; color: var(--ddap-primary-dark); margin: 0 0 6px 0; font-size: 0.95rem; } .plan-banner-desc { color: var(--ddap-text); font-size: 0.85rem; line-height: 1.5; margin: 0; } /* ── Inline numeric badge inside narrative text ──────────────────────── */ .plan-badge { display: inline-block; background: var(--ddap-primary); color: #fff; padding: 3px 8px; border-radius: 6px; font-weight: 600; font-size: 0.75rem; margin: 0 4px 0 0; } /* ── Tag used in section lists ("In Plan (3 CLOs)") ──────────────────── */ .plan-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--ddap-soft); color: var(--ddap-primary-dark); padding: 2px 8px; border-radius: 6px; font-weight: 500; font-size: 0.75rem; text-decoration: none; transition: filter .15s ease; } .plan-tag:hover { filter: brightness(.95); color: var(--ddap-primary-dark); } /* ── Star/pin marker placed beside CLO codes when targeted by plan ──── */ .plan-marker { color: var(--ddap-primary); font-size: 0.85rem; margin: 0 4px; } .plan-marker[data-state="targeted"] { color: var(--ddap-primary); } .plan-marker[data-state="excluded"] { color: #b45309; } /* ── Status pill for plan-coverage progress per CLO ──────────────────── */ .plan-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-weight: 600; font-size: 0.75rem; line-height: 1; } .plan-status-ok { background: #dcfce7; color: #166534; } .plan-status-pending { background: #fef9c3; color: #854d0e; } .plan-status-missing { background: #fee2e2; color: #991b1b; } /* ── Onboarding tip banner (dismissable) ────────────────────────────── */ .plan-onboarding { position: relative; background: linear-gradient(135deg, var(--ddap-soft-bg), rgba(124,58,237,.10)); border: 1px solid var(--ddap-soft-border); border-radius: 12px; padding: 14px 16px 14px 56px; margin-bottom: 1rem; } html[dir="rtl"] .plan-onboarding { padding: 14px 56px 14px 16px; } .plan-onboarding::before { content: "✨"; position: absolute; top: 14px; left: 18px; font-size: 1.5rem; } html[dir="rtl"] .plan-onboarding::before { left: auto; right: 18px; } .plan-onboarding .btn-close-onboarding { position: absolute; top: 8px; right: 8px; background: transparent; border: 0; font-size: 0.85rem; color: var(--ddap-text); cursor: pointer; padding: 4px 8px; border-radius: 4px; } html[dir="rtl"] .plan-onboarding .btn-close-onboarding { right: auto; left: 8px; } .plan-onboarding .btn-close-onboarding:hover { background: rgba(0,0,0,.05); } /* ── Coverage progress bar on plan-coverage view ────────────────────── */ .plan-progress-track { height: 10px; background: #e5e7eb; border-radius: 999px; overflow: hidden; } .plan-progress-fill { height: 100%; background: linear-gradient(90deg, var(--ddap-primary-light), var(--ddap-primary)); transition: width .4s ease; } /* =================================================================== Mode-Transition Governance — warned banner Shown above the purple DDAP banner when a plan is in keep_warned state (assessment mode tightened after activation; instructor must finish the current commitments). =================================================================== */ .warned-banner { background: rgba(255, 193, 7, 0.08); border: 1px solid rgba(255, 193, 7, 0.35); border-left: 4px solid #ffc107; border-radius: 10px; padding: 12px 14px; } html[dir="rtl"] .warned-banner { border-left: none; border-right: 4px solid #ffc107; } .warned-banner strong { color: #856404; } /* ============ Section Divider ============ */ .section-divider { height: 1px; background: linear-gradient(90deg, transparent 0%, var(--border) 20%, var(--border) 80%, transparent 100%); margin: 1.75rem 0; border: none; } /* ============ Quick Links — Compact Action Strip ============ */ .quick-links { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-sm); } .quick-links-grid { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .quick-link { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-body); color: var(--text-primary); text-decoration: none; font-size: .82rem; font-weight: 600; transition: all .2s ease; white-space: nowrap; } .quick-link:hover { background: var(--primary-50); border-color: rgba(var(--primary-rgb), .2); color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .quick-link-icon { width: 26px; height: 26px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; color: #fff; flex-shrink: 0; } .quick-link-icon.ql-muted { background: var(--bg-body) !important; color: var(--text-secondary) !important; border: 1px solid var(--border); } .quick-link .badge { font-size: .62rem; padding: 2px 6px; border-radius: 10px; } .quick-links-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .quick-links-row + .quick-links-row { margin-top: .65rem; padding-top: .65rem; border-top: 1px dashed var(--border); } .quick-links-label { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; color: var(--primary); letter-spacing: .03em; white-space: nowrap; margin-inline-end: .35rem; } .quick-links-row.ql-secondary .quick-links-label { color: var(--text-muted); } .quick-links-row.ql-secondary .quick-link { font-weight: 500; opacity: .88; } /* Numbered sequence chips — row 1 reads as an ordered path, not a pile of links */ .quick-links-row.ql-steps { counter-reset: qlstep; } .quick-links-row.ql-steps .quick-link { position: relative; padding-inline-start: .6rem; } .quick-links-row.ql-steps .quick-link::before { counter-increment: qlstep; content: counter(qlstep); width: 19px; height: 19px; border-radius: 50%; background: var(--primary-50, #eff6ff); color: var(--primary, #2563eb); border: 1px solid rgba(var(--primary-rgb, 37, 99, 235), .25); font-size: .68rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; } [dir="rtl"] .quick-links-row.ql-steps .quick-link::before { content: counter(qlstep, arabic-indic); } .quick-links-row.ql-steps .quick-link:hover::before { background: var(--primary, #2563eb); color: #fff; } @media (max-width: 575.98px) { .quick-link { padding: .4rem .65rem; font-size: .76rem; } .quick-link-icon { width: 22px; height: 22px; font-size: .7rem; } } /* ============ Per-section quality-cycle mini flow (_section_flow.ejs) ============ */ .sflow { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding: .5rem .75rem; background: var(--bg-main, #f8fafc); border: 1px solid var(--border, #e2e8f0); border-radius: 8px; margin-bottom: .85rem; font-size: .74rem; } .sflow-step { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .6rem; border-radius: 14px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; } .sflow-step.done { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; } .sflow-step.pending { color: var(--text-muted, #94a3b8); background: transparent; border-color: var(--border, #e5e7eb); opacity: .7; } .sflow-step.active { background: var(--bg-card, #fff); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06)); } .sflow-step.active.role-instructor { color: #1d4ed8; border-color: #bfdbfe; } .sflow-step.active.role-coordinator { color: #15803d; border-color: #86efac; } .sflow-step.active.role-head { color: #7e22ce; border-color: #e9d5ff; } .sflow-arrow { color: var(--border, #cbd5e1); font-size: .65rem; flex-shrink: 0; } .sflow-you { background: #1e293b; color: #fff; border-radius: 10px; padding: .08rem .45rem; font-size: .66rem; font-weight: 700; animation: sflowPulse 2s ease-in-out infinite; } .sflow-wait { background: #fef3c7; color: #92400e; border-radius: 10px; padding: .08rem .45rem; font-size: .66rem; font-weight: 700; } .sflow-complete { color: #15803d; font-weight: 700; } @keyframes sflowPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } @media (max-width: 575.98px) { .sflow-label { display: none; } .sflow-step.active .sflow-label { display: inline; } }