/*
 * Lớp chạm `wl-touch` và nút việc chính trải ngang `wl-main-wide` (screen-standard
 * Slice 06). Cách dùng, cỡ đã chốt và lý do: skill `vtd-django-frontend` § "Touch
 * pages" — chỗ duy nhất ghi đủ; tệp này chỉ ghi vì sao từng luật viết như thế.
 *
 * Nạp ở khuôn Trang công khai và ở mọi trang trong khung WL26 (`UNFOLD["STYLES"]`).
 * Không phải Tailwind: Unfold chỉ ship bộ utility nó dùng. Không mã màu riêng.
 */

/* 1. Lớp chạm: mọi luật bắt đầu bằng `.wl-touch` (lớp trên <body>) — hộp hỏi/báo,
 *    lịch, đồng hồ và danh sách Select2 dựng ở cuối <body> cũng thuộc trang. */

/* 1a. Ô nhập, ô chọn, ô nhiều dòng: cao 44px, chữ 16px (nhỏ hơn thì iOS phóng to
 *     trang khi chạm vào ô). */
.wl-touch input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.wl-touch select:not(.select2-hidden-accessible),
.wl-touch textarea {
  min-height: 44px;
  font-size: 16px;
}
/* 1b. Nút. `:where` giữ độ ưu tiên thấp, để `.wl-main-wide` (mục 2) cao hơn sàn này. */
.wl-touch :where(button:not(.select2-container *), [data-button-kind]) {
  min-height: 44px;
}
/* 1c. Ô tick, nút chọn tròn: ô của Unfold chỉ 16px, nên vùng chạm là cả dòng nhãn
 *     (nhãn bọc ô — nút chọn tròn, chọn nhiều — hay nhãn đứng ngay sau ô — ô tick). */
.wl-touch label:has(> input[type="radio"], > input[type="checkbox"]),
.wl-touch input[type="radio"] + label,
.wl-touch input[type="checkbox"] + label {
  display: flex;
  align-items: center;
  min-height: 44px;
}
/* 1d. Ô ảnh, ô tệp của Unfold: icon tải lên là một nhãn cạnh ô tệp ẩn. */
.wl-touch div:has(> div > input[type="file"]) > label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
/* 1e. Ô Select2 (chọn một, chọn nhiều) và dòng chọn của danh sách thả xuống — lớp
 *     đôi như `core/css/select2.css` để thắng CSS của Unfold và Django nạp sau. */
.wl-touch .select2-container.select2-container--admin-autocomplete .select2-selection {
  min-height: 44px;
}
.wl-touch .select2-container.select2-container--admin-autocomplete .select2-selection--single .select2-selection__rendered,
.wl-touch .select2-container.select2-container--admin-autocomplete .select2-selection--single .select2-selection__arrow,
.wl-touch .select2-container.select2-container--admin-autocomplete .select2-selection--single .select2-selection__clear {
  height: 42px; /* 44px trừ hai viền */
}
.wl-touch .select2-container.select2-container--admin-autocomplete .select2-selection__rendered,
.wl-touch .select2-container.select2-container--admin-autocomplete .select2-search__field {
  font-size: 16px;
  line-height: 26px;
}
.wl-touch .select2-container.select2-container--admin-autocomplete .select2-results__option {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 16px;
}
/* 1f. Ô ngày chung: icon lịch, icon đồng hồ phủ hết bề cao ô. */
.wl-touch .datetimeshortcuts {
  top: 0;
}
.wl-touch .datetimeshortcuts a {
  height: 44px;
  min-width: 44px;
  justify-content: center;
}
/* 1g. Hộp lịch và hộp đồng hồ của admin: ‹ ›, ô ngày, Hôm qua / Hôm nay / Ngày mai,
 *     giờ chọn sẵn và "Hủy bỏ" (đều là thẻ <a>). ‹ › giữ chỗ cũ: vòng 28px nằm giữa
 *     ô 44px thay cho lề 8px. */
.wl-touch .calendarbox .calendarnav-previous,
.wl-touch .calendarbox .calendarnav-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
}
/* Ô ngày 44px: bỏ lề 4px của ô bảng, không thì bảy cột tràn hộp lịch rộng 320px. */
.wl-touch .calendarbox .calendar table td {
  height: 44px;
  padding: 0;
}
.wl-touch .calendarbox .calendar table td a {
  width: 44px;
  height: 44px;
  margin: 0 auto;
}
.wl-touch .calendarbox .calendar-shortcuts a,
.wl-touch .clockbox .timelist a,
.wl-touch .calendar-cancel a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}
.wl-touch .calendar-cancel {
  padding-block: 0;
}

/* 2. Nút việc chính trải ngang — một cỡ cho mọi chỗ: Trang công khai, màn điện thoại
 *    nội bộ, nút việc chính của Khuôn màn danh sách (`_list_head.html` gắn lớp này) và
 *    nút Lưu dính đáy của form trên điện thoại (`core/css/form-phone.css` đọc ba biến
 *    dưới đây — cỡ chỉ ghi ở đây). */
