Styling

Copied Ninos styles with copilot

frontend/src/styles/components/_tickets.scss

@@ -1,9 +1,31 @@
 @use "../mixins" as *;
 @use "../variables" as *;
 
+.ticket {
+  border: 1px solid #ccc;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  border-radius: $border-radius-lg;
+  background: $color-container;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+  @media (prefers-color-scheme: dark) {
+    background: $color-container-dark;
+  }
+
+  h3 {
+    margin-top: 0;
+    color: $color-primary;
+  }
+
+  p {
+    margin: 0.3rem 0;
+  }
+}
+
 .ticket-card {
   @include card();
-  border-left: 4px solid $color-accent;
+  border-left: 4px solid $color-primary;
   display: flex;
   flex-direction: column;
   gap: $spacing-sm;
@@ -11,3 +33,27 @@
   .title { font-weight: 600; }
 }
 
+.status {
+  display: inline-block;
+  padding: 4px 10px;
+  border-radius: 8px;
+  font-size: 0.8rem;
+  font-weight: bold;
+  margin-top: 8px;
+
+  &.To-Do { 
+    background: $color-status-todo; 
+    color: $color-status-todo-text; 
+  }
+
+  &.InProgress { 
+    background: $color-status-inprogress; 
+    color: $color-status-inprogress-text; 
+  }
+
+  &.Done { 
+    background: $color-status-done; 
+    color: $color-status-done-text; 
+  }
+}
+