Add owner work order approval page

web/static/styles.css

@@ -524,7 +524,8 @@ body {
 
 button,
 input,
-select {
+select,
+textarea {
   font: inherit;
 }
 
@@ -697,7 +698,8 @@ label {
 }
 
 input,
-select {
+select,
+textarea {
   width: 100%;
   min-height: 42px;
   border: 1px solid var(--line);
@@ -712,12 +714,19 @@ select {
 }
 
 input:focus,
-select:focus {
+select:focus,
+textarea:focus {
   outline: none;
   border-color: var(--accent);
   box-shadow: 0 0 0 4px rgba(22, 128, 106, 0.12);
 }
 
+textarea {
+  min-height: 86px;
+  padding: 10px 11px;
+  resize: vertical;
+}
+
 select:disabled {
   background: #f1f5f3;
   color: #9aa4a0;
@@ -1725,6 +1734,74 @@ select {
   overflow-wrap: anywhere;
 }
 
+.work-order-page {
+  background:
+    linear-gradient(180deg, #ffffff 0, #f3f7f5 240px),
+    var(--bg);
+}
+
+.work-order-shell {
+  width: min(1120px, 100%);
+}
+
+.work-order-hero {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.work-order-total {
+  display: grid;
+  gap: 4px;
+  padding: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.07);
+}
+
+.work-order-total span {
+  color: rgba(244, 251, 248, 0.68);
+  font-size: 12px;
+}
+
+.work-order-total strong {
+  color: #fff;
+  font-size: clamp(24px, 4vw, 34px);
+}
+
+.work-order-layout {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+  align-items: start;
+}
+
+.work-order-decision {
+  grid-column: 1 / -1;
+  display: grid;
+  gap: 12px;
+}
+
+.work-order-decision p {
+  margin: 8px 0 0;
+  color: var(--muted);
+}
+
+.single-total {
+  grid-template-columns: 1fr;
+}
+
+.catalog-work-form {
+  grid-template-columns: minmax(160px, 1.1fr) minmax(0, 1.3fr) minmax(74px, 0.5fr) minmax(86px, 0.7fr) auto;
+}
+
+.compact-tip {
+  display: grid;
+  gap: 8px;
+}
+
+.compact-tip button {
+  width: fit-content;
+}
+
 @keyframes toastIn {
   from {
     opacity: 0;
@@ -1807,6 +1884,7 @@ select {
   }
 
   .sto-grid,
+  .work-order-layout,
   .staff-form {
     grid-template-columns: 1fr;
   }
@@ -1822,6 +1900,10 @@ select {
     min-width: 70vw;
     scroll-snap-align: start;
   }
+
+  .catalog-work-form {
+    grid-template-columns: 1fr;
+  }
 }
 
 @media (max-width: 640px) {
@@ -1926,6 +2008,10 @@ select {
     grid-template-columns: 1fr;
   }
 
+  .work-order-hero {
+    grid-template-columns: 1fr;
+  }
+
   .sto-page .top-actions {
     display: grid;
     grid-template-columns: minmax(0, 1fr) 44px;