/* ============================================================================
   [MOBILE TABLES] (2026-09-21) — bảng danh sách trên điện thoại.

   Vấn đề đo được ở khổ 390px: bảng rộng 800–1400px nằm trong khung ~340px nên chỉ
   thấy 2–3 cột, phần còn lại phải cuộn ngang. Các cột đã nowrap chiếm hết chỗ nên cột
   văn bản dài (vd "Nội dung" có style inline max-width:300px) bị bóp còn ~63px, chữ
   xuống 11 dòng và kéo cả hàng cao 205px trong khi 6 ô còn lại chỉ có 1 dòng.

   Cách xử lý: dưới 768px mỗi <tr> thành một thẻ, mỗi <td> là một dòng "Nhãn : giá trị".
   Nhãn lấy từ <th> tương ứng, do assets/js/mobile-tables.js gắn vào data-label; file JS
   đó cũng gắn class .mt-cards / .mt-cards-wrap nên CSS này chỉ ăn vào đúng bảng đã xử lý
   (không dùng :has để giữ tương thích trình duyệt cũ).

   ROLLBACK = xoá 2 dòng <link> tới file này trong
   resources/views/components/layouts/app/header.blade.php (khu người dùng) và
   resources/views/admin/layouts/partials/head-css.blade.php (khu quản trị),
   rồi xoá file này cùng public/assets/js/mobile-tables.js.
   ============================================================================ */
/* Dòng "Hiển thị 1–10 / 85 dòng" (.dataTables_info): trên điện thoại thì tràn khỏi khung, trên PC
   thì thừa vì ngay cạnh đã có số trang. Ẩn ở MỌI khổ màn theo yêu cầu 21/09. */
.dataTables_wrapper .dataTables_info { display: none !important; }

/* Thanh "Sắp xếp" do JS chèn chỉ phục vụ layout thẻ. Ẩn mặc định để khi người dùng xoay ngang
   hoặc phóng to qua ngưỡng 768px (thanh đã nằm sẵn trong DOM) nó không lòi ra ở bản PC. */
.mt-sortbar { display: none; }

