/* Danh sách đơn hàng (DDR-013/015) — cả hàng bấm mở được, giống #projectRows của BMS Xốp Mê Linh
   (frontend/app.js:9184: click trên tr[data-index] mở dự án, không có nút riêng ở cuối hàng).
   Chỉ dùng token --bms-*. Nằm ngoài core cascade. */
#orderListRows tr[data-order-row] { cursor: pointer; }
#orderListRows tr[data-order-row]:hover { background: var(--bms-surface-selected); }
#orderListRows tr[data-order-row].is-active { background: var(--bms-primary-soft); }
#orderListRows tr[data-order-row].is-active:hover { background: var(--bms-primary-soft); }

/* --- Tab Bảo trì · phiếu ZAMIO-E7 (DDR-015) -----------------------------------------------------
   Biểu mẫu bảo dưỡng định kỳ và bảng thiết bị. Chỉ dùng token --bms-*. */
[data-panel="maintenance"] .zmt-reminder { margin: 0 0 var(--bms-space-3); padding: var(--bms-space-3) var(--bms-space-4); border-radius: var(--bms-radius-2); color: var(--bms-warning); background: var(--bms-warning-soft); border: 1px solid color-mix(in srgb, var(--bms-warning) 32%, transparent); font: 600 13px/1.5 var(--bms-font-ui); }
[data-panel="maintenance"] .zmt-reminder[hidden] { display: none; }
[data-panel="maintenance"] .zmt-reminder.is-ok { color: var(--bms-success); background: var(--bms-success-soft); border-color: color-mix(in srgb, var(--bms-success) 32%, transparent); }
[data-panel="maintenance"] .zmt-reminder.is-late { color: var(--bms-danger); background: var(--bms-danger-soft); border-color: color-mix(in srgb, var(--bms-danger) 32%, transparent); }
[data-panel="maintenance"] .zmt-table { min-width: 0; }
[data-panel="maintenance"] .zmt-table tbody tr.is-due { background: var(--bms-warning-soft); }
[data-panel="maintenance"] .zmt-table tbody tr.is-overdue { background: var(--bms-danger-soft); }
[data-panel="maintenance"] .zmt-form[hidden] { display: none; }
[data-panel="maintenance"] .zmt-form { display: grid; gap: var(--bms-space-4); margin-bottom: var(--bms-space-4); padding: var(--bms-space-4); border: 1px solid var(--bms-border); border-radius: var(--bms-radius-2); background: var(--bms-surface-subtle); }
[data-panel="maintenance"] .zmt-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--bms-space-3); }
[data-panel="maintenance"] .zmt-head h4 { margin: 0; color: var(--bms-text); font: 700 15px/1.3 var(--bms-font-ui); }
[data-panel="maintenance"] .zmt-head span { color: var(--bms-text-muted); font: 700 11px/1.3 var(--bms-font-ui); letter-spacing: .08em; text-transform: uppercase; }
[data-panel="maintenance"] .zmt-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--bms-space-3); }
[data-panel="maintenance"] .zmt-meta label { display: flex; flex-direction: column; gap: var(--bms-space-1); color: var(--bms-text-muted); font: 600 12px/1.3 var(--bms-font-ui); }
[data-panel="maintenance"] .zmt-kinds { display: flex; flex-wrap: wrap; gap: var(--bms-space-3); padding: var(--bms-space-3); border: 1px solid var(--bms-border); border-radius: var(--bms-radius-1); background: var(--bms-surface); }
[data-panel="maintenance"] .zmt-kinds > strong { color: var(--bms-text-muted); font: 700 11px/1.6 var(--bms-font-ui); letter-spacing: .06em; text-transform: uppercase; }
[data-panel="maintenance"] .zmt-kinds label { display: inline-flex; align-items: center; gap: 6px; color: var(--bms-text); font: 600 13px/1.4 var(--bms-font-ui); }
[data-panel="maintenance"] .zmt-items { width: 100%; border-collapse: collapse; background: var(--bms-surface); border: 1px solid var(--bms-border); border-radius: var(--bms-radius-1); }
[data-panel="maintenance"] .zmt-items :is(th, td) { padding: var(--bms-space-2) var(--bms-space-3); border-bottom: 1px solid var(--bms-border); font-size: 13px; text-align: left; vertical-align: top; }
[data-panel="maintenance"] .zmt-items th { color: var(--bms-text-muted); font: 700 11px/1.3 var(--bms-font-ui); letter-spacing: .05em; text-transform: uppercase; }
[data-panel="maintenance"] .zmt-items tbody tr:last-child :is(td) { border-bottom: 0; }
[data-panel="maintenance"] .zmt-items td strong { display: block; color: var(--bms-text); font: 700 13px/1.4 var(--bms-font-ui); }
[data-panel="maintenance"] .zmt-items td small { display: block; color: var(--bms-text-muted); font: 500 12px/1.5 var(--bms-font-ui); }
[data-panel="maintenance"] .zmt-items input[type="text"] { width: 100%; min-height: var(--bms-control-compact); }
[data-panel="maintenance"] .zmt-opts { display: flex; flex-direction: column; gap: 4px; white-space: nowrap; }
[data-panel="maintenance"] .zmt-opts label { display: inline-flex; align-items: center; gap: 6px; color: var(--bms-text); font: 600 12px/1.3 var(--bms-font-ui); }
[data-panel="maintenance"] .zmt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--bms-space-3); }
[data-panel="maintenance"] .zmt-grid fieldset { margin: 0; padding: var(--bms-space-3); border: 1px solid var(--bms-border); border-radius: var(--bms-radius-1); background: var(--bms-surface); }
[data-panel="maintenance"] .zmt-grid legend { padding: 0 var(--bms-space-2); color: var(--bms-text-muted); font: 700 11px/1.3 var(--bms-font-ui); letter-spacing: .06em; text-transform: uppercase; }
[data-panel="maintenance"] .zmt-note { margin: 0; color: var(--bms-text-muted); font: 500 12px/1.5 var(--bms-font-ui); }

