Refactor: фронтенд в стиле Material Design 3 (MUI-подобный), тёмная тема и Geologica

Made-with: Cursor

app/static/css/theme-compact.css

@@ -1,10 +1,11 @@
-/* Компактная раскладка форм документов */
+/* Компактные формы и таблицы документов — в стиле Material Design 3 */
+
 /* Подпись слева от поля, в одну строку */
 .ws-form-compact .ws-form-group {
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 0.5rem 1rem;
+  gap: 8px 16px;
   flex-wrap: wrap;
 }
 
@@ -12,12 +13,16 @@
   margin-bottom: 0;
   flex-shrink: 0;
   min-width: 6.5rem;
+  font-size: 12px;
+  color: var(--ws-text-secondary);
 }
 
 .ws-form-compact .ws-form-group input,
 .ws-form-compact .ws-form-group select {
   flex: 1;
   min-width: 0;
+  padding: 10px 14px;
+  border-radius: 8px;
 }
 
 .ws-form-compact .ws-form-group .ws-text-danger {
@@ -27,8 +32,8 @@
 
 .ws-form-compact .ws-form-row {
   display: grid;
-  gap: 1rem;
-  margin-bottom: 1rem;
+  gap: 16px;
+  margin-bottom: 16px;
   align-items: center;
 }
 
@@ -42,14 +47,14 @@
   flex: 0 0 auto;
 }
 
-/* Кнопка календаря у поля даты — акцентный цвет, хорошо видна на тёмном фоне */
+/* Поле даты — кнопка календаря в стиле MD3 */
 .ws-form-compact input[type="date"]::-webkit-calendar-picker-indicator {
   background-color: var(--ws-accent);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: center;
-  padding: 4px;
-  border-radius: var(--ws-radius-sm);
+  padding: 6px;
+  border-radius: 8px;
   cursor: pointer;
   opacity: 1;
 }
@@ -58,7 +63,6 @@
   background-color: var(--ws-accent-hover);
 }
 
-/* Firefox: кнопка календаря */
 .ws-form-compact input[type="date"]::-moz-focus-inner {
   border: none;
 }
@@ -84,10 +88,11 @@
   max-width: 100%;
 }
 
-/* Таблица товаров: без горизонтального скролла, компактные колонки */
+/* Таблица товаров — компактные колонки, без горизонтального скролла */
 .ws-table-wrap {
   overflow-x: hidden;
   max-width: 100%;
+  border-radius: 12px;
 }
 
 .ws-table-items {
@@ -102,19 +107,17 @@
   overflow: hidden;
   text-overflow: ellipsis;
   box-sizing: border-box;
+  padding: 10px 12px;
 }
 
-/* Товар: ограниченная ширина, длинное название обрезается */
 .ws-table-items .ws-col-product {
   width: 45%;
 }
 
-/* Цена: поле под 8 знаков, значение справа */
 .ws-table-items .ws-col-price {
   width: 14%;
 }
 
-/* Валюта */
 .ws-table-items .ws-col-currency {
   width: 12%;
 }
@@ -123,7 +126,6 @@
   width: 10%;
 }
 
-/* Стоимость: справа, разделитель в JS */
 .ws-table-items .ws-col-cost {
   width: 14%;
 }
@@ -132,31 +134,34 @@
   width: 5%;
 }
 
+/* Кнопка удаления строки (MD3 icon button) */
 .ws-table-items .ws-btn-remove-row {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 32px;
+  height: 32px;
   padding: 0;
   border: none;
-  border-radius: 4px;
+  border-radius: 50%;
   background: transparent;
-  color: #c62828;
-  font-size: 18px;
+  color: #ef5350;
+  font-size: 20px;
   line-height: 1;
   cursor: pointer;
+  transition: background 0.2s;
 }
 
 .ws-table-items .ws-btn-remove-row:hover {
-  background: rgba(198, 40, 40, 0.12);
-  color: #b71c1c;
+  background: rgba(239, 83, 80, 0.12);
+  color: #e53935;
 }
 
 .ws-table-items .ws-col-product select {
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
+  border-radius: 8px;
 }
 
 .ws-table-items .ws-col-price input {
@@ -165,11 +170,13 @@
   text-align: right;
   font-variant-numeric: tabular-nums;
   box-sizing: border-box;
+  padding: 8px 12px;
+  border-radius: 8px;
 }
 
-/* Убрать стрелки вверх/вниз у поля Количество (Цена — text, без стрелок) */
 .ws-table-items .ws-col-qty input[type="number"] {
   -moz-appearance: textfield;
+  border-radius: 8px;
 }
 
 .ws-table-items .ws-col-qty input[type="number"]::-webkit-outer-spin-button,
@@ -180,6 +187,7 @@
 
 .ws-table-items .ws-col-currency select {
   max-width: 100%;
+  border-radius: 8px;
 }
 
 .ws-table-items td.ws-col-qty input,