/* ERP ACE — bảng token và kiểu dùng chung.
   Chép từ bản thiết kế: ban-giao/thiet-ke/*.dc.html và mục "Bảng màu và phông chữ"
   trong CLAUDE.md. KHÔNG hardcode màu ở template — mọi màu sống ở đây.
   Sửa tệp này thì bump ?v=N trong base.html, nếu không trình duyệt vẫn dùng bản cũ. */

:root {
  --bg:      #EDF0F4;  /* nền trang */
  --surface: #FFFFFF;  /* thẻ, thanh bên */
  --panel:   #F4F7FA;  /* nền phụ, dòng tổng */
  --raise:   #E6ECF2;  /* nền nổi nhẹ, hover */
  --ink:     #0E151D;  /* chữ chính */
  --soft:    #4C5A69;  /* chữ phụ */
  --faint:   #8090A0;  /* chữ mờ, nhãn nhóm */
  --line:    #D2DAE3;  /* viền */
  --hair:    #E4EAF0;  /* viền mảnh, kẻ bảng */
  --sig:     #1F5FA9;  /* màu nhấn */
  --sigbg:   #E3EDF9;
  --sigink:  #164A85;
  --ok:      #1F7A4D;  --okbg:   #E1F0E8;
  --warn:    #9A6209;  --warnbg: #F7EDD9;
  --bad:     #A93A2C;  --badbg:  #F8E5E1;

  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "IBM Plex Serif", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* Phông tự lưu trong web/static/fonts — app chạy trong xưởng, mạng chập chờn,
   mà toàn bộ bảng số phụ thuộc Plex Mono. Thiếu tệp thì stack dự phòng ở trên
   vẫn đọc được, chỉ xấu hơn. */
/* Mỗi họ có hai tệp: latin và vietnamese. Tách theo unicode-range nên trình
   duyệt chỉ tải phần chữ có dấu khi trang thật sự dùng tới. */
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/static/fonts/IBMPlex-sans-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/static/fonts/IBMPlex-sans-var-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "IBM Plex Serif"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/IBMPlex-serif-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Serif"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/IBMPlex-serif-600-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "IBM Plex Serif"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/IBMPlex-serif-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Serif"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/IBMPlex-serif-700-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/IBMPlex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/IBMPlex-mono-400-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/IBMPlex-mono-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/IBMPlex-mono-600-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 13px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--sig); text-decoration: none; }
a:hover { color: var(--sigink); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* Con số LUÔN dùng mono — đó là thứ làm bảng số đọc được. */
.m, td.num, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sv { font-family: var(--serif); }
.am { color: var(--bad); }             /* số âm trong báo cáo, hiển thị trong ngoặc */

/* ── Khung trang ────────────────────────────────────────────────── */

.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 222px; flex: none;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding: 15px 11px 12px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  scrollbar-width: thin;   /* thanh cuộn mảnh, giữ đủ 222px cho nhãn module */
}

/* Nhãn nhóm là NÚT: bấm để xổ hoặc thu danh sách module bên dưới.
   Mặc định thu, nên bảy nhóm vừa một màn hình không cần cuộn. */
.nav-group {
  display: flex; align-items: center; gap: 6px; width: 100%;
  font-family: var(--sans);
  font-size: 8.5px; font-weight: 600; letter-spacing: .13em;
  color: var(--faint); padding: 6px 6px 4px;
  background: none; border: 0; text-align: left; border-radius: 3px;
}
.nav-group:hover { color: var(--soft); background: var(--panel); }
.nav-group-ten { flex: 1; min-width: 0; }
.nav-group-mui {
  width: 11px; height: 11px; flex: none; stroke-width: 2.2;
  transition: transform .12s ease;
}
.nav-group-mo .nav-group-mui { transform: rotate(90deg); }
.nav-group-mo { color: var(--soft); }
.nav-list { display: flex; flex-direction: column; gap: 1px; }
/* display:flex ở trên đè mất [hidden] của trình duyệt — thiếu dòng này thì
   nhóm thu lại vẫn hiện nguyên. */
.nav-list[hidden] { display: none; }
.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 10px; border-radius: 3px;
  font-size: 12.5px; color: var(--soft);
}
.nav-item:hover { background: var(--raise); color: var(--ink); }
.nav-item svg { width: 15px; height: 15px; flex: none; stroke-width: 1.6; }
.nav-item-active { background: var(--sigbg); color: var(--sig); font-weight: 600; }
.nav-item-todo { color: var(--faint); }   /* module chưa dựng */

