/* ==========================================================================
   PinkAgc V8 — hai bộ giao diện: SÁNG và OBSIDIAN
   Port từ bản dựng `_v8-ui-prototype/`.

   Tệp này nạp SAU `v8.css` và chỉ **hoán lại lớp biến** của nó, cộng thêm
   phần xử lý bề mặt riêng cho Obsidian (kính mờ · quầng sáng · lớp aurora).
   KHÔNG sửa một dòng nào trong `v8.css` — muốn bỏ theme thì xoá đúng một
   dòng <link> trong index.php là xong.

   Bật theme:
     <html>                          → PinkAgc Sáng   (mặc định)
     <html data-theme="light">       → PinkAgc Sáng   (ép sáng)
     <html data-theme="obsidian">    → PinkAgc Obsidian
     <html data-theme="dark">        → PinkAgc Obsidian  (bí danh, giữ tương
                                       thích với giá trị `v8_theme` đã lưu
                                       trong localStorage của khách cũ)
   ========================================================================== */

/* ==========================================================================
   1. PINKAGC SÁNG
   ========================================================================== */
:root,
:root[data-theme="light"] {
  --bg:            #FDF7FB;
  --surface:       #FFFFFF;
  --surface-2:     #FAF7FB;
  --surface-3:     #F2EEF4;
  --border:        #E6DCE8;
  --border-strong: #D6C9DA;

  --ink:           #1C1520;
  --ink-2:         #5B5060;
  --muted:         #7A6F80;

  --accent:        #C2186B;
  --accent-hi:     #FF5CB3;
  --accent-deep:   #A31058;
  --accent-soft:   #FDEAF3;
  --on-accent:     #FFFFFF;

  --good: #12855B;  --good-soft: #E6F7F0;
  --warn: #B4690E;  --warn-soft: #FDF3E3;
  --crit: #D21F2E;  --crit-soft: #FDEAEC;
  --info: #7B4FD8;

  --head-a: #8C0D4B;  --head-b: #E0338C;
  /* Nền gradient của cả khung (thanh đầu trang + dải tab + rìa quanh canvas) */
  --head-grad:   linear-gradient(115deg, #8C0D4B 0%, #C2186B 46%, #E0338C 100%);
  --brand-solid: linear-gradient(180deg, #FF8CC8 -14.8%, #D92A83 43.22%, #A31058 100%);

  --shadow: 0 1px 3px rgba(28,21,32,.07), 0 10px 28px -14px rgba(28,21,32,.20);
  --radius: 14px;

  /* Biến riêng của lớp theme này */
  --glow:      0 6px 16px -6px rgba(194,24,107,.45);
  --glass:     var(--surface);
  --glass-blur: none;
  --aurora:    none;
  --pin-shadow: 1px 0 0 var(--border);
}

/* Thanh đầu trang: 3 chặng thay vì 2 — chặng giữa giữ sắc hồng thương hiệu,
   nếu chỉ nội suy đậm→nhạt thì khúc giữa bị ngả tím. */
.head { background: var(--head-grad); }

/* ==========================================================================
   2. PINKAGC OBSIDIAN
   ========================================================================== */
:root[data-theme="obsidian"],
:root[data-theme="dark"] {
  --bg:            #14101A;
  --surface:       #1A1522;
  --surface-2:     #1F1929;
  --surface-3:     #251D30;
  /* Viền để ĐỤC (không dùng rgba): V8 vẽ viền hàng bảng và ghim 2 cột đầu
     bằng box-shadow — viền trong suốt sẽ cộng dồn khi cột ghim chồng lên
     nội dung cuộn phía dưới. */
  --border:        #2A2233;
  --border-strong: #3A3046;

  --ink:           #F3ECF6;
  --ink-2:         #C3B4CC;
  --muted:         #9B8BA6;

  --accent:        #FF5CB3;
  --accent-hi:     #FF8ECB;
  --accent-deep:   #E0338C;
  /* Cũng phải đục: V8 dùng --accent-soft làm nền ĐẶC cho ô ghim của hàng
     đang chọn (#tbl tbody tr.sel td:first-child). */
  --accent-soft:   #2C1B28;
  /* Chữ tối trên hồng sáng — tương phản 8.9:1. Chữ trắng trên #FF5CB3 chỉ
     được 2.4:1, không đạt ngưỡng đọc. */
  --on-accent:     #1A0512;

  --good: #3DDC97;  --good-soft: #12291F;
  --warn: #F5B544;  --warn-soft: #33240F;
  --crit: #FF6B7A;  --crit-soft: #331A1C;
  --info: #A78BFA;

  --head-a: #1B0F1E;  --head-b: #6A1A4B;
  --head-grad:   linear-gradient(115deg, #1B0F1E 0%, #351330 42%, #6A1A4B 100%);
  --brand-solid: linear-gradient(160deg, #FF8ECB 0%, #FF5CB3 46%, #E0338C 100%);

  /* Trên nền tối bóng đen gần như vô hình → dùng quầng sáng hồng thay thế */
  --shadow: 0 2px 6px rgba(0,0,0,.45), 0 14px 34px -18px rgba(0,0,0,.8);
  --glow:   0 0 0 1px rgba(255,92,179,.35), 0 8px 26px -10px rgba(255,92,179,.55);

  --glass:      rgba(255,255,255,.045);
  --glass-blur: blur(20px) saturate(140%);
  --aurora:
    radial-gradient(900px 520px at 12% -8%,  rgba(255,92,179,.16), transparent 62%),
    radial-gradient(760px 480px at 88% 4%,   rgba(167,139,250,.13), transparent 60%),
    radial-gradient(680px 520px at 50% 108%, rgba(255,92,179,.08), transparent 60%);
  --pin-shadow: 14px 0 18px -12px rgba(0,0,0,.75), 1px 0 0 var(--border);

  color-scheme: dark;
}

/* Khách chưa từng bấm nút đổi giao diện thì đi theo cài đặt hệ điều hành */
:root:not([data-theme]) {
  @media (prefers-color-scheme: dark) {
    --bg:            #14101A;
    --surface:       #1A1522;
    --surface-2:     #1F1929;
    --surface-3:     #251D30;
    --border:        #2A2233;
    --border-strong: #3A3046;
    --ink:           #F3ECF6;
    --ink-2:         #C3B4CC;
    --muted:         #9B8BA6;
    --accent:        #FF5CB3;
    --accent-hi:     #FF8ECB;
    --accent-deep:   #E0338C;
    --accent-soft:   #2C1B28;
    --on-accent:     #1A0512;
    --good: #3DDC97;  --good-soft: #12291F;
    --warn: #F5B544;  --warn-soft: #33240F;
    --crit: #FF6B7A;  --crit-soft: #331A1C;
    --info: #A78BFA;
    --head-a: #1B0F1E;  --head-b: #6A1A4B;
    --head-grad:   linear-gradient(115deg, #1B0F1E 0%, #351330 42%, #6A1A4B 100%);
    --brand-solid: linear-gradient(160deg, #FF8ECB 0%, #FF5CB3 46%, #E0338C 100%);
    --shadow: 0 2px 6px rgba(0,0,0,.45), 0 14px 34px -18px rgba(0,0,0,.8);
    --glow:   0 0 0 1px rgba(255,92,179,.35), 0 8px 26px -10px rgba(255,92,179,.55);
    --glass:      rgba(255,255,255,.045);
    --glass-blur: blur(20px) saturate(140%);
    --aurora:
      radial-gradient(900px 520px at 12% -8%,  rgba(255,92,179,.16), transparent 62%),
      radial-gradient(760px 480px at 88% 4%,   rgba(167,139,250,.13), transparent 60%),
      radial-gradient(680px 520px at 50% 108%, rgba(255,92,179,.08), transparent 60%);
    --pin-shadow: 14px 0 18px -12px rgba(0,0,0,.75), 1px 0 0 var(--border);
    color-scheme: dark;
  }
}

/* ==========================================================================
   3. Xử lý bề mặt riêng của Obsidian
      Chỉ những chỗ mà việc hoán biến không diễn tả được.
   ========================================================================== */
:root[data-theme="obsidian"] .head,
:root[data-theme="dark"] .head { background: var(--head-grad); }

/* --- Lớp aurora: cố định sau toàn bộ giao diện, không cuộn, không bắt chuột */
:root[data-theme="obsidian"] body::before,
:root[data-theme="dark"] body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background: var(--aurora);
  pointer-events: none;
}
:root[data-theme="obsidian"] .app,
:root[data-theme="dark"] .app { position: relative; z-index: 1; }

/* --- Bề mặt kính mờ thay cho "trắng đặc + đổ bóng" của bản sáng ---------- */
:root[data-theme="obsidian"] .rail,
:root[data-theme="dark"] .rail {
  background: rgba(20,16,26,.72);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
:root[data-theme="obsidian"] .panel,
:root[data-theme="dark"] .panel {
  background: rgba(26,21,34,.80);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
:root[data-theme="obsidian"] .tabs,
:root[data-theme="dark"] .tabs {
  background: rgba(26,21,34,.70);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
:root[data-theme="obsidian"] .drawer,
:root[data-theme="dark"] .drawer,
:root[data-theme="obsidian"] .actmenu,
:root[data-theme="dark"] .actmenu,
:root[data-theme="obsidian"] .toast,
:root[data-theme="dark"] .toast {
  background: rgba(29,23,38,.94);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
:root[data-theme="obsidian"] .scrim,
:root[data-theme="dark"] .scrim { background: rgba(8,5,12,.62); }

/* Thẻ trong các màn Tổng quan / Hoá đơn / Thẻ / Shield: kính mờ + viền sáng
   mảnh. Nền ĐẶC ở đây sẽ nổi cục lên trên lớp aurora. */
:root[data-theme="obsidian"] .dcard,
:root[data-theme="dark"] .dcard,
:root[data-theme="obsidian"] .hdcard,
:root[data-theme="dark"] .hdcard,
:root[data-theme="obsidian"] .shbox,
:root[data-theme="dark"] .shbox,
:root[data-theme="obsidian"] .tvbox,
:root[data-theme="dark"] .tvbox {
  background: var(--glass);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

/* --- Nút chính: giành lại nền gradient + quầng sáng ---------------------- */
.btn.primary { box-shadow: var(--glow); }
:root[data-theme="obsidian"] .btn.primary,
:root[data-theme="dark"] .btn.primary {
  background: var(--brand-solid);
  color: var(--on-accent);
}
:root[data-theme="obsidian"] .rail-logo,
:root[data-theme="dark"] .rail-logo,
:root[data-theme="obsidian"] .dw-logo,
:root[data-theme="dark"] .dw-logo,
:root[data-theme="obsidian"] .dw-uav,
:root[data-theme="dark"] .dw-uav { color: var(--on-accent); }

/* --- Nút phụ: nền trong suốt, chỉ còn viền sáng mảnh -------------------- */
:root[data-theme="obsidian"] .btn,
:root[data-theme="dark"] .btn { background: rgba(255,255,255,.045); }
:root[data-theme="obsidian"] .btn:hover,
:root[data-theme="dark"] .btn:hover { background: var(--accent-soft); }
:root[data-theme="obsidian"] .btn.ghost,
:root[data-theme="dark"] .btn.ghost { background: transparent; }

/* --- Ô nhập: lõm xuống thay vì nổi lên --------------------------------- */
:root[data-theme="obsidian"] .search,
:root[data-theme="dark"] .search,
:root[data-theme="obsidian"] select.btn,
:root[data-theme="dark"] select.btn,
:root[data-theme="obsidian"] .foot select,
:root[data-theme="dark"] .foot select,
:root[data-theme="obsidian"] input[type="text"],
:root[data-theme="dark"] input[type="text"],
:root[data-theme="obsidian"] input[type="search"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="obsidian"] input[type="number"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="obsidian"] textarea,
:root[data-theme="dark"] textarea {
  background: rgba(0,0,0,.28);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}

/* --- Bảng: dòng tiêu đề dính và 2 cột ghim phải ĐỤC hoàn toàn, nếu không
       hàng phía dưới sẽ lộ ra khi cuộn ------------------------------------ */
:root[data-theme="obsidian"] thead th,
:root[data-theme="dark"] thead th,
:root[data-theme="obsidian"] #tbl thead th:first-child,
:root[data-theme="dark"] #tbl thead th:first-child,
:root[data-theme="obsidian"] #tbl thead th:nth-child(2),
:root[data-theme="dark"] #tbl thead th:nth-child(2) { background: #1F1929; }
:root[data-theme="obsidian"] #tbl tbody td:first-child,
:root[data-theme="dark"] #tbl tbody td:first-child,
:root[data-theme="obsidian"] #tbl tbody td:nth-child(2),
:root[data-theme="dark"] #tbl tbody td:nth-child(2) { background: #1A1522; }
:root[data-theme="obsidian"] #tbl tbody tr:hover td:first-child,
:root[data-theme="dark"] #tbl tbody tr:hover td:first-child,
:root[data-theme="obsidian"] #tbl tbody tr:hover td:nth-child(2),
:root[data-theme="dark"] #tbl tbody tr:hover td:nth-child(2) { background: #251D30; }
:root[data-theme="obsidian"] #tbl th:nth-child(2),
:root[data-theme="dark"] #tbl th:nth-child(2),
:root[data-theme="obsidian"] #tbl td:nth-child(2),
:root[data-theme="dark"] #tbl td:nth-child(2) { box-shadow: var(--pin-shadow); }

/* --- Thanh cuộn mảnh, sáng mờ ------------------------------------------ */
:root[data-theme="obsidian"] *,
:root[data-theme="dark"] * { scrollbar-color: rgba(255,255,255,.18) transparent; }
:root[data-theme="obsidian"] ::-webkit-scrollbar,
:root[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
:root[data-theme="obsidian"] ::-webkit-scrollbar-track,
:root[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
:root[data-theme="obsidian"] ::-webkit-scrollbar-thumb,
:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.16);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
:root[data-theme="obsidian"] ::-webkit-scrollbar-thumb:hover,
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,92,179,.45); background-clip: content-box;
}

/* --- Vệt sáng mép trên vùng nội dung ------------------------------------ */
:root[data-theme="obsidian"] .panel,
:root[data-theme="dark"] .panel { box-shadow: 0 -1px 0 rgba(255,255,255,.06), var(--shadow); }