/* Môi trường: nhãn nguồn số liệu, số đo mới nhất theo nguồn, số đo tự khai trong làn môi trường.
   Chỉ dùng biến màu khai báo trong app.css (--src-*, --ln-*, --line, --muted); trang QR (.tr-sheet) đổi giá trị biến. */

/* Nhãn nguồn */
.src-tag { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px var(--sp8); border-radius: var(--r-xs); font-size: var(--fs-xs); font-weight: 600; line-height: 1.35;
  border: 1px solid var(--src-plain-line); background: var(--src-plain-bg); color: var(--src-plain-fg); overflow-wrap: anywhere; vertical-align: middle; font-style: normal; }
.src-ok { border-color: var(--src-ok-line); background: var(--src-ok-bg); color: var(--src-ok-fg); }
.src-info { border-color: var(--src-info-line); background: var(--src-info-bg); color: var(--src-info-fg); }
.src-plain { border-color: var(--src-plain-line); background: var(--src-plain-bg); color: var(--src-plain-fg); }
.src-self { border: 1.5px dashed var(--src-self-line); background: var(--src-self-bg); color: var(--src-self-fg); }
.viz-legend .src-tag { font-size: var(--fs-xs); }

/* Số đo mới nhất tại khu, theo từng nguồn */
.env-latest { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 8px; }
.env-latest-h { grid-column: 1 / -1; font-weight: 600; font-size: var(--fs-sm); }
.env-src { min-width: 0; padding: var(--sp8); border-radius: 14px; border: 1px solid var(--src-plain-line); background: var(--src-card); }
.env-src.env-self { border: 1.5px dashed var(--src-self-line); background: var(--src-self-bg); }
.env-src-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.env-src-h .tiny { color: var(--src-self-fg); }
.src-dev { margin-top: var(--sp8); min-width: 0; }
.src-dev + .src-dev { border-top: 1px solid var(--src-plain-line); padding-top: var(--sp8); }
.src-dev-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp8); font-size: var(--fs-sm); }
.src-dev-h b { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.src-dev-h time { flex: none; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.tr-sheet .src-dev-h time { color: var(--ink-3); }
.src-vals { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.src-vals span { font-size: var(--fs-xs); padding: 2px var(--sp8); border-radius: 99px; background: var(--src-chip); border: 1px solid var(--src-plain-line); overflow-wrap: anywhere; }
.src-vals span.lech { border-color: var(--src-self-line); }
.src-dev .src-lech { margin-top: var(--sp4); padding: var(--sp6) var(--sp8); font-size: var(--fs-xs); overflow-wrap: break-word; }

/* Bảng theo ngày × chỉ số × nguồn */
.env-sd td .src-tag { font-size: var(--fs-xs); padding: 1px var(--sp6); white-space: nowrap; }
.env-sd td small { display: block; color: var(--viz-text); font-size: var(--fs-xs); white-space: normal; }
.env-sd th:last-child { white-space: normal; }
.env-sd td:nth-child(2), .env-sd th:nth-child(2), .env-sd td:nth-child(3), .env-sd th:nth-child(3) { text-align: left; }
.env-sd td:nth-child(3) { white-space: normal; min-width: 64px; }

/* Làn môi trường của dòng thời gian song song */
/* Dòng nguồn dữ liệu: ở cỡ “Rất lớn” @320px tên nguồn “Dịch vụ thời tiết (Open-Meteo)” dài 322px
   trong ô .lane rộng 270px — chữ vượt QUA mép phải màn hình 2,2px và không tổ tiên nào cuộn ngang
   được, nên phần thò ra bị màn hình cắt mất. Cho phép ngắt giữa chuỗi khi không còn chỗ. */
.lanes-src { margin: 0 0 var(--sp4); font-size: var(--fs-xs); line-height: 1.6; color: var(--ln-muted); min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.lanes-src > span { white-space: nowrap; }
@media (max-width: 430px) { .lanes-src > span { white-space: normal; } }
.lanes-src .term, .lanes-src a { overflow-wrap: anywhere; }
.lanes-src .src-tag { font-size: var(--fs-xs); padding: 0 var(--sp6); }
.src-tag .ls { display: none; }
.lane-none { font-size: var(--fs-xs); color: var(--ln-muted); text-align: center; border: 1px dashed var(--ln-line); border-radius: 12px; padding: 8px; }
.lane-none .ad { display: none; }
.env-chips .src-wx { background: transparent; border-style: dashed; color: var(--ln-muted); font-size: var(--fs-xs); }
.lane-env .env-src { margin-top: 8px; padding: 0; border: 0; background: none; border-radius: 0; }
.lane-env .src-tag, .lane-self .src-tag { font-size: var(--fs-xs); padding: 1px var(--sp6); }
.lane-env .src-line, .lane-self .src-line { font-size: var(--fs-xs); margin-top: 3px; }
.lane-env .src-line .tiny { color: var(--ln-muted); font-size: var(--fs-xs); }
/* số đo tự khai: ô riêng trong cột môi trường, ngay dưới ô thời tiết; làn hẹp thì trải hết bề ngang dưới hàng */
.lane-row:has(> .lane-self) { grid-template-rows: auto 1fr; }
.lane-row:has(> .lane-self) > .lane-f { grid-row: 1 / span 2; }
.lane-self { grid-column: 2; min-width: 0; padding: var(--sp8); border: 1.5px dashed var(--src-self-line); border-radius: var(--r-xs); background: var(--src-self-bg); font-size: var(--fs-sm); overflow-wrap: break-word; }
.lane-self > .tiny { color: var(--src-self-fg); font-size: var(--fs-xs); }
.self-item { margin-top: 5px; }
.self-item + .self-item { border-top: 1px dashed var(--src-self-line); padding-top: 6px; }
.self-item.void { opacity: .55; }
.self-item.void .src-line { text-decoration: line-through; }
.self-meta { color: var(--ln-muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.self-item .lane-flag { margin-top: var(--sp4); padding: var(--sp6); font-size: var(--fs-xs); }
/* làn hẹp (điện thoại): nhãn nguồn rút gọn (chú thích đầy đủ ở đầu dòng thời gian), ẩn khoảng thấp–cao */
@container lanes (max-width: 480px) {
  .lane-env .src-tag .lf, .lane-self .src-tag .lf { display: none; }
  .lane-env .src-tag .ls, .lane-self .src-tag .ls { display: inline; }
  .lane-env .src-line .rng { display: none; }
}
@container lanes (max-width: 300px) {
  .lane-row > .lane-self { grid-column: 1 / -1; }
  .lane-row:has(> .lane-self) { grid-template-rows: none; }
  .lane-row:has(> .lane-self) > .lane-f { grid-row: auto; }
  .lane-none .ar { display: none; }
  .lane-none .ad { display: inline; }
}
@container lanes (max-width: 260px) {
  .lane-env .src-tag .si { display: none; }
  .lane-env .src-tag .ls { white-space: nowrap; }
}
.env-self .ph { display: flex; gap: 5px; margin-top: 6px; overflow-x: auto; scroll-snap-type: x mandatory; }
.env-self .ph img { flex: none; width: 100%; max-width: 160px; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 8px; cursor: zoom-in; scroll-snap-align: start; }
.env-self .ph.multi img { width: calc(100% - 18px); }

/* Đầu thẻ môi trường trên trang lô: tiêu đề + nút (nhập số đo tay, bản đồ độ phủ xanh, cập nhật) */
.env-head { flex-wrap: wrap; align-items: flex-start; }
.env-head h2 { flex: 1 1 240px; min-width: 0; }
/* Hàng số liệu tổng của khối môi trường (5 chip): lưới ô BẰNG NHAU, ô lẻ cuối trải hết hàng — hết cảnh
   “39 ngày” đứng trơ một mình ở dòng thứ ba. Màn rộng xếp bao nhiêu chip vừa một hàng thì xếp. */
.env-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-grid); margin: 0 0 var(--sp12); }
.env-totals > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.env-totals .badge { max-width: 100%; white-space: normal; justify-content: flex-start; border-radius: var(--r-sm); min-height: 32px; }
@media (min-width: 640px) {
  .env-totals { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .env-totals > :last-child:nth-child(odd) { grid-column: auto; }
}
.env-actions { display: flex; flex-wrap: wrap; gap: var(--gap-grid); }
.env-actions form { margin: 0; }
@media (max-width: 640px) {
  /* ba ô CAO BẰNG NHAU và đúng bậc --h-btn (48px) — trước đây 47px, ba bề rộng khác nhau */
  .env-actions { width: 100%; flex-wrap: nowrap; align-items: stretch; }
  .env-actions > .btn { flex: 1 1 0; min-width: 0; white-space: normal; text-align: center; line-height: 1.2; padding: var(--sp4) var(--sp8); min-height: var(--h-btn); }
  /* cột hẹp: bỏ biểu tượng, để trọn bề ngang cho chữ — nhãn “Nhập số đo tay” vừa một dòng như nút bên cạnh */
  .env-actions > .btn :is(.i, .btn-emo) { display: none; }
  .env-actions > form { flex: none; margin-left: auto; display: flex; }
  .env-actions .env-upd { width: var(--h-btn); min-height: var(--h-btn); padding: 0; }
  .env-actions .env-upd span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* Trang khu sản xuất (/app/khu) — cùng một thang kích thước với app.css.
   Hàng nút dùng khuôn .btn-grid (2 ô bằng nhau, món lẻ cuối trải hết hàng) nên bỏ phần grid tự đặt ở đây;
   chỉ giữ cách xuống dòng của nhãn dài và đệm nút. */
/* .site-cols nay chỉ là .flow (app.js chia cột theo bề ngang thật); giữ tên lớp cho các quy tắc riêng của trang khu */
.site-cols { align-items: start; }
.site-links > .btn { white-space: normal; text-align: center; line-height: 1.2; padding: var(--sp8) var(--sp12); }
/* Nhãn thông tin của khu: xếp thành cột đều nhau (mỗi nhãn một ô trải hết bề ngang) thay vì mỗi nhãn một bề rộng
   khác nhau rồi xuống dòng lởm chởm; từ 480px trở lên chia hai cột, ô cuối lẻ trải hết hàng. */
.site-env { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp6); grid-auto-rows: 1fr; }
.site-env .badge { max-width: 100%; white-space: normal; border-radius: var(--r-sm); justify-content: flex-start; min-height: 32px; }
@media (min-width: 480px) {
  .site-env { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-env > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Tên khu: đúng bậc “tiêu đề thẻ” (18px) như mọi tiêu đề thẻ khác */
.site-name { margin: 0; font-size: var(--fs-h2); overflow-wrap: anywhere; }
/* Ví dụ lệnh gửi số đo theo cách cũ: khối mã, đệm theo thang chung */
.site-curl { white-space: pre-wrap; padding: var(--sp12); }

/* QUYẾT ĐỊNH (quy tắc 10): cột thẻ khu GIỮ MỘT CỘT ở mọi bề rộng, không dùng .flow.
   Lý do: mỗi thẻ khu chứa trọn một biểu mẫu sửa (tên, loại, diện tích, GPS, mã vùng trồng, cảm biến).
   Chia đôi cột ở 1500px làm mỗi ô nhập chỉ còn ~111px — hẹp hơn cả bố cục điện thoại.
   Cột phụ “Thêm khu” đứng riêng bên phải vì là biểu mẫu nhập, cần luôn nhìn thấy khi đọc danh sách khu. */