/* --- Biểu mẫu tạo đơn hàng mới (DDR-018) — dùng lại khuôn thẻ của khối bán máy nhưng ở panel orders. */
#orderCreateForm[hidden] { display: none; }
#orderCreateForm { display: grid; gap: var(--bms-space-4); margin-bottom: var(--bms-space-4); padding: var(--bms-space-5); border: 1px solid var(--bms-border); border-radius: var(--bms-radius-2); background: var(--bms-surface); }
#orderCreateForm .zmc-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--bms-space-3); }
#orderCreateForm .zmc-head h3 { margin: 0; color: var(--bms-text); font: 700 15px/1.3 var(--bms-font-ui); }
#orderCreateForm .zmc-head span { color: var(--bms-primary); font: 700 11px/1.3 var(--bms-font-ui); letter-spacing: .08em; text-transform: uppercase; }
#orderCreateForm .zmc-head p { flex: 1 0 100%; margin: 0; color: var(--bms-text-muted); font: 500 12px/1.5 var(--bms-font-ui); }
#orderCreateForm .zmc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--bms-space-3); }
#orderCreateForm .zmc-grid label { display: flex; flex-direction: column; gap: var(--bms-space-1); color: var(--bms-text-muted); font: 600 12px/1.3 var(--bms-font-ui); }

/* --- Sổ «Phiếu sửa chữa» ZAMIO-QLSC trong tab Bảo trì (DDR-020) --------------------------------- */
[data-panel="maintenance"] .zqs-flow { display: flex; flex-wrap: wrap; gap: var(--bms-space-2); margin: 0 0 var(--bms-space-4); padding: 0; list-style: none; }
[data-panel="maintenance"] .zqs-flow li { padding: var(--bms-space-2) var(--bms-space-3); border: 1px solid var(--bms-border); border-radius: var(--bms-radius-round); color: var(--bms-text-muted); background: var(--bms-surface); font: 600 12px/1.3 var(--bms-font-ui); }
[data-panel="maintenance"] .zqs-rule { margin: var(--bms-space-3) 0 0; padding: var(--bms-space-3) var(--bms-space-4); border-radius: var(--bms-radius-1); color: var(--bms-warning); background: var(--bms-warning-soft); font: 700 12px/1.5 var(--bms-font-ui); }

