@layer legacy {
.dashboard-page {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: var(--ui-space-2-5);
  color: var(--ui-text-primary);
  background: var(--ux-base);
  border-radius: var(--ui-radius-panel);
  border: var(--ui-stroke-thin) solid var(--stroke);
  box-shadow: var(--elev-4);
  overflow: hidden;
  user-select: text;
}
.dashboard-state {
  margin: var(--ui-space-10) auto;
  padding: var(--ui-space-6);
  text-align: center;
  color: var(--ui-text-secondary);
  border: var(--ui-stroke-thin) dashed var(--stroke);
  border-radius: var(--ui-radius-panel);
  max-width: var(--dt-dimension-layout-520);
}
.dashboard-error {
  display: grid;
  justify-items: center;
  gap: var(--ui-space-2);
  color: var(--ui-danger);
}
.dashboard-error span {
  color: var(--ui-text-secondary);
}
.dashboard-error button {
  border: 0;
  border-radius: var(--ui-radius-control);
  padding: var(--ui-space-2) var(--ui-space-3);
  background: var(--ui-accent);
  color: var(--ui-text-on-accent);
  cursor: pointer;
}

.dashboard-content {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--ui-space-2-5) var(--ui-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2-5);
  overflow-y: auto;
  width: 100%;
  box-sizing: border-box;
}

/* Thẻ dùng chung — một bậc trên nền thân trang (L3 trên L2). */
.dashboard-card,
.dashboard-kpi-card {
  border: var(--ui-stroke-thin) solid var(--stroke);
  border-radius: var(--ui-radius-panel);
  background: var(--ux-raised);
  box-shadow: var(--ui-shadow-card);
}
.dashboard-tier { flex: 0 0 auto; }
.dashboard-card {
  min-width: 0;
  padding: var(--ui-space-2-5) var(--ui-space-3);
  display: flex;
  flex-direction: column;
}
.dashboard-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2-5);
  margin-bottom: var(--ui-space-2);
  flex: 0 0 auto;
}
.dashboard-head-hint {
  color: var(--ui-text-muted);
  font-size: var(--fs-micro);
  white-space: nowrap;
}
.dashboard-section-kicker {
  color: var(--ui-accent);
  font-size: var(--fs-caption);
  font-weight: var(--fw-overline);
}

