/* ==========================================================================
   MyWork design system
   Style: Minimalism / Swiss (dense B2B dashboard) — see docs/ROADMAP for the
   product brief. Font: Inter (1 family dùng chung heading+body, đủ dấu tiếng
   Việt) — Bước 17: đổi từ Figtree+Noto Sans (đoán từ ảnh, ui-ux-pro-max) sang
   Inter, theo đúng giá trị CSS thật trích từ 1 file demo Target (HTML/CSS gốc
   do người dùng cung cấp, không phải ảnh chụp) — xem ghi chú "Bước 17" rải
   trong file này cho từng token. Light theme only (internal tool — xem
   CLAUDE.md nếu sau này cần dark mode).
   ========================================================================== */

/* ---- Design tokens ----
   Bước 17 — thay bằng giá trị CSS THẬT trích từ 1 file demo Target (HTML/CSS
   gốc, không phải ảnh chụp) do người dùng cung cấp, thay cho bảng màu cũ vốn
   suy đoán từ ảnh (ui-ux-pro-max skill, 9450511). Mỗi token dưới đây ghi rõ
   nguồn: "demo:<var>" nếu lấy đúng giá trị gốc, "suy ra" nếu demo không có
   khái niệm tương ứng và phải derive hợp lý (không đoán màu, chỉ tái dùng
   giá trị demo đã cho theo đúng vai trò gần nhất). */
