/* ==========================================================================
   ENTERPRISE UI DESIGN SYSTEM - QUẢN LÝ TÍNH LƯƠNG
   Style: Clean, Professional SaaS, High Legibility, Data-centric
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Color Palette - Slate (Neutrals) */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* Color Palette - Brand (Blue) */
  --brand-50: #eff6ff;
  --brand-100: #dbeafe;
  --brand-500: #3b82f6;
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
  --brand-900: #1e3a8a;

  /* Semantic Colors */
  --success-50: #ecfdf5;
  --success-600: #059669;
  --danger-50: #fef2f2;
  --danger-600: #dc2626;
  --warning-50: #fffbeb;
  --warning-600: #d97706;

  /* Global Assignments */
  --bg-app: var(--slate-50);
  --bg-surface: #ffffff;
  --border-color: var(--slate-200);

  --text-primary: var(--slate-900);
  --text-secondary: var(--slate-600);
  --text-tertiary: var(--slate-500);

  /* Structure */
  --sidebar-width: 260px;
  --header-height: 64px;

  /* Utilities - Tăng độ bo tròn theo yêu cầu */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Tăng độ tương phản đổ bóng */
  --shadow-sm: 0 4px 10px rgba(15, 23, 42, 0.04), 0 2px 4px rgba(15, 23, 42, 0.02);
  --shadow-md: 0 10px 25px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.08);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-app);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================
   LAYOUT STRUCTURE
   ========================================== */
.app-container {
  display: flex;
  min-height: 100vh;
}

/* SIDEBAR */
.sidebar {
  width: var(--sidebar-width);
  background-color: var(--bg-surface);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
}

.sidebar-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-bottom: 1px solid var(--border-color);
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-icon {
  width: 32px;
  height: 32px;
  background-color: var(--brand-600);
  color: white;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-icon svg { width: 18px; height: 18px; }

.brand-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--slate-900);
  letter-spacing: -0.01em;
}

.nav-menu {
  flex: 1;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

.nav-group-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--slate-400);
  letter-spacing: 0.05em;
  padding: 0 12px;
  margin-bottom: 8px;
  margin-top: 16px;
}
.nav-group-title:first-child { margin-top: 0; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.nav-item svg {
  width: 20px;
  height: 20px;
  color: var(--slate-400);
  transition: color 0.15s ease;
}

.nav-item:hover {
  background-color: var(--slate-100);
  color: var(--slate-900);
}

.nav-item:hover svg {
  color: var(--slate-600);
}

.nav-item.active {
  background-color: var(--brand-50);
  color: var(--brand-700);
  font-weight: 600;
}

.nav-item.active svg {
  color: var(--brand-600);
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid var(--border-color);
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: var(--radius-md);
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--slate-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--slate-700);
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-900);
}

.user-role {
  font-size: 12px;
  color: var(--slate-500);
}

/* DEC-028: overlay đăng nhập dùng chung. Ẩn theo mặc định - app.js chỉ đổi sang
   display:flex khi có backend api/ và chưa đăng nhập. */
.login-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--slate-900);
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.login-box {
  width: 100%;
  max-width: 360px;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: 0 20px 40px -8px rgb(0 0 0 / 0.35);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}

.login-box h2 {
  margin: 0;
  font-size: 20px;
  color: var(--text-primary);
}

.login-subtitle {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.login-box label {
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 4px;
}

.login-error {
  min-height: 18px;
  margin: 0;
  font-size: 13px;
  color: var(--danger-600);
}

/* MAIN CONTENT */
.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0; /* Important for preventing table blowout */
}

/* HEADER */
.top-header {
  height: var(--header-height);
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  position: sticky;
  top: 0;
  z-index: 30;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--slate-900);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  white-space: nowrap;
}

.btn svg { width: 16px; height: 16px; }

.btn-primary {
  background-color: var(--brand-600);
  color: white;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background-color: var(--brand-700);
}

.btn-secondary {
  background-color: white;
  border-color: var(--slate-300);
  color: var(--slate-700);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
  background-color: var(--slate-50);
  color: var(--slate-900);
}

.btn-danger {
  background-color: var(--danger-600);
  color: white;
  box-shadow: var(--shadow-sm);
}
.btn-danger:hover {
  background-color: #b91c1c;
}

/* CONTENT BODY */
.content-body {
  padding: 32px;
  flex: 1;
}

.view-section {
  display: none;
  animation: fadeIn 0.2s ease-out forwards;
}

.view-section.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}

.page-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--slate-900);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.page-description {
  font-size: 14px;
  color: var(--text-secondary);
}

/* PAYROLL RULE FOUNDATION */
.rule-foundation-panel {
  position: relative;
  overflow: hidden;
  padding: 28px;
  margin-bottom: 20px;
  border: 1px solid #cfe0ff;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #f8fbff 0%, #ffffff 58%, #f5f9ff 100%);
  box-shadow: var(--shadow-sm);
}

.rule-foundation-panel::after {
  content: '';
  position: absolute;
  top: -96px;
  right: -64px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.06);
  pointer-events: none;
}

.rule-foundation-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 720px;
  margin-bottom: 24px;
}

.rule-foundation-icon,
.rule-setting-icon,
.department-policy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.rule-foundation-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: white;
  background: var(--brand-600);
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.22);
}

.rule-foundation-icon svg { width: 21px; height: 21px; }

.rule-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--brand-700);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.rule-foundation-heading h2 {
  margin: 0 0 4px;
  color: var(--slate-900);
  font-size: 18px;
  line-height: 1.35;
}

.rule-foundation-heading p,
.rule-setting-card p,
.department-policy-callout p {
  margin: 0;
  color: var(--slate-500);
  font-size: 13px;
  line-height: 1.55;
}

.rule-setting-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.rule-setting-card {
  min-height: 166px;
  padding: 18px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.92);
}

