/* ffm.css — lớp riêng của FFM. Tệp MỚI, không sửa đè tokens.css/base.css (luật 2).
   Mọi màu đi qua var(--…), không viết mã màu thẳng (luật 1). */

/* ── Khung trang: một cột trên điện thoại, hai cột từ tablet trở lên ── */
.app { min-height:100vh; display:flex; flex-direction:column; }

.topbar {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  background:var(--bg-sidebar); color:var(--text-inverse);
  box-shadow:var(--shadow-sm);
}
.topbar h1 { font-size:var(--text-md); margin:0; font-weight:600; flex:1; }
.topbar .who { font-size:var(--text-sm); color:var(--text-sidebar); }
@media (max-width:600px){ .topbar .who { display:none; } }

.tabs { display:flex; gap:var(--space-1); padding:var(--space-2) var(--space-4) 0;
  background:var(--bg-sidebar); overflow-x:auto; }
.tabs button {
  flex:0 0 auto; border:0; background:transparent; color:var(--text-sidebar);
  padding:var(--space-3) var(--space-4); font-size:var(--text-base); font-weight:500;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0; cursor:pointer;
  transition:background var(--transition), color var(--transition);
}
.tabs button.on { background:var(--bg-app); color:var(--text-primary); font-weight:600; }
@media (hover:hover){ .tabs button:not(.on):hover { background:var(--bg-sidebar-hover); color:var(--text-inverse); } }

.main { flex:1; padding:var(--space-4); max-width:1280px; width:100%; margin:0 auto; }
@media (max-width:640px){ .main { padding:var(--space-3); } }

/* Hai cột từ tablet: quét bên trái, danh sách bên phải */
.split { display:grid; gap:var(--space-4); grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .split { grid-template-columns:minmax(0,420px) minmax(0,1fr); } }

/* ── Thẻ ── */
.card { background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:var(--space-4); box-shadow:var(--shadow-xs);
  margin-bottom:var(--space-4); }
.card > h2 { margin:0 0 var(--space-3); font-size:var(--text-xs); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }

/* ── Điều khiển ── */
.row { display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center; }
.row > .grow { flex:1; min-width:150px; }
input, select, textarea {
  font:inherit; color:var(--text-primary); background:var(--bg-surface);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:var(--space-3); width:100%;
}
/* Ô quét: to, dễ nhìn, dễ chạm — nhân viên đứng ở kho dùng máy chít */
.scan-input { font-family:var(--font-mono); font-size:var(--text-lg); letter-spacing:.06em; }
button.btn {
  font:inherit; font-weight:600; cursor:pointer; white-space:nowrap;
  border:1px solid var(--border-strong); background:var(--bg-surface); color:var(--text-primary);
  border-radius:var(--radius-sm); padding:var(--space-3) var(--space-4);
  transition:background var(--transition), border-color var(--transition);
  min-height:44px;                    /* vùng chạm tối thiểu trên tablet/điện thoại */
}
button.btn-pri { background:var(--accent); border-color:var(--accent); color:var(--text-inverse); }
button.btn-ok  { background:var(--success); border-color:var(--success); color:var(--text-inverse); }
button.btn-del { color:var(--danger); border-color:var(--danger-border); background:var(--danger-soft); }
button.btn-sm  { padding:var(--space-2) var(--space-3); min-height:36px; font-size:var(--text-sm); }
@media (hover:hover){ button.btn:hover { background:var(--neutral-100); }
  button.btn-pri:hover { background:var(--accent-hover); }
  button.btn-ok:hover  { filter:brightness(.94); } }

/* ── Bảng: cuộn ngang trên hẹp, KHÔNG để cả trang trượt ── */
.tw { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--bg-surface); }
table { border-collapse:collapse; width:100%; font-size:var(--text-sm); }
th, td { padding:var(--space-3); text-align:left; border-bottom:1px solid var(--border);
  vertical-align:top; }
thead th { background:var(--bg-raised); color:var(--text-muted); font-size:var(--text-xs);
  text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; position:sticky; top:0; }
tbody tr:last-child td { border-bottom:0; }
@media (hover:hover){ tbody tr:hover { background:var(--accent-soft); } }

/* Trên điện thoại: bảng lô đổi thành thẻ xếp dọc, khỏi cuộn ngang tìm nút */
@media (max-width:700px){
  .stack thead { display:none; }
  .stack, .stack tbody, .stack tr, .stack td { display:block; width:100%; }
  .stack tr { border-bottom:1px solid var(--border); padding:var(--space-3) 0; }
  .stack td { border:0; padding:var(--space-1) var(--space-3); }
  .stack td::before { content:attr(data-th); display:block; font-size:var(--text-xs);
    text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); }
}

