/*
 * Bố cục điện thoại dùng chung cho Trung Tâm (index.html nạp) và các module (máy chủ chèn vào <style> của module — server/routes/apps.js).
 * Không dùng biến màu: mỗi module đặt tên biến khác nhau; màu ở đây khớp bảng màu chung (slate).
 *
 * Bảng → thẻ (≤ 700px): mobile.js gắn lớp `m-cards` cho bảng và `data-label` = tên cột cho từng ô. Mỗi dòng thành 1 thẻ, mỗi ô là
 * "tên cột (chữ nhỏ) / giá trị" xếp 2 cột; ô tiêu đề (m-title), ô dài (m-full) và hàng nút (m-act) chiếm cả dòng.
 */
@media (max-width: 700px) {
  .m-cards-wrap { overflow: visible !important; max-height: none !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; }
  table.m-cards { display: block; width: 100%; min-width: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important; }
  table.m-cards > thead { display: none !important; }
  table.m-cards > tbody, table.m-cards > tfoot { display: block; width: 100%; }
  table.m-cards > * > tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9px 14px; align-items: start; position: relative;
    width: 100%; margin: 0 0 10px; padding: 12px 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }
  table.m-cards > * > tr > td, table.m-cards > * > tr > th {
    display: block; min-width: 0 !important; max-width: none !important; width: auto !important; height: auto !important;
    padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; position: static;
    text-align: left !important; white-space: normal !important; overflow: visible !important; overflow-wrap: anywhere;
    font-size: 14px; line-height: 1.4;
  }
  table.m-cards > * > tr > td[data-label]::before {
    content: attr(data-label); display: block; margin: 0 0 1px; font-size: 11px; font-weight: 600; line-height: 1.3;
    letter-spacing: 0.01em; text-transform: none; color: #64748b; white-space: normal;
  }
  /* Bảng nhiều ô ngắn (mã, kích thước, số lượng…): 3 cột cho thẻ thấp hơn — màn hình rất hẹp (< 360px) vẫn 2 cột */
  @media (min-width: 360px) {
    table.m-cards.m-cols3 > * > tr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; }
  }
  table.m-cards > * > tr > td.m-title { grid-column: 1 / -1; order: -2; font-size: 15px; font-weight: 700; color: #0f172a; }
  table.m-cards > * > tr > td.m-title::before { display: none; }
  table.m-cards > * > tr > td.m-full { grid-column: 1 / -1; }
  table.m-cards > * > tr > td.m-hide, table.m-cards > * > tr > td.m-nil { display: none !important; }
  /* Hàng nút thao tác ở đáy thẻ: nút to, chia đều */
  table.m-cards > * > tr > td.m-act {
    grid-column: 1 / -1; order: 9; display: flex !important; flex-wrap: wrap; gap: 8px; align-items: center;
    margin-top: 2px; padding-top: 10px !important; border-top: 1px solid #e2e8f0 !important;
  }
  table.m-cards > * > tr > td.m-act > * { flex: 1 1 0; justify-content: center; width: auto !important; margin: 0 !important; min-height: 38px; text-align: center; white-space: nowrap; }
  table.m-cards > * > tr > td.m-act > button, table.m-cards > * > tr > td.m-act > a { border: 1px solid #cbd5e1; border-radius: 9px; }
  table.m-cards > * > tr > td.m-act:empty { display: none !important; }
  /* Ô chọn dòng: góc trên bên phải; ảnh sản phẩm: bên trái tiêu đề */
  table.m-cards > * > tr > td.m-check { position: absolute; top: 12px; right: 12px; z-index: 1; }
  table.m-cards > * > tr > td.m-check input { width: 20px; height: 20px; margin: 0; }
  table.m-cards > * > tr.m-has-check > td.m-title { padding-right: 34px !important; }
  table.m-cards > * > tr > td.m-thumb { position: absolute; top: 12px; left: 14px; width: 44px; height: 44px; }
  table.m-cards > * > tr > td.m-thumb img { width: 44px !important; height: 44px !important; border-radius: 8px; object-fit: cover; display: block; }
  table.m-cards > * > tr.m-has-thumb > td.m-title { padding-left: 56px !important; min-height: 46px; }
  /* Dòng 1 ô gộp cột (chưa có dữ liệu, phần chi tiết mở rộng) */
  table.m-cards > * > tr.m-span { display: block; }
  table.m-cards > * > tr.m-span > td { padding: 4px 0 !important; }
  table.m-cards > tfoot > tr { background: #f8fafc; border-color: #cbd5e1; font-weight: 600; }
}