.rule-setting-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.rule-setting-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.rule-setting-icon svg { width: 17px; height: 17px; }
.rule-setting-icon.blue { color: var(--brand-600); background: var(--brand-50); }
.rule-setting-icon.violet { color: #7c3aed; background: #f3e8ff; }

.rule-setting-label {
  display: block;
  margin-bottom: 2px;
  color: var(--slate-800);
  font-size: 14px;
  font-weight: 700;
}

.rule-setting-control {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rule-number-input,
.rule-select-input {
  height: 42px;
  border: 1px solid var(--slate-300);
  border-radius: 10px;
  color: var(--slate-900);
  background: white;
  font: inherit;
  font-weight: 600;
}

.rule-number-input {
  width: 112px;
  padding: 8px 12px;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.rule-select-input {
  width: 100%;
  max-width: 260px;
  padding: 8px 12px;
}

.rule-number-input:focus,
.rule-select-input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
}

.rule-setting-control > span {
  color: var(--slate-600);
  font-size: 13px;
  font-weight: 600;
}

.department-policy-callout {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 20px;
  border: 1px solid #dbeafe;
  border-radius: var(--radius-lg);
  background: var(--brand-50);
}

.department-policy-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: var(--brand-700);
  background: white;
}

.department-policy-icon svg { width: 19px; height: 19px; }

.department-policy-callout strong {
  display: block;
  margin-bottom: 2px;
  color: var(--slate-800);
  font-size: 14px;
}

.department-policy-action {
  flex: 0 0 auto;
  margin: 0 0 0 auto;
  white-space: nowrap;
}

/* Quy chế chung: ưu tiên bảng số gọn cho kế toán. */
.compact-rule-panel {
  margin: 0 0 16px;
  padding: 18px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

/* Người dùng phản hồi (2026-08-09): các khối Quy Chế Chung xếp dọc quá dài, nên chuyển sang lưới
   thẻ nhỏ như "Phụ Cấp Riêng Của Phòng Ban". `align-items: start` để mỗi thẻ chỉ cao theo đúng
   nội dung của mình, không bị kéo giãn theo thẻ cao nhất cùng hàng. Khối "Ngày nghỉ và lịch chuyên
   cần" nhiều nội dung nhất nên chiếm trọn 1 hàng (`is-full-width`) thay vì ép vào 1 cột hẹp. */
.rule-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  align-items: start;
}

.rule-config-grid .compact-rule-panel {
  margin: 0;
}

.compact-rule-panel.is-full-width {
  grid-column: 1 / -1;
}

.conn-status-row { display: flex; align-items: center; gap: 10px; }
.conn-status-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--slate-300); }
.conn-status-dot.conn-checking { background: var(--warning-500, #f59e0b); animation: conn-pulse 1.2s ease-in-out infinite; }
.conn-status-dot.conn-online { background: var(--success-600); }
.conn-status-dot.conn-offline { background: var(--danger-600); }
@keyframes conn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.compact-rule-heading { margin-bottom: 14px; }
.compact-rule-heading h2 { margin: 0 0 4px; color: var(--slate-900); font-size: 16px; }
.compact-rule-heading p,
.compact-number-field small,
.compact-allowance-row small,
.compact-rule-note { color: var(--slate-500); font-size: 12px; line-height: 1.45; }
.compact-rule-heading p { margin: 0; }

.compact-setting-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.compact-setting-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.compact-number-field { display: block; }
.compact-number-field > span { display: block; margin-bottom: 6px; color: var(--slate-700); font-size: 13px; font-weight: 700; }
.compact-number-field > div { display: flex; align-items: center; gap: 8px; }
.compact-number-field input,
.compact-number-field select,
.compact-allowance-row input { width: 100%; height: 38px; padding: 7px 10px; border: 1px solid var(--slate-300); border-radius: 8px; color: var(--slate-900); background: white; font: inherit; font-weight: 650; font-variant-numeric: tabular-nums; }
.compact-number-field em,
.compact-allowance-row em { flex: 0 0 auto; color: var(--slate-500); font-size: 12px; font-style: normal; white-space: nowrap; }
.compact-number-field small { display: block; margin-top: 5px; }

.compact-allowance-list { display: flex; flex-direction: column; border-top: 1px solid var(--slate-100); }
.compact-allowance-row { display: grid; grid-template-columns: minmax(0, 1fr) 190px 34px; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--slate-100); }
.compact-allowance-row strong { display: block; color: var(--slate-800); font-size: 13px; }
.compact-allowance-row small { display: block; margin-top: 3px; }
.compact-allowance-row label { display: flex; align-items: center; gap: 7px; }
.compact-remove-button { width: 34px; height: 34px; padding: 0; color: var(--slate-500); }
.compact-allowance-add,
.compact-holiday-control { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.compact-allowance-add select { max-width: 350px; }
.compact-rule-note { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; color: var(--slate-600); background: var(--slate-50); }
.compact-rule-note svg { flex: 0 0 auto; width: 16px; color: var(--brand-600); }
.legal-holiday-heading { margin: 2px 0 8px; }
.legal-holiday-heading strong { display: block; color: var(--slate-800); font-size: 13px; }
.legal-holiday-heading small { display: block; margin-top: 3px; color: var(--slate-500); font-size: 12px; line-height: 1.45; }
.legal-holiday-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.legal-holiday-group { padding: 10px; border: 1px solid var(--slate-200); border-radius: 8px; }
.legal-holiday-group > strong { display: block; color: var(--slate-800); font-size: 13px; }
.legal-holiday-group > small { display: block; margin: 2px 0 8px; color: var(--slate-500); font-size: 11px; }
.legal-holiday-dates { display: flex; flex-wrap: wrap; gap: 6px; }
.legal-holiday-date { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid var(--slate-200); border-radius: 6px; color: var(--slate-700); font-size: 12px; cursor: pointer; }
.legal-holiday-date:hover { border-color: var(--brand-300); background: var(--brand-50); }
.legal-holiday-date input { width: 15px; height: 15px; margin: 0; accent-color: var(--brand-600); }
.legal-holiday-notice { display: flex; gap: 7px; margin-top: 10px; color: var(--slate-500); font-size: 11px; line-height: 1.45; }
.legal-holiday-notice svg { flex: 0 0 auto; width: 15px; color: var(--slate-500); }
.compact-custom-holiday-heading { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--slate-100); }
.compact-custom-holiday-heading h3 { margin: 0 0 4px; color: var(--slate-800); font-size: 14px; }

/* DEC-034 đợt 3: khoản đặc thù phòng ban trong màn Cấu Trúc Lương */
.dept-special-allowance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.dept-special-allowance-card { padding: 14px 16px; border: 1px solid var(--slate-200); border-radius: var(--radius-lg); background: var(--bg-surface); }
.dept-special-allowance-card h4 { margin: 0 0 6px; color: var(--slate-900); font-size: 14px; }
.dept-special-allowance-row.compact-allowance-row { grid-template-columns: minmax(0, 1fr) 150px; padding: 9px 0; }
.dept-special-allowance-row.is-irregular-warning { background: var(--warning-50); border-radius: 6px; padding-left: 8px; padding-right: 8px; }
.dept-special-allowance-row.is-irregular-warning small { color: var(--warning-600); font-weight: 600; }

@media (max-width: 680px) {
  .compact-setting-grid,
  .compact-setting-grid-three { grid-template-columns: 1fr; }
  .legal-holiday-list { grid-template-columns: 1fr; }
  .compact-allowance-row { grid-template-columns: 1fr 34px; }
  .compact-allowance-row label { grid-column: 1 / -1; grid-row: 2; }
  .compact-allowance-add,
  .compact-holiday-control { align-items: stretch; flex-direction: column; }
  .compact-allowance-add select { max-width: none; }
}

.payroll-workflow-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 14px;
  padding: 20px 22px;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-xl);
  background: linear-gradient(110deg, #eff6ff, #f8fafc);
}

.payroll-workflow-overview h2 { margin: 0 0 4px; color: var(--slate-900); font-size: 17px; }
.payroll-workflow-overview p { margin: 0; color: var(--slate-600); font-size: 13px; line-height: 1.5; }

.workflow-dashboard-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.workflow-summary-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0 8px;
  min-width: 170px;
  padding: 12px;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  color: var(--slate-700);
  background: white;
  text-align: left;
  cursor: pointer;
}
.workflow-summary-item:hover { border-color: var(--brand-300); background: var(--brand-50); }
.workflow-summary-item > span { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: var(--slate-600); background: var(--slate-100); font-size: 12px; font-weight: 800; }
.workflow-summary-item.is-ready > span { color: var(--success-600); background: var(--success-50); }
.workflow-summary-item strong { color: var(--slate-800); font-size: 12px; line-height: 1.35; }
.workflow-summary-item small { margin-top: 3px; color: var(--slate-500); font-size: 11px; line-height: 1.35; }

.workflow-guide-note,
.workflow-context-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding: 16px 18px;
  border: 1px solid #dbeafe;
  border-radius: var(--radius-lg);
  background: var(--brand-50);
}
.workflow-guide-note svg { flex: 0 0 auto; width: 22px; color: var(--brand-700); }
.workflow-guide-note p,
.workflow-context-banner p { margin: 0; color: var(--slate-600); font-size: 13px; line-height: 1.5; }
.workflow-context-banner strong { display: block; margin-bottom: 2px; color: var(--slate-800); font-size: 14px; }

