feat: Updated styling into seperate css files

frontend/src/components/TaskDetailModal.vue

@@ -144,64 +144,7 @@ const saveTask = () => {
 };
 </script>
 
-<style scoped>
-.status-progress {
-    display: flex;
-    flex-direction: column;
-    gap: 0.45rem;
-}
+<style scoped src="../assets/styles/scoped/components/TaskDetailModal.css"></style>
 
-.progress-step {
-    display: flex;
-    align-items: center;
-    gap: 0.45rem;
-    color: #627086;
-}
 
-.progress-step.current {
-    color: #0f172a;
-    font-weight: 700;
-}
 
-.progress-step.done {
-    color: #1f7a4d;
-}
-
-.dot {
-    width: 12px;
-    height: 12px;
-    border-radius: 999px;
-    border: 2px solid;
-}
-
-.subtask-row {
-    width: 100%;
-    margin-top: 0.35rem;
-    border: 1px solid #dbe4f0;
-    border-radius: 8px;
-    background: #f8fbff;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.35rem 0.5rem;
-}
-
-/* ── Dark mode ── */
-:root[data-bs-theme="dark"] .progress-step {
-    color: #7a8fa8;
-}
-
-:root[data-bs-theme="dark"] .progress-step.current {
-    color: #e2e8f0;
-}
-
-:root[data-bs-theme="dark"] .progress-step.done {
-    color: #4ade80;
-}
-
-:root[data-bs-theme="dark"] .subtask-row {
-    background: #252b38;
-    border-color: #3a3f4b;
-    color: #c8d3e6;
-}
-</style>