:root {
  /* Brand — demo: --nav (sidebar bg), --nav2 (sidebar active), --blue (accent) */
  --brand-900: #123b61;              /* demo: --nav */
  --brand-800: #1d527b;              /* demo: --nav2 — dùng cho .side-link.is-active, xem --sidebar-active dưới */
  --brand-700: #176fb4;              /* demo: --blue */
  --brand-600: #176fb4;              /* demo chỉ có 1 sắc xanh — suy ra: dùng lại --blue */
  --brand-100: #e8f2fb;              /* demo: --blue2 */
  --brand-50:  #e8f2fb;              /* demo chỉ có 1 sắc xanh nhạt — suy ra: dùng lại --blue2 */

  --accent-700: #a76308;             /* demo: --amber */
  --accent-100: #fff3df;             /* demo: --amber2 */

  /* Semantic status — demo: --green/--green2, --amber/--amber2, --red/--red2 */
  --success-700: #147a56;            /* demo: --green */
  --success-100: #e7f5ef;            /* demo: --green2 */
  --warning-700: #a76308;            /* demo: --amber */
  --warning-100: #fff3df;            /* demo: --amber2 */
  --danger-700:  #b33c35;            /* demo: --red */
  --danger-100:  #fdecea;            /* demo: --red2 */
  --info-700:    #176fb4;            /* demo không có nhóm "info" riêng — suy ra: theo --blue, giữ nguyên cặp với brand-700 như trước */
  --info-100:    #e8f2fb;            /* suy ra: theo --blue2 */
  --caution-700: #8a7414;            /* P8 — "vàng" CẦN KIỂM TRA, tách khỏi --warning (cam) CẢNH BÁO */
  --caution-100: #fbf4d8;
  --neutral-700: #687784;            /* demo không có pill trung tính — suy ra: dùng lại --muted */
  --neutral-100: #e9edf0;            /* suy ra: sắc xám nhạt trung tính giữa --line/--bg, demo không có ví dụ trực tiếp */

  /* Surfaces & text — demo: --bg, --s, --line, --text, --muted; nền th (#f6f8fa) dùng cho surface-sunken */
  --bg:            #f3f6f8;          /* demo: --bg */
  --surface:        #ffffff;         /* demo: --s (không đổi) */
  --surface-sunken: #f6f8fa;         /* demo: nền th{background:#f6f8fa} */
  --border:         #dce3e8;         /* demo: --line */
  --border-strong:  #dce3e8;         /* demo chỉ có 1 sắc viền — suy ra: dùng lại --line */
  --text:           #17212b;         /* demo: --text */
  --text-muted:     #556370;         /* P8.14.14: tối hơn demo #687784 để chữ phụ đạt ~6:1 trên nền trắng (trước ~4.5:1, Brian báo "nhạt gần mất") */
  --text-inverse:   #ffffff;         /* không đổi */

  /* Type — demo: 1 font-family duy nhất (Inter), không tách heading/body;
     6 cỡ chữ THẬT trong demo (11/12/14/15/16/22px) — khớp đúng 6 bậc thang cũ */
  --font-heading: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  /* P8.14.14 — chữ chính ~16px, chữ phụ ≥ 14px (Brian 12/10/2026); thang cũ 11-22px quá nhỏ */
  --text-xs: .875rem;    /* 14px — badge, tiêu đề cột, gợi ý */
  --text-sm: .875rem;    /* 14px — chữ phụ, nhãn form, menu */
  --text-base: 1rem;     /* 16px — chữ chính */
  --text-table: .9375rem;/* 15px — nội dung bảng dày đặc */
  --text-lg: 1.0625rem;  /* 17px — tiêu đề card/khối */
  --text-xl: 1.125rem;   /* 18px — h2 */
  --text-2xl: 1.5rem;    /* 24px — h1 */
  --leading: 1.55;       /* demo không khai báo line-height — giữ nguyên giá trị cũ */

  /* Spacing (dense dashboard scale) — demo dùng pixel rời rạc theo từng chỗ
     (14/16/18/24...), KHÔNG tokenize thành biến CSS như màu — giữ nguyên
     thang cũ (đã sát demo, chênh lệch ~2px, không đủ căn cứ để đổi mà không đoán) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;

  /* Shape — demo: .action/select/input/.nav button = 8px; .stat/.panel = 11px; pill = 999px */
  --radius-sm: 4px;      /* demo không có ví dụ — giữ nguyên */
  --radius-md: 8px;      /* demo: .action, input, select, .nav button (khớp sẵn, không đổi) */
  --radius-lg: 11px;     /* demo: .stat, .panel */
  --radius-full: 999px;  /* demo: .demo, .pill (khớp sẵn, không đổi) */

  /* demo KHÔNG dùng box-shadow ở bất kỳ đâu (.stat/.panel chỉ border, không shadow)
     — bỏ shadow trên card để đúng phong cách flat/viền của demo */
  --shadow-sm: none;
  --shadow-md: 0 6px 20px rgba(15, 23, 42, .08); /* giữ cho drawer mobile — không thuộc phạm vi demo (desktop) */

  --focus-ring: 0 0 0 3px var(--brand-100), 0 0 0 1px var(--brand-600);
  --motion-fast: 120ms;
  --motion-base: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; }
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
/* scrollbar-gutter: stable — luôn chừa chỗ cho thanh cuộn dọc, kể cả khi
   trang không đủ cao để cuộn. Không có rule này, trang nhiều dòng (có
   scrollbar) và trang ít dòng (không có) sẽ lệch chiều rộng nội dung ~15-17px
   (đúng độ rộng thanh cuộn) — chuyển qua lại giữa các trang nhìn bị "nhảy". */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading);
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text); /* Bước 17 — demo không tô màu riêng cho heading (h1/h2 chỉ đổi size/weight, không đổi color) */
  margin: 0 0 var(--space-3);
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); margin-top: var(--space-6); }
h3 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-3); }
small { color: var(--text-muted); font-size: var(--text-xs); }
a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { padding-left: var(--space-5); margin: 0 0 var(--space-3); }
img { max-width: 100%; }

/* Consistent, visible focus for keyboard users — never remove */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand-700);
  color: var(--text-inverse);
  padding: var(--space-2) var(--space-4);
  z-index: 100;
  border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

/* P8.14.14 — đã xoá CSS top-nav cũ (.topbar/.nav/.nav-link/.subnav): không template nào
   dùng nữa; riêng `.subnav a.is-active { color: brand }` đè `.tab.is-active` (chữ trắng) khi
   thanh tab Target mang class "subnav" -> tab đang chọn xanh trên nền xanh, MẤT CHỮ. */
.brand { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-lg); color: var(--brand-900); }
.brand:hover { text-decoration: none; }

/* width:100% BẮT BUỘC — thiếu dòng này, <main> (flex item cross-axis trong
   .main-area) không giãn hết theo container mà tự co theo độ rộng tự nhiên
   của bảng/nội dung bên trong (table auto-layout) -> mỗi trang 1 độ rộng
   main khác nhau dù cùng viewport (đã đo thật bằng browser, lệch tới
   200-300px giữa các trang).
   Bỏ hẳn max-width (trước là 1400px, người dùng xác nhận muốn dùng tối đa
   không gian ngang có sẵn, giống app tham khảo — bảng nhiều cột/dữ liệu
   trong 1 tool nội bộ nên tận dụng hết chiều rộng thay vì bó hẹp giữa màn
   hình). margin:0 auto giữ lại vô hại (không còn khoảng trống để canh giữa
   khi width luôn = 100%). */
