/* =========================================================
   shell-pro.css — Giai đoạn 1 nâng cấp vỏ bản đồ (additive, dễ rollback).
   - Icon SVG dùng chung (.ico) thay cho emoji.
   - Gạch nhận diện 3 màu dưới topbar, đổi theo phân hệ (data-module-mode).
   Nạp SAU các CSS cũ để thắng cascade ở những điểm cần.
   ========================================================= */

/* ---- Icon SVG ---- */
.ico {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.action-card .ico { width: 24px; height: 24px; }
.mobile-liquid-dock .ico { width: 22px; height: 22px; }
.legend .ico { width: 18px; height: 18px; }

/* Emoji cũ thường nằm trong <span>; bỏ nền/căn lại khi đã thay bằng .ico */
.action-card span:has(.ico),
.mobile-liquid-dock span:has(.ico) { background: none; }

/* (Đã gỡ gạch nhận diện 3 màu dưới topbar theo yêu cầu.
   Tín hiệu phân hệ vẫn giữ qua màu nút, cờ .mode-flag và pulse marker.) */

/* =========================================================
   GIAI ĐOẠN 2
   ========================================================= */

/* ---- Số liệu căn cột (tabular figures) ---- */
#siteVisitCount, #vietnamClock, #vietnamDate,
.kpi b, .stat, .statistics-content, .inventory-table td, .nearest-distance b {
  font-variant-numeric: tabular-nums;
}

/* ---- Nút phân hệ theo màu nhận diện ----
   Ứng phó = đen trên vàng (cảnh báo) · Khắc phục = xanh lá (phục hồi).
   Override các rule sẵn có trong layout.css (đỏ/xanh dương). */
body[data-module-mode="incident"] .module-btn.active,
body[data-module-mode="incident"] .module-btn[aria-pressed="true"],
body[data-module-mode="incident"] .top-mode-btn.active {
  background: var(--sos-yellow) !important;
  color: #000 !important;
  border-color: #d9cf00 !important;
  box-shadow: inset 3px 0 0 #000 !important;
}
body[data-module-mode="recovery"] .module-btn.active,
body[data-module-mode="recovery"] .module-btn[aria-pressed="true"],
body[data-module-mode="recovery"] .top-mode-btn.active {
  background: var(--sos-green) !important;
  color: #163a04 !important;
  border-color: var(--sos-green-strong) !important;
  box-shadow: inset 3px 0 0 var(--sos-green-strong) !important;
}
body[data-module-mode="incident"] .module-btn.active:focus,
body[data-module-mode="incident"] .module-btn.active:active {
  box-shadow: inset 3px 0 0 #000 !important;
}
body[data-module-mode="recovery"] .module-btn.active:focus,
body[data-module-mode="recovery"] .module-btn.active:active {
  box-shadow: inset 3px 0 0 var(--sos-green-strong) !important;
}

/* ---- 3 nút phân hệ ở top menu: mỗi nút có MÀU RIÊNG khi hover/active ----
   Rủi ro = xanh biển · Ứng phó = vàng (chữ đen) · Khắc phục = xanh lá.
   Đè rule layout.css (hover/active đều xanh blue cho cả 3). */
.top-mode-btn[data-mode="risk"]:hover,
.top-mode-btn[data-mode="risk"].active {
  background: var(--sos-blue) !important;
  color: #ffffff !important;
}
.top-mode-btn[data-mode="incident"]:hover,
.top-mode-btn[data-mode="incident"].active {
  background: var(--sos-yellow) !important;
  color: #000000 !important;
}
.top-mode-btn[data-mode="recovery"]:hover,
.top-mode-btn[data-mode="recovery"].active {
  background: var(--sos-green) !important;
  color: #163a04 !important;
}
/* Lúc nghỉ: chữ mang sắc phân hệ để nhận biết, nền trắng đồng nhất. */
.top-mode-btn[data-mode="incident"] { color: #8a6d00; }
.top-mode-btn[data-mode="recovery"] { color: #3f6b12; }

/* ---- Cờ nhận diện phân hệ trên bản đồ (góc trái-trên) ----
   Dải nhọn 66°: Ứng phó nền vàng chữ đen · Khắc phục nền xanh lá. */
.mode-flag { display: none; }
body[data-module-mode="incident"] .mode-flag.flag-incident,
body[data-module-mode="recovery"] .mode-flag.flag-recovery {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 680;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 9px 30px 9px 14px;
  box-shadow: 0 6px 18px rgba(15, 34, 67, .18);
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}
.mode-flag .ico { width: 18px; height: 18px; }
body[data-module-mode="incident"] .flag-incident { background: var(--sos-yellow); color: #000; }
body[data-module-mode="recovery"] .flag-recovery { background: var(--sos-green); color: #163a04; }

/* ---- Chấm sự cố nhấp nháy (chỉ phân hệ Ứng phó, marker đang xử lý) ---- */
@keyframes sosIncPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.45); opacity: .55; }
}
body[data-module-mode="incident"] .incident-cmarker-active {
  transform-box: fill-box;
  transform-origin: center;
  animation: sosIncPulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  body[data-module-mode="incident"] .incident-cmarker-active { animation: none; }
}