/* =========================================================
   Design tokens — làm lại theo mẫu: tông xanh dương sáng, bo tròn
   dạng viên thuốc (pill) cho nút/ô nhập/thẻ trạng thái, bóng đổ mềm.
   ========================================================= */
:root {
  /* Nền chung */
  --bg: #F4F7FC;
  --panel-bg: #FFFFFF;
  --panel-bg-alt: #F8FAFD;
  --row-hover: #F6FAFF;

  /* Sidebar — xanh dương đậm, cùng tông với accent thay vì navy trung tính */
  --sidebar-bg: #0E2A4D;
  --sidebar-bg-hover: #163E6E;
  --text-on-dark: #EAF1FB;
  --text-on-dark-muted: #9FB4D6;

  /* Chữ trên nền sáng */
  --text: #16283E;
  --text-muted: #62748B;

  /* Viền */
  --border: #E1E9F5;
  --border-strong: #C7D5E8;

  /* Accent — xanh dương sáng theo mẫu; nút/chip nền accent luôn dùng chữ trắng */
  --accent: #1A5FB0;
  --accent-hover: #0E4A92;
  --accent-soft: #E6EDFC;

  --amber: #A8681A;
  --amber-hover: #8C5614;
  --amber-soft: #FFF1D6;

  --red: #AC2C2C;
  --red-hover: #8F2323;
  --red-soft: #FFE8E8;

  --green: #0F6E3F;
  --green-hover: #0C5A33;
  --green-soft: #E3F5E9;

  --gray-soft: #EEF3FA;
  --gray-text: #62748B;

  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-pill: 999px;
  --shadow-card: 0 8px 22px rgba(15, 40, 80, 0.07);
  --shadow-card-hover: 0 14px 30px rgba(15, 40, 80, 0.13);

  --font-body: 'Public Sans', -apple-system, sans-serif;
  --font-head: 'IBM Plex Sans Condensed', -apple-system, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

* { box-sizing: border-box; }

/* Đảm bảo thuộc tính HTML `hidden` luôn thắng, kể cả khi một class khác
   trên cùng phần tử có set `display` (vd .panel { display: flex }). */
[hidden] {
  display: none !important;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
}

/* =========================================================
   Layout
   ========================================================= */
.app {
  min-height: 100vh;
}

/* Sidebar cố định (position: fixed) — mặc định thu gọn chỉ hiện icon,
   khi rê chuột vào thì MỞ RỘNG đè lên trên nội dung (không đẩy layout
   dịch chuyển, tránh giật/nhảy trang). .main luôn chừa đúng khoảng
   trống bằng bề rộng lúc thu gọn (xem .main bên dưới). */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 64px;
  z-index: 20;
  overflow: hidden;
  background: var(--sidebar-bg);
  color: var(--text-on-dark);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 16px 8px;
  transition: width 0.16s ease, box-shadow 0.16s ease;
}

.sidebar:hover {
  width: 216px;
  box-shadow: 8px 0 32px rgba(15, 23, 42, 0.28);
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 4px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 12px;
  white-space: nowrap;
}

.sidebar__brand-mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar__brand-name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12.5px;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.sidebar:hover .sidebar__brand-name {
  opacity: 1;
  transition-delay: 0.05s;
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 11px;
  border-radius: var(--radius-sm);
  color: var(--text-on-dark-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}

.sidebar__icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar__label {
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.sidebar:hover .sidebar__label {
  opacity: 1;
  transition-delay: 0.05s;
}

.sidebar__link:hover {
  background: var(--sidebar-bg-hover);
  color: var(--text-on-dark);
}

.sidebar__link--active {
  background: var(--accent);
  color: #fff;
}

.sidebar__link--disabled {
  cursor: default;
  opacity: 0.45;
}

.sidebar__link--disabled:hover {
  background: transparent;
  color: var(--text-on-dark-muted);
}

.sidebar__soon {
  margin-left: auto;
  font-size: 9px;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.12s ease;
  white-space: nowrap;
}

.sidebar:hover .sidebar__soon {
  opacity: 1;
  transition-delay: 0.05s;
}

.main {
  margin-left: 64px; /* đúng bằng bề rộng sidebar lúc thu gọn — sidebar mở
                         rộng sẽ ĐÈ LÊN TRÊN phần này, không đẩy nó dịch */
  padding: 26px 34px 40px;
  min-width: 0;
}

/* =========================================================
   Top bar
   ========================================================= */
.topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 12px;
}

.topbar__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  margin: 0;
}

.topbar__subtitle {
  display: none;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dashboard-search input {
  font-family: var(--font-body);
  font-size: 12px;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 30px;
  background: var(--panel-bg);
  color: var(--text);
  width: 220px;
}

.dashboard-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel-bg);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}

.icon-btn svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn:hover { transform: translateY(-2px); background: var(--gray-soft); }

.icon-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.icon-btn--primary:hover { background: var(--accent-hover); }

/* Menu thả xuống Excel */
.excel-menu {
  position: relative;
}

.excel-menu__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 45;
  width: 220px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
  padding: 8px 0;
}

.excel-menu__group {
  padding: 4px 0 8px;
}

.excel-menu__group + .excel-menu__group {
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.excel-menu__group-title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 10px;
  color: var(--text-muted);
  margin: 0;
  padding: 4px 14px 4px;
}

.excel-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 7px 14px;
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--text);
  cursor: pointer;
}

.excel-menu__item:hover {
  background: var(--gray-soft);
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(26, 95, 176, 0.45);
}
.btn--primary:hover { background: var(--accent-hover); transform: translateY(-1px); }

.btn--ghost {
  background: var(--panel-bg);
  border-color: var(--border);
  color: var(--text);
  box-shadow: 0 2px 6px rgba(15, 40, 80, 0.03);
}
.btn--ghost:hover { background: var(--gray-soft); border-color: var(--border-strong); }

.btn--danger {
  background: var(--red);
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(172, 44, 44, 0.4);
}
.btn--danger:hover { background: var(--red-hover); }