/* === Tab Bảo trì · bố cục hướng B (DDR-030) =======================================================
   Ngữ pháp mượn từ Limble CMMS: danh mục thiết bị là cột trái cố định làm bối cảnh, bộ chọn sổ nằm TRÊN
   nội dung, bộ lọc là dải chip ngay trên bảng, quá hạn là một lớp màu phủ cả dòng. Chỉ token --bms-*. */
.zmt-panel .zmt-today { margin: 0; color: var(--bms-text-subtle); font: 600 12px/1.6 var(--bms-font-ui); text-align: right; white-space: nowrap; }

/* Hai cảnh báo tách riêng, mỗi cái ghi rõ nguồn — thay cho một câu chạy dài gộp hai việc khác loại. */
.zmt-panel .zmt-alerts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--bms-space-3); margin-bottom: var(--bms-space-4); }
.zmt-panel .zmt-alert { display: flex; align-items: flex-start; gap: var(--bms-space-3); padding: var(--bms-space-3) var(--bms-space-4); border: 1px solid var(--bms-border); border-left-width: 3px; border-radius: var(--bms-radius-2); background: var(--bms-surface); }
/* Chỉ con trực tiếp là số đếm; <b> trong câu («Máy 4») phải giữ cỡ chữ thân. */
.zmt-panel .zmt-alert > b { font: 750 22px/1 var(--bms-font-data); }
.zmt-panel .zmt-alert p b { color: var(--bms-text); font-weight: 700; }
.zmt-panel .zmt-alert p { margin: 0; color: var(--bms-text); font: 500 13px/1.5 var(--bms-font-ui); }
.zmt-panel .zmt-alert small { display: block; margin-top: 3px; color: var(--bms-text-subtle); font: 500 12px/1.4 var(--bms-font-ui); }
.zmt-panel .zmt-alert.is-late { border-left-color: var(--bms-danger); background: var(--bms-danger-soft); }
.zmt-panel .zmt-alert.is-late > b { color: var(--bms-danger); }
.zmt-panel .zmt-alert.is-warn { border-left-color: var(--bms-warning); background: var(--bms-warning-soft); }
.zmt-panel .zmt-alert.is-warn > b { color: var(--bms-warning); }
.zmt-panel .zmt-alert.is-ok { border-left-color: var(--bms-success); }
.zmt-panel .zmt-alert.is-ok > b { color: var(--bms-success); }

.zmt-panel .zmt-layout { display: grid; grid-template-columns: minmax(240px, 288px) minmax(0, 1fr); gap: var(--bms-space-4); align-items: start; }
.zmt-panel .zmt-main { display: grid; gap: var(--bms-space-4); min-width: 0; }

