/* ==========================================================================
   GLOBAL PROSPERITY MEDIA — ADMIN DASHBOARD THEME (Design.md §2, §3, §4, §5, §6)
   ========================================================================== */

:root {
  /* ===== Thương hiệu (§2.2) ===== */
  --gpm-red:        #EC1C24; /* Khối vuông logo, viền, icon lớn. KHÔNG dùng cho chữ thường */
  --gpm-red-ink:    #C4141A; /* Bắt buộc dùng cho chữ màu đỏ, số âm (Chuẩn AA 6.07:1 - §2.3) */
  --gpm-red-050:    #FDECEC;
  --gpm-black:      #0D0D0D; /* Nút hành động chính, nền sidebar */

  /* ===== Chữ & nền ===== */
  --gpm-ink:        #2B2B2B; /* Màu chữ chính */
  --gpm-ink-2:      #5A5A5C; /* Chữ phụ, nhãn */
  --gpm-ink-3:      #8A8A8E; /* Placeholder, chữ mờ */
  --gpm-line:       #E3E4E6; /* Viền kẻ card, bảng */
  --gpm-bg:         #F5F6F7; /* Nền trang */
  --gpm-surface:    #FFFFFF; /* Nền khối nội dung */

  /* ===== Ngữ nghĩa ===== */
  --gpm-pos:        #0F7B47;
  --gpm-pos-050:    #E9F5EE;
  --gpm-neg:        #C4141A;
  --gpm-neg-050:    #FDECEC;
  --gpm-warn:       #B45309;
  --gpm-warn-050:   #FEF3E2;
  --gpm-info:       #1D5FAA;
  --gpm-info-050:   #EAF1FA;
  --gpm-neutral-050:#E3E4E6;

  /* ===== Khoảng cách & Bo góc ===== */
  --gpm-r-sm: 4px;   /* Badge, input */
  --gpm-r-md: 8px;   /* Card, nút */
  --gpm-r-lg: 12px;  /* Modal, panel lớn */
  --gpm-sh-1: 0 1px 2px rgba(13,13,13,.06);
  --gpm-sh-2: 0 2px 8px rgba(13,13,13,.08);

  /* ===== Kích thước khung (§3) ===== */
  --gpm-sidebar-w:           248px;
  --gpm-sidebar-w-collapsed: 64px;
  --gpm-topbar-h:            56px;

  /* ===== Override Bootstrap 5.3 (§3) ===== */
  --bs-body-bg:          var(--gpm-bg);
  --bs-body-color:       var(--gpm-ink);
  --bs-border-color:     var(--gpm-line);
  --bs-font-sans-serif: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --bs-body-font-size:   14px;
  --bs-body-line-height: 1.5;
}