/* ---------- Tầng 1 · Vận hành hôm nay ---------- */
.dashboard-today-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
  gap: var(--ui-space-2-5);
}
.dashboard-pulse-card > .dashboard-section-kicker {
  display: block;
  margin-bottom: var(--ui-space-2);
}
.dashboard-pulse-body {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3-5);
  min-width: 0;
  flex: 1 1 auto;
}
.dashboard-progress-ring {
  --dashboard-progress: 0deg;
  width: var(--dt-dimension-layout-56);
  height: var(--dt-dimension-layout-56);
  border-radius: var(--ui-radius-circle);
  display: grid;
  place-items: center;
  background: conic-gradient(var(--ui-accent) var(--dashboard-progress), rgba(var(--ink), 0.10) 0);
  position: relative;
  flex: 0 0 auto;
}
.dashboard-progress-ring::before {
  content: '';
  position: absolute;
  inset: var(--ui-space-1);
  border-radius: inherit;
  background: var(--dashboard-ring-hole);
  border: var(--ui-stroke-thin) solid rgba(var(--ink), 0.06);
}
.dashboard-progress-ring > div {
  position: relative;
  z-index: 1;
  display: grid;
  text-align: center;
}
.dashboard-progress-ring strong {
  font-size: var(--fs-body);
  line-height: var(--lh-none);
  font-variant-numeric: tabular-nums;
}
.dashboard-progress-ring span {
  margin-top: var(--ui-space-0-5);
  color: var(--ui-text-muted);
  font-size: var(--fs-caption);
}
.dashboard-pulse-copy {
  min-width: 0;
  flex: 1 1 auto;
}
.dashboard-pulse-copy > strong {
  display: block;
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
}
.dashboard-pulse-copy > p {
  margin: var(--ui-space-0-5) 0 0;
  color: var(--ui-text-secondary);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
.dashboard-pulse-copy > p:empty { display: none; }
.dashboard-pulse-copy > p.is-overdue {
  color: var(--ui-danger);
  font-weight: var(--fw-semibold);
}
.dashboard-spark {
  margin-top: var(--ui-space-2);
  display: flex;
  align-items: flex-end;
  gap: var(--ui-space-0-5);
  height: var(--ui-icon-lg);
}
.dashboard-spark span {
  flex: 1 1 0;
  min-width: var(--ui-space-0-5);
  background: var(--ui-accent);
  opacity: 0.42;
  border-radius: var(--ui-radius-xs) var(--ui-radius-xs) 0 0;
}
.dashboard-spark span.is-today { opacity: 1; }
.dashboard-spark.is-flat span { opacity: 0.18; }

.dashboard-focus-card { min-height: 0; }
.dashboard-focus-list {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  flex: 1 1 auto;
  min-height: 0;
}
.dashboard-focus-item {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ui-space-2);
  width: 100%;
  padding: var(--ui-space-1) var(--ui-space-2);
  border: var(--ui-stroke-thin) solid transparent;
  border-radius: var(--ui-radius-control);
  background: var(--dashboard-item-bg);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.dashboard-focus-item:hover:not(:disabled) {
  border-color: var(--stroke);
  background: var(--ux-hover);
}
.dashboard-focus-item:disabled { cursor: default; }
.dashboard-focus-item:focus-visible {
  outline: var(--ui-stroke-thick) solid var(--ui-accent);
  outline-offset: var(--ui-stroke-thin);
}
.dashboard-focus-dot {
  width: var(--ui-space-2);
  height: var(--ui-space-2);
  border-radius: var(--ui-radius-circle);
  background: var(--ui-text-muted);
}
.dashboard-focus-dot.urgent { background: var(--ui-danger); }
.dashboard-focus-dot.important { background: var(--ui-warning); }
.dashboard-focus-dot.normal { background: var(--ui-success); }
.dashboard-focus-dot.personal { background: var(--ui-accent); }
.dashboard-focus-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-caption);
}
.dashboard-focus-date {
  color: var(--ui-text-muted);
  font-size: var(--fs-micro);
  white-space: nowrap;
}
.dashboard-focus-date.is-overdue { color: color-mix(in srgb, var(--ui-danger) 80%, var(--ui-mix-shade)); }
.dashboard-focus-item.is-rescheduled-item {
  grid-template-columns: 7px minmax(0, 1fr) auto auto;
}
.dashboard-rescheduled-badge {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  color: var(--ui-warning);
  background: color-mix(in srgb, var(--ui-warning) 14%, transparent);
  padding: var(--ui-space-px) var(--ui-space-1-5);
  border-radius: var(--ui-radius-control);
  white-space: nowrap;
  flex: 0 0 auto;
}
.dashboard-focus-empty {
  color: var(--ui-text-secondary);
  font-size: var(--fs-caption);
  padding: var(--ui-space-1-5) var(--ui-space-0-5);
}

/* ---------- Tầng 2 · Chỉ số kỳ ---------- */
.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--ui-space-2);
}
.dashboard-kpi-card {
  min-height: var(--dt-dimension-layout-64);
  padding: var(--ui-space-2) var(--ui-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-px);
}
.dashboard-kpi-card > span {
  color: var(--ui-text-secondary);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
}
.dashboard-kpi-card > strong {
  font-size: var(--fs-title);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-tighter);
  font-variant-numeric: tabular-nums;
}
.dashboard-kpi-card > small {
  color: var(--ui-text-muted);
  font-size: var(--fs-micro);
}
.dashboard-kpi-card.is-progress > strong { color: var(--ui-accent); }
.dashboard-kpi-card.is-attention > strong { color: var(--ui-danger); }

/* ---------- Tầng 3 · Phân tích ---------- */
.dashboard-analysis {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  /* Hàng heatmap ôm theo nội dung; hàng biểu đồ chính NUỐT chiều cao dư của
     khung (1fr) nên cửa sổ cao thì cột giãn lấp đầy, cửa sổ thấp thì tụt về
     sàn rồi .dashboard-content cuộn — chỗ bản cũ để lộ khoảng trắng. */
  grid-template-rows: auto minmax(150px, 1fr);
  gap: var(--ui-space-2-5);
}
.dashboard-analysis.has-monthly {
  grid-template-rows: auto minmax(150px, 1fr) minmax(120px, 0.7fr);
}
.dashboard-heatmap-panel { grid-column: 1 / -1; grid-row: 1; }
.dashboard-daily-panel { grid-column: 1; grid-row: 2; }
.dashboard-priority-panel { grid-column: 2; grid-row: 2; }
.dashboard-monthly-panel { grid-column: 1 / -1; grid-row: 3; }

