/* ============================================================================
   Khu quản trị — bộ CSS riêng, không dùng chung với hai site kia.

   ── Vì sao không dùng lại css của app ───────────────────────────────────────
   Bộ kia dựng cho một màn hình trò chuyện: chữ to, khoảng thở rộng, mỗi thẻ là
   một đối tượng tách bạch. Màn hình này thì ngược lại — nó là thứ để QUÉT MẮT
   và thao tác: hàng dày, số thẳng cột, trạng thái đọc được trong nửa giây.

   Và một lý do nữa: tách bộ tệp ra nghĩa là mã của khu quản trị không nằm trong
   gói mà mọi người dùng thường phải tải về.

   ── Nhưng vẫn phải là SkyRecall ─────────────────────────────────────────────
   Màu nhấn và bộ phông lấy đúng của hai site kia (#0060f0, system-ui). Bản đầu
   dùng một màu chàm khác và Segoe UI — nó trông ổn, nhưng mở cạnh app thì đọc
   ra như phần mềm của một hãng khác. Ba site phải là một sản phẩm.

   ── Thang chữ ───────────────────────────────────────────────────────────────
   11.5 nhãn hoa · 12.5 phụ · 14.5 thân · 16 tiêu đề · 26 số liệu
   Số dùng tabular-nums ở mọi nơi có cột — cả màn hình này là tiền và ngày.
   ============================================================================ */

:root {
  --bg:        #f5f7fa;
  --surface:   #ffffff;
  --sunken:    #eef2f7;
  --line:      #dfe5ee;
  --line-soft: #ebeff5;

  --ink:    #0f1a29;
  --ink-2:  #415065;
  --muted:  #6a798f;

  /* Xanh của SkyRecall, giống hệt skyrecall.com và app. */
  --accent:      #0060f0;
  --accent-ink:  #ffffff;
  --accent-soft: #e6effe;

  /* Ngữ nghĩa cho tiền, TÁCH khỏi màu nhấn: trạng thái phải đọc được ngay cả
     trên một hàng đang được rê chuột hay đang được chọn. */
  --ok:      #0f7a45;
  --ok-bg:   #e2f4ea;
  --warn:    #8f5a00;
  --warn-bg: #fdf0d6;
  --bad:     #b3261e;
  --bad-bg:  #fbe7e5;

  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --shadow-1: 0 1px 2px rgba(15, 26, 41, .05);
  --shadow-2: 0 1px 3px rgba(15, 26, 41, .07), 0 10px 30px rgba(15, 26, 41, .07);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0a121e;
    --surface:   #131d2b;
    --sunken:    #0f1825;
    --line:      #253243;
    --line-soft: #1c2635;

    --ink:    #e9eef6;
    --ink-2:  #aebbcd;
    --muted:  #7c8ca3;

    --accent:      #3d8bff;
    --accent-ink:  #04101f;
    --accent-soft: #142440;

    --ok:      #56cf94;
    --ok-bg:   #0f2e1f;
    --warn:    #ffc861;
    --warn-bg: #322202;
    --bad:     #ff8a80;
    --bad-bg:  #331612;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-2: 0 1px 3px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .38);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14.5px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Số liền cột. Không phải chi tiết trang trí — nó là thứ làm cho việc dò một
   cột số tiền trở nên khả thi. */
.num, .money, .tile .v, td.num, input[type="number"] { font-variant-numeric: tabular-nums; }

/* ── Thanh trên ───────────────────────────────────────────────────────────── */

header.top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 20px;
  padding: 0 20px; height: 56px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
/* color-mix chưa có ở trình duyệt cũ; nền đục hoàn toàn vẫn đọc được, chỉ mất
   hiệu ứng mờ. Khai báo sau để nó chỉ ghi đè khi trình duyệt KHÔNG hiểu. */
@supports not (backdrop-filter: blur(1px)) {
  header.top { background: var(--surface); }
}

.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit; white-space: nowrap;
}
/* Logo cao 30px trên thanh 56px: còn 13px thở mỗi bên. Đổi một trong hai con số
   mà quên con kia là logo hoặc bị nhét chật, hoặc bơi giữa khoảng trống. */
.brand img { height: 30px; width: auto; display: block; }

/* ── Hai bản logo cho hai nền ──────────────────────────────────────────────
   Viết đủ `.brand img.dark` chứ không chỉ `img.dark`: ngay phía trên đã có
   `.brand img { display: block }`, và một bộ chọn hẹp hơn mới thắng được nó.
   Bỏ qua chuyện này thì cả hai bản logo cùng hiện, nằm sát nhau như một logo
   bị nhân đôi — đã gặp đúng vậy ở trang giới thiệu. */
