/*
 * 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, MỘT nút dính đáy màn — nút chính riêng form khai
 * (`data-wl-dock`, user 24/10), không thì Lưu và tiếp tục sửa khi form có nó, không thì
 * Lưu (user 23/10, thay câu A 18/10) — các nút khác ở cuối form. 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 MỘT nút — nút được tô màu
     chính của thanh, cùng nút được tô màu trên máy tính (user 23/10, thay câu A 18/10):
     - form khai nút chính riêng (thuộc tính `data-wl-dock` trên nút tô màu, ở
       `submit_line.html` của app — user 24/10, vd Yêu cầu ký: Lưu và đặt khung ký): nút ấy
       dính, đứng trên mọi luật dưới; Lưu của form ấy là nút viền ở cuối form;
     - form admin có Lưu và tiếp tục sửa (`_continue`): nút ấy dính, tô màu chính đặc
       (`templates/admin/submit_line.html` tô nó); Lưu (`_save`) là nút viền ở cuối form;
     - form admin không có `_continue`: Lưu `_save` dính như trước;
     - form tự viết (khuôn `core/form_page`): nút việc — `_next` Tiếp tục, bước cuối và
       form thường `_save` — dính như trước (khuôn không có `_continue`).
     Các nút khác của thanh — Lưu, Xóa, Lưu và thêm mới, 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 dí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 dính 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 — luật theo
     dấu `data-wl-dock`, rồi tên nú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`, nên không có `z-index` thì các nút đứng sau
     nút dính trong trang lúc cuộn qua dải vẽ đè lên nó. Dải (1) và nút dính (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.
     Bộ chọn nút dính: `[data-wl-dock]`; không có thì `_continue`; không có nữa thì `_save` /
     `_next`. */
  :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([data-wl-dock], button[name="_continue"], button[name="_save"], button[name="_next"])) {
    padding-bottom: var(--wl-save-dock-height);
  }
  body.change-form #submit-row:has(:is([data-wl-dock], button[name="_continue"], 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([data-wl-dock], button[name="_continue"], 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 [data-wl-dock],
  body.change-form #submit-row:not(:has([data-wl-dock])) button[name="_continue"],
  body.change-form #submit-row:not(:has([data-wl-dock], button[name="_continue"])) :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 [data-wl-dock],
    body.change-form #submit-row:not(:has([data-wl-dock])) button[name="_continue"],
    body.change-form #submit-row:not(:has([data-wl-dock], button[name="_continue"])) :is(button[name="_save"], button[name="_next"]) {
      max-width: 640px;
    }
  }
  @media (min-width: 768px) {
    body.change-form #submit-row [data-wl-dock],
    body.change-form #submit-row:not(:has([data-wl-dock])) button[name="_continue"],
    body.change-form #submit-row:not(:has([data-wl-dock], button[name="_continue"])) :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([data-wl-dock], button[name="_continue"], button[name="_save"], button[name="_next"])) {
    scroll-padding-bottom: var(--wl-save-dock-height);
  }
  /* Thanh Lưu: các nút lưu còn lại (Lưu, Lưu & thêm, Lưu bản mới) xếp MỘT hàng chia đều, chữ rút gọn (`wl-label-short`
     trong `templates/admin/submit_line.html`); nút việc của màn (`actions_submit_line`) và cụm Đóng / Xóa đứng hàng
     riêng bên dưới. Nút chính dính đáy (`position: fixed`) ra khỏi luồng nên không chen vào hàng. Thanh có lớp
     `wl-button-pair` (Đặt khung ký) đã tự xếp một hàng — không đụng. */
  body.change-form #submit-row > div > div:not(.wl-button-pair) {
    flex-flow: row wrap;
    align-items: stretch;
  }
  body.change-form #submit-row > div > div:not(.wl-button-pair) > * {
    flex: 1 1 100%;
    order: 2;
  }
  body.change-form #submit-row > div > div:not(.wl-button-pair) > :is(button[name="_save"], button[name="_addanother"], button[name="_saveasnew"]) {
    flex: 1 1 0;
    min-width: 0;
    order: 1;
    min-height: 44px;
    justify-content: center;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  body.change-form #submit-row > div > div:not(.wl-button-pair) > .wl-button-pair {
    order: 3;
  }

  /* Nhãn của bảng nhập (inline dạng bảng) xếp trên ô: Unfold viết hoa mọi chữ (`before:capitalize` →
     "Giờ Vào Lại Dự Kiến"); nhãn đã viết hoa chữ đầu (`field.label`), nên để nguyên. */
  body.change-form .field-tabular::before {
    text-transform: none;
  }
}