.dashboard-panel-empty {
  flex: 1 1 auto;
  min-height: var(--dt-dimension-layout-64);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--ui-text-muted);
  font-size: var(--fs-caption);
  padding: var(--ui-space-2-5);
}

/* Bản đồ hoạt động — 1 ô / ngày, đậm nhạt theo số việc hoàn thành. */
.dashboard-heatmap {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11px, 1fr));
  grid-auto-rows: 11px;
  gap: var(--ui-space-1);
  align-content: start;
  max-height: var(--dt-dimension-layout-144);
  overflow-y: auto;
}
.dashboard-heat-cell {
  border-radius: var(--ui-radius-xs);
  background: rgba(var(--ink), 0.06);
}
.dashboard-heat-cell[data-level="1"] { background: color-mix(in srgb, var(--ui-accent) 28%, transparent); }
.dashboard-heat-cell[data-level="2"] { background: color-mix(in srgb, var(--ui-accent) 50%, transparent); }
.dashboard-heat-cell[data-level="3"] { background: color-mix(in srgb, var(--ui-accent) 74%, transparent); }
.dashboard-heat-cell[data-level="4"] { background: var(--ui-accent); }

.dashboard-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ui-space-2);
  color: var(--ui-text-muted);
  font-size: var(--fs-micro);
}
.dashboard-legend span::before {
  content: '';
  display: inline-block;
  width: var(--ui-space-1-5);
  height: var(--ui-space-1-5);
  margin-right: var(--ui-space-1);
  border-radius: var(--ui-radius-xs);
  vertical-align: -1px;
}
.dashboard-legend .is-done::before { background: var(--ui-accent); }
.dashboard-legend .is-open::before { background: rgba(var(--ink), 0.16); }
.dashboard-legend .is-overdue::before { background: var(--ui-danger); }

/* Nhịp theo ngày — cột cao theo % KHUNG CHỨA (khung do flex quyết định),
   không chốt px như bản cũ vốn để lại ~140px trắng. */
.dashboard-daily-chart {
  flex: 1 1 auto;
  min-height: var(--dt-dimension-layout-88);
  display: flex;
  align-items: stretch;
  gap: var(--ui-space-1);
  overflow-x: auto;
  padding-top: var(--ui-space-0-5);
}
.dashboard-day-column {
  flex: 1 1 0;
  min-width: var(--ui-icon-sm);
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  text-align: center;
}
.dashboard-day-bars {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.dashboard-day-stack {
  width: 60%;
  max-width: var(--ui-space-4);
  min-height: var(--ui-space-1);
  border-radius: var(--ui-radius-sm) var(--ui-radius-sm) var(--ui-radius-xs) var(--ui-radius-xs);
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse;
  background: rgba(var(--ink), 0.09);
}
.dashboard-day-segment.is-completed { background: var(--ui-accent); }
.dashboard-day-segment.is-open { background: rgba(var(--ink), 0.16); }
.dashboard-day-segment.is-overdue { background: var(--ui-danger); }
.dashboard-day-column.is-today .dashboard-day-stack {
  outline: var(--ui-stroke-thick) solid color-mix(in srgb, var(--ui-accent) 40%, transparent);
  outline-offset: var(--ui-stroke-thin);
}
.dashboard-day-label {
  color: var(--ui-text-muted);
  font-size: var(--fs-caption);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-chart-empty-inline {
  margin: auto;
  align-self: center;
  color: var(--ui-text-muted);
  font-size: var(--fs-caption);
}

/* Theo nhóm ưu tiên — canh trên, nén dòng (bỏ space-around trôi nổi). */
.dashboard-priority-chart {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
  padding-top: var(--ui-space-0-5);
}
.dashboard-priority-row {
  display: grid;
  gap: var(--ui-space-1);
}
.dashboard-priority-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2);
  font-size: var(--fs-micro);
}
.dashboard-priority-label {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1);
  font-weight: var(--fw-semibold);
}
.dashboard-priority-label i {
  width: var(--ui-space-1-5);
  height: var(--ui-space-1-5);
  border-radius: var(--ui-radius-circle);
  background: var(--ui-text-muted);
}
.dashboard-priority-label i.urgent { background: var(--ui-danger); }
.dashboard-priority-label i.important { background: var(--ui-warning); }
.dashboard-priority-label i.normal { background: var(--ui-success); }
.dashboard-priority-label i.personal { background: var(--ui-accent); }
.dashboard-priority-numbers {
  color: var(--ui-text-muted);
  font-variant-numeric: tabular-nums;
}
.dashboard-priority-track {
  height: var(--ui-space-1);
  border-radius: var(--dt-dimension-radius-full);
  overflow: hidden;
  background: rgba(var(--ink), 0.10);
}
.dashboard-priority-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--ui-accent);
}
.dashboard-priority-note {
  color: var(--ui-danger);
  font-size: var(--fs-micro);
}