/* Cột trái: bối cảnh cố định. Mỗi máy đeo nhãn các sổ có ghi chép cho nó — Máy 4 và Máy 6 tự nổi lên. */
.zmt-panel .zmt-assets { position: sticky; top: var(--bms-space-4); overflow: hidden; border: 1px solid var(--bms-border); border-radius: var(--bms-radius-2); background: var(--bms-surface); }
.zmt-panel .zmt-assets-head { padding: var(--bms-space-3) var(--bms-space-4); border-bottom: 1px solid var(--bms-border); background: color-mix(in srgb, var(--bms-canvas) 60%, var(--bms-surface)); }
.zmt-panel .zmt-assets-head h3 { margin: 0; color: var(--bms-text); font: 650 14px/1.35 var(--bms-font-ui); }
.zmt-panel .zmt-assets-head p { margin: 2px 0 0; color: var(--bms-text-subtle); font: 500 12px/1.45 var(--bms-font-ui); }
.zmt-panel .zmt-asset-list { margin: 0; padding: 0; max-height: 62vh; overflow: auto; list-style: none; }
.zmt-panel .zmt-asset { display: grid; gap: 3px; width: 100%; padding: var(--bms-space-3) var(--bms-space-4); border: 0; border-bottom: 1px solid var(--bms-border); border-left: 3px solid transparent; background: var(--bms-surface); text-align: left; cursor: pointer; }
.zmt-panel .zmt-asset:hover { background: color-mix(in srgb, var(--bms-primary-soft) 40%, transparent); }
.zmt-panel .zmt-asset.is-overdue { background: var(--bms-danger-soft); border-left-color: var(--bms-danger); }
.zmt-panel .zmt-asset.is-picked { border-left-color: var(--bms-primary); background: var(--bms-primary-soft); }
.zmt-panel .zmt-asset-top { display: flex; align-items: center; justify-content: space-between; gap: var(--bms-space-2); }
.zmt-panel .zmt-asset-top strong { color: var(--bms-text); font: 650 13px/1.4 var(--bms-font-ui); }
.zmt-panel .zmt-asset-top .status { font-style: normal; }
.zmt-panel .zmt-asset-sub { color: var(--bms-text-subtle); font: 500 12px/1.45 var(--bms-font-ui); }
.zmt-panel .zmt-asset-books { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.zmt-panel .zmt-asset-books i { padding: 1px 6px; border: 1px solid var(--bms-border); border-radius: var(--bms-radius-1); color: var(--bms-text-muted); font: 600 11px/1.5 var(--bms-font-data); font-style: normal; }
.zmt-panel .zmt-asset-books i.is-broken { border-color: color-mix(in srgb, var(--bms-danger) 40%, transparent); background: var(--bms-danger-soft); color: var(--bms-danger); font-family: var(--bms-font-ui); }
.zmt-panel .zmt-asset-foot b { color: var(--bms-text); }
.zmt-panel .zmt-asset-foot { margin: 0; padding: var(--bms-space-3) var(--bms-space-4); border-top: 1px solid var(--bms-border); color: var(--bms-text-muted); font: 500 12px/1.5 var(--bms-font-ui); }

/* Bốn thẻ chọn sổ, mang sẵn số đếm — biết nên vào sổ nào trước khi bấm. */
.zmt-panel .zmt-books { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--bms-space-3); }
.zmt-panel .zmt-book-tab { display: grid; gap: 2px; padding: var(--bms-space-3) var(--bms-space-4); border: 1px solid var(--bms-border); border-radius: var(--bms-radius-2); background: var(--bms-surface); text-align: left; cursor: pointer; }
.zmt-panel .zmt-book-tab span { color: var(--bms-text-subtle); font: 600 11px/1.4 var(--bms-font-data); letter-spacing: .06em; }
.zmt-panel .zmt-book-tab strong { color: var(--bms-text); font: 650 14px/1.35 var(--bms-font-ui); }
.zmt-panel .zmt-book-tab em { color: var(--bms-text-muted); font: 500 12px/1.45 var(--bms-font-ui); font-style: normal; }
.zmt-panel .zmt-book-tab.active { border-color: var(--bms-primary); background: var(--bms-primary-soft); box-shadow: inset 0 0 0 1px var(--bms-primary); }
.zmt-panel .zmt-book-tab.active :is(span, strong) { color: var(--bms-primary); }

/* Khuôn chung của cả bốn sổ: đầu sổ → chỉ số → thanh lọc → bảng → khối quy tắc. */
.zmt-panel .zmt-book[hidden] { display: none; }
.zmt-panel .zmt-book { overflow: hidden; border: 1px solid var(--bms-border); border-radius: var(--bms-radius-2); background: var(--bms-surface); }
.zmt-panel .zmt-book-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--bms-space-3); padding: var(--bms-space-4); border-bottom: 1px solid var(--bms-border); }
.zmt-panel .zmt-book-head > div { min-width: 0; }
.zmt-panel .zmt-book-head span { color: var(--bms-text-subtle); font: 600 11px/1.5 var(--bms-font-data); letter-spacing: .06em; }
.zmt-panel .zmt-book-head h3 { margin: 2px 0 0; color: var(--bms-text); font: 700 17px/1.3 var(--bms-font-ui); }
.zmt-panel .zmt-book-head p { margin: 4px 0 0; max-width: 72ch; color: var(--bms-text-muted); font: 500 13px/1.55 var(--bms-font-ui); }
.zmt-panel .zmt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; border-bottom: 1px solid var(--bms-border); }
.zmt-panel .zmt-stat { padding: var(--bms-space-3) var(--bms-space-4); border-right: 1px solid var(--bms-border); }
.zmt-panel .zmt-stat:last-child { border-right: 0; }
.zmt-panel .zmt-stat span { display: block; color: var(--bms-text-muted); font: 600 12px/1.4 var(--bms-font-ui); }
.zmt-panel .zmt-stat strong { display: block; margin: 2px 0; color: var(--bms-text); font: 750 24px/1.15 var(--bms-font-data); }
.zmt-panel .zmt-stat small { color: var(--bms-text-subtle); font: 500 12px/1.4 var(--bms-font-ui); }
.zmt-panel .zmt-stat.is-bad strong { color: var(--bms-danger); }
.zmt-panel .zmt-stat.is-warn strong { color: var(--bms-warning); }
.zmt-panel .zmt-stat.is-ok strong { color: var(--bms-success); }

