/* Bổ sung cho template Metoxi - Dashboard Bệnh Dại */
:root {
  --rg-bac: #0d6efd;
  --rg-trung: #13a35a;
  --rg-nam: #fd7e14;
  --rg-tn: #8932ff;
  --c-tiem: #0d6efd;
  --c-chet: #dc3545;
}

.min-w-0 { min-width: 0; }

/* Template dùng icon "home" (\e88a) làm dấu phân cách breadcrumb -> trùng với nút home đầu dòng. Đổi thành mũi tên "chevron_right". */
.main-wrapper .main-content .page-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "\e5cc"; vertical-align: middle; }

/* Footer của template là position:absolute; bottom:0 theo <body> -> khi nội dung ngắn, footer nổi giữa trang.
   Cho body cao tối thiểu bằng màn hình và chừa chỗ cho footer (cao 40px). */
body { min-height: 100vh; display: flow-root; } /* flow-root: lề trên 70px của .main-wrapper nằm trong body, không làm trang dài thêm */
.main-wrapper { padding-bottom: 60px; }
.header-title { font-size: 1.05rem; }

.logo-badge {
  width: 40px; height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #dc3545, #fd7e14); color: #fff;
}
.sidebar-foot-text { line-height: 1.4; }
.sidebar-wrapper .sidebar-header .logo-icon .nihe-logo { width: 40px; height: 40px; object-fit: contain; display: block; }
body.toggled:not(.sidebar-hovered) .sidebar-foot-text { display: none; }

/* filter */
.filter-card { position: sticky; top: 78px; z-index: 9; }
/* Mỗi thẻ nội dung là một lớp riêng: z-index bên trong (nút menu ApexCharts = 11, bản đồ Leaflet tới 1000)
   chỉ có tác dụng trong thẻ -> không đè lên thanh bộ lọc dính (9) và header (10) khi cuộn. */
.main-content .card:not(.filter-card) { isolation: isolate; }
.prov-menu { max-width: 100%; min-width: 280px; }
.prov-list { max-height: 320px; overflow-y: auto; }
.prov-list .rg-head { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--bs-secondary-color); margin: 8px 4px 2px; font-weight: 600; }
.prov-list .form-check { padding: 3px 4px 3px 28px; border-radius: 6px; margin: 0; }
.prov-list .form-check:hover { background: var(--bs-tertiary-bg); }
.preset-group .btn.active { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }

/* KPI */
.kpi-card .kpi-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kpi-card h3 { font-weight: 700; font-size: 1.55rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.kpi-card .kpi-label { font-size: 13px; color: var(--bs-secondary-color); }
.kpi-card { overflow: hidden; }
.kpi-card .kpi-spark { margin: 4px -16px 0; height: 60px; overflow: hidden; }
.delta { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.delta .material-icons-outlined { font-size: 14px; }

.rg-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* Death list */
.death-item { border: 1px solid var(--bs-border-color); border-radius: 12px; padding: 10px 12px; height: 100%; }
.death-item .num { font-variant-numeric: tabular-nums; }

/* Map */
#map { height: 640px; width: 100%; background: var(--bs-tertiary-bg); }
.map-rank { max-height: 520px; overflow-y: auto; }
.map-rank .rank-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px dashed var(--bs-border-color); cursor: pointer; }
.map-rank .rank-row:hover { background: var(--bs-tertiary-bg); }
.legend-bar { height: 12px; border-radius: 6px; }
.island-label { background: transparent; border: 0; color: #5a6a85; font-size: 11px; font-style: italic; white-space: nowrap; font-weight: 600; }
[data-bs-theme=dark] .island-label { color: #9fb0c8; }
.leaflet-container { font-family: "Noto Sans", sans-serif; }
[data-bs-theme=dark] .leaflet-popup-content-wrapper, [data-bs-theme=dark] .leaflet-popup-tip { background: #2b3035; color: #dee2e6; }

/* Matrix groups */
.mx-group { border-left: 4px solid; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; background: var(--bs-tertiary-bg); }
.mx-group .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.mx-group .chip { font-size: 12px; padding: 2px 8px; border-radius: 20px; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); }

/* Tables */
table.dataTable td, table.dataTable th { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
#tbl-pop tr.pop-fixed td { background: rgba(255, 193, 7, .18); }

.apexcharts-tooltip { box-shadow: 0 4px 16px rgba(0,0,0,.12) !important; }
[data-bs-theme=dark] .apexcharts-tooltip.apexcharts-theme-light { background: #2b3035; color: #dee2e6; border-color: #495057; }
[data-bs-theme=dark] .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title { background: #343a40; border-color: #495057; }
[data-bs-theme=dark] .apexcharts-menu { background: #2b3035; border-color: #495057; }
[data-bs-theme=dark] .apexcharts-menu-item:hover { background: #343a40; }

.issue-badge { font-size: 11px; min-width: 64px; display: inline-block; text-align: center; }

@media (max-width: 1199px) {
  .filter-card { position: static; }
}
@media (max-width: 575px) {
  #map { height: 460px; }
  .kpi-card h3 { font-size: 1.35rem; }
}

/* ---- React version ---- */
.sidebar-wrapper .sidebar-nav { overflow-y: auto; }
.disabled-link { pointer-events: none; opacity: .45; }
.file-badge { max-width: 320px; display: inline-flex; align-items: center; gap: 4px; line-height: 1.2; }
.dropzone { border: 2px dashed var(--bs-border-color); background: var(--bs-tertiary-bg); cursor: pointer; transition: all .2s; }
.dropzone:hover, .dropzone.drag { border-color: var(--bs-primary); background: rgba(13, 110, 253, .06); }
.dropzone .dz-icon { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: rgba(13, 110, 253, .12); color: var(--bs-primary); }
.dropzone .dz-icon i { font-size: 34px; }
.toast-wrap { position: fixed; right: 16px; bottom: 16px; z-index: 1100; max-width: min(520px, calc(100vw - 32px)); }
.toast-wrap .toast { width: auto; }
.data-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.data-table td { white-space: nowrap; }
.issue-list { max-height: 520px; overflow-y: auto; }
.prov-menu.show { display: block; position: absolute; inset: 100% auto auto 0; margin-top: 4px; }