:root {
  --wl-main-wide-height: 48px;
  --wl-main-wide-font-size: 16px;
  --wl-main-wide-font-weight: 600;
}
@media (max-width: 1023.98px) {
  /* Thêm `[data-button-kind]` để thắng lớp Tailwind của bộ nút (`inline-flex`,
   * `text-sm`, `font-medium`): trong khung WL26, CSS của Unfold nạp sau tệp này. */
  .wl-main-wide[data-button-kind] {
    display: flex;
    width: 100%;
    min-height: var(--wl-main-wide-height);
    font-size: var(--wl-main-wide-font-size);
    font-weight: var(--wl-main-wide-font-weight);
  }
}

/* 3. Cặp nút ở đáy thẻ, hộp thoại, trang xác nhận (screen-standard, user 27/10):
 *    dưới 1024px hai nút (hay ba nút ngắn) của một nhóm hành động xếp MỘT hàng, chia đều
 *    chỗ, cao tối thiểu 44px, nút phụ (Không, đưa tôi trở lại / Đóng / Hủy) đứng trái và
 *    nút làm việc (Tính lại / Lưu / Xác nhận) đứng phải theo thứ tự trong mẫu; chữ dài xuống
 *    hai dòng TRONG nút, không đẩy nút xuống hàng sau. Một nút riêng lẻ chiếm cả hàng.
 *    Từ 1024px (Unfold `lg`) nút về cỡ chữ, nút việc dồn sang phải như cũ.
 *    Bộ chọn `:is(a, button)` (0,1,1) thắng lớp Tailwind một lớp của bộ nút (`whitespace-nowrap`,
 *    `w-full`), kể cả khi CSS của Unfold nạp sau tệp này. Chiều rộng của hàng do chỗ dùng quyết
 *    (`w-full`, `lg:w-auto`), lớp này chỉ quyết cách xếp. */
.wl-button-pair {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
}
.wl-button-pair > :is(a, button, form, div) {
  flex: 1 1 0;
  min-width: 0;
}
.wl-button-pair > :is(a, button) {
  min-height: 44px;
  justify-content: center;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (min-width: 1024px) {
  .wl-button-pair {
    align-items: center;
  }
  .wl-button-pair > :is(a, button, form, div) {
    flex: 0 0 auto;
  }
  .wl-button-pair > :is(a, button) {
    min-height: 0;
    white-space: nowrap;
    overflow-wrap: normal;
  }
  /* Trang `wl-touch` (Boiler, hộp chung, máy bảng 1024px) giữ sàn 44px ở mọi bề ngang. */
  .wl-touch .wl-button-pair > :is(a, button) {
    min-height: 44px;
  }
  /* Nút việc dồn sang phải: nút cuối của một hàng có từ hai nút trở lên. */
  .wl-button-pair > :last-child:not(:first-child) {
    margin-left: auto;
  }
}

/* Ba nút quyết định của Phê duyệt (Duyệt / Từ chối / Yêu cầu sửa): dưới 640px xếp DỌC, mỗi nút trải hết khung và
 * chữ không ngắt giữa từ; từ 640px về cách xếp một hàng của cặp nút. */
@media (max-width: 639px) {
  .wl-button-pair--stack {
    flex-direction: column;
  }
  .wl-button-pair--stack > :is(a, button) {
    overflow-wrap: normal;
  }
}

/* Thanh dưới của khuôn form tự viết: Quay lại và Đóng ở một khối cặp nút dưới 1024px; từ 1024px khối tan
 * (`display: contents`) và hai nút trả về cách xếp mặc định của thanh (`flex: 0 1 auto`), như trước. */
@media (min-width: 1024px) {
  .wl-button-pair--bar {
    display: contents;
  }
  .wl-button-pair--bar > :is(a, button, form, div) {
    flex: 0 1 auto;
    min-width: auto;
  }
  .wl-button-pair--bar > :last-child:not(:first-child) {
    margin-left: 0;
  }
}

/* Thanh dưới của Đặt khung ký: Lưu và Gửi ký một hàng dưới 1024px (Lưu trái, Gửi ký phải); từ 1024px hàng
 * đảo chiều như trước (Gửi ký bên trái Lưu) và nút không bị đẩy bằng lề tự động. */
@media (min-width: 1024px) {
  .wl-button-pair--reverse {
    flex-direction: row-reverse;
  }
  .wl-button-pair--reverse > :last-child:not(:first-child) {
    margin-left: 0;
  }
}

/* Hộp thoại và chân hộp thả xuống: từ 1024px nút dồn sang phải (dưới 1024px chia đều cả hàng). */
@media (min-width: 1024px) {
  .wl-button-pair--end {
    justify-content: flex-end;
  }
}

/* Nhãn rút gọn của thanh Lưu: dưới 1024px nút hiện chữ ngắn (nhãn đầy đủ ở `title` và `aria-label`),
 * từ 1024px hiện chữ đầy đủ như cũ. */
.wl-label-full {
  display: none;
}
@media (min-width: 1024px) {
  .wl-label-short {
    display: none;
  }
  .wl-label-full {
    display: inline;
  }
}

/* Hàng nút đứng đầu nhóm (Duyệt / Từ chối / Yêu cầu sửa của Phê duyệt): từ 1024px nút xếp từ trái, không dồn phải. */
@media (min-width: 1024px) {
  .wl-button-pair--start > :last-child:not(:first-child) {
    margin-left: 0;
  }
}