/* Web GUI ShrimpTek (mục 123 ARCHITECTURE.md) — CSS thuần, mobile-first,
   dùng đúng bảng màu CLR (chế độ Sáng) của app desktop (ui_common.py) để
   đồng bộ nhận diện thương hiệu. */
:root {
  --bg: #f4f7f7; --card: #ffffff; --primary: #0e7c72;
  --text: #16262a; --muted: #64777a; --border: #e1e8e7;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
}
a { color: var(--primary); }

.topbar {
  background: var(--card); border-bottom: 1px solid var(--border);
  padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 10;
}
.topbar-brand { font-weight: 800; color: var(--primary); letter-spacing: .02em; }
.topbar-user { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.topbar-user a { text-decoration: none; font-weight: 600; }

.main-nav {
  background: var(--card); border-bottom: 1px solid var(--border);
  display: flex; gap: 4px; overflow-x: auto; padding: 0 10px; position: sticky; top: 53px; z-index: 9;
}
.main-nav a {
  flex: none; padding: 10px 12px; font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap;
}
.main-nav a:hover { color: var(--primary); }

.content { padding: 16px; max-width: 640px; margin: 0 auto; }
h1 { font-size: 19px; margin: 4px 0 16px; }

.login-card {
  max-width: 360px; margin: 40px auto 0; background: var(--card);
  border: 1px solid var(--border); border-radius: 10px; padding: 24px;
}
.login-card h1 { text-align: center; }
.login-card form { display: flex; flex-direction: column; gap: 14px; }
.login-card label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.login-card input {
  font-size: 16px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px;
}
.login-card button {
  margin-top: 6px; background: var(--primary); color: #fff; border: none; border-radius: 8px;
  padding: 12px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.alert { padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 4px; }
.alert-error { background: #fdecec; color: #9c1218; }

.card-list { display: flex; flex-direction: column; gap: 10px; }
.wh-card {
  display: block; background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px; text-decoration: none; color: var(--text); font-weight: 600; font-size: 16px;
}
.wh-card:active { background: var(--bg); }

.back-link { display: inline-block; margin-bottom: 10px; text-decoration: none; font-size: 14px; }
.search-form { display: flex; gap: 8px; margin-bottom: 12px; }
.search-form input {
  flex: 1; font-size: 16px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
}
.search-form button {
  padding: 10px 16px; border: none; border-radius: 8px; background: var(--primary); color: #fff;
  font-weight: 600;
}
.stock-summary { font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.stock-list { display: flex; flex-direction: column; gap: 8px; }
.stock-row {
  display: flex; justify-content: space-between; align-items: center; background: var(--card);
  border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px;
}
.stock-row-name { font-weight: 600; font-size: 14.5px; }
.stock-row-code { font-size: 12px; color: var(--muted); margin-top: 2px; }
.stock-row-qty { font-weight: 700; color: var(--primary); font-size: 15px; white-space: nowrap; }
.empty { color: var(--muted); text-align: center; padding: 30px 0; }

/* ==================== Thành phần dùng chung: form/nút/badge/thẻ ==================== */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tab-link {
  padding: 8px 14px; border-radius: 8px; text-decoration: none; font-size: 13.5px; font-weight: 600;
  background: var(--card); border: 1px solid var(--border); color: var(--muted);
}
.tab-link.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.btn {
  display: inline-block; padding: 11px 18px; border-radius: 8px; border: none; font-size: 15px;
  font-weight: 700; text-decoration: none; text-align: center; cursor: pointer; font-family: inherit;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-secondary { background: var(--card); color: var(--text); border: 1px solid var(--border); }
.btn-danger { background: #fdecec; color: #9c1218; border: 1px solid #f6c9c9; }
.btn-block { display: block; width: 100%; margin-top: 6px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.form-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 18px;
}
.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; font-size: 16px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  font-family: inherit; background: #fff; color: var(--text);
}
.form-row textarea { resize: vertical; min-height: 70px; }
.form-hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.radio-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.radio-row label { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text); font-weight: 500; }
fieldset.form-section {
  border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin: 0 0 14px;
  min-width: 0; /* <fieldset> mặc định min-width:min-content của trình duyệt — PHỚT LỜ
    overflow-x:auto của bảng con (`.table-scroll` bên trong), ép cả trang giãn rộng ra
    theo đúng bề ngang bảng thay vì để bảng tự cuộn (lỗi thật mục 135 ARCHITECTURE.md,
    người dùng chụp ảnh bố cục bị lệch/giãn sau khi thêm hàng — do min-width:480px vừa
    thêm ở mục 134 cho bảng). Ép min-width:0 để fieldset chịu co lại đúng theo khung cha. */
}
fieldset.form-section legend { padding: 0 6px; font-size: 13px; font-weight: 700; color: var(--primary); }
.parts-row { display: grid; grid-template-columns: 1fr 70px; gap: 8px; margin-bottom: 8px; }

/* Khối "Thêm hàng hóa" (sale_form.html/quote_form.html) — mỗi ô chọn XUỐNG
   DÒNG RIÊNG, to, dễ bấm trên điện thoại (mục 126 ARCHITECTURE.md, người
   dùng phản hồi ô chọn máy/serial quá nhỏ khó bấm) — KHÁC hẳn hàng ngang
   chật hẹp trước đó. font-size 16px (không phải 13-15px) để tránh Safari/
   Chrome iOS tự động zoom vào field khi focus (hành vi mặc định của mọi
   trình duyệt di động với input <16px, gây khó chịu ngoài ý muốn). */
.add-item-field { margin-bottom: 10px; }
.add-item-field select, .add-item-field input {
  width: 100%; font-size: 16px; padding: 13px 12px; border: 1px solid var(--border);
  border-radius: 8px; background: #fff; color: var(--text); font-family: inherit;
}
.add-item-row-inline { display: flex; gap: 8px; margin-bottom: 10px; }
.add-item-row-inline > div { flex: 1; }
.add-item-row-inline label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
.add-item-row-inline input { width: 100%; font-size: 16px; padding: 13px 12px; border: 1px solid var(--border); border-radius: 8px; }
#add-btn { width: 100%; padding: 13px; font-size: 15px; margin-bottom: 4px; }
.btn-remove {
  border: none; background: #fdecec; color: #9c1218; border-radius: 6px; padding: 7px 11px;
  font-size: 13px; font-weight: 700; cursor: pointer; min-height: 32px;
}

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge-amber { background: #fdf3e0; color: #9a6b00; }
.badge-teal { background: #e3f6f3; color: #0e6b62; }
.badge-green { background: #e6f6ec; color: #147a3f; }

.case-list { display: flex; flex-direction: column; gap: 10px; }
.case-card {
  display: block; background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px; text-decoration: none; color: var(--text);
}
.case-card .code { font-weight: 800; color: var(--primary); font-size: 14.5px; }
.case-card .sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.case-card .meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }

.detail-box { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 14px; }
.detail-box .row {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px;
  padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px;
}
.detail-box .row:last-child { border-bottom: none; }
.detail-box .row .lbl { color: var(--muted); }
.detail-box .row .val { font-weight: 600; text-align: right; word-break: break-word; max-width: 100%; }

.pdf-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pdf-list a {
  display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; text-decoration: none; color: var(--text); font-size: 14px; font-weight: 600;
}

/* Bảng dữ liệu (danh sách hàng hóa...) có thể nhiều cột hơn bề ngang màn
   hình điện thoại nhỏ — LUÔN bọc trong `.table-scroll` để chính cái bảng
   tự cuộn ngang trong khung của nó, KHÔNG để tràn ra làm vỡ bố cục cả
   trang (mục 134 ARCHITECTURE.md, người dùng phản hồi định dạng bị lỗi
   khi màn hình dãn/thu nhỏ). */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 10px 0; }
table.item-table { width: 100%; min-width: 480px; border-collapse: collapse; margin: 0; font-size: 13.5px; }
table.item-table th, table.item-table td { border: 1px solid var(--border); padding: 7px 8px; text-align: left; }
table.item-table th { background: var(--bg); font-weight: 700; }
table.item-table td.num { text-align: right; white-space: nowrap; }
.total-box { background: var(--bg); border-radius: 8px; padding: 12px 14px; margin-top: 10px; font-size: 14px; }
.total-box .grand { font-weight: 800; color: var(--primary); font-size: 16px; margin-top: 4px; }

/* ==================== Responsive: tự nhận diện cỡ màn hình ====================
   Mobile-first (mặc định ở trên phục vụ điện thoại, đa số người dùng thật) —
   3 mốc dưới đây CHỈ nới rộng/co lại cho phù hợp máy tính bảng/PC khi trình
   duyệt đủ rộng, và siết lại cho điện thoại đời cũ/màn hình rất nhỏ. */

/* Điện thoại màn hình rất nhỏ (≤360px, VD các dòng máy cũ/giá rẻ) — thu gọn
   khoảng đệm, gộp Số lượng/Đơn giá xuống 1 cột (2 cột ngang ở size 16px dễ
   bị chật, tràn) thay vì đứng cạnh nhau. */
@media (max-width: 360px) {
  .content { padding: 12px; }
  .add-item-row-inline { flex-direction: column; gap: 10px; }
  h1 { font-size: 17px; }
}

/* Máy tính bảng/PC màn hình vừa (≥640px) — nới khung nội dung rộng hơn thay
   vì giữ cứng 640px (rất hẹp/lãng phí không gian khi mở bằng trình duyệt
   máy tính, VD quản lý xem trên PC văn phòng cùng mạng LAN). */
@media (min-width: 640px) {
  .content { max-width: 760px; padding: 20px; }
}

/* Màn hình lớn (≥1024px, PC/laptop) — nới thêm 1 nấc nữa, giữ chữ/nút không
   phình to quá mức (font-size các thành phần giữ nguyên, chỉ đổi bề ngang
   khung chứa) — vẫn là bố cục 1 cột đơn giản, không dựng layout nhiều cột
   phức tạp cho desktop (ngoài phạm vi, web này ưu tiên điện thoại field). */
@media (min-width: 1024px) {
  .content { max-width: 920px; }
}