---
name: enterprise-ui-darkslate
description: Chuẩn thiết kế giao diện ERP Dark Slate, mật độ thông tin cao (Bloomberg/Palantir density), chống đè Sidebar (Zero Occlusion), luồng dữ liệu đơn chiều và chống tràn Toast. Kích hoạt khi phát triển, chỉnh sửa frontend HTML/CSS/JS, thiết kế giao diện hoặc điều chỉnh tương tác UI.
---

# ENTERPRISE DARK SLATE UI/UX & HIGH-DENSITY STANDARD

## 1. Hệ Thống Thiết Kế Doanh Nghiệp (Dark Slate Theme)
- **Stylesheet chuẩn**: Bắt buộc import `/static/css/erp_enterprise.css`.
- **Thanh Điều Hướng Thống Nhất**: Dùng chung `<header class="erp-navbar">` chứa logo DSCons, menu phân hệ và trạng thái tài khoản.
- **Typography Chuẩn**:
  - Google Fonts `Inter` (full tiếng Việt có dấu) cho toàn bộ văn bản và tiêu đề.
  - `JetBrains Mono` cho toàn bộ số liệu tài chính VNĐ, đơn giá ca máy, mã thiết bị, tọa độ CAD.
  - Phân cấp cỡ chữ: Tiêu đề trang `15px - 17px` (bold), Tiêu đề thẻ `13px - 14px`, Nội dung `12px - 13px`, Nhãn phụ/Meta `10.5px - 11.5px` (uppercase tracking).
- **Màu nền**: Nền chính `#0b0f19` / `#080d1a`, Panel/Card `#111827`, Viền `#1e293b`.

## 2. Mật Độ Thông Tin Cao & Chống Đè Menu (Zero Occlusion)
- **Chống đè Sidebar**: Toàn bộ layout chính (`.erp-main-layout`) bao bọc nội dung với `margin-left: var(--sidebar-width)` (260px desktop, 72px collapsed). Tuyệt đối không để Fixed Sidebar che mất nội dung bên trái.
- **Tối ưu không gian hiển thị**:
  - Không dùng padding/margin khổng lồ (24px-32px).
  - Paddings & Gaps chuẩn: 8px - 14px cho cards/panels; 6px - 10px cho các hàng dữ liệu bảng tính.
  - Bố cục đa cột (Multi-Column Split-View): Chia cột thông minh (Left: Master List/Filters/CAD Viewer, Right: Detail Panel/War Room/KPIs) thay vì dồn 1 cột dài cuộn vô tận.

## 3. Luồng Dữ Liệu Đơn Chiều & Chống Tràn Thông Báo (Toast Anti-Flood)
- **Tách biệt Chuyển Tab và Phát Sinh Hành Động**: Các hàm `switchTab`, `switchBoqViewMode` là Pure State Renderers, tuyệt đối không gọi ngược lại Action Creators gây đệ quy vô tận.
- **Khóa chống trùng bất đồng bộ (Idempotent Locks)**: Có cờ `if (isSubmitting) return;` hoặc debounce trên mọi API call.
- **Hàng rào Toast Anti-Flood**: Tự động chặn thông báo trùng lặp đang hiển thị, tối đa không quá 3 Toast cùng xuất hiện trên màn hình.
- **Cache Buster cho hình ảnh bản vẽ**: Mọi lệnh gán `img.src` bản vẽ phải tự động gắn `?v=${Date.now()}` để trình duyệt không giữ cache cũ.

## 6. Cache Buster Constraint
- **Force Reload Static Assets**: Khi chỉnh sửa các file JS/CSS cốt lõi (như rp_mobile_dock.js), BẮT BUỘC phải dùng script PowerShell để tìm và tăng (bump) phiên bản Cache Buster (?v=x.x.x) trên toàn bộ các file .html (VD: thay đổi thành =4.0.1). Trình duyệt của user sẽ không hiển thị UI mới nếu thiếu bước này (Gây ra lỗi 'chưa thấy menu').