1. Core Design PrinciplesRole-Centric Clarity: The UI must adapt completely to the user's role. Admins/Teachers need high-density data views; Schools need report-focused dashboards; Students need a minimalist, distraction-free environment.Native Bootstrap 5 Foundation: All components, utility classes, and grids must rely strictly on Bootstrap 5 to maintain compatibility with the required tech stack. Avoid custom CSS where a Bootstrap utility class exists.Accessibility & SEN-Friendly: High contrast ratios (WCAG AA), large click targets, and clear visual hierarchy to accommodate the is_sen (Special Educational Needs) flag.Seamless Localization (BiDi): The design must support dynamic toggling between LTR (English) and RTL (Arabic) layouts.2. TypographyFonts must be highly legible on screens and support comprehensive Latin and Arabic glyphs.Font RoleFont FamilyUsagePrimary (English)Inter or RobotoAll UI elements, data tables, and standard content.Primary (Arabic)Cairo or TajawalAll Arabic UI elements and exam questions.MonospaceFira Code or ConsolasStudent OTPs, school codes, and system IDs.Base Size: 16px (1rem) for Admin/School, 18px (1.125rem) for Student Exam Views to aid readability.Line Height: 1.5 for standard UI, 1.75 for long-form reading (Article-type questions).3. Color Palette (Updated for ABA Branding)
The palette is derived directly from the ABA logo, transitioning from a clinical, trustworthy teal to a growth-oriented bright green.

Primary Brand (ABA Green): #009B4D - The core brand color (derived from the right side of the logo ring). Used for primary actions, active navigation states, and admin headers.

Brand Accent (ABA Teal): #00A99D - Used for secondary highlights, hover states, and to recreate the brand gradient in UI accents (like top borders of cards).

Brand Bright (Chart Green): #39B54A - The bright green from the logo's bar chart. Used sparingly for data visualization and emphasis.

Neutral Text (Dark): #212529 (Bootstrap Dark) - For primary headings, matching the "ABA Assessment" text.

Neutral Text (Gray): #6C757D (Bootstrap Secondary) - For subtitles and meta-text, matching the "International Benchmark Test" text.

Backgrounds:

Admin/School: #F8F9FA (Bootstrap light) - Reduces eye strain for long sessions.

Student Exam: #FFFFFF (White) - Clean canvas for the exam.

Semantic (Grading & Status):

Success (Correct/Active): #198754 (Bootstrap green) - Harmonizes naturally with the primary brand.

Danger (Wrong/Missing): #DC3545 (Bootstrap red) - Provides necessary contrast against the green theme.

Warning (Draft/Pending Eval): #FFC107 (Bootstrap yellow).

Info (Selected Option): #00A99D (ABA Teal) - Replaces standard Bootstrap blue to keep the UI strictly within the brand family.

A Note to Include for the Developer/Claude:
Developer Note on Styling: To implement this palette effectively within the constraints of Bootstrap 5, override the default Bootstrap SCSS variables (specifically $primary, $info, and $secondary) with these hex codes before compiling, or create custom utility classes (e.g., bg-aba-primary, text-aba-teal) if overriding the core variables disrupts other vendor assets.
4. Role-Based Layout ArchitectureA. Admin & Teacher (user_type = 0)Layout: Persistent left sidebar navigation (collapsible for smaller screens) + top header (user profile, language toggle).Content Area: Fluid container (container-fluid).Data Density: High. Use Bootstrap cards to segment filters from DataTables.Navigation: Grouped by entities (Exams, Question Bank, Templates, Reports, Lookups).B. School (user_type = 1)Layout: Top navigation bar (simpler than Admin sidebar).Content Area: Fixed container (container) for a focused, dashboard feel.Focus: Immediate visibility of active exam sessions, quick access to student OTP printouts, and top-level entry points to HTML/Excel reports.C. Student (user_type = 2)Layout: Distraction-free, single-column layout. No sidebars, no complex footers.Header: Persistent top bar showing Exam Title, Student Name, and a sticky Countdown Timer (if applicable).Exam Canvas: Centered container (container-md). One question per card (or stacked as defined by the template).Interactions: Large, tappable radio buttons/checkboxes for MCQ. Clear visual indication when an answer is saved (num_changes sync).5. Component Specifications (Vendor Integration)DataTables (public/admin/assets/vendor/):Style: table-hover table-striped align-middle.Actions: Always align Action buttons (Edit, Delete, Grade) to the far right column. Use Bootstrap dropdowns or icon buttons (e.g., FontAwesome/Bootstrap Icons) to save space.Select2 Dropdowns:Style: Must be styled to match Bootstrap 5 form controls. Used heavily for taxonomies (Skills, Goals, Grades, Subjects).Rich Text (TinyMCE/Quill):Use for Teacher Notes, Article Questions, and Text Answers. Keep toolbars minimal for students, but expansive for admins building the question bank.Charts (ApexCharts/Chart.js/ECharts):Use standard tooltips. Ensure chart colors map to the brand and semantic palette. Rely on responsive: true to fit Bootstrap grid columns.6. Specific UI/UX Patterns to ImplementThe "Article" Question Layout:Parent article text on the left (or top), child questions (mcq, t-or-f) grouped elegantly on the right (or bottom) within a distinct Bootstrap card to show relationship (parent_id).Matching Questions (matching_options):Use a two-column drag-and-drop or line-drawing interface if possible, falling back to side-by-side dropdown selections for accessibility.Media Handling (multimedia):Images/Videos must have responsive constraints (img-fluid, ratio 16x9).Audio (Speaking questions): Implement a simple, foolproof record/stop/playback UI using HTML5 Media APIs with clear visual feedback (e.g., a pulsating red dot when recording).Teacher Evaluation Modal:A slide-out offcanvas or large modal showing the student's answer side-by-side with the correct rubric, allowing input for score, status, and teacher_eval_notes.7. Hand-off Guidelines for LLM GenerationWhen generating Blade views or CSS for this project:Strictly use standard Bootstrap 5 classes (e.g., d-flex, justify-content-between, card, table-responsive).Respect the Arabic RTL requirement: Use Bootstrap 5's logical utility classes (e.g., ms- for margin-start, pe- for padding-end) instead of physical directions (ml-, pr-).No dummy data in views: Output standard Blade directives (@foreach, {{ $variable }}) expecting the data exactly as shaped by the spec's Eloquent models.