/* Xu hướng theo tháng — cột cao theo % khung chứa. */
.dashboard-monthly-chart {
  flex: 1 1 auto;
  min-height: var(--dt-dimension-layout-88);
  display: flex;
  align-items: flex-end;
  gap: var(--ui-space-2-5);
  overflow-x: auto;
  padding-top: var(--ui-space-0-5);
}
.dashboard-month-group {
  min-width: var(--ui-size-lg);
  flex: 1 0 var(--ui-size-lg);
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  text-align: center;
}
.dashboard-month-bars {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--ui-space-1);
}
.dashboard-month-bar {
  width: var(--ui-icon-xs);
  min-height: var(--ui-space-0-5);
  border-radius: var(--ui-radius-sm) var(--ui-radius-sm) var(--ui-radius-xs) var(--ui-radius-xs);
  background: rgba(var(--ink), 0.16);
}
.dashboard-month-bar.is-completed { background: var(--ui-accent); }
.dashboard-month-label {
  color: var(--ui-text-muted);
  font-size: var(--fs-caption);
}

/* ---------- Tầng 4 · Chiêm nghiệm ---------- */
.dashboard-reflect-card { flex: 0 0 auto; }
.dashboard-wins {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ui-space-2);
}
.dashboard-win {
  padding: var(--ui-space-2) var(--ui-space-2-5);
  border-radius: var(--ui-radius-control);
  background: var(--dashboard-item-bg);
  display: grid;
  gap: var(--ui-space-0-5);
}
.dashboard-win strong {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
  font-variant-numeric: tabular-nums;
}
.dashboard-win span {
  color: var(--ui-text-secondary);
  font-size: var(--fs-micro);
  line-height: var(--lh-tight);
}

