Final

src/static/css/subject_form.css

@@ -1,19 +1,20 @@
 .form-container {
-        background: white;
-        border-radius: 1rem;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-        padding: 2rem;
-        margin: 2rem 0;
+    background: var(--card-bg);
+    border-radius: 1rem;
+    box-shadow: var(--shadow-lg);
+    padding: 2rem;
+    margin: 2rem 0;
+    border: 1px solid var(--border-color);
 }
 
 .form-header {
-    border-bottom: 2px solid var(--background-light);
+    border-bottom: 2px solid var(--border-color);
     padding-bottom: 1rem;
     margin-bottom: 2rem;
 }
 
 .form-header h2 {
-    color: #1e293b;
+    color: var(--text-primary);
     font-weight: 700;
     margin: 0;
 }
@@ -24,67 +25,179 @@
 
 .form-label {
     font-weight: 600;
-    color: #374151;
+    color: var(--text-primary);
     margin-bottom: 0.5rem;
     display: block;
 }
 
 .form-control {
-    border: 2px solid #e5e7eb;
+    border: 2px solid var(--border-color);
     border-radius: 0.5rem;
     padding: 0.75rem;
     width: 100%;
     font-size: 1rem;
-    transition: border-color 0.2s ease;
+    background: var(--background-primary);
+    color: var(--text-primary);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
 .form-control:focus {
     outline: none;
-    border-color: #f59e0b;
-    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px var(--primary-color-alpha);
+    background: var(--background-primary);
+}
+
+.form-control::placeholder {
+    color: var(--text-secondary);
 }
 
 .btn-primary {
-    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
     border: none;
     padding: 0.75rem 2rem;
     border-radius: 0.5rem;
     font-weight: 600;
     color: white;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
+    cursor: pointer;
 }
 
 .btn-primary:hover {
     transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
+    box-shadow: 0 4px 12px var(--primary-color-alpha);
+    color: white;
+}
+
+.btn-primary:active {
+    transform: translateY(0);
 }
 
 .btn-secondary {
-    background: #6b7280;
+    background: var(--text-secondary);
     border: none;
     padding: 0.75rem 2rem;
     border-radius: 0.5rem;
     font-weight: 600;
-    color: white;
+    color: var(--background-primary);
     text-decoration: none;
     display: inline-block;
-    transition: background-color 0.2s ease;
+    transition: background-color 0.2s ease, transform 0.2s ease;
+    cursor: pointer;
 }
 
 .btn-secondary:hover {
-    background: #4b5563;
-    color: white;
+    background: var(--text-primary);
+    color: var(--background-primary);
+    text-decoration: none;
+    transform: translateY(-1px);
+}
+
+.btn-outline-secondary {
+    background: transparent;
+    border: 2px solid var(--border-color);
+    padding: 0.75rem 2rem;
+    border-radius: 0.5rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    text-decoration: none;
+    display: inline-block;
+    transition: all 0.2s ease;
+    cursor: pointer;
+}
+
+.btn-outline-secondary:hover {
+    background: var(--background-light);
+    border-color: var(--primary-color);
+    color: var(--text-primary);
     text-decoration: none;
 }
 
 .help-text {
-    color: #6b7280;
+    color: var(--text-secondary);
     font-size: 0.875rem;
     margin-top: 0.25rem;
+    line-height: 1.4;
 }
 
 .error-message {
-    color: #dc2626;
+    color: var(--danger-color, #dc2626);
     font-size: 0.875rem;
     margin-top: 0.25rem;
-}
+    line-height: 1.4;
+}
+
+.success-message {
+    color: var(--success-color, #059669);
+    font-size: 0.875rem;
+    margin-top: 0.25rem;
+    line-height: 1.4;
+}
+
+/* Form validation states */
+.form-control.is-invalid {
+    border-color: var(--danger-color, #dc2626);
+    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
+}
+
+.form-control.is-valid {
+    border-color: var(--success-color, #059669);
+    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
+}
+
+/* Dark mode specific adjustments */
+[data-theme="dark"] .form-container {
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
+[data-theme="dark"] .form-control {
+    border-color: var(--border-color);
+    background: var(--background-secondary);
+}
+
+[data-theme="dark"] .form-control:focus {
+    background: var(--background-secondary);
+}
+
+/* Responsive adjustments */
+@media (max-width: 576px) {
+    .form-container {
+        padding: 1.5rem;
+        margin: 1rem 0;
+    }
+    
+    .btn-primary,
+    .btn-secondary,
+    .btn-outline-secondary {
+        width: 100%;
+        text-align: center;
+        margin-bottom: 0.5rem;
+    }
+}
+
+/* Loading state for buttons */
+.btn-loading {
+    position: relative;
+    color: transparent !important;
+}
+
+.btn-loading::after {
+    content: "";
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    top: 50%;
+    left: 50%;
+    margin-left: -8px;
+    margin-top: -8px;
+    border: 2px solid transparent;
+    border-top-color: currentColor;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}

src/templates/rag_app/dashboard.html

@@ -251,93 +251,7 @@
             </div>
         </div>
 
-        <!-- Sidebar -->
-        <div class="dashboard-sidebar">
-            <!-- Quick Actions -->
-            <div class="sidebar-card">
-                <div class="sidebar-header">
-                    <h3 class="sidebar-title">
-                        <i class="fas fa-bolt"></i>
-                        Quick Actions
-                    </h3>
-                </div>
-                <div class="sidebar-content">
-                    <a href="{% url 'rag_app:subject_create' %}" class="action-button">
-                        <div class="action-icon" style="background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: white;">
-                            <i class="fas fa-plus-circle"></i>
-                        </div>
-                        <div class="action-info">
-                            <h6>Create New Subject</h6>
-                            <small>Organize your study materials</small>
-                        </div>
-                    </a>
-
-                    <a href="{% url 'rag_app:document_upload' %}" class="action-button">
-                        <div class="action-icon" style="background: linear-gradient(135deg, var(--success-color), #047857); color: white;">
-                            <i class="fas fa-upload"></i>
-                        </div>
-                        <div class="action-info">
-                            <h6>Upload Document</h6>
-                            <small>Add study materials</small>
-                        </div>
-                    </a>
-
-                    <a href="{% url 'rag_app:generate_rag_quiz' %}" class="action-button">
-                        <div class="action-icon" style="background: linear-gradient(135deg, var(--warning-color), #b45309); color: white;">
-                            <i class="fas fa-magic"></i>
-                        </div>
-                        <div class="action-info">
-                            <h6>Generate Quiz</h6>
-                            <small>Create personalized tests</small>
-                        </div>
-                    </a>
-
-                    <a href="{% url 'rag_app:slide_generate' %}" class="action-button">
-                        <div class="action-icon" style="background: linear-gradient(135deg, var(--info-color), #5b21b6); color: white;">
-                            <i class="fas fa-presentation"></i>
-                        </div>
-                        <div class="action-info">
-                            <h6>Generate Slides</h6>
-                            <small>Create presentations</small>
-                        </div>
-                    </a>
-                </div>
-            </div>
-
-            <!-- Recent Quiz Results -->
-            <div class="sidebar-card">
-                <div class="sidebar-header">
-                    <h3 class="sidebar-title">
-                        <i class="fas fa-chart-bar"></i>
-                        Recent Quiz Results
-                    </h3>
-                </div>
-                <div class="sidebar-content">
-                    {% if quiz_attempts %}
-                        {% for attempt in quiz_attempts %}
-                        <div class="quiz-result-item">
-                            <div class="quiz-info">
-                                <h6>{{ attempt.quiz.title|truncatechars:30 }}</h6>
-                                <div class="quiz-date">{{ attempt.completed_at|date:"M d, Y" }}</div>
-                            </div>
-                            <div class="quiz-score">{{ attempt.score|floatformat:0 }}%</div>
-                        </div>
-                        {% endfor %}
-                        <div style="text-align: center; margin-top: 1rem;">
-                            <a href="{% url 'rag_app:quiz_list' %}" class="btn-hero-action" style="padding: 0.5rem 1rem; font-size: 0.85rem;">
-                                View All Results
-                            </a>
-                        </div>
-                    {% else %}
-                        <div class="empty-state" style="padding: 2rem 0;">
-                            <div class="empty-icon">
-                                <i class="fas fa-chart-bar"></i>
-                            </div>
-                            <div class="empty-title">No quiz attempts yet</div>
-                            <div class="empty-description">Take your first quiz to see results here.</div>
-                        </div>
-                    {% endif %}
-                </div>
+                  <!-- Recent Quiz Results -->
             </div>
         </div>
     </div>

src/templates/rag_app/subject_detail.html

@@ -66,7 +66,7 @@
                             </div>
                             <div class="col-lg-3 col-md-6 mb-3">
                                 <div style="background: var(--background-light); border-radius: 0.75rem; padding: 1.5rem; text-align: center;">
-                                    <div style="font-size: 2rem; font-weight: 700; color: #f59e0b; margin-bottom: 0.5rem;">{{ subject.chat_sessions.count }}</div>
+                                    <div style="font-size: 2rem; font-weight: 700; color: #f59e0b; margin-bottom: 0.5rem;">{{ subject.subject_chats.count }}</div>
                                     <div style="color: var(--text-secondary); font-weight: 500;">Chat Sessions</div>
                                 </div>
                             </div>