.container { width: 100%; margin: 0 auto; padding: var(--space-5); }

.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.page-header h1 { margin: 0; }
.page-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---- Messages / flash ---- */
.messages { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); }
.msg {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--text-sm);
}
.msg-success { background: var(--success-100); color: var(--success-700); border-color: #bbf0ce; }
.msg-error   { background: var(--danger-100);  color: var(--danger-700);  border-color: #fbc9c9; }
.msg-warning { background: var(--warning-100); color: var(--warning-700); border-color: #fde3a4; }
.msg-info, .msg-debug { background: var(--info-100); color: var(--info-700); border-color: #c3d9fb; }

/* ---- Cards ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: var(--space-4); }
.cards-grid > .card + .card { margin-top: 0; }  /* P8.14.11: trong grid khoảng cách do gap lo — tránh card 2..n thấp hơn card 1 */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.card-header h2 { margin: 0; font-size: var(--text-lg); }
.card-count {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--brand-700);
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
  align-items: start;  /* P8.14.11: card cao theo nội dung, không kéo giãn theo card cao nhất */
}

.list-plain { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); }
.list-plain li {
  padding: var(--space-2) var(--space-1);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
}
.list-plain li:last-child { border-bottom: none; }
.list-empty { color: var(--text-muted); font-style: normal; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1;
  padding: var(--space-3) var(--space-4);
  min-height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease, opacity var(--motion-fast) ease;
  white-space: nowrap;
}
.btn-primary { background: var(--brand-700); color: var(--text-inverse); }
.btn-primary:hover { background: var(--brand-900); text-decoration: none; }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-sunken); text-decoration: none; }
.btn-danger { background: var(--surface); color: var(--danger-700); border-color: #f3b7b7; }
.btn-danger:hover { background: var(--danger-100); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-sunken); color: var(--text); text-decoration: none; }
.btn-sm { padding: var(--space-2) var(--space-3); min-height: 32px; font-size: var(--text-xs); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-google {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
  padding: var(--space-3) var(--space-5);
}

/* ---- Forms ---- */
label { font-weight: 600; font-size: var(--text-sm); }
input, select, textarea {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  min-height: 40px;
  width: 100%;
}
textarea { min-height: 80px; }
input[type="checkbox"] { width: auto; min-height: auto; accent-color: var(--brand-700); }
/* .tier-tab-input (radio ẩn dùng làm cơ chế chuyển tab CSS-thuần, position:
   absolute) thiếu ngoại lệ này nên kế thừa width:100% từ rule input chung ở
   trên -> giãn theo initial containing block (không có ancestor position:
   relative nào ở giữa) thành ~1585px, tràn khỏi khung nhìn ngang (đã đo
   thật: /target/manager/ và /target/ranking/ đều dính). */
input[type="radio"] { width: auto; min-height: auto; accent-color: var(--brand-700); }
::placeholder { color: #94a3b8; }

/* ---- Employee picker (gõ tên nhân viên -> gợi ý), thay ô nhập tay mã EMxxx ---- */
.emp-picker { position: relative; }
.emp-suggest {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .12); max-height: 220px; overflow-y: auto;
}
.emp-suggest:empty { display: none; }
.emp-suggest-item { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); cursor: pointer; }
.emp-suggest-item:hover { background: var(--brand-50); }
.emp-suggest-empty { color: var(--text-muted); cursor: default; }
.emp-suggest-empty:hover { background: none; }

.field { display: grid; gap: var(--space-1); margin-bottom: var(--space-3); }
.field-hint { color: var(--text-muted); font-size: var(--text-xs); font-weight: 400; }
.field-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.field-row .field { margin-bottom: 0; min-width: 140px; }
.field-row .field.grow { flex: 1 1 240px; }
.checkbox-field { display: flex; align-items: center; gap: var(--space-2); font-weight: 500; }
.checkbox-field label { font-weight: 500; }

.filter-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  display: flex;               /* P8.14.14: form lọc + nút phụ (vd Biểu đồ/Data) cùng một hàng */
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}
.filter-bar > form { flex: 1 1 auto; margin: 0; }
.filter-bar > form:only-child { flex-basis: 100%; }
.filter-bar .field input[size] { width: auto; }   /* ô Năm size=5 không chiếm cả hàng */

