-
-
-
+
-
+
@@ -113,11 +106,6 @@
-
-
-
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index c9416ca..3574659 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -51,13 +51,22 @@ header {
min-width: 0;
}
/* The fields group is the one that gives way first when space runs out. */
-.hgroup-fields { flex-shrink: 4; min-width: 0; flex-wrap: wrap; align-content: flex-start; }
-.hgroup-fields > .field,
-.hgroup-fields > .fcol { flex: 1 1 160px; min-width: 160px; }
+.hgroup-fields {
+ flex-shrink: 4; min-width: 0;
+ display: grid;
+ grid-template-columns: repeat(4, minmax(130px, 1fr));
+ gap: 10px 14px;
+ align-items: start;
+ align-content: start;
+}
+/* Compact grid: 4 dropdowns on row 1; the two dates + search fall to row 2. */
+.hgroup-fields .field { min-width: 0; }
.hgroup-fields .dropdown,
.hgroup-fields .dropdown-btn,
-.hgroup-fields input[type=text] { min-width: 0; width: 100%; }
-.hgroup-brand { background: #eaeaea; }
+.hgroup-fields input[type=text],
+.hgroup-fields input[type=date] { min-width: 0; width: 100%; }
+@media (max-width: 760px) { .hgroup-fields { grid-template-columns: repeat(2, minmax(120px, 1fr)); } }
+.hgroup-brand { background: #f2f2f2; }
/* Fields group: top-align so the date input sits UNDER Город/Бренд. */
.hgroup-fields { align-items: flex-start; }
.fcol { display: flex; flex-direction: column; gap: 8px; }
@@ -97,8 +106,8 @@ input[type=text] {
}
/* Counters as a compact gray block, pushed to the end of the header row so it
sits in line with the other boxed groups instead of floating below. */
-.hgroup-status { margin-left: auto; align-items: center; }
-#status { font-size: 12px; color: #888; line-height: 1.4; white-space: nowrap; }
+/* Counters now live inside the brand block as a compact inset. */
+.brand #status { margin-top: 10px; padding: 6px 10px; background: #fff; border: 1px solid #e2e2e2; border-radius: 6px; font-size: 12px; color: #666; line-height: 1.5; white-space: nowrap; }
/* Scale group: stack the "Оформление" button under the zoom slider. */
.hgroup-scale { flex-direction: column; align-items: flex-start; gap: 10px; }