/* ============================================================
   VIEW-ONLY MODE — dashboard chỉ để XEM, nhập liệu 100% qua AI/MCP
   ============================================================
   Bật bằng class `view-only` trên <body> (hoặc <html>).

   Nguyên tắc:
   - ẨN: mọi affordance NHẬP LIỆU (nút Thêm/Lưu/Xoá/Sửa, ô input, form nhập)
   - GIỮ: mọi affordance XEM + ĐIỀU HƯỚNG (‹ ›, chọn tháng, chọn 7/30/90 ngày,
     toggle mở/đóng bảng, bộ lọc, tab, bảng/chart chỉ đọc)
   - KHÔNG đổi HTML/JS: chỉ một lớp CSS. Tắt bằng cách bỏ class là về như cũ —
     an toàn nếu đổi ý, và không làm hỏng test QA đang chạy.

   Lý do thiết kế theo hướng "một lớp CSS" chứ không xoá HTML:
   1. Hoàn nguyên 1 dòng, không phải revert cả file.
   2. Element vẫn trong DOM nên JS không vỡ (getElementById vẫn trả node).
   3. Screen reader / test vẫn thấy cấu trúc; chỉ ẩn bằng display + aria.
   4. Dễ audit: muốn biết cái gì bị ẩn thì đọc đúng file này.

   Cập nhật: 13/10/2026 — theo quyết định "toàn bộ dashboard chỉ để xem".
   ============================================================ */