.brand { display: flex; align-items: center; gap: 9px; padding: 0 5px 13px; }
.brand-mark {
  width: 28px; height: 28px; border-radius: 3px;
  background: var(--sig); color: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700; font-size: 13px;
}
.brand-name { font-weight: 600; font-size: 13px; letter-spacing: -.01em; }
.brand-sub { font-size: 9px; color: var(--faint); letter-spacing: .03em; }

.who {
  margin-top: auto; display: flex; align-items: center; gap: 9px;
  padding: 10px 6px 0; border-top: 1px solid var(--hair);
}
.who-mark {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--raise); color: var(--soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
}
.who-name { font-size: 12px; font-weight: 500; }
.who-role { font-size: 9.5px; color: var(--faint); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 11px 22px;
}
.topbar h1 { margin: 0; font: 600 15px/1.3 var(--serif); letter-spacing: -.01em; }
.topbar .spacer { margin-left: auto; }

.tabs { display: flex; gap: 2px; background: var(--surface); border-bottom: 1px solid var(--line); padding: 0 22px; }
.tab {
  padding: 7px 12px; font-size: 12px; color: var(--soft);
  border-bottom: 2px solid transparent; background: none; border-width: 0 0 2px;
}
.tab:hover { color: var(--ink); }
.tab-active { color: var(--sig); border-bottom-color: var(--sig); font-weight: 600; }

.content { padding: 14px 22px 18px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.span-2 { grid-column: span 2; }

/* ── Thẻ, nút, huy hiệu ─────────────────────────────────────────── */

/* Thẻ: nền surface, viền 1px, bo 3px, KHÔNG đổ bóng (quy ước CLAUDE.md). */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 3px; padding: 9px 11px; }
.card-tag { font: 600 9.5px/1.4 var(--mono); letter-spacing: .05em; color: var(--faint); text-transform: uppercase; }
.card-title { font: 600 13px/1.4 var(--sans); margin: 2px 0 7px; }
.card-check { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--hair); font-size: 11px; color: var(--faint); }
.card-note { margin-top: 6px; font-size: 11.5px; color: var(--soft); }

.btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--soft);
  border-radius: 2px; padding: 5px 11px; font-size: 11.5px;
}
.btn:hover { border-color: var(--sig); color: var(--sig); }
.btn-primary { background: var(--sig); border-color: var(--sig); color: var(--surface); font-weight: 600; }
.btn-primary:hover { background: var(--sigink); border-color: var(--sigink); color: var(--surface); }
.btn-danger { color: var(--bad); }
.btn-danger:hover { border-color: var(--bad); color: var(--bad); }

/* Huy hiệu đếm việc trên thanh nav — ba mức, không đặt màu inline. */
.badge {
  display: inline-block; margin-left: auto;
  padding: 2px 6px; border-radius: 2px;
  font: 600 9.5px/1.4 var(--mono); letter-spacing: .02em; white-space: nowrap;
}
.badge-mut  { background: var(--raise);  color: var(--soft); }
.badge-warn { background: var(--warnbg); color: var(--warn); }
.badge-bad  { background: var(--badbg);  color: var(--bad); }