.btn--text {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.btn--text:hover { color: var(--accent); background: var(--accent-soft); }

/* =========================================================
   Filters
   ========================================================= */
.filters {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.input {
  font-family: var(--font-body);
  font-size: 12px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--panel-bg);
  color: var(--text);
}

.input:focus, select:focus, input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.input--search {
  flex: 1;
  min-width: 220px;
  background: var(--gray-soft);
  border-color: var(--border);
}

/* Bỏ nút mũi tên tăng/giảm mặc định của trình duyệt trên ô số — các bảng
   nhập số liệu (vd Thưởng kỹ năng theo tháng) chỉ cần gõ số, không cần
   bấm tăng/giảm từng đơn vị. */
input[type="number"] {
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input--mono, input.input--mono { font-family: var(--font-mono); font-size: 11.5px; }

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
}
.filter-field > .input { min-width: 130px; }

/* =========================================================
   Table
   ========================================================= */
.table-wrap {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table thead th {
  text-align: left;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 11px;
  color: var(--text);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-bg-alt);
}

.table tbody td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--row-hover); }

.cell-code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.cell-name { font-weight: 600; }

/* Cột tiền/số trong bảng — canh phải, số đều cột cho dễ so sánh giữa các dòng */
.cell-num { text-align: right; font-variant-numeric: tabular-nums; }

.table__actions-head { width: 90px; }
.row-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.table__empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--text-muted);
  margin: 0;
}

/* Status tags */
.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}
.tag--dang_lam { background: var(--accent-soft); color: var(--accent-hover); }
.tag--thu_viec { background: var(--amber-soft); color: var(--amber); }
.tag--tam_nghi { background: var(--gray-soft); color: var(--gray-text); }
.tag--nghi_viec { background: var(--red-soft); color: var(--red); }

/* =========================================================
   Pagination
   ========================================================= */
.pagination {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 14px;
}

.page-btn {
  min-width: 32px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--panel-bg);
  color: var(--text);
  font-size: 11.5px;
  cursor: pointer;
}
.page-btn:hover { border-color: var(--border-strong); }
.page-btn--active { background: var(--accent); color: #fff; border-color: var(--accent); }
.page-btn:disabled { opacity: 0.4; cursor: default; }

/* =========================================================
   Slide-over panel (Add / Edit)
   ========================================================= */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 30, 55, 0.32);
  backdrop-filter: blur(2px);
  z-index: 30;
}

.panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 640px;
  max-width: 94vw;
  background: var(--panel-bg);
  z-index: 31;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 28px rgba(15, 23, 42, 0.14);
  animation: slide-in 0.18s ease-out;
}

@keyframes slide-in {
  from { transform: translateX(24px); opacity: 0.6; }
  to { transform: translateX(0); opacity: 1; }
}

.panel form {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}

.panel__header h2 {
  font-family: var(--font-head);
  font-size: 16px;
  margin: 0;
}

.panel__close {
  background: none;
  border: none;
  font-size: 13.5px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
}
.panel__close:hover { color: var(--text); }

.panel__body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1;
}

.panel__section-label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 11px;
  color: var(--accent-hover);
  margin: 20px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.panel__section-label:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.field-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  font-size: 11px;
  color: var(--text-muted);
}

.field--grow { flex: 1 1 100%; }

.field--checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.field input[type="checkbox"] {
  width: auto;
  padding: 0;
  border: none;
  background: transparent;
  accent-color: var(--accent);
}

.field input, .field select {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-bg);
  width: 100%;
}

/* Cảnh báo giá trị sửa tay nằm ngoài khung Thang bảng lương — xem
   validateWageFieldAgainstScale() ở wageStandard.js. Không chặn lưu, chỉ
   cảnh báo bằng viền + chữ màu vàng. */
.field input.input--warning {
  border-color: var(--amber);
  background: var(--amber-soft);
}
.field-warning {
  font-size: 10px;
  line-height: 1.4;
  color: var(--amber);
}

.panel__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 22px;
  border-top: 1px solid var(--border);
}