/* ===== BASE & TYPOGRAPHY (§4) ===== */
body {
  font-family: var(--bs-font-sans-serif);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Bắt buộc cho ô chứa số (§4) */
.gpm-num, .gpm-table td, .gpm-stat__value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ===== VIỀN FOCUS (§6.3) =====
   Đen chứ không đỏ. Đỏ chỉ dành cho thứ có nghĩa — số âm, lỗi, logo (§2.4); bôi đỏ lên mọi ô
   đang gõ là đỏ trang trí, và làm hỏng luôn quy ước "thấy đỏ là có chuyện".
   #0D0D0D trên nền trắng đạt 19:1, thừa ngưỡng 3:1 mà WCAG 2.2 (2.4.11) đòi cho viền focus. */

/* Thứ KHÔNG có sẵn viền: dùng vòng outline bên ngoài. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--gpm-black);
  outline-offset: 2px;
}

/* Ô nhập ĐÃ có viền sẵn. Thêm vòng outline nữa là hai viền lồng nhau, xấu và rối mắt —
   làm đậm chính cái viền đang có là đủ.
   box-shadow chứ không tăng border-width: đổi độ dày viền sẽ đẩy layout nhích 1px mỗi lần
   focus, cả form giật theo. box-shadow nằm ngoài luồng bố cục nên không đẩy gì cả. */
input:not([type="checkbox"]):not([type="radio"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--gpm-black);
  box-shadow: 0 0 0 1px var(--gpm-black);
}

/* Bootstrap gắn sẵn cho .btn-close một vòng box-shadow XANH (màu primary mặc định của nó) ở
   trạng thái :focus — không phải :focus-visible, nên nó hiện cả khi bấm chuột. Vòng xanh giữa
   một giao diện đỏ-đen-xám trông như lỗi hiển thị. Gỡ đi rồi trả về vòng đen chung. */
.btn-close:focus { box-shadow: none; }

.btn-close:focus-visible {
  outline: 2px solid var(--gpm-black);
  outline-offset: 2px;
}

/* Hiệu ứng mượt khi thu gọn Sidebar */
.gpm-sidebar, .gpm-topbar, .gpm-main {
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              margin-left 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== KHUNG TRANG (§5) ===== */
/* Sidebar */
.gpm-sidebar {
  width: var(--gpm-sidebar-w);
  background-color: var(--gpm-black);
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 1030;
  display: flex;
  flex-direction: column;
}

.gpm-sidebar__logo {
  height: var(--gpm-topbar-h);
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.gpm-sidebar__menu {
  list-style: none;
  padding: 12px 0;
  margin: 0;
  overflow-y: auto;
  flex-grow: 1;

  /* Thanh cuộn mảnh và cùng tông với nền đen.
     Mặc định của Windows/Chrome rộng ~16px, nền rãnh màu xám sáng — đặt lên nền đen thì thành một
     vệt sáng chạy dọc suốt chiều cao menu, đọc như lỗi hiển thị chứ không như một thanh cuộn.
     Ẩn hẳn thì mất luôn dấu hiệu "còn mục ở dưới", nên làm mảnh chứ không bỏ. */
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

/* Safari và WebKit cũ chưa nhận scrollbar-width. Chromium BỎ QUA khối này khi phần tử đã khai
   scrollbar-width ở trên, nên hai đường không đá nhau — cố ý để cùng một hình dạng ở cả hai. */
.gpm-sidebar__menu::-webkit-scrollbar {
  width: 6px;
}

.gpm-sidebar__menu::-webkit-scrollbar-track {
  background: transparent;
}

.gpm-sidebar__menu::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.22);
  border-radius: 3px;
}

.gpm-sidebar__menu::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

.gpm-sidebar__group {
  font-size: 11px;
  font-weight: 700;
  color: var(--gpm-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 16px 16px 4px 16px;
}

.gpm-sidebar__item a {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  font-size: 14px;
  gap: 12px;
  position: relative;
  white-space: nowrap;
}

.gpm-sidebar__item a:hover {
  background-color: rgba(255,255,255,0.06);
  color: #FFF;
}

.gpm-sidebar__item--active a {
  background-color: rgba(255,255,255,0.10);
  color: #FFF;
  font-weight: 600;
}

/* Vệt đỏ duy nhất trên Sidebar khi active (§2.4, §5.1) */
.gpm-sidebar__item--active a::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background-color: var(--gpm-red);
}

/* Nút Toggle ở đáy Sidebar */
.gpm-sidebar__footer {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 8px 12px;
}

/* Topbar */
.gpm-topbar {
  height: var(--gpm-topbar-h);
  background-color: var(--gpm-surface);
  border-bottom: 1px solid var(--gpm-line);
  position: sticky;
  top: 0;
  z-index: 1020;
  margin-left: var(--gpm-sidebar-w);
  display: flex;
  align-items: center;
  padding: 0 24px;
  justify-content: space-between;
}

/* Main Content
   ------------------------------------------------------------------
   KHÔNG đặt max-width ở đây. Trước có `max-width: 1600px` và nó làm hỏng đúng cái nút thu gọn
   sidebar: thu gọn xong sidebar nhường lại 184px, nhưng phần nội dung vẫn bị chặn ở 1600px nên
   khoảng vừa nhường ra nằm trống bên phải — bấm thu gọn mà không được gì.

   Chặn bề ngang mà KHÔNG căn giữa thì mọi khoảng dư đều dồn về một phía và trông như lỗi dựng
   trang. Nếu sau này thật sự cần chặn (màn siêu rộng, bảng dài quá mỏi mắt) thì phải căn giữa
   phần dư, đừng đặt lại mỗi max-width.

   Thanh trên cùng vốn không có chặn nào, nên bảng cũ còn hụt hơn cả thanh tiêu đề của chính nó. */
.gpm-main {
  margin-left: var(--gpm-sidebar-w);
  padding: 24px;
}

/* Ô tóm tắt lỗi của ASP.NET vẫn render khi KHÔNG có lỗi nào — chỉ khác ở class. Để nguyên thì mọi
   trang có form đều mở đầu bằng một thanh đỏ rỗng, và người dùng đọc nó như "đang có lỗi gì đó".
   Sửa ở đây một lần thay vì bọc @if quanh 9 chỗ: chỗ nào quên bọc là lại hiện thanh đỏ rỗng. */
.alert.validation-summary-valid { display: none; }

/* ===== TRẠNG THÁI SIDEBAR THU GỌN (COLLAPSED - §5.1) ===== */
body.gpm-sidebar--collapsed .gpm-sidebar {
  width: var(--gpm-sidebar-w-collapsed);
}

body.gpm-sidebar--collapsed .gpm-sidebar__logo .gpm-logo-text,
body.gpm-sidebar--collapsed .gpm-sidebar__menu span,
body.gpm-sidebar--collapsed .gpm-sidebar__group,
body.gpm-sidebar--collapsed .gpm-sidebar__footer span {
  display: none !important;
}

body.gpm-sidebar--collapsed .gpm-sidebar__logo {
  justify-content: center;
  padding: 0;
}

body.gpm-sidebar--collapsed .gpm-sidebar__logo svg {
  margin: 0 !important;
}

body.gpm-sidebar--collapsed .gpm-sidebar__item a {
  justify-content: center;
  padding: 0;
}

body.gpm-sidebar--collapsed .gpm-sidebar__item a i {
  font-size: 16px;
  margin: 0 !important;
}

body.gpm-sidebar--collapsed .gpm-topbar,
body.gpm-sidebar--collapsed .gpm-main {
  margin-left: var(--gpm-sidebar-w-collapsed);
}

body.gpm-sidebar--collapsed #btnToggleSidebar i {
  transform: rotate(180deg);
}

/* ===== COMPONENTS (§6) ===== */
/* Nút (§6.3) */
.btn-gpm {
  background-color: var(--gpm-black); /* Nút chính dùng màu đen, KHÔNG dùng đỏ (§2.4) */
  color: #FFF;
  border: none;
  border-radius: var(--gpm-r-md);
  padding: 6px 16px;
  font-weight: 500;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-gpm:hover { background-color: #262626; color: #FFF; }

.btn-gpm-outline {
  background-color: transparent;
  border: 1px solid var(--gpm-line);
  color: var(--gpm-ink);
  border-radius: var(--gpm-r-md);
  padding: 6px 16px;
  font-weight: 500;
  font-size: 14px;
}
.btn-gpm-outline:hover { background-color: var(--gpm-bg); }

/* Thanh lọc dùng chung cho /ads/campaigns và /ads/creatives
   ---------------------------------------------------------
   Dùng flex chứ KHÔNG dùng lưới 12 cột: với lưới thì mỗi ô chiếm một phần cố định của bề ngang,
   nên trên màn rộng nút "Lọc" bị kéo dài thành một mảng đen chiếm 1/6 màn hình cho ba chữ cái.
   Ở đây ô tìm kiếm là thứ DUY NHẤT co giãn, còn lại vừa đúng nội dung của nó. */
.gpm-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

/* Ô tìm kiếm nuốt hết chỗ thừa. Cơ sở 260px để khi xuống dòng nó vẫn đủ rộng để gõ. */
.gpm-filter__grow { flex: 1 1 260px; min-width: 220px; }

.gpm-filter__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--gpm-ink);
}

/* Công tắc: mặc định Bootstrap cao 1em, đứng cạnh ô nhập 38px thì nhìn như một dấu chấm.
   Bọc trong khung cùng chiều cao với ô nhập để cả hàng thẳng một đường chân. */
.gpm-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 14px 0 12px;
  margin: 0;
  border: 1px solid var(--gpm-line);
  border-radius: var(--gpm-r-md);
  background: #FFF;
  cursor: pointer;
  white-space: nowrap;
}
/* Gỡ padding/margin âm mà .form-check dựng sẵn cho kiểu xếp thường — ở đây flex lo khoảng cách,
   để nguyên thì công tắc bị đẩy lệch ra ngoài khung. */