/* ---- Tabs (filter-style links, e.g. list view scopes) ---- */
.tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.tab {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease;
}
.tab:hover { background: var(--surface-sunken); color: var(--text); text-decoration: none; }
.tab.is-active, .tab[aria-current="page"] { background: var(--brand-700); border-color: var(--brand-700); color: var(--text-inverse); }
.tab.is-active:hover, .tab[aria-current="page"]:hover { background: var(--brand-900); color: var(--text-inverse); }

/* ---- Tables ---- */
.table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
table.dt { width: 100%; border-collapse: collapse; font-size: var(--text-table); }
table.dt caption { text-align: left; padding: var(--space-3) var(--space-4) 0; color: var(--text-muted); }
table.dt th, table.dt td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.dt thead th {
  position: sticky;
  top: 0;
  background: var(--surface-sunken);
  color: #3b4754;  /* P8.14.14: tiêu đề cột đậm hơn chữ phụ, không viết hoa nhạt */
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-xs);
  white-space: nowrap;
  z-index: 1;
}
table.dt tbody tr:hover { background: var(--brand-50); }
table.dt tbody tr:last-child td { border-bottom: none; }
table.dt td.num, table.dt th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.dt tr.is-flagged { background: var(--warning-100); }
table.dt tr.is-flagged:hover { background: #fde9b8; }
.dt-empty { padding: var(--space-6); text-align: center; color: var(--text-muted); }
.row-form { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.row-form input { min-height: 32px; width: auto; min-width: 90px; }

.pagination { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--text-muted); }

/* ---- Badges (status — always paired with visible text, never color alone) ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
  line-height: 1.4;
}
.badge-success { background: var(--success-100); color: var(--success-700); }
.badge-warning { background: var(--warning-100); color: var(--warning-700); }
.badge-danger  { background: var(--danger-100);  color: var(--danger-700); }
.badge-info    { background: var(--info-100);    color: var(--info-700); }
.badge-caution { background: var(--caution-100); color: var(--caution-700); }
.badge-neutral { background: var(--neutral-100); color: var(--neutral-700); }

/* P8 — chấm màu mức cảnh báo trên bảng (luôn đi kèm nhãn mức ở chi tiết,
   không dùng màu làm dấu hiệu DUY NHẤT). */
.dtx-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: var(--space-2); vertical-align: middle; }
.dtx-dot-danger  { background: var(--danger-700); }
.dtx-dot-warning { background: var(--warning-700); }
.dtx-dot-caution { background: var(--caution-700); }

/* ---- Misc utilities ---- */
.muted { color: var(--text-muted); }
.mono, .num { font-variant-numeric: tabular-nums; }
.stack { display: grid; gap: var(--space-3); }
.hint-banner {
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  color: var(--brand-900);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}
.empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--text-muted);
}
.result-summary { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); font-size: var(--text-base); }
.result-summary li { display: flex; justify-content: space-between; padding: var(--space-1) 0; border-bottom: 1px dashed var(--border); }
.result-summary li:last-child { border-bottom: none; }

/* ---- Login page ---- */
.auth-shell {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: var(--bg);
}
.auth-card {
  max-width: 380px;
  width: 100%;
  text-align: center;
}
.auth-card h1 { font-size: var(--text-2xl); }

/* ==========================================================================
   App shell — sidebar navigation (whole-app nav structure, approved design)
   ========================================================================== */
:root { --sidebar-w: 244px; }

.app-shell { display: flex; align-items: stretch; min-height: 100dvh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 auto;
  background: var(--brand-900);
  color: #e7f0f7; /* Bước 17 — demo: .nav button { color: #e7f0f7 } */
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
}
.sidebar-brand {
  padding: var(--space-4) var(--space-4) var(--space-3);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  color: #fff;
  letter-spacing: -.01em;
}
.sidebar-brand:hover { text-decoration: none; }
.sidebar-brand small { display: block; font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs); color: #8fa3c7; margin-top: 2px; }

.sidebar-nav { flex: 1; padding: var(--space-2) var(--space-3); display: flex; flex-direction: column; gap: 2px; }

.side-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px var(--space-3);
  border-radius: var(--radius-md);
  color: #e7f0f7; /* Bước 17 — demo: .nav button { color: #e7f0f7 } */
  font-size: var(--text-sm);
  font-weight: 600;
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease;
}
.side-link:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.side-link.is-active { background: var(--brand-800); color: #fff; } /* Bước 17 — demo: .nav button.active { background: var(--nav2) } */
.side-link svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: .95; }