/* =========================================================
   Dashboard
   ========================================================= */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.stat-card {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

.stat-card__body { min-width: 0; }

.stat-card__label {
  margin: 0 0 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.stat-card__value {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 23.5px;
  color: var(--text);
}

.stat-card__hint {
  margin: 6px 0 0;
  font-size: 10.5px;
  color: var(--text-muted);
}

.stat-card__icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-card__icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stat-card__icon--blue   { background: #E3F0FF; color: #1D5FD6; }
.stat-card__icon--green  { background: #E4F7EC; color: #1F9254; }
.stat-card__icon--red    { background: #FDE8E7; color: #C0392B; }
.stat-card__icon--purple { background: #F1E7FB; color: #7B3FBF; }
.stat-card__icon--teal   { background: #E1F6F6; color: #17828A; }
.stat-card__icon--orange { background: #FFEFE0; color: #C2620B; }
.stat-card__icon--amber  { background: #FFF3D6; color: #9C6B0A; }
.stat-card__icon--pink   { background: #FDE7F1; color: #B23678; }

/* =========================================================
   Trang Cài đặt — màn chính là lưới icon kiểu iPad, bấm vào mở
   từng mục (Bộ phận / Chức vụ / Ca làm việc / Nhóm...). Màu icon
   dùng lại đúng bảng màu .stat-card__icon--* ở trên.
   ========================================================= */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 24px 12px;
  max-width: 560px;
}

.settings-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--text);
}

.settings-tile__icon {
  width: 62px;
  height: 62px;
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.settings-tile:hover .settings-tile__icon {
  transform: translateY(-3px) scale(1.03);
  box-shadow: var(--shadow-card-hover);
}

.settings-tile__icon svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-tile__label {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}

.settings-section {
  max-width: 900px;
}

.dashboard-section-label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 4px 0 12px;
}

.chart-card {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  min-width: 0;
}

.chart-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.chart-card__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12.5px;
  margin: 0;
}

.chart-legend {
  display: flex;
  gap: 14px;
  font-size: 10.5px;
  color: var(--text-muted);
}

.chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chart-legend__swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  display: inline-block;
}

.chart-legend__swatch--hire { background: var(--green); }
.chart-legend__swatch--resign { background: var(--red); }
.chart-legend__swatch--total {
  background: var(--accent);
  border-radius: 50%;
}

.chart-svg-wrap { width: 100%; }
.chart-svg { width: 100%; height: auto; display: block; }

.chart-canvas-wrap {
  position: relative;
  width: 100%;
  height: 280px;
}

.chart-bar--hire { fill: var(--green-soft); stroke: var(--green); stroke-width: 1.2; }
.chart-bar--resign { fill: var(--red-soft); stroke: var(--red); stroke-width: 1.2; }
.chart-gridline { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3; }
.chart-baseline { stroke: var(--border-strong); stroke-width: 1; }

.chart-line-path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 5 4;
  stroke-linecap: round;
}

.chart-line-dot {
  fill: #fff;
  stroke: var(--accent);
  stroke-width: 2;
}

.chart-value {
  font-family: var(--font-body);
  font-size: 9px;
  fill: var(--text-muted);
  opacity: 0;
  transition: opacity 0.1s ease;
}

.chart-group:hover .chart-value { opacity: 1; }
.chart-group:hover .chart-bar { opacity: 0.85; }

.chart-axis-label {
  font-family: var(--font-body);
  font-size: 9px;
  fill: var(--text-muted);
}

.chart-empty {
  padding: 26px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 11.5px;
}

.chart-card--wide {
  margin-bottom: 20px;
}

/* Bảng "Nhân viên gần đây" trên Dashboard — cùng ngôn ngữ card với chart-card */
.table-card {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
}

.table-card__header {
  margin-bottom: 12px;
}

.table-card .table-wrap {
  border: none;
  box-shadow: none;
}

.employee-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.employee-cell__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11px;
}

.employee-cell__name { font-weight: 600; }
.employee-cell__code {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
}

.icon-action-btns {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.icon-action-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.icon-action-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-action-btn:hover { background: var(--gray-soft); color: var(--accent-hover); }

/* =========================================================
   Trang chi tiết nhân viên
   ========================================================= */
.detail-back {
  padding-left: 0;
  margin-bottom: 10px;
}

.detail-section {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  overflow: hidden;
}

.detail-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.detail-section__header h2 {
  font-family: var(--font-head);
  font-size: 14.5px;
  margin: 0;
}

.detail-section .table-wrap {
  border: none;
  border-radius: 0;
}

/* =========================================================
   Modal nhỏ (Bộ phận / Chức vụ / Người thân / Tài khoản)
   ========================================================= */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 41;
  width: 420px;
  max-width: 92vw;
  max-height: 90vh;
  background: var(--panel-bg);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -20px rgba(15, 40, 80, 0.28);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Header/footer dính lại khi phải cuộn dọc, để form dài không bị tràn lên
   trên/xuống dưới màn hình và luôn thấy nút Lưu/Hủy. */
.modal__header {
  position: sticky;
  top: 0;
  background: var(--panel-bg);
  z-index: 1;
}

.modal__footer {
  position: sticky;
  bottom: 0;
  background: var(--panel-bg);
  z-index: 1;
}

.modal--wide {
  width: 520px;
}

.modal--form-wide {
  width: 640px;
  max-width: 94vw;
}

.modal--timesheet {
  width: 98vw;
  max-width: 98vw;
  max-height: 95vh;
}

#modalOverlay { z-index: 40; }
#timesheetMonthModalOverlay { z-index: 40; }

/* ---------------------------------------------------------
   Modal "Nhóm & Nhân viên" — chọn dạng thẻ (tag), thay cho danh sách
   checkbox cũ. Thêm/Xóa áp dụng NGAY lên máy chủ, không có bước "Lưu"
   riêng để tránh lệch trạng thái giữa những gì hiện trên màn hình và
   những gì thực sự đã lưu (đã từng gặp lỗi kiểu này với cách cũ).
   --------------------------------------------------------- */
.group-mgmt-total {
  margin-left: auto;
  margin-right: 12px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.group-mgmt-cols {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 18px;
  margin-bottom: 16px;
}
@media (max-width: 640px) {
  .group-mgmt-cols { grid-template-columns: 1fr; }
}

.group-mgmt-label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.group-mgmt-label__hint {
  font-weight: 400;
  text-transform: none;
  font-size: 10.5px;
  letter-spacing: normal;
}

.group-mgmt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--gray-soft);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  min-height: 48px;
  align-content: flex-start;
  max-height: 260px;
  overflow-y: auto;
}

.group-mgmt-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 6px 14px 6px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
}
.group-mgmt-tag:hover { border-color: var(--accent); background: var(--accent-soft); }
.group-mgmt-tag.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 4px 10px -3px rgba(26, 95, 176, 0.45);
}
.group-mgmt-tag.is-selected {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.group-mgmt-tag__count {
  background: rgba(0,0,0,0.06);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 700;
}
.group-mgmt-tag.is-active .group-mgmt-tag__count { background: rgba(255,255,255,0.22); }
.group-mgmt-tag .fa-check,
.group-mgmt-tag__check { color: var(--accent); font-weight: 900; }

.group-mgmt-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 10px 10px 10px 18px;
  margin-bottom: 16px;
}
.group-mgmt-actions__info { font-size: 12px; font-weight: 600; color: var(--text); }
.group-mgmt-actions__buttons { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

.btn--danger-outline {
  background: transparent;
  border: 1.5px solid var(--red);
  color: var(--red);
}
.btn--danger-outline:hover { background: var(--red-soft); }

.group-mgmt-preview {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
}
.group-mgmt-preview__label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.group-mgmt-preview__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.group-mgmt-preview__chips:empty::after {
  content: 'Chưa có thành viên nào.';
  font-size: 11.5px;
  font-style: italic;
  color: var(--text-muted);
}
.group-mgmt-member-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--gray-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px 8px 5px 12px;
  font-size: 11.5px;
}
.group-mgmt-member-chip__remove {
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 700;
  padding: 0 3px;
}
.group-mgmt-member-chip__remove:hover { color: var(--red); }

.group-mgmt-status {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: right;
  min-height: 14px;
}

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

.modal__header h2 {
  font-family: var(--font-head);
  font-size: 15.5px;
  margin: 0;
}

.modal__body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}

.import-errors {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.import-errors li {
  padding: 8px 12px;
  font-size: 11px;
  color: var(--red);
  border-bottom: 1px solid var(--border);
}

.import-errors li:last-child {
  border-bottom: none;
}

.import-errors li strong {
  color: var(--text);
  margin-right: 4px;
}

/* =========================================================
   Chấm công — tabs & ghi chú thu gọn
   ========================================================= */
.attendance-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  border-bottom: none;
  flex-wrap: wrap;
}

/* Thanh chỉ dẫn luồng xử lý (Dữ liệu thô -> Xử lý -> Xem kết quả) — bấm
   vào từng bước nhảy thẳng tới tab tương ứng, giúp người mới dùng biết
   đúng thứ tự cần làm. */
.attendance-flow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.attendance-flow__step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted);
  transition: border-color 0.12s ease, color 0.12s ease;
}
.attendance-flow__step:hover { border-color: var(--accent); color: var(--text); }
.attendance-flow__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--gray-soft);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}
.attendance-flow__step.is-current .attendance-flow__num {
  background: var(--accent);
  color: #fff;
}
.attendance-flow__step.is-current { border-color: var(--accent); color: var(--text); font-weight: 600; }
.attendance-flow__arrow { color: var(--border); font-size: 16px; }

