/* ==========================================================================
   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 */
  --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:     #687784;         /* demo: --muted */
  --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;
  --text-xs: .6875rem;   /* 11px — demo: th, .code, .field label, .demo/.pill */
  --text-sm: .75rem;     /* 12px — demo: .stat em */
  --text-base: .875rem;  /* 14px — demo: :root font shorthand (body) */
  --text-lg: .9375rem;   /* 15px — demo: .panelhead h2 */
  --text-xl: 1rem;       /* 16px — demo: .detail h2 */
  --text-2xl: 1.375rem;  /* 22px — demo: .head h1, .stat strong */
  --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; }

/* ---- Shell / top nav ---- */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.brand {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--brand-900);
  letter-spacing: -.01em;
}
.brand:hover { text-decoration: none; }
.nav { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-right: auto; }
.nav-link {
  color: var(--text-muted);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease;
}
.nav-link:hover { background: var(--surface-sunken); color: var(--text); text-decoration: none; }
.nav-link.is-active { background: var(--brand-100); color: var(--brand-700); }
.topbar-user { display: flex; align-items: center; gap: var(--space-3); }
.user-chip { font-size: var(--text-sm); color: var(--text-muted); }

.subnav {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-5) var(--space-2);
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.subnav a {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  padding: var(--space-1) 0;
  border-bottom: 2px solid transparent;
}
.subnav a:hover { color: var(--brand-700); text-decoration: none; }
.subnav a.is-active { color: var(--brand-700); border-bottom-color: var(--brand-600); }

/* 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); }
.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);
}

.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 { opacity: .5; 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-4);
  margin-bottom: var(--space-4);
}

/* ---- 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 { background: var(--brand-700); border-color: var(--brand-700); 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-sm); }
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: var(--text-muted);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .03em;
  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-neutral { background: var(--neutral-100); color: var(--neutral-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-sm); }
.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; }

.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;
}
.side-group summary::-webkit-details-marker { display: none; }
.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. */
.side-group summary svg:not(.chev) { width: 18px; height: 18px; flex: 0 0 auto; opacity: .95; }
.side-group summary svg.chev { width: 16px; height: 16px; margin-left: auto; flex: 0 0 auto; transition: transform var(--motion-fast) ease; opacity: .8; }
.side-group[open] summary svg.chev { transform: rotate(180deg); }
.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: var(--text-muted);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .03em;
  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-sm);
  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-sm); }
.dtx-kv-row { display: flex; justify-content: space-between; gap: var(--space-3); padding: 3px 0; }
.dtx-kv-row .k { color: var(--text-muted); }
.dtx-kv-row .v { font-weight: 600; text-align: right; }

.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; }
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .container, .topbar-inner, .subnav { padding-left: var(--space-4); padding-right: var(--space-4); }
  .nav { gap: 0; margin-right: 0; width: 100%; order: 3; }
  .field-row { align-items: stretch; }
  table.dt th, table.dt td { padding: var(--space-2) var(--space-3); }
}