.sidebar .side-group summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px var(--space-3);
  border-radius: var(--radius-md);
  color: #e7f0f7; /* Bước 17 — khớp .side-link, xem giải thích ở trên */
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.sidebar .side-group summary::-webkit-details-marker { display: none; }
.sidebar .side-group summary:hover { background: rgba(255,255,255,.08); color: #fff; }
/* icon đầu dòng (AOT/Lead/Target) — thiếu rule này nên SVG không có
   width/height rơi về kích thước mặc định của trình duyệt (rất to);
   .chev bên dưới chỉ nhắm riêng mũi tên, không phủ icon chính này. */
.sidebar .side-group summary svg:not(.chev) { width: 18px; height: 18px; flex: 0 0 auto; opacity: .95; }
.sidebar .side-group summary svg.chev { width: 16px; height: 16px; margin-left: auto; flex: 0 0 auto; transition: transform var(--motion-fast) ease; opacity: .8; }
.sidebar .side-group[open] summary svg.chev { transform: rotate(180deg); }
.sidebar .side-group.has-active summary { color: #fff; }
.side-submenu { display: flex; flex-direction: column; gap: 2px; padding-left: 28px; margin: 2px 0 4px; }
.side-submenu .side-link { font-weight: 500; padding: 7px var(--space-3); }

.sidebar-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.sidebar-footer .user-chip { min-width: 0; }
.sidebar-footer .user-name { color: #fff; font-size: var(--text-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-footer .user-email { color: #8fa3c7; font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-logout { margin-left: auto; color: #8fa3c7; display: flex; padding: var(--space-2); border-radius: var(--radius-md); }
.sidebar-logout:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-logout svg { width: 18px; height: 18px; }

.main-area { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar-mobile { display: none; }

.sidebar-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.sidebar-scrim { display: none; }

@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    left: 0; top: 0;
    height: 100dvh;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform var(--motion-base) ease;
    box-shadow: var(--shadow-md);
  }
  .sidebar-toggle-input:checked ~ .app-shell .sidebar { transform: translateX(0); }
  .sidebar-toggle-input:checked ~ .app-shell .sidebar-scrim {
    display: block;
    position: fixed; inset: 0;
    background: rgba(15,23,42,.4);
    z-index: 40;
  }
  .topbar-mobile {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: var(--space-3) var(--space-4);
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .sidebar-hamburger { display: flex; color: var(--text); border-radius: var(--radius-md); padding: var(--space-1); }
  .sidebar-hamburger svg { width: 22px; height: 22px; }
  .topbar-mobile .brand { font-family: var(--font-heading); font-weight: 700; color: var(--brand-900); }
}

/* ==========================================================================
   Target module — cross-page pieces reused across all 6 templates
   (results/manager/bonus/bonus_yearly/refq_review/attain_fcst): a shared
   sub-nav so 6 separate pages read as one module, a KPI strip for quick
   context above dense tables, grouped table sections (Tầng 1/2/2'/3, or
   1 nhóm/năm-brand trong bonus_yearly), and semantic +/- number coloring.
   ========================================================================== */
.stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.stat-chip {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.stat-chip strong {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--text);
}
.stat-chip.is-warning strong { color: var(--warning-700); }
.stat-chip.is-danger strong { color: var(--danger-700); }

/* Section header inside a page that groups several tables (Tầng 1/2/2'/3 in
   manager.html, or repeated per-year cards) — heavier than h2, with an
   optional trailing count/hint on the same line. */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: var(--space-6) 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--border);
}
.section-header:first-child { margin-top: 0; }
.section-header h2 { margin: 0; }
.section-header .field-hint { margin: 0; }

/* Grouped table header row (e.g. "SALE — Brand JOBST" spanning all columns
   before that scope's period rows) — reused by bonus_yearly.html. */
table.dt tr.dt-group th {
  background: var(--brand-50);
  color: var(--brand-900);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  text-transform: none;
  letter-spacing: 0;
  position: static;
}

/* Semantic +/- coloring for delta-style numeric columns (never the ONLY
   signal — always paired with the +/- sign itself, still visible without color). */
.num-positive { color: var(--success-700); font-weight: 700; }
.num-negative { color: var(--danger-700); font-weight: 700; }

/* Compact inline meta line under a page title (scope reminders, e.g. "5 kỳ
   Q1/H1/Q3/H2/Cả năm" or "tách biệt khỏi Target/Bonus"). */
.page-header .field-hint { font-weight: 400; }

/* Bước 19 — tab hoá nhiều panel trên CÙNG 1 trang (vd 4 tầng Sales/Channel/
   Area/Company của manager.html) — học theo cách tổ chức của demo Target
   GPT gửi. CSS thuần, KHÔNG JS: radio ẩn + label.tab + sibling selector,
   cùng kỹ thuật với .sidebar-toggle-input (mobile drawer) — mỗi cặp
   #<id>:checked ~ .tier-panel[data-tier="<id đã bỏ tiền tố tier->"] phải khớp
   đúng id ở HTML gọi nó. */
.tier-tab-input { position: absolute; opacity: 0; pointer-events: none; }
.tier-panel { display: none; }
#tier-sales:checked ~ .tier-panel[data-tier="sales"],
#tier-channel:checked ~ .tier-panel[data-tier="channel"],
#tier-area:checked ~ .tier-panel[data-tier="area"],
#tier-company:checked ~ .tier-panel[data-tier="company"] { display: block; }
#tier-sales:checked ~ .tabs label[for="tier-sales"],
#tier-channel:checked ~ .tabs label[for="tier-channel"],
#tier-area:checked ~ .tabs label[for="tier-area"],
#tier-company:checked ~ .tabs label[for="tier-company"] {
  background: var(--brand-700); border-color: var(--brand-700); color: var(--text-inverse);
}
#tier-sales:checked ~ .tabs label[for="tier-sales"] .field-hint,
#tier-channel:checked ~ .tabs label[for="tier-channel"] .field-hint,
#tier-area:checked ~ .tabs label[for="tier-area"] .field-hint,
#tier-company:checked ~ .tabs label[for="tier-company"] .field-hint { color: inherit; }
#tier-sales:focus-visible ~ .tabs label[for="tier-sales"],
#tier-channel:focus-visible ~ .tabs label[for="tier-channel"],
#tier-area:focus-visible ~ .tabs label[for="tier-area"],
#tier-company:focus-visible ~ .tabs label[for="tier-company"] { box-shadow: var(--focus-ring); }