.workflow-guide-list { display: flex; flex-direction: column; gap: 12px; }
.workflow-guide-card { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 20px; border: 1px solid var(--slate-200); border-radius: var(--radius-xl); background: white; box-shadow: var(--shadow-sm); }
.workflow-guide-card.is-ready { border-color: #bbf7d0; }
.workflow-guide-order { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; color: var(--brand-700); background: var(--brand-50); font-size: 16px; font-weight: 800; }
.workflow-guide-card.is-ready .workflow-guide-order { color: var(--success-600); background: var(--success-50); }
.workflow-guide-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.workflow-guide-heading h2 { margin: 0; color: var(--slate-900); font-size: 16px; }
.workflow-guide-content p { margin: 4px 0; color: var(--slate-600); font-size: 13px; line-height: 1.5; }
.workflow-guide-content small { color: var(--slate-500); font-size: 12px; }

/* CARDS & PANELS - Khoảng cách tách biệt rõ ràng */
.panel {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  margin-bottom: 32px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.panel:hover {
  box-shadow: var(--shadow-md);
}

.panel-header {
  padding: 20px 28px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fcfcfd;
}

.panel-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--slate-900);
}

.panel-body {
  padding: 28px;
}

/* KPI METRICS (DASHBOARD) */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-bottom: 32px;
}

.metric-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.metric-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.metric-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-500);
}

.metric-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.metric-icon svg { width: 16px; height: 16px; }

.metric-icon.blue { background-color: var(--brand-50); color: var(--brand-600); }
.metric-icon.green { background-color: var(--success-50); color: var(--success-600); }
.metric-icon.red { background-color: var(--danger-50); color: var(--danger-600); }
.metric-icon.orange { background-color: var(--warning-50); color: var(--warning-600); }

.metric-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--slate-900);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* DATA TABLES (ENTERPRISE GRADE) */
.table-container {
  width: 100%;
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}

.data-table th {
  background-color: var(--slate-50);
  color: var(--slate-500);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  border-top: 1px solid var(--border-color);
  white-space: nowrap;
}

.data-table th:first-child { padding-left: 24px; }
.data-table th:last-child { padding-right: 24px; }

.data-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
  color: var(--slate-700);
  font-size: 14px;
  vertical-align: middle;
}

.data-table td:first-child { padding-left: 24px; }
.data-table td:last-child { padding-right: 24px; }

.data-table tbody tr {
  transition: background-color 0.1s ease;
}

.data-table tbody tr:hover {
  background-color: var(--slate-50);
}

.data-table .col-money {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.data-table th.col-money { text-align: right; }

.text-strong {
  font-weight: 600;
  color: var(--slate-900);
}

.text-muted { color: var(--slate-500); font-size: 13px; }

/* BADGES */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.badge-blue { background-color: var(--brand-50); color: var(--brand-700); }
.badge-green { background-color: var(--success-50); color: var(--success-600); }
.badge-red { background-color: var(--danger-50); color: var(--danger-600); }
.badge-gray { background-color: var(--slate-100); color: var(--slate-700); }
.badge-amber { background-color: var(--warning-50); color: var(--warning-600); }

/* Ô số liệu cần nổi bật ngay trong bảng (VD: Tổng thu nhập, Thực nhận sau BHXH) */
.policy-highlight-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.policy-highlight-cell small {
  font-weight: 600;
  font-size: 10px;
  opacity: .85;
}

.policy-highlight-cell.is-gross { background-color: var(--brand-50); color: var(--brand-700); }
.policy-highlight-cell.is-net { background-color: var(--success-50); color: var(--success-600); }

.employee-contract-label {
  margin-top: 6px;
  color: var(--slate-600);
  font-size: 12px;
}

.employee-profile-badge { margin-top: 6px; }

/* FORMS & INPUTS */
.form-group {
  margin-bottom: 16px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-row.cols-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-700);
  margin-bottom: 6px;
}

.form-control {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--slate-900);
  background-color: white;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.form-control::placeholder { color: var(--slate-400); }

/* Table Input (Borderless until hover/focus) */
.table-input {
  width: 100%;
  min-width: 100px;
  padding: 6px 8px;
  font-size: 14px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--slate-900);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
}

.table-input:hover { border-color: var(--slate-300); background-color: white; }
.table-input:focus {
  outline: none;
  border-color: var(--brand-500);
  background-color: white;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.table-input:disabled { color: var(--slate-500); background: transparent; border-color: transparent; }

/* MODALS */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.modal-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

.modal-dialog {
  background-color: var(--bg-surface);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  transform: scale(0.95);
  transition: transform 0.2s ease;
}

.employee-modal-dialog { max-width: 760px; }

.employee-form-section {
  margin: 20px 0;
  padding: 18px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--slate-50);
}

.employee-form-section-title {
  color: var(--slate-900);
  font-size: 14px;
  font-weight: 700;
}

.employee-form-section-help { margin: 4px 0 16px; }

.modal-backdrop.show .modal-dialog {
  transform: scale(1);
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--slate-900);
}

.modal-close {
  background: none;
  border: none;
  color: var(--slate-400);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  display: flex;
}
.modal-close:hover { background-color: var(--slate-100); color: var(--slate-600); }

.modal-body {
  padding: 24px;
  overflow-y: auto;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  background-color: var(--slate-50);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.policy-toolbar {
  padding: 16px 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border-color);
  background: var(--slate-50);
}

.policy-filter-field {
  width: min(320px, 100%);
}

.policy-filter-field .form-label {
  margin-bottom: 6px;
}

.policy-filter-summary {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--slate-500);
  font-size: 13px;
}

.policy-filter-summary strong {
  color: var(--slate-900);
  font-size: 15px;
}

.policy-edit-button {
  padding: 7px 11px;
  font-size: 13px;
  white-space: nowrap;
}

.empty-table-state {
  padding: 36px 20px;
  text-align: center;
  color: var(--slate-500);
  max-width: 780px;
  margin: 0 auto;
  line-height: 1.6;
}

.department-criteria {
  margin: 0 20px 20px;
  padding: 18px 20px;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
}

.department-criteria h4 {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--slate-800);
}

.department-criteria header p {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--slate-600);
  line-height: 1.6;
}

.department-criteria .criteria-summary {
  margin-bottom: 14px;
}

.criteria-columns {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  align-items: start;
}

.criteria-heading {
  margin: 0 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--slate-500);
}

.criteria-group {
  margin-bottom: 12px;
}

.criteria-group h5 {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--brand-600);
}

.department-criteria ul {
  margin: 0;
  padding-left: 18px;
}

.department-criteria li {
  font-size: 13px;
  color: var(--slate-700);
  line-height: 1.65;
  margin-bottom: 3px;
}

/* DEC-032: mỗi nhóm có 2 bậc, nên phần này trả lời "vì sao người này bậc dưới, người kia bậc
   trên" — thứ mà điều kiện vào nhóm ở cột bên trái không nói được. */
.criteria-within {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--slate-300);
}

.criteria-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 10px;
}

.criteria-table th {
  width: 180px;
  text-align: left;
  vertical-align: top;
  padding: 6px 12px 6px 0;
  font-weight: 600;
  color: var(--slate-500);
}

.criteria-table td {
  padding: 6px 0;
  color: var(--slate-700);
  line-height: 1.6;
  border-bottom: 1px dashed var(--slate-200);
}

.criteria-questions em {
  color: var(--slate-500);
}

.criteria-warning {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--slate-300);
  font-size: 12px;
  color: var(--slate-500);
  line-height: 1.6;
}

