/* NÚT CHUẨN — tách khỏi ui-components.css (chuẩn hoá component P3, lát 3,
   01/10/2026) để cửa sổ vệ tinh (AntiNote) nạp đúng component nút mà không kéo
   theo popover/menu của cửa sổ chính (các rule đó đọc token bề mặt --ux-* mà
   AntiNote không có). Cửa sổ chính và QuickAdd nạp file này NGAY TRƯỚC
   ui-components.css nên thứ tự cascade trong layer components giữ nguyên. */
/* ==========================================================================
   NÚT CHUẨN (.ui-btn) — GĐ3 chuẩn hóa (docs/BAO-CAO-CHUAN-HOA-UI-TOKEN-2026-09-18.md §4.2, §7.3)
   Fluent 2 Button: 3 cỡ sm 24 / md 32 / lg 40 (BA Q1). Nằm ở layer `components`
   nên thắng mọi CSS cũ trong `legacy` mà không cần ép ưu tiên; nhãn theo type
   ramp (sm = caption 12, md/lg = body 14 semibold).
   Vô hiệu: nền trung tính + chữ muted, không hạ opacity (chuẩn ARS-1).
   Tên cũ còn giữ: --ghost = subtle, --dense = sm (Q1: 28 → 24).

   BỘ KIỂU v2 (BA chốt 23/09/2026 — "nút nhạt nhòa, không biết là nút"). Đo
   trước khi sửa: nền nút Phụ TRÙNG nền thẻ (tương phản 1.0, viền 1.42) nên nó
   đọc như ô nhập; nút Nhẹ chữ xám không nền không viền nên "Vẫn làm" đọc như
   chữ thường. Chuẩn Windows 11 / Fluent 2:
     --primary      nền nhấn phẳng
     --secondary    nền xám nhạt RIÊNG + viền mảnh (Standard button)
     --text         hành động trong hàng/bảng: chữ màu nhấn, rê chuột hiện nền nhạt
     --danger       nền đỏ — xoá vĩnh viễn, có xác nhận
     --danger-text  xoá trong hàng: chữ đỏ
     --subtle       CHỈ cho nút icon / thanh công cụ (trong suốt, chữ phụ)

   BỘ KIỂU v3 (BA chốt 10/10/2026 — "nút cao, viền không đẹp, nhìn basic";
   docs/KE-HOACH-CHUAN-HOA-NUT-V3-2026-10-10.md). Bỏ lối "nổi gờ" Windows 11
   (viền đáy đậm, bóng dưới nút Chính) theo GitHub Primer / Linear / Apple:
   Chính phẳng, Phụ nền mềm + viền tóc đều 4 cạnh, chữ 500 thay 600.
   ========================================================================== */