/* ── Nhãn trạng thái ── */
.chip { display:inline-block; padding:2px var(--space-2); border-radius:var(--radius-pill);
  font-size:var(--text-xs); font-weight:700; border:1px solid transparent; white-space:nowrap; }
.chip-ok   { background:var(--success-soft); color:var(--success); border-color:var(--success-border); }
.chip-wait { background:var(--warning-soft); color:var(--warning); border-color:var(--warning-border); }
.chip-err  { background:var(--danger-soft);  color:var(--danger);  border-color:var(--danger-border); }
.chip-info { background:var(--accent-soft);  color:var(--accent);  border-color:var(--accent-border); }
.chip-off  { background:var(--neutral-100);  color:var(--text-muted); border-color:var(--border); }

/* ── Thông báo ── */
.msg { padding:var(--space-3); border-radius:var(--radius-sm); font-size:var(--text-base);
  margin-top:var(--space-3); border:1px solid transparent; }
.msg-ok   { background:var(--success-soft); color:var(--success); border-color:var(--success-border); }
.msg-warn { background:var(--warning-soft); color:var(--warning); border-color:var(--warning-border); }
.msg-err  { background:var(--danger-soft);  color:var(--danger);  border-color:var(--danger-border); }

.muted { color:var(--text-muted); font-size:var(--text-sm); }
.lo-ma { font-family:var(--font-mono); font-weight:700; color:var(--accent); font-size:var(--text-md); }

/* ── Hộp thoại ── */
.modal { position:fixed; inset:0; background:rgba(20,26,35,.5); z-index:50;
  display:flex; align-items:center; justify-content:center; padding:var(--space-4); }
.modal > div { background:var(--bg-surface); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); width:100%; max-width:480px; padding:var(--space-5);
  max-height:90vh; overflow:auto; }

/* ── Chọn khi mã vạch trùng ── */
.pick { border:1px solid var(--warning-border); background:var(--warning-soft);
  border-radius:var(--radius-sm); padding:var(--space-3); margin-top:var(--space-3); }
.pick button { display:block; width:100%; text-align:left; margin-bottom:var(--space-2); }

/* ══════════════════════════════════════════════════════════════════
   Sửa theo cách người ở kho dùng thật (17/08/2026)
   ══════════════════════════════════════════════════════════════════ */

/* Ô quét BÁM TRÊN khi cuộn. Danh sách đã kiểm dài ra rất nhanh, và ở kho người
   ta cầm máy quét bằng một tay — cuộn ngược lên tìm ô nhập là một thao tác thừa
   lặp lại hàng trăm lần mỗi ca. */
@media (min-width:900px){
  #c-scan { position:sticky; top:var(--space-3); z-index:5; }
}

/* Hàng nút trong bảng lô: giờ có tới 5 nút (Quét tiếp · Xem · Chốt · Sửa · Xoá).
   Không cho xuống dòng thì hàng tràn ngang và nút cuối rơi khỏi màn hình. */
#tb-lo .row, #tb-p1 .row { flex-wrap:wrap; gap:var(--space-2); }
#tb-lo .btn-sm, #tb-p1 .btn-sm { flex:0 0 auto; }

/* Nút chính trong hàng phải NHÌN RA NGAY là việc hay làm nhất. */
#tb-lo .btn-pri, #tb-p1 .btn-pri { box-shadow:var(--shadow-xs); }

/* Chip trạng thái: đọc được từ xa một sải tay, vì người ta nhìn màn hình
   trong lúc tay đang bê hàng chứ không ngồi sát. */
.chip { font-size:var(--text-sm); padding:.25em .7em; font-weight:600; }

/* Dòng đã kiểm: số lượng là thứ mắt tìm trước nhất khi đối chiếu với thùng hàng. */
#tb td.num, #tb-pt td.num { font-variant-numeric:tabular-nums; font-weight:600; }

/* Hàng quá hạn / lệch phải nhảy ra khỏi bảng, không chìm vào các dòng khác. */
tr.canh-bao td { background:var(--danger-soft, #fff1f0); }

/* Hộp thoại: trên điện thoại phải cuộn được, không thì nút dưới cùng nằm
   ngoài màn hình và người ta không đóng được. */
.modal > div { max-height:88vh; overflow-y:auto; }
.modal .row { flex-wrap:wrap; }