.zmt-panel .zmt-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bms-space-2); padding: var(--bms-space-3) var(--bms-space-4); border-bottom: 1px solid var(--bms-border); }
.zmt-panel .zmt-filter-lead { color: var(--bms-text-subtle); font: 700 11px/1.5 var(--bms-font-ui); letter-spacing: .07em; text-transform: uppercase; }
.zmt-panel .zmt-chip { padding: 4px 12px; border: 1px solid var(--bms-border); border-radius: var(--bms-radius-pill); background: var(--bms-surface); color: var(--bms-text-muted); font: 600 12px/1.6 var(--bms-font-ui); cursor: pointer; }
.zmt-panel .zmt-chip:hover { border-color: var(--bms-border-strong); }
.zmt-panel .zmt-chip.is-bad { border-color: color-mix(in srgb, var(--bms-danger) 42%, transparent); color: var(--bms-danger); }
.zmt-panel .zmt-chip.is-warn { border-color: color-mix(in srgb, var(--bms-warning) 42%, transparent); color: var(--bms-warning); }
.zmt-panel .zmt-chip.active { border-color: var(--bms-primary); background: var(--bms-primary-soft); color: var(--bms-primary); }
.zmt-panel .zmt-chip.is-bad.active { border-color: var(--bms-danger); background: var(--bms-danger-soft); color: var(--bms-danger); }

.zmt-panel .zmt-book .table-wrap { border-bottom: 1px solid var(--bms-border); }
.zmt-panel .zmt-book .warehouse-table :is(th, td) { font-size: 13px; }
/* Dòng quá hạn: một lớp màu phủ cả dòng, đúng cách nguồn xử lý. */
.zmt-panel .zmt-book tr.is-overdue td { background: var(--bms-danger-soft); }
.zmt-panel .zmt-book tr.is-due td { background: var(--bms-warning-soft); }
.zmt-panel .zmt-table-wide { min-width: 1180px; }

.zmt-panel .zmt-book-foot { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--bms-space-4); padding: var(--bms-space-4); border-bottom: 1px solid var(--bms-border); }
.zmt-panel .zmt-side-card h4 { margin: 0 0 var(--bms-space-2); color: var(--bms-text); font: 650 13px/1.4 var(--bms-font-ui); }
.zmt-panel .zmt-side-card h4 + .zmt-chips + h4 { margin-top: var(--bms-space-4); }
.zmt-panel .zmt-side-card .table-wrap { border-bottom: 0; }
.zmt-panel .zmt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.zmt-panel .zmt-chips li { padding: 3px 10px; border: 1px solid var(--bms-border); border-radius: var(--bms-radius-1); color: var(--bms-text-muted); font: 500 12px/1.5 var(--bms-font-ui); }
.zmt-panel .zmt-rule { margin: 0; padding: var(--bms-space-3) var(--bms-space-4); border-left: 3px solid var(--bms-info); background: var(--bms-info-soft); color: color-mix(in srgb, var(--bms-info) 80%, var(--bms-text)); font: 600 12px/1.55 var(--bms-font-ui); }

@media (max-width: 1080px) {
  .zmt-panel .zmt-layout { grid-template-columns: minmax(0, 1fr); }
  .zmt-panel .zmt-assets { position: static; }
  .zmt-panel .zmt-asset-list { max-height: none; }
  .zmt-panel .zmt-book-foot { grid-template-columns: minmax(0, 1fr); }
}