/* Header con bên trong mỗi tab con — bên trái là tiêu đề + gợi ý ngắn,
   bên phải là các nút hành động của ĐÚNG bước đó (đỡ dồn hết lên đầu
   trang như trước). */
.attendance-step-header {
  align-items: flex-start !important;
  flex-wrap: wrap;
  gap: 10px;
}
.attendance-step-header__hint {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--text-muted);
  max-width: 480px;
}
.attendance-step-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Nhãn "Đã chốt" dùng chung cho Chấm công/Bảo hiểm/Kỳ lương — khoá đã
   xong thì hiện thay cho nút khoá. */
.lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--gray-soft);
  font-size: 12.5px;
  color: var(--text-muted);
}

/* Thẻ chọn báo cáo ở tab "Xuất báo cáo" — 3 lựa chọn lớn, rõ ràng, dễ
   bấm hơn hẳn so với menu thả xuống nhỏ trước đây. */
.attendance-report-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  padding: 0 18px 18px;
}
.attendance-report-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.attendance-report-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
.attendance-report-card__icon { font-size: 26px; }
.attendance-report-card__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}
.attendance-report-card__desc {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

.attendance-tab {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  padding: 9px 18px;
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  color: var(--text);
  cursor: pointer;
  margin-bottom: 0;
  transition: background 0.12s ease, color 0.12s ease;
}
.attendance-tab:hover { background: var(--accent-soft); }
.attendance-tab.is-active {
  color: #fff;
  background: var(--accent);
  box-shadow: 0 4px 10px -3px rgba(26, 95, 176, 0.45);
}

.attendance-panel[hidden] { display: none; }

/* Cảnh báo dùng chung (vd: nhân viên đang làm nhưng chưa được xếp ca
   trong tháng chấm công đang xem) — cùng tông màu amber với cảnh báo
   "ngoài phạm vi thang bảng lương" ở Tiêu chuẩn lương. */
.warning-banner {
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid var(--amber);
  border-radius: var(--radius-sm);
  background: var(--amber-soft);
  font-size: 11px;
  line-height: 1.6;
  color: var(--amber-hover);
}
.warning-banner__title {
  margin: 0 0 4px;
  font-weight: 700;
}
.warning-banner__title::before { content: '⚠ '; }
.warning-banner__list {
  margin: 0;
  color: var(--text-muted);
}

.attendance-hint {
  margin: 12px 18px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-bg-alt);
}
.attendance-hint summary {
  cursor: pointer;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  list-style: none;
}
.attendance-hint summary::-webkit-details-marker { display: none; }
.attendance-hint summary::before { content: 'ⓘ  '; }
.attendance-hint[open] summary { border-bottom: 1px solid var(--border); }
.attendance-hint p {
  margin: 0;
  padding: 10px 12px 12px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* =========================================================
   Timesheet — bảng giờ công theo hệ số, mở rộng theo nhân viên
   ========================================================= */
.timesheet-scroll {
  overflow-x: auto;
  overflow-y: auto;
  /* Giới hạn chiều cao để luôn thấy được thanh cuộn ngang trong màn hình —
     trước đây container này cao theo hết số dòng, nên phải cuộn dọc hết
     trang mới thấy thanh cuộn ngang ở tít dưới cùng. */
  max-height: 65vh;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.timesheet-table tbody tr.row-clickable { cursor: pointer; }
.timesheet-table tbody tr.row-clickable:hover { background: var(--row-hover); }

.timesheet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  white-space: nowrap;
}

.timesheet-table th, .timesheet-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.timesheet-table thead th {
  background: var(--panel-bg-alt);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 10.5px;
  color: var(--text-muted);
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Cố định 2 cột đầu (Mã thẻ, Họ tên) khi cuộn ngang các bảng rộng nhiều
   cột — đánh dấu bằng class ở đúng <th>/<td> cần cố định, không dựa vào
   thứ tự cột vì mỗi bảng có số cột trước đó khác nhau (vd bảng Chấm công
   có thêm cột STT không cần cố định). */
.timesheet-table .col-sticky-1,
.timesheet-table .col-sticky-2,
.table .col-sticky-1,
.table .col-sticky-2 {
  position: sticky;
  z-index: 1;
  background: var(--panel-bg);
}
.timesheet-table thead th.col-sticky-1,
.timesheet-table thead th.col-sticky-2,
.table thead th.col-sticky-1,
.table thead th.col-sticky-2 {
  z-index: 3;
  background: var(--panel-bg-alt);
}
.timesheet-table .col-sticky-1,
.table .col-sticky-1 { left: 0; min-width: 85px; }
.timesheet-table .col-sticky-2,
.table .col-sticky-2 { left: 85px; min-width: 140px; }

.timesheet-row {
  cursor: pointer;
}
.timesheet-row:hover td {
  background: var(--row-hover);
}

.timesheet-name {
  font-weight: 600;
  color: var(--accent-hover);
}

.timesheet-alert {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 7px 2px 6px;
  border-radius: 20px;
  background: var(--red-soft);
  font-size: 10px;
  font-weight: 700;
  color: var(--red);
  vertical-align: middle;
}

.timesheet-alert-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}

.timesheet-detail-row td {
  padding: 0;
  background: var(--panel-bg-alt);
}

.timesheet-detail-scroll {
  overflow-x: auto;
  padding: 10px;
}

.timesheet-detail-table {
  border-collapse: collapse;
  font-size: 11px;
}

.timesheet-detail-table th, .timesheet-detail-table td {
  padding: 6px 9px;
  border: 1px solid var(--border);
  text-align: center;
  min-width: 42px;
}

.timesheet-band-label {
  text-align: left !important;
  font-weight: 600;
  white-space: nowrap;
  background: var(--panel-bg);
  position: sticky;
  left: 0;
}

.timesheet-band-total {
  background: var(--panel-bg);
  font-weight: 700;
}

.timesheet-sunday {
  background: var(--amber-soft);
}

.timesheet-abnormal {
  background: var(--red-soft) !important;
  color: var(--red);
  font-weight: 700;
}

/* Đã bù công xong (từng bất thường, đã sửa và xác nhận) — hiện xanh
   thay vì đỏ, vẫn bấm được để sửa lại nếu cần. */
.timesheet-resolved {
  background: var(--green-soft) !important;
  color: var(--green);
  font-weight: 700;
}

/* Đã chốt công — khóa hẳn, không bấm sửa được nữa (chỉ mở khóa tháng
   mới sửa lại), hiện icon khóa nhỏ để dễ nhận biết ngay trên bảng. */
.timesheet-locked {
  background: var(--gray-soft) !important;
  color: var(--text-muted);
  cursor: not-allowed;
  position: relative;
}
.timesheet-lock-icon {
  font-size: 9px;
  margin-left: 3px;
  opacity: 0.75;
}

.timesheet-clickable {
  cursor: pointer;
}
.timesheet-clickable:hover {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

/* Đi muộn (đã trừ sinh lý) — viền cam dưới ô, tách biệt với nền đỏ/xanh
   của abnormal/resolved ở trên (1 ngày có thể vừa đi muộn NHẸ trong
   phạm vi ân hạn — không bị đánh dấu bất thường — vừa cần thấy rõ có đi
   muộn, nên dùng viền thay vì nền để không đè lên 2 màu kia). */
.timesheet-late {
  box-shadow: inset 0 -3px 0 0 #f59e0b;
}

/* Ký hiệu gọn "8PN"/"4PN"/"30SL"... hiện trong ô ngày của bảng chi tiết
   chấm công — cho biết ngay hôm đó có nghỉ phép năm/nghỉ sinh lý mà
   không cần bấm vào xem. */
.timesheet-leave-badge {
  display: block;
  margin-top: 1px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
.timesheet-abnormal .timesheet-leave-badge,
.timesheet-resolved .timesheet-leave-badge {
  color: inherit;
}

/* =========================================================
   Trang Xếp ca — cột chọn nhân viên + lịch tháng dạng ô vuông
   ========================================================= */
.schedule-layout {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.schedule-side {
  width: 300px;
  flex-shrink: 0;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 26px;
}

.schedule-side__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 11px;
}

.schedule-side__count {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 9.5px;
  color: var(--accent-hover);
}

.schedule-employee-list {
  max-height: 560px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Cây nhóm ở cột trái trang Xếp ca — tick vào nhóm chọn/bỏ chọn cả nhóm,
   nhân viên chưa có nhóm gom vào mục "Chưa có nhóm" ở cuối. */
.schedule-tree__group {
  border-bottom: 1px solid var(--border);
}
.schedule-tree__group:last-child { border-bottom: none; }

.schedule-tree__group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: var(--panel-bg-alt);
}

.schedule-tree__toggle {
  width: 14px;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  font-size: 9px;
  color: var(--text-muted);
  cursor: pointer;
}

.schedule-tree__group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
  cursor: pointer;
}

.schedule-tree__group-label input[type="checkbox"] {
  width: auto;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.schedule-tree__group-name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-tree__group-count {
  flex-shrink: 0;
  font-size: 9px;
  color: var(--text-muted);
}

.schedule-tree__member {
  padding-left: 30px;
}

/* Chữ ở cây nhân viên bên trái trang Xếp ca nhỏ hơn bản dùng chung
   (.assign-employee-item) — chỉ áp dụng trong .schedule-side, không ảnh
   hưởng modal "Thành viên nhóm" ở Cài đặt vì đó dùng chung class này.
   Specificity cao hơn .schedule-tree__member nên phải tự đặt lại luôn
   padding-left 30px ở đây (không để .schedule-tree__member lo phần đó nữa). */
.schedule-side .assign-employee-item {
  padding: 6px 10px 6px 30px;
  font-size: 10.5px;
  align-items: flex-start;
}

.schedule-side .assign-employee-name {
  flex: 1;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}

.schedule-side .assign-employee-meta {
  font-size: 9px;
  margin-top: 2px;
  align-self: flex-start;
}

.schedule-main {
  flex: 1;
  min-width: 0;
}

.schedule-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.schedule-month-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.schedule-month-nav .icon-btn {
  width: 32px;
  height: 32px;
}

.schedule-month-label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13.5px;
  min-width: 140px;
  text-align: center;
  text-transform: capitalize;
}

.schedule-calendar {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.schedule-calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--panel-bg-alt);
  border-bottom: 1px solid var(--border);
}

.schedule-calendar__weekdays span {
  padding: 6px 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 9.5px;
  color: var(--text-muted);
  text-align: center;
}

.schedule-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.schedule-day {
  min-height: 58px;
  padding: 4px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background 0.1s ease;
}

.schedule-calendar__grid .schedule-day:nth-child(7n) { border-right: none; }

.schedule-day:hover { background: var(--row-hover); }

.schedule-day--muted {
  background: var(--panel-bg-alt);
}
.schedule-day--muted .schedule-day__num { color: var(--border-strong); }

.schedule-day--today .schedule-day__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
}

