/* aha-ctrl-more.css · control bổ sung cho thư viện thành phần AHA (lane `aha-ctrl-more`, wave W3).
   Vì sao có file này: đối chiếu thư viện thành phần của bản gương với khối `#aha-all-cmp` (24 mục `.bnn-*`)
   + khối `#ah-styleguide` còn thiếu 5 mục (xem `docs/evidence/aha-ctrl-more/gap.tsv`): menu nổi (dropdown),
   hộp kiểm/nút chọn, chú thích nổi (tooltip), vùng thả tệp — cộng mục huy hiệu chỉ còn thiếu *mục danh mục*.
   Ràng buộc: 100 % token của `bnn-tokens.css` (0 mã màu rời ⇒ dark parity tự động), không bundle,
   không CDN, không đụng `jira-skin.css`. 4 mục có class `bnn-*` MỚI (bộ `bnn-components.css` chưa có);
   1 mục (huy hiệu) chỉ dùng class `.bnn-badge*` sẵn có nên không cần CSS mới.

   Chú ý portal: `bnn-ui.js` chuyển `<div data-bnn-dd-menu>` về `<body>` khi mở ⇒ rule của menu KHÔNG
   được scope dưới `#aha-ctrl-more` (scope sẽ hết hiệu lực sau khi portal). `.bnn-menu*` là class mới,
   đã kiểm 0 lần xuất hiện trong `wwwroot/` trước khi thêm (xem report §1). */

/* ── Khung mục danh mục (đồng bộ cách khối #aha-all-cmp/#ah-styleguide đang dùng) ─────────────── */
#aha-ctrl-more{display:block}
#aha-ctrl-more .acc-panel{display:block}
#aha-ctrl-more .acc-hint{margin:0 0 10px;color:var(--jx-text-2)}
#aha-ctrl-more .acc-h4{margin:16px 0 8px;font-size:14px;font-weight:var(--bnn-fw-semibold)}
#aha-ctrl-more .acc-sub{border-top:1px dashed var(--jx-border);padding-top:12px;margin-top:12px}
#aha-ctrl-more .acc-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 10px}
#aha-ctrl-more .acc-c2{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
#aha-ctrl-more .acc-cls{font-family:var(--bnn-font-mono);font-size:12px;color:var(--jx-text-2)}
#aha-ctrl-more .acc-note{margin:8px 0 0;font-size:var(--bnn-fs-small);color:var(--jx-text-2)}
#aha-ctrl-more .acc-out{margin:8px 0 0;font-size:var(--bnn-fs-small);color:var(--jx-text-2)}
#aha-ctrl-more .acc-out b{color:var(--jx-text)}
/* Sàn chữ của lane: `bnn-components.css` để `.bnn-badge` 10,5px (nhãn nhỏ), trong khi cổng §5.4 chỉ
   cho chữ < 12px ở `.bnn-tag`/`.bnn-size-sub`. Khối demo nâng badge lên 12px (đúng bằng bản
   `bnn-override.css` đang ép ở khổ ≤640px) ⇒ trong khối còn 0 chỗ < 12px; lớp `.bnn-badge` gốc
   KHÔNG bị sửa nên phần còn lại của trang giữ nguyên. */
#aha-ctrl-more .bnn-badge{font-size:var(--bnn-fs-small)}

/* ── C2 · MENU NỔI (dropdown) — `.bnn-dd` + hook `data-bnn-dropdown` của `bnn-ui.js` ───────────── */
.bnn-menu{
  position:fixed;z-index:60;min-width:210px;max-width:320px;margin:0;padding:6px;
  list-style:none;background:var(--jx-surface);color:var(--jx-text);
  border:1px solid var(--jx-border);border-radius:var(--bnn-radius-12);box-shadow:var(--bnn-shadow-card);
}
.bnn-menu[hidden]{display:none}
.bnn-menu__item{
  display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:0;background:none;
  border-radius:var(--bnn-radius-6);color:var(--jx-text);font:inherit;font-size:var(--bnn-fs-body);
  text-align:left;cursor:pointer;
}
.bnn-menu__item:hover,.bnn-menu__item:focus-visible{background:var(--jx-alt)}
.bnn-menu__item[aria-checked="true"]{font-weight:var(--bnn-fw-semibold)}
.bnn-menu__item .bnn-ic{margin-left:auto;color:var(--jx-text-2)}
.bnn-menu__sep{height:1px;margin:6px 4px;background:var(--jx-border)}
.bnn-menu__kbd{margin-left:auto;font-family:var(--bnn-font-mono);font-size:12px;color:var(--jx-text-2)}

