/*
 * Khuôn form điện thoại chung (screen-standard Slice 04; Chuẩn chung "Màn bản ghi,
 * form" — 16/10, câu 18): trên điện thoại MỌI form một khuôn — một cột, nhãn trên ô,
 * nút thanh đáy trải ngang, thanh đáy dính đáy màn (user chốt 18/10, câu A). Bật cho
 * mọi form, không theo app:
 * mọi form admin (`change_form.html` của Unfold đặt `change-form` trên <body>) và mọi
 * form tự viết dựng bằng khuôn `core/form_page/screen.html` (cũng đặt lớp ấy).
 *
 * Nhãn trên ô và nút trải ngang là của chính Unfold dưới mốc `lg` (ô `flex-col`, nút
 * `w-full lg:w-auto`); tệp này thêm phần Unfold không có, chuyển từ phần chung của
 * `form-mobile.css` (bật theo cờ `form_mobile` của app, foundation Slice 15) — tệp ấy
 * chỉ còn phần riêng tới Slice 66 (dọn khuôn cũ). Mốc là `lg` của Unfold (dưới 1024px),
 * cùng mốc Unfold đổi nhãn lên trên ô và nút trải ngang, như `changelist-mobile.css`.
 */

@media (max-width: 1023.98px) {
  /* Không trượt ngang: Unfold để khối ô và hàng ô `min-width: min-content`, một giá
     trị dài làm cả form rộng hơn màn. */
  body.change-form .module,
  body.change-form .form-row,
  body.change-form .field-row,
  body.change-form .field-line,
  body.change-form fieldset {
    min-width: 0 !important;
  }

  /* Một cột: hàng nhiều ô xếp dọc, mỗi ô hết bề ngang. */
  body.change-form .fieldset .flex.flex-row.flex-wrap {
    flex-direction: column !important;
  }
  body.change-form .fieldset .flex.flex-row.flex-wrap > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Đường kẻ nét đứt giữa các ô của Unfold thành nét liền mảnh (chỉ hàng ô — ô kéo
     thả ảnh nét đứt của màn giữ nguyên). */
  body.change-form .field-line.border-dashed {
    border-style: solid !important;
  }

  /* Ô Select2 hết bề ngang như ô chữ (Select2 ghi bề ngang cố định lúc dựng). */
  body.change-form .related-widget-wrapper {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }
  body.change-form .related-widget-wrapper .select2 {
    width: 100% !important;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Thanh đáy (thanh Lưu của Unfold, `#submit-row`) dính đáy màn, nút luôn trong tầm
     ngón cái (user chốt 18/10, câu A); Unfold chỉ cho nó dính từ `lg`. Thanh đứng
     trong dòng chảy của trang (dính, không nổi), nên cuộn hết form thì nó về đúng chỗ
     dưới ô cuối, không che ô nào. Nền là lớp mờ của chính Unfold (trắng / base-900),
     thêm vạch trên theo token của khung và chừa vạch home của máy. */
  body.change-form #submit-row {
    position: sticky;
    bottom: 0;
  }
  body.change-form #submit-row > div {
    border-top: 1px solid var(--color-base-200);
    padding-top: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .dark body.change-form #submit-row > div {
    border-top-color: var(--color-base-800);
  }
  /* Ô đang gõ không nằm dưới thanh: trình duyệt cuộn ô được chọn lên trên thanh nhờ
     `scroll-padding-bottom` = chiều cao thanh (`core/js/form-phone.js` đo và đặt biến).
     Bàn phím ảo đẩy khung nhìn lên mà không đổi khung trang (thẻ viewport mặc định của
     Unfold), nên thanh nằm dưới bàn phím, không chồng lên ô. */
  html:has(body.change-form #submit-row) {
    scroll-padding-bottom: var(--wl-submit-row-height, 0px);
  }
}