/* Style riêng của dashboard. Màu, chữ, bo góc, bóng đều lấy từ token của
   portal.css để đồng bộ với các dashboard khác của Bros Partners. */

/* portal.css chỉ định nghĩa --data-1..--data-7 (7 màu), không đủ cho các
   nhóm nhiều quốc gia nhất (Cod, Pollock: 8 quốc gia đặt tên + "Other").
   portal.css được copy nguyên văn từ repo dùng chung nên không sửa ở đó —
   hai màu bổ sung khai báo riêng tại đây, tách biệt với --data-1..7 và với
   --trend-flat (dùng cho "Other"), và đủ tương phản trên nền sáng của trang. */
:root {
  --data-8: #B91C1C; /* đỏ gạch, dùng cho quốc gia thứ 8 trong bảng màu */
  --data-9: #0D9488; /* xanh ngọc, dùng riêng cho đường "Toàn nhóm" ở biểu đồ ASP */
}

body {
  margin: 0;
  padding: var(--content-pad);
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
}

.page-head h1 {
  margin: 0 0 4px;
  font-size: var(--text-heading-lg);
  color: var(--accent-text);
}

.subtitle { margin: 0 0 var(--section-gap); color: var(--text-tertiary); }

.group-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--section-gap);
}

.group-tabs button {
  padding: 7px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font: inherit;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}

.group-tabs button:hover { background: var(--bg-hover); }

.group-tabs button[aria-pressed="true"] {
  background: var(--accent-btn-bg);
  color: var(--accent-btn-fg);
  border-color: transparent;
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: var(--section-gap);
}

.kpi {
  background: var(--bg-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--card-pad);
}

.kpi .label {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-tertiary);
}

.kpi .value {
  font-size: var(--text-heading-lg);
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}

.card {
  background: var(--bg-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--card-pad);
  margin-bottom: var(--section-gap);
}

.card h2 { margin: 0 0 14px; font-size: var(--text-heading-sm); }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-head h2 { margin-bottom: 0; }

/* card-head đã có sẵn cho card bảng chi tiết; các card chart giờ dùng chung.
   Khoảng cách dưới bằng đúng margin cũ của h2 để bố cục không xô lệch.
   #detail-card loại trừ vì layout cũ của nó chỉ dùng .table-wrap margin-top,
   không cần margin-bottom thêm vào .card-head. */
.card:not(#detail-card) > .card-head { margin-bottom: 14px; }

.chart-wrap { position: relative; height: 320px; }

.btn {
  padding: 6px 13px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font: inherit;
  cursor: pointer;
}

.btn:hover { background: var(--bg-hover); }

/* Bảng rộng phải tự cuộn ngang, không được đẩy cả trang cuộn theo. */
.table-wrap { overflow-x: auto; margin-top: 12px; }

table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }

th, td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-hairline);
  text-align: right;
  white-space: nowrap;
}

th:first-child, td:first-child { text-align: left; position: sticky; left: 0; background: var(--bg-surface); }

thead th { color: var(--text-tertiary); font-weight: 600; font-size: var(--text-body-sm); }

.page-foot {
  color: var(--text-tertiary);
  font-size: var(--text-body-sm);
  line-height: 1.6;
}

.page-foot a { color: var(--accent-text); }

.page-foot .warn {
  background: var(--brand-gold-soft);
  border-left: 3px solid var(--brand-gold);
  border-radius: var(--r-sm);
  padding: 9px 12px;
}

/* Băng cảnh báo dữ liệu cũ, hiển thị phía trên các biểu đồ. Cùng ngôn ngữ
   thị giác với .page-foot .warn (nền vàng nhạt, viền trái vàng đậm) để
   người dùng nhận ra ngay đây cũng là một cảnh báo, không phải nội dung
   chính. */
.staleness-banner {
  background: var(--brand-gold-soft);
  border-left: 3px solid var(--brand-gold);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  margin-bottom: var(--section-gap);
  font-size: var(--text-body-sm);
}

/* Thẻ lỗi khi không tải được dashboard.json. Dùng --trend-down (đỏ) thay
   vì vàng của .warn để phân biệt rõ: đây là LỖI (không có gì để xem),
   không phải một cảnh báo đi kèm dữ liệu vẫn hiển thị bình thường. */
.load-error-card {
  background: var(--bg-surface);
  border-left: 3px solid var(--trend-down);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  margin-bottom: var(--section-gap);
  color: var(--text-primary);
}

.load-error-card strong { color: var(--trend-down); }

/* Ghi chú dưới chart-share khi một nước ẩn trong "Other" lớn hơn nước
   được liệt kê riêng nhỏ nhất trong nhóm — cùng ngôn ngữ thị giác với
   .staleness-banner (vàng nhạt) vì đây cũng là một cảnh báo về dữ liệu,
   không phải nội dung chính. */
.other-note {
  background: var(--brand-gold-soft);
  border-left: 3px solid var(--brand-gold);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  margin-top: var(--section-gap);
  font-size: var(--text-body-sm);
}

/* Dòng cá tra trong bảng master là mốc so sánh của cả tab — tô nhẹ để mắt
   luôn quay về được, không tô đậm quá kẻo lấn át các dòng còn lại. */
#master-table tr.row-base td {
  background: var(--accent-soft);
  font-weight: 600;
}

.master-hint {
  margin: 10px 0 0;
  color: var(--text-tertiary);
  font-size: var(--text-body-sm);
}

/* hidden mặc định bị display:table/flex của các quy tắc khác đè mất. */
[hidden] { display: none !important; }