Add order editing and qualified downtime history

frontend/src/styles.css

@@ -562,6 +562,22 @@ th {
   background: var(--status-off-plan);
 }
 
+.status-badge--planned {
+  background: var(--status-off-plan);
+}
+
+.status-badge--running {
+  background: var(--status-production);
+}
+
+.status-badge--paused {
+  background: var(--status-unqualified);
+}
+
+.status-badge--closed {
+  background: var(--status-qualified);
+}
+
 .detail-stack {
   display: grid;
   gap: 14px;
@@ -765,6 +781,10 @@ th {
   background: var(--bg-panel);
 }
 
+.timeline-list--qualified li::before {
+  background: var(--status-production);
+}
+
 .downtime-board {
   display: grid;
   gap: 14px;
@@ -907,6 +927,41 @@ table button {
   overflow-x: auto;
 }
 
+.order-detail {
+  display: grid;
+  grid-column: 1 / -1;
+  gap: 14px;
+  padding: 14px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-panel-alt);
+}
+
+.order-detail__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.order-detail__header h3 {
+  margin: 4px 0 0;
+  font-family: "Space Grotesk", sans-serif;
+  font-size: var(--text-xl);
+}
+
+.order-detail__meta {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.order-detail__meta strong {
+  display: block;
+  margin-top: 4px;
+  overflow-wrap: anywhere;
+}
+
 table {
   width: 100%;
   border-collapse: collapse;
@@ -923,6 +978,22 @@ td {
   font-size: var(--text-sm);
 }
 
+tr.is-selected-row td {
+  background: var(--accent-light);
+}
+
+.link-button {
+  min-height: 0;
+  border: 0;
+  background: transparent;
+  color: var(--teal-900);
+  padding: 0;
+  font-weight: 700;
+  text-align: left;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
 .table-actions {
   display: flex;
   gap: 8px;
@@ -981,6 +1052,7 @@ td {
   .oee-grid,
   .machine-context,
   .detail-columns,
+  .order-detail__meta,
   .config-form {
     grid-template-columns: 1fr;
   }