@layer legacy {
/* ==========================================================================
   DỰ ÁN — dữ liệu dùng chung cho Task / Notics / Project
   Phase 2: đổi khái niệm "Tag" thành "Dự án" ở toàn bộ giao diện.
   ========================================================================== */

/* Chấm màu đứng trước tên dự án trong mọi bộ chọn. Dùng chung một class để
   picker của lịch, của trình soạn công việc và của Quick Add trông như một. */
.quick-tag-dot {
  flex: none;
  width: var(--ui-space-2); height: var(--ui-space-2);
  margin-right: var(--ui-space-2);
  border-radius: var(--ui-radius-circle);
  background: var(--tag-color, var(--ui-accent));
}
.quick-tag-suggestion > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Nhãn dự án (chưa thuộc dự án = .is-unlinked): .ui-tag ở ui-components.css. */

/* --- Bộ chọn dự án trong AntiNote ---------------------------------------- */

/* --- Cài đặt → Dự án ------------------------------------------------------ */
.projects-management-list { display: flex; flex-direction: column; gap: var(--ui-space-1); }
/* Dữ liệu NGOÀI danh sách hoạt động (Lưu trữ, Nhãn cũ) bọc riêng một khối có
   padding trên/dưới + viền bo góc, tách khỏi vùng dự án đang dùng phía trên
   thay vì trôi tự do trong cùng một danh sách phẳng. */
.project-settings-section {
  display: flex; flex-direction: column; gap: var(--ui-space-1);
  margin-top: var(--ui-space-2-5); padding: var(--ui-space-2-5) var(--ui-space-2) var(--ui-space-3);
  border: var(--ui-stroke-thin) solid var(--ux-border); border-radius: var(--ui-radius-panel);
  background: var(--ux-sunken);
}
.project-settings-section .project-settings-head { margin-top: 0; }
.project-settings-head {
  display: flex; align-items: baseline; gap: var(--ui-space-2);
  margin: var(--ui-space-3) 0 var(--ui-space-1); padding: 0 var(--ui-space-1-5);
  font: var(--fw-overline) var(--fs-caption)/var(--lh-overline) var(--app-font);
  color: var(--ui-text-secondary);
}
.project-settings-head:first-child { margin-top: var(--ui-space-0-5); }
.project-settings-head small {
  flex: 1; min-width: 0;
  font: var(--fw-medium) var(--fs-micro)/var(--lh-snug) var(--app-font);
  letter-spacing: 0; text-transform: none;
  color: var(--ui-text-muted);
}
.project-settings-row {
  display: flex; align-items: center; gap: var(--ui-space-2);
  padding: var(--ui-space-1) var(--ui-space-2);
  border: var(--ui-stroke-thin) solid transparent; border-radius: var(--ui-radius-control);
  font-size: var(--fs-caption);
  transition: background var(--ui-duration-fast) var(--ui-ease), border-color var(--ui-duration-fast) var(--ui-ease), opacity var(--ui-duration-fast) var(--ui-ease);
}
.project-settings-row:hover { background: color-mix(in srgb, var(--ui-accent) 6%, transparent); }
.project-settings-row.is-dragging { opacity: .4; }
.project-settings-row.is-drop-target { border-color: var(--ui-accent); border-style: dashed; }
/* KHÔNG dùng opacity để đánh dấu "đã lưu trữ" — nó làm mờ luôn cả chấm màu
   dự án, trông như màu bị đổi. Trạng thái lưu trữ đã có huy hiệu riêng
   (.project-settings-archived-badge); chấm màu giữ nguyên tông thật. */
.project-settings-row.is-orphan { background: color-mix(in srgb, var(--ui-text-muted) 7%, transparent); }
/* Huy hiệu phân loại Dự án (liên kết Công việc, tông accent) / Nhóm (ghi chú
   riêng, tông trung tính) — cùng công thức color-mix + pill với
   .project-settings-archived-badge để nhất quán ngôn ngữ hình ảnh. */
.project-type-badge {
  flex: none;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  padding: var(--ui-space-0-5) var(--ui-space-2);
  border-radius: var(--ui-radius-pill);
  white-space: nowrap;
}
.project-type-badge.is-linked {
  background: color-mix(in srgb, var(--ui-accent) 18%, transparent);
  color: var(--ui-accent);
}
.project-type-badge.is-notebook {
  background: color-mix(in srgb, var(--ui-text-muted) 16%, transparent);
  color: var(--ui-text-secondary);
}
.project-settings-drag { flex: none; display: flex; align-items: center; color: var(--ui-text-secondary); cursor: grab; }
.project-settings-drag.is-disabled { width: var(--ui-space-3); cursor: default; }
.project-settings-dot {
  flex: none; width: var(--ui-space-2-5); height: var(--ui-space-2-5); border-radius: var(--ui-radius-circle);
  background: var(--project-color, var(--ui-accent));
}
.project-settings-main { display: flex; flex-direction: column; gap: var(--ui-space-px); flex: 1; min-width: 0; }
.project-settings-name {
  display: flex; align-items: center; gap: var(--ui-space-1);
  font-weight: var(--fw-semibold); color: var(--ui-text-primary);
  min-width: 0;
}
.project-settings-name-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.project-settings-meta { font-size: var(--fs-caption); color: var(--ui-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* flex: none trên 2 cột đuôi — mặc định flex-shrink là 1 nếu không khai báo,
   nên khi một hàng có tên/meta dài hơn hàng khác, trình duyệt co bớt CẢ
   .project-settings-sync/-actions theo tỉ lệ thay vì chỉ co phần tên (dù tên
   đã có min-width:0 để chịu co). Kết quả: cột "Đồng bộ" và cột nút hành động
   trôi lệch vài px giữa các hàng tùy độ dài tên/meta — đúng lỗi "cột không
   thẳng hàng" quan sát được. Khóa flex:none để chỉ .project-settings-main
   (đã min-width:0, tự cắt bằng ellipsis) chịu toàn bộ áp lực co hẹp. */
.project-settings-sync {
  flex: none;
  display: flex; align-items: center; gap: var(--ui-space-1-5);
  color: var(--ui-text-secondary); font: var(--fw-semibold) var(--fs-micro)/var(--lh-none) var(--app-font);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.project-settings-actions { flex: none; display: flex; align-items: center; gap: var(--ui-space-1); }
.project-settings-lock {
  flex: none;
  display: inline-flex;
  align-items: center;
  color: var(--ui-text-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-none);
}
.project-settings-bulk { padding: var(--ui-space-0-5) var(--ui-space-1-5) var(--ui-space-1-5); }
.project-settings-empty { margin: var(--ui-space-3) var(--ui-space-1-5); color: var(--ui-text-muted); font-size: var(--fs-body); }

/* Dialog tạo/sửa Dự án (projectDialog.js) không còn CSS riêng — nó dùng lại
   nguyên bộ lớp overlay-*/
/* ==========================================================================
   NAVIGATION RAIL — điều hướng chính Task / Notics / Project
   ==========================================================================
   Rail được đặt absolute và .app nhận padding-left thay vì đổi .app sang grid:
   .app đang là flex column với nhiều con (nền, topbar, 4 trang full-page, các
   overlay). Chuyển sang grid sẽ phải khai báo vị trí cho từng con, và bất kỳ
   phần tử nào thêm sau này cũng phải nhớ khai báo — một cái bẫy im lặng. */

/* Rail Thẻ nổi dùng chung bề rộng compact với Liền mạch (--ui-rail-w, 50px)
   để menu trái không đổi kích thước theo khung viền (BA 22/09/2026). Khai
   báo tường minh ở đây để không lặng lẽ thua cascade trong chế độ seamless. */
:root:not([data-shell-frame="seamless"]) { --rail-w: var(--ui-rail-w); }

.app { padding-left: var(--rail-w); transition: padding-left var(--ui-duration-standard) var(--ui-ease); }

.nav-rail {
  -webkit-app-region: no-drag;
  position: absolute; left: 0; top: 0; bottom: 0;
  z-index: var(--ui-layer-pane-top);
  width: var(--rail-w);
  display: flex; flex-direction: column;
  padding: var(--ui-space-2) var(--ui-space-2) var(--ui-space-2-5);
  gap: var(--ui-space-1);
  border-right: var(--ui-stroke-thin) solid var(--stroke);
  border-top-left-radius: var(--sf-radius-win);
  border-bottom-left-radius: var(--sf-radius-win);
  background: rgba(var(--ui-surface-shell-rgb), var(--a-shell));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  transition: width var(--ui-duration-standard) var(--ui-ease);
  overflow: hidden;
}
html[data-material="glass"] .nav-rail { border-top-left-radius: 0; border-bottom-left-radius: 0; border-radius: 0; }
/* Match the topbar's actual fill (--sf-card, not the --sf-chrome the base
   rule above uses) so the rail and header read as one continuous surface
   instead of two different tones — see the fluent/glass .topbar rules this
   mirrors. */
html:not([data-material="glass"]) .nav-rail {
  background: var(--ux-header);
}
html[data-material="glass"] .nav-rail {
  background: rgba(var(--ui-surface-raised-rgb), .88);
}

/* Bọc Task/Notics/.../nút thu-mở, tách khỏi avatar (mục đầu rail, markup
   ngoài .nav-rail-body) — Image Canvas (Ctrl+6) ẩn khối này bằng opacity mà
   không ảnh hưởng avatar. position: relative làm containing block cho ::after. */
.nav-rail-body {
  position: relative;
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0;
  margin-top: var(--ui-space-3);
  gap: var(--ui-space-1);
}

.nav-rail-primary, .nav-rail-secondary { display: flex; flex-direction: column; gap: var(--rail-group-gap, var(--ui-space-1-5)); }
/* Module icons sit at the top of .nav-rail-body (directly below the avatar)
   via normal flex-column flow — no absolute centering needed. */
.nav-rail-spacer { flex: 1 1 auto; }

/* Color signatures per module — one semantic token per app. These are shared
   by the icon, selected pill, focus ring and shadow so a module never drifts
   into several near-identical hardcoded colors. */
/* Giá trị light lấy đúng bảng màu của bộ design "Bộ icon 10 ứng dụng".
   Bản dark là cùng hue nhưng sáng hơn để còn đọc được trên nền tối. */
:root {
  --nav-tone-task: var(--ui-module-task);
  --nav-tone-note: var(--ui-module-note);
  --nav-tone-project: var(--ui-module-project);
  --nav-tone-capture: var(--ui-module-capture);
  --nav-tone-paint: var(--ui-module-paint);
  --nav-tone-quick-note: var(--ui-module-quick-note);
  --nav-tone-art: var(--ui-module-art);
  --nav-tone-premium: var(--ui-module-premium);
  --nav-tone-dashboard: var(--ui-module-dashboard);
  --nav-tone-settings: var(--ui-module-settings);
  --nav-tone-admin: var(--ui-module-admin);
}

html[data-mode="dark"] {
  --nav-tone-task: var(--ui-module-task);
  --nav-tone-note: var(--ui-module-note);
  --nav-tone-project: var(--ui-module-project);
  --nav-tone-capture: var(--ui-module-capture);
  --nav-tone-paint: var(--ui-module-paint);
  --nav-tone-quick-note: var(--ui-module-quick-note);
  --nav-tone-art: var(--ui-module-art);
  --nav-tone-premium: var(--ui-module-premium);
  --nav-tone-dashboard: var(--ui-module-dashboard);
  --nav-tone-settings: var(--ui-module-settings);
  --nav-tone-admin: var(--ui-module-admin);
}

/* Mực vẽ glyph khi ô đang chọn đã đổ đặc màu module. Light mode: tone bão hoà
   nên chữ trắng đạt >= 3:1 (ngưỡng non-text của WCAG) với mọi tone trừ hai
   tone vàng — hai tone đó tự khai báo mực tối bên dưới. Dark mode: tone là
   màu pastel sáng, nên mực phải là mực tối, và luật này thắng về specificity
   nên hai override vàng không lọt sang. */
.nav-rail-item { --nav-icon-contrast: light-dark(var(--ui-text-on-accent), var(--dt-semantic-color-dark-surface-shell)); }
/* `--ux-shell` có alpha ở Liquid Glass nên dùng nó làm `color` khiến glyph
   active chỉ còn ~52% opacity. Mực active phải là màu đục, không phải surface. */

.nav-rail-item[data-nav-view="calendar"] {
  --item-accent: var(--nav-tone-task);
}

.nav-rail-item[data-nav-view="notics"] {
  --item-accent: var(--nav-tone-note);
}

.nav-rail-item[data-nav-view="project"] {
  --item-accent: var(--nav-tone-project);
}

.nav-rail-item[data-nav-view="antiScreenshot"] {
  --item-accent: var(--nav-tone-capture);
}



.nav-rail-item[data-nav-view="noteSpeed"] {
  --item-accent: var(--nav-tone-quick-note);
  /* Nền vàng: cutout của icon cập nhật phải là mực tối mới đọc được. */
  --nav-icon-contrast: var(--dt-semantic-color-dark-surface-shell);
}

.nav-rail-item[data-nav-view="image"] {
  --item-accent: var(--nav-tone-art);
}

.nav-rail-item[data-nav-view="premium"] {
  --item-accent: var(--nav-tone-premium);
  --nav-icon-contrast: var(--dt-semantic-color-dark-surface-shell);
}

.nav-rail-item[data-nav-view="dashboard"] {
  --item-accent: var(--nav-tone-dashboard);
}

.nav-rail-item[data-nav-view="settings"] {
  --item-accent: var(--nav-tone-settings);
}

.nav-rail-item[data-nav-view="premiumAdmin"] {
  --item-accent: var(--nav-tone-admin);
}

.nav-rail-update { --item-accent: var(--nav-tone-quick-note); }

/* Hình học chuẩn và trạng thái hover/active của .nav-rail-item được quy định
   duy nhất tại styles.css theo Design Tokens (--ui-navigation-*). Không khai
   báo lại padding, gap, border hay hover màu ở đây để tránh giật giao diện. */
/* Kéo thả sắp xếp lại rail — xem enableReorder() trong navRail.js.
   touch-action:none để trình duyệt không nuốt pointermove thành cử chỉ cuộn;
   user-select:none để kéo lâu không bôi đen nhãn module. */
.nav-rail-primary .nav-rail-item {
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}
.nav-rail-primary.is-reordering .nav-rail-item {
  transition: transform var(--ui-duration-standard) var(--ui-ease), background var(--ui-duration-fast) var(--ui-ease), color var(--ui-duration-fast) var(--ui-ease);
}
/* Item đang kéo bám con trỏ nên KHÔNG được có transition transform, nếu không
   nó lết theo sau chuột một nhịp. */
.nav-rail-primary .nav-rail-item.is-dragging {
  transition: none;
  z-index: var(--ui-layer-raised);
  cursor: grabbing;
  opacity: .96;
  background: light-dark(color-mix(in srgb, var(--item-accent, var(--ui-accent)) 18%, var(--ui-surface-panel, rgba(var(--ui-white-rgb),.9))), color-mix(in srgb, var(--item-accent, var(--ui-accent)) 26%, rgba(var(--ui-black-rgb), .92)));
  border-color: color-mix(in srgb, var(--item-accent, var(--ui-accent)) 42%, transparent);
  box-shadow: var(--nav-drag-shadow);
}
/* Bóng mục rail đang kéo theo chế độ (bóng riêng, không thuộc bậc elevation chuẩn). */
:root { --nav-drag-shadow: 0 10px 24px -6px rgba(var(--ui-black-rgb), .35); } /* audit-keep: bóng riêng của thành phần, không thuộc bậc elevation chuẩn */
html[data-mode="dark"] { --nav-drag-shadow: 0 12px 28px -6px rgba(var(--ui-black-rgb), .6); } /* audit-keep: bóng riêng của thành phần, không thuộc bậc elevation chuẩn */
/* Vạch chỉ báo mục đang chọn bám mép rail, kéo item đi thì vạch phải đi theo
   item chứ không được đứng lại chỗ cũ — nó là ::before của chính item nên đã
   tự đi theo transform; chỉ cần tắt glow cho đỡ nhòe khi đang kéo. */
.nav-rail-primary .nav-rail-item.is-dragging.is-active::before {
  box-shadow: none;
}

.nav-rail-icon {
  flex: none;
  display: grid; place-items: center;
  /* Hình học rail thuộc bộ biến --rail-* ở khối chuẩn cuối styles.css.
     Không ghim 48px/100% tại đây: file này nạp sau và từng kéo nền active
     thành box 48x60 thay vì tile vuông 36x36. */
  width: var(--rail-tile); height: var(--rail-tile);
  border-radius: var(--ui-radius-full);
  color: var(--ui-text-secondary);
  border: var(--ui-stroke-thin) solid transparent;
  background: transparent;
  box-shadow: none;
  transition: color var(--ui-duration-fast) var(--ui-ease);
  transform: none;
}

/* Trạng thái nghỉ không dùng halo nền để tránh đổi màu đột ngột khi hover. */
.nav-rail-item:not(.is-active):not(:hover) .nav-rail-icon {
  background: transparent;
  border-color: transparent;
}
.nav-rail-icon svg {
  /* Dùng đúng token icon navigation 24px để các nét được raster hoá sắc và
     đồng nhất giữa Compact/Expanded, không phóng SVG bằng transform. */
  width: var(--rail-icon); height: var(--rail-icon);
  stroke: currentColor;
  stroke-width: 1.5;
  transition: color var(--ui-duration-fast) var(--ui-ease);
  overflow: visible;
  filter: none;
  transform: none;
}

/* Ở nền tối, không dùng border/nền khi active theo quy chuẩn mới */
.nav-rail-item:hover .nav-rail-icon svg {
  transform: none;
  filter: none;
}
.nav-rail-item.is-active .nav-rail-icon svg {
  transform: none;
  filter: none;
}
.nav-icon-outline,
.nav-icon-fill {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity var(--ui-duration-fast) var(--ui-ease);
}
.nav-icon-outline { opacity: 1; transform: none; }
.nav-icon-fill { opacity: 0; transform: none; }
/* Fill thuần dừng ở tim nét outline nên nhìn hụt nửa stroke ở mỗi cạnh.
   Stroke cùng màu chỉ bù đúng biên quang học; không tạo border tương phản và
   không scale SVG, vì vậy chuyển trạng thái không bị co/giật. */
.nav-icon-optical-fill {
  fill: currentColor;
  stroke: currentColor;
}
.nav-icon-cutout {
  fill: none;
  stroke: var(--nav-icon-contrast, var(--ui-text-on-accent));
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-icon-cutout-fill {
  fill: var(--nav-icon-contrast, var(--ui-text-on-accent));
  stroke: none;
}
.nav-rail-item:hover .nav-icon-outline { transform: none; }
/* Chỉ icon có sẵn bản solid (svg[data-dual]) mới đổi hình khi chọn. Icon module
   theo bộ design chỉ có một glyph nên phải giữ nguyên, không được ẩn đi. */
.nav-rail-item.is-active svg[data-dual] .nav-icon-outline { opacity: 0; transform: none; }
.nav-rail-item.is-active svg[data-dual] .nav-icon-fill { opacity: 1; transform: none; }
.nav-rail-update[data-update-status="ready"] svg[data-dual] .nav-icon-outline { opacity: 0; transform: none; }
.nav-rail-update[data-update-status="ready"] svg[data-dual] .nav-icon-fill { opacity: 1; transform: none; }

.settings-switch-input {
  flex: none;
  width: var(--ui-icon-sm);
  height: var(--ui-icon-sm);
  margin: 0 var(--ui-space-0-5) 0 var(--ui-space-2-5);
  accent-color: var(--ui-accent);
  cursor: pointer;
}
/* Khoá Premium — vẫn bấm được (để hiện toast nâng cấp) nhưng phải trông khác
   hẳn nút bình thường, không thì người dùng tưởng app bị lỗi không phản hồi. */
.nav-rail-item.is-locked {
  opacity: 0.5;
}
.nav-rail-item.is-locked:hover {
  opacity: 0.75;
}
.nav-rail-item.is-locked::after {
  content: "";
  position: absolute; right: var(--ui-space-1-5); bottom: var(--ui-space-1-5);
  width: var(--ui-icon-dense); height: var(--ui-icon-dense);
  border-radius: var(--ui-radius-circle);
  background: var(--ui-surface-panel, var(--ux-raised));
  box-shadow: 0 0 0 var(--ui-space-px) color-mix(in srgb, var(--ui-text-secondary) 30%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9px 9px;
}
html[data-rail="expanded"] .nav-rail-item.is-locked::after {
  right: auto; left: var(--ui-space-8);
}

/* Nhãn .nav-rail-label tuân theo khối chuẩn trong styles.css và token --ui-navigation-label-h. */

.nav-rail-kbd {
  flex: none;
  opacity: 0; transform: translateX(-4px);
  margin-right: var(--ui-space-1-5);
  padding: var(--ui-space-0-5) var(--ui-space-1-5);
  font: var(--fw-semibold) var(--fs-micro)/var(--lh-none) var(--app-font);
  border-radius: var(--ui-radius-control);
  background: rgba(var(--ink), 0.06);
  color: var(--ui-text-muted);
  border: var(--ui-stroke-thin) solid var(--stroke);
  transition: opacity var(--ui-duration-fast) var(--ui-ease) var(--ui-duration-fast), transform var(--ui-duration-fast) var(--ui-ease) var(--ui-duration-fast);
  pointer-events: none;
}
html[data-rail="expanded"] .nav-rail-kbd { opacity: 0.8; transform: none; }

.nav-rail-toggle {
  flex: none;
  display: grid; place-items: center;
  width: 100%; height: var(--ui-size-md); margin-top: var(--ui-space-1);
  border: 0; border-radius: var(--ui-radius-control);
  background: transparent; color: var(--ui-text-muted);
  cursor: pointer;
  transition: background var(--ui-duration-fast) var(--ui-ease), color var(--ui-duration-fast) var(--ui-ease);
}
.nav-rail-toggle:hover { background: color-mix(in srgb, var(--ui-accent) 10%, transparent); color: var(--ui-text-primary); }
.nav-rail-toggle svg { width: var(--ui-icon-sm); height: var(--ui-icon-sm); transition: transform var(--ui-duration-standard) var(--ui-ease); }
html[data-rail="expanded"] .nav-rail-toggle svg { transform: rotate(180deg); }

/* Update reminder icon — orange while an update is available/downloading/
   errored, green once it's downloaded and ready to install. The dot repeats
   the same color so the state reads even when the rail is collapsed to just
   icons. */
.nav-rail-update {
  --item-accent: var(--ui-warning);
  --item-accent-rgb: var(--ui-warning-rgb);
}
.nav-rail-update[data-update-status="ready"] {
  --item-accent: var(--ui-success);
  --item-accent-rgb: var(--ui-success-rgb);
}
/* Bản đã tải bị bỏ qua lâu (utils/updateAge.js): xanh -> cam -> đỏ, kiểu Chrome. */
.nav-rail-update[data-update-status="ready"][data-update-age="stale"] {
  --item-accent: var(--ui-warning);
  --item-accent-rgb: var(--ui-warning-rgb);
}
.nav-rail-update[data-update-status="ready"][data-update-age="overdue"] {
  --item-accent: var(--ui-danger);
  --item-accent-rgb: var(--ui-danger-rgb);
}
.nav-rail-update.hidden { display: none; }
.nav-rail-update-dot {
  position: absolute; top: var(--ui-space-1-5); right: var(--ui-space-2);
  width: var(--ui-space-2); height: var(--ui-space-2); border-radius: var(--ui-radius-circle);
  background: var(--item-accent);
  box-shadow: 0 0 0 2px rgb(var(--ui-surface-shell-rgb)); /* audit-keep: bóng riêng của thành phần, không thuộc bậc elevation chuẩn */
}
html[data-rail="expanded"] .nav-rail-update-dot { right: auto; left: var(--ui-space-8); }
.nav-rail-update[data-update-status="downloading"] .nav-rail-icon svg {
  animation: navUpdateSpin var(--ui-duration-spin) linear infinite;
}
.nav-rail-update[data-update-status="downloading"] .nav-rail-update-dot {
  animation: navUpdatePulse 1.4s ease-in-out infinite; /* audit-keep: chuyển động biên đạo riêng (keyframes), không thuộc nhịp giao diện chuẩn */
}
@keyframes navUpdateSpin { to { transform: rotate(360deg); } }
@keyframes navUpdatePulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
  .app, .nav-rail, .nav-rail-label, .nav-rail-toggle svg { transition: none; }
  .nav-rail-update[data-update-status="downloading"] .nav-rail-icon svg,
  .nav-rail-update[data-update-status="downloading"] .nav-rail-update-dot { animation: none; }
}

/* ==========================================================================
   MODULE PROJECT
   ========================================================================== */

/* View isolation and header visibility handled globally */

.project-page {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex; flex-direction: column;
  margin: var(--ui-space-2-5);
  color: var(--ui-text-primary);
  background: var(--ux-base);
  border: var(--ui-stroke-thin) solid var(--stroke);
  border-radius: var(--ui-radius-panel);
  box-shadow: var(--elev-4);
  overflow: hidden;
}
/* height/padding đồng bộ với .notics-page-header — 2 header cùng "họ" module
   con (Task/Project/Notics) nên phải cùng nhịp, không được mỗi trang 1 kiểu. */
/* Neo theo tâm thật của header (position:absolute + left:50%) thay vì
   flex:1 căn giữa theo khoảng trống còn lại — breadcrumb dự án ở
   header-left đổi độ dài (đổi dự án) trước đây kéo cả thanh tab xê dịch
   theo; kỹ thuật giống .dashboard-header-center / khối tìm kiếm Notics. */

.project-body {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: var(--project-list-width, 230px) minmax(0, 1fr);
  /* Khoảng cách header→body đồng bộ với tab Task/Notics — xem ghi chú ở .notics-body. */
  padding-top: var(--ui-space-2);
  transition: grid-template-columns var(--ui-duration-standard) var(--ui-ease);
}
/* Gantt cần bề ngang; thu gọn cột trái là thao tác thường xuyên trên laptop. */
.project-page.is-sidebar-collapsed .project-col-list { display: none !important; }
.project-page.is-sidebar-collapsed .project-body {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.project-col { min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
/* Nền do .ux-pane lo (ui-foundation.css). Nền cũ rgba(--sf-card,.35) là bậc thứ
   tư trong bốn cách tô cột menu của app — trắng-mờ-35% không nằm trong thang
   bề mặt nào cả. */
/* position:relative là khung neo của thanh kéo #projectListResizer (absolute,
   right âm) — thiếu nó thanh kéo neo theo .project-page và nằm ở MÉP PHẢI
   trang thay vì ranh giới danh sách/nội dung (cùng khuôn .notics-col). */
.project-col-list { position: relative; border-right: var(--ui-stroke-thin) solid var(--stroke); }
.project-col-main { position: relative; }

.project-list {
  flex: 1 1 auto;
  padding: var(--ui-space-0-5) var(--ui-space-1-5) var(--ui-space-1);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}
.project-portfolio-menu { flex: none; padding: var(--ui-space-1) var(--ui-space-1-5) var(--ui-space-1); }
/* Đầu danh sách: nhãn "Dự án" + nút ＋ icon (thay nút chính "+ Dự án" ở topbar, BA 10/10/2026). */
.project-list-head {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2);
  padding: var(--ui-space-1) var(--ui-space-2) var(--ui-space-0-5) var(--ui-space-4);
}
.project-list-head-label {
  font: var(--fw-semibold) var(--fs-caption)/var(--lh-tight) var(--app-font); color: var(--ui-text-secondary);
}
/* Hàng "Kế hoạch Dự án" = mục điều hướng nhanh đầu cột (như "Tất cả ghi chú"
   bên QuickNote) — hàng phẳng, không khung thẻ. */
.project-portfolio-plan-btn {
  width: 100%; display: flex; align-items: center; gap: var(--ui-space-2); padding: var(--ui-space-1-5) var(--ui-space-2-5);
  border: none; border-left: var(--ui-stroke-thick) solid transparent;
  border-radius: 0; background: transparent;
  color: var(--ui-text-primary); text-align: left; font-family: var(--app-font); cursor: pointer;
  transition: background var(--ui-duration-fast) var(--ui-ease), border-color var(--ui-duration-fast) var(--ui-ease);
}
} /* @layer legacy */

/* ==========================================================================
   MÀN PROJECT — chọn khu vực khi header hẹp (compact/tight). BA báo 19/09/2026:
   dropdown cũ là lưới 2 cột ô có viền, chữ 16px trải toàn bề ngang. Nay là menu
   chuẩn: một cột, rộng popover sm, căn phải, khung popover chuẩn, mục md 32 chữ 14,
   không viền; chọn = nền chọn + chữ màu nhấn (hợp đồng mục điều hướng). Nút mở
   đọc như ô chọn (chữ 14). Ẩn/hiện vẫn do .hidden + rule responsive ở legacy.
   ========================================================================== */
@layer modules {
  .project-tab-compact-toggle {
    font-size: var(--fs-body);
  }
  .project-tab-compact-panel {
    left: auto;
    width: var(--ui-popover-w-sm);
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-0-5);
    padding: var(--ui-space-1);
    border: var(--ui-resizer-line) solid var(--ui-divider);
    border-radius: var(--ui-radius-lg);
    background-color: var(--ux-overlay);
    box-shadow: var(--ui-elevation-2);
  }
  .project-tab-compact-panel [data-project-tab] {
    display: flex;
    align-items: center;
    min-height: var(--ui-size-md);
    padding: 0 var(--ui-space-3);
    border: 0;
    border-radius: var(--ui-radius-control);
    background-color: transparent;
    color: var(--ui-text-primary);
    font-size: var(--fs-body);
    text-align: start;
  }
  .project-tab-compact-panel [data-project-tab]:hover {
    background-color: var(--ui-hover);
  }
  .project-tab-compact-panel [data-project-tab].is-active {
    background-color: var(--ux-nav-selected);
    color: var(--ui-accent);
    font-weight: var(--fw-semibold);
  }
  .project-tab-compact-panel [data-project-tab]:focus-visible {
    outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring);
    outline-offset: calc(var(--ui-focus-ring-width) * -1);
  }
}

/* ==========================================================================
   CÀI ĐẶT → DỰ ÁN: CỘT THẲNG HÀNG (BA báo 19/09/2026)
   Danh sách là MỘT lưới 6 cột [kéo | chấm | loại | tên | trạng thái | thao tác];
   mỗi hàng (kể cả hàng trong khối Lưu trữ / Nhãn cũ) dùng subgrid nên từng cột
   rộng bằng ô rộng nhất của MỌI hàng — cột "Đồng bộ"/"Khôi phục" và cột icon
   thẳng tuyệt đối, không số gõ cứng. Khối Lưu trữ bỏ lề/viền lồng (gây lệch
   cả chấm màu lẫn tên), tách nhóm bằng tiêu đề như hai nhóm phía trên.
   ========================================================================== */
@layer modules {
  .projects-management-list {
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr) auto auto;
    column-gap: var(--ui-space-2);
    row-gap: var(--ui-space-0-5);
  }
  .projects-management-list > *,
  .project-settings-section > * {
    grid-column: 1 / -1;
  }
  :is(.project-settings-section, .project-settings-row) {
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
  }
  .project-settings-section {
    row-gap: var(--ui-space-0-5);
    margin-top: var(--ui-space-2);
    padding: 0;
    border: 0;
    background: transparent;
  }
  .project-settings-row {
    padding: var(--ui-space-1) var(--ui-space-2);
    font-size: var(--fs-body);
  }
  .project-settings-row > :is(.project-settings-sync, .project-restore-btn, .project-promote-btn) {
    justify-self: end;
  }
  .project-settings-actions {
    justify-self: end;
    gap: var(--ui-space-1);
  }
  .project-type-badge {
    justify-self: start;
  }
  .project-settings-name {
    font-size: var(--fs-body);
  }
  .project-settings-meta {
    font-size: var(--fs-caption);
  }
  .project-settings-sync {
    font-size: var(--fs-body);
  }
  .project-settings-actions .is-danger:hover {
    color: var(--ui-danger);
  }
}

/* ==========================================================================
   MÀN PROJECT — GĐ4 (docs/BAO-CAO-CHUAN-HOA-UI-TOKEN-2026-09-18.md §7.2, khung A+B)
   Nút Tổng quan/Milestone/Gantt/Kế hoạch → .ui-btn (markup); zoom Gantt và bộ lọc
   Công việc → .ui-segmented. Ở đây: thẻ thống kê và thẻ tuần theo thẻ chuẩn (bo
   radius.lg, đệm --ui-card-pad, phẳng — thẻ tuần giữ viền "đang chọn" nên chỉ chỉnh
   bo/bóng), ô tìm kiếm là ô nhập chuẩn (md 32, chữ 14), nhãn "Kế hoạch/Báo cáo"
   12px (ARS-1: 11px chỉ cho số đếm), "Dự án cũ" cao md.
   ========================================================================== */
@layer modules {
  .project-stat {
    padding: var(--ui-card-pad);
    border-radius: var(--ui-radius-lg);
  }
  .project-weekly-card {
    border-radius: var(--ui-radius-lg);
    box-shadow: none;
  }
  .project-notes-search {
    box-sizing: border-box;
    height: var(--ui-size-md);
    min-height: var(--ui-size-md);
    padding-block: 0;
    padding-inline: var(--ui-space-3);
    border: var(--ui-resizer-line) solid var(--ux-input-border);
    border-radius: var(--ui-radius-control);
    background-color: var(--ux-input-bg);
  }
  .project-notes-search:focus-within {
    border-color: var(--ui-accent);
  }
  .project-notes-search-input {
    font-size: var(--fs-body);
  }
  :is(.project-weekly-badge, .project-weekly-col-badge) {
    font-size: var(--fs-caption);
  }
  .ux-pane .project-archive-link::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: calc(-1 * var(--ui-space-1));
    height: var(--ui-resizer-line);
    background: var(--ui-divider);
    pointer-events: none;
  }
}

/* ==========================================================================
   PROJECT — BIẾN THỂ FLAT (GĐ5.5, docs/PLAN-FLAT-SURFACE-GD5.md)
   Chỉ khi html[data-surface="flat"]. Dải thống kê ở Tổng quan (Công việc ·
   Ghi chú · Milestone) thành MỘT dải chia vạch — cùng kỹ thuật với tầng
   Dashboard (khung viền + bo + cắt tràn, ô vẽ vạch trái/trên bằng box-shadow)
   vì lưới auto-fit tự xuống hàng ở bề rộng hẹp. Ô icon "Kế hoạch Dự án" thành
   glyph trần qua --icon-tile-bg. Thẻ ghi chú/thẻ tuần là đối tượng nội dung
   nên GIỮ dạng thẻ (BA Q3).
   ========================================================================== */
@layer modules {
  html[data-surface="flat"] .project-stats {
    gap: var(--ui-flat-gap);
    border: var(--ui-flat-divider-w) solid var(--ui-divider);
    border-radius: var(--ui-flat-group-radius);
    overflow: hidden;
  }
  html[data-surface="flat"] .project-stats > .project-stat {
    border-width: 0;
    border-radius: var(--ui-flat-radius-inner);
    box-shadow:
      calc(var(--ui-flat-divider-w) * -1) 0 0 0 var(--ui-divider),
      0 calc(var(--ui-flat-divider-w) * -1) 0 0 var(--ui-divider);
  }
  html[data-surface="flat"] .project-portfolio-plan-icon {
    --icon-tile-bg: transparent;
  }
}

/* Khai báo từng là !important trong @layer legacy — chuyển sang layer cuối `overrides`
   (thắng mọi khai báo thường ở mọi layer, đúng như cờ important cũ), cùng selector, cùng
   thứ tự, cùng ngữ cảnh @media. Sinh tự động 01/10/2026 (KE-HOACH-DAT-CHUAN-QUOC-TE-UI GĐ B–E);
   thuộc tính ẩn/hiện/định vị giữ cờ important vì JS gắn nội tuyến. */
@layer overrides {
  .project-body.is-pane-resizing { transition: none; }

  /* Cùng logic hai bậc với Notebook (BA 10/10/2026): menu = .ux-pane (bậc chìm),
     vùng nội dung = --ui-surface-raised (mặt chữ đặc) — như .notics-col-notes ở
     notics.css. .ux-canvas (--ux-base) ở Sáng trùng RGB với bậc chìm nên menu và
     nội dung thành một màu; trên hình nền + Kính trong nó chỉ còn tấm .14 nên chữ
     (tiêu đề, bộ lọc, Gantt) đè thẳng lên ảnh. BA không duyệt kiểu hai thẻ bo
     góc + khe. Phải ở overrides: .ux-canvas đặt nền tại chính layer này. */
  .project-col-main { background: var(--ui-surface-raised); }
}

/* Thẻ cập nhật (components/updateOverlay.js): neo bên phải nút Cập nhật/Cài
   đặt ở đáy rail, JS ghi left/bottom theo hình học thật của nút. Khung, nền,
   bóng lấy từ .ui-popover; ở đây chỉ bố cục và trạng thái. */
@layer modules {
  .update-card {
    position: fixed;
    left: var(--ui-space-12);
    bottom: var(--ui-space-2);
    z-index: var(--layer-toast);
    box-sizing: border-box;
    display: grid;
    gap: var(--ui-space-2);
    width: var(--ui-popover-w-md);
    max-width: calc(100vw - var(--ui-space-4));
    margin-left: var(--ui-space-2);
    padding: var(--ui-space-3);
    color: var(--ui-text-primary);
    transform-origin: left bottom;
  }
  .update-card[hidden] { display: none; }
  .update-card.is-entering {
    animation: updateCardIn var(--ui-duration-page) var(--ui-ease-enter) both;
  }
  .update-card-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ui-space-2-5);
  }
  .update-card-icon {
    display: grid; place-items: center;
    width: var(--ui-size-md); height: var(--ui-size-md);
    border-radius: var(--ui-radius-circle);
    color: var(--update-tone);
    background: color-mix(in srgb, var(--update-tone) 14%, transparent);
  }
  .update-card-icon svg { width: var(--ui-icon-sm); height: var(--ui-icon-sm); }
  .update-card-copy { display: grid; min-width: 0; gap: var(--ui-space-0-5); }
  .update-card-title {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
  }
  .update-card-version {
    font-size: var(--fs-caption);
    color: var(--ui-text-secondary);
    font-variant-numeric: tabular-nums;
  }
  .update-card-version:empty { display: none; }
  .update-card-text, .update-card-hint {
    margin: 0;
    font-size: var(--fs-caption);
    line-height: var(--lh-snug);
    color: var(--ui-text-secondary);
  }
  .update-card-hint[hidden], .update-card-progress[hidden],
  .update-card .ui-btn[hidden] { display: none; }
  .update-card-progress {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ui-space-2);
  }
  .update-card-progress .progress-track {
    position: relative;
    overflow: hidden;
    height: var(--ui-space-1);
  }
  .update-card-progress-label {
    font-size: var(--fs-caption);
    color: var(--ui-text-secondary);
    font-variant-numeric: tabular-nums;
  }
  /* Đang cài: vệt sáng chạy qua lại thay cho phần trăm (không đo được). */
  .update-card-progress.is-indeterminate .update-card-progress-label { display: none; }
  .update-card-progress.is-indeterminate .progress-fill {
    width: 40%;
    animation: updateCardSweep var(--ui-duration-pulse) var(--ui-ease) infinite;
  }
  .update-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--ui-space-2);
  }
  .update-card-actions:not(:has(.ui-btn:not([hidden]))) { display: none; }

  /* Màu nhấn theo trạng thái, khớp nút trên rail. */
  .update-card { --update-tone: var(--ui-accent); }
  .update-card[data-state="available"] { --update-tone: var(--ui-warning); }
  .update-card[data-state="ready"] { --update-tone: var(--ui-success); }
  .update-card[data-state="ready"][data-update-age="stale"] { --update-tone: var(--ui-warning); }
  .update-card[data-state="ready"][data-update-age="overdue"],
  .update-card[data-state="error"] { --update-tone: var(--ui-danger); }
  .update-card[data-state="installing"] .update-card-icon svg,
  .update-card[data-state="downloading"] .update-card-icon svg {
    animation: updateCardLift var(--ui-duration-pulse) var(--ui-ease) infinite;
  }

  @keyframes updateCardIn {
    from { opacity: 0; transform: translateY(var(--ui-motion-distance)) scale(var(--ui-motion-scale-popover)); }
    to { opacity: 1; transform: none; }
  }
  @keyframes updateCardSweep {
    from { transform: translateX(-100%); }
    to { transform: translateX(250%); }
  }
  @keyframes updateCardLift {
    0%, 100% { transform: translateY(var(--ui-motion-distance-subtle)); }
    50% { transform: translateY(calc(var(--ui-motion-distance-subtle) * -1)); }
  }
  @media (prefers-reduced-motion: reduce) {
    .update-card.is-entering,
    .update-card-progress.is-indeterminate .progress-fill,
    .update-card[data-state] .update-card-icon svg { animation: none; }
    .update-card-progress.is-indeterminate .progress-fill { width: 100%; }
  }
}