.brand img.dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand img.light { display: none; }
  :root:not([data-theme="light"]) .brand img.dark  { display: block; }
}

.brand span {
  padding: 2px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

header.top nav { display: flex; gap: 2px; margin-right: auto; }
header.top nav button {
  position: relative; padding: 7px 13px; border: 0; border-radius: var(--r-sm);
  cursor: pointer; background: transparent; color: var(--ink-2);
  font: inherit; font-size: 14px; font-weight: 550;
}
header.top nav button:hover { background: var(--sunken); color: var(--ink); }
header.top nav button.on { color: var(--accent); background: var(--accent-soft); }

.who { color: var(--muted); font-size: 13px; white-space: nowrap; }

main { max-width: 1200px; margin: 0 auto; padding: 26px 20px 90px; }
section[hidden] { display: none !important; }

.head { margin-bottom: 18px; }
.head h2 { font-size: 19px; letter-spacing: -.02em; margin: 0 0 5px; }
.head p { margin: 0; max-width: 74ch; color: var(--muted); font-size: 13.5px; }

h2 { font-size: 16px; margin: 0 0 4px; letter-spacing: -.01em; }
.hint { color: var(--muted); font-size: 12.5px; margin: 0 0 14px; }

/* ── Thẻ ──────────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 14px;
  box-shadow: var(--shadow-1);
}

/* ── Ô số liệu ────────────────────────────────────────────────────────────── */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.tile {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 15px 17px; box-shadow: var(--shadow-1);
}
.tile .k {
  color: var(--muted); font-size: 11.5px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
}
.tile .v { margin-top: 7px; font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.tile .s { margin-top: 4px; color: var(--muted); font-size: 12.5px; }

/* Ô báo động: viền trái dày thay vì tô đỏ cả nền. Tô cả nền thì nó át hết ba ô
   bên cạnh; một vạch đỏ đủ để mắt bắt được ngay mà vẫn đọc được con số. */
.tile.alarm { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.tile.alarm::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--bad);
}
.tile.alarm .v { color: var(--bad); }

/* ── Bảng ─────────────────────────────────────────────────────────────────── */

/* Cuộn CẢ HAI chiều bên trong khung, và có trần chiều cao.

   Đây là chỗ đã hỏng một lần: `overflow-x: auto` một mình vẫn biến khung này
   thành vùng cuộn theo cả hai trục (trục kia tự thành `auto` theo spec), nên
   `th { position: sticky; top: 56px }` tính 56px từ mép khung chứ không phải
   từ mép trang — và hàng tiêu đề tụt xuống đè lên đúng dòng đầu tiên.

   Cho khung tự cuộn dọc rồi ghim tiêu đề ở `top: 0` thì vừa hết đè, vừa được
   đúng thứ muốn có: kéo một bảng dài mà vẫn thấy tên cột. */
.tablewrap {
  overflow: auto; max-height: calc(100vh - 240px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-1);
}
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line-soft); }
th {
  position: sticky; top: 0; z-index: 1;
  background: var(--sunken); color: var(--muted);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--sunken); }
td.right, th.right { text-align: right; }
td .sub { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
td strong { font-weight: 620; }

/* Trạng thái mã hoá bằng CẢ màu lẫn chữ. Chỉ màu thì người phân biệt màu kém
   không đọc được, mà đây là màn hình về tiền. */
.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 650; white-space: nowrap;
}
.pill.paid      { background: var(--ok-bg);   color: var(--ok); }
.pill.pending   { background: var(--warn-bg); color: var(--warn); }
.pill.unmatched { background: var(--bad-bg);  color: var(--bad); }
.pill.cancelled,
.pill.expired   { background: var(--sunken);  color: var(--muted); }

/* ── Điều khiển ───────────────────────────────────────────────────────────── */

.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.grow { flex: 1 1 auto; }

button, input, select, textarea {
  font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 8px 11px;
}
input::placeholder { color: var(--muted); }
input:hover, select:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

button { cursor: pointer; font-weight: 570; }
button:hover { border-color: var(--accent); color: var(--accent); }
button.primary {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  box-shadow: var(--shadow-1);
}
button.primary:hover { filter: brightness(1.06); color: var(--accent-ink); }
button.small { padding: 5px 11px; font-size: 12.5px; }
button:disabled { opacity: .45; cursor: default; }
button:disabled:hover { border-color: var(--line); color: var(--ink); filter: none; }

label.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
label.check input { width: 16px; height: 16px; padding: 0; accent-color: var(--accent); }