/* ==========================================================================
   Expandable data rows (.dtx) — 1 <details> per bản ghi thay cho <table class="dt">
   khi mỗi dòng cần nhiều form sửa nhanh/duyệt: bấm chevron mở ra panel đầy đủ
   (nhóm theo card) thay vì nhét form chật trong 1 ô bảng. Không JS — <details>/
   <summary> làm toàn bộ việc mở/đóng (đúng nguyên tắc "no JS" của dự án, cùng
   idiom với .side-group). Cột summary khớp cột head qua biến CSS kế thừa
   --dtx-cols (đặt 1 lần trên .dtx, mọi .dtx-head/.dtx-summary con dùng chung).
   ========================================================================== */
.dtx {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.dtx-head, .dtx-summary {
  display: grid;
  grid-template-columns: var(--dtx-cols, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.dtx-head {
  background: var(--surface-sunken);
  color: #3b4754;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-xs);
  border-bottom: 1px solid var(--border);
}
.dtx-head > .num, .dtx-summary > .num { text-align: right; font-variant-numeric: tabular-nums; }
.dtx-row { border-bottom: 1px solid var(--border); }
.dtx-row:last-of-type { border-bottom: none; }
.dtx-row[open] { background: var(--brand-50); }
.dtx-summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--text-base);  /* P8.14.11: nội dung Target 14px */
  transition: background var(--motion-fast) ease;
}
.dtx-summary::-webkit-details-marker { display: none; }
.dtx-summary:hover { background: var(--surface-sunken); }
.dtx-row[open] .dtx-summary:hover { background: var(--brand-100); }
.dtx-chev { width: 16px; height: 16px; color: var(--text-muted); transition: transform var(--motion-fast) ease; flex: 0 0 auto; }
.dtx-row[open] .dtx-chev { transform: rotate(90deg); }
.dtx-primary { font-weight: 600; color: var(--text); }
.dtx-sub { display: block; color: var(--text-muted); font-size: var(--text-xs); font-weight: 400; }
.dtx-empty { padding: var(--space-6); text-align: center; color: var(--text-muted); }

.dtx-panel { padding: var(--space-4); border-top: 1px solid var(--border); background: var(--surface); }
.dtx-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-4); }
.dtx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.dtx-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.dtx-card h3 {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; color: var(--text);
  margin: 0 0 var(--space-2);
}
.dtx-card h3 svg { width: 15px; height: 15px; color: var(--brand-600); flex: 0 0 auto; }
.dtx-kv { display: grid; gap: 2px; margin: 0; font-size: var(--text-base); }
.dtx-kv-row { display: flex; justify-content: space-between; gap: var(--space-3); padding: 3px 0; }
.dtx-kv-row .k { color: var(--text-muted); flex: 0 0 auto; max-width: 45%; }
.dtx-kv-row .v { font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }

.dtx-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--border); }
.dtx-actions .row-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-3);
}
.dtx-actions .row-form input, .dtx-actions .row-form select { min-height: 34px; width: auto; min-width: 100px; }

@media (max-width: 900px) {
  .dtx-head { display: none; }
  .dtx-summary { grid-template-columns: 1fr !important; gap: 2px; }
  .dtx-summary > *:not(.dtx-chev) { display: flex; justify-content: space-between; gap: var(--space-3); }
  .dtx-cards { grid-template-columns: 1fr; }
}

/* ---- P7 — cột trái (lọc/chọn) + nội dung chính (Doanh thu/Target) ---- */
.split-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-5); align-items: start; }
.split-side { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); }
.split-side h3 { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }
.split-side-list { display: flex; flex-direction: column; gap: 2px; }
.split-side-list a { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: var(--text-sm); }
.split-side-list a:hover { background: var(--surface-sunken); }
.split-side-list a.is-active { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
.split-side-list .n { color: var(--text-muted); }
.split-main { min-width: 0; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .container { padding-left: var(--space-4); padding-right: var(--space-4); }
  .field-row { align-items: stretch; }
  table.dt th, table.dt td { padding: var(--space-2) var(--space-3); }
  .split-layout { grid-template-columns: 1fr; }
}

/* ---- P8.14.11 — hiển thị ---- */
.nowrap { white-space: nowrap; }
table.dt td.cell-primary { min-width: 14rem; }   /* tên khách dài không bị chia 5 dòng */
.card-more { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--text-muted); }
main label { font-size: var(--text-base); }   /* nhãn form trong nội dung 14px (sidebar giữ nguyên) */
@media (max-width: 900px) {
  /* mobile + tablet (cùng breakpoint drawer): tránh iOS tự phóng to khi nhập;
     !important vì vài ô có class đặt font-size riêng */
  input, select, textarea { font-size: 16px !important; }
}

/* ---- P8.14.12 — Target: bảng 5 kỳ + menu phụ ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lock-ico { vertical-align: -1px; color: var(--text-muted); }
.period-matrix { margin-bottom: var(--space-3); }
table.dt-matrix th, table.dt-matrix td { padding: var(--space-2) var(--space-3); }
table.dt-matrix td.num, table.dt-matrix th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.dt-matrix .mx-start { border-left: 1px solid var(--border); }
table.dt-matrix thead th { text-align: right; }
table.dt-matrix thead th.mx-brand { text-align: left; vertical-align: bottom; }
table.dt-matrix tbody th.mx-brand {
  position: sticky; left: 0; z-index: 1; background: var(--surface);
  text-align: left; font-weight: 600; white-space: nowrap;
}
table.dt-matrix thead tr:first-child th.mx-brand { left: 0; z-index: 2; }
table.dt-matrix tr.mx-total th, table.dt-matrix tr.mx-total td { font-weight: 700; background: var(--brand-50); }
.mx-alert { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-5); }
.dtx-brand-list { --dtx-cols: 22px minmax(0, 1fr) minmax(7rem, auto) minmax(5rem, auto); }
.dtx-summary > .num { white-space: nowrap; }
.kv-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.kv-table th, .kv-table td { padding: 3px 0; text-align: left; font-weight: 400; }
.kv-table thead th { color: var(--text-muted); font-size: var(--text-xs); font-weight: 600; }
.kv-table tbody th { color: var(--text-muted); }
.kv-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; padding-left: var(--space-3); }

.target-tabs { align-items: center; }
.subnav-more { position: relative; }
.subnav-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); }
.subnav-more > summary::-webkit-details-marker { display: none; }
.subnav-more[open] > summary .chev { transform: rotate(180deg); }
.subnav-menu {
  position: absolute; top: calc(100% + var(--space-1)); left: 0; z-index: 30;
  min-width: 240px; padding: var(--space-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md, var(--shadow-sm));
  display: grid; gap: var(--space-2);
}
.subnav-group-title { margin: 0; padding: var(--space-1) var(--space-2); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; color: var(--text-muted); }
.subnav-link { display: block; padding: var(--space-2); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: var(--text-base); }
.subnav-link:hover { background: var(--surface-sunken); }
.subnav-link.is-active { background: var(--brand-50); color: var(--brand-700); font-weight: 600; }
@media (max-width: 900px) {
  .subnav-menu { position: static; min-width: 0; margin-top: var(--space-2); box-shadow: none; }
  .subnav-more { flex-basis: 100%; }
  .subnav-link { min-height: 40px; display: flex; align-items: center; }   /* vùng chạm đủ lớn trên mobile */
  .dtx-summary > [data-k]::before { content: attr(data-k); color: var(--text-muted); font-weight: 400; }
}

