/* Kiểu dáng riêng cho các màn `/app` — KHÔNG dùng chung với `/terminal`, `/`. Đăng ký ở `src/api/static.ts`.
   Vì sao tệp riêng thay vì `ui.css`: docs/60_fe-integration/styles.md#views-scope */

/* Cả hai dải đều là `.chips` của `ui.css` cộng một class riêng: selector hai class (0,2,1) luôn
   thắng `.chips button` (0,1,1) — không phụ thuộc thứ tự nạp file. */

/* ------------------------------------------------------- vỏ trang /app --- */

/* Giữ chỗ CHIỀU CAO lúc một màn đang nạp để footer không nhảy (ISSUE-264). ⚠️ `flex: 1 0 auto`, không `flex: 1`.
   Số đo, vì sao flex chứ không `min-height: calc()`: docs/60_fe-integration/styles.md#views-shell-flex */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main#view { flex: 1 0 auto; }

/* --------------------------------------------- tiêu đề + thanh công cụ --- */

/* Tiêu đề đứng NGAY TRÊN một thanh công cụ là MỘT khối đầu thẻ: một đường kẻ, không hai.
   Vì sao `:has()` và nó khớp ở đâu: docs/60_fe-integration/styles.md#views-card-toolbar */
.card > h2:has(+ .toolbar) {
  border-bottom: 0;
}

/* ----------------------------------------------------- segmented control --
   Vì sao sổ trông khác bộ lọc, và số đo nút xuống dòng: docs/60_fe-integration/styles.md#views-book-vs-filter */

.chips.bookseg {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 2px;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.025);
}

.chips.bookseg button {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1-5);
  flex: 0 0 auto;
  min-width: 0;
  padding: var(--sp-1-5) var(--sp-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-sm);
  white-space: nowrap;
  cursor: pointer;
}

/* Token, không phải trắng-alpha: trạng thái này từng biến mất ở theme sáng (BACKLOG-188, ISSUE-215 §4).
   Chi tiết: docs/60_fe-integration/styles.md#views-state-tokens */
.chips.bookseg button:hover {
  background: var(--state-hover);
  color: var(--ink);
}

.chips.bookseg button[aria-pressed='true'] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

/* Số lệnh của TỪNG sổ trên chính nút chuyển sang nó, đếm theo ĐÚNG bộ lọc trạng thái đang bật.
   `tabular-nums` để bề rộng không nhảy; lý do: docs/60_fe-integration/styles.md#views-book-count */
.chips.bookseg .n {
  padding: 2px var(--sp-1-5);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.chips.bookseg button[aria-pressed='true'] .n {
  background: rgba(16, 185, 129, 0.18);
  color: var(--accent);
}

/* Chưa đếm xong thì KHÔNG hiện số 0; ô giữ chỗ giữ đúng bề rộng để dải nút không giật khi số về.
   Lý do: docs/60_fe-integration/styles.md#views-book-count-pending */
.chips.bookseg .n[data-pending] {
  color: transparent;
  /* Cùng lý do như `button:hover` ở trên: ô giữ chỗ phải THẤY được ở cả hai
   * theme, không thì pill biến mất rồi hiện lại khi số về. */
  background: var(--state-hover);
}

/* --------------------------------------------------------- chip lọc nhẹ -- */

.chips.filterchips {
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin: 0;
}

.chips.filterchips button {
  flex: 0 0 auto;
  min-width: 0;
  padding: var(--sp-1-5) var(--sp-3);
  border-color: transparent;
  color: var(--muted);
  white-space: nowrap;
}

.chips.filterchips button:hover {
  border-color: var(--line);
  color: var(--ink);
}

/* Chip lọc đang bật KHÔNG dùng màu nhấn — trạng thái bật nói bằng nền và độ đậm.
   Lý do: docs/60_fe-integration/styles.md#views-filter-no-accent */
.chips.filterchips button[aria-pressed='true'] {
  border-color: var(--line);
  /* `--state-selected` (ink 10%): nửa "nền" của trạng thái bật từng biến mất ở
   * theme sáng vì là trắng-alpha (BACKLOG-188). */
  background: var(--state-selected);
  color: var(--ink);
  font-weight: 600;
}

/* ------------------------------------------------------------- màn hẹp --- */

/* Cỡ chạm giữ luật `.chips button` của `ui.css`, trừ phần đệm 2px của segmented control; dải lọc
   cuộn ngang thay vì xuống dòng. Lý do: docs/60_fe-integration/styles.md#views-narrow */
@media (pointer: coarse), (max-width: 600px) {
  .chips.bookseg button { min-height: 40px; }

  .chips.filterchips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* Chừa chỗ cho viền focus của chip đầu và chip cuối khỏi bị cắt khi cuộn. */
    padding: 2px;
    margin: -2px;
  }

  .chips.filterchips::-webkit-scrollbar { display: none; }
}