@layer components {
  .ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    box-sizing: border-box;
    height: var(--ui-size-md);
    min-height: var(--ui-size-md);
    padding: 0 var(--ui-space-3);
    border: var(--ui-resizer-line) solid transparent;
    border-radius: var(--ui-radius-control);
    background: transparent;
    color: var(--ui-text-primary);
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: var(--lh-none);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition:
      color var(--ui-duration-fast) var(--ui-ease),
      background-color var(--ui-duration-fast) var(--ui-ease),
      border-color var(--ui-duration-fast) var(--ui-ease),
      filter var(--ui-duration-fast) var(--ui-ease),
      transform var(--ui-duration-instant) var(--ui-ease);
  }
  .ui-btn:focus-visible {
    outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring);
    outline-offset: var(--ui-focus-ring-offset);
  }
  .ui-btn:active:not(:disabled, .is-disabled, [aria-disabled="true"]) {
    transform: scale(var(--ui-press-scale));
  }
  .ui-btn svg {
    flex-shrink: 0;
    width: var(--ui-icon-sm);
    height: var(--ui-icon-sm);
  }

  /* Cỡ */
  .ui-btn:is(.ui-btn--sm, .ui-btn--dense) {
    height: var(--ui-size-sm);
    min-height: var(--ui-size-sm);
    padding: 0 var(--ui-space-2);
    gap: var(--ui-space-1);
    font-size: var(--fs-caption);
  }
  .ui-btn:is(.ui-btn--sm, .ui-btn--dense) svg {
    width: var(--ui-icon-xs);
    height: var(--ui-icon-xs);
  }
  .ui-btn.ui-btn--lg {
    height: var(--ui-size-lg);
    min-height: var(--ui-size-lg);
    padding: 0 var(--ui-space-4);
  }
  .ui-btn.ui-btn--lg svg {
    width: var(--ui-icon-md);
    height: var(--ui-icon-md);
  }
  .ui-btn.ui-btn--icon {
    width: var(--ui-size-md);
    min-width: var(--ui-size-md);
    padding: 0;
  }
  .ui-btn.ui-btn--icon:is(.ui-btn--sm, .ui-btn--dense) {
    width: var(--ui-size-sm);
    min-width: var(--ui-size-sm);
  }
  .ui-btn.ui-btn--icon.ui-btn--lg {
    width: var(--ui-size-lg);
    min-width: var(--ui-size-lg);
  }

  /* Kiểu — màu nền đặc (Chính / Nguy hiểm), v3: phẳng. Viền trong suốt để nền
     tô kín cả vùng viền (background-clip mặc định border-box) — một khối màu. */
  .ui-btn:is(.ui-btn--primary, .ui-btn--danger) {
    --ui-btn-fill: var(--ui-accent-solid);
    background: var(--ui-btn-fill);
    border-color: transparent;
    box-shadow: none;
    color: var(--ui-text-on-accent);
  }
  .ui-btn.ui-btn--danger {
    /* Nền đặc dùng dangerSolid (chữ trắng ≥ 4.5:1 cả Sáng/Tối); --ui-danger là màu chữ. */
    --ui-btn-fill: var(--ui-danger-solid);
  }
  .ui-btn:is(.ui-btn--primary, .ui-btn--danger):hover {
    background: oklch(from var(--ui-btn-fill) calc(l - 0.05) c h);
  }
  .ui-btn:is(.ui-btn--primary, .ui-btn--danger):active {
    background: oklch(from var(--ui-btn-fill) calc(l - 0.10) c h);
  }

  /* Phụ — kiểu tonal (BA 12/10/2026; Material 3 Filled tonal, Apple Gray, Radix
     soft): nền xám trung tính riêng, KHÔNG viền. Khác nền thẻ nhờ hệ số nền token,
     khác ô nhập (nền trơn + viền). Viền giữ transparent (từ .ui-btn) để chế độ
     Tương phản cao vẫn vẽ khung. Pha từ màu chữ nên tự đúng Sáng/Tối/kính mờ.
     Nền accent nhạt KHÔNG dùng ở đây — dành cho nút "đang bật/hiện tại". */
  .ui-btn:is(.ui-btn--secondary, .ui-btn--outline) {
    background: color-mix(in srgb, var(--ui-text-primary) calc(var(--ui-btn-secondary-fill-alpha) * 100%), var(--ux-raised));
    border-color: transparent;
    color: var(--ui-text-primary);
  }
  .ui-btn:is(.ui-btn--secondary, .ui-btn--outline):hover {
    background: color-mix(in srgb, var(--ui-text-primary) calc(var(--ui-btn-secondary-hover-alpha) * 100%), var(--ux-raised));
    color: var(--ui-text-primary);
  }
  .ui-btn:is(.ui-btn--secondary, .ui-btn--outline):active {
    background: color-mix(in srgb, var(--ui-text-primary) calc(var(--ui-btn-secondary-active-alpha) * 100%), var(--ux-raised));
    color: var(--ui-text-primary);
  }

  /* Chữ: hành động trong hàng/bảng ("Vẫn làm", "Đổi ảnh"). Màu nhấn cho biết
     bấm được; nền chỉ hiện khi rê chuột. Chữ đỏ = xoá trong hàng. */
  .ui-btn:is(.ui-btn--text, .ui-btn--danger-text) {
    --ui-btn-ink: var(--ui-accent);
    background: transparent;
    border-color: transparent;
    color: var(--ui-btn-ink);
  }
  .ui-btn.ui-btn--danger-text {
    --ui-btn-ink: var(--ui-danger);
  }
  .ui-btn:is(.ui-btn--text, .ui-btn--danger-text):hover {
    background: color-mix(in srgb, var(--ui-btn-ink) 10%, transparent);
    color: var(--ui-btn-ink);
  }
  .ui-btn:is(.ui-btn--text, .ui-btn--danger-text):active {
    background: color-mix(in srgb, var(--ui-btn-ink) 16%, transparent);
    color: var(--ui-btn-ink);
  }

  /* Nhẹ: chỉ cho nút icon / thanh công cụ. */
  .ui-btn:is(.ui-btn--subtle, .ui-btn--ghost) {
    background: transparent;
    border-color: transparent;
    color: var(--ui-text-secondary);
  }
  .ui-btn:is(.ui-btn--subtle, .ui-btn--ghost):hover {
    background: var(--ui-hover);
    color: var(--ui-text-primary);
  }
  .ui-btn:is(.ui-btn--subtle, .ui-btn--ghost):active {
    background: var(--ui-action-active);
    color: var(--ui-text-primary);
  }
  /* Nút mở menu/popover đang mở: giữ trạng thái nhấn (Fluent "pressed"). Chỉ
     nút có aria-haspopup — nút thu/giãn dùng aria-expanded không bị tô. */
  .ui-btn:is(.ui-btn--subtle, .ui-btn--ghost):is([aria-haspopup][aria-expanded="true"], .is-popover-open) {
    background: var(--ui-action-active);
    color: var(--ui-text-primary);
  }
  /* Bật/tắt (công cụ đang chọn, chế độ đang bật) — Fluent ToggleButton nhẹ:
     nền accent nhạt + chữ/icon accent. Opt-in bằng ui-btn--toggle để nút mở
     rộng/thu gọn (aria-pressed nhưng đổi icon) không bị tô. */
  .ui-btn.ui-btn--toggle:is(.is-active, [aria-pressed="true"]) {
    background: color-mix(in srgb, var(--ui-accent) 12%, transparent);
    color: var(--ui-accent);
  }
  /* Nhẹ — nguy hiểm: nút icon xoá/gỡ trong hàng/thẻ, rê chuột báo đỏ. */
  .ui-btn.ui-btn--danger-hover:is(:hover, :focus-visible) {
    background: var(--ui-danger-bg);
    color: var(--ui-danger);
  }

  /* Trạng thái */
  .ui-btn:is(:disabled, .is-disabled, [aria-disabled="true"]) {
    /* ARS-1: không làm mờ nút có chữ — vô hiệu hoá opacity cũ của legacy. */
    opacity: 1;
    background: var(--ui-hover);
    border-color: transparent;
    box-shadow: none;
    color: var(--ui-text-muted);
    filter: none;
    cursor: not-allowed;
    pointer-events: none;
  }
  /* Nút Chữ vô hiệu vẫn là chữ — không hiện thành hộp xám giữa hàng. */
  /* Nút Nhẹ vô hiệu (Hoàn tác khi chưa có gì…) cũng không hiện hộp xám — chỉ icon nhạt. */
  .ui-btn:is(.ui-btn--text, .ui-btn--danger-text, .ui-btn--subtle, .ui-btn--ghost):is(:disabled, .is-disabled, [aria-disabled="true"]) {
    background: transparent;
  }
  .ui-btn[aria-busy="true"] {
    cursor: progress;
    pointer-events: none;
  }
}