.schedule-day--selected {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.schedule-day__num {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 10px;
}

.schedule-day__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding-top: 2px;
}

.schedule-day__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
}
.schedule-day__dot:hover { transform: scale(1.4); }

.schedule-action-bar {
  position: sticky;
  bottom: 16px;
  margin-top: 16px;
  background: var(--panel-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hover);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.schedule-action-bar span#scheduleSelectionLabel {
  font-weight: 600;
  margin-right: auto;
  font-size: 11.5px;
}

/* =========================================================
   Confirm dialog
   ========================================================= */
.confirm {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 301 !important;
  width: 380px;
  max-width: 90vw;
  background: var(--panel-bg);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.2);
}

/* z-index cao hơn cả overlay của Cổng nhân viên (portal.css dùng tới
   210 cho .profile-overlay/.feedback-overlay) — không thì hộp xác nhận
   (Hủy đơn, Đăng xuất...) sẽ bị chìm phía sau khi mở trong 1 overlay. */
#confirmOverlay { z-index: 300 !important; }

/* 2 modal này còn được dùng LẠI bên trong Cổng nhân viên (Sửa Email/SĐT,
   Đổi mật khẩu — xem myProfile.js/employeePortal.js), nơi các overlay
   (portal.css) đã dùng z-index tới 210 — phải cao hơn thì mới không bị
   chìm phía sau khi mở từ trong đó. */
#myContactModalOverlay, #myPasswordChangeOverlay { z-index: 220; }
#myContactModal, #myPasswordChangeModal { z-index: 221; }

.confirm__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14.5px;
  margin: 0 0 8px;
}

.confirm__body {
  color: var(--text-muted);
  font-size: 12px;
  margin: 0 0 18px;
  white-space: pre-line;
}

.confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* =========================================================
   Toast
   ========================================================= */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--text);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  z-index: 302;
  max-width: 340px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
}
.toast--error { background: var(--red); }