/* Hàng nhãn – ô nhập. Nhãn rộng cố định để mọi hàng thẳng một mép. */
.field {
  display: grid; grid-template-columns: 320px 1fr; gap: 6px 20px;
  align-items: center; padding: 13px 0; border-top: 1px solid var(--line-soft);
}
.card > .field:first-of-type { border-top: 0; padding-top: 0; }
.field .lb { font-weight: 570; font-size: 14px; }
.field .lb small { display: block; margin-top: 3px; font-weight: 400; color: var(--muted); font-size: 12.5px; }
.field > input, .field > select { width: 100%; max-width: 420px; }

.group-title {
  margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft);
  color: var(--muted); font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}

.note { font-size: 12.5px; color: var(--muted); }
.note.bad { color: var(--bad); }
.note.ok  { color: var(--ok); }

.banner {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 15px; border-radius: var(--r-md); margin-bottom: 14px; font-size: 13.5px;
  background: var(--warn-bg); color: var(--warn);
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}
.banner.bad { background: var(--bad-bg); color: var(--bad); }

.empty { padding: 40px 20px; text-align: center; color: var(--muted); }

/* ── Lưới so sánh gói ─────────────────────────────────────────────────────── */

/* Ba gói nằm CẠNH nhau, mỗi thuộc tính một hàng.

   Bản đầu xếp mỗi gói thành một thẻ dài riêng, bảy hàng chồng lên nhau — phải
   cuộn ba màn hình mới xem hết, và muốn so giá Free với Pro thì phải nhớ một
   con số rồi cuộn đi tìm con kia. Mà so sánh chính là việc người ta tới đây để
   làm. Xếp ngang thì đọc y như bảng giá công khai. */
.plangrid {
  display: grid; gap: 0;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden;
}
.plangrid > div {
  display: grid; grid-template-columns: var(--cols);
  border-top: 1px solid var(--line-soft);
}
.plangrid > div:first-child { border-top: 0; }
.plangrid > div > * {
  padding: 11px 15px; min-width: 0;
  border-left: 1px solid var(--line-soft); display: flex; align-items: center;
}
.plangrid > div > *:first-child { border-left: 0; }

.plangrid .hd { background: var(--sunken); }
.plangrid .hd > * { align-items: baseline; padding-top: 14px; padding-bottom: 14px; }
.plangrid .code { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }

.plangrid .lb { display: block; font-size: 13.5px; font-weight: 550; }
.plangrid .lb small { display: block; margin-top: 2px; font-weight: 400; color: var(--muted); font-size: 12px; }
.plangrid input[type="text"], .plangrid input[type="number"] { width: 100%; }
.plangrid .act { justify-content: flex-start; gap: 10px; flex-wrap: wrap; }

/* ── Hộp thoại ────────────────────────────────────────────────────────────── */

dialog {
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px;
  background: var(--surface); color: var(--ink);
  width: min(540px, calc(100vw - 32px)); box-shadow: var(--shadow-2);
}
dialog::backdrop { background: rgba(8, 14, 24, .5); backdrop-filter: blur(2px); }
dialog h3 { margin: 0 0 5px; font-size: 17px; letter-spacing: -.015em; }

.pick {
  max-height: 210px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sunken);
}
.pick button {
  display: block; width: 100%; text-align: left; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--line-soft); background: transparent; font-weight: 400;
}
.pick button:last-child { border-bottom: 0; }
.pick button:hover { background: var(--accent-soft); color: var(--accent); }
.pick button.on { background: var(--accent); color: var(--accent-ink); }
.pick .sub { display: block; margin-top: 2px; font-size: 12px; opacity: .75; }

/* ── Màn hẹp ──────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  header.top { gap: 10px; padding: 0 13px; }
  /* Màn hẹp: bỏ chữ "Quản trị" và thu logo lại — bốn thẻ ở giữa cần chỗ hơn. */
  .brand span { display: none; }
  .brand img { height: 24px; }
  header.top nav button { padding: 7px 9px; font-size: 13px; }
  .who { display: none; }
  main { padding: 18px 13px 60px; }

  /* Một cột: nhãn nằm trên ô nhập. Hai cột ở đây nghĩa là cột nhãn 320px ăn
     gần hết bề ngang và ô nhập bị bóp thành một khe. */
  .field { grid-template-columns: 1fr; }
  .field > input, .field > select { max-width: none; }

  th { position: static; }
  .tablewrap { max-height: none; }

  /* Lưới gói xoay về dạng dọc: một cột 1fr thì mọi ô tự xếp thành hàng dọc,
     và nhãn đứng ngay trên ô nhập của nó. */
  .plangrid > div { grid-template-columns: 1fr; }
  .plangrid > div > * { border-left: 0; }
  .plangrid > div > *:not(:first-child) { border-top: 1px solid var(--line-soft); }
}