/* Nhãn trạng thái do người đặt tự gắn (khác tình trạng hệ thống tính). */
.tag {
  display: inline-block; padding: 2px 7px; border-radius: 2px;
  font: 600 9.5px/1.4 var(--sans); letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap;
}
.tag-uutien     { background: var(--bad);     color: var(--surface); border: 1px solid var(--bad); }
.tag-quantrong  { background: var(--warn);    color: var(--surface); }
.tag-binhthuong { background: var(--bg);      color: var(--soft); }
.tag-cho        { background: var(--surface); color: var(--warn); border: 1px dashed #C9A96A; }
.tag-huy        { background: var(--surface); color: var(--faint); border: 1px solid var(--line); }
/* Đơn hủy VẪN hiện trên bảng — biến mất là chi phí chìm biến mất khỏi báo cáo. */
.is-huy { opacity: .55; }
.is-huy .card-title { text-decoration: line-through; }

.pill-ok   { background: var(--okbg);   color: var(--ok); }
.pill-warn { background: var(--warnbg); color: var(--warn); }
.pill-bad  { background: var(--badbg);  color: var(--bad); }

/* ── Bảng và biểu mẫu ───────────────────────────────────────────── */

table.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.tbl th {
  text-align: left; font: 600 9.5px/1.4 var(--sans); letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint);
  background: var(--panel); border-bottom: 1px solid var(--line);
  padding: 6px 8px; white-space: nowrap;
}
.tbl td { padding: 6px 8px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.tbl tr:hover td { background: var(--panel); }
.tbl .right { text-align: right; }
.tbl tfoot td { font-weight: 600; background: var(--panel); border-top: 1px solid var(--line); }
.tbl-wrap { overflow-x: auto; }

/* Ma trận quyền: nhãn quyền không được xuống dòng từng chữ, và bảng rộng
   thì cuộn ngang trong khung của nó — trang không bao giờ cuộn ngang. */
.tbl-matrix th, .tbl-matrix td { white-space: nowrap; }
.tbl-matrix td:first-child { min-width: 190px; white-space: normal; }
.tbl-matrix th:first-child { min-width: 190px; }
.tbl-matrix td.right, .tbl-matrix th.right { text-align: center; }

/* Dòng tiêu đề nhóm module trong ma trận. Nó mang tên nhóm ở cột trái và một
   nút "Bật cả nhóm" cho mỗi cột hành động — khai 30 module × 5 cột bằng tay
   là việc không ai làm nổi. Chữ để thường, không viết hoa như tiêu đề bảng:
   đây là nhãn nội dung, không phải tên cột. */
.matrix-nhom th {
  background: var(--raise); color: var(--soft);
  text-transform: none; letter-spacing: 0; font-size: 11px;
}
.btn-nho { padding: 2px 6px; font-size: 10px; }

/* Danh sách phạm vi bản ghi kèm giải thích, hiện ngay dưới ô chọn. */
.pham-vi { margin: 4px 0 0; }
.pham-vi dt { font-weight: 600; margin-top: 5px; }
.pham-vi dd { margin: 1px 0 0; }

/* Khối chức danh của từng người trên màn hình Người dùng: mở ra là bảng
   chức danh (kể cả dòng hết hiệu lực) và biểu mẫu thêm dòng kiêm nhiệm. */
.nguoi-chuc-danh { border-top: 1px solid var(--hair); padding: 7px 0; }
.nguoi-chuc-danh > summary { cursor: pointer; font-size: 12.5px; }
.nguoi-chuc-danh[open] > summary { font-weight: 600; margin-bottom: 6px; }

.field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.field label { font-size: 11px; color: var(--soft); }
.field input, .field select, .field textarea {
  border: 1px solid var(--line); border-radius: 2px; background: var(--surface);
  padding: 6px 9px; font-size: 12.5px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--sig); box-shadow: 0 0 0 2px var(--sigbg);
}
.field-error input { border-color: var(--bad); }

.alert { border-radius: 2px; padding: 8px 11px; font-size: 12px; margin-bottom: 12px; }
.alert-bad  { background: var(--badbg);  color: var(--bad); }
.alert-ok   { background: var(--okbg);   color: var(--ok); }
.alert-warn { background: var(--warnbg); color: var(--warn); }

/* ── Trang đăng nhập ────────────────────────────────────────────── */

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-box { width: 320px; background: var(--surface); border: 1px solid var(--line); border-radius: 3px; padding: 22px; }
.login-box h1 { margin: 0 0 4px; font: 600 18px/1.3 var(--serif); }
.login-box .sub { font-size: 11.5px; color: var(--faint); margin-bottom: 16px; }

/* ── Trang module chưa dựng ─────────────────────────────────────── */

.todo-page { max-width: 640px; }
.todo-page h2 { margin: 0 0 2px; font: 600 17px/1.3 var(--serif); }
.todo-slice {
  display: inline-block; margin-bottom: 14px;
  padding: 2px 7px; border-radius: 2px; background: var(--sigbg); color: var(--sigink);
  font: 600 10px/1.5 var(--mono); letter-spacing: .04em;
}
.todo-page dt { font: 600 10px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-top: 12px; }
.todo-page dd { margin: 3px 0 0; font-size: 12.5px; color: var(--soft); }

/* Ghi chú phụ đi kèm một giá trị: tên phòng sau tên chức danh chẳng hạn.
   Không dùng mono vì nó là chữ, không phải con số. */