/* ---- nhãn của nút menu tài khoản và nút chuông (ISSUE-155, BACKLOG-219) ----
   ⚠️ 940px phải bằng breakpoint drawer của `ui.css`: docs/60_fe-integration/styles.md#views-navuser-label */
.navgrp-user .navuser-lbl { display: none; }

@media (max-width: 940px) {
  .navgrp-user .navuser-lbl { display: inline; }
}

/* `.navwho`, `.navacct` và `.navexit` chuyển sang `ui-nav.css` — console dùng chung (chủ sở hữu 2026-09-14). */

/* ---- số dư thành lối vào Ví (BACKLOG-230 / ISSUE-267) — ⚠️ không thêm padding/margin: hộp không đổi cỡ ----
   Vì sao `a.navbal` chứ không `.navbal`: docs/60_fe-integration/styles.md#views-navbal */
a.navbal { text-decoration: none; color: inherit; }
a.navbal:hover { color: var(--accent); }
a.navbal:focus-visible {
  outline: var(--ring) solid var(--accent);
  outline-offset: var(--ring-offset);
  border-radius: var(--radius-sm);
}

/* ---- luồng nạp và dòng thông báo (BACKLOG-195 / DECISION-031) — chỉ token, không mã màu trần ----
   Cái gì canh và vì sao ở đây: docs/60_fe-integration/styles.md#views-deposit-feed */

/* Danh sách không dấu đầu dòng — ảnh bằng chứng và dòng thông báo là `<ul>` thật, không phải một
   chồng `<div>`: người dùng trình đọc màn hình nghe được "3 mục" thay vì phải tự đếm. */
.plain {
  list-style: none;
  margin: 0;
  padding: 0;
}

.plain > li {
  display: flex;
  align-items: center;
  gap: var(--sp-1-5);
  padding: var(--sp-1) 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* Mã QR: `max-width` vì ảnh do nhân viên tải lên; nền TRẮNG cố định kể cả ở theme tối là CỐ Ý.
   Lý do: docs/60_fe-integration/styles.md#views-qr */
.qr {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: var(--sp-3) auto;
  background: #fff;
  padding: var(--sp-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

/* Dòng thông báo. */
.feed > li {
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-bottom: 1px solid var(--line);
  /* Vạch trong SUỐT ở mọi dòng, không phải chỉ ở dòng chưa đọc — xem chú thích
     tại `.feed-item.unread` bên dưới. */
  box-shadow: inset 2px 0 0 0 transparent;
}

.feed > li:last-child { border-bottom: 0; }

.feed-main { flex: 1; min-width: 0; }

.feed-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--state-hover);
  color: var(--muted);
}

.feed-icon.ok { background: var(--accent-soft); color: var(--accent); }
.feed-icon.bad { background: var(--state-hover); color: var(--bad); }

/* Chưa đọc: một vạch bên trái, không phải một nền khác. ⚠️ Không thêm lại `padding-left` ở đây (ISSUE-265).
   Lý do, và cần dấu nổi hơn thì làm gì: docs/60_fe-integration/styles.md#views-feed-unread */
.feed-item.unread {
  box-shadow: inset 2px 0 0 0 var(--accent);
}

/* Hộp chứa mã QR — giữ chỗ trong lúc `fetch` chạy, để hộp thoại không nhảy cỡ
   khi ảnh về. Chiều cao bằng `max-width` của `.qr` cộng padding của nó. */
.qr-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}