@media (max-width: 767.98px) {

  /* Khung cuộn ngang nhường viền lại cho từng thẻ; không còn gì để cuộn ngang nữa. */
  .mt-cards-wrap {
    border: 0 !important;
    border-radius: 0 !important;
    overflow-x: visible !important;
  }

  /* Khu quản trị đặt thanh phân trang BÊN TRONG .table-responsive: 20+ nút làm khung rộng
     thêm ~45px. Cho xuống dòng thay vì đẩy ngang (khu người dùng đã xử lý ở theme-skin.css). */
  .mt-cards-wrap .dataTables_paginate .pagination {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
  }

  /* Ô "Search:" và "Show ... entries" của DataTables cũng nằm trong khung đó và có bề ngang
     cố định (~252px) nên ở máy 320px vẫn đẩy ngang thêm 10px. Cho co lại theo khung. */
  .mt-cards-wrap .dataTables_filter label,
  .mt-cards-wrap .dataTables_length label {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
  }
  .mt-cards-wrap .dataTables_filter input,
  .mt-cards-wrap .dataTables_length select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  table.mt-cards {
    display: block;
    width: 100% !important;
    border: 0 !important;
    margin-bottom: 0;
  }

  /* Tiêu đề cột chuyển thành nhãn trong từng ô (xem td::before) nên phần CHỮ của thead không cần hiện.
     Nhưng thead ở khu quản trị còn chứa ô tích "chọn tất cả" (vd admin/users, admin/invoices) nên
     không ẩn cả hàng: JS gắn class mt-th-control cho ô có điều khiển và mt-has-thead-control cho bảng. */
  table.mt-cards:not(.mt-has-thead-control) > thead { display: none; }
  table.mt-cards.mt-has-thead-control > thead { display: block; }
  table.mt-cards.mt-has-thead-control > thead > tr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 10px;
    border: 0;
  }
  table.mt-cards.mt-has-thead-control > thead > tr > th { display: none; }
  table.mt-cards.mt-has-thead-control > thead > tr > th.mt-th-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto !important;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
  }
  table.mt-cards.mt-has-thead-control > thead > tr > th.mt-th-control::after {
    content: attr(data-mt-hint);
    font-size: .82rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #64748b);
    text-transform: none;
    white-space: nowrap;
  }

  table.mt-cards > tbody { display: block; }

  table.mt-cards > tbody > tr {
    display: block;
    margin: 0 0 10px;
    border: 1px solid var(--bs-border-color, #e2e8f0);
    border-radius: 12px;
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    /* KHÔNG dùng overflow:hidden ở đây: thẻ sẽ cắt mất menu thả xuống "Hành động"
       (.dropdown-menu position:absolute) trong ô thao tác của khu quản trị. */
  }
  /* Bo góc thay cho overflow:hidden */
  table.mt-cards > tbody > tr > td:first-child { border-top-left-radius: 12px; border-top-right-radius: 12px; }
  table.mt-cards > tbody > tr > td:last-child { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }

  table.mt-cards > tbody > tr > td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* wrap: ô chứa cụm nút thao tác (4-5 nút, không co được) thì xuống dòng dưới nhãn
       thay vì chạy quá mép thẻ ở máy hẹp 320px */
    flex-wrap: wrap;
    gap: 12px;
    width: auto !important;
    max-width: none !important;
    padding: 8px 12px;
    /* thắng .table-bordered và border-color của theme-skin */
    border: 0 !important;
    border-bottom: 1px dashed var(--bs-border-color, #e9edf2) !important;
    /* tắt sọc của .table-striped và nền hover: trong layout thẻ chúng tạo mảng màu lạ */
    background-color: transparent !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-align: right;
  }

  table.mt-cards > tbody > tr > td:last-child { border-bottom: 0 !important; }

  table.mt-cards > tbody > tr > td::before {
    content: attr(data-label);
    flex: 0 0 38%;
    min-width: 0;
    text-align: left;
    font-weight: 600;
    font-size: .82rem;
    line-height: 1.35;
    color: var(--bs-secondary-color, #64748b);
  }

  /* Ô dài (JS gắn .mt-long khi nội dung > 45 ký tự): nhãn nằm trên, nội dung xuống dòng
     và canh trái cho dễ đọc thay vì ép vào cột 62% rồi vỡ thành nhiều dòng lệch phải. */
  table.mt-cards > tbody > tr > td.mt-long {
    display: block;
    text-align: left;
  }
  table.mt-cards > tbody > tr > td.mt-long::before {
    display: block;
    margin-bottom: 2px;
  }

  /* Ô không có nhãn: cột checkbox chọn dòng, cột gộp, dòng "không có dữ liệu" của DataTables. */
  table.mt-cards > tbody > tr > td:not([data-label]) {
    justify-content: center;
    text-align: center;
  }
  table.mt-cards > tbody > tr > td:not([data-label])::before { content: none; }
  table.mt-cards > tbody > tr > td:empty { display: none; }

  table.mt-cards > tbody > tr > td.dataTables_empty {
    justify-content: center;
    text-align: center;
    color: var(--bs-secondary-color, #64748b);
  }

  /* Bỏ max-width inline trong view (vd style="max-width:300px") để nội dung dùng trọn bề ngang thẻ. */
  table.mt-cards > tbody > tr > td > * { max-width: 100% !important; }

  /* Các lớp cắt chữ thành "..." (.text-truncate của Bootstrap, .text-truncate-custom tự đặt
     trong view quản lý file...) sinh ra vì bảng ngang hẹp; trong thẻ đủ chỗ nên cho hiện trọn. */
  table.mt-cards > tbody > tr > td [class*="truncate"] {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
  }

  /* Ô dài mà còn giữ .text-nowrap sẽ chạy quá mép thẻ — chỉ ô dài mới bỏ nowrap,
     ô ngắn (ngày giờ, badge) vẫn giữ nguyên một dòng. */
  table.mt-cards > tbody > tr > td.mt-long .text-nowrap { white-space: normal !important; }

  /* Cụm nút thao tác: xuống dòng trong thẻ thay vì tràn ra ngoài. */
  table.mt-cards > tbody > tr > td .btn-group,
  table.mt-cards > tbody > tr > td > .d-flex {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  table.mt-cards > tbody > tr > td.mt-long .btn-group,
  table.mt-cards > tbody > tr > td.mt-long > .d-flex { justify-content: flex-start; }

  /* ==========================================================================
     THẺ THU GỌN — bảng quản trị có tới 24 cột, để nguyên thì mỗi thẻ cao ~1000px.
     JS (mobile-tables.js) đánh dấu ô phụ bằng .mt-extra và đặt data-mt-more cho hàng.
     Bấm vào thẻ để mở/đóng.
     ========================================================================== */
  table.mt-cards > tbody > tr.mt-collapsed > td.mt-extra { display: none !important; }

  table.mt-cards > tbody > tr.mt-collapsible::after {
    content: attr(data-mt-more);
    display: block;
    padding: 9px 12px;
    text-align: center;
    font-size: .82rem;
    font-weight: 600;
    color: var(--bs-link-color, #4f46e5);
    border-top: 1px dashed var(--bs-border-color, #e9edf2);
    cursor: pointer;
  }

  /* ==========================================================================
     THANH SẮP XẾP — thay cho việc bấm tiêu đề cột (đã ẩn ở layout thẻ). JS chỉ dựng
     thanh này cho bảng DataTables có cột sắp xếp được.
     ========================================================================== */
  .mt-sortbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
  }
  .mt-sortbar__label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #64748b);
    white-space: nowrap;
  }
  .mt-sortbar__select {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }
  /* [13/10/2026] Thêm inline-flex + canh giữa. Trước đó .btn là inline-block, nên khi min-height
     (38px ở đây, 34px từ .btn-sm trong head-css) kéo hộp cao hơn dòng chữ, cái line box 12px vẫn
     nằm SÁT MÉP TRÊN — mũi tên ▲/▼ dính lên đỉnh nút và chừa một khoảng trống phía dưới, nhìn như
     bị lệch hàng. Đo được trên 27 trang admin có bảng chuyển sang layout thẻ ở điện thoại. */
  .mt-sortbar__dir {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 38px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ==========================================================================
     [PHỤ] Hai lỗi kéo ngang CÓ SẴN từ trước (không liên quan bảng), sửa theo yêu cầu 21/09.
     ========================================================================== */

  /* 1) /admin/files và các trang admin có thanh công cụ trong card-header: cụm select/nút
        rộng 551px không xuống dòng -> đẩy div.page ra 592px -> header cố định (inset 0/0)
        giãn theo, làm cả trang kéo ngang được 202px. Cho cụm này xuống dòng và ô chọn co lại. */
  .card-header.d-flex { flex-wrap: wrap; gap: 8px; }
  .card-header .d-flex { flex-wrap: wrap; }
  .card-header .form-select,
  .card-header .form-control {
    width: auto !important; /* thắng style="width: 150px" viết thẳng trong view */
    min-width: 0;
    flex: 1 1 140px;
  }

  /* 2) Vài trang khu người dùng kéo ngang được 2px: trình duyệt di động nới khung bố cục
        theo nội dung tràn, khiến thanh điều hướng dưới (fixed, inset 0) đo được 392px trong
        màn 390px rồi giữ luôn phần tràn đó. Chặn ở tầng html (body không ăn vì phần tràn
        nằm ở khung bố cục). Dùng clip chứ KHÔNG dùng hidden để không phá position: sticky;
        trình duyệt cũ không hiểu clip thì bỏ qua, vô hại. */
  html { overflow-x: clip; }
}