/*
 * 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ộ và nút việc chính của Khuôn màn danh sách (`_list_head.html` gắn lớp này). */
@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: 48px;
    font-size: 16px;
    font-weight: 600;
  }
}