.soft-note { color: var(--faint); }

/* ── Mặt hàng và định mức thời gian máy (lát M1) ─────────────────── */

/* Hai nút cạnh nhau trong một ô bảng. Nút "Sửa" là thẻ a, nhưng "Ngừng" và
   "Gỡ" phải nằm trong form riêng vì chúng là lệnh POST — form là khối, nên
   không có dòng này thì cột thao tác cao gấp đôi các cột khác. */
.hang-nut { display: inline-block; }

/* Ô sửa TẠI CHỖ trong bảng định mức: cùng viền và cùng vòng tiêu điểm với ô
   trong .field, nhưng không mang nhãn và không chiếm chiều cao của một hàng
   biểu mẫu. Sửa số phút phải nhanh như sửa một ô bảng tính, nếu không thì
   bảng định mức sẽ không bao giờ được cập nhật. */
.o-bang {
  width: 6.5em; padding: 3px 6px; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 2px;
  background: var(--surface); color: var(--ink);
}
.o-bang:focus { outline: none; border-color: var(--sig); box-shadow: 0 0 0 2px var(--sigbg); }
.o-bang-rong { width: 16em; }

/* ── Ô chọn tổ chức: gõ để lọc, có nút tạo nhanh (lát M1) ────────── */

/* Vì sao không dùng <select> thuần: nó chỉ nhảy theo ký tự đầu, không lọc,
   không bỏ dấu — với hàng trăm tổ chức thì gần như không dùng được. Quan
   trọng hơn: khi tổ chức chưa tồn tại, bắt người ta rời form đi tạo là mất
   toàn bộ dữ liệu đang nhập dở. Nút "+ Tạo mới" ở đáy danh sách xóa hẳn
   rủi ro đó. */
.khach-combo { position: relative; }

.khach-combo-o {
  width: 100%;
  border: 1px solid var(--line); border-radius: 2px;
  background: var(--surface); color: var(--ink);
  padding: 6px 9px; font-size: 12.5px;
}
.khach-combo-o:focus {
  outline: none; border-color: var(--sig); box-shadow: 0 0 0 2px var(--sigbg);
}

/* Danh sách nổi trên nội dung sau nó. Khi ô chọn nằm trong một hàng bảng,
   dòng dưới sẽ đè lên dropdown của dòng trên vì thứ tự DOM — z-index ở đây
   cộng với việc vùng bọc bảng cho phép tràn là hai thứ phải có cùng nhau. */
.khach-combo-ds {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 2px);
  margin: 0; padding: 4px; list-style: none;
  max-height: 260px; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 3px;
  box-shadow: 0 6px 18px -8px rgba(14, 21, 29, .35);
}
.khach-combo-ds[hidden] { display: none; }

.khach-combo-muc {
  padding: 5px 8px; border-radius: 2px; cursor: pointer;
  display: flex; align-items: baseline; gap: 8px;
}
.khach-combo-muc:hover,
.khach-combo-nhan { background: var(--sigbg); }   /* nhan: mục đang chọn bằng phím */
.khach-combo-muc[hidden] { display: none; }
.khach-combo-ten { font-weight: 500; }

.khach-combo-trong { padding: 7px 8px; color: var(--faint); font-size: 12px; }
.khach-combo-trong[hidden] { display: none; }

/* Dòng tạo nhanh LUÔN ở đáy, kể cả khi có kết quả khớp: người dùng có thể
   thấy "Công ty A" trong danh sách mà vẫn cần tạo "Công ty A - Chi nhánh 2". */
.khach-combo-them {
  margin-top: 4px; padding: 7px 8px;
  border-top: 1px solid var(--hair);
  color: var(--sig); cursor: pointer; font-size: 12px;
}
.khach-combo-them:hover { background: var(--sigbg); }
.khach-combo-goi { font-weight: 600; }

.khach-combo-loi { margin-top: 6px; }
.khach-combo-loi[hidden] { display: none; }

/* Khối sửa của từng người liên hệ: thu lại, bấm mới bung. Bảng kênh liên lạc
   là thứ người ta vào trang này để xem — biểu mẫu sửa không được đẩy nó
   khuất khi tổ chức có nhiều người. */