.gpm-switch.form-check { padding-left: 12px; }
.gpm-switch .form-check-input {
  width: 2.5em;
  height: 1.25em;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}
.gpm-switch .form-check-label {
  margin: 0;
  font-size: 13px;
  cursor: pointer;
}
.gpm-switch:has(.form-check-input:checked) {
  border-color: var(--gpm-ink);
  background: var(--gpm-bg);
}

/* Nút trong thanh lọc cao bằng ô nhập, rộng vừa chữ. */
.gpm-filter .btn { height: 38px; }

/* Ô chọn khoảng ngày (Views/Shared/_DateRangePicker.cshtml)
   --------------------------------------------------------
   Một ô trên thanh lọc, bung ra thành bảng preset + khoảng tự chọn — tham chiếu Voluum.
   Dùng dropdown của Bootstrap (đã nạp sẵn ở _Layout) chứ không viết bộ đóng/mở riêng: phần khó
   là đóng khi bấm ra ngoài, khi bấm Esc, và định vị lại khi panel chạm mép màn hình. */
.gpm-daterange { position: relative; }

/* .form-select vẽ sẵn mũi tên xổ xuống nên nút trông giống hệt các ô chọn bên cạnh — người dùng
   không phải học một hình dạng mới. text-align phải đặt lại vì <button> mặc định căn giữa. */