/* ── C3 · HỘP KIỂM & NÚT CHỌN (checkbox · radio) ───────────────────────────────────────────────── */
.bnn-choice{
  display:flex;align-items:flex-start;gap:9px;margin:0 0 10px;font-size:var(--bnn-fs-body);
  color:var(--jx-text);cursor:pointer;
  /* Bề mặt "đã chọn" + màu dấu: token CỤC BỘ, có bảng TỐI (cùng quy ước `--b-solid`/`--b-on-solid`
     của `.bnn-seg`/`.bnn-switch` trong `bnn-components.css`). KHÔNG dùng `--bnn-navy`/`--bnn-ink`
     trực tiếp: hai token này không đổi ở chế độ tối ⇒ dấu #12263F trên nền #0D4073 chỉ 1,46:1
     (vô hình) và hộp navy chìm vào nền tối. Đo lại: sáng navy↔trắng 10,5:1 · tối cam↔ink 6,06:1. */
  --aha-solid:var(--bnn-navy);--aha-on-solid:var(--bnn-card);
}
.bnn-choice--inline{display:inline-flex;margin:0 14px 0 0}
.bnn-choice__box{
  -webkit-appearance:none;appearance:none;flex:none;width:18px;height:18px;margin:1px 0 0;
  display:inline-grid;place-content:center;border:1px solid var(--jx-border-strong);
  background:var(--jx-surface);border-radius:var(--bnn-radius-6);
  transition:background-color .12s linear,border-color .12s linear;
}
.bnn-choice__box[type="radio"]{border-radius:50%}
.bnn-choice__box:checked{background:var(--aha-solid);border-color:var(--aha-solid)}
.bnn-choice__box:checked::after{content:"";width:9px;height:9px;border-radius:2px;background:var(--aha-on-solid)}
.bnn-choice__box[type="radio"]:checked::after{width:8px;height:8px;border-radius:50%;background:var(--aha-on-solid)}
.bnn-choice__box:indeterminate{background:var(--aha-solid);border-color:var(--aha-solid)}
.bnn-choice__box:indeterminate::after{content:"";width:9px;height:2px;border-radius:1px;background:var(--aha-on-solid)}
.bnn-choice__box:focus-visible{outline:2px solid var(--jx-focus);outline-offset:2px}
.bnn-choice__box:disabled{border-color:var(--jx-border);cursor:not-allowed}
.bnn-choice:has(.bnn-choice__box:disabled){color:var(--jx-text-sub);cursor:not-allowed}
.bnn-choice__txt{min-width:0}
.bnn-choice__hint{display:block;margin-top:2px;font-size:var(--bnn-fs-small);color:var(--jx-text-2)}

/* ── C4 · CHÚ THÍCH NỔI (tooltip) — thuần CSS, mở bằng :hover/:focus-within ───────────────────── */
.bnn-tip{position:relative;display:inline-flex}
.bnn-tip__bub{
  position:absolute;z-index:40;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  width:max-content;max-width:240px;padding:6px 9px;border-radius:var(--bnn-radius-6);
  background:var(--bnn-ink);color:var(--bnn-color-neutral-00);
  font-size:var(--bnn-fs-small);line-height:var(--bnn-lh-small);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s linear;
}
.bnn-tip:hover .bnn-tip__bub,.bnn-tip:focus-within .bnn-tip__bub{opacity:1;visibility:visible}
.bnn-tip__bub--b{bottom:auto;top:calc(100% + 8px)}
.bnn-tip__bub--r{left:calc(100% + 8px);bottom:auto;top:50%;transform:translateY(-50%)}
.bnn-tip__bub--l{left:auto;right:calc(100% + 8px);bottom:auto;top:50%;transform:translateY(-50%)}
@media (prefers-reduced-motion:reduce){.bnn-tip__bub{transition:none}}

/* ── C5 · VÙNG THẢ TỆP (file drop) — hook `data-aha-drop` của `aha-ctrl-more.js` ──────────────── */
.bnn-drop-wrap{display:block}
.bnn-drop{
  display:grid;gap:6px;place-items:center;padding:18px 14px;text-align:center;
  border:1px dashed var(--jx-border-strong);border-radius:var(--bnn-radius-12);
  background:var(--jx-alt);color:var(--jx-text-2);font-size:var(--bnn-fs-small);
}
.bnn-drop.is-over{border-color:var(--bnn-primary);color:var(--jx-text)}
.bnn-drop__ic{color:var(--jx-text-sub)}
.bnn-drop__label{color:var(--jx-text)}
.bnn-drop__list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.bnn-drop__file{
  display:flex;align-items:center;gap:8px;padding:6px 9px;border:1px solid var(--jx-border);
  border-radius:var(--bnn-radius-6);background:var(--jx-surface);
  color:var(--jx-text);font-size:var(--bnn-fs-small);
}
.bnn-drop__size{margin-left:auto;font-family:var(--bnn-font-mono);font-size:12px;color:var(--jx-text-2)}

/* Lưới 4 hướng tooltip: mỗi ô canh giữa ⇒ bong bóng nổi KHÔNG đẩy tràn ngang trang
   (đo `document.scrollingElement.scrollWidth - clientWidth` = 0 ở 1440 và 390 — xem report §4). */
#aha-ctrl-more .acc-tips{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
#aha-ctrl-more .acc-tips>div{display:flex;justify-content:center;align-items:center;padding:42px 10px}

/* Khổ hẹp (≤640px): bong bóng trái/phải đổi thành phía TRÊN — nếu để nguyên thì bong bóng
   `--r` vượt mép phải (đo 390x844: right=432 > 390 ⇒ overflowX=42; xem report §4 trước→sau). */
@media (max-width:640px){
  .bnn-tip__bub--l,.bnn-tip__bub--r{left:50%;right:auto;bottom:calc(100% + 8px);top:auto;transform:translateX(-50%)}
}

/* ── CHẾ ĐỘ TỐI (L-0225) — chỉ đổi token cục bộ, mọi khai báo khác đã đi qua `--jx-*` (tự đổi) ──── */
:is(.dark,[data-theme="dark"]) .bnn-choice,
:root.dark .bnn-choice,:root[data-theme="dark"] .bnn-choice{
  --aha-solid:var(--bnn-dark-solid);--aha-on-solid:var(--bnn-dark-on-solid);
}