/* [hidden] cho nút — rule chung ở ui-components.css cũng liệt kê .ui-btn, nhưng
   cửa sổ chỉ nạp file này (AntiNote) vẫn phải ẩn được nút. */
@layer components {
  .ui-btn[hidden] { display: none; }
}

/* ==========================================================================
   Ô MÀU CHUẨN (.ui-swatch) — GĐ F kế hoạch chuẩn quốc tế (01/10/2026,
   docs/KE-HOACH-DAT-CHUAN-QUOC-TE-UI-2026-10-01.md). Fluent 2 SwatchPicker:
   vùng bấm size.sm 24×24 (WCAG 2.5.8 không cần ngoại lệ khoảng cách), chấm màu
   icon.sm 16 ở giữa. Màu là background của chính phần tử (data-* hoặc nội tuyến)
   và chỉ tô content-box nhờ background-clip ở layer components (thắng shorthand
   `background:` ở legacy/modules theo từng thuộc tính). Viền chấm vẽ bằng ::after
   để ô trắng/đen vẫn thấy trên mọi nền; đang chọn = vòng nhấn 2px quanh chấm.
   Nằm cùng file nút để cửa sổ chỉ nạp ui-button.css (AntiNote) dùng được.
   ========================================================================== */
@layer components {
  .ui-swatch {
    /* Làm tròn xuống lưới 2px: mức Lớn (30 − 20) / 2 = 5 lệch lưới → 4, chấm 22 (AT-UI 2026). */
    --ui-swatch-inset: round(down, calc((var(--ui-size-sm) - var(--ui-icon-sm)) / 2), var(--ui-space-0-5));
    position: relative;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: var(--ui-size-sm);
    min-width: var(--ui-size-sm);
    height: var(--ui-size-sm);
    min-height: var(--ui-size-sm);
    padding: var(--ui-swatch-inset);
    border: 0;
    border-radius: var(--ui-radius-full);
    background-clip: content-box;
    cursor: pointer;
    transition: transform var(--ui-duration-fast) var(--ui-ease);
  }
  .ui-swatch::after {
    content: "";
    position: absolute;
    inset: var(--ui-swatch-inset);
    border-radius: inherit;
    box-shadow: inset 0 0 0 var(--ui-resizer-line) color-mix(in srgb, var(--ui-text-primary) 24%, transparent);
    pointer-events: none;
  }
  .ui-swatch:hover:not(:disabled)::after {
    box-shadow: inset 0 0 0 var(--ui-resizer-line) color-mix(in srgb, var(--ui-text-primary) 48%, transparent);
  }
  .ui-swatch:focus-visible {
    outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring);
    outline-offset: 0;
  }
  .ui-swatch:is(.is-selected, [aria-checked="true"], [aria-pressed="true"])::after {
    box-shadow:
      inset 0 0 0 var(--ui-resizer-line) color-mix(in srgb, var(--ui-text-primary) 24%, transparent),
      0 0 0 var(--ui-focus-ring-width) var(--ui-accent);
  }
  .ui-swatch:disabled {
    cursor: not-allowed;
  }
  .ui-swatch[hidden] { display: none; }
  /* Tương phản cao: màu ô là DỮ LIỆU (màu nền ghi chú, ưu tiên) — không để hệ thống
     xoá về nền Canvas (Fluent 2 SwatchPicker làm tương tự). */
  @media (forced-colors: active) {
    .ui-swatch { forced-color-adjust: none; }
  }
}