.gpm-daterange__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  min-width: 190px;
  text-align: left;
  white-space: nowrap;
}
.gpm-daterange__toggle i { color: var(--gpm-ink-3); }
/* Nút trong thanh lọc bị ép height 38px ở luật trên; nút này cũng 38px nên không cần gỡ. */

.gpm-daterange__panel {
  display: none;
  padding: 0;
  border: 1px solid var(--gpm-line);
  border-radius: var(--gpm-r-md);
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14);
  min-width: 420px;
}
/* Bootstrap bật .show khi mở. Khai display ở đây thay vì để mặc định của .dropdown-menu vì ta cần
   flex cho hai cột, mà .dropdown-menu.show đặt display:block. */
.gpm-daterange__panel.show { display: flex; }

.gpm-daterange__presets {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  border-right: 1px solid var(--gpm-line);
  min-width: 150px;
}

.gpm-daterange__preset {
  padding: 7px 16px;
  font-size: 13px;
  color: var(--gpm-ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.gpm-daterange__preset:hover { background: var(--gpm-bg); color: var(--gpm-ink); }
.gpm-daterange__preset.is-active {
  font-weight: 600;
  color: var(--gpm-ink);
  background: var(--gpm-bg);
}

.gpm-daterange__custom { padding: 12px 16px 14px; min-width: 250px; }

.gpm-daterange__custom-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gpm-ink-3);
  margin-bottom: 8px;
}

.gpm-daterange__custom label {
  display: block;
  font-size: 12px;
  color: var(--gpm-ink-2);
  margin: 8px 0 4px;
}

.gpm-daterange__hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--gpm-ink-3);
}

/* Màn hẹp: panel rộng hơn cả ô nhập nên phải cho nó xuống dòng, không thì nó tràn ra ngoài
   khung thẻ và một nửa số preset nằm ngoài màn hình. */
@media (max-width: 575.98px) {
  .gpm-daterange__panel { min-width: 0; flex-direction: column; }
  .gpm-daterange__presets { border-right: 0; border-bottom: 1px solid var(--gpm-line); }
}

