ui(admin-panel): add form-page styles from the design line (styles only)

Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>

apps/admin-panel/src/assets/styles/form-page.less

@@ -0,0 +1,266 @@
+// ── Add/edit page layout ─────────────────────────────────────────────
+// Shared by the redesigned create/edit screens (AddProduct, AddCustomer and
+// its forms): page header, main/side columns, section cards and a sticky
+// action bar. Layout only — ant components keep their own design-system look.
+
+@pf-primary: #1c2d56;
+@pf-ink: #101828;
+@pf-muted: #8a94a6;
+@pf-line: #eef0f5;
+
+.pf-page {
+  min-width: 0;
+}
+
+/* header */
+.pf-head {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 20px;
+}
+.pf-head__back {
+  flex-shrink: 0;
+  border-color: @pf-line;
+  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
+}
+.pf-head__text {
+  flex: 1;
+  min-width: 0;
+  h1 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 500;
+    color: @pf-ink;
+  }
+  p {
+    margin: 2px 0 0;
+    font-size: 13px;
+    color: @pf-muted;
+  }
+}
+.pf-head__status {
+  margin: 0;
+  padding: 2px 12px;
+  border-radius: 999px;
+}
+
+/* layout */
+.pf-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 340px;
+  gap: 20px;
+  align-items: start;
+}
+.pf-layout--single {
+  grid-template-columns: minmax(0, 1fr);
+  max-width: 860px;
+}
+.pf-main,
+.pf-side {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  min-width: 0;
+}
+.pf-side {
+  position: sticky;
+  top: 0;
+}
+
+/* section cards */
+.pf-section {
+  background: #fff;
+  border: 1px solid @pf-line;
+  border-radius: 18px;
+  padding: 22px;
+  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px -14px rgba(16, 24, 40, 0.08);
+}
+.pf-section__head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+  > div {
+    flex: 1;
+    min-width: 0;
+  }
+  h3 {
+    margin: 0;
+    font-size: 15px;
+    font-weight: 500;
+    color: @pf-ink;
+  }
+  p {
+    margin: 2px 0 0;
+    font-size: 12px;
+    color: @pf-muted;
+  }
+}
+.pf-section__icon {
+  width: 38px;
+  height: 38px;
+  flex-shrink: 0;
+  display: grid;
+  place-items: center;
+  border-radius: 11px;
+  font-size: 16px;
+  color: @pf-primary;
+  background: rgba(28, 45, 86, 0.07);
+}
+.pf-section__action {
+  flex-shrink: 0;
+}
+.pf-alert {
+  margin-bottom: 18px;
+  border-radius: 12px;
+}
+.pf-divider {
+  height: 1px;
+  margin: 4px 0 20px;
+  background: @pf-line;
+}
+.pf-hint {
+  margin: -10px 0 0;
+  font-size: 12px;
+  color: @pf-muted;
+}
+
+/* form controls */
+.pf-form .ant-form-item.mb-0 {
+  margin-bottom: 0;
+}
+// numbers/phones typed left-to-right but kept right-aligned like their labels
+.pf-form .ltr-input,
+.pf-form .ltr-input input {
+  direction: ltr;
+  text-align: right;
+}
+.pf-grid-2 {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0 16px;
+}
+.pf-grid-3 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0 12px;
+}
+.pf-span-all {
+  grid-column: 1 / -1;
+}
+
+/* upload tiles inside sections */
+.pf-uploads {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
+  gap: 12px;
+}
+
+/* in-section actions (send forms that share the page with a list) */
+.pf-inline-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 20px;
+}
+
+/* sticky action bar (route pages; sits on #content-area's 16px padding) */
+.pf-actions {
+  position: sticky;
+  bottom: -16px;
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  margin: 20px -16px -16px;
+  padding: 14px 16px;
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(8px);
+  border-top: 1px solid @pf-line;
+  box-shadow: 0 -8px 24px -16px rgba(16, 24, 40, 0.18);
+  .ant-btn {
+    min-width: 120px;
+  }
+}
+.pf-actions__hint {
+  margin-inline-end: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: @pf-muted;
+}
+
+/* responsive */
+@media (max-width: 1199px) {
+  .pf-layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .pf-side {
+    position: static;
+    order: -1;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    > .pf-section:first-child:last-child,
+    > .pf-section.pf-span-all {
+      grid-column: 1 / -1;
+    }
+  }
+}
+@media (max-width: 767px) {
+  .pf-side {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .pf-actions__hint {
+    display: none;
+  }
+}
+@media (max-width: 575px) {
+  .pf-head {
+    margin-bottom: 14px;
+  }
+  .pf-head__text {
+    h1 {
+      font-size: 16px;
+    }
+    p {
+      display: none;
+    }
+  }
+  .pf-main,
+  .pf-side,
+  .pf-layout {
+    gap: 12px;
+  }
+  .pf-section {
+    padding: 16px;
+    border-radius: 16px;
+  }
+  .pf-section__head {
+    flex-wrap: wrap;
+    margin-bottom: 16px;
+  }
+  .pf-section__action {
+    width: 100%;
+  }
+  .pf-grid-2,
+  .pf-grid-3 {
+    grid-template-columns: minmax(0, 1fr);
+    // stacked: a last-row item is no longer last
+    > .ant-form-item.mb-0:not(:last-child) {
+      margin-bottom: 24px;
+    }
+  }
+  .pf-actions {
+    gap: 8px;
+    .ant-btn {
+      flex: 1;
+      min-width: 0;
+    }
+    .form-submit {
+      width: auto;
+    }
+  }
+}

apps/admin-panel/src/assets/styles/main.less

@@ -25,3 +25,4 @@
 @import './farsi.less';
 @import './rtl-overrides.css';
 @import './utilities.less';
+@import './form-page.less';