/* ---------- Responsive ---------- */
@media (max-width: 999px) {
  .dashboard-today-row { grid-template-columns: 1fr; }
  .dashboard-analysis,
  .dashboard-analysis.has-monthly {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: minmax(150px, auto);
  }
  .dashboard-heatmap-panel,
  .dashboard-daily-panel,
  .dashboard-priority-panel,
  .dashboard-monthly-panel {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .dashboard-wins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .dashboard-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-pulse-body { gap: var(--ui-space-2-5); }
}
@media (max-height: 400px) {
  .dashboard-page { padding-top: var(--ui-space-2-5); }
}

/* Dashboard theo HỢP ĐỒNG HÌNH NỀN chung (xem khối token ~16348). */
:root {
  --dashboard-item-bg: rgba(var(--ui-surface-fill-rgb), 0.6);
  --dashboard-ring-hole: rgb(var(--ui-surface-raised-rgb));
}
/* Tối trên hình nền: hàng việc/thành tích và lõi vòng tiến độ trong hơn để hở hình nền. */
html.has-wallpaper[data-mode="dark"] {
  --dashboard-item-bg: var(--ux-fill);
  --dashboard-ring-hole: rgba(var(--ui-surface-raised-rgb), .60);
}

/* Token thẻ ngày (--cal-*, --agenda-*, --view-*), dạng Agenda, dạng Hôm nay (cột
   việc tồn .backlog-*, .today-*, .today-metric*) và nút chọn dạng xem: chuyển sang
   styles/calendar.css MỤC 0 (2026-09-27) — owner hình học lịch duy nhất. */

.menu-avatar-shell { position: relative; width: var(--ui-size-lg); height: var(--ui-size-lg); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
/* Trong rail, khung bao = đúng cỡ ảnh (32). Khung 40 cũ thò ra 4px mỗi bên nên
   huy hiệu đồng bộ (bám góc khung) vượt mép rail 48 và bị rail + header cắt góc. */
.nav-rail-avatar-btn .menu-avatar-shell { width: var(--ui-size-md); height: var(--ui-size-md); }
/* Avatar đáy rail 32 (size.md) như Teams/VS Code (BA 10/10/2026, trước 40 ở đỉnh). */
.nav-rail-avatar-btn .menu-avatar-wrap.glass-icon-btn { width: var(--ui-size-md); height: var(--ui-size-md); }
.menu-avatar-wrap.glass-icon-btn { width: var(--ui-size-md); height: var(--ui-size-md); display: flex; align-items: center; justify-content: center; border-radius: var(--ui-radius-circle); overflow: hidden; flex-shrink: 0; background: var(--bg-hover); transition: border-color var(--ui-duration-standard) var(--ui-ease), box-shadow var(--ui-duration-standard) var(--ui-ease);}
.menu-avatar { width: 100%; height: 100%; object-fit: cover; }

.avatar-sync-badge {
  position: absolute;
  right: calc(-1 * var(--ui-space-0-5));
  bottom: calc(-1 * var(--ui-space-0-5));
  width: var(--ui-icon-dense);
  height: var(--ui-icon-dense);
  border-radius: var(--ui-radius-circle);
  background: light-dark(rgb(var(--ui-surface-raised-rgb)), rgb(var(--ui-surface-raised-rgb)));
  border: var(--ui-stroke-thick) solid var(--ux-border);
  box-shadow: var(--ui-elevation-1);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: var(--ui-layer-raised);
  transition: opacity var(--ui-duration-fast) var(--ui-ease), transform var(--ui-duration-fast) var(--ui-ease);
}

.avatar-sync-badge .avatar-sync-spinner {
  display: none;
  width: var(--ui-space-2-5);
  height: var(--ui-space-2-5);
  color: var(--ui-accent);
}
.avatar-sync-badge.is-busy {
  display: flex !important;
  background: light-dark(rgb(var(--ui-surface-raised-rgb)), rgb(var(--ui-surface-raised-rgb)));
  border-color: var(--ui-accent);
}
.avatar-sync-badge.is-busy .avatar-sync-spinner {
  display: block;
  animation: avatar-sync-spin var(--ui-duration-spin) linear infinite;
}
.avatar-sync-badge.is-busy .avatar-sync-dot {
  display: none;
}
.avatar-sync-badge .avatar-sync-dot {
  width: var(--ui-space-1-5);
  height: var(--ui-space-1-5);
  border-radius: var(--ui-radius-circle);
  background: var(--ui-text-secondary);
}
.avatar-sync-badge.is-ok .avatar-sync-dot {
  background: var(--ui-success);
}
.avatar-sync-badge.is-error .avatar-sync-dot {
  background: var(--ui-danger);
}
.avatar-sync-badge.is-offline .avatar-sync-dot {
  background: var(--ui-warning);
}
@keyframes avatar-sync-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


/* Gravity drop effect for dropdown menus */
:is(.widget-menu-panel, .picker-panel, .priority-picker-panel):not(.hidden) {
  animation: menuGravityDrop 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; /* audit-keep: chuyển động biên đạo riêng (keyframes), không thuộc nhịp giao diện chuẩn */
  transform-origin: top center;
  will-change: transform, opacity;
}

@keyframes menuGravityDrop {
  0% {
    transform: translateY(-8px) scale(0.98);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
} /* @layer legacy */

/* ==========================================================================
   MÀN DASHBOARD — GĐ4 (docs/BAO-CAO-CHUAN-HOA-UI-TOKEN-2026-09-18.md §7.2, khung C)
   Hai kiểu thẻ (nội dung 10/13px, KPI 8/12px) về một đệm --ui-card-pad; chữ nhỏ
   nhất 12px (ARS-1: 11px chỉ cho badge số đếm); tiêu đề trang theo --fs-headline
   thay clamp(23px…29px) gõ cứng; hàng "Nên làm tiếp" cao theo hàng danh sách dày.
   ========================================================================== */
@layer modules {
  :is(.dashboard-card, .dashboard-kpi-card) {
    padding: var(--ui-card-pad);
  }
  .dashboard-page .notics-heading h1 {
    font-size: var(--fs-headline);
  }
  .dashboard-focus-text {
    font-size: var(--fs-body);
    line-height: var(--lh-snug);
  }
  :is(.dashboard-kpi-card > span, .dashboard-focus-date, .dashboard-kpi-card > small,
      .dashboard-legend, .dashboard-day-label, .dashboard-priority-label, .dashboard-month-label) {
    font-size: var(--fs-caption);
  }
  .dashboard-focus-item {
    min-height: var(--ui-list-row-dense);
  }
  /* BA báo 19/09: khối "Theo nhóm ưu tiên" (5 nhóm + dòng quá hạn) tràn đè thẻ "Xu hướng theo tháng".
     Sàn 150/120px cố định nhỏ hơn nội dung thật; sàn đúng là chiều cao nội dung —
     cửa sổ thấp thì hàng giữ đủ nội dung và .dashboard-content cuộn (đúng thiết kế gốc). */
  .dashboard-analysis {
    /* Không co dưới chiều cao nội dung — nếu co, thẻ "Chiêm nghiệm" phía sau đè lên. */
    min-height: auto;
    grid-template-rows: min-content minmax(min-content, 1fr);
  }
  .dashboard-analysis.has-monthly {
    grid-template-rows: min-content minmax(min-content, 1fr) minmax(min-content, 0.7fr);
  }
}

/* ==========================================================================
   DASHBOARD — BIẾN THỂ FLAT (GĐ5.4, docs/PLAN-FLAT-SURFACE-GD5.md)
   Chỉ khi html[data-surface="flat"]. Mỗi tầng (dải Hôm nay · dải KPI · khối
   phân tích) là MỘT nhóm phẳng: các ô liền nhau, cách nhau đúng một vạch, chỉ
   bo 4 góc ngoài của tầng.
   Tầng dùng bố cục bento (ô cao thấp, ô vắt hai cột) và tự dàn lại theo bề
   rộng, nên KHÔNG đoán ô nào nằm ở góc: khung tầng vẽ viền ngoài + bo góc và
   cắt tràn (ô góc tự được bo theo); mỗi ô chỉ vẽ vạch mép trái + mép trên bằng
   box-shadow ra ngoài 1px — ô ở mép tầng thì vạch đó rơi vào phần bị cắt, ô
   bên trong thì thành vạch chia duy nhất. Nền ô giữ nguyên (không đổ nền màu
   vạch cho khung) nên Kính/hình nền không bị ám màu.
   ========================================================================== */
@layer modules {
  html[data-surface="flat"] .dashboard-content > .dashboard-tier {
    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"] .dashboard-content > .dashboard-tier > :is(.dashboard-card, .dashboard-kpi-card) {
    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);
  }
  /* "Nên làm tiếp" / "Dời ngày nhiều nhất": dòng phẳng như dòng lịch, không hộp nền. */
  html[data-surface="flat"] .dashboard-focus-item {
    background: var(--ui-flat-row-bg);
    border-color: transparent;
    border-radius: var(--ui-flat-radius-item);
  }
  html[data-surface="flat"] .dashboard-focus-item:not(:disabled):is(:hover, :focus-visible) {
    background: var(--ui-flat-row-hover);
  }
}

/* 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 {
  .menu-avatar-wrap.glass-icon-btn { border: var(--ui-stroke-thick) solid transparent; }
  .menu-avatar-wrap.glass-icon-btn.is-premium { border: var(--ui-stroke-thicker) solid var(--ui-brand-premium); box-shadow: 0 0 0 var(--ui-focus-ring-width) color-mix(in srgb, var(--ui-brand-premium) 32%, transparent); }
}