/* ---- P8.14.13 — bộ lọc Task của nhân viên ---- */
.team-filter .field select { max-width: 18rem; }
.team-filter-actions { display: flex; gap: var(--space-2); align-items: flex-end; }
.team-filter-count { margin: var(--space-3) 0 0; }
@media (max-width: 900px) {
  /* màn hẹp: cột tên giữ độ rộng tối thiểu (không bị ép 1 chữ/dòng), phần dư cuộn trong .table-wrap */
  .team-table td.col-sop { min-width: 11rem; }
  .team-table td.col-task { min-width: 15rem; }
  .team-filter .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .team-filter .field, .team-filter .field select { max-width: none; min-width: 0; }
  .team-filter .field.grow, .team-filter-actions { grid-column: 1 / -1; }
  .team-filter-actions .btn { flex: 1 1 0; justify-content: center; }
}
@media (max-width: 600px) {
  .team-filter .field-row { grid-template-columns: 1fr; }
}

/* ---- P8.14.14 — Việc của tôi: cột việc chính + cột phụ (Target, Lead) ----
   Thay lưới 4 card cao thấp lệch nhau (khoảng trống lớn): khối việc xếp chồng
   trong cột chính, nên chiều cao mỗi khối không ảnh hưởng khối khác. */
.mw-hello { margin-top: calc(-1 * var(--space-2)); }
.mw-page { max-width: 1500px; }
.mw-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: var(--space-5); align-items: start; }
.mw-main, .mw-side { display: grid; gap: var(--space-4); min-width: 0; }
.mw-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); }
.mw-section-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.mw-section-head h2 { margin: 0; font-size: var(--text-lg); }
.mw-count { display: inline-flex; min-width: 28px; justify-content: center; padding: 2px var(--space-2); border-radius: var(--radius-full); background: var(--brand-50); color: var(--brand-700); font-weight: 700; font-size: var(--text-sm); }
.mw-more { margin-left: auto; font-size: var(--text-sm); font-weight: 600; }
.mw-target-total { margin: var(--space-3) 0 var(--space-1); }
.mw-links { margin: var(--space-2) 0 0; font-weight: 600; }
.work-list { list-style: none; margin: 0; padding: 0; }
.work-item { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.work-item:last-child { border-bottom: none; }
.work-title { display: block; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.work-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin-top: var(--space-1); font-size: var(--text-sm); color: var(--text-muted); }
.work-code { font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap; }
.work-empty { margin: var(--space-2) 0; color: var(--text-muted); }
@media (max-width: 1100px) {
  .mw-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .mw-section { padding: var(--space-3) var(--space-4); }
}

/* P8.14.14 — khối mở/đóng trong nội dung (thay cho việc mượn .side-group của sidebar:
   rule sidebar tô chữ summary gần trắng #e7f0f7 -> mất chữ trên nền trắng). */
.disclosure { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); margin-bottom: var(--space-4); }
.disclosure > summary { cursor: pointer; display: flex; align-items: center; gap: var(--space-2); color: var(--text); font-weight: 600; min-height: 40px; }

/* P8.14.14 — cột tiêu đề/tên chính của bảng danh sách không bị ép còn 1-2 chữ mỗi dòng
   (min-width trên th áp cho cả cột); phần dư cuộn trong .table-wrap. */
table.dt th.col-title { min-width: 16rem; }
@media (max-width: 600px) { table.dt th.col-title { min-width: 12rem; } }