:root {
  --navy: #1F3864;
  --accent: #2E5395;
  --accent-light: #DCE6F1;
  --bg: #F4F6F9;
  --brand: #7C3AED;
  --brand-dark: #5B21B6;
  --brand-mid: #A78BFA;
  --brand-light: #EDE9FE;
  --brand-wash: #F8F5FF;
  --brand-ink: #2E1065;
  --brand-muted: #6B7280;
  --brand-gradient: linear-gradient(90deg, #7C3AED 0%, #A78BFA 100%);
  /* Synced from #topbar height in site.js; fallback matches fixed topbar layout. */
  --hrms-topbar-height: 3.75rem;
  --att-section-row-height: 1.55rem;
  /* Shared dropdown system */
  --hrms-dd-radius: 0.375rem;
  --hrms-dd-border: #ced4da;
  --hrms-dd-border-focus: #86b7fe;
  --hrms-dd-bg: #fff;
  --hrms-dd-muted: #6c757d;
  --hrms-dd-trigger-height: calc(1.5em + 0.5rem + 2px);
  --hrms-dd-shadow: 0 0.25rem 0.6rem rgba(31, 56, 100, 0.1);
  --hrms-dd-menu-max-height: 12.5rem;
  --hrms-dd-pad-x: 0.5rem;
}

body {
  background: var(--bg);
  font-family: "Segoe UI", "Calibri", Arial, sans-serif;
}

/* ---------- Sidebar ---------- */
#sidebar {
  width: 250px;
  height: 100vh;
  height: 100dvh;
  background: linear-gradient(180deg, var(--navy) 0%, #14284a 100%);
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1030;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#sidebar .brand {
  padding: 1.1rem 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

#sidebar .brand .name {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.3px;
}

#sidebar .brand .sub {
  font-size: 0.72rem;
  color: #b9c6de;
}

#sidebar .nav-link {
  color: #cfd9ea;
  padding: 0.55rem 1.2rem;
  font-size: 0.89rem;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

#sidebar .nav-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

#sidebar .nav-link.active {
  background: rgba(110, 168, 254, 0.16);
  color: #fff;
  border-left-color: #8ec0ff;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(110, 168, 254, 0.08);
}

#sidebar .nav-section-title {
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: #7f93b8;
  padding: 1rem 1.2rem 0.3rem;
  margin-top: 0.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

#sidebar .nav-section-title:first-of-type {
  border-top: none;
  margin-top: 0;
}

#sidebar .sidebar-search {
  padding: 0.85rem 1.2rem 0.15rem;
}

/* The icon and the input are flex siblings so they share one baseline
   regardless of the wrapper's asymmetric sidebar spacing. */
#sidebar .sidebar-search-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(110, 168, 254, 0.35);
  border-radius: 0.45rem;
  padding: 0.4rem 0.7rem;
}

#sidebar .sidebar-search-field:focus-within {
  background: rgba(255, 255, 255, 0.12);
  border-color: #6ea8fe;
  box-shadow: 0 0 0 0.2rem rgba(110, 168, 254, 0.25);
}

#sidebar .sidebar-search-field .bi-search {
  flex: none;
  font-size: 0.8rem;
  line-height: 1;
  color: #8fa1bf;
  pointer-events: none;
}

#sidebar .sidebar-search-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 0;
  color: #fff;
  font-size: 0.82rem;
  line-height: 1.3;
}

#sidebar .sidebar-search-input::placeholder {
  color: #8fa1bf;
}

#sidebar .sidebar-search-input:focus {
  outline: none;
  box-shadow: none;
}

#sidebar .sidebar-search-input::-webkit-search-cancel-button {
  cursor: pointer;
  filter: invert(1);
  opacity: 0.55;
}

#sidebar .sidebar-search-empty {
  padding: 0.9rem 1.2rem;
  font-size: 0.78rem;
  color: #8fa1bf;
}

.domain-scope-banner {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.86rem;
  line-height: 1.35;
}

.domain-scope-banner i {
  font-size: 1.15rem;
  margin-top: 0.1rem;
}

.domain-scope-banner strong {
  display: block;
  margin-bottom: 0.15rem;
}

.domain-scope-worker {
  background: #e8f1ff;
  border: 1px solid #c5d8f5;
  color: #1f3864;
}

.domain-scope-staff {
  background: #eef8f0;
  border: 1px solid #c6e6cd;
  color: #1b5e2a;
}

#content:has(.training-dashboard) .domain-scope-worker {
  gap: 0.6rem;
  margin-bottom: 0.85rem !important;
  padding: 0.65rem 0.85rem;
  background: #eaf3fc;
  border: 1px solid #c5d8ef;
  border-radius: 0.4rem;
  color: #1f3864;
  font-size: 0.8rem;
  line-height: 1.45;
}

#content:has(.training-dashboard) .domain-scope-worker i {
  color: #3b6aa8;
  font-size: 0.98rem;
  margin-top: 0.12rem;
}

#content:has(.training-dashboard) .domain-scope-worker i::before {
  content: "\F431";
}

#content:has(.training-dashboard) .domain-scope-worker strong {
  margin-bottom: 0.1rem;
  font-size: 0.82rem;
  font-weight: 650;
}

/* ---------- Training Dashboard ---------- */
.training-dashboard {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: -0.15rem;
}

.training-dash-title {
  margin: 0 0 0.75rem;
  color: var(--navy);
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.3;
}

.training-sanction-card {
  border-radius: 0.45rem;
}

.training-sanction-table {
  width: 100%;
  margin-bottom: 0;
  color: #384454;
  font-size: 0.82rem;
  --bs-table-bg: transparent;
  border: 1px solid #dfe5ec;
}

.training-sanction-table th,
.training-sanction-table td {
  padding: 0.55rem 0.75rem;
  border: 1px solid #dfe5ec;
  vertical-align: middle;
}

.training-sanction-table thead th {
  color: #4a5563;
  background: #f7f9fc;
  font-size: 0.76rem;
  font-weight: 650;
  text-align: center;
}

.training-sanction-table thead th:first-child {
  text-align: left;
}

.training-sanction-table tbody th {
  width: 8.5rem;
  color: var(--navy);
  background: #f3f5f8;
  font-weight: 650;
}

.training-register-filters {
  border-radius: 0.45rem;
}

.training-register-filters .form-control,
.training-register-filters .form-select,
.training-register-filters .hrms-dd-trigger {
  min-width: 9.5rem;
  font-weight: 400;
}

.training-register-filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.training-sanction-table th.is-dept-linked,
.training-sanction-table td.is-dept-linked {
  background: #eaf3fc;
}

.training-register-filter-actions {
  border-left: 1px solid #dee2e6;
  padding-left: 0.75rem;
  margin-left: 0.1rem;
}

.training-register-table-card {
  border-radius: 0.45rem;
  overflow: hidden;
}

.training-register-scroll {
  max-height: calc(100vh - var(--hrms-topbar-height, 3.75rem) - 16rem);
  overflow: auto;
  position: relative;
  background: #fff;
}

.training-register-table {
  width: max-content;
  min-width: 56rem;
  color: var(--navy);
  font-size: 0.82rem;
  --bs-table-bg: transparent;
  border-collapse: separate;
  border-spacing: 0;
}

.training-register-table thead th {
  padding: 0.58rem 0.8rem;
  color: #fff;
  background: var(--navy);
  border: 0;
  font-size: 0.7rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: inset 0 -1px 0 #163056;
}

.training-register-table tbody td {
  height: 3.05rem;
  padding: 0.62rem 0.8rem;
  border-top: 0;
  border-bottom: 1px solid #e8edf3;
  vertical-align: middle;
  white-space: nowrap;
}

.training-register-table tbody tr:last-child td {
  border-bottom: 0;
}

.training-register-pager-wrap {
  background: #fafbfc;
}

.training-status {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.training-status.is-on-track,
.training-status.is-promoted {
  color: #1b5e2a;
  background: #e8f6ec;
}

.training-status.is-pending {
  color: #244f83;
  background: #e9f1fb;
}

.training-status.is-review {
  color: #775600;
  background: #fff4d8;
}

.training-status.is-neutral {
  color: #5f6875;
  background: #f1f3f5;
}

.training-register-note {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.65rem 0 0;
  color: #6b7480;
  font-size: 0.74rem;
  line-height: 1.35;
}

.training-register-note .bi {
  color: #7a8899;
  font-size: 0.78rem;
}

.dashboard-quick-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.dashboard-quick-link:hover {
  color: inherit;
  transform: translateY(-1px);
}

.dashboard-quick-link .card {
  height: 100%;
}

.dashboard-quick-link:hover .card {
  box-shadow: 0 4px 12px rgba(31, 56, 100, 0.12);
}

.home-section-label {
  margin: 0 0 0.55rem;
  color: #6b7480;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-stat-card .card-body,
.home-cycle-card .card-body {
  padding: 0.9rem 1rem;
}

.home-stat-label {
  color: #6b7480;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.home-stat-value {
  margin-top: 0.15rem;
  color: var(--navy);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.15;
}

.home-stat-detail {
  margin-top: 0.2rem;
  color: #6b7480;
  font-size: 0.78rem;
}

.home-cycle-card .card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.home-cycle-month {
  color: var(--navy);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
}

.home-cycle-status {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.home-cycle-status.is-open {
  color: #1d4f91;
  background: #e7f0fb;
}

.home-cycle-status.is-attendance {
  color: #8a5a00;
  background: #fff4d6;
}

.home-cycle-status.is-leave {
  color: #0f5f63;
  background: #e5f6f6;
}

.home-cycle-status.is-payroll {
  color: #146c43;
  background: #e5f6ec;
}

.home-cycle-status.is-closed,
.home-cycle-status.is-missing,
.home-cycle-status.is-legacy {
  color: #5f6875;
  background: #eef1f4;
}

.home-cycle-link {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
}

.home-cycle-link:hover {
  text-decoration: underline;
}

@media (max-width: 575.98px) {
  .home-cycle-card .card-body {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ---------- Main content ---------- */
#main {
  margin-left: 250px;
  min-height: 100vh;
  background: var(--bg);
}

#topbar {
  background: #fff;
  border-bottom: 1px solid #e3e7ee;
  padding: 0 1.25rem;
  /* Fixed min-height — do not bind to --hrms-topbar-height (that var is for
     sticky offsets below the bar). Binding both caused measure→write→reflow CLS. */
  min-height: 3.75rem;
  position: sticky;
  top: 0;
  /* Above register sticky thead/frozen cells (? 20) and sidebar content. */
  z-index: 1020;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#topbar .topbar-heading {
  display: flex;
  align-items: center;
  min-height: 3.75rem;
}

#topbar .page-title {
  font-weight: 700;
  color: var(--navy);
  font-size: 1.15rem;
  margin: 0;
  line-height: 1.25;
}

#topbar .page-subtitle {
  font-size: 0.78rem;
  color: #6c757d;
  margin-top: 0.12rem;
  line-height: 1.25;
}

/* ---------- Account menu (topbar) ---------- */
.hrms-account-menu {
  position: relative;
}

.hrms-account-menu .hrms-account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.15rem 0.2rem 0.35rem;
  border: none;
  background: transparent;
  color: #4b5563;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  border-radius: 0.5rem;
  box-shadow: none;
}

.hrms-account-menu .hrms-account-trigger:hover,
.hrms-account-menu .hrms-account-trigger:focus,
.hrms-account-menu .hrms-account-trigger:focus-visible,
.hrms-account-menu .hrms-account-trigger.show {
  background: transparent;
  color: #374151;
  box-shadow: none;
}

/* Bootstrap caret sits after the avatar */
.hrms-account-menu .hrms-account-trigger::after {
  margin-left: 0.15rem;
  border-top-color: #9ca3af;
  vertical-align: 0.15em;
  opacity: 0.9;
}

.hrms-account-menu .hrms-account-trigger-text {
  max-width: clamp(4.5rem, 12vw, 9rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hrms-account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
}

.hrms-account-dropdown {
  --bs-dropdown-min-width: 8.5rem;
  min-width: 8.5rem;
  padding: 0.35rem;
  margin-top: 0.35rem !important;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 0.35rem 0.85rem rgba(15, 23, 42, 0.12);
  font-size: 0.875rem;
}

.hrms-account-dropdown .hrms-account-logout {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.35rem;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 500;
}

.hrms-account-dropdown .hrms-account-logout .bi {
  font-size: 1rem;
  line-height: 1;
  color: #4b5563;
}

.hrms-account-dropdown .hrms-account-logout:hover,
.hrms-account-dropdown .hrms-account-logout:focus {
  background: #f3f4f6;
  color: #111827;
}

.hrms-account-dropdown .hrms-account-logout:hover .bi,
.hrms-account-dropdown .hrms-account-logout:focus .bi {
  color: #111827;
}

@media (max-width: 991.98px) {
  .hrms-account-menu .hrms-account-trigger-text {
    max-width: 6.5rem;
  }
}

@media (max-width: 575.98px) {
  .hrms-account-menu .hrms-account-trigger-text {
    max-width: 4.25rem;
  }
}

#content {
  padding: 1.25rem 1.5rem 3rem;
}

.card {
  border: none;
  border-radius: 0.6rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.card-header {
  background: #fff;
  border-bottom: 1px solid #eef0f4;
  font-weight: 600;
  color: var(--navy);
}

.btn-primary {
  background-color: var(--accent);
  border-color: var(--accent);
}

.btn-primary:hover {
  background-color: var(--navy);
  border-color: var(--navy);
}

.table-hrms thead th {
  background: var(--navy);
  color: #fff;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Employee Master records list ? design-system navy header (#1F3864).
   Bootstrap 5 cells use background-color: var(--bs-table-bg); set the token. */
.emp-list-table.table > thead > * > * {
  --bs-table-bg: var(--navy);
  --bs-table-color: #fff;
  background-color: var(--navy);
  color: #fff;
}

.emp-list-table.table > thead > * > .emp-list-sticky-code,
.emp-list-table.table > thead > * > .emp-list-sticky-name {
  --bs-table-bg: var(--navy);
  --bs-table-color: #fff;
  background-color: var(--navy);
  color: #fff;
}

#mdTabs .nav-link {
  color: var(--navy);
}

#mdTabs .nav-link.active {
  color: var(--navy);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

/* ---------- Master Data dashboards & lists ---------- */
.md-breadcrumb .breadcrumb {
  background: transparent;
  padding: 0;
  font-size: 0.85rem;
}

.md-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: #9aa5b5;
}

.md-breadcrumb a {
  color: var(--accent);
  text-decoration: none;
}

.md-breadcrumb a:hover {
  text-decoration: underline;
}

.md-page-intro {
  max-width: 52rem;
}

.md-category-search {
  display: flex;
  justify-content: center;
  margin: 1.25rem 0 1.75rem;
}

.md-category-search-field {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: min(100%, 32rem);
  padding: 0.5rem 1.25rem 0.5rem 1.15rem;
  background: #fff;
  border: 1px solid #dbe3f0;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(31, 56, 100, 0.05);
}

.md-category-search-field:focus-within {
  border-color: #9fbdf0;
  box-shadow: 0 0 0 0.2rem rgba(47, 114, 220, 0.12);
}

.md-category-search-icon {
  flex: none;
  font-size: 1.05rem;
  line-height: 1;
  color: #64748b;
  pointer-events: none;
}

.md-category-search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--navy);
  font-size: 0.92rem;
  line-height: 1.4;
}

.md-category-search-input::placeholder {
  color: #8a94a6;
}

.md-category-search-input:focus {
  outline: none;
  box-shadow: none;
}

.md-category-search-hint {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  background: #eff4ff;
  border: 1px solid #dbe7fb;
  border-radius: 0.5rem;
  color: var(--accent);
  font-size: 0.9rem;
  line-height: 1;
}

.md-category-search-empty {
  padding: 1.5rem 0;
  text-align: center;
}

.md-tile .card-body {
  display: flex;
  flex-direction: column;
  min-height: 9.5rem;
}

.md-tile-icon {
  font-size: 1.75rem;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 0.65rem;
}

.md-tile-title {
  font-weight: 650;
  color: var(--navy);
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}

.md-tile-desc {
  font-size: 0.84rem;
  color: #6c757d;
  flex: 1 1 auto;
}

.md-tile-meta {
  margin-top: 0.75rem;
}

.md-tile-disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.md-tile-disabled .card {
  background: #f8f9fb;
}

.md-list-title {
  font-weight: 700;
  color: var(--navy);
  font-size: 1.05rem;
}

.md-search-group {
  width: min(100%, 16rem);
}

.md-list-toolbar--no-add .md-list-toolbar-actions {
  flex: 1 1 0;
  justify-content: flex-end;
  min-width: 0;
}

.md-list-toolbar--no-add .md-search-group {
  flex: 1 1 auto;
  width: auto;
  max-width: min(100%, 28rem);
}

.md-list-page .card {
  overflow: hidden;
}

table.md-sortable thead th.md-sort-asc::after {
  content: " \25B2";
  font-size: 0.65em;
}

table.md-sortable thead th.md-sort-desc::after {
  content: " \25BC";
  font-size: 0.65em;
}

.md-empty-state {
  padding: 2.5rem 1rem;
  text-align: center;
  color: #6c757d;
}

.md-empty-state i {
  font-size: 1.75rem;
  color: #b0bac8;
  display: block;
  margin-bottom: 0.5rem;
}

#mdFormModal .modal-header {
  border-bottom-color: #eef0f4;
}

#mdFormModal .modal-title {
  color: var(--navy);
  font-weight: 650;
}

#mdFormModal .form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

/*
 * Confirmation modal stacks above Master Data edit modals (1055) and
 * notification toasts (1080). Backdrop for the confirm layer is raised in JS
 * when another modal is already open so the Edit form stays dimmed underneath.
 */
#hrmsConfirmModal {
  z-index: 1100;
}

.modal-backdrop.hrms-confirm-backdrop {
  z-index: 1090;
}

.nav-pill-link {
  border-radius: 2rem;
  padding: 0.35rem 1rem;
  font-size: 0.85rem;
}

.nav-pill-link.active {
  background: var(--accent);
  color: #fff !important;
}

.room-card {
  border-radius: 0.5rem;
  border: 1px solid #e3e7ee;
  padding: 0.7rem;
  margin-bottom: 0.8rem;
  background: #fff;
}

.room-card .room-code {
  font-weight: 700;
  color: var(--navy);
}

.occupant-pill {
  font-size: 0.72rem;
  background: var(--accent-light);
  color: var(--navy);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  display: inline-block;
  margin: 0.12rem;
}

.table-hrms td,
.table-hrms th {
  font-size: 0.84rem;
  vertical-align: middle;
}

.table-hrms tbody tr:nth-child(even) {
  background: #f7f9fc;
}

.table-hrms tbody tr:hover {
  background: var(--accent-light);
}

/*
 * Shared ops list tables (Hiring Requests, Leave Management, …).
 * Fixed layout + ellipsis text columns so trailing Action stays visible
 * at narrower desktop widths without forcing page-level overflow.
 */
.hrms-ops-list-table {
  table-layout: fixed;
  width: 100%;
  max-width: 100%;
}

.hrms-ops-list-table > thead > tr > th,
.hrms-ops-list-table > tbody > tr > td {
  vertical-align: middle;
}

.hrms-ops-list-table .hrms-ops-col-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hrms-ops-list-table .hrms-ops-col-action {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.form-section-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0.5rem 0 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid #dee2e6;
}

.section-note {
  font-size: 0.85rem;
  color: #5a6a7a;
  background: #eef3f8;
  border-left: 3px solid var(--accent);
  padding: 0.6rem 0.85rem;
}

.stepper {
  display: flex;
  align-items: center;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.stepper .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 110px;
  text-align: center;
}

.stepper .circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #ced4da;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  background: #fff;
  color: #6c757d;
}

.stepper .step.done .circle {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.stepper .step.current .circle {
  background: #fff;
  color: var(--accent);
  border-color: var(--accent);
}

.stepper .step-label {
  font-size: 0.72rem;
  margin-top: 0.35rem;
  color: #6c757d;
}

.stepper .connector {
  flex: 0 0 40px;
  height: 2px;
  background: #dee2e6;
  margin-bottom: 1.3rem;
}

.stepper .connector.done {
  background: var(--accent);
}

/* ---------- Employee form (Create / Edit) ---------- */
.emp-edit-page {
  margin-top: -0.15rem;
}

.emp-edit-back {
  margin-bottom: 0.65rem;
}

.emp-edit-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #6c757d;
  text-decoration: none;
  border-radius: 0.25rem;
  padding: 0.15rem 0.1rem;
}

.emp-edit-back-link:hover,
.emp-edit-back-link:focus {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.emp-edit-back-link:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

/* The page itself is the scroll container and #topbar (z-index 1020) is sticky
   at top: 0, so the section nav docks directly under it. The wrapper carries the
   nav's vertical margin as padding so no content shows through while docked. */
.emp-workspace-nav-sticky {
  position: sticky;
  top: var(--hrms-topbar-height, 3.75rem);
  z-index: 1010;
  padding: 0.7rem 0;
  background: var(--bg);
  /* Prevent scroll-anchoring nudges when sticky tabs engage/release. */
  overflow-anchor: none;
}

.emp-workspace-nav-sticky.is-stuck {
  box-shadow: 0 2px 6px rgba(24, 42, 73, 0.08);
}

.emp-workspace-nav {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  margin: 0;
  padding: 0.2rem;
  overflow-x: auto;
  border: 1px solid #e1e6ed;
  border-radius: 0.5rem;
  background: #f8f9fb;
}

.emp-workspace-tab {
  position: relative;
  flex: 0 0 auto;
  padding: 0.45rem 1.15rem;
  border: 0;
  border-radius: 0.35rem;
  background: transparent;
  color: #6c757d;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
}

a.emp-workspace-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}

a.emp-workspace-tab:hover,
a.emp-workspace-tab:focus-visible {
  text-decoration: none;
}

.emp-workspace-tab.is-disabled {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  opacity: 0.55;
  cursor: not-allowed;
}

.emp-workspace-tab:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 22%;
  right: 0;
  width: 1px;
  height: 56%;
  background: #dee2e6;
}

.emp-workspace-tab.active::after,
.emp-workspace-tab:has(+ .active)::after {
  display: none;
}

.emp-workspace-tab:hover,
.emp-workspace-tab:focus-visible {
  color: var(--accent);
  background: #fff;
  outline: none;
}

.emp-workspace-tab:focus-visible {
  box-shadow: 0 0 0 0.15rem rgba(46, 83, 149, 0.18);
}

.emp-workspace-tab.active,
.emp-workspace-tab.active:hover,
.emp-workspace-tab.active:focus-visible {
  color: var(--navy);
  background: #fff;
  font-weight: 650;
  border-radius: 0.35rem 0.35rem 0.2rem 0.2rem;
  box-shadow:
    0 1px 3px rgba(31, 56, 100, 0.1),
    inset 0 -2px 0 var(--navy);
}

@media (max-width: 575.98px) {
  .emp-workspace-tab {
    padding-inline: 0.85rem;
  }
}

.emp-workspace-section[aria-busy="true"] {
  min-height: 8rem;
}

/* Employee payroll configuration table (workspace + standalone) */
.emp-payroll-config {
  width: 100%;
}

.emp-payroll-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 0.3rem;
}

.emp-payroll-hint {
  font-size: 0.78rem;
  line-height: 1.4;
  color: #6b7480;
  margin-bottom: 0.55rem;
}

.emp-payroll-table-wrap {
  width: 100%;
  margin-bottom: 0.75rem;
  background: #fff;
  border: 1px solid #e6eaf0;
  border-radius: 0.45rem;
}

.emp-payroll-table {
  width: 100%;
  margin-bottom: 0;
  font-size: 0.82rem;
  --bs-table-bg: transparent;
}

.emp-payroll-table thead th {
  padding: 0.45rem 0.65rem;
  background: #f7f9fc;
  border-bottom: 1px solid #e3e8ef;
  color: #6b7480;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.emp-payroll-table tbody td {
  padding: 0.25rem 0.65rem;
  border-top: 0;
  border-bottom: 1px solid #eef1f6;
  vertical-align: middle;
}

.emp-payroll-table tbody tr.emp-payroll-row.is-active td {
  background: #f6faf8;
}

.emp-payroll-table tbody tr.emp-payroll-row.is-active td.emp-payroll-component {
  box-shadow: inset 3px 0 0 #198754;
}

.emp-payroll-value-note {
  display: block;
  margin: 0.1rem 0 0;
  font-size: 0.68rem;
  line-height: 1.3;
  color: var(--accent, #2e5395);
  text-align: end;
}

.emp-payroll-save-notices {
  margin-bottom: 0.55rem;
}

.emp-payroll-save-notices .alert:last-child {
  margin-bottom: 0 !important;
}

.emp-payroll-table tbody tr:last-child td {
  border-bottom: 0;
}

.emp-payroll-table tbody tr:hover td {
  background: #f9fbfd;
}

/* Component column shows the name only ? no accent bar, arrow, or marker. */
.emp-payroll-component {
  color: var(--navy);
  font-weight: 600;
  white-space: nowrap;
}

.emp-payroll-component::before,
.emp-payroll-component::after {
  content: none;
}

.emp-payroll-meta {
  color: #5f6875;
  white-space: nowrap;
}

.emp-payroll-type-badge {
  display: inline-block;
  padding: 0.12rem 0.4rem;
  border-radius: 0.22rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.emp-payroll-type-badge.is-earning {
  background: #e8f6ec;
  color: #1b5e2a;
}

.emp-payroll-type-badge.is-deduction {
  background: #f8f0f0;
  color: #842029;
}

.emp-payroll-type-badge.is-neutral {
  background: #f4f6f8;
  color: #5f6875;
}

/* Compact semantic chips for Payroll Settings lists.
   Horizontal padding only; inherits table font/line-height so row geometry stays put. */
.hrms-sem {
  display: inline;
  padding: 0 0.3em;
  border-radius: 0.2rem;
  border: 0;
  margin: 0;
  font: inherit;
  font-weight: 600;
  line-height: inherit;
  vertical-align: baseline;
  white-space: nowrap;
}

.hrms-sem.is-active,
.hrms-sem.is-earning {
  background: #e8f6ec;
  color: #1b5e2a;
}

.hrms-sem.is-inactive {
  background: #eef0f3;
  color: #5a6572;
}

.hrms-sem.is-deduction {
  background: #f8f0f0;
  color: #842029;
}

.hrms-sem.is-neutral,
.hrms-sem.is-yes {
  background: #eef2f6;
  color: #3d4a57;
}

.hrms-sem.is-no,
.hrms-sem.is-fallback {
  background: #f4f6f8;
  color: #6b7480;
}

.hrms-sem.is-staff {
  background: #dce8f6;
  color: #1a4a8a;
}

.hrms-sem.is-local {
  background: #ece6f8;
  color: #5b2d8e;
}

.hrms-sem.is-colony {
  background: #f8e4f0;
  color: #9b1b6a;
}

.hrms-sem-num {
  font: inherit;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hrms-sem-muted {
  color: #aab2bd;
}

.emp-payroll-default {
  color: #6b7480;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.emp-payroll-empty {
  color: #aab2bd;
}

.emp-payroll-override {
  width: 8.5rem;
}

.emp-payroll-input.form-control {
  height: 1.9rem;
  max-width: 7.25rem;
  margin-left: auto;
  padding: 0.15rem 0.45rem;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  border-color: #d6dce5;
}

.emp-payroll-input.form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.15rem rgba(46, 83, 149, 0.12);
}

.emp-payroll-active {
  width: 4.5rem;
  text-align: center;
}

.emp-payroll-switch {
  display: flex;
  justify-content: center;
  min-height: 0;
  padding-left: 0;
  margin: 0;
}

.emp-payroll-switch .form-check-input {
  width: 2rem;
  height: 1rem;
  float: none;
  margin: 0;
}

.emp-payroll-actions {
  margin-top: 0;
  padding: 0.5rem 0.75rem;
}

/* ---------- Hiring Requests ---------- */
.hiring-list-page,
.hiring-create-page {
  width: 100%;
}

.hiring-list-actions {
  display: flex;
  justify-content: flex-end;
  min-height: 1.9rem;
  margin-bottom: 0.55rem;
}

.hiring-primary-action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.hiring-workflow-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
  padding: 0.48rem 0.7rem;
  color: #536071;
  background: #f8fafc;
  border: 1px solid #e1e6ed;
  border-radius: 0.4rem;
  font-size: 0.78rem;
  line-height: 1.4;
}

.hiring-workflow-banner .bi {
  flex: 0 0 auto;
  color: #5e7391;
  font-size: 0.82rem;
}

.hiring-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 0.45rem;
}

/* Column sizing follows the Employee Master list pattern: content-driven auto
 * layout that stretches to fill the card, with long text columns capped by
 * max-width + ellipsis instead of per-column widths. */
.hiring-table {
  width: max-content;
  min-width: 100%;
  color: #384454;
  font-size: 0.82rem;
  --bs-table-bg: transparent;
}

.hiring-table > :not(caption) > * > * {
  white-space: nowrap;
}

.hiring-table .hiring-col-request-id {
  font-variant-numeric: tabular-nums;
}

.hiring-table .hiring-col-department,
.hiring-table .hiring-col-position,
.hiring-table .hiring-col-requested-by {
  max-width: 10.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hiring-table .hiring-col-reason {
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fixed-content columns shrink to fit so the spare width goes to the text
 * columns above instead of pooling as empty space before Qty and Action. */
.hiring-table .hiring-col-qty,
.hiring-table .hiring-col-status,
.hiring-table .hiring-col-action {
  width: 1%;
}

.hiring-table thead th {
  padding: 0.45rem 0.55rem;
  color: #fff;
  background: var(--navy);
  border-bottom: 1px solid #dfe5ec;
  font-size: 0.69rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  white-space: nowrap;
}

.hiring-table tbody td {
  height: 2.7rem;
  padding: 0.35rem 0.55rem;
  border-top: 0;
  border-bottom: 1px solid #edf1f5;
  vertical-align: middle;
}

.hiring-table tbody tr:last-child td {
  border-bottom: 0;
}

.hiring-table tbody tr:hover td {
  background: #f9fbfd;
}

.hiring-table-important {
  color: var(--navy);
  font-weight: 600;
}

.hiring-table-qty {
  font-variant-numeric: tabular-nums;
}

.hiring-status {
  display: inline-block;
  padding: 0.13rem 0.43rem;
  border-radius: 999px;
  font-size: 0.69rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.hiring-status.is-fulfilled {
  color: #1b5e2a;
  background: #e8f6ec;
}

.hiring-status.is-approved {
  color: #1e4f8a;
  background: #e3eefb;
}

.hiring-status.is-submitted,
.hiring-status.is-inrecruitment {
  color: #2f72dc;
  background: #edf4ff;
}

.hiring-status.is-progress {
  color: #244f83;
  background: #e9f1fb;
}

.hiring-status.is-rejected {
  color: #842029;
  background: #fdecee;
}

.hiring-status.is-returned {
  color: #775600;
  background: #fff4d8;
}

.hiring-status.is-cancelled,
.hiring-status.is-neutral {
  color: #5f6875;
  background: #f1f3f5;
}

.hiring-view-action {
  min-height: 1.75rem;
  padding: 0.2rem 0.58rem;
  font-size: 0.74rem;
  line-height: 1.2;
}

.hiring-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.55rem;
  padding: 0.1rem 0;
  color: #5f6875;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
}

.hiring-back-link:hover,
.hiring-back-link:focus {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.hiring-create-heading {
  margin-bottom: 0.7rem;
}

.hiring-create-heading h2 {
  margin: 0;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.3;
}

.hiring-create-heading p {
  margin: 0.18rem 0 0;
  color: #6b7480;
  font-size: 0.78rem;
  line-height: 1.4;
}

.hiring-create-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(17rem, 0.85fr);
  align-items: start;
  gap: 0.9rem;
}

.hiring-surface {
  min-width: 0;
  padding: 0.8rem 0.85rem;
  background: #fff;
  border: 1px solid #e1e6ed;
  border-radius: 0.45rem;
  box-shadow: 0 1px 3px rgba(31, 56, 100, 0.05);
}

.hiring-surface-title {
  margin: 0 0 0.7rem;
  padding-bottom: 0.42rem;
  color: var(--navy);
  border-bottom: 1px solid #edf0f4;
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.3;
}

.hiring-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 0.75rem;
}

.hiring-field {
  min-width: 0;
  margin: 0 0 0.62rem;
  padding: 0;
  border: 0;
}

.hiring-field .form-label {
  margin-bottom: 0.2rem;
  color: #384454;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.25;
}

.hiring-required {
  color: #a94442;
  font-size: 0.75rem;
}

.hiring-field .form-control,
.hiring-field .form-select {
  min-height: 2rem;
  padding: 0.28rem 0.55rem;
  color: #384454;
  background-color: #fff;
  border-color: #d6dce5;
  border-radius: 0.35rem;
  font-size: 0.8rem;
  box-shadow: none;
}

.hiring-field .form-control:disabled {
  color: #697586;
  background-color: #f4f6f8;
}

.hiring-field .form-control:focus,
.hiring-field .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.15rem rgba(46, 83, 149, 0.12);
}

.hiring-field textarea.form-control {
  min-height: 3.65rem;
  resize: vertical;
}

.hiring-reason-field {
  grid-column: 1 / -1;
}

.hiring-reason-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.1rem;
  min-height: 1.9rem;
}

.hiring-reason-options .form-check {
  margin: 0;
}

.hiring-reason-options .form-check-input {
  margin-top: 0.18rem;
}

.hiring-reason-options .form-check-label {
  color: #495463;
  font-size: 0.78rem;
}

.hiring-form-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.1rem;
}

.hiring-form-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 1.95rem;
  padding: 0.28rem 0.75rem;
  font-size: 0.78rem;
  line-height: 1.25;
}

.hiring-workflow-card {
  padding-bottom: 0.75rem;
}

.hiring-workflow-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hiring-workflow-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 1.55rem minmax(0, 1fr);
  gap: 0.55rem;
  padding-bottom: 0.75rem;
}

.hiring-workflow-steps li:not(:last-child)::after {
  position: absolute;
  top: 1.45rem;
  bottom: 0.08rem;
  left: 0.72rem;
  width: 1px;
  background: #d7e1ec;
  content: "";
}

.hiring-step-number {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: #fff;
  background: var(--navy);
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 700;
}

.hiring-workflow-steps strong {
  display: block;
  margin-top: 0.05rem;
  color: #344155;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.3;
}

.hiring-workflow-steps p {
  margin: 0.16rem 0 0;
  color: #6b7480;
  font-size: 0.71rem;
  line-height: 1.38;
}

.hiring-workflow-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.5rem 0.6rem;
  color: #536071;
  background: #f7f9fc;
  border: 1px solid #e1e7ee;
  border-radius: 0.35rem;
}

.hiring-workflow-callout .bi {
  margin-top: 0.06rem;
  color: #5e7391;
  font-size: 0.78rem;
}

.hiring-workflow-callout strong,
.hiring-workflow-callout span {
  display: block;
  font-size: 0.71rem;
  line-height: 1.35;
}

.hiring-workflow-callout strong {
  color: #3e4c5f;
  font-weight: 600;
}

@media (max-width: 991.98px) {
  .hiring-create-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .hiring-form-grid {
    display: block;
  }

  .hiring-list-actions {
    min-height: 0;
  }
}

/* Hiring Requests ? list filters, records shell, detail layout */
.hiring-records-shell {
  width: 100%;
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 0.45rem;
  box-shadow: 0 1px 3px rgba(31, 56, 100, 0.05);
  overflow: hidden;
}

.hiring-list-filters {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid #edf1f5;
  background: #fff;
}

.hiring-list-filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.55rem 0.65rem;
}

.hiring-list-filter-item {
  flex: 1 1 8.5rem;
  min-width: 0;
}

.hiring-list-filter-search {
  flex: 1.4 1 12rem;
}

.hiring-list-filter-daterange {
  flex: 1.2 1 11rem;
}

.hiring-list-filter-actions {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.hiring-list-filter-actions .btn {
  min-height: 1.95rem;
  white-space: nowrap;
}

.hiring-list-filter-label {
  display: block;
  margin-bottom: 0.18rem;
  color: #495463;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
}

.hiring-list-filter-control {
  min-height: 1.95rem;
  font-size: 0.78rem;
}

.hiring-list-search-wrap {
  position: relative;
}

.hiring-list-search-wrap .hiring-list-filter-control {
  padding-right: 1.85rem;
}

.hiring-list-search-icon {
  position: absolute;
  top: 50%;
  right: 0.55rem;
  transform: translateY(-50%);
  color: #8a94a3;
  font-size: 0.78rem;
  pointer-events: none;
}

.hiring-list-daterange-wrap {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  position: relative;
}

.hiring-list-daterange-wrap .hiring-list-date-input {
  flex: 1 1 0;
  min-width: 0;
  padding-right: 1.6rem;
}

.hiring-list-daterange-sep {
  color: #8a94a3;
  font-size: 0.75rem;
  flex: 0 0 auto;
}

.hiring-list-daterange-icon {
  position: absolute;
  right: 0.45rem;
  color: #8a94a3;
  font-size: 0.78rem;
  pointer-events: none;
}

.hiring-records-shell .hiring-table-wrap {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.hiring-sort-link {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  color: inherit;
  text-decoration: none;
}

.hiring-sort-link:hover,
.hiring-sort-link:focus {
  color: #fff;
  text-decoration: none;
}

.hiring-sort-link .bi {
  font-size: 0.62rem;
  opacity: 0.85;
}

.hiring-list-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 0.85rem;
  padding: 0.55rem 0.75rem;
  border-top: 1px solid #edf1f5;
  background: #fafbfc;
  font-size: 0.78rem;
  color: #5f6875;
}

.hiring-list-footer-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem 0.85rem;
  margin-left: auto;
}

.hiring-list-pagesize {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.hiring-list-pagesize label {
  margin: 0;
  font-size: 0.78rem;
  color: #6c757d;
}

.hiring-list-pagesize .form-select {
  width: 4.5rem;
  min-height: 1.85rem;
  font-size: 0.78rem;
}

.hiring-list-pagination {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
}

.hiring-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.85rem;
  height: 1.85rem;
  padding: 0 0.4rem;
  border: 1px solid #d8dee7;
  border-radius: 0.25rem;
  background: #fff;
  color: #657185;
  font-size: 0.78rem;
  line-height: 1;
  text-decoration: none;
}

.hiring-page-btn:hover:not(.disabled):not(.active) {
  border-color: #b8c4d6;
  color: #344155;
  text-decoration: none;
}

.hiring-page-btn.active {
  border-color: #2f72dc;
  background: #2f72dc;
  color: #fff;
}

.hiring-page-btn.disabled {
  color: #aeb6c2;
  cursor: default;
  pointer-events: none;
}

.hiring-detail-page {
  width: 100%;
}

.hiring-detail-header {
  margin-bottom: 0.85rem;
}

.hiring-detail-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
}

.hiring-detail-title {
  margin: 0;
  color: var(--navy);
  font-size: 1.15rem;
  font-weight: 650;
  line-height: 1.25;
}

.hiring-detail-subtitle {
  margin: 0.28rem 0 0;
  color: #6b7480;
  font-size: 0.8rem;
  line-height: 1.4;
}

.hiring-detail-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: start;
  gap: 0.85rem;
}

.hiring-detail-left,
.hiring-detail-right {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}

.hiring-detail-card {
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 0.45rem;
  box-shadow: 0 1px 3px rgba(31, 56, 100, 0.05);
  overflow: hidden;
}

.hiring-detail-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.62rem 0.75rem;
  border-bottom: 1px solid #edf1f5;
}

.hiring-detail-card-title {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  color: var(--navy);
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.3;
}

.hiring-detail-card-title .bi {
  color: #5e7391;
  font-size: 0.82rem;
}

.hiring-detail-card-body {
  padding: 0.65rem 0.75rem 0.75rem;
}

.hiring-detail-row {
  display: grid;
  grid-template-columns: minmax(6.5rem, 7.5rem) minmax(0, 1fr);
  gap: 0.55rem;
  padding: 0.42rem 0;
  border-bottom: 1px solid #f0f3f7;
}

.hiring-detail-row:last-child {
  border-bottom: 0;
}

.hiring-detail-label {
  color: #5f6875;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
}

.hiring-detail-value {
  color: #344155;
  font-size: 0.78rem;
  line-height: 1.35;
  word-break: break-word;
}

.hiring-action-remarks {
  margin-bottom: 0.65rem;
}

.hiring-remarks-textarea {
  min-height: 5.5rem;
  resize: vertical;
  font-size: 0.8rem;
}

.hiring-remarks-counter {
  margin-top: 0.18rem;
  color: #8a94a3;
  font-size: 0.72rem;
  text-align: right;
}

.hiring-action-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.hiring-action-form {
  margin: 0;
}

.hiring-action-btn {
  width: 100%;
  min-height: 2rem;
  font-size: 0.76rem;
  white-space: normal;
}

.hiring-action-note {
  display: flex;
  align-items: flex-start;
  gap: 0.38rem;
  margin-top: 0.65rem;
  padding: 0.48rem 0.58rem;
  color: #3e5f8a;
  background: #edf4ff;
  border: 1px solid #d8e6fb;
  border-radius: 0.35rem;
  font-size: 0.74rem;
  line-height: 1.35;
}

.hiring-action-note .bi {
  margin-top: 0.05rem;
  flex: 0 0 auto;
}

.hiring-audit-table {
  width: 100%;
  color: #384454;
  font-size: 0.78rem;
  --bs-table-bg: transparent;
}

.hiring-audit-table thead th {
  padding: 0.42rem 0.65rem;
  color: #fff;
  background: var(--navy);
  border-bottom: 0;
  font-size: 0.68rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  white-space: nowrap;
}

.hiring-audit-table tbody td {
  padding: 0.38rem 0.65rem;
  border-bottom: 1px solid #edf1f5;
  vertical-align: top;
}

.hiring-audit-table tbody tr:last-child td {
  border-bottom: 0;
}

.hiring-audit-remarks {
  min-width: 6rem;
  word-break: break-word;
}

.hiring-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hiring-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 0.85rem minmax(0, 1fr);
  gap: 0.55rem;
  padding-bottom: 0.85rem;
}

.hiring-timeline-item:not(:last-child)::after {
  position: absolute;
  top: 0.75rem;
  bottom: 0;
  left: 0.38rem;
  width: 2px;
  background: #d7e1ec;
  content: "";
}

.hiring-timeline-marker {
  position: relative;
  z-index: 1;
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 0.18rem;
  border-radius: 50%;
  background: #2f72dc;
}

.hiring-timeline-marker.is-fulfilled {
  background: #2e8b45;
}

.hiring-timeline-marker.is-approved {
  background: #2f72dc;
}

.hiring-timeline-marker.is-submitted,
.hiring-timeline-marker.is-inrecruitment {
  background: #5b9cf0;
}

.hiring-timeline-marker.is-rejected {
  background: #c0392b;
}

.hiring-timeline-marker.is-cancelled,
.hiring-timeline-marker.is-neutral {
  background: #8a94a3;
}

.hiring-timeline-marker.is-returned {
  background: #c49a00;
}

.hiring-timeline-content {
  min-width: 0;
}

.hiring-timeline-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.55rem;
}

.hiring-timeline-title {
  color: #344155;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.35;
}

.hiring-timeline-time {
  margin-top: 0.12rem;
  color: #6b7480;
  font-size: 0.72rem;
  line-height: 1.35;
}

.hiring-turnaround-bar {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  margin-top: 0.65rem;
  padding: 0.48rem 0.58rem;
  color: #495463;
  background: #f4f6f8;
  border: 1px solid #e3e8ef;
  border-radius: 0.35rem;
  font-size: 0.74rem;
  line-height: 1.35;
}

.hiring-turnaround-bar .bi {
  color: #5e7391;
}

@media (max-width: 1199.98px) {
  .hiring-detail-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991.98px) {
  .hiring-list-filter-actions {
    margin-left: 0;
    width: 100%;
  }

  .hiring-list-footer-controls {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
}

@media (max-width: 767.98px) {
  .hiring-action-buttons {
    grid-template-columns: 1fr;
  }

  .hiring-detail-row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* ---------- Leave Management ---------- */
.leave-list-page,
.leave-create-page {
  width: 100%;
}

.leave-list-actions {
  display: flex;
  justify-content: flex-end;
  min-height: 1.9rem;
  margin-bottom: 0.55rem;
}

.leave-primary-action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.leave-filters-shell > .leave-list-filters {
  border-bottom: 0;
}

.leave-records-shell {
  width: 100%;
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 0.45rem;
  box-shadow: 0 1px 3px rgba(31, 56, 100, 0.05);
  overflow: hidden;
}

/* Filters shell must not clip Leave Type / Status multi-select menus.
   Keep the table shell's overflow:hidden for rounded corners. */
.leave-records-shell.leave-filters-shell {
  overflow: visible;
  position: relative;
  z-index: 20;
}

.leave-list-page .leave-list-filter-field .hrms-dd.show {
  z-index: 30;
}

.leave-list-filters {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid #edf1f5;
}

.leave-list-filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.leave-list-filters-title {
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 650;
}

/* Leave Register filters — WTI / Employee Master flex-wrap field sizing */
.leave-list-page .leave-list-filter-fields {
  min-width: 0;
}

.leave-list-page .leave-list-filter-field {
  position: relative;
  z-index: 1;
  min-width: 8.75rem;
  flex: 1 1 8.75rem;
  max-width: 11.5rem;
}

.leave-list-page .leave-list-filter-field-name {
  flex: 1 1 10rem;
  max-width: 13rem;
}

.leave-list-page .leave-list-filter-field-empcode {
  flex: 0 1 7.5rem;
  min-width: 7rem;
  max-width: 9rem;
}

.leave-list-page .leave-list-filter-field-daterange {
  flex: 0 1 auto;
  min-width: 0;
  max-width: none;
  width: auto;
}

.leave-list-filter-actions {
  flex: 0 0 auto;
  border-left: 1px solid #dee2e6;
  padding-left: 0.75rem;
  margin-left: 0.1rem;
}

.leave-list-filter-actions .btn {
  min-height: 1.95rem;
  white-space: nowrap;
}

.leave-list-filter-label {
  display: block;
  margin-bottom: 0.18rem;
  color: #495463;
  font-size: 0.72rem;
  font-weight: 600;
}

.leave-list-filter-control {
  min-height: 1.95rem;
  font-size: 0.78rem;
}

.leave-list-search-wrap {
  position: relative;
}

.leave-list-search-wrap .leave-list-filter-control {
  padding-right: 1.85rem;
}

.leave-list-search-icon {
  position: absolute;
  top: 50%;
  right: 0.55rem;
  transform: translateY(-50%);
  color: #8a94a3;
  font-size: 0.78rem;
  pointer-events: none;
}

.leave-list-daterange-wrap {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  position: relative;
}

.leave-list-daterange-wrap .leave-list-date-input {
  flex: 0 0 7.35rem;
  width: 7.35rem;
  max-width: 8rem;
  min-width: 6.75rem;
}

.leave-list-daterange-sep {
  color: #8a94a3;
  font-size: 0.75rem;
}

.leave-table-section-head {
  padding: 0.55rem 0.75rem 0.35rem;
  color: var(--navy);
  font-size: 0.84rem;
  font-weight: 650;
  border-bottom: 1px solid #edf1f5;
}

.leave-records-shell .leave-table-wrap {
  border: 0;
  border-radius: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}

/* Content-driven auto layout (Employee Master pattern): table grows with
 * columns; horizontal scroll stays inside .leave-table-wrap — no page overflow. */
.leave-table {
  width: max-content;
  min-width: 100%;
  color: #384454;
  font-size: 0.78rem;
}

.leave-table > :not(caption) > * > * {
  white-space: nowrap;
}

.leave-table .leave-col-days-advance,
.leave-table .leave-col-leave-days {
  font-variant-numeric: tabular-nums;
}

.leave-table tbody td {
  padding: 0.38rem 0.55rem;
  border-bottom: 1px solid #edf1f5;
  vertical-align: middle;
}

.leave-table-employee {
  color: var(--navy);
  font-weight: 600;
  line-height: 1.25;
}

.leave-table-empcode {
  color: #8a94a3;
  font-size: 0.7rem;
  line-height: 1.25;
}

.leave-status {
  display: inline-block;
  padding: 0.13rem 0.43rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.leave-status.is-recorded,
.leave-status.is-fulfilled {
  color: #1b5e2a;
  background: #e8f6ec;
}

.leave-status.is-rejected {
  color: #842029;
  background: #fdecee;
}

.leave-status.is-cancelled,
.leave-status.is-neutral,
.leave-status.is-forwarded,
.leave-status.is-bypassed {
  color: #5f6875;
  background: #f1f3f5;
}

.leave-status.is-pending,
.leave-status.is-pending-hr,
.leave-status.is-pending-pm,
.leave-status.is-pending-gm,
.leave-status.is-pending-record {
  color: #244f83;
  background: #e9f1fb;
}

.leave-action-btn {
  min-height: 1.75rem;
  padding: 0.2rem 0.45rem;
  font-size: 0.72rem;
}

.leave-list-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 0.85rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid #edf1f5;
  background: #fafbfc;
  font-size: 0.78rem;
  color: #5f6875;
}

.leave-list-meta .leave-list-pagesize {
  margin-left: auto;
}

.leave-list-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 0.85rem;
  padding: 0.55rem 0.75rem;
  border-top: 1px solid #edf1f5;
  background: #fafbfc;
  font-size: 0.78rem;
  color: #5f6875;
}

.leave-list-footer-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem 0.85rem;
  margin-left: auto;
}

.leave-list-pagesize {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.leave-list-pagesize label {
  margin: 0;
  font-size: 0.78rem;
  color: #6c757d;
}

.leave-list-pagesize .form-select {
  width: 4.5rem;
  min-height: 1.85rem;
  font-size: 0.78rem;
}

.leave-list-pagination {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
}

.leave-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.85rem;
  height: 1.85rem;
  padding: 0 0.4rem;
  border: 1px solid #d8dee7;
  border-radius: 0.25rem;
  background: #fff;
  color: #657185;
  font-size: 0.78rem;
  line-height: 1;
  text-decoration: none;
}

.leave-page-btn.active {
  border-color: #2f72dc;
  background: #2f72dc;
  color: #fff;
}

.leave-page-btn.disabled {
  color: #aeb6c2;
  cursor: default;
  pointer-events: none;
}

.leave-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.55rem;
  color: #5f6875;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
}

.leave-back-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.leave-create-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
  color: #8a94a3;
  font-size: 0.76rem;
}

.leave-create-breadcrumb a {
  color: #2f72dc;
  text-decoration: none;
}

.leave-create-breadcrumb-current {
  color: #5f6875;
}

.leave-create-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(16rem, 0.85fr);
  align-items: start;
  gap: 0.85rem;
}

.leave-create-form-card,
.leave-create-guidelines {
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 0.45rem;
  box-shadow: 0 1px 3px rgba(31, 56, 100, 0.05);
}

.leave-create-form-card {
  padding: 0.85rem 0.9rem 0.75rem;
}

.leave-create-form-header {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.leave-create-form-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  color: #2f72dc;
  background: #edf4ff;
  border-radius: 0.45rem;
  font-size: 1.1rem;
}

.leave-create-title {
  margin: 0;
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 650;
}

.leave-create-subtitle {
  margin: 0.15rem 0 0;
  color: #6b7480;
  font-size: 0.78rem;
}

.leave-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 0.75rem;
  align-items: start;
}

.leave-form-grid > .leave-field {
  min-width: 0;
  width: 100%;
}

.leave-emp-type-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 2.15fr) minmax(7rem, 0.72fr) minmax(0, 0.95fr);
  column-gap: 0.65rem;
  align-items: start;
  margin-bottom: 0.62rem;
}

.leave-emp-type-row > .leave-field {
  margin-bottom: 0;
  min-width: 0;
  width: 100%;
}

.leave-emp-type-row > .leave-type-field {
  margin-left: 0.2rem;
}

.leave-emp-name-control {
  position: relative;
  width: 100%;
}

.leave-emp-name-input-wrap {
  position: relative;
  width: 100%;
}

.leave-emp-name-input-wrap .leave-emp-name-input {
  padding-right: 2.5rem;
  width: 100%;
}

.leave-emp-name-input-wrap .leave-emp-name-toggle {
  position: absolute;
  top: 50%;
  right: 0.45rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: #6b7480;
  line-height: 1;
  z-index: 2;
  cursor: pointer;
}

.leave-emp-name-input-wrap .leave-emp-name-toggle-icon {
  font-size: 0.875rem;
  line-height: 1;
  pointer-events: none;
}

.leave-emp-name-input-wrap .leave-emp-name-toggle:hover:not(:disabled) {
  color: #374151;
}

.leave-emp-name-input-wrap .leave-emp-name-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.leave-emp-type-row .form-control,
.leave-emp-type-row .form-select {
  width: 100%;
}

.leave-field {
  margin-bottom: 0.62rem;
}

.leave-employee-results {
  position: absolute;
  z-index: 1050;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 0.15rem;
  max-height: 14rem;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #d6dce5;
  border-radius: 0.35rem;
}

.leave-employee-selected {
  margin-top: 0.25rem;
}

.leave-employee-hint {
  margin-top: 0.28rem;
  color: #6b7480;
  font-size: 0.72rem;
  line-height: 1.3;
}

.leave-field-full {
  grid-column: 1 / -1;
}

.leave-date-duration-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 0.75rem;
  align-items: start;
  margin-bottom: 0.62rem;
}

.leave-date-duration-row > .leave-field {
  margin-bottom: 0;
  min-width: 0;
  width: 100%;
}

.leave-date-duration-row .form-control {
  width: 100%;
}

.leave-field .form-label {
  margin-bottom: 0.2rem;
  color: #384454;
  font-size: 0.76rem;
  font-weight: 600;
}

.leave-required {
  color: #a94442;
  font-size: 0.75rem;
}

.leave-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.leave-required-note {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  margin-top: 0.75rem;
  padding: 0.48rem 0.58rem;
  color: #3e5f8a;
  background: #edf4ff;
  border: 1px solid #d8e6fb;
  border-radius: 0.35rem;
  font-size: 0.74rem;
}

.leave-create-guidelines {
  padding: 0.75rem 0.8rem;
  background: #f7faff;
}

.leave-create-guidelines-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.65rem;
  color: var(--navy);
  font-size: 0.84rem;
  font-weight: 650;
}

.leave-create-guidelines-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.leave-create-guidelines-list li {
  display: grid;
  grid-template-columns: 1.2rem minmax(0, 1fr);
  gap: 0.45rem;
  padding-bottom: 0.65rem;
}

.leave-create-guidelines-list li:last-child {
  padding-bottom: 0;
}

.leave-create-guidelines-list .bi {
  margin-top: 0.08rem;
  color: #5e7391;
}

.leave-create-guidelines-list strong {
  display: block;
  color: #344155;
  font-size: 0.76rem;
  font-weight: 650;
}

.leave-create-guidelines-list p {
  margin: 0.12rem 0 0;
  color: #6b7480;
  font-size: 0.72rem;
  line-height: 1.35;
}

@media (max-width: 1199.98px) {
  .leave-create-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991.98px) {
  .leave-list-page .leave-list-filter-actions {
    margin-left: 0;
    width: 100%;
    border-left: 0;
    padding-left: 0;
  }

  .leave-list-footer-controls {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .leave-list-meta .leave-list-pagesize {
    margin-left: 0;
  }
}

@media (max-width: 767.98px) {
  .leave-form-grid {
    grid-template-columns: 1fr;
  }

  .leave-date-duration-row {
    grid-template-columns: 1fr;
    row-gap: 0.62rem;
  }

  .leave-emp-type-row {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .leave-emp-type-row > .leave-field {
    margin-bottom: 0.62rem;
  }

  .leave-emp-type-row > .leave-type-field {
    margin-left: 0;
  }
}

/* Employee workspace: Advances and Period Deductions */
.emp-workspace-module {
  width: 100%;
}

.emp-workspace-internal-nav {
  margin-bottom: 0.55rem;
}

.emp-workspace-module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.3rem;
}

.emp-workspace-module-title {
  margin: 0;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.3;
}

.emp-workspace-primary-action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.emp-workspace-module-hint {
  margin: 0 0 0.65rem;
  color: #6b7480;
  font-size: 0.78rem;
  line-height: 1.4;
}

.emp-workspace-table-wrap {
  width: 100%;
  overflow-x: auto;
  background: #fff;
  border: 1px solid #e6eaf0;
  border-radius: 0.45rem;
}

.emp-workspace-table {
  width: 100%;
  min-width: 43rem;
  color: #384454;
  font-size: 0.82rem;
  --bs-table-bg: transparent;
}

.emp-workspace-table thead th {
  padding: 0.45rem 0.65rem;
  background: #f7f9fc;
  border-bottom: 1px solid #e3e8ef;
  color: #6b7480;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.emp-workspace-table tbody td {
  height: 2.6rem;
  padding: 0.3rem 0.65rem;
  border-top: 0;
  border-bottom: 1px solid #eef1f6;
  vertical-align: middle;
}

.emp-workspace-table tbody tr:last-child td {
  border-bottom: 0;
}

.emp-workspace-table tbody tr:hover td {
  background: #f9fbfd;
}

.emp-workspace-flex-cell {
  width: 100%;
  min-width: 9rem;
}

.emp-workspace-important-value {
  color: var(--navy);
  font-weight: 600;
}

.emp-workspace-money {
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.emp-workspace-status {
  display: inline-block;
  padding: 0.13rem 0.42rem;
  border-radius: 999px;
  font-size: 0.69rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.emp-workspace-status.is-applied,
.emp-workspace-status.is-included {
  background: #e8f6ec;
  color: #1b5e2a;
}

.emp-workspace-status.is-unapplied {
  background: #fff4d8;
  color: #775600;
}

.emp-workspace-status.is-excluded {
  background: #f1f3f5;
  color: #5f6875;
}

.emp-workspace-row-actions .btn + form,
.emp-workspace-row-actions form + .btn {
  margin-left: 0.2rem;
}

.emp-workspace-row-action {
  min-height: 1.75rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.74rem;
  line-height: 1.2;
}

.emp-workspace-icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  font-size: 0.75rem;
}

.emp-workspace-delete-action {
  color: #9b3a43;
  background: #fff;
  border: 1px solid #efcfd3;
}

.emp-workspace-delete-action:hover,
.emp-workspace-delete-action:focus {
  color: #842029;
  background: #fdf3f4;
  border-color: #e6b7bd;
}

.emp-period-filter {
  margin-bottom: 0.7rem;
  padding: 0.55rem 0.7rem;
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 0.45rem;
}

.emp-period-filter-title {
  margin: 0 0 0.4rem;
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
}

.emp-period-filter .payroll-period-filter-card {
  margin-bottom: 0 !important;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.emp-period-filter .payroll-period-filter-card .card-body {
  padding: 0 !important;
}

.emp-period-filter .pay-period-controls {
  gap: 0.55rem 0.75rem;
}

.emp-period-filter .pay-period-input .form-select {
  width: 10.5rem;
  min-height: 1.95rem;
}

.emp-period-filter .att-filter-submit-actions .btn {
  min-height: 1.95rem;
  padding-inline: 0.85rem;
}

.emp-period-filter .payroll-period-filter-status {
  font-size: 0.78rem;
}

/* Period Deductions tab: constrained records scroll (preview). Scoped only. */
.emp-period-deductions .emp-workspace-table-wrap.emp-period-deductions-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.emp-period-deductions-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(22rem, calc(100vh - 26rem));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.emp-period-deductions .emp-period-deductions-scroll .emp-workspace-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f7f9fc;
  box-shadow: 0 1px 0 #e3e8ef;
}

.emp-period-deductions-footer {
  flex: 0 0 auto;
  padding: 0.45rem 0.7rem;
  border-top: 1px solid #e6eaf0;
  background: #fff;
  color: #6b7480;
  font-size: 0.75rem;
  line-height: 1.35;
}

/* Advances tab: constrained records scroll (preview). Scoped only. */
.emp-advances .emp-workspace-table-wrap.emp-advances-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.emp-advances-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(22rem, calc(100vh - 26rem));
  overflow: auto;
  overscroll-behavior: contain;
}

.emp-advances .emp-advances-scroll .emp-workspace-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f7f9fc;
  box-shadow: 0 1px 0 #e3e8ef;
}

.emp-advances-footer {
  flex: 0 0 auto;
  padding: 0.45rem 0.7rem;
  border-top: 1px solid #e6eaf0;
  background: #fff;
  color: #6b7480;
  font-size: 0.75rem;
  line-height: 1.35;
}

/* Standalone Screen 2 ? Record/Edit Advance Bootstrap modal (Categories pattern). */
.advances-inline-host {
  position: relative;
}

.advances-inline-dialog {
  width: min(42rem, 100%);
  max-width: 42rem;
}

#advancesInlineModal .modal-header {
  border-bottom-color: #eef0f4;
}

#advancesInlineModal .modal-title {
  color: var(--navy);
  font-weight: 650;
}

#advancesInlineModal .modal-body {
  padding-top: 0.35rem;
}

#advancesInlineModal .emp-advance-modal-form .form-actions,
#advancesInlineModal .emp-advance-modal-form .emp-workspace-form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

#advancesInlineModal .emp-advance-modal-form .emp-workspace-focused-form {
  max-width: none;
}

.emp-workspace-form-state {
  width: 100%;
  background: var(--bg);
}

/* Centers the return link + card column (~672px / 42rem) in the workspace. */
.emp-workspace-form-shell {
  width: 100%;
  max-width: 42rem;
  margin-inline: auto;
}

.emp-workspace-form-shell--wide {
  max-width: 66rem;
}

.emp-workspace-edit-form {
  padding: 0.15rem 0 0.35rem;
}

.emp-workspace-edit-card {
  width: 100%;
  padding: 0.8rem 0.85rem 0.9rem;
  background: #fff;
  border: 1px solid #e1e6ed;
  border-radius: 0.5rem;
  box-shadow: 0 1px 4px rgba(31, 56, 100, 0.07);
}

.emp-deduction-edit-card {
  padding: 1.35rem 1.5rem 1.4rem;
}

.emp-deduction-edit-card .emp-workspace-return-link {
  margin-bottom: 0.45rem;
}

.emp-deduction-edit-card .emp-workspace-form-heading {
  margin-bottom: 1rem;
}

.emp-deduction-edit-card .emp-workspace-form-heading h2 {
  font-size: 1.12rem;
}

.emp-deduction-edit-card .emp-deduction-form {
  max-width: none;
}

.emp-deduction-edit-card .emp-deduction-form-grid {
  gap: 0.85rem 1.15rem;
}

.emp-deduction-edit-card .emp-deduction-period-field .form-label::after,
.emp-deduction-edit-card .emp-deduction-kind-field .form-label::after,
.emp-deduction-edit-card .emp-deduction-amount-field .form-label::after {
  content: " *";
  color: #a94442;
  font-weight: 600;
}

.emp-deduction-edit-card .emp-workspace-form-actions {
  margin-top: 0.55rem;
}

.emp-deduction-edit-card .emp-workspace-form-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.emp-workspace-edit-card .emp-workspace-focused-form,
.emp-workspace-edit-card .emp-deduction-form {
  max-width: none;
}

.emp-workspace-edit-card .alert {
  margin-bottom: 0.7rem;
}

.emp-workspace-return-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.65rem;
  padding: 0.1rem 0;
  color: #5f6875;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
}

.emp-workspace-return-link:hover,
.emp-workspace-return-link:focus {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.emp-workspace-form-heading {
  margin-bottom: 0.75rem;
}

.emp-workspace-form-heading h2 {
  margin: 0;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.3;
}

.emp-workspace-form-heading p {
  margin: 0.18rem 0 0;
  color: #6b7480;
  font-size: 0.78rem;
  line-height: 1.4;
}

.emp-workspace-focused-form {
  width: 100%;
}

.emp-workspace-field {
  margin-bottom: 0.65rem;
}

.emp-advance-date-period-row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 9.5rem) minmax(11rem, 1fr);
  gap: 0.65rem 0.75rem;
  align-items: start;
  margin-bottom: 0.65rem;
}

.emp-advance-date-period-row > .emp-workspace-field {
  margin-bottom: 0;
}

.emp-advance-month-picker {
  position: relative;
}

.emp-advance-month-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background-color: #fff;
  color: #212529;
}

.emp-advance-month-picker-trigger:disabled {
  cursor: not-allowed;
  background-color: #e9ecef;
  opacity: 1;
}

.emp-advance-month-picker-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  line-height: 1.4;
}

.emp-advance-month-picker-icon {
  flex: 0 0 auto;
  color: #6b7785;
  font-size: 0.95rem;
  line-height: 1;
}

.emp-advance-month-popover {
  position: absolute;
  z-index: 1080;
  top: calc(100% + 0.25rem);
  left: 0;
  width: min(100%, 15.5rem);
  padding: 0.55rem 0.55rem 0.45rem;
  border: 1px solid #d6dce5;
  border-radius: 0.4rem;
  background: #fff;
  box-shadow: 0 0.35rem 1rem rgba(33, 48, 71, 0.12);
}

.emp-advance-month-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  margin-bottom: 0.45rem;
}

.emp-advance-month-popover-year {
  font-size: 0.85rem;
  font-weight: 600;
  color: #2b3648;
  line-height: 1.2;
}

.emp-advance-month-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid #d6dce5;
  border-radius: 0.3rem;
  background: #fff;
  color: #384454;
  line-height: 1;
}

.emp-advance-month-nav:hover:not(:disabled) {
  background: #f4f6f9;
  border-color: #c5ced9;
}

.emp-advance-month-nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.emp-advance-month-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.3rem;
}

.emp-advance-month-cell {
  min-height: 2rem;
  padding: 0.25rem 0.2rem;
  border: 1px solid transparent;
  border-radius: 0.3rem;
  background: #f7f9fb;
  color: #2b3648;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.2;
}

.emp-advance-month-cell:hover:not(.is-disabled) {
  background: #eef3f9;
  border-color: #d0dae6;
}

.emp-advance-month-cell.is-selected {
  background: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}

.emp-advance-month-cell.is-disabled {
  color: #a0a8b3;
  background: #f3f4f6;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: #c5cbd3;
}

.emp-advance-settlement-hint,
.emp-advance-settlement-status {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  line-height: 1.3;
  color: #6b7785;
}

.emp-advance-settlement-notice {
  margin-top: 0.25rem;
}

@media (max-width: 420px) {
  .emp-advance-date-period-row {
    grid-template-columns: 1fr;
  }

  .emp-advance-month-popover {
    width: 100%;
  }
}


.emp-workspace-field .form-label {
  margin-bottom: 0.22rem;
  color: #384454;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
}

.emp-workspace-field .form-control,
.emp-workspace-field .form-select {
  min-height: 2rem;
  padding: 0.28rem 0.55rem;
  border-color: #d6dce5;
  border-radius: 0.35rem;
  background-color: #fff;
  font-size: 0.8rem;
  box-shadow: none;
}

.emp-workspace-field textarea.form-control {
  min-height: 3.6rem;
  resize: vertical;
}

.emp-workspace-field .form-control:focus,
.emp-workspace-field .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.15rem rgba(46, 83, 149, 0.12);
}

.emp-workspace-form-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.15rem;
}

.emp-workspace-form-actions .btn {
  min-height: 1.9rem;
  padding: 0.28rem 0.75rem;
  font-size: 0.78rem;
  line-height: 1.25;
}

.emp-deduction-form {
  width: 100%;
  max-width: 66rem;
}

.emp-deduction-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(9rem, 1fr));
  grid-template-areas:
    "period kind amount"
    "duty remarks remarks";
  gap: 0 0.75rem;
}

.emp-deduction-period-field {
  grid-area: period;
}

.emp-deduction-kind-field {
  grid-area: kind;
}

.emp-deduction-amount-field {
  grid-area: amount;
}

.emp-deduction-duty-field {
  grid-area: duty;
}

.emp-deduction-remarks-field {
  grid-area: remarks;
}

.emp-deduction-duty-help {
  margin-top: 0.25rem;
  color: #6b7480;
  font-size: 0.7rem;
  line-height: 1.35;
}

@media (max-width: 991.98px) {
  .emp-deduction-form-grid {
    grid-template-columns: minmax(11rem, 1fr) minmax(11rem, 1fr);
    grid-template-areas:
      "period kind"
      "amount duty"
      "remarks remarks";
  }
}

@media (max-width: 575.98px) {
  .emp-workspace-module-header {
    align-items: flex-start;
  }

  .emp-workspace-primary-action {
    flex: 0 0 auto;
  }

  .emp-deduction-form-grid {
    display: block;
  }

  .emp-period-filter .pay-period-input,
  .emp-period-filter .pay-period-input .form-select {
    width: 100%;
  }
}

.emp-form-page .section-note {
  font-size: 0.8rem;
  line-height: 1.4;
  padding: 0.45rem 0.75rem;
  margin-bottom: 0.65rem;
  border-radius: 0 0.35rem 0.35rem 0;
}

.emp-form-section {
  border-radius: 0.45rem;
  margin-bottom: 0.65rem;
}

.emp-form-section > .card-body {
  padding: 0.65rem 0.85rem 0.75rem;
}

.emp-form-section .form-section-title {
  font-size: 0.88rem;
  margin: 0 0 0.55rem;
  padding-bottom: 0.3rem;
}

.emp-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0;
  padding: 0 0 0.35rem;
  border-bottom: 1px solid #dee2e6;
  cursor: pointer;
  line-height: 1.3;
}

.emp-section-toggle:hover,
.emp-section-toggle:focus-visible {
  color: var(--accent);
  outline: none;
}

.emp-section-toggle:focus-visible {
  box-shadow: 0 0 0 0.15rem rgba(46, 83, 149, 0.2);
  border-radius: 0.2rem;
}

.emp-section-toggle-icon {
  font-size: 0.85rem;
  color: #6c757d;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.emp-section-toggle[aria-expanded="false"] .emp-section-toggle-icon {
  transform: rotate(-90deg);
}

.emp-section-toggle[aria-expanded="true"] {
  margin-bottom: 0.55rem;
}

.emp-form-section .emp-section-toggle.form-section-title {
  border-bottom: 1px solid #dee2e6;
}

.emp-onboarding-card .emp-section-toggle.form-section-title {
  margin: 0;
}

.emp-form-page .form-label {
  font-weight: 600;
  margin-bottom: 0.15rem;
  line-height: 1.25;
  color: #495057;
}

.emp-form-page .form-label .text-danger,
.emp-form-page .emp-form-required {
  font-weight: 600;
}

.emp-form-page .form-control-sm,
.emp-form-page .form-select-sm {
  height: var(--hrms-dd-trigger-height);
  min-height: var(--hrms-dd-trigger-height);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-weight: 400;
}

.emp-form-page .form-control:disabled,
.emp-form-page .form-select:disabled,
.emp-form-page .form-control[readonly] {
  background-color: #f3f5f8;
  color: #6c757d;
  opacity: 1;
  border-color: #e3e7ee;
}

.emp-form-field-hint {
  font-size: 0.72rem;
  line-height: 1.3;
  color: #6c757d;
  margin-top: 0.2rem;
  margin-bottom: 0;
}

.emp-form-doc-toggles {
  margin-bottom: 0.15rem;
}

.emp-form-switch {
  display: flex;
  align-items: center;
  min-height: 1.75rem;
  padding-left: 2.5em;
  margin-bottom: 0;
}

.emp-form-switch .form-check-input {
  margin-top: 0;
  float: none;
}

.emp-form-switch .form-check-label {
  font-weight: 500;
  color: #495057;
  line-height: 1.25;
}

.emp-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  margin-top: 0.25rem;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #e3e7ee;
  border-radius: 0.45rem;
  box-shadow: 0 -2px 10px rgba(31, 56, 100, 0.06);
}

.emp-form-actions .btn-primary {
  min-width: 8.5rem;
}

.emp-form-actions .btn-outline-secondary {
  margin-left: auto;
}

@media (max-width: 575.98px) {
  .emp-form-actions .btn-outline-secondary {
    margin-left: 0;
  }
}

/* Onboarding / joining process tracker (Edit Employee) */
.emp-onboarding-card > .card-body {
  padding: 0.65rem 0.85rem 0.75rem;
}

.emp-onboarding-stepper.stepper {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0;
  margin: 0.35rem 0 0.65rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
  -webkit-overflow-scrolling: touch;
}

.emp-onboarding-stepper .step {
  flex: 1 1 0;
  min-width: 4.75rem;
  max-width: 6.75rem;
}

.emp-onboarding-stepper .circle {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.emp-onboarding-stepper .step-label {
  font-size: 0.68rem;
  line-height: 1.25;
  margin-top: 0.3rem;
  max-width: 6.5rem;
}

.emp-onboarding-stepper .connector {
  flex: 0 0 0.85rem;
  width: 0.85rem;
  min-width: 0.85rem;
  height: 2px;
  margin: 0.8rem 0 0;
  align-self: flex-start;
}

.emp-onboarding-guide {
  font-size: 0.78rem;
  line-height: 1.4;
  color: #6c757d;
  margin-bottom: 0.65rem;
  padding: 0.5rem 0.65rem;
  background: #f7f9fb;
  border: 1px solid #eef0f4;
  border-radius: 0.35rem;
}

.emp-onboarding-guide-lead {
  margin-bottom: 0.35rem;
  color: #495057;
}

.emp-onboarding-guide-points {
  margin: 0;
  padding-left: 1.1rem;
}

.emp-onboarding-guide-points li + li {
  margin-top: 0.2rem;
}

.emp-onboarding-checklist {
  margin-top: 0.15rem;
  border: 1px solid #eef0f4;
  border-radius: 0.35rem;
}

.emp-onboarding-checklist .table {
  --bs-table-bg: transparent;
}

.emp-onboarding-checklist thead th {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #495057;
  background: #fafbfc;
  border-bottom-color: #e3e7ee;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.emp-onboarding-checklist tbody td {
  font-size: 0.84rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  vertical-align: middle;
}

/* Edit Employee live summary */
.emp-summary {
  border-radius: 0.45rem;
}

.emp-summary-body {
  padding: 0.65rem 0.85rem 0.7rem;
}

.emp-summary-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding-bottom: 0.65rem;
  margin-bottom: 0.55rem;
  border-bottom: 1px solid #eef0f4;
}

.emp-summary-identity-main {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  min-width: 0;
  flex: 1 1 16rem;
}

.emp-summary-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--navy);
  font-weight: 700;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.emp-summary-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  margin-bottom: 0.15rem;
}

.emp-summary-meta {
  font-size: 0.78rem;
  line-height: 1.35;
}

.emp-summary-meta-sep {
  margin: 0 0.25rem;
  color: #adb5bd;
}

.emp-summary-status-badge-wrap {
  margin-top: 0.35rem;
}

.emp-summary-status-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid #dee2e6;
  background: #f8f9fa;
  color: #495057;
}

.emp-summary-status-badge.is-active {
  background: #e8f6ec;
  border-color: #c6e6cd;
  color: #1b5e2a;
}

.emp-summary-status-badge.is-inactive {
  background: #f8f0f0;
  border-color: #e5c9c9;
  color: #842029;
}

.emp-summary-status-edit {
  flex: 0 1 13.5rem;
  min-width: 11rem;
  padding: 0.45rem 0.55rem 0.5rem;
  background: #fafbfc;
  border: 1px solid #eef0f4;
  border-radius: 0.35rem;
}

.emp-summary-edit-kicker {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6c757d;
}

.emp-summary-status-edit .form-label {
  font-weight: 600;
  color: #495057;
}

.emp-summary-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid #eef0f4;
  border-radius: 0.35rem;
  overflow: hidden;
  background: #fff;
}

.emp-summary-metric {
  appearance: none;
  border: 0;
  background: #fff;
  text-align: left;
  padding: 0.5rem 0.7rem;
  min-width: 0;
  cursor: pointer;
  border-right: 1px solid #eef0f4;
  transition: background 0.12s ease;
}

.emp-summary-metric:last-child {
  border-right: 0;
}

.emp-summary-metric:hover,
.emp-summary-metric:focus-visible {
  background: #f7f9fc;
  outline: none;
}

.emp-summary-metric:focus-visible {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.emp-summary-metric-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6c757d;
  margin-bottom: 0.15rem;
}

.emp-summary-metric-value {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emp-form-page .emp-form-field-flash {
  box-shadow: 0 0 0 0.2rem rgba(46, 83, 149, 0.25);
  border-color: var(--accent);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

@media (max-width: 991.98px) {
  .emp-summary-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .emp-summary-metric:nth-child(2n) {
    border-right: 0;
  }

  .emp-summary-metric:nth-child(-n+2) {
    border-bottom: 1px solid #eef0f4;
  }
}

@media (max-width: 575.98px) {
  .emp-summary-status-edit {
    flex-basis: 100%;
  }

  .emp-summary-metrics {
    grid-template-columns: 1fr;
  }

  .emp-summary-metric {
    border-right: 0;
    border-bottom: 1px solid #eef0f4;
  }

  .emp-summary-metric:last-child {
    border-bottom: 0;
  }

  .emp-summary-metric:nth-child(-n+2) {
    border-bottom: 1px solid #eef0f4;
  }
}

/* ---------- Attendance register (prototype-faithful) ---------- */
.att-cell {
  display: inline-block;
  width: 26px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  vertical-align: middle;
}

.att-cell-empty {
  font-weight: 400;
  color: transparent;
  background: transparent !important;
}

a.att-cell-empty:hover,
a.att-cell-empty:focus {
  color: #adb5bd;
  background: #e9ecef !important;
}

.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  margin-right: 0.65rem;
  margin-bottom: 0.25rem;
}

.legend-chip .swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
}

.att-legend-toggle {
  font-size: 0.78rem;
  color: #6c757d !important;
}

.att-legend-toggle .bi {
  transition: transform 0.15s ease;
}

.att-legend-toggle[aria-expanded="true"] .bi {
  transform: rotate(180deg);
}

.att-legend-body {
  max-width: 100%;
}

/* ---------- Shared HRMS dropdown system (.hrms-dd) ---------- */

/* Native selects ? match shared trigger chrome (single-select only). */
.form-select,
.form-select-sm {
  border-color: var(--hrms-dd-border);
  border-radius: var(--hrms-dd-radius);
  background-color: var(--hrms-dd-bg);
}

.form-select:focus,
.form-select-sm:focus {
  border-color: var(--hrms-dd-border-focus);
  box-shadow: 0 0 0 0.2rem rgba(46, 83, 149, 0.18);
}

.form-select-sm {
  min-height: var(--hrms-dd-trigger-height);
}

.hrms-dd-trigger {
  display: flex;
  align-items: center;
  min-height: var(--hrms-dd-trigger-height);
  max-height: var(--hrms-dd-trigger-height);
  border-color: var(--hrms-dd-border);
  border-radius: var(--hrms-dd-radius);
  background-color: var(--hrms-dd-bg);
  color: #212529;
  font-weight: 400;
  font-size: 0.8125rem;
  /* Reserve room for Bootstrap dropdown-toggle chevron on the right. */
  padding: 0.15rem 1.75rem 0.15rem 0.45rem;
  line-height: 1.25;
  overflow: hidden;
}

.hrms-dd-trigger:hover,
.hrms-dd-trigger:focus,
.hrms-dd.show > .hrms-dd-trigger {
  border-color: #adb5bd;
  background-color: var(--hrms-dd-bg);
  color: #212529;
}

.hrms-dd-trigger:focus,
.hrms-dd.show > .hrms-dd-trigger {
  border-color: var(--hrms-dd-border-focus);
  box-shadow: 0 0 0 0.15rem rgba(46, 83, 149, 0.15);
}

.hrms-dd-trigger-content {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
  max-width: 100%;
  overflow: hidden;
}

.hrms-dd-summary {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #212529;
  font-size: 0.8125rem;
  font-weight: 400;
}

.hrms-dd-summary.is-empty {
  color: var(--hrms-dd-muted);
}

/* Multi-select menu: dense filter panel, width tied to trigger. */
.hrms-multi > .hrms-dd-menu {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  padding: 0;
  border: 1px solid var(--hrms-dd-border);
  border-radius: var(--hrms-dd-radius);
  box-shadow: var(--hrms-dd-shadow);
  overflow: hidden;
}

.hrms-dd-menu {
  padding: 0;
  border: 1px solid var(--hrms-dd-border);
  border-radius: var(--hrms-dd-radius);
  box-shadow: var(--hrms-dd-shadow);
  overflow: hidden;
}

.hrms-dd-search {
  padding: 0.3rem var(--hrms-dd-pad-x);
  border-bottom: 1px solid #e9ecef;
}

.hrms-dd-search-input {
  height: 1.6rem;
  min-height: 1.6rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.75rem;
  line-height: 1.25;
  border-radius: 0.25rem;
}

.hrms-dd-search-input:focus {
  box-shadow: 0 0 0 0.12rem rgba(46, 83, 149, 0.15);
}

/* Dropdown Select all row (Emp Master-style option chrome; panel has its own denser rules). */
.hrms-multi:not(.hrms-multi-panel) .hrms-dd-select-all-row {
  display: flex;
  align-items: center;
  padding: 0.2rem var(--hrms-dd-pad-x);
  border-bottom: 1px solid #e9ecef;
  background: #fff;
}

.hrms-multi:not(.hrms-multi-panel) .hrms-dd-select-all-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  margin: 0;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.25;
  color: #212529;
  white-space: nowrap;
}

.hrms-multi:not(.hrms-multi-panel) .hrms-dd-select-all-check.form-check-input {
  float: none;
  position: static;
  flex: 0 0 auto;
  width: 0.9rem;
  height: 0.9rem;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  cursor: pointer;
}

.hrms-dd-options {
  max-height: var(--hrms-dd-menu-max-height);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.15rem 0;
  scrollbar-width: thin;
}

.hrms-dd-options::-webkit-scrollbar {
  width: 5px;
}

.hrms-dd-options::-webkit-scrollbar-thumb {
  background: #c5cdd8;
  border-radius: 999px;
}

/* Avoid Bootstrap .form-check negative margin clipping the checkbox. */
.hrms-multi .hrms-dd-menu .hrms-dd-option.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.2rem var(--hrms-dd-pad-x);
  min-height: 0;
  white-space: nowrap;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.25;
  overflow: hidden;
}

.hrms-multi .hrms-dd-menu .hrms-dd-option.dropdown-item:hover,
.hrms-multi .hrms-dd-menu .hrms-dd-option.dropdown-item:focus {
  background-color: var(--accent-light);
}

.hrms-multi .hrms-dd-menu .hrms-dd-option .hrms-dd-check.form-check-input {
  float: none;
  position: static;
  flex: 0 0 auto;
  width: 0.9rem;
  height: 0.9rem;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

.hrms-multi .hrms-dd-menu .hrms-dd-option .hrms-dd-option-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hrms-dd-empty-options {
  padding: 0.35rem var(--hrms-dd-pad-x) !important;
  font-size: 0.75rem;
}

.hrms-dd-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem var(--hrms-dd-pad-x);
  border-top: 1px solid #e9ecef;
  background: #f8f9fa;
  min-height: 0;
}

.hrms-dd-footer-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex: 0 0 auto;
}

/* Bonus Configuration ? form presentation (Create / Edit) */
.bonus-config-form {
  --bonus-navy: #1f3a68;
  --bonus-blue: #2563eb;
  --bonus-primary: #31549a;
  --bonus-body: #1f2937;
  --bonus-muted: #6b7280;
  --bonus-border: #d1d5db;
  --bonus-divider: #e5e7eb;
  --bonus-radius: 12px;
  --bonus-input-radius: 8px;
  color: var(--bonus-body);
}

.bonus-config-form .bonus-config-form-shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.bonus-config-form .bonus-config-form-shell:not(.bonus-config-form-shell-modal) {
  max-width: 560px;
}

.bonus-config-form:not(.md-modal-form) .bonus-config-form-body {
  padding: 0;
}

.bonus-config-form .bonus-config-section {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--bonus-divider);
}

.bonus-config-form .bonus-config-section-last {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.bonus-config-form .bonus-config-section-title {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bonus-navy);
}

.bonus-config-form .bonus-config-field {
  margin-bottom: 0.75rem;
}

.bonus-config-form .bonus-config-field:last-child {
  margin-bottom: 0;
}

.bonus-config-form .bonus-config-label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--bonus-body);
  margin-bottom: 0.35rem;
}

.bonus-config-form .bonus-config-input.form-control,
.bonus-config-form .bonus-config-input.form-select,
.bonus-config-form .bonus-config-amount .form-control {
  border: 1px solid var(--bonus-border);
  border-radius: var(--bonus-input-radius);
  font-size: 0.9375rem;
  color: var(--bonus-body);
  background-color: #fff;
}

.bonus-config-form .bonus-config-input.form-control:focus,
.bonus-config-form .bonus-config-input.form-select:focus,
.bonus-config-form .bonus-config-amount .form-control:focus {
  border-color: var(--bonus-blue);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.15);
}

.bonus-config-form .bonus-config-amount .input-group-text {
  background: #f9fafb;
  border: 1px solid var(--bonus-border);
  border-right: 0;
  border-radius: var(--bonus-input-radius) 0 0 var(--bonus-input-radius);
  color: var(--bonus-muted);
  font-weight: 600;
}

.bonus-config-form .bonus-config-amount .form-control {
  border-radius: 0 var(--bonus-input-radius) var(--bonus-input-radius) 0;
}

.bonus-config-form .bonus-config-help {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: var(--bonus-muted);
  line-height: 1.35;
}

.bonus-config-form .bonus-scope-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

@media (max-width: 480px) {
  .bonus-config-form .bonus-scope-cards {
    grid-template-columns: 1fr;
  }
}

.bonus-config-form .bonus-scope-card {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.bonus-config-form .bonus-scope-card-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.bonus-config-form .bonus-scope-card-face {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  min-height: 100%;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--bonus-border);
  border-radius: var(--bonus-input-radius);
  background: #fff;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.bonus-config-form .bonus-scope-card-input:checked + .bonus-scope-card-face {
  border-color: #93c5fd;
  background: #eff6ff;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12);
}

.bonus-config-form .bonus-scope-card-input:focus-visible + .bonus-scope-card-face {
  outline: 2px solid var(--bonus-blue);
  outline-offset: 2px;
}

.bonus-config-form .bonus-scope-card-radio {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  border: 2px solid #9ca3af;
  border-radius: 50%;
  position: relative;
  background: #fff;
}

.bonus-config-form .bonus-scope-card-input:checked + .bonus-scope-card-face .bonus-scope-card-radio {
  border-color: var(--bonus-blue);
}

.bonus-config-form .bonus-scope-card-input:checked + .bonus-scope-card-face .bonus-scope-card-radio::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--bonus-blue);
}

.bonus-config-form .bonus-scope-card-icon {
  flex: 0 0 auto;
  font-size: 1.15rem;
  line-height: 1;
  margin-top: 0.1rem;
  color: var(--bonus-navy);
}

.bonus-config-form .bonus-scope-card-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.bonus-config-form .bonus-scope-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bonus-navy);
  line-height: 1.25;
}

.bonus-config-form .bonus-scope-card-sub {
  font-size: 0.75rem;
  color: var(--bonus-muted);
  line-height: 1.3;
}

.bonus-config-form .bonus-scope-all-info {
  display: none;
  align-items: flex-start;
  gap: 0.45rem;
  margin-top: 0.65rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--bonus-input-radius);
  background: #eff6ff;
  color: #1e40af;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.bonus-config-form .bonus-scope-all-info .bi {
  flex: 0 0 auto;
  margin-top: 0.1rem;
  color: var(--bonus-blue);
}

form[data-bonus-employee-scope]:has([data-bonus-scope="all"]:checked) .bonus-scope-all-info {
  display: flex;
}

form[data-bonus-employee-scope]:has([data-bonus-scope="all"]:checked) [data-bonus-employee-picker] {
  display: none !important;
}

.bonus-config-form .bonus-employee-picker {
  margin-top: 0.65rem;
}

.bonus-config-form .bonus-remarks-wrap {
  position: relative;
}

.bonus-config-form .bonus-config-remarks {
  padding-bottom: 1.6rem;
  resize: vertical;
  min-height: 5.5rem;
}

.bonus-config-form .bonus-remarks-counter {
  position: absolute;
  right: 0.65rem;
  bottom: 0.4rem;
  font-size: 0.75rem;
  color: var(--bonus-muted);
  pointer-events: none;
}

.bonus-config-form .bonus-config-active {
  margin-top: 0.85rem;
}

.bonus-config-form .bonus-config-switch {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding-left: 2.75em;
  min-height: auto;
}

.bonus-config-form .bonus-config-switch .form-check-input {
  width: 2.25rem;
  height: 1.25rem;
  margin-left: -2.75em;
  margin-top: 0.15rem;
  background-color: #cbd5e1;
  border-color: #cbd5e1;
  cursor: pointer;
}

.bonus-config-form .bonus-config-switch .form-check-input:checked {
  background-color: var(--bonus-blue);
  border-color: var(--bonus-blue);
}

.bonus-config-form .bonus-config-switch .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
}

.bonus-config-form .bonus-config-switch .form-check-label {
  cursor: pointer;
}

.bonus-config-form .bonus-config-active-title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bonus-body);
  line-height: 1.25;
}

.bonus-config-form .bonus-config-active-help {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--bonus-muted);
  line-height: 1.35;
}

.bonus-config-form .bonus-config-form-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--bonus-divider);
}

.bonus-config-form .bonus-config-btn-cancel {
  color: #6b7280;
  background: #fff;
  border: 1px solid #9ca3af;
  border-radius: var(--bonus-input-radius);
  padding: 0.4rem 0.9rem;
  font-weight: 500;
  text-decoration: none;
}

.bonus-config-form .bonus-config-btn-cancel:hover {
  color: #374151;
  background: #f9fafb;
  border-color: #6b7280;
}

.bonus-config-form .bonus-config-btn-save {
  color: #fff;
  background: var(--bonus-primary);
  border: 1px solid var(--bonus-primary);
  border-radius: var(--bonus-input-radius);
  padding: 0.4rem 1.1rem;
  font-weight: 600;
}

.bonus-config-form .bonus-config-btn-save:hover {
  background: var(--bonus-blue);
  border-color: var(--bonus-blue);
  color: #fff;
}

/* Bonus modal shell ? keep host dialog size; refine chrome only when bonus form is loaded */
#mdFormModal.md-modal-bonus .modal-content {
  border: 0;
  border-radius: var(--bonus-radius, 12px);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

#mdFormModal.md-modal-bonus .modal-header {
  align-items: flex-start;
  padding: 1rem 1.15rem 0.85rem;
  border-bottom: 1px solid #e5e7eb;
}

#mdFormModal.md-modal-bonus .modal-title {
  color: #1f3a68;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}

#mdFormModal.md-modal-bonus .md-modal-subtitle {
  margin-top: 0.2rem;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.35;
}

#mdFormModal.md-modal-bonus .btn-close {
  margin-top: 0.15rem;
  opacity: 1;
  filter: none;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236B7280'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707A1 1 0 0 1 .293.293z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

#mdFormModal.md-modal-bonus .modal-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#mdFormModal.md-modal-bonus .bonus-config-form.md-modal-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  background: #fff;
}

#mdFormModal.md-modal-bonus .bonus-config-form-shell {
  height: 100%;
  min-height: 0;
}

#mdFormModal.md-modal-bonus .bonus-config-form-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.15rem;
}

#mdFormModal.md-modal-bonus .bonus-config-form-footer {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 0.85rem 1.15rem;
  background: #fff;
}

/* Night Allowance Edit ? Bonus presentation packages A/B/C/E/G (scoped; does not alter Bonus markup) */
.night-allowance-form {
  --na-navy: #1f3a68;
  --na-blue: #2563eb;
  --na-primary: #31549a;
  --na-body: #1f2937;
  --na-muted: #6b7280;
  --na-border: #d1d5db;
  --na-divider: #e5e7eb;
  --na-radius: 12px;
  --na-input-radius: 8px;
  color: var(--na-body);
}

.night-allowance-form .na-form-shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.night-allowance-form .na-form-shell:not(.na-form-shell-modal) {
  max-width: 560px;
}

.night-allowance-form:not(.md-modal-form) .na-form-body {
  padding: 0;
}

.night-allowance-form .na-form-section {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--na-divider);
}

.night-allowance-form .na-form-section-last {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.night-allowance-form .na-form-section-title {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--na-navy);
}

.night-allowance-form .na-form-field {
  margin-bottom: 0.75rem;
}

.night-allowance-form .na-form-field:last-child {
  margin-bottom: 0;
}

.night-allowance-form .na-form-label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--na-body);
  margin-bottom: 0.35rem;
}

.night-allowance-form .na-form-input.form-control,
.night-allowance-form .na-form-amount .form-control {
  border: 1px solid var(--na-border);
  border-radius: var(--na-input-radius);
  font-size: 0.9375rem;
  color: var(--na-body);
  background-color: #fff;
}

.night-allowance-form .na-form-input.form-control:focus,
.night-allowance-form .na-form-amount .form-control:focus {
  border-color: var(--na-blue);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.15);
}

.night-allowance-form .na-form-amount .input-group-text {
  background: #f9fafb;
  border: 1px solid var(--na-border);
  border-right: 0;
  border-radius: var(--na-input-radius) 0 0 var(--na-input-radius);
  color: var(--na-muted);
  font-weight: 600;
}

.night-allowance-form .na-form-amount .form-control {
  border-radius: 0 var(--na-input-radius) var(--na-input-radius) 0;
}

.night-allowance-form .na-form-help {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: var(--na-muted);
  line-height: 1.35;
}

.night-allowance-form .na-form-picker {
  margin-top: 0.15rem;
}

.night-allowance-form .night-category-multi.hrms-multi-panel {
  max-width: 100%;
}

/* Shared Active/Inactive toggle (Attendance Code pattern). Works in Night Allowance and other Master Data forms. */
.na-form-active {
  --na-blue: #2563eb;
  --na-body: #1f2937;
  --na-muted: #6b7280;
  margin-top: 0.15rem;
}

.na-form-switch {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding-left: 2.75em;
  min-height: auto;
}

.na-form-switch .form-check-input {
  width: 2.25rem;
  height: 1.25rem;
  margin-left: -2.75em;
  margin-top: 0.15rem;
  background-color: #cbd5e1;
  border-color: #cbd5e1;
  cursor: pointer;
}

.na-form-switch .form-check-input:checked {
  background-color: var(--na-blue);
  border-color: var(--na-blue);
}

.na-form-switch .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
}

.na-form-switch .form-check-label {
  cursor: pointer;
}

.na-form-active-title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--na-body);
  line-height: 1.25;
}

.na-form-active-help {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--na-muted);
  line-height: 1.35;
}

.night-allowance-form .na-form-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--na-divider);
}

.night-allowance-form .na-form-btn-cancel {
  color: #6b7280;
  background: #fff;
  border: 1px solid #9ca3af;
  border-radius: var(--na-input-radius);
  padding: 0.4rem 0.9rem;
  font-weight: 500;
  text-decoration: none;
}

.night-allowance-form .na-form-btn-cancel:hover {
  color: #374151;
  background: #f9fafb;
  border-color: #6b7280;
}

.night-allowance-form .na-form-btn-save {
  color: #fff;
  background: var(--na-primary);
  border: 1px solid var(--na-primary);
  border-radius: var(--na-input-radius);
  padding: 0.4rem 1.1rem;
  font-weight: 600;
}

.night-allowance-form .na-form-btn-save:hover {
  background: var(--na-blue);
  border-color: var(--na-blue);
  color: #fff;
}

#mdFormModal.md-modal-night .modal-content {
  border: 0;
  border-radius: var(--na-radius, 12px);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

#mdFormModal.md-modal-night .modal-header {
  align-items: flex-start;
  padding: 1rem 1.15rem 0.85rem;
  border-bottom: 1px solid #e5e7eb;
}

#mdFormModal.md-modal-night .modal-title {
  color: #1f3a68;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}

#mdFormModal.md-modal-night .md-modal-subtitle {
  margin-top: 0.2rem;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.35;
}

#mdFormModal.md-modal-night .btn-close {
  margin-top: 0.15rem;
  opacity: 1;
  filter: none;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236B7280'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707A1 1 0 0 1 .293.293z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

#mdFormModal.md-modal-night .modal-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#mdFormModal.md-modal-night .night-allowance-form.md-modal-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  background: #fff;
}

#mdFormModal.md-modal-night .na-form-shell {
  height: 100%;
  min-height: 0;
}

#mdFormModal.md-modal-night .na-form-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.15rem;
}

/* Emp Master-style multi-select menus must not be clipped by modal overflow. */
#mdFormModal.md-modal-night.modal:has(.hrms-multi.show) .modal-content,
#mdFormModal.md-modal-night.modal:has(.hrms-multi.show) .modal-body,
#mdFormModal.md-modal-night.modal:has(.hrms-multi.show) .na-form-body {
  overflow: visible;
}

#mdFormModal.md-modal-night .na-form-footer {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 0.85rem 1.15rem;
  background: #fff;
}

/* Shared Master Data config forms (Salary Components, PT Slabs, Presentee, Designations) */
.md-config-form {
  --mdc-navy: #1f3a68;
  --mdc-blue: #2563eb;
  --mdc-primary: #31549a;
  --mdc-body: #1f2937;
  --mdc-muted: #6b7280;
  --mdc-border: #d1d5db;
  --mdc-divider: #e5e7eb;
  --mdc-radius: 12px;
  --mdc-input-radius: 8px;
  color: var(--mdc-body);
}

.md-config-form .md-config-shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.md-config-form .md-config-shell:not(.md-config-shell-modal) {
  max-width: 480px;
}

.md-config-form:not(.md-modal-form) .md-config-body {
  padding: 0;
}

.md-config-form .md-config-section {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--mdc-divider);
}

.md-config-form .md-config-section-last {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.md-config-form .md-config-section-title {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--mdc-navy);
}

.md-config-form .md-config-field {
  margin-bottom: 0.75rem;
}

.md-config-form .md-config-field:last-child {
  margin-bottom: 0;
}

.md-config-form .md-config-label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--mdc-body);
  margin-bottom: 0.35rem;
}

.md-config-form .md-config-input.form-control,
.md-config-form .md-config-input.form-select,
.md-config-form .md-config-amount .form-control {
  border: 1px solid var(--mdc-border);
  border-radius: var(--mdc-input-radius);
  font-size: 0.9375rem;
  color: var(--mdc-body);
  background-color: #fff;
}

.md-config-form .md-config-input.form-control:focus,
.md-config-form .md-config-input.form-select:focus,
.md-config-form .md-config-amount .form-control:focus {
  border-color: var(--mdc-blue);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.15);
}

.md-config-form .md-config-amount .input-group-text {
  background: #f9fafb;
  border: 1px solid var(--mdc-border);
  color: var(--mdc-muted);
  font-weight: 600;
}

.md-config-form .md-config-amount:not(.md-config-amount-suffix) .input-group-text {
  border-right: 0;
  border-radius: var(--mdc-input-radius) 0 0 var(--mdc-input-radius);
}

.md-config-form .md-config-amount:not(.md-config-amount-suffix) .form-control {
  border-radius: 0 var(--mdc-input-radius) var(--mdc-input-radius) 0;
}

.md-config-form .md-config-amount-suffix .form-control {
  border-right: 0;
  border-radius: var(--mdc-input-radius) 0 0 var(--mdc-input-radius);
}

.md-config-form .md-config-amount-suffix .input-group-text {
  border-left: 0;
  border-radius: 0 var(--mdc-input-radius) var(--mdc-input-radius) 0;
}

.md-config-form .md-config-help {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: var(--mdc-muted);
  line-height: 1.35;
}

.md-config-form .md-config-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  padding-left: 1.6em;
  min-height: auto;
}

.md-config-form .md-config-check .form-check-input {
  margin-left: -1.6em;
  margin-top: 0.2rem;
  border-color: #9ca3af;
  cursor: pointer;
}

.md-config-form .md-config-check .form-check-input:checked {
  background-color: var(--mdc-blue);
  border-color: var(--mdc-blue);
}

.md-config-form .md-config-check .form-check-label {
  cursor: pointer;
}

.md-config-form .md-config-check-title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--mdc-body);
  line-height: 1.25;
}

.md-config-form .md-config-check-help {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--mdc-muted);
  line-height: 1.35;
}

.md-config-form .md-config-active {
  margin-top: 0.15rem;
}

.md-config-form .md-config-switch {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding-left: 2.75em;
  min-height: auto;
}

.md-config-form .md-config-switch .form-check-input {
  width: 2.25rem;
  height: 1.25rem;
  margin-left: -2.75em;
  margin-top: 0.15rem;
  background-color: #cbd5e1;
  border-color: #cbd5e1;
  cursor: pointer;
}

.md-config-form .md-config-switch .form-check-input:checked {
  background-color: var(--mdc-blue);
  border-color: var(--mdc-blue);
}

.md-config-form .md-config-switch .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
}

.md-config-form .md-config-switch .form-check-label {
  cursor: pointer;
}

.md-config-form .md-config-active-title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--mdc-body);
  line-height: 1.25;
}

.md-config-form .md-config-active-help {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--mdc-muted);
  line-height: 1.35;
}

.md-config-form .md-config-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--mdc-divider);
}

.md-config-form .md-config-btn-cancel {
  color: #6b7280;
  background: #fff;
  border: 1px solid #9ca3af;
  border-radius: var(--mdc-input-radius);
  padding: 0.4rem 0.9rem;
  font-weight: 500;
  text-decoration: none;
}

.md-config-form .md-config-btn-cancel:hover {
  color: #374151;
  background: #f9fafb;
  border-color: #6b7280;
}

.md-config-form .md-config-btn-save {
  color: #fff;
  background: var(--mdc-primary);
  border: 1px solid var(--mdc-primary);
  border-radius: var(--mdc-input-radius);
  padding: 0.4rem 1.1rem;
  font-weight: 600;
}

.md-config-form .md-config-btn-save:hover {
  background: var(--mdc-blue);
  border-color: var(--mdc-blue);
  color: #fff;
}

#mdFormModal.md-modal-config .modal-content {
  border: 0;
  border-radius: var(--mdc-radius, 12px);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

#mdFormModal.md-modal-config .modal-header {
  align-items: flex-start;
  padding: 1rem 1.15rem 0.85rem;
  border-bottom: 1px solid #e5e7eb;
}

#mdFormModal.md-modal-config .modal-title {
  color: #1f3a68;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}

#mdFormModal.md-modal-config .md-modal-subtitle {
  margin-top: 0.2rem;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.35;
}

#mdFormModal.md-modal-config .btn-close {
  margin-top: 0.15rem;
  opacity: 1;
  filter: none;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236B7280'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707A1 1 0 0 1 .293.293z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

#mdFormModal.md-modal-config .modal-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#mdFormModal.md-modal-config .md-config-form.md-modal-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  background: #fff;
}

#mdFormModal.md-modal-config .md-config-shell {
  height: 100%;
  min-height: 0;
}

#mdFormModal.md-modal-config .md-config-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.15rem;
}

#mdFormModal.md-modal-config .md-config-footer {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 0.85rem 1.15rem;
  background: #fff;
}

.hrms-dd-count {
  font-size: 0.7rem;
  color: var(--hrms-dd-muted);
  font-weight: 500;
  line-height: 1.2;
}

.hrms-dd-clear {
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  color: var(--accent);
  padding: 0 !important;
}

.hrms-dd-clear:hover {
  color: var(--navy);
}

/* Inline multi-select panel (Bonus Configuration Selected Employees) */
.hrms-multi-panel {
  width: 100%;
}

.hrms-multi-panel .hrms-dd-panel {
  display: flex;
  flex-direction: column;
  position: static;
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: none;
  background: #fff;
  overflow: hidden;
  transform: none !important;
}

.hrms-multi-panel .hrms-dd-search-panel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid #e5e7eb;
}

.hrms-multi-panel .hrms-dd-search-icon {
  flex: 0 0 auto;
  color: #9ca3af;
  font-size: 0.9rem;
  line-height: 1;
}

.hrms-multi-panel .hrms-dd-search-panel .hrms-dd-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  height: auto;
  min-height: 0;
  font-size: 0.875rem;
  color: #1f3a68;
  background: transparent;
}

.hrms-multi-panel .hrms-dd-search-panel .hrms-dd-search-input::placeholder {
  color: #9ca3af;
}

.hrms-multi-panel .hrms-dd-search-panel .hrms-dd-search-input:focus {
  border: 0;
  box-shadow: none;
  outline: none;
}

.hrms-multi-panel .hrms-dd-select-all-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
}

.hrms-multi-panel .hrms-dd-select-all-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  cursor: pointer;
  color: #1f3a68;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
}

.hrms-multi-panel .hrms-dd-select-all-check.form-check-input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  flex: 0 0 auto;
  border-color: #9ca3af;
  cursor: pointer;
}

.hrms-multi-panel .hrms-dd-select-all-check.form-check-input:checked,
.hrms-multi-panel .hrms-dd-option .hrms-dd-check.form-check-input:checked {
  background-color: #2563eb;
  border-color: #2563eb;
}

.hrms-multi-panel .hrms-dd-select-all-check.form-check-input:focus,
.hrms-multi-panel .hrms-dd-option .hrms-dd-check.form-check-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.18);
}

.hrms-multi-panel .hrms-dd-applicable-count {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  line-height: 1.2;
  white-space: nowrap;
}

.hrms-multi-panel .hrms-dd-options {
  max-height: 11.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  min-height: 0;
}

.hrms-multi-panel .hrms-dd-options::-webkit-scrollbar {
  width: 6px;
}

.hrms-multi-panel .hrms-dd-options::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

.hrms-multi-panel .hrms-dd-menu .hrms-dd-option.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.7rem;
  color: #1f3a68;
  font-size: 0.875rem;
  line-height: 1.3;
  white-space: normal;
  border-radius: 0;
  cursor: pointer;
}

.hrms-multi-panel .hrms-dd-menu .hrms-dd-option.dropdown-item:hover,
.hrms-multi-panel .hrms-dd-menu .hrms-dd-option.dropdown-item:focus {
  background: #f8fafc;
  color: #1f3a68;
}

.hrms-multi-panel .hrms-dd-menu .hrms-dd-option.is-selected {
  background: #f8fafc;
}

.hrms-multi-panel .hrms-dd-menu .hrms-dd-option .hrms-dd-check.form-check-input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  flex: 0 0 auto;
  border-color: #9ca3af;
  cursor: pointer;
}

.hrms-multi-panel .hrms-dd-menu .hrms-dd-option .hrms-dd-option-label {
  flex: 1 1 auto;
  min-width: 0;
  color: #1f3a68;
}

.hrms-multi-panel .hrms-dd-empty-options {
  padding: 0.75rem 0.7rem !important;
  font-size: 0.8125rem;
  color: #6b7280;
}

.hrms-multi-panel .hrms-dd-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex: 0 0 auto;
  margin: 0;
  padding: 0.45rem 0.7rem;
  border-top: 1px solid #e5e7eb;
  background: #fff;
}

.hrms-multi-panel .hrms-dd-count {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 500;
}

.hrms-multi-panel .hrms-dd-clear {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
  padding: 0 !important;
}

.hrms-multi-panel .hrms-dd-clear:hover {
  color: #1d4ed8;
}

.bonus-config-form .bonus-employee-multi.hrms-multi-panel {
  max-width: 100%;
}

/* Compact Attendance Register filter: primary filters, then actions. */
.att-filter-card {
  border-color: #e1e6ed;
}

.att-filter-card > .card-body {
  padding: 0.7rem 0.85rem !important;
}

.att-filter-form .att-filter-primary {
  row-gap: 0.5rem;
}

.att-filter-form .att-filter-primary .form-label {
  margin-bottom: 0.15rem;
  font-weight: 600;
}

.att-filter-form .form-select,
.att-filter-form .form-control,
.att-filter-form .att-period-toggle-label,
.att-filter-form .att-period-toggle,
.att-filter-form .hrms-dd-trigger {
  font-weight: 400;
}

.att-filter-form .att-filter-month {
  width: 13.75rem; /* ~220px ? matches prior compact Month width */
}

.att-filter-form .att-filter-search {
  width: 12.5rem; /* 200px */
}

.att-filter-form .att-filter-multi {
  width: 10.5rem; /* ~168px */
}

.att-filter-form .att-filter-multi-sm {
  width: 9.25rem; /* ~148px */
}

.att-filter-form .att-filter-primary .form-select-sm,
.att-filter-form .att-filter-primary .form-control-sm,
.att-filter-form .att-filter-primary .hrms-dd-trigger,
.att-filter-form .att-filter-primary .att-period-toggle {
  height: var(--hrms-dd-trigger-height);
  min-height: var(--hrms-dd-trigger-height);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  line-height: 1.5;
}

.att-filter-form .att-filter-secondary {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid #eef0f4;
}

.att-filter-form .att-filter-secondary .btn-sm {
  height: var(--hrms-dd-trigger-height);
}

/* Shared filter Clear ? subtle light-gray fill (not outline). */
.btn.btn-hrms-filter-clear {
  color: #495057;
  background-color: #f1f3f5;
  border-color: #ced4da;
}

.btn.btn-hrms-filter-clear:hover,
.btn.btn-hrms-filter-clear:focus-visible {
  color: #343a40;
  background-color: #e9ecef;
  border-color: #adb5bd;
}

.btn.btn-hrms-filter-clear:active,
.btn.btn-hrms-filter-clear.active {
  color: #343a40;
  background-color: #dee2e6;
  border-color: #adb5bd;
}

.att-filter-utilities {
  padding-left: 0.65rem;
  border-left: 1px solid #e3e7ee;
}

/* Shared table metadata row: context left, Showing + Per page right. */
.hrms-table-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  padding: 0.28rem 0.75rem;
  background: #fafbfc;
  border-bottom: 1px solid #dee2e6;
  line-height: 1.35;
  min-height: 1.85rem;
  font-size: 0.8125rem;
  color: #6c757d;
}

.hrms-table-meta-context {
  flex: 1 1 12rem;
  min-width: 0;
}

.hrms-table-meta-controls {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem 0.5rem;
  margin-left: auto;
  flex: 0 1 auto;
}

.hrms-table-meta-range {
  white-space: nowrap;
}

.hrms-table-meta-sep {
  color: #adb5bd;
  user-select: none;
  line-height: 1;
}

.hrms-table-meta-pagesize {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.hrms-table-meta-pagesize label {
  margin-bottom: 0;
  font-size: 0.78rem;
  color: #6c757d;
  white-space: nowrap;
  font-weight: 400;
}

.hrms-table-meta-pagesize .form-select {
  width: 4.75rem;
  font-weight: 400;
}

@media (max-width: 575.98px) {
  .hrms-table-meta-controls {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }

  .hrms-table-meta-range {
    white-space: normal;
  }
}

.att-filter-legend {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

/* Month picker: Month+Year primary, status secondary (native select kept for submit/e2e). */
.att-period-field {
  position: relative;
  width: 100%;
}

.att-period-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none;
}

.att-period-picker {
  position: relative;
  width: 100%;
}

.att-period-picker .att-period-toggle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.att-period-menu.hrms-dd-menu,
.att-period-menu {
  /* Grow to fit Month+Year and full status side-by-side; never narrower than the toggle. */
  width: max-content;
  min-width: 100%;
  max-width: min(22rem, calc(100vw - 2rem));
  max-height: 18rem;
  overflow-y: auto;
  padding: 0.25rem;
}

.att-period-menu .att-period-option.dropdown-item.hrms-dd-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  align-items: baseline;
  padding: 0.4rem 0.65rem;
  font-size: 0.8125rem;
  white-space: normal;
  border-radius: calc(var(--hrms-dd-radius) - 0.1rem);
}

.att-period-menu .att-period-option .att-period-month {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: #212529;
  text-align: left;
}

.att-period-menu .att-period-option .att-period-status {
  justify-self: end;
  font-size: 0.7rem;
  font-weight: 500;
  color: #6c757d;
  text-align: right;
  white-space: nowrap;
}

.att-period-option.active,
.att-period-option.active:hover {
  background-color: var(--accent-light, #eef5fb);
}

.att-period-option.active .att-period-month {
  color: var(--accent, #2c5f8a);
}

.att-period-option.active .att-period-status {
  color: #5b8db8;
}

.att-register-scroll {
  /* Keep the grid in the viewport below the sticky page header + filter chrome. */
  max-height: calc(100vh - var(--hrms-topbar-height) - 14rem);
  overflow: auto;
  /* Contain table sticky z-index so thead never paints over #topbar. */
  position: relative;
  z-index: 0;
  isolation: isolate;
  background: #fff;
}

.att-register-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.att-register-table thead th {
  position: sticky;
  background: var(--navy);
  color: #fff;
  box-shadow: inset 0 -1px 0 #163056;
}

/* Section group labels (row 1) + column headers (row 2). Stick within .att-register-scroll. */
.att-register-table thead tr.att-section-row th {
  top: 0;
  z-index: 10; /* default for scrolling section headers; frozen block overrides higher */
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #dce6f1;
  background: #182f55;
  padding-top: 0.28rem;
  padding-bottom: 0.28rem;
  white-space: nowrap;
}

.att-register-table thead tr.att-col-row th {
  top: var(--att-section-row-height);
  z-index: 9; /* default for scrolling col headers; frozen emp/name/dept override higher */
  background: var(--navy);
  color: #fff;
}

/* WTI Register: one header row only (no att-section-row) — col headers stick at top: 0. */
.att-register-table.att-register-single-header thead tr.att-col-row th {
  top: 0;
}

.att-register-table .att-section-summary {
  border-left: 1px solid #dee2e6;
}

.att-register-table .att-section-days {
  border-left: 1px solid #dee2e6;
}

/* Fixed equal width so each day header sits directly above its cell. */
.att-register-table .att-day-col {
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  padding: 0.2rem 0 !important;
  vertical-align: middle;
}

.att-register-table th.att-day-head {
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.att-register-table .att-day-today {
  background-color: #eef5fb;
}

.att-register-table th.att-day-today {
  background-color: #294a7d !important;
  box-shadow: inset 0 -3px 0 #b8d0eb;
}

.att-register-table .att-meta-col {
  width: 4.5rem;
  min-width: 4.5rem;
}

.att-register-table .att-meta-col-name {
  width: 10rem;
  min-width: 10rem;
  max-width: 10rem;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
}

a.att-name-cell {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  width: 100%;
  min-height: 2rem;
  padding: 0.2rem 0.4rem;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0.2rem;
  box-sizing: border-box;
}

a.att-name-cell:hover,
a.att-name-cell:focus {
  color: inherit;
  background: rgba(46, 83, 149, 0.08);
  outline: none;
}

a.att-name-cell:focus-visible {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.att-name-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.att-name-action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  color: #8a96a3;
  line-height: 1;
}

.att-name-action .bi {
  font-size: 0.72rem;
}

.att-name-action-label {
  display: none;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

a.att-name-cell:hover .att-name-action,
a.att-name-cell:focus .att-name-action {
  color: var(--accent);
}

a.att-name-cell:hover .att-name-action-label,
a.att-name-cell:focus .att-name-action-label {
  display: inline;
}

.att-register-table .att-meta-col-dept {
  width: 6.5rem;
  min-width: 6.5rem;
  max-width: 6.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.att-register-table .att-total-col {
  width: 3.4rem;
  min-width: 3.4rem;
  white-space: nowrap;
}

.att-register-table .att-summary-start,
.att-register-table .att-days-start {
  border-left: 1px solid #dee2e6;
}

/*
 * Sticky stacking (inside .att-register-scroll isolation):
 *   30  ? EMPLOYEE group corner (top + left)
 *   26?28 ? Emp Code / Name / Dept column headers (top + left)
 *   5?7 ? frozen body cells (left only)
 *   9?10 ? scrolling Monthly Summary / Daily Attendance headers (top only)
 *   1 ? normal body cells (auto / default)
 * Keep all values well below #topbar (1020).
 */
.att-register-table .att-freeze-emp,
.att-register-table .att-freeze-name,
.att-register-table .att-freeze-dept,
.att-register-table .att-freeze-block {
  position: sticky;
  background: #fff;
}

.att-register-table .att-freeze-block {
  left: 0;
  min-width: 21rem; /* Emp + Name + Dept */
  box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.18);
  background: #f1f3f5;
}

.att-register-table .att-freeze-emp {
  left: 0;
}

.att-register-table .att-freeze-name {
  left: 4.5rem; /* Emp Code width */
}

.att-register-table .att-freeze-dept {
  left: 14.5rem; /* Emp Code + Name (10rem) */
  box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.18);
}

/* Scrolling sticky headers ? below frozen Employee headers (specificity matches row rules). */
.att-register-table thead tr.att-section-row th.att-section-summary,
.att-register-table thead tr.att-section-row th.att-section-days {
  z-index: 10;
  background: #182f55;
}

.att-register-table thead tr.att-col-row th.att-total-col,
.att-register-table thead tr.att-col-row th.att-day-head {
  z-index: 9;
  background: var(--navy);
}

/* Frozen Employee headers ? must beat the generic section/col row z-index rules above. */
.att-register-table thead tr.att-section-row th.att-freeze-block {
  z-index: 30;
  background: #182f55;
}

.att-register-table thead tr.att-col-row th.att-freeze-emp {
  z-index: 28;
  background: var(--navy);
}

.att-register-table thead tr.att-col-row th.att-freeze-name {
  z-index: 27;
  background: var(--navy);
}

.att-register-table thead tr.att-col-row th.att-freeze-dept {
  z-index: 26;
  background: var(--navy);
}

/* Frozen body cells ? above scrolling day/summary body cells. */
.att-register-table tbody td.att-freeze-emp {
  z-index: 7;
  background: #fff;
}

.att-register-table tbody td.att-freeze-name {
  z-index: 6;
  background: #fff;
}

.att-register-table tbody td.att-freeze-dept {
  z-index: 5;
  background: #fff;
}

/* Keep frozen cells opaque over scrolling day columns (stripes + hover). */
.att-register-table tbody tr:nth-child(even) td.att-freeze-emp,
.att-register-table tbody tr:nth-child(even) td.att-freeze-name,
.att-register-table tbody tr:nth-child(even) td.att-freeze-dept {
  background: #f7f9fc;
}

.att-register-table tbody tr:hover td.att-freeze-emp,
.att-register-table tbody tr:hover td.att-freeze-name,
.att-register-table tbody tr:hover td.att-freeze-dept {
  background: var(--accent-light);
}

/* ---------- Employee attendance detail (calendar) ---------- */
.att-context-nav {
  margin-bottom: 0.65rem;
}

.att-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.1rem;
  border-radius: 0.25rem;
  color: #6c757d;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
}

.att-back-link:hover,
.att-back-link:focus {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.att-back-link:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.att-detail-identity-card .card-body {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

.att-detail-identity-main .h5 {
  color: var(--navy);
  line-height: 1.25;
}

.att-detail-identity-meta {
  line-height: 1.3;
}

.att-detail-identity-meta .fw-semibold {
  color: var(--navy);
  margin-bottom: 0.1rem;
}

.att-detail-period-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem 0.45rem;
  margin: 0.2rem 0;
}

.att-detail-summary-title {
  margin: 0 0 0.45rem;
  padding-bottom: 0.25rem;
  font-size: 0.85rem;
}

.att-detail-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: stretch;
}

.att-detail-summary .att-detail-stat {
  flex: 0 0 auto;
  min-width: 3.4rem;
  padding: 0.3rem 0.55rem;
  background: #f7f9fc;
  border: 1px solid #e9ecef;
  border-radius: 0.25rem;
  text-align: center;
}

.att-detail-stat-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.15;
}

.att-detail-stat-label {
  font-size: 0.65rem;
  color: #6c757d;
  margin-top: 0.05rem;
  line-height: 1.2;
}

.att-detail-stat-total {
  background: var(--accent-light);
  border-color: #c5d4e5;
}

.att-detail-cal-title {
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
  font-size: 0.85rem;
}

.att-detail-legend {
  max-width: 100%;
  column-gap: 0.55rem;
  row-gap: 0.15rem;
}

.att-detail-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  font-size: 0.68rem;
  line-height: 1.2;
  color: #6c757d;
}

.att-detail-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: 0 0 auto;
}

.att-detail-legend-code {
  font-weight: 600;
  color: #495057;
}

.att-detail-legend-label {
  color: #8a96a3;
}

.att-detail-calendar {
  max-width: 56rem;
}

.att-detail-cal-head,
.att-detail-cal-body {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.3rem;
}

.att-detail-cal-head {
  margin-bottom: 0.25rem;
}

.att-detail-cal-weekday {
  font-size: 0.68rem;
  font-weight: 600;
  color: #8a96a3;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.att-detail-cal-cell {
  min-height: 4.5rem;
  padding: 0.35rem 0.3rem 0.4rem;
  border: 1px solid #e9ecef;
  border-radius: 0.3rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

/* Leading blanks before the 1st of the month ? quieter than real dates. */
.att-detail-cal-empty {
  border-color: transparent;
  background: #f6f7f9;
  min-height: 4.5rem;
  opacity: 0.45;
  pointer-events: none;
}

/* Past/current dates with no status use default .att-detail-cal-cell styling (not disabled). */

/* Genuine future dates only (day > live today) ? visually quiet / disabled. */
.att-detail-cal-future {
  background: #f3f4f6;
  border-color: #e6e8eb;
}

.att-detail-cal-future .att-detail-cal-daynum {
  color: #adb5bd;
  font-weight: 600;
}

.att-detail-cal-future .att-cell-empty {
  opacity: 0.35;
}

/* Dates with a recorded status ? keep clear emphasis. */
.att-detail-cal-marked {
  background: #fff;
  border-color: #dde3ea;
  box-shadow: 0 1px 0 rgba(31, 56, 100, 0.04);
}

.att-detail-cal-marked .att-detail-cal-daynum {
  color: #343a40;
}

/* Marked status wins over future greying for the status badge itself. */
.att-detail-cal-marked.att-detail-cal-future {
  background: #f7f8fa;
}

.att-detail-cal-today {
  border-color: #5b8db8;
  background: #eef5fb;
  box-shadow: inset 0 0 0 1px rgba(91, 141, 184, 0.25);
}

.att-detail-cal-today .att-detail-cal-daynum {
  color: var(--navy);
}

.att-detail-cal-daynum {
  font-size: 0.72rem;
  font-weight: 700;
  color: #495057;
  align-self: flex-start;
  line-height: 1;
}

.att-detail-cal-status .att-cell {
  width: 1.85rem;
  height: 1.45rem;
  line-height: 1.45rem;
  font-size: 0.72rem;
}

.att-detail-cal-ot,
.att-detail-cal-label {
  font-size: 0.62rem;
  line-height: 1.2;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.att-detail-cal-ot {
  color: #5a6a7a;
  font-weight: 600;
}

/* ---------- Pay Periods ---------- */
.pay-period-page {
  --pp-blue: #2563eb;
  --pp-purple: #7c3aed;
  --pp-green: #16a34a;
  --pp-line: #e5e7eb;
  --pp-muted: #6b7280;
  margin-top: -0.1rem;
}

.pay-period-nav {
  margin-bottom: 0.75rem;
}

.pay-period-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--pp-line);
  border-radius: 0.4rem;
  background: #fff;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
}

.pay-period-back-link:hover,
.pay-period-back-link:focus {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: var(--navy);
}

.pay-period-management-card,
.pay-period-list-card {
  border-color: var(--pp-line);
  border-radius: 0.5rem;
}

.pay-period-management-card {
  margin-bottom: 0.75rem;
}

.pay-period-management-card > .card-body {
  padding: 0.9rem 1rem;
}

.pay-period-mgmt-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.5rem;
}

.pay-period-mgmt-main {
  flex: 1 1 40rem;
  min-width: 0;
}

.pay-period-mgmt-title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
}

.pay-period-mgmt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  flex-shrink: 0;
  border-radius: 0.45rem;
  color: var(--pp-blue);
  background: #eff6ff;
  font-size: 1rem;
}

.pay-period-section-title {
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
}

.pay-period-section-note {
  margin-top: 0.1rem;
  color: var(--pp-muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.pay-period-mgmt-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  flex: 0 1 13.5rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #dbeafe;
  border-radius: 0.45rem;
  background: #eff6ff;
  color: #475569;
  font-size: 0.76rem;
  line-height: 1.45;
}

.pay-period-mgmt-callout .bi {
  margin-top: 0.05rem;
  color: var(--pp-blue);
  font-size: 0.95rem;
}

.pay-period-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem 1.75rem;
}

.pay-period-custom-form,
.pay-period-control-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem 1.25rem;
  margin: 0;
}

.pay-period-control-actions {
  gap: 0.6rem 0.85rem;
}

.pay-period-current-form {
  margin: 0;
}

.pay-period-input .form-label {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--pp-muted);
  font-size: 0.73rem;
  font-weight: 500;
  line-height: 1.2;
}

.pay-period-input .form-select {
  width: 11rem;
  border-color: #d5dae1;
  font-size: 0.8rem;
}

.payroll-period-filter-card .pay-period-controls {
  margin: 0;
}

.payroll-period-filter-card .pay-period-input .form-label {
  color: var(--text-muted, #6c757d);
}

.payroll-period-filter-status .alert {
  font-size: 0.82rem;
}

.pay-period-btn-primary,
.pay-period-btn-leave,
.pay-period-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 1.85rem;
  padding: 0.35rem 0.85rem;
  border-radius: 0.35rem;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
}

.pay-period-btn-primary {
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
}

.pay-period-btn-primary:hover,
.pay-period-btn-primary:focus {
  background: #16294a;
  border-color: #16294a;
  color: #fff;
}

.pay-period-btn-leave {
  border: 1px solid var(--pp-purple);
  background: var(--pp-purple);
  color: #fff;
}

.pay-period-btn-leave:hover,
.pay-period-btn-leave:focus {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}

.pay-period-btn-outline {
  border: 1px solid #d5dae1;
  background: #fff;
  color: #334155;
}

.pay-period-btn-outline:hover,
.pay-period-btn-outline:focus {
  border-color: #b8c2cf;
  background: #f8fafc;
  color: var(--navy);
}

.pay-period-history-banner {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.75rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid #dbeafe;
  border-radius: 0.45rem;
  background: #eff6ff;
  color: #475569;
  font-size: 0.78rem;
  line-height: 1.4;
}

.pay-period-history-banner .bi {
  color: #64748b;
  font-size: 0.95rem;
}

.pay-period-list-body {
  background: #fff;
  border-radius: 0 0 0.5rem 0.5rem;
  overflow: hidden;
}

.pay-period-list-scroll {
  max-height: calc(100vh - var(--hrms-topbar-height, 3.75rem) - 14rem);
  overflow: auto;
  overscroll-behavior: contain;
  position: relative;
  z-index: 0;
  isolation: isolate;
  background: #fff;
}

.pay-period-list-pager-wrap {
  background: #fff;
}

.pay-period-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.7rem 1rem;
  background: #fff;
  border-radius: 0.5rem 0.5rem 0 0;
}

.pay-period-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.15rem;
}

.pay-period-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #475569;
  font-size: 0.73rem;
  font-weight: 500;
  white-space: nowrap;
}

.pay-period-legend-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.pay-period-legend-dot.is-open {
  background: var(--pp-blue);
}

.pay-period-legend-dot.is-attendance-closed {
  background: var(--pp-purple);
}

.pay-period-legend-dot.is-leave-finalized {
  background: var(--pp-green);
}

.pay-period-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 0;
}

.pay-period-table.table > thead > * > * {
  position: sticky;
  top: 0;
  z-index: 2;
}

.pay-period-table thead th {
  padding: 0.5rem 0.75rem;
  font-size: 0.68rem;
}

.pay-period-table thead th:first-child,
.pay-period-table tbody td:first-child {
  padding-left: 1rem;
}

.pay-period-table thead th:last-child,
.pay-period-table tbody td:last-child {
  padding-right: 1rem;
}

/* Min-widths preserve column sizing; table grows wider and scrolls horizontally when needed. */
.pay-period-table th:nth-child(1),
.pay-period-table td:nth-child(1) { min-width: 9rem; }
.pay-period-table th:nth-child(2),
.pay-period-table td:nth-child(2) { min-width: 7rem; }
.pay-period-table th:nth-child(3),
.pay-period-table td:nth-child(3) { min-width: 7rem; }
.pay-period-table th:nth-child(4),
.pay-period-table td:nth-child(4) { min-width: 11rem; }
.pay-period-table th:nth-child(5),
.pay-period-table td:nth-child(5) { min-width: 5.5rem; }
.pay-period-table th:nth-child(6),
.pay-period-table td:nth-child(6) { min-width: 13rem; }
.pay-period-table th:nth-child(7),
.pay-period-table td:nth-child(7) {
  min-width: 22rem;
  white-space: nowrap;
  overflow: visible;
}

.pay-period-table tbody tr,
.pay-period-table tbody tr:nth-child(even) {
  background: #fff;
}

.pay-period-table tbody td {
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid #f1f3f6;
  color: #334155;
  font-size: 0.78rem;
  vertical-align: middle;
}

.pay-period-name {
  color: #1f2937;
  font-weight: 500;
  white-space: nowrap;
}

.pay-period-status-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
}

.pay-period-status {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.12rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

.pay-period-status.is-open {
  color: #1d4ed8;
  background: #dbeafe;
  border-color: #c7dbfe;
}

.pay-period-status.is-attendance-closed {
  color: #6d28d9;
  background: #ede9fe;
  border-color: #ddd6fe;
}

.pay-period-status.is-leave-finalized {
  color: #15803d;
  background: #dcfce7;
  border-color: #c3f0d1;
}

.pay-period-status.is-payroll-computed {
  color: #0f766e;
  background: #ccfbf1;
  border-color: #b3f1e4;
}

.pay-period-status.is-shift-finalized {
  color: #334155;
  background: #e5e9ee;
  border-color: #d5dbe3;
}

.pay-period-status.is-closed,
.pay-period-status.is-neutral {
  color: #5c636a;
  background: #f1f3f5;
  border-color: #e2e6ea;
}

.pay-period-status-hint {
  color: var(--pp-muted);
  font-size: 0.7rem;
  line-height: 1.3;
  white-space: nowrap;
}

.pay-period-cycle {
  color: #334155;
  font-size: 0.78rem;
  white-space: nowrap;
}

.pay-period-next-copy {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.pay-period-next-copy > .bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1rem;
  width: 1rem;
  font-size: 0.85rem;
  line-height: 1;
}

.pay-period-next-copy > div {
  min-width: 0;
}

.pay-period-next-copy.is-pending > .bi,
.pay-period-next-copy.is-pending .pay-period-next-primary {
  color: var(--pp-blue);
}

.pay-period-next-copy.is-done > .bi,
.pay-period-next-copy.is-done .pay-period-next-primary {
  color: var(--pp-green);
}

.pay-period-next-primary {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.pay-period-next-hint {
  color: var(--pp-muted);
  font-size: 0.7rem;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.pay-period-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.85rem;
}

.pay-period-actions > *,
.pay-period-actions > form > .btn {
  align-self: center;
}

.pay-period-actions form {
  margin: 0;
}

.pay-period-register-btn .bi {
  color: var(--pp-muted);
  font-size: 0.75rem;
}

.pay-period-more-wrap {
  margin-left: auto;
}

.pay-period-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  color: #64748b;
  border: 1px solid #d5dae1;
  border-radius: 0.35rem;
  background: #fff;
}

.pay-period-more:hover,
.pay-period-more:focus,
.pay-period-more.show {
  color: var(--navy);
  border-color: #b8c2cf;
  background: #f8fafc;
}

.pay-period-more-menu {
  min-width: 12rem;
  padding: 0.25rem;
  border-color: var(--pp-line);
  border-radius: 0.45rem;
  box-shadow: 0 0.5rem 1rem rgba(15, 23, 42, 0.12);
}

.pay-period-more-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.3rem;
  color: #334155;
  font-size: 0.78rem;
}

.pay-period-more-menu .dropdown-item .bi {
  color: var(--pp-muted);
  font-size: 0.8rem;
}

.pay-period-footnote {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.75rem 0 0;
  padding: 0.55rem 0.85rem;
  border: 1px solid #fde68a;
  border-radius: 0.45rem;
  background: #fffbeb;
  color: #475569;
  font-size: 0.78rem;
  line-height: 1.4;
}

.pay-period-footnote .bi {
  color: #d97706;
  font-size: 0.95rem;
}

.pay-period-footnote strong {
  color: #334155;
}


@media (max-width: 576px) {
  .att-filter-utilities {
    width: 100%;
    padding-top: 0.5rem;
    padding-left: 0;
    border-top: 1px solid #eef0f4;
    border-left: 0;
  }

  .att-detail-period-state {
    justify-content: flex-start;
  }

  .att-detail-cal-cell,
  .att-detail-cal-empty {
    min-height: 3.75rem;
    padding: 0.25rem 0.15rem;
  }

  .att-detail-cal-status .att-cell {
    width: 1.5rem;
    height: 1.25rem;
    line-height: 1.25rem;
    font-size: 0.65rem;
  }

  .att-detail-cal-ot,
  .att-detail-cal-label {
    display: none;
  }

  .att-detail-legend-label {
    display: none;
  }

  .pay-period-controls,
  .pay-period-custom-form,
  .pay-period-control-actions {
    width: 100%;
  }

  .pay-period-input,
  .pay-period-input .form-select {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .pay-period-list-scroll {
    max-height: calc(100vh - var(--hrms-topbar-height, 3.75rem) - 18rem);
  }
}

@media (max-width: 768px) {
  #sidebar {
    margin-left: -250px;
  }

  #sidebar.show {
    margin-left: 0;
  }

  #main {
    margin-left: 0;
  }
}

.table-responsive-sticky {
  max-height: 70vh;
  overflow: auto;
}

.pe-feedback {
  min-width: 120px;
}

.staff-pe-page {
  margin-top: -0.15rem;
}

.staff-pe-page .emp-list-filters .form-control,
.staff-pe-page .emp-list-filters .form-select,
.staff-pe-page .emp-list-filters .hrms-dd-trigger {
  font-weight: 400;
}

.staff-pe-page .emp-list-filter-actions {
  border-left: 1px solid #dee2e6;
  padding-left: 0.75rem;
  margin-left: 0.1rem;
}

.staff-pe-page .emp-list-filter-help {
  line-height: 1;
  text-decoration: none;
}

.staff-pe-page .emp-list-filter-help:hover,
.staff-pe-page .emp-list-filter-help:focus {
  color: var(--accent) !important;
}

.staff-pe-quarter-field {
  min-width: 14rem;
  flex: 1 1 14rem;
  max-width: 18rem;
}

.staff-pe-page .emp-list-table-card {
  border-radius: 0.45rem;
}

.staff-pe-page .emp-list-scroll {
  max-height: calc(100vh - var(--hrms-topbar-height, 3.75rem) - 9.5rem);
  overflow: auto;
  position: relative;
  z-index: 0;
  isolation: isolate;
  background: #fff;
}

.staff-pe-page .emp-list-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 0;
}

.staff-pe-page .emp-list-table > :not(caption) > * > * {
  padding: 0.28rem 0.55rem;
  vertical-align: middle;
  white-space: nowrap;
  font-size: 0.84rem;
  border-bottom-color: #eef0f4;
  background-clip: padding-box;
}

.staff-pe-page .emp-list-table.table > thead > * > * {
  --bs-table-bg: var(--navy);
  --bs-table-color: #fff;
  position: sticky;
  top: 0;
  z-index: 3;
  background-color: var(--navy);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: inset 0 -1px 0 #163056;
}

#staffPeListBody.is-loading {
  opacity: 0.55;
  pointer-events: none;
}

@media (max-width: 767.98px) {
  .staff-pe-page .emp-list-filter-actions {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
    border-top: 1px solid #dee2e6;
    padding-top: 0.45rem;
    margin-top: 0.1rem;
  }

  .staff-pe-page .emp-list-scroll {
    max-height: calc(100vh - var(--hrms-topbar-height, 3.75rem) - 12rem);
  }
}

.wti-step-badge {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
}

.wti-page .wti-validation-summary.validation-summary-valid {
  display: none;
}

.wti-step-purple {
  background-color: #5b21b6 !important;
  color: #fff !important;
}

.wti-section-amount .wti-section-header {
  padding: 0.4rem 0.75rem;
  min-height: 0;
  background: #eef5ff;
  border-bottom-color: #d6e4f8;
}

.wti-section-amount .wti-step-badge {
  width: 1.15rem;
  height: 1.15rem;
  font-size: 0.68rem;
  line-height: 1;
  flex-shrink: 0;
}

.wti-section-amount .wti-section-title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--navy);
}

.wti-section-amount .wti-section-body {
  padding: 0.65rem 0.75rem 0.75rem;
}

.wti-section-amount .wti-amount-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem 0.85rem;
}

.wti-section-amount .wti-amount-field {
  flex: 0 0 auto;
  min-width: 0;
}

.wti-section-amount .wti-amount-label {
  margin-bottom: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
}

.wti-section-amount .wti-amount-input {
  width: 10.5rem;
  max-width: 100%;
}

.wti-section-amount .wti-amount-input .input-group-text,
.wti-section-amount .wti-amount-input .form-control {
  font-size: 0.8125rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  min-height: calc(1.5em + 0.4rem + 2px);
}

.wti-section-amount .wti-amount-input .input-group-text {
  padding-left: 0.45rem;
  padding-right: 0.45rem;
}

.wti-section-amount .wti-amount-info {
  flex: 0 0 auto;
  width: max-content;
  max-width: 22rem;
  min-width: 0;
  margin: 0;
  margin-left: auto;
  padding: 0.45rem 0.65rem;
  font-size: 0.75rem;
  line-height: 1.35;
}

.wti-section-amount .wti-amount-info .bi {
  font-size: 0.8rem;
  vertical-align: -0.05em;
}

.wti-section-amount .wti-amount-info ul {
  margin-top: 0.3rem;
  padding-left: 1.15rem;
}

.wti-section-amount .wti-amount-info li {
  margin-bottom: 0.1rem;
}

.wti-section-amount .wti-amount-info li:last-child {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .wti-section-amount .wti-amount-row {
    flex-direction: column;
  }

  .wti-section-amount .wti-amount-info {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }
}

.wti-section-time {
  overflow: hidden;
}

.wti-section-time .wti-time-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  padding: 0.55rem 0.75rem;
  background: #eaf7ef;
  border-bottom-color: #cfe9d8;
}

.wti-section-time .wti-step-badge {
  width: 1.15rem;
  height: 1.15rem;
  font-size: 0.68rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.wti-section-time .wti-section-title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  color: #146c43;
}

.wti-section-time .wti-time-header-sub {
  margin-top: 0.15rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #3d7a56;
  max-width: 34rem;
}

.wti-section-time .wti-time-header-note {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  max-width: 18.5rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #3d7a56;
}

.wti-section-time .wti-time-header-note .bi {
  color: #198754;
  font-size: 0.85rem;
  margin-top: 0.05rem;
  flex-shrink: 0;
}

.wti-section-time .wti-section-body {
  padding: 0.7rem 0.75rem 0.8rem;
}

.wti-section-time .wti-time-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.wti-section-time .wti-time-table {
  width: 100%;
  margin-bottom: 0.55rem !important;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.wti-section-time .wti-time-table thead th {
  background: #eef1f6;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
  vertical-align: middle;
}

.wti-section-time .wti-time-table tbody td {
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid #eef0f4;
  vertical-align: middle;
  background: #fff;
}

.wti-section-time .wti-time-table th:nth-child(1),
.wti-section-time .wti-time-table td:nth-child(1) {
  width: 22%;
}

.wti-section-time .wti-time-table th:nth-child(2),
.wti-section-time .wti-time-table td:nth-child(2),
.wti-section-time .wti-time-table th:nth-child(3),
.wti-section-time .wti-time-table td:nth-child(3) {
  width: 34%;
}

.wti-section-time .wti-time-col-actions {
  width: 4.25rem;
  text-align: center;
}

.wti-section-time .wti-time-table-client th:nth-child(1),
.wti-section-time .wti-time-table-client td:nth-child(1) {
  width: 24%;
}

.wti-section-time .wti-time-table-client th:nth-child(2),
.wti-section-time .wti-time-table-client td:nth-child(2) {
  width: 38%;
}

.wti-section-time .wti-time-table-client th:nth-child(3),
.wti-section-time .wti-time-table-client td:nth-child(3) {
  width: 38%;
}

.wti-section-time .wti-remove-row,
.wti-section-perf .wti-remove-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  line-height: 1;
}

.wti-section-time .wti-remove-row .bi,
.wti-section-perf .wti-remove-row .bi {
  font-size: 0.78rem;
}

.wti-section-time .wti-shift-select {
  max-width: 8.5rem;
  width: 100%;
}

.wti-section-time .wti-intime {
  max-width: 7.25rem;
}

.wti-section-time .wti-time-input {
  max-width: 7.25rem;
  width: 100%;
  font-variant-numeric: tabular-nums;
}

.wti-section-time .wti-lunch-input {
  max-width: 5.5rem;
  width: 100%;
  font-variant-numeric: tabular-nums;
}

.wti-section-time .wti-add-shift {
  border: 1px solid #86c9a0;
  color: #146c43;
  background: #eaf7ef;
  font-size: 0.78rem;
  padding: 0.2rem 0.55rem;
}

.wti-section-time .wti-add-shift:hover,
.wti-section-time .wti-add-shift:focus {
  background: #dff3e7;
  color: #0f5132;
  border-color: #198754;
}

@media (max-width: 991.98px) {
  .wti-section-time .wti-time-header-note {
    max-width: none;
  }
}

.wti-section-perf {
  overflow: visible;
  position: relative;
}

.md-list-page .card.wti-section-perf {
  overflow: visible;
}

.wti-section-perf.wti-dropdown-open {
  z-index: 40;
}

.wti-section-perf .wti-perf-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  padding: 0.55rem 0.75rem;
  background: #f3eefc;
  border-bottom-color: #e0d4f7;
}

.wti-section-perf .wti-step-badge {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.1rem;
  background-color: #5b21b6 !important;
  color: #fff !important;
}

.wti-section-perf .wti-section-title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  color: #5b21b6;
}

.wti-section-perf .wti-perf-header-sub {
  margin-top: 0.15rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #6d28d9;
  max-width: 34rem;
}

.wti-section-perf .wti-perf-header-note {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  max-width: 18.5rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #6d28d9;
}

.wti-section-perf .wti-perf-header-note .bi {
  color: var(--pp-purple);
  font-size: 0.85rem;
  margin-top: 0.05rem;
  flex-shrink: 0;
}

.wti-section-perf .wti-section-body {
  padding: 0.65rem 0.75rem 0.75rem;
  overflow: visible;
}

.wti-section-perf .wti-perf-table-wrap {
  width: 100%;
  overflow: visible;
}

.wti-section-perf .wti-perf-table {
  width: 100%;
  margin-bottom: 0.55rem !important;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  overflow: visible;
}

.wti-section-perf .wti-perf-table thead th {
  background: #eef1f6;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

.wti-section-perf .wti-perf-table tbody td {
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid #eef0f4;
  vertical-align: middle;
  background: #fff;
  overflow: visible;
}

.wti-section-perf .wti-perf-table th:nth-child(1),
.wti-section-perf .wti-perf-table td:nth-child(1) {
  width: 24%;
}

.wti-section-perf .wti-perf-table th:nth-child(2),
.wti-section-perf .wti-perf-table td:nth-child(2) {
  width: 18%;
}

.wti-section-perf .wti-perf-table th:nth-child(3),
.wti-section-perf .wti-perf-table td:nth-child(3) {
  width: 48%;
}

.wti-section-perf .wti-perf-col-actions {
  width: 4.25rem;
  text-align: center;
}

.wti-section-perf .wti-perf-table-client th:nth-child(1),
.wti-section-perf .wti-perf-table-client td:nth-child(1) {
  width: 28%;
}

.wti-section-perf .wti-perf-table-client th:nth-child(2),
.wti-section-perf .wti-perf-table-client td:nth-child(2) {
  width: 22%;
}

.wti-section-perf .wti-perf-table-client th:nth-child(3),
.wti-section-perf .wti-perf-table-client td:nth-child(3) {
  width: 50%;
}

.wti-section-perf .wti-param-name,
.wti-section-perf .wti-calc-type {
  font-size: 0.78rem;
  min-height: 1.7rem;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
}

.wti-section-perf .wti-calc-type {
  max-width: 9.5rem;
}

.wti-section-perf .wti-chip-multi {
  position: relative;
  width: 100%;
  max-width: 22rem;
  z-index: 1;
}

.wti-section-perf .wti-chip-multi.is-open {
  z-index: 40;
}

.wti-section-perf .wti-chip-trigger {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  box-sizing: border-box;
  width: 100%;
  height: 1.7rem;
  min-height: 1.7rem;
  max-height: 1.7rem;
  padding: 0 0.4rem;
  border: 1px solid #ced4da;
  border-radius: 0.3rem;
  background: #fff;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.wti-section-perf .wti-chip-trigger:hover,
.wti-section-perf .wti-chip-multi.is-open .wti-chip-trigger {
  border-color: #86b7fe;
}

.wti-section-perf .wti-chip-summary {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
}

.wti-section-perf .wti-chip-caret {
  flex: 0 0 auto;
  font-size: 0.7rem;
  color: #6c757d;
  line-height: 1;
}

.wti-section-perf .wti-chip-placeholder {
  color: #6c757d;
  font-size: 0.75rem;
  white-space: nowrap;
}

.wti-section-perf .wti-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.15rem;
  max-width: 100%;
  padding: 0.05rem 0.35rem;
  border-radius: 0.85rem;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.wti-section-perf .wti-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: inherit;
  line-height: 1;
  padding: 0;
  margin-left: 0.05rem;
  font-size: 0.8rem;
  cursor: pointer;
  user-select: none;
}

.wti-section-perf .wti-chip-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 0.2rem);
  left: 0;
  right: 0;
  min-width: 12rem;
  padding: 0.35rem;
  border: 1px solid #ced4da;
  border-radius: 0.35rem;
  background: #fff;
  box-shadow: 0 0.25rem 0.6rem rgba(31, 56, 100, 0.12);
}

.wti-section-perf .wti-chip-add {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.35rem;
}

.wti-section-perf .wti-chip-add .form-control {
  font-size: 0.75rem;
  min-height: 1.55rem;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}

.wti-section-perf .wti-chip-options {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: 9rem;
  overflow: auto;
}

.wti-section-perf .wti-chip-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.2rem 0.3rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  color: #334155;
  cursor: pointer;
}

.wti-section-perf .wti-chip-option:hover {
  background: #f8fafc;
}

.wti-section-perf .wti-chip-option .form-check-input {
  margin: 0;
  width: 0.85rem;
  height: 0.85rem;
}

.wti-section-perf .wti-add-parameter {
  border: 1px solid #c4b5fd;
  color: #5b21b6;
  background: #f3eefc;
  font-size: 0.78rem;
  padding: 0.2rem 0.55rem;
}

.wti-section-perf .wti-add-parameter:hover,
.wti-section-perf .wti-add-parameter:focus {
  background: #ebe4fa;
  color: #4c1d95;
  border-color: #7c3aed;
}

@media (max-width: 991.98px) {
  .wti-section-perf .wti-perf-header-note {
    max-width: none;
  }
}

.wti-section-summary {
  overflow: hidden;
}

.wti-section-summary .wti-summary-header {
  padding: 0.4rem 0.75rem;
  min-height: 0;
  background: linear-gradient(180deg, #fff8e1 0%, #fff3cd 100%);
  border-bottom-color: #f0e0a8;
}

.wti-section-summary .wti-step-badge,
.wti-section-summary .wti-step-summary {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  background-color: #e6a800 !important;
  color: #fff !important;
}

.wti-section-summary .wti-section-title {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  color: #6b4f12;
}

.wti-section-summary .wti-section-body {
  padding: 0.55rem 0.75rem 0.6rem;
  background: #fffcf3;
}

.wti-section-summary .wti-summary-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem 0.85rem;
  align-items: center;
}

.wti-section-summary .wti-summary-left,
.wti-section-summary .wti-summary-right {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
}

.wti-section-summary .wti-summary-right {
  padding-left: 0.85rem;
  border-left: 1px solid #ead9a0;
  align-items: center;
}

.wti-section-summary .wti-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background: #fff1c2;
  color: #c48a00;
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

.wti-section-summary .wti-summary-right .wti-summary-icon {
  margin-top: 0;
}

.wti-section-summary .wti-summary-copy {
  min-width: 0;
}

.wti-section-summary .wti-summary-lead {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #5c4a1a;
}

.wti-section-summary .wti-summary-lead strong {
  font-weight: 700;
  color: #4a3a12;
}

.wti-section-summary .wti-summary-criteria {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wti-section-summary .wti-summary-criteria li {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  margin: 0 0 0.12rem;
  font-size: 0.72rem;
  line-height: 1.3;
  color: #6b5a2e;
}

.wti-section-summary .wti-summary-criteria li:last-child {
  margin-bottom: 0;
}

.wti-section-summary .wti-summary-criteria .bi {
  color: #8a6d1d;
  font-size: 0.72rem;
  line-height: 1.3;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

.wti-section-summary .wti-summary-amount {
  min-width: 9.5rem;
}

.wti-section-summary .wti-summary-amount-label {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  color: #6b4f12;
}

.wti-section-summary .wti-summary-amount-value {
  margin-top: 0.05rem;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.15;
  color: #5c4a1a;
}

.wti-section-summary .wti-summary-amount-sub {
  margin-top: 0.05rem;
  font-size: 0.7rem;
  line-height: 1.25;
  color: #8a6d1d;
}

.wti-section-summary .wti-summary-amount-default {
  margin-top: 0.2rem;
  font-size: 0.62rem;
  line-height: 1.25;
  color: #9a8550;
}

@media (max-width: 991.98px) {
  .wti-section-summary .wti-summary-layout {
    grid-template-columns: 1fr;
  }

  .wti-section-summary .wti-summary-right {
    padding-left: 0;
    padding-top: 0.55rem;
    border-left: 0;
    border-top: 1px solid #ead9a0;
  }
}

/* Worker Timeliness Incentive grid */
.incentive-grid-table {
  min-width: 1180px;
}

.incentive-grid-table .incentive-col-code {
  min-width: 5.5rem;
}

.incentive-grid-table .incentive-col-name {
  min-width: 8rem;
}

.incentive-grid-table .incentive-col-leader {
  min-width: 4.5rem;
}

.incentive-grid-table .incentive-col-ontime {
  min-width: 4.5rem;
}

.incentive-grid-table .incentive-col-amount {
  min-width: 7rem;
}

.incentive-grid-table .incentive-col-actions {
  min-width: 4.5rem;
}

.incentive-grid-table .incentive-time-input {
  min-width: 7rem;
}

.incentive-grid-table .incentive-rating-select {
  min-width: 7.5rem;
}

.incentive-grid-table .incentive-amount-input {
  min-width: 6.5rem;
  width: 100%;
}

/* Leader Incentive grid */
.leader-incentive-table {
  min-width: 860px;
}

.leader-incentive-table .leader-col-code {
  min-width: 6rem;
}

.leader-incentive-table .leader-col-name {
  min-width: 9rem;
}

.leader-incentive-table .leader-col-workers {
  min-width: 9rem;
}

.leader-incentive-table .leader-col-count {
  min-width: 7rem;
}

.leader-incentive-table .leader-col-amount {
  min-width: 7rem;
}

.leader-incentive-table .leader-col-actions {
  min-width: 5rem;
}

.leader-incentive-table .leader-count-input,
.leader-incentive-table .leader-amount-input {
  min-width: 6.5rem;
  width: 100%;
}

/* Leader Incentive — View Workers */
.leader-workers-page {
  margin-top: -0.15rem;
}

.leader-workers-page .emp-list-filters .form-control,
.leader-workers-page .emp-list-filters .form-select,
.leader-workers-page .emp-list-filters .hrms-dd-trigger {
  font-weight: 400;
}

.leader-workers-page .emp-list-filter-actions {
  border-left: 1px solid #dee2e6;
  padding-left: 0.75rem;
  margin-left: 0.1rem;
}

.leader-workers-page .emp-list-filter-help {
  line-height: 1;
  text-decoration: none;
}

.leader-workers-page .emp-list-filter-help:hover,
.leader-workers-page .emp-list-filter-help:focus {
  color: var(--accent) !important;
}

.leader-workers-page .emp-summary-identity {
  padding-bottom: 0.65rem;
  margin-bottom: 0.55rem;
}

.leader-workers-page .emp-summary-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.leader-workers-page .emp-summary-metric {
  cursor: default;
}

.leader-workers-page .emp-summary-metric:hover,
.leader-workers-page .emp-summary-metric:focus-visible {
  background: #fff;
  box-shadow: none;
}

.leader-workers-page .emp-list-table-card {
  border-radius: 0.45rem;
}

.leader-workers-scroll {
  max-height: calc(100vh - var(--hrms-topbar-height, 3.75rem) - 18rem);
  overflow: auto;
  position: relative;
  z-index: 0;
  isolation: isolate;
  background: #fff;
}

.leader-workers-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.leader-workers-page .leader-workers-table > :not(caption) > * > * {
  padding: 0.28rem 0.55rem;
  vertical-align: middle;
  white-space: nowrap;
  font-size: 0.84rem;
  border-bottom-color: #eef0f4;
  background-clip: padding-box;
}

.leader-workers-page .leader-workers-table.table > thead > * > * {
  --bs-table-bg: var(--navy);
  --bs-table-color: #fff;
  position: sticky;
  top: 0;
  z-index: 3;
  background-color: var(--navy);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: inset 0 -1px 0 #163056;
}

#leaderWorkerListBody.is-loading,
#leaderIncentiveListBody.is-loading {
  opacity: 0.55;
  pointer-events: none;
}

.leader-workers-pager-wrap {
  background: #fff;
}

@media (max-width: 767.98px) {
  .leader-workers-page .emp-list-filter-actions {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
    border-top: 1px solid #dee2e6;
    padding-top: 0.45rem;
    margin-top: 0.1rem;
  }

  .leader-workers-scroll {
    max-height: calc(100vh - var(--hrms-topbar-height, 3.75rem) - 22rem);
  }
}

@media (max-width: 575.98px) {
  .leader-workers-page .emp-summary-metrics {
    grid-template-columns: 1fr;
  }

  .leader-workers-page .emp-summary-metric {
    border-right: 0;
    border-bottom: 1px solid #eef0f4;
  }

  .leader-workers-page .emp-summary-metric:last-child {
    border-bottom: 0;
  }
}

/* ---------- Manpower dashboard ---------- */
.workforce-department-selector {
  position: relative;
  margin-bottom: 0.9rem;
  padding-top: 0.1rem;
}

/* Sit in the compact tab row, clear of the department track. */
.workforce-department-controls {
  position: absolute;
  top: -2.55rem;
  right: 0;
  display: flex;
  gap: 0.45rem;
}

.workforce-department-arrow {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #dde3ec;
  border-radius: 50%;
  background: #fff;
  color: #1f3864;
  font-size: 0.95rem;
  line-height: 1;
  box-shadow: 0 0.12rem 0.4rem rgba(31, 56, 100, 0.1);
}

/* Bootstrap Icons ships only a light chevron, so thicken the glyph to reach the
   arrow weight shown in the approved preview. */
.workforce-department-arrow .bi {
  -webkit-text-stroke: 0.055em currentColor;
}

.workforce-department-arrow:hover:not(:disabled),
.workforce-department-arrow:focus-visible:not(:disabled) {
  border-color: #9fb3d2;
  background: #f4f7fc;
}

.workforce-department-arrow:disabled {
  border-color: #e4e9f0;
  color: #b3bcc9;
}

.workforce-department-track {
  display: flex;
  gap: 0.65rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #b9bec7 #eef0f3;
  padding: 0 0 0.45rem;
}

.workforce-department-track::-webkit-scrollbar {
  height: 0.25rem;
}

.workforce-department-track::-webkit-scrollbar-track {
  background: #eef0f3;
}

.workforce-department-track::-webkit-scrollbar-thumb {
  background: #b9bec7;
  border-radius: 999px;
}

.workforce-department-link {
  flex: 1 0 10.75rem;
  min-width: 10.75rem;
  color: inherit;
  text-decoration: none;
}

.dept-card {
  height: 5.85rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid #dfe5ed;
  border-radius: 0.4rem;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  background: #fff;
  box-shadow: 0 0.1rem 0.3rem rgba(31, 56, 100, 0.04);
}

.dept-card:hover {
  border-color: var(--accent);
}

.dept-card.selected {
  border-color: var(--navy);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--navy);
}

.workforce-department-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.dept-card .dept-name {
  overflow: hidden;
  font-weight: 700;
  color: var(--navy);
  font-size: 0.8rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workforce-department-selected {
  flex: none;
  color: var(--navy);
  font-size: 0.95rem;
}

.dept-card .dept-shortage {
  margin-top: 0.4rem;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}

.workforce-department-meta {
  margin-top: 0.35rem;
  color: #657185;
  font-size: 0.7rem;
  white-space: nowrap;
}

/* Compact contextual strip ? not a hero/dashboard block. */
.workforce-summary-strip {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr) auto;
  align-items: center;
  min-height: 3.75rem;
  margin-bottom: 0.7rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid #e0e5ec;
  border-radius: 0.4rem;
  background: #fff;
  box-shadow: 0 0.1rem 0.3rem rgba(31, 56, 100, 0.04);
}

.workforce-summary-department {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.55rem;
}

.workforce-summary-icon {
  display: inline-flex;
  flex: 0 0 1.6rem;
  width: 1.6rem;
  height: 1.6rem;
  align-items: center;
  justify-content: center;
  color: #2e5395;
  font-size: 1.25rem;
}

.workforce-summary-name {
  overflow: hidden;
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Single rule between department identity and the metrics group. */
.workforce-summary-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(6.5rem, 1fr));
  align-items: stretch;
  border-left: 1px solid #e6eaf0;
}

.workforce-summary-metric {
  display: flex;
  min-height: 2.4rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem;
}

.workforce-summary-label {
  margin-bottom: 0.15rem;
  color: #687487;
  font-size: 0.68rem;
  font-weight: 500;
}

.workforce-summary-metric strong {
  color: var(--navy);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}

.workforce-summary-metric strong.text-danger {
  color: #dc3545 !important;
}

.workforce-summary-metric strong.text-success {
  color: #198754 !important;
}

.workforce-normalisation-note {
  margin: -0.25rem 0 0.65rem;
  color: #6c757d;
  font-size: 0.72rem;
}

.workforce-records {
  overflow: hidden;
  border: 1px solid #e0e5ec;
  border-radius: 0.4rem;
  background: #fff;
  box-shadow: 0 0.1rem 0.35rem rgba(31, 56, 100, 0.05);
}

.workforce-records-header {
  display: flex;
  min-height: 2.6rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.85rem;
}

.workforce-records-header h2 {
  margin: 0;
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 700;
}

.workforce-page-size {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: #485568;
  font-size: 0.78rem;
  font-weight: 400;
}

.workforce-page-size .form-select {
  width: 3.7rem;
  min-height: 2rem;
  padding: 0.2rem 1.5rem 0.2rem 0.5rem;
  border-color: #d7dee8;
  font-size: 0.78rem;
}

/* Free height previously held by the oversized summary strip for records. */
.workforce-table-scroll {
  min-height: 28rem;
  max-height: calc(100vh - 28rem);
  overflow-y: auto;
  padding: 0 0.85rem;
}

.workforce-designation-table {
  border: 1px solid #e0e5ec;
}

.workforce-designation-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Row density and type size come from the shared .table-hrms baseline, which is
   what the approved preview uses; only the weight hierarchy is added here. */
.workforce-designation-table thead th {
  padding: 0.6rem 0.75rem;
  background-color: var(--navy);
  color: #fff;
  font-weight: 700;
}

.workforce-designation-table tbody tr,
.workforce-designation-table tbody tr:nth-child(even) {
  background: #fff;
}

.workforce-designation-table tbody tr:hover {
  background: var(--accent-light);
}

.workforce-designation-table tbody td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #eaeef4;
  color: #2c3e5c;
  vertical-align: middle;
}

.workforce-designation-table th:first-child {
  width: 40%;
}

.workforce-designation-table tbody td:first-child {
  color: var(--navy);
  font-weight: 500;
}

.workforce-records-footer {
  display: flex;
  min-height: 3rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.85rem;
  color: #516075;
  font-size: 0.72rem;
}

.workforce-pagination {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.workforce-page-button {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #dde3ec;
  border-radius: 0.3rem;
  background: #fff;
  color: #1f3864;
  font-size: 0.72rem;
  font-weight: 600;
}

.workforce-page-button.is-active,
.workforce-page-button.is-step:not(:disabled) {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

.workforce-page-button.is-step .bi {
  -webkit-text-stroke: 0.05em currentColor;
}

.workforce-page-button:disabled {
  border-color: #e4e9f0;
  background: #fff;
  color: #aeb7c4;
}

/* Compact nav tabs ? override Bootstrap .nav-link padding/size so these stay
   navigation controls, not oversized headings. */
#manpowerTabs {
  min-height: 2.15rem;
  border-bottom-color: #e3e7ee;
}

#manpowerTabs .nav-link {
  padding: 0.35rem 0.85rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #6c757d;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

#manpowerTabs .nav-link:hover,
#manpowerTabs .nav-link:focus {
  border-color: transparent;
  isolation: auto;
  color: var(--navy);
}

#manpowerTabs .nav-link.active {
  border-color: transparent;
  border-bottom-color: var(--navy);
  background: transparent;
  color: var(--navy);
  font-weight: 600;
}

.view-mode-badge {
  display: inline-block;
  flex: none;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: #edf3fc;
  color: var(--navy);
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
}

.dept-dashboard-toggle {
  margin-left: 0.75rem;
}

.dept-dashboard-toggle .btn {
  min-width: 4.5rem;
  padding: 0.32rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
}

.dept-dashboard-toggle .btn-primary {
  background-color: var(--navy);
  border-color: var(--navy);
}

.dept-dashboard-toggle .btn-outline-secondary {
  border-color: #d5dce6;
  background: #fff;
  color: #33465f;
}

.dept-dashboard-toggle .btn-outline-secondary:hover,
.dept-dashboard-toggle .btn-outline-secondary:focus-visible {
  border-color: #b8c7df;
  background: #f4f7fc;
  color: var(--navy);
}

/* ---------- Manpower required vs. actual ---------- */
.required-actual-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0.1rem 0 0.85rem;
}

.required-actual-edit {
  padding: 0.48rem 0.85rem;
  border: 1px solid #ccd4df;
  border-radius: 0.3rem;
  background: #fff;
  color: var(--navy);
  font-size: 0.76rem;
  font-weight: 500;
}

.required-actual-edit:hover,
.required-actual-edit:focus-visible {
  border-color: #9fb0c8;
  background: #f8fafc;
  color: var(--navy);
}

.required-actual-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.95rem;
  margin-bottom: 0.95rem;
}

.required-actual-kpi {
  display: flex;
  min-height: 5rem;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid #e1e6ed;
  border-radius: 0.35rem;
  background: #fff;
  box-shadow: 0 0.06rem 0.22rem rgba(31, 56, 100, 0.04);
}

.required-actual-kpi-icon {
  display: inline-flex;
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f5f7fc;
  color: var(--navy);
  font-size: 1.45rem;
}

.required-actual-kpi-gap .required-actual-kpi-icon {
  background: #fff0f2;
  color: #ef243c;
}

.required-actual-kpi-label {
  display: block;
  margin-bottom: 0.1rem;
  color: #5a6578;
  font-size: 0.76rem;
  white-space: nowrap;
}

.required-actual-kpi strong {
  display: block;
  color: var(--navy);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
}

.required-actual-kpi strong.text-danger {
  color: #ef243c !important;
}

.required-actual-records {
  overflow: hidden;
  border: 1px solid #e0e5ec;
  border-radius: 0.35rem;
  background: #fff;
  box-shadow: 0 0.06rem 0.22rem rgba(31, 56, 100, 0.04);
}

.required-actual-records-header {
  display: flex;
  min-height: 3.1rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.95rem;
}

.required-actual-records-header h2 {
  margin: 0;
  color: var(--navy);
  font-size: 0.98rem;
  font-weight: 700;
}

.required-actual-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: #4a5a70;
  font-size: 0.76rem;
  font-weight: 500;
  white-space: nowrap;
}

.required-actual-sort select {
  min-width: 11.25rem;
  padding: 0.32rem 1.85rem 0.32rem 0.6rem;
  border: 1px solid #d5dde8;
  border-radius: 0.3rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%23334a66' d='M3.2 5.6 8 10.4l4.8-4.8'/%3E%3C/svg%3E") no-repeat right 0.5rem center / 0.7rem;
  color: #24364f;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.2;
  appearance: none;
}

.required-actual-sort select:focus {
  border-color: #9fb0c8;
  outline: 0;
  box-shadow: 0 0 0 0.15rem rgba(31, 56, 100, 0.12);
}

.required-actual-table-scroll {
  padding: 0 0.7rem;
}

.required-actual-table {
  border: 0;
  --bs-table-bg: transparent;
}

.required-actual-table thead th {
  --bs-table-bg: var(--navy);
  --bs-table-color: #fff;
  padding: 0.68rem 0.7rem;
  background: var(--navy);
  background-color: var(--navy);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: 0;
}

.required-actual-table tfoot th {
  --bs-table-bg: #eef0f4;
  padding: 0.78rem 0.7rem;
  border-top: 1px solid #d9dee7;
  border-bottom: 0;
  background: #eef0f4;
  background-color: #eef0f4;
  color: #1e2f49;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.required-actual-table tbody tr,
.required-actual-table tbody tr:nth-child(even) {
  background: #fff;
}

.required-actual-table tbody tr:hover {
  background: var(--accent-light);
}

.required-actual-table tbody td {
  padding: 0.58rem 0.7rem;
  border-bottom: 1px solid #e8ecf1;
  color: #253955;
  font-size: 0.82rem;
  font-weight: 500;
  vertical-align: middle;
}

.required-actual-table th:nth-child(1),
.required-actual-table td:nth-child(1),
.required-actual-table tfoot th:nth-child(1) {
  width: 24%;
  text-align: left;
}

.required-actual-table th:nth-child(2),
.required-actual-table th:nth-child(3),
.required-actual-table th:nth-child(4),
.required-actual-table td:nth-child(2),
.required-actual-table td:nth-child(3),
.required-actual-table td:nth-child(4),
.required-actual-table tfoot th:nth-child(2),
.required-actual-table tfoot th:nth-child(3),
.required-actual-table tfoot th:nth-child(4) {
  width: 17%;
  text-align: center;
}

.required-actual-table th:nth-child(5),
.required-actual-table td:nth-child(5),
.required-actual-table tfoot th:nth-child(5) {
  width: 15%;
  min-width: 10.5rem;
  text-align: left;
}

.required-actual-table .text-danger,
.required-actual-table tfoot .text-danger {
  color: #ef243c !important;
  font-weight: 700;
}

/* Preview: excess/zero stay body color ? only shortages are emphasized red. */
.required-actual-table .text-success {
  color: #253955 !important;
  font-weight: 500;
}

.required-actual-breakdown {
  display: inline-flex;
  min-width: 9.75rem;
  min-height: 2rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid #d8dee8;
  border-radius: 0.28rem;
  background: #fff;
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 500;
  text-decoration: none;
}

.required-actual-breakdown:hover,
.required-actual-breakdown:focus-visible {
  border-color: #aebcd0;
  background: #f8fafc;
  color: var(--navy);
}

.required-actual-records-footer {
  display: flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.95rem;
  color: #48566b;
  font-size: 0.74rem;
}

.required-actual-pagination {
  display: flex;
  gap: 0.45rem;
}

.required-actual-pagination button {
  display: inline-flex;
  width: 1.95rem;
  height: 1.95rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #dbe1e9;
  border-radius: 0.28rem;
  background: #fff;
  color: var(--navy);
  font-size: 0.74rem;
  font-weight: 600;
}

.required-actual-pagination button.is-active {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

.required-actual-pagination button:disabled {
  color: #bcc4d0;
}

@media (max-width: 1199.98px) {
  .workforce-summary-strip {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
  }

  .workforce-summary-metric {
    padding-inline: 0.5rem;
  }

  .required-actual-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .workforce-summary-strip {
    grid-template-columns: 1fr auto;
    row-gap: 0.75rem;
  }

  .workforce-summary-metrics {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .workforce-summary-metric:first-child {
    border-left: 0;
  }
}

@media (max-width: 575.98px) {
  .workforce-summary-department {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .workforce-summary-metrics {
    grid-template-columns: 1fr;
  }

  .workforce-summary-metric {
    min-height: 2.25rem;
    border-top: 1px solid #e6eaf0;
    border-left: 0;
  }

  .dept-dashboard-toggle {
    margin-left: 0;
  }

  .required-actual-kpis {
    grid-template-columns: 1fr;
  }

  .required-actual-records-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* ---------- Colony / Housing Management (approved preview) ---------- */
.colony-housing {
  margin: 0;
}

.colony-housing-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.colony-tabs {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid #e3e7ee;
}

.colony-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.95rem 0.55rem;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: #657185;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.colony-tab:hover,
.colony-tab:focus-visible {
  color: var(--navy);
  text-decoration: none;
}

.colony-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.colony-add-room.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.85rem;
  border-radius: 0.45rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: none;
}

.colony-add-room.btn:hover,
.colony-add-room.btn:focus-visible {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.colony-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  margin-bottom: 0.85rem;
  padding: 0.95rem 0;
  border: 1px solid #e3e7ee;
  border-radius: 0.55rem;
  background: #fff;
  box-shadow: 0 1px 3px rgba(31, 56, 100, 0.05);
}

.colony-summary-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0 1.15rem;
}

.colony-summary-item + .colony-summary-item {
  border-left: 1px solid #edf0f4;
}

.colony-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  font-size: 1rem;
  flex-shrink: 0;
}

.colony-summary-icon-rooms,
.colony-summary-icon-capacity {
  background: #e8f0fb;
  color: var(--accent);
}

.colony-summary-icon-occupied {
  background: #e8f6ec;
  color: #3d9a5a;
}

.colony-summary-icon-available {
  background: #fff4e5;
  color: #d48806;
}

.colony-summary-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.colony-summary-label {
  color: #657185;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.25;
}

.colony-summary-value {
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
}

.colony-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.colony-search {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 1 1 auto;
  max-width: 18rem;
  min-height: 2.15rem;
  padding: 0 0.75rem;
  border: 1px solid #d8dee7;
  border-radius: 0.45rem;
  background: #fff;
  color: #8a96a3;
}

.colony-search-input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--navy);
  font-size: 0.82rem;
  line-height: 1.2;
  outline: none;
}

.colony-search-input::placeholder {
  color: #8a96a3;
}

.colony-occupancy-filter {
  flex-shrink: 0;
}

.colony-occupancy-select {
  min-width: 9.5rem;
  min-height: 2.15rem;
  padding: 0.25rem 2rem 0.25rem 0.75rem;
  border: 1px solid #d8dee7;
  border-radius: 0.45rem;
  background: #fff;
  color: var(--navy);
  font-size: 0.82rem;
  line-height: 1.2;
}

.colony-room-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem 0.9rem;
}

.colony-room-card {
  display: flex;
  flex-direction: column;
  min-height: 6.35rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid #e3e7ee;
  border-radius: 0.55rem;
  background: #fff;
  box-shadow: 0 1px 4px rgba(31, 56, 100, 0.06);
}

.colony-room-card.is-hidden {
  display: none;
}

.colony-room-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.colony-room-card__name {
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.2;
}

.colony-room-card__count {
  color: #657185;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.colony-occupancy-bar {
  display: block;
  width: 100%;
  height: 0.28rem;
  margin: 0.55rem 0 0.65rem;
  border-radius: 999px;
  background: #e9edf3;
  overflow: hidden;
}

.colony-occupancy-bar__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #3d9a5a;
}

.colony-occupancy-bar__fill.is-empty {
  width: 0 !important;
}

.colony-room-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
}

.colony-room-card__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

.colony-vacant {
  color: #657185;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.2;
}

.colony-occupant-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
  background: var(--accent-light);
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.colony-room-edit.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  padding: 0.18rem 0.62rem;
  border-radius: 0.35rem;
  border: 1px solid #cfd6df;
  background: #fff;
  color: #4b5563;
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.2;
  box-shadow: none;
}

.colony-room-edit.btn:hover,
.colony-room-edit.btn:focus-visible {
  background: #fff;
  border-color: #b8c2cf;
  color: var(--navy);
}

.colony-records-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3.1rem;
  margin-top: 0.85rem;
  padding: 0.75rem 0;
}

.colony-records-summary {
  color: #657185;
  font-size: 0.8rem;
}

.colony-pagination {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.colony-page-button,
.colony-page-number {
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid #d8dee7;
  border-radius: 0.35rem;
  background: #fff;
  color: #657185;
  font-size: 0.8rem;
  line-height: 1;
}

.colony-page-number.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.colony-page-button:disabled {
  color: #aeb6c2;
  opacity: 1;
}

.colony-breadcrumb {
  margin-bottom: 1rem;
}

.colony-breadcrumb .breadcrumb {
  --bs-breadcrumb-divider: ">";
  margin: 0;
  padding: 0;
  background: transparent;
  font-size: 0.8rem;
}

.colony-breadcrumb .breadcrumb-item,
.colony-breadcrumb .breadcrumb-item a {
  color: #6c757d;
}

.colony-breadcrumb .breadcrumb-item a {
  text-decoration: none;
}

.colony-breadcrumb .breadcrumb-item a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.colony-breadcrumb .breadcrumb-item.active {
  color: #6c757d;
}

.colony-form-shell {
  display: flex;
  justify-content: center;
  padding-top: 0.35rem;
}

.colony-form-card {
  width: 100%;
  max-width: 42rem;
  border: 1px solid #e3e7ee;
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(31, 56, 100, 0.06);
}

.colony-form-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.15rem 1.35rem 1rem;
  border-bottom: 1px solid #eef0f4;
}

.colony-form-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 1.05rem;
  flex-shrink: 0;
}

.colony-form-title {
  margin: 0;
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
}

.colony-form-desc {
  margin: 0.25rem 0 0;
  color: #6c757d;
  font-size: 0.82rem;
  line-height: 1.35;
}

.colony-form-body {
  padding: 1.15rem 1.35rem 1.25rem;
}

.colony-form-field + .colony-form-field {
  margin-top: 1rem;
}

.colony-form-label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--navy);
  font-size: 0.84rem;
  font-weight: 600;
}

.colony-form-required {
  color: #dc3545;
}

.colony-form-control {
  border-color: #d5dbe3;
  border-radius: 0.45rem;
  font-size: 0.86rem;
}

.colony-form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.15rem rgba(46, 83, 149, 0.12);
}

.colony-form-hint {
  display: block;
  margin-top: 0.3rem;
  color: #8a96a3;
  font-size: 0.76rem;
  line-height: 1.35;
}

.colony-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px solid #eef0f4;
}

.colony-form-cancel {
  padding: 0.42rem 0.95rem;
  border-radius: 0.45rem;
  border: 1px solid #cfd6df;
  background: #fff;
  color: #4b5563;
  font-size: 0.84rem;
  font-weight: 600;
}

.colony-form-cancel:hover,
.colony-form-cancel:focus-visible {
  background: #f7f9fc;
  border-color: #b8c2cf;
  color: var(--navy);
}

.colony-form-save {
  padding: 0.42rem 1rem;
  border-radius: 0.45rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 600;
}

.colony-form-save:hover,
.colony-form-save:focus-visible {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

@media (max-width: 1199.98px) {
  .colony-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0.85rem;
  }

  .colony-summary-item:nth-child(3) {
    border-left: 0;
  }

  .colony-summary-item:nth-child(odd):not(:first-child) {
    border-left: 1px solid #edf0f4;
  }

  .colony-room-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .colony-room-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .colony-housing-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .colony-add-room {
    align-self: flex-end;
  }

  .colony-summary {
    grid-template-columns: 1fr;
  }

  .colony-summary-item + .colony-summary-item {
    border-left: 0;
    border-top: 1px solid #edf0f4;
    padding-top: 0.85rem;
  }

  .colony-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .colony-search {
    max-width: none;
  }

  .colony-room-grid {
    grid-template-columns: 1fr;
  }

  .colony-records-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .colony-pagination {
    justify-content: center;
  }

  .colony-form-card-header,
  .colony-form-body {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ---------- Login / auth (SGCPL marketing + sign-in) ---------- */
html:has(body.login-body) {
  min-height: 100%;
}

body.login-body {
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  background: #030e21;
  color: #e2e8f0;
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.login-page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
}

.login-bg {
  position: absolute;
  inset: 0;
  background: #030e21 url("/img/login-mill-bg.jpg") center center / cover no-repeat;
  z-index: 0;
}

.login-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(3, 14, 33, 0.94) 0%,
    rgba(3, 14, 33, 0.84) 40%,
    rgba(3, 14, 33, 0.58) 100%
  );
}

.login-shell {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr);
  align-items: end;
  align-content: center;
  gap: clamp(0.75rem, 1.6vh, 1.25rem) clamp(1rem, 2vw, 2rem);
  padding: clamp(0.7rem, 1.6vh, 1.25rem) clamp(1rem, 2vw, 2rem) clamp(0.45rem, 1vh, 0.85rem);
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  min-width: 0;
  transform: none !important;
  margin-bottom: 0 !important;
}

.login-hero {
  display: flex;
  flex-direction: column;
  gap: clamp(0.7rem, 1.5vh, 1.15rem);
  min-width: 0;
  max-width: 980px;
}

.login-hero-brand {
  display: flex;
  align-items: center;
}

.login-hero-logo {
  display: block;
  width: clamp(148px, 16vw, 210px);
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  background: transparent;
}

.login-hero-tagline {
  max-width: 40rem;
}

.login-hero-system {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #cbd5e1;
  margin-bottom: 0.45rem;
}

.login-hero-headline {
  font-size: clamp(1.7rem, 2.6vw, 2.6rem);
  font-weight: 800;
  line-height: 1.12;
  margin: 0 0 0.45rem;
  color: #fff;
  letter-spacing: -0.02em;
}

.login-hero-sub {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  max-width: 32rem;
  color: #cbd5e1;
  font-weight: 500;
}

.login-section-heading {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
}

.login-section-heading--dark {
  margin-bottom: 0;
}

.login-section-accent {
  display: inline-block;
  width: 4px;
  height: 0.9rem;
  border-radius: 999px;
  background: #0ea5e9;
  flex-shrink: 0;
}

.login-section-accent--blue {
  background: #0284c7;
}

.login-glass-panel,
.login-modules-bar {
  background: rgba(8, 22, 42, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1rem;
  padding: 0.75rem 0.9rem 0.85rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.login-modules-title {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #cbd5e1;
  margin-bottom: 0;
}

.login-modules-icons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  min-width: 0;
}

.login-module-card {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.45rem;
  min-height: 4.35rem;
  padding: 0.55rem 0.4rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(15, 23, 42, 0.4);
  color: #cbd5e1;
  cursor: default;
}

.login-module-card i {
  font-size: 1.15rem;
  line-height: 1;
}

.login-module-card span {
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.25;
}

.login-module-card.selected {
  background: rgba(15, 23, 42, 0.4);
  border-color: rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  box-shadow: none;
  animation: none;
}

@keyframes cardGlowPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(2, 132, 199, 0);
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(15, 23, 42, 0.4);
    transform: translateY(0);
    color: #cbd5e1;
  }
  12.5% {
    box-shadow: 0 0 22px 6px rgba(56, 189, 248, 0.85), inset 0 0 14px rgba(56, 189, 248, 0.5);
    border-color: #38bdf8;
    background: rgba(2, 132, 199, 0.45);
    transform: translateY(-3px);
    color: #fff;
  }
  25% {
    box-shadow: 0 0 0 0 rgba(2, 132, 199, 0);
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(15, 23, 42, 0.4);
    transform: translateY(0);
    color: #cbd5e1;
  }
}

.glow-step-1,
.glow-step-2,
.glow-step-3,
.glow-step-4,
.glow-step-5 {
  animation: none;
}

.login-live-data {
  background: #f4f7fb;
  color: #1e293b;
  border-radius: 1rem;
  padding: 0.7rem 0.9rem 0.8rem;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
  min-width: 0;
}

.login-live-data-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  margin-bottom: 0.8rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid #e2e8f0;
}

.login-live-data-title {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #0f2744;
}

.login-live-data-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #0284c7;
  text-align: right;
}

.login-live-data-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  min-width: 0;
}

.login-live-data-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.login-modules {
  min-width: 0;
}

.login-live-stat {
  text-align: center;
  padding: 0 0.3rem;
  border-right: 1px solid #e8edf3;
}

.login-live-stat:last-child {
  border-right: 0;
}

.login-live-stat-icon {
  display: block;
  font-size: 1.15rem;
  color: #0284c7;
  margin-bottom: 0.25rem;
}

.login-live-stat-value {
  font-size: 1rem;
  font-weight: 800;
  color: #0f2744;
  line-height: 1.2;
}

.login-live-stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #64748b;
  margin-top: 0.28rem;
  line-height: 1.25;
}

.login-live-stat-sub {
  font-size: 0.58rem;
  color: #64748b;
  margin-top: 0.15rem;
}

.login-live-badge {
  display: inline-block;
  margin-top: 0.22rem;
  padding: 0.12em 0.55em;
  font-size: 0.55rem;
  font-weight: 700;
  color: #15803d;
  background: #dcfce7;
  border-radius: 999px;
}

.login-live-progress {
  height: 4px;
  border-radius: 999px;
  background: #e2e8f0;
  margin: 0.4rem auto 0;
  max-width: 5.75rem;
  overflow: hidden;
  position: relative;
}

.login-live-progress::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--pct, 0%);
  border-radius: inherit;
}

.login-live-progress--green::after {
  background: #22c55e;
}

.login-live-progress--blue::after {
  background: #0284c7;
}

.login-main {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.25rem 0;
  min-width: 0;
}

.login-card {
  width: 100%;
  max-width: min(420px, 100%);
  background: #fff;
  border-radius: 1.5rem;
  border: 1px solid #f1f5f9;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
  color: #1e293b;
}

.login-card-inner {
  padding: 1.65rem 1.85rem 1.35rem;
}

.login-card-brand--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 0.25rem;
}

.login-card-brand-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.2rem;
}

.login-card-logo {
  display: block;
  width: clamp(150px, 55%, 220px);
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
  background: transparent;
}

.login-card-divider {
  width: 100%;
  height: 1px;
  background: #f1f5f9;
  margin: 1rem 0 1.1rem;
}

.login-card-welcome {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 0.2rem;
  text-align: center;
  letter-spacing: -0.01em;
}

.login-card-sub {
  font-size: 0.78rem;
  color: #64748b;
  margin: 0 0 1.25rem;
  text-align: center;
}

.login-body .form-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #334155;
  margin-bottom: 0.3rem;
}

.login-field {
  position: relative;
}

.login-field .form-control {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding-left: 2.4rem;
  min-height: 2.55rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #0f172a;
}

.login-field .form-control.login-password {
  padding-right: 2.5rem;
}

.login-field .form-control::placeholder {
  color: #94a3b8;
}

.login-field .form-control:focus {
  border-color: #0284c7;
  background: #f8fafc;
  box-shadow: 0 0 0 0.18rem rgba(2, 132, 199, 0.18);
}

.login-field-icon,
.login-field-toggle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  border: 0;
  background: transparent;
  padding: 0;
  line-height: 1;
}

.login-field-icon {
  left: 0.9rem;
  pointer-events: none;
  font-size: 0.95rem;
}

.login-field-toggle {
  right: 0.75rem;
  cursor: pointer;
  color: #94a3b8;
  font-size: 0.95rem;
}

.login-field-toggle:hover {
  color: #64748b;
}

.login-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.login-body .form-check-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #475569;
}

.login-body .form-check-input {
  border-color: #cbd5e1;
  background-color: #f8fafc;
}

.login-body .form-check-input:checked {
  background-color: #0369a1;
  border-color: #0369a1;
}

.login-body .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(2, 132, 199, 0.2);
  border-color: #0284c7;
}

.login-forgot-link {
  font-size: 0.75rem;
  font-weight: 600;
  color: #0284c7;
  text-decoration: none;
}

.login-forgot-link:hover {
  text-decoration: underline;
  color: #0369a1;
}

.login-signin-btn,
.login-body .btn-primary.login-signin-btn {
  background: #0a3866;
  border: none;
  border-radius: 0.75rem;
  font-weight: 700;
  font-size: 0.8rem;
  min-height: 2.75rem;
  box-shadow: 0 10px 20px rgba(10, 56, 102, 0.25);
}

.login-signin-btn:hover,
.login-signin-btn:focus,
.login-body .btn-primary.login-signin-btn:hover,
.login-body .btn-primary.login-signin-btn:focus {
  background: #072a4d;
  border: none;
}

.login-card-powered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid #f1f5f9;
}

.login-card-powered-label {
  font-size: 0.65rem;
  color: #94a3b8;
}

.login-rapidia-mark {
  width: 0.45rem;
  height: 0.45rem;
  background: #1e293b;
  transform: rotate(45deg);
  display: inline-block;
}

.login-rapidia-text {
  font-size: 0.7rem;
  font-weight: 700;
  color: #334155;
}

.login-page-footer {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.85rem 2rem;
  font-size: 0.7rem;
  color: #94a3b8;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.login-page-footer-right-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.login-page-footer-sep {
  opacity: 0.55;
}

@media (max-width: 1199.98px) {
  /* Keep the approved 5-up modules + live-data composition; tighten spacing only. */
  .login-shell {
    gap: 1.1rem 1.25rem;
    padding: 1.15rem 1.25rem 0.75rem;
  }

  .login-module-card {
    min-height: 4.6rem;
    padding: 0.6rem 0.35rem;
  }

  .login-module-card span {
    font-size: 0.64rem;
  }

  .login-live-stat-value {
    font-size: 0.9rem;
  }

  .login-live-stat-label {
    font-size: 0.64rem;
  }

  .login-live-data-tag {
    font-size: 0.64rem;
  }
}

@media (max-width: 991.98px) {
  /* Genuine narrow viewports: stack and allow page scroll. */
  html:has(body.login-body),
  body.login-body {
    overflow: auto;
    height: auto;
    min-height: 100%;
    min-height: 100dvh;
  }

  .login-page {
    height: auto;
    min-height: 100%;
    min-height: 100dvh;
    overflow: visible;
  }

  .login-shell {
    grid-template-columns: 1fr;
    padding: 1rem;
    gap: 1.25rem;
  }

  .login-hero {
    max-width: none;
    gap: 1.25rem;
  }

  .login-hero-logo {
    width: clamp(150px, 55vw, 240px);
    margin: 0 auto;
  }

  .login-hero-brand {
    justify-content: center;
    width: 100%;
  }

  .login-hero-tagline {
    text-align: center;
    margin-inline: auto;
  }

  .login-hero-headline {
    font-size: clamp(1.55rem, 5vw, 2rem);
  }

  .login-hero-sub {
    margin-inline: auto;
  }

  .login-main {
    justify-content: center;
    width: 100%;
  }

  .login-card {
    max-width: 420px;
    width: 100%;
  }

  .login-card-inner {
    padding: 1.5rem 1.25rem 1.25rem;
  }

  .login-card-logo {
    width: clamp(140px, 60%, 200px);
  }

  .login-modules-icons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .login-page-footer {
    flex-direction: column;
    text-align: center;
    justify-content: center;
    padding: 0.75rem 1rem;
  }

  .login-page-footer-right-group {
    flex-wrap: wrap;
    justify-content: center;
  }

  .login-live-data-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .login-live-stat {
    border-right: 0;
    border-bottom: 1px solid #e8edf3;
    padding-bottom: 0.55rem;
    margin-bottom: 0.35rem;
  }

  .login-live-stat:nth-child(odd) {
    border-right: 1px solid #e8edf3;
  }

  .login-live-stat:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

@media (max-width: 575.98px) {
  .login-shell {
    padding: 0.85rem;
  }

  .login-modules-icons {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .login-module-card {
    min-height: 4.5rem;
    padding: 0.55rem 0.35rem;
  }

  .login-live-data-grid {
    grid-template-columns: 1fr;
  }

  .login-live-stat {
    border-right: 0 !important;
    border-bottom: 1px solid #e8edf3;
  }

  .login-live-stat:last-child {
    border-bottom: 0;
  }

  .login-hero-logo {
    width: min(200px, 78vw);
  }

  .login-card-logo {
    width: min(180px, 70vw);
  }

  .login-live-data-tag {
    text-align: left;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glow-step-1,
  .glow-step-2,
  .glow-step-3,
  .glow-step-4,
  .glow-step-5 {
    animation: none;
  }
}

/* ---------- Transport Management ---------- */
.transport-management-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
}

.transport-management-grid > .col-lg-6 {
  width: auto;
}

.transport-master-card {
  display: flex;
  flex-direction: column;
  min-height: 35rem;
  border: 1px solid #e3e7ee;
  border-radius: 0.55rem;
  box-shadow: 0 2px 8px rgba(31, 56, 100, 0.06);
  overflow: hidden;
}

.transport-master-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem 0.75rem;
}

.transport-master-heading {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.75rem;
}

.transport-master-heading h2 {
  margin: 0 0 0.12rem;
  color: #1c2f52;
  font-size: 0.94rem;
  font-weight: 700;
}

.transport-master-heading p {
  margin: 0;
  color: #687386;
  font-size: 0.72rem;
}

.transport-master-icon {
  display: inline-flex;
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: #eef4ff;
  color: #2f72dc;
  font-size: 1.45rem;
}

.transport-master-icon-road {
  color: #2b5190;
}

.transport-master-header > .btn {
  min-height: 2rem;
  padding-inline: 0.8rem;
  white-space: nowrap;
}

.transport-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 1rem 0.75rem;
}

.transport-search {
  display: flex;
  width: min(16rem, calc(100% - 3rem));
}

.transport-search .form-control {
  min-height: 2rem;
  border-color: #d6dce5;
  border-radius: 0.32rem 0 0 0.32rem;
}

.transport-search .form-control:focus {
  position: relative;
  z-index: 1;
}

.transport-search-button {
  min-width: 2.05rem;
  min-height: 2rem;
  margin-left: -1px;
  border: 1px solid #d6dce5;
  border-radius: 0 0.32rem 0.32rem 0;
  background: #fff;
  color: #44536a;
}

.transport-search-button:hover,
.transport-search-button:focus,
.transport-filter-button:hover,
.transport-filter-button:focus {
  border-color: #9cabc1;
  background: #f7f9fc;
  color: var(--navy);
}

.transport-filter-button {
  min-width: 2rem;
  min-height: 2rem;
  border: 1px solid #d6dce5;
  border-radius: 0.32rem;
  background: #fff;
  color: #506078;
}

.transport-table-region {
  flex: 1 1 auto;
  padding: 0 0.75rem;
}

.transport-master-table {
  border: 1px solid #e1e5eb;
}

.transport-master-table thead th {
  padding: 0.5rem 0.7rem;
  white-space: nowrap;
}

.transport-master-table tbody td {
  padding: 0.45rem 0.7rem;
  vertical-align: middle;
}

.transport-master-table .btn {
  min-width: 2.9rem;
  padding: 0.2rem 0.6rem;
}

.transport-master-table .emp-workspace-icon-action {
  min-width: 1.75rem;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
}

.transport-master-table .emp-workspace-row-actions .emp-workspace-icon-action + .emp-workspace-icon-action {
  margin-left: 0.2rem;
}

.transport-master-table .transport-action-view {
  color: var(--accent);
  background: #fff;
  border: 1px solid var(--accent);
}

.transport-master-table .transport-action-view:hover,
.transport-master-table .transport-action-view:focus-visible {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.transport-master-table .transport-action-edit {
  color: #657185;
  background: #fff;
  border: 1px solid #d8dee7;
}

.transport-master-table .transport-action-edit:hover,
.transport-master-table .transport-action-edit:focus-visible {
  color: #506078;
  background: #f7f9fc;
  border-color: #c5ccd6;
}

.transport-actions-column {
  width: 5.5rem;
}

.transport-table-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.85rem;
  margin-top: auto;
  padding: 0.75rem 1rem;
  border-top: 1px solid #edf0f4;
}

.transport-entry-summary {
  color: #657185;
  font-size: 0.8rem;
}

.transport-pagination {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.transport-page-button,
.transport-page-number {
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid #d8dee7;
  background: #fff;
  color: #657185;
  font-size: 0.8rem;
}

.transport-page-number {
  border-color: #2f72dc;
  background: #2f72dc;
  color: #fff;
}

.transport-page-button:disabled {
  color: #aeb6c2;
  opacity: 1;
}

/* Auto width plus caret gutter; a fixed width clipped the "10 / page" label. */
.transport-page-size {
  width: auto;
  min-width: 7rem;
  justify-self: end;
  min-height: 1.9rem;
  padding: 0.2rem 2rem 0.2rem 0.6rem;
  border-color: #d8dee7;
  font-size: 0.8rem;
}

/* Driver Master — View Employees */
.driver-employees-page {
  margin-top: -0.15rem;
}

.driver-employees-page .emp-summary-identity {
  padding-bottom: 0.65rem;
  margin-bottom: 0.55rem;
}

.driver-employees-page .emp-summary-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.driver-employees-page .emp-summary-metric {
  cursor: default;
}

.driver-employees-page .emp-summary-metric:hover,
.driver-employees-page .emp-summary-metric:focus-visible {
  background: transparent;
  box-shadow: none;
}

.driver-employees-page .emp-list-table-card {
  border-radius: 0.45rem;
}

.driver-employees-scroll {
  overflow: auto;
}

.driver-employees-page .driver-employees-table > :not(caption) > * > * {
  padding: 0.35rem 0.7rem;
  vertical-align: middle;
  white-space: nowrap;
  font-size: 0.84rem;
}

.driver-employees-page .driver-employees-table.table > thead > * > * {
  --bs-table-bg: var(--navy);
  --bs-table-color: #fff;
  background-color: var(--navy);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 767.98px) {
  .driver-employees-page .emp-summary-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1199.98px) {
  .transport-management-grid {
    grid-template-columns: 1fr;
  }

  .transport-master-card {
    min-height: auto;
  }
}

@media (max-width: 575.98px) {
  .transport-master-header {
    align-items: flex-start;
  }

  .transport-master-heading p {
    display: none;
  }

  .transport-table-footer {
    grid-template-columns: 1fr auto;
  }

  .transport-pagination {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
  }
}

/* ---------- Shift Planning (approved preview) ---------- */

.shift-planning-overview-filter .sp-week-start:not(.sp-week-monday) {
  border-color: var(--bs-warning);
}

.shift-planning-overview-summary-card {
  border: 1px solid #e3e8ef;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.shift-planning-overview-summary-card .card-body {
  padding: 0.75rem 0.85rem;
}

.shift-planning-overview-weeks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.shift-planning-overview-weeks-footer {
  display: flex;
  justify-content: center;
  padding: 0.6rem 1rem;
  border-top: 1px solid #edf0f4;
  background: #fff;
}

.shift-planning-overview-cards .shift-planning-overview-card {
  border: 1px solid #e3e8ef;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.shift-planning-overview-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: #fff;
  border-bottom: 1px solid #edf0f4;
  font-weight: 600;
}

.shift-planning-overview-week-card-body {
  padding: 0.85rem 1rem;
}

.shift-planning-overview-week-header {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.shift-planning-overview-week-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #e8f1ff;
  color: #2f72dc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}

.shift-planning-overview-week-heading {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.shift-planning-overview-week-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #2b3340;
  line-height: 1.25;
}

.shift-planning-status-badge {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  padding: 0.25rem 0.55rem;
}

.shift-planning-status-badge[data-status="Draft"] {
  background: #eef1f5 !important;
  color: #5c6678 !important;
}

.shift-planning-status-badge[data-status="Prepared"] {
  background: #fff3e0 !important;
  color: #c56a00 !important;
}

.shift-planning-status-badge[data-status="PmApproved"] {
  background: #e8f1ff !important;
  color: #2f5fd0 !important;
}

.shift-planning-status-badge[data-status="GmApproved"] {
  background: #e7f6ed !important;
  color: #1f7a43 !important;
}

.shift-planning-status-badge[data-status="LeaveFinalized"],
.shift-planning-status-badge[data-status="PayrollComputed"] {
  background: #e7f6ed !important;
  color: #1f7a43 !important;
}

.shift-planning-overview-week-meta .shift-planning-overview-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.78rem;
  color: #4b5565;
  margin-bottom: 0.45rem;
}

.shift-planning-overview-week-meta .shift-planning-overview-meta-row:last-child {
  margin-bottom: 0;
}

.shift-planning-overview-meta-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #6b7380;
  min-width: 0;
}

.shift-planning-overview-meta-label i {
  color: #8b95a5;
  font-size: 0.82rem;
  flex-shrink: 0;
}

.shift-planning-overview-meta-value {
  font-weight: 600;
  color: #2b3340;
  text-align: right;
  flex-shrink: 0;
}

.shift-planning-overview-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.shift-planning-overview-action-tile {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid #e8ecf2;
  border-radius: 0.45rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
  min-height: 4.35rem;
}

.shift-planning-overview-action-tile:hover:not(.is-disabled):not(:disabled) {
  background: #f8fafc;
  border-color: #d5dbe3;
  color: inherit;
}

.shift-planning-overview-action-tile.is-disabled,
.shift-planning-overview-action-tile:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.shift-planning-overview-action-link {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.55rem 0.35rem;
  border-radius: 0.45rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}

.shift-planning-overview-action-link:hover {
  background: #f5f7fa;
  color: inherit;
}

.shift-planning-overview-action-form {
  margin: 0;
}

.shift-planning-overview-action-icon {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
}

.shift-planning-overview-action-text {
  min-width: 0;
}

.shift-planning-overview-action-text strong {
  display: block;
  font-size: 0.76rem;
  line-height: 1.25;
  margin-bottom: 0.1rem;
}

.shift-planning-overview-action-text small {
  font-size: 0.66rem;
  line-height: 1.25;
}

.shift-planning-overview-action-icon-planner {
  background: #e8f1ff;
  color: #2f72dc;
}

.shift-planning-overview-action-icon-review {
  background: #eef0ff;
  color: #5b4fd6;
}

.shift-planning-overview-action-icon-autoweek {
  background: #f1ebff;
  color: #6f42c1;
}

.shift-planning-overview-action-icon-autoday,
.shift-planner-autogen-item-icon.shift-planning-overview-action-icon-autoday {
  background: #fff3e8;
  color: #e07b00;
}

.shift-planning-overview-action-icon-export {
  background: #e6f7f2;
  color: #0d8a6a;
}

.shift-planning-overview-approval-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 0.75rem;
  padding-bottom: 0.85rem;
}

.shift-planning-overview-approval-stepper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 0.85rem;
}

.shift-planning-overview-approval-stepper .sp-step {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  max-width: 7.5rem;
}

.shift-planning-overview-approval-stepper .sp-circle {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 2px solid #ced4da;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 600;
  background: #fff;
  color: #9aa3b2;
}

.shift-planning-overview-approval-stepper .sp-step.is-done .sp-circle {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.shift-planning-overview-approval-stepper .sp-step.is-current .sp-circle {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.shift-planning-overview-approval-stepper .sp-step.is-current .sp-role,
.shift-planning-overview-approval-stepper .sp-step.is-current .sp-state {
  color: var(--navy);
  font-weight: 650;
}

.shift-planning-overview-approval-stepper .sp-step.is-pending .sp-circle {
  background: #fff;
  border-color: #d5dbe3;
  color: #9aa3b2;
}

.shift-planning-overview-approval-stepper .sp-connector {
  flex: 0 0 1.75rem;
  height: 2px;
  background: #dee2e6;
  margin-top: 0.85rem;
}

.shift-planning-overview-approval-stepper .sp-connector.is-done {
  background: var(--accent);
}

.shift-planning-overview-approval-stepper .sp-role {
  font-size: 0.66rem;
  color: #6b7380;
  margin-top: 0.35rem;
  line-height: 1.2;
}

.shift-planning-overview-approval-stepper .sp-state {
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 0.15rem;
  line-height: 1.2;
}

.shift-planning-overview-approval-stepper .sp-state.is-prepared {
  color: #c56a00;
}

.shift-planning-overview-approval-stepper .sp-state.is-approved {
  color: #1f7a43;
}

.shift-planning-overview-approval-stepper .sp-state.is-pending {
  color: #6b7380;
  font-weight: 500;
}

.shift-planning-overview-approval-stepper .sp-time {
  font-size: 0.62rem;
  color: #9aa3b2;
  margin-top: 0.1rem;
  line-height: 1.2;
}

.shift-approval-stepper.stepper {
  margin: 0.5rem 0 1rem;
}

.shift-approval-stepper .step-label {
  font-size: 0.68rem;
  line-height: 1.25;
}

.shift-planning-overview-summary-heading {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 0.65rem;
  color: #2b3340;
}

.shift-planning-kpi-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #e8ecf2;
  border-radius: 0.55rem;
  background: #fff;
  min-height: 4.1rem;
}

.shift-planning-kpi-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.shift-planning-kpi-value {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  color: #1f2937;
}

.shift-planning-kpi-pct {
  font-size: 0.72rem;
  font-weight: 500;
  color: #6b7280;
}

.shift-planning-kpi-label {
  font-size: 0.68rem;
  color: #6b7280;
  line-height: 1.2;
}

.shift-planning-kpi-total .shift-planning-kpi-icon {
  background: #e8f1ff;
  color: #2f72dc;
}

.shift-planning-kpi-day .shift-planning-kpi-icon {
  background: #e8f8ee;
  color: #28a745;
}

.shift-planning-kpi-night .shift-planning-kpi-icon {
  background: #f1ebff;
  color: #6f42c1;
}

.shift-planning-kpi-general .shift-planning-kpi-icon {
  background: #fff3e8;
  color: #fd7e14;
}

.shift-planning-kpi-off .shift-planning-kpi-icon {
  background: #eef1f5;
  color: #6c757d;
}

.shift-planning-kpi-unassigned .shift-planning-kpi-icon {
  background: #fdeeee;
  color: #dc3545;
}

.shift-planning-shift-pill {
  display: inline-block;
  min-width: 2.1rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
}

.shift-cell-d,
.shift-planning-shift-pill.shift-cell-d {
  background: #e8f8ee;
  color: #1f7a43;
  border: 1px solid #ccebda;
}

.shift-cell-n,
.shift-planning-shift-pill.shift-cell-n {
  background: #f1ebff;
  color: #5a32a3;
  border: 1px solid #dccff5;
}

.shift-cell-g,
.shift-planning-shift-pill.shift-cell-g {
  background: #fff3e8;
  color: #c05600;
  border: 1px solid #f8dcc0;
}

.shift-cell-off,
.shift-planning-shift-pill.shift-cell-off {
  background: #eef1f5;
  color: #5c6678;
  border: 1px solid #d8dee7;
}

.shift-planning-overview-weeks-table th {
  white-space: nowrap;
  font-size: 0.72rem;
}

.shift-planning-overview-week-current {
  background: #f3f8ff !important;
}

.shift-planning-overview-week-action {
  color: #2f72dc;
  padding: 0.1rem 0.35rem;
}

.shift-planning-table-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid #edf0f4;
  background: #fff;
}

/* Unified records shell: toolbar + table + footer in one card */
.shift-planning-records-shell {
  border: 1px solid #e3e8ef;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  overflow: hidden;
  background: #fff;
}

.shift-planning-records-shell > .card,
.shift-planning-records-shell .card {
  border: 0;
  box-shadow: none;
  background: transparent;
}

.shift-planning-records-toolbar {
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid #edf0f4;
  background: #fff;
  margin: 0;
}

.shift-planning-records-bulk {
  border-bottom: 1px solid #edf0f4;
  background: #fafbfc;
}

.shift-planning-records-body {
  background: #fff;
}

.shift-planning-records-shell .shift-planning-table-footer,
.shift-planning-records-shell .shift-review-table-footer {
  border-bottom: 0;
}

.shift-planning-overview-weeks.shift-planning-records-shell .card-header {
  border-bottom: 1px solid #edf0f4;
  background: #fff;
}

.shift-planning-table-summary {
  color: #657185;
  font-size: 0.8rem;
}

.shift-planning-pagination {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: center;
}

.shift-planning-page-btn {
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 0.45rem;
  border: 1px solid #d8dee7;
  background: #fff;
  color: #657185;
  font-size: 0.8rem;
  border-radius: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}

.shift-planning-page-btn.active {
  border-color: #2f72dc;
  background: #2f72dc;
  color: #fff;
}

.shift-planning-page-btn.disabled {
  color: #aeb6c2;
  cursor: default;
  pointer-events: none;
}

.shift-planning-page-size-wrap {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.shift-planning-page-size {
  width: auto;
  min-width: 4.5rem;
  min-height: 1.9rem;
  padding: 0.2rem 1.75rem 0.2rem 0.6rem;
  border-color: #d8dee7;
  font-size: 0.8rem;
}

/* Detailed Planner */
.shift-planner-back-link,
.shift-review-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: #2f72dc;
  text-decoration: none;
  margin-bottom: 0.75rem;
}

.shift-planner-back-link:hover,
.shift-review-back-link:hover {
  color: #1f5bb8;
}

.shift-planner-context-card,
.shift-review-context-card {
  border: 1px solid #e3e8ef;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* Escape card overflow; elevate above sticky workspace tabs (z-index 1010). */
.shift-planner-context-card {
  position: relative;
  overflow: visible !important;
}

.shift-planner-context-body {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.65rem 1rem;
  overflow: visible !important;
}

.shift-planner-context-week-block {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  flex-shrink: 0;
  min-width: 11rem;
}

.shift-planner-context-week-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #e8f1ff;
  color: #2f72dc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}

.shift-planner-context-week-range {
  font-size: 0.92rem;
  font-weight: 700;
  color: #2b3340;
  line-height: 1.2;
  white-space: nowrap;
}

.shift-planner-context-week-sub {
  font-size: 0.68rem;
  color: #8b95a5;
  line-height: 1.2;
  white-space: nowrap;
}

.shift-planner-context-fields {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}

.shift-planner-context-field {
  flex-shrink: 0;
}

.shift-planner-context-field-updated {
  min-width: 8.5rem;
}

.shift-planner-context-updated-by {
  font-size: 0.68rem;
  color: #8b95a5;
  line-height: 1.2;
}

.shift-planner-context-autogen {
  flex-shrink: 0;
  margin-left: auto;
  position: relative;
  /* Above .emp-workspace-nav-sticky (1010); below #topbar (1020) when closed is fine —
     open menu uses fixed Popper + 1080 and inherits this stacking context. */
  z-index: 1015;
}

.shift-planner-autogen-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid #ddd2f5;
  background: #f8f5ff;
  color: #6f42c1;
  white-space: nowrap;
  max-width: 100%;
}

.shift-planner-autogen-toggle:hover:not(:disabled),
.shift-planner-autogen-toggle:focus-visible {
  border-color: #c4b0ea;
  background: #f1ebff;
  color: #5a32a3;
}

.shift-planner-autogen-toggle:disabled {
  opacity: 0.55;
}

.shift-planner-autogen-icon {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: #f1ebff;
  color: #6f42c1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.75rem;
}

.shift-planner-autogen-text {
  font-size: 0.78rem;
  font-weight: 600;
}

.shift-planner-autogen-menu {
  min-width: 16.5rem;
  padding: 0.35rem;
  z-index: 1080;
}

.shift-planner-autogen-menu .dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.4rem;
  white-space: normal;
}

.shift-planner-autogen-menu .dropdown-item:disabled {
  pointer-events: none;
}

.shift-planner-autogen-item-icon {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: #f1ebff;
  color: #6f42c1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.78rem;
}

.shift-planner-autogen-item-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  padding-top: 0.05rem;
}

.shift-planner-autogen-item-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: #2b3340;
  line-height: 1.25;
}

.shift-planner-autogen-item-sub {
  font-size: 0.72rem;
  font-weight: 400;
  color: #8b95a5;
  line-height: 1.3;
}

.shift-planner-autogen-form {
  margin: 0;
}

.shift-planner-context-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8b95a5;
  margin-bottom: 0.1rem;
  line-height: 1.2;
}

.shift-planner-context-value {
  font-size: 0.8rem;
  font-weight: 600;
  color: #2b3340;
  line-height: 1.25;
  white-space: nowrap;
}

.shift-planner-page {
  min-width: 0;
  max-width: 100%;
}

.shift-planner-page .shift-planning-records-shell {
  min-width: 0;
  max-width: 100%;
  container-type: inline-size;
  container-name: planner-records;
}

.shift-planner-page .shift-planning-records-body {
  min-width: 0;
}

.shift-planner-page .table-responsive {
  overflow-x: auto;
}

.shift-planner-page .shift-planner-context-fields {
  flex-wrap: wrap;
  overflow-x: visible;
}

.shift-planner-page .shift-planner-filters-toolbar {
  padding: 0.7rem 1rem 0.65rem;
}

.shift-planner-filters-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 1.3rem;
  gap: clamp(0.55rem, 1.45cqi, 1.3rem);
  min-width: 0;
  width: 100%;
}

.shift-planner-filter-fields,
.shift-planner-filter-secondary {
  display: contents;
}

.shift-planner-filter-item {
  flex: 0 1 auto;
  min-width: 0;
}

.shift-planner-filter-item .form-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: #6b7380;
  line-height: 1.2;
}

.shift-planner-filter-item .form-control,
.shift-planner-filter-item .form-select {
  width: 100%;
  min-width: 0;
  min-height: var(--hrms-dd-trigger-height);
  font-size: 0.8rem;
}

.shift-planner-filter-search {
  flex: 1 1 16.7rem;
  width: 16.7rem;
  max-width: 16.7rem;
  min-width: 9rem;
}

.shift-planner-filter-department {
  flex: 0 1 10.55rem;
  width: 10.55rem;
  min-width: 7rem;
}

.shift-planner-filter-shift,
.shift-planner-filter-status {
  flex: 0 1 8.6rem;
  width: 8.6rem;
  min-width: 5rem;
}

.shift-planner-filter-inline-actions {
  display: flex;
  align-items: center;
  align-self: flex-end;
  flex: 0 0 auto;
  gap: 1.3rem;
  gap: clamp(0.55rem, 1.45cqi, 1.3rem);
  height: var(--hrms-dd-trigger-height);
}

.shift-planner-filter-only-changes,
.shift-planner-filter-clear {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: max-content;
  height: var(--hrms-dd-trigger-height);
}

.shift-planner-filter-only-changes .form-check {
  display: flex;
  align-items: center;
  height: var(--hrms-dd-trigger-height);
  margin: 0;
}

.shift-planner-filter-only-changes .form-check-label {
  white-space: nowrap;
  font-size: 0.8rem;
  color: #374151;
}

.shift-planner-clear-filters {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: var(--hrms-dd-trigger-height);
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  padding: 0 0.7rem;
}

.shift-planner-clear-filters:hover {
  text-decoration: none;
}

.shift-planner-filter-view {
  flex: 0 0 7.95rem;
  width: 7.95rem;
  min-width: 6.25rem;
  margin-left: auto;
}

.shift-planner-bulk-toolbar {
  border: 1px solid #e3e8ef;
  background: #fafbfc;
}

.shift-planning-records-bulk.shift-planner-bulk-body,
.shift-planner-bulk-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  gap: clamp(0.45rem, 0.9cqi, 0.7rem);
  padding: 0.3rem 1rem;
  min-width: 0;
}

.shift-planner-bulk-selection,
.shift-planner-bulk-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  flex: 0 0 auto;
}

.shift-planner-bulk-selection {
  gap: 0.75rem;
}

.shift-planner-bulk-actions {
  gap: 0.55rem;
}

.shift-planner-bulk-divider {
  width: 1px;
  height: 1.35rem;
  background: #d8dee7;
  flex: 0 0 auto;
}

.shift-planner-selected-count {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
  flex: 0 0 auto;
}

.shift-planner-bulk-body .btn-sm {
  font-size: 0.75rem;
  padding: 0.18rem 0.55rem;
  white-space: nowrap;
  flex: 0 0 auto;
}

.shift-planner-bulk-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0 !important;
  text-decoration: none;
}

.shift-planner-bulk-link:hover,
.shift-planner-bulk-link:focus-visible {
  text-decoration: none;
}

#spSelectAll.shift-planner-bulk-link {
  color: #2f72dc;
}

.shift-planner-bulk-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  flex: 1 1 9.5rem;
  width: auto;
  min-width: 9.5rem;
  max-width: 16rem;
  margin-left: auto;
  padding: 0.2rem 0.5rem;
  border: 1px solid #d5e4ff;
  border-radius: 0.4rem;
  background: #eef5ff;
  font-size: 0.68rem;
  color: #2f72dc;
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.shift-planner-bulk-hint i {
  flex: 0 0 auto;
  margin-top: 0.08rem;
}

.shift-planner-bulk-hint span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.shift-planner-bulk-apply-to {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
}

.shift-planner-bulk-apply-to .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  padding: 0.18rem 0.55rem;
}

/* Scrollable day list; fixed Popper strategy escapes records-shell overflow:hidden. */
.shift-planner-bulk-apply-to .shift-planner-apply-to-menu,
#spApplyToMenu {
  --shift-planner-apply-to-menu-max-height: min(
    var(--hrms-dd-menu-max-height),
    calc(100vh - 8rem),
    calc(100dvh - 8rem)
  );
  max-height: var(--shift-planner-apply-to-menu-max-height);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  z-index: 1080;
}

#spApplyToMenu::-webkit-scrollbar {
  width: 5px;
}

#spApplyToMenu::-webkit-scrollbar-thumb {
  background: #c5cdd8;
  border-radius: 999px;
}

.shift-planner-apply-prefix {
  font-size: 0.75rem;
  font-weight: 500;
  color: #4b5565;
  white-space: nowrap;
}

.shift-planner-summary .card-header {
  font-size: 0.84rem;
  font-weight: 600;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.shift-planner-summary-body {
  padding: 0.55rem 0.75rem;
}

.shift-planner-summary-main {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.shift-planner-summary-kpis {
  display: flex;
  flex: 1;
  gap: 0.45rem;
  min-width: 0;
}

.shift-planner-summary-kpis .shift-planning-kpi-card {
  flex: 1 1 0;
  min-width: 0;
  min-height: 3rem;
  padding: 0.4rem 0.5rem;
  gap: 0.45rem;
}

.shift-planner-summary-kpis .shift-planning-kpi-icon {
  width: 1.55rem;
  height: 1.55rem;
  font-size: 0.82rem;
  border-radius: 0.35rem;
}

.shift-planner-summary-kpis .shift-planning-kpi-label {
  font-size: 0.62rem;
  margin-bottom: 0.05rem;
}

.shift-planner-summary-kpis .shift-planning-kpi-value {
  font-size: 0.82rem;
  line-height: 1.1;
}

.shift-planner-summary-kpis .shift-planning-kpi-pct {
  font-size: 0.62rem;
  line-height: 1.1;
}

.shift-planner-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  min-width: 0;
}

.shift-planner-legend-title {
  font-size: 0.72rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}

.shift-planner-legend-items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  font-size: 0.68rem;
  color: #4b5565;
  line-height: 1.2;
}

.shift-planner-legend-items > span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.shift-planner-grid thead th {
  font-size: 0.68rem;
  white-space: nowrap;
}

.shift-planner-check-col {
  width: 2.25rem;
}

.shift-planner-grid .shift-planner-shift-select {
  width: auto;
  min-width: 3.8rem;
  max-width: 4.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-width: 1px;
  padding: 0.12rem 1.45rem 0.12rem 0.45rem;
  margin-inline: auto;
  background-position: right 0.35rem center;
  background-size: 0.65rem 0.65rem;
}

.shift-planner-cell {
  min-width: 4.25rem;
  text-align: center;
}

.shift-planner-persistence {
  border: 1px solid #e3e8ef;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.shift-planner-persistence .card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.85rem;
}

.shift-planner-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}

.shift-planner-actions .btn {
  font-size: 0.78rem;
  min-width: 8.5rem;
}

.shift-planner-gate-note {
  margin-left: auto;
  max-width: 26rem;
  text-align: right;
}

/* Plan Review */
.shift-review-context-card {
  background: #fff;
}

.shift-review-context-body {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.65rem 1rem;
}

.shift-review-context-week-block {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  flex-shrink: 0;
  min-width: 11rem;
}

.shift-review-context-week-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.45rem;
  background: #e8f1ff;
  color: #2f72dc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}

.shift-review-context-week-range {
  font-size: 0.92rem;
  font-weight: 700;
  color: #2b3340;
  line-height: 1.2;
  white-space: nowrap;
}

.shift-review-context-week-sub {
  font-size: 0.68rem;
  color: #8b95a5;
  line-height: 1.2;
  white-space: nowrap;
}

.shift-review-context-fields {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}

.shift-review-context-field {
  flex-shrink: 0;
}

.shift-review-context-field-updated {
  min-width: 8.5rem;
}

.shift-review-context-updated-by {
  font-size: 0.68rem;
  color: #8b95a5;
  line-height: 1.2;
}

.shift-review-context-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8b95a5;
  margin-bottom: 0.1rem;
  line-height: 1.2;
}

.shift-review-context-value {
  font-size: 0.8rem;
  font-weight: 600;
  color: #2b3340;
  line-height: 1.25;
  white-space: nowrap;
}

.shift-review-action-panel .btn-success {
  font-weight: 600;
}

.shift-review-page {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

.shift-review-page .shift-planner-context-fields {
  flex-wrap: nowrap;
  overflow-x: visible;
}

.shift-review-page .shift-planning-records-shell {
  min-width: 0;
  max-width: 100%;
  container-type: inline-size;
  container-name: review-records;
}

.shift-review-page .shift-planning-records-body,
.shift-review-page .table-responsive {
  min-width: 0;
}

.shift-review-workflow-card {
  border: 1px solid #e3e8ef;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.shift-review-workflow {
  display: flex;
  align-items: stretch;
  gap: clamp(0.75rem, 1.4cqi, 1.5rem);
  min-width: 0;
}

.shift-review-approval-block {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.7rem 1rem 0.75rem;
}

.shift-review-action-block {
  flex: 0 1 auto;
  min-width: 12.5rem;
  max-width: 22rem;
  padding: 0.7rem 1rem 0.75rem;
  border-left: 1px solid #edf0f4;
}

.shift-review-workflow-title {
  font-size: 0.78rem;
  font-weight: 650;
  color: #2b3340;
  margin-bottom: 0.55rem;
}

.shift-review-approval-stepper {
  margin-bottom: 0;
  justify-content: flex-start;
}

.shift-review-approval-stepper .sp-step {
  max-width: none;
}

.shift-review-approval-stepper .sp-connector {
  flex: 1 1 2.25rem;
  min-width: 1.25rem;
}

.shift-review-action-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.shift-review-action-form {
  margin: 0;
}

.shift-review-approve-btn,
.shift-review-return-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.15rem;
  border: 0;
  background: transparent;
  font-weight: 600;
  white-space: nowrap;
}

.shift-review-approve-btn {
  color: #1f7a43;
}

.shift-review-approve-btn:hover,
.shift-review-approve-btn:focus-visible {
  color: #166534;
}

.shift-review-return-btn {
  color: #c0152f;
}

.shift-review-return-btn:hover,
.shift-review-return-btn:focus-visible {
  color: #9b1226;
}

.shift-review-filters-toolbar {
  padding: 0.7rem 1rem 0.65rem;
}

.shift-review-filters-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: clamp(0.55rem, 1.45cqi, 1.15rem);
  min-width: 0;
  width: 100%;
}

.shift-review-filter-fields {
  display: contents;
}

.shift-review-filter-secondary {
  display: flex;
  align-items: flex-end;
  flex: 0 0 auto;
  gap: clamp(0.55rem, 1.45cqi, 1.15rem);
  margin-left: auto;
  min-width: 0;
}

.shift-review-filter-item {
  flex: 0 1 auto;
  min-width: 0;
}

.shift-review-filter-item .form-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: #6b7380;
  line-height: 1.2;
}

.shift-review-filter-item .form-control,
.shift-review-filter-item .form-select {
  width: 100%;
  min-width: 0;
  min-height: var(--hrms-dd-trigger-height);
  font-size: 0.8rem;
}

.shift-review-filter-search {
  flex: 1 1 15.5rem;
  width: 15.5rem;
  max-width: 16.5rem;
  min-width: 8.5rem;
}

.shift-review-filter-department {
  flex: 0 1 10.25rem;
  width: 10.25rem;
  min-width: 7rem;
}

.shift-review-filter-shift,
.shift-review-filter-status {
  flex: 0 1 7.75rem;
  width: 7.75rem;
  min-width: 5rem;
}

.shift-review-filter-exceptions {
  flex: 0 1 11.25rem;
  width: 11.25rem;
  min-width: 8.25rem;
}

.shift-review-filter-view {
  flex: 0 0 7.75rem;
  width: 7.75rem;
  min-width: 6.25rem;
  margin-left: 0;
}

.shift-review-filter-apply {
  flex: 0 0 auto;
  align-self: flex-end;
}

.shift-review-filter-apply .btn {
  min-height: var(--hrms-dd-trigger-height);
  padding-inline: 0.9rem;
}

.shift-review-exceptions-control {
  position: relative;
}

.shift-review-exceptions-control.has-exceptions .form-select {
  padding-left: 1.85rem;
  border-color: #e3a008;
  background-color: #fff8e8;
  color: #8a5a00;
  box-shadow: inset 0 0 0 1px rgba(227, 160, 8, 0.15);
}

.shift-review-exceptions-control.has-exceptions i {
  position: absolute;
  left: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  color: #e3a008;
  font-size: 0.78rem;
  pointer-events: none;
  z-index: 1;
}

.shift-review-metrics-strip {
  border: 0;
  box-shadow: none;
  border-bottom: 1px solid #edf0f4;
  background: #fff;
  padding: 0.55rem 0.75rem;
}

.shift-review-metrics-row {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: clamp(0.4rem, 0.9cqi, 0.65rem);
  min-width: 0;
}

.shift-review-metric {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 1 1 0;
  min-width: 0;
  padding: 0.4rem 0.6rem;
  border: 1px solid #e8ecf2;
  border-radius: 0.45rem;
  background: #fff;
}

.shift-review-metric:last-child {
  border-right: 1px solid #e8ecf2;
}

.shift-review-metric-icon {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 0.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  flex-shrink: 0;
}

.shift-review-metric-total .shift-review-metric-icon {
  background: #e8f1ff;
  color: #2f72dc;
}

.shift-review-metric-day .shift-review-metric-icon {
  background: #e8f8ee;
  color: #28a745;
}

.shift-review-metric-night .shift-review-metric-icon {
  background: #f1ebff;
  color: #6f42c1;
}

.shift-review-metric-general .shift-review-metric-icon {
  background: #fff3e8;
  color: #e07b00;
}

.shift-review-metric-off .shift-review-metric-icon {
  background: #eef1f5;
  color: #5c6678;
}

.shift-review-metric-unassigned .shift-review-metric-icon {
  background: #fdeeee;
  color: #dc3545;
}

.shift-review-metric-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

.shift-review-metric-label {
  font-size: 0.62rem;
  color: #8b95a5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shift-review-metric-value {
  font-size: 0.8rem;
  font-weight: 700;
  color: #1f2937;
  white-space: nowrap;
}

.shift-review-metric-pct {
  font-size: 0.68rem;
  font-weight: 500;
  color: #6b7280;
}

.shift-review-grid thead th {
  font-size: 0.66rem;
  white-space: nowrap;
  padding: 0.4rem 0.5rem;
  line-height: 1.2;
}

.shift-review-grid thead th span {
  font-size: 0.62rem;
  font-weight: 500;
}

.shift-review-grid tbody td {
  font-size: 0.78rem;
  padding: 0.28rem 0.5rem;
  vertical-align: middle;
}

.shift-review-shift-cell {
  text-align: center;
}

.shift-review-grid .shift-planning-shift-pill {
  min-width: 1.85rem;
  padding: 0.1rem 0.35rem;
  font-size: 0.66rem;
  line-height: 1.2;
}

.shift-review-grid .shift-planning-shift-pill.shift-cell-missing {
  background: #fde8ee;
  color: #c01545;
  border: 1px solid #f5c2d0;
}

.shift-review-grid .shift-planning-shift-pill.shift-cell-conflict {
  min-width: 1.35rem;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border-radius: 50%;
  background: #dc3545;
  color: #fff;
  border: 1px solid #dc3545;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.shift-review-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.45rem 0.85rem;
  border-top: 1px solid #edf0f4;
  background: #fff;
}

.shift-review-footer-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

.shift-review-bottom-panels {
  margin-bottom: 1rem;
}

.shift-review-drawer-triggers {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  min-width: 0;
}

.shift-review-drawer-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.1rem 2.4rem;
  border: 0;
  background: transparent;
  color: #1560ee;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.shift-review-drawer-trigger:first-child {
  padding-left: 0;
}

.shift-review-drawer-trigger + .shift-review-drawer-trigger {
  border-left: 1px solid #d8dfea;
}

.shift-review-drawer-trigger i {
  font-size: 1.15rem;
  line-height: 1;
}

.shift-review-drawer-trigger-exceptions i {
  color: #f26519;
}

.shift-review-drawer-trigger-info i,
.shift-review-drawer-trigger-history i {
  color: #1560ee;
}

.shift-review-drawer-trigger-count {
  color: #e11d2e;
  font-weight: 600;
}

.shift-review-drawer-trigger:hover,
.shift-review-drawer-trigger:focus-visible {
  color: #0b4ed4;
}

.shift-review-drawer-trigger-info:hover i,
.shift-review-drawer-trigger-info:focus-visible i,
.shift-review-drawer-trigger-history:hover i,
.shift-review-drawer-trigger-history:focus-visible i {
  color: #0b4ed4;
}

.shift-review-drawer-trigger-exceptions:hover i,
.shift-review-drawer-trigger-exceptions:focus-visible i {
  color: #d4550a;
}

.shift-review-drawer-trigger:hover .shift-review-drawer-trigger-count,
.shift-review-drawer-trigger:focus-visible .shift-review-drawer-trigger-count {
  color: #c41524;
}

.shift-review-drawer-trigger:focus-visible {
  outline: 2px solid #86b7fe;
  outline-offset: 2px;
}

.shift-review-drawer-header {
  align-items: flex-start;
}

.shift-review-drawer-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
}

.shift-review-drawer-heading i {
  margin-top: 0.2rem;
  font-size: 1.05rem;
}

.shift-review-drawer-subtitle {
  font-size: 0.75rem;
  color: #6b7380;
  line-height: 1.25;
}

.shift-review-exception-summary {
  flex: 0 0 auto;
  padding: 0.75rem 1rem 0.15rem;
  background: #fff;
}

.shift-review-exception-table-wrap {
  min-height: 0;
}

/* Exceptions drawer: scroll in the wrap (not the padded body) so sticky thead
   stays opaque above tbody. Bootstrap cell box-shadow paints over sticky otherwise. */
#srExceptionsDrawer .pg-payslip-drawer-body,
#attImportExceptionsDrawer .pg-payslip-drawer-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

#srExceptionsDrawer .shift-review-exception-table-wrap,
#attImportExceptionsDrawer .shift-review-exception-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  position: relative;
  z-index: 0;
  isolation: isolate;
  background: #fff;
}

#srExceptionsDrawer .shift-review-exception-table-wrap .table {
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 0;
}

#srExceptionsDrawer .shift-review-exception-table-wrap .table > thead > * > * {
  position: sticky;
  top: 0;
  z-index: 5;
  --bs-table-bg: var(--navy);
  --bs-table-color: #fff;
  --bs-table-accent-bg: transparent;
  background-color: var(--navy);
  color: #fff;
  background-clip: padding-box;
  /* Replace Bootstrap inset 9999px shadow that paints above sticky headers. */
  box-shadow: inset 0 -1px 0 #163056;
}

#srExceptionsDrawer .shift-review-exception-table-wrap .table > tbody > * > * {
  position: relative;
  z-index: 0;
  box-shadow: none;
}

.shift-review-panel .card-header {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  background: #fff;
}

.shift-review-panel .card-body {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.shift-review-exception-ok {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.76rem;
  color: #4b5565;
  white-space: normal;
  line-height: 1.3;
}

/* Attendance Import Exceptions & Alerts — grouped by severity/message. */
.att-import-exception-groups {
  padding: 0 0.25rem 0.5rem;
}

.att-import-exception-severity + .att-import-exception-severity {
  margin-top: 0.85rem;
}

.att-import-exception-severity-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.35rem 0.5rem 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navy);
}

.att-import-exception-severity-count {
  font-weight: 600;
  color: #6c757d;
}

.att-import-exception-group {
  border: 1px solid #e6ebf2;
  border-radius: 0.4rem;
  margin: 0 0.35rem 0.4rem;
  overflow: hidden;
  background: #fff;
}

.att-import-exception-group-toggle {
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.78rem;
  box-shadow: none !important;
  background: #f8fafc;
}

.att-import-exception-group-toggle:not(.collapsed) {
  background: #eef3f9;
}

.att-import-exception-group-main {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}

.att-import-exception-group-type {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #5f6b7c;
}

.att-import-exception-group-message {
  color: #334155;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
}

.att-import-exception-group-count {
  flex: 0 0 auto;
  margin-right: 0.35rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: #e8eef7;
  color: #334155;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.att-import-exception-group-body {
  padding: 0.55rem 0.75rem 0.7rem;
  font-size: 0.76rem;
  background: #fff;
}

.att-import-exception-rows-label {
  display: inline-block;
  margin-right: 0.35rem;
  font-weight: 700;
  color: #5f6b7c;
}

.att-import-exception-rows {
  color: #334155;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.shift-review-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.74rem;
  padding: 0.22rem 0;
  border-bottom: 1px solid #f0f2f5;
  line-height: 1.25;
}

.shift-review-info-row:last-child {
  border-bottom: 0;
}

.shift-review-info-row span:first-child {
  color: #6b7380;
  white-space: nowrap;
}

.shift-review-info-row strong {
  font-weight: 600;
  color: #2b3340;
  text-align: right;
  white-space: nowrap;
}

.shift-review-history-item {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid #f0f2f5;
  font-size: 0.78rem;
  line-height: 1.3;
}

.shift-review-history-item:last-child {
  border-bottom: 0;
}

.shift-review-history-status {
  font-weight: 700;
  color: #2b3340;
}

.shift-review-history-item.current .shift-review-history-status {
  color: #2f72dc;
}

.shift-review-history-item.previous {
  opacity: 0.85;
}

.shift-review-history-item.previous .shift-review-history-status {
  font-weight: 600;
  color: #6b7380;
}

.shift-review-history-stage {
  font-weight: 500;
  color: #4b5565;
}

.shift-review-history-actor,
.shift-review-history-time {
  color: #6b7380;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  max-width: 100%;
}

@media (max-width: 991.98px) {
  .shift-review-context-body,
  .shift-review-page .shift-planner-context-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .shift-review-context-fields,
  .shift-review-page .shift-planner-context-fields {
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
  }

  .shift-review-table-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .shift-review-footer-right {
    margin-left: 0;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

@container review-records (max-width: 54rem) {
  .shift-review-filters-row {
    flex-wrap: wrap;
    align-items: flex-end;
    row-gap: 0.45rem;
  }

  .shift-review-filter-fields,
  .shift-review-filter-secondary {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.55rem;
    min-width: 0;
  }

  .shift-review-filter-search {
    flex: 1 1 10.25rem;
    width: auto;
    max-width: none;
  }

  .shift-review-filter-department,
  .shift-review-filter-shift,
  .shift-review-filter-status,
  .shift-review-filter-exceptions {
    width: auto;
    max-width: 100%;
  }

  .shift-review-filter-secondary {
    margin-left: 0;
  }

  .shift-review-filter-view {
    margin-left: auto;
  }
}

@media (max-width: 767.98px) {
  .shift-review-workflow {
    flex-wrap: wrap;
  }

  .shift-review-approval-block,
  .shift-review-action-block {
    flex: 1 1 100%;
    max-width: none;
    min-width: 0;
    border-left: 0;
  }

  .shift-review-action-block {
    padding-top: 0;
  }

  .shift-review-action-controls {
    flex-wrap: wrap;
  }

  .shift-review-page .shift-review-filters-row {
    flex-wrap: wrap;
    align-items: flex-end;
    row-gap: 0.45rem;
  }

  .shift-review-page .shift-review-filter-fields,
  .shift-review-page .shift-review-filter-secondary {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.55rem;
    min-width: 0;
  }

  .shift-review-page .shift-review-filter-search {
    flex: 1 1 10.25rem;
    width: auto;
    max-width: none;
  }

  .shift-review-metrics-row {
    flex-wrap: wrap;
  }

  .shift-review-metric {
    min-width: calc(50% - 0.35rem);
    flex: 1 1 calc(50% - 0.35rem);
  }

}

@container planner-records (max-width: 58rem) {
  .shift-planner-bulk-hint {
    flex: 1 1 12rem;
    max-width: none;
    min-width: 0;
  }
}

@container planner-records (max-width: 48rem) {
  .shift-planner-filters-row {
    flex-wrap: wrap;
    align-items: flex-end;
    row-gap: 0.45rem;
  }

  .shift-planner-filter-fields,
  .shift-planner-filter-secondary {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.55rem;
    min-width: 0;
  }

  .shift-planner-filter-search {
    flex: 1 1 10.25rem;
    width: auto;
    max-width: none;
  }

  .shift-planner-filter-department,
  .shift-planner-filter-shift,
  .shift-planner-filter-status {
    width: auto;
    max-width: 100%;
  }

  .shift-planner-filter-view {
    margin-left: auto;
  }

  .shift-planner-bulk-hint {
    flex: 1 1 100%;
    width: auto;
    max-width: none;
    min-width: 0;
    margin-left: 0;
  }
}

@media (max-width: 767.98px) {
  .shift-planner-page .shift-planner-filters-row {
    flex-wrap: wrap;
    align-items: flex-end;
    row-gap: 0.45rem;
  }

  .shift-planner-page .shift-planner-filter-fields,
  .shift-planner-page .shift-planner-filter-secondary {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.55rem;
    min-width: 0;
  }

  .shift-planner-page .shift-planner-filter-search {
    flex: 1 1 10.25rem;
    width: auto;
    max-width: none;
  }

  .shift-planner-page .shift-planner-filter-view {
    margin-left: auto;
  }

  .shift-planner-page .shift-planner-bulk-hint {
    flex: 1 1 100%;
    width: auto;
    max-width: none;
    min-width: 0;
    margin-left: 0;
  }
}

@media (max-width: 1199.98px) {
  .shift-planner-context-body {
    gap: 0.85rem;
  }

  .shift-planner-context-fields {
    gap: 0.85rem 1rem;
  }

  .shift-planner-context-week-block {
    min-width: 9.5rem;
  }

  .shift-planner-autogen-text {
    font-size: 0.74rem;
  }
}

@media (max-width: 991.98px) {
  .shift-planning-overview-cards .col-lg-4 {
    margin-bottom: 0;
  }

  .shift-planning-table-footer {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .shift-planning-page-size-wrap {
    justify-self: center;
  }

  .shift-planner-context-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .shift-planner-context-fields {
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    width: 100%;
  }

  .shift-planner-context-autogen {
    margin-left: 0;
    align-self: flex-end;
  }

  .shift-planner-persistence .card-body {
    flex-direction: column;
    align-items: stretch;
  }

  .shift-planner-actions {
    justify-content: flex-end;
  }

  .shift-planner-legend {
    max-width: none;
  }
}

@media (max-width: 575.98px) {
  .shift-planner-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .shift-planner-actions .btn {
    width: 100%;
  }
}

/* ---------- Worker Promotion Setup ---------- */
.wps-page {
  max-width: 100%;
}

/* Sticky under #topbar, same docking pattern as Edit Employee section nav. */
.wps-tabs-sticky {
  position: sticky;
  top: var(--hrms-topbar-height, 3.75rem);
  z-index: 1010;
  margin: 0 0 1rem;
  background: var(--bg);
}

.wps-tabs-sticky.is-stuck {
  box-shadow: 0 2px 6px rgba(24, 42, 73, 0.08);
}

.wps-tabs {
  display: flex;
  align-items: stretch;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #e1e6ed;
}

.wps-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1rem 0.7rem;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--navy);
  font-size: 0.875rem;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
}

.wps-tab i {
  font-size: 1rem;
  color: inherit;
}

.wps-tab:hover,
.wps-tab:focus-visible {
  color: var(--accent);
  text-decoration: none;
}

.wps-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 650;
}

.wps-progress-card {
  margin-bottom: 1rem;
  padding: 0.7rem 0.85rem 0.55rem;
  background: #fff;
  border: 1px solid #e1e6ed;
  border-radius: 0.55rem;
  box-shadow: 0 1px 3px rgba(31, 56, 100, 0.05);
}

.wps-progress-stepper {
  display: flex;
  align-items: flex-start;
  gap: 0;
  width: 100%;
}

.wps-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  gap: 0.3rem;
}

.wps-progress-circle {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  border: 2px solid #ced4da;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 650;
  background: #fff;
  color: #6c757d;
}

.wps-progress-step.is-done .wps-progress-circle {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.wps-progress-step.is-current .wps-progress-circle {
  background: #fff;
  border-color: var(--accent);
  color: var(--accent);
}

.wps-progress-label {
  color: #6c757d;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.25;
}

.wps-progress-step.is-current .wps-progress-label {
  color: var(--accent);
  font-weight: 650;
}

.wps-progress-step.is-done .wps-progress-label {
  color: var(--navy);
}

.wps-progress-connector {
  flex: 0.55 0.55 1.5rem;
  height: 2px;
  /* Vertically center on the 1.7rem step circle (not the full step+label height). */
  margin: calc((1.7rem - 2px) / 2) 0.2rem 0;
  background: #dee2e6;
  align-self: flex-start;
}

.wps-progress-connector.is-done {
  background: var(--accent);
}

.wps-select-card {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1.1rem 1.15rem 1.15rem;
  background: #fff;
  border: 1px solid #e1e6ed;
  border-radius: 0.55rem;
  box-shadow: 0 1px 3px rgba(31, 56, 100, 0.05);
}

.wps-select-main {
  flex: 1 1 auto;
  min-width: 0;
}

.wps-select-title {
  margin: 0;
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

.wps-select-subtitle {
  margin: 0.25rem 0 0.85rem;
  color: #6b7480;
  font-size: 0.84rem;
  line-height: 1.4;
}

.wps-select-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.wps-dept-select {
  width: min(100%, 18rem);
  min-height: 2.25rem;
  border-color: #d0d7e2;
  font-size: 0.875rem;
}

.wps-clear-btn {
  min-height: 2.25rem;
  padding-inline: 0.9rem;
  font-size: 0.82rem;
  font-weight: 550;
}

.wps-select-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  flex: 0 1 16rem;
  max-width: 18rem;
  padding: 0.7rem 0.8rem;
  background: #eef5fc;
  border: 1px solid #d3e4f5;
  border-radius: 0.45rem;
  color: #2a4f7a;
  font-size: 0.78rem;
  line-height: 1.4;
}

.wps-select-callout i {
  color: var(--accent);
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.wps-configuring-card {
  margin-bottom: 1rem;
  padding: 1rem 1.15rem 0.95rem;
  background: #fff;
  border: 1px solid #e1e6ed;
  border-radius: 0.55rem;
  box-shadow: 0 1px 3px rgba(31, 56, 100, 0.05);
}

.wps-configuring-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.95rem;
}

.wps-configuring-kicker {
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wps-configuring-name {
  margin: 0.15rem 0 0;
  color: var(--navy);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
}

.wps-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 650;
  white-space: nowrap;
}

.wps-status-badge.is-incomplete {
  background: #fff4e5;
  color: #b35c00;
  border: 1px solid #f0d2a8;
}

.wps-status-badge.is-complete {
  background: #e8f6ec;
  color: #1e7e34;
  border: 1px solid #c6e6cd;
}

.wps-configuring-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 0.85rem;
}

.wps-kpi {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.15rem 0.85rem;
  border-right: 1px solid #e8ecf2;
  min-width: 0;
}

.wps-kpi:first-child {
  padding-left: 0;
}

.wps-kpi:last-child {
  border-right: 0;
  padding-right: 0;
}

.wps-kpi-icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.95rem;
}

.wps-kpi-icon.tone-blue {
  background: #e8f0fb;
  color: var(--accent);
}

.wps-kpi-icon.tone-green {
  background: #e8f6ec;
  color: #1e7e34;
}

.wps-kpi-icon.tone-orange {
  background: #fff4e5;
  color: #c46a00;
}

.wps-kpi-icon.tone-red {
  background: #fdecee;
  color: #b02a37;
}

.wps-kpi-label {
  color: #6b7480;
  font-size: 0.72rem;
  font-weight: 550;
  line-height: 1.2;
}

.wps-kpi-value {
  margin-top: 0.12rem;
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
}

.wps-kpi-hint {
  margin-top: 0.12rem;
  color: #8a93a0;
  font-size: 0.7rem;
  line-height: 1.3;
}

.wps-configuring-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.85rem;
  border-top: 1px solid #e8ecf2;
}

.wps-configuring-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  line-height: 1.35;
}

.wps-configuring-summary.is-incomplete {
  color: #b35c00;
}

.wps-configuring-summary.is-complete {
  color: #1e7e34;
}

.wps-configuring-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.wps-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 550;
}

.wps-tip-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-bottom: 0.5rem;
  padding: 0.75rem 0.9rem;
  background: #eef5fc;
  border: 1px solid #d3e4f5;
  border-radius: 0.45rem;
  color: #2a4f7a;
  font-size: 0.8rem;
  line-height: 1.45;
}

.wps-tip-banner > i {
  color: var(--accent);
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.wps-tip-list {
  margin: 0;
  padding-left: 1.05rem;
}

.wps-tip-list li + li {
  margin-top: 0.15rem;
}

/* ---- Worker Promotion Setup ? Tab 2: Promotion Ladder ---- */

.wps-global-ref {
  margin-bottom: 1rem;
  padding: 0.7rem 0.95rem 0.75rem;
  background: #fff;
  border: 1px solid #e1e6ed;
  border-radius: 0.55rem;
  box-shadow: 0 1px 3px rgba(31, 56, 100, 0.05);
}

.wps-global-ref-head {
  margin-bottom: 0.45rem;
}

.wps-global-ref-title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 700;
}

.wps-global-ref-title i {
  color: #7a8798;
  font-size: 0.78rem;
}

.wps-global-ref-body {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.wps-global-ref-track {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 0.15rem;
}

.wps-global-ref-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  padding: 0.28rem 0.55rem 0.28rem 0.3rem;
  background: #f4f7fb;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  white-space: nowrap;
}

.wps-global-ref-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.wps-global-ref-name {
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 600;
}

.wps-global-ref-arrow {
  flex: 0 0 auto;
  color: #9aa6b5;
  font-size: 0.85rem;
  line-height: 1;
}

.wps-global-ref-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  flex: 0 1 17rem;
  max-width: 18.5rem;
  padding: 0.55rem 0.7rem;
  background: #eef5fc;
  border: 1px solid #d3e4f5;
  border-radius: 0.45rem;
  color: #2a4f7a;
  font-size: 0.74rem;
  line-height: 1.35;
}

.wps-global-ref-callout i {
  color: var(--accent);
  margin-top: 0.08rem;
  flex-shrink: 0;
}

.wps-global-ref-empty {
  margin: 0;
}

.wps-ladder-config {
  margin-bottom: 0.5rem;
  border: 1px solid #e1e6ed;
  border-radius: 0.55rem;
  box-shadow: 0 1px 3px rgba(31, 56, 100, 0.05);
}

.wps-ladder-config > .card-body {
  padding: 1rem 1.1rem 1.05rem;
}

.wps-ladder-config-title {
  margin: 0 0 0.75rem;
  color: var(--navy);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
}

.wps-mode-row {
  display: flex;
  align-items: stretch;
  gap: 0.85rem;
  margin-bottom: 0.95rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid #edf1f6;
}

.wps-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  flex: 1 1 auto;
  min-width: 0;
}

.wps-mode-option {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0.55rem 0.7rem;
  background: #f8fafc;
  border: 1.5px solid #d7dee8;
  border-radius: 0.45rem;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

.wps-mode-option:hover {
  border-color: #b7c6db;
}

.wps-mode-option.is-selected {
  background: #eef5fc;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(46, 83, 149, 0.12);
}

.wps-mode-option .form-check-input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.wps-mode-option-body {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.wps-mode-option-title {
  color: var(--navy);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.25;
}

.wps-mode-option-text {
  color: #6b7480;
  font-size: 0.72rem;
  line-height: 1.35;
}

.wps-mode-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
  flex: 0 1 17.5rem;
  max-width: 19rem;
}

.wps-mode-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.55rem 0.65rem;
  background: #eef5fc;
  border: 1px solid #d3e4f5;
  border-radius: 0.45rem;
  color: #2a4f7a;
  font-size: 0.72rem;
  line-height: 1.35;
}

.wps-mode-callout i {
  color: var(--accent);
  margin-top: 0.08rem;
  flex-shrink: 0;
}

.wps-mode-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}

.wps-mode-actions .btn {
  font-size: 0.78rem;
  font-weight: 550;
}

.wps-ladder-workspace {
  display: flex;
  align-items: stretch;
  gap: 0.65rem;
  min-height: 0;
}

.wps-ladder-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.65rem 0.7rem 0.7rem;
}

.wps-ladder-pool-col {
  flex: 0 1 36%;
  max-width: 24rem;
}

.wps-ladder-active-col {
  flex: 1 1 58%;
}

.wps-ladder-col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  flex-shrink: 0;
}

.wps-ladder-col-title {
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
}

.wps-ladder-col-hint {
  color: #8a94a3;
  font-size: 0.68rem;
  font-weight: 500;
  white-space: nowrap;
}

.wps-ladder-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.wps-ladder-scroll {
  flex: 1 1 auto;
  height: calc(100vh - var(--hrms-topbar-height) - 26rem);
  min-height: 12rem;
  max-height: 32rem;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.15rem;
}

.wps-ladder-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.wps-ladder-transfer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #d7dee8;
  color: var(--accent);
  box-shadow: 0 1px 2px rgba(31, 56, 100, 0.06);
}

.wps-ladder-transfer i {
  font-size: 0.9rem;
}

.wps-pool-card,
.wps-ladder-card {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.4rem;
  padding: 0.42rem 0.5rem;
  background: #fff;
  border: 1px solid #e1e6ed;
  border-radius: 0.4rem;
  cursor: grab;
  user-select: none;
}

.wps-ladder-list .wps-ladder-card {
  margin-bottom: 0;
}

.wps-pool-card:last-child {
  margin-bottom: 0;
}

.wps-pool-card.dragging,
.wps-ladder-card.dragging {
  opacity: 0.55;
  cursor: grabbing;
  box-shadow: 0 4px 12px rgba(31, 56, 100, 0.12);
}

.wps-pool-name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--navy);
  font-size: 0.82rem;
  line-height: 1.25;
}

.wps-pool-add {
  flex: 0 0 auto;
  min-width: 1.7rem;
  padding: 0.05rem 0.35rem;
  font-weight: 700;
  line-height: 1.2;
}

.wps-ladder-grip {
  color: #9aa6b5;
  font-size: 0.95rem;
  line-height: 1;
  cursor: grab;
}

.wps-ladder-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.3rem;
  border-radius: 0.3rem;
  background: var(--accent) !important;
  color: #fff !important;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.wps-ladder-name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--navy);
  font-size: 0.84rem;
  line-height: 1.25;
}

.wps-ladder-name:hover {
  color: var(--accent);
}

.wps-ladder-dir {
  flex: 0 0 auto;
  font-size: 0.85rem;
  line-height: 1;
}

.wps-ladder-card:last-child .wps-ladder-dir {
  visibility: hidden;
}

.wps-ladder-remove {
  flex: 0 0 auto;
  color: #c0392b;
  border: 0;
  background: transparent;
  padding: 0.1rem 0.3rem;
  line-height: 1;
}

.wps-ladder-remove:hover,
.wps-ladder-remove:focus-visible {
  color: #922b21;
  background: #fdecea;
}

.wps-ladder-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid #e8ecf2;
}

.wps-ladder-messages {
  flex: 1 1 auto;
  min-width: 0;
}

.wps-ladder-actions {
  flex: 0 0 auto;
}

.wps-ladder-status {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0.55rem;
  padding: 0.45rem 0.6rem;
  border-radius: 0.4rem;
  font-size: 0.74rem;
  line-height: 1.35;
}

.wps-ladder-pool-col > .wps-ladder-status {
  margin-top: 0.55rem;
}

.wps-ladder-messages .wps-ladder-status {
  margin-top: 0;
}

.wps-ladder-status.is-success {
  background: #e8f7ef;
  border: 1px solid #c6e9d4;
  color: #1e6b3f;
}

.wps-ladder-status.is-success i {
  color: #2a9d5c;
  margin-top: 0.08rem;
  flex-shrink: 0;
}

.wps-ladder-status.is-warning {
  background: #fff6e8;
  border: 1px solid #f0d9a8;
  color: #8a5a12;
}

.wps-ladder-status.is-warning i {
  color: #d39b2a;
  margin-top: 0.08rem;
  flex-shrink: 0;
}

.wps-ladder-help {
  border-radius: 0.45rem;
}

/* ---- Worker Promotion Setup ? Tab 3: Eligibility Rules ---- */

.wps-dept-ref {
  margin-bottom: 1rem;
}

.wps-dept-ref .wps-global-ref-num {
  background: #2a9d5c;
}

.wps-dept-ref-callout {
  background: #e8f7ef;
  border-color: #c6e9d4;
  color: #1e6b3f;
}

.wps-dept-ref-callout i {
  color: #2a9d5c;
}

.wps-rules-workspace {
  display: flex;
  align-items: stretch;
  gap: 0.85rem;
  min-height: 0;
}

.wps-rules-master {
  flex: 1 1 62%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e1e6ed;
  border-radius: 0.55rem;
  box-shadow: 0 1px 3px rgba(31, 56, 100, 0.05);
  padding: 0.9rem 0.95rem 0.85rem;
}

.wps-rules-detail {
  flex: 0 1 36%;
  max-width: 22.5rem;
  min-width: 0;
}

.wps-rules-master-head {
  margin-bottom: 0.7rem;
}

.wps-rules-title {
  margin: 0;
  color: var(--navy);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
}

.wps-rules-subtitle {
  margin: 0.2rem 0 0;
  color: #6b7480;
  font-size: 0.8rem;
  line-height: 1.4;
}

.wps-rules-list-head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(7.5rem, 0.85fr) minmax(0, 1.1fr) 1.5rem;
  gap: 0.5rem;
  padding: 0.35rem 0.65rem;
  color: #7a8798;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-bottom: 1px solid #edf1f6;
}

.wps-rules-list {
  flex: 1 1 auto;
  height: calc(100vh - var(--hrms-topbar-height) - 28rem);
  min-height: 14rem;
  max-height: 34rem;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.35rem 0.15rem 0.35rem 0;
}

.wps-rules-empty {
  padding: 0.85rem 0.65rem;
}

.wps-rules-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(7.5rem, 0.85fr) minmax(0, 1.1fr) 1.5rem;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.35rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.45rem;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

.wps-rules-row:hover,
.wps-rules-row:focus-visible {
  border-color: #b7c6db;
  color: inherit;
  text-decoration: none;
}

.wps-rules-row.is-selected {
  border-color: var(--accent);
  background: #eef5fc;
  box-shadow: inset 3px 0 0 var(--accent);
}

.wps-rules-path-from,
.wps-rules-path-to {
  color: var(--navy);
  font-size: 0.84rem;
  font-weight: 650;
}

.wps-rules-path-arrow {
  margin: 0 0.3rem;
  color: #8a94a3;
  font-weight: 500;
}

.wps-rules-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
}

.wps-rules-status.is-configured {
  color: #1e6b3f;
}

.wps-rules-status.is-configured i {
  color: #2a9d5c;
}

.wps-rules-status.is-pending {
  color: #8a5a12;
}

.wps-rules-status.is-pending i {
  color: #d39b2a;
}

.wps-rules-values {
  color: #5c6775;
  font-size: 0.76rem;
  line-height: 1.3;
}

.wps-rules-values.is-empty {
  color: #9aa6b5;
}

.wps-rules-col-affordance {
  color: #9aa6b5;
  text-align: right;
  font-size: 0.85rem;
}

.wps-rules-row.is-selected .wps-rules-col-affordance {
  color: var(--accent);
}

.wps-rules-master-note {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0.65rem;
  padding: 0.55rem 0.65rem;
  background: #eef5fc;
  border: 1px solid #d3e4f5;
  border-radius: 0.45rem;
  color: #2a4f7a;
  font-size: 0.74rem;
  line-height: 1.35;
}

.wps-rules-master-note i {
  color: var(--accent);
  margin-top: 0.08rem;
  flex-shrink: 0;
}

.wps-rules-detail-card,
.wps-rules-detail-empty {
  height: 100%;
  background: #fff;
  border: 1px solid #e1e6ed;
  border-radius: 0.55rem;
  box-shadow: 0 1px 3px rgba(31, 56, 100, 0.05);
  padding: 0.9rem 0.95rem 0.95rem;
}

.wps-rules-detail-empty-title,
.wps-rules-detail-title {
  margin: 0;
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
}

.wps-rules-detail-empty-text {
  margin: 0.45rem 0 0;
  color: #6b7480;
  font-size: 0.8rem;
  line-height: 1.4;
}

.wps-rules-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.55rem;
  margin-bottom: 0.7rem;
}

.wps-rules-detail-meta {
  margin-top: 0.15rem;
  color: #7a8798;
  font-size: 0.72rem;
}

.wps-rules-selected-path {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem;
  margin-bottom: 0.85rem;
  padding: 0.4rem 0.65rem;
  background: #eef5fc;
  border: 1px solid #d3e4f5;
  border-radius: 0.4rem;
}

.wps-rules-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.wps-rules-field-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.3rem;
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 650;
}

.wps-rules-field-label i {
  color: #8a94a3;
  font-size: 0.72rem;
}

.wps-rules-field-control {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.wps-rules-field-control .form-control {
  max-width: 7.5rem;
}

.wps-rules-field-unit {
  color: #6b7480;
  font-size: 0.76rem;
}

.wps-rules-field-hint {
  margin-top: 0.25rem;
  color: #7a8798;
  font-size: 0.7rem;
  line-height: 1.35;
}

.wps-rules-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
  margin-top: 0.35rem;
  padding-top: 0.7rem;
  border-top: 1px solid #edf1f6;
}

@media (max-width: 991.98px) {
  .wps-select-card {
    flex-direction: column;
  }

  .wps-select-callout {
    max-width: none;
    flex: 1 1 auto;
  }

  .wps-configuring-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 0;
  }

  .wps-kpi {
    border-right: 0;
    padding: 0.35rem 0.25rem;
  }

  .wps-kpi:nth-child(odd) {
    border-right: 1px solid #e8ecf2;
    padding-right: 0.75rem;
  }

  .wps-kpi:nth-child(-n+2) {
    border-bottom: 1px solid #e8ecf2;
    padding-bottom: 0.75rem;
  }

  .wps-global-ref-body,
  .wps-mode-row,
  .wps-ladder-workspace,
  .wps-rules-workspace {
    flex-direction: column;
  }

  .wps-global-ref-callout,
  .wps-mode-side,
  .wps-ladder-pool-col,
  .wps-rules-detail {
    max-width: none;
    flex: 1 1 auto;
  }

  .wps-ladder-transfer {
    transform: rotate(90deg);
    align-self: center;
  }

  .wps-ladder-scroll,
  .wps-rules-list {
    max-height: min(22rem, 50vh);
  }

  .wps-ladder-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .wps-ladder-actions {
    align-self: flex-end;
  }

  .wps-rules-list-head,
  .wps-rules-row {
    grid-template-columns: minmax(0, 1.2fr) minmax(6.5rem, 0.9fr) minmax(0, 1fr) 1.25rem;
  }
}

@media (max-width: 575.98px) {
  .wps-tabs {
    overflow-x: auto;
  }

  .wps-progress-label {
    font-size: 0.64rem;
  }

  .wps-configuring-kpis {
    grid-template-columns: 1fr;
  }

  .wps-kpi,
  .wps-kpi:nth-child(odd),
  .wps-kpi:nth-child(-n+2) {
    border: 0;
    padding: 0.45rem 0;
    border-bottom: 1px solid #e8ecf2;
  }

  .wps-kpi:last-child {
    border-bottom: 0;
  }

  .wps-dept-select {
    width: 100%;
  }

  .wps-mode-options {
    grid-template-columns: 1fr;
  }

  .wps-mode-actions {
    justify-content: stretch;
  }

  .wps-mode-actions .btn {
    flex: 1 1 auto;
  }
}

/* ---- Worker Promotion Ladder ---- */

.wpl-page {
  max-width: 100%;
  overflow-x: hidden;
}

.wpl-intro {
  margin-bottom: 1rem;
}

.wpl-intro-title {
  margin: 0;
  color: var(--navy);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
}

.wpl-intro-text {
  margin: 0.35rem 0 0;
  color: #6b7480;
  font-size: 0.84rem;
  line-height: 1.45;
  max-width: 54rem;
}

.wpl-hierarchy-card {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid #e1e6ed;
  border-radius: 0.55rem;
  box-shadow: 0 1px 3px rgba(31, 56, 100, 0.05);
  min-width: 0;
  overflow: hidden;
}

.wpl-hierarchy-main {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex: 0 1 18rem;
  min-width: 0;
}

.wpl-hierarchy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: #eef5fc;
  color: var(--accent);
  flex-shrink: 0;
  font-size: 1.1rem;
}

.wpl-hierarchy-title {
  margin: 0;
  color: var(--navy);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
}

.wpl-hierarchy-desc {
  margin: 0.25rem 0 0;
  color: #6b7480;
  font-size: 0.76rem;
  line-height: 1.4;
}

.wpl-hierarchy-side {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.wpl-hierarchy-side-label {
  margin-bottom: 0.4rem;
  color: #7a8798;
  font-size: 0.72rem;
  font-weight: 650;
}

.wpl-hierarchy-track {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  padding-bottom: 0.15rem;
}

.wpl-hierarchy-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  padding: 0.28rem 0.55rem 0.28rem 0.3rem;
  background: #f4f7fb;
  border: 1px solid #e2e8f0;
  border-radius: 0.4rem;
  white-space: nowrap;
}

.wpl-hierarchy-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 0.3rem;
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.wpl-hierarchy-name {
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 600;
}

.wpl-hierarchy-arrow {
  flex: 0 0 auto;
  color: #9aa6b5;
  font-size: 0.85rem;
}

.wpl-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.7rem 0.85rem;
  background: #fff8e8;
  border: 1px solid #f0d9a8;
  border-radius: 0.5rem;
  color: #8a5a12;
  font-size: 0.8rem;
  line-height: 1.4;
}

.wpl-warning i {
  color: #d39b2a;
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.wpl-workspace-card {
  margin-bottom: 1rem;
  padding: 1rem 1.05rem 1.05rem;
  background: #fff;
  border: 1px solid #e1e6ed;
  border-radius: 0.55rem;
  box-shadow: 0 1px 3px rgba(31, 56, 100, 0.05);
}

.wpl-workspace {
  display: flex;
  align-items: stretch;
  gap: 0.65rem;
  min-height: 0;
}

.wpl-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.65rem 0.7rem 0.7rem;
}

.wpl-pool-col {
  flex: 0 1 36%;
  max-width: 24rem;
}

.wpl-ladder-col {
  flex: 1 1 58%;
  overflow: hidden;
}

.wpl-col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  flex-shrink: 0;
}

.wpl-col-title {
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
}

.wpl-col-subhint {
  margin-left: 0.35rem;
  color: #8a94a3;
  font-size: 0.7rem;
  font-weight: 500;
}

.wpl-col-hint {
  color: #8a94a3;
  font-size: 0.68rem;
  font-weight: 500;
  white-space: nowrap;
}

.wpl-ladder-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.wpl-scroll {
  flex: 1 1 auto;
  height: calc(100vh - var(--hrms-topbar-height) - 24rem);
  min-height: 12rem;
  max-height: 30rem;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  padding-right: 0.15rem;
}

.wpl-ladder-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.wpl-transfer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #d7dee8;
  color: var(--accent);
  box-shadow: 0 1px 2px rgba(31, 56, 100, 0.06);
}

.wpl-transfer i {
  font-size: 0.9rem;
}

.wpl-pool-card,
.wpl-ladder-card {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.4rem;
  padding: 0.42rem 0.5rem;
  background: #fff;
  border: 1px solid #e1e6ed;
  border-radius: 0.4rem;
}

.wpl-ladder-list .wpl-ladder-card {
  margin-bottom: 0;
}

.wpl-pool-card:last-child {
  margin-bottom: 0;
}

.wpl-pool-card.dragging,
.wpl-ladder-card.dragging {
  opacity: 0.55;
  box-shadow: 0 4px 12px rgba(31, 56, 100, 0.12);
}

.wpl-pool-name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--navy);
  font-size: 0.82rem;
  line-height: 1.25;
}

.wpl-pool-add {
  flex: 0 0 auto;
  min-width: 1.7rem;
  padding: 0.05rem 0.35rem;
  font-weight: 700;
  line-height: 1.2;
}

.wpl-pool-footer {
  margin-top: 0.55rem;
  color: #7a8798;
  font-size: 0.72rem;
  line-height: 1.35;
}

.wpl-ladder-grip {
  color: #9aa6b5;
  font-size: 0.95rem;
  line-height: 1;
  cursor: grab;
}

.wpl-ladder-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.3rem;
  border-radius: 0.3rem;
  background: var(--accent) !important;
  color: #fff !important;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.wpl-ladder-name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--navy);
  font-size: 0.84rem;
  line-height: 1.25;
}

a.wpl-ladder-name:hover,
a.wpl-ladder-name:focus-visible {
  color: var(--accent);
}

.wpl-ladder-move {
  flex: 0 0 auto;
  color: #6b7480;
  border: 1px solid #d7dee8;
  background: #fff;
  padding: 0.05rem 0.28rem;
  line-height: 1;
}

.wpl-ladder-move:hover,
.wpl-ladder-move:focus-visible {
  color: var(--accent);
  border-color: #b7c6db;
  background: #eef5fc;
}

.wpl-ladder-remove {
  flex: 0 0 auto;
  min-width: 1.7rem;
  padding: 0.05rem 0.35rem;
  font-weight: 700;
  line-height: 1.2;
}

.wpl-ladder-actions {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid #e8ecf2;
}

.wpl-setup-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  margin-bottom: 0.5rem;
  padding: 0.75rem 0.9rem;
  background: #eef5fc;
  border: 1px solid #d3e4f5;
  border-radius: 0.5rem;
}

.wpl-setup-strip-body {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}

.wpl-setup-strip-body > i {
  color: var(--accent);
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.wpl-setup-strip-title {
  color: var(--navy);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.3;
}

.wpl-setup-strip-text {
  margin-top: 0.15rem;
  color: #2a4f7a;
  font-size: 0.76rem;
  line-height: 1.4;
}

.wpl-setup-strip-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 550;
}

@media (max-width: 991.98px) {
  .wpl-hierarchy-card,
  .wpl-workspace,
  .wpl-setup-strip {
    flex-direction: column;
  }

  .wpl-hierarchy-main,
  .wpl-pool-col {
    max-width: none;
    flex: 1 1 auto;
  }

  .wpl-transfer {
    transform: rotate(90deg);
    align-self: center;
  }

  .wpl-scroll {
    max-height: min(22rem, 50vh);
  }

  .wpl-setup-strip-btn {
    align-self: flex-start;
  }
}

/* ------------------------------------------------------------------ */
/* Payroll Generation ? Records screen (frozen preview)                */
/* ------------------------------------------------------------------ */

.payroll-period-filter-card--inline-summary .payroll-period-filter-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
  width: 100%;
}

.payroll-period-filter-card--inline-summary .pay-period-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  column-gap: 0.85rem;
  row-gap: 0.55rem;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.payroll-period-filter-card--inline-summary .pay-period-input {
  min-width: 0;
  width: 100%;
}

.payroll-period-filter-card--inline-summary .pay-period-input .form-label {
  margin-bottom: 0.25rem;
}

.payroll-period-filter-card--inline-summary .pay-period-input .form-select {
  width: 100%;
  max-width: none;
  min-height: 1.95rem;
}

.payroll-period-filter-card--inline-summary .att-filter-submit-actions {
  display: flex;
  align-items: flex-end;
  padding-bottom: 0;
}

.payroll-period-filter-card--inline-summary .att-filter-submit-actions .btn {
  min-height: 1.95rem;
  padding-inline: 0.95rem;
  white-space: nowrap;
}

.pg-period-summary {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.55rem;
  flex: 0 0 16rem;
  width: 16rem;
  max-width: 16rem;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.45rem 0.75rem;
  border: 1px solid #d9e2ef;
  border-radius: 0.5rem;
  background: #f5f8fc;
  margin-left: auto;
}

.pg-period-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 0.4rem;
  background: var(--accent-light);
  color: var(--accent);
  flex: 0 0 auto;
  font-size: 0.9rem;
}

.pg-period-summary-body {
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.3;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pg-period-summary-label {
  font-size: 0.78rem;
  color: #495057;
}

.pg-period-summary-label strong {
  color: var(--navy);
  font-weight: 600;
}

.pg-period-summary-status {
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pg-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  margin-bottom: 0.85rem;
}

.pg-action-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.pg-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 500;
}

.pg-action-btn .bi {
  font-size: 0.9em;
  line-height: 1;
}

.pg-action-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.pg-action-status-label {
  font-size: 0.8rem;
  color: #6c757d;
}

.pg-run-status {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  border: 1px solid transparent;
}

.pg-run-status.is-finalized {
  background: #e7f6ed;
  color: #146c2e;
  border-color: #b7e0c5;
}

.pg-run-status.is-draft {
  background: #eef3fa;
  color: var(--navy);
  border-color: #c9d6ea;
}

.pg-run-status.is-neutral {
  background: #f1f3f5;
  color: #495057;
  border-color: #dee2e6;
}

.pg-records-card {
  overflow: hidden;
  border-color: #dde3ec;
  box-shadow: 0 1px 2px rgba(31, 56, 100, 0.04);
}

.pg-records-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 1rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid #e6ebf2;
  background: #fff;
}

.pg-records-heading {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
  min-width: 0;
}

.pg-records-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--navy);
  line-height: 1.25;
}

.pg-records-count {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: #eef1f6;
  color: #5b6777;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.pg-records-tools {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem 0.65rem;
  margin-left: auto;
}

.pg-records-search {
  position: relative;
  min-width: 12rem;
  max-width: 16rem;
  flex: 1 1 12rem;
}

.pg-records-search .bi-search {
  position: absolute;
  left: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  color: #8a94a6;
  font-size: 0.8rem;
  pointer-events: none;
}

.pg-records-search .form-control {
  padding-left: 1.7rem;
  border-color: #d5dae1;
  font-size: 0.8rem;
}

.pg-records-pagesize {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.pg-records-pagesize label {
  margin: 0;
  font-size: 0.75rem;
  color: #6c757d;
}

.pg-records-pagesize .form-select {
  width: 4.5rem;
  border-color: #d5dae1;
  font-size: 0.8rem;
}

.pg-records-pager {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.pg-records-range {
  font-size: 0.75rem;
  color: #6c757d;
  white-space: nowrap;
  margin-right: 0.15rem;
}

.pg-pager-btn {
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: #d5dae1;
  color: var(--navy);
}

/* Emp Master?style list scroll (overflow pane + sticky header).
   CSS is a conservative fallback; payroll-generation.js pins max-height to the
   true remaining viewport because Payroll chrome above the table varies. */
.pg-table-scroll {
  max-width: 100%;
  max-height: calc(100vh - var(--hrms-topbar-height, 3.75rem) - 18rem);
  overflow: auto;
  overscroll-behavior: contain;
  position: relative;
  z-index: 0;
  isolation: isolate;
  background: #fff;
}

@media (max-width: 767.98px) {
  .pg-table-scroll {
    max-height: calc(100vh - var(--hrms-topbar-height, 3.75rem) - 22rem);
  }
}

.pg-records-pager-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem;
  border-top: 1px solid #dee2e6;
  background: #fff;
}

.pg-records-table {
  --bs-table-bg: #fff;
  width: max-content;
  min-width: 100%;
  margin-bottom: 0;
  font-size: 0.8rem;
  border-collapse: separate;
  border-spacing: 0;
}

.pg-records-table > thead > * > * {
  --bs-table-bg: var(--navy);
  --bs-table-color: #fff;
  position: sticky;
  top: 0;
  z-index: 3;
  background-color: var(--navy);
  color: #fff;
  white-space: nowrap;
  vertical-align: middle;
  text-align: left;
  padding: 0.5rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-bottom-width: 0;
  box-shadow: inset 0 -1px 0 #163056;
}

.pg-records-table tbody td,
.pg-records-table tfoot td {
  white-space: nowrap;
  vertical-align: middle;
  text-align: left;
  padding: 0.4rem 0.5rem;
  border-color: #e8edf4;
  background-clip: padding-box;
}

.pg-records-table tbody tr:nth-child(even) {
  background: #fafbfd;
}

.pg-records-table tbody tr:hover > * {
  background-color: var(--accent-light);
}

.pg-records-table .pg-col-num {
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.pg-records-table .pg-col-text {
  text-align: left;
}

.pg-name-link {
  font-size: inherit;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.pg-name-link:hover,
.pg-name-link:focus {
  color: var(--navy);
  text-decoration: underline;
}

.pg-net-negative {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 0.35rem;
  background: #fdeced;
  color: #b42318;
  border: 1px solid #f3c6c6;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.pg-totals-row td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: #eef3fa !important;
  color: var(--navy);
  font-weight: 700;
  border-top: 1px solid #d5deeb;
  box-shadow: inset 0 1px 0 #d5deeb;
}

.pg-totals-label {
  text-align: left !important;
  white-space: nowrap;
}

/* Frozen Emp Code / Name (Employee Master offsets; scoped to payroll registers). */
.pg-records-table .emp-list-sticky-code,
.pg-records-table .emp-list-sticky-name {
  position: sticky;
  background: #fff;
  background-clip: padding-box;
}

.pg-records-table .emp-list-sticky-code {
  left: 0;
  z-index: 4;
  min-width: 5.5rem;
  width: 5.5rem;
}

.pg-records-table .emp-list-sticky-name {
  left: 5.5rem;
  z-index: 3;
  min-width: 13.5rem;
  width: 13.5rem;
  box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.16);
}

.pg-records-table > thead > * > .emp-list-sticky-code,
.pg-records-table > thead > * > .emp-list-sticky-name {
  --bs-table-bg: var(--navy);
  --bs-table-color: #fff;
  background-color: var(--navy);
  color: #fff;
}

.pg-records-table thead .emp-list-sticky-code {
  z-index: 7;
}

.pg-records-table thead .emp-list-sticky-name {
  z-index: 6;
}

.pg-records-table tbody tr:nth-child(even) > .emp-list-sticky-code,
.pg-records-table tbody tr:nth-child(even) > .emp-list-sticky-name {
  background-color: #fafbfd;
}

.pg-records-table tbody tr:hover > .emp-list-sticky-code,
.pg-records-table tbody tr:hover > .emp-list-sticky-name {
  background-color: var(--accent-light);
}

.pg-records-table tfoot .pg-totals-row td.pg-totals-sticky-lead {
  left: 0;
  z-index: 5;
  background: #eef3fa !important;
}

.pg-records-table tfoot .pg-totals-row td.pg-totals-sticky-wide {
  min-width: calc(5.5rem + 13.5rem);
  width: calc(5.5rem + 13.5rem);
  max-width: calc(5.5rem + 13.5rem);
  box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.12);
}

@media (max-width: 991.98px) {
  .payroll-period-filter-card--inline-summary .pay-period-controls {
    column-gap: 0.65rem;
  }

  .pg-period-summary {
    flex-basis: 14.5rem;
    width: 14.5rem;
    max-width: 14.5rem;
  }

  .pg-records-tools {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .pg-records-search {
    max-width: none;
  }

  .pg-action-status {
    margin-left: 0;
  }
}

@media (max-width: 767.98px) {
  .payroll-period-filter-card--inline-summary .payroll-period-filter-row {
    flex-wrap: wrap;
    align-items: stretch;
  }

  .payroll-period-filter-card--inline-summary .pay-period-controls {
    flex: 1 1 100%;
  }

  .pg-period-summary {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    margin-left: 0;
  }
}

@media (max-width: 575.98px) {
  .payroll-period-filter-card--inline-summary .pay-period-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .payroll-period-filter-card--inline-summary .att-filter-submit-actions {
    grid-column: 1 / -1;
  }

  .payroll-period-filter-card--inline-summary .att-filter-submit-actions .btn {
    width: 100%;
  }
}

/* ------------------------------------------------------------------ */
/* Payroll Generation ? Payslip detail drawer (frozen preview)         */
/* ------------------------------------------------------------------ */

.pg-payslip-drawer.offcanvas {
  --bs-offcanvas-width: min(34rem, 100vw);
  width: var(--bs-offcanvas-width);
  border-radius: 0;
  border-left: 1px solid #d7deea;
  box-shadow: -8px 0 28px rgba(20, 40, 74, 0.16);
}

.pg-payslip-drawer.offcanvas-end {
  border-left: 1px solid #d7deea;
}

.pg-payslip-drawer-header {
  flex: 0 0 auto;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #e6ebf2;
  background: #fff;
}

.pg-payslip-drawer-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
}

.pg-payslip-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem;
  background: #fff;
}

.pg-payslip-drawer-footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid #e6ebf2;
  background: #fff;
}

.pg-payslip-close {
  min-width: 5.5rem;
  font-weight: 500;
}

.pg-payslip {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.pg-payslip-identity {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.pg-payslip-avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: var(--accent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pg-payslip-identity-main {
  min-width: 0;
  flex: 1 1 auto;
}

.pg-payslip-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1c2333;
  line-height: 1.25;
  word-break: break-word;
}

.pg-payslip-code {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: #6c757d;
}

.pg-payslip-category {
  flex: 0 0 auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  background: #e8f0fb;
  color: var(--accent);
  border: 1px solid #c9daf2;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.3;
  white-space: nowrap;
}

.pg-payslip-rate {
  font-size: 0.84rem;
  color: #495057;
}

.pg-payslip-rate strong {
  color: var(--navy);
  font-weight: 700;
}

.pg-payslip-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.pg-payslip-metric {
  border-radius: 0.5rem;
  border: 1px solid transparent;
  padding: 0.55rem 0.6rem;
  min-height: 4.1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.35rem;
}

.pg-payslip-metric.is-gross {
  background: #eef4fc;
  border-color: #c9daf2;
}

.pg-payslip-metric.is-deduction {
  background: #fdeced;
  border-color: #f3c6c6;
}

.pg-payslip-metric.is-net {
  background: #e8f6ee;
  border-color: #b9dfc7;
}

.pg-payslip-metric-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: #5b6777;
  line-height: 1.2;
}

.pg-payslip-metric-value {
  font-size: 1.05rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.pg-payslip-metric.is-gross .pg-payslip-metric-value {
  color: var(--accent);
}

.pg-payslip-metric.is-deduction .pg-payslip-metric-value {
  color: #b42318;
}

.pg-payslip-metric.is-net .pg-payslip-metric-value {
  color: #146c2e;
}

.pg-payslip-section-title {
  margin: 0 0 0.45rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy);
}

.pg-payslip-breakdown {
  border: 1px solid #e1e7f0;
  border-radius: 0.45rem;
  overflow: hidden;
  background: #fff;
}

.pg-payslip-breakdown-head {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 5.5rem 6.25rem;
  gap: 0.35rem;
  align-items: center;
  padding: 0.4rem 0.65rem;
  background: #f5f7fb;
  border-bottom: 1px solid #e1e7f0;
  font-size: 0.7rem;
  font-weight: 650;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.pg-payslip-group-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 5.5rem 6.25rem;
  gap: 0.35rem;
  align-items: center;
  border: 0;
  border-top: 1px solid transparent;
  border-bottom: 1px solid #e1e7f0;
  padding: 0.45rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 650;
  text-align: left;
}

.pg-payslip-group-toggle.is-earning {
  background: #eaf7ef;
  color: #146c2e;
}

.pg-payslip-group-toggle.is-deduction {
  background: #fdeced;
  color: #b42318;
}

.pg-payslip-group-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  color: inherit;
}

.pg-payslip-group-desc {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.pg-payslip-group-name {
  flex: 0 0 5.75rem;
  white-space: nowrap;
}

.pg-payslip-group-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  font-weight: 650;
}

.pg-payslip-group-toggle .bi-chevron-down {
  transition: transform 0.15s ease;
  font-size: 0.85em;
}

.pg-payslip-group-toggle.is-collapsed .bi-chevron-down {
  transform: rotate(-90deg);
}

.pg-payslip-group-total {
  font-weight: 650;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.pg-payslip-line {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 5.5rem 6.25rem;
  gap: 0.35rem;
  align-items: center;
  padding: 0.48rem 0.65rem;
  border-bottom: 1px solid #eef1f6;
  font-size: 0.8rem;
}

.pg-payslip-line:last-child {
  border-bottom: 0;
}

.pg-payslip-line-name {
  font-weight: 600;
  color: #243044;
}

.pg-payslip-line-source {
  color: #6c757d;
  font-weight: 400;
  margin-left: 0.15rem;
}

.pg-col-idx {
  color: #8a94a6;
  font-variant-numeric: tabular-nums;
}

.pg-col-amt {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #243044;
}

.pg-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
}

.pg-type-badge.is-earning {
  background: #e8f6ee;
  color: #146c2e;
  border: 1px solid #b9dfc7;
}

.pg-type-badge.is-deduction {
  background: #fdeced;
  color: #b42318;
  border: 1px solid #f3c6c6;
}

.pg-payslip-empty {
  padding: 0.75rem 0.65rem;
  text-align: center;
  color: #8a94a6;
  font-size: 0.8rem;
  background: #fcfcfd;
}

.pg-payslip-net-strip {
  margin-top: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.8rem;
  border-radius: 0.45rem;
  background: #eef4fc;
  border: 1px solid #c9daf2;
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 600;
}

.pg-payslip-net-strip strong {
  font-size: 1rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.pg-payslip-adj-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.pg-payslip-adj-count {
  font-size: 0.78rem;
  color: #6c757d;
  font-weight: 550;
  white-space: nowrap;
}

.pg-payslip-adj-panel {
  border: 1px solid #e1e7f0;
  border-radius: 0.45rem;
  overflow: hidden;
  background: #fff;
}

.pg-payslip-adj-scroll {
  max-height: min(14rem, 32vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pg-payslip-adj-row .pg-col-line {
  min-width: 0;
}

.pg-payslip-summer {
  font-size: 0.65rem;
  vertical-align: middle;
  margin-left: 0.25rem;
}

.pg-payslip-remove {
  font-size: 0.75rem;
  vertical-align: baseline;
}

.pg-payslip-bonus-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem;
  padding: 0;
  margin-left: 0.25rem;
  border: 0;
  border-radius: 50%;
  background-color: var(--bs-danger);
  color: #fff;
  line-height: 1;
  vertical-align: middle;
}

.pg-payslip-bonus-remove .bi {
  font-size: 0.85rem;
  line-height: 1;
}

.pg-payslip-bonus-remove:hover,
.pg-payslip-bonus-remove:focus,
.pg-payslip-bonus-remove:active {
  background-color: #b02a37;
  color: #fff;
}

.pg-payslip-line-edit {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  width: 100%;
}

.pg-payslip-line-edit .form-control {
  width: 5.25rem;
  padding: 0.15rem 0.35rem;
  font-size: 0.78rem;
}

.pg-payslip-add-adj {
  margin-top: 0.65rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
}

.pg-payslip-add-adj-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

@media (max-width: 575.98px) {
  .pg-payslip-metrics {
    grid-template-columns: 1fr;
  }

  .pg-payslip-breakdown-head,
  .pg-payslip-line,
  .pg-payslip-group-toggle {
    grid-template-columns: 1.75rem minmax(0, 1fr) 4.75rem;
  }

  .pg-payslip-breakdown-head .pg-col-type,
  .pg-payslip-line .pg-col-type,
  .pg-payslip-group-toggle .pg-col-type {
    display: none;
  }

  .pg-payslip-group-name {
    flex-basis: 4.75rem;
  }

  .pg-payslip-add-adj-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991.98px) {
  .pg-payslip-drawer.offcanvas {
    --bs-offcanvas-width: min(100vw, 34rem);
  }
}

/* Salary Register ? compact KPI strip (subordinate to records grid) */
.salary-register-kpi-card {
  border: 1px solid #e4eaf2;
  box-shadow: none;
}

.salary-register-records-card {
  margin-top: 0;
}

.salary-register-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.salary-register-kpi {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.35rem 0.85rem;
  border-right: 1px solid #e8ecf2;
  min-width: 0;
}

.salary-register-kpi:first-child {
  padding-left: 0.15rem;
}

.salary-register-kpi:last-child {
  border-right: 0;
  padding-right: 0.15rem;
}

.salary-register-kpi-icon {
  width: 2.05rem;
  height: 2.05rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.95rem;
}

.salary-register-kpi-icon.tone-blue {
  background: #e8f0fb;
  color: var(--accent);
}

.salary-register-kpi-icon.tone-green {
  background: #e8f6ec;
  color: #1e7e34;
}

.salary-register-kpi-icon.tone-red {
  background: #fdecee;
  color: #b02a37;
}

.salary-register-kpi-icon.tone-purple {
  background: #f1ecfa;
  color: #6f42c1;
}

.salary-register-kpi-label {
  color: #6b7480;
  font-size: 0.72rem;
  font-weight: 550;
  line-height: 1.2;
}

.salary-register-kpi-value {
  margin-top: 0.12rem;
  color: var(--navy);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.salary-register-kpi-hint {
  margin-top: 0.1rem;
  color: #8a93a0;
  font-size: 0.68rem;
  line-height: 1.2;
}

.salary-register-details-card .card-header {
  background: #fff;
  border-bottom: 1px solid #e8ecf2;
  font-weight: 600;
}

.salary-register-details-meta {
  font-weight: 400;
}

.salary-register-table-scroll {
  max-width: 100%;
}

.salary-register-table th,
.salary-register-table td {
  white-space: nowrap;
  vertical-align: middle;
}

.salary-register-table thead th {
  font-size: 0.78rem;
  font-weight: 600;
  color: #445066;
  background: #f7f9fc;
}

.salary-register-table tbody td {
  font-size: 0.82rem;
}

@media (max-width: 991.98px) {
  .salary-register-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .salary-register-kpi:nth-child(2n) {
    border-right: 0;
  }

  .salary-register-kpi:nth-child(-n+2) {
    padding-bottom: 0.65rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid #e8ecf2;
  }
}

@media (max-width: 575.98px) {
  .salary-register-kpis {
    grid-template-columns: 1fr;
  }

  .salary-register-kpi,
  .salary-register-kpi:nth-child(2n),
  .salary-register-kpi:nth-child(-n+2) {
    border-right: 0;
    border-bottom: 1px solid #e8ecf2;
    padding: 0.55rem 0;
    margin-bottom: 0;
  }

  .salary-register-kpi:last-child {
    border-bottom: 0;
  }
}

/* ---------- Payroll Finalization Screen 1 summary ---------- */
.pf-summary-card .card-header {
  font-weight: 600;
  color: var(--navy);
}

/* Match Vehicle Provider Settlement's 3-column grid
   (Driver | Provider | Company Shortfall) without changing that table:
   Employees ? Driver, Total Net Pay ? Provider, Actions ? Shortfall. */
.pf-summary-table {
  table-layout: fixed;
  width: 100%;
  margin-bottom: 0;
}

.pf-summary-table > colgroup > .pf-summary-col-employees {
  width: 42%;
}

.pf-summary-table > colgroup > .pf-summary-col-net {
  width: 29%;
}

.pf-summary-table > colgroup > .pf-summary-col-actions {
  width: 29%;
}

.pf-summary-table > thead > tr > th {
  white-space: nowrap;
  vertical-align: middle;
}

.pf-summary-table > tbody > tr > td {
  vertical-align: middle;
  white-space: nowrap;
}

.pf-summary-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.pf-summary-actions form {
  display: inline;
  margin: 0;
}

/* ---------- Payroll Finalization disbursement screens (Bank / Cash) ---------- */
.pf-disbursement-page {
  margin-top: -0.1rem;
}

.pf-disbursement-breadcrumb {
  margin-bottom: 0.35rem;
}

.pf-disbursement-breadcrumb .breadcrumb {
  --bs-breadcrumb-divider: ">";
  --bs-breadcrumb-font-size: 0.75rem;
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.3;
}

.pf-disbursement-breadcrumb .breadcrumb-item,
.pf-disbursement-breadcrumb .breadcrumb-item a {
  color: #8a94a3;
  font-weight: 400;
}

.pf-disbursement-breadcrumb .breadcrumb-item a {
  text-decoration: none;
}

.pf-disbursement-breadcrumb .breadcrumb-item a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.pf-disbursement-breadcrumb .breadcrumb-item.active {
  color: #5f6875;
  font-weight: 400;
}

.pf-disbursement-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: #b0b7c3;
  font-weight: 400;
}

.pf-disbursement-page-header {
  margin-top: 0.1rem;
}

.pf-disbursement-page-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
}

.pf-disbursement-page-subtitle {
  margin-top: 0.25rem;
  font-size: 0.86rem;
  color: #6c757d;
  line-height: 1.4;
}

.pf-disbursement-summary {
  border: 1px solid #e4eaf2;
  box-shadow: none;
}

.pf-disbursement-summary-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  min-width: 0;
}

.pf-disbursement-summary-items {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.pf-disbursement-summary-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  flex: 0 0 auto;
  min-width: 7rem;
  max-width: 14rem;
  padding: 0.15rem 1.1rem;
  border-right: 1px solid #e8ecf2;
}

.pf-disbursement-summary-item:first-child {
  padding-left: 0.2rem;
}

.pf-disbursement-summary-item:last-child {
  border-right: 0;
  padding-right: 0.35rem;
}

.pf-disbursement-summary-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 550;
  color: #6b7480;
  line-height: 1.2;
  white-space: nowrap;
}

.pf-disbursement-summary-value {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pf-disbursement-summary-actions {
  margin-left: auto;
  flex: 0 0 auto;
  align-self: center;
}

.pf-disbursement-summary-actions .btn .bi {
  margin-right: 0.3rem;
}

/* Cash summary has no CSV action ? let KPI cells use the full strip width. */
.pf-disbursement-summary--cash .pf-disbursement-summary-item {
  max-width: 16rem;
}

@media (max-width: 991.98px) {
  .pf-disbursement-summary-row {
    flex-wrap: wrap;
  }

  .pf-disbursement-summary-actions {
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .pf-disbursement-summary-items {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .pf-disbursement-summary-item {
    flex: 1 1 calc(50% - 0.1rem);
    max-width: none;
    min-width: 0;
    border-right: 0;
    border-bottom: 1px solid #e8ecf2;
    padding: 0.45rem 0.35rem;
  }

  .pf-disbursement-summary-item:nth-last-child(-n+2) {
    border-bottom: 0;
  }
}

.pf-disbursement-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid #e6ebf2;
  background: #fff;
}

.pf-disbursement-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.55rem 0.75rem;
  min-width: 0;
}

.pf-disbursement-filter-field {
  min-width: 8.75rem;
  flex: 1 1 8.75rem;
  max-width: 12rem;
}

.pf-disbursement-filter-field .form-label {
  font-weight: 600;
  color: #495057;
}

.pf-disbursement-pagesize {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  margin-left: auto;
}

.pf-disbursement-pagesize .form-label {
  margin-bottom: 0;
  color: #6c757d;
  white-space: nowrap;
}

.pf-disbursement-pagesize .form-select {
  width: auto;
  min-width: 4.25rem;
}

.pf-disbursement-scroll {
  max-width: 100%;
  max-height: calc(100vh - var(--hrms-topbar-height, 3.75rem) - 18rem);
  overflow: auto;
  overscroll-behavior: contain;
  position: relative;
  z-index: 0;
  isolation: isolate;
  background: #fff;
}

.pf-disbursement-table {
  --bs-table-bg: #fff;
  width: max-content;
  min-width: 100%;
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.84rem;
}

.pf-disbursement-table > thead > * > * {
  --bs-table-bg: var(--navy);
  --bs-table-color: #fff;
  position: sticky;
  top: 0;
  z-index: 3;
  background-color: var(--navy);
  color: #fff;
  white-space: nowrap;
  vertical-align: middle;
  padding: 0.45rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom-width: 0;
  box-shadow: inset 0 -1px 0 #163056;
}

.pf-disbursement-table tbody td {
  white-space: nowrap;
  vertical-align: middle;
  padding: 0.4rem 0.65rem;
  border-color: #e8edf4;
  background-clip: padding-box;
}

.pf-disbursement-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.55rem 0.85rem;
  border-top: 1px solid #dee2e6;
  background: #fff;
}

.pf-disbursement-pager .pagination {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .pf-disbursement-scroll {
    max-height: calc(100vh - var(--hrms-topbar-height, 3.75rem) - 22rem);
  }

  .pf-disbursement-pagesize {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }
}



/* Shared employee-list filter field sizing (Employee Master baseline) */
.emp-list-filter-field {
  min-width: 8.75rem;
  flex: 1 1 8.75rem;
  max-width: 11.5rem;
}

.emp-list-filter-field .form-label {
  line-height: 1.2;
}

.emp-list-filter-label {
  font-weight: 600;
}

.emp-list-page {
  margin-top: -0.15rem;
}

.emp-list-filters .form-control,
.emp-list-filters .form-select,
.emp-list-filters .hrms-dd-trigger {
  font-weight: 400;
}

.emp-list-filter-actions {
  border-left: 1px solid #dee2e6;
  padding-left: 0.75rem;
  margin-left: 0.1rem;
}

.emp-list-filter-help {
  line-height: 1;
  text-decoration: none;
}

.emp-list-filter-help:hover,
.emp-list-filter-help:focus {
  color: var(--accent) !important;
}

.emp-list-table-card {
  border-radius: 0.45rem;
}

.emp-list-scroll {
  max-height: calc(100vh - var(--hrms-topbar-height, 3.75rem) - 9.5rem);
  overflow: auto;
  position: relative;
  z-index: 0;
  isolation: isolate;
  background: #fff;
}

.emp-list-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 0;
}

.emp-list-table > :not(caption) > * > * {
  padding: 0.28rem 0.55rem;
  vertical-align: middle;
  white-space: nowrap;
  font-size: 0.84rem;
  border-bottom-color: #eef0f4;
  background-clip: padding-box;
}

.emp-list-table.table > thead > * > * {
  --bs-table-bg: var(--navy);
  --bs-table-color: #fff;
  position: sticky;
  top: 0;
  z-index: 3;
  background-color: var(--navy);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: inset 0 -1px 0 #163056;
}

.emp-list-code-link {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.emp-list-name-link {
  font-weight: 700;
}

.emp-list-secondary {
  max-width: 10.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #495057;
}

.emp-list-table td.emp-list-row-num {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: #6c757d;
}

/* Attendance Import Validate & Review — State cell + shared semantic tones. */
.emp-import-valid-page .att-import-review-table td.att-import-state-cell {
  max-width: 10.5rem;
  min-width: 8.5rem;
  width: 10.5rem;
  white-space: nowrap;
}

.att-import-state-pill {
  max-width: 100%;
}

.att-import-state-pill--ready,
.att-import-state-dot--ready,
.att-import-state-label--ready { --att-import-state-fg: #1b5e2a; --att-import-state-bg: #e8f6ec; --att-import-state-bd: #c6e6cd; }

.att-import-state-pill--needs-dn,
.att-import-state-dot--needs-dn,
.att-import-state-label--needs-dn { --att-import-state-fg: #1a4a8a; --att-import-state-bg: #dce8f6; --att-import-state-bd: #b8cce8; }

.att-import-state-pill--lunch-only,
.att-import-state-dot--lunch-only,
.att-import-state-label--lunch-only { --att-import-state-fg: #7a5b00; --att-import-state-bg: #fbf3d5; --att-import-state-bd: #ead99a; }

.att-import-state-pill--needs-resolution,
.att-import-state-dot--needs-resolution,
.att-import-state-label--needs-resolution { --att-import-state-fg: #9b1b6a; --att-import-state-bg: #f8e4f0; --att-import-state-bd: #e8b8d4; }

.att-import-state-pill--comp-off-blocked,
.att-import-state-dot--comp-off-blocked,
.att-import-state-label--comp-off-blocked { --att-import-state-fg: #9a4b12; --att-import-state-bg: #fde8d4; --att-import-state-bd: #f0c49a; }

.att-import-state-pill--other-leave-blocked,
.att-import-state-dot--other-leave-blocked,
.att-import-state-label--other-leave-blocked { --att-import-state-fg: #6b4423; --att-import-state-bg: #efe4d8; --att-import-state-bd: #d4c0ab; }

.att-import-state-pill--ineligible,
.att-import-state-dot--ineligible,
.att-import-state-label--ineligible { --att-import-state-fg: #5b2d8e; --att-import-state-bg: #ece6f8; --att-import-state-bd: #d4c4ec; }

.att-import-state-pill--hard-error,
.att-import-state-dot--hard-error,
.att-import-state-label--hard-error { --att-import-state-fg: #b23a2e; --att-import-state-bg: #fde4e0; --att-import-state-bd: #f0b8b0; }

.att-import-state-pill--fallback,
.att-import-state-dot--fallback,
.att-import-state-label--fallback { --att-import-state-fg: #495057; --att-import-state-bg: #f3f5f8; --att-import-state-bd: #dce1e8; }

.emp-list-pill.att-import-state-pill {
  background: var(--att-import-state-bg);
  border-color: var(--att-import-state-bd);
  color: var(--att-import-state-fg);
}

.att-import-state-dot--ready,
.att-import-state-dot--needs-dn,
.att-import-state-dot--lunch-only,
.att-import-state-dot--needs-resolution,
.att-import-state-dot--comp-off-blocked,
.att-import-state-dot--other-leave-blocked,
.att-import-state-dot--ineligible,
.att-import-state-dot--hard-error,
.att-import-state-dot--fallback {
  background: var(--att-import-state-fg);
}

.att-import-state-label--ready,
.att-import-state-label--needs-dn,
.att-import-state-label--lunch-only,
.att-import-state-label--needs-resolution,
.att-import-state-label--comp-off-blocked,
.att-import-state-label--other-leave-blocked,
.att-import-state-label--ineligible,
.att-import-state-label--hard-error,
.att-import-state-label--fallback {
  color: var(--att-import-state-fg);
}

/* Attendance Import State Legend — collapsible card above the review table. */
.att-import-state-legend-card {
  border-radius: 0.45rem;
  border-color: #e6ebf2;
}

.att-import-state-legend-toggle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  color: inherit !important;
  text-align: left;
}

.att-import-state-legend-toggle-main {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
}

.att-import-state-legend-icon {
  color: #2563eb;
  font-size: 1rem;
  line-height: 1.35;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

.att-import-state-legend-headings {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.att-import-state-legend-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy, #1f3864);
  line-height: 1.25;
}

.att-import-state-legend-subtitle {
  font-size: 0.72rem;
  color: #6c757d;
  line-height: 1.35;
}

.att-import-state-legend-chevron {
  color: #6c757d;
  font-size: 0.9rem;
  line-height: 1.35;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.att-import-state-legend-toggle[aria-expanded="false"] .att-import-state-legend-chevron {
  transform: rotate(180deg);
}

.att-import-state-legend-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.att-import-state-legend-item {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.55rem 0.6rem;
  border-radius: 0.4rem;
  background: #f5f7fa;
  border: 1px solid #e8ecf2;
}

.att-import-state-legend-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.28rem;
}

.att-import-state-legend-copy {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.att-import-state-legend-code {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}

.att-import-state-legend-desc {
  font-size: 0.68rem;
  color: #6c757d;
  line-height: 1.35;
}

@media (max-width: 1199.98px) {
  .att-import-state-legend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .att-import-state-legend-grid {
    grid-template-columns: 1fr;
  }
}

.emp-list-status {
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emp-list-pill {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.emp-list-pill-staff { background: #dce8f6; border-color: #b8cce8; color: #1a4a8a; }
.emp-list-pill-local { background: #ece6f8; border-color: #d4c4ec; color: #5b2d8e; }
.emp-list-pill-colony { background: #f8e4f0; border-color: #e8b8d4; color: #9b1b6a; }
.emp-list-pill-working { background: #e8f6ec; border-color: #c6e6cd; color: #1b5e2a; }
.emp-list-pill-on-leave { background: #fbf3d5; border-color: #ead99a; color: #7a5b00; }
.emp-list-pill-suspended { background: #fde8d4; border-color: #f0c49a; color: #9a4b12; }
.emp-list-pill-resigned { background: #fde4e0; border-color: #f0b8b0; color: #b23a2e; }
.emp-list-pill-terminated { background: #f8d7da; border-color: #e5b4b8; color: #842029; }
.emp-list-pill-blacklisted { background: #f3d6d8; border-color: #d9a8ad; color: #6b1c23; }
.emp-list-pill-retired { background: #efe4d8; border-color: #d4c0ab; color: #6b4423; }
.emp-list-pill-ex-employee { background: #e9ecef; border-color: #ced4da; color: #495057; }
.emp-list-pill-inactive { background: #e2e6ea; border-color: #c5ccd3; color: #3d4a57; }
.emp-list-pill-fallback { background: #f3f5f8; border-color: #dce1e8; color: #495057; }

.emp-list-sticky-code,
.emp-list-sticky-name {
  position: sticky;
  background: #fff;
}

.emp-list-sticky-code {
  left: 0;
  z-index: 4;
  min-width: 5.5rem;
  width: 5.5rem;
}

.emp-list-sticky-name {
  left: 5.5rem;
  z-index: 3;
  min-width: 13.5rem;
  width: 13.5rem;
  box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.16);
}

.emp-list-table.table > thead > * > .emp-list-sticky-code,
.emp-list-table.table > thead > * > .emp-list-sticky-name {
  --bs-table-bg: var(--navy);
  --bs-table-color: #fff;
  background-color: var(--navy);
  color: #fff;
}

.emp-list-table thead .emp-list-sticky-code { z-index: 6; }
.emp-list-table thead .emp-list-sticky-name { z-index: 5; }

.emp-list-table.table-hover > tbody > tr:hover > .emp-list-sticky-code,
.emp-list-table.table-hover > tbody > tr:hover > .emp-list-sticky-name {
  --bs-table-bg: var(--accent-light);
  --bs-table-hover-bg: var(--accent-light);
  background-color: var(--accent-light);
}

#employeeListBody.is-loading,
#wtiOpsListBody.is-loading {
  opacity: .55;
  pointer-events: none;
}

.wti-ops-page {
  min-width: 0;
  max-width: 100%;
}

.wti-ops-page .coff-kpi-card,
.wti-ops-page .emp-list-table-card {
  min-width: 0;
  max-width: 100%;
}

.wti-filter-context {
  padding-right: 0.65rem;
  margin-right: 0.15rem;
  border-right: 1px solid #dee2e6;
}

.wti-ops-page .emp-list-scroll {
  max-height: calc(100vh - var(--hrms-topbar-height, 3.75rem) - 18rem);
}

/* Opaque row paint so horizontally scrolling cells cannot show through sticky
   Emp Code / Name — same stacking as Employee Master. Bootstrap table cells
   use --bs-table-bg; keep it opaque so other rows never bleed through. */
.wti-ops-table.emp-list-table > tbody > tr > td {
  --bs-table-bg: #fff;
  --bs-table-accent-bg: #fff;
  background-color: #fff;
  background-clip: border-box;
  z-index: 0;
}

.wti-ops-table tbody tr.wti-row-ineligible > .wti-row-accent {
  box-shadow: inset 3px 0 0 #c0392b;
}

.wti-ops-table tbody tr.wti-row-eligible > .wti-row-accent {
  box-shadow: inset 3px 0 0 #1e7a3a;
}

.wti-ops-table.emp-list-table > tbody > tr > .emp-list-sticky-code,
.wti-ops-table.emp-list-table > tbody > tr > .emp-list-sticky-name {
  --bs-table-bg: #fff;
  background-color: #fff;
}

.wti-ops-table.emp-list-table.table-hover > tbody > tr:hover > .emp-list-sticky-code,
.wti-ops-table.emp-list-table.table-hover > tbody > tr:hover > .emp-list-sticky-name {
  --bs-table-bg: var(--accent-light);
  --bs-table-hover-bg: var(--accent-light);
  background-color: var(--accent-light);
}

.wti-fail-cell,
.wti-ops-table.emp-list-table > tbody > tr > td.wti-fail-cell,
.wti-ops-table.emp-list-table.table-hover > tbody > tr:hover > td.wti-fail-cell {
  --bs-table-bg: #fde8ea;
  --bs-table-color: #d32f2f;
  background-color: #fde8ea;
  color: #d32f2f;
  font-weight: 700;
}

.wti-ops-table .wti-perf-select {
  min-width: 4.1rem;
  width: auto;
  max-width: 5.75rem;
  height: 1.4rem;
  min-height: 1.4rem;
  max-height: 1.4rem;
  display: inline-block;
  vertical-align: middle;
  padding: 0 1.2rem 0 0.3rem;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.2;
  color: #1f2a37;
  border: 1px solid var(--hrms-dd-border);
  border-radius: 0.25rem;
  background-color: transparent;
  background-position: right 0.28rem center;
  background-size: 0.55rem 0.55rem;
  box-shadow: none;
}

.wti-ops-table .wti-perf-select:focus {
  border-color: var(--hrms-dd-border-focus);
  box-shadow: 0 0 0 0.15rem rgba(46, 83, 149, 0.16);
}

.wti-ops-table .wti-perf-select.wti-perf-select-empty {
  color: var(--hrms-dd-muted);
  font-weight: 400;
}

.wti-ops-table .wti-perf-select.wti-perf-select-fail {
  color: #d32f2f;
  font-weight: 700;
}

.wti-ops-table .wti-perf-select option {
  color: #1f2a37;
  font-weight: 400;
  background-color: #fff;
}

.wti-ops-table .wti-perf-select option[value=""] {
  color: var(--hrms-dd-muted);
}

.wti-ops-table .wti-fail-cell .wti-perf-select {
  background-color: transparent;
  border-color: rgba(211, 47, 47, 0.28);
}

.wti-ops-table .wti-ontime-cell,
.emp-list-table .wti-ontime-cell {
  text-align: center;
}

.wti-ops-table .wti-ontime-badge,
.emp-list-table .wti-ontime-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.wti-ops-table .wti-ontime-badge.wti-ontime-pass,
.emp-list-table .wti-ontime-badge.wti-ontime-pass {
  background-color: #2e9b4a;
}

.wti-ops-table .wti-ontime-badge.wti-ontime-fail,
.emp-list-table .wti-ontime-badge.wti-ontime-fail {
  background-color: #e53935;
}

.wti-ops-table .wti-eligibility-pill {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 0;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
}

.wti-ops-table .wti-eligibility-pill.wti-eligibility-eligible {
  background: #e7f6ec;
  color: #1e7a3a;
}

.wti-ops-table .wti-eligibility-pill.wti-eligibility-not-eligible {
  background: #fde8ea;
  color: #c0392b;
}

.wti-amount-cell {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.wti-criterion-cell {
  white-space: nowrap;
}

.wti-criterion-value {
  vertical-align: middle;
}

.wti-perf-cell-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  max-width: 100%;
}

.wti-fail-mark {
  display: inline-flex;
  align-items: center;
  margin-left: 0.15rem;
  color: #d32f2f;
  font-size: 0.78rem;
  vertical-align: middle;
}

.wti-override-action,
.wti-override-active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-left: 0.15rem;
  line-height: 1;
  vertical-align: middle;
  text-decoration: none !important;
}

.wti-override-action {
  color: #2e5395;
}

.wti-override-action:hover,
.wti-override-action:focus {
  color: #1f3864;
}

.wti-override-active {
  color: #2563eb;
}

.wti-override-active:hover,
.wti-override-active:focus {
  color: #1d4ed8;
}

.wti-override-eligibility-mark {
  display: inline-flex;
  margin-left: 0.3rem;
  color: #2563eb;
  font-size: 0.78rem;
  vertical-align: middle;
}

.wti-override-modal-dialog {
  max-width: 32rem;
  width: calc(100% - 1.5rem);
}

.wti-override-modal .modal-content {
  border: 0;
  border-radius: 0.75rem;
  box-shadow: 0 0.625rem 1.75rem rgba(31, 56, 100, 0.18);
}

.wti-override-modal-header {
  padding: 1rem 1.15rem 0.35rem;
  align-items: flex-start;
}

.wti-override-modal-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy, #1f3864);
  line-height: 1.25;
}

.wti-override-modal-body {
  padding: 0.35rem 1.15rem 0.85rem;
}

.wti-override-modal-footer {
  padding: 0.35rem 1.15rem 1rem;
  gap: 0.5rem;
}

.wti-override-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.45rem;
  background: #ebf3ff;
  color: #2563eb;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.wti-override-section-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6c757d;
  margin-bottom: 0.35rem;
}

.wti-override-criterion-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy, #1f3864);
}

.wti-override-result-text {
  font-size: 0.8rem;
  color: #6c757d;
  margin-top: 0.2rem;
  line-height: 1.35;
}

.wti-override-context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border-radius: 0.5rem;
  background: #eef4fb;
}

.wti-override-context-label {
  font-size: 0.7rem;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.wti-override-context-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f3864;
  word-break: break-word;
}

.wti-override-criterion-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: #f3f5f9;
  color: #2e5395;
  flex-shrink: 0;
  font-size: 1.05rem;
}

.wti-override-criterion-icon--intime {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background: #ebf3ff;
  color: #2563eb;
  font-size: 0.8rem;
}

.wti-override-criterion-icon--lunch {
  background: #fff0e6;
  color: #e65100;
}

.wti-override-criterion-icon--performance {
  background: #eef4fb;
  color: #2e5395;
}

.wti-override-status-badge {
  font-weight: 600;
  font-size: 0.68rem;
  padding: 0.2em 0.55em;
  border-radius: 0.25rem;
}

.wti-override-status-fail {
  background: #fde8ea;
  color: #c0392b;
}

.wti-override-status-not-evaluable {
  background: #ffe5e5;
  color: #d32f2f;
}

.wti-override-status-muted {
  background: #eef0f4;
  color: #6c757d;
}

.wti-override-status-pass {
  background: #e7f6ec;
  color: #1e7a3a;
}

.wti-override-status-overridden {
  background: #e8eefc;
  color: #2563eb;
}

.wti-override-info {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6rem 0.7rem;
  border-radius: 0.45rem;
  background: #ebf3ff;
  border: 1px solid #cfe0f5;
  color: #1a2b4b;
  font-size: 0.78rem;
  line-height: 1.45;
  font-weight: 500;
}

.wti-override-info-icon {
  color: #2563eb;
  font-size: 0.95rem;
  line-height: 1.2;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

.wti-override-details-label {
  font-size: 0.72rem;
  color: #6c757d;
  margin-bottom: 0.15rem;
}

.wti-override-detail-card {
  padding: 0.45rem 0.55rem;
  border: 1px solid #e3e7ee;
  border-radius: 0.4rem;
  background: #f8f9fb;
}

.wti-override-details-value {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--navy, #1f3864);
  line-height: 1.3;
}

.wti-override-lunch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.wti-override-reason-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.25rem;
}

.wti-override-reason-input {
  font-size: 0.84rem;
  border-color: #ced4da;
  border-radius: 0.375rem;
  resize: vertical;
  min-height: 4.5rem;
}

.wti-override-reason-count {
  color: #6c757d;
  font-variant-numeric: tabular-nums;
}

.wti-override-btn-cancel {
  border: 1px solid #ced4da;
  background: #fff;
  color: #495057;
  font-weight: 500;
  padding: 0.35rem 0.85rem;
}

.wti-override-btn-cancel:hover {
  background: #f8f9fa;
  border-color: #adb5bd;
  color: #343a40;
}

.wti-override-btn-apply {
  background: var(--navy, #1f3864);
  border: 1px solid var(--navy, #1f3864);
  color: #fff;
  font-weight: 600;
  padding: 0.35rem 0.95rem;
}

.wti-override-btn-apply:hover:not(:disabled) {
  background: #172d52;
  border-color: #172d52;
  color: #fff;
}

.wti-override-btn-apply:disabled {
  opacity: 0.65;
}

.wti-override-indicator-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.15rem;
  margin-top: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 0.5rem;
  background: #ebf3ff;
  border: 1px solid #cfe0f5;
  color: #1a2b4b;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.wti-override-indicator-intro {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  flex: 1 1 16rem;
  min-width: 0;
}

.wti-override-indicator-intro-copy {
  min-width: 0;
}

.wti-override-indicator-title {
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.25;
  margin-bottom: 0.2rem;
  color: #1a2b4b;
}

.wti-override-indicator-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.45rem;
  background: transparent;
  color: #2e5395;
  font-size: 1.35rem;
  flex-shrink: 0;
  line-height: 1;
}

.wti-override-indicator-desc {
  font-size: 0.78rem;
  line-height: 1.4;
  color: #3d4f6f;
}

.wti-override-indicator-inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2e5395;
  font-size: 0.78rem;
  vertical-align: -0.05em;
  margin: 0 0.1rem;
}

.wti-override-indicator-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  flex: 1 1 22rem;
  /* Keep content min-size so the panel wraps instead of clipping legend items. */
  min-width: min(100%, 18rem);
  max-width: 100%;
  gap: 0.55rem 0;
}

.wti-override-indicator-legend-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1rem;
  padding: 0 0.9rem;
  border-left: 1px solid #c9d7ea;
  flex: 0 1 auto;
  max-width: 100%;
}

.wti-override-indicator-legend-group:first-child {
  padding-left: 0.95rem;
}

.wti-override-indicator-legend-group:last-child {
  padding-right: 0;
}

.wti-override-indicator-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: #1a2b4b;
  white-space: nowrap;
}

.wti-override-indicator-item-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  gap: 0.1rem;
}

.wti-override-indicator-item-label {
  font-weight: 600;
  color: #1a2b4b;
}

.wti-override-indicator-item-hint {
  font-size: 0.7rem;
  font-weight: 400;
  color: #6c7a90;
}

.wti-override-indicator-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  min-width: 1.1rem;
  font-size: 0.95rem;
  line-height: 1;
  flex-shrink: 0;
}

.wti-override-indicator-available {
  color: #2e5395;
}

.wti-override-indicator-active {
  color: #2563eb;
}

.wti-override-indicator-fail {
  color: #d32f2f;
}

.wti-override-indicator-missing {
  color: #495057;
  font-weight: 600;
}

@media (max-width: 1399.98px) {
  .wti-override-indicator-panel {
    align-items: stretch;
  }

  .wti-override-indicator-intro,
  .wti-override-indicator-legend {
    flex: 1 1 100%;
  }

  .wti-override-indicator-legend {
    min-width: 0;
    padding-top: 0.65rem;
    border-top: 1px solid #c9d7ea;
  }

  .wti-override-indicator-legend-group:first-child {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 767.98px) {
  .wti-override-indicator-legend {
    flex-direction: column;
    gap: 0.55rem;
  }

  .wti-override-indicator-legend-group {
    padding: 0.45rem 0 0;
    border-left: 0;
    border-top: 1px solid #c9d7ea;
  }

  .wti-override-indicator-legend-group:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .wti-override-indicator-item {
    white-space: normal;
  }

  .wti-override-context,
  .wti-override-lunch-grid {
    grid-template-columns: 1fr;
  }

  .emp-list-filter-actions {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
    border-top: 1px solid #dee2e6;
    padding-top: 0.45rem;
    margin-top: 0.1rem;
  }

  .wti-filter-context {
    border-right: 0;
    padding-right: 0;
    margin-right: 0;
    width: 100%;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #dee2e6;
  }

  .emp-list-scroll,
  .wti-ops-page .emp-list-scroll {
    max-height: calc(100vh - var(--hrms-topbar-height, 3.75rem) - 12rem);
  }
}

/* ===== C.OFF Register (year grid) ===== */
.coff-filter-card {
  border-color: #e4eaf2;
  box-shadow: none;
}

.coff-filter-row {
  width: 100%;
}

.coff-filter-field {
  min-width: 8.5rem;
}

.coff-filter-employee {
  min-width: 14rem;
  flex: 1 1 14rem;
  max-width: 18rem;
}

.coff-filter-search-wrap {
  position: relative;
}

.coff-filter-search-wrap .bi-search {
  position: absolute;
  left: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  color: #8b95a5;
  font-size: 0.8rem;
  pointer-events: none;
}

.coff-filter-search-wrap .form-control {
  padding-left: 1.75rem;
}

.coff-filter-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.coff-kpi-card {
  border: 1px solid #e4eaf2;
  box-shadow: none;
}

.coff-kpi-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.coff-kpi-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  min-width: min-content;
  padding-bottom: 0.15rem;
}

.coff-kpi {
  flex: 0 0 auto;
  width: 198px;
  min-height: 114px;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.7rem 12px;
  border: 1px solid #e6ebf2;
  border-radius: 0.55rem;
  background: #fbfcfe;
}

.coff-kpi-icon {
  width: 2.05rem;
  height: 2.05rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 0.95rem;
}

.coff-kpi-icon.tone-blue {
  background: #e7eef9;
  color: #2e5395;
}

.coff-kpi-icon.tone-green {
  background: #e7f6ed;
  color: #1b7a45;
}

.coff-kpi-icon.tone-red {
  background: #fde8e6;
  color: #b23a2e;
}

.coff-kpi-icon.tone-purple {
  background: #f0e9f8;
  color: #6b3fa0;
}

.coff-kpi-icon.tone-orange {
  background: #fff1e4;
  color: #b86514;
}

.coff-kpi-icon.tone-alert {
  background: #fde8e6;
  color: #c0392b;
}

.coff-kpi-body {
  min-width: 0;
}

.coff-kpi-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #6c757d;
  line-height: 1.2;
  margin-bottom: 0.2rem;
}

.coff-kpi-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.coff-kpi-value.is-positive {
  color: #1b7a45;
}

.coff-kpi-value.is-negative {
  color: #b23a2e;
}

.coff-kpi-unit {
  font-size: 0.72rem;
  font-weight: 600;
  color: #8490a0;
}

.coff-kpi-subvalue {
  font-size: 0.84rem;
  font-weight: 650;
  color: #495057;
  margin-top: 0.1rem;
  font-variant-numeric: tabular-nums;
}

.coff-kpi-hint {
  font-size: 0.7rem;
  color: #8b95a5;
  margin-top: 0.25rem;
  line-height: 1.25;
}

.coff-records-card {
  margin-top: 0;
}

/*
 * Dedicated scroll region: intentional horizontal scroll for Jan?Dec ERN/USE.
 * Do not shrink month columns to fit the viewport.
 */
.coff-table-scroll {
  --coff-section-row-height: 1.85rem;
  max-height: calc(100vh - var(--hrms-topbar-height, 3.75rem) - 14rem);
  overflow: auto;
  position: relative;
  z-index: 0;
  isolation: isolate;
  background: #fff;
}

.coff-detail-table-scroll {
  max-height: min(22rem, calc(100vh - var(--hrms-topbar-height, 3.75rem) - 18rem));
}

.coff-register-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 0;
}

.coff-register-table > :not(caption) > * > * {
  padding: 0.28rem 0.55rem;
  vertical-align: middle;
  white-space: nowrap;
  font-size: 0.84rem;
  border-bottom-color: #eef0f4;
  background-clip: padding-box;
}

.coff-register-table.table > thead > * > * {
  --bs-table-bg: var(--navy);
  --bs-table-color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--navy);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: inset 0 -1px 0 #163056;
}

.coff-register-table thead tr.coff-section-row > * {
  top: 0;
  z-index: 10;
  background: #182f55;
  color: #dce6f1;
  padding-top: 0.28rem;
  padding-bottom: 0.28rem;
}

.coff-register-table thead tr.coff-col-row > * {
  top: var(--coff-section-row-height);
  z-index: 9;
  background-color: var(--navy);
}

.coff-month-group {
  border-left: 1px solid rgba(255, 255, 255, 0.18) !important;
  min-width: 6.5rem;
}

.coff-month-col {
  width: 3.35rem;
  min-width: 3.35rem;
  max-width: 3.35rem;
  padding-left: 0.35rem !important;
  padding-right: 0.35rem !important;
}

.coff-month-start {
  border-left: 1px solid #e4eaf2;
}

.coff-year-col {
  width: 5.25rem;
  min-width: 5.25rem;
}

.coff-col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.coff-col-total {
  font-weight: 700;
  color: var(--navy);
  width: 6.25rem;
  min-width: 6.25rem;
}

.coff-register-table thead .coff-col-total,
.coff-register-table thead .coff-year-col {
  color: #fff;
}

.coff-emp-code {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  font-size: 0.84rem;
}

a.coff-name-cell {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  width: 100%;
  min-height: 2rem;
  padding: 0.2rem 0.55rem;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0.2rem;
  box-sizing: border-box;
}

a.coff-name-cell:hover,
a.coff-name-cell:focus {
  color: inherit;
  background: rgba(46, 83, 149, 0.08);
  outline: none;
}

a.coff-name-cell:focus-visible {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.coff-name-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-weight: 700;
  color: var(--navy);
}

a.coff-name-cell:hover .coff-name-text,
a.coff-name-cell:focus .coff-name-text {
  color: var(--accent);
}

.coff-name-action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  color: #8a96a3;
  line-height: 1;
}

.coff-name-action .bi {
  font-size: 0.72rem;
}

.coff-name-action-label {
  display: none;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

a.coff-name-cell:hover .coff-name-action,
a.coff-name-cell:focus .coff-name-action {
  color: var(--accent);
}

a.coff-name-cell:hover .coff-name-action-label,
a.coff-name-cell:focus .coff-name-action-label {
  display: inline;
}

/*
 * Sticky stacking (inside .coff-table-scroll isolation):
 *   26?30 ? frozen header corners (top + left)
 *   9?10  ? scrolling month/year headers (top only)
 *   5?9   ? frozen body / totals (left only)
 * Keep all values well below #topbar (1020).
 */
.coff-freeze {
  position: sticky;
  background: #fff;
}

.coff-freeze-code {
  left: 0;
  z-index: 7;
  min-width: 5.25rem;
  width: 5.25rem;
}

.coff-freeze-name {
  left: 5.25rem;
  z-index: 6;
  min-width: 12.5rem;
  width: 12.5rem;
  max-width: 12.5rem;
}

.coff-freeze-dept {
  left: 17.75rem;
  z-index: 5;
  min-width: 8.5rem;
  width: 8.5rem;
  max-width: 8.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coff-freeze-opening {
  left: 26.25rem;
  z-index: 5;
  min-width: 5.25rem;
  width: 5.25rem;
  box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.18);
}

.coff-detail-freeze-opening {
  left: 0;
  z-index: 7;
  min-width: 5.25rem;
  width: 5.25rem;
  box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.18);
}

/* Employee detail ? info under table, then detached Actions. */
.coff-detail-info {
  width: 100%;
  margin: 0.65rem 0 0;
  padding: 0.55rem 0.85rem;
  border: 1px solid #dde3ec;
  border-radius: 0.375rem;
  background: #f5f7fa;
  color: #5b6472;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.coff-detail-actions-card {
  margin-top: 0.75rem;
  overflow: hidden;
  border-color: #dde3ec;
  box-shadow: 0 1px 2px rgba(31, 56, 100, 0.04);
}

.coff-detail-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding: 0.65rem 0.85rem;
  background: #fff;
}

.coff-detail-actions-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5b6472;
}

.coff-detail-actions-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-left: auto;
}

.coff-detail-actions-card .btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.coff-register-table.table > thead > tr.coff-section-row > .coff-freeze {
  --bs-table-bg: #182f55;
  background-color: #182f55;
  color: #fff;
  z-index: 30;
}

.coff-register-table.table > thead > tr.coff-col-row > .coff-freeze {
  --bs-table-bg: var(--navy);
  background-color: var(--navy);
  color: #fff;
  z-index: 28;
}

.coff-register-table tbody tr:nth-child(even) > .coff-freeze {
  background: #f7f9fc;
}

.coff-register-table tbody tr:hover > .coff-freeze {
  background-color: var(--accent-light, #eef4fb);
}

.coff-totals-row > * {
  position: sticky;
  bottom: 0;
  background: #f3f6fa;
  font-weight: 650;
  border-top: 1px solid #d7dee8;
  z-index: 2;
}

.coff-totals-row > .coff-freeze {
  z-index: 8;
  background: #f3f6fa;
}

.coff-pager-wrap {
  background: #fff;
}

@media (max-width: 767.98px) {
  .coff-filter-actions {
    width: 100%;
    justify-content: flex-end;
    border-top: 1px solid #dee2e6;
    padding-top: 0.45rem;
    margin-top: 0.15rem;
  }

  .coff-table-scroll {
    max-height: calc(100vh - var(--hrms-topbar-height, 3.75rem) - 16rem);
  }
}


/* Standalone Screen 2 — Add/Edit Period Deduction Bootstrap modal (Categories pattern). */
.period-deductions-inline-host {
  position: relative;
}

.period-deductions-inline-dialog {
  width: min(42rem, 100%);
  max-width: 42rem;
}

#periodDeductionsInlineModal .modal-header {
  border-bottom-color: #eef0f4;
}

#periodDeductionsInlineModal .modal-title {
  color: var(--navy);
  font-weight: 650;
}

#periodDeductionsInlineModal .modal-body {
  padding-top: 0.35rem;
  overflow-x: hidden;
}

#periodDeductionsInlineModal .emp-period-deduction-modal-form .form-actions,
#periodDeductionsInlineModal .emp-period-deduction-modal-form .emp-workspace-form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

#periodDeductionsInlineModal .emp-period-deduction-modal-form .emp-deduction-form,
#periodDeductionsInlineModal .emp-period-deduction-modal-form .emp-deduction-modal-form-body {
  max-width: none;
  width: 100%;
}

#periodDeductionsInlineModal .emp-period-deduction-modal-form .emp-deduction-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "period kind"
    "amount duty"
    "remarks remarks";
}

#periodDeductionsInlineList[aria-busy="true"] {
  opacity: 0.55;
  pointer-events: none;
}
/* Payroll Advances Register (Screen 1) — employee summary; vertical scroll only. */
.advances-register-page .emp-list-filter-field {
  min-width: 8.75rem;
  flex: 1 1 8.75rem;
  max-width: 12rem;
}

.advances-register-page .emp-list-filter-label {
  font-weight: 600;
}

.advances-register-page .emp-list-filter-actions {
  border-left: 1px solid #dee2e6;
  padding-left: 0.75rem;
}

.advances-register-card {
  border-radius: 0.45rem;
  overflow: hidden;
}

.advances-register-scroll {
  max-height: calc(100vh - var(--hrms-topbar-height, 3.75rem) - 12rem);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  z-index: 0;
  isolation: isolate;
  background: #fff;
}

.advances-register-table {
  table-layout: fixed;
  width: 100%;
  margin-bottom: 0;
}

.advances-register-table.table > thead > * > * {
  position: sticky;
  top: 0;
  z-index: 2;
}

.advances-register-table th,
.advances-register-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.advances-register-table .advances-col-code {
  width: 6.75rem;
}

.advances-register-table .advances-col-name {
  width: 14rem;
}

.advances-register-table .advances-col-dept {
  width: 9.5rem;
}

.advances-register-table .advances-col-category {
  width: 6.75rem;
}

.advances-register-table .advances-col-status {
  width: 7.25rem;
}

.advances-register-table .advances-col-count {
  width: 6rem;
  text-align: right;
}

.advances-register-table .advances-col-pending {
  width: 8.5rem;
  text-align: right;
}

.advances-register-table .advances-col-action {
  width: 6.25rem;
  text-align: right;
}

.advances-register-table th.advances-col-code,
.advances-register-table td.advances-col-code,
.advances-register-table th.advances-col-name,
.advances-register-table td.advances-col-name {
  text-overflow: clip;
}

.advances-name-link,
.advances-code-link {
  color: var(--navy);
  font-weight: 650;
  text-decoration: none;
}

.advances-name-link:hover,
.advances-name-link:focus,
.advances-code-link:hover,
.advances-code-link:focus {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.advances-emp-code {
  font-size: 0.82rem;
}

.advances-dept-cell {
  white-space: nowrap;
}

.advances-register-body.is-loading,
#advancesRegisterBody.is-loading {
  opacity: 0.55;
  pointer-events: none;
}

.advances-register-pager-wrap {
  background: #fff;
}

@media (max-width: 767.98px) {
  .advances-register-page .emp-list-filter-actions {
    width: 100%;
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid #dee2e6;
    padding-top: 0.45rem;
    margin-top: 0.15rem;
  }

  .advances-register-scroll {
    max-height: calc(100vh - var(--hrms-topbar-height, 3.75rem) - 16rem);
  }
}

/* Payroll Period Deductions Register (Screen 1) — employee summary; vertical scroll only. */
.period-deductions-register-page .emp-list-filter-field {
  min-width: 8.75rem;
  flex: 1 1 8.75rem;
  max-width: 12rem;
}

.period-deductions-register-page .emp-list-filter-label {
  font-weight: 600;
}

.period-deductions-register-page .emp-list-filter-actions {
  border-left: 1px solid #dee2e6;
  padding-left: 0.75rem;
}

.period-deductions-register-card {
  border-radius: 0.45rem;
  overflow: hidden;
}

.period-deductions-register-scroll {
  max-height: calc(100vh - var(--hrms-topbar-height, 3.75rem) - 12rem);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  z-index: 0;
  isolation: isolate;
  background: #fff;
}

.period-deductions-register-table {
  table-layout: fixed;
  width: 100%;
  margin-bottom: 0;
}

.period-deductions-register-table.table > thead > * > * {
  position: sticky;
  top: 0;
  z-index: 2;
}

.period-deductions-register-table th,
.period-deductions-register-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.period-deductions-register-table .pd-reg-col-code {
  width: 6.75rem;
}

.period-deductions-register-table .pd-reg-col-name {
  width: 14rem;
}

.period-deductions-register-table .pd-reg-col-dept {
  width: 9.5rem;
}

.period-deductions-register-table .pd-reg-col-category {
  width: 6.75rem;
}

.period-deductions-register-table .pd-reg-col-status {
  width: 7.25rem;
}

.period-deductions-register-table .pd-reg-col-count {
  width: 6rem;
  text-align: right;
}

.period-deductions-register-table .pd-reg-col-current {
  width: 8.5rem;
  text-align: right;
}

.period-deductions-register-table .pd-reg-col-action {
  width: 6.25rem;
  min-width: 6.25rem;
  text-align: right;
  overflow: visible;
}

.period-deductions-register-table th.pd-reg-col-code,
.period-deductions-register-table td.pd-reg-col-code,
.period-deductions-register-table th.pd-reg-col-name,
.period-deductions-register-table td.pd-reg-col-name {
  text-overflow: clip;
}

.pd-reg-name-link,
.pd-reg-code-link {
  color: var(--navy);
  font-weight: 650;
  text-decoration: none;
}

.pd-reg-name-link:hover,
.pd-reg-name-link:focus,
.pd-reg-code-link:hover,
.pd-reg-code-link:focus {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.pd-reg-emp-code {
  font-size: 0.82rem;
}

.pd-reg-dept-cell {
  white-space: nowrap;
}

#periodDeductionsRegisterBody.is-loading {
  opacity: 0.55;
  pointer-events: none;
}

.period-deductions-register-pager-wrap {
  background: #fff;
}

@media (max-width: 767.98px) {
  .period-deductions-register-page .emp-list-filter-actions {
    width: 100%;
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid #dee2e6;
    padding-top: 0.45rem;
    margin-top: 0.15rem;
  }

  .period-deductions-register-scroll {
    max-height: calc(100vh - var(--hrms-topbar-height, 3.75rem) - 16rem);
  }
}

/* Employee Master Import — bounded issues table (reuses existing table styling). */
.import-issues-scroll {
  max-height: 22rem;
  overflow: auto;
}

.import-issues-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
}

/* Valid Employee Records — reuse Emp Master list scroll height under step nav + back link. */
.emp-import-valid-page .emp-list-scroll {
  max-height: calc(100vh - var(--hrms-topbar-height, 3.75rem) - 12.5rem);
}

@media (max-width: 767.98px) {
  .emp-import-valid-page .emp-list-scroll {
    max-height: calc(100vh - var(--hrms-topbar-height, 3.75rem) - 14.5rem);
  }
}

/* Attendance Import Validate & Review — column widths aligned with emp-list-table. */
.emp-import-valid-page {
  --att-import-row-col-width: 2.75rem;
}

.emp-import-valid-page .att-import-review-table .att-import-col-row {
  width: var(--att-import-row-col-width);
  min-width: var(--att-import-row-col-width);
  max-width: var(--att-import-row-col-width);
  text-align: center;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.emp-import-valid-page .att-import-review-table .att-import-col-date {
  width: 6.75rem;
  min-width: 6.75rem;
  max-width: 6.75rem;
}

.emp-import-valid-page .att-import-review-table th.att-import-col-state,
.emp-import-valid-page .att-import-review-table .att-import-col-state {
  width: 10.5rem;
  min-width: 8.5rem;
  max-width: 10.5rem;
}

.emp-import-valid-page .att-import-review-table .att-import-col-existing {
  width: 5.25rem;
  min-width: 5.25rem;
  max-width: 5.25rem;
}

.emp-import-valid-page .att-import-review-table .att-import-col-assigned {
  width: 5.25rem;
  min-width: 5.25rem;
  max-width: 5.25rem;
}

.emp-import-valid-page .att-import-review-table .att-import-col-dn {
  width: 5.5rem;
  min-width: 5.5rem;
  max-width: 5.5rem;
}

.emp-import-valid-page .att-import-review-table {
  --att-import-section-row-height: 1.55rem;
}

.emp-import-valid-page .att-import-review-table thead tr.att-import-section-row th {
  top: 0;
}

.emp-import-valid-page .att-import-review-table thead tr.att-import-col-row th {
  top: var(--att-import-section-row-height);
  z-index: 4;
}

.emp-import-valid-page .att-import-review-table .att-import-times-group {
  text-align: center;
  letter-spacing: 0.04em;
}

/* Clear gap between Assigned Code and the Times group / IN subcolumn. */
.emp-import-valid-page .att-import-review-table th.att-import-col-assigned + th.att-import-times-group,
.emp-import-valid-page .att-import-review-table thead tr.att-import-col-row > th.att-import-col-time:first-child,
.emp-import-valid-page .att-import-review-table td.att-import-col-assigned + td.att-import-col-time {
  padding-left: 1rem;
}

.emp-import-valid-page .att-import-review-table .att-import-col-time {
  width: 4.6rem;
  min-width: 4.6rem;
  max-width: 4.6rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.emp-import-valid-page .att-import-review-table .att-import-col-time-out {
  width: 5.6rem;
  min-width: 5.6rem;
  max-width: 5.6rem;
}

.emp-import-valid-page .att-import-review-table .att-import-col-ready {
  width: 2.75rem;
  min-width: 2.75rem;
  max-width: 2.75rem;
  text-align: center;
}

.emp-import-valid-page .att-import-review-table .att-import-col-days {
  width: 4rem;
  min-width: 4rem;
  max-width: 4rem;
  text-align: center;
}

.emp-import-valid-page .att-import-review-table .att-import-col-sample {
  width: 18rem;
  min-width: 12rem;
  max-width: 18rem;
}

.emp-import-valid-page .att-import-review-table .att-import-col-code .emp-list-code-link,
.emp-import-valid-page .att-import-review-table .att-import-col-name .emp-list-name-link {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emp-import-valid-page .att-import-review-table .att-import-dn-readonly {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
}

.emp-import-valid-page .att-import-review-table .att-import-dn-value {
  min-width: 0.9rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--navy, #1f3864);
}

.emp-import-valid-page .att-import-review-table .att-import-dn-edit {
  color: #2e5395;
  line-height: 1;
}

.emp-import-valid-page .att-import-review-table .att-import-dn-edit:hover,
.emp-import-valid-page .att-import-review-table .att-import-dn-edit:focus {
  color: var(--navy, #1f3864);
}

.att-import-dn-modal-icon,
.att-import-times-modal-icon {
  background: #eef4fb;
  color: #2e5395;
}

.emp-import-valid-page .att-import-review-table .att-import-times-readonly {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  max-width: 100%;
}

.emp-import-valid-page .att-import-review-table .att-import-time-value {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-variant-numeric: tabular-nums;
  border-radius: 0.25rem;
  padding: 0.05rem 0.28rem;
  line-height: 1.35;
}

.emp-import-valid-page .att-import-review-table .att-import-time-edited {
  background: #ebf3ff;
  color: #2563eb;
}

.emp-import-valid-page .att-import-review-table .att-import-time-edited .att-import-time-text {
  font-weight: 600;
  color: #2563eb;
}

.emp-import-valid-page .att-import-review-table .att-import-time-edited-dot {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: #2563eb;
  flex-shrink: 0;
}

.emp-import-valid-page .att-import-review-table .att-import-times-edit {
  color: #2e5395;
  line-height: 1;
}

.emp-import-valid-page .att-import-review-table .att-import-times-edit:hover,
.emp-import-valid-page .att-import-review-table .att-import-times-edit:focus {
  color: var(--navy, #1f3864);
}

.att-import-times-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 0.75rem;
}

.att-import-times-fields .att-import-time-error {
  margin-top: 0.2rem;
}

.att-import-time-seg-box {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  width: 100%;
  min-height: calc(1.5em + 0.5rem + 2px);
  padding: 0.15rem 0.4rem;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  background: #fff;
}

.att-import-time-seg-box:focus-within {
  border-color: var(--hrms-dd-border-focus, #86b7fe);
  box-shadow: 0 0 0 0.15rem rgba(46, 83, 149, 0.16);
}

.att-import-time-seg-box.is-invalid {
  border-color: #dc3545;
}

.att-import-time-seg-box.is-invalid:focus-within {
  box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.2);
}

.att-import-time-seg-part {
  width: 1.7rem;
  border: 0;
  background: transparent;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 0.84rem;
  line-height: 1.4;
  padding: 0;
  color: #1f2a37;
}

.att-import-time-seg-part:focus {
  outline: none;
}

.att-import-time-seg-part::placeholder {
  color: #adb5bd;
  font-size: 0.72rem;
}

.att-import-time-seg-colon {
  color: #6c757d;
  font-weight: 600;
  user-select: none;
  pointer-events: none;
  line-height: 1;
}

/* Employee Master Import — Validate & Preview summary (alert-info shell). */
.emp-import-summary {
  padding: 1rem 1.1rem 1.05rem;
}

.emp-import-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
  padding-bottom: 0.85rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid rgba(31, 56, 100, 0.12);
}

.emp-import-summary-source {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.emp-import-summary-source-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5f6b7c;
}

.emp-import-summary-file {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.emp-import-summary-status {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  max-width: 100%;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.emp-import-summary-status--ready {
  background: #fde8ea;
  color: #9f1239;
}

.emp-import-summary-status--committed {
  background: #ddf7ea;
  color: #008348;
}

.emp-import-summary-status--failed {
  background: #fde8ea;
  color: #c62535;
}

.emp-import-summary-status--cancelled,
.emp-import-summary-status--neutral {
  background: #eef2f7;
  color: #405477;
}

.emp-import-summary-section-label {
  margin-bottom: 0.55rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
}

.emp-import-summary-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.emp-import-summary-metrics--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.emp-import-summary-metric {
  min-width: 0;
  padding: 0.7rem 0.8rem;
  background: #fff;
  border: 1px solid rgba(31, 56, 100, 0.08);
  border-radius: 0.55rem;
}

.emp-import-summary-metric-label {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #6c757d;
}

.emp-import-summary-metric-value {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy);
}

.emp-import-summary-metric--eligible .emp-import-summary-metric-value {
  color: #198754;
}

.emp-import-summary-metric--errors .emp-import-summary-metric-value {
  color: #dc3545;
}

.emp-import-summary-metric--warnings .emp-import-summary-metric-value,
.emp-import-summary-metric--blocked .emp-import-summary-metric-value {
  color: #b45309;
}

.emp-import-summary-metric-hint {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
}

.emp-import-summary-metric--eligible .emp-import-summary-metric-hint {
  color: #198754;
}

.emp-import-summary-metric--warnings .emp-import-summary-metric-hint {
  color: #b45309;
}

.emp-import-summary-message {
  margin-top: 0.85rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.4;
}

/* Lightweight form busy status (Bootstrap spinner + message). */
.emp-import-actions-row {
  align-items: center;
}

.emp-import-actions-row > .btn,
.emp-import-actions-row > form > .btn {
  align-self: center;
}

.hrms-form-busy {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
}

.hrms-form-busy.d-none {
  display: none !important;
}

.hrms-form-busy--primary {
  color: var(--accent);
}

.hrms-form-busy--primary .spinner-border {
  color: var(--accent);
  border-right-color: transparent;
}

.hrms-form-busy--success {
  color: #198754;
}

.hrms-form-busy--success .spinner-border {
  color: #198754;
  border-right-color: transparent;
}

/* Employee Master Import — Result outcome card. */
.emp-import-result {
  max-width: 40rem;
}

.emp-import-result-card .card-body {
  padding: 1.15rem 1.2rem 1.2rem;
}

.emp-import-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.95rem;
}

.emp-import-result-title {
  margin: 0 0 0.35rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy);
}

.emp-import-result-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.4rem;
  font-size: 0.82rem;
  color: #5f6b7c;
}

.emp-import-result-meta-sep {
  color: #c4cad6;
}

.emp-import-result-file {
  overflow-wrap: anywhere;
  word-break: break-word;
  color: #405477;
}

.emp-import-result-message {
  margin-top: 0.85rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.4;
}

.emp-import-result-message.is-failure {
  color: #9f1239;
}

.emp-import-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid #eef0f4;
}

@media (max-width: 991.98px) {
  .emp-import-summary-metrics:not(.emp-import-summary-metrics--3) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .emp-import-summary-head,
  .emp-import-result-head {
    flex-direction: column;
    align-items: stretch;
  }

  .emp-import-summary-status {
    align-self: flex-start;
  }

  .emp-import-summary-metrics {
    grid-template-columns: 1fr;
  }

  .emp-import-result-actions .btn {
    width: 100%;
  }
}

/* KPI odometer — presentation only; does not change card layout. */
.hrms-kpi-rolling {
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .hrms-kpi-rolling {
    transition: none !important;
  }
}