/*
 * 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, nút việc chính (Lưu) dính đáy màn, các nút khác ở cuối form
 * (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 dính đáy trên điện thoại chỉ là MỘT hàng gọn với nút việc chính (user chốt
     18/10, câu A, bổ sung): nút Lưu `_save` của Unfold, hay nút việc của khuôn form tự
     viết (`_next` Tiếp tục, bước cuối và form thường `_save`). Các nút khác của thanh —
     Xóa, Lưu và thêm mới, Lưu và tiếp tục sửa, nút thêm của màn, Đóng, Quay lại — ở
     cuối form như Unfold vẽ, cuộn tới mới thấy. Cách làm: nút việc chính nổi (`fixed`)
     ở đáy màn trên một dải nền (`::before` của thanh); phần còn lại của thanh đứng yên
     trong dòng chảy, chừa dưới nó đúng chiều cao dải, nên cuộn hết thì nút Lưu nằm
     ngay dưới các nút kia, không che nút hay ô nào. Không sửa template của Unfold, nên
     mọi thanh dựng từ `admin/submit_line.html` (cả bản ghi đè của app) theo cùng luật.
     Cỡ nút là cỡ nút việc chính trải ngang chung (`wl-main-wide`, `core/css/touch.css`)
     — cùng loại một kiểu: nút việc chính trải ngang của màn điện thoại. Dải cao 64px =
     nút 48 + đệm 8 trên dưới, cộng vạch home của máy.
     Lớp chồng: nút của Unfold là `relative` và nút Lưu đứng ĐẦU thanh, nên không có
     `z-index` thì các nút đứng sau (Lưu và thêm mới, Lưu và tiếp tục sửa…) lúc cuộn
     qua dải vẽ đè lên nút Lưu. Dải (1) và nút Lưu (2) nằm trên các nút ấy, trong khung
     chồng `z-40` của chính `#submit-row` (Unfold), nên không lên trên hộp thoại hay
     menu của trang. */
  :root {
    --wl-save-dock-height: calc(var(--wl-main-wide-height, 48px) + 16px + env(safe-area-inset-bottom));
  }
  body.change-form #submit-row > div {
    /* `backdrop-filter` của Unfold làm khối này thành khung của phần tử `fixed` bên
       trong (nút sẽ nổi theo khối, không theo màn); dải nền tự làm mờ. */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.change-form #submit-row:has(:is(button[name="_save"], button[name="_next"])) {
    padding-bottom: var(--wl-save-dock-height);
  }
  body.change-form #submit-row:has(:is(button[name="_save"], button[name="_next"]))::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: var(--wl-save-dock-height);
    background: color-mix(in oklab, var(--color-white, #fff) 80%, transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-top: 1px solid var(--color-base-200);
  }
  .dark body.change-form #submit-row:has(:is(button[name="_save"], button[name="_next"]))::before {
    background: color-mix(in oklab, var(--color-base-900) 80%, transparent);
    border-top-color: var(--color-base-800);
  }
  body.change-form #submit-row :is(button[name="_save"], button[name="_next"]) {
    position: fixed;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: calc(8px + env(safe-area-inset-bottom));
    margin-inline: auto;
    width: calc(100% - 32px);
    height: var(--wl-main-wide-height, 48px);
    font-size: var(--wl-main-wide-font-size, 16px);
    font-weight: var(--wl-main-wide-font-weight, 600);
  }
  /* Cùng bề ngang khối nút của Unfold (lớp `container` của Tailwind: 640px, 768px). */
  @media (min-width: 640px) {
    body.change-form #submit-row :is(button[name="_save"], button[name="_next"]) {
      max-width: 640px;
    }
  }
  @media (min-width: 768px) {
    body.change-form #submit-row :is(button[name="_save"], button[name="_next"]) {
      max-width: 768px;
    }
  }
  /* Ô đang gõ không nằm dưới dải: trình duyệt cuộn ô được chọn (chạm, nút "tiếp" của
     bàn phím, lỗi kiểm form) lên trên dải nhờ `scroll-padding-bottom` = chiều cao dải.
     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 dải nằm dưới bàn phím, không chồng lên ô. */
  html:has(body.change-form #submit-row :is(button[name="_save"], button[name="_next"])) {
    scroll-padding-bottom: var(--wl-save-dock-height);
  }
}