/* Thanh công cụ soạn ghi chú — phần CƠ CHẾ dùng chung (BA 2026-10-07, GĐ2 lát 2).

   Một bản cho mọi cửa sổ: Notebook/QuickNote/popup Ghi chú dự án/Project tuần
   (index.html) và AntiNote (antiNote.html). Trước đây khối này được chép hai lần
   (notics.css + antinote-editor-tools.css) và đã lệch nhau.

   Chỉ cơ chế: nhóm "Định dạng khác" bung bảng 2 cột, bày thẳng khi đủ chỗ
   (.is-format-inline do richEditor.js đo thật), trạng thái nút mở. Màu/khoảng
   cách riêng từng cửa sổ đi qua biến --note-tb-* (giá trị mặc định = Notebook;
   AntiNote đặt biến trên .sticky-toolbar trong antinote-editor-tools.css). */

/* Ẩn/hiện bằng display ở legacy như bản gốc — layer chuẩn không được đặt
   display cho class mà legacy ẩn theo trạng thái (tests/cssLayers.test.js). */
@layer legacy {
  .notics-tb-group { position: relative; }
  .notics-tb-more {
    position: absolute;
    top: calc(100% + var(--ui-space-1-5));
    left: 0;
    z-index: var(--ui-layer-dropdown);
    display: none;
    align-items: center;
    gap: var(--ui-space-0-5);
    padding: var(--ui-space-1) var(--ui-space-2);
    background: var(--note-tb-popover, rgb(var(--ui-surface-raised-rgb)));
    border: var(--ui-stroke-thin) solid var(--note-tb-stroke, var(--stroke));
    border-radius: var(--note-tb-radius, var(--ui-radius-panel));
    box-shadow: var(--ui-elevation-3);
    white-space: nowrap;
  }
  .notics-tb-group.is-open .notics-tb-more { display: inline-flex; }
  .notics-tb-more select { flex: 0 0 auto; }
  /* Nhóm nằm cuối hàng: bảng bung sang trái để không tràn mép phải. */
  .notics-tb-group--end .notics-tb-more { left: auto; right: 0; }
  /* Bảng "Định dạng khác": lưới 2 cột nhãn | điều khiển, mỗi hàng một nhóm. */
  .notics-tb-panel {
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: var(--ui-space-3);
    row-gap: var(--ui-space-1-5);
    padding: var(--ui-space-2) var(--ui-space-3);
  }
  .notics-tb-group.is-open .notics-tb-panel { display: grid; }
  .notics-tb-row-label {
    font-size: var(--note-tb-caption, var(--fs-caption));
    color: var(--note-tb-muted, var(--ui-text-muted));
  }
  .notics-tb-row { display: flex; align-items: center; gap: var(--ui-space-0-5); }
  /* Đủ chỗ: bày thẳng Phông/Cỡ/Căn lề/Khối lên thanh như Google Docs, ẩn nhãn hàng. */
  .is-format-inline .notics-tb-group--adaptive > .notics-tb-panel {
    position: static;
    display: flex;
    align-items: center;
    gap: var(--note-tb-inline-gap, var(--ui-space-1));
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .is-format-inline .notics-tb-row-label { display: none; }
  .is-format-inline .notics-tb-row:not(:nth-child(2)) {
    margin-left: var(--note-tb-row-margin, var(--ui-space-1));
    padding-left: var(--note-tb-row-padding, var(--ui-space-1-5));
    border-left: var(--ui-stroke-thin) solid var(--note-tb-divider, var(--stroke));
  }
}

/* Nút "Định dạng khác": giữ trạng thái nhấn khi bảng đang mở; ẩn hẳn khi bày
   thẳng. Công thức components đặt display/nền cho mọi nút thanh soạn thảo nên
   phải nêu lại ở layer modules. */
@layer modules {
  .notics-tb-group .notics-tb-toggle[aria-expanded="true"] {
    background: var(--ui-action-active);
    color: var(--note-tb-text, var(--ui-text-primary));
  }
  .is-format-inline .notics-tb-group--adaptive > .notics-tb-toggle { display: none; }
  /* Notebook gọn mặc định (BA 2026-10-08): công cụ `advanced` (noteToolbar.js) ẩn tới
     khi bấm "Công cụ nâng cao" (#noticsToolsToggleBtn → .is-tools-expanded).
     Kế hoạch/Báo cáo dự án dùng cùng luật (BA 10/10/2026). */
  :is(#noticsToolbar, #pnpToolbar, .project-weekly-toolbar):not(.is-tools-expanded) :is([data-tb-advanced], [data-tb-advanced-group]) { display: none; }

  /* Icon có màu theo nhóm, kiểu Word (BA 12/10/2026): chỉ tô nét icon, nền nút trung tính.
     Nhóm do noteToolbar.js gắn (data-tb-tone / data-tb-swatch); màu từ token DTCG
     semantic.color.<mode>.tool (--ui-tool-*). Nút đang bật/đang mở giữ màu trạng thái
     của công thức nút. Tắt: Cài đặt → html[data-tool-icons="mono"]; chế độ tương phản cao
     của Windows (forced-colors) tự ép về màu hệ thống. */
  html:not([data-tool-icons="mono"]) [data-toolbar-host] [data-tb-tone]:not(.ql-active, .is-open, [aria-expanded="true"]) {
    color: var(--note-tb-tone);
  }
  [data-toolbar-host] [data-tb-tone="list"] { --note-tb-tone: var(--ui-tool-list); }
  [data-toolbar-host] [data-tb-tone="insert"] { --note-tb-tone: var(--ui-tool-insert); }
  [data-toolbar-host] [data-tb-tone="remove"] { --note-tb-tone: var(--ui-tool-remove); }
  [data-toolbar-host] [data-tb-tone="action"] { --note-tb-tone: var(--ui-tool-action); }
  [data-toolbar-host] [data-tb-tone="copy"] { --note-tb-tone: var(--ui-tool-copy); }
  /* Cùng công tắc: icon mục hệ thống trên cây Notebook (noticsTree.js) và AntiNote
     (noteNavTree.js) — QuickNote ⚡ cam như nút Tạo việc, Gần đây xanh, Tất cả tím.
     Hàng đang chọn giữ màu accent của trạng thái chọn. */
  html:not([data-tool-icons="mono"]) :is(.notics-tree-section, .sticky-nav-row):not(.is-active) > [data-nav-tone] {
    color: var(--note-nav-tone);
  }
  [data-nav-tone="quick"] { --note-nav-tone: var(--ui-tool-action); }
  [data-nav-tone="recent"] { --note-nav-tone: var(--ui-tool-nav-recent); }
  [data-nav-tone="all"] { --note-nav-tone: var(--ui-tool-nav-all); }
  /* Màu chữ / highlight: vạch dưới icon = màu vừa dùng (richEditorColor.js đặt
     --note-tb-swatch), chưa dùng thì đỏ/vàng như Word. */
  [data-toolbar-host] [data-tb-swatch] { position: relative; }
  /* Vạch luôn hiện kể cả chế độ đơn sắc — Word/Docs đều giữ (BA 12/10/2026). */
  [data-toolbar-host] [data-tb-swatch]::after {
    content: "";
    position: absolute;
    left: var(--ui-space-1-5);
    right: var(--ui-space-1-5);
    bottom: var(--ui-space-0-5);
    height: var(--ui-stroke-thicker);
    border-radius: var(--ui-radius-xs);
    background: var(--note-tb-swatch, var(--note-tb-swatch-default));
    pointer-events: none;
  }
  [data-toolbar-host] [data-tb-swatch="text"] { --note-tb-swatch-default: var(--ui-tool-swatch-text); }
  [data-toolbar-host] [data-tb-swatch="highlight"] { --note-tb-swatch-default: var(--ui-tool-swatch-highlight); }
}