.evaluation-criteria {
  margin-top: 10px;
  font-size: 12px;
}

.evaluation-criteria summary {
  cursor: pointer;
  color: var(--brand-600);
  font-weight: 500;
}

.evaluation-criteria ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.evaluation-criteria li {
  color: var(--slate-600);
  line-height: 1.6;
  margin-bottom: 3px;
}

@media (max-width: 900px) {
  .criteria-columns {
    grid-template-columns: 1fr;
  }
}

.policy-workspace-backdrop {
  padding: 12px;
  align-items: stretch;
}

.policy-workspace-dialog {
  width: 100%;
  max-width: 1500px;
  max-height: none;
  height: calc(100vh - 24px);
  margin: 0 auto;
  border-radius: 14px;
  transform: translateY(10px);
}

.modal-backdrop.show .policy-workspace-dialog {
  transform: translateY(0);
}

.policy-workspace-form {
  min-height: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.policy-workspace-header {
  flex: 0 0 auto;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: white;
  border-radius: 14px 14px 0 0;
}

.policy-workspace-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--brand-600);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.policy-workspace-header .modal-title {
  font-size: 22px;
}

.policy-workspace-header p {
  margin: 4px 0 0;
  color: var(--slate-500);
  font-size: 13px;
}

.policy-workspace-header-actions,
.policy-workspace-footer div {
  display: flex;
  gap: 10px;
}

.policy-workspace-body {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  overflow: hidden;
  background: var(--slate-100);
}

.policy-workspace-main {
  min-width: 0;
  padding: 22px;
  overflow-y: auto;
}

.policy-editor-section {
  max-width: 960px;
  margin: 0 auto 18px;
  padding: 20px;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  background: white;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.policy-editor-section-heading {
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.policy-editor-section-heading h4 {
  margin: 0;
  color: var(--slate-900);
  font-size: 16px;
}

.policy-editor-section-heading p {
  margin: 3px 0 0;
  color: var(--slate-500);
  font-size: 12px;
}

.policy-editor-step {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-600);
  color: white;
  font-size: 13px;
  font-weight: 700;
}

.policy-allowance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.policy-allowance-card {
  padding: 12px;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 32px;
  align-items: center;
  gap: 12px;
  background: var(--slate-50);
}

.policy-allowance-card.is-buffer {
  background: linear-gradient(135deg, #fff8ec, #fffdf6);
  border-color: #f0c36d;
  box-shadow: inset 3px 0 0 #d99a1f;
}

.policy-allowance-card.is-buffer .dyn-allowance {
  background: #fff8ec;
  border-color: #d99a1f;
  color: #7a4e00;
  font-weight: 700;
  cursor: not-allowed;
}

.policy-buffer-toggle {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--slate-200);
  background: white;
  color: var(--slate-400);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.policy-buffer-toggle.is-active {
  border-color: #d99a1f;
  background: #fff8ec;
  color: #d99a1f;
}

.policy-allowance-card.has-value {
  background: linear-gradient(135deg, var(--brand-50), #f0f7ff);
  border-color: var(--brand-100);
  box-shadow: inset 3px 0 0 var(--brand-500);
}

.policy-allowance-card.has-value .form-label {
  color: var(--brand-700);
}

.policy-allowance-card.has-value .dyn-allowance {
  background: white;
  border-color: var(--brand-500);
  color: var(--brand-900);
  font-weight: 700;
}

.policy-additional-allowances {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 0;
}

.policy-additional-allowances small {
  color: var(--slate-500);
  font-size: 12px;
}

.policy-allowance-card .form-label {
  margin: 0 0 3px;
}

.policy-allowance-card small {
  color: var(--slate-500);
  font-size: 11px;
}

/* Số kế thừa từ bậc lương (placeholder của ô còn trống) — đậm hơn slate-400 mặc định của
   trình duyệt cho dễ đọc, nhưng vẫn nhạt hơn hẳn số đã gõ thật để không lẫn với ngoại lệ. */
.policy-allowance-card .dyn-allowance::placeholder {
  color: var(--slate-600);
  font-weight: 600;
  opacity: 1;
}

.policy-bonus-field {
  max-width: 360px;
  margin-top: 16px;
}

.policy-live-preview {
  padding: 22px;
  border-left: 1px solid var(--slate-200);
  overflow-y: auto;
  background: white;
}

.policy-live-preview-heading {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.policy-live-preview-heading > span {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--brand-50);
  color: var(--brand-600);
}

.policy-live-preview-heading div {
  display: grid;
  gap: 2px;
}

.policy-live-preview-heading small,
.policy-preview-primary small,
.policy-preview-note {
  color: var(--slate-500);
  font-size: 11px;
}

.policy-preview-primary {
  padding: 16px;
  border-radius: 10px;
  display: grid;
  gap: 4px;
  background: var(--brand-600);
  color: white;
}

.policy-preview-primary small {
  color: rgba(255, 255, 255, .78);
}

.policy-preview-primary strong {
  font-size: 25px;
}

.policy-preview-lines {
  padding: 12px 0;
}

.policy-preview-lines > div {
  padding: 9px 0;
  border-bottom: 1px solid var(--slate-100);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--slate-600);
  font-size: 12px;
}

.policy-preview-lines strong {
  color: var(--slate-900);
  white-space: nowrap;
}

/* Bảng gói lương của một nhân viên (khung Hồ Sơ Nhân Sự) */
.policy-preview-row {
  padding: 9px 0;
  border-bottom: 1px solid var(--slate-100);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--slate-600);
  font-size: 12px;
}

.policy-preview-row strong {
  color: var(--slate-900);
  white-space: nowrap;
}

/* Dòng con: từng khoản phụ cấp lẻ, thụt vào cho dễ đọc so với dòng tổng */
.policy-preview-row.is-sub {
  padding-left: 12px;
  color: var(--slate-500);
  font-size: 11px;
}

.policy-preview-row.is-sub em {
  color: var(--warning-600);
  font-style: normal;
}

.policy-preview-row.is-total {
  border-bottom: none;
  border-top: 1px solid var(--slate-300);
  margin-top: 4px;
  padding-top: 12px;
  color: var(--slate-900);
  font-weight: 600;
}

.policy-preview-row.is-total strong {
  color: var(--brand-700);
  font-size: 15px;
}

.employee-package-note {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--slate-50);
  color: var(--slate-600);
  font-size: 11px;
  line-height: 1.5;
}

/* Chấm điểm khoản co giãn bằng 4 mức bấm sẵn (DEC-025) */
.evaluation-score-chip {
  padding: 6px 10px;
  border: 1px solid var(--slate-300);
  border-radius: 999px;
  background: white;
  color: var(--slate-600);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
}

.evaluation-score-chip:hover {
  border-color: var(--slate-500);
}

.evaluation-score-chip.is-active.is-good {
  border-color: var(--success-600);
  background: var(--success-50);
  color: var(--success-600);
}

.evaluation-score-chip.is-active.is-warn {
  border-color: var(--warning-600);
  background: var(--warning-50);
  color: var(--warning-600);
}

.evaluation-score-chip.is-active.is-bad,
.evaluation-score-chip.is-active.is-zero {
  border-color: var(--danger-600);
  background: var(--danger-50);
  color: var(--danger-600);
}

.evaluation-note.is-required {
  border-color: var(--warning-600);
  background: var(--warning-50);
}