body.view-only,
html.view-only body {

  /* ---------- 1. NÚT NHẬP LIỆU ---------- */
  /* Nút mang id hành động: thêm / lưu / xoá / sửa / hủy / chuyển tiền.
     Liệt kê tường minh từng id thay vì đoán mờ — đoán mờ sẽ ẩn nhầm nút xem
     (vd nút "Làm mới" giá vàng không phải nhập liệu, phải giữ). */
  #ct-save, #ct-cancel,
  #cf-inc-add, #cf-inc-save, #cf-inc-cancel,
  #cf-debt-add, #cf-debt-save, #cf-debt-cancel,
  /* ＋THU / ＋NỢ ở tab Ví tiền là toggle mở form — id là #cf-inc-toggle /
     #cf-debt-toggle, KHÔNG phải *-add (đo 13/10: 2 nút này còn hiện sau
     lần ẩn đầu vì tôi chỉ liệt kê *-add/*-save). Bắt bằng class chung
     .cf-add-toggle để khỏi sót biến thể đặt tên. */
  #cf-inc-toggle, #cf-debt-toggle,
  .cf-add-toggle,
  #cash-add, #cash-save-btn, #cash-cancel-btn,
  #cash-transfer-btn-confirm, #cash-transfer-btn-cancel,
  #fund-manual-save, #fund-manual-cancel,
  #bond-add-btn, #bond-add,
  #dep-add, #dep-add-btn,
  #sub-add, #sub-add-btn,
  #stock-add, #st-add,
  #gold-own-add-btn, #gold-own-add-toggle,
  #bac-own-add-btn, #bac-own-add-toggle,
  #task-add-btn,
  /* ⚠ #gh-token-save / #sec-save KHÔNG ẩn: nút "Lưu" của #feat-body (form
     secrets: FMarket, DNSE, FHSC, Sleep ICS, GitHub token, Vaultwarden...) —
     cũng là credential/key nên user chốt tự nhập như #acc-form (13/10).
     Ngoại lệ ô nhập xem ở mục 3 (:not(#feat-body input)). */
  #acct-del-btn,
  #st-note-edit,
  #ct-quick-set {
    display: none !important;
  }
  /* ---------- 5c. ĐƯỜNG KẺ PHÂN TÁCH (datamanage) ---------- */
  /* #acc-divider ngăn cách "phần NHẬP liệu" (#acc-form) khỏi phần xem bên dưới.
     User chốt 13/10: mở lại CẢ 2 form nhập credential (#acc-form + #feat-body)
     ⇒ cả 2 đường kẻ đều có chức năng phân tách, KHÔNG ẩn nữa.
     (Từng ẩn khi form bị ẩn — user báo "còn sót đường kẻ mảnh"; giờ form mở lại
     thì đường kẻ phải trở lại theo, không phải bỏ hẳn.) */

  /* ⚠ #mon-models KHÔNG ẩn: đó là BẢNG THỐNG KÊ token theo model AI trong tab
     Monitor (thanh ngang: tên model · token · chi phí ₫ · %) — thông tin phải
     XEM, không phải control chọn model. Tôi từng ẩn nhầm vì tên gần giống control
     ⇒ user báo "monitor bảng chi tiết model sử dụng bị ẩn mất" (13/10). */

  /* ---------- 1c. TOGGLE "＋ THÊM" — mở FORM NHẬP ---------- */
  /* 5 toggle này dùng CHUNG class .sec-title-toggle với toggle xem bảng
     (CHI TIẾT QUỸ, LÔ QUỸ ĐÃ MUA...) nên không thể ẩn theo class được.
     Phải liệt kê id tường minh. Đo 13/10: đây là 5 nút hành động cuối cùng
     còn hiện sau khi ẩn hết form và nút *-add/*-save. */
  #cash-sec-toggle,     /* ＋ Thêm ví tiền */
  #stock-sec-toggle,    /* ＋ Thêm cổ phiếu */
  #dep-sec-toggle,      /* ＋ Thêm tiền gửi */
  #bond-sec-toggle,     /* ＋ Thêm trái phiếu */
  #sub-sec-toggle {     /* ＋ Thêm dịch vụ */
    display: none !important;
  }

  /* ---------- 1b. NÚT HÀNH ĐỘNG TRÊN DÒNG (dựng bằng JS, không có id) ---------- */
  /* Các nút này do JS render nên không nằm trong index.html — phải bắt bằng
     class. Đo 13/10: "Mở / Sửa / Xóa / Lưu / Hủy" trong bảng ví tiền, chi tiêu,
     thu nhập định kỳ vẫn hiện sau lần ẩn đầu. */
  .cf-btn,            /* Xóa khoản thu/nợ (cashflow.js) */
  .cf-jump,           /* "Mở" tab nguồn */
  .cash-card-del,     /* Xóa ví (cash.js) */
  .icon-btn.del,      /* Xóa khoản chi tiêu (spending.js) */
  .cw-del, .cw-save, .cw-cancel,   /* Lưu/Xóa/Hủy trong card chi tiết */
  .ss-btn-save, .ss-btn-cancel,
  /* ⚠ .stock-del / .stock-note-edit dùng CHUNG cho 3 card mở rộng:
     cổ phiếu (stock.js), tiền gửi (deposit.js), thuê bao (subscription.js).
     Tôi từng chỉ ẩn #st-note-edit (id cũ của 1 chỗ) nên 3 card kia còn nút.
     Bắt bằng class mới hết — đo 13/10: user báo card cổ phiếu/tiền gửi/thuê
     bao vẫn còn nút Xóa/Sửa. */
  .stock-del, .stock-note-edit,
  /* Vietlott: nút Lưu/× trên từng dòng vé yêu thích (đo 13/10: 6 cặp còn hiện) */
  .vl-fav-save, .vl-fav-del,
  #acct-del-cancel, #acct-del-go,
  #cash-transfer-btn-confirm {
    display: none !important;
  }

  /* ---------- 2. FORM NHẬP LIỆU (cả khối, không chỉ nút) ---------- */
  /* Ẩn form thì bớt "lỗ trống" — chỗ trước đây là form giờ thành khoảng
     thở, layout tự cân lại. Chi tiết từng chỗ xem bên dưới.

     ⚠ #ct-form KHÔNG ẩn cả khối: nó gộp CẢ ô "TỔNG CHI" (#ct-total-box) —
     thông tin phải XEM. Ẩn cả khối là mất số tiền đã tiêu trong tháng
     (đo 13/10 — user báo "nội dung số tiền đã tiêu trong tháng bị ẩn mất").
     Nên chỉ ẩn các phần NHẬP bên trong, giữ #ct-total-box.

     ⚠ #ct-budget-line cũng KHÔNG được ẩn: nó hiện "Còn X ₫ trong Y ngày" —
     là dự báo chi tiêu (thông tin phải XEM), không phải control nhập.
     Lần đầu tôi ẩn oan rồi user báo "text còn x trong y ngày bị ẩn mất". */
  .ct-add-box,          /* form thêm bản ghi */
  #ct-quick-config,     /* bảng cài đặt thêm nhanh */
  .ct-quick {           /* 3 nút thêm nhanh */
    display: none !important;
  }
  #fund-manual-panel,
  #fund-manual-body,
  #bac-own-add-form,
  #gold-own-add-form,
  #cash-transfer-modal,
  /* ⚠ #acc-new-email / #acc-new-pass KHÔNG ẩn: chúng nằm trong #acc-form — form
     đổi email/mật khẩu/ngày sinh của CHÍNH TÀI KHOẢN ĐĂNG NHẬP. User chốt 13/10:
     "đây là chỗ duy nhất cần tự nhập, không thể dùng qua AI" — đổi credential
     phải tự gõ, không đưa qua MCP/chat (AI sẽ thấy mật khẩu). */
  #acct-del-status {
    display: none !important;
  }

  /* ---------- 3. Ô NHẬP LIỆU ---------- */
  /* Ô input/select/textarea trong bảng dữ liệu → thu về dạng chỉ đọc.
     Dùng read-only thay vì display:none để BẢNG KHÔNG BỊ XÊN LỆCH cột —
     hàng vẫn giữ chiều cao, số liệu vẫn đứng đúng vị trí.

     ⚠ NGOẠI LỆ BẮT BUỘC: ô chat AI (#ai-input), ô nhập nhiệm vụ (#task-input),
     ô soạn SMS Vietlott (#vl-sms), form đổi tài khoản (#acc-form input) VÀ form
     secrets (#feat-body input) KHÔNG được ẩn. #acc-form và #feat-body là 2 chỗ
     DUY NHẤT user tự nhập credential/key (email/mật khẩu tài khoản, API key
     FMarket/DNSE/FHSC, GitHub token, Vaultwarden...) — không đưa qua AI/MCP
     được vì bảo mật. */
  .tab-panel input:not([type=checkbox]):not([type=radio]):not(#ai-input):not(#task-input):not(#acc-form input):not(#feat-body input):not(#tr-url),
  .tab-panel select:not(#acc-form select):not(#feat-body select),
  .tab-panel textarea:not(#ai-input):not(#vl-sms):not(#acc-form textarea):not(#feat-body textarea) {
    /* Ẩn ô nhập tự do nhưng GIỮ chỗ của nó → hàng bảng không co lại */
    color: transparent !important;
    background: transparent !important;
    border-color: transparent !important;
    caret-color: transparent !important;
    pointer-events: none !important;
    user-select: none !important;
  }
  /* Chữ bên trong (số liệu đang hiển thị qua input) vẫn phải ĐỌC ĐƯỢC —
     ẩn viền + nền, giữ chữ. Đây là lý do dùng color:transparent cho ô trống
     và giữ chữ thật qua ::part không được; nên đảo lại: giữ chữ, ẩn khung. */
  .tab-panel input:not([type=checkbox]):not([type=radio]):not(#ai-input):not(#task-input):not(#acc-form input):not(#feat-body input):not(#tr-url),
  .tab-panel select:not(#acc-form select):not(#feat-body select),
  .tab-panel textarea:not(#ai-input):not(#vl-sms):not(#acc-form textarea):not(#feat-body textarea) {
    color: inherit !important;
  }
  /* Ô có placeholder => đang TRỐNG, người dùng chưa nhập gì → ẩn hẳn cho gọn */
  .tab-panel input[placeholder]:not([value]):not(:focus):not(#ai-input):not(#task-input):not(#acc-form input):not(#feat-body input):not(#tr-url),
  .tab-panel input:placeholder-shown:not(#ai-input):not(#task-input):not(#acc-form input):not(#feat-body input):not(#tr-url) {
    opacity: 0 !important;
  }

  /* ---------- 4. CHECKBOX CHỌN (vietlott vé yêu thích, v.v.) ---------- */
  /* Checkbox là control CHỌN/xem, không phải nhập số. Nhưng ở chế độ chỉ xem
     thì việc tick không còn nghĩa (không ai lưu). Ẩn để đỡ rối.
     ⚠ NGOẠI LỆ: .cash-vis-cb (checkbox "Tính vào tổng" trên dòng ví) KHÔNG
     mờ — card chi tiết ví đã bỏ (13/10), đây là cách DUY NHẤT bật/tắt ví tính
     vào tổng. Đổi là lưu ngay qua POST /api/wallets. */
  .tab-panel input[type=checkbox]:not(#keep-login):not(.cash-vis-cb):not(.bp-paid):not(.bp-list-paid) {
    pointer-events: none !important;
    opacity: .35 !important;
  }

  /* ---------- 5b. KHÔNG ẩn bảng vàng/bạc ---------- */
  /* ⚠ #gold-own-wrap / #bac-own-wrap KHÔNG phải card mở rộng trùng lặp — nó là
     BẢNG VÀNG/BẠC DUY NHẤT trong panel-gold (cột: Ghi chú · Số lượng · Giá
     trị + dòng Tổng). Kiểm tra 13/10: panel-gold không còn bảng nào khác.
     Tôi từng ẩn nhầm 2 id này (nghĩ là card trùng) ⇒ mất sạch bảng vàng/bạc.
     ĐÃ HOÀN NGUYÊN — giữ lại dòng comment này để lần sau khỏi ẩn lại. */

  /* ---------- 5. KHOẢNG TRỜNG SAU KHI ẨN ---------- */
  /* Form nhập nằm trong card riêng → ẩn form có thể để lại card rỗng.
     Card rỗng xấu hơn không có card. Ẩn luôn card/wrapper chỉ chứa form. */
  .ct-add-card, .fund-add-card, .cash-add-card,
  .dep-add-card, .sub-add-card, .stock-add-card, .bill-edit-card,
  /* Card mở rộng ví tiền (Sửa/Chuyển/Xóa) — bỏ 13/10: nhập liệu chuyển qua
     AI/MCP (sua_du_lieu loại vi + tool chuyen_tien_vi mới). Chỗ duy nhất cần
     giữ là checkbox "Tính vào tổng" — đã chuyển lên DÒNG bảng (.cash-vis-cb),
     nên cả card này ẩn được. */
  .cash-detail-card,
  .cf-inc-card, .cf-debt-card {
    display: none !important;
  }
}