.btn-gpm-ghost {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.72);
  border-radius: var(--gpm-r-md);
}
.btn-gpm-ghost:hover { color: #FFF; background: rgba(255,255,255,0.1); }

/* Cùng nút đó nhưng đặt trên topbar NỀN TRẮNG
   -------------------------------------------
   .btn-gpm-ghost sinh ra cho sidebar nền đen nên chữ để màu TRẮNG. Đem nguyên lên topbar nền
   trắng thì chữ trắng trên nền trắng: tên người dùng và mũi tên xổ xuống vẫn chiếm đủ chỗ nhưng
   KHÔNG nhìn thấy — nhìn ra đúng như một khoảng trắng thừa bên phải ô avatar, tưởng là thiếu
   padding trong khi thật ra là chữ tàng hình.

   Đây là kiểu hỏng không ai báo được: không lỗi, không cảnh báo, chỉ là một khoảng trống. Nút
   hamburger từng dính đúng lỗi này và được vá riêng bằng `.text-dark` ngay trên thẻ — vá kiểu đó
   thì nút thứ ba, thứ tư thêm sau lại dính lại. Sửa một lần theo ngữ cảnh ở đây.

   :hover cũng phải sửa: bản gốc đổi chữ sang trắng khi rê chuột, tức trỏ vào là chữ biến mất. */
.gpm-topbar .btn-gpm-ghost { color: var(--gpm-ink); }
.gpm-topbar .btn-gpm-ghost:hover { color: var(--gpm-ink); background: var(--gpm-bg); }

/* Card (§6.1) */
.gpm-card {
  background: var(--gpm-surface);
  border: 1px solid var(--gpm-line);
  border-radius: var(--gpm-r-md);
  box-shadow: var(--gpm-sh-1);
  margin-bottom: 24px;
}
.gpm-card__head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--gpm-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gpm-card__title { font-size: 14px; font-weight: 600; margin: 0; color: var(--gpm-ink); }
.gpm-card__body { padding: 16px; }
.gpm-card__body--nopad { padding: 0; }

/* Chân card — dùng cho thanh phân trang ở máy chủ. Có vạch ngăn phía trên vì nếu không, dãy số
   trang trông như trôi tự do dưới dòng cuối của bảng và không rõ nó thuộc bảng nào. */
.gpm-card__foot {
  padding: 10px 16px;
  border-top: 1px solid var(--gpm-line);
}

/* Tiêu đề cột bấm được để sắp xếp.
   ---------------------------------
   Mũi tên LUÔN chiếm chỗ, kể cả cột đang không sắp (lúc đó là biểu tượng mờ hai chiều): hiện mũi
   tên chỉ khi hover thì không ai biết cột nào bấm được, còn hiện/ẩn theo trạng thái thì bề ngang
   tiêu đề nhảy mỗi lần đổi cột và cả bảng giật sang một bên. */
.gpm-sort {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.gpm-sort:hover { color: var(--gpm-ink); text-decoration: underline; }
.gpm-sort i { font-size: 10px; opacity: 0.35; }
.gpm-sort--on { font-weight: 700; color: var(--gpm-ink); }
.gpm-sort--on i { opacity: 1; }

/* Stat Card (§6.2 - Tách lead_fee / sold_lead) */
.gpm-stat {
  background: var(--gpm-surface);
  border: 1px solid var(--gpm-line);
  border-radius: var(--gpm-r-md);
  padding: 16px;
  box-shadow: var(--gpm-sh-1);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.gpm-stat__label { font-size: 12px; font-weight: 600; color: var(--gpm-ink-2); text-transform: uppercase; }
.gpm-stat__value { font-size: 28px; font-weight: 700; margin: 8px 0 4px 0; line-height: 1.1; }
.gpm-stat__cur { font-size: 14px; font-weight: 400; color: var(--gpm-ink-3); margin-left: 4px; }
.gpm-stat__split { font-size: 12px; color: var(--gpm-ink-2); background: var(--gpm-bg); padding: 4px 8px; border-radius: var(--gpm-r-sm); margin-bottom: 8px; }
.gpm-stat__sep { display: inline-block; width: 1px; height: 10px; background: var(--gpm-line); margin: 0 6px; }
.gpm-stat__delta { font-size: 12px; font-weight: 600; }
.gpm-stat__delta--up { color: var(--gpm-pos); }
.gpm-stat__delta--bad { color: var(--gpm-red-ink); }
.gpm-stat__partial { font-size: 11px; color: var(--gpm-warn); background: var(--gpm-warn-050); padding: 4px 8px; border-radius: var(--gpm-r-sm); margin-top: 8px; display: flex; align-items: center; gap: 6px; }

/* Bảng dữ liệu (§6.4) */
.gpm-table-wrap { overflow-x: auto; max-height: 600px; }

/* Bảng đã có phân trang (DataTables) thì BỎ khung cuộn trong.
   Hai thanh cuộn lồng nhau là thứ tệ nhất: cuộn trang tới cuối vẫn chưa thấy hết dòng, phải nhận
   ra còn một khung nhỏ bên trong rồi cuộn tiếp — mà nút chuyển trang lại nằm ngoài khung đó.
   Số dòng vốn đã bị phân trang giới hạn nên không còn lý do gì phải chặn chiều cao.

   Hai class để thắng .gpm-table-wrap của CSS theo trang: file đó nạp SAU gpm-theme.css nên cùng
   độ ưu tiên thì nó thắng. */
.gpm-table-wrap.gpm-table-wrap--full { max-height: none; }

/* Bỏ luôn 'bám dính' cho biến thể này. Giữ 'overflow-x: auto' để bảng rộng còn cuộn ngang được,
   mà như vậy khung vẫn là một vùng cuộn — sticky sẽ neo vào khung đó chứ không vào cửa sổ, và
   khung thì không bao giờ cuộn dọc nữa nên hàng tiêu đề chỉ đứng yên một chỗ trông như bị lỗi.
   Thà cho nó cuộn theo trang như một hàng bình thường. */
.gpm-table-wrap--full .gpm-table thead th { position: static; }
.gpm-table { margin: 0; width: 100%; font-size: 14px; border-collapse: separate; border-spacing: 0; }
.gpm-table thead th {
  font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--gpm-ink-2);
  background-color: var(--gpm-surface); border-bottom: 2px solid var(--gpm-line);
  padding: 10px 12px; letter-spacing: 0.04em; position: sticky; top: 0; z-index: 2;
}
.gpm-table tbody td { padding: 8px 12px; border-bottom: 1px solid var(--gpm-line); height: 40px; }
.gpm-table tbody tr:hover { background-color: #FAFAFB; }
.gpm-table tfoot tr td { background-color: #FAFAFB; font-weight: 600; border-top: 2px solid var(--gpm-line); padding: 10px 12px; }
.gpm-empty-cell { color: var(--gpm-ink-3); }

/* Ô tiền có dấu — lãi xanh, lỗ đỏ. Dùng qua partial _ProfitCell, đừng gõ lại inline style:
   ba màn hình quảng cáo xếp cạnh nhau, luật màu lệch một chỗ là người đọc không biết tin màn nào.
   Số 0 để màu chữ thường vì nó gần như luôn là "chưa có số" chứ không phải "hoà vốn thật". */
.gpm-money { font-variant-numeric: tabular-nums; }
.gpm-money--pos  { color: var(--gpm-pos); }
.gpm-money--neg  { color: var(--gpm-red-ink); }
.gpm-money--zero { color: var(--gpm-ink-3); }

/* Badge (§6.6, §7) */
.gpm-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; padding: 2px 8px;
  border-radius: var(--gpm-r-sm); line-height: 1.5; white-space: nowrap;
}
.gpm-badge--pos { background: var(--gpm-pos-050); color: var(--gpm-pos); }
.gpm-badge--warn { background: var(--gpm-warn-050); color: var(--gpm-warn); }
.gpm-badge--neg { background: var(--gpm-neg-050); color: var(--gpm-red-ink); }
.gpm-badge--neutral { background: var(--gpm-neutral-050); color: var(--gpm-ink-2); }

/* Độ phủ theo nhiều khâu trong MỘT ô bảng — ví dụ "ads 12/17 · kịch bản 0/17 · video 3/17".
   Lưới hai cột nhãn–số thay vì mấy cái badge xếp chồng: badge trong ô hẹp thì tự xuống dòng và
   dính thành một khối xám lổn nhổn, còn số thì không thẳng cột nên phải dò bằng mắt từng dòng.
   Chỉ con số mang màu — tô cả dòng thì ba màu cạnh nhau tranh nhau sự chú ý. */
.gpm-coverage {
  display: inline-grid; grid-template-columns: auto auto; gap: 1px 10px;
  font-size: 11px; line-height: 1.6; color: var(--gpm-ink-3); white-space: nowrap;
}
.gpm-coverage b { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* Dải cảnh báo (§6.9) */
.gpm-note {
  padding: 12px 16px; border-radius: var(--gpm-r-md); font-size: 13px; margin-bottom: 20px;
  display: flex; align-items: center; gap: 12px;
}
.gpm-note--warn { background: var(--gpm-warn-050); border-left: 3px solid var(--gpm-warn); color: var(--gpm-ink); }

/* Indicator Sync runs (§6.10) */
.gpm-sync-indicator { font-size: 12px; display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--gpm-ink-2); }
.gpm-sync-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.gpm-sync-dot--success { background-color: var(--gpm-pos); }
.gpm-sync-dot--failed { background-color: var(--gpm-red); }
.gpm-sync-dot--running { background-color: var(--gpm-info); }

/* Chưa biết trạng thái. Bắt buộc phải có: dùng tạm chấm xanh khi chưa đọc được sync_runs là nói
   dối người dùng rằng dữ liệu đang tươi — sai lệch đúng theo hướng khiến họ tin vào số cũ. */
.gpm-sync-dot--unknown { background-color: var(--gpm-ink-3); }

/* Filter Bar (§6.5) */
.gpm-filter-bar {
  background: var(--gpm-surface); border: 1px solid var(--gpm-line); border-radius: var(--gpm-r-md);
  padding: 12px 16px; margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
}

/* Bảng có phân trang (DataTables + Bootstrap 5)
   ----------------------------------------------
   DataTables dựng phân trang bằng đúng .pagination của Bootstrap, nên chỉ cần đè bộ biến
   --bs-pagination-* là xong — không đụng vào CSS của thư viện, nâng cấp bản mới không mất.

   Trang đang chọn dùng ĐEN chứ không đỏ: đỏ là màu thương hiệu dành cho viền và icon lớn, còn
   nút hành động chính của cả app là đen (§2.4, xem .btn-gpm). Để xanh mặc định của Bootstrap thì
   nó là màu duy nhất trong toàn giao diện không thuộc bảng màu nào. */
.pagination {
  --bs-pagination-color:               var(--gpm-ink);
  --bs-pagination-bg:                  var(--gpm-surface);
  --bs-pagination-border-color:        var(--gpm-line);
  --bs-pagination-border-radius:       var(--gpm-r-sm);
  --bs-pagination-hover-color:         var(--gpm-ink);
  --bs-pagination-hover-bg:            var(--gpm-bg);
  --bs-pagination-hover-border-color:  var(--gpm-line);
  --bs-pagination-focus-color:         var(--gpm-ink);
  --bs-pagination-focus-bg:            var(--gpm-bg);
  --bs-pagination-focus-box-shadow:    0 0 0 .2rem rgba(13,13,13,.12);
  --bs-pagination-active-color:        #FFF;
  --bs-pagination-active-bg:           var(--gpm-black);
  --bs-pagination-active-border-color: var(--gpm-black);
  --bs-pagination-disabled-color:      var(--gpm-ink-3);
  --bs-pagination-disabled-bg:         var(--gpm-surface);
  --bs-pagination-disabled-border-color: var(--gpm-line);
  font-size: 13px;
}

/* Ô tìm kiếm và ô chọn số dòng của DataTables vẫn ăn viền xanh lúc focus vì đó là .form-control
   của Bootstrap. Chỉ đổi trong phạm vi bảng, không đổi toàn app — đổi hết là một quyết định giao
   diện rộng hơn nhiều so với việc sửa cho hết chỗ chỏi màu. */
.dt-container .form-control:focus,
.dt-container .form-select:focus {
  border-color: var(--gpm-ink-3);
  box-shadow: 0 0 0 .2rem rgba(13,13,13,.10);
}

.dt-container .dt-search label,
.dt-container .dt-length label,
.dt-container .dt-info { font-size: 13px; color: var(--gpm-ink-2); }

/* Đệm cho hàng điều khiển khi thân card KHÔNG có padding
   ------------------------------------------------------
   .gpm-card__body--nopad cố ý bỏ padding để BẢNG tràn sát mép — cột dính bên trái cần hết chiều
   ngang, và bảng có viền riêng nên tràn mép trông vẫn liền. Nhưng DataTables chèn thêm ô tìm kiếm,
   ô chọn số dòng, dòng đếm và phân trang vào cùng khung đó, mà chúng là CHỮ và nút: dính sát viền
   trắng thì vừa khó đọc vừa trông như bị lỗi.

   Đệm MỌI hàng con rồi gỡ lại đúng hàng chứa bảng, chứ không nhắm thẳng vào hàng điều khiển:
   bản Bootstrap 5 của DataTables GHI ĐÈ tên class của hàng thành "row mt-2 justify-content-between"
   và bỏ mất .dt-layout-row, nên chọn theo tên đó thì luật này im lặng không ăn. Viết ngược lại như
   dưới đây thì ca xấu nhất chỉ là bảng bị thụt vào 16px — nhìn vẫn được, không vỡ.

   margin: 0 là bắt buộc: .row của Bootstrap có margin âm hai bên, để nguyên thì phần đệm vừa thêm
   bị kéo ngược lại đúng bằng chừng đó và trông như không có gì thay đổi. */
.gpm-card__body--nopad .dt-container > * {
  padding-left: 16px;
  padding-right: 16px;
  margin-left: 0;
  margin-right: 0;
}

/* Trả lại tràn mép cho hàng chứa bảng — đó chính là thứ --nopad sinh ra để có. */
.gpm-card__body--nopad .dt-container > .dt-layout-table {
  padding-left: 0;
  padding-right: 0;
}

/* Hàng đầu (chọn số dòng + ô tìm) và hàng cuối (đếm + phân trang) cần khoảng thở dọc: chúng nằm
   ngay sát tiêu đề card ở trên và mép card ở dưới. */
.gpm-card__body--nopad .dt-container > *:first-child { padding-top: 12px; }

/* Vạch ngăn trên hàng phân trang. Không có nó thì số trang trông như trôi tự do ngay dưới dòng
   cuối của bảng, không rõ thuộc về bảng nào khi trên trang có nhiều bảng. */
.gpm-card__body--nopad .dt-container > *:last-child {
  padding-top: 12px;
  padding-bottom: 14px;
  border-top: 1px solid var(--gpm-line);
}

/* Hộp xác nhận (SweetAlert2)
   ---------------------------
   gpm-ui.js đặt buttonsStyling: false để hai nút dùng đúng .btn của Bootstrap thay vì màu mặc
   định của thư viện. Đổi lại, SweetAlert2 bỏ luôn phần margin nó vốn gắn kèm màu — nên không có
   dòng gap dưới đây thì hai nút DÍNH LIỀN nhau, và người dùng dễ bấm nhầm Xoá khi định bấm Huỷ. */
.swal2-actions { gap: 10px; }

/* Kéo hộp thoại về đúng ngôn ngữ hình ảnh của các card còn lại. */
.swal2-popup { border-radius: var(--gpm-r-lg); font-size: 14px; }
.swal2-title { font-size: 17px; font-weight: 700; color: var(--gpm-ink); }
.swal2-html-container { font-size: 13px; color: var(--gpm-ink-2); }

/* RESPONSIVE RESPONSIVE RESPONSIVE (< 992px) (§5.1) */
@media (max-width: 991.98px) {
  .gpm-sidebar {
    transform: translateX(-100%);
    width: var(--gpm-sidebar-w) !important;
  }
  .gpm-topbar, .gpm-main {
    margin-left: 0 !important;
  }
  body.gpm-sidebar--open .gpm-sidebar {
    transform: translateX(0);
    box-shadow: var(--gpm-sh-3);
  }
}