/* Khi đang mở 1 overlay của Cổng nhân viên (profile/feedback/xin nghỉ
   phép...) — các overlay này luôn phủ kín màn hình, nút hành động
   (Lưu/Duyệt/Từ chối...) nằm sát đáy — nâng toast lên cao hơn để KHÔNG
   đè lên đúng nút đó (vd nhập sai định dạng Email rồi bấm "Lưu thay
   đổi": trước đây toast "Email không hợp lệ." hiện chồng thẳng lên nút
   Lưu/Đổi mật khẩu bên dưới, nhìn như 2 popup đè lên nhau). Xem
   employeePortal.js (portalShowOverlay/portalCloseCurrentVisual) —
   nơi gắn/gỡ class body.portal-overlay-open. */
body.portal-overlay-open .toast {
  bottom: calc(96px + env(safe-area-inset-bottom));
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 860px) {
  .main { margin-left: 0; padding: 18px; padding-top: 64px; }
  .filters { flex-wrap: wrap; }
  .panel { width: 100%; }
  .chart-card { max-width: 100%; }
  .schedule-layout { flex-direction: column; }
  .schedule-side { width: 100%; position: static; }

  /* Sidebar chuyển thành menu TRƯỢT từ bên trái (off-canvas), không ẩn
     biến mất hoàn toàn nữa — trước đây display:none mà không có menu
     thay thế nào, khiến điện thoại không có cách nào chuyển trang. */
  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 52px;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--border);
    padding: 0 14px;
    z-index: 60;
  }
  .mobile-topbar__hamburger {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--text);
    padding: 4px 6px;
  }
  .mobile-topbar__brand {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 14px;
  }

  .sidebar {
    display: flex; /* ghi đè lại vì phần CSS gốc của .sidebar đặt display:flex,
                       nếu có rule display:none ở nơi khác thì rule này thắng nhờ
                       đứng sau trong cùng file */
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 70;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 8px 0 24px rgba(0,0,0,0.15);
  }
  .sidebar.is-open { transform: translateX(0); }

  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 35, 0.45);
    z-index: 65;
  }
  .sidebar-overlay[hidden] { display: none; }
}

@media (min-width: 861px) {
  .mobile-topbar, .sidebar-overlay { display: none !important; }
}

/* Accessibility: visible focus for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .panel { animation: none; }
  .sidebar { transition: none; }
}

/* =========================================================
   Phiếu lương (in hàng loạt, bản nhỏ gọn) — chuyển từ mẫu HTML công ty
   cung cấp, 2 phiếu/hàng, đủ toàn bộ khoản mục (A-Z theo file mẫu).
   ========================================================= */
.payslip-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.payslip-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) {
  .payslip-list { grid-template-columns: 1fr; }
}

.payslip {
  width: 100%;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0, 20, 30, 0.1);
  padding: 0 0 10px;
  border: 1px solid #e2eaf2;
  font-family: 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
  color: #1b3347;
  overflow: hidden;
}