.lien-he-sua { margin-top: 8px; }
.lien-he-sua > summary {
  cursor: pointer; font-size: 11.5px; color: var(--soft);
  padding: 4px 0; list-style: none;
}
.lien-he-sua > summary::-webkit-details-marker { display: none; }
.lien-he-sua > summary::before { content: "▸ "; color: var(--faint); }
.lien-he-sua[open] > summary::before { content: "▾ "; }
.lien-he-sua > summary:hover { color: var(--sig); }

/* Nút đã tắt phải NHÌN ra là tắt. Nút "Ghi khấu hao kỳ này" khi kỳ đã ghi
   vẫn trông như bấm được thì người dùng bấm mãi rồi tưởng hệ thống treo. */
.btn[disabled], .btn[disabled]:hover {
  opacity: .55; cursor: not-allowed;
  border-color: var(--line); color: var(--soft); background: var(--surface);
}
.btn-primary[disabled], .btn-primary[disabled]:hover {
  background: var(--raise); border-color: var(--line); color: var(--faint);
}

/* ── Dải chỉ số đầu trang ────────────────────────────────────────── */

/* Bốn con số quan trọng nhất của màn hình, đặt thành một dải ngang trước khi
   vào bảng. Số dùng mono cỡ lớn vì đó là thứ người ta liếc một cái là đọc;
   nhãn nhỏ nằm dưới. Không dùng .badge cho chỗ này — huy hiệu là để đếm việc
   trong thanh nav, cỡ chữ của nó nhỏ hơn hẳn. */
.kpi-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.kpi {
  flex: 1 1 150px; min-width: 0;
  background: var(--panel); border: 1px solid var(--hair); border-radius: 3px;
  padding: 9px 11px;
}
.kpi-v { font: 600 19px/1.2 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.kpi-l { font-size: 10.5px; color: var(--faint); margin-top: 2px; }
.kpi-v.is-ok   { color: var(--ok); }
.kpi-v.is-warn { color: var(--warn); }
.kpi-v.is-bad  { color: var(--bad); }

/* Viền trái nhấn: cách artboard đánh dấu thẻ đang có việc gấp mà không phải
   tô nền cả thẻ. */
.card-edge-bad  { border-left: 3px solid var(--bad); }
.card-edge-warn { border-left: 3px solid var(--warn); }

/* Ô "chặn gì nếu chưa duyệt" trong bảng. Khác .badge ở chỗ được xuống dòng:
   đây là một câu, không phải một con số, và nong rộng cột vì một câu dài là
   hỏng cả bảng. */
.chan-gi {
  display: inline-block; padding: 2px 6px; border-radius: 2px;
  background: var(--warnbg); color: var(--warn);
  font-size: 11px; white-space: normal; text-align: left;
}

/* Ô «ghi nhớ đăng nhập». Nhãn bọc cả checkbox nên bấm vào chữ cũng tick —
   trên điện thoại, ô 13px là mục tiêu quá nhỏ để bấm trúng. */
.ghi-nho {
  display: flex; align-items: center; gap: 7px;
  margin: 2px 0 14px; font-size: 12px; color: var(--soft); cursor: pointer;
}
.ghi-nho input { margin: 0; }

/* ── Bảng điều phối xưởng ────────────────────────────────────────── */

/* Sáu cột công đoạn. Nền chìm và viền mảnh để mắt tách được cột với thẻ —
   thẻ mới là thứ người ta đọc, cột chỉ là chỗ đứng của nó. */
.xuong-cot {
  background: var(--panel); border: 1px solid var(--hair); border-radius: 3px;
  vertical-align: top; padding: 8px;
}
.xuong-cot-ten {
  font: 600 9.5px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); padding-bottom: 6px;
}
.xuong-the { margin-bottom: 8px; }
.xuong-the:last-child { margin-bottom: 0; }

/* ── Mua hàng và gia công ngoài ──────────────────────────────────── */

/* Con số vượt định mức và khoản phải thu tương ứng. Nó phải nổi lên khác
   một con số 0: đây là TIỀN đòi nhà gia công, không phải một dòng thống kê.
   Màu và độ đậm sống ở đây chứ không trong JavaScript — màn hình nào cũng
   có lúc phải đổi sắc độ, và đi sửa nó trong mã kịch bản là cách chắc chắn
   để hai chỗ trong ứng dụng lệch nhau.  */
.so-canh-bao { font-weight: 700; color: var(--bad); }