Update authentication system, database models, and UI components

static/css/components/file-upload.css

@@ -34,8 +34,7 @@
 
 #file-list li {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  flex-direction: column;
   padding: 0.75rem 1rem;
   margin: 0.5rem 0;
   background-color: var(--surface);
@@ -97,36 +96,58 @@
 
 .file-info {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   flex: 1;
-  min-width: 0; /* Allows text truncation */
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.25rem;
 }
 
-.file-icon {
-  margin-right: 0.75rem;
-  font-size: 1.2em;
-  flex-shrink: 0;
+.file-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  width: 100%;
+  gap: 0.75rem;
 }
 
+
+
 .file-name {
-  color: var(--primary);
-  text-decoration: none;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-right: 0.5rem;
-}
-
-.file-name:hover {
-  text-decoration: underline;
+  color: var(--text-color);
+  word-break: break-word;
+  overflow-wrap: break-word;
+  line-height: 1.3;
+  flex: 1;
+  font-size: 0.95em;
 }
 
 .file-size {
   color: var(--text-muted);
-  font-size: 0.85em;
-  margin-left: 0.5rem;
+  font-size: 0.8em;
   white-space: nowrap;
   flex-shrink: 0;
+  font-style: italic;
+  align-self: flex-start;
+}
+
+.delete-file {
+  align-self: center;
+  background: none;
+  border: none;
+  font-size: 1.1em;
+  cursor: pointer;
+  padding: 0.3rem 0.5rem;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  color: var(--text-muted);
+  margin-top: 0.2rem;
+}
+
+.delete-file:hover {
+  background-color: var(--error);
+  color: white;
+  transform: scale(1.1);
 }
 
 .file-actions {