.payslip-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1b3a63;
  padding: 8px 14px;
  border-radius: 14px 14px 0 0;
}
.payslip-banner__logo { height: 26px; width: auto; flex-shrink: 0; }
.payslip-banner__name {
  color: #ffffff;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.2px;
  flex: 1;
}
.payslip-banner .payslip-copy-btn { color: #cfe0f5; }
.payslip-banner .payslip-copy-btn:hover { color: #ffffff; }

.payslip .header {
  padding-top: 8px;
}

.payslip-body {
  padding: 0 14px 10px;
}

.payslip .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #e9edf4;
  padding-bottom: 5px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.payslip .company h2 { font-size: 1.2rem; font-weight: 700; color: #0b2a3c; display: flex; align-items: center; gap: 6px; }
.payslip .company h2 i { color: #2a7de1; font-size: 1rem; }
.payslip .company .sub { font-size: 0.72rem; color: #5f6c80; margin-top: 2px; font-weight: 500; }

.payslip-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1b3a63;
  letter-spacing: 0.5px;
}

.payslip .badge {
  background: #eef4ff; padding: 3px 12px; border-radius: 30px; color: #1a4f8b;
  font-weight: 600; font-size: 0.76rem; display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid #d0def0; white-space: nowrap;
}

.payslip .info-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px;
  background: #f8faff; padding: 5px 10px; border-radius: 10px; margin-bottom: 7px;
  border: 1px solid #e9f0fa; font-size: 0.75rem;
}
.payslip .info-item { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.payslip .info-item .label { color: #49647b; font-weight: 500; font-size: 0.8rem; min-width: 60px; }
.payslip .info-item .value { font-weight: 600; color: #0a2637; font-size: 0.92rem; }

.payslip .table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid #e4ecf7; margin-bottom: 6px; }
.payslip table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 280px; line-height: 1.2; }
.payslip th {
  background: #f2f7fe; color: #1f405e; font-weight: 600; padding: 3px 8px; text-align: left;
  border-bottom: 1px solid #dae3ef; font-size: 0.8rem; letter-spacing: 0.2px;
}
.payslip td { padding: 2.5px 8px; border-bottom: 1px solid #e9eef6; color: #1b3347; font-size: 0.92rem; }
.payslip tr:last-child td { border-bottom: none; }
.payslip .text-right { text-align: right; }

.payslip .total-row td {
  font-weight: 700; background: #f0f6ff; border-top: 2px solid #c7d9ef; border-bottom: none;
  padding-top: 4px; padding-bottom: 4px; font-size: 0.95rem;
}
.payslip .net-pay td { background: #e2edfe; border-bottom: none; padding-top: 6px; padding-bottom: 6px; }
.payslip .net-pay .label-net { font-weight: 600; color: #00337a; font-size: 1rem; }
.payslip .net-pay .amount-net { font-weight: 700; color: #00337a; font-size: 1.2rem; }

.payslip .footer {
  display: flex; justify-content: space-between; align-items: center; margin-top: 5px;
  flex-wrap: wrap; gap: 6px; border-top: 1px solid #e9edf4; padding-top: 4px;
  font-size: 0.72rem; color: #3f5a72;
}
.payslip .signature { display: flex; gap: 12px; flex-wrap: wrap; }
.payslip .signature div { display: flex; flex-direction: column; gap: 2px; }
.payslip .signature .label-sig { font-weight: 500; color: #4f6b84; font-size: 0.68rem; }
.payslip .signature .line { width: 60px; border-bottom: 1.5px solid #bccbdd; margin-top: 2px; }

@media print {
  .sidebar, .topbar, .filters, #payrollTableView, .payslip-toolbar, p.table__empty { display: none !important; }
  body, .payslip-list { background: white; }
  .payslip { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; page-break-inside: avoid; }
}

/* Nút chuyển ngôn ngữ Việt/Trung — cuối sidebar */
.sidebar__lang-toggle {
  margin-top: auto;
  flex-shrink: 0;
  width: 100%;
  padding: 8px 0;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.06);
  color: var(--text-on-dark);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar__lang-toggle:hover { background: rgba(255,255,255,0.14); }

/* Bảng Tiền lương — nhiều cột số nên thu gọn chiều cao dòng để xem được
   nhiều nhân viên hơn cùng lúc mà không cuộn quá nhiều. */
#payrollTable thead th { padding: 8px 12px; }
#payrollTable tbody td { padding: 6px 12px; font-size: 11.5px; }
#payrollTable tbody tr { cursor: pointer; }
#payrollTable tbody tr:hover { background: var(--row-hover); }

.payslip-copy-btn { padding: 2px 6px; font-size: 11px; }
@media print {
  .payslip-copy-btn { display: none !important; }
}

/* =========================================================
   Phép năm — dạng danh sách thẻ (khác bảng thường), theo mẫu giao diện
   công ty cung cấp: avatar tròn, badge phòng ban, thanh tiến trình còn
   lại, nhãn trạng thái màu, icon thao tác.
   ========================================================= */
.leave-list {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.leave-row {
  display: grid;
  grid-template-columns: 2.2fr 1fr 0.8fr 0.8fr 1.3fr 1fr 0.9fr;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.leave-row:last-child { border-bottom: none; }
.leave-row:not(.leave-row--head):hover { background: var(--row-hover); }

.leave-row--head {
  background: var(--panel-bg-alt);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 11.5px;
  color: var(--text-muted);
  padding: 12px 20px;
}

.leave-row__employee {
  display: flex;
  align-items: center;
  gap: 12px;
}
.leave-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}
.leave-row__name { font-weight: 700; font-size: 13.5px; color: var(--text); }
.leave-row__dept-sub { font-size: 11.5px; color: var(--text-muted); }

.pill-badge {
  display: inline-block;
  background: var(--gray-soft);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}

.leave-row__remaining-num { font-weight: 700; font-size: 14px; margin-right: 8px; }
.leave-progress {
  display: inline-block;
  width: 80px;
  height: 6px;
  background: var(--gray-soft);
  border-radius: 4px;
  overflow: hidden;
  vertical-align: middle;
}
.leave-progress__bar { display: block; height: 100%; border-radius: 4px; }

.status-pill {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
}
.status-pill--green { background: #dcfce7; color: #15803d; }
.status-pill--orange { background: #fef3c7; color: #b45309; }
.status-pill--red { background: #fee2e2; color: #b91c1c; }
.status-pill--gray { background: #f1f5f9; color: #64748b; }

.leave-row__actions { display: flex; gap: 10px; }
.leave-row__actions button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px;
  display: flex;
}
.leave-row__actions button:hover { color: var(--accent); }
.leave-row__actions svg { width: 17px; height: 17px; }

@media (max-width: 900px) {
  .leave-row:not(.leave-row--head) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 10px;
  }
  .leave-row--head { display: none; } /* nhãn cột thay bằng chữ nhỏ ngay trong từng ô ở mobile */
  .leave-row__employee { flex: 1 1 100%; }
  /* Ẩn Tổng phép/Đã dùng (ít quan trọng nhất) để đỡ chật — Còn lại đã đủ
     nói lên tình trạng chính, xem chi tiết đầy đủ qua icon "mắt". */
  .leave-row > div:nth-child(2), .leave-row > div:nth-child(3), .leave-row > div:nth-child(4) {
    display: none;
  }
  .leave-row > div:nth-child(5) { flex: 1 1 auto; }
  .leave-row > div:nth-child(6) { flex: 0 0 auto; }
  .leave-row > div:nth-child(7) { flex: 0 0 auto; margin-left: auto; }
}


/* =========================================================
   Đăng nhập — theo mẫu thiết kế (nền navy, icon nghiệp vụ chạy nền,
   card kính mờ/glassmorphism)
   ========================================================= */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b1c33;
  overflow: hidden;
  padding: 16px;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 16px; /* cô lập khỏi font-size 12.5px của toàn app, để mọi px/tỉ lệ bên trong đúng như file thiết kế gốc */
}
.login-screen * { box-sizing: border-box; }

.bg-icons-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: 0.13;
}
.icon-row {
  display: flex;
  align-items: center;
  gap: 44.8px;
  white-space: nowrap;
  position: absolute;
  width: max-content;
  will-change: transform;
}
.row-1 { top: 8%; animation: loginScrollRight 55s linear infinite; }
.row-2 { top: 58%; animation: loginScrollLeft 55s linear infinite; }
.row-3 { top: 33%; animation: loginScrollLeft 60s linear infinite; }
.row-4 { top: 83%; animation: loginScrollRight 65s linear infinite; }
@keyframes loginScrollRight { 0% { transform: translateX(-30%); } 100% { transform: translateX(30%); } }
@keyframes loginScrollLeft { 0% { transform: translateX(30%); } 100% { transform: translateX(-30%); } }
.bg-icons-container i {
  color: white;
  font-size: 41.6px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.06));
  display: inline-block;
  flex-shrink: 0;
}
.bg-icons-container i.fa-3x { font-size: 51.2px; }
.bg-icons-container i.fa-2x { font-size: 35.2px; }
.bg-icons-container i.fa-4x { font-size: 64px; }

.login-lang-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 11;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #cfe0f5;
  font-weight: 700;
  font-size: 11.5px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.login-lang-toggle:hover { background: rgba(255,255,255,0.18); }

.login-wrapper {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 48px 48px 40px 40px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  padding: 35.2px 32px 44.8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.login-header { text-align: center; margin-bottom: 38.4px; }
.login-header .brand-icon {
  display: inline-block;
  background: rgba(255, 255, 255, 0.07);
  padding: 14.4px 19.2px;
  border-radius: 60px;
  margin-bottom: 12.8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.login-header .brand-icon i { color: white; font-size: 35.2px; filter: drop-shadow(0 2px 8px rgba(0,20,40,0.6)); }
.login-header h1 {
  color: #f0f6ff;
  font-weight: 400;
  font-size: 25.6px;
  letter-spacing: 1px;
  margin-bottom: 3.2px;
  text-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.login-header .sub {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14.4px;
  font-weight: 300;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.login-form { display: flex; flex-direction: column; gap: 24px; }
.input-group { position: relative; }
.input-group .input-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.45);
  font-size: 17.6px;
}
.input-group input {
  width: 100%;
  padding: 16px 16px 16px 51.2px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 40px;
  font-size: 16px;
  color: white;
  outline: none;
  transition: all 0.25s;
  backdrop-filter: blur(4px);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.2);
}
.input-group input::placeholder { color: rgba(255, 255, 255, 0.35); font-weight: 300; }
.input-group input:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06), inset 0 2px 8px rgba(0,0,0,0.3);
}
.input-group .toggle-pass {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  font-size: 16px;
  background: transparent;
  border: none;
}
.input-group .toggle-pass:hover { color: rgba(255, 255, 255, 0.7); }

.login-card__error {
  background: rgba(220, 38, 38, 0.15);
  color: #ffb4b4;
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 12.5px;
  margin: 0;
}

.btn-login {
  margin-top: 9.6px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 60px;
  font-size: 18.4px;
  font-weight: 500;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.8px;
  width: 100%;
}
.btn-login i { font-size: 17.6px; color: rgba(255, 255, 255, 0.8); }
.btn-login:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.2); transform: scale(1.02); box-shadow: 0 8px 28px rgba(0, 30, 70, 0.6); }
.btn-login:active { transform: scale(0.97); }
.btn-login:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.login-footer {
  margin-top: 32px;
  text-align: center;
  color: rgba(255, 255, 255, 0.35);
  font-size: 12px;
  letter-spacing: 0.8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 25.6px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.login-footer span { display: inline-flex; align-items: center; gap: 6px; }
.login-footer i { font-size: 12.8px; opacity: 0.6; }

@media (max-width: 500px) {
  .login-wrapper { padding: 28.8px 19.2px 32px; border-radius: 32px; }
  .bg-icons-container i { font-size: 32px; }
  .bg-icons-container i.fa-3x { font-size: 38.4px; }
  .bg-icons-container i.fa-4x { font-size: 48px; }
  .bg-icons-container i.fa-2x { font-size: 25.6px; }
  .login-header h1 { font-size: 20.8px; }
  .input-group input { padding: 14.4px 16px 14.4px 48px; font-size: 15.2px; }
  .btn-login { font-size: 16px; padding: 14.4px; }
  .icon-row { gap: 28.8px; }
  .row-1 { top: 4%; } .row-2 { top: 50%; } .row-3 { top: 27%; } .row-4 { top: 76%; }
}

.sidebar__user {
  padding: 8px 16px;
  font-size: 11.5px;
  color: rgba(255,255,255,0.65);
  border-top: 1px solid rgba(255,255,255,0.12);
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.sidebar:hover .sidebar__user {
  opacity: 1;
  transition-delay: 0.05s;
}

.sidebar__logout {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.75);
  font-size: 11px;
  padding: 10px 20px 14px;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.sidebar__logout:hover { color: #fff; }
.sidebar__logout .sidebar__icon { width: 17px; height: 17px; }

.contract-notif-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}

/* =========================================================
   Thanh tiến độ xử lý đơn xin nghỉ phép (leaveRequests.js)
   Nộp đơn -> Chủ quản bộ phận -> Giám đốc nhà máy -> Nhân sự
   ========================================================= */
.leave-stepper {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 6px 4px 2px;
  max-width: 100%;
  overflow-x: auto;
}
.leave-stepper__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 108px;
  text-align: center;
  flex-shrink: 0;
}
.leave-stepper__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--gray-soft);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 13px;
  border: 2px solid var(--border);
}
.leave-stepper__label {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.3;
}
.leave-stepper__line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin-top: 15px;
  min-width: 16px;
}
.leave-stepper__step.is-done .leave-stepper__circle { background: var(--green); border-color: var(--green); color: #fff; }
.leave-stepper__step.is-done .leave-stepper__label { color: var(--text); font-weight: 600; }
.leave-stepper__step.is-current .leave-stepper__circle { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-soft); }
.leave-stepper__step.is-current .leave-stepper__label { color: var(--accent); font-weight: 700; }
.leave-stepper__step.is-rejected .leave-stepper__circle { background: var(--red); border-color: var(--red); color: #fff; }
.leave-stepper__step.is-rejected .leave-stepper__label { color: var(--red); font-weight: 700; }
.leave-stepper__step.is-skipped .leave-stepper__circle { opacity: 0.5; }
.leave-stepper__step.is-skipped .leave-stepper__label { opacity: 0.5; }

/* Điện thoại/màn hẹp — thu nhỏ để 4 bước không tràn lề phải (đặc biệt
   trong overlay hẹp của Cổng nhân viên). */
@media (max-width: 480px) {
  .leave-stepper__step { width: 70px; }
  .leave-stepper__circle { width: 24px; height: 24px; font-size: 11px; }
  .leave-stepper__label { font-size: 9.5px; }
}

/* =========================================================
   Xin nghỉ phép — danh sách "Đơn của tôi" / "Cần tôi duyệt"
   (giống khung .leave-list nhưng số cột khác nên tách riêng class,
   tránh lệch cột với bảng Phép năm dùng chung .leave-row)
   ========================================================= */
.leave-request-list {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.leave-request-row {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.leave-request-row--mine { grid-template-columns: 1.3fr 1.6fr 0.8fr 1.8fr 1.6fr 1.4fr; }
.leave-request-row--pending { grid-template-columns: 1.8fr 1.2fr 1.5fr 0.7fr 1.6fr 1fr; }
.leave-request-row:last-child { border-bottom: none; }
.leave-request-row:not(.leave-request-row--head):hover { background: var(--row-hover); }
.leave-request-row--head {
  background: var(--panel-bg-alt);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 11.5px;
  color: var(--text-muted);
  padding: 12px 20px;
}
@media (max-width: 900px) {
  .leave-request-row--mine, .leave-request-row--pending { grid-template-columns: 1fr; gap: 4px; }
  .leave-request-row--head { display: none; }
}

/* =========================================================
   Chấm đỏ báo có đơn xin nghỉ cần duyệt — hiện ngay trên sidebar dù
   đang thu gọn (không cần hover mới thấy), xem leaveRequests.js.
   ========================================================= */
.sidebar__link { position: relative; }
.sidebar__badge {
  position: absolute;
  top: 3px;
  left: 25px;
  min-width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--red);
  border: 2px solid var(--sidebar-bg);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
}