/* ==========================================================================
   PHÍM CHỮ TRÊN NÚT HỘP THOẠI (.ui-btn-shortcut) — hành trình bàn phím chung
   (BA 12/10/2026, utils/dialogKeyboard.js). Một "nắp phím" nhỏ cạnh nhãn nút:
   chữ giữ đúng màu nhãn (không hạ opacity — ARS-1), chỉ viền mảnh là nhạt.
   Hộp thoại chỉ có nút (data-shortcut-mode="plain") luôn hiện; hộp thoại có ô
   nhập (alt) chỉ hiện khi giữ Alt hoặc tiêu điểm đang ở dải nút hành động —
   lúc nghỉ không thêm nhiễu (AT-CALM).
   ========================================================================== */
@layer components {
  .ui-btn-shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: var(--ui-icon-sm);
    padding-inline: var(--ui-space-1);
    border: var(--ui-stroke-thin) solid color-mix(in srgb, currentcolor 40%, transparent);
    border-radius: var(--ui-radius-xs);
    font-size: var(--dt-typography-font-size-caption);
    font-weight: var(--dt-typography-weight-regular);
    line-height: var(--dt-typography-line-height-snug);
    color: inherit;
    pointer-events: none;
  }
  /* Nhãn chữ đặt trong tiêu đề của nút thẻ (vd. lựa chọn Xuất video) — không có gap của .ui-btn. */
  [data-shortcut-label] > .ui-btn-shortcut { margin-inline-start: var(--ui-space-2); }
  [data-shortcut-mode="alt"]:not(.is-shortcut-hint) .ui-btn-shortcut { display: none; }
  [data-shortcut-mode="alt"] :is(.overlay-foot, .edit-footer, .drawer-footer, [data-dialog-actions]):focus-within .ui-btn-shortcut { display: inline-flex; }
  @media (forced-colors: active) {
    .ui-btn-shortcut { border-color: ButtonText; }
  }
}