/* ═══════════════════════════════════════════════════════════════════════
   cyber.css — hiệu ứng "tương lai" cho theme 🚀 Cyber
   (Cấu hình → Giao diện → Theme).

   Mọi quy tắc ở đây chạy bằng biến --fx-* khai báo trong cau_hinh_theme.py.
   Các theme khác nhận giá trị TẮT (trùng với giao diện gốc) nên file này
   không đổi gì khi không chọn Cyber. Nạp SAU style.css trong base.html.
   ═══════════════════════════════════════════════════════════════════════ */

/* Thanh cuộn (thanh ngang phía trên bảng, cuộn trong popup...): màu theo
   theme — thumb cyan, rãnh tối. Theme khác = auto (giữ nguyên mặc định).
   Thuộc tính này được kế thừa nên đặt ở :root là phủ toàn app. */
:root { scrollbar-color: var(--fx-scrollbar, auto); }
.table-scroll-top { scrollbar-color: var(--fx-scrollbar, auto); }

/* Nền: quầng sáng + lưới mờ, đứng yên (không animation → nhẹ máy) */
body {
  background-image: var(--fx-bg-image, none);
  background-size: var(--fx-bg-size, auto);
  background-attachment: fixed;
}

/* Thanh trên: kính mờ + vạch sáng chạy dọc mép dưới */
.topbar {
  background: var(--fx-topbar, linear-gradient(180deg, var(--navy-2) 0%, var(--navy) 100%));
  -webkit-backdrop-filter: blur(var(--fx-blur, 0px));
  backdrop-filter: blur(var(--fx-blur, 0px));
  /* backdrop-filter TẠO stacking context → z-index:60 của menu dropdown bị
     "nhốt" trong topbar. Phải cho chính topbar một z-index để menu nổi trên
     bảng (sticky 15/16) nhưng vẫn dưới panel chi tiết (50) và modal (60). */
  z-index: 49;
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--fx-line, transparent) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: var(--fx-anim-name, none) 7s linear infinite;
}
@keyframes fxQuet {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Thẻ số liệu, thẻ cấu hình, popup: kính mờ + viền phát sáng */
.stat-card,
.cau-hinh-card,
.modal-box {
  background: var(--fx-glass, var(--surface));
  -webkit-backdrop-filter: blur(var(--fx-blur, 0px));
  backdrop-filter: blur(var(--fx-blur, 0px));
}
.stat-card { border-color: var(--fx-card-edge, var(--border)); }
.stat-card--accent { background: var(--accent-soft); }
.modal-box {
  border: 1px solid var(--fx-card-edge, transparent);
  box-shadow: var(--fx-card-glow, var(--shadow-card));
}
.modal-overlay {
  background: var(--fx-overlay, rgba(18, 50, 69, 0.5));
  -webkit-backdrop-filter: blur(var(--fx-overlay-blur, 0px));
  backdrop-filter: blur(var(--fx-overlay-blur, 0px));
}

/* Khung bảng: giữ NỀN ĐẶC (dễ đọc số liệu), chỉ thêm viền sáng */
.table-wrap {
  border-color: var(--fx-card-edge, var(--border));
  box-shadow: var(--fx-card-glow, var(--shadow-card));
}
.lo-table tbody tr:hover > td {
  box-shadow: inset 0 1px 0 var(--fx-hover-line, transparent),
              inset 0 -1px 0 var(--fx-hover-line, transparent);
}

/* Nút chính: gradient + phát sáng khi rê chuột */
.btn--primary { background: var(--fx-btn-bg, var(--navy)); }
.btn--primary:hover {
  background: var(--fx-btn-bg-hover, var(--navy-2));
  box-shadow: var(--fx-btn-glow, 0 6px 14px rgba(18, 50, 69, 0.22));
}

/* Số liệu kiểu HUD (Orbitron chỉ dùng cho chữ số — font này không có
   dấu tiếng Việt nên KHÔNG dùng cho chữ thường) */
.stat-card__value { font-family: var(--fx-font-num, var(--font-mono)); letter-spacing: 0.02em; }

/* Tắt hết hiệu ứng nặng khi người dùng chọn "Hiệu ứng chuyển động: Tắt"
   hoặc hệ điều hành yêu cầu giảm chuyển động */
html.giam-chuyen-dong .topbar::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .topbar::after { animation: none; }
}

/* ─── Hạt rơi động: hoa đào (Xuân) / sao (Cyber) — vẽ bởi static/js/fx_roi.js ───
   Canvas nền app: nằm SAU nội dung, TRÊN màu nền html. Vì body cũng có
   background nên phải để body trong suốt khi hiệu ứng bật, nếu không body
   sẽ phủ kín canvas. Lớp gradient/lưới mờ của body (--fx-bg-image) vẫn
   hiện bình thường, chỉ nền đặc bị bỏ.
   Canvas nền popup: nằm trong .modal-overlay, z-index -1 → trên lớp phủ mờ
   nhưng dưới hộp popup (hộp popup nền đặc/kính nên chữ vẫn rõ). */
.fx-roi {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: block;
}
html.fx-roi-bat body { background-color: transparent; }
.modal-overlay > .fx-roi--popup { position: fixed; z-index: -1; }
@media print { .fx-roi { display: none !important; } }

/* ─── Chữ trên nền accent: theme tối có accent sáng nên chữ trắng cứng bị chìm.
   --on-accent chỉ được khai báo ở theme tối (cau_hinh_theme.py); theme sáng
   không có biến này → giữ #fff như cũ. ─── */
.btn--accent,
.btn--accent:hover,
#btnLoaiPdfDeNghiThanhToan,
#btnLoaiPdfDeNghiThanhToan:hover,
.ho-so-list__tai:hover:not(:disabled),
.ktq-btn--tk,
.ktq-btn--tk:hover,
.ve-dau-trang:hover { color: var(--on-accent, #fff); }