/* =========================================================================
   DEC-031: đầu màn Bảng Lương gói trong 1-2 dòng.
   Trước đây tiêu đề trang + banner hướng dẫn + 5 thẻ thống kê + đoạn văn
   giải thích chiếm ~500px, tức mất 5-6 dòng nhân viên trên màn 1080p. Với
   xưởng 20-30 người đó là mất gần một phần tư danh sách.
   ========================================================================= */
.payroll-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.payroll-toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.payroll-month-input { width: 150px; }
.payroll-search { width: 240px; }

/* Thanh trạng thái: các con số quan trọng nằm ngang trên một dòng */
.payroll-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 10px;
  padding: 9px 14px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: white;
}

.payroll-statusbar-facts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.payroll-fact {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: var(--slate-600);
  font-size: 12px;
  white-space: nowrap;
  cursor: default;
}

.payroll-fact b {
  color: var(--slate-900);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Các trạng thái cần chú ý được tô màu; mục bình thường để trung tính cho đỡ nhiễu */
.payroll-fact.is-info,
.payroll-fact.is-info b { color: var(--brand-700); }
.payroll-fact.is-warn,
.payroll-fact.is-warn b { color: var(--warning-600); }
.payroll-fact.is-bad,
.payroll-fact.is-bad b { color: var(--danger-600); }
.payroll-fact.is-wait,
.payroll-fact.is-wait b { color: var(--warning-600); }
.payroll-fact.is-ok { color: var(--success-600); font-weight: 600; }

.payroll-statusbar-action {
  display: flex;
  align-items: center;
  gap: 8px;
}

.payroll-statusbar-action .form-control {
  width: 180px;
  padding: 6px 10px;
  font-size: 13px;
}

/* Dòng "việc tiếp theo": chỉ hiện khi thật sự có việc phải làm */
.payroll-nextstep {
  margin-bottom: 10px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: 12px;
  line-height: 1.5;
}

.payroll-nextstep.is-attention {
  background: var(--warning-50);
  color: var(--warning-600);
}

.payroll-nextstep.is-ready {
  background: var(--success-50);
  color: var(--success-600);
}

.payroll-nextstep.is-locked {
  background: var(--slate-100);
  color: var(--slate-600);
}

.workdays-hint {
  margin-top: 3px;
  color: var(--slate-500);
  font-size: 10px;
  text-align: center;
  white-space: nowrap;
}

.employee-package-note.is-warning {
  border: 1px solid var(--warning-600);
  background: var(--warning-50);
  color: var(--warning-600);
}

.employee-allowance-empty {
  grid-column: 1 / -1;
  padding: 16px;
  border: 1px dashed var(--slate-300);
  border-radius: 9px;
  background: var(--slate-50);
  color: var(--slate-600);
  font-size: 12px;
}

/* Khoản đang bị đặt ngoại lệ riêng cho nhân viên: phải nhìn ra ngay vì nó sẽ không
   tự cập nhật khi công ty nâng lương bậc. */
.employee-allowance-card.is-override {
  border-color: var(--warning-600);
  background: var(--warning-50);
}

.policy-preview-difference,
.policy-preview-company-cost {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--slate-200);
  border-radius: 9px;
  display: grid;
  gap: 4px;
  font-size: 12px;
}

.policy-preview-difference strong,
.policy-preview-company-cost strong {
  font-size: 16px;
}

.policy-preview-difference.is-balanced { border-color: #86efac; background: #f0fdf4; color: #166534; }
.policy-preview-difference.is-under { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.policy-preview-difference.is-over,
.policy-preview-company-cost.is-over-limit { border-color: #fecaca; background: #fef2f2; color: #991b1b; }

.policy-preview-company-cost small {
  color: inherit;
  opacity: .8;
}

.policy-preview-note {
  margin-top: 14px;
  line-height: 1.5;
}

.policy-workspace-footer {
  flex: 0 0 auto;
  padding: 14px 24px;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: white;
  color: var(--slate-500);
  font-size: 12px;
  border-radius: 0 0 14px 14px;
}

/* PAYSLIP VIEW (PRINT OPTIMIZED) */
.payslip-container {
  background: white;
  padding: 32px;
  color: #000;
}

/* Khối tên công ty đứng trên tiêu đề phiếu. Tờ phiếu không có tên, địa chỉ và MST công ty thì
   không nói được nó do ai phát hành — kế toán không lưu hồ sơ được. Khai ở Cấu Hình → Phiếu lương. */
.payslip-company { text-align: center; margin-bottom: 12px; }
.payslip-company-name { font-size: 15px; font-weight: 700; text-transform: uppercase; }
.payslip-company-meta { font-size: 12px; color: #444; margin-top: 4px; }

.payslip-header { text-align: center; margin-bottom: 24px; border-bottom: 2px solid #000; padding-bottom: 16px; }
.payslip-title { font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.payslip-subtitle { font-size: 14px; color: #555; margin-top: 4px; }

.payslip-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; font-size: 14px; }
.payslip-meta div { margin-bottom: 4px; }

.payslip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 24px; }
.payslip-section-title { font-size: 14px; font-weight: 600; text-transform: uppercase; border-bottom: 1px solid #ddd; padding-bottom: 8px; margin-bottom: 12px; }

.payslip-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.payslip-table td { padding: 6px 0; border-bottom: 1px dashed #eee; }
.payslip-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.payslip-table tr.total-row td { border-bottom: none; border-top: 1px solid #000; font-weight: 700; padding-top: 12px; }

/* Giải thích khoản Năng suất bị giảm. Cố ý KHÔNG phải một dòng trong bảng khấu trừ: phần giảm
   đã nằm trong số tiền của khoản đó ở cột thu nhập. Điều 127 BLLĐ 2019 phân biệt "không trả một
   khoản chưa đạt điều kiện hưởng" với "trừ vào lương vì làm sai" — khác biệt nằm ở đúng chỗ này. */
.payslip-note {
  margin-top: 12px;
  padding: 10px 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.6;
}

.payslip-note div { margin-top: 4px; color: #92400e; }

/* Thẻ điểm in kèm phiếu lương: chính tờ phiếu là bản ghi chấm điểm hằng tháng của mục 10 quy chế. */
.payslip-scorecard { margin-bottom: 24px; }
.payslip-scorecard .payslip-table tr.is-below td { color: #b45309; font-weight: 600; }

.payslip-net { margin-top: 24px; background: #f8fafc; border: 1px solid #e2e8f0; padding: 20px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; }
.payslip-net-label { font-size: 16px; font-weight: 600; }
.payslip-net-value { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Chỉ có trên bản lưu nội bộ. Bản gửi người lao động không in dòng này — xem buildPayslipHtml(). */
.payslip-net-internal { margin-top: 12px; background: var(--brand-50); border-color: var(--brand-100); }
.payslip-net-internal .payslip-net-value { color: var(--brand-700); }

.payslip-footer-note {
  margin-top: 20px;
  font-size: 12px;
  font-style: italic;
  color: #444;
  line-height: 1.6;
}

/* Chữ ký. Phiếu lương không có chỗ ký thì không phải chứng từ kế toán — số ô và tên từng ô khai
   ở Cấu Hình → Phiếu lương (mặc định 3 ô: người nhận, người lập biểu, giám đốc). */
.payslip-signatures {
  display: flex;
  justify-content: space-around;
  gap: 16px;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px dashed #cbd5e1;
  text-align: center;
}

.payslip-signature { flex: 1; font-size: 13px; }
.payslip-signature strong { display: block; }
.payslip-signature small { color: #64748b; font-size: 11px; }
.payslip-signature-space { display: block; height: 64px; }

/* Thanh chọn bản in. Nằm NGOÀI .payslip-container và mang .no-print nên không đi vào bản in. */
.payslip-audience-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--slate-200);
  background: var(--slate-50);
}

.payslip-audience-label { font-size: 13px; font-weight: 600; color: var(--slate-700); }

.payslip-audience-switch button {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--slate-600);
  cursor: pointer;
}

.payslip-audience-switch button.is-active {
  border-color: var(--brand-500);
  background: var(--brand-50);
  color: var(--brand-700);
}

.payslip-audience-hint { flex-basis: 100%; font-size: 12px; color: var(--slate-500); }

/* Danh sách người phụ thuộc trong hồ sơ nhân sự (mẫu 07/ĐK-NPT-TNCN) */
.dependent-list { display: grid; gap: 12px; margin-bottom: 12px; }

.dependent-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--slate-50);
}

.dependent-row-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.dependent-row-fields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-600);
}

@media (max-width: 900px) {
  .dependent-row-fields { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .dependent-row-fields { grid-template-columns: 1fr; }
}

/* Danh sách ô ký ở màn Cấu Hình → Phiếu lương */
.payslip-signature-config { display: grid; gap: 8px; margin-bottom: 12px; }

.payslip-signature-config-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.payslip-profile-warning {
  margin-bottom: 20px;
  padding: 12px 14px;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  background: var(--warning-50);
  color: #92400e;
  font-size: 12px;
}

.form-help {
  margin: 4px 0 0;
  color: var(--slate-500);
  font-size: 12px;
  line-height: 1.45;
}

.allowance-legal-note { min-width: 300px; line-height: 1.45; }
.allowance-tax-note { margin-top: 6px; color: var(--slate-500); font-size: 12px; }

.holiday-setting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 20px;
  padding: 16px;
  border: 1px dashed var(--slate-300);
  border-radius: var(--radius-md);
  background: var(--slate-50);
}
.holiday-setting h4 { margin: 0 0 2px; color: var(--slate-800); font-size: 14px; }
.holiday-setting-control { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.holiday-setting-control .form-control { width: 165px; }
.holiday-setting-control .btn { margin: 0; }
.holiday-chip-list { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.holiday-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 10px;
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  color: var(--brand-700);
  background: white;
  font-size: 12px;
  font-weight: 600;
}
.holiday-chip button { border: 0; background: transparent; color: var(--slate-500); cursor: pointer; font-size: 16px; line-height: 1; }

.allowance-code {
  display: inline-flex;
  padding: 5px 8px;
  border: 1px solid var(--brand-100);
  border-radius: 6px;
  color: var(--brand-700);
  background: var(--brand-50);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* PAYROLL RULE WORKFLOW */
.rule-workflow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  background: white;
}

.rule-workflow > div { display: grid; grid-template-columns: 28px 1fr; gap: 0 9px; align-items: center; }
.rule-workflow > div > span {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: white;
  background: var(--brand-600);
  font-size: 12px;
  font-weight: 800;
}
.rule-workflow strong { color: var(--slate-800); font-size: 13px; }
.rule-workflow small { color: var(--slate-500); font-size: 11px; }
.rule-workflow > svg { width: 16px; color: var(--slate-400); }

.rule-config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.rule-config-card {
  margin-bottom: 20px;
  padding: 24px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-xl);
  background: white;
  box-shadow: var(--shadow-sm);
}
.rule-config-grid .rule-config-card { margin-bottom: 0; }
.rule-config-card-wide { width: 100%; }
.rule-card-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.rule-card-heading-main { display: flex; align-items: flex-start; gap: 12px; }
.rule-card-heading-split { align-items: center; justify-content: space-between; gap: 16px; }
.rule-card-heading h2 { margin: 0 0 4px; color: var(--slate-900); font-size: 16px; line-height: 1.35; }
.rule-card-heading p { margin: 0; color: var(--slate-500); font-size: 13px; line-height: 1.5; }
.rule-step-number {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--brand-700);
  background: var(--brand-50);
  font-size: 12px;
  font-weight: 800;
}
.rule-field + .rule-field { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--slate-100); }
.rule-field > label, .holiday-setting label { display: block; margin-bottom: 7px; color: var(--slate-800); font-size: 13px; font-weight: 700; }
.rule-field > small { display: block; margin-top: 7px; color: var(--slate-500); font-size: 12px; line-height: 1.5; }
.rule-input-with-unit { display: flex; align-items: center; gap: 9px; }
.rule-input-with-unit > span { color: var(--slate-600); font-size: 13px; font-weight: 600; }
.work-calendar-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.work-calendar-summary > div { display: grid; grid-template-columns: 28px 1fr; gap: 0 8px; align-items: center; padding: 12px; border-radius: 10px; background: var(--slate-50); }
.work-calendar-summary svg { grid-row: span 2; width: 18px; color: var(--brand-600); }
.work-calendar-summary span { color: var(--slate-600); font-size: 12px; }
.work-calendar-summary strong { color: var(--slate-800); font-size: 13px; }
.rule-config-card .holiday-setting { margin-top: 16px; padding: 14px; }
.holiday-setting label { margin-bottom: 2px; }
.holiday-setting .text-muted { margin: 0; font-size: 12px; }

.attendance-formula { display: flex; align-items: flex-start; gap: 9px; margin: -4px 0 16px; padding: 11px 12px; border-radius: 9px; color: var(--slate-600); background: #f8fafc; font-size: 12px; line-height: 1.5; }
.attendance-formula svg { flex: 0 0 auto; width: 16px; color: var(--brand-600); }
.attendance-tier-list { display: flex; flex-direction: column; gap: 10px; }
.attendance-tier-row { display: grid; grid-template-columns: 70px minmax(180px, 1fr) 24px minmax(180px, 1fr) 38px; align-items: end; gap: 12px; padding: 14px; border: 1px solid var(--slate-200); border-radius: 10px; background: #fff; }
.attendance-tier-index { align-self: center; color: var(--slate-500); font-size: 12px; font-weight: 700; }
.attendance-tier-field > span { display: block; margin-bottom: 6px; color: var(--slate-600); font-size: 12px; font-weight: 600; }
.attendance-tier-field > div { display: flex; align-items: center; gap: 7px; }
.attendance-tier-field .table-input { width: 100px; height: 38px; padding: 7px 10px; border-radius: 8px; }
.attendance-tier-field em { color: var(--slate-600); font-size: 12px; font-style: normal; white-space: nowrap; }
.attendance-tier-arrow { align-self: center; width: 17px; color: var(--slate-400); }
.attendance-tier-remove { width: 38px; height: 38px; padding: 0; }
.penalty-offset-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.penalty-offset-option-card { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 10px 12px; border: 1px solid var(--slate-200); border-radius: 9px; color: var(--slate-700); cursor: pointer; font-size: 13px; }
.penalty-offset-option-card:hover { border-color: var(--brand-300); background: var(--brand-50); }
.penalty-offset-option-card input { width: 16px; height: 16px; accent-color: var(--brand-600); }

@media (max-width: 860px) {
  :root { --sidebar-width: 220px; }

  .sidebar-header { padding: 0 16px; }
  .nav-menu { padding: 20px 12px; }
  .content-body { padding: 24px; }
  .rule-setting-grid, .rule-config-grid { grid-template-columns: 1fr; }
  .department-policy-callout { align-items: flex-start; flex-wrap: wrap; }
  .department-policy-action { margin-left: 52px; }
  .attendance-tier-row { grid-template-columns: 62px minmax(160px, 1fr) 18px minmax(160px, 1fr) 38px; gap: 8px; }
  .penalty-offset-options { grid-template-columns: 1fr; }
  .workflow-dashboard-summary { grid-template-columns: repeat(3, minmax(170px, 1fr)); }
  .workflow-guide-card { grid-template-columns: 42px minmax(0, 1fr); }
  .workflow-guide-card .btn { grid-column: 2; justify-self: start; }
}

@media (max-width: 640px) {
  .sidebar { position: static; width: 100%; min-height: auto; }
  .app-container { display: block; }
  .main-content { margin-left: 0; }
  .sidebar-header { display: none; }
  .nav-menu { flex-direction: row; flex-wrap: wrap; overflow: visible; }
  .nav-group-title, .sidebar-footer { display: none; }
  .nav-item { flex: 1 1 150px; }
  .top-header { display: none; }
  .content-body { padding: 18px; }
  .page-header { gap: 16px; flex-direction: column; }
  .page-header .header-actions { width: 100%; flex-wrap: wrap; gap: 10px; }
  .rule-foundation-panel { padding: 20px; }
  .department-policy-action { width: 100%; margin-left: 0; }
  .rule-workflow { grid-template-columns: 1fr; gap: 10px; }
  .rule-workflow > svg { display: none; }
  .rule-config-card { padding: 18px; }
  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .rule-card-heading-split { align-items: flex-start; flex-direction: column; }
  .work-calendar-summary { grid-template-columns: 1fr; }
  .holiday-setting-control { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .holiday-setting-control .form-control { flex: 1 1 150px; }
  .attendance-tier-row { grid-template-columns: 1fr; gap: 10px; }
  .attendance-tier-index, .attendance-tier-arrow { display: none; }
  .attendance-tier-remove { justify-self: end; margin-top: -48px; }
  .employee-modal-dialog { max-height: 96vh; border-radius: 12px; }
  .employee-form-section { padding: 14px; }
  .employee-form-section .form-row { grid-template-columns: 1fr; gap: 0; }
  .payroll-workflow-overview { align-items: flex-start; flex-direction: column; }
  .workflow-dashboard-summary { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
  .workflow-guide-note, .workflow-context-banner { align-items: flex-start; flex-wrap: wrap; }
  .workflow-context-banner .department-policy-action { margin-left: 0; }
  .workflow-guide-card { grid-template-columns: 1fr; gap: 12px; padding: 18px; }
  .workflow-guide-card .btn { grid-column: auto; width: 100%; justify-content: center; }
}

@media print {
  body * { visibility: hidden; }
  .sidebar, .top-header, .page-header, .modal-header, .modal-footer { display: none !important; }
  #payslipModal, #payslipModal * { visibility: visible; }
  #payslipModal { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: white; }
  .modal-dialog { max-width: 100% !important; width: 100% !important; box-shadow: none !important; border: none !important; margin: 0; padding: 0; }
  .payslip-container { padding: 0; }
}

.evaluation-note {
  min-height: 94px;
  resize: vertical;
}

.sales-commission-card {
  display: grid;
  gap: 8px;
  min-width: 310px;
  padding: 10px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
}

.sales-commission-card label {
  display: grid;
  gap: 5px;
  color: var(--slate-700);
  font-size: 12px;
  font-weight: 600;
}

.sales-commission-card small {
  color: var(--slate-600);
  line-height: 1.45;
}

.evaluation-confirm {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--slate-700);
}

.evaluation-policy-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--slate-50);
}

.evaluation-policy-toggle span {
  display: grid;
  gap: 3px;
}

.evaluation-policy-toggle small {
  color: var(--slate-500);
}

@media (max-width: 768px) {
  .policy-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .policy-filter-field {
    width: 100%;
  }

  .policy-workspace-backdrop {
    padding: 0;
  }

  .policy-workspace-dialog {
    height: 100dvh;
    border-radius: 0;
  }

  .policy-workspace-header {
    padding: 14px 16px;
    border-radius: 0;
  }

  .policy-workspace-header p,
  .policy-workspace-header-actions .btn-secondary,
  .policy-workspace-footer > span {
    display: none;
  }

  .policy-workspace-header .modal-title {
    font-size: 17px;
  }

  .policy-workspace-body {
    display: block;
    overflow-y: auto;
  }

  .policy-workspace-main,
  .policy-live-preview {
    padding: 14px;
    overflow: visible;
  }

  .policy-live-preview {
    border-top: 1px solid var(--slate-200);
    border-left: 0;
  }

  .policy-editor-section {
    padding: 16px;
  }
  .policy-editor-section .form-row { grid-template-columns: 1fr; gap: 0; }

  .policy-allowance-grid {
    grid-template-columns: 1fr;
  }

  .policy-allowance-card {
    grid-template-columns: 1fr;
  }

  .policy-workspace-footer {
    padding: 10px 14px;
    border-radius: 0;
    justify-content: flex-end;
  }

}

/* =========================================================================
   DEC-027: Bảng lương tháng gộp phần đánh giá vào thẳng từng dòng.
   DEC-030: chấm điểm chuyển sang modal riêng dạng bảng (xem .evaluation-table
   bên dưới) thay vì bung một dòng lớn trong bảng lương — giữ bảng chính gọn,
   và màn chấm điểm trình bày kiểu kế toán quen thuộc (1 dòng/khoản).
   Nguyên tắc: màn hình co theo NGOẠI LỆ, không co theo số nhân viên. Tháng
   bình thường kế toán chỉ thấy một bảng gọn và một nút xác nhận hàng loạt.
   ========================================================================= */

/* --- Bảng cuộn trong khung, tiêu đề cột và dòng tổng luôn dính (DEC-031) ---
   Cuộn tới người thứ 25 vẫn phải biết cột nào là Thưởng, cột nào là Phạt; và
   tổng quỹ lương là số kế toán báo cáo nên không được trôi khỏi màn hình. */
.payroll-table-scroll {
  max-height: calc(100vh - 240px);
  overflow: auto;
}

.payroll-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.payroll-table-foot td {
  position: sticky;
  bottom: 0;
  z-index: 2;
}

/* Dòng gọn hơn bảng thường: nhìn được nhiều người cùng lúc để so sánh */
.payroll-table td { padding: 8px 14px; }
.payroll-table th { padding: 9px 14px; }

/* Cột nhân viên không được co lại tới mức tên phải xuống hàng — đó là thứ đẩy chiều cao
   dòng lên gấp ba. Thà cuộn ngang trên màn hẹp còn hơn mỗi người chiếm 181px. */
.payroll-table .col-emp { min-width: 230px; }

.payroll-table .emp-name {
  font-weight: 600;
  color: var(--slate-900);
  white-space: nowrap;
  line-height: 1.35;
}

.payroll-table .emp-meta {
  margin-top: 1px;
  font-size: 11px;
  color: var(--slate-500);
  white-space: nowrap;
  line-height: 1.3;
  cursor: default;
}

.payroll-foot-filter {
  font-weight: 500;
  color: var(--brand-700);
}

/* --- Ô trạng thái đánh giá trên dòng --- */
.col-eval { text-align: center; }

.eval-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.eval-pill.is-ok { background: var(--success-50); color: var(--success-600); }
.eval-pill.is-warn { background: var(--warning-50); color: var(--warning-600); }
.eval-pill.is-wait { background: var(--slate-100); color: var(--slate-500); }
.eval-pill.is-none { background: transparent; color: var(--slate-400); font-weight: 500; }

.eval-sub {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--slate-500);
}

/* --- Modal Chấm KPI (DEC-030): bảng gọn 1 dòng/khoản thay cho dòng bung cũ --- */

/* Thẻ điểm khoản Hiệu quả (DEC-032): mục nào bị hạ điểm phải nổi lên ngay, vì đó là chỗ duy
   nhất kế toán cần nhìn — mặc định mọi mục đều đủ điểm. */
.evaluation-table tr.is-below td { background: #fffbeb; }
.evaluation-table tr.is-below td strong { color: #b45309; }

.evaluation-table td small.text-muted {
  display: block;
  font-weight: 400;
  font-size: 11px;
  margin-top: 2px;
}

.evaluation-table th.eval-score-cell,
.evaluation-table td.eval-score-cell {
  text-align: center;
  width: 68px;
}

.evaluation-table th.eval-score-cell small {
  display: block;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
  margin-top: 2px;
  white-space: normal;
}

.eval-score-chip-table {
  width: 100%;
  min-width: 46px;
  padding: 6px 4px;
  border-radius: var(--radius-sm);
  text-align: center;
}

.evaluation-sales-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--slate-50);
}

.evaluation-sales-row .payroll-detail-field { flex: 1; min-width: 200px; }

.evaluation-confirm-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.evaluation-confirm-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.evaluation-confirm-row .payroll-detail-field { flex: 1; min-width: 200px; }

.payroll-detail-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.payroll-detail-field > span {
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-600);
}

.payroll-detail-field em {
  font-style: normal;
  font-weight: 500;
  color: var(--slate-400);
}

.is-required-mark { color: var(--warning-600); }

.payroll-detail-field textarea {
  min-height: 68px;
  resize: vertical;
}

.form-control.is-required {
  border-color: var(--warning-600);
  background: var(--warning-50);
}

.evaluation-score-chip:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* Phân rã phụ cấp chỉ đọc — chỗ duy nhất tiền ăn/chuyên cần xuất hiện */
.payroll-detail-breakdown {
  list-style: none;
  margin: 4px 0 0;
  padding: 10px 12px;
  border: 1px dashed var(--slate-300);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
}

.payroll-detail-breakdown li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  padding: 3px 0;
  color: var(--slate-600);
}

.payroll-detail-breakdown li b { color: var(--slate-800); }
.payroll-detail-breakdown li em { font-style: normal; color: var(--slate-400); }

/* --- Cột tiền và dòng tổng --- */
.col-net { color: var(--brand-700); font-weight: 700; font-size: 15px; }
.col-cost { color: var(--success-600); font-weight: 700; font-size: 15px; }
.col-cost.is-over { color: var(--danger-600); }

.payroll-table-foot td {
  padding: 14px 16px;
  border-top: 2px solid var(--slate-300);
  background: var(--slate-50);
  font-weight: 700;
  color: var(--slate-700);
}

.workdays-warning {
  margin-top: 3px;
  font-size: 11px;
  color: var(--danger-600);
}

.table-hint-ok { margin-top: 2px; font-size: 10px; color: var(--success-600); }
.table-hint-bad { margin-top: 2px; font-size: 10px; }

/* --- Nút biểu tượng ở cột thao tác --- */
.col-actions { text-align: right; white-space: nowrap; }

.btn-icon {
  padding: 6px;
  margin-left: 4px;
}

.btn-icon.is-active {
  border-color: var(--brand-600);
  color: var(--brand-700);
  background: var(--brand-50);
}

@media (max-width: 900px) {
  .payroll-toolbar-group { width: 100%; }
  .payroll-search { flex: 1; width: auto; min-width: 140px; }
  .payroll-statusbar-action { width: 100%; }
  .payroll-statusbar-action .form-control { flex: 1; width: auto; }
  /* Màn nhỏ đã ít chỗ, để bảng cuộn theo cả trang thay vì nhốt trong khung thấp */
  .payroll-table-scroll { max-height: none; }
}

/* ==========================================================================
   ONBOARDING WIZARD BANNER
   ========================================================================== */
.onboarding-banner {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
  color: #ffffff;
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: 0 10px 25px -5px rgba(67, 56, 202, 0.3);
}

.onboarding-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.onboarding-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.onboarding-close-btn {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #ffffff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.onboarding-close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.onboarding-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.onboarding-step-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.onboarding-step-card:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.onboarding-step-card.active {
  background: #ffffff;
  color: var(--slate-900);
  border-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.onboarding-step-card.active .step-badge {
  background: var(--brand-600);
  color: #ffffff;
}

.onboarding-step-card.active .step-desc {
  color: var(--slate-600);
}

.step-badge {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.step-content {
  flex: 1;
  min-width: 0;
}

.step-title {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
}

.step-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.step-arrow {
  width: 18px;
  height: 18px;
  opacity: 0.8;
}

/* ==========================================================================
   UNIFIED SETTINGS TABS
   ========================================================================== */
/* DEC-034 đợt 2 từng gộp 3 tab con thành khối đọc liền mạch trên một màn. Đợt 3 thêm khối thứ 4
   (Phụ Cấp Riêng Phòng Ban) làm một lần cuộn quá dài — người dùng phản hồi trực tiếp, đợt 3b quay
   lại tab. */
.settings-tabs-header {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid var(--slate-200);
  margin-bottom: 24px;
  overflow-x: auto;
}

.settings-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: none;
  background: transparent;
  color: var(--slate-600);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.settings-tab-btn:hover {
  color: var(--brand-600);
}

.settings-tab-btn.active {
  color: var(--brand-600);
  border-bottom-color: var(--brand-600);
}

.settings-tab-content {
  display: none;
}

.settings-tab-content.active {
  display: block;
}

/* Bảng mốc chuyên cần / đúng giờ. Cột đầu là câu diễn giải bằng lời để kế toán đọc được ngay
   "vắng 2 ngày còn 50%", không phải tự suy từ hai con số. */
.tier-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tier-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px 132px 34px;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--slate-100);
}

.tier-range {
  color: var(--slate-800);
  font-size: 13px;
  font-weight: 600;
}

.tier-field {
  display: flex;
  align-items: center;
  gap: 7px;
}

.tier-field > span {
  flex: 0 0 auto;
  color: var(--slate-500);
  font-size: 12px;
}

.tier-field input {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 6px 9px;
  border: 1px solid var(--slate-300);
  border-radius: 8px;
  background: white;
  color: var(--slate-900);
  font: inherit;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.tier-field input:disabled {
  background: var(--slate-50);
  color: var(--slate-400);
}

.tier-field em {
  flex: 0 0 auto;
  color: var(--slate-500);
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

.compact-rule-note.is-warn {
  background: #fffbeb;
  color: #92400e;
}

.compact-rule-note.is-warn svg {
  color: #b45309;
}

@media (max-width: 720px) {
  .tier-row {
    grid-template-columns: minmax(0, 1fr) 34px;
    row-gap: 8px;
  }
  .tier-range { grid-column: 1 / -1; }
  .tier-field { grid-column: 1; }
  .tier-row > button { grid-row: 2 / span 2; grid-column: 2; }
}

.settings-sub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.settings-sub-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--slate-900);
}

/* ==========================================================================
   PRINT-READY STYLING (@media print)
   ========================================================================== */
@media print {
  body * {
    visibility: hidden;
  }

  .modal-backdrop#payslipModal,
  .modal-backdrop#payslipModal * {
    visibility: visible;
  }

  .modal-backdrop#payslipModal {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    background: transparent !important;
    backdrop-filter: none !important;
  }

  .modal-dialog {
    max-width: 100% !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .modal-header,
  .modal-footer,
  .no-print,
  .no-print * {
    display: none !important;
    visibility: hidden !important;
  }

  .payslip-container {
    padding: 0 !important;
    background: #ffffff !important;
  }

  .payslip